Temoignages

Se former au code HTML (premiers pas...)

Apprendre pas à pas le principe du code HTML et vous permettre ainsi de faire vos propres pages Web en HTML. Cette fiche s'enrichira peu à peu de toutes les fonctionnalités composant le langage HTML.

Sommaire

Description d'un document html
Pour commencer
Ma première page
Les balises de "ma première page"
Les principales balises HTML

Description d'un document html

Le "html" (HyperText Markup Language) est un langage permettant de mettre en forme du texte, des images, du son, etc, destinés à être visualisés grâce à un navigateur (les plus connus étant Microsoft Internet Explorer , Netscape Navigator)

Ce langage de description de page utilise des marques - ou balises - pour spécifier la façon dont un élément doit apparaître, pour afficher des images ou définir des actions.

Ces marques sont toujours placées entre les signes "<" et ">" et agissent très souvent par paire : la première spécifie le début d'application du style (ou de l'action), la seconde, qui comporte le signe "/", marque la fin d'application du style (ou de l'action).

Attention à ne pas oublier cette marque de fin, car le style ou l'action défini est actif tant que le navigateur ne rencontre pas la marque de fin. Ainsi si vous utilisez une marque "mets un italique" au début de votre document et que vous oubliez la marque "enlève l'italique", tout votre document apparaîtra en italique !

Exemple :le texte en italique

Remarque : les marques peuvent être saisies indifféremment en majuscule ou minuscule, tous les éditeurs de documents, ainsi que les navigateurs, reconnaissent les deux syntaxes, l'utilisation des minuscules ou majuscules est donc un choix personnel.

Pour commencer

Matériel nécessaire

- un navigateur (NetScape, Internet Explorer, ...)
- un éditeur de texte (NotePad,ou Bloc-notes en version française, suffit amplement)
- un espace disque (un répertoire dans lequel se trouvera vos documents HTML)

Compétence nécessaire

Savoir archiver c'est à dire organiser des dossiers et ranger des fichiers.

Méthode proposée

Il est très pratique de travailler avec plusieurs logiciels ouverts :

- votre éditeur de texte (NotePad) pour taper votre code HTML.
(Les utilisateurs de Windows le trouveront en suivant : Démarrer > Programmes > Accessoires > Bloc-notes.)

- votre navigateur (Internet Exploreur et/ou Netscape) pour visualiser votre travail.

Créer un nouveau document

Pour créer un nouveau document HTML, lancez votre éditeur de texte et ouvrez un nouveau document (si le logiciel ne le fait pas automatiquement).

Sélectionnez avec la souris le code HTML ci dessous, copiez-le et collez-le dans votre éditeur de texte.

<HTML>
<HEAD>
<TITLE>Titre de votre document</TITLE>

</HEAD>
<BODY>
Contenu de votre document qui sera affiché dans le navigateur de votre visiteur : vous pouvez placer ici du texte, des images, des sons, des applets java, des scripts ou encore de la video.
<ADDRESS>
Adresse de votre page
Date de création ou de mise a jour
Votre email pour recevoir des commentaires
</ADDRESS>
</BODY>
</HTML>

Entre les balises <TITLE> et </TITLE>, remplacez le texte par le titre que vous souhaitez donner à votre document ("Ma première page", par exemple).

Dans le menu Fichier, choisissez "Enregistrer sous". Choisissez l'endroit où vos souhaitez enregistrer ce fichier (l'idéal étant de créer un dossier ou répertoire où vous regrouperez tout vos fichiers d'exercice HTML).

Nommez le fichier en prenant soin de lui ajouter l'extension ".html" ou ".htm". Pour ceux qui utilisent un éditeur de texte (WordPad par exemple), n'oubliez pas de choisir le format "Texte seulement". Puis validez.

Retournez dans votre navigateur et ouvrez le fichier que vous venez de créer. Pour ce faire, cliquez sur Fichier>Ouvrir>Parcourir et retrouvez le répertoire dans lequel se trouve votre fichier.

Alors dans votre navigateur, seuls les textes "contenu de votre document..." et "Adresse de votre page..." s'affichent.

En observant la barre de titre de la fenêtre du navigateur, vous pouvez voir que le texte que vous avez entré entre les balises <TITLE> et </TITLE> sert de titre à votre document.

Plus tard, pour modifier le contenu de votre fichier HTML, retournez dans l'éditeur de texte, modifiez le et enregistrez le fichier avant de le recharger dans votre navigateur.

Pour que les modifications apportées dans vos fichiers HTML soient prises en compte dans votre navigateur, il vous faut donc à chaque fois ouvrir le fichier à partir du menu Fichier de votre navigateur.
Une autre possibilité s'offre cependant à vous : utiliser le bouton "Rafraîchir" ou "Recharger" de votre navigateur (dans le menu de votre navigateur cliquez sur Affichage>"Rafraîchir" ou "Recharger") ou encore la touche F5.
Vous êtes maintenant prêt pour créer vos propres documents HTML.

Ma première page

Nous allons maintenant détailler cet exemple et voir la signification des balises qui y sont présentes.

Tout document HTML possède deux parties : un en-tête (l'élément <HEAD>) et un corps (l'élément <BODY>). Le tout - en-tête et corps - est encadré par les balises <HTML> et </HTML>. Elles indiquent au navigateur qu'il s'agit de code HTML.

<HTML>
<HEAD>
<TITLE>Titre de votre document</TITLE>

</HEAD>
<BODY>
Contenu de votre document qui sera affiché dans le navigateur de votre visiteur : vous pouvez placer ici du texte, des images, des sons, des applets java, des scripts ou encore de la vidéo.
<ADDRESS>
Adresse de votre page
Date de création ou de mise a jour
Votre email pour recevoir des commentaires
</ADDRESS>
</BODY>
</HTML>

Les balises de "ma première page"

L'en-tête du document : <HEAD>

Les éléments contenus dans l'en-tête du document, délimité par les balises <HEAD> et </HEAD>, ne sont pas affichés dans le navigateur internet, à l'exception du contenu de l'élément <TITLE>.

Le titre du document : <TITLE>

Ce sont les balises <TITLE> et </TITLE> qui permettent de donner un titre à vos documents. Le contenu de ces balises apparait dans la barre de titre de la fenêtre du navigateur.

Cet élément est obligatoire, sans quoi vos pages seront répertoriées sous l'intitulé "Sans titre" ou "Untitled" par certains moteurs de recherche sur Internet.

Les commentaires

Tout ce qui se trouve entre les balises  correspond à un commentaire ou une annotation personnelle qui ne sera pas affiché dans le navigateur. Cet élément peut se placer aussi bien dans l'en-tête ou le corps du document.

Les commentaires peuvent vous servir à séparer logiquement les parties de votre document ou encore à marquer la logique de votre construction. Pensez à utiliser les commentaires. Cela facilite grandement le travail lorsqu'on doit reprendre le fichier, pour une mise à jour par exemple.

Le corps du document : <BODY>

C'est là que vous disposez tous les éléments qui seront affichés dans le navigateur de votre visiteur. Nous verrons par la suite comment implémenter ces éléments, qu'il s'agisse de texte, d'images ou de multimédia.

Laissez votre adresse : <ADDRESS> (Cette balise est facultative, elle a seulement une fonction de mise en forme du texte)

Cet élément, situé au début ou à la fin du corps du document, vous permet de laisser vos coordonnées. La manière dont sera rendu le contenu de cet élément dépend directement du navigateur (italique, gras ou autre).

Généralement, on laisse comme coordonnées l'adresse du site, de la page consultée, la date de création ou de modification, et l'e-mail.

Voici un exemple de code :

<ADDRESS>
http://www.cyberecoles.eu/ 
Mise à jour : 07 juin 2001 
E-mail : webmaster@cyberecoles.eu
</ADDRESS>

Les principales balises HTML

Mise en forme des caractères

La mise en forme logique

Ces instructions dites logiques, laissent le navigateur interpréter le formatage du texte.
Important : Pour utiliser ces balises, il suffit d'encadrer votre texte avec la balise d'ouverture choisie et la balise de fermeture correspondante.

Voici toutes les balises de mise en forme logique et le code source :

<CITE>Pour effectuer une citation.</CITE>

<CODE>Pour indiquer du code informatique.</CODE>

Similaire à l'italique.

<KBD>Utilisé généralement pour indiquer une réponse d'utilisateur.</KBD>

<SAMP> Affiche les caractères de manière littérale.</SAMP>

 Permet de faire ressortir du texte (gras).

<VAR>Indique une variable.</VAR>

<DFN>Permet de créer une sous définition.</DFN>

Vous pouvez bien sur imbriquer plusieurs balises; attention tout de même à respecter l'ordre de fermeture.

ex : Texte en italique et en gras
Résultat dans votre navigateur : Texte en italique et en gras

La mise en forme physique

Ces instructions dites physiques sont plus proches de l'auteur, en effet, avec ces balises ci-dessous c'est vous qui décidez ce que le navigateur affichera, même s'il y a certaines limites.
Important : Pour utiliser ces balises, il suffit d'encadrer votre texte avec la balise d'ouverture choisie et la balise de fermeture correspondante.

Voici toutes les balises de mise en forme physique et le code source :

Permet de faire ressortir du texte gras.

Met le texte en Italique (ou <ITALIC>).

<TT>Affiche le texte en police style machine à écrire.</TT>

Souligne le texte.

<STRIKE>Barre le texte.</STRIKE>

<BIG>Permet d'utiliser une police plus grande.</BIG>

Permet d'utiliser une police plus petite.

Affiche le texte en indice (décalé vers le bas de la ligne).

Affiche le texte en exposant (décalé vers le haut de la ligne).

Vous pouvez bien sur imbriquer plusieurs balises; attention tout de même à respecter l'ordre de fermeture.

ex : Texte en italique et en gras
Résultat dans votre navigateur :Texte en italique et en gras

Les polices de caractères

Pour spécifier une police, la méthode à utiliser par le HTML s'appuie sur la balise . Pour que votre document se visualise correctement (c'est à dire avec la police définie dans votre document), il est recommandé d'employer une police standard (arial, courrier ...) à toutes les plates-formes, sinon la police paramétrée par défaut sur le navigateur de chaque visiteur sera affichée.

La balise possède plusieurs attributs :

? FACE : Permet de définir par ordre de priorité, les noms des polices.

? SIZE : Permet de définir la taille de la police de 1 à 7 (valeur par défaut : 3).

A noter qu'il peut être utilisé de deux manières :
? Absolue ex : SIZE= 2
? Relative ex : SIZE= +2

? COLOR : Permet de définir la couleur du texte (soit avec le nom de la couleur ou la valeur hexadécimale correspondante).

La balise <BASEFONT> est utilisée pour définir la police standard, elle ne possède pas de balise de fermeture, et elle emploie les mêmes attributs que la balise . En réalité il n'y a aucune différence importante avec la balise .

Quelques exemples d'utilisation de la balise et leur code source


Police Comic Sans Ms - Taille par défaut (3)


[Police Comic Sans Ms - Taille par défaut (3)]


Police Impact - Taille 2 - Couleur : Verte


[Police Impact - Taille 2 - Couleur : Verte]

L'accentuation

Pour inclure des caractères accentués, vous devez remplacer la lettre accentuée par l'entité correspondante. Ceci avant tout pour permettre une harmonisation entre les différents systèmes d'exploitations et surtout entre les différentes particularités de chaque langue. Le principe est le même pour insérer des caractères spéciaux.

Les principaux caractères accentués

Caractère	Abréviation	Caractère	Abréviation
à	à	â	â
ä	ä	æ	æ
é	é	è	è
ê	ê	ë	ë
ú	ú	û	û
ü	ü	ö	ö
ï	ï	î	î
ç	ç	ù	ù

Pour obtenir le caractère accentué, nous devons placer le caractère "&", le caractère à accentuer et le modificateur choisi dans la liste ci-dessus; si de plus ce caractère accentué n'est pas placé en fin de mot, il faut faire suivre le modificateur par le caractère ";" pour qu'il soit correctement compris par le navigateur.

Par exemple, pour écrire :

"Le html est plus aisé à lire qu'à écrire"

nous écrirons :

Le html est plus ais&eacute &agrave lire qu'&agrave écrire

Thèmes de la fiche		code HTML
Auteurs de la fiche		Equipe CyberEcoles
Contact Aphania		Jeanne Suhamy : jeanne.suhamy@aphania.com Tél. 06 85 15 15 83
Liens utiles