Balises Html Et Proprietes Css
Voir au format PDFVous êtes ici : >> HTML-CSS / Balises Html Et Proprietes Css
Temps d'étude : 45 min. 
Niveau : Facile.Fichier(s) utile(s) pour ce cours : /
Les balises
Balises Principales
| Balise | Description | Exemple |
|---|---|---|
| <Doctype html> | Doctype est une balise permettant de préciser le type du document, la version du langage Html utilisé et est indispensable pour valider notre code avec le W3C | <Doctype html> |
| <html> | Balise principale contenant le document entier (indispensable) | <html></html> |
| <head> | Entêtes du document (indispensable) | <head></head> |
| <body> | Corps du document, contenu de la page web (indispensable) | <body></body> |
Balises d'entêtes
(à l'intérieur de la balise head)| Balise | Description | Exemple |
|---|---|---|
| <meta> | Informations sur la page web (description, encodage, etc.) |
<meta charset="utf-8"> <meta description="description du site web"> |
| <link> | Liaison à une feuille de style, police CSS3, etc. Il s'agit d'une balise autofermante. |
|
| <style> | Intégre du code CSS directement dans le document Html | |
| <script> | Intégre du code JavaScript |
<script src="http://"> </script> <script> votre code JS</script> |
| <title> | Titre de la page web |
<title> Titre de la page web </title> |
Voici un exemple récapitulant les principales balises que nous venons de voir :
EXEMPLE HTML
<!Doctype html> <html> <head> <meta charset="utf-8">Ma Page </head> <body> ... </body> </html>
Balises de structuration de contenu sémantique (zoning)
zoning| Balise | Description | Exemple |
|---|---|---|
| <header> | Haut de site |
<header> </header> |
| <nav> | Zone de navigation avec des liens (menu). |
<nav> </nav> |
| <section> | Partie d'une page web |
<section> </section> |
| <main> | Contenu principal |
<main> </main> |
| <article> | Contenu thématique |
<article> </article> |
| <aside> | Contenu apparenté |
<aside> </aside> |
| <footer> | Bas de page |
<footer> </footer> |
Balises de structuration de contenu neutre
(zoning)| Balise | Description | Exemple |
|---|---|---|
| <div> | Zone de site (Div = Division) de type block |
<div> </div> |
| <span> | Balise d'encapsulation de type inline |
<span> </span> |
Voici ceux à quoi pourrrait ressembler l'utilisation de ces balises dans le cadre de la structuration d'un site web :
Balise de lien hypertext
| Balise | Description | Exemple |
|---|---|---|
| <a> | Permet de faire un lien |
<a href=""> Lien </a> |
Balises de contenu texte
| Balise | Description | Exemple |
|---|---|---|
| <h1> | Titre principal (de niveau 1) |
<h1> Titre 1 </h1> |
| <h2> | Sous Titre (de niveau 2) |
<h2> Titre 2 </h2> |
| <h2> | Titre (de niveau 3) |
<h2> Titre 3 </h2> |
| <h4> | Titre (de niveau 4) |
<h4> Titre 4 </h4> |
| <h5> | Titre (de niveau 5) |
<h5> Titre 5 </h5> |
| <h6> | Titre (de niveau 6) |
<h6> Titre 6 </h6> |
| <p> | Paragraphe |
<p> texte dans un paragraphe </p> |
| <strong> <b> |
Texte en gras |
<strong> texte en gras </strong> |
| <strike> <del> <s> |
Texte barré |
<strike> texte barré </strike> <del> texte barré </del> <s> texte barré </s> |
| <cite> <blockquote> <q> |
Citation |
<cite> Citation... </cite> |
| <br> | Passage à la ligne (balise autofermante) |
<br> |
| <hr> | Tire un trait de séparation (balise autofermante) |
<hr> |
| <em> <i> |
Texte en italique |
<em> ... </em> <i> ... </i> |
| <u> <u> |
Texte souligné |
<u> ... </u> |
| <mark> |
Texte marqué (surlignage) |
<mark> texte </mark> |
| <small> | Texte petit |
<small> texte </small> |
Balises de contenu média
| Balise | Description | Exemple |
|---|---|---|
| <img> | Affiche une image (balise autofermante) |
<img src="monimage.png" alt="texte de remplacement" title="titre de l'image"> |
| <video> <source> |
Vidéo en lecture |
<video> <source src="mavideo.mp4"> </video> |
| <audio> | Permet de lire une musique |
<audio src="musique.mp3" controls></audio> |
| <object> <embed> <param> |
Intégre une animation flash, ou une autre ressource type applet java (balise applet non prise en charge par Html5) |
<object> <embed src="animation.swf"></embed> </object> |
| <iframe> | Permet d'introduire un contenu dans un autre (exemple : GoogleMap, Vidéo YouTube, etc.) |
<iframe src="..."></iframe> |
| <figure> <figcaption> |
Permet de contenir un élément média et d'y ajouter une légende |
<figure> <img src="monimage.png" alt="texte de remplacement" title="titre de l'image"> <figcaption> legend <figcaption> </figure> |
| <map> <area> |
Map définit l'image à traiter, area permet de créer des zones cliquables sur l'image |
<map name="monImage"> <area shape="rect" href="http://www.site.com" title="..." alt="..." target="_blank" coords="12,12,80,80"> <area shape="rect" href="http://www.site.com" title="..." alt="..." target="_blank" coords="20,20,90,90"> </map> |
| <canvas> | Permet de dessiner un graphique (avec l'aide d'un langage complémentaire type JavaScript) |
<canvas> ... </canvas> |
Balises de liste
| Balise | Description | Exemple |
|---|---|---|
| <ul> | Ouvre une liste non ordonnée |
<ul> ... </ul> |
| <ol> | Ouvre une liste ordonnée |
<ol> ... </ol> |
| <li> | Element de la liste |
<ul> <li>...</li> <li>...</li> </ul> |
| <dl> | Définition d'une liste |
<dl></dl> |
| <dt> | Définition d'un terme |
<dt></dt> |
| <dd> | Définition description |
<dd></dd> |
Balises de tableau
| Balise | Description | Exemple |
|---|---|---|
| <table> | Ouvre un tableau de données |
<table> ... </table> |
| <caption> | Titre du tableau |
<caption> ... </caption> |
| <tr> | Ligne du tableau |
<table> <tr> ... </tr> </table> |
| <thead> | Partie haute du tableau |
<table> <tr> <thead> ... </thead> </tr> </table> |
| <tbody> | Corps du tableau |
<table> <tr> <tbody> ... </tbody> </tr> </table> |
| <tfoot> | Bas du tableau |
<table> <tr> <tfoot> ... </tfoot> </tr> </table> |
| <th> | cellule d'entête |
<table> <tr> <th> ... </th> </tr> </table> |
| <td> | cellule |
<table> <tr> <td> ... </td> </tr> </table> |
Balises de formulaire
| Balise | Description | Exemple |
|---|---|---|
| <form> | Formulaire |
<form> ... </form> |
| <label> | Etiquette de formulaire (souvent reliée à une case de saisie) |
<label for="..."> ... </label> |
| <input> | Champ de formulaire (souvent pour la saisie) |
<input type="text"> |
| <textarea> | Zone de saisie |
<textarea> ... </textarea> |
| <select> <option> <optgroup> |
Liste déroulante (select) à option (option), parfois regroupée (optgroup) |
<select> <option> ... </option> <option> ... </option> </select> |
| <datalist> | Liste de suggestions |
<datalist> <option> ... </option> <option> ... </option> </datalist> |
| <fieldset> <legend> |
Groupe de champs (fieldset) avec une legende (legend) |
<fieldset> <legend>...</legend> ... </fieldset> |
Cliquez ici pour voir les balises de formulaire en détails
Balises diverses
| Balise | Description | Exemple |
|---|---|---|
| <!-- --> | Commentaire (non interprété) |
<!-- commentaire --> |
| <base> | Etiquette de formulaire (souvent reliée à une case de saisie) |
|
Le lien nous emménera vers l'adresse site.com/boutique.
| <bdo> <bdi> |
Texte avec direction de lecture différente |
<bdo> <bdi> ... </bdi> </bdo> |
| <button> | Bouton |
<button> ... </button> |
| <code> | Définit une portion de code |
<code> ... </code> |
| <colgroup> <col> |
Groupe de colonnes |
<colgroup> <col> ... </col> <col> ... </col> </colgroup> |
| <summary> <details> |
Intitulé et details sur un sujet |
<details> </details> |
| <dfn> | Défintition |
<dfn> </dfn> |
| <dialog> | Boite de dialogue dans une page web |
<dialog> </dialog> |
| <abbr> (anciennement : <acronym>) | Définit une abbréviation |
<abbr> ... </abbr> |
| <address> | Précise l'adresse de l'auteur du document |
<address> ... </address> |
| <ins> | Texte insséré dans un document |
<ins> ... </ins> |
| <kbd> | Définit la saisie au clavier |
<kbd> ... </kbd> |
| <keygen> | Définit une clé de sécurité pour les échanges avec un formulaire |
|
| <menu> <menuitem> |
Définit une barre d'outils |
|
| <noscript> | Detecte et propose un contenu alternatif pour les internautes n'ayant pas la possibilité d'utiliser JavaScript |
|
| <output> | Affiche le résultat d'un calcul |
|
| <pre> | Texte préformaté |
|
| <progress> | Barre de progression |
|
| <sub> | Texte en indice |
|
| <time> | Définit l'heure et la date |
|
| <track> | Définit du texte pour les éléments médias |
|
| <var> | Permet de mettre en forme une variable lors de l'affichage (programmation) |
... |
| <xmp> | Permet de ne pas interpréter du code html au sein d'une page html |
|
| <hgroup> | Regroupement d'éléments de haut niveau |
... |
D'autres balises non officielles existent :
| Balise | Description | Exemple |
|---|---|---|
| <marquee> | Permet de faire défiler du texte |
|
| <blink> | Permet de faire clignoter du texte |
|
Certaines balises non officielles ne vous permettront pas de passer la validation W3C, et pas non plus une compatibilité tout navigateur, il faut donc éviter de les utiliser. Il existe des alternatives pouvant avoir des comportements similaires avec CSS ou JS.
Les balises absentes de ces listes sont soit trop anciennes et par conséquent plus valides w3c, soit peu importantes (ou soit un oubli :p, et oui ça peut arriver !).
Liste des propriétés CSS
Liste des propriétés CSS pour la mise en forme de texte
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| color | Comment changer la couleur du texte ? | Couleur du texte |
color: red; |
| font-size font-size-adjust font |
Comment changer la taille du texte ? | Taille du texte |
font-size: 1em; |
| font-style font |
Comment passer un texte en italique ? | Orientation du texte |
font-style: italic; |
| font-weight font |
Comment mettre un texte en gras ? | Fonte du texte |
font-weight: bold; |
| font-family font |
Comment modifier la police d'écriture ? | Police d'écriture |
font-family: verdana; |
| @font-face font |
Comment importer une police d'écriture css3 ? | Import d'une police personnalisée |
@font-face{}
|
| font-variant font |
Comment modifier l'apparence du texte ? | Type de lettre (ex: petites capitales) |
font-variant: small-caps; |
| text-transform | Comment mettre des majuscules au texte ? | Transformation du texte (ex: majuscules) |
text-transform: capitalize; |
| text-align text-align-last |
Comment centrer un texte ? Comment justifier un texte ? |
Alignement du texte |
text-align: center; text-align: justify; |
| vertical-align | Comment aligner du texte vertical ? | Alignement du texte |
vertical-align: middle; |
| line-height | Comment modifier l'interligne du texte ? | Interligne du texte |
line-height: 20px; |
| text-indent | Comment modifier l'indentation du texte ? | Indentation du texte |
text-indent: 20px; |
| letter-spacing word-spacing |
Comment modifier l'espace entre les lettres d'un texte ? Comment modifier l'espace entre les mots d'un texte ? |
Espacement des lettres entres elles |
letter-spacing: 2px; word-spacing: 3px; |
| white-space | Comment modifier la césure d'un texte ? | Césure du texte |
letter-spacing: nowrap; |
| word-wrap | Comment forcer la césure d'un texte ? | Régle de césure pour le texte |
word-wrap: break-word; |
| text-shadow | Comment ajouter de l'ombre sur un texte ? | Ombre sur le texte |
text-shadow: 3px 3px 3px #c0c0c0; |
| text-decoration text-decoration-line text-decoration-style |
Comment retirer l'effet souligné sur un lien ? Comment ajouter un effet souligné ? |
Présentation du texte sous forme de lien |
text-decoration: none; text-decoration: underline; |
Liste des propriétés CSS pour les fonds
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| background background-color background-image |
comment changer la couleur de fond ? comment mettre une image de fond ? |
couleur ou image de fond |
background: red; background: url(image.png); |
| background background-attachment |
comment fixer une image au fond de la page ? | Fixation de l'image de fond |
background-attachment: fixed; |
| background background-repeat |
comment stopper la répétition du fond de page ? | Répétition du fond de page |
background-repeat: no-repeat; |
| background background-position |
comment modifier la position du fond de la page ? | position de l'image de fond (arrière plan) |
background-position: left top; |
| background background-cover |
comment adapter la taille d'une image au fond de la page ? | couverture de fond |
background-size: cover; |
| background linear-gradient |
comment faire un dégradé ? | Dégradé |
background: linear-gradient( #f6eadd, #f9dac3); |
| background background-origin |
comment mettre un fond précisément sous le texte ? | Positionnement du fond par rapport au contenu |
background-origin: content-box; |
| opacity background |
comment gérer une opacité ? | Opacité |
opacity: 0.8; /* donne un effet opaque également au texte contenu dans une zone, pas idéal */ background-color: rgba(255, 255, 255, 0.3); /* a privilégier */ |
Liste des propriétés CSS appliquable pour les zones
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| width min-width max-width |
Comment modifier la largeur d'une zone ? | Largeur |
width: 50%; min-width: 30px; |
| height min-height max-height |
Comment modifier la hauteur d'une zone ? | Largeur |
height: 10vh; min-height: 10px; |
| margin margin-top margin-right margin-bottom margin-left |
Comment modifier la marge extérieure d'une zone ? | Marges extérieures |
margin: 10px 9px 8px 7px; /* 10px en haut - 9px à droite - 8px en bas - 7px à gauche */ margin: 10px 7px; /* 10px en haut et en bas - 7px à gauche et à droite */ margin: 10px 9px 8px; /* 10px en haut - 9px à droite - 8px en bas. */ margin: 10px; /* 10px tout autour (haut, droite, bas, gauche). */ margin-top: 10px; /* top en haut */ margin-right: 10px; /* right à droite */ margin-bottom: 10px; /* bottom en bas */ margin-left: 10px; /* left à gauche */ |
| padding padding-top padding-right padding-bottom padding-left |
Comment modifier la marge intérieure d'une zone ? | Marges intérieures |
padding: 10px 9px 8px 7px; /* 10px en haut - 9px à droite - 8px en bas - 7px à gauche */ padding: 10px 7px; /* 10px en haut et en bas - 7px à gauche et à droite */ padding: 10px 9px 8px; /* 10px en haut - 9px à droite - 8px en bas. */ padding: 10px; /* 10px tout autour (haut, droite, bas, gauche). */ padding-top: 10px; /* top en haut */ padding-right: 10px; /* right à droite */ padding-bottom: 10px; /* bottom en bas */ padding-left: 10px; /* left à gauche */ |
| border-width border |
Comment modifier l'épaiseur d'une bordure ? | Epaisseur d'une bordure |
border-width: 3px; |
| border-color border |
Comment modifier la couleur d'une bordure ? | Couleur d'une bordure |
border-color: red; |
| border-style border |
Comment modifier le trait d'une bordure | Type de bordure |
border-style: dotted; |
| border-radius border |
Comment faire une bordure arrondie ? | Arrondie d'une bordure |
border-radius: 10px; |
| border-top border-right border-bottom border-left border |
Comment mettre une bordure seulement en bas ? | Position d'une bordure |
border-bottom: 2px; |
| border-image border |
Comment mettre une image en guise de bordure ? | Image de bordure |
border-image: url(border.png); |
| box-shadow | Comment ajouter de l'ombre ? | Ombre d'une zone |
box-shadow: 3px 3px 3px #c0c0c0; |
Liste des propriétés CSS permettant de positionner les zones d'une page web
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| display | Comment modifier le type d'une zone ? | Type d'élément |
display: flex; display: block; display: inline; display: table; |
| position top right bottom left |
Comment modifier l'emplacement d'une zone ? | Position d'une zone |
position: absolute; position: relative; position: fixed; top: 50%; left: 0; /* right: 0; bottom: 0; */ |
| float clear |
Comment mettre deux éléments côte à côte ? | Element flottant |
float: left; float: right; clear: left; |
Liste des propriétés CSS permettant de mettre en forme les listes
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| list-style-type list-style |
Comment modifier le style d'une liste ? | Style de puce dans une liste |
list-style-type: circle; /* disc, square, decimal */ |
| list-style-position list-style |
Comment modifier la position des puces dans une liste ? | Position des puces dans une liste |
list-style-position: inside; |
| list-style-image list-style |
Comment mettre une image à la place d'une puce dans une liste ? | Image dans une puce de liste |
list-style-image: url(monimage.png); |
Liste des propriétés CSS permettant de mettre en forme un formulaire
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| resize | Comment empêcher qu'un textarea soit redimensionné ? | Dimensions Textarea |
resize: horizontal; |
Liste des propriétés CSS permettant de mettre en forme les tableaux
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| border-collapse | Comment modifier les bordures d'un tableau ? | Applati le trait d'un tableau en fusionnant les cellules |
border-collapse: collapse; |
| empty-cells | Comment afficher les cellules vides d'un tableau ? | Affichage des cellules vides |
empty-cells: show; |
| caption-side | Comment afficher le titre d'un tableau en bas ? | Position du titre du tableau |
caption-side: bottom; |
| border-spacing | Comment modifier l'écart entre les cellules d'un tableau ? | Ecart entre les cellules |
border-spacing: 10px 30px; |
Liste des propriétés CSS d'animation
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| animation, animation-delay, animation-direction, animation-duration | Comment gérer une animation ? | Animation |
- |
| transform | - | Transform |
transform: rotate(-360deg); |
| transition, transition-duration, transition-delay | Comment ... ? | Effet proressif |
clip: rect(0px,60px,200px,0px); |
| marquee-direction | Comment faire défiler du texte ? | Défilement de texte |
- |
Liste des propriétés CSS d'affichage divers
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| z-index | Comment afficher un élément au dessus de l'autre ? | Permet de donner une priorité d'affichage lorsque 2 éléments se superposent |
z-index: 1000; |
| overflow overflow-x overflow-y |
Comment gérer la scrollbar (ascenceur, barre de défilement) ? | Scrollbar |
overflow-x: hidden; |
| clip | Comment afficher une partie d'une image ? | Affichage coupé |
clip: rect(0px,60px,200px,0px); |
Propriétés diverses :
| Propriété | Question | Description | Exemple |
|---|---|---|---|
| tab-size | - | Taille utilisé pour diffuser le texte |
text-shadow: 3px 3px 3px #c0c0c0; |
| direction | Comment changer la direction du texte ? | Direction du texte |
direction: rtl; |
| cursor | Comment changer le curseur ? | Curseur |
cursor: pointer; |
Vous pouvez aussi consulter les sélécteurs en CSS.
HTML CSS
1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web
