Ce qu’il faut retenir du langage html et css
Le langage html
Généralités sur les éléments html
A chaque page web d’un site web correspond un fichier html (dont le nom finit donc pas .html).
Un fichier html est constitué d’une succession d’instructions appelées éléments.
Il existe deux éléments :
- Les éléments que l’on appellera classiques ou éléments à deux balises.
- Les éléments blocs ou éléments à balise orpheline.
Les éléments à deux balises
Un élément classique est organisé de la manière suivante :
- La balise ouvrante : il s'agit du nom de l'élément encadré par un chevron ouvrant (<) et
un chevron fermant (>).
- Le contenu : il s'agit du contenu de l'élément
- La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle comprend une barre
oblique (/) avant le nom de l'élément.
Exemple d’élément classique : L’élément p qui permet de créer un paragraphe.
<p>Vive les SNT</p>
Rendu site
Les éléments à balise orpheline
Il n’y a qu’une balise constituée du nom de l’élément entre chevrons.
Exemple : L’élément br qui permet de revenir à la ligne s’écrit :
<br>
Les attributs html
Dans certaines balises, ouvrantes ou orphelines, en plus du nom de l’élément, on trouve des
paramètres qui sont soit indispensable au fonctionnement de l’élément soit optionnels. On parle
alors d’attributs. Dans tous les cas, ils s’écrivent après le nom de l’éléments et avant le chevron
fermant.
Exemple :
Dans l’élément ci-dessus, dans la balise ouvrante, il faut mettre l’attribut href qui permet d’indiquer,
dans le cas d’un lien externe, l’adresse électronique du site vers lequel le lien doit renvoyer.
Les éléments imbriqués
Certains éléments peuvent être inclus dans d’autres :
Si on décortique la structure de base d’un fichier html, on a
- Un premier élément !DOCTYPE html, élément à balise orpheline
- Un élément html, élément à deux balises
- Dans l’élément html, deux éléments, head et body, tous les deux à deux balises.
- Dans l’élément head, deux éléments, l’un, title, à deux balises et l’autre meta à balise orpheline.
- Dans l’élément body, un élément à deux balises appelé p.
Le décalage
Dans l’exemple ci-dessus, on a décalé les balises des éléments head et body par rapport à celles de
l’élément html. De la même manière, on décalé la ou les balises des éléments title et meta par
rapport à celles de l’élément head et celles de l’élément p par rapport à celles de l’élément body.
Le décalage est non obligatoire en html (au sens que le site fonctionne de la même manière avec et
sans) mais un bon programmeur doit avoir un fichier bien lisible pour que d’autres codeurs puissent
l’utiliser. Je vous demande donc de faire les décalages comme dans l’exemple ci-dessus.
Les éléments à connaitre
- p pour créer un paragraphe
<p> Texte du paragraphe </p>
- h1 pour créer un titre principal
<h1>Texte du titre principal</h1>
- img pour ajouter une image
<img src="Nom du fichier.extension du fichier">
- a pour créer un lien externe
<a href : "adresse électronique du site">Texte du lien</a>
- a pour créer un lien interne
<a href : "Nom du fichier.extension du fichier"> Texte du lien</a>
- Le nom de l’élément link qui permet de créer un lien entre html et css
- Le nom de l’élément Title qui permet de gérer le nom apparaissant sur l’onglet de la page.
- Le nom de l’élément meta qui permet de définir la langue dans laquelle est écrit la page.
Où placer les éléments ?
- Dans l’élément head
On y trouve les éléments Title, meta et link.
- Dans l’élément body
On y trouve tout le
reste.
Comprendre le système de lien et de dossier
Si on déplace l’image du dossier dans lequel il se trouvait, elle n’apparait plus sur le site. C’est parce
que dans le fichier html, il est précisé où il doit chercher l’image. Par défaut, il la cherche dans le
même dossier et au même niveau (pas dans un sous-dossier).
Remarque : Pour la création du site, il est demandé à ce que les liens avec les fichiers images se
fassent avec des fichiers qui se trouveront dans le dossier et pas en ligne.
Le langage css
Généralités
Il permet de créer des effets de style (couleur, taille des polices…)
Relier html et css
Il faut le relier au fichier html en mettant dans le fichier html un élément link comprenant le nom du
fichier css à associer.
Ex : <link rel="stylesheet" href="cours.css">
Dans cet exemple, le fichier css s’appelle cours.css.
Plusieurs fichiers html peuvent être reliés au même fichier css mais on peut aussi créer un fichier css par
fichier html.
Les sélecteurs et les attributs
Le langage css utilise principalement deux types d’outils, les sélecteurs et les attributs. Les attributs
spécifient ce qui doit être fait (ex : changer la couleur) et le sélecteur qui contient le ou les attributs
indique à quoi appliquer les effets (ex : le titre principal).
Exemple permettant de changer la couleur du titre principal :
h1{
color:blue;
}
Remarque : Il n’est pas nécessaire de recréer artificiellement les espaces devant l’attribut. Si vous avez
enregistré au préalable votre fichier css et que vous appuyez sur la touche Entrée, l’espacement se fait
tout seul.
Attention à ne pas oublier le point-virgule après avoir écrit l’attribut et la valeur qui y est associée
sinon cela ne fonctionnera pas.
