HTML & CSS
HyperText Markup Language
& Cascading Style Sheets
Chapitre 1: Définition
HTML : HYPERTEXT MARKUP LANGUAGE
HTML est un langage de balisage utilisé pour structurer et organiser le contenu des pages web. Ses principales caractéristiques
sont les suivantes :
Il permet de définir la structure du contenu d'une page web (paragraphes, titres, images, etc.).
Il indique au navigateur le type et la nature des éléments affichés.
Les fichiers HTML ont généralement une extension .html (exemple : nom_fichier.html).
CHOIX D'UN ÉDITEUR DE TEXTE POUR ÉCRIRE ET MODIFIER DU CODE HTML,
PLUSIEURS ÉDITEURS DE TEXTE SONT DISPONIBLES, NOTAMMENT :
Notepad++
Visual Studio Code
Sublime Text
Atom
Ces outils offrent différentes fonctionnalités facilitant le développement web.
Chapitre 2: Elements, Balises et
Attributs HTML
Les éléments et les balises HTML:
<body></body> : pour le corps
<meta />: pour l'encodage
<p></p>: pour les paragraphes
<h1></h1> . <h6></h6>: pour les titres
<a></a>: pour les liens externes
<img/>: pour les images
Les attributs HTML:
On va prendre l'exemple de la balise
<a></a> qui a comme attributs :
href: qui prend un lien
Chapitre 3: Structure Et Création
Les principales balises HTML:
<!DOCTYPE>: La balise <!DOCTYPE> est une balise particulière
qui sert à indiquer au navigateur la version du HTML
utilisée. Par exemple, en HTML5, on utilise :
<!DOCTYPE html>
<html></html>: Les balises <html> et </html>
encadrent l'ensemble du contenu de la page web.
Elles définissent le document HTML.
<head></head>: Les balises <head> et </head>
forment une section à l'intérieur de la balise <html>.
Elles contiennent les métadonnées du document,
telles que le titre de la page, les liens vers les fichiers CSS et les scripts.
<body></body>: Les balises <body> et </body> se situent après la section <head>.
Elles contiennent tous les éléments visibles de la page web,
comme le texte, les images, les liens et les autres composants interactifs.
Pour créer un fichier HTML,
il suffit d’enregistrer un fichier avec l’extension .html.
L'indentation dans un code HTML n'est pas obligatoire,
mais elle est fortement recommandée.
Elle permet d'améliorer la lisibilité du code et facilite sa
compréhension, notamment dans les projets collaboratifs.
En HTML, les commentaires sont écrits de la manière suivante :
Chapitre 4: Les Titres et les
paragraphes
Un paragraphe est représenté par l'élément
<p></p> .Par exemple:
<p> c'est un paragraphe </p>
<title> : Cet élément est placé dans la section <head> du document HTML.
Il définit le titre de la page web qui s’affiche dans l’onglet du navigateur.
<h1> : Cet élément est utilisé dans la section <body> et représente un titre
visible sur la page web. Il est généralement utilisé pour le titre principal du
contenu.
Chapitre 5: Les Listes
En HTML, il existe trois types de listes :
Les listes ordonnées (<ol>)
Les listes non ordonnées (<ul>)
Les listes de définitions (<dl>)
1. Les listes ordonnées (<ol>=Ordred List):Les listes ordonnées sont utilisées lorsque l’ordre
des éléments est important.
Elles sont définies avec la balise <ol>, et chaque élément est inclus dans une balise <li>.
Attribut type de <ol>
L’attribut type permet de modifier la numérotation de la liste. Il peut prendre différentes
valeurs :
a: lettres minuscules
A: lettres majuscules
i: nombres romains en minuscules
I: nombres romains en majuscules
1: nombres (par défaut)
2. Les listes non ordonnées (<ul>=Unordred List): Les listes non
ordonnées sont utilisées lorsque l’ordre des éléments n’a pas
d’importance. Elles sont définies avec la balise <ul>, et chaque
élément est placé dans une balise <li>.
Chapitre 5: Les Liens et Les Images
En HTML, un lien est créé à l’aide de la balise <a></a>. Il permet de
naviguer entre différentes pages ou de rediriger vers une ressource
externe.
Il existe deux types de liens :
1. Les liens internes
2. Les liens externes
1. Les liens internes
Les liens internes sont utilisés pour naviguer d’une page à une autre au
sein du même site web. Ils permettent de relier différents fichiers HTML
qui se trouvent soit :
dans le même dossier,
dans un dossier différent.
L'élément <a> a comme attribut "href" qui indique l'adresse cible du lien .
Le <<./ >> dans Href indique que le fichier << page2.html >> est dans le même
dossier que << page1.html >> Et pour naviguer à un autre dossier il suffit
d'écrire le nom du dossier suivi d'une « / »
• << ../ » indique que le fichier << page1.html >> est situé dans un dossier
parent c'est-à-dire on doit faire un saut en arrière.
2. Les liens externes:
Il suffit de placer un url dans << href » pour accéder à ce lien
lorsqu'on clique à ce lien.
• Remarque : on peut aussi utiliser l'attribut << target="blank" » pour
ouvrir le lien dans un nouvel onglet du navigateur
Les images en HTML:
Une image en HTML est représentée par l'élément orphelin <img/> et qui a
comme attributs :
src : c'est le source de l'image qui peut être un url ou le nom d'une image
déjà téléchargée.
alt: c'est un texte qui sera afficher ou cas ou l'image ne s'affiche pas.
width: c'est la largeur de l'image en pixel (px).
height : c'est l'hauteur de l'image en pixel.
L'attribut << src>> de <img /> fonctionne de la même manière que
<< href >> de <a> c'est-à- dire on peut le fournir un url d'une image
ou bien le nom de l'image dans le même dossier ou dans un dossier
diffèrent.
• Un élément est dit orphelin s'il est constitué d'une seule balise
( <img/>) et pas comme <p></p> par exemple qui est constitué d'une
paire de balise.
