Le langage HTML

1
Le langage HTML
2
Introduction

• HTML HyperText Markup Language
• Cest un langage de description dune page
  structurée contenant du texte, des images, des
  sons, etc.
• HTML ne gère pas complètement le rendu final
  (écran, synthétiseur vocal, impression).

3
HTML

• Premier exemple
• On ouvre Pspad (Démarrer/Programmes)
• On écrit le texte suivant ....

4

• ltHTMLgt
• ltHEADgt
• ltTITLEgt un document HTML simplelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Bonjour
• lt/BODYgt
• lt/HTMLgt

• On enregistre le fichier (Fichiers/Enregistrer
  sous) sous le nom  essai.htm 
• On double-clique sur le fichier essai.htm depuis
  lExplorateur windows.
• Internet Explorer ouvre la page web essai.htm

5

• Le texte initial en langage HTML sappelle le
  code source.
• On y a accès dans Internet Explorer en allant
  dans Affichage/Source (Wordpad souvre).
• Faites lessai en allant sur www.coplanacu.com.ar/
  inicial.htm
• Enregistrez la page dans votre dossier
• Fermez I.E et ouvrez inicial.htm depuis votre
  dossier
• Modifiez un extrait du texte
• Enregistrez
• Retournez à I.E (alttab) et actualisez la page
  (F5)

6
Les bases du langage HTML

• Les différentes sections du document sont
  entourées de balises
• ltHTMLgt et lt/HTMLgt pour le document complet.
• ltHEADgt et lt/HEADgt pour len-tête (type de
  document, mots clés, titre de la fenêtre, ...)
• ltBODYgt et lt/BODYgt pour le corps du document
  (texte, tableaux, images, sons, petits programmes)

7
Les bases du langage HTML

• A lintérieur de chaque section on peut placer de
  nouvelles balises ouvrantes et fermantes
• ltIMGgt pour insérer une image.
• ltAgt et lt/Agt pour un lien hypertexte.
• ltH1gt et lt/H1gt pour un titre de niveau 1
• ltH2gt et lt/H2gt pour un titre de niveau 2

8
Les attributs

• Ils donnent des précisions (apparence,
  comportement) sur le contenu situé entre les
  balises ouvrantes (lt...gt) et fermantes (lt/...gt).
• Exemple (à tester)
• ltA href"http//www.coplanacu.com.ar"gt allez sur
  ce site lt/Agt

9
Les attributs
Une couleur de fond de Page et une couleur de
caractères ltBODY  bgcolor yellow  text
bluegt
 
10
Les noms de couleurs de base html sont
11

• On peut coder jusqu'à 16 Millions de couleurs
• Elles ne seront reconnues que si le moniteur
  (écran) est correctement configué (sinon,
  remplacement par une couleur proche)
• code de couleur A9FF00
• A9 quantité de rouge (chiffres
  0,1,..,9,A,B,C,D,E,F)
• FF vert
• 00 bleu
• Testez FF0000, 00FF00, 0000FF
• On utilise les nuanciers inclus dans les éditeurs
  de site web (Dreamweaver).

12
Trouvez les Erreurs ! ltHtmlgt ltheadgt ltTITLEgt
Exercice de Début lt/HEADgt lt\TITLEgt ltBODY
text400000 bgcolorgreengt Bonjour Tout  le 
Monde ... lt!- Est-ce que les sauts de ligne sont
respectés ?? -gt lt\BODYgt lt/HTMLgt
13
Trouvez les Erreurs ! ltHtmlgt ltheadgt ltTITLEgt
Exercice de Début lt/TITLEgt lt/HEADgt ltBODY
text400000 bgcolorgreengt Bonjour a Tout 
le  Monde ... lt!- Est-ce que les sauts de ligne
sont respectés ?? -gt lt/BODYgt lt/HTMLgt
14
Voici quelques Tags permettant de définir des
attributs pour les textes de vos Pages
ltigtTexte en Italiquelt/igt ltbgtTexte en
Graslt/bgt       Bold en anglais.. ltugtTexte
soulignélt/ugt      Underline en anglais..
ltsubgtTexte indicélt/subgt ltsupgtTexte en
exposantlt/supgt ltsmallgtTexte en petite
Policelt/smallgt ltbiggtTexte en grande Policelt/biggt
ltstrikegtTexte Rayélt/strikegt
15
 ltfont size2gtJe suis un Texte dont la police
est de taille 2lt/fontgt   Les valeur de
size(taille) vont de 1 à 7 .. 3 est la valeur
par défaut
16
  Vous pouvez combiner lattribut size à
lattribut color . Par exemple  ltfont size7
colorgreengt Je suis un Gras Vert!!lt/fontgt