Remerciez-le!

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

Les Bases en HTML Dr N. BAME 1 HyperText TextMarkup MarkupLanguage Language • L

Les Bases en HTML Dr N. BAME 1 HyperText TextMarkup MarkupLanguage Language • Langage descriptif composé de balises interprétées par le navigateur • Pour structurer la page et lui donner du sens. • Page HTML = simple fichier texte • Il ne suffit pas d'écrire « simplement » du texte dans l'éditeur, il faut aussi donner des instructions à l'ordinateur. 2 Exemple de page web 3 Code HTML 4 Concepts de base (1) • Eléments Les éléments servent à définir des objets dans la page. Les éléments donnent la structure d'un document HTML et indiquent comment vous voulez que le navigateur présente le site Web. Grâce aux éléments, on peut définir un paragraphe (élément p), des titres d’importances diverses (éléments h1, h2, h3, h4, h5 et h6) ou un lien (élément a). Les éléments sont constitués de balises. 5 Concepts de base (2) Balises Les pages HTML sont constituées de balises. Les balises sont invisibles à l'écran pour les visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher. Généralement, un élément est constitué d’une paire de balises : une balise ouvrante et une balise fermante. Les balises reprennent le nom de l’élément et sont entourées de chevrons , c'est-à-dire des symboles < et >, comme ceci : <balise>. La balise fermante possède en plus un slash qui précède le nom de l’élément : </balise>. . Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : «Ceci est le titre de la page», «Ceci est une image», «Ceci est un paragraphe de texte», etc. Cependant, certains éléments ne sont constitués que d’une balise qu’on appelle alors balise orpheline. C’est par exemple, le cas de l’élément br qui va nous servir à créer un retour à la ligne. 6 Deux types de balises Les balises en paires : s'ouvrent, contiennent du texte, et se ferment plus loin. Comme : <p> Ceci est un paragraphe </p> On distingue une balise ouvrante (<p>) et une balise fermante (</p>) qui indique que le paragraphe se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est pas un paragraphe. Les balises orphelines : sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple un saut de ligne). Il n'est pas nécessaire de délimiter le début et la fin de la ligne, on veut juste dire à l'ordinateur « va à la ligne d’ici ». <p> Bonjour, <br/> Ceci est un paragraphe </p> Notez que, dans le cas des balises orphelines, le slash (/) se situe après le nom de l’élément. Notez également que ce slash n’est pas obligatoire.Concepts de base (3) Concepts de base (3) 7 Attributs : Les attributs sont les options des balises. Ils viennent les compléter pour donner des informations (indications ou des instructions) supplémentaires. L'attribut se place après le nom de la balise ouvrante élément (ou de la balise orpheline le cas échéant) et a le plus souvent une valeur, comme ceci : • <balise attribut1="valeur1" … attributN="valeurN" > Par exemple, dans le cas d’un lien, on va se servir d’un attribut pour indiquer la cible du lien, c’est à dire vers quel site le lien doit mener. • <a href="www.ucad.sn"> visiter le site de l’ucad </a> L’ancre textuelle correspond au texte entre les balises. Ce sera le texte sur lequel vos visiteurs devront cliquer pour se rendre sur le site de l’UCAD et également l’unique partie visible pour eux. Concepts de base (4) Concepts de base (4) 8 Structure d’une page en HTML5 (1) • Toute page écrite en HTML5 doit comporter une certaine structure, un «squelette» qui sera toujours le même. – Ce squelette est bien évidemment constitué de divers éléments. • Tout d’abord, toute page HTML5 doit commencer par la déclaration de ce qu’on appelle un «doctype». Le doctype, comme son nom l’indique, sert à indiquer le type du document. Dans notre cas, le type de document est HTML. On écrira donc : <!DOCTYPE html> Le point d’exclamation est obligatoire, au début de cet élément un peu particulier. • Ensuite, pour que notre page HTML5 soit valide, il va nous falloir indiquer trois nouveaux éléments : html, head (« en-tête ») et body (« corps de page »). L’élément html va contenir toute la page. L’élément head contiendra entre autres, le titre de la page, l’encodage utilisé et des meta-data (des données invisibles pour les utilisateurs mais essentielles). L’élément body contiendra tout le contenu de la page (paragraphes, images, tableaux, etc.). 9 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Titre</title> </head> <body> </body> </html> Ce schéma, il sera toujours le même quelque soit la page HTML5 que vous créerez. Structure d’une page en HTML5 (2) Structure d’une page en HTML5 (2) 10 Création de la première page web <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Titre de ma première page web</title> </head> <body> </body> </html> 11 Observations • Dans la section « head », toujours écrire un titre : <title> Le tire de la page</title>. Notez que le titre apparaîtra dans le coin supérieur gauche de votre navigateur. Le titre est particulièrement important car il sert aux moteurs de recherche (tel que Google) pour indexer votre site Web, et il apparaît dans les résultats de recherche. • Dans la section « body », vous inscrivez le contenu réel de la page. 12 Les commentaires en HTML • Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page. • Les commentaires sont spéciaux : il ne seront pas visibles par vos visiteurs (à moins que ceux-ci n’affichent le code source de la page). • Voici comment on écrit un commentaire en HTML :  13 Structurer le texte (1) • Les paragraphes <p>….</p> Généralement, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Pour créer des paragraphes, tout d’abord, on va utiliser l’élément p. On peut créer autant de paragraphes que l’on souhaite dans une page. Pour chaque nouveau paragraphe, il faut rouvrir une balise <p>. A chaque nouveau paragraphe, un retour à la ligne est automatiquement effectué. • Saut de ligne <br/> Pour créer un retour à la ligne à l’intérieur d’un paragraphe, il faudra utiliser l’élément br. Cet élément est constitué d’une seule balise orpheline, notée donc <br/> 14 • Titres Les titres permettent aux visiteurs de se repérer dans la page. Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, il va devenir difficile pour vos visiteurs de se repérer. Pour créer des titres, on utilise les éléments h1, h2, h3, h4, h5 et h6. On peut créer des titres de diverses importances. Ainsi, un titre h1 sera considéré comme un titre très important tandis qu’un titre h6 sera considéré comme très peu important. <h1> </h1>: signifie « titre très important ». <h2> </h2>: signifie « titre important ». <h3> </h3>: pareil, c'est un titre un peu moins important <h4> </h4>: titre encore moins important. <h5> </h5>: titre pas important. <h6> </h6>: titre vraiment, mais alors là vraiment pas important du tout. Attention : ne confondez pas avec la balise <title> !!!Structurer le texte (2) Structurer le texte (2) 15 mise en valeur • Dans un texte, certains mots sont parfois plus importants que d'autres • Intérêt dans l’optimisation du référencement de votre site. Choix des mots clés • Pour cela, HTML propose différents moyens de mettre en valeur le texte : • <em> texte mis un peu en valeur</em> : mettre un peu en valeur votre texte • <strong> texte mis un bien en valeur</strong> : mettre un texte bien en valeur est utilisé pour indiquer aux moteurs de recherche qu’un contenu est particulièrement important, afin que celui-ci soit traité avec plus d’importance. La balise <strong> ne signifie pas «mettre en gras» mais «important». on n’utilise pas l’élément strong pour mettre un texte en gras • <mark> texte marqué </mark> : marquer le texte pour faire ressortir visuellement une portion de texte. pas forcément considéré comme important peut servir dans le cas de l’affichage de résultats suite à une recherche. 16 Les listes • Les listes servent à ordonner du contenu, à lui donner un ordre cohérent. • Visuellement, les listes en HTML correspondent à ce que vous créez lorsque vous utilisez des puces dans un document Word par exemple • En HTML, elles peuvent être utiliser pour créer des menus • Trois types de listes en HTML : les listes ordonnées, les listes non-ordonnées les listes de définition. • La différence entre les listes ordonnées et non-ordonnées est que les listes ordonnées possèdent un aspect de subordination, d’ordre logique, de classement tandis que ce n’est pas le cas pour les listes non-ordonnées. 17 • Une liste non ordonnée ressemble à ceci : • Licence • Master • Doctorat • permet de créer une liste d'éléments sans notion uploads/Ingenierie_Lourd/ chap2-html.pdf