Partie 4 : Annexes
Voici une liste de balise que vous pouvez trouver en html, cette liste est non-exhaustive mais ce sont les principales balises utilisées
| Balises | type | Description |
|---|---|---|
| <p> | block | Paragraphe |
| <br /> | inline | Saut de ligne |
| <a> | inline | Lien hypertext , attribut principal href |
| <img /> | inline | Insère une image |
| <h1> | block | Titre de niveau 1 |
| <h2> | block | Titre de niveau 2 |
| <h3> | block | Titre de niveau 3 |
| <h4> | block | Titre de niveau 4 |
| <h5> | block | Titre de niveau 5 |
| <h6> | block | Titre de niveau 6 |
| <em> | inline | Mise en valeur: en italique |
| <strong> | inline | Mise en valeur: en gras |
| <sub> | inline | Mise en indice |
| <sup> | inline | Mise en exposant |
| <q> | inline | citation (courte) |
| <cite> | inline | citation (moyenne) |
| <blockquote> | block | citation (longue), balise de paragraphe obligatoite à l'intérieur du "blockquote" |
| <acronym> | inline | Défini l'acronyme, a ttribut preincipal title |
| <hr /> | block | Crée une ligne de séparation hotizontale |
| <del> | inline | Permet d'indiquer un texte qui a été supprimé le texte est généralement barré |
| <ins> | inline | Permet d'indiquer un texte qui a été inséré le texte est généralement souligné |
| <pre> | block | Le texte à l'intérieur de la balise sera affiché tel qu'il a été tapé dans le code (espaces et entrées compris). |
| Balises | type | Description |
|---|---|---|
| <ul> | block | Liste à puces non numérotée. Vous devez mettre un <li></li> par élément de la liste. |
| <ol> | block | Liste à puces numérotée. Vous devez mettre un <li></li> par élément de la liste. |
| <li> | list-item | Crée un élément d'une liste |
| <dl> | block | Liste de définitions. |
| <dt> | block | Terme à définir |
| <dd> | block | Définition du terme |
| Balises | type | Description |
|---|---|---|
| <table> | block | Délimite un tableau |
| <caption> | - | Donne un titre au tableau |
| <tr> | - | Cellule d'en-tête du tableau (mis en gras) |
| <th> | - | Crée une colonne au tableau |
| <td> | - | Crée une colonne au tableau |
| Balises | type | Description |
|---|---|---|
| <form> | block | Balise de création d'un formulaire, délimite le formulaire |
| <fieldset> | block | Regroupe plusieurs éléments d'un formualire |
| <legend> | inline | Donne un titre au groupe d'un formulaire à utilser à l'intérieur de <fieldset> |
| <label> | inline | Titre d'un élément du formulaire |
| <input /> | block | Champ de formulaire |
| <textarea> | block | Zone de saisie multiligne |
| <select> | block | Liste déroulante |
| <option> | block | Elément d'une liste déroulante |
| <optgroup> | block | Groupe d'éléments d'une liste déroulante |
Je vous livre une liste des principaux attributs de design que vous utiliserez le plus souvent, liste non-exhaustive bien sûr, que peuvent prendre les balises. Je ne reviens pas sur les balises que l'on a vu pendant le cours.
| Attributs | Valeurs | Description |
|---|---|---|
| align | left center right char justify |
aligné à gauche de la page aligné au milieu de la page aligné à droite de la page blabla justifie le texte |
| background | url | Affiche une Image de fond |
| bgcolor | red, blue, yellow ... #FFFFFF |
Affiche la couleur en fond (16 couleurs possibles) Affiche la couleur en fond (couleur personnalisée) |
| border | px, em, % | Affiche un cadre |
| bordercolor | red, blue, yellow... #FFFFF |
Couleur du cadre |
| color | red, blue, yellow... #FFFFF |
Couleur du texte |
| height | px, em, % | Défini une hauteur |
| width | px, em, % | Défini une largeur |
Cette liste d'attributs vous permet de décorer un peu votre page web, mais sachez qu' aujourd'hui, on utilise presque plus le html, il a laissé sa place à la combinaison xhtml (extensible hypertext markup language) / css (cascading stylesheets). Et les possibilités de design sont bien plus impressionnantes. Mais ne vous inquietez pas, vous n'avez pas travillé pour rien, car la connaissance du html reste indispensable. Pour être un peu plus clair sur l'association xhtml / css, vous codez la partie xhtml (comme le html) pour faire une structure sans vous préoccupez du design et ensuite vous faites votre feuille css. Je dis sans vous préoccupez du design dans la partie xhtml mais en réalité ont va quand même s'en occuper un peu puisque l'on va lui donner une structure. Mais bon ce n'était pas l'objet de ce cours, je voulais juste vous le précisez car si vous êtes amenés par la suite a faire un site vous utiliserez très certainement le xhtml/css, puis dans un autre temps le php ou autre langage dynamique, eh oui il vous faut encore traiter vos formulaires maintenant !
Ainsi ce fini ce cours sur le html, j'espère que vous avez bien compris tout ce que je vous ai raconté et surtout n'oubliez pas qu'avec la pratique ça devient assez simple.
Il vous reste à faire les travaux dirigés maintenant, allez au boulot, bon courage !