Premier site en CSS

But

Découvrir ce qui fait la richesse des pages HTML en les rendant agréables à regarder. Si le HTML décrit le contenu, le CSS décrit la mise en forme. Mettre en forme notre site pour le rendre plus agréable à regarder.

Les commandes

Elles sont de la forme “type_de_mise_en_forme: valeur_de_mise_en_forme;”. L'élément à mettre en forme (balise généralement) peut dépendre d'un autre, appartenir à une catégorie (“class”) ou être unique (“id”). Elles sont dans un fichier séparé dont le contenu est par exemple.

nom_feuille_de_style.css

h1 {
  color: red; 
  font-size: 24pt;
}
p {
  color: blue; 
  font-size: 12pt;
}

Le fichier HTML doit contenir dans l'entête :

page.html

...
<link rel='stylesheet' href='nom_feuille_de_style.css' type='text/css' />
...

Activité

Pour mettre en forme nous allons :

Diminuer la largeur de la page HTML (comme sur ce wiki) et mettre une couleur de fond pour la balise <body>
Améliorer la présentation du menu de la page d'accueil <ul><li>
Améliorer la présentation des titres de page <h1>
Faire gérer par la feuille de style l'image du pont <img class='grandeimg'>
Rendre plus évidents les lieux et les catégories < class='xx'>

Sur notre serveur web, nous allons copier le premier site en HTML réalisé précédemment dans un dossier “sitecss”, puis nous modifierons les fichiers.

Modification des pages existantes

Nous allons ajouter la balise permettant d'insérer la feuille de style dans l'entête de toutes les pages. La feuille de style sera “style1.css”.

Ajouter une feuille de style

    <link rel='stylesheet' href='style1.css' type='text/css' />

Code de la feuille de style

style1.css

body {
	margin-left: 150px;
	margin-right: 150px;
	background-color: silver;
}
ul {
	margin-left: 100px;
	background-color: green;
}
li {
	font-size: 18px;
	font-weight: bold;
	color: yellow;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
        border: 1px solid black;
}
h1 {
	color: navy;
	margin-top: 0px;
}
p.info {
	text-align: justify;
}
img.grandeimg {
	width: 400px;
	float: left;
	margin-right: 20px;
}
P.lieu p.categorie {
	float: left;
	padding-left: 100px;
}

Améliorations

Une nouvelle présentation peut être facilement créée dans une nouvelle feuille de style et rapidement remplacée sur quelques ou toutes les pages.

Inconvénients

Il est toujours nécessaire de créer une nouvelle page complète par nouveau pont et de modifier le menu. Nous pouvons aussi améliorer après la création de la base de données pour notre premier site SQL.

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Table des matières