ADOPTEUN
DEV #2
Reminder
web =
BASES DU HTML
- Elements
- Attributs
<html> <!-- Racine du document -->
<head> <!-- Déclaration de métadonnées + imports de fichiers (css/js) -->
</head>
<body> <!-- Corps du document -->
<header> <!-- Element -->
<h1>Un titre</h1> <!-- Element -->
</header>
<div>
<img /> <!-- Element -->
</div> <!-- Element -->
</body>
</html>
<html> <!-- Racine du document -->
<head> <!-- Déclaration de métadonnées + imports de fichiers (css/js) -->
</head>
<body> <!-- Corps du document -->
<header class="canal-header"> <!-- Element -->
<h1>Un titre</h1> <!-- Element -->
</header>
<div>
<img src="http://www.canalplus.fr/image.jpg" /> <!-- Element -->
</div> <!-- Element -->
</body>
</html>
BASES DU HTML
pièges à éviter !!!
<!-- BAAAAAAAAADDDD !!!! -->
<div>
<h1>
</div>
</h1>
<!-- GooD ! o// -->
<div>
<h1>
</h1>
</div>
Bien imbriquer ses Elements et ne SURTOUT pas les croiser !
<!-- BAD :-( -->
<div>...<div>
<Div>...</Div>
<!-- GOOD :-) -->
<div>...</div>
<div />Ne pas oublier de :
- fermer ses Elements
- Ne JAMAIS mettre de majuscules
BASES DU CSS
3 types de selectors :
body { // tag selector
font-family : 'Arial';
}
.className { // class selector
text-align : 'center';
}
#id { // id selector
color : 'red';
}On peut faire du cascading :
.className #id { // cascading
color : 'red';
}
// appliqué uniquement aux :
// - tag qui ont l'id #id
// - dans un tag qui a une class .className