FICHE DE PRESENTATION DES MODULES QUALIFIANTS
MODULE : Programmation HTML avec JavaScript et CSS
CODE : M.Q.3
DUREE : 102 HEURES
OBJECTIF MODULAIRE
COMPORTEMENT ATTENDU
A l’issue de ce module qualifiant, le stagiaire doit être en mesure d’utiliser HTML,
CSS et JavaScript pour construire des applications Web évolutives qui peuvent
dynamiquement détecter et s’adapter à différentes capacités de périphériques et de
formats.
Selon les conditions, les critères et les précisions suivantes.
CONDITION D’EVALUATION
Individuellement ou en groupe.
Travail effectué à partir :
- d'études de cas et mises en situation
Travail effectué à l'aide :
- d’un environnement de développement (IDE)
- d’un serveur web
- de la documentation technique
CRITERES GENERAUX DE PERFORMANCE :
- Utilisation des instructions et des structures appropriées.
- Vérification rigoureuse du travail.
- Fonctionnement correct du programme.
- Documentation correcte du programme.
- Respect des règles syntaxiques.
Langages de programmation pour le Web
Cours N1
I. Notions de base à la programmation web
1. Markup :
À l'origine indications typographiques est un jeu de signes utilisé dans un texte
manuscrit pour indiquer aux typographes comment il fallait le composer (paragraphes,
choix de caractères (police, taille, graisse, inclinaison), etc.
Par exemple, si je veux écrire en gras, je vais définir une zone où tout sera en gras :
<GRAS> Cette phrase est en gras</GRAS>
Ce qui donnera : Cette phrase est en gras, c’est-à-dire imposer une structure à un
texte.
2. Langages à balises
Une classe de langages dont l’objectif est la représentation de l’information en
utilisant des balises
a) Balise :
Unités syntaxiques délimitant des séquences de caractères à l'intérieur d'un flux de
caractères (exemple : fichier texte).
L'inclusion de balises permet de transférer à la fois :
La structure du document (Exemple précédent : <GRAS>) Son contenu. (Exemple
précédent : Cette phrase est en gras)
Cette structure est compréhensible par un programme informatique, ce qui permet un
traitement automatisé du contenu.
b) HTML = Hyper Text Markup Language
Développé en 1990 par Tim Berners-Lee est un langage de formatage de documents
hypertextes. Autrement dit, il sert à définir la structure et le contenu des pages Web.
c) XML = Extensible Markup Language
La version 1.0 de XML, publiée en 1998 par le consortium W3C intermédiaire entre
SGML et HTML. Il évite les aspects les plus complexes de SGML tout en gardant
suffisamment de souplesse pour une utilisation généraliste, la mise en forme des
données est totalement séparée des données elles-mêmes.
La possibilité de créer les éléments que l'on désire permet de rendre le fichier lui-même
lisible -et modifiable- par un être humain.
Exemple :
Avec le Html :
Balise b = bold (mise en gras) :
<b>Attention !</b>
Avec le XML :
<Important>Attention !</important>
Présenter la chaîne de caractères importante avec une mise en forme particulière
(italique, rouge, gras, etc.)
3. Quelque caractéristiques HTML
HTML = Hyper Text Markup Language un Langage de formatage de documents
hypertextes (définir la structure et le contenu des pages Web.)
Développé en 1990 par Tim Berners-Lee (CERN - Genève)
Rapidement popularisé par Mosaic (le 1er navigateur Web)
Dès la version 2.0, les spécifications de ce langage ont été confiées au W3C
C’est un langage à balises (ou langage dit de "marquage", de "structuration", de
"balisage" ou "Tags" en anglais)
Ces balises permettent d'indiquer la façon dont doit être présenté le document
et les liens qu'il établit avec d'autres documents.
Format ouvert : lecture possible dans des conditions correctes sans contrainte
matérielle ou logicielle
HTML est un langage qui alterne texte et balises <bal>…</bal>
Les fichiers HTML : Un fichier texte avec des balises
Extension: .htm ou .html
Structuré en deux parties principales :
L’en-tête <head> ... </head> et le corps <body> ... </body>
En HTML, les blancs (espace, tabulations, retours à la ligne) sont en général
équivalents et servent juste à délimiter mots, balises. . . Leur nombre n’a pas
d’importance.
on ne décrit pas la présentation (ce sera le rôle de CSS)
on ne décrit pas de comportement dynamique (ce sera le rôle de JavaScript et
des langages côté serveur)
HTML n'est pas un langage de programmation !
Ce n'est qu'un langage de description de documents.
Historique
Années 1990 : HTML est créé par Tim Berner-Lee au Centre Européen de
Recherche Nucléaire (CERN)
1995 : HTML 2.0 normalisation par l'IETF
1996 : HTML 3.2 ajout des tables, des applets (Java), etc.
1998 : HTML 4.01 ajout des feuilles de styles, des frames, etc.
2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
2002 : XHTML 2.0 en cours de spécification
2007 : HTML5
Normalisation par le W3C2 depuis 1996.
Cours N 2
II. Syntaxe de base HTML
Voici les cinq règles de base pour faire du HTML :
1. Définir une zone : <BALISE> Zone </BALISE>
Lorsqu'on définit une zone, on suppose que tous les objets qui sont à l'intérieur
possèdent une certaine propriété (exemple : écrit en gras).
2. Balise ponctuelle : <BALISE>
Certaines balises ne nécessitent pas d'être refermées car elle ne définit pas de zone à
proprement parler, mais un endroit où une action de produit (par exemple la balise
<BR> saute à la ligne).
3. Paramétrage d'une balise : <BALISE paramètre="valeur">
Il existe toujours un grand nombre de paramètres pour une balise (par exemple dans la
balise <P>, qui marque les paragraphes, on peut préciser le paramètre
(align = left|center|right|justify).
Certains paramètres sont obligatoires par exemple dans la balise affiche l'image
[Link]
<IMG src="[Link]">
4. Imbrication des balises : <BAL1>...<BAL2>...</BAL2>...</BAL1>
Les balises sont ouvertes et refermées dans l’ordre :
(<b><i></i></b> et non <b><i></b></i>).
5. Commentaires : < ! ― ― Ceci est un commentaire ― ―>
Exemples
<Title>Ma page</title>
Pour attribuer le titre Ma page au document
<Em>cuicui</em>
Pour mettre en emphase le texte cuicui (cela sera rendu, le plus souvent, par une mise en
italique).
<Strong>cuicui</strong>
Pour indiquer que le texte cuicui est important (cela sera rendu, le plus souvent, par une
mise en gras).
Contre-exemple
<strong><em>ou est l’erreur ?</strong></em>
III. Structure d’un document
Figure 1 : Structure d’un document HTML
1. En-tête
L’en-tête du document est délimité par les balises :
<head> ... </head>
L’en-tête contient des méta-informations concernant le document telles que : son titre,
son encodage, les fichiers annexes, etc. Les deux informations les plus importantes
sont :
a) Le jeu de caractères de la page,
À mettre tout au début de l’en-tête :
<meta http-equiv="Content-Type" content="text/html ; charset=utf-8">
b) Le titre de la page (la seule information obligatoire à préciser) ;
Affiché dans la barre de titre du navigateur, il n’apparaît pas dans la page elle-même.
<title>Mon site</title>
2. Entête : <META … >
<META NAME="..." CONTENT="...">
Permet de spécifier des méta-données sous la forme de couple attribut-valeur
(NAME=CONTENT) .Ces méta-données peuvent être exploitées, par exemple, par les
moteurs de recherche pour effectuer des recherches sur le contenu effectif du
document.
Exemple
<META NAME="author"
CONTENT=« Mohamed Amine">
<META NAME="keywords"
CONTENT=«Mohamed, page, personnelle, homepage, informatique">
<META NAME="description"
CONTENT="Page personnelle de Mohamed Amine ">
3. Corps d’un document
Les balises <body> ... </body> délimitent le corps du document, structuré en sections,
paragraphes, listes, etc.
Il existe 6 balises permettant de représenter les titres de sections, par importance
décroissante :
<h1>Titre de la page</h1>
<h2>Titre de section principale</h2>
<h3>Titre de sous-section</h3>
Les balises <p> ... </p> permet de délimiter un paragraphe. Tous les paragraphes de
texte doivent être balisés ainsi.
La balise <hr> (horizontal rule) indique une séparation majeure dans le document
(rendue par exemple graphiquement par une ligne horizontale).
4. Mise en forme des caractères
a) Les styles
Gras : <B> … </B>
Italique : <I> ... </I>
Souligné : <U> … </U>
b) Taille de la police par défaut
Possibilité de fixer la taille de police d’une page web
<BASEFONT SIZE="taille"> (avec 1 taille 7)
Si cette balise n'est pas utilisée, la taille par défaut des caractères est
fixée à 3.
Spécification d’une police locale
<FONT FACE="police1[,police2,…]
SIZE="s|+s|-s"
COLOR="#RRVVBB"> ...
</FONT>
c) FACE :
La première police installée est utilisée. Ne proposer que des polices dont on est sûr
qu'elles sont disponibles sur l'ordinateur de consultation :
Arial/Helvetica
Times New Roman/Times
d) SIZE :
Taille de la police
1 … 7 (taille absolue)
+1, +2... (taille relative par rapport à la valeur par défaut)
Remarque
Sur les balises <FONT> elles peuvent être imbriquées :
<FONT SIZE="..."> …
<FONT SIZE="... ">
...
</FONT>
...
</FONT>
Permet de changer des paramètres ponctuellement (couleur ou taille).