Conception de documents et d interfaces numériques

Transcription

1 CAEN Conception de documents et d interfaces numériques TD n 5 WEB HTML ANNE Jean-François D après le cours de Mme DRAFATE

2 HTML -Formatage de texte, Liens et Listes Concepts de base d'internet et du Web Cette partie représente un ensemble de définitions permettant la bonne compréhension des concepts de base d'internet et du web. Réseau Informatique : ensemble d ordinateurs reliés entre eux grâce à des lignes physiques et échangeant des informations sous forme de données numériques. Internet : super-réseau des réseaux, basé sur l architecture TCP/IP et fonctionne en mode Client/serveur. Le protocole TCP/IP représente l'ensemble des règles de communication sur Internet et se base sur la notion adressage IP (Internet Protocol). Adresse IP : chaque machine connectée de façon permanente sur Internet est identifiée par une adresse IP codée sur 32 bits. Elle est composée de 4octets (4*8bits) notés en décimal (0 à 255) séparés par des points (Exemples : , ). DNS (Domain Name Server) : serveur de noms qui permet d associer un nom d hôte à chaque machine (adresse IP). Le nom de l'hôte peut être un texte par exemple représente WWW : World Wide Web, concept développé à partir de 1989 au CERN (Centre Européen de Recherche Nucléaires). Le World Wide Web Consortium, abrégé par le sigle W3C est un organisme de standardisation des technologies du WWW telles que :HTML, XHTML, XML, CSS,... HTML : HyperText Markup Language abrégé par le sigle HTML est un langage de mise en page simple et universel de documents, permettant d intégrer du texte, des images et des liens hypertextes. Adressage des documents (URL de l'anglais Uniform Resource Locator), littéralement «Localisateur Uniforme de Ressource», auquel se substitue informellement le terme adresse web, désigne une chaîne de caractères utilisée pour adresser les ressources du WWW, par exemple: index.html. Web : est un système hypertexte public fonctionnant sur Internet et permettant de consulter, avec un navigateur, des pages mises en ligne dans des sites. Un Système hypertexte lie des documents entre eux par des hyperliens, ces derniers permettent de passer automatiquement d'un document a un autre. Un hyperlien est unidirectionnel (la cible n'est pas consciente d être visée) et peut être incohérent (erreur 404). Les ressources référencées peuvent être sur le même ordinateur ou sur une machine distante. Principe du HTML HTML (Hypertext Markup Language) est un langage de description de documents issu de la norme SGML (Standardized Generalized Markup Language) qui définit des langages de balisage. Il a été construit pour décrire les documents hypertextes sur Internet. HTML est normalisé par le W3C c.à.d que les acteurs d'internet se sont mis d'accord pour suivre tous, les mêmes règles pour écrire et traiter des documents hypertextes sur le Web. La naissance du langage HTML date de la fin des années 80 quand des ingénieurs du CERN et particulièrement Tim Berner Lee, ont développé le premier réseau d'échange de documents et le premier navigateur. Chaque page Web est un fichier dont le nom peut comprendre des lettres et des chiffres et TD 5 - M1105 Page 2/10 JFA 2016

3 CAEN des tirets. À éviter : les espaces, les caractères accentués. Son extension est généralement «.htm» ou «.html». La première page du site doit être nommée index.html (ou index.htm) Présentation d'une balise HTML Une balise (marqueur ou tag en anglais) est définie entre < >, c est une instruction HTML interprétée par le navigateur. Sa syntaxe est : <nom_balise attribut1= valeur1 attribut2= valeur2 >. <a href = > Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La première est appelée «balise d'ouverture» (parfois balise ouvrante) et la seconde «balise de fermeture» (ou fermante). La balise fermante est précédée du caractère slash /. <h1> Titre de ma page Web </h1> Les balises HTML peuvent parfois être uniques (balises autonomes ou standalone). Ces balises sont rares et peuvent comporter un signe de fermeture «/». Exemples : <br/> : Retour à la ligne, <hr/> : Trait horizontal Imbrication des balises : Les balises HTML ont la particularité de pouvoir être imbriquées pour créer une structure hiérarchique et cumuler leurs propriétés. En contrepartie le chevauchement de balises n'est pas toléré par le standard HTML. <a><b>texte</b></a> et non <a><b>texte</a></b> Différents types de balises : méta-informations, mise en forme du document, liens, insertion (multimédia : images, son ou vidéo). Chaque balise possède une liste de balises parents ou enfants. <body> contient des éléments enfants : table, ul,... Les balises HTML ne sont pas sensibles à la casse, c'est-à-dire qu'elles peuvent être saisies indifféremment en minuscules ou en majuscules (XHTML est sensible à la casse). Types d'attributs en HTML Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé. <table border="1"> Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir une ou plusieurs valeurs. Différents types d attributs : Attributs avec affectation de valeur libre : un type de données ou une certaine convention sont attendus. <style type="text/css"> (Définir un passage pour feuilles de style ici c est ce qu on appelle un type MIME qui est attendu comme valeur, et les types MIME ont toujours la construction type/sous-type). Attributs avec affectation de valeur numérique : TD 5 - M1105 Page 3/10 JFA 2016

4 <table border="1"> (Tableau avec une bordure d'une épaisseur de 1px). Attributs avec affectation de valeur libre sans convention particulière : <p title="assertion sous réserve"> Attributs utilisés avec valeurs uniques : <input type= "checkbox" checked="checked" > Attributs globaux qui s'appliquent quasiment à tous les éléments : accesskey (définit le raccourci clavier pour accéder à l'élément), id (identifie un élément), class (nom de classe CSS pour les styles), lang (le code de la langue utilisée), style (définit un style localement), title (contient un texte qui apparaît dans une bulle au passage de la souris sur l'élément), tabindex (donne un index à l'élément dans l'ordre des tabulations), hidden (définit la visibilité), dir (sens de lecture du contenu contextuel de l'élément : ltr (gauche à droite) ou l'inverse rtl),... Attributs de gestion d'événements dont un élément peut être le siège : onclick/ ondbclick (clic/double clic sur son contenu), oncanplay (fichier multimédia peut être lu), onkeypress (frappe sur une touche), onmouseover (la souris est audessus de sa zone). Règles de base (document bien formaté) Certaines règles doivent être respectées (version HTML5) : Les éléments et les attributs sont insensibles à la casse (<body> et <BODY> sont acceptés). Choisir la notation en minuscules (comme XHTML). Toutes les balises doivent être fermées (<p> </p>) même celles autonomes (<br/>). Les valeurs des attributs doivent être écrites entre guillemets simples ou doubles et doivent être séparées au moins par un espace. Une valeur doit être donnée à tous les attributs utilisés y compris à ceux dont la valeur est unique (on préfère <input type= "checkbox" disabled="disabled"> au lieu de <input type= "checkbox" disabled>. Structure d'un document HTML La structure d une page HTML minimaliste est la suivante : <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>titre de la page</title> </head> <body> <!-- Ceci est un commentaire, il ne sera pas affiché dans le navigateur --> Le contenu du document... </body> </html> Un document HTML commence par la balise <HTML> et finit par la balise </HTML>. Il contient la déclaration DOCTYPE qui est obligatoire dans tous documents. Cette déclaration TD 5 - M1105 Page 4/10 JFA 2016

5 CAEN nous indique que cette page est codée en HTML. Cette forme simplifiée est née avec HTML5, car les versions précédentes étaient trop compliquées (par exemple en HTML4, le type de document qui va être créé et la DTD (de 'anglais, Document Type Definition) à laquelle il va se conformer se fait par une ligne du type : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> (DTD HTML4.01 : Strict, Transitional et Frameset)). Depuis HTML5, la balise DOCTYPE n'indique aucun numéro de version car les navigateurs devant reconnaître toutes les façons de coder les pages web les anciennes comme les nouvelles. On distingue également deux blocs <head> et <body> : La partie head permet de définir les propriétés de la page web. Elle contient le titre de la page (balise <title>) et les méta-tags fournissant des informations permettant aux moteurs de recherche d'indexer la page web. On distingue deux types de méta-tags : Les métas name, permettant de décrire la page HTML : <meta name="nom du tag" content="attribut">, valeurs de l attribut name : author, description, keywords Les métas http-equiv, permettant d'envoyer des informations supplémentaires au navigateur via le protocole HTTP : <meta http-equiv="nom du tag" content="attribut">, valeurs de l attribut http-equiv : refresh, charset, content-type, Cette partie peut également contenir du code Javascript (ou des appels aux fonctions) et la définition de feuilles de style CSS (ou des appels aux feuilles de styles). La partie body contient les balises pour présenter le contenu du document (textes, images, liens, listes, tableaux, images ). Les balises de commentaires permettent d ajouter des éléments expliquant le code HTML sans que ceux-ci soient affichés à l écran. Un commentaire est défini par : Validation des pages HTML <! - - Voici un commentaire - - >. Pour tester une page HTML et vérifier si le code est bien formé et conforme, le meilleur validateur reste celui du W3C ou du WHATWG accessibles via : (autre validateur : ou Les moteurs de recherche intègrent dans leur référencement si les pages sont valides ou non. Entités HTML (lisibilité du code) Le standard HTML demande de respecter le codage des caractères ASCII (7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage particulier. Pour coder un caractère accentué, il suffit de saisir une combinaison précédée du caractère & et terminée par un point-virgule (;), par exemple : les caractères accentués sont représentés par : &<lettre> <accent> ; tel que lettre = a, c, e, i, u, o et accent = acute (aigu), grave (grave), circ (^), uml ( ). Les autres caractères peuvent être écrits comme suit : &plusmn ; (±), &divide ; ( ), &#137 ; ( ), &deg ; ( ), &copy ; ( ), &gt ; (>) TD 5 - M1105 Page 5/10 JFA 2016

6 CAEN Édition (logiciels à utiliser) On distingue deux types d éditeurs : Visuels : WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez Est Ce Que Vous Obtenez). Ce type d éditeurs sert à créer son site sans apprendre de langage (Mozilla Composer, Dreamweaver, ). Leur inconvénient consiste à générer automatiquement un code et rien ne garantit qu il convienne ou qu il soit conforme aux spécifications HTML. Classiques : N importe quel éditeur de texte (Windows : Bloc-note, ou Notepad++, Linux : gedit, Emacs ). Ces éditeurs, très nombreux et disponibles en téléchargement, permettent de créer rapidement la structure d un document en utilisant un squelette commun à toutes les pages HTML. Balises de formatage du texte En HTML, plusieurs balises de mise en forme du texte sont utilisées : Les titres : ils permettent de mettre en forme le texte. Un titre accroît la lisibilité du document, permet de le structurer et de rendre le texte plus intéressant, plus utilisable pour l'internaute. Il existe 6 niveaux de titres : h1 (le plus important), h2, h3, h4, h5, h6 (le moins important). Un titre est toujours compris entre les balises <hn> et </hn> où n prend une valeur entre 1 et 6. Par exemple:<h1>titre</h1>. Le paragraphe : comme son nom l'indique ceci permet de séparer un texte en différents paragraphes à l'aide de la balise <p>. Le texte doit être placé entre <p> et </p>, par exemple : <p>ce paragraphe. </p>. Le retour à la ligne : La balise <br/> est utilisée pour effectuer un retour à la ligne. La balise <wbr> (pour Word Break Opportunity) représente une position dans le texte où le navigateur peut éventuellement revenir à la ligne, même si les règles de sauts de ligne ne sont pas définies par exemple : <p> Pour lire Ajax, il faut connaître XML <wbr> Http <wbr> Request. </p>. Les lignes horizontales : Elles permettent de séparer les paragraphes avec une ligne horizontale. Ceci est très pratique pour séparer différentes idées ou thèmes d'un document. La balise <hr/> crée un saut de paragraphe au-dessus et en dessous d'elle. Le texte pré-formaté : La balise <pre> </pre> permet d'écrire un texte préformaté en conservant les espaces, les tabulations et les retours à la ligne. Le texte pré-formaté est souvent utilisé pour écrire le code source de langages de programmation. Les balises <div> et <span> : Ce sont deux balises dites universelles qui ont une différence minimale : <span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe. <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1> sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau «bloc» dans la page et provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design. Les styles physiques : indépendants du navigateur utilisé et de sa configuration. TD 5 - M1105 Page 6/10 JFA 2016

7 On cite les balises suivantes : <b> : gras avec faible sémantique, <i> : italique avec faible sémantique, <u> : texte souligné, <sub> : indice, <sup> : exposant, <small> : petites lignes, Les styles logiques : peuvent dépendre du navigateur et de sa configuration. On cite <cite> : citation courte ou titre d'un(e) œuvre/document. Cette balise peut être utilisée conjointement avec <q>, <code> : pour un programme informatique, <em> : mise en emphase, <strong> : gras avec forte importance, <dfn> : terme d'une définition, <blockquote> : bloc de citation ou texte indenté, <ins> : insérer un nouveau texte dans document révisé, <del> : indique qu'une portion de texte n'est plus valable, <kbd> : texte utilisé pour définir des actions au clavier, <mark> : marquer du texte, <meter> : pour les mesures, <pre> : texte pré-formaté, <s> : identifie une partie de texte qui n'est pas correcte ou non pertinente, <samp> : utilisée dans un paragraphe pour écrire un échantillon de code (similaire à <code>), <time> : déclare une date ou une heure, <var> : déclare une variable,... Liens hypertextes et ancres nommées Les liens hypertextes (ancrages) sont des éléments d'une page HTML (soulignés lorsqu'il s'agit de texte) permettant aux internautes de naviguer vers une nouvelle adresse lorsque l'on clique dessus. Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles. Ils permettent notamment de naviguer : Vers un autre endroit du document (ancres nommées), Vers un fichier html situé à un emplacement différent sur la machine qui héberge la page, Vers une autre machine La balise <a> </a> est employé pour créer une ancre. Ses attributs sont : href : nom du document à lier (URL). Cet attribut peut prendre les valeurs suivantes : Une URL standard : Une adresse mail : mailto:moi@domaine.com, il est possible d'ajouter un sujet et d'autres destinataires (mailto : moi@gmail.net?subject=essai&cc=toi@gmail.fr) ; Un chemin relatif : cours/index2.html, Un chemin absolu : /depuis la racine du serveur, Une étiquette : #label (ancre nommée) Une combinaison URL, chemin relatif et étiquette. target : spécifie dans quelle fenêtre s ouvrira la cible du lien par défaut, le contenu de la page ciblée sera ouvert dans cette même fenêtre. Cet attribut peut être avoir les valeurs suivantes : _blank charge le contenu de la page ciblée dans une nouvelle fenêtre, _self charge le contenu de la page ciblée dans la fenêtre courante (par défaut), Il est également possible de créer un signet (ancre nommée) dans une page, c'est-à-dire marquer un endroit précis d'une page pour s'y rendre par un lien hypertexte. Les signets se définissent grâce à l'attribut name ou id (<a id="signet">...</a>) L appel d un signet se fait de la manière suivante : <a href="#signet">...</a>. Il est ainsi possible de permettre à l'utilisateur de se déplacer au sein d'une même page ou bien d'accéder à une section particulière d'une autre page : TD 5 - M1105 Page 7/10 JFA 2016

8 <a href="url/nom_du_fichier.html#signet"> </a> Listes En HTML, plusieurs types de listes sont supportés : La liste ordonnée (numérotée) est délimitée par la balise <ol>...</ol>. Chaque élément à l'intérieur de la liste est défini par <li>...</li>. A noter qu'un saut de ligne est automatique avant et après la liste. La balise <ol> comporte plusieurs attributs : type= 1/A/a/I/i", type de numérotation (numérique, classique, lettrée, chiffres romains). start= "valeur" (valeur de départ pour la numérotation qui peut être négative). reversed="reversed" ou sans valeur, indique que la numérotation est descendante. La liste non ordonnée (à puces) utilise la balise <ul>...</ul>. La liste de définition constituée de deux parties : un terme de définition et une description. Trois balises HTML nécessaires pour écrire une liste de définition : <dl>...</dl> : conteneur, <dt>... </dt> : terme de définition, <dd>...</dd>: description de définition. TD 5 - M1105 Page 8/10 JFA 2016

9 Exercices : 1. C est quoi une URL? Quelle est la différence entre ces URLs : file://c:/ et ftp://ftp.lip6.fr 2. À quel emplacement est définie la DTD utilisée dans le document? Quels sont les éléments enfants de l élément <html>? À quoi sert l élément <head>? Quels sont ses éléments enfants? Peuvent-ils être employés plusieurs fois dans le même document? Quel élément est obligatoire dans l élément <head>? À quoi sert-il? 3. Comment déclarer les mots-clés associés au site? Quelle est l utilité de cette déclaration? Écrivez-en un exemple. 4. Reproduire les mises en forme des captures d écran suivantes : TD 5 - M1105 Page 9/10 JFA 2016

10 TD 5 - M1105 Page 10/10 JFA 2016