A huge collection of 3400+ free website templates JAR theme com WP themes and more at the biggest community-driven free web design site
Home / Science / Initiation au langage HTML avec feuilles de style – HTML facile

Initiation au langage HTML avec feuilles de style – HTML facile

Avant de vous lancer dans ce travail il faut savoir qu’il est bien plus facile de réaliser vos pages avec un logiciel spécifique…. mais que vos pages seront jusqu’à 20 fois plus volumineuses ce qui dépassera largement le volume de stockage que vous offre la plupart des hébergements

Ce travail est réalisé afin de donner un petit coup de main à ceux qui désirent réaliser une « page-perso » mais qui ont, comme tout le monde, des difficultés surtout pour débuter.

J’ai utilisé dans ces pages, pour raison de simplification, une programmation à l’aide de feuilles de style pour l’ensemble des pages qui s’affichent à l’écran mais dans les pages d’explication du code, j’ai utilisé une programmation classique en html. Il ne faut donc pas chercher une ressemblance entre la page visible et la page d’explication de code.
L’utilisation des feuilles de style est expliqué plus loin dans cette étude  Il est possible que certains mots ne soit pas exactement les mots qu’il fallait employer, ainsi selon les ouvrages que j’ai pu consulter, les petits mots placés entre les signes « <plus grand » et« >plus petit » sont soit des « tags » des « balises » des « marqueurs » à vous de choisir. Dans certaines pages, afin que vous puissiez lire le codage des tags, j’ai été obligé de coder l’écriture des balises.
Ce qui compte donc c’est uniquement ce que vous voyez à l’écran.

D’autre part j’ai évité tout ce qui bouge dans une page et qui n’est pas du langage HTML sauf une ou deux images animées ce que chacun peut faire facilement ou tout simplement trouver sur le net en utilisation libre

Avant de commencer il est important d’avoir une petite idée de ce que va être le site que vous allez réaliser prenez connaissance des conseils (et des seuls) que je donnerais à ce sujet.
Voulez-vous lire cette succession d’étapes :

Première phase :

Etablir un plan du site.

Ce plan, qui ressemble à l’arborescence des répertoires et sous répertoires sur un disque dur, vous permet de mettre en place la suite logique des pages et de réfléchir aux liens, c’est à dire les passages entre les pages avec les éventuels retour en arrière.
C’est à ce stade que vous devez penser à la création d’un répertoire où seront placées les images.

Deuxième phase :

Choisir le logiciel.

Il est possible de réaliser un site sans connaître un seul code du langage HTML, les logiciels proposés ici ou là fonctionnent très bien, le seul problème c’est qu’aucun n’est parfait et surtout les modifications et la mise au point des pages sont difficiles.
Si votre intention est de choisir un de ces logiciels, vous pouvez toujours suivre ce cours mais il est surtout réalisé à l’intention de ceux qui préfèrent réaliser les choses eux-mêmes.

Il est important de signaler qu’actuellement des logiciels comme « Word » ou « Writer » permettent la réalisation de page Web mais comme indiqué plus haut la modification est très difficile.
Il est courant de trouver des sites éxécutés avec ce genre de logiciel en générale ils n’occupent qu’une page ou deux.
Il faut également constater, que le volume occupé par les fichiers de ce type, est de 10 à 15 fois plus important qu’avec la méthode décrite ici ce qui rend l’hébergement impossible chez la plupat des fournisseurs d’accès.

Troisième phase :

Choisir le support.

Nous allons donc réaliser notre site sans employer de logiciel spécifique en utilisant simplement un traitement de texte mais le plus dépouillé possible.
Pour les utilisateurs de « Windows » le plus simple est de prendre « Wordpad » ou « Write » ou tout simplement « Blocnote » qui sont fourni dans le module de base.
Il est recommandé toutefois d’utiliser un traitement de texte ayant la fonction « Rechercher » / « Remplacer » qui facilite certaines opérations de finition.

Quatrième phase :

Ecrire les pages.

C’est dans les pages qui suivent que nous allons expliquer les différentes possibilités de l’HTML ou du moins ce qu’il est nécessaire de savoir afin que vos pages soient correctes.

Toutes les balises utilisées dans ces pages sont autorisées par le « WC3 » et compatibles avec le « XHTML ».
Une séquence consacrée aux feuilles de style compléte les pages html.

Cinquième phase :

Enregistrement de la page.

C’est une des phases importantes du travail, au moment de l’enregistrement de la page html, vous devez choisir l’option « texte seulement » et après avoir donné un nom au fichier vous devez ajouter l’extension « htm » comme par exemple : « mon_fichier.htm »
Attention pour éviter les problèmes ne jamais utiliser:
Les majuscules.
Les espaces.
Le systéme (Unix) utilisé par votre FAI fait en effet la différence entre majucules et minuscules ainsi une image dont le nom sera en majuscules ne sera pas reconnue si son nom est en minuscules dans la page HTML.

sixième phase :

Transfert des pages.

En principe cette action ne me concerne pas puisque vous pouvez très bien enregistrer votre réalisation sur un « CD » et le donner à vos amis.
Toutefois voici quelques règles pour l’installation du site

Choisir un hébergement vous devez trouver un endroit pour stocker vos pages afin quelles soient visibles sur le Net, vous pouvez demander à votre « F.A.I. » qui, en principe, offre quelques Mo a ses adhérents, c’est le cas de ce site qui est hébergé chez « Orange ».
D’autres entreprises peuvent vous offrir (pour quelques euros) l’hébergement, un nom de domaine, et une centaine d’adresses de messagerie c’est le cas de mon hébergeur pour un autre sitewww.strato-hebergement.fr

Transférer les fichiers vous devez avoir un logiciel pour cela. Il en existe de nombreux qui sont facilement téléchargeable et que vous pouvez utiliser « à l’essai » pendant un mois.
Vous pouvez acheter pour quelques Euros (bien mérités) celui qui vous convient. Pour ma part j’utilise « Filezilla » de la fondation « Firefox »qui est gratuit

Voici ce que vous devez écrire sur votre 1ère page, avec un simple traitement de texte genre « Wordpad » ou simplement « bloc-notes » de Windows

&lt;html&gt;
&lt;head&gt;
 &lt;title&gt; Ecrivez ici le titre de la page &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

Vous pouvez &amp;eacute;crire ici la 1&amp;egrave;re phrase 
qui vous passe par la t&amp;ecirc;te.

&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
if (typeof _gstat != "undefined") _gstat.audience('','pagesperso-orange.fr');
//]]&gt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Remarquer les accents codés

Ensuite.

Enregistrer le fichier, attention en « texte seulement »et avec l’extension « .htm »

Si vous utilisez « Windows » Basculer dans le gestionnaire de fichiers et faites 2 clics sur le nom du fichier, le navigateur que vous utilisez doit s’ouvrir sur une page qui bien sûr sera vide sauf la petite phrase écrite plus haut.

Pour ceux qui n’utilisent pas « Windows » « lancer » le fichier comme vous faites d’habitude (;-)).

Si ça marche vous êtes sur la bonne voie, le plus dur est fait.

Régles de programmation

Le langage HTML permet de faire des pages Web avec un grand laxisme dans l’élaboration du script. Le W3c, organisme qui régule les publications, a mis en place une sorte de code de « bonne conduite » que toute personne, voulant publier ses pages, devrait appliquer. Pour l’instant ce ne sont que des recommandations mais, peut-être un jour, les browsers ne permetteront de visualiser les pages que si elles répondent aux règles du W3c.

Tout les codes publiés sur ces pages répondent aux normes du « XHTML ».

Voici qu’elles sont ces régles (Liste non exhaustive)

Pour les rubriques marquées d’un  » * «  prévoir un espace avant le  » / « 

Rubrique

Interdit

Autorisé

Balise début et fin

<HTML>

<html>….</html>

Bordure

border (pas de valeur)

border= »0″

Texte de balise

bgcolor=cyan

bgcolor= »cyan »

Saut de ligne

<br/>

<br /> *

Lien même page

<a name= »mon_lien »>

<a name= »mon_lien »></a>

Lien même page

<a name= »mon_lien »>

<a name= »mon_lien » /> *

Appel image

<img src= »image.gif »>

<img src= »image »></img>

Appel image

<img src= »image.gif »>

<img src= »image » / > *

Nom d’image

<img src= »image.gif »>

<img src= »image.gif » alt= »image » title= »image » / > *

Antériorité

<u><i>….</u></i>

<u><i>….</i></u>

Fond d’écran

 

Le fond d’écran est défini par l’un ou l’autre des codes suivants:

 

Le nom de la couleur………………………………………… »cyan »

Le code de la couleur………………………………………… »#ff00ff »

Une image de fond……………………………………………. »image_fond.jpg »

Une autre image de fond…………………………………… »fond051.gif »

Le fond peut être mobile avec le texte…………………. »fond051.gif »

Le fond peut être fixe avec texte déroulant.*………….bgproperties= »fixed »

* La dernière option fonctionne avec IE, Chrome, mais ne fonctionne pas avec Firefox

Les couleurs

les couleurs peuvent être données soit par leurs noms, « cyan », « yellow » etc, soit par un codage hexadécimal (0 à f).
Basée sur la combinaison des trois couleurs « Rouge », « Vert », « Bleu » (RVB) sur une palette de 256 possibilités numérautées de 0 à 255.

Cela donne une utilisation possible de 16 777 216 couleurs(256*256*256)

 

Exemple de codage

 

Le code color= »#00ACFF » se décompose ainsi :
– les deux premiers signes (00) correspondent à la palette des « Rouge » (0)
– les signes (AC) correspondent à la palette des « Vert », (172)
– les signes (FF) correspondent à la palette des « bleu » (255).

 

Vous pouvez facilement trouver ces palettes de couleurs dans certains logiciels de dessin tel que « Photoshop » ainsi que dans « Word » dans la commande « Personnaliser » lors de l’utilisation des couleurs et également dans « OpenOffice » par exemple.


Voici quelques couleurs caractéristiques

La particularité de cette centaine de couleurs est de pouvoir être utilisé avec le nom de la couleur.


Black = »#000000″

DarkSlateGray

Midnightblue

DarkSlateblue

Indigo

Navy = »#000080″

Darkblue

Indigo

Mediumblue

Blue = »#0000FF »

Slateblue

Royalblue

Cornflowerblue

Dodgerblue

MediumSlateblue

Steelblue

BlueViolet

MediumPurple

Purple = »#800080″

DarkMagenta

DarkOrchid

DarkViolet

Aqua ou Cyan = »#00FFFF »

Mediumaquamarine

DeepSkyblue

Cornflowerblue

DarkTurquoise

LightSkyblue

Skyblue

Powderblue

PaleTurquoise

Turquoise

MediumTurquoise

Lightblue

LightSteelblue

LightCyan

DimGray

Gray = »#808080″

SlateGray

LightSlateGray

Teal = »#008080″

Cadetblue

DarkCyan

LightSeaGreen

Silver = »#C0C0C0″

DarkGray

LightGrey

Gainsboro

Maroon = »#800000″

DarkRed

Saddlebrown

Sienna

Brown

Firebrick

IndianRed

Chocolate

Crimson

Red = »#FF0000″

OrangeRed

Tomato

Coral

Sandybrown

Salmon

Goldenrod

DarkGoldenrod

Peru

DarkOrange

DarkSalmon

Orange

LightCoral

LightSalmon

Rosybrown

Moccasin

NavajoWhite

BurlyWood

Tan

DarkGreen

DarkOliveGreen

Green = »#008000″

ForestGreen

SeaGreen

Olive = »#808000″

OliveDrab

MediumSeaGreen

LimeGreen

Lime = »#00FF00″

PaleGreen

Aquamarine

Chartreuse

DarkSeaGreen

GreenYellow

LightGreen

LawnGreen

MediumSpringGreen

SpringGreen

YellowGreen

DarkKhaki

Khaki

Wheat

PaleGoldenrod

LemonChiffon

LightGoldenrodYellow

LightYellow

Gold

Yellow = »#FFFF00″

MediumVioletred

DeepPink

HotPink

Pink

LightPink

Magenta

Fuchsia = »#FF00FF »

MediumOrchid

PaleVioletred

Orchid

Violet

Plum

Thistle

Lavender

Aliceblue

Azure

white = »#FFFFFF »

Beige

PeachPuff

Bisque

Blanchedalmond

AntiqueWhite

Cornsilk

FloralWhite

GhostWhite

MintCream

Honeydew

Ivory

Linen

MistyRose

Lavenderblush

PapayaWhip

OldLace

Seashell

WhiteSmoke

Snow

La taille des Titres

La taille et le niveau des titres et sous-titres peuvent être donnés en respectant une hiérarchie, du plus grand au plus petit, de la même façon que dans un livre ou un rapport.

Le Titre taille « H1 » correspond au titre principal.

Le Titre taille « H2 » aux titre des chapitres et paragraphes etc.

Tailles des Titres

Titre taille h1

Titre taille h2

Titre taille h3

Titre taille h4

Titre taille h5
Titre taille h6

A suivre

A propos ithry-laib

Voir aussi

Attention! Sur les signes qui doivent alerter sur la « Noyade sèche »

Un phénomène rare: un petit garçon de 4 ans est décédé aux Etats-Unis d’une noyade sèche …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *