Introduction au

Web Statique
( Web 1.0 )

Pr Loubna El FAQUIH Dr Ibrahim GUELZIM

E-mail : [email protected] E-mail : [email protected]

ENSAM – Casablanca
 Introduction au
Web Statique
( Web 1.0 )

Tableaux
Pr Loubna El FAQUIH Dr Ibrahim GUELZIM
E-mail : [email protected] E-mail : [email protected]

ENSAM – Casablanca
PRÉSENTATION DU COURS

Contenu
cours, TP

Contrôle de Evaluation
connaissances
Mini-Projet(s)

Contact [email protected]

Introduction au Web Statique (web 1.0) : HTML5 3

INTRODUCTION GÉNÉRALE

• Programmation web
• Possibilité de visualiser des pages web
• Statique : Web 1.0
• Code informatique exécuté et interprété au niveau d’un logiciel nommé
navigateur web.
• Navigateur web: programme
• Input : code source ::
• règles d’écriture et de formatage du texte,
• Références aux ressources utilisées : images, font utilisés,
liens vers d’autres pages ou fichiers,…

Introduction au Web Statique (web 1.0) : HTML5 4

INTRODUCTION GÉNÉRALE

• Programmation web
• Possibilité de visualiser des pages web
• Statique : Web 1.0
• Code informatique exécuté et interprété au niveau d’un logiciel nommé
navigateur web.
• Navigateur web: programme
• Output :
• Page web formatée selon les règles d’écriture en input
• Visualisée dans une fenêtre affiché sur la sortie (Ecran,…)
d’un terminal : Computer, Smartphone, Tablet

Introduction au Web Statique (web 1.0) : HTML5 5

INTRODUCTION GÉNÉRALE

• Programmation web
• Dynamique : Web 1.5 (2ème Partie du cours – Pr Sekkate)

• Web Participatif : Web 2.0 (réseaux sociaux …)

• Web sémantique : Web 3.0 (Semestre 5)

Introduction au Web Statique (web 1.0) : HTML5 6

PROGRAMME DU COURS

• Web Statique :
• HTML 5

• CSS

• JavaScript

Introduction au Web Statique (web 1.0) : HTML5 7

Partie 1:

Hyper Text Markup Language 5

Introduction au Web Statique (web 1.0) : HTML5 8

 Avant-Propos

Introduction au Web Statique (web 1.0) : HTML5 9

WWW

Le World Wide Web, littéralement la «toile (d’araignée)

mondiale», communément appelé le Web, le web, parfois
la Toile ou le WWW, est un système hypertexte public
fonctionnant sur Internet (Inter network) qui permet de
consulter, avec un navigateur, des pages accessibles
sur des sites.

Introduction au Web Statique (web 1.0) : HTML5 10

WWW

L’image de la toile d'araignée vient des hyperliens qui

lient les pages web entre elles.

Introduction au Web Statique (web 1.0) : HTML5 11

TERMES RATTACHÉS AU WEB

• L’expression en ligne signifie « connecté à un réseau », en

l’occurrence le réseau informatique Internet.

• Un hôte est un ordinateur en ligne. Chaque hôte d’Internet est

identifié par une adresse IP (IPv4 et IPv6) à laquelle
correspondent zéro, un ou plusieurs noms de hôte.

• Une ressource du World Wide Web est une

entité informatique (texte, image, boîte aux lettres électronique,
etc.) accessible indépendamment d’autres ressources.

Introduction au Web Statique (web 1.0) : HTML5 12

TERMES RATTACHÉS AU WEB

• On ne peut accéder à une ressource distante qu’en respectant

un protocole de communication. Les fonctionnalités de chaque
protocole varient : réception, envoi, voire échange continu
d’informations.

• HTTP (HyperText Transfer Protocol) est le protocole de

communication communément utilisé pour transférer les ressources du
Web.

• HTTPS est sa variante sécurisée.

Introduction au Web Statique (web 1.0) : HTML5 13

TERMES RATTACHÉS AU WEB

• Une URL (Uniform Resource Locator) pointe sur une ressource. C’est
une chaîne de caractères permettant d’indiquer un protocole de
communication et un emplacement pour toute ressource du Web.

• ~ Adresse IP

• Un hyperlien (ou lien) est un élément dans une ressource

associé à une URL. Les hyperliens du Web sont orientés : ils
permettent d’aller d’une source à une destination.

Introduction au Web Statique (web 1.0) : HTML5 14

TERMES RATTACHÉS AU WEB

• HTML (HyperText Markup Language) est un langage de

balisage (formatage) informatique permettant de
décrire le contenu d’un document (titres, paragraphes,
disposition des images, etc.) et d’y inclure des
hyperliens.

• Un document HTML est un document décrit avec le

langage HTML. (extension fichiers .html .htm)

Introduction au Web Statique (web 1.0) : HTML5 15

TERMES RATTACHÉS AU WEB

• Dans un mode de communication client-serveur, un serveur est un

hôte sur lequel fonctionne un logiciel serveur auquel peuvent se
connecter des logiciels clients fonctionnant sur des hôtes
clients.
• Un serveur Web est un hôte sur lequel fonctionne un serveur HTTP.
• Un hébergeur Web est un groupement de services informatiques qui
accueille sur des serveurs Web les ressources et installations
nécessaires rendre un site accessible sur le Web.

• Les entreprises fournissant des services d'hébergement Web sont

parfois appelées hébergeurs Web.
Introduction au Web Statique (web 1.0) : HTML5 16
TERMES RATTACHÉS AU WEB

• Un navigateur Web est un logiciel conçu pour consulter

et afficher le contenu du web. (client HTTP).

• Une page Web :

• Document destiné à être consulté avec un navigateur Web.

• Toujours constituée d’une ressource centrale (généralement un

document HTML) et d’éventuelles ressources liées (des images,
…).

Introduction au Web Statique (web 1.0) : HTML5 17

TERMES RATTACHÉS AU WEB

• Un site Web est un ensemble de pages Web et d’éventuelles

autres ressources, liées dans une structure cohérente,
publiées par un propriétaire (une entreprise, une
administration, une association, un particulier, etc.) et
hébergées sur un ou plusieurs serveurs Web.

• Une adresse Web est une URL de page Web, généralement

écrite sous une forme simplifiée limitée à un nom d’hôte.
Une adresse de site Web est en fait l’adresse d’une page du
site prévue pour accueillir les visiteurs.

Introduction au Web Statique (web 1.0) : HTML5 18

W3C

• Le World Wide Web Consortium, abrégé par le sigle W3C, est

un organisme de standardisation à but non-lucratif, fondé
en octobre 1994.
• Rôle : chargé de promouvoir la compatibilité des
technologies du World Wide Web telles que:
• CSS (Cascading Style Sheet / Feuilles de style en cascade)
• DOM (Document Object Model)
• HTML (HyperText Markup Language)
• PNG (Portable Network Graphics)
• SOAP (Simple Object Access Protocol)

Introduction au Web Statique (web 1.0) : HTML5 19

W3C
• Le World Wide Web Consortium, abrégé par le sigle W3C, est
un organisme de standardisation à but non-lucratif, fondé
en octobre 1994.
• Rôle : chargé de promouvoir la compatibilité des technologies
du World Wide Web telles que:
• XHTML (eXtensible HyperText Markup Language)
• XML (Extensible Markup Language), XML Schema
• Xpath, XQuery
• XSLT (Extensible Stylesheet Language Transformations)
• SVG (Scalable Vector Graphics)
• RDF (Resource Description Framework)

Introduction au Web Statique (web 1.0) : HTML5 20

HTML

• Conçu pour représenter les pages web.

• Définit par le W3C.

• Langage de balisage (formatage) utilisant des balises:

• Sous forme de paire <balise> text… </balise>
• <balise> : s’appelle ouvrante
• </balise> : s’appelle fermante
• Exemple : <b> text à mettre en gras </b>

• Balise orpheline (unaire) : <balise> ou <balise />

• Ex : <br /> (ou <br> ) pour le retour à la ligne.

Introduction au Web Statique (web 1.0) : HTML5 21

ÉVOLUTION DU LANGAGE
• Origine (1989 - 1992) HTML est une des trois inventions à la base du World
Wide Web, avec le Hypertext Transfer Protocol (HTTP) et les adresses web. HTML
a été inventé pour pouvoir écrire des documents hypertextuels liant les
différentes ressources d’Internet avec des hyperliens. Aujourd’hui, ces
documents sont appelés « page web» (En août 1991, par Tim Berners-Lee).

• 1994 : Apports de Netscape Navigator

• Avec l’apparition de Netscape Navigator 0.9 le 13 octobre 1994, le support de

nombreux éléments de présentation est ajouté : attributs de texte,
clignotement, centrage, etc.

Introduction au Web Statique (web 1.0) : HTML5 22

ÉVOLUTION DU LANGAGE
• 1995 - 1996: HTML 2.0

• 1997 : HTML 3.2 et 4.0

• Le 14 janvier 1997, le W3C publie la spécification HTML 3.2. Ses plus importantes
nouveautés sont la standardisation des tables et de nombreux éléments de présentation.
HTML 3.2 précède de peu HTML 4.0 et contient des éléments en prévision du support des
styles et des scripts.

• Le 18 décembre 1997, le W3C publie la spécification HTML 4.0 qui standardise de

nombreuses extensions supportant les styles et les scripts, les cadres (frames) et les
objets (inclusion généralisée de contenu).

• HTML 4.0 apporte également différentes améliorations pour l’accessibilité des contenus
dont principalement la possibilité d’une séparation plus explicite entre structure et
présentation du document

Introduction au Web Statique (web 1.0) : HTML5 23

ÉVOLUTION DU LANGAGE

• 2000- 2006: XHTML

• Le développement de HTML en tant qu’application

du Standard Generalized Markup Language (SGML) est
officiellement abandonné au profit de XHTML,
application de Extensible Markup Language(XML).

• 2014 à nos jours : HTML 5

Introduction au Web Statique (web 1.0) : HTML5 24

HTML5

• HTML5 a été conçu pour remplacer à la fois HTML 4 et XHTML.

• HTML5 offre un contenu riche sans avoir besoin de plugins

supplémentaires.

• La version actuelle offre tout de l'animation au graphisme,

et peut également être utilisé pour créer des applications
web complexes.

• HTML5 est aussi multi-plateforme. (PC, tablette, smartphone

ou Smart TV).
Introduction au Web Statique (web 1.0) : HTML5 25
ÉDITEURS

• On peut toujours créer un document HTML avec un éditeur

normal en tapant soi-même toutes les balises (fastidieux
mais faisable)

• Il existe des éditeurs spécialisés :

• WYSIWYG (What You See Is What You Get) : Dreamweaver, kit, Apache
NetBeans, …
• Textual HTML editors : NotePad++, Sublime Text, Visual Studio Code,
Atom, …

Introduction au Web Statique (web 1.0) : HTML5 26

 Structure d’un document HTML

HTML 5
Le texte en HTML

Les Balises

Les liens hypertexte

Les listes

Les tableaux

Les formulaires

Les medias en HTML : images, son et vidéo

Les éléments sémantiques

Introduction au Web Statique (web 1.0) : HTML5 27

STRUCTURE MINIMALE D’UN DOCUMENT HTML
document type
declaration

Contient des
informations
descriptives sur le
Élément racine qui document
contient tous les
éléments du
document HTML
contient tout ce que
nous voulons
afficher dans la
fenêtre du
navigateur

Introduction au Web Statique (web 1.0) : HTML5 28

FORMAT DES BALISES

<NomBaliseBin attribut1 = "val1" attribut2 = "val2" … >

Texte subissant le formatage

</NomBaliseBin>

Ex : <font size="5" color="red" > text </font>

Ou

<NomBaliseUn attribut1 = "val1" attribut2 = "val2" … >

<hr size="5" width = "50%" >

Introduction au Web Statique (web 1.0) : HTML5 29
LE TEXTE EN HTML 5

Mise en format niveau paragraphe :

Retour à la ligne : <br>

Insérer un espace : &nbsp;

commentaires <!–- ceci est du commentaire -->

Commencer un nouveau paragraphe : <p>

Séparer les lignes, paragraphes… : <hr>

Attention : le code source est public (clic droit)

Introduction au Web Statique (web 1.0) : HTML5 30

LE TEXTE EN HTML 5

Mise en format niveau phrase :

en-têtes <hn> … </hn> avec n=1 à 6

gras <b>...</b>

italique <i>...</i>

souligné <u>...</u>

barré <s>...</s>

Introduction au Web Statique (web 1.0) : HTML5 31

LE TEXTE EN HTML 5
Mise en format niveau phrase :

couleur et taille du caractère :

<font color="red" size=val > Text … </font> <!-- size entre 1 et 7 -->

<font color="#FF0000" size=val > Text … </font> <!-- size entre 1 et 7 -->

<font color="rgb(FF,00,00)" size=val > Text … </font> <!-- size entre 1 et 7 -->

centrage <center> </center>

mettre en exposant ^à

mettre en indice _à

Signaler un code Informatique ou mathématique : <code>

plus gros / plus petit <big> à </big> / <small> à </small>

Introduction au Web Statique (web 1.0) : HTML5 32

LE TEXTE EN HTML 5

• <details> <summary> … </summary></details>: sommaire à détailler

• <abbr > : abbréviation

• <address > : addresse

• <bdi > : écriture bidirectionnelle

• <bdo > : écriture bidirectionnelle en précisant l’orientation

• <wbr > : saut de mot – exemple Sequence ADN :

• <mark> : marquer le texte avec arrière plan jaune (default)

Introduction au Web Statique (web 1.0) : HTML5 33

LE TEXTE EN HTML 5

• <pre> : texte preformaté

• &lt; br &gt; // pour afficher une balise dans la page HTML

• &nbsp;

• &amp; // ampersand (and) sign: &

• &eacute; // é

• &egrave; // è

• &agrave; // à

• &ocirc; // ô

• &acirc; // â

Introduction au Web Statique (web 1.0) : HTML5 34

SÉMANTIQUE

• <strong> et <em> | <b> et <i>

• <del> </del> <ins> </ins> | <s>
• <q>
• <cite>
• <blockquote>
• <dialog>
• <progress value= max=100>
• <address>

Introduction au Web Statique (web 1.0) : HTML5 35

LA BALISE BODY

Cette balise permet de délimiter la partie visible d'un document et de

définir quelques paramètres généraux du document (essentiellement des
couleurs).

elle possède les attributs suivants :

• background : avec cet attribut, on indique le nom d'une image à

utiliser comme fond d'écran pour le document.

• bgcolor : permet de préciser la couleur utilisée pour le fond

du document. on indique soit le nom de la couleur, soit son
codage rgb.

Introduction au Web Statique (web 1.0) : HTML5 36

LA BALISE BODY

Elle possède les attributs suivants : (suite)

• link : permet de préciser la couleur des liens présents dans le

document.

• text : permet de préciser la couleur du texte dans le document.

• alink : permet de préciser la couleur des liens actifs, c'est-

à-dire sur lequel on est en train de cliquer.

• vlink : permet de préciser la couleur des liens faisant

référence à une adresse déjà visitée.

Introduction au Web Statique (web 1.0) : HTML5 37

LES LIENS HYPERTEXTE

• La balise <a>, permet à partir d'un document de pointer sur un

autre. C'est cette balise qui tisse les fils du web.

• Cette balise permet de créer un lien hypertexte, càd rendre une

partie du texte active pour permettre à l'utilisateur de cliquer
dessus, et associer une adresse de destination où l'utilisateur
sera envoyé après son clic.

• Cette balise permet également de créer des liens à l'intérieur d'un

document et de proposer l'envoi d'un mail.

Introduction au Web Statique (web 1.0) : HTML5 38

LES LIENS HYPERTEXTE
Les attributs de la balise <a>:
• L’attribut href : précise l'adresse de destination associée au lien
hypertexte.
• L'attribut target : cet attribut précise l'endroit où devra apparaître
la page désignée par href.
• target = "_blank" : dans ce cas, le lien s'ouvre en utilisant une
nouvelle fenêtre ; la page d'origine (celle contenant le lien) reste
donc visible.
• target = "_top" : pertinent seulement lorsque l'on se trouve sur une
page contenant des frames ; le lien s'ouvre alors en utilisant
l'ensemble de la fenêtre.
• target = "_self" : dans la meme page (par défaut)

Introduction au Web Statique (web 1.0) : HTML5 39

LES LIENS HYPERTEXTE

Lien absolu :

• Lien vers le <a href="http://www.ensam-casa.ma/">Site de l’ENSAM</a>

• Lien vers le site de l’ENSAM

Lien relatif : (à partir de l’emplacement actuel ./ )

• Lien vers <a href="page2.html"> ma 2ème page </a>

• Lien vers ma 2ème page

Envoi du mail

• Envoyez-moi un <a href="mailto:[email protected]"> mail</a>

• Envoyez-moi un mail

Introduction au Web Statique (web 1.0) : HTML5 40

LES LIENS HYPERTEXTE
Lien interne (ancre)

L'attribut id permet de nommer un endroit du document pour y faire

référence ensuite. L'utilisation de la balise <a> avec cet attribut n'a
pas d'effet visible sur le document.

En tout début de page, on peut par exemple placer le code suivant.

<a id="haut"> <h1> titre de la page </h1> </a>

Cela permettra dans la suite de faire des liens vers ce haut de page.

Pour faire référence à une ancre interne à la page, on donne dans href le
nom attribué à l'ancre avec l'attribut id précédé du symbole #.

Introduction au Web Statique (web 1.0) : HTML5 41

LES LIENS HYPERTEXTE
Lien interne (ancre)

• Retour en <a href="#haut"> haut de la page </a>

• Retour en haut de la page

Introduction au Web Statique (web 1.0) : HTML5 42

LES LISTES

Il est possible en HTML de définir différents types de listes :

• Les listes non ordonnées (balise ul) ;

• Les listes ordonnées (balise ol) ;

• Les listes de définition (balise dl).

• Les éléments des listes (balise li)

Il est naturellement possible d'imbriquer plusieurs listes,

qu'elles soient de même type ou pas.

Introduction au Web Statique (web 1.0) : HTML5 43

LES LISTES

• attribut type : permet de préciser le type de numérotation utilisée pour présenter

la liste.

• Liste non-ordonnée <ul></ul>

• type = "disc" : petit cercle rempli

• type = "circle" : petit cercle vide

• type = "square" : petit carré

Introduction au Web Statique (web 1.0) : HTML5 44

LES LISTES

• Liste ordonnée <ol></ol>

• type = "1" : numérotation à l'aide de chiffres arabes (style par défaut)

• type = "a" / "A" : numérotation à l'aide de lettres minuscules / majuscules.

• type = "i" / "I" : numérotation à l'aide de chiffres romains minuscules /

majuscules.

• Liste de définition <dl></dl>

• <dl> marque le début de la liste et </dl> sa fin

• <dt> permet de définir un titre pour une définition

• <dd> permet de définir le contenu d'une définition

Introduction au Web Statique (web 1.0) : HTML5 45

LES IMAGES

Le code html pour insérer une image est :

<img src="adresse de l'image " />

La balise image possède de nombreux attributs :

• alt="****" (texte alternatif)

• width="…" height="…" : dimensions : hauteur et largeur (en

pixels)

• border="…" (bordure en pixels)

• align : top, middle, bottom, left, right

Introduction au Web Statique (web 1.0) : HTML5 46
Introduction au Web Statique (web 1.0) : HTML5 47
LES TABLEAUX

Les balises utilisées pour définir des tableaux :

• <table > pour la définition du tableau ;

• <tr > pour définir une ligne ;

• <th > pour une case de titre ;

• <td > pour une case de données

• on peut donner un "titre" au tableau entre <caption> … </caption>,

en dehors des définitions de lignes ou de cellules.

Introduction au Web Statique (web 1.0) : HTML5 48

LES TABLEAUX

• on peut ranger les lignes entre <thead> … </thead> pour indiquer

qu'elles font partie de l'en-tête.

• on peut ranger les lignes entre <tfoot> … </tfoot> pour indiquer

qu'elles font partie du pied du tableau

• on peut ranger les lignes entre <tbody>… </tbody> pour indiquer

qu'elles font partie des données

Introduction au Web Statique (web 1.0) : HTML5 49

LES TABLEAUX

Les attributs de la balise table :

• attribut bgcolor : pour définir la couleur de fond du tableau.

• attribut border : pour spécifier l'épaisseur du trait utilisé

pour tracer les bords du tableau.

• attribut bordercolor : pour indiquer la couleur du bord du

tableau.

Introduction au Web Statique (web 1.0) : HTML5 50

LES TABLEAUX

Les attributs de la balise table :

• attribut cellspacing : pour définir l'espacement entre les cases

du tableau.

• attribut cellpadding : pour définir l'espacement entre les bords

du tableau et le contenu des cases.

• attribut width : pour fixer la largeur du tableau, en pourcentage

de la largeur de la page ou en pixels.

• attribut rules : (none, cols, rows, all).

Introduction au Web Statique (web 1.0) : HTML5 51

LES TABLEAUX

Les attributs de la balise tr :

• attribut bgcolor : indique la couleur du fond de la ligne concernée.

• attribut valign : spécifie l'alignement vertical des cases de la ligne.

Les attributs des balises td et th:

• attribut align : spécifie l'alignement horizontal de la case (left, center,

right).

• attribut valign : spécifier l'alignement vertical de la case (top, bottom,

middle)

Introduction au Web Statique (web 1.0) : HTML5 52

LES TABLEAUX

Les attributs des balises td et th: (suite)

• attribut bgcolor : spécifie la couleur de fond de la case.

• attribut colspan : indiquer sur combien de colonnes s'étend la case.

• attribut nowrap : indiquer que le contenu de la case ne doit pas être

présenté sur plusieurs lignes

• attribut rowspan : indiquer sur combien de lignes s'étend la case.

Introduction au Web Statique (web 1.0) : HTML5 53

LES FORMULAIRES

La balise form: permet de déclarer un formulaire, ses principaux

attributs:
• Attribut method : get ou post

• Attribut action : spécifie la destination des données du formulaire

(généralement un script)

Introduction au Web Statique (web 1.0) : HTML5 54

LES FORMULAIRES : EXEMPLES

Exemple 1:

<form >
Nom:<input type="text" name="nom"><br>
Prénom: <input type="text" name="prenom"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">

</form>

Introduction au Web Statique (web 1.0) : HTML5 55

LES FORMULAIRES

La méthode get
• La méthode GET est la valeur de méthode par défaut

• Les données sont rajoutées à l'URI par l'attribut action (avec

un séparateur: ?) ... donc visibles :

• A utiliser pour des données non sensibles.

• Les données sont transmises de l'ordinateur au serveur.

Introduction au Web Statique (web 1.0) : HTML5 56

LES FORMULAIRES

La méthode get
• La taille d'une URL est limitée à par le serveur, souvent un
peu plus de 2000 caractères, en comprenant les codes
d'échappement.

• On l'utilise de préférence sauf si on ne veut pas que les

paramètres soient ajoutés à l'URL.

Introduction au Web Statique (web 1.0) : HTML5 57

LES FORMULAIRES

La méthode post

• Les données sont incluses dans le formulaire, donc invisibles : à

utiliser pour des données sensibles

• La méthode POST n'a pas de taille limite

• Elle envoi un en-tête et un corps de message au serveur.

• Le corps est généralement constitué des données entrées dans le

champ de formulaire par l'utilisateur.

Introduction au Web Statique (web 1.0) : HTML5 58

LES FORMULAIRES

La méthode post

• Les données du formulaire n'apparaissent pas dans l'URL.

• La méthode POST est indispensable pour des codes non ASCII, des
données de taille importante, et elle est recommandée pour modifier
les données sur le serveur.

Introduction au Web Statique (web 1.0) : HTML5 59

LES FORMULAIRES

La balise input (1/2)

Permet de coder différents types d'entrée pour un formulaire

• type = "text" : zone de saisie permettant à l'utilisateur de saisir une

ligne de texte.

• type = "password" : définit un champ de mot de passe dont les caractères

sont masqués par des étoiles ou des cercles.

• type = "hidden" : permet de faire circuler une valeur à l'insu de

l'utilisateur qui répond au questionnaire.

• type = "checkbox" : définit un bouton comme réponse à une question à choix

multiple ; ce type de bouton permet à l'utilisateur de donner plusieurs
réponses à une même question.
Introduction au Web Statique (web 1.0) : HTML5 60
LES FORMULAIRES

La balise input (2/2)

• type = "radio" : définition d'un bouton comme réponse à une question à

choix multiple mais pour laquelle on n'autorise qu'une seule réponse.

• type = "reset" : produit un bouton permettant à l'utilisateur d'effacer

toutes les réponses qu'il a saisies et de faire réapparaître les valeurs
initiales.

• type = "submit" : produit un bouton permettant à l'utilisateur de signifier

la fin de sa saisie du formulaire, l'action du formulaire est alors
effectuée.

• type = "image" : Définit une image comme bouton d'envoi Exemple : <input
type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Introduction au Web Statique (web 1.0) : HTML5 61

LES FORMULAIRES

Les attributs communs (1/2)

• Attribut name : sert à nommer l'entrée de la balise input. Utilisé pour les
traitements ultérieurs du formulaire.

• Attribut value : réponse par défaut ou texte d'un bouton en fonction du

type de la balise input.

• Attribut type : définit le type d'entrée représentée par la balise

• Attribut size : taille de la zone de texte

• Attribut maxlength : limiter le nombre de caractères

• Attribut checked : utile uniquement dans le cas d'un bouton de type radio
ou type checkbox, pour indiquer que ce bouton est choisi par défaut et
qu'il doit donc apparaître coché.
Introduction au Web Statique (web 1.0) : HTML5 62
LES FORMULAIRES

Les attributs communs (2/2)

• Attribut autofocus: précise que le champ input doit avoir le focus

au chargement de la page

Exemple: <input type="text" name="nom" autofocus>

• Attribut placeholder: spécifie un indice qui décrit la valeur

attendue d'un champ de saisie

Exemple: <input type="text" name="nom" placeholder="Votre nom ici">

• Attribut required: indique un champ obligatoire

Exemple : Nom: <input type="text" name="nom" required>

Introduction au Web Statique (web 1.0) : HTML5 63

LES FORMULAIRES

La balise textarea : permet de créer dans un formulaire une zone de

saisie s'étendant sur plusieurs lignes.
• attribut name : permet de nommer l'entrée de la balise textarea

• attribut cols : spécifie le nombre de colonnes (en nombre de

caractères) de la zone de saisie.

• attribut rows : spécifie le nombre de lignes de la zone de saisie.

Introduction au Web Statique (web 1.0) : HTML5 64

LES FORMULAIRES

• Attribut autocomplete (saisie avec mémoire):

• Quand l’attribut est on, le navigateur complète les valeurs automatiquement
en se basant sur des valeurs que l'utilisateur a entré avant.

• Utilisé pour La balise form : appliqué globalement

• Utilisé aussi pour les champs input text : appliqué particulièrement

Introduction au Web Statique (web 1.0) : HTML5 65

LES FORMULAIRES

La balise select : permet de définir une liste déroulante dans un

formulaire.
• attribut name : permet de nommer l'entrée de la balise select
• attribut length: Nombre d'options dans la liste (lecture seule)
• attribut size: Nombre de lignes affichées, une par défaut.
• attribut multiple : indique que les réponses multiples sont
autorisées (par défaut, une seule réponse est possible).

La balise option : définit un item dans une liste déroulante.

• attribut selected : indique que cet item est choisi par défaut
• attribut value : permet de préciser la valeur associée à l'item.

Introduction au Web Statique (web 1.0) : HTML5 66

LES FORMULAIRES

La balise select : Exemple

<select name="filiere">
<option value="sectionA"> Section A </option>
<option value="sectionB"> Section B </option>
<option value="sectionC"> Section C </option>
</select>

Introduction au Web Statique (web 1.0) : HTML5 67

LES FORMULAIRES

La balise optgroup : Exemple

<select name="filiere">
<optgroup label="Cycle préparatoire">
<option value="sectionA">Section A</option>
<option value="sectionB">Section B</option>
<option value="sectionC">Section C</option>
</optgroup>
<optgroup label="Cycle ingénieur">
<option value="IAGI">IAGI</option>
<option value="GM">GM</option>
</optgroup>
</select>
Introduction au Web Statique (web 1.0) : HTML5 68
LES FORMULAIRES

La balise datalist : spécifie une liste d'options pré-définies pour un élément

<input>. Elle est utilisée pour fournir une saisie « semi-automatique" dans un
élément <input>.

Exemple :
<input list="browsers" name="browser"/>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Introduction au Web Statique (web 1.0) : HTML5 69

LES FORMULAIRES

Autres balises:
• Week: <input type="week" name="week_year">
• Date: <input type="date" name="bday" min="2001-01-02">
• datetime-local (date and time): <input type="datetime-local"
name="bdaytime">
• Month: (month and year): <input type="month" name="bdaymonth">
• Time: Select a time: <input type="time" name="usr_time">

Introduction au Web Statique (web 1.0) : HTML5 70

LES FORMULAIRES

Autres balises:

• Color : <input type="color" name="favcolor">

• Email: <input type="email" name="email">

• Number: <input type="number" name="quantity" min="1" max="10"

step="2">

• Range: <input type="range" name="points" min="1" max="10">

Introduction au Web Statique (web 1.0) : HTML5 71

 LES FORMULAIRES
La balise output: utilisée pour afficher le résultat d'un calcul à partir de
champs saisissables par l'utilisateur. Ce champ est en lecture seule et
s'actualise dès que l'une des valeurs sur laquelle le calcul se base change.

Exemple 1: Exemple 2:
<form <form name="form-calcul2"
oninput="x.value=parseInt(a.value)+parseI oninput="resultat2.value =
nt(b.value)">0 valeur3.value * valeur4.value;">
<input type="range" id="a" value="50">100 <input type="number" name="valeur3"
+<input type="number" id="b" value="50"> value="15" /> *
=<output name="x" for="a b"></output> <input type="number" name="valeur4"
value="10" /> =
</form>
<output for="valeur3 valeur4"
name="resultat2">150</output> </form>

Introduction au Web Statique (web 1.0) : HTML5 72

LES IMAGES RÉACTIVES

• La base est une image quelconque insérée avec la balise img en précisant,
à l'aide de l'attribut usemap qu'une carte est associée à l'image.

• Les balises map et area permettent de définir des régions dans l'image et
d'associer des adresses à chacune de ces régions.

• En cas de superposition de deux zones, c'est la première définie qui sera

activée si l'utilisateur clique dans la partie commune.

• Entre les balises ouvrante et fermante de map, on trouvera la définition

de différentes régions qui, appliquées à l'image associée, deviendront
réactives.

Introduction au Web Statique (web 1.0) : HTML5 73

LES IMAGES RÉACTIVES

La balise map : porte un nom grâce auquel elle est associée à une image.

• attribut name : permet de définir le nom de la carte (ce nom sera repris
dans la balise img)

La balise area : Spécifie une région dans une image : sa forme, ses coordonnées
et le lien à suivre lorsque cette zone sera activée.

• attribut coords : permet de spécifier les coordonnées de la zone.

• attribut href : permet de spécifier l'url de la page ciblée par la zone.

Introduction au Web Statique (web 1.0) : HTML5 74

LES IMAGES RÉACTIVES

La balise area : Spécifie une région dans une image : sa forme, ses coordonnées
et le lien à suivre lorsque cette zone sera activée.

• attribut shape : permet d'indiquer la forme de la zone définie.

• shape = "circle" : indique une zone circulaire. Dans ce cas, les

coordonnées spécifiées contiennent les coordonnées du centre et le
rayon.

• shape = "poly" : la zone est un polygone quelconque, il faut dans ce

cas fournir les coordonnées de chacun des sommets.

• shape = "rect" : zone de forme rectangulaire. Les coordonnées

spécifiées correspondent au coin supérieur gauche du rectangle et au
coin inférieur droit.

Introduction au Web Statique (web 1.0) : HTML5 75

LES IMAGES RÉACTIVES : EXEMPLE

<img src="logoEnsamSmall.png" usemap="#site"/>

<map name="site">

<area shape="rect" coords="0,0,493,213" href="http://www.ensam-casa.ma/">

<area shape="rect" coords="0,226,493,252" href="http://www.univh2c.ma/">

</map>

Introduction au Web Statique (web 1.0) : HTML5 76

LES MEDIAS (AUDIO)

La balise <audio> : utilisée pour lire un fichier audio sur une page Web.

<audio controls loop autoplay preload="none">

<source src="Kalimba.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon as it is ready

controls controls Specifies that audio controls should be displayed (such as a play/pause
button etc)
loop loop Specifies that the audio will start over again, every time it is finished

muted muted Specifies that the audio output should be muted

preload auto Specifies if and how the author thinks the audio should be loaded when
none the page loads
src URL Specifies the URL of the audio file

Introduction au Web Statique (web 1.0) : HTML5 77

LES MEDIAS (EMBED)

La balise <embed> : définit un conteneur pour une application externe ou du

contenu interactif (un plug-in)

<embed src="BannerSnack.swf" width="500" height="500"

type="application/x-shockwave-flash"/>

Introduction au Web Statique (web 1.0) : HTML5 78

LES MEDIAS (VIDEO)

La balise <video> : spécifie une vidéo, comme un clip ou d'autres flux vidéo.

• Actuellement, 3 formats vidéo sont pris en charge : MP4, WebM, Ogg.

Attribute Value Description

autoplay autoplay Specifies that the video will start playing as soon as it is ready
controls controls Specifies that video controls should be displayed (such as a play/pause button etc).

height pixels Sets the height of the video player

loop loop Specifies that the video will start over again, every time it is finished

muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is downloading, or until the user hits the
play button
preload auto Specifies if and how the author thinks the video should be loaded when the page loads
metadata
none
src URL Specifies the URL of the video file
width pixels Sets the width of the video player
Introduction au Web Statique (web 1.0) : HTML5 79
LES MEDIAS (TRACK)

La balise <track> : précise des pistes de texte pour les éléments médias
(<audio> et <video>).
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<track src="subtitles_en.vtt“ kind="subtitles" srclang="en"
label="English">
</video>
Attribute Value Description
default default Specifies that the track is to be enabled if the user's preferences
do not indicate that another track would be more appropriate
kind Captions, chapters Specifies the kind of text track
descriptions,
metadata
subtitles
label text Specifies the title of the text track
src URL Required. Specifies the URL of the track file
srclang language_code Specifies the language of the track text data (required if
Introduction au Web Statique (web 1.0) : HTML5
kind="subtitles") 80
LES MEDIAS (EXEMPLES)

Exemple avec iFrame: Exemple avec embed:

<iframe width="420" height="315" <embed width="420" height="345"
src="http://www.youtube.com/embed src="https://www.youtube.com/v/mzP
/mzPxo7Y6JyA"> xo7Y6JyA" type="application/x-
shockwave-flash">
</iframe>
</embed>

Exemple avec object:

<object width="420" height="315"
data="http://www.youtube.com/v/mzPxo7Y6JyA"> </object>
<object data=“Monfichier.pdf" type="application/pdf" width="300"
height="300"></object>

Introduction au Web Statique (web 1.0) : HTML5 81

LES ÉLÉMENTS SÉMANTIQUES

• Un élément sémantique décrit clairement son sens au navigateur et au

développeur.

• Des exemples d'éléments non-sémantiques: <div> et <span> - ne dit rien sur son
contenu.

• Des exemples d'éléments sémantiques: form, <table> et <img> - contenu

clairement défini.

Introduction au Web Statique (web 1.0) : HTML5 82

LES ÉLÉMENTS SÉMANTIQUES

Plusieurs sites Web utilisent les balises comme : <div id="nav">, <div
class="header">, ou <div id="footer">, pour indiquer les liens de navigation,
en-tête, pied de page. HTML5 propose des éléments sémantiques permettant de
définir clairement les différentes parties d'une page web:
• <header> / <nav>
• <section>
• <article>
• <aside>
• <figure> / <figcaption>
• <footer>
• <details> / <summary>
• <mark> / <time>

Introduction au Web Statique (web 1.0) : HTML5 83

LES ÉLÉMENTS SÉMANTIQUES

La balise <section> : définit une section d'un document.

• Selon la documentation HTML5 du W3C: « Une section est un regroupement

thématique de contenu, généralement avec un titre »
Exemple:
<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p> </section>
<section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol
of WWF. The well-known panda logo of WWF originated from a panda named
Chi Chi that was transferred from the Beijing Zoo to the London Zoo in
the same year of the establishment of WWF.</p> </section>

Introduction au Web Statique (web 1.0) : HTML5 84

LES ÉLÉMENTS SÉMANTIQUES

La balise <article> : précise un contenu autonome indépendant.

• Exemples de situations où un élément <article> peut être utilisé:

post sur le forum / Post sur un blog , News story / Commentaire

Exemple:
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Introduction au Web Statique (web 1.0) : HTML5 85

LES ÉLÉMENTS SÉMANTIQUES

La balise <nav> : définit un ensemble de liens de navigation.

• L'élément <nav> est destiné à de grands blocs de liens de navigation.

Cependant, tous les liens dans un document doivent être à l'intérieur d'un
élément <nav>

Exemple:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Introduction au Web Statique (web 1.0) : HTML5 86

LES ÉLÉMENTS SÉMANTIQUES

La balise <aside> : définit un contenu mis à part, il est placé comme une barre
latérale.

• Le contenu de côté doit être lié au reste du document

Exemple:
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Introduction au Web Statique (web 1.0) : HTML5 87

LES ÉLÉMENTS SÉMANTIQUES

La balise <header> : spécifie une en-tête d'un document ou d'une section.

• On peut avoir plusieurs éléments <header> en un seul document.

Exemple:
<article>
<header> <h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2015-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Introduction au Web Statique (web 1.0) : HTML5 88

LES ÉLÉMENTS SÉMANTIQUES

La balise <footer> : spécifie un pied de page d'un document ou d'une section

• Un pied de page contient généralement l'auteur du document, les

informations de copyright, des liens vers des conditions d'utilisation, des
informations de contact, etc
Exemple:
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>

Introduction au Web Statique (web 1.0) : HTML5 89

LES ÉLÉMENTS SÉMANTIQUES

La balise <main> : précise le contenu principal d'un document.

• Le contenu à l'intérieur de l'élément <main> doit être unique sur le

document. Il ne doit pas se répéter dans des documents tels que les liens
de navigation, les informations de copyright, les logos de sites et
formulaires de recherche.

• L'élément <main> ne doit pas être un descendant d'un <article>, <aside>,

<footer>, <header>, ou <nav> élément.

Introduction au Web Statique (web 1.0) : HTML5 90

LES ÉLÉMENTS SÉMANTIQUES
Exemple:
<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser </p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft.</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>
Introduction au Web Statique (web 1.0) : HTML5 91
LES ÉLÉMENTS SÉMANTIQUES

La balise <figure> : spécifie contenu autonome, comme illustrations, schémas,

photos, listes de codes, etc

• La balise <figcaption> définit une légende pour un élément <figure>

Exemple:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304"
height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>

Introduction au Web Statique (web 1.0) : HTML5 92

LES ÉLÉMENTS SÉMANTIQUES
La balise <details> : spécifie des détails supplémentaires, que l'utilisateur
peut afficher ou masquer à la demande.

• La balise <details> peut être utilisé pour créer un widget interactif que
l'utilisateur peut ouvrir et fermer. Tout type de contenu peut être mis à
l'intérieur de la balise <details>.

• La balise <summary> définit une en-tête visible de l'élément <details>. Le

titre peut être cliqué pour voir / cacher les détails.
Exemple:
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p> Copyrights of the company Refsnes Data.</p>
</details>

Introduction au Web Statique (web 1.0) : HTML5 93

LES ÉLÉMENTS SÉMANTIQUES
La balise <time> : définit soit un temps (horloge de 24 heures), ou une date
dans le calendrier.

• Cet élément peut être utilisé comme un moyen d'encoder les dates et heures
de façon lisible à la machine de sorte que, par exemple, les agents
utilisateurs peuvent offrir à ajouter des rappels d'anniversaire ou
événements prévus au calendrier de l'utilisateur. Les moteurs de recherche
peuvent également produire des résultats de recherche plus intelligents.

Exemple:
<p>We open at <time>10:00</time> every morning.</p>
<p>je fête le
<time datetime="2021-05-13"> 13 mai </time>
mon anniversaire </p>

Introduction au Web Statique (web 1.0) : HTML5 94

AUTRES BALISES SÉMANTIQUES

• <strong>
• citation <cite> … </cite>
• citation courte <q>…</q>
• <em>
• extrait de code source <code> à </code>
• <address>
• <abbr>
• <details>

Introduction au Web Statique (web 1.0) : HTML5 95

DOCTYPE

• Le <!DOCTYPE> doit être la première déclaration dans le

document HTML, avant la balise <html>

• La déclaration <!DOCTYPE> n'est pas une balise HTML,

elle indique au navigateur web la version HTML dans
laquelle la page a été écrite.

• Syntaxe (html5):
<!DOCTYPE html>

Introduction au Web Statique (web 1.0) : HTML5 96

META

• Les métadonnées (META) sont des données (informations) sur les données.

• La balise meta fournit des métadonnées sur le document HTML.

• Les métadonnées ne seront pas affichées sur la page, mais seulement

interprétables par les machines:
• Les navigateurs : comment afficher le contenu ou la page de rechargement),
• Les moteurs de recherche (mots clés),
• Autres services Web.

• Les Meta éléments sont généralement utilisés pour spécifier la

description de la page, les mots clés, l’auteur du document, dernière
modification ou mise à jour, et autres métadonnées.

Introduction au Web Statique (web 1.0) : HTML5 97

META

Attribut Valeur Description

charset character_set Spécifie le codage des caractères du document HTML. Valeurs les plus
utilisées:
UTF-8 : Unicode
ISO-8859-1 : Latin alphabet
<meta charset="UTF-8">

content text Donne la valeur associée à l'attribut http-equiv ou name

<meta name="author" content="x y z">
<meta http-equiv="refresh" content="30">

http-equiv content-type Fournit une en-tête HTTP pour l'information / la valeur de l'attribut
default-style content
refresh <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="default-style" content=“feuille de style préférée">
<meta http-equiv="refresh" content="300">

name application-name Specifies a name for the metadata

author <meta name="description" content="Cours web">
description <meta name="keywords" content="HTML,CSS,JavaScript">
generator <meta name="author" content="x y z">
keywords <meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport

Introduction au Web Statique (web 1.0) : HTML5 98

META : EXEMPLE
<!DOCTYPE html>
<html>
<head>
<!-- en-tête du document -->
<meta charset="UTF-8">
<meta name="description" content="……..">
<meta name="keywords" content="……..">
<meta name="author" content="…..">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">
<title>….</title>
</head>
<body>
<!-- corps du document-->
</body>
</html>

Introduction au Web Statique (web 1.0) : HTML5 99

CSS

• Principe : trio

Selecteur { propriete1:valeur1; propriete2:valeur2; } ou

<Selecteur style=«propriete1:valeur1;propriete2:valeur2;»>

Exemple :
• <p style=«align=center;» >

• P {color : blue;
font-size: 14px;

Introduction au Web Statique (web 1.0) : HTML5 100