Programmation web1 complet

Matière : Programmation Web1 ISET Bizerte 2013/2014 Enseignante : Ouroud HENIA Classe : TI13

1

Chapitre I: Historique de Internet et

services

I.1 Introduction

Internet est un système d'interconnexion de machines qui constitue un réseau informatique mondial, utilisant un ensemble standardisé de protocoles de transfert de données. C'est un réseau de réseaux, composé de millions de réseaux aussi bien publics que privés, universitaires, commerciaux et gouvernementaux. Internet transporte un large spectre d'information et permet l'élaboration d'applications et de services variés comme le courrier électronique, la messagerie instantanée et le World Wide Web.

Internet ayant été popularisé par l'apparition du World Wide Web, les deux sont parfois confondus par le public non averti. Le World Wide Web n'est pourtant que l'une des applications d'Internet.

I.2 Définitions Réseau : Ensemble des ordinateurs et périphériques connectés les uns aux autres. Notons que deux ordinateurs connectés ensemble constituent à eux seuls un réseau minimal. Protocole : méthode standard qui permet la communication entre des processus (s'exécutant éventuellement sur différentes machines), c'est-à-dire un ensemble de règles et de procédures à respecter pour émettre et recevoir des données sur un réseau. TCP/IP : Transmission Control Protocol/Internet Protocol» : ensemble des règles de communication sur internet se basant sur la notion adressage IP, c'est-à-dire le fait de fournir une adresse IP à chaque machine du réseau afin de pouvoir acheminer des paquets de données. Adresse IP : Sur Internet, les ordinateurs communiquent entre eux grâce au protocole IP (Internet Protocol), qui utilise des adresses numériques, appelées adresses IP, composées de 4 nombres entiers (4 octets) entre 0 et 255 et notées sous la forme xxx.xxx.xxx.xxx. Par exemple, 194.153.205.26 est une adresse IP donnée sous une forme technique. Ces adresses servent aux ordinateurs du réseau pour communiquer entre-eux, ainsi chaque ordinateur d'un réseau possède une adresse IP unique sur ce réseau. C'est l'ICANN (Internet Corporation for Assigned Names and Numbers, remplaçant l'IANA, Internet Assigned Numbers Agency, depuis 1998) qui est chargée d'attribuer des adresses IP


2

publiques, c'est-à-dire les adresses IP des ordinateurs directement connectés sur le réseau public internet.

Nom de domaine : Chaque ordinateur directement connecté à internet possède au moins une adresse IP propre. Cependant, les utilisateurs ne veulent pas travailler avec des adresses numériques du genre 194.153.205.26 mais avec un nom de domaine ou des adresses plus explicites (appelées adresses FQDN) du type [www.commentcamarche.net]. Web : On appelle «Web» (nom anglais signifiant «toile»), contraction de «World Wide Web» (d'où l'acronyme www), une des possibilités offertes par le réseau Internet de naviguer entre des documents reliés par des liens hypertextes. Navigateur : c’est l’outil de l'internaute, lui permettant de surfer entre les pages web de ses sites préférés. Il s'agit d'un logiciel possédant une interface graphique composée de boutons de navigation, d'une barre d'adresse, d'une barre d'état (généralement en bas de fenêtre) et dont la majeure partie de la surface sert à afficher les pages web. Exemple : internet Explorer, Mozilla Firefox, Google Chrome…

Site Web : Un site web (aussi appelé site internet) est un ensemble de fichiers HTML stockés sur un ordinateur connecté en permanence à internet et hébergeant les pages web (serveur web).

Un site web est habituellement architecturé autour d'une page centrale, appelée «page d'accueil» et proposant des liens vers un ensemble d'autres pages hébergées sur le même serveur, et parfois des liens dits «externes», c'est-à-dire de pages hébergées par un autre serveur.

Site Web statique : site web dont le contenu de ses pages web ne varie pas en fonction de la demande des internautes.

Site Web dynamique : site web contenant des pages web générées à la demande et leur contenu varie en fonction des caractéristiques de la demande (heure, adresse IP de l'ordinateur du demandeur, formulaire rempli par le demandeur, etc.) qui ne sont connues qu'au moment de sa consultation.

URL (Uniform Resource Locator) : permet d’identifier de manière unique une ressource sur le Web. Elle précise le protocole d’accès, le nom du serveur qui héberge cette ressource et sa localisation sur le serveur. Exemple : http://fr.wikipedia.org/wiki/Uniform_Resource_Locator est l’URL de la page web du site wikipedia décrivant l’URL.

I.3 Historique d’Internet 1962 : Joseph Liklider publie ses travaux sur les interactions sociales qui seraient possibles avec un réseau d’ordinateurs


3

1969 : naissance de l’ARPANET : un réseau décentralisé reliant quatre grands centres universitaires américains par des câbles 50Kbps, et utilisant le NCP ("Network Control Protocol") 1972 : Ray Tomlison crée le courrier électronique 1973 : Vinton Cerf spécifie le réseau TCP/IP Fin des années 80 : ARPAnet Début 1990 : Internet tel que nous le connaissons

I.4 Services d’Internet

I.4.1 World Wide Web

Le concept du Web a été mis au point au CERN (Centre Européen de Recherche Nucléaire) en 1991 par une équipe de chercheurs à laquelle appartenaient Tim-Berners LEE, le créateur du concept d'hyperlien, considéré aujourd'hui comme le père fondateur du Web. Le principe de web repose sur l'utilisation d'hyperliens pour naviguer entre des documents (appelés «pages web») grâce à un logiciel appelé navigateur. Une page web est ainsi un simple fichier texte écrit dans un langage de description appelé HTML (Hypertext Markup Language), permettant de décrire la mise en page du document et d'inclure des éléments graphiques ou bien des liens vers d'autres documents à l'aide de balises.

I.4.2 Courrier électronique

Le courrier électronique, courriel , e-mail, mail (parfois mél), est un service de transmission de messages écrits et de documents envoyés électroniquement via un réseau informatique (principalement Internet) dans la boîte aux lettres électronique d’un destinataire choisi par l’émetteur.

Pour émettre et recevoir des messages par courrier électronique, il faut disposer d’une adresse électronique et d'un client de messagerie ou d’un webmail permettant l'accès aux messages via un navigateur Web.

I.4.3 Internet Relay Chat (IRC)

IRC st un protocole de communication textuelle sur Internet. Il sert à la communication instantanée principalement sous la forme de discussions en groupe par l’intermédiaire de canaux de discussion, mais peut aussi être utilisé pour de la communication de un à un. Il peut par ailleurs être utilisé pour faire du transfert de fichier.

I.4.4 Messagerie instantanée


4

Contrairement au IRC, la messagerie Instantanée vous permet de contacter seulement les personnes qui vous intéressent. Aussi, pas besoin de se connecter à l'un des serveurs IRC et d'entrer dans une chambre pour savoir qui est là. En ouvrant le logiciel, vous savez instantanément si une personne de votre liste de contact est disponible ou pas ou commencer une conversation. ICQ, Yahoo Messenger, AOL Instant Messenger (AIM), Microsoft Messenger sont parmi les logiciels les plus utilisés de ce service.

I.4.5 Téléphonie sur l’Internet

Ce service vous permet d'avoir des conversations par la voix sur l'Internet. C'est l'équivalent d'interurbains sans payer de frais. Vous payer seulement les coûts d'abonnement du service d'accès à l'Internet. Ce service ne fait que s'améliorer en qualité.

I.4.6 Vidéo Conférence sur l'Internet

La vidéo conférence est la communication entre les usagers en utilisant de la vidéo et le son. Avec une petite caméra vidéo et un programme spécialisé, vous pouvez vous connecter à un serveur qui s'occupe de la communication entre deux ou plusieurs personnes. Le logiciel plus connu est appelé Skype.

I.5 Protocoles d’Internet

Chaque protocole a des fonctions propres et, ensemble, ils fournissent un éventail de moyens permettant de répondre à la multiplicité et à la diversité des besoins sur Internet.

HTTP (HyperText Transfer Protocol) : protocole mis en œuvre pour le chargement des pages web. HTTPS : version sécurisée du HTTP pour la navigation en mode sécurisé. FTP (File Transfer Protocol) : protocole utilisé pour le transfert de fichiers sur Internet. SMTP (Simple Mail Transfer Protocol) : mode d'échange du courrier électronique en envoi. POP3 (Post Office Protocol version 3) : mode d'échange du courrier électronique en réception. IMAP (Internet Message Access Protocol) : un autre mode d'échange de courrier électronique. IRC (Internet Relay Chat) : protocole de discussion instantanée. SSLouTLS :protocolesdetransactionsécurisée,utilisésnotammentpour lepaiement

sécurisé.


5

ChapitreII:LelangageHTML

II.1 Définition Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents. Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP. Le langage HTML est un standard publié par W3C (World Wide Web Consortium).

II.2 Historique de HTML 1991 : naissance du Web et du langage HTML 1993 : première version de HTML : HTML 1.0, navigateur NCSA Mosaîc 1995 : première version officielle de HTML HTML2.0 rfc 1866 Janvier 1997 :HTML 3.2, apports : standardisation des tableaux et un grand nombre d’éléments de présentation Décembre 1997 : HTML4.0 standardise les feuilles de style et les cadres. 2012 : HTML 5 : nouvelles possibilités dans la création d’applications web avec l’intégration d’éléments mutimédia.

II.3 Structure d’un document HTML La structure générale d’un document HTML doit être selon cette allure :

• Le document doit être entouré de marqueurs (Angl. “tags”) <html> ....</html> • L’en-tête (“head”) est utilisé pour stocker de l’information à propos du document.

Dans la plupart des cas, il s’agit uniquement du titre. • Le titre (“title”) du document est utilisé à deux fins:


6

o Dans la plupart des “browsers”, le titre est affiché dans la barre supérieure de la fenêtre.

o Le titre est souvent utilisé par les “search robots” pour indexer votre page. Choisissez donc quelque chose de significatif.

• Toute la page HTML proprement dite (ce qui est visible dans le browser) est incluse dans le corps (“BODY”).

II.4 Notions de base

II.4.1 Balise HTML

� Une balise est un élément du texte (un nom) encadré par (<) et (>). Exemple : <head> � Les balises HTML ne sont pas sensibles à la casse : pas de différence entre majuscules

et minuscules. � Les balises fonctionnent par paire afin d’agir sur les éléments qu’elles encadrent. La

première balise est dite ouvrant et la seconde est dite fermante. La balise fermante est précédée par ‘/’. Exemple :

<b> Ce texte est en gras </b> : met le texte encadré en gras. � Les balises HTML peuvent être uniques. Exemple : <br> représente un retour à la

ligne. � Les balises peuvent être imbriquées de manière hiérarchique. Le chevauchement n’est

pas accepté. Exemple : <i><u>Bonjour</u>tout le monde</i> (Bonjour tout le monde) <i><b>Ceci est un exemple</i>incorrect </b> (incorrect)

II.4.2 Attribut HTML

Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé. Exemple : <p align="right">Exemple de paragraphe</p>

Dans cet exemple, dans la balise de paragraphe <p>, on a spécifié l’attribut align="right">

qui permet d’aligner à droite le texte du paragraphe.


7

II.5 Titres, séparateurs et paragraphes

II.5.1 Titres

Il existe 6 niveaux de titre dans HTML. Un retour à la ligne est automatiquement inséré après un titre.

Syntaxe: <Hn>...</Hn> où n est compris entre 1 et 6 (H1 est le plus grand titre possible)

Exemple

<H1>Titre de niveau 1</H1> <H4>Titre de niveau 4</H4>

Attribut:

• ALIGN sertà spécifierl’alignementhorizontald’untitre.

Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT"

<h1 align="center">Texte du titre centré</h1>

II.5.2 Paragraphe

a/ Paragraphe simple Le marqueur de paragraphe "p" produit un double retour de ligne.

Syntaxe: <p>...</p> A l'intérieur d'un paragraphe, les espaces, tabulations et retours chariot comptent pour un seul espace.

Attribut:

• ALIGN sertàspécifierl’alignementhorizontalduparagraphe.

Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT"

Exemple

<p align="center">Ceci est un premier paragraphe ce ntré</p> <p align="right">Ceci est un paragraphe aligné à dr oite</p>

b/ Paragraphe en retrait • Lemarqueur “blockquote” décaleleparagrapheàdroite.

Syntaxe: <blockquote>...</ blockquote >

Exemple

<blockquote>ce paragraphe a un retrait à droite</bl ockquote>


8

c/ Paragraphe formaté Le marqueur “pre" est utilisé lorsqu’on désire afficher du texte avec un caractère non-proportionnel (“monospaced font”). Un “m” prendra autant de place qu’un “i”. Lorsqu’on insère plusieurs espaces à la suite, ceux-ci sont maintenus à l’affichage (ce qui n’est pas le cas avec le texte normal)

Syntaxe: <pre> ... </pre>

Exemple

<pre> ligne 1 ligne2 précédée d’espaces </pre>

d/ Adresse et signature “Address” est utilisé pour les indications relatives à l’auteur, à la date de création et à la version du document.

Syntaxe: <address> ... </address>

Exemple

<address> Ce document a été créé par les étudiants de l’ISET de Bizerte Dernière modification: 12/1/2011 </address>

II.5.3 Séparateur

a/ Retour à la ligne Le marqueur “br” effectue un simple retour de ligne. Il n’est pas nécessaire de le fermer par </br>.

Syntaxe: <br>

Attribut : CLEAR permet de forcer l’alignement du texte. Ce paramètre est particulièrement utile lorsqu’on l’utilise conjointement avec des images. Il introduit des retours de lignes jusqu’à ce que la marge droite, gauche ou les deux soient libres.

CLEAR="LEFT ou RIGHT ou ALL"

<br clear=left> <br clear=all>

b/ Ligne horizontale Le marqueur “hr” insère une barre horizontale.

Syntaxe: <hr>


9

Attributs : � SIZE : spécifie l’épaisseur de la barre horizontale en pixels. La valeur par défaut

est 1.

� WIDTH : spécifie la longueur de la ligne, soit en pixels, soit en pourcentage de la largeur de la fenêtre.

� ALIGN : spécifie l’alignement de la barre ALIGN="LEFT ou RIGHT ou CENTER"

� NOSHADE : ne prend pas de valeur. Lorsqu’il est présent dans le marqueur “hr” l’effet est une ligne pleine sans ombrage.

Exemple :

<hr size="3" width="200" align="center" noshade>

c/ La balise DIV La balise DIV permet de regrouper des éléments On peut associer des attributs communs aux éléments contenus entres les balises <div>

<div align="center"> <h1> Introduction </h1> <p> Bonjour </p></div>

Cette balise est surtout utile pour associer des styles <DIV class="cours"> ..... </DIV>

II.6 Mise en forme de caractères et caractères spéciaux

II.6.1 Les balises de style

Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées dans d'autres balises de style de la même façon qu'on le ferait avec un traitement de texte.

Balise de style Effet Visuel <ABBREV> Abréviation <ACRONYM> Acronyme <B> Met la police en gras <BIG> Police plus grande <CITE> Citation <CODE> Instruction

<DEL> Texte supprimé mais qui reste présent <DFN> Définition d'instance <EM> Emphase


10

<I> Italique <INS> Nouveau texte inséré à cet endroit

<KBD> Clavier - Suite de caractères devant être tapés tel que l

<Q> Encadre le texte par des guillemets

<S> Comme strike (barré)

<SAMP> Exemple

<SMALL> Police plus petite

<STRONG> Forte accentuation rendue par du gras

<STRIKE> Texte barré (comme S)

<SUB> Texte en Indice

<SUP> Texte en Exposant

<TT> Caractère de machine

<U> souligné

II.6.2 Police

Pour modifier la police de votre texte il suffit d’utiliser la balise: <font>. Syntaxe : <font face= « … » color= « … » size= « … »>.votre texte</font>

Attributs : � Face : spécifie la police utilisée. � size : spécifie la taille de la police.

� color : spécifie la couleur de la police soit en spécifiant le nom de la couleur soit le code de la couleur en "#RRVVBB" (RR, VV et BB représentent respectivement un nombre hexadécimal entre 00 et FF pour le Rouge, le Vert et le Bleu).

Exemple :

<font face="Times New Roman, Times, serif" color="# FF0000" size="+2" >exemple de police </font>

II.6.3 Caractères spéciaux

Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage particulier. Exemple :


11

Caractère Code

" "

& &

Space

à

à

E &egrave ;

E é

II.7 Les listes

II.7.1 Liste à puce

Pour créer une liste à puce, on dispose de la balise <ul> Pour spécifier le titre de la liste, on utilise <lh> Les éléments de la liste sont réalisés grâce à la balise <li> Syntaxe: <ul> <lh>…</lh> <li>…</li> <li>…</li> … </ul>

Exemple :

<ul> <lh>Titre de la liste</lh> <li>Elément 1</li> <li>Elément 2</li> </ul>

II.7.2 Liste numérotée

Syntaxe: <ol> ... </ol>

<ol> <lh>Titre de la liste</lh> <li>Elément 1</li> <li>Elément 2</li> </ol>


12

II.7.3 Liste de définition

Le marqueur « dl »

• Délimiteunezonedelistededéfinitionquicontientdestermes"dt"etdes

descriptions"dd"

Syntaxe: <dl> ... </dl>

Le marqueur « dt » • Introduitunnouveautermededéfinition.

Syntaxe: <dt> ... </dt>

Le marqueur « dd »

• introduitunedescriptiondutermededéfinition.Lerésultatàl’écranestun

décalagedutexteversladroite.

Syntaxe: <dd> ... </dd>

<dl>

<th>Titre de la liste <dt>Terme 1</dt> <dd>Définition du terme 1</dd> <dt>Terme 2</dt> <dd>Définition du terme 2</dd>

.... </dl>

II.7.4 Attributs de liste

Il existe des attributs spécifiques aux listes:

Attribut Valeur Effet Visuel

COMPACT

resserre l'interligne

PLAIN

supprime les puces

SEQNUM

définit le premier numéro

START

définit le premier numéro

CONTINUE

repart du numéro où il s'était arrété à la liste précédente

TYPE (pour les listes ordonnées)

1

A

numérotation chiffrée (par défaut)

numérotation en capitales


13

a

I

i

numérotation en bas de casse

numérotation en chiffres romains (I, II, III, IV ...)

numérotation en chiffres romains en bas de casse

TYPE (pour les listes non-ordonnées)

circle square disc

puce circulaire puce carrée puce en disque

II.7.5 Combinaison de liste

Leslistespeuventêtreemboîtéeslesunesdanslesautres,ilsuffitpourceladedéfinirun

élémentd’unelistecommeétantuneautreliste. <ol>

<li> Achats à faire <ul>

<li> 2 litres de lait </li> <li> 1 kg de pain mi-blanc </li>

</ul> </li>

<li> Recette <dl>

<dt>Pain</dt> <dd>Il faut de la farine et de l’eau, de la levure. </dd> <dt>Lait</dt> <dd>Si vous êtes en ville, aucune chance ... Il fau t

trouver une vache </dd> </dl> </li> <li> Dernier élément numéroté </li> </ol>


14

II.8 Les liens Les liens peuvent être de deux types :

- externes: un pointeur du document mène vers un autre document - internes: un pointeur renvoie à une section du même document.

II.8.1 Le marqueuer <a>

Un lien se définit par le marqueur <a ...> suivi de l’attribut HREF=” ” qui définit l’adresse du document vers lequel le lien conduit. Il se termine par </a>. Le texte ou l’image qui sont insérés entre les marqueurs de début et de fin sont les parties actives du lien ("mots_sensibles" ci-dessous) et déclencheront le chargement du document lorsqu’on clique dessus.

Syntaxe: <A HREF="adresse"> mots_sensibles </A>

<A HREF=" http://www.isetb.rnu.tn/ ">ISET Bizerte</A> <A HREF="/welcome.html">Retour à l’acceuil</A> <A HREF="../index.html">Remonter d’un niveau</A>

II.8.2 Lien externe vers un autre document HTML

Ce type de lien permet de pointer vers un document référencé par une adresse URL ou par un chemin relatif.

• Ce document peut être un document HTML ou tout autre type de fichier. (postscript, sons, images etc ...).

II.8.3 Lien interne

Les liens internes permettent de construire des tables de matières et des renvois à l’intérieur d’un texte Un lien interne pointe vers une ancre, c’est à dire un endroit à l’intérieur d’un document défini par un nom. Il faut définir deux choses pour un lien interne :

�� L’ancre interne

Syntaxe: <A NAME="nom_de_l’ancre"></A> Exemple :

<A NAME="bas_de_la_page"></A>

� Le lien vers l’ancre

• Lelienproprementditsedéfinitaveclemarqueur“a”suividehref=«#...»

Syntaxe: <A HREF=”#nom”>mots_sensibles</A>


15

Exemple :

<A HREF="#bas_de_la_page>Aller en bas</A>

Exemple :Lieninterneettabledesmatières

.... <a href=”#partie1”>Première Partie</a> <a href=”#partie2”>Deuxième Partie</a> .... ... <a name=”partie1”></a> <h1>Partie 1</h1> .... ... <h1><a name=”partie2”>Partie 2</a></h1> .....

Il est également possible d’utiliser les ancres dans les liens externes. Il faut alors spécifier l’ancre vers laquelle pointe le lien en ajoutant #_$_à la fin de l’URL. Exemple : Ancreetlienexterne <a href=”http://www.isetb.rnu.tn/cours/exemple.html#pa rtie2”>Deuxième Partie</a>

Et dans le document exemple.html on trouve la définition de l’ancre suivante: <a name=”partie2”> <h2>Partie 2</h2>

II.8.4 Lien et adresses relatives

a. Ressourcesituéedanslemêmerépertoirequelapaged'appel

La valeur prise par l'attribut href est simplement le nom du fichier, par exemple <a href="index.html"> .

b. Ressourcesituéedansunsous-répertoiredurépertoirecontenantlapaged'appel

Il suffit de citer la suite des sous-répertoires jusqu'au fichier ressource, par exemple href="archives/2001/18072001.html" .

c. Ressourcesituéedansunrépertoirecontenantlapaged'appel

Il faut remonter successivement chaque répertoire par "../". Dans cet exemple, le répertoire visé est le supérieur hiérarchique de deuxième rang (le grand-père) : href="../../index.html" .


16

d. Ressourcesituéedansunrépertoiresituédansunebranchelatérale

Il faut remonter au répertoire commun par "../" puis redescendre la bonne branche, par exemple href="../../produits/convecteurs/rh1200x.html" .

II.8.5 Lien vers des services Internet

a/ Lien pour l’envoie d’ e-mail Un tel lien lance automatiquement l’application de messagerie électronique en incluant le nom du destinataire. <A HREF="MAILTO:adresse_correspondant"> ancre </A> ou <A HREF="MAILTO:adresse_correspondant?Subject=Objet_du _message"> ancre </A> <a href=”mailto:[email protected]”>Envoyez mo i un message</a> A HREF="MAILTO: [email protected]?Subject=Cou cou"> Contact !!</A>

b/ Lien pour télécharger un fichier Ce type de lien est utilisé pour donner accès à un dialogue de téléchargement de fichier. Le protocole indiqué dans l’URL est, en l’occurrence, le protocole de transfert de fichiers FTP. <a href=”ftp://tecfa.unige.ch/pub/software/”>Liste des logiciels disponibles</a>

II.9 Les Tableaux

Un tableau doit respecter les quelques règles suivantes :

� Le tableau est encadré par les balises <TABLE> et </TABLE>. � Le titre du tableau est encadré par <CAPTION> </CAPTION> � Chaque ligne est encadrée par <TR> </TR> (Table Row, traduit par ligne du tableau). � Les cellules d'en-tête sont encadrées par <TH> </TH> (pour Table Header : En-tête

de tableau) � Les cellules de valeur sont encadrées par <TD> </TD> (Table Data: Donnée de

tableau)

Exemple :

<TABLE BORDER="1"> <CAPTION> Voici le titre du tableau </CAPTION> <TR>


17

<TH> Titre A1 </TH> <TH> Titre A2 </TH> <TH> Titre A3 </TH> <TH> Titre A4 </TH> </TR> <TR> <TH> Titre B1 </TH> <TD> Valeur B2 </TD> <TD> Valeur B3 </TD> <TD> Valeur B4 </TD> </TR> </TABLE>

� Attributs de table:

Attribut Rôle

border="x" Epaisseurducadre

bgcolor=couleur Couleurdescellules

Border color= Couleurdesbordures

Height tailleenhauteurd’untableau

width=" " tailleenlargeurd’untableau

Align left,right,center

cellpadding="y" Espacesituéentrelesborduresdutableauetlecontenudescellules

cellspacing="y" Tailledelabordureentrelescellules

� Attributs de cellule <TD> et <TH>

align="letf / center / right / justify

/ char" alignementhorizontal

valign="top / bottom / middle /

baseline" alignementvertical,

width="x" largeurdelacellule,

height="y" hauteurdelacellule,

colspan="x"

définit une cellule dont la largeur est x

fois celle de la colonne de base (fusion

desxcolonnesadjacentes),

rowspan="y" définitunecelluledont lahauteuresty


18

foiscelledela ligne(fusiondesy lignes

adjacentes),

bgcolor="couleur" définitlacouleurdefond,

background="url" imagedefond.

� Attributs de ligne <TR>

valign = "top / bottom / baseline / middle" alignementvertical

align = "right / center / left " alignementhorizontal

bgcolor="couleur" couleurdefonddelacellule

Les attributs sont appliqués pour toutes les cellules de la ligne sauf si un attribut de

<TD>donneunautreordre.

Exemple : Regroupement de cellules en lignes ou en colonnes

<TABLE border="3" cellpadding="2"> <CAPTION align="bottom">Titre </CAPTION> <TR> <TH align="left">Script</TH> <TH align="left" colspan="2" >Exécution</TH> </TR> <TR> <TD>CGI</TD> <TD rowspan="2" >par le</TD> <TD>serveur</TD> </TR> <TR> <TD>javascript</TD> <TD>client</TD> </TR> </TABLE>

II.10 Insertion d’image Les formats d’image affichables par les browsers sont *.gif et *.jpg (*.png pour les récents) Pour avoir des images à l’intérieur d’un document HTML, on utilise la commande “img”: <img src=”URL” align=”alignement” alt=”commentaire” width=n height=n hspace=n vspace=n border=n> attributs :

• src = est obligatoire et contient un URL ou un chemin relatif vers un fichier de format .gif ou .jpg ou .png

• align : permet de spécifier l’alignement par rapport au texte : ALIGN = "TOP ou BOTTOM ou MIDDLE ou RIGHT ou LEFT"


19

• alt : contient le commentaire que les personnes utilisant un browser textuel (sans images) voient à la place de l’image.

• Width et height : se réfèrent à la largeur et à la hauteur de l’image (en pixels). • hspace et vspace : permet de spécifier la distance horizontale et verticale en pixels

entre le texte environnant et le bord de l’image. • Border : permet de créer un cadre autour de l’image. La largeur de la bordure est

exprimée en pixels.

II.11 Les cadres (Frames) Les frames sont les cadres créés dans la fenêtre d’un navigateur. Chaque cadre peut recevoir un fichier HTML différent. Ce principe est surtout utilisé pour des barres de navigations, des hauts de page (où sont placés des publicités etc…). Afin de créer un site contenant des cadres, il suffit de créer un fichier contenant l'agencement des cadres : ce fichier HTML a pour particularité d'avoir un conteneur <FRAMESET> à la place du jeu de balises <BODY>. C'est cette balise qui définit les cadres par leur dimension en pixels ou en pourcentage (%). Le code du jeu de cadres sera toujours de cette forme

<HTML> <HEAD> </HEAD> <FRAMESET > <FRAME> les pages HTML a charger. </FRAMESET> <NOFRAMES> <BODY>

Le texte à afficher dans le cas où le navigateur ne supporte pas les cadres. </BODY> </NOFRAMES> </HTML>

Le fichier FRAMESET :

Commeuntableau,unfichierframesetseconstruitenlisantlescadresdehautenbas,et

degaucheàdroite.

Exemple1 : <FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="gauche"> <FRAME SRC="frame2.htm" NAME="droite"> </FRAMESET>

Exemple2 :


20

<FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="gauche"> <FRAMESET ROWS="50%, 50%"> <FRAME SRC="frame2.htm" NAME="droit_haut"> <FRAME SRC="frame3.htm" NAME="droit_bas"> </FRAMESET> </FRAMESET>

Attributs de la balise <FRAMESET>

cols="pixels / %, pixels / %"

Crée des colonnes dont la largeur peut être

spécifiéeenpixelsouenpourcentagedelafenêtre

totale. Les dimensions pour chaque colonne sont

séparées par des virgules. (On note aussi qu'il est

possibled'indiquerlesigne"*"pourindiquerquela

colonneoccupel'espacerestant).

rows="pixels / %, pixels / %"

Crée des cadres horizontaux (lignes). Il n'est pas

possible d'utiliser cols et rows dans le même

frameset.

framespacing="n" Indiquel'espaceentrelescadres.

frameborder="yes/no" Indique si le cadre a une bordure ou non

bordercolor="code

héxadécimal"

Couleurdelaborduredescadres(ici,lesnomsdes

16couleursstandardnesontpaspossibles).

border="n" Indique la taille de la bordure

Attributs de la balise <FRAME> :

src="URL" Définit l'emplacement de la page à afficher dans le cadre

name="texte" Définit un nom qui permettra d'afficher un autre document dans le cadre gâce à l'attribut Target

scrolling="yes / no / auto" Permet ou non l'affichage d'une barre de défilement (Auto laisse le navigateur décider de son utilité)

marginheight="pixels" margesdisposéesenhautetenbasducadre.

marginwidth="pixels" margesdisposéesdechaquecôtéducadre.


21

frameborder="yes/no" Détermine si les cadres auront ou non une bordure

border=n Taille de l'espace entre les cadres (uniquement pour Netscape)

noresize Interdit à l'utilisateur de redimensionner les cadres (Ce n'est pas la valeur par défaut)

Désigner un cadre avec un lien hypertexte Pour faire afficher des liens dans un des cadres, il suffit d'utiliser l'attribut target dans la balise <A HREF ..> pour spécifier le nom du cadre qui a été spécifié dans la balise <FRAME> par l'attribut NAME. Par exemple: <A HREF="page.htm" TARGET="gauche">

Attribut target :

Valeur Action

_self Affiche la cible dans le même cadre que le lien

_parent Affiche la cible dans le cadre de niveau supérieur danslecasoùplusieursfenêtres

dunavigateursontouvertes)

_blank Affiche la cible dans une nouvelle fenêtre

_top Affiche la cible dans la fenêtre entière du navigateur

II.12 Les formulaires Les formulaires permettent de récupérer des informations auprès de vos visiteurs. Vous pouvez ainsi créer une certaine interactivité avec vos visiteurs.

II.12.1 La balise <form>

La déclaration de base d’un formulaire se fait par:

• la balise <form> • la spécification des paramètres “action”, “ method” et parfois “name”

<FORM ACTION=”URL” METHOD=GET ou POST>

....

</FORM>


22

La balise<form> contient toutes les autres balises du formulaire. Il peut contenir aussi d'autres balises : <p>, <table> , etc., permettant la présentation du formulaire.

Attributs :

Attributs Effet Valeur(s)

action

URL du script qui traite les données recueillies. Cet attribut est obligatoire.

URL, 2 types possibles :

• http : pour un traitement immédiat. • mailto : dans le cas d'un envoi à un courrier

électronique, en vue d'un traitement différé.

method

Indique sous quelle forme vont être codées les informations envoyées.

• get : valeur par défaut. Les données sont adressées sous la forme d'une liste de valeurs accolées à l'URL avec interposition d'un séparateur particulier (point d'interrogation). post : les données sont adressées sous la forme d'une liste nom/valeur accolées à l'URL mais ici, le script doit lire les données par défaut afin d'atteindre les véritables données du formulaires.

onsubmit Le code à exécuter lors de la soumission.

Chaîne de caractères renvoyant vers une fonction script de traitement (par exemple une fonction JavaScript).

onreset Le code à exécuter lors de la remise à zéro du formulaire.

Chaîne de caractères renvoyant vers une fonction script de traitement (par exemple une fonction JavaScript).

name Le nom du formulaire.

Une chaîne de caractères.

target Spécifie la cible du retour après traitement du serveur

Une liste de codage de caractères, séparée par des espaces.

Exemples

Exemple pour un formulaire d'envoi de courrier électronique sur le serveur de Multimania : <form method="get" action="/cgi-bin/mailer">.

Exemple pour un formulaire classique sans l'aide de script CGI :

<forum action="mailto:[email protected]" method ="post"> .

II.12.2 La balise <INPUT>


23

Cette balise sert à spécifier comment s'effectue la saisie du formulaire : par cases à cocher, boutons radio, texte libre, etc. Tous ces éléments de saisie sont décrits à l'aide d'une seule balise : la balise <input> . C'est son attribut type qui permet de préciser s'il s'agit de cases à cocher, boutons radio, texte libre...

L'attribut type peut prendre les valeurs suivantes :

• text, password, checkbox, radio, submit, reset, ima ge, button, hidden, file

<INPUT TYPE=”...” NAME=”...” VALUE=”...” CHECKED

SIZE=”...” MAXLENGTH=”...”>

Attributs généraux

Attributs Effet Valeur(s)

Name Le nom du champ. Une chaîne de caractères.

Alt Une courte description. Une chaîne de caractères.

Disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen.

accesskey

Définit une touche du clavier permettant d'accéder au champ de formulaire. La combinaison "ALT+touche" a le même effet que l'activation du champ.

Touche du clavier

Tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations.

Valeur numérique entière

onfocus , onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus ), ou bien qu'il le quitte (onblur) .


Onchange Un script à exécuter quand contenu du champ a été changé.


Les types de balises <INPUT> a. Champ de saisie :

L'attribut type vaut type="text" . La balise permet alors à l'utilisateur de saisir une ligne de texte. Les attributs utiles pour ce type sont :

• size : un nombre entier, qui définit la taille visible du champ en nombre de caractères. • maxlength : un nombre entier, qui définit le nombre maximum de caractères

autorisés. • value : une chaîne de caractères, qui permet d'afficher un texte par défaut dans la zone

de saisie. • readonly : un booléen. La modification du contenu n'est pas permise.


24

L'attribut name est obligatoire pour ce type de champ.

Exemple :

<strong>Nom</strong><br>

<input type="text" name="nom" size="25">

b. Case à cocher

L'attribut type vaut type="checkbox" . Les attributs utiles pour ce type sont :

• value : une chaîne de caractères, obligatoire, valeur passée au serveur (couple nom="valeur" ) (a plus de sens dans le cas radio suivant).

• checked : un booléen (s'utilise sous la forme checked="checked" ). S'il est activée, la case est cochée par défaut.

Exemple :

<input type="checkbox" name="domaine" value="Info">Informatique

<input type="checkbox" name="domaine" value="Math"> Mathématique

<input type="checkbox" name="domaine" value="Ph">Ph ysique

c. Bouton radio

L'attribut type vaut type="radio" . Outre la présentation (les cases sont rondes et non plus carrées), il existe une grande différence entre les cases à cocher et les boutons radio : les boutons radio qui portent le même name s'excluent mutuellement, le cochage de l'un décoche les autres. Les attributs utiles pour ce type sont :

• value : une chaîne de caractères, obligatoire, valeur passée au serveur (couple nom="valeur" ).

• checked : un booléen (s'utilise sous la forme checked="checked" ). S'il est activé, la case est cochée par défaut.

Exemple :

<strong>Sexe</strong>

<input type="radio" name="sexe">Masculin

<input type="radio" name="sexe">Féminin<p>


25

d. Attacher un fichier

L'attribut type vaut type="file" . Il s'agit de donner la possibilité à l'utilisateur du formulaire de joindre un fichier à son envoi. L'attribut utile pour ce type est value , une chaîne de caractères, qui indique le nom du fichier à attacher par défaut.

Exemple :

<strong>Donner votre photo</strong>

<input type="file" name="photo" value= "photo.jpg">

e. Cacher des données

L'attribut type vaut type="hidden" . Pourquoi cacher des données ? Il s'agit plutôt de faciliter le traitement des données recueillies par le serveur en fournissant le nom du formulaire, l'URL du formulaire, et d'autres indices inutiles à l'utilisateur mais très utiles au classement des données. Ces données deviennent obligatoires lorsque vous faîtes héberger vos pages Web. Les attributs utiles pour ce type sont :

• value : une chaîne de caractères. Valeur cachée à envoyer au serveur, obligatoire.

Par exemple, avec le script CGI chargé de la gestion de l'envoi de courrier électronique sur Multimania :

• <input type="hidden" name="TO" value="login@multima nia.com"> : cette valeur indique sur quelle adresse électronique le formulaire sera envoyé.

• <input type="hidden" name="FROM" value="login@multi mania.com"> : cette valeur indique la provenance du formulaire.

• <input type="hidden" name="SUBJECT" value="FORMULAI RE"> : Cette valeur indique le nom du formulaire (le sujet du courrier), utile si vous avez plusieurs formulaires, cela permet de trier son courrier.

• <input type="hidden" name="GOTOURL"

value="http://www.multimania.com/login/reponse.html "> : cette valeur indique l'URL complète de la page HTML à afficher après l'envoi du formulaire.

f. Mot de passe

L'attribut type vaut type="password" . A l'identique que le type text , mais les caractères tapés sont affichés sous forme d'astérisques. Mais attention : le mot de passe est envoyé en clair dans le message final. Aucune méthode de chiffrement n'est appliquée : la confidentialité ne se limite qu'à l'instant de la saisie. Les attributs utiles pour ce type sont les mêmes que ceux du type text :

• size : un nombre entier, qui définit la taille visible du champ en nombre de caractères.


26

• maxlength : un nombre entier, qui définit le nombre maximum de caractères autorisés.

• value : une chaîne de caractères, qui permet d'afficher un texte par défaut dans la zone de saisie.

Exemple :

<strong>Mot de passe</strong><br>

<input type="password" size="25">

g. Soumission de données

L'attribut type vaut type="submit" . Les attributs utiles pour ce type sont :

• value : une chaîne de caractères. Légende du bouton, par défaut Submit .

Une variante est possible en utilisant le type image : type="image" . Le bouton d'envoi est alors... une image. Les attributs utiles pour ce type sont :

• src : une chaîne de caractères. URL de l'image à utiliser.

Exemple :

<input type="submit" value="Enregistrer les

donnees">

h. Réinitialisation d'un formulaire

L'attribut type vaut type="reset" . Il s'agit d'un bouton qui, cliqué, remet à leurs valeurs par défaut l'ensemble des champs du formulaire. L'attribut utile pour ce type est value , une chaîne de caractères qui indique la légende du bouton, valant par défaut Reset .

Exemple :

<input type="reset" value="Effacer les donnees">

II.12.3 La balise <textarea>

Elle permet aux utilisateurs de votre site de laisser un commentaire ou de taper un texte quelconque.


27

Attributs

Attribut Effet Valeur(s)

name Nom de l'élément. Une chaîne de caractères.

rows et cols

Nombre de lignes et de colonnes de la zone de texte. Ces attributs sont obligatoires.

Un nombre entier.

readonly La modification du contenu n'est pas permise. Un booléen.

Remarque : le texte se trouvant à l'intérieur des balises <textarea> et </textarea> sera le texte par défaut.

Exemple :

<strong>Commentaire :</strong><br>

<textarea name="comment " cols="35"

rows="3">Ecrire votre commentaire

ici</textarea>

II.12.4 La balise <select>

Il s'agit d'une liste de propositions ou d'options parmi lesquelles l'utilisateur doit opérer un choix. Ce choix peut être unique ou multiple. Les options possibles sont décrites pour chacune d'entre-elles dans un conteneur <option> (la balise fermante </option> est obligatoire). Il y a autant de balises <option> que d'options.

Exemple :

<select name="select" name="mois">

<option selected="selected">Janvier</option>

<option>Février</option>

<option>Mars</option>

<option>Avril</option>

<option>Mai</option>

<option>Juin</option>

<option>Juillet</option>

<option>Aout</option>

<option>Septembre</option>

<option>Octobre</option>

<option>Novrmbre</option>

<option>Décembre</option>

</select>


28

Attributs de la balise <select>


name Nom de l'élément. Une chaîne de caractères.

size Le nombre d'options accessibles. Un nombre.

multiple Permet à plusieurs options d'être simultanément sélectionnées.

Un booléen. Par défaut, une seule option peut être sélectionnée.

Balise <option>

Chaque "option" est une possibilité de choix dans le menu select . Cette balise possède les attributs suivants :


value Ce qui apparaît dans la liste d'options du menu. Si cet attribut n'est pas présent, c'est le contenu de l'élément <option> lui-même qui est affiché.


selected Spécifie l'option sélectionnée par défaut. Un booléen.

disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen.

label Une étiquette désignant l'option choisie dans le menu. Une chaîne de caractères.

Balise <optgroup>

Cette balise permet de rassembler en catégories les éléments <option> , pour les faire apparaître de manière ordonnée dans le menu.


label Une étiquette désignant le groupe d'options choisies dans le menu.


disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen.

Exemple


29

<select name="select" name=”mois”>

<optgroup label="Semestre 1">

<option

selected="selected">Janvier</option>

<option>Février</option>

<option>Mars</option>

<option>Avril</option>

<option>Mai</option>

<option>Juin</option>

</optgroup>

<optgroup label="Semestre2">

<option>Juillet</option>

<option>Aout</option>

<option>Septembre</option>

<option>Octobre</option>

<option>Novrmbre</option>

<option>Décembre</option>

</optgroup>

</select>

II.12.5 La balise <label>

Cette balise permet d'associer à un élément de formulaire des informations relatives à son contenu ; cette information est utile notamment pour les navigateurs destinés aux mal-voyants.

Attributs


for Renvoie à l'élément de formulaire spécifié par le même attribut id .


accesskey Définit une touche du clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ.

Touche du clavier

onfocus , onblur

Un script à exécuter quand le curseur est positionné sur le champ (onfocus ), ou bien qu'il le quitte (onblur) .


II.2.6 La balise <button>

Cet élément permet d'insérer un bouton dans un formulaire. Cela est également possible avec la balise <input>, mais <button> permet un plus large choix d'options. Il est malheureusement moins bien accepté par les "vieux" navigateurs.


30

Attributs


name Le nom du bouton. Une chaîne de caractères.

value Valeur envoyée au serveur. Une chaîne de caractères.

type Type de bouton.

• submit (valeur par défaut) • button • reset

Exemples :

<button name="soumet" value="modifier">Modifier l'i nformation</button>

<button name="continue" value="continuer">Continuer l'application</button>

<button><img src="checkmark.gif" alt=" ✔"></img>Sauvegarder</button>

<button type="reset"><img src="x.gif" alt=" ✘"></img>Remettre à

zéro</button>

Exercice :

Ecrire le code HTML du formulaire suivant :


31

Correction

<html> <head> <title>Document sans nom</title> </head> <body> <H2><u>Fiche de renseignements</u></H2> <FORM NAME="Fiche_inscription"> <p>Nom : <INPUT TYPE ="text" NAME="Nom" VALUE="" > Prénom : <INPUT TYPE ="text" NAME="Prenom" VALUE="" > </p> <p>Mot de passe : <input TYPE="password" NAME="Pass" SIZE=5> </p> <P>


32

Vous êtes en terminale : <INPUT TYPE="radio" NAME="option" VALUE="math" ch ecked> Mathématiques <INPUT TYPE="radio" NAME="option" VALUE="pc">Phys ique-chimie <INPUT TYPE="radio" NAME="option" VALUE="svt">SVT <P> Quelle est votre discipline préférée ? <SELECT NAME="disciplines" MULTIPLE SIZE=3> <OPTION>Physique <OPTION SELECTED>Informatique <OPTION>Philosophie

<OPTION>Math ematiques

<OPTION>Langues <OPTION>SVT <OPTION>Histoire <OPTION>EPS </SELECT> <P> Vous vous êtes inscrit(e)s en : <BR> <INPUT TYPE="checkbox" CHECKED NAME="DEUG" >DEUG<BR > <INPUT TYPE="checkbox" NAME="CPGE">CPGE<BR> <INPUT TYPE="checkbox" NAME="BTS">BTS<BR> <INPUT TYPE="checkbox" NAME="IUT">IUT<BR> <INPUT TYPE="checkbox" NAME="AUTRE">AUTRE <P> Ecrivez ci-dessous le sujet de votre projet informa tique :<BR> <TEXTAREA NAME="Projet" ROWS=8 COLS=55> Voici mon projet d'option informatique </TEXTAREA> <P> <INPUT TYPE="RESET" VALUE="Effacer"> <INPUT TYPE="SUBMIT" VALUE="Valider" ><P> </FORM > </body> </html>

33

ChapitreIII:HTML5

III.1 Introduction Cooperation entre le World Wide Web Consortium (W3C) et le Web Hypertext Application Technology Working Group (WHATWG). WHATWG travaillait sur de nouveaux formulaires et applications et le W3C sur XHTML 2. En 2006, ils ont décidé de coopérer pour créer HTML5 avec forte implication des industriels et fabricants de navigateurs. Les navigateurs en pointe : Opera (un des développeurs d’Opera est à l’origine de HTML5), ceux basés sur WebKit (Chrome, Safari, y compris sur mobiles), Firefox (un peu de retard)

III.2 Structure générale d’un document HTML5 <!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8">

<title>Titre de la page</title>

<link rel="stylesheet" href="style.css">

<script src="script.js"></script> </head>

<body>

...  ...

</body>

</html>

Avec :

• Doctype simple à mémoriser, • Plus de « type= » dans la balise <link>, utilisation de « rel=» à la place

– Nombreuses valeurs possibles pour rel : stylesheet, author, icon, prefetch, next, prev, etc.

• Plus de « type= » dans la balise <script> non plus – <script src="script.js"></script> suffit…

III.3 Formulaires en HTML5

• Enorme évolution, alors que les formulaires n’avaient quasiment pas changé depuis 1997 • Ajout de nombreux validateurs qui auparavant nécessitaient du JavaScript, • Ajout de nombreux types nouveaux pour les champs de formulaire, auparavant fournis par

des bibliothèques JavaScript • De nombreux nouveaux types de champs <input> ont été introduits, tous ne sont pas

encore supportés, même par les versions les plus récentes des navigateurs


34

• color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.

• Nous allons voir des exemples de chacun de ces champs :

III.3.1 Le champ <input type=color>

Exemple : Choisissez une couleur: <input type="color" name="favcolor" />

III.3.2 <input type=date>

Exemple : Anniversaire: <input type="date" name="bday" />

III.3.3 <input type=datetime-local>

• Permet de choisir la date et l’heure • Support idem type=date

Exemple : Anniversaire : <input type="datetime-local“ name="bdaytime" />

III.3.4 <input type=time>

Heure du rendez-vous : <input type="time" name=“rdv_time" />


35

III.3.5 <input type=week>

Choisissez la semaine : <input type="week" name=“no_semaine" />

III.3.6 <input type=month>

<input type="month" name="bdaymonth" />

Idem date mais permet de choisir juste le mois

III.3.7 <input type=email>

E-mail: <input type="email" name="useremail" />


36

Intérêt : poppe un clavier contextualisé sur mobile ou tablette

� Attributs implicites “required”, “invalid” etc. � Possibilité de styler la saisie � Vrai aussi pour les autres champs <input> � Validation + messages d’erreurs. Parfois tooltips lors de la saisie

� Et lors de la soumission

III.3.8 <input type=number>

• <input type="number" name="quantity" min="1" max="5" /> • Attributs possibles : max, min, step, value (valeur par défaut)

III.3.9 <input type=range>

<input type="range" name=“n" min="1" max="10" />

Attributs : idem que ceux de type=number

Poppe un clavier contextuel sur mobile

• Exemple avec feedback

<input id="slider1" type="range" in="100" max="500" step="10" onchange="printValue('slider1','rangeValue1')"/> <input id="rangeValue1" type="text" size="2"/>

Et une fonction JavaScript


37

<script> function printValue(sliderID, textbox) { var x = document.getElementById(textbox); var y = document.getElementById(sliderID); x.value = y.value; } </script>

III .3.10 <input type=tel>

• Possibilité de mettre des patterns et un placeholder

<input type="tel" placeholder="(555) 555-5555“ pattern="^$?\d{3}$?[-\s]\d{3}[-\s]\d{4}.*?$" />

III.3.11 <input type=search>

<label for="mysearch2">Enter your search string here : </label> <input id="mysearch2" type="search" placeholder="search">


38

ChapitreIV:LesfeuillesdestyleCSS

IV.1 Introduction Le CSS (Cascading Style Sheets) est utilisé pour la mise en forme des pages web. Il consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte. Il est ainsi possible de créer un groupe de titres en police Arial, de couleur verte et en italique. Le but de CSS est de séparer les données de la mise en forme. Il permet d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style.

Les spécifications des feuilles de style deviennent une recommandation du consortium W3C en décembre 1996 sous l'appellation CSS1 pour Cascading Style Sheets, level 1. Ce même niveau 1 a été révisé en janvier 1999.

Entre-temps, ces spécifications ont été élargies sous la forme du CSS2 pour Cascading Style Sheets, level 2 en mai 1998. Elles précisent entre autres :

• des styles différents pour les médias différents (écran, impression, synthétiseur de parole, braille...) ;

• les polices de caractères téléchargeables ; • le positionnement des éléments HTML (appelé par ailleurs CSS-P).

La dernière version de CSS est CSS3 qui est en cours de développement depuis 2010.

IV.2 Niveaux d’insertion de CSS Le code CSS peut être placé à 4 endroits différents dans la page.

• Interne : Dans la page HTML • Externe : Dans un fichier indépendant

• Dans l'élément (balise) HTML lui-même • A partir d’un style importé

IV.2.1 Dans le code HTML de la page

Mettre le code CSS dans la page HTML, entre les deux balises <head> et </head> Une feuille globale va se déclarer dans la tête du document, entre les balises HEAD. Elle va s'appliquer globalement à toutes les balises du document qu'elle a défini. <HTML> <HEAD>


39

<STYLE type="text/css"> <!—code css --> </STYLE> </HEAD>

<BODY>

• La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style. • L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading

style sheets (css).

IV.2.2 Dans un document séparé : fichier CSS

Une feuille liée va se déclarer à part, dans un fichier avec une extension .css qui sera mis à côté des autres documents dans le répertoire du site web. Cette feuille de style sera valable pour toutes les pages du site qui l'appelleront dans les balises HEAD. C'est un outil très puissant pour uniformiser la mise en pages d'un grand nombre de documents. Principe : On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit « styles.css » qui contiendra toutes les feuilles de style. body {background-image: home.gif;} LI {font: 13px Verdana;} p {font: 14px Verdana; font-weight: bold;} H1 {font: 16px Arial;font-weight: bold;color=blac k;} H2 {font: 14px Arial;font-weight: bold;color=blac k;}

Ensuite, on crée une page soit page.htm avec dans la <HEAD> un lien vers ce fichier CSS:

<HTML> <HEAD> <LINK rel=stylesheet type="text/css" href="styles.c ss"> </HEAD>

Commentaires :

• La balise <LINK> avertit le browser qu'il faudra réaliser un lien.

• L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il y trouvera une feuille de style externe.

• L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheets (css).

• L'attribut classi&que de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier.

IV.2.3 Dans la balise HTML

Il possible de mettre un style directement dans une balise HTML <HTML> <HEAD> ...

40

</HEAD> <BODY> ... <BALISE Style="style:valeur;"> ... </BALISE> ... </BODY> </HTML>

Exemple :

<HTML> <BODY> <H1 style="font-family: Arial; font-style: italic"> blabla </H1> </BODY> </HTML>

IV.2.4 Style importé

Les recommandations du W3C offrent une dernière façon d'inclure des feuilles de style dans un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles de style externes au niveau de la déclaration du style de document, en insérant la commande @IMPORT immédiatement après la balise style : <HTML> <HEAD> <STYLE type="text/css">  </STYLE> </HEAD> <BODY></BODY> </HTML>

IV.3 Notion de feuille de style en cascade

L’abréviation CSS signifie Cascading Style Sheet ou encore Feuille de style en cascade. Pourquoi « cascade » ?

Ce mot « cascade » fait référence à la méthode de résolution des conflits : puisqu'on peut placer plusieurs feuilles de style dans un même document (en lien, dans le head , en ligne dans la balise) les instructions de style successives peuvent s'opposer. Les ordres de style arrivent donc « en cascade ». Comment résoudre les conflits ?

Comme pour le HTML, le dernier qui parle a raison. On aura donc la hiérarchie :

feuille de style extérieure << feuille de style dans le head << style en attribut dans la balise


41

IV.4 Syntaxe

IV.4.1 Structure générale

Construction d'une règle

Une feuille de style est une suite de règles selon cette structure :

selecteur { propriété : valeur } Une règle a deux parties :

• Un sélecteur ; dans l'exemple suivant il s'agit de h2 ;

• Une déclaration ; c'est une suite de paires propriété: valeur séparées par un point -virgule, le tout placé entre accolades. Ici dans cet exemple il s'agit de {text-align:

center ; color: black} .

Exemple

h2 { text-align : center; color : black; }

Tous les titres de niveau 2 auront leur texte centré et de couleur noire.

Commentaires

Il est possible d'ajouter des commentaires dans une feuille de style. Une zone de commentaires commence par les caractères /* et se termine par les caractères */ . Elle peut s'étendre sur plusieurs lignes. Par exemple :

/* Mise en forme des éléments h2 */ h2 { text-align : center; color : black; }

IV.4.2 Sélecteurs simples

Balise

Il s'agit du sélecteur le plus simple possible, où le sélecteur reprend le nom de l'élément auquel la propriété s'applique :


42

p { text-align : justify; color : black; }

En utilisant l'attribut style , l'exemple précédent devient :

<p style="text-align: center; color: black">(...)</p>

Il est possible de grouper les balises à l'aide de virgules :

h2, h3, ul { text-align : center; color : green; }

Dans cet exemple, tous les titres de niveaux 2 et 3 et les listes non ordonnées seront centrés et de couleur verte.

Classe L'attribut class est un attribut qui peut apparaître dans n'importe quelle balise. Exemple :

.truc { color : red; } .machin { color : blue; }

Noter le point devant le sélecteur.

<p class="truc">Ceci est un paragraphe d'introducti on.</p> <table summary="Un tableau peu informatif" class="m achin"> <tr> <td>Et voici</td> <td>un</td> <td class="truc">tableau</td> </tr> <tr class="truc"> <td>de deux lignes</td> <td>et</td> <td class="truc">trois colonnes</td> </tr> </table> <ol class="truc"> <li>Et ceci</li> <li class="machin">est une</li>


43

<li class="truc">liste</li> </ol>

Il est possible, également, de spécifier que certains éléments seulement d'une classe donnée soient concernés. Par exemple, le code suivant permet de sélectionner tous les éléments div de classe menu. S'il y a un élément p de classe menu, il ne sera pas concerné et conservera sa couleur de fond par défaut :

div.menu { background-color : gray; }

Il est également possible d'appliquer plusieurs classes à un élément. Ainsi, si dans la feuille de style on écrit...

.appartient_a_dupont { color : red; } .vehicule { font-style : italic; }

... le code HTML

<span class="vehicule appartient_a_dupont"> bicycl ette</span>

affichera le mot bicyclette en italique et en rouge.

Identifiant L'attribut id est un attribut qui peut aussi apparaître dans n'importe quel élément. La très grande différence avec l'attribut class est qu'une valeur de id ne peut être prise qu'une seule fois dans toute la page Web. C'est un identifiant : par nature, sa valeur est unique. Exemple :

<p id="monpar">Ceci est un paragraphe d'introductio n.</p> <ol id="maliste"> <li>Et ceci</li>


44

<li id="item2">est une</li> <li class="truc">liste<img src="images/chapeauron d.gif" alt="Vive la Bretagne!" height="20" width="40" id="monimage"></l i> </ol>

On peut alors associer plusieurs règles à chaque id de la manière suivante :

#monpar, #monimage { color : red; border : solid 0.5em blue; } #liste1, #monimage { background-color : yellow; } #maliste { background-color : yellow; color : orange; } #item2 { font-variant : small-caps; font-style : oblique; }

Classes universelles : balises DIV et SPAN en CSS

Ilfautpouvoirdansunmêmeparagrapheappliquerdesstylesdifférentsàdesmorceaux

detexte,c'estàcelaqueserventlesbalises<SPAN>et<DIV>

<SPAN> : Labalise<SPAN>sertàappliquerdesstylesàdesmorceauxdeparagraphe.

Elle s'utilise aussi bien avec ID qu'avec CLASS.

Sasyntaxeestlasuivante:

<SPAN class=Nom_de_la_classe> Texte </SPAN>

<DIV> : Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise DIV

s'appliqueàunbloc,c'est-à-direàunouplusieursparagraphes.

LasyntaxedelabaliseDIVestlasuivante:

<DIV class=important> paragraphes </DIV>


45

IV.4.3 Sélecteurs complexes

Sélecteur contextuel

Prenons un exemple :

h2 em { color : blue; }

Cette règle ne s'appliquera que sur le contenu des éléments em lorsqu'ils seront eux-mêmes à l'intérieur d'un titre de niveau 2 (h2). Autrement dit, la consigne s'applique aux éléments em dans le contexte d'un élément h2.

Syntaxe : les sélecteurs simples sont séparés par des espaces. L'enchâssement est possible avec tous les types de sélecteurs, balise, identifiant, classe comme l'illustrent les exemples suivants :

.copyright h4 { color : blue; } #toto b { font-size : large; } ul ul { list-style : lower-alpha; }

Les regroupements (signifiés par le séparateur virgule) restent possibles :

h1 b, h2 b, b em { color : yellow; }

Pseudo-classes

Nous allons prendre l'exemple des liens. Un lien peut être dans trois états différents :

• actif (lors du clic de la souris) ; • à visiter ; • déjà visité.

Pour les éléments a, on appelle pseudo-classes ces trois états possibles. Ce sont des classes prédéfinies. Voici un exemple :


46

a:active { text-decoration : overline; } a:link { color : blue; font-style : italic; } a:visited { color : green; font-weight : bold; }

La syntaxe est donc [selecteur]:[pseudo-classe] {declaration}

Une pseudo-classe intéressante est la pseudo-classe hover : elle permet d'affecter un style à un élément, lorsque celui-ci est survolé par la souris. Un usage classique consiste à désactiver le soulignement automatique des liens, qui est le comportement par défaut, et de ne le réactiver qu'au passage de la souris :

a { text-decoration : none; } a:hover { text-decoration : underline; }

Pseudo-éléments

CSS1 décrit plusieurs pseudo-éléments :

• first-line modifie le style de la première ligne d'un paragraphe. • first-letter modifie le style de la première lettre d'une phrase. • first-child modifie le style du premier élément-enfant du sélecteur courant. • after modifie le style de ce qui suit l'élément. • before modifie le style de ce qui précède l'élément.

Les trois derniers ne sont pas supportés par Internet Explorer .

Exemple :

p:first-letter { color : red; font-size : 200%; font-weight : bold; }


47

L'exemple précédent permet de colorer en rouge, doubler la taille et mettre en gras la première lettre de tous les paragraphes.

IV.4.4 Unités

Syntaxe

Il ne faut laisser aucun blanc entre le nombre et l'unité. Une longueur peut être précédée d'un signe + ou -.

Unitésabsoluesdelongueur

Unité Notation Conversion

inch (pouce) in 1in=2,54cm

centimètre cm

millimètre mm

point pt 1pt=1/72in=0,352778mm

pica pc 1pc=12pt=4,233mm

Table 1. Unités absolues.

Exemples d'utilisation :

h1 { margin : 0.5in; } h2 { line-height : 3cm; } h3 { word-spacing : 4mm; } h4 { font-size : 12pt; } h5 { font-size : 1pt; }

Le point et le pica sont utilisés pour la taille des caractères.


48

Unitésrelativesdelongueur

Unité Notation Conversion

Em Em 1em est la hauteur d'un caractère (si la hauteur d'un caractère est fixée par l'auteur à 10pt alors 1em=10pt , si elle est fixée à 12pt alors 1em=12pt ).

x-height

ex 1ex est la taille de la lettre 'x' minuscule.

pixel px 1pixel (picture element) : le plus petit élément sur un écran d'ordinateur. Cette unité dépend de l'écran et de son paramétrage.

Table 2. Unités relatives.


h1 { margin : 0.5em; } h2 { line-height : 1ex; } h3 { font-size : 15px; }

Pourcentages

C'est une fraction de la longueur d'un autre élément : largeur de l'écran, hauteur des caractères ou toute autre grandeur dépendant du contexte.


p { line-height : 120%; } td.gauche { width : 33%; }

L'interligne des paragraphes vaut 120% de la hauteur des caractères, tandis que les cellules de classe gauche occuperont 33% de la largeur du tableau où elles se trouvent.

IV.4.5 Couleurs


49

Les couleurs se codent de la même manière qu'en HTML, mais il est également possible de spécifier explicitement le codage RGB :

• une des seize couleurs standard : aqua, black, blue, fuchsia, gray, green,

lime, maroon, navy, olive, purple, red, silver, tea l, white et yellow . • #rrggbb (par exemple, #00cc00 ). • #rgb (par exemple, #0c0 ). • rgb(x1,x2,x3) , où x1, x2 et x3 sont des entiers compris entre 0 et 255 inclus (par

exemple rgb(33,45,127) ). • rgb(x%,y%,z%) où x, y et z sont des nombres compris entre 0.0 et 100.0 inclus (par

exemple rgb(56%,33%,0%) ).

IV.4 Mise en forme du texte

IV.4.1 Quelques propriétés de mise en forme

TEXTE font-family : la police (times, arial, helevetica …) font-size : (small, medium, large, x-large…) font-weight (normal, bold, 120%) font-variant : (normal, small-caps) color : couleur du texte (black, green, #00FF00) text-align: left, center ou right text-transform : none | capitalize | uppercase | lowercase ;

FOND background-color : la couleur du fond (idem) Background-image : image de fond url("truc.jpg")

BORDURES Border-style : solid, dotted, dashed, solid, none Border-width : largeur (1px par exemple) Border-color : red, #00FF00, …

LISTES List-style-type : type de liste (disc, circle, square, decimal, lower-roman ...) list-style-image :image de liste list-style-position

IV.4.2 Les « boîtes »


50

1.lemodèledeboîte

La recommandation CSS1 indique que tous les éléments HTML (sauf ceux qui ne figurent que par leurs adresses : images, son, objets multimédia en général, plug-in...) puissent être considérés comme des blocs rectangulaires. Ce bloc est constitué de plusieurs couches (en pelures d'oignon en quelque sorte) ; on a de l'intérieur vers l'extérieur :

• un contenu (content ) • une zone d'ajustement (padding ) • un encadrement (border ) • une marge (margin )

Cette terminologie est décomposée selon le côté concerné : droite (right), gauche (left), dessus (top), dessous (bottom).

Règlesd'attribution

Pour tous les éléments définis ci-dessus, une propriété définit son épaisseur, il s'agit :

margin Padding border-width

margin-top padding-top border-top-width

margin-right padding-right border-right-width

margin-bottom padding-bottom border-bottom-width

margin-left padding-left border-left-width


51

TD5 : CSS

Exercice 1:

Ecrire le code de la page web suivante en utilisant :

1. une feuille de style interne 2. une feuille de style externe

Correction

1.Feuille de style interne <HTML> <HEAD> <TITLE>Exercice CSS</TITLE> <STYLE TYPE="text/css"> BODY { margin-left: 50px ; color: navy ; backg round: white url(image.gif) ; font-family: Arial, Helvetica, sans-ser if } A:link { color: red } A:active { color: maroon } A:visited { color: maroon } H1,H2,H3,H4 { text-align: center ; font-family : "Comic Sans MS", sans-serif ; font-size: large } H1 { text-align: center ; color: whit e ; background: navy } H2,H3,H4 { text-align: left ; color: navy ; background: white } TH { background: silver } TH,TD { font-family: Arial, Helvetica, sans-s erif } PRE,TT { font-family: monospace ; color: blue ; font-weight:bold }

</STYLE>


52

</HEAD> <BODY> <H1> Titre de niveau 1 </H1> <H2>Titre de niveau 2</H2> <UL> <LI>La couleur par defaut du texte est le bleu nav y <LI>Les titres sont en police Comic sans Ms ou san s-serif <LI>Le texte est en police Arial ou helvetica sans -serif <LI>La page contient l'image "fond_spirale.gif"... <LI>Pour menager de la place à gauche, on définit une marge à gauche de 50 pixels <LI>Les liens <a href="page.html">pas encore visit es </a>sont colorés en "red" et les liens <a href="page.html">deja visi tes </a>en "maroon" <LI><TT>Le texte en PRE ou TT sont en couleur blue et en gras</TT> </UL> <P> <TABLE ALIGN=center WIDTH=60% BORDER=1> <TR> <TH COLSPAN="2">Couleur de fond "silver"</TH> </TR> <TR> <TD>Texte en police sans-serif</TD> <TD>Texte en police sans-serif</TD> </TR> </TABLE> </BODY>

2.Une feuille de style externe Feuille.css BODY { margin-left: 50px ; color: navy ; backgr ound: white url(image.gif) ; font-family: Arial, Helvetica, sans-ser if } A:link { color: red } A:active { color: maroon } A:visited { color: maroon } H1,H2,H3,H4 { text-align: center ; font-family : "Comic Sans MS", sans-serif ; font-size: large } H1 { text-align: center ; color: whit e ; background: navy } H2,H3,H4 { text-align: left ; color: navy ; background: white } TH { background: silver } TH,TD { font-family: Arial, Helvetica, sans-s erif } PRE,TT { font-family: monospace ; color: blue ; font-weight:bold

}


53

page.html <HTML> <HEAD> <TITLE>Exercice CSS</TITLE> <LINK REL="stylesheet" HREF="feuille_style.cs s" TYPE="text/css"> </HEAD> <BODY> <H1> Titre de niveau 1 </H1> <H2>Titre de niveau 2</H2> <UL> <LI>La couleur par defaut du texte est le bleu nav y <LI>Les titres sont en police Comic sans Ms ou san s-serif <LI>Le texte est en police Arial ou helvetica sans -serif <LI>La page contient l'image "fond_spirale.gif"... <LI>Pour menager de la place à gauche, on définit une marge à gauche de 50 pixels <LI>Les liens <a href="css.html">pas encore visite s </a>sont colorés en "red" et les liens <a href="css.html">deja visit es </a>en "maroon" <LI><TT>Le texte en PRE ou TT sont en couleur blue et en gras</TT> </UL> <P> <TABLE ALIGN=center WIDTH=60% BORDER=1> <TR> <TH COLSPAN="2">Couleur de fond "silver"</TH> </TR> <TR> <TD>Texte en police sans-serif</TD> <TD>Texte en police sans-serif</TD> </TR> </TABLE> </BODY>

</HTML>


54

Exercice 2: Mise en page avec CSS Ecrire le code de la page web suivante en utilisant une feuille de style externe.

Correction : Ex2.css div#bandeau { width:600px; height:50px; background-color:#00CCFF; } div#contenu { width:600px; height:400px; background-color:#FFCC00; } div#piedpage { width:600px; height:50px; background-color:#33FF99; clear:both; } div#menu { float:left; width:100px; height:400px; background-color:#FF6699; } div#menuhaut { width:100px; height:200px; background-color:#66CC33; } div#menubas { width:100px; height:200px; background-color:#CC99CC;

}

Ex2.HTML <html> <head> <title>Exercie 2 CSS</title>


55

<LINK REL="stylesheet" HREF="ex2.css" TYPE="text/cs s"> </head> <body> <div id="bandeau">Ceci est le bandeau</div> <div id="menu"> <div id="menuhaut">Menu haut</div> <div id="menubas">Menu bas</div> </div> <div id="contenu">Ceci est le contenu</div> <div id="piedpage">Ceci est le pied de page</div> </body> </html>

Exercice 3: Tableau avec CSS Ecrire le code du tableau suivant en utilisant le CSS

Correction Ex3.css .Tableau span { display:inline; float:left; border:1px solid #FF6600; margin:0px; padding:3px; } .Tableau p { clear:left; margin:0px; padding:0px; height:100% !important; height:1em; } .Tableau p.legende {font-weight:bold} .Tableau span.col1 {width:70px} .Tableau span.col2 {width:120px} .Tableau span.col3 {width:90px}

Ex2.html <html> <head>

<title>Exercie 3 CSS</title>


56

<LINK REL="stylesheet" HREF="ex3.css" TYPE="text/cs s"> </head> <body> <div class="Tableau"> <p class="legende"> <span class="col1">Légende 1</span> <span class="col2">Légende 2</span> <span class="col3">Légende 3</span> </p> <p> <span class="col1">Case 1.1</span> <span class="col2">Case 1.2</span> <span class="col3">Case 1.3</span> </p> <p> <span class="col1">Case 2.1</span> <span class="col2">Case 2.2</span> <span class="col3">Case 2.3</span> </p> </div> </body>

</html>


57

Chapitre5:CSS3

Tags de structuration: Eléments :

• Les éléments section, article, nav, aside, header, footer sont des éléments de structure, plus précis que <span> ou <div>

• Etablis à partir de statistiques d’utilisation des ids et classes les plus populaires du web,

– <div class="aside"> devient <aside> pour les menus sur le côté

• En devenant standards, on peut plus facilement leur appliquer une CSS standard, partageable,

• Les navigateurs peuvent les reconnaître et proposer un rendu spécifique,

• Il devient plus simple de générer une table des matières, par exemple


58

59

Exemple de structure globale <header> <h1>Nouveaux éléments de section, article, header, footer, aside, nav</h1> </header>  <nav>nav <ul> <li><a href="#">Rubrique 1</a></li> <li><a href="#">Rubrique 2</a></li> <li><a href="#">Rubrique 3</a></li> <li><a href="#">Rubrique 4</a></li> </ul> </nav>  <section id="main"> <article> .. </article> </section> Chaque article peut avoir sa propre struct ures <article> <header> <h1>Titre de l'article</h1> <p>Auteur : bidule</p> </header> <nav> <ul> <li><a href="index.html">Page d'accueil</a></li> <li><a href="contact.html">Contact</a></li> </ul > </nav> <p>Contenu de l'article</p> … <footer> <p>Posté par Simon, le <time datetime="2012-02-02 ">2 février 2012</time> </p> </footer> </article>

Programmation web1 complet

Education

Transcript of Programmation web1 complet