Langage HTML
"HTML" signifie "HyperText Markup Langage".
Le "html" (HyperText Markup Langage) est un langage descriptif permettant de mettre en forme du
texte, des images, du son, etc. destinés à être visualisés grâce à un navigateur (ex : chrome)
◦ Ce langage communique avec le navigateur web grâce à des balises. ◦ I permet d'indiquer au
navigateur le type de contenu à afficher :
• un paragraphe,
• une liste à puces
• une image,
• un lien hypertexte
•etc.
◦ I permet de structurer la page et lui donner un sens
HTML est un langage de balisage
Les balises servent à indique des : informations au navigateur web
Des données à afficher, et comment les affiche
Des informations sur la structure de la page
Une balise, ça ressemble à ça :
<P> un paragraphe <\p>
Anatomie d'une page web
Une page web est toujours composée :
• De la déclaration du début du document (balise <html>...</html>)
• D'une en-tête (balise <head>...</head>)
• D'un titre (balise <title>...</title>
• D'une zone de contenus (balise <body>...</body>)
La squelette d'une page web
<html>
<head>
<Title> le titre </Title>
</head>
<body>
Contenu de la page
</body>
</html>
La balise <html></html>
• Elle marque le début du document HTML
• Elle se fer
me à la fin du document HTML
<html>
</html>
La balise <head></head>
C'est l'entête de la page
• On met cette balise entre la balise ouvrante et fermante <html>
• Elle contient les métadonnées (titre, mots-clés)
<html>
<head>
</head>
</html>
La balise <Title></ title>
C'est le titre qui afficher sur la fenetre du navigateur
• On met cette balise entre la balise ouvrante et fermante <Head>
<head>
<title> </title>
</head>
La balise <body></body>
C'est la balise qui doit contenir le contenu de toute la page
<Body>
contenu de la page
</body>
Comment créer une page Web?
1. Démarrer l'éditeur ex : Bloc Note
2. Taper la squelette du document [ex : <HTML> <Head>,<Title>,<body>
3. Enregistrer le document en changement 'extension (:txt en .HTML)
4, Fermer le document
Comment Ouvrir une page web?
1. Soit un double clique sur le document (s'il est déjà reconnu par le
navigateur ex: chrome,opera.,...)
2. Ou bien:
->Cliquer avec le BD sur le document
>Ouvrir avec
> Choisir le navigateur souhaité
Définir les marges de page
<html>
<head>
<title>Texte du titre</title>
</head>
<body marginwidth="50" marginheight="100" topmargin="100" leftmargin="50">
<h1>Texte</h1>
beaucoup de texte etc.
</body>
</html>
• La modification des marges de la page se fait dans I'ouverture <body> du fichier HTML.
• En ajoutant
• leftmargin=valeur : vous permet de déterminez Tl'espace entre le bord gauche ou droit de la
fenêtre et le contenu du fichier
• topmargin=valeur : vous permet vous déterminez I'espace entre le bord haut ou bas de la fenêtre
et le contenu du fichier,
• marginwidth= et marginheight= vous permet déterminez les espaces correspondants à la largeur et
la hauteur. Toutes les mentions se font en pixels.
• La marge gauche est toujours aussi grande que la marge droite de même que la marge haute
et la marge basse.
Les options de la balise BODY
<BODY
BGCOLOR="#RRVVBB"
BACKGROUND= < Nom de l'Image'
LINK="#RRVVBB"
VLINK="#RRVVBB"
TEXT="#RRVVBB"
BGCOLOR : couleur de fond de la fenêtre
BACKGROUND :image de fond (répétée sous forme de mosaïque)
TEXT : couleur du texte ordinaire *
LINK : couleur du textequi est un lien
VLINK: couleur du textequi est un lien amenant sur une page déjà vue
Mise en forme des paragraphes
<CENTER>
</CENTER>
Centre les éléments inclus entre la balise ouvrante et la balise
fermante
<JUSTIFY> ... </JUSTIFY>
Justifie les éléments inclus entre la balise ouvrante et la balise
fermante
À utiliser avec prudence 1
<BR>
Pas de balise fermante 1
Retour à la ligne
<BR><BR> : 2 retours à la ligne = 1ligne d'espacement
Mise en forme des paragraphes
<P ALIGN="LEFT|CENTER|RIGHTIJUSTIFY">
</P>
Aligi i ment des paragraphes situés
<P,ILIGN=. et </P>
Pour passer (ou sauter) une ligne, utiliser des <BR>
Possibilité d'utiliser une balise ouvrante SANS balise fermante
<P>
<BR><BR>
équivaut
Autre équivalence
<P ALIGN="CENTER"> .. */P>
équivaut à
<CENTER> </CENTER>