Cours HTML PDF - Ibn Tofaïl University, Licence d'excellence 2024-2025

Language HTML Licence d’excellence 2024-2025 Intelligence Artificielle et Ingénierie des Données  Plan de cours 1 2 3 Introduction Balises de structure Textes, Titres, Listes et Ligne...

Language HTML Licence d’excellence 2024-2025 Intelligence Artificielle et Ingénierie des Données  Plan de cours 1 2 3 Introduction Balises de structure Textes, Titres, Listes et Lignes 4 5 6 Liens Tableaux Images et Frames 1 Introduction  Internet et le Web Internet Différentes applications C'est un réseau de réseaux, sans centre Courrier électronique névralgique, composé de millions de réseaux aussi Web bien publics que privés, universitaires, commerciaux Échange de fichiers (FTP, peer-to-peer) et gouvernementaux. Vidéoconférence, forum, chat,,... Le World Wide Web (WWW) Littéralement la « toile d’araignée mondiale », communément appelé le Web, et parfois la Toile, est un système hypertexte public fonctionnant sur Internet permettant de consulter, avec un navigateur, des pages accessibles sur des sites. Internet ayant été popularisé par l'apparition du World Wide Web, les deux sont parfois confondus par le public non averti. Le World Wide Web n'est pourtant que l'une des applications d'Internet.  Historique du Web (1) ▪ 1960: Projet de création du réseau ARPANET par DARPA (Defense Advanced Reseach Projects Agency des Etats Unis). Le but était de concevoir un réseau résistant à des attaques militaires. ▪ 1969: Production d’un réseau expérimentale de quatre nœuds reliant ainsi les universités américaines travaillant sur ce projet. ▪ 1973: Création du protocole TCP/IP ,Langage utilisé pour communiquer entre machines. La première connexion internationale est réalisée entre l' University College de Londres et le Royal Radar Establishment (Norway).  Historique du Web (2) ▪ 1980: Tim Berners-Lee, un chercheur au laboratoire CERN de Genève, mit au point un système de navigation hypertexte permettant de naviguer entre plusieurs sites. ▪ 1990: Tim Berners-Lee met au point le protocole HTTP (HyperText Transfer Protocol), ainsi que le langage HTML (HyperText Markup Language) permettant de naviguer à l’aide de liens hypertextes, à travers les réseaux. Le nom ARPANET est abandonné au profit d' INTERNET Le World Wide Web est né. ▪ 1994: Création du W3C (World Wide Web Consortium) :un organisme de normalisation à but non lucratif but : standardisation et développement du Web. Président: Tim Berners-Lee  Historique du Web (3) ▪ 1994: Création de Yahoo! ▪ 1995: Microsoft lance la « guerre des navigateurs » : Apparition d’Internet Explorer pour Windows 95 ▪ 1995: Altavista : premier « gros » moteur de recherche ▪ 1996: Navigateur Opera ▪ 1998: Apparition de Google ▪ 2003: Apple lance Safari ▪ 2004: Première version de Mozilla Firefox ▪ 2004: Première conférence « Web 2.0 » ▪ 2008: Google lance Google Chrome ▪ Actuellement: Explosion du Web mobile Web 1.0 2,0  Web 3.0 ▪ Depuis le début des années 2010, l'expression web 3.0 est régulièrement évoquée, mais elle fait débat. ▪ Certains considèrent que c'est juste un terme marketing pour faire le buzz, d'autres pensent qu'il s'agit bien d'une nouvelle étape distincte des précédentes. ▪ Thèse 1: Considérer le Web 3.0 comme l'Internet des objets ▪ Thèse 2: Considérer le Web 3.0 comme web sémantique  Protocole de communication ▪ Un protocole est un ensemble de règles qui définissent un langage afin de faire communiquer plusieurs ordinateurs.. ▪ Les plus utilisés aujourd’hui : HTTP, HTTPS, FTP, SMTP, POP. ▪ La plupart des ces protocoles sont bâtis autour de TCP/IP : Transmission Control Protocol/Internet Protocol. Ce protocole définit les règles que les ordinateurs doivent respecter pour communiquer entre eux sur le réseau Internet. Il se base sur la notion d’adressage IP.  Protocole de communication TCP/IP ▪ L’adresse IP est une adresse unique attribuée à chaque ordinateur sur Internet (c’est-à-dire qu’il n’existe pas sur Internet deux ordinateurs ayant la même adresse IP). ▪ IP version 4: les adresses sont codées sur 32 bits. (232 = 4 294 967 296 ) les adresses sont généralement notées avec quatre champs numériques compris entre 0 et 255, séparés par des points. La version IPv4 est encore actuellement la plus utilisée. ▪ IP version 6: les adresses sont codées sur 128 bits. 2128. Elle comprend 8 groupes de 4 chiffres hexadécimaux séparés avec : Exemple 8000:0000:0000:0000:0123:4567:89AB:CDEF  Protocole HTTP (1) ▪ Le protocole HTTP (HyperText Transfer Protocol) est le protocole le plus utilisé sur Internet. ▪ Il permet un transfert de fichiers hypertextes(essentiellement au format HTML) localisés entre un client et un serveur Web. ▪ Utilise les adresses URL (Uniform Ressource Locator). ▪ La forme d’une adresse URL : http:\\www.domaine.suffixe ▪ Serveur DNS: Correspondance adresse IP – URL. Chaque serveur directement connecté à internet possède une adresse IP propre. Cependant, les utilisateurs ne veulent pas utiliser des adresses numériques du genre 64.64.7.202 mais avec un nom de domaine plus explicites du type http://fs.uit.ac.ma ▪ Un serveur DNS est un ordinateur faisant la liaison entre un nom de domaine et son adresse IP. Un serveur DNS contient donc une table de correspondance entre un nom de domaine et adresses IP.  Langage HTML : Définition ▪ HTML: HyperText Markup Language est développé en 1991 par Tim Berners Lee. ▪ C'est un langage de balisage qui permet de mettre en forme des pages html : apparence et présentation. ▪ Les documents disponibles sur le Web sont écrits en langage HTML. ▪ Un document est dit hypertexte lorsqu’il permet d’accéder à d’autres documents au moyen d’un simple clic de souris sur une partie de son texte. ▪ Un document HTML peut incorporer du texte, des images, de l'animation et du son.  Exemple avant d’aller plus loin ▪ Le fichier page1.html et logo.jpg sont enregistrés sous le même dossier. ▪ Le fichier html peut être exécuter dans les différents navigateurs. Résultat  HTML : Evolution ▪ HTML 1.0 o Texte de base, images, liens hypertextes ▪ HTML 2.0 o Formulaires de saisie ▪ HTML 3.2 o Justification (gauche, centre, droite) o Tableaux o Équations mathématiques ▪ HTML 4.0 o Feuilles de style ▪ HTML 5 o Intégration des vidéos, meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires...  Qu’est ce que HTML 5 ? ▪ Une révision Majeure d’HTML o En remplacement de XHTML 2.0 o En remplacement de HTML 4.0 ▪ S’appuie sur les standards existants ▪ Simplifie la syntaxe ▪ Ajoute des balises sémantiques de structures  Règles de base HTML 5 Pour avoir Un document bien formé il faut respecter les règles suivantes: ▪ Les éléments et les attributs sont insensibles à la casse (mais la convention est d'utiliser les minuscules) ▪ Les éléments non vides doivent avoir une balise d’ouverture et une balise de fermeture. ▪ Les éléments vides doivent se terminer par les caractères /> précédés d’un espace pour marquer la fin de l’élément ▪ Les éléments ne doivent pas se chevaucher et donc obéir au principe premier ouvert, dernier fermé ▪ Tous les attributs doivent avoir une valeur incluse entre guillemets ("). Les différents attributs du même élément doivent être séparés par au moins un espace ▪ Une valeur doit être donnée à tous les attributs utilisés, y compris à ceux dont la valeur est unique. Par exemple, plutôt que d’écrire : Il faut utilizer  Création de pages HTML ▪ Une page HTML est un fichier du texte qui est composé par: o Le contenu de la page à visualiser par le navigateur. o Un certain nombre de commandes appelées balises ou tags interprétés par le navigateur. ▪ Pour créer et visualiser des pages HTML on a besoin d'au moins : o Un éditeur de texte tout simple: le Bloc-notes ou Notepad de Windows ou tout autre éditeur équivalent. o Un navigateur: Google chrome, Safari, Mozilla Firefox ,Opera,...  Les éditeurs HTML 1. Le mode graphique: repose sur le principe de WYSIWYG (What you see is what you get) (ce que vous voyez est ce que vous obtenez) c.à.d. la création se fait d’une façon visuelle. 2. Le mode texte ( ou code ) : l’éditeur HTML est considéré comme un simple éditeur de texte où la génération de code se fait ligne par ligne. Exemples des éditeurs HTML WYSIWYG: ▪ Dreamweaver: Adobe (Macromedia),complet, payant!!! ▪ Amaya: développé par W3C, gratuit et open-source ▪ NVU / KompoZer: l'éditeur HTML de Mozilla  Quelques éditeurs HTML texte ▪ Brackets: léger, rapide et très complet ▪ Komodo: Komodo edit est gratuit contrairement à Komodo IDE ▪ Notepad++: un éditeur HTML simple, mais très rapide, pour éditer les fichiers. Il permet de faire des recherches par mots clés dans les fichiers et bien paramétré, vous aurez aussi accès à l'auto- complétion etc. Il offre de nombreuses possibilités et peut être une solution simple pour de nombreux langages. ▪ NetBeans est un éditeur de code généraliste particulièrement adapté à HTML, CSS, PHP et Java. Il offre des outils puissants comme l'auto-complétion et tout un tas d'aide à la création de code. ▪ Eclipse HTML Editor: pour les habitués de cet IDE ▪ Sublime Text: l’un des éditeurs les plus utilisés ▪ Visual Studio Code: éditeur de code extensible développé en 2015 par Microsoft pour Windows, Linux et macOS. prend en charge presque tous les principaux langages de programmation  Les Navigateurs Web ▪ Le but principal d'un navigateur est de présenter la ressource Web que vous choisissez, en faisant la demande à partir du serveur et de l'afficher sur la fenêtre du navigateur. ▪ La ressource est généralement un document HTML, mais peut aussi être un PDF, une image ou un autre type. L'emplacement de la ressource est spécifié par l'utilisateur à l'aide d’une URI (Uniform Resource Identifier). ▪ Il existe de nombreux navigateurs Web, pour toutes sortes de matériels (ordinateur personnel, téléphones mobiles, etc.) et pour différents systèmes d'exploitation (Linux, Windows, Mac OS, iOS et Android). ▪ Les plus utilisés à l'heure actuelle sont: Google Chrome, Mozilla Firefox, Safari et Opera.  Evolution des navigateurs source: Browser Market Share Worldwide | Statcounter Global Stats 2 Balises de structure  Structure d’une page ▪ Le langage HTML5 est une amélioration du langage HTML4, avec des simplifications par rapport à la version XHTML. ▪ Tout document peut donc débuter par la déclaration du doctype suivi de l’élément racine html qui inclut les éléments head et body.  Le Doctype ▪ La déclaration du doctype est traditionnellement utilisée pour spécifier le type de balisage du document. ▪ Celui de XHTML 1.0 était le suivant : o. ▪ Celui de HTML 4.0 était le suivant : o. ▪ Celui de HTML 5 est : o.  L’élément racine html ▪ L’élément est l’élément racine du document Il possède des attributs dont les plus utiles sont: o l’attribut lang : indique la langue utilisée par défaut dans la page. Cette valeur sera reconnue par les moteurs de recherche pour leur permettre d’indexer les pages du site en effectuant un tri par langue. o l’attribut dir : indique le sens de lecture du texte de la page. Il peut prendre les valeurs ltr pour le texte qui se lit de gauche à droite (langues européennes) ou rtl pour le texte qui se lit de droite à gauche  L’entête du document: La balise head ▪ La balise head permet de regrouper des informations indispensables pour le référencement de la page ▪ Utilisé par les moteurs de recherche afin de déterminer les caractéristiques du document en vue de l'indexation du site dans leur base de données. ▪ Exemple: o Le titre, les mots clés, l’auteur, … ▪ La commande marque le début de l’entête. ▪ La commande marque la fin de l’entête.  La balise title ▪ L'en-tête doit contenir un seul titre, clair et précis. ▪ Outre que le titre de la page puisse parfois être affiché dans un navigateur, les moteurs de recherche l'utilise systématiquement dans leurs investigations. ▪ Il convient de choisir son titre avec soins et surtout d'éviter de l'omettre étant donné son importance dans le référencement auprès des outils de recherche. ▪ La commande marque le début du titre. ▪ La commande marque la fin de du titre.  Les balises meta ▪ Ces balises sont analysées d’informations descriptive sur le site, elles seront analysées par les robots pour permettre une indexation dans les moteurs de recherche c’est pourquoi elles doivent être correctement remplies.. ▪ Les balises META doivent être placées entre les balises et ▪ On distingue 2 types de balises méta : o Les balises meta "name" qui permette de décrire la page. o Les balises meta "http-equiv" qui envoie des informations supplémentaires via le protocole HTTP.  Les balises meta "name" (1) Elles permettent de préciser : ▪ L'auteur de la page grâce au mot clé author : ▪ L’adresse mail de l’auteur grâce au mot clé Made < meta name ="Made" content="adresse@eMail" /> ▪ Une description de la page grâce au mot clé description : ▪ Une liste de mots clés pour qualifier la page grâce au mot clé keywords. Ces mots clés seront séparés par des virgules : ▪ Le logiciel utilisé pour réaliser la page grâce au mot clé generator :  Les balises meta "name" (2) ▪ diriger les robots pour l’indexation de la page ▪ Où les champs attribut1 et attribut2 peuvent prendre les valeurs suivantes : index Page à indexer par le robot attribut1 noindex Interdiction d’indexer la page le robot peut suivre les liens contenus dans la page pour indexer d'autres follow attribut2 documents nofollow le robot ne peut pas suivre les liens de la page  Les balises meta "http-equiv" Elle permet ▪ de préciser l'encodage utilisé pour la page grâce au mot clé Content-Type.. Exemple pour un encodage au format UTF-8 : ▪ de préciser une date d'expiration pour la page grâce au mot clé expires : ▪ de demander à la page de se raffraichir (= se réactualiser) toutes les N secondes grâce au mot clé refresh. ▪ de rediriger le visiteur vers une autre page au bout de N secondes grâce au mot clé refresh et à la précision URL=chemin-vers-ma-page.  Exemple Cours HTML, CSS, et CMS Contenu de la page  HTML minimal Cours HTML, CSS, et CMS Contenu de la page  Les commentaires...... Commandes HTML...  Le corps du document: La balise body ▪ Le corps de la page contient tous les éléments visibles à partir d’un navigateur : les liens, le texte, les images, les éléments multimédias, les formulaires, etc. ▪ La commande marque le début du contenu de la page. ▪ La commande marque la fin du contenu de la page.  Les attributs de la balise body ▪ ATTRIBUTS DE FOND ET DE COULEUR DE TEXTE. Il est possible par des attributs de déterminer la couleur ou (et) une image de fond pour une page HTML et en outre celle du texte. Ces couleurs seront les valeurs par défaut pour l'ensemble de la page. ▪ L'attribut BGCOLOR="Couleur" donne une couleur de fond au document HTML. ▪ L'attribut TEXT="Couleur" donne une couleur au texte. ▪ L'attribut BACKGROUND="Adresse de l'image" permet l'affichage d'une image en arrière plan. ▪ L'attribut BGPROPERTIES="fixed" empêche l'image précitée de défiler avec le contenu du document.  Noms des couleurs en HTML ▪ La valeur d’une couleur est indiquée soit par son code alphanumérique soit par un nom entre "" : BGCOLOR="#C000000" ou BGCOLOR="red". ▪ http://www.code-couleur.com/palettes-5.html ▪ https://coolors.co  Exemple (1) Ma première Page web Bienvenue sur ma première page web Je suis en train d'apprendre à créer des pages web.  Exemple (2) Ma première Page web Bienvenue sur ma première page web. Je suis en train d'apprendre à créer des pages web. 3 Textes, Titres, Listes et Lignes  Les titres Exemple de code Résultat Titre niveau H1 Titre niveau H1 Titre niveau H2 Titre niveau H2 Titre niveau H3 Titre niveau H3 Titre niveau H4 Titre niveau H4 Titre niveau H5 Titre niveau H5 Titre niveau H6 Titre niveau H6  Les titres ▪ Les balises titres possèdent un attribut permettant un alignement indépendant du reste du document. ▪ L'attribut ALIGN="Type d'alignement" permet l'alignement du titre. Les options possibles d'alignement sont: o left (par défaut) pour la gauche, o right pour la droite ou o center pour le centre.  Les paragraphes ▪ Une balise permet de formater un texte brut en paragraphe o La commande marque le début du paragraphe. o La commande marque la fin du paragraphe.  L’alignement des paragraphes ▪ L'attribut ALIGN="Type d'alignement" permet l'alignement du texte. Les valeurs pour l’attribut align sont o left gauche, o right droite, o center centre ou o justify. Exemple  La police de caractères (HTML 3) ▪ La balise.. permet de définir les caractéristiques de la police, en l'occurrence le type, la taille et la couleur: o L’attribut "FACE" définit le type de police, o L’attribut "SIZE" définit la taille o L’attribut "COLOR" définit la couleur.  La taille de la police (HTML 3) ▪ La taille de la police se définit par l'attribut SIZE de l'instruction "". ▪ La taille de la police est déterminée à partir de sept valeurs (de 1 à 7) ▪ La valeur par défaut est 3. ▪ Exemple : o  La couleur de la police (HTML 3) ▪ L’attribut COLOR permet d'appliquer une couleur à la police de caractère ▪ La valeur de la couleur à spécifier s'effectue soit par un code alphanumérique soit par un nom : COLOR="#C000000" ou COLOR="red". ▪ En outre l'attribut "TEXT" de la commande se chargeait déjà ▪ de la couleur du texte pour l'ensemble du document tandis que l'attribut "COLOR" s'applique à des portions de texte. Exemple  Les retours à la ligne ▪ La balise insert un saut de ligne. ▪ La balise est une balise vide, c'est-à-dire qu'elle ne possède pas de balise de fin. ▪ Remarque: o est utilisée pour insérer des sauts de ligne, pas pour créer des paragraphes. o : 2 retours à la ligne = 1 ligne d'espacement  HTML Entities ▪ HTML Entities &entities: Le codage des caractères spéciaux  Texte préformaté ▪ Les balises obligent le navigateur à afficher un texte préformaté. Le navigateur respecte alors les fins de ligne (retours de chariot) et les espaces  Les styles (html 4) ▪ donne un texte en gras: texte en gras ▪ donne également un texte en italique ▪ donne un texte formaté avec une fonte à espacement constant (teletype): texte formaté avec une police à espacement constant ▪ La balise permet d'utiliser les indices dans des formules ▪ La balise permet d'utiliser les exposants dans des formules Exemple  La mise en valeur d’un texte (HTML 5) ▪ La balise est utilisée pour légèrement mettre en valeur un texte  La mise en valeur d’un texte (HTML 5) ▪ La balise est utilisée pour fortement mettre en valeur un texte  Marquer le texte ▪ La balise permet de faire ressortir visuellement une partie du texte  Les listes à puces ▪ La commande marque le début d’une liste à puce et la fermeture. ▪ La commande introduit une entrée dans la liste et pour la clôture. ▪ L'attribut TYPE="Forme" de la balise UL donne le type de puces. Trois valeurs possibles pour cet attribut TYPE: o Disque o Square o Circle Les listes à puces  Les listes numérotées ▪ Le langage HTML permet de numéroter les listes de plusieurs façons par l'intermédiaire de l'attribut qui s'applique également dans ce cas. ▪ Un attribut spécial permet de commencer une numérotation à partir d’un numéro précis. ▪ La commande ouvre la liste numérotée et marque la fin de la liste. ▪ L'attribut START="Valeur de départ" permet de débuter la numérotation à un point précis. ▪ L'attribut TYPE="Type numérotation" définit le type de la numérotation des éléments de la liste.  Les listes numérotées ▪ Les valeurs possibles de l’attribut TYPE sont: o i chiffres romains minuscules i, ii, iii, iv,... o I chiffres romains majuscules I, II, III, IV,... o a lettres minuscules a, b, c, d,... o A lettres majuscules A, B, C, D,... o 1 chiffres arabes (option par défaut) 1, 2, 3, 4, …  Les listes de définitions ▪ La commande ouvre la liste de définitions et marque la fermeture de la liste hiérarchisée. ▪ La commande ouvre une nouvelle entrée. ▪ La commande permet d'affecter un texte descriptif à la balise précédente  Création de lignes horizontales ▪ o SIZE : épaisseur en pixel de la ligne o WIDTH : largeur de la ligne. Peut s'exprimer en valeur absolue (pixels) ou en valeur relative (pourcentage de la largeur de la fenêtre) o ALIGN : alignement à gauche, au centre ou à droite dans la fenêtre (à utiliser si la ligne ne fait pas toute la largeur de la fenêtre) ▪ sans aucune option produit une ligne grise ombrée avec épaisseur 1px ▪ NOSHADE désactive l’ombrage de la ligne Exemple 4 Liens Hypertexte  Les Liens Hypertexte ▪ HTML est un langage qui permet en cliquant sur un mot, généralement souligné, (ou une image) de passer vers : ✓ un autre endroit du fichier HTML. ✓ un autre fichier HTML du même site. ✓ un autre fichier HTML situé sur un autre site. ▪ La syntaxe des liens hypertexte est : texte/Image ▪ Il existe principalement deux types de lien à savoir: o Les liens internes (ancres); o Les liens externes.  Les Liens externes ▪ La création des liens hypertextes se fait avec la balise : texte du lien ▪ L'adresse cible peut être un lien vers : o Un fichier sur le même serveur o Un site extérieur o Une adresse e-mail  Lien vers fichier sur le même serveur ▪ l’arborescence est comme suit: Page index.HTML Page html5.HTML Lien vers un site externe Lien vers une adresse mail  Les Liens internes ▪ Des liens vers des endroits précis dans le même document html, appelés les ancres ou les pointeurs: ▪ Insérer une ancre : o Nommer l’endroit où l’utilisateur veut accéder en utilisant la balise o Ou attribuer un id à l’élément ▪ Pointer vers cette ancre : o Se fait par la création d’un lien an ajoutant le nom de l’ancre : ancre ▪ Si l’ancre se trouve sur une autre page située sur le même serveur l’appel se fait de cette manière: ancre Exemple Exemple 5 Tableaux  Les tableaux ▪ et : Marquent le début et la fin d’un tableau ▪ et : Servent à définir un titre pour le tableau ▪ et :Servent à définir un titre de chaque colonne ▪ et :Servent à définir une ligne du tableau ▪ et : Servent à définir une cellule du tableau Les tableaux  Les tableaux - attributs ▪ < TABLE WIDTH="w|w%" BORDER="b" CELLPADDING="cp" CELLSPACING="cs"» ALIGN="LEFT|CENTER| RIGHT"> ▪ WIDTH="w|w%" Largeur du tableau exprimée en pixel ou en pourcentage de la largeur de la fenêtre. ▪ BORDER="b" Largeur de l'encadrement du tableau et des cellules exprimées en pixels. ▪ CELLPADDING="cp" Marge intérieure de chaque cellule (en pixels). ▪ CELLSPACING="cs" Espacements horizontal et vertical entre les cellules du tableau  Les lignes : … ▪