TP première page web

Web 03

Ma page web

  1. Ouvrir le logiciel Notepad
  2. Ouvrir la page web précédemment construite avec Notepad.
  3. Ouvrir la page web avec Firefox.
À retenir

Dans un page web, on peut ajouter de nombreux blocs:

  • des paragraphes,
  • des titres,
  • des listes,
  • des images,
  • des liens hypertextes.

La page web déjà construite contenait ce code:

<html>
    <head>
        <title>le titre de ma page</title>
    </head>
    <body>
        <p>Mon premier contenu</p>
    </body>
</html>
  1. Ajouter plusieurs paragraphes. Enregistrer et observer le résultat dans Firefox.
<html>
    <head>
        <title>le titre de ma page</title>
    </head>
    <body>
        <p>Mon premier contenu</p>
        <p>blablabla</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </body>
</html>
Observation

Le navigateur saute une ligne entre chaque paragraphe.

Titre

À retenir

Pour ajouter un titre, il faut utiliser les balises <h1> jusqu’à <h6>. On peut d’autres créer 6 niveaux de titres et sous-titres.

  1. Créer deux titres de niveau h1 et deux titres de niveaux h2.
<html>
    <head>
        <title>le titre de ma page</title>
    </head>
    <body>
        <h1>Premier chapitre</h1>
        <p>Mon premier contenu</p>
        <h1>Second chapitre</h1>
        <h2>Premier sous-titre</h2>
        <p>blablabla</p>
        <h2>Second sous-titre</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </body>
</html>

Liste

À retenir

On crée une liste avec le bloc ul. Chaque item est ajouté avec le bloc li.

  1. Ajouter le code suivant n’importe où dans le body
<ul>
    <li>premier point</li>
    <li>deuxième point</li>
    <li>troisième point</li>
</ul>
À retenir

Il faut veiller à ne pas oublier les balises fermantes (,)

Image

À retenir

Pour illustrer la page on peut ajouter une image avec la balise img.

Il faut d’abord posséder une image dans le même dossier que la page web. Le nom de l’image ne doit pas contenir d’espace ni d’accent.

  1. Télécharger une image sur le web et la déposer dans le même dossier que la page web.

image lee image lee L’image est dans le même dossier que la page du professeur.

image lee image lee L’image se nomme lee et est de type jpg.

À retenir

La balise ouvrante img n’a pas de balise fermante. Elle possède des attributs:

  • src: (obligatoire) adresse de l’image,
  • alt: (facultatif) texte alternatif.

Le code suivant affiche l’image lee.jpg qui est placée dans le même dossier que la page web. Si l’image ne s’affiche pas (problème de réseau, mauvaise adresse…) le texte alternatif s’affiche.

<img src="lee.jpg" alt="Portrait de Tim Berners-Lee">
  1. Adapter le code précédent pour ajouter l’image téléchargée dans la page web personnelle. Il faut adapter le nom et le type de l’image.
Observation

Pour l’instant, selon l’image téléchargée, elle peut s’afficher en très grand ou très petit. Ce comportement est normal: nous verrons dans la prochaine séance, comment rendre l’affichage plus agréable.

Lien hypertexte

Une page web sans lien vers d’autres pages n’a pas grand intérêt. La balise a est une des plus importantes du langage html.

À retenir

Le code suivant permet de créer un lien vers la page du site du lycée.

<a href="https://lyceejaydebeaufort.fr/"> Page de Jay </a>

L’attribut href contient l’adresse de la page à visiter.

  1. Ajouter le code précédent dans la page web. Observer le résultat dans Firefox.

On peut ajouter un lien dans un paragraphe:

<p> Voici le lien vers <a href="https://lyceejaydebeaufort.fr/"> le site de mon lycée. </a> N'hésitez pas à le visiter.</p>

Pour ouvrir la page dans un nouvel onglet, il faut utiliser l’attribut target:

<p> Voici le lien vers <a href="https://lyceejaydebeaufort.fr/" target=_blank > le site de mon lycée. </a> N'hésitez pas à le visiter.</p>

Page orientation

Modifier la page web pour présenter le projet d’orientation. La page sera décomposée en trois parties:

  • métier(s) envisagé(s) (ou catégorie)
  • études post-bac à réaliser
  • spécialités (ou filière technologique) à choisir

Il faudra utiliser toutes les balises html précédentes au moins une fois.