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

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

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 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 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 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 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 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 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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
  • Clients Web
  • Vocabulaire
  • • Le langage HTML
    • • Preacutesentation geacuteneacuterale
      • Le corps dun document
      • • Formulaires HTML
        • • Geacuteneacuteraliteacutes
          • Les champs de saisie
          • • Les diffeacuterentes variantes dHTML
            • Outils et Reacuteferences
            • Application

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
  • Clients Web
  • Vocabulaire
  • • Le langage HTML
    • • Preacutesentation geacuteneacuterale
      • Le corps dun document
      • • Formulaires HTML
        • • Geacuteneacuteraliteacutes
          • Les champs de saisie
          • • Les diffeacuterentes variantes dHTML
            • Outils et Reacuteferences
            • Application