Notre magasin

Rue Albert 1er, 7

6810 Pin - Chiny

(/fax: 061/32.00.15

FORMATIONS	Le MAGASIN YBET	PRODUITS et SERVICES
COURS HARDWARE	Rayon d'action
Formations YBET	Plan d'accès

YBET informatique

Formation Internet

Le cours HTML

13.1. FrontPage

13.2. Les tableaux, mise en page simplifiée.

13.3. Insertion d'images

13.4. Les paragraphes

13.5 Bases HTML

13.6. Liens hypertextes et signets

13.7. Structure du site, taille des pages

13.8. Extensions FrontPage

13.9. Introduction aux CSS

13.10. CSS , les tableaux

13.11. Positionnement de zone en CSS

13.12 Formulaires

Sur le sujet

Positionner ses pages sur Google, un beau site, c'est bien, un site visité c'est encore mieux.

La mise en ligne d'un site, explications complémentaires, htaccess, ...

5. Bases de programmation en html

1. Différentes parties du codage html - 2. Entête HTM - 3. Paragraphes - 4. Tableaux - 5. Commentaires HTML

Notre formation FrontPage nous a déjà permis de créer quelques pages de notre site Internet. Il nous reste à corriger les défauts de codage HTML. Le but de ce chapitre est simplement d'étudier quelques bases en html, valable pour tous les éditeurs en HTML: pas la programmation complète. Cette partie prépare également au développement PHP - MySQL, la formation suivante (ou même Javascript.)

Pour accéder au format html d'une page WEB, cliquez en bas de votre page sur "HTML"

Le principal intérêt du langage l'HTML est la possibilité de copier / coller des codes directement d'une page vers une autre page Internet. Ceci est utile notamment pour les balises META, si vous souhaitez reprendre plusieurs tableaux d'une page à l'autre, ou même obligatoire si vous souhaitez utiliser des scripts dans vos pages (notamment tous les indicateurs utilisés par les statistiques de visiteurs).

1. Les différentes parties du codage html.

Une page html (ou htm) est constituée de 2 parties distinctes: le header (l'en-tête) et le body (le corps de la page).

Le HEADER regroupe l'en-tête de la page. C'est ici que sont reprises les informations nécessaires aux moteurs de recherche, les balises META, quelques scripts qui doivent démarrer avec la page, ...
Le body constitue le corps de votre page, il contient le contenu de votre page.

Chaque balise doit être refermée. Ces fonctions sont automatiquement crée par FrontPage. Une page Internet est donc codée comme ceci:

<HTML>

<HEAD>
... <TITLE>Titre du document</TITLE>

... autre META
</HEAD>

<BODY>
Contenu du document
</BODY>

</HTML>

Le codage html de la page commence par <HTML>. Vient ensuite l'en-tête encadré par <HEAD> et fermé par </HEAD>. Cette partie comprend notamment <TITLE> .... </TITLE>, le titre de la page que nous avons déjà vus. Le corps du texte est encadré par: <BODY> et</BODY>. Pour terminer, on ferme la page html par </HTML>.

2. L'entête HTML

L'entête, encadré par <HEAD> ... </HEAD>, inclut les META. D'autres parties sont parfois intégrés dans cette partie, notamment des scripts. Un script permet de démarrer certaines fonctions avec la page, notamment des fenêtres pop-up.

Sans rentrer trop à ce stade dans les META, les 3 balises importantes sont:

<Title>Le titre de la page</TITLE>

D'autres peuvent être rajoutées mais ne sont pas réellement nécessaires. Pour la liste des balises-meta dans l'entête d'une page web.

La balise titre (title) s'insère directement par les propriétés de la page dans l'onglet général.

Les autres META s'insèrent par l'onglet personnaliser dans les propriétés de la page.

Conseil: par l'html, il est plus facile de faire un copier / coller de ces balises d'une page à l'autre directement entre les balises <HEAD> et </HEAD>

3. Les paragraphes.

Dans le chapitre précédant, nous avons déjà vu comment modifier les paragraphes directement par la commande du menu Format. Cette solution peut-être assez lourde à utiliser. Une solution est de modifier directement le format du paragraphe par l'html, notamment par du copier / coller d'un paragraphe à l'autre. Je laisse au fan de la programmation html le soin de coder manuellement. Prenons les propriétés du paragraphe suivantes:

Ceci donne en codage html:

<p style="text-indent: 3.45; line-height: 10; word-spacing: 15; margin-left: 0; margin-right: 1; margin-top: 2; margin-bottom: 3" align="center"> texte</p>

3.1. alignement des paragraphes

<p>texte </p>: démarre <p> et ferme </p> un paragraphe

Pour l'alignement des paragraphes:

<p>: par défaut, alignement à gauche

<p align="center">: alignement centré

<p align=right>: alignement à droite

<p align="left">: alignement à gauche, par défaut

Cette partie peut-être directement utilisée par la fenêtre normal de FrontPage.

3.2. Retrait d'un paragraphe.

style="text-indent: 5": 5 est le décalage en pixel pour la première ligne du paragraphe

Vous pouvez directement passer par les propriétés du paragraphe. Néanmoins, il est plus souvent facile de remplacer directement en langage html le <p> par <p style="text-indent: 5">.

Dans FrontPage, si vous utilisez la touche de tabulation pour faire le retrait de la première ligne du paragraphe, le code inséré est <p>    &nbsp ... Le caractère de contrôle &nbsp représente un espace. Repasser dans le codage htlm après avoir remplacé la tabulation par <p "text-indent: 30" et les différents caractères &nbsp par des espaces va faire gagner un temps important de chargement de la page.

Conseil: en html, vous pouvez utiliser la fonction remplacer dans le menu Edition.

<span style="mso-tab-count: 1">    
</span> un autre problème du codage FrontPage. Ces lignes apparaissent principalement lors du copier / coller directement de Word vers FrontPage. Ici aussi, ceci représente une tabulation et peut être remplacé par <p style="text-indent: 30">. Le remplacement de ces codes html peut faire gagner jusque 30% de temps de téléchargement.

3.3. Styles de paragraphes

<p class="MsoNormal"> est souvent présent dans le code html de Front Page. Il peut directement être remplacé par <p>

3.4. Langue du texte

Une autre particularité du codage html de Front Page est de reprendre par partie la langue du texte. En codage html, ceci donne par exemple: <span style="mso-ansi-language: FR">texte</span>. J'ai retrouvé dans certaines parties de codages des mélanges de français, anglais et néerlandais.

3.5. Titre 1, ...

Le codage est de type <h1>texte</h1> pour le style de paragraphes titre 1, ... Vous pouvez combinez les retraits de la même manière que pour un texte normal.

<h1 style="text-indent: 30"> texte </h1> est donc un texte en titre 1 avec un retrait de 30 pixels.

3.6. Remarque

Un codage de type:

<p class="MsoNormal"><span style="mso-ansi-language: FR"><span style="mso-tab-count: 1">    
</span>texte<O:P>
</O:P>
</span></p>

peut complètement être remplacé par <p style="text-indent: 30">texte</p>. Remarquez tout de suite le gain de code pour le temps de téléchargement de votre page.

<O:P></O:P> est lié à des erreurs de link et peuvent tous être supprimés.

4. Les tableaux.

Dans les tableaux, FrontPage pose également quelques problèmes de codage.

Voici le codage du tableau ci-dessus de 2 colonnes pour 3 lignes, largeur 100 %.

<table> débute le tableau. Il est terminé par </table>

<tr> </tr> insère un changement de ligne. Dans chaque ligne, on insère les colonnes par: <td> </td>.

Pour une fusion de 2 colonnes, le codage

est remplacé par <td width="100%" colspan="2">. Colspan="2" signale que la cellule prend en compte 2 colonnes.

Pour un fractionnement de colonne,

est remplacé par

C'est ici que FrontPage va commencer ses bricolages. Principalement si vous mélangez des cellules avec des tailles en % et des tailles en pixels. La seule solution est de revérifier en aperçu la présentation de votre tableau.

<td width="100"> pour une largeur de 100 pixels, <td width="25%"></td> pour une largeur de 25%.

Forcément, si les dimensions de chaque cellules dépassent celle du tableau, le navigateur va adapter les dimensions, et pas forcément de la manière que vous espérez.

5. Commentaires HTML

Vous pouvez insérer des commentaires en html. Cette fonction est principalement utilisée lors de mélanges de commande html - PHP.

Le langage Javascript: bases pour apprendre à programmer en javascript

Les balises dans le header: listes des meta à insérer entre <head> et </head>

<13.4. FrontPage: Mise en page des textes

La suite du tutorial FrontPage > 13.6. Liens hypertextes et signets

Mise en ligne: 06/12/2004.