Bernard Lecomte

Dbuter avec HTML

Dbuter avec HTML

Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez raliser un site simple. Si vous souhaitez aller plus loin vous trouverez en librairies et sur le web de nombreuses explications complmentaires, vous pourrez galement regarder le code source des sites qui vous sduisent. Pour cela, vous avez besoin de deux outils qui sont, a priori, votre disposition : un diteur de texte simple comme le bloc-note de Windows (notepad) et un diteur dimages permettant de crer des images au format JPEG, GIF ou PNG comme Paint Shop Pro ou lditeur dimages fourni avec votre appareil photo numrique.

I Quest-ce que HTML ?

II Une page web simple

III Votre premire page HTML

IV Lhabillage

V Un site de trois crans

VI Les autres possibilits du HTML

2

I Quest-ce que HTML ?

HTML est le langage utilis pour crer des pages web. Cest le seul langage permettant dafficher une page web dans un navigateur (Internet Explorer, Netscape Navigator, Firefox ou autres). HTML est labrviation de Hyper Text Marker Language, en franais Langage Hyper Texte Balises. Cest un langage au format texte (donc pouvant tre crit avec un diteur simple comme le bloc-note de Windows). Le code HTML correspondant une page web peut tre visualis en choisissant loption Afficher la source du navigateur.

Quelles sont les particularits dune page web ?

Une page web est constitue de texte et dimages. Le fichier HTML contient le texte et donne les rgles daffichage de la page : son mode daffichage (police, couleur, mise en page), les adresses des images et les adresses des pages vers lesquelles il est possible de naviguer en cliquant sur les liens. Mais la mise en page proprement dite est ralise par le navigateur qui utilise ses propres rgles en tenant compte des caractristiques de lordinateur utilis (systme dexploitation, largeur dcran, nombre de couleurs, polices de caractres disponibles). Une page donne ne saffichera donc pas exactement pareil dun ordinateur lautre.

Les balises

Elles ne saffichent pas avec le texte mais permettent dindiquer au navigateur ce quil doit faire. Elles sont toujours de la forme pour la premire et pour la dernire, sachant que, sauf exception, il y a toujours deux balises associes. Les retours-chariot sont considrs comme un espace scable. Attention, par consquent, ne pas couper le contenu dune balise par un retour-chariot. Quel que soit le nombre despaces (ou retours-chariot) saisi, un seul sera affich sur lcran. Il est possible dajouter des commentaires qui ne seront jamais affichs. Ils devront tre insrs lintrieur de la balise . Les majuscules ou minuscules peuvent indiffremment tre utilises.

Les noms des fichiers

Les noms des pages web doivent avoir une extension .htm . Comme celui du rpertoire qui les contient, ils ne comporteront ni majuscule, ni espace, ni caractre spcial, lexception du tiret (-) et du underscore (_).

Les images seront au format JPEG (extension .jpg ), au format GIF (extension .gif ) ou au format PNG (extension .png ). La mme rgle sapplique pour le nom.

3

II Une page web simple

Une page web (html) est toujours constitue dune entte (head) contenant ventuellement un titre (title) et dun corps (body) contenant le texte et les liens vers les images de la page (les tabulations ont pour seul but de faciliter la lecture et nont aucune influence sur laffichage de la page) :

Titre de la page

Contenu de la page

Insertion dune image

Pour insrer une image dans une page il faut indiquer le lien vers limage de la manire suivante : . Ce code signifie que limage se trouve dans le mme rpertoire que la page concerne. Dans le cas contraire, il faut prciser le chemin relatif en remontant puis en redescendant dans le rpertoire concern. Ainsi si le site est constitu de deux rpertoires de mme niveau, lun appels textes (contenant les pages web) et un autre appel images (contenant les images), la balise deviendra . Nous en reparlerons plus loin (voir Arborescence).

Insertion dun lien hypertexte

Le lien hypertexte affiche une zone sensible (le curseur devient une main) qui permet dafficher une autre page du mme site ou dun autre site (ou une simple image). La balise lien encadre le texte ou limage rendre sensible : Zone sensible ou pour une image : . Dans le cas de limage il est plus esthtique de prciser de ne pas afficher de contour (border). Sil sagit dun lien vers un autre site, ladresse complte de la page doit tre indique : Zone sensible. Pour demander lenvoi dun e-mail, il faut prciser mailto: dans ladresse afin douvrir le logiciel de messagerie : e-mail.

Insertion dun tableau

La prsentation des donnes dans une page peut ncessiter lutilisation dun tableau (par exemple pour afficher une srie de photos). Celui-ci est dfini par trois types de balises : dfinit le tableau lui-mme. dfinit les lignes (il y aura donc autant de fois cette balise que de lignes). dfinit les colonnes (toutes les lignes doivent avoir le mme nombre de colonnes).

4

Ainsi un tableau de deux lignes et trois colonnes sera dfini de la manire suivante :

Ligne 1, colonne 1Ligne 1, colonne 2Ligne 1, colonne 3

Ligne 2, colonne 1Ligne 2, colonne 2Ligne 2, colonne 3

Arborescence

Pour des raisons pratiques, tous les fichiers dun site (textes, images, sons) ne sont pas toujours situs dans le mme rpertoire. Il faut donc afficher le chemin relatif lorsque lon fait un lien vers un de ces fichiers : Si le fichier est situ dans le mme rpertoire que la page HTML, il suffit dindiquer son nom. Sil est dans un rpertoire de niveau suprieur, il faut faire prcder le nom de ../ et cela autant de fois quil est ncessaire de remonter. Si le fichier est dans un rpertoire adjacent, il faut ensuite redescendre en prcisant le nom du rpertoire concern.

Ainsi, si le rpertoire de votre site sappelle mon-site , quil contient deux sous-rpertoires textes et images , pour faire afficher une image par une page web du sous-rpertoire texte le lien sera le suivant : .

Si un rpertoire contient une page web dont le nom est index.htm ou index.html , celle-ci saffichera automatiquement lorsque linternaute indiquera comme adresse celle du rpertoire (ce qui est gnralement le cas). Ainsi ladresse http://monsite.fr/textes affichera la page http://monsite.fr/textes/index.htm (si elle existe, sinon ce sera, soit un message derreur, soit larborescence du rpertoire qui sera affiche).

Les principaux caractres spciaux du HTML

Leur utilisation nest pas indispensable mais elle facilite laffichage sur les ordinateurs dont la langue nest pas le franais. Voici les principaux (mais il en existe beaucoup dautres) :

: : : : : : : : : : : Espace :

5

III Votre premire page HTML

Vous savez prsent crire une page web comportant du texte, une ou plusieurs images, un ou plusieurs tableaux. Tout le reste, cest de lhabillage ! Vous trouverez ci-dessous le code dune page comportant tous ces lments, des commentaires y ont t ajouts. Ils ne sont ni affichables ni indispensables. Ouvrez votre diteur de texte (bloc-note de Windows), dans longlet Format supprimez le retour la ligne et recopiez le code ci-dessous (copier-coller) puis sauvegardez le fichier sur votre ordinateur sous le nom que vous voulez (par exemple : ma-page-web.htm) sans oublier de forcer lextension du nom .htm au lieu de .txt. Vous pouvez alors la visualiser avec votre navigateur en ayant toujours lesprit que pour quun site fonctionne en ligne il doit dabord le faire sur votre ordinateur. Cest le moyen de vrifier laffichage des images et que les divers liens sont corrects.

Ma premire page HTML

Cette page permet de visualiser les premiers lmentsindispensables pour la cration dun site web. Elle comporteun lien vers une autre page du site oudun autre site. Onpeut galement saisir un email.On peut galement afficher un tableau de deux lignes et deux colonnes contenant un texte et une image:

Texte de la premire colonne de la premire ligneDeuxime colonne avec image

Ligne 2, colonne 1Ligne 2, colonne 2

6

IV Lhabillage

Les meta-tags

Ce sont des informations concernant le site qui napparaissent pas lcran mais sont utiliss par les moteurs de recherche (robots) pour leur rfrencement automatique. Ils se placent en tte de la page entre les balises . Il y en a de nombreux, voici les principaux :

Le fond dcran

Par dfaut, le fond dcran est incolore. Gnralement, les navigateurs laffichent en blanc. Il est possible de lui affecter une couleur particulire en lindiquant dans la balise . Elle doit tre, soit code en hexadcimal ou dcimal selon les trois couleurs de base (dans lordre rouge, vert, bleu), soit indique en anglais dans une liste standard, exemple : (rose saumon) (bleu clair) (jaune vif)

Il est galement possible de mettre une image en fond dcran. Pour cela, il faut mettre, toujours dans la balise , ladresse de limage utiliser. Attention, limage sera rpte jusqu remplir lensemble de lcran. Il est possible de prciser (bgproperties=fixed) que limage doit rester fixe lorsque linternaute fera dfiler le texte laide de lascenseur :

Les textes

Par dfaut, le texte est cadr gauche, de couleur noire et utilise la police par dfaut du navigateur. Il est possible de changer ces paramtres et galement dutiliser des caractres gras, italiques ou souligns.

La couleur pour lensemble des caractres dune page est dfinie dans la balise body, exemple :

En ce qui concerne les polices de caractres, il faut toujours avoir lesprit que le navigateur ne peut utiliser que celles installes sur lordinateur de linternaute. Si une page web impose une autre police, cest la police par dfaut qui sera utilise. Il faut donc se limiter aux grands classiques : Arial, Time New Roman, Comic sans MS, Verdana. La police et la couleur sont alors prcises dans une balise encadrant lensemble du texte concern, exemple :

7

Texte en arial de couleur rouge

Les balises suivantes, encadrant un texte, permettent dafficher des caractres gras , italiques ou souligns . Elles peuvent tre combines, mais dans ce cas toujours imbriques : Texte gras, italique soulign.

Pour centrer une partie du texte (et les images ou les tableaux quil contient), il suffit de lencadrer avec les balises .

Les images

Si une image est accole un texte, le bas de limage saligne sur le bas de la ligne de texte voisine. Pour que le texte senroule autour de limage il faut ajouter la donne align dans la balise image (align=left pour une image gauche et align=right pour une image droite du texte), exemple :

Pour afficher un commentaire sur une image (celui-ci saffichera au survol du curseur et sera repris par les moteurs de recherche), il faut ajouter la donne alt, exemple :

Les tableaux

Il est possible de modifier un certain nombre de paramtres du tableau. Par dfaut, le tableau na pas de bordure. Il est possible den ajouter une en prcisant son paisseur :

Tout comme pour lensemble de la page, il est possible dattribuer un tableau ou une cellule du tableau une couleur de fond ou mme une image de fond, exemple :

Plusieurs cellules peuvent tre fusionnes dans une mme ligne en une seule avec la donne colspan=n o n est le nombre de cellules fusionnes. On peut faire de mme avec les cellules dune mme colonne avec rowspan, exemple :

Ligne 1, colonne 1/2Ligne 1, colonne 3

Ligne 2, colonne 1Ligne 2, colonne 2Ligne 2, colonne 3

Dautres paramtres qui ne sont pas dtaills ici permettent de dfinir la position du texte dans la colonne ou les largeurs des colonnes, les espaces entre colonnes, etc.

8

V Un site de trois crans

Pour vous exercer voici un exemple de site extrmement simple comprenant une page index (qui est la page dentre naturelle dans le site) et deux autres pages. Vous pouvez le complter en ajoutant des images, des tableaux, des liens externes, de la couleur

Crez sur votre ordinateur un nouveau dossier que vous appellerez, par exemple mon-site-web. Dans ce dossier vous enregistrerez les trois fichiers HTML suivants (faites un copier-coller) auxquels vous donnerez les noms indiqus (attention ce que lextension soit bien .htm) :

Fichier index.htm

Accueil

Page d'accueil de mon site

Premire pageDeuxime pageEcrivez-moi

Fichier page1.htm

Premire page

Page "un"

Voici la premire page de mon site. Vous pouvez aller voir la deuxime page.

Accueil

9

Fichier page2.htm

Deuxime page

Page "deux"

Voici la deuxime page de mon site. Vous pouvez retourner la premire page.

Accueil

Pour le visualiser ouvrez le dossier mon-site-web que vous venez de crer et double-cliquez sur le fichier appel index.htm. Si votre fournisseur daccs Internet (FAI) met votre disposition quelques mga-octets pour un site personnel, vous pourrez remonter ces trois pages sur le serveur en respectant les consignes quil vous prcisera (code daccs, mot de passe) et en utilisant ventuellement un logiciel comme Core-FTP.

10

VI Les autres possibilits du HTML

Mme si les webmasters se plaignent souvent des possibilits rduites du HTML, de nombreuses autres possibilits sont offertes au ralisateur de pages web. Je me suis limit ici lessentiel pour dbuter. Avec cela vous avez la possibilit de raliser un site web simple. A partir de cette base, vous pourrez lenrichir grce dautres possibilits qui sont expliques dans de nombreux livres et sites Internet. Je les citerai simplement :

Les frames (ou cadres) permettent de raliser des pages constitues de fentre autonome

Les images map permettent de dfinir sur une image plusieurs zones sensibles permettant de raliser des liens vers diverses parties du site

Les feuilles de style permettent daffiner les caractristiques de laffichage Les formulaires permettent une saisie dirige de donne par linternaute (menus

droulants, cases cocher, saisie de texte) Le JavaScript fait lobjet de nombreux ouvrages et de sites Internet ddis. Il permet le

contrle de formulaires, laffichage de pop-up, de messages, certains effets spciaux Les animations Flash permettent de raliser des sites entiers avec des animations

dynamiques Etc.

Bernard Lecomte 2008-08-01Reproduction interdite

11