Scribd
Importer
116 vues9 pages

HTML Partie1

Ce tutoriel HTML fournit des concepts de base et avancés du HTML. Il couvre des sujets comme les balises HTML, les versions du HTML, les éditeurs de texte et plus encore.

Transféré par

Fita Nomenjanahary
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
116 vues9 pages

HTML Partie1

Ce tutoriel HTML fournit des concepts de base et avancés du HTML. Il couvre des sujets comme les balises HTML, les versions du HTML, les éditeurs de texte et plus encore.

Transféré par

Fita Nomenjanahary
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 9

Tutoriel HTML

Tutoriel HTML

Le didacticiel HTML ou le didacticiel HTML 5 fournit des concepts de base et avancés du HTML. Notre
tutoriel HTML est développé pour les débutants et les professionnels. Dans notre tutoriel, chaque
sujet est donné étape par étape afin que vous puissiez l'apprendre de manière très simple. Si vous
êtes nouveau dans l'apprentissage du HTML, vous pouvez apprendre le HTML du niveau basique au
niveau professionnel et après avoir appris le HTML avec CSS et JavaScript, vous serez en mesure de
créer votre propre site Web interactif et dynamique. Mais maintenant, nous allons nous concentrer
sur HTML uniquement dans ce tutoriel.

Les principaux points du HTML sont donnés ci-dessous:

HTML signifie HyperText Markup Language.

HTML est utilisé pour créer des pages Web et des applications Web.

Le HTML est un langage largement utilisé sur le Web.

Nous pouvons créer un site Web statique par HTML uniquement.

Techniquement, HTML est un langage de balisage plutôt qu'un langage de programmation.

Exemple HTML avec l'éditeur HTML

Dans ce didacticiel, vous obtiendrez de nombreux exemples HTML, au moins un exemple pour
chaque sujet avec une explication. Vous pouvez également éditer et exécuter ces exemples, avec
notre éditeur HTML en ligne. Apprendre le HTML est amusant et très facile à apprendre.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>

Qu'est-ce que le HTML

HTML est un acronyme qui signifie Hyper Text Markup Language, utilisé pour créer des pages Web et
des applications Web. Voyons ce que l'on entend par langage de balisage hypertexte et page Web.
Hyper Text: HyperText signifie simplement «Texte dans le texte». Un texte a un lien en son sein, est
un hypertexte. Chaque fois que vous cliquez sur un lien qui vous amène à une nouvelle page Web,
vous avez cliqué sur un hypertexte. HyperText est un moyen de lier deux ou plusieurs pages Web
(documents HTML) entre elles.

Langage de balisage: un langage de balisage est un langage informatique utilisé pour appliquer des
conventions de mise en page et de mise en forme à un document texte. Le langage de balisage rend
le texte plus interactif et dynamique. Il peut transformer du texte en images, tableaux, liens, etc.

Page Web: Une page Web est un document généralement rédigé en HTML et traduit par un
navigateur Web. Une page Web peut être identifiée en entrant une URL. Une page Web peut être de
type statique ou dynamique. Avec l'aide de HTML uniquement, nous pouvons créer des pages Web
statiques.

Par conséquent, HTML est un langage de balisage qui est utilisé pour créer des pages Web
attrayantes à l'aide du style, et qui se présente dans un bon format sur un navigateur Web. Un
document HTML est composé de nombreuses balises HTML et chaque balise HTML contient un
contenu différent.

Voyons un exemple simple de HTML.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>

Description de l'exemple HTML

<! DOCTYPE>: Il définit le type de document ou indique au navigateur la version du HTML.

<html>: cette balise informe le navigateur qu'il s'agit d'un document HTML. Le texte entre la balise
html décrit le document Web. C'est un conteneur pour tous les autres éléments du HTML sauf <!
DOCTYPE>
<head>: Ce doit être le premier élément de l'élément <html>, qui contient les métadonnées
(informations sur le document). Il doit être fermé avant l'ouverture de la balise body.

<title>: Comme son nom l'indique, il est utilisé pour ajouter le titre de cette page HTML qui apparaît
en haut de la fenêtre du navigateur. Il doit être placé à l'intérieur de l'étiquette de tête et doit se
fermer immédiatement. (Optionnel)

<body>: le texte entre la balise body décrit le contenu du corps de la page qui est visible par
l'utilisateur final. Cette balise contient le contenu principal du document HTML.

<h1>: le texte entre la balise <h1> décrit le titre de premier niveau de la page Web.

<p>: Le texte entre la balise <p> décrit le paragraphe de la page Web.

Bref historique du HTML

À la fin des années 80, un physicien, Tim Berners-Lee, qui était un contractant au CERN, a proposé un
système pour les chercheurs du CERN. En 1989, il rédige une note proposant un système hypertexte
basé sur Internet.

Tim Berners-Lee est connu comme le père du HTML. La première description disponible du HTML
était un document appelé "HTML Tags" proposé par Tim fin 1991. La dernière version du HTML est
HTML5, que nous apprendrons plus tard dans ce tutoriel.

Versions HTML

Depuis que le HTML a été inventé, il existe de nombreuses versions HTML sur le marché, la brève
introduction sur la version HTML est donnée ci-dessous:

HTML 1.0: La première version de HTML était 1.0, qui était la version simple du langage HTML, et elle
a été publiée en1991.

HTML 2.0: Il s'agissait de la prochaine version publiée en 1995, et c'était une version linguistique
standard pour la conception de sites Web. HTML 2.0 était capable de prendre en charge des
fonctionnalités supplémentaires telles que le téléchargement de fichiers basé sur un formulaire, des
éléments de formulaire tels qu'une zone de texte, un bouton d'option, etc.
HTML 3.2: La version HTML 3.2 a été publiée par le W3C au début de 1997. Cette version était
capable de créer des tableaux et de prendre en charge des options supplémentaires pour les
éléments de formulaire. Il peut également prendre en charge une page Web avec des équations
mathématiques complexes. Il est devenu un standard officiel pour n'importe quel navigateur
jusqu'en janvier 1997. Aujourd'hui, il est pratiquement pris en charge par la plupart des navigateurs.

HTML 4.01: La version HTML 4.01 est sortie en décembre 1999, et c'est une version très stable du
langage HTML. Cette version est la norme officielle actuelle, et elle fournit un support
supplémentaire pour les feuilles de style (CSS) et la capacité de script pour divers éléments
multimédias.

HTML5: HTML5 est la dernière version du langage HyperText Markup. La première version de cette
version a été annoncée en janvier 2008. Il existe deux grandes organisations, l'une est le W3C (World
Wide Web Consortium), et l'autre est WHATWG (Web Hypertext Application Technology Working
Group) qui sont impliquées dans le développement de la version HTML 5 , et encore, il est en cours
de développement.

Caractéristiques du HTML

1) C'est un langage très facile et simple. Il peut être facilement compris et modifié.

2) Il est très facile de faire une présentation efficace avec HTML car il contient beaucoup de balises
de formatage.

3) C'est un langage de balisage, il offre donc un moyen flexible de concevoir des pages Web avec le
texte.

4) Il permet aux programmeurs d'ajouter un lien sur les pages web (par balise d'ancrage html), donc
cela renforce l'intérêt de navigation de l'utilisateur.

5) Il est indépendant de la plate-forme car il peut être affiché sur n'importe quelle plate-forme
comme Windows, Linux et Macintosh, etc.

6) Cela permet au programmeur d'ajouter des graphiques, des vidéos et du son aux pages Web, ce
qui le rend plus attrayant et interactif.

7) HTML est un langage insensible à la casse, ce qui signifie que nous pouvons utiliser des balises en
minuscules ou en majuscules.
REMARQUE: il est recommandé d'écrire toutes les balises en minuscules pour des raisons de
cohérence, de lisibilité, etc.

Éditeurs de texte HTML

Un fichier HTML est un fichier texte, donc pour créer un fichier HTML, nous pouvons utiliser
n'importe quel éditeur de texte.

Les éditeurs de texte sont les programmes qui permettent d'éditer un texte écrit, donc pour créer
une page Web, nous devons écrire notre code dans un éditeur de texte.

Il existe différents types d'éditeurs de texte disponibles que vous pouvez télécharger directement,
mais pour un débutant, le meilleur éditeur de texte est Notepad (Windows) ou TextEdit (Mac).

Après avoir appris les bases, vous pouvez facilement utiliser d'autres éditeurs de texte professionnels
tels que Notepad ++, Sublime Text, Vim, etc.

Dans notre tutoriel, nous utiliserons le Bloc-notes et le sublime éditeur de texte. Voici quelques
moyens simples de créer votre première page Web avec le Bloc-notes et du texte sublime.

A. Code HTML avec Bloc-notes. (Recommandé pour les débutants)

Notepad est un éditeur de texte simple et adapté aux débutants pour apprendre le HTML. Il est
disponible dans toutes les versions de Windows, d'où vous y accédez facilement.

Étape 1: Ouvrez le Bloc-notes (Windows)

Étape 2: rédiger du code en HTML

Étape 3: Enregistrez le fichier HTML avec l'extension .htm ou .html.

Étape 4: Ouvrez la page HTML dans votre navigateur Web.

Pour exécuter la page HTML, vous devez ouvrir l'emplacement du fichier, où vous avez enregistré le
fichier, puis double-cliquez sur le fichier ou cliquez sur Ouvrir avec option

B. Code HTML avec Sublime Text-editor (recommandé après avoir appris les bases du HTML)

Lorsque vous apprendrez les bases du HTML, vous pourrez utiliser des éditeurs de texte
professionnels, qui vous aideront à écrire un code efficace et rapide. Donc, pour utiliser les éditeurs
Sublime Text, il faut d'abord télécharger et installer à partir d'Internet. Vous pouvez facilement le
télécharger à partir de ce lien https://www.sublimetext.com/download et l'installer sur votre PC.
Une fois l'installation de l'éditeur de texte Sublime terminée, vous pouvez suivre les étapes simples
pour l’utiliser :

Étape 1: Ouvrez l'éditeur de texte Sublime (Windows 8):

Pour ouvrir l'éditeur de texte Sublime, allez à l'écran de démarrage ⤏ tapez Sublime Text⤏ Ouvrez-
le. Pour ouvrir une nouvelle page, appuyez sur CTRL + N.
Étape 2: Enregistrez la page avant d'écrire un code.

Pour enregistrer votre page dans Sublime Text, appuyez sur Ctrl + S ou allez dans l'option Fichier ⤏
enregistrer, pour enregistrer un fichier, utilisez l'extension .htm ou .html. Nous vous recommandons
d'enregistrer d'abord le fichier, puis d'écrire le code car après l'enregistrement de la page, l'éditeur
de texte sublime vous donnera des suggestions pour écrire du code.

Étape 3: Écrivez le code dans l'éditeur de texte Sublime


Étape 4: Ouvrez la page HTML dans votre navigateur

Pour exécuter ou ouvrir cette page dans le navigateur Web, cliquez avec le bouton droit de la souris
sur la sublime page de texte et cliquez sur Ouvrir dans le navigateur.
Remarque: vous pouvez exécuter un fichier HTML dans n'importe quel navigateur, mais certaines
balises ne sont pas prises en charge par certains navigateurs Web.

Blocs de construction du HTML

Un document HTML se compose de ses blocs de construction de base qui sont:

Balises: une balise HTML entoure le contenu et lui donne une signification. Il est écrit entre crochets
<et>.

Attribut: un attribut en HTML fournit des informations supplémentaires sur l'élément, et il est
appliqué dans la balise de début. Un attribut HTML contient deux champs: nom et valeur.

Syntaxe
1. <tag name attribute_name= " attr_value"> content </ tag name>
Éléments: un élément HTML est un composant individuel d'un fichier HTML. Dans un fichier HTML,
tout ce qui est écrit dans les balises est appelé éléments HTML.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>The basic building blocks of HTML</title>
5. </head>
6. <body>
7. <h2>The building blocks</h2>
8. <p>This is a paragraph tag</p>
9. <p style="color: red">The style is attribute of paragraph tag</p>
10. <span>The element contains tag, attribute and content</span>
11. </body>
12. </html>

Output:

The building blocks


This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

Vous aimerez peut-être aussi