Lamiae
Sommaire: Présentation du langage HTML
Présentation du langage HTML
qu’est ce que l’HTML?
qu’est ce qu’une balise?
de quoi avez-vous besoin?
Présentation des balises usuelles
votre premier document
balises simples
balises de mise en forme
listes
tableaux
images et références
organisation du texte
caractères spéciaux
frames
map, area et images réactives
Exercices
Présentation des feuilles de style CSS
Exercices sur les feuilles de style
Extrait du cours présentation du langage HTML
Le langage HTML
Ici le lien vers les supports de cours de Fabien Torre sur le langage HTML.
Qu’est ce que l’HTML?
HTML est le langage de balisage hypertexte utilisé dans le Web (HyperText Markup Language).
Ce n’est pas un langage de programmation proprement dit.
Ce sont « simplement » des balises pour mettre en forme (avec des liens, en tableau, etc…) du texte et des images.
Pour avoir une idée de l’aspect d’une page écrite en HTML, cliquez sur « Affichage » (ou « View ») dans votre navigateur, puis sélectionnez « page source ».
Qu’est ce qu’une balise?
Une balise est une « instruction » comprise entre crochets < > qui possède un nom et parfois des attributs.
<br> est, par exemple, la balise utilisée pour spécifier qu’il faut passer à la ligne.
La plupart des balises doivent être ouvertes puis refermées.
On retrouvera donc souvent une balise de début et une balise de fin.
La balise de fin porte le même nom que la balise de début mais est en plus précédée du signe /.
Nous aurons donc: (ouverture) <nom_de_balise> et (fermeture) </nom_de_balise>.
Par exemple: <b>mon texte en gras (bold)</b>.
Le nom de la balise (contenu entre les crochets) n’est pas sensible à la casse:
il peut être écrit indifféremment en majuscule, en minuscule ou en un mélange des 2.
L’attribut d’une balise est défini comme suit: nom_attribut= »valeur »
Par exemple, la balise utilisée pour faire un lien a pour nom « a », et pour nom d’attribut « href ».
Ainsi, <a href= »http://www.google.fr »>Google</a> permet de faire un lien vers la page principale du site de Google.
Dans ce cas, la valeur de l’attribut « href » est donc « http://www.google.fr ».
De quoi avez-vous besoin ?
Pour créer une page Web en HTML, vous avez besoin de:
un navigateur (Internet Explorer, Netscape, Mozilla, etc…), pour visualiser le résultat;
un éditeur HTML (Notepad ou WordPad feront très bien l’affaire par exemple), pour créer votre page HTML;
NB: vous n’aurez pas besoin d’être connecté à Internet pour créer votre site.
Présentation des balises usuelles
Ici le lien vers des tutoriaux sur les balises de base.
Votre premier document
copiez ceci dans votre éditeur:
<html>
<head>
<title>Mon titre</title>
</head>
<body>
Voici mon premier document!
</body>
</html>
sauvegardez le document avec comme extension « .htm » ou « .html », et comme type « texte seulement » ou « tout type (*.*) »;
puis double-cliquez sur le document: votre navigateur par défaut sera alors ouvert sur la page.
Explications des nouvelles balises utilisées:
<html> et </html> : informent votre navigateur qu’il s’agit d’une page HTML; la première balise doit donc être la première de votre code, et la seconde doit être la dernière.
<head> et </head> : informent votre navigateur qu’il s’agit de l’en-tête de votre page; cette en-tête comprend pour l’instant le titre de votre page; la balise <head> est toujours placée juste après la balise <html>.
<title> et </title> : informent votre navigateur qu’il s’agit du titre de votre page; ce titre sera placé dans la barre tout au-dessus de votre navigateur; ces balises doivent se situer à l’intérieur de la balise « head », c’est-à-dire entre <head> et </head>.
<body> et </body> : informent votre navigateur qu’il s’agit du corps de votre document; c’est là que vous allez placer textes, images, et tout ce que contiendra votre page; la balise <body> doit se situer après la balise de fermeture de l’en-tête </head>.
On peut donc faire une première constatation : le code d’une page web est composé de 2 parties, l’en-tête de la page (HEAD) et le corps (BODY); et seul le corps de la page est affiché à l’écran: dans votre première page, il n’y a que la phrase « Voici mon premier document! » qui s’est affichée.
……..
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Cours: Présentation du langage HTML (218 KO) (Cours PDF)
