Remerciez-le!

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

Cours du module M31 : Technologies du Web Chapitre 2 : Langage HTML Pr. A. El M

Cours du module M31 : Technologies du Web Chapitre 2 : Langage HTML Pr. A. El Mhouti FSTH Université Abdelmalek Essaâdi Faculté des Sciences et Techniques d’Al-Hoceima Département de Mathématiques et Informatique Filière : LST-MI – S6 Année universitaire : 2018 - 2019  Introduction à HTML  Concepts de base de HTML Eléments Balises Attributs  Structure d’un document HTML  Organisation et mise en forme du texte  Les liens et les ancres  Les images et les figures  Les tableaux  Les formulaires  Les frames Pr. A. El Mhouti FSTH 2 Plan Introduction à HTML HTML : HyperText Markup Language (langage de balisage d'hypertexte). HTML est un langage informatique utilisant des textes et des balises afin de gérer et d’organiser le contenu des pages Web (texte, liens, images… ). HTML permet également de mettre en forme le contenu des pages Web : les couleurs, les images, les polices … HTML n'est pas à proprement parlé un langage de programmation, mais plutôt un langage qui permet de mettre en forme du contenu. HTML fait son apparition dès 1991 lors du lancement du Web. Pr. A. El Mhouti FSTH 4 Introduction à HTML Généralités HTML permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. HTML est souvent utilisé conjointement avec le langage de programmation JavaScript des feuilles de style en cascade (CSS). Pour créer un fichier HTML on peut utiliser un simple éditeur de texte. Pour visionner un fichier en HTML on utilise un navigateur (un logiciel qui lit le code HTML et l'interprète). Pr. A. El Mhouti FSTH 5 Introduction à HTML Généralités Années 1990 : HTML est créé par Tim Berner-Lee au CERN. 1995 : HTML 2.0 : normalisation par l’IETF (Internet Engineering Task Force). 1996 : HTML 3.2 : ajout des tables, des applets (Java), etc. 1996 : normalisation par le W3C (World Wide Web Consortium). 1998 : HTML 4.01 : ajout des feuilles de styles, des frames, etc. 2000 : XHTML 1.0 : reformulation de HTML 4 en XML 1.0. 2002-2006 : XHTML 2.0. 2007-maintenant : HTML5 : apporte de nombreuses améliorations : meilleur agencement du contenu, nouvelles fonctionnalités pour les formulaires, possibilité d'inclure facilement des vidéos, etc. Pr. A. El Mhouti FSTH 6 Introduction à HTML Historique Concepts de base de HTML (Eléments, balises, attributs) HTML repose sur l’utilisation d’éléments délimités par des balises. Les éléments sont utilisés pour structurer et présenter le contenu des différents blocs (titres, paragraphes, images, …) et lui donner du sens. Selon l’élément utilisé, le navigateur va reconnaître la nature du contenu. Exemple : L’élément p suivant sert à définir un paragraphe : Pr. A. El Mhouti FSTH 8 Concepts de base de HTML Eléments Un élément est délimité par des balises : <element> ….contenu ….. </element>. Les balises HTML sont les éléments de base du codage HTML d’une page web. Un élément HTML peut être constitué d’une :  paire de balises (ouvrante et fermante) et d’un contenu. balise unique qu’on dit orpheline (pas besoin de balise de fin). Exemples : L’élément p est constitué d’une paire de balises et d’un contenu. L’élément br (retour à la ligne) n’est constitué que d’une balise orpheline. Pr. A. El Mhouti FSTH 9 Concepts de base de HTML Balises La balise ouvrante d’un élément HTML peut contenir des attributs. Les attributs sont des valeurs supplémentaires qui permettent d'apporter certaines précisions à des éléments afin d'adapter leur comportement. Un attribut contient toujours une valeur : attribut="valeur" Exemple : L’élément img (pour insérer une image) à deux attributs : src et alt. src : nom et emplacement de l’image alt : texte alternatif dans le cas où l’image ne serait pas disponible. Pr. A. El Mhouti FSTH 10 Concepts de base de HTML Attributs Structure d’un document HTML Pour écrire du code HTML, on utilise des éditeurs de texte dédiés à l'écriture de code : Sublime Text Notepad++ Brackets jEdit TextWrangler jEdit Pspad, … Un document HTML à pour extension .html (par exemple : test.html). Le navigateur web interprète les balises HTML pour faire l’affichage de la page. Pr. A. El Mhouti FSTH 12 Structure d’un document HTML Créer une page web avec un éditeur Un document HTML est structuré comme suit : DOCTYPE : sert à préciser le type du document. élément html : balise principale du code. Elle englobe le contenu de la page. élément head : entête de la page HTML. élément body : inclut le contenu visible de la page : textes, images, liens, vidéos, … Pr. A. El Mhouti FSTH 13 Structure d’un document HTML Structure d’une page HTML En-tête de la page Corps de la page La balise <title> contient le titre de la page qui s’affiche dans la barre de titre du navigateur. Pr. A. El Mhouti FSTH 14 Structure d’un document HTML En-tête <head> : balise <title> Les balises <meta> permettent de fournir des informations sur la page web. Les balises <meta> permettent de préciser plusieurs types d’information : Le type de codage utilisé. Une description (description) de la page. L'auteur (author) de la page. Une liste de mots clés (keywords) séparés par des virgules pour qualifier la page. Le logiciel utilisé (generator) pour réaliser la page, … Pr. A. El Mhouti FSTH 15 Structure d’un document HTML En-tête <head> : balises <meta>  Il existe plusieurs façon de traduire les caractères alphabétiques en codes binaires : ASCII : les caractères sont codés sur 7 bits, (soit 27 = 128 caractères), ce qui n’est pas suffisant pour stocker tous les caractères (accents, cédilles...) ISO 8859-1 (Latin-1) : les caractères sont codés sur 8 bits (soit 28 = 256 caractères) ISO 8859-15 (Latin-9) : les caractères sont codés sur 8 bits. Il ajoute notamment le caractère euro (€) et les caractères œ et Œ à la place de certains caractères. Windows-1252 (AINSI) : un encodage propre aux ordinateurs Windows. Les caractères sont codés sur 8 bits. Certains caractères diffèrent des codages ISO. MacRoman : est un encodage propre aux ordinateurs Apple Macintosh. S'il est lui aussi codé sur 8 bits, certains caractères diffèrent des codages ISO et Windows-1252. UTF-8 (Unicode) : vise à donner à tout caractère un code unique et compatible sur toutes les ordinateurs (Windows, Mac, Unix). UTF-8 est codé sur 8 à 32 bits ce qui permet d'encoder un nombre de caractères quasi illimité. Pr. A. El Mhouti FSTH 16 Structure d’un document HTML Codage des caractères  A l'origine, les fichiers HTML sont encodé en ASCII (7 bits) (sans caractères spéciaux).  Pour pallier à ce problème, HTML permet de traduire chaque caractère spécial par un code alpha numérique : on indique entre des caractères & et ; la lettre et l'accent.  Exemple : le caractère é doit être représenté par la chaine é  Pour écrire des documents consultables sans problèmes quelque soit le type de codage, il est nécessaire de coder les caractères accentués en utilisant ce codage particulier.  Liste de tous les caractères accentués et spéciaux sur : http://www.snv.jussieu.fr/archambault/cours/html/ressources/caracteres.html Pr. A. El Mhouti FSTH 17 Structure d’un document HTML Codage des caractères  Avantage de l'UTF-8 : L'UTF-8 est aujourd'hui compris par tous les navigateurs courants. Il permet d'encoder un nombre quasi illimité de caractères (plus de 4 milliards !). En utilisant l'UTF-8, on s'affranchit de la conversion des caractères spéciaux en code HTML. Un "e" avec accent aigu (é) pourra donc être écrit directement "é" et non "é" dans le code source.  Pour écrire les pages HTML en UTF-8, il faut préciser dans l'entête de la page l'encodage choisi grâce à une balise <meta> : Pr. A. El Mhouti FSTH 18 Structure d’un document HTML Codage des caractères Exemple 1 : Pr. A. El Mhouti FSTH 19 Structure d’un document HTML Structure d’une page HTML Organisation du texte Un commentaire en HTML est un texte qui sert à ajouter des commentaires. Un commentaire n'est pas affiché, il n'est pas lu par le navigateur, cela ne change rien à l'affichage de la page. Un commentaire est une balise HTML avec une forme bien spéciale :  Exemple : Pr. A. El Mhouti FSTH 21 Organisation du texte Commentaires :  La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. La balise (paragraph) est utilisée pour délimiter les paragraphes : texte texte texte texte texte texte Exemple : Pr. A. El Mhouti FSTH 22 Organisation du texte Paragraphes : En HTML, la touche "Entrée" ne crée pas un retour à la ligne. Pour écrire un 2ème paragraphe, il suffit d'utiliser une deuxième balise . Une deuxième balise provoque un retour à la ligne. En HTML, seule une espace qui est reconnu. Pour ajouter d'autres espaces, on doit utiliser l'entité HTML Exemple 2 : Pr. A. El Mhouti FSTH 23 Organisation du texte Paragraphes : Pour aller à la ligne dans un uploads/s3/ cours-du-module-m31-technologies-du-web-chapitre-2-langage-html.pdf