04/02/2006

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)

03/02/2006

tuto cree son blog (part2) les codes HTML et autres

voici la seconde partie des tutos pour vous aider a créer un blog

ici nous allons parler des codes HTML ,javascript ou autres que l'on peut inserer dans le blog pour afficher diverses choses ou lancer des sons , et plein d'autres choses , tout depend de vos idees  et de vos envies

  • il est possible d'inserer un son qui ce charge a l'ouverture de la page de votre blog ,ce sera un son qui ce lance sur toute les pages et qui est toujours identique, il suffit pour cela de cree votre son en mp3 et d'inserer le code suivant dans un element personnalisé dans le contenu des colonnes sans afficher le titre de cet element (recopier le code a la main car j'ai mis des espace a la fin de chaque balise pour que ca puisse s'afficher) < object type="audio/mpeg" width="0" height="0" data="musique.mp3" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
    id="mediaplayer1" >
    <param name="filename" value="musique.mp3" / >
    <param name="autostart" value="true" / >
    <param name="loop" value="false" / >
    <embed type="application/x-mplayer2"
    pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Media..."
    filename="musique.mp3" autostart="True"
    showcontrols="false" showstatusbar="False" showdisplay="False"
    autorewind="False" height="0" width="0" / >
    </object >  
  • ATTENTION !! CERTAINE PERSONNE QUI ONT DEJA SUIVI CE TUTO ONT UTILIS2 DES MUSIQUE QUI DISPOSENT D4UN COPYRIGHT ,C'EST TOTALEMENT ILLEGAL ,VOUS DEVEZ UTILISER UNE MUSIQUE CR2E DE TOUTE PIECE OU UN SAMPLE (MORCEAU COPIER DE MOINS DE 3 SECONDE)
http://www.service-gratuit-fr.com/ , ou cree votre propre horloge en flash ( voir les stes proposant des aides pour cree ce type de script), personnelement j'ai choisi une horloge deja prefabriquée pour aller plus vite

02/02/2006

tuto cree son blog (part1) ou denicher des petit plus pour votre blog

Vous aimeriez ajouter des fonctionnalités sur votre blog mais vous ne savez pas comment faire ?Voici la premiere partie qui vous permettra d'apprendre ou denicher des script pour ajouter des petits plus a votre blog

  • premiers pas : les compteurs

il existe des dizaines de sites proposant des compteurs de visites gratuit , certains disposent de plus ou moins de fonctionnalités

personnelement j'ai choisi webD pour mon blog ( http://www.webdonline.com/fr/ ) ce site propose une multitude de service gratuit , tel les compteurs de visites , les chat , les forum ou les sondages .

tout est expliquer sur leur sites pour cree le compteur , et a la fin il vous dennerons un code

vous aller copier ce code puis aller dans la presentation du blog ( sur l'administration de votre blog) puis dans contenu des colonnes  il vous faudra cree un ellement personnalisé et mettre le code dans  la case  ou vous devez ecire du texte  , ensuite valider et hop un compteur apparait sur votre blog

  • premiers pas : la shoutbox

vous voulez cree une shout box rien de plus simple , il suffit de proceder de la meme maniere , que pour  les compteurs , je vous conseillerai juste  le site suivant pour cree une shoutbox ( attention en anglais )

http://cbox.ws/

cliquez sur signup pour cree un compte , puis ensuite il vous suffira de choisir vos options qui sont assez nombreuses

si vous avez des questions n'hesitez pas a les poser

prochainement:cree votre blog (part2) les codes HTML et autres

 
| A propos | Contact | Partenariat | Archives |
Copyright © 2006-2015 Tuto Station. Tous droits réservés
Tout le contenu, les titres de jeux, marques, marques commerciales, graphismes et imagerie connexe sont la propriété intellectuelle de leurs détenteurs respectifs.
Blog hébergé par weareplaystation - Template by Sephirothff