Le langage HTML / XHTML Ecriture de pages Web Lionel LAFITTE

Présentation au sujet: "Le langage HTML / XHTML Ecriture de pages Web Lionel LAFITTE"— Transcription de la présentation:

1 Le langage HTML / XHTML Ecriture de pages Web Lionel LAFITTE
5 Novembre 2004

2 Comment fonctionne le Web ?
C'est un mécanisme client-serveur. Le client demande un fichier, le serveur lui donne tel qu'il est stocké – processus statique Le serveur peut aussi générer un fichier en fonction de la demande du client – processus dynamique

3 Écrire pour le Web Ce n'est pas uniquement écrire des pages en HTML, il faut penser en terme de projet: Définir, écrire le contenu. Trouver une arborescence ergonomique Équilibre menus/sous-menus. Appliquer / Respecter la charte graphique Utiliser, adapter les propositions graphiques. Produire et intégrer les pages. Installer le site sur le serveur. Politique de maintenance et de mise à jour. Primordial, penser au contenu, pourquoi le mettre en ligne, quels sont les documents originaux .. réalisation d' un plan, d' une maquette , charte graphique, essayer d' être homogène, penser aux compétences à mettre en œuvre

4 Comment écrire en HTML? A la main, avec un éditeur de texte
A l'aide d'un programme qui génère le code HTML pour vous Assistant au code HTML. Éditeur dit « WYSIWYG » ou graphique. Filtres. Application de  « Content Management ».

5 Que choisir pour écrire de l' HTML?
A la main, avec un éditeur de texte Simple Text, Bbedit,Emacs ,WordPad … Avec un logiciel « assistant » au code HTML PageSpinner sur MacIntosh, Amaya sur Unix, HTML-Kit sur PC … A l'aide d'un programme dit "WYSIWYG" Dreamweaver , Golive, Netscape composer, FrontPage, Claris Homepage ... A l'aide d'un filtre Les commandes enregistrer sous html, que l'on trouve dans les suites bureautiques, dans certains logiciels de P.A.O. Application « CMS » SPIP, Lutèce, Plone et un grand nombre d’applications commerciales. Conversion HTML vers XHTML avec HTML Tidy Disponible dans de nombreuses versions sur le site du W3C Garder la maîtrise du code. Celà peut être très long

6 Que choisir pour lire HTML?
Le client doit pouvoir interpréter HTML et afficher le résultat. Ils sont divers, tournant sur des systèmes différents: Mozilla, Netscape Navigator, Internet explorer, Safari, Firefox, Opéra, iCab, Emacs mode www, Amaya, Lynx, links, w3m … Note: Les clients web ne possèdent pas tous un processeur XML capable d'interpréter correctement le XHTML. Pour une meilleure compatibilité: utiliser les versions les plus récentes des navigateurs. pour les plus anciens, faire en sorte qu'ils affichent la page comme du HTML en omettant les déclarations XML qui pourraient les perturber. Source d'incertitude,ne donnent jamais le même résultat, l' interprétation varie d'un navigateur à l'autre, d'une version à l'autre, d'une plate-forme à l'autre !! Bon courage.

7 HTML, l'origine HTML Hyper Text Markup Language est né en 1989 sous l'impulsion de Tim Berners Lee, " inventeur " du Web. HTML est basé sur SGML (Structured Markup Language), qui est une vieille norme utilisée pour la description de documents.Elle est conçue pour les grosses documentations techniques. HTML est une instance de SGML.

8 HTML, les principes Il contient des commandes, implémentées par des balises pour marquer les différents types de texte (titres, paragraphe, listes …) , pour inclure des images, des formulaires, des liens … C'est un langage à balisage qui décrit la structure logique d'un document hypertexte. Il a volontairement été conçu pour être simple. Il a évolué vers un langage de description de pages offrant des possibilités plus proches de la P.A.O. IMPORTANT, l'idée de base séparation STRUCTURE - PRESENTATION Version 2.0, puis 4.01 dernière version du html. Pression des éditeurs Maintenant XHTML 1.0 reformulation du HTML en XML.

9 L'hypertexte Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes, qui relient votre document à d'autres documents. En cliquant sur une zone de texte (ou une image, un logo) mise en évidence, on peut accéder a un nouveau document situé sur un autre ordinateur en n'importe quel point du globe.

10 XHTML XHTML 1.0, est une reformulation de HTML en une application XML et trois DTDs correspondant à celles définies par HTML 4. La norme actuelle est XHTML 1.1. La compatibilité avec les agents utilisateurs (les "clients") HTML actuels est possible en suivant un ensemble raisonnable de règles. La sémantique des éléments et de leurs attributs sont définis dans la Recommendation W3C pour le HTML. Le site du W3C:

11 Arbre généalogique SGML XML HTML Docbook … XHTML SMIL MathML …

12 Les balises - 1 Pour décrire un fichier hypertexte, le langage HTML insère des balises dans le texte du document : Début de mise en forme Fin de mise en forme <marqueur> ici votre texte </marqueur> Les balises délimitent une zone.Le couple <marq> </marq> s'appelle le conteneur Analogie avec un traitement de texte, ici les balises sont accessibles !! Synonymes: marqueur, élément, tag.

13 Les balises - 2 Le cours HTML
Ces balises peuvent être insérées n'importe où dans le texte, entre 2 phrases, mots, lettres … <gras>Le <italique> cours </italique> HTML</gras> Le cours HTML

14 Les balises - 3 Il faut respecter une logique d'imbrication: Bon:
Mauvais: <gras><italique> Le cours HTML</gras></italique> <gras><italique> Le cours HTML </italique> </gras> les balises sont imbriquées et non entrecroisées.

15 Les balises - 4 Le langage HTML est insensible à la casse, mais comme XHTML l'est, toujours écrire en minuscules. Bon: Mauvais: <GRAS><italique> Le cours HTML </italique> </GRAS> <Gras><ITALIQUE> Le cours HTML </ITALIQUE> </Gras> <GRAS><ITALIQUE> Le cours HTML </italique> </GRAS> <gras><italique> Le cours HTML </italique> </gras> L’interprétation produit un résultat identique Attention XHTML sensible à la casse , maintenant il faut utiliser des minuscules.

16 Les attributs Les balises peuvent posséder un ou plusieurs attributs qui permettent de spécifier l'action de la balise. Toujours mettre la valeur de l'attribut entre guillemets. <marqueur attribut="argument">texte</marqueur> <marqueur attribut1="argument" attribut2="argument">texte</marqueur> Exemple taille=10% ou 100.

17 é s'écrit é être s'écrit &eacirc;tre
Caractères accentués Vous pouvez rencontrer le codage ASCII sur 7 bits spécifié par la norme pour afficher les caractères accentués ou spéciaux. Ceux ci devront faire l'objet d'un codage spécial au sein du fichier HTML. é s'écrit é être s'écrit &eacirc;tre Les serveurs Web accepte les caractères accentués de la norme iso On spécifie l'encodage dans le fichier HTML. <meta http-equiv="Content-Type" content="text/html; charset=iso " /> Bien que certains navigateurs les acceptent, mais pas tous, attention au résultat !! Voir liste des caractères du jeu « ISO-Latin-1» On peut aussi spécifier la langue, l’encodage dans le fichier HTML. (ISO , UTF8 ….)

18 Les DTDs HTML / XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

19 Un fichier HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML Transitional//EN " <html> <head> <title>mon premier fichier</title> </head> <body> hello world </body> </html>

20 Un fichier XHTML <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" lang="fr" xml:lang="fr"> <head> <title>mon premier fichier</title> </head> <body> hello world </body> </html>

21 Un fichier HTML Un fichier HTML doit comporter au minimum ces 4 balises: <html> <head> <title> <body> Expert : un fichier XHTML doit comporter ces 4 balises + les déclarations XML et DTD.

22 Analyse des balises <html> .. </html> Délimite le début et la fin du document <head> . . </head> Entête du document <title> . .</title> Titre du document <body> . . </body> Corps du document C'est un fichier HTML!

23 Rappels Les noms d' éléments sont sensibles à la casse et sont écrits en minuscules. Les noms d'attributs sont sensibles à la casse, doivent être écrits en minuscules et encadrées par des guillemets. Tous les attributs doivent recevoir une valeur. Les balises fermantes sont obligatoires. Expert: Les documents XHTML strictement conformes doivent comporter une déclaration DOCTYPE (sémantique). La balise <html> doit déclarer l'espace de noms (syntaxe) de la spécification XHTML. C'est un fichier HTML!

24 Exercices On utilisera PageSpinner Présentation de l'interface

25 Exercices Créer un fichier HTML 4.01 Transitional. Ajouter du contenu
Enregistrer et visualiser le fichier avec un navigateur

26 Un peu plus loin dans l' HTML
<head> <title>Mon deuxieme fichier</title> </head> <body> <h2>Hello World</h2> <p> L'emplacement de votre nouveau matériel est-il à proximité (moins de 5m) d'une prise réseau libre ? Si oui, relevez le numéro de la prise (il est écrit sur une plaque de céramique bleue, il faut respecter la distinction entre lettres majuscules et minuscules). Sinon, il faut faire installer une nouvelle prise par le Service Travaux, auquel vous devrez adresser un bon de cession interne. La suite des opérations aura lieu quand vous aurez une prise disponible. Dans le doute, interrogez par courrier électronique </p> <p>Votre demande doit nous parvenir par l'intermédiaire du correspondant informatique de votre Unité. Elle se composera de deux parties : un bon de cession interne envoyé au Service Informatique Scientifique et un courrier électronique adressé à qui contiendra toutes les informations utiles (dont le numéro du bon de cession). </p> <ol> <li> le premier élément</li> <li> le deuxième élément</li> <li> le troisième élément</li> </ol> <p><a href=" trouverez ici la suite du texte !! </a></p> </body> </html>

27 Les titres et paragraphes
<hn> . . </hn> Titre de niveau n, de 1 à 6 <p> . . </p> Paragraphe Hiérarchie au sein du document

28 Les listes <ul> . . </ul> Liste non triée, liste à puces
<ol> . . </ol> Liste triée, liste à numéros <li> . . </li> Elément de la liste exemples au tableau

29 Les liens - 1 <a> . . </a>
Création d'un lien hypertexte, ou vers un point d'ancrage du document Principaux attributs: href = url name = chaîne de caractères <a href = " Pasteur</A> On peut pointer vers n'importe quel document DISPONIBLE sur Internet, texte, son, image …On peut diriger vers une application différente, FTP, Telnet, mail …

30 Les liens - 2 <a name = "ref" >référence</A> <p> .
<a href = "monfichier.html#ref">Vers la référence</a> Nom de référence name=« ref » monfichier.html n’est pas obligatoire quand on est dans le même fichier.Donner exemple.

31 Les adresses URL Les adresses du Web ou URL ( Uniform Resource Locator ) sont du type: Le protocole: http Le serveur: bioweb.pasteur.fr Le fichier: /seqanal/alignment/ intro-fr.html Un ancrage: #LASSAP

32 Les adresses URL L'adresse indiquée dans le lien ( URL) peut être absolue, elle inclut tout le chemin en commençant par le protocole: Ou relative, elle n'inclut qu'une partie du chemin: Mon_repertoire/monfichier.html D'une manière générale on utilise des adresses relatives pour des fichiers locaux et des adresses absolues pour des fichiers éloignés.

33 Autres balises utiles <b>texte gras</b> texte gras
<i>texte italique</i> texte italique <big>texte gros</big> texte gros <small>texte petit</small> texte petit

34 Exercices Écrire un fichier en utilisant les nouveaux marqueurs.
Faites des petites modifications de code pour voir le résultat Créez des liens vers d'autres pages, du serveur Pasteur, de serveurs extérieurs, de vos propres pages.

35 Encore plus loin dans l' HTML
<div style="text-align: center;"> <table border="1" cellspacing="0" cellpadding="10"> <tr> <th><img src="Images/fleche-in-1.gif" width="65" height="35" align="Middle" />Pour Mac</th> <th><img src="Images/fleche-in-2.gif" width="100" height="60" align="Middle" />Pour PC</th> <th><img src="Images/fleche-in-3.gif" width="150" height="71" align="Middle" />Pour Linux</th> </tr> <td> <ul> <li><a href=" texte </a></li> <li> <a href=" </a></li> <li><a href=" </ul> </td> <li><a href=" texte </a></li> <li> <a href=" </a></li> <li><a href=" </a></li> <li><a href=" </table> </div>

36 Les tableaux -1 <table> . . </table> Définit un tableau
Principaux attributs (certains ne sont pas valides en XHTML 1.1): align = position bgcolor = color border = n cellpadding = n cellspacing = n width = n align=position dans la fenêtre …

37 Les tableaux -2 <tr> . . </tr>
Définit une ligne d'un tableau Principaux attributs (certains ne sont pas valides en XHTML 1.1): align = left,center,right valign = top, middle, bottom bgcolor = color border = n

38 Les tableaux -3 <td> . . </td>
Définit une cellule de données Principaux attributs (certains ne sont pas valides en XHTML 1.1): align = type valign = type bgcolor = color colspan, rowspan = n height, width = n

39 Les images -1 <img> . . </img> Insère une image
Principaux attributs: align = left, bottom, middle, top, right alt = text border = n height, width = n src = url ALT devrait être obligatoire !!

40 Les images - 2 Attention au poids des images, il est important d'optimiser son fichier image. Deux formats sont lus par les navigateurs, GIF ( Graphics Interchange Format ) et JFIF ( JPEG File Interchange Format).On utilise le GIF pour les illustrations, le JPEG pour les photos. PNG

41 Les droits d'auteurs Attention aux droits sur les images.La seule image qui vous appartient est celle que vous avez prise avec votre matériel photo. Il faut aussi l'autorisation des personnes figurant sur la photo. Attention à la portée des droits d'auteurs, surtout pour une utilisation web. Attention aux images "libres de droits". Lire les recommandations juridiques sur l'intranet.

42 Exercices Importez une image Créez un tableau.
Créez un tableau contenant une image et du texte.

43 Les feuilles de styles CSS
Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans en modifier son contenu. Le langage CSS spécifie l'apparence des blocs de texte ou image, mais il peut contrôler d'une manière très précise le positionnement des objets, les bordures, les marges … La norme est consultable sur le site du consortium Web. Les navigateurs n'implémentent qu'une petite partie du langage.

44 Les feuilles de styles CSS – Les règles
Une feuille de style consiste en un ensemble de règles qui définissent le formatage des éléments (balises) d'un document XHTML. Règle = Sélecteur + Déclarations Déclaration = Propriété + Valeurs h1 { color: blue; } Sélecteur(s) Propriété(s) Valeur(s) h3, h4 { font-weight: bold; font-family : arial; }

45 Les feuilles de styles CSS
En externe, c'est un fichier indépendant du fichier HTML, on utilise dans l'entête du document la balise link: <link href="ma_feuille_de_style" rel="stylesheet" type="text/css"> En interne, dans l' entête de document, le style est spécifié pour tout le document entre les balises style <style type="text/css"> h1 { font-family: Arial, Helvetica, sans-serif; } </style> En interne, dans le corps du document, le style est appliqué localement au texte <h1 style="font-family: "Courier New", Courier, monospace;"></h1>

46 Les feuilles de styles CSS – les classes
On peut créer ses propres classes que l'on appliquera avec l' attribut "class" Dans l'entête: <style type="text/css"> maclasse { font-family: Arial, Helvetica, sans-serif; font-size: larger; font-style: italic; text-align: center; color: #4169E1; } </style> Dans le corps du document: <span class="maclasse">la partie du texte formatée suivant ma classe</span> <p class="maclasse">un paragraphe formaté suivant ma classe</p>

47 Exercice Ajoutez des styles à l'un de vos fichiers HTML

48 Un fichier différent … <html> <head>
<title>des cadres</title> </head> <frameset cols="25%,75%"> <frame name="menu" src="menu.html" scrolling="yes"> <frame name="cible" src="cible.html" scrolling="no"> <noframes> <body> message pour les navigateurs ne supportant pas les cadres </body> </noframes> </frameset> </html>

49 <noframes> .. </noframes>
Les cadres Ils permettent de diviser la fenêtre principale du navigateur en plusieurs sous fenêtres de taille réduite, chacune d'entre elles affichant un document différent. Certains navigateurs ne les supportent pas, il est possible de les désactiver, il faut donc prévoir un fichier de substitution inscrit entres les balises: <noframes> .. </noframes>

50 XHTML compatible HTML Eviter les sections CDATA.
Pas d'instructions de traitement. Ajouter un caractère d'espacement avant la barre oblique d'une balise d'élément vide ( <br /> ) . Spécifier l'encodage de caractères de deux façons ( entête xml et balise méta) <?xml version"1.0" encoding=" iso "?> <meta http-equiv="Content-type" content="text/html; charset=iso "> Spécifier les cibles d'hyperliens (balise a) en utilisant à la fois les attributs id et name. Assigner une valeur aux attributs HTML booléens. <input type="radio" checked="checked">

51 Les limites d' HTML / XHTML
Langage de base du Web Langage simple, limité et statique D'autres langages, extensions,programmes sont venus se greffer à l'HTML pour en augmenter les possibilités. XHTML offre les aspects XML mais ce n'est pas suffisant pour toutes les applications que l'on souhaite mettre en œuvre sur le web.

52 CGI - SSI - ePerl – PHP - JSP
Common Gateway Interface, est un programme qui s'exécute sur le serveur. SSI sont des fonctions spécifiques du serveur Apache. ePerl, PHP sont des modules que l'on installe sur le serveur. On insère des "morceaux de codes" dans la page HTML, qui la rendent "dynamique". Le code est interprété par le serveur ex: affichage personnalisé pour un client, filtrage, connexion à des bases de données ..

53 Javascript Il s'agit d'un langage de script qui permet d'agir sur le contenu d'une page HTML. Le code est directement inséré dans la page HTML et est interprété par le client.