Activité 3 – Réaliser une page web
Nous allons créer 2 fichiers : un fichier qui contiendra du HTML (index.html) et un fichier qui contiendra du CSS (style.css). Vos fichiers seront enregistrés dans un répertoire que vous nommerez « site ».
La vidéo ci-dessous va vous aider dans la réalisation.
Avec uniquement du code HTML, la page Web est assez « fade » ; heureusement le code CSS permet d’y apporter de la couleur et pas que !
On vous demande de réaliser la page suivante :
Dont voici le code (vous trouverez les éléments indispensable dans le répertoire sur le réseau qui se nomme « SiteWeb » :
<!DOCTYPE html>
<!Code HTML de la page Web sur les grands événements du Web>
<html>
<head>
<meta charset= »utf-8″ />
<title>Les repères historiques du Web</title>
</head>
<body>
<h1> Les repères historiques du Web </h1>
<h2> De l’invention du lien hypertexte aux mobiles <h2>
<p>Nb : seuls les événements jugés les plus <strong>remarquables</strong> ont été retenus !</p>
<ol>
<li> Invention et programmation du concept d’hypertexte par Ted Nelson</li>
<li> 1989 : Première version du Web au CERN par Tim Berners Lee</li>
<li> 1990 : Premier site et premier serveur Web </li>
<li> 1993 : Mise dans le domaine public, disponibilité du premier navigateur Mosaic</li>
<li> 1995 : Mise à disposition de technologies pour le développement de site Web interactif (langage JavaScript) et dynamique (langage PHP)</li>
<li> 1998 : Naissance du moteur de recherche « Google » </li>
<li> 2001 : Standardisation des pages grâce au DOM (Document Object Model)</li>
<li> 2005 : Mise à disposition du Web 2.0 et naissance de « Youtube »</li>
<li> 2010 : Mise à disposition de technologies pour le développement d’application sur mobiles</li>
</ol>
<a href= »https://fr.wikipedia.org/wiki/Hypertext_Markup_Language » target= »_blank »><img src= »internet.png » alt= »Le Web & l’HTML » title= »Le Web »/></a>
<br/>
<br/>
<h2> De nos jours : <h2>
<ul>
<li> 2010 : l’émergence du HTML5, le futur du Web</li>
<li> 2014 : le milliard de sites dépassés</li>
<li> Mars 2019 : <a href= »https://wearesocial.com/fr/blog/2019/07/digital-social-et-mobile-etat-des-lieux-au-1er-trimestre-2019″ target=_blank title= »plus de 4 milliards d’utilisateurs »> plus de 4 milliards d’utilisateurs </a> </li>
</ul>
</body>
</html>
Le code CSS peut être écrit dans le fichier contenant le code HTML mais cela n’est pas conseillé ; il est préférable de créer un fichier CSS avec l’extension « .css » contenant uniquement le code CSS et en parallèle le fichier HTML avec l’extension « .html » contenant uniquement le code HTML !
Voici l’exemple de code CSS qui donnera un peu de couleur à notre exemple de l’activité précédente sur le code HTML !
/* Commentaires */
body /* Paramètres de la page par défaut */
{
background-image: url(« fond de page.jpg »); /* Image de fond */
background-attachment: fixed; /* Le fond restera fixe */
background-repeat: repeat; /* Le motif se répétera */
}
p /* Paramètres des paragraphes */
{
color: black; /* Le texte sera noir */
text-align: justify; /* Alignement est le mode justifié*/
font-size: 20px; /* Taille du texte de 20 pixels*/
font-style: italic; /* En italic */
}
h1 /* Paramètres des titres de niveau 1 */
{
color: red; /* Le texte sera de couleur rouge */
text-align: center; /* Alignement est le mode justifié */
font-size: 2em; /* 2em = 2 fois la taille normale */
font-weight:bold; /* En gras */
text-shadow: 2px 2px 4px black; /* Ombre au texte avec px pour pixel */
border: 3px grey solid; /*Bordure autour du texte de couleur grise */
border-radius: 10px; /* Arrondi au 4 coins */
box-shadow: 6px 6px 0px grey inset; /* Ombre en intérieur de la bordure */
}
h2 /* Paramètres des titres de niveau 2 */
{
color: rgb(255,255,0); /* Le texte sera de couleur jaune (255 = 100%
première valeur pour le Rouge, idem pour le deuxième le vert
et 0 = 0% pour le bleu) */
text-align: left; /* Alignement est à gauche */
font-size: 1.5em;
}
li /* Paramètres des puces */
{
color: rgb(50,150,100); /* Valeur des rouges, des verts et des bleus */
text-align: justify;
font-size: 100%; /* 100% la taille normale */
}
a /* Paramètres des liens */
{
text-decoration: underline; /* Texte souligné */
}
Résultats sur notre page Web : à faire vous-même 1
- Prenez le temps d’étudier le code CSS précédent en lisant les commentaires et en observant le résultat obtenu.
- Écrivez un code CSS afin de rendre le plus joli possible votre travail de l’activité précédente sur le code HTML autour des grands repères historiques du Web… avec une image de fond de votre choix téléchargeable sur Internet !
- Enregistrez votre travail de la manière suivante : « style.css » dans le même dossier que votre précédent travail.
Pour l’instant notre CSS ne sera pas appliqué à votre page ! Pour ce faire, il faut modifier votre code HTML en ajoutant une ligne qui va permettre d’associer votre code CSS à votre page.
À faire vous-même 2
- Ouvrez votre code HMTL pour le modifiez en ajoutant la ligne suivante : <link rel= « stylesheet » href= « style.css » />
- Testez le résultat et ajuster votre code CSS à votre convenance pour rendre le plus intéressant votre page Web.
- Vous trouverez les images dans votre répertoire sur le réseau dans le répertoire « SiteWeb ».
- N’oubliez pas d’enregistrer après chaque modification sans quoi aucun changement ne sera visible !
À faire vous-même 3
A partir de la page vue précédemment, élaborez une page HTML en utilisant les balises vues ci-dessus et un script css de base. Vous insérerez des images et un ou des liens hypertextes.