Valeur de cette activité : 5 points
Révision HTML

C-Informatique : 5 points - difficulté : 2

Révision des balises HTML


Qu'est-ce qu'un URL ?

C'est l'adresse internet d'un document (page web ou autre type de document).
Exemples d'URL
image : http://www.cstrois-lacs.qc.ca/chenebleu/informatique/centredeformation/cbet.gif
page web : http://www.cstrois-lacs.qc.ca/chenebleu/informatique/centredeformation/index.asp
document : http://www.cstrois-lacs.qc.ca/chenebleu/informatique/images/pierre/revision.txt

Page HTML de base

<html> <head> <title>Titre de la page</title> ... les balises metas doivent être placées ici ...
... les feuilles de style doivent être placées ici ... </head><body> ... le contenu de la page doit être placé ici ... </body></html>

Gras

<b>MOT</b> Résultat : MOT

Souligné

<u>MOT</u> Résultat : MOT

Italique

<i>MOT</i> Résultat : MOT

Couleur du texte

<font color=red>MOT</font> Résultat : MOT

Taille du texte

<font size=+2>MOT</font> Résultat : MOT

Couleur et taile du texte

<font size=+2 color=red>MOT</font> Résultat : MOT

Titre de niveau 1, 2, 3

<h1>MOT</h1> Résultat :

MOT

Ligne horizontale

<hr> Résultat :

Image

<img src=URLdelimage> Résultat :

Taille de l'image

<img src=URLdelimage height=200 width=200> Résultat :

Lien

<a href=URLdulien>MOT </a> Résultat : MOT

Lien dans une nouvelle fenêtre

<a href=URLdulien target=_blank>MOT </a> Résultat : MOT

Lien sur une image

<a href=URLdulien> <img src=URLdelimage> </a> Résultat :

Tableau une ligne (TR) une colonne (TD)

<table border=1><tr><td>MOT</td></tr></table> Résultat :
MOT

Plusieurs liens sur une image utilisant la balise MAP

<img src=URLdelimage usemap=#NOMMAP><map name=NOMMAP><area shape=rect coords=0,0,0,0 target=_blank href=URLdulien><area shape=circle coords=0,0,0 target=_blank href=URLdulien></map> Résultat :

Notions avancées DHTML et CSS

La notion de calques

<DIV id="moncalque" style="background-color:yellow"> Ceci est un calque </DIV> Résultat :
Ceci est un calque

CSS- Appliquer une feuille de style en utilisant la méthode intraligne

<DIV style="background-color:pink;color:red;font-size:150%;border-style:double;border-width:5px;"> Ceci est un calque utilisant une feuille de style avec la méthode intraligne. </DIV> Résultat :
Ceci est un calque utilisant une feuille de style avec la méthode intraligne.

CSS- Appliquer une feuille de style en utilisant la méthode imbriquéee sur la balise span

<style> span{ background-color:green; color:yellow; font-size:120%; border-style:groove; border-width:8px; } </style> <span>Ceci est un texte utilisant une feuille de style avec la méthode imbriquée.</span> Résultat : Ceci est un texte utilisant une feuille de style avec la méthode imbriquée.

CSS- Appliquer une feuille de style en utilisant la méthode imbriquéee et la notion de classe

<style> .maclasse{ background-color:blue; color:yellow; font-size:30px; border-style:normal; border-width:3px; } </style> <span class=maclasse>Ceci est un texte utilisant une feuille de style avec la méthode imbriquée et la notion de classe.</span> Résultat : Ceci est un texte utilisant une feuille de style avec la méthode imbriquée et la notion de classe.