Blog développement

Non mais sans blog, et pourquoi que vous n'auriez pas votre blog vous aussi? Tout le monde s'y met.
Allez, je vous mets le pied à l'étrier.

BLOG
Pour démarrer
Insertion d'une image
Couleurs
Balises
La navigation
Les tables
Les cadres
Iframe
Editeurs
FTP
Composer
DHTML
Les sites
Actus

BLOG: Contraction de weB LOG (Journal en ligne).

Vous n'avez pas été sans remarquer la multiplication des BLOG sur internet. Alors, pourquoi pas le votre ? Tout simplement parcequ'il y a des sujets qui vous tiennent à coeur et que vous aimeriez partager bien au dela de votre cercle d'amis. Allez-y, bloguez. A moins que vous n'ayez déja un compte twitter ou facebook !

Le BLOG n'est en définitive que le site web d'un particulier comme vous et moi. On l'appelle aussi page perso. L'idée étant le partage, les échanges, la communication, voire aussi l'organisation de son propre mode de navigation sur la toile. Avoir son blog? Pas compliqué du tout. Et je m'adresse ici au parfait néophyte. Vos activités professionnelles autant que vos "hobbies" ont très bien pu vous tenir à distance raisonnable de la programmation et de la chose informatique. Mais est-ce une raison pour vous priver de communiquer sur la toile autrement que par mails, twitter ou facebook...? Attention, ne pas avoir son blog va bientot faire ringard (Mais nannnn! je blogue).

Comment vous y prendre ?

Trouver sur la toile un hébergeur de blogs. Exemple: Créer un blog, voire mème mon hébergeur: 1and1. Bref, des hébergeurs, Il y en a des masses. Cela dit, comptez tout de suite plutot large quant à la place mémoire que l'on vous accorde. Par exemple, 100 Mo (100 mégaoctets), c'est carrément insuffisant quand on a déja bon nombre de photos à mettre en ligne. 300 Mo, c'est limite. Cela pour dire que si vous avez l'intention de construire un blog qui pourrait bien virer site, vous devrez prévoir la solution de l'abonnement et vous faire octroyer 2 Go (Gigaoctets) par exemple.

Deux possibilités alors quant à la création de votre blog, une fois le choix fait:

1 ) Vous en remettre totalement aux modèles de présentations que vous propose votre hébergeur. Vous cliquerez sur quelque chose du genre "Créer son site", "pages perso" ou "Blogs" et Il vous suffira de vous laisser guider. Vous profiterez vraisemblablement d'une aide technique. Vous choisirez un partitionnement type de votre page html et son habillage (Skin..). Vous n'aurez plus qu'à l'alimenter en téléchargeant vos données depuis votre PC (Textes, photos, liens, vidéos (Euh!!! vos vidéos peut-ètre pas. La place que l'on vous accorde risque quand mème d'ètre limitée, disons 50 à 100 Moctets))

2 ) Vous prendre par la main et construire votre site web de A à Z. C'est évidemment la solution que je vous conseille, sachant d'ores et déja que cela va vous bouffer du temps libre et que vous devrez consentir à souscrire un abonnement. Dans tous les cas, disons le tout de suite, il en faut du temps pour développer et maintenir un site, vous aurez très vite des comptes à rendre à madame et aux enfants.

Maintenant, Notez bien votre nom d'utilisateur, le mot de passe et l'adresse précise de votre page (URL). Procédez enfin au référencement de votre site pour vous faire connaitre. Ce n'est pas tout à fait mon cas, moins on me connait, mieux je me porte. Mais j'ai de la famille, des amis, des copains, et les copains de mes copains....

Referencer (Comment référencer efficacement? Vous faire connaitre sur la toile quoi)
Abondance (Toute l'info et l'actu sur les annuaires et moteurs de recherche + une page humour et bien d'autres choses)
Dans tous les cas, veillez à vous mettre en conformité avec la loi "Informatique et libertés".

Pensez enfin à conserver la réplique exacte de votre page ou de votre site sur votre disque dur. C'est bien le moins. Avec des sauvegardes régulières.

Et puis, il n'y a pas qu'internet pour justifier le besoin de maitriser le langage HTML!!

Dans votre entreprise, vos responsabilités vous amènent régulièrement à faire une présentation devant un parterre trié sur le volet. Disposant d'un bon PC et d'un vidéoprojecteur vous choisirez une formule multimédia. Un navigateur vous permettra d'aller aussi loin qu'un "powerpoint" ou un "freelance". Un dossier de pages html et une navigation judicieuse sera du meilleur effet. Avec l'appui des scripts (javascripts), applets java (JAVA), routine PhP et autres CSS, vous aurez toute latitude pour enjoliver, dynamiser, retenir l'attention en exploitant toutes les ressources du navigateur. Présentation des images, mise en valeur du texte, projection de clips vidéos, images animées, sons, liens internes à l'entreprise autant qu'externes etc.....Vous avez la possibilité de mettre en place une construction qui ne devrait pas laisser l'auditoire indifférent.

Pour une présentation de votre entreprise par exemple, vous pourrez gravez des CD et les distribuer à qui de droit.

Et pourquoi pas un diaporama pour les membres de votre famille. Chacun son CD ou sa clé USB. Avec commentaires, musiques, clip vidéo voire liens .....Allez, les idées ne manquent pas. Maitriser les bases du langage HTML et ses accessoires, ça n'est pas forcément pour surfer.

Un premier aperçu en consultant les tutoriaux mis en ligne par l' ENS (Auteurs : Marie-Lan Nguyen (HTML), Baptiste Mélès (XHTML). Dernière modification : 17 juillet 2007) C'est NORMALE SUP, rue d'Ulm en toute modestie.....

Votre page WEB, la maintenant...

Voyez déja ce que pourrait donner un embryon de page html sur votre PC, la, maintenant.

Construire un site WEB consiste essentiellement à écrire un certain nombre de fichiers texte dans un langage approprié, ici le langage dit HTML. HTML pour (Hyper Text Markup Language). Dresser un fichier texte se fait à l'aide d'un éditeur. Pour ce premier essai, vous choisirez l'éditeur le plus ordinaire possible sur votre PC. Pour ne pas vous compliquer l'existence, notamment dans les attachements d'extensions, éviter WordPad. Ouvrez plutot "bloc-notes". Vous en ferez votre "blog-notes" (Ah je n'ai pas pu l'éviter celle-la !!!). Il va s'agir maintenant de dresser une liste de directives à l'adresse d'un navigateur (Browser). Vous en avez forcément un sur votre PC comme Internet Explorer par exemple.Une façon de préciser les modalités de mise en page et de navigation dans le document que vous comptez mettre en ligne sur la toile (WEB).

Alors, allons y:
Deux lignes de texte

- Créez un répertoire de nom tartenpion ou disons "EssaiHTML" et ce ou bon vous semble dans l'arborescence de votre disque C. Pas vraiment nécessaire d'aller le loger au quatorzième sous-sol.
- Lancez Bloc-Notes

- Taper les deux lignes ci-dessous:

<html>
</html>

Vous venez de placer les délimiteurs de votre page html. Les écritures html procèdent en effet du principe de l'encapsulation.
Le programme doit se retrouver enfermé entre ces deux marqueurs, dits encore (tags) ou balises. La balise <html> marque le début du programme. </html> ferme le programme (/ = fin). On dit encore de ces balises que ce sont des conteneurs. C'est parfaitement imagé.
Maintenant, un programme html sera systématiquement constitué de deux parties. L'entète (head) encapsulé entre les balises <head> et </head>. et le corps (body) délimité par <body> et </body>. Aussi bien, vous réservez tout de suite ces deux blocs en insérant ces réservations entre les deux balises html. Ce qui donne à peu près ceci:

<html>
<head>
</head>
<body>
</body>
</html>

Un exemple avec insertion de deux nouveaux conteneurs dans l'entète head:

<HTML>
  <HEAD>
    <TITLE>--------</TITLE>
    <SCRIPT>--------</SCRIPT>
  </HEAD>
  <body>
  </body>
</html>

Dans l'entète (Head), vous pourrez fournir plus tard un certain nombre d'indications, de paramètres voire mème des courtes routines en langage javascript (<script>...... </script>), ou des consignes CSS (on en cause plus loin...).
C'est dans le corps (body) du programme que vous vous adresserez au navigateur (browser).

Insérez un texte quelconque avec une demande de passage à la ligne signifiée par la balise ouverte <br>. Ouverte, en l'occurence, parceque pas de balise de fermeture. Mais vous pourrez aussi saisir <br /> C'est une balise qui se suffit à elle-mème. Ce qui donne:

        <html>
        <head>
        </head>
        <body>
        Un peu de texte<br>
        Avec passage à la ligne
        </body>
        </html>

1) Sauvegardez votre fichier dans le répertoire EssaiHTML.

- Faites un "enregister sous" en sélectionnant le type "tous les fichiers" Donnez le nom de votre choix et ce sera forcément "Toto" comme dab (Foo pour un américain).
- Accompagnez toto de l'extension.html ou htm. Soit: Toto.html.
- D'avoir utilisé bloc-notes avec le type tous les fichiers vous autorise en effet à rajouter l'extension de votre choix (.html, .htm, .txt, .css, .js, etc....).

Par exemple, les trois fichiers ci-après, ont été créés en ouvrant Bloc-notes une seule fois. J'ai fait chaque fois "nouveau" et j'ai différencié, en fonction de leur destination, par les extensions.

2) Quittez bloc-notes
3) Dans le répertoire EssaiHTML, mais seulement si vous n'ètes pas passé par le type "tous les fichiers", faites de votre fichier Toto.txt ---> un fichier de nom Toto.html.
Vous remplacez l'extension ".txt" par l'extension ".html" (ou .htm). Ne pas préter attention au court message de rappel en acceptant.

4) Un double click sur ce dernier et c'est parti. Si ce n'est pas parti, un click droit et sélectionner le navigateur (Internet explorer par exemple)

Insertion d'une image.

Vous voulez maintenant y voir apparaitre la photo de votre teckel ou celle de votre coupé grand tourisme ou votre énooorrrme 4x4 qui fait peur à tout le monde et dont les pneus ont déja été dégonflés deux ou trois fois. Vous avez inévitablement dans votre ordinateur une photo ou une image que j'appellerai snap pour faire court et dont le fichier descriptif peut avoir pour nom: snap.BMP, snap.GIF, snap.JPG, snap.xxx etc ......

Copiez ce fichier dans le répertoire EssaiHTML.
Reprenez votre programme Toto.html en édition (Un click droit sur toto.HTML et vous choisissez bloc-notes). Insérer la demande de visualisation de l'image snap.JPG. Vous déclarer l'image dans la balise <img> annonçant que ce qui va suivre est une image. Son nom et sa localisation (Source) dans src="xxxxx". L'écriture se complète alors sous la forme:

        <html>
        <head>
        </head>
        <body>
        Un peu de texte<br>
        Avec passage à la ligne<br>
        <img src="snap.JPG">
        </body>
        </html>

N'oubliez pas le deuxième passage à la ligne <br> (break) pour que votre image apparaisse bien sous le texte.
- Sauvegardez.
- Double click pour juger de l'effet.

Oh la belle image!!!. Seulement, elle serait certainement mieux mise en valeur si le fond de l'écran (background - bg) était de couleur noire. Précisons cette demande dans le programme. Puisque c'est tout le corps (body) qui doit ètre de fond noir, cet attribut de coloration de l'arrière plan sera précisée dans la balise body. Soit:

- Sauvegarde
- Relance de toto.html.

Ah cette fois ca a de la gueule. Mais pas d'bol, le texte a disparu. Bien sur, noir sur noir !!!!!, d'après vous? Il vous faut des caractères (Font) de couleur blanche. Retour dans l'éditeur et vous écrivez pour terminer l'exercice ici:

        <html>
        <head>
        </head>
        <body bgcolor="#000000">
        <font color="#FFFFFF">
        Un peu de texte<br>
        Avec passage à la ligne<br>
        </font>
        <center><img src="snap.JPG" width="1234" height="567"></center>
        </body>
        </html>

Commentaires:
1)...Cette fois c'est la balise <font> que vous complétez par un attribut de couleur (color).
2)...Vous en avez profité pour centrer l'image (<center> </center>)
3)...Vous donnez aussi les dimensions de votre image. Largeur, hauteur (width=" " height=" "). Ne s'impose pas vraiment.
Vous avez obtenu ces dimensions en promenant la souris sur votre image dans le répertoire EssaiHTML.

Vous voulez mantenant que le texte apparaisse sur la droite de votre image. Vous adjoindrez un attribut d'alignement (align=) à votre image et vous déclarez cette image en premier en attachant un alignement à gauche (left). Vous supprimez les center Soit:

        <html>
        <head>
        </head>
        <body bgcolor="#000000">
        <img src="snap.JPG" width="1234" height="567 align="left">
        <font color="#FFFFFF">
        Ma maison<br>
        sous la neige<br>
        </font>
        </body>
        </html>

J'arrète ici cette introduction au langage HTML en espérant que vous avez saisi le principe de base. Ci-après, j'essaie de détailler certains aspects du langage.

Quelques codages de couleurs:

Toute couleur résulte d'un mélange subtil de trois couleurs de base: le rouge, le vert et le bleu (Le R.V.B) ou en Anglo Saxon le RGB (Red Green Blue). Chacune de ces trois couleurs sera graduée de 0 à 255. On réserve donc à chacune des couleurs de base deux chiffres hexadécimaux soit Pour une couleur donnée, 8 bits ou 2 x hexadécimaux (0, 1, 2,....9, A, B,...F).

Ainsi, le noir a pour valeur RVB 0 0 0 (00 00 00) et le blanc, la combinaison 255 255 255 (FF FF FF). Entre ces deux extrêmes, toutes les nuances sont permises...

Blanc (white) =	FFFFFF
Noir (black) =	000000
Bleu (blue) =	0000FF
Vert (green) =	00FF00
Cyan (cyan) =	00FFFF
Gris (gray) =	808080
Gris foncé (darkGray) =	404040
Gris clair (lightGray) =	C0C0C0
Magenta (magenta) =	FF00FF
Jaune (yellow) =	FFFF00
Orange (orange) =	FFC800
Rose (pink) =	FFAFAF
Rouge (red) =	FF0000

Notez le codage du bleu puis celui du rouge et enfin celui du vert. La table ci-dessus a une couleur d'arrière plan (bgcolor) codée: ECE9D8
Il m'a fallu écrire: <table bgcolor="#ECE9D8"> (bg pour background)

Vous pourrez tout aussi bien rappeler directement le nom de la couleur (En italiques dans le tableau ci-dessus). Pourvu que ça le soit dans la langue de Shakespeare.
Ci-aprés, un tableau proposé par Bod STEIN au W3C:

Un site pour générer automatiquement votre code de couleur

Eh bien, ça y est, c'est parti. Vous n'allez pas cesser d'enrichir votre page. Contacter votre FAI (Fournisseur d'Accés à Internet) pour qu'il vous ouvre un compte.

Quelques balises encapsulant les textes:

<u>....</u>  (Underline) caractères soulignés
<b>....</b>  (bold) Caractères en gras.
<i>.....</i>  En italique
<ul>....</ul>  Délimitations d'une suite de type LISTE à puces avec retrait.
<ul type="square">....</ul>  Puces de formes carrées.
<li>....</li>  Délimitation d'un élément d'une liste (La présentation du tableau des couleurs ci-dessus est une liste)

Mise en valeur des TITRES avec:
<Hn>Le titre</Hn>  H pour Headlines (Tète de ligne)
n compris entre 1 et 6: Six tailles de caractères, allant donc de H1 à H6. Plus n est petit, plus la taille est grande (Vas comprendre charles!). Exemple:

Si j'écris ceci:

<h1>Le Google Bombing</h1>
<h2>Mais qu'est-ce ?</h2>
<h3>N'était possible que grâce au mode d'indexation particulier</h3>
<h4>du moteur de recherche Google.</h4>
<h5>lié au principe de calcul de la popularité d'un site qu'effectue Google.</h5>

J'obtiens cela:

Le Google Bombing

Mais qu'est-ce ?

N'était possible que grâce au mode d'indexation particulier

du moteur de recherche Google.

lié au principe de calcul de la popularité d'un site qu'effectue Google.

<blockquote>....</blockquote>  Affichage du texte en retrait. J'ai usé d'un blockquote dans l'affichage ci-dessus.

<P>......</P> Equivaut à un <br> suivi d'une ligne vide en entrée du paragraphe.
On peut se dispenser de la fermeture /p.

Alignements:
<P align="right">....</P>  Alignement à droite (Autres attributs: left, center, justify,..)
Dans ces cas on a évidemment besoin de la fermeture.

<HR>.   <HR> comme <br> est une balise ouverte. Elle insère une ligne horizontale de séparation. Exemple:
<HR width=70% color="#FF000">     (70% en largeur d'écran et tracé de couleur rouge).
Pour le tracé de la ligne ci-aprés, j'ai simplement écrit:    <hr color="#ff0000">

La navigation (Les liens)
Par navigation comprenons les possibilités ci-après:

Se déplacer dans le propre document que l'internaute vient d'ouvrir
Ouvrir d'autres pages html logées dans la méme arborescence que la page consultée. Que cette arborescence soit sur votre PC ou sur le serveur.
Consulter les autres sites disséminés sur la toile à travers la planète.

Dans tous les cas, la balise a mettre en oeuvre pour mettre un lien en place sera la balise <a>. Ecriture de la forme:

<a href="adresse url">objet</a>

Entre les guillemets on précise les coordonnées exactes du site, de la section, ou de la page à consulter (L'adresse quoi. C'est l'URL). Quant à l'objet, ce pourra ètre, entre autres, du texte ou une image. Il s'agit surtout de mentionner la ce qui sera survolé par la souris pour proposer le déplacement, lequel sera effectif que sur un click de l'internaute. Ce click est classé évènement, donc susceptible de déclencher une action. Objet peut ètre un texte, une image,...

1) Déplacement à l'intérieur mème du document que l'on consulte.
Se rendre à un endroit particulier du document que l'on a sous les yeux oblige à donner un nom (name) à l'endroit précis concerné. On le fera par l'intermédiare de la balise <a> sous la forme: <a name="ici"></a>
A l'endroit ou on propose le déplacement, on écrira:

<a href="#ici"></a>

Le "#" rappelle que l'on reste dans la page que l'on vient d'ouvrir.

Un exemple est donné dans la page que vous consultez. Au tout début de ce document, il est proposé une navigation. Il est mème proposé de revenir directement en début de page en cliquant justement sur un bouton que l'on découvre par endroits complétement sur la droite de la page. Il m'a fallu écrire en chaque point:

Notez quelques attributs attachés à l'image (img):
border=0:        Pas de bordure pour cette image
alt="Début":    Message associé.
align="right":   Aligner l'image complètement à droite.

2) Ouverture d'une page HTML placée ailleurs sur le mème site:
Il suffit de préciser le chemin d'accés au nouveau document. Exemple:

<a href="MesPhotos/Portugal/Faro.html">Mes photos à FARO</a>
Ou encore:
<a href="Surf/MesLiens.html">Mes liens</a>

Dans le répertoire "Surf" vous y avez écrit un html du nom de MesLiens.html.
Vous pourrez, dans ce fichier, organiser votre propre mode de navigation en privilégiant entre autres les sites que vous ètes amené à visiter régulièrement.

3) Visite d'un site:
Dans ce cas, on mentionne précisément l'URL du site. Soit:

<a href="http://www.chez.tartenpion.volga.html">La Volga</a>

Si vous voulez que la page appelée s'ouvre dans une nouvelle fenètre, vous insérez parmi les attributs de la balise <a>, l'attribut (target="_blank"), soit:

<a href="http://www.chez.tartenpion.volga.html" target="_blank"> La Volga</a>

Ouvrir une page appelée dans une nouvelle fenètre peut s'avérer relativement pratique. Cela permet de ne pas fermer la page précédente à laquelle l'internaute revient en fermant simplement la nouvelle fenètre.

A propos de liens:
On vous demandait, dans le temps de la préhistoire du WEB, d'évitez de pointer sur une page en particulier au troisième sous-sol de l'arborescence d'un site. Il vous était suggéré de rappeler plutot l'adresse de la page d'accueil du site (URL ou Uniform Resource Locator). Quitte à signaler quel devra ètre, à partir de la, le chemin à suivre pour atteindre la page qui doit intéresser en particulier (Déontologie internet ou netétiquette). Mais les temps ont bien changé depuis. Les différentes pages d'un méme site sont conçues de telle manière que serez réorienté facilement sur la page d'accueil du site.

Ci-après, tout à fait à droite, le bouton de navigation renvoyant en début de page. et pour lequel j'ai écrit:

Suivi de: <hr color="red">

Le "case sensitive"

Windows XP ou Vista ne font pas de distinction entre caractères majuscules et minuscules. snap.JPG ou snap.jpg désigne pour lui la méme photo. Il n'en va pas forcément de mème du coté de votre serveur préféré. Pour peu que son système soit sous système d'exploitation UNIX par exemple (Et il y a de fortes chances pour qu'il en soit ainsi), il y aura parfaite distinction entre majuscules et minuscules. Nous dirons que UNIX est case sensitive. Prenez donc tout de suite la bonne habitude de préter attention aux "case" de vos caractères et tout particulièrement s'agissant des extensions. bidule.htm et bidule.HTM, pas pareil du tout pour UNIX.

Consultation du code source.

Sur la toile, le programme (On dit aussi le code source) de la page que l'internaute est en train de consulter est accessible. Les internautes ne se privent pas d'aller voir un peu comment les autres s'y prennent dans leur programmation. Eh bien voyez déja quel est le programme de la page que vous ètes en train de consulter. Pour cela:

Dans le haut de votre navigateur, ouvrir la rubrique "Affichage" ou "page". Choisir "Source" ou "Afficher la source", cliquez.
Vous l'avez sous les yeux ce programme. Bon, ça fait un peu fouilli. Mais on finit tout de mème par y retrouver ses petits. J'y ai notamment inséré des lignes de commentaires sous la forme:


 Délimitations de la ligne de commentaire.

Pour délimiter plusieurs lignes de commentaires on écrira:
<!-- Ligne 1
Ligne 2
Commentaire de la ligne 3
etc.....avec passages à la ligne
//-->

Les tables

La maitrise de la mise en page des différentes données dans une page HTML passe le plus souvent par l'utilisation de tableaux ou tables <TABLE>.
Une table sera encapsulée entre les délimiteurs <TABLE> </TABLE>.

Une table sera constituée d'une suite de rangées (row). Chaque rangée étant délimitée par les balises <TR>....</TR> (Table row). Enfin, toute rangée contiendra des données (data).Chaque donnée est délimitée par les balises <TD>...</TD> (Table Data). Ainsi, une table pourra présenter une strucure pouvant s'apparenter à l'écriture ci-aprés:

Une donnée peut ètre du texte, des images, voire mème à nouveau une table.
Ainsi, si je veux gérer deux tables contigues, j'écrirai:

     <TABLE>
     <TR>
     <TD>
     <TABLE>table 1</TABLE></TD>
     <TD>
     <TABLE>table 2</TABLE></TD>
     </TR>
     </TABLE>

Soit une configuration dans la page s'apparentant à la représentation ci-dessus

Attributs

Tables (<TABLE>), table rows (<TR>), et table data (<TD>) peuvent se voir précisés des attributs.

Exemples:
- Largeur exigée de la table par rapport à la largeur de l'écran <TABLE   width="70%">.
- Couleur du fond de la rangée pour une rangée <TR   bgcolor="#FF0000">
- Positionnement de la donnée pour une data  (A droite, au milieu, à gauche, dans la zone réservé à la donnée) <TD   align="left">.
- etc.....

Vous vous apercevrez trés vite que les agencements par les tables vont s'avérer particulièrement pratiques. Leurs utilisations se retrouvent dans pour ainsi dire tous les programmes HTML. Vous obtiendrez des mises en page réussies sans efforts notables grace à la grande souplesse de la fonction <table>. Celle-ci fait preuve d'une grande tolérance aux manques de directives, voire aux oublis. La fonction <table> procède en effet , entre autres, par ajustements automatiques.
Voyez la présentation ci-aprés, et le code qui a servi à sa génération aussitot en-dessous.

Texte	Texte avec Passage à la ligne
Texte

<center>
<table border=1>
<tr><td>Texte</td><td>Texte avec<br>Passage<br>à la ligne</td><td></td></tr>
<tr><td>Texte</td><td> </td></tr>
<tr><td> </td><td><img src="LesJPEG/Boules.jpg"</td></tr>
</table>
</center>

Vous avez noté que la table présentée était constituée de trois colonnes, la troisième étant vide. Retrouvez dans l'écriture ci-dessus la traçe de cette troisième colonne.

Les cadres (FRAMES)
Les "frames" servent entre autres à organiser une page HTML. Les cadres délimitent dans la fenètre qui s'ouvre différentes zones, chaque zone étant destinée à afficher une page HTML en particulier.

La page d'accueil de ce site est constituée de trois cadres:

1) Le cadre de gauche, en forme de colonne.
2) Le cadre du haut formant comme un bandeau.
3) Le cadre principal prenant la plus grande place à l'écran.
On annonce une organisation en cadres par la balise <frameset>. C'est la déclaration d'un ensemble de cadres. La terminaison de l'énumération des cadres se fera par la balise de fermeture </frameset>
Première recommandation: A chaque déclaration d'un cadre, lui donnez un nom (name="").

<frameset   cols="30%,*">
   <frame    name="cadre1"    src="toto.html">
   <frame    name="bandeau"    src="titi.html">
   <frame    name="principal"    src="foo.html">
</frameset>

Pour ouvrir une page .html dans un cadre donné. Il suffit de désigner le cadre (Target)

<a href="texte.html" target="bandeau">Commentaire</a>

Ici, texte.html apparaitra dans le cadre de nom "bandeau". Par ailleurs, si je veux que texte.html s'affiche dans une nouvelle fenètre du navigatuer, j'écris:

<a href="texte.html" target="_blank">Commentaire</a>

<noframe>
</noframe>
Certains navigateurs ne gèrent pas les cadres. Ils ne tiendront compte que de ce que vous aurez encapsulé entre les balises <noframe> </noframe>. Vous pourrez toujours insérer quelque chose du genre "C'est regrettable, mais votre navigateur refuse les cadres. Je suggère que vous vous rabatiez sur repechage.html". Vous orientez alors l'internaute sur une page ne faisant pas appel aux cadres".

Polémique.
Pour la raison précédente, il est souvent conseillé d'éviter l'utilisation de cadres. Il faut aussi ajouter, et c'est mon ami Daniel qui me le rappelle, qu'un bon référencement s'accomode mal des cadres. Vous pourrez toujours proposer une page d'accueil sans cadres et les utiliser dans les pages appelées.

L'alternative aux cadres : L'IFRAME
Un IFRAME est une fenêtre avec ou sans scrolling (ascenseur) qui peut être insérée n'importe ou dans une page Web. Il est déclaré dans le corps du fichier html soit entre les balises <body> et </body>, et à l'endroit ou vous voulez le voir apparaitre .

Exemple de déclaration d'un iframe :
<IFRAME src="page.htm" width="50" height="40" name="Page N°2"></IFRAME>

Interprétation:
Iframe affichant la page de nom "page.htm" de largeur=50 pixels , de hauteur=40 pixels et de nom: Page N°2
Cette balise peut se placer dans une cellule de tableau, voire même deux cellules l'une à côté de l'autre ou l'une en dessous de l'autre.
Si selon votre page qui doit s'afficher dans l'autre page html, et que celle ci est plus longue que en hauteur de ce que vous avez défini vous pouvez ajouter l'élément scrolling="yes". Ce qui donne le code :

<IFRAME frameborder="1" src="page.htm" scrolling="yes" width="50" height="50"></IFRAME>
Vous pouvez à partir d'une page ou vous avez inséré une IFRAME, créer un lien texte ou avec une image vers une page qui s'affichera dans cette IFRAME, pour cela, vous devez donner un nom à l'IFRAME. Voici le code source avec l'IFRAME nommée.

<IFRAME Border="0" SRC="index.htm" NAME="cadre1" WIDTH="650" HEIGHT="1200"></IFRAME>

Voici maintenant le code du lien vers cet IFRAME:

<img src="images/flecheverte.gif" width="13" height="13" border="0">
<a href="optimisation.htm" target="cadre1">Optimisation</a>

Les attributs de la balise IFRAME

name="..." : nom du cadre
src="..." :     source à afficher dans le cadre
height="..." : hauteur du cadre
width="..." :  largeur du cadre
frameborder="..." : active/désactive une bordure (0,1)
marginwidth="..." : définit l'espacement horizontal dans le cadre entre la bordure et le contenu
marginheight="..." :définit l'espacement vertical dans le cadre entre la bordure et le contenu
scrolling="..." :      détermine la présence d'une barre de défilement (auto, yes, no )
align="..." :           détermine l'alignement ( left, center, right, justify )

Vol Orly Paris - Ivato Antananarivo

DHTML (fonctionnalités complémentaires, pour dynamiser votre site):
Agrémenter un site, le rendre plus attractif, distraire le visiteur, retenir son attention, c'est recourir à l'écriture de petits scripts ou à la définition de feuilles de style (CSS) qui contribuent à dynamiser vos pages HTML. D'ou la désignation DynamicHTML pour DHTML. Ces langages sont une extension aux possibilités du langage HTML lui-mème et s'intègrent parfaitement. Citons:

Javascript

Netscape a très tot proposé le langage Javascript pour l'écriture de scripts associés aux programmes HTML. Ces scripts peuvent ètre directement intégrés aux fichiers HTML comme consignés aux cotés de ces derniers. On ne fera pas de confusion entre javascript et le langage autrement plus élaboré JAVA développé chez SUN. Javascript est en fait un tout petit subset extrait du langage JAVA, mais qui suffit à dire que c'est un langage tout de mème orienté objet comme son grand frère. On trouvera dans la rubrique "Les sites" les liens utiles.

CSS (Cascading Style Sheets) ou Feuilles de style

CSS est une fonctionnalité complémentaire à HTML. Les feuilles de style contribuent à enrichir les propriétés et attributs des balises HTML. Au tout début de la page html que vous parcourez en ce moment il est fait appel à une feuille de style pour agrémenter la présentation des liens de la navigation dans cette page. Si vous demandez à lire le programme source de cette page vous verrez que tout comme javascript il est possible de consigner le fichier CSS à coté du programme et de simplement faire appel à partir du HTML. (Faire: Affichage + source) pour remarquer l'appel sous forme d'un lien (LINK) dans l'entète soit entre les balises <head> et </head>. Quant à l'écriture du lien.CSS lui-mème, le voici:

<style type="text/css">
       
       </style>

Il est précisé ici qu'il s'agit d'une feuille de style et de type css. Les directives concernent la balise <h1> et ces spécifications sont au nombre de 2. La première définit la taille (size) des caractères (font-size) la deuxième la couleur (color). Chaque spécification se compose d'une désignation suivie d'un ou plusieurs paramètres. Désignation et paramètres seront séparés par deux points ( : ). La terminaison d'une spécification se fera par un "point virgule" (;) à l'instar de n'importe quelle suite d'instructions dans divers langages (HDL).

Autre exemple de présentation sur fond de couleur.
Pour une déclaration dans l'entète sous la forme:

Un arrière plan de couleur
pour une division,
on écrira:

L'e commerce

Un arrière plan de couleur pour une suite de mots, on écrira: Suite de mots

<style type="text/css">
       
       </style>

Editeurs HTML
Gérer un site WEB consiste entre autres à vous adresser à un navigateur (Netscape, Internet Explorer,....) par l'intermédiaire d'un fichier texte. Vous le ferez dans un langage approprié, le langage HTML (Hyper Text Markup Language). Vous dressez ce fichier texte à l'aide d'un éditeur.

S'agissant maintenant de taper du code HTML (Lignes de programme dans le langage HTML) tout en disposant d'une aide en ligne dans votre frappe. Il sera pratique d'avoir recours à un éditeur HTML. On travaille alors dans un environnement plus confortable. Citons:

1) Celui de NETSCAPE (Composer) de type WYSIWYG ou (What You See Is What You Get). Vous avez directement sous les yeux la page html telle qu'elle s'affichera pour le visiteur ultèrieur (Ce que vous obtenez est ce que vous voyez).

2) Sur le mème principe WYSIWYG, vous aurez "Dreamweaver". Fut une référence en son temps s'agissant de création de sites Web.

3) Allez, un petit cadeau maintenant. Il vous est offert par Pierre Fontaine et Pierre-Emmanuel Muller sous la forme d'un
"PETIT MANUEL DE CREATION ET DE GESTION D'UN SITE WEB". Ici

4) Htmledit
Editeur HTML très pratique et pas cher du tout que l'on doit à Nicolas PAYART. En fait, c'est celui que j'utilise. C'est souvent avec les outils rustiques que l'on réussi les meilleurs oeuvres ouafff!!. Si je devais comparer avec les outils de développement des chips électroniques, je dirais qu'avec Htmledit vous ètes dans le full-custom. C'est à dire que vous laissez peu d'initiative à l'outil, mais qu'il fait bien ce que vous lui demandez de faire. Vous ciselez votre réalisation. La contre-partie étant évidemment que cela prend du temps et encore...La dernière version (Janvier 2008) est super. Avec htmledit vous disposerez aussi d'un client ftp (Client: Programme disponible en local...) (Voir ci-aprés).

5) Un CD: Votre site web light Pas cher. Dans n'importe quelle grande surface.

6) WORD. Eh voui! Votre éditeur WORD a une sortie HTML. Par contre, WORD s'entoure d'un tas de précautions et le code qui en résulte est une véritable usine à gaz. A éviter.

Les éditeurs sophistiqués et orientés DHTML (Dynamic HTML):

7) L'éditeur de Microsoft: FRONTPAGE 2OOO
8) Webexpert
9) Etc .....

Téléchargement
Aprés avoir mis au point vos pages html et les avoir débuguées, il vous faut les télécharger sur le serveur qui doit héberger votre site. Vous aurez recours à un programme dit de téléchargement. On l'appelle un "client FTP". Le client, c'est vous. Pour dire aussi que c'est un programme qui va s'éxécuter sur votre machine (FTP mis pour: File Transfert Protocol).

Un premier outil ftp: SmartFTP qui est trés bien. Mais s'agissant d'un freeware absolu, FileZilla, crée par l'allemand Tim Kosse, me parait incontournable. It's the best...

Il vous faudra fournir certaines indications au programme FTP comme:
- L'identifiant du serveur. Le host ou l'hote.
- Le nom utilisateur
- Le mot de passe
- Le numéro du port de communication (Souvent 21)
Ce qui donne à peu prés ceci comme réglages pour filezilla:

Cela dit, si vous vous équipez de l'éditeur html "HTMLEDIT", vous disposerez aussi d'un client ftp.

PhP (Personnal Home Page tools)

PhP se distingue déja de son langage concurent javascript en ce qu'il est éxécuté coté serveur. En effet, lorsque vous ouvrez une page HTML, tous les .js et .css attachés à cette page accompagnent le fichier html pour ètre éxécuté sur votre machine. Ce ne sera pas le cas des .php.
C'est en 1996 qu'un étudiant suédois du nom de Rasmus LERDORF crée le langage PHP. Vous trouverez un bon tutorial en suivantphp sur son site.
Php réalise les pages coté serveur. Il est orienté gestion base de données associée à MySQL. Ce sont les résultats qui sont envoyés au logiciel du visiteur.

ASP ()
ASP est le langage concurrent a PhP proposé par Microsoft.

Pour rester dans l'ambiance blog:
Si vous avez ri en lisant "Le BLOG de MAX", vous rirez en lisant "Un AMOUR de CONNASSE"
de Sonia MULLER (Editions FAYOT). A paraitre le 1° Sep 2006.

Un bouquin pour maitriser le BLOG:
"CREER VOTRE BLOG....C'est si facile" 11€40