Le cours HTML

13.1. FrontPage

13.2. Les tableaux, mise en page simplifiée.

13.3. Insertion d'images

13.4. Les paragraphes

13.5 Bases HTML

13.6. Liens hypertextes et signets

13.7. Structure du site, taille des pages

13.8. Extensions FrontPage

13.9. Introduction aux CSS

13.10. CSS , les tableaux

13.11. Positionnement de zone en CSS

13.12 Formulaires

Divers

Les sites de la Province de Luxembourg

Une formation webmaster? YBET informatique en 60 heures dans nos locaux ou par groupes.

Access, la base de donnée de Microsoft: cours en ligne

Liens: Création et référencement de site
Quelques sites intéressants sur la conception et le référencement de sites Web

Référencement, création de sites Spécialiste du référencement naturel, positionnement dans les moteurs, site à partir de 250 € hTVA

Sur le sujet

Créer son site Internet, avant de débuter, petites explications

Le fonctionnement des moteurs de recherche, comment sont positionnées les page dans les requêtes.

Référencement Internet, un beau site, c'est bien, visité c'est encore mieux. Quelques explications sur le positionnement dans les recherches de Google.

La mise en ligne d'un site, explications complémentaires, htaccess, ...

Le PHP, MySQL: Dans la même série de formation en ligne, introduction au PHP, gestion de base de donnée MySQL.

Liste des META, les balises et Meta à utiliser et ... les autres

Cours informatiques entreprise, Formations sur site ou en nos locaux en Word, Excel, Access, CIEL, ... YBET informatique

Dans l'actualité

Actualité: Les farceurs du référencement: arnaques et consorts
19-01-2010
Actualité: Les liens aident ou non au référencement?
11-10-2009
Actualité: Les liens aident-ils au référencements, pénalités de Google
11-10-2009
Actualité: Facebook et la vie prive inventée
13-05-2009
Actualité: Les liens externes vers une page aident'ils à la géolocalisation?
06-02-2009
Actualité: La géolocalisation des sites Internet sur Google
06-02-2009
Actualité: Le mode Cloud, Microsoft Strata
11-10-2008
Actualité: Les pénalités et sanctions de Google, et en plus ...
17-09-2008
Actualité: Les sanctions de duplicate content (3)
15-09-2008
Actualité: Pénalités de Google, les liens
15-09-2008

10. Feuilles de styles externes, deuxième partie

1. Introduction - 2. Styles de paragraphes et textes personnels - 3. Cadres et tableaux en CSS (tableaux simples et personnalisés)

1. Introduction.

Dans le chapitre précédent de ce cours, nous avons vu l'utilisation des propriétés de pages des CSS. Nous insérions directement les propriétés dans l'en-tête HTML (entre <head> et </head>). Cette partie peut-être utilisée pour une page, mais ne permet pas de changer directement les propriétés de toutes les pages en utilisant une seule feuille de style. Comme nous avons vu au chapitre précédant, pour signaler à une page HTML ou PHP qu'elle doit utiliser la feuille de style style.css (par exemple), vous devez insérer <link rel="stylesheet" type="text/css" href="style.css"> entre <head> et </head> de votre en-tête HTML. Nous allons en plus étudier un peu plus les CSS pour des propriétés un peu plus spécifiques.

2. Styles de paragraphes et textes personnels.

C'est cette seconde possibilité que nous allons voire maintenant. Prenons la feuille de style ci-dessous:

a:link
{
color: rgb(0,0,255);
}
a:visited
{
color: rgb(255,255,153);
}
a:active
{
color: rgb(255,51,0);
}
body
{
font-family: Times New Roman,Verdana, Arial, Helvetica;
background-color:#D8EAFA;
color: rgb(0,0,0);
}
table
{
table-border-color-light: rgb(255,255,102);
table-border-color-dark: rgb(0,0,0);
}
h1, h2, h3, h4, h5, h6
{
font-family: Verdana, Arial, Helvetica;
}
h1
{
color: rgb(0,0,255);
}

Jusqu'ici, rien de bien compliqué. Nous avons déjà analyser la majorité des lignes, y compris modifier les propriétés. Nous souhaiterions créer un nouveau style de texte, appelé texte, police ARIAL, 14 pt de couleur rouge.

La ligne à ajouter est (remarquez le .texte) servant à définir texte comme style

.texte
{
font-family: Arial, Helvetica;
Color: #FF0000;
Font-size: 12.5pt;
}

Il nous reste à l'implanter dans notre paragraphe. Pour coder un paragraphe suivant un style déclaré, nous pouvons utiliser <p class="style-sans le point">texte</p>, ce qui dans notre exemple donne: <p class="texte">Le résultat.</p>

Le résultat.

Pour uniquement une partie de texte, nous allons utiliser SPAN, soit <span class="texte">une partie du texte<span>

3. Cadres et tableaux en CSS

L'utilisation de tableau est courante dans l'HTML. Ils servent finalement à tout, à structurer des données bien sûr, mais également à positionner le contenu de la page à un emplacement bien défini.

Un tableau standard se définit par différentes balises. Voici les principales

<table>: crée le tableau
<tr>: ligne du tableau
<th>: cellules d'entête du tableau
<td>: cellules du tableau

3.1. Tableau simple.

Commençons par un tableau simple et modifions un peu la présentation. Nous allons insérer la partie suivante dans notre feuille de style précédente.

table{
border: medium solid #000000;
width: 50%;
color: rgb(102,102,51);
table-border-color-light: rgb(255,255,102);
table-border-color-dark: rgb(0,0,0);
}
td, th
{
border: medium solid #000000;
width: 50%;
color: rgb(255,102,51);
}

Ceci va alléger le code. Voyons le codage de tableau suivant (standard):

Nous allons le remplacer par

<table>
<tr>
<td>texte</td>
<td>texte</td>
</tr>
<tr>
<td>texte</td>
<td>texte</td>
</tr>
</table>

Remarquez tout de suite le code épuré, il n'y a plus ni les 50%, ni les font color à l'intérieur du tableau. Cette solution pose néanmoins un gros problème, c'est que tous les tableaux vont reprendre les attributs par défaut de la feuille de style et chaque tableau de la page se retrouve en bordure épaisse en noire avec une largeur de 50 % de la page.

3.2. Tableaux personnalisés.

Y a t'il moyen de ne pas imposer à tous les tableaux? Vous l'avez compris, Oui.

Un tableau se compose finalement de différentes propriétés, sa taille, l'espacement entre les cellules, la couleur et la taille de la bordure, ... Nous allons d'abord commencer par une solution simple, modifier les propriétés d'un tableau sans la largeur. Dans le fichier CSS, insérons par exemple ceci:

#table1
{
visibility: visible;
width: 100%;
position: relative;
}
#table1 table
{
font-size: 10px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent
}
#table1 td
{
padding: 5px;
background-color: #99ff99; }

Dans la feuille de style, nous imposons la taille du tableau (100% et l'attribut visible). En deuxième partie, nous décidons quelques attributs pour le tableau comme la taille des caractères (Font-size:10px, la police et le fond (transparent)).

La dernière partie met un fond de couleur vert dans chaque cellule avec une bordure interne de 5 px pour le contenu. Le codage en html donne:

Finalement, on ajoute simplement <div id="table1"> devant le tableau et on termine par </div>.

1	2	3	4
1	2	3	4

Remarquez que la même chose mais en remplaçant background-color: #000000 permet de mettre les espaces du tableaux en blanc.

1	2	3	4
1	2	3	4

Vous pouvez également utilisez le th pour modifier uniquement la première ligne du tableau (ou d'autres cellules). Au niveau de la feuille de style cela rajoute simplement

#table1 th
{
vertical-align: top;
padding: 5px;
background-color: rgb(153,153,153);
}

Dans le tableau, il suffit simplement de remplacer td par th pour les cellules qui reprennent cette propriété.

FORMATIONS	Le MAGASIN YBET	PRODUITS et SERVICES
Formation Internet à Chiny	Activités et présentation	Logiciel de gestion
COURS HARDWARE	Rayon d'action	Caisses enregistreuses TEC
Tutorial access	Plan d'accès	MATERIEL INFORMATIQUE