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 partexte
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
>, 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.
Modifier les attributs de l'image
Mettre une bordure à l'image :
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
Les info-bulles sur une image :
Lorsque l'on survole une image, il apparaît une information dans une info-bulle jaune.
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://".
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 cible2. 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)
22:30 |
Lien permanent |
Commentaires (17) |
|
|
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)
00:35 |
Lien permanent |
Commentaires (7) |
|
|
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 )
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
21:35 |
Lien permanent |
Commentaires (2) |
|
|