TDM01 Technologies Web 1 HTML Et CSS: Correction
Transféré par
amani sayariTDM01 Technologies Web 1 HTML Et CSS: Correction
Transféré par
amani sayariTDM01 Technologies Web 1
HTML et CSS
ASI4 - INSA Rouen
correction
1 Forum ASI (1)
1. Créez deux pages HTML5 contenant chacune un formulaire permettant
de poster un message pour une personne non loguée;
de s'inscrire au forum ASI.
Ces deux pages contiendront les éléments présents dans les maquettes présentées ci-dessous. Attention,
le positionnement et l'aspect des éléments des formulaires n'ont pas à être conformes sans CSS.
2. Allez sur http://www.csszengarden.com/tr/francais/ pour trouver et tester des exemples de CSS.
3. Créez et appliquez une même feuille de style CSS à vos deux pages a n d'obtenir un rendu visuel le plus
proche possible des captures d'écran fournies.
Correction
post-message.hml
<!DOCTYPE html >
<html >
<head >
<title > Forum ASI </title >
<meta http-equiv= " Content-Type " content= " text / html ; charset=utf-8 ">
<link href= " style . css " rel= " stylesheet " type= " text / css " />
</head >
<body >
<head er id= " top ">
<img id= " logo " src= " logo-asi . png " alt= " ASI " width= " 125 " height= " 58 " />
<h1 > Forum ASI< / h1 >
</head er >
<p id= " probleme "> </p >
<form name= " formulaire " action= " mailto : Alexandre . Pauchet@insa-rouen . fr " method= " post "
enctype= " text / plain ">
<fieldset >
<legend > Coordonnées :</ legend >
<label for= " name "> Nom : </ label > <input placeholder= " Saisissez votre nom " id= " name "
name= " name " type= " text " size= " 30 " / >
<label for= " email "> E-mail : </ label > <input placeholder= " Saisissez votre email " id= "
email " name= " email " type= " text " size= " 30 " />
</ fieldset >
<fieldset >
<legend > Message :< / legend >
<textarea rows= " 4" cols= " 50 "></ textarea >
</ fieldset >
<input type= " submit " value= " Poster le message " />
<input type= " reset " value= " Effacer " />
</ form >
<footer >
</ footer >
</body >
</html >
inscription.hml
<!DOCTYPE html >
<html >
<head >
<title > Formulaire d ' inscription au forum ITI </title >
<meta http-equiv= " Content-Type " content= " text / html ; charset=utf-8 ">
<link href= " style . css " rel= " stylesheet " type= " text / css " />
</head >
<body >
<head er id= " top ">
<img id= " logo " src= " logo . png " alt= " ITI " height= " 50 " />
<h1 > Forum ITI< / h1 >
</head er >
<form action= " GET ">
<fieldset >
<legend > Formulaire d ' nscription< / legend >
<label for= " name "> Nom : </ label > <input placeholder= " Saisissez votre nom " id= " name "
name= " name " type= " text " size= " 30 " / >
<label for= " name "> Prénom : < / label > <input placeholder= " Saisissez votre prénom " id=
" surname " name= " surname " type= " text " size= " 30 " />
<label for= " email "> E-mail : </ label > <input placeholder= " Saisissez votre email " id= "
email " name= " email " type= " email " size= " 30 " />
<hr />
<label > Statut : </ label >
<input type= " radio " id= " enseignant " name= " statut " value= " enseignant " /> <label
class= " labelradio " for= " enseignant " > Enseignant< / label >
<input type= " radio " id= " etudiant " name= " statut " value= " etudiant " /> <label class= "
labelradio " for= " etudiant "> Étudiant< / label >
<br />
<label for= " annee "> Si étudiant , année : </ label >
<select name= " annee " id= " annee ">
<option value= "1"> 1</ option >
<option value= "2"> 2</ option >
<option value= "3"> 3</ option >
<option value= "4"> 4</ option >
<option value= "5"> 5</ option >
</ select >
<br />
<label for= " photo "> Photo :</ label > <input type= " file " name= " maPhoto " id= " photo " />
</ fieldset >
<input type= " submit " />
<input type= " reset " value= " Effacer "/>
</ form >
<footer >
</ footer >
</body >
</html >
style.css
* {
font-family : Arial , Helvetica , sans-serif ;
}
# logo {
float : right ;
}
# top {
width : 500 px ;
}
fieldset {
width : 500 px ;
padding : 10 px ;
margin-top : 10 px ;
border : solid 3 px grey ;
line-height : 2 em ;
}
legend {
border : none ;
padding : 5 px 10 px 5 px 10 px ;
line-height : 1 em ;
background-color : grey ;
color : white ;
}
h1 {
font-size :24 px ;
}
input [ type=submit ], input [ type=reset ]{
width : 160 px ;
background-color : green ;
color : white ;
margin-top : 20 px ;
font-size :16 px ;
weight : bold
}
textarea {
width : 494 px ;
}
label {
width : 80 px ;
display : inline-block ;
float : left ;
}
label [ for=annee ] {
width : 155 px ;
}
label . labelradio , label [ for=copie ] {
/* les labels de radio ne peuvent pas être en block sinon , c ' est moche ! */
display : inline-block ;
float : none ;
margin-right :20 px ;
}
input [ type=text ] , input [ type=email ]{
width : 402 px ;
display : inline-block ;
}
, textarea {
width : 492 px ;
display : inline-block ;
}
2 Sélecteur de CSS
Dans le chier selecteur-modele.html, insérer le bon sélecteur CSS permettant de créer les mises en page
suivante. Vous avez besoin d'un unique sélecteur, et vous ne devez pas modi er le code HTML du chier.
Optionnel : entraînez-vous à utiliser les sélecteurs à l'aide du jeu sérieux http://flukeout.github.io/.
Correction
selecteur1.html
<style >
div > div > h2 { background-color : yellow ;}
</style >
selecteur2.html
<style >
body > h2 { background-color : yellow ;}
</style >
selecteur3.html
<style >
h2 + h2 { background-color : yellow ;}
</style >
3 Positionnement par CSS
En utilisant le chier a-positionner.html, créer le code CSS qui va permettre de réaliser une mise en page
correspondant à l'illustration suivante :
Vous réalisez cet exercice de 3 façons, en utilisant : le positionnement absolu, le positionnement ottant, le
positionnement relatif.
Puis, en vous basant sur le même code HTML, vous réaliserez la mise en page suivante :
NB : vous ne devez pas modi er le code HTML fourni, mais uniquement ajouter du code CSS.
Correction
Positionnement-absolu.html
<!DOCTYPE html >
<html >
<head >
<meta http-equiv= " Content-Type " content= " text / html ; charset=utf-8 ">
<title > Élément à positionner </title >
<style >
div # main {
border : solid 1 px red ;
width :204 px ;
height : 204 px ;
position : absolute ;
top : 50 px ;
left : 50 px ;
}
div
{
border : solid 1 px green ;
width :100 px ;
height : 100 px ;
text-align : center ;
}
# d1 {
position : absolute ;
top : 0 px ;
left : 0 px ;
}
# d2 {
position : absolute ;
top : 102 px ;
left : 0 px ;
}
# d3 {
position : absolute ;
top : 0 px ;
left : 102 px ;
}
# d4 {
position : absolute ;
top : 102 px ;
left : 102 px ;
}
</style >
</head >
<body >
<div id= " main ">
<div id= " d1 "> 1 </div >
<div id= " d2 "> 2 </div >
<div id= " d3 "> 3 </div >
<div id= " d4 "> 4 </div >
</div >
</body >
</html >
Positionnement- ottant.html
<!DOCTYPE html >
<html >
<head >
<meta http-equiv= " Content-Type " content= " text / html ; charset=utf-8 ">
<title > Élément à positionner </title >
<style >
div # main {
border : solid 1 px red ;
width :204 px ;
height : 204 px ;
position : absolute ;
top : 100 px ;
left : 100 px ;
}
div
{
border : solid 1 px green ;
width :100 px ;
height : 100 px ;
text-align : center ;
}
# d1 { float : none ; }
# d2 { float : left ; }
# d3 { float : right ; margin-top : -102px }
# d4 { float : right ; }
}
</style >
</head >
<body >
<div id= " main ">
<div id= " d1 "> 1 </div >
<div id= " d2 "> 2 </div >
<div id= " d3 "> 3 </div >
<div id= " d4 "> 4 </div >
</div >
</body >
</html >
Positionnement-relatif.html
<!DOCTYPE html >
<html >
<head >
<meta http-equiv= " Content-Type " content= " text / html ; charset=utf-8 ">
<title > Élément à positionner </title >
<style >
div # main {
border : solid 1 px red ;
width :204 px ;
height : 204 px ;
position : absolute ;
top : 100 px ;
left : 100 px ;
}
div
{
border : solid 1 px green ;
width :100 px ;
height : 100 px ;
text-align : center ;
}
# d1 {
}
# d2 {
}
# d3 {
position : relative ;
top : -204px ;
left :102 px ;
}
# d4 {
position : relative ;
top : -204px ;
left :102 px ;
}
</style >
</head >
<body >
<div id= " main ">
<div id= " d1 "> 1 </div >
<div id= " d2 "> 2 </div >
<div id= " d3 "> 3 </div >
<div id= " d4 "> 4 </div >
</div >
</body >
</html >
Positionnement-empilement.html
<!DOCTYPE html >
<html >
<head >
<meta http-equiv= " Content-Type " content= " text / html ; charset=utf-8 ">
<title > Élément à positionner </title >
<style >
div
{
border : solid 1 px green ;
width :100 px ;
height : 100 px ;
text-align : center ;
background-color : white ;
}
div # main {
border : solid 1 px red ;
width :275 px ;
height : 400 px ;
position : absolute ;
top : 100 px ;
left : 100 px ;
}
# d1 {
position : absolute ;
top : 50 px ;
left : 50 px ;
}
# d2 {
position : absolute ;
top : 125 px ;
left : 125 px ;
}
# d3 {
position : absolute ;
top : 175 px ;
left : 50 px ;
}
# d4 {
position : absolute ;
top : 250 px ;
left : 125 px ;
}
</style >
</head >
<body >
<div id= " main ">
<div id= " d1 "> 1 </div >
<div id= " d2 "> 2 </div >
<div id= " d3 "> 3 </div >
<div id= " d4 "> 4 </div >
</div >
</body >
</html >
Remarques
1. Pensez à véri er vos pages HTML et CSS sur le site du W3C (http://validator.w3.org/).
2. À l'issue de la séance, vous aurez accès à la correction de ce TDM au format PDF.
3. Déposez individuellement votre compte-rendu sur moodle sous la forme d'un chier PDF
nommé TDM01-login.pdf.
