| Cours html de base par N|KeBoY BON!!! je sais , le backarround pis l'�criture ..c pas beau , mais je vais toute am�liorer ca ds po long !! Comme plusieurs personnes me demandent de leur apprendre le html j'ai d�cid� de donner un petit cours de html � ma fa�on h�h�... par contre excus� le haut taux de fautes je vous prie :)) Qu'est-ce qu'on apprend dans ce cours 1. Qu'est-ce que le html Le html signifiei hypertext makeup langage mais, comme j'suis pas mal sur que vous vous foutez de �a autant que moi (m�me si je connais toute l'histoire de son d�veloppement) ben on va plut�t s'attarder � son utilit� sur le web et ces tites choses l�. Le html est le langage le plus utilis� � l'heure actuel sur le web. C'est un langage � caract�re anglais utilisant des balises pour d�finir son corps. Pour vous donnez une id�e de la simplicit� de ce language les statistiques d�montrent qu'un programmeur va ma�triser ce langage parfaitement apr�s 4 � 10 heures d'apprentissage pour une personne ayant seulement quelque base en informatique les statistiques affichent de 8 � 20 heures d'�tudes... n'est-ce pas merveilleux :)) Les Avantages du HTML : 1.Le html ne requiert aucun programme de compilation il s'�dite � m�me un traitement de texte tel que word pad ou encore le bloc note pour ma part je pr�f�re le bloc note mais bon, chacun ses go�ts. 2.C'est un language pas mal stable et facilement transportable... bon y'en � plein d'autres mais c pas mal les plus importants... Ses ti d�faults : 1. On ne peut pas faire tout ce que l'on veut avec comme changer de background � la moiti� de la page (c'est possible mais en utilisant d'autres langages tels que java et autres) et etc. 2. Les navigateurs permettant le visionnement des pages html ne donne pas tous le m�me conte-rendu comme exemple : internet explorer �crit plus gros que netscape, certaine balise fonctionnent seulement sur un navigateur et plusieurs tits trucs comme �a. 3. C'est un langage tr�s capricieux vous oubliez une majuscule ou de quoi du genre � l'int�rieur de vos liens et up le lien fonctionne pu h�h� (mais y� moins pire que d'autres...) -------------------------------------------------------------------------------- 2. Les bases du html (Bon enfin fini le niaisage h�h� :)) On va commencer �a "slow motion". Comme on le disait tant�t le html est un langage qui fonctionne par balise... bon qu'est-c� que c'est �a une balise : une balise html n'est en fait qu'une action ins�r�e � l'int�rieur des signes <> (<ici l� je parle h�h�>) et se termine quand on coupe l'action avec slash (/) et la balise qu'on veut fermer... dans notre exemple la balise de fin serait </ici l� je parle h�h�>. Donc tout ce qui se trouve � l'int�rieur de <> et </> est affect� par la balise d�finie entre les signes. Comme tout �a doit ressembler un peu � du chinois on va y aller d'un petit exemple sous peu. Quand on commence � faire une page la premi�re balise est toujours <HTML> (mais, �a c'est pas vrai ya une exeption mais, on verra pas �a dans ce cours... alors dites vous que c toujours elle l� premi�re balise). Pourquoi celle l� en premier? : h� bien c parce qu'il faut appeler notre langage de programmation en premier pour que le navigateur le d�tecte et qu'il puisse lire son contenu, il ne faut pas oublier de la fermer quand la page est finie (derni�re ligne) </HTML>. La seconde balise pour l'instant va �tre <head> qui veut effectivement dire l'ent�te.Que contient l'ent�te normalement? : l'ent�te contient le titre de la page (<title>ma page web</title>) et les scripts java... mais on va s'en tenir au titre pour ce cours. La troisi�me balise qui est en fait la plus importante est <body> qui veut dire le corps de la page... elle comprend tout le texte, les liens, les tableaux, le choix des couleurs, le fond d'�cran, bref tout ce que l'on voit sur la page. Le choix des couleurs se fait de la fa�on suivante cela n'est pas essentiel mais presque, du moins parce que c'est pas mal plate de regarder une page de fond blanche avec du texte noir tous de la m�me m�me grosseur d'un bout � l'autre... c'est pour cela que quand on appelle corps du texte on peut choisir une couleur pour le texte g�n�ral ainsi que pour les liens et le fond d'�cran. * Un petit conseil pour faciliter la lecture de vos sources : mettez vos balises en majuscules. On va r�sumer tout �a avec un ti exercice... ouvrez le bloc note et copier le code source suivant : <HTML> <HEAD><TITLE>Ma page web</TITLE> </HEAD> <BODY BGCOLOR="black" TEXT="white"> Voici ma page web </BODY> </HTML> Ensuite sauvegard� la page en point html exemple : page.html Voici ce qui devrait appara�tre sur votre page : Voici ma page web -------------------------------------------------------------------------------- Passons aux explications de la source de cette mini page... Liste des balises utilis�es dans cet exemple et leurs utilit�s : <HTML> : appel le langage utilis� <HEAD> : ent�te de la page <TITLE> : contient le titre de la page (doit �tre plac� � l'int�rieur de la balise head) <BODY BGCOLOR="black" TEXT="white"> am�ne le corps de la page tout en lui donnant les 2 valeurs suivantes bgcolor qui est la couleur de fond et text qui est la couleur du texte par d�fault de la page. Prendre en note que les couleurs peuvent �tre choisies soit en les nommant en anglais comme dans notre exemple ou bien en code hexadecimal. R�sum� de l'exemple : Nous avons cr�� une page qui a pour titre "Ma page web", son fond est noir et la couleur du texte affich� est le blanc ex : "Voici ma page web" (que l'on voit s'afficher en haut � gauche de la page web d'exemple.) Ce que nous venons de voir est la source de base d'une page web. Une question que vous devez sans doute vous posez... Comment on fait pour mettre un fond d'�cran? parce que bien sur c ben le fun une couleur unie quand on �crit un texte en word mais c pas toujours tr�s tr�s int�ressant sur le web... alors le html nous a pourvu de l'attribut suivant : BACKGROUND qui vient s'ajouter � l'int�rieur de la balise BODY de la fa�on suivante exemple : <BODY BACKGROUND="c:\mon_image.jpg" BGCOLOR="black" TEXT="blue"> m�me si l'on utilise une image de fond il est important de d�finir une couleur de fond au cas o� il y aurait un probl�me.... vaut mieux pr�venir que gu�rir h�h�. Pour que vous puissiez bien comprendre chaque balises j'ai compos� des exemples que vous pouvez downloader il y en a au moins un par chapitre... pour voir la source des pages vous avez qu'� aller dans le menu afficher ou view de votre navigateur et cliquer sur l'onglet source. Exemple du chapitre les bases du html baseshtml.zip -------------------------------------------------------------------------------- 3. Le Texte Bon maintenant que nous avons vu la structure de base d'une page html on va tenter d'enrichir son contenu. Pour se faire nous allons utiliser les balises suivantes qui vont s'ajouter dans la partie body. <P> Pour d�finir un paragraphe. La balise <P> peut contenir l'attribut ALIGN qui peut prendre les valeurs suivantes : right (droit), left (gauche), center (centre), justify (justifier). Pour exemple : <P ALIGN="right">voici mon texte</P> donc si vous ins�r� cette balise dans votre texte tout ce qui se trouve dans ce paragraphe sera �crit � droite de la page (plut�t en partant de la droite). * Personnellement je vous conseille de ne pas utiliser la valeur justify parce qu'elle est capt�e par peu de navigateurs et bien souvent elle fait d�fault. (le r�le de cette balise est de faire comme les textes des journaux et de cr�er des espaces automatiques pour que le texte touche la page de gauche � droite) <CENTER> Balise qui date de l'�ge de pierre selon moi mais qui est encore utilis�e, elle servait � mettre le texte qui se trouvait entre <CENTER> et </CENTER> align� au centre �videmment... elle a surtout �t� utilis� pour les versions internet explorer 3.0 ainsi que les vieilles versions de netscape. * Conseil prenez l'habitude d'utiliser la balise <P ALIGN> au lieu de <CENTER>. <FONT> Balise qui nous donne le pouvoir de changer la grosseur, la couleur et la police du texte et des liens bien sur. Les attributs qu'elle peut prendre sont les suivants : COLOR (pour la couleur bien sur), SIZE (grosseur du texte utilis�) et FACE (la police de caract�re utilis�e). Pour l'attribut COLOR les valeurs peuvent �tre : n'importe laquelle des 250 couleurs de la platforme web nomm�e en anglais ou d�finie en code hexadecimal. Pour ce qui est de l'attribut SIZE il peut prendre les valeurs suivantes : 1,2,3,4,5,6,7,+1,+2,+3,+4,+5,+6,+7,-1,-2-3,-4,-5,-6,-7 ces valeurs sont comptabilis�es de la fa�on suivante : 1 est le texte le plus petit utilisable par cet attribut et 7 est le plus grand, pour ce qui est des + et des - il ne font que de faire varier la configuration de base par un texte d'un point plus grand � 7 ou l'inverse selon la valeur choisie (par d�fault la grosseur du texte est 3). L'attribut FACE est utilis�e pour changer la police de caract�re du texte voulue par d�fault sa valeur est : le Times Roman (PC) ou le Times (Mac). Un petit exemple : <FONT FACE="Arial Narrow" COLOR="red" SIZE="5"> mon texte </FONT> dans cet exemple tous les caract�res affect�s par cette balise vont �tre �crit en arial narrow, de couleur rouge et de grosseur un peu plus �lev� que la normale du web. * Conseil si cela vous est possible d�finissez toujours vos couleurs par des codes hexadecimals c'est plus stable et plus facile � d�coder pour les navigateurs internet et optimise le temps de chargement de la page. * Autre petit conseil utilisez toujours des valeurs r�guli�res pour le changement de grosseurs du texte (1,2,3,4,5,6,7) * Et encore un autre petit conseil lol... Utilisez des polices de caract�res dont vous �tes � peu pr�s s�r que le visiteur de votre page vont disposer pour qu'ils puissent voir le texte sans probl�mes comme vous le voulez. Il faut aussi constater que les formats de texte du PC et du MAC ne sont pas encore tous pareil. Dans un prochain cours nous verrons comment utiliser une police de rechange mais d'ici l�, tenez vous en aux polices r�guli�res de pr�f�rence. <H1><H2><H3><H4><H5><H6> Balises primitives utilis�es pour changer la grosseur du texte html utilis�e surtout sur les navigateurs comme internet explorer 3.0 et les autres comme tant�t. Cette balise apporte un controle moins pr�cis que <FONT SIZE> sur la grosseur du texte � cause d'un choix plus limit� de formats. Cette balise marche � l'inverse du <font size> ce qui veut dire que la grosseur maximale du texte est <H1> et la plus petite est <H6>. Pour exemple <H1>Mon texte</H1> donc tout ce qui est affect� par la balise est de grosseur maximale <H1> �tait g�n�ralement utilis� pour un titre. * Conseil pour d�finir la grosseur du texte utilisez la balise <FONT SIZE> elle est plus pr�cise et capt�e par tous les navigateurs datant de moins de 3 ans. <BR> Cette balise ex�cute un saut de ligne utilis� la autant de fois que n�cessaire. * � noter, la balise <BR> n'a aucune balise de fin vous comprendrez pourquoi sans doute. <HR> Cette balise sert � faire un trait comme ceux qui s�parent les chapitres de ce texte. Elle peut prendre les attributs suivants : SIZE (pour d�finir l'�paisseur du trait), WIDTH (pour d�finir la largeur du texte), NOSHADE (trait sans relief). L'attribut SIZE doit avoir un nombre comme valeur (si aucune valeur choisie, le 1 est s�lectionn� par d�fault), ce nombre est �gal � l'�paisseur du trait en pixels. Pour ce qui est de l'attibut WIDTH il peut prendre comme valeur un nombre, comme pour l'attibut SIZE mais �galement, une valeur en pourcentage sous la forme exemple : <HR WIDTH="25%">. Maintenant l'attribut NOSHADE ben lui on se casse pas la t�te il ne poss�de aucune valeur donc on l'insert de la fa�on suivante <HR NOSHADE>. Un petit exemple pour finir la balise <HR> : <HR SIZE="5" WIDTH="50%" NOSHADE> dans cette exemple on a cr�� un trait d'�paisseur 5 (5 pixels) de largeur 50% donc la moiti� de la page est sans relief (NOSHADE). * � noter les traits sont toujours centr�s donc ils se d�finissent en partant du centre de la page. * Conseil utilisez aussi souvent que possible une valeur en pourcentage pour l'attibut WIDTH car le trait va ajuster sa largeur en fonction de la grosseur d'�cran du visiteur de vos pages. <B> Cette balise est en fait l'abr�viation de BOLD (gras) donc tout ce qui est �crit � l'int�rieur de l'ouverture de la balise et de la fin est en gras exemple : <B>mon texte que je veux mettre en gras</B>. <I> C'est l'abr�viation de ITALIC (italique) donc pour mettre le texte en italique. Elle s'applique comme la balise <B>. <U> C'est l'abr�viation de UNDERLINE (caract�res soulign�s). Encore une fois s'applique comme la balise <B>. <STRIKE> Le mot STRIKE veut dire BARR�. donc cette balise est utilis�e pour barrer du texte (mettre un trait sur les caract�res). <SUB> Le mot SUB veut dire EN DESSOUS. Cette balise est utilis�e surtout pour les notations scientifiques exemple : H2O. <SUP> Le mot SUP veut dire SUP�RIEUR. Cette balise est utilis�e pour mettre du texte sous forme d'exposant exemple : X2. <BIG> et <SMALL> Bon pas besoin d'explications, ici c'est �videmment pour mettre du texte en gros et en petit s'applique comme la balise <B>. <TT> Cette balise est l'abr�viation de TYPEWRITER (machine � �crire). Faut pas �tre un g�nie pour savoir que le texte contenu entre la balise d'ouverture et celle de fermeture va �tre �crit comme sur une machine � �crire. <BLINK> Cette balise veut dire CLIGNOTTEMENT. Elle s'applique de la m�me fa�on que la balise <B> encore une fois, elle sert � faire clignoter du texte. * Je vous d�conseille fortement d'utiliser la balise <BLINK>. Premi�rement, car peu de navigateurs la supportent de nos jours car, elle a rendu beaucoup de gens presque aveugles (essayez de lire un texte qui arr�te pas de clignoter c'est fatiguant pas � peu pr�s...). Liste des formats des carat�res Balise d'ouverture Balise de fermeture Utilisation <ACRONYM> </ACRONYM> pour les acronymes <CITE> </CITE> pour les courtes citations <CODE> </CODE> pour les extraits de programmes <DFN> </DFN> pour les d�finitions <EM> </EM> pour les emphases <KBD> </KBD> pour les caract�res � saisir <SAMP> </SAMP> pour les �chantillons <STRONG> <STRONG> pour les caract�res forts <VAR> </VAR> pour les variables J'esp�re que vous vous �tes bien bourr� le crane jusqu'� pr�sent et que vous allez vouloir continuer votre formation quand ce document va �tre termin�. Je suis sinc�rement d�sol� faute de temps je n'ai pas pu compl�ter ce document jusqu'� pr�sent j'esp�re que vous m'en excuserai. Si vous avez des questions n'h�sitez pas � me les poser mon temps de r�ponse est en g�n�ral 48 hrs. Pour me rejoindre [email protected] |