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
Ceci est un paragraphe
Notez le / dans la balise fermante.
Il est possible d’ajouter des attributs aux balises. Ces attributs servent à donner des informations complémentaires.
Ceci est un paragraphe
Certaines balises sont autofermées. C’est à dire qu’elle n’ont qu’une seule balise ouvrante, et aucune balise fermante.
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.
Ceci est un paragraphe
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.
Ceci est un paragraphe
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 paragraphe
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).
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.
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.
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.
Le titre de ma page web
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.
Le titre de ma page web
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