Le HTML (HyperText Markup Language) est le langage de balisage qui permet de structurer le contenu d'une page web (texte, images, liens, etc.). Il ne gère pas la mise en forme graphique, qui est le rôle du CSS.
Toute page HTML respecte une structure standard, délimitée par des balises :
<!DOCTYPE html> Déclare que c'est un document HTML5.
<html>...</html> Conteneur principal de tout le code de la page.
<head>...</head> En-tête : contient les métadonnées (non visibles sur la page), comme le titre de l'onglet (<title>) et l'encodage des caractères (<meta charset="utf-8">).
<body>...</body> Corps : contient tout le contenu visible de la page (texte, images, etc.).
<h1> à <h6> Titres de différents niveaux. <h1> est le plus important. <h1>Mon Titre</h1>
<p> Paragraphe de texte. <p>Ceci est un paragraphe.</p>
<ul> / <ol> / <li> Listes non ordonnées (à puces) / ordonnées (numérotées) / éléments de liste.
<ul><li>Item</li></ul>
<strong> Met en emphase forte (souvent affiché en gras). <strong>Important</strong>
<em> Met en emphase simple (souvent affiché en italique). <em>À noter</em>
<br> Insère un saut de ligne simple. Texte<br>à la ligne
Ces balises utilisent des attributs pour fonctionner :
<a>...</a> href="cible" Lien hypertexte (href = destination du lien).
<img> src="chemin" et alt="texte" Image. Balise orpheline (pas de balise fermante). src = source du fichier, alt = texte alternatif (pour l'accessibilité si l'image ne charge pas).
Exemple de lien : <a href="page2.html">Aller à la page 2</a> Exemple d'image : <img src="photo.jpg" alt="Photo de moi">
Objectif : Comprendre la structure de base, les titres et les paragraphes.
Exercice 1 : Ma Première Page
Créer un fichier index.html.
Ajouter la structure de base (DOCTYPE, html, head, body).
Définir le titre de l'onglet sur "Ma page SNT".
Dans le corps, ajouter un titre principal (<h1>) et deux sous-titres (<h2>).
Écrire un paragraphe (<p>) sous chaque sous-titre.
Exercice 2 : Mise en Valeur et Listes
Dans le deuxième paragraphe, mettre un mot en gras (<strong>) et un autre en italique (<em>).
Sous un des sous-titres, créer une liste à puces (<ul> et <li>) avec trois éléments.
Sous l'autre, créer une liste numérotée (<ol> et <li>) avec trois étapes.
Objectif : Maîtriser les liens hypertextes et l'insertion d'images.
Exercice 3 : Les Liens du Web
Créer une deuxième page contact.html avec la structure de base.
Sur index.html, créer un lien (<a>) vers la page contact.html et inversement (un lien de retour).
Sur index.html, ajouter un lien externe vers un site web de votre choix (ex: Wikipédia, avec l'attribut href complet).
Exercice 4 : Ajout d'Images
Créer un sous-dossier images et y placer une petite image (photo.jpg par exemple).
Sur index.html, insérer l'image (<img>) en utilisant le chemin d'accès correct (src="images/photo.jpg").
Ajouter un texte alternatif (alt) pertinent pour l'image.
Objectif : Synthétiser les connaissances pour construire une petite arborescence.
Exercice 5 : Mon Mini-Projet SNT
Réaliser un mini-site sur Mario
Le site doit comporter au trois pages.
Chaque page doit contenir :
Un titre principal (<h1>).
Des paragraphes (<p>) avec du texte mis en valeur.
Des listes (<ul> ou <ol>).
Au moins un lien vers chacune des autres pages (pour un menu de navigation simple).
Au moins une image par page.
page3.html
Le CSS est un langage qui permet de séparer la structure (HTML) de la présentation (CSS). Il définit les couleurs, les polices, les tailles, et la disposition des éléments sur la page.
Externe (Recommandée) Le code CSS est dans un fichier séparé (style.css). La mise en page complète d'un site.
Interne Le code CSS est écrit directement dans la balise <head> du HTML, à l'intérieur de balises <style>. Des styles spécifiques à une page unique.
En ligne (Inline) Le style est appliqué directement à la balise HTML via l'attribut style. Des modifications très ponctuelles (à éviter).
Liaison Externe : Dans la section <head> du fichier HTML (index.html), on ajoute la ligne : <link rel="stylesheet" href="style.css">
Une règle CSS est composée d'un sélecteur qui cible l'élément HTML, et d'un bloc de déclarations :
Sélecteur : Il indique quel(s) élément(s) HTML doit(vent) être stylisé(s).
Propriété : Le type de style à appliquer (ex : color, font-size, background-color).
Valeur : Le paramètre choisi pour la propriété (ex : blue, 16px, #FF0000).
Sélecteur {
Propriété : Valeur ;
Propriété : Valeur ;
}
Exemple :
h1 {
color: navy; /* Couleur du texte en bleu marine */
font-size: 24px; /* Taille de la police à 24 pixels */
}
Balise (Type) p, h1, a Toutes les balises de ce type.
Classe .ma-classe Tous les éléments ayant l'attribut class="ma-classe".
ID #mon-id L'élément unique ayant l'attribut id="mon-id".
Application en HTML :
<p class="ma-classe">Ce paragraphe aura le style de la classe.</p>
<div id="entete">Cette division est unique.</div>
Texte/Police
color Couleur du texte.
font-family Type de police (ex : Arial, sans-serif).
text-align Alignement du texte (ex : center, justify).
Fond
background-color Couleur de l'arrière-plan.
background-image Image de l'arrière-plan.
Dimension
width / height Largeur / Hauteur d'un élément.
Modèle de Boîte
border, padding, margin Voir la section suivante.
C'est le concept le plus important pour comprendre comment les éléments s'affichent et interagissent en CSS. Chaque élément HTML est considéré comme une boîte rectangulaire.
Cette boîte est composée (de l'intérieur vers l'extérieur) :
Contenu : Le texte, l'image, etc.
Padding (Marge intérieure) : L'espace entre le contenu et la bordure.
Border (Bordure) : La ligne qui entoure le padding.
Margin (Marge extérieure) : L'espace entre la bordure et les autres éléments.
padding: 10px; (Ajoute 10px d'espace à l'intérieur).
margin: 20px; (Ajoute 20px d'espace à l'extérieur).
border: 2px solid black; (Ajoute une bordure de 2px, pleine, noire).
L'objectif est d'intégrer le CSS avec la structure HTML déjà créée précédemment.
Objectif : Lier le HTML et le CSS, appliquer des styles de base par sélecteur de balise.
Exercice 1 : Mise en Place du Fichier Externe
Créer un nouveau fichier style.css dans le même dossier que index.html.
Ajouter la balise de lien (<link>) dans le <head> de index.html.
Dans style.css, écrire une règle pour le sélecteur body :
background-color: lightgray;
font-family: Arial, sans-serif;
Vérifier que le fond de la page change.
Exercice 2 : Titres et Paragraphes
Styliser tous les titres <h1> :
color: darkblue;
text-align: center;
Styliser tous les paragraphes <p> :
font-size: 16px;
line-height: 1.5; (Pour l'espacement entre les lignes).
Objectif : Utiliser les sélecteurs de classe et d'ID, et introduire le Modèle de Boîte.
Exercice 3 : Sélecteurs Avancés
Dans index.html, ajouter la classe important à un paragraphe.
Dans style.css, créer la règle : .important { color: red; font-weight: bold; }.
Dans index.html, ajouter l'ID entete au titre <h1>.
Dans style.css, créer la règle : #entete { border-bottom: 2px solid darkblue; }.
Exercice 4 : Jouer avec les Boîtes
Appliquer les règles de Modèle de Boîte au titre <h1> (qui possède l'ID #entete) :
Ajouter un padding: 15px; (pour l'espace entre le texte et la bordure).
Ajouter un margin-bottom: 30px; (pour l'espace sous l'élément).
Objectif : Appliquer des styles aux éléments plus spécifiques.
Exercice 5 : Mise en Forme des Liens
Styliser les liens <a> pour :
Retirer le soulignement par défaut : text-decoration: none;
Changer leur couleur à l'état normal : color: green;
(Défi) : Utiliser la pseudo-classe :hover pour que la couleur change lorsque la souris passe dessus :
a:hover {
color: orange;
}
Exercice 6 : Une Carte de Présentation
Utiliser l'une de vos listes (<ul>) et l'entourer d'une nouvelle balise <div> avec la classe carte.
Styliser la classe .carte pour qu'elle ressemble à un bloc d'information :
background-color: white;
border: 1px solid #ccc;
padding: 20px;
width: 50%;
Internet et le Web ne sont pas la même chose. Internet est un réseau informatique mondial qui prend en charge divers services, tandis que le Web est un ensemble d'informations constitué de milliards de documents interconnectés sur Internet.
Internet est un gigantesque réseau informatique qui prend en charge différents services, tandis que le Web est un réseau d'informations constitué de documents reliés entre eux, accessibles via Internet.
Un site web est un ensemble de pages contenant des informations accessibles via Internet. Cependant, l'utilisation du terme "site internet" est un abus de langage.
Les documents sur le Web sont reliés les uns aux autres grâce au principe de l'hyperlien, qui permet d'inclure des liens hypertexte dans le texte pour accéder à d'autres documents.
Les documents du Web sont stockés sur des serveurs web, qui sont des ordinateurs fournissant des données en réponse à des requêtes.
Un client web est une application, comme un navigateur, qui se connecte à Internet pour envoyer des requêtes aux serveurs web et récupérer des pages web.
Une requête est une demande envoyée par un client web à un serveur web pour obtenir une page web ou des données spécifiques. Les requêtes sont effectuées en utilisant le protocole HTTP (Hypertext Transfer Protocol).
Un navigateur permet de consulter des informations sur le Web en interprétant le code HTML et CSS des pages web pour les rendre lisibles et interactives pour l'utilisateur.
Un navigateur et un moteur de recherche ne sont pas la même chose. Un navigateur permet de consulter des pages web, tandis qu'un moteur de recherche permet de trouver des pages web en effectuant des recherches.
HTML (Hypertext Markup Language) est un langage de balisage utilisé pour structurer le contenu des pages web, tandis que CSS (Cascading Style Sheets) est un langage utilisé pour mettre en forme et styliser ces pages web.
Un moteur de recherche utilise des algorithmes pour classer les résultats en fonction de la pertinence, de la popularité et de la confiance. Il se base sur des mots-clés, des liens entrants et sortants, ainsi que sur d'autres critères.
Les résultats obtenus par différents moteurs de recherche peuvent varier en fonction de leurs algorithmes et de leurs critères de classement. Chaque moteur de recherche a ses propres règles pour classer les résultats, ce qui peut entraîner des différences entre eux.
Créer un dossier "IMAGES" dans votre drive.
Y déposer vos images
Clic-droit sur une image puis "Partager" ou "Obtenir le lien"
Accorder l'accès à "Tous les utilisateurs qui ont le lien"
Cliquer sur le bouton "Copier le lien"
Coller le lien dans votre code HTML
https://drive.google.com/file/d/10hZpHqR8rY_4EXEMPLEHKXVCIIR9Pt0k/view?usp=share_link
Et apporter la modification suivante :
Supprimer /view?usp=share_link
Remplacer file/d/ par uc?id=
https://drive.google.com/uc?id=10hZpHqR8rY_4EXEMPLEHKXVCIIR9Pt0k
coller ce lien dans l'attribut src d'une balise <img>
<img src="https://drive.google.com/uc?id=10hZpHqR8rY_4EXEMPLEHKXVCIIR9Pt0k">
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modèle 1</title>
<link rel="stylesheet" href="Style1.css">
</head>
<body>
<div class="conteneur">
<div class="header">
<p> Zone du Haut</p>
</div>
<div class="gauche">
<p> Zone de Gauche</p>
</div>
<div class="milieu">
<p> Zone du Milieu</p>
</div>
<div class="clearer"></div> <!-- on arrete l'effet flottant -->
</div>
</body>
</html>
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modèle 2</title>
<link rel="stylesheet" href="Style2.css">
</head>
<body>
<div class="conteneur">
<header>
<p> Zone du Haut</p>
</header>
<div class="gauche">
<p> Zone de Gauche</p>
</div>
<div class="milieu">
<p> Zone du Milieu</p>
</div>
<div class="droite">
<p> Zone de Droite</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modèle 3</title>
<link rel="stylesheet" href="Style3.css">
</head>
<body>
<div class="conteneur">
<div class="gauche">gauche</div>
<div class="droite">droite</div>
<div class="clear"></div>
<footer>Bas</footer>
</div>
</body>
</html>
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modèle 4</title>
<link rel="stylesheet" href="Style4.css">
</head>
<body>
<div class="conteneur">
<header>Haut</header>
<nav>Menu</nav>
<section>Milieu</section>
<footer>Bas</footer>
</div>
</body>
</html>
bientôt...
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modèle 5</title>
<link rel="stylesheet" href="Style5.css">
</head>
<body>
<div class="conteneur">
<header>Menu HTML et CSS</header>
<nav>
<ul>
<li><a href="#">Cours Complets</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>
<section>Milieu</section>
<footer>Bas</footer>
</div>
</body>
</html>
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mon Modele</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="conteneur">
<header>header = zone d'entête</header>
<nav>Menu</nav>
<section>
<div class="a">div A</div>
<div class="b">div B</div>
<div class="c">div C</div>
<div class="d">div D</div>
<div class="clear"></div>
</section>
<footer>footer = pied de page</footer>
</div>
</body>
</html>
#conteneur
{
width: 70%;
margin: 0 auto;
/* UNE PROPRIETE MANQUANTE */
}
header, footer
{
height: 80px;
font-size:80px;
/* UNE PROPRIETE MANQUANTE */
}
header
{
background: #40A497;
}
nav
{
background: #9A40A4;
/* UNE PROPRIETE MANQUANTE */
}
section
{
background: #F0C000;
/* TROIS PROPRIETES MANQUANTES */
}
.a, .b, .c, .d
{
line-height:400px;
text-align:center;
font-size:100px;
/* TROIS PROPRIETES MANQUANTES */
}
.a
{
background: #32a7a0;
}
.b
{
background: #d69f1b;
}
.c
{
background: #b1b2d8;
}
.d
{
background: #1217f2;
}
footer
{
background: #40A497;
}
.clear
{
/* UNE PROPRIETE MANQUANTE */
}
Information
5 infos par élève (Nom, prénom, classe, âge, tel, mail, adresse)
Adresse postale et téléphone fictifs
Expériences
Dates, noms entreprises, logos entreprises, adresses entreprises, métiers observés
Formation
Noms des établissements, logos, adresses (école, collège et lycée)
Compétences
Minimum 3 par élève
Centres d’intérêts
Minimum 3 par élève
Schéma de couleurs respecté avec lien vers la palette Coolors en pied de page
… cOpy URLCase
JS fonctionnel
Image animée profil (Giphy)
Menu stylé (bords arrondis des onglets)
Titres stylés (<h1>)
Sections illustrées par une image depuis le CSS
Pied de page stylé (<footer>)