Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

18/10/2016 1 Programmation Web : HTML Cours de J. Cutrona 2 18/10/2016 HTML = H

18/10/2016 1 Programmation Web : HTML Cours de J. Cutrona 2 18/10/2016 HTML = HyperText Markup Language ? Hyper : Non linéaire, liens entre nœuds Text : Composé de texte Markup : Marqué, balisé Language : Langage  Langage à balises de description de documents hypertextes Programmation Web 2012-2013 3 18/10/2016 Qu’est-ce que HTML ? Langage de présentation de documents N’est PAS un langage de programmation Langage : syntaxe STRICTE Utilisé pour construire les pages Web Navigation hypertexte : ancres, liens Utilise des balises Documents exploités par des agents utilisateurs Navigateur pour « visualiser » le résultat Robots des moteurs de recherche pour indexer Automates divers pour traiter les données Programmation Web 2012-2013 4 18/10/2016 Bref historique des normes WWW Project Proposal (mars 1989) W3 Consortium (1994) http://www.w3.org HTML 1.0 (août 1994) HTML 2.0 (novembre 1995) HTML 3.2 (janvier 1997) HTML 4.0 (avril 1998) HTML 4.01 (décembre 1999) XHTML 1.0 (janvier 2000) HTML 5 depuis 2003, depuis 2007 au W3C, standard prévu en 2014 Programmation Web 2012-2013 5 18/10/2016 Pourquoi apprendre le langage HTML ? Il existe des éditeurs WYSIWYG Adobe GoLive Macromedia Adobe Dreamweaver Microsoft FrontPage NetObjects Fusion Netscape Composer OpenOffice … Pages Web produites dynamiquement Programme produisant du code HTML VOUS écrivez le programme  WYSIWYG hors jeu What You See Is What You Get Programmation Web 2012-2013 Principe de HTML Structuration d’un document texte Apporter de la structure au document Apporter de la logique au document À l’aide de balises Document « simple » Structure et mise en forme sont liées Titre plus gros, numérotation automatique Paragraphe = nouvelle ligne Livre = long texte Contenu du livre = ensemble de chapitres et de paragraphes Informations sur le livre ne faisant pas partie intégrante de l’histoire = titre, auteur, résumé, année de parution, … 6 18/10/2016 Programmation Web 2012-2013 Structurer un document ? 7 18/10/2016 Programmation Web 2012-2013 Mettre en forme ? 1- Structurer (HTML) Structurer le document 8 18/10/2016 Programmation Web 2012-2013 Titre du document Titre de niveau 1 Titre de niveau 2 Titre de niveau 3 Paragraphe … Repérer les structures : Marquer leur début/fin Utilisation de balises Appliquer une feuille de style 9 18/10/2016 Programmation Web 2012-2013 Style : Police de base : 8pt Titre de niveau 1 •Bleu, majuscules •Bords haut et bas Paragraphes •Justifier Style : Titre de niveau 1 •Rouge Paragraphes •Justifier 1ère lettre paragraphe •Gros, gris, italique 10 18/10/2016 Les grandes lignes Texte ASCII 7 bits (alphabet non accentué + quelques symboles) Retour à la ligne non structurant : non mis en forme Espaces (sens large) consécutifs = UN espace Caractères accentués : représentation spécifique Symboles : représentation spécifique Balises = structure, pas (plus) mise en forme Mise en forme : feuille de style CSS Commentaires :  Programmation Web 2012-2013 11 18/10/2016 Bref historique des fonctionnalités HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 Structuration du document OUI OUI OUI OUI Mise en forme dans les balises OUI OUI NON NON Feuilles de style CSS NON NON OUI OUI Feuilles de style CSS2 NON NON NON OUI Interactivité JavaScript NON NON OUI OUI Séparation du fond et de la forme Programmation Web 2012-2013 12 18/10/2016 Balises (tags, marqueurs) HTML Texte entouré par < et > (chevrons) Balises insensibles à la casse : <BALISE> <balise> <Balise> <bAlIsE> Ouvrante : <balise> Fermante : </balise> (éventuellement optionnelle) Non visibles dans le rendu du navigateur attributs/options : <bali attr="val" opt> Équivalent mais XHTML  minuscules Encadrement d'un bloc Programmation Web 2012-2013 13 18/10/2016 Utilisation des balises Utilisation CORRECTE TexteTexte Texte Utilisation INCORRECTE TexteTexte Texte Jamais de chevauchement (pile d’états) Programmation Web 2012-2013 14 18/10/2016 Outils de validation Les spécifications http://www.w3.org/ HTML 4.01 : http://www.w3.org/TR/html401/ CSS 2.1 : http://www.w3.org/TR/CSS21/ Validation HTML Validateur en ligne : http://validator.w3.org/ Validateur sur intranet : http://wwwdoc/w3c-validator/  Validation CSS : Validateur en ligne : http://jigsaw.w3.org/css-validator/ Validateur sur intranet : http://wwwdoc/css-validator/ Programmation Web 2012-2013 15 18/10/2016 Document HTML Document texte ASCII .htm ou .html Structure de base : 1. Information sur la version de HTML utilisée 2. En-tête déclaratif 3. Corps, contenu du document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Ma première page Web</title> </head> <body> Salut ! </body> </html> 1. 2. 3. Programmation Web 2012-2013 16 18/10/2016 Document HTML Document texte ASCII .htm ou .html Structure de base : 1.Information sur la version de HTML utilisée 2. En-tête déclaratif 3. Corps, contenu du document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Ma première page Web</title> </head> <body> Salut ! </body> </html> 1. 2. 3. Programmation Web 2012-2013 17 18/10/2016 Structure d’un document HTML SGML Standard Generalized Markup Language Permet de décrire les langages à balises DTD Document Type Definition Description d’un langage particulier Permet à l’agent utilisateur d’interpréter correctement le document  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Programmation Web 2012-2013 18 18/10/2016 DTD HTML 4.01 HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Programmation Web 2012-2013 19 18/10/2016 Document HTML Document texte ASCII .htm ou .html Structure de base : 1. Information sur la version de HTML utilisée 2.En-tête déclaratif 3. Corps, contenu du document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Ma première page Web</title> </head> <body> Salut ! </body> </html> 1. 2. 3. Programmation Web 2012-2013 20 18/10/2016 Structure et contenu de l’en-tête Informations sur le document Titre du document (obligatoire) <title> … </title> Méta données <meta name="nom" content="valeur"> <meta name="Author" content="J. Cutrona"> <meta name="keywords" lang="fr" content="cours, HTML"> <meta name="keywords" lang="en" content="course, HTML"> <meta name="copyright" content="2005 IUT Reims"> Autres informations Styles Scripts Programmation Web 2012-2013 21 18/10/2016 Table ASCII Car<->Code (nul) 0 (soh) 1 (stx) 2 (etx) 3 (eot) 4 (enq) 5 (ack) 6 (bel) 7 (bs) 8 (ht) 9 (nl) 10 (vt) 11 (np) 12 (cr) 13 (so) 14 (si) 15 (dle) 16 (dc1) 17 (dc2) 18 Car<->Code (dc3) 19 (dc4) 20 (nak) 21 (syn) 22 (etb) 23 (can) 24 (em) 25 (sub) 26 (esc) 27 (fs) 28 (gs) 29 (rs) 30 (us) 31 (sp) 32 ! 33 " 34 # 35 $ 36 % 37 Car<->Code & 38 ' 39 ( 40 ) 41 * 42 + 43 , 44 - 45 . 46 / 47 0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 Car<->Code 9 57 : 58 ; 59 < 60 = 61 > 62 ? 63 @ 64 A 65 B 66 C 67 D 68 E 69 F 70 G 71 H 72 I 73 J 74 K 75 Car<->Code L 76 M 77 N 78 O 79 P 80 Q 81 R 82 S 83 T 84 U 85 V 86 W 87 X 88 Y 89 Z 90 [ 91 \ 92 ] 93 ^ 94 Car<->Code _ 95 ` 96 a 97 b 98 c 99 d 100 e 101 f 102 g 103 h 104 i 105 j 106 k 107 l 108 m 109 n 110 o 111 p 112 q 113 Car<->Code r 114 s 115 t 116 u 117 v 118 w 119 x 120 y 121 z 122 { 123 | 124 } 125 ~ 126 (del) 127 Programmation Web 2012-2013 22 18/10/2016 Entités HTML (dans <body>) Représentation spécifique des Symboles Caractères accentués  Absents de la table ASCII donc composition Forme générale des entités HTML &code; Quelques exemples é "é"  é  " "  espace insécable < "<"  < & "&"  & Programmation Web 2012-2013 Entités HTML : lisibilité des sources Exemple de texte français : Cet été était décevant à cause de la météo exécrable de cette contrée éloignée. Le même texte utilisant les entités HTML : Cet été était décevant à cause de la météo exécrable de cette contrée éloignée 23 18/10/2016 Programmation Web 2012-2013 24 18/10/2016 Tables de caractères Définir la table des caractères de la page HTML Si non ASCII Sera utilisée par l’agent utilisateur (si disponible…) Permet de limiter les entités HTML (source : lisibilité) Balise META à placer dans <head> Table de caractères "Europe de l'Ouest« (latin1) <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> Table de caractères UNICODE <meta http-equiv="content-type" content="text/html; charset=UTF-8"> Programmation Web 2012-2013 25 18/10/2016 Document HTML Document texte ASCII .htm ou .html Structure de base : 1. Information sur la version de HTML utilisée 2. En-tête déclaratif 3.Corps, contenu du document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Ma première page Web</title> </head> <body> Salut ! </body> </html> 1. 2. 3. Programmation Web 2012-2013 26 18/10/2016 Utilisation et utilité des balises dans <body> Initialement : mise en page du document Police, couleur, taille, alignement du texte, … Maintenant : structuration logique du document Titres de différents niveaux Paragraphes, citation, exemple, code, … Listes Tableaux, … Si le document est correctement structuré, chaque élément structurel pourra est mis en forme via une feuille de style CSS Programmation Web 2012-2013 27 18/10/2016 Présentation de la source HTML <div> texte uploads/s1/ cours-html-1.pdf