HyperText Markup Language HTML

abdelouafi · Sep 27, 2016

Chapitre 1:
HyperText Markup Language
HTML

Présentation:
HTML: HyperText Markup Language

Le code HTML est déchiffré par le navigateur du client. Tous les navigateurs existant reconnaissent parfaitement la syntaxe HTML.
Les pages web faites uniquement avec HTML sont suffixées par l’extension .htm ou encore .html.
L’édition d’une page web en code HTML est tellement fastidieux. Il existe des logiciels d’édition des pages Web (éditeurs web) qui permettent de générer le code HTML tout en offrant au développeur une interface conviviale en mode création (outils de traitement de texte et de mise en page, outils de dessin…).

Quelques éditeurs professionnels (dits éditeurs WYSIWYG): DreamWeaver, FrontPage, Golive, WebExpert, Nview…

Syntaxe HTML I

Une balise HTML prend la forme suivante:

Code:

<balise> objet décrit par la balise </balise>

Exemple:

Code:

<b> ENSA </b> de Marrakech

Sur le navigateur on peut visualiser: ENSA de Marrakech

Le texte ENSA est placé entre les balises <b></b> (écriture en gras)

Syntaxe HTML II
En générale les balises HTML s’écrivent sous la forme:

Code:

<balise  attribut1=‘’valeur1’’  attribut2=‘’valeur2’’  … >

Objet décrit par la balise

</balise>

Exemple:

Code:

<font face=‘’verdana’’ color=‘’blue’’ size=‘’3’’>

  Bonjour

  </font>

Sur le navigateur on visualise: Bonjour

Font: balise de mise en forme du texte

Face: attribut qui signifie police

Color: attribut qui définit la couleur du texte

Size: attribut qui définie la taille des caractères

Il est possible de regrouper plusieurs balises à la fois:

<balise1> <balise2> <balise3>

objet décrit par les balises 1, 2 et 3

</balise3> </balise2> </balise1>

Règle générale:

La dernière balise ouverte est la première qui doit être fermée.

Cette règle n’est pas obligatoire mais vivement recommandée surtout si l’on court après une validation du W3C!

Exemple:

Code:

<font face=‘’verdana’’ color=‘’blue’’ size=‘’3’’> <b> <i> <u>

  Bonjour

  </u> </i> </b> </font>

Sur le navigateur on visualise: Bonjour

<b></b>: gras <i></i>: italique <u></u>: souligné

Les commentaires:

En HTML les commentaires sont délimités par  tout ce qui se trouve à l’intérieure des délimiteurs est ignoré par le navigateur.

Exemple:



Les balises de base:

<html></html> : début et fin du document HTML

<head></head>: Entêtes du document

<body></body>: corps du document (c’est la partie visualisée sur

le navigateur)

Ces trois balises sont obligatoires au sein d’un document HTML.

Exemple de document HTML

Code:

<html>  <!-- Début du document nommé test.htm -->

<head>

  </title>Ceci est un test</title> <!-- Titre du document -->

</head>


<body>  <!-- La partie du document affichée sur le Navigateur -->

  <font face=‘’verdana’’ size=‘’2’’ color=‘’#0000FF’’>

  <b>Bonjour</b>, c’est juste une page de test!

  </font>

</body>


</html>

Quelques balises:

<p></p> : nouveau paragraphe

<br> : saut de ligne (sans </br>)

<a></a> : lien hypertexte (ou hyperlien)

<b></b>, <i></i>, <u></u>, <s></s> : gras, italique, souligné, barré

<font></font>: balise de mise en forme du texte (police, couleur et taille)

<div></div>: balise de mise en forme (alignement centré, justifié…)

<img> : insertion d’image (sans </img>)

<span></span> : décoration du texte (surlignage…)

<table></table>: définition d’un tableau HTML

<tr></tr> : définition d’une ligne du tableau

<td></td> : définition d’une colonne du tableau

<title></title> : Titre du document (affiché sur la barre de titre de la fenêtre)

<bgsound> : fond sonore de la page (sans </bgsound>)

<meta>: balise d’échange d’informations avec le navigateur (sans </meta>)

<script>: balise d’insertion de script (JavaScript, VbScript…)

<marquee></marquee>: texte défilant (souvent utilisé sur les pages web)

<form></form>: création d’un formulaire

Balise <body> (corps de la page)

-Bgcolor: Couleur de l’arrière plan de la page
-Background: Image d’arrière plan de la page
-Topmargin, Bottommargin, Leftmargin, Rightmargin: Marges de la page respectivement supérieure, inférieure, gauche et droite.
-Text: Couleur par défaut du texte de la page
-Link: Couleur par défaut des liens hypertextes sur la page
-Alink: Couleur par défaut des liens hypertextes actifs (qui ont le focus)
-Vlink: Couleur par défaut des liens hypertextes visités
Si la couleur des liens et textes n’est pas définie, ceux-ci prennent les couleurs par défaut déclarées dans la balise body.

Exemple:

Code:

<body topmargin=0 leftmargin=0 bgcolor=‘’#0000ff’’ text=‘’blue’’>

…

</body>

-

HyperText Markup Language HTML

abdelouafi

Administrator

Attachments

مواضيع مشابهة: 1