Bienvenue à ce cours gratuit d'initation à html. Je propose ce cours simple pour initier des personnes ayant quelques notions de base à html.Ce cours dure 45 mn. I se structure comme suit: Une courte partie théorique qui donne des informations générales sur les feuilles de style. Ensuite,je présente une partie pratique qui traite: d'un document de base, des titres et des éléments de texte et des tableaux. Je rajoute quelques données sur le positionnement.
Le design d'un site web évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut reprendre toutes les pages une à une pour modifier une police de caractère ou une couleur de fond. Avec les "Cascading Style Sheet" (CSS), ce lourd handicap est résolu. C'est dans la feuille de style que l'on va déclarer toute la mise en forme des pages:la couleur de fond, les polices de caractère, leurs couleurs, etc. Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément,cela se répercutera immédiatement sur toutes les pages web. Css est donc puissant et pratique. Mais cela ne s'arrête pas là. Outre les couleurs et les polices, on peut aussi changer radicalement l'apparence d'un site en abandonnant la mise en page à l'aide de tableaux. Soyons clair : un tableau sert à présenter des données tabulaires. Pour une mise en page souple et cohérente, on utilisera des "blocs" (appelés aussi "boites" ou "calques"), qui ont l'avantage de pouvoir être déplacés de gauche à droite, ou de haut en bas grâce aux CSS.
Pour vous en convaincre, rendez-vous sur la page d'accueil de mammouthland et testez les différentes mises en pages à disposition grâce au menu déroulant "choisir son habillage" : ce ne sont pas les pages html qui changent, mais uniquement les feuilles de style. Si vous êtes intéressés, voire convaincus, voyez les liens présents en bas du tutoriel sur les tableaux qui vous aideront à créer des pages sans tables.
Et ce n'est pas plus difficile que d'utiliser des tableaux contrairement à ce que certains de mauvaise foi voudraient bien faire croire! Cela dit, même si on utilise un logiciel wysiwyg tel que Dreamweaver, il convient tout de même de connaître quelques balises html, car ce sont celles-ci qui vont être indiquées dans la feuille de style.
<html></html>:document html
<body></body>:corps du document
<h1></h1>:titre 1er niveau
<h2></h2> :titre 2ème niveau
<h3></h3>:titre 3ème niveau (... et ainsi de suite jusqu'à 6)
<p></p>:paragraphe
<ul></ul> :liste à puce
<ol></ol> :liste numérotée
<li></li>:élement d'une liste
<a href=""></a> :lien hypertexte
<table></table> : tableau
<th></th> :légende de ligne ou de colonne
<tr></tr> :ligne du tableau
<td></td> :colonne du tableau
<div></div> : définition de bloc
Exercices pour les apprenants
Author:Thierno Bâ
retour à la page de l'exercice 5