Remerciez-le!

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

Développement Web : HTML5 et CSS3 SAGAR Samya Introduction 2 SAGAR Samya Généra

Développement Web : HTML5 et CSS3 SAGAR Samya Introduction 2 SAGAR Samya Généralités sur le langage HTML (1) HTML 5 (HyperText Markup Language) est un langage de balisage (dit aussi langage de marquage) qui permet de structurer le contenu des pages web dans différents éléments. Historiquement, les langages de balisage sont issus du langage SGML (Standard Generalized Markup Language) créé en 1986 pour structurer des contenus très divers.  Ce langage s’est révélé trop complexe pour être appliqué tel quel au Web, d’où la nécessité d’en créer une version allégée respectant les mêmes principes essentiels. L’inventeur du HTML (1992), Tim Berners-Lee, l’avait conçu à l’origine comme un outil de structuration des contenus, principalement textuels, et non pas pour créer des présentations diversifiées.  Ce sont les développements successifs, l’essor populaire du Web et la concurrence acharnée entre Netscape et Microsoft pour s’emparer du marché des navigateurs, qui ont détourné HTML de sa vocation première avec l’ajout d’éléments de présentation qui n’avaient rien à y faire.  Voulant faire mieux que l’autre, chacun des deux grands a empilé des couches superflues sur HTML. 3 SAGAR Samya Généralités sur le langage HTML (2) Il faut également reconnaître que l’entrée du Web dans le grand public nécessitait de répondre à une demande d’interfaces graphiques plus esthétiques.  L’absence d’un langage particulier dédié uniquement à la présentation poussait effectivement les webmestres à utiliser tous les moyens pour créer des présentations visuelles agréables. L’apparition de CSS (Cascading Styles Sheets), créé en 1996 par Håkon Wium Lie, aurait dû résoudre le problème du détournement de HTML de sa destination première.  Mais les mauvaises habitudes étaient prises et la facilité faisait le reste. L’apparition de HTML 4, et particulièrement de sa version strict associée à l’emploi systématique de CSS 2 (publié en 1998), pouvait apporter une solution efficace à ce problème. L’impossibilité pour le W3C de trouver un consensus entre les éditeurs de navigateurs et les créateurs de moteurs de recherche pour faire évoluer XHTML a conduit un Groupe indépendant, le WHATWG (Web Hypertext Application Technology Working Group) dirigé par Ian Hickson (aujourd’hui chez Google !), à entamer le développement de HTML 5. 4 SAGAR Samya HTML et CSS : deux langages pour créer un site web (1) HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ». CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996 5 SAGAR Samya HTML et CSS : deux langages pour créer un site web (2) 6 SAGAR Samya HTML (sans CSS) HTML Et CSS Les versions de HTML HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991. HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la première version a été créée par un seul homme). HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images, etc. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01). Elle apparaît pour la première fois en 1998 et 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. Mais surtout, cette version permet pour la première fois d'exploiter des feuilles de style (CSS) HTML 5 : c'est LA dernière version. Elle fait beaucoup parler d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc. SAGAR Samya 7 Les versions de CSS CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc. CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut désormais utiliser des techniques de positionnement très précises, qui nous permettent d'afficher des éléments où on le souhaite sur la page. CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement attendues comme les bordures arrondies, les dégradés, les ombres, etc. SAGAR Samya 8 HTML en pratique (1) Très concrètement, un document HTML, lors de son écriture, est un simple fichier texte dont certaines parties portent une signification particulière, On appelle le balisage (markup). Le balisage définit ainsi une suite structurée imbriquée d´éléments qui constitue le document. Un élément est une suite d’entités HTML délimitée par des étiquettes (tags) et représentant une unité structurelle du document : titre, liste, paragraphe, texte mis en évidence, citation, etc. HTML définit quels sont les éléments existants, leurs attributs et les règles d’imbrication de ces éléments. SAGAR Samya 9 HTML en pratique (2) Les entités On appelle entité SGML une unité textuelle. Sa plus simple expression est un caractère non spécial, c’est-à-dire n’importe lequel sauf <, >, & et quelques autres qui dépendent de la DTD utilisée. Mais une entité peut être aussi constituée par une séquence de caractères entourée par les délimiteurs & et ; qui est remplacée par un autre texte permettant ainsi d’abréger un document en remplaçant certaines séquences longues et fréquentes par une abréviation plus courte. Dans HTML les entités complexes servent plutôt à coder les caractères spéciaux qui ont une signification particulière ou bien des caractères internationaux lorsque l’on veut assurer une stricte conformité avec le jeu de caractères ASCII  SAGAR Samya 10 HTML en pratique (3) Les étiquettes (balises ou tags) et les éléments On appelle balises (tags) les délimiteurs des éléments HTML. Un élément est, la plupart du temps, délimité par une balise initiale (start- tag) de la forme <tag> et une balise finale (end-tag) de la forme </tag>. Certains éléments comme BR (saut de ligne) n’ont pas d’étiquette finale. D’autres comme P (paragraphe), LI (liste) ont des étiquettes finales optionnelles. Les éléments s’imbriquent les uns à l’intérieur des autres suivant des règles définies par le langage. SAGAR Samya 11 <H1>Ceci est un titre de niveau1 </H1> Etiquette de début Etiquette de fin Texte (Contenu de l’élément) HTML en pratique (4) Les attributs Les attributs permettent de modifier par défaut d’une balise, ou bien de spécifier des informations indispensables (comme l’adresse d’une image intégrée à la page, ou bien celle d’un lien externe). Pour chaque élément seuls certains attributs sont autorisés. La valeur donnée aux éléments doit figurer entre guillemets ou apostrophes et ne doit pas contenir de guillemets, apostrophes ou signes > qui doivent, le cas échéant, être remplacés par les entités HTML équivalentes. Exemple : Cet élément porte le nom de lien hypertexte. On y reconnaît l’étiquette initiale <A> dans laquelle on trouve l’attribut href qui porte la valeur est http://www.essths.tn/. SAGAR Samya 12 <balise attribut1="Valeur1" attribut2="Valeur2" attribut3="Valeur3"> <A href=”http://www.essths.tn/”>Serveur de l’mes</a> HTML en pratique (5) Les commentaires Un document HTML peut contenir des commentaires qui seront ignorés par l’analyseur lors de la visualisation. Les commentaires sont signalés par les délimiteurs SGML spéciaux: Un commentaire peut s’étaler sur plusieurs lignes (les retours à la ligne sont autorisés à l’intérieur d’un commentaire). SAGAR Samya 13   Règles de base HTML Un document bien formé Un document HTML doit respecter certaines règles simples: Les éléments et les attributs sont insensibles à la casse. Par exemple, <body> et <BODY> Les éléments non vides doivent avoir une balise d’ouverture et une balise de fermeture. Les éléments vides ne comportent qu’une seule balise et il est plus correct de les terminer par les caractères /> précédés d’un espace pour marquer la fin de l’élément. Par exemple, <br /> 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. SAGAR Samya 14 L’environnement de travail On utilise l'éditeur de texte pour créer un fichier ayant l'extension .html (par exemple : test.html). Ce sera notre page web. Exemple éditeur de texte (Notepad++, jEdit, vim…). Ce fichier peut être ouvert dans le navigateur web simplement en faisant un double-clic dessus. Le navigateur uploads/s3/ cours-html5-et-css3.pdf