Derniers sujets
test paginationLun 2 Juil - 17:56Hinola
test paginationLun 2 Juil - 17:56Hinola
test paginationLun 2 Juil - 17:56Hinola
test paginationLun 2 Juil - 17:55Hinola
test paginationLun 2 Juil - 17:55Hinola
test paginationLun 2 Juil - 17:55Hinola
test paginationLun 2 Juil - 17:55Hinola
test paginationLun 2 Juil - 17:55Hinola
test paginationLun 2 Juil - 17:54Hinola

Partagez
Aller en bas
avatar
Admin
Messages : 20
Date d'inscription : 16/11/2014
Voir le profil de l'utilisateurhttp://jeuphp.kanak.fr

structure d'une page html

le Sam 14 Fév - 14:33
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.
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum