Le Langage HTML

HTML
Hypertext Markup Language

HTML ?
▪ Langage de description de documents Hyper-Textuels et défini par le
W3C.
▪ Issu de SGML (Standard Generalized Markup Language), langage de

définition de langages.
▪ Développé par Tim Berners-Lee au CERN (Suisse) en 1990 et utilisé sur

le Web depuis.
▪ Document HTML est structuré en balises (tags)

o Balises : Directives de mise en forme
Versions HTML
▪ 1990: HTML 1
▪ 1995: HTML 2
▪ 1995: HTML+ et HTML3 ( non standards)
▪ 1997: HTML 3.2 et HTML 4 (W3C)
▪ 2000: XHTML 1.0 (HTML 4 réécrit en XML)
▪ 2001: XHTML 1.1
▪ 2003: XHTML 2 (évolution de XHTML 1 abandonnée en 2009)
▪ 2008: HTML 5/ XHTML 5 (finalisé en 2014)

HTML ou XHTML
▪ XHTML est le successeur de HTML, Se base sur la syntaxe définie par XML
▪ Devenu standard pour assurer la compatibilité entre navigateurs (Firefox, Internet Explorer,..)
Structure d’une page HTML
Déclaration
Entête
Corps
Balise HTML
▪ 140 balises
▪ De la forme : <tag></tag> ou <tag />
▪ Peut porter de 0 à n attributs
Attributs
1.Partie Entête
<head>…</head>
▪ Définit la tête du document HTML.
▪ Le navigateur n'affichera pas cette partie.
▪ Ne contient que des méta-données (titre et informations descriptives).
▪ Fait appel aux scripts (JS) et styles (CSS) de la page

<head>
▪ Balise <title>
• Définit le titre d'un document.
• Le titre est le seul élément HTML obligatoire et il est placé dans la tête <head>.
<head>
▪ Balises <meta>
Indiquer différentes informations :

▪ description de la page web,
▪ ses mots-clés, son auteur,
▪ les règles spécifiques destinées aux robots des moteurs de recherche,
▪ L’encodage de la page web...
➢ Syntaxe générale :
<head>
▪ Balises <meta>
o Balise META : <meta charset="encodage">
o Définit l’encodage des caractères dans le document.
o Exemple :
<head>
▪ Balises <meta>
o Balise META : <meta name="keywords">
o Syntaxe :
<meta name="keywords" content="Liste des mots clés">
o Indique aux moteurs de recherche les mots clés en rapport avec votre site.
o Exemple :
<head>
▪ Balises <meta>
o Balise META : <meta name="reply-to">
o Syntaxe :
<meta name= "reply-to" content="email">
o Permet de spécifier l'adresse e-mail principale du site.
o Exemple :
<head>
▪ Balises <meta>
o Balise META : <meta name="category">
o Syntaxe :
<meta name= "category" content="education">
o Permet de spécifier la catégorie de votre site. Utilisé par certains moteurs qui génèrent
un classement par catégorie
o Exemple :
<head>
▪ Balises <meta>
o Balise META : <meta name="robots">
o Syntaxe :
<meta name= "robots" content="valeurs">
o Permet de spécifier les répertoires à référencer ou à exclure lorsque les robots (spiders) des
moteurs examineront votre site.
Valeur Description
index La page sera indexée par le robot
noindex La page ne sera pas indexée par le robot
follow Les liens contenus dans la page seront indexés
nofollow Les liens contenus dans la page ne seront pas indexés
o Exemple :
<head>
▪ Balises <meta>
o Balise META : <meta name="description">
o Syntaxe :
<meta name= "description" content="description du site">
o Cette description est prise en compte par le moteur de recherche comme description de la page
dans laquelle elle est insérée.
o Les mots que constituent cette phrase sont aussi considérés comme des mots clés par la plupart
des moteurs.
o Exemple :
<head>
▪ Balises <meta>
o Balise META : <meta name="revisit-after">
o Syntaxe :
<meta name= "revisit-after" content="nombre de jours">
o Permet de spécifier au spider (robot du moteur) de réindexer votre site suivant l'intervalle en jours
donnée.
o "15 days" ou "30 days" sont les meilleurs compromis.
o Exemple :
<head>
▪ Balises <meta>
o Balise META : <meta name="author">
o Syntaxe :
<meta name= "author" content="nom d’auteur de la page">
o Permet d'identifier l'auteur du site (de la page)
o Exemple :
2.Partie Corps
<body>…</body>
▪ Définit le corps du document.

▪ Il n'y a qu'un seul élément body dans un document HTML.
▪ Il est toujours placé après la tête.
▪ L'utilisateur verra tout ce qui est placé dans cet élément.
STRUCTURE D’UN BODY (HTML 5)
SQUELETTE D’UNE PAGE HTML 5
Contenu de la partie <body>
▪ Texte et mise en forme

▪ Liens hypertextes
▪ Les images
▪ Les listes
▪ Les tableaux
▪ Les formulaires
▪ Audio et vidéo
▪ Les titres : <h1> <h2> <h3> <h4> <h5> <h6>

o Ces balises permettent de définir des titres de différents niveaux
o h1 pour les plus grands titres et h6 les plus petits
▪ Les paragraphes : <p>

o La balise utilisée pour créer des paragraphes.
o Ces paragraphes sont automatiquement séparés par des sauts de ligne.
▪ Division en blocs: <div>

o Regrouper plusieurs éléments en un seul bloc (afin d’appliquer un style particulier)
▪ Fusion de mots: <span>

o Regrouper un ensemble de mots dans un paragraphe (afin d’appliquer un
style particulier)
▪ Texte en gras: <strong>

▪ Texte en italique : <em>
▪ Texte en exposant : <sup>
▪ Texte en indice : <sub>
▪ Texte préformaté : <pre>
▪ Balise: <font>
▪ Retour à la ligne: <br>

▪ Trait séparateur horizontal : <hr>
▪ Caractères spéciaux :
▪ Espace insécable:

▪ < : <
▪ > : >
▪ & : &
▪ " : "
▪ Liens hypertextes
▪ Liens externes
▪ Liens internes
▪ Le ancres
▪ Les liens d’action
▪ Les boutons
▪ Liens hypertextes <a>
▪ Liens externes
▪ Liens internes
▪ Les ancres (liens dans la même page)
▪ Une ancre vers une autre page

▪ Liens d’action
▪ Boutons
▪ Les cadres <iframe>
▪ Créer le cadre
▪ Charger des pages dans le cadre

▪ Les cadres <iframe>
▪ Les images <img>
▪ Insérer une image : Formats : .png , .jpg, .gif
▪ Image cliquable
▪ Les listes
▪ Listes ordonnées : <ol>

▪ Listes non-ordonnées (à puces): <ul>
▪ Listes imbriquées : <ol> / <ul>
▪ Les listes de définitions : <dl>
▪ Les listes
▪ Listes ordonnées : <ol>

▪ Les listes
▪ Listes non-ordonnées : <ul>

▪ Les listes
▪ Listes imbriquées :
▪ Les listes
▪ Listes de définitions :
▪ Les listes
▪ Listes cliquables (Menu) :
▪ Les tableaux <table>
▪ Tableaux irréguliers
▪ Fusion des colonnes : <colspan>
▪ Fusion des lignes : <rowspan>
▪ Les formulaires <form>
▪ Un formulaire permet de saisir des données et les envoyer au serveur pour traitement
▪ Structure d’un formulaire :

Méthode d’envoi des données Fichier de traitement
▪ Méthodes d’envoi :
o GET : envoi des données saisies par URL. Les données sont récupérées par $_GET
o POST : envoi des données par requête (dans un fichier). On les récupère par $_POST
▪ Fichier de traitement :
o Les données peuvent être traitées dans le même fichier du formulaire ou dans un
fichier séparé
▪ Contenu d’un formulaire
Balise Description
<input> Champ de données
<label> Etiquète d’un champ
<textarea> Zone de texte multilignes
<fieldset> Regroupement de champs
<select> Liste déroulante
▪ Attributs de la balise <input>
Attribut Description
Type Type de champ (texte, mot de passe, bouton,..)
Name Nom de la variable contenant les données
saisies
Value Valeur par défaut
Size Taille de la zone de champ
Maxlength Nombre maximum de caractères
Placeholder Indication qui disparait des que l'utilisateur
clique sur le champ pour rentrer une valeur
Required Indique que le champ est obligatoire
▪ Principales valeurs de l’attribut type
Valeur Description
text Champ de texte
hidden Champ caché
password Contenu masqué
tel Numéro de téléphone
url Adresse web
email Saisir une adresse mail
time Saisir l’heure
date Saisir une date
number Saisir un nombre
checkbox Boite à cocher
radio Bouton radio
color Choix de couleur
file Charger un fichier
reset Réinitialiser les champs
submit Bouton d’envoi
▪ Listes déroulantes <select>
Formulaire
▪ Audio et Vidéo
❑Audio
Pour lire un fichier audio.
▪ Audio et Vidéo
❑Vidéo
Pour lire une vidéo.
▪ Lien de téléchargement
❑Attribut download :
Pour créer un lien de téléchargement

Le Langage HTML

Transféré par

Droits d'auteur :

Formats disponibles

Le Langage HTML

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

Le Langage HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML

Hypertext Markup Language

▪ Issu de SGML (Standard Generalized Markup Language), langage de

▪ Développé par Tim Berners-Lee au CERN (Suisse) en 1990 et utilisé sur

▪ Document HTML est structuré en balises (tags)

▪ 1995: HTML+ et HTML3 ( non standards)

▪ 1997: HTML 3.2 et HTML 4 (W3C)

▪ 2000: XHTML 1.0 (HTML 4 réécrit en XML)

▪ 2001: XHTML 1.1

▪ 2003: XHTML 2 (évolution de XHTML 1 abandonnée en 2009)

▪ 2008: HTML 5/ XHTML 5 (finalisé en 2014)

▪ De la forme : <tag></tag> ou <tag />

▪ Peut porter de 0 à n attributs

▪ Définit la tête du document HTML.

▪ Le navigateur n'affichera pas cette partie.

▪ Ne contient que des méta-données (titre et informations descriptives).

▪ Fait appel aux scripts (JS) et styles (CSS) de la page

Indiquer différentes informations :

o Balise META : <meta charset="encodage">

o Définit l’encodage des caractères dans le document.

o Balise META : <meta name="keywords">

<meta name="keywords" content="Liste des mots clés">

o Balise META : <meta name="reply-to">

<meta name= "reply-to" content="email">

o Permet de spécifier l'adresse e-mail principale du site.

o Balise META : <meta name="category">

<meta name= "category" content="education">

<meta name= "robots" content="valeurs">

noindex La page ne sera pas indexée par le robot

follow Les liens contenus dans la page seront indexés

nofollow Les liens contenus dans la page ne seront pas indexés

o Balise META : <meta name="description">

<meta name= "description" content="description du site">

o Balise META : <meta name="revisit-after">

<meta name= "revisit-after" content="nombre de jours">

o Balise META : <meta name="author">

<meta name= "author" content="nom d’auteur de la page">

o Permet d'identifier l'auteur du site (de la page)

▪ Définit le corps du document.

▪ Texte et mise en forme

▪ Les titres : <h1> <h2> <h3> <h4> <h5> <h6>

▪ Les paragraphes : <p>

▪ Division en blocs: <div>

▪ Fusion de mots: <span>

▪ Texte en gras: <strong>

▪ Retour à la ligne: <br>

▪ Espace insécable: &nbsp;

▪ Les ancres (liens dans la même page)

▪ Une ancre vers une autre page

▪ Charger des pages dans le cadre

▪ Insérer une image : Formats : .png , .jpg, .gif

▪ Listes ordonnées : <ol>

▪ Listes ordonnées : <ol>

▪ Listes non-ordonnées : <ul>

▪ Structure d’un formulaire :

Vous aimerez peut-être aussi

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

▪ Espace insécable: