Quelques notions du langage  HTML en français

Non il n'y a pas d'erreur dans le titre:
"français" s'écrit bien "français" en langage HTML




Fin 1997 la W3C annonçait l' arrivée de HTML4. Nous allons supposer que vous savez déjà lire et écrire .
Les nouveaux sites sont écrits en HTML5. Mais ceux qui sont écrits en HTML4 sont encore nombreux et bien interprétés par les navigateurs web
HTML de son vrai nom Hyper Text 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. Il 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 , voir le XHTML, plus dynamique, mais plus exigeant, qui lui ressemble un peu, puis améliorer avec les CSS et pourquoi pas un peu de javascript et du PHP
L' éditeur de texte Bluefish par exemple (qui est un WYSIWYN) libre et multi-plateforme est plutôt simple d'emploi et il n'est pas interdit d'utiliser plusieurs éditeurs de texte "pur code" pour créer une page . Je traiterai principalement du HTML Transitional dans cette rubrique . Il est possible aussi d'ajouter du son , de la vidéo avec du HTML :

Cette page est éditée avec Lauyan TOWeb qui n'est pas un éditeur pur code et contient beaucoup de CSS que l'on ne peut pas modifier. Il est plutôt difficile d' y montrer des exemples en HTML pur code sur ses pages. Mais cet éditeur WySiWyG me permet aussi de mettre en ligne des pages HTML créées avec un éditeur pur code échappant ainsi aux CSS prédéfinies de Lauyan TOWeb

Pages signalées par l' icône icone-pages libres

icone-pages libres    squelette d'une page HTML



.

Comment écrire sur deux colonnes comme dans les journaux et les magazines à l'aide des balises DIV

Comment faire un cadre autour d'un textefaire un tableau  en html .

Comment ranger localement ses fichiers pour les transférer avec Filezilla

Le lecteur flv web Flowplayer dont je parle tout en bas de cette page .


Avec HTLM5 qui est une grande avancée dans le language HTML, nous assistons à un manque de standardisation au niveau des supports des navigateurs pour les fichiers audio/vidéo en particulier. Grandes avancées aussi du coté de CSS3 point de vue design. Mais HTML n'est pas dépendant de CSS comme le laisseraient croire certains tutoriels pourtant sérieux, Mais voila, CSS devient de plus en plus indispensable pour les sites mobiles ou responsives en HTML5 .


HTML est un code libre et gratuit


Comme tout autre langage informatique, Il a un alphabet, une grammaire, une syntaxe ... qu'il faudra apprendre par cœur.
Pour l'instant il vous faudra
Un ordinateur et une connection à internet .
Un éditeur de texte
pour Windows Notepad++ est parfait .
Un hébergeur de préférence gratuit ? (à moins que vous ne transformiez votre PC en serveur fonctionnant 24h/24) vous aurez besoin d'un serveur .
Un client FTP pour envoyer vos pages sur internet
Vous pouvez installer gratuitement Filezilla sur Windows, Mac ou Linux 
 

Une page HTML 4 à l'ancienne

J'ai commencé à faire mes premières pages HTML ainsi, en utilisant les balises P pour les paragraphes.
Vous avez ci-dessous, à gauche, le code de la page "L'Intéressant" que vous pouvez copier-coller dans un éditeur de texte et enregistrer sous interessant.html. Ce qui vous donnera comme à droite la page HTML lue par le navigateur.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br>
<html><br>
<head><br>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><br>
<meta http-equiv="content-language" content="fr"> <br>
<title>L' intéressant</title><br>
</head><br>
<body bgcolor=#8EFF34 text=black> <h2 align=center>L'int&eacute;ressant</h2>
<p align=center><b>Bienvenue dans mon blog en gras</b></p>
<p align=center>
Bonjour, je m'appelle Henri. Ma voisine a vu des petits hommes verts dans sa cuisine. Ils ressemblaient &agrave des salades, je dis bien des salades. J'ai men&eacute mon enqu&ecirc;te et je me suis rendu compte qu'il y en avait partout, et pas que des petits verts. Ils y en avait aussi des petits gris dans la rue et des translucides partout.
<p align=center> Je les ai r&eacute;pertori&eacute;s dans mon livre:<b><br>Ma voisine et les envahisseurs</b></p>
<p align=center><u>ma photo en soulign&eacute</u><br><br>
<img src="http://www.wubijacq.com/images/62ape.jpg width=64 height=64 title="l'artiste" alt="l'artiste"><br><br>
<i><font color=magenta>je suis beau en italique et en magenta</font></i></p>
</body><hr>pied-de-page
</html>

L'intéressant

Bienvenue dans mon blog en gras

Bonjour, je m'appelle Henri. Ma voisine a vu des petits hommes verts dans sa cuisine. Ils ressemblaient à des salades, je dis bien des salades. J'ai mené mon enquête et je me suis rendu compte qu'il y en avait partout, et pas que des petits verts. Ils y en avait aussi des petits gris dans la rue et des translucides partout.

Je les ai répertoriés dans mon livre:
Ma voisine et les envahisseurs en gras

ma photo en souligné

l'artiste

je suis beau en italique et en magenta


pied-de-page  
Je n'utilise plus beaucoup la balise <p> (c'est juste bon pour de petites pages avec l'extension HTM). Avec <p align=center> les lignes partent du milieu de la page en s'étalant symétriquement à droite et à gauche. vous pouvez laisser une marge de chaque coté en faisant des sauts de ligne <br> au bon endroit. Le gros problème sera la dernière ligne du paragraphe. si il n'y a que deux ou trois mots en plein milieu de cette ligne cela fera bizarre. Il faudra de l'inspiration pour finir de combler le vide ou recommencer en plaçant les sauts de ligne différemment. Sur une petite largeur comme ici (on dirait une page web à l'intérieur d'une autre page web) cela passe bien, mais dès que vous arrivez dans des résolutions d'écran genre PC c'est plus difficile
J'utilise maintenant surtout les balises DIV, car on peut y régler facilement la largeur et la hauteur des blocs


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 balise est dépréciée en HTML5


.
.
.
.


.

Sur Linux les éditeurs de textes avec couleurs syntaxiques sont nombreux, performants et gratuits



Mais Windows et MacOSx ont aussi de très bons éditeurs de texte (pur code) en téléchargement gratuit ci-dessous :

Notepad++ pour Windows


logo-notepad-plus


Licence GNU pour Windows il remplace avantageusement l'ancien Bloc-Notes de microsoft©

Dernière et autres versions sur la page de l'éditeur



Le créateur

FRAISE et Smultron
pour Mac


logo-fraise


Les bon éditeurs commencent à être tous payants sur Mac sauf d'anciennes versions de Fraise et Smultron

Smultron-3.6b1.zip pour Mac 10.5
Téléchargement direct depuis Sourceforge

Fraise 3.7.3..zip pour Mac 10.6+
Téléchargement depuis cloud github.com

Quel DOCTYPE utiliser  (au tout début d'un fichier .html) 

<!DOCTYPE HTML PUBLIC "-//Cela commence par
<!DOCTYPE HTML PUBLIC "-//W3C//
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, mais pour cela il faut ajouter un DTD (Document Type Definition) spécifique ,

Pour celui que j'utilise , le HTML Transitional ajouter:
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 :
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 :
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

En HTML5 c'est beaucoup plus simple:
<!doctype html>     
retour haut de page                                                                                                                      

Quelques balises incontournables 

HTLM est un code à balises .

Les balises HTML
Les deux balises HTML dont l'une (d' ouverture)<html> au tout début (après le DOCTYPE) et l'autre (de fermeture) </html> tout à la fin , activent toutes les autres balises

Les balises HEAD
Vous ne verrez jamais apparaître dans la page de votre  blog ce qui est écrit entre <head> et </head> , sinon    dans la barre inférieure du navigateur  qui reproduit ce vous avez écrit entre <title> et </title>) : pourtant ce sont deux balises incontournables qui contiennent des informations essentielles (exemple pour répertorier votre travail sur le web) . 

Les balises BODY
<body> et </body> qui contiennent tous vos contenus, textes et images que vous verrez apparaître sur votre page web .

les balises H
<h1 align=center> le titre en grand en haut en milieu de  page </h1> 
<h2>.....</h2> le titre un peu moins grand jusqu'à <h6>....</h6>   

la balise <hr> voir ici  qui tire une ligne de séparation horizontale  peut  parfois se placer derrière la balise </body>  pour obtenir un pied-de page  

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

Les balises DIV


Les balises DIV créent des divisions,

Elles forment des colonnes, des blocs (conteneurs rectangulaires) dont le saut de ligne se fait automatiquement pour les textes

Les balises DIV délimitent l'emplacement et les dimensions que pourra utiliser un contenu, se substituant petit à petit aux balises TABLE (les tableaux) moins souples et au code plus compliqué, mais très utiles encore 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 par rapport à l'autre colonne .

J' avais trouvé cette solution dans le blogspot de Rodney Sankinka et elle a l'avantage de pouvoir être embellie par l'apport de CSS. Moi, je faisais trois tableaux, deux pour encadrer les deux contenus et un tableau vide pour faire la séparation. Mais la plupart du temps la solution de Rodney est vraiment la meilleure

Une autre propriété appréciable avec les blocs DIV est celle de pouvoir se comporter comme des calques. Un cas concret:
Vous voulez ajouter un encart publicitaire adsense latéral à gauche de votre page
Un simple <div style=float:left> contenant le javascript google ne suffira pas.
Pour un internaute possédant un écran beaucoup moins large, les blocs DIV auront tendance à se superposer. Et c'est la pub qui couvrira votre contenu.
Il faudra faire<div style="position absolute;float:left">le javascript de google</div>
et ajouter un style=position:relative à ou aux balises DIV entourant le contenu de votre page.




Les balises SPAN


Sont des balises très appréciées des designers

Les balises SPAN créent des lignes, le saut de ligne n'est pas automatique
Il faut utiliser <br> à la fin d'une ligne pour obtenir le saut de ligne ou insérer les blocs SPAN avec width:100% (largeur à 100%) à l'intérieur de balises DIV
Pour créer des espaces entre les mots ou séparer horizontalement deux blocs SPAN utiliser &nbsp;
Pour créer des sauts de ligne ou pour séparer verticalement deux blocs SPAN utiliser <br>

Les balises SPAN <span> ... </span> sont utilisées pour modifier un morceau de texte qui est, la plupart du temps, déjà contenu entre des balises DIV, par exemple changer la couleur du texte:

<span style="color:green;">BLA BLA</span> BLA BLA

qui s'obtient aussi en faisant: <font color=green>BLA BLA</font> BLA BLA

Mais incontournable pour la couleur du texte plus celle de l'arrière-plan:

<span style="background:green;color:white;">:BLA BLA</span>  BLA BLA

Les véritables atouts des balises SPAN se trouvent dans les styles qu'elles peuvent utiliser à travers les feuilles de style.
Mais contrairement à ce qu'affirment plusieurs tutoriels, même sans CSS(feuilles de styles en cascade) les balises SPAN ont déjà du style pour les couleurs en particulier et pour le design en général avec l'attribut STYLE, justement. C'est l'attribut CLASS qui servira principalement dans CSS

Rang 1....
Rang 2..........
Rang 3
Rang 4........

<span style=  "display:  inline  -block"  </span>


Les balises DIV et SPAN sont compatibles avec HTML4 et HTML5

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 cette rubrique c'est de ne traiter que du HTML sans mélanger les genres .

   Liens & ancres

Les balises qui rendent votre blog plus convivial

Une page juste avec du texte serait un peu ennuyeuse nous avons la possibilité d' insérer des fichiers multimédia .

Par exemple nous allons placer des images grâce à:
<img src="chemin/de/l'image.extension"> 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 avec votre navigateur (prévisualisation en local) .
Si l'image n'est pas déjà encore rangée dans le dossier images des fichiers à transférer
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"> .                                                                                                                                                                                                       
Pour que ces images soient vues après sur votre site ce n'est pas aussi simple qu'avec un éditeur WySiWyG, les chemins devront être relatifs car certaines de ces images seront placées en général dans un dossier "images" à l'intérieur du répertoire de votre site (dossier principal contenant tous les fichiers à transférer sur le serveur)
Une fois transférés sur le serveur personne ne pourra aller chercher vos fichiers sur votre disque dur , le chemin absolu ne se fera plus depuis C:\ ou /home mais depuis la racine de votre site sur le serveur de votre hébergeur, nommée parfois /site, /httpdocs ou simplement /
Chemin relatif, chemin absolu , c'est un peu difficile pour un débutant, mais avec de la pratique cela devient automatique
Il faudrait presque y consacrer un paragraphe, mais vous pouvez toujours aller ici pour avoir une idée de la disposition des fichiers prêts à être transférés sur un serveur
             

Les balises de mise en forme

Certaines balises sont dépréciées en HTML5
Et les CSS ont pris une place prépondérante

les balises <i>en italique</i> - En HTML5 elles servent à présent à placer des glyphes ou fontes iconiques
Utiliser le style CSS: font-style:italic

les balises <em>parfois en italique</em> , ne sont pas des balises de mise en forme

les balises B: <b> en gras </b>
Utiliser le style CSS: font-weight:bold

les balises U: __en souligné__ ne semblent pas dépréciées.
Utiliser le style CSS: text-decoration: underline

les balises BLINK:  <blink> clignote</blink> ne font plus rien clignoter

les balises MARQUEE qui font défiler une lettre, un mot, un paragraphe ou une image ne sont pas intéressantes dans un site mobile             

Les balises IFRAME

balise ouvrante<iframe> et balise fermante</iframe>
Avec les fenêtres Popup, ce sont les

    fenêtres magiques du HTML

Petits trucs et suppléments

faire un cadre invisible 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, car de plus en plus on utilise les feuilles de style (CSS) à cet effet
mais c'est la plus simple pour faire un cadre invisible horizontal : img src=".../photo.jpg" hspace="n"  ,
ou 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 !
Mais le mieux est d'aller dans Édition =>Préférences
ou Paramètrage => Préférences (dans Notepad++)                                                                                                                                                                                                                                                                             

Les caractères spéciaux à la langue française

                                                                                                                                                                         
Nos amis vietnamiens peuvent avoir à gérer jusqu'à quatre accents sur une même voyelle. 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&ntilde;a ,il vous faut d'abord placer un metatag dans la partie HEAD
D'abord indiquer le format dans lequel a été éditée la page

Si vous avez édité vos pages en uft-8 :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   

sinon en ISO-8859-1 :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >


et pour la langue française c'est "fr"

<meta http-equiv="content-language" content="fr">

Mais maintenant il suffit juste de mettre juste après le doctype:

lang=fr
c'est bien plus simple grace au HTML5

Au debut vous pouvez eviter les accents, meme si cela fait bizarre autrement ce sera encore plus bizarre une fois transférÃ((c)) sur le ouaibe
mais si vous voulez les lettres accentuées vous pouvez y remédier en transcrivant sur votre éditeur de texte pur code les caractères spéciaux :

ça donne par exemple:

Quelle co&iuml;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 lire :

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 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 .

Je vous recommande vivement Gpick pour Windows ou Linux, dont l'équivalent pour MacOSX est payant, reste Hex Color Picker qui est gratuit .

    Les colorpickers

                                     

avec  <body bgcolor="couleur de fond " puis  text="couleur du texte" vous pourrez échapper au 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 d' ouverture : <body bgcolor="couleur de fond"  text="couleur du texte"  vlink="couleur du lien"  alink="couleur du lien au clic de la souris" >    link="couleur du lien" ne fonctionne plus qu'avec CSS maintenant
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> 

Avec CSS:
<a style="color:nom de la couleur" href="http://machin.com">visitez machin.com</a>

       
Vous pouvez  utiliser un tableau des couleurs
comme celui de DMC
couleurs en HTML et Hexadecimal :


DMC tab

Installer Flowplayer  avec du HTML 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
  • flowplayer-3.1.5.swf
  • .
Il faudra télécharger votre vidéo FLV ce qui n'est pas toujours le plus facile , cela dépendra de la taille de cette vidéo, des capacités de votre client FTP et de la disponibilité du serveur de votre hébergeur .
(c'est une ancienne version de Flowplayer: qui fonctionne bien; à vous de changer les chiffres en fonction de la version que vous voulez installer) La version 3.2.2 par exemple est à oublier

Avant la balise </head>

<script src="flowplayer-3.1.4.min.js"></script>

Dans la partie 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 

<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 Flowplayer Minimal Setup , 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

Si certains internautes cherchent cette ancienne version: télécharger les trois ou quatre fichiers disponibles ci-dessous

Voici les trois fichiers indispensables + un splashscreen


pasadena-flowers.flv


ouvrir un nouveau post forum simple-graphique"


statistiques

who's.amung.us
  Partager


Annonce Google




wubijacq.com Cliquez ici pour vous abonner à ce flux RSS