Remerciez-le!

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

Chapitre 2 : Le langage du web : HTML 5 ISGB 1 Définition • Un site Internet es

Chapitre 2 : Le langage du web : HTML 5 ISGB 1 Définition • Un site Internet est un ensemble de pages web, reliées entre elles, constitue l'outil le plus moderne de communication et de publication. Pour la réalisation d'une page web on a besoin d'un langage spécialisé, le langage HTML "Hyper Text Markup Language". • Le HTML est un langage dit de "marquage" (de structuration ou de balisage) dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents. Généralement, ces balises sont incorporées dans le texte du document et sont interprété par un navigateur web. ISGB 2 Historique • 1986 : création du premier langage de balisage SGML (Standard Generalized Markup Language) pour structurer des contenus très divers. • 1991 : création de la première version du langage HTML • 1994 : apparition de la deuxième version du langage HTML (HTML 2.0), cette version a posé les bases des versions suivantes du HTML. • 1996 : apparition de la version HTML 3.0. Cette version rajoute de nombreuses possibilités au langage comme les tableaux, les scripts, le positionnement du texte autour des images, etc. • 1998 : appariation de la version la plus répandue du langage HTML (HTML 4.01)Cette version propose l'utilisation des frames (qui découpe une page web en plusieurs parties) ISGB 3 Syntaxe et lexique du langage HTML 5 •Le HTML5 est un langage créé pour structurer et donner du sens au contenu des pages web. Son lexique s'articule essentiellement autour de trois termes : élément, balise et attribut. ISGB 4 Les éléments •Les éléments sont des indicatifs définissant des objets (texte, image ou objet multimédia) dans une page web, comprenant la structure et le contenu. •Exemple •<p> : pour désigner un paragraphe •<a> : pour désigner un lien ISGB 5 Les Balises (Tag en anglais) •Le terme balise définit un des concepts de base du langage HTML. Les éléments en HTML sont souvent faites de plusieurs ensembles de balises. ISGB 6 Les balises • On distingue généralement deux types balises : • Balises en paires : formées d'une balise d'ouverture et d'une balise de fermeture. La balise d'ouverture commence par le signe < et se termine par le signe >. La balise de fermeture suit la même règle mais le nom de l'élément est précédé d'un slash (/). • Balises orphelines : Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis. Il n'est pas nécessaire de délimiter le début et la fin de cet élément. ISGB 7 Les balises •Exemple : Balises en paires •<strong> afficher un texte en gras </strong> •Exemple : Balises orphelines •<img /> Attention • Pour ne pas confondre balises et éléments, considérer l'exemple suivant : • <p> L'élément P contient des mots en <strong>Gras</strong>. </p> • L'élément P contient du texte et des balises alors que l'élément STRONG ne contient que du texte. ISGB 8 Les attributs • Les attributs sont des propriétés utilisées pour fournir des instructions supplémentaires à un élément donné (un identifiant (id), une source (src), une référence de lien hypertexte (href), etc.). Ils sont toujours définis dans la balise d'ouverture et doivent être séparés les uns des autres par au moins un espace typographique. Chaque attribut a généralement une valeur définie entre guillemets. • La syntaxe d'un élément ayant des attributs est donc la suivante : <nom_element attribut1="valeur1" attribut2="valeur2" > Contenu de l'élément </nom_element> ISGB 9 Règles de base HTML 5 • Un document HTML doit respecter certaines règles simples. Les éléments et les attributs sont insensibles à la casse. Par exemple, <body> et <BODY> sont acceptés. Les éléments non vides doivent avoir une balise d'ouverture et une balise de fermeture. Cela facilite la tâche des navigateurs. Par exemple, plutôt que d'écrire : <ol> <li>Item 1 <li>Item 2 On préférera le code suivant : <ol> <li>Item 1 </li> <li>Item 2 </li> </ol> ISGB 10 Les balises •Les éléments ne doivent pas se chevaucher et donc obéi au principe premier ouvert, dernier fermé. Dans ce cas, le premier élément est le parent du second et celui-ci est enfant du premier. Par exemple, le code suivant est incorrect : • <div> Cette division contient un titre <h1> Important ! </div> </h1> • Et doit être remplacé par : • <div> Cette division contient un titre <h1> Important ! </h1></div> ISGB 11 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. Par exemple, plutôt que d'écrire : • <p class=styleperso title=attention> Texte important</p> • On préférera le code suivant : • <p class="styleperso" title="attention" > Texte important</p> ISGB 12 Les balises Un document conforme • Un document HTML 5 doit également respecter les règles d'inclusion des éléments les uns dans les autres : un élément donné ne peut inclure que l'un de ses éléments enfants et ne peut être s'inclure que dans l'un de ses éléments parents. Par exemple, plutôt que d'écrire : <form> <body> </body> </form> On préférera le code suivant : <body> <form>  <form> </body> ISGB 13 Environnement de travail • Pour créer des pages web avec HTML 5, il faut être doté d'un environnement de travail adapté. On distingue deux types d'éditeurs • Les éditeurs classiques (Bloc note ou Notepad ++ cas de Windows) : ce sont des outils gratuits qui offrent aux utilisateurs la possibilité de saisir le code HTML ISGB 14 Structure d'un document HTML 5 <!DOCTYPE html> (1) <html> (2) <head>(3) <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> (4) <title> Cours HTML 5 </title> (5) </head> <body> (6)  (7) <h1>Le corps de la page minimale</h1> </body> </html> ISGB 15 Signification DOCTYPE <!DOCTYPE html> (1) •La déclaration DOCTYPE •C'est une déclaration obligatoire qui précise le type de document qui va être créé. ISGB 16 Signification html <html> (2) • L'élément racine <html> • C'est l'élément racine du document. • Il possède deux éléments enfants : <head> & <body> • Il possède des attributs comme : • o lang : dont la valeur est un code de langue normalisée qui indique la langue utilisée par défaut dans la page • o 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 (langues orientales : hébreu, arabe). • Exemple : • <html lang="fr" dir="ltr"> •  • </html> ISGB 17 Signification head <head>(3) • Il englobe un certain nombre d'informations utiles au bon affichage de la page web : Ces informations dites métadonnées sont contenues dans les éléments suivants : • o <base /> : il s'agit d'un élément vide possédant les attributs suivants : • id : un attribut qui joue le rôle d'un identifiant pour l'élément. • href : c'est un attribut obligatoire dont le contenu est une URL qui fournit l'adresse de base de tous les fichiers utilisés dans la page web. • Exemple : • Si nous écrivons le code suivant : • <base id="I1" href="http://www.funhtml.com/" /> ISGB 18 Signification title <title>(5) • C'est le titre de la page web. • Toute page web doit avoir un titre pour décrire son contenu. • Le titre doit être assez court (moins de 100 caractères). • Le titre s'affiche en haut de la page web. ISGB 19 Signification body body •C'est le conteneur de l'ensemble des éléments textuels et graphiques d'une page web. •C'est la partie principale de la page, tout son contenu sera affiché à l'écran. ISGB 20 Les commentaires • Les commentaires • Les commentaires • Un commentaire en HTML est un texte qui sert simplement de mémo. • Un commentaire ne sera jamais affiché au niveau d'une page web : il est ignoré par le navigateur. • Un commentaire respecte toujours la syntaxe suivante : • < ! - - ceci est un commentaire HTML 5 - -> ISGB 21 La balise <header> : l'entête • La plupart des sites web possèdent en général un en-tête, appelé header en anglais. Une telle entête peut généralement regroupe un logo, une bannière, le slogan du site, etc. Ce genre d'information doit être placé à l'intérieur de la balise <header>. <header>  </header> ISGB 22 La balise <footer> : le pied de page • À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y trouve des informations comme des liens de contact, le nom de l'auteur, les mentions légales,etc. <footer>  </footer> ISGB 23 La balise <nav> : principaux liens de navigation • La balise <nav> doit uploads/Litterature/ chapitre-2-html-1 2 .pdf