Exercice HTML: Tables des matières


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



12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758html>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 balisessup>(toutes les i>fontcolor="#FF0000">balises/font>/i>ne sont pas traitées)/sup>/font>/b>/li>ul>li>b>i>h1>.../h1>`h6>.../h6>/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



123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117htmlheadtitleDocument sans titre/titlemeta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/headbody 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 svpvar slideshow_width=200 // Largeur des images. Utilisez la plus grande largeur si vos images ne sont pas identiquesvar slideshow_height=133 //Hauteur des images. Utilisez la plus grande largeur si vos images ne sont pas identiquesvar 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){preloadedimages[p]=new Image()preloadedimages[p].src=dropimages[p]}var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1if (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+'">
')elsedocument.write('img name="defaultslide" src="'+dropimages[0]+'"')var curpos=slideshow_height*(-1)var degree=10var curcanvas="canvas0"var curimageindex=0var nextimageindex=1function 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=(nextimageindex1)? nextimageindex+1 : 0setTimeout("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"}elsedocument.images.defaultslide.src=dropimages[curimageindex]curimageindex=(curimageindex1)? 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=startitelsesetInterval("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

  1. SGML
  2. HTML
  3. XML

Le second paragraphe

Formats de documents structurés

SGML
Standard Generalized Markup Language
XML
Extensible Markup Language
123456789101112131415161718192021222324252627282930313233343536373839404142434445HTML> 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:

  1. Aimer
  2. Détester
  3. Haïr
  4. 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

1234567891011121314151617181920212223242526271. 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 HTMLDD>Codification utilisée pour les documents WWW. Ce type de codes a été inventé par Tim Berners-Lee au CERN. DT>Langage JavaDD>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

  1. Systèmes d'exploitation
  • MerDos
  • Vaindaube
  • Unix
  1. Langages de programmation
  • non orientés objets
  1. Fortran
  2. Cobol
  3. C
  • orientés objets
  1. Java
  2. Perl
  3. Python
  4. Ruby
  5. Réseaux
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374Exercice 1HTMLHEADTITLEExercice 3/TITLE/HEADBODYULLISystème d'expoitation/LIULLIMerDos/LILIVaindaube/LILIUnix/LI/>ULLILangages de programmation/LIULLInon orientés objets/LIULLIFortran/LILICobol/LILIC/LI/>ULLIorientés objets/LIULLIJava/LILIPerl/LILIPython/LILIRuby/LI/>UL/>ULLIRéseaux/LI/>UL/BODY/HTML-----------------------------------------------------------------Exercice 2HTMLHEADTITLEExercice 4/TITLE/HEADBODYCENTERTABLE BORDER=1>CAPTIONComparatif modèle économique/>CAPTIONTRTH COLSPAN="3"STRONGModèle/STRONGTH ROWSPAN="2"STRONGVitesseBRen km/heure/STRONGTH ROWSPAN="2"STRONGConsommationBRen litre/100 km/STRONG/TRTRTHSTRONGMarque/STRONG/>THTHSTRONGType/STRONG/>THTHSTRONGNumero de série/STRONG/>TH/TRTRTDPeugeot 206/TDTDB2/TDTD ALIGN=MIDDLE>234.34/TDTD132/TDTD5,7/TD/TRTRTDCitroën AX/TDTDAT67B8/TDTD ALIGN=MIDDLE>6789/TDTD126/TDTD5,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.



123456789101112131415161718Code HTMLtable 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>
123456789101112131415161718192021Code CSStable { 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 :



12345678910111213141516171819202122232425262728293031323334353637html>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.



123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263HTMLHEADTITLEL'utilisation des procédés RAID1 et RAID5 - réponse au test/TITLEMETA 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=""/HEADBODY BGCOLOR="#FFFFFF"TEXT="#000000"LINK="#000080"VLINK="#800080"ALINK="#FF0000"SCROLL=AUTO LEFTMARGIN=20 RIGHTMARGIN=0 TOPMARGIN=0FONT FACE="Times New Roman"TABLE WIDTH="100%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0"COL SPAN="3"TRTD/TDTDCENTERH3FONT COLOR="#800000"L'utilisation des procédés RAID1 et RAID5BRRéponsedu test/FONT/H3HR/CENTERFONT SIZE=2PIBFONT COLOR="#008000"Les bonnes réponses aux questions apparaissent en couleurrouge./FONT/B/IPBQuestion 1 :/BBRQuel est le type de disque système qui réalise une copie exacte de toutes les donnéesd'une partition disque dans une autre partition ?ILI RAID.BRLI Sauvegarde disque.BRLIBFONT COLOR="#FF0000" Mise en miroir./FONT/BBRLI Dépannage à chaud.BR/IPBQuestion 2 :/BBRQuel est le type de disque système qui utilise de 3 a 32 disques physiques et estaussi connu sous le nom de RAID5 ?ILIBFONT COLOR="#FF0000" Agrégats par bandes avec parité./FONT/BBRLI Agrégats par bandes sans parité.BRLI Disques en miroir.BRLI Agrégats par bandes avec données répétitives.BR/IPBQuestion 3 :/BBRQuel sont les types de disques qui assurent la tolérance de pannes ?ILI Les agrégats de partition.BRLIBFONT COLOR="#FF0000" Les agrégats par bandes avec parité./FONT/BBRLI Les agrégats par bandes sans parité.BRLIBFONT COLOR="#FF0000" Les disques en miroir./FONT/BBRLI RAID de niveau 0.BR/ICENTERFORMINPUT TYPE="button" VALUE="Fermer la fenêtre" Onclick="self.close()"/FORM/CENTER/TDTD/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é 

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 a1, a2,a3 trois entiers.

la balise affiche le texte en exposant: exemple soient les 1ers 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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657html headtitleStyles d'ecritures titlehead 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:





123456789101112131415161718192021h3 { 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:

123456789101112131415161718192021222324252627282930h2Formulaire Type/h2form method="post" action="http://www.naziha.com")h3Coordonnees/h3strongNom/strongbrinput type="text" name="nom" size="25"pstrongPrenom/strongbrinput type="text" name="prenom" size="25"pstrongJe désire recevoir une documentation/stronginput type="checkbox" name=”doc”>pstrongPays/strongselect name="pays" size=1optionCH: SuisseoptionD: Allemagne................../selectppstrongSexe/stronginput type="radio" name="sexe"Masculininput type="radio" name="sexe"Fémininph3Domaine(s) d'activite/h3Vous pouvez en choisir plus qu'un...pinput type="checkbox" name="domaine" value="Pedagogie"Pedagogieinput type="checkbox" name="domaine" value="Psychologie"Psychologieinput type="checkbox" name="domaine" value="Informatique"Informatiqueinput type="checkbox" name="domaine" value="Autre"Autreh4Commentaire/h4Si vous le voulez, vous pouvez decrire vos activites ou interets pTEXTAREA name="comments" rows=4 cols=60/textareapinput type="reset" value="Effacer les données"input type="submit" value="Enregistrer les donnees"p/form

Exercice HTML: Hyperliens


Travail à Faire:

  1. Crée un nouveau document HTML dont le titre sera Exercice HTML 2.
  2. Insère une image, tu la sauvegarde par menu.gif, dans le document. Cette image sera en coordonnées.
  3. Délimite la zone Accueil et donne-lui cette adresse: index.html (Lien externe, ---)
  4. Délimite la zone Aide et donne-lui cette adresse: aide.html (Lien externe, ---)
  5. Délimite la zone Écrivez-nous et donne-lui ton adresse électronique (Lien externe, mailto).
  6. Centre l'image menu.gif (avec le code center);
  7. Convertis les caractères spéciaux, sauvegarde le tout sur ton dossier personnel. Le nom du fichier sera ex2.html
  8. Visualise ton document avec votre navigateur. Clique sur les 3 zones de l'image.
123456789101112131415161718192021222324251. 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:[email protected]> /MAP>6. CENTER>IMG SRC="menu.gif" BORDER=0 WIDTH=438 HEIGHT=16 USEMAP="#fictif">/CENTER>
Article publié le 11 Janvier 2012 Mise à jour le Jeudi, 15 Décembre 2022 19:43 par BENKIRANE Fatima Ezzahra