Ignorer la navigation

Partie 5: HTML

Partie N° 1: soit le site internet suivant : index.html

 

<!DOCTYPE html>
<html lang="fr">
  <head>
      <meta charset="utf-8" />
      <title>Page 1 de mon site</title>
  </head>
  <body>
  <p>
    <H1> Bonjour et bienvenue sur la page 1 de mon site</H1>
    <br/>
    <br/>
    <H2>Cette année je suis en STI2D</H2>
    <br/>
    <H3>Voici les disciplines enseignées en STI2D:</H3>
    <ul>
        <li>Français</li>
        <li>Maths</li>
        <li>Sciences</li>
        <li>IT</li>
        <li>I2D</li>
        <li>EPS</li>
       <li>Langues</li>
       <li>Histoire</li>
    </ul>
    <br/>
    <H2> <a href="page2.html">Allez sur la page 2 de mon site?</a> </H2>
  </p>
</body>
</html>


1. Expliquer le rôle, l'utilisation et le résultat de toutes les balises utilisées dans ce programme.

  

On peut lire maintenant dans la page "index.html" la ligne suivante :

<img src="logo_tp_BQ.png" alt="logo" align="center" border =0 width=600 height=292"/>

2. Expliquer en détail et à partir de l'exemple précédent, le rôle et les paramètres de cette balise "img".

3. Proposez le code à écrire (en petite taille) pour rajouter en bas de la page un lien vers le site internet du lycée.

 

 

 
II. Le CSS (Cascading Style Sheets)

 

1. Expliquer le rôle et l'intérêt du fichier CSS.


Soit la page "index.html" suivante :

<!DOCTYPE html>

<html lang="fr">
<head>
   <meta charset="utf-8" />
   <title>Page 1 de mon site</title>
   <link rel="stylesheet" href="style1.css" />
</head>
<body>
<p>
   <H1 class="titre_principal"> Bonjour et bienvenue sur la page 1 de mon site</H1>
   <br/>
   <br/>
   <H2>Cette année je suis en <span class="titre_secondaire">STI2D</span> option SIN?EE?ITEC?AC?</H2>
   <br/>
   <H3>Voici les disciplines enseignées en STI2D:</H3>
   <ul class="titre2">
      <li>Français</li>
      <li>Maths</li>
   </ul>
   <br/>
   </p>
</body>
</html>


et la page "style1.css" associée :

.titre_principal
{
  color: RED;
  text-align: center;
}

.titre_secondaire
{
  color: RED;
  font-size: 2.5em;
  text-align: center;
}

.titre2
{
  color: #00FF00;
  text-align: center;
}

H3
{
  font-size: 2em;
  text-align: center;
}

H2
{
  font-size: 2.5em;
  color: BLACK;
  text-align: center;
}

2. Décrire le résultat à l'écran de l'affichage de la page "index.html" précédente en expliquant, en détail, ce qui se passe pour chaque ligne affichée.

3. Sans fichier "style1.css" quel aurait été le résultat à l'écran de cette page "index.html" ?

4. Proposez le code à écrire pour avoir le texte "Voici les disciplines enseignées en STI2D:" en couleur violet

Créé avec eXeLearning (Nouvelle fenêtre)