introduction au HTML : les balises

sephirothff - Cedric T 04/02/2006 17 Commentaires 1478 vues tuto pour cree son blog

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

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)

sephirothff - Cedric T

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

zik_gameuse 15/02/2006, 15:24

Merci, je ne savais pas comment redimensioner ma bannière
DeathAngel 23/02/2006, 02:17

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.
sephirothff 23/02/2006, 03:33

as tu essayer la balise suivante ?
DeathAngel 23/02/2006, 03:37

On vois pas ta balise il faut que tu mette un espace aprés < et un avant >.
sephirothff 23/02/2006, 17:03

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
EUh? 19/03/2006, 11:13

SA MARCHE PAS ET EN PLUS TON BLOG C DLA MERDE!
sephirothff 19/03/2006, 16:07

pas de probleme personne t’oblige a venirsur mon blog , suffit d’avoir un cerveau pour que a marche MDR
Kingplayer 20/03/2006, 12:56

Marrant ceux qui insultent laissent rarement leurs coordonnées perso! Qui as dit Lache? 😀
sephirothff 20/03/2006, 16:54

oui exacte , pas assez de » couille » ( si je puis me permettre) pour affronter les gens
naruto24 19/06/2006, 20:48

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
sephirothff 20/06/2006, 01:16

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
Raphaël 07/08/2006, 22:04

Salut, pourait tu me dire comment (si c’est possible) mettre du contenu a télécharger. Merci d’avance.
Raphaël 07/08/2006, 22:08

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
sephirothff 07/08/2006, 22:54

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
Raphaël 08/08/2006, 10:37

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.
HotelDelta 22/08/2006, 21:05

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
sephirothff 23/08/2006, 01:02

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