Les bases du HTML et du CSS Partie 1
Comment organiser ses fichiers
Vous allez créer un dossier par projet, dans lequel vous allez retrouver les fichiers de votre site internet.
À l’intérieur, vous allez trouver 3 dossiers et 2 fichiers :
- un dossier nommé images,
- un dossier nommé css qui contiendra un fichier nommé style.css,
- un dossier nommé js,
- un fichier nommé index.html.
Balises, attributs et sémantique
Le HTML est un langage simple de balises qui se nomment par leur contenu.
Par exemple la balise < p > contiendra un paragraphe.
Une balise est composée de deux éléments :
– Une balise ouvrante
– Une balise fermante.
Par exemple
<p>Ceci est un paragraphe</p>
Notez le / dans la balise fermante.
Il est possible d’ajouter des attributs aux balises. Ces attributs servent à donner des informations complémentaires.
<p class="acc">Ceci est un paragraphe</p>
Certaines balises sont autofermées. C’est à dire qu’elle n’ont qu’une seule balise ouvrante, et aucune balise fermante.
<img>
<br>
Indentation et commentaires
La première bonne pratique à respecter est l’indentation.
Chaque élément contenu dans des balises doit avoir une tabulation en amont.
Votre code sera plus facilement lisible.
<p class="acc">
Ceci est un paragraphe
</p>
En HTML, il est possible d’imbriquer les balises. C’est à dire qu’on peut mettre des balises dans des balises.
Notez que les balises sont elles aussi indentées. Nous pouvons en imbriquer autant que nous en avons besoin.
<div>
<p class="acc">
Ceci est un paragraphe
</p>
</div>
Il est important de commenter son code pour deux raisons :
- Pouvoir s’y retrouver plus tard.
- Rendre votre code plus accessible à une personne tierce qui aurait à intervenir sur votre site.
<!-- Ceci est un commentaire -->
<div>
<p class="acc">
Ceci est un paragraphe
</p>
</div>
Structure d'une page
1- Le doctype
Avant de commencer à coder, il faut préciser au navigateur dans quel langage nous parlons. Il s’agit du doctype (type de document).
<!DOCTYPE html>
2- Balise HTML
Ensuite, il faut ouvrir une balise <html>. Tout notre code sera compris dans cette balise.
Attention ! Il ne peut y avoir qu’une seule balise <html> par page.
<!DOCTYPE html>
<html>
</html>
3- La balise HEAD
Elle sert aux robots et au navigateur. C’est elle qui gère les méta données.
Son contenu n’est pas visible des internautes.
4- La balise BODY
C’est ici que nous allons entrer notre contenu. Tout ce qui est codé entre ces balises sera visible des internautes.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
5- La balise TITLE
C’est le titre de notre page, elle est à mettre dans le HEAD
6- Le charset
Le charset permet de savoir dans quel alphabet nous écrivons.
Si vous déclarez un mauvais charset, il est possible que les accents ou les caractères spéciaux s’affichent mal.
<!DOCTYPE html>
<html>
<head>
<title>Le titre de ma page web</title>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
7- Les balises META
Description :
La balise description est très utile. Elle permet de donner une description aux robots des moteurs de recherches et de l’afficher sur la page des résultats
Autor :
Cette balise sert à renseigner le nom de l’auteur de la page internet.
Copyright :
Cette balise sert à renseigner le copyright qui gère le contenu de notre page internet.
<!DOCTYPE html>
<html>
<head>
<title>Le titre de ma page web</title>
<meta charset="utf-8" />
<meta name="description" content="Une description de la page..." />
</head>
<body>
</body>
</html>
Toute la partie visible de notre site sera dans le body.
Mise en pratique
Exercice
Le dossier
Créer le dossier
Les fichiers
Préparer tous vos fichiers
