Première page en html – TP noté

1) On observe des pages web, comme celle-ci, en observant leur « code source » à l’aide d’un « Ctrl-U ».

2) Cours : une page html (HyperText Markup Language) a une structure de base qui ressemble à celle-ci :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>

C’est un langage de balises.

3) Lire le tutoriel de Mozilla sur les balises en cliquant ici

4) Créer une page web, à l’aide d’un éditeur de texte. Je suggère Notepad++ sous Windows.

Copier la structure de base

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>

et enregistrer sous « index.html » par exemple dans son dossier « devoirs » dans le dossier « classe » sur le réseau du lycée. Dans type de fichier, choisir évidemment HyperText Markup Language File .html !

Modifier le « Titre de la page » dans la balise

<title>Titre de la page</title>

et observer le changement en ouvrant cette page dans un navigateur. On préférera Mozilla Firefox à Internet Explorer !

5) Agrémenter cette page web, à l’aide de l’éditeur de texte Notepad++.

On utilisera le tutoriel de Mozilla sur les balises (cliquer ici) pour

  1. Rajouter des paragraphes et du texte à l’intérieur des paragraphes en le mettant en forme avec des passages en gras, en italique
  2. Rajouter un lien pointant vers cette page (celle que vous êtes en train de lire)
  3. Rajouter une image
  4. Rajouter une liste non ordonnée

6) Fin des tests ! Le TP lui même :

  1. Créer une page film.html dans le dossier « devoirs » dans le dossier « classe » sur le réseau du lycée.
  2. Capturer ou enregistrer une des images du film Imitation Game vu en janvier dernier. La sauvegarder en .png dans le même dossier que film.html sous image.png
  3. Ajouter cette image dans un paragraphe dans votre page film.html
  4. Expliquer ce que vous avez aimé dans une liste non ordonnée
  5. Mettre en forme !

2 réflexions au sujet de « Première page en html – TP noté »

  1. Vous allez voir ! Le html c’est trop cool !
    Bon, vous ne ferez sûrement pas de javascript ou de php

    Mais une fois qu’on a tous ces outils, c’est vraiment trop cool !

    (Message pour monsieur Marchand : je passerai avec quelques anciens un vendredi matin, un jour, voir les SI. Est-il possible de venir vous voir le vendredi matin, lors d’un cours d’isn, icn ou informatique en général ?)

    Bonne journée
    Lucas

N'hésitez-pas à poser une question, ou faire avancer le schmilblick

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.