Outils pour utilisateurs
clubinfo:premier_site_avec_css
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
clubinfo:premier_site_avec_css [2017/12/10 15:58] mrcjl [Code de la feuille de style] |
— (Version actuelle) | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | ====== 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 " | ||
| - | L' | ||
| - | Elles sont dans un fichier séparé dont le contenu est par exemple. | ||
| - | <code css nom_feuille_de_style.css> | ||
| - | h1 { | ||
| - | color: red; | ||
| - | font-size: 24pt; | ||
| - | } | ||
| - | p { | ||
| - | color: blue; | ||
| - | font-size: 12pt; | ||
| - | } | ||
| - | </ | ||
| - | Le fichier HTML doit contenir dans l' | ||
| - | <code html page.html> | ||
| - | <link rel=' | ||
| - | ...</ | ||
| - | |||
| - | ===== 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 < | ||
| - | * Améliorer la présentation du menu de la page d' | ||
| - | * Améliorer la présentation des titres de page <h1> | ||
| - | * Faire gérer par la feuille de style l' | ||
| - | * Rendre plus évidents les lieux et les catégories < class=' | ||
| - | |||
| - | Sur notre serveur web, nous allons copier le [[premier_site_en_html|premier site en HTML]] réalisé précédemment dans un dossier " | ||
| - | |||
| - | ===== Modification des pages existantes ===== | ||
| - | Nous allons ajouter la balise permettant d' | ||
| - | ==== Ajouter une feuille de style ==== | ||
| - | <code html> | ||
| - | <link rel=' | ||
| - | </ | ||
| - | |||
| - | ===== Code de la feuille de style ===== | ||
| - | <code css style1.css> | ||
| - | body { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | background-color: | ||
| - | } | ||
| - | ul { | ||
| - | margin-left: | ||
| - | background-color: | ||
| - | } | ||
| - | li { | ||
| - | font-size: 18px; | ||
| - | font-weight: | ||
| - | color: yellow; | ||
| - | text-decoration: | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | border: 1px solid black; | ||
| - | } | ||
| - | h1 { | ||
| - | color: navy; | ||
| - | margin-top: | ||
| - | } | ||
| - | p.description { | ||
| - | text-align: | ||
| - | } | ||
| - | img.grandeimg { | ||
| - | width: 400px; | ||
| - | float: left; | ||
| - | margin-right: | ||
| - | } | ||
| - | p.categorie { | ||
| - | color: navy; | ||
| - | float: left; | ||
| - | margin: 0px; | ||
| - | padding-right: | ||
| - | } | ||
| - | P.lieu | ||
| - | color: navy; | ||
| - | float: left; | ||
| - | margin: 0px; | ||
| - | padding-right: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | ===== 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]]. | ||
clubinfo/premier_site_avec_css.1512917903.txt.gz · Dernière modification: 2017/12/10 15:58 de mrcjl
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
