TP1 : Pages web en HTML
Bases de données et Web
TP1 : Pages web en HTML
Exercice 1 : pour commencer
· Dans votre partition, créer un répertoire nommé BDWebTP
· Dans ce répertoire, créer un nouveau répertoire nommé "TP1"
· Dans ce répertoire, créer un nouveau fichier que vous nommerez index.html
· Dans ce fichier, recopiez les lignes suivantes :
<html>
<head>
<title> Ma premiere page web </title>
</head>
<body>
</body>
</html>
· Pour visualiser le résultat, allez dans votre navigateur web, et choisissez dans le menu : fichier-> ouvrir et sélectionnez votre fichier index.html.
· Observez et commentez le résultat.
· Ajoutez du texte (une ou deux lignes pour expliquer ce que vous êtes en train de faire) maintenant entre les balises <body> et </body>
· Rechargez votre page dans le navigateur et observez le résultat.
· Entre les balises <body> et </body> de votre fichier index.html,
- Mettez une partie du texte entre <b> et </b> testez les effets des balises en rechargeant la page
- Idem entre <i> et </i>
- Idem entre <u> et </u>
- Idem entre <p> et </p>
- Idem entre <h1> et </h1> (changez ensuite avec h2, h3, h4 et h5)
Exercice 2 : balises
· Dans le dossier "TP1", vous allez créer un nouveau sous-dossier que vous nommerez "site".
· En vous basant sur l'exercice 1, vous créerez 3 pages HTML que vous nommerez :
- index.html
- presentation.html
- oiseaux.html
· Pour chacune des pages, vous organiserez le contenu de cette manière en exploitant les balises <h1> et <h2> pour les titres et les sous-titres
· Reprenez les pages HTML précédentes et modifiez les titres et les textes en y insérant des balises des mises en forme (testez les mises en forme proposées ci-dessus).
· Pensez à enregistrer régulièrement votre travail. Visualisez le résultat dans votre navigateur.
Exercice 3 : mini site web en HTML
· Le but de cet exercice de synthèse est de faire un mini-site composé de 3 pages (que vous devez écrire en utilisant le langage HTML :
- La première page de ce site est la page d'accueil (accueil.html). Elle présente quelques informations générales.
Les informations sont extraites de
http://sites.google.com/site/etiennenophilosvie/home/classificationoisseau
- La seconde page correspond à la liste des grands ordres des oiseaux (presentation.html)
- La troisième page correspond à une galerie de photos d'oiseaux (oiseaux.html).
Les images peuvent être extraites de
http://www.oiseaux.net/photos/robert.hendrick/bec-croise.des.sapins.5.html
- Les images correspondantes sont dans le dossier imagesSiteTP1
Pour plus de clarté, voici quelques indications (en orange sur les images ci-dessous)
