Gilbert1.png

HTML et CSS, les langages du web

Et Notepad++ pour composer et développer vous-même votre site web

Vous n'avez besoin d'aucun logiciel payant pour créer votre site
Dans ces pages vous apprendrez à manier le code HTML et la mise en page CSS en vous servant de Notepad++, un logiciel gratuit pour composer et mettre en page votre site web...

Mon site web étape par étape

Mon code HTML et CSS avec Notepad++

BoutonPrecedent BoutonSommaire BoutonSuite Cette page s'affiche mal ? - cliquez ici   

Dans ces pages vous apprendrez à manier le code HTML et la mise en page CSS en vous servant de Notepad++, un logiciel gratuit pour composer et mettre en page votre site web...

Si des erreurs se sont glissées dans le texte n'hésitez pas à me contacter...
Les liens ci-dessous vous renverront au chapitre correspondant.


ÉTAPE 8 : Apprendre les bases HTML et CSS pour embellir mon site

8.1 L'éditeur Notepad++ : brève description

8.2 Le code HTML et XHTML

      8.2.1 Versions de HTML ou XHTML
      8.2.2 Quelques balises HTML courantes
      8.2.3 Listes à puces
      8.2.4 Les liens
      8.2.5 Les images

8.3 Le code CSS (Cascading Style Sheets)

      8.3.1 Le CSS comment ça marche
      8.3.2 Commandes CSS de mise en forme du texte
      8.3.3 Les couleurs
      8.3.4 Couleur du fond et image de fond
      8.3.5 Passage ou clic de la souris (pseudo-formats)
      8.3.6 CSS pour listes à puces
      8.3.7 Les boites
      8.3.8 Enlever la bordure d’une image cliquable
      8.3.9 Bloc centré

8.4 L'iframe en HTML4 (‘inline frame’ ou cadre local flottant)

      8.4.1 L'iframe, définition
      8.4.2 Code d'un iframe
      8.4.3 Ouvrir un lien dans l'iframe
      8.4.4 Problème du compteur de visites
      8.4.5 Limites des iframes
      8.4.6 Sécurité

8.5 Texte fictif de remplissage



ÉTAPE 8 : Apprendre les bases HTML et CSS pour embellir mon site

8.1 L'éditeur Notepad++ : brève description


        • Notepad++ est un petit éditeur bien pratique car il reconnaît à peu près tous les langages et colorie automatiquement le HTML, le XHTML et le CSS ; Notepad++ est un éditeur de code source qui supporte plusieurs langages. Ce programme, qui est codé en C++ avec 100% win32 api et STL, a pour but de fournir un éditeur de code source "petit" (de taille binaire) et efficace (pour la performance d'exécution). Il est développé pour faciliter la vie des développeurs avec une IHM entièrement configurable.

Si ce n'est pas déjà fait, cliquez ici pour télécharger Notepad++ :

        • Son utilisation est très simple :
* Sélectionnez "français" et "default html viewer" ;
* Sélectionnez dans le menu Langages/HTML ou CSS ou PHP, etc.
* Et saisissez votre code !...

BoutonHautDePage

8.2 Le code HTML et XHTML


HTML veut dire « Hypertext Markup Language » et XHTML veut dire « eXtensible Hypertext Markup Language ».

Le HTML ou le XHTML permettent tous deux de définir le contenu et la structure du site web, par opposition au CSS qui définit sa mise en forme. Le XHTML est plus récent que le HTML.


      • 8.2.1 Versions de HTML ou XHTML


Il existe en réalité de nombreuses versions de HTML ou de XHTML. La version utilisée doit être précisée dans la, ou les premières lignes du code comme on le décrit ci-dessous :

        ⇒ HTML-4 généré par Kompozer

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<!-- HTML généré  par Kompozer -->
<head>



        ⇒ HTML de transition

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- HTML entré à la main -->
<head>

(Le HTML de transition est celui que j'utilise le plus, car il est compatible avec mes petits programmes JavaScript...)


        ⇒ XHTML version 1999

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<!-- XHTML entré à la main -->
<head>



        • Exemple de code HTML avec ses balises
Le code HTML est caractérisé par un assemblage de balises disposées dans un ordre précis. Par exemple, <title>Document sans titre</title> est un texte repéré par la balise ‘title / fin de title’.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<!-- HTML généré  par Kompozer -->
<head>
<title>Document sans titre</title>
</head>
<body>
<h1>Ceci est le titre principal</h1>
<h2>Titre secondaire N° 1</h2>
<p>Ceci est le texte du premier paragraphe</p>
<h2>Titre secondaire N° 2</h2>
<p>Ceci est le texte du second paragraphe</p>
<h2>Titre secondaire N° 3</h2>
<p>Ceci est le texte du troisième paragraphe</p>
</body>
</html>
BoutonHautDePage

      • 8.2.2 Quelques balises HTML courantes



Commentaires
<!-- bla bla bla bla --> = commentaire
Note : les noms de balises sont toujours en minuscules, tandis que les attributs peuvent contenir tous les caractères.
On distingue des paires de balises ex : <h1>Ceci est un titre</h1>, ou des balises isolées ex : <br/> en XHTML ou <br> en HTML (mais un « / » dans <br/> ne gêne pas le HTML).

Balises block
Les balises block délimitent les blocs de la page, elles créent toujours un retour à la ligne avant et après. Les blocs peuvent être imbriqués les uns dans les autres.
<title>Web Site N° 1</title> = titre de la PAGE : très important car les moteurs de recherche analysent les mots-clé du titre ;
<head> et </head> = début et fin d’entête
<body> et </body> = début et fin du corps de texte
<h1> et </h1> = début et fin du titre de niveau 1 (heading 1)
<h2> et </h2> = début et fin du titre de niveau 2 (heading 2)
<div> et </div> = début et fin de division, identifie un bloc dans une page
<p> et </p> = début et fin de paragraphe
<q> et </q> = quotes, citation courte entre guillemets (non reconnu par IE6)
<cite> et </cite> = début et fin dune citation (par défaut en italique)
<blockquote> et </blockquote> = citation longue, décalée à droite

Balises inline
Les balises inline s’insèrent n’importe où dans le texte, au sein d’un bloc. A part la balise <br/>, elles ne créent jamais de retour à la ligne. Elles délimitent des mots ou des zones de texte dotés de propriétés spécifiques.
<br/> = retour à la ligne suivante
<a> et </a> = lien hypertexte
<em> et </em> = encadre un mot important (par défaut en italiques)
<strong> et </strong> = encadre un mot très important (par défaut en gras)
<sup> et </sup> = exposant
<sub> et </sub> = indice
<b> et </b> = bold (caractères gras)
<blink> et </blink> = clignotant

Balises universelles
Ce sont des balises génériques qui n’ont aucun sens particulier. Elles servent à appliquer un style CSS particulier pour un mot au milieu du texte, une classe ou un id lorsqu’aucune autre balise ne convient.
<span> et </span> = balise inline qui délimite un mot ou groupe de mots au sein du texte
        Exemple : <p>Texte <span class="nom">Pernot</span> suite du texte</p>
<div> et </div> = balise block, début et fin de division, identifie un bloc dans une page
        Exemple : <div id="entete">Header</div> = ici, début et fin de l’en-tête

BoutonHautDePage

      • 8.2.3 Listes à puces



Listes ordonnées ou non ordonnées
<ul> et </ul> = début et fin de unordonated list à puces (non ordonnée)
<ol> et </ol> = début et fin de ordonated list à puces (ordonnée)

Eléments de la liste à puces
<li> et </li> = encadre chaque élément de la liste à puces ordonnée ou non
<dl> et </dl> = début et fin de la definition list
<dt> et </dt> = encadre une définition de texte de la liste
<dd> et </dd> = encadre une définition du texte qui précède → Exemple :

<dl>
   <dt>Chat</dt>
   <dd>Animal à 4 pattes qui fait "Miaou !"</dd>
   <dt>Chien</dt>
   <dd>Animal à 4 pattes qui fait "Ouaf Ouaf !"</dd>
   <dt>Prof de maths</dt>
   <dd>Extraterrestre venu d'une autre planète qui enseigne des choses que personne ne comprend</dd>
</dl>
BoutonHautDePage

      • 8.2.4 Les liens


Les liens

Lien vers une autre page

        <a href="adresse">Hypertexte</a> est un lien

adresse = C:\site\dossier1\dossier2\cible.html pour les dossiers fils
adresse = ..cible.html pour les dossiers parents

Bulles d’aide sur un acronyme ou sur un lien
<acronym title="Cascading Style Sheets">CSS</acronym> au sein d’un § → quand on passe la souris sur ‘CSS’ on lit une bulle d’aide "Cascading Style Sheets"
<a href="adresse" title="Bulle d’aide">Hypertexte</a> l’attribut title dans un lien permet d’ajouter une bulle d’aide "Bulle d’aide" sur ce lien

Lien qui ouvre une nouvelle fenêtre
<a target="_blank" href="http://www.google.fr/">Links</a>
(N’existe plus en XHTML ⇒ faire Maj+clic sur le lien)

Lien vers un email
<h2>Nous contacter</h2>
<p>Pour nous contacter, <a href="mailto:g.pernot@netscape.net">cliquez ici</a> !</p>


Lien vers une ancre
Sert à cliquer sur un chapitre de la table des matières pour aller directement à ce chapitre dans le corps du texte : très utile pour les grandes pages !

<!--Table des matières : ancres repérées par un # -->
<p>
   <a href="#partie_1">Aller vers cible Chapitre 1</a><br/>
   <a href="#partie_2">Aller vers cible Chapitre 2</a><br/>
   <a href="#partie_3">Aller vers cible Chapitre 3</a><br/>
</p>


<!-- Dans la page : ancres repérées par un id dans les têtes de chapitre -->
<h2 id="partie_1"> Chapitre 1</h2>
<p>Ici texte très long</p>
<h2 id="partie_2">Chapitre 2</h2>
<p>Ici texte très long</p>
<h2 id="partie_3">Chapitre 3</h2>
<p>Ici texte très long</p>


Lien vers l’ancre d’une autre page

<!--Table des matières page1 on ajoute le fichier cible à l’#ancre -->
<a href="page2.html#partie_1">Aller vers cible Chapitre 1</a><br/>
<!—même chose avec une bulle d’aide -->
<a href="page2.html#partie_1" title="Aide">Aller vers cible Chapitre 1</a><br/>
BoutonHautDePage

      • 8.2.5 Les images


Les images
Les noms + extension des fichiers images s’écrivent en minuscules sans blancs ni accents.

Les formats d’images (toujours compressés)
        • JPEG : bon pour les dégradés (photos) ; plusieurs millions de couleurs.
        • GIF : (ancien) 256 couleurs ; mauvais pour les dégradés, peut être transparent et / ou animé.
        • PNG : (récent) plus léger que le Gif en 8 bits 256 couleurs ;
         peut devenir transparent en 24 bits (mais transparence non gérée par IE en 24 bits).
        • BMP : non compressé est à proscrire car trop gros.

Insérer une image
A l’intérieur d’un <p>paragraphe</p>
<img src="pict/f001.jpg" alt="Figure 1" title="Aide"/>
<img/> marque l’emplacement de l’image. C’est une balise isolée.

src="pict/source.jpg" est l’emplacement du fichier source
alt="Texte alternatif" est le texte qui apparaît si le téléchargement échoue
title="Aide" est une bulle d’aide (mais IE affiche le texte alternatif si title est absent !)

Image cliquable
<a href="Nompage.html"><img src="pict/f001.jpg" alt="Fig 1" title="Bulle"/></a>
Le cadre bleu standard autour de l’image cliquable peut s’enlever facilement avec le CSS.
Mettre border: 0;

BoutonHautDePage

8.3 Le code CSS (Cascading Style Sheets)

Le CSS, littéralement ‘Cascading Style Sheets’, c'est à dire ‘Feuilles de Style en Cascade’,


      • 8.3.1 Le CSS comment ça marche


Le code CSS peut être placé :

1) Directement dans les balises, ce qui est absolument illisible ;

2) Dans une feuille de style incorporée entre les balises <head> et </head> :

<head>
	<title>Titre de la page</title>
	<style type="text/css"></style>
	<style title="NomFeuilleIncorporée" media="all" type="text/css">
	h1 {
	font-weight: bold;
	font-family: "Times New Roman",Times,serif;
	text-align: center;
	}
	</style>
</head>


3) Défini dans un fichier CSS entre les balises <head> et </head> comme ci-dessous.

Appel du fichier CSS
Dans le code HTML le fichier CSS est appelé par la balise <link> placée entre les balises <head> et </head> comme ceci :

<head>
	<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
	<title>HomePhotodart</title>
	<link title="NomStyles" media="All" rel="stylesheet" href="stylesPhotodart.css" type="text/css">
</head>

avec :
title = nom de la feuille de style
media = all, print ou screen
rel = c’est une feuille de style
href = adresse du fichier CSS
type = fichier texte css

BoutonHautDePage


Structure du fichier CSS
Le nom du fichier CSS est du type ‘styles.css’ en minuscules, il est structuré comme ceci :

	/* Generated by KompoZer */ ← ceci est un commentaire
	nombalise1 
	{
	propriété: valeur; 
	-----------:--------;
	}
	nombalise2 
	{
	propriété: valeur; 
	-----------:--------;
	}


Le CSS s’applique à une ou plusieurs balises

	p 
	{ color: blue; font-size: 18px; }
	h1, h2, h3 
	{ color: red; font-size: 36px; }


Le CSS s’applique à des balises imbriquées

	h3 em /* toutes les balises em contenues dans un titre h3 */ 
	{ color: blue; }

	p .important /* toutes les classes important contenues dans des balises p */
	{ color: red; font-size: 36px; }
	blockquote p strong, h1 important
	/* toutes les strong d’un p situées dans un blockquote
	ET toutes les class important d’un titre h1 */
	{ color: red; font-size: 36px; }


Le CSS s’applique à des classes

<p class="important"></p>
	.important 
	{ color: red; font-size: 36px; }

<p>Comme l’a dit <span class="nom">Neil Armstrong</span> en 1969</p>
	.nom 
	{ color: blue; font-size: 24px; }


Le CSS s’applique à des id
Les id sont des éléments qu’on n’utilise qu’une fois dans la page come les logos, etc. Ils ont l’avantage d’être reconnus par le JavaScript.

<img src="pict/logo.png" alt="Logo du site" id="logo"/>
	#logo 
	{ float: left; margin-right: 20px; }
BoutonHautDePage

      • 8.3.2 Commandes CSS de mise en forme du texte



Commentaires

	/* bla bla bla bla */  = commentaire
	/* 
	Commentaire long n°1
	Commentaire long n°2
	*/


Taille des caractères
• Taille absolue

        font-size: 16px; /* taille du texte en nombre de pixels */

• Taille relative

        font-size: xx-small; /* ou x-small, small, medium, large, x-large, xx-large */
        font-size: 0.7em; /* ou 0.8em, 0.9em, 1em, 1.1em, 1.2em, 1.3em, … */
        font-size: 70%; /* ou 80%, 90%, 100%, 110%, 120%, 130%, … */


• Classes de taille

        .petit_em
        { font-size: 0.7cm; }
        .grand_em
        { font-size: 1.3cm; }


Polices de caractères
La police appliquée dans la page sera de préférence la première si elle existe, sinon la suivante, etc.
        font-family: Arial,"Times New Roman",Times,"Courier New",serif;

Les polices les plus courantes sont celles-ci:
        font-family: "Comic Sans MS","Trebuchet MS",Georgia,Impact,"Arial Black", Arial,Verdana,
        "Times New Roman",Times,"Courier New",serif;


Italiques
        font-style: italic; /* ou normal (remarque : italic = oblique… */
Note : <em> veut dire ‘important’ et non pas italique, italic est juste la valeur par défaut.

Gras
        font-weight: bold; /* ou normal */
        strong, h1{ font-weight: bold; }

Les titres h1 et les balises strong seront en gras.
Note : <strong> veut dire ‘très important’ et non pas gras, bold est simplement la valeur par défaut.

Majuscules – minuscules
        text-transform: uppercase; /* ou lowercase, capitalize, none */
        font-variant: small-caps; /* ou normal */

• Exemple :

        Code HTML :

<h1>Je suis très en colère...</h1>
<p>...mais je vais essayer de rester calme. Enfin, si possible, mais je ne promets rien hein...<br/>
<span class="pousser_une_gueulante">ahhhh !!! non cette fois je craque ! qui c'est qui a mis de 
la mayo dans mes frites !??<br/>sacrilège !</span></p>
<p class="chuchoter">CECI EST UN PARAGRAPHE QUE JE CHUCHOTE, ALORS QUE POURTANT 
DANS LE CODE XHTML IL EST ECRIT EN MAJUSCULES</p>


        Code CSS :

h1
{
	text-align: center;
	font-family: Arial, "Times New Roman", Verdana, serif;
	text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}
.pousser_une_gueulante
{
	text-transform: uppercase; /* Si j'ai envie de me faire entendre, je mets en majuscules */
}
.chuchoter
{
	text-transform: lowercase;
	font-style: italic; /* Le texte chuchoté sera en minuscules et italique */
}
BoutonHautDePage


Barré – souligné, etc.

	text-decoration: underline; /* (souligné) 
	ou line-through (barré), 
	overline (barre au dessus),
	blink (clignottant) [ne marche pas sous IE],
	none (normal)
	*/



• Exemple :

        Code HTML :

<h1>A ne pas manquer !</h1>
<p>La propriété CSS <em>text-decoration</em> permet de décorer un peu son texte :<br/>
<span class="souligne">en le soulignant</span>...<br/>
<span class="barre">en le barrant</span>...<br/>
...ou encore <span class="ligne_dessus">en mettant une ligne au-dessus</span>.</p>


        Code CSS :

h1
{
   text-align: center;
   font-family: "Arial Black", Arial, "Times New Roman", serif;
   text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas sous Internet Explorer) */
}
.souligne
{
   text-decoration: underline;
}
.barre
{
   text-decoration: line-through;
}
.ligne_dessus
{
   text-decoration: overline;
}


Alignements
        text-align: left; /* ou center, right, justify */

Indentation (retrait première ligne)
        text-indent: 30px; /* retrait de 30 pixels, s’applique à <p> ou aux titres… */

Première lettre
        p:first-letter { font-weight: bold; font-size: 120%; color: blue;
        /* la première lettre du paragraphe sera bleu, gras, 120% */ }


Première ligne
        p:first-line { font-family: "Arial Black", Arial,Verdana,
        /* la première ligne du paragraphe sera en Arial Black, sinon en Arial, etc.*/ }

BoutonHautDePage

      • 8.3.3 Les couleurs



Noms des couleurs

         color: red; /* texte de couleur rouge */

Il existe ainsi 16 couleurs standard : white, silver, grey, black, aqua (bleu pastel), blue, navy, teal (vert-bleu), olive, green, lime (vert clair), yellow, red, maroon, purple, fuchsia. Remarquons que l'orange n'est pas une couleur standard, mais elle est en général reconnue.

Voici un essai avec toutes ces couleurs (à part le white qu'on ne voit pas) :     ♦ white ♦ silver ♦ grey ♦ black
♦ aqua ♦ blue ♦ navy ♦ teal ♦ olive ♦ green ♦ lime ♦ yellow ♦ orange ♦ red ♦ maroon ♦ purple ♦ fuchsia


Code hexadécimal d'une couleur

	color: #D2F87A;
	/* code couleur hexadécimal : D2 de rouge, F8 de vert, 7A de bleu */
	color: #000000; /* tout noir */
	color: #FFFFFF; /* tout blanc */


Méthode RGB (ou RVB)

         color: rgb(211, 248, 123); /* code couleur RGB gradués de 0 à 255 */

RGB (Red,Green,Blue) ou RVB (Rouge,Vert,Bleu)
Dans Paint : Couleur / Modifier les couleurs / Définir des couleurs personnalisées
Piquer dans la palette et noter les couleurs RVB
Sinon télécharger « La boite à couleurs » (1,45Mo)
http://www.siteduzero.com/uploads/fr/ftp/mateo21/boite_a_couleurs.exe
Piquer dans la palette et relever le code hexadécimal de la couleur


      • 8.3.4 Couleur du fond et image de fond
	background-color: #FF5A28; /* code couleur hexadécimal */


Affecté à <body>, c’est tout le corps de texte qui aura cette couleur de fond ; dans <p>, ce sera tout le paragraphe.

On peut aussi surligner (passer au stabylo jaune) un titre ou un mot du texte à l’aide d’une classe :

<p>Comme l’a dit <span class="surligne">Neil Armstrong</span> en 1969</p>

	.surligne /* Un style qui permet par exemple de surligner certains mots d'un texte */
	{ background-color: yellow;    color: black; 
	/* Le texte surligné sera écrit en noir, parce que le blanc sur fond jaune on voit rien */
	}


Héritage
Le code CSS qui définit la couleur de fond doit être placé en tête de tous les autres styles CSS, autrement par exemple, tous les titres hériteraient des styles de <body> car ils sont placés dans <body>.

Par contre, d’après la règle de priorité des styles, c’est le dernier style qui s’applique : si l’on définit la couleur de fond de body en premier et celle des titres en dernier, c’est donc cette dernière qui sera retenue.

Image de fond
Dans une page, un titre ou un paragraphe, etc.

	background-image: url("fond.jpg"); /* (relative) ou "http://.... " (absolue) */
	body { background-image: url("../pict/fond.jpg"); /* dans le dossier pict */ }
	background-attachment: fixed; /* image fixe, ou scroll = déroulante avec le texte */
	background-repeat: no-repeat; /* ou repeat-x, repeat-y, repeat */
	background-position: 30px 50px; /* à 30 px de la gauche et 50 px du haut */
	/* ou top, bottom, left, center, right (ou ‘top left’, etc.) */


Méga-propriété (combinée) :

	body { background: url("../pict/fond.jpg") no-repeat top left scroll; }
BoutonHautDePage

      • 8.3.5 Passage ou clic de la souris (pseudo-formats)


Modifier l’apparence des liens

	a { text-decoration: none; color: red; font-style: italic; }


Changement de style au passage souris sur un lien

	a:hover { text-decoration: underline; color: green;
	/* Le lien sera vert et souligné quand la souris passe dessus */ }


Note : avec IE6 :hover ne marche que sur les liens

Changement de style quand on clique sur un lien

	a:active { background-color: silver;
	/* le fond du lien sera argenté quand on clique dessus */ }
	a:focus { background-color: silver;
	/* le fond du lien sera argenté quand le lien est sélectionné */ }


Note : :focus le garde argenté plus longtemps que :active mais :focus ne marche pas sur IE, alors il vaut mieux mettre les deux :

	a:active, a:focus { background-color: silver; }


Lien vers une page déjà vue

	a:visited { text-decoration: line-through;
	/* ou font-style: italic; ou color: yellow; */ }


Changement de couleur au passage souris sur le fond de paragraphe

	p:hover { background-color: silver;
	/* Le paragraphe change de couleur au passage de la souris */ }



Ajouter un texte ou une image avant et/ou après
Note : ne marche pas du tout sur IE
Permet d’ajouter du texte ou une image avant ou après un fragment :

<p class="fragment">fragment de texte</p>

	.fragment:before /* Avant le fragment de texte à compléter */
	{   content: "Ceci est le "; /* Commencer par "Ceci est le " 
	/* Ensuite viendra le fragment de texte à compléter */ }
	.fragment:after /* Après le fragment de texte à compléter */
	{   content: " à compléter."; /* ajouter " à compléter." */ }
	Ajouter une image après un texte :
	.fragment:after /* Après le fragment de texte */
	{   content: url("../pict/icône.gif"); /* ajouter l’image après le texte */ }
BoutonHautDePage

      • 8.3.6 CSS pour listes à puces


Retrait
On définit les classes ci-dessous :

        Code HTML :

<p>Voici une liste avec retrait :</p>

<ul class="avecretrait">
   <li>Liste<br/>à puces</li>
   <li>Ligne 1<br/>Ligne 2</li>
   <li>Vous pouvez voir<br/>que le texte est décalé sur la droite</li>
</ul>
                
<p>Voici une liste sans retrait :</p>

<ul class="sansretrait">
   <li>Liste<br/>à puces</li>
   <li>Ligne 1<br/>Ligne 2</li>
   <li>Vous pouvez voir<br/>que le texte n'est pas décalé sur la droite</li>
</ul>


        Code CSS :

	.sansretrait {   list-style-position: inside; /* Sans retrait */ }
	.avecretrait {   list-style-position: outside; /* Avec retrait */ }



Aspect de la puce
On peut créer des classes CSS comme ceci :

	/* Listes à puces ul non ordonnées */
	list-style-type: disc; /* rond plein = valeur par defaut, inutile de définir une classe */ }
	.cercle {   list-style-type: circle; /* un cercle (vide) */ }
	.carre {    list-style-type: square; /* un carré */ }
	.rien {   list-style-type: none; /* aucune puce ne sera utilisée */  }

	/* Listes à puces ol ordonnées numérotées */
	.chiffresarabes {   list-style-type: decimal-leading-zero; /* 1, 2, 3, 4, 5 (par défaut) */ }
	.2chiffresarabes {   list-style-type: decimal-leading-zero; /* 01, 02, 03 [pas sur IE]*/ }
	.minuscule {   list-style-type: lower-alpha; /* a, b, c, d */ }
	.majuscule {   list-style-type: upper-alpha; /* A, B, C, D */ }
	.romain {   list-style-type: upper-roman; /* I, II, III, IV, V */ }
	.romainminus {   list-style-type: lower-roman; /* i, ii, iii, iv, v */ }
	.grec {   list-style-type: lower-greek; /* [pas sur IE] */ }


Une image pour la puce

	ul { list-style-image: url("icone.png"); /* on donne juste l’url de l’icone de puce */ }
	a { color: blue; text-decoration: none; }
	a:hover { text-decoration: underline; }
BoutonHautDePage

      • 8.3.7 Les boites en CSS


Les boites

Comme nous l’avons vu dans « Mise en page CSS d’un site web avec Kompozer », toutes les balises block (et parfois-même les balises inline) délimitent des boites d’une certaine taille et dotées d’une marge intérieure, d’une bordure et d’une marge extérieure.

La taille de la boite
Exprimée en pixels ou en %, par défaut la largeur de la boite est de 100% (design extensible)

	p { width: 50%; text-align: justify;  /* ou width: 250px; = taille fixe */ }
	p { height: 100px; /* hauteur 100px */ }
	p { min-width: 100px; /* ou height = largeur ou hauteur minimum */ }
	p { max-width: 100px; /* ou height = largeur ou hauteur maximum */ }


L’overflow
L’overflow est très utile pour définir des cadres dans la page web

	p { overflow: visible; /* valeur par défaut = le bloc s’agrandit si le texte dépasse la taille */ }
	p { overflow: hidden; /* coupe le § à une taille donnée: on cache ce qui dépasse */ }
	p { overflow: auto; /* coupe le texte et place des barres de défilement si nécessaire */ }
	p { overflow: scroll; /* coupe le texte et place systématiquement des barres de défilement */ }


Note : <iframe> qui donne la même chose en HTML a été supprimé en XHTML (voir plus loin : ‘iframe’ en HTML4)

L’espacement (padding) ou marge intérieure
Exprimé en pixels en général, par défaut l’espacement est nul c'est-à-dire que le texte est collé aux bords.

	p { padding-top: 15px;  /* ou bottom, left, right, auto */ }


La bordure (border)
Concerne les balises block ou inline. On définit en général trois méga-propriétés (dans n’importe quel ordre) :

	p { border: 2px red outset;  /* quel_côté: largeur couleur type (séparés par des blancs) */ }


• Sur quel côté ?
        → border = sur les 4 côtés
        → border-top = en haut
        → border-bottom = en bas
        → border-left = sur le côté gauche
        → border-right = sur le côté droit
• Largeur = 2px [ou thin, medium, thick]
• Couleur = red [ou black ou #FF0000 ou rgb(198,212,37)]
• Type = none (aucune), solid (trait continu), dotted (pointillés), dashed (tiretés), double, groove (en relief), ridge (3D), inset (3D en creux), outset (3D surélevé)

La marge (margin) ou marge extérieure
La marge proprement dite s’applique toujours aux 4 côtés, vers l’extérieur, par défaut elle existe.

	p { margin-top: 15px;  /* ou -bottom, -left, -right, -auto */ }


Notes :
text-indent s’applique plutôt aux paragraphes car la bordure n’est pas décalée ;
margin-left s’applique plutôt aux blocs car la bordure EST décalée.


      • 8.3.8 Enlever la bordure d’une image cliquable
<a href="Nompage.html"><img src="pict/f001.jpg" alt="Fig 1" title="Bulle"/></a>


Le cadre bleu standard autour de l’image cliquable peut s’enlever comme ceci :

	a img { border: 0; /* a img = toutes les images contenues dans un lien */
		/* ou border: 0px; ou border: none; */
		}

      • 8.3.9 Bloc centré


Utile pour créer un design centré lorsqu’on ne connaît pas la résolution d’écran du visiteur.

p
{
   width: 350px; /* Si on a indiqué une largeur (obligatoire) */
   border: 1px solid black;
   text-align: justify;
   padding: 12px;
   margin: auto; /* On peut donc demander que le block soit centré avec "auto" */
   margin-bottom: 20px;
}
BoutonHautDePage

8.4 L'iframe en HTML4 (‘inline frame’ ou cadre local flottant)


Les IFRAME (en HTML4) permettent d'inclure une page HTML dans un cadre au sein d'une autre page HTML. Ils servent souvent à insérer des bandeaux publicitaires hébergés sur des serveurs dédiés ou une autre page du même site.

Depuis HTML 4.0 la technique <iframe>, d’abord introduite par Microsoft Internet Explorer, est aujourd’hui supportée par les principaux navigateurs (Mozilla Firefox, Opera). Toutefois <iframe> a été supprimé en XHTML et remplacé par le code css p { overflow: visible; } qui fait la même chose (définir des cadres dans la page web).


      • 8.4.1 L'iframe, définition


La balise iframe <iframe> ... </iframe> est une balise HTML. Le nom iframe désigne une "inline frame" (cadre local flottant).

Il ne faut pas confondre la balise iframe avec la balise frame qui sert à diviser une page HTML en différentes pages d’un même serveur organisées de manière logique.

La balise iframe sert, quant à elle, à afficher dans votre page HTML des informations stockées sur d’autres serveurs ou dans d’autres pages du même site :
⇒ Un iframe se comporte donc comme un conteneur permettant d'afficher des pages HTML locales ou distantes.
⇒ Un iframe s’affiche dans un cadre local flottant, c'est-à-dire qu’il s'insère dans le document HTML comme une image (dimensionnement et positionnement). Mais attention, un cadre local flottant n'est pas redimensionnable par l'utilisateur.

BoutonHautDePage

      • 8.4.2 Code d'un iframe


<iframe name="ifr2" src=" http://www.cggveritas.com " width="468" heigh="60">Texte alternatif</iframe>

Attributs
(à placer entre <iframe et >) :

name : nom du cadre (iframe), par habitude on met "ifr1" , "ifr2"... avec le numéro de l'iframe quand il y en a plusieurs. Mais ceci n'est en rien obligatoire. Cette étape est indispensable si vous voulez ouvrir un une page dedans, on verra comment faire par la suite.
src : url de la page source par défaut à afficher dans le cadre.
width : largeur en pixels du cadre.
heigh : hauteur en pixels du cadre.
Texte alternatif → Entre <iframe> et </iframe> : Texte que les visiteurs liront si leur navigateur ne peut pas afficher les iframes.


Attributs facultatifs
(à placer entre <iframe et >) :

scrolling="no" : présence ou non d'une barre de défilement (auto, yes, no ) quand la page insérée dans l'iframe est plus grande que l'iframe lui-même. Attention, avec no, seule une partie de la page sera visible, il faudra alors cliquer dedans et bouger la souris pour voir le reste de la page.
align="..." : contrôle l'alignement du cadre (top, middle, left, center, right, justify ).
frameborder="0" : épaisseur de bordure désirée, la valeur 0 masque l'existence d'une iframe si la couleur de fond de l’iframe est la même que celle de la page où elle se trouve.
marginwidth="..." : définit l'espacement horizontal dans le cadre entre la bordure et le contenu.
marginheight="..." : définit l'espacement vertical dans le cadre entre la bordure et le contenu.
noresize : précise au navigateur que l'utilisateur ne peut pas modifier la taille du cadre. Attribut sans paramètre.
hspace="..." détermine l'espace entre le texte et le cadre sur les côtés verticaux.
vspace="..." détermine l'espace entre le texte et le cadre sur les bords horizontaux.

BoutonHautDePage

      • 8.4.3 Ouvrir un lien dans l'iframe


C'est très simple, il suffit de mettre, pour chaque lien à ouvrir dans l'iframe, le code suivant :

<a href="url de la page à charger dans l'iframe" title="Titre du lien" target="nom de l’iframe">Texte, image ou autre</a>

Ici le nom de l’iframe "ifr1" , "ifr2"... est important, il permet d'avoir plusieurs cadres sur la même page.

Par contre, la page à charger dans le cadre ne doit contenir que le contenu de la page en question, elle ne doit surtout pas contenir les menus etc. Ce qui permet de ne modifier que les menus, headers et footers de la page contenant le cadre et pas ceux de la page appelée dans le cadre.

BoutonHautDePage

      • 8.4.4 Problème du compteur de visites


Le problème est qu'avec cette utilisation, si on met un compteur de visites, il sera affiché une fois, mais une seule fois. En effet, si vous restez plusieurs heures sur un site, le compteur est en évolution permanente, mais il ne sera pas mis à jour puisque la page contenant le cadre n'a pas été actualisée depuis le début de la visite.

Une des solutions est d'ajouter un autre iframe contenant seulement le compteur (en masquant la bordure et les barres de défilement) qui va s'auto-actualiser toutes les minutes par exemple, pour qu'il soit à jour en permanence.

Dans ce cas, il faut placer entre <head> et </head> un iframe de la taille du compteur et le faire actualiser automatiquement avec le code ci-dessous :

	<head>
	<meta http-equiv="refresh" content="60">
	</head>


Où 60 représente l'intervalle des auto-actualisations en secondes. Le compteur de visites sera alors mis à jour en permanence pendant la visite.

Attention cependant à ne pas mettre un compteur de visites sans cookies, dans ce cas, cela rajouterait une visite à chaque actualisation, ce qui fausserait les statistiques.

BoutonHautDePage

      • 8.4.5 Limites des iframes


On ne peut pas référencer une page contenue dans le cadre

On ne peut pas référencer les pages contenues à l'intérieur du cadre, car celles-ci ne contiennent plus les menus, headers et footers ;

Si on veut tout de même référencer une page contenue dans le cadre, il suffit d'inserer dans les <head> de chaque page le code javascript ci-dessous :


	<SCRIPT LANGUAGE="JavaScript">
	if (parent.frames.length < 1)
	{
	document.location.href = ' page contenant notre iframe ';
	}
	</SCRIPT>


Il suffit alors de remplir le nom de la page et sa localisation (en lien relatif ou absolu), et cela devrait marcher. Cela résoud alors le problème du référencement.

On n’a pas l’url de la page contenue dans le cadre

On ne peut pas avoir l'url de la page où l’on se trouve. En effet, celle qui s'affiche dans la barre d'adresses est celle qui contient le cadre, le header, etc..., et si on clique sur cette url on retournera sur la page chargée par défaut.

Le même problème se pose au niveau de l'actualisation. Une solution serait de cliquer avec le bouton droit de la souris et de sélectionner actualiser, cela actualiserait la page contenue dans le cadre.

Il existe une alternative aux cadres qui ne pose pas ces problèmes, ce sont les includes en php, mais ils nécessitent des connaissances en php, alors que les iframes sont très simples à utiliser.

BoutonHautDePage

      • 8.4.6 Avertissement de sécurité


Les iframes ont été la source de nombreuses attaques virales consécutives à la vulnérabilité de certains navigateurs, principalement en juin 2007.

Méthode des attaquants

Lorsqu’un visiteur de votre site voit un iframe dans la page HTML, en réalité, il est connecté sans le savoir à un serveur distant. Un attaquant peut donc exploiter cette propriété pour propager du code malveillant sur la machine de sa victime : il tente d’abord d’accéder au site légitime, puis il insère dans les pages HTML de ce site des iframe qu’il rend invisibles. Pour cela, soit il en réduit la taille au minimum, soit il en bloque l'affichage. Le fait de bloquer l'affichage n'empêche en rien la connexion du visiteur vers le serveur sur lequel se trouve le contenu de l'iframe. Pour rendre l'iframe invisible aux yeux de l'internaute, il suffit d’intégrer à la balise iframe le paramètre style='display:none'

Le visiteur qui se rend sur la page d'un site a priori de "confiance", établit alors à son insu une connexion vers un autre site, et télécharge un code malveillant. Ce code exploite alors certaines vulnérabilités du navigateur et s'installe sur la machine de la victime, et enfin s'exécute.


Moyens de protection

Comme pour toute navigation sur l'Internet les utilisateurs ont intérêt à avoir un compte utilisateur aux droits limités en particulier pour naviguer sur l'Internet, maintenir l'ensemble des logiciels du système à jour (système d'exploitation, antivirus, navigateur, ...), désactiver par défaut l'interprétation de langage dynamique dans le navigateur (JavaScript, Flash, ...), filtrer via un serveur mandataire (local ou mutualisé) l'affichage des balises iframe et lire les courriels au format texte.

Les hébergeurs doivent maintenir à jour l'ensemble des logiciels du serveur, cloisonner les données relatives aux différents sites lorsque l'hébergement est mutualisé (ceci permettra d'éviter une compromission en cascade de l'ensemble des sites) analyser le contenu des pages et proscrire les balises iframe si ces dernières ne sont pas nécessaires au site, contrôler l'intégrité des pages statiques afin de detecter toute modification illégitime du contenu.

Les exploitants du site web doivent inspecter régulièrement les journaux d'événements, utliser des mots de passe forts, particulièrement s'il existe une interface d'administration, fermer les services inutiles (ftp, smtp, ...).

Les concepteurs/développeurs doivent limiter les risques de compromission via une faiblesse de conception, et par exemple, contrôler les variables passées en paramètre lors de l'utilisation de langage de programmation comme PHP ou ASP, contrôler le format des variables si le site possède du contenu dynamique (forum, blog, ...), éviter l'utilisation de langage de programmation dynamique (JavaScript, Flash, ...) si cela n'est pas indispensable.

BoutonHautDePage

8.5 Texte fictif de remplissage

Vous trouverez ci-dessous un texte complètement absurde et qui ne veut absolument rien dire, même pas en latin, contrairement à ce que son allure pourrait laisser supposer. Il vous servira peut-être simplement, comme à moi-même, à boucher les trous dans un site en construction dont on n’a pas encore le texte par exemple.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.

Etiam pede lectus, facilisis sit amet, varius a, malesuada varius, nisl. Aenean aliquam, odio quis semper cursus, nisl lacus rutrum ipsum, a laoreet neque ante vitae tortor. In hac habitasse platea dictumst. Ut at neque interdum enim pharetra commodo. Curabitur erat mi, congue ut, volutpat vel, semper ac, wisi. Sed non metus vel massa pharetra euismod. Nunc quis quam. Curabitur non libero a libero semper tincidunt. Mauris vehicula dui a wisi. Quisque nisl dolor, tempus nec, tristique vitae, eleifend eget, nunc. Duis dapibus, lectus eget egestas consectetuer, nibh metus pharetra nisl, vitae rutrum mi tellus placerat nulla. Praesent sed libero non enim suscipit aliquet. Proin tincidunt pede sit amet eros.

Phasellus sed nisl. Integer rhoncus risus vitae arcu. Praesent sed diam non justo sagittis vulputate. Etiam faucibus posuere tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam porta. Vestibulum lectus ante, laoreet a, condimentum sit amet, dictum ac, sapien. Ut et tortor. Aliquam vitae lacus. Vestibulum non pede eget ante elementum elementum. Quisque accumsan wisi id quam. Integer tortor justo, cursus volutpat, vehicula ut, pellentesque ultrices, neque. Aenean eu tortor vitae dui pretium molestie. Sed dui nibh, rhoncus ut, egestas quis, commodo id, magna. Morbi gravida tellus id diam. Nunc nonummy leo nec velit. Curabitur id lacus a ipsum lacinia accumsan.

Nunc ullamcorper imperdiet lorem. Aliquam convallis, sapien sit amet malesuada dignissim, sem tortor interdum risus, vel scelerisque sapien est ac justo. Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et, pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.

Sed vel erat. Aenean a massa. Quisque ultricies, dolor non rutrum ullamcorper, lorem ligula blandit pede, malesuada volutpat magna dolor et ante. In tellus felis, tincidunt eget, adipiscing eu, gravida sit amet, lorem. Proin dolor. Proin vel elit. Morbi vel enim. Aenean congue enim sed ipsum. Praesent tristique. Ut placerat metus sed nibh. Sed sit amet urna. Morbi et lorem. Sed a erat eget dolor sollicitudin ornare. Maecenas nibh. Quisque tincidunt. Sed odio diam, dapibus a, interdum non, convallis id, pede. Donec condimentum eros eu nunc consequat commodo. Donec tempus fringilla eros.

Mauris mollis luctus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse consectetuer sem at urna. Aliquam dui magna, congue non, porttitor vitae, varius a, lacus. Duis nec enim. Quisque malesuada, lectus vel laoreet egestas, lorem nibh ultricies elit, et varius velit erat vel risus. Maecenas pellentesque nibh et purus. Nulla commodo justo vitae odio. Sed ornare. Quisque at tortor. Donec mi. Vestibulum consectetuer congue purus. Aenean pulvinar.

Nam vel arcu quis justo condimentum egestas. Aliquam dictum wisi. Nam lorem. Ut scelerisque. In velit tortor, venenatis eget, ultricies id, mollis nec, dui. Morbi nec ante vitae libero fermentum aliquam. Ut non quam. Cras ac urna. Aenean sollicitudin turpis sit amet quam. Quisque lacinia. Proin mollis. Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio condimentum lorem, id aliquam lorem enim vitae nibh. Nulla tortor. Nunc pulvinar. Vestibulum malesuada wisi et urna.

Morbi fermentum libero non libero. Nunc in turpis in justo adipiscing scelerisque. Donec id elit non diam aliquet semper. Maecenas pede. Maecenas fringilla. Fusce eleifend dui quis lectus. Praesent facilisis, ligula a consequat posuere, metus purus porta mi, at consectetuer justo wisi id dui. Maecenas mattis. Ut imperdiet pharetra enim. Suspendisse quis leo nec arcu interdum aliquam. Vivamus dictum quam id tellus. Maecenas in quam sit amet risus semper auctor. Integer leo dui, malesuada eu, fermentum at, vehicula at, nisl. Pellentesque hendrerit. Proin ut libero. Curabitur sem ipsum, porta non, feugiat vel, mollis ut, justo. Sed a orci id metus pretium lobortis. Morbi ultrices, quam a facilisis faucibus, odio nunc dignissim enim, eget rhoncus purus erat ac quam.

BoutonPrecedent BoutonSommaire BoutonSuite Cette page s'affiche mal ? - cliquez ici
Architecture Web : Gilbert Pernot