Les bases de HTML et CSS

Numérique et sciences informatiques

ihm

Nous allons nous intéresser à un acteur fondamental du développement web, le couple HTML+CSS (Hyper Text Markup Langage et Cascading Style Sheets).

Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera,....), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires ,des photos, des vidéos grâce à la dernière version du HTML, l'HTML5.

HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles....c'est un langage de description avec des balises

Pour découvrir le langage HTML, nous allons utiliser sublimText (un éditeur de code) téléchargeable ICI.

Enregistrer votre premier site et visualiser sur votre navigateur le résultat (ctrl+s pour sauvegarder et clique droit/open in browser pour visualiser dans un navigateur) : 

Hello world ! Ceci est mon premier site web. Merci M. Berners-Lee

Pour avancer plus rapidement, récupérer l'archive contenant les pages que nous allons utiliser ICI.
Une fois décompressé("extraire") sur votre clé, votre dossier NSI/site_internet doit comporter 4 pages.

Une page index.html

  1. Ouvrir le fichier index.html avec l’éditeur de texte SublimText.
  2. Recopier les lignes suivantes : 
    <!DOCTYPE html>
<html lang="fr">
	<head> <!--Ceci permet de mettre un commentaire qui ne s'affiche pas sur la page du navigateur (spé NSI)-->
		<meta charset="utf-8"> <!--permet de définir l'encodage des caractères (spé NSI)-->
	</head>
	<body>
	</body>
</html>
  3. Entre les balises <head> et </<head>, ajouter un titre à cette page html avec la balise <title></title> : <title> Page de Nom Prénom </title> (par souci de clarté, respecter l’indentation (le décalage))
  4. Dans la partie body, écrire votre Nom Prénom, votre ville et votre date de naissance sur trois lignes différentes.
  5. Sauvegarder la page html et l’exécuter à l’aide d’un navigateur quelconque.
    a. Le retour à la ligne est-il conservé dans le navigateur ?
  6. Ajouter la balise <br> après votre nom et votre ville, sauvegarder et exécuter.
    b. Quel est le rôle de cette balise <br> ?
    c. Le titre de la page est-il visible sur la page affichée par le navigateur internet ? Si oui, où ?
  7. Dans la partie body, ajouter la ligne suivante, enregistrer et visualiser sur le navigateur :
    <center> <img src="maison.jpg" /> </center>
    d. Quel est le rôle de la balise center ?

Une page style.css

  1. Ouvrir la page style.css toujours avec SublimText et y recopier les lignes de code suivantes à la suite et sauvegarder : 
    body {
 background-color: pink; 
 font-family: arial; 
 font-size: 100%;
 }
  2. Intégrer dans le code de la page « index.html » la ligne suivante dans la partie head et sauvegarder :
    <link rel="stylesheet" href="style.css"/>
  3. Exécuter la page html ou la rafraîchir (F5).
  4. Dans la page « style.css », modifier la couleur et la police de caractère à votre guise (ne pas encore toucher au paramètre font-size) et visualiser les changements sur le navigateur.
  5. Ajouter à présent les lignes suivantes à la suite de la page « style.css » et sauvegarder : 
    h1 {
 font-size: 200%; 
 color: red; 
 text-align: center;
 }
h2 {
 font-size: 100%; 
 color: blue; 
 text-align: right;
 }
  6. Dans la page « index.html » mettre la première phrase du body entre les balises <h1> et </h1> et la deuxième entre <h2> et </h2>. Laisser la troisième phrase libre. Sauvegarder et visualiser le résultat sur le navigateur.
  7. Tester différents paramètres pour h1 et h2 à votre convenance.
  8. Ajouter les lignes suivantes dans « style.css » et sauvegarder : 
    html {
 margin: 50px;
 }
p
{
	font-family: Verdana;
	font-style: italic;
	color: green;
}
  9. Modifier la valeur de margin puis essayer de remplacer px par %.
    e. Que signifie l’unité px ? Même question pour %.
    f. Remplacer la commande margin par margin-left. Quel changement observe-t-on ?

Création de liens href

  1. Ajouter le code à la page nommée « page1.html » 
    <!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>page 1</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<h1>titre page 1</h1>
		<p>Ceci est un paragraphe avec un mot en <strong>gras</strong>.</p>
		<img src="images\gateau_chocolat.jpg" alt="gâteau"/><!--La balise pour insérer une image-->
	</body>
</html>
  2. Ajouter le code suivant à la page nommée « page2.html » 
    <!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>page 2</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<h1>titre page 2 : les listes</h1>
		<ul>
			<li>Premier élément de ma liste</li>
			<li>Deuxième élément de ma liste</li>
			<li>Troisième élément de ma liste</li>

		</ul>		
	</body>
</html>
  3. Ajouter la ligne de code suivante dans la partie body de la page « index.html » :
    <br><br> <a href="page1.html"> Cliquer ici pour aller à la page 1 </a>
  4. Sauvegarder et regarder le résultat sur le navigateur
  5. Dans la page « style.css » ajouter les lignes suivantes et sauvegarder : 
    a:link {
 font-family: comic sans ms;
 color: yellow;
 text-decoration: underline;
 }
a:visited {
 color: darkviolet;
 }
a:hover {
 color: green;
 text-decoration: none;
}
  6. Ajouter la ligne de code suivante à la suite de la partie body de la page « index.html » :
    <br> <a href="page2.html"> Cliquer ici pour aller à la page 2 </a>
  7. Sauvegarder et regarder le résultat sur le navigateur.
    g. Quel est l’effet de la pseudo-classe a:visited ?
    h. Même question pour la pseudo-classe a:hover.

A vous de jouer !

Ajouter aux pages « page1.html » et « page2.html » un lien de retour vers la page « index.html ».
Ce lien de retour doit être centré horizontalement sur la page et ne doit pas être composé d’une phrase, mais d’une photo (.jpg ou .png) sur laquelle il faut cliquer.

Projet : Créez un site sur les Médaillés Olympiques Français de 2024

Objectif du Projet

Vous allez réaliser un site web interactif de 6 pages minimum qui présentera les médaillés olympiques français des Jeux Olympiques de Paris 2024. Votre site doit inclure :

  • Une page d'accueil avec une présentation générale des Jeux Olympiques 2024.
  • Des pages dédiées à différents sportifs français médaillés, classées par catégories de sport.
  • Un tableau récapitulatif des médailles obtenues par la France avec des statistiques.

Thèmes à aborder

Votre site devra inclure au moins une page sur chacun des thèmes suivants :

  • Sport individuel : Présentez un(e) athlète d'un sport individuel (athlétisme, judo, natation...)
  • Sport collectif : Présentez une équipe médaillée (ex : handball, rugby, basket-ball)
  • Paralympiques : Mettez en avant un(e) athlète paralympique français(e)
  • Événements marquants : Décrivez un moment fort ou marquant des JO de Paris 2024
  • Statistiques : Un tableau récapitulant le nombre de médailles gagnées par sport

Compétences techniques à utiliser

Votre projet devra démontrer votre maîtrise des compétences en HTML et CSS acquises en cours :

  • Utilisation des balises structurantes (<header>, <footer>, <nav>, <section> ou règles CSS pour améliorer l'affichage des images <width>, <height>, <border>, <margin-bottom> etc..
  • Insertion d'images libres de droits et d'hyperliens (liens internes et externes).
  • Création de tableaux pour afficher les statistiques des médailles.
  • Création d'une mise en page responsive à l'aide de CSS (Flexbox, Grid).

Étapes du projet

  1. Phase 1 : Conception de la structure du site avec une page d'accueil et des pages individuelles pour chaque thème.
  2. Phase 2 : Mise en forme des pages avec CSS, en respectant l'homogénéité du design (polices, couleurs, etc.).
  3. Phase 3 : Ajout de fonctionnalités interactives (ex : un quiz ou un formulaire en option).
  4. Phase 4 : Finalisation du projet, vérification des liens et mise en conformité avec les bonnes pratiques de développement web.

Palier de compétences

Le projet sera évalué selon 4 niveaux :

Palier 1 : Débutant

    Objectif : Comprendre et utiliser les bases du HTML.

    Compétences attendues :

    • Créer des pages HTML simples.
    • Ajouter des liens internes (<a href="#">) et externes.
    • Insérer des images (<img src="url">) et les formater correctement.
    • Créer des listes (ordonnées <ol> et non ordonnées <ul>).

    Mots-clés HTML : <html>, <head>, <body>, <a>, <img>, <ul>, <ol>, <li>, <p>, <h1> à <h6>

    Mots-clés CSS : color, font-family, font-size, background-color, text-align

    Résultat : Un site fonctionnel avec du contenu textuel, des images et une navigation basique via des liens.

Palier 2 : Maîtrise

    Objectif : Améliorer la mise en page et l’esthétique grâce au CSS.

    Compétences attendues :

    • Appliquer des styles CSS (couleurs, typographie, marges, bordures).
    • Organiser la page avec des classes (class="") et identifiants (id="").
    • Créer une mise en page structurée avec des sections et des éléments bien alignés.
    • Utiliser un code HTML et CSS propre et bien organisé.

    Mots-clés HTML : <div>, <span>, class, id

    Mots-clés CSS : margin, padding, border, width, height, background, display, position, float

    Résultat : Un site avec une mise en page claire, cohérente et agréable à regarder.

Palier 3 : Avancé

    Objectif : Créer une navigation interactive avec des sous-menus déroulants.

    Compétences attendues :

    • Créer un menu de navigation avec des liens et des sous-menus déroulants.
    • Utiliser des pseudo-classes CSS comme :hover pour afficher les sous-menus.
    • Ajouter des transitions en CSS pour rendre l'apparition des sous-menus fluide.
    • Organiser la navigation pour qu’elle soit intuitive pour l’utilisateur.

    Mots-clés HTML : <nav>, <ul>, <li>, <a>

    Mots-clés CSS : :hover, display: none, display: block, transition, position: absolute, z-index, list-style

    Résultat : Un site avec un menu de navigation interactif incluant des sous-menus déroulants.

Palier 4 : Expert

    Objectif : Ajouter de l’interactivité via le JavaScript.

    Compétences attendues :

    • Créer et intégrer un formulaire interactif (ou un quiz).
    • Utiliser JavaScript pour gérer les événements comme les clics ou la soumission de formulaire.
    • Valider les formulaires côté client avec JavaScript.
    • Rendre la page plus dynamique en mettant à jour le contenu sans recharger la page.

    Mots-clés HTML : <form>, <input>, <button>, <label>, type="text", type="submit"

    Mots-clés CSS : form-style, input-style, button:hover

    Mots-clés JavaScript : document.getElementById(), addEventListener(), onsubmit(), alert(), innerHTML

    Résultat : Un site interactif avec des éléments dynamiques comme des formulaires ou des quiz.

Ressources et consignes

N'oubliez pas d'utiliser des images et des contenus libres de droits (ex : Pixabay pour les images). Vous pouvez vous baser sur les cours HTML et CSS vus depuis le début de l'année pour vous guider dans la réalisation de votre projet.

Le projet est à rendre pour la fin du mois. Bon courage à tous !

Complément sur le html et CSS

Fiche de cours