NSI B4 M4 S1 Diapos

Bloc 4
ARCHITECTURES SYSTÈME ET RÉSEAUX,

IHM ET WEB
Module 4.
Technologies Web
Rodrigue Chakode Mai 2021

Bloc 4 Introduction à HTML 5
ARS
1. Introduction à HTML 5
> Base et structure d'une page web : le HTML
> HTML : éléments de base du HTML
> HTML : mise en forme et structures
avancées
2. Déploiement d'un site web
3. Interactions et gestion dynamique dans une
page web
4. Frameworks de développement et outils de
gestion de contenu
1
4. Technologies Web
Bloc 4
ARS Qu’est ce qu’une page Web
A la base de toute page web, on retrouve du code HTML
4. Technologies Web 3
Bloc 4
ARS HTML : Hypertext Markup Language
Langage de balises pour le Web
• Les balises permettent de définir et d’organiser :

> La structure et le contenu d’une page Web
> Comment les éléments de la page seront rendus
• Standard maintenu par la World Wide Web Consortium (W3C)
> Plusieurs versions, HTML5 étant la plus récente
Bloc 4
ARS HTML5 : Les balises
Balise ouvrante, balise fermante
• Une balise ouvrante commence par le symbole ‘<’, suivi d’un mot
clé, puis du symbole ‘>’
> Ex : <strong> est la balise ouvrante d’un bloc en gras
• Une balise fermante commence par le symbole ‘</’, suivi d’un
mot clé, puis du symbole ‘>’
> Ex : </strong> est la balise fermante d’un bloc en gras
Bloc 4
ARS Des balises HTML en exemple
Bloc 4
ARS Structure d’une page HTML5
Bloc 4
ARS Entête d’une page Web
Partie comprise entre les balises <head> et </head>
• Titre de la page : <title> </title>

• Des métadonnées
> <meta name=”nom” content=”valeur” />
• Feuilles de styles
Bloc 4
ARS Corps d’une page Web
Section comprise entre les balises <body> et </body>
Inclut :
• Des éléments visibles (textes, images,vidéos,...)
> Ex:
• Des éléments invisibles qui contribuent à gérer des
interactions (scripts) ou des mises en forme (styles)
> Ex :
ARS
avancées
page web
gestion de contenu
1
4. Technologies Web
Bloc 4
ARS Texte et mise en forme
Pas de prise en charge WYSIWYG
• Toute mise en forme nécessite l’usage d’une balise

> Paragraphe : <p> </p>
> Gras : <strong></strong> (ou <b></b>)
> Italique : <i></i>
> Titres : <h1></h1>, <h2></h2>, <h3></h3>...
> Retour à la ligne: <br />
> Et bien d’autres
Bloc 4
ARS Multimédia - images
<img />
• src (1) définit le chemin ou l’URL vers l’image

• alt (2) définit un message à afficher si le navigateur ne
peut pas rendre l’image
Bloc 4
ARS Multimédia - audios
<audio></audio>
• controls (1) permet d’utiliser les options audio par

défaut du navigateur
• src (2) définit le chemin ou l’URL de l’image
Bloc 4
ARS Multimédia - vidéos
<video></video>
• controls (1) permet d’utiliser les options vidéo par

défaut du navigateur
• Balise imbriquée <source> (2) pour définir le chemin et
le format de la vidéo
Bloc 4
ARS Multimédia - élément de figure
<figure></figure>
• Élément multimédia (audio, vidéo, image) + légende

> Legende définie via <figcaption></figcaption>
Bloc 4
ARS Lien hypertexte ou élément d’ancre vers d’autre page
<a></a>
• L’attribut href (1) définit la page cible du lien

• Le texte du lien est défini entre la balise ouvrante et la
balise fermante (2)
Bloc 4
ARS Liste numérotée
<ol></ol>
• Eléments de la liste définis via des balises <li></li>
Bloc 4
ARS Liste non-numérotée
Balise <ul></ul>
• Eléments de la liste définis via des balises <li></li>
ARS
avancées
page web
gestion de contenu
1
4. Technologies Web
Bloc 4
ARS Division/bloc de contenu
<div></div>
• Permet de regrouper et d’organiser des éléments

• Pas de représentation visuelle
• Rendu personnalisable via des éléments de style (le cas
échéant)
Bloc 4
ARS Style des éléments HTML
La plupart des éléments ont un attribut style permettant de

contrôler leur style de rendu
• Plusieurs style peuvent être combinés à l’aide des

points-virgules
Bloc 4
ARS Feuille de style
La plupart des éléments ont un attribut class permettant de définir

une ou plusieurs classes de style pour leur rendu
• Approche recommandée par rapport à l’attribut style

qui peut être complexe à maintenir
Bloc 4
ARS Formulaires de données
<form></form>
• Permet d’envoyer des données vers un serveur Web

• Divers éléments de contrôle
> Boutons : <button></button>
> Eléments d’entrées de données : <input />
> Zones de texte: <textarea></textarea>
> Regroupement de champs : <fieldset></fieldset>
> Et bien d’autres
Bloc 4
ARS Exemple de formulaire
Bloc 4
ARS Formulaire - Transmission des données au serveur
L’attribut “method” définit comment les données sont transmis au

serveur
• Méthode GET (<form method=”GET”>)

> Transmet les données dans l’URL de la requête
> Ex: /auth/login?name=toto&password=totopass
• Méthode POST (<form method=”POST”>)
> Transmet les données via le corps de la requête
• GET soulève la problématique de transmission de
données en claire dans l’URL (confidentialité)
Bloc 4
ARS Liens utiles
Ressources documentaires et tutoriels HTML
• https://www.w3schools.com/
• https://developer.mozilla.org/fr/docs/Web/HTML
• https://fr.w3docs.com/apprendre-html/mise-en-forme-
html.html

NSI B4 M4 S1 Diapos

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

NSI B4 M4 S1 Diapos

Transféré par

Droits d'auteur :

Formats disponibles

Bloc 4

ARCHITECTURES SYSTÈME ET RÉSEAUX,

Rodrigue Chakode Mai 2021

A la base de toute page web, on retrouve du code HTML

Langage de balises pour le Web

• Les balises permettent de définir et d’organiser :

Balise ouvrante, balise fermante

Partie comprise entre les balises <head> et </head>

• Titre de la page : <title> </title>

Section comprise entre les balises <body> et </body>

Pas de prise en charge WYSIWYG

• Toute mise en forme nécessite l’usage d’une balise

• src (1) définit le chemin ou l’URL vers l’image

• controls (1) permet d’utiliser les options audio par

• controls (1) permet d’utiliser les options vidéo par

• Élément multimédia (audio, vidéo, image) + légende

• L’attribut href (1) définit la page cible du lien

• Eléments de la liste définis via des balises <li></li>

• Eléments de la liste définis via des balises <li></li>

• Permet de regrouper et d’organiser des éléments

La plupart des éléments ont un attribut style permettant de

• Plusieurs style peuvent être combinés à l’aide des

La plupart des éléments ont un attribut class permettant de définir

• Approche recommandée par rapport à l’attribut style

• Permet d’envoyer des données vers un serveur Web

L’attribut “method” définit comment les données sont transmis au

• Méthode GET (<form method=”GET”>)

Ressources documentaires et tutoriels HTML

Vous aimerez peut-être aussi