Présentation du HTML
1-Introduction
HTML Signifie Hyper Text Markup Language
Le HTML est un langage de balisage pour la création des pages web
Le HTML permet de décrire les structures d’une page web
Le HTML est composé d’une série d’éléments
Les éléments HTML indiquent au navigateur comment afficher le contenu
Une balise HTML est un élément que l'on va ajouter au texte de départ pour
dire au navigateur de quelle manière l'afficher. Elle n'est pas affichée telle
quelle dans le navigateur, elle est interprétée par celui-ci.
Elle est toujours délimitée par les signes < et >.
Une balise peut en plus comporter de zéro à plusieurs attributs. Les attributs
sont des informations complémentaires qui la caractérisent. Ils se présentent
sous la forme nomattribut="valeur".
Chaque balise ouverte doit être fermée, cependant il existe des exceptions.
On distingue deux types de balises :
• Les balises simples.
• Les balises doubles.
Lorsque l'on cumule l'écriture de plusieurs balises ouvrantes (forcément
inévitable), il est impératif de respecter la hiérarchie des balises, c'est-à-dire
que la première ouverte sera la dernière à être fermée.
Exemple :<b><u>Ici les balises sont correctement imbriquées.</u></b>
Le chevauchement des balises est une grave erreur.
Exemple :<b><u>Ici les balises ne sont</b> pas correctement imbriquées</u>
2 Document HTML
Tous les documents HTML doivent commencer par une déclaration de type de
document : <!DOCTYPE html>.
Le document HTML lui-même commence par <html> et se termine par </html>.
La partie visible du document HTML se situe entre <body> et </body>.
Exemple :
<!DOCTYPE html>
<html>
<body>
<!-- commentaires -->
<h1>titre</h1>
<p>paragraphe.</p>
</body>
</html>
3 Les Balises de Titre
Les balises de titre(heading) permettent d’afficher des titres et des sous titres.
Les titres HTML sont définis avec les balises <h1> à <h6>
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
Les moteurs de recherche utilisent les titres pour indexer la structure et le
contenu de vos pages Web.
Les utilisateurs parcourent souvent une page par ses titres. Il est important
d'utiliser des en-têtes pour montrer la structure du document.
Les en-têtes <h1> doivent être utilisés pour les en-têtes principaux, suivis des
en-têtes <h2>, puis des <h3> moins importants, et ainsi de suite.
4 Les Paragraphes HTML
Un paragraphe commence toujours sur une nouvelle ligne et est généralement
un bloc de texte.
Un paragraphe commence toujours sur une nouvelle ligne et les navigateurs
ajoutent automatiquement un espace blanc (une marge) avant et après un
paragraphe.
Exemple:
<p>ceci est un paragraphe.</p>
<p>ceci est autre un paragraphe.</p>
La balise <hr> définit une rupture thématique dans une page HTML et s'affiche le
plus souvent sous la forme d'une règle horizontale.
L'élément <hr> est utilisé pour séparer le contenu (ou définir un changement)
dans une page HTML :
Exemple:
<h1>ceci est un titre</h1>
<p>paragrapphe.</p>
<hr>
<h2>titre 2</h2>
<p>un autre paragraphe.</p>
<hr>
L'élément HTML <br> définit un saut de ligne.
Utilisez <br> si vous voulez un saut de ligne (une nouvelle ligne) sans
commencer un nouveau paragraphe :
L'attribut de style HTML est utilisé pour ajouter des styles à un élément, tels
que la couleur, la police, la taille, etc.
5 Les Styles HTML
L'attribut de style HTML est utilisé pour ajouter des styles à un élément, tels
que la couleur, la police, la taille, etc.
La définition du style d'un élément HTML peut être effectuée avec l'attribut
style.
L'attribut de style HTML a la syntaxe suivante :
<balise style="property:value;">
La propriété est une propriété CSS. La valeur est une valeur CSS.
Couleur de l'arrière plan : La propriété CSS background-color définit la
couleur d'arrière-plan d'un élément HTML.
Exemple 1:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Exemple 2:
<body>
<h1 style="background-color:powderblue;">titre</h1>
<p style="background-color:tomato;"> paragraphe.</p>
</body>
Couleur du text
La propriété CSS color définit la couleur du texte d'un élément HTML
Exemple:
<h1 style="color:blue;">Titre </h1>
<p style="color:red;">paragraphe.</p>
Type de police
La propriété CSS font-family définit la police à utiliser pour un élément HTML
Exemple:
<h1 style="font-family:verdana;">ceci est un titre</h1>
<p style="font-family:courier;">ceci est un parapgraphe.</p>
Taille du texte:
La propriété CSS font-size définit la taille du texte d'un élément HTML
Exemple:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">Titre</h1>
<p style="font-size:200%;">paragraphe.</p>
</body>
</html>
Alignement du text
La propriété CSS text-align définit l'alignement horizontal du texte pour un élément
HTML :
Exemple:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">titre centré</h1>
<p style="text-align:center;">paragraphe aligné a gauche.</p>
</body>
</html>
6- Style-css
CSS(Cascading Style Sheets) signifie feuilles de style en cascade.
CSS économise beaucoup de travail. Il peut contrôler la mise en forme de
plusieurs pages Web à la fois.
Les feuilles de style en cascade (CSS) sont utilisées pour formater la mise en
forme d'une page Web.
CSS peut être ajouté aux documents HTML de 3 manières :
Inline - en utilisant l'attribut style dans les éléments HTML
Interne - en utilisant un élément <style> dans la section <head>
Externe - en utilisant un élément <link> pour créer un lien vers un fichier CSS
externe
CSS en Ligne( inline CSS)
Un CSS en ligne(inline) est utilisé pour appliquer un style unique à un seul
élément HTML.
Un CSS en ligne utilise l'attribut style d'un élément HTML.
L'exemple suivant définit la couleur du texte de l'élément <h1> sur bleu et la
couleur du texte de l'élément <p> sur rouge :
Exemple:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Un CSS interne est utilisé pour définir un style pour une seule page HTML.
CSS Interne(internal CSS)
Un CSS interne est utilisé pour définir un style pour une seule page HTML.
Un CSS interne est défini dans la section <head> d'une page HTML, dans un
élément <style>.
L'exemple suivant définit la couleur du texte de TOUS les éléments <h1> (sur
cette page) sur bleu et la couleur du texte de TOUS les éléments <p> sur
rouge. De plus, la page s'affichera avec une couleur de fond "powderblue":
Exemple:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Externe(External CSS)
Une feuille de style externe est utilisée pour définir le style de nombreuses pages HTML.
Pour utiliser une feuille de style externe, ajoutez un lien vers celle-ci dans la section <head> de
chaque page HTML :
Exemple:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=“[Link]">
</head>
<body>
<h1>titre </h1>
<p>Paragraphe.</p>
</body>
</html>
[Link] script
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
Couleur,Police, et taille CSS
La propriété CSS color définit la couleur du texte à utiliser.
La propriété CSS font-family définit la police à utiliser.
La propriété CSS font-size définit la taille du texte à utiliser.
Exemple:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>titre </h1>
<p>paragraphe.</p>
</body>
</html>
