Séquence 2

Le Web

Le HTML

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.

La Structure de Base d'une Page HTML

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.).

2. Les Balises de Contenu Essentielles

<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

3. Les Liens et les Images

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">

Exercices

Niveau 1 : Découverte et Texte

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.

Niveau 2 : Interactivité et Média

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.

Niveau 3 : Mini-Site

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

Mario

Luigi

Bowser

Le CSS

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.

1. Les Trois Manières d'Intégrer le CSS

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">

2. Anatomie d'une Règle 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 ;

}

Exemple :

h1 {

color: navy; /* Couleur du texte en bleu marine */

font-size: 24px; /* Taille de la police à 24 pixels */

}

3. Les Sélecteurs Clés

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>

4. Propriétés CSS de Base

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.

Le Modèle de Boîte (Box Model)

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).

Exercices d'Apprentissage Progressif en CSS

L'objectif est d'intégrer le CSS avec la structure HTML déjà créée précédemment.

Niveau 1 : Liaison et Styles Simples

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).

Niveau 2 : Classes, IDs et Modèle de Boîte

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).

Niveau 3 : Styliser les Liens et les Listes

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%;

Vidéos

Le web

Les cookies

Naviguer sans trace

Je retiens

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.

MEMO et Astuce

memo-html.pdf

HTML 5

memo-css3.pdf

CSS 3

Comment héberger et afficher une image depuis son compte Google Drive ?

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>

Premiers pas

Ouverture dans un nouvel onglet

Exercices :

Exercice 1 :

Résultat

Code HTML

<!Doctype html>

<html>

<head>

<title>Modèle 1</title>

</head>

<body>

</div>

<p> Zone de Gauche</p>

</div>

<p> Zone du Milieu</p>

</div>

</div>

</body>

</html>

Exercice 2 :

Résultat

Code HTML

<!Doctype html>

<html>

<head>

<title>Modèle 2</title>

</head>

<body>

</header>

<p> Zone de Gauche</p>

</div>

<p> Zone du Milieu</p>

</div>

<p> Zone de Droite</p>

</div>

</div>

</body>

</html>

Exercice 3 :

Résultat

Code HTML

<!Doctype html>

<html>

<head>

<title>Modèle 3</title>

</head>

<body>

<div class="gauche">gauche</div>

<div class="droite">droite</div>

</div>

</body>

</html>

Exercice 4 :

Résultat

Code HTML

<!Doctype html>

<html>

<head>

<title>Modèle 4</title>

</head>

<body>

<section>Milieu</section>

</div>

</body>

</html>

CORRECTION DES EXERCICES 1 à 4 :

bientôt...

Exercice 5 :

Code HTML

<!Doctype html>

<html>

<head>

<title>Modèle 5</title>

</head>

<body>

<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>

</div>

</body>

</html>

Résultat

Exercice 6 :

Code HTML

<!Doctype html>

<html>

<head>

<title>Mon Modele</title>

</head>

<body>

<header>header = zone d'entête</header>

</section>

<footer>footer = pied de page</footer>

</div>

</body>

</html>

Code CSS à compléter

#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 */

}

Résultat attendu

Devoir : Reproduire et compléter

<!DOCTYPE html>
<html lang="fr">
  <head>    <meta charset="utf-8">    <title>Information</title>    <script type="text/javascript"> var divs = ["s1", "s2", "s3", "s4", "s5"]; var visibleId = null;
function show(id) { if(visibleId !== id) { visibleId = id; } hide(); } function hide() { var div, i, id; for(i = 0; i < divs.length; i++) { id = divs[i]; div = document.getElementById(id); if(visibleId === id) { div.style.display = "block"; } else { div.style.display = "none"; } } }   function activate(id) { div = document.getElementById("a1");div.classList.remove("active"); div = document.getElementById("a2");div.classList.remove("active"); div = document.getElementById("a3");div.classList.remove("active"); div = document.getElementById("a4");div.classList.remove("active"); div = document.getElementById("a5");div.classList.remove("active"); div = document.getElementById(id);div.classList.add("active"); } </script> <style type="text/css"> * { border:1px solid black; } html { } body { width : 80%; margin : auto ; } main { min-height:700px; padding:0; margin:0; } header { margin:0; } main { } .section { } header h1 , img { font-size:50px; float:left; height:200px; line-height:200px; margin-right:50px; margin:0; } footer {
} h1, h2 { padding:30px; margin:0px; color: white; } h2 { } .clearer { clear:both; } nav { overflow:hidden; font-size:1.5em; } nav ul { list-style-type: none; } nav li { text-align: center; } nav a { float: left; padding: 14px 16px; text-decoration: none; } nav a:hover {
} nav a.active { } .photo { height:200px; } </style>  </head>
<body>
<header> <img class="photo" src="" alt="" /> <h1></h1> <div class="clearer"></div> </header> <nav> <ul> <li><a id="a1" class="active" href="#" onclick="show('s1');activate('a1');">Information</a></li> <li><a id="a2" href="#" onclick="show('s2');activate('a2');">Experience</a></li> <li><a id="a3" href="#" onclick="show('s3');activate('a3');">Formation</a></li> <li><a id="a4" href="#" onclick="show('s4');activate('a4');">Compétences</a></li> <li><a id="a5" href="#" onclick="show('s5');activate('a5');">Centres d'intérêts</a></li> </ul> </nav> <main> <div id="s1"> <h2 class="section">Information de contact</h2> <ul> <li></li> </ul> </div>  <div id="s2" style="display: none;"> <h2 class="section">Experiences professionnelles</h2> <img src="" > <ul> <li></li> </ul> </div>  <div id="s3" style="display: none;"> <h2 class="section">Formation</h2> <h3>Lycée</h3> <ul> <li></li> </ul> <h3>Collège</h3> <ul> <li></li> </ul> <h3>Ecole</h3> <ul> <li></li> </ul> </div>  <div id="s4" style="display: none;"> <h2 class="section">Compétences</h2> <ul> <li></li> </ul> </div>  <div id="s5" style="display: none;"> <h2 class="section">Centres d'intérêts</h2> <ul> <li></li> </ul> </div> </main>        <footer>        <p>Saint-Thomas d'Aquin 2024-2025</p>    </footer> </body></html>

Points évalués

Fond

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

Forme

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>)

Trouver une photo d'identité

giphy.com/search/smile

Séquence 2

Le Web

Le HTML

La Structure de Base d'une Page HTML

2. Les Balises de Contenu Essentielles

3. Les Liens et les Images

Exercices

Niveau 1 : Découverte et Texte

Niveau 2 : Interactivité et Média

Niveau 3 : Mini-Site

Mario

Luigi

Bowser

Le CSS

1. Les Trois Manières d'Intégrer le CSS

2. Anatomie d'une Règle CSS

3. Les Sélecteurs Clés

4. Propriétés CSS de Base

Le Modèle de Boîte (Box Model)

Exercices d'Apprentissage Progressif en CSS

Niveau 1 : Liaison et Styles Simples

Niveau 2 : Classes, IDs et Modèle de Boîte

Niveau 3 : Styliser les Liens et les Listes

Vidéos

Le web

Le web

Le web

Les cookies

Les cookies

Naviguer sans trace

Je retiens

MEMO et Astuce

HTML 5

CSS 3

Comment héberger et afficher une image depuis son compte Google Drive ?

Premiers pas

Exercices :

Exercice 1 :

Résultat

Code HTML

Exercice 2 :

Résultat

Code HTML

Exercice 3 :

Résultat

Code HTML

Exercice 4 :

Résultat

Code HTML

CORRECTION DES EXERCICES 1 à 4 :

Exercice 5 :

Code HTML

Résultat

Exercice 6 :

Code HTML

Code CSS à compléter

Résultat attendu

Devoir : Reproduire et compléter

Points évalués

Fond

Forme

Trouver une photo d'identité