Exercice HTML: Tables des matières
Donner le document html qui permet d'obtenir cette page:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 | 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 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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 | htmlheadtitleDocument 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"> ')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+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"> +slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"> |
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
|
123456789101112131415161718192021222324252627282930313233343536373839404142434445 | 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
123456789101112131415161718192021222324252627 | 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 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
- 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
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 | Exercice 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.
123456789101112131415161718 | Code 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> |
123456789101112131415161718192021 | Code 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 :
12345678910111213141516171819202122232425262728293031323334353637 | 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.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 | HTMLHEADTITLEL'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 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 centre tous les elements contenus dans la balisela 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 |
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 | html 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:
123456789101112131415161718192021 | 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:
123456789101112131415161718192021222324252627282930 | h2Formulaire 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:
- 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.
12345678910111213141516171819202122232425 | 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:[email protected]> /MAP>6. CENTER>IMG SRC="menu.gif" BORDER=0 WIDTH=438 HEIGHT=16 USEMAP="#fictif">/CENTER> |