Les bases
C'est quoi?
HTML
HyperText Markup Language
En français « langage de balisage hypertexte ».
Le HTML structure et de donne du sens à du contenu.
Grâce au HTML, on va pouvoir indiquer au navigateur qu'un texte doit être considéré comme un paragraphe ou qu'un autre doit être un titre...
On va créer un grand titre avec l'élément h1 et un paragraphe avec l'élément p.
<h1>Je suis un titre</h1>
<p>Je suis un paragraphe</p>
Les noms des balises sont en anglais.
h1 correspond à heading de niveau 1.
p correspond à paragraph.
<h1>Je suis un titre</h1>
<p>Je suis un paragraphe</p>
Les éléments
Le langage HTML repose sur l’utilisation d’éléments.
On va utiliser des éléments pour définir un paragraphe, un titre ou bien pour insérer une image ou une vidéo dans un document.
Un élément HTML peut être soit constitué d’une paire de balises et d’un contenu...
<p>Je suis un paragraphe</p>
élément p
balise
ouvrante
balise
fermante
contenu
...soit (plus rarement) d’une balise orpheline.
<br>
élément br
balise orpheline break
Placez une image dans votre site.
Exo
La balise ouvrante d’un élément HTML peut contenir des attributs, qui sont parfois même obligatoires.
Les attributs vont préciser les éléments.
Un attribut contient toujours une valeur.
<img src="chat.png" alt="image de chat" />
élément img
attribut
source
valeur
attribut alternative
valeur
L'indentation
Indenter correspond à créer des retraits en début de ligne de façon cohérente et logique.
Indenter va nous permettre d’avoir un code plus propre et plus lisible, donc plus facile pour détecter les erreurs et enfin de nous permettre de discerner les différents éléments .
<body>
<h1>Je suis un titre</h1>
<p>Je suis un paragraphe</p>
</body>
L'élément body est parent des éléments h1 et p.
h1 et p sont donc enfants de l'élément body.
On le voit à l'indentation des éléments h1 et p.
Les éléments h1 et p sont frères car sur la même ligne
Créez la liste ordonnée:
-
boissons
-
légumes
-
desserts
Exo
<ol>
<li>boissons</li>
<li>légumes</li>
<li>desserts</li>
</ol>
L'élément ordered list est parent des éléments list.
Créez dans la liste légumes la liste
non-ordonnée:
-
salade
-
tomates
-
oignons
Exo
<li>légumes
<ul>
<li>salade</li>
<li>tomates</li>
<li>oignons</li>
</ul>
</li>
L'élément unordered list devient enfant de l'élément list légumes tout en étant parent de ses propres list.
On peut donc insérer des éléments à l'intérieur d'autres éléments indéfiniment.
Les commentaires
Les commentaires vont être des lignes de texte que l’on va écrire au milieu de notre code, afin de donner des indications sur ce que fait le code en question.
Les commentaires seront invisibles pour vos visiteurs, ils ne servent qu’aux développeurs.
Les commentaires sont utiles dans deux situations :
-
Dans le cas d’un long projet, afin de bien se rappeler soi même pourquoi nous avons écrit tel ou tel code, ou encore pour se repérer dans le code ;
-
Dans un projet de groupe, cela permet aux autres développeurs de comprendre beaucoup plus facilement le code distribué.
<!-- je suis un commentaire -->
EXEMPLE
Les liens
internes et externes
Un lien, va servir à "transporter" un utilisateur d'un endroit vers un autre après que celui-ci ait cliqué dessus.
Pour en créer, nous allons utiliser l’élément a accompagné de son attribut href (hypertext reference) qui va prendre comme valeur la cible du lien.
La cible d’un lien est l’adresse de la page de destination du lien.
Deux types de liens : les liens permettant de se déplacer d'une page vers une autre à travers un même site et les liens permettant de se rendre sur d’autres sites.
Le lien interne
- Les liens internes vont être des liens ramenant vers d’autres pages au sein d’un même site.
- On va devoir indiquer l’adresse de la page de destination relativement à l’adresse de la page de départ (c’est-à-dire celle à partir de laquelle on fait notre lien).
Le lien externe
- Les liens externes vont être des liens ramenant vers des pages d’autres sites.
- Pour créer un lien externe, on va devoir indiquer l’URL complète de destination du lien.
-
Placez un lien externe dans votre site vers le site Nike
-
Placez un lien interne dans votre site vers un autre .html
Exo
<a href="https://www.nike.com/fr/">cliquez ici</a>
élément a
attribut
HyperText
Reference
valeur
contenu
Le lien externe
<a href="page2.html">cliquez ici</a>
élément a
attribut
HyperText
Reference
valeur
contenu
Le lien interne
Tout d'abord, créez un deuxième .html dans votre dossier.
Les ancres
Si votre page est très longue, vous voudrez proposer des raccourcis à vos visiteurs : en cliquant sur un lien, ceux-ci doivent être redirigés à un endroit précis de la page.
Nous allons donc créer des liens de type « ancre ».
Nous y rajouterons un attribut id à l’intérieur de la balise ouvrante de l’élément où l’on veut envoyer le visiteur.
-Creer un h2 en haut de la page
-Creer un h4 en bas de la page
-Quand je clique sur mon élément h2 tout en haut de ma page, il doit m'emmener tout en bas de ma page sur l'élément h4.
Exo
<h2>allez vers la <a href="#s3">section 2</a></h2>
<h3 id="s3">section 2</h3>
La structure
Pour qu’une page HTML soit valide, elle doit suivre un schéma précis.
Cela améliorera votre référencement et limitera les problèmes d’ergonomie et les bugs de votre site.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
Nous devrons toujours démarrer une page HTML en précisant le type de notre document.
Le doctype sert à préciser le type du document.
Dans la balise doctype, on va préciser le langage utilisé, à savoir le HTML dans notre cas.
<html>
</html>
Après le document, nous devons mentionner un élément html.
Cet élément est composé de ces deux balises et va représenter notre page HTML en soi.
On va donc insérer tout le contenu de notre page (et donc les autres éléments) à l’intérieur de celui-ci.
<head>
</head>
A l’intérieur de l’élément html, nous devons à nouveau indiquer deux éléments : head et body.
L’élément head va contenir des informations qui vont servir au bon fonctionnement de la page.
L’élément body va lui contenir tout le contenu « visible » de la page : les textes, images, liens, vidéos, etc.
<body>
</body>
<meta charset="UTF-8">
<title>Document</title>
Dans l'élément head : l’élément title, qui va contenir le titre de la page et un élément meta avec son attribut charset qui va nous permettre de définir l’encodage de la page.
L’encodage va nous permettre d'afficher tous les caractères spéciaux.
Nous utiliserons donc la valeur utf-8.