Exercice HTML: TP HTML & CSS
Ecrire un Code qui permet de réaliser le Tableau suivant:
1234567891011121314151617181920212223 | htmlheadtitleposition/titlestyle type="text/css"/style/headbody bgcolor="FFFFFF" text="#000000"div id="boite1" style="background:red; border:solid 2px blue;"boite 1/divdiv id="boite2" style="background:blue; border:solid 2px white;"boite 2/divdiv 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.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 | 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:
123456789101112131415161718192021222324252627282930313233343536373839404142 | htmlheadtitleImage/title style #s{border:dotted 2px red;margin:auto;width:100;height:100;padding-left:10px;}/stylescript 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 bodycenter 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>/divp 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:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 | 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érerNOFRAMES>/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 à é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>Entrezbr>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:
12345678910111213141516171819202122232425262728293031 | htmlhead/headbodycentertable border=1trtdh2ucenterBienVenu/center/u/h2form 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=5PChoisissez quelque chose :brinput type="radio" name="svt" value="svt" checked>sciences de la vie et de la terre brinput type="radio" name="math" value="math"mathématiquespfait le choix d'icibrcenterselect name="choix" multiple size=5optionmathoption selected>physiqueoptionAnglais/select/centerpvous voulez faire : brinput type="checkbox" name="génié"ingenieurbrinput type="checkbox" name="farme" checked>docteurpcentertextarea name="avs" cols=44 rows=12/TEXTAREAPINPut 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 globaleVoici 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 |
123456789101112131415161718192021222324252627282930313233343536373839 | 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:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 | 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 cm3
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.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 | 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 cmSUP>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:
12345678910111213141516171819202122232425262728293031 | 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=50SRC="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:
12345678910111213141516171819202122232425262728293031 | 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=50SRC="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.
1234567891011121314151617181920212223242526272829 | 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> |