Cours de développement web de HTML5 .pptx
Télécharger en tant que PPTX, PDF0 j'aime777 vues
Le document présente une introduction au HTML5, en expliquant son histoire, sa définition, et son rôle dans la création de sites web. Il aborde les éléments essentiels des pages HTML, tels que la structure de base, les balises, et l'utilisation des attributs pour enrichir le contenu. Des exemples pratiques de balises pour formater le texte et créer des listes, ainsi que des liens vers d'autres pages et sites, sont également fournis.
Contenu connexe
Similaire à Cours de développement web de HTML5 .pptx (20)
Cours de développement web de HTML5 .pptx
- 1. Cours HTML5 Pr. MERYEM AMANE
- 2. Timothy John Berners-Lee, né le 8 juin 1955 à Londres, est un informaticien britannique, principal inventeur du World Wide Web au tournant des années 1990 Un peu d’histoire
- 3. Définition HTML est l’abréviation de HyperText Markup Language, soit en français « langage hypertexte de balisage ». Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens à du contenu. Ils nous permet de créer des sites web. 3
- 5. Outils de développement web de texte (bloc note, Vous aurez besoin d’un éditeur Notepad++, Sublime…etc) et un navigateur (Chrome, Mozilla FireFox…etc. De préférence utiliser chrome comme navidateur et Sublime comme éditeur de code. Une page html est un fichier ( du texte) avec l’extension .html ou htm Exemple : index.html accueil.html 5
- 6. Test.html Le résultat Outils de développement web A quoi ressemble un fichier HTML? 6
- 7. Balises Il ne suffit pas simplement d'écrire du texte dans l'éditeur, il faut aussi donner des instructions à l'ordinateur. En HTML, on passe pour cela par des balises. Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher. Les balises se repèrent facilement. Elles sont entourées de "chevrons", c'est-à-dire des symboles < et >, comme ceci : <balise> 7
- 8. Balises recommandent de rajouter ce / à la fin de la balise. •Les balises en paires : Elles s'ouvrent, contiennent du texte, et se ferment plus loin. <titre>Ceci est un titre</titre> On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. •Les balises orphelines: Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). <image/> ou <image> Le le / (slash) de fin n'est pas obligatoire, les webmasters 7
- 9. Les attributs sont un peu les options des balises. Ils Les attributs viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci : <balise attribut="valeur"> <img src=« chemin/image.jpg"> <body bgcolor="orange"> </body> L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le chemin " chemin/image.jpg". 8
- 10. Structure de base d'une page HTML La structure de base d’une page HTML est la suivante : Remarque : Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur. <html><body></body></html> : correct. <html><body></html></body> : incorrect, les balises s'entremêlent. <!DOCTYPE html> <html> <head> <title> titre </title> <meta content="text/html; charset=UTF-8" /> </head> <body> Hello World </body> </html> 9
- 11. Structure de base d'une page HTML • Le doctype Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. • <html> </html> C'est la balise principale du code. Elle englobe tout le contenu de votre page. • <head> </head> L'en-tête Cette section donne quelques informations générales sur la page, comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. • <body> </body> le corps C'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. 10
- 12. Structure de base d'une page HTML • <meta charset="utf-8" /> Cette balise indique l'encodage utilisé dans votre fichier .html. Utf-8: permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète. • <title> </title> C'est le titre de votre page •Commentaire : Il est visible dans le code source mais ignoré par le navigateur il sert à expliquer le code. <!-- Ceci est un commentaire --> 11
- 13. Organiser le texte • Les paragraphes Un paragraphe est délimité par la balise <p> et </p> <p> Bonjour et bienvenue sur mon site </p> On écrit le contenu de notre page web entre les balises <body> et </body> <!DOCTYPE html> <html> <head> <title> titre </title> <meta content="text/html; charset=UTF-8" /> </head> <body> <p> Bonjour et bienvenue sur mon site </p> </body> </html> 12
- 14. Organiser le texte • Sauter une ligne C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br />. Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe. <p> Bonjour et bienvenue sur mon site1<br/> Bonjour et bienvenue sur mon site2 </p> Ce qui donne : Bonjour et bienvenue sur mon site1 Bonjour et bienvenue sur mon site2 14
- 15. Organiser le texte • Mettre le texte en gras La balise <b> met le texte en gras. <b> Ce texte est en Gras</b> Ce texte est en Gras • Souligner le texte La balise <u> souligne le texte. <u> Ce texte est souligné</u> Ce texte est souligné 15
- 16. Organiser le texte • Mettre le texte en italique La balise <i> met le texte en italique. <i> Ce texte est en Italique</i> Ce texte est en Italique • Texte barré La balise <s> ou <strike> barre le texte. <s> Ce texte est barré</s> <br/> <strike> Ce texte est barré</strike> Ce texte est barré Ce texte est barré 15
- 17. Organiser le texte 17 • La couleur et la taille de texte La balise <font> avec ses attributs color et size( taille de 1 à 7) permet de la couleur et la taille de texte. <font color="#green" size="6"> Un texte coloré </font> <br/> <font color="#808080" size="6"> Un autre texte coloré </font> Un texte coloré Un autre texte coloré
- 18. Organiser le texte • Mettre le texte en exposant et indice La balise <sup> met le texte en exposant alors que la balise <sub> le met en indice. Pour faire un retour à la ligne déclarer la balise <br/> . <br/> X <sup> 2 </sup> H <sub> 2 </sub> O X 2 H 2 O • Retour à la ligne La ligne 1 <br/> La ligne 2 La ligne 1 La ligne 2 18
- 19. Organiser le texte • Formatage de texte La balise <pre> permet de conserver le texte tel que vous le saisissez. <pre> La balise < pre > permet de conserver le texte tel que vous le saisissez. /*.* Ici un retour à la ligne sans utiliser la balise br </pre> La balise < pre > permet de conserver le texte tel que vous le saisissez. /*.* Ici un retour à la ligne sans utilisé la balise br 19
- 20. Organiser le texte • Les titres Pour ne pas confondre entre les titres et les paragraphes en utilise les balise de titre qui sont de six (h1,h2,h3,h4,h5,h6) selon la taille. Ce qui donne : <h1> titre très important </h1> <h2> titre important </h2> <h3> titre un peu important </h3> <h4> titre moins important </h4> <h5> titre pas important </h5> <h6> titre vraiment pas important </h6> titre très important titre important titre un peu important titre moins important titre pas important titre vraiment pas important 19
- 21. Organiser le texte 21 • Lignes horizontale <hr> La balise <hr> permet de tracer une ligne horizontale. <hr/> <hr width="x%" /> <hr width=x /> <hr size=x /> <hr align=center /> <hr align=left /> <hr align=right/> <hr noshade/> Trait horizontal (centré par défaut) Largeur du trait en % (100 % = largeur de la page) Largeur du trait en pixels Hauteur du trait en pixels Trait centré (défaut) Trait aligné à gauche Trait aligné à droite Trait sans effet d'ombrage
- 22. Organiser le texte 22 • Lignes horizontale <hr> (exemple) La balise <hr> permet de tracer une ligne horizontale. <hr/> <hr align="center" size="6" width="20%" noshade/> <hr align="center" size="6" width ="100" /> <hr align="left" size="10" width="50%" noshade/> <hr align="right" size="6" width="50%" noshade/>
- 23. Organiser le texte • La mise en valeur (import sémantique) Pour mettre un texte (mots) en valeur en utilise les balises <em> (peu important ) et <strong> (important) <p> Ceci est mon premier test, alors <em> soyez indulgents </em> <br/> Avant de faire le truc X il est <strong> nécessaire </strong> de faire le truc Y avant. </p> Ce qui donne : Ceci est mon premier test, alors soyez indulgentsAvant de faire le truc X il est nécessaire de faire le truc Y avant. 22
- 24. Organiser le texte • Marquer le texte: La balise <mark> permet de faire ressortir visuellement une portion de texte. <p> Ceci est mon <mark> premier test</mark> </p> Ce qui donne : Ceci est mon premier test • liste à puces non ordonnée : La balise <ul> permet de structurer notre texte, les éléments de la liste s’écrivent entre <li> et </li> <ul> <li> Elément 1 </li> <li> Elément 2 </li> </ul> • Elément 1 • Elément 2 Ce qui donne 23
- 25. Organiser le texte • liste à puces ordonnée : La balise <ol> permet de structurer notre texte, les éléments de la liste s’écrivent entre <li> et </li> • liste de description : <dl> <dt> Terme 1 <dd> Description du terme1 </dd> </dt> </dl> Terme 1 Description du terme1 <ol> <li> Elément 1 </li> <li> Elément 2 </li> </ol> 1. Elément 1 2. Elément 2 Ce qui donne 24
- 26. Les liens 26 • Lien vers un autre site (page) La balise <a> avec son attribut href permet de faire un lien soit vers un autre site (internet) soit une page de note site. <a href=« chemin vers une autre site ou autre page" > un titre pour le lien qui sera apparait en bleu et souligné </a> Exemple Bonjour pour accéder au site de la ESTE <br/> <a href="http://www.est-usmba.ac.ma/" > cliquez ici (ESTF) </a> Ce qui donne Bonjour pour accéder au site de la ESTE cliquez ici (ESTF)