HTML Partie 2

M104 -DÉVELOPPER DES SITES WEB STATIQUES
OFPPT_ISTA_SK
développement digital
 L’objective :
 Les balises HTML permettant de concevoir une page Web statique
PLAN
1.Normes W3C
2.Squelette d’une page HTML
1.Normes W3C
Les normes du W3C

W3C est chargé de promouvoir la compatibilité des technologies du World Wide Web telles
que HTML, XML, RDF, CSS,PNG, SVG,Parmiles normes W3C concernant HTML on cite
•Les balises <html>, < head >, title >, et <body> sont obligatoires
•Les éléments doivent être correctement imbriqués
•Les éléments doivent toujours être fermés
•Les éléments HTML doivent être en minuscules
•Les documents HTML doivent avoir un élément racine
•Les noms d'attributs doivent être en minuscules
•Les valeurs des attributs des balises doivent être indiqués
Validation du code HTML avec W3C Validator http :://validator w 3 org/
2.Squelette d’une page HTML
 Squelette d’une page Web

 Notion de balise
 Notion d’encapsulation
1. <div> : C'est un élément de division utilisé pour regrouper du contenu HTML ensemble. Dans ce cas,
tout le contenu de la page est contenu à l'intérieur de cette balise <div>.
2. <h1> : Il s'agit d'une balise de titre de niveau 1, généralement utilisée pour le titre principal de la page.
Dans ce cas, le texte "titre" est affiché comme le titre principal de la page.
3. <h2> : C'est une balise de titre de niveau 2, généralement utilisée pour les sous-titres ou les sections
importantes. Dans ce cas, le texte "un sous titre" est affiché comme un sous-titre.
4. <p> : Cette balise est utilisée pour définir un paragraphe de texte. À l'intérieur de cette balise, il y a du
texte qui sera affiché comme un paragraphe.
5. <em> : C'est une balise qui indique que le texte à l'intérieur doit être mis en évidence ou en italique.
Dans ce cas, le texte "des mots importants" est mis en évidence.
6. <img> : Cette balise est utilisée pour insérer une image dans la page web. Elle a deux attributs
importants :
1. src : Cet attribut spécifie le chemin vers l'image. Dans ce cas, il pointe vers un fichier nommé "logo.gif".
2. alt : Cet attribut est utilisé pour fournir un texte alternatif qui sera affiché si l'image ne peut pas être chargée ou pour
des lecteurs d'écran. Dans ce cas, il est défini comme "un logo".
03 - Définir les éléments basiques d’une page HTML
Squelette d’une page HTML
Squelette d’une page HTML
Définir les éléments basiques d’une page HTML
Balises de base
EXEMPLE
 Exemple d’une page HTML vide
 <!DOCTYPE html>
 <html lang="fr" dir="rtl">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
 <title>Mon document</title>
 </head>
 <body>
 
 </body>
 </html>
Balises de base
 Les paragraphes en HTML

La balise <p> désigne un nouveau paragraphe
• L'attribut "title" permet d'afficher un infobulle quand la souris survole le paragraphe
Exemple de déclaration d’un paragraphe :
<p title="infobulle sur le paragraphe">
le développement digital à l'OFPPT prépare les étudiants à une carrière
dans le domaine de la technologie de l'information et de la communication
en leur fournissant les compétences nécessaires pour créer, développer,
gérer et sécuriser des systèmes informatiques, des applications web et
mobiles, ainsi que pour analyser et interpréter les données. Cela leur
permet d'entrer dans le secteur de la technologie de l'information et de
contribuer à la transformation numérique de l'industrie et de la société
en général.
</p>
Balises de base
Les couleurs
Les couleurs en HTML

En HTML, On peut spécifier les couleurs de 3 manières différentes :
• En utilisant la valeur Hex : HEX est un système de numérotation hexadécimale des couleurs (basé sur les
chiffres décimaux de 0 à 9 et les lettres latines A à F). La
conception Web utilise le code de couleur hexadécimal sous forme #RRGGBB : RR est le rouge, GG est le vert
et BB est le bleu. Chaque fraction de couleur est
comprise entre 00 et FF.
• En utilisant les noms des couleurs : Les noms des couleurs doivent être spécifiés en anglais (blue, red, etc.).
• En utilisant la valeur RGB (Red, Green, Blue) : Le code couleur RGB est représenté sous forme de 3 couples
de codes en chiffres compris entre 0 et 255. Les trois
codes représentent respectivement le dosage du rouge, du vert et du bleu.
Couleurs du web :
Exemples de sites pour avoir les codes des couleurs
• https://www.w3schools.com/colors/colors_picker.asp
• https://htmlcolorcodes.com /
Les couleurs
 Les couleurs en HTML (Exemples)

 • L’attribut bgcolor : permet de préciser la couleur utilisée pour le fond du document :
 <body bgcolor="#eab676">
 <body bgcolor="rgb(234,182,118)">
 La balise <font> (obsolète)
 <font color="FF0000">Le code #FF0000 est la même chose que la couleur rouge notée «red».</font>
 • La balise <p>
 <p style="color:#8ebf42;"> C'est un texte vert</p>
 • La balise span :
 La balise <span> est un conteneur en ligne utilisé pour marquer une partie d'un texte ou une partie
d'un document. Elle est facilement stylisée par CSS ou manipulée avec
 JavaScript.
 <span style="color:red">Le texte est maintenant en rouge.</span>
 <span style="color:#556B2F">Voici le code pour le vert olive foncé.</span>
 <span style="color:#745"> Le code 745 est l'abréviation de 774455.</span>
Les listes
Les listes en HTML

Les listes sont utiles pour apporter de la clarté et de l’ordre aux documents web.
En HTML, il est possible de définir trois types de listes : les listes ordonnées, les listes non ordonnées, et les
listes de définition.
Les balises et les attributs utilisées sont :
• Balise ul : définir une liste non ordonnée
• Balise ol : définir une liste ordonnée
• Balise dl : définir une liste de définition
• Balise li : définir un élément de liste
• L'attribut "type" permet de préciser le type de numérotation utilisée pour présenter la liste
• L'attribut "value" permet d'initialiser le numéro courant par la valeur souhaitée
Les listes
Les listes
Execice
1. A quoi sert La déclaration DOCTYPE ?

2. Comment on peut valider un document html ?
3. Quel emplacement est défini le jeu de caractères
utilisé dans le document ?
4. Quel est le rôle des balises sémantique?
correction
1. Le "Doctype" ou DTD (Déclaration de Type de Document) sert à indiquer à quelles règles d'écriture
obéit le code d'une page html. Il aide les validateurs (X)HTML à vérifier la validité d’un document
html en utilisant les règles du doctype mentionné .

2. L’outil le plus fiable pour valider la syntaxe d’un document html est le service de validation du W3C
3.
accessible à la page suivantehttp://validator.w3.org/ .
Vous aurez la possibilité de valider une page en indiquant son adresse (URL), par envoi du fichier
complet (File Upload) ou par copier-coller du code.
4. Le jeu de caractères ou "charset " d’un document html peut être défini dans une balise <meta>
Exemple en XHTML :<meta charset="UTF-8">
5. Le rôle des balises sémantique c’est donner un sens aux informations qu’elles encadrent, ce qui aide à
améliorer le référencement de la page au niveau des moteurs de recherche. Elles permettent aussi aux
aveugles ou malvoyants qui utilisent un synthétiseur vocal, de lire les pages internet.
Tp
 Créer des listes numérotés et des listes à puce en utilisant les balises html <ol>
<ul> et <li>.
 Question:
 Créer un document html contenant des listes numérotées et des listes à puce
comme illustré ci dessous.
Correction
 <!doctype html>
 <html>
 <head><meta charset="utf-8"/></head>
 <body>
 <ol type="I">
 <li><h3>HTML</h3>
 <ol type="1">
 <li>Historique</li>
 <li>Structure
</li><li>Validation</li><li>Nouveautés HTML5</li>
 </ol></li>
 <li><h3>CSS</h3>
 <ul><li>Introduction</li><li>Les proprietés css</li>
<li>Nouveautés CSS3</li>
 </ul></li></ol></body></html>
Tp
 Travail à faire
 Réaliser la page ci-dessous en utilisant les balises de structure html5 (header , nav , section, article
footer…)
Correction

HTML Partie 2

Transféré par

Informations du document

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

HTML Partie 2

Transféré par

Droits d'auteur :

Formats disponibles

M104 -DÉVELOPPER DES SITES WEB STATIQUES

Les normes du W3C

 Squelette d’une page Web

 Les paragraphes en HTML

Les couleurs en HTML

 Les couleurs en HTML (Exemples)

Les listes en HTML

1. A quoi sert La déclaration DOCTYPE ?

html en utilisant les règles du doctype mentionné .

Vous aimerez peut-être aussi