HTML CSS les langages du Web. C'est un mécanisme client-serveur. Le client demande un fichier, le serveur lui donne tel qu'il est stocké – processus.

Présentation au sujet: "HTML CSS les langages du Web. C'est un mécanisme client-serveur. Le client demande un fichier, le serveur lui donne tel qu'il est stocké – processus."— Transcription de la présentation:

1 HTML CSS les langages du Web

2

3 C'est un mécanisme client-serveur. Le client demande un fichier, le serveur lui donne tel qu'il est stocké – processus statique Le serveur peut aussi générer un fichier en fonction de la demande du client – processus dynamique

4 Ce n'est pas uniquement écrire des pages en HTML/CSS, il faut penser en terme de projet: Définir le contenu Trouver une arborescence ergonomique Appliquer / Respecter la charte graphique Produire les pages Installer le site sur le serveur Maintenance, politique de mise à jour

5 HTML Hyper Text Markup Language est né en 1989 sous l'impulsion de Tim Berners Lee, " inventeur " du Web. HTML est basé sur SGML (Structured Markup Language), qui est une vieille norme utilisée pour la description de documents.Elle est conçue pour les grosses documentations techniques. HTML est une instance de SGML.

6 Il contient des commandes, implémentées par des balises pour marquer les différents types de texte (titres, paragraphe, listes …), pour inclure des images, des formulaires, des liens … C'est un langage à balisage qui décrit la structure logique d'un document hypertexte. Il a volontairement été conçu pour être simple. Il a évolué vers un langage de description de pages offrant des possibilités plus proches de la P.A.O.

7 Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes, qui relient votre document à d'autres documents. En cliquant sur une zone de texte (ou une image, un logo) mise en évidence, on peut accéder a un nouveau document situé sur un autre ordinateur en n'importe quel point du globe.

8 SGML XML HTMLDocbook… XHTMLSMIL MathML…

9 Pour décrire un fichier hypertexte, le langage HTML insère des balises dans le texte du document : Début de mise en forme Fin de mise en forme ici votre texte Synonymes: marqueur, élément, tag.

10 Ces balises peuvent être insérées n'importe où dans le texte, entre 2 phrases, mots, lettres … Le cours HTML

11 Il faut respecter une logique d'imbrication: Bon: Mauvais: Le cours HTML

12 Le langage HTML est sensible à la casse, toujours écrire en minuscules. Bon: Mauvais: Le cours HTML

13 Les balises peuvent poss é der un ou plusieurs attributs qui permettent de sp é cifier l'action de la balise. Toujours mettre la valeur de l'attribut entre guillemets. texte

14 <!–- Voici un commentaire HTML qui peut se placer sur plusieurs lignes -->

15 A la main, avec un éditeur de texte Simple Text, Bbedit,Emacs,WordPad … Avec un logiciel « assistant » au code HTML PageSpinner sur MacIntosh, Amaya sur Unix, HTML-Kit sur PC … A l'aide d'un programme dit "WYSIWYG" Dreamweaver, Golive, Netscape composer, FrontPage, Claris Homepage... A l'aide d'un filtre Les commandes « enregistrer sous html », que l'on trouve dans les suites bureautiques, dans certains logiciels de P.A.O. Conversion HTML vers XHTML avec HTML Tidy Disponible dans de nombreuses versions sur le site du W3C

16 Le client ou « navigateur »doit pouvoir interpréter HTML et afficher le résultat. Ils sont divers et tournent sur des systèmes différents:  Google Chrome, Mozilla FireFox, Internet explorer  Safari, Opéra, Midori  iCab, Emacs mode www, Amaya, Lynx, links, w3m, Netscape Navigator …

17 Vous pouvez rencontrer le codage ASCII sur 7 bits spécifié par la norme pour afficher les caractères accentués ou spéciaux. Ceux ci devront faire l'objet d'un codage particulier au sein du fichier HTML. é s’écrit é être s’écrit &eacirc;tre Les serveurs Web acceptent les caractères accentués de la norme iso-8859-1. On spécifie l'encodage dans le fichier HTML.

18 … éléments d'en-tête … éléments de corps. (voir mon_premier_fichier.html) Une balise contenant une seule balise et une seule balise. Les balises que l'on va trouver dans le corps divisent le contenu en sections logiques, sous forme de blocs ( paragraphes, tableaux …). On parle d'éléments de niveau bloc. Les éléments qui représentent les propriétés du texte (strong, i) qui figurent dans un bloc sont dits "éléments de ligne".

19 .. Délimite le début et la fin du document.. Entête du document, contient des méta- informations Ex:.. titre du document.. méta-informations.. script ou référence.. Corps du document

20 Les noms d' éléments sont sensibles à la casse et sont écrits en minuscules. Les noms d'attributs sont sensibles à la casse, doivent être écrits en minuscules et encadrées par des guillemets. Tous les attributs doivent recevoir une valeur. Les balises fermantes sont obligatoires. Les éléments vides sont signalés par une balise spéciale. ( ex: )

21 .. Titre de niveau n, de 1 à 6.. Paragraphe Et aussi: address, blockquote, div, hr, pre sans oublier body !

22 .. Liste non triée, liste à puces.. Liste triée, liste à numéros.. Elément de la liste Et aussi: dl, dt, dd

23 .. Création d'un lien hypertexte, ou vers un point d'ancrage du document Principaux attributs: href = url name = chaîne de caractères L'Institut Pasteur

24 référence... Vers la référence

25 Les adresses du Web ou URL ( Uniform Resource Locator ) sont du type: http://portail.aix.ensam.fr/QUALITE/default.aspx#ANCRE Le protocole: http Le serveur: portail.aix.ensam.fr Le fichier: /QUALITE/default.aspx Un ancrage: #ANCRE

26 L'adresse indiquée dans le lien ( URL) peut être absolue, elle inclut tout le chemin en commençant par le protocole: http://portail.aix.ensam.fr/monfichier.html Ou relative, elle n'inclut qu'une partie du chemin: Mon_repertoire/monfichier.html

27 texte gras texte gras texte italique texte italique texte gros texte gros texte petit texte petit Et aussi: br, code, sub, sup, span, u, strike …

28 .. Définit un tableau Principaux attributs: align = position bgcolor = color border = n cellpadding = n cellspacing = n width = n

29 .. Définit une ligne d'un tableau Principaux attributs : align = left,center,right valign = top, middle, bottom bgcolor = color border = n

30 .. Définit une cellule de données Principaux attributs : align = type valign = type bgcolor = color colspan, rowspan = n height, width = n

31 .. Insère une image Principaux attributs: align = left, bottom, middle, top, right alt = text border = n height, width = n src = url

32 Attention au poids des images, il est important d'optimiser son fichier image. Deux formats sont lus par les navigateurs, GIF ( Graphics Interchange Format ) et JFIF ( JPEG File Interchange Format).On utilise le GIF pour les illustrations, le JPEG pour les photos.

33 Attention aux droits sur les images.La seule image qui vous appartient est celle que vous avez prise avec votre matériel photo.Il faut aussi l'autorisation des personnes figurant sur la photo. Attention à la portée des droits d'auteurs, surtout pour une utilisation web Attention aux images "libres de droits" Lire les recommandations juridiques sur l'intranet.

34 Ils permettent de diviser la fenêtre principale du navigateur en plusieurs sous fenêtres de taille réduite, chacune d'entre elles affichant un document différent. Certains navigateurs ne les supportent pas, il est possible de les désactiver, il faut donc prévoir un fichier de substitution inscrit entres les balises:..

35

36 XHTML 1.0, est une reformulation de HTML 4 en une application XML moins permissive au niveau de la syntaxe, mais sans aucun ajoût. Quelques XHTML 1.X ont vu le jour mais XHTML 2 a été abandonné au profit du couple HTML 5 / XHTML 5 La sémantique des éléments et de leurs attributs sont définis dans la Recommandation W3C pour le HTML. La norme HTML 5 sera finalisée en 2014 mais le W3C encourage d’ores et déjà son utilisation. http://www.w3c.org. Le site du W3C: http://www.w3c.org.

37 Écrire en minuscules. Mettre les attributs entre guillemets. Ajouter un caractère d'espacement avant la barre oblique d'une balise d'élément vide ( ). Spécifier l'encodage de caractères de deux façons ( entête xml et balise méta) Spécifier les cibles d'hyperliens (balise a) en utilisant à la fois les attributs id et name. Assigner une valeur aux attributs HTML booléens.

38 Langage de base du Web Langage simple, limité et statique D'autres langages, extensions,programmes sont venus se greffer à XHTML pour en augmenter les possibilités. XHTML offre les aspects XML mais ce n'est pas suffisant pour toutes les applications que l'on souhaite mettre en œuvre sur le web.

39 De nombreux nouveaux éléments sont crées, comme entre autre :  …  section : définit les sections dans un document. Tels que les chapitres, en-têtes, pieds de page, ou toutes autres sections du document.  article : partie indépendante du site, comme un commentaire.  audio : pour définir un son, comme la musique ou les autres flux audio (streaming).  video : Insérer un contenu video en streaming.  progress : définit une barre de progression sur le travail en cours d’execution.  time : définit une date ou une heure, ou les deux.  canvas : utilisé pour afficher des éléments graphiques, il faut utiliser un script pour l’animer.  … De nouveaux attributs voient le jour : certains viennent compléter ceux des balises existantes, d’autres dits globaux s’appliquent à toutes les balises. A l’inverse un certain nombre d’attributs ayant perdu leur utilité sont déclarés obsolètes. Les balises représentatives qui faisaient double emploi avec le CSS sont supprimées (par exemple : big, center, font, …). Les balises de cadre sont également supprimées.

40 De nouvelles API pourront aider à créer des applications web, par exemple :  …  une API de dessin 2D utilisée avec la nouvelle balise canvas;canvas  une API pour jouer des vidéos et des sons/musiques utilisée avec les nouvelles balises video et audio;  une API utilisée pour les applications hors-lignes;  une API d'édition en combinaison avec le nouvel attribut contenteditable;  une API de drag and drop en combinaison avec l'attribut draggable;  une API qui permet l'accès à l'historique et permet aux pages d'en ajouter pour prévenir les problèmes de bouton retour-en-arrière.  …

41 L'élément permet de créer des formulaires, qui peuvent contenir des cases à cocher, des boutons radio, des listes déroulantes … les données recueillies sont transmises à un programme qui s'exécutera sur le serveur web et vous retournera le résultat. … éléments du formulaire

42 choix1 choix2 choix1 choix2 1 2 3

43 … Principaux attributs name = "chaine" spécifie le nom sous lequel le formulaire peut-être identifié, par exemple en Javascript, je peux y faire référence avec l'expression: document.my_form action = "URL" spécifie l'URL à laquelle le contenu est envoyé method= "GET" ou "POST", spécifie la méthode HTTP utilisée pour transmettre les données. Avec GET elles sont ajoutées à l'URL, avec POST elles sont envoyées au serveur dans le corps du message.

44 … Principaux attributs name = "chaine", associe un nom aux données entrées dans cet élément input ( ex: civilite pour un choix Mme, Mlle, Mr de type radio, on affectera dans le CGI la valeur cochée à la variable civilite, ce qui donne en Perl: $civilite=$CGI->param(civilite) input=cgi.parse() input[civilite] type = "button, checkbox, file, hidden, image, radio, reset, submit, text …" Définit les entrées de données dans le formulaire

45 10 Principaux attributs name = "chaine", associe un nom aux données entrées dans cet élément select value = "valeur", spécifie la valeur de l'élément option. Si cet élément est omis, c'est le contenu de l'élément option qui est envoyé au CGI. Liste d'options sélectionnables

46 Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans en modifier son contenu. Le langage CSS spécifie l'apparence des blocs de texte ou image, mais il peut contrôler d'une manière très précise le positionnement des objets, les bordures, les marges, le recouvrement … La norme est consultable sur le site du consortium Web. Les navigateurs n'implémentent qu'une petite partie du langage.

47 Le navigateur lit le document -> arbre syntaxique Il lit ensuite la feuille de style associée et interprète les différentes règles de formatage. Il parcourt l'arbre de haut en bas et applique les règles au contenu de l'élément.

48 CSS1 est bien supportée par les navigateurs récents. CSS2 est en partie supportée par les navigateurs plutôt récents. Si CSS3 est toujours en cours de développement, il est quand même supporté par les toutes dernières versions des navigateurs. CSS3 forme aujourd’hui avec HTML5 le couple idéal pour composer des pages web !

49 Une feuille de style consiste en un ensemble de règles qui définissent le formatage des éléments (balises) d'un document XHTML. Règle = Sélecteur + Déclarations Déclaration = Propriété + Valeurs h1 {color: blue; } Sélecteur(s) Propriété(s)Valeur(s) h3, h4 {font-weight: bold; font-family : arial; }

50 En externe, c'est un fichier indépendant du fichier HTML, on utilise dans l'entête du document la balise link: Exemple de fichier ma_feuille_de_style.css: h1 { font-family: Arial, Helvetica, sans-serif; } En interne, dans l' entête de document, le style est spécifié pour tout le document entre les balises style h1 { font-family: Arial, Helvetica, sans-serif; } En interne, dans le corps du document, le style est appliqué localement au texte Mon titre

51 On peut créer ses propres classes que l'on appliquera avec l' attribut "class" Dans l'entête: maclasse { font-family: Arial, Helvetica, sans-serif; font-size: larger; font-style: italic; text-align: center; color: #4169E1; } Dans le corps du document: la partie du texte formatée suivant ma classe un paragraphe formaté suivant ma classe

52 Ici, la règle concerne uniquement les éléments div dont l'attribut possède la valeur "maclasse". Dans l'entête: div.maclasse { font-family: Arial, Helvetica, sans-serif; font-size: larger; font-style: italic; text-align: center; color: #4169E1; } Dans le corps du document: la partie du texte formatée suivant ma classe

53 Importation de feuilles de styles: règle @import ajoute les règles de la CSS distante à ses propres règles: @import url ("http://www.autresite.fr/styles/charte.css")http://www.autresite.fr/styles/charte.css Téléchargement de polices: règle @font-face Polices au format PFR (Portable Font Resource ou TrueDoc) @font-face { font-family: mapolice; src: url("my_url"); font-weight:normal ;}

54 Choix de feuilles de styles pour différents médias: ( écran, impression, braille, tv, projection …) Syntaxe avancée, pour faire référence à des éléments en se basant sur des valeurs d'attributs ou la position des éléments dans le document. @media screen { body { font: 12pt Verdana} } @media print { body { font: 10pt Courrier} }

55

56 Coté serveur Plusieurs programmes spécifiques (qui s’exécutent sur le serveur) sont capables de recevoir des données en provenance du client et de lui envoyer en retour des pages HTML constituées dynamiquement et contenant des morceaux de code informatique. Quelques exemples :  CGI ou Common Gateway Interface  Java Server Pages.  ePerl  PHP .. Coté client Les "morceaux de code informatique" insérés dans la page HTML, la rendent « réactive ». Ce code est interprété par le client. Quelques exemples :  Javascript  Applet Java  Active X  …

57 … Inclusion des scripts avec l'élément script. Cet élément peut être imbriqué dans l'en-tête ( ) ou dans le corps du document ( ). Note: lorsqu'un navigateur examine les composants d'un script, il commence par le début du fichier, il est important de les définir avant de les utiliser.

58 Les programmes javascript peuvent être associés à des éléments de marquage (XHTML) au moyen de gestionnaires d'événements. Lorsqu'un événement se produit, le script associé est exécuté. Principaux événements:  onclick : déclenché lors d'un clic sur lien http ou bouton formulaire  onload : déclenché lorsque le document est chargé  onmouseover : déclenché lorsque le pointeur de la souris est placé sur l'image ou le lien hypertexte associé  onsubmit: déclenché lorsqu'un formulaire est soumis  Aussi: onabort, onblur, onchange, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmouseout, onreset, onunload

59  Javascript: (horloge et document write)  Evénement :(onclick)  Script dynamique: (horloge dynamique)

60  Document Object Model est une norme du W3c.  DOM est un moyen de représenter un document indépendamment d'un navigateur.  Il permet l'accès à un document au moyen d'objets, de propriétés, de méthodes, d'événements et de modifier le contenu d'une page web de façon dynamique à l'aide de scripts.  Tout document bien formé (XML, XHTML) peut être représenté sous forme d'arbre par le DOM.

61 Note: L'analyseur syntaxique et validateur sur le site du w3c: validator.w3.org Le document est lu par un analyseur syntaxique, qui produit une représentation logique du document sous forme d'arbre. html bodyhead titlelinkdiv phimgdiv

62  Objets DOM de base  Node: chaque nœud possède son propre objet Node  NodeList: cet objet est une liste de tous les objets Node  NameNodeMap: accès aux objets Node par leur nom  Objets DOM de niveau élevé  Document: le nœud racine  DocumentType: type ou schéma du document XML  Element: un élément du document  …

63  getElementById, renvoie la référence à l'élément ( "object")  getElementById + style dynamique  getElementsByTagName, par nom de l'élément  Propriétés documentElement de document et tagName d' Element  Navigation sur Node  Création sur Node