introduction au HTML : les balises

Introduction

Le HTML est un langage universel utilisé par les navigateurs Internet (Internet Explorer, Netscape). Une page HTML est sauvegardée en tant que fichier dont l’extension est « .htm » ou « .html ».

Les navigateurs interprètent le code HTML contenu dans un fichier « .htm » ou « .html » pour afficher du texte, des liens et des images. A la différence d’un document créé avec un traitement de texte par exemple, le code HTML ne contient pas d’image, il fait simplement référence à des images stockées ailleurs (ou au même endroit que le fichier HTML) par le biais de liens hypertextes.

Le langage HTML utilise des balises qui sont placées entre < et >. La syntaxe du HTML veut qu’une balise ouverte « < > », soit refermée « </ /> ». Cette façon d’écrire permet de dire où la balise commence et où la balise termine. Par exemple, pour mettre un texte en gras dans une phrase, il faut décider du commencement et de la fin.

Exemple : texte . Dans cet exemple, est donc l’ouverture de la fonction b (gras, bold) qui va s’appliquer sur le mot « texte » avant de se refermer est donc l’ouverture de la fonction b (gras, bold) qui va s’appliquer sur le mot « texte » avant de se refermer .

Un paragraphe se déclare par

texte

texte . Les paragraphes sont séparés par une interligne automatique.

 

Un retour à la ligne peut se faire à l’aide de
(cette balise ne se ferme pas). Les retours de ligne n’ont pas d’interligne.

Le HTML ne s’écrit qu’en minuscule et il faut être vigilent avec les espaces et les accents qui peuvent parfois être mal interprétés par les navigateurs.Nous allons résumer ci-dessous les principales balises que vous pourrez utiliser dans vos descriptions en HTML.

Attention, il faut toujours faire commencer par et terminer par votre description pour que celle-ci s’affiche correctement.

Formatage du texte

Balise
Résultat
Explication
< b>texte< /b>
texte
Applique du gras
< i>texte< /i>
texte
italique
< u>texte< /u>
texte
soulignement
< font face= »Courrier New »>texte< /font>
texte
police = courrier new
< font size= »5″>texte< /font>
texte
taille de la police
< font color= »#0000ff »>texte< /font>
texte
applique la couleur bleu
< font color= »#0000ff »>texte< /font>
texte
applique la couleur bleu
< font color= »#ff0000″>texte< /font>
texte
gras et rouge
< font face= »courrier new » size= »5″>texte< /font>
texte
taille =5 et police = courrier new

Alignement

resultat
balise
explication

texte

< div align= »right »>texte< /div>
alignement à droite

texte

< div align= »left »>texte< /div>
alignement à gauche

texte

< div align= »center »>texte< /div>
alignement au centre

Retraits

Ils permettent de décaler le texte vers la droite ou vers la gauche d’un espace prédéfini

Exemple :

texte standard

               texte avec retrait

                       texte avec retrait

balise de retrait s’appliquant au « texte avec retrait »

Les images

Pour insérer une image au sein d’une description, il faut que celle-ci soit hébergée sur un serveur connecté à Internet de façon à ce que tous les Internautes puissent y avoir accès. En effet, le HTML que vous allez placer dans la description de votre objet va faire appel à des images qui ne peuvent pas être stockées sur Aucland.

Pour héberger vos images, vous pouvez utiliser l’espace de votre site web personnel. Si vous n’en n’avez pas encore, vous pouvez en obtenir un auprès :

  • de votre fournisseur d’accès à Internet, qui offre généralement plusieurs méga-octets à ses abonnés (renseignez-vous auprès de lui) ;
  • d’un site offrant l’hébergement gratuit (iFrance, Chez, Multimania, Respublica, etc.).

Insérer une image

<= » » /> insertion de « image.gif » à sa taille réelle

Modifier la taille de l’image

Dans la balise width= »81″ height= »51″>, il suffit de modifier le chiffre de width (largeur) et de height (hauteur). par défaut l’unité est le pixel mais en ajoutant le signe % après le chiffre, il comprend alors que la modification de taille doit se faire en pourcentage.

>, il suffit de modifier le chiffre de width (largeur) et de height (hauteur). par défaut l’unité est le pixel mais en ajoutant le signe % après le chiffre, il comprend alors que la modification de taille doit se faire en pourcentage.

Ajouter un espace autour de l’image

C’est à dire délimiter une marge autour de l’image dans laquelle on ne peut intervenir.

<= » » /> vspace= »23″ hspace= »50″> il suffit de modifier le chiffre de vspace (espace vertical) et de hspace (espace horizontal) par défaut l’unité est le pixel.

Modifier les attributs de l’image

  • Mettre une bordure à l’image :

<= » » /> border= »5″> applique une bordure à l’image. Sans mention de cette balise, il n’y a pas de bordure.

  • Les alignements de l’image :

Les balises d’alignements du texte ou des images sont les mêmes c’est à dire pour centrer une image le code HTML sera
centre l’image 

  • Les info-bulles sur une image :

Lorsque l’on survole une image, il apparaît une information dans une info-bulle jaune.

 <= » » /> alt= »mon info bulle »> par dessus l’image, une info-bulle « mon info bulle » apparaîtra

  • Les liens sur les images

Mettre un lien sur une image signifie que lorsque l’on survole l’image la souris se transforme en main ce qui indique la présence d’un lien.

 

 

 

Les liens relatifs et absolus

On entend par lien relatif ou absolu le chemin d’accès d’un fichier à atteindre.

  • Le lien relatif part de l’emplacement du fichier courant.
  • Le lien absolu part de la racine du disque dur ou du serveur.

Sur Aucland, les liens doivent obligatoirement être absolus et commencer par « http:// ».

E-mail

Créer un lien qui permet d’ouvrir une fenêtre de messagerie et d’adresser un e-mail, la présence d’un lien se distingue par une couleur et un soulignement du texte

Exemple :

texte signifie qu’un lien vers un message destiné à adresse_mail@wanadoo.fr sur le mot texte existe

Ancres

Une ancre est un nom donné à un élément sur la page HTML qui sert de repère par rapport à sa position. Elle permet d’accéder grâce à un lien, à un endroit bien précis contenu dans le fichier courant ou dans un autre fichier. Il faut tout d’abord déterminer l’ancre c’est-à-dire l’endroit de destination puis créer un lien.

Exemple, on considére qu’en cliquant sur le titre ANCRES, on retourne au début de cette page

1. il faut créer une ancre sur un élément en début de page à l’aide de la balise d’ancrage qui est :
texte sur le mot texte une ancre « nom_ancre » est crée qui sera donc la cible

2. sur le titre ANCRES, saisir la balise suivante :
ANCRESANCRES qui indique la présence d’un lien en direction de l’ancre appelée « nom_ancre » qui se trouve en haut de la page

(infos glanée sur plusieurs sites  internet)

0 Partages
Passionné de jeux vidéo et de bidouilles en tout genre je suis passé par différentes rédactions, Maxoe, Pspgen ou encore Fun&Zen et blogueur sur Tuto Station depuis 2006.

17 Commentaires

  1. Merci, je ne savais pas comment redimensioner ma bannière

    Répondre
  2. Salut, j’aimerais mettre une image en fond sur mes notes, la balise est normalement :
    < body background="url de l'image" >
    Hélas ça ne marche pas ici.
    Aurais tu par hasard eux l’idée d’essayer ou sais tu comment procéder.
    Merci et bonne continuation.

    Répondre
  3. as tu essayer la balise suivante ?

    Répondre
  4. On vois pas ta balise il faut que tu mette un espace aprés < et un avant >.

    Répondre
  5. oups desoler , la balise < font color="url image" > je sais pas si ca marche , par contre je sais pas si sur les blog c’est possible

    Répondre
  6. SA MARCHE PAS ET EN PLUS TON BLOG C DLA MERDE!

    Répondre
  7. pas de probleme personne t’oblige a venirsur mon blog , suffit d’avoir un cerveau pour que a marche MDR

    Répondre
  8. Marrant ceux qui insultent laissent rarement leurs coordonnées perso! Qui as dit Lache? 😀

    Répondre
  9. oui exacte , pas assez de  » couille  » ( si je puis me permettre) pour affronter les gens

    Répondre
  10. Moi je crois que pour l’image de fond bah j’en suis plutôt sur c’est:
    body
    {
    background-image:url(« adresse de l’image »);
    faut le mettre dans une colonne
    par contre je ne suis pas sur de comment ca s’ecrit style tipe faut essayer avec des i ou des y

    Répondre
  11. euh la c’estdu html , la tu me fait du css ou du php , rien a voir , de toute maniere sur blogstation on ne peut pas faire de body background

    Répondre
  12. Salut, pourait tu me dire comment (si c’est possible) mettre du contenu a télécharger. Merci d’avance.

    Répondre
  13. désolé pour ma faute de frappe, ce que je voulais demander c’est si il est possible de mettre du contenu a télécharger sur mon blog. Merci d’avance

    Répondre
  14. bah ouai mais ca c’est a toi de te debrouiller , soit tu transfer des fichier de max 5Mo surle blog soit tu met ca sur un FTP

    Répondre
  15. ok merci de ta réponse mais au faite c’est quoi du FTP puique je suis pas doué sur le net.
    Merci comme même.

    Répondre
  16. Raphy,
    FTP == File Transfer Protocol.
    Te bile pas si tu connais po, c’est normal. Pour faire court, tu installe Filezilla et ça roule.
    Filezilla, c’est un produit gratisware qui connait FTP et qui va te permettre de transférere des fichiers de grandes tailles.
    Si tu veux plein de bons tutos tu va sur « Comment ça marche ! »
    (cherche sur google.fr, faut un peu que tu bosses, ça va pas tomber tout cuit 😉 )
    phil

    Répondre
  17. lol ouai mais faut preciser un petit truc avant , faut posseder un serveur FTP qui peut utiliser un protocole HTTP tel les 100Mo orange ou encore les 10Go chez free , enfin bref sans ca c’est pas la peine

    Répondre

Laisser un commentaire

Votre adresse email ne sera pas publiéeLes champs marqué d'un * sont obligatoires

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Mot de passe perdu

Twitter
Visit Us
Follow Me
YouTube
YouTube
RSS