Cours CSS

Apprendre CSS HTML


Télécharger Apprendre CSS HTML

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Initiation à la fabrication de sites web

Table des matières

Visiter un site web, c’est un peu comme aller au théâtre. On peut d’ailleurs tenter d’établir un parallèle entre ces deux spectacles :

La pièce de théâtre     /

le site consulté

Les différents actes    /

les pages du site

Le livret                      /

le code source des pages

Le producteur             /

Internet

La scène                     /

l’écran de l’ordinateur

Le metteur en scène /

le navigateur

Le public                    /

l’ensemble des internautes.

Les pièces de théâtre du producteur Internet sont interprétées sur toutes les scènes de notre planète. L’écriture du livret utilise donc un langage reconnu par tous les metteurs en scène :

le HTML (Hyper Text Markup Language).

Le World Wide Web Consortium, plus connu sous l’acronyme W3C est l’organisme qui définit les normes du HTML et ses évolutions. La dernière version est appelée XML 1.

S’il est normal - comme au théâtre - que le résultat final diffère selon le metteur en scène, l’auteur (celui qui a conçu le site) doit veiller à ce que le metteur en scène respecte le livret et ne dénature pas l’œuvre. Nous verrons en effet que tous les navigateurs ne traduisent pas le code source HTML dans un parfait respect des normes qui le définissent…

Un fichier contenant du code source HTML se caractérise par l’extension .htm ou .html .

Le langage d’écriture des pages web permet d’implanter des liens vers d'autres pages, de décrire la forme du texte (gras, italique, polices, ), comme les premiers traitements de texte et d’inclure des images fixes ou animées, du son , de la vidéo et même des programmes interactifs (à l'aide de Javascript). 

Le langage HTML est également utilisé pour fournir une interface aux CD ROM multimédia et aux DVD ROM.

Ils constituent la base de la navigation sur les sites de la toile mondiale. 

Un lien hypertexte peut être constitué d’un mot (ou d’un ensemble de mots) généralement souligné qui réagit avec la souris et renvoie automatiquement vers un endroit appelé cible qui traite le sujet . 

La cible du lien peut se situer dans la page courante, dans une autre page du même site ou dans un site différent. 

Un dictionnaire sur le web illustre bien la notion de lien hypertexte :

Les balises constituent le principe même du HTML (langage à balises).

Les navigateurs permettent de visualiser le code source correspondant à une page affichée. Avec Internet Explorer le menu Affichage puis l’option Source, révèle le code HTML de la page courante.

Dans le code source, une balise (ou tag) est facilement identifiable : elle est constituée d'un ou plusieurs mots encadrés par les signes inférieur (<) et supérieur (>). 

Exemple :  

>         Fabriquer un site web    

                                                                                              texte

                              Balise d'ouverture                                                    Balise de fermeture

p

est un élément du langage HTML.

align

est un attribut de l’élément p.

="center"

affecte la valeur center à l’attribut align.

Certains éléments peuvent avoir plusieurs attributs.

Chaque balise doit être ouverte puis fermée ; les balises
 


ou (respectivement saut de ligne, trait horizontal et insertion d’une image) sont parmi les rares exceptions. On parle alors de balises "auto-fermantes".

Bien que majuscules et minuscules soient autorisées, les minuscules seront toujours utilisées dans ce document pour être conforme au XHTML (eXtended Hypertext Markup Language) et assurer la compatibilité avec les évolutions du langage

                                  

 

                                  

 

                                  

Important:

• Les balises <head> et <body> sont imbriquées dans la balise <html>.

Dans les pages HTML l’imbrication des balises est systématique

L’indentation (non obligatoire) permet de s’assurer du respect de la règle absolue

La première balise rencontrée dans le source est aussi la dernière fermée. 

Réciproquement la dernière balise rencontrée est la première fermée. 

Un exemple d’écriture incorrecte :

•    Les commentaires ne sont pas obligatoires et leur couleur est sans importance. 

Cependant la présence d’un commentaire peut faciliter la compréhension du code source et les modifications de la page…

 Déclaration du standard HTML utilisé

La déclaration du "doctype" qui spécifie le standard HTML utilisé dans la rédaction des pages de siten’est pas obligatoire. Elle est nécessaire pour effectuer auprès du W3C une validation qui consiste à vérifier le respect des normes d’écriture du standard choisi. Elle aide aussi le navigateur à interpréter la page le plus correctement possible.

Dans ces feuillets, il sera toujours question de XHTML, qui est la dernière version du langage HTML. D’où la "formule" doctype correspondante :

"">

 L’en-tête du document ()

Après la balise , début de tout code source, la balise donne des informations générales : 

•   la balise donne le titre de votre page tel qu’il apparaît au-dessus de la fenêtre du navigateur ou dans les favoris du visiteur qui rajoute votre site à sa liste de favoris.

•   les balises :

précise le jeu de caractères utilisés pour l’affichage des textes.

énumère des mots clés judicieux permettant aux moteurs de recherche (Google et autres) de référencer votre site.

Le corps du document ()

C'est ici que se trouvent les données à afficher (titres, textes, images, tableaux, liens ) 

Pour écrire le code HTML un éditeur élémentaire tel que le Bloc notes sous Windows convient.

Exemple depage minimale (sans doctype ni balises meta) :

  Ma première page 

Voici ma première page web!

Il faut ensuite enregistrer la page sur le disque dur en lui donnant un nom de fichier.  Une page d’accueil de site se nomme généralement "".

Dès lors, un double-clic sur le nom du fichier source de cette page suffira à ouvrir le navigateur Internet et à afficher à l’écran :

Ce premier succès encourage à composer une page avec un peu plus de contenu. 

Il est possible de faire un copier-coller pour récupérer une partie d’un document .doc ou .rtf  et l’insérer à la place de la phrase actuelle.

Hélas l’affichage de la nouvelle page par le navigateur ne reflète pas exactement la mise en forme du texte:

•   les passages à la ligne suivante et les tabulations sont ignorés.

•   les espaces consécutifs sont réduits à un espace unique.

Ce n’est pas un dysfonctionnement, c’est la règle avec le langage HTML !

Un certain nombre de balises seront indispensables pour rendre au texte sa structure.

La balise p

Elle indique un paragraphe (au sens littéraire) et provoque un saut de ligne.

                Exemple:                                                                                      Résultat :

Le premier paragraphe

Le deuxième paragraphe

Le troisième paragraphe

La balise br

Elle permet un simple passage à la ligne suivante sans saut de ligne.

                Exemple:                                                                                      Résultat :

 

/* Début du paragraphe */      La première phrase

                   /* ligne suivante */

La deuxième

                   /* ligne suivante */

La troisième 

  /* Fin du paragraphe */ Le paragraphe est fini !

La balise a

Indique un lien hypertexte

                Exemple:                                                                                      Résultat :

Visitez notre title="Nos activités">Page web

Attributs associés à la balise a :

href :

indique l’adresse (relative ou absolue – cf répertoires et arborescence) de la cible vers laquelle le lien renvoie.

La cible peut être une autre page du site (cas des menus) ou d’un autre site.

Page web est le lien hypertexte vers "", fichier situé dans le même répertoire que le source.

title :

Permet de spécifier une description du lien.

Au passage de la souris sur le lien, le navigateur affichera "Nos activités" dans une bulle.

Le lien décrit par l’attribut href  peut être :

-      interne à une page web  (cas du sommaire d’une page)

-      vers une page différente  (cas d’un menu général de site)

-      vers un site différent

-      vers un e-mail           (Exemple écrire au webmestre : ouverture automatique du logiciel de messagerie avec l’adresse de destination déjà remplie).

Les divers cas de figure sont détaillés page 25:Maîtriser les liens.

La balise img

Insertion d’une image

                Exemple:                                                                                      Résultat :

         

                                 

Les singes et les hommes  photo de singes

Attributs associés :

src :

Attribut obligatoire qui donne l’adresse de l’image (relative ou absolue – cf répertoires et arborescence).

alt :

Texte alternatif qui permet aux déficients visuels utilisant un logiciel de lecture audio d’avoir une interprétation de l’image.

La balise ul

Délimite une liste à puces

                Exemple:                                                                                      Résultat :

         

Voici une liste :

            

Rubrique1

Rubrique2
Rubrique3

Rubrique4

Les items de la liste sont placés à l’intérieur de balises

et s’affichent précédés d’une puce.

La balise h1 à h6

Titre hiérarchisés du niveau 1 (le plus gros) au niveau 6 (le plus petit)

                Exemple:                                                                                      Résultat :

         

Titre général

              

Titre de niveau 2

Titre de niveau 3

Un autre titre de niveau 2

La balise strong

Caractères gras

                Exemple:                                                                                      Résultat :

         

                                 

Il faut définir ce que sont

les balises

La balise em

Caractères obliques

                Exemple:                                                                                      Résultat :

         

                                 

Nous devrons revenir sur les liens hypertexte car ils sont la base de la navigation sur

Internet.

La balise div

Division de texte. Cette balise générique ne produit par défaut aucun effet particulier. Elle sert à diviser le texte en bloc ayant une unité sémantique et (ou) une mise en page particulière.

                Exemple:                                                                                      Résultat :

         

                                 

Dans ce chapitre nous aborderons    Dans ce chapitre nous les arguments en faveur des aborderons les arguments en documents bien structurés, et de       faveur des documents bien la mise en page soignée qui rend structurés, et de la mise leur consultation plus agréable. en page soignée qui rend

  leur consultation plus agréable.

Les balises possèdent deux types de comportement différent ;

•     Les balises "bloc" qui servent à distinguer les parties entières de texte, comme des titres, des paragraphes, des listes, des divisions (h1 à h6, p, ul, div).

A l’affichage, les "blocs" se placent toujours par défaut l'un en dessous de l'autre (comme le ferait un retour chariot).

•     Les balises "en ligne" insérées dans le texte pour l'enrichir comme un lien hypertexte, italique, gras, image (a, em, strong, img). 

Elles interviennent dans le déroulement naturel du texte sans provoquer de saut de ligne.

Les balises bloc peuvent servir de conteneur à du texte, des balises en ligne ou - exception faite des balises de titre h1 à h6 - à d’autres balises bloc.

Une balise en ligne ne peut contenir qu’une (ou plusieurs autres) balise en ligne.

Exemples :

•    

blabla

                    est incorrect

•    

blabla

                    est correct

Un document HTML est toujours composé de conteneurs. 

L'imbrication des différents conteneurs compose une structure hiérarchique semblable à une famille et conduit à une hérédité : la transmission des caractéristiques d’un conteneur aux blocs qu’il contient.

Voici la définition des termes qui seront employés :

•   Un bloc contenu directement dans un conteneur est dit Enfant de ce conteneur.

•   Le bloc contenant directement un bloc contenu est dit Parent de ce bloc.

•   Un élément Ancêtre est un élément bloc qui contient un autre élément ou une hiérarchie d'éléments. 

Exemple : l’élément body est l’Ancêtre de tous les éléments d’une page.

•   A défaut de nouvelles propriétés définies pour un de ces blocs, tous les éléments d’une page héritent des propriétés du bloc body.

•   Un bloc Parent est l’Ancêtre immédiat du bloc qu’il contient directement.

•   Les éléments ayant le même élément Parent sont appelés Frères.

•   Tout bloc inséré dans un conteneur hérite, par défaut, des propriétés définies pour le conteneur.

Pour donner aux blocs leurs propriétés (positions à l’intérieur de la page, dimensions, couleur de fond, police de caractères, etc…) on utilisera des feuilles de style (semblables à celles des traitement de texte) qui seront associées au code HTML.

Avant l’introduction des feuilles de style, les mises en pages étaient réalisées en utilisant des tableaux, souvent imbriqués et modifier une page était un exercice véritablement fastidieux.

Dans la construction d’un site web, l’utilisation des feuilles de styles en cascade, appelées communément CSS (Cascading Style Sheets), permet de séparer le fond de la forme.

Le source HTML contient uniquement le texte et les images structurés par les balises. Si le code est bien écrit, un site doit pouvoir être consulté sans avoir de feuilles de styles (une vérification préliminaire à effectuer…).

Les CSS associées au code source donnent toutes les informations de présentation utilisées dans les pages : 

•   police utilisées dans les titres, les blocs d’information, les listes

•   couleurs de fond ou du texte

•   bordures de texte

•   positionnement des blocs, marges internes et externes

•   etc…

Les feuilles de styles sont consignées dans un fichier caractérisé par l’extension .css

Le source HTML contient dans l’entête l’indication de liaison avec la CSS associé :

 

 

Fabriquer un site web

Le fichier CSS s’appelle ici ""

Exemple :

p   { font-size : 14pt ; }

p

est l’élément de la feuille de style.

font-size

est une propriété de la feuille de style.

14pt

est la valeur affectée à la propriété font-size.

Une feuille de style peut définir autant de couples propriété : valeur que l’élément peut autoriser.

Une propriété correspond à un attribut d’élément HTML de type bloc (margin-top , font-size, background-color, etc…). 

Une valeur doit être cohérente avec la propriété CSS à laquelle elle est affectée (par exemple une couleur pour background-color et pas une mesure).

Des commentaires peuvent être insérés sous la forme : 

/* Ceci est un commentaire*/

On distingue 3 catégories de feuilles de style :

•   Les feuilles de styles globales :

Le nom d’élément  appartient aux balises bloc du HTML(h1, p, div, td, etc…). Exemple :p { color : green ; }Résultat :

-    Cette feuille de style va affecter la couleur verte à tous les paragraphes de la page.

•   Les feuilles de style indépendantes :

Le nom d’élément, indépendant des balises bloc du HTML, est de la forme  #nom . Ce nom, choisi librement, affectera des caractéristiques individuelles à un bloc unique.

Une dénomination significative est à privilégier. Exemple :       #entete { font-size : 14pt ; }Côté HTML :

id="entete">

Résultat :

-    Le texte placé à l’intérieur de ce conteneur aura une taille de police de 14pt.

-    Tout autre bloc div non contenu dans le bloc id="entete"n’aura pas la taille de police précisée dans la feuille de style#entete.

•   Les définitions de classes :

Ces feuilles de style sont les cousines des feuilles de style indépendantes ; seul le nom de l’élément est de forme différente  .nom. A la différence d’une feuille de style indépendante, une classe pourra affecter des caractéristiques identiques àplusieursblocs.

Exemple :  .encart { border : solid ; }Côté HTML :

class="encart">

  Résultat :

-    Le texte placé à l’intérieur de ce conteneur sera entouré d’une bordure continue.

-    Tous les blocs div de la page appartenant à la classe "encart" seront entourésd’une bordure continue.

Le signe décimal des unités de mesures est le point.

pt Point. Mesure typographique. 1 point correspond à 1/72 de pouce pc Pica. Unité de mesure typographique. 1 pica correspond à 12 points

pxPixel. Mesure absolue pour un écran donné, mais relative à la définition de l’affichage si on modifie ce dernier

in 1 pouce correspond à 2,54 centimètres mm Millimètre. Seules les valeurs entières sont autorisées cm        Centimètre

2.2       Mesures relatives

C’est ce type de mesures qu’il faut privilégier car elles harmonisent taille des caractères et taille disponible pour l’affichage.

em          Relatif à la taille de la lettre m dans la police de l'élément ex         Relatif à la taille de la lettre x dans la police de l'élément

%Pourcentage relatif à la taille disponible pour l'élément. 

Cette unité est intéressante pour adapter l’espace occupé par un bloc de texte à la définition de l’écran de l’ordinateur  (1280 X 800,  1024 X 768,   800 X 600,   etc…)

2.3       Indications de couleurs

16,7 millions de couleurs sont disponibles (2563):

#XXXXXX

Mention hexadécimale RGB comme pour HTML (ex FFFFFF)

rgb(R,G,B)

Valeurs RGB décimales (0-255,0-255,0-255)

rgb(%,%,%)

Répartition RGB en pourcentage (0-100%,0-100%,0-100%)

Couleur

(16 noms standards)

3.1.      Marges externes, marges internes et dimensions

Sans définition explicite du positionnement, un bloc se place par défaut en haut à gauche de son conteneur (le body, un autre bloc, ) et occupe toute la largeur de ce conteneur. Ses frères se placeront en-dessous.



Les propriétés de marges permettent de positionner un bloc au sein de son parent.

Le terme margin désigne les marges externes d’un bloc

Le bloc en jaune reçoit des marges externes (ici par rapport à l’écran) respectivement notées :

-

margin-top

pour la marge externe supérieure

-

margin-right

pour la marge externe droite

-

margin-bottom

pour la marge externe inférieure

-

margin-left

pour la marge externe gauche

On peut affecter les valeurs des quatre marges de deux façons équivalentes en écrivant :

/* notation classique */

#comment{ margin-top : 20px ; margin-right : 30px ; margin-bottom : 30px ;

margin-left : 20px ;

}

ou bien

/* notation simplifiée */

#comment{ margin: 20px,30px,30px,20px;

}

/* les 4 valeurs sont toujours dans l’ordre top, right, bottom, left */

En notation simplifiée :

margin : 20px ;   affecte la même dimension aux 4 marges soit 20px. margin : 20px, 30px ;   affecte 20px en haut et en bas et 30px à droite et à gauche.

margin : 20px, 30px, 10px ; affecte 20px en haut et en bas et 30px à droite  et à gauche et 10px en bas.

Le terme padding désigne les marges internes d’un bloc

Le padding du bloc en jaune détermine l’espace intérieur utilisable pour afficher des informations. Les marges internes sont notées :

-

padding-top

pour la marge interne supérieure

-

padding-right

pour la marge interne droite

-

padding-bottom

pour la marge interne inférieure

-

padding-left

pour la marge interne gauche

Le notation simplifiée utilisable avec le padding obéit aux mêmes conventions que celle du margin.

Les termes width  et height désignent les dimensions d’un bloc

-    width       pour la largeur du bloc

-    height     pour la hauteur du bloc

Important: Des marges affectées par défaut et variables selon les navigateurs, provoquent des différences de rendu visuel. 

Une solution : affecter aux marges des valeurs choisies.

Exemples de positionnement 

Placer un bloc jaune de 100pxX 100px à 80px du haut du conteneur et à 35px de la gauche du conteneur :

.conteneur { padding-top: 80px; padding-left: 35px;

}

.bloc { width: 100px; height: 100px;

background-color: yellow;

}

Nota : On emploie ici un padding-top et un padding-left pour définir le positionnement du bloc à l’intérieur du conteneur (marge interne). Cela signifie que la zone située autour du bloc jaune ne pourra pas être remplie par du texte.

Deux blocs l'un au-dessous de l'autre avec un espace de séparation :

Résultat :

 bloc1

bloc2

Partie HTML:

bloc1
bloc2

CSS correspondante:

.bloc1 { background-color: aqua; height: 50px;

}

.bloc2 { background-color: lime; height: 50px; margin-top: 20px;

}

Trois blocs côte à côte séparés par un espace :

Partie HTML:

bloc1
bloc2
bloc3

CSS correspondante:

.bloc1 { background-color: aqua; height: 50px; width: 100px; float: left;

}

.bloc2 { background-color: lime; height: 50px; width: 100px; float: left; margin-left: 20px;

}

.bloc3 { background-color: red; height: 50px; width: 100px; float: left;

margin-left: 20px;

}

Un bloc contenu dans un autre bloc:

Partie HTML:

bloc

CSS correspondante:

.conteneur { background-color: aqua; height: 150px; width: 100px; padding-top: 40px;

}

.bloc { background-color: yellow; height: 50px; width: 50px; margin-left: 20px;

}

3.2.      Positionnement flottant

La propriété float permet de positionner un bloc à gauche (float : left;) ou à droite (float : right;)à l’intérieur du bloc parent (et non-plus l'un en-dessous de l'autre). Le reste du conteneur parent occupera alors l'espace laissé libre, à côté puis éventuellement audessous.

Exemple : Une image insérée à droite d'un texte.

Partie HTML:

      

bla bla bla bla bla bla

   bla bla bla bla bla bla       bla bla bla bla bla

   

CSS correspondante:

.conteneur { width: 40%;

background-color: yellow;

}

.image { float: right;

}

Attention :

Le bloc positionné en flottant sort du flux courant des informations : sa hauteur n’est donc plus limitée à celle du conteneur. Si aucune hauteur ne lui a été affectée, le bloc peut déborder du conteneur…

Nota : Dans le cas de plusieurs éléments flottants, il est souvent préférable de les placer dans un parent commun.

Il est possible de cumuler les propriétés float pour obtenir plusieurs blocs côte à côte.

3.3.       Positions absolues, fixes et relatives

Position "absolute", position  "fixed"

L’élément est placé à l'aide des propriétés "top" et "left" par rapport au coin supérieur gauche :

•   de son parent si ce dernier est positionné, ou alors du dernier Ancêtre positionné. 

•   de la page entière (balise html) si aucun Ancêtre n'est positionné.

Conséquences : 

•   La position de l’élément est indépendante de l’emplacement de sa balise à l’intérieur du code source du Parent . L’élément positionné en absolu ne décale pas et ne perturbe pas les autres données, auxquelles il peut cependant se superposer.

•   Ce positionnement rend difficile l'adaptation du site aux différentes résolutions d’écrans des visiteurs.

Différence entre "absolute" et "fixed":

•   "absolute" autorise le défilement des données positionnées

•   "fixed" interdit le défilement des données positionnées

Position "relative": 

La position"relative" d'un élément est dépendante de la position de l'élément qui le précède dans le code HTML. Le code CSS donne la position finale du bloc à l’aide des propriétés "top", "right","bottom" et "left".

Conséquences : 

•   L’élément positionné est dépendant des éléments frères. 

•   Il influence les éléments frères.

Le matériel minimum pour écrire le code HTML et les CSS est un éditeur élémentaire tel que le Bloc notes sous Windows.

Cependant, l’écriture des feuilles de style sous Windows est grandement facilitée par l’éditeur de CSS TopStyle (gratuit):

•        indentation automatique des définitions de style

•        aide à l’écriture des couples propriétés-valeurs

•        aide au choix des nuances de couleurs

•        vérification de la syntaxe.

Il faudra aussi vérifier le rendu de la page web avec les différents navigateurs. Sous Windows, outre l’inévitable Internet Explorer il sera bon d’installer Firefox (gratuit). 

Par ailleurs, Web Developer, extension de Firefox, contient une quantité d’outils précieux pour la fabrication de sites.

Le passage du site en ligne se fera en utilisant un logiciel FTP (File Transfer Protocol) pour copier les fichiers du site ( .htm , .css et les images .gif , .png , .jpg) sur le serveur d’un hébergeur. 

Le logiciel FileZilla (gratuit) ou tout autre logiciel FTP remplira cette fonction.

•   Définir l’architecture du site (papier, crayon, et … cogitations).

•   Transcrire en HTML, sans aucune indication de mise en forme, le contenu d’une page.

Enregistrer la page sur son ordinateur (extension .htm ou .html). La page d’accueil se nomme généralement .

•   Ecrire les feuilles de style nécessaires à la mise en forme du source HTML. Enregistrer le fichier sur son ordinateur par exemple .

•   Etablir dans le bloc en-tête head du HTML le lien avec le fichier CSS. Dans notre cas :

..

•   Essayer la page sur un navigateur en double-cliquant sur .

•   Transférer l’ensemble des pages du site sur le serveur d’un hébergeur. 

A l’issu du transfert, le site est consultable en ligne.

Il n'existe pas de balise spécifique pour désigner un ensemble de liens. La solution la plus fréquente consiste à traiter le menu de navigation comme une liste de liens, en utilisant la balise correspondant aux listes non ordonnées. 

Exemple, pour un menu comportant 4 items:

L'identifiant placé dans la balise

    sera nécessaire pour accéder aux différents éléments du menu et pour les modifier dans la feuille de style.

Résultat à l’écran:

•     Section1Section2 •        Section3

•     Section4

On va donner une largeur au menu (200px), supprimer marges et padding par défaut ainsi que la puce des éléments de la liste:

#navigation {

         width: 200px;       

/* largeur du menu */

list-style: none; 

/* pas de puce */

         margin: 0;          

/* pas de marge */

         padding: 0;         

}

/* pas de padding */

Résultat à l’écran:

Section1

Section2

Section3

Section4

La suppression des marges et des padding est nécessaire pour obtenir le même rendu avec tous les navigateurs : les valeurs par défaut de ces propriétés n’y sont pas identiques.

Le comportement des éléments de liste est de type bloc: ils s'empilent les uns sur les autres et occupent toute la largeur disponible. La disposition des éléments est donc déjà correcte.

On va donner une couleur de fond, une couleur de texte, et une bordure aux éléments

  • ainsi qu’une marge inférieure qui va aérer la liste:

#navigation li { background: aqua; color: black;

border: 1px solid #600; 

/* bordure pour chaque ligne */

         margin-bottom: 1px;         

/* marge inférieure "  "  "  */

}

Résultat à l’écran:

Section1

Section2

Section4

Pour le fond et le texte il faut veiller au choix de couleurs compatibles et donnant un contraste suffisant.

Pour faire réagir les éléments du menu comme des boutons au survol du pointeur de la souris, les liens doivent occuper tout l'espace à l'intérieur des

  • :

#navigation li a { display: block;           /* les éléments occupent tout l’espace */ background: aqua; color: black; font: 1em "Trebuchet MS",Arial,sans-serif ; line-height: 1em ;

text-align: center ;  /* centrage du texte */ text-decoration: none ; /* supprime le soulignement des liens */ padding: 4px 0 ;  /* padding pour aérer le texte */ }

Pour faire en sorte que les liens réagissent au passage de la souris nous emploierons la pseudo-classe hover.

Attention, IE6 ne gère la pseudo-classe hover que lorsqu'elle est appliquée à la balise .

#navigation li a:hover { background: fuchsia;  /* couleur de fond au survol */ text-decoration: underline ;  /* item souligné au survol */ }

Résultat à l’écran:

Cette fois, il faut modifier le comportement par défaut des

  • : ils ne doivent plus s'empiler, mais se placer les uns à côté des autres. Il y a deux approches possibles pour y parvenir.

Mode de rendu "en-ligne"

On peut modifier le mode d'affichage pour que les

  • s'affichent comme des éléments de type "inline":

#navigation li { display: inline ;

}

Les éléments du menu se comportent maintenant comme du texte "normal".

Résultat à l’écran:

Section1Section2Section3Section4

Cette méthode permet de réaliser facilement un menu de navigation aligné à droite ou centré, et évite de sortir les

  • du flux de la page (on verra plus loin quelques ennuis liés à la sortie de ces éléments du flux). De plus, la largeur des éléments du menu s'adapte automatiquement à la taille du texte.

Malheureusement, en procédant de cette façon, on ne peut plus contrôler les hauteurs et largeurs des

  • , on ne peut agir que sur les padding et sur l'interlignage.

Un exemple de menu centré:

#navigation { margin: 0 ; padding: 0 ; list-style: none ; text-align: center ;

}

On supprime les marges, padding et puces de la même manière que pour le menu vertical. La propriété "text-align: center" aura pour effet de centrer toutes les balises de type inline à l'intérieur de la liste.

#navigation li { display: inline ; margin-right: 1px ; color: #fff ; background: #c00 ;

}

On modifie le rendu des éléments de liste, et on ajoute couleur de fond, couleur du texte et bordures.

#navigation li a { padding: 4px 20px ; background: #c00 ; color: #fff ; border: 1px solid #600 ; font: 1em "Trebuchet MS",Arial,sans-serif ; line-height: 1em ; text-align: center ; text-decoration: none ;

}

Attention, il ne faut pas utiliser "display: block" sur les liens, sinon ils vont étirer les éléments de liste sur toute la largeur disponible, les obligeant à se superposer! On peut les agrandir en utilisant les valeurs de padding.

Le comportement réactif des liens est obtenu de la même façon que pour le menu vertical.

#navigation li a:hover, { background: #900 ; text-decoration: underline ; }

Items flottants

Une autre possibilité est de faire "flotter" les éléments :

#navigation li { float: left ;

}

Dans ce cas, les

  • restent de type bloc, et on peut encore les dimensionner. Par contre, ils sont sortis du flux de la page, et la propriété text-align n'aura plus d'effet sur eux. Cette méthode ne sera donc utile qu’avec des éléments de menu de mêmes dimensions.

Toujours à partir du même code XHTML, on peut construire un menu de ce type:

#navigation { margin: 0 ; padding: 0 ; list-style: 0 ;

}

Suppression des marges, padding et puces (toujours pareil …)

#navigation li { float: left ;width: 150px ; border: 1px solid #600 ; margin-right: 1px ; color: #fff ; background: #c00 ;

}

On fait "flotter" les

  • et on leur donne une largeur. Il faut veiller à laisser suffisamment d'espace pour que le texte du lien puisse être agrandi par l'utilisateur!(dans les navigateurs, menu Affichage, option Modifier la taille du texte)

Le rendu des liens se modifie exactement comme pour le menu vertical:

#navigation li a { display: block ; background: #c00 ; color: #fff ; font: 1em "Trebuchet MS",Arial,sans-serif ; line-height: 1em ; padding: 4px 0 ; text-align: center ;

}

#navigation li a:hover { background: #900 ;

}

Attention : si on insère du texte dans la page juste en dessous du menu et que celui-ci n'occupe pas toute la largeur, on observe que le texte vient se placer à côté du menu, au lieu de rester sagement en-dessous !

Explication :

La propriété float: left, a retiré les

  • du flux de courant de la page. Dès lors ils n'entrent plus dans le calcul de la hauteur de la liste
      , dont c’est le seul contenu : sa hauteur est donc nulle !!!.

Il existe (au moins) 2 solutions simples à cet inconvénient:

1.    appliquer clear: left à l'élément qui suit directement le menu dans le code HTML.

2.    forcer la liste à occuper une hauteur suffisante : 

#navigation { height: 1.8em ;

}

Mais il n'est pas toujours facile de déterminer la hauteur requise, et des problèmes vont surgir si le visiteur agrandit suffisamment la police de caractères pour obliger le texte des items du menu à passer sur 2 lignes.

Les liens internes permettent au visiteur de se déplacer à l'intérieur d'une page sans être obligé de faire défiler la fenêtre (scrolling). Le visiteur va donc cliquer sur un lien et il sera amené vers la cible de ce lien.  Pour cela deux étapes sont nécessaires:

•  Définir la cible d'un lien (l'ancre)2

Exemple:  

Le nom "debut"suffità caractériser la cible. Il ne doit contenir ni espaces, ni accents, ni caractères spéciaux.

•  Associer un lien à l’ancre définie

Exemple: Retour au début

C’est l’emploi classique pour assurer la navigation à l’intérieur d’un site. Chaque item du menu est assorti d’un lien vers la page à atteindre.

•   La page est située dans le même répertoire 

Exemple : 

Cliquez ici

•   La page est située dans un répertoire différent

Exemple : 

Cliquez ici

•   Lien vers une ancre d'une autre page et du même répertoire : L’arrivée se fait en un endroit précis d’une page différenteExemple : 

Cliquez ici

•   Lien vers une ancre d'une autre page et d’un répertoire différent :

Cas similaire au précédent mais la page atteinte est dans un autre répertoire.

Exemple : 

Cliquez ici

On définit plus commodément la cible d’un lien en utilisant le nom d’élément d’une balise : 

 Ex :

"article"> ou

"titre1">. (voir  Structure d’une feuille de style)

La syntaxe de la valeur affectée à l’attribut href varie selon le protocole. •   Lien externe vers un site http

Exemple : 

Découvrez SITE

•   Lien externe vers un serveur FTP (transfert de fichiers) :

Exemple : 

Transfert de fichiers

•   Lien externe vers un fichier :

Pour faire un téléchargement (fichier .exe ou .zip) Exemple : 

Cliquez pour télécharger

•   La messagerie par défaut du visiteur se lance et l’adresse du destinataire s’inscrit automatiquement ( dans les exemples cidessous). 

Le visiteur reste maître de la dénomination du sujet et du contenu du mail Exemple : 

Responsable

•   Même chose avec pré-remplissage du sujet du message.

Exemple où le sujet est "demande":

"?subject=demande">Contact

•   Même chose avec pré-remplissage du sujet du message et du texte.

Exemple avec le texte "Blablabla":

"?subject=demande&body=Blablabla"> Webmaster du site

Titre                                   

à

hiérarchique

Affiche en caractères gras le titre contenu dans la balise. La balise

correspond aux titres de niveau 1. La taille des polices par défaut,

 affectée automatiquement par le navigateur, diminue quand l’indice augmente.

Exemple :

Titre principal. 

              Paragraphe                  

Texte

Élément de bloc générique

Bloc de texte

Balise générique utilisée pour marquer l’unité sémantique d’un texte ou pour sa mise en page par CSS

           Filet                                  


 

horizontal                          Trace une séparation sur toute la largeur disponible.   

Titre du tableau

< !—1ère ligne -->

cellule d'entête

cellule d'entête

< !—2ème ligne --> < !—1ère cellule --> Contenu de la première cellule < !—2ème cellule --> Contenu de la deuxième cellule < !—3ème ligne -->< !--Ici on place de même les cellules de la 3ème ligne du tableau-->

Tableau

<table border="épaisseur">

Quadrillage visible par la mention de border= dans la balise d'ouverture du tableau.

"épaisseur" contient l'épaisseur de la bordure extérieure en nombre de pixels 

Listes à puces

Texte 1

Texte 2

Liste                                                         

      "Type"
>
    Valeurs données à "Type"

ordonnée                                                                                                       

Texte 1  = liste alphabétique minuscules, a

Texte 2

A =   " alphabétique majuscules,

i = chiffres romains minuscules,

I = chiffres romains majuscules.

            Citation                           Texte

Corps du document

Contenu du document

Les propriétés CSS affectées à cette balise définissent les caractéristiques générales du document

Lien         "" title="Nos activités"> hypertexte          Page

.

               Saut de ligne               

Renforcement

             Emphase                        

Élément en ligne générique

Texte <span

Regroupe au fil du texte des éléments ayant une unité sémantique.

Correspond à la balise bloc

Insertion <img src=”nom.format” alt=”légende”/> d’une image

Les formats de fichier d’image reconnus par tous les navigateurs sont GIF, JPEG et PNG.

Le texte alternatif pour malvoyants ou navigateurs en mode texte est obligatoire en XHTML

Marges externes =  margin  et marges internes = padding. La syntaxe est similaire:

margin-x

Marge externe en haut

Valeurs données à x :

top = marge supérieure. Valeur numérique, % ou auto.

right = marge droite. Valeur numérique, % ou auto.

bottom = marge inférieure. Valeur numérique, % ou auto.

left = marge droite. Valeur numérique, % ou auto.

margin          Notation globale                    Les 4 valeurs sont toujours

sous la forme top, right, bottom, left et toujours dans cet ordre.

position



Type de positionnement

absolute = positionnement mesuré à partir des bords de l'élément parent; peut défiler.

fixed = positionnement mesuré à partir du bord de l'élément parent; fixe lors du défilement.

relative = positionnement relatif mesuré à partir de la position normale de l'élément proprement dit.

static = Dans le flux normal

(réglage par défaut).

top              Placé en haut du conteneur valeur numérique

left

Placé à gauche du conteneur

valeur numérique

bottom

Placé en bas du conteneur

valeur numérique

right

Placé à droite du conteneur

valeur numérique

width

Largeur du bloc

valeur numérique ou auto (par défaut)

height

Hauteur du bloc

valeur numérique ou auto (par défaut)

overflow

Action si le contenu dépasse la taille du conteneur 

visible = Augmentation de la taille du conteneur pour rendre visible tout le contenu hidden = Le contenu sera coupé s'il dépasse les limites.

scroll = Le navigateur propose des barres de défilement.

auto = Le navigateur décide de la stratégie en cas de dépassement de taille.

float

Positionnement flottant

left = L'élément est à gauche du conteneur et entouré par l’élément suivant

right = L'élément est à droite du conteneur et entouré par l’élément suivant

none = L'élément ne sera pas entouré (réglage normal).

clear

Annule les effet du positionnement flottant

left = poursuite dessous suite à float : left.

right = la poursuite dessous suite à float : right.

both = poursuite dessous après float : leftetfloat : right. none = pas d’effet (réglage normal).

display

Changement de mode d’affichage

block = impose l’affichage en mode bloc - l'élément crée un nouvelle ligne.

inline = impose l'affichage enligne

none = l'élément n'est pas affiché et n’occupe aucun espace.

visibility       Affichage avec réservation hidden = Le contenu de

                                                             d’espace                                 l'élément est caché.

visible = Le contenu de l'élément est affiché (réglage normal).

text-indent

Retrait de la 1ère ligne

valeur numérique (px, cm, etc…)

line-height     Hauteur de ligne                    Si % est utilisé, il est

relatif à la taille de la

relatif à la taille de la police

vertical-align Alignement vertical 

top aligner en haut, middle   aligner au milieu,  bottom   aligner en bas. sub =mettre en indice (sans réduire la taille de la police).

super = mettre en exposant (sans réduire la taille de la police).

text-top = aligner sur le bord supérieur de l'espace disponible.

text-bottom = aligner sur le bord inférieur de l'espace disponible.

text-align      Alignement horizontal           left (réglage par défaut),

centerright , justify (texte justifié).

font-size

Taille de la police

xx-small, x-small, small, medium, large, x-large, xxlargelarger, smaller

ou taille définie (px, cm, mm, pt, %)

font-weight

Poids de la police

normal, bold, bolder, lighter, ou valeur numérique (de 100 à

900 par tranche de 100)

font-family                            type de police    serif, sans-serif, cursive, fantasy, monospace,      ou nom de la police ( Arial, Verdana, Times, etc )

font-style      style de la police                    normal, italic, oblique

font-variant

Variante de la police

normal, small-caps

font

Notation globale des caractéristiques de la police

font-family, font-style, fontvariant, font-size, font-weight sont notés par leurs valeurs séparées par des espaces.

Exemple :

font:Times 13px bold;

color

Couleur du texte

nom standard ou valeur hexadécimale de la couleur

textdecoration

Décoration de texte

underline = souligné.

overline = ligne au dessus.

line-through = barré. blink = clignotant. none = normal.

text-transform Casse du texte

capitalize = début des mots en majuscules.

uppercase = tout en majuscules. lowercase = tout en minuscules. none = normal.

letter-spacing Espacement des lettres            normal (par défaut) ou valeur numérique.

Les % sont interdits.

word-spacing

Espacement des mots

normal (par défaut) ou valeur numérique.

Les % sont interdits.

border-style

Style de la bordure

none, dotted, dashed, solid, double, groove, ridge, inset, outset.

border-width

Epaisseur de la bordure

thin, medium, thick.

border-color

Couleur de la bordure

Nom ou valeur hexadécimale de la couleur.

border

Notation globale des caractéristiques de la bordure

border-style, border-width et border-color sont notés par leurs valeurs séparées par des espaces. Exemple :

border : solid 3px #FFCC99;

backgroundcolor

Couleur d'arrière-plan

nom standard ou valeur hexadécimale de la couleur

background-      Image d’arrère-plan    Cible ou adresse web d’une image    image gif ou jpeg .

backgroundrepeat

Répétition d’une image

repeat = répéter (réglage par défaut) repeat-x = répéter en "ligne. repeat-y = répéter en "colonne" no-repeat = ne pas répéter,

image unique.

background-      Effet de filigrane         scroll = défile avec le texte attachment      (réglage par défaut)

fixed = l'image d'arrière-plan reste fixe. 

backgroundposition

Position d’arrère-plan

top = aligné en haut.

center = centrage horizontal. middle = milieu vertical. bottom = aligné en bas. left = aligné à gauche. right = = aligné à droite.

background      Notation globale des              background-image, background-

caractéristiques de l’arrière- repeat, background-attachment et background-position sont

plan                                        notés par leurs valeurs

séparées par des espaces.

Exemple :

background : URL() repeat-x fixed;

list-styletype

Type de représentation

Pour les listes numérotées (ol)

decimal = numérotation

1.,2.,3.,4. etc

lower-roman = numérotation

i.,ii.,iii.,iv. etc

upper-roman = numérotation I.,II.,III.,IV. etc

lower-alpha = numérotation

a.,b.,c.,d. etc

upper-alpha = numérotation A.,B.,C.,D. etc

lower-greek = numérotation grecque: ?., ?., ?., ?. etc

Listes non numérotées (ul)

disc = pour les listes ul: :

rond plein comme puce.

circle = pour les listes ul:

puce ronde.

square = pour les listes ul: puce rectangulaire.

none = pas de puce, pas de numérotation.

list-style-     Retrait des listes                     inside = sans retrait.

position                                outside = avec retrait (réglage

par défaut).

list-style-

Puces personnalisées

URL ou chemin d’accès au fichier

image

image

graphique cible (GIF ou JPEG)

list-style      Notation globale                    list-style-type, list-style-

position et list-style-imgage sont notés par leurs valeurs séparées par des espaces.

Exemple :

list-style:lower-roman inside;

caption-side

Position d'un titre

(élément HTML caption)

top = en haut du tableau. bottom = sous le tableau. left = à gauche du tableau. right = à droite du tableau.

table-layout largeurs fixe/variable                fixed = Largeur fixe. Le

                                                              (élément HTML table)        contenu est tronqué s’il ne

tient pas dans une cellule. auto = Largeur ajustée au contenu des cellules (par défaut).

bordercollapse

Modèle de bordure

(élément HTML table)

separate = bordures de cellules de tableau distinctes.

collapse = bordures de cellules de tableau confondues.

border-spacing Espace entre bordures Mention numérique (élément HTML table)

empty-cells

Affichage de cellules vides

(élément HTML table)

show = Les bordures des cellules vides sont affichées. collapse = Les bordures des cellules vides sont cachées

(réglage par défaut).

Adresse électronique

Equivalent de l'adresse postale pour la messagerie électronique. S’exprimer sous la forme :

[email protected]

Adresse IP

Adresse affectée à tout équipement informatique connecté à un réseau qui utilise le protocole TCP/IP (cas d’Internet). S’exprime sous la forme : 195.154.194.004.

ADSL

(Asynchrounous Digital Suscriber Line). Technologie permettant la transmission de données à haut débit jusqu’à 24Mbit/s sur une ligne téléphonique classique (au lieu du bas débit limité à 56Kbit/s). 

•     Le débit dans le sens aval (du serveur vers l’ordinateur) est plus élevé que celui dans le sens amont (de l’ordinateur vers le serveur). 

•     Le débit diminue avec l’augmentation de la distance entre l’utilisateur et le central téléphonique. 

•     Le téléphone reste libre durant la connexion.

Administration

Aucun ordinateur ne fonctionne tout seul il faut au minimum assurer les dépannages lorsque cela est nécessaire, surveiller que tout fonctionne correctement, que le disque dur n’est pas plein, que de méchants pirates ne s’attaquent pas aux fichiers, etc C’est le rôle de l’administrateur système. L’administrateur du serveur web (la même personne pour les sites de petite taille) se limite à la surveillance du logiciel serveur.

Apache

Ce n’est pas un indien ! C’est le logiciel serveur le plus répandu sur Internet (depuis une bonne dizaine d’années). Logiciel libre, Apache a beaucoup contribué à l’essor d’Internet.

Balise

Mots spéciaux du langage HTML qui donnent au navigateur des instructions de mise en forme du texte. Par exemple, pour mettre un texte en gras, il suffit d’écrire :

          "le texte".                             est une balise.

Base de données

Une base de données est un programme qui ordonne des données (textes, tableaux de chiffres, photos, ..) de manière structurée (titres d’un côté, articles de l’autre) afin d’y accéder rapidement. Un grand nombre d’hébergeurs proposent la base de données Mysql.

Blog  

Un blog (contraction de Binary Log, littéralement journal numérique) est un site web permettant à une personne d’écrire et mettre en ligne son journal, tout en préservant des fonctions d’interactivité : chacun peut commenter le blog. 

Des logiciels spécialisés permettent de s’affranchir de toute contrainte technique.

Browser Butineur voir navigateur.

CMS (Content Management System)

Un CMS (en français Logiciel de Gestion de Contenu) est un logiciel permettant de gérer simplement le "contenu" de votre site web (par opposition à la présentation).  SPIP est une sorte de CMS.

Code, code source

Désignation d’instructions rédigées en langage informatique connu d’un logiciel. L’écriture d’une page web en langage HTML produit le code reconnu par les navigateurs. On parle de code source de la page.

Courriel,  Courrier électronique

Courriel est le terme officiel, synonyme de courrier électronique.

Le courrier électronique (échange de messages entre personnes, comparable au courrier postal) est une des applications les plus anciennes d’Internet, et sans doute la plus utile. (voir aussi e-mail)

CSS

Le langage HTML décrit la structure du texte (titres, paragraphes, etc…). Le langage CSS le complémente en décrivant des feuilles de style indiquant la manière d’écrire les titres, les paragraphes et comment effectuer la mise en page.

DNS (Domain Name Server)

Système d'annuaire distribué sur l'Internet qui donne l’adresse IP correspondant à nom de domaine (  par exemple) et réciproquement.

Easyphp

C’est un "pack" logiciel sous Windows comprenant trois logiciels libres : Apache, Php et Mysql. L’ensemble de ces trois logiciels vous permet de réaliser une maquette de site web, sur votre PC, que vous pourrez ensuite envoyer sur la machine de votre hébergeur.

Flash

Ne souriez pas pour la photo : Flash est tout simplement le nom d’un logiciel informatique (dont la licence coûte relativement cher), permettant de réaliser des animations. Attention, l’internaute ne dispose pas obligatoirement de Flash : pensez donc à donner la possibilité de "contourner" le code Flash pour consulter le site.

Forum web

C’est comme un grand espace d’affichage dans un lieu public ; chacun peut lire, écrire ce qu’il veut et participer à la conversation… Quand l’espace vient à manquer, les messages les plus anciens sont effacés pour laisser de la place aux nouveaux.

Fournisseur d’accès

Comme son nom l’indique, il fournit un accès à Internet, via une ligne téléphonique, le câble, ou tout autre moyen de transmission.

Ftp

(File Transfer Protocol) Protocole de communication définissant une manière d’échanger des fichiers en utilisant Internet. Un logiciel FTP sera utilisé pour envoyer les pages d’un site web sur un serveur de l’hébergeur.

Groupe de news

Imaginez une boîte postale, qui serait mise en place dans le bureau de poste de votre quartier. Vous écrivez un message, vous le mettez dans la boîte, et aussitôt celui-ci est photocopié et envoyé à tous les bureaux de postes de toutes les villes du monde. D’autre part, chaque message reçu (qu’il vienne d’un habitant du quartier ou qu’il ait été envoyé par un autre bureau de poste) est affiché dans le bureau de poste, de sorte que vous pouvez lire tous les messages reçus jusqu’à ce que le tableau d’affichage soit plein (les employés des PTT retirent alors les messages les plus anciens). Chacun peut donc lire les discussions passant par ce service, et chacun peut y participer.

Hébergement

Si un internaute dit qu’il cherche à être hébergé, cela ne veut pas forcément dire qu’il est à la rue mais plutôt qu’il recherche un serveur sur lequel il pourrait déposer ses pages html afin que celles-ci soient consultables sur l’Internet.

Hébergeur

Société ou organisme chargé de mettre en ligne des sites Internet. Les pages html sont stockées sur des serveurs dont l’hébergeur assure la maintenance, le dépannage et la sécurité à la fois matérielle et logicielle. Les tarifs d’hébergement sont variables selon les exigences de service requises.

HTML

(HyperText Markup Language). Langage de balisage qui permet une présentation agréable des textes et la navigation dans le texte et en dehors du texte par des liens (hyperliens ou liens hypertexte).

Le html, "langage" au sens informatique du terme, sera interprété par un navigateur.

Http

Protocole de communication définissant la manière de transférer des pages html. Lorsqu’une adresse Internet commence par le mot http://, cela signifie qu’il s’agit d’une page web.

Internet

Littéralement « ce qui relie les réseaux », Internet est le nom donné au super-réseau de câbles et de fibres optiques qui permet de relier entre eux des ordinateurs ou d'autres réseaux distants et différents dans le monde entier  

Ce réseau universel est la propriété collective de ses utilisateurs. Il permet de relier entre eux divers réseaux humains, réseaux de relations, communautés d’idées. On parle aujourd’hui de communautés virtuelles et de communautés électroniques

Internet Explorer

Logiciel de navigation sur Internet élaboré par Microsoft. Il existe de nombreux autres navigateurs (voir Mozilla, Firefox et Opéra).

IP(Internet Protocol)

C’est le protocole standard universel de transmission des données sur le réseau Internet. On parle plus fréquemment de protocole TCP/IP.

javascript

Javascript est un "langage de scripts" qui s’exécute sur votre PC. Il est surtout utilisé pour donner aux pages web plus de vie ou plus d’interactivité (par exemple en activant des images ou des sons lorsque la souris survole tel ou tel élément).

Lien hypertexte

Les liens hypertextes d’une page web apparaissent généralement en lettres bleu souligné. L’utilisateur pointe sa souris sur ce lien, clique, et accède directement à la page de destination indiquée. Cette nouvelle page peut se trouver sur le même serveur, ou être sur une machine située à des milliers de km de là.

Linux

Système d’exploitation gratuit, et de ce fait seul vrai rival de Windows .

Liste de diffusion

Imaginez un service des PTT  au fonctionnement suivant: chaque courrier qui lui est adressé est photocopiée et renvoyée à toutes les personnes figurant sur une liste (les abonnés de cette liste). Très pratique pour la communiquer au sein d’un groupe, le procédé serait assez lourd. Remplacez le terme courrier par courriel, et ce service des PTT par un logiciel et voila le mode de fonctionnement des listes de diffusion.

Logiciel libre

Un logiciel libre donne aux termes de sa licence 4 droits fondamentaux à l’utilisateur; ce dernier peut :

•   utiliser le logiciel sans aucune restriction (certains logiciels commerciaux vous imposent de payer pour utiliser le logiciel durant une durée limitée). 

•   analyser le code du logiciel, afin de comprendre comment il marche (et par exemple de vérifier qu’il ne fait pas d’opérations non visibles). 

•   redistribuer des copies du logiciel (éventuellement, revendre ces copies, par exemple avec un livre qui en explique le fonctionnement). 

•   modifier le code du logiciel (il est techniquement possible de l’empêcher) et redistribuer ses modifications (ce qui permet d’assurer un développement collectif).

Avec sa démarche créatrice collective, le logiciel libre offre à son utilisateur une réelle liberté et la possibilité d’être acteur des évolutions.

Mail, e-mailvoir courrier électronique.

Modérateur

Concernant une liste de diffusion, un groupe de news ou un forum web, le modérateur est une personne qui reçoit tous les messages (le pauvre ) et prend la décision de publier ou non chaque message. Il peut éliminer les messages hors sujet ou personnels, tout ce qui nuit à ce genre de débats, et peut amener les lecteurs « sérieux » à s’en détourner.

Moteur de recherche

Le nombre de sites sur Internet est extrêmement élevé, la quantité d’information est donc énorme, mais elle n’est absolument pas structurée. Les moteurs de recherche permettent de rechercher les sites consacrés à un thème précis (recherche par mots-clés).

Mozilla, Firefoxvoir Internet Explorer.

Multimédia

Internet est multimedia, car il est possible de faire figurer sur une page html aussi bien du texte que des images ou des sons.

Mysql

Voir Base de données

Navigateur

Pour surfer sur Internet (passer d’un serveur à l’autre en cliquant sur les liens hypertextes), il faut utiliser un programme informatique : c’est le navigateur (appelé aussi browser ou butineur).

Nom de domaine

Nom apparaissant dans une adresse Internet : ,   sont des noms de domaine.

OpenOffice

Une suite bureautique, un logiciel libre qui offre quasiment les mêmes fonctionnalités que Microsoft Word, Excel et Powerpoint. En plus, OpenOffice permet de générer très simplement des fichiers au format pdf.

Opera

Voir Internet Explorer.

Page html

Page écrite en langage html. Chaque page possède une URL (une adresse) qui peut être référencée par un lien hypertexte.

pdf

Un format de fichiers, qui garantit la reproduction du document à l’identique sur les écrans de tous formats (contrairement à une page html). La taille d’un document au format pdf est plus réduite que sous les formats issus des traitements de texte : l’affichage sera plus rapide. Enfin, un fichier pdf ne transporte pas de virus et ne peut pas être modifié.



La suite bureautique OpenOffice permet de générer des fichiers pdf de manière très simple

Php

Php est un "langage de scripts" qui s’exécute sur le serveur. Il permet de réaliser aussi bien de petits outils pour simplifier la gestion du site, que des logiciels très puissants. SPIP est écrit en Php.

Pointeur

voir lien hypertexte.

Protocole de communication

Ensemble des règles auxquelles doit obéir tout programme ayant pour objet d’établir une communication.

Sur Internet, ces protocoles sont publics (on dit aussi ouverts) ce qui permet à tout un chacun d’accéder à toutes les informations disponibles mais aussi de réaliser ses propres publications.

Registrar

En français : bureau d’enregistrement de nom de domaine. Une société qui s’occupe de réserver et de publier les données de DNS correspondant à votre domaine. En France, Gandi est un de ces bureaux.

Serveur

Système informatique (logiciel et machine) destiné à fournir des services à des utilisateurs connectés et, par extension, organisme qui exploite un tel système. 

Les pages html sont placées sur des serveurs pour être consultables sur le web. On peut avoir son propre serveur ou choisir d’utiliser les services (gratuits ou non) d’un hébergeur.

SPIP

Un CMS (voir ce mot) simple d’emploi, prisé du monde associatif et du monde professionnel. SPIP est un logiciel libre, qui a besoin pour fonctionner des logiciels Php et Mysql présents chez la plupart des hébergeurs (mais pas tous. Il faudra vérifier si votre hébergeur est dans ce cas). 

Pour mettre au point votre site vous pouvez aussi installer SPIP sur votre PC sous Windows (grâce au logiciel easyphp), ou sur votre C sous Linux ou votre Mac sous Mac OS X.

Squelette

Dans un site sous SPIP, se dit des fichiers (une vingtaine environ) qui permettent de définir la mise en pages du site, les facilités de navigation, la disposition des rubriques, etc   Un fichier CSS est toujours associé au squelette, il permet en particulier de sélectionner les polices, et les couleurs qui vont habiller le squelette.

Syndication

Deux sites web syndiqués fonctionnent en tandem : les mises à jour de l’un sont automatiquement reflétées par l’autre. 

Grâce à la syndication, une association qui possède plusieurs sites régionaux, peut obtenir d’afficher en région, sans intervention des webmestres, des informations nationales parfaitement à jour.

Tag

voir balise.

TCP/IP voir IP

Téléchargement

Transfert de programmes ou de données d’un ordinateur vers un autre. Pour un internaute, le téléchargement est le plus souvent un transfert vers son propre ordinateur depuis un serveur (sens aval), ou parfois depuis l’ordinateur vers le serveur (sens amont).

URL

Adresse d’une page html par exemple, ou de tout autre objet (par exemple, une adresse électronique est une URL.

Validation html ou Xhtml

Si vous voulez que votre page html soit correctement représentée sur tous les navigateurs (et pas seulement sur le vôtre), il est important qu’elle soit validée "conforme aux spécifications" du langage html. Dans le cas contraire, vous laissez le champ libre au navigateur, qui interprètera le code à sa façon et les différents navigateurs n’ont pas la même manière !

Web

En anglais web, est l’abrégé de World Wide Web (toile d’araignée mondiale). La plupart des adresses Internet commencent par les initiales de ce mot : www. 

La multitude des liens hypertextes qui permettent, d’un clic de souris, de passer d’une page html à l’autre évoque les fils de la toile d'araignée.

Webmaster, webmestre

Personne qui assure la maintenance d’un site Internet. L’adresse de courriel du webmestre figure le plus souvent sur les pages d’un site pour servir de contact aux internautes qui ont des demandes, des observations ou des suggestions à faire.

W3C

(World Web Consortium). Organisme qui définit les normes des langages HTML et CSS.

Wiki

Un wiki est un site web que l’on construit "à plusieurs" : toutes les personnes ayant accès au wiki (c’est-à-dire, bien souvent tout le monde) peuvent écrire des articles, et ainsi faire vivre et grossir le site. Techniquement, Wikipedia est construit autour d’un wiki.

Wikipedia

Une encyclopédie libre, ce qui signifie que chacun peut participer à l’élaboration de cette encyclopédie, et ainsi partager ses connaissances.

WYSIWYG

Acronyme de What You See Is What You Get. Un éditeur HTML est de type WYSIWYG lorsque le source html reflète exactement ce qui apparaît à l’écran de composition de la page. Ces logiciels facilitent la création de pages web (pas de nécessité de connaître le langage HTML) mais produisent souvent un code de qualité médiocre.

Xhtml  

(eXtended HTML) Désigne le langage HTML étendu (voir Html), conforme aux dernières spécifications du W3C.

Codification des caractères spéciaux

Caractère

Code Iso

Entité

Caractère

Code Iso

Entité

À

À

À

à

à

à

Á

Á

Á

á

á

á

Â

Â

Â

â

â

â

Ã

Ã

Ã

ã

ã

ã

Ä

Ä

Ä

ä

ä

ä

Å

Å

Å

å

å

å

Æ

Æ

&Aelig;

æ

æ

æ

Ç

Ç

Ç

ç

ç

ç

È

È

È

è

è

è

É

É

É

é

é

é

Ê

Ê

Ê

ê

ê

ê

Ë

Ë

Ë

ë

ë

ë

Ì

Ì

Ì

ì

ì

ì

Í

Í

Í

í

í

í

Î

Î

Î

î

î

î

Ï

Ï

Ï

ï

ï

ï

Ð

Ð

Ð

ð

ð

ð

Ñ

Ñ

Ñ

ñ

ñ

ñ

Ò

Ò

Ò

ò

ò

ò

Ó

Ó

Ó

ó

ó

ó

Ô

Ô

Ô

ô

ô

ô

Õ

Õ

Õ

õ

õ

õ

Ö

Ö

Ö

ö

ö

ö

×

×

×

÷

÷

÷

Ø

Ø

Ø

ø

ø

ø

Ù

Ù

Ù

ù

ù

ù

Ú

Ú

Ú

ú

ú

ú

Û

Û

Û

û

û

û

Ü

Ü

Ü

ü

ü

ü

Ý

Ý

Ý

ý

ý

ý

Þ

Þ

Þ

þ

þ

þ

ß

ß

ß

ÿ

ÿ

ÿ

?



¡

¡

¡

¢

¢

¢

ƒ

ƒ

£

£

£

¤

¤

¤

¥

¥

¥

¦

¦

¦

§

§

§

ˆ

ˆ

¨

¨

¨

©

©

©

Š

Š

ª

ª

ª

«

«

«

Œ

Œ

&Oelig;

¬

¬

¬



­

­

Ž

Ž

®

®

®



¯

¯

&masr;



°

°

°

±

±

±

²

²

²

³

³

³

´

´

´

µ

µ

µ

·

·

·

˜

˜

¸

¸

¸

¹

¹

&supl;

š

š

º

º

º

»

»

»

œ

œ

œ

¼

¼

¼



½

½

½

ž

ž

¾

¾

¾

Ÿ

Ÿ

¿

¿

¿

Espace

 

 

Ces feuillets sont largement inspirés :

-    de plusieurs sites consacrés au sujet :

  tutoriels CSS.    références du HTML et des CSS.

-    de l’excellent ouvrage de Raphaël GOETTER CSS2 pratique du design web



Attention "fixed" ne fonctionne ni avec IE6 ni avec IE7…

position : fixed ne fonctionne pas sous IE6…


121