HTML - Jean CARTIER

Transcription

HTML - Jean CARTIER

Internet statique et dynamique
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Programmation de sites web statiques et dynamiques
Le langage HTML
Jean CARTIER
MASTER INI
[email protected]
1/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
HyperText Markup Language (HTML)
HTML : langage de balisage issu de SGML
Document HTML contient :
- du texte
- des balises (ou tags) : directives de mises en forme
Exemple : <I>Ce texte est en italique</I>
Son ancêtre : le SGML (Standard Generalized Markup Language) créé en 1986
- format de document des professionnels de l'édition et de la gestion documentaire
- norme ISO 8879
- langage très complet
- suite bureautique SGML (éditeur + navigateur) très lourde à gérer
HTML : version allégée de SGML
2/7
Introduction
HTML - Structure
Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Structure d'un document HTML
Déclaration version HTML utilisée
En-tête
Corps du document
<! DOCTYPE ... >
<HTML>
<HEAD>
En-tête
</HEAD>
<BODY>
Corps du document
</BODY>
</HTML>
• Déclaration de version et en-tête facultatifs (mais néanmoins importants)
• Si absence de corps alors document vide (sauf cas spéciaux, ex.: frames)
3/7
Introduction
HTML - Structure - Balisage
Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Règles de balisage (HTML 4.01)
• 2 types de balises
- autonome
- délimitant une zone
balise de début de zone
balise de fin de zone
< ... >
(ex. : <!
< ... >
(ex. : <HTML> )
(ex. : </HTML> )
</ ... >
DOCTYPE >
• identifiants de balise non sensibles à la casse ( <BODY> = <body> )
• certaines balises sont associées à un ou plusieurs atttributs
chaque attribut à un identifiant et une valeur (entre "" et après =)
ex. : <IMG SRC="photo.gif" ALT="une photo">
• commentaires 
• encodage de caractères spéciaux &...;
< se code <
> se code >
& se code &
• encodage de caractères accentués &lettreaccent;
é se code é à se code à ô se code ô
4/7
)
Introduction
HTML - Structure - Balisage
Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Concrètement ?
Voici une page très simple et son code associé
<html>
<head>
</head>
<body>
Bonjour !
</body>
</html>
Fig 2-5 : source de la
page très simple
Fig 1-5 : page très simple
Astuce :
- Pour voir le code source d ’une page, sous Internet Explore, choisissez le menu Affichage - Source
- Pour voir le code source d ’une page sous Mozilla (Netscape), appuyer sur les touches Ctrl + u
5/7
Introduction
HTML - Structure - Balisage - Déclaration
Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Déclaration version HTML utilisée
Langage et version utilisés par le document
Donc les navigateurs savent s'ils pourront afficher le document
<! DOCTYPE langage statut version >
Déclarations couramment rencontrées
<! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 3.2" >
<! DOCTYPE HTML PUBLIC
"-//W3C/DTD HTML 4.0" >
numérotation W3C
statut de la version : PUBLIC | PRIVATE
Cette déclaration n’est pas un élément visuel pour l’internaute
6/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête
Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
En-tête des documents HTML
Informations sur le document
<TITLE>un titre</TITLE>
titre du document / apparaît dans la barre supérieur du navigateur
<META NAME="propriété" CONTENT="valeur">
propriété du document / non affichée / plusieurs propriétés peuvent être définies.
pas de contrainte ni d'obligation sur les propriétés définies
<BASE HREF="préfixe URL">
préfixe commun à toutes les URLs utilisées dans le document / non affiché
<HEAD>
<TITLE>Bienvenue sur la page web de Jean Cartier</TITLE>
<META NAME="auteur" CONTENT= "Jean Cartier">
<META NAME="contenu" CONTENT="Cours Web">
<META NAME="mis à jour" CONTENT= "Tous les ans"
</HEAD>
Sauf le titre qui apparaît dans la barre du programme,
ces informations ne sont pas visuelles.
7/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps
Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Corps des documents HTML
Balises principales
<BODY attr1="val1" ... attrn="valn">
attributs possibles valeurs par défaut en cas d'absence
- BGCOLOR : couleur de fond
- TEXT : couleur du texte
- BACKGROUND : URL de l'image de fond d'écran
- LINK : couleur des liens non encore visités
- VLINK : couleur des liens visités
-…
<H1>Titre</H1>
<H2>
<H3>
<H4>
attribut possible ALIGN="left|center|right"
<P> ... </P> paragraphe
<BR> passage à la ligne
<HR> trait horizontal
<B> ... </B> gras
<I> ... </I> italique
8/7
<H5>
<H6>
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs
Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Couleurs
2 solutions
- identificateurs prédéfinis : green, yellow, purple, blue, red, ...
- nombre de 6 chiffres héxadécimaux (ex. : #1A7FC0)
codant les intensités de rouge/vert/bleu
- intensité
Equivalence entre les 2
blue = #0000FF
purple = #800080
...
La plupart des éditeurs HTML
fournissent des outils de type
"palette de couleurs"
Fig 1-9 : palette de couleur Golive
Fig 2-9 : palette de couleur Photoshop
n ’affichant que des couleurs Web
Fig 1-9 : palette de couleur Paint
9/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs
Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Concrètement ?
Voici une page plus élaborée (sic) et son code associé
Fig 1-10 : page simple
<! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 3.2" >
<html>
<HEAD>
<TITLE>Bienvenue sur la page web de Jean Cartier</TITLE>
<META NAME="auteur" CONTENT="Jean Cartier">
<META NAME="contenu" CONTENT="Cours Web">
<META NAME="mis à jour" CONTENT="tous les ans">
</HEAD>
<body bgcolor="#654321" text="#FF11FF">
Bonjour !<br>
<h2>Salut</h2><hr>
</body>
</html>
Fig 2-10 : source de la page simple
10/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens
Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Liens hypertexte
Portion de texte permettant d'atteindre un document désigné par une URL
<A HREF="URL">texte du lien</A>
URL absolue
<A HREF="http://www.sc-epinal.u-nancy.fr/">CESS Ini</A>
URL relative
<A HREF="sommaire.html">sommaire</A>
<A HREF="../divers/plan.html">plan d'accès</A>
Définition de signets (anchors) = marques placées dans un document
<A NAME="conclusion"></A>
Désignation de signets à l'aide du caractère # dans les URLS
<A HREF="#conclusion">conclusion du rapport</A>
<A HREF="rapport.html#conclusion">conclusion du rapport</A>
11/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens
Liens - Images - Listes - Tableaux - Frames - Map - Règles - En +
Compléments sur les URLs
Eléments constitutifs (optionnels) d'une URL
protocole://
protocoles utilisables : HTTP, FTP, MAILTO, FILE, NEWS
utilisateur@
login pour les pages protégées
serveur
nom ou adresse IP (ex. : 163.136.27.6) du serveur
:numport
numéro de port TCP du serveur
/répertoire
chemin d'accès dans la hiérarchie de répertoires
fichier
nom du document à atteindre
#signet
signet dans le document à atteindre
?options
information transmise au serveur (ex. : formulaire)
Exemple
http://[email protected]:8080/pub/cv.html#diplomes
ftp://[email protected]
http://www.altavista.com/query.html?epinal
12/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images
Images - Listes - Tableaux - Frames - Map - Règles - En +
Images
Insertion d'une image (gif ou jpeg ou png) dans un document
<IMG SRC="URL (absolue ou relative) du fichier image">
Attributs possibles
- HEIGHT="99" / WIDTH : hauteur/largeur en pixels de l'image
- ALT=" ... " : légende associée à l'image
- HSPACE="99" / VSPACE : espacement en pixels horiz./vert. autour de l'image
- ALIGN="bottom|middle|top|left|right" : alignement de l'image / au texte
Fig 1-13 : alignement middle
Fig 2-13 : alignement left
13/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes
Listes - Tableaux - Frames - Map - Règles - En +
Listes
Listes numérotées (<OL> ... </OL>) ou non numérotées (<UL>
<UL> balise de début de liste
<LI> Rouge </LI> balises pour un élément de la liste
<LI> Vert </LI> balises pour un élément de la liste
... </UL>)
...
</UL>
balise de fin de liste
Attributs possibles
<UL TYPE="disc|circle|square">
<OL TYPE="1|I|i|A|a"
START="99">
<LI TYPE="disc|circle|square">
<LI TYPE="1|I|i|A|a ">
: type de puce
: type de numérotation
: départ de la numérotation
: type de puce (liste UL)
: type de numérotation (liste OL)
14/7
Introduction
Listes
Entrelacement possible des définitions de listes
<UL>
<LI type="circle"> élément 1,1 </LI>
<LI type="square"> élément 1,2 </LI>
<OL type="A" start="3">
<LI> élément 2,1 </LI>
<LI type="1"> élément 2,2 </LI>
</OL>
<LI> élément 1,3 </LI>
</UL>
Fig 1-15 : Les listes
15/7
Introduction
Listes
Listes avec bullets spécifiques (<DL>
... </DL>)
<DL>
<DT> identificateur du bullet </DT>
<DD> élément </DD>
...
</DL>
<DL>
<DT> Un </DT>
<DD> élément 1 </DD>
<DT> Deux </DT>
<DD> élément 2 </DD>
</DL>
Fig 1-16 : les listes spéciales
16/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes -Tableaux
Tableaux - Frames - Map - Règles - En +
Tableaux
Tableaux à 2 dimensions (<TABLE> ... </TABLE>)
<TABLE>
balise de début de tableau
<TR>
balise de début de ligne (row)
<TD> cellule </TD>
balises pour une colonne (data)
...
</TR>
...
balise de fin de ligne
</TABLE>
balise de fin de tableau
Attributs possibles pour <TABLE>
- BORDER="99" (0) : épaisseur en pixels des bordures du tableaux
- ALIGN="left|right" : alignement du tableau / au texte
- WIDTH="99|99%" : largeur du tableau en pixels | en % largeur fenêtre
- CELLSPACING="99" (2): espacement en pixels entre les cellules
- CELLPADDING="99" (1): marge intérieure en pixels des cellules
Autres balises possibles pour tableau : TH,
THEAD
17/7
Introduction
Tableaux
Possibilité de laisser des cellules vides
<TABLE BORDER="1">
<TR> <TD> case 1,1 </TD> </TR>
<TR> <TD> case 2,1 </TD>
<TD> case 2,2 </TD> </TR>
<TR> <TD></TD>
</TABLE>
Fig 1-18 : tableau sans largeur (width)
WIDTH="100%"
Fig 1-18 : tableau avec largeur (width)
18/7
Introduction
Tableaux
Attributs possibles pour <TR>
- ALIGN="left|right|center|justify" : alignement horiz. du texte (différent de <TABLE>)
- VALIGN="middle|top|bottom" : alignement vertical du texte
- NOWRAP : empêche les retours à la ligne dans les cellules
Attributs possibles pour <TD>
- ALIGN/VALIGN/NOWRAP : idem <TR>, supplante <TR ALIGN/VALIGN/NOWRAP >
- WIDTH="99|99%" : largeur de la colonne en pixels | en % largeur tableau
- COLSPAN="99" : aggrège plusieurs cellules horizontalement
- ROWSPAN="99" : aggrège plusieurs cellules verticalement
Balise <CAPTION> Légende associée au tableau
- ALIGN="top|bottom" : placement de la légende
19/7
Introduction
Tableaux
<TABLE BORDER="1" WIDTH="100%">
<CAPTION ALIGN="bottom"> Légende </CAPTION>
<TR ALIGN="center">
<TD COLSPAN="2"> case 1,1 </TD> </TR>
<TR> <TD></TD>
<TD ALIGN="right"> case 2,2 </TD> </TR>
<TR> <TD> case 3,1 </TD>
</TABLE>
Fig 1-20 : tableau complexe
20/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux -Frames
Frames - Map - Règles - En +
Frames
Permettent de scinder la fenêtre du navigateur en plusieurs parties (frames)
Principe
• un découpage (<FRAMESET> ... </FRAMESET>) défini dans un fichier HTML
• chaque frame du frameset est associée à une balise <FRAME>
• autant de fichiers HTML qu'il y a de frames définies dans le frameset
Attributs possibles pour la balise <FRAMESET>
- ROWS="99|99%,.." : liste des tailles de ligne du découpage
- COLS="99|99%,.." : liste des tailles de colonne du découpage
Attributs possibles pour la balise <FRAME>
- SRC="URL" : URL du fichier à afficher dans la frame
- NORESIZE : interdit le redimensionnement de la frame
- SCROLLING="auto|yes|no" : barres de défilement verticale et horizontale
21/7
Introduction
Frames
Exemple de fichier de frameset - 10.html
<HTML>
<FRAMESET ROWS="50%,50%" COLS="70%,*">
<FRAME SRC="frame.1.1.html" NORESIZE>
<FRAME SRC="frame.1.2.html">
<FRAME SRC="frame.1.3.html" SCROLLING="yes">
<FRAME SRC="frame.1.4.html" SCROLLING="no">
</FRAMESET>
</HTML>
Attributs ROWS/COLS
- * : taille restante
- Somme > 100% | taille fenêtre en pixels alors règle de 3
- Somme < 100% | taille fenêtre alors dernière taille ignorée
22/7
Fig 1-22 : exemple de frameset
Introduction
Frames
Entrelacement possible des définitions de framesets
Liens hypertexte vers les frames
Chaque frame peut être associée à un nom
<FRAME SRC="..." NAME="frameDeGauche">
Les liens peuvent référencer cette frame à l'aide de l'attribut TARGET
<A HREF="URL" TARGET="frameDeGauche">
Identificateurs de TARGET réservés
- TARGET="_self" : affichage du document dans la frame du lien
- TARGET="_blank" : affichage du document dans une nouvelle fenêtre
- TARGET="_parent" : affichage dans la fenêtre contenant le frameset
- TARGET="_top" : affichage dans la fenêtre du lien
Les frames ne sont plus acceptées dans les nouveaux standards.
Les Iframes (Inline Frames) remplacent cette possibilité.
23/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames -Map
Map - Règles - En +
Images cliquables
Définition d'un lien (<A HREF="...">) autour d'une image (<IMG SRC="...">)
d ’où l'image acquiert un cadre bleu (<IMG BORDER="0" ...> enlève le cadre)
d ’où un clic sur l'image provoque le chargement du lien
Image cliquable sous forme de plan
• définition d'un plan ( <MAP> ... </MAP> )
• chaque zone du plan ( <AREA ... > )
• a une forme : rectangle, cercle ou polygone
• est associée à une URL
• plaquage du plan sur une image ( <IMG USEMAP="..." ... > )
- rectangles : coordonnées des coins supérieur gauche et inférieur droit
- cercles : coordonnées du centre et rayon
- polygones : coordonnées de tous les coins
• les formes se superposent dans l ’ordre de création
24/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames -Map
Map - Règles - En +
Images cliquables
<IMG SRC="map.gif" USEMAP="#plan">
<MAP NAME="plan">
<AREA SHAPE="rectangle"
COORDS="0,0,50,50"
HREF="rect.html">
<AREA SHAPE="circle"
COORDS="100,100,50"
HREF="cerc.html">
<AREA SHAPE="polygon"
COORDS="60,10,60,50,80,80,120,30,60,10"
HREF="poly.html">
</MAP>
=
+
image
plan
25/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map -Règles
Règles - En +
Quelques règles d'écriture de pages HTML
Impératif majeur : lisibilité
Taille des pages
- éviter les grandes pages
- l'utilisation des barres de défilement horiz. et vert. nuit à la lisibilité
d ’où idéal : 2 ou 3 écrans par page
d ’où avantage connexe : la page se charge plus rapidement
Typographie
- trop de polices et de couleurs différents nuisent à la lisibilité
- proscrire le souligement ! risque de confusion avec un lien
- structuration du texte en paragraphe
- au maximum 3 ou 4 niveaux de titres (<Hn>) par page
26/7
Introduction
Règles - En +
Navigation : WWWW
- Who : l'internaute doit savoir à qui il parle et à qui s'adresser en cas de pb.
d ’où lien mailto: vers l'email du webmaster au bas des pages
- What : un titre clair, non ambigü et significatif
- When : durée de vie d'un document
d ’où date de dernière modification au bas des pages
d ’où mise en évidence des nouveautés (ex. : logo New)
- Where : toujours permettre de revenir vers la racine du site
Liens
- maximum 1 à 3 mots par lien
- proscrire les liens "cliquer ici" / utiliser le "nom du lien"
27/7
Introduction
Règles - En +
Graphiques, frames, images cliquables
- sauf dessein particulier, éviter les pages trop chargées
- sinon, prévoir une version allégée des pages (no frames, no images, ...)
d ’où avantage connexe : les pages se chargent plus rapidement
Guide de style WWW
• Style Guide for Online HyperText. Tim Berners-Lee.
http://www.w3c.org/Provider/Style/Overview.html
Pensez accessibilité
28/7
Introduction
HTML - Structure - Balisage - Déclaration - Entête - Corps - Couleurs - Liens - Images - Listes - Tableaux - Frames - Map - Règles -EnEn+ +
Les trucs en plus
Taille des pages : pensez aux internautes qui n’ont pas le haut débit
Par habitude, on donne comme taille maximale de page :
50 Ko (texte + image + éléments multimédia)
Si une page est trop longue à charger, l ’internaute ne reviendra pas !
Mise en page évoluée : pensez aux tableaux ou aux CSS (Feuilles de Styles)
Pour réaliser des interfaces graphiques évoluées, rien de tel que les tableaux ou les CSS.
Les images sont découpés et placées judicieusement dans les cases des tableaux (voir des
outils comme Photoshop, ImageReady, Firework pour la découpe, ou le faire manuellement...)
Vous pouvez imbriquer des tableaux pour obtenir des mises en pages plus complexes,
superposer et juxtaposer des zones CSS.
Accélérer les pages : pensez à utiliser le cache des navigateurs
Pour réduire le temps de chargement d ’une page, utiliser des images et des éléments de
façon récurrente au travers des différentes pages.
Pour ne pas mettre en cache une page (qui change souvent par exemple), pensez aux
balises meta (no-cache)
29/7
Introduction
Les trucs en plus
Les images GIF : pensez à leurs avantages
Elles n ’ont que 256 couleurs parmi les 16 millions perceptibles par l ’œil humain.
Elles sont adaptées pour les dessins, les graphiques.
Elles peuvent avoir une couleur transparente
Elles peuvent être animées
Elles utilisent une compression non destructive
Elles peuvent parfois remplacer avantageusement (compatibilité accrue)
des animations de type Flash
Les images JPEG : pensez à leurs avantages
Elles ont une palette de couleur pouvant atteindre 16 millions de couleurs (voire plus)
Elles sont adaptées pour les photos
Elles utilisent une compression destructive (habituellement un bon ration est 60% de
qualité de compression).
Une miniature cliquable évite un chargement trop long (pour un plan par exemple).
30/7
Introduction
Les trucs en plus
Facilité de lecture : pensez aux handicapés
Il existe des normes pour que vos pages soient lues par les malvoyants (WAI et bobby)
et leur systèmes de lecture (braille, synthèse vocale).
C ’est une obligation pour les administrations.
Lynx est un navigateur en mode texte téléchargeable gratuitement. A tester...
Compatibilité et nouvelles technologie : pensez aux ringards
Tout le monde n ’a pas le dernier navigateur, ni un accès internet haut débit.
Utilisez avec parcimonie les nouvelles technologies et normes (DHTML, Flash, Real,
Quicktime, …). Combien de personnes ne savent pas installer un plugins sur leur
navigateur ? Combien ne le peuvent pas (Linux) ?
Prévoyez des liens de téléchargement si vous devez utiliser une technologie peu
répandue (VRML, …).
Testez vos pages sur plusieurs navigateurs : Opéra, Netscape, Safari, Internet explorer,
Mozilla Firefox, Konqueror, Lynx… et pas seulement les dernières versions.
Les LiveCD peuvent être une bonne solution (Knoppix, Gnoppix et dérivés).
31/7
Introduction
Les trucs en plus
Internet, ordinateurs, lecture à l ’écran : pensez à l ’impression
La lecture sur papier est encore répandue. Vérifiez la façon dont sera imprimée vos
pages avant de les mettre en ligne. Prévoyez éventuellement une version imprimable.
Pensez au format PDF pour mettre en ligne des documents à la mise en page complexe.
Site prêt : pensez référencement
Pour qu’un site soit beaucoup visité et bien référencé, il faut :
- Un nom de domaine en relation avec son activité : www.france2.fr pour france2.
- Des pages avec des balises meta convenablement placées.
- Un bon référencement
- Un site dont on parle sur d ’autres sites
- Eventuellement payer…
Pour d ’avantage d ’informations sur le HTML 4.01, XHTML, CSS, …
Consultez http://www.w3c.org/ (en anglais)
32/7

HTML - Jean CARTIER

Transcription

Documents pareils

affiche open snooker du 21 janvier 2017

Set de tampons World Map

Communiqué Canteloup sur Cavadeos/ Europe1 du 14 nov. 2013

LUMINY LABORATOIRE MAP ECOLE D`ARCHITECTURE

Savoir créer un site web (Initiation)

Installation de l`application PDF MAP

viella - Comité Départemental du Tourisme et des Loisirs du Gers

invitation samedi 15 novembre 2014 dimanche

9% aux Galeries Lafayette

Delivery Area Map Carte de Secteur de Livraison