Option « initiation au code informatique » E2C
Le langage HTML RESSOURCES
1. Présentation générale.
Contrairement à une page réalisée avec un logiciel de traitement de texte, on peut accéder au code source d’une
page web. Ce code décrit le contenu de ce document.
Les pages web sont écrites en HTML (HyperText Markup Language). C’est un langage de balisage : il permet
d’insérer dans le document des balises qui définissent ce que signifient les différentes parties du texte, et de créer des
liens.
Ce langage n’est pas compilé : il est interprété par le navigateur web.
Le principe consiste à encadrer un texte par deux balises complémentaires : - avant le texte : <balise>
- après le texte : </balise>
Exemples :
- décrire un paragraphe : - décrire un titre de niveau 1 :
<p>Contrairement à une opinion
<h1>Qu’est ce que le Lorem Ipsum ?</h1>
répandue, le Lorem Ipsum n'est pas...</p>
- décrire un lien vers un site : - les balises peuvent s’imbriquer :
<a href="https://fr.lipsum.com">Le site <p>Un lien vers <a href="https://fr.lipsum.com">le site
Lorem ipsum</a> Lorem ipsum</a> sur lequel vous pouvez cliquer.</p>
2. Les caractéristiques principales du HTML. <!DOCTYPE html>
La forme globale d’un document HTML est la suivante : <html>
<head>
... en-tête
</head>
page
<body>
... corps
Exemple d’un code HTML </body>
</html>
L’en-tête - head
<!DOCTYPE html>
Il regroupe des informations qui ne sont pas <html>
affichées par le navigateur dans la page : <head>
- le titre de la page, <meta charset="utf-8">
- des métadonnées (auteur, mots-clés,...), <!--On peut insérer des commentaires-->
- les références aux feuilles de style,... <title>Une première page</title>
</head>
<body>
<h1>Le titre principal</h1>
<h2>Une liste non numérotée</h2>
<ul>
<li>Choix 1</li>
<li>Choix 2</li>
Le corps – body <li>Choix 3</li>
</ul>
<h2>Un premier texte</h2>
Elle contient l’ensemble de la page web qui sera <p>Ceci est un premier paragraphe
affichée : le contenu et les balises. contenant du texte.<br>Ici un lien vers un
<a href="https://fr.lipsum.com"> site de
faux-texte.</a> pour créer des paragraphes.</p>
<h2>Une image</h2>
<imgsrc="http://www.lyc-7mares-maurepas.ac-versailles.fr/
JOOMLA/images/lycee1.jpg" width="400" height="300"
alt="Une image du lycée">
</body>
</html>
3. Avec quel logiciel saisir du code HTML ?
Avec n’importe quel éditeur de texte ! À ne pas confondre avec un traitement de texte...
Notepad++ : https://notepad-plus-plus.org/downloads/
Sublime Text : https://www.sublimetext.com/
Atom : https://atom.io/
Il existe également des logiciels en ligne qui permettent de tester des codes HTML : https://liveweave.com/
1/3
4. Les principales balises.
Structure Html
<HTML>...</HTML> Début et fin de fichier HTML
<HEAD>...</HEAD> Zone d'en-tête d'un fichier HTML
<BODY>...</BODY> Début et fin du corps du fichier HTML
<TITLE>...</TITLE> Titre affiché par le navigateur (élément de HEAD)
<BODY bgcolor=colcod> Couleur d'arrière-plan
<BODY background=urlimg> Image d'arrière-plan
Mise en forme des caractères
<I>...</I> Texte en italique
<B>...</B> Mise en gras du texte
<U>...</U> Texte souligné
<FONT color=codecouleur>...</FONT> Texte en couleur
<FONT size=X>...</FONT> Taille des caractères où X est une valeur de 1 à 7
Mise en forme du texte
<!--...--> Commentaire ignoré par le navigateur
<BLOCKQUOTE>...</BLOCKQUOTE> Citation (introduit un retrait du texte)
<BR> A la ligne
<CENTER>...</CENTER> Centre tout élément compris dans le tag
<DIV align= alignement> ...</DIV> Aligne l'élément (alignement peut être center, left, right, justify)
<Hx>...</Hx> Titre où x a une valeur de 1 à 7
<P>...</P> Paragraphe
Hyperliens
<A href="http://...">...</A> Lien externe vers une page Web
<A href="mailto:...">...</A> Lien vers une adresse Email
<A href="fichier.htm">...</A> Lien vers la page locale fichier.htm située dans le même dossier
Images
<IMG src=url_img> Insertion d'une image au format gif, jpg ou png
<IMG ... width=x height=y> Mise à l'échelle de l'image en pixels
<IMG ... border=x> Définition de la bordure d'une image
<IMG ... alt=text> Texte alternatif lorsque l'image n'est pas affichée
Liste
<UL [type=puce]> Liste non numérotée (dite à puces)
<LI>... </LI> Eléments de liste (puce peut être "disc", "square" ou "circle")
<LI>...</LI>...
</UL>
<OL [type=numérotation]> Liste numérotée (numérotation peut être "1" (1,2,3), "a" (a,b,c), "A"
<LI>... </LI> (A;B;C), "I" (I,II,III,IV) ou "i" (i,ii,iii,iv))
<LI>...</LI>...
</OL>
Tableau
<TABLE>...</TABLE> Définition d'un tableau
<TABLE border=x> Largeur de la bordure
<TABLE cellpadding=x> Espace entre la bordure et le texte
<TABLE cellspacing=x> Épaisseur du trait entre les cellules
<TR>...</TR> Ligne du tableau
<TD>...</TD> Cellule du tableau
2/3
5. Comment structurer le contenu d’un page HTML ?
Lors de votre navigation sur internet, si vous observez le code source des pages HTML que vous constultez, vous
remarquerez deux balises qui reviennent régulièrement <DIV> et <SPAN>.
<DIV> : l'élément de division du contenu.
<SPAN> : un conteneur générique en ligne (inline) pour les contenus phrasés.
Ces deux balises sont des conteneurs destinés à structurer le contenu de la page HTML, ils ont un rôle complémentaire.
DIV sert à agencer le contenu de la page tandis que SPAN sert surtout à associer un style à une partie d'un texte.
5.a) <DIV>
La balise <DIV> est un bloc, donc un objet rectangulaire.
Elle possède les attributs margin (marge), padding (marge interne), width (largeur), height (hauteur).
La balise <DIV> peut être utilisée afin de grouper des éléments pour leur appliquer un style
Exemple :
Note : dans cet exemple, le style appliqué au bloc est « warning », défini dans les règles CSS.
5.b) <SPAN>
La balise <SPAN> est inline, elle s'inscrit dans le flux du contenu.
On ne peut lui spécifier une hauteur ni une largeur ni l'entourer d'une marge.
Elle peut être placée à l'intérieur d'un paragraphe pour délimiter une partie de celui-ci sans affecter en soi l'apparence du
texte.
Exemple :
Note : dans cet exemple, le style appliqué aux parties de texte est «ingredient», défini dans les règles CSS.
3/3
