Sie sind auf Seite 1von 29

le langage HTML

Maxime Morge
Université Jean Monnet - ISEAG

Maxime Morge L2 ECO - slide #1


Plan

Introduction
Pourquoi est-il nécessaire de connaître le langage
● Title
● Plan
HTML ?
Introduction Structure du contenu
Comment stucturer le contenu d’une page ?
Structure du contenu

Données hypertexte/multimédia

Mise en forme
Données hypertextes/multimédia
Comment insérez des images liés des documents
numériques ?
Mise en forme
Comment mettre en forme le contenu d’une page ?

Maxime Morge L2 ECO - slide #2


Introduction

Maxime Morge L2 ECO - slide #3


Internet

Internet = interconnexion des 6= réseaux informatiques.


Protocole de communication = langage informatique qui
● Title
● Plan

Introduction dotent les réseaux d’une fonctionnalité. Par exemple :


● Internet
● Adresses
● Protocole HTTP
HTTP (HyperText Transfer Protocol) → transférer
● La toile
● Principe du HTML
des données sur Internet ;
HTTPS (Secure HyperText Transfer Protocol) →
● Structure HTML
● Caractères spéciaux

Structure du contenu transférer des données cryptées sur Internet ;


Données hypertexte/multimédia
FTP (File Transfer Protocol) → transférer des
Mise en forme
données de grande taille sur Internet ;
SMTP (Simple Mail Transfer Protocol) →
transférer le courrier.
POP (Post Office Protocol) → récupérer son
courrier sur un serveur distant.

Maxime Morge L2 ECO - slide #4


Adresses

Adresse IP = identifiant unique des ordinateurs (par ex :


● Title
● Plan
195.83.83.36).
Introduction Nom de machine = nom.domaine.ext (par ex :
webcit.univ-st-etienne.fr) .
● Internet
● Adresses
● Protocole HTTP
● La toile
● Principe du HTML
DNS (Domain Name Service) = système de traduction
● Structure HTML adresse IP ↔ nom de machine
● Caractères spéciaux

Structure du contenu Port = une "boîte au lettre" unique sur la machine (par ex :
Données hypertexte/multimédia FTP/21, SMTP/25, HTTP/80, POP3/110).
Mise en forme
URL (Unified Ressource Location) = adresse pour une
ressource
protocole ://(user :pwd@)nom.domaine.ext-
:port)/chemin
(par ex,
ftp ://morg1234 :171177@cit.univ.fr :8080/perso/note.txt)

Maxime Morge L2 ECO - slide #5


Protocole HTTP

Le protocole HTTP = le plus utilisé sur Internet.

Maxime Morge L2 ECO - slide #6


La toile

Web = toile d’araigné constituée par les pages web.


Site = ensemble de pages cohérentes.
● Title
● Plan
Hyperlien = lien entre :
des éléments dans une même page ;
Introduction
● Internet
● Adresses
● Protocole HTTP
● La toile
différentes pages d’un même site ;
différentes pages de différents sites.
● Principe du HTML
● Structure HTML
● Caractères spéciaux

Structure du contenu
Page web écrit avec un éditeur WYSIWYG (What You See
Données hypertexte/multimédia
Is What You Want) :
Mise en forme Dreamweaver, FrontPage, M$ Word, Openwriter, . . .
ou un éditeur WYSIWYW (What You Is What You Want) :
un éditeur de fichier texte (par ex, Notepad).
What you see is not what you want ! ⇒
HTML ("HyperText Markup Language") = langage de
formatage de données liées/multlimédia (texte, images,
. . . ).

Maxime Morge L2 ECO - slide #7


Principe du HTML

Balise = un mot clef encadré par le caractère inférieur (<)


● Title
et le caractère supérieur (>) (par ex, <H1> ou <h1>).
● Plan
Comment utiliser les balises ?
Introduction
● Internet
● Adresses
un texte est encadré entre une balise ouvrante et
● Protocole HTTP
● La toile
balise fermante :
● Principe du HTML <b> Ce texte est en gras </b> →
Ce texte est en gras
● Structure HTML
● Caractères spéciaux

Structure du contenu
une balise est unique :
Données hypertexte/multimédia
un retour à la ligne <br> après la balise →
Mise en forme
un retour à la ligne
après la balise
Attribut = 1 élément (cle="valeur") de la balise ouvrante
qui définit une propriété supplémentaire :
<p align="center">paragraphe centré</p>
Les balises peuvent être imbriquées :
<b><i>Texte est en italique</i> et en gras</b> →
Texte est en italique et en gras
Maxime Morge L2 ECO - slide #8
Structure HTML

Une page HTML = un fichier texte commençant par <HTML>


● Title
● Plan
et finissant par </HTML>.
Introduction Structure d’une page Web = en-tête (titre, . . . ) + corps
(contenu).
● Internet
● Adresses
● Protocole HTTP
● La toile
● Principe du HTML
L’en-tête = entre <HEAD> et </HEAD>.
Le corps = entre <BODY> et </BODY>.
● Structure HTML
● Caractères spéciaux

Structure du contenu
<HTML>
Données hypertexte/multimédia
<HEAD>
Mise en forme
<TITLE> Le titre </TITLE>
</HEAD>

<BODY>
Contenu de votre page
</BODY>
</HTML>

Maxime Morge L2 ECO - slide #9


Caractères spéciaux

une page web = fichier texte écrit avec 128 caractères


● Title
● Plan
(A-Z|a-z|0-9. . . )
Introduction une page web = document numérique affiché avec 256
caractères (A-Z|a-z|0-9|é,à,. . . )
● Internet
● Adresses
● Protocole HTTP

Code HTML caractère


● La toile
● Principe du HTML
● Structure HTML
● Caractères spéciaux
&agrave ; à
é
Structure du contenu
&eacute ;
Données hypertexte/multimédia

Mise en forme
&ocirc ; ô
&ugrave ; ù
&oelig ; œ
&quot ; "
&amp ; &

Maxime Morge L2 ECO - slide #10


Structure du contenu

Maxime Morge L2 ECO - slide #11


Structuration hiérarchique

Structuration hiérarchique des paragraphes =


● Title
● Plan
6 niveaux de titre (heading) :
<h1>Titre de niveau 1</h1> →
Titre de niveau 1
Introduction

Structure du contenu
● Structuration hiérarchique
● Conteneur
● Listes
<h2>Titre de niveau 2</h2> →
Titre de niveau 2
● Tableaux
● Exemple de tableau

Données hypertexte/multimédia

Mise en forme
...
<h6>Titre de niveau 6</h6> →
Titre de niveau 6
<p>paragraphe</p> →
paragraphe

Maxime Morge L2 ECO - slide #12


Conteneur

Conteneur = balise qui identifie un contenu particulier


● Title
● Plan
Balise Contenu
Introduction

Structure du contenu
<CITE> une citation
● Structuration hiérarchique
● Conteneur
<CODE> une instruction
<EM> une emphase
● Listes
● Tableaux

<SAMP> un exemple
● Exemple de tableau

Données hypertexte/multimédia

Mise en forme
<STRONG> une accentuation
<DFN> une definition
<BLOCKQUOTE> une note
<ADDRESS> une adresse

<EM> Une emphase </EM> →


Une emphase

Maxime Morge L2 ECO - slide #13


Listes

Liste = texte structuré et divisé en 6= articles


Liste ordonnée :
● Title
● Plan <ol>
Introduction <li> article 1 </li>
Structure du contenu
● Structuration hiérarchique
</ol>
Liste non-ordonnée :
● Conteneur
● Listes
● Tableaux
● Exemple de tableau
<ul>
Données hypertexte/multimédia
<li> article 1 </li>
Mise en forme
</ul>
Liste de définition :
<dl>
<dt>Terme 1</dt>
<dd>Définition 1</dd>
<dt>Terme 2</dt>
<dd>Définition 2</dd>
</dl>

Maxime Morge L2 ECO - slide #14


Tableaux

● Title
● Plan
Tableau = texte structuré et divisé en lignes et en colonnes
Introduction

Structure du contenu
● Structuration hiérarchique
● Conteneur
● Listes
Balise Contenu
● Tableaux
● Exemple de tableau
<TABLE></TABLE> le tableau
Données hypertexte/multimédia <CAPTION></CAPTION> le titre
Mise en forme
<TR></TR> une ligne (Table Row)
<TH></TH> cellules d’en-tête (Table Header )
<TD></TD> cellules de valeur (Table Data)

Maxime Morge L2 ECO - slide #15


Exemple de tableau
<TABLE BORDER="1">
<CAPTION> Le titre du tableau </CAPTION>
● Title
<TR>
● Plan <TH> Titre A1 </TH>
Introduction <TH> Titre A2 </TH>
Structure du contenu
● Structuration hiérarchique
<TH> Titre A3 </TH>
● Conteneur <TH> Titre A4 </TH>
● Listes
● Tableaux </TR>
● Exemple de tableau
<TR>
Données hypertexte/multimédia
<TH> Titre B1 </TH>
Mise en forme
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</TABLE>
Titre A1 Titre A2 Titre A3 Titre A4
Titre B1 Valeur B2 Valeur B3 Valeur B4
Le titre du tableau

Maxime Morge L2 ECO - slide #16


Données hypertexte/multimédia

Maxime Morge L2 ECO - slide #17


Lien hypertexte

Lien hypertexte = élément (par ex, texte bleu souligné)


qui mène vers une autre URL.
● Title
● Plan
Ancrage (<a href="URL">Cliquez ici</a>) où URL=
Introduction un page cible d’un autre site (par ex,
Structure du contenu <a href="http ://www.google.fr">Google</a>)
un page cible d’un même site avec :
Données hypertexte/multimédia
● Hyperlien
● Image

Mise en forme
un chemin relatif (par ex,
<a href="../index.html">Présentation</a>)
un chemin absolu (par ex,
<a href="H :\TDinfo
\persosite\index.html">Présentation</a>)
des éléments dans une même page :
un ancrage (par ex,
<a name="statut.html#art1">Article 1</a>) ;
un lien (par ex,
<a href="statut.html#art1">Go to</a>

Maxime Morge L2 ECO - slide #18


Image

Les formats d’images acceptés =


JPEG (.jpg, .jpeg) : un grand nombre de couleurs,
● Title
● Plan

Introduction images bien compressées ;


Structure du contenu
PNG (.png) : taille faible, peu de couleurs, images
Données hypertexte/multimédia
● Hyperlien
entrelacées (affichage progressif) ;
GIF (.gif) : idem que PNG en moins bien.
● Image

Mise en forme

Balise simple =
<IMG SRC="URL" ALT="Texte remplaçant l’image"
TITLE="Texte à afficher">.
Par ex, <IMG SRC="./moi.png" ALT="Ma photo"
TITLE="C’est moi">

Maxime Morge L2 ECO - slide #19


Mise en forme

Maxime Morge L2 ECO - slide #20


Palette de ouleur

chiffre hexadécimal = 0, 1, . . . , 9, A, B, . . . , F
attribut="# RRVVBB" = 6 chiffres hexadécimaux
● Title
● Plan

Introduction représentant 2 à 2 les tons de rouge (R), de vert (V) et de


Structure du contenu bleu (B).
Données hypertexte/multimédia

Mise en forme
couleur codage
red # FF0000
● Palette de couleur
● Style du contenu
● Styles de texte
● Styles des paragraphes
● Style des listes
green # 00FF00
● Exemple de liste
● Style des tableaux
blue # 0000FF
magenta # FF00FF
● Conclusion

orange # FFA500

Maxime Morge L2 ECO - slide #21


Style du contenu

Attributs de la balise <BODY>


● Title
● Plan
Attribut Effet
Introduction BACKGROUND="url" l’image à l’url en arrière-plan
Structure du contenu
BGCOLOR="couleur" couleur en arrière-plan
couleur des liens hypertextes
Données hypertexte/multimédia
LINK="couleur"
Mise en forme
● Palette de couleur
● Style du contenu
ALINK="couleur" couleur des liens actifs
● Styles de texte
● Styles des paragraphes
VLINK="couleur" couleur des liens déjà visités
● Style des listes
● Exemple de liste TEXT="couleur" couleur du texte
● Style des tableaux
● Conclusion

Maxime Morge L2 ECO - slide #22


Styles de texte

Balise de style = modifient l’apparence du texte.


● Title
● Plan
<b> Ce texte est en gras </b> →
Introduction
Ce texte est en gras
Structure du contenu <i> Ce texte est en italique </i> →
Données hypertexte/multimédia Ce texte est en italique
Mise en forme
● Palette de couleur <tt> Écrit par une machine à écrire </tt> →
● Style du contenu
● Styles de texte Écrit par une machine à écrire
● Styles des paragraphes
● Style des listes Ce texte est en <sub>indice</sub> →
Ce texte est en indice
● Exemple de liste
● Style des tableaux
● Conclusion

Ce texte est en <sup>exposant</sup> →


Ce texte est en exposant

Maxime Morge L2 ECO - slide #23


Styles des paragraphes et des titres

ALIGN = attribut pour la disposition du texte :


ALIGN=left : texte aligné à gauche ;
● Title
● Plan

Introduction
ALIGN=right : texte aligné à droite ;
Structure du contenu

Données hypertexte/multimédia
ALIGN=center : texte centré ;
Mise en forme ALIGN=justify : texte justifié ;
● Palette de couleur
● Style du contenu
● Styles de texte
Exemple :
● Styles des paragraphes
● Style des listes
<H1 ALIGN=justify> Titre centré </H1> →

Titre centré
● Exemple de liste
● Style des tableaux
● Conclusion

Maxime Morge L2 ECO - slide #24


Style des listes

Balise Attribut Valeur Effet


● Title
● Plan <OL> TYPE 1 chiffre
Introduction
A capital
a minuscule
Structure du contenu

Données hypertexte/multimédia

Mise en forme
I chiffre romain capital
● Palette de couleur
● Style du contenu
i chiffre romain minuscule
<UL> TYPE circ puce circulaire
● Styles de texte
● Styles des paragraphes
● Style des listes
● Exemple de liste square puce carrée
● Style des tableaux
● Conclusion

Maxime Morge L2 ECO - slide #25


Exemple de liste

<ol type=I >


● Title <li> article 1
● Plan
<ol type=i>
Introduction
<li>article 1.1</li>
Structure du contenu
</ol>
Données hypertexte/multimédia
</li>
Mise en forme
● Palette de couleur
<li> article 2</li>
● Style du contenu
● Styles de texte
</ol>
● Styles des paragraphes
● Style des listes
● Exemple de liste
● Style des tableaux

1. article 1
● Conclusion

(a) article 1.1


2. article 2

Maxime Morge L2 ECO - slide #26


Style des tableaux

● Title
● Plan

Cf tableau.html
Introduction

Structure du contenu

Données hypertexte/multimédia

Mise en forme
● Palette de couleur
● Style du contenu
● Styles de texte
● Styles des paragraphes
● Style des listes
● Exemple de liste
● Style des tableaux
● Conclusion

Maxime Morge L2 ECO - slide #27


Attribut Valeur Effet
● Title
● Plan HEIGHT nombre hauteur de l’image
Introduction
WIDTH nombre largeur de l’image
bottom
Structure du contenu

Données hypertexte/multimédia
ALIGN
Mise en forme
center Alignement
● Palette de couleur
● Style du contenu left
middle de l’image
● Styles de texte
● Styles des paragraphes
● Style des listes
● Exemple de liste top
● Style des tableaux
● Conclusion
right
BORDER nombre largeur de la bordure.

Maxime Morge L2 ECO - slide #28


Conclusion

Page web = document numérique écrit en HTML


● Title
● Plan Éditeurs WYSIWYG limités (lisibilité, fonctionnalité, . . . )
HTML = langage de formatage de données multimédia
Introduction

(texte, images, sons, vidéos) liées.


Structure du contenu

Données hypertexte/multimédia

Mise en forme
Comment afficher des documents sons, vidéos, pdf, . . . ?
● Palette de couleur
● Style du contenu
⇒ Plugin = acrobat reader, realplayer, . . .
Comment homgénéiser la mise en forme ?
● Styles de texte
● Styles des paragraphes

⇒ Feuille de style (CSS).


● Style des listes
● Exemple de liste
● Style des tableaux
● Conclusion Comment interagir avec l’internaute ?
⇒ Langage de programmation (Javascript, PHP, . . . ).

Maxime Morge L2 ECO - slide #29