Pour votre progression, c'est très important de finir le TP précédent avant de commencer celui-ci.
Placez vous dans la salle de TP à coté des autres personnes de votre groupe, pour pouvoir travailler ensemble.
Dans ce TP, nous allons
Commençons par quelques révisions.
Indiquez les balises correspondantes.
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
CSS:
p
{
border: 1px solid black;
}
Affichage:
Que faut-il écrire à la place de XXXX dans le CSS suivant:
p
{
border: 1px solid black;
XXXX
}
pour obtenir l'affichage suivant:
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
CSS:
p
{
border: 1px solid black;
}
Affichage:
Que faut-il écrire à la place de XXXX dans le CSS suivant:
p
{
border: 1px solid black;
XXXX
}
pour obtenir l'affichage suivant:
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
CSS:
p
{
border: 1px solid black;
}
Affichage:
Que faut-il écrire à la place de XXXX dans le CSS suivant:
p
{
border: 1px solid black;
XXXX
}
pour que le texte « bonjour » soit centré au milieu du paragraphe, comme ceci:
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
CSS:
p
{
border: 1px solid black;
}
Affichage:
Que faut-il écrire à la place de XXXX dans le CSS suivant:
p
{
border: 1px solid black;
width: 150px;
XXXX
}
pour que tout le paragraphe soit centré au milieu de la page, comme ceci:
(écrivez la réponse en une seule ligne)
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
CSS:
p
{
border: 1px solid black;
}
Affichage:
Que faut-il écrire à la place de XXXX dans le CSS suivant:
p
{
border: 1px solid black;
XXXX
}
pour obtenir l'affichage suivant:
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
CSS:
p
{
border: 1px solid black;
}
Affichage:
Que faut-il écrire à la place de XXXX dans le CSS suivant:
p
{
border: 1px solid black;
XXXX
}
pour obtenir l'affichage suivant:
(inventez les informations qui vous manquent)
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
CSS:
p
{
border: 1px solid black;
}
Affichage:
Que faut-il écrire à la place de XXXX dans le CSS suivant:
p
{
border: 1px solid black;
XXXX
}
pour obtenir l'affichage suivant:
Quand un élément (ici l'image) a « position: absolute », il n'affecte plus du tout le positionnement des autres éléments ou texte autour. Il s'affiche donc « par-dessus » ou « par-dessous » les éléments l'entourant.
Tout seul « position: absolute » n'est pas très utile. Par contre, une fois qu’un élément est « position: absolute », on peut le déplacer facilement avec les propriétés « top, left, right, bottom »:
Vous rencontrez le formulaires partout sur le web.
Ils servent à envoyer des informations du navigateur vers le serveur.
Cet exemple simple affiche une boite pour taper du texte (1) et un bouton (2).
Quand l'utilisateur appuie sur le bouton (2), le navigateur envoie le texte tapé dans (1) au serveur.
La page appelée sur le serveur est « exemple.php », elle est donnée par l'attribut "action" de <form>.En général la page est un programme (ici dans un langage appelé le PHP) qui va recevoir les informations et les traiter.
L'attribut « method » peut être « get » ou « post ».
Vous verrez le traitement des formulaires en PHP au 3e semestre. Pour l'instant on va juste les afficher.
HTML:
<form method="get" action="...">
<ul>
<li>input/text: <input type="text" name="abc"/></li>
<li>input/checkbox: <input type="checkbox" name="def"/></li>
<li>select:
<select name="ghi">
<option>bla bla</option>
<option>bli bli</option>
</select>
</li>
<li>textarea:<br/><textarea name="ghi"></textarea></li>
</ul>
</form>
Essayez de retenir les balises précédentes.
Au TP-4 vous avez travaillé sur la page d'accueil de votre projet de site web.
Avant de passer aux autres pages:
Si ce n'est pas encore fait, finissez de réfléchir à l'architecture générale de votre site (menus, rubriques, pages...).
Vous devez réaliser complètement au moins 4 pages en plus de la page d’accueil.
Les autres pages (en plus des 4) doivent être crées et reliées au reste du site, mais peuvent être remplies par du faux texte et des images type : seuls les titres des blocs de texte, les légendes des images, l’intitulé des formulaires permettront de s’y repérer.