Formation

Une formation webmaster? YBET informatique en 60 heures dans nos locaux ou par groupes.

Le cours HTML

13.1. FrontPage, débuter

13.2. Les tableaux, mise en page de base

13.3. Insertion d'images et logos

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 feuilles de styles

13.10. Feuilles de styles, les tableaux

13.11. Positionnement de zone en CSS

13.12 Formulaires

Divers

Gestion de stock, facturation
Gérer vos factures, stocks, clients et fournisseurs en 1 tour de main avec CIEL

Cours PowerPoint

YBET: formation PowerPoint en ligne complète

Sur le sujet

Créer son site Internet, avant de débuter, petites explications

Le fonctionnement des moteurs de recherche, comment sont positionnées les page dans les requêtes.

Le référencement, comment positionner ses pages dans les moteurs de recherche.

htaccess, configuration serveurs Apache, restrictions d'accès, redirection, ...

Cours PHP: Dans la même série de formation en ligne, introduction au PHP, gestion de base de donnée MySQL.

5. Front Page: Bases 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. 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 sous FrontPage, cliquez en bas de votre page sur

Le principal intérêt de l'HTML est la possibilité de copier / coller des codes directement de la partie html d'une page vers celle d'une autre page. Ceci est utile notamment pour les 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 html (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, 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.

FORMATIONS	Le MAGASIN YBET	PRODUITS et SERVICES
Formation Internet entreprise	Activités et présentation	Logiciel de gestion
COURS HARDWARE	Rayon d'action	Caisses enregistreuses TEC
Tutorial Access - Cours Excel	Plan d'accès	MATERIEL INFORMATIQUE