TDM Technologies Web HTML et CSS - Plateforme e

TDM Technologies Web
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 peuvent ne pas être conformes sans CSS.
2. Allez sur http://www.csszengarden.com/tr/francais/ pour trouver des exemples de CSS.
3. Créez et appliquez une même feuille de style CSS à vos deux pages afin 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 >
< header id= " top " >
< img id= " logo " src= " logo-asi . png " alt= " ASI " width= "125" height= "58" / >
< h1 > Forum ASI < / h1 >
< / header >
< p id= " probleme " > < / p >
< form name= " formulaire " action= " mailto : Alexandre . P a u c h e t @ i n s a - r o u e n . 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 ASI < / title >
< meta http-equiv= " Content-Type " content= " text / html ; charset=utf-8 " >
< link href= " style . css " rel= " stylesheet " type= " text / css " / >
< / head >
< body >
< header id= " top " >
< img id= " logo " src= " logo-asi . png " alt= " ASI " width= "125" height= "58" / >
< h1 > Forum ASI < / h1 >
< / header >
< 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= " text " 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 >
< 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 ;
b a c k g r o u n d - c o l o r : grey ;
color : white ;
}
label {
width : 150 px ;
display : block ;
float : left ;
}
label . labelradio , label [ for=copie ] { /* les labels de radio ne peuvent pas être en block
sinon , c ’ est moche ! */
display : inline ;
float : none ;
margin-right :20 px ;
}
h1 {
font-size :24 px ;
}
input [ type=submit ] , input [ type=reset ]{
b a ck g r o u n d - c o l o r : green ;
color : white ;
margin-top : 20 px ;
font-size :16 px ;
weight : bold
}
2
Sélecteur de CSS
Dans le fichier 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 modifier le code HTML du fichier.
Optionnel : entraînez-vous à utiliser les sélecteurs à l’aide du jeu sérieux http://flukeout.github.io/.
Correction
selecteur1.hml
< style >
div>div>h2 { b a c k g r o u n d - c o l o r : yellow ;}
< / style >
selecteur2.hml
< style >
body>h2 { b a c k g r o u n d - c o l o r : yellow ;}
< / style >
selecteur3.xhml
< ! DOCTYPE html >
< html >
< head >
< meta http-equiv= " Content-Type " content= " text / html ; charset=utf-8 " >
< title > Sélecteurs < / title >
< style >
h2 + h2 { b a c k g r o u n d - c o l o r : yellow ;}
< / style >
< / head >
< body >
< h2 > Test sélecteur < / h2 >
< div >
< h2 > Titre p1 < / h2 >
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Vivamus nisl urna , vestibulum a
ullamcorper ut ,
mattis sit amet lectus . Etiam egestas urna massa , ut egestas sapien auctor eget . In
hendrerit vitae massa
ac commodo . Cras at ultricies sem , a tempus metus . Praesent tincidunt purus turpis , ut
facilisis nulla rhoncus
quis . Vivamus congue adipiscing felis ut vulputate . Etiam malesuada fermentum nisl ac
imperdiet . Fusce consectetur
< / div >
< div >
< h2 > Titre p2 < / h2 >
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Vivamus nisl urna , vestibulum a
ullamcorper ut ,
mattis sit amet lectus . Etiam egestas urna massa , ut egestas sapien auctor eget . In
hendrerit vitae massa
ac commodo . Cras at ultricies sem , a tempus metus . Praesent tincidunt purus turpis , ut
facilisis nulla rhoncus
quis . Vivamus congue adipiscing felis ut vulputate . Etiam malesuada fermentum nisl ac
imperdiet . Fusce consectetur
< div >
< h2 > Titre p2bis < / h2 >
nulla ut sapien elementum pretium . Proin dui metus , laoreet id sem at , tempus placerat sem .
Fusce vel vestibulum lacus ,
sed fringilla elit . In lobortis quis nunc eget egestas . Integer odio neque , rhoncus vitae
adipiscing sit amet , aliquet
eget nisi . Phasellus a ipsum accumsan enim consequat cursus . Quisque varius , nulla sed
faucibus lacinia , mauris eros
tempor dolor , sit amet dictum odio ipsum in sem . Phasellus porta nunc id semper malesuada .
< / div >
< / div >
< div >
< h2 > Titre p3 < / h2 >
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Vivamus nisl urna , vestibulum a
ullamcorper ut ,
mattis sit amet lectus . Etiam egestas urna massa , ut egestas sapien auctor eget . In
hendrerit vitae massa
ac commodo . Cras at ultricies sem , a tempus metus . Praesent tincidunt purus turpis , ut
facilisis nulla rhoncus
quis . Vivamus congue adipiscing felis ut vulputate . Etiam malesuada fermentum nisl ac
imperdiet . Fusce consectetur
< h2 > Titre p3bis < / h2 >
nulla ut sapien elementum pretium . Proin dui metus , laoreet id sem at , tempus placerat sem .
Fusce vel vestibulum lacus ,
sed fringilla elit . In lobortis quis nunc eget egestas . Integer odio neque , rhoncus vitae
adipiscing sit amet , aliquet
eget nisi . Phasellus a ipsum accumsan enim consequat cursus . Quisque varius , nulla sed
faucibus lacinia , mauris eros
tempor dolor , sit amet dictum odio ipsum in sem . Phasellus porta nunc id semper malesuada .
< / div >
< / body >
< / html >
3
Positionnement par CSS
En utilisant le fichier 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 flottant, 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 modifier le code HTML fourni, mais uniquement ajouter du code CSS.
Correction
Positionnement-absolu.hml
< ! 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-flottant.hml
< ! 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.hml
< ! 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.hml
< ! 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 ;
b a ck g r o u n d - c o l o r : 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 ;
z-index :1;
}
# d2 {
position : absolute ;
top : 125 px ;
left : 125 px ;
z-index :2;
}
# d3 {
position : absolute ;
top : 175 px ;
left : 50 px ;
z-index :3;
}
# d4 {
position : absolute ;
top : 250 px ;
left : 125 px ;
z-index :4;
}
< / 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érifier vos pages HTML et CSS sur le site du W3C (http://validator.w3.org/).
2. À l’issu de la séance, vous aurez accès à la correction de ce TDM au format PDF.
3. Déposez votre compte-rendu sur moodle sous la forme d’un fichier PDF de 2p. (1 feuille
recto-verso) nommé TDM01-login.pdf, chez chacune des 2 personnes du binôme.