002 Le HTML

Transféré par

Mohand Bakir
5 vues6 pages
truc

Titre original

002_Le_HTML

Copyright

© © All Rights Reserved

Formats disponibles

PDF, TXT ou lisez en ligne sur Scribd

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Signaler ce document

Description :

truc

Droits d'auteur :

© All Rights Reserved
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Signaler comme contenu inapproprié
5 vues6 pages

002 Le HTML

Titre original :

002_Le_HTML

Transféré par

Mohand Bakir

Description :

truc

Droits d'auteur :

© All Rights Reserved
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Signaler comme contenu inapproprié
sur 6

Une (petite) initiation au langage HTML

Julien Coulié

Partie 1 : Les bases

Le langage HTML (HyperText Markup Language) est un langage de description de


documents qui est le standard utilisé pour les pages web. Le contenu d’un fichier HTML se
divise en deux parties : le contenu de la page web et les balises (le code HTML). Une balise
se reconnaît car elle est entourée des caractères "<" et ">". Par exemple, <p> est une balise.
Ces balises sont uniquement utilisées par le navigateur (le logiciel que vous utilisez pour
afficher les pages web) pour hiérarchiser et mettre en forme le contenu de la page.

Une page web n’est rien d’autre qu’un fichier texte interprété par un navigateur, un
éditeur de texte tel que le bloc-notes de Windows suffit pour en créer une. Un fichier HTML
(.html) est composé d’un en-tête (head) puis d’un corps (body). L’en-tête contient plusieurs
informations sur la page : son titre (qui apparaît dans la barre de titre de la fenêtre), les mots-
clés utilisés par les moteurs de recherche, des appels vers d’autres fichiers (css ou JavaScript
par exemple).
Le corps quant à lui contient tous les éléments qui apparaissent dans la page web.
Dernière chose, une balise s’ouvre mais se referme aussi : la balise fermante est identique à
celle qui ouvre, avec un « / » après le « < ».

Voici le contenu d’un fichier HTML pour une page web minimale :

<html>
<head>
<title>Le minimalisme…</title>
</head>

<body>
Hello world
</body>
</html>

Pour trouver des exemples de pages web, rien de plus simple : il est possible de
regarder comment un site web est conçu en allant dans le menu Affichage de votre navigateur
puis de cliquer sur « Afficher la source ». Vous aurez alors accès au code HTML de la page.

Les principales balises HTML :

<html>...</html> Début et fin de fichier HTML


<head>...</head> En-tête d’une page web
<body>...</body> Début et fin du corps de la page web
<title>...</title> Titre affiché par le navigateur (contenu dans le head)
Mise en forme des caractères :

<hn>…</hn> Titre où n est le niveau hiérarchique et est compris entre 1 et 7


<p>…</p> Paragraphe
<b>…</b> Texte en gras
<i>…</i> Texte en italique
<sub>…</sub> Texte en indice
<sup>…</sup> Texte en exposant
<u>…</u> Texte souligné
<center>…</center> Centre tout élément compris entre les balises
<br /> Saut de ligne (attention : pas de balise fermante !)
<hr /> Trait horizontal

La plupart des balises peuvent prendre des arguments. Ces derniers permettent de
préciser la façon dont le contenu doit apparaître. Ils se mettent à l’intérieur de la balise
ouvrante, à la suite du nom de celle-ci, et sont séparés par un espace. En voici quelques uns :

bgcolor="#rrvvbb" Couleur d’arrière plan en hexadécimal


background="image.jpg" Image d’arrière plan, au format jpg, gif ou png
color="#rrvvbb" Couleur du texte
align="left" (ou center, right ou justify) Alignement horizontal, pour un titre ou un paragraphe par exemple

<font color="#ff0000">Ce texte sera rouge</font> mais la


suite aura la couleur normale.

<p align="right">Ce (court) paragraphe sera aligné à


droite</p>

Les images :

<img src="image.jpg" /> Insertion d’une image au format jpg, gif ou png
width=x height=y Impose une dimension en pixels à l’image
alt="un texte" Texte alternatif quand l’image ne peut être affichée

Les hyperliens :

<a href="http://...">…</a> Lien vers une page web


<a href="mailto :…">…</a> Lien vers une adresse de courriel
<a href="fichier.html">…</a> Lien vers une page locale

Les listes :

<ul>…</ul> Liste à puces


<ol>…</ol> Liste numérotée
<li>…</li> Elément de liste

Les tableaux :

<table>…</table> Définition d’un tableau


<tr>…</tr> Définition d’une ligne du tableau
<td>…</td> Cellule du tableau
<td colspan="x">…</td> Fusionne x cellules horizontalement
<td rowspan="x">…</td> Fusionne x cellules verticalement

Code hexadécimal pour la définition des couleurs :


En langage HTML, les couleurs sont définies par leur code hexadécimal. Ce code
utilise la synthèse additive et donne ainsi les composantes en rouge, vert et bleu. Chacune
d’elles étant définie par 2 caractères, variant de 0 à f. On obtient donc une valeur comprise
entre 000000 (noir) et ffffff (blanc).
Certaines couleurs peuvent aussi être appelées en mettant leur nom (en anglais) à la
place de #rrvvbb : white, black, blue, red, green, yellow, purple, orange, maroon, smoke,
snow, tomato,…

Afficher sa page web en local :


Pour afficher le fruit de votre travail, il faut enregistrer le fichier HTML (attention de
ne pas l’enregistrer au format .txt) puis d’ouvrir le fichier. Normalement, c’est le navigateur
web qui devrait se lancer. Pour éditer le fichier HTML par la suite, il suffira de démarrer
l’éditeur de texte puis d’ouvrir le fichier à partir de ce dernier.

Son site web à l’EMAC :


L’école permet d’héberger son site web grâce à son compte UNIX. Pour ce faire, il
suffit de créer un répertoire "WWW" à la racine de son compte, et de mettre les droits en
lecture et exécution à tous. A l’intérieur de ce dossier, le fichier HTML représentant la page
d’accueil devra s’appeler "index.html". On pourra accéder à ce dernier en tapant l’adresse
suivante : http://perso.enstimac.fr/~login

Quelques adresses :
- Un cours assez complet pour réaliser un site web : http://www.siteduzero.com/
- Une table des couleurs HTML parmi d’autres : http://www.dsi.univ-
paris5.fr/cocoul3t.html
- Le validateur de code du World Wide Web Consortium : http://validator.w3.org/
Partie 2 : Tout est dans le style…
Vous avez vu avec la première partie que nous pouvons assez facilement donner un style
particulier à notre page web, mais cela peut vite devenir laborieux dans le cas d’un plus vaste
projet (un site entier). Un exemple ? Imaginez que vous vouliez attribuer une couleur à tous
vos liens hypertextes. Il faudrait alors avec la méthode précédente inclure dans toutes les
balises <a> l’attribut color. Un peu lourd comme travail, non ? Heureusement, c’est là
qu’interviennent les CSS (Cascading Style Sheets), autrement dit les feuilles de style en
cascade.

CSS, entend mon appel !


Pour utiliser ces CSS, on emploie dans le fichier html 2 attributs : id (comme identifiant) et
class (comme classe, mais vous l’auriez deviné sans moi j’espère). La différence entre les
deux est que le premier est unique, comme les empreintes digitales d’une personne, alors que
le second peut être utilisé plusieurs fois. L’exemple suivant donnera l’id "haut" à la balise
img :

<img src="mon_image.jpg" id="haut" />

Seule cette balise pourra avoir cet identifiant, et les propriétés qui y sont associées. L’exemple
suivant par contre montre que plusieurs balises peuvent bénéficier de l’attribut class :

<a href="lien1.html" class="navigation">Premier lien</a>


<a href="lien2.html" class="navigation">Second lien</a>

Utilisation
La feuille de style est, de la même manière qu’un fichier html, un simple fichier texte qui
porte l’extension .css. Deux autres moyens existent cependant pour utiliser les propriétés
CSS : inclure une balise <style>…</style> dans l’en-tête du fichier html ou utiliser l’attribut
style à l’intérieur des balises html. L’exemple suivant montre comment utiliser les 3 méthodes
possibles :

<html>
<head>
<link type="stylesheet" type="text/css" href="feuille_style.css" />
<style>
body {
background-color: #aaaaff ;
font-family: sans-serif;
}
#haut {
border: 1px solid #000000;
}
a.navigation {
color: #ffa500;
}
</style>
</head>
<body>
<img src="mon_image.jpg" id="haut" />
<a href="lien1.html" class="navigation">Premier lien</a>
<a href="lien2.html" class="navigation">Second lien</a>
<p style="font-size: 12pt">Et voici un exemple pour utiliser l’attribut style</p>
</body>
</html>

Comme vous l’avez peut-être remarqué dans l’exemple précédent, pour attribuer une
propriété à toutes les balises du même type, on marque simplement le nom de la balise suivi
d’une accolade ouvrante, puis la liste des propriétés voulues. On fini la liste par une accolade
fermante.
Pour les éléments identifiés par un id, on utilise le symbole dièse (#) suivi par le nom de l’id.
Quant aux balises regroupées au sein d’une classe, on met le nom de la balise suivi du nom de
la classe, séparés par un point.

Utilisations plus techniques


On peut attribuer les mêmes propriétés à plusieurs balises, il suffit pour cela de mettre toutes
les balises et/ou identifiants avant l’accolade ouvrante en les séparant par une virgule :

p, a.navigation {
font-style: italic ;
}

Une petite subtilité est à noter : si on spécifie une propriété pour une balise plusieurs fois, ce
sera le dernière spécification qui sera utilisée. Il faut donc faire attention à l’ordre dans lequel
on place les différentes déclarations.

#texte {
font-family: serif;
}

p.introduction {
font-family: monospace;
}

p{
font-family: sans-serif;
}

Ici, tous les caractères contenus dans l’élément #texte utiliseront une police à empattement
(serif) mais les paragraphes avec la classe "introduction" auront une police monospace. La
dernière déclaration annule la précédente puisqu’elle impose à tous les paragraphes une police
sans-serif. Il faut inverses les deux dernières déclarations.

Afin d’éviter d’englober trop d’éléments dans une déclaration, on peut la préciser :

#texte p {
text-align: justify;
}

Cette déclaration n’aura d’effet que pour les paragraphes compris dans l’élément #texte.
Mise en boîte
Une utilisation très utilisée des CSS est le couplage de balises div et des identifiants. On peut
voir les div comme des boîtes, que l’on peut mettre côte à côte ou les unes dans les autres,
avec ce que l’on veut à l’intérieur. (Et comme pour des boîtes, pour bien s’y retrouver, je vous
conseille de bien ranger.)

Les attributs des balises div les plus utiles sont :


- position : donne le positionnement, relatif (coordonnées spécifiées par rapport à
l’élément précédent) ou absolu (coordonnées spécifiées à partir du coin supérieur
gauche du cadre) ;
- width : la largeur ;
- height : la hauteur ;
- margin(-top, -right-, -bottom, -left) : espace entre le div et les autres éléments

Les pseudos-classes
Ces classes sont un peu particulières et sont séparées de l’élément auquel elles font référence
par le caractère ":". Aucune déclaration class n’est nécessaire dans le fichier html.
- a:hover : lien hypertexte lors du survol du curseur de la souris ;
- a:visited : lien hypertexte lorsque la page vers lequel il pointe a été visitée ;
- p:first-letter : première lettre d’un paragraphe (utile pour faire des lettrines).

Les principales unités


- px : pixel ;
- pt : point ;
- em : largeur du caractère m (dépend de la taille de police en cours) ;
- ex : hauteur du caractère x (dépend de la taille de police en cours) .

Centres d'intérêt liés

Vous aimerez peut-être aussi