Créer une page HTML rapidement

Je n'aborderais pas la prise en main du Html, d'autre l'on fait, et bien, mais comment faire une page rapidement.

Pour les titres, mettre les mots en couleur ... si vous avez un éditeur orienté paramétrage ou programmation, avec la possibilité de créer des raccourcis serait un plus.

Pour ma part, j'utilise AceHTML 5 Freeware (http://www.visicommedia.com), version américaine de WebExpert (site http://www.visic.com). La version freeware est légèrement bridée mais, personnellement, çà suffit amplement pour un site privé (malheureusement les barres d'outils personnalisée sont réservées à la version enregistrée). Si vous avez des problèmes avec la version anglaise, récupérez WebExpert en version d'essai, le temps de vous familiariser avec (cette version comprend une l'aide détaillée en français).

Il existe aussi Nvu qui lui est gratuit.

Structure générale

Fichier de style

Le corps de la page

Tableau de liens

Les mots en couleur

La structure générale

<html>
<!-- Date de création: 22/12/2002 -->
<meta http-equiv="Content-Type" 
	content="text/html; charset=iso-8859-1">
<title>titre_barre_navigateur</title>
<meta name="description" 
	content="description_page">
<meta name="keywords" 
	content="mots_clés_page">
<meta name="author" 
	content="auteur">
<Link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>
<a name="debut"></a>
...
...
...
</body>
</html>

Faire un copier-coller de ce qui est ci-contre, puis modifier :

la date, en gardant la même structure.
titre_barre. Titre apparaîtra sur la barre du navigateur en haut (barre bleu pour Internet Explorer).
description_page, çà sert pour vous et les moteurs de recherche.
mots_clés_page, séparés par une virgule, en minuscule, sans accents. C'est également pour les moteurs de recherche mais aussi si vous voulez faire votre propre moteur pour vos pages.
auteur : votre nom ou celui de votre entreprise.
les ... sont votre page.

Fichier de style

Vous le créez une fois pour toutes et ne le modifierez que rarement.

A quoi çà sert ?

Il permet de modifier et normaliser vos pages (titre, police, couleurs...). Car pour changer de couleur (fond & police), de police ... vous ne serez pas obligé de modifier toutes vos pages, mais seulement ce fichier.

@charset "iso-8859-1";

/* Fond écran type (police : 
	Arial, Verdana, Helvetica, "Times New Roman") */
body { background-color: #FFCC99; 
	font-family: Arial; font-size:11pt}

/* Couleur prédéfinie (blue, white, silver, gray, black)*/
.bleu  {color:#3366CC}
.rouge {color : red}
.vert  {color : green}

/* Les titres */
H1 {text-align:center; FONT-WEIGHT: bold; 
	FONT-SIZE: 250%; COLOR: #007bce; 
	FONT-FAMILY: Arial, Verdana}
H2 {FONT-SIZE: 180%; COLOR: #0066cc; 
	FONT-FAMILY: Arial, Verdana, Helvetica}
H3 {FONT-SIZE: 120%; COLOR: #0066cc ; 
	FONT-FAMILY: Arial, Verdana, Helvetica}
H4 {FONT-WEIGHT: bold; FONT-SIZE: 100%; COLOR: #0066cc; 
	FONT-FAMILY: Verdana, Arial, Helvetica}
H5 {FONT-WEIGHT: bold; FONT-SIZE: xx-small; COLOR: #007bce; 
	FONT-FAMILY: Verdana, Arial, Helvetica}
H6 {FONT-WEIGHT: bold; FONT-SIZE: xx-small; COLOR: #555555; 
	FONT-FAMILY: Verdana, Arial, Helvetica}

Faites un copier-coller des lignes ci-dessous, modifiez les couleurs, police, taille police. Sauvegardez sous style.css.

Ce fichier devra être sur la racine principale de votre site ou sur le répertoire juste au-dessus (sinon changez le chemin). Pour les tests en local, mettez-le dans le répertoire juste au-dessus.

Comment çà marche

les commentaires sont entre /* */
les couleurs en clair (ex:red, green, yellow...) ou en hexa, précédées de # (ex:#FFCC99, #007bce ...)
les noms de police en clair mais s'il y a plusieurs mots mettre entre des " (ex : "Times New Roman")
la taille de la police, un nombre ou un pourcentage de la taille de base (dans notre cas, celle indiqué dans body).

je n'ai rien compris aux couleurs hexa

Elles sont définie par une combinaison de Rouge, de Vert et de Bleu (dans cet ordre). D'où le nom de couleur RVB.

Chaque couleur est définie par un nombre en hexadécimal (de 00 à FF, soit 0 à 255 en décimal).

Comment faire pour trouver une couleur

Il faut d'abord trouver ces couleurs de base définissant celle que vous voulez employer. Vous pouvez utiliser Word (couleur police, autre couleur) ou Paint Shop Pro (dans la palette) par exemple.

Mais elles sont généralement en décimal. Il faut donc les convertir en hexadécimal. Pour cela, lancez la calculatrice (dans Démarrer/Accessoires/Calculatrice) en mode scientifique (affichage/scientifique). Tapez chaque chiffre, puis cliquez sur Hex (cliquez sur Dec pour revenir en décimal).

Le corps de la page

Les titres

<h2>Le corps de la page</h2>
<h3>Les titres</h3>

Ci-contre le code, simplifié des titres de ce paragraphe (au dessus). <H1> et </H1> délimite souvent le titre principal, celui de la page.

Si ce n'est pas bien cadré, vous pouvez toujours rajouter ou enlever des <br> pour les sauts de ligne.

<!-- Les titres --><a name="titre"></a>
<table border="0" width="100%" align="center"><tr>
<td><br><h3>Les titres</h3></td>
<td><a href="#debut">
<img src="../images/debut.gif" alt="" align="right">
</a></td>
</tr></table>

Ci-contre le code du titre, ci-dessus. Avec la flèche qui renvoi au début (lorsqu'on clique dessus). Là c'est un peu plus compliqué.

Il vous faut debut.gif. Vous pouvez utiliser le mien (clic droit dessus, puis enregistrer sous, l'image est libre de droit puisque je l'ai créée), ou créer le votre.

En résumé

Changer titre le nom de la balise et le nom & le style de votre titre, <h3>Les titres</h3>

Comment çà marche

Recliquez sur Comment çà marche au-dessus pour le recacher.

Comment çà marche

Les  délimitent un commentaire ici Les titres.

<a name="titre"></a> crée la balise titre pour pouvoir venir à ce niveau de la page. Ne mettez que des lettres, des chiffres ou des _ (pas d'accents) dans les noms de balises pour être compatible avec tous les navigateurs.

Le tableau

Pour mettre le titre à gauche et l'image Flèche.

<table> et </table> délimitent le tableau
<tr> et </tr> délimitent les lignes
<td> et </td> délimitent la cellule

Cellule de gauche

votre titre :<h3>Les titres</h3>.

Cellule de droite

La flèche et le lien hypertexte renvoyant au debut de la page : <a href="#debut"><img src="../images/debut.gif" alt="" align="right"></a>

<a href="#debut"> et ;</a> délimitent le lien hypertexte. Lequel renvoie vers la balise nommée #debut. Celle-ci doit être positionnée après <body> (voir structure générale)
<img src="../images/debut.gif" alt="" align="right">: Affiche l'image

Le chemin & le fichier de l'image ../images/debut.gif

signifie que l'image debut.gif se trouve dans le répertoire images. Et que celui-ci est de même niveau que celui où se trouve votre document Html.
images/debut.gif aurait signifié que le répertoire images se situerait sous celui où se trouve votre document Html.

alt="" : pas d'info-bulle lorsqu'on positionne la souris dessus sinon texte
align="right" : image cadrée à droite (right)

Si vous voulez cacher la flèche de retour debut , la même en commentaire mettre entre  le contenu de cette cellule (ex: <td></td>).

Tableau des liens

Structure générale

Fichier de style

Ci-contre exemple et code d'un tableau de liens.

<a href="#structure_gene"> et </a> sont le lien.
Structure générale est le titre/libellé du lien.
#fichier_style est un nom de lien (rappel:sans accents ni espaces.
<td> et </td> délimitent une cellule du tableau
<tr> et </tr> délimitent une ligne du tableau
align="center" centre le texte (left = cadré à gauche, right = cadré à droite)

de la cellule ex : <td align="center">
de toutes les cellules de la ligne ex : <tr align="center">
<table> et </table> délimitent le tableau
border="1" met une bordure (0 => sans bordure)
bordercolor="silver" est la couleur de la bordure (ici argent)

<table width=100% border="1" 
	bordercolor="silver" 
	cellspacing=0 cellpadding=3  
	summary="">
<tr align="center">
<td><a href="#structure_gene">Structure générale</a></td>
<td><a href="#fichier_style">Fichier de style</a></td>
<td><a href="#couleur_hexa">couleurs hexa</a></td>
</tr></table><br><br>

Les mots en couleur

Pour uniformiser la couleur des mots dans vos pages, il faut les définir dans le fichier .css style.css, feuille de style ou fichier de style.

Dans notre exemple (voir Fichier de style). Dans style.css, nous avons mis .bleu {color:#3366CC}.

Dans votre feuille Html, il vous suffira d'encadrer votre texte par <class="bleu"> et </span>, pour que celui-ci apparaisse en bleu.

L'avantage de cette méthode est que si vous voulez changer de type de bleu (pour rester dans l'exemple), ou même de couleur (même si ce n'est pas très élégant), vous le faites qu'une fois, et pour toutes vos pages.

Les images

<IMG SRC="vb.img/crypte1.png" Alt="">

Le code ci-contre insérera l'image crypte.png qui est étant dans le sous-répertoire vb.img par rapport à celui où se trouve votre fichier Html.
Alt="", signifie qu'aucune info-bulle sera affichée. Sinon mettre le texte entre les ".
Le texte écrit après l'image s'affichera sous cette dernière.

Afficher le texte à droite de l'image

exemple

code

Levier ouvre 2.
Porte incrochetable.
Araignée.
Porte incrochetable.
Levier ouvre 4.
2 zombis, 1 zombi faible.
Vers la Maison étrange.
Vers l'entrepôt.
Vers Cimetière.

<img src="vb.img/crypte1.png" align="left">
<ol>
  <li>Levier ouvre 2.</li>
  <li>Porte incrochetable.</li>
  <li>Araignée.</li>
  <li>Porte incrochetable.</li>
  <li>Levier ouvre 4.</li>
  <li>2 zombis, 1 zombi faible.</li>
  <li type="A" value=1>Vers la Maison étrange.</li>
  <li type="A">Vers l'entrepôt.</li>
  <li type="A">Vers Cimetière.</li>
</ol>

On peut coller le texte à côté de l'image en rajoutant align="left" (voir ci-dessus). Mais çà donne parfois n'importe quoi, dans notre exemple, on a perdu l'énumération. Dans ce cas il faut créer un tableau, voir ci-dessous.

Créer un tableau

exemple

code

Levier ouvre 2.
Porte incrochetable.
Araignée.
Porte incrochetable.
Levier ouvre 4.
2 zombis, 1 zombi faible.
Vers la Maison étrange.
Vers l'entrepôt.
Vers Cimetière.

<table><tr>
<td><img src="vb.img/crypte1.png"></td>
<td><ol>
  <li>Levier ouvre 2.</li>
  <li>Porte incrochetable.</li>
  <li>Araignée.</li>
  <li>Porte incrochetable.</li>
  <li>Levier ouvre 4.</li>
  <li>2 zombis, 1 zombi faible.</li>
  <li type="A" value=1>Vers la Maison étrange.</li>
  <li type="A">Vers l'entrepôt.</li>
  <li type="A">Vers Cimetière.</li>
</ol></td></tr></table>

Créer un tableau avec du texte à droite

exemple

code

Levier ouvre 2.
Porte incrochetable.
Araignée.
Porte incrochetable.
Levier ouvre 4.
2 zombis, 1 zombi faible.
Vers la Maison étrange.
Vers l'entrepôt.
Vers Cimetière.

Vous aurez pas mal de pièges au sol. Donc avancez doucement en mode fouille. Tomi est capable de les désamorcer. Si vous avez au moins un point en désamorçage, vous pouvez marquer ces pièges.

<table align="left"><tr>
<td><img src="vb.img/crypte1.png"></td>
<td><ol>
  <li>Levier ouvre 2.</li>
  <li>Porte incrochetable.</li>
  <li>Araignée.</li>
  <li>Porte incrochetable.</li>
  <li>Levier ouvre 4.</li>
  <li>2 zombis, 1 zombi faible.</li>
  <li type="A" value=1>Vers la Maison étrange.</li>
  <li type="A">Vers l'entrepôt.</li>
  <li type="A">Vers Cimetière.</li>
</ol></td></tr></table>
texte

Rehausser l'image avec valign= "top"

exemple

code

Levier ouvre 2.
Porte incrochetable.
Araignée.
Porte incrochetable.
Levier ouvre 4.
2 zombis, 1 zombi faible.
Vers la Maison étrange.
Vers l'entrepôt.
Vers Cimetière.

Vous aurez pas mal de pièges au sol. Donc avancez doucement en mode fouille. Tomi est capable de les désamorcer. Si vous avez au moins un point en désamorçage, vous pouvez marquer ces pièges.

<table align="left"><tr>
<td valign= "top"><img src="vb.img/crypte1.png"></td>
<td><ol>
  <li>Levier ouvre 2.</li>
  <li>Porte incrochetable.</li>
  <li>Araignée.</li>
  <li>Porte incrochetable.</li>
  <li>Levier ouvre 4.</li>
  <li>2 zombis, 1 zombi faible.</li>
  <li type="A" value=1>Vers la Maison étrange.</li>
  <li type="A">Vers l'entrepôt.</li>
  <li type="A">Vers Cimetière.</li>
</ol></td></tr></table>
texte