Les technologies du web

Par défaut

Démarrage

  • Le starter kit : tout savoir avant de créer une page web
  • La toolbox : tous les outils pour créer une page web

Le document hypertexte

  • HTML : Hypertext Markup Language = langage de description de contenu = document structuré
  • Liste complète des balises HTML4
  • Brève présentation de CSS : le contenu/l’apparence (et le comportement avec Javascript)

Anatomie d’une balise : orthographe & syntaxe

  • <balise attribut= »valeur« >élément</balise>
<a title="description" href="URL" rel="relation">élément cliquable</a>
  • Balises imbriquées
<div>
	<p>bla bla bla</p>
</div>
  • balises de bloc et balises en ligne : positionnement dans le flux, espace occupé et enfants autorisés
  • Liste complète des attributs HTML4

Exercice : du txt au web

Exercice : du mauvais web au bon web

  • Corrigez le document d’origine (source : la quiche aux cèpes de Marmitton) et récrivez en appliquant les standards et les bonnes pratiques du web :
    • téléchargez le document
    • éliminez tout ce qui précède <div class="contourMilieu hrecipe"> et tout ce qui suit <div class="boutonBas">. Enregistrez et regardez le poids du fichier
    • corrigez l’ensemble du code : refaites l’indentation, ajoutez des commentaires, supprimez le balisage inutile, transformez les <table> en <div>
    • Enregistrez et regardez le poids du fichier

De HTML 4 à HTML 5

  • de la logique de flux à la logique de contenu (Metadata, Flux, Section, Titraille, Phrases, Contenu embarqué, Contenu interactif).
HTML5 (image provenant de chez Mammouthland)

HTML5 (image provenant de chez Mammouthland)

Le prologue

Le Document Type Declaration

  • Reconnaissance de la nature du fichier par le navigateur (document HTML, CSS, PHP / Applications)
  • Application des règles de traitement (syntaxe), définies dans l’URL
  • HTML 4.01 strict, XHTML 1.0 strict et HTML 5
  • mais aussi transitional et frameset…

HTML 4.01 Strict

  • Pas de <a target>, pas d’<iframe>
  • Casse, fermeture et attributs des balises assez libres
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 strict

  • Balises fermées, minuscules et non minimalisées
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5

<!DOCTYPE html>

La validation

A lire ailleurs

Le texte

Les titres

  • de <h1> à <h6>

Les paragraphes

  • <p>
  • <br /> pour les sauts de ligne
  • <hr /> pour les lignes horizontales (avec clear: both;)

Autres balises de texte

  • abbr, acronym : abbréviations et acronymes
  • code, kbd, pre, var : code, clavier, texte préformaté et variable
  • dfn : définition
  • em et strong : emphase et superemphase
  • ins et del : insérer et suppression
  • span : étiquette
  • sub et sup : indice et exposant

A lire ailleurs

Le lien

L’hypertexte

  • le rôle du lien et l’hypertextualité
  • la balise <a> : ancre
  • lien interne/lien externe (alsa) : ancre pointant vers une id ou un name dans le document (navigation)

Avec <div id= »sommaire »>…</div>, on peut construire un lien <a href= »#sommaire »>…</a>

  • relatif/absolu (alsa) : écrire le href en fonction de la racine du document ou avec l’l’URL complète.
<a href="frere.html">si l'on veut afficher un frère</a>
<a href="soeur/enfant.html">si l'on veut afficher un neveu</a>
<a href="../père.html">si l'on veut afficher un parent</a>
<a href="../../papi.html">si l'on veut afficher le parent d'un parent</a>
La famille

La famille

  • Écrivez les liens relatifs de père.html pour atteindre tous les autres documents de la famille
  • Depuis neveu.html, pointez vers tonton.html (en fait le grand-oncle !)
  • texte/une image

Anatomie complète de la balise <a>

<a href="" lang="" hreflang="" title="" rel="" accesskey="" type="" id="" name="" style="" class="" on...="" tabindex="">élément</a>
  • href=URL
  • lang=langue de l’ancre
  • hreflang=langue du document en URL
  • title=descripteur du document en URL
  • rel=relation entre ce document et celui de l’URL
  • accesskey=accessibilité clavier
  • tabindex=position de l’ancre dans la séquence de tabulation
  • type=mimetype du document en URL
  • id=identificateur unique de l’ancre dans le document
  • name=nom de l’ancre pour les liens internes
  • style=règle CSS embarquée dans l’ancre
  • on…=événement javascript
  • élément : texte ou image

A lire ailleurs

Listes

<ul>, <ol>

  • liste non ordonnée (unordered) : liste avec type= »disc/square/circle »
  • liste ordonnée (numérotée) : avec pour attributs type= »1/A/a/i/I »
  • enfant : <li>
  • listes imbriquées :
<ul>
	<li>bla bla bla</li>
	<li>bla bla bla
		<ul>
			<li>bla bla bla</li>
		</ul>
	</li>
	<li>bla bla bla</li>
	<li>bla bla bla</li>
</ul>

<dl>

  • liste de définitions, avec pour enfants <dt> définition term et <dd> définition data
<dl>
	<dt>bla</dt>
	<dd>bla bla bla</dd>
	<dt>bla</dt>
	<dd>bla bla bla</dd>
</dl>

A lire ailleurs

Tableaux

La structure

  • <thead> En-tête, <tbody> corps et <tfoot> pied-de-page + <caption> légende
  • <th> en-têtes de ligne et de colonne
légende/titre
A B C
A B C
X
Y
Z
<table width="100%" border="0" cellspacing="0" cellpadding="0" summary="résumé">
	<caption>
		légende/titre
	</caption>
	<thead>
	<tr>
		<th>...</th>
		<th>A</th>
		<th>B</th>
		<th>C</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
		<th>...</th>
		<th>A</th>
		<th>B</th>
		<th>C</th>
	</tr>
	</tfoot>
	<tbody>
	<tr>
		<th scope="col">X</th>
		<td>...</td>
		<td>...</td>
		<td>...</td>
	</tr>
	<tr>
		<th scope="col">Y</th>
		<td>...</td>
		<td>...</td>
		<td>...</td>
	</tr>
		<tr>
		<th scope="col">Z</th>
		<td>...</td>
		<td>...</td>
		<td>...</td>
	</tr>
</table>

Un exemple

dev.multiformat.fr/demos/tableau.php

Voir aussi

Citations

et cite

<blockquote>

Pour les blocs de citation (citation longue)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit commodo orci. Aliquam erat volutpat. Praesent egestas dapibus nunc quis imperdiet. Maecenas nec orci non sapien iaculis euismod vehicula at metus. Donec condimentum sapien id enim porttitor ac ornare eros commodo. Pellentesque ligula metus, varius a aliquet et, dictum eget eros. In hac habitasse platea dictumst. Pellentesque consequat malesuada libero, id sodales ipsum egestas vehicula. Donec ornare ullamcorper gravida. Ut suscipit sapien et ante mollis condimentum. Proin non arcu libero, ut euismod sapien.

q

Pour les citations courtes : Lorem ipsum dolor sit amet.

cite

Pour la référence de la citation : Cicéron
Attention, cite est aussi un attribut de q.

<q cite="Cicéron">Lorem ipsum dolor sit amet</q>

Mise en forme

  • Typographie française
Noms français (et anglais) du caractère à générer entités HTML Résultat
Espace insécable
&nbsp;
Guillemet à chevrons ouvrant &laquo; «
Guillemet à chevrons fermant &raquo; »
Double guillemet ouvrant &ldquo;
Double guillemet fermant &rdquo;
  • code CSS pour la balise <q>
q {Quotes: "«" "»" '"' '"';}
q:before {content: open-quote; }
q:after {content: close-quote; }

Exercice

A lire ailleurs

CSS3

Par défaut

Les effets de bordure

Les effets de transparence

Les sélecteurs

  • Les sélecteurs d’attributs : [att=val] : th[scope=row]sélectionne les <th> en tête de ligne (s’ils ont été spécifiés en HTML/Tableau)
  • les pseudos-classes dynamiques du genre :link, :visited, :hover, :active et :focus (pour les balises de lien par exemple)
  • les pseudos-classes d’état d’élément d’interface avec :checked (pour les checkbox des formulaires HTML)
  • les pseudo-classes structurelles avec :nth-child(odd|even), :first-child ou :last-child
  • les pseudo-éléments avec ::first-line et ::first-letter
  • La liste des sélecteurs en CSS3 (voir notamment les combinateurs et le calcul de la spécificité d’un sélecteur)

Tableaux (CSS)

Par défaut

Rappel

  • Les tableaux en html : table, thead, tfoot, tr, th, td et caption
  • La balise <table> possède les attributs width, border, cellpadding et cellspacing : à remplacer en CSS (sauf border si désactivation CSS)
  • Le rendu CSS par défaut des <th> est gras-centré

Bonnes pratiques

  • Lisibilité : distinguer les entêtes de ligne et de colonne

* {margin:0; padding:0; font-size: 1em; font-weight: normal; text-align: left;}
table {border-collapse: collapse;margin: auto; width: 75%;caption-side: bottom;border: medium solid black;}
thead th, tfoot th {background: #CCC;}
tbody th {background: #C6F7F9;}
tbody tr {border-bottom: 1px solid #f99;}
th, td, caption {padding: .25em; text-align: center;}
th, caption {font-weight: bold; font-variant: small-caps}
caption {background: #F99;margin-top: .5em}
  • un reset pour la démonstration
  • border-collapse permet de fusionner les bordures de cellules adjacentes.
  • caption-side permet d’afficher le caption en bas du tableau (mais en termes d’accessibilité, il sera lu en premier)
  • au besoin, les <td> peuvent être alignés verticalement avec vertical-align : baseline | top | middle | bottom;
  • Ici, les lignes du corps de tableau sont signalées par un #f99;. Pour les longs tableaux, il serait souhaitable de distinguer les lignes paires et impaires. C’est faisable manuellement, mais Javascript permet d’automatiser le travail.

A lire ailleurs

Liens (CSS)

Par défaut

Le sélecteur a peut être complété de la manière suivante (guide mnémotechnique LVHA = LoVe HAte)

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: red;}

Il est possible de rajouter des sélecteurs d’attributs

a[rel=tag]:after {content: url(tag.png);}

Listes (CSS)

Par défaut

Rendu par défaut

  • La puce est en position: outside dans la boite de liste <ul> ou <ol>. Reset possible :
li {list-style-position: inside;}

Changer la puce

  • Avec les éléments visuels standards
ul li {list-style-type: square | disc | circle;}
ol li {list-style-type: decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin; }
  • Avec des images
ul li {list-style-image: url(relative ou absolue);}
  • En raccourci
li {list-style: type | position | image; }

Contenu généré