Remerciez-le!

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

Pr ERRATTAHI Rahhal errattahi.r@ucd.ac.ma 2020/2021 Hyper Text Markup Language

Pr ERRATTAHI Rahhal errattahi.r@ucd.ac.ma 2020/2021 Hyper Text Markup Language Hyper Text Markup Language (HTML) • HTML est utilisé pour créer des documents web qui peuvent inclure des textes, images, sons, vidéos, animations, liens ...etc. • HTML est un langage interprété par le navigateur pour la description et le formatage de la page • Un navigateur Web est un programme qui permet de visualiser les sites Web. Il permet spécialement d’interpréter le code HTML. • Il existe de nombreux navigateurs différents, les principaux sont : 2 Hyper Text Markup Language (HTML) • L’extension (suffixe) d’un document HTML est : .htm ou .html • HTML utilise des balises (tags) pour indiquer la façon dont le document doit être affiché. • Une balise est un élément HTML qui est composé d'une balise ouvrante (son nom encadré par des chevrons), un contenu, et d'une balise fermante (son nom précédé d'un slash / encadré par des chevrons). <nombalise> Contenu </nombalise> 3 Historique • Depuis les premiers jours du Web, il y a eu plusieurs versions de HTML: Version Année HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 • HTML5 est la dernière version du HTML, il a été finalisée le 28 octobre 2014 4 Exemple d’un document HTML <!DOCTYPE html> <html> <head> <title>Exemple 1</title> </head> <body bgcolor="gray"> <p> Ceci est un exemple de page web </p>  </body> </html> Balise ouvrante Attribut de la balise <body> Valeur de l’attribut bgcolor Juste un commentaire (Non interpréter par le navigateur) Contenu Balise fermante 5 Exemple d’un document HTML <!DOCTYPE html> <html> <head> <title>Exemple 1</title> </head> <body bgcolor="gray"> <p> Ceci est un exemple de page web </p>  </body> </html> Résultat de son interprétation par le navigateur Navigateur Document HTML 6 Structure d’un document HTML • Un document HTML est dévisé en deux sections principaux: Heading : cotient des informations qui décrivent le document, comme le titre. La section heading est indiquée par les balises <HEAD> et </HEAD> Body : c’est l'endroit où le texte, les graphiques et autres éléments du document Web sont placés. La section Body est indiquée par les balises <BODY> et </ BODY > 7 Structure d’un document HTML • <!DOCTYPE html> Pour dire au navigateur quel type et version du document à interpréter • <HTML> ... </HTML> Marqueurs de début et de fin du document HTML • <HEAD> ... </HEAD> Ensemble des méta informations relatives au document • <TITLE> Mon titre </TITLE> Titre du document qui apparaît sur la barre de titre du navigateur 8 Structure d’un document HTML • <META> Paramètres utiles notamment pour l’indexation du document par les moteurs de recherche <meta name="keywords" content="mot1, mot2, mot3, ..."> <meta name="description" content="ceci est ma description"> • <BODY> ... </BODY> Corps du document • <!– Mon commentaire --> pour insérer des commentaires dans le document 9 Le Paragraphe <HEAD> …</HEAD> • Il contient des informations relatives au document, notamment sur les scripts et les feuilles de style. Ces informations ne sont pas affichées par les navigateurs. • Quelques balises qui peuvent y être intégrées : <SCRIPT>  Contient le code du programme qui sera appelé dans une balise de <BODY> <STYLE> Définit les styles de présentation associée à des balises <TITLE> C'est le titre du document affiché dans la barre de titre du navigateur. 10 Les balises • Il y a deux types de balises: Balises doubles: Ce sont des balises ouvrantes/fermantes, dans lesquelles on va pouvoir mettre d'autres balises ou du texte. La balise fermante est identique à la balise ouvrante, à la différence qu'elle contient un "/" pour indiquer à quel endroit on la ferme. Exemple : <p> Ici du texte ou tout autre balise.</p> Balises simples: Ce sont des balises qui sont dites "vides", c'est-à-dire qu'elles ne vont contenir aucune autre balise HTML. Ces balises n'ont pas besoin d'être fermées. Exemple <br> : permet un retour à la ligne 11 Les balises • Certaines balises ouvrantes peuvent contenir des attributs paramétrables en leurs assignant une valeur entre guillemets. <balise attributs=‘’ valeur ’’> Contenu </balise> Balise (tag en anglais): Un mot clé du langage associant une propriété particulière au contenu de la balise Attributs ils ne sont pas toujours obligatoires. Ils définissent les valeurs spécifiques à appliquer sur le contenu. Contenu : Il représente du texte, des images ou d’autres balises </balise> : C’est une étiquette précisant la fin de la balise. 12 Logiciels de développement • N’importe quel éditeur de texte peut être utilisé pour créer des documents HTML. • Parmi les plus utilisé sous: – Windows: Bloc-notes, Sublime Text, Notepad++, jEdit… – Mac OS X: Sublime Text, jEdit, Smultron , TextWrangler… – Linux: vim, Sublime Text, jEdit, Kate … 13 Tâche 1: Votre premier page html • Lancez l’éditeur de texte Bloc-notes ou bien Notepad++ et recopiez le code suivant : <!DOCTYPE html> <html> <head> <title>Exemple 1</title> </head> <body > <p> Ceci est un exemple de page web </p> </body> </html> 14 Les attributs • Les attributs se trouvent toujours dans la balise d’ouverture et ils ne sont pas toujours obligatoires. • Les attributs sont séparés par des espaces. • Chaque attribut a une valeur : attribut="valeur" • L’ordre des attributs n’a aucune importance 15 Les attributs Attribut standard: id: identification (identité) nom UNIQUE de l'élément style: (style) code CSS bgcolor: couleur pour le fond background: Image de fond text: imposer une couleur pour le texte title: (titre) texte visible au survole de la souris lang: language (langue) abréviation de la langue (en, fr etc.) 16 Tâche2: utilisation des attributs • Ajouter les attributs avec les valeurs suivantes à la balise <body>: bgcolor="gray" text="red" 17 Balises de titres • Les titres HTML sont définis avec les balises <h1> à <h6>. <h1> définit le titre le plus important. <h6> définit le titre le moins important. 18 Mise en forme du texte  Commentaire ignoré par le navigateur <BR> retour à la ligne <BLOCKQUOTE>...</BLOCKQUOTE> Citation (introduit un retrait du texte) <CENTER>...</CENTER> Centre tout élément compris dans la balise <DIV align=halign> ...</DIV> Aligne l'élément, halign peut avoir les valeurs center, left, right, justify <P>...</P> <P align=halign>...</P> Paragraphe 19 Tâche 3 • Modifier votre document HTML et ajouter les deux titres et le paragraphe suivants : <h1> Université Chouaib Doukkali </h1> <h2> Ecole Nationale des sciences appliquées</h2> <p> L’ENSAJ est une école qui forme des futures ingénieures </p> • Centrer les deux titres à l’aide de la balise <center> 20 Résultat de la Tâche 3 21 Mise en forme des caractères <B>...</B> Texte en gras <I>...</I> Texte en italique <BIG>...</BIG> Agrandissement de la taille des caractères <FONT color=colcod>...</FONT> Texte en couleur <FONT size=X>...</FONT> Taille des caractères (X a une valeur de 1à 7) <EM>...</EM> Texte en italique <PRE>...</PRE> Texte préformaté, affichage des espaces et des sauts de ligne <SMALL>...</SMALL> Réduction de la taille des caractères <STRONG>...</STRONG> Mise en gras du texte <SUB>...</SUB> Texte en indice <SUP>...</SUP> Texte en exposant <U>...</U> Texte souligné 22 Tâche 4: Mise en forme des caractères • Mettez en gras le premier mot « L’ENSAJ », puis en italique, et après soulignez le. 23 Les listes <UL type=type> Liste non numérotée (dite à puces) <LI>... </LI><LI>...</LI>... Eléments de liste </UL> (type peut être "disc", "square" ou "circle") <OL type=type> Liste numérotée <LI>...</LI><LI>...</LI>... (type peut être "1" (1,2,3), "a" (a,b,c), "A" </OL> (A;B;C), "I" (I,II,III,IV) ou "i" (i,ii,iii,iv)) <DL> Liste de glossaire <DT>...</DT> Terme de glossaire (sans retrait) <DD>...</DD> </DL> Explication (DETAIL) du terme (avec retrait) 24 Tâche 5: Les listes • Ajouter les filières suivante, en utilisant les listes à puces, numérotés, puis glossaire avec retrait (voir les figures suivants) 25 Lignes de séparation <HR> trait horizontal (centré par défaut) <HR width="x%"> Largeur du trait en % <HR width=x> Largeur du trait en pixels <HR size=x> Hauteur du trait en pixels <HR align=halign> Trait centré (par défaut), aligné à gauche ou à droite <HR noshade> Trait sans effet d'ombrage 26 Hyperliens <a href="http://...">...</a> Lien externe vers une page Web <a href="mailto:...">...</a> Lien vers une adresse Email <a href="fichier.htm">...</a> Lien vers la page locale fichier.htm située dans le même dossier <a name="xyz">...</a> Définition d'une ancre <a href="#xyz">...</a> Lien vers une ancre dans le même fichier. <a href="file.html#xyz">...</a> Lien vers une ancre dans le fichier file.html. 27 Tâche 6 • Ajouter une ligne horizontale après le premier titre « Université Chouaib Doukkali », puis modifier les listes à puces de sorte qu’elles deviennent des liens vers de nouvelles pages: II2E.html, ISIC.html, G2E.html 28 Les images • <IMG src=urlimg> Insertion d'une image au format gif, jpg ou png • <IMG ... width=x height=y> Mise à l'échelle de l'image en pixels • <IMG ... border=x> Définition de la bordure d'une image • <IMG ... alt=text> Texte alternatif lorsque l'image n'est pas affichée • <IMG ... align=valign> Alignement de l’image par rapport à la ligne de texte. • <IMG ... align=halign> habillement de l’image par le texte (center n’est pas possible) • <IMG ... hspace=x> Espacement horizontal entre l'image et le texte • <IMG ... vspace=y> Espacement vertical uploads/s1/ cours-html 6 .pdf