Programmation web1

933 views
810 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
933
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Programmation web1

  1. 1. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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 AssignedNames and Numbers, remplaçant l'IANA, Internet AssignedNumbers Agency, depuis 1998) qui est chargée d'attribuer des adresses IP 1
  2. 2. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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 2
  3. 3. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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 (HypertextMarkupLanguage), 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 3
  4. 4. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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.5Protocoles 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. SSL ou TLS : protocoles de transaction sécurisée, utilisés notamment pour le paiement sécurisé. 4
  5. 5. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Chapitre II : Le langage HTML 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 dudocument. Dans la plupart des cas, il s‟agit uniquement du titre. Le titre (“title”) du document est utilisé à deux fins: 5
  6. 6. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Dans la plupart des “browsers”, le titre est affiché dans la barre supérieure de lafenê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”). o 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. 6
  7. 7. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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écifier l’alignement horizontal d’un titre. 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écifier l’alignement horizontal du paragraphe. Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT" Exemple <p align="center">Ceci est un premier paragraphe centré</p> <p align="right">Ceci est un paragraphe aligné à droite</p> b/ Paragraphe en retrait Le marqueur “blockquote” décale le paragraphe à droite. Syntaxe: <blockquote>...</ blockquote> Exemple 7
  8. 8. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <blockquote>ce paragraphe a un retrait à droite</blockquote> c/ Paragraphe formaté Le marqueur “pre" est utilisé lorsqu‟on désire afficher du texte avec un caractèrenonproportionnel (“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éationet à 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èrementutile lorsqu‟on l‟utilise conjointement avec des images. Il introduit des retours delignes jusqu‟à ce que la marge droite, gauche ou les deux soient libres. CLEAR="LEFT ou RIGHT ou ALL" <br clear=left> <br clear=all> 8
  9. 9. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 b/ Ligne horizontale Le marqueur “hr” insère une barre horizontale. Syntaxe: <hr> 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 Instruction <CODE> 9
  10. 10. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <DEL> <DFN> <EM> <I> <INS> Texte supprimé mais qui reste présent Définition d'instance Emphase Italique Nouveau texte inséré à cet endroit <KBD> <Q> Clavier - Suite de caractères devant être tapés tel quel <S> <SAMP> Comme strike (barré) Exemple <SMALL> <STRONG> Police plus petite Encadre le texte par des guillemets <STRIKE> Forte accentuation rendue par du gras Texte barré (comme S) <SUB> <SUP> Texte en Indice 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 texte</font> face= « … »color= « … » size= « … »>.votre 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, size="+2" >exemple de police </font> serif" color="#FF0000" II.6.3 Caractères spéciaux 10
  11. 11. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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 : Caractère Code " & &quot; &amp; Space &nbsp; à &agrave; E &egrave ; E &eacute; 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 11
  12. 12. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Syntaxe: <ol> ... </ol> <ol> <lh>Titre de la liste</lh> <li>Elément 1</li><li>Elément 2</li> </ol> II.7.3 Liste de définition Le marqueur « dl » Délimite une zone de liste de définition qui contient des termes "dt" et desdescriptions "dd" Syntaxe: <dl> ... </dl> Le marqueur « dt » Introduit un nouveau terme de définition. Syntaxe: <dt> ... </dt> Le marqueur « dd » introduit une description du terme de définition. Le résultat à l’écran est undécalage du texte vers la droite. 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 COMPACT PLAIN SEQNUM Valeur Effet Visuel resserre l'interligne supprime les puces définit le premier numéro 12
  13. 13. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 START définit le premier numéro repart du numéro où il s'était arrété à la liste précédente numérotation chiffrée (par défaut) CONTINUE 1 numérotation en capitales A numérotation en bas de casse TYPE (pour les listes ordonnées) a I numérotation en chiffres romains (I, II, III, IV ...) i TYPE (pour les listes nonordonnées) numérotation en chiffres romains en bas de casse circle puce circulaire square puce carrée disc puce en disque II.7.5 Combinaison de liste Les listes peuvent être emboîtées les unes dans les autres, il suffit pour cela de définir unélément d’une liste comme étant une autre liste. <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 faut trouverune vache </dd> </dl> </li> <li> Dernier élément numéroté </li> </ol> 13
  14. 14. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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‟attributHREF=”” quidé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 lesparties actives du lien ("mots_sensibles" ci-dessous) et déclencheront lechargement 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 URLou 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‟undocument défini par un nom. 14
  15. 15. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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 Le lien proprement dit se définit avec le marqueur “a” suivi dehref= « #... » Syntaxe: <A HREF=”#nom”>mots_sensibles</A> Exemple : <A HREF="#bas_de_la_page>Aller en bas</A> Exemple : Lien interne et table des matières .... <ahref=”#partie1”>Première Partie</a> <a href=”#partie2”>Deuxième Partie</a> .... ... <aname=”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 alorsspécifier l‟ancre vers laquelle pointe le lien en ajoutant #_$_à la fin de l‟URL. Exemple :Ancre et lien externe <a href=”http://www.isetb.rnu.tn/cours/exemple.html#partie2”>Deux ième Partie</a> Et dans le document exemple.html on trouve la définition de l‟ancre suivante: <aname=”partie2”> <h2>Partie 2</h2> II.8.4 Lien et adresses relatives a. Ressource située dans le même répertoire que la page d'appel La valeur prise par l'attribut href est simplement le nom du fichier, par exemple <a href="index.html">. 15
  16. 16. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 b. Ressource située dans un sous-répertoire du répertoire contenant la page d'appel Il suffit de citer la suite des sous-répertoires jusqu'au fichier ressource, par exemple href="archives/2001/18072001.html". c. Ressource située dans un répertoire contenant la page d'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". d. Ressource située dans un répertoire situé dans une branche latérale Il faut remonter au répertoire commun par "../" puis redescendre la bonne branche, par exemple href="../../produits/convecteurs/rh1200x.html". II.8.5Lien vers des services Internet a/ Lien pour l’envoie d’ e-mail Un tel lien lance automatiquement l‟application de messagerie électronique en incluant lenom du destinataire. <A HREF="MAILTO:adresse_correspondant"> ancre </A> ou <A HREF="MAILTO:adresse_correspondant?Subject=Objet_du_message"> ancre </A> <a href=”mailto:tounsi.mohamed@yahoo.fr”>Envoyez message</a> moi un A HREF="MAILTO: tounsi.mohamed@yahoo.fr?Subject=Coucou">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.9Les Tableaux Un tableau doit respecter les quelques règles suivantes : 16
  17. 17. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13     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> <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 border="x" Rôle Epaisseur du cadre bgcolor=couleur Couleur des cellules Border color= Couleur des bordures Height taille en hauteur d’un tableau width=" " taille en largeur d’un tableau Align left, right, center cellpadding="y" Espace situé entre les bordures du tableau et le contenu des cellules cellspacing="y" Taille de la bordure entre les cellules  Attributs de cellule <TD> et <TH> align="letf / center / right / justify alignement horizontal 17
  18. 18. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 / char" valign="top / bottom / middle / alignement vertical, baseline" width="x" largeur de la cellule, height="y" hauteur de la cellule, colspan="x" définit une cellule dont la largeur est x fois celle de la colonne de base (fusion des x colonnes adjacentes), rowspan="y" définit une cellule dont la hauteur est y fois celle de la ligne (fusion des y lignes adjacentes), bgcolor="couleur" définit la couleur de fond, background="url" image de fond.  Attributs de ligne<TR> valign = "top / bottom / baseline / middle" alignement vertical align = "right / center / left " alignement horizontal bgcolor="couleur" couleur de fond de la cellule Les attributs sont appliqués pour toutes les cellules de la ligne sauf si un attribut de <TD> donne un autre ordre. 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> 18
  19. 19. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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”: <imgsrc=”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" 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 : Comme un tableau, un fichier frameset se construit en lisant les cadres de haut en bas, et de gauche à droite. 19
  20. 20. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Exemple1 : <FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="gauche"> <FRAME SRC="frame2.htm" NAME="droite"> </FRAMESET> Exemple2 : <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ée en pixels ou en pourcentage de la fenêtre totale. Les dimensions pour chaque colonne sont séparées par des virgules. (On note aussi qu'il est possible d'indiquer le signe "*" pour indiquer que la colonne occupe l'espace restant). 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" Indique l'espace entre les cadres. frameborder="yes/no" Indique ou non bordercolor="code héxadécimal" Couleur de la bordure des cadres (ici, les noms des 16 couleurs standard ne sont pas possibles). border="n" Indique la taille de la bordure si le cadre a une bordure Attributs de la balise<FRAME> : src="URL" Définit l'emplacement de la page à afficher dans le cadre 20
  21. 21. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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" marges disposées en haut et en bas du cadre. marginwidth="pixels" marges disposées de chaque côté du cadre. 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érieurdans le cas où plusieurs fenêtres du navigateur sont ouvertes) _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> 21
  22. 22. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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> 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 action Effet Valeur(s) URL du script qui URL, 2 types possibles : traite les données http : pour un traitement immédiat. recueillies. Cet mailto : dans le cas d'un envoi à un courrier attribut est électronique, en vue d'un traitement différé. obligatoire. 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. method Indique sous quelle forme vont être codées les informations envoyées. onsubmit Le code à exécuter Chaîne de caractères renvoyant vers une fonction script lors de la soumission. de traitement (par exemple une fonction JavaScript). Le code à exécuter Chaîne de caractères renvoyant vers une fonction script onreset lors de la remise à de traitement (par exemple une fonction JavaScript). zéro du formulaire. name Le nom formulaire. du target Spécifie la cible du Une liste de codage de caractères, séparée par des retour après espaces. traitement du serveur Une chaîne de caractères. 22
  23. 23. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Exemples Exemple pour un formulaire d'envoi de courrier électronique sur le serveur de Multimania : <formmethod="get" action="/cgi-bin/mailer">. Exemple pour un formulaire classique sans l'aide de script CGI : <forum action="mailto:webmaster@allhtml.com" method="post">. II.12.2 La balise <INPUT> 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, image, 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 caractères. de Alt Une courte description. Une chaîne caractères. de 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 Touche du clavier "ALT+touche" a le même effet que l'activation du champ. Tabindex Fixe la position de l'élément dans l'ordre séquentiel Valeur numérique des tabulations. entière Un script à exécuter quand le curseur est positionné Une chaîne onfocus, onblur sur le champ (onfocus), ou bien qu'il le quitte caractères. (onblur). Onchange Un script à exécuter quand contenu du champ a été Une chaîne de de 23
  24. 24. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 changé. caractères. 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. 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">Physique 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 : 24
  25. 25. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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> 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@multimania.com"> : cette valeur indique sur quelle adresse électronique le formulaire sera envoyé. <input type="hidden" name="FROM" value="login@multimania.com"> : cette valeur indique la provenance du formulaire. 25
  26. 26. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <input type="hidden" name="SUBJECT" value="FORMULAIRE"> : 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. 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. 26
  27. 27. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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. Attributs Attribut name rows cols readonly Effet Valeur(s) Une chaîne caractères. Nom de l'élément. de et Nombre de lignes et de colonnes de la zone de texte. Ces Un nombre entier. attributs sont obligatoires. 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> <textareaname="comment" rows="3">Ecrire votre cols="35" 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 : 27
  28. 28. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <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> Attributs de la balise <select> Attribut Effet Valeur(s) name Nom de l'élément. Une chaîne de caractères. size Le nombre d'options accessibles. Un nombre. multiple Permet à plusieurs options simultanément sélectionnées. d'être 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 : Attribut Effet Valeur(s) value Ce qui apparaît dans la liste d'options du menu. Si cet attribut Une chaîne de n'est pas présent, c'est le contenu de l'élément <option> luicaractères. 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> 28
  29. 29. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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. Attribut Effet Valeur(s) label Une étiquette désignant le groupe d'options choisies dans Une chaîne le menu. caractères. disabled Désactive l'élément, qui apparaît dès lors en grisé. de Un booléen. Exemple <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 malvoyants. Attributs Attribut Effet Valeur(s) for Renvoie à l'élément de formulaire spécifié par le même Une chaîne de caractères. attribut id. accesskey Définit une touche du clavier. La combinaison "ALT + Touche touche" a le même effet que l'activation du champ. clavier du 29
  30. 30. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Un script à exécuter quand le curseur est positionné sur le Une chaîne de caractères. champ (onfocus), ou bien qu'il le quitte (onblur). onfocus, 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. Attributs Attribut Effet Valeur(s) name Le nom du bouton. value Valeur envoyée au serveur. Une chaîne de caractères. type Une chaîne de caractères. submit button reset Type de bouton. (valeur par défaut) Exemples : <buttonname="soumet" value="modifier">Modifier l'information</button> <buttonname="continue" value="continuer">Continuer l'application</button> <button><imgsrc="checkmark.gif" <button alt="✔"></img>Sauvegarder</button> type="reset"><imgsrc="x.gif" alt="✘"></img>Remettre à zéro</button> Exercice : Ecrire le code HTML du formulaire suivant : 30
  31. 31. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 31
  32. 32. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Chapitre III : 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> ... <!-- Le reste du contenu --> ... </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 32
  33. 33. Matière : Programmation Web1 Enseignante : Ouroud HENIA • • • ISET Bizerte 2013/2014 Classe : TI13 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 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" /> 33
  34. 34. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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" /> 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 34
  35. 35. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13  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" onchange="printValue('slider1','rangeValue1')"/> <input id="rangeValue1" type="text" size="2"/> max="500" step="10" Etunefonction JavaScript <script> function var var x.value } </script> x y printValue(sliderID, = = = textbox) { document.getElementById(textbox); document.getElementById(sliderID); y.value; 35
  36. 36. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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 <input id="mysearch2" type="search" placeholder="search"> here : </label> 36
  37. 37. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Chapitre IV: Les feuilles de style CSS 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> 37
  38. 38. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <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=black;} H2 {font: 14px Arial;font-weight: bold;color=black;} 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.css"> </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 classique 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> ... </HEAD> 38
  39. 39. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <BODY> ... <BALISE Style="style:valeur;"> ... </BALISE> ... </BODY> </HTML> Exemple : <HTML> <BODY> <H1 style="font-family: </BODY> </HTML> Arial; font-style: italic">blabla</H1> 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"> <!-@IMPORT URL(url de la feuille à importer); Définition des styles du document; --> </STYLE> </HEAD> <BODY></BODY> </HTML> IV.3 Notion de feuille de style en cascade L‟abréviationCSS 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 39
  40. 40. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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 : 40
  41. 41. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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 classest 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'introduction.</p> <table summary="Un tableau peu informatif" class="machin"> <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> 41
  42. 42. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <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="vehiculeappartient_a_dupont"> bicyclette</span> affichera le mot bicyclette en italique et en rouge. Identifiant L'attribut idest un attribut qui peut aussi apparaître dans n'importe quel élément. La très grande différence avec l'attribut classest qu'une valeur de idne peut être prise qu'une seulefois dans toute la page Web. C'est un identifiant : par nature, sa valeur est unique. Exemple : <p id="monpar">Ceci est un paragraphe d'introduction.</p> <ol id="maliste"> <li>Et ceci</li> <li id="item2">est une</li> <li class="truc">liste<imgsrc="images/chapeaurond.gif" alt="Vive la 42
  43. 43. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Bretagne!" height="20" width="40" id="monimage"></li> </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; } IV.4.3 Sélecteurs complexes Sélecteur contextuel Prenons un exemple : h2em { 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; 43
  44. 44. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 } ulul { 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 : 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 { 44
  45. 45. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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 after modifie le style de ce qui suit l'élément. before modifie le style de ce qui précède l'élément. courant. Les trois derniers ne sont pas supportés par Internet Explorer. Exemple : p:first-letter { color : red; font-size : 200%; font-weight : bold; } 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. 9. 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és absolues de longueur Unité Notation inch (pouce) in Conversion 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 : 45
  46. 46. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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. Unités relatives de longueur Unité Notation Em Em xex height pixel px Conversion 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). 1ex est la taille de la lettre 'x' minuscule. 1pixel (pictureelement) : 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. Exemples d'utilisation : h1 { margin :0.5em; } h2 { line-height : 1ex; } h3 { 46
  47. 47. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 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. Exemples d'utilisation : 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 gaucheoccuperont 33% de la largeur du tableau où elles se trouvent. Couleurs 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, teal, 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%)). Les balises DIV et SPAN en CSS Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux de texte, c'est à cela que servent les balises <SPAN> et <DIV> o <SPAN> La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec ID qu'avec CLASS. Sa syntaxe est la suivante : <SPAN class=Nom_de_la_classe> Texte </SPAN> o <DIV> 47
  48. 48. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise DIV s'applique à un bloc, c'est-à-dire à un ou plusieurs paragraphes. La syntaxe de la balise DIV est la suivante : <DIV class=important> paragraphes </DIV> 48

×