HTML

+
HTML
+
Conventions d'écriture
 Une page HTML est un fichier ASCII (texte)
 Elle est tapée avec un traitement de texte (ex : Notepad++)

et enregistrée avec le suffixe .html ou .htm
 Mais surtout ne pas utiliser le format HTML de Word!
 Un commentaire s'écrit entre 

+
Structure HTML
 Commence toujours par la balise <html> pour activer

l'interprète HTML
 Finit toujours par la balise </html>
 Comporte toujours 2 parties.

+
Les noms de fichier
 Les fichiers HTML ont deux extensions possibles : .htm et

.html (Pas de différence, HTM vient du temps où les
extensions étaient limitées à trois caractères, comme pour
JPG et JPEG. )
 La première page d'un site est en général appelée index.html
 Si aucun fichier n'est précisé lors de la visite d'un site, c'est
ce fichier qui est recherché par défaut sur le site par
l'interprète HTML
+
Les fichiers
 Sile fichier est stocké sur le même site que la page
appelante, il faut toujours indiquer les noms de
fichiers sous leur forme relative, c'est à dire
indiquer en plus de leur nom, leur chemin d'accès
par rapport à la page qui est affichée
 . pour désigner le même répertoire
 .. pour le répertoire père
 Si
le fichier est stocké sur site web différent de la
page appelante, il faut utiliser la notation absolue
 toujours commencer le nom du fichier par http://…
 il faut reprendre ce qui est affiché dans la barre d'adresse
du navigateur
+
L'entête <head></head>
 Contient des données "informatives" sur la page
 Est placé immédiatement après la balise <html>
 <title>…</title> change le titre de la fenêtre dans laquelle

la page s'affiche
 En fonction des options déclarées, <meta> va permettre de

faciliter la recherche de la page ou de passer
automatiquement à une autre page.
+
La balise META
 <metaname="Author"
content="auteur1[,auteur2,…]">
permet de rechercher la page dans certains moteurs de
recherche en se basant sur les noms des auteurs indiqués
 <metaname=" Keywords "

content="mot-clé1[,mot-clé2,…]">
permet de rechercher la page dans certains moteurs de
recherche en se basant sur les mots-clés indiqués
+
La balise META
 <metahttp-equiv="Refresh"
content="n;url=adresse de page">
permet de passer automatiquement à un autre site après un
certain délai
 n = délai en seconde avant l'appel de la deuxième page.
 adresse de page = adresse (absolue ou relative)
de la deuxième page Web à afficher
+
Le corps <body></body>
 Permet de définir l'apparence du fond de l'écran et la couleur

des éléments textuels
 Une balise Body et une seule par page
 Elle peut s'employer seule ou avec une ou plusieurs de ses

options
 Est placée immédiatement après la balise </head>
 </body> est placé immédiatement avant la balise </html>

+
Le texte du body
 Tout texte tapé hors d'une balise est considéré comme du

texte "statique" et apparaîtra de ce fait à l'écran
 La mise en forme se fait à 2 niveaux

 caractères
 paragraphes
+
Mise en forme des caractères

 <b> </b> : gras
 <i> </i> : italique
 <u> </u> : souligné
+
Mise en forme des caractères

<font face="police1[,police2,…]
size = "s|+s|-s"
color = "#RRVVBB"> … </font>
FACE : la première police installée est utilisée. Ne proposer que des
polices dont on est sûr qu'elles sont disponibles sur l'ordinateur de
consultation (Arial/Helvetica et Times New Roman/Times)
SIZE : 1..7 (taille absolue) ou +1, +2... (taille relative par rapport à la
valeur spécifiée dans BASEFONT)
Les balises <font> </font> peuvent être imbriquées
<font face="…"><font size="+1">toto</font></ font> est

équivalent à <font face="…" size="+1">toto</ font>
+
Mise en forme des paragraphes

 <h1> </h1> : format d'entête
 <br> retour à la ligne simple
 <p> retour à la ligne avec saut d’une ligne
 <div align="center"></div> centre le
texte
 <div align="right"></ div > positionne le
texte à droite dans la page
 <div align="left"></div> positionne le
texte à gauche dans la page
+
Les listes
 2 types de listes
 les listes à puce : précéder et faire suivre les éléments de la liste
avec les balises <ul> et </ul>
 les listes numérotées : précéder et faire suivre les éléments de la
liste avec les balises <ol> et </ol>
 Chaque élément de la liste est précédé par la balise <li>

 elle provoque l'affichage de la puce ou du chiffre
 Les listes peuvent être imbriquées

+ 15
Les options des listes à puces

 l'option type="disc|circle|square" dans <ul> permet de
choisir sa puce.
 taper les valeurs en minuscules (ie ne les applique pas si elles sont
tapées en majuscules).
 Exemple : <ul type="disc">.

+
Les options des listes numérotées

 L'option start=nombre_de_départ pour démarrer la liste à
une valeur spécifique autre que 1.
 l'option type=i|I|a|A|1 pour changer le type de

numérotation.
 1=chiffres arabes (option par défaut), i=romains minuscules,
I=majuscules, a=lettres minuscules, A=majuscules.
 Exemple : <ol type="I" start=4>

+
Création de lignes horizontales
<hr size="s" width="w|w%" align = "LEFT|CENTER|RIGHT" color =

"#RRVVBB” >
SIZE : épaisseur en pixel de la ligne
WIDTH : largeur de la ligne. Peut s'exprimer en valeur absolue
(pixels) ou relative (en pourcentage de la largeur de la fenêtre)
ALIGN : alignement à gauche|au centre|à droite dans la fenêtre (à
utiliser si la ligne ne fait pas toute la largeur de la fenêtre)
COLOR : couleur de la ligne. Option valable avec Internet Explorer
<hr> seul affiche une ligne grise ombrée de 1 pixel

d'épaisseur faisant toute la largeur de la fenêtre
+
Les liens externes

 <a href="adresse à atteindre" target="fenêtre d'affichage"> </a>
 Encadre du texte et/ou une image
 Target permet de spécifier un nom de fenêtre pour l'affichage
 Si la fenêtre précisée n'existe pas, elle est créée
 Par défaut l'affichage se fait dans la fenêtre courante
<a href="http//:www.lita.univ-metz.fr/~paris/”>chez moi</a>
référence à une page html que l'on atteint en cliquant sur chez moi. Si le
fichier spécifié n'est pas un fichier HTML, le lien sera un lien de
téléchargement.
<a href="ftp//:…"> ici </a>
référence un fichier à télécharger même si c'est un fichier html.

+
Les liens externes

<a href =mailto:paris@univ-metz.fr?subject=qcq">
ma boîte aux lettres
</a>
quand on clique sur ma boîte aux lettres
une fenêtre de mail s'ouvre avec
pour destinataire paris@univ-metz.fr et
pour objet qcq
Le lien aura la couleur spécifiée dans l'option LINK du BODY,
sauf si le texte matérialisant le lien est inclus dans une balise
<font color> (incluse elle-même dans la balise <a href>)
Le lien peut être fait sur du texte et/ou une image
+
Les liens internes
Un lien interne est un lien qui amène à un endroit spécifique de la page

HTML en cours. Il se construit en deux temps :
•Mise en place d'une étiquette à l'emplacement à atteindre avec la balise
<a name="nom de l'étiquette"> … </a>
•Appel du lien de manière classique, mais où l'adresse de la page à
atteindre est remplacée par le nom de l'étiquette précédée d'un # :
<a href="#nom de l'étiquette"> … </a>
NB : il est possible d'atteindre un emplacement spécifique d'une page

différente de celle où a lieu l'appel de lien.
c'est à dire de combiner les liens externes et internes, en faisant suivre le
nom du fichier HTML par un # et le nom de l'étiquette.
+
Les images statiques et animées :

<img>
Une image animée se crée en associant plusieurs images (les formats utilisables
diffèrent suivant les logiciels) dans un seul fichier au format .gif
•L'option src : nom du fichier contenant l'image
•L'option width : largeur de l'image affichée. Si cette option n'est pas
spécifiée, l'image est affichée à sa taille réelle. On indique soit la valeur en
pixel, soit en pourcentage de la taille originale de l'image.
•L'option height : hauteur de l'image affichée.
Mêmes remarques que pour width
Quand une seule des deux options width ou height est spécifiée, l'autre est
automatiquement calculée en proportion
Toujours indiquer au moins un des deux paramètres pour accélérer

l'affichage
+
Les images statiques et animées
L'option alt : texte apparaissant dans une info-bulle quand la

souris est positionnée pendant 1 à 2 secondes sur l'image
L'option border : taille en pixel de la bordure autour de

l'image. Si l'image est un lien et qu'on ne veut
pas voir de bordure de la couleur spécifiée dans l'option
LINK du BODY, mettre 0
L'option usemap : utilisée pour associer à une image une

carte de zones réactives (par défaut aucune).
+
Les cartes <map></map>
Ce couple de balises est utilisé pour ajouter une carte à

une image.
L'option name donne un nom à la carte. Ce nom

sera utilisé pour réaliser l'association entre la carte
et l'image.
Une carte est composée de zone (area). À chaque

zone est associée une action déclenché quand
l'utilisateur la désigne.
+
Les cartes <area>
L'option shape sert à spécifier la forme de la zone. rect (pour un

rectangle), circle (pour un cercle) et poly (pour un polygone).
L'option href détermine l'URL appelée lorsque l'utilisateur cliquera sur la

zone que vous être en train de décrite.
L'option coords fixe les coordonnées de la zone décrite. Ces coor-

données doivent être données sous la forme d'une liste d'entiers séparés
par des virgules. Dans le cas d'une zone rectangulaire, on spécifie les
coordonnées de deux points diamétralement opposés
Dans le cas d'une sphère, on donne son centre et un point de la
circonférence. Enfin, pour un polygone, on énumère les coordonnées
de tous les sommets, deux à deux consécutifs
+
Les tableaux
<table></table>
<TR></TR> : ouverture et fermeture d'une ligne dans le tableau

(Table Row)
<TD></TD> : ouverture et fermeture d'une cellule (Table Data)

Ne jamais oublier les balises de fermeture, car le tableau pourrait
être désordonné, voire ne pas s'afficher
Les tableaux peuvent être imbriqués, mais il faut toujours qu'il y

ait le même nombre de balises d'ouverture et de fermeture
(attention à l'ordre)
+
Les options des tableaux <table>
 Les options height, width, align, border, bgcolor,

background comme d'habitude
 L'option cellpadding définit l'espace entre le bord des

cellules et leurs contenus (intra cellulaire)
 L'option cellspacing définit l'espace entre les cellules (inter

cellulaire)
+
Les options des lignes <tr>
 Les options height, width, border, bgcolor, background

comme d'habitude
 L'option align pour un alignement horizontal centré, justifié,

à gauche ou encore à droite
 L'option valign permet de positionner verticalement le

tableau
+
Les options des cellules <td>
Les options height, width, border, bgcolor, background, align,

valign comme pour les lignes mais pour les cellules.
L'option colspan=nombre de cellules fusionnées à l'horizontal. Permet de

disposer du texte sur plusieurs colonnes. Pour que le tableau s'affiche
correctement, il faut que ligne par ligne, le nombre de cellules soit le
même.
L'option rowspan=idem pour les fusions à la verticale
<TD COLSPAN=3>
ROWSPAN=3>
<TD COLSPAN=2>
+
Nouveautés en HTML 5
 <meta http-equiv="Content-Type" content="text/html;

» charset=UTF-8">, c’est fini !
 <meta charset="UTF-8">
 <script type="text/javascript" src="file.js"></script>

 <script src="file.js"></script>
 <link rel="stylesheet" type="text/css" href="file.css">

 <link rel="stylesheet" href="file.css">
+
Nouveautés en HTML 5
 <mark>
 <strong> et <em> ne sont pas ce que l’ont croit !
 Donner une importance au texte
 Pourquoi pas un span et la propriété background-color ?
<figure>
BLOCK : Indique la présence d'une figure
(image, code...) illustrant le texte.
<figcaption>
INLINE : Description de la figure.
+
Nouvelles balises
 <header>
 <footer>
 <nav>
 <section>
 <aside>
 <article>
+
Nouvelles balises
 <header> - l’en-tête
 <footer> - le pied-de-page
 <nav> - les principaux liens de navigation - Menu(s)

du site
 <section> - les parties thématiques de la page
 <aside> - les informations complémentaires
 <article> - Un article provenant d'une autre page ?

+
Insérer de l’audio
 <audio controls>
<source src="rango.mp3"></source>
<source src="rango.ogg"></source>
</audio>
+
Video
 <video src= " chemin "></video>

 poster (image à la place de la vidéo, avant
lancement)
 controls (barre de contrôle)
 width , height
 loop (jouer en boucle)
 autoplay (la vidéo sera jouée en boucle)
 Preload (on ne peut pas le forcer, ça dépend du
nav.)
 auto (par défaut)
 metadata : charge uniquement les métadonnées (durée,
dimensions, etc.).
 none : pas de préchargement. Utile si vous nous voulez
pas gaspiller de bande passante sur votre site.
+
 Canvas : permet de dessiner au sein de la page web, à

l'intérieur de la balise HTML <canvas>.
 SVG : permet de créer des dessins vectoriels au sein des
pages web.
 Drag & Drop : permet le glisser / déposer des objets dans
la page web.
 Web Sockets : permet des échanges plus rapides en
temps réel entre le navigateur du visiteur et le serveur qui
gère le site web (c'est une sorte d'AJAX amélioré). C'est un
peu l'avenir pour les applications web, qui pourront
devenir aussi réactives que les vrais programmes.
 WebGL : permet d'introduire de la 3D dans les pages web,
en utilisant le standard de la 3D OpenGL. Les scènes 3D
sont directement gérées par la carte graphique.
+
Exercice
 TP1.pdf

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

+

 Une page HTML est un fichier ASCII (texte)

 Elle est tapée avec un traitement de texte (ex : Notepad++)

 Mais surtout ne pas utiliser le format HTML de Word!

 Un commentaire s'écrit entre

 Commence toujours par la balise <html> pour activer

 Finit toujours par la balise </html>

 Comporte toujours 2 parties.

Les noms de fichier

 Les fichiers HTML ont deux extensions possibles : .htm et

 Contient des données "informatives" sur la page

 Est placé immédiatement après la balise <html>

 <title>…</title> change le titre de la fenêtre dans laquelle

 En fonction des options déclarées, <meta> va permettre de

 <metaname=" Keywords "

 Permet de définir l'apparence du fond de l'écran et la couleur

 Une balise Body et une seule par page

 Elle peut s'employer seule ou avec une ou plusieurs de ses

 Est placée immédiatement après la balise </head>

 </body> est placé immédiatement avant la balise </html>

 Tout texte tapé hors d'une balise est considéré comme du

 La mise en forme se fait à 2 niveaux

Mise en forme des caractères

Mise en forme des caractères

<font face="…"><font size="+1">toto</font></ font> est

Mise en forme des paragraphes

 Chaque élément de la liste est précédé par la balise <li>

 Les listes peuvent être imbriquées

Les options des listes à puces

 Exemple : <ul type="disc">.

Les options des listes numérotées

 l'option type=i|I|a|A|1 pour changer le type de

 Exemple : <ol type="I" start=4>

Création de lignes horizontales

<hr size="s" width="w|w%" align = "LEFT|CENTER|RIGHT" color =

<hr> seul affiche une ligne grise ombrée de 1 pixel

Les liens externes

<a href="ftp//:…"> ici </a>

référence un fichier à télécharger même si c'est un fichier html.

Les liens externes

Les liens internes

Un lien interne est un lien qui amène à un endroit spécifique de la page

NB : il est possible d'atteindre un emplacement spécifique d'une page

Les images statiques et animées :

Toujours indiquer au moins un des deux paramètres pour accélérer

Les images statiques et animées

L'option alt : texte apparaissant dans une info-bulle quand la

L'option border : taille en pixel de la bordure autour de

L'option usemap : utilisée pour associer à une image une

Les cartes <map></map>

Ce couple de balises est utilisé pour ajouter une carte à

L'option name donne un nom à la carte. Ce nom

Une carte est composée de zone (area). À chaque

Les cartes <area>

L'option shape sert à spécifier la forme de la zone. rect (pour un

L'option href détermine l'URL appelée lorsque l'utilisateur cliquera sur la

L'option coords fixe les coordonnées de la zone décrite. Ces coor-

<TR></TR> : ouverture et fermeture d'une ligne dans le tableau

<TD></TD> : ouverture et fermeture d'une cellule (Table Data)

Les tableaux peuvent être imbriqués, mais il faut toujours qu'il y

Les options des tableaux <table>

 Les options height, width, align, border, bgcolor,

 L'option cellpadding définit l'espace entre le bord des

 L'option cellspacing définit l'espace entre les cellules (inter