Exercice HTML: TP HTML & CSS

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

 
1234567891011121314151617181920212223htmlheadtitleposition/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:



  1. L' entête et le pieds de page sont conforme à la charte.
  2. L'illustration de la recette est à droite avec une légende en petit caractères
  3. 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)
  4. Les noms des ingrédients apparaissent en bleu
  5. Les commentaires sont en rouge, décalés d'une largeur équivalente à 5 lettres M vers la droite.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354html> 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:



123456789101112131415161718192021222324252627282930313233343536373839404142htmlheadtitleImage/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:

 

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184HTML>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:



12345678910111213141516171819202122232425262728293031htmlhead/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 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

123456789101112131415161718192021222324252627282930313233343536373839HTML> 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:



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192HTML 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.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748491. 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:



12345678910111213141516171819202122232425262728293031HTML>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:



12345678910111213141516171819202122232425262728293031HTML>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.



1234567891011121314151617181920212223242526272829HTML> 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>
Article publié le 09 Janvier 2012 Mise à jour le Mercredi, 14 Décembre 2022 21:21 par BENKIRANE Fatima Ezzahra