Site de Jean-Michel RICHER

Maître de Conférences en Informatique à l'Université d'Angers

Ce site est en cours de reconstruction certains liens peuvent ne pas fonctionner ou certaines images peuvent ne pas s'afficher.


stacks
home  accueil cours counter_1   Réseau counter_2   (X)HTML counter_3   CSS counter_4   CSS Extra counter_4   Travaux pratiques counter_4   Sitographie

1. Développement Web - TP1

Résultat attendu :

Résultat TP1
premiere.html

Notez que la police d'affichage
a été modifiée en Verdana

1.1. Titres et paragraphes

On désire créer une première page qui comprend des titres et des paragraphes. Cette page sera nommée premiere.html.

1.1.1. Entête (head)

L'entête de la page doit définir les éléments suivants :

  • l'encodage des caractères en utf-8 (balise meta)
  • le nom de l'auteur de la page (balise meta)
  • une description de la page (balise meta) : "ma première page web !"
  • le titre de la page (balise title) : Première page

1.1.2. Contenu (body)

Le contenu de la page est à son tour composé des éléments suivants :

  1. plusieurs titres (h1 à h4) :
    • un titre h1 dont le texte est "Université d'Angers"
    • un titre h2 dont le texte est "Faculté des Sciences"
    • un titre h3 dont le texte est "Département Informatique"
    • un titre h4 dont le texte est "Première année L1"
    • un titre h5 dont le texte est "Développement Web"
    • un titre h6 dont le texte est "Etudiants"
  2. un paragraphe (p) qui contient le nom de quatre étudiants : "Marc Decafer, Jean Tambien, Paul Hochon, Lara Mènpa"
  3. un titre h2 dont le texte est "Fluctuat nec mergitur", devise de la ville de Pairs, dont la traduction serait "Il est battu par les flots, mais ne sombre pas"
  4. cinq paragraphes (p) qui contiendront le texte issu de www.lipsum.com :
    • vous n'avez qu'à cliquer sur le bouton afin d'obtenir ces textes
    • puis les copier dans votre fichier
    • et encadrer chacun des paragraphes par des balises <p> </p>

Une fois la page créée :

  • vérifier qu'elle est valide : http://validator.w3.org/
  • corriger votre page si celle-ci contient des erreurs
  • lorsqu'il n'y a plus d'erreur, la transférer vers le serveur web starwars (cf connexion)

1.2. Modification des paragraphes

Dans le texte de votre page, appliquer les modifications suivantes :

  • mettre en gras chacun des mots lorem
  • mettre en italique chacun des mots ipsum
  • souligner chacun des mots sit
  • barrer et mettre en gras chacun des mots nunc

Une fois la page modifiée :

  • vérifier qu'elle est valide : http://validator.w3.org/
  • corriger votre page si celle-ci contient des erreurs
  • lorsqu'il n'y a plus d'erreur, la transférer vers le serveur web starwars