Nous sommes en 2010 . Nous allons supposer que vous savez déjà lire et écrire .HTML de son vrai nom Hyper Texte Markup Language est un langage informatique d'une vingtaine d'années seulement et compréhensible , lorsqu'il est traduit par votre navigateur sur internet, par tout le monde y'a même des images pour qui n'aime pas lire . Pour l'historique je vous propose d'aller faire un tour sur Wikipedia en français ou en anglais . Si vous savez lacer vos chaussures que vous avez compris comment on faisait , avec ma méthode infaillible vous saurez comment faire vos premières pages en HTML pur code avec la même facilité (mais là je fais l'intéressant). D'ailleurs vos premiers essais ressembleront à "L'Intéressant" ci-dessous , mais ce n'est que la base , ce qu'il y a de plus rudimentaire . On peut faire mieux en HTML puis améliorer avec les CSS et pourquoi pas le PHP . L'éditeur de texte Bluefish par exemple libre et multi-plateforme est plutôt simple d'emploi et il n'est pas interdit d'utiliser plusieurs éditeurs de html "pur code" simultanément pour créer son blog . Je traiterai principalement du HTML Transitional dans cette page . C'est possible aussi d'ajouter du son , de la vidéo avec du HTML transitional : il faut télécharger un lecteur web sur votre site (il y en a des gratuits à condition de n'avoir aucune pub sur votre page web) et d'ajouter du javascript dans les pages .html. Cette page est éditée avec Lauyan TOWeb qui n'est pas un éditeur pur code bien que parfois j 'utilise du code pour certains paragraphes . Nicolas construit un blog en n'utilisant que des éditeurs pur code . Il est en hébergement gratuit sur iquebec.com visiter son tuto-blog ici (il a fait son blog en HTML4.01transitional) en uft-8 avec Bluefish et Gedit sur Ubuntu (système d'exploitation Linux) et il a trouvé un lecteur web très simple à installer pour ceux qui veulent mettre leur vidéo personnelle sur leur site en HTML4.01Transitional avec un minimum de javascript . Il s'agit de Flowplayer dont je parle tout en bas de cette page . Aussi voir comment faire un tableau en html ou comment écrire sur deux colonnes comme dans les journaux et les magazines à l'aide des balises DIV
|
 L'effet défilement (scrolling) peut être généré avec le html : | | <marquee behavior=scroll direction="left"<p>bla bla bla</p></marquee> |
|
| cette rubrique est inspirée du tuto de "ifrance" avec quelques illustrations et trucs en plus | |
|
Autre documentation : façon un peu différente de faire son weblog avec Openoffice (libre et gratuit) |
|
téléchargement documentation Web'OOo |  | | fichier PDF faire son web avec openoffice |
| téléchargement documentation Web'OOo |  | | en natif OOo faire son web avec openoffice |
|
|
HTML est un langage qui a ses codes | Comme pour l'alphabet il faudra l' apprendre par coeur . Pour l'instant il vous faut un ordinateur et une connection à internet . Il faudra un éditeur de texte . Pour du code aussi simple Bloc-Note sur Windows , Simple Text sur Macintosh , Gedit sur bureau Gnome ou Kedit sur bureau KDE de Linux suffiront . Sur Windows vous pouvez aussi installer Notepad++ il convient aussi bien à un débutant qu'à un très confirmé . Trouver un hébergeur gratuit ? (à moins que vous ne transformiez votre PC en serveur fonctionnant 24h/24) vous paierez votre loyer grâce aux encarts publicitaires que l'hébergeur rajoutera sur vos pages web avec l'aide de javascript , car il doit assurer la maintenance de ses serveurs .
|
|
Sur Linux les éditeurs de texte (pur code) avec coloration syntaxique sont performants mais Windows et MacOSx .... | | .... ont aussi de très bons éditeurs de texte (pur code) en téléchargement gratuit ci-dessous : |
|
Notepad++ |  | | En licence libre pour Windows | |
| Coda 1.6.7.zip |  | | pour MacOSx 10.4 et plus | |
|
|
Quelques balises incontournables | | HTLM est un code à balises . Vous ne verrez jamais apparaître dans la page de votre blog ce qui est écrit entre <head> et </head> , sinon dans la barre du navigateur ( qui commence par http: et qui peut reproduire ce vous avez écrit entre <title> et </title>) : pourtant ce sont deux balises incontournables qui contiennent des informations essentielles pour répertorier votre travail sur le web . Incontournables aussi sont les deux balises "html" dont l'une <....> au tout début et l'autre </....> tout à la fin (mettre html à la place des pointillés) , activent toutes les autres balises - et enfin <body et </body> qui contiennent tous les textes et images que vous verrez apparaître sur votre page web . Seule la balise <hr> voir ici qui tire une grande ligne de séparation horizontale échappe à cette loi et peut se placer derrière la balise </body> pour obtenir un pied-de page et puis vous avez aussi <h1 align=center> le titre en grand en haut de page </h1> (par ex : L'intéressant) mais souvent align=center , align=right et align=left sont obsolètes et ne fonctionnent qu'à partir de <h2>.....</h2> le titre un peu moins grand jusqu'à <h6>....</h6> vous avez la balise <p> qui ouvre un nouveau paragraphe (qui peut se résumer à un mot ou une phrase) suivi automatiquement d' un double saut de ligne et dont la balise </p> de fermeture est facultative |
|
Quel DOCTYPE utiliser (au tout début d'un fichier .html) | <!DOCTYPE HTML PUBLIC "-//Cela commence par !DOCTYPE HTML PUBLIC "-//Il est à placer tout en haut de la page pour se mettre aux normes de la w3c . Merci au Bureau W3C du Sénégal pour cette documentation complète en langue française . Puisque nous utilisons du html pur code nous choisirons du Strict , du Transitional ou du Frameset en HTML 4.01 , Pour celui que j'utilise , le HTML Transitional ajoutez :
W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
mais le Consortium parcequ'il soutient aussi le CSS privilégie notamment le HTML Strict où il faut ajouter :
W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
car le CSS prends de plus en plus de place dans les pages web et même remplace certaines fonctions qu'apportait autrefois .html et vous avez enfin le HTML Frameset où il faut ajouter :
W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
bonne documentation sur les différentes variantes de HTML
avec l'éditeur Bluefish c'est simple : vous cliquez sur HTML et le menu déroulant vous propose DOCTYPE vous n'avez plus qu'a cliquer sur celui que vous désirez voir apparaître en haut de votre page |
|
Les liens hypertextes |  | | Vous pouvez vous instruire sur le HTML en affichant le code source d'une page ou code source d'un cadre (clic droit sur un site) . Vous avez aussi Aardvark un add-on de Firefox . |
|
Les balises qui rendent votre blog plus convivial | | Une page juste avec du texte serait un peu ennuyeuse . Dans le répertoire Documents ou mes documents(pour XP), après avoir rassemblé tous les fichiers du blog que vous voulez créer : ,les différentes pages.html appelées aussi rubriques ou topics classées dans un dossier nommé "liens" , toutes les images classées dans un dossier nommé "images" l' index.html et peut-être un favicon il faudra ranger le tout dans un dossier principal par ex :"mon_blog_fichiers" Nous allons donc placer des images grâce à <img src="..."> entre les deux balises <body> et </body> de chaque page .html ; avant de les transférer sur le serveur nous pouvons déjà les visualiser en lisant la page avec votre navigateur préféré . il faudra renseigner le chemin absolu c-à-dire <img src="C:\Users\toto\Documents\mon_blog_fichiers\images\ma_photo_de_profil.jpg"> si vous avez Windows et que votre photo se trouve dans un dossier que vous avez nommé "images" ou <img src="/home/toto/Documents/mon_blog_fichiers/images/ma_photo_de_profil.jpg"> si vous êtes sur Linux est que votre illustration se trouve dans un dossier que vous avez nommé "images" . Mais au moment de l'envoyer sur le serveur il faudra le chemin relatif c-à-dire <img src="images/ma_photo_de_profil.jpg"> ou <img src="/images/ma_photo_de_profil.jpg"> si votre page .html est placée dans le dossier "liens" par ex. . Il y a aussi les balises <i>en italique </i> <b> en gras </b> <u> en souligné </u> Sans oublier <br> pour sauter une ligne ou <br><br> pour en sauter deux |
|
Petits trucs et suppléments | | faire un cadre autour d'une image (pour qu'elle ne colle pas au bord de la page par exemple) ça fonctionne ce n'est pas forcément la meilleure solution mais c'est la plus simple faire un cadre invisible horizontal : img src=".../photo.jpg" hspace=n , vspace pour un cadre vertical , "n" étant la valeur en pixels Un truc quand votre code s'étire sur une seule ligne dans votre éditeur de texte : vous tapez <br> et appuyez sur la touche Entrée autant de fois que vous nécessitez d'autres lignes . Vous pourrez effacer <br> après , si vous n'en avez pas besoin à cet endroit-là , et le numérotage des lignes restera ! |
|
Les caractères spéciaux à la langue française (et espagnole) | | Pour pouvoir vraiment écrire en français avec ses accents aigu , grave , circonflexe , son c cédille etc...ou en espagnol avec la tilde ñ=ñ viva España = viva España Si vous avez édité vos pages en uft-8 : <meta http=equiv="content-type" content type=text/html;charset=utf-8" /> à placer entre <head> et </head> sinon en ISO-8859-1 : <meta content="text/html;charset=ISO-8859-1 /> et <meta http-equiv="content-language" content="fr" />" Au debut vous pouvez eviter les accents de la langue francaise meme si cela fait bizarre autrement ce sera encore plus bizarre une fois transféré sur le web mais si vous voulez les lettres accentuées vous pouvez y remédier en transcrivant sur votre éditeur de texte les caractères spéciaux : é = é è = è à = à ô = ô ê = ê ë = ë ù = ù ü = ü ç = ç < = < > = > & = & ... = "..." = " " ça donne : Quelle co&ieuml;ncidence j'ai passé les fêtes de Noël du coté français du lac . Où étiez-vous à Genève ? tout ça pour dire : Quelle coïncidence j'ai passé les fêtes de Noël du coté français du lac . Où étiez-vous à Genève ? |
|
 Mettre des couleurs dans ses pagesTout d'abord question couleur je vous recommande d'installer un colorpicker (un petit logiciel généralement gratuit qui reconnaît et nomme les couleurs en hexadecimal ex; "#000000" pour le noir absolu) et vous pourrez jouer avec les nuances . Vous avez Colorzilla un add-on de Firefox , Gpick pour Windows ou Linux , Hex Color Picker pour MacOsx ou Just Color Picker de Olivier Ravet pour Windows qui sont gratuits . Juste derrière la balise </head> et devant ou dans la balise <body> . avec <body bgcolor="couleur de fond " puis <body bgcolor="couleur de fond" text="couleur du texte" vous pourrez changer du noir sur blanc imposé par défaut . Vous pouvez aller plus loin dans votre personnalisation en coloriant les textes des liens dans la balise <body> : <body bgcolor="couleur de fond" text="couleur du texte" link="couleur du lien" vlink="couleur du lien au passage de la souris" alink="couleur du lien au clic de la souris" > Vous voulez changer la couleur d'une lettre d'un mot ou d'une phrase seulement : <font color="nom de la couleur">bla bla</font> . Si vous ne mettez pas la balise de fermeture </font> tout le restant du texte de votre page se finira en vert jusqu'après le pied-de-page . Attention pour colorier le texte d'un lien : <a href="http://machin.com"><font color="nom de la couleur">visitez machin.com</font></a> Vous pouvez utiliser un tableau des couleurs comme celui de DMC couleurs en HTML et Hexadecimal :
|
|
Plus de nuances avec color-picker.swf |
couleurs en RGB , HSB et Hexadecimal afficher plein écran ""source : la.gg.com" ok => copy dans votre presse-papier |
|
Les balises <div>...</div> et <span>...</span> | s'utilisent également dans le HTMLTransitional : là il s'agit d'écrire sur deux colonnes (comme dans les journaux et les magazines) . <div style="width: 45%; float: left;">Contenu de la colonne gauche ici</div>
<div style="width: 45%; float: right;">Contenu de la colonne droite ici</div>
<div style="clear: both;"></div>
Si vous faites <div align=left>contenu de gauche</div><div align=right>contenu de droite</div> vous obtiendrez bien deux colonnes mais à chaque fois que vous écrirez une ligne dans une colonne elle provoquera un saut de ligne dans l'autre colonne . La solution que j'ai utilisée dans "L'Intéressant" est celle de Rodney Sankinka avec des valeurs % différentes : Après les balises </h1><br> (saut de ligne après le titre en grand) faire <div style="width:N1%;float:left">contenu de la colonne de gauche</div><div style="width:N2%;float:right">contenu de la colonne de droite et là attention au pied-de-page : juste après </body> et avant <hr> faire </div><div style="clear:both;" N1 et N2 étant des valeurs en pourcentage , l'idéal serait que N1+N2=90 (à 100 les deux colonnes colleraient l'une , l'autre ce ne serait pas très malin) . Les balises <span> ... </span> sont utilisés pour modifier un morceau de texte qui est, la plupart du temps, déjà contenu entre des <div> </div> par exemple changer la couleur du texte , je préfère faire <font color="...">bla bla</font> . Les véritables atouts de la balise SPAN se trouvent dans les styles qu'il peut utiliser à travers les feuilles de style mais là il faut utiliser la CSS . |
|
|
<table width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr><td><div align="center">cellule1 </div> </td>
<td><div align="center">cellule2</div> </td>
<td><div align="center">cellule3</div> </td></tr>
</table>
|
|
Voici ce tableau très simple | La première balise à insérer pour la création d'un tableau est <table></table>
<tr> </tr> crée une nouvelle ligne alors que <td></td> crée une nouvelle colonne. A insérer entre les balises BODY , là où vous voulez que ce tableau apparaisse
cellule1 |
cellule2 |
cellule3 |
|
|
Autre tableau avec du html | | Pour ne pas voir les traits de séparation : table border=0 avec les boutons radio (ronds) vous n'avez qu'un seul choix avec les checkboxes (carrés) cochez autant de réponses que vous désirez . select vous offre un menu déroulant . Mais pour avoir le maximum d'efficacité et de sécurité il vaut mieux ajouter du PHP . |
|
c'est un questionnaire fictif (inscription à un cours de yoga) |
|
|
Le code du questionnaire est à peu près celui-là il faudra mettre votre email après mailto: | <form name="yoga" method="post" action="mailto:toto@mail.fr">
<b>Enregistrement d'une inscription</b>
<table border=1>
<TR><TD>Nom</TD>
<TD><input type=text name="nom"></TD></TR>
<TR><TD>Prénom</TD>
<TD><input type=text name="prenom"></TD></TR>
<TR><TD>*email</td><td> <input type=text name="email"></TD></TR>
<TR><TD>Sexe</TD>
<TD>Homme : <input type=radio name="sexe" value="M">
<br>Femme: <input type=radio name="sexe" value="F"> <br><br>Autre (précisez dans le commentaire)<input type=checkbox name="sexe"value="A"
</TD></TR><TR><TD>Fonction</TD><TD><SELECT name="fonction">
<option value="enseignant">Enseignant</option>
<option value="etudiant">Etudiant</option>
<option value="ingenieur">Ingénieur</option>
<option value="retraite">Retraité</option>
<option value="autre">Autre</option>
</SELECT></TD></TR><TR><TD>motivations</TD>
<TD><textarea rows="3" name="motivations">
santé rencontres spiritualité</textarea></TD></TR>
<TR><TD COLSPAN=2><input type="submit" value="Envoyer"></TD></TR>
</TABLE>
</form>
|
|
Flowplayer le lecteur sur le web avec du html transitional et très peu de javascript | | Pour placer des vidéos en FLV sur votre site , pas besoin d'aller les chercher sur Youtube , Dailymotion ou autre vous pouvez diffuser votre propre vidéo à condition de l'avoir auparavant encodée au format FLV . D'abord télécharger sur le serveur de votre site les trois fichiers : flowplayer-3.1.4.min.js , flowplayer-controls-3.1.5.swf et flowplayer-3.1.5.swf . Il faudra bien sur télécharger votre vidéo FLV ce qui n'est pas toujours le plus facile , cela dépend de la taille de cette vidéo il faut parfois beaucoup insister pour télécharger la vidéo en entier . exemple ici avec un lien vers le site de flowplayer |
|
d'abord avant la balise </head> | | <script src="flowplayer-3.1.4.min.js"></script> |
|
puis entre <body> et </body> | | <a id="player" style="display:block;width:425px;height:300px;" href="nom_de_votre_video.flv"> |
|
vous pouvez installer votre splashscreen juste après exemple flow_eye.jpg | | <img src="images/flow_eye.jpg"> |
|
et enfin à suivre | | <script language="JavaScript">flowplayer("player,"flowplayer-3.1.5.swf");</script> |
|
c'est une des façons d'installer le player mini de flowplayer sur un site web | | Si vous allez sur le site demo 1/5 de flowplayer , vous verrez path/to/ ce qui signifie chemin/vers/ en français . Dans mon cas je n'ai pas de chemin à respecter vu que j'ai extrait les trois fichiers actifs du dossier flowplayer pour les envoyer directement à la racine de mon site |  splashscreen flow_eye.jpg |
|
|
