Débuter en XHTML et CSS sur Mac OS X

Par Ombre le - Web - Lien permanent

La mise en page HTML peut parfois sembler très obscure pour les personnes désirant se lancer dans la réalisation de leurs site. Je vais essayer dans le présent billet de décrire étape par étape la réalisation d’une page HTML. Certains puristes s’offusqueront des termes ou des méthodes employées mais il s’agit juste de donner envie à monsieur et madame tout-le-monde l’envie de se lancer en suivant les standards et en rendant le site le plus accessible possible. Des liens seront fournis à la fin de ce billet pour celles et ceux qui veulent approfondir le sujet.

Sommaire

  • Démystifions
  • Les principes de base
    • Installation et configuration
    • Un squelette de fichier XHTML
  • L’équipement
  • Mise en œuvre et travaux pratiques

Démystifions

La première fois que l’on aborde un domaine inconnu en informatique, c’est toujours un peu stressant. Si vous avez déjà regardé le code source d’une page HTML vous avez dû, vous aussi, être effrayé par tous ces codes mélangés au texte de la page. Mais pas de panique, il n’est pas nécessaire de les connaître tous pour se lancer, on peut même commencer avec le strict minimum. Explications.

Tout d’abord, ouvrez le programme TextEdit (dossier Applications) livré avec Mac OS X.

Fermez la fenêtre ouverte par défaut et allez dans les réglages pour changer le format par défaut de Format RTF en Format Texte.

Allez dans le menu Fichier, et choisissez Nouveau (Pomme-N). Une nouvelle fenêtre s’ouvrira sans les options de formatage. Taper dans cette fenêtre un texte : Mon nouveau site Web par exemple. Enregistrez le fichier sur le bureau en le nommant index.txt. Le fichier devrait ressembler à ceci :

capture

Renommez le maintenant en index.html, une alerte vous demandera si vous voulez réellement changer l’extension, cliquez sur changer par .html. Si safari est votre navigateur par défaut l’icône du fichier changera comme ceci :

capture

Double-cliquez sur la page, Safari (ou votre navigateur par défaut) se lance et affiche une page Web avec ce magnifique texte : Mon nouveau site Web. Félicitations?! Vous venez de créer votre première page internet?!

Là vous vous dites que jusque là ça n’a l’air pas trop compliqué, en fait les pages HTML sont des bêtes fichiers texte seul que l’on renomme en .html. Oui, mais comment, mettre par exemple, du gras, de l’italique, vu que les boutons de formatage ont disparus?? Et bien renommez votre fichier de nouveau en index.txt et faites les changements suivants par rapport au contenu initial :

Mon <em>nouveau</em> site <strong>Web</strong>

Renommez de nouveau en .html et regardez le résultat : le mot nouveau apparaît bien en italique tandis web apparaît en gras. C’est ainsi que fonctionne le html une <balise> pour ouvrir et une </balise> (en bas-de-casse) pour terminer. Il existe bien d’autres balise que <em> (emphase) et <strong> (forte emphase) mais ceci était juste une introduction… Pour travailler correctement et confortablement, il nous maintenant utiliser un véritable éditeur de texte et non faire du bidouillage avec TextEdit. Nous allons donc utiliser Smultron, un programme gratuit et open-source.

Smultron

Installation et configuration

Téléchargez-le et installez-le. Dans les préférences du programme, allez sur l’onglet ouvrir et enregistrer, puis changer ouvrir et enregistrer par défaut par votre dossier Site (celui se trouve dans votre dossier maison) en cliquant sur le bouton Sélectionner un dossier… puis, dans la rubrique encodage, cliquez sur toujours utiliser et dans le menu popup choisissez Unicode (UTF-8) (voir la capture ci-dessous).

capture

Interface

Dans la colonne de gauche, vous avez les fichiers ouverts et dans la partie principale, l’endroit où vous taperez votre code html.

[image]+plus de description

La base du fichier xhtml

Dans l’exemple donné à taper dans TextEdit en introduction, le code html était assez simple pour ne pas dire simpliste. En effet, un document html de base doit posséder plusieurs élements obligatoire que nous allons détailler plus loin…

Une première structure de base

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
	</head>
	<body>
	</body>
</html>

D’abord, la première ligne que l’on appelle le doctype, cette ligne indique au navigateur à quel type de document il a affaire. En effet, les pages html étant du texte simple, il fallait indiquer au navigateur si on était en html ou xhtml et quelle était la version de celui-ci. Si vous examinez attentivement cette ligne, vous devinerez que nous sommes en présence de xhtml strict et qu’il s’agit de la version 1.0. Mais tout ceci n’est pas vraiment important pour le moment, sachez que cette mention doit obligatoirement se trouver en première ligne et telle quelle, sans changer quoi que ce soit.

Le document xhtml commence vraiment avec la balise <html> et se termine obligatoirement par </html>. Notez que les balises en xhtml s’écrivent toutes en bas de casse. C’est aussi à cet endroit que l’on donne la langue du document (fr pour français, en pour anglais, etc) :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

La langue du document est très importante, pour les moteurs de recharhe mais aussi et surtout pour les personnes malvoyantes lisant vos pages avec une synthèse vocale. Vous remarquerez la partie <html></html> se trouve elle-même subdivisée en deux sous-sections : <head> et <body>.

Le head

C’est dans cette partie, que l’on donnera toutes les informations tehcniques sur le document, celles qui ne conerne pas le contenu en tant que tel mais plutôt : l’encodage de caractère utilisé (ici utf-8), le titre de la page et, plus la tard, les feuilles de tyles CSS. Entre autres. Mais pour l’instant nous allons laisser tout cela en suspend et nous concentrer sur le body.

Le body

La balise <body> c’est l’élémént de base de la page qui sera affiché. C’est dans le body que nous allons placer nos images, nos titres, nos paragraphes, nos listes à puces, nos listes numérotées, etc qui seront visible dans la fenêtre du navigateur.

Il est temps maintenant de mettre du contenu dans ce body.

Du contenu, oui, mais sémantique

 

Commentaires

1. Le par kablumy

Tout simple ce petit tuto. Mais pour le CSS alors ?

2. Le par Ombre

Heu… Je vais m’y mettre, je vais m’y mettre… ;)

3. Le par BOP

C’était si bien parti…!
Encouragements (pas désintéressé, hein !) à continuer.
On a besoin de toi - et je suis sûr de ne pas être le seul !-
Cordialités :-)

4. Le par domi

non en effet: BOP n’es pas le seul :)
en tout cas bonne chance…

5. Le par Ninja kiwi

Tuto très simpas j’ai hâte de voir la suite !!! :D

6. Le par Jean-Louis Cibot

De la part d’un débutant, merci pour cette archive de 2006 : Pour le Mac, elle m’a permis de bien comprendre puis d’appliquer la procédure détaillée du changement d’extension nécessaire ( .text >.html) à réaliser pour un projet de script édité avec Textedit. Le changement manuel auquel je procédais après enregistrement au tout début, ne me permettait de voir dans ma page qu’une copie du script, ce qui n’est pas très intéressant et ce qui me bloquait! Je n’ai pas trouvé cet explication ailleurs. Salutations.

7. Le par Ombre

Et bien… Je ne me doutais pas que ce billet à peine commencé servirait à quelqu’un, bien content d’avoir rendu service. :-)

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.