Création de pages WEB en HTML

Transcription

1 Création de pages WEB en Claude Duvallet Université du Havre UFR Sciences et Techniques 25 rue Philippe Lebon - BP LE HAVRE CEDEX Claude.Duvallet@gmail.com duvallet/ Claude Duvallet 1/108

2 Plan du cours Historique Le WEB Claude Duvallet 2/108

3 HISTORIQUE Claude Duvallet 3/108

4 Introduction Historique Le réseau Internet Architecture Historique 1 Introduction 2 Historique 3 Le réseau Internet 4 Architecture Claude Duvallet 4/108

5 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

6 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 : 15 universités sont sur ARPANET, le premier est envoyé : FTP : protocole de transfert de fichiers. Claude Duvallet 6/108

7 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 : TELNET : protocole de prise de commande à distance : les protocoles principaux sont finalisées, les militaires quittent ARPANET pour fonder leur propre réseau : avec le développement de la technologie "personal computer" et des Local Area Network, il devient possible de construire une interconnexion de réseaux : 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

8 Introduction Historique Le réseau Internet Architecture Historique (3/4) 1990 : ARPANET s éteint pour être remplacé par Internet, qui compte plus de 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 machines connectées : conception du premier navigateur Web : Mosaic : d hôtes pour réseaux interconnectés, les moteurs de recherche apparaissent. création de Nestcape Communicator. Claude Duvallet 8/108

9 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 : 1 milliard d internautes. Claude Duvallet 9/108

10 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. Claude Duvallet 10/108

11 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

12 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, 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

13 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

14 Introduction Historique Le réseau Internet Architecture Architecture (4/4) L architecture d un réseau a 2 aspects : physique : logique : déterminé par des contraintes physiques et d emplacements. déterminé par les objectifs que l on veut atteindre en termes de débit, de sécurité, de disponibilité. Claude Duvallet 14/108

15 Introduction Historique Le réseau Internet Architecture Le WEB Claude Duvallet 15/108

16 Hyperliens Le WEB 5 Hyperliens Claude Duvallet 16/108

17 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

18 Hyperliens Claude Duvallet 18/108

19 6 Généralités Claude Duvallet 19/108

20 (HyperText Markup Language) Le est un format d écriture de document du type SGML (Standard Generalized Markup Language) : est un ensemble de balises utilisés pour définir les différents composants d un document Web. langage de description de documents hypertextuels. = X Depuis le 26 janvier 2000, le X est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web : le X n est rien de plus que du reformulé de façon à respecter les règles strictes du XML. Claude Duvallet 20/108

21 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

22 Affichage du code source d une page menu Affichage puis Code source de la page. Claude Duvallet 22/108

23 Le langage 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 X : <balise> balise est vide ou orpheline : <br ></br> ou <br /> Claude Duvallet 23/108

24 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 :  Claude Duvallet 24/108

25 Principaux caractères de code ASCII de la langue française Les normes demandent de respecter le codage dans les caractères ASCII 7 bits, c est à dire sans caractères accentués : Claude Duvallet 25/108

26 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

27 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 "/> Claude Duvallet 27/108

28 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= Claude Duvallet 28/108

29 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

30 Exercice 1 Écrire une page : 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 :// au bout de 10 secondes, corps de la page : redirection dans 10 sec. Claude Duvallet 30/108

31 Correction <html> <head> <title>ma Premiere Page WEB</title> <meta name="author" lang="fr" content="nom Auteur"/> <meta http-equiv="refresh" content="10;url= </head> <body> Redirection dans 10 sec. </body> </html> Claude Duvallet 31/108

32 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

33 Attributs de body Claude Duvallet 33/108

34 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"> de la page </body> </html> Claude Duvallet 34/108

35 Exercice 2 Deuxième page : 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

36 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

37 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

38 Exercice 3 Claude Duvallet 38/108

39 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

40 Balises de mise en page <br /> <p> Est une marque de fin de ligne. 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

42 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

43 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

44 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 : x n+1 x n = n n 1 Claude Duvallet 44/108

45 Balises de mise en forme (3/3) Niveau hiérarchique : <h1>titre de niveau 1</h1> <h2>titre de niveau 2</h2> <h3>titre de niveau 3</h3> <h4>titre de niveau 4</h4> <h5>titre de niveau 5</h5> <h6>titre de niveau 6</h6> Claude Duvallet 45/108

47 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

49 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

50 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

51 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

52 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

53 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

55 Correction <html> <li> petit b </li> <body> <ol type= "i" > <b> <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

56 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

58 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

59 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

60 Les tableaux (2/5) Exemple : <table border="1"> <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 60/108

61 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

62 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

63 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

65 Correction <html> <body> <center> <table border="3"> <tr> <th>nom</th> <th>quantité</th> <th>prix Unitaire</th> <th>total</th> </tr> <tr align="center"> <td>crayon</td> <td>4</td> <td>1</td> <td>4</td> </tr> <tr align="center"> <td>gomme</td> <td>10</td> <td>0,5</td> <td>5</td> </tr> <tr align="center"> <td>compas</td> <td>1</td> <td>7</td> <td>7</td> </tr> </table> </center> </body> </html> Claude Duvallet 65/108

66 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> <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> Claude Duvallet 66/108

68 Correction <html> <body> <table border="1"> <caption align="top"> Titre du tableau en haut </caption> <tr> <th>titre1</th> <th>titre2</th> <th>titre3</th> <th>titre4</th> <th>titre5</th> </tr> <tr align="center"> <td colspan="2">fruits</td> <td rowspan="3">arbre</td> <td colspan="2">légumes</td> </tr> <tr> <td>pomme</td> <td>banane</td> <td>endive</td> <td>carotte</td> </tr> <tr> <td>raisin</td> <td>pêche</td> <td>choux</td> <td>pois</td> </tr> <tr align="center"> <td>ananas</td> <td>prune</td> <td>poirier</td> <td colspan="2">betterave</td> </tr> </table> </body> </html> Claude Duvallet 68/108

69 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

70 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

71 Les images (3/3) Ajouter une figure Claude Duvallet 71/108

72 Exercice 11 Ajouter une figure Claude Duvallet 72/108

73 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

74 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

75 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

76 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

77 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

78 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 :claude.duvallet@gmail.com>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 :// title="le moteur de recherche Google">Google</a> Claude Duvallet 78/108

79 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

80 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

81 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

82 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, 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

83 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

84 Exemples de formulaire (1/3) <html> <body> <form method="post" action=" 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

85 Exemples de formulaire (2/3) Claude Duvallet 85/108 <html> <body> <form method="post" action=" 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>

86 Exemples de formulaire (3/3) <html> <body> <form method="post" action=" 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

87 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

88 Exemple <html> <body> <form method= "post" action=" <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

89 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

91 Correction <html> <body> <form method="post" action=" Login <input id="name" value="guess"/> <br /> Mot de passe <input type="password" name="passwd" value="guess"/> <br /> Système d exploitation : <select name="system"> <option value="mac"/>mac OS <option selected value="pc"/> PC Windows <option value="unix"/>unix </select> <br /> Logiciels utilisés : <select name="software" multiple size="5"> <option value="compta"/>comptabilité <option selected value="jeux"/>jeux <option value="traitementtexte"/> Traitement de texte </select> <br /> <textarea name="commentaires" rows="20" cols="60"> Néant </textarea> <br/> <input type="submit" value="ok"/> <br /> </form> </body> </html> Claude Duvallet 91/108

92 Les maps (1/2) Les balises <map> et </map> permettent d appeler une page 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

93 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=" <area shape="circle" coords="15,15,5" href=" <area shape="poly" coords="15,100,20,110,15,130" href="mailto:duvallet@free.fr"/> </map> <img src="image.jpg" usemap="#nom"/> Claude Duvallet 93/108

94 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 (info bulle : Paris). Haute-Normandie : polygone défini par les points de coordonnées (118,65),(187,95),(198,158),(119,127). lien vers (info bulle : Normandie). Claude Duvallet 94/108

95 Correction <map name= "france"> <area shape="circle" coords= "253,142,32" href=" alt="paris" /> <area shape="poly" coords= "118,65,187,95,198,158,119,127" href=" alt="haute-normandie"/> </map> <img src="regions.jpg" usemap="#france" /> Claude Duvallet 95/108

96 /CSS Claude Duvallet 96/108

97 Les propriétés de style Styles CSS Divisions /CSS 10 Les propriétés de style 11 Styles CSS 12 Divisions Claude Duvallet 97/108

98 Les propriétés de style Styles CSS Divisions /CSS Les documents Web sont globalement composés de 2 normes : X 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, positionnement rigoureux des éléments, chargements de page plus rapides. Claude Duvallet 98/108

99 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

100 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

101 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 url( h1 { color: blue; } </style> </head> <body> <p style="color: green">paragraphe vert...</p> </body> </html> Claude Duvallet 101/108

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

103 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

104 Styles CSS (2/3) Les propriétés de style Styles CSS Divisions 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

105 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

106 Corrections Les propriétés de style Styles CSS Divisions <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

107 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

108 Les propriétés de style Styles CSS Divisions Création de pages WEB en Claude Duvallet Université du Havre UFR Sciences et Techniques 25 rue Philippe Lebon - BP LE HAVRE CEDEX Claude.Duvallet@gmail.com duvallet/ Claude Duvallet 108/108