Tout d'abord nous allons commencer par les bases du HTML pour tout les novice du langage.
INTRODUCTION EN HTML
HTML:
HTML signifie Hyper Text Markup Language, il a été créé par Berners-Lee à la fin de 1991, qui est la langue la plus utilisée sur le Web pour développer des pages Web.
Les navigateurs Web peuvent lire des fichiers HTML et les composer dans des pages Web visibles ou audibles. Les navigateurs n'indiquent pas les balises HTML et les scripts, mais utilisez-les pour interpréter le contenu de la page. HTML décrit la structure d'un site Web sémantiquement avec des astuces pour la présentation, ce qui en fait un langage de balisage plutôt qu'un langage de programmation.
VERSIONS HTML
ANNÉE DE VERSION
Html 1991
Html 2.0 1995
Html 3.2 1997
Html 4.01 1999
XHtml 2000
Html 5 2012
COMMENCER :
Les fichiers HTML ne sont que des fichiers texte simples, afin de commencer à écrire en HTML, vous avez besoin d'un éditeur de texte simple, pour apprendre le HTML, un éditeur de texte simple comme le Bloc-notes (PC) ou le TextEdit (Mac) sera facile. HTML peut être édité en utilisant un éditeur HTML professionnel comme Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor.
Pour créer une simple page en html avec le notepad:
- Ouvrez Notepad (PC) ou TextEdit (Mac)
Ecrivez quelque ligne en HTML dans l’éditeur de texte.
Suivez ce code ou faites copier-coller , essayez vous même avec cette petite option.
<!DOCTYPE html>
<html>
<body>
<h1>Ceci est mon titre</h1>
<p>Ceci est mon paragraphe</p>
</body>
</html>
- Cette page doit être enregistre dans un fichier en .html comme extension par exemple text.html
- UTF-8 est l'encodage le plus utilise dans les fichier html
LES BASES DU HTML
Un document html simple
Ceci est mon titre
Ceci est mon paragraphe
Explication du document HTML ci-dessus:
1. La déclaration DOCTYPE définit le type de document comme HTML.
2. Le texte entre <html> et </html> décrit un document HTML.
3. Le texte entre <head> et </head> fournit des informations sur le document.
4. Le texte entre <title> et </title> fournit un titre pour le document.
5. Le texte entre <body> et </body> décrit le contenu visible de la page.
6. Le texte entre <h1> et </h1> décrit un titre.
7. Le texte entre <p> et </ p> décrit un paragraphe.
RUBRIQUE EN HTML:
Chaque document aura un titre. HTML a différentes tailles pour les titres. Qui utilisent les éléments suivants <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. Tout en affichant n'importe quel titre, le navigateur ajoute une ligne avant et une ligne après cette rubrique.
Exemple de titre:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de titre</title>
</head>
<body>
<h1>Exemple de titre h1</h1>
<h2>Exemple de titre h2</h2>
<h3>Exemple de titre h3</h3>
<h4>Exemple de titre h4</h4>
<h5>Exemple de titre h5</h5>
<h6>Exemple de titre h6</h6>
</body>
</html>
PARAGRAPHE EN HTML:
En HTML, vous pouvez structurer votre texte en différents paragraphes à l'aide de la balise <p>. Chaque paragraphe du texte doit passer entre une balise <p> et une balise </p> de fermeture.
Exemple de paragraphe:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de Paragraphe</title>
</head>
<body>
<p>Ceci est le premier Paragraphe.</p>
<p>Ceci est le Second Paragraphe.</p>
<p>Ceci est le troisième Paragraphe.</p>
</body>
</html>
</html>
LINE BREAK IN HTML:
Si vous utilisez la balise <br>, tout ce qui suit commence à partir de la ligne suivante. Cette balise est un exemple d'un élément vide, il n'est pas nécessaire d'ouvrir et de fermer des balises car il n'y a rien entre elles.
Exemple pour la rupture de ligne:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de Line Break
</title>
</head>
<body>
<p>Ceci<br>
est un exemple de<br>
Line Break</p>
</body>
</html>
FORMULAIRE DE PRÉSENTATION:
Si vous souhaitez que votre texte soit un format exact de la manière dont il est écrit dans le document HTML, vous pouvez utiliser la balise préformatée <pré>. Tout texte entre la balise <pré> et la balise </ pre> de fermeture préservera la mise en forme du document source.
Exemple pour préserver le formatage:
<!DOCTYPE html>
<html>
<head>
<title>Preservation de formatage</title>
</head>
<body>
<pre>
Ceci
est
un
Exemple de preservation
</pre>
</body>
</html>
LIGNE HORIZONTALE :
Pour créer une ligne horizontale entre une section de document, la balise <hr> peut être utilisée, elle crée une ligne à partir de la position actuelle dans le document sur la marge droite et interrompt la ligne en conséquence.
Exemple pour ligne horizontale:
<!DOCTYPE html>
<html>
<head>
<title>Ligne horizontal </title>
</head>
<body>
<p>Ceci est au dessus de la ligne</p>
<hr />
<p>Ceci est inferieur a la ligne</p>
</body>
</html>
LES DIFFERENTS STYLES DU HTML
En HTML, chaque élément a un style par défaut qui est (la couleur d'arrière-plan est blanche, la couleur du texte est noire, la taille du texte est 12px ....) La modification du style par défaut d'un élément HTML peut être effectuée avec l'attribut style.
L'attribut de style HTML a la syntaxe suivante:
Style = "propriété:valeur"
COULEUR DE FOND :
La propriété de couleur d'arrière-plan modifie la couleur d'arrière-plan.
Exemple de couleur d'arrière-plan:
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">
<h1>Couleur de fond</h1>
<p>Couleur de fond modifier</p>
</body>
</html>
COULEUR DU TEXTE:
La propriété de couleur de texte modifie la couleur du texte pour un élément HTML.
Exemple pour la couleur du texte:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:RoyalBlue">Ceci est mon entete</h1>
<p style="color:SteelBlue">Ceci est un paragraphe.</p>
</body>
</html>
TEXT FONTS:
La propriété font-family définit la police à utiliser pour un élément HTML.
Exemple pour les polices de texte:
TAILLE DU TEXTE :
La propriété font-size définit la taille du texte à utiliser pour un élément HTML.
Exemple pour la taille du texte:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:180%">Voila mon entete</h1>
<p style="font-size:120%">Voici mon paragraph.</p>
</body>
</html>
ALIGNEMENT DU TEXTE :
La propriété text-align définit l'alignement horizontal du texte pour un élément HTML
Exemple d'alignement de texte:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">l'entete est centrer</h1>
<p>celui ci est mon paragraph vous pouvez en rediger plusieurs a votre gout.</p>
</body>
</html>
cliquez ICI pour télécharger la totalité des fichier qui ont été présenté ci-dessus et vous pouvez les renommer en extension .txt pour les éditer.
LINE BREAK IN HTML:
Si vous utilisez la balise <br>, tout ce qui suit commence à partir de la ligne suivante. Cette balise est un exemple d'un élément vide, il n'est pas nécessaire d'ouvrir et de fermer des balises car il n'y a rien entre elles.
Exemple pour la rupture de ligne:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de Line Break
</title>
</head>
<body>
<p>Ceci<br>
est un exemple de<br>
Line Break</p>
</body>
</html>
FORMULAIRE DE PRÉSENTATION:
Si vous souhaitez que votre texte soit un format exact de la manière dont il est écrit dans le document HTML, vous pouvez utiliser la balise préformatée <pré>. Tout texte entre la balise <pré> et la balise </ pre> de fermeture préservera la mise en forme du document source.
Exemple pour préserver le formatage:
<!DOCTYPE html>
<html>
<head>
<title>Preservation de formatage</title>
</head>
<body>
<pre>
Ceci
est
un
Exemple de preservation
</pre>
</body>
</html>
LIGNE HORIZONTALE :
Pour créer une ligne horizontale entre une section de document, la balise <hr> peut être utilisée, elle crée une ligne à partir de la position actuelle dans le document sur la marge droite et interrompt la ligne en conséquence.
Exemple pour ligne horizontale:
<!DOCTYPE html>
<html>
<head>
<title>Ligne horizontal </title>
</head>
<body>
<p>Ceci est au dessus de la ligne</p>
<hr />
<p>Ceci est inferieur a la ligne</p>
</body>
</html>
LES DIFFERENTS STYLES DU HTML
En HTML, chaque élément a un style par défaut qui est (la couleur d'arrière-plan est blanche, la couleur du texte est noire, la taille du texte est 12px ....) La modification du style par défaut d'un élément HTML peut être effectuée avec l'attribut style.
L'attribut de style HTML a la syntaxe suivante:
Style = "propriété:valeur"
COULEUR DE FOND :
La propriété de couleur d'arrière-plan modifie la couleur d'arrière-plan.
Exemple de couleur d'arrière-plan:
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">
<h1>Couleur de fond</h1>
<p>Couleur de fond modifier</p>
</body>
</html>
COULEUR DU TEXTE:
La propriété de couleur de texte modifie la couleur du texte pour un élément HTML.
Exemple pour la couleur du texte:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:RoyalBlue">Ceci est mon entete</h1>
<p style="color:SteelBlue">Ceci est un paragraphe.</p>
</body>
</html>
TEXT FONTS:
La propriété font-family définit la police à utiliser pour un élément HTML.
Exemple pour les polices de texte:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:courier">Titre de la police de messagerie</h1>
<p style="font-family:PT Serif">Paragraphe dans la police PT Serif.</p>
</body>
</html>
TAILLE DU TEXTE :
La propriété font-size définit la taille du texte à utiliser pour un élément HTML.
Exemple pour la taille du texte:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:180%">Voila mon entete</h1>
<p style="font-size:120%">Voici mon paragraph.</p>
</body>
</html>
ALIGNEMENT DU TEXTE :
La propriété text-align définit l'alignement horizontal du texte pour un élément HTML
Exemple d'alignement de texte:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">l'entete est centrer</h1>
<p>celui ci est mon paragraph vous pouvez en rediger plusieurs a votre gout.</p>
</body>
</html>
cliquez ICI pour télécharger la totalité des fichier qui ont été présenté ci-dessus et vous pouvez les renommer en extension .txt pour les éditer.
0 Commentaires