coincoins

HTML : 1- les bases

TechCréer sa première page (travail guidé)

Créer le fichier "index.html" dans le répertoire de travail et l'ouvrir avec notepad++.

Comme une page web possède une structure composée de deux espaces, la tête (head) et le corps (body) de la page, qui encadre le texte brut.

Ainsi, on aura le code générique suivant :

Source type d'une page (html5)
<!DOCTYPE HTML >
<html>
  <!-- Entête de service, non affiché -->
    <head>	
    <title>Titre de la page (apparaît dans l'onglet du navigateur)</title>
 
      <meta charset="UTF-8" />			<!-- Codage des caractères (!accents) -->
      <link href="style.css" rel="stylesheet" type="text/css" /> <!-- style de mise en forme -->
    </head>
 
    <!-- Corps de la page, affiché -->
    <body>
      ... le code affiché de la page : Hello world ;-)
    </body>
</html>

La tête (head) contient des balises de service comme le titre de la page, l'encodage de la page - pour afficher correctement les caractères - et le lien vers la feuille de style css. Il y en a d'autres, hélas.

Le corps (body) contient le contenu affiché de la page. Cette structure est universelle et doit toujours figurer dans les pages web. Ainsi, vous la rédigez une fois et vous la recopiez à chaque page ... un informaticien aime faire du copier/coller ;D

Notez la DTD (Doctype) en tête de document. Elle sert à valider la syntaxe utilisée dans le document (ici : HTML et non du XML, /exemple).

Maintenant que c'est dit, on ne reviendra plus dessus.

Exercice : Créez une page web et copiez-y le code ci-dessus. Ajoutez un texte (bidon) dans le corps (/exemple : Hello World) et ouvrez le fichier avec un navigateur.

Bravo, vous avez fait votre première page web ! Bon, d'accord, c'est moche mais c'est une page web. Alors ...

Extension : utiliser les balises de base pour mettre en forme du texte.

TechDonnons de la structure aux pages

Tout d'abord, il faut réfléchir à la façon dont on va construire l'organisation de notre page : Entête, titre, articles, menu, etc. ...
Vous avez tout intérêt à construire une maquette de site, croquis à main levée de votre site.
Allez voir sur le net : "maquette de site", vous en trouverez des exemples par saladiers pleins.
Pour pour notre exemple, nous utiliserons la maquette, déjà assez sophistiquée et compliquée, ci-contre (click droit et afficher l'image pour agrandir) :

La structure est donnée par les balises :

BaliseExplication
navMenu, espace où on trouve des liens de navigation dans le site
Il existe aussi une balise menu
headerTitre d'entête dans une page, une section ou un article
footerTexte de pied de page, de section ou d'article
mainConteneur principal de la page
articleContient secondaite du texte à propos d'un thème.
sectionConteneur tertiaire. Permet de faire des sous parties dans un article
asideConteneur en parallèle à main mais placé sur le côté (colonne) à droite ou à gauche. contient parfois un second menu (nav)
divConteneur banalisé, son identifiant ou sa classe de style donnent des indications sur son rôle
ulListes à puce. Très utilisées pour les items des menus.

La mise en forme de la page se fait avec une feuille de style qui définit l'apparence de ces différents conteneurs
Article/section : Il est possible d'inverser ces deux rôles mais ce n'est pas conseillé. Voir : Mozilla/html/article.

Voici le code associé (en gris : du code de remplissage, pas important pour l'instant):

Code générique de la structure proposée (de body à /body exclus)
  • <nav> <!-- Barre de navigation : menu -->
    • <ul> <!-- DEBUT du menu -->
      • <li> <a href="menuItem1.html">texte item1</a> </li>
      • <li> <a href="menuItem2.html">texte item2</a> </li>
      </ul><!-- FIN du menu -->
      •  
    • <div id="login"><!-- DEBUT du formulaire de login -->
      • <form name="login" action="login.php" >
        • <ul>
          • <li> <input type="text" name="idUtilisateur" /> </li>
          • <li> <input type="password" name="motDePasse" /> </li>
          • <li> <input type="submit" name="go" value="GO" / > </li>
        • </ul>
        </form>
      </div><!-- FIN du formulaire de login -->
    </nav><!-- FIN Barre de navigation : menu & login -->
    •  
  • <header id="titre" > <div id="logo"><img src="images/logo.png" /></div> Titre de la page</header>
    •  
  • <main><!-- DEBUT Structure de la page -->
    • <aside id="aGauche">
      • Contenu de Aside flottant de Gauche : div id=menuLocal, div id=infoLegales, ...
      </aside>
      •  
    • <aside id="aDroite">
      • Contenu de Aside flottant de Droite : div id=news, ...
      </aside>
      •  
    • <div id="corpsPage"> <!-- DEBUT de l'espace central -->
      • <article id="article1"><!-- DEBUT article 1 -->
        <header>Titre article 1</header>
        • <section id="section1.1"> <header>Titre section 1</header> <p>Texte section 1</p> <footer>Pied section 1</footer> </section>
        • <section id="section1.2"> <header>Titre section 2</header> <p>Texte section 2</p> <footer>Pied section 2</footer> </section>
        </article><!-- FIN section 1 -->
        •  
      • <article id="section2"><!-- DEBUT article 2 -->
        • <section id="section2.1"> <header>Titre section 2</header> <p>Texte section 2</p> <footer>Pied section 2</footer> </section>
        </article><!-- FIN section 2 -->
      </div><!-- FIN de l'espace central -->
    </main><!-- FIN de la page -->
    •  
  • <footer id="piedDePage">(C) 2014 http://127.0.0.1</footer><!-- Pied de page -->

Remarquer l'encadrement des blocs qui forment la maquette de la page.

Les textes en blanc sont ceux que vous écrivez vous-même, le reste de la structure est classique d'une page web et vous pouvez la copier sans prob'.

Exercice : Complétez la structure de votre page web en y insérant celle vue ci-dessus. Ajoutez un texte (bidon ou bidon ou bidon) dans les articles ou sections, ajoutez des balises de mise en forme, testez.
Mouais, ok. C'est toujours moche mais c'est une page web structurée ... même si on ne voit pas (encore) la structure. Alors, mettez-y du style !

TechTables et tableaux, structurer les données
Exemple 1 - table simple 3X3
h1 h2 h3
l2c1 l2c2 l2c3
l2c1 l2c2 l2c3
l3c1 l3c2 l3c3

Exemple 2 - table avec fusion de ligne et de colonnes (voir source)
h1 h2 h3 h4
l2c1 l2c2+c3+c4
l3+l4c1 l3c2 l3c3 l3c4
l4c2 l4c3 l4c4
l5 colonnes fusionnées

Pour structurer les données, on utilise très souvent des tables.

Le principe est simple, une table (table) est un ensemble de lignes (table row), chaque ligne est divisée en cellules de données (table data).
on peut mettre n'importe quoi dans une cellule : du texte, des balises html et des tables imbriquées.

Le navigateur se charge d'aligner les cellules pour faire le tableau.

Voyons ci-contre 2 exemples de tables et le code correspondant à l'exemple 2 ci-dessous (les couleurs correspondent aux couleurs dans l'encart) :

  • <table border=1 >
    • <caption>Exemple 2</caption>
    • <tr> <!-- Ligne 1, entêtes de colonnes (th au lieu de td) -->
      • <th>L1H1</th> <th>L1H2</th> <th>L1H3</th> <th>L1H4</th>
      </tr>
    • <tr> <!-- ligne 2 -->
      • <td>L2C1</td>
      • <td colspan=3 >L2C2+C3+C4</td> <!-- Fusion de 3 cellules -->
      • <td>L2C3</td><!-- Cellule fusionnée avec L2C2, le code n'est pas écrit -->
      • <td>L2C4</td><!-- Cellule fusionnée avec L2C2, le code n'est pas écrit -->
      </tr>
    • <tr><!-- Ligne 3 -->
      • <td rowspan=2>L3+L4C1</td> <!-- Fusion verticale de 2 cellules -->
      • <td>L3C2</td>
      • <td>L3C3</td>
      • <td>L3C4</td>
      </tr>
    • <tr> <!-- Ligne 4 -->
      • <td>L4C1</td><!-- Fusion verticale (rowspan) avec L3C1 -->
      • <td>L4C2</td>
      • <td>L4C3</td>
      • <td>L4C4</td>
      </tr>
    • <tr><!-- Ligne 5 -->
      • <td colspan="100%">L5, 100% des colonnes fusionnées/td> <!-- fusion horizontale de 100% des cellules -->
      • <td>l5c1</td> <td>l5c2</td> <td>l5c3</td> <td>l5c4</td><!-- fusion avec l5c1 -->
      </tr>
    </table>

Note : les cellules affichées en gris montrent celles qui sont supprimées par les fusions, elle ne doivent pas être écrites dans le code.