Conception de sites web dynamiques

TP1 - Premiers documents HTML

Ce TP est à terminer 48h avant votre prochaine séance de TP. La version en ligne ne doit pas être modifiée après cette date limite.

la base

Nous allons commencer par créer un document html très petit, et nous l'enrichirons au fur et à mesure. Lancez d'abord un éditeur de texte, et recopiez le texte suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="description" content="Ma page web" />
<meta name="keywords" content="HTML5,CSS3,JavaScript,PHP" />
<meta name="author" content="Gaël MAHE" /> <!--j'ai oublié de modifier le nom de l'auteur --> <title> Premier essai </title> </head> <body> <p> Bonjour tout le monde... <!-- je ne sais pas trop quoi écrire alors je fais plein de commentaires qui ne vont pas s'afficher --> </p> <hr /> </body> </html>

Créez un sous-répertoire dans le répertoire public_html pour ce TP (~/public_html/TP1/Ex1.html), et enregistrez ce fichier sous le nom Ex1.html. À l'aide d'un navigateur (konqueror ou firefox, par exemple), regardez votre page.

Vérifier la validité de votre code en utilisant le site web du W3C.

Nous allons modifier cette page progressivement (n'hésitez pas à faire d'autres changements que ceux proposés, en vous en inspirant), et il faudra vérifier à chaque nouvelle étape à quoi ressemble votre page. A chaque exercice, enregistrez votre fichier sous un nom différent ( Ex2.html, Ex3.html... )

Titres

Changeons un peu le texte de notre page, pour quelque chose comme :

<h1>Voici un titre</h1>  
<h2>Maintenant un sous-titre</h2>  
<h3>Et on peut continuer</h3>  
<h4>La profondeur est limitée</h4> 
<h5>Pénultième</h5>  
<p>Un petit texte pour introduire  cette partie, elle le mérite bien, et puis il serait dommage de se  priver. </p> 
<h6>Un vraiment petit paragraphe</h6>  
<p> Et un titre est un changement de paragraphe implicite.</p>  

Ajoutez ces lignes dans la page précédente, et vérifier l'affichage. Avez-vous besoin d'ajouter la balise <br> après une balise d'entête <h1-6> ou un paragraphe <p> ? Pourquoi ?

La barre horizontale

On a depuis le début une barre en bas de notre page, représentée par <hr /> . On va la modifier un peu. Corriger les erreurs dans le code suivant :

<p>Barre horizontale simple, </p>  
<hr />    
<p>avec une longeur relative limitée,</p>  
<hr style="width:50%;" />    
<p>avec une longueur absolue,  
<hr style="width:100%;" />   
<p>avec d'autres positions dans la page,  
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>
<hr style="width:10%;size:10px;" />
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>

N'oubliez pas de changer la taille de votre fenêtre pour voir comment évoluent les traits. Changez aussi la taille des caractères (dans le menu affichage, ou en appuyant sur CONTROL et + ou -.

Énumérations

Copier et compléter ce code dans la page html:

<ul>   
	<li> <b> Le texte peut être en gras, </b> </li> 
	<li> <em> Les italiques mettent le texte en valeur ! </em> </li>   
	<li> Et enfin, on peut écrire à la machine du même nom, </li>     
	<li> un style souligné à éviter : ici, on ne peut pas cliquer,</li>   
	<li> et on peut même rayer du texte  </li>  
	<li> <big> On peut écrire de gros caractères, </big> <small> ou de petits </small> </li>     
	<li> Et enfin, on peut utiliser des exposants comme dans 1<sup>er</sup> ou des indices, u<sub>n+1</sub> = u<sub>n</sub>+1 </li>   
</ul>  
<ul>   
	<li> Du texte violet, </li>  
   <li> du texte, du texte plus gros (en relatif), </li>   
   <li> du texte, taille absolue,  </li>     
</ul>  

Dans le code précédent, on vient de créer une liste. Que se passe-t-il si on remplace ul par ol ?

Créez une liste, dont le premier élément commencera par le mot « Les peintres », suivi d'une liste numérotée avec dans l'ordre vos trois peintres favoris. Le second élément sera la même chose avec « Les musiciens ». Vous ferez de plus suivre le nom de votre musicien préféré d'une liste numérotée de ses trois meilleures chansons. Vous pourrez ensuite essayer de remplacer un <ol> par <ol start="42"> et la deuxième <li> par <li start="100">.

Liens

Faites une page correspondant à cet article pdf, en mettant en forme (en html) ce texte , sans les notes. Puis faites-en un vrai hypertexte :

Vérification de la validité d'un document HTML

Normalement, le document HTML que vous êtes en train de lire est un document valide au sens de la norme proposée par le consortium W3C. Nous allons utiliser l'extension WebDeveloper du navigateur firefox pour le vérifier.

Dans un premier temps, suivre les étapes suivantes pour installer cette extension :

  1. Ouvrir le menu Outils.
  2. Sélectionner l'option Extensions.
  3. Cliquer sur le liens Obtenir d'autres Extensions. Ceci conduit au site de téléchargement mozilla updates.
  4. Dans le menu en partie gauche sélectionner Developer Tools.
  5. Chercher Web Developer.
  6. Cliquer sur Install.
  7. Cliquer sur Installer maintenant.
  8. Fermer Firefox (ou redémarrer firefox).

Web Developper est maintenant disponible dans le menu Outils de Firefox.

Demander la validation du document avec le menu Outils > Valider le HTML local

L'autre solution sera d'aller sur le site: validator.w3.org et d'uploader votre fichier, ou d'entrer le lien de votre page.

Vérifiez la validité du document sur la page affichée

Écrire votre CV en HTML avec un éditeur de texte

Réalisez une page CV.html simple, sans feuille de style, avec les caractéristiques suivantes :

Enfin, validez votre page.
Gaël MAHE, Arnaud MEUNIER, Azedine MANI