TP
|
|
Une balise peut être seule, et son effet s'applique à l'endroit où elle se trouve, comme par exemple <BR> qui sert à sauter une ligne,
ou en couple balise ouvrante <balise> balise fermante </balise> pour indiquer sur quelle partie de votre code elle s'applique : son effet touche tout ce qui se trouve entre la balise ouvrante et la balise fermante.
<html>
<head> <body> </body> </html>
|
<OL> <LI>item1 <LI>item2 <LI>item3 </OL> |
et non ordonnées :
<UL> <LI>item1 <LI>item2 <LI>item3 </UL> |
Testez les dans votre fichier .htm.
<IMG SRC="monimage.jpg"> |
La balise image admet entre autre les propriétés suivantes :
<A HREF="url" TARGET="">Ceci est un lien !</A> |
La propriété TARGET (optionnelle) indique dans quelle page s'ouvre le document. Par défaut le document s'ouvre dans la page courante. Pour faire en sorte qu'il s'ouvre dans une nouvelle page on donnera a TARGET la valeur _blank (entre symboles "").
Liens internes
Dans un document de très grande taille, on peut souhaiter placer quelques positions de références vers lesquels ensuite créer des liens. Ces liens guident vers un autre endroit du même document et sont qualifiés de liens internes.
Pour placer une position de référence dans le texte, et lui donner un nom (le couple de balises peut ou pas entourer du texte, c'est un marqueur invisible) :
<A NAME="nom"></A> |
Pour se rendre à une position de référence dans le texte, on réutilise son nom :
<A HREF="url" TARGET="nom">Lien vers une position du document courant</A> |
Exercice : Créez une page web contenant un très long texte (quelconque, mais plusieurs page-écrans de longueur), avec tout en bas de votre document une image "cliquable" : qui sera un lien interne vers le début du document, pour remonter plus vite. Ailleurs dans le texte vous créerez un lien externe qui ouvre une nouvelle page et un lien externe qui remplace la page courante.
<FONT COLOR="#FF0000"></FONT> |
#FF0000 désigne une couleur en composantes rouge (FF), verte (00) et bleue (00), soit ici donc un rouge pur.
Les tableaux (balise TABLE) sont définis comme étant des suites de lignes (balise TR, "table row"). Dans chaque ligne on définit une ou plusieurs cellules (balise TD, "table data").
Pour de plus amples informations sur les tableaux, consultez ce lien (deux pages successives). Essayez de reproduire le tableau suivant :
Pour créer un site contenant des cadres, il vous faut créer en premier un fichier contenant l'agencement des cadres : ce fichier HTML utilise la balise FRAMESET à la place de la balise BODY. C'est cette balise qui définit les cadres par leur dimension en pixels ou en pourcentage (%).
Tester les trois exemples suivants :
<FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="gauche"> <FRAME SRC="frame2.htm" NAME="droite"> </FRAMESET> |
<FRAMESET ROWS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="haut"> <FRAME SRC="frame2.htm" NAME="bas"> </FRAMESET> |
<FRAMESET COLS="20%,80%"> <FRAME SRC="frame1.htm" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
</FRAMESET> |
Pour désigner un cadre, et permettre ainsi de changer son contenu en changeant de fichier html affiché, il faut ajouter à nos liens hypertextes la propriété TARGET= et choisir le nom du cadre visé. Par exemple: <A HREF="page.htm" TARGET="gauche">
Essayez de reproduire la meme mise en page avec la balise table pour positionner le menu et le contenu de droite. Quel changement structurel cela provoque-t-il dans le contenu des fichiers de ce site ?
Ouvrez un éditeur de texte et créer un fichier nommé style.css. L'extension css désigne un fichier contenant des styles (CSS = Cascade Style Sheets).
La feuille de style contient la description du style ou format d'affichage des balises composant un document HTML. On attribue ainsi une valeur aux différentes propriétés d'une balise. Voici la forme générale :
balise { property1: value1; property2: value2 } |
Note: On peut spécifier librement une, deux, voire beaucoup plus de propriétés à la fois. Pour débuter, recopiez dans votre fichier style.css le code suivant :
i {color:#FFFFFF} |
Nous allons maintenant utiliser cette feuille de style dans une page html. Ajoutez au code html dans la partie d'en-tête (entre les balises head) l'inclusion de la feuille de style :
<LINK rel=STYLESHEET href="style.css" type="text/css"> |
Placer dans votre document une balise <i></i> et observez le résultat. Pour conserver les balises originelles et simplement ajouter des variantes de styles à ces balises, nous allons maintenant définir des classes. Retournez dans votre fichier style.css et changer son contenu par :
i.rouge {color:#FFFFFF} |
Testez dans votre page web la balise I toute seule et la séquence suivante :
<I class=rouge></I> |
Essayez à présent la classe suivante :
table.exemple{ width:90%; background-color: #bad2ed; border:solid 1px #6480B8; } |
Vous trouverez sur cette page une liste des propriétés spécifiables dans les feuilles de styles. Essayez de définir de nouveaux styles et de les appliquer à votre page web.
La structure du site respectera les contraintes suivantes : Créez un répertoire monsiteweb qui contiendra tous les fichiers nécessaire à votre site. Vous placerez dans ce répertoire les fichiers .htm. Créez un sous-répertoire img dans le repértoire monsiteweb, qui regroupera toutes les images utilisées par le site.
Dernière remarque générale: Vous pouvez vous inspirer d'un site web en observant comment il est construit. Cherchez dans votre navigateur l'affichage du code source de la page (le code html, non interprété).