2deFacile

Développement web

Les bases du HTML et CSS

15 min lecture

Le développement web permet de créer des sites internet. Tu vas apprendre les deux langages fondamentaux : HTML pour la structure et CSS pour le style. Ce chapitre te donne les bases pour comprendre comment une page web est construite.

1HTML : la structure d'une page

HTML signifie HyperText Markup Language. C'est un langage de balises. Chaque balise entoure du contenu et lui donne un sens.

  • Une balise s'écrit entre chevrons : <tagname>.
  • La plupart des balises ont une balise fermante : <tagname>...</tagname>.
  • Exemple : <p>Ceci est un paragraphe.</p>

La structure minimale d'une page HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de l'onglet</title>
  </head>
  <body>
    <h1>Titre principal</h1>
    <p>Un paragraphe.</p>
  </body>
</html>

À retenir

Toute page HTML commence par <code>&lt;!DOCTYPE html&gt;</code> et contient <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code> et <code>&lt;body&gt;</code>.

2Les balises essentielles

Voici les balises les plus courantes :

  • <h1> à <h6> : titres (h1 le plus important).
  • <p> : paragraphe.
  • <a href="url"> : lien hypertexte.
  • <img src="image.jpg" alt="description"> : image (balise auto-fermante).
  • <ul> et <li> : liste non ordonnée.
  • <ol> et <li> : liste ordonnée.

Attributs

Les balises peuvent avoir des attributs qui donnent des informations supplémentaires. Exemple : <code>&lt;a href="https://exemple.fr"&gt;</code> où <code>href</code> est l'attribut.

3CSS : le style

CSS signifie Cascading Style Sheets. Il permet de mettre en forme les éléments HTML.

On peut écrire du CSS dans un fichier séparé (recommandé) ou directement dans la balise <style> dans le <head>.

Syntaxe :

selecteur {
  propriété: valeur;
}

Exemple :

p {
  color: blue;
  font-size: 16px;
}

Cela rend tous les paragraphes en bleu avec une taille de police de 16 pixels.

À retenir

Un sélecteur cible des éléments HTML. Les propriétés modifient leur apparence.

4Les sélecteurs CSS courants

  • Sélecteur de balise : p cible tous les <p>.
  • Sélecteur de classe : .ma-classe cible les éléments avec class="ma-classe".
  • Sélecteur d'identifiant : #mon-id cible l'élément avec id="mon-id" (unique).

Exemple :

.important {
  font-weight: bold;
}
#titre-principal {
  text-align: center;
}

Attention

Un identifiant doit être unique dans la page. Une classe peut être utilisée plusieurs fois.

5Lier HTML et CSS

Pour utiliser un fichier CSS externe, on ajoute dans le <head> :

<link rel="stylesheet" href="style.css">

On peut aussi écrire du CSS dans une balise <style> dans le <head>, ou directement dans l'attribut style d'une balise (déconseillé).

L'essentiel à retenir

  • HTML structure le contenu avec des balises.
  • CSS met en forme le contenu avec des règles.
  • Les balises HTML courantes sont <h1>, <p>, <a>, <img>, <ul>, <ol>.
  • Un fichier CSS externe se lie avec <link>.
  • Les sélecteurs CSS peuvent cibler des balises, des classes ou des identifiants.
Littera