I/ Une première très brève introduction au WEB :

Transcription

1 TP 10 : Vendredi 31 Janvier 2014 Langage de description HTML Langages de description Présentation du langage HTML et du principe de séparation du contenu et de la mise en forme. Créer et analyser une page WEB en langage HTML. On met en valeur le double usage du langage, lisible par un humain et interprétable par une machine. I/ Une première très brève introduction au WEB : Le WEB repose sur une interconnexion entre des ordinateurs (clients) et un serveur capable de répondre à des requêtes envoyées par les clients. La communication entre un client WEB et un serveur WEB suit les règles imposées par l http : HyperText Transfer Protocol. Le principe de fonctionnement est le suivant : 1. Un client WEB ou navigateur WEB (Browser) fait sa requête http à un serveur WEB dont l adresse est connue. 2. Ce serveur recherche alors la page demandée par le client et lui envoie le message «404 NOT FOUND» si celle-ci n existe pas ou bien la page demandée si elle existe bien. 3. Le client affiche alors la page renvoyée sur son navigateur internet. La page renvoyée est un fichier texte écrit dans le langage du WEB : le langage HTML : HyperText Transfer Langage.

2 II/ Généralités : 1. Un peu de culture pour commencer : L'HyperText Markup Language, HTML en abrégé, est un langage de description destiné à représenter des pages web : à la différence d un langage algorithmique où on définit de façon détaillée les opérations qu on veut que la machine effectue, nous allons décrire le résultat que l on veut obtenir. Il permet la création de documents structurés, l'utilisation de textes enrichis (caractères gras, italiques, couleurs, ). Il facilite notamment la création d'hyperliens (liens vers une autre page web ou une autre partie de la même page web), l'insertion d'images et beaucoup d'autres choses. (1) Les pages HTML sont de simples fichiers textes avec pour extension.htm ou.html. Donc vous pouvez les créer avec un simple éditeur de textes comme Notepad++. (2) La page Web peut être alors visualisée à l aide d un navigateur internet (en anglais Browser). CE QUE VOUS VOYEZ QUAND VOUS REGARDEZ UNE PAGE SUR INTERNET EST L INTERPRETATION PAR VOTRE NAVIGATEUR DU CODE HTML DE CETTE PAGE. Pour voir le code HTML d une page, clic droit sur la page, puis «Code source de la page» (dans Firefox) ou «Afficher la source» (Internet Explorer). Tous les enrichissements sont symbolisés par un système de balisage à l'intérieur du texte. Ces balises sont interprétées par le navigateur internet qui produit à l'affichage la page web avec sa mise en forme. Les balises HTML sont toutes délimitées par les caractères < et >. La plupart des balises ont une partie ouvrante <mabalise> et une partie fermante </mabalise>. Les balises s écrivent en minuscule. Une page HTML peut théoriquement être affichée sous tout système d'exploitation et tout navigateur avec le même aspect final. Nous allons en fait travailler en XHTML. Mais quelle est la différence avec l HTML? Le HTML est un langage qui évolue. Plusieurs versions se sont succédées : de HTML 1 à HTML 5. Le XHTML (Extensible HyperText Markup Language) est apparu peu après le HTML 5. Il s'agit en fait d'une reformulation plus rigoureuse du HTML. Seule la syntaxe change, les fonctionnalités sont les mêmes. Question : De quand date le HTML et plus globalement le Web? Qui en est le principal inventeur? Remarque : Vous n avez pas besoin d être connecté à internet pour écrire et voir votre page (X)HTML. Une fois votre page Web créée et vérifiée, elle peut être envoyée chez un hébergeur d où elle deviendra accessible à tous les internautes de la planète (cela s appelle la «mise en ligne»). Mais nous n en sommes pas encore là! Nous allons dans un premier temps créer des pages HTML mais en local : nous ne les publierons pas sur le net pour l instant.

3 Créez un dossier HTML dans votre répertoire ISN dans lequel vous enregistrerez tous les fichiers html que vous allez créer tout au long de ce TP. 2. Structure d un fichier : Les trois lignes suivantes sont à écrire au début de chaque page XHTML. (1) <?xml version="1.0" encoding="utf-8"?> (2)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " (3)<html xmlns=" xml:lang="fr"> (1) Déclaration du type d encodage du document (norme utf-8 afin d utiliser les caractères autres que les caractères de l alphabet latin-sinon utiliser la norme ISO ) (2) Précise la syntaxe (HTML ou XHTML) et le numéro de version utilisée pour l écriture de la page. (3) Précise où sont définies les règles de nommage des balises (xmlns est l acronyme de XML Name Space, soit «espace de nom XML») et l environnement linguistique du document (ici français) Balises techniques Balise <html>..</html> <head>.</head> <title>.</title> <body> </body> Indication donnée au navigateur Elle englobe tout le contenu, précise le langage L en-tête HEAD donne des informations générales sur la page : le titre, l encodage. Ces informations ne seront pas affichées sur la page Titre de la page Tout ce que l on écrit ici sera affiché à l écran En résumé, la structure exacte d'une page Web XHTML sera toujours la suivante : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns= xml : lang=="fr" > <head> <title> Titre de la page </title> </head> <body> Texte de la page ici </body> </html>

4 EN HTML 5 : <html> <head> <meta charset = utf-8 /> <title> Titre de la page </title> </head> <body> Texte de la page ici </body> </html> 3. Les commentaires : Il est conseillé de mettre des commentaires dans son code HTML afin de faciliter sa compréhension. Ceci sera très appréciable lorsque l'on aura besoin de modifier sa page Web plusieurs mois après son élaboration. Un commentaire sera donc un texte libre, qui sera lisible dans le code source, mais pas affiché par le navigateur. Un commentaire débute pars les caractères <!-- et se termine par > 4. S'assurer de la validité de son code : Les règles (ou normes) du HTML et du XHTML sont rédigées par le World Wide Web Consortium plus souvent appelé W3C. Le W3C propose un outil pour vérifier la validité de son code. Il listera vos erreurs jusqu'à temps que vous ayez une page valide : Choisir l'onglet "Validate by Direct Input" puis copier/coller le code. III/ Présentation du texte : 1. Les attributs - Des indications complémentaires sur les balises : Un attribut permet de donner des précisions sur une balise. Si les balises disent au navigateur quelle action effectuer, les attributs lui disent comment l'effectuer. Une balise peut avoir un ou plusieurs attributs. Un attribut se compose le plus souvent d'un mot-clé auquel on donne une valeur. Pour cela on utilise le caractère «=» et on met la valeur entre 2 guillemets («"»). Ce qui donne : <ma_balise nom_attribut="valeur_attribut" > contenu </ma_balise>

5 Exemple : Balise Attribut Paramètre Action <body> </body> background = "nom fichier" Image de fond bgcolor = "couleur " Couleur de fond text = "couleur " Couleur du texte (red, blue, yellow ) 2. Premiers éléments de type bloc : Ils permettent de structurer un document. Tout document (X)HTML contiendra en majorité du texte. Voici les balises élémentaires pour présenter votre texte : Balise <p>... </p> <br /> Indication donnée au navigateur Début et fin d'un paragraphe. Ajout d'un saut de ligne. Un saut de ligne ne peut avoir de contenu, on considère donc que cette balise est à la fois ouvrante et fermante. Cela se traduit par l'ajout d'un «/» (slash) la fin de la balise. <hr /> Ajout d'une ligne horizontale de séparation comme suit : Attributs possibles : Balise Attribut Paramètre Action <p> </p> align = left = right permet de modifier l'alignement horizontal du texte aligné à gauche (par défaut) aligné à droite = center centré = justify : justifié (aligné à droite et à gauche) très peu utilisé sur le web <hr/> width = nombre largeur en pixel size = nombre épaisseur align =.. alignement noshade sans ombre

6 3. Premiers éléments de type in-line : Style du texte Balise Indication donnée au navigateur <strong>... </strong> Balises pour mettre un texte en gras. Les balises <b>... </b> donne le même résultat mais elle a été dépréciée, c'est à dire que son utilisation est déconseillée. <em>... </em> <u>... </u> <font> </font> Balises pour mettre un texte en italique. Les balises <i>... </i> donne le même résultat mais elle a été dépréciée. Balises pour mettre un texte souligné. Permet de spécifier la police de caractère, la couleur et la taille du texte. <blockquote>... </blockquote> ^... _... Insère une tabulation à gauche Pour mettre un mot en exposant Pour mettre un mot en indice La balise <font> </font> possède plusieurs attributs : Balise Attribut Paramètre Action <font> </font> face = "nom police" Type de police ( times, verdana ) size = "taille" Taille de police color = "couleur" Couleur de police ( red, blue, yellow ) Les éléments de type bloc peuvent contenir des éléments de type bloc ou inline. Les éléments de type inline ne contiennent que des éléments de type inline. 4. De nouvelles balises bloc pour organiser son texte : titres et listes Pour une meilleure lisibilité de votre texte sur votre page web, vous aurez sûrement besoin de créer des titres ou des listes comme par exemple lors de la création d une table des matières ou les différents niveaux d un exposé. Voici les balises principales dont vous pouvez disposer :

7 Balise Indication donnée au navigateur <hn>... </hn> avec n = 1 à 6 Permet d afficher un en-tête de niveau n et de sauter une ligne De n=1 très grand à n=6 très petit <ul>... </ul> <ol>... </ol> <li>... </li> Début et fin d'une liste non-ordonnée Début et fin d'une liste ordonnée Début et fin d un élément de la liste (une puce sera ajoutée) On écrira donc : <ul> </ul> <li> 1 ère ligne d une liste non-ordonnée < /li> <li> 2 ème ligne non ordonnée </li> Les balises h1, h2(...) supportent un attribut align qui permet de modifier l'alignement horizontal du texte. Pour les listes, il est possible de choisir le type de puce que nous souhaitons grâce à l'attribut type. Pour une liste ordonnée (ol), l'attribut type peut avoir les valeurs suivantes : "1" => pour une suite numérique "a" => pour une suite alphabétique "A" => pour une suite alphabétique en majuscule "I" => pour une suite numérique en chiffres romains Pour une liste non-ordonnée (ul), l'attribut type peut avoir les valeurs suivantes : "disc" => pour un rond plein "circle" => pour un rond vide "square" => pour un carré 5. Les caractères spéciaux : Les caractères <, > et & étant interprétés, ils doivent être remplacés par les entités prédéfinies, suivies d un ; caractère Entité prédéfinie < &lt > &gt & &amp «&quot &nbsp

8 IV/ Insérer une image : A savoir pour insérer une image sur sa page web : Il est important de garder à l'esprit que les pages que nous mettons sur Internet sont vues à distance par nos visiteurs. Leurs navigateurs téléchargent un à un tous les fichiers composants notre page. Des fichiers images trop volumineux ralentissent les temps de chargement de notre site Web ce qui peut décourager les visiteurs. Par conséquent, avant de mettre une photo en ligne, nous veillerons à l'enregistrer dans l'un des 3 formats d'optimisations vus lors du TP sur le traitement de l image (JPEG, GIF ou PNG). Une fois votre image optimisée, il faut la placer dans votre site. Vous pouvez choisir de la mettre dans le même répertoire que votre page Web, ou dans un répertoire de votre choix. La balise img est à la fois ouvrante et fermante comme la balise <br/> : <img /> Elle possède 2 attributs : src qui doit être égal au nom du fichier image (ou au chemin si le fichier image se trouve dans un autre dossier). alt qui doit être égal à une description de votre image (cet attribut est utilisé notamment par les systèmes de description des pages web utilisés par les non voyants), il faut donc systématiquement renseigner cet attribut. On écrira donc : Autres attributs de la balise <img /> : <img src="mon_image.jpg" alt="texte "/ > Attribut Valeur Description src = " adresse d une image " Le chemin complet vers l image alt ="texte à afficher pendant le chargement" Définit un commentaire de l image, affiché pendant le téléchargement de l image. width ="nombre" Définit la largeur de l image en pixels height ="nombre" Définit la hauteur de l image en pixels align vspace hspace ="left" pour aligner l image à gauche, le texte étant à droite (standard) ; ="right" pour aligner l image à droite, le texte étant à gauche ; ="top" pour aligner le haut de l image sur la ligne courante ; ="middle" pour aligner le milieu de l image sur la ligne courante ; ="bottom" pour aligner le bas de l image sur la ligne courante ; ="nombre" en pixels LEFT et RIHGT définissent l alignement de l image à l écran. TOP, MIDDLE et BOTTOM définissent l emplacement du texte par rapport à l image. Définissent les marges verticale et horizontale de l image par rapport au texte border ="nombre" (0 supprime la bordure) Affiche un cadre standard autour de l image (valeur exprimée en pixel)

9 Mise en application : Demain, dès l aube Demain, dès l aube, à l heure où blanchit la campagne, Je partirai. Vois-tu, je sais que tu m attends. J irai par la forêt, j irai par la montagne. Je ne puis demeurer loin de toi plus longtemps. Victor HUGO 1 ) Avec Notepad++, éditer ce texte, enregistrer ce fichier sous le nom poeme.html et l ouvrir dans votre navigateur. Que pouvez-vous constater sur la mise en page? 2 ) Créer une page d accueil qui propose plusieurs liens hypertextes qui permettent : RAPPEL : 1. D avoir sur Victor Hugo le poème Demain dès l aube sur une page. 2. D avoir sa biographie sur une autre page. 3. D avoir sa photo sur une autre page.