Académie de
Versailles FICHE ACTIVITÉ 2 SNT
Web : HTML/CSS Mardi 10/12/2019
Pour créer des sites web, on a besoin de langages informatiques : le HTML et le CSS. Ce ne sont pas des langages de programmation mais plutôt des langages de description (langage de balisage).
Le langage HTML (HyperText Markup Langage, langage de balisage hypertexte) a été inventé par Tim Berners-Lee en 1991. Son rôle est de gérer et d’organiser le contenu (Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher…).
Le CSS (Cascading Style Sheets, feuille de style) est venu compléter le HTML en 1996. Son rôle est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…).
HTML
Un exemple de page web est donné dans le fichier TP_index.html. Observons ce fichier.
Si vous travaillez avec Notepad++ :
Ouvrir le fichier avec le logiciel Notepad++ (clic droit, Edit with Notepad++) : c’est le code HTML de la page web ;
Ouvrir de nouveau le fichier, mais dans le navigateur internet (double clic) : c’est le rendu visible à l’écran après traduction par l’ordinateur.
Lorsque vous faites des changements sur le fichier, enregistrez les changements (raccourci Ctrl et S) puis rafraîchir la page sur le navigateur (F5).
Structure de base d’une page HTML Le doctype < ! DOCTYPE html>
Cette ligne est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation).
La balise <html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout à la fin du code.
L'en-tête <head>
Cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination du navigateur. Elles sont cependant très importantes !
L'encodage (charset) <meta charset=”utf -8” >
Cette balise indique l'encodage utilisé dans votre fichier .html. Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.)
Page 1 / 3
Académie de
Versailles FICHE ACTIVITÉ 2 SNT
Web : HTML/CSS
Le titre principal de la page <title>
C'est le titre de votre page. Toute page doit avoir un titre qui décrit ce qu'elle contient. Il est conseillé de garder le titre assez court (moins de 100 caractères en général). Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Il faut savoir que le titre apparaît aussi dans les résultats de recherche, comme sur Google.
Le corps <body>
C'est la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.
Q1/ Modifier le titre de la page.
Modifier <h2>Le triathlon</h2> par <h1>Le triathlon</h1>
Qu’observez-vous sur la page web ?
Q2/ Modifier le fichier pour que la distance standard du cyclisme soit de 40km.
Q3/ Comment mettre des mots en gras ? Mettre en gras les mots Swim, bike , run
Q4/ Quelle est la balise qui permet d’insérer une image ?
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 ?
Q6/ Modifier le fichier TP_style.css pour que les titres des balises <h1> soient bleus MidnightBlue.
Q7/ Modifier le fichier TP_style.css pour que le paragraphe écrit en vert soit en violet Purple.
Page 2 / 3
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 ?
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
Q10/ Dans le fichier TP_natation.html, expliquer le code
src="images/natation.jpg"
Q11/ Dans la page cyclisme l’image du vélo a disparu. Modifier le code TP_cyclisme.html pour la faire apparaître.
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.
Page 3 / 3
