Introduction Au HTML

Développement
d’applications Web
CHAPITRE 1
Introduction au HTML
HTML
HyperText Markup Language : langage de mise

en forme de documents hypertextes.
Développé au CERN en 1989 par Tim Berners-
Lee.
Le plus ancien HTML sur le web
http://infomesh.net/html/history/early/
1991 : premier navigateur en mode texte
1993 : premier navigateur graphique (mosaic)
développé au NCSA (National Center for
Supercomputing Applications)
HTML
hypertext :les pages contiennent bien plus que du texte : Peut

contenir des objets multimédia, des liens référant à d’autres partie
de la même page/d’autres pages…
markup : autre que le texte à afficher, une page comporte des
symboles spéciaux: des balises (tags) pour définir la structure et le
type du contenu.
HTML est un langage universel de description de documents mais
ce n’est pas un langage de programmation.
Un document HTML n'est rien de plus qu'un fichier texte avec
l’extension .html ou .htm.
Un document HTML s'adapte à toutes les plateformes : Windows,
Mac, Unix, OS/2, etc.
HTML, XHTML et HTML5
1998 : appariation de la version HTML 4.01.

Cette version propose l'utilisation des frames, des tableaux plus
complexes, des améliorations des formulaires, etc.
L'exploitation des feuilles de style (CSS)
2000 : W3C a crée le langage XHTML : Extensible HTML, une reformulation du
langage HTML en XML.
Code plus strict: les balises bien fermées, en minuscules, avec des
attributs prédéfinis, etc.
abandonné en 2009 (ou plus exactement intégré dans le HTML5).
2012 : le WHATWG (Web Hypertext Application Technology Working Group)
a annoncé le développement de HTML 5.
Faciliter d’inclure le contenu MultiMedia,, un meilleur organisation du
contenu, de nouvelles fonctionnalités pour les formulaires, etc.
Le langage HTML5 est une amélioration du langage HTML4, avec des
simplifications par rapport à la version XHTML.
Balises?
Balises ou tags ou marqueurs: Utilisées pour marquer le début et la fin d'un

élément en HTML
Toutes les balises ont le même format:
commencent par un signe inférieur "<" et terminent par un signe supérieur ">".
Deux types de tags
balise d'ouverture: <html>
balises de fermeture: </ html>.
Exception: balise « orpheline ». Exemple <br> , <hr>
Le navigateur ne les fera pas apparaître mais interprètera leurs effets

Elément et balise
Les éléments vont nous servir à définir des objets dans notre page.
Un élément est constitué d’une paire de balises (ouvrante et fermante)
Attributs
Les balises peuvent avoir des attributs pour spécifier certaines caractéristiques de
présentation.
La syntaxe :
<balise attribut1="valeur1"
attribut2="valeur2" attribut3="valeur3"> blabla </balise>
Exemple : Indiquer la cible d’un lien

Attributs: Exemples
Attributs Description Exemple
«lang » La langue du document peut être déclarée <!DOCTYPE html>

dans la balise <html>
Déclarer une langue est important pour les <html lang="en-US">
applications d'accessibilité (lecteurs d'écran) <body>……………..</body>
et les moteurs de recherche
</html>
« title » L’élément <p> a un attribut title . <p title= "Technologie">
La valeur de l'attribut est " Technologie"
Les notions de technologie.</p>
«width » Les images HTML sont définis avec la balise <img src = " ordinateur.jpg " width =
<img>.
«height» Le nom de fichier de la source ( src ) , et la " 104 " height = " 142 " >
taille de l'image ( largeur et hauteur ) sont tous
fournis sous forme d'attributs.
« alt» L'attribut alt définit un texte à utiliser, quand un <img src = " ordinateur.jpg " alt = "
élément HTML ne peut pas être affiché.
materiel.com " width = " 104 "
height= " 142">
Structure d’un document HTML
La structure de base d’un document HTML se présente comme suit:
Précise le type de document qui va être créé.

Cette commande est facultative .
Dans HTML 5, la forme est <!DOCTYPE html>
Il y a différents documents dans le web, le
navigateur ne peut afficher correctement une
page HTML que lorsqu’il connait sa version et
son type.
L’élément racine du document HTML.
Englobe un certain nombre d’informations utiles

au bon affichage de la page web.
Il est optionnel.
contient tout ce qui apparaîtra dans la fenêtre

du navigateur (texte, images, de liens
hypertextes, tableaux, videos, etc…).
Il permet de définir l'apparence du fond de
l'écran et la couleur des éléments textuels.
Balises de documents (1)
<!doctype ….> type du document
<html> … </html> début et fin de document
<head> … </head> l’entête du document
<body> … </body> le contenu « visible » du document
<! ………………> commentaires

Dans la section head

L’élément <title>: Titre affiché dans la barre du navigateur
<head>
<title>This is a page title</title>
</head>
L’élément <meta>: Les meta sont les informations qui concernent les
données et qui ne seront pas affichées par les navigateurs. Elles sont
utilisées par les moteurs de recherche (indexation, mot clé, recherche
par auteur, etc.), les navigateurs(comment afficher le contenu ou
recharger une page), etc.
<head>
<meta name="author" content=“Mme Melki">
<meta name="Description" content="Ce document blabla">
<meta name="Keywords" content=“HTML;CSS; JavaAScript">
<meta charset="utf-8" />
</head>
L’élément <link>: Il permet d’établir un lien entre la page HTML en cours

et un autre document externe nécessaire à la page. C’est la balise la
plus utilisée pour référer aux fichiers CSS (.css) ou un script JavaScript (.js).
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
L’élément <style>: Utilisée pour définir l’information de style pour un

document HTML).
<head>
<style>
body{background-color:yellow;}
p {color:blue;}
</style>
</head>
La baise <body>
Attributs:
background="image" image de fond d’écran
text="couleur" couleur du texte
link ="couleur" couleur des liens non consultés
alink ="couleur" couleur des liens actifs
Couleur: aqua, black, fuschia, gray, green, lime, marroon, navy,
olive, purple, red, silver, teal, white, yellow
Les autres couleurs sont définie en hexa (exemple: #FF0000 =rouge)
1ère page HTML
<html>
<head>
</head>
<body>
</body>
</html>
Ajouter le titre de la page
<html>
<head>
</head>
<body>
</body>
</html>
Ajouter un titre de paragraphe
<html>
<head>
</head>
<body>
<h1>A heading On My First Webpage</h1>
</body>
</html>
Ajouter du texte
<html>
<head>
</head>
<body>
<! My page starts here>

<p>Here is some text in a paragraph</p>
<p>Here is the next paragraph</p>
</body>
</html>
Ajouter du texte
Attributs de la balise <body>
<html>
<head>
</head>
<body style="background-color:yellow; color:"blue" >
<! My page starts here>
<p>Here is some text in a paragraph</p>
<p>Here is the next paragraph</p>
</body>
</html>
Attributs de la balise <body>
Exercice
Ecrivez le squelette d’une page avec les caractéristiques suivantes

- encodage : utf-8
- titre de la page : première page HTML
- auteur : vous même
- mots clés : html5, test
Corrigé
<!DOCTYPE html>
<html>
<head>
<title>Première page HTML</title>
<meta name="author" content=“Mme Melki">
<meta name="Keywords" content=“HTML;Test">
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
Questions?

Introduction Au HTML

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

Introduction Au HTML

Transféré par

Droits d'auteur :

Formats disponibles

Développement

HyperText Markup Language : langage de mise

hypertext :les pages contiennent bien plus que du texte : Peut

1998 : appariation de la version HTML 4.01.

Balises ou tags ou marqueurs: Utilisées pour marquer le début et la fin d'un

Toutes les balises ont le même format:

Deux types de tags

balise d'ouverture: <html>

balises de fermeture: </ html>.

Exception: balise « orpheline ». Exemple <br> , <hr>

Le navigateur ne les fera pas apparaître mais interprètera leurs effets

Exemple : Indiquer la cible d’un lien

Attributs Description Exemple

«lang » La langue du document peut être déclarée <!DOCTYPE html>

La structure de base d’un document HTML se présente comme suit:

Précise le type de document qui va être créé.

L’élément racine du document HTML.

Englobe un certain nombre d’informations utiles

contient tout ce qui apparaîtra dans la fenêtre

<!doctype ….> type du document

<html> … </html> début et fin de document

<head> … </head> l’entête du document

<body> … </body> le contenu « visible » du document

<! ………………> commentaires

Dans la section head

L’élément <link>: Il permet d’établir un lien entre la page HTML en cours

L’élément <style>: Utilisée pour définir l’information de style pour un

<! My page starts here>

<p>Here is some text in a paragraph</p>

<p>Here is the next paragraph</p>

Ecrivez le squelette d’une page avec les caractéristiques suivantes

Vous aimerez peut-être aussi