structure d'une page html

**Hinola** Admin Messages : 20 Date d'inscription : 16/11/2014

Tuto en cour

Voici le code de base que l'on utilisera pour nos pages html ou php.
Pour une description de chacun de ces éléments, je vous conseille cette page :
http://www.alsacreations.com/article/lire/1374-html5-structure-globale-document.html
Très bien expliquée, et suffisamment détaillée.

Code:: <!DOCTYPE html> <html lang="fr"> <head> <title>Accueil</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> </body> </html>

Nous écrirons le code de notre site majoritairement entre les balises body.
Les balises head nous servirons à y insérer le css ou le javascript majoritairement.

La structure d'un site se fait par balises placées de manière hiérarchique:
Les balises on un parent et peuvent avoir plusieurs fils.
body est une balise fille de html, tout comme head.

Le site ressemblera donc à ça :

Code:: <body> <superTitre> </superTitre> <block> <titre>...</titre> <contenu> ... </contenu> </block> <block> <titre>...</titre> <contenu> ... </contenu> <titre>...</titre> <contenu> ... </contenu> </block> </body>

Ce code n'est pas encore utilisable.
Du moins pas dans les normes.
Les balises <titre> et <contenu> ne sont pas reconnues en tant que telle.

Dans notre body, les balises les plus utilisées seront :
<a></a> : le lien hypertexte
<p></p> : un paragraphe
<h1></h1> : un titre, existe aussi <h2></h2><h3></h3>
<div></div> : une division
C'est cette balise qui nous servira à structurer notre site et à le diviser comme l'exemple plus haut.
<span></span> : comme la div mais utilisée généralement pour une ligne de texte ou une portion de texte.

Ces balises peuvent contenir des paramètres qui s'écrivent de cette façon :
<a href="..." id="..." class="..." onclick="..." width=...></a>
id et class seront les plus utiles pour la structure et le design du site.
une classe et une manière de différencier les divisions. Une division pour avoir plusieurs classe et plusieurs divisions peuvent avoir la même classe.
L'id est à peut près pareille, seulement une seule division peut avoir un même id dans une page.
En gros, l'id est donc utilisé pour les éléments uniques et les classes pour les éléments répétitifs.

Voici donc notre structure, écrite dans les normes :

Code:: <body> <div id="superTitre"> </div> <div class="block"> <div class="titre">titre 1.1</div> <div class="contenu"> contenu 1.1 </div> </div> <div class="block"> <div class="titre">titre 2.1</div> <div class="contenu"> contenu 2.1 </div> <div class="titre">titre 2.2</div> <div class="contenu"> contenu 2.2 </div> </div> </body>

Et voila.
il ne reste qu'à mettre ça en couleur et en forme, est c'est avec le css que l'on y arrivera.