Applications Internet – cours 3 La page web

1. Applications Internet – cours 3 La page web Les listes élément vraiment indispensable dans un site web Les listes numérotées Premier pas : demander au navigateur de mettre en place une liste numérotée avec la balise: <ol> .......</ol> qui peut comporter des attributs: du genre : <ol type=‘’X’’> ou X = A pour des majuscules, a pour des minuscules I pour des chiffres romains majuscules i pour des chiffres romains minuscules 1 (par défaut) pour des nombres ou encore <ol type=‘’A’’ start=‘’4’’> - la liste commence à la lettre D Deuxième pas : établir les éléments de la liste avec la balise: <li> ....</li> la balise <ol> introduit un léger retrait du texte qui sera listé.

2. Applications Internet – cours 3 La page web Les listes élément vraiment indispensable dans un site web Les listes à puces Premier pas : demander au navigateur de mettre en place une liste à puces avec la balise: <ul> .......</ul> qui peut comporter des attributs: du genre : <ul type=‘’forme’’> ou forme = disc pour une puce ronde et pleine, circle pour une puce ronde et vide square pour une puce carrée Deuxième pas : établir les éléments de la liste avec la balise: <li> ....</li> la balise <ul> introduit aussi un léger retrait du texte qui sera listé.

3. Applications Internet – cours 3 La page web • Les listes • élément vraiment indispensable dans un site web • Les listes de définition • Premier pas : demander au navigateur de mettre en place une liste à puces • avec la balise: <dl> .......</dl> à l’intérieur de laquelle on introduit 2 • autres balises : <dl> <dt> ...</dt> <dd> ... </dd> • la balise <dd> introduit un léger retrait du texte qui sera listé. • Les séparateurs horizontaux • Le trait horizontal peut être un bon outil de structuration du contenu. • HTML offre la possibilité d’en insérer avec la balise: <hr> ou <hr /> • Cette balise comporte les attributs suivant: • la hauteur du trait en pixels: size=‘’X’’ • la largeur du trait en pixels ou en pourcentage : width=‘’X’’ ou width=‘’X%’’ • l’alignement du trait : align=‘’left’’ ou ‘’center’’, ou ‘’right’’. • la couleur : color=‘’couleur’’ (! attention, pas dans tous les navigateurs!)

4. Applications Internet – cours 3 La page web • Les liens • la véritable richesse du HTML se trouve dans les hyperliens. • Voici leur balise: <a href=‘’destination’’>texte du lien</a> • La destination des liens : • - vers une autre page du site • - vers un endroit de la page en cours (les ancres) - vers un endroit dans une autre page - vers une autre page sur le WEB • - vers une adresse de courriel - vers un fichier que l’internaute pourra télécharger • le lien peut se faire aussi à partir d’une image • le lien peut servir à lancer un fichier son ou vidéo. • Lors de la création du site, on regroupe les pages dans un ou plusieurs dossiers. • Lien vers une page du même dossier:<a href=‘’page4.htm’’>vers page 4</a> • Lien vers une page d’un autre dossier:<a href=‘’dossierA/page4.htm’’>vers page 4</a> • -Lien de retour vers la page d’accueil :<a href=‘’../index.htm’’>vers l’index</a> • Lien vers une ancre : dans la même page: <a name=‘’ancre’’></a> • dans une autre page: <a href=‘’dossier1/page5.htm#ancre’’>lien</a>

5. Applications Internet – cours 3 La page web Les liens la véritable richesse du HTML se trouve dans les hyperliens. Voici leur balise: <a href=‘’destination’’>texte du lien</a> Les liens vers un autre site WEB: <a href=‘’http://www.UdeM.ca/com/horaire.htm’’>vers l’horaire</a> Les liens vers une adresse de courriel : <a href=‘’mailto:jean.dominique.lafrance@UdeM.ca’’>JeanDo</a> Les liens vers une fenêtre spécifique: (à insérer après l’URL et avant le texte du lien) ce type de lien offre les possibilités suivantes: : target=‘’_self’’ (défaut) la page cible s’ouvre dans la même fenêtre (cadres) target=‘’_top’’ la page cible s’ouvre dans la même fenêtre mais elle l’occupe target=‘’_blank’’ la page cible s’ouvre dans une nouvelle fenêtre L’attribut title dans un lien: permet de proposer une info-bulle au lien. (le petit texte dans un petit encadré jaune qui apparaît lorsque vous vous attardez 2 secondes avec votre souris sur le texte / image comportant un hyperlien). <a href=‘’http://www.UdeM.ca/horaire.htm title=‘’vers l’horaire’’>horaire</a>

6. Applications Internet – cours 3 La page web Les IMAGES Le code Html est : <IMG SRC="Adresse de l'image” /> Afficher l'image qui se trouve à l'adresse... La balise image possède de nombreux attributs. Texte alternatif alt="****" Pour les browser n'ayant pas l'option "image" activée Dimensions width=? height=? Hauteur et largeur (en pixels) border=? (en pixels) Bordure align=top align=middle align=bottom align=left align=right

7. Applications Internet – cours 5 La page web L’ arrière-plan Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan [background] coloré ou composé d'une image. Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$"> utilisées par défaut par le browser pour le texte et les liens. Couleur de texte <BODY TEXT="#$$$$$$"> Couleur de lien <BODY LINK="#$$$$$$"> Lien visité <BODY VLINK="#$$$$$$"> Lien actif <BODY ALINK="#$$$$$$”>

8. Applications Internet – cours 3 La page web Les tableaux En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc très fréquent. Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de base sont donc : Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule 11.1 Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit : <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> Il y a encore trois éléments (définis par défaut mais modifiables) : L'espace entre les cellules ou l'épaisseur des lignes du quadrillage <TABLE cellspacing=?> L'enrobage des cellules ou l'espace entre le bord et le contenu <TABLE cellpadding=?> La largeur de la table <TABLE width=?> <TABLE width=%>