Développement Web 2nde SNT

HTML - CSS
Séances 3 & 4 TD / Cours 2019-2020
Ce TD/cours a pour objectif de vous faire découvrir un acteur fondamental du développement Web,
le coupe HTML+CSS (Hyper Text Markup Langage + Cascading Style Sheets).

PARTIE 1 : Qu’est-ce que le HTML ?

L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour
représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où
son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu
des pages, d’inclure des ressources multimédias, dont des images, des formulaires de saisie, et des
programmes informatiques. Il permet de créer des documents interopérables avec des équipements
très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé
conjointement avec des langages de programmation (JavaScript) et des formats de présentation
(feuilles de style en cascade).

Pour l'instant, nous allons retenir deux éléments de cette définition «conçu pour représenter
les pages web» et «un langage de balisage».

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 et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).

HTML n'est pas un langage de programmation, ici, pas question de conditions, de boucles....c'est un
langage de description.

Pour aborder le HTML, nous allons, dans un premier temps utiliser le site [Link].
Après avoir lancé votre navigateur web, tapez [Link] dans la barre d'adresse, ou
recherchez directement sur google « jsfiddle », et sélectionnez le premier site proposé.

La fenêtre suivante doit apparaître devant vous :

Nous allons pour l’instant uniquement utiliser la fenêtre « HTML » et la fenêtre « Result ».
Activité 1 : FAITES VERIFIER CHAQUE ACTIVITE A VOTRE ENSEIGNANT

Ecrivez dans la fenêtre « HTML » le code HTML suivant :

Une fois ce code HTML saisi, cliquez sur le bouton « Run » situé dans le coin supérieur gauche de la
fenêtre.

 Décrivez ce qui s’affiche dans la fenêtre « Result ».

Comme déjà évoqué ci-dessus, en HTML tout est une histoire de balise que l'on ouvre et que l'on
ferme. Une balise ouvrante est de la forme <nom_de_la_balise>, les balises fermantes sont de la
forme </nom_de_la_balise>.

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 ?

Enfin pour terminer avec les généralités sur les balises, il est important de savoir qu'une structure du
type :

<balise1>
<balise2>
</balise1>
</balise2>

est interdite, la balise2 a été ouverte après la balise1, elle devra donc être refermée avant la balise1.

En revanche, l'enchaînement suivant est correct :

<balise1>
<balise2>
</balise2>
</balise1>

Notez que dans notre exemple nous respectons bien cette règle « d'imbrication » des balises avec la
balise <p> et la balise <strong>.

Il est important de comprendre que chaque balise a une signification qu'il faut bien respecter (on
parle de la sémantique des balises). Par exemple le texte situé entre la balise ouvrante et fermante
<h1> est obligatoirement un titre important (il existe des balises <h2>, <h3>......qui sont aussi des
titres, mais des titres moins importants (sous-titre)). La balise <p> permet de définir des paragraphes,
enfin, la balise <strong> permet de mettre en évidence un élément important, en le mettant en gras.
Vous devez aussi savoir qu’il existe des balises qui sont à la fois ouvrantes et fermantes (<balise/>) :
un exemple, la balise permettant de sauter une ligne, la balise <br/>.

Il est possible d'ajouter des éléments à une balise ouvrante, on parle d'attribut. Une balise peut
contenir plusieurs attributs :

<ma_balise attribut_1= "valeur_1" attribut_2="valeur_2">

Il existe beaucoup d'attributs différents, nous allons nous contenter de 2 exemples avec l'attribut id
(id pour identifiant) et class. Nous verrons l’intérêt de ces attributs dans l'activité suivante.

Activité 2 : FAITES VERIFIER CHAQUE ACTIVITE A VOTRE ENSEIGNANT

Ecrivez dans la fenêtre « HTML » le code HTML suivant :

 Décrivez ce qui s’affiche dans la fenêtre « Result ».

Le HTML n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une mauvaise
pratique). Le HTML s'occupe uniquement du contenu et de la sémantique, pour tout ce qui concerne
la mise en page et l'aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS
(Cascading Style Sheets).

Dans JSFIDDLE, il est possible d'écrire du CSS dans la fenêtre en haut à droite.

Activité 3 : FAITES VERIFIER CHAQUE ACTIVITE A VOTRE ENSEIGNANT

Ecrivez dans la fenêtre « HTML » le code HTML suivant : (même que l’activité 2)

Ecrivez dans la fenêtre « CSS » le code CSS suivant :

  Décrivez ce qui s’affiche dans la fenêtre « Result ». Que constatez-vous ?

Il est donc possible de cibler un paragraphe et pas un autre en utilisant l'id du paragraphe (en CSS l'id
se traduisant par le signe #).

Il est aussi possible d'utiliser l'attribut class à la place de l'id. Dans le CSS on utilisera le point . à la
place du #.

La différence entre "id" et "class" n'est pas très importante.

L'attribut "class" permet de donner le même nom à plusieurs reprises dans une même page.

Si nous avions eu un 3e paragraphe, nous aurions pu avoir :<p class="para_1">Voici un 3e

paragraphe</p>, mais nous n'aurions pas pu avoir : <p id="para_1"> Voici un 3e paragraphe </p>, car
le nom para_1 a déjà été utilisé pour le 1er paragraphe.

Activité 4 : FAITES VERIFIER CHAQUE ACTIVITE A VOTRE ENSEIGNANT

Ecrivez dans la fenêtre « HTML » le code HTML suivant : (même que l’activité 2)

Ecrivez dans la fenêtre « CSS » le code CSS suivant :

 Décrivez ce qui s’affiche dans la fenêtre « Result ». Que constatez-vous ?

JSFIDDLE 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).
Activité 5 : FAITES VERIFIER CHAQUE ACTIVITE A VOTRE ENSEIGNANT

A l’aide de l’outil Notepad++ installé sur l’ordinateur que vous utilisez, créer un nouveau fichier. Pour
mettre le logiciel en Français, cliquer sur l’onglet « Settings » puis « Preferences » et choisir Français.
Sauvegardez-le en précisant le nom « [Link] » (Fichier  Enregistrer sous, choisi Type : Hyper
Text Markup Language File et saisir « [Link] » dans le champ « Nom du Fichier »).

Ecrivez alors le code suivant, n’oubliez pas de sauvegarder une fois ce code saisi.

Une fois le code saisi, il faut le tester. Pour cela, il vous suffit de cliquer sur l’onglet « Exécution » puis
choisir le navigateur Web de votre choix. Si aucun navigateur apparaît, cliquer sur l’onglet
« Affichage » puis « Afficher le fichier dans » et choisir Edge !

Dans l’activité 5 ci-dessus, vous reconnaissez le code se trouvant entre les balises <body>

<body> … </body>

Tout votre code HTML devra se trouver entre ces 2 balises.

Le reste des balises devraient vous êtres inconnues. Voici quelques informations à leur sujet :
 < !DOCTYPE html> permet d’indiquer au navigateur que nous utiliserons la dernière version
du HTML, le fameux HTML5
 La balise <html> est obligatoire, l’attribut lang= « fr » permet d’indiquer au navigateur que
nous utiliserons le français pour écrire notre page
 Les balises <head> … </head> délimitent ce que l’on appelle l’en-tête. L’en-tête contient
dans notre exemple, 2 balises :
o La balise <meta charset= « utf_8 »> qui permet de définir l’encodage des caractères
(utf_8).
 o La balise <title> qui définit le titre de la page (!!! Ce titre ne s’affiche pas dans le
navigateur, ne pas confondre avec la balise <h1> !!!).

Activité 6 : FAITES VERIFIER CHAQUE ACTIVITE A VOTRE ENSEIGNANT

Après avoir créé votre premier programme HTML nous allons à présent mettre en forme le contenu
de votre page Web à l’aide du langage CSS.

Comme pour l’activité 5, créez un second fichier qui va contenir le code CSS, nous nommera ce
fichier « [Link] ».

Sauvegardez-le en précisant le nom « [Link] » (Fichier  Enregistrer sous, choisi Type : Cascade
Style Sheets File et saisir « [Link] » dans le champ « Nom du Fichier »).

Ecrivez alors le code suivant, n’oubliez pas de sauvegarder une fois ce code saisi.

A ce stade notre fichier CSS ne sera pas appliqué à la page HTML que vous avez créé à l’activité
précédente. Pour ce faire, il faut modifier le code HTML en ajoutant une ligne qui va permettre
d’associer le code CSS à la page.

Modifiez le code HTML avec la ligne suivante : <link rel= « stylesheet » href= « [Link] »>
Une fois le code saisi, il faut le tester. Il vous faut tester le fichier « [Link] » et non « [Link] ».
Pour cela, il vous suffit de cliquer sur l’onglet « Exécution » puis choisir le navigateur Web de votre
choix. Ou sur l’onglet « Affichage » puis « Afficher le fichier dans » et choisir Edge.

 Que constatez-vous ? Le fichier « [Link] » a-t-il été bien pris en compte et exécuté
correctement ? Pourquoi ?

Dans les activités que vous venez de réaliser, les fichiers « [Link] » et « [Link] » ne se trouvent
pas dans le même dossier. Le fichier « [Link] » se situe dans le dossier HTML puis le dossier
correspondant à l’activité 6. Le fichier « [Link] » se situe lui dans le dossier CSS puis dans le dossier
correspondant à l’activité 6. Il est donc nécessaire de spécifier l’URL du fichier « [Link] » dans le
fichier « [Link] ». Vous pouvez retrouver ce chemin à partir de l’arborescence qui vous a été
présenté en début de séance.

Enfin, ci-dessous quelques balises couramment utilisées :

 La balise « a » : En saisissant le code suivant :

Vous obtiendrez le résultat suivant sur votre navigateur Web après avoir exécuté votre fichier HTML.

Cette balise permet donc de créer des liens hypertextes, comme celui présenté ci-dessus, qui vous
permettront de « voyager » entre les pages d’un site ou entre sites Web. Les liens hypertextes sont
par défaut soulignés et de couleur bleue (modifiable grâce au CSS). La balise « a » possède un
attribut « href » qui a pour valeur le chemin du fichier que l’on cherche à atteindre ou l’adresse du
site Web cible (ex : <a href = [Link] Cliquez ici pour vous rendre sur [Link]</a>)

Entre la balise ouvrante et fermante, on trouve le texte qui s’affichera à l’écran (c’est ce qui est
souligné et de couleur bleue). La balise peut sans problème se trouver au milieu d’un paragraphe.

 La balise « image » : cette balise, comme son nom l’indique permet d’insérer des images ! Au
travers du code suivant :
Nous pouvons constater que la balise « img »est à la fois ouvrante et fermante, comme la balise
« br ». Elle possède deux attributs :

o « src » qui doit être égal au nom du fichier image (ou au chemin si le fichier image se
trouve dans un autre dossier).
o « alt » qui doit être égal à une description de votre image (cet attribut est utilisé
notamment par les systèmes de description des pages Web utilisées par les non-
voyants), il faut donc systématiquement renseigner un attribut.

 Les balises « form », « input » et « button » : Les formulaires sont des éléments importants
des sites Web, ils permettent à l’utilisateur de transmettre des informations. Un formulaire
devra être délimité par une balise « form » :
<form> … </form>
o Il existe différentes balises permettant de construire un formulaire, notamment la
balise « input ». Cette balise possède un attribut « type » qui lui permet de jouer des
rôles très différents.
o La balise « button » nous sera également utile, à vous d’en déduire son utilité à partir
de la prochaine activité.

Activité 7 : FAITES VERIFIER CHAQUE ACTIVITE A VOTRE ENSEIGNANT

Créez un fichier html contenant le code suivant, vous nommerez ce fichier « [Link] » et saisir le
code HTML suivant :

Après avoir enregistré votre programme, vous pouvez l’exécuter afin de voir la page que vous venez
de créer.

Quelle est alors la fonction de la balise « button » ?

 Les balises « div » et « span » : Ces deux balises sont très utilisées (surtout la balise « div »).
Pourtant, il faudrait, autant que possible, les éviter, pourquoi ?
o Parce qu’elles n’ont aucune signification particulière, ce sont des balises dites
« génériques ».
 A quoi servent-elles ?
o A organiser la page, à regrouper plusieurs balises dans une même entité.
  Pourquoi 2 balises génériques ?
o Parce que « div » est une balise de type « block » et que « span » est une balise de
type « inline ».

Sans trop rentrer dans les détails, il faut bien comprendre que l’ordre des balises dans le code HTML
a une grande importance. Les balises sont affichées les unes après les autres, on parle du flux normal
de la page.

C’est ici qu’entrent en jeu les balises de type « block » et les balises de type « inline ».

 Les contenus des balises de type « block » (ex : « p », « div », « h1 », …) se placent sur la
page Web les uns en dessous des autres.
 Les contenus des balises de type « inline » (ex : « strong », « img », « span », « a », …) se
placent sur la page Web les uns à côté des autres.

Cela revient à dire qu’une balise de type « block » prend toute la largeur de la page alors qu’une
balise de type « inline » prend jute la largeur qui lui est nécessaire.

Activité 8 : FAITES VERIFIER CHAQUE ACTIVITE A VOTRE ENSEIGNANT

Créez le fichier html, nommé « [Link] » contenant le code suivant :

Après avoir enregistré votre programme, vous pouvez l’exécuter afin de voir la page que vous venez
de créer.

Partie 2 : Deviens développeur Web du cinéma

Dans cette seconde partie vous allez devoir créer des pages Web relatives à des films du cinéma.
Vous trouverez ci-dessous la liste des films à votre disposition, vous devrez donc en choisir un parmi
les 12 proposés. CHOIX A FAIRE EN ACCORD AVEC VOTR ENSEIGNANT (1 BINOME = 1 FILM).
Votre site Web devra contenir trois pages html :

 La première sera celle de présentation et contiendra notamment le titre du film son affiche
ainsi que des liens hypertextes vers les deux autres pages.
 La seconde page Web devra présenter le film au travers d’un synopsis et différentes
informations sur ce film (année de sortie, réalisateur, …) + liens vers page 1 et page 3.
 La troisième et dernière page fera référence au casting du film avec le nom des acteurs
principaux et éventuellement une photo de ceux-ci + liens vers page 1 et page 2.

Titre du film Lien « Allociné »

ALADDIN [Link]
ALITA : BATTLE ANGEL [Link]
ANNABELLE – LA MAISON DU MAL [Link]
AVENGERS : ENDGAME [Link]
CA : CHAPITRE 2 [Link]
CAPTAIN MARVEL [Link]
COCO [Link]
FAST & FURIOUS 8 [Link]
GEMINI MAN [Link]
GLADIATOR [Link]
HARRY POTTER ET LES RELIQUES [Link]
DE LA MORT – PARTIE 2
JOKER [Link]
LA LIGNE VERTE [Link]
LE ROI LION [Link]
MALEFIQUE [Link]
SHAZAM ! [Link]
TOY STORY 4 [Link]
US [Link]

Une fois votre site Web terminé, vous le présenterez à l’ensemble de la classe.

Sources : [Link] de David Roche