docCréer des pages Web en code XHTML (Windows ou Linux)
download 
Plainte Transcription
Créer des pages Web en code XHTML (Windows ou Linux)
Créer des pages Web en code XHTML (Windows ou Linux) Créez un dossier tpweb. Tous les fichiers à créer et à récupérer dans ce TP seront placés dans ce dossier. er Le 1 fichier à créer s'appellera votrenom.htm (votrenom étant votre nom de famille, en évitant accent, espace, apostrophe et cédille dans le nom, par exemple lefrancois.htm pour Le François et lhoste.htm pour L'Hoste). 1) Lancement de l'éditeur de texte (selon le système d'exploitation du poste) Ouvrez un éditeur de texte, un traitement de texte (Writer de OOo) ou un éditeur spécialisé (bluefish...). - Sous Windows, ouvrez le Bloc-notes avec Démarrer > Accessoires> Bloc-notes. - Sous Linux, en ligne de commande, tapez emacs votre-nom.html afin de passer en mode html. - Dans OOo, choisir Document HTML, enregistrer le fichier et passer dans le mode Source à l'aide du dernier icône en bas à gauche. Une partie du fichier est déjà tapée, ne pas les retaper. 2) Balises minimales d'un document web Dans un document vierge, tapez les balises minimales indispensables dans une page HTML selon l'exemple encadré. Un document web commence par une balise ouvrante <html> et finit par une balise fermante </html>. En XHTML, il faut désormais écrire les balises en minuscules <html> et non <HTML>. <html> Un document Web comporte 2 parties : <head> <title></title> - L'en-tête du document <head></head> </head> Il contient le titre de la fenêtre du document <title></title> et d'autres méta-informations. <body> - Le corps du document <body></body> </body> Il va contenir les textes et images qui doivent apparaître dans la fenêtre. </html> 3) Enregistrement d'un fichier .htm Enregistrez le fichier dans le dossier tpweb en le nommant votrenom.htm Vous penserez ensuite à enregistrer régulièrement votre fichier et notamment avant chaque visualisation. 4) Titre d'un document web Vous avez déjà saisi précédemment le texte en gris de l'encadré. Il ne vous reste qu'à taper le texte en noir. Tapez le titre de votre document entre les balises TITLE déjà saisies : <html> NOM Prénom: exercice HTML (remplacez par vos nom et prénom). <head> Trois bonnes raisons de bien choisir le titre du document : <title> NOM Prénom: exercice HTML</title> </head> - Il apparaît dans la barre de titre de la fenêtre du navigateur utilisé. - Il apparait dans les signets ou favoris de l'utilisateur si celui-ci ajoute le document à son bookmark. - Il peut être utilisé par les moteurs de recherche pour indexer votre page. éviter comme titre "page d'accueil", "bienvenue", "mon site" et autres titres "creux", non descriptifs. 5) 6) Visualisation du document web dans le navigateur Enregistrez le document votrenom.htm. Ne fermez ni l'éditeur de texte, ni le document. Ouvrez un navigateur (FireFox, Mozilla, Netscape Communicator, Netscape Navigator, Internet Explorer…) Ouvrez (consultez) le fichier dans le navigateur et visualisez le résultat de votre code (ici, le titre de fenêtre). Ne refermez pas le fichier dans le navigateur. Il faudra visualiser les modifications en actualisant l'affichage. Vous pourrez basculer du navigateur à l'éditeur de texte (dans Windows, à l'aide de la barre des tâches). Saisie de texte dans le corps de texte et visualisation Tapez entre <body> et </body> votre prénom et nom, suivi d'une adresse. Enregistrez le document dans l'éditeur de texte. Basculez dans le navigateur. Actualisez la page avec le bouton approprié du navigateur (Actualiser ou Rafraichir). Remarquez que les sauts de ligne de l'éditeur de texte ne sont pas pris en compte dans le navigateur. Il faut ajouter des balises spécifiques. 7) <body> Jean Dupont 1 rue du pont 75001 Paris Tél : 01 02 03 04 05 </body> <p>Jean Dupont</p> <p>2 rue du Pont 75001 Paris Tél : 01 02 03 04 05</p> Paragraphe et saut de ligne Encadrez par des balises <p></p>, d'une part le prénom/nom, d'autre part, l'ensemble de l'adresse. La balise <p> indique le début d'un paragraphe, la balise </p> la fin du paragraphe, avec par défaut un espacement entre les paragraphes. Visualisez. <p>2 rue du Pont<br /> Pour faire un saut de ligne, ajoutez une balise <br />. Cette balise ne contient rien, 75001 Paris<br /> se ferme là où elle commence et ne nécessite donc pas de balise fermante. Tél : 01 02 03 04 05<br /></p> En XHTML, une balise sans fermeture s'écrit désormais sous la forme <br /> et non plus <br> ou <br></br>. Espace entre br et / Université Paris-Est Marne-la-Vallée Initiation HTML F. Petit Septembre 2008 TP_XHTML.doc p. 1 8) Ligne horizontale Tapez <hr /> (pas de balise de fermeture) pour mettre une ligne horizontale. 9) Gras et italique Ajoutez <strong></strong> pour mettre en gras la ville. Ajoutez <em></em> pour mettre en italique la ligne de la rue. Ajoutez <em></em> pour mettre en italique la ligne de la ville. Quand il y a plusieurs balises, il faut les emboiter et non pas les faire se chevaucher. <em>75001 <strong>Paris</em> </strong> <br /> Incorrect Correct <em>75001 <strong>Paris</strong></em> <br /> 10) Mise en forme de paragraphe de titre <p><em>2 rue du Pont</em><br /> 75001 <strong>Paris</strong><br /> Tél : 01 02 03 04 05<br /></p> <h1>Etudes actuelles</h1> <p> Etudiant en …<br /> Université de Marne la Vallée…<br /> 200?-200? …<br /> Mon emploi du temps<br /> </p> <h1>Diplômes</h1> <h1>Langues</h1> <h1>Loisirs</h1> <h2>Sports</h2> <p> Tennis – Natation – Escrime</p> <h2>Culture</h2> <p> Chant – Piano</p> Tapez le texte ci-contre. Chaque titre (niveau 1) est encadré par des balises <h1> et </h1>, et ses sous-titres par des balises <h2> et </h2> (ex: Loisirs a pour sous-titres Sports et Culture). Il existe 6 niveaux de titres, correspondant aux balises h1 à h6 pour structurer, hiérarchiser et mettre en forme titres et sous-titres d'un document (ex: h3, sous-titre d'un titre de niveau h2, lui-même sous-titre d'un titre h1). 11) Listes numérotées et à puces Complétez en tapant vos diplômes et vos langues sous forme de liste à puce et de listes numérotées. <ul></ul> encadre une liste à puces alors que <ol> </ol> encadre une liste numérotée, chaque élément de la liste étant encadré par une balise <li></li>. 12) Insertion d'image (format gif, jpg, jpeg, png) <p>Jean Dupont</p> <hr /> <p>2 rue du Pont<br /> <h1>Diplômes</h1> <ul> <li>1999 Bac ES</li> <li>1995 Brevet des collèges</li> </ul> <h1>Langues</h1> <ol> <li>Anglais</li> <li>Espagnol</li> </ol> <h1>Etudes actuelles</h1> Consultez le site de l'université, cherchez un logo de l'université, faites un clic droit <img src="logo-umlv.jpg" /> dessus pour l'enregistrer dans le même dossier tpweb que votre page html en conservant son extension mais mettez comme nom logo-umlv (ex: logo-umlv.jpg ou logo-umlv.gif ou logoumlv.png). Sous Etudes actuelles, tapez <img src="nomdufichier.ext" />. src est un attribut qui précise la balise img en lui indiquant l'emplacement et le nom de l'image. Le nom et l'extension indiqué dans src=".." doivent correspondre au nom de l'image enregistrée dasn le dossier. Ajoutez en attribut un texte alternatif. Il sera utilisé <img src="logo-umlv.jpg" alt="logo de l'université de Marne-la-Vallée" /> par les moteurs de recherche pour indexer le document, s'affichera en cas de non chargement, et au survol de l'image (selon le navigateur) et sera lu par les systèmes sonores (accessibilité aux handicapés visuels). Remarque sur les attributs de balise : - Chaque attribut est séparé d'un autre par un espace. - L'ordre des attributs n'a pas d'importance. - Ne jamais reprendre les attributs dans la balise de fin quand elle existe. 13) Liens Un lien est toujours de la forme <a href="url">hypermedia</a> où url est le protocole et l'adresse de destination et hypermedia ce qui va être cliquable (texte ou image). <a href="mailto:[email protected]">Jean Dupont</a> Lien vers une adresse électronique Autour du prénom/nom (celui qui est dans la partie body, pas celui de la partie head), mettez un lien de messagerie, vers votre adresse électronique (protocole mailto:). Lien vers un site web <a href="http://www.univ-mlv.fr"> Université de Marne la Vallée </a> Mettez un lien à partir du texte Université de Marne la Vallée vers le site de l'université (protocole http://). <a href="http://www.univ-mlv.fr"> Mettez un lien à partir de l'image du logo de l'université (balise img) vers le site <img src="logo-umlv.jpg" alt="logo de de l'université (protocole http://). l'université de Marne-la-Vallée" /></a> Lien vers un autre fichier du site Mettez un lien autour du texte Mon emploi du temps vers le fichier planning.htm qui est actuellement vide. Testez tous les liens et fermez ce fichier dans l'éditeur. Université Paris-Est Marne-la-Vallée Initiation HTML F. Petit Septembre 2008 <a href="planning.htm"> Mon emploi du temps</a> TP_XHTML.doc p. 2 14) Fichier Planning.htm Avec l'éditeur de texte, créez un nouveau document vierge que vous nommerez planning.htm et rangerez dans le dossier tpweb. Saisissez les balises minimales HTML, comme indiqué au §2 de ce polycopié. Saisissez le titre Nom Prénom : Planning entre <title> </ title > dans l'en-tête. Saisissez le titre Planning encadré de <h1> </h1> dans le body. 15) Tableau Dans le fichier planning.htm, tapez le code html ci-joint. Le tableau est délimité par des balises <table></table> A l'intérieur, insérez autant de balises <tr></tr> que de rangées. A l'intérieur de <tr></tr>, insérez autant de balises <td></td> que de cellules. A l'intérieur de <td></td>, tapez vos données (contenu des cellules). Pour l'instant, vous visualisez le contenu du tableau mais pas encore ses bordures. … <body> <h1> Planning</h1> <table> <tr> <td>Matin</td> <td>Midi</td> <td>Après-Midi</td> </tr> <tr> <td>Cours</td> <td>Repas</td> <td>Sieste</td> </tr> </table> </body> … 16) Mise en forme à l'ancienne (HTML 3.2) du fichier planning.htm Jusqu'à la v. 3.2, la mise en forme des documents était réalisée par ajout dans la balise HTML d'attributs comme bgcolor pour la couleur de fond, border pour l'épaisseur de la bordure ou width pour la largeur. Mettez le fond de la page en jaune clair. <body bgcolor="lightyellow"> Les couleurs peuvent s'écrire sous forme hexadécimale (ex : #ae09b4) mais aussi sous forme de noms venant de l'anglais (ex : red, white, cyan). <table bgcolor="white" Mettez au tableau un fond blanc, une bordure de 2 pixels, une largeur de 50%. border="2" width="50%"> Faites d'autres essais de couleurs en cherchant dans un moteur de recherche "code couleur web" : vous trouverez des couleurs en anglais ou # suivi de 6 <h1 align="center">Planning</h1> chiffres hexadécimaux (de 0 à 9 et de A à F) Ajoutez Planning comme titre de niveau h1 avec l'attribut align="center". Centrez le tableau dans la page en ajoutant à la balise table l'attribut align="center". re Centrez ainsi toute la 1 rangée <tr> du tableau afin que matin, midi, soir soient centrés dans leur cellule. Utilisez la balise <font color="…" size="..." face="Arial"></font> pour mettre une <font color="green" size="5" partie du texte à votre choix dans une autre couleur, taille et police. face="arial">Planning</font> Les tailles vont de 1 à 7. Cette manière de faire est dépréciée (mais les navigateurs la comprennent encore...) et en voie de disparition car elle est lourde (répétitions) et peu pratique à maintenir lors de modifications. Vous allez apprendre à utiliser la technique des styles CSS qui remplace cette ancienne manière depuis 1996. 17) Mise en forme avec des styles CSS internes au document Ouvrez le fichier votrenom.htm. Ajoutez dans l'en-tête une balise <style></style> comme ci-contre. Cette section STYLE va servir à définir les styles utilisés dans ce document pour chacune des balises. <head> <title> ... </title> <style type="text/css"> </style> </head> 18) Ajout de règles CSS Tapez les règles CSS ci-contre. A chaque nom de balise (sans mettre les < >), on associe une ou plusieurs déclaration de styles qui servent à mettre en forme les éléments de la partie body. <style type="text/css"> Visualisez le résultat. body { En étudiant ces déclarations de style, modifiez ou ajoutez quelques règles CSS au font-family: arial; document en appliquant cette syntaxe à l'élément voulu : } - fenêtre du document (BODY) : fond (ou arrière-plan) en jaune clair hr { width: 50%; - h2 : taille 110%, couleur marron height: 5px; - ligne horizontale : alignée à gauche, couleur marron, 1px de hauteur (au lieu de 5px). } h1 { background-color: maroon; color: lightyellow; font-size:120%; text-align: center; } </style> 19) Pour continuer Améliorez la mise en page et faites d'autres essais (cf. liste des propriétés CSS). Pour définir la couleur des liens, il faut des sous-états de la balises <a...>, pour les liens avant visite (a:link), après visite (a:visited), et survolés (a:hover), par exemple : a:link {color: black;} a:visited {color: red;} a:hover {color: black; background-color: red;} En pratique, on place plutôt les déclarations dans un fichier externe à extension .css (ex: nomdelafeuille.css), appelé feuille de style CSS. Chaque fichier du site sera associé à la feuille de style en mettant dans l'en-tête : <link rel="stylesheet" type="text/css" href="nomdelafeuille.css" />. Université Paris-Est Marne-la-Vallée Initiation HTML F. Petit Septembre 2008 TP_XHTML.doc p. 3 Légende : L'italique indique une variable à remplacer par une valeur donnée. n est à remplacer par un nombre suivi de son unité (10px, 0.5em, 12pt, 4.5cm…). p% est à remplacer par un nombre exprimé en valeur relative (ex: 50%) CSS level-1 : Liste des principales propriétés et valeurs Valeurs possibles Commentaires nom||serif|sans-serif|cursive|fantasy|monospace nom (verdana, arial, helvetica…) ou famille de la police normal|italic|oblique style normal, italique et oblique normal|small-caps style normal ou petites capitales normal|bold|bolder|lighter|100|200|300|…|700|800|900 Epaisseur de la police (normal=400 ; bold=700) xx-small|x-small|small|medium|large|x-large|xx-large Taille de la police |larger|smaller|n|p% font font-style font-variant font-weight font-size/line-height regroupe les propriétés de police (l'interligne line-height se font-family met après la taille de police font-size avec / devant ex: 12pt/14pt color couleur|#RRVVBB|rgb(a,b,c|rgb(a%,b%,c%) couleur de texte background-color couleur|transparent couleur du fond background-image url(url)|none image du fond background-repeat repeat|repeat-x|repeat-y|no-repeat image de fond répétée (horiz, vert…) background-attachment scroll|fixed image fixe ou non lors de déplacement d'écran background-position p%|n p%|n top|center|bottom left|center|right position de l'image de fond par rapport au coin supérieur gauche background background-color background-image background-repeat regroupe les propriétés de fond (body, table, p…) background-attachment background-position word-spacing normal | n | -n espacement entre mots letter-spacing normal | n | -n espacement entre caractères text-decoration none | underline | overline | line-through | blink non, souligné, surligné, barré, clignotant text-transform none | uppercase | lowercase | capitalize non, majuscule, minuscule, majuscule au 1er caractère text-align left | right | center | justify gauche, droite, centré, justifié text-indent n | p% indentation de la première ligne (positive ou négative) vertical-align baseline | text-top | middle | text-bottom | p% alignement vertical du texte / parent top | bottom | alignement vertical du texte / élément de la ligne sub | super sub (indice) super (exposant) line-height normal | n | p% valeur entre deux lignes adjacentes margin-top n | -n | p% | auto marge haut margin-right n | -n | p% | auto marge droite – auto permet de centrer margin-bottom n | -n | p% | auto marge bas margin-left n | -n | p% | auto marge gauche – auto permet de centrer margin margin-top margin-right margin-bottom margin-left regroupe les propriétés de marge (margin:auto centrer) padding-top n | p% remplissage haut entre la "boîte" et son contenu padding-right n | p% remplissage droit entre la "boîte" et son contenu padding-bottom n | p% remplissage bas entre la "boîte" et son contenu padding-left n | p% remplissage gauche entre la "boîte" et son contenu padding padding-top padding-right padding-bottom padding-left regroupe les propriétés de remplissage (toujours positif) border-top-width thin | medium | thick | n épaisseur du bord haut border-right-width thin | medium | thick | n épaisseur du bord droit border-bottom-width thin | medium | thick | n épaisseur du bord bas border-left-width thin | medium | thick | n épaisseur du bord gauche border-width border-top-width border-right-width regroupe les propriétés d'épaisseur du bord border-bottom-width border-left-width border-color couleur couleur couleur couleur couleur des bordures border-style none|dotted|dashed|solid |double|groove| style de bordure : sans, pointillé,tiret,pleine,double, creux, ridge|inset|outset relief, 3D creux ou relief. border-top border-width border-style border-color regroupe les propriétés de bordure haute border-right border-width border-color border-style regroupe les propriétés de bordure droite border-bottom border-width border-style border-color regroupe les propriétés de bordure basse border-left border-width border-style border-color regroupe les propriétés de bordure gauche border border-width border-style border-color regroupe les propriétés des bordures width n | p% | auto largeur d'un élément texte ou image height n | auto longueur d'un élément texte ou image float left | right | none élément flottant à gauche ou à droite clear none | left | right | both élément passe après ce qui est sur le côté spécifié display block | inline | list-item | none spécifie le type de mise en forme de l'élément white-space normal | pre | nowrap type d'espace blanc list-style-type none|disc|circle|square|decimal| type de puce ou numéro dans une liste lower-roman|upper-roman|lower-alpha|upper-alpha list-style-image url(url) image servant de puce list-style-position inside|outside alignement des puces dans ou devant la liste list-style list-style-type list-style-image list-style-position regroupe les catégories de list-style Propriétés font-family font-style font-variant font-weight font-size Université Paris-Est Marne-la-Vallée Initiation HTML F. Petit Septembre 2008 TP_XHTML.doc p. 4
