Académie de
Versailles FICHE ACTIVITÉ 2 SNT
Web : HTML/CSS
Le HTML et le CSS. Ce ne sont pas des langages de programmation mais plutôt des langages de description (langage de balisage).
Le HTML gère et organise le contenu. Le CSS gère l'apparence de la page web.
Un hypertexte est un texte augmenté de renvois automatiques à des textes, des images ou des sons.
HTML et CSS
Tous les fichiers utilisés et le dossier image doivent être dans le même dossier, pour être accessibles.
Q1/ Modifier le titre de la page.
Modifier <h2>Le triathlon</h2> par <h1>Le triathlon</h1>
Qu’observez-vous sur la page web ?
« Le triathlon » est en plus gros
Q2/ Modifier le fichier pour que la distance standard du cyclisme soit de 40km.
Dans <th scope="row">Distance standard</th>
<td>1 500 m</td>
<td>2000 km</td>
<td>10 km</td>
Mettre 40 à la place de 2000
Q3/ Comment mettre des mots en gras ? Mettre en gras les mots Swim, bike , run
<b>Swim, bike, run</b>
Q4/ Quelle est la balise qui permet d’insérer une image ?
<img>
CSS
Nous allons maintenant nous intéresser à la forme.
Ouvrir le fichier TP_style.css. Dans le fichier TP_index.html, ajouter ligne 6 (en dessous de la balise
<meta charset="utf-8">) la ligne suivante :
<link rel="stylesheet" href="TP_style.css">
Q5/ Rafraîchir la page web. Qu’observez-vous ? La mise en page a changé
Q6/ Modifier le fichier TP_style.css pour que les titres des balises <h1> soient bleus MidnightBlue.
Dans #header h1 {
margin-bottom: 0px;
font-size: 28px;
font-weight: bold;
color: Brown mettre MidnightBlue à la place de Brown
Q7/ Modifier le fichier TP_style.css pour que le paragraphe écrit en vert soit en violet Purple.
Dans p2{
color: Green; remplacer Green par Purple }
Académie de
Versailles FICHE ACTIVITÉ 2 SNT
Web : HTML/CSS
Liens hypertexte
Un hypertexte est un texte augmenté de renvois automatiques à des textes, des images ou des sons.
Initialement, un hypertexte se restreignait à la mémoire d’un seul ordinateur.
Dans une page Web, ce renvoi se fait sur n’importe quelle machine du réseau internet, grâce à l’adresse de la page Web du texte (URL) auquel il fait référence. La toile d’araignée construite par les liens peut être représentée sous forme d’un graphe qui matérialise la structure du Web.
Ouvrir les fichiers TP_course.html, TP_cyclisme.html et TP_natation.html avec Notepad++.
Q8/ Dans le fichier TP_index.html, où se trouve le code permettant d’afficher cette image ? D’où provient-elle ?
Ligne 84 :<img src="https://upload.wikimedia.org/wikipedia/commons/6/61/Ironman_logo.gif"
alt="Ironman"/> Provient d’internet / wikipédia
Q9/ Dans le fichier TP_index.html, modifier la ligne
<li><a href="" class="menu_link">Le Cyclisme</a></li>
du menu pour qu’elle renvoi à la page TP_cyclisme.html Il faut rajouter TP_cyclisme.html entre " "
Q10/ Dans le fichier TP_natation.html, expliquer le code
src="images/natation.jpg"
On indique l'emplacement du fichier image
Q11/ Dans la page cyclisme l’image du vélo a disparu. Modifier le code TP_cyclisme.html pour la faire apparaître.
Ligne 24 il faut rajouter images/ avant cyclisme.jpg
Q12/ Modifier le code des pages pour créer le lien vers le site de la Fédération Française de Triathlon (https://www.fftri.com/) dans le menu.
Il faut rajouter sur chaque page sous <div class="menu_title">La fédération</div>
<ul>
<li><a href="http://www.fftri.com/" class="menu_link">FFTri</a></li>
</ul>
à la place de <li>....</li>
