Remerciez-le!

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

+237 650 76 22 79 contact@geniusmuna.com BP : 8869 Douala, Cameroun www.geniusm

+237 650 76 22 79 contact@geniusmuna.com BP : 8869 Douala, Cameroun www.geniusmuna.com Genius Muna est une marque portée par Genius Centers NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229 SEQUENCE 2 : LES ELEMENTS HTML Auteur : KOUMBIN BILITIK Cyril, Développeur PHP –WordPress & Expert SEO, mentor virtuel pour le compte de Genius Center 1/ Introduction Bonjour à vous les Génius et Bienvenue dans ce nouveau module de formation où je vous propose de découvrir ensemble le HTML. Le HTML c’est un langage assez important car il constitue la base de la plupart des sites internet que vous visitez aujourd’hui. Eh ben, pour vous en rendre compte, il vous suffit d’aller sur un site quelconque, à titre d’exemple rendons nous sur notre site préféré commun. Vous avez deviné le quel je suppose ? Celui de Génius bien-entendu  !! Il est situé à cette adresse https://geniusmuna.com/fr/ . Si vous y êtes comme moi, vous faites un clic droit avec votre souris puis vous cliquez sur « afficher le code source de la page » tel que nous le montre la capture suivante : +237 650 76 22 79 contact@geniusmuna.com BP : 8869 Douala, Cameroun www.geniusmuna.com Genius Muna est une marque portée par Genius Centers NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229 Cela étant fait, vous serez automatiquement conduis sur une nouvelle fenêtre de votre navigateur qui elle, vous affiche à son tour un code. Ce code que vous voyez là n’est ni plus ni moins que du HTML. Donc derrière beaucoup de sites que nous avons l’habitude de consulter au quotidien tels que Genius Muna notre préféré, Youtube, Wikipédia, Facebook, Google, Yahoo ! Etc. se cache du HTML. Ce n’est cependant pas le seul langage qui va nous permettre de faire fonctionner un site web. A ce langage de base, nous en rajouterons deux autres langages, qui feront l’objet des cours avenirs, que sont :  Le CSS pour gérer le style des pages, on parle de mise en forme des pages. Si nous revenons sur notre site préféré Génius Muna et qu’on lui enlève l’ensemble de son style CSS, il ressemblera à ceci : +237 650 76 22 79 contact@geniusmuna.com BP : 8869 Douala, Cameroun www.geniusmuna.com Genius Muna est une marque portée par Genius Centers NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229 Vous voyez donc d’après cette image que le HTML seul ne suffit. Des liens qui apparaissent en bleu, les éléments par très bien rangés, la police de texte par défaut etc. Pour éviter cela, Il a minimum d’être non seulement complété par le langage de style CSS mais aussi par un autre langage.  Le JavaScript qui permettra entre autres à l’utilisateur d’interagir avec votre site web histoire de le rendre plus vivant et sympa  Sur ce, j’espère qu’à ce niveau tout semble assez claire. Je vous invite à présent à entrer un tout petit peu dans le vif du sujet. A vos marques, partez ! +237 650 76 22 79 contact@geniusmuna.com BP : 8869 Douala, Cameroun www.geniusmuna.com Genius Muna est une marque portée par Genius Centers NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229 2/ Définition du HTML Dans cette partie nous allons définir le HTML. Qu’est-ce que le HTML ? A quoi sert-il concrètement ? Le HTML pour HyperText Markup Language est le code utilisé pour structurer une page web et son contenu. Alors Qu’est-ce que cela signifie ? Cela signifie que le HTML n’est pas un langage de programmation déjà mais un langage de balises qui vous permettra d’élaborer la structure de votre page web. Un langage de balises ? C’est quoi les balises ? Peut-être voulait-il dire valises ? Non, non j’ai bien dis balises. Une balise est un élément de base du système de code HTML. En d’autres termes le langage HTML est un ensemble de balises. Ce sont les balises HTML qui vont permettront de hiérarchiser et structurer votre contenu. C’est assez clair maintenant ? Donc grâce à ses balises, le langage HTML vous permet de dire « Ici j’ai un titre, en dessous de ce titre, j’ai un paragraphe, là j’ai une image, là j’ai un tableau ou une liste etc.». Prenons un petit exemple pour illustrer ce qu’on vient de dire. Par exemple avec la ligne de contenu suivante : « Mon chat est très grincheux » Si vous souhaitez que cette ligne reste ainsi, vous indiquerez qu'il s'agit d'un paragraphe en l'entourant des balises paragraphe : Mon chat est très grincheux Regardons de plus près cet élément paragraphe : +237 650 76 22 79 contact@geniusmuna.com BP : 8869 Douala, Cameroun www.geniusmuna.com Genius Muna est une marque portée par Genius Centers NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229 Les composants principaux de notre élément sont : 1. La balise ouvrante : celle-ci se compose du nom de l'élément (ici « p »), entre deux chevrons. Cela indique le début de l'élément, soit l'endroit à partir duquel celui- ci prend effet. Pour notre exemple, cela indique le début du paragraphe. 2. La balise fermante : ici on a également des chevrons et le nom de l'élément, auxquels on ajoute une barre oblique avant le nom de l'élément. Cela indique la fin de l'élément. Pour notre exemple, cela indique la fin du paragraphe. Oublier la balise fermante est une erreur courante de débutant et peut conduire à de curieux résultats. 3. Le contenu : C'est le contenu de l'élément. Ici, c'est simplement notre texte : «Mon chat est très grincheux”. 4. L'élément : Il est composé de la balise ouvrante, de la balise fermante et du contenu. La plupart des balises en HTML s'écrivent sous la forme <balise>votre texte</balise>. Nous y reviendront dans la leçon suivante consacrée aux balises HTML. Pour l’instant, revenons sur notre sujet du jour. 3/ Les Eléments HTML +237 650 76 22 79 contact@geniusmuna.com BP : 8869 Douala, Cameroun www.geniusmuna.com Genius Muna est une marque portée par Genius Centers NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229 Nous avons dit plus haut qu’un élément HTML se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante. Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à : Les attributs contiennent des informations supplémentaires qui portent sur l'élément et qu'on ne souhaite pas afficher avec le contenu. Dans cet exemple, l'attribut class permet d'utiliser un nom pour identifier l'élément et ce nom pourra être utilisé plus tard pour la mise en forme ou autre chose. Un attribut doit toujours avoir : 1. Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a plusieurs attributs) ; 2. Un nom (le nom de l'attribut), suivi d'un signe égal « = » ; 3. Des guillemets anglais (") pour encadrer la valeur de l'attribut. Nous y reviendront plus en détail dans la leçon consacrée aux attributs HTML  Imbriquer des éléments Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'imbrication. Par exemple, si vous souhaitez montrer que votre chat est très grincheux, vous pouvez placer le mot « très » dans un élément , signifiant que le mot sera fortement mis en relief : Mon chat est très grincheux. +237 650 76 22 79 contact@geniusmuna.com BP : 8869 Douala, Cameroun www.geniusmuna.com Genius Muna est une marque portée par Genius Centers NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229 Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément , puis l'élément . Nous devrons donc fermer l'élément d'abord, puis l'élément . Le code suivant est donc incorrect : Mon chat est très grincheux. Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas ! Les éléments vides Certains éléments n'ont pas de contenu. Ces éléments sont appelés éléments vides. Prenons l'élément <img>, il est utilisé généralement comme ceci: <img src="images/firefox-icon.png" alt="Mon image test" /> Cet élément contient deux attributs mais les balises ouvrante <img> et fermante </img> sont remplacées par une balise auto-fermante <img /> et il n'y a aucun contenu interne. En effet, l'élément image n'embarque pas de contenu, son but est d'intégrer une image dans la page HTML, à l'endroit où l'élément est placé. Voilà en gros ce que nous pouvions dire sur les éléments HTML. Avant de nous séparer, il serait intéressant de créer un visuel avec ces éléments justement ne croyez- vous pas  ? +237 650 76 22 79 contact@geniusmuna.com BP : 8869 Douala, Cameroun www.geniusmuna.com Genius Muna est une marque portée par Genius Centers NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229 4/ Anatomie d’un document HTML Pour l'instant, nous avons vu quelques éléments HTML de base. Pris séparément, ils ne sont pas très utiles. Combinons-les pour créer une page HTML uploads/S4/ apprendre-le-html.pdf