Cette fois, c’est fait : je me lance enfin dans une formation encadrée dans un centre de formation… Pour ce nouveau départ, j’entame donc une nouvelle formation !
Et pour ces premiers jours, nous reprenons les bases de HTML…
Qu’est ce que le langage HTML ?
Un langage de contenu
Le langage HTML est composé de différentes balises. Ces balises servent à indiquer quel contenu il y a sur la page. Elles sont écrites à l’aide de 2 chevrons : un ouvrant et un fermant.
Il existe 2 types de balises :
– Les balises paires. Elles sont composées d’une balise ouvrante et d’une balise fermante. La balise fermante a le même nom que l’ouvrante et contient un slash (/) juste après le chevron ouvrant. On peut ajouter du contenu dans ces balises.
– Les balises orphelines ou autofermantes. Ces balises se suffisent à elles-mêmes, elles ne contiennent donc pas de contenu.
<!-- Balise Paire --> <balise> ... </balise> <!-- Balise orpheline --> <balise />
Construction d’une page HTML
La première balise, à ne pas oublier, est celle qui permet de dire au navigateur que tout le document à traiter est de type HTML.
<! DOCTYPE html>
La page est ensuite entièrement construite dans la balise <html>. Cette dernière a deux balises enfants : <head> et <body>.
Dans la balise <head>, on met toutes les informations concernant la page. Notamment les métadonnées de la page, avec la balise <meta> et plus précisément le type d’écriture (<meta charset>). Ainsi que le titre de la page (qui est affiché au niveau de l’onglet du navigateur) avec la balise <title>.
Dans la balise <body>, on met tout ce qui sera affiché sur la page. Comme les titres avec les balises type <h1> ou du texte avec des balises « paragraphe » type <p>.
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la Page</title>
</head>
<body>
<h1>Ma Page</h1>
<p> Paragraphe du site </p>
</body>
</html>
Chaque balise peut, si elle le nécessite, contenir des informations plus précises. Pour cela on ajoute des attributs à la balise.
Un attribut ne peut être utilisé qu’une seule fois dans chaque balise. Par contre chaque balise peut contenir plusieurs attributs.
La liste de tous les éléments est sur le site officiel MDN.
Un peu plus loin…
Pour aller un peu plus loin, voici quelques exemples de ce qu’il est aussi possible de faire en HTML
Les tableaux
En HTML, il est possible de créer des tableaux. On utilise alors la balise <table>...</table>.
le tableau se lit/se créé ligne par ligne avec les balises <tr>...</tr>.
Ces lignes sont ensuite décomposées en cellules de titre (<th>...</th>) ou de données (<td>...</td>).
Différents attributs permettent de modifier les lignes et/ou cellules du tableau créé.
Les tableaux sont utilisés pour montrer des tableaux sur les pages web. Ils servent aussi à faire la mise en page des e-mails ou des Newsletter.
<table>
<tr>
<th> Nom </th>
<th> Age </th>
</tr>
<tr>
<td> Paul </td>
<td> 33 ans </td>
</tr>
<tr>
<td> Anna </td>
<td> 25 ans </td>
</tr>
</table>
Les liens
Il est aussi possible de rajouter différents types de liens dans un fichier HTML : des liens externes, internes, de fichiers, mail ou téléphone.
La balise utilisée est <a>...</a>, avec comme attribut principal « href » (et « target »).
La principale différence entre les liens externes et internes est alors l’adresse que l’on ajoute dans l’attribut « href ». En effet, pour un lien externe, il est important de ne pas oublier de mettre le protocole utilisé. Sinon le lien sera considéré comme interne (le fichier se trouvant dans le même dossier).
Il est aussi possible de créer une ancre. C’est un lien qui permet de basculer directement vers un contenu spécifique (à l’aide de l’attribut « id ») de la page.
<!-- Lien externe --> <a href="http://leblogdemarie.bgmp.fr/"> Lien externe </a> <!-- Lien inxterne --> <a href="fichier.html"> Lien interne </a> <!-- ancre --> <a href="#ici"> Ancre </a> ... <div id="ici"> ... </div>
Les nouveautés du HTML 5…
Finalisée en octobre 2014, la version 5 du HTML apporte une nouvelle façon de coder les pages. En effet, de nouvelles balises sont créées pour apporter plus de lisibilité.
Ces nouvelles balises sont les suivantes :
<header> : correspond à un en-tête. Il y en a un principal, celui de la page. Il est toutefois possible d’en ajouter à d’autres endroits de la page (section, article, etc.)
<main> : cette balise permet de regrouper tout ce qui est important sur la page. C’est ce qui sera regardé en priorité par les navigateurs. Attention : Il ne doit y en avoir qu’un seul par page !
<section> : c’est un gros regroupement de sujet par thématique.
<article> : cette balise correspond à un élément que l’on peut sortir de la page et qui garde son sens, sa logique.
<footer> : c’est un pied de page. Ses caractéristiques sont les mêmes que le <header>.
<nav> : cette balise regroupe tous les éléments de navigation. C’est donc une liste de liens. Il y en a toujours un principal (celui du menu de la page !). Il est toutefois possible d’en ajouter à d’autres endroits de la page (en pied de page par ex.).
<asside> : correspond à du contenu complémentaire.
<figure> : cette balise permet de regrouper un ou plusieurs médias, comme par exemple une galerie.
<figcaption> : permet d’ajouter une légende à une figure. Attention : elle est obligatoirement intégrée dans la balise <figure>.
<time> : cette balise regroupe tout ce qui concerne le temps (date, heure, etc.). Elle représente un temps.
Voici quelques exemples de mises en page possible :
