partie1: le langage html · 2013-02-25 · le langage html permet de créer des documents...
TRANSCRIPT
![Page 1: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/1.jpg)
Développement des site web EDéveloppement des site web E--commercecommerce
Partie1: Le langage HTML
![Page 2: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/2.jpg)
Comment fonctionne le Web ?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é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 demandedu client – processus dynamique
![Page 3: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/3.jpg)
Ecrire pour le WebEcrire pour le Web
Ce n'est pas uniquement écrire des pages en HTML, il faut penseren terme de projet :
Définir le contenuTrouver une arborescence ergonomiqueAppliquer / Respecter la charte graphiqueProduire les pagesInstaller le site sur le serveurMaintenance, politique de mise à jour
![Page 4: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/4.jpg)
HTML, l'origineHTML, l'origine
HTML Hyper Text Markup Language est né en 1989 sousl'impulsion de Tim Berners Lee, " inventeur " du Web.
HTML est basé sur SGML (Structured Markup Language) , qui estHTML est basé sur SGML (Structured Markup Language) , qui estune vieille norme utilisée pour la description de documents.Elle estconçue pour les grosses documentations techniques.
HTML est une instance de SGML.
![Page 5: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/5.jpg)
HTML, les principesHTML, les principes
Il contient des commandes , implémentées par des balises pourmarquer 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'undocument hypertexte . Il a volontairement été conçu pour êtresimple.
Il a évolué vers un langage de description de pages offrant despossibilités plus proches de la P.A.O.
![Page 6: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/6.jpg)
L'hypertexteL'hypertexte
Le langage HTML permet de créer des documents interactifs grâceà des liens hypertextes , qui relient votre document à d'autresdocuments.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 unautre ordinateur en n'importe quel point du globe.
![Page 7: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/7.jpg)
Arbre généalogiqueArbre généalogique
SGML
XML
HT
ML
Doc
book
…
XH
TM
L
SM
IL
Mat
hML
…
![Page 8: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/8.jpg)
Introduction au marquage Introduction au marquage -- 11
Pour décrire un fichier hypertexte, le langage HTMLinsère des balises dans le texte du document :
Début de mise en forme Fin de mise en forme
<marqueur> ici votre texte </marqueur>
Synonymes: marqueur, élément, tag.
![Page 9: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/9.jpg)
Introduction au marquage Introduction au marquage -- 22
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
![Page 10: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/10.jpg)
Introduction au marquage Introduction au marquage -- 33
Il faut respecter une logique d'imbrication:
Bon:Bon:
Mauvais:
<gras><italique> Le cours HTML</gras></italique>
<gras><italique> Le cours HTML </italique> </gras>
![Page 11: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/11.jpg)
Introduction au marquage Introduction au marquage -- 44
Le langage HTML est sensible à la casse , toujours écrire en minuscules.
Bon:
<gras><italique> Le cours HTML </italique> </gras>
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>
![Page 12: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/12.jpg)
Les attributsLes attributs
Les balises peuvent posséder un ou plusieurs attributs qui permettentde spécifier l'action de la balise. Toujours mettre la valeur de l'attributentre guillemets .
<marqueur attribut="argument">texte</marqueur>
<marqueur attribut1="argument" attribut2="argument">texte</marqueur>
![Page 13: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/13.jpg)
Les commentairesLes commentaires
<!–- Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->
![Page 14: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/14.jpg)
Que choisir pour écrire de l' XHTML?Que choisir pour écrire de l' XHTML?
A la main, avec un éditeur de texteSimple Text, Bbedit,Emacs ,WordPad …
Avec un logiciel « assistant » au code HTMLPageSpinner 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 filtreLes commandes enregistrer sous html, que l'on trouve dans les suitesbureautiques, dans certains logiciels de P.A.O.
Conversion HTML vers XHTML avec HTML TidyDisponible dans de nombreuses versions sur le site du W3C
![Page 15: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/15.jpg)
Le client doit pouvoir interpréter HTML et afficher le résultat. Ilssont divers, tournant sur des systèmes différents:
Que choisir pour lire HTML?Que choisir pour lire HTML?
– Netscape Navigator, Mozilla, Internet explorer, Safari, Opéra,iCab, Emacs mode www, Amaya, Lynx, links, w3m …
![Page 16: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/16.jpg)
Note sur les caractères accentuésNote sur les caractères accentués
Vous pouvez rencontrer le codage ASCII sur 7 bits spécifié parla norme pour afficher les caractères accentués ou spéciaux.Ceux ci devront faire l'objet d'un codage spécial au sein dufichier 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.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
![Page 17: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/17.jpg)
Structure de base d'un fichier HTMLStructure de base d'un fichier HTML
<html>
<head>
… éléments d'en-tête
</head>
<body>
… éléments de corps… éléments de corps
</body>
</html>
.
(voir mon_premier_fichier.html)
Une balise <html> contenant une seule balise <head> et une seule balise <body>.
Les balises que l'on va trouver dans le corps divisent le cont enu en sections logiques,sous forme de blocs ( paragraphes, tableaux …). On parle d'élé ments de niveau bloc.
Les éléments qui représentent les propriétés du texte (stro ng, i) qui figurent dans un blocsont dits "éléments de ligne".
![Page 18: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/18.jpg)
Analyse des balisesAnalyse des balises
<html> .. </html> Délimite le début et la fin du document
<head> .. </head> Entête du document, contient des méta-
informations
Ex: <title>. .</title> titre du document
<meta> . .</meta> méta-informations
<script> . .</script> script ou référence
<body> . . </body> Corps du document
![Page 19: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/19.jpg)
RappelsRappels
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 minusculesLes 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.
Les éléments vides sont signalés par une balise spéciale. ( ex: <br />)
![Page 20: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/20.jpg)
ExerciceExercice
On utilisera Emacs en mode HTML
Ou PageSpinner, éditeur HTML sur MacIntosh
Vous mettrez vos pages dans:Vous mettrez vos pages dans:
/var/www/login/
Créez un fichier HTML de base. Pour visualiser le fichier:
http://leeloo.sis.pasteur.fr/login/fichier.html
![Page 21: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/21.jpg)
Un peu plus loin dans HTMLUn peu plus loin dans HTML
<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 pr ise réseau libre ? Si oui, relevez le numéro de la pris e (il est écrit sur une plaque de cér amique bleue, il faut libre ? Si oui, relevez le numéro de la pris e (il est écrit sur une plaque de cér amique bleue, il faut respecter la distinction entre lettres majuscules e t minuscules). Sinon, il faut faire installer une n ouvelle 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, interrog ez par courrier électronique netadm@pasteur. fr. </p>
<p>Votre demande doit nous parvenir par l'interm&ea cute;diaire du correspondant informatique de votre Unité. Elle se composera de deux parties : un bon de cession inter ne envoyé au Service Informatique Scientifiq ue et un courrier électronique adressé à netadm@ pasteur.fr qui contiendra toutes les informations u tiles (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="http://www.pasteur.fr/infosci/utilinfo/ FAQ.html#Q1">Vous trouverez ici la suite du texte ! ! </a></p>
</body>
</html>
![Page 22: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/22.jpg)
Eléments de niveau blocEléments de niveau bloc
<hn> . . </h n> Titre de niveau n, de 1 à 6
<p> . . </p> Paragraphe
Et aussi: address, blockquote, div, hr, pre sans ou blier body !
![Page 23: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/23.jpg)
Eléments de listesEléments de listes
<ul> . . </ul> Liste non triée, liste à puces
<ol> . . </ol> Liste triée, liste à numéros<ol> . . </ol> Liste triée, liste à numéros<li> . . </li> Elément de la liste
Et aussi: dl, dt, dd
![Page 24: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/24.jpg)
Les liens Les liens -- 11
<a> . . </a>
Création d'un lien hypertexte, ou vers un point d'a ncrage du document
Principaux attributs: href = url
name = chaîne de caractères
<a href = "http://www.pasteur.fr">L'Institut Pasteur</A>
![Page 25: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/25.jpg)
Les liens Les liens -- 22
<a name = "ref" >référence</A>
<p>
.
<p> <p>
.
.
.
<p>
.
<a href = "monfichier.html#ref">Vers la référence</ a>
![Page 26: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/26.jpg)
Les adresses URLLes 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 27: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/27.jpg)
L'adresse indiquée dans le lien ( URL) peut être absolue, elle inclut tout le chemin en commençant par le protocole:
Les adresses URLLes adresses URL
http://www.pasteur.fr/monfichier.html
Ou relative , elle n'inclut qu'une partie du chemin:
Mon_repertoire/monfichier.html
![Page 28: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/28.jpg)
<b>texte gras</b> texte gras
<i>texte italique</i> texte italique
Eléments de ligneEléments de ligne
<big>texte gros</big> texte gros<small>texte petit</small> texte petit
Et aussi: br, code, sub, sup, span, u, strike …
![Page 29: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/29.jpg)
ExercicesExercices
Ecrire un fichier en utilisant les marqueurs de l' exemple:• mon_deuxieme_fichier.html
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, celles de vos collègues.
![Page 30: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/30.jpg)
Encore plus loin dans l' HTMLEncore 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" he ight="35" align="Middle" />Pour Mac</th>
<th><img src="Images/fleche-in-2.gif" width="100" h eight="60" align="Middle" />Pour PC</th>
<th><img src="Images/fleche-in-3.gif" width="150" h eight="71" align="Middle" />Pour Linux</th>
</tr>
<tr>
<td>
<ul>
<li><a href="http://proxad.mac.tucows.com/blueberry /htmltextmac.html">Mode texte </a></li><li><a href="http://proxad.mac.tucows.com/blueberry /htmltextmac.html">Mode texte </a></li>
<li> <a href="http://proxad.mac.tucows.com/blueberr y/beginnermac.html">Simples </a></li>
<li><a href="http://proxad.mac.tucows.com/blueberry /htmleditmac.html">Avancés</a></li>
</ul>
</td>
<td>
<ul>
<li><a href="http://proxad.tucows.com/htmltext95.ht ml">Mode texte </a></li>
<li> <a href="http://proxad.tucows.com/htmlbeginner 95.html">Simples </a></li>
<li><a href="http://proxad.tucows.com/htmledit95.ht ml">Avancés </a></li>
</ul>
</td>
<td>
<ul>
<li><a href="http://proxad.linux.tucows.com/x11html /off_html.html">Linuxberg</a></li>
</ul>
</td>
</tr>
</table>
</div>
![Page 31: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/31.jpg)
Les tableaux Les tableaux --11
<table> . . </table>
Définit un tableau
Principaux attributs:
align = positionbgcolor = color
border = ncellpadding = ncellspacing = n
width = n
![Page 32: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/32.jpg)
Les tableaux Les tableaux --22
<tr> . . </tr>
Définit une ligne d'un tableau
Principaux attributs :
align = left,center,rightvalign = top, middle, bottom
bgcolor = color border = n
![Page 33: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/33.jpg)
Les tableaux Les tableaux --33
<td> . . </td>
Définit une cellule de données
Principaux attributs :
align = typevalign = type
bgcolor = color colspan, rowspan = n
height, width = n
![Page 34: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/34.jpg)
Les images Les images --11
<img> . . </img>
Insère une image
Principaux attributs:
align = left, bottom, middle, top, rightalt = textborder = n
height, width = nsrc = url
![Page 35: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/35.jpg)
Les images Les images -- 22
Attention au poids des images, il est important d'optimiser sonfichier image.
Deux formats sont lus par les navigateurs, GIF ( GraphicsInterchange Format ) et JFIF ( JPEG File Interchange Format).Onutilise le GIF pour les illustrations, le JPEG pour les photos.
![Page 36: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/36.jpg)
Les droits d'auteursLes droits d'auteurs
Attention aux droits sur les images.La seule image qui vousappartient est celle que vous avez prise avec votre matériel photo.Ilfaut aussi l'autorisation des personnes figurant sur la photo.
Attention à la portée des droits d'auteurs, surtout pour une utilisationAttention à la portée des droits d'auteurs, surtout pour une utilisationweb
Attention aux images "libres de droits"
Lire les recommandations juridiques sur l'intranet.
![Page 37: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/37.jpg)
ExercicesExercices
Importez une image
Créez un tableau à 3 colonnes , 2 lignes.Créez un tableau à 3 colonnes , 2 lignes.
Créez un tableau à 1 ligne , 2 colonnes contenant une image et du texte.
![Page 38: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/38.jpg)
Un fichier différent …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 "><frame name="cible" src="cible.html" scrolling="no ">
<noframes>
<body>
message pour les navigateurs ne supportant pas les cadres
</body>
</noframes>
</frameset>
</html>
![Page 39: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/39.jpg)
Les cadresLes cadres
Ils permettent de diviser la fenêtre principale du navigateur enplusieurs sous fenêtres de taille réduite, chacune d'entre ellesaffichant un document différent.
Certains navigateurs ne les supportent pas, il est possible de lesdésactiver, il faut donc prévoir un fichier de substitution inscritentres les balises:
<noframes> .. </noframes>
![Page 40: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/40.jpg)
Partie 2: HTML DynamiquePartie 2: HTML Dynamique
![Page 41: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/41.jpg)
XHTMLXHTML
XHTML 1.0, est une reformulation de HTML en une application XMLet trois DTDs (Document Type Definition)correspondant à cellesdéfinies par HTML 4.La compatibilité avec les agents utilisateurs (les "clients") HTMLactuels est possible en suivant un ensemble raisonnable de règles.actuels est possible en suivant un ensemble raisonnable de règles.La sémantique des éléments et de leurs attributs sont définis dansla Recommandation W3C pour le HTML .La norme actuelle est XHTML 1.1Le site du W3C: http://www.w3c.org.http://www.w3c.org.
![Page 42: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/42.jpg)
Conclusion: XHTML compatible HTMLConclusion: XHTML compatible HTML
Écrire en minuscules.Mettre les attributs entre guillemets.Ajouter un caractère d'espacement avant la barre oblique d'unebalise d'élément vide ( <br /> ) .Spécifier l'encodage de caractères de deux façons ( entête xml et Spécifier l'encodage de caractères de deux façons ( entête xml et balise méta)
<?xml version"1.0" encoding=" iso-8859-1"?>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
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">
![Page 43: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/43.jpg)
Les limites d' HTML / XHTMLLes limites d' HTML / XHTML
Langage de base du Web
Langage simple, limité et statique
D'autres langages, extensions,programmes sont venus se grefferà XHTML pour en augmenter les possibilités.
XHTML offre les aspects XML mais ce n'est pas suffisant pourtoutes les applications que l'on souhaite mettre en œuvre sur leweb.
![Page 44: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/44.jpg)
Les formulairesLes formulaires
L'élément <form> permet de créer des formulaires, qui peuve ntcontenir des cases à cocher, des boutons radio, des listesdéroulantes … les données recueillies sont transmises à unprogramme qui s'exécutera sur le serveur web et vous retourn erale résultat .le résultat .
<form action="mon_programme.pl">
… éléments du formulaire
</form>
![Page 45: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/45.jpg)
Eléments de formulaireEléments de formulaire
<form name="mon_formulaire" action="mon_programme.p l"><input type="text" name="nom" value="" size="60" />
<input type="radio" name="rad1" value="" size="60" />choix1<input type="radio" name="rad2" value="" size="60" />choix2
<input type="checkbox" name="chk1" value="" size="6 0" />choix1<input type="checkbox" name="chk2" value="" size="6 0" />choix2
<select name="liste"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
<input type="submit" name="envoyer" value="envoyer" /></form>
![Page 46: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/46.jpg)
Eléments de formulaireEléments de formulaire
<form name="my_form" action="mon_programme.pl"> … < /form>
Principaux attributs
name = "chaine" spécifie le nom sous lequel le formulaire peut -être identifié, parname = "chaine" spécifie le nom sous lequel le formulaire peut -être identifié, parexemple en Javascript , je peux y faire référence avec l'expr ession: document.my_form
action = "URL" spécifie l'URL à laquelle le contenu est envoy é
method= "GET" ou "POST", spécifie la méthode HTTP utilisée p our transmettre lesdonnées. Avec GET elles sont ajoutées à l'URL, avec POST elle s sont envoyées auserveur dans le corps du message.
![Page 47: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/47.jpg)
Eléments de formulaireEléments de formulaire
<input name="my_choice" type="radio"> … </input>
Principaux attributs
Définit les entrées de données dans le formulaire
Principaux attributs
name = "chaine", associe un nom aux données entrées dans cet é lément input ( ex:civilite pour un choix Mme, Mlle, Mr de type radio, on affecte ra dans le CGI la valeurcochée à la variable civilite, ce qui donne en Perl:
$civilite=$CGI->param(civilite)input=cgi.parse()
input[civilite]
type = "button, checkbox, file, hidden, image, radio, reset , submit, text …"
![Page 48: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/48.jpg)
Eléments de formulaireEléments de formulaire
<select name="my_list"><option value="10">10</option></select>
Liste d'options sélectionnables
Principaux attributs
name = "chaine", associe un nom aux données entrées dans cet é lément select
value = "valeur", spécifie la valeur de l'élément option. Si cet élément est omis, c'est lecontenu de l'élément option qui est envoyé au CGI.
![Page 49: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/49.jpg)
Les feuilles de styles CSSLes feuilles de styles CSS
Elles permettent de changer la mise en forme d'une page HTML ouXHTML sans en modifier son contenu.
Le langage CSS spécifie l'apparence des blocs de texte ou image,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 positionnementdes objets, les bordures, les marges, le recouvrement …
La norme est consultable sur le site du consortium Web. Lesnavigateurs n'implémentent qu'une petite partie du langage.
![Page 50: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/50.jpg)
Les feuilles de styles CSSLes feuilles de styles CSS
Le navigateur lit le document -> arbre syntaxique
Il lit ensuite la feuille de style associée et interprète les différentesIl lit ensuite la feuille de style associée et interprète les différentesrègles de formatage.
Il parcourt l'arbre de haut en bas et applique les règles au contenude l'élément.
![Page 51: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/51.jpg)
Versions de CSSVersions de CSS
CSS1 est bien supportée par les navigateurs récents.
CSS2 est en partie supportée par les navigateurs récents.CSS2 est en partie supportée par les navigateurs récents.
CSS3 est en cours de développement.
2004-01-07 HostM.com Web Hosting released Simple CSS 1.0, an easy-to-use CSS authoring tool. You can manage multipleCSS projects and import existing style sheets. Supports CSS2. (Windows & Mac, freeware)
2002-09-02 Mozilla released version 1.1 and Netscape version 7.0, based on Mozilla 1.0.1. Both have excellent CSS support.(Mozilla is Open Source, Netscape is binary-only but free, both run on many platforms)
![Page 52: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/52.jpg)
Les feuilles de styles CSS Les feuilles de styles CSS –– Les règlesLes 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éclarationsRègle = Sélecteur + DéclarationsDéclaration = Propriété + Valeurs
h1h1h1h1 {{{{ color: color: color: color: blue; } blue; } blue; } blue; } Sélecteur(s)
Propriété(s) Valeur(s)
h3, h4h3, h4h3, h4h3, h4 {{{{ fontfontfontfont----weight: weight: weight: weight: bold;bold;bold;bold;fontfontfontfont----family : family : family : family : arial; }arial; }arial; }arial; }
![Page 53: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/53.jpg)
En externe, c'est un fichier indépendant du fichier HTML, on utilise dans l'entête dudocument la balise link:
<link href="ma_feuille_de_style.css" rel="stylesheet" type="text/css">
Exemple de fichier ma_feuille_de_style.css:
Les feuilles de styles CSSLes feuilles de styles CSS
h1 { font-family: Arial, Helvetica, sans-serif; }
En interne, dans l' entête de document , le style est spécifié pour tout le documententre 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, monospac e;">Mon titre</h1>
![Page 54: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/54.jpg)
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;
Les feuilles de styles CSS Les feuilles de styles CSS –– les classesles classes
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>
![Page 55: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/55.jpg)
Ici, la règle concerne uniquement les éléments div dont l'attribut possède la valeur "maclasse".
Dans l'entête:
<style type="text/css">
Les feuilles de styles CSS Les feuilles de styles CSS –– les classesles classes
<style type="text/css">
div.maclasse { font-family: Arial, Helvetica, sans-serif;
font-size: larger;
font-style: italic;
text-align: center;
color: #4169E1;
}
</style>
Dans le corps du document:
<div class="maclasse">la partie du texte formatée suivant ma classe</div>
![Page 56: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/56.jpg)
ExerciceExercice
Trouvez une ou plusieurs propriétés sur le site du w3c (CSS1 ou CSS2)
Ajoutez les à l'un de vos fichiers XHTML
(overflow.html)
![Page 57: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/57.jpg)
CSS avancées CSS avancées
Importation de feuilles de styles: règle @import ajoute les règles de la CSS distante à ses propres règles:
@import url (" http://www.pasteur.fr/styles/charte.css ")
• Téléchargement de polices: règle @font-face• Polices au format PFR (Portable Font Resource ou TrueDoc)
@font-face { font-family: mapolice;
src: url("my_url");
font-weight: normal ;}
![Page 58: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/58.jpg)
CSS avancéesCSS avancées
Choix de feuilles de styles pour différents médias: ( écran, impression, braille, tv, projection …)
@media screen {
body { font: 12pt Verdana}
Syntaxe avancée, pour faire référence à des éléments en se basantsur des valeurs d'attributs ou la position des éléments dans ledocument. (p425)
body { font: 12pt Verdana}
}
@media print {
body { font: 10pt Courrier}
}
![Page 59: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/59.jpg)
L'HTML DynamiqueL'HTML Dynamique
CGI CGI -- SSI SSI -- ePerl ePerl –– PHP PHP –– JSP JSP -- JavascriptJavascript
Coté serveur– Common Gateway Interface, est un programme qui s'exécute sur le
serveur.– SSI sont des fonctions spécifiques du serveur Apache.– Java Server Pages, en Java
ePerl, PHP sont des modules que l'on installe sur le serveur.ePerl, PHP sont des modules que l'on installe sur le serveur.Le code est interprété par le serveur
ex: affichage personnalisé pour un client, filtrage, connexion à des bases dedonnées ..
Coté clientOn insère des "morceaux de code informatique" dans la page HTML, quila rendent "dynamique". Le code est interprété par le client.Javascript (Netscape), Jscript (Microsoft)
![Page 60: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/60.jpg)
JavascriptJavascript
<script language="javascript"> … </script>
Inclusion des scripts avec l'élément script. Cet élément peut êtreimbriqué dans l'en-tête (<head>) ou dans le corps du document(<body>).(<body>).
Note: lorsqu'un navigateur examine les composants d'unscript, il commence par le début du fichier, il est important de lesdéfinir avant de les utiliser.
![Page 61: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/61.jpg)
Gestionnaires d'événements standardsGestionnaires d'événements standards
Les programmes javascript peuvent être associés à des élémentsde marquage (XHTML) au moyen de gestionnaires d'événements.
Lorsqu'un événement se produit, le script associé est exécuté.
Principaux événements:onclick : déclenché lors d'un clic sur lien http ou bouton formulaireonload : déclenché lorsque le document est chargéonmouseover : déclenché lorsque le pointeur de la souris est placé sur l'imageou le lien hypertexte associéonsubmit: déclenché lorsqu'un formulaire est soumisAussi: onabort, onblur, onchange, ondblclick, onfocus, onkeydown,onkeypress, onkeyup, onmousedown, onmouseout, onreset, onunload
![Page 62: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/62.jpg)
ExemplesExemples
• Javascript: (horloge et document write)• Evénement :(onclick)• Evénement :(onclick)• Script dynamique: (horloge dynamique)
![Page 63: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/63.jpg)
Modèle DOMModèle DOM
• Document Object Model est une norme du W3c.• DOM est un moyen de représenter un document indépendamment
d'un navigateur.• Il permet l'accès à un document au moyen d'objets, de propriétés,• Il permet l'accès à un document au moyen d'objets, de propriétés,
de méthodes, d'événements et de modifier le contenu d'une pageweb de façon dynamique à l'aide de scripts.
• Tout document bien formé (XML, XHTML) peut être représenté sousforme d'arbre par le DOM.
![Page 64: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/64.jpg)
Analyse syntaxique d'un document XHTMLAnalyse syntaxique d'un document XHTML
Le document est lu par un analyseur syntaxique, qui produitune représentation logique du document sous forme d'arbre.
html
Note : L'analyseur syntaxique et validateur sur le site du w3c: validator.w3.org
body head
titlelinkdiv
ph img div
![Page 65: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/65.jpg)
Objets DOMObjets DOM
• Objets DOM de base– Node: chaque nœud possède son propre objet Node– NodeList: cet objet est une liste de tous les objets Node
NameNodeMap: accès aux objets Node par leur nom– NameNodeMap: accès aux objets Node par leur nom
• Objets DOM de niveau élevé – Document: le nœud racine– DocumentType: type ou schéma du document XML– Element: un élément du document– …
![Page 66: Partie1: Le langage HTML · 2013-02-25 · Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes , qui relient votre document à d'autres documents](https://reader030.vdocuments.net/reader030/viewer/2022040923/5e9e0575db1e8a56294beebe/html5/thumbnails/66.jpg)
Propriétés et méthodes DOMPropriétés et méthodes DOM
• getElementById, renvoie la référence à l'élément ( "object")• getElementById + style dynamique• getElementById + style dynamique• getElementsByTagName, par nom de l'élément• Propriétés documentElement de document et tagName d' Element• Navigation sur Node• Création sur Node