Introduction au langage (X)HTML-CSS

Introduction au langage (X)HTML-CSS
Table des matières
1 La syntaxe du HTML
1.1 Principe d’un langage descriptif . . . . . . . . . . . .
1.2 Les balises HTML . . . . . . . . . . . . . . . . . . .
1.2.1 La syntaxe . . . . . . . . . . . . . . . . . . .
1.2.2 Le cas des accents et des caractères spéciaux
1.2.3 Les commentaires . . . . . . . . . . . . . . .
1.2.4 Les erreurs courantes à ne pas reproduire . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2 Structure d’une page HTML
2.1 Première page HTML . . . .
2.2 Les en-têtes . . . . . . . . . .
2.2.1 Les balises META . .
2.2.2 Autres en-têtes . . . .
2.3 Le corps de la page . . . . . .
2.3.1 Les éléments de base .
2.3.2 Les liens hypertextes .
2.3.3 Utiliser des styles pour
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
5
. 5
. 6
. 6
. 7
. 7
. 7
. 9
. 10
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
améliorer la page .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3
3
3
3
4
4
5
3 Mettre vos pages en ligne
12
3.1 Avoir un hébergeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2 Définir la page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3 Gérer le problème de l’encodage UTF-8 . . . . . . . . . . . . . . . . . . . . . . . 13
4 Références
13
2
1
1
LA SYNTAXE DU HTML
La syntaxe du HTML
1.1
Principe d’un langage descriptif
Le HTML est un langage dit descriptif. Celà signifie que le langage décrit quelque chose de
statique, afin d’organiser de l’information lisible par une personne. En HTML, il n’y a pas de
boucles, pas de conditions, pas de compilation. La finalité d’une page web est son code source
HTML. Durant cette formation, nous apprendrons les bases de ce code source, qui peut être
écrit directement dans n’importe quel éditeur de texte.
1.2
1.2.1
Les balises HTML
La syntaxe
La syntaxe du langage HTML est très simple. L’information de la page est organisée par ce
qu’on appelle des balises. Chaque balise peut ne contenir rien, ou contenir du texte, ou contenir
d’autres balises. Une balise est composée de deux éléments : un marqueur d’ouverture 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égler 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ères n’ont pas de contenu. Elle se suffisent à elles-même. Le marqueur de début et celui de fin sont fondus dans un seul marqueur. Leur syntaxe est la suivante.
3
1
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ères spéciaux
En HTML, les accents et certains caractères comme &,< ou > doivent être écrits avec un code
particulier. Celà est très contraignant pour les accents et nous apprendrons des astuces pour
outrepasser cette limite. Néanmmoins, vous devez connaı̂tre la manière de s’y prendre. Voici
dans l’ordre, le à, le é, le è, le ô, 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ément sur internet la liste des tous les caractères spéciaux disponibles.
1.2.3
Les commentaires
Les commentaires servent à mettre du texte qui n’apparaı̂t pas dans le navigateur. C’est
utile pour décrire le code source. Leur syntaxe est la suivante.
< !−− Texte de v o t r e commentaire −−>
< !−− Des commentaires
plus longs
a v e c d e s r e t o u r s à l a l i g n e −−>
Les commentaires
4
2
STRUCTURE D’UNE PAGE HTML
Attention : Vous ne pouvez pas utiliser de commentaires à l’intérieur même d’une balise ou
d’un attribut. Ils doivent être impérativement placés comme un contenu dans une balise. En
revanche, les commentaires peuvent contenir des balises, qui ne seront bien sûr pas prises en
compte.
1.2.4
Les erreurs courantes à ne pas reproduire
Vous pouvez voir sur internet de trop nombreux exemples à ne pas respecter. Notez en
particulier que :
– Les noms des balises et des attributs doivent être écrits en minuscules.
– Les balises sans contenu doivent impérativement être fermées avec />.
– Vous devez mettre les valeurs des attributs entre des double-quotes.
Les navigateurs peuvent dans une certaine mesure outrepasser ces erreurs et afficher un résultat
correct, néanmmoins, le document ne respecte dans ce cas pas les standards et ses données sont
mal formatées.
2
2.1
Structure d’une page HTML
Première page HTML
L’ensemble de la page HTML doit être contenu à l’intérieur d’une balise <html>. Nous
verrons qu’il existe parfois des choses avant cette balise mais il ne s’agit pas de balises. Cette
balise doit contenir deux autres balises, <head> et <body> dans cet ordre et rien d’autre. Notez
que le HTML ne tient pas compte des retours à la ligne, des tabulations et des suites d’espaces
(si vous tapez 3 espaces, un seul sera pris en compte). Vous pouvez à votre guise organiser les
balises les unes par rapport aux autres avec des retours à la ligne et des espaces.
Ouvrez un éditeur de texte (gedit par exemple) et tapez un code similaire à celui-ci :
<html>
<head>
<t i t l e>Ma p r e m iè 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ère page HTML
5
2
STRUCTURE D’UNE PAGE HTML
Enregistrez ceci dans un fichier appelé par exemple mapage.htm. Enregistrez ce fichier dans
un répertoire de votre compte INP-Net. Puis ouvrez un navigateur, effectuez l’action Fichier
-> Ouvrir un fichier et sélectionnez votre fichier. Admirez le résultat.
2.2
Les en-têtes
On appelle en-têtes le contenu de la balise <head>. Les informations que cette section contient
n’apparaı̂tront pas directement sur la page. Comme vous avez pu le voir, le navigateur affiche
le contenu de la balise <title> dans la barre de titre de sa fenêtre, mais pas sur la page.
C’est un choix des codeurs du navigateur et en rien une norme. Ces informations, appelées
métadonnées, servent à renseigner le navigateur et le réseau sur divers éléments qui n’ont pas
besoin d’apparaı̂tre sur la page.
Par exemple, le nom de l’auteur, ou bien une liste de mot-clés, en encore la période de validité
de la page. Ce genre d’informations s’écrivent à l’aide de la balise <meta>. Ces informations sont
utiles pour les moteurs de recherche par exemple.
Ces en-têtes servent aussi à lier à la page des fichiers ou du code contenant des styles CSS ou
des programmes en Javascript par exemple. Celà se fait à l’aide de balises rel,style ou encore
<script>.
2.2.1
Les balises META
Les balises <meta> sont riches et l’utilité 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 INP−Net ” />
<meta name=” d e s c r i p t i o n ” content=” Formation pour l a
c r é a t i o n de p a g e s Web” />
</head>
<body>
...
é
</body>
</html>
Les balises META
6
2
STRUCTURE D’UNE PAGE HTML
Tapez ces balises dans votre page ou copiez-les dans le fichier balisesmeta.htm. Enregistrez
dans un fichier différent du précédent puis ouvrez-le dans un nouvel onglet de votre navigateur,
afin de conserver l’autre affiché pour le moment. Faites un clic droit dans la première page et
puis cliquez sur ”Informations de la page”. Une fenêtre s’ouvre. Faites de même sur la seconde
page. Vous pouvez voir que le navigateur lit les données Meta et vous permet de les consulter.
Vous pouvez aussi voir qu’une balise est commentée. Cette balise permet de décrire l’encodage utilisé pour la page. L’encodage est la manière dont les caractères sont codés par des bits.
L’encodage n’a aucune importance tant que vous n’utilisez que des caractères ASCII, soit un
jeu très limité de caractères, sans accents. Les accents ne sont utilisables proprement que via
les codes HTML décrit précédemment. Nous allons maintenant utiliser une astuce pour afficher
correctement de vrai accents.
Décommentez la balise <meta> concernée. Puis taper des mots avec accents dans la balise
<body>. Actualisez votre page et observez le résultat. A présent, remplacez la balise <meta>
concernée par <meta http-equiv="Content-Type" content="text/html ; charset=UTF-8"
/>. Notez que seule la valeur de l’attribut content change. Enregistrez, actualisez la page et
observez le résultat. Vos accents s’affichent correctement dans un cas et pas dans l’autre. Celà
dépend de l’encodage de votre fichier. Normalement, les éditeurs de texte vous permettent de
choisir l’encodage au moment d’enregistrer le fichier.
Dans le cas des sites en ligne, si vous voulez utiliser un encodage UTF-8, une manipulation
supplémentaire est nécessaire. Si vous utilisez l’encodage iso8859, vous ne devriez avoir aucun
problème. Nous décrirons la manipulation pour UTF-8 plus tard. Si vous utilisez windows, il
est pour le moment recommandé d’utiliser l’encodage iso, car c’est l’encodage par défaut.
2.2.2
Autres en-têtes
Vous avez pu constater dans les en-têtes la présence de la balise <title>. Cette balise est
obligatoire. Nous ajouterons d’autres en-têtes au cours de la formation.
2.3
Le corps de la page
2.3.1
Les éléments de base
Vous l’avez deviné, le corps de la page est tout ce qui se trouve dans la balise body. Nous
allons décrire le contenu à l’aide de différents délimiteurs. Voici une page d’exemple.
<html>
<head>
<t i t l e>F a i r e un c o r p s à 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>
7
2
STRUCTURE D’UNE 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 é <br />
Avec r e t o u r à l a l i g n e
</ 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 é à
d r o i t e</ div>
< !−− Un s é 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 é .</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 fichier 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é de gérer celà.
Vous voyez qu’il y a un certain nombre de conteneurs <div>. Les DIV sont les conteneurs de
base. Il est déconseillé de mettre du texte libre en dehors d’un DIV, car celà rend sa manipulation par des styles moins facile. Vous comprendrez celà plus tard.
8
2
2.3.2
STRUCTURE D’UNE PAGE HTML
Les liens hypertextes
Toute la magie du web vient du fameux lien hypertexte. Un lien hypertexte pointe vers un
emplacement dans une page web. Il est bien écrit un emplacement. En effet, 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és des
ancres.
Les liens se gèrent 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éfinissent une ancre vers laquelle d’autres liens peuvent
pointer.
Pour définir une ancre, on utilise la syntaxe <a id="nomdelancre"></a>.
Pour définir 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 l’adresse de la page. Ce peut être soit une page désignée par un chemin relatif
par rapport à la page consultée (comme sousrepertoire/autrepage.htm) ou une URL externe
(comme http ://www.google.fr).
Faisons un petit test. Créons deux fichiers appelés page1.htm et page2.htm dans le même
répertoire et plaçons-y respectivement les codes suivants.
<html>
<head>
<t i t l e>Une p r e m iè 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éro 1
<html>
<head>
<t i t l e>Une deuxième page</ t i t l e>
</head>
<body>
9
2
STRUCTURE D’UNE PAGE HTML
<a href=” page1 . htm”>Retour v e r s l a p r e m iè r e page</a>
</body>
</html>
Page numéro 2
Tester un peu tout ça en ouvrant page1.htm dans vote navigateur. Pour tester le comportement des ancres, je vous invite à consulter le fichier ancres.htm. Son listing n’est pas présenté
ici en raison de la grande quantité de texte qu’il contient.
2.3.3
Utiliser des styles pour améliorer la page
Nous allons ici ajouter une balise d’en-tête. C’est une balise particulière puisqu’elle contient
du texte, qui n’est pas du HTML mais du langage CSS comme Cascading Style Sheet ou feuille
de style en cascade. Bien que ce terme puisse effrayer, CSS est un langage simple et fort puissant.
Jugez-en par vous-même avec le listing suivant, que vous trouverez dans le fichier 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è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é f a u t d e s 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 , à d r o i t e , en bas , à
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
2
STRUCTURE D’UNE PAGE HTML
/∗ On d é 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à 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 à
c e r t a i n s é lé 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 une b o r d u r e p l e i n de 2 p i x e l s
d ’ é 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é 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é j à v i s i t é ∗/
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
3
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 é à une c l a s s e CSS pour l u i donner un
l o o k d i f f é 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à libère le code HTML de toute description de couleur et
de disposition. C’est la philosophie du Web de l’avenir. Le code (X)HTML définit des données,
puis on les met en forme avec d’autres outils. Ici, l’outil est le langage CSS. Celà suffit à gérer
un site web même riche, car un site web n’utilise jamais trop de styles différents, sans quoi il
deviendrait très vite illisible.
Il est possible d’utiliser CSS directement dans les balises (X)HTML à l’aide de l’attribut style.
Consulter la sous-section ”corps de la page” pour voir de petits exemples avec les textes en gras,
italique et souligné. Par exemple, avoir un bout de texte rouge souligné, on peut utiliser <span
style="color :#ff0000 ;text-decoration :underline ;">Du texte rouge souligné</span>.
3
3.1
Mettre vos pages en ligne
Avoir un hébergeur
Pour mettre vos pages en ligne, vous devez disposer d’un hébergeur. INP-Net vous offre un
service d’hébergement avec votre compte. Déposez simplement vos pages web dans le répertoire
www public de votre compte INP-Net. Vous accéder à votre site et à vos pages via l’adresse
http ://bde.enseeiht.fr/~votrelogin/unepage.htm.
12
4
3.2
RÉFÉRENCES
Définir la page d’accueil
Par mesure de sécurité et de confort, il convient que l’adresse http ://bde.enseeiht.fr/~votrelogin/
tombe directement sur une page, de surplus celle de votre choix. Pour ce faire, il suffit de placer
un fichier nommé index.htm ou index.html dans le répertoire www public. Ce fichier sera la
page d’accueil.
3.3
Gérer le problème de l’encodage UTF-8
Si vos fichiers sont encodés en UTF-8, il est possible que les accents s’affichent mal. Si vous
rencontrez ce problème, vous pouvez éditer le fichier .htaccess (ou le créer s’il n’existe pas) et
y ajouter les lignes :
AddCharset UTF-8 .html
AddCharset UTF-8 .htm
4
Références
13