Cours1 Développement Dapplication Web

HTML
introduction
HTML est un markup language (langage de marquage ?). Il permet d'enrichir

un texte avec des informations structurelles, sémantiques et de présentation.
Le principe de HTML, commun à ce type de langages (SGML pour Standart
Generalized Mark-up Language), consiste à utiliser des éléments délimités par
des balises.
Structure HTML
Commence toujours par la balise <html> pour activer l'interprète HTML
Finit toujours par la balise </html>
Comporte toujours 2 parties.
•Un en-tête de déclaration (délimité par des balises <HEAD>)
• Le corps du document, dans lequel on placera le contenu de celui-ci

(délimité les balises <BODY>.
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
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
<meta name="Author"
content="auteur1[,auteur2,…]">
permet de rechercher la page dans certains moteurs de recherche en se
basant sur les noms des auteurs indiqués
<meta name=" 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
<meta http-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

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

Cours1 Développement Dapplication Web

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

Cours1 Développement Dapplication Web

Transféré par

Droits d'auteur :

Formats disponibles

HTML

HTML est un markup language (langage de marquage ?). Il permet d'enrichir

Finit toujours par la balise </html>

Comporte toujours 2 parties.

•Un en-tête de déclaration (délimité par des balises <HEAD>)

• Le corps du document, dans lequel on placera le contenu de celui-ci

Contient des données "informatives" sur la page

<meta name=" Keywords " content="mot-clé1[,mot-

<meta http-equiv="Refresh" content="n;url=adresse

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

<b> </b> : gras

FACE : la première police installée est utilisée. Ne proposer que des

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

<h1> </h1> : format d'entête

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

l'option type="disc|circle|square" dans <ul> permet de choisir sa puce.

Exemple : <ul type="disc">.

L'option start=nombre_de_départ pour démarrer la liste à une valeur

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

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

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

Le lien peut être fait sur du texte et/ou une image

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

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

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

L'option name donne un nom à la carte. Ce nom sera utilisé pour

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 height, width, align, border, bgcolor, background comme

Les options height, width, border, bgcolor, background comme d'habitude

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

L'option colspan=nombre de cellules fusionnées à l'horizontal. Permet de

L'option rowspan=idem pour les fusions à la verticale

<script type="text/javascript" src="file.js"></script>

<link rel="stylesheet" type="text/css" href="file.css">

<video⁪⁪ src= " chemin "></video>

Vous aimerez peut-être aussi