Cours html

Participez au vote ☆☆☆☆☆★★★★★

Support de cours complet avec exercices corrigés en html

...

1) Qu'est-ce que faire un lien ?

C'est permettre de naviguer ! On réalise des hypermots ou des hyperimages, c'est à dire des objets qui réagissent avec la souris le plus souvent, pour atteindre d'autres objets. C'est la base de la navigation.

Un lien se fait oblgatoirement entre deux objets : celui qui envoie et celui qui reçoit.On place le lien dans le fichier qui envoie.

Au début limitez vous à des fichiers dans un même dossier, et réalisez des liens entre eux.

Deux types de liens dominent la navigation :

- Relatifs et locaux pour lier vos pages. (C'est le lien le plus fréquent)

- Absolus et globaux pour lier des sites.

Il faut connaître aussi :

- les liens vers un point précis d'une page : ancre.

- les liens vers une adresse e-mail.

- les liens relatifs.

- les liens vers des fichiers (téléchargement).

2) Lier vos pages locales

C'est permettre d'atteindre un autre fichier dans un même dossier, sur une même machine.Pour des documents placés dans un autre dossier, voyez liens relatifs.

a) On réalise d'abord le fichier cible

Faites très attention à l'archivage. Notez bien le chemin du dossier et le nom du fichier.

b) Dans le fichier source, on réalise le lien vers ce fichier cible :

Pour cela, on marque un texte, ou bien une image, avec le tag <a> et l'attribut href : <a href="/fichier.htm"> Texte de l'hyper lien vers le document </a>

Exemple : <a href="/adam.htm">Voir Adam</a>

3) Lier des sites. Liens absolus

C'est atteindre un document ou une adresse à l'aide du chemin complet et de son nom.

a) Il faut connaître tous les éléments :

- Le type de protocole http:// ou ftp://... et pour des références locales : file://

- Le nom de l'ordinateur pour des liens locaux sur le serveur .

- Le chemin complet ainsi que le nom de fichier.

b) On confie le tout à l'attribut href du tag <a> :

Syntaxe : <a href="/Protocole Serveur Chemin Fichier"> Texte du lien</a>

Exemple : <a href="http://perso.wanadoo.fr/chatinais/index.htm">Site Web chenu</a>

4) Lien relatifs

C'est atteindre un fichier situé dans un autre dossier, sur la même machine.

a) On réalise l'arborescence.

Il est très important d'archiver ses documents de façon structurée.

b) On indique le chemin par rapport au document utilisé

Syntaxe : <a href="/../chemin/fichier>Texte hyper lien </a> (remonte d'un niveau et chemin/descend).

Exemple : Avec l'arborescence ci-contre, nous sommes dans le document "relatif.htm" du dossier "lien". Pour atteindre le document "index.htm" il faut remonter d'un niveau, ce qui s'écrit ../ en HTML. D'où le lien relatif suivant :

<a href="/../index.htm">Index</a>

Il est possible de remonter de plusieurs niveaux :

<a href="/../../courhtml/index.htm"</a>donne le même résultat !

5) Lien vers une adresse e-mail

C'est atteindre un internaute en lui envoyant un message

On utilise le tag <a> avec l'attribut href :

Adresse : <a href="mailto:E-mail de l'internaute"> Contacter TOTO</a>

Exemple : <a href="mailto:[email protected]"> Contacter l'auteur</a>

Si votre configuration est bonne, votre logiciel de messagerie doit s'ouvrir avec l'adresse du destinataire! Magique ?

Plus fort encore...en plus de l' ouverture de la messagerie avec le destinataire, on peut contraindre l'objet du message :

<a href="mailto:E-mail de l'internaute ?sujet_du_message" >Contacter TOTO</a>

Ex : <a href="mailto:[email protected]?subject=lecteur du cours">Ecrire à l'auteur</a>

6) Lien vers une ancre

C'est permettre d'atteindre un endroit précis dans une page.

1) On marque d'abord la cible avec une ancre en utilisant le atg : <a> et l'attribut name.

Syntaxe : <a name="Ancre1"> Texte qui sera ciblé.</a>

Le texte cible est compris entre <a> et </a>.

Le conteneur <a name="Ancre1>Texte qui sera ciblé.</a> est placé à l'endroit que l'on veut atteindre.

2) On réalise le lien vers cette cible :

Pour cela, on marque un texte ou une image avec le tag <a> et l'attribut href :

Syntaxe : <a href="#Ancre1"> Texte de l'hyperlien vers une ancre</a>

3) On peut placer une ancre dans un autre document :

<a href ="Chemin/NomDeFichier.htm#AncreCible">Texte de l'hyperlien</a>

Ex : <a href=../alphabet.htm#lettre_H">Atteindre H</a>

7) Lien avec des images

C'est rendre une image réactive. En cliquant dessus l'utilisateur ira vers ce que vous déciderez .

On utilise le tag <a> avec son attribut href pour le lien et <img src=...> pour l'image :

Syntaxe : <a href="/fichier_cible.htm"><img src=fichier_image.gif ou .jpg"> </a>

Ex : <a href="/cibleimgtm"><img src="/imageligif"></a>

Note : On met l'image à la place de l'hypermot.

Pour ôter le cadre et garder le lien : <img src="/imageli.gif" border="0">

Faire des zones sensibles dans une image : <MAP>

8) Couleur des liens

Il y a 3 états pour un lien : non visité, activé, visité. Chaque état peut être coloriser .

Attention "link" est, soit un marqueur <link>, soit un attribut de <body link="....">.

1) Lien non visité : par défaut c'est souvent bleu.

<body link="blue"> colorie les hypermots avant visite en bleu.

Il est possible d'utiliserle code hexadécimal : <body link="#0000FF">

2) Lien activé :

<body alink="red"> colorie les hypermots en rouge pendant le clic.

Il est possible d'utiliser le code hexadécimal : <body alink="#FF0000">

3) Lien visité : par défaut c'est souvent violet .

<body vlink="green"> colorie les hypermots des liens visités en vert .

Il est possible d'utiliser le code hexadécimal : <body vlink="#00FF00">

4) Exemple :

9) Lien avec un bouton

On utilise un formulaire

</form>

Ex :

<form action="../formulr/frfoenv.htm" target="_top">Voir les

<input type="submit" value="formulaires"> (Débutants, ne les apprenez pas trop tôt.) .

</form>

10) Lien vers la page précédente

Le navigateur mémorise votre parcours. Il est donc possible de revenir.

Revenir avec un hypermot :

Syntaxe : <a href="#" onClick="window.history.go (-1)"> retour </a>

Revenir avec un bouton :

Syntaxe :

<form>

</form>

Remarque : Ce lien existe sur les navigateurs. Ce sont les célèbres boutons ci-contre :

TP3-HTML : exercices corrigés

Exercice1 : Hyperliens

Crée un nouveau document HTML dont le titre sera Exercice HTML 2.
Insère une image, tu la sauvegarde par menu.gif, dans le document. Cette image sera en coordonnées.
Délimite la zone Accueil et donne-lui cette adresse: index.html (Lien externe, ---)
Délimite la zone Aide et donne-lui cette adresse: aide.html (Lien externe, ---)
Délimite la zone Écrivez-nous et donne-lui ton adresse électronique (Lien externe, mailto).
Centre l'image menu.gif (avec le code center);
Convertis les caractères spéciaux, sauvegarde le tout sur ton dossier personnel. Le nom du fichier sera ex2.html
Visualise ton document avec votre navigateur. Clique sur les 3 zones de l'image.

Réponse

Voici les codes qui donnent le résultat ci-haut :

<HEAD> <TITLE>Exercice HTML 2</TITLE> </HEAD>
<MAP NAME="fictif"> <AREA SHAPE="RECT" COORDS="3,0,156,15"
HREF="index.html"> <AREA SHAPE="RECT" COORDS="166,3,273,13"
HREF="aide.html"> <AREA SHAPE="RECT" COORDS="292,3,425,15"
HREF="mailto:[email protected]"> </MAP>
<CENTER><IMG SRC="menu.gif" BORDER=0 WIDTH=438 HEIGHT=16 USEMAP="#fictif"></CENTER>

Exercice2 : Tableaux

Utilisés sans bordure (bordure invisible), les tableaux sont aussi souvent utilisés pour :

mettre en page des éléments (texte, images, champs d'un formulaire...)
faire du multicolonne
créer une "image multipart" (mosaïque) avec des zones changeant d'aspect lorsque la souris passe dessus (voir exercice sur "Rollovers")
placer une trame colorée derrière du texte
etc...

Remarque : les tableaux HTML sont correctement supportés à partir des versions de navigateurs Netscape 2 à 3 et IExplorer 2 à 3

Balises

Début tableau : <TABLE BGCOLOR="couleur fond" ALIGN="LEFT|RIGHT|CENTER" WIDTH="pixels ou %"

CELLSPACING="larg.bords" BORDER="larg.ombrage" CELLPADDING="détach.texte">

Début ligne : <TR BGCOLOR="couleur" ALIGN="LEFT|RIGHT|CENTER" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"

WIDTH="pixels ou %">

WIDTH="pixels ou %" ROWSPAN="nb.lignes" COLSPAN="nb.col."> contenu cellule </TH>

WIDTH="pixels ou %" ROWSPAN="nb.lignes" COLSPAN="nb.col."> contenu cellule </TD>

Fin de la ligne : </TR>

Fin du tableau : </TABLE>
On peut aussi définir une légende associée au tableau : <CAPTION ALIGN="TOP|BOTTOM"> texte légende </CAPTION>
On peut évent. définir (depuis N6 et IE4) des lignes d'en-tête (répétées au haut de chaque page imprimées) :

<THEAD ALIGN="LEFT|CENTER|RIGHT|JUSTIFY|CHAR" CHAR="car" CHAROFF="longueur"

VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"> une ou plusieurs lignes <TR>...</TR> </THEAD>

des lignes de corps du tableau :

<TBODY ALIGN="LEFT|CENTER|RIGHT|JUSTIFY|CHAR" CHAR="car" CHAROFF="longueur"

VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"> une ou plusieurs lignes <TR>...</TR> </TBODY>

et des lignes de pied du tableau :

<TFOOT ALIGN="LEFT|CENTER|RIGHT|JUSTIFY|CHAR" CHAR="car" CHAROFF="longueur"

VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"> une ou plusieurs lignes <TR>...</TR> </TFOOT>

Bordures fines

Quel que soit le navigateur utilisé, on peut créer des tableaux avec des bordures fines en utilisant les attributs BORDER="1" (ombrage bordure) et CELLSPACING="0" (largeur bordure).

Par exemple le code suivant :

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10"

ALIGN="CENTER">

<TR>

<TD>Bonjour</TD><TD>tout le monde !</TD>

</TR>

</TABLE>

donne :

Bonjour tout le monde !

Couleur des bordures

Pour IE ≥ 3.0 et Mozilla ≥ 1.0 (mais hélas pas pour Netscape < 6), l'attribut BGCOLOR=... affecte non seulement la couleur de fond des cellules mais aussi la couleur des bordures. On peut ainsi par exemple définir un tableau ayant une bordure fine (de 1 pixel) rouge par le code suivant :

Par exemple le code suivant :

<TABLE BORDER="0" CELLPADDING="10" CELLSPACING="1"

BGCOLOR="red" ALIGN="CENTER">

<TD>Bonjour</TD><TD>tout le monde !</TD>

</TR>

</TABLE>

donne :

Bonjour tout le monde !

Cependant pour faire les choses tout-à-fait proprement, ce qui n'est possible qu'avec des navigateurs supportant complètement les feuilles de style, il faudrait plutôt utiliser les propriétés CSS border-color: couleur; border-style: solid; border-collapse: collapse; associées aux règles TABLE, TR, TH ou TD (voir ci-dessous).

Usage de propriétés CSS

Le tableau ci-dessous s'affichera avec une bordure relief habituelle de 1 pixel dans les navigateurs Web ne supportant pas les feuilles de style CSS, et avec une bordure rouge de 1px dans les navigateurs supportant CSS. Les propriétés utilisées (border-collapse, border, etc...) peuvent être appliquées aux règles TABLE, TR, TH ou TD.

Blabla blabla blabla bla blabla blabla blabla bla blabla blabla

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=2

STYLE="border-collapse: collapse;

border: 1px solid #ff0000;">

Blabla blabla blabla...

</TD></TR>

</TABLE>

Comme le montre l'exemple ci-dessous, des effets d'encadrement, de couleur, etc... peuvent être obtenus dans de simples paragraphes (donc sans recourir aux tableaux) à l'aide de propriétés de feuilles de style CSS. Cela ne fonctionne bien évidemment qu'avec les navigateurs de dernière génération (i.e. supportant complètement CSS).

Blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla. <P STYLE="

margin-left: 30px;

width: 75%;

color: blue;

text-align: justify;

background-color: #f5f5ff;

border-style: solid;

border-color: #00aaaa;

border-left-color: #000088;

border-width: 1px;

border-left-width: 10px;

padding: 2px;

padding-left: 35px;

Blabla blabla blabla...

</P>

Et l'exemple ci-dessous montre comment changer dynamiquement la couleur d'arrière-plan de lignes ou de cellules d'un tableau lorsque le curseur les survole.

un deux

trois quatre

Une autre technique, basée sur les feuilles de styles CSS, permettrait de faire la même chose, pour toutes les lignes d'un tableau, simplement avec :

<!--

tr:hover { background-color: lightblue; }

-->

</STYLE>

<TR onMouseOver="this.bgColor='yellow'"

onMouseOut="this.bgColor='white'">

</TR>

<TR>

<TD onMouseOver="this.bgColor='lime'"

onMouseOut="this.bgColor='white'">

trois</TD>

<TD onMouseOver="this.bgColor='aqua'"

onMouseOut="this.bgColor='white'">

quatre</TD>

</TR>

</TABLE>

Donnée de l'exercice

Réaliser le tableau ci-dessous :

celui-ci doit être centré dans la page et occuper le 80% de la largeur de la fenêtre du navigateur
largeur des bordures: 10 pixels (attribut CELLSPACING=); épaisseur de l'ombrage: 3 pixels (attribut BORDER=); détachement du texte par rapport aux bords: 5 pixels (attribut CELLPADDING=)
la première colonne doit faire 80 pixels de large, les 2 autres se partageant le reste de la largeur
dans les 2 premières lignes d'en-tête et dans la première colonne, le texte doit être en gras et souligné ; dans les autres cellules, il doit être en style normal et justifié à gauche
réaliser alignement du texte "Xxxxx" au haut de la cellule, alignement du texte "Yyyyy" au bas de la cellule
définir couleurs de fond
placer une légende au bas du tableau
les balises </TR>, </TH>, </TD> sont facultatives, mais il vaut mieux les mettre

Nnnnnn Aaaaaaaaaaaaa

Bbbbbbbb Cccccccc

Un Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla Xxxxx

Deux Yyyyy Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

Tableau 1 : abc def ghi jkl mno pqr stu vwx yz.

Corrigé de l'exercice

<CAPTION ALIGN="BOTTOM"><B>Tableau 1</B> : abc def ghi jkl mno pqr stu vwx yz.</CAPTION>

<TH ROWSPAN="2" WIDTH="80">Nnnnnn</TH>

<TH COLSPAN="2">Aaaaaaaaaaaaa</TH>

</TR>

<TH WIDTH="40%">Bbbbbbbb</TH>

<TH WIDTH="40%">Cccccccc</TH>

</TR>

<TR>

<TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

blabla blabla blabla blabla blabla</TD>

<TD VALIGN="TOP">Xxxxx</TD>

</TR>

<TR>

<TD VALIGN="BOTTOM">Yyyyy</TD>

<TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

blabla blabla blabla</TD>

</TR>

</TABLE></CENTER>

Exercice2 : Fichier son

o Insère un fichier son, tu le sauvegarde comme canyon.mid;

o La répétition sera à l'infini;

o Le démarrage sera automatique;

o Le panneau de contrôle sera visible, sans bordure et sa grandeur sera standard.

Réponse

… … …

Exercice 1

Création et mise en forme d'une page Web avec une feuille de style

Ouvrez la page index.htm qui se trouve dans le dossier exercices2006 sur le bureau de votre ordinateur

Insérez une feuille de style externe qui a pour nom presse.css avec pour type de média « screen » entre les balises <head> </head>.

Ouvrez ensuite un éditeur de texte style Notepad et enregistrez la page sous le nom de presse.css dans le dossier exercices2006.

Nous commencerons par styler la balise html en lui donnant un arrière plan (background-color) de couleur gris (#C2CACF). Les marges externe (margin) et interne (padding) sont à zéro.

{ background-color: #C2CACF;

padding: 0;

margin: 0;}

Maintenant, il faut paramétrer la balise body. Les marges externe (margin) et interne (padding) sont à zéro. On ajoute le même arrière plan couleur que pour la balise html et une image de fond (background-image) que vous trouverez dans le dossier images du dossier exercices 2006. Cette image ne sera pas répété (background-repeat) et aura une position de 0px en valeur horizontale et verticale (background-position). Ensuite, nous fixerons l'image par rapport à la fenêtre (background-attachment), elle restera donc en place quelque soit la position de l'ascenseur.

{ margin: 0;

padding: 0;

background-color: #C2CACF;

background-image: url('/images/fond.jpg');

background-repeat: no-repeat;

background-position: 0px 0px;

background-attachment: fixed;}

Il est nécessaire ensuite de positionner le texte par rapport à la bande noire. Nous allons créer un bloc avec un identifiant unique qui aura pour nom entry (div#entry). Il n'y aura pas de marge interne mais une marge externe de 0 en verticale qui se positionnera automatiquement par rapport à la marge de droite avec une marge fixe pour le bas de 10 et une marge fixe de gauche de 102. Il est à noter que 102px est la largeur de la bande noire. Le bloc aura une largeur fixe de 650px (width) et sa propre couleur d'arrière plan de préférence clair (#fefefe) pour contraster avec le gris de l'arrière plan principal. On applique au bloc une bordure (border) en trait plein, fine (1px).

{ padding: 0em;

width: 650px;

margin: 0 auto 10px 102px;

background-color: #fefefe;

border-width: 1px;

border-style: solid;}

Une fois la partie principale de la mise en page terminée, nous allons pouvoir nous centrer sur la mise en forme des caractères. Dans le body, nous allons inclure comme police par défaut l'Arial sans-serif. La police par défaut est ici entre guillemet, préciser plusieurs familles augmente la probabilité que le visiteur disposera d'au moins de l'une d'entre elles.

{ margin: 0;

padding: 0;

font-family: "arial",verdana,lucida,sans-serif;

background-color: #C2CACF;

background-image: url('/images/fond.jpg');

background-repeat: no-repeat;

background-position: 0px 0px;

background-attachment: fixed;}

Nous traiterons ensuite de la balise de titre principal ou h1. Le titre sera de taille 2em en petite capitale (font-size) avec une barre en dessous pour marquer une rupture entre le contenu et le titre. On appliquera une bordure (border) de couleur noire en trait plein, fine (1px). La marge externe est à 0. On souhaite cependant grâce à la marge interne (padding) décaler le titre sur la gauche pour qu'il n'empiète pas sur la bande noire, 5px suffiront et le décaler un peu en hauteur de 6px (pure raison esthétique).

{ margin: 0 ;

padding: 6px 0 0 5px;

border-bottom: #000;

border-width: 0 0 1px 0;

border-style: none none solid none;

font-size: 2em;

font-variant: small-caps;}

La balise de titre h2 sera définit un peu comme la balise de titre h1. Le titre aura pour taille 1.6em. La marge interne sera décalé de 5px sur la gauche comme pour h1 et de 5px en hauteur.

{ margin: 0;

padding: 5px 0 0 5px;

font-size: 1.6em;

font-variant: small-caps;}

H3 suivra le modèle des titres h1 et h2. Le titre aura pour taille 1.4em. La marge interne sera décalé de 5px sur la gauche comme pour les deux autres et de 7px en hauteur. La marge externe sera à 0.

{ margin: 0;

padding: 7px 0 0 5px;

font-size: 1.4em;}

La mise en forme des liens ne concernera ici que les liens contenus dans le bloc #entry. L'attribut a:link ou lien correspondant au lien non visité, c'est à dire non présent dans le cache de votre navigateur, seront de couleur #768. Les liens visités ou a:visited, sont ceux déjà contenu dans le cache de votre navigateur. Pour les distinguer des liens non-visités, ils sont d'une couleur légèrement différente #777. Par défaut, les liens visités et non visités seront soulignés (text-decoration: underline).

Il est d'usage d'utiliser des couleurs différentes pour les liens visités et non vus. Modifier la couleur d'un lien selon sa visualisation ou non est une méthode de base pour faciliter la navigation. On peut utiliser une couleur plus présente pour les nouveaux liens et une couleur moins forte pour les liens cliqués, afin d'indiquer aux lecteurs qu'ils ont été visités.

div#entry a {text-decoration: underline;}

div#entry a:visited { color: #777; }

div#entry a:link { color: #768; }

Les paragraphes contenus dans le bloc #entry auront la même marge interne sur la gauche que les balises titre.

div#entry p {padding: 0 0 0 5px;}

Nous souhaitons pour mettre en valeur les sources, les positionner autrement. Pour cela, nous allons utiliser un élément de type classe, c'est à dire que vous pouvez l'insérer dans différentes balises, ici nous l'avons inséré au sein de la balise paragraphe et nous l'appellerons cat.

Ainsi dans le code html, toutes les balises paragraphes contenant un class="cat" apparaîtront, aligné à droite en petite capitale et italique, avec une taille de 0.9em. Pour que le texte ne touche pas le cadre, une marge externe de droite de 5px est préférable, accompagné d'une marge pour le bas de 5px.

p.cat

{ font-size: 0.9em;

font-variant: small-caps;

text-align: right;

margin: 0 5px 5px 0;

font-style:italic;}

Pour embellir le texte, nous avons décidé de mettre en valeur la première lettre de chaque texte. Il existe une balise first-letter qui permet, adjoint à la balise paragraphe de ne modifier que la première lettre. Mais comme, nous ne souhaitons pas que les classes .cat subissent ces transformations, il est préférable d'utiliser une autre technique.

On isolera manuellement, en la plaçant dans la balise neutre span, la première lettre en lui attribuant une classe ici .lettrine. Ainsi dans le code html, toutes les lettres contenues entre les balises suivantes, <span class="lettrine"></span>, seront affichée en gras, avec pour police par défaut Georgia serif. La taille de la lettre sera de 2em avec une marge interne de 3px pour intégrer un petit espacement entre la lettre et le paragraphe et un float:left. Float signifie que l'élément génère un bloc qui flotte à gauche. Essayez la feuille de style avec et sans float:left, vous verrez la différence.

{ font-weight : bold;

font-family:"Georgia", Times New Roman, Times, serif;

font-size:2em;

float:left;

padding: 0 3px 0 0;}

On pourrait juger que la mise en forme est terminée, mais je souhaiterais réussir à ce que le bandeau noir aille juste au bout de la page. Pour cela, j'utilise le pseudo-élément after qui sert à insérer un contenu généré après celui d'un élément, ici body. On obtient donc un body:after avec un texte généré automatiquement content: "Page crée le 4 avril 2006 inspiré du blog de Karl Dubost" d'une taille de 1em et une marge externe de gauche de 200px.

{ content: "Page crée le 4 avril 2006 inspiré du blog de Karl Dubost";

font-size: 1em;

margin-left:200px;}