Module 1
Création d'un site web interactif
Fiche n°1 Structure de base d’un document HTML5(Rappel)
Les documents HTML sont des documents en texte brut enregistrés avec une extension de fichier .html ou .htm plutôt
qu’une extension de fichier .txt.
Tous les documents HTML ont une structure minimale obligatoire qui comprend la déclaration et des éléments
suivant: <!DOCTYPE html>, <html>, <head> et <body>.
<!DOCTYPE html>
<html lang=”fr”>
<head>
<meta charset=”utf-8”/> <title> Titre de la page </title>
</head>
<body> Contenu visible </body>
</html>
La déclaration du type de document, ou <! DOCTYPE html>, informe les navigateurs web de la version de
HTML utilisé et est placée au début du document HTML. Une déclaration pour un document écrit en HTML5 est
simplement <!DOCTYPE html>
Après la déclaration de type de document, l’élément <html> marque le début du document.
A l’intérieur de <html>, la balise <head> contient l’entête du document, y compris toutes les métadonnées
(informations sur la page Web). Le contenu à l’intérieur de l’élément <head> n’est pas affiché sur la page Web elle-
même. A la place, il peut contenir entre autres :
<title> qui est le titre de la page Web qui apparait dans la barre des titres du navigateur. C’est le seul élément
dans <head> qui a un effet visuel
3ème SI Systèmes & Technologies Informatiques
<link> Qui fait référence à une ressource données comme un fichier de style CSS
<meta> donne des informations supplémentaires sur la page comme, l’encodage, le résumé de la page, des
instructions pour les moteurs d’indexation comme Google,
<style> délimite du code CSS directement dans la page Web
<script> permet d’inclure du code JavaScript dans la page ou bien de faire référence à un fichier contenant du
code JavaScript.
Le code suivant donne un exemple de <head> sachant qu’aucun de ces éléments n’est vraiment obligatoire.
<head>
<meta charset=”UTF-8”>
<meta name=”description” content=”Université Virtuelle
Africaine”>
<meta name=”keywords” content=”UVA, AVU, Université
Virtuelle,
Afrique”>
<meta name=”author” content=”UVA”>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
<style> h1
{color:red;} p
{color:blue;}
</style>
<script> document.getElementById(“demo”).innerHTML = “Hello
JavaScript!”;
</script>
</head>
La dernière série de balises <body> et </ body>, entoure tout le contenu dans la page WEB qui est censé être
affiché comme les titres, les paragraphes, les images, les tableaux etc. Il a quelques attributs intéressent
comme background permet de mettre une image ou une couleur en fond de la page Web.
3ème SI Systèmes & Technologies Informatiques
Module 1 Création d'un site web interactif
Fiche n°2 Syntaxe de base de HTML5(Rappel)
HTML est un langage de balisage permettant de structurer comment le contenu de la page Web va être interprété et
présenté par le navigateur.
Toutes les balises ont le même format : elles commencent par un signe inférieur à « < » et finissent par
un signe supérieur à « > ». Exemple de balises : <a>, <br>, <html>.
Les attributs des balises
Les balises peuvent également contenir des attributs. Les attributs des balises sont des mots qui décrivent des
propriétés de l’élément, et donnent des instructions au navigateur. Les attributs d’un élément HTML sont insérés
dans la balise ouvrante sous la forme générale suivante :
<balise nom_attribut=”valeur” …>
Le nom de l’attribut est suivi d’un signe égal = et la valeur est mise entre guillemets. La ligne suivante
donne quelques exemples de balises avec attributs.
Il existe quelques attributs qui sont communs à presque toutes les balises dont les plus utilisés sont :
id : cet attribut qui permet de donner un identifiant unique à un élément sur la page Web. Sa valeur est
un texte alphanumérique fourni par le programmeur. Cet attribut est presque systématiquement utilisé dans
les fichiers CSS et dans le code JavaScript.
style et class: ces attributs permettent d’appliquer un style CSS sur un élément. Leurs contenus seront
vu dans la partie CSS de ce chapitre
title : Cet attribut permet d’ajouter une information supplémentaire sur un élément. Sa valeur est
souvent présentée comme un texte infobulle par le navigateur.
Le code HTML a quelques règles qui sont importantes à connaitre :
Insensible à la casse : HTML ne fait pas de différence entre les majuscules et les minuscules dans le
nom des balises. <img> est donc équivalent à <IMG>. Toutefois dans le contenu HTML un texte en
majuscule (resp. minuscule) reste en majuscule (resp. minuscule) à moins que vous ayez explicitement
spécifié une transformation de casse dans le code. L’insensibilité à la casse opère dans l’interprétation des
balises et de leurs attributs.
Balises imbriquées : Lorsque des balises sont imbriquées les uns dans les autres, ils doivent suivre une
règle simple : Si une balise est ouverte, toutes les balises en pair qui sont dans son contenu doivent être
fermées avant que sa balise fermante.
Quelques balises auto fermantes: <br>, <embed>, <hr>, <img>, <input>, <link>, <meta>,
<param>, <source>, <wbr>
SI
3ème Systèmes & Technologies Informatiques
Module 1
Création d'un site web interactif
Fiche n°3 Liste des balises en HTML5
Balises de premier niveau
Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables
pour réaliser le « code minimal » d'une page web.
• <html> Balise principale
• <head> En-tête de la page
• <body> Corps de la page
Balises d'en-tête
Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head> :
• <link /> Liaison avec une feuille de style
• <meta /> Métadonnées de la page web (charset, mots-clés, etc.)
• <script> Code JavaScript
• <style> Code CSS
• <title> Titre de la page
Balises de structuration du texte
• <abbr> Abréviation
• <blockquote> Citation (longue)
• <cite> Citation du titre d'une œuvre ou d'un évènement
• <q> Citation (courte)
• <sup> Exposant
• <sub> Indice
• <strong> Mise en valeur forte
• <em> Mise en valeur normale
• <mark> Mise en valeur visuelle
• <h1> Titre de niveau 1
• <h2> Titre de niveau 2
• <h3> Titre de niveau 3
• <h4> Titre de niveau 4
• <h5> Titre de niveau 5
• <h6> Titre de niveau 6
• <img /> Image
• <figure> Figure (image, code, etc.)
• <figcaption> Description de la figure
• <audio> Son
• <video> Vidéo
• <source> Format source pour les balises <audio> et <video>
• <a> Lien hypertexte
SI
3ème Systèmes & Technologies Informatiques
• <br /> Retour à la ligne
• <p> Paragraphe
• <hr /> Ligne de séparation horizontale
• <address> Adresse de contact
• <del> Texte supprimé
• <ins> Texte inséré
• <dfn> Définition
• <kbd> Saisie clavier
• <pre> Affichage formaté (pour les codes sources)
• <progress> Barre de progression
• <time> Date ou heure
Balises de listes
Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes
de définitions…)
• <ul> Liste à puces, non numérotée
• <ol> Liste numérotée
• <li> Élément de la liste à puces
• <dl> Liste de définitions
• <dt> Terme à définir
• <dd> Définition du terme
Balises de tableau
• <table> Tableau
• <caption> Titre du tableau
• <tr> Ligne de tableau
• <th> Cellule d'en-tête
• <td> Cellule
• <thead> Section de l'en-tête du tableau
• <tbody> Section du corps du tableau
• <tfoot> Section du pied du tableau
Balises de formulaire
• <form> Formulaire
• <fieldset> Groupe de champs
• <legend> Titre d'un groupe de champs
• <label> Libellé d'un champ
• <input /> Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
• <textarea> Zone de saisie multiligne
• <select> Liste déroulante
• <option> Élément d'une liste déroulante
• <optgroup> Groupe d'éléments d'une liste déroulante
Balises sectionnantes
Ces balises permettent de construire le squelette de notre site web.
• <header> En-tête
• <nav> Liens principaux de navigation
• <footer> Pied de page
SI
3ème Systèmes & Technologies Informatiques
• <section> Section de page
• <article> Article (contenu autonome)
• <aside> Informations complémentaires
Balises génériques
Les balises génériques sont des balises qui n'ont pas de sens sémantique.
En effet, toutes les autres balises HTML ont un sens :<p> signifie « Paragraphe », <h2> signifie « Sous-titre» etc.
Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres
balises ne convient. On utilise le plus souvent des balises génériques pour construire son design. Il y a deux
balises génériques : l'une est inline, l'autre est block.
• <span> Balise générique de type inline
• <div> Balise générique de type block
Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style :
• class: indique le nom de la classe CSS à utiliser.
• id: donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d'identifier la balise.
Vous pouvez vous servir de l'ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre,
pour un style CSS de type ID, pour des manipulations en JavaScript, etc.
• style: cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes donc pas obligés
d'avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu'il est préférable
de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site
plus facile à mettre à jour par la suite.
Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sans aucun problème
dans la plupart des autres balises.
SI
3ème Systèmes & Technologies Informatiques
Module 1 Création d'un site web interactif
Syntaxe de base CSS 3 (Rappel)
C’est quoi le CSS ?
Le CSS est un langage qui permet de styliser une page HTML à l’aide d’un sélecteur, d’une propriété
et d’une valeur.
Contrairement à l’HTML qui se reconnaît avec ses balises d’ouverture et de fermeture, le CSS lui, se
reconnaît simplement avec ses classes, une accolade précédant ses propriétés et un double-point
précédant ses valeurs et une accolade fermante.
Comment appliquer le CSS a une page HTML ?
Inline: directement dans la balise html avec l’attribut style.
<body style="background-color:black;">
<h1 style="color:white;padding:30px;"> Tutorials </h1>
Embedded (interne): directement dans le fichier html avec la balise <style> .
<head>
<style type="text/css"
>
h1 {color:white; font
-size: 10px;
}
.center {d
isplay: block; margin: 0 auto;}
</style>
</head>
Linked (externe): dans un fichier .css externe et lié via la balise link.
<head
>
<link rel="stylesheet" type="text/css" href="style.css"
> /
</head
>
C’est quoi un sélecteur ?
Un sélecteur est un "nom" qui indique à quels éléments d'une page HTML on desire appliquer une règle.
Chaque règle CSS commence nécessairement par un sélecteur
Syntaxe pour une règle CSS ?
selecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }
Il existe plusieurs méthodes pour identifier les éléments, par exemple:
on indique le nom d'une balise.
on indique la classe d'une balise.
on indique l'identificateur d'une balise.
on indique le nom d'une balise plus sa classe, etc.
3ème SI Systèmes & Technologies Informatiques
Module 1
Création d'un site web interactif
Les attributs HTML class , id et les sélecteurs CSS
Les attributs HTML id et class ?
Ces deux attributs sont particuliers en HTML puisqu’ils n’ont pas été créés pour préciser le
fonctionnement d’un élément HTML en particulier (ce qui est normalement le rôle de tout attribut HTML)
mais vont être principalement utilisés pour cibler certains éléments HTML et leur appliquer des styles en
CSS.
Les attributs HTML class et id sont des attributs dits globaux car on peut les ajouter dans la balise
ouvrante de n’importe quel élément HTML.
Ces deux attributs vont être principalement utilisés dans un but de mise en forme : ils nous servir à
appliquer des styles CSS aux éléments qui vont les contenir.
Comment Utiliser l’attribut « id » en HTML et en CSS ?
L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet
attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le
manipuler avec un script ou qu'on le met en forme avec CSS.
Exemple
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1 id="orange">Exemple Utilisation des id</h1>
<p id="bleu"> Un premier paragraphe </p>
<p id="rouge"> Un autre paragraphe avec un <a href="#">lien</a></p>
<p id="gros">Un troisième paragraphe</p>
</body>
</html>
Code CSS (fichier style.css) Résultat Page HTML
#orange{
color: orange;
}
#bleu{
color: blue;
}
#rouge{
color: red;
}
#gros{
font -size: 24px; }
Pour cibler un id en particulier en CSS, on utilisera le symbole dièse (#) suivi de la valeur de l’id auquel on
souhaite lier des styles.
3ème SI Systèmes & Technologies Informatiques
Comment Utiliser l’attribut « class » en HTML et en CSS ?
L’un des grands intérêts de l’attribut HTML class est qu’un même attribut (et donc les styles CSS liés) va
pouvoir être partagé par différents éléments. Cela facilite grandement la gestion des styles de nos fichiers
HTML et nous permet de gagner beaucoup de temps.
En HTML5, l'attribut class peut servir dans n'importe quel élément HTML.
Pour cibler un class en particulier en CSS, on utilisera le symbole point (.)suivi de la valeur du class.
Valeurs d'attribut class
Valeur Description
• Spécifie un ou plusieurs noms de classe d'un élément.
• Pour spécifier plusieurs classes, séparez les noms de classe par un espace
par exemple < span class = " gauche important " >. Ce qui vous permet de
combiner plusieurs classes CSS pour un élément HTML. Règles de
nomination :
nomClass
• Doit commencer par une lettre de A à Z ou a- z
• Peut être suivie : de lettres (A-Za-z), de chiffres (0-9), des tirets ("-") et de traits
de soulignement (" _ ")
• Comme tous les attributs en HTML, il est insensible à la casse
Exemple
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1 class="gros souligne orange">Un titre de niveau 1</h1>
<p class="bleu">Un premier paragraphe</p>
<p>Un autre paragraphe avec un <a href="#">lien</a>< /p >
< ul >
< li>Elément de liste 1</li >
<li class="souligne"> Elément de liste 2</li >
< /ul >
<h2 class="gros italique bleu"> Un titre de niveau 2</h 2>
</body>
</html>
Code CSS (fichier style.css) Résultat Page HTML
.gros{ font-size:24px; }
/*Texte en italique*/
.italique{
font-style:italic; }
/*Crée un trait de soulignement sous le
texte*/
.souligne{
text-decoration:underline; }
.orange{
color:orange;
}
.bleu { color:blue; }
3ème SI Systèmes & Technologies Informatiques
Module 1 Création d'un site web interactif
Les unités et le Box Model en CSS3
Les unités en CSS ?
Les CSS proposent plusieurs unités possibles pour exprimer tailles et longueurs. Le W3C les répartit en unités
absolues et unités relatives :
Les unités absolues : Il existe des unités en CSS qui ne sont influencées par aucune autre dimension.
Appelées unités absolues, elles sont généralement utilisées pour traduire une longueur, par exemple un
padding, une hauteur de bloc, la taille des caractères.
Les unités absol ues en
CSS
px
Les pixels
in Les pouces
cm Les centimètres
mm Les millimètres
pc Les picas
pt Les points
L’élémentbox aura la même
dimension (150 x 150 pixels),
Exemple
quelle que soit la taille de
.box { l’écran.
width : 150 px ;
height : 150 px ;
}
Les unités relatives : À l’opposé des unités absolues, il existe des unités qui font varier la taille d’un
élément en fonction de la taille de la police ou de l’élément parent. Ces unités dites relatives au texte sont
de plus en plus utilisées pour harmoniser les éléments d’un design. On trouve :
Les unités relatives en CSS
em Ou cadratin, unité proportionnelle à la taille de la police de l’élément parent ou du document
rem L’unité rem fait toujours référence à la taille de la police de l’élément racine.
ex Cette unité est relative à la hauteur de la police actuelle en minuscule.
ch Cette unité est elle aussi peu utilisée, elle est relative à la largeur du caractère “0”.
% Relatives à la dimension du conteneur parent.
Par défaut, 1 em = 16 px si aucune taille de police n’est définie.
3ème SI : STI
Le pourcentage fera référence à
Exemple la largeur calculée de l'élément
parent de la boîte. Ici l’élément
.box {
box prend 50% de la taille de
width : 50%; son élémentconteneur.
Height: 50%;
}
Les CSS offrent plusieurs autres unités comme les unités angulaires ( deg, grad, rad,turn),les
Unités temporelles(s, ms), les Unités de résolution (dpi, dpcm, dppx), les unités relatives au
viewport etc…
Box Model en CSS ?
Les CSS définissent un modèle de boite (box model)
standard pour tous les éléments HTML.
Avec:
Largeur totale=
width+padding+margin
Hauteur
totale=height+padding+margin
Le contenu est caractérisé par sa hauteur (height)
et sa largeur (width).
On distingue deux types de marges : o Les marges
intérieures « padding » o Les marges extérieures «
margin »
Le padding et le margin sont séparés par une bordure (border).
Le padding est l’espace entre la bordure est le contenu html réel de l’élément.
Le margin est l‘espace entre la bordure de l’élément et le reste de contenu du page web.
Chaque dimension (hauteur, largeur, marges) peut être traitée de manière indépendantes grâces aux mots
clés : top, right, bottom, left. Exemple:
.box { margin-left: 1em;
margin-bottom: 1em;
border-right: 1em;
}
On peut utiliser la forme courte pour définir les dimensions (margin et padding) en respectant le sens de
rotation horaire
3ème SI : STI
Types Box Model en CSS ?
Les CSS offrent plusieurs types de Box Model parmi eux on peut citer.
1) Type inline (boîte en ligne)
Pour une boite de type inline les propriétés width and height ne sont pas stylables, la propriété margin
n’aura d’effets que sur les marges gauches et droites.
2) Type Block (boîte en bloc)
Toutes les propriétés sont stylables (modifiables).
Exemple Box model
box.html
<!DOCTYPE html>
<head>
<</head> link href ="stylebox.css" rel="stylesheet">
<body>
<div class="main">CSS Box-Model </div>
<!-- Class main qui contient le titre -->
<!<div id-- id =box pour le model box "box">
Exemple Box Model
</div> -->
</body>
< /html>
Résultat
3ème SI : STI
Module 1
Création d'un site web interactif
Fiche n°7 JavaScript
C’est quoi le JavaScript ?
Le JavaScript est un langage de script qui offre de nombreuses possibilités. Sa présence
croissante sur le web permet de naviguer sur des sites de plus en plus interactifs et rapides.
Il permet, entre autres, d'introduire sur une page web ou HTML des petites animations ou des
effets. Le langage JavaScript se distingue des langages serveurs par le fait que l'exécution des
tâches est opérée par le navigateur lui-même, sur l'ordinateur de l'utilisateur, et non sur le
serveur web. Il s'active donc généralement sur le poste client plutôt que côté serveur.
Quels sont les principaux usages de JavaScript ?
Le langage JavaScript est principalement employé pour améliorer l'ergonomie d'un site
Internet et/ou d'une interface applicative utilisateur. Il sert également à :
Stocker des valeurs utiles dans des variables.
Faire des opérations sur des chaines de texte.
Écouter les événements (comme un clic et mouvement de la souris) Modifiez
le HTML et le CSS de votre page après le chargement de la page Bouger les
choses sur l'écran de manière interactive.
Créez des jeux géniaux qui fonctionnent dans le navigateur
Communiquer des données entre le serveur et le navigateur
Permet d'interagir avec une webcam, un microphone et d'autres appareils
Ordre d’exécution du JavaScript !
Quand le navigateur rencontre un bloc de JavaScript, il l’exécute généralement dans l’ordre,
de haut en bas.
Comment ajouter du JavaScript à votre page ?
Le JavaScript est appliqué à la page HTML un peu comme le CSS. Les éléments <link>
permettent d'appliquer des feuilles de style externes au HTML, le CSS internes utilise
l’élément <style>. Pour le JavaScript il y a une seule façon, avec l’élément <script>.
JavaScript externe :
Prof : Henchiri S 3ème info STI Page 1
Généralement, un script est écrit dans un fichier « .js » à part. Pour exécuter un
script depuis un fichier dans la page web, il suffira d'utiliser <script> avec un
attribut « src » pointant vers le fichier du script en utilisant l'URL du fichier
<script src="chemin/vers/le/script.js"></script>
JavaScript interne :
Il est également possible d'insérer du code JavaScript directement dans la
balise <script> sans fournir d'attribut « src » .
Exemple
<script>
window.addEventListener('load', function () {
console.log('Cette fonction est exécutée une fois
quand la page est chargée.');
});
</script>
Pour éviter des problèmes de chargement sur les pages, il est conseillé de placer
les éléments <script> juste avant la fermeture de
l’élément <body>.
La boîte de dialogue alert() alert() est une instruction
simple, appelée fonction, qui permet d'afficher une boîtez de
dialogue contenant un message. Ce message est placé entre
apostrophes, elles-mêmes placées entre les parenthèses de la fonction. La syntaxe
Javascript
La syntaxe du Javascript n'est pas compliquée. De manière générale, les instructions
doivent être séparées par un point-virgule que l'on place à la fin de chaque instruction :
<script> <script>
instruction_1; alert('Bonjour'); instruction_2; // la fonction
affiche une boîte de
myFunction(); dialogue avec "Bonjour"
</script> </script>
Les
commentaires
<script>
instruction_1; // Ceci est ma première instruction
instruction_2;
/* La troisième instruction ci-dessous,
avec un commentaire sur deux lignes */
instruction_3;
</script>
Les variables en JavaScript
Une variable consiste en un espace de stockage, qui permet de garder en mémoire tout type
de données. La variable est ensuite utilisée dans les scripts. Une variable contient seulement
des caractères alphanumériques, le $ (dollar) et le _ (underscore) ; elle ne peut pas
Prof : Henchiri S 3ème info STI Page 2
commencer par un chiffre ni prendre le nom d'une fonction existante de Javascript. On crée
la variable et on lui affecte (ou attribue) une valeur :
<script> <script>
var myVariable; ou var myVariable = 2; myVariable = 2; <
/script>
</script>
Les types de variables
Une variable peut être de type numérique, une chaîne de caractères ou booléen.
<script>
var text = 'J\'écris mon texte ici';
/* Avec des apostrophes, le \ sert à échapper une apostrophe
intégrée dans le texte, pour ne pas que Javascript pense que le
texte s'arrête là.*/
</script>
Les opérateurs arithmétiquesypes de variables
On peut utiliser 5 opérateurs arithmétiques : l'addition (+), la soustraction (-), la
multiplication (*), la division (/) et le modulo (%).
La concaténation
Une concaténation consiste à ajouter une chaîne de caractères à la fin d'une autre,
comme dans cet exemple :
<script> <script>
var hi = 'Bonjour ', name ='toi', var text = 'Bonjour '; result;
text += 'toi';
result = hi + name; alert(text); alert(result); //
Affiche « Bonjour toi ».
<// Affiche : « Bonjour toi »/script > </script>
On peut convertir un nombre en chaîne de caractères avec l'astuce suivante :
< script var text, number1 = 4, number2 = 2;>
text = number1 + '' + number2;
/* on ajoute une chaîne de caractères vide entre les
deux nombres pour permettre une concaténation sans calcul */
alert(text); // Affiche : « 42 »
</script>
Prof : Henchiri S 3ème info STI Page 3
