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 :

Réaliser un site web de 6 pages minimum sur les inventeurs de l'informatique avec une page index et une page sur un informaticien au choix par thème.

Thème Informatique mécanique et historique :

Ada Lovelace : première programmeuse de l'histoire sur un appareil de Babbage
Blaise Pascal : Pascaline
Jacques de Vaucanson et Joseph Marie Jacquard : métiers à tisser automatiques/programmables
Herman Hollerith : carte perforée
Leonardo Torres Quevedo : créateur du premier calculateur électronique
George Boole : l'algèbre binaire
John von Neumann : architecture von Neumann

Thème Informatique théorique :

Alan Turing : machine de Turing, Enigma…
Alonzo Church : lambda calculs et autres propriétés fondamentales
Richard Hamming : codage et détection d'erreurs
Edsger Dijkstra : sémaphore, algorithmie, langage ALGOL
Donald Knuth : TeX, Metafont, the art of programming, un peu de mathématiques…
Leslie Lamport : systèmes réparties et LaTeX
RSA : les inventeurs de l'algorithme de chiffrement asymétrique RSA et quelques autres trucs liés comme le MD2 à MD5
Edgar Codd : modèle relationnel et OLAP

Thème Programmation :

Guido van Rossum : Python
Larry Wall : Perl et patch
James Gosling : Java, Emacs et quelques trucs
Bjarne Stroustrup : C++
John McCarthy : IA, LISP
Niklaus Wirth : langages EULER, Algol W, MODULA et PASCAL ; loi de Wirth
Grace Hopper : Premier compilateur
Margaret Hamilton : Programmeuse à la NASA
Frances Allen : Prix Turing en 2008

Thème Micro-informatique :

Bill Gates et Paul Allen : BASIC, Microsoft et DOS
Steve Wozniak : Apple, Apple I et II
Steve Jobs : Apple, Pixar et NeXT
Larry Ellison : Oracle
Richard Stallman : GPL, FSF, GNU : GCC, Emacs et GDB
Linus Torvalds : noyau Linux et Git

Thème Internet/Web :

Douglas Engelbart : réseaux informatiques, hypertexte et la souris/GUI
Vint Cerf, Louis Pouzin et Bob Kahn : datagramme et TCP/IP
Ray Samuel Tomlinson : courrier électronique
Tim-Berners Lee : Web, HTTP et W3C
Marc Andreessen : navigateurs Mozaic et Netscape
Jimmy Wales : Wikipédia
Larry Page et Sergei Brin : moteur de recherche et Google
Exemple :

index.html
page_1_George_Boole
page_2_Edgar_Codd
page_3_Frances_Allen
page_4_Linus_Torvalds
page_5_Tim_Berners_Lee

Complément sur le html et CSS

Compétences attendues

Elles s'appuient sur les cours de HTML et CSS vu depuis le début de l'année (et que vous pouvez retrouver sur le site). Pour respecter le droit à l'image et le copyright, n'hésitez pas à utiliser vos propres photos ou celles d'un site d'images libres (Pixabay par exemple).

Il s'agira donc de savoir :

  • Manipuler différentes balises;
  • Écrire un code lisible et compréhensible.

Il se décompose en 4 paliers à atteindre:

Description Objectif du projet

Palier 1

Débutant

  • liens hypertextes variés sur différents types d’éléments cliquables (Texte, images, boutons, externe, etc.)
  • des images
  • Des listes
  • des tableaux
  • un fichier CSS

Palier 2

Maitrise

  • Bonne mise ne page
  • code bien présenté
  • Pas de balises obsolètes

Palier 3

Avancé

Création d'un menu pour l'arborescence du site et utilisation des flexbox

Palier 4

Expert

Création d'un quizz avec un formulaire


Fiche de cours