|
Membre de ClickFR, Reseau francophone Paie-Par-Click |
|||||
|
Premiers pas:Voici pour commencer les bases à connaître pour toute création de page Le code couleur de fond: il sert à donner une couleur de fond de page, c'est essentiel si on ne veut pas avoir une page toute blanche.Entre <BODY> (c'est-à-dire le "corps") et </BODY> il faut écrire <BODY BGCOLOR="#votrecodecouleur"> Cliquez ici pour avoir une liste de codes couleurs. En html, les couleurs sont définies par un système hexadécimal basé sur 3 couleurs de base: rouge, vert et bleu (RVB) ou red, green and blue(RGB). On peut soit écrire le code, soit écrire la couleur en anglais, mais pas en français, ça ne marche pas. Les couleurs du texte: Voici le code à mettre pour la couleur d'un texte ou mot: <FONT COLOR="#xxxxxx">votre texte</font> La taille du texte: Mettre la valeur de taille souhaitée: <font size=2> Bonjour</font> Les couleurs du corps: Comme nous venons de le voir, l'attribut BGCOLOR permet de définir la couleur de fond de la page (ou BACKGROUND s'il s'agit une image). L'attribut "text" définit la couleur du texte du document. L'attribut "link" donne la couleur des liens visités. L'attribut "vlink" correspond à la couleur des liens visités.L'attribut "alink" donne la couleur des liens actifs. Le code arrière-plan avec image: il sert à mettre une image précise en arrière-plan au lieu d'une couleur unie. Toujours entre <BODY> et </BODY> il faut écrire <BODY BACKGROUND="votreimage.gif"> (.gif ou .jpg) Le code fichier sonore: il sert à mettre de la musique sur votre site. Attention cependant de bien respecter les droits d'auteurs! Toujours entre <BODY> et </BODY> il faut écrire <bgsoundscr="votrefichier.wav"> (.wav ou .mp3) et le morceau jouera une fois. Pour le jouer plusieurs fois, il faut écrire <bgsoundscr="votrefichier.wav"loop="x"> x = nombre de fois. Pour jouer le morceau à l'infini, voici le code: <bgsoundscr="votrefichier.wav"loop="infinite"> Le principe d'alignement: il sert à aligner à gauche, droite ou centré une bannière, une image ou un texte. Voici ce qu'il faut écrire devant (surtout pour l'alignement centré ou droite, car le côté gauche est en général utilisé par défaut): <P align=right> ou <P align=center> ou <P align=left> Aller à la ligne:mettez cette balise juste avant d'aller à la ligne: <BR> ATTENTION: pour cette balise il n'y a pas de balise de fermeture! Ouverture et fermeture de ligne: Pour créé un nouveau paragraphe mettez cette balise là ou vous voulez le commencer : <P> Cette balise a une balise de fermeture</P> mais qui n'est pas obligatoire. Souligner, mettre en gras et en italique: Pour souligner du texte il suffit de le placer entre ces balises: <U>votre texte</U> Pour mettre du texte en gras il suffit de le placer entre ces balises: <B>votre texte</B> Pour mettre du texte en italique il suffit de le placer entre ces balises: <I>votre texte</I> Vous pouvez aussi mettre du texte en italique et en gras: <I><B>votre texte</B></I> Les
LIENS ( appelés aussi "hyperliens"): Un lien est constitué d'un mot, d'une suite de mots ou d'une image relié(s) à un autre. Il est repérable à l'intérieur d'un document html par une balise de ce type: <A HREF="document.html"> (document.html ou fichier.gif ou autre) Les liens sont repérables sur un navigateur à la petite main qui remplace alors le curseur de la souris à son passage. La même technique s'applique, qu'il s'agisse de liens à l'intérieur d'un même site ou vers un autre site. Un lien spécial, le contact mail: en voici sa forme: <A HREF="mailto:webmaster@valordi.com"> (exemple avec l'adresse mail de VALORDI) Par ce lien, les visiteurs arrivent sur leur boite d'envoi avec le destinataire directement inscrit. Vous pouvez même prévoir qu'un objet spécifique s'inscrive dans le champ objet du mail lors de son ouverture. Pour cela, transformer le mailto:webmaster@valordi.com en <A HREF="mailto:webmaster@valordi.com?subject=Bonjour"> Le lien d'ancrage (ou lien local): Il sert à faire des liens qui ramènent à un autre endroit précis de la même page.Les ancres : Un point d'ancrage: <A NAME="x">...texte/image...</A> X est le nom de l'ancrage, ce pointeur sera par la suite appelé pour arriver à cet endroit de la page. Lien vers le pointeur x: <A HREF="#x">...texte/image...</A> Nous faisons ici le lien vers le pointeur mis avant,il faut toujours un dièse(#)avant le nom du pointeur. Lien vers le pointeur x dans une autre page: <A HREF="page.html#x">...texte/image...</A> Nous faisons ici le lien vers le pointeur mis avant,il faut toujours un dièse(#)avant le nom du pointeur mais ici à la place de faire le lien dans la même page, dont il faut bien sûr écrire l'adresse de la page recherchée. Lien "retour en haut": <A HREF="#">...texte/image...</A> Il suffit simplement de ne pas donner de nom au pointeur, cela renvoie automatiquement en haut de la page. Les META-TAGS: Les
meta-tags sont des balises indispensables au référencement
par les robots des moteurs et annuaires de recherche. Ils se placent entre
<HEAD> et <HEAD> juste après <TITLE> et <TITLE>
(titre de votre page, 100 caractères maximum), c'est-à-dire
tout en haut de la page web. Voici la liste des meta-tags: Pour définir l'auteur du document : <META NAME="Author" CONTENT="Votre_nom"> Pour définir les droits d'auteur : <META NAME="Copyright" CONTENT="Votre_nom, Annee_de_creation"> Description de votre site :(maximum = 250 caractères) <META NAME="Description" CONTENT="Le_descriptif_de_votre_page_web"> Les noms des programmes utilisés pour créer la page HTML : <META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0 Win"> (exemple avec le site VALORDI) Les mots clés concernant votre site :(maximum=250 caractères) <META NAME="Keywords" CONTENT="mot1, mot2, mot3, ..."> Comportement du robot référenceur : Si vous souhaitez
interdire l'indexation, et interdire de suivre les liens de votre page
web : Si vous souhaitez
autoriser l'indexation et lui dire de suivre les liens de la page pour
continuer l'indexation : Declaration de la langue utilisée pour l'indexation des robots : <META HTTP-EQUIV="Content-Language"
CONTENT="fr"> Nombre de jours pour réindexer la page - visite par les robots-(ici tous les 10 jours, en anglais) : <META NAME="REVISIT-AFTER" CONTENT="10 days"> Les TABLEAUX: 1. Pourquoi des tableaux? -
Pour arranger des informations et gérer leurs places respectives L'utilisation de tableaux permet de diviser la page en sections différentes. Pour une question de chargement, il est parfois utile de faire plusieurs tableaux dans une même page, dans la mesure où le tableau s'affiche une fois le contenu chargé. 2. Les détails: Les tableaux sont définis par la balise <table>. Une balise ouvrante correspond à une balise de fermeture, ce qui donne : <table> et </table> Cet exemple est inutilisable, étant donné qu'il ne comporte aucune colonne et aucune ligne. Les lignes : pour en ajouter, mettez les balises <tr> et </tr> Exemple : Vous devez toujours créer les lignes avant les colonnes, mais vous ne pouvez toujours pas écrire le contenu du texte entre <tr> et </tr>, le texte s'afficherait au-dessus du tableau. Les colonnes : regardez l'exemple Exemple : Donne :
Dans
le cadre de la création de tableau, les balises <table>,
<tr> et <td> peuvent accueillir des propriétés
différentes comme coloriser, fixer des tailles etc... Les
propriétés suivantes peuvent être ajoutées
à la balise <table> : align = Insérez une image et ajoutez-lui un texte au passage de la souris:Voici le script nécessaire: <img scr="votreimage.gif" border="0" alt="votre texte" width="x" height="y"> Dans le scr, on spécifie le nom de l'image.L'attribut Border correspond à la taille de la bordure de l'image. En général on la laisse à 0 mais on peut y ajouter une valeur positive. L'élément alt permet de faire apparaitre du texte sur votre image quand la souris passe dessus, pratique pour les pubs ou donner des conseils au visiteur (voir exemple ci-dessus, posez votre souris sur l'image intitulée "dans l'espace", et attendez une seconde environ, vous verrez apparaître un petit texte). Les éléments width et height sont facultatifs (comme border et alt) mais il est préférable de les mettre. Ce sont eux qui définissent la taille de votre image. Width détermine la largeur et height la hauteur. Créez vos FORMULAIRES: Une page spéciale pour vous expliquer comment programmer très facilement un formulaire d'envoi ICI(formulaires)
|
|||||
  CD - © copyright 2003 - 2005 webmaster@valordi.com -----
ACCUEIL "Construisez votre site web" |
|||||
