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 [2023/07/19 10:47] mrcjl |
— (Version actuelle) | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | ====== Premier site en CSS ====== | ||
| - | |||
| - | =====Présentation===== | ||
| - | ====But==== | ||
| - | Mettre en forme notre site pour le rendre plus agréable à regarder. Si le HTML décrit le contenu, le [[CSS]] décrit la mise en forme. | ||
| - | |||
| - | ==== Connaissances de base ==== | ||
| - | Revoir le cours [[clubinfo: | ||
| - | |||
| - | ==== 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 type< class=' | ||
| - | |||
| - | =====Déroulement===== | ||
| - | ====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 n'y a que des avantages à utiliser le CSS. | ||
| - | |||
| - | Pour notre site, il est toujours nécessaire de créer une nouvelle page complète par nouveau pont et de modifier le menu. Nous pouvons améliorer cela après avoir découvert la [[création de la base de données]] pour notre [[premier site SQL]]. | ||