Vous êtes sur la page 1sur 4

Exercices HTML

www.rahmouni.ma

Structure d'une page, titres, paragraphes...


Thme
Raliser manuellement une page HTML simple : structure de base, titres, paragraphes, ligne de sparation horizontale...

Rappel des balises

Structure de la page avec titre :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

La dclaration ci-dessus spcifie la version HTML utilise. Pour la norme HTML 4.01, on distingue les 3 DTD's suivantes (Document Type Definition, documents XML du W3C dfinissant les diffrentes balises et leur fonctionnement) : - Strict : n'autorise que les balises non dprcies - Transitional : idem Strict plus balises/attributs dprcis en faveur de CSS - Frameset : idem Transitional plus balises relatives aux frames
<HTML> <HEAD> <TITLE>

titre puis

</TITLE>

{ {

<META NAME="..."

ou

HTTP-

EQUIV="..."

CONTENT="...">

} (cf. ex. sur attributs de page)

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;

} (spcification du type de document (HTML) et du jeu de car. utilis (iso-latin-1) ) { <BASE HREF="URL" TARGET="target name"> } (cf. ex. sur les liens) { <STYLE TYPE="text/css"> <!-- dfinitions de styles -->
charset=iso-8859-1"> </STYLE>

ou {

<LINK REL="stylesheet" HREF="URL stylesheet"

TYPE="text/css"> </HEAD>

} (cf. ex. sur CSS) script


// --> </SCRIPT>

<SCRIPT LANGUAGE="JavaScript"> <!--

<BODY ventuels attributs...>

corps de la page ...

Exercices HTML
</BODY> </HTML>

www.rahmouni.ma

Titres dans le document :


<H1 ALIGN="LEFT|RIGHT|CENTER"> <H2 ALIGN="LEFT|RIGHT|CENTER"> <H3 ALIGN="LEFT|RIGHT|CENTER"> <H4 ALIGN="LEFT|RIGHT|CENTER"> <H5 ALIGN="LEFT|RIGHT|CENTER"> <H6 ALIGN="LEFT|RIGHT|CENTER">

titre titre titre titre titre titre

1er niveau </H1> 2e niveau </H2> 3e niveau </H3> 4e niveau </H4> 5e niveau </H5> 6e niveau </H6>

Trait horizontal :
<HR WIDTH="pixels

ou

%" SIZE="pixels"

ALIGN="LEFT|RIGHT|CENTER"

{NOSHADE}>

Saut de ligne : <BR> Saut de paragraphe : <P> paragraphe {</P>} Texte qui reste sur une seule ligne : <NOBR>ce texte se sera jamais wrap sur plusieurs lignes</NOBR> Commentaire HTML : <!-- commentaire -->

Exercices HTML

www.rahmouni.ma

Donne de l'exercice
Raliser la page Web simple illustre par la copie-cran cidessous. Utilisez pour ce faire les 2 outils suivants :

ouvrez le Bloc-notes (Notepad) Windows dans la moiti de gauche de l'cran lancez le browser Nescape dans la moiti de droite de l'cran

Aprs avoir cr quelques lignes de votre page HTML, sauvegardez-la et ouvrez-la dans le navigateur 1 pour la vrifier. Au fur et mesure de l'avancement de votre travail, rechargez-la dans le navigateur (bouton[Reload this Page...] ou View>Reload) pour la contrler.

Exercices HTML

www.rahmouni.ma

Corrig de l'exercice
Etape Structure de base de la page <HTML> avec titre du document 1 (apparaissant dans la barre de titre de la fentre du browser et dans bookmarks si l'on mmorise cette page) Titre de 1er niveau centr, titres de second niveau, ainsi que traits de sparation 2 horizontaux (le tout insr dans le "body" de la page !) Quelques lignes de texte avec saut la ligne forc (que se passerait-il si vous 3 ne mettiez pas de<BR>, et quelle est l'effet des caractres "espace", "tab" et "cr" dans du code HTML ?) Deux "paragraphes" de 4 textes (avec espacement vertical entre paragraphes) Pied de page en italique 5 ( placer juste avant la balise </BODY>) Solution
<HEAD> <TITLE>Jules Ducommun</TITLE> </HEAD> <BODY> </BODY> </HTML> <H1 ALIGN=CENTER>Jules Ducommun</H1> <HR SIZE="7"> <H2>Mes coordonnes</H2> <HR WIDTH="60%"> <H2>Mon curriculum vitae</H2> <HR WIDTH="60%"> <H2>Mes hobbies</H2>

Jules Ducommun<BR> SI-DGR<BR> EPFL<BR> CH - 1015 Lausanne

J'ai frquent l'cole primaire de ...<P> J'ai suivi ensuite ... <HR> <I>Jules Ducommun / rvision 2.5.99</I>

Et comment faire pour que le texte " remplir..." du chapitre "Mes hobbies" soit <!-- remplir... --> 6 invisible au niveau du browser (commentaire HTML) ?