Web / HTML - TD n°1

L'objectif de ce premier TD est d'aborder les premières notions du langage HTML. Il est important de noter que le HTML n'est pas un langage de programmation, mais un langage dit de balisage (ou de marquage). Des balises vont formatter le document de manière à indiquer la façon dont doit être représenté le document.

Ex 1 - Ma première page

Voici un premier exemple élémentaire d'une page HTML

<html>
  <head>
   <title>Le titre de la page</title>
  </head>
  
  <body>
  	Hello World !
  </body>
</html>

Questions :

  1. Créez un répertoire WWW dans votre répertoire home. Vous y placerez plus tard vos pages html
  2. Activez vos pages perso sur le serveur etudiant
  3. Publiez votre première page web dans un sous-répertoire td1

Ex 2 - Un paragraphe, un titre ...

Toute bonne page se doit de se munir d'un ou plusieurs titres. Pour ce faire, le langage HTML définit 6 niveaux de titre.

<h1> HTML </h1>
<h2> HTML </h2>
<h3> HTML </h3>
<h4> HTML </h4>
<h5> HTML </h5>
<h6> HTML </h6>

Le titre définit, le texte doit être placé dans un paragraphe.

<h2>La marchande</h2>
<p>Il était une fois, une marchande de foie qui vendait du foie
dans la ville de Foix. Elle m'a dit "ma foi, c'est la dernière
fois que je vends du foie dans la ville de Foix</p>
<p>Un pâtissier qui pâtissait chez un tapissier qui tapissait,
dit un jour au tapissier qui tapissait</p>

Vous remarquerez qu'à l'intérieur d'un paragraphe, les espaces, tabulations et retours chariot comptent pour un seul espace. Il faut donc explicitement spécifier ces derniers. Le retour chariot (retour à la ligne simple) est réalisé grâce à la balise <br/>.

Vous pouvez mettre en valeur des citations d'auteur en les plaçant dans un paragraphe séparé.

<p>Franz Kafka écrit sur les corneilles et le ciel :</p>

<blockquote>
Les corneilles prétendent qu'une seule corneille pourrait
détruire le ciel ;
</blockquote>

Questions :

  1. L'élément <p> possède un attribut align, listez les valeurs possibles de ce dernier.

Ex 3 - Les balises de styles

Il existe un certain nombre de balises qui permette de modifier la typographie du texte. En voici une liste non-exhaustive :

<acronym>
<b>
<big>
<blink>
<cite>
<code>
<del>
<em>
<i>
<person>
<q>
<s>
<samp>
<strong>
<strike>
<sub>
<sup>
<tt>

Questions :

  1. Associez à chaque balise son effet visuel, par exemple la balise <b> met la police en gras.
  2. Ecrivez un paragraphe de quelques lignes de manière à utilisez les balises ci-dessus.

princess PeachEx 4 - Images et liens

L'incorporation d'images peuvent rendre un site web plus attractif, en faisant attention à ne pas sombrer dans l'exces.
Les formats de fichier appropriés au web sont le GIF, le JPEG et le PNG. 

<h1>Princesse</h1>
<p><img src="princesse_bal.jpg" alt="princesse Peach"/></p>

Le référencement du fichier peut être relatif ou absolu. Par exemple :

  • src="princesse_chateau.jpg"
  • src="../princesse_chateau.jpg"
  • src="../pics/princesse_chateau.jpg"
  • src="http://sugarpix.info/pics/princesse_chateau.jpg"

Vous pouvez renseigner les dimensions de l'image à l'aide des attributs width et height

Surfez ne consiste pas à faire du surplace, d'où l'intérêt des liens hypertextes. 

<a href="index.htm">retour à l'accueil</a>

De même que les images, les liens possèdent des références relatives et absolues. De plus il est possible de fixer la fenêtre cible i.e. ouvrir le lien dans une nouvelle fenêtre par exemple :

<a href="http://www.w3c.org" target="_blank">W3C</a>

Questions :

  1. Vous voici prêt à rédiger en HTML votre CV en vous aidant de notions vu au cours de ce td. Le tout tiendra sur au moins 3 pages. Assurez vous que l'on puisse naviguer de page en page.

Ex 5 - Un peu de X dans mon HTML

Nouvelle norme du W3C, le XHTML succède au HTML avec un respect de la syntaxe par XML, plus récente et plus simple que la syntaxe définie par SGML respectée par le HTML.

Questions :

  1. En vous aidant de la documentation, reprenez votre CV et assurez-vous qu'il est conforme aux recommandations XHTML1.0 du W3C.