html pour débutant

Présentation du cours

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.


Rappel de Quelques données théoriques sur html associé à Css

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.

Partie Pratique:Balises html de base

Document

<html></html>:document html
<body></body>:corps du document

Titres

<h1></h1>:titre 1er niveau
<h2></h2> :titre 2ème niveau
<h3></h3>:titre 3ème niveau (... et ainsi de suite jusqu'à 6)

Éléments de texte

<p></p>:paragraphe
<ul></ul> :liste à puce
<ol></ol> :liste numérotée
<li></li>:élement d'une liste
<a href=""></a> :lien hypertexte

Tableau

<table></table> : tableau
<th></th> :légende de ligne ou de colonne
<tr></tr> :ligne du tableau
<td></td> :colonne du tableau

Positionnement

<div></div> : définition de bloc

Exercices pour les apprenants

Faire une page html simple en y intégrant du css

Fin du cours

Quelques liens et validators

Ressources Stic

Valid XHTML 1.0!

Valid CSS!

Haut de page

Author:Thierno Bâ
retour à la page de l'exercice 5