Formation HTML / CSS
le validator !!!!
Il faut respecter les règles de syntaxe !
page valide = même sens pour tous les navigateurs
Une page HTML valide est une page qui passe le test du validator (http://validator.w3.org) le principe des balises
balise = limite d’une boîte où l’on peut mettre des choses <balise> chose </balise> à chaque balise ouvrante <balise> …
… on associe une balise fermante </balise>
balises sans contenu : <autrebalise />
<balise attribut1= »valeur » attribut2= »valeur »>…</balise>
commentaire : <!– bla bla bla –>
la strucutre d’une page HTML
<?xml version= »1.0″ encoding= »iso-8859-15″ ?>
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
<html>
<head>
<!– l’en-tête –>
</head>
<body>
<!– le corps –>
</body>
</html>
l’entête
<head> … </head>
informations qui ne seront pas affichées sur la page HMTL
titre de la page : <title>ma page html</title>
informations utilisées par les moteurs de recherche :
<meta name= »description »
content= »Formation HTML » />
le corps
<body> … </body>
informations qui vont s’afficher dans le navigateur
structuration du texte
<p>paragraphe</p>
<hr/> (trait horizontal)
<h1>important</h1>
…
<h6>moins important</h6>
<div>bloc</div>
structuration du texte
les listes non ordonnées :
<ul>
<li>amuse</li>
<li>soir</li>
</ul>
les listes ordonnées :
<ol>
<li>pouquoi</li>
<li>banane</li>
</ol>
structuration du texte
les tables :
<table>
<tr>
<td>1ère ligne, 1ère colonne</td> <td>1ère ligne, 2ème colonne</td>
</tr>
<tr>
<td>2ème ligne, 1ère colonne</td> <td>2ème ligne, 2ème colonne</td>
</tr>
</table>
au fil du texte
Il s’agit de balises qui doivent être contenues dans celles de structuration.
aller à la ligne : <br/>
écrire en italique : <i>…</i>
écrire en gras : <b>…</b>
délimiter une partie du texte : <span>…</span>
les liens :
<a href= »http://via.ecp.fr »>page web</a> <a href= »page2.html »>autre page</a>
<a href= »mailto:perms@via.ecp.fr »>email</a>
les images :
<img src= »ma_photo.jpg » alt= »description » />
une image lien :
<a href= »http://www.perdu.com »>
<img src= »lost.png » alt= »lost » /></a>
<?xml version= »1.0″ encoding= »iso-8859-15″ ?>
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »> <html>
<head>
<title>titre</title>
</head>
<body>
<p>Ceci est un paragraphe</p> <hr/>
<h1>bonjour!</h1>
<h3>moyenjour.</h3>
<h6>mauvaisjour.</h6>
<p>je vais aller
<a href= »http://www.via.ecp.fr »>
rendre visite à via</a>. via c’est bien <img src= »smiley.jpg » alt= »:) » />.</p>
<ul>
<li>un élément</li> <li>un autre élément</li>
</ul>
<ol>
<li>premier élément</li> <li>deuxième élément</li>
</ol>
</body>
</html>
<h1>une table un peu plus compliquée…</h1>
<table border= »1″>
<tr>
<td colspan= »3″>
1ère ligne, 1ère colonne </td>
<td>1ère ligne, 4ème colonne</td>
</tr>
<tr>
<td>2ème ligne, 1ère colonne</td> <td>2ème ligne, 2ème colonne</td> <td>2ème ligne, 3ème colonne</td> <td rowspan= »2″>
2ème ligne, 4ème colonne </td>
</tr>
<tr>
<td colspan= »2″ rowspan= »2″> 3ème ligne, 1ère col </td>
<td>3ème ligne 3ème colonne</td>
</tr>
<tr>
<td>4ème ligne, 3ème colonne</td> <td>4ème ligne, 4ème colonne</td> </tr>
</table>
les CSS ou feuilles de style
CSS : cascading stylesheets
mise en page dans l’entête :
<link href= »style.css » type= »text/css » rel= »stylesheet » title= »blablabla » />
Télécharger le cours complet
