Retour au sommaire du cours Techniques de Programmation pour Internet

Techniques de Programmation pour Internet
Cours Année Spéciale ENSIMAG 2006 - 2007
Séance 3 - 27 janvier 2006 - TP : Edition d'un page de présentation en HTML
James L. Crowley et Jean-Marie Vallet

I. Squelette XHTML

1) Allez au répertoire ~/www et utiliser votre editeur de texte préféré de créez un fichier et entrez les lignes suivantes :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <title>
      ***votre_projet***
    </title>
  </head>
  <body>
    <h1>
      ***le nom de votre projet***
    </h1>
    <hr />
  </body>
</html>

Sauvegardez le fichier dans votre répertoire ~/www avec le nom :  index.html. Démarrer votre navigateur préféré. Aller à la page: http://ensisun:80/**votre_login**/index.html

II. Ajout d'éléments

2) Entrez dans le fichier une brève description du produit ou service à vendre, suivie par les lignes :

<h1>Notre Offre</h1>
<h2>Toasters R US</h2>

Complétez chaque rubrique avec du texte. Soyez libres d'ajouter d'autre information sur vos produits. Regardez le résultat avec votre navigateur.

3) Creez un repertoire http://ensisun:80/**votre_login**/img. Copiez l'image Sunbeam-T35.jpeg du serveur de cours
http://www-prima.inrialpes.fr/Prima/Homepages/jlc/Courses/2006/ASI-TPI/img/Sunbeam-T35.jpeg

Placez cette image dans votre répertoire /img.

4) Ajoutez les lignes :

<div>
  <img alt="Image of the Classic Sunbeam Toaster"
     src="img/Sunmeam-T35.jpeg" />
  The Classic Sunbeam T35 Toaster
</div>

apres le balise <hr />

Regardez le résultat avec votre navigateur. Plusieurs d'autres images sont disponible à :

http://www-prima.inrialpes.fr/Prima/Homepages/jlc/Courses/2006/ASI-TPI/img/

5) Ajoutez un href pour envoyer l'email. Ajoutez les lignes :

<p>
  Nous Contacter: send <a href="mailto:**votre_login**@ensimag.fr">mail</a> to **votre_login**@ensimag.fr
</p>

ou "**votre_login**" est votre login.

Regardez le résultat avec votre navigateur. Cliquez sur "mail".

6) Créez un lien vers la page de quelqu'un d'autre dans le cours, ajoutez les lignes :

<p>
  <a href="http://ensisun:80/**login_de_votre_ami**">
    Voir le site d'un  ami
  </a>
</p>

Regardez le résultat avec votre navigateur.