DSAA D4+ :
/Pratiques numériques

(Info D2) Web 2/3 : HTML + CSS

La première page web de l'histoire. Afficher la page

— Organiser un projet web

Pour concevoir un projet web vous aurez besoin de 3 logiciels :

— Un éditeur de code

Installer l'extension Live Server

— Un navigateur web

— Un logiciel pour transférer vos fichiers depuis votre machine vers un serveur

Une des solutions les plus courantes est d'utiliser un client FTP (File Transfer Protocol), c'est-à-dire un logiciel qui vous permet de glisser-déposer des fichiers depuis votre ordinateur vers un serveur, c'est-à-dire un autre ordinateur que vous louez chez un hébergeur, et qui est configuré pour servir vos pages web. Un des logiciels les plus connus, gratuit et open source, est FileZilla.

FileZilla

— Une structure de dossiers et fichiers

L'organisation et le nommage des fichiers sont essentiels pour éviter les erreurs. QUand vous débutez un projet web créez un nouveau dossier dans lequel seront stockés l'ensemble des dossiers et fichiers utilisés : fichier .html, .css, .js, médias .jpg, .png, autres documents, etc. Voici une structure type de petit projet web :

Structure de projet

Vous noterez que les noms des dossiers et les fichiers ne comportent :

— Le langage HTML : structurer le contenu

— Un langage pour structurer des documents hypertextuels

HTML = Hypertext Markup Language (Langage de balisage hypertextuel)

Pour écrire un document avec du HTML, on utilise des éléments, qui à quelques exceptions près comportent toujours une balise d'ouverture et une balise de fermeture. Le langage a une structure hiérarchique (boîtes dans des boîtes, ou pour reprendre le vocabulaire exact : parents et enfants) :

<article>
  <p>
    Contenu textuel, avec certains mots en <strong>gras</stonrg> ou avec des <a href="https://dsaadesign-lyon.fr">liens</a>.
  </p>
</article>

Les balises ouvrent et ferment les éléments de description du contenu.

Il existe quelques cas particuliers pour lesquels il n'y a pas de balise de fermeture. On dit que la balise d'ouverture est auto-fermante. C'est le cas pour les images <img/>, et pour les lignes de séparation <br/> :

<img src="image/mon_image.png" />
<br/>

Les balises d'ouverture des éléments comportent la plupart du temps des attributs, comme dans les exemples ci-dessus. Ces attributs permettent de donner des praramètres, des styles, et souvent de nommer les éléments utilisés. Exemples :

<!-- Ici l'attribut href permet de définir l'adresse à laquelle le lien renvoie -->
Un <a href="https://dsaadesign-lyon.fr">lien hypertexte</a> vers un site.

<!-- Ici l'attribut src précise l'image qui sera chargée par l'élément img -->
<img src="image/mon_image.png" />

— Les éléments HTML

Il existe 2 grands types d'éléments qui déterminent la façon dont ils se positionnent dans la page :

Les balises ci-dessous respectent une approche dite sémantique : elles sont choisies en fonction du contenu qu'elles décrivent.

Remarques :

<!-- inline -->
<a href="#">lien hypertexte</a>
<img> image
<span>élément au contenu indéfini</span>
<i>texte en italique</i><strong>texte en gras</strong><del>texte barré</del>
<input> qui est un élément de formulaire


<!-- block -->
<section>grand bloc de page</section>
<article>article</article>
<div>bloc de contenu indéterminé</div>
<p>paragraphe</p>
<!-- Listes -->
<ul>
  <li>item de liste</li>
  <li>item de liste</li>
  <li>item de liste</li>
</ul>
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<!-- Jusqu'à 6 -->
<form>Formulaire</form>

<!-- etc. Vioir la liste complète ici : https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements -->

Chaque élément, une fois rendu dans un navigateur, a un positionnement et une mise en forme par défaut. Voici une capture écran du rendu du code qui liste les éléments HTML.

Affichage des éléments HTML par défaut

— Structure de page type

Un document HTML a en général cette structure :

<!-- en-tête de la page -->
<!DOCTYPE html>
	<html lang="fr"> 
	<head>   
		<meta charset="UTF-8">
		<title>Titre de la page, visible en haut du navigateur (et par les moteurs de recherche)</title>
	</head> 
  <!-- fin de l'en-tête de la page -->

  <!-- corps de la page -->
	<body>
		Contenu visible de la page : c'est ici, entre <body> et </body> que les éléments HTML listés ci-dessus prennent place. 
	</body>
  <!-- fin du corps de la page -->
</html>

Et voilà à quoi pourrait ressembler un site avec un header, un menu de navigation, une galerie de projet et un footer :

<!DOCTYPE html>
	<html lang="fr"> 
	<head>   
		<meta charset="UTF-8">
		<title>Mon portfolio</title>
	</head> 
	<body>
		<header>
      <h1>Portfolio</h1>
      <p>Hello, bienvenue sur mon portfolio.</p>
    </header>
    <nav>
      <ul>
        <li>Home</li>
        <li>Bio</li>
        <li>Projets</li>
        <li>Contact</li>
      </ul>
    </nav>

    <main>

      <article>
        <img src="assets/images/min-projet-1.png">
        <h2>Titre de mon projet</h2>
        <p>Court descriptif du projet en quelques mots</p>
      </article>

      <article>
        <img src="assets/images/min-projet-2.png">
        <h2>Titre de mon projet</h2>
        <p>Court descriptif du projet en quelques mots</p>
      </article>

      <article>
        <img src="assets/images/min-projet-3.png">
        <h2>Titre de mon projet</h2>
        <p>Court descriptif du projet en quelques mots</p>
      </article>

      <!-- etc. -->
    </main>
	</body>
</html>

Pour tester cette page vous pouvez copier le code suivant, et le coller dans un nouveau fichier index.html. L'extension .html est essentielle car elle va permettre au navigateur de lire le code et de l'interpréter pour l'afficher.

index est un nom standard important, puisque le serveur va toujours chercher un document avec le nom index pour savoir quelle page servir en premier, si aucune n'est définie dans l'url : par exemple si je demande cette page https://info.cern.ch/hypertext/WWW sans préciser de nom de fichier, le serveur va automatiquement renvoyer https://info.cern.ch/hypertext/WWW/index.html.

— Naviguer dans une page et entre des pages

Le HTML permet donc de créer des documents hypertextuels, ce qui signifie qu'il est possible de faire des liens vers d'autres documents.
L'élément qui permet de créer des liens est l'élément <a>, sans doute le plus emblématique du web.

Il est possible de faire des liens internes comme externes grâce à l'attribut href de l'élément <a>. Les liens internes fonctionnent avec des ancres, et les liens externes avec des urls, dont le chemin peut être relatif ou absolu.

Liens vers un élément du document :
Ici la page n'est pas rechargée et aucune autre page n'est appelée.


<a href="#id-element-a-atteindre">Lien interne</a>

<h2 id="id-element-a-atteindre">
  Titre de niveau 2
</2>

Quand on clique, le lien fait défiler la page jusqu'à l'élement dont l'ID correspond. Attention dans le lien il faut ajouter # devant l'ID.
Il est possible d'ajouter un effet d'animation grâce à CSS :


body{
  scroll-behavior:smooth;
}

Liens externes :
Deux cas de figure :


<!-- page située sur le même serveur/site -->
<a href="bio.html" target="_blank">Lien vers une page du site</a>

<!-- page située sur un autre serveur -->
<a href="https://dsaadesign-lyon.fr/" target="_blank">Lien externe</a>

— Le langage CSS : mettre en forme le contenu

« CSS j'adore, j'suis amoureuse de CSS, j'adore ce langage »

Julie Blanc, Podcast Graphic Matter, 21/01/2025 (07:01). Écouter le podcast.

— Lier la feuille de style à votre document

CSS (Cascading Style Sheets) permet d'ajouter une feuille de styles au document HTML, afin de contrôler la mise en forme des éléments, leur apparence. Pour que ces styles s'appliquent bien aux éléments HTML de la page, il faut lier le document HTML à la feuille de styles CSS styles.css. Cela se passe dans l'en-tête du document HTML :

<!DOCTYPE html>
	<html lang="fr"> 
	<head>   
		<meta charset="UTF-8">
		<title>Titre de la page</title>
      <!-- ici -->
      <link href="css/styles.css" rel="stylesheet" />
	</head> 
	<body>
		
	</body>
</html>

Ici le fichier styles.css est situé dans le dossier css/ :

index.html
css
  |_ styles.css
assets
  |_ images
     |_ min-image-1.png
     |_ min-image-2.png
     |_ min-image-3.png

— Les sélecteurs pour associer les règles CSS aux éléments HTML

Une feuille de style est constituée de règles. Ces règles respectent cette syntaxe :


selecteur{
  propriete1:valeur;
  propriete2:valeur valeur;
}

Si vous voulez définir une règle pour la balise <h1> de votre document HTML vous devez la sélectionner avec un sélecteur, et définir une et souvent plusieurs propriété(s) ainsi qu'une valeur. Par exemple, changer sa couleur :


h1{
  color: red;
}

Il existe de nombreux types de sélecteurs (voir la doc de Mozilla), mais voici les principaux :

/* Sélecteur d'élément */
h1{
  color:red;
}

/* Sélecteur de classe : s'applique aux éléments dont l'attribut class 
a pour valeur "rouge", comme : <span class="rouge">. 
À utiliser si plusieurs éléments sont à cibler */
.rouge{
  color:red;
}

/* Sélecteur d'identifiant : ne s'applique qu'à un seul élément 
du document qui aura un attribut id avec la valeur 
menu-principal <nav id="menu-principal"> */
#menu-principal{
  color:red;
}

Les sélecteurs fonctionnent en suivant le chemin des éléments, c'est-à-dire en passant de parents en enfants. Par exemple si vous voulez sélectionner tous les éléments <li> situés dans un <ul> lui-même situé dans un <nav> dont l'ID est menu-principal, voilà le sélecteur qu'il est possible d'utiliser :

<nav id="menu-principal">
  <ul>
    <li>Home</li>
    <li>Bio</li>
    <li>Projets</li>
    <li>Contact</li>
  </ul>
</nav>
#menu-principal ul li{
  color:red;
}

— Le modèle de la boîte en CSS

Les éléments sont pour la plupart des boîtes, avec une largeur et une hauteur, une couleur de fond (ou une image), une bordure, des marges intérieures et extérieures, et d'autres propriétés. Si vous ouvrez les outils de développement de votre navigateur, cette boîte est représentée de cette manière :

Modèle de la boîte

Dans ce schéma nous voyons certaines des propriétés les plus importantes :

Certaines propriétés sont dédiées à la typo :

D'autres sont intéressantes (consultez la doc pour connaître leurs valeurs) :

Toutes les propriétés existantes sont présentées dans la référence CSS de Mozilla : https://developer.mozilla.org/fr/docs/Web/CSS/Reference

— Le positionnement des éléments

Comme dans Figma le positionnement des éléments peut répondre à 2 logiques : automatique ou manuelle.

À la différence de Figma, le HTML a une logique par défaut qui est automatique : on appelle ça le flux des éléments. Comme vu plus haut ce flux est lié au type d'élémzent, soit block, soit inline.
La règle est que :

Il est possible de sortir les éléments du flux, de plusieurs manières, en utilisant CSS.

Le plus simple est d'utiliseer position comme dans l'exemple ci-dessous. Alors que l'élement <nav> devrait se positionner dans le flux en-dessous de <p>, une règle CSS lui attribue la propriété position:fixed :


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<nav>☰</nav>


nav{
  position:fixed;
  top:20px;
  right:20px;
}

Une fois la propriété position activée, il suffit de définir les coordonnées de l'élément avec top, left, bottom ou right.

— Positionner les éléments avec flexbox (= auto layout de Figma)

CSS a une propriété très utile pour mettre en page des éléments de manière automatique, ou fluide : la propriété display, et plus précisément les valeurs flex et grid. Ces 2 valeurs permettent de positionner les éléments à la manière de l'auto layout de Figma : flux vertical et horizontal, ou en grille, gouttières, alignements, marges, etc.

Dans l'exemple ci-dessous, nous souhaitons positionner les éléments d'une liste en flux Flexbox. Les propriétés seront ici affectées à l'élément parent, au conteneur (comme dans Figma).

    <nav>
      <ul id="list-flex">
        <li>Home</li>
        <li>Bio</li>
        <li>Projets</li>
        <li>Contact</li>
      </ul>
    </nav>
#list-flex{
  display:flex;
  flex-direction: row;
  gap:30px;
}

#list-flex li{
  border-bottom: 1px solid #000;
}
Résultat avec flex-direction:row

Et si on met flex-direction: column; :

Résultat avec flex-direction:row

Si on souhaite ajouter un titre et des icônes pour faire un header, il va falloir basculer le header en display:flex pour mieux contrôler le positionnement des éléments :

<header>
  <h1>dsaa.studio</h1>
    <nav>
      <ul id="list-flex">
        <li>Home</li>
        <li>Bio</li>
        <li>Projets</li>
        <li>Contact</li>
      </ul>
    </nav>
      <a>
        <img src="assets/ui/instagram.svg" />
      </a>
</header>

Il faut ajouter display:flex au header, et utiliser 2 propriétés complémentaires : justify-content qui définit les marges automatiques (comme dans Figma), et align-items qui est la propriété d'alignement qui fonctionne comme dans Figma également.

Alignement dans Figma = align-items en CSS
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#list-flex{
  display:flex;
  flex-direction: row;
  gap:30px
}

#list-flex li{
  border-bottom: 1px solid #000;
}

Voici un schéma de correspondance entre le fonctionnement de l'auto layout Figma et la Flexbox CSS :

Correspondance auto layout et FlexBox CSS

D'autres propriétés de la Flexbox s'appliquent aux éléments enfants du conteneur :

Appuyez-vous sur cette page pour manipuler les nombreuses propriétés de la flexbox : https://flexbox.malven.co/

— Ressources

Références web

Langages

Outils

Cours / ressources