Information8 HTML

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 ?

Introduction

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 ;

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.

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
DNS (Domain Name Service) = système de traduction
● Structure HTML adresse IP ↔ nom de machine
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)

Protocole HTTP
Le protocole HTTP = le plus utilisé sur Internet.

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.
● Structure HTML
Page web écrit avec un éditeur WYSIWYG (What You See
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,
. . . ).

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
une balise est unique :
un retour à la ligne <br> aprè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 centré</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
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
L’en-tête = entre <HEAD> et </HEAD>.
Le corps = entre <BODY> et </BODY>.
● Structure HTML
<HTML>
<HEAD>
Mise en forme
<TITLE> Le titre </TITLE>
</HEAD>
<BODY>
Contenu de votre page
</BODY>
</HTML>

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
● Structure HTML
&agrave ; à
é
&eacute ;
Mise en forme
&ocirc ; ô
&ugrave ; ù
&oelig ; œ
&quot ; "
&amp ; &


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
● Structuration hiérarchique
● Conteneur
● Listes
Titre de niveau 2
● Tableaux
● Exemple de tableau
Mise en forme
...
Titre de niveau 6
<p>paragraphe</p> →
paragraphe

Conteneur
Conteneur = balise qui identifie un contenu particulier

● Title
● Plan
Balise Contenu
Introduction
<CITE> une citation
● Conteneur
<CODE> une instruction
<EM> une emphase
● Listes
● Tableaux
<SAMP> un exemple
Mise en forme
<STRONG> une accentuation
<DFN> une definition
<BLOCKQUOTE> une note
<ADDRESS> une adresse
<EM> Une emphase </EM> →

Une emphase

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

Liste ordonnée :
● Title
● Plan <ol>
Introduction <li> article 1 </li>
</ol>
Liste non-ordonnée :
● Conteneur
● Listes
● Tableaux
<ul>
<li> article 1 </li>
Mise en forme
</ul>
Liste de définition :
<dl>
<dt>Terme 1</dt>
<dd>Définition 1</dd>
<dt>Terme 2</dt>
<dd>Définition 2</dd>
</dl>

Tableaux
● Title
● Plan
Tableau = texte structuré et divisé en lignes et en colonnes
Introduction
● Conteneur
● Listes
Balise Contenu
● Tableaux
<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)

Exemple de tableau
<TABLE BORDER="1">
<CAPTION> Le titre du tableau </CAPTION>
● Title
<TR>
● Plan <TH> Titre A1 </TH>
Introduction <TH> Titre A2 </TH>
<TH> Titre A3 </TH>
● Conteneur <TH> Titre A4 </TH>
● Listes
● Tableaux </TR>
<TR>
<TH> Titre B1 </TH>
Mise en forme
<TD> Valeur B2 </TD>
</TR>
</TABLE>
Titre A1 Titre A2 Titre A3 Titre A4
Titre B1 Valeur B2 Valeur B3 Valeur B4
Le titre du tableau


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 :
● Hyperlien
● Image
Mise en forme
un chemin relatif (par ex,
<a href="../index.html">Présentation</a>)
un chemin absolu (par ex,
<a href="H :\TDinfo
\persosite\index.html">Pré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>

Image
Les formats d’images acceptés =

JPEG (.jpg, .jpeg) : un grand nombre de couleurs,
● Title
● Plan
Introduction images bien compressées ;

PNG (.png) : taille faible, peu de couleurs, images
● Hyperlien
entrelacées (affichage progressif) ;
GIF (.gif) : idem que PNG en moins bien.
● Image
Mise en forme
Balise simple =
<IMG SRC="URL" ALT="Texte remplaçant l’image"
TITLE="Texte à afficher">.
Par ex, <IMG SRC="./moi.png" ALT="Ma photo"
TITLE="C’est moi">

Mise en forme

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).
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

Style du contenu
Attributs de la balise <BODY>

● Title
● Plan
Attribut Effet
Introduction BACKGROUND="url" l’image à l’url en arrière-plan
BGCOLOR="couleur" couleur en arrière-plan
couleur des liens hypertextes
LINK="couleur"
Mise en forme
ALINK="couleur" couleur des liens actifs
● Styles de texte
VLINK="couleur" couleur des liens déjà visités
● Exemple de liste TEXT="couleur" couleur du texte
● Conclusion

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> Écrit par une machine à écrire </tt> →
● Styles de texte Écrit par une machine à écrire
● Style des listes Ce texte est en <sub>indice</sub> →
Ce texte est en indice
● Conclusion
Ce texte est en <sup>exposant</sup> →

Ce texte est en exposant

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 ;
ALIGN=center : texte centré ;
Mise en forme ALIGN=justify : texte justifié ;
● Styles de texte
Exemple :
<H1 ALIGN=justify> Titre centré </H1> →
Titre centré
● Conclusion

Style des listes
Balise Attribut Valeur Effet

● Title
● Plan <OL> TYPE 1 chiffre
Introduction
A capital
a minuscule
Mise en forme
I chiffre romain capital
i chiffre romain minuscule
<UL> TYPE circ puce circulaire
● Styles de texte
● Exemple de liste square puce carrée
● Conclusion

Exemple de liste
<ol type=I >

● Title <li> article 1
● Plan
<ol type=i>
Introduction
<li>article 1.1</li>
</ol>
</li>
Mise en forme
<li> article 2</li>
● Styles de texte
</ol>
1. article 1
● Conclusion
(a) article 1.1

2. article 2

Style des tableaux
● Title
● Plan
Cf tableau.html
Introduction
Mise en forme
● Styles de texte
● Conclusion

Attribut Valeur Effet
● Title
● Plan HEIGHT nombre hauteur de l’image
Introduction
WIDTH nombre largeur de l’image
bottom
ALIGN
Mise en forme
center Alignement
● Style du contenu left
middle de l’image
● Styles de texte
● Exemple de liste top
● Conclusion
right
BORDER nombre largeur de la bordure.

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.

Mise en forme
Comment afficher des documents sons, vidéos, pdf, . . . ?
⇒ Plugin = acrobat reader, realplayer, . . .
Comment homgénéiser la mise en forme ?
● Styles de texte
⇒ Feuille de style (CSS).

● Conclusion Comment interagir avec l’internaute ?
⇒ Langage de programmation (Javascript, PHP, . . . ).

Information8 HTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Information8 HTML

Hochgeladen von

Copyright:

Verfügbare Formate

le langage HTML

Maxime Morge L2 ECO - slide #1

Maxime Morge L2 ECO - slide #2

Maxime Morge L2 ECO - slide #3

Internet = interconnexion des 6= réseaux informatiques.

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

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

Maxime Morge L2 ECO - slide #4

Adresse IP = identifiant unique des ordinateurs (par ex :

Maxime Morge L2 ECO - slide #5

Le protocole HTTP = le plus utilisé sur Internet.

Maxime Morge L2 ECO - slide #6

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

Maxime Morge L2 ECO - slide #7

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

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

Maxime Morge L2 ECO - slide #9

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

Code HTML caractère

Maxime Morge L2 ECO - slide #10

Maxime Morge L2 ECO - slide #11

Structuration hiérarchique des paragraphes =

Maxime Morge L2 ECO - slide #12

Conteneur = balise qui identifie un contenu particulier

<EM> Une emphase </EM> →

Maxime Morge L2 ECO - slide #13

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

Maxime Morge L2 ECO - slide #14

Maxime Morge L2 ECO - slide #15

Maxime Morge L2 ECO - slide #16

Maxime Morge L2 ECO - slide #17

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

Maxime Morge L2 ECO - slide #18

Les formats d’images acceptés =

Introduction images bien compressées ;

Maxime Morge L2 ECO - slide #19

Maxime Morge L2 ECO - slide #20

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

Maxime Morge L2 ECO - slide #21

Attributs de la balise <BODY>

Maxime Morge L2 ECO - slide #22

Balise de style = modifient l’apparence du texte.

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

Maxime Morge L2 ECO - slide #23

ALIGN = attribut pour la disposition du texte :

Maxime Morge L2 ECO - slide #24

Balise Attribut Valeur Effet

Maxime Morge L2 ECO - slide #25

<ol type=I >

(a) article 1.1

Maxime Morge L2 ECO - slide #26

Maxime Morge L2 ECO - slide #27

Maxime Morge L2 ECO - slide #28

Page web = document numérique écrit en HTML

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

⇒ Feuille de style (CSS).

Maxime Morge L2 ECO - slide #29

Das könnte Ihnen auch gefallen