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 du lecteur web Flowplayer dont je parle tout en bas de cette page . Aussi voir comment faire un cadre autour d'un texte ,  faire un tableau  en html ou comment écrire sur deux colonnes comme dans les journaux et les magazines à l'aide des balises DIV . transfert de fichiers sur son site  web avec Filezilla

Un blog à l'ancienne avec du vieux code HTML de il y a vingt ans déjà L'Intéressant Google is watching you wherever you surf . It is the best Search Engine watching and surfing over the whole world web and it works with all the most famous big browsers J'ai essayé de faire une page web à l'intérieur d'une autre page web mais cela ne marche pas , Peut-être que l'idée est trop farfelue et que le html ne sais pas encore faire cela . Je me suis amusé à mettre du .html dans ce paragraphe qui ne restera seulement qu'un paragraphe dans une page web . On ne peut normalement ne mettre qu'une seule image par paragraphe avec l'éditeur Lauyan TOWeb , donc j'ai été obligé d'utiliser deux fois la même image pour en avoir une au bon endroit . Il faut parfois bidouiller un peu pour faire l'Intéressant . bienvenue dans mon blog en gras je me présente je m'appelle Henri saut de ligne bla bla bla ma voisine a vu bla bla bla bla des petits hommes verts depuis je vois des extraterrestres de toutes sortes . Je les ai répertoriés dans mon livre : " ma voisine et les envahisseurs" aux éditions bestseller une photo où je suis beau en souligné mon profil en italique mon bar à huitres en bleu à 1200m d'altitude comme si vous y étiez entre le casino-hotel Portouze et le camping de Madouze-pignole bla bla bla bla . Mes huitres de montagne sont vivifiantes et tonifiantes exemple de blog en html transitional pur code cliquez ici pied-de-page "auteur : Jacques"

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++ licence GNU pour Windows il remplace enfin l'ancien Bloc-Note 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)  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 mettre: 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 mettre : 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 mettre : 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      retour haut de 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 . C'est vrai qu'un seul paragraphe à propos des liens hypertexte aurait été un peu court car il y a aussi les liens à l'intérieur d'une même page et les liens-image par exemple . L'avantage de ce site c'est de ne traiter que du HTML sans mélanger les genres . Voici donc  une page spéciale liens ! J'ai enlevé l'ancienne image-panneau elle était trop simpliste. En vérifiant j'ai vu qu'elle comportait des fautes bénignes mais en informatique mieux vaut éviter d' induire en erreur un débutant dans ses premiers pas .

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" par exemple, toutes les images classées dans un dossier nommé "images"  par exemple l' index.html et peut-être un favicon il faudra ranger le tout dans un dossier principal  :"fichiers_site"  par exemple . Nous allons donc placer des images grâce à <img src="..."> entre les deux balises <body> et </body> de certaines 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é . Si l'image n'est pas déjà rangée dans le dossier principal mais dans le répertoire "Pictures" de Vista , il faudra renseigner le chemin absolu c-à-dire  <img src="C:\Users\toto\Pictures\ma_photo_de_profil.jpg"> ou dans le répertoire "Images" de Linux le chemin absolu sera : <img src="/home/toto/Images/ma_photo_de_profil.jpg>. Mais si avez déjà placé votre photo (recommandé) dans un dossier que vous avez nommé images  à l'intérieur du dossier principal dans le répertoire Documents   de Windows , Linux ou Mac , au moment de l'envoyer sur le serveur , le chemin relatif suffira c-à-dire <img src="images/ma_photo_de_profil.jpg"> . Une fois transférés sur le serveur personne ne pourra aller chercher vos fichiers sur votre disque dur , donc le chemin absolu n'aura plus aucune utilité 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 ñ=&ntilde viva España = viva Espa&ntilde;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 :            é = &eacute; |  è = &egrave; |  à = &agrave; |  ô = &ocirc; |  ê = &ecirc; |  ë = &euml; |  ù = &ugrave; |  ü = &uuml; |  ç = &ccedil; |  < = &lt |  > = &gt |  & = &amp |  ... = &nbsp;&nbsp;&nbsp; |  "..." = ""&nbsp;&nbsp;&nbsp;&quot                              ça donne par exemple: Quelle co&ieuml;ncidence j'ai pass&eacute les f&ecirc;tes de No&euml;l du cot&eacute fran&ccedil;ais du lac . O&ugrave &eacute;tiez-vous &agrave Gen&egrave;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 ?     retour haut de page

Mettre des couleurs dans ses pages Tout 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 Rainbow 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 continuera sur la même couleur jusqu'après le pied-de-page .  Pour colorier le texte d'un lien différemment des autres  : <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 colorpicker.com couleurs en RGB , HSB et Hexadecimal  afficher plein écran

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 </div> <div style="width: 45%; float: right;">Contenu de la colonne droite </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;"</div>                                  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 .                                      retour haut de page

Le lecteur Flowplayer sur votre page 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 et de la disponibilité du serveur de votre hébergeur . (exemple ici)                             retour haut de page                                                                                                                                    (c'est une ancienne version de Flowplayer: à vous de changer les chiffres en fonction de la version courante) La 3.2.2 par exemple est encore plus simple: flowplayer-3.2.2.min.js et flowplayer-3.2.2.swf

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(425x300)

Pour écrire à Nicolas ! (Le blog-tuto de Nicolas  à http://wubi.iquebec.com)