===== HTML ===== ==== Présentation ==== Les pages HTML (HyperText Markup Language) sont les éléments de base de la navigation sur le Web. Il s'agit de pages visualisables sur n'importe quelle machine de la même manière, quelle qu'en soit le système d'exploitation, l'interface, la puissance..., et ce grâce au langage HTML et à ses balises ou marqueurs. Lors de l’envoi d’un serveur vers le poste utilisateur par le protocole HTTP (HyperText Transfert Protocol), seul le texte correspondant est transmis. La mise en forme sera faite par le navigateur du poste récepteur en fonction des balises définies dans le fichier HTML. === Pages Web évoluées === Si le langage HTML mis en forme par le navigateur reste au final la seule partie visible pour l’utilisateur, les pages Web incorporent aujourd’hui de nombreuses améliorations ou simplifications : * Feuilles de style : complément indispensable des sites Web, ces feuilles de style enregistrent en un fichier unique les options de mise en forme (taille et police de caractères, couleur des fonds et du texte, paragraphes, etc). Elles évitent d’avoir à réécrire la mise en forme dans chaque page HTML, et permettent la modification de la mise en forme en une seule fois. * Objets riches : qu’il s’agisse de vidéos, d’//applet Java//, de //contrôles ActiveX// ou d’animations //flash//, ces éléments nécessitent que le navigateur intègre un //plug­in// ou module additionnel capable de les lire * Scripts côté client : exprimés en langage //Javascript// ou //VBScript//, ils permettent de contrôler les actions de l’utilisateur (formats de saisies, remplissages de zones, etc), d’automatiser des tâches (calculs intermédiaires) sans repasser par un dialogue avec le serveur Web, de proposer des menus plus riches. * Scripts côtés serveur : ils réalisent toutes les tâches complexes pour chaque connexion (automatisation, interrogation de base de données, remplissage d’un panier d’achat, etc). \\ Contrairement aux scripts côté client, ils sont réalisés par le serveur Web. Leur code n’est pas visible par l’utilisateur final. Les langages utilisés sont notamment //PHP//, //JSP// ou //ASP//. * Client riche : le langage //AJAX (Javascript et XML)// permet de renvoyer vers le client la réalisation d’un certain nombre de traitements qui auraient dû être traités par le script côté serveur, de manière à décharger la machine centrale et à exploiter la puissance de poste client. ===== Syntaxe ===== HTML un langage de description de contenu qui permet de transporter des informations très compactes (du texte ASCII), la charge de mise en forme étant dévolue au navigateur. Il se base sur des balises (markup) indiquant les mises en forme à appliquer au texte, les intégrations à ajouter (fond, image, son, etc). ==== Les balises ==== Elles s’écrivent entre <...>, et possèdent la plupart du temps une balise fermante . Exemple : la mise en gras se fait par //texte à mettre en gras//. On ferme les balises dans l’ordre inverse où on les a ouvertes Exemple : ........... Les balises peuvent comporter des options au format //option="valeur"// Exemple : ==== 1 La structure d’une page WEB ==== Elle comporte deux parties : *L’entête () qui décrit la page (mots clés (), auteur, éditeur utilisé, titre affiché dans la barre de titre (</html>), etc) et comporte les scripts côté client (notamment les déclarations de fonctions). *Le corps (<html><BODY></html>) qui contient tout ce qui sera affiché dans le navigateur. __Illustration__ <html> indique que le document contient du langage HTML En­tete : balise <head> - Titre pour la barre de titre du navigateur : balise <title> - Commentaires sur l’auteur, l’outil de création, les mots clés... : balise <meta> </head> corps : balise <body> 1.textes 2.tableaux : balise <table> 3.images : balise <img...> 4.liens : balise <a href=> 5. commentaires HTML <!...> </body> </html> === Frames, multimédia, objets et chargement === Au delà du texte même qu’elle contient, une page Web peut faire référence à des objets externes : Une page peut ainsi n’être que le cadre de présentation de multiples pages : la balise <html><frameset></html> et son découpage en <html><frame></html> permet de présenter des informations de manière structurée, tout en économisant certains transferts pour des parties stables (menus, entête, etc). On voit aussi sur cette copie d’écran que la page intègre des images (grâce à la balise <img src="nom_image"...>). On pourra aussi associer du son (<html><embed src="nom_fichiersonore"...></html>). Enfin, une page pourra intégrer un élément plus complexe comme des applets java (balise <html><applet...></html>) ou des contrôles ActiveX Microsoft (balise <html><object...></html>). Toute la difficulté de ces pages composites réside dans leur chargement sur le poste client. En effet, le client demande une page HTML. Le serveur lui retourne le contenu textuel de cette page (le frame initial, la page brute). Le logiciel client doit alors parcourir le code et repérer tous les éléments intégrés à la page, pour lesquels il doit faire une demande de chargement (GET) auprès du serveur. Dans les premières versions des serveurs HTTP, le dialogue était réalisé en mode UDP : pour chacune des parties de la page, une demande unique était adressée au serveur. Intéressant lorsque les pages étaient essentiellement composées de texte, ce principe est devenu limité. Les échanges aujourd’hui sont réalisés en TCP (sur le port 80) avec l’envoi complet de toutes les parties sur un seul dialogue. Le client doit quand même réaliser une demande pour chaque partie constitutive de la page. À la fin du chargement de la page et de ses compléments, la connexion est terminée par le serveur ou conservée le temps de la session (//keep-alive//) ==== 2 HTML et XHTML ==== HTML est une norme qui découle d’un standard plus large nommé SGML (Standard Generalized Markup Language) qui a aussi donné lieu à la norme XML (Extensible Markup Language) pour le stockage des données, indépendamment de sa mise en forme. Très souple dans l’écriture du code (majuscules, valeurs encadrées ou non de guillemets, balises non fermées), le HTML pose des problèmes lors de la validation de pages par des automates (notamment les moteurs de recherche) et parfois de son affichage dans les navigateurs. C’est pourquoi le standard XHTML a vu le jour qui impose au HTML la rigueur nécessaire au XML. Les balises et options doivent être écrites en minuscule. Toute balise doit avoir une balise fermante (y compris pour <html><br></html>, <html><link></html> ou <html><meta></html> par exemple). Les valeurs sont toutes écrites entre " " . <wrap em>Pour des questions de lisibilité et de repérage des balises, ce document ne respecte pas le XHTML.</wrap> ==== 3 Entête : La balise <HEAD> ==== Compris entre la balise <html><head></html> et <html></head></html>, l’entête permet de donner des informations sur le document. Il ne doit pas contenir de texte à afficher sur la page WEB. En revanche, compris entre la balise <html><title></html> et <html>, on peut indiquer le texte à afficher dans la barre de titre du navigateur. On y placera aussi toutes les informations de description du contenu de la page grâce à la balise et ses options //NAME// (qui définit le nom de l’information qui suit, par exemple //author//, //copyright//, //revisit­after//, //date//, etc) et //CONTENT// (qui donne la valeur qui sera étudiée par les moteurs de recherche par exemple). Les scripts sont généralement placés dans l’entête. ==== 4 Corps de la page : la balise ==== C’est ici que l’on pourra définir les options suivantes : ^ Option ^ Syntaxe ^ |couleur du fond de la page|BGCOLOR="codecouleur"| |image d’arrière plan|BACKGROUND="fichierimage"| |son diffusé en fond sonore|BGSOUND="fichierson"| |couleur par défaut du texte|TEXT="codecouleur"| |couleur des liens hypertexte|LINK="codecouleur"| |couleur des liens déjà visités|VLINK="codecouleur"| |couleur du lien en cours de sélection | ALINK = "code couleur"| Par exemple, pour obtenir un texte rouge (FF0000) sur fond noir (000000), et que les liens soient en blanc (FFFFFF), puis verts s’ils sont visités (0000FF), on aura une balise comme suit : ===== II La mise en forme ===== ==== 1 Les titres de paragraphe ==== Des formats prédéfinis permettent la mise en forme des titres. Le résultat peut différer d’un navigateur à l’autre. === Balises === ^ Balise ^ Explication ^^ | H1 à H10 |Crée une hiérarchie de titres || |::: | Option | Usage | |::: |ALIGN=Center/Left/Right|détermine l'alignement du titre | ==== 2 La mise en forme des paragraphes ==== Le HTML ne prend pas en compte la mise en forme qui peut être faite dans le fichier textuel. Les retours à la ligne, les tabulations ou le centrage réalisés lors de la création du code sont ignorées, et c’est au travers des balises que l’on réalise cette organisation. === Balises === ^ Balise ^ Valeur ou option ^ Explication ^ |P | | encadre un paragraphe avec une mise en forme générale | |ALIGN|Center/Left/Right|détermine l'alignement du paragraphe | |PRE | | encadre un paragraphe en respectant sa mise en forme du texte \\ Les retours à la ligne, les tabulations, la police de caractère... sont reproduits à l’identique dans la page WEB | | DIV | |Définit l’alignement pour une division de texte (toutes les balises de paragraphe, image et texte qu’il encadre). Est aussi utilisé avec les feuilles de style pour enrichir la mise en page (voir fiche [[css]])| |::: |ALIGN=Center / Left / Right |détermine l'alignement de la division | |BR | | Retourne à la ligne \\ Cette balise n'a pas besoin d'être refermée (pas de
) en html. En XHTML, on écrira
qui ouvre et ferme simultanément. | | CENTER | | centre le texte. N’est plus utilisé et remplacé par
| |BLOCKQUOTE \\ DIR | | encadre un paragraphe indenté | |HR | | trace une ligne séparatrice horizontale (Horizontal Rule)| |::: |WIDTH=valeur| définit la largeur du trait| |::: |SIZE=valeur | définit l’épaisseur du trait | |::: |NOSHADE|élimine l’affichage en 3D| ==== 3 La mise en forme des caractères ==== Pour modifier les paramètres d’affichage du texte (gras, police, taille,...), on recourra aux balises ci­ dessous. === Police de caractères === ^ Balise ^ Valeur ou option ^ Explication ^ |FONT | |détermine la police de caractères| |::: |FACE=nompolice|définit la police (Arial,Times....) | |::: |SIZE=valeur| définit la taille de la police | |::: |COLOR=codecouleur |détermine la couleur du texte| === Les styles === ^ Balise ^ Style ^ |B | gras (//bold//)| |U> | souligné (//underlined//) | |I>|Italique | |S>|Caractère barré (strike) | |SUB>|Indice| |SUP>|Exposant| |EM>|style appuyé (//emphathised//), généralement en italique | |STRONG|style appuyé, généralement en gras| |BIG|Caractère plus gros | |SMALL|Caractère plus petit| === Autres balises === ^ Balise ^ Explication ^ |BLINK | fait clignoter le texte (avec Netscape uniquement) | |MARQUEE | affiche un texte défilant appelé bannière | | BEHAVIOR|permet de modifier le mode de défilement avec les valeurs \\ SCROLL (valeur par défaut) : défile de gauche à droite et s’arrête après avoir atteint le bord droit \\ SLIDE : idem mais de droite à gauche \\ ALTERNATE : défilement alternatif gauche­->droite et droite->­gauche. | ==== 4 Les caractères spéciaux ==== Certains caractères ne peuvent être affichés directement de manière sûre et nécessitent de passer par un caractère spécifique reconnu de manière universelle (par exemple pour les caractères accentués). ^ Caractère ^ Usage ^ |  |espace insécable (Non Brokable SPace)| |< ou < |Signe inférieur à < (Lesser Then)| |> ou > |Signe supérieur à > (Greater Then)| |& |é commercial & (AMPerstand)| |é | é | |è ; |è | |ê ;|ê | |Ç |ç | ==== 5 Les codes de couleur ==== Les couleurs affichables pour le texte, le fond et les liens, sont déterminées par le célèbre triolet //RVB// : rouge, vert et bleu. Pour chacune de ces couleurs, on peut définir une valeur comprise entre 0 et 255, exprimée sur deux positions hexadécimales. On obtient ainsi 16 millions de couleurs affichables. Cependant, tous les navigateurs ne les supportent pas nécessairement. Voici les valeurs les plus courantes. Le noir correspond à la valeur #000000. {{ :wiki:codescouleurs.png?nolink|}} Aujourd’hui, tous les codes de couleur ont un nom associé. En voici quelques exemples {{ :wiki:nomscouleurs.png?nolink|}} ===== III Les objets de présentation ===== ==== 1 Les tableaux ==== Il est possible de présenter les informations sous forme de tableau. On les utilise aujourd’hui à la place des frames pour séparer les différentes zones d’un document (en­tête, menu, zone d’affichage de l’information). C’est aussi un outil très courant pour organiser le texte en colonnes ou positionner des éléments à droite et à gauche, avec les balises
. === Balises === ^ Balise ^ Valeur ou option ^ Explication ^ |CAPTION | | titre du tableau (optionnel) | |::: |VALIGN=top/bottom | cette option permet de déterminer si le titre sera au-dessus (top) ou au­-dessous (bottom) du tableau | |TABLE | |encadre la définition du tableau | |::: ^Les options suivantes sont facultatives et devraient être renvoyées dans le CSS || |::: |CELLSPACING=valeurnumérique| définit l'espace entre les cases (lignes et colonnes)| |::: |BORDER=valeurnumérique|définit l’épaisseur (en points) de la bordure | |TH | | encadre les titres des colonnes (//table header//) | |TR | | encadre une nouvelle ligne (//table row//) | |TD | | définit le contenu des cellules (//table data//) | ^Les options suivantes sont valables pour le tableau et/ou les cases/lignes/colonnes qui le composent ||| |HEIGHT|valeurnumérique (en points ou en %) | définit la hauteur minimum du tableau | |WIDTH|valeurnumérique (en points ou en %) |définit la largeur de l’élément | |COLSPAN|valeurnumérique|crée une case sur le nombre de colonnes spécifié | |ROWSPAN|valeurnumérique|crée une case sur le nombre de lignes spécifié | |ALIGN|center/left/right |détermine l'alignement du texte dans les cases de la ligne | |VALIGN| top/middle/bottom | détermine la position du texte dans la hauteur de la cellule ou pour toute la ligne | |BGCOLOR|Valeurnumérique|donne la couleur du fond pour cette partie du tableau | |CELLPADDING| |définit l’espace entre le texte et le bord de la cellule | ==== 2 Les listes à puces ou numérotées ==== La création de listes permet l’affichage d’informations de manière structurée grâce à des puces ou une numérotation. === Balises === La déclaration d'une liste se fait par les balises
    ou
      . La numérotation ou le niveau de puce continue tant que la balise correspondante n’est pas refermée. L’affichage d’une puce/numéro nécessite la balise
    • ^ Balise ^ Explication ^ |UL |(Unordered List) : encadre la déclaration des listes à puces \\ On choisira la puce par l’option //type = disc | square | circle// qui donnent respectivement un rond plein, un carré plein ou un cercle vide. | |OL |(Ordered List) : encadre la déclaration des listes numérotées \\ On choisira la numérotation par l’option //type = 1 | a | A| i | I // \\ Le nnuméro de départ est défini par l’option START = numéro | |LI | (List Item) : déclare une nouvelle ligne comportant une puce ou un numéro | |LH |(List Header) : encadre la déclaration du titre d'une liste | Exemples : Il est possible de combiner ces diverses possibilités. Exemple 1 HTML
        a le titre
      • tiret 1
      • tiret 2
          sous liste
        • sl1
        • sl2
      • tiret 3
      RÉSULTAT * a * **Le titre** * tiret 1 * tiret 2 * sous liste * sl1 * sl2 * tiret 3       Exemple 2 HTML
      1. tiret 1
      2. tiret 2
          sous liste
        • sl1
        • sl2
      3. tiret 3
        1. a1
        2. a2
      RÉSULTAT - tiret 1 - tiret 2 * sous liste * sl1 * sl2 - tiret 3 - a1 - a2       __//Remarque//__ : la mise en forme (tabulation) du code HTML n’est là que pour la lisibilité, elle est ignorée par le navigateur. ==== 3 Insertion d'image ==== Il est à noter que seules les images au format JPEG (extensions .jpg ou .jpeg), GIF et PNG sont supportées par les navigateurs. On ne peut pas intégrer d’image au format bitmap, qui sont trop volumineuses. === Balises === ^ Balise ^ Valeur ^ Explication ^ |IMG | | inclut une image dans le document | |::: |SRC="fichierimage"|définit le chemin d'accès au fichier et son nom | |::: |ALIGN=Left/Right |définit l'alignement vertical de l'image dans la page | |::: |ALIGN=Top/Middle/Bottom|définit l'alignement du texte qui suit l'image par rapport à celle­-ci (en haut,au milieu ou en bas). | |::: | **On choisira une valeur soit pour l'alignement vertical, soit pour l'alignement du texte** || |::: |BORDER=valeurnumérique |définit un encadrement autour de l'image | ==== 4 Incorporation de texte ==== Lorsque certaines parties de code sont amenées à être reproduites sur des pages (par exemple une barre de menu, l’incorporation des feuilles de style, les coordonnées de l’entreprise en bas de chaque page, etc), on peut être amené à enregistrer ces informations récurrentes dans un fichier (ou plusieurs) à part. On peut souhaiter alors inclure ce contenu à l’intérieur d’autres pages, mais cette possibilité n’est offerte que par les langages de script côté serveur (PHP, ASP et autre) par une commande nommée //include//. Il existe deux solutions intermédiaires en HTML : la balise et la balise Ces deux solutions équivalentes (mais seule la seconde semble être supportée par IE et Firefox) acceptent les options //WIDTH// et //HEIGHT// qui permettent de définir la largeur et la hauteur du cadre en nombre de pixels, de pouces, de centimètres ou en pourcentage. ===== IV Liens hypertexte ===== Le but même des pages Web est de permettre la navigation de pages en pages grâce à des liens hypertexte (c’est à dire du texte réactif). Il existe plusieurs possibilités de navigation : * A l’intérieur même d’une page, qui nécessite la dépose d’un signet sur un point repérable, puis d’un lien vers ce signet * Entre pages d’un site : on naviguera donc dans une arborescence grâce à des liens relatifs (c’est à dire qui donnent le chemin d’accès aux fichiers par rapport à l’endroit de la page en cours) * Entre sites : on devra alors spécifier un chemin absolu précisant l’intégralité des informations nécessaires à la navigation, c’est à dire l’URL complète du fichier ( [[http://nomSite.nomdomaine.nomExtension/nomFichier]]). ==== Balises ==== ^ Balise ^ Valeur ou option ^ Explication ^ |A | | définit un signet (bookmark) dans la page ou crée un lien hypertexte. \\ La balise pose une ancre (anchor) sur laquelle la souris pourra agir. Il y a deux possibilités : soit on situe un point particulier dans le même document (on parlera de signet), soit on renvoie vers un signet ou un autre document (lien hypertexte) | |::: |NAME = nom_du_signet | positionne une marque dans la page \\ Attention : la casse (majuscule/minuscule) est prise en compte. | |::: |HREF [chemin][/fichier][#nom signet] | établit un lien vers un répertoire, un document ou un signet. | |::: |HREF [URL][/fichier][#nom signet] |établit un lien vers un site et un document ou un signet dans ce site.| |::: |TARGET = cadre/top |ouvre la fenêtre dans le cadre nommé (voir //frames//) ou par dessus un document avec cadre | Exemples : * définition d'un signet appelé //ici// : * définition d'un lien vers ce signet : lienversici * définition d’un lien vers une page nommée //pag2.htm// : Page2 * définition d’un lien en cliquant sur une image : * définition d’un lien vers un autre site : Le site académique ===== V Les frames (ou cadres) ===== Dans un document HTML, il est possible de composer l’écran en plusieurs sous parties affichant chacune une page HTML. Le premier intérêt de cette technique est que certaines parties récurrentes dans un site Web peuvent n’être envoyées qu’une seule fois par le serveur. Aux premiers temps de l’internet, avec des connexions très lentes, il y avait un intérêt évident. Cette technique a tendance à disparaître pour des questions d’ergonomie et de simplicité d’usage. On lui préfère les tableaux ou la combinaison de balises
      ou et de //feuilles de style//. ==== Balises ==== ^ Balise ^ Valeur ou option ^ Explication ^ |FRAMESET | | encadre la déclaration d’une page avec FRAME | |::: | FRAMEBORDER=valeurnumérique | définit la taille de l’encadrement | |::: | FRAMESPACING=valeurnumérique | définit la distance entre les cadres | |::: | COLS=v1,v2,v3... | définit la taille des cadres en colonne | |::: | ROWS=v1,v2,v3... |définit la taille des cadres en ligne | |::: |Pour ROWS et COLS, les dernières valeurs peuvent être remplacées par *, indiquant que l’on attribue le reste pour la dernière ligne ou colonne. || |FRAME | |encadre la déclaration d’un des cadres du document avec FRAME | |::: |NAME=nom|indique le nom affecté au cadre| |::: |SRC=fichier|indique le fichier qui sera affiché dans ce cadre| |::: |MARGINWIDTH=Valeurnumérique|indique la taille de la bordure| |::: |MARGINHEIGHT=valeurnumérique|indique la hauteur de la bordure| |::: |WIDTH=valeurnumérique(en points ou en %)| indique la largeur du cadre | |::: |HEIGHT=valeurnumérique(enpointsouen%)|indique la hauteur du cadre | |::: |NORESIZE|empêche l’utilisateur de redimensionner le cadre | |::: |SCROLLING=Yes/No/Auto|définit les possibilités de défilement du cadre | |::: |HSCROLL=Yes/No|affiche (ou non) une barre de défilement horizontale | |::: |VSCROLL=Yes/No|affiche (ou non) une barre de défilement verticale | |NOFRAME | | encadre le message affiché si le navigateur ne supporte pas les FRAMES | === Exemple === Un document (par exemple, AccueilLJR.htm) permettra cette disposition à l’écran. {{ :wiki:pageframes.png?nolink|}} On dispose ici d’un document comportant une première division – nommée //frameset// ­- horizontale (par exemple 15% de l’écran pour l’entête et 85% pour le reste), la deuxième partie horizontale étant un second //frameset// composé de deux colonnes (par exemple 150 points pour le menu et 450 points pour le reste). Il contiendra, après sa partie //HEAD//, les éléments suivants : ... ....Texte à afficher de type « Votre navigateur ne supporte pas les frames » ... Par ailleurs, les liens du Menu (fichier HTML pointé par la //partie de gauche// de //la partie du bas//) seront exprimés en réutilisant le nom des cadres tels que définis dans le fichier AccueilLJR.htm : La Formation ===== VI Les formulaires ===== Les formulaires vont permettre d'établir une interaction entre l'utilisateur et le serveur WEB. Le principe est de donner des zones à saisir et de les envoyer par l'intermédiaire d'un bouton //SUBMIT// au serveur qui, à l'aide de programmes spécifiques (PERL, CGI, PHP, ou autres), pourra en tirer un résultat. === Balises === ^ Balise ^ Valeur ou Option ^ Explication ^ |FORM | | Inclut un formulaire dans le document| |::: |method=POST/GET|indique si l’on doit envoyer les valeurs en les masquant (//POST//) ou visibles(//GET//) | |::: |action="fichier"|indique quelle est la page appelée lorsque l’on clique sur le bouton //submit//. Cette page pourra traiter les données du formulaire | |INPUT | | permet d'insérer un objet particulier dans un formulaire | |::: |TYPE=... |voir tableau des //objets de formulaire// ci-­dessous| |::: |NAME=nom|définit le nom de l'objet| |::: |ID=valeur | définit l’identifiant d’un objet. Utilisé lorsque plusieurs éléments ont le même nom.| |::: |VALUE=valeur|valeur attribuée à l'objet input ou texte affiché sur les bouton | |::: |* L'//id// sert à créer un groupe d'objets ayant tous le même nom (//name//) mais des valeurs différents. Cela permet de créer des choix pour les boutons et cases à cocher et pour les scripts côté client. \\ * Le nom de l'objet (//name//) servira pour la récupération dans les autres pages et pour les scripts côté client. \\ * La valeur (//value//) de l'objet est l'information envoyée par le formulaire (hors valeurs renseignées pour les zones de saisie) et l'intitulé des boutons de commande. || |::: |SIZE=valeurnumérique|définit le nombre de caractères à saisir pour les zones de texte (//text// et //password//)| |SELECT | | permet d'inclure une liste de choix (déroulante ou non) dans un formulaire | |::: |NAME=nom|définit le nom de l'objet | |::: |SIZE=valeurnumérique|nombre d'éléments dans la liste | |::: |MULTIPLE | permet de choisir plusieurs options dans la liste (ne marche pas sur tous les navigateurs) | |::: |Les données de la liste sont définies par des balises