IFT 1005 - Design et développement Web

4. HTML

Sébastien Roy, Université de Montréal

IFT 1005 - Design et développement Web

4. HTML

Sébastien Roy, Université de Montréal
6 février 2023
 

Remerciements

Merci à Guy Lalpame et Louis Salvail pour avoir partager le matériel qu'ils ont monté pour IFT1005.

 


Le matériel de ce cours peut être réutilisé, sujet à la licence CC BY-SA 4.0.

Un peu d'histoire

Le langage HTML est défini par le World Wide Web Consortium (le W3C).

Un peu d'histoire

Rappel sur les balises

Validation

Les pages HTML que nous acceptons devrons respecter le standard HTML5. Exemple de validateur: https://validator.w3.org

HTML

Hyper Text Markup Language

HTML

Validation

Énoncé DOCTYPE

Obligatoire dans ce cours

Structure d’une page HTML 5


<!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

Structure d’une page HTML 5

et dans le html...

<head>

Information sur la page. Contient entre autres:

<meta>

Infos utiles sur la page...

  <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>

Sans <meta name="viewport" …

Avec <meta name="viewport" …

https://www.w3schools.com/css/cssrwdviewport.asp

<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/>

Dans un paragaphes.... le inline/phrasing

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

Listes <ul>, <ol>, <dl>

Listes...

les éléments d'une liste sont identifiés par <li>...</li>

Descriptions... (dl,dt,dd)

Liste non ordonnée <ul>

Liste non-ordonnée de protocoles internet


<ul>
<li>TCP/IP</li>
<li>HTTP</li>
<li>FTP</li>
<li>SMTP</li>
</ul>

Liste ordonnée <ol>

Liste d'étapes dans une recette...


<ol>
<li>Préchauffer le four</li>
<li>Cuire 40 minutes</li>
<li>Déguster</li>
</ol>
  1. Préchauffer le four
  2. Cuire 40 minutes
  3. Déguster
Essayer <ol type="I"> ...

Liste de description <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>

Liste de description <dl>

TCP
IP
Échange de paquets d'information
HTTP
Échange de messages sur le WWW
FTP
Échange de fichiers

<a>

Liens (URL) vers un documents

<a href="url"> texte </a>

<img>

Représente une image.


<img src="exemple/udem-logo.png" alt="Logo UdeM" width="320" height="130"/>
Logo Université de Montréal

À quoi sert le alt="..."?

<table>

Un tableau... » exemples/tables.html

Attention à l'accessibilité! (caption, ...)

Organisation du document

Vise l'organisation de la page web, selon les conventions et pour l'accessibilité.

Organisation du document

Blocking ou phrasing?

Le flôt d'un document se divise en blocs, et en lignes... » Flow content

Comment regrouper les éléments?

Bloc : <div>...</div>

Ligne : <span>...</span>

À quoi ça sert? » pour le style....

<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>

Attributs

Dans en XML, on utilise les attributs aussi en HTML.

Quelques classiques: et des attributs qu'on retrouve un peu partout
style="...", class="..." id="..."

» Liste des attributs....

Attribut 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

Attribut 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...

Attribut id="..."

Définit un identificateur d'élément, attribuable à un seul élément.


    <h1 id="monintro">Introduction</h1>
    
Plus tard , on pourra "coller" des styles sur ce id...

<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

Bon HTML!