Programmation Web 1 Cours - Falih Noureddine 2024/2025 PDF

UNIVERSITE SULTAN MOULAY SLIMANE FACULTE POLYDISCIPLINAIRE BENI MELLAL Programmation Web 1 Année universitaire: 2024/2025 Pr Falih Noureddine MIP/S3  Technologies du web Plan I. Généralités II. HTML5...

UNIVERSITE SULTAN MOULAY SLIMANE FACULTE POLYDISCIPLINAIRE BENI MELLAL Programmation Web 1 Année universitaire: 2024/2025 Pr Falih Noureddine MIP/S3  Technologies du web Plan I. Généralités II. HTML5 III. CSS3  Généralités Définitions  C’est quoi « internet »  C’est quoi « le web »  Généralités Définitions  Internet INTERconnected NETwork : Réseau mondial de machines interconnectées permettant aux utilisateurs de communiquer, de publier des informations, de transférer des données, de travailler à distance…  Un réseau de réseaux  Des protocoles de communication : TCP-IP  Diverses applications : courrier électronique, transfert de fichiers (ftp), messagerie instantanée, peer-to-peer..  Aujourd’hui synonyme avec le WWW (World Wide Web ou la toile mondiale)  Généralités Définitions  Web : développée par Tim Berners-Lee en1989  repose sur internet  Système d’information réparti en « pages web »  des hypertextes et hyperliens permettant de naviguer entre les documents web  des protocoles de communication HTTP et HTTPS  des adresses pour nommer les documents URL  des langages pour créer et gérer les documents web  des navigateurs qui interprètent les documents  Généralités Définitions  W3C « World Wide Web Consortium » créé par Berners-Lee: organisme de normalisation chargé de promouvoir la compatibilité des technologies du web  guide aujourd’hui l’évolution du web  « un seul web partout et pour tous »  Généralités Evolution du web  Généralités Evolution du web  Web 1.0 (web statique) : centré sur la distribution d’informations. Il se caractérise par des sites orientés produits, qui sollicitent peu l’intervention des utilisateurs (sites vitrines).  Web 2.0 (web social): plus dynamique et privilégie le partage et l’échange d’informations et de contenus entre le client et le serveur (textes, vidéos, images ou autres).  Emergence des réseaux sociaux, des smartphones et des blogs.  Web 3.0 (web sémantique) : s’appuie sur la compréhension machine des données dans le but ultime de créer des sites plus intelligents, connectés et ouverts, en tenant compte des profils des utilisateurs (localisation, préférences etc…)  Web 4.0 (web connecté et Smart): basé sur l’internet des objets IoT (Internet of Things) et AI (Artificial Intelligence)..  Généralités Protocole HTTP  Le Web utilise le protocole HTTP (HyperText Transfer Protocol), le plus utilisé depuis les années 90.  ou HTTPS (S pour sécurisé).  Exemple : https://www.google.fr  Le protocole http représente un langage de communication client-serveur sur internet.  HTTP est basé sur le paradigme: requête / réponse  les pages web consultées via navigateur sont connectées par des liens hypertextes...  Généralités Protocole HTTP Versions HTTP  HTTP 1.0: RFC 1945  HTTP 1.1: RFC 2068 et 2616 (la plus utilisée Actuellement)  HTTP 2.0: RFC 7540 (Mai 2015 )  HTTP / 2 est utilisé par 33,8% des sites Web ( Mars 2019) Format de messages HTTP:  La spécification du HTTP (RFC1945 et RFC 2616) définit le format des messages du protocole HTTP. Principalement, on trouve deux types de message:  Requête HTTP  Réponse HTTP.  Généralités Protocole HTTP Requêtes HTTP  Les requêtes HTTP sont des messages envoyés par le client pour initier une action sur le serveur. Une requête HTTP se compose de : 1) Ligne de commande : (Méthode, URL, Version du protocole HTTP) 2) Les champs d'entête : ensemble de lignes permettant de donner des informations supplémentaires sur la requête 3) Le corps de la requête : ensemble de lignes optionnelles devant être séparées des lignes précédentes par une ligne vide et permettant un envoi de données par une commande POST lors de l'envoi de données au serveur par un formulaire  Généralités Protocole HTTP Requêtes HTTP Une requête HTTP a donc la syntaxe suivante: METHODE URL VERSION ENTETE :Valeur... ENTETE :Valeur Ligne vide CORPS DE LA REQUETE ( : saut de ligne).  Généralités Protocole HTTP Réponse HTTP Une réponse HTTP est un ensemble de lignes envoyées au navigateur par le serveur. Elle comprend :  Une ligne de statut : c'est une ligne précisant la version du protocole utilisé et l'état du traitement de la requête à l'aide d'un code et d'un texte explicatif.  Les champs d'entête de la réponse :  Le corps de la réponse: il contient le document demandé..  Généralités Protocole HTTP Réponse HTTP Elle a la syntaxe suivante : VERSIONHTTP CODE EXPLICATION ENTETE :Valeur …. ENTETE :Valeur Ligne vide CORPS DE LA REPONSE  Généralités Technologie Web Ordinateurs connectés au Web  Ordinateurs spécifiques  Utilisateurs Clients Serveurs  Envoie des  Internautes sites web aux clients  Généralités Technologie Web  Un client et un serveur communiquent : 1) Le client demande une page au serveur. 2) Le serveur génère la page (à l'aide du langage serveur). 3) Le serveur envoie la page (sous forme de code HTML et CSS).  Généralités Technologie Web  Pour construire et gérer un site web, on a besoin de langages de programmation appropriés :  Des langages clients (Front-end)  Des langages serveurs (Back-end)  Généralités Langages de programmation  Langages clients ou Front-end : décrivent comment le site web doit s’afficher :  Exemple : HTML5, CSS3, JavaScript…  Langages serveurs ou Back-end : décrivent comment le site web doit se comporter.  Exemple : PHP, Java, C#, C++, Ruby, Perl, Python..  Généralités Framework  Framework : boîte à outils qui se révèlent de plus en plus indispensables aujourd'hui.  Au lieu de creuser un trou "à la main", on préfère utiliser une pelleteuse. Par analogie, au lieu de créer un site web à la main, on se fait aider un peu par un Framework.  Les frameworks se rapportent à des langages. On peut citer :  Pour PHP : Symfony, Zend...  Pour Java : Java EE (ou J2EE)  Pour Python : Django  Pour Ruby : Ruby on Rails  Pour C# : ASP.NET (de Microsoft)  Pour JS : Angular (de Google). la version 12.0.0 sortie en mai 2021  Généralités CMS (Content Management System)  On confond souvent Framework et les Systèmes de Gestion de Contenu (CMS) tels que WordPress.  WordPress n'est pas un Framework :  Un CMS est un site prêt à l'emploi. Il est plus facile à utiliser qu'un Framework car il n'est pas nécessaire de coder, mais il est aussi plus limité  Il existe des projets collaboratifs permettant de créer des sites web tel que : Joomla  Généralités Navigateurs web (Web Browser)  Logiciel installé sur ordinateur qui sert à traduire les codes écrits en langages HTML, CSS et JavaScript sous forme de sites web utilisables et consultables par tout le monde.  Exemple de navigateurs  Internet Explorer “Edge” (Windows) ;  Mozilla Firefox (Windows, Mac et Linux) ;  Opera (Windows, Mac et Linux) ;  Safari (Mac,Windows)  Maxthon (Windows);  Google Chrome (Windows, Mac et Linux)  Généralités Serveurs Web  Logiciel permettant à des clients d'accéder à des pages web, à partir d'un navigateur installé sur leur ordinateur distant.  Un serveur Web peut être :  un ordinateur tenant le rôle de serveur informatique sur lequel fonctionne un logiciel serveur HTTP ;  le serveur HTTP lui-même ;  Des serveurs abritant des applications Web.  Exemples de serveurs Web:  Apache Windows/UNIX (gratuit) (www.apache.org)  Microsoft IIS (Internet Information Services) de Microsoft  Microsoft PWS (Personal Web Server)  Iplanet Web Server : serveur payant de Netscape…  Généralités Serveurs Web : Le Serveur Apache  Le serveur le plus répandu sur Internet.  S’appuie sur les protocoles HTTP ou HTTPS (mode sécurisé de HTTP)  Un logiciel fonctionnant sur les systèmes d'exploitation de type Microsoft, Unix.  Fonctionnalités  Configuration assez simple  Accès sécurisé en fonction des adresses IP  Chargement de modules pour ajouter de nouvelles fonctionnalités (php, mysql... )  Etc,…  Généralités Accès aux serveurs Web : URL (Uniforme Resource Locator)  Une chaîne de caractères utilisée pour adresser les ressources dans le Web  Exemple : http://www.exemple.com/chemin/page.html?q=req  http : protocole  www.exemple.com : hôte  /chemin/ : chemin absolu sur le service  page.html : nom de la page Web  q=req : chaine de requête, transmise à la page  Généralités Pages Web  Une ressource du World Wide Web  Créée par des webmasters à l’aide des langages HTML/XHTML et CSS ainsi que JS pour rendre les pages plus dynamiques.  Possède une adresse Web.  Peut contenir du texte, des images, des tableaux, des formulaires et autres éléments multimédias (audio,Vidéo..)  Visualisée par les internautes grâce à des navigateurs Web  Généralités Création de Site Web La définition et maitrise des axes suivants favorisent la réussite de tout projet de création de site web :  Objectif du site, sa cible, sa rentabilité, les moyens financiers;  Autonomie souhaitée et type de moyens humains pour la Mise à jour;  Contenu des pages, services attendus, principe de navigation  Généralités Etapes principales d’un projet de Création de Site Web :  Objectifs du site Spécification  Définition du Nom de domaine et choix d’un hébergeur des besoins  Choix et installation d’un Framework  Etablissement de la structure des pages HTML ou XHTML Conception  Définition d’une arborescence  Mise au point d’une charte graphique et éditoriale  Création des pages Réalisation  Mise en place de la charte graphique  Développements dynamiques (formulaires, services, etc..)  Lancement du site: mise en ligne Terminaison  Annonce: faire connaître son site & Suivi  Maintenance (nouveaux contenus, améliorations, suivi..)  Généralités Création de Site Web : Editeurs  Il existe deux types d’éditeurs pour la création de site web :  Éditeurs WYSIWYG What You See Is What You Get: permettent de créer un site à la manière d’un traitement de texte (sans avoir à taper le moindre code)  Éditeurs de texte : souvent gratuits comme Bloc-Notes, Notepad++, jEdit…  Sublime Text :utilisés en HTML5, CSS3, Python, Rub…  Utiliser les langages du Web ou frameworks appropriés  Tester continuellement son site sur au moins 2 navigateurs à la fois pendant sa création, pour s’assurer que tous les internautes puissent visualiser le même résultat.  Ou peut utiliser un système de gestion de contenus CMS mais c’est déconseillé pour un informaticien  Généralités Création de Site Web : Quel type de pages créer  Pages statiques:  Chacune des pages est créée en HTML.  Un ordinateur qui se connecte au serveur, demande une page. Celle ci lui est directement servie.  le serveur web (HTTP) se contente d'envoyer des fichiers stockés sur disque dur.  Pages dynamiques:  les pages sont générées dynamiquement, selon les données traitées par le navigateur (liens, formulaires, cookies...) et par le serveur (BD SQL, fichiers de configuration...)  le serveur web (HTTP) exécute un ou plusieurs programmes qui vont renvoyer des données interprétables par le navigateur  Généralités Bases de données  Ensemble de tables, reliées entre elles, permettant d’enregistrer des données typiques (Ex : liste des utilisateurs) et de répondre à certaines requêtes et interrogations.  Une BD est gérée par un SGBD (système de gestion des bases de données (Ex : MySQL, PostgreSQL, SQL Server, Oracle, SQLite..)  Pour communiquer et interroger une BD, on utilise un langage de requêtage (SQL)  le serveur communique avec la base de données, par le biais du langage serveur.  Généralités Sites responsives et mobiles  Un site web doit être visualisé correctement sur un ordinateur et sur un mobile (tablette, smartphone). deux solutions sont envisagées :  Créer un site responsive : penser dès le départ à ce que le design s’adapte automatiquement aux petits appareils (c’est la solution la plus simple)  Créer une application native : développer une application mobile (pour iOS,Android, etc.).  Travail lourd mais fructueux s’il y a des services complexes à gérer (ex : jeux).  HTML5 HTML « HyperText Mark-up Language »  HTML est la « langue maternelle » de votre navigateur  « Hyper » : non linéaire  « Text » : s'explique tout seul (compréhensible).  « Mark-up » : balisage  « Language » : langage  C’est un langage de programmation Front-end qui sert à créer des sites web  HTML a été inventé en 1990 Tim Berners-Lee pour faciliter l'accès par des scientifiques d'universités différentes aux documents de recherche de chacun  XHTML (Extensible HyperText Mark-up Language) : une nouvelle façon mieux structurée d'écrire du HTML.  HTML5 Les versions de HTML  HTML 1 : première version créée par Tim Berners-Lee en 1991  HTML 2 : apparaît en 1994 et prend fin en 1996 avec l'apparition du HTML 3.0.  HTML 3 : apparue en 1996, cette version rajoute de nombreuses possibilités au langage (tableaux, applets, scripts, positionnement du texte autour des images, etc.)  HTML 4 : sortie en 1998 et utilisée un long moment durant les années 2000. Elle propose l'utilisation de frames (qui découpent une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les formulaires, etc. Cette version permet pour la 1ère fois d'exploiter des feuilles de style du fameux CSS !  HTML 5 : Dernière version du HTML. Elle permet l’inclusion des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc.).  HTML5 Les balises  Les balises sont les étiquettes utilisées pour marquer le début et la fin d'un élément.  balises ouvrantes ()  balises fermantes ()  Exemple :   ce texte doit être écrit en gras  Titre  Sous-titre   Exception : Balises orphelines comme :  ;  …  HTML5 Les attributs  Attributs = Propriétés utilisées pour donner des indications supplémentaires aux balises.  Les attributs s'inscrivent toujours au sein de la balise ouvrante, et ils sont suivis par un signe égal et la valeur de l'attribut entre des guillemets.  La syntaxe complète d’une balise avec un attribut est : …  On peut utiliser plusieurs attributs, séparés par un espace, dans une même balise:...  Exemple :  HTML5 Les attributs Remarque :  Lorsqu’on affecte plusieurs balises à un élément, les balises doivent être imbriquées en ordre.  La première balise de fermeture doit correspondre à la dernière balise d’ouverture non fermée.  Exemple :  contenu : est correct.  contenu : est incorrect.  HTML5 Structure d'un document HTML5  Un document HTML5 possède par défaut un en-tête et un corps. L’en-tête (élément head) définit les propriétés globales du document (titre, apparence, méta-informations..) et le corps (élément body) renferme des balises de contenu. Titre du document...  HTML5 Structure d'un document HTML5  : déclaration permettant de renseigner le navigateur sur le type de document HTML délivré. Il s’agit bien d’un préambule et non d’un tag HTML à part entière.  Avant HTML 5, le doctype mentionnait l’utilisation d’un document de référence, la DTD (Document Type Definition), grammaire résumant la syntaxe HTML et ses attributs.  A l’arrivée de HTML 5, ce doctype a été simplifié (non sensible à la casse, et aucune DTD n’est précisée).  : L’élément constitue la racine de tout document HTML.  Parmi les attributs de la balise , on trouve: lang: permet de préciser la langue du document.  HTML5 Structure d'un document HTML5  : En-tête du document.  fournit plusieurs renseignements non indiqués, forcément, par le contenu.  Il recueille plusieurs autres balises à des rôles précis : , , , , que nous étudierons ultérieurement.  : Corps du document  Il contient toutes les balises HTML de contenu: texte, blocs, images, titres, médias, formulaires….  : Titre du document  Il est affiché par le navigateur.  HTML5 Structure d'un document HTML5   : Les balises offrent des descriptions sur les données ou informations.  L’attribut charset spécifie l’encodage des caractères utilisé. Cette déclaration doit être unique pour l’ensemble du document HTML.  HTML5 Structurer le contenu d’une page web  HTML5 permet de structurer une page web pour que l’on puisse distinguer du premier coup d’œil les grandes zones qui la composent telles que :  l’entête « header » ;  la zone de navigation « navigation »  la zone principale « aside »  le pied de page « footer ».  Avantages : le code source et les différentes composantes du document sont clairement identifiées.  HTML5 Principales balises d’une page web utiliser des “indentations” avec Tab Ma structure complète en HTML5  HTML5 Principales balises d’une page web :  Élément fondamental pour regrouper un contenu relatif à une même thématique ou une même fonctionnalité. Ça permet de :  scinder un document en plusieurs chapitres, pour découper un contenu présenté dans différents onglets ou différentes vues  délimiter les thématiques d’un élément.  HTML5 Principales balises d’une page web :  Exemple : Une section englobant un ensemble d’articles Résultat Articles Titre de l’article Contenu de l’article Titre de l’article Contenu de l’article  HTML5 Principales balises d’une page web :  Exemple : Un article contenant des sections Les couleurs Ce sont des perceptions visuelles subjectives dépendant de la fréquence des onde lumineuses. Le rouge Couleur primaire, le rouge excite le plus l’œil humain après le jaune. Le vert Menthe à l’eau ou grenouille, le vert est souvent associé à la nature.  HTML5 Principales balises d’une page web :  HTML5 Principales balises d’une page web :  Section de contenu dans une application web, dont la composition peut être indépendante du reste de la page et extraite individuellement. Dans un article, on peut utiliser les balises et et le découper aussi en plusieurs parties via.  Exemple : Titre de l’article Publication le Vendredi 13 octobre 2024 par Pr Falih Contenu de l’article, premier paragraphe. Contenu de l’article, deuxième paragraphe. ‐‐ ‐‐  HTML5 Principales balises d’une page web :  correspond à un en-tête de section. Il peut être l’entête d’introduction (d’un document, d’une autre section, d’un article). Il peut contenir des titres, formulaire de recherche, table des matières, logo, etc.  HTML5 Principales balises d’une page web :  Exemple : Titre principal Accueil Contact ‐ À propos  HTML5 Principales balises d’une page web :  Pied de page, de section ou d’article visant à contenir les informations que l’on peut habituellement placer en fin de section (mentions légales, liens utiles, contact sources d’une actualité...)  HTML5 Principales balises d’une page web :  Exemple : ‐‐ ‐‐ Tous droits réservés Retour à l’accueil Contact Plan du site  HTML5 Principales balises d’une page web :  Les niveaux de navigation peuvent être multiples sur un site web ou une application. Il peut s’agir de liens portant sur tout le site, sur une sous partie de l’arborescence, notamment, vers des pages communes et transversales, ou bien encore vers des sections du même document.  L’élément est un choix de prédilection pour la navigation principale (souvent dans ) et éventuellement pour les navigations annexes de moindre valeur (souvent dans ).  HTML5 Principales balises d’une page web :  Une page web est bien souvent dotée d’un contenu principal et d’informations connexes qui ne sont pas essentielles à sa compréhension. On parle alors de contenu tangentiel, et l’élément est destiné à l’abriter comme :  une définition d’un concept utilisé dans le contenu,  une biographie,  un glossaire,  une chronologie apportant un fond historique,  Astuces  notes  autres éclaircissements.  HTML5 Principales balises d’une page web :  Exemple : ‐‐ ‐‐ Gestion Panier Commandes Suivi Glossaire CSS Cascading Style Sheets HTML HyperText Markup Language  HTML5 Principales balises d’une page web: Les balises de type bloc (block)  Les balises de type bloc occupent par défaut toute la largeur de la fenêtre du navigateur. Elles se placent ainsi les unes au dessus des autres. Généralement, le navigateur insère automatiquement un espace au-dessus et en dessous du contenu de la balise.  Le code: Paragraphe 1 Paragraphe 2 va s’afficher sur deux lignes car la balise est une balise de type bloc. Chaque paragraphe va occuper une ligne.  HTML5 Principales balises d’une page web: Les balises de type bloc (block)  Les balises de titres....  Les balises de paragraphe....  Les balises de citation....  La balise qui introduit une ligne horizontale.  Les balises... des listes ordonnées.  Les balises... des listes non ordonnées.  Les balises... des listes de définitions.  Les balises de tableaux....  Les balises de déclaration de formulaires....  La balise... spécialement conçue pour introduire une division (div pour division) sans passer par une des balises citées ci avant. Cette balise est particulièrement utile pour appliquer une déclaration de feuilles de style CSS.  HTML5 Principales balises d’une page web: Les balises de type en ligne  Au contraire des éléments de type bloc, les éléments en ligne se placent toujours l’un à côté de l’autre afin de rester dans le flux du texte.  Le code : texte en gras et en italique est restitué sur une seule ligne: texte en gras et en italique.  HTML5 Principales balises d’une page web: Les balises de type en ligne  La balise... de mise en gras du texte.  La balise... de mise en italique du texte.  La balise de passage à la ligne.  La balise pour les liens.  La balise pour les images.  Les balises de champs de formulaires o ,... et....  La balise pour introduire une division en ligne dans le texte. o Cette balise est utile pour appliquer une déclaration de feuilles de style CSS.  HTML5 Organisation du contenu d’une page web : Traitement de texte … : titre du 1er niveau «titre très important»; … : titre du 2eme niveau «titre important»; … : titre du 3eme niveau; … : titre du 4eme niveau; … : titre du 5eme niveau; … : titre du 6eme niveau; … : pour organiser son texte en paragraphes; : pour aller à la ligne; : pour insérer un commentaire  HTML5 Organisation du contenu d’une page web : Traitement de texte Exemple  HTML5 Organisation du contenu d’une page web : Traitement de texte Exemple  HTML5 Organisation du contenu d’une page web : Traitement de texte... Texte en gras... Agrandissement de la taille des caractères... Texte clignotant (Netscape seul)... Texte en italique... Texte en couleur... Taille des caractères (X = 1,… 7)... Texte en italique... Empêche les ruptures de ligne des navigateurs... Réduction de la taille des caractères... Mise en gras du texte... Texte en indice... Texte en exposant... Texte souligné barrer le texte  HTML5 Organisation du contenu d’une page web : Traitement de texte Exemple :  HTML5 Principales balises d’une page web : Listes  Listes ordonnées … : délimite toute la liste ordonnée. … : délimite un élément de la liste. ol : ordred list li : list item Exemple Résultat premier élément deuxième élément troisième élément  HTML5 Principales balises d’une page web : Listes  Listes désordonnées … : délimite toute la liste non ordonnée. … : délimite un élément de la liste. Exemple premier élément deuxième élément Résultat troisième élément  HTML5 Principales balises d’une page web : Listes  Listes imbriquées Exemple de liste numérotée dans laquelle s’imbrique une liste non ordonnée Résultat  HTML5 Principales balises d’une page web : Liens  Pour faire un lien, on utilise un simple élément avec un seul attribut permettant de relier tout et n'importe quoi  Exemple : « a »  « anchor » Href  «hypertext reference», (Où conduit le lien) Dans notre exemple, href vaut "http://www.html.net"  HTML5 Principales balises d’une page web : Liens Liens vers une fenêtre spécifique Pour insérer un lien vers une fenêtre spécifique, on utilise l’attribut target. Les différentes possibilités sont:  target="_self" (défaut): la page cible du lien s’ouvre dans la même fenêtre que la page de départ du lien.  target="_top": la page cible du lien est affichée dans la même fenêtre mais occupera la totalité de la fenêtre d’affichage. À ce stade de notre étude, self et top ont un effet équivalent.  target="_balnk": la page cible du lien s’ouvre dans une nouvelle instance du navigateur ou un nouvel onglet de celui-ci.  HTML5 Principales balises d’une page web : Liens Liens entre les pages d’un même site  Pour faire un lien entre les pages d’un même site, par ex (page1.htm et page2.htm) enregistrées dans le même dossier, on fait un lien d'une page à l'autre simplement en inscrivant le nom du fichier dans le lien. Cliquez ici pour aller à la page 2  Si la page 2 se trouvait dans un sous-dossier (appelé "sous- dossier"), le lien serait alors : Cliquez ici pour aller à la page 2 NB : On peut également écrire l'adresse (URL) complète du fichier  HTML5 Principales balises d’une page web : Liens Liens internes à une page web  Pour créer des liens internes à une page, par exemple, une table des matières en haut de la page avec des liens vers chaque chapitre en-dessous, on utilise un attribut très utile, appelé id (pour identification), et le symbole « # ».  Pour cela, on marque l’élément qu’on veut relier.  Puis, on crée un lien vers cet élément en utilisant le symbole « # » dans l'attribut de liaison.  « # » indique au navigateur de rester sur la même page. Ce caractère doit être suivi de l'id de la balise à relier Exemple : Lien vers le titre 1  HTML5 Principales balises d’une page web : Liens Liens internes à une page web : Exemple Résultat  HTML5 Principales balises d’une page web : Liens Liens vers une adresse mail  Faire un lien vers une adresse e-mail se fait presque de la même façon que pour relier un document.  La seule différence c'est que l'on tape « mailto: » suivi d'une adresse e-mail au lieu de taper l'adresse d'un document Exemple : Envoyer un e-mail à « nobody » chez HTML.net Résultat NB : Pour que ça fonctionne, un programme de messagerie doit être installé préalablement sur l’ordinateur  HTML5 Principales balises d’une page web : Liens Une infobulle sur un lien Question : Comment ajouter une infobulle explicative au survol du lien par le curseur de la souris ?  HTML5 Principales balises d’une page web : Liens Astuce  Pour créer un lien, on utilise toujours l'attribut href et on peut également placer un attribut title sur le lien : Exemple : HTML.net Résultat NB : L'attribut title sert à fournir une brève description du lien. Si vous positionnez le curseur sur le lien sans le cliquer, vous verrez apparaître le message « Visitez HTML.net pour apprendre HTML ».  HTML5 Principales balises d’une page web : Tableaux  Les tableaux de données sont conçus pour structurer des informations en lignes et en colonnes.  L’élément n’est pas un outil de mise en page !  En principe, la mise en forme doit toujours être déléguée à une feuille de style CSS  C’est ce que l’on verra après..  HTML5 Principales balises d’une page web : Tableaux  : insérer un tableau  : Légende d’un tableau de données. Elle se situe immédiatement après la balise ouvrante.  : tient pour « table row », c’est une rangée (ligne) du tableau. Elle regroupe les cellules () d’une même ligne dans un tableau.  : tient pour « table data », c’est une cellule du tableau. Elle regroupe le contenu d’une cellule du tableau.  : désigne une cellule d’en-tête d’un tableau.  HTML5 Principales balises d’une page web : Tableaux Exemple :  Cellule 1 et Cellule 2 forment une rangée  Cellule 1 et Cellule 3 forment une colonne  On peut construire autant de rangées et colonnes qu’on veut..  La table illustrée en exemple n’a pas de bordure !!  HTML5 Principales balises d’une page web : Tableaux Quelques attributs : « border »  L'épaisseur de la bordure s'exprime en pixels.  Comme pour les images, on peut également fixer la largeur d'une table en pixels, ou autrement en pourcentage de l'écran.  Exemple :  Cela affichera une table dont la largeur est 30 % de celle de l'écran dans le navigateur align="right" HTML5 Principales balises d’une page web : Tableaux Quelques attributs : « align » et « valign »  « align » : indique l'alignement horizontal du contenu dans toute la table, dans une rangée ou dans une seule cellule.  align="left" : alignement à gauche  align="right" : alignement à droite  align="center" : centré  « valign » : indique l'alignement vertical du contenu dans une cellule  valign="top" : en haut  valign="midlle" : au milieu  valign=« bottom" : en bas  Exemple : Cellule 1 align="right" HTML5 Principales balises d’une page web : Tableaux Quelques attributs : « colspan »  « colspan » : « column span » c.à.d (recouvrement de colonne). Cet attribut est utilisé dans la balise pour indiquer combien de colonnes la cellule recouvre.  Exemples : align="right" HTML5 Principales balises d’une page web : Tableaux Quelques attributs : « rowspan »  « rowspan » : « row span » indique combien de rangées la cellule doit recouvrir.  Exemple :  la valeur de rowspan est fixée à "3" dans la Cellule 1. Elle indique que la cellule doit recouvrir trois rangées (la sienne plus deux autres). Cellule 1 et Cellule 2 sont donc dans la même rangée, tandis que Cellule 3 et Cellule 4 forment deux rangées indépendantes.  HTML5 Principales balises d’une page web : Les séparateurs  Insérer une ligne horizontale [Horizontal Rule]  Epaisseur en pixels  Largeur en pixels  Largeur en % de la fenêtre  Alignement gauche  Alignement droite  Alignement centré  est équivalent à Chapitre 1 Il s'agit du premier chapitre… Chapitre 2 Il s'agit du second chapitre....