6_ICN - Réaliser une page Web avec HTML et CSS
Ce module a pour objectifs:
• Initier aux concepts du développement Web
• Mettre en œuvre des langages de développement Web
• Créer un mini-site
1. Introduction
La création d'un site web nécessite l'apprentissage au minimum de deux langages :
• Le langage HTML
• Le langage CSS
Q1. Donner la signification des acronymes HTML et CSS. Indiquer lequel de ces langages est utilisé pour
décrire le contenu et la structure d’un site Web et celui utilisé pour définir la mise en forme.
Acronyme Signification Utilité
HTML
CSS
Pourquoi 2 langages pour une page Web?
• Séparer le contenu de la forme est un des concepts clé de l'informatique.
• Dans le cas d’un site web, on peut uniformiser la présentation en définissant un type de présenta-
tion une seule fois que l’on réutilise dans toutes les pages. Cela permet donc aussi un gain de
temps.
• Changer le style du site tout entier en modifiant seulement la feuille de style.
• Le code HTML est considérablement réduit en taille et en complexité.
• Faciliter la lecture de la page par les robots des moteurs de recherche qui ignorent la présentation.
Avant d'écrire votre première page, visualiser un code HTML !
Ouvrir avec un navigateur la page suivante: https://www.isnbreizh.fr/ixn/activity/htmlcss/exemple.html
En effectuant un clic droit sur la page Web, on accède à un menu qui permet d'afficher le code source
de la page.
Lorsque vous consultez un site Web, les fichiers HTML sont envoyés à votre navigateur et le code est in-
terprété sur votre PC par ce navigateur.
Q2. Recopier ce code source.
Sur ce code, vous pouvez remarquer des mots clés encadrés par les caractères < et >.
Il s'agit de balises qui permettent de donner au navigateur des indications sur la nature des données
associées.
Surligner sur ce code les balises utilisées.
En vous aidant des ressources fournies, remplir un tableau en précisant l'utilité de ces balises.
Balises Utilisation
<h1> …………………… </h1>
….
Les balises vont par pair : une balise ouvrante et une balise fermante. Les balises fermantes s’écrivent avec
un slash (/). Le texte écrit entre la balise ouvrante et la balise fermante est le contenu de la balise.
<h1> Ceci est une page Web très basique </h1>
Tout document HTML doit se conformer à la structure suivante :
<!DOCTYPE html>
<html>
<head>
<title> Ceci est le titre de la page </title>
</head>
<body>
<!-- Ici le contenu de la page - remarque : ceci est un commentaire -->
</body>
</html>
Q3. Repérer les différentes balises utilisées et leur signification. On dit souvent que la structure d'un docu-
ment HTML est une structure hiérarchique ou arborescente, pouvez-vous justifier de ces qualificatifs ?
2. Découvrir le HTML
Il existe de nombreuses façons de créer et d'éditer vos pages HTML.
Pour vos essais, vous allez utiliser l'éditeur de texte évolué NotePad ++ .
Pour créer un vrai site Web, il est nécessaire de positionner les différents fichiers du site dans un réper-
toire déterminé d’un serveur WEB.
Nous allons simuler localement sur chaque poste le répertoire inclus dans le serveur.
Dans votre répertoire personnel, créer un dossier « www » qui contiendra tous les fichiers du site.
Créer dans "www" un dossier 01_html
Pour écrire les codes des différents fichiers, on utilise l’éditeur de texte « NotePad++ »
Ouvrez l’éditeur de texte « NotePad++ »et copiez-y le code suivant :
2
L’éditeur inscrit le texte comme une simple chaine de caractères sans l’interpréter.
La force de Notepad++ est de formater cette chaine de caractères en fonction d’un nombre important de
langage informatique.
Faites Fichier\Enregistrer sous index .html. « index .html » sera la page d’entrée du site web.
Après enregistrement, l’éditeur de texte « NotePad++ » colorise la chaine de caractères en faisant ressortir
les mots réservés du langage. Ce qui rend plus facile sa lecture et son interprétation.
Notepad++ permet aussi de faire exécuter le code directement par Firefox en sélectionnant dans la barre
menu Exécuter/ Launch in Firefox
3
Q4. Editer votre première page en copiant le code ci-dessous dans NotePad ++
<!DOCTYPE html>
<html>
<head>
<title> Premier essai </title>
</head>
<body>
<p> ceci est mon premier essai </p>
</body>
</html>
Sauvegardez ce fichier sous le nom : NomPrenomClasse.html Ouvrez cette page dans le navigateur.
Faire une copie d'écran de ce qui s'affiche.
Vous disposez de balises pour hiérarchiser votre texte. Dans l'exemple ci-dessus, la balise <p> est utilisée;
ceci est mon premier essai est défini comme un paragraphe, ce texte se trouvant entre la balise ouvrante
<p> et la balise fermante </p>.
Q5. Tester les différentes balises proposées ci-dessous en insérant le code correspondant dans le corps de
votre document (entre les balises <body> et </body>). Dans votre compte-rendu, vous indiquerez pour
chaque cas le code correspondant et une copie d'écran de ce qui s'affiche sur le navigateur.
Les balises à tester:
• <p> </p> : Cette balise permet d’organiser son texte en paragraphes.
• <br /> : Il s’agit d’une balise orpheline qui sert à indiquer qu’on doit aller à la ligne. Vous devez
obligatoirement la mettre à l’intérieur d’un paragraphe.
• <h1> </h1> : Cette balise signifie heading 1. Elle permet de faire des titres, à l’intérieur de la page.
Le contenu de cette balise est donc affiché avec une taille de police plus grande que les autres ca-
ractères de la page. Il est également possible de définir des sous-titres en utilisant les balises <h2>,
<h3>, <h4>, …<h6>.
• <em> </em> : Cette balise permet de mettre « un peu » en valeur votre texte. L’utilisation de cette
balise a pour conséquence de mettre le texte en italique. En fait, c’est le navigateur qui choisit
comment afficher les mots. On lui dit que les mots sont assez importants et, pour faire ressortir
cette information, il change l’apparence du texte en utilisant l’italique
• <strong> </strong> : Cette balise permet de mettre en valeur votre texte. L’utilisation de cette ba-
lise a pour conséquence de mettre le texte en gras. En fait, c’est le navigateur qui choisit comment
afficher les mots. On lui dit que les mots sont importants et, pour faire ressortir cette information,
il change l’apparence du texte en utilisant le gras.
Les commentaires
Lorsque vous codez une page, il est important d’utiliser des commentaires. Ces commentaires ne seront ni
visibles sur le navigateur, ni interprétés par celui-ci. Ils vous serviront uniquement à vous repérer sur votre
code. Les commentaires se situent entre les signes < !-- et -->
Les listes
Les listes permettent souvent de mieux structurer le texte et d’ordonner les informations. Nous allons dé-
couvrir deux types de listes :
• La liste non ordonnée ou liste à puces : Il suffit d’utiliser la balise <ul> que l’on referme avec </ul>.
On écrit ensuite chacun des éléments de liste entre deux balises <li> et </li>.
On écrit par exemple :
<ul>
<li> Fraises </li>
<li> Framboises </li>
<li> Cerises </li>
</ul>
4
• La liste ordonnée ou numérotée: elle fonctionne de la même façon en remplaçant <ul> </ul> par
<ol> </ol>
Les liens
La balise <a>, avec son attribut href permet de créer un hyperlien vers une autre page.
Voici un exemple :
<a href="http://www.google.fr" > Pour aller sur le site de google </a>
Q6. Tester les balises permettant de réaliser des listes et des liens
Les images
Pour insérer une image, on utilise la balise de type orpheline <img>. Orpheline signifie que cette balise fait
à la fois office de balise ouvrante et fermante. Elle doit être accompagnée de deux attributs obligatoires :
• src : il permet d’indiquer où se trouve l’image que l’on veut insérer.
• L'attribut alt signifie « texte alternatif ». Il s’agit d’un texte court qui décrit ce que contient l’image.
Ce texte sera affiché à la place de l’image si celle-ci ne peut être chargée. Cela aide aussi les robots
des moteurs de recherche pour les recherches d’images.
- image stockée dans le même dossier que votre fichier html :
<img src=" fleur.png" alt=" une fleur">
- image stockée sur un autre site :
<img src= "http://dory.fr/images/fleurs/fleur.png" alt=" une fleur">
Q7. Faire un essai en insérant un fichier image d'une fleur que vous aurez téléchargé sur Internet.
Prendre un fichier .png ou .jpeg
3. Découvrir le CSS
Le HTML n'a pas été conçu pour gérer la mise en page.
Le HTML s'occupe uniquement du contenu et de la sémantique (voir activité précédente); pour tout ce qui
concerne la mise en page et l'aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS
(Cascading Style Sheets).
Pour bien voir l’intéret des fichiers CSS regardons un exemple :
- Ouvrez dans Firefox le site web suivant : http://www.csszengarden.com/tr/fr/
- Changez le fichier CSS qui gouverne le style de la page en choisissant le style : Garments
- Observez la page : le contenu a-t-il changé ? Le style a-t-il changé ?
- Choisissez le fichier CSS : Fountain kiss puis passez à : Steel et promenez votre souris sur toute
la page
Il existe plusieurs manières d'associer du code CSS à votre page Web. (voir la vidéo insertCSS.mp4).
Q8. Commencer par créer un dossier 02_CSS dans "www".
À l'aide de l’éditeur de texte, créez un nouveau fichier.
1) Écrivez et enregistrez le code HTML suivant dans votre éditeur de texte (fichier index.html) :
<link rel="stylesheet" href="monStyle.css">
<h1>Ceci est un titre</h1>
<h2>Ceci est un sous titre</h2>
<p id="para_1">Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
La ligne <link rel="stylesheet" href="monStyle.css"> indique quel fichier de style CSS il faut appliquer
à cette page.
5
2) Écrivez et enregistrez le code CSS suivant dans votre éditeur de texte (fichier monStyle.css) :
h1
{
text-align: center;
background-color: red;
}
h2
{
font-family: Verdana;
font-style: italic;
color: green;
}
3) Visualisez la page index.html avec Firefox. Que constatez-vous ? Mettez en relation les lignes du
fichier CSS et ce que vous voyez à l’écran.
4) Ajoutez à la fin de votre fichier CSS (pensez à l’enregistrer) :
#para_1
{
font-style: italic;
color: blue;
}
5) Visualisez la page HTML avec Firefox. Comment a été modifié le style de la page HTML?
Il est donc possible de cibler un paragraphe et pas un autre en utilisant l'id du paragraphe (en CSS l'id se
traduisant par le signe #).
Il est possible d'utiliser l'attribut class à la place de l'id. Dans le CSS on utilisera le point . à la place du #.
L'attribut "class" permet de donner le même nom à plusieurs reprises dans une même page.
Si nous avions eu un 3ème paragraphe, nous aurions pu avoir :
<p class="para_1">Voici un 3ème paragraphe</p>
mais nous n'aurions pas pu avoir :
<p id="para_1">Voici un 3ème paragraphe</p>
car l’id para_1 a déjà été utilisé pour le 1er paragraphe.
Vous pourrez consulter pour plus d'informations les sites:
https://www.w3schools.com/
et https://www.alsacreations.com/tutoriels/
6
4. Créer un site Web
Créer un site web sur trois de vos loisirs préférés.
Exigences
• Page principale : index.html
• Feuille de style : monStyle.css
• Par loisir une page html, une page css, quelques images
• Balises à utiliser o <html>,<head>,<body>,<h1>,<h2>,<p>,<br>
- un lien en HTML
- des listes
- un tableau
• Gérer le style
- Alignement
- Font
- Police de caractères
- Couleur de texte
• Structure
- Un répertoire WWW
- Trois répertoires spécialisés : un pour chaque loisir.
Exemple:
