Les langages du Web : HTML et CSS :

Sciences numériques et technologie (SNT)

internet

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 SNT/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%;
 }
  • 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"/>
  • Exécuter la page html ou la rafraîchir (F5).
  • Dans la page « style.css », modifier la couleur (des exemples) et la police de caractère à votre guise (ne pas encore toucher au paramètre font-size) et visualiser les changements sur le navigateur.
  • 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;
 }
  • 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.
  • Tester différents paramètres pour h1 et h2 à votre convenance.
  • Ajouter les lignes suivantes dans « style.css » et sauvegarder : 
    html {
 margin: 50px;
 }
p
{
	font-family: Verdana;
	font-style: italic;
	color: green;
}
  • 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 à la suite de 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 dans le 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.

    Entraînement :

    Réaliser un site web de 3 pages sur le thème cuisine avec 2 recettes de votre choix.
    Complément sur le html et CSS 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)