Aller au contenu principal

Création d'une page HTML

🎯 Objectif​

Ces travaux pratiques ont pour objectif de revoir les notions de HTML/CSS vues en SNT.

📁 1. Organiser son espace de travail​

Afin de ne pas mélanger vos productions entre les différentes matières, vous allez créer des dossiers afin de rester organisé.

  1. Placer vous dans votre Zone personnelle (ou le répertoire de votre choix sur votre PC portable)
  2. Y créer le dossier NSI
  3. Entrer dans le dossier NSI et y créer le dossier html

🗒 2. Création du fichier HTML​

Créer un fichier nommé index.html et copier/coller le code HTML suivant :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de ma page</title>
    </head>
    <body>
        <h1>Titre 1</h1>
        Ceci est ma première page HTML.
    
        <h1>Titre 2</h1>
        Ceci est ma première page HTML.
    </body>
</html>
Tester

Ouvrir le fichier index.html dans un navigateur Web

🗒 3. Création d'un fichier CSS​

Créer un fichier nommé style.css et copier/coller le code HTML suivant :

/*
body {
    background: green;
}
*/

h1 {
    color: red;
    text-decoration: underline;
}

Modifier le fichier index.html en ajoutant la ligne ci-dessous entre les balises <head></head> :

<link rel="stylesheet" href="style.css">
Tester
  • Qu'observez-vous comme changement au niveau de la page HTML ?
  • Décommenter la définition de style de la balise <body>. Qu'observez-vous comme changement au niveau de la page HTML ?

🗒 4. Tester les balises​

Tester les balises suivantes :

BaliseFonction
<h1>...</h1>Titre niveau 1
<h2>...</h2>Titre niveau 2 (sous-titre)
<h3>...</h3>Titre niveau 3 (sous-sous-titre)
<p>...</p>Paragraphe
<strong>...</strong>Gras
<em>...</em>Italique
<img src="url_image">Image
<a href="url">...</a>Lien hypertexte

📚 5. Ressources​

Quelques ressources pour aller plus loin :