Upload
lydiep
View
212
Download
0
Embed Size (px)
Citation preview
Internet et le Web
Technologies du WebIntroduction au World Wide Web et agrave HTML
Pierre Senellart (pierresenellarttelecom-paristechfr)
Mastegravere speacutecialiseacute Management et nouvelles technologies28 septembre 2009
P Senellart (TELECOM ParisTech) Web et HTML 28092009 1 61
Internet et le Web
Plan du cours
1 Internet et le WebGeacuteneacuteraliteacutesClients WebVocabulaire
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 1 61
Internet et le Web Geacuteneacuteraliteacutes
Un reacuteseau de reacuteseaux ordinateurs interconnecteacutes
httpwwwopteorgP Senellart (TELECOM ParisTech) Web et HTML 28092009 2 61
Internet et le Web Geacuteneacuteraliteacutes
La pile de protocoles Internet
Une pile de protocoles de communication lrsquoun au-dessus de lrsquoautreApplication HTTP FTP SMTP DNSTransport TCP UDP ICMP (sessions fiabiliteacute )
Reacuteseau IP (v4 v6) (routage adressage)Lien Ethernet 80211 (ARP) (adressage de machines locales)
Physique Ethernet 80211 (physique)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 3 61
Internet et le Web Geacuteneacuteraliteacutes
IP (Internet Protocol)Adressage de machines et routage sur InternetDeux versions du protocole IP utiliseacutees sur Internet IPv4 (tregravesreacutepandu) et IPv6 (support encore un peu expeacuterimental)IPv4 Adresses de 4 octets affecteacutees agrave chaque ordinateur p ex137194224 Des gammes de telles adresses sont donneacutees auxdiverses institutions (fournisseurs drsquoaccegraves agrave Internet universiteacutes etc)pour les affecter comme elles le souhaitentProblegraveme seulement 232 adresses possibles (en fait un grand nombredrsquoentre elles ne peut pas ecirctre donneacutees agrave de nouveaux hocirctes pourdiverses raisons) Cela signifie que beaucoup de machines connecteacuteesagrave Internet nrsquoont pas drsquoadresse IPv4 et une forme de traductiondrsquoadresse (network address translation NAT) est neacutecessaireIPv6 Adresses de 16 octets espace drsquoadressage beaucoup plusgrand Les adresses ont la forme suivante 2001660330f218 (soit200106600330f00020000000000000018) Chacun des appareilsconnecteacute agrave lrsquoInternet peut avoir sa propre adresse IP
P Senellart (TELECOM ParisTech) Web et HTML 28092009 4 61
Internet et le Web Geacuteneacuteraliteacutes
TCP (Transmission Control Protocol)
Lrsquoun des deux protocoles de transport utiliseacutes sur IP avec UDP (UserDatagram Protocol)Contrairement agrave UDP fournit une transmission fiable des donneacutees(acknowledgments)Les donneacutees sont diviseacutees en petits datagrammes qui sont envoyeacutes surle reacuteseau et eacuteventuellement reacuteordonneacutes agrave destinationComme UDP chaque transmission TCP indique un numeacutero de portsource et destination (entre 0 and 65535) pour la distinguer du restedu traficUn client seacutelectionne usuellement un numeacutero de port aleacuteatoire poureacutetablir une connexion agrave un numeacutero de port fixe du serveurLe numeacutero de port du serveur identifie de maniegravere conventionnelle unprotocole drsquoapplication au-dessus de 22 pour SSH 25 pour SMTP80 pour HTTP 110 pour POP3
P Senellart (TELECOM ParisTech) Web et HTML 28092009 5 61
Internet et le Web Geacuteneacuteraliteacutes
DNS (Domain Name System)Les adresses IPv4 sont difficiles agrave meacutemoriser et un service donneacute(p ex un site Web) peut changer drsquoadresses IP (p ex nouveaufournisseur drsquoaccegraves agrave Internet)Problegraveme accentueacute pour les adresses IPv6 DNS un protocole baseacute sur UDPIP pour associer des noms lisiblespar les humains (p ex wwwgooglecom weatheryahoocom) agravedes adresses IPNoms de domaines hieacuterarchiques com est un domaine de niveauprincipal (top-level domain TLD) yahoocom un sous-domaine decelui-ci etcReacutesolution hieacuterarchique de nom de domaine serveurs racines avec desIP fixes savent qui est responsable des TLDs les serveurs en chargedrsquoun domaine savent qui est responsable drsquoun sous-domaine etcRien de magique dans wwwgooglecom juste un sous-domaine degooglecom
P Senellart (TELECOM ParisTech) Web et HTML 28092009 6 61
Internet et le Web Geacuteneacuteraliteacutes
Geacuteneacuteraliteacutes
Qursquoest-ce que le Web (ou World Wide Web Toile WWW W3) I Systegraveme hypertexte public systegraveme contenant des documents lieacutes
entre eux par des hyperliens permettant de passer automatiquementdrsquoun document agrave lrsquoautre
Diffeacuterence entre le Web et Internet I Internet reacuteseau mondial drsquoordinateurs permettant aux utilisateurs de
communiquer (courrier eacutelectronique) de publier des informations(Web) de transfeacuterer des donneacutees (FTP) de travailler agrave distance (telnetet ssh)
I Web un aspect drsquoInternet
P Senellart (TELECOM ParisTech) Web et HTML 28092009 7 61
Internet et le Web Geacuteneacuteraliteacutes
Architecture client-serveur
Le client (navigateur Internet Explorer Firefox Safari )demande au serveur des informationsaffiche des pages pour lrsquoutilisateur
Le serveur (Apache Microsoft IIS )reccediloit en permanence les requecirctes des clientsrenvoie les documents correspondants
P Senellart (TELECOM ParisTech) Web et HTML 28092009 8 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web
Plan du cours
1 Internet et le WebGeacuteneacuteraliteacutesClients WebVocabulaire
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 1 61
Internet et le Web Geacuteneacuteraliteacutes
Un reacuteseau de reacuteseaux ordinateurs interconnecteacutes
httpwwwopteorgP Senellart (TELECOM ParisTech) Web et HTML 28092009 2 61
Internet et le Web Geacuteneacuteraliteacutes
La pile de protocoles Internet
Une pile de protocoles de communication lrsquoun au-dessus de lrsquoautreApplication HTTP FTP SMTP DNSTransport TCP UDP ICMP (sessions fiabiliteacute )
Reacuteseau IP (v4 v6) (routage adressage)Lien Ethernet 80211 (ARP) (adressage de machines locales)
Physique Ethernet 80211 (physique)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 3 61
Internet et le Web Geacuteneacuteraliteacutes
IP (Internet Protocol)Adressage de machines et routage sur InternetDeux versions du protocole IP utiliseacutees sur Internet IPv4 (tregravesreacutepandu) et IPv6 (support encore un peu expeacuterimental)IPv4 Adresses de 4 octets affecteacutees agrave chaque ordinateur p ex137194224 Des gammes de telles adresses sont donneacutees auxdiverses institutions (fournisseurs drsquoaccegraves agrave Internet universiteacutes etc)pour les affecter comme elles le souhaitentProblegraveme seulement 232 adresses possibles (en fait un grand nombredrsquoentre elles ne peut pas ecirctre donneacutees agrave de nouveaux hocirctes pourdiverses raisons) Cela signifie que beaucoup de machines connecteacuteesagrave Internet nrsquoont pas drsquoadresse IPv4 et une forme de traductiondrsquoadresse (network address translation NAT) est neacutecessaireIPv6 Adresses de 16 octets espace drsquoadressage beaucoup plusgrand Les adresses ont la forme suivante 2001660330f218 (soit200106600330f00020000000000000018) Chacun des appareilsconnecteacute agrave lrsquoInternet peut avoir sa propre adresse IP
P Senellart (TELECOM ParisTech) Web et HTML 28092009 4 61
Internet et le Web Geacuteneacuteraliteacutes
TCP (Transmission Control Protocol)
Lrsquoun des deux protocoles de transport utiliseacutes sur IP avec UDP (UserDatagram Protocol)Contrairement agrave UDP fournit une transmission fiable des donneacutees(acknowledgments)Les donneacutees sont diviseacutees en petits datagrammes qui sont envoyeacutes surle reacuteseau et eacuteventuellement reacuteordonneacutes agrave destinationComme UDP chaque transmission TCP indique un numeacutero de portsource et destination (entre 0 and 65535) pour la distinguer du restedu traficUn client seacutelectionne usuellement un numeacutero de port aleacuteatoire poureacutetablir une connexion agrave un numeacutero de port fixe du serveurLe numeacutero de port du serveur identifie de maniegravere conventionnelle unprotocole drsquoapplication au-dessus de 22 pour SSH 25 pour SMTP80 pour HTTP 110 pour POP3
P Senellart (TELECOM ParisTech) Web et HTML 28092009 5 61
Internet et le Web Geacuteneacuteraliteacutes
DNS (Domain Name System)Les adresses IPv4 sont difficiles agrave meacutemoriser et un service donneacute(p ex un site Web) peut changer drsquoadresses IP (p ex nouveaufournisseur drsquoaccegraves agrave Internet)Problegraveme accentueacute pour les adresses IPv6 DNS un protocole baseacute sur UDPIP pour associer des noms lisiblespar les humains (p ex wwwgooglecom weatheryahoocom) agravedes adresses IPNoms de domaines hieacuterarchiques com est un domaine de niveauprincipal (top-level domain TLD) yahoocom un sous-domaine decelui-ci etcReacutesolution hieacuterarchique de nom de domaine serveurs racines avec desIP fixes savent qui est responsable des TLDs les serveurs en chargedrsquoun domaine savent qui est responsable drsquoun sous-domaine etcRien de magique dans wwwgooglecom juste un sous-domaine degooglecom
P Senellart (TELECOM ParisTech) Web et HTML 28092009 6 61
Internet et le Web Geacuteneacuteraliteacutes
Geacuteneacuteraliteacutes
Qursquoest-ce que le Web (ou World Wide Web Toile WWW W3) I Systegraveme hypertexte public systegraveme contenant des documents lieacutes
entre eux par des hyperliens permettant de passer automatiquementdrsquoun document agrave lrsquoautre
Diffeacuterence entre le Web et Internet I Internet reacuteseau mondial drsquoordinateurs permettant aux utilisateurs de
communiquer (courrier eacutelectronique) de publier des informations(Web) de transfeacuterer des donneacutees (FTP) de travailler agrave distance (telnetet ssh)
I Web un aspect drsquoInternet
P Senellart (TELECOM ParisTech) Web et HTML 28092009 7 61
Internet et le Web Geacuteneacuteraliteacutes
Architecture client-serveur
Le client (navigateur Internet Explorer Firefox Safari )demande au serveur des informationsaffiche des pages pour lrsquoutilisateur
Le serveur (Apache Microsoft IIS )reccediloit en permanence les requecirctes des clientsrenvoie les documents correspondants
P Senellart (TELECOM ParisTech) Web et HTML 28092009 8 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Geacuteneacuteraliteacutes
Un reacuteseau de reacuteseaux ordinateurs interconnecteacutes
httpwwwopteorgP Senellart (TELECOM ParisTech) Web et HTML 28092009 2 61
Internet et le Web Geacuteneacuteraliteacutes
La pile de protocoles Internet
Une pile de protocoles de communication lrsquoun au-dessus de lrsquoautreApplication HTTP FTP SMTP DNSTransport TCP UDP ICMP (sessions fiabiliteacute )
Reacuteseau IP (v4 v6) (routage adressage)Lien Ethernet 80211 (ARP) (adressage de machines locales)
Physique Ethernet 80211 (physique)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 3 61
Internet et le Web Geacuteneacuteraliteacutes
IP (Internet Protocol)Adressage de machines et routage sur InternetDeux versions du protocole IP utiliseacutees sur Internet IPv4 (tregravesreacutepandu) et IPv6 (support encore un peu expeacuterimental)IPv4 Adresses de 4 octets affecteacutees agrave chaque ordinateur p ex137194224 Des gammes de telles adresses sont donneacutees auxdiverses institutions (fournisseurs drsquoaccegraves agrave Internet universiteacutes etc)pour les affecter comme elles le souhaitentProblegraveme seulement 232 adresses possibles (en fait un grand nombredrsquoentre elles ne peut pas ecirctre donneacutees agrave de nouveaux hocirctes pourdiverses raisons) Cela signifie que beaucoup de machines connecteacuteesagrave Internet nrsquoont pas drsquoadresse IPv4 et une forme de traductiondrsquoadresse (network address translation NAT) est neacutecessaireIPv6 Adresses de 16 octets espace drsquoadressage beaucoup plusgrand Les adresses ont la forme suivante 2001660330f218 (soit200106600330f00020000000000000018) Chacun des appareilsconnecteacute agrave lrsquoInternet peut avoir sa propre adresse IP
P Senellart (TELECOM ParisTech) Web et HTML 28092009 4 61
Internet et le Web Geacuteneacuteraliteacutes
TCP (Transmission Control Protocol)
Lrsquoun des deux protocoles de transport utiliseacutes sur IP avec UDP (UserDatagram Protocol)Contrairement agrave UDP fournit une transmission fiable des donneacutees(acknowledgments)Les donneacutees sont diviseacutees en petits datagrammes qui sont envoyeacutes surle reacuteseau et eacuteventuellement reacuteordonneacutes agrave destinationComme UDP chaque transmission TCP indique un numeacutero de portsource et destination (entre 0 and 65535) pour la distinguer du restedu traficUn client seacutelectionne usuellement un numeacutero de port aleacuteatoire poureacutetablir une connexion agrave un numeacutero de port fixe du serveurLe numeacutero de port du serveur identifie de maniegravere conventionnelle unprotocole drsquoapplication au-dessus de 22 pour SSH 25 pour SMTP80 pour HTTP 110 pour POP3
P Senellart (TELECOM ParisTech) Web et HTML 28092009 5 61
Internet et le Web Geacuteneacuteraliteacutes
DNS (Domain Name System)Les adresses IPv4 sont difficiles agrave meacutemoriser et un service donneacute(p ex un site Web) peut changer drsquoadresses IP (p ex nouveaufournisseur drsquoaccegraves agrave Internet)Problegraveme accentueacute pour les adresses IPv6 DNS un protocole baseacute sur UDPIP pour associer des noms lisiblespar les humains (p ex wwwgooglecom weatheryahoocom) agravedes adresses IPNoms de domaines hieacuterarchiques com est un domaine de niveauprincipal (top-level domain TLD) yahoocom un sous-domaine decelui-ci etcReacutesolution hieacuterarchique de nom de domaine serveurs racines avec desIP fixes savent qui est responsable des TLDs les serveurs en chargedrsquoun domaine savent qui est responsable drsquoun sous-domaine etcRien de magique dans wwwgooglecom juste un sous-domaine degooglecom
P Senellart (TELECOM ParisTech) Web et HTML 28092009 6 61
Internet et le Web Geacuteneacuteraliteacutes
Geacuteneacuteraliteacutes
Qursquoest-ce que le Web (ou World Wide Web Toile WWW W3) I Systegraveme hypertexte public systegraveme contenant des documents lieacutes
entre eux par des hyperliens permettant de passer automatiquementdrsquoun document agrave lrsquoautre
Diffeacuterence entre le Web et Internet I Internet reacuteseau mondial drsquoordinateurs permettant aux utilisateurs de
communiquer (courrier eacutelectronique) de publier des informations(Web) de transfeacuterer des donneacutees (FTP) de travailler agrave distance (telnetet ssh)
I Web un aspect drsquoInternet
P Senellart (TELECOM ParisTech) Web et HTML 28092009 7 61
Internet et le Web Geacuteneacuteraliteacutes
Architecture client-serveur
Le client (navigateur Internet Explorer Firefox Safari )demande au serveur des informationsaffiche des pages pour lrsquoutilisateur
Le serveur (Apache Microsoft IIS )reccediloit en permanence les requecirctes des clientsrenvoie les documents correspondants
P Senellart (TELECOM ParisTech) Web et HTML 28092009 8 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Geacuteneacuteraliteacutes
La pile de protocoles Internet
Une pile de protocoles de communication lrsquoun au-dessus de lrsquoautreApplication HTTP FTP SMTP DNSTransport TCP UDP ICMP (sessions fiabiliteacute )
Reacuteseau IP (v4 v6) (routage adressage)Lien Ethernet 80211 (ARP) (adressage de machines locales)
Physique Ethernet 80211 (physique)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 3 61
Internet et le Web Geacuteneacuteraliteacutes
IP (Internet Protocol)Adressage de machines et routage sur InternetDeux versions du protocole IP utiliseacutees sur Internet IPv4 (tregravesreacutepandu) et IPv6 (support encore un peu expeacuterimental)IPv4 Adresses de 4 octets affecteacutees agrave chaque ordinateur p ex137194224 Des gammes de telles adresses sont donneacutees auxdiverses institutions (fournisseurs drsquoaccegraves agrave Internet universiteacutes etc)pour les affecter comme elles le souhaitentProblegraveme seulement 232 adresses possibles (en fait un grand nombredrsquoentre elles ne peut pas ecirctre donneacutees agrave de nouveaux hocirctes pourdiverses raisons) Cela signifie que beaucoup de machines connecteacuteesagrave Internet nrsquoont pas drsquoadresse IPv4 et une forme de traductiondrsquoadresse (network address translation NAT) est neacutecessaireIPv6 Adresses de 16 octets espace drsquoadressage beaucoup plusgrand Les adresses ont la forme suivante 2001660330f218 (soit200106600330f00020000000000000018) Chacun des appareilsconnecteacute agrave lrsquoInternet peut avoir sa propre adresse IP
P Senellart (TELECOM ParisTech) Web et HTML 28092009 4 61
Internet et le Web Geacuteneacuteraliteacutes
TCP (Transmission Control Protocol)
Lrsquoun des deux protocoles de transport utiliseacutes sur IP avec UDP (UserDatagram Protocol)Contrairement agrave UDP fournit une transmission fiable des donneacutees(acknowledgments)Les donneacutees sont diviseacutees en petits datagrammes qui sont envoyeacutes surle reacuteseau et eacuteventuellement reacuteordonneacutes agrave destinationComme UDP chaque transmission TCP indique un numeacutero de portsource et destination (entre 0 and 65535) pour la distinguer du restedu traficUn client seacutelectionne usuellement un numeacutero de port aleacuteatoire poureacutetablir une connexion agrave un numeacutero de port fixe du serveurLe numeacutero de port du serveur identifie de maniegravere conventionnelle unprotocole drsquoapplication au-dessus de 22 pour SSH 25 pour SMTP80 pour HTTP 110 pour POP3
P Senellart (TELECOM ParisTech) Web et HTML 28092009 5 61
Internet et le Web Geacuteneacuteraliteacutes
DNS (Domain Name System)Les adresses IPv4 sont difficiles agrave meacutemoriser et un service donneacute(p ex un site Web) peut changer drsquoadresses IP (p ex nouveaufournisseur drsquoaccegraves agrave Internet)Problegraveme accentueacute pour les adresses IPv6 DNS un protocole baseacute sur UDPIP pour associer des noms lisiblespar les humains (p ex wwwgooglecom weatheryahoocom) agravedes adresses IPNoms de domaines hieacuterarchiques com est un domaine de niveauprincipal (top-level domain TLD) yahoocom un sous-domaine decelui-ci etcReacutesolution hieacuterarchique de nom de domaine serveurs racines avec desIP fixes savent qui est responsable des TLDs les serveurs en chargedrsquoun domaine savent qui est responsable drsquoun sous-domaine etcRien de magique dans wwwgooglecom juste un sous-domaine degooglecom
P Senellart (TELECOM ParisTech) Web et HTML 28092009 6 61
Internet et le Web Geacuteneacuteraliteacutes
Geacuteneacuteraliteacutes
Qursquoest-ce que le Web (ou World Wide Web Toile WWW W3) I Systegraveme hypertexte public systegraveme contenant des documents lieacutes
entre eux par des hyperliens permettant de passer automatiquementdrsquoun document agrave lrsquoautre
Diffeacuterence entre le Web et Internet I Internet reacuteseau mondial drsquoordinateurs permettant aux utilisateurs de
communiquer (courrier eacutelectronique) de publier des informations(Web) de transfeacuterer des donneacutees (FTP) de travailler agrave distance (telnetet ssh)
I Web un aspect drsquoInternet
P Senellart (TELECOM ParisTech) Web et HTML 28092009 7 61
Internet et le Web Geacuteneacuteraliteacutes
Architecture client-serveur
Le client (navigateur Internet Explorer Firefox Safari )demande au serveur des informationsaffiche des pages pour lrsquoutilisateur
Le serveur (Apache Microsoft IIS )reccediloit en permanence les requecirctes des clientsrenvoie les documents correspondants
P Senellart (TELECOM ParisTech) Web et HTML 28092009 8 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Geacuteneacuteraliteacutes
IP (Internet Protocol)Adressage de machines et routage sur InternetDeux versions du protocole IP utiliseacutees sur Internet IPv4 (tregravesreacutepandu) et IPv6 (support encore un peu expeacuterimental)IPv4 Adresses de 4 octets affecteacutees agrave chaque ordinateur p ex137194224 Des gammes de telles adresses sont donneacutees auxdiverses institutions (fournisseurs drsquoaccegraves agrave Internet universiteacutes etc)pour les affecter comme elles le souhaitentProblegraveme seulement 232 adresses possibles (en fait un grand nombredrsquoentre elles ne peut pas ecirctre donneacutees agrave de nouveaux hocirctes pourdiverses raisons) Cela signifie que beaucoup de machines connecteacuteesagrave Internet nrsquoont pas drsquoadresse IPv4 et une forme de traductiondrsquoadresse (network address translation NAT) est neacutecessaireIPv6 Adresses de 16 octets espace drsquoadressage beaucoup plusgrand Les adresses ont la forme suivante 2001660330f218 (soit200106600330f00020000000000000018) Chacun des appareilsconnecteacute agrave lrsquoInternet peut avoir sa propre adresse IP
P Senellart (TELECOM ParisTech) Web et HTML 28092009 4 61
Internet et le Web Geacuteneacuteraliteacutes
TCP (Transmission Control Protocol)
Lrsquoun des deux protocoles de transport utiliseacutes sur IP avec UDP (UserDatagram Protocol)Contrairement agrave UDP fournit une transmission fiable des donneacutees(acknowledgments)Les donneacutees sont diviseacutees en petits datagrammes qui sont envoyeacutes surle reacuteseau et eacuteventuellement reacuteordonneacutes agrave destinationComme UDP chaque transmission TCP indique un numeacutero de portsource et destination (entre 0 and 65535) pour la distinguer du restedu traficUn client seacutelectionne usuellement un numeacutero de port aleacuteatoire poureacutetablir une connexion agrave un numeacutero de port fixe du serveurLe numeacutero de port du serveur identifie de maniegravere conventionnelle unprotocole drsquoapplication au-dessus de 22 pour SSH 25 pour SMTP80 pour HTTP 110 pour POP3
P Senellart (TELECOM ParisTech) Web et HTML 28092009 5 61
Internet et le Web Geacuteneacuteraliteacutes
DNS (Domain Name System)Les adresses IPv4 sont difficiles agrave meacutemoriser et un service donneacute(p ex un site Web) peut changer drsquoadresses IP (p ex nouveaufournisseur drsquoaccegraves agrave Internet)Problegraveme accentueacute pour les adresses IPv6 DNS un protocole baseacute sur UDPIP pour associer des noms lisiblespar les humains (p ex wwwgooglecom weatheryahoocom) agravedes adresses IPNoms de domaines hieacuterarchiques com est un domaine de niveauprincipal (top-level domain TLD) yahoocom un sous-domaine decelui-ci etcReacutesolution hieacuterarchique de nom de domaine serveurs racines avec desIP fixes savent qui est responsable des TLDs les serveurs en chargedrsquoun domaine savent qui est responsable drsquoun sous-domaine etcRien de magique dans wwwgooglecom juste un sous-domaine degooglecom
P Senellart (TELECOM ParisTech) Web et HTML 28092009 6 61
Internet et le Web Geacuteneacuteraliteacutes
Geacuteneacuteraliteacutes
Qursquoest-ce que le Web (ou World Wide Web Toile WWW W3) I Systegraveme hypertexte public systegraveme contenant des documents lieacutes
entre eux par des hyperliens permettant de passer automatiquementdrsquoun document agrave lrsquoautre
Diffeacuterence entre le Web et Internet I Internet reacuteseau mondial drsquoordinateurs permettant aux utilisateurs de
communiquer (courrier eacutelectronique) de publier des informations(Web) de transfeacuterer des donneacutees (FTP) de travailler agrave distance (telnetet ssh)
I Web un aspect drsquoInternet
P Senellart (TELECOM ParisTech) Web et HTML 28092009 7 61
Internet et le Web Geacuteneacuteraliteacutes
Architecture client-serveur
Le client (navigateur Internet Explorer Firefox Safari )demande au serveur des informationsaffiche des pages pour lrsquoutilisateur
Le serveur (Apache Microsoft IIS )reccediloit en permanence les requecirctes des clientsrenvoie les documents correspondants
P Senellart (TELECOM ParisTech) Web et HTML 28092009 8 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Geacuteneacuteraliteacutes
TCP (Transmission Control Protocol)
Lrsquoun des deux protocoles de transport utiliseacutes sur IP avec UDP (UserDatagram Protocol)Contrairement agrave UDP fournit une transmission fiable des donneacutees(acknowledgments)Les donneacutees sont diviseacutees en petits datagrammes qui sont envoyeacutes surle reacuteseau et eacuteventuellement reacuteordonneacutes agrave destinationComme UDP chaque transmission TCP indique un numeacutero de portsource et destination (entre 0 and 65535) pour la distinguer du restedu traficUn client seacutelectionne usuellement un numeacutero de port aleacuteatoire poureacutetablir une connexion agrave un numeacutero de port fixe du serveurLe numeacutero de port du serveur identifie de maniegravere conventionnelle unprotocole drsquoapplication au-dessus de 22 pour SSH 25 pour SMTP80 pour HTTP 110 pour POP3
P Senellart (TELECOM ParisTech) Web et HTML 28092009 5 61
Internet et le Web Geacuteneacuteraliteacutes
DNS (Domain Name System)Les adresses IPv4 sont difficiles agrave meacutemoriser et un service donneacute(p ex un site Web) peut changer drsquoadresses IP (p ex nouveaufournisseur drsquoaccegraves agrave Internet)Problegraveme accentueacute pour les adresses IPv6 DNS un protocole baseacute sur UDPIP pour associer des noms lisiblespar les humains (p ex wwwgooglecom weatheryahoocom) agravedes adresses IPNoms de domaines hieacuterarchiques com est un domaine de niveauprincipal (top-level domain TLD) yahoocom un sous-domaine decelui-ci etcReacutesolution hieacuterarchique de nom de domaine serveurs racines avec desIP fixes savent qui est responsable des TLDs les serveurs en chargedrsquoun domaine savent qui est responsable drsquoun sous-domaine etcRien de magique dans wwwgooglecom juste un sous-domaine degooglecom
P Senellart (TELECOM ParisTech) Web et HTML 28092009 6 61
Internet et le Web Geacuteneacuteraliteacutes
Geacuteneacuteraliteacutes
Qursquoest-ce que le Web (ou World Wide Web Toile WWW W3) I Systegraveme hypertexte public systegraveme contenant des documents lieacutes
entre eux par des hyperliens permettant de passer automatiquementdrsquoun document agrave lrsquoautre
Diffeacuterence entre le Web et Internet I Internet reacuteseau mondial drsquoordinateurs permettant aux utilisateurs de
communiquer (courrier eacutelectronique) de publier des informations(Web) de transfeacuterer des donneacutees (FTP) de travailler agrave distance (telnetet ssh)
I Web un aspect drsquoInternet
P Senellart (TELECOM ParisTech) Web et HTML 28092009 7 61
Internet et le Web Geacuteneacuteraliteacutes
Architecture client-serveur
Le client (navigateur Internet Explorer Firefox Safari )demande au serveur des informationsaffiche des pages pour lrsquoutilisateur
Le serveur (Apache Microsoft IIS )reccediloit en permanence les requecirctes des clientsrenvoie les documents correspondants
P Senellart (TELECOM ParisTech) Web et HTML 28092009 8 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Geacuteneacuteraliteacutes
DNS (Domain Name System)Les adresses IPv4 sont difficiles agrave meacutemoriser et un service donneacute(p ex un site Web) peut changer drsquoadresses IP (p ex nouveaufournisseur drsquoaccegraves agrave Internet)Problegraveme accentueacute pour les adresses IPv6 DNS un protocole baseacute sur UDPIP pour associer des noms lisiblespar les humains (p ex wwwgooglecom weatheryahoocom) agravedes adresses IPNoms de domaines hieacuterarchiques com est un domaine de niveauprincipal (top-level domain TLD) yahoocom un sous-domaine decelui-ci etcReacutesolution hieacuterarchique de nom de domaine serveurs racines avec desIP fixes savent qui est responsable des TLDs les serveurs en chargedrsquoun domaine savent qui est responsable drsquoun sous-domaine etcRien de magique dans wwwgooglecom juste un sous-domaine degooglecom
P Senellart (TELECOM ParisTech) Web et HTML 28092009 6 61
Internet et le Web Geacuteneacuteraliteacutes
Geacuteneacuteraliteacutes
Qursquoest-ce que le Web (ou World Wide Web Toile WWW W3) I Systegraveme hypertexte public systegraveme contenant des documents lieacutes
entre eux par des hyperliens permettant de passer automatiquementdrsquoun document agrave lrsquoautre
Diffeacuterence entre le Web et Internet I Internet reacuteseau mondial drsquoordinateurs permettant aux utilisateurs de
communiquer (courrier eacutelectronique) de publier des informations(Web) de transfeacuterer des donneacutees (FTP) de travailler agrave distance (telnetet ssh)
I Web un aspect drsquoInternet
P Senellart (TELECOM ParisTech) Web et HTML 28092009 7 61
Internet et le Web Geacuteneacuteraliteacutes
Architecture client-serveur
Le client (navigateur Internet Explorer Firefox Safari )demande au serveur des informationsaffiche des pages pour lrsquoutilisateur
Le serveur (Apache Microsoft IIS )reccediloit en permanence les requecirctes des clientsrenvoie les documents correspondants
P Senellart (TELECOM ParisTech) Web et HTML 28092009 8 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Geacuteneacuteraliteacutes
Geacuteneacuteraliteacutes
Qursquoest-ce que le Web (ou World Wide Web Toile WWW W3) I Systegraveme hypertexte public systegraveme contenant des documents lieacutes
entre eux par des hyperliens permettant de passer automatiquementdrsquoun document agrave lrsquoautre
Diffeacuterence entre le Web et Internet I Internet reacuteseau mondial drsquoordinateurs permettant aux utilisateurs de
communiquer (courrier eacutelectronique) de publier des informations(Web) de transfeacuterer des donneacutees (FTP) de travailler agrave distance (telnetet ssh)
I Web un aspect drsquoInternet
P Senellart (TELECOM ParisTech) Web et HTML 28092009 7 61
Internet et le Web Geacuteneacuteraliteacutes
Architecture client-serveur
Le client (navigateur Internet Explorer Firefox Safari )demande au serveur des informationsaffiche des pages pour lrsquoutilisateur
Le serveur (Apache Microsoft IIS )reccediloit en permanence les requecirctes des clientsrenvoie les documents correspondants
P Senellart (TELECOM ParisTech) Web et HTML 28092009 8 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Geacuteneacuteraliteacutes
Architecture client-serveur
Le client (navigateur Internet Explorer Firefox Safari )demande au serveur des informationsaffiche des pages pour lrsquoutilisateur
Le serveur (Apache Microsoft IIS )reccediloit en permanence les requecirctes des clientsrenvoie les documents correspondants
P Senellart (TELECOM ParisTech) Web et HTML 28092009 8 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Geacuteneacuteraliteacutes
HTTP
Protocole Ensemble normaliseacute de regravegles deacutecrivant la maniegravere detransmettre des informations par exemple sur un reacuteseaucomme Internet entre un client et un serveur
HTTP HyperText Transfer Protocol le plus utiliseacute des protocolesde communication sur le World Wide Web Permet agrave unclient Web drsquoindiquer quelle page il veut obtenir et auserveur Web de lui reacutepondre en lui donnant cette page
P Senellart (TELECOM ParisTech) Web et HTML 28092009 9 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Geacuteneacuteraliteacutes
URL
URL Uniform Resource LocatorIdentifie lrsquoendroit ougrave se trouve une ressource sur le WebDans le cas du Web ressource = document ou fragment
httplea-linuxorg 80reseausecufirewallhtml introprotocole machine port reacutepertoire fichier fragment
Principaux protocoles utiliseacutes dans les URL http https deux protocoles du Web sans et avec chiffrement et
authentification ftp protocole de transfert de fichier parfois utiliseacute sur le
Web pour le teacuteleacutechargement de gros fichiers mailto pseudo-protocole deacutenotant une adresse e-mail
Port par deacutefaut 80 pour HTTP 443 pour HTTPS
P Senellart (TELECOM ParisTech) Web et HTML 28092009 10 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Clients Web
Clients Web
Navigateurs graphiques (cf transparent suivant)Navigateurs textuels w3m lynx links (libres Windows Mac OSLinux Unix) leur usage nrsquoest guegravere plus reacutepandu mais ils simulentassez bien ce que laquo voit raquo un robot ou un navigateur auditifAutres navigateurs navigateurs auditifs etcMais aussi robots des moteurs de recherche logiciels de traductionautomatique
Une tregraves grande varieacuteteacute de clients En theacuteorie tout site Web doit ecirctretesteacute avec la plupart de ceux-ci (et au moins les plus reacutepandus) dans leursdiffeacuterentes versions
P Senellart (TELECOM ParisTech) Web et HTML 28092009 11 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Clients Web
Navigateurs graphiquesNavigateur Moteur Part DistributionInternet Explorer Trident 65 distribueacute avec WindowsFirefox Gecko 25 libre Windows Mac OS Linux UnixSafari WebKit 5 distribueacute avec Mac OSGoogle Chrome WebKit 2 libre WindowsOpera Presto 2 gratuit Windows Mac OS Linux mobilesNetscape Gecko lt1 gratuit Windows Linux Mac OSKonqueror KHTML lt1 libre Linux Mac OS UnixCamino Gecko lt1 libre Linux Mac OS Unix
Parts de marcheacute diverses sources chiffres preacutecis difficiles agrave obtenir Firefox estbeaucoup plus reacutepandu en Europe (sim 30-35) qursquoaux Eacutetats-UnisInternet Explorer dominant mais en baisse assez nette depuisquelques anneacutees
Moteurs de rendus Trident est (traditionnellement) le moteur supportant le
moins bien les standards du Web En eacutevolutionWebKit et KHTML ont beaucoup en commun puisque WebKit
est issu drsquoun fork de KHTMLP Senellart (TELECOM ParisTech) Web et HTML 28092009 12 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Clients Web
Actualiteacute des navigateurs graphiques
Sortie reacutecente de Firefox 35 (juin 2009) et drsquoInternet Explorer 8(mars 2009)Internet Explorer 6 7 et 8 utiliseacutes agrave peu pregraves agrave eacutegaliteacute (IE6 tregravescourant en entreprise) Firefox 30 est encore devant Firefox 35 maisles versions anteacuterieures sont neacutegligeablesGoogle Chrome a a peine un an et a deacutejagrave une part de marcheacute nonneacutegligeable Des versions Linux et Mac OS sont annonceacutees endeacuteveloppement
P Senellart (TELECOM ParisTech) Web et HTML 28092009 13 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Internet et le Web Vocabulaire
Vocabulaire
serveur Web soit le logiciel qui reacutepond aux requecirctes drsquoun client soit lamachine sur lequel fonctionne ce serveur
site Web ensemble de pages Web et drsquoeacuteventuelles autres ressourceslieacutees dans une structure coheacuterente publieacutees par unproprieacutetaire (une entreprise une administration uneassociation un particulier etc) et heacutebergeacutees sur un ouplusieurs serveurs Web
heacutebergeur Web entreprise de services informatiques heacutebergeant (mettanten ligne) sur ses serveurs Web les ressources constituant lessites Web de ses clients
P Senellart (TELECOM ParisTech) Web et HTML 28092009 14 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML
Plan du cours
1 Internet et le Web
2 Le langage HTMLPreacutesentation geacuteneacuteraleLe corps drsquoun document
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 15 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Preacutesentation geacuteneacuterale
HyperText Markup Language
normaliseacute par le W3C (World Wide Web Consortium) regroupantindustriels (Microsoft Google Apple ) et acadeacutemiques (INRIAMIT )format ouvert lecture possible dans des conditions correctes sanscontrainte mateacuterielle ou logicielleun fichier texte avec des balisesdescription de la structure et du contenu drsquoun document accent surlrsquoaccessibiliteacuteon ne deacutecrit pas la preacutesentation (ce sera le rocircle de CSS)on ne deacutecrit pas de comportement dynamique (ce sera le rocircle deJavaScript et des langages cocircteacute serveur)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 16 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Preacutesentation geacuteneacuterale
HTML est un langage qui alterne texte et balises ( ltblablagt oultblablagt )
I Les balises permettent de structurer chaque partie du document etservent par exemple au navigateur pour reacutealiser la mise en page dudocument
Les fichiers HTMLI sont structureacutes en deux parties principales lrsquoen-tecircte
ltheadgt ltheadgt ) et le corps ltbodygt ltbodygt )En HTML les blancs (espace tabulations retours agrave la ligne) sont engeacuteneacuteral eacutequivalents et servent juste agrave deacutelimiter mots balises Leurnombre nrsquoa pas drsquoimportance
P Senellart (TELECOM ParisTech) Web et HTML 28092009 17 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Leur syntaxe est (balises ouvrante et fermante)ltbalise attributsgtcontenultbalisegt
ou (balise sans contenu)ltbalise attributsgt
balise mot cleacute deacutesignant un eacuteleacutement particuliercontenu peut contenir du texte ou drsquoautres balisesattributs repreacutesente les diffeacuterents paramegravetres associeacutes agrave lrsquoeacuteleacutement
sous la forme drsquoune liste de nom=valeur ounom=rsquovaleurrsquo seacutepareacutes par des espaces (les guillemetsne sont pas toujours indispensables mais elles ledeviennent degraves que valeur contient des caractegraveresexotiques)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 18 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises
Les noms des eacuteleacutements et des attributs sont souvent eacutecrits enminuscule mais ltheadgt et ltHeAdgt sont eacutequivalentsLes balises sont ouvertes et refermeacutees dans lrsquoordre ( ltbgtltigtltigtltbgtet non ltbgtltigtltbgtltigt )Des regravegles strictes deacuteterminent quelles balises peuvent ecirctre mises agravelrsquointeacuterieur de quelles balisesSous certaines conditions une balise peut ecirctre implicitementrefermeacutee mais ces conditions sont assez complexes agrave deacutecrirelt--zut--gt deacutenote un commentaire qui ne sera ni afficheacute niinterpreacuteteacute par le client Web (utile pour documenter une partie drsquounepage Web)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 19 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Preacutesentation geacuteneacuterale
Balises exemples
Exempleslttitlegtcoucoulttitlegt pour attribuer le titre coucou au documentltemgtcuicuiltemgt pour mettre en emphase le texte cuicui (cela serarendu le plus souvent par une mise en italique)ltstronggtcuicuiltstronggt pour indiquer que le texte cuicui estimportant (cela sera rendu le plus souvent par une mise en gras)
Contre-exempleltstronggtltemgtbouhltstronggtltemgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 20 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Preacutesentation geacuteneacuterale
Structure drsquoun document
ltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
lthtml lang=frgtltheadgt
lt-- En-tecircte du document --gtltheadgtltbodygt
lt-- Corps du document --gtltbodygt
lthtmlgt
La deacuteclaration ltDOCTYPE gt preacutecise la version drsquoHTML utiliseacuteeLa langue du document est preacuteciseacutee avec lrsquoattribut lang de la baliseprincipale lthtmlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 21 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Preacutesentation geacuteneacuterale
En-tecircte
Lrsquoen-tecircte du document est deacutelimiteacutee par les balisesltheadgt ltheadgt Lrsquoen-tecircte contient des meacuteta-informations concernant le documenttelles que son titre son encodage les fichiers annexes etc Les deuxinformations les plus importantes sont
I Le jeu de caractegraveres de la page agrave mettre tout au deacutebut de lrsquoen-tecircte
ltmeta http-equiv=Content-Typecontent=texthtml charset=utf-8gt
I Le titre de la page (la seule information obligatoire agrave preacuteciser) celui-cisera par exemple afficheacute dans la barre de titre du navigateur ilnrsquoapparaicirct pas dans la page elle-mecircme
lttitlegtMon super sitelttitlegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 22 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Preacutesentation geacuteneacuterale
Jeux de caractegraveresUnicode reacutepertoire de caractegraveres assignant agrave chaque caractegravere de
quelque langue que ce soit un nombre entier
ExemplesA rarr 65 ε rarr 949eacute rarr 233 alefsym rarr 1488
Jeu de caractegraveres moyen de repreacutesenter concregravetement par une suite de 0ou de 1 un caractegravere Unicode
Exemples (eacute)iso-8859-1 11101001 Seulement pour certains caractegraveresutf-8 11000011 10101001utf-16 11101001 00000000
utf-8 preacutesente lrsquoavantage de pouvoir repreacutesenter tous les caractegraveresdrsquoUnicode de maniegravere compatible avec lrsquoancien encodage ASCIIP Senellart (TELECOM ParisTech) Web et HTML 28092009 23 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Le corps drsquoun document
Les balises ltbodygt ltbodygt deacutelimitent le corps du documentLe corps est structureacute en sections paragraphes listes etcIl existe 6 balises permettant de repreacutesenter les titres de sections parimportance deacutecroissante
I lth1gtTitre de la pagelth1gtI lth2gtTitre de section principalelth2gtI lth3gtTitre de sous-sectionlth3gtI lth3gtTitre de sous-sous-sectionlth3gtI
Les balises ltpgt ltpgt permet de deacutelimiter un paragraphe Tousles paragraphes de texte doivent ecirctre baliseacutes ainsiLa balise lthrgt (horizontal rule) indique une seacuteparation majeure dansle document (rendue par exemple graphiquement par une lignehorizontale)Directement agrave lrsquointeacuterieur de ltbodygt ltbodygt nrsquoapparaissent quedes balises de bloc ltpgt lth1gt ltformgt lthrgt ltulgt lttablegt
ainsi que la balise ltdivgt qui deacutenote un bloc sans seacutemantiqueparticuliegravere
P Senellart (TELECOM ParisTech) Web et HTML 28092009 24 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Le corps drsquoun document
Listes
XTHML possegravede plusieurs balises permettant de preacutesenter le textesous forme de listesOn en distingue trois types
I les listes non numeacuteroteacutees
1 les listes numeacuteroteacutees
les listes de deacutefinitions (ou lexiques)Ces listes peuvent ecirctre emboicircteacutees les unes agrave lrsquointeacuterieur des autres
P Senellart (TELECOM ParisTech) Web et HTML 28092009 25 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Le corps drsquoun document
Les listes classiques I Les listes non numeacuteroteacutees deacutelimiteacutees par les balises ltulgt ltulgt
(unordered list)I Les listes numeacuteroteacutees deacutelimiteacutees par les balises ltolgt ltolgt
(ordered list)I Tous les eacuteleacutements drsquoune liste numeacuteroteacutee ou non sont deacutelimiteacutes par les
balises ltligt ltligt (list item)
Les lexiques sont deacutelimiteacutes par les balises ltdlgt ltdlgt (definitionlist) et leurs entreacutees par les balises ltdtgt ltdtgt (term) etltddgt ltddgt (definition)
Exemples
ltolgt ltligtunltligt ltligtdeuxltligt ltolgt
ltdlgt ltdtgtlapinltdtgt ltddgtrongeur agrave oreillesltddgt ltdlgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 26 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Le corps drsquoun document
Tableaux
Les tableaux sont deacutelimiteacutes par les balises lttablegt lttablegt Les balises lttrgt lttrgt (table row) deacutelimitent les lignesLes balises lttdgt lttdgt (table data) deacutelimitent les cellulesAttention On deacuteclare les lignes agrave lrsquointeacuterieur du tableau les cellules agravelrsquointeacuterieur des lignes
Exemple
lttablegtlttrgt lttdgt l1 c1 lttdgt lttdgt l1 c2 lttdgt lttrgtlttrgt lttdgt l2 c1 lttdgt lttdgt l2 c2 lttdgt lttrgt
lttablegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 27 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Le corps drsquoun document
Ajouter de la structure agrave un tableau en donnant une leacutegende au tableau avec les balisesltcaptiongt ltcaptiongt juste apregraves la balise ouvrante lttablegt
remplaccedilant les lttdgt lttdgt qui contiennent des en-tecirctes (deligne de colonne) par des ltthgt ltthgt (table header)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 28 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Le corps drsquoun document
ImagesPour inseacuterer une image dans un document HTML on utilise la baliseltimggt
I Lrsquoattribut src permet de preacuteciser ougrave se trouve lrsquoimageI Lrsquoattribut alt permet de remplacer lrsquoimage par un texte quand elle
nrsquoest pas disponible Il est obligatoire de lrsquoutiliser pour que tout agent(malvoyants navigateur texte incidents techniques robots) nepouvant voir votre image puisse avoir un texte alternatif
ltimg src=httpwwwlrifrimageslripng alt=LRIgtltimg src=imagesmontblancpng alt=Mont Blancgt
Les formats drsquoimages utilisables pour le Web sont I Le JPEG (jpg) un format adapteacute aux photosI Le GIF (gif) et le PNG (png) des formats adapteacutes aux autres types
drsquoimage le PNG est agrave preacutefeacuterer dans tous les cas (transparenceprofondeur de couleurs ) sauf besoin drsquoimages animeacutees (agrave utiliseravec parcimonie )
P Senellart (TELECOM ParisTech) Web et HTML 28092009 29 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Le corps drsquoun document
Liens
Ce qui diffeacuterencie une page Web (page HyperTexte) drsquoun banaldocument ce sont les liens Ils sont introduits par la balise ltagt ltagt (cette balise est unebalise en ligne il faut la placer agrave lrsquointeacuterieur drsquoun bloc)En cliquant sur un lien on peut se deacuteplacer vers
I un autre serveur ou un fichier du mecircme serveurI une autre partie du mecircme document
P Senellart (TELECOM ParisTech) Web et HTML 28092009 30 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Le corps drsquoun document
Pour faire un lien on utilise lrsquoattribut href de la balise ltagt dont lecontenu formera le lien lta href=httpwwwcnrsfrgt
ltimg src=imagescnrsgif alt=CNRSgtltagt
lta href=bioindexbioinfohtmlgtBioinformatiqueltagt
Les ancres servent agrave atteindre un endroit preacutecis dans le documentI On commence par deacutefinir les ancres soit sur une balise existant deacutejagrave
gracircce agrave lrsquoattribut id soit avec un lta id=gt
lth3 id=tutorialsgtTutorialslth3gtlta id=tutorialsgt
I Ensuite on fait le lien avec cette ancre
lta href=tutorialsgttutorialsltagtlta href=httpwwww3orgtutorialsgttutorialsltagt
I On voit parfois lrsquoancienne syntaxe lta name=gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 31 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Le langage HTML Le corps drsquoun document
Et aussi
De nombreuses autres balises en ligne ltabbrgt ltcitegt ltvargt Quelques autres balises blocs ltblockquotegt ltaddress Repreacutesentation des caractegraveres speacuteciaux (ex laquo eacute raquo)
I directement dans le codage du document (utf-8 de preacutefeacuterence pourrepreacutesenter tous les caractegraveres possibles) agrave privileacutegier
I par leur code en deacutecimal (amp233) ou en hexadeacutecimal (ampxE9) I par des entiteacutes caractegraveres nommeacutees (ampeacute)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 32 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTMLGeacuteneacuteraliteacutesLes champs de saisie
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 33 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Geacuteneacuteraliteacutes
Formulaires
Permettent drsquointeragir avec lrsquoutilisateur en lui proposant drsquoentrer desinformationsEn HTML uniquement lrsquointerface de formulaireLrsquoessentiel du travail sera fait par le script qui traitera la soumissiondu formulaire
P Senellart (TELECOM ParisTech) Web et HTML 28092009 34 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Geacuteneacuteraliteacutes
Balise ltformgt
Un formulaire HTML est placeacute agrave lrsquointeacuterieur drsquoune balise ltformgt Celle-ci prend les attributs suivants
action URL du script auquel sera soumis le formulairemethod Meacutethode HTTP valant soit get soit post enctype Encodage HTTP Peut valoir
applicationx-www-form-urlencoded (valeur pardeacutefaut) ou multipartform-data
Example (Formulaire eacuteleacutementaire)
ltform action=actionphp method=getgtltdivgtltinput type=submitgtltdivgt
ltformgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 35 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Geacuteneacuteraliteacutes
Ensembles de champEn HTML il est interdit de mettre des champs de formulaire directementagrave lrsquointeacuterieur drsquoun ltformgt Il faut drsquoabord les regrouper
Dans des paragraphes ltpgt si les champs de formulaires sont agravelrsquointeacuterieur de paragraphes de textes (rare)Dans des ensembles de champ ltfieldsetgt pour regrouper deschamps de formulaire de seacutemantique proche On pourra alors donnerune leacutegende agrave lrsquoensemble de champs avec la balise ltlegendgt Dans des divisions ltdivgt sans contenu seacutemantique sinon
Exemple (Ensemble de champ)
ltfieldsetgtltlegendgtMensurationsltlegendgtltinput type=text name=taillegtltinput type=text name=poidsgt
ltfieldsetgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 36 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Geacuteneacuteraliteacutes
Eacutetiquettes
La plupart des champs sont naturellement accompagneacutes drsquouneeacutetiquette ( ltlabelgt )On peut la placer ougrave on veut en geacuteneacuteral juste agrave gauche ou agrave droitedu champSon attribut for reacutefeacuterence lrsquoattribut id du champ correspondantDans les navigateurs graphiques un clic sur lrsquoeacutetiquette drsquoun champpermet en geacuteneacuteral de seacutelectionner le champ
Example (Eacutetiquette)
ltlabel for=taillegtTaille ltlabelgtltinput type=text name=taille id=taillegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 37 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Champs de saisie
La balise ltinputgt a une utilisation tregraves vaste dans les formulairesElle repreacutesente un champ de saisieLrsquoattribut type deacutetermine le type (texte mot de passe liste etc) duchampLrsquoattribut name (nom du paramegravetre de la requecircte HTTP) estobligatoire (sauf pour les types reset et submit ) il permet depreacuteciser au serveur agrave quelle saisie on fait reacutefeacuterence
Exemple (Zone de texte pour eacutecrire un commentaire)
ltinput type=text name=Commentairegt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 38 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Saisie drsquoune ligne de texte
type =text est utiliseacute pour la saisie drsquoun texte dont la taille estinfeacuterieure agrave une ligneLrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=text name=prenom value=Jordy maxlength=50gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 39 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Saisie drsquoun mot de passe
type =password est utiliseacute pour la saisie drsquoun texte dont lescaractegraveres sont remplaceacutes par des asteacuterisques crsquoest geacuteneacuteralementutiliseacute pour la saisie des mots de passe Le mot de passe est quandmecircme transmis en clair au serveur Lrsquoattribut value permet de preacuteciser la valeur par deacutefaut (facultatif)La taille maximale de la chaicircne de caractegraveres agrave saisir peut ecirctrespeacutecifieacutee agrave lrsquoaide de lrsquoattribut maxlength (facultatif)
Exemple
ltinput type=password name=pwd value=12345678gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 40 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Choix multiples parmi une listetype =checkbox permet de choisir plusieurs eacuteleacutements parmi uneliste de possibiliteacutesCela se mateacuterialise sous forme de cases agrave cocherLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de cocher la case par deacutefautCertains langages cocircteacute serveurs imposent que les noms de champs deformulaire agrave choix multiples se terminent par []
Exemple
ltinput type=checkbox name=pub[] value=sitechecked=checked id=pub-sitegt
ltlabel for=pub-sitegtRecevoir des offres de notre siteltlabelgt
ltinput type=checkbox name=pub[] checked=checkedvalue=externe id=pub-externegt
ltlabel for=pub-externegtRecevoir des offres externesltlabelgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 41 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Choix unique parmi une listetype =radio permet de choisir un seul eacuteleacutement parmi une liste depossibiliteacutesCela se mateacuterialise sous forme de boutons radioLa valeur retourneacutee est obligatoirement preacuteciseacutee agrave lrsquoaide de lrsquoattributvalue Lrsquoattribut checked =checked permet de preacuteciser la valeur pardeacutefaut
Exemple
Recevoir de la publtinput type=radio name=pub value=oui id=pub-oui
checked=checkedgtltlabel for=pub-ouigtouiltlabelgt
ltinput type=radio name=pub value=non id=pub-nongtltlabel for=pub-nongtnonltlabelgt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 42 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Fichiers joints
type =file permet de joindre au formulaire un fichierAgrave cause de la taille de la requecircte due au teacuteleacutechargement (upload) dufichier il faut impeacuterativement utiliser la meacutethode POST et lrsquoencodagemultipartform-data
Exemple
ltlabel for=fichiergtFichierltlabelgtltinput type=file name=fichier id=fichiergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 43 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Champs cacheacutes
type =hidden permet de cacher des champs au client mais leurcontenu est envoyeacute avec le formulaireCeci permet de preacuteciser des informations en utilisant lrsquoattributvalue concernant lrsquointeraction clientserveurCrsquoest agrave utiliser avec preacutecaution car cela peut ecirctre agrave lrsquoorigine deproblegravemes de seacutecuriteacute assez graves ne pas oublier que le client peuteacutediter la page agrave la main pour changer la valeur de ces champs
Exemple
ltinput type=hidden name=monnaie_utilisee value=EURgtltinput type=hidden name=customerCB value=c2415-345-8563gt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 44 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Reacute-initialisation drsquoun formulaire
type =reset permet de reacuteinitialiser le formulaire en affectant auxdiffeacuterents champs leur valeur par deacutefautLrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=reset value=Tout effacergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 45 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Soumettre le formulaire
type =submit permet de soumettre le formulaireLe client envoie le contenu du formulaire agrave lrsquoadresse preacuteciseacutee parlrsquoattribut action de la balise ltformgt Lrsquoattribut value permet de changer le texte du boutoncorrespondant
Exemple
ltinput type=submit value=Envoyergt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 46 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Saisie de plusieurs lignes de texte
Pour les saisies multiligne on utilise la balise lttextareagt Le texte deacutelimiteacute par cette balise permet drsquoinitialiser la valeur pardeacutefaut du champLa balise fermante est obligatoire mecircme si le champ est videLes attributs rows et cols (obligatoires) permettent de speacutecifier lataille en lignes et colonnes de la fenecirctre de saisie
Exemple
lttextarea name=bio cols=40 rows=5gtFille de Josiane BalaskoMarilou Berry fait ses premiers pas au cineacutema agrave 8 ans
lttextareagt
P Senellart (TELECOM ParisTech) Web et HTML 28092009 47 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Formulaires HTML Les champs de saisie
Menus de seacutelectionLa balise ltselectgt permet drsquoajouter une liste de seacutelection
I Lrsquoattribut facultatif size permet de preacuteciser le nombre de choixapparaissant sur la page Web Par deacutefaut ce nombre est initialiseacute agrave 1
I Lrsquoattribut multiple =multiple permet drsquoautoriser des reacuteponsesmultiples Dans ce cas pour PHP on donnera toujours un nom seterminant par []
Les choix du menu sont indiqueacutes agrave lrsquoaide de la balise ltoptiongt I Lrsquoattribut selected =selected permet de speacutecifier le(s) choix
par deacutefautI Lrsquoattribut value permet de speacutecifier la valeur associeacutee au choix
Exemple
ltselect name=agegtltoption value=20gtMoins de 20 ansltoptiongtltoption value=35 selected=selectedgt21 agrave 35 ansltoptiongtltoption value=50gt36 agrave 50 ansltoptiongtltoption value=51gtPlus de 51 ansltoptiongt
ltselectgtP Senellart (TELECOM ParisTech) Web et HTML 28092009 48 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Les diffeacuterentes variantes drsquoHTML
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 49 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Les diffeacuterentes variantes drsquoHTML
Les diffeacuterentes version drsquoHTMLHTML 401 (1999) strict (vu plus haut) et transitionnelltDOCTYPE html PUBLIC -W3CDTD HTML 401ENhttpwwww3orgTRhtml4strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD HTML 401 TransitionalENhttpwwww3orgTRhtml4loosedtdgt
XHTML 10 (2000) strict et transitionnelltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
XHTML 11 (en cours) principalement un eacutechec inutilisable etinutiliseacute sur le Web actuelXHTML 20 et HTML 5 deux normes concurrentes en coursdrsquoeacutelaboration
P Senellart (TELECOM ParisTech) Web et HTML 28092009 50 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Les diffeacuterentes variantes drsquoHTML
Soupe de balises
On trouve encore beaucoup de documents HTML anteacuterieurs agrave HTML401En pratique beaucoup de pages Web ne respectent aucun de cesstandards (avec ou sans deacuteclaration de type de document) =rArrnavigateurs ne respectent pas ces standards =rArr soupe de balises Pour de nouveaux deacuteveloppements absolument indispensable derespecter les standards du Web (compatibiliteacute avec les clients Webdrsquoaujourdrsquohui et de demain) mecircme si ce nrsquoest pas suffisammentcompris par les concepteurs de sites Web
P Senellart (TELECOM ParisTech) Web et HTML 28092009 51 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Les diffeacuterentes variantes drsquoHTML
HTML contre XHTML
XHTML une application drsquoXMLLes balises sans contenus lthrgt srsquoeacutecrivent lthr gt en XHTMLCertains eacuteleacutements peuvent ne pas ecirctre refermeacutees en HTML( ltolgt ltligt un ltligtdeux ltolgt ) mais la fermeture est obligatoire enXHTMLLes valeurs des attributs peuvent ne pas ecirctre entre guillemets( ltimg src=totopng alt=totogt ) en HTML guillemets obligatoiresen XHTMLLes noms des eacuteleacutements et des attributs sont insensibles agrave la casse enHTML ( ltHTMl laNg=frgt ) contrairement agrave XHTML ou tout doitecirctre en minusculeAttributs xmlns et xmllang sur la balise lthtmlgt en XHTMLEt quelques autres petites subtiliteacutes
P Senellart (TELECOM ParisTech) Web et HTML 28092009 52 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Les diffeacuterentes variantes drsquoHTML
Avantages respectifs de HTML et XHTML
Avantages de HTML 401Meilleur support par les navigateurs (Internet Explorer 67comprennent mal XHTML)Moins de contraintes Beaucoup plus utiliseacute sur le Web
Avantages de XHTML 10Plus de contraintes (donc plus simple )Syntaxe claire sans ambiguiumlteacuteFamiliariteacute avec XML utile dans drsquoautres contextesFaciliteacute drsquoutilisation dans des contextes XML (pex XSLT)
P Senellart (TELECOM ParisTech) Web et HTML 28092009 53 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Les diffeacuterentes variantes drsquoHTML
Regravegles de compatibiliteacute agrave respecter pour du XHTML
Theacuteoriquement ltpgt et ltpgtltpgt sont synonymes en XML donc enXHTML En pratique on utilisera la notation ltbalisegt uniquementpour les balises nrsquoayant jamais de contenu (pex ltbrgt lthrgt )Theacuteoriquement ltbrgt et ltbrgt sont synonymes En pratique onutilisera toujours ltbrgt Theacuteoriquement un document XHTML peut commencer par une ligneltxml version=1Oencoding=utf-8gt En pratique onlrsquoomettracf httpwwww3orgTRxhtml1guidelines
On peut utiliserhttpqa-devw3org~bjoernappendix-cvalidator pourveacuterifier le respect de ces quelques regravegles
P Senellart (TELECOM ParisTech) Web et HTML 28092009 54 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Les diffeacuterentes variantes drsquoHTML
Strict contre Transitionnel
Agrave la fois en HTML 401 et en XHTML 10 on a le choix entre unedeacuteclaration de type de document Strict ou TransitionalDiffeacuterence moins drsquoeacuteleacutements autoriseacutes en StrictDes eacuteleacutements de preacutesentation ( ltugt pour soulignement ltcentergt ltfontgt ) en Transitional heacuteritage des anciennes versions drsquoHTMLAgrave eacuteviter de nos jours seacuteparation fondforme preacutesentation en CSSPour de nouveaux projets StrictPour des modifications drsquoanciens sites avec beaucoup de balisespreacutesentationnelles Transitional
P Senellart (TELECOM ParisTech) Web et HTML 28092009 55 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Les diffeacuterentes variantes drsquoHTML
XHTML 20 contre HTML 5
XHTML 20 initiative du W3C incompatible avec HTML401XHTML 10 changements majeursHTML 5 initiative des deacuteveloppeurs de navigateurs compatibiliteacuteavec HTML 401XHTML 10 changements increacutementaux maisnombreuxXHTML 20 abandonneacute en juillet 2009Des fonctionnaliteacutes de HTML 5 font leur apparition dans lesnavigatuers reacutecents (excepteacute Internet Explorer qui a cependantannonceacute en septembre 2009 son inteacuterecirct)HTML 5 laisse le choix entre les conventions HTML 401 ou XHTMLNouvelles fonctionnaliteacutes dessin 2D ( ltcanvasgt ) multimeacutedia( ltaudiogt ltvideogt ) meilleurs eacuteleacutements structurants ( ltsectiongt footer ) etc
P Senellart (TELECOM ParisTech) Web et HTML 28092009 56 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Outils et Reacuteferences
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 57 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Outils et Reacuteferences
Outils
Nrsquoimporte quel eacutediteur de texte (par exemple le bloc-notes deWindows emacs vim ) Privileacutegier les eacutediteurs avec colorationsyntaxique Bon choix Scite (libre leacuteger simple drsquoutilisationmulti-plateforme coloration syntaxique pourHTMLCSSPHPJavaScript )Nrsquoimporte quel navigateur et plusieurs navigateurs avec un moteur derendu diffeacuterentUtiliser la fonction laquo Afficher la source raquo des navigateurs WebFirefox preacutesente de nombreux avantages pour ledeacuteveloppementanalyse de sites WebEn particulier extension Firebug de Firefox excellent outilPour veacuterifier qursquoune page se conforme bien aux normes de HTMLutiliser le validateur du W3C httpvalidatorw3org
P Senellart (TELECOM ParisTech) Web et HTML 28092009 58 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Outils et Reacuteferences
Reacutefeacuterences
Speacutecification de HTML 401httpwwww3orgTRREC-html40
Speacutecification de XHTML 10httpwwww3orgTRxhtml1
Brouillon de XHTML 2httpwwww3orgTRxhtml2
Brouillon de HTML 5httpwwww3orghtmlwghtml5
HTML et XHTML La Reacutefeacuterence OrsquoReilly
P Senellart (TELECOM ParisTech) Web et HTML 28092009 59 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Application
Plan du cours
1 Internet et le Web
2 Le langage HTML
3 Formulaires HTML
4 Les diffeacuterentes variantes drsquoHTML
5 Outils et Reacuteferences
6 Application
P Senellart (TELECOM ParisTech) Web et HTML 28092009 60 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61
Application
Pour chacune des pages Web donneacutees dans la liste disponible sur la pagedu cours
Regarder la source Constatations Voit-on apparaicirctre drsquoautreslangages que HTMLQuelle est la variante de HTML utiliseacutee La page est-elle conforme aux standards du Web Utiliser levalidateur
P Senellart (TELECOM ParisTech) Web et HTML 28092009 61 61