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.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 | html>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
123456789101112131415161718192021222324252627282930313233343536373839404142434445 | html>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 ()
- Fichiers HTML
- Fichiers images
- Fichiers sons
- Fichiers films
- Fichiers test
- Fichiers exemples
12345678910111213141516171819202122232425262728293031323334353637383940 | htmlheadtitleListes 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…
12345678910111213141516171819202122232425262728 | html>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:
12345678910111213141516171819202122232425262728293031323334353637383940414243 | HTML>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
- octobre
- novembre
- dcembre
1234567891011121314151617181920212223242526272829303132 | html>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:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 | HTML> 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:
123456789101112131415161718192021 | Code 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> |
12345678910111213141516171819202122 | Code 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:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 | html 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> |
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 | body { 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. |
1234567891011121314151617181920212223 | CENTER>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:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 | 1)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;} |