Exercice HTML: Insertion Dessin

Ecrivez le code HTML permettant de réaliser la page représentée sur la ?gure ci-dessous. L’image correspond à un fichier nommé dessin.png.  Elle se trouve dans le sous répertoire images qui est au même niveau que la page html.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556html>head>meta charset="utf-8" />title>Exercice 1/title>/head>body> p> Un beau texte avec une img src="dessin.png" alt="image d'une maison" /> image. L'image s'appelle "dessin.png", et se trouve dans le dossiers "images". Celui-ci est situé au même endroit que la page à écrire. /p> h1>Première partie/h1> p>On vous demande ici/p> ul> li>D'écrire le code xhtml strict qui correspond à cette page/li> li>On n'utilisera pas ici de em>feuille de style/em>./li> /ul> h1>Seconde partie/h1> p>Voir exo 2/p> h1>Jouons avec des listes imbriquées/h1> ol> li> Ceci est le premier élément numeroté/li> li> Ceci est le deuxième élément numeroté ul> li> Ceci est le premier sous-élément du deuxième élément numeroté ol> li> Et ceci est un sous-élément numéroté d'un sous-élément/li> li> Et ceci est un autre sous-élément numéroté du même sous-élément/li> li> Vous suivez toujours ?/li> /ol> /li> li> Ceci est le deuxième sous-élément du deuxième élément numeroté/li> li> Ceci est le troisième sous-élément du deuxième élément numeroté/li> /ul> /li> li> Ceci est le troisième élément numeroté qui contient deux defintions dl> dt>facile/dt> dd>qui n'est pas difficile/dd> dt>difficile/dt> dd>synonyme de compliqué/dd> /dl> /li> /ol>/body>/html>

Exercice HTML: Identification du navigateur

Ecrire le code qui permet de réaliser ce qui suit:

Identification du navigateur

L'objet navigator contient les informations suivantes sur votre navigateur :

  • Nom de code : Mozilla
  • Nom de l'application : Netscape
  • Numéro de version : 5.0 (Windows NT 6.0) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7
  • « User Agent » : Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7
  • Langue : fr
  • Plate-forme : Win32
123456789101112131415161718192021222324252627282930313233343536373839404142434445html>head>title>Identification du navigateur/title>/head>body>H1>Identification du navigateur/H1>HR>P>L'objet B>navigator/B> contient les informations suivantes sur votre navigateur:/P>UL>SCRIPT LANGUAGE="JavaScript">document.write("LI>B>Nom de code :/B> " + navigator.appCodeName);document.write("LI>B>Nom de l'application :/B> " + navigator.appName);document.write("LI>B>Numéro de version :/B> " + navigator.appVersion);document.write("LI>B>« User Agent » :/B> " + navigator.userAgent);document.write("LI>B>Langue :/B> " + navigator.language);document.write("LI>B>Plate-forme :/B> " + navigator.platform);/SCRIPT>/UL>HR>/body>/html>

Exercice HTML: La Balise OL

Ecrire le code HTML qui permet de réaliser ce qui suit:

Exemple de liste de type ordonnée ()

  1. Fichiers HTML
  2. Fichiers images
  3. Fichiers sons
  4. Fichiers films
  5. Fichiers test
  6. Fichiers exemples
12345678910111213141516171819202122232425262728293031323334353637383940htmlheadtitleListes ul>/title/headbody h2 Exemple de liste de type ordonnée (ol>)/h2 ol type=a> li Fichiers HTML li Fichiers images li value=4 Fichiers sons li Fichiers films li Fichiers test li Fichiers exemples /ol /body/html

Exercice HTML: Mises en forme de paragraphes

Vous allez créer une page, appelée Base_HTML.html, qui fera apparaître plusieurs mises en forme de paragraphes et de titres.

La page comprendra 3 parties. Il est conseillé d’aller vérifier dans le navigateur votre travail entre chaque partie. Pour cela, enregistrez votre fichier avec le bloc-notes et réactualisez la page dans le navigateur.

Description de la page à créer :

  • Le fond de la page sera bleu et le texte blanc.
  • Le titre de la page sera :

Mise en forme de base

1ère partie :

  • Un titre de niveau 1 centré :

PREMIERE PARTIE

  • Un paragraphe avec le texte suivant en rouge :

Je suis le premier paragraphe, je suis rouge…

  • Une ligne séparatrice de taille 2 et de couleur rouge

2ème partie :

  • Un titre de niveau 2 centré :

DEUXIEME PARTIE

  • Un paragraphe centré constitué des 3 lignes suivantes avec le texte jaune et de taille 5 :

Je suis le 2ème paragraphe au centre en taille 5 et en jaune

  • Une ligne séparatrice de taille 7, de 300 pixels de longueur et de couleur noire

3ème partie :

  • Un titre de niveau 3 centré :

TROISIEME PARTIE

  • Un paragraphe, à droite comprenant le texte suivant en taille 7 et la police Arial :

Je suis le dernier paragraphe, je suis en taille 7 avec la police Arial et à droite…

12345678910111213141516171819202122232425262728html>head>title>mise en forme de base/title>/head>body bgcolor="#0000ff" text="#ffffff">center >h1>PREMIERE PARTIE/h1>/center>p>font color="#ff0000">je suis le premier paragraphe, je suis rouge/font>hr size="2" color="#ff0000">center>h2>DEUXIEME PARTIE/h2>/center>p align="center">font color="#ffff00" size="5">i>je suis le 2emeparagraphe/i>br>b> au center/b>br>u> en taille 5 et en jaune/u>/font>hr size="7" width="300" color="#000000">center>h3>TROISIEME PARTIE/h3>/center>p align="right">font face="arial" size="7">je suis le dernier paragraphe, je suis entaille7 avec la police Arial et à droite…/font>/ body>/ html>

Exercice HTML: Page avec Banner et Formulaite

Ecrire un code qui permet de réaliser la page suivante:

 



12345678910111213141516171819202122232425262728293031323334353637383940414243HTML>head>object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" id="d.swf" align="middle"> param name="allowScriptAccess" value="sameDomain"> param name="movie" value="d.swf"> param name="quality" value="high"> param name="bgcolor" value="#ffffff"> src="d.swf" quality="high" bgcolor="#ffffff" width="468" height="60" name="d.swf" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">/object>body>FORM METHOD="POST" ACTION="/cgi-bin/questionnaire.cmd?xxx">p>h4>CENTER>Essai Formulaire/CENTER>/H4>pre>b>LI>NOM: input type="text"name="name" size=30>LI>ADRESSE: input type="text"name="street.address" size=30>LI>VILLE :input type="text"name="city" size=30>LI>PROVINCE: input type="text"size=15 name="state">LI>CODE POSTAL: input type="textname="zip" size=10>LI>PAYS:input type="text"name="country" size=20>LI>TELEPHONE: inputtype="text" name="phone" size=10>LI>COURRIER ELECTRONIQUE: inputtype="text" name="email" size=30>/b>/pre>input type="submit"value="Soumettre"> inputtype="reset" value="Effacer etrecommencer">P>/form>p>/BODY>/head>/html>

 Exercice HTML: Paragraphe

Ecrire le code qui permet de réaliser la paragraphe quivante:

Les mois du printemps

  • avril
  • mai
  • juin

Les mois d'automnep

  1. octobre
  2. novembre
  3. dcembre
1234567891011121314151617181920212223242526272829303132html>head>Exercice HTML/titre>/head>body>H1>Les mois du printemps/H1> H2>Les mois du printemps/H2>UL>LI>avril LI>mai LI>juin/UL>P>H3>Les mois d'automnep /H3>OL>LI>octobre LI>novembre LI>dcembre/OL> /body>/html>

Exercice HTML: Petit page avec Bannière et Formulaire

Ecrire le code HTML qui permet de réaliser la page suivante:



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768HTML> head>object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" id="d.swf" align="middle"> param name="allowScriptAccess" value="sameDomain"> param name="movie" value="d.swf"> param name="quality" value="high"> param name="bgcolor" value="#ffffff"> src="d.swf" quality="high" bgcolor="#ffffff" width="468" height="60" name="d.swf" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">/object>BODY> FORM method=post action="etudiant.php"> Enregistrement d'un étudiant TABLE BORDER=0> TR> TD>Nom/TD> TD> INPUT type=text name="nom"> /TD> /TR> TR> TD>Prénom/TD> TD> INPUT type=text name="prenom"> /TD> /TR> TR> TD>Formation/TD> TD> Initiale : INPUT type=radio name="initiale" value="I"> Continue : INPUT type=radio name="continue" value="C"> /TD> /TR> TR> TD>Cursus/TD> TD> SELECT name="cursus"> OPTION VALUE="informatique">Informatique/OPTION> OPTION VALUE="mathematique">Mathématique/OPTION> OPTION VALUE="lettres">Lettres/OPTION> OPTION VALUE="economie">Economie/OPTION> OPTION VALUE="autre">Autre/OPTION> /SELECT> /TD> /TR> TR> TD>Commentaires/TD> TD> TEXTAREA rows="3" name="commentaires"> Tapez ici vos commentaires/TEXTAREA> /TD> /TR> TR> TD COLSPAN=2> INPUT type="submit" value="Envoyer"> /TD> TD> INPUT type="reset" value="Effacer"> /TD> /TR> /TABLE> /FORM> /BODY> /head>/HTML>

Exercice HTML: Rendu avec CSS

Modifier les fichiers HTML et CSS pour obtenir le résultat de la figure suivante:



123456789101112131415161718192021Code HTML:... h1> Tableaux : /h1> div class="mepParagraphes"> table class="gauche">CODE DU TABLEAU /table> table class="droite"> CODE DU TABLEAU /table> /div> h1> Paragraphe : /h1> h3> Titre du paragraphe /h3> p> TEXTE DU PARAGRAPHE/p>
12345678910111213141516171819202122Code CSS:.mepParagraphes { width : 820px; margin-left : auto; margin-right : auto; position : relative; height : 240px; } .gauche { position : absolute; top : 0px; left : 0px; } .droite { position : absolute; bottom : 0px; right : 0px; }

Exercice HTML: Site de Formation

Ecrire le code qui permet de réaliser la page suivante:

 

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />link rel="stylesheet" type="text/css" href="style.css" />title>web design/title>/head>body>div id="container"> div id="header"> h1>Exercicesspan class="off">gratuit/span>/h1> h2>Exercices Exercices/h2> /div> div id="menu"> ul> li class="menuitem">a href="#">Home/a>/li> li class="menuitem">a href="#">About/a>/li> li class="menuitem">a href="#">Products/a>/li> li class="menuitem">a href="#">Services/a>/li> li class="menuitem">a href="#">Design/a>/li> li class="menuitem">a href="#">Contact/a>/li> /ul> /div> div id="leftmenu"> div id="leftmenu_top">/div> div id="leftmenu_main"> h3>Links/h3> ul> li>a href="#">SEO/a>/li> li>a href="#">PHP/a>/li> li>a href="#">Ajax/a>/li> li>a href="#">jQuery/a>/li> li>a href="#">Web design/a>/li> li>a href="#">Web Programming/a>/li> li>a href="#">Content Creation/a>/li> li>a href="#">Internet Marketing/a>/li> li>a href="#">XHTML Templates/a>/li> /ul>/div> div id="leftmenu_bottom">/div> /div> div id="content"> div id="content_top">/div> div id="content_main"> h2>You may use this template in any manner you like. All I ask is that you leave the link back to my site at the bottom of the page. /h2> p>/p> p>/p> h3>Template Notes/h3>p>/p> /div> div id="content_bottom">/div> div id="footer">h3>a href="#">florida web design/a> | a href="#">web tutorials/a> | a href="#">html codes/a> | a href="#">free templates/a>/h3>/div> /div> /div>/body>/html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218body { margin: 0; padding: 0; text-align: left; font: 12px Arial, Helvetica, sans-serif; font-size: 13px; color: #061C37; background: #FACFCF; background-image:url(images/background.png); background-repeat:repeat-x;}*{ margin: 0 auto 0 auto; text-align:left;}#container{ display: block; height:auto; position: relative; width: 960px;}#header{height:85px;width:960px; }#header h1{ position:absolute;text-align:left;color:#FFFFFF;font-size:43px;color:#FFF; left:14px;top:18px;}#header h2{position:absolute;text-align:right;color:#FFD5D5;left:490px;top:38px;width:400px;}#mainpic{background-image:url(images/main.jpg);background-repeat:no-repeat;width:900px;height:354px; }.off{color:#300;}#menu{display:block;float:left;clear:both;width:960px;height:54px;float:left;clear:both;}#leftmenu{margin-top:15px;width:204px;float:left;}#leftmenu_top{width:204px;height:13px;background-image:url(images/leftmenu_top.png);}#leftmenu_bottom{width:204px;height:13px;background-image:url(images/leftmenu_bottom.png);}#leftmenu_main{width:204px;height:auto;background-color:#420000;}#leftmenu_main ul{list-style: none;padding: 0px;width:204px;}#leftmenu_main h3{list-style: none;padding: 0px;width:204px;color:#FFFFFF;padding-left:10px;padding-bottom:14px;}#leftmenu_main ul li{list-style: none;padding: 0px;width:204px;text-align:left;}#leftmenu_main ul li a, #leftmenu_main ul li a:visited{ display:block;list-style: none;padding: 0px;width:192px;padding-left:12px;padding-top:4px;height:30px;text-align:left;background-image:url(images/leftmenu_link.png);background-repeat:repeat-x;margin-top:5px;color:#FFFFFF;text-decoration:none;font-size:15px;font-weight:bold;}#leftmenu_main ul li a:hover{color:#EED7D7; }#content{display:block;float:left;width:689px;height:auto;padding-left:10px;padding-top:15px;padding-right:10px;padding-bottom:5px;}#content_top{ background-image:url(images/main_top.png); background-repeat:no-repeat; width:689px; height:23px;}#content_main{background-image:url(images/main_back.png);background-repeat:repeat-y;width:659px;padding-left:15px;padding-right:15px;}#content_bottom{background-image:url(images/main_bottom.png);background-repeat:no-repeat;width:689px;height:23px;}#footer{width:inherit;height:auto;}#footer h3 a,#footer h3 a:visited{display:inline;text-align:center;font-size:12px;text-decoration:none;color:#FFF;}#menu ul { list-style: none; padding: 0px; margin-left:auto; width:960px;}#menu li { list-style: none; padding: 0px; display: inline; }#menu a { float: left; height: 36px; display: block; text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; padding-top: 18px; font-size: 15px; padding-left:13px; padding-right:13px;}#menu a:hover{ background-image:url(images/link_background.png); background-repeat:repeat-x;}#content p{ }html, body {text-align: center;}p {text-align: left;}

Exercice HTML: Tableaux

Réaliser le tableau ci-dessous :

  • celui-ci doit être centré dans la page et occuper le 80% de la largeur de la fenêtre du navigateur
  • largeur des bordures: 10 pixels (attribut CELLSPACING=); épaisseur de l'ombrage: 3 pixels (attribut BORDER=); détachement du texte par rapport aux bords: 5 pixels (attribut CELLPADDING=)
  • la première colonne doit faire 80 pixels de large, les 2 autres se partageant le reste de la largeur
  • dans les 2 premières lignes d'en-tête et dans la première colonne, le texte doit être en gras et souligné ; dans les autres cellules, il doit être en style normal et justifié à gauche
  • réaliser alignement du texte "Xxxxx" au haut de la cellule, alignement du texte "Yyyyy" au bas de la cellule
  • définir couleurs de fond
  • placer une légende au bas du tableau
  • les balises , , sont facultatives, mais il vaut mieux les mettre

Nnnnnn

Aaaaaaaaaaaaa

Bbbbbbbb

Cccccccc

Un

Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

Xxxxx

Deux

Yyyyy

Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

Tableau 1 : abc def ghi jkl mno pqr stu vwx yz.

1234567891011121314151617181920212223CENTER>TABLE BGCOLOR="SILVER" WIDTH="80%" CELLSPACING="10" BORDER="3" CELLPADDING="5">CAPTION ALIGN="BOTTOM">B>Tableau 1/B> : abc def ghi jkl mno pqr stu vwx yz./CAPTION>TR BGCOLOR="RED" > TH ROWSPAN="2" WIDTH="80">Nnnnnn/TH> TH COLSPAN="2">Aaaaaaaaaaaaa/TH>/TR>TR BGCOLOR="GRAY"> TH WIDTH="40%">Bbbbbbbb/TH> TH WIDTH="40%">Cccccccc/TH>/TR>TR> TH BGCOLOR="GRAY">Un/TH> TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla/TD> TD VALIGN="TOP">Xxxxx/TD>/TR>TR> TH BGCOLOR="GRAY">Deux/TH> TD VALIGN="BOTTOM">Yyyyy/TD> TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla/TD>/TR>/TABLE>/CENTER>

Exercice HTML: TP HTML et feuilles de style externe

1) Ecrire le code HTML et CSS qui permet de réaliser le tableau suivant:



2) Ecrire le code HTML et CSS "externe" qui permet de réaliser la page suivante:


 
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283841)HTML HEADlink rel="stylesheet" type="text/css" href="exe1.css" /HEAD BODY TABLE TR TDA /TD TDB /TD TDC /TD /TR TR TDA1 /TD TDB1 /TD TDC1 /TD /TR /TABLE /BODY/html----------------------------------------------------------------------------CSS:table { border:2px solid black; margin:auto; } td, tr{ border:1px solid #f02485; text-align:center; width:150px; height:50px; vertical-align:middle; text-align:center;} ------------------------------------------------------------------------------2)htmlheadlink rel=stylesheet type="text/css" href="test7.css"bodyH1Le titre EMest/EM important !/H1brp les feuilles de styles/pbrp css /p/body/html-------------------------------------------------------------------------------CSS:BODY { color: black; background: url('/2.gif') white;}p {color:blue;font-family=arial;font-size:18;}
Article publié le 10 Janvier 2012 Mise à jour le Jeudi, 15 Décembre 2022 20:29 par BENKIRANE Fatima Ezzahra