Initiation à l’intégration XHTML/CSS - séance 2

sept
24
2009

Seconde séance de cours, dans le cadre de la formation proposée aux étudiants SRC Hunan, dispensée par l’IUT Michel de Montaigne, Bordeaux III.

Sources

http://www.la-grange.net/w3c/html4.01/cover.html

Lexique des étudiants de SRC Hunan

Introduction

Outils

Avez vous téléchargé le navigateur Mozilla Firefox ?
- Si non : cliquez sur ce lien.
- Si oui : ouvrez le navigateur et créer un raccourci vers : http://www.e-tropisme.fr/category/cours-et-tutoriels.
Avez vous téléchargé l’outil Firebug ?
- Si non : cliquez sur ce lien.
- Pour les possesseurs de Mac, téléchargez Notepad pour éditer le code XHTML/CSS

Méthodologie

Créer un dossier sur vos ordinateurs intitulé “internet-cours“.
Créer un sous dossier par séance de cours, exemple “seance-2“, vous y enregistrerez les différents documents utilisés ou récupérés lors de chaque cours.

Lexique

Les 7 définitions que vous deviez proposé correspondaient aux termes suivants :

ergonomie
intégration
initiation
attribut
référencement
balise
hyperlink

Points clés pour apporter une bonne définition

bien comprendre la définition,
reformuler la définition,
proposer des liens hypertextes pour plus d’informations.

Balises de structuration de textes

Principales balises xhtml de structuration de textes
Nom de la balise	description	positionnement	exemple
<p> </p>	balise paragraphe	bloc	<p>Bonjour, comment allez-vous ?</p>
<em> </em>	indique la mise en exergue	en ligne	<em> texte mis en exergue </em>
<strong> </strong>	Indique une mise en exergue plus forte.	en ligne	<strong>texte mis en exergue</strong>
<code> </code>	Désigne un fragment de code informatique.	en ligne	<code>code à communiquer</code>
<cite> </cite>	Contient un extrait ou une référence vers une autre source	en ligne	<cite>citation</cite>
<acronym> </acronym>	Indique un acronyme (par exemple, « radar », « LAN », etc.).	en ligne	<acronym>ANPE</acronym>
<abbr> </abbr>	Indique une forme abrégée (par exemple, « WWW », « HTTP », « i.e. », etc.).	en ligne
<span> </span>	permet d’encadrer un fragment de texte pour lui donner un attribut	en ligne	<span>coucou</span>
<blocquote> </blocquote>	permet de distinguer une citation	bloc	<blocquote>citation</blocquote>
<ul><li> </li></ul>	liste d’items non ordonnés	bloc	<ul><li>démarrer</li><li>avancer</li><li>reculer</li></ul>
<ol><li> </li></ol>	liste d’items ordonnés	bloc	<ol><li>démarrer</li><li>avancer</li><li>reculer</li></ol>
<br/>	saut de ligne au sein d’un paragraphe	en ligne	<p>Bonjour,<br/>comment allez-vous ?</p>

Principaux attributs associés aux balises de structuration de textes
attributs			exemple
nom	valeur	description	exemple
id, class	identifiants internes au document	permet d’associer des styles aux éléments portant l’id ou la class	class=”texte-bleu”
lang	en, fr,…	indication de la langue	lang=”en”
title	titre de l’élément	titre de l’élément	title=”titre de votre choix”
style	toutes les propriétés des styles	information de style en ligne	style=”width:200px”
clear	left, right, both	gère l’aligement et les objets flottants	clear=”both”

Les tableaux

Les tableaux sont construits au sein de la balise <table></table>, la balise <table> est un élément de type bloc. La balise <table></table> contient les balises suivantes :

<caption></caption> : contient le titre du tableau
<tr></tr> désigne les lignes du tableau
<td></td> désigne les cellules, ces balises sont obligatoirement contenus dans des <tr></tr>
<th></th> désigne les en-têtes des cellules, ces balises sont obligatoirement contenus dans des <tr></tr>

Exemple de code source d’un tableau :

<table border="1">
<caption>
    titre du tableau
  </caption>
<tbody>
<tr>
<th rowspan="2"></th>
<th colspan="2">Moyenne</th>
<th rowspan="2">Yeux
rouges</th>
</tr>
<tr>
<th>hauteur</th>
<th>poids</th>
</tr>
<tr>
<th>Mâles</th>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<th>Femelles</th>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</tbody></table>

titre du tableau
	Moyenne		Yeux rouges
	hauteur	poids	Yeux rouges
Mâles	1.9	0.003	40%
Femelles	1.7	0.002	43%

Principaux attributs associés aux balises de tableaux
attributs			exemple
nom	valeur	description	exemple
id, class	identifiants internes au document	permet d’associer des styles aux éléments portant l’id ou la class	class=”texte-bleu”
lang	en, fr,…	indication de la langue	lang=”en”
title	titre de l’élément	titre de l’élément	title=”titre de votre choix”
style	toutes les propriétés des styles	information de style en ligne	style=”width:200px”

Ces attributs peuvent être portés par les balises <td>, <th>, <tr>, <table>.

Les liens

Le comportement par défaut associé au lien est de ramener une autre ressource Web. Ce comportement est communément et implicitement obtenu par la sélection du lien (par exemple, un clic de souris, une entrée au clavier, etc..
L’extrait HTML suivant contient deux liens, l’un dont l’ancre destination est un document HTML nommé “chapitre2.html” et l’autre une image au format PNG nommée “foret.png” :

1 2	...un texte... Plus de détails dans le <a href="chapitre2.html">chapitre deux</a>. Voir aussi cette <a href="../images/foret.png">carte de la forêt enchantée.</a>

Principaux attributs associés aux hyperliens
attributs			exemple
nom	valeur	description	exemple
id, class	identifiants internes au document	permet d’associer des styles aux éléments portant l’id ou la class	class=”texte-bleu”
lang	en, fr,…	indication de la langue	lang=”en”
title	titre de l’élément	titre de l’élément	title=”titre de votre choix”
style	toutes les propriétés des styles	information de style en ligne	style=”width:200px”
name	Cet attribut nomme l’ancre courante de sorte que celle-ci puisse être la destination d’un autre lien. La valeur de cet attribut doit être un nom d’ancre unique. La portée de ce nom a pour cadre le document courant. Remarquez que cet attribut partage le même espace de nom que l’attribut	valeur	name=”titre1″
href	Cet attribut spécifie la localisation d’une ressource Web, définissant ainsi un lien entre l’élément courant (l’ancre source) et l’ancre destination définie par cet attribut.	lien vers une page web, un document	href=”http://www.google.fr”

Les images

Les fonctionnalités multimédias de HTML permettent aux auteurs d’inclure dans leurs pages des images, des applets (des programmes qui sont automatiquement chargés puis lancés sur la machine de l’utilisateur), des séquences vidéo et d’autres documents HTML.

L’appel des images se fait par l’utilisation de la balise <img />.

Principaux attributs associés aux images
attributs			exemple
nom	valeur	description	exemple
src	Cet attribut spécifie la localisation de la ressource image. Les formats d’image largement répandus comprennent, par exemple, GIF, JPEG et PNG.		<img src=”http://www.google.fr/intl/fr_fr/images/logo.gif” alt=”Google”/>
alt	texte	description/traduction de l’image	<img src=”http://www.google.fr/intl/fr_fr/images/logo.gif” alt=”Google”/>
title	titre de l’élément	titre de l’élément	title=”titre de votre choix”
style	toutes les propriétés des styles	information de style en ligne	style=”width:200px”

Exercices d’application

Exercices n°1 et n°2
Correction de l’exercice n°1 (voir la page corrigée)
Correction de l’exercice n°2 (voir la page corrigée)

Suite du cours : Séance 3

Et dans le même esprit...

[ e-tropisme a été créé sous Wordpress ]

Nous recommandons : Re-access.fr - Natural-net.fr - Formation-accessibilite-internet.fr - Développeur Front-end
Tissus, laines et mercerie