docHTML5 La toile mondiale Réseau TCP/IP
download 
Plainte Transcription
HTML5 La toile mondiale Réseau TCP/IP
SysCom
SysCom
HTML5
La toile mondiale
Miguel Tomasena
Références :
– http://www.siteduzero.com
– http://www.w3schools.com/html5
– http://www.w3.org/
– html5 Doctor
• WWW (World Wide Web)
1
2
SysCom
SysCom
Réseau
WWW = HTTP + URL + HTML
Qu'est-ce qu'un réseau ?
• HTTP = HyperText Transfer Protocol.
• Un réseau est un ensemble d'ordinateurs et
périphériques connectés les uns avec les autres.
• URL = Uniform Ressource Locator
• HTML = HyperText Markup Language
• Il permet de faire circuler des données selon des
règles bien définies.
3
4
SysCom
SysCom
HTTP
• Communication entre navigateur et serveur :
– Le navigateur effectue une requête HTTP
– Le serveur traite la requête puis envoie une réponse
HTTP
TCP/IP
• Protocole TCP/IP.
– TCP (Transmission Control Protocole), assure que les
paquets de données arrivent à destination dans le bon
ordre,
– IP (Internet Protocole), assure de l'adressage.
• Adresse IP
Ce sont ces adresses que connaissent les ordinateurs pour
communiquer entre eux.
Numéros de 32 bits, composé de 4 nombres entre 0 à 255 (4 fois 8
bits).
Par exemple : 194.153.205.26
5
6
SysCom
SysCom
TCP/IP
Uniform Resource Locator
• DNS - Domain Name Service
Correspondance : adresses IP
L'URL répond à 3 questions:
– où ?
– quoi ?
– comment ?
noms de domaine
Exemple : "fr.wikipedia.org" correspond à "212.85.150.133"
Exemple :
Les noms de domaines sont construits de façon analogue à ceux des
adresses IP : des hiérarchies séparées par points.
Le niveau le plus élevé se trouve à la fin d'un nom de domaine. Il s'agit
d'abréviations qui désignent un pays ou un type.
Exemples : "fr", "de", "com", "net".
Un domaine peut avoir des sous-domaines.
Exemples : "java.page.net", "javascript.page.net".
7
SysCom
Adresse Universelle
http://www.sebsauvage.net/compren
Où ? Dans le serveur www du
Comment ?
dre/index.html
Avec
le protocole
http
domaine : sebsauvage.net.
dans le répertoire
/comprendre/
8
SysCom
Quelques dates
Progression du nombre de serveurs
Nombre de serveur entre 1995 et 2009
• 1967 SGML+DTD (recom.
ISO en 1986)
• 1989 HTML (Tim Berners
au CERN)
• 1990 Web
• 1994 W3C
9
• 1994 Netscape
• 1995 JavaScript
• 1995 Internet Explorer 2.0
• 1996 CSS
Contenu et Forme
• 1998 XML
•Tendance
: séparer
le contenu de forme.
• 2000
XHTML
• Deux langages :
• 2004
Firefox
• HTML pour
le contenu
• CSS pour la forme
• 2008
Google Chrome
• Séparer le contenu (HTML) la forme (CSS) permet :
• 2007
- 2014 HTML5
• une meilleur organisation du contenu,
1
0
SysCom
SysCom
• facilite la mise à jour
• généralise la diffusion vers divers périphériques
1
1
Quoi ? On va
chercher le
fichier
index.html.
1
2
SysCom
SysCom
HTML5
Le balisage :
Qu'est ce que le HTML ?
• Langage de balisage, sous-ensemble de SGML.
• Ensemble d'éléments (balises) dont le nom est défini.
• Balises structurés sous forme d'arbre.
• Langage de description d'un contenu.
• Ce n'est pas un langage de programmation.
• Permet de délimiter clairement des parties de texte pour qu'elles
puissent être reconnues.
• On peut associer à chaque balise des informations additionnels sous
la forme d'attributs.
Caractéristiques de HTML5 :
• Nouvelle balises « structurantes »
• Travaille avec CSS3
• Vidéo et audio
• Graphiques 2D et 3D
• Contrôle de formulaires
• Stockage locale de valeurs
• Premier langage de balisage : SGML Standard Generalised Markup
Language en 1967
1
3
1
4
SysCom
SysCom
HTML5
HTML5
Le balisage en détail :
Le balisage en détail :
• Les balises ont un nom. Elles sont constituées d'une balise ouvrante
et d'une balise fermante.
• Les balises peuvent contenir des attributs composés d'un nom, du
signe = et d'une valeur entre guillemets. Exemple :
• Les balises sont délimitées par < et
<phrase> Cette phrase
<verbe personne="3" nombre="singulier">est</verbe>
un exemple.
</phrase>
>
• Exemple de balise ouvrante : <body> et
une balise fermante : </body>
• Les balises encadrent soit d'autres balises appelés fils, soit du texte.
Exemple :
• Pour représenter certains caractères spéciaux, on utilise des entités.
Une entité commence par & et se termine par ;
<phrase>Cette phrase <verbe>est</verbe> un exemple.</phrase>
1
5
Par exemple, < à la place de <
1
6
SysCom
SysCom
HTML5
Exemple document HTML5 :
Source
1
7
HTML5
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Titre du document</h1>
<p>Du texte
<img src="photo.jpg" alt="image" />
</p>
<ul>
<li>Un <em>item</em> de liste</li>
<li>Un autre item de liste</li>
<li>Un troisième item de liste</li>
</ul>
</body>
</html>
HTML5
Exemple document HTML :
Affichage :
Source
<html>
<head> <title>Titre du document</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Titre du document</h1>
<p>Du texte
<img src="photo.jpg" alt="image" />
</p>
<ul>
<li>Un <em>item</em> de liste</li>
<li>Un autre item de liste</li>
<li>Un troisième item de liste</li>
</ul>
</body>
1</html>
8
Vue arborescence :
SysCom
SysCom
Bien formé et Valide
Bien formé et Valide
Règles d’écriture d’un document bien formé (conforme à XML) :
• Les balises fermantes sont obligatoires.
On cherche à écrire des documents HTML :
1. Bien Formés et
2. Valides
• Les balises uniques, ou mono balises, se terminent par />
• Les valeurs d'attributs sont toujours encadrées par des
guillemets.
• Les balises et les attributs sont en minuscules
• L'imbrication doit être "bien faite". Exemple d'erreur :
<section> cette division contient un titre <h1> Important ! </section> </h1>
1
9
2
0
SysCom
SysCom
Bien formé et Valide
Intérêt d’avoir un document Bien Formé :
• Simplification de l'analyse.
Bien formé et Valide
XHTML5 : combinaison de HTML5 et XML
• Impose une rigueur dans l'écriture du document.
• Suivi de la syntaxe de XML
Exemple d'un document bien formé.
Est-il valide ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
</head>
<body class="principale">
<p>Paragraphe
<h1>Titre</h1>
</p>
</body>
2 </html>
1
SysCom
2
2
SysCom
Bien formé et Valide
Document valide :
• Les balises et leur imbrication doivent être conformes à la
grammaire sous-jacente de HTML5.
Le validateur du WC3 (http://validator.w3.org/) permet de
vérifier si le code est bien formé et valide.
2
3
Bien formé et Valide
• Exemple de Validateur (http://validator.w3.org/) :
2
4
SysCom
SysCom
Environnement de travail
• Editeurs visuels :
• Dreamweaver (payant)
Structure d'un document HTML5
Plus précisément
XHTML
• Document html5 minimal :
génération automatique
de code
• Nvu ("concurrent" gratuit de Dreamweaver)
• Amaya (gratuit)
début document
racine
• Editeurs classiques :
html
• Notepad++ (windows)
• Gedit (linux)
head
• TextWrangler (MacOS)
2
5
meta
2
6
SysCom
SysCom
Deux grandes familles de balises
• Dans le corps il y a deux types de balises : Bloc et En-Ligne.
• parties entières du document (notion de boîte).
• Paragraphe :
la balise <p> délimite un paragraphe
Exemple, fragment de la page :
<body>
<!-- corps de la page -->
<p>Premier paragraphe</p>
<p>Deuxième paragraphe</p>
</body>
• elles sont précédée et suivie d'un saut de ligne.
• En-Ligne (au fil du texte) mettent en valeur du texte (span, a).
Elles peuvent contenir du texte et d'autres balises En-Ligne, mais
pas de balises de type Bloc.
Exemple paragraphe
2
8
SysCom
SysCom
Saut de ligne
<body>
<p>Premier
paragraphe
</p>
</body>
• Les multiples espaces, sauts de ligne et les tabulations ne sont
pas interprétés (affichés) textuellement.
paragraphe1.html
• Entités caractères permettent le codage de caractères spéciaux :
Saut de ligne : <br/>
Exemple
<body>
<p>Premier <br/>paragraphe
</p>
</body>
Texte
• Le texte (#PCDATA ) est tapé en ligne. La fin de ligne est gérée
par le navigateur.
A l'affichage ?
paragraphe2.html
<
permet d'afficher un "<"
>
idem pour le signe supérieur ">"
&
permet de coder le et commercial "& "
"
sert aux guillemets
insère un blanc insécable
€
2
9
paragraphe
La balise <body> contient la partie visible du document HTML.
• peuvent contenir : du texte, des balises En-Ligne et des
balises Bloc.
2
7
title
• Attributs génériques (peuvent être utilisés dans toutes les balises) :
id class style title
• Bloc :
• les balises Bloc ont une structure avec une dimension
(hauteur, largeur), des marges internes (padding) et externes
(margin), et surtout une position.
body
3
0
SysCom
SysCom
Les titres
• Titres de hiérarchie différente : <h1>, <h2>, <h3> jusqu'à <h6>.
Les titres
Exemple :
• <h1> signifié "titre très important".
Le choix du niveau du titre doit être fait en
fonction du sens pas de la taille.
• Attention : ne confondez pas avec la balise <title> avec <h1>
titres6.html
3
1
3
2
SysCom
Titre et Paragraphe
SysCom
Exemple fragment du code :
Mise en valeur du texte
Marquer et faire ressortir du texte.
• Balises En-ligne :
• <em> (emphasis) et <strong> marquent l'importance d'une partie
de texte.
• <q> (quote) marque du texte entre guillemets.
• <cite> marque une citation.
• <abbr> marque une abréviation ou un acronyme.
• <dfn> une définition.
3
3
3
4
Exemple paragraphe7
SysCom
SysCom
Mise en valeur du texte
Exemple fragment du code :
em.html
Mise en valeur du texte
• Balises En-ligne :
• <sub> (subscript) et <sup> (superscript) permettent d'écrire en
indice et en exposant.
• <code> permet d'introduire du "code".
• <span> est un élément générique pour marquer du texte. Nous
pouvons lui attribuer une mise en page spécifique à travers les
styles CSS.
• <hr/> (mono-balise) trace une ligne horizontale entre deux bloc .
3
5
3
6
SysCom
SysCom
Mise en valeur du texte
• Exemple fragment du code :
enLigne2.html
Bloc - Division de page
La balise générique <div> sert à regrouper des objets afin de leur
attribuer une mise en forme commune à travers les styles CSS.
• Balise de type Bloc précédée et suivie d'un saut de ligne.
• <div> peut contenir toute sorte de balises (contrairement à <p>).
Se prête bien à la création de la structure d'une page en grands blocs.
ligne horizontale
• Dans html5 div perd d'intérêt au profit de header, footer, nav,
section.
3
7
3
8
Bloc - Bloc de citation
SysCom
SysCom
Bloc - Texte préformaté
• Balise de type Bloc précédée et suivie d'un saut de ligne.
<pre> affiche le texte tel qu'il a été tapé, les espaces, tabulations
et retours chariot sont respectés avec une police à pas fixe.
• Balise de type Bloc précédée et suivie d'un saut de ligne. et hr
(horizontal line) permettent de couper le texte à l'horizontale.
Exemple fragment du code :
Exemple fragment du code :
<blockquote> sert à insérer une citation en retrait d'un paragraphe.
<div>
<h2>Grande maxime</h2>
<p>Comme dirait un grand philosophe du XHTML :</p>
<blockquote>
<!-- Pas de texte directement sous un blockquote -->
<p>To be xhtml or not to be xhtml ?
</p>
</blockquote>
</div>
blockquote.html
3
9
SysCom
<h2>Texte préformaté</h2>
<pre>
||
/==||====\
/
\
/============\
| _
__ |
| | | |__| |
|_|_|______|
</pre>
4
0
Liens hypertexte
• Balises Bloc :
header, footer, nav, section, h1, h2, h3, h4, h5, h6,
p, div, blockquote, pre, hr.
• La puissance de HTML vient du fait qu'il est possible de
donner des liens vers d'autres sections du texte, vers
d'autres pages HTML, ou encore vers d'autres services.
• Balises En-Ligne :
em, strong, q, cite, abbr, dfn, acronym, sub, sup,
code, br, span.
• Les liens sont notés avec la balise a.
• Exemple d'un lien :
Avant de prendre la route cliquez <a href=" . . . "> ici </a>
• Balises génériques :
div et span.
4
1
• <hr /> mono balise de type Bloc affiche une ligne horizontal.
SysCom
Récapitulatif balises
pre.html
• Les liens hypertexte sont de trois types :
• Liens relatifs
• Liens absolus
• Ancres
4
2
SysCom
SysCom
Liens relatifs
Les liens relatifs
• Le chemin pour aller vers le document relié est calculé par
rapport au document lui-même.
Exemples de liens relatifs :
• Exemple de lien vers une autre page située dans le
même répertoire :
• "./" répertoire actuel
• "couleurs.html" identique à "./couleurs.html"
<p>Cliquer <a href="exemple.html">ici</a> pour voir l'exemple.</p>
• "images/graphique.gif" identique à
• Exemple de lien vers une page dans un sous-répertoire :
"./images/graphique.gif"
• "../" répertoire père du répertoire actuel
<p>Cet <a href="Exemples/ex1.html">exemple</a> est le premier.</p>
• L'avantage des liens relatifs :
• ils sont plus courts et
• ils facilitent le déplacement d'un groupe de documents
vers un autre serveur. Les liens restent valides.
4
lien8.html
répertoire ancêtre.
4
4
3
SysCom
• "../../../../ailleurs/fichier.html"
SysCom
Liens absolus
Liens vers des sections
• On utilise des URL (liens absolus) pour indiquer la
localisation des fichiers dans d'autres serveurs.
• Les ancres servent de pointeur sur une partie précise d'un
document HTML.
• Un URL inclut le où ? Le quoi ? Et comment ? de la
ressource à accéder.
• Le nom de l'ancre est indiqué par l'attribut id (obligatoire).
• Exemple :
• Exemples :
<h2 id="conclusion">Pour conclure</h2>
<p>Aller sur le <a href="http://www.univ-savoie.fr/Portail">portail</a>.</p>
• Les liens vers les ancres sont préfixés par le caractère #.
Exemple :
<p>
<a href="http://www.w3schools.com/">Full Web Building Tutorials</a>
</p>
<p>Aller directement à la <a href="#conclusion">conclusion</a></p>
lien9.html
4
5
4
6
SysCom
SysCom
Attributs de <a>
• Quelques autres attributs de la balise <a> :
– accesskey
– tabindex
– type
– title
• Exemples :
4
7
Les images
La plupart des navigateurs Web peuvent afficher des images de
certains formats.
Formats bitmap :
– JPEG (Joint Photographic Experts Group)
– GIF (Graphical Interchange Format)
– PNG (Portable Network Graphics)
lien10.html
<a href="http://www.w3.org/TR/xhtml11/"
accesskey="A" tabindex="1" title="Référence XHTML 1.1 (alt+A)" >
Référence XHTML 1.1
</a>
<a href="lien10.pdf" type="application/pdf" accesskey="B" tabindex="2"
title="document pdf (alt+B)" >
ici
</a>
Formats vectoriels :
– SVG (Scalable Vector Graphics)
– PDF (Portable Document Format)
– FLA/SWF (Flash)
Chaque image prend du temps à être traitée et ralentit
considérablement l'affichage initial du document.
4
8
SysCom
SysCom
Les images
Les images, les sons, les animations
Les images sont insérées avec la mono-balise en-ligne <img />
• On peut faire apparaître les images ou les animations dans
une fenêtre différente lorsque l'utilisateur active un lien.
Attributs obligatoires :
– Le lien vers le fichier contenant l'image : src.
– Texte alternatif : alt.
Ceci correspond à une image externe et est utile si vous ne
souhaitez pas ralentir le chargement du document initial avec
des images importantes en ligne.
Attributs optionnels : height et width.
• Pour inclure un tel lien, il suffit d'ajouter un lien de ce type :
<a href="photo.jpg">
une jolie image
</a>
par défaut : pixels
• Exemple :
<img src="photo.jpg" alt="belle image avion" width="60" />
4
9
• Le placement de l'image : par défaut, l'image est insérée de sorte
que la partie inférieure (bottom) de l'image soit à la même
hauteur que texte.
image10.html
• On utilise la même syntaxe pour les liens sur des animations
et des sons externes. La différence se fait uniquement sur
l'extension du fichier lié.
5
0
SysCom
SysCom
Les images hypertexte
Définition d'une carte avec des zones réactives
• L'image peut être un lien hypertexte. Il suffit d'entourer
l'image avec la balise <a href= …
• La balise <map></map> sert à définir des zones sensibles d'une
image.
• Exemple :
• Exemple :
<map name="MaCarte">
<area shape="rect" href="gauche.html" coords="0,0,35,36" alt="gauche"/>
<area shape="rect" href="droite.html" coords="36,0,65,36" alt="droite" />
</map>
<img src="smile.gif" usemap="#MaCarte" alt="carte'" />
Pour voir mon cv cliquez sur ma photo
<a href="cv.html">
<img src="simile.png" alt="Ma photo" />
</a>
image12.html
image12a.html
5
1
Attributs de area :
alt : texte alternatif obligatoire
shape : nature de la zone décrite ("rect", "circle", "poly")
href : URL appelée lorsqu'on clique sur la zone
coords : coordonnées de la zone décrite
5
2
SysCom
SysCom
Définition d'une carte avec des zones réactives
Image, balise object
Autre alternative avec un programme CGI.
Autre alternative pour insérer une image.
L'attribut ismap de la balise img, permet de repérer la
position de la souris sur le graphique pour exécuter des
actions selon le point du click.
Exemple :
<a href="http://www.univ-savoie.fr/fourniss.php">
<img src="smile.jpg" ismap="ismap" />
</a>
Attention : attribut
La balise <object> </object> sert à insérer un objet
(image, animation, fichier audio, applet java...)
Exemple :
image13.html
<object data="avions.bmp" type="image/bmp" width="200">
<h3>Texte à afficher si pbs</h3>
On donne explicitement
</object>
le type du fichier à insérer
obsolète.
appelle fourniss.php?x,y
où x et y sont les coordonnées pointées.
5
3
Vous pouvez incorporer n'importe quel type de fichier
(texte, vidéo, applet java, musique) si le navigateur
peut l'afficher.
object.html
5
4
SysCom
SysCom
Listes
Listes
• Exemple de fragment de code :
• Balise de type Bloc précédée et suivie d'un saut de ligne.
• Les listes d ’éléments sont très facile à définir.
listes7.html
Trois sont d'usage courant :
<ul> </ul> : liste non numérotée (UNORDERED)
<ol> </ol> : liste numérotée (ORDERED)
<dl> </dl> : liste de définitions
• Les items eux-même sont entourés par <li> (list item) </li>
• Les listes peuvent être imbriquées les unes dans les autres.
5
5
SysCom
5
6
SysCom
Les Tableaux
• Balise :
Les Tableaux
• Exemple fragment de code :
<table> … </table>
– Il faut utiliser <tr> </tr> pour chacune des rangées.
–
notez l'attribut border
Balise pour spécifier les cellules de chaque rangée:
<td> </td>
Illustration des
balises :
5
7
SysCom
SysCom
Tableaux
• Cellules d'entête est mis en valeur (la plupart du temps en
gras et centré): <th> … </th>
• Exemple
• Exemple
tableau14.html
5
9
tableau13.html
5
8
6
0
Tableaux
tableau14.html
SysCom
SysCom
Tableaux
La balise <caption> </caption> sert à définit le titre d'un tableau.
Exemple :
<h1>Tableau avec titre</h1>
<table border="1">
<caption><strong>Associations</strong></caption>
<tr><th>France</th>
<th>Belgique</th>
<th>Suisse</th>
</tr>
<tr>
<td>quatre-vingts</td>
<td>octante</td>
<td>huitante</td> </tr>
<tr>
<td>serpillière</td>
<td>wassingue</td>
<td>panosse</td>
</tr>
</table>
6
1
6
2
tableau16.html
SysCom
Exemple :
Tableaux - groupement lignes
• <thead> <tfoot> et <tbody> permettent de créer des groupes de
lignes.
• Ces balises doivent être utilisées dans l'ordre
thead -> tfoot -> tbody
• thead et tfoot ne peuvent être placés qu'une seule fois dans un
tableau. tbody plusieurs fois si nécessaire.
SysCom
Tableaux - groupement lignes
Tableaux
tableau17.html
"Fusion" de cellules (<td> ou <th>)
• Cellule sur plusieurs colonnes : Attribut colspan
Ex. <table border="1">
<tr><td>C1</td><td>C2</td></tr>
<tr><td colspan="2">C12</td></tr>
</table>
• Cellule sur plusieurs lignes : Attribut rowspan
Ex. <table border="1">
6
3
6
4
<tr><td rowspan="2"> L12</td> <td>L1</td>
</tr>
<tr> <td>L2</td>
</tr>
tableau15.html
Exemple tableau15
</table>
