Les listes Une liste est un paragraphe structuré contenant une suite d'articles. Il en existe trois types: Ordonnée Non ordonnée De définition Voici leur syntaxe: Conteneur Type de liste Effet Visuel <ol> </ol> <ul> </ul> <dl> </dl> <li> article 1 </li> <li> article 2 </li> <li> article 1 </li> <li> article 2 </li> <dt>terme</dt> <dd>définition</dd> Ordonnée Non ordonnée De définition 1. article 1 2. article 2 3. article 3 article 1 article 2 article 3 article 1 définition 1 article 2 Il existe des attributs spécifiques aux listes: Attribut Valeur Effet Visuel définition 2 COMPACT PLAIN SEQNUM START CONTINUE TYPE (pour les listes ordonnées) TYPE (pour les listes non-ordonnées) 1 A a I i circle square disc resserre l'interligne supprime les puces définit le premier numéro définit le premier numéro repart du numéro où il s'était arrêté à la liste précédente numérotation chiffrée (par défaut) numérotation en capitales numérotation en bas de casse numérotation en chiffres romains (I, II, III, IV...) numérotation en chiffres romains en bas de casse puce circulaire puce carrée puce en disque
Les en-têtes Ils fonctionnent par paire (<balise></balise>), il en existe 6 niveaux: Balise Effet Visuel H1 H2 H3 H4 H5 H6 Les attributs Les attributs suivants sont placés dans les marqueurs de structure pour mettre en place les éléments: Attribut Valeur Effet Visuel LEFT LEFT RIGHT RIGHT ALIGN CENTER CENTER JUSTIFY JUSTIFY Interdit de reporter des mots d'une NOWRAP ligne à l'autre Attribue un nom au contenu du ID marqueur (pour faire des liens) LANG Spécifie un langage différent Assigne une classe au contenu (pour CLASS les feuilles de style) Utilisé dans le cas d'un texte entrourant une image. Il permet de CLEAR descendre dans la page aussi loin qu'il est nécessaire pour atteindre une marge libre Ils s'utilisent de la manière suivante: <MARQUEUR ATTRIBUT1=XXXXX ATTRIBUT2=XXXX> Texte </MARQUEUR> Par exemple: <H1 ALIGN=LEFT> Texte aligné à gauche <H1> Paragraphes HTML considère les paragraphes comme des blocs de texte. Les browsers répartissent au mieux leur contenu dans leur fenêtre à moins qu'ils n'aient rencontré un attribut NOWRAP ou NOBR. A l'intérieur d'un paragraphe, les espaces, tabulations et retours chariot comptent pour un seul espace (il ne sert à rien de mettre plusieurs espaces, il faut recourir à un autre moyen). La mise en page par blocs de texte est réalisé par l'intermédiaire de la paire de balises <p> et </p>. Ce marqueur accepte n'importe lequel des attributs vus précédemment.
Le retour chariot (retour à la ligne simple) est réalisé grâce à la balise <br> On peut aussi insérer une ligne horizontale grâce à la balise <hr>. Balise Attribut Effet Visuel <br> <p> et </p> <hr size=5 width=20% align=left> SIZE WIDTH ALIGN retour à la ligne paragraphe Blocs d'éléments Il existe des marqueurs servant à indenter le texte. Ce sont des conteneurs. Par exemple: Conteneur Effet Visuel <blockquote> et </blockquote> <address> et </address> <note> et </note> <fn> et </fn> <banner> et </banner> <pre> et </pre> Texte indenté Pour écrire une adresse Pour écrire une note Permet d'avoir une note de fin de page Fixe un bloc de texte par rapport à la page Permet d'écrire un texte PREFORMATTE en conservant entre autres les espaces Comment utiliser les marqueurs? Les marqueurs peuvent être uniques par exemple <br> qui signifie un retour à la ligne ou par paire pour agir sur le texte qu'ils encadrent (le marqueur de fin est alors précédé d'un /) : <marqueur> Votre texte formatté </marqueur> par exemple le marqueur <b> qui met un texte en gras: <b> Ce texte est en gras </b> Les marqueurs ne sont pas sensibles à la casse, c'est-à-dire qu'on peut les écrire indifféremment en minuscules ou en majuscules La page HTML minimum Une page HTML est un simple fichier texte commençant par <HTML> et finissant par </HTML>. Il contient un en-tête décrivant le titre de la page, puis un corps dans lequel on place le contenu de la page L'en-tête est délimité par les balises <HEAD> et </HEAD> Le corps est délimité par les balises <BODY> et </BODY> Ainsi la page minimum sera: <HTML> <HEAD> <TITLE> Le titre </TITLE> </HEAD> <BODY> </BODY> Contenu de votre page
</HTML> Utilisation de tableaux On a souvent besoin de présenter des informations mieux structurées qu'avec des listes. Les tableaux permettent de les afficher en lignes et en colonnes. Les tableaux sont définis comme étant des suites de lignes. Le tableau est encadré par les marqueur <TABLE> et </TABLE>. Le titre du tableau est encadrée par <CAPTION> </CAPTION> Chaque ligne est encadrée par <TR> </TR> (Table row: Ligne du tableau) Les cellules d'en-tête sont encadrées par <TH> </TH> (Table header: En-tête du tableau) Les cellules de valeur sont encadrées par <TD> </TD> (Table Data: Donnée de tableau) Par exemple le tableau: <TABLE BORDER="1"> <CAPTION> Voici le titre du tableau </CAPTION> <TR> </TR> <TR> <TH> Titre A1 </TH> <TH> Titre A2 </TH> <TH> Titre A3 </TH> <TH> Titre A4 </TH> <TH> Titre B1 </TH> <TD> Valeur B2 </TD> <TD> Valeur B3 </TD> <TD> Valeur B4 </TD> </TR> </TABLE> donne le résultat suivant: Voici le titre du tableau Titre A1 Titre A2 Titre A3 Titre A4 Titre B1 Valeur B2 Valeur B3 Valeur B4 Les attributs Attribut Balises auxquelles il s'applique Valeur Effet Visuel ALIGN VALIGN (alignement vertical) THEAD TBODY TH TR TD CAPTION THEAD TBODY TH TR TD CENT ER centré LEFT gauche RIGHT droite JUSTI justifié FY TOP BOTT OM TOP MIDD LE BOTT OM au-dessus en-dessous en haut au milieu en bas
BORDER=n TABLE taille de la bordure CELLPADDING=n TABLE espacement de n pixels entre le contenu des cellules et son encadrement CELLSPACING=n TABLE Epaisseur de la grille intérieure FLOAT TABLE RIGHT Spécifie la position du texte qui suivra LEFT </TABLE> COLS=n TABLE Spécifie le nombre de colonnes NONE FRAME TOP BOTT aucun au-dessus (contrôle les éléments OM en bas TABLE individuels d'encadrement TOPB tout en haut du tableau) OT sur les cotés SIDES tous ALL RULES (contrôle les éléments de la grille des cellules) COLSPAN ROWSPAN TABLE THEAD TBODY TH TR TD THEAD TBODY TH TR TD NONE aucun BASIC basique ROWS ligne COLS colonne ALL tous Fait déborder les cellules sur les colonnes adjacentes Fait déborder les cellules sur les lignes adjacentes qu'est-ce qu'un marqueur de style? Les marqueurs de style modifient la typographie du texte. Ils peuvent être imbriqués dans d'autres marqueurs de style de la même façon qu'on le ferait avec un traitement de texte. Voici une liste de marqueurs de style reconnus par la plupart des browsers (chacun à sa façon si bien que certains ne font pas la différence entre ces styles). Balise de style Effet Visuel <ABBREV> et </ABBREV> <ACRONYM> et </ACRONYM> <AU> et </AU> <BIG> et </BIG> <BLINK> et </BLINK> <CITE> et </CITE> <CODE> et </CODE> <DEL> et </DEL> <DFN> et </DFN> <EM> et </EM> <I> et </I> <INS> et </INS> <KBD> et </KBD> <PERSON> et </PERSON> Abréviation Acronyme L'auteur Police plus grande Clignote (propre à Netscape) Citation Instruction Texte supprimé mais qui reste présent Définition d'instance Emphase Italique Nouveau texte inséré a cet endroit Clavier - Suite de caractères devant être tapés tel quel Accentuation du nom d'une personne
<Q> et </Q> Encadre le texte par des guillemets <S> et </S> Comme strike (barré) <SAMP> et </SAMP> Exemple <SMALL> et </SMALL> Police plus petite <STRONG> et </STRONG> Forte accentuation rendue par du gras <STRIKE> et </STRIKE> Texte barré (comme S) <SUB> et </SUB> Texte en Indice <SUP> et </SUP> Texte en Exposant <TT> et </TT> Caractère de machine à écrire <VAR> et </VAR> Nom d'une variable Présentation des ancrages Les ancrages (liens hypertexte) sont les endroits de la page (généralement en bleu et soulignés) qui emmènent dans un autre endroit lorsqu'on clique dessus. C'est ce qui permet de lier les pages Web entre elles. Ils permettent de naviguer: vers un autre endroit du document vers un autre fichier HTML situé sur le même disque vers une autre machine L'attribut principal des ancrages est HREF Il s'écrit sous la forme: <a href="adresse ou URL">.. </a> Lien externe Il crée un lien vers une page dont on spécifie l'url Par exemple: <a href="http://perso.club-internet.fr/jefkil../index.html"> Comment ça marche? </a> Lien local On peut créer un lien vers une page située sur le même ordinateur en remplaçant l'url par le fichier cible. Ce lien peut être fait de façon relative, en repérant le fichier cible par rapport au fichier source. Si le fichier cible est "index.html" situé dans le répertoire parent, son lien s'écrira: <a href="../index.php3">... </a> Ce lien peut aussi être fait de façon absolue, en écrivant l'adresse du fichier cible de façon locale: <a href="file:///lecteur:/répertoire/fichier.php3">... </a> Les signets On peut créer un signet dans une page c'est-à-dire marquer un endroit précis d'une page pour s'y rendre par hypertexte. Cela se fait grâce à l'attribut NAME ou ID (pour les browsers plus récents) Par exemple: <p id="signet">... </p> On l'apellera grâce au lien suivant: <a href="#signet">... </p> On peut ainsi se déplacer à un endroit précis sur une autre page: <a href="url/nom_du_fichier.html#signet">... </p>
Comment afficher des images sur une page web? Quelques images sur votre site Web le rendront plus attractif. Cependant il ne faut pas sombrer dans l'excès car les images impliquent un temps de chargement assez long. Les images peuvent être sur le même ordinateur que la page ou bien ailleurs sur un autre site (il faudra veiller à ce que l'image soit alors accessible). Il y a grossièrement deux formats d'images que vous pouvez inclure dans votre page: Les images JPEG (.JPG): les images ayant un grand nombre de couleurs seront bien compressées, c'est-àdire qu'elles prendront moins de place, donc nécessiteront un temps de chargement moindre) Les images GIF: Leur taille est faible dans le cas d'images avec peu de couleurs, ce format permet en outre d'avoir des images entrelacées (qui s'affichent progressivement) et des images dont on définit une couleur comme transparente On utilise le marqueur <IMG> pour inclure une image, il ne crée pas de retour à la ligne. Ses trois principaux attributs sont: SRC: Indique l'emplacement de l'image (il est obligatoire) ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent. Il peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous) ALT:Permet d'afficher un texte lorsque l'image ne s'affiche pas Ainsi pour insérer une image, il faudra saisir un marqueur du genre: <IMG SRC="url/image.gif ou url/image.jpg" ALT="Texte remplaçant l'image"> Attribut Valeur Résultat Effet Visuel SRC BORDER=n HSPACE VSPACE Adresse de l'image Nombre de pixels de la bordure. Sa couleur se définit dans l'attribut LINK ou TEXT de la balise <BODY> Nombre de pixels d'ajustement entre l'image et le texte adjacent Nombre de pixels d'ajustement entre l'image et le texte au-dessus WIDTH Taille horizontale (en pixels ou en %) HEIGHT Taille verticale (en pixels ou en %) LOWSRC URL Image alternative (plus petite) affichée le temps que la vraie soit chargée Texte enveloppant une image Les images s'insèrent dans le texte comme un caractère, ainsi il semble impossible de faire s'écouler du texte le long d'une image. Il existe en fait plusieurs façons, nous allons en voir deux: La première consiste à créer un tableau avec une ligne et deux colonnes, dans lesquelles on met l'image et le texte. La seconde (moins précise) consiste à aligner l'image à gauche ou à: droite avec l'attribut ALIGN puis de taper son texte. Il suffit, pour arrêter cet enveloppement de mettre l'attribut CLEAR. Les images réactives ("images MAP") On peut créer à l'intérieur même d'une image des zones cliquables. Cela est possible grâce à l'attribut USEMAP utilisé conjointement avec la balise <MAP>... </MAP>. L'attribut USEMAP de la balise <IMG> pointe vers la balise <MAP> contenant le découpage.
La balise <MAP> a pour attribut le nom qu'on lui donne (NAME="nom") et contient les zones cliquables déclarées par les balises <AREA>... </AREA>. Balises Attribut Valeur Effet Visuel <MAP>... </MAP> <AREA> Un exemple NAME SHAPE HREF="url" COORDS= "XX,XX,XX,XX" Rectangle (ses coordonnées sont: "abscisse sup gauche, ordonnée sup gauche, abscisse inf droit, ordonnée inf droit") RECT Cercle (ses coordonnées sont: CIRCLE "abscisse centre, ordonnée centre, rayon") POLY Polygone (ses coordonnées sont: "la suite des coordonnées séparées par des virgules") Lien vers l'url Contient les coordonnées de la zone cliquable entre guillemets et séparées par des virgules <IMG SRC="images/image.gif" WIDTH=150 HEIGHT=70 USEMAP="#Map"> <MAP NAME="#Map"> <AREA SHAPE="rect" HREF="debut.html" COORDS="0,0,48,28"> <AREA SHAPE="circle" HREF="precedent.html" COORDS="50,30,10"> <AREA SHAPE="poly" HREF="suivant.html" COORDS="60,50,80,30,100,40,50,100"> </MAP> Insérer une image en fond L'arrière-plan est défini dans les attributs de la balise <BODY> : Attribut Effet Visuel BACKGROUND="image" affiche l'image en arrière-plan BGCOLOR="nom_de_la_couleur ou #XXXXXX" affiche la couleur demandée en arrière-plan LINK="couleur" Couleur des liens hypertexte ALINK="couleur" Couleur du lien actif VLINK="couleur" Couleur des liens déjà visités TEXT="couleur" Couleur du texte par défaut Les couleurs sont définies par 6 chiffres hexadécimaux représentant 2 à 2 les tons de Rouge, de Vert et de Bleu. couleur="#rrvvbb" où R, V et B représentent respectivement un chiffre hexadécimal entre 0 et F pour le Rouge, le Vert et le Bleu. Le codage des couleurs Les couleurs sont définies par 6 chiffres hexadécimaux représentant 2 à 2 les tons de Rouge, de Vert et de Bleu. couleur="#rrvvbb" où R, V et B représentent respectivement un chiffre hexadécimal entre 0 et F pour le Rouge, le Vert et le Bleu. #FFFFFF #8E236B
#FF0000 #32CD99 #00FF00 #3232CD #0000FF #6B8E23 #00FFFF #EAEAAE #FFFF00 #9370DB #000000 #426F42 #70DB93 #7F00FF #5C3317 #7FFF00 #9F5F9F #70DBDB #B5A642 #DB7093 #D9D919 #A68064 #A62A2A #2F2F4F #8C7853 #23238E #A67D3D #4D4DFF #5F9F9F #FF6EC7 #D98719 #00009C #B87333 #EBC79E #FF7F00 #CFB53B #42426F #FF7F00 #5C4033 #FF2400 #2F4F2F #DB70DB #4A766E #8FBC8F #4F4F2F #BC8F8F #9932CD #EAADEA #871F78 #D9D9F3 #6B238E #5959AB #2F4F4F #6F4242 #97694F #8C1717 #7093DB #238E68 #855E42 #6B4226 #545454 #8E6B23 #856363 #E6E8FA #D19275 #3299CC #8E2323 #007FFF #238E23 #FF1CAE #CD7F32 #00FF7F #DBDB70 #236B8E #C0C0C0 #38B0DE #527F76 #DB9370 #93DB70 #D8BFD8 #215E21 #ADEAEA #4E2F2F #5C4033 #9F9F5F #CDCDCD #C0D9D9 #4F2F4F #A8A8A8 #CC3299 #8F8FBD #D8D8BF #E9C2A6 #99CC32 #32CD32 #E47833