Sébastien Roy, Université de Montréal
Sébastien Roy, Université de Montréal
6 février 2023
Le matériel de ce cours peut être réutilisé, sujet à la licence CC BY-SA 4.0.
<x>...</x><x/>Hyper Text Markup Language
Validation importante
HTML n’est pas strictement du XML, mais on suggère de le faire (XHTML)
Énoncé DOCTYPE
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>HTML 5
<!DOCTYPE html>Balisage sémantique
Utiliser un éditeur de texte simple (e.g. nano,sublime,vim,...)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Une petite page web</title>
</head>
<body>
<h1>Un premier exemple</h1>
<p>Voici un exemple, avec peu de contenu.</p>
</body>
</html>
» exemples/undébut.html
<!DOCTYPE html> identifie le document HTML5<html> contient le document au complet<head> Info sur la page<body> Contenu de la page<head><title> (Obligatoire!)<meta> <style> <script> ...<meta>
<meta charset="utf-8">
<meta name="description" content="Mon site à moi">
<meta name="author" content="Blub inc.">
SEO!...
<viewport><meta name="viewport"
content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<viewport><body>Contient tout le contenu du document. Les balises les plus communes sont....
<p>Paragraphe
<p> le contenu du paragraphe </p>
<h1>,
<h2>,
...,
<h6>
Entêtes, qui servent à structurer le contenu, du plus important (h1) au moins important (h6).

<br/>Saut de ligne
<br/>
Contenu des paragraphes, constitué d'éléments affichers sous la forme de lignes (inline).
Balise inline: strong , em, mark, sub sup , mais pas b,i,small
Voir par ici.... W3School<ul>, <ol>, <dl> Listes...
<li>...</li>
Descriptions... (dl,dt,dd)
<ul>Liste non-ordonnée de protocoles internet
<ul>
<li>TCP/IP</li>
<li>HTTP</li>
<li>FTP</li>
<li>SMTP</li>
</ul>
<ol>Liste d'étapes dans une recette...
<ol>
<li>Préchauffer le four</li>
<li>Cuire 40 minutes</li>
<li>Déguster</li>
</ol>
<ol type="I"> ...
<dl>Descriptions de protocoles internet
<dl>
<dt>TCP</dt>
<dt>IP</dt> <dd>Échange de paquets d'information</dd>
<dt>HTTP</dt><dd>Échange de messages sur le WWW</dd>
<dt>FTP</dt> <dd>Échange de fichiers</dd>
</dl>
<dl><a>Liens (URL) vers un documents
<a href="url"> texte </a>
scheme://machine/chemin/du/fichierchemin/du/fichier#id<img>Représente une image.
<img src="exemple/udem-logo.png" alt="Logo UdeM" width="320" height="130"/>
À quoi sert le alt="..."?
<table><table><tr><th><td>Attention à l'accessibilité! (caption, ...)
Vise l'organisation de la page web, selon les conventions et pour l'accessibilité.
<header>...</header> - Entête de toute la page web<nav>...</nav> - navigation principale dans la page actuelle<aside>...</aside> - information auxiliaire<section>...</section> - contenu de la page<article>...</article> - unité d'information autonome<footer>...</footer> - pied de page
Comment regrouper les éléments?
Bloc : <div>...</div>
Ligne : <span>...</span>
<div>Division (ou contenant) en bloc. Aucune valeur sémantique.
<div>
<h2>Introduction</h2>
<p>Ce paragraphe ...</p>
</div>
<div style="background-color:lightblue;">
<h2>Introduction</h2>
<p>Ce paragraphe ...</p>
</div>
» div.html
<span>Division (ou contenant) dans une ligne (inline). Aucune valeur sémantique.
<p>Mon chat a les yeux <span>bleu</span>.</p>
<p>Mon chat a les yeux <span style="color:blue">bleu</span>.</p>
Dans en XML, on utilise les attributs aussi en HTML.
Quelques classiques:<a href=""><img src="">style="...", class="..."
id="..."
style=""Permet d'ajuster les details de presentation.
style="propriété:valeur;propriété:valeur;..."
<h1 style="color:red;font-size:72px">Introduction</h1>
» toutes les propriétés sont ici: CSS
class="..."Définit une categorie d'élément, qu'on peut attribuer à plusieurs éléments différents.
<h1 class="enorme">Introduction</h1>
Plus tard (CSS), on pourra associer des styles à ces catégories...
id="..."Définit un identificateur d'élément, attribuable à un seul élément.
<h1 id="monintro">Introduction</h1>
Plus tard <style>Une balise pour définir des styles!
L'intérieur contient des éléments de style, les mêmes que ceux utilisez dans l'attribut style.
<style>
h1 : { font-style: italic; }
.enorme : { color:red; font-size:72px }
#monintro: { background-color:lightblue; }
</style>
» exemples/style.html