SNT : pages WEB
Quelques commandes en HTML
Commande Utilité
<html>…</html>
<head>…</head>
<title>…</title>
<link type="text/css"
rel="stylesheet"
href="monstyle.css" />
<body> ….</body>
<br/>
<p>…</p>
<div style="…." >…</div>
<div class="…." >…</div>
<div id="…." >…</div>
1
<span>…</span>
<img src= "…." alt="…."
title="…." style="…." />
<a href="….">….</a>
<ul> ou <ol>
<li>….</li>
<li>….</li>
</ul> ou </ol>
Exemple :
<html>
<head>
<title>Mon onglet</title>
<link type="text/css" rel="stylesheet" href="monstyle.css" />
</head>
<body>
<div id="monfond">
Une phrase<br/>
<div class="rectangle">
Un premier truc avec des propriétés
</div>
<div class="rectangle">
Un second truc avec les mêmes propriétés
</div>
<div id="perso">
Un troisième truc avec les mêmes propriétés spécifiques
</div>
Une autre phrase dans le cadre
</div>
Une autre phrase hors du cadre
</body>
</html>
2
Quelques exemples de mises en forme en CSS
Commande Utilité
color : blue ; color : #1247A1 ;
Mots réservés
Couleur en héxadécimal
background : yellow ; Comme pour color
font-size : 20px ; Taille en pixels
width : 200px ; height : 100px ;
Tailles en pixels
margin : 10px ; margin : 10px auto;
Haut droite bas gauche, en 10 pixels Pour centrer horizontalement
padding : 20px ; Haut droite bas gauche, en pixels
border : 1px solid red ; Epaisseur en pixel, style, couleur
text-shadow : 5px 5px 5px yellow ;
Décalage droite, bas, flou, couleur
box-shadow : 5px 5px 5px yellow ;
idem
3
Exemple de monstyle.css
body{ /* mot réservé */
background:blue;
color:yellow;
}
#monfond{ /* objet unique */
background:white;
color:navy;
width:600px;
height:600px;
margin:10px auto;
padding:20px;
border:1px solid yellow;
border-radius:50px;
}
.rectangle{ /* objet pouvent être réutilisé */
background:pink;
color:green;
width:200px;
margin:10px auto;
padding:10px;
border:1px solid black;
border-radius:10px;
}
#perso{{ /* objet unique */
background:darkblue;
color:white;
width:100px;
margin:10px auto;
padding:10px;
border-radius:10px;
}
4
