docHTML - fil
download 
Plainte Transcription
HTML - fil
1. HTML HyperText Markup Language (HTML) Cours Web 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 : Lionel Seinturier <I>Ce texte est en italique</I> 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 Université Pierre & Marie Curie [email protected] HTML : version allégée de SGML 16/9/03 Web 11 Lionel Seinturier Web 12 1. HTML 1. HTML Structure d'un document HTML Règles de balisage Déclaration version HTML utilisée En-tête Corps du document 2 types de balises - autonome - délimitant une zone balise de début de zone balise de fin de zone <! DOCTYPE ... > <HTML> <HEAD> En-tête </HEAD> <BODY> Corps du document </BODY> </HTML> < ... > (ex. : <! < ... > ... > (ex. : <HTML>) (ex. : </HTML>) </ DOCTYPE >) • identifiants de balise non sensibles à la casse (<BODY> ≡ <body>) • certaines balises sont associées à un ou +sieurs attributs chaque attribut à un identifiant et une valeur (entre "" et après =) ex. : <IMG SRC="photo.gif" ALT="une photo"> • Déclaration de version et en-tête facultatifs • Absence de corps Ö document vide (sauf cas spéciaux, ex.: frames) Web Lionel Seinturier 13 Lionel Seinturier • commentaires • encodage de caractère <>& caractères accentués éàô Web <!-- ceci est un commentaire --> & ... ; < > & & lettre accent ; é à ô 14 Lionel Seinturier 1. HTML 1. HTML Déclaration version HTML utilisée En-tête des documents HTML Langage et version utilisés par le document Ö les navigateurs savent s'ils pourront afficher le document Informations sur le document <TITLE>un titre</TITLE> titre du document / apparaît dans la barre supérieur du navigateur <! DOCTYPE langage statut version > <META NAME="propriété" CONTENT="valeur"> propriété du document / non affichée / +sieurs propriétés peuvent être déf. pas de contrainte ni d'obligation sur les propriétés définies Déclarations couramment rencontrées <! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 3.2" > <BASE HREF="préfixe URL"> préfixe commun à toutes les URLs utilisées dans le document / non affiché <! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0" statut de la version : PUBLIC | PRIVATE Web > <HEAD> <TITLE>Bienvenue sur la page web de Lionel Seinturier</TITLE> <META NAME="auteur" CONTENT="Lionel Seinturier"> <META NAME="contenu" CONTENT="Cours Web"> <META NAME="mis à jour" CONTENT="tous les ans" </HEAD> numérotation W3C 15 Lionel Seinturier Web 16 1. HTML 1. HTML Corps des documents HTML Couleurs Balises principales 2 solutions - identificateurs prédéfinis : green, yellow, purple, blue, red, ... - nombre de 6 chiffres hexadécimaux (ex. : #1A7FC0) codant les intensités de rouge/vert/bleu - intensité <BODY attr1="val1" ... attrn="valn"> attributs possibles - BGCOLOR - TEXT - BACKGROUND - LINK - VLINK - ... valeurs par défaut en cas d'absence : couleur de fond : couleur du texte : URL de l'image de fond d'écran : couleur des liens non encore visités : couleur des liens visités Equivalence entre les 2 blue attribut possible <P> <B> Web ... </P> paragraphe ... </B> gras ≡ #0000FF ≡ #800080 purple ... <H1>Titre</H1> Lionel Seinturier <H2> <H3> <H4> <H5> <H6> ALIGN="left|center|right" passage à la ligne ... </I> italique <BR> <I> 17 <HR> trait horizontal Lionel Seinturier La plupart des éditeurs HTML fournissent des outils de type "palette de couleurs" Web 18 Lionel Seinturier 1. HTML 1. HTML Liens hypertexte Compléments sur les URLs Portion de texte permettant d'atteindre un document désigné par une URL Eléments constitutifs (optionnels) d'une URL <A HREF="URL">texte du lien</A> protocole:// utilisateur@ URL absolue URL relative <A HREF="http://www.lip6.fr/index.html">LIP6</A> <A HREF="sommaire.html">sommaire</A> serveur <A HREF="../divers/plan.html">plan d'accès</A> :numéro <A HREF="/index.html">accueil</A> /répertoire fichier Définition de signets (anchors) ≡ marques placées dans un document #signet ?options protocoles utilisables : HTTP, FTP, MAILTO, FILE, NEWS login pour les pages protégées nom ou adresse IP (ex. : 163.136.27.6) du serveur numéro de port TCP du serveur chemin d'accès dans la hiérarchie de répertoires nom du document à atteindre signet dans le document à atteindre information transmise au serveur (ex. : formulaire) <A NAME="conclusion"> Exemple 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> Web 19 Lionel Seinturier http://[email protected]:8080/pub/cv.html#diplomes ftp://[email protected] http://www.altavista.com/query.html?jussieu Web 20 1. HTML Lionel Seinturier 1. HTML Images Listes Insertion d'une image (gif ou jpeg) dans un document Listes numérotées (<OL> ... </OL>) ou non (<UL> ... </UL>) <IMG SRC="URL (absolue ou relative) du fichier image"> <UL> <LI> Rouge </LI> <LI> Vert </LI> ... </UL> 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 Web 21 Lionel Seinturier balise de début de liste balises pour un élément de la liste balises pour un élément de la liste balise de fin de liste Attributs possibles <UL TYPE="disc|circle|square"> : type de puce <OL TYPE="1|I|i|A|a" : START="99"> : type de numérotation départ de la numérotation <LI TYPE="disc|circle|square"> : <LI TYPE="1|I|i|A|a "> : Web 22 type de puce (liste UL) type de numérotation (liste OL) Lionel Seinturier 1. HTML 1. HTML Listes Tableaux Entrelacement possible des définitions de listes Tableaux à 2 dimensions (<TABLE> ... </TABLE>) <TABLE> <TR> <TD> cellule </TD> ... </TR> ... </TABLE> <UL> <LI> é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> balise de début de tableau balise de début de ligne (row) balises pour une colonne (data) balise de fin de ligne balise de fin de tableau Attributs possibles pour <TABLE> <LI type="circle"> élément 1,3 </LI> </UL> - BORDER="99" (0) : épaisseur en pixels des bordures du tableaux : alignement du tableau / au texte - ALIGN="left|right" - 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 Web 23 Lionel Seinturier Web 24 1. HTML Lionel Seinturier 1. HTML Tableaux Tableaux Possibilité de laisser des cellules vides Attributs possibles pour <TR> <TABLE BORDER="1"> - ALIGN="left|right|center|justify" : alignement horiz. du texte (≠ <TABLE>) - VALIGN="middle|top|bottom" : alignement vertical du texte <TR> <TD> case 1,1 </TD> </TR> Attributs possibles pour <TD> <TR> <TD> case 2,1 </TD> <TD> case 2,2 </TD> </TR> <TR> <TD></TD> <TD> case 3,2 </TD> </TR> </TABLE> - ALIGN/VALIGN - WIDTH="99|99%" - COLSPAN="99" - ROWSPAN="99" : idem <TR>, supplante <TR ALIGN/VALIGN > : largeur de la colonne en pixels | en % largeur tableau : aggrège plusieurs cellules horizontalement : aggrège plusieurs cellules verticalement Balise <CAPTION> Légende associée au tableau - ALIGN="top|bottom" : placement de la légende WIDTH="100%" Web 25 Lionel Seinturier Web 26 Lionel Seinturier 1. HTML 1. HTML Tableaux Frames <TABLE BORDER="1" WIDTH="100%"> Permettent de scinder la fenêtre du navigateur en +sieurs parties (frames) <CAPTION ALIGN="bottom"> Légende </CAPTION> Principe <TR ALIGN="center"> <TD COLSPAN="2"> case 1,1 </TD> </TR> • 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 <TR> <TD></TD> <TD ALIGN="right"> case 2,2 </TD> </TR> Attributs possibles pour la balise <FRAMESET> <TR> <TD> case 3,1 </TD> <TD> case 3,2 </TD> </TR> - ROWS="99|99%,.." - COLS="99|99%,.." </TABLE> : liste des tailles de ligne du découpage : liste des tailles de colonne du découpage Attributs possibles pour la balise <FRAME> - SRC="URL" - NORESIZE - SCROLLING="auto|yes|no" Web 27 Lionel Seinturier : URL du fichier à afficher dans la frame : interdit le redimensionnement de la frame : barres de défilement verticale et horizontale Web 1. HTML 28 Lionel Seinturier 1. HTML Frames Frames Exemple de fichier de frameset - index.html Entrelacement possible des définitions de framesets <HTML> <FRAMESET ROWS="50%,50%" COLS="70%,*"> <FRAME SRC="frame1.html" NORESIZE> <FRAME SRC="frame2.html"> <FRAME SRC="frame3.html" SCROLLING="yes"> <FRAME SRC="frame4.html" SCROLLING="no"> </FRAMESET> </HTML> 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="frameDeDroite"> Identificateurs de TARGET réservés Attributs ROWS/COLS - TARGET="_self" - TARGET="_blank" - TARGET="_parent" - TARGET="_top" - * : taille restante - ∑ > 100% | taille fenêtre en pixels Ö règle de 3 - ∑ < 100% | taille fenêtre Ö dernière taille ignorée Web 29 Lionel Seinturier Web : affichage du document dans la frame du lien : affichage du document dans une nouvelle fenêtre : affichage dans la fenêtre contenant le frameset : affichage dans la fenêtre du lien 30 Lionel Seinturier 1. HTML 1. HTML Images cliquables Définition d'un lien (<A Images cliquables HREF="...">) autour d'une image (<IMG SRC="...">) Ö l'image acquiert un cadre bleu (<IMG BORDER="0" ...> enlève le cadre) Ö 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 - cercles - polygones <IMG SRC="map.gif" USEMAP="#plan"> <MAP NAME="plan"> <AREA SHAPE="rectangle" COORDS="0,0,50,50" HREF="r.html"> <AREA SHAPE="circle" COORDS="100,100,50" HREF="c.html"> <AREA SHAPE="polygon" COORDS="60,10,60,50,80,80,120,30,60,10" HREF="p.html"> </MAP> 31 Lionel Seinturier p.html c.html + : coordonnées des coins supérieur gauche et inférieur droit : coordonnées du centre et rayon : coordonnées de tous les coins Web r.html Web 1. HTML 32 Lionel Seinturier 1. HTML Editeurs de pages HTML 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é Ö idéal : 2 ou 3 écrans par page Ö avantage connexe : la page se charge plus rapidement Choix important www.yahoo.fr 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 (8/2001) 57 éditeurs HTML !! Web 33 Lionel Seinturier Web 34 Lionel Seinturier 1. HTML 1. HTML Quelques règles d'écriture de pages HTML Quelques règles d'écriture de pages HTML Navigation : WWWW Graphiques, frames, images cliquables - Who - sauf dessein particulier, éviter les pages trop chargées - sinon, prévoir une version allégée des pages (no frames, no images, ...) Ö avantage connexe : les pages se chargent plus rapidement : l'internaute doit savoir à qui il parle et à qui s'adresser en cas de pb. Ö lien mailto: vers l'email du webmaster au bas des pages - What : un titre clair, non ambigu et significatif - When : durée de vie d'un document Ö date de dernière modification au bas des pages Ö mise en évidence des nouveautés (ex. : logo New) - Where : toujours permettre de revenir vers la racine du site Guide de style WWW • Style Guide for Online HyperText. Tim Berners-Lee. http://www.w3c.org/Provider/Style/Overview.html Liens - maximum 1 à 3 mots par lien - proscrire les liens "cliquer ici" / utiliser le "nom du lien" Web 35 Lionel Seinturier Web 1. HTML 36 1. HTML Feuilles de style CSS (Cascading Style Sheets) Feuilles de style CSS Permettent de factoriser des éléments de présentation pour 1 ou +sieurs pages Définition des styles dans l'en-tête du fichier .html <STYLE> balise { prop1:val1; ... ; propn:valn; } ... ex : H1 { font-style: italic; color: blue; } </STYLE> Définition des styles dans un fichier .css balise1 { prop1:val1; ... ; propn:valn; } balise2 { prop1:val1; ... ; propn:valn; } ... ex : H1 { font-style: italic; color: blue; } Liaison entre le fichier .html et le fichier .css par la balise <LINK> <HTML><HEAD> <STYLE> H1 { font-style: italic; color: blue; } </STYLE> </HEAD> <HTML> <HEAD> <LINK REL="stylesheet" HREF="f.css"> </HEAD> <BODY> <H1>Titre en ... </H1> </BODY></HTML> <BODY> <H1>Titre en ... </H1> </BODY></HTML> Web Lionel Seinturier 37 Lionel Seinturier Web 38 Lionel Seinturier 1. HTML 1. HTML Feuilles de style CSS Exemple Définition mixte Avec feuille de style <LINK REL="stylesheet" HREF="http://www.w3....."> <STYLE> balise { prop1:val1; ... ; propn:valn; } ... ex : H1 { font-style: italic; color: blue; } </STYLE> Remarques - plusieurs feuilles de styles peuvent être chargées Ö plusieurs balises <LINK ... > - en cas de conflit sur le style d'une balise, la dernière définition l'emporte Web 39 Lionel Seinturier Web 40 1. HTML Lionel Seinturier 1. HTML Exemple Définitions de styles Le même document sans feuille de style Définition multiple déf. d'un même style pour +sieurs balises ex : H1, H2 { text-align: center; } Ö titres <H1> et <H2> centrés Définition contextuelle déf. du style d'une balise à l'intérieur d'autres balises ex : OL OL LI { list-style: upper-roman; } Ö numérotation romaine majuscule pour la balise <LI> lorsqu'elle est encadrée par 2 balises <OL> <OL> <LI>Le style ne s'applique pas</LI> <OL> <LI>Le style s'applique</LI> </OL> <LI>Le style ne s'applique pas</LI> </OL> Web 41 Lionel Seinturier Web 42 Lionel Seinturier 1. HTML 1. HTML Définitions de classes de styles Définitions de classes de styles Permettent la définition de nouveaux styles Classes de style prédéfinies - A:link - A:active - A:visited - P:first-line - P:first-letter .nomDeClasse { prop1:val1; ... } ex : .equation { font-family: symbol; } <P CLASS="equation"> a = a+b </P> Une 2ème équation <SPAN CLASS="equation"> c = d*a </SPAN> : style des liens non encore visités (par défaut bleu) : style des liens sélectionnés (par défaut rouge) : style des liens visités (par défaut rouge) : style de la 1ère ligne d'un paragraphe : style de la 1ère lettre d'un paragraphe Peuvent être redéfinies Nouveaux styles attachés à une balise particulière balise:nomDeClasse { prop1:val1; ... } ex : A:link { color: green; } balise.nomDeClasse { prop1:val1; ... } ex : P.equation { font-family: symbol; } Ö utilisable simplement avec la balise <P> <P CLASS="equation"> a = a+b </P> Web 43 Lionel Seinturier 1. HTML Propriétés de styles Chaque propriété définit une mise en forme + de 50 propriétés ≠ définies par le standard CSS Voir http://www.w3c.org/Style/CSS pour une liste exhaustive • propriétés de couleur - identificateurs (ex. : blue, red, ...) - rgb(r,v,b) avec r, v et b entre 0 et 255 (ex. : rgb(255,0,0)) - rgb(r%,v%,b%) avec r, v et b entre 0 et 100% (ex. : rgb(100%,0,0)) • propriétés de taille, de police de caractères • propriétés de positionnement • propriétés d'espacement Web 45 Lionel Seinturier Web 44 Lionel Seinturier
