2I010 - Annexe 2: Aide-mémoire des balises HTML Structuration de la page page HTML en-tête de page titre de la page corps de la page <html> … </ html > <head> … </ head > <title> … </ title > <body> … </ body > Caractères accentués è à ç è à ç é ù é ù ê ô ê ô Mise en page paragraphe division centrer énumération énumération numérotée un champs d'une énumération texte en gras texte en italique texte indenté titre niveau n ( 1 ≤ n ≤ 6 ) barre horizontale passage à la ligne changement de style dans un paragraphe <p> … </p> <div>…</ div > <center> … </ center > <ul> … </ ul > <ol> … </ ol > <li> … </ li > <b> … </b> <i> … </i> <blockquote> … </ blockquote > <hn> … </hn> <hr/> <br/> <span> … </span> Liens hyper-texte & insertion d'image Définition d'une ancre Lien hyper-texte interne Lien hyper-texte extérieur Insertion d'une image <a name='chaîne_de_caractères'>...</a> <a href='#ancre'>...</a> où ancre est le nom donné à l'ancre. < a href ='URL#ancre'>...</a> où ancre est le nom donné à l'ancre. <img src='URL' alt='texte de substitution' /> Tableau définition d'un tableau définition d'une ligne définition d'une cellule <table> … </ table > <tr> … </ tr > <td> … </ td > Formulaire & rubriques d'un formulaire définition d'un formulaire <form action='URL du script' method='post ou get'> contenu du formulaire </form> zone de saisie de texte <input type='text' name='nom' [value='valeur_par_défaut'] size='xx' [maxlength= 'xx'] /> zone de saisie de texte caché <input type='password' name='nom' [value='défaut'] size='xx' [maxlength ='xx'] /> définition d'un bouton radio < input type ='radio' name ='nom' value ='valeur' [checked] /> Page 1 définition d'une case à cocher < input TYPE='checkbox' name ='nom' value ='valeur' [checked] /> définition d'un menu déroulant <select name ='nom'> éléments du menu (voir ci-dessous) </ select > définition d'un élément d'un menu déroulant <option [selected='selected']> …</ option > définition d'une rubrique cachée < input type ='hidden' name ='nom' value ='valeur' /> définition d'un bouton de soumission < input type ='submit' name ='nom' value ='valeur' /> définition d'un bouton de remise à zéro d'un formulaire < input type ='reset' value ='nom' /> Esthétique en HTML (CSS) Il est possible de changer certaines propriétés (couleur du texte, couleur de fond, police de caractère) utilisée pour la plupart des éléments HTML au moyen de l'attribut style. Les modifications ne seront prises en compte que si le navigateur est capable de les interpréter (police de caractère disponible par exemple). La liste des propriétés modifiées est donnée sous la forme Propriété_1: valeur_1; …; Propriété_i: valeur_i; … • Pour modifier la police utilisée: font-family: nom_de_la_police où nom_de_la_police est le nom de la police (attention, vous pouvez avoir des surprises si cette police n'est pas installée sur la machine qui exécute le navigateur lisant votre page). Exemples de noms de police : "times", "courier", "arial", "serif", "sans-serif", "cursive", "fantasy", "monospace"… • Pour modifier la couleur de la police color: #RRVVBB où RR correspond à un pourcentage de rouge, VV à un pourcentage de vert et BB à un pourcentage de bleu. Les pourcentages sont des valeurs alphanumériques (précision, 100/256 = 0,39%) On est en logique d'addition de couleurs. Ainsi #FFFFFF (100% de rouge, 100% de vert et 100% de bleu) signifie blanc et #000000 signifie noir. • Pour modifier la couleur de fond background: #RRVVBB • Pour modifier l'alignement du texte (pour les balises <div> et <p> entre autres), text-align: alignement où alignement prend la valeur left (aligné à gauche), right (aligné à droite), center (centré) ou justify (justifié). Ainsi, pour obtenir un paragraphe où le texte est centré et bleu, <p style='color: #0000FF; text-align: center'>…</p> Il est également possible de changer un style à l'intérieur d'un paragraphe en utilisant la balise <span>. Ainsi, <p style='text-align: center'>Je suis sur fond blanc <span style='background: #BBBBBB'>et moi sur fond gris</span> !</P> s'affichera Je suis sur fond blanc et moi sur fond gris ! Page 2