Cours

Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Web, Langage HTML.
Walid Belkhir
Université de Provence
[email protected]
http://www.lif.univ-mrs.fr/∼belkhir/
1 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Plan
1
Organisation et contenu du module
2
Internet et le Web
3
Un outil pour le Web : HTML
2 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Outils pour le Web : organisation
20 heures de cours + 30 heure de TPs.
Contrôle de connaissances : partiel + examen + projet.
Note finale :
NF = max(
2ET + P
(3E + TP)
, E ), où ET =
3
4
3 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Outils pour le Web : contenu
Partie 1 : web, langage HTML, feuilles de styles.
Partie 2 : langage JavaScript.
Partie 3 : langage php.
Partie 4 : MySQL.
Partie 5 : XML.
4 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Bibliographie
Création d’un site Web du débutant à l’expert, Daniel
Ichbiah
HTML et JavaScript, P. Chaléat et D. Charnay
PHP et MySQL, Luke Welling
http://www.commentcamarche.net
5 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Plan de la partie 1 (2 séances)
Internet et le Web
Un outil pour le Web : le langage HTML.
Notions avancé de HTML :
Les cadres.
Les image sensibles.
Les feuilles de styles.
6 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Plan
1
Organisation et contenu du module
2
Internet et le Web
3
Un outil pour le Web : HTML
7 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Internet
Un réseau de réseaux
Basé sur l’architecture TCP/IP
Fonctionne en mode client serveur
Offre un ensemble de services (connexion à distance, mail,
transfert de fichiers, ...)
Un construction buttom-up :
réseau local, réseau régional, réseau national, réseau mondial
8 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Bref historique d’Internet
1969 : ARPANET : l’ancêtre d’Internet
Des gros ordinateurs des universités américaines se connectent
au réseau ARPANET.
1970-1980 : première connexion avec la Norvège et Londre.
1983 : naissance d’Internet (protocole TCP/IP)
1987-1992 : apparaissions des fournisseurs d’accès, les
entreprises se connectent au réseau.
1992- ... : l’expansion d’Internet : ouverture au grand public
9 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
World Wide Web
Architecture pour accéder à des documents liés entre eux et
situés sur des machines reliées par Internet
Architecture basée sur 3 concepts
la localisation : URL
le protocole : HTTP
le langage : HTML
10 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Le Web
Une page web
contient du code HTML de base
désignée par une adresse URL
L’URL a au moins 2 composantes :
le nom d’hôte contenant la page web
le chemin d’accès sur l’hôte
ex. http ://www.lif.univ-mrs.fr/dupond/doc
L’agent utilisateur pour le web est le browser (Firefox,...)
Le serveur Web : Apache
11 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Fonctionnement du Web
Le client (navigateur ou browser) dialogue avec un serveur
Web selon le protocole HTTP
Le serveur vérifie la requête, et transmet l’information
Le navigateur interprète le fichier reçu et l’affiche
Possibilité d’exécution du code coté serveur et/ou client
12 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Plan
1
Organisation et contenu du module
2
Internet et le Web
3
Un outil pour le Web : HTML
13 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
HTML : Hyper Text Markup Language
un langage de spécification qui permet de structurer et
d’afficher des objets (textes, images, vidéos ... )
un documents HTML s’écrit avec un éditeur de texte (Emacs,
...)
un document HTML doit pouvoir s’afficher à l’aide de
n’importe quel navigateur (FireFox, Safari, Opera ... )
mais les affichages ne sont pas toujours identiques.
14 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
HTML
Un document HTML :
définit la structure (statique) d’un document Web
composé d’un ensemble de commande de formattage
basé sur la notion d’environnement déterminé par un début et
une fin (notion de balises)
pour manipuler du HTML, il suffit :
un éditeur de texte (Emacs, ...)
un navigateur Web (Firefox, ...)
15 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
HTML : les balises
Une balise est définie entre <>
ex. < BALISE > ... < /BALISE >
L’imbrication des balises est possible
ex. < B1 >< B2 > Un texte < /B2 >< /B1 >
Le chevauchement des balises n’est pas possible
ex. < B1 >< B2 > Un texte < /B1 >< /B2 >
On ne distingue pas entre minuscule/majuscule dans la
définition des balises.
16 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
HTML : les balises
Les balises représentent des constructions :
style de paragraphe (titre, listes ...)
style de caractères (gras, italique, souligné ...)
références hyper-texte
tableaux
formulaires
···
17 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Structure d’un document HTML
Un exemple
<HTML>
<HEAD>
<TITLE> titre de la fenetre
</TITLE>
</HEAD>
<BODY>
corps du document
</BODY>
</HTML>
Cela donne
HEAD contient les titres ...
TITLE affiché en haut de la fenêtre.
BODY contient le document.
18 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balises et attributs
Attribut avec affectation de valeur :
ex. <BALISE attribut1=”4” attribut2=”red”> ....
Attributs de ”base” (applicable pour la plupart des balises ) :
class=”nom” : applique au style du contenu
id=”nom” : donne un nom à la balise
lang=”langue” : spécifie la langue du contenu (ISO369)
Attributs liés au événements : onclick=”action”, ondblclick,
onkeypress, ...
19 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <HR> et Balise <BR>
Balise <HR> : trait horizontal
< HR size=”2”> (en pixels)
< HR width=”200”> (en pixels)
< HR width=”60%”>
< HR align=center/left/right>
pas de fermeture
Balise <BR> : saut de ligne (break)
pas de fermeture
20 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <P> et Balises de titres
Balise <P>
début d’un nouveau paragraphe
fermeture optionnelle
attributs align=”center/left/right/justify”
Balises <Hn>... </Hn >, où n varie entre 1 et 6
spécifie la taille des caractères (ordre décroissant)
texte est en caractère gras et suivit de saut de ligne
attribut align=”center/left/right”
21 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <P>
Un exemple
<HTML> <HEAD>
<TITLE> titre de la fenetre
</TITLE>
</HEAD>
<BODY>
<P> Un premier paragraphe </P>
<P> ceci est un autre paragraphe
sur plusieurs ligne et reformat&eacute ;
</P>
</BODY>
</HTML>
Cela donne
22 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise de titre
Un exemple
<HTML> <HEAD>
<TITLE> titre de la fenetre
</TITLE>
</HEAD>
<BODY>
<H1> Titre ”H1” </H1>
<P> Texte sous le titre </P>
<H2> Titre ”H2’ </H2>
<P> Texte sous le titre </P>
<H3> Titre ”H3” </H3>
<P> Texte sous le titre </P>
</BODY> </HTML>
Cela donne
23 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Les caractères spéciaux
caractères accentués : &<lettre> <accent> ;
accent :
acute (aigu), grave (grave), circ (ˆ),
uml (.. )
exemples : &eacute ; (é), &icirc ; (ı̂), &ccdil ; (ç) ...
24 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balises <UL>, <OL>, <LI> : listes
Non numérotées
<UL>
<LI>... </LI> : list item
</UL>
attribut : type="square/circle/disc" pour <UL> ou
<LI> (priorité ?)
Numéroté
<OL>
<LI>... </LI>
</OL>
attribut type="1/A/a/I/i" pour <OL>
attribut start="valeur" pour <OL> (valeur de départ)
attribut value="valeur"
attribut value="valeur" pour <LI> (réinitialise le
séquencement à la nouvelle valeur)
25 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balises <UL> et <LI> : un exemple
Un exemple
<UL>
<LI>premier item </LI>
<LI>deuxieme item </LI>
<UL>
<LI> premier sous item </LI>
<LI> deuxieme sous item </LI>
</UL>
</UL>
Cela donne
26 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balises de formatage de texte
<DIV>...</DIV> permet un alignement à droite ou à
gauche
attribut : align="left/center/right"
<FONT>...</FONT> est remplacé par
<SMALL>, <BIG>, ...
ou par les feuilles de styles (CSS).
27 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Formatage de caractères
<B> ... </B> : gras
<I> ... </I> : italique
<TT> ... </TT> : machine à écrire
<STRIKE> ... </STRIKE> : texte barré
<U> ... </U> : souligné
<SUB> ... </SUB> : indice
<SUP> ... </SUP> : exposant
<SMALL> ... </SMALL> : petite police
<BIG> ... </BIG> : grande police
<CODE> ... </CODE> : programme informatique
28 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balises pour les liens hyper-texte
Un exemple
<HTML> <HEAD>
<TITLE> ma fenetre
</TITLE>
</HEAD>
<BODY>
Texte avec un
<A href= ”cible.html”> lien hyper-text
</A>
</BODY> </HTML>
Cela donne
29 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <A> :liens et étiquette
Définition d’un hyperlien <A href="nom"> texte </A>
href= "nom" : nom du document à lier :
une URL : http://yahoo.fr
une adresse mail : [email protected]
un chemin relatif : OutilsWeb/Cours/
une étiquette : #LABEL
texte : pour représenter le lien dans le document.
Définition d’une étiquette
<A name=”LABEL”> ... </A>
le texte entre <A> et </A> n’est pas une zone cliquable.
30 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <BODY> : paramètre de la page
Fond d’écran : <BODY background=”nom image”>
répétition d’une image sur l’écran du navigateur.
Couleurs :
<BODY
bgcolor = ”...” : couleur de fond
text = ”...” : couleur du texte
link = ”...” : couleur des liens non encore visités
vlink = ”...” : couleur des liens déjà visités
alink = ”...” : couleur des liens lors du clic
>
Noms des couleurs :
en clair : black, gray, red, blue ...
en notation hexadécimale RGB (ex : ”#000000” )
31 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <IMG> : insertion d’images
Un exemple
Cela donne
<P> Texte sur l’image </P>
<P><IMG src=”ph.jpg”></P>
<P> Texte sous l’image </P>
32 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <IMG> : insertion d’images
<IMG src = ”nom”
nom local ou URL distante
<IMG height = ”hauteur” width =”largeur”
spécifie la hauteur et la largeur de l’image en pixels
possibilité de redimensionner l’image
<IMG align = ”bottom/middle/top/left/right”
alignement par rapport au texte
33 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <IMG> : insertion d’images
<IMG border = ”nbr pixel”
spécifie la taille du cadre autour de l’image
<IMG vspace = ”nbr pixels” hspace = ”nd pixel”
tailles des marges (espacement image/texte)
<IMG alt = ”une info-bulle”
affiché à la place de l’image pendant le téléchargement
affiche une info quand la souris passe sur l’image
Nb. L’attribut alt est utilisable dans les autres balises
34 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Tableaux : les balises <TABLE>, <TR>, <TH>, et
<TD>
<TABLE>...</TABLE> définit un tableau dans un nouveau
paragraphe
Spécification d’une ligne :
<TR> ... </TR> : marque le début et la fin d’une ligne
Spécification des cellules
Cellules d’en tête (centré en gras) :
<TH>...</TH>
Cellule de donnée :
<TD>...</TD>
35 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <TABLE>
Un exemple
Cela donne
<TABLE BORDER>
<TR>
<TH> colonne 1 </TH>
<TH> colonne 2 </TH>
</TR>
<TR>
<TD> ligne1, colonne1 </TD>
<TD> ligne1, colonne2 </TD>
</TR>
<TR>
<TD> ligne2, colonne1 </TD>
<TD> ligne2, colonne2 </TD>
</TR>
</TABLE>
36 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <TABLE>
fixer le nombre de colonnes :
ex. <TABLE cols=”nb”>
fixer la taille du tableau
la taille est calculé, par défaut, automatiquement en fonction
du contenu des cellules.
largeur fixée :
<TABLE width = ”nbr pixels ou %”>
hauteur fixée :
<TABLE height = ”nbr pixels ou %”>
37 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <TABLE>
Epaisseur des bordures du tableau :
encadrement du tableau : attribut border
épaisseur des traits de bordure
<TABLE border=”nbr pixels”>
Espacement
distance (en pixels) entre les bords et le contenu des cellules
<TABLE cellpadding = ”nbr pixels”>
distance (en pixels) entres les cellules du tableaux
<TABLE cellspacing = ”nbr pixels”>
Positionnement du tableau dans la page
<TABLE align = ”left/center/right”>
38 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <TABLE>
Image d’arrière plan
<TABLE background = ”nom image”>
Couleurs du fond et des bords
<TABLE bgcolor = ”couleur”>
<TABLE bordercolor = ”couleur”>
39 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balise <TR>, <TH> et <TD>
alignement horizontal du contenu dans une cellule
<TD align = ”left/center/right”> ... </TD>
couleurs d’arrière plan d’une cellule ou d’une ligne :
<TR bgcolor = ”couleur ou #RRVVBB”> ... </TR>
<TD bgcolor = ”couleur ou #RRVVBB”> ... </TD>
40 / 41
Organisation et contenu du module
Internet et le Web
Un outil pour le Web : HTML
Balises <TH> et <TD>
Largeur et hauteur d’une cellule
La hauteur d’une cellule est appliqué à toutes les cellules de la
ligne
La largeur d’une cellule est appliqué à toutes les cellules de la
colonne
(il suffit de formatter une seule cellule)
<TH width = ”nbr pixels/ %” height = ”nbr pixels / %” >
Empêchement du passage automatique à la ligne dans la
cellule
<TD nowrap>
41 / 41