Contenu | Recherche | Plan du site | Accessibilité

Org #!/bin/libre

Actualités Documentation Projets Services Debian Staff A propos

WebDev LiborDocs

html easy - Les bases d'une page web

Introduction

Pour écrire une page html il ne vous faut d'un simple éditeur de texte pour la réalisation, tel que gedit, leafpad, bluefish, amaya, emacs, etc, pour GNU/Linux et pour windows le bloc note ou notpad fera bien l'affaire. Il existe de simple éditeurs de texte qui vous colorie les balises, ce qui est bien pratique.

Votre navigateur web servira à voir votre travail en direct.

La page sera en html 4.01 DTD Strict, ce choix permet de rapidement transformer le code en Xhtml 1.0 Strict ou de le passer en transitional en changeant simplement la doctype. Pour commencer clairement il n'y aura pas de style, nous en lui donnerons plus tard avec une feuille de style css.

Nous allons créer un document conforme aux normes et validé par le W3C, avec une structure logique.

Le but de l'exercice se nomme html easy (html facile).

Valid HTML 4.01 Strict

Commencer la création d'easy html

Créer un nouveau fichier avec l'extension .html afin d'y mettre votre code pour qu'il soit reconnu par les navigateurs comme tel.

Une page nommée index.html conviendra bien pour une première page car c'est la page affichée en premier quand le serveur accède à un répértoire. La plus par des pages d'accueil des sites web se nomment ainsi.

Déclaration du type de document

Cela défini le type, la dtd, la version du code, etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ouverture de la balise html, insertion de la balise head et ouverture de la balise body

On ouvre le document html on définit la direction et la langue. La balise head est invisible depuis les navigateurs, c'est l'en-tête du document. Elle renseignent sur différent choses, la liste peut être longue. On peut même y insérer des liens, les meta tag servent aussi aux moteurs de recherche, pour cela il faut bien renseigner les lignes "description" et "keywords" (mots clés). La balise title donne un titre à la page et, on ouvre encore la balise body (le corps du document).

<html dir="ltr" lang="fr-ch">
<head>
	<title>html easy 4.01 DTD Strict</title>
	<meta http-equiv="content-type" content="text/html; windows-1251">
	<meta name="description" content="créer une simple page html pour le web">
	<meta name="keywords" lang="fr-ch" content="écrire une page html éditer">
</head>
<body style="direction: ltr;">

Le titre principale

Balise h1 pour le titre principale de la page.

<h1>html easy 4.01 DTD Strict.</h1>

Un sous titre

Balise h2 pour suivre la logique du document.

<h2>La publication sur le web.</h2>

Un petit paragraphe et un lien hypertexte

Mettre son texte dans un paragraphe avec la balise <p> </p> permet une bonne structure de la page et une facilité d'accès aux navigateurs texte tel que lynx, car il passe de paragraphe en paragraphe en tapant sur la bar de tabulation. A la fin on met un lien pour aller au howto html.

<p>Voici le premier paragraphe. De mettre son texte dans un paragraphe 
permet une bonne structure de la page et une facilité d'accès aux navigateurs 
texte tel que lynx, car il passe de paragraphe en paragraphe en tapant la bar 
de tabulation.</p>
<p><a href="/docs/webdev/html-easy.php">
Aller au howto html easy.</a></p>

Le logo du W3C

Mettons encore le logo de valid HTML 4.01 du W3C, et le lien de validation de la page. Ce qui nous permettra de valider et de corriger les éventuelles erreures, pour la suite de la construction de notre page.

<p><a rel="nofollow" href="http://validator.w3.org/check?uri=referer"><img
	src="http://www.w3.org/Icons/valid-html401"
	alt="Valid HTML 4.01 Strict" title="Page validée HTML 4.01 Strict" 
	style="border: 0pt none ;" height="31" width="88"></a></p>

Fin de la base du document

Et voilà on ferme les balises body et html que l'on a ouverte au début du document.

</body>
</html>

C'est terminé, vous pouvez ouvrir votre navigateur et admirer le résultat, vous devriez aussi pouvoir faire un clique de droite sur la page et "ouvrir avec" afin de sélécté votre navigateur web préféré.

Vous pouvez aussi voir html easy directement.

Nous mettons ici le code complet de la page. Un copier coller devrais aussi faire l'affaire afin de gagner un peu de temps.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="fr-ch">
<head>
	<title>html easy 4.01 DTD Strict</title>
	<meta http-equiv="content-type" content="text/html; windows-1251">
	<meta name="description" content="créer une simple page html pour le web">
	<meta name="keywords" lang="fr-ch" content="écrire une page html éditer">
</head>
<body style="direction: ltr;">
<h1>html easy 4.01 DTD Strict.</h1>
<h2>La publication sur le web.</h2>
<p>Voici le premier paragraphe. De mettre son texte dans un paragraphe 
pemet une bonne structure de la page et une facilité d'accès aux navigateurs 
texte tel que lynx, car il passe de paragraphe en paragraphe en tapant la bar 
de tabulation.</p>
<p><a href="/docs/webdev/html-easy.php">
Aller au howto html easy.</a></p>
<p><a rel="nofollow" href="http://validator.w3.org/check?uri=referer"><img
	src="http://www.w3.org/Icons/valid-html401"
	alt="Valid HTML 4.01 Strict" title="Page validée HTML 4.01 Strict"
	style="border: 0pt none ;" height="31" width="88"></a></p>
</body>
</html>

Quelques liens

haut de la page