html, référencement, débutant

Début de la leçon HTML basique et référencement:

1.le "head"	2.structure & paramètres	3.le "body"
4.paramètres critiques	5.lien hypertexte	6.le menu déroulant
7.le formulaire "formmail"	8.boutons	9.adresses utiles

En tant qu'autodidacte total en matière d'informatique, je tiens à dire au lecteur (que je me permets de tutoyer) que me débuts dans la création de pages web furent une galère sans nom. Alors, si je peux faire profiter au débutant mes modestes connaissances basiques, ce sera avec un grand plaisir. Le langage HTML est une vraie source de plaisir pour qui sait le parler, ou plutôt l'écrire. Savais-tu qu'une simple apostrophe en trop dans un script peut tout faire capoter? Moi non, à mes débuts en tous cas.

:o([--------------------------------------->[www.tilt-html.pigé]--------------------------------------->;o)[

Attention: lorsque tu fais un copier coller d'un script ou d'un texte sur le net ou sur un autre programme, ne jamais oublier de passer par le bloc-notes avant d'insérer le contenu dans la partie "code" de ton éditeur HTML.

Voici comment se compose la face "cachée", en langage HTML, d'une page web:
<HTML> (ouvre le dialogue en précisant le langage)
<HEAD> (directives générales et consignes d'indexation = le fond, invisible sauf dans le menu "afficher">code source>du navigateur)
</HEAD> (le / indique la fermeture d'une balise ou d'une "consigne")
<BODY> (ce que l'on voit sur la page, la forme, le texte, les images etc.)
</BODY>
</HTML>

La partie "HEAD" n'est pas visible par l'internaute, elle est là pour fournir des indications aux moteurs de recherche et mettre les "bases de tes pages". Elle se compose des balises "META".

<TITLE>{attention, c'est là que se joue une partie du référencement: PENSER à L'ORDRE ALPHABÉTIQUE et utiliser un titre en rapport direct avec le sujet (éviter par ex: "reptilica" ou "dream-serpent" pour parler de reptiles, "reptiles-blabla sera plus approprié car touchera un public plus large). Le titre ne devra pas comporter plus de 6 mots}</TITLE>
<META HTTP-EQUIV="Content-Language" content="fr">
<META NAME="{DESCRIPTION" CONTENT="METS LES MOTS OU DES PHRASES PERTINENTES, SÉPARÉS PAR UNE VIRGULE ET ESPACE...: il S'AGIT DE TE METTRE À LA PLACE DE L'INTERNAUTE, ET DE SAVOIR CE QU'IL PEUT TAPER POUR ARRIVER CHEZ TOI (J'AI PERSO CHOISI L'OPTION (BATRACIENS, REPTILES, LES NOMS LATINS ET FRANÇAIS), une vingtaine de mots ou quelques phrases courtes, maxi 200 caractères}">
<META NAME="KEYWORDS" CONTENT="{LES MOTS CLÉS DE TON SITE, SÉPARÉS PAR VIRGULE ET ESPACE, maxi 1000 caractères}">
<META NAME="REVISIT-AFTER" CONTENT="15 days"> {fréquence à laquelle tu demandes aux robots (spiders) de scanner ton site}
<META NAME="ROBOTS" CONTENT="index, follow, all"> {le robot indexe, suit et indexe tout le contenu du site}
<META NAME="AUTHOR" CONTENT="ton nom">
<META NAME="Identifier-URL" CONTENT="http://www.tonsite.chose/">
<META NAME="Publisher" CONTENT="ton nom">
<META NAME="Copyright" CONTENT="© ton nom">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no"> {empêche le petit logo d'Explorer 6.0 avec l'imprimante etc. de s'afficher}
<LINK REL="SHORTCUT ICON" href="http://www.tonsite.chose/favicon.ico"> {permet au navigateur de mettre ton favicon dans la barre d'adresse et dans les favoris}
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
window.defaultStatus='ton texte dans la barre d'état du navigateur';</SCRIPT> {ce script insère un texte fixe dans la barre d'état = statusbar}

Attention: si tu recopies le code ci-dessus, n'oublies pas de remplacer tout ce qui est entre {} et de supprimer les {}!

Quelques mots sur les robots d'indexation des moteurs de recherche: ils tiennent compte du titre, de la description, des 500 premiers caractères du texte visible (body text) de la page d'accueil (ou d'autres), de l'occurrence des mots trouvés dans la description, le titre et le body text (pas plus de 5-6 répétitions) et enfin du nom du fichier (l'adresse web de la page).

C'est aussi dans cette partie (HEAD) que seront placés certains paramètres de script (texte défilant ou fixe dans la barre d'outil du navigateur par ex.), les redirections, les favicons (icônes en 16/16 pixels avec l'extension de fichier .ico qui personnalisent l'URL dans les favoris et la barre d'adresse) etc.

La structure générale et paramètres du texte:

<FONT FACE="VERDANA" SIZE="2" COLOR="#000000">texte</FONT>

FONT FACE = la police, SIZE = la taille (fais des essais entre 2 et 5) COLOR = la couleur en hexa. Il est inutile de préciser la couleur ou la taille sauf si tu veux la changer localement car elle est déterminée dans la partie "BODY".
<BR> est ce qui sert à mettre à la ligne, c'est plus court que <P> </P> généré par les éditeurs HTML!!! Si tu as 3 pages de texte, cela prend de la place à force de mettre des codes inutiles!
  = espace
<I> = penché ou italique
<B> = gras
<U> = souligné
pars du principe simple que tout ce qui s'ouvre, se fermera et ce, dans l'ordre INVERSE d'apparition. Exemple: a, b, c, d, => /d, /c, /b, /a
soit tu centres et tu écris simplement <CENTER> comme paramètre sans oublier le </CENTER>

soit tu mets à gauche ou "justify": <p align="justify" ou "left"></p>

Exemple concret: un texte en gras et penché aligné au "centre" au milieu d'une page alignée "justify":

<center><font face="verdana" size="2"><I><B>mon texte qui me gonfle</B></I></font></center>
donne:
mon texte qui me gonfle
<p align="left"><font face="verdana" size="2"><I>mon texte qui me gonfle</I></font></p>
donne:

mon texte qui me gonfle

Faire un copier coller depuis le web ou depuis cette page:

Si tu le fais pour un script, du texte ou une partie de code source, il est impératif de passer par le bloc notes avant de le coller dans la partie source (ou code) de ton programme; il existe de nombreux éditeurs HTML gratuits sur internet. Plusieurs sont payants ou en version demo: Dreamwaver, Adobe Golive, Namo, Frontpage (qui a fait énormément de progrès sur la version 2003).

La partie "BODY" va déterminer les paramètres visibles de tes pages:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#000000" ALINK="#FF0000" VLINK="#CCCCCC" oncontextmenu="return false"> est le contenu des paramètres de cette page.

BGCOLOR="#FFFFFF" = la couleur de fond à mettre en hexadécimal (palette sur PSD). TEXT="#000000" = couleur du texte.
LINK="#006666" = couleur d'un lien
ALINK="#FF0000" = couleur à l'activation du lien
VLINK="#CCCCCC" = couleur du lien visité
oncontextmenu="return false" = paramètre qui empêche le clic droit, efficace mais pas standard HTML 4.0
Le tout doit être dans l'entête de "BODY"
Voilà la manière dont commence une page pour ressembler à qqch. Tu peux changer BGCOLOR par BACKGROUND="une_image.jpg"
Attention, j'ai, depuis, lié cette page avec une feuille de style CSS, alors les valeurs du BODY sont erronées.

Paramètres critiques et sources de non visibilité sur le net:

toute valeur appliquée à une déterminante doit être entre "".
tout fichier html doit être en lien avec le contenu et si possible ne pas comporter d'espace vide qui se traduit par %20 dans une URL (si tu parles de fromage ce sera par exemple mon_fromage.htm mais jamais mon fromage.htm, le _ faisant la différence. Pour les noms de fichiers .jpg, .gif, .wav etc. il est impératif de respecter le nom dans ton dossier et sur ton répertoire distant (le serveur). Si tu as monimage.jpg et que tu la renommes monimage.JPG tu ne verras pas ton fichier. Idem pour les fichiers HTML qui ne doivent JAMAIS contenir d'accents, ni apostrophes, ni cédilles: l'éléphant.htm sera invisible car non reconnu. Par contre elephant.htm est ok.

Un tableau:

dans un tableau, tu mets la valeur de largeur (width="xx%") de chaque colonne (TD). Lorsque tu as défini une fois la largeur de chaque colonne dans une rangée (TR), il est *impossible* ensuite de définir des valeurs différentes dans les autres colonnes des autres rangées: il faut alors refaire un tablea. Ainsi il suffit de noter:

<TABLE BORDER="1" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="33%" ALIGN="center">Blurp!!</TD>
<TD WIDTH="34%" ALIGN="left">Gloups!!</TD>
<TD WIDTH="33%" ALIGN="right">AArrgl!!</TD>
</TR>
<TR>
<TD COLSPAN="3">fusionne ainsi les 3 colonnes en un seule</TD>
</TR>
</TABLE>

ce qui donne:

Blurp!!	Gloups!!	AArrgl!!
fusionne ainsi les 3 colonnes en un seule

Border = la largeur du cadre du tableau, width = LA LARGEUR TOTALE DU TABLEAU, CELLSPACING = espacement entre les cellules, cellpadding = l'espace de remplissage entre les données et le quadrillage (dans une cellule).
Si tu mets juste <TABLE BORDER="o" WIDTH="100%">, tu auras un tableau simple, sans cadre, ce que j'utilise le plus souvent. ALIGN te mettra à gauche, droite ou centré.
Colspan permet de fusionner des colonnes. Si tu veux des colonnes d'une autre largeur, il est *obligatoire* de refaire un nouveau tableau, à la suite.

<TABLE WIDTH="100%" BORDER="4"> (là j'ai élargi la bordure et mis les cellules 1/2 page)
<TR>
<TD WIDTH="50%">blabla</TD>
<TD WIDTH="50%">tu suis???</TD>
</TR>
</TABLE>

donnera:

blabla

tu suis???

Je te propose de faire quelques essais en modifiant les paramètres du tableau dans un éditeur html.

Les liens hypertexte:

s'écrivent comme suit:
<A HREF="http://www.batraciens-reptiles.com" TARGET="_blank">batraciens et reptiles du monde</A>

"A HREF" signifie la destination sur laquelle tu vas te rendre où tu souhaites.
TARGET="_blank" signifie que le lien va s'ouvrir dans une nouvelle fenêtre. Il faudra alors la fermer pour retourner à la page précédente. Si tu ne mets rien, il faudra naviguer normalement avec la flèche du navigateur. J'utilise cette forme target="_blank" surtout pour l'agrandissement des images, les formulaires et les liens externes etc.
qui donne:
batraciens et reptiles du monde

Les liens avec image: idem mais avec image en plus:

<A HREF="index.html"><IMG SRC="accueil1.jpg" ALT="accueil" border="0" width="71" height="125"></A>
ALT = l'info bulle (reconnu par EXPLORER alors que c'est "TITLE" qu'il faut mettre, reconnu lui par les autres navigateurs). Width et Height, attributs indispensables pour préciser la taille d'origine de l'image, sinon, surprises!! Border = tu commences à connaître: la taille que tu souhaites pour un cadre à ton image
qui donne:

Les formulaires:

menu déroulant:

<script language="JavaScript">
function fonction1(form) {
var var3=form.menuchoix.selectedIndex
if (form.menuchoix.options[var3].value != "0") {
location=form.menuchoix.options[var3].value;}
}
</script>
<form ACTION="form1">
<select NAME="menuchoix" onChange="fonction1(this.form)" SIZE="1">
<option SELECTED VALUE="0">sommaire:</option>
<option VALUE="mapage1.htm">--texte1</option>
<option VALUE="mapage2.htm">--texte2</option>
<option VALUE="mapage3.htm">--texte3</option>
<option VALUE="mapage4.htm">--texte4</option>
<option VALUE="mapage5.htm">--texte5</option>
<option VALUE="mapage6.htm">--texte6</option>
<option VALUE="mailto:monadresse@monserveur.com?subject=y a quelqu'un?">--e-mail/contact</option>
</select>
</form>

Pour insérer dans le formulaire une adresse mail:
<option VALUE="mailto:monadresse@monserveur.com?subject=y a quelqu'un?">--e-mail/contact</option>
Je conseille de mettre un adresse mail peu utilisée ou de la traduire en hexadécimal ce qui permet de limiter les dégâts du spam. ?subject est facultatif: il permet de prédéfinir l'objet du message. Cette fonction ouvre automatiquement ta messagerie par défaut.

Tu peux mettre autant de ligne "option value" que tu veux!
ce qui donne:
formulaire "formmail":

Tu le trouveras tout fait chez ton provider si il est digne de ce nom.
Il ressemble à cela:

<form action="/cgi-bin/formmail.pl" method="post">
<input type="hidden" name="recipient" value="tonadresse@tonsite.com">
<input type="hidden" name="redirect" value="http://www.tonsite.com/pagedaccusedereception.htm">
<input type="hidden" name="required" value="Email,Message,Nom">
<input type="hidden" name="subject" value="le sujet du formulaire">
<input type="hidden" name="missing_fields_redirect" value="http://www.tonsite.com/pagederreur.htm">

<font face="verdana" size="3">
Concerne :<BR><BR></font>
<font face="verdana" size="2">
<input type="checkbox" name="Concerne" value="chose">chose      
<input type="checkbox" name="Concerne" value="machin">machin      
<input type="checkbox" name="Concerne" value="truc">truc      
<input type="checkbox" name="Concerne" value="bidule">bidule      
<input type="checkbox" name="Concerne" value="autre">autre      </font>
<BR><BR>
<font face="verdana" size="3">
Votre nom : <BR>
<INPUT TYPE="text" name="Nom" SIZE="30"><BR><BR>
Votre e-mail : <BR>
<INPUT TYPE="text" name="Email" SIZE="30"><BR><BR>
Votre message : <BR>
<TEXTAREA NAME="Message" ROWS="6" COLS="30"></TEXTAREA><BR><BR></font>
<font face="verdana" size="2">
Souhaitez-vous recevoir des nouvelles du site (4-5x/an)?<BR><BR>
<INPUT TYPE="checkbox" NAME="News" Value="oui">oui      <INPUT TYPE="checkbox" NAME="News" Value="non">non
</font>
<BR>
<BR>
<INPUT TYPE="Submit" VALUE="Envoyer">    <INPUT TYPE="reset" VALUE="Effacer"><BR><BR>
</form>

Ce qui donne: (j'ai ici désactivé ce formulaire)
Explications:

"recipient" = la destination du formulaire = adresse mail

"redirect" = l'adresse de direction du formulaire rempli, page de remerciement

"required" = les champs obligatoires

"missing_fields_redirect" = la page d'erreur si les champs obligatoires ne sont pas remplis

<input type="checkbox" name="Concerne" value="bidule">
input type est le moyen que tu utilise: checkbox = carré à cocher, radio = bouton rond à cocher, textarea = zone de texte.
name = le titre de l'objet qui sera écrit dans le mail que tu recevras, value = le choix qui sera écrit.

Il s'agit là de la commande du formulaire: submit = envoyer, envoyer = texte du bouton
<INPUT TYPE="Submit" VALUE="Envoyer">

Il s'agit là également de la commande: reset = effacer le contenu du formulaire.
<INPUT TYPE="reset" VALUE="Effacer">

Les boutons standards de Windows ne te plaisent pas? Qu'à cela ne tienne! Tu en crées un au format .jpg (en général 100/20 pixels) et tu remplaces le code ci-dessus par: (attention, ne fonctionne que si il n'y a qu'un seul bouton)
<input type="image" src="tonimage.extention">

Les commandes ci-dessous permettent 1/de fermer la fenêtre en cours, 2/de revenir à la page précédente (changer le texte de "value" à convenance), et peuvent s'utiliser seules, indépendamment d'un formulaire:
1/ <input type="button" value="Retour à la page" onclick="self.close()">
2/ <input type="button" value="Retour au formulaire" onclick="history.go(-1);">
Le même bouton mais avec une image perso:
<input type="image" src="tonimage.extention" onclick="history.go(-1);"> etc.

Adresses web utiles:

téléchargement de tout logiciel

vérification du code

métamoteur

scripts et formulaires en tout genre

Webrankinfo, tout sur le référencement, le positionnement, comment y arriver!

Nvu, l'éditeur HTML de Mozilla: gratuit, simple, mais qui génère un surplus de code

Voilà, je crois avoir fait "en partie" le tour!!