Cours/ TD HTML SSS TP- HTML5 CSS SN info
SITE WEB HTML CSS
Le fonctionnement des sites WEB
La consultation d’un site web, s’effectue à l’aide d’un navigateur (chrome par exemple). Le serveur WEB
renvoie la page web sous la forme de fichiers écrit en langage HTML et CSS. Le navigateur interprète ces
fichiers et affiche la page correspondante.
Serveur WEB
Demande d’accès au fichier HTML
Code source HTML
HTML et CSS deux langages pour créer des sites web
HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son
rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur
la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon
menu, voici le texte principal de la page, voici une image à afficher, etc. ».
La version actuelle est HTML5
CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de
la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu
compléter le HTML en 1996.
La version actuelle est CSS3
La norme
Le W3C (abréviation de World Wide Web Consortium) est un organisme dont la mission va être de
"surveiller" l'évolution du web : il faut éviter que certaines grosses entreprises tentent de stopper son
évolution pour des raisons commerciales. Le W3C aura aussi la tâche de proposer au fur et à mesure de
nouvelles versions du HTML, justement afin que le Web évolue.
Créer un standard, ça permet donc de s'assurer
que tout le monde parle et comprend le même langage.
Lycée Maryse Bastie – Lycée Jacques Prévert
Section de BAC PRO S.N. Systèmes numériques 1/ 7
Cours/ TD HTML SSS TP- HTML5 CSS SN info
L’éditeur de texte
Pour la création des pages HTML nous allons utiliser
un simple éditeur de texte NOTEPAD++.
Il est simple, en français et gratuit.
Aperçu de Notepad++
ou sublime texte
Sublime Text est un éditeur de texte à mi-chemin de l'IDE avec une auto-
complétion des fonctions de base de différents langages supportés (PHP, C,
C++, etc.)
Le HTML 5
Les Balises
Un document HTML est constitué de balises qui permettent d’identifier les différentes parties du document
Les balises existent soit par paires <balise> </balise> ; soit toutes seules, <balise/>
S'il y a des attributs dans une balise fonctionnant par paire, on ne les met que dans la balise ouvrante
Les Attributs
Les attributs permettent de donner des précisions sur une balise. On peut trouver des attributs sur les deux
types de balises (par paire ou seules).
<balise attribut="valeur"> </balise>
<img src="[Link]"/>
Voici le code de base d'une page web, qui va servir de point de départ à chacune de nos pages :
Lycée Maryse Bastie – Lycée Jacques Prévert
Section de BAC PRO S.N. Systèmes numériques 1/ 7
Cours/ TD HTML SSS TP- HTML5 CSS SN info
< !Doctype > : dit au navigateur que la page utilise le langage HTML5
<html> </html>. C'est la balise principale qui englobera toute votre page HTML. Comme vous pouvez le
voir, on ne la ferme qu'en dernier avec </html>, qui indique que votre page HTML s'arrête là. Il n'y a donc
rien après le </html>.
<head> </head> : Contient quelques informations d'en-tête pour votre page web :
Le titre de votre page web (<title> </title>). Ici, le titre est …………………….
<meta/>. Cette balise indique l'encodage utilisé dans votre fichier .html. C'est lui qui détermine comment
les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).
<body> </body> : c'est le corps de votre site. Vous taperez 99% du contenu de votre page web à
l’intérieur. Pour le moment, il n'y a rien entre ces 2 balises.
- Taper le code précédent à l’aide de notepad++, enregistrer sous le nom : [Link] puis tester le résultat.
- Une balise est de couleur ……………. sur notepad++.
- Un attribut est de couleur …………… sur notepad++.
Le Texte
- Insérer dans le fichier [Link] le code suivant :
- Quel est le rôle de la balise <p></p>
………………………………………………………………………………………………………………
- Quel est le rôle des balises
<h1> </h1> : …………………………………………………………………………………………….
<h2> </h2>: …………………………………………………………………………………………….
<h3> </h3>: …………………………………………………………………………………………….
<h4> </h4>: …………………………………………………………………………………………….
<h5> </h5>: …………………………………………………………………………………………….
<h6> </h6>: …………………………………………………………………………………………….
Lycée Maryse Bastie – Lycée Jacques Prévert
Section de BAC PRO S.N. Systèmes numériques 1/ 7
Cours/ TD HTML SSS TP- HTML5 CSS SN info
- Quel est le rôle de la balise <br />
………………………………………………………………………………………………………………
Mettre en valeur les durées de stage 3 semaines et 16 semaines dans le paragraphe « stage en entreprise »
grâce aux balises <em> </em> et <strong> </strong>
Les Liens
Les liens internes à son site : normalement, votre site comportera plusieurs pages HTML. Si vous voulez
faire un lien d'une page à une autre, vous ferez le plus souvent ce qu'on appelle des liens relatifs. Un lien
relatif est assez court, par exemple "dossier/[Link]".
Les liens vers d'autres sites : ce sont par exemple des liens vers "[Link]
lien est appelé lien absolu et, contrairement au lien relatif, il commence souvent par "[Link]
La balise et l’attribut permettant de créer un lien : (voir page 43)
<a href= "lien relatif ou absolu"> nom du lien </a>
Créer deux pages HTML [Link] et [Link]
- Lien relatif : créer sur la page d’accueil un lien vers la deuxième et la troisième page de votre site.
- Lien absolu : créer sur la page d’accueil un lien vers le site du lycée.
- Rajouter l’attribut title à vos liens et expliquer son rôle. (voir page 54)
……………………………………………………………………………………………………………..
- Créer un lien vers votre adresse mail.
L’Image
Toutes les images diffusées sur Internet sont compressées. Cela veut dire que l'ordinateur fait des calculs
pour qu'elles soient moins lourdes et donc plus rapides à charger :jpeg, png, gif …
La balise et les attributs permettant d’insérer une image : (voir page 54)
<img src= "lien vers l’image" alt : "description de l’image" />.
- Insérer une image sur votre page web 2 et 3. Vous utiliserez les images présentant les horaires et le
règlement d’examen du document de présentation
- Rajouter l’attribut title à votre image et expliquer son rôle.
……………………………………………………………………………………………………………..
Le CSS3
Votre page manque de style, elle n’est pas très esthétique et personnelle. Pour cela, le CSS est toujours
ajouté au HTML. Il y a 3 façons différentes d’associer le code CSS au fichier HTML
dans un fichier .css (méthode la plus recommandée) ;
dans l'en-tête <head> du fichier HTML ;
directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée mais
prioritaire).
Lycée Maryse Bastie – Lycée Jacques Prévert
Section de BAC PRO S.N. Systèmes numériques 1/ 7
Cours/ TD HTML SSS TP- HTML5 CSS SN info
Détaillons la première méthode : Dans un fichier avec l’extension .css
Nom du fichier :
[Link]
Il faudra rajouter une ligne dans votre fichier HTML entre les balises <head> et </head>
Schématiquement, une feuille de style CSS ressemble à ça :
- Editer le fichier [Link] , modifier le fichier [Link], et tester le résultat
- On souhaite que le titre principal soit en rouge de taille 18px (pixels). Pour cela vous utiliserez les
propriétés CSS color et font-size.
L’attribut class permet de différencier des blocs de même nature afin de leur appliquer des propriétés
différentes.
HTML
CSS
Lycée Maryse Bastie – Lycée Jacques Prévert
Section de BAC PRO S.N. Systèmes numériques 1/ 7
Cours/ TD HTML SSS TP- HTML5 CSS SN info
L’attribut id fonctionne comme l’attribut class , mais il ne peut être utilisé qu’un seule fois
- Vérifier le rôle des propriétés CSS suivantes :
margin-top: 20px; ………………………………………………………………………….
margin-left: 20px; ………………………………………………………………………….
margin-right: 20px; ………………………………………………………………………….
margin-bottom: 20px; ………………………………………………………………………….
text-align: center ; ……………………………………………………………………………
text-align: left ; ……………………………………………………………………………….
text-align: right ; ……………………………………………………………………………..
text-align: justify ; ……………………………………………………………………………
font-style: normal ; …………………………………………………………………………..
font-style: italic ; …………………………………………………………………………...…
font-weight: bold ; …………………………………………………………………….…….
font-variant: small-caps ; ……………………………………………………………………
text-decoration: underline ; …………………………………………………………………
text-decoration: line-through ; ………………………………………………………………
text-decoration: overline ; ……………………………………………………………………
text-decoration: blink ; ………………………………………………………………………
text-transform: uppercase ; …………………………………………………………….……
text-transform: lowercase ; ……………………………………………………………..……
text-transform: capitalize ; …………………………………………………………..………
color : #FFFFFF ; ………………………………………………………………………..……
Création d’apparence dynamique
- Vérifier le rôle des propriétés CSS :hover
Organisation d’une page web
En général, une page web est constituée d'un en-tête, de menus de navigation, de différentes sections au
centre… et d'un pied de page.
HTML5 introduit de nouvelles balises pour identifier tous les blocs d’une page web
<header>
<header> : en-tête ;
<footer> : pied de page ;
<nav> : liens principaux de navigation ; <section>
<section> : section de page ;
<nav> <aside>
<aside> : informations complémentaires ;
<article> : article indépendant. <article>
<aside>
<section>
<aside>
<footer>
Lycée Maryse Bastie – Lycée Jacques Prévert
Section de BAC PRO S.N. Systèmes numériques 1/ 7
Cours/ TD HTML SSS TP- HTML5 CSS SN info
Balises universelles
Si aucunes balises citées plus haut ne convient on peut utiliser les balises génériques <span> et <div>
<span></span> (inline) ;
<div></div> (block).
block : une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et
après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de
blocs les uns à la suite des autres
inline : une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. Une balise inline
ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent,
sur la même ligne.
- La balise <p> </p> est elle de type block ? (voir page 131) : …………………………………………
- Placer les paragraphes « La formation » et « Stage en entreprise » entre des balises div
On souhaite que le texte des paragraphes occupe la moitié de la page et que le texte soit justifié.
Pour cela vous utiliserez les propriétés CSS width et text-align. (voir page 133)
- Expliquer les propriétés des commandes CSS suivantes :
width : 20% puis 40% puis 80% ; ……………………………………………………………………….
…………………………………………………………………………………………………………………
height : 20% puis 40% puis 80% ; ……………………………………………………………………….
…………………………………………………………………………………………………………………
overflow : auto ; ……………………..…………………………………………………………………….
…………………………………………………………………………………………………………………
On souhaite que le texte du dernier paragraphe soit encadré d’une bordure correspondant à un trait simple
de largeur 2 pixels et de couleur noire. Pour cela vous utiliserez la propriété CSS border.
On souhaite définir une marge intérieure et extérieure à la bordure. Pour cela vous utiliserez la propriété
CSS padding et margin.
Réaliser le site web ci-dessous, vous utiliserez la propriété display (voir page 149) pour positionner vos
différents blocs
<header>
Présentation du Bac Pro SEN
<nav> <section>
Menu
<article>
Présentation Contenu des différents liens
Horaires du menu
Examen
<footer>
Nom prénom
Lycée Maryse Bastie – Lycée Jacques Prévert
Section de BAC PRO S.N. Systèmes numériques 1/ 7
