Exercice HTML: Débuter avec HTML

Rédigé par GC Team, Publié le 08 Janvier 2012, Mise à jour le Dimanche, 06 Avril 2025 15:43

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

Exercice HTML: Débuter avec HTML

Travail à Faire:

1. Crée un nouveau document dont le titre sera Exercice 1.

2. L'arrière-plan du document sera bleu verdâtre, le texte noir, les liens verts, les liens actifs rouges et les liens visités gris. Utilise la commande Spécialisés, Corps du document pour insérer ces codes de base.

3. Écris la phrase suivante avec la police de caractères Comic Sans MS:

Je débute mon apprentissage du langage HTML.

4. Reviens avec la police de base.

5. Fais un changement de ligne.

6. Écris la phrase suivante en augmentant la police de base de 2. (La taille par défaut est 3):

J'écris maintenant avec la police de base, de taille 5.

1. Clique sur Fichier de bloc-notes, Nouveau et dans la case Titre, écris Exercice1.txt et insère les codes des réponses qui suivent. 

2. Voici les codes à insérer :

 BODY  BGCOLOR="#008080" TEXT="#000000" LINK="#000080" VLINK="#C0C0C0" ALINK="#FF0000"> 

3. Voici les codes à insérer :

 FONT  FACE="Comic Sans MS">Je débute mon apprentissage du langage HTML./ FONT > 

4. Place le curseur après le code / FONT >. 

5. Voici la balise à insérer :

 BR > 

6. Voici les codes qui doivent être insérer:

 FONT  SIZE=5>J'écris maintenant avec la police de base, de taille 5./ FONT >

Exercice HTML: HTML Pas à Pas

1. Crée un nouveau document dont le titre sera Exercice Pas à Pas.

2. Écris la phrase suivante avec la police de caractères Times New Roman:

Je fais mon second projet HTML Pas à Pas.

36. Écris la phrase suivante en augmentant la police de base de 2. (La taille par défaut est 3):

J'écris maintenant avec la police de base, de taille 5.

4. Reviens avec la taille de base.

5. Fais un changement de paragraphe.

6. Écris cette expression:

36 cm³

7. Fais un changement de ligne.

8. Écris cette expression:

30 °C

9. Fais un changement de paragraphe.

10. Trace une ligne pleine longueur.

11. Fais un changement de paragraphe.

12. Écris cette liste non ordonnée:

Pommes
Poires
Ananas

13. Fais un changement de paragraphe.

1. Clique sur Fichier de bloc-notes, Nouveau et dans la case Titre, écris Exercice_Pas_à_Pas.txt et insère les codes des réponses qui suivent. 

2. Voici les codes à insérer :

<FONT FACE="Times New Roman">
Je fais mon second projet HTML Pas à Pas
.</FONT> 

3. Voici les codes qui doivent être insérer:

<FONT SIZE=5>
J'écris maintenant avec la police de base, de taille 5.
</FONT> 

4. Place le curseur après le code 
</FONT>. 

5. insère :<P> 

6. Écris l'expression et les codes pour l'exposant. Voici les codes : 
36 cm<SUP>3</SUP> 

7. Voici le code : <BR> 

8. Écris 30, fais un espace, aller aux Caractères spéciaux, place le symbole du degré en surbrillance et clique sur le crochet. 
Le symbole degré s'insère lui-même. Termine l'expression par C. Voici les codes qui s'afficheront:
30 °C 

9. Voici la balise :<P> 

10. Voici la balise à insérer :<HR> 

11. Voici le code :<P> 

12. Voici les codes à insérer:

<UL TYPE=DISC>
 <LI>
Pommes 
</LI>
<LI>
Poires 
</LI>
<LI>
Ananas
</LI>
</UL> 

13. insère:<P>

Exercice HTML: Simples Balises

1. Écris cette liste ordonnée:

Aimer
Détester
Haïr
Adorer

2 Fais un changement de paragraphe.

3. Écris maintenant une définition de liste:

Langage HTML

Codification utilisée pour les documents WWW. Ce type de codes a été inventé par Tim Berners-Lee alors au CERN.

Langage Java

Programmation qui fait suer son concepteur tout en lui apportant plusieurs satisfactions...

4. Fais un changement de ligne, trace une ligne centrée horizontalement qui occupera 80 % de la largeur de la page. Termine avec un changement de paragraphe.

5. Sauvegarde ton travail sur ton dossier personnel. Nomme ton fichier exercice1.html

1. Voici les codes :

<OL TYPE=A> 
<LI>Aimer 
<LI>Détester 
<LI>Haïr 
<LI>Adorer
</OL> 

2. Voici le code :<P> 

3. Voici les codes :

<DL> 
<DT>Langage HTML
<DD>Codification utilisée pour les documents WWW. Ce type de codes a été inventé par Tim Berners-Lee au CERN. 
<DT>Langage Java<DD>Programmation qui fait suer son concepteur tout en lui apportant plusieurs satisfactions...
</DL> 

4. Voici les code :

<BR>
<HR WIDTH=80%>
<P> 

5. Clique sur Fichier de bloc-notes, Enregistrer sous. Sélectionne ton dossier personnel et dans la case Nom du fichier, écrit Ecercice3.html. Clique sur Sauvegarder. Maintenant ouvre ton fichier par ton navigateur et regarde le résultat.

Exercice HTML: Insertion Image

1. Insère une image de format .gif à droite de ton document de travail et laisse 8 espaces entre l'image et le texte.

Écris ce qui suit:

Je suis fier ou fière de moi. J'illustre mon état d'âme par une image significative. Elle est alignée à droite.

2. Termine ton texte par un code spécial qui forcera le prochain texte à s'écrire après l'image.

3. Trace une ligne horizontale sur toute la largeur de la page.

4. Fais un changement de paragraphe et trace une ligne horizontale sur toute la largeur de la page.

5. Si tu as une adresse Internet, écris ton nom et place ton adresse en hyperlien.

6. Convertis les caractères accentués. N'oublie jamais d'exécuter cette procédure avant de placer un texte dans Internet afin que tous les usagers puissent lire la page.

7. Sauvegarde ton fichier sous le même nom qu'à la partie 1.

22. Voici les codes :
<IMG SRC="youppi.gif" BORDER=0 WIDTH=210 HEIGHT=180 HSPACE=8 align=right>
Je suis fier ou fière de ...

23. Voici le code : 
<BR clear=all>

24. <HR>

25.Voici les codes : 
<A HREF="http://www.vi.com/web/">
Exercicegratiot
</A>

26. <P><HR> 

27. Voici les codes : 
<A HREF="mailto:xx@col.qc.ca">Ton nom</A> 

28. utiliser la conversion, sur résumé du cours, des caractères spéciaux. 

29. Sauvegarder ton fichier.

Exercice HTML: Hyperliens

Travail à Faire:

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.

1. 
<HEAD> 
<TITLE>Exercice HTML 2</TITLE> 
</HEAD>

2. 
<MAP NAME="fictif">

SHAPE="RECT" COORDS="3,0,156,15"

3. 
HREF="index.html">

SHAPE="RECT" COORDS="166,3,273,13" 

4. 
HREF="aide.html">

SHAPE="RECT" COORDS="292,3,425,15" 

5. 
HREF="mailto:xx@gmail.com> </MAP>

6. 
<CENTER>
<IMG SRC="menu.gif" BORDER=0 WIDTH=438 HEIGHT=16 USEMAP="#fictif">
</CENTER>

Exercice HTML: Tableaux

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 , , sont facultatives, mais il vaut mieux les mettre

Nnnnnn	Aaaaaaaaaaaaa
Nnnnnn	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.

<CENTER><TABLE BGCOLOR="SILVER" WIDTH="80%" CELLSPACING="10" BORDER="3" CELLPADDING="5">
<CAPTION ALIGN="BOTTOM"><B>Tableau 1</B> : abc def ghi jkl mno pqr stu vwx yz.</CAPTION>
<TR BGCOLOR="RED" >
    <TH ROWSPAN="2" WIDTH="80">Nnnnnn</TH>
    <TH COLSPAN="2">Aaaaaaaaaaaaa</TH>
</TR>
<TR BGCOLOR="GRAY">
    <TH WIDTH="40%">Bbbbbbbb</TH>
    <TH WIDTH="40%">Cccccccc</TH>
</TR>
<TR>
    <TH BGCOLOR="GRAY">Un</TH>
    <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
	blabla blabla blabla blabla blabla</TD>
    <TD VALIGN="TOP">Xxxxx</TD>
</TR>
<TR>
    <TH BGCOLOR="GRAY">Deux</TH>
    <TD VALIGN="BOTTOM">Yyyyy</TD>
    <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
	blabla blabla blabla</TD>
</TR>
</TABLE></CENTER>

Exercice HTML: Simple Formulaire

Rappel : alert(chaine) ouvre une fenêtre pop-up contenant la chaîne et un bouton OK.Donnez le code source des divers fichiers nécessaires.

"-//w3c//dtd html 4.0 transitional//en"
html
head
titlecorrige exo1span style="color: #66cc66;">/title
span style="color: #66cc66;">/head
body
pform> name=monformulaire>
table> BORDER WIDTH="300" HEIGHT="125" >
tr
tdinput> type=button value= Nom >span style="color: #66cc66;">/td
tdinput> type=text name=nom size=20/td
span style="color: #66cc66;">/tr
tr
tdinput> type=button value= Telephone >span style="color: #66cc66;">/td
tdinput> type=text name=tel size=20/td
span style="color: #66cc66;">/tr
tr
tdinput> type=button value= Adresse >span style="color: #66cc66;">/td
tdinput> type=text name=adresse size=20/td
span style="color: #66cc66;">/tr
span style="color: #66cc66;">/table
span style="color: #66cc66;">/form
span style="color: #66cc66;">/BODY
span style="color: #66cc66;">/HTML

2)
Il vous faut trois fichiers :
1- Le fichier comportant la description des frames (frameset)
frames.html


<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
html
head
titlecorrige exo 1 - 2°span style="color: #66cc66;">/title
span style="color: #66cc66;">/head
FRAMESET> cols="40%,*"
<frame> name=questionnaire src=quest.html>
<frame> name=reponse src=rep.html>
span style="color: #66cc66;">/FRAMESET
span style="color: #66cc66;">/HTML


le fichier questionnaire (quest.html) qui comporte les boutons et qui a le fonctionnement indiqué :
quest.html


<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
html
head
titlecorrige exo2 questionnairespan style="color: #66cc66;">/title
span style="color: #66cc66;">/head
body
pform> name=monformulaire>
table> BORDER WIDTH="300" HEIGHT="125" >
tr
tdinput> type=button value= Nom onclick="alert(document.monformulaire.nom.value);"/td
tdinput> type=text name=nom size=20 value=''/td
span style="color: #66cc66;">/tr
tr
tdinput> type=button value=Telephone onclick="alert(document.monformulaire.tel.value);"/td
tdinput> type=text name=tel value='' ” size=20/td
span style="color: #66cc66;">/tr
tr
tdinput> type=button value= Adresse onclick="alert(document.monformulaire.adresse.value);"/td
tdinput> type=text name=adresse value='' size=20/td
span style="color: #66cc66;">/tr
span style="color: #66cc66;">/table
center
<input> type=button value=valider
onClick="window.parent.reponse.document.write('nom =', document.monformulaire.nom.value);
window.parent.reponse.document.write('

adresse=', document.monformulaire.adresse.value);
window.parent.reponse.document.write('span style="color: #66cc66;">/PPtelephone=',document.monformulaire.tel.value);
window.parent.reponse.document.write('span style="color: #66cc66;">/P');">
span style="color: #66cc66;">/form
span style="color: #66cc66;">/BODY span style="color: #66cc66;">/HTML

Exercice HTML: Réalisation d'un Formulaire de QCM

TRAVAIL A FAIRE :
1) Ecrire le programme HTML du formulaire « QCM » représenté par l’image ci-dessous.

Ecrire le code Javascript de la fonction "testqcm(form)" incluse dans le ficher HTML duformulaire « QCM », et qui affiche les résultats de la correction dynamique représentés parl’image ci-dessous.

Il faut créer deux fichiers HTML contenant l’un le formulaire et l’autre le corrigé.
Programme source du fichier test_raid.htm contenant le questionnaire et la fonction: "testqcm(form)"


HTML
HEAD
TITLEL'utilisation des procédés RAID1 et RAID5 - test/TITLE
META NAME="Description" CONTENT="L'utilisation des procédés RAID1 et RAID5 - test"
META NAME="Keywords" CONTENT="Administration avec Windows NT"
META NAME="Author" CONTENT=""
META NAME="Generator" CONTENT="WebExpert3"
META NAME="Organisme" CONTENT=""
SCRIPT LANGUAGE="JavaScript"

/SCRIPT
/HEAD
BODY BGCOLOR="#FFFFFF"
TEXT="#000000"
LINK="#000080"
VLINK="#800080"
ALINK="#FF0000"
SCROLL=AUTO LEFTMARGIN=20 RIGHTMARGIN=0 TOPMARGIN=0
FONT FACE="Times New Roman"
TABLE WIDTH="100%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0"
COL SPAN="3"
TR
TD/TD
TD
CENTERH3FONT COLOR="#800000"L'utilisation des procédés RAID1 et RAID5BRTest
d'auto-évaluation/FONT/H3
 HR/CENTER

FONT SIZE=2
PIBFONT COLOR="#008000"Qestionnaire sous forme de QCM. Les questions peuvent
comporter une ou plusieurs bonnes réponses./FONT/B/I
FORM NAME="QCM" METHOD="get"
PBQuestion 1 :/B
BRQuel est le type de disque système qui réalise une copie exacte de toutes les données
d'une partition disque dans une autre partition ?
I
LIINPUT TYPE="checkbox" NAME="question1" VALUE="A" RAID.BR

LIINPUT TYPE="checkbox" NAME="question1" VALUE="B" Sauvegarde disque.BR
LIINPUT TYPE="checkbox" NAME="question1" VALUE="C" Mise en miroir.BR
LIINPUT TYPE="checkbox" NAME="question1" VALUE="D" Dépannage à chaud.BR/I
PBQuestion 2 :/B
BRQuel est le type de disque système qui utilise de 3 a 32 disques physiques et est
aussi connu sous le nom de RAID5 ?
I
LIINPUT TYPE="checkbox" NAME="question2" VALUE="A" Agrégats par bandes avec parité.BR
LIINPUT TYPE="checkbox" NAME="question2" VALUE="B" Agrégats par bandes sans parité.BR
LIINPUT TYPE="checkbox" NAME="question2" VALUE="C" Disques en miroir.BR
LIINPUT TYPE="checkbox" NAME="question2" VALUE="D" Agrégats par bandes avec données
répétitives.BR/I
PBQuestion 3 :/B
BRQuel sont les types de disques qui assurent la tolérance de pannes ?
I
LIINPUT TYPE="checkbox" NAME="question3" VALUE="A" Les agrégats de partition.BR
LIINPUT TYPE="checkbox" NAME="question3" VALUE="B" Les agrégats par bandes avec
parité.BR
LIINPUT TYPE="checkbox" NAME="question3" VALUE="C" Les agrégats par bandes sans
parité.BR
LIINPUT TYPE="checkbox" NAME="question3" VALUE="D" Les disques en miroir.BR
LIINPUT TYPE="checkbox" NAME="question3" VALUE="E" RAID de niveau 0.BR/I
PCENTER
INPUT TYPE="button" VALUE="Correction" onClick="testqcm(this.form)"
INPUT TYPE="reset" VALUE="Effacer"
INPUT TYPE="button" VALUE="Corrigé" onClick="corrige()"
/FORM/center
/FONT/TD
TD/TD
/TR
/TABLE
/FONT
/BODY
/HTML

Exercice HTML: Création Formulaire Réponse QCM

Ecrire le code HTML de la fenêtre d’affichage du corrigé représentée par l’image ci-dessous.

HTML
HEAD
TITLEL'utilisation des procédés RAID1 et RAID5 - réponse au test/TITLE
META NAME="Description" CONTENT="L'utilisation des procédés RAID1 et RAID5 - réponse au test"
META NAME="Keywords" CONTENT="Administration avec Windows NT"
META NAME="Author" CONTENT=""
META NAME="Generator" CONTENT="WebExpert3"
META NAME="Organisme" CONTENT=""/HEAD
BODY BGCOLOR="#FFFFFF"
TEXT="#000000"
LINK="#000080"
VLINK="#800080"
ALINK="#FF0000"
SCROLL=AUTO LEFTMARGIN=20 RIGHTMARGIN=0 TOPMARGIN=0
FONT FACE="Times New Roman"
TABLE WIDTH="100%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0"
COL SPAN="3"
TR
TD/TD
TD
CENTERH3FONT COLOR="#800000"L'utilisation des procédés RAID1 et RAID5BRRéponse
du test/FONT/H3
HR/CENTER


FONT SIZE=2
PIBFONT COLOR="#008000"Les bonnes réponses aux questions apparaissent en couleur
rouge./FONT/B/I
PBQuestion 1 :/B
BRQuel est le type de disque système qui réalise une copie exacte de toutes les données
d'une partition disque dans une autre partition ?
I
LI RAID.BR
LI Sauvegarde disque.BR
LIBFONT COLOR="#FF0000" Mise en miroir./FONT/BBR
LI Dépannage à chaud.BR/I
PBQuestion 2 :/B
BRQuel est le type de disque système qui utilise de 3 a 32 disques physiques et est
aussi connu sous le nom de RAID5 ?
I
LIBFONT COLOR="#FF0000" Agrégats par bandes avec parité./FONT/BBR
LI Agrégats par bandes sans parité.BR
LI Disques en miroir.BR
LI Agrégats par bandes avec données répétitives.BR/I
PBQuestion 3 :/B
BRQuel sont les types de disques qui assurent la tolérance de pannes ?
I
LI Les agrégats de partition.BR
LIBFONT COLOR="#FF0000" Les agrégats par bandes avec parité./FONT/BBR
LI Les agrégats par bandes sans parité.BR
LIBFONT COLOR="#FF0000" Les disques en miroir./FONT/BBR
LI RAID de niveau 0.BR/I
CENTERFORM
INPUT TYPE="button" VALUE="Fermer la fenêtre" Onclick="self.close()"
/FORM/CENTER
/TD
TD/TD
/TR
/TABLE
/FONT
/BODY
/HTML

Exercice HTML: Formulaire Type

Ecrire le code HTML qui permet de réaliser le Formulaire suivant:

h2Formulaire Type/h2
form method="post" action="http://www.naziha.com")
h3Coordonnees/h3
strongNom/strongbr
input type="text" name="nom" size="25"p
strongPrenom/strongbr
input type="text" name="prenom" size="25"p
strongJe désire recevoir une documentation/strong
input type="checkbox" name=”doc”>p
strongPays/strong
select name="pays" size=1
optionCH: Suisse
optionD: Allemagne
..................
/selectpp
strongSexe/strong
input type="radio" name="sexe"Masculin
input type="radio" name="sexe"Fémininp
h3Domaine(s) d'activite/h3
Vous pouvez en choisir plus qu'un...p
input type="checkbox" name="domaine" value="Pedagogie"Pedagogie
input type="checkbox" name="domaine" value="Psychologie"Psychologie
input type="checkbox" name="domaine" value="Informatique"Informatique
input type="checkbox" name="domaine" value="Autre"Autre
h4Commentaire/h4
Si vous le voulez, vous pouvez decrire vos activites ou interets p
TEXTAREA name="comments" rows=4 cols=60/textareap
input type="reset" value="Effacer les données"
input type="submit" value="Enregistrer les donnees"p
/form

Exercice HTML: Fiche de renseignements

Ecrire le code HTML correspondant pour créer le Formulaire suivant:

CENTERTABLE border=3
TRTD
H2uCENTERFiche de renseignements/CENTER/u/H2
FORM  NAME="Fiche_inscription"
Nom : INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : INPUT TYPE ="text" NAME="Prenom" VALUE="" >
Mot de passe : INPUT TYPE="password" NAME="Pass" SIZE=5P
Vous êtes en terminale S à dominante : 
INPUT TYPE="radio" NAME="option" VALUE="math" checked>Mathématiques
INPUT TYPE="radio" NAME="option" VALUE="pc"Physique-chimie
INPUT TYPE="radio" NAME="option" VALUE="svt"SVT
P
Quelle est votre discipline préférée ?BR
CENTERSELECT NAME="disciplines"  MULTIPLE SIZE=3
  OPTIONPhysique
  OPTION SELECTED>Informatique
  OPTIONPhilosophie
  OPTIONMathématiques
  OPTIONLangues
  OPTIONSVT
  OPTIONHistoire 
  OPTIONEPS
/SELECT/CENTER
P
Vous vous êtes inscrit(e)s en : BR
CENTERTABLE border=2TRTD
INPUT TYPE="checkbox" CHECKED NAME="DEUG" >DEUGBR
INPUT TYPE="checkbox" NAME="CPGE"CPGEBR
INPUT TYPE="checkbox" NAME="BTS"BTSBR
INPUT TYPE="checkbox" NAME="IUT"IUTBR
INPUT TYPE="checkbox" NAME="AUTRE"AUTRE
/TD/TR
/TABLE/CENTER
P
Ecrivez ci-dessous le sujet de votre projet informatique :BR
CENTERTEXTAREA NAME="Projet" ROWS=8 COLS=55
Voici mon projet d'option informatique
/TEXTAREA/CENTER
P
INPUT TYPE="RESET" VALUE="Effacer Pour recommencer"
INPUT TYPE="SUBMIT" VALUE="Valider" >P
/FORM >
/TD/TR
/TABLE/CENTER

Exercice HTML: Formulaire d'inscription

Ecrire le code HTML qui permet de réaliser un Formulaire d'inscription:
Interface Graphique:



HTMLHEADTITLEInscription/TITLE
META content=D.Gonzalez name=Author>
META content="MSHTML 6.00.6001.18344" name=GENERATOR>
META http-equiv=Content-Type content="text/html; charset=iso-8859-1"/HEAD
BODY
H2 align=center>Inscription/H2
FORM name=inscript action=form01.php3 method=get>
HR
B>FONT size=+1Vous/>FONT/BBR
TABLE align=center>
  TBODY
  TR
    TD align=right>BNom/B/TD
    TD>INPUT size=40 name=Nom>/TD/TR
  TR
    TD align=right>BPrénom/B/TD
    TD>INPUT size=40 name=Prénom>/TD/TR
  TR
    TD align=right>BNuméro carte d'étudiant/B/TD
    TD>INPUT size=40 name=Carte>/TD/TR
  TR
    TD align=right>Téléphone/TD
    TD>INPUT size=40 name=Téléphone>/TD/TR
  TR
    TD align=right>Adresse Email/TD
    TD>INPUT size=40 name=email>/TD/TR/TBODY/TABLE
P
HR
B>FONT size=+1Vos études actuelles/>FONT/BBR
TABLE align=center>
  TBODY
  TR
    TD align=right>BUFR/B/TD
    TDSELECT name=UFR> OPTION value=-1 selected>----- Choisir une UFR 
        dans la liste -----OPTION value=0AutreOPTION value=1AngellierOPTION 
        value=2Arts et CultureOPTION value=3Études GermaniquesOPTION 
        value=4Études Romanes, Slaves et OrientalesOPTION value=5IDISTOPTION 
        value=6IUP InfocomOPTION value=7Langues et Cultures AntiquesOPTION 
        value=8Langues Étrangères et AppliquéesOPTION value=9LettresOPTION 
        value=10Mathématiques, Sciences Économiques et Sociales (AES)OPTION 
        value=11PhilosophieOPTION value=12PsychologieOPTION 
        value=13Sciences de l'ÉducationOPTION value=14Sciences Historiques 
        Artistiques et Politiques/OPTION/SELECT /TD
  TR vAlign=top>
    TD align=right>BAnnée/B/TD
    TDSELECT name=Année> OPTION value=-1 selected>--Choisir une 
        année--OPTION value=0AutreOPTION value=1Deug 1ère annéeOPTION 
        value=2Deug 2ème annéeOPTION value=3IUP 1ère annéeOPTION value=4IUP 
        2ème annéeOPTION value=5IUP 3ème annéeOPTION value=6LicenceOPTION 
        value=7MaîtriseOPTION value=8DEAOPTION 
      value=9Doctorat/OPTION/SELECT /TD/TR/TBODY/TABLE
P
HR
B>FONT size=+1Votre inscription/>FONT/BBR
TABLE align=center>
  TBODY
  TR vAlign=top>
    TD align=right>BQuel semestre?/B/TD
    TDSELECT name=Semestre> OPTION value=PasDeSelection 
        selected>--Choisir un semestre--OPTION value=X0>1er semestreOPTION 
        value=0X>2ème semestreOPTION value=XX>Les deux 
      semestres/OPTION/SELECT /TD/TR/TBODY/TABLE
HR

CENTER>FONT size=+1>INPUT type=reset value="Pour vider le formulaire, cliquer ici." >INPUT type=submit value=Envoyer>/>FONT /CENTER
HR
/FORM/BODY/HTML

Exercice HTML: Fonctions

Ecrire le code HTML qui prmet de réaliser le formulaire suivant:

html
head

script language ="javascript"
function controle()
{
var a =eval(document.form.input.value);
var b =eval(document.form.input1.value);

document.form.input3.value=a+b
}
function production()
{
var a =eval(document.form.input.value);
var b =eval(document.form.input1.value);
document.form.input3.value=a*b
}
function soustraction()
{
var a =eval(document.form.input.value);
var b =eval(document.form.input1.value);
document.form.input3.value=a-b
}
--------------------------------------
function choixprop(form){
if(form.choix[0].checked)
{ controle()};
if(form.choix[1].checked)
{ production()};
if(form.choix[2].checked)
{ soustraction()};}
/script
/head
body bgcolor=#abcdef>
form name="form"
Enter le numero 1 input type ="text" name="input" >br
Enter le numero 2 input type ="text" name="input1" >br
Enter le numero 3 input type ="text" name="input2" >br
LA somme est  input type ="text" name="input3" >br
br
br
input type ="button" name="bouton" value="contrôler" onclick="soustraction(form)"
br---------------------------br
br
br

input type="radio" name= "choix" value="1" > choix 1br
input type="radio" name= "choix" value="2" > choix 2br
input type="radio" name= "choix" value="3" > choix 3br
input type="button" name= "bouton" value="verfiez votre choix" onClick="choixprop(form)"br

/form

/body
/html

Exercice HTML: Facture de commande des Livres

Ecrire un code HTML qui permet de réaliser un Tableau pour iditer la Facture de commande des lives en utilisant les feuilles de Styles

Interface Graphique:



"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Groupement de colonnes</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="images/x-icon" href="../images/favicon.ico" />
<style type="text/css" title="">
.gras{font-weight:bold; background-color: red;}
.prix{background-color: yellow;}
.date{background-color:#AAA;color:blue;}
</style>
</head>
<body>
<table border="5" width="100%" rules="groups" summary="Facture de livres"
? cellpadding="5">
<caption><big>Facture de votre commande de livres</big></caption>

<colgroup id="date" width="10%" span="1" align="center" class="date">
</colgroup>

<colgroup id="titre" span="2" width="25%" align="left" class="gras">
</colgroup>

<colgroup id="prix" span="3" align="right" class="prix">
<col width="10%" />
<col span="2" width="15%" />
</colgroup>

<thead><tr><th>Date </th><th>Titre </th> <th>Auteur</th> <th>Quantité </th>
? <th>Prix Unitaire </th> <th>Prix Total </th> </tr> </thead>
<tfoot><tr><th>Date </th> <th>Désignation </th> <th>Auteur</th> <th>Quantité
? </th> <th>Prix Unitaire </th> <th>Prix Total </th> </tr></tfoot>

<tbody>
<tr>

<td>29/05/2005</td><td>XHTML Design</td><td>Jeffrey Zeldman</td><td>3</td>
? <td>32.00 €</td><td>96.00 €</td>
</tr>
<tr>
<td>15/06/2005</td><td>CSS 2 </td><td>Raphael Goetter</td><td>2</td>
? <td>30.00 €</td><td>60.00 €</td>
</tr>
<tr>
<td>10/09/2005</td><td>XHTML et CSS </td><td>Jean Engels</td><td>5</td>
? <td>29.90 €</td><td>149.50 €</td>
</tr>
</tbody>
</table>
</body>
</html>

Exercice HTML: Formulaire avec Style

Créer le code HTML qui permet de réaliser le Formulaire suivant:

html
head
/head
body
centertable border=1
tr
tdh2ucenterBienVenu/center/u/h2
form method="post" action="http://www.serveur.fr/cgi-bin/script"
Nom : INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : INPUT TYPE ="text" NAME="Prenom" VALUE="" >
Mot de passe : INPUT TYPE="password" NAME="Pass" SIZE=5P
Choisissez quelque chose :br
input type="radio" name="svt" value="svt" checked>sciences de la vie et de la terre br
input type="radio" name="math" value="math"mathématiquesp
fait le choix d'icibr
centerselect name="choix" multiple size=5
optionmath
option selected>physique
optionAnglais
/select/centerp
vous voulez faire : br
input type="checkbox" name="génié"ingenieurbr
input type="checkbox" name="farme" checked>docteur
p
centertextarea name="avs" cols=44 rows=12
/TEXTAREA
P
INPut type="reset" value="Suppremer"
input type="submit" value="Envoyer"
/form
/td/td/table/center

Exercice HTML: Attributs de Page

Réalisez la page Web représentée par l'image ci-dessous.

<HTML>
	<HEAD>
	  <TITLE>Corrigé Exercice Attributs de page</TITLE>
	</HEAD>
	<BODY BACKGROUND="fond_spirale.gif" TEXT="navy" LINK="red" VLINK="maroon">
	<BLOCKQUOTE>

	<H1>Exercice Attributs de page</H1>

	<UL>
	<LI>Cette page contient l'image "fond_spirale.gif"...
	<LI>Pour ménager de la place à gauche pour la spirale...
	<LI>La couleur par défaut du texte est le "navy"...
	<LI>Les liens...
	</UL>

	<TABLE ALIGN="center" WIDTH="60%" BGCOLOR="silver" BORDER="1">
	<TR>
	<TH COLSPAN="2">Couleur de fond "silver"</TH>
	</TR>
	<TR>
	<TH BGCOLOR="yellow">Fond "yellow"</TH>
	<TH BGCOLOR="lime">Fond "lime"</TH>
	</TR>
	</TABLE>

	</BLOCKQUOTE>
	</BODY>
	</HTML>

Exercice HTML: Diaporama

Créer un Code HTML qui permet de réaliser un Diaporama auto des photos


html
head
titleDocument sans titre/title
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/head

body bgcolor="#FFFFFF"
table width="209" height="250" border="1" align="center"
  tr
    td width="199" height="159" bgcolor="#3399FF" div align="left"
        script language="JavaScript1.2"
//Drop-in slideshow- Par Dynamic Drive
//Pour d'autres codes DHTML scripts, visitez http://www.dynamicdrive.com
//Laissez en place le copyright svp


var slideshow_width=200 // Largeur des images. Utilisez la plus grande largeur si vos images ne sont pas identiques
var slideshow_height=133 //Hauteur des images. Utilisez la plus grande largeur si vos images ne sont pas identiques
var pause=4000 //Pause entre chaque image (3000=3 seconds)


var dropimages=new Array()
// Entrez ci-dessous le path et le nom de vos images
// IMPORTANT / N'oubliez pas d'incrémenter la valeur qui est entre les crochets [...]
dropimages[0]="image1.jpg"
dropimages[1]="image2.jpg"
dropimages[2]="image3.jpg"
dropimages[3]="image4.jpg"
dropimages[4]="image5.jpg"
dropimages[5]="image6.jpg"
////Ne rien éditer ci-dessous/////////////


var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}


var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1


if (ie4||dom)
document.write('

+slideshow_width+';height:'+slideshow_height+';overflow:hidden">

+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'">

')

else
document.write('img name="defaultslide" src="'+dropimages[0]+'"')


var curpos=slideshow_height*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1




function movepic(){
if (curpos0){
curpos=Math.min(curpos+degree,0)
tempobj.style.top=curpos
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='+dropimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}


function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}


function resetit(what){
curpos=slideshow_height*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos}


function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='+dropimages[curimageindex]+'">'
rotateimage()
}


if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)


/script
      /div/td
  /tr
/table
/body
/html

Exercice HTML: TP HTML & CSS

Ecrire un Code qui permet de réaliser le Tableau suivant:

htmlheadtitleposition/title
style type="text/css"

/style
/headbody bgcolor="FFFFFF" text="#000000"

div id="boite1" style="background:red; border:solid 2px blue;"boite 1/div
div id="boite2" style="background:blue; border:solid 2px white;"boite 2/div
div id="boite3" style="background:yellow; border:solid 2px red;"boite 3
        div id="boite4" style="background:gold; border:solid 2px green;"boite 4/div
        div id="boite5" style="background:lime; border:solid 2px navy;"boite 5/div
        div id="boite6" style="background:red; border:solid 2px blue;"boite 6/div
/div

/body/html

Exercice HTML: Page Spécifique

A titre d'exemple on vous demande de réaliser la page correspondant à la recette des Œufs sur le plat de manière à ce qu'elle ressemble à celle ci-dessous:

L' entête et le pieds de page sont conforme à la charte.
L'illustration de la recette est à droite avec une légende en petit caractères
Les ingrédients sont listés dans une zone à fond vert pàle et dans une police sans-serif. Chaque élément de la liste est indexe par une lettre (par ordre alphabétique)
Les noms des ingrédients apparaissent en bleu
Les commentaires sont en rouge, décalés d'une largeur équivalente à 5 lettres M vers la droite.



<html>
  <head>
    <meta charset="UTF-8"/>
 <link rel="stylesheet" type="text/css" href="charte.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="oeuf.css" media="screen" />
    <title>l'oeuf</title>
    <style>
   img { width="30%" height="30%"}
    </style>
  </head>
  <body>


    <div class="en-tete">	<h1>Cuisine</h1>
      <a href="">Accueil</a>><a href="">Recettes simples</a>><b>Œufs sur le plat</b> 

    </div>

    <h2><a id="a1">Œufs sur le plat</a></h2>

    <div class="illustration">
      <img src="oeuf.png" alt="image d'un œuf."/>
      <p>Une illustration très laide, mais libre de droits.</p>
      <div></div>
    </div>
    <div class="ingredients">
      <h3>Ingrédients</h3>
      <ol>
	<li>une noisette de <span class="ingr">beurre</span> ;
	  <p class="remarque">Si le beurre est salé, on salera moins les œufs ensuite.</p>
	</li>
	<li>des <span class="ingr">œufs</span>
	  <p class="remarque">prendre des œufs raisonnablement frais</p>
	</li>
      </ol>
      </div>

    <h3>Préparation</h3>
    <ol class="preparation">
      <li>Faire chauffer la poêlle</li>
      <li>la graisser avec le beurre</li>
      <li>casser les deux œufs dans la poêlle</li>
      <li>retirer du feu quand la consistence souhaitée est atteinte</li>
    </ol>


	<div class="bas-de-page">
           <p>   NFA016:  <br/> <img src="logo_cnam.png" alt="le logo du cnam"/></p>
	</div>

  </body>
</html>

Exercice HTML: Images et heure

Ecrire le code qui permet de réaliser la petite page suivante:

html
head
titleImage/title			
style	
#s{
border:dotted 2px red;
margin:auto;
width:100;
height:100;
padding-left:10px;
}
/style
script language="javascript">	
 var i=1;
 function afficher(){
if(i=5){
photo.src=i+".jpg";} 				   
if(i==5){
i=0;}
i++;}	
 function heure(){
var d=new Date();						
document.getElementById('d').innerHTML="il est : "+d.getHours()+" h "+d.getMinutes()+" m "+d.getSeconds()+" s.";
}
setInterval('afficher()',1000);
setInterval('heure()',1000);
 /script 
/head	 
body
center		  
div id="s">
="up" scrollamount="1" width="100" height="100" onmouseover="stop();" onmouseout="start();">
ple premier lien/p									
brimg src="1.jpg" width=80 height=80 />
/marquee>
/div
p id="d">/pbr />
img src="1.jpg" name="photo" width=350 height=350 />	

/center
/body
/html

Exercice HTML: La Balise FRAME

Ecrire le code HTML qui permet de réaliser la page suivante:


<HTML>

<HEAD>

<TITLE> utilisation des frames</TITLE>

</HEAD>

<FRAMESET ROWS="90, *">

<FRAME src="exemple1.html" NAME="exemple" MARGINWIDTH=5                   MARGINHEIGHT=5>

 <FRAMESET COLS="50%, 50%">

                    <FRAME SRC="atelier-5.html" NORESIZE

                                     NAME="structure"  MARGINWIDTH=5 MARGINHEIGHT=5>

                    <FRAME SRC="atelier8.html"

                                     NAME="division"  MARGINWIDTH=5 MARGINHEIGHT=5>

</FRAMESET>

<NOFRAMES>

 ce document contient des frames et votre navigateur est incapable de les gérer

<NOFRAMES>

</FRAMESET>

</HTML>
-----------------------------------------------------------------------------------------------------

Atelier-5.html:

<HTML>

  <HEAD>

     <TITLE>mon home page</TITLE>

   </HEAD>

<BODY>

   <H1>PRENOM NOM </H1>

    Fonction: <BR>  

   Organisme: <BR> 

  détails personnels :<BR> 

  Activités de formation:<BR> 

  autres activités: <BR> 

 </BODY>

</HTML>
-----------------------------------------------------------------------------
exemple1.html:
<html>
  <head>
     <title> introduction au langage HTML </title>
  <head>
<body >
   mon premier document html ! 
   effectivement vous avez raison, c'est très simple !!!!! 

</body>
------------------------------------------------------------------------------
atelier8.html:

<HTML>
 <HEAD>
     <TITLE> Les tabeaux </TITLE>
 </HEAD>
 <BODY>
<table >
  <tr valign=center align=CENTER>
    <th>article</th>
    <th>référence</th>
    <th>prix</th>
</tr>
<tr valign=center align=CENTER>
    <td>livre</td>
   <td>A120</td>
  <td>98</td>
 </tr>  
<tr valign=center align=CENTER>
    <td>cahier</td>
   <td>A125</td>
  <td>5.0</td>
 </tr>  
</table>
<table border=6 cellspacing=2 >
  <tr valign=center align=CENTER>
    <td colspan=4>cellule unique</td>
  </tr>
  <tr valign=center align=left>
    <td rowspan=2 bgcolor="green">100</td>
   <td>200</td>
   <td>500</td>
  <td>1000</td>
  </tr>
  <tr valign=MIDDLE align=CENTER>
   <td>cellule</td>
   <td>gauche</td>
  <td>droite</td>
  </tr>

</table>
<table border=5 cellspacing=2 cellpadding=10>

    <caption align="TOP">

      <b>Tableaux &agrave éléments multiples</b>

    </caption>

   <tr align="center">

        <td><a href="http://www.ensias.ma">ENSIAS</a></td>

        <td><img src="p-suivante.gif"></td>

        <td></td>

    </tr>

    <tr>

       <td><img src="telecharger.GIF"></td>

        <td>

           <ul>

           <li>un

          <li>Deux

          <li>trois

          </ul>

       </td>

       <td align="center">

         <a href="www.w3.org">
 <img     src="porte.gif"></a>

        </td>

     </tr>

    <tr>

      <td align="center"><i>Entrez<br>votre nom</td>

      <td align="left">

            <form method="post" action="aucune">

             <input name="nom">

               <td align="center">

              <input type="submit" value="clic!">

            </form>

       </td>

    </tr>

</table>

 </BODY>

Exercice HTML: Formulaire avec Style

Créer le code HTML qui permet de réaliser le Formulaire suivant:

html
head
/head
body
centertable border=1
tr
tdh2ucenterBienVenu/center/u/h2
form method="post" action="http://www.serveur.fr/cgi-bin/script"
Nom : INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : INPUT TYPE ="text" NAME="Prenom" VALUE="" >
Mot de passe : INPUT TYPE="password" NAME="Pass" SIZE=5P
Choisissez quelque chose :br
input type="radio" name="svt" value="svt" checked>sciences de la vie et de la terre br
input type="radio" name="math" value="math"mathématiquesp
fait le choix d'icibr
centerselect name="choix" multiple size=5
optionmath
option selected>physique
optionAnglais
/select/centerp
vous voulez faire : br
input type="checkbox" name="génié"ingenieurbr
input type="checkbox" name="farme" checked>docteur
p
centertextarea name="avs" cols=44 rows=12
/TEXTAREA
P
INPut type="reset" value="Suppremer"
input type="submit" value="Envoyer"
/form
/td/td/table/center

Exercice HTML: La Balise SPAN

Ecrire le code qui permet de réaliser le paragraphe suit:

Exemple de feuille de style globale

Voici un élément strong qui est inséré dans le texte.

Voici un paragraphe dont le texte est justifié : pour visionner cette propriété, il faut bien sûr que le texte comporte plus de deux lignes, car dans le cas inverse, il semblera correspondre à un paragraphe ordinaire, sans justification...

Portion de texte (SPAN) dont la classe est "info"

un element P avec un attribut class

<HTML>

  <HEAD>

  <TITLE>demo style global </TITLE>

  <STYLE TYPE="text/css">

                BODY {background-image:URL(image.jpg)}

                P {text-align:justify}

                .info {background:maroon;color:white}

                STRONG {color:red}

    </STYLE>

 </HEAD>

  <BODY>

   <H1> Exemple de feuille de style globale </H1>

<P> 

Voici un <STRONG>élément strong</STRONG> qui est inséré dans le texte. 

<P>Voici un paragraphe dont le texte est justifié : pour visionner cette propriété, il faut bien sûr que le texte comporte plus de deux lignes, car dans le cas inverse, il semblera correspondre à un paragraphe ordinaire, sans justification... </P>



<SPAN CLASS="info">Portion de texte (SPAN) dont la classe est "info" </SPAN>

<P CLASS="info"> un element P avec un attribut class </P>

  </BODY>

</HTML>

Exercice HTML: Texte et Image avec Style

Ecrire le code qui permet de réaliser ce qui suit:


HTML

  HEAD

  TITLEdemo style global /TITLE

 STYLE TYPE="text/css"

         P {

           border-style: dotted

           border: solid;

	text-align: justify;

	text-indent: 1pixels;

	display: block;

	margin: 5px;

	width: 300;

	border: solid #0033FF;

                  width: 400px;

                 height: 145px

	}		   

 img.p {

	font-size: 16px;

	font-style: normal;

	line-height: 30px;

	font-weight: bold;

	margin: auto;

	text-align: right;

	display: block;

	float: right;

	padding: 0px;

	clear: right;

	position: absolute;

	top: 15px;

	right: 80px;

	height: 120px;

	width: 120px;

}

 /STYLE

  /HEAD

  BODY

  P

   On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche [ndt. margin-left], "ED" mis pour espacement droit [ndt. padding-right], "BH" mis pour bordure haute [ndt. border-top], etc.). 



On appelle le périmètre de chacune des quatre aires 

(contenu, espacement, bordure et marge) un "bord", chaque boîte a donc quatre bords : 

 BR

 img CLASS="p" src="image1.jpg"/ 

 img src="image1.jpg" 

  /BODY

/HTML

Exercice HTML: HTML Pas à Pas

1. Crée un nouveau document dont le titre sera Exercice Pas à Pas.

2. Écris la phrase suivante avec la police de caractères Times New Roman:

Je fais mon second projet HTML Pas à Pas.

36. Écris la phrase suivante en augmentant la police de base de 2. (La taille par défaut est 3):

J'écris maintenant avec la police de base, de taille 5.

4. Reviens avec la taille de base.

5. Fais un changement de paragraphe.

6. Écris cette expression:

36 cm³

7. Fais un changement de ligne.

8. Écris cette expression:

30 °C

9. Fais un changement de paragraphe.

10. Trace une ligne pleine longueur.

11. Fais un changement de paragraphe.

12. Écris cette liste non ordonnée:

Pommes
Poires
Ananas

13. Fais un changement de paragraphe.

1. Clique sur Fichier de bloc-notes, Nouveau et dans la case Titre, écris Exercice_Pas_à_Pas.txt et insère les codes des réponses qui suivent. 

2. Voici les codes à insérer :

<FONT FACE="Times New Roman">
Je fais mon second projet HTML Pas à Pas
.</FONT> 

3. Voici les codes qui doivent être insérer:

<FONT SIZE=5>
J'écris maintenant avec la police de base, de taille 5.
</FONT> 

4. Place le curseur après le code 
</FONT>. 

5. insère :<P> 

6. Écris l'expression et les codes pour l'exposant. Voici les codes : 
36 cm<SUP>3</SUP> 

7. Voici le code : <BR> 

8. Écris 30, fais un espace, aller aux Caractères spéciaux, place le symbole du degré en surbrillance et clique sur le crochet. 
Le symbole degré s'insère lui-même. Termine l'expression par C. Voici les codes qui s'afficheront:
30 °C 

9. Voici la balise :<P> 

10. Voici la balise à insérer :<HR> 

11. Voici le code :<P> 

12. Voici les codes à insérer:

<UL TYPE=DISC>
 <LI>
Pommes 
</LI>
<LI>
Poires 
</LI>
<LI>
Ananas
</LI>
</UL> 

13. insère:<P>

Exercice HTML: Image et Tableau

Ecrire le code qui permet de réaliser la petite page suivante:

<HTML>
<HEAD>
<TITLE>tableau 4</TITLE>
</HEAD>
<Body>
 <TABLE BORDER=5>
 <TR>
 <TD ROWSPAN=2>
<IMG SRC="225sbe52.jpg">
</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg" WIDTH=50% HEIGHT=50%>
</TD>
 <TD><IMG WIDTH=70 HEIGHT=50
SRC="225sbe52.jpg"></TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 </TR>
 <TR>
 <TD>rien</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 </TR>
</TABLE>
<BODY>
<HTML>

Exercice HTML: Image et Tableau

Ecrire le code qui permet de réaliser la petite page suivante:

<HTML>
<HEAD>
<TITLE>tableau 4</TITLE>
</HEAD>
<Body>
 <TABLE BORDER=5>
 <TR>
 <TD ROWSPAN=2>
<IMG SRC="225sbe52.jpg">
</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg" WIDTH=50% HEIGHT=50%>
</TD>
 <TD><IMG WIDTH=70 HEIGHT=50
SRC="225sbe52.jpg"></TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 </TR>
 <TR>
 <TD>rien</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 </TR>
</TABLE>
<BODY>
<HTML>

Exercice HTML: Attributs de Page

Réalisez la page Web représentée par l'image ci-dessous.

<HTML>
	<HEAD>
	  <TITLE>Corrigé Exercice Attributs de page</TITLE>
	</HEAD>
	<BODY BACKGROUND="fond_spirale.gif" TEXT="navy" LINK="red" VLINK="maroon">
	<BLOCKQUOTE>

	<H1>Exercice Attributs de page</H1>

	<UL>
	<LI>Cette page contient l'image "fond_spirale.gif"...
	<LI>Pour ménager de la place à gauche pour la spirale...
	<LI>La couleur par défaut du texte est le "navy"...
	<LI>Les liens...
	</UL>

	<TABLE ALIGN="center" WIDTH="60%" BGCOLOR="silver" BORDER="1">
	<TR>
	<TH COLSPAN="2">Couleur de fond "silver"</TH>
	</TR>
	<TR>
	<TH BGCOLOR="yellow">Fond "yellow"</TH>
	<TH BGCOLOR="lime">Fond "lime"</TH>
	</TR>
	</TABLE>

	</BLOCKQUOTE>
	</BODY>
	</HTML>

Exercice HTML: TP HTML et feuilles de style externe

1) Ecrire le code HTML et CSS qui permet de réaliser le tableau suivant:

2) Ecrire le code HTML et CSS "externe" qui permet de réaliser la page suivante:

1)

HTML 

  HEAD

link rel="stylesheet" type="text/css" href="exe1.css"

  /HEAD 

  BODY 

    TABLE 

      TR 

        TDA 

        /TD 

        TDB 
        /TD 
        TDC 
        /TD 
      /TR 
      TR 
        TDA1 
        /TD 
       TDB1 
        /TD 
        TDC1 
        /TD 
      /TR 
    /TABLE 
  /BODY
/html

----------------------------------------------------------------------------

CSS:

table { 
border:2px solid black; 
margin:auto; 
} 
td, tr{ 
border:1px solid #f02485; 
text-align:center; 
width:150px; 
height:50px; 
vertical-align:middle; 
text-align:center;} 
------------------------------------------------------------------------------
2)
html

head

link rel=stylesheet type="text/css" href="test7.css"

body

H1Le titre EMest/EM important !/H1br

p les feuilles de styles/pbr

p css /p

/body

/html

-------------------------------------------------------------------------------
CSS:

BODY { 
  color: black;
  background: url(2.gif) white;
}
p {
color:blue;
font-family=arial;
font-size:18;
}

Exercice HTML: Entré de Style sur un Texte

Ecrire le code Html et CSS qui permet de réaliser le texte suivant:


<HTML>

  <HEAD>

  <TITLE>demo style global </TITLE>

 <STYLE TYPE="text/css">

         P {

           border-style: dashed;

           width: 400px

           /* border-top: solid red;

           border-right:  solid red;

           border-bottom: solid red;

           border-left: solid red*/

           }

</STYLE>

  </HEAD>

  <BODY>

    <P>

   On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche [ndt. margin-left], "ED" mis pour espacement droit [ndt. padding-right], "BH" mis pour bordure haute [ndt. border-top], etc.). 



On appelle le périmètre de chacune des quatre aires (contenu, espacement, bordure et marge) un "bord", chaque boîte a donc quatre bords : 



Le bord du contenu ou bord interne 

Celui-ci entoure le rendu du contenu de l'élément. 

Le bord de l'espacement 

Celui-ci entoure la boîte de l'espacement. Si la valeur de l'espacement est 0, son bord est confondu avec celui du contenu. Le bord d'espacement d'une boîte définit le bord du bloc conteneur établi par la boîte ; 

Le bord de la bordure 

Celui-ci entoure la boîte de la bordure. Si la valeur de la bordure est 0, son bord est confondu avec celui de l'espacement. 

Le bord de la marge ou bord externe 

Celui-ci entoure la boîte de la marge. Si la valeur de la marge est 0, son bord est confondu avec celui de la bordure. 

On peut se référer à chacun de ces bords selon qu'il se trouve du côté gauche, droite, haut ou bas. 



Les dimensions de l'aire du contenu d'une boîte, celles-ci étant la largeur du contenu et la hauteur du contenu, dépendent de plusieurs facteurs : l'élément générant la boîte a-t-il une propriété 'width' ou bien 'height', la boîte contient-elle du texte ou d'autres boîtes, la boîte est-elle une table, etc. Les largeurs et hauteurs des boîtes sont traitées dans le chapitre concernant les détails du modèle de mise en forme visuel. 



On obtient la largeur de la boîte en additionnant les marges, bordures et espacements gauches et droites avec le largeur du contenu. De même pour la hauteur de la boîte, en additionnant les marges, bordures et espacement hauts et bas avec la hauteur du contenu. 



Le style qui est appliqué à l'arrière-plan du contenu et aux aires de l'espacement et de la marge, est spécifié au travers de la propriété 'background' de l'élément qui génère la boîte. L'arrière-plan des marges est toujours transparent. 

</P>

  </BODY>

</HTML>

Exercice HTML: Première Page Style

Ecrire un Code HTML avec style qui permet de réaliser la Page suivante:




<html>

<head>

  <title>Ma première page avec du style</title>

</head>



<body>





<ul class="navbar">

  <li><a href="index.html">Home page</a>

  <li><a href="reflexions.html">Réflexions</a>

  <li><a href="ville.html">Ma ville</a>

  <li><a href="liens.html">Liens</a>

</ul>





<h1>Ma première page avec du style</h1>



<p>Bienvenue sur ma page avec du style! 



<p>Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, même s'ils ne mènent nulle part...
…
<p>Je devrais étayer, mais je ne sais comment encore.

<address>Fait le 5 avril 2004<br>
  par moi.</address>
</body>
</html>

<html>
<head>
  <title>Ma première page avec du style</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>
<body>
[etc.]

<html>
<head>
  <title>Ma première page avec du style</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>
<body>
[etc.]

<html>
<head>
  <title>Ma première page avec du style</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>
<body>
[etc.]

<html>
<head>
  <title>Ma première page avec du style</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>
<body>
[etc.]
body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

<html>
<head>
  <title>Ma première page avec du style</title>
  <link rel="stylesheet" href="monstyle.css">
</head>
<body>
[etc.]

Exercice HTML: Paragraphe

Ecrire le code qui permet de réaliser la paragraphe quivante:

Les mois du printemps

avril
mai
juin

Les mois d'automnep

octobre
novembre
dcembre

<html>
<head>
Exercice HTML</titre>
</head>
<body>


<H1>Les mois du printemps</H1> 

<H2>Les mois du printemps</H2>

<UL><LI>avril 

<LI>mai 

<LI>juin</UL>

<P>

<H3>Les mois d'automnep 

</H3>

<OL><LI>octobre 

<LI>novembre 

<LI>dcembre</OL> 


</body>
</html>

Exercice HTML: Les Balises DIV et SPAN

Ecrire le Code qui permet de réaliser la page suivante:

HTML>
HEAD>
TITLE>utilisation balises DIV et SPAN</<ahref="http://december.com/html/4/element/title.html">TITLE>
<<ahref="http://december.com/html/4/element/style.html">STYLE>
BODY 	{BACKGROUND-COLOR:#6699CC;BACKGROUND-POSITION:0% 0%;COLOR:rgb(0,0,0);MARGIN-LEFT:10px}
.motif1	{BACKGROUND-COLOR:#ffcc66;FONT-SIZE:100px}
.motif2 {BACKGROUND-COLOR:#9933cc;FONT-SIZE:100px}
.motif3	{BACKGROUND-COLOR:blue;FONT-SIZE:100px}
.trait	{position: absolute;top:420px;left:10px}
.taillefont	{FONT-SIZE:100px}
.posi1	{position:absolute;top:60px;left:10px}
.posi2	{position:absolute;top:60px;left:140.posi3	{position:absolute;top:220px;left:140px}
/<ahref="http://december.com/html/4/element/style.html">STYLE>
ahref="http://december.com/html/4/element/meta.html">META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
l">HEAD>
BODY>
ENTER>
<<aB>Utilisations des balises DIV et SPAN<<>BR> ( images remplacées par des caractères de 
la fonte Webdings )</<aB></<ahref="http://december.com/html/4/element/center.html">CENTER>
<ahref="http://december.com/html/4/element/hr.html">HR><<>BR>

<<DIV class="posi1"><<aB>3 blocs DIV <<>BR>(saut de ligne) </<aB><<>BR><<>BR>
=FONT face=webdings size=7>
<<DIV class="motif1"> K </<DIV>
<<DIV class="motif1"> E </<DIV>
<<DIV class="motif1"> R </<DIV></<aFONT><<>BR></<DIV>

<<DIV class="posi2">
<<>BR><<aB>3 éléments SPAN ( pas de saut de ligne )</<aB> <<>BR><<>BR>
=FONT face=webdings size=7>
<>SPAN class="motif2">K</>SPAN><>SPAN class="motif2">E</>SPAN><>SPAN class="motif2">R</>SPAN> 
</<aFONT><<>BR><<ahref="http://december.com/html/4/element/hr.html">HR><<>BR></<DIV>.

=http://december.com/html/4/element/b.html">B>DIV et SPAN utilsés ensemble : </<aB><<>BR><<>BR>
=FONT face=webdings size=7>
<<DIV class="taillefont">KE<>SPAN class="motif3">JT</>SPAN>ER</<DIV></<aFONT>DIV><<ahref="http://december.com/html/4/element/img.html">IMG src="../images/barre2.gif"></<DIV>
</<DIV>

<<ahref="http://december.com/html/4/element/hr.html">HR class="trait">

BODY>
</<ahref="http://december.com/html/4/element/html.html">HTML>

Exercice HTML: Son et Image

Ecrire le code qui permet de créer la page suivante:

Ajouter une fonction pour insérer un son au démarrage de la page.

html
head

Insertion image
/titre>

/head

body

A target="_blank" HREF="new3.html"

IMG SRC="81kodzb7.gif"

id="warning" 
            SRC="warning.mp3" 
            AUTOSTART="true" LOOP="false" 
           style="visibility:hidden;position:absolute"
/EMBED>

/img

/A
/body
/html

Exercice HTML: Menu Verticale en HTML et CSS

Ecrire le code qui permet de réaliser le Menu Suivant:

Télécharger cette imege pour vous aider à faire le fond du menu:

head
	link rel='stylesheet' type='text/css' href='menu_style.css'
/head
>div class="outer"
>div id="menu"
		>ul
			li>a href="#1" title="Home"Home/>a/>li
			li>a href="#2" title="About"About/>a/>li
			li>a href="#3" title="Services"Services/>a/>li
			li>a href="#4" title="Portfolio"Portfolio/>a/>li
			li>a href="#5" title="Store"Store/>a/>li
			li>a href="menu1.zip" title="Download"Download Menu/>a/>li	
		/>ul
	/>div
/>div

------------------------------------------------------------------------------------------------------

menu_style.css

/*        V2        */
.outer{
	list-style:none;
	margin:0px;
	padding:0px;
}


#menu {
	width: 200px;
	border-style: solid solid none solid;
	border-color: #94AA74;
	border-width: 1px;

	}
#menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
	}

#menu li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	font-weight:normal;
	}	

#menu li a:link, #menu li a:visited {
	color: #FFFFFF;
	display: block;
	background: url(images/v6.gif);
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}

#menu li a:hover {
	color: #666666;
	background: url(images/v6.gif) 0 -32px;
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}

#menu li a:active {
	color: #666666;
	background: url(images/v6.gif) 0 -64px;
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}

Exercice HTML: Entré de Style sur un Texte

Ecrire le code Html et CSS qui permet de réaliser le texte suivant:


<HTML>

  <HEAD>

  <TITLE>demo style global </TITLE>

 <STYLE TYPE="text/css">

         P {

           border-style: dashed;

           width: 400px

           /* border-top: solid red;

           border-right:  solid red;

           border-bottom: solid red;

           border-left: solid red*/

           }

</STYLE>

  </HEAD>

  <BODY>

    <P>

   On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche [ndt. margin-left], "ED" mis pour espacement droit [ndt. padding-right], "BH" mis pour bordure haute [ndt. border-top], etc.). 



On appelle le périmètre de chacune des quatre aires (contenu, espacement, bordure et marge) un "bord", chaque boîte a donc quatre bords : 



Le bord du contenu ou bord interne 

Celui-ci entoure le rendu du contenu de l'élément. 

Le bord de l'espacement 

Celui-ci entoure la boîte de l'espacement. Si la valeur de l'espacement est 0, son bord est confondu avec celui du contenu. Le bord d'espacement d'une boîte définit le bord du bloc conteneur établi par la boîte ; 

Le bord de la bordure 

Celui-ci entoure la boîte de la bordure. Si la valeur de la bordure est 0, son bord est confondu avec celui de l'espacement. 

Le bord de la marge ou bord externe 

Celui-ci entoure la boîte de la marge. Si la valeur de la marge est 0, son bord est confondu avec celui de la bordure. 

On peut se référer à chacun de ces bords selon qu'il se trouve du côté gauche, droite, haut ou bas. 



Les dimensions de l'aire du contenu d'une boîte, celles-ci étant la largeur du contenu et la hauteur du contenu, dépendent de plusieurs facteurs : l'élément générant la boîte a-t-il une propriété 'width' ou bien 'height', la boîte contient-elle du texte ou d'autres boîtes, la boîte est-elle une table, etc. Les largeurs et hauteurs des boîtes sont traitées dans le chapitre concernant les détails du modèle de mise en forme visuel. 



On obtient la largeur de la boîte en additionnant les marges, bordures et espacements gauches et droites avec le largeur du contenu. De même pour la hauteur de la boîte, en additionnant les marges, bordures et espacement hauts et bas avec la hauteur du contenu. 



Le style qui est appliqué à l'arrière-plan du contenu et aux aires de l'espacement et de la marge, est spécifié au travers de la propriété 'background' de l'élément qui génère la boîte. L'arrière-plan des marges est toujours transparent. 

</P>

  </BODY>

</HTML>

Exercice HTML: Les propriétés sur les textes

´EcrivezlecodeXHTMLpermettantder´ealiserlapagerepr´esent´eesurla?gureci-dessous.:


<html>
<head>
<title>document utilisant CSS2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="document-css2.css">
</head>

<body>
<h1 class="rouge"> titre de niveau 1</h1>
<h2 class="grasRouge">titre de niveau 2</h2>
<h3 class="premiere">titre de niveau 3</h3>
<p class="grasRouge"> le seul paragraphe du document</p>
<p class="premiere" id="vert"> le seul paragraphe du document</p>
<table align="center" border=6 cellpadding=6 cellspacing="auto">
<caption align="center"  class="premiere">les propriétés sur les textes</caption>
<th align="center">mode CSS</th><th align="center">réglage</th>
<tr><td>font-size</th><td>taille des caractères</td></tr>
<tr><td>font-style</th><td>normal ou italique</td></tr>
<tr><td>font-family</th><td>empattement, proportionnalité</td></tr>
<tr><td>font-weight</th><td>graisse des caractères</td></tr>
<tr><td>font-height</th><td>interligne</td></tr>
<tr><td>text-align</th><td>alignement, justification</td></tr>
<tr><td>text-indent</th><td>décalage première ligne</td></tr>
<tr><td>text-transform</th><td>capitalisation, casse</td></tr>
</table> <BR>
<table  align="center" border=6 cellpadding=6 cellspacing="auto">
<caption align="center"  class="premiere">la manipulation des blocs</caption>
<th align="center">mode CSS</th><th align="center">réglage</th>
<tr><td>margin-right</th><td>marge à droite</td></tr>
<tr><td>margin-left</th><td>marge à gauche</td></tr>
<tr><td>margin-top</th><td>marge en haut</td></tr>
<tr><td>margin-bottom</th><td>marge en bas</td></tr>
<tr><td>padding-right</th><td>blanc à droite</td></tr>
<tr><td>padding-left</th><td>blanc à gauche</td></tr>
<tr><td>padding-top</th><td>blanc en haut</td></tr>
<tr><td>padding-bottom</th><td>blanc en bas</td></tr>
</table>
</body>
</html>

Exercice HTML: Facture de commande des Livres

Ecrire un code HTML qui permet de réaliser un Tableau pour iditer la Facture de commande des lives en utilisant les feuilles de Styles

Interface Graphique:



"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Groupement de colonnes</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="images/x-icon" href="../images/favicon.ico" />
<style type="text/css" title="">
.gras{font-weight:bold; background-color: red;}
.prix{background-color: yellow;}
.date{background-color:#AAA;color:blue;}
</style>
</head>
<body>
<table border="5" width="100%" rules="groups" summary="Facture de livres"
? cellpadding="5">
<caption><big>Facture de votre commande de livres</big></caption>

<colgroup id="date" width="10%" span="1" align="center" class="date">
</colgroup>

<colgroup id="titre" span="2" width="25%" align="left" class="gras">
</colgroup>

<colgroup id="prix" span="3" align="right" class="prix">
<col width="10%" />
<col span="2" width="15%" />
</colgroup>

<thead><tr><th>Date </th><th>Titre </th> <th>Auteur</th> <th>Quantité </th>
? <th>Prix Unitaire </th> <th>Prix Total </th> </tr> </thead>
<tfoot><tr><th>Date </th> <th>Désignation </th> <th>Auteur</th> <th>Quantité
? </th> <th>Prix Unitaire </th> <th>Prix Total </th> </tr></tfoot>

<tbody>
<tr>

<td>29/05/2005</td><td>XHTML Design</td><td>Jeffrey Zeldman</td><td>3</td>
? <td>32.00 €</td><td>96.00 €</td>
</tr>
<tr>
<td>15/06/2005</td><td>CSS 2 </td><td>Raphael Goetter</td><td>2</td>
? <td>30.00 €</td><td>60.00 €</td>
</tr>
<tr>
<td>10/09/2005</td><td>XHTML et CSS </td><td>Jean Engels</td><td>5</td>
? <td>29.90 €</td><td>149.50 €</td>
</tr>
</tbody>
</table>
</body>
</html>

Exercice HTML: Fiche de renseignements

Ecrire le code HTML correspondant pour créer le Formulaire suivant:

CENTERTABLE border=3
TRTD
H2uCENTERFiche de renseignements/CENTER/u/H2
FORM  NAME="Fiche_inscription"
Nom : INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : INPUT TYPE ="text" NAME="Prenom" VALUE="" >
Mot de passe : INPUT TYPE="password" NAME="Pass" SIZE=5P
Vous êtes en terminale S à dominante : 
INPUT TYPE="radio" NAME="option" VALUE="math" checked>Mathématiques
INPUT TYPE="radio" NAME="option" VALUE="pc"Physique-chimie
INPUT TYPE="radio" NAME="option" VALUE="svt"SVT
P
Quelle est votre discipline préférée ?BR
CENTERSELECT NAME="disciplines"  MULTIPLE SIZE=3
  OPTIONPhysique
  OPTION SELECTED>Informatique
  OPTIONPhilosophie
  OPTIONMathématiques
  OPTIONLangues
  OPTIONSVT
  OPTIONHistoire 
  OPTIONEPS
/SELECT/CENTER
P
Vous vous êtes inscrit(e)s en : BR
CENTERTABLE border=2TRTD
INPUT TYPE="checkbox" CHECKED NAME="DEUG" >DEUGBR
INPUT TYPE="checkbox" NAME="CPGE"CPGEBR
INPUT TYPE="checkbox" NAME="BTS"BTSBR
INPUT TYPE="checkbox" NAME="IUT"IUTBR
INPUT TYPE="checkbox" NAME="AUTRE"AUTRE
/TD/TR
/TABLE/CENTER
P
Ecrivez ci-dessous le sujet de votre projet informatique :BR
CENTERTEXTAREA NAME="Projet" ROWS=8 COLS=55
Voici mon projet d'option informatique
/TEXTAREA/CENTER
P
INPUT TYPE="RESET" VALUE="Effacer Pour recommencer"
INPUT TYPE="SUBMIT" VALUE="Valider" >P
/FORM >
/TD/TR
/TABLE/CENTER

Exercice HTML: Fonctions

Ecrire le code HTML qui prmet de réaliser le formulaire suivant:

html
head

script language ="javascript"
function controle()
{
var a =eval(document.form.input.value);
var b =eval(document.form.input1.value);

document.form.input3.value=a+b
}
function production()
{
var a =eval(document.form.input.value);
var b =eval(document.form.input1.value);
document.form.input3.value=a*b
}
function soustraction()
{
var a =eval(document.form.input.value);
var b =eval(document.form.input1.value);
document.form.input3.value=a-b
}
--------------------------------------
function choixprop(form){
if(form.choix[0].checked)
{ controle()};
if(form.choix[1].checked)
{ production()};
if(form.choix[2].checked)
{ soustraction()};}
/script
/head
body bgcolor=#abcdef>
form name="form"
Enter le numero 1 input type ="text" name="input" >br
Enter le numero 2 input type ="text" name="input1" >br
Enter le numero 3 input type ="text" name="input2" >br
LA somme est  input type ="text" name="input3" >br
br
br
input type ="button" name="bouton" value="contrôler" onclick="soustraction(form)"
br---------------------------br
br
br

input type="radio" name= "choix" value="1" > choix 1br
input type="radio" name= "choix" value="2" > choix 2br
input type="radio" name= "choix" value="3" > choix 3br
input type="button" name= "bouton" value="verfiez votre choix" onClick="choixprop(form)"br

/form

/body
/html

Exercice HTML: Menu Dynamique

Travail à Faire:

Ecrire le code HTML et CSS qui permet de réaliser le Menu suivant:

Télécharger les images suivantes Afin de pouvoir réaliser le Menu demandé:

/* CSS Document */
*{
	margin:0;
	padding:0;
}
#menu{
	width:90%;
	margin:25px auto;
}
#menu ul{
	list-style:none;
}
#menu li{
	display:block;
	float:left;
}
#menu li a{
	background:#749b10 url(images/menu_bg.gif) repeat-x;
	border:2px solid #80a225;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	height: 50px;
}
#menu li a span{
	color:#52651f;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}
#menu li a:hover{
	background:#e46825 url(images/menu_hover.gif) repeat-x;
	border:2px solid #c04118;
	text-decoration:none;
}
#menu li a:hover span{
	color:#ffd9c7;
}
.current{
	background:#e46825 url(images/menu_hover.gif) repeat-x;
	border:2px solid #c04118;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	cursor:pointer;
	font-weight:bold;
	height: 50px;
}
.current span{
	color:#ffd9c7;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Green Menu</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
	<ul>
		<li class="current">Home<br /><span>takes you to<br /> home page</span></li>
		<li><a href="#">About Us<br /><span>takes you to<br />about us page</span></a></li>		
		<li><a href="#">Products<br /><span>takes you to<br />products page</span></a></li>
		<li><a href="#">Partners<br /><span>takes you to<br />partners page</span></a></li>		
		<li><a href="#">Contact Us<br /><span>takes you to<br />contact page</span></a></li>
	</ul>
</div>
</body>
</html>

Exercice HTML: SECTION3

Ecrireble code qui permet de réaliser la page suivante:



<HTML>

	<HEAD>

		<TITLE>Titre du document</TITLE>

	</HEAD>

	<BODY>

<HR><HR><HR><HR><HR>

<HR><HR><HR><HR><HR>

	 <P>Les hyperliens vers une section du même document (liens internes) 

                  On doit d'abord poser une ancre, soit une étiquette qui permette de marquer 

                 le début d'une section du document afin de l'utiliser pour un lien

                 L'ancre doit se faire avec l'étiquette A et l'attribut name selon la syntaxe suivante :



	<P>Consultez la <A href="#sect3">section 3</A> de ce document.</P>

	Les éléments de niveau texte permettent de qualifier le texte à l’intérieur d’un élément de niveau bloc (par exemple un paragraphe), d’une liste ou d’un tableau

                  N’impliquent pas de saut de ligne



<HR><HR><HR><HR><HR>

<HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR>



                 <A name="sect3">SECTION3: On peut ensuite y référer n'importe où dans le document, 

                  en inscrivant comme adresse URL le nom de l'ancre précédé de « # »</A>



	</BODY>

</HTML>

Exercice HTML: Site Web

Ecrire le code qui permet de réaliser la page suivant:



<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New Page</title>
    <meta name="description" content="Description" />
    <meta name="keywords" content="Keywords" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="art-page-background-glare">
    <div id="art-page-background-glare-image"> </div>
</div>
<div id="art-main">
    <div class="art-sheet">
        <div class="art-sheet-tl"></div>
        <div class="art-sheet-tr"></div>
        <div class="art-sheet-bl"></div>
        <div class="art-sheet-br"></div>
        <div class="art-sheet-tc"></div>
        <div class="art-sheet-bc"></div>
        <div class="art-sheet-cl"></div>
        <div class="art-sheet-cr"></div>
        <div class="art-sheet-cc"></div>
        <div class="art-sheet-body">
            <div class="art-header">
                <div class="art-header-clip">
                <div class="art-header-center">
                    <div class="art-header-png"></div>
                    <div class="art-header-jpeg"></div>
                </div>
                </div>
                <div class="art-logo">
                                 <h1 class="art-logo-name"><a href="./index.html">Enter Site Title</a></h1>
                                                 <h2 class="art-logo-text">Enter Site Slogan</h2>
                                </div>
            </div>
            <div class="cleared reset-box"></div>
<div class="art-nav">
	<div class="art-nav-l"></div>
	<div class="art-nav-r"></div>
<div class="art-nav-outer">
	<ul class="art-hmenu">
		<li>
			<a href="./new-page.html" class="active"><span class="l"></span><span class="r"></span><span class="t">New Page</span></a>
		</li>	
		<li>
			<a href="./new-page-2.html"><span class="l"></span><span class="r"></span><span class="t">New Page 2</span></a>
		</li>	
	</ul>
</div>
</div>
<div class="cleared reset-box"></div>
<div class="art-content-layout">
                <div class="art-content-layout-row">
                    <div class="art-layout-cell art-sidebar1">
<div class="art-vmenublock">
    <div class="art-vmenublock-body">
                <div class="art-vmenublockheader">
                    <h3 class="t">Vertical Menu</h3>
                </div>
                <div class="art-vmenublockcontent">
                    <div class="art-vmenublockcontent-body">
                <ul class="art-vmenu">
	<li>
		<a href="./new-page.html" class="active"><span class="l"></span><span class="r"></span><span class="t">New Page</span></a>
	</li>	
	<li>
		<a href="./new-page-2.html"><span class="l"></span><span class="r"></span><span class="t">New Page 2</span></a>
	</li>	
</ul>

                                		<div class="cleared"></div>
                    </div>
                </div>
		<div class="cleared"></div>
    </div>
</div>
<div class="art-block">
    <div class="art-block-body">
                <div class="art-blockheader">
                    <h3 class="t">New Block</h3>
                </div>
                <div class="art-blockcontent">
                    <div class="art-blockcontent-body">
                <p>Enter Block content here...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. </p>                
                                		<div class="cleared"></div>
                    </div>
                </div>
		<div class="cleared"></div>
    </div>
</div>

                      <div class="cleared"></div>
                    </div>
                    <div class="art-layout-cell art-content">
<div class="art-post">
    <div class="art-post-body">
<div class="art-post-inner art-article">
                                <h2 class="art-postheader">
                New Page
                                </h2>
                <div class="cleared"></div>
                                <div class="art-postcontent">
<p>Enter Page content here...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Cras elit nisl, rhoncus nec iaculis ultricies, feugiat eget sapien. Pellentesque ac felis tellus.</p>
<p>Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id. Duis placerat justo eu nunc interdum ultrices. Phasellus elit dolor, porttitor id consectetur sit amet, posuere id magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Suspendisse pharetra auctor pharetra. Nunc a sollicitudin est. Curabitur ullamcorper gravida felis, sit amet scelerisque lorem iaculis sed. Donec vel neque in neque porta venenatis sed sit amet lectus. Fusce ornare elit nisl, feugiat bibendum lorem. Vivamus pretium dictum sem vel laoreet. In fringilla pharetra purus, semper vulputate ligula cursus in. Donec at nunc nec dui laoreet porta eu eu ipsum. Sed eget lacus sit amet risus elementum dictum.</p>
                </div>
                <div class="cleared"></div>
                </div>

		<div class="cleared"></div>
    </div>
</div>
                      <div class="cleared"></div>
                    </div>
                </div>
            </div>
            <div class="cleared"></div>
            <div class="art-footer">
                <div class="art-footer-t"></div>
                <div class="art-footer-l"></div>
                <div class="art-footer-b"></div>
                <div class="art-footer-r"></div>
                <div class="art-footer-body">
                    <a href="#" class="art-rss-tag-icon" title="RSS"></a>
                            <div class="art-footer-text">
                                <p><a href="#">Link1</a> | <a href="#">Link2</a> | <a href="#">Link3</a></p><p>Copyright © 2011. All Rights Reserved.</p>
                                                            </div>
                    <div class="cleared"></div>
                </div>
            </div>
    		<div class="cleared"></div>
        </div>
    </div>
    <div class="cleared"></div>
    <p class="art-page-footer"><a href="">Website Template created with Artisteer.</a> </p>
</div>
</body>
</html>

Exercice HTML: Menu avec CSS

Créer un ?chier CSS permettant d’obtenir le menu donné par la ?gure:

à partir du code HTML suivant:

ul class="menu">
 li><a href="accueil.html">Accueil</a></li>
 li class="active"><a href="infos.html">Infos</a></li>
 li><a href="contact.html">Contact</a></li>
 li><a href="login.html">Se connecter</a></li>
</ul>

Pour cela, on pourra utiliser les propriétés :
–-moz-border-radius-topleft:10px;
–-moz-border-radius-topright: 10px;
pour obtenir les arrondis sur les coins des bordures.
Remarque : La propriétéborder-radius n’est pas encore supportée par tous les navigateurs.
Par conséquent, pour un site Web devant être compatible avec tous les navigateurs, ilfaudrait utiliser des images de fond pour obtenir le même résultat, ce qui complexi?e le travail.
Deplus, certains validateurs peuvent considérer l’utilisation de cette propriété comme une erreur.

.menu li
 {
 display: inline;
 list-style:none;
 border: 1px solid black;
 padding: 4px;
 background-color: #bbb;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
 }

 .menu a
 {
 text-decoration: none;
 color: black;
 }

 .menu li.active
 {
 background-color: white;
 border-bottom: 0px;
 }

 .menu li:hover
 {
 background-color: #ecc;
 }

Exercice HTML: Arbre Menu

Ecrire le code qui permet de réaliser la Figure suivante:

il s'agit de réaliser un petit menu Dynamique

<html>
<head>
<title>Exemple</title>
<script type="text/javascript">
  function treeMenu_init(menu, data) {
    var array = new Array(0);
    if(data != null && data != "") {
      array = data.match(/\d+/g);
    }
    var items = menu.getElementsByTagName("li");
    for(var i = 0; i < items.length; i++) {
      items[i].onclick = treeMenu_handleClick;
      if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")
          && items[i].getElementsByTagName("ul").length
            + items[i].getElementsByTagName("ol").length > 0) {
        var classes = treeMenu_getClasses(items[i]);
        if(array.length > 0 && array[0] == i) {
          classes.push("treeMenu_opened")
        }
        else {
          classes.push("treeMenu_closed")
        }
        items[i].className = classes.join(" ");
        if(array.length > 0 && array[0] == i) {
          array.shift();
        }
      }
    }
  }
  function treeMenu_handleClick(event) {
    if(event == null) { //solution de rechange pour les propriétés DOM faisant défaut dans l'IE
      event = window.event;
      event.currentTarget = event.srcElement;
      while(event.currentTarget.nodeName.toLowerCase() != "li") {
        event.currentTarget = event.currentTarget.parentNode;
      }
      event.cancelBubble = true;
    }
    else {
      event.stopPropagation();
    }
    var array = treeMenu_getClasses(event.currentTarget);
    for(var i = 0; i < array.length; i++) {
      if(array[i] == "treeMenu_closed") {
        array[i] = "treeMenu_opened";
      }
      else if(array[i] == "treeMenu_opened") {
        array[i] = "treeMenu_closed"
      }
    }
    event.currentTarget.className = array.join(" ");
  }

  /*
   * Renvoie toutes les classes affectées à un élément HTML
   *
   * element: l'élément HTML
   * return: les classes affectées
   */
  function treeMenu_getClasses(element) {
    if(element.className) {
      return element.className.match(/[^ \t\n\r]+/g);
    }
    else {
      return new Array(0);
    }
  }
 
  /*
   * Vérifie si un tableau contient un élément déterminé.
   * array: le tableau
   * element: l'élément
   * return: true, si le tableau contient l'élément.
   */
  function treeMenu_contains(array, element) {
    for(var i = 0; i < array.length; i++) {
      if(array[i] == element) {
        return true;
      }
    }
    return false;
  }
 
  /*
   * Renvoie une chaîne de caractères dans laquelle figurent tous les
   * points du menu ouverts.
   *
   * menu: référence à la liste
   * return: la chaîne de caractères
   */
  function treeMenu_store(menu) {
    var result = new Array();;
    var items = menu.getElementsByTagName("li");
    for(var i = 0; i < items.length; i++) {
      if(treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")) {
        result.push(i);
      }
    }
    return result.join(" ");
  }

<style type="text/css">
  li.treeMenu_opened ul {
    display: block;
  }
  li.treeMenu_closed ul {
    display: none;
  }
</style>
<body onload="treeMenu_init(document.getElementById('menu'), '')">
<ul id="menu">
  <li>Premièrement
    <ul>
      <li>A</li>
      <li>B</li>
    </ul>
  </li>
  <li>Deuxièmement
    <ul>
      <li>a</li>
      <li>b</li>
    </ul>
  </li>
</ul>
</body>
</html>

Exercice HTML: La Balise Marquee

Créer le code qui permet de réaliser le diaporama suivant:

<html>
<head>
<title>
Diaporama
</title>
</head>
<body>
="alternate">
<img src="image2.jpg"></img>
<img src="image3.jpg"></img>
<img src="image4.jpg"></img>
<img src="image5.jpg"></img>
<img src="image6.jpg"></img>
<img src="image2.jpg"></img>
</marquee>
</body>
</html>

Exercice HTML: Ecriture des Balises

Styles d'ecritures Ecrire le Code HTML qui permet de réaliser les Textes suivants:

la balise pour le gras
la balise pour Italic
la balise pour le Souligné

Autres balises de formatages et de mise en page
la balise affiche le texte de facon trés accentué. la plupart des navigateurs mettent le texte en gras la balise ou la balise affiche le texte en barré

la balise affiche le texte en indice: exemple soient a₁, a₂,a₃ trois entiers.

la balise affiche le texte en exposant: exemple soient les 1^ers jours du XXI^émesiécle.

la balise centre tous les elements contenus dans la balise

la balise

applique un alignement spécial à une partie du document avec les attributs: LEFT, RIGHT, CENTER,JUSTIFY

la balise Permet de choisir une police, une taille et une couleur à appliquer à une partie de texte la balise la balise identifie une citation qui saffichera en décalage par rapport au reste du document

html  

head

titleStyles d'ecritures title

head 

body  

    BASEFONT SIZE=4 COLOR="blue" FACE="times new roman"

  B la balise <B> pour le gras B BR

    I la balise <I> pour Italic I BR

    U la balise <U> pour le Souligné/U BR 

    P Autres balises de formatages et de mise en page BR

        STRONG la balise <STRONG >affiche le texte de facon trés accentué. la plupart des navigateurs mettent le texte en gras STRONG

        S la balise <S>ou la balise <STRIKE> affiche le texte en barré /S

        p la balise <SUB>affiche le texte en indice: exemple  

             soient aSUB1/SUB, aSUB2/SUB,aSUB3/SUB trois entiers.

        /p

        p la balise <SUP>affiche le texte en exposant: exemple  

             soient les 1SUPers/SUP jours du XXISUPéme/SUPsiécle.

        /p

        CENTER la balise <CENTER>centre tous les elements contenus dans la balise /CENTER

        DIV la balise <DIV>applique un alignement spécial à une partie du document avec les attributs: LEFT, RIGHT, CENTER,JUSTIFY /DIV 

        FONT SIZE= -1 COLOR="red" FACE="Arial"

          la balise <FONT>Permet de choisir une police, une taille et une couleur à appliquer à une partie de texte

        /FONT 

        /BLOCKQUOTE     

           la balise la balise <BLOCKQUOTE> identifie une citation qui saffichera en décalage par rapport au reste du document 

        /BLOCKQUOTE     



  /body

/html

Exercice HTML: La Balise FRAME

Ecrire le code HTML qui permet de réaliser la page suivante:


<HTML>

<HEAD>

<TITLE> utilisation des frames</TITLE>

</HEAD>

<FRAMESET ROWS="90, *">

<FRAME src="exemple1.html" NAME="exemple" MARGINWIDTH=5                   MARGINHEIGHT=5>

 <FRAMESET COLS="50%, 50%">

                    <FRAME SRC="atelier-5.html" NORESIZE

                                     NAME="structure"  MARGINWIDTH=5 MARGINHEIGHT=5>

                    <FRAME SRC="atelier8.html"

                                     NAME="division"  MARGINWIDTH=5 MARGINHEIGHT=5>

</FRAMESET>

<NOFRAMES>

 ce document contient des frames et votre navigateur est incapable de les gérer

<NOFRAMES>

</FRAMESET>

</HTML>
-----------------------------------------------------------------------------------------------------

Atelier-5.html:

<HTML>

  <HEAD>

     <TITLE>mon home page</TITLE>

   </HEAD>

<BODY>

   <H1>PRENOM NOM </H1>

    Fonction: <BR>  

   Organisme: <BR> 

  détails personnels :<BR> 

  Activités de formation:<BR> 

  autres activités: <BR> 

 </BODY>

</HTML>
-----------------------------------------------------------------------------
exemple1.html:
<html>
  <head>
     <title> introduction au langage HTML </title>
  <head>
<body >
   mon premier document html ! 
   effectivement vous avez raison, c'est très simple !!!!! 

</body>
------------------------------------------------------------------------------
atelier8.html:

<HTML>
 <HEAD>
     <TITLE> Les tabeaux </TITLE>
 </HEAD>
 <BODY>
<table >
  <tr valign=center align=CENTER>
    <th>article</th>
    <th>référence</th>
    <th>prix</th>
</tr>
<tr valign=center align=CENTER>
    <td>livre</td>
   <td>A120</td>
  <td>98</td>
 </tr>  
<tr valign=center align=CENTER>
    <td>cahier</td>
   <td>A125</td>
  <td>5.0</td>
 </tr>  
</table>
<table border=6 cellspacing=2 >
  <tr valign=center align=CENTER>
    <td colspan=4>cellule unique</td>
  </tr>
  <tr valign=center align=left>
    <td rowspan=2 bgcolor="green">100</td>
   <td>200</td>
   <td>500</td>
  <td>1000</td>
  </tr>
  <tr valign=MIDDLE align=CENTER>
   <td>cellule</td>
   <td>gauche</td>
  <td>droite</td>
  </tr>

</table>
<table border=5 cellspacing=2 cellpadding=10>

    <caption align="TOP">

      <b>Tableaux &agrave éléments multiples</b>

    </caption>

   <tr align="center">

        <td><a href="http://www.ensias.ma">ENSIAS</a></td>

        <td><img src="p-suivante.gif"></td>

        <td></td>

    </tr>

    <tr>

       <td><img src="telecharger.GIF"></td>

        <td>

           <ul>

           <li>un

          <li>Deux

          <li>trois

          </ul>

       </td>

       <td align="center">

         <a href="www.w3.org">
 <img     src="porte.gif"></a>

        </td>

     </tr>

    <tr>

      <td align="center"><i>Entrez<br>votre nom</td>

      <td align="left">

            <form method="post" action="aucune">

             <input name="nom">

               <td align="center">

              <input type="submit" value="clic!">

            </form>

       </td>

    </tr>

</table>

 </BODY>

Exercice HTML: La Balise OL

Ecrire le code HTML qui permet de réaliser ce qui suit:

Exemple de liste de type ordonnée ()

Fichiers HTML
Fichiers images
Fichiers sons
Fichiers films
Fichiers test
Fichiers exemples


html


head

titleListes <ul>/title

/head


body


    h2 Exemple de liste de type ordonnée (<ol>)/h2


    <ol type=a>


        <li Fichiers HTML


         <li Fichiers images


         <li value=4 Fichiers sons


        <li Fichiers films
         <li Fichiers test


        <li  Fichiers exemples

     /<ol


 /body
/html

Exercice HTML: Exemple de liste de type ordonnée

Réaliser le paragraphe qui suit avec le Code HTML:

Exemple de liste de type ordonnée (

)

Fichiers HTML
Fichiers images
- type
- exemples
Fichiers sons
Fichiers films
Fichiers test
Fichiers exemples


html


head

titleListes <ul>/title

/head


body


    h2 Exemple de liste de type ordonnée (<ol>)/h2


    ol >


        li Fichiers HTML


         li Fichiers images


             ul type=square>

                 litype /li

                 liexemples/li	

             /ul   	  

         li > Fichiers sons


        li Fichiers films
         li Fichiers test


        li Fichiers exemples

     /ol


 /body
/html

Exercice HTML: Exemple de liste de type non ordonnée imbriquée

Réaliser le praragraphe qui suit en utilisant le Code HTML:

Exemple de liste de type non ordonnée imbriquée (

)

Fichiers HTML
- Exemples
  - listes
  - tableaux
  - Styles
    - citation
    - texte en emphase
- En cours
- Périmés
Fichiers images
....


<html>


<head>

<title>Listes <ul></title>

</head>


<body>


  <h2> Exemple de liste de type non ordonnée imbriquée (<ul>)</h2>


    <ul>
          <li> Fichiers HTML


          <ul> 


              <li>Exemples


             <ul>
                                   <li>listes


                 <li>tableaux


                 <li>Styles


                      <ul>
                                                <li>citation


                        <li>texte en emphase


                      </ul>


             </ul>
                          <li>En cours


              <li>Périmés


              </ul>


          <li> Fichiers images


          <li> ....


  </ul>


</body>


</html>

Exercice HTML: Paragraphe avec Style

Ecrire le code qui permet de réaliser le paragraphe suivant:

Titre du document

Le premier paragraphe

Formats de documents structurés

SGML
HTML
XML

Le second paragraphe

Formats de documents structurés

SGML: Standard Generalized Markup Language
XML: Extensible Markup Language



<HTML>
	<HEAD>

		<TITLE>Titre du document</TITLE>

	</HEAD>

	<BODY>

	 	<H1>Titre du document</H1>

		<P>Le premier paragraphe</P>

		       <H2>Formats de documents structurés</H2>

	                           <OL>

		             <LI>SGML</LI>

		              <LI>HTML</LI>

		              <LI>XML</LI>

                                            </OL>
		<P>Le second paragraphe</P>

                                         <H2>Formats de documents structurés</H2>

                                            <DL>

	                              <DT>SGML</DT>

                                                   <DD>Standard Generalized Markup Language</DD>

                                               <DT>XML</DT>

                                                    <DD>Extensible Markup Language</DD>

                                                    <DT>
                                               </DL>
    	</BODY>
</HTML>

Exercices HTML : Texte - Images - Son

Exercice HTML: Texte avec Image

Ecrire le code qui permet de réaliser la page suivante:

Solution :



<HTML>

	<HEAD>

		<TITLE>Titre du document</TITLE>

	</HEAD>

	<BODY>

	 	<H1>Titre du document</H1>

		<P>Le premier paragraphe</P>



		<P>Le second paragraphe</P>

   		<IMG src="photo_printemps.jpg" alt="Photo de la saison">



	</BODY>

</HTML>

Exercice HTML: Débuter avec HTML

Travail à Faire:

1. Crée un nouveau document dont le titre sera Exercice 1.

3. Écris la phrase suivante avec la police de caractères Comic Sans MS:

Je débute mon apprentissage du langage HTML.

4. Reviens avec la police de base.

5. Fais un changement de ligne.

6. Écris la phrase suivante en augmentant la police de base de 2. (La taille par défaut est 3):

J'écris maintenant avec la police de base, de taille 5.

Solution :

1. Clique sur Fichier de bloc-notes, Nouveau et dans la case Titre, écris Exercice1.txt et insère les codes des réponses qui suivent. 

2. Voici les codes à insérer :

 BODY  BGCOLOR="#008080" TEXT="#000000" LINK="#000080" VLINK="#C0C0C0" ALINK="#FF0000"> 

3. Voici les codes à insérer :

 FONT  FACE="Comic Sans MS">Je débute mon apprentissage du langage HTML./ FONT > 

4. Place le curseur après le code / FONT >. 

5. Voici la balise à insérer :

 BR > 

6. Voici les codes qui doivent être insérer:

 FONT  SIZE=5>J'écris maintenant avec la police de base, de taille 5./ FONT >

Exercice HTML: La Balise Marquee

Créer le code qui permet de réaliser le diaporama suivant:

Solution :

<html>
<head>
<title>
Diaporama
</title>
</head>
<body>
="alternate">
<img src="image2.jpg"></img>
<img src="image3.jpg"></img>
<img src="image4.jpg"></img>
<img src="image5.jpg"></img>
<img src="image6.jpg"></img>
<img src="image2.jpg"></img>
</marquee>
</body>
</html>

Exercice HTML: Insertion Image

1. Insère une image de format .gif à droite de ton document de travail et laisse 8 espaces entre l'image et le texte.

Écris ce qui suit:

Je suis fier ou fière de moi. J'illustre mon état d'âme par une image significative. Elle est alignée à droite.

2. Termine ton texte par un code spécial qui forcera le prochain texte à s'écrire après l'image.

3. Trace une ligne horizontale sur toute la largeur de la page.

4. Fais un changement de paragraphe et trace une ligne horizontale sur toute la largeur de la page.

5. Si tu as une adresse Internet, écris ton nom et place ton adresse en hyperlien.

6. Convertis les caractères accentués. N'oublie jamais d'exécuter cette procédure avant de placer un texte dans Internet afin que tous les usagers puissent lire la page.

7. Sauvegarde ton fichier sous le même nom qu'à la partie 1.

Solution :

22. Voici les codes :
<IMG SRC="youppi.gif" BORDER=0 WIDTH=210 HEIGHT=180 HSPACE=8 align=right>
Je suis fier ou fière de ...

23. Voici le code : 
<BR clear=all>

24. <HR>

25.Voici les codes : 
<A HREF="http://www.vi.com/web/">
Exercicegratiot
</A>

26. <P><HR> 

27. Voici les codes : 
<A HREF="mailto:xx@col.qc.ca">Ton nom</A> 

28. utiliser la conversion, sur résumé du cours, des caractères spéciaux. 

29. Sauvegarder ton fichier.

Exercice HTML: Son et Image

Ecrire le code qui permet de créer la page suivante:

Ajouter une fonction pour insérer un son au démarrage de la page.

Solution :

html
head

Insertion image
/titre>

/head

body

A target="_blank" HREF="new3.html"

IMG SRC="81kodzb7.gif"

id="warning" 
            SRC="warning.mp3" 
            AUTOSTART="true" LOOP="false" 
           style="visibility:hidden;position:absolute"
/EMBED>

/img

/A
/body
/html

Exercice HTML: SECTION3

Ecrireble code qui permet de réaliser la page suivante:



<HTML>

	<HEAD>

		<TITLE>Titre du document</TITLE>

	</HEAD>

	<BODY>

<HR><HR><HR><HR><HR>

<HR><HR><HR><HR><HR>

	 <P>Les hyperliens vers une section du même document (liens internes) 

                  On doit d'abord poser une ancre, soit une étiquette qui permette de marquer 

                 le début d'une section du document afin de l'utiliser pour un lien

                 L'ancre doit se faire avec l'étiquette A et l'attribut name selon la syntaxe suivante :



	<P>Consultez la <A href="#sect3">section 3</A> de ce document.</P>

	Les éléments de niveau texte permettent de qualifier le texte à l’intérieur d’un élément de niveau bloc (par exemple un paragraphe), d’une liste ou d’un tableau

                  N’impliquent pas de saut de ligne



<HR><HR><HR><HR><HR>

<HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR><HR>



                 <A name="sect3">SECTION3: On peut ensuite y référer n'importe où dans le document, 

                  en inscrivant comme adresse URL le nom de l'ancre précédé de « # »</A>



	</BODY>

</HTML>

Exercice HTML: Les Frames

Ecrire le code qui permet de réaliser la page suivante:

<HTML>
<HEAD>
<TITLE> utilisation des frames</TITLE>
</HEAD>
<FRAMESET ROWS="*,*, *">
<FRAME src="document1.html" NAME="exemple" >
 <FRAMESET COLS="3*,*">
                    <FRAME SRC="document2.html" 
                                     NAME="structure" >
                    <FRAME SRC="document3.html"
                                     NAME="division"  >
</FRAMESET>
<FRAMESET COLS="*,*,2*">
                    <FRAME SRC="document6.html" 
                                     NAME="struct" >
                    <FRAME SRC="document7.html"
                                     NAME="divis"  >
	<FRAME SRC="document8.html"
                                     NAME="div"  >
</FRAMESET>

</HTML>

Exercice HTML: La Balise SPAN

Ecrire le code qui permet de réaliser le paragraphe suit:

Exemple de feuille de style globale

Voici un élément strong qui est inséré dans le texte.

Portion de texte (SPAN) dont la classe est "info"

un element P avec un attribut class

<HTML>

  <HEAD>

  <TITLE>demo style global </TITLE>

  <STYLE TYPE="text/css">

                BODY {background-image:URL(image.jpg)}

                P {text-align:justify}

                .info {background:maroon;color:white}

                STRONG {color:red}

    </STYLE>

 </HEAD>

  <BODY>

   <H1> Exemple de feuille de style globale </H1>

<P> 

Voici un <STRONG>élément strong</STRONG> qui est inséré dans le texte. 

<P>Voici un paragraphe dont le texte est justifié : pour visionner cette propriété, il faut bien sûr que le texte comporte plus de deux lignes, car dans le cas inverse, il semblera correspondre à un paragraphe ordinaire, sans justification... </P>



<SPAN CLASS="info">Portion de texte (SPAN) dont la classe est "info" </SPAN>

<P CLASS="info"> un element P avec un attribut class </P>

  </BODY>

</HTML>

Exercice HTML: Texte et Image avec Style

Ecrire le code qui permet de réaliser ce qui suit:


HTML

  HEAD

  TITLEdemo style global /TITLE

 STYLE TYPE="text/css"

         P {

           border-style: dotted

           border: solid;

	text-align: justify;

	text-indent: 1pixels;

	display: block;

	margin: 5px;

	width: 300;

	border: solid #0033FF;

                  width: 400px;

                 height: 145px

	}		   

 img.p {

	font-size: 16px;

	font-style: normal;

	line-height: 30px;

	font-weight: bold;

	margin: auto;

	text-align: right;

	display: block;

	float: right;

	padding: 0px;

	clear: right;

	position: absolute;

	top: 15px;

	right: 80px;

	height: 120px;

	width: 120px;

}

 /STYLE

  /HEAD

  BODY

  P

   On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche [ndt. margin-left], "ED" mis pour espacement droit [ndt. padding-right], "BH" mis pour bordure haute [ndt. border-top], etc.). 



On appelle le périmètre de chacune des quatre aires 

(contenu, espacement, bordure et marge) un "bord", chaque boîte a donc quatre bords : 

 BR

 img CLASS="p" src="image1.jpg"/ 

 img src="image1.jpg" 

  /BODY

/HTML

Exercice HTML: Les propriétés sur les textes

´EcrivezlecodeXHTMLpermettantder´ealiserlapagerepr´esent´eesurla?gureci-dessous.:


<html>
<head>
<title>document utilisant CSS2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="document-css2.css">
</head>

<body>
<h1 class="rouge"> titre de niveau 1</h1>
<h2 class="grasRouge">titre de niveau 2</h2>
<h3 class="premiere">titre de niveau 3</h3>
<p class="grasRouge"> le seul paragraphe du document</p>
<p class="premiere" id="vert"> le seul paragraphe du document</p>
<table align="center" border=6 cellpadding=6 cellspacing="auto">
<caption align="center"  class="premiere">les propriétés sur les textes</caption>
<th align="center">mode CSS</th><th align="center">réglage</th>
<tr><td>font-size</th><td>taille des caractères</td></tr>
<tr><td>font-style</th><td>normal ou italique</td></tr>
<tr><td>font-family</th><td>empattement, proportionnalité</td></tr>
<tr><td>font-weight</th><td>graisse des caractères</td></tr>
<tr><td>font-height</th><td>interligne</td></tr>
<tr><td>text-align</th><td>alignement, justification</td></tr>
<tr><td>text-indent</th><td>décalage première ligne</td></tr>
<tr><td>text-transform</th><td>capitalisation, casse</td></tr>
</table> <BR>
<table  align="center" border=6 cellpadding=6 cellspacing="auto">
<caption align="center"  class="premiere">la manipulation des blocs</caption>
<th align="center">mode CSS</th><th align="center">réglage</th>
<tr><td>margin-right</th><td>marge à droite</td></tr>
<tr><td>margin-left</th><td>marge à gauche</td></tr>
<tr><td>margin-top</th><td>marge en haut</td></tr>
<tr><td>margin-bottom</th><td>marge en bas</td></tr>
<tr><td>padding-right</th><td>blanc à droite</td></tr>
<tr><td>padding-left</th><td>blanc à gauche</td></tr>
<tr><td>padding-top</th><td>blanc en haut</td></tr>
<tr><td>padding-bottom</th><td>blanc en bas</td></tr>
</table>
</body>
</html>

Exercice HTML: Tableaux de Conjugaison

Ecrivez le code HTML permettant de réaliser la page représentée sur la ?gure ci-dessous.

Page 2






head
meta charset="utf-8" /
titlePage 2/title
style type="text/css"
th,td,table {
	border: solid;
}
/style
/head
body

	h1Exo 2/h1

	pCréez cette jolie table :/p
	table
		captionConjugaisons/caption
		tr
			th colspan="2"/th
			th colspan="2"Premier groupe/th
			th colspan="2"Deuxième groupe/th
		/tr
		tr
			th/th
			thPersonne/th
			thSingulier/th
			thPluriel/th
			thSingulier/th
			thPluriel/th
		/tr
		tr
			th rowspan="3"présent/th
			th1/th
			tdje mange/td
			tdnous mangeons/td
			tdje finis/td
			tdnous finissons/td
		/tr
		tr
			th2/th
			tdtu manges/td
			tdvous mangez/td
			tdtu finis/td
			tdvous finissez/td
		/tr
		tr
			th3/th
			tdil mange/td
			tdils mangent/td
			tdil finit/td
			tdils finissent/td
		/tr
		/table	
/body
/html

Exercice HTML: Site de Librairie

On veut réaliser un site de librairie en ligne pour obtenir la présentation suivante. Nous allons écrire le HTML, puis réaliser progressivement les CSS correspondantes.

Écrire le HTML nécessaire pour coder cette page (sans utiliser de tableau). On se limitera à deux livres.



<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8">
<title>Librairie en ligne</title>
</head>
<div class="entete">
   <h1>Site de Librairie</h1> 
   <p>Libraires en lignes depuis 1820</p>
</div>

<div class="menu">
  <div class="entree">Statistiques</div>
  <div class="entree selectionnee">Romans</div>
  <div class="entree">Science</div>
</div>

<div class="principal">

  <div class="corps">
    <div class="livre">
      <h1> Quatrevingt-treize</h1>
      <img src="book.png">
      <h2> Victor Hugo</h2>
      <p>Roman de Victor Hugo sur la Révolution Française. </p>
      <p class="commentaire">Nombre de commentaires: 240</p>
    </div>

    <div class="livre">
      <h1> Quatrevingt-treize</h1>
      <img src="book.png">
      <h2> Victor Hugo</h2>
      <p>Roman de Victor Hugo sur la Révolution Française. </p>
      <p class="commentaire">Nombre de commentaires: 240</p>
    </div>
    <div class="livre">
      <h1> Quatrevingt-treize</h1>
      <img src="book.png">
      <h2> Victor Hugo</h2>
      <p>Roman de Victor Hugo sur la Révolution Française. </p>
      <p class="commentaire">Nombre de commentaires: 240</p>
    </div>
    <div class="livre">
      <h1> Quatrevingt-treize</h1>
      <img src="book.png">
      <h2> Victor Hugo</h2>
      <p>Roman de Victor Hugo sur la Révolution Française. </p>
      <p class="commentaire">Nombre de commentaires: 240</p>
    </div>

    <div style="clear: both"></div>
  </div>

    <div class="nouvelles">
      <h1> Nouvelles</h1>
      <p>La librairie en ligne accueillera bientôt des auteurs en
	direct.</p>
      <p>d'autres nouvelles...</p>
      <p>d'autres nouvelles...</p>
      <p>d'autres nouvelles...</p>
      <p>d'autres nouvelles...</p>
      <p>d'autres nouvelles...</p>
      <p>d'autres nouvelles...</p>
      <p>d'autres nouvelles...</p>
      <p>d'autres nouvelles...</p>
      <p>d'autres nouvelles...</p>
    </div>
</div>
</html>

Exercice HTML: Site de recettes de cuisine

On veux réaliser un site de recettes de cuisine. Il se compose de plusieurs pages. Entre autre une page d'accueil (que l'on ne demande pas de réaliser), une page affichant les recettes simples et une page associée à chaque recette.

La charte du site impose que chaque page dispose d'un entête et d'un pied de page

L' entête et le pied de page sont centrés sur fond mauve.
Dans l'en-tête de chaque page, on dispose de fonctionnalités de navigation dans la hiérarchie des pages (exemple Accueil>Recettes simples>Œufs sur le plat).
Le pied de page comprend une information (ici NFA016 et le logo du cnam) situé à droite. Le logo à la largeur de 2 lettre M.

On vous demande de réaliser une pages des recettes simple qui ressemble à celle présentée ci-dessous:

L' entête et le pieds de page sont conforme à la charte.
Chaque nom de recette apparaît sur une ligne précédée d'une illustration.
Les illustration on 3 fois la auteur de la lettre M
Les lignes sont en alternance sur fond blanc et sur fond violet.
Cliquer sur un nom de recette renvoie a la page de description correspondante.



<html>
  <head>
    <meta  charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="charte.css" media="screen" />
    <title>Les recettes simples</title>
    <style>
      table {font-size:x-large;}
      td img{height:3em;}

      tr:nth-child(even) {background-color: rgb(130,40,230);}
      tr:nth-child(odd) {background-color: white;}

    </style>
  </head>
  <body>


    <div class="en-tete">	<h1>Cuisine</h1>
      <a href=".tout">Accueil</a>><a href=""><b>Recettes simples</b></a>

	</div>
	<table>
	  <caption>Mes recettes simples</caption>
	  <tr>
	    <td><img src="pizza.png" alt="une pizza" /></td><td><a href="pizza.html">Pizza</a></td>
		     </tr>  
	  <tr>
	    <td><img src="saucisses-frites.png"  alt="une saucice"/></td>
	    <td><a href="saucisses-frites.html">Saucisses frites</a></td>
	  </tr>  
	  <tr>
	    <td><img src="sardines.png" alt="sardines"  /></td>
	    <td><a href="sardines.html">Sardines</a></td>
	  </tr>  
	  <tr>
	    <td><img src="oeuf.png" alt="oeuf" /></td>
	    <td><a href="oeuf.html">Œufs sur le plat</a></td>
	  </tr>  
	  <tr>
	    <td><img src="ravioli.png" alt="ravioli"/></td>
	    <td><a href="ravioli.html">Ravioli</a></td>
		     </tr>  
	</table>

	<div class="bas-de-page">
           <p>   NFA016:  <br/> <img src="logo_cnam.png" alt="le logo du cnam"/></p>
	</div>
      </body>
    </html>

Exercice HTML: Page Spécifique

A titre d'exemple on vous demande de réaliser la page correspondant à la recette des Œufs sur le plat de manière à ce qu'elle ressemble à celle ci-dessous:

L' entête et le pieds de page sont conforme à la charte.
L'illustration de la recette est à droite avec une légende en petit caractères
Les ingrédients sont listés dans une zone à fond vert pàle et dans une police sans-serif. Chaque élément de la liste est indexe par une lettre (par ordre alphabétique)
Les noms des ingrédients apparaissent en bleu
Les commentaires sont en rouge, décalés d'une largeur équivalente à 5 lettres M vers la droite.



<html>
  <head>
    <meta charset="UTF-8"/>
 <link rel="stylesheet" type="text/css" href="charte.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="oeuf.css" media="screen" />
    <title>l'oeuf</title>
    <style>
   img { width="30%" height="30%"}
    </style>
  </head>
  <body>


    <div class="en-tete">	<h1>Cuisine</h1>
      <a href="">Accueil</a>><a href="">Recettes simples</a>><b>Œufs sur le plat</b> 

    </div>

    <h2><a id="a1">Œufs sur le plat</a></h2>

    <div class="illustration">
      <img src="oeuf.png" alt="image d'un œuf."/>
      <p>Une illustration très laide, mais libre de droits.</p>
      <div></div>
    </div>
    <div class="ingredients">
      <h3>Ingrédients</h3>
      <ol>
	<li>une noisette de <span class="ingr">beurre</span> ;
	  <p class="remarque">Si le beurre est salé, on salera moins les œufs ensuite.</p>
	</li>
	<li>des <span class="ingr">œufs</span>
	  <p class="remarque">prendre des œufs raisonnablement frais</p>
	</li>
      </ol>
      </div>

    <h3>Préparation</h3>
    <ol class="preparation">
      <li>Faire chauffer la poêlle</li>
      <li>la graisser avec le beurre</li>
      <li>casser les deux œufs dans la poêlle</li>
      <li>retirer du feu quand la consistence souhaitée est atteinte</li>
    </ol>


	<div class="bas-de-page">
           <p>   NFA016:  <br/> <img src="logo_cnam.png" alt="le logo du cnam"/></p>
	</div>

  </body>
</html>

Exercice HTML: Mises en forme de paragraphes

Vous allez créer une page, appelée Base_HTML.html, qui fera apparaître plusieurs mises en forme de paragraphes et de titres.

La page comprendra 3 parties. Il est conseillé d’aller vérifier dans le navigateur votre travail entre chaque partie. Pour cela, enregistrez votre fichier avec le bloc-notes et réactualisez la page dans le navigateur.

Description de la page à créer :

Le fond de la page sera bleu et le texte blanc.
Le titre de la page sera :

Mise en forme de base

1ère partie :

Un titre de niveau 1 centré :

PREMIERE PARTIE

Un paragraphe avec le texte suivant en rouge :

Je suis le premier paragraphe, je suis rouge…

Une ligne séparatrice de taille 2 et de couleur rouge

2ème partie :

Un titre de niveau 2 centré :

DEUXIEME PARTIE

Un paragraphe centré constitué des 3 lignes suivantes avec le texte jaune et de taille 5 :

Je suis le 2^ème paragraphe au centre en taille 5 et en jaune

Une ligne séparatrice de taille 7, de 300 pixels de longueur et de couleur noire

3ème partie :

Un titre de niveau 3 centré :

TROISIEME PARTIE

Un paragraphe, à droite comprenant le texte suivant en taille 7 et la police Arial :

Je suis le dernier paragraphe, je suis en taille 7 avec la police Arial et à droite…


<html>
<head>
<title>mise en forme de base</title>
</head>
<body bgcolor="#0000ff" text="#ffffff">
<center ><h1>PREMIERE PARTIE</h1></center>
<p>
<font color="#ff0000">
je suis le premier paragraphe, je suis rouge
</font>
<hr size="2" color="#ff0000">
<center><h2>DEUXIEME PARTIE</h2></center>
<p align="center">
<font color="#ffff00" size="5">
<i>je suis le 2emeparagraphe</i><br>
<b> au center</b><br>
<u> en taille 5 et en jaune</u>
</font>
<hr size="7" width="300" color="#000000">
<center><h3>TROISIEME PARTIE</h3></center>
<p align="right">
<font face="arial" size="7">
je suis le dernier paragraphe, je suis en
taille7 avec la police Arial et à droite…
</font>
</ body>
</ html>

Exercice HTML: Création de Tableau

Exercice 1

Donner le document html qui permet d'obtenir

A1	100	Un	1000.25
B1	200	Deux	2000.00
C1	300	Trois	3000.00

Exercice 2

Donner le document html qui permet d'obtenir

Années	Salaires
Années	Nord	Sud	Total
2005	10M	8M	18M
2006	14M	11M	25M

Exercice 1
<HTML>
<HEAD>
<TITLE>Exercice 1</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=30%>
<TR>
<TD>A1</TD>
<TD>100</TD>
<TD>Un</TD>
<TD>1000.25</TD>
</TR>
<TR>
<TD>B1</TD>
<TD>200</TD>
<TD>Deux</TD>
<TD>2000.00</TD>
</TR>
<TR>
<TD>C1</TD>
<TD>300</TD>
<TD>Trois</TD>
<TD>3000.00</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Exercice 2
<HTML>
<HEAD>
<TITLE>Exercice 2</TITLE>
</HEAD>
<BODY>
<TABLE width=20% border=1>
<TR>
<TD rowspan="2">Année</TD>
<TD colspan="3" align="center">Salaire</TD>
</TR>
<TR>
<TD>North</TD>
<TD>South</TD>
<TD>Total</TD>
</TR>
<TR>
<TD>2005</TD>
<TD>10M</TD>
<TD>8M</TD>
<TD>18M</TD>
</TR>
<TR>
<TD>2006</TD>
<TD>14M</TD>
<TD>11M</TD>

<TD>25M</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Exercice HTML: Table et Paragraphe

Exercice 1

Donner le document html qui permet d'obtenir

Comparatif modèle économique
Modèle			Vitesse en km/heure	Consommation en litre/100 km
Marque	Type	Numero de série	Vitesse en km/heure	Consommation en litre/100 km
Peugeot 206	B2	234.34	132	5,7
Citroën AX	AT67B8	6789	126	5,5

Exercice 2

Donner le document html qui permet d'obtenir

Systèmes d'exploitation

MerDos
Vaindaube
Unix

Langages de programmation

non orientés objets

Fortran
Cobol
C

orientés objets

Java
Perl
Python
Ruby
Réseaux

Exercice 1
HTML
HEAD
TITLEExercice 3/TITLE
/HEAD
BODY
UL
LISystème d'expoitation/LI
UL
LIMerDos/LI
LIVaindaube/LI
LIUnix/LI
/>UL
LILangages de programmation/LI
UL
LInon orientés objets/LI
UL
LIFortran/LI
LICobol/LI
LIC/LI
/>UL
LIorientés objets/LI
UL
LIJava/LI
LIPerl/LI
LIPython/LI
LIRuby/LI
/>UL
/>UL
LIRéseaux/LI
/>UL
/BODY
/HTML

-----------------------------------------------------------------
Exercice 2

HTML
HEAD
TITLEExercice 4/TITLE
/HEAD
BODY
CENTER
TABLE BORDER=1
>CAPTIONComparatif modèle économique/>CAPTION
TR
TH COLSPAN="3"STRONGModèle/STRONG
TH ROWSPAN="2"STRONGVitesseBRen km/heure/STRONG
TH ROWSPAN="2"STRONGConsommationBRen litre/100 km/STRONG
/TR
TR
THSTRONGMarque/STRONG/>TH
THSTRONGType/STRONG/>TH
THSTRONGNumero de série/STRONG/>TH
/TR
TR
TDPeugeot 206/TD
TDB2/TD
TD ALIGN=MIDDLE>234.34/TD
TD132/TD
TD5,7/TD
/TR
TR
TDCitroën AX/TD
TDAT67B8/TD
TD ALIGN=MIDDLE>6789/TD
TD126/TD
TD5,5/TD
/TR
/TABLE
/CENTER
/BODY
/HTML

Exercice HTML: Tables des matières

Donner le document html qui permet d'obtenir cette page:

<html>
<head>
<title>Les listes en langage HTML</title>
</head>
<body>
<h2 align="center">Tables des matières sur le langage HTML</h2>
<hr width="90%" size="7">
<ol>
<li><b>Introduction au langage HTML.</b>
<ol type="a">
<li>Documents HTML.</li>
<li>Avantage de HTML</li>
<li>Structure d'une page Web.</li>
<li>Balises.</li>
<li>Attributs.
<ul>
<li><u>Exemples</u></li>
</ul>
</li>
<li>Les entités HTML.
<ul type="disc">
<li><u>Exemples</u></li>
</ul>
</li>
</ol>
</li>
<li><b>Ossature d'un document HTML.</b>
<ol>
<li><b>L'en-tête</b>
<ul>
<li><b>Le titre</b></li>
</ul>
</li>
<li><b>Les commentaires</b></li>
<li><b>Le corps</b></li>
</ol>
</li>

<li><b><font size="+1">Quelques balises<sup>(toutes les <i><font
color="#FF0000">balises</font></i>
ne sont pas traitées)</sup></font></b></li>
<ul>
<li><b><i><h1>...</h1>`<h6>...</h6&g
t;</i></b>
<ol type="A">
<li><font color="#FF0000">Les niveaux 1, 2 et 3.</font></li>
<li><font color="#ff0000">Le niveau 4</font></li>
<li><font color="#ff0000">Le niveau 5 et 6.</font></li>
</ol>
</li>
<li><b><i><hr></i></b></li>
<li><i><b><nobr>...</nobr></b></i></li>
</ul>
<li><b>Les styles de présentation.</b></li>
<li><b>Les polices de caractères.</b></li>
</ol>
</body>
</html>

Exercice HTML: Diaporama

Créer un Code HTML qui permet de réaliser un Diaporama auto des photos


html
head
titleDocument sans titre/title
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/head

body bgcolor="#FFFFFF"
table width="209" height="250" border="1" align="center"
  tr
    td width="199" height="159" bgcolor="#3399FF" div align="left"
        script language="JavaScript1.2"
//Drop-in slideshow- Par Dynamic Drive
//Pour d'autres codes DHTML scripts, visitez http://www.dynamicdrive.com
//Laissez en place le copyright svp


var slideshow_width=200 // Largeur des images. Utilisez la plus grande largeur si vos images ne sont pas identiques
var slideshow_height=133 //Hauteur des images. Utilisez la plus grande largeur si vos images ne sont pas identiques
var pause=4000 //Pause entre chaque image (3000=3 seconds)


var dropimages=new Array()
// Entrez ci-dessous le path et le nom de vos images
// IMPORTANT / N'oubliez pas d'incrémenter la valeur qui est entre les crochets [...]
dropimages[0]="image1.jpg"
dropimages[1]="image2.jpg"
dropimages[2]="image3.jpg"
dropimages[3]="image4.jpg"
dropimages[4]="image5.jpg"
dropimages[5]="image6.jpg"
////Ne rien éditer ci-dessous/////////////


var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}


var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1


if (ie4||dom)
document.write('

+slideshow_width+';height:'+slideshow_height+';overflow:hidden">

+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'">

')

else
document.write('img name="defaultslide" src="'+dropimages[0]+'"')


var curpos=slideshow_height*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1




function movepic(){
if (curpos0){
curpos=Math.min(curpos+degree,0)
tempobj.style.top=curpos
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='+dropimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}


function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}


function resetit(what){
curpos=slideshow_height*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos}


function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='+dropimages[curimageindex]+'">'
rotateimage()
}


if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)


/script
      /div/td
  /tr
/table
/body
/html

Exercice HTML: Paragraphe avec Style

Ecrire le code qui permet de réaliser le paragraphe suivant:

Titre du document

Le premier paragraphe

Formats de documents structurés

SGML
HTML
XML

Le second paragraphe

Formats de documents structurés

SGML: Standard Generalized Markup Language
XML: Extensible Markup Language



<HTML>
	<HEAD>

		<TITLE>Titre du document</TITLE>

	</HEAD>

	<BODY>

	 	<H1>Titre du document</H1>

		<P>Le premier paragraphe</P>

		       <H2>Formats de documents structurés</H2>

	                           <OL>

		             <LI>SGML</LI>

		              <LI>HTML</LI>

		              <LI>XML</LI>

                                            </OL>
		<P>Le second paragraphe</P>

                                         <H2>Formats de documents structurés</H2>

                                            <DL>

	                              <DT>SGML</DT>

                                                   <DD>Standard Generalized Markup Language</DD>

                                               <DT>XML</DT>

                                                    <DD>Extensible Markup Language</DD>

                                                    <DT>
                                               </DL>
    	</BODY>
</HTML>

Exercice HTML: Simples Balises

1. Écris cette liste ordonnée:

Aimer
Détester
Haïr
Adorer

2 Fais un changement de paragraphe.

3. Écris maintenant une définition de liste:

Langage HTML

Codification utilisée pour les documents WWW. Ce type de codes a été inventé par Tim Berners-Lee alors au CERN.

Langage Java

Programmation qui fait suer son concepteur tout en lui apportant plusieurs satisfactions...

4. Fais un changement de ligne, trace une ligne centrée horizontalement qui occupera 80 % de la largeur de la page. Termine avec un changement de paragraphe.

5. Sauvegarde ton travail sur ton dossier personnel. Nomme ton fichier exercice1.html

1. Voici les codes :

<OL TYPE=A> 
<LI>Aimer 
<LI>Détester 
<LI>Haïr 
<LI>Adorer
</OL> 

2. Voici le code :<P> 

3. Voici les codes :

<DL> 
<DT>Langage HTML
<DD>Codification utilisée pour les documents WWW. Ce type de codes a été inventé par Tim Berners-Lee au CERN. 
<DT>Langage Java<DD>Programmation qui fait suer son concepteur tout en lui apportant plusieurs satisfactions...
</DL> 

4. Voici les code :

<BR>
<HR WIDTH=80%>
<P> 

5. Clique sur Fichier de bloc-notes, Enregistrer sous. Sélectionne ton dossier personnel et dans la case Nom du fichier, écrit Ecercice3.html. Clique sur Sauvegarder. Maintenant ouvre ton fichier par ton navigateur et regarde le résultat.

Exercice HTML: Table et Paragraphe

Exercice 1

Donner le document html qui permet d'obtenir

Comparatif modèle économique
Modèle			Vitesse en km/heure	Consommation en litre/100 km
Marque	Type	Numero de série	Vitesse en km/heure	Consommation en litre/100 km
Peugeot 206	B2	234.34	132	5,7
Citroën AX	AT67B8	6789	126	5,5

Exercice 2

Donner le document html qui permet d'obtenir

Systèmes d'exploitation

MerDos
Vaindaube
Unix

Langages de programmation

non orientés objets

Fortran
Cobol
C

orientés objets

Java
Perl
Python
Ruby
Réseaux

Exercice 1
HTML
HEAD
TITLEExercice 3/TITLE
/HEAD
BODY
UL
LISystème d'expoitation/LI
UL
LIMerDos/LI
LIVaindaube/LI
LIUnix/LI
/>UL
LILangages de programmation/LI
UL
LInon orientés objets/LI
UL
LIFortran/LI
LICobol/LI
LIC/LI
/>UL
LIorientés objets/LI
UL
LIJava/LI
LIPerl/LI
LIPython/LI
LIRuby/LI
/>UL
/>UL
LIRéseaux/LI
/>UL
/BODY
/HTML

-----------------------------------------------------------------
Exercice 2

HTML
HEAD
TITLEExercice 4/TITLE
/HEAD
BODY
CENTER
TABLE BORDER=1
>CAPTIONComparatif modèle économique/>CAPTION
TR
TH COLSPAN="3"STRONGModèle/STRONG
TH ROWSPAN="2"STRONGVitesseBRen km/heure/STRONG
TH ROWSPAN="2"STRONGConsommationBRen litre/100 km/STRONG
/TR
TR
THSTRONGMarque/STRONG/>TH
THSTRONGType/STRONG/>TH
THSTRONGNumero de série/STRONG/>TH
/TR
TR
TDPeugeot 206/TD
TDB2/TD
TD ALIGN=MIDDLE>234.34/TD
TD132/TD
TD5,7/TD
/TR
TR
TDCitroën AX/TD
TDAT67B8/TD
TD ALIGN=MIDDLE>6789/TD
TD126/TD
TD5,5/TD
/TR
/TABLE
/CENTER
/BODY
/HTML

Exercice HTML: Apparence d’un tableau

Créer les ?chiers XHTML et CSS a?n de mettre en page les tableaux comme sur la Figure suivante.

Code HTML
<table class="droite">
 <tr>
 <th> Col 1 </th> <th> Col 2 </th> <th> Col 3</th>
 </tr>
 <tr class="impair">
 <td> Case1 </td><td> Case 2 </td><td> Case 3</td>
 </tr>
<tr class="pair">
<td> Case4 </td><td> Case 5 </td><td> Case 6</td>
</tr>
<tr class="impair">
<td> Case7 </td><td> Case 8 </td><td> Case 9</td>
</tr>
<tr class="pair">
<td> Case10 </td><td> Case 11 </td><td> Case12 </td>
</tr>
</table>

Code CSS
table
 {
 width : 400px;
 margin-left : auto;
 margin-right : auto;
 border : 2px solid black;
 border-collapse : collapse;
 text-align : center;
}
th,td
{
border : 1px solid black;
width : 30%;
height : 40px;
}
 tr { background-color : #DC2F2F; }

 tr.impair { background-color :#F16D6D; }

tr.pair { background-color : #CB4040;}

Exercice HTML: Choix d'Image

Créer le code qui permet de réaliser lce qui suit :

<html>
<head>
<script language ="JavaScript">

function afficheImage(saison){
 switch (saison) {
 case 'printemps' :
 document.images[0].src = "photo_printemps.jpg"
 break
 case 'ete' :
 document.images[0].src = "photo_ete.jpg"
 break
 case 'hiver' :
 document.images[0].src = "photo_hiver.jpg"
 break
 case 'automne' :
 document.images[0].src = "photo_automne.jpg"
 break
 default :
 document.images[0].src = "photo_vide.jpg"

 } 
}
</script>
</head>
<body>
<center>

<A href="javascript:afficheImage('printemps')"> cliquer ici pour voir une image printemps </A><br>
<A href="javascript:afficheImage('ete')"> cliquer ici pour voir une image ete </A><br>
<A href="javascript:afficheImage('automne')"> cliquer ici pour voir une image automne </A><br>
<A href="javascript:afficheImage('hiver')"> cliquer ici pour voir une image hiver </A><br>
<A href="javascript:afficheImage('vide')"> cliquer ici pour voir une photo vide </A><br>
<IMG SRC="photo_vide.jpg">
</center>
</body>
</html>

Exercice HTML: Création Formulaire Réponse QCM

Ecrire le code HTML de la fenêtre d’affichage du corrigé représentée par l’image ci-dessous.

HTML
HEAD
TITLEL'utilisation des procédés RAID1 et RAID5 - réponse au test/TITLE
META NAME="Description" CONTENT="L'utilisation des procédés RAID1 et RAID5 - réponse au test"
META NAME="Keywords" CONTENT="Administration avec Windows NT"
META NAME="Author" CONTENT=""
META NAME="Generator" CONTENT="WebExpert3"
META NAME="Organisme" CONTENT=""/HEAD
BODY BGCOLOR="#FFFFFF"
TEXT="#000000"
LINK="#000080"
VLINK="#800080"
ALINK="#FF0000"
SCROLL=AUTO LEFTMARGIN=20 RIGHTMARGIN=0 TOPMARGIN=0
FONT FACE="Times New Roman"
TABLE WIDTH="100%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0"
COL SPAN="3"
TR
TD/TD
TD
CENTERH3FONT COLOR="#800000"L'utilisation des procédés RAID1 et RAID5BRRéponse
du test/FONT/H3
HR/CENTER


FONT SIZE=2
PIBFONT COLOR="#008000"Les bonnes réponses aux questions apparaissent en couleur
rouge./FONT/B/I
PBQuestion 1 :/B
BRQuel est le type de disque système qui réalise une copie exacte de toutes les données
d'une partition disque dans une autre partition ?
I
LI RAID.BR
LI Sauvegarde disque.BR
LIBFONT COLOR="#FF0000" Mise en miroir./FONT/BBR
LI Dépannage à chaud.BR/I
PBQuestion 2 :/B
BRQuel est le type de disque système qui utilise de 3 a 32 disques physiques et est
aussi connu sous le nom de RAID5 ?
I
LIBFONT COLOR="#FF0000" Agrégats par bandes avec parité./FONT/BBR
LI Agrégats par bandes sans parité.BR
LI Disques en miroir.BR
LI Agrégats par bandes avec données répétitives.BR/I
PBQuestion 3 :/B
BRQuel sont les types de disques qui assurent la tolérance de pannes ?
I
LI Les agrégats de partition.BR
LIBFONT COLOR="#FF0000" Les agrégats par bandes avec parité./FONT/BBR
LI Les agrégats par bandes sans parité.BR
LIBFONT COLOR="#FF0000" Les disques en miroir./FONT/BBR
LI RAID de niveau 0.BR/I
CENTERFORM
INPUT TYPE="button" VALUE="Fermer la fenêtre" Onclick="self.close()"
/FORM/CENTER
/TD
TD/TD
/TR
/TABLE
/FONT
/BODY
/HTML

Exercice HTML: Ecriture des Balises

Styles d'ecritures Ecrire le Code HTML qui permet de réaliser les Textes suivants:

la balise pour le gras
la balise pour Italic
la balise pour le Souligné

la balise affiche le texte en indice: exemple soient a₁, a₂,a₃ trois entiers.

la balise affiche le texte en exposant: exemple soient les 1^ers jours du XXI^émesiécle.

la balise centre tous les elements contenus dans la balise

la balise

applique un alignement spécial à une partie du document avec les attributs: LEFT, RIGHT, CENTER,JUSTIFY

html  

head

titleStyles d'ecritures title

head 

body  

    BASEFONT SIZE=4 COLOR="blue" FACE="times new roman"

  B la balise <B> pour le gras B BR

    I la balise <I> pour Italic I BR

    U la balise <U> pour le Souligné/U BR 

    P Autres balises de formatages et de mise en page BR

        STRONG la balise <STRONG >affiche le texte de facon trés accentué. la plupart des navigateurs mettent le texte en gras STRONG

        S la balise <S>ou la balise <STRIKE> affiche le texte en barré /S

        p la balise <SUB>affiche le texte en indice: exemple  

             soient aSUB1/SUB, aSUB2/SUB,aSUB3/SUB trois entiers.

        /p

        p la balise <SUP>affiche le texte en exposant: exemple  

             soient les 1SUPers/SUP jours du XXISUPéme/SUPsiécle.

        /p

        CENTER la balise <CENTER>centre tous les elements contenus dans la balise /CENTER

        DIV la balise <DIV>applique un alignement spécial à une partie du document avec les attributs: LEFT, RIGHT, CENTER,JUSTIFY /DIV 

        FONT SIZE= -1 COLOR="red" FACE="Arial"

          la balise <FONT>Permet de choisir une police, une taille et une couleur à appliquer à une partie de texte

        /FONT 

        /BLOCKQUOTE     

           la balise la balise <BLOCKQUOTE> identifie une citation qui saffichera en décalage par rapport au reste du document 

        /BLOCKQUOTE     



  /body

/html

Exercice HTML: Fichier CSS

Modifier, à l’aide d’un fichier CSS, l’apparence du titre de niveau 3 et du paragraphe pour obtenir le résultat de la ?gure 2.3.

A?n de répondre à cette question, télécharger les deux images suivantes:

h3
 {
 background-image: url(’title.png’);
 background-repeat : no-repeat;
 font-weight : normal;
 font-size : medium;
 width : 300px;
 height : 20px;
 text-align : center;
 margin-bottom : 0px;
 padding-bottom : 0px;
 }

 p
 {
 width : 300px;
 margin-top : 0px;
 padding-top: 0px;
 text-align : justify;
 background-image: url(’degrade.png’);
 }

Exercice HTML: Formulaire Type

Ecrire le code HTML qui permet de réaliser le Formulaire suivant:

h2Formulaire Type/h2
form method="post" action="http://www.naziha.com")
h3Coordonnees/<span style="color: #000000; font-weight: bold;"