HyperText Markup Language Format privilégié des pages Web

Transcription

1 Le langage HTML HyperText Markup Language Format privilégié des pages Web 1 HTML! Langage : implique syntaxe, règles de grammaire! Hypertexte : " C est à dire lecture non linéaire : # liens vers des fichiers extérieurs, sur l ordinateur local ou bien sur une machine quelque part ailleur sur le réseau Internet.! Des balises (marqueurs, tags) : sont des commandes transmises aux navigateurs (NetScape, IE, icab, Chimera, Safari, Mozilla, Lynx )! Les fichiers au format HTML, contenant les ordres de mise en page ont l! extension.html, ou.htm, ce sont les pages Web! La page Web : tout ce que l! on peut voir à l! aide de son Navigateur, en jouant avec l! ascenseur de la fenêtre.! Une présentation Web contient une ou plusieurs pages Web,! Un site Web correspond à une présentation Web 2 1

2 Fichier de type texte : Plain ASCII! Code ASCII : # Nombre entier correspondant à un caractère, un chiffre ou un symbole (accessible au clavier ou non). # Ce nombre est compris entre 0 et 255 Ex: codeascii (A) = 65, codeascii (&) = 38! Une version de HTML est une " DTD (Document Type Definition), " Elle fait partie d un standard plus vaste SGML (Standard Generalized Markup Language)! Ce document est du texte ordinaire, il contient " Le texte du document, # C est à dire l information que vous voulez donner. " Les balises ou marqueurs HTML, «entourent» le texte : # Pour préciser la structure du document, la mise en forme du texte et les liens hypermédias. " <nombalise> le texte concerné </nombalise> # Les balise vont par deux en général, mais parfois sont seule 3 Les éditeurs de pages Web! Les logiciels de traitement de texte " Simple : WordPad, SimpleText, Teachtext (Mac), bloc-note " Évolués (Word, AppleWorks), mais surtout sauver en «texte ASCII».! Les éditeurs WYSIWYG (visuels) " Des opensources comme NVU, les commerciaux Adobe GoLive, MacroMedia DreamWeaver, FrontPage de MicroSoft # Créent plus ou moins proprement le code HTML, # Permettent aussi d intervenir dans le code HTML, parallèlement au mode graphique. # Ils proposent également des scripts JavaScript (ex : boutons «survol», carte réactive), des feuilles de styles etc...! Les convertisseurs (moins bons résultats), " Transforment un texte formaté dans un logiciel de traitement de texte en texte HTML : # Rtf2html, latex2html, # Des logiciels tels que Word, PowerPoint, Quark XPress proposent d enregistrer au format HTML. Mais il est souhaitable de revoir et de «nettoyer» le code créé. 4 2

3 Généralités d! écriture! Les Balises " Nom de la balise encadré par < et > # Double : affecte une partie de la page <balisegras> texte gras </balisegras> <B> texte gras </B> # Seule : provoque une rupture dans la page Un texte <balisechangedeligne> Un texte <BR> " Syntaxe : Majuscules et minuscules : indifférent, Le changement de ligne tapé dans un texte n est pas reconnu par les navigateurs, il faut le lui signaler par une balise. " Attributs des balises # Pour préciser l effet d une balise on lui adjoint un ou plusieurs attributs Chaque attribut est séparé par un espace, À chaque attribut est affecté une valeur : texte (entre guillemets) ou nombre, <balise attribut1=nbr attribut2=«toto»> Par exemple : <font size=2> mon texte </font> <a href=« voyages </a> 5! Les caractères spéciaux " Pour représenter tout ce qui n est pas # Des lettres (de l anglais) et des chiffres Donc pour les accents, chaque accent porte un nom Certains caractères de ponctuation Certains caractères qui ont un nom : copyright, & : ampersand, # Règle à suivre : &lalettrenomaccent; &nomcaractère; &#CodeASCII; Attention il n y a pas d espace entre les délimiteurs & et ; Chaque accent porte un nom, et ce nom est précédé de la lettre à laquelle s applique l accent sous la forme suivante : Accent aigu : acute, Accent grave : grave, Accent circonflexe : circ Tréma : uml, Cédille : cedil, Tilde : tilde Lettre surmontée d un o : ring, lettre barrée : slash Lettre collée à une autre (œ, æ) : lig Exemples : é par exemple le mot Déjà s écrit Déjà > ou bien &#gt; pour le signe > indique un espace insécable 3

4 ! Les liens dynamiques # Ils servent à référencer d autres documents des fichiers aux formats standards du Web : Fichiers textes au format HTML, d extension :.html ou.htm Fichiers multimédias : Fichiers sons d extension :.au,.midi,.wave,.mov ou.qt (QuickTime) Fichiers images d extension : ;gif,.jpg ou jpeg,.png Fichiers vidéos d extension :.mpeg,.avi,.mov.qt (QuickTime) # Selon l endroit où se trouve le fichier l adressage peut être Absolu sur le réseau Internet Interne absolu, à la machine locale : nomdd/web/media/images/pict.gif Interne relatif : images/pict.gif../ressources/fonds/cieldenuit.gif Structure d! un document HTML - La page Web! Balises de structure globale " HTML, HEAD, BODY, ADDRESS <HTML> <HEAD> <!-- renseignements utiles sur le document--> <TITLE>Un Titre causant</title> </HEAD> <BODY> Le corps le document = le contenu, l information que l on veut afficher dans le navigateur des visiteurs.. <BODY> <ADDRESS> <!-- renseignements utiles pour l internaute--> </ADDRESS> </HTML> Pour l internaute : apparaît dans la barre de titre de la fenêtre du navigateur, et est enregistré comme signet 8 4

5 ! L! en-tête " On y trouve le titre de la page Web, qui doit être assez explicite : balise TITLE. " Ce titre s affichera # Dans la barre de titre de la fenêtre de navigation # Dans la page des signets (marque-pages, bookmarks ou favoris) # Par défaut, si aucun titre n est spécifié, c est le nom du fichier qui sera utilisé Par exemple : index.html, default.htm, Ce qui n est pas descriptif du contenu de la page, ni mémo-technique. # Ce nom doit être spécifié ainsi il est différent du nom du fichier HTML de la page Web. N oubliez pas que les noms de fichiers ne doivent pas contenir d accents, de blanc, de caractères spéciaux, le titre de la fenêtre peut en contenir! " On y trouve des renseignements sur le contenu du document qui seront utilisés par les moteurs de recherche, pour répondre aux requêtes posées par un visiteur. # Mais, elles sont non-visibles par le visiteur, le navigateur ne les affiche pas " <META name=«nom» lang=«langue» content=«contenuassociéàname» > Ex : <META name= description content= Phrase_décrivant_votre_site > La balise META! Les attributs les plus courants à la balise META : # L attribut LANG indique le langage dans lequel est rédigé le contenu de l attribut CONTENT. Certains moteurs de recherche permettent de faire des sélections en fonction de la langue utilisée. # Pour un site en français, mettre lang=«fr» («en» pour anglais, «en_us» pour américain,...). Ce champ n est pas obligatoire. # Les valeurs les plus utiles de l attribut NAME : # name=«author» content=«nom_de_l auteur» : indique le nom de l auteur de la page # name=«keywords» content=«liste_de_mots_clés_séparés_par_virgule» : donne une liste de mots-clés qui pourront correspondre aux critères de recherche entrés par l internaute dans un moteur de recherche. # name= description content= Phrase_décrivant_votre_site : petit texte qui s affiche dans les réponses des moteurs de recherche et qui décrit le site. Évitez les accents, tous les moteurs de recherche ne les traduisent pas. <HTML> <HEAD> <TITLE>Observatoire de Paris</TITLE> <META name= author lang= fr content= toto > <META name= keywords lang= fr content= observatoire, Paris, astronomie, recherche > <META name= description content= Le Site de l Observatoire de Paris. > </HEAD>... </HTML> 10 5

6 ! Le corps du texte " Les attributs de la balise BODY permettent de modifier # La couleur du fond : BGCOLOR # La couleur du texte : TEXT # La couleur des liens non visités : LINK # La couleur des liens déjà visités : VLINK # La couleur des liens à l instant du clic : ALINK " La règle est : # ATTRIBUT = #rrggbb # Où rr, gg et bb indiquent les quantités de couleur Rouge Verte et Bleu en hexadécimal : entre [00..FF]. Par exemple : Noir : Blanc : FFFFFF Rouge : FF0000 Vert : 00FF00 Bleu : 0000FF Jaune : FFFF00 Magenta : FF00FF Gris moyen : Etc <HTML> <HEAD>... </HEAD> <BODY BGCOLOR=«#003366» TEXT= «#CCCCFF» > du texte </BODY> </HTML>! Le fond de la page sera bleu foncé et le texte bleu pâle # Vous pouvez également écrire le nom de la couleur en anglais! Le pied de page ex : <BODY BGCOLOR=pink> " Le texte encadré par la balise ADDRESS sera affiché en italique; # On y trouve, habituellement, les informations suivantes : Nom et coordonnées de l auteur Adresse électronique de la personne à contacter au sujet de la page La date de la dernière modification URL de la page bien pratique lorsqu on l imprime de garder une trace de l adresse sur le web de la page! Les commentaires - Pour votre usage personnel : <!-- no comment --> # Aide au développement et à la maintenance # Important dans le cas d un travail d équipe. 6

7 Modifier la présentation du texte! Le texte sous HTML est écrit!au kilomètre!. " Les changements de ligne (par la touche RETURN ou ENTREE ) ne sont pas pris en compte par les navigateurs. Il faut impérativement mettre de façon explicite dans le HTML les changements de ligne que l on veut imposer.! La balise imposant un changement de ligne est <BR> # C est une balise seule, l abréviation de BREAK.! Changer de paragraphe balise <P> (pour PARAGRAPHE). # Impose un changement de ligne puis saut de ligne.! Tracer une ligne horizontale (en anglais : Horizontal Rule). # Balise <HR> et ses attributs SIZE, WIDTH, ALIGN Ex : <HR SIZE=10 WIDTH=«50%» ALIGN=left> Notons que ces trois balises s utilisent seules.! Pour centrer du texte dans la page Web : <CENTER> partie de texte que l on veut centrer </CENTER> 13! Styles de caractères " Pour faire ressortir certaines informations de votre page Web : <B> </B> Gras (Bold face) <I> </I> Italique <U> </U> Souligné (Underline) <STRIKE>texte</STRIKE> Barré # Ce sont des balises doubles (qui encadrent donc le texte affecté), qui peuvent s emboîter les unes dans les autres. " Texte en exposant ou en indice : <SUP> </SUP> <SUB> </SUB> x èm X n " Texte à la manière d un télétype :! Police de caractère texte <TT> </TT> machines à écrire (taille constante des lettres) " Pour que le navigateur affiche votre texte dans la police de caractère de votre choix : balise FONT # Au cas où cette police n existerait pas sur l ordinateur du visiteur, il est souhaitable d indiquer une deuxième police courante comme Arial : <FONT FACE=«Brush Script, Arial»> du texte </FONT> 7

8 ! Taille des caractères pour les titres : " La balise <Hn> où n varie de 1 à 7 # 1 correspondant à la plus grosse taille, 7 à la plus petite Cette balise permet d écrire le texte encadré en gras, à la taille indiquée, Elle provoque un changement de ligne à la fin, En général, la taille standard du reste du texte correspond à la taille 4. La taille réelle à l affichage peut être différente selon le navigateur. # Ex : <H1>Voici le gros titre</h1> <H2>Voici un plus petit titre</h2> <H5>Et voici un tout petit titre</h5> Vous donnera quelque chose du genre : Voici le gros titre Voici un plus petit titre Et voici un tout petit titre! Pour le texte en général : " Pour améliorer votre présentation, vous pouvez # Modifier la taille de l ensemble du texte, d une partie du texte ou de certains caractères : <BASEFONT SIZE==«3»> N! affecte pas la taille des titres de la page. Cette balise n! est plus très employée maintenant, elle est remplacée par l! utilisation des feuilles de styles, CSS (voir HTML avancé). # La balise FONT et son attribut SIZE : <FONT SIZE=n> </FONT> n représente la taille absolue ou relative des caractères. En absolu, n varie de 1 à 7, En relatif, n varie de -6 à +6, sans pouvoir dépasser les bornes de taille absolue 1 et 7. Attention, tous les navigateurs ne sont pas capables de gérer les 7 tailles de caractères " Actuellement pour la gestion des textes, # balise DIV et les CSS sont souvent utilisées Les balises CENTER, FONT sont dans la norme du html transitionnel et ne sont pas dans la norme du htlml4 stricte. 8

9 ! Modifier la couleur d! un texte " Une partie du texte <FONT COLOR=«#FF00FF»>texte</FONT > " Rappel pour l ensemble du texte <BODY TEXT=«#FF00FF»>texte</BODY >! Créer une citation # Le navigateur applique un retrait du texte des deux côtés de la page <BLOCKQUOTE>texte</BLOCKQUOTE >! La balise <PRE> (preformatted) affiche le texte entré tel quel; par exemple : <PRE> ! Tableau! ! Col 1! Col 2! </PRE> Présentation du texte Les listes! Pour afficher une liste de!choses!, bien alignées : " Les listes à puces # Balises <UL> unnumbered list et <LI> ligne # Taper <UL> avant la liste (</UL> après) et <LI> devant chaque élément de la liste. <UL> <LI>Entrée <LI>Pàtes <UL> <LI>Lasagnes <LI>Tortellini </UL> <LI>Café </UL> Va donner quelque chose du genre : Entrée Pâtes Lasagnes Tortellini Café 18 9

10 " Les listes numérotées # Balises <OL> (pour Ordered List) et <LI> Même principe On peut bien sûr mélanger les types de listes : <OL> <LI>Elément 1 <LI>Elément 2 <UL> <LI>Elément 2-1 <LI>Elément 2-2 </UL> <LI>Elément 3 </OL> Va afficher quelque chose du genre 1. Elément 1 2. Elément 2 Elément 2-1 Elément Elément 3! Les listes de définitions (termes et définitions) # Pour un glossaire par exemple, balises <DL> et <DT> Taper <DL> avant la liste (</DL> après) <DT> devant chaque terme de la liste <DD> devant chaque définition de la liste <DL> <DT>Bande passante <DD>Débit maximum utilisable sur une liaison... <DT>IPng <DD>Internet Protocol next generation, future version 6 du protocole IP etc... </DL> Va afficher quelque chose du genre Bande passante Débit maximum utilisable sur une liaison Ipng Internet Protocol next generation, future version 6 du protocole IP etc... 10

11 Intégrer une image! Ne pas oublier, avant d! insérer une image, # De vérifier les problèmes de copyright, # De tenir compte de la résolution, la taille et le poids de l image (temps de chargement, taille écran). # Qu une même image utilisée dans plusieurs endroits d une page Web n augmente pas le temps de chargement (copie stockée provisoirement).! Pour insérer une image dans une page Web, la balise <IMG>. # C est une balise seule. # Elle possède toujours au moins un attribut qui indique le chemin d accès au fichier image qui doit être inclus dans la page web. L inclusion d une image dans le texte n implique pas un changement de ligne. Si on en veut un, il faut ajouter une balise <BR>, ou <P>. " La forme la plus générale pour l insertion d image est la suivante : <IMG SRC= NomFichierImage ALIGN=aQuelEndroitParRapportTexte HSPACE=valeur VSPACE=valeur WIDTH=valeur HEIGHT=valeur BORDER=valeur ALT= textealternatif > 21! Les attributs de la balise <IMG> " SRC : Indique le nom complet (chemin d accès compris) du fichier image. D une façon générale, l image doit être au format JPEG ou GIF ou PNG. Ex : <IMG SRC=../Images/maPomme.jpg > " ALIGN, peut prendre les valeurs : top, middle ou bottom pour indiquer comment l image doit être alignée par rapport au texte. Top fait correspondre le haut de l image à la ligne de texte courante, middle fait correspondre le milieu de l image, bottom le bas de l image. left ou right pour placer l image à gauche ou à droite de la page, tout en permettant au texte de s écouler autour = habillage de l image. Ex : Une pomme <IMG SRC= Images/maPomme.jpg ALIGN=middle> Remarque : pour mettre fin à l habillage : <BR CLEAR=valeur>, où valeur peut être left, right, all Attention, contrairement à la plupart des attributs, il n y a pas de guillemets autour du positionnement " HSPACE et VSPACE : À quelles distances horizontale et verticale du texte environnant se trouve l image. La valeur donnée est exprimée en pixels. " WIDTH et HEIGHT Définissent la taille que l on désire lors de l affichage (respectivement la largeur et la hauteur de l image). On peut imposer une nouvelle taille à une image, souvent plus petite. Mais attention l image entière est téléchargée, et à l impression on aura la taille originale. Il vaut mieux créer une image vignette, dans un logiciel de traitement des images, qui pointera vers l image au format original. 11

12 " BORDER : Pour dessiner un cadre autour de l image. La valeur de cet attribut, exprimée en pixels, indique l épaisseur de la bordure. " ALT : Est important Pour ceux qui ne disposent pas d un navigateur graphique (rare), Pour ceux (plus nombreux) qui ont désactivé le chargement d image sur leur navigateur, afin de gagner du temps de chargement. L attribut ALT permet de mettre un texte qui s affichera lorsque l image ne sera pas chargée. En général, on y met le descriptif ou le nom de l image.! Image servant de lien (d ancre) - Forme générale d! un lien : <A HREF=... > objet sur lequel on clique </A>, Objet : texte ou image à cliquer qui, si on clique dessus, enverra l utilisateur à l adresse indiquée dans l attribut HREF : <A HREF= url > <IMG SRC= nomfichierimage ></A> Exemple d utilisation : une imagette s affiche et, si l on clique dessus, l image correspondante est chargée sur une nouvelle page à sa taille réelle. Remarque : Rien n empêche d utiliser une image pour changer de page. Par exemple pour une série de pages Web qui se suivent, utiliser des images de flèches, pour se déplacer de pages en pages. On peut remplacer des éléments de texte par des images symbolisant ces éléments (puces, trait horizontal,...) : il faut que leur représentation ne prête pas à confusion, et rester cohérent dans tout le site. HREF nous permet donc d établir, selon sa valeur, un lien vers une image ou une autre page Web Les liens résumé! Veillez à vérifier vos liens, une fois qu! ils sont créés. " Créer un lien vers une page Web externe <A HREF=« <IMG SRC= image/logocaolink.jpg ></A> " Créer un lien dans la page elle-même : une ancre 1) Nommer la partie concernée dans la page Web Donc à un endroit de la page <A NAME=«etiquette1»></A> 2) Créer un lien vers cette partie (grâce à son nom) Donc au dessus de l endroit étiquetté <A HREF=«# etiquette1»>... </A> " Créer un lien vers une image <A HREF=... > <IMG SRC=... ></A> " Créer un lien vers une messagerie électronique <A HREF=«mailto :prenom.nom@nomdedomaine»> Envoyez-moi un mél </A> À éviter pour les problèmes de SPAM 24 12

13 Tableaux! Un tableau est utile pour : " Présenter une liste de données, " Présenter le texte en colonne comme dans un journal, " Contrôler le positionnement des objets (textes et images) dans votre page, " Créer une bordure 3D autour d un objet.! Créer un tableau avec la balise <TABLE> " Il faut ensuite lui indiquer chaque ligne du tableau, et dans chaque ligne, indiquer chaque changement de cellule. # Une ligne de tableau est indiquée par la balise <TR> (pour Table Row). # Les débuts de cellules sont marquées par <TD> (Table Division). Il n y a pas de balise de fin de cellule. Remarque : Un tableau peut être formé d une seule ligne, ou d une seule colonne. Certaines cellules peuvent être vides ; il suffit pour cela de ne rien mettre derrière la balise de début de cellule <TD> mais attention les navigateurs peuvent interpréter différemment les cellules vides. Ex : <TABLE> <TR><TD>Cellule 1-1<TD>Cellule 1-2</TR> <TR><TD>Cellule 2-1<TD>Cellule 2-2</TR> </TABLE> 25 Ex :Pour obtenir le tableau : Titre colonne 1 Titre colonne 2 Cellule 1-1 Cellule 1-2 Cellule 2-1 Cellule 2-2 Ceci est un tableau il faut entrer le code HTML suivant : <TABLE> <TR><TH>Titre colonne 1<TH>Titre colonne 2</TR> <TR><TD>Cellule 1-1<TD ALIGN=right>Cellule 1-2</TR> <TR><TD>Cellule 2-1<TD ALIGN=right>Cellule 2-2</TR> <CAPTION><B>Ceci est un tableau</b></caption> </TABLE> Souvent, la première ligne d un tableau représente le titre des colonnes, Il suffit pour cela de remplacer, dans la ligne correspondante, les balises de début de cellule <TD> par <TH> (Table Head). Pour obtenir une légende au tableau : la balise <CAPTION> L attribut ALIGN, valeurs top ou bottom (haut ou bas) permet de placer le texte au dessus ou au dessous du tableau. 13

14 " Pour choisir le type de justification du texte : # Alignement à droite, à gauche, ou centré Dans chaque ligne ou chaque cellule, Pour la position du texte (en haut, en bas ou au centre des cellules). " Pour ce faire, il faut introduire dans les balises # <TR> (pour toute une ligne) ou # <TD> (pour une cellule seulement) les attributs : ALIGN pour la justification du texte, avec les valeurs left, right ou center (gauche, droite ou centrée) VALIGN (alignement vertical) pour la position du texte, avec les valeurs top, bottom ou center (haut, bas ou centre). # L attribut BORDER permet de dessiner des bords au tableau, la valeur s exprime en pixel si BORDER=0 bords invisibles à l affichage Tableaux les cellules! On peut accompagner la balise <TABLE> des attributs suivants pour jouer sur les cellules: " BORDER=n # donne l épaisseur de la bordure de tableau en pixels " CELLSPACING=n # donne l espacement entre les cellules du tableau en pixels " CELLPADDING=n # distance entre le bord de cellule et le bord de texte en pixels " WIDTH=n%, ou =n # impose la taille du tableau en pourcentage de la taille de la fenêtre du navigateur, on peut l indiquer aussi en nombre de pixels. Ex : <TABLE BORDER=6 CELLSPACING=6 CELLPADDING=10 WIDTH=90%> </TABLE> 28 14

15 Tableaux de toutes les formes...! Les tableaux sont encore souvent utilisés par les créateurs de pages Web pour fixer les éléments images, textes, barre de navigation dans la page, quelque soit les caractéristiques de l! écran du visiteur.! Groupement de lignes et de colonnes # L attribut ROWSPAN=n, indique que n cellules sont regroupées horizontalement # Pour regrouper des cellules verticalement, le principe est le même : l attribut est COLSPAN=n. Ex : la ligne s écrit : <TR><TD>x<TD>y<TD>z</TR> x y z la ligne s écrit : <TR><TD COLSPAN=2>x<TD>z</TR> x z Remarque : Les créateurs de pages web utilisent de plus en plus les feuilles de style pour la mise en page des éléments des textes, images, Animations, liens dans leurs pages. 29 <EMBED> Ajouter une vidéo ou un son! Cette balise vous permet d! ajouter un son ou une vidéo qui sera «!jouée!» dans le corps de votre page. En interne à la page. <center> <p> <H2>Voici un divertissement, musique ou film<h2> <EMBED SRC = «nomfichiersonouvideo» AUTOSTART = true LOOP = true> </center> Les attributs souvent utilisés avec <embed> sont " AUTOSTART (true, false), # Lu automatiquement ou non, si false l internaute doit cliquer pour lancer " LOOP (true, false), # Lu en continu, jusqu à ce que le lecteur clique ou affiche une autre page " WIDTH (= nombrepixels) " HEIGHT(= nombrepixels) # Largeur et hauteur souhaitées! Rappel : appel d un fichier son ou vidéo en externe <A HREF=«sol.mov»><IMG SRC=«sol.jpg»></A> Lorsque l internaute clique sur l image sol.jpg, la vidéo sol.mov (format QuickTime) s ouvre dans une nouvelle fenêtre du navigateur, ou dans l application correspondante

16 <FORM> Les formulaires! Ils vous permettent de recueillir des informations entrées par vos visiteurs : " Dans des champs éditables, à l aide de boutons radio, ou cases à cocher que vous mettez à leur disposition. # Vous les définirez dans vos formulaires " Ces informations seront ensuite traitées sur le serveur de la page, # Grâce à un programme appelé script CGI - Common Gateway Interface.! Définir un formulaire: " Entre les balises <FORM> et </FORM> " Et les attributs # METHOD, indique le mode de transfert des données d un formulaire rempli par l internaute vers le serveur de la page (post ou get). # ACTION, identifie l emplacement du script CGI sur le serveur de la page, associé au formulaire. <FORM METHOD=post ACTION=«/cgi-bin/traitement.pl> ici définir les zones de texte, les cases à cocher, les boutons d options </FORM> 31 Zone de texte dans un formulaire! Petite zone de texte, balise <INPUT> <FORM METHOD=post ACTION=«/cgi-bin/traitement.pl> <BR>Veuillez entrer votre nom de famille : <INPUT TYPE = «text» NAME=«Nom» SIZE = «20» MAXLENGTH =«19» > </FORM>! Grande zone de texte, balise <TEXTAREA> <FORM METHOD=get ACTION=«/cgi-bin/traitement.pl> <TEXTAREA NAME=«zoneCommentairesVisiteurs» ROWS = «10» COLS =«60» WRAP > </TEXTAREA> </FORM> Les nombres de lignes et de colonnes de la zone sont spécifiés par les attributs ROWS et COLS, WRAP assure le retour à la ligne automatique dans la zone. Une barre de défilement est automatiquement ajoutée lorsque le texte de l internaute ne peut figurer en entier dans la zone proposée

17 Case à cocher, boutons d! options! Case à cocher <FORM METHOD=post ACTION=«/cgi-bin/traitement.pl> <BR>Que préférez-vous? : <BR> <INPUT TYPE = «checkbox» NAME=«musique» VALUE = «Classique» CHECKED> de la musique classique <BR> <INPUT TYPE = «checkbox» NAME=«musique» VALUE = «Jazz»> ou plutôt du Jazz </FORM>! Boutons d! options <FORM METHOD=post ACTION=«/cgi-bin/traitement.pl> <BR> Votez : <BR> <INPUT TYPE = «radio» NAME=«eval» VALUE = «pour»> Je vote pour <BR> <INPUT TYPE = «radio» NAME=«eval» VALUE = «contre»> Je vote contre </FORM>! Il faut donc : " Donner un terme qui identifie le groupe de choix, par l attribut NAME, " Donner un terme qui défini la valeur du choix, par l attribut VALUE, " Puis indiquer le texte qui sera affiché à côté du bouton ou de la case. 33 Les boutons importants! Soumission (submit) et Réinitialisation (reset) <FORM METHOD=post ACTION=«/cgi-bin/etude.pl> <BR>Que préférez-vous? : <BR> <INPUT TYPE = «checkbox» NAME=«musique» VALUE = «Classique» CHECKED> de la musique classique <BR> <INPUT TYPE = «checkbox» NAME=«musique» VALUE = «Jazz»> ou plutôt du Jazz.. <P> <INPUT TYPE = «submit» VALUE=«Envoyer»> <P> <INPUT TYPE = «reset» VALUE=«Effacer»> </FORM>! Deux méthodes possibles " GET : si un programme CGI est appelé par la méthode GET, # Les paramètres sont inclus dans l URL de la requête, # Le serveur les envoie au programme via la variable d environnement unix, QUERY_STRING " POST : si un programme CGI est appelé par la méthode POST, # Les paramètres sont inclus dans le corps de la requête, # Le serveur donne le texte au programme via l entrée standard unix (stdin) 34 17

18 <FRAMESET> Les cadres! Permet de scinder la fenêtre d! un navigateur en plusieurs parties.! Il faut spécifier : " La hauteur et la largeur de chaque cadre, " Le nom du fichier html affiché dans chaque cadre, # Chaque partie présente le contenu d un fichier HTML distinct. " Cette technique est de moins en moins utilisée. # Elle peut être utile pour créer une «barre de navigation», des informations annexes : copyright, notes de bas de pages " La balise de définition des cadres <FRAMESET> # se place en dessous de la balise de fin d en-tête </HEAD> </head> <FRAMESET ROWS = «70,*»> <FRAME NAME =«barrenav» SRC =«nav.html» > <FRAME NAME = «pageprincipale» SRC =«index.html» > </FRAMESET> 35! Créer un lien affichant un fichier HTML dans un cadre. " Cela vous permet de créer une barre de navigation # La barre de navigation est un fichier HTML, qui affichera des choix : Repérés par un texte, une image ou les deux, Qui seront des liens vers un autre fichier HTML et le navigateur devra afficher ce fichier dans le cadre de votre choix. Balise <TARGET> (cible). " Dans le fichier HTML où vous voulez créer les liens (nav.html, par exemple) : <body>. <BR><A HREF = «accueil.html» TARGET = «pageprincipale»> Accueil </A> <BR><A HREF = «equipe.html» TARGET = «pageprincipale»> L équipe </A>... </body> 18

19 DHTML! Dynamic Hypertext Markup Language! Le DHTML n'est pas un langage propre, il désigne des pages Web dynamiques. C est la combinaison de feuilles de styles (CSS), et de scripts (JavaScript pour la plupart). " Le HTML dynamique : # Est un ensemble de technologies incorporées à la plupart des navigateurs de génération 4. # Il est basé sur plusieurs technologies développées en même temps par le consortium de World Wide Web : le HTML, les feuilles de style, cascading style sheets (CSS, CSS2 et HTML), et le JavaScript. " Ensemble, ces technologies supportent un contenu plus riche et plus dynamique. # Toutes les astuces utilisées hier par les pionniers du HTML qui manipulaient les tableaux pour simuler le multi-colonage, ou qui truffaient leurs pages d'images transparentes pour justifier leur texte peuvent être évitées par l usage des feuilles de style qui font partie maintenant de la norme HTML, toutefois tester toujours vos pages dans différents navigateurs en particulier si vous utilisez les CSS2 37 <SCRIPT> java et javascript! Les pages Web écrites en HTML pur sont très statiques.! Pour rendre les documents plus interactifs, " Il existe diverses techniques, plus ou moins bien intégrées au langage HTML et plus ou moins bien interprétées par tous les navigateurs, entre autre Java et JavaScript. " Java, est un langage de programmation orienté objet (comme le C++). # Langage de programmation conçu par SUN # Une machine «virtuelle» java sur la machine de l internaute traite le code objet téléchargé et exécute l applet java. " JavaScript repose sur la syntaxe Java, mais avec des allègements et des simplifications. # Langage simple et interprété conçu par NetScape # Du côté client, le code JavaScript est inclus dans le document HTML, il permet d avoir du code exécutable diffusé sur le réseau. # Du côté serveur, c est une alternative aux CGI

20 JavaScript! C'est un langage de programmation interprété: " Les programmes sont lus et exécutés ligne par ligne, comme les fichiers BASIC, DOS ou PERL. # Les demandes de l'utilisateur, tel qu'un clic de souris ou le passage de la souris au-dessus d'un lien = gestion des événements, sont traquées par Javascript qui permet de programmer des actions en réponse aux demandes. # A la différence d'un script CGI, par exemple, où les calculs se font sur le serveur Web, JavaScript s'exerce directement sur la machine de l'utilisateur. Donc plus rapide, puisqu'il n'est pas nécessaire d'émettre puis de recevoir des données.! On écrit le code JavaScript : " Dans la partie HEAD du fichier HTML, " Puis on place dans la partie BODY une commande qui l'exécute # L'exécution peut se faire: automatiquement, par exemple à l'ouverture du fichier HTML ("onload") lors d'un clic de souris (commande "onclick") lors du passage de la souris sur une zone réactive ("onmouseover") 39! Ce que vous pouvez faire avec JavaScript : " Contrôler le contenu et la mise en page de la page Web, générer du code HTML : # Une partie d un document Web ou tout un document, # Il sera analysé par l arpenteur. # Grâce à l objet Document de JavaScript. " Contrôler le comportement de l arpenteur : # Créer des boîtes de dialogue, # Ouvrir de nouvelles fenêtres de l arpenteur " Interagir avec le document # En particulier avec l objet Form, permet de lire et écrire des éléments de page. " Interagir avec l utilisateur # Définir des «gestionnaires d événements», bouts de code qui s exécuteront en réponse à une action de l utilisateur. " Lire ou écrire des «cookies». " Réaliser n importe quel calcul. " 20

21 Un exemple JavaScript! <!-- This script has been in the Javascript Public Library! --> <HTML> <HEAD> <TITLE>Number Square</TITLE> <SCRIPT> function compute(obj) { obj.result.value = eval(obj.number.value * obj.number.value) } function Clear(obj) { obj.result.value = ""; obj.number.value = ""; } </SCRIPT> </HEAD> <BODY> <FORM NAME="evalform">Please Enter A Number:<BR> <INPUT TYPE=text NAME="number" SIZE=20 ><BR> <INPUT TYPE="button" VALUE="Square Of Number" onclick="compute(this.form)"><br> Result:<BR> <INPUT TYPE=text NAME="result" SIZE=20 ><BR> <INPUT TYPE="button" VALUE="Clear" onclick="clear(this.form)"> </FORM> </BODY> </HTML> <!-- de Tommy Raven (Min) says Moo. --> 41 Les feuilles de style! Cascading Style Sheet!: feuilles de styles # Les feuilles de styles en cascade (CSS), utilisées dans un document HTML, définissent les propriétés des balises HTML du document, c està-dire sa mise en forme. # La gestion, la conception d un site Web sont optimisées par l utilisation de feuilles de style. # Avec un seul document externe, la feuille de style, fichier au format texte, dont le nom porte l extension.css peut contrôler l'ensemble de la présentation de l ensemble des pages d'un site web.! Vous pouvez donc élaborer une feuille de styles qui définisse la mise en forme et la mise en page!: Pour une page : dans la page Web, pour laquelle vous souhaitez utiliser une mise en forme particulière, différente de la mise en forme due aux balises standard du html, vous allez utiliser la balise : <STYLE>, entre les balises <HEAD> et </HEAD > <HEAD> <STYLE> les définitions des caractéristiques de balises </STYLE> </HEAD > 42 21

22 Exemple : <HEAD> <STYLE> H1 {text-align : center ; font-style : italic} </STYLE> </HEAD> <!..Ensuite dans le corps du fichier html --> <BODY> <H1>Hello World </H1> </BODY> Les navigateur tiendront compte de la redéfinition de la balise H1 pour la mise en page de Hello World, qui sera affiché en italique et centré dans la page. # Pour un ensemble de pages Web, pour le site : à l aide d un éditeur de texte tout simple, créez un fichier (feuille de styles) contenant les définitions de mise en forme : 1) Créez le fichier monstyle.css, contenant : H1 {text-align : center ; font-style : italic} P{color #FF00FF} 2) Dans chacune des pages Web associée à cette feuille de style : <HEAD> <LINK REL=stylesheet TYPE= text/css HREF=monStyle.css> </HEAD> <!..Ensuite dans le corps du fichier html --> <BODY> <H1>Bienvenue à tous</h1> <P> Voici donc un paragraphe, le texte est de couleur FF00FF en hexadecimal, soit un mélange de rouge et de bleu, plein pot. </BODY> Créer une classe! Pour un contrôle plus étendu de la mise en forme et en page des informations, il est possible de définir une classe, par exemple : " Pour mettre en évidence certains passages du document, vous définirez une classe à partir de la balise <P>. " Pour que les éléments du texte soit mis en valeur comme par la balise <H1> mais centrés, vous définirez une classe.! Définir une classe " BALISE.nomClass {définition des caractéristiques} <STYLE> P.important { font-style : italic; color : #FF0000 } H1.centrersvp{text-align : center} </STYLE>! Portée de la classe : dans le corps du document, # CLASS = nomclass l attribut limite à la balise concernée, il permet d indiquer au navigateur comment afficher les élément encadrés : <BODY> <H1 CLASS = centrersvp>bienvenue à tous</h1> <P CLASS = important > Voici donc un paragraphe, le texte est de couleur FF00FF en hexadecimal, soit un mélange de rouge et de bleu, plein pot. </BODY> 44 22

23 Masquer la feuille de styles " Cacher l utilisation des styles aux anciens navigateurs (avant les versions 4) qui ne reconnaissent pas les feuilles de styles et ne savent pas interpréter leur code. " Grâce aux balises de commentaires :<!-- et --> seules. <html> <head> <title>les CCS</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <style> <!- - H1{text-align:center} P.important{font-style:italic; font-weight : bold; color:#ff00ff} --> </style> <body bgcolor="#ffffff"> <H1> Bienvenue </H1> <P> Ce paragraphe normal sera affiché normalement par les navigateur, par contre <P CLASS=important> celui-ci est trés important, il sera affiché selon le style défini dans la classe défini plus haut </body> </html> 45 23