Quelques conseils pour une page web en langage HTML avec www.pourlunite.com

Code

Pour commencer
Pour commencer, il faut récupérer une entête existante. Vous pouvez prendre celle qui suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>ouvre le langage html

<head>ouvre la tête de page

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/> introduit le lien avec la feuille de style

<title>titre de la fenêtre

</head>ferme la tête de page

<body>ouvre le corps de la page

La page terminera avec les fermetures suivantes : </body> </html>

Les parties de la page
Dans cette page, nous avons trois parties : une partie non nommée, le "fond", et deux colonnes appelées "gauche" et "droite" dont tous les paramètres sont fixés dans la feuille de style (voir à la fin)

Pour la première partie, on peut écrire directement le contenu désiré, le texte s'y inscrira automatiquement.

Lorsque l'on désire écrire dans la partie gauche, on tape :

<div class="gauche">

On peut alors écrire ce que l'on veut. Pour refermer cette partie, on écrit :

</div>.

Puis on peut ouvrir la partie droite

On peut prévoir autant de parties que l'on veut, en feuille de style, mais il faut veiller à bien les règler pour qu'elles ne se chevauchent pas.

Le fond de chaque partie peut être soit une image, soit une couleur, soit rien. Cela est spécifié dans la feuille de style

Haut de page

Pour faire un tableau

<table>	ouvre le tableau
<tr>	ouvre la première ligne
<td> Coucou	ouvre la première colonne et écrit le texte dans la case
</td>	ferme la première colonne
<td> Hello	ouvre la deuxième colonne et écrit le texte dans la case
</td>	ferme la deuxième colonne
</tr>	ferme la première ligne
<tr>	ouvre la deuxième ligne
<td> Salut	ouvre la première colonne et écrit le texte dans la case
</td>	ferme la première colonne
<td> Bonjour	ouvre la deuxième colonne et écrit le texte dans la case
</td>	ferme la deuxième colonne
</tr>	ferme la deuxième ligne
</table>	ferme le tableau

Haut de page

Pour une liste

<ul>	ouvre la liste
<li>	élément 1 de la liste
Notre association
</li>	ferme l'élément 1 de la liste
<li>	élément 2 de la liste
Adhérer
</li>	ferme l'élément 2 de la liste
</ul>	ferme la liste

Haut de page

Pour afficher une image à gauche (par défaut)
Nommons 1.jpg l'image choisie.

<img src="1.jpg"/> Affiche l'image à gauche

Lorsque l'on veut avoir un écriteau d'indication en passant sur la photo, on écrit, alt="..."

Exemple : pour avoir un écriteau avec "Le Sacré-Coeur", on écrit:
<img src="1.jpg" alt="Le Sacré-Coeur">

Haut de page

Pour afficher une image à droite
Nommons 1.jpg l'image choisie.

<img src="1.jpg" align="right"/> Affiche l'image à droite

Haut de page

Pour faire un lien hypertexte
Soit "association.html" la page sur laquelle on se veut renvoyer avec le lien "Association"
<a href="association.html">Association</a>
Le texte est interactif. En cliquant dessus, on arrive sur la page "association.html".

Haut de page

Pour faire un lien sur une image
Soit "association.html" la page sur laquelle on veut se renvoyer avec l'image 1.jpg
Si l'image est dans le dossier "general", on aura :
<a href="association.html"><img src="general/1.jpg"/></a>
L'image est interactive. En cliquant dessus, on arrive sur la page "association.html".

Haut de page

Pour mettre en page un texte
Texte en gras : <strong> au début, et </strong> à la fin
Texte en italique : <i> au début, et </i> à la fin
Texte souligné : <u> au début, et </u> à la fin
Texte barré : <strike> au début, et </strike> à la fin
en exposant : <sup> au début, et </sup> à la fin
en indice : <sub> au début, et </sub> à la fin
Paragraphe : <p> au début, et </p> à la fin
Pour passer à la ligne : <br/>

<p>Le vieil homme enleva son chapeau <i>rouge</i> et le posa délicatement par terre, sur le carrelage légèrement humide.<br/> Il pansa soigneusement les plaies de son chien, pendant que son épouse <strike>buva</strike> buvait un chocolat tiède au coin du feu<br/> - <strong> Roseline!, Roseline!</strong> appela l'homme, <strong> qu'as-tu fait des pansements?</strong><br/>etc...</p>

Haut de page

Pour un titre de page
Pour les titres, naturellement, en terme de taille, h1>h2>h3>h4>h5..., mais on règle les préférences dans la feuille de style : Taille, couleur, casse et décoration du texte, alignement, ... Ici, des exemples de ce que l'on peut réaliser aisément

<h1>Notre association</h1>

Haut de page

Pour un titre
<h2>Adhérer</h2>

Haut de page

Pour un sous-titre
<h3>Notre revue</h3>

Haut de page

Changer couleur taille ou police, ponctuellement
<font color="red">Très important !</font>
<font face="comic sans ms">Très important !</font>
<font size="7">Très important !</font>

On peut également tout cumuler comme on le désire. Attention toutefois, car ces balisent nuient à la simplicité des fichiers source

<font size="7" face="comic sans ms" color="orange">Très important !</font>

Haut de page

Les codes de couleur, de taille
Le codage des couleurs se fait de deux manières : Soit en écrivant le nom de la couleur, en anglais, soit en écrivant le code des couleurs. En tappant "couleur langage.html" sur des moteurs de recherche, on trouve facilement des sites qui répertorientplus ou moins de ces codes.

Exemple : <font color="#9897ff">Attention</font> donne :

Le codage des tailles de texte, tel qu'il est présenté au dessus, est gradué de 1 (plus petit) à 7 (plus grand). Dans la feuille de style, on peut raisonner en terme de points : pt ou de pixels : px

Haut de page

Changer une image en passant dessus : le rollover
On dispose de deux images : 1.jpg et 2.jpg, sur lesquelles on veut mettre un lien
Il faut commencer par annoncer le changement dans la tête de page (entre <head> et </head>) de la manière suivante :

<script language="JavaScript">
bouton = new Image();bouton.src = "image2.jpg";
</script>

Dans le <body>, au moment venu, on écrit :

<a href="association.html" onmouseover="bouton.src = '2.jpg';" onmouseout="bouton.src = '1.jpg';">
<img src="1.jpg" alt="association"name=bouton>
<br/>Association</a>

Haut de page

Un exemple de feuille de style
La feuille de style qui m'a servi pour faire cette page ---------------------

Haut de page

Quelques conseils pour une page web en langage HTML

Quelques conseils pour une page web en langage HTML

Table des matières

Code

Pour commencer

Les parties de la page

Pour faire un tableau

Pour une liste

Pour afficher une image à gauche (par défaut)

Pour afficher une image à droite

Pour faire un lien hypertexte

Pour faire un lien sur une image

Pour mettre en page un texte

Pour un titre de page

Pour un titre

Pour un sous-titre

Changer couleur taille ou police, ponctuellement

Les codes de couleur, de taille

Changer une image en passant dessus : le rollover

Un exemple de feuille de style

Résultat sur la page

Notre association

Adhérer

Notre revue

Retour au site de l'unité


1.jpg	2.jpg

Quelques conseils pour une page web en langage HTML Quelques conseils pour une page web en langage HTML

Table des matières

Code

Résultat sur la page

Notre association

Adhérer

Notre revue

Quelques conseils pour une page web en langage HTML

Quelques conseils pour une page web en langage HTML