Exercices Web (HTML/CSS) - Technologie les Pyramides Vous Motivent

Comment créer une page Web ?

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

Il ne s'agit pas ici de maîtriser pleinement ces langages mais d'en comprendre les rudiments à l'aide des manipulations proposées.

Consulter les différentes parties de cet article en respectant l'ordre indiqué.

Présenter le résultat de chaque exercice au professeur

Définition HTML

L’HTML est un langage informatique utilisé sur l’internet pour créer des pages web.

L’acronyme HTML signifie HyperText Markup Language, ce qui signifie en français “langage de balisage d’hypertexte”.

Mais que balise-t-on ? Et comment ?

Grâce à votre navigateur (Firefox, Chrome, Opera,….), vous allez pouvoir interpréter (=visualiser) les fichiers au format HTML. Un fichier HTML contient du texte avec des balises et permet de créer des liens vers d’autres pages web (=liens hypertextes), vers des photos, des vidéos, formulaires, …

Le langage HTML n’est pas un langage de programmation comme le Python par exemple (pas de conditions “if” ou de boucles “for” …), c’est un langage de description

Que signifie le sigle HTML ?

Exercice 1 - Ecrire un code HTML

Travail : Pour aborder le langage HTML, nous allons, dans un premier temps, utiliser le site “jsfiddle.net” qui permet de simuler des pages web. Cliquer sur le lien hypertext suivant : jsfiddle.net. Vous devriez voir apparaitre ceci à l’écran :

Écrivez le code HTML ci-dessous dans le cadre HTML (en haut à gauche) de jsfiddle.net, puis appuyer sur “Run” (en haut à gauche).

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> Mon Site </title>
</head>

<body>
  <h1>Ceci est un titre</h1>
  <h2>Ceci est un sous titre</h2>
  <p>Ceci est un paragraphe. Avez-vous bien compris ?</p>
  <p>Ceci est un autre paragraphe. Avez-vous réellement compris ?</p>
</body>

</html >

Qu'est-ce qui s'affiche dans la fenêtre Result ?

Le rôle important des balises

Ce qui s'affiche :

Pas les balises si vous regardez bien. Elles se reconnaissent à leurs crochets. Il existe les balises ouvrante (de la forme < balise>) et les balises fermantes (de la forme < /balise >).

Ce sont donc des indicateurs utilisés par le navigateur pour distinguer les différentes parties d’un texte. Il est important de respecter le rôle de chaque balise : on parle de la sémantique des balises.

Les balises classiques

Si une balise classique est ouverte, elle doit être refermée plus loin.

< head> : fournit des informations générales (métadonnées) sur le document,
< body> : représente le contenu principal du document HTML
< h1 > : Le texte situé entre ces balises h1 est obligatoirement un titre important.
< h2 >, < h3 > : aussi des titres, mais moins importants (sous-titre)).
< p > : définit des paragraphes
< a > : lien hypertexte, il renvoie à une nouvelle page.
< strong > : mettre en évidence un élément important.

Les balises ouvrantes ET fermantes

Ces balises n’ont pas besoin d’être refermée.

< br/ > : permet de sauter une ligne

< img/ > : permet d’insérer une image.

En observant attentivement le code, vous devriez forcément remarquer que toute balise ouverte doit être refermée à un moment ou un autre. La balise ouvrante et la balise fermante peuvent être sur la même ligne ou pas, cela n’a aucune espèce d’importance, la seule question à se poser ici est : ai-je bien refermé toutes les balises que j’ai ouvertes ?

Que sont les balises ? Quelle balise permet de créer un paragraphe? Quelle balise permet de sauter une ligne? Quelle balise permet de mettre en évidence (en gras) une partie du texte ?

Exercice 2 - Utilisation des balises <strong> et </br>

Travail : Écrivez le code HTML ci-dessous dans le cadre HTML (en haut à gauche) de jsfiddle.net, puis appuyer sur “Run” (en haut à gauche).

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> Mon Site </title>
</head>

<body>
  <h1>Ceci est un titre</h1>
  <h2>Ceci est un sous titre</h2>
  <p>Ceci est un <strong> paragraphe</strong>. </br>
  Avez-vous bien compris ?</p>
  <p>Ceci est un autre <strong> paragraphe</strong>. </br>
  Avez-vous réellement compris ?</p>
</body>

</html >

Qu'est-ce qui s'affiche dans la fenêtre Result ?

Exercice 3 - Utilisation des balises <a> et </img>

Travail : Écrivez le code HTML ci-dessous dans le cadre HTML (en haut à gauche) de jsfiddle.net, puis appuyer sur “Run” (en haut à gauche).

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> Mon Site </title>
</head>

<body>
  <h1>Ceci est un titre</h1>

  <h2>Ceci est un sous titre</h2>

  <p>Ceci est un <strong> paragraphe</strong>. </br>
  Avez-vous bien compris ? </br>
  <img src="http://ekladata.com/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser." /> </p>

  <p>Ceci est un autre <strong> paragraphe</strong>. </br>
  Avez-vous réellement compris ? </br>
  <a href="http://techno.pvm.free.fr" target="_blank">Le site de technologie</a>  </p>
</body>

</html >

Qu'est-ce qui s'affiche dans la fenêtre Result ?

Quel est le rôle de cette balise ?

<img src="http://ekladata.com/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser." />

Quel est le rôle de cette balise ?

<a href="http://techno.pvm.free.fr" target="_blank">Le site de technologie</a>

Le langage CSS

Le HTML n’a pas été conçu pour gérer la mise en page. Cela est possible mais c’est une mauvaise pratique. Le HTML ne devra s’occuper QUE du contenu.

Pour tout ce qui concerne la mise en page et le « style » de la page, on utilisera le langage CSS : Cascading Style Sheets.

Que signifie le sigle CSS ? Quel est l'intérêt de ce langage?

Pour aller plus loin

Le nuancier de couleurs CSS

Ci-dessous de nombreuses propriétés CSS à attribuer aux balises HTML pour mettre en forme vos textes.

Exercice 4 : Modifier la couleur du fond

Dans jsfiddle.net, il est possible d’écrire du code CSS dans la fenêtre en haut à droite.

Travail : Ecrivez le code suivant puis constatez ce qui change par rapport à tout à l’heure en cliquant sur “Run”, le code html écrit à l'exercice 3 devra être inscrit dans le cadre correspondant

body {
  background-color: yellow
  }

Qu'est-ce qui s'affiche dans la fenêtre Result ?

Exercice 5 : Modifier la mise en forme des textes

Dans jsfiddle.net, il est possible d’écrire du code CSS dans la fenêtre en haut à droite.

body {
  background-color: yellow
  }

h1 {
text-align: center;
background-color: red;
}

h2 {
font-family: Verdana;
font-style: italic; 
color: green;
}

Qu'est-ce qui s'affiche dans la fenêtre Result ?

Exercice 6 : Création des fichier HTML et CSS

jsfiddle.net est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d’un vrai site internet (ou d’une vraie application web).

L’objectif des exercices qui vont suivre sera de créer une page web. Pour y parvenir, nous devrons créer 2 fichiers avec l'éditeur de texte NotePad++ :

un fichier HTML que vous nommerez : index.html
un autre fichier CSS que vous nommerez : style.css

Ces 2 fichiers devront être sauvegardés dans le même dossier (c’est important) que vous nommerez “Mon_Site”

Travail 1 : Ouvrir NotePad ++ et Copier le code de l'exercice 5 puis utiliser la commande Fichier > Enregistrer sous..., sélectionner l'emplacement, nommer le fichier style et modifier le type Cascading Style Sheets

Travail 2 : Ouvrir NotePad ++ et Copier le code de l'exercice 3 puis utiliser la commande Fichier > Enregistrer sous..., sélectionner l'emplacement, nommer le fichier index et modifier le type Hyper Text Markup Language file

Tester votre code en double cliquant sur le fichier index.html créé, votre page Web devrait s'ouvrir dans votre navigateur

La page s'affiche mais sans style, Cela est normal : vous devez rajouter, dans votre fichier HTML, entre les balises head, la ligne de code ci-dessous.

Tester à nouveau votre code en double cliquant sur le fichier index.html créé, votre page Web devrait s'ouvrir dans votre navigateur avec le style défini précédemment

Exercice 7 : Créer votre page web

Travail : Créer votre page web en modifiant les fichiers index.html et style.css créés précédemment

Exemple si l'inspiration vous manque

Ce travail est a réalisé à l'aide de l'éditeur NotePad++ toutefois vous pouvez visualiser la page de ce projet ici https://jsfiddle.net/#&togetherjs=3oN8FHhgMA

La balise <iframe> permet d'intégrer une vidéo

Par exemple sur youtube en utilisant les boutons partagés puis Intégrer on peut copier le code à intégrer entre les balises <body> ou dans un nouveau paragraphe

Travail : Testez avec le code proposé et intégrez votre propre vidéo

<iframe width="560" height="315" src="https://www.youtube.com/embed/JqweQE6TDTc" allowfullscreen></iframe>

width permet de définir la largeur

height permet de définit la hauteur

allowfullscreen permet d'activer la fonction plein écran

Il est possible de poursuivre ce travail en suivant la série de tutoriels disponible ici

: Affichages : 88371