Ecriture de pages Web Ecriture de pages Web Le langage HTML / XHTML Lionel LAFITTE [email protected] 5...

Click here to load reader

  • date post

    03-Apr-2015
  • Category

    Documents

  • view

    103
  • download

    0

Embed Size (px)

Transcript of Ecriture de pages Web Ecriture de pages Web Le langage HTML / XHTML Lionel LAFITTE [email protected] 5...

  • Page 1
  • Ecriture de pages Web Ecriture de pages Web Le langage HTML / XHTML Lionel LAFITTE [email protected] 5 Novembre 2004
  • Page 2
  • Comment fonctionne le Web ? C'est un mcanisme client-serveur. Le client demande un fichier, le serveur lui donne tel qu'il est stock processus statique Le serveur peut aussi gnrer un fichier en fonction de la demande du client processus dynamique
  • Page 3
  • crire pour le Web Ce n'est pas uniquement crire des pages en HTML, il faut penser en terme de projet: Dfinir, crire le contenu. Trouver une arborescence ergonomique quilibre menus/sous-menus. Appliquer / Respecter la charte graphique Utiliser, adapter les propositions graphiques. Produire et intgrer les pages. Installer le site sur le serveur. Politique de maintenance et de mise jour.
  • Page 4
  • Comment crire en HTML? A la main, avec un diteur de texte A l'aide d'un programme qui gnre le code HTML pour vous Assistant au code HTML. diteur dit WYSIWYG ou graphique. Filtres. Application de Content Management .
  • Page 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, Lutce, Plone et un grand nombre dapplications commerciales. Conversion HTML vers XHTML avec HTML Tidy Disponible dans de nombreuses versions sur le site du W3C
  • Page 6
  • Le client doit pouvoir interprter HTML et afficher le rsultat. Ils sont divers, tournant sur des systmes diffrents: Mozilla, Netscape Navigator, Internet explorer, Safari, Firefox, Opra, iCab, Emacs mode www, Amaya, Lynx, links, w3m Note: Les clients web ne possdent pas tous un processeur XML capable d'interprter correctement le XHTML. Pour une meilleure compatibilit: utiliser les versions les plus rcentes des navigateurs. pour les plus anciens, faire en sorte qu'ils affichent la page comme du HTML en omettant les dclarations XML qui pourraient les perturber. Que choisir pour lire HTML?
  • Page 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 utilise pour la description de documents.Elle est conue pour les grosses documentations techniques. HTML est une instance de SGML.
  • Page 8
  • HTML, les principes Il contient des commandes, implmentes par des balises pour marquer les diffrents types de texte (titres, paragraphe, listes ), pour inclure des images, des formulaires, des liens C'est un langage balisage qui dcrit la structure logique d'un document hypertexte. Il a volontairement t conu pour tre simple. Il a volu vers un langage de description de pages offrant des possibilits plus proches de la P.A.O.
  • Page 9
  • L'hypertexte Le langage HTML permet de crer des documents interactifs grce 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 accder a un nouveau document situ sur un autre ordinateur en n'importe quel point du globe.
  • Page 10
  • XHTML XHTML 1.0, est une reformulation de HTML en une application XML et trois DTDs correspondant celles dfinies 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 rgles. La smantique des lments et de leurs attributs sont dfinis dans la Recommendation W3C pour le HTML. http://www.w3c.orghttp://www.w3c.org. Le site du W3C: http://www.w3c.org.http://www.w3c.org
  • Page 11
  • SGML XML HTMLDocbook XHTMLSMIL MathML Arbre gnalogique
  • Page 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 ici votre texte Synonymes: marqueur, lment, tag.
  • Page 13
  • Les balises - 2 Ces balises peuvent tre ins r es n'importe o dans le texte, entre 2 phrases, mots, lettres Le cours HTML
  • Page 14
  • Les balises - 3 Il faut respecter une logique d'imbrication: Bon: Mauvais: Le cours HTML
  • Page 15
  • Les balises - 4 Le langage HTML est insensible la casse, mais comme XHTML l'est, toujours crire en minuscules. Bon: Mauvais: Le cours HTML
  • Page 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. texte
  • Page 17
  • Caractres accentus 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-8859-1. On sp cifie l'encodage dans le fichier HTML.
  • Page 18
  • Les DTDs HTML / XHTML
  • Page 19
  • mon premier fichier hello world Un fichier HTML
  • Page 20
  • mon premier fichier hello world Un fichier XHTML
  • Page 21
  • Un fichier HTML Un fichier HTML doit comporter au minimum ces 4 balises: Expert : un fichier XHTML doit comporter ces 4 balises + les dclarations XML et DTD.
  • Page 22
  • Analyse des balises.. Dlimite le dbut et la fin du document.. Entte du document.. Titre du document.. Corps du document
  • Page 23
  • Rappels Les noms d' lments sont sensibles la casse et sont crits en minuscules. Les noms d'attributs sont sensibles la casse, doivent tre crits en minuscules et encadres par des guillemets. Tous les attributs doivent recevoir une valeur. Les balises fermantes sont obligatoires. Expert: Les documents XHTML strictement conformes doivent comporter une dclaration DOCTYPE (smantique). La balise doit dclarer l'espace de noms (syntaxe) de la spcification XHTML.
  • Page 24
  • Exercices On utilisera PageSpinner Prsentation de l'interface
  • Page 25
  • Exercices Crer un fichier HTML 4.01 Transitional. Ajouter du contenu Enregistrer et visualiser le fichier avec un navigateur
  • Page 26
  • Un peu plus loin dans l' HTML Mon deuxieme fichier Hello World L'emplacement de votre nouveau matriel est-il proximit (moins de 5m) d'une prise rseau libre ? Si oui, relevez le numro de la prise (il est crit sur une plaque de cramique 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 oprations aura lieu quand vous aurez une prise disponible. Dans le doute, interrogez par courrier lectronique [email protected] Votre demande doit nous parvenir par l'intermdiaire 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 [email protected] qui contiendra toutes les informations utiles (dont le numro du bon de cession). le premier lment le deuxime lment le troisime lment Vous trouverez ici la suite du texte !!
  • Page 27
  • Les titres et paragraphes.. Titre de niveau n, de 1 6.. Paragraphe
  • Page 28
  • Les listes.. Liste non trie, liste puces.. Liste trie, liste numros.. Elment de la liste
  • Page 29
  • Les liens - 1.. Cration d'un lien hypertexte, ou vers un point d'ancrage du document Principaux attributs: href = url name = chane de caractres L'Institut Pasteur
  • Page 30
  • Les liens - 2 rfrence... Vers la rfrence
  • Page 31
  • Les adresses URL Les adresses du Web ou URL ( Uniform Resource Locator ) sont du type: http://bioweb.pasteur.fr/seqanal/alignment/intro-fr.html#LASSAP Le protocole: http Le serveur: bioweb.pasteur.fr Le fichier: / seqanal/alignment/ intro-fr.html Un ancrage: #LASSAP
  • Page 32
  • L'adresse indique dans le lien ( URL) peut tre absolue, elle inclut tout le chemin en commenant par le protocole: http://www.pasteur.fr/monfichier.html Ou relative, elle n'inclut qu'une partie du chemin: Mon_repertoire/monfichier.html Les adresses URL
  • Page 33
  • texte gras texte gras texte italique texte italique texte gros texte gros texte petit texte petit Autres balises utiles
  • Page 34
  • Exercices crire un fichier en utilisant les nouveaux marqueurs. Faites des petites modifications de code pour voir le rsultat Crez des liens vers d'autres pages, du serveur Pasteur, de serveurs extrieurs, de vos propres pages.
  • Page 35
  • Encore plus loin dans l' HTML Pour Mac Pour PC Pour Linux Mode texte Simples Avancs Mode texte Simples Avancs Linuxberg
  • Page 36
  • Les tableaux -1.. Dfinit un tableau Principaux attributs (certains ne sont pas valides en