Introduction au langage (X)HTML-CSS

Table des mati` eres

1 La syntaxe du HTML 1.1 Principe dun langage descriptif . . . . . . . . . . . . 1.2 Les balises HTML . . . . . . . . . . . . . . . . . . . 1.2.1 La syntaxe . . . . . . . . . . . . . . . . . . . 1.2.2 Le cas des accents et des caract` eres sp eciaux 1.2.3 Les commentaires . . . . . . . . . . . . . . . 1.2.4 Les erreurs courantes a ` ne pas reproduire . . 2 Structure dune page HTML 2.1 Premi` ere page HTML . . . . 2.2 Les en-t etes . . . . . . . . . . 2.2.1 Les balises META . . 2.2.2 Autres en-t etes . . . . 2.3 Le corps de la page . . . . . . 2.3.1 Les el ements de base . 2.3.2 Les liens hypertextes . 2.3.3 Utiliser des styles pour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 3 3 3 4 4 5

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . am eliorer la page .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

5 . 5 . 6 . 6 . 7 . 7 . 7 . 9 . 10

3 Mettre vos pages en ligne 12 3.1 Avoir un h ebergeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.2 D enir la page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.3 G erer le probl` eme de lencodage UTF-8 . . . . . . . . . . . . . . . . . . . . . . . 13 4 R ef erences 13

LA SYNTAXE DU HTML

1
1.1

La syntaxe du HTML
Principe dun langage descriptif

Le HTML est un langage dit descriptif. Cel` a signie que le langage d ecrit quelque chose de statique, an dorganiser de linformation lisible par une personne. En HTML, il ny a pas de boucles, pas de conditions, pas de compilation. La nalit e dune page web est son code source HTML. Durant cette formation, nous apprendrons les bases de ce code source, qui peut etre ecrit directement dans nimporte quel editeur de texte.

1.2
1.2.1

Les balises HTML

La syntaxe

La syntaxe du langage HTML est tr` es simple. Linformation de la page est organis ee par ce quon appelle des balises. Chaque balise peut ne contenir rien, ou contenir du texte, ou contenir dautres balises. Une balise est compos ee de deux el ements : un marqueur douverture et un marqueur de fermeture.

< n o m d e l a b a l i s e> Contenu </ n o m d e l a b a l i s e> Syntaxe des balises

Une balise peut comporter un ou plusieurs attributs. Ce sont des valeurs qui permettent de r egler son comportement par exemple.

< n o m d e l a b a l i s e a t t r i b u t 1= v a l e u r 1 a t t r i b u t 2= v a l e u r 2 > Contenu </ n o m d e l a b a l i s e> Balises avec attributs

Certaines balises particuli` eres nont pas de contenu. Elle se susent ` a elles-m eme. Le marqueur de d ebut et celui de n sont fondus dans un seul marqueur. Leur syntaxe est la suivante.

LA SYNTAXE DU HTML

< n o m d e l a b a l i s e /> < n o m d e l a b a l i s e a t t r i b u t 1= v a l e u r 1 a t t r i b u t 2= v a l e u r 2 /> Balises sans contenu

1.2.2

Le cas des accents et des caract` eres sp eciaux

En HTML, les accents et certains caract` eres comme &,< ou > doivent etre ecrits avec un code particulier. Cel` a est tr` es contraignant pour les accents et nous apprendrons des astuces pour outrepasser cette limite. N eanmmoins, vous devez conna tre la mani` ere de sy prendre. Voici dans lordre, le ` a, le e, le ` e, le o, le &, le < et le > :

&a g r a v e ; &e a c u t e ; &e g r a v e ; &o c i r c ; &amp ; &l t ; &g t ; Les accents en HTML

Vous trouverez ais ement sur internet la liste des tous les caract` eres sp eciaux disponibles. 1.2.3 Les commentaires

Les commentaires servent ` a mettre du texte qui nappara t pas dans le navigateur. Cest utile pour d ecrire le code source. Leur syntaxe est la suivante.

< ! Texte de v o t r e commentaire > < ! Des commentaires plus longs avec des r e t o u r s ` a l a l i g n e > Les commentaires

STRUCTURE DUNE PAGE HTML

Attention : Vous ne pouvez pas utiliser de commentaires ` a lint erieur m eme dune balise ou dun attribut. Ils doivent etre imp erativement plac es comme un contenu dans une balise. En revanche, les commentaires peuvent contenir des balises, qui ne seront bien s ur pas prises en compte. 1.2.4 Les erreurs courantes ` a ne pas reproduire

Vous pouvez voir sur internet de trop nombreux exemples ` a ne pas respecter. Notez en particulier que : Les noms des balises et des attributs doivent etre ecrits en minuscules. Les balises sans contenu doivent imp erativement etre ferm ees avec />. Vous devez mettre les valeurs des attributs entre des double-quotes. Les navigateurs peuvent dans une certaine mesure outrepasser ces erreurs et acher un r esultat correct, n eanmmoins, le document ne respecte dans ce cas pas les standards et ses donn ees sont mal format ees.

2
2.1

Structure dune page HTML

Premi` ere page HTML

Lensemble de la page HTML doit etre contenu ` a lint erieur dune balise <html>. Nous verrons quil existe parfois des choses avant cette balise mais il ne sagit pas de balises. Cette balise doit contenir deux autres balises, <head> et <body> dans cet ordre et rien dautre. Notez que le HTML ne tient pas compte des retours ` a la ligne, des tabulations et des suites despaces (si vous tapez 3 espaces, un seul sera pris en compte). Vous pouvez ` a votre guise organiser les balises les unes par rapport aux autres avec des retours ` a la ligne et des espaces. Ouvrez un editeur de texte (gedit par exemple) et tapez un code similaire ` a celui-ci :

<html> <head> < t i t l e >Ma p r e m i` e r e page HTML </ t i t l e > </ head> <body> V o i c i du t e x t e . Des r e t o u r s &a g r a v e ; l a l i g n e pour v o i r l e r&e a c u t e ; s u l t a t dans l e n a v i g a t e u r . Vous v e r r e z que HTML ne prend pas en compte vos r e t o u r s &a g r a v e ; l a l i g n e e t vos espaces . </ body> </ html> Premi` ere page HTML 5

STRUCTURE DUNE PAGE HTML

Enregistrez ceci dans un chier appel e par exemple mapage.htm. Enregistrez ce chier dans un r epertoire de votre compte INP-Net. Puis ouvrez un navigateur, eectuez laction Fichier -> Ouvrir un fichier et s electionnez votre chier. Admirez le r esultat.

2.2

Les en-t etes

On appelle en-t etes le contenu de la balise <head>. Les informations que cette section contient nappara tront pas directement sur la page. Comme vous avez pu le voir, le navigateur ache le contenu de la balise <title> dans la barre de titre de sa fen etre, mais pas sur la page. Cest un choix des codeurs du navigateur et en rien une norme. Ces informations, appel ees m etadonn ees, servent ` a renseigner le navigateur et le r eseau sur divers el ements qui nont pas besoin dappara tre sur la page. Par exemple, le nom de lauteur, ou bien une liste de mot-cl es, en encore la p eriode de validit e de la page. Ce genre dinformations s ecrivent ` a laide de la balise <meta>. Ces informations sont utiles pour les moteurs de recherche par exemple. Ces en-t etes servent aussi ` a lier ` a la page des chiers ou du code contenant des styles CSS ou des programmes en Javascript par exemple. Cel` a se fait ` a laide de balises rel,style ou encore <script>. 2.2.1 Les balises META

Les balises <meta> sont riches et lutilit e de certaines est parfois discutable. Voici quelques exemples :

<html> <head> < t i t l e >Les b a l i s e s META </ t i t l e > < ! <meta http e q u i v= Content Type content= t e x t / html ; c h a r s e t=i s o 8859 15 /> > <meta http e q u i v= E x p i r e s content= 0 /> <meta name= Author content= Votre Nom /> <meta name= keywords content= trustonme html xhtml f o r m a t i o n f o r m a t i o n s n e t 7 INPNet /> <meta name= d e s c r i p t i o n content= Formation pour l a cr e a t i o n de p a g e s Web /> </ head> <body> ... e </ body> </ html> Les balises META 6

STRUCTURE DUNE PAGE HTML

Tapez ces balises dans votre page ou copiez-les dans le chier balisesmeta.htm. Enregistrez dans un chier di erent du pr ec edent puis ouvrez-le dans un nouvel onglet de votre navigateur, an de conserver lautre ach e pour le moment. Faites un clic droit dans la premi` ere page et puis cliquez sur Informations de la page. Une fen etre souvre. Faites de m eme sur la seconde page. Vous pouvez voir que le navigateur lit les donn ees Meta et vous permet de les consulter. Vous pouvez aussi voir quune balise est comment ee. Cette balise permet de d ecrire lencodage utilis e pour la page. Lencodage est la mani` ere dont les caract` eres sont cod es par des bits. Lencodage na aucune importance tant que vous nutilisez que des caract` eres ASCII, soit un jeu tr` es limit e de caract` eres, sans accents. Les accents ne sont utilisables proprement que via les codes HTML d ecrit pr ec edemment. Nous allons maintenant utiliser une astuce pour acher correctement de vrai accents. D ecommentez la balise <meta> concern ee. Puis taper des mots avec accents dans la balise <body>. Actualisez votre page et observez le r esultat. A pr esent, remplacez la balise <meta> concern ee par <meta http-equiv="Content-Type" content="text/html ; charset=UTF-8" />. Notez que seule la valeur de lattribut content change. Enregistrez, actualisez la page et observez le r esultat. Vos accents sachent correctement dans un cas et pas dans lautre. Cel` a d epend de lencodage de votre chier. Normalement, les editeurs de texte vous permettent de choisir lencodage au moment denregistrer le chier. Dans le cas des sites en ligne, si vous voulez utiliser un encodage UTF-8, une manipulation suppl ementaire est n ecessaire. Si vous utilisez lencodage iso8859, vous ne devriez avoir aucun probl` eme. Nous d ecrirons la manipulation pour UTF-8 plus tard. Si vous utilisez windows, il est pour le moment recommand e dutiliser lencodage iso, car cest lencodage par d efaut.

2.2.2

Autres en-t etes

Vous avez pu constater dans les en-t etes la pr esence de la balise <title>. Cette balise est obligatoire. Nous ajouterons dautres en-t etes au cours de la formation.

2.3
2.3.1

Le corps de la page
Les el ements de base

Vous lavez devin e, le corps de la page est tout ce qui se trouve dans la balise body. Nous allons d ecrire le contenu ` a laide de di erents d elimiteurs. Voici une page dexemple.

<html> <head> < t i t l e > F a i r e un c o r p s ` a n o t r e page</ t i t l e > </ head> <body> <h1>Un grand t i t r e </ h1> <h2>Un t i t r e p l u s p e t i t </ h2> <h6>Le p l u s p e t i t t i t r e </ h6>

STRUCTURE DUNE PAGE HTML

<div>Du t e x t e l i b r e </ div> <div s t y l e= t e x t a l i g n : c e n t e r ; > Du t e x t e c e n t r e <br /> Avec r e t o u r ` a la ligne </ div> <div s t y l e= t e x t a l i g n : r i g h t ; >Du t e x t e a l i g n e ` a d r o i t e </ div> < ! Un s e p a r a t e u r > <hr /> <div> On peut a u s s i r e n d r e l e t e x t e <span s t y l e= f o n t w e i g h t : b o l d ; > g r a s</ span> ,<span s t y l e= f o n t s t y l e : i t a l i c ; > i t a l i q u e </ span> ou e n c o r e <span s t y l e= t e x t d e c o r a t i o n : u n d e r l i n e ; > s o u l i g n e . </ span> </ div> <div> <p>On peut u t i l i s e r d e s p a r a g r a p h e s</ p> <p> I n t e r has ruinarum v a r i e t a t e s a N i s i b i quam t u e b a t u r a c c i t u s V r s i c i n u s , c u i nos o b s e c u t u r o s i u n x e r a t i m p e r i a l e praeceptum , d i s p i c e r e l i t i s e x i t i a l i s c e r t a m i n a c o g e b a t u r abnuens e t reclamans , adulatorum o b l a t r a n t i b u s turmis , b e l l i c o s u s s a n e m i l e s q u e semper e t militum d u c t o r s e d f o r e n s i b u s i u r g i i s l o n g e d i s c r e t u s , q u i metu s u i d i s c r i m i n i s a n x i u s cum accusatores quaesitoresque subditivos s i b i c o n s o c i a t o s ex isdem f o v e i s c e r n e r e t emergentes , quae clam palamve a g i t a b a n t u r , o c c u l t i s Constantium l i t t e r i s e d o c e b a t i n p l o r a n s s u b s i d i a , quorum metu tumor n o t i s s i m u s C a e s a r i s e x h a l a r e t . </ p> <p><span s t y l e= c o l o r :#0000 f f >Et m e t t r e de l a c o u l e u r</ span></ p> </ div> </ body> </ html> Corps de la page

Ce code source est disponible dans le chier corps.htm. Vous pouvez constater que pour les styles de texte, comme la couleur, la syntaxe est assez lourde. Nous allons voir plus loin des moyen plus ais e de g erer cel` a. Vous voyez quil y a un certain nombre de conteneurs <div>. Les DIV sont les conteneurs de base. Il est d econseill e de mettre du texte libre en dehors dun DIV, car cel` a rend sa manipulation par des styles moins facile. Vous comprendrez cel` a plus tard.

2 2.3.2 Les liens hypertextes

STRUCTURE DUNE PAGE HTML

Toute la magie du web vient du fameux lien hypertexte. Un lien hypertexte pointe vers un emplacement dans une page web. Il est bien ecrit un emplacement. En eet, vous pouvez faire pointer un lien sur la page dans laquelle il se trouve, pour orienter le visiteur sur un paragraphe particulier lorsque la page est longue, ou bien pointer vers une autre page web, ou bien encore pointer vers un emplacement dans une autre page web. Ces emplacements sont appel es des ancres. Les liens se g` erent avec la balise <a>. Il y a deux types de ces balises. Celles qui pointent vers une page ou une ancre et celles qui d enissent une ancre vers laquelle dautres liens peuvent pointer. Pour d enir une ancre, on utilise la syntaxe <a id="nomdelancre"></a>. Pour d enir un lien, on utilise une des trois syntaxes suivantes, selon le besoin : <a href="urldelapage">Texte du lien</a> <a href="#nomdelancre">Texte du lien</a> <a href="urldelapage#nomdelancre">Texte du lien</a> urldelapage est ladresse de la page. Ce peut etre soit une page d esign ee par un chemin relatif par rapport ` a la page consult ee (comme sousrepertoire/autrepage.htm) ou une URL externe (comme http ://www.google.fr). Faisons un petit test. Cr eons deux chiers appel es page1.htm et page2.htm dans le m eme r epertoire et pla cons-y respectivement les codes suivants.

<html> <head> < t i t l e >Une p r e m i` e r e page</ t i t l e > </ head> <body> <a href= h t t p : / /www. g o o g l e . f r >Un l i e n v e r s Google</ a> <br /> <a href= page2 . htm>Un l i e n v e r s une page de mon s i t e </ a> </ body> </ html> Page num ero 1

<html> <head> < t i t l e >Une deuxi` e me page</ t i t l e > </ head> <body> 9

STRUCTURE DUNE PAGE HTML

<a href= page1 . htm>Retour v e r s l a p r e m i` e r e page</ a> </ body> </ html> Page num ero 2

Tester un peu tout ca en ouvrant page1.htm dans vote navigateur. Pour tester le comportement des ancres, je vous invite ` a consulter le chier ancres.htm. Son listing nest pas pr esent e ici en raison de la grande quantit e de texte quil contient.

2.3.3

Utiliser des styles pour am eliorer la page

Nous allons ici ajouter une balise den-t ete. Cest une balise particuli` ere puisquelle contient du texte, qui nest pas du HTML mais du langage CSS comme Cascading Style Sheet ou feuille de style en cascade. Bien que ce terme puisse erayer, CSS est un langage simple et fort puissant. Jugez-en par vous-m eme avec le listing suivant, que vous trouverez dans le chier css.htm.

<html> <head> < t i t l e > U t i l i s a t i o n de s t y l e s CSS</ t i t l e > < s t y l e content= t e x t / c s s > / C e c i va a f f e c t e r t o u t e s l e s b a l i s e s body . I l n y en a qu une c e q u i s i m p l i g i e l e probl` e me / body { / C e c i va donner une c o u l e u r de fond . / background c o l o r :# b b b b f f ; f o n t s i z e : 1 0 pt ; f o n t f a m i l y : Verdana ; c o l o r :#220000; } / I c i on s o i c c u p e du s t y l e par d efaut des b a l i s e s c o u r a n t e s / div { / T a i l l e de l a marge en haut , ` a d r o i t e , en bas , a ` gauche / / La marge e s t l a d i s t a n c e e n t r e l e bord du d i v e t c e q u i l e n t o u r e / margin : 1 0 px 100 px 10 px 100 px ; } h1 { t e x t d e c o r a t i o n : u n d e r l i n e ; } 10

STRUCTURE DUNE PAGE HTML

/ On d e f i n i t i c i c e qu on a p p e l l e d e s c l a s s e s / / Cel` a permet d a f f e c t e r un s t y l e p a r t i c u l i e r ` a certains e l e m e n t s / . encadre { margin : 5 0 px 200 px 50 px 200 px ; / Le padding e s t l a d i s t a n c e e n t r e l e t e x t e e t l e s b o r d s du DIV / padding : 2 0 px ; / C e c i c r e e une b o r d u r e p l e i n de 2 p i x e l s d e p a i s s e u r e t de c o u l e u r b l a n c h e / b o r d e r : 2 px s o l i d # f f f f f f ; / On a l i g n e l e t e x t au m i l i e u / t e x t a l i g n : c e n t e r ; } / d e s l i e n s h y p e r t e x t p l u s sympas / / S t y l e du l i e n par d e f a u t / a { c o l o r :#550000; t e x t d e c o r a t i o n : none ; } / S t y l e du l i e n s i d ej` a visit e / a: visited { c o l o r :#550000; t e x t d e c o r a t i o n : none ; } / S t y l e du l i e n l o r s du s u r v o l avec l e c u r s e u r de l a s o u r i s / a : hover { c o l o r :# aa0000 ; t e x t d e c o r a t i o n : u n d e r l i n e ; }

</ s t y l e> </ head> <body> <h1>Uraphe</ h1> <div> Sed quid e s t quod i n hac c a u s a maxime homines a d m i r e n t u r e t r e p r e h e n d a n t meum c o n s i l i u m , cum ego idem a n t e a multa d e c r e v e r i m , que magis ad h o m i n i s d i g n i t a t e m quam ad r e i p u b l i c a e n e c e s s i t a t e m p e r t i n e r e n t ? 11

METTRE VOS PAGES EN LIGNE

S u p p l i c a t i o n e m quindecim dierum d e c r e v i s e n t e n t i a mea . Rei p u b l i c a e s a t i s e r a t t o t dierum quot C . Mario ; d i s i m m o r t a l i b u s non e r a t e x i g u a eadem g r a t u l a t i o quae ex maximis b e l l i s . Ergo i l l e cumulus dierum hominis e s t d i g n i t a t i t r i b u t u s . </ div> <div c l a s s= e n c a d r e > Ce d i v e s t a f f e c t e a ` une c l a s s e CSS pour l u i donner un look d i f f e r e n t . <a href= >Des l i e n s p l u s sympas</ a> </ div> <h1>Un a u t r e p a r a g r a p h e</ h1> <div> A d o l e s c e b a t autem obstinatum propositum e r g a haec e t s i m i l i a multa s c r u t a n d a , s t i m u l o s admovente r e g i n a , quae a b r u p t e m a r i t i f o r t u n a s t r u d e b a t i n e x i t i u m p r a e c e p s , cum eum p o t i u s l e n i t a t e f e m i n e a ad v e r i t a t i s h u m a n i t a t i s q u e viam r e d u c e r e u t i l i a suadendo d e b e r e t , ut i n Gordianorum a c t i b u s f a c t i t a s s e Maximini t r u c u l e n t i i l l i u s i m p e r a t o r i s r e t t u l i m u s coniugem . </ div> </ body> </ html> Utilisation des styles CSS

Comme vous pouvez le voir, cel` a lib` ere le code HTML de toute description de couleur et de disposition. Cest la philosophie du Web de lavenir. Le code (X)HTML d enit des donn ees, puis on les met en forme avec dautres outils. Ici, loutil est le langage CSS. Cel` a sut ` a g erer un site web m eme riche, car un site web nutilise jamais trop de styles di erents, sans quoi il deviendrait tr` es vite illisible. Il est possible dutiliser CSS directement dans les balises (X)HTML ` a laide de lattribut style. Consulter la sous-section corps de la page pour voir de petits exemples avec les textes en gras, italique et soulign e. Par exemple, avoir un bout de texte rouge soulign e, on peut utiliser <span style="color :#ff0000 ;text-decoration :underline ;">Du texte rouge soulign e</span>.

3
3.1

Mettre vos pages en ligne

Avoir un h ebergeur

Pour mettre vos pages en ligne, vous devez disposer dun h ebergeur. INP-Net vous ore un service dh ebergement avec votre compte. D eposez simplement vos pages web dans le r epertoire www public de votre compte INP-Net. Vous acc eder ` a votre site et ` a vos pages via ladresse http ://bde.enseeiht.fr/~votrelogin/unepage.htm. 12

ERENCES REF

3.2

D enir la page daccueil

Par mesure de s ecurit e et de confort, il convient que ladresse http ://bde.enseeiht.fr/~votrelogin/ tombe directement sur une page, de surplus celle de votre choix. Pour ce faire, il sut de placer un chier nomm e index.htm ou index.html dans le r epertoire www public. Ce chier sera la page daccueil.

3.3

G erer le probl` eme de lencodage UTF-8

Si vos chiers sont encod es en UTF-8, il est possible que les accents sachent mal. Si vous rencontrez ce probl` eme, vous pouvez editer le chier .htaccess (ou le cr eer sil nexiste pas) et y ajouter les lignes : AddCharset UTF-8 .html AddCharset UTF-8 .htm

R ef erences

13