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 
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 texte , faire 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é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 à 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.
<p align=center> Je les ai répertoriés dans mon livre:<b><br>Ma voisine et les envahisseurs</b></p>
<p align=center><u>ma photo en souligné</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é
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 : |
| | 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 DIVLes 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
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
|
| | 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></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ñ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ïncidence, j'ai passé les fêtes de Noël du coté français du lac . Où étiez-vous à Genè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 :
|
| | 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
|
| | | | statistiques
who's.amung.us Partager
|
| |
| |
forum simple-graphique"