Communiquer, collaborer, échanger à l'ère numérique

Introduction aux langages HTML et CSS

Ressources

Sites de Références

HTML Standard : https://html.spec.whatwg.org/multipage/
Dictionnaire HTML | CSS | Javascript | XPath : https://www.w3.org/2009/cheatsheet/
Validator HTML : https://validator.w3.org/

Cours et tutoriels en ligne

HTML Training : https://www.w3.org/community/webed/wiki/HTML/Training
HTML5 and CSS Fundamentals : https://www.edx.org/course/html5-and-css-fundamentals
W3Schools, HTML tutorial : https://www.w3schools.com/html/default.asp

Objectifs du cours

Connaître les principaux fondements et standards du web
Savoir rédiger une page HTML
Savoir rédiger une feuille de style CSS
Comprendre la distinction contenu / forme

Internet et Web

Tim Berners-Lee et Vinton G. Cerf

Internet

Interconnect Networks

Ensemble de protocoles qui permettent d’envoyer des « paquets » d’informations d’un ordinateur à un autre.

Web

World Wide Web

Le web est une application, un service internet, comme les systèmes de messagerie, de transfert de fichiers (FTP) ou les groupes de discussion (news groups)

Les langages du Web

HTML

HyperText Markup Language (langage de balisage pour l’hypertexte) est le langage utilisé pour structurer une page web et son contenu.

Les langages du Web

HTML

HyperText Markup Language (langage de balisage pour l’hypertexte) est le langage utilisé pour structurer une page web et son contenu.

CSS

Cascading Style Sheets (feuilles de style en cascade) permet de définir la mise en page et le style visuel d'une page Web.

Les langages du Web

HTML

HyperText Markup Language (langage de balisage pour l’hypertexte) est le langage utilisé pour structurer une page web et son contenu.

CSS

Cascading Style Sheets (feuilles de style en cascade) permet de définir la mise en page et le style visuel d'une page Web.

JS

JavaScript est un langage de programmation qui permet de rendre les pages web dynamiques et interactives.

langages du web — CSS - HTML - Javascript

HTML

HyperText Markup Language

HTML est le langage de publication pour le web. Il est fondé sur l’utilisation de liens hypertextuels entre les documents et sur le protocole HTTP (Hypertext Transfer Protocol).

HTML a été développé au CERN par Tim Berners-Lee.

C’est un langage de balisage. C’est-à-dire qu’on utilise des balises pour marquer des portions de texte.

Exemple


Mon paragraphe.

Exemple



	Mon titre
	Mon premier paragraphe.
	Mon second paragraphe.

Arborescence



	Mon titre
	Mon premier paragraphe.
	Mon second paragraphe.

Les éléments-clés d’une page web

Le doctype, placé en préambule, il indique au navigateur le type et la version du document.

<!DOCTYPE html>

La balise <html>, placée juste après le doctype, enveloppe tout le reste de la page web. Une bonne pratique est d’y déclarer la langue du document à l’aide de l’attribut lang.

À l’intérieur de <html> on trouve deux éléments clés : <head>, l’en-tête, contenant toutes les métadonnées (titre de la page, instructions CSS, encodage des caractères, etc.) ; et le <body>, le corps, réservé au contenu (les paragraphes, les titres, les liens, les listes, etc.).

Ces 4 éléments sont obligatoires !

Hello World!

Exemple.

exercice : dans un éditeur de texte, créer une page web très simple (p. ex. contenant seulement un paragraphe). La sauvegarder, en prenant soin d’utiliser une extension « .html ». L’ouvrir dans son navigateur.

Le formatage du texte

Le paragraphe <p>

Pour être correctement affichés par un navigateur web, les paragraphes doivent être marqués à l’aide de la balise <p>. Sans ces balises, le contenu n’est qu’un amas de texte. Les espaces et sauts de ligne sont ignorés !

Exercice

Les titres <h1>-<h6>

Il existe 6 niveaux de titre, de <h1> à <h6>. Ils permettent de mieux comprendre la structure d’une page. Dans la mesure du possible, les niveaux de titre doivent se suivre. On évitera donc de passer d’un titre <h1> à un titre <h3> ou <h4> directement !

Exemple

Exercice

Gras (<b> | <strong>)

<strong> indique que son contenu revêt une importance particulière, voire un caractère urgent. Cela se traduit généralement par un affichage en gras.

<b> est une balise de mise en forme (bold, gras). Elle permet d’attirer l’attention du lecteur sur une portion de texte, sans pour autant signifier une importance particulière.

Exemple texte en gras

Italique (<i> | <em> | <cite>)

<em> signale une emphase, on souhaite insister sur un terme ou un groupe de mots. Cela se traduit généralement par un affichage en italique.

<i> est une balise de mise en forme (italic, italique). Elle permet de distinguer une portion de texte du texte environnant.

<cite> contient un titre d’œuvre. Cela se traduit généralement par un affichage en italique.

<strong> et <em> revêtent un caractère sémantique, et sont généralement pris en compte par les moteurs de recherche.

Exemple texte italique

Les listes <ul> | <ol> | <dl>

<ul> signale une liste non ordonnée d’éléments. Elle est représentée sous la forme d’une liste à puces.

<ol> signale une liste ordonnées d’éléments.

<dl> indique une liste de définitions (type dictionnaire ou glossaire).

La balise <li> est utilisée dans les listes <ul> et <ol> pour marquer les éléments de liste. Dans une liste de définitions on marque les termes avec la balise <dt> et leur définition avec <dd>.

Exemples listes

Les citations <q> | <blockquote>

<q> signale une citation courte. Les navigateurs les représentent avec des marques de citation (p. ex. guillemets).

<blockquote> indique un bloc de citation, c’est-à-dire une citation longue.

Exemples citations

Indices, exposants et petits caractères <sub> | <sup> | <small>

<sub> est utilisé pour afficher du texte souscrit (en indice).

<sup> signale un texte en exposant.

<small> permet de représenter des commentaires, des notes ou des textes à écrire en petits caractères.

Pour la rédaction de formules mathématiques, on utilisera de préférence MathML, un langage spécialisé.

Exemples

Le code et les sauts de ligne <code> | <pre> | <br/>

<code> signale un court fragment de code.

<pre> signale un texte préformaté où les espaces seront retranscrits (pour du code informatique long, ou des calligrammes par exemple).

<br> indique un saut de ligne. C’est une balise sans contenu et auto-fermante.

NB : certains caractères sont dits réservés. Afin de les afficher sur une page web sans qu’ils soient interprétés comme du code HTML on utilise des entités.

C’est le cas des caractères <, > et &, qui sont représentés grâce aux entités <, > et &.

Exemples

TP 1/2

L'objectif de ce TP est de réaliser une première page HTML en utilisant des balises simple pour formater le texte.

Rendez-vous à l'adresse suivante https://codepen.io/sardinecan/pen/PoeKWVb
Cette page web contient déjà certains éléments HTML sur lesquels nous reviendrons dans les séances suivantes. Intéressons nous au contenu de la balise <body/> qui correspond au contenu de notre page web. Elle contient des extraits du tome I des Misérable de Victor Hugo.
En utilisant la balises paragraphe <p></p> et les balises <h1></h1> à <h6></h6> pour les titres, identifiez et encodez les différents niveaux de titre ainsi que les différents paragraphes.

TP 2/2

Dans les premiers paragraphes des chapitre VI du livre premier et chapitres I du livre quatrième, mettez en valeur les termes « Voilà Jean » et « Au Sergent de Waterloo » avec la balise adéquate.
Dans la chanson de Fantine, au chapitre VI du livre septième, faites en sorte que chaque vers soit sur une ligne.
Balisez la table des matières pour en faire une liste. Faites attention au choix du type de liste et à l'imbrication éventuelle !

NB : Vous pouvez éditer le document codepen directement en ligne, ou bien copier le contenu de la fenêtre HTML dans un éditeur de texte (Visual Studio Code ou NotePad++ par exemple). Sauvegarder ensuite votre document avec une extension « .html », par exemple index.html ou maPremierePage.html et ouvrez-le dans un navigateur.