Applications Internet – cours 3La page web Les listes élément vraiment indispensable dans un site web Les listes numérotées Premier pas : demander au navigateur

Applications Internet – cours 3Applications Internet – cours 3 La page La page webweb

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 minusculesI pour des chiffres romains

majusculesi pour des chiffres romains

minuscules1 (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 listeavec la balise: <li> ....</li>

la balise <ol> introduit un léger retrait du texte qui sera listé.



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 listeavec la balise: <li> ....</li>

la balise <ul> introduit aussi un léger retrait du texte qui sera listé.



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 2autres 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!)


Les liensla 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>


Les liensla 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:[email protected]’’>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>


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éeDimensions width=? height=? Hauteur et largeur (en pixels)border=? (en pixels) Bordurealign=topalign=middlealign=bottomalign=leftalign=right


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="#$$$$$$”>


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 tableauDéfinition d'une ligne [Table Row] <TR></TR> Début et fin de ligneDéfinition d'une cellule [Table Data] <TD></TD> Début et fin de cellule11.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=%>

Documents

Applications Internet – cours 3La page web Les listes élément vraiment indispensable dans un site web Les listes numérotées Premier pas : demander au navigateur