Création de pages WEB en HTML Claude Duvallet Université du Havre UFR Sciences et Techniques 25 rue Philippe Lebon - BP 540 76058 LE HAVRE CEDEX [email protected] http://litis.univ-lehavre.fr/∼duvallet/ Claude Duvallet — 1/108 HTML Plan du cours Historique Le WEB HTML Claude Duvallet — 2/108 HTML HISTORIQUE Claude Duvallet — 3/108 HTML Introduction Historique Le réseau Internet Architecture Historique 1 Introduction 2 Historique 3 Le réseau Internet 4 Architecture Claude Duvallet — 4/108 HTML Introduction Historique Le réseau Internet Architecture Introduction Un réseau est un ensemble d’objets interconnectés les uns avec les autres : permet de faire circuler des éléments entre chacun de ces objets. Un réseau permet : le partage : fichiers, applications, la communication entre personnes, la communication entre processus (machines industrielles), manipulation de bases de données, le jeu à plusieurs, ... Claude Duvallet — 5/108 HTML Introduction Historique Le réseau Internet Architecture Historique (1/4) 1969 : création du réseau militaire ARPANET : assurer la transmission d’informations, même en temps de guerre. le téléphone était le seul moyen de communication : les nœuds sont des points essentiels pour le fonctionnement de tout réseau, il fallait concevoir un réseau de communication capable d’emprunter des routes différentes si l’un des nœuds n’était plus en service : =⇒ un réseau complètement décentralisé, =⇒ construire une toile (Web). 4 universités de connectées : Internet était un réseau fréquenté par des initiés qui maîtrisaient le système d’exploitation Unix. 1971 : 15 universités sont sur ARPANET, le premier e-mail est envoyé. 1972 : FTP : protocole de transfert de fichiers. Claude Duvallet — 6/108 HTML Introduction Historique Le réseau Internet Architecture Historique (2/4) 1973 : internationalisation avec la connexion d’une université de Londres et une autre de Norvège. 1974 : TELNET : protocole de prise de commande à distance. 1983 : les protocoles principaux sont finalisées, les militaires quittent ARPANET pour fonder leur propre réseau. 1985 : avec le développement de la technologie "personal computer" et des Local Area Network, il devient possible de construire une interconnexion de réseaux. 1987 : la plus grave "panne" de sécurité d’Internet : Robert Morris écrivit un WORM (programme s’auto reproduisant et se propageant dans un réseau), des réseaux entiers furent complètement paralysés, d’autres furent déconnectés pour limiter les dégâts. Claude Duvallet — 7/108 HTML Introduction Historique Le réseau Internet Architecture Historique (3/4) 1990 : ARPANET s’éteint pour être remplacé par Internet, qui compte plus de 300 000 hôtes, arrivé du WWW (World Wide Web) développé au CERN en Suisse, ⇒ changement irréversible de l’économie mondiale : apparition du e-Business (commerce électronique), interconnexion des systèmes d’information des entreprises, 1992 : plus de 1 000 000 machines connectées. 1993 : conception du premier navigateur Web : Mosaic. 1994 : 3 500 000 d’hôtes pour 40 000 réseaux interconnectés, les moteurs de recherche apparaissent. création de Nestcape Communicator. Claude Duvallet — 8/108 HTML Introduction Historique Le réseau Internet Architecture Historique (4/4) 2000 : l’économie mondiale mute à nouveau : apparition du c-Business (travail collaboratif), utilisation du Web pour définir des espaces communautaires. 2005 : 1 milliard d’internautes. Claude Duvallet — 9/108 HTML Introduction Historique Le réseau Internet Architecture Le réseau Internet Internet est un immense réseau d’ordinateurs interconnectés sur toute la planète : tous ces ordinateurs peuvent échanger des informations. pendant le temps d’une connexion à l’Internet, l’ordinateur utilisé devient membre de ce réseau. 111 000 000 111 00 11 00 11 00 11 1111 0000 0000 1111 11 00 11 00 111 000 000 111 11 00 11 00 111 000 000 111 11 00 11 00 11 00 111 000 000 111 00 11 00 11 111 000 000 111 11 00 11 00 11 00 111 000 000 111 11 00 11 00 11 00 111 000 000 111 00 11 00 11 00 11 Claude Duvallet — 10/108 111 000 000 111 11 00 11 00 11 00 HTML Introduction Historique Le réseau Internet Architecture Architecture (1/4) Une des raisons majeures, qui fait la solidité d’Internet, est sa composition. totalement décentralisé : il ne comporte aucun "site central", c’est un réseau maillé, constitué de routeurs : nœuds du réseau. formé d’un ensemble de réseaux. Internet ne possède pas d’architecture véritable : ce qui le caractérise, c’est le principe d’acheminement des messages qui y transitent. Claude Duvallet — 11/108 HTML Introduction Historique Le réseau Internet Architecture Architecture (2/4) Serveur : machine avec système d’exploitation multi-tâches, offre des services à l’écoute du réseau 24h/24, 111 000 0 1 000 111 0 1 11 00 11 00 00 11 111 000 000 111 11 00 rôle : transformation de l’url en fichier ou en script. envoi de la réponse au client, mise à jour des journaux (Acces_log, error_log, ...) , vérification d’accès : le client est-il autorisé à effectuer cette requête ? ... Claude Duvallet — 12/108 HTML Introduction Historique Le réseau Internet Architecture Architecture (3/4) Client : programme appelant un service sur une machine distante, pas de communication client / client, ⇒ clients / serveur sont mis en relation par un protocole : méthode standard qui permet la communication entre des processus. les protocoles : TCP, UDP, HTTP, FTP, IP, SMTP, Telnet... Routeur = une machine connectée à plusieurs réseaux. Les routeurs calculent à chaque instant le chemin optimal : en cas d’encombrement, les informations (paquets) sont transmises, mais avec une vitesse moindre. L’ordinateur destinataire réceptionne les informations (paquets) les unes après les autres et les assemblent. Claude Duvallet — 13/108 HTML Introduction Historique Le réseau Internet Architecture Architecture (4/4) L’architecture d’un réseau a 2 aspects : physique : déterminé par des contraintes physiques et d’emplacements. logique : déterminé par les objectifs que l’on veut atteindre en termes de débit, de sécurité, de disponibilité. Claude Duvallet — 14/108 HTML Introduction Historique Le réseau Internet Architecture Le WEB Claude Duvallet — 15/108 HTML Hyperliens Le WEB 5 Hyperliens Claude Duvallet — 16/108 HTML Hyperliens Hyperliens Le web a été inventé au CERN en Suisse. Il se base sur l’hypertexte : ensemble de documents liés les uns aux autres à l’aide de liens ou hyperliens. Ajouter une figure En sélectionnant un de ces liens : passe d’un document à l’autre : un hypertexte se différencie d’un texte habituel par le fait qu’il ne se lit pas linéairement. Sur un texte, le lien se présente sous la forme d’un texte souligné de couleur bleue. Claude Duvallet — 17/108 HTML Hyperliens HTML Claude Duvallet — 18/108 HTML Généralités En-tête Corps Structurer un document HTML 6 Généralités 7 En-tête 8 Corps 9 Structurer un document Claude Duvallet — 19/108 HTML Généralités En-tête Corps Structurer un document HTML (HyperText Markup Language) Le HTML est un format d’écriture de document du type SGML (Standard Generalized Markup Language) : HTML est un ensemble de balises utilisés pour définir les différents composants d’un document Web. langage de description de documents hypertextuels. HTML =⇒ XHTML Depuis le 26 janvier 2000, le XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web : le XHTML n’est rien de plus que du HTML reformulé de façon à respecter les règles strictes du XML. Claude Duvallet — 20/108 HTML Généralités En-tête Corps Structurer un document Exemple de fichier source <html> <head> <title> Titre de la page </title> </head> <body> Exemple simple de page WEB </body> </html> Résultat : Claude Duvallet — 21/108 HTML Généralités En-tête Corps Structurer un document Affichage du code source d’une page menu ’Affichage’ puis ’Code source de la page’. Claude Duvallet — 22/108 HTML Généralités En-tête Corps Structurer un document Le langage HTML De façon générale les commandes sont de la forme : <balise>texte</balise> ou encore <balise attribut="valeur">texte</balise> L’instruction suivante n’est pas du XHTML : <balise> balise est vide ou orpheline : <br ></br> ou <br /> Claude Duvallet — 23/108 HTML Généralités En-tête Corps Structurer un document Remarques générales Les noms de marqueurs sont minuscules : <b> et non <B> Plusieurs attributs pour une même balise : <balise attribut1="valeur" attribut2="valeur"> texte </balise> Plusieurs caractères blancs sont remplacés par un seul caractère blanc. Les "retours-chariot " ne sont pas pris en compte, il faut utiliser : <p> (changement de paragraphe). <br /> (changement de ligne). Une ligne peut être mise en commentaires : <!-- commentaire --> Claude Duvallet — 24/108 HTML Généralités En-tête Corps Structurer un document Principaux caractères de code ASCII de la langue française Les normes HTML demandent de respecter le codage dans les caractères ASCII 7 bits, c’est à dire sans caractères accentués : Claude Duvallet — 25/108 HTML Généralités En-tête Corps Structurer un document Balise d’entête Entre le couple de balises <head> et </head> : donnent des informations générales sur toute la page : <title> </title> titre de la page. <meta...> informations lues par le serveur, optimise le référencement. Claude Duvallet — 26/108 HTML Généralités En-tête Corps Structurer un document Les méta-données (1/2) Définition de la langue et du nom de l’auteur : <meta name="Author" lang="fr" content="Claude Duvallet"/> ⇒ plusieurs auteurs possibles séparés par des virgules. Définition de mot-clés qui caractérisent le mieux le site : <meta name="Keywords" lang="fr" content="Mots clés, espacés par une virgule"/> Catégorie de la page (pour les moteurs de recherche) : <meta name="Category" content="Création de site WEB"/> Copyright de la page : <meta name="Copyright" content="Claude Duvallet"/> Description : zone fréquentée par les moteurs de recherche qui indexent le site, utilisée comme résumé, <meta name="Description" content="Le rôle des balises HTML"/> Claude Duvallet — 27/108 HTML Généralités En-tête Corps Structurer un document Les méta-données (2/2) Langage : langue de la page sous la forme de 2 lettres, fr, en, de, es, it, ... <meta name="Language" content="fr"/> Interdire l’enregistrement de la page dans la mémoire cache : <meta http-equiv="Pragma" content="no-cache"/> Réactualisation de la page toutes les 4 sec : < meta http-equiv="refresh" content="4"/> Redirection vers une autre page au bout de 5 secondes : <meta http-equiv="refresh" content="5;url=http://www.google.fr"/> Claude Duvallet — 28/108 HTML Généralités En-tête Corps Structurer un document Corps de la page Encadré par les balises : <body> </body> dans cette partie sont définis les éléments visualisables de la page. Claude Duvallet — 29/108 HTML Généralités En-tête Corps Structurer un document Exercice 1 Écrire une page HTML : nom du fichier : premier.html titre : ma Première Page WEB spécifier votre nom comme auteur, préciser les langues avec fr et en, faire une redirection de la page vers le site : http ://www.bing.fr au bout de 10 secondes, corps de la page : redirection dans 10 sec. Claude Duvallet — 30/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <head> <title>Ma Premiere Page WEB</title> <meta name="Author" lang="fr" content="Nom Auteur"/> <meta http-equiv="refresh" content="10;URL=http://www.bing.fr"/> </head> <body> Redirection dans 10 sec. </body> </html> Claude Duvallet — 31/108 HTML Généralités En-tête Corps Structurer un document Exercice 1 Bis : pour aller plus loin Interdisez l’enregistrement de la page dans la mémoire cache des moteurs de recherche et navigateurs. Claude Duvallet — 32/108 HTML Généralités En-tête Corps Structurer un document Attributs de body Claude Duvallet — 33/108 HTML Généralités En-tête Corps Structurer un document Exemple <html> <head> <title>Exemple de page avec une image de fond fixe et un texte de couleur bleue</title> </head> <body leftmargin="100" topmargin="100" bgproperties="fixed" background="imageFond.jpg" text="blue"> Corps de la page </body> </html> Claude Duvallet — 34/108 HTML Généralités En-tête Corps Structurer un document Exercice 2 Deuxième page HTML : ajouter une image fixe de fond (mer.jpg), ajouter une barre de défilement, définir la couleur du texte à "rouge", ajouter une marge à gauche de 50 pixels, Titre de la page Exemple de page WEB avec une image de fond corps du document : Ma page WEB Claude Duvallet — 35/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <head> <title> Exemple de page WEB avec une image de fond </title> </head> <body background="mer.jpg" scroll="yes" leftmargin="50" bgproperties="fixed" text="red" > Ma page WEB </body> </html> Claude Duvallet — 36/108 HTML Généralités En-tête Corps Structurer un document Balises de mise en page Permettent de faire une action ponctuelle là où elles apparaissent, sans effet sur la suite du document : <hr /> trace un trait de séparation dans le texte, il occupe toute la largeur de l’écran. attributs possibles : <hr size="nombre" /> donne une épaisseur au trait. <hr width="nombre|pourcentage" /> donne la longueur du trait. <hr align="left|right|center" /> le trait peut être aligné à gauche, à droite ou centré, il est centré par défaut. Claude Duvallet — 37/108 HTML Généralités En-tête Corps Structurer un document Exercice 3 Claude Duvallet — 38/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <head> <title>Exercice 3</title> </head> <body> Première partie <hr /> Deuxième partie <hr size= "20" /> Troisième partie <hr align= "left " width= "50%" /> Quatrième partie <hr align= "center" width= "50%" /> Cinquième partie <hr align= "right " width= "50%" /> Sixième partie <hr /> </body> </html> Claude Duvallet — 39/108 HTML Généralités En-tête Corps Structurer un document Balises de mise en page <br /> Est une marque de fin de ligne. <p> est une marque de fin de paragraphe. <p align="center|left|right"> permet d’aligner le texte, il est aligné à gauche par défaut, la balise </p> limitera la portée de la balise <p>. <div align="left|center|right"> ... </div> permet de justifier un texte à droite, au centre, ou à gauche, permet de d’organiser en block la structure d’un site. <center>...</center> permet de centrer le texte qu’il encadre Claude Duvallet — 40/108 HTML Généralités En-tête Corps Structurer un document Exercice 4 Claude Duvallet — 41/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <body> <center>Le corbeau et le Renard</center> <hr /><hr /> <center>Maître Corbeau, sur un arbre perché,<br /> Tenait en son bec un fromage.<br /> Maître Renard, par l’odeur alléché,<br /> Lui tint à peu près ce langage:<br /> </center> Et bonjour, Monsieur du Corbeau.<br /> Que vous êtes joli! que vous me semblez beau!<br /> Sans mentir, si votre ramage<br /> Se rapporte à votre plumage,<br /> Vous êtes le Phénix des hôtes de ces bois.<br /> <center>A ces mots, le Corbeau ne se sent pas de joie;<br /> Et pour montrer sa belle voix,<br /> Il ouvre un large bec, laisse tomber sa proie.<br /> Le Renard s’en saisit, et dit:<br /> </center> <div align="right">Mon bon Monsieur,<br /> Apprenez que tout flatteur<br /> Vit aux dépens de celui qui l’écoute.<br /> Cette leçon vaut bien un fromage, sans doute.<br /> </div> <center>Le Corbeau honteux et confus<br /> Jura, mais un peu tard, qu’on ne l’y prendrait plus.<br /> </center> </body> </html> Claude Duvallet — 42/108 HTML Généralités En-tête Corps Structurer un document Balises de mise en forme (1/3) Gras : <b> Ceci permet d’afficher en gras </b> Italique : <i> Ceci permet d’afficher en italique </i> Souligné : <u> Ceci permet d’afficher en souligné </u> Combinaison : <b> < i> Gras italique </i></b> Autres balises : <blockquote>...</blockquote> affiche un texte en retrait. <s>...</s> affiche un texte barré. Claude Duvallet — 43/108 HTML Généralités En-tête Corps Structurer un document Balises de mise en forme (2/3) Autres balises (suite) : <tt>...</tt> affiche un texte style machine à écrire. <em>...</em> met en relief un groupe de caractères. <big>...</big> écrit un texte plus gros. <small>...</small> écrit un texte plus petit. <sup> ... </sup> permet d’entrer des exposants : x 2 + y 2 = R 2 <sub> ... </sub> permet d’entrer des indices : xn+1 − xn = nn−1 Claude Duvallet — 44/108 HTML Généralités En-tête Corps Structurer un document Balises de mise en forme (3/3) Niveau hiérarchique : <h1>Titre <h2>Titre <h3>Titre <h4>Titre <h5>Titre <h6>Titre de de de de de de niveau niveau niveau niveau niveau niveau 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6> Claude Duvallet — 45/108 HTML Généralités En-tête Corps Structurer un document Exercice 5 Claude Duvallet — 46/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <body> <h1> <center> <center> <b> <b><u> A ces mots, le Corbeau ne se sent pas de joie;<br /> Le corbeau et le Renard Et pour montrer sa belle voix,<br /> </u></b> Il ouvre un large bec, laisse tomber sa proie.<br /> </center> Le Renard s’en saisit, et dit:<br /> </h1> </b> <hr /> </center> <hr /> <div align="right"> <center> <i> <b> Mon bon Monsieur,<br /> Maître Corbeau, sur un arbre perché,<br /> Apprenez que tout flatteur<br /> Tenait en son bec un fromage.<br /> Vit aux dépens de celui qui l’écoute.<br /> Maître Renard, par l’odeur alléché,<br /> Cette leçon vaut bien un fromage, sans doute.<br /> Lui tint à peu près ce langage:<br /> </i> </b> </div> </center> <center> <i> <b> Et bonjour, Monsieur du Corbeau.<br /> Le Corbeau honteux et confus<br /> Que vous êtes joli! que vous me semblez beau! Jura, mais un peu tard, qu’on ne l’y prendrait plus. <br /> <br /> Sans mentir, si votre ramage<br /> </b> Se rapporte à votre plumage,<br /> </center> Vous êtes le Phénix des hôtes de ces bois. </body> <br /> </html> </i> Claude Duvallet — 47/108 HTML Généralités En-tête Corps Structurer un document Exercice 6 Claude Duvallet — 48/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <body> <h1> <center><b><u><i>Le corbeau et le Renard</i></u></b></center> </h1> <hr /> <hr /> <center> <h1>Maître Corbeau, sur un arbre perché,</h1><br /> <h2>Tenait en son bec un fromage. </h2><br /> <h3>Maître Renard, par l’odeur alléché, </h3><br /> <h4>Lui tint à peu près ce langage: </h4><br /> <h5>Et bonjour, Monsieur du Corbeau.</h5> <br /> <h6>Que vous êtes joli! que vous me semblez beau! </h6><br /> <hr /> <tt>Machine à écrire </tt><br /> <s>Barré</s><br /> Définition de la suite : x<sub>n+1</sub>= x<sub>n</sub><sup>2</sup> </center> </body> </html> Claude Duvallet — 49/108 HTML Généralités En-tête Corps Structurer un document Les listes Il existe 3 types de liste : listes de définitions, listes non ordonnées, listes ordonnées. Liste de définitions : utilisation des balises principales : <dl> ... </dl> utilisation des balises secondaires <dt>...</dt> et <dd>...</dd> <dd> est en retrait par rapport à <dt> : <dl> <dt>Terme 1 à définir </dt> <dd>Définition du terme 1 </dd> <dt>Terme 2 à définir </dt> <dd>Définition du terme 2 </dd> </dl> Résultat dans le navigateur : Claude Duvallet — 50/108 HTML Généralités En-tête Corps Structurer un document Liste non ordonnée Permet de faire une liste d’éléments, sans notion d’ordre : pas de premier, pas de dernier, ⇒ il suffit d’utiliser la balise <ul>. Liste à puces : <ul> <li>texte 1</li> <li>texte 2</li> </ul> La balise peut prendre les arguments suivants : <ul type="disc|circle|square" > exemple : <ul type="square" > <li> texte 1 </li> <li> texte 2 </li> </ul> Claude Duvallet — 51/108 HTML Généralités En-tête Corps Structurer un document Les listes numérotées L’ordre dans lequel les éléments vont être mis est important : <li></li> sera le premier élément, <li></li> sera le second élément, Liste de numéros qui s’incrémente automatiquement : <ol> <li>texte 1</li> <li>texte 2 </li> </ol> arguments possible type A|a|I|i|1 start : permet de changer la valeur de départ pour la numérotation : Exemple : <ol type="a" start= "3"> Claude Duvallet — 52/108 HTML Généralités En-tête Corps Structurer un document Les listes emboîtées Les listes peuvent être emboitées en niveaux : se programme : <ul> <li>Niveau 1 </li> <ul> <li>Niveau 2 </li> <li>Niveau 2 </li> </ul> <li>Niveau 1 </li> </ul> Claude Duvallet — 53/108 HTML Généralités En-tête Corps Structurer un document Exercice 7 Claude Duvallet — 54/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <body> <b> <li> petit b </li> <ol type= "i" > <li>petit i</li> <dl> <li>petit ii</li> <dt> Terme 1 à définir <li value="4">petit iv</li> <dd> Définition du terme 1</dd> <li>petit v</li> </dt> </ol> <dt> Terme 2 à définir <li> petit c </li> <dd> Définition du terme 2</dd> </ol> </dt> <li> grand C </li> </dl> <li> grand D </li> <hr/> </ol> <ol> <hr/> <li>puce 1</li> <ul> <li>puce 2 </li> <li>Niveau 1 </li> <li>puce 3 </li> <ul> </ol> <li>Niveau 2 </li> <ul type="square" > <li>Niveau 2 </li> <li> texte 1 </li> </ul> <li> texte 2 </li> <li>Niveau 1 </li> </ul> </ul> <ol type="A" start="2"> </b> <li> grand B </li> </body> <ol type="a"> </html> <li> petit a </li> Claude Duvallet — 55/108 HTML Généralités En-tête Corps Structurer un document Polices de caractères Pour modifier la taille : <basefont size="valeur"> où taille est comprise entre 1 et 7 (par défaut c’est 3). Pour modifier la police : <font face="style"> ...</font> Le style peut-être Verdana, Arial, Helveltica, sans-sherif, ... Pour modifier la couleur des caractères : <font color="#FF0000"> ... </font> ou encore <font color="green">vert</font Claude Duvallet — 56/108 HTML Généralités En-tête Corps Structurer un document Exercice 8 Claude Duvallet — 57/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <body> <basefont size="5" /> Le texte par défaut de cette page est en taille 5<br /> Avec des parties de tailles différentes<br /> </font> <font size= "2" >ce texte est en taille 2</font><br /> <font face="Verdana">police verdana</font><br /> <font face="Arial" size="6">police arial taille 6</font> <br /> <font face="Helveltica">police Helveltica</font> <br /> <font face="century">police century</font> <br /> <font color="blue" face="tahoma"> police tahoma en bleu </font> <br /> Police par défaut de la page </body> </html> Claude Duvallet — 58/108 HTML Généralités En-tête Corps Structurer un document Les tableaux (1/5) Permettent d’organiser le texte avec ou sans visualisation de cadres : les tableaux peuvent être emboîtés, les tableaux se construisent ligne/ligne. Un tableau est encadré par la balise table : <table ...></table> <tr ...> </tr> chaque balise tr définit une ligne du tableau. <td ...> </td> chaque balise td définit une cellule à l’intérieur d’une ligne, il y a autant de balises td que de colonnes par ligne. Claude Duvallet — 59/108 HTML Généralités En-tête Corps Structurer un document Les tableaux (2/5) Exemple : <table border="1"> <tr> <td>Colonne1 <td>Colonne2 <td>Colonne3 </tr> <tr> <td>Colonne1 <td>Colonne2 <td>Colonne3 </tr> </table> Ligne1</td> Ligne1</td> Ligne1</td> Ligne2</td> Ligne2</td> Ligne2</td> Claude Duvallet — 60/108 HTML Généralités En-tête Corps Structurer un document Les tableaux (3/5) Exemple avec titre : <table border="1"> <tr> <th>Titre1</th> <th>Titre2</th> <th>Titre3</th> </tr> <tr> <td>Colonne1 Ligne1</td> <td>Colonne2 Ligne1</td> <td>Colonne3 Ligne1</td> </tr> <tr> <td>Colonne1 Ligne2</td> <td>Colonne2 Ligne2</td> <td>Colonne3 ligne2</td> </tr> </table> Claude Duvallet — 61/108 HTML Généralités En-tête Corps Structurer un document Les tableaux (4/5) Exemple sans bordure : <table border="0"> <tr> <th>Titre1</th> <th>Titre2</th> <th>Titre3</th> </tr> <tr> <td>Colonne1 Ligne1</td> <td>Colonne2 Ligne1</td> <td>Colonne3 Ligne1</td> </tr> <tr> <td>Colonne1 Ligne2</td> <td>Colonne2 Ligne2</td> <td>Colonne3 ligne2</td> </tr> </table> Claude Duvallet — 62/108 HTML Généralités En-tête Corps Structurer un document Les tableaux (5/5) Exemple avec titre de tableau : <table border="2"> <caption align="top"> Titre du tableau en haut </caption> <tr> <th>Titre1</th> <th>Titre2</th> <th>Titre3</th> </tr> <tr> <td>Colonne1 Ligne1</td> <td>Colonne2 Ligne1</td> <td>Colonne3 Ligne1</td> </tr> <tr> <td>Colonne1 Ligne2</td> <td>Colonne2 Ligne2</td> <td>Colonne3 ligne2</td> </tr> </table> Claude Duvallet — 63/108 HTML Généralités En-tête Corps Structurer un document Exercice 9 Claude Duvallet — 64/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <tr align="center"> <body> <td>gomme</td> <td>10</td> <center> <table border="3"> <td>0,5</td> <tr> <td>5</td> <th>Nom</th> </tr> <th>Quantité</th> <tr align="center"> <th>Prix Unitaire</th> <td>compas</td> <th>Total</th> <td>1</td> </tr> <td>7</td> <tr align="center"> <td>7</td> <td>crayon</td> </tr> <td>4</td> </table> <td>1</td> </center> <td>4</td> </body> </tr> </html> Claude Duvallet — 65/108 HTML Généralités En-tête Corps Structurer un document Les tableaux Fusion de cellules : rowspan : lignes. colspan : colonnes. Exemple : <table border= "1"> <caption align="top"> Titre du tableau en haut </caption> <tr> <th>Titre1</th> <th>Titre2</th> Claude Duvallet — 66/108 <th> Titre3</th> </tr> <tr align= "center" > <td colspan = "2" > Cellules fusionnées </td> <td rowspan = "2" > Colonne2 Ligne1 </td> </tr> <tr> <td>Colonne1 Ligne2</td> <td>Colonne2 Ligne2</td> </tr> </table> HTML Généralités En-tête Corps Structurer un document Exercice 10 Claude Duvallet — 67/108 HTML Généralités En-tête Corps Structurer un document Correction <td>banane</td> <html> <td>endive</td> <body> <td>carotte</td> <table border="1"> </tr> <caption align="top"> <tr> Titre du tableau en haut <td>raisin</td> </caption> <td>pêche</td> <tr> <td>choux</td> <th>Titre1</th> <td>pois</td> <th>Titre2</th> </tr> <th>Titre3</th> <tr align="center"> <th>Titre4</th> <td>ananas</td> <th>Titre5</th> <td>prune</td> </tr> <td>poirier</td> <tr align="center"> <td colspan="2">betterave</td> <td colspan="2">fruits</td> </tr> <td rowspan="3">arbre</td> <td colspan="2">légumes</td> </table> </body> </tr> </html> <tr> <td>pomme</td> Claude Duvallet — 68/108 HTML Généralités En-tête Corps Structurer un document Les images (1/3) Insertion : <img src="nom du fichier"/> attribut alt : pour afficher un texte si le browser ne sait pas lire l’image. exemple : <img alt="texte" src="nom du fichier"/> La balise img peut être agrémentée des attributs : align="left|right|top|texttop|middle|absmiddle| baseline|bottom|absbottom" aligne les images à gauche, à droite, en haut, en haut du texte, au milieu, au milieu par rapport à la ligne, en bas, en bas de la ligne etc. width="valeur" height= "valeur" permet au navigateur de mettre en place la bonne mise en page. Claude Duvallet — 69/108 HTML Généralités En-tête Corps Structurer un document Les images (2/3) Autres attributs : border= "valeur" donne l’épaisseur du trait autour de l’image. vspace= "valeur" hspace= "valeur" vspace contrôle l’espacement vertical en pixels au-dessus et en dessous de l’image, hspace contrôle l’espacement horizontal en pixels à droite et à gauche de l’image. Exemple : <html> <body> <center> <b>Plage</b><br /> <img alt="mer" src="mer.jpg" width= "60%" height= "60%" vspace= "30" /> </center> </body> </html> Claude Duvallet — 70/108 HTML Généralités En-tête Corps Structurer un document Les images (3/3) Ajouter une figure Claude Duvallet — 71/108 HTML Généralités En-tête Corps Structurer un document Exercice 11 Ajouter une figure Claude Duvallet — 72/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <body> <center> <b>Plages & Gifs animés</b><br /> <img src="ordi.gif" vspace= "30"/> <img alt="mer" src="mer.jpg" width= "30%" height= "30%" hspace= "100" vspace= "30" /> <img src="papillon.gif" vspace= "30"/><br /> <img alt="mer" src="mer.jpg" width= "100%" height= "50%" vspace=30/> </center> </body> </html> Claude Duvallet — 73/108 HTML Généralités En-tête Corps Structurer un document Affichage des images (1/3) Pour la diffusion d’images sur Internet, le W3C conseille 3 formats de fichier bitmap qui sont bien interprétés par les navigateurs Web : JPEG, GIFF et PNG. JPEG (Joint Photographic Expert Group) fonctionne en mode RGB 24 bits : c’est une norme ISO de compression d’images avec perte. son algorithme élimine des données peu perceptibles à l’œil, appelées redondances psycho-visuelles par un découpage de l’image en zones, sa compréhension est dite avec pertes : plus le taux de compression est élevé, plus l’image est détériorée (apparition de « blocks » ou « carreaux »), ces pertes sont irréversibles, le taux de compression est variable et réglable par l’utilisateur lors de son enregistrement. Claude Duvallet — 74/108 HTML Généralités En-tête Corps Structurer un document Affichage des images (2/3) GIF (Graphic InterchangeFormat) : développé par CompuServe, 256 couleurs : adapté aux graphiques et logos. compression sans perte (LZW) : compression non efficace si l’image contient des mélanges des mélanges de beaucoup de couleurs différentes, 2 versions : GIF87a : transparence. GIF89a : transparence, animation. Claude Duvallet — 75/108 HTML Généralités En-tête Corps Structurer un document Affichage des images (3/3) PNG (Portable Network Graphic) créé pour contourner l’omniprésence du GIF. Il fonctionne en 8 ou 24 bits. en 8 bits : il reprend les caractéristiques principales du GIF (sauf l’animation), en compressant un peu mieux, en mode 24 bits : il demeure plus lourd qu’un fichier JPEG, mais compresse sans perte. Ce mode est encore peu utilisé et les navigateurs ne l’interprètent pas toujours bien, ni de la même façon. Le format JPEG est préféré pour les photos, parce qu’il rend mieux les fines nuances de gris et de couleurs. Le GIF est utilisé pour les images provenant de dessins, plus techniques, ... : à utiliser s’il y a du texte dans l’image. ⇒ en cas de doute, utilisez le GIF. Claude Duvallet — 76/108 HTML Généralités En-tête Corps Structurer un document Liens et ancres (1/2) Un lien permet de définir une région sensible au clic souris dans un document et en même temps, l’endroit ou l’on va se retrouver après ce clic. La syntaxe générale d’un lien est la suivante : <a href="adresse" title= "valeur" >texte </a> Les signets (ancres) : <a name="signet"> . . . </a> permet de donner un nom à un endroit d’une page afin d’y faire référence. <a href="#nom de signet"> ... </a> définit un lien vers un signet dans le document, c’est à dire un lien hypertexte, qui conduira vers un signet après un clic dessus. Claude Duvallet — 77/108 HTML Généralités En-tête Corps Structurer un document Liens et ancres (2/2) Pour télécharger un fichier (.exe,...) : <a href="fichier">cliquez ici pour charger le fichier</a> L’argument mailto :adresse permet d’envoyer un courrier électronique à l’adresse correspondante : <a href=mailto :[email protected]>mail</a> L’attribut title de la balise a permet d’afficher une bulle d’aide lors du passage de la souris sur le lien : exemple : <a href="http ://www.google.fr" title="le moteur de recherche Google">Google</a> Claude Duvallet — 78/108 HTML Généralités En-tête Corps Structurer un document Exercice 12 Créer une page WEB contenant des liens vers l’ensemble de vos pages d’exercices. Ajouter un lien vers le bas de la page de l’exercice 7. Claude Duvallet — 79/108 HTML Généralités En-tête Corps Structurer un document Correction <html> <body> <center> <a href="Exercice1.html">Exercice 1</a><br /> <a href="Exercice2.html">Exercice 2</a><br /> <a href="Exercice3.html">Exercice 3</a><br /> <a href="Exercice4.html">Exercice 4</a><br /> <a href="Exercice5.html">Exercice 5</a><br /> <a href="Exercice6.html">Exercice 6</a><br /> <a href="Exercice7.html">Exercice 7</a><br /> <a href="Exercice8.html">Exercice 8</a><br /> <a href="Exercice9.html">Exercice 9</a><br /> <a href="Exercice10.html">Exercice 10</a><br /> <a href="Exercice11.html">Exercice 11</a><br /><br /> <a href="Exercice7.html#lafin"> Bas de la page de l’exercice 7 </a> </center> </body> </html> Claude Duvallet — 80/108 HTML Généralités En-tête Corps Structurer un document Les formulaires Les formulaires permettent d’envoyer des données au serveur. Elles seront ensuite traitées par celui-ci : enregistrement dans une base de données, récupération d’informations personnalisées, etc. La syntaxe d’une balise form est la suivante : <form action="url" method="post"> ... </form> Les attributs suivants peuvent être utilisés : action fournit une adresse URL sur laquelle la requête issue de le formulaire va être envoyée, method est la méthode d’accès au serveur http : get la requête est dans l’URL, limité à 255 caractères. post dans le corps de la requête http. Le texte encadré par le couple de balises <form> et </form> peut contenir plusieurs commandes : input, select, textarea. Claude Duvallet — 81/108 HTML Généralités En-tête Corps Structurer un document Attribut input (1/2) Les différents attributs que peut utiliser la commande input sont : type qui peut prendre les valeurs : text pour les entrées de type texte, hidden l’entrée ne sera pas affichée dans la page HTML, password pour les entrées de type mot de passe, checkbox pour les boîtes à cocher, radio pour les boutons radios, submit un bouton qui provoque l’envoi de la requête form, reset un bouton qui provoque la remise aux valeurs initiales de tous les champs, image permet de remplacer le bouton par défaut par une image, file permet de soumettre un fichier au serveur. Claude Duvallet — 82/108 HTML Généralités En-tête Corps Structurer un document Attribut input (2/2) Les autres attributs que peut utiliser la commande input sont : name : nom d’utilisation par l’auteur de la page, et qui n’est pas le nom affiché à l’utilisateur. value : valeur par défaut d’un champ de saisie. checked : indique que le bouton radio ou la boîte à cocher est cochée par défaut. size : taille du champ pour les champs caractères (par défaut 20). maxlength : nombre maximum de caractères. Claude Duvallet — 83/108 HTML Généralités En-tête Corps Structurer un document Exemples de formulaire (1/3) <html> <body> <form method="post" action="http://www.google.fr/"> Entrez la valeur du champ 1 <input type="text" name="entree1"/> <br /> Entrez la valeur du champ 2 <input type="text" name="entree2"/> <br /> Entrez la valeur du champ 3 <input type="text" name="entree3"/> <br /> <input type="submit" value="Envoyer" /> </form> </body> </html> Claude Duvallet — 84/108 HTML Généralités En-tête Corps Structurer un document Exemples de formulaire (2/3) <html> <body> <form method="post" action="http://www.google.fr/"> Nom <input type="text" name="Nom"><br /> Prénom <input type="text" name="Prenom"/> <ol> <li> <input type="checkbox" checked name="topping1" value="Marie" />Marié </li> <li> <input type="checkbox" name="topping2" name="francais"/>français </li> </ol> Volontaire <dl> <dd> <input type="radio" name="callfirst" value="Oui" checked/><i>Oui</i> </dd> <dd> <input type="radio" name="callfirst" value="Non"/><i>Non</i> </dd> <dd> <input type="radio" name="callfirst" value="Ne sait pas"/><i>Ne sait pas</i> </dd> </dl> <input type="submit" value="Ok"/> <input type="reset" value="Annuler"/> </form> </body> </html> Claude Duvallet — 85/108 HTML Généralités En-tête Corps Structurer un document Exemples de formulaire (3/3) <html> <body> <form method="post" action="http://google.fr/"> Champ 1 (normal) : <input name="entree1"/> <br /> Champ 2 (40 caractères affichés) : <input size="40" name="entree2"/> <br /> Champ3 (5 caractères seulement) : <input size="5" maxlenght="5" name="entree3"/><br /> <input type="submit" value="OK"> <input type="reset" value="Annuler"/> </form> </body> </html> Claude Duvallet — 86/108 HTML Généralités En-tête Corps Structurer un document Attribut select select permet de donner la liste des champs accessibles pour les menus déroulant : utilisée avec la syntaxe suivante : <select name="menu"> <option value="valeur1">Option 1</option> <option value="valeur2">Option 2</option> </select> Propriétés : name nom symbolique de l’élément. size donne le nombre d’éléments qui seront affichés dans le menu. multiple indique que la commande select pourra avoir plusieurs sélections. selected indique que l’option est sélectionnée par défaut. value est un paramètre optionnel permettant de donner à la variable la valeur désirée. Claude Duvallet — 87/108 HTML Généralités En-tête Corps Structurer un document Exemple <html> <body> <form method= "post" action=" http://www.google.fr/"> <select name="menu"> <option value ="valeur1"/>Option 1 <option value= "valeur2"/>Option 2 </select> <input type="submit" value="OK"/> <input type="reset" value="Annuler"/> </form> </body> </html> Claude Duvallet — 88/108 HTML Généralités En-tête Corps Structurer un document Zone de texte <textarea name ="..." rows="..." cols=...>texte défaut</textarea> name nom symbolique de l’élément. rows nombre de lignes du champs de saisie. cols longueur de la ligne de saisie du champ texte. Claude Duvallet — 89/108 HTML Généralités En-tête Corps Structurer un document Exercice 13 Claude Duvallet — 90/108 HTML Généralités En-tête Corps Structurer un document Correction <html> Logiciels utilisés : <body> <select name="software" multiple size="5"> <form method="post" <option value="compta"/>Comptabilité action="http://www.google.fr/"> <option selected value="jeux"/>Jeux Login <option value="traitementTexte"/> <input id="name" value="guess"/> Traitement de texte <br /> </select> Mot de passe <br /> <input type="password" name="passwd" <textarea name="Commentaires" value="guess"/> rows="20" cols="60"> <br /> Néant Système d’exploitation : </textarea> <select name="system"> <br/> <option value="mac"/>Mac OS <input type="submit" value="OK"/> <option selected value="pc"/> <br /> PC Windows </form> <option value="unix"/>Unix </body> </select> </html> <br /> Claude Duvallet — 91/108 HTML Généralités En-tête Corps Structurer un document Les maps (1/2) Les balises <map> et </map> permettent d’appeler une page HTML différente suivant la zone où l’on clique sur une image. Entre les balises <map> et </map>, la liste des zones sensibles est spécifiée en utilisant <area> : <area shape="valeur" coords="valeur" href="URL" alt="infobulle"> avec shape= "rect|circle|poly|default" la zone de définition est alors un rectangle, un cercle, un polygone ou l’image entière. coords : coordonnées des coins opposés pour un carré (exemple : "130,10,170,90") coordonnées du centre et du rayon pour un cercle (exemple : "50,50,10") coordonnées des points pour un polygone (exemple : "250,10,210,90,290,90") Claude Duvallet — 92/108 HTML Généralités En-tête Corps Structurer un document Les maps (2/2) href="URL" est atteinte après le clic. Exemple : <map name="nom"> <area shape="rect" coords="50,10,100,100" href="http://www.google.fr"/> <area shape="circle" coords="15,15,5" href="http://www.google.fr"/> <area shape="poly" coords="15,100,20,110,15,130" href="mailto:[email protected]"/> </map> <img src="image.jpg" usemap="#nom"/> Claude Duvallet — 93/108 HTML Généralités En-tête Corps Structurer un document Exercice 14 Créer 2 zones de liens sur la carte de France : Utilisez regions.jpg. Région parisienne : cercle de centre (253,142) et de rayon 32. lien vers www.paris.fr (info bulle : Paris). Haute-Normandie : polygone défini par les points de coordonnées (118,65),(187,95),(198,158),(119,127). lien vers www.haute-normandie.net (info bulle : Normandie). Claude Duvallet — 94/108 HTML Généralités En-tête Corps Structurer un document Correction <map name= "france"> <area shape="circle" coords= "253,142,32" href="http://www.paris.fr" alt="paris" /> <area shape="poly" coords= "118,65,187,95,198,158,119,127" href="http://www.haute-normandie.net" alt="haute-normandie"/> </map> <img src="regions.jpg" usemap="#france" /> Claude Duvallet — 95/108 HTML Généralités En-tête Corps Structurer un document HTML/CSS Claude Duvallet — 96/108 HTML Les propriétés de style Styles CSS Divisions HTML/CSS 10 Les propriétés de style 11 Styles CSS 12 Divisions Claude Duvallet — 97/108 HTML Les propriétés de style Styles CSS Divisions HTML/CSS Les documents Web sont globalement composés de 2 normes : XHTML définit la structure du document. CSS apporte le rendu visuel. ⇒ lorsque aucun style CSS n’est défini, chaque élément hérite d’un affichage par défaut qui peut être légèrement différent d’un navigateur à un autre. Les feuilles de style Cascading Style Sheets permettent : séparer les informations de la présentation : avoir une homogénéité sur tout un site, rapidement changer l’aspect d’un site complet, meilleure lisibilité du code HTML, positionnement rigoureux des éléments, chargements de page plus rapides. Claude Duvallet — 98/108 HTML Les propriétés de style Styles CSS Divisions Les propriétés de style Elles permettent d’intervenir sur : polices, les propriétés du texte, les couleurs, les marges, les bordures, ... Pour définir un style "par défaut" à un document, il suffit de l’associer à un élément qui encadre tous les autres : body. Claude Duvallet — 99/108 HTML Les propriétés de style Styles CSS Divisions Définition de style Un style est composé d’une balise et d’une déclaration de style : balise{ propriété de style: valeur; propriété de style: valeur; ... } exemple : p {font-family:Arial;} ⇒ le " ;" n’est pas obligatoire s’il n’y a qu’une seule propriété pour la balise. Claude Duvallet — 100/108 HTML Les propriétés de style Styles CSS Divisions Où définir un style ? Trois manières de définir un style : style du document : déclaré entre <style>...</style> dans l’en-tête du document. style en ligne : comme attribut de balise à laquelle il se rapporte : <p style="style pour la balise">texte</p> style externe et style importé : nécessite un fichier d’extension .css Exemple : <html> <head> <title>title</title> <link rel=stylesheet type="text/css" href="fichier.css" /> <style type="text/css"> @import url(http://www.style.com/fichierexterne.css); h1 { color: blue; } </style> </head> <body> <p style="color: green">Paragraphe vert...</p> </body> </html> Claude Duvallet — 101/108 HTML Les propriétés de style Styles CSS Divisions Explications La balise <link> avertit le navigateur qu’il doit chercher un document situé à l’extérieur de la page HTML. L’attribut rel="stylesheet" précise que le document en question est une feuille de style externe. L’attribut type="text/css" précise le type de feuille de style. L’attribut href="URL" donne l’URL de la feuille de style, c’est-à-dire son emplacement sur Internet. Claude Duvallet — 102/108 HTML Les propriétés de style Styles CSS Divisions Styles CSS (1/3) Appliquer un style à plusieurs balises : h1, h2, h3{ font: helvetica; } Regroupement de propriétés : h1 { color:blue; font: helvetica; } Héritage : La couleur de H1 s’applique à EM s’il n’a pas de couleur spécifique : <h1>Cette ligne <em>est</em> un exemple</h1> Les classes permettent d’affecter des styles différents à un même sélecteur de balise : exemple : b.rouge {font="Arial";font-color="red";} b.blue {font="Arial";font-color="blue";} appel : <b class="rouge">Paragraphe en gras et rouge </b> ⇒ l’attribut class peut s’appliquer à toutes les balises. Claude Duvallet — 103/108 HTML Les propriétés de style Styles CSS Divisions Styles CSS (2/3) Classe universelle : la balise n’est pas précisée, la classe pourra s’appliquer à toute balise pour laquelle elle a un sens : mettre un "." lors de la référence CSS, exemple : <p class="jaune">texte à écrire en jaune</p> .jaune { font-type:arial; color:yellow; } ⇒ pas de notion de sous-classe comme b.rouge.gras. id fonctionne comme class mais ne peut être utilisé qu’une seule fois : mettre "#" lors de la référence CSS, exemple : <p id="jaune">Texte à écrire en jaune</p> #jaune{ font-type:arial; color:yellow; } ⇒ fonctionne sur toutes les balises. Claude Duvallet — 104/108 HTML Les propriétés de style Styles CSS Divisions Styles CSS (3/3) Les commentaires dans une définition de style ressemblent à ceux du langage C : /*le texte sera en rouge*/ em { color: red; } Exercice 15 : Reprendre l’exercice 8 : faire figurer dans un document annexe les informations de mise en forme (style externe). Claude Duvallet — 105/108 HTML Les propriétés de style Styles CSS Divisions Corrections <html> <head> <link rel="stylesheet" type="text/css" href="exo.css"ă /> </head> <body> Le texte par défaut de cette page est en taille 5<br /> Avec des parties de tailles différentes<br /> <font class="petit">ce texte est en taille 2</font><br /> <font class="c1">police verdana</font><br /> <font class="c2">police arial taille 6</font><br /> <font class="c3">police Helveltica</font><br /> <font class="c4">police century</font><br /> <font class="c5">police tahoma en bleu</font><br /> Police par défaut de la page </body> </html> body {font-size="large"; } font.petit {font-size="small";} font.c1 {font-family= "verdana";} font.c2 {font-size= "large"; font-family="Arial";} font.c3 {font-family="helvetica";} font.c4 {font-family="century";} font.c5 {font-family="tahoma"; color="blue";} Claude Duvallet — 106/108 HTML Les propriétés de style Styles CSS Divisions div et span La balise <div> est utilisée pour diviser un document en section : occasionne un saut de ligne, peut contenir des paragraphes, des titres, des tableaux attributs : id identificateur global. class liste de classes séparées par des espaces. style information locale de style. La balise <span> organise le document en définissant une étendue de texte : attributs : id identificateur global. class liste de classes séparées par des espaces. style information locale de style. Claude Duvallet — 107/108 HTML Les propriétés de style Styles CSS Divisions Création de pages WEB en HTML Claude Duvallet Université du Havre UFR Sciences et Techniques 25 rue Philippe Lebon - BP 540 76058 LE HAVRE CEDEX [email protected] http://litis.univ-lehavre.fr/∼duvallet/ Claude Duvallet — 108/108 HTML