HTML

De Wiki SIO EDM
Aller à : navigation, rechercher

Langage HTML

Le langage HTML (= Hypertext Markup Language) est un langage de balisage permettant la mise en forme d' un site WEB. Ce langage permet la structure d' une page mais pas la "décoration" de celle-ci (voir le langage CSS pour la "décoration").

Structure d' un document HTML

Un document HTML est composé de balises pour encadrer l' information balisée. Les différentes balises à connaître sont les suivantes :

Les balises
---------------Signification--------------- -----Synthaxe-----
p Crée un paragraphe. <p>Texte</p>
title Crée un titre à la page <title>Titre</title>
a Crée un Hyperlien. <a href="AdresseDuLien">NomLien</a>
head En-tete de la page. <head>.........</head>
br Saut de ligne. Information(s)<br /> Information(s)
body Corps de la page. <body>Texte,infos,photos,...</body>

Nous avons donc vu quelques balises permettant l' intégration de zones de texte dans une page WEB. Voici un extrait de code permettant de montrer rapidement ce que cela peut donner :
Ex1.PNG

Remarque : les balises <!-- ... --> sont pour les commentaires /!\.

Insertion d' images

Avant de voir la syntaxe pour insérer une image il faut voir un point important : les formats d' images. Plusieurs particularités vont varier en fonction du format choisi (poids, qualité,transparence,...). Il faut donc choisir le format qui convient le mieux à votre interface.
Voici donc les différents formats et leurs caractéristiques :

PNG

Le format PNG (Portable Network Graphics) est le plus récent de tous. Il a deux gros avantages :
  • il peut être rendu transparent
  • il n'altère pas la qualité de l'image

Le PNG a bien évolué depuis sa création et est devenu le format le plus puissant pour enregistrer la plupart des images.

Il existe en deux versions, qui dépendent du nombre de couleurs que doit comporter l'image :

  • PNG 8 bits : 256 couleurs
  • PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG)

Voici donc une photo en PNG transparente :
PNG.PNG

JPEG

Le format JPEG (Joint Photographic Experts Group) est très présent sur internet. Il sert en particulier à réduire le poids des images et peut comporter 16 millions de couleurs diverses.
L'extention de ces images est soit .jpg soit .jpeg.
Il faut savoir que ce format réduit la qualité des photographies mais sans que l'on ne s' en rende compte réellement.
Cependant, si l'on enregistre une image sous ce format celle ci risque d' être un peu baveuse. Il faut donc mieux enregistrer les images en format PNG.
Le point positif du JPEG est que les photos sont chargées plus vite que si elles étaient sous PNG. Il faut donc privilégier ce format pour les photos.
Voici un petit exemple d' une photo en jpeg :
JPEG.jpg

GIF

On parlera assez rapidement du format GIF qui n' a pas une très bonne qualité d' image. Cependant il possède une avantage très apprécié :
Il peut être animé !.
Le GIF est limité à 256 couleurs et est donc de moins bonne qualité. De plus, le PNG a une transparence de meilleure qualité.

Voici donc une image en format GIF : GIF.gif

La syntaxe d'insertion d' images en html

Pour insérer une image en html, il faut utiliser la balise <img /> que l' on utilise comme ceci :
<img src="lien" alt="Texte" />

PARAMETRES DE LA BALISE
srcchemin de l'imagesrc"CheminDeL'Image"
altTexte affiché quand l'image ne s'affiche pas sur la navigateuralt="TexteAffiché"


ATTENTION Il faut toujours que la balise <img /> soit encadrée par une balise <p> :
Exemple : <img src="Images/Montagne.jpg" alt"Ceci est une montagne" />

Pour aller plus loin...

Maintenant que vous savez coder en HTML, il vous suffit de pouvoir décorer tout cela. Pour ce faire, rendez vous sur la page qui vous montrera le fonctionnement du CSS pour les pages WEB !