HTML - CSS
Introduction
Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web. Quand vous consultez un
site avec votre navigateur, il faut savoir que, en coulisses, des rouages s'activent pour permettre au site
web de s'afficher. L'ordinateur se base sur ce qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit
afficher.
Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend donc
apprendre deux langages qui ont des rôles différents :
•HTML(HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle
est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la
page : du texte, des liens, des images...
•CSS(Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la
page web (agencement, positionnement, décoration, couleurs, taille du texte...). Ce langage est venu
compléter le HTML en 1996.
On peut ajouter également des scripts en langage JavaScript pour obtenir un comportement dynamique ou
du PHP.
Les langages HTML et CSS font partie des langages de description contrairement à JavaScript qui est un
langage de programmation. Dans la suite de ce cours, nous utiliserons la version HTML5 (actuellement, la
version la plus utilisée).
Le langage HTML
• Les outils
Le code d'une page HTML est stocké dans un fichier texte avec l’extension .html.
Un éditeur de texte est donc nécessaire pour écrire le code source : On pourra se servir entre autres, d'un
éditeur de texte comme le Bloc-notes de Windows ou NotePad++.
Pour interpréter le code HTML, il faut simplement un navigateur Web (c'est-à-dire un client HTTP HyperText
Transfer Protocol).
• Structure d’une page web
En HTML, la structure matérielle d'un document est décrite à l’aide de balises. Un document HTML doit
comporter une en-tête (balise <head>), un corps (balise <body>) et avant tout une déclaration de type de
document précisant la version de la norme HTML utilisée.
Voici une page HTML vide avec un lien vers son fichier style.css et une déclaration pour indiquer l’encodage
(ici utf-8).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style1.css" />
<title> Ma première page </title>
</head>
<body>
</body>
</html>
a) Configuration de Notepad++ :
Il faut commencer dans Notepad++ par ajouter un module pour gérer automatiquement la connexion entre
notepad++ et le serveur.
Dans notepad++ -> Module d’extension- > Gestionnaire des modules d’extension -> installer « NppFTP »
Puis dans « settings » , « Profil settings »
Ajouter l’ip du serveur
Type de connexion : SFTP
Port :22
Username : Votre login
Password : Votre mot de passe
Initial repertoire directory :
/var/www/html/ « Votre login »
A la première connexion il faut accepter le message.
Une fois installé et configuré, il faut lancer la connexion à l’ouverture de notepad++ avec le premier bouton bleu,
puis les fichiers seront téléchargés vers le serveur lors de l’enregistrement.
b) Création d’une première page web :
Une fois la connexion avec le serveur effectuée, nous allons créer notre première page web.
Sur le nom de votre répertoire, clic droit de la
souris puis « Create new file »
Entrez le nom « index.html »
Rq : La page nommée « index » sera la page par défaut lue par le navigateur.
Double cliquez sur ce fichier, puis copiez le code html suivant :
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<html>
<head>
<title>Ma première page en ligne</title>
</head>
<body>
<p>Ce document a été réalisé par VOTRE NOM ET PRENOM</p>
<h1>TITRE DE LA PAGE</h1>
<br />
<!--Commentaire html -->
Ma page est en ligne...
</body>
</html>
Sauvegardez (Crtl+S)… Votre page est en ligne… 😊
c) Accès à la page :
Votre page est à l’adresse suivante dans un navigateur :
IP_SERVEUR/ Votre nom/index.html exemple : 51.12.158.59/NOMELEVE/index.html
d) Site local :
Vous pouvez créer un site de façon local, uniquement sur votre ordinateur en créant simplement un
dossier (par exemple « Mon_site »)
Généralement le dossier qui contient un
site Web est organisé de la façon suivante:-
La page principale d’un site est toujours
nommée index par convention.
Un dossier nommé «images» ou «donnée»
permet de stocker toute les images, vidéo,
données, etc...contenues dans le site.
e) Création d’une seconde page web :
Commençons par reprendre la page suivante :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style1.css" />
<title> Ma première page </title>
</head>
<body>
</body>
</html>
1. Ajoutons un titre (balise h1). Pour cela on tape dans le
body :
<h1>Mon titre</h1>
2. Ajoutons un paragraphe une phrase (balise p)
<p> blablabla </p>
3. Ajouter un lien externe, balise a. On indique dans la balise l’adresse avec href= " adresse. " et
target= "_blank " si l’on veut que le lien s’ouvre dans une autre fenêtre :
<a href= "index.html " target= "_blank">cliquer ici </a>
On peut aussi pour créer, par exemple, un lien renvoyant à la page Wikipedia sur le HTML5
lorsqu’on clique sur le mot HTML5, on écrira :
<a href="https://fr.wikipedia.org/wiki/HTML5"> HTML5 </a>
Pour faire un lien vers un autre site, il suffit donc de copier son adresse (ou URL) dans la
balise. On parle alors de lien absolu car l’adresse donnée est l’adresse complète.
4. Enregistrer une image de votre choix (Voir Fin du cours : Ajouter un fichier au
serveur) (par exemple votre œuvre d’art numérique) dans le répertoire Images. Pour
placer cette image nommée monImage dans votre site on utilise la balise img. La
balise img est auto fermante.
<img src="Images/monImage.PNG" width="470" alt="texte en cas d’erreur"/>
5. Utiliser la balise nav pour créer un menu. Attention cette balise indique que l’on va créer un
menu mais ne s’occupe en rien de le mettre en forme. Cela se fera en css. Généralement un
menu est une liste que l’on crée en mettant une balise ul pour démarrer la liste et des balises li
pour chaque ligne de l’énumération. (Remarque pour une liste numéroté on remplace ul par ol).
<nav>
<ul> <li> <a href=" index.html "> lien 1 </a></li>
<li> <a href=" index.html "> lien 2</a></li>
<li> <a href=" index.html "> lien 3</a></li>
</ul>
</nav>
Le langage CSS
• Principe du code CSS
La syntaxe de base du code CSS se compose de 3 parties :
• Exercices
1. Toujours sur Notepad++, créer un fichier nommé style1.css.
Commençons par configurer le body :
body {
width:800px;
background:black;
font-family : arial, verdana, sans-serif ;
margin:auto;
color:white;
}
Expliquez chacune des lignes en les commentant.
2. De même, définir nav de façon à ce que le background du menu soit jaune.
3. Pour que le menu s’affiche horizontalement et que le contenu s’affiche au centre des boites, on
crée les sélecteurs nav ul et nav li :
nav ul {
display : flex; /* Transformation en flexbox */
padding :40px; /* Marges internes (voir à la fin du document)*/
justify-content: center; /* Répartition de l'espace autour des éléments */
list-style-type : none ; /* Suppression des puces */
}
nav li {
display : table-cell ;/* Création de cellules horizontales */
width:200px; /* largeur d'une cellule*/
padding:10px;/* Espacement supplémentaire à l'intérieur d'une cellule*/
}
Incorporer ces codes dans votre fichier CSS, vous pourrez les modifier à votre guise.
4. Ajouter ce code dans votre fichier CSS. Quelle transformation est visible dans votre fichier html ?
nav a {
color: red;
}
Le CSS permet de définir des propriétés différemment, selon que le lien est visité,
non visité, activé, ou si le curseur le survole. Cela permet d'ajouter des effets
plaisants et utiles à vos sites Web. Pour contrôler ces effets, on utilise ce qu'on
appelle des pseudo-classes
Une pseudo-classe permet de tenir compte de conditions et événements
différents pour la définition d'une propriété sur une balise HTML
•La pseudo-classe : link est utilisée pour les liens menant aux pages que
l'utilisateur n'a pas visitées
•La pseudo-classe : visited est utilisée pour les liens menant aux pages que
l'utilisateur a visitées
•La pseudo-classe: active est utilisée pour les liens qui sont activés
•La pseudo-classe: hover est utilisée lorsque le pointeur de la souris survole un
lien
Personnaliser votre fichier CSS en créant au moins deux sélecteurs : par exemple nav a : visited et
nav a : hover.
a:hover {
background-color: gold;
}
5.
Le module CSS Grid layout (modèle de disposition en grille) est un module de la
spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage
en régions utilisables par une application ou en définissant des relations de taille,
position et d'empilement entre les éléments HTML.
On commence par créer un sélecteur nommé conteneur dans le fichier css.
conteneur {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
grid-auto-rows: minmax(100px, auto); }
On a créé une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées
mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu).
On crée ensuite des classes qui permettront aux éléments de se placer sur la grille grâce aux
numéros des lignes horizontales et verticales.
Code CSS Code HTML
.first{ <conteneur>
grid-column: 1 / 2; <div class="first">
grid-row: 1; THE FIRST <br>
background-color: #990011;} blablabla <br>
blablabla<br>
.second{ blablabla<br>
grid-column: 2 / 3; blablabla<br>
grid-row: 1; blablabla<br>
background-color: green;} </div>
<div class="second">
.third{ THE SECOND <br>
grid-column: 3 / 4; blablabla<br>
grid-row: 1; blablabla<br>
background-color: green;} blablabla<br>
</div>
.firstDown{ <div class="third">
grid-column: 2 / 4; THE THIRD <br>
grid-row: 2 ; blablabla<br>
background-color: blue;} blablabla<br>
blablabla<br>
</div>
<div class="firstDown">
THE FIRST DOWN <br>
blablablalablablalablablalablablalablablalablablalab
lablalablabla<br>
blablabla<br>
</div>
</conteneur>
6. Votre page doit maintenant ressembler de près ou de plus loin à ça :
7. Construire maintenant votre site avec au moins deux onglets :
Sur le premier onglet vous vous présenterez (un genre de CV)
Sur le second vous vous exprimerez sur un sujet qui vous tient à cœur.
Vous n’oublierez pas de faire valider votre site sur https://validator.w3.org/.
Ce site permet de contrôler l’intégrité du code de votre page.
Compléments :
Ajouter un fichier (Une image) sur le serveur :
Pour pouvoir ajouter un fichier sur un serveur ftp, nous avons besoins d’un logiciel comme FileZille
client qui permet de « voir » l’arborescence de notre serveur et d’y déposer des fichiers.
1) Adresse IP du serveur : 51.210.102.53
2) Votre login et mot de passe
3) Port 22
4) Connexion rapide
5) Chemin de votre accès aux pages web : /var/www/html/votre nom
Les sélecteurs
Dans une page html il est possible de nommer un élément particulier.
Exemple :
La page ci-dessous contient trois balises <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style1.css" />
<title> Ma première page </title>
</head>
<body>
<div class=’c1’>Toto</div>
<div>tata</div>
<div class=’c1’>titi</div>
<div id=’i1’>Pinpin</div>
</body>
</html>
On remarque que des attributs (selector) sont ajouté à la définition des balises div.
- Balise sans selector : <div>tata</div>
- Balise avec identifiant (unique) : <div id=’i1’> Attention l’identifiant doit être unique
- Balise avec class (pour définir un groupe) : <div class=’c1’>
Il est possible d’appliquer un style sur une ou des balises à l’aide de ces selector dans la feuille de
style.
div { background-color: skyblue; }
.c1 { background-color: skyblue; } Le . permet de spécifier qu’il s’agir d’une classe
#i1 { background-color: skyblue; } Le # permet de spécifier qu’il s’agit d’un id
https://www.w3schools.com/cssref/css_selectors.asp
