Exercice HTML: Tables des matières
Rédigé par GC Team, Publié le 11 Janvier 2012, Mise à jour le Jeudi, 15 Décembre 2022 19:43![](/images/thumb/147/default.png)
Donner le document html qui permet d'obtenir cette page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
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+'">
+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=' |
Exercice HTML: Paragraphe avec Style
Ecrire le code qui permet de réaliser le paragraphe suivant:
Titre du documentLe premier paragraphe Formats de documents structurés
Le second paragraphe Formats de documents structurés
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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 |
||
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
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 Autres balises de formatages et de mise en page la balise affiche le texte en indice: exemple soient a1, a2,a3 trois entiers. la balise affiche le texte en exposant: exemple soient les 1ers jours du XXIémesiécle. 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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: 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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> |