pour apprendre le langage html

Transcription

1 pour apprendre le langage html introduction : Voici ce que vous devez savoir avant de continuer : Tout d' abord, il faut préciser que le langage HTML est relativement simple mais que celui ci impose au programmeur une logique et une rigueur qu il est de son devoir de respecter. Son travail va consister à écrire, dans un logiciel de traitement de texte (pour nous, Word pad ou le Bloc note ) son texte en y plaçant consciencieusement des balises ( = des instructions ) qui lui permettront de formater son texte, c' est à dire, changer la couleur de son texte, changer sa structure, et y implanter des images par exemples. Il existe deux types de balises, les "conteneurs" et "événement". Toutes s écrivent encadrées des chevrons "<" et ">". Les balises conteneurs sont des balises qui s utilisent par paires et encadrent une zone du document, par exemple le début et la fin d une séquence en gras (< b > et < /b >). Les balises événement s utilisent en solo, comme la balise < hr > qui affiche une ligne de séparation. Bien sûr ces balises apparaîtront sur votre traitement de texte (format *.Txt) mais pas sur votre pas web (format *.htm ou *.html). Petite anecdote, j'ai du ajouter un espace entre les chevrons et ce qui est écrit à l intérieur pour pouvoir afficher les balises de mes exemples juste au dessus. Si je n avais pas ajouter ces espaces, les balises ne se seraient pas afficher et auraient formater mon texte... Toute page débute par une déclaration qui ne sera pas affichée par le navigateur, mais qui lui permet de déterminer la nature du document à afficher. Chaque page web se composera donc dès le début par la balise < HTML > et se finira par la balise < /HTML >, dernière balise qui en fait n est pas nécessaire. A l intérieur de cet encadrement, on distinguera deux parties : L' en tête signalée par les balises < head > et < /head >, le corps où se trouvera le contenu de votre page encadré par les balises < body > et < /body >. Dans l en tête, on incorpore des balises complexes dont on ne se souciera pas mais il faut savoir que les balises < title > et < /title > sont importantes car elles afficheront le titre du document tout en haut à gauche du document, dans la petite barre bleu... on aura donc : BLOC NOTE (Indique le début du bloc note.a ne pas écrire comme

2 instruction!) < html > < head >< title >Vous mettez le titre de la page ici.< /title >< /head > < body > Vous mettez le contenu de votre page ici. < /body > < /html > FIN BLOC NOTE (Indique la fin du bloc note.a ne pas écrire comme instruction!) Incorporez dans le bloc note ces instructions. Vous avez donc un fichier TXT. Il vous suffit de le renommer maintenant en HTM ou HTML selon votre préférence. Cette modification d extension va permettre de visualiser le contenu de votre document par votre navigateur et de se rendre compte du résultat final. Bon, ça, c est une page web embryonnaire! Toutes ces pages doivent pourtant contenir ce minimum d instruction. Dans la partie II du sommaire, à savoir, PRESENTATION DES BALISES HTML, nous allons vous présenter les différentes balises qui se placent cette fois dans le corps du document, c est à dire entre les balises : < body > et < /body >. Voilà, c est la fin de l introduction. les balises : P RESENTATI ON DES BALI SES Voici ce que vous attendez tous, les balises qui vont vous permettre de contrôler vos écrits et mettre en oeuvre vos quatre volontés. En effet, ici réside la partie non pas la plus difficile mais dirons nous, la plus tranquille qu il puisse exister sauf qu il va falloir que vous connaissiez par coeur ces instructions... Voilà, mais ceci va se faire normalement, à force de manipulations, tout ça ne sera qu une simple formalité. (Si vous avez lu l' intro.) Tout d abords, veuillez télécharger le fichier suivant, c est un fichier d aide sur les balises, très pratique, à compter dans votre trousse à outils. FICHIER AIDE Toutes les balises qui vont vous êtres présentées vont l êtres selon un schéma précis. Nous allons vous les regroupées par catégories...voyez plutôt.

3 FORMATAGE DU TEXTE * < b > et < /b > TEXTE EST EN GRAS >salut * < u > et < /u > TEXTE EST SOULIGNE >salut * < s > et < /s > TEXTE EST BARRE >salut * < i > et < /i > TEXTE EST EN ITALIQUE >salut * < tt > et < /tt > POLICE TYPE MACHINE A ECRIRE >salut * < big > et < /big >TEXTE EN GROS CARACTERES >salut * < small >et < /small >TEXTE PETIT CARACTERES >salut * < sub > et < /sub >TEXTE PLACE EN INDICE > salut * < sup > et < /sup > TEXTE PLACE EN EXPOSANT > salut * < pre > et < /pre > TEXTE ECRIT EN PREFORMATE > Salut ça va? Il affiche même les retours à la ligne. * < hx > et < /hx > X=1,2,3 ou 4 jusqu' a 6. Permet de formater vos titres. AVEC H1 : A AVEC H2 : A AVEC H6 : A Remarque : comme cette balise sert à formater son ou ses titres de document, remarquez qu' après la balise < /h6 > ( balise de fermeture ),tout le texte va à la ligne. On pourrait dire que la balise de fin < /h6 > agit comme un < br > ( voir plus bas ). Il est donc inutile pour aller à la ligne d' ajouter < br > après les balises en < hx > et < /hx >. * < font color=xxxxxx > et < /font > PERMET DE METTRE SON TEXTE EN COULEUR. LE X correspond à des chiffres ou lettres, de 0 a 9 et de A à F ( du plus clair au plus foncé ), en fait, de 0 à F. Les 2 premiers X permettent de mettre du rouge, les 2 X suivants, du vert, les 2 derniers, du bleu. Faites des combinaisons avec les nombres et chiffres et créez des couleurs jamais vues encore! A la place des X peuvent êtres écrites des couleurs, en Anglais. Par exemple : < font color=blue > donne Salut< font color=green > donne Salut< font color=red > donne Salut Les autres couleurs peuvent elles aussi fonctionnées. Exemple avec les couleurs: < font color=ff0000 > donne Salut. Voici les differabtes couleurs que vous pouvez placer tel quel dans la balise:

4 noir = black marron = maroon vert = green olive = olive bleu marine = navy pourpre = purple bleu/vert = teal gris = gray argent = silver rouge = red citron = lime jaune = yellow bleu = blue fuchsia = fuchsia vert bouteille = aqua blanc = white CARACTERES SP ECI AUX * < hr > AFFICHE UNE LIGNE. Exemple : Mais cette balise peut être modifiée. < hr size=10 width=75% align=center > donne : Noter que le chiffre en pourcentage peut être remplacé par un nombre, nombre qui exprime des pixels. A la place de "Align" peut être écrit "left" ou "right". * < p > PERMET DE FAIRE UN NOUVEAU PARAGRAPHE. Exemple: "Salut < p > ça va?" donne: "Salut ca va?" Cette balise peut elle aussi être modifiée avec l attribut "align" comme pour < hr >.

5 * < br > PERMET D ALLER À LA LIGNE. Plusieurs < br > à la suite peuvent permettre de passer plusieurs lignes. comment publier sa page web PUBLICATION Bon, en fait, il n'y a pas vraiment de méthode précise car selon l'hébergeur, les méthodes peuvent varier. On remarque cependant une similitude : Premièrement, il faudra vous inscrire sur le site de l'hébergeur choisit. Vous disposerez donc des services complémentaires comme e mail perso, ETC... Ensuite, vous allez engager la procédure d'obtention du pseudo et mot de passe pour votre site ( si ce n'est pas déjà fait ). Cela veut dire que vous devrez trouver un nom de site ( le plus souvent celui ci correspond au pseudonyme qu' il vous est demandé à l' inscription ou lors de la procédure de mise en service de votre site ). Vous devez disposez de 3 renseignements : URL FTP, adresse pour le logiciel FTP ( voir troisièmement ). Exemple, pour multi mania, son adresse Internet est et son adresse FTP est : ftp.multimania.com Votre pseudo qui vous servira aussi pour le logiciel FTP, il est par exemple, pour multi mania le nom de votre site et pseudonyme en même temps. Exemple, l' URL de mon site est et j'ai comme pseudo pour le FTP, "bennyz". Il vous faut ensuite votre mot de passe qui servira encore pour le logiciel FTP qui vous est donné avec votre pseudo... Troisièmement, vous devez disposer d'un logiciel FTP (File Transfert Protocol ) qui va vous permettre de transférer vos fichiers HTML et autres vers le serveur de l'hébergeur. Votre site pourra donc être visionné sur le net mondial. Vérifiez cependant que votre page d'accueil s'appelle INDEX.HTM ou INDEX.HTML. Si ce n' est pas le cas, votre page d' accueil ne sera pas détecter. Il est donc impératif que votre page d'accueil se nomme INDEX. Je vous conseil CUTEFTP pour démarrer. Voici un petit aperçu de mon logiciel FTP, vous pourrez voir sur cette image ou vous devez indiquer les renseignements concernant votre site.

6 Généralement, en tout cas pour multi mania, votre mot de passe et pseudo vous sont retournés par mail ce qui permet d'éviter la perte ou oublie du mot de passe. Pour mettre en ligne vos pages, vous faites glisser vos fichier qui son sur votre disque dur vers le serveur de l hébergeur comme indiqué sur le dessin. Pour les personnes non entraînées au FTP, il peuvent s'adresser à moi, car si vous le voulez, je pourrais mettre en ligne vos pages moi même à la condition que vous me donniez les trois renseignements pour le logiciel FTP.