diff options
Diffstat (limited to 'content/prise_en_main/web/créer-du-contenu')
3 files changed, 49 insertions, 15 deletions
diff --git a/content/prise_en_main/web/créer-du-contenu/_index.md b/content/prise_en_main/web/créer-du-contenu/_index.md index 6b4ca67..44fc976 100644 --- a/content/prise_en_main/web/créer-du-contenu/_index.md +++ b/content/prise_en_main/web/créer-du-contenu/_index.md @@ -6,4 +6,8 @@ weight = 0 date = 2022-09-01 [extra] weight_custom = 4 -+++
\ No newline at end of file ++++ + +Votre site est désormais complètement configuré. Avant de publier du contenu, il faut écrire celui-ci ! + +Vous pouvez, au choix, [l'écrire à la main](./a-la-main/), ou vous [faire assister par un générateur](./avec-un-generateur/).
\ No newline at end of file diff --git a/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md index e904b98..1fa39a0 100644 --- a/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md +++ b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md @@ -1,7 +1,7 @@ ---- -title: Avec un générateur -description: Créer du contenu avec un générateur -sort_by: weight -date: 2022-09-01 -weight: 2 ----
\ No newline at end of file ++++ +title = "Avec un générateur" +description = "Créer du contenu avec un générateur" +sort_by = "weight" +date = 2022-09-01 +weight = 2 ++++
\ No newline at end of file diff --git a/content/prise_en_main/web/créer-du-contenu/à-la-main.md b/content/prise_en_main/web/créer-du-contenu/à-la-main.md index 35d4dcb..8cc1555 100644 --- a/content/prise_en_main/web/créer-du-contenu/à-la-main.md +++ b/content/prise_en_main/web/créer-du-contenu/à-la-main.md @@ -1,7 +1,37 @@ ---- -title: À la main -description: Créer du contenu à la main -sort_by: weight -date: 2022-09-01 -weight: 1 ----
\ No newline at end of file ++++ +title = "À la main" +description = "Créer du contenu à la main" +sort_by = "weight" +date = 2022-09-01 +weight = 1 ++++ + +Garage, comme tout serveur web, va se contenter ici de servir des fichiers `.html`. Ces fichiers sont tout à fait lisibles et écrivables par un humain. Ainsi, si vous n'avez pas prévu d'avoir un site avec beaucoup de pages, il est souvent intéressant de façonner chacune d'entre elles à la main. + +### Décrire le contenu + +Pour écrire un page web, il faut écrire un fichier `.html` en suivant, justement, la syntaxe et les règles HTML. À titre indicatif, voici un exemple simple : +``` +<!DOCTYPE html> +<html lang="fr"> + <head> + <title>Mon site</title> + </head> + <body> + <p>Bonjour; bienvenue sur mon site !</p> + </body> +</html> +``` +Vous pourrez facilement trouver moult ressources en ligne pour maîtriser le HTML. [La documentation de Mozilla sur le sujet](https://developer.mozilla.org/fr/docs/Web/HTML) est un bon départ. Enfin, il faut savoir que le HTML est un langage pour décrire le contenu de la page seulement, pas l'allure ou l'esthétique ! La conséquence directe est qu'une page reposant uniquement sur HTML sera sobre : texte noir sur fond blanc, avec alignement à gauche. Si cela vous suffit, vous pouvez d'ores et déjà vous arrêter sur ça. + +### Décrire l'apparence +Si vous souhaitez ajouter des couleurs, modifier la disposition, ou l'arrangement par exemple, il faut rajouter, au-dessus du HTML, une description CSS qui contient vos règles esthétiques. Vous pouvez par exemple créer un fichier `style.css` à la racine du dossier représentant votre site. Ensuite, dans vos pages HTML que vous souhaitez styliser, il faut rajouter, dans la section `<head>`, la formule suivante : `<link rel="stylesheet" type="text/css" href="style.css">` (attention le chemin de `style.css` est relatif, par exemple si vous voulez styliser une page dans un dossier, il faudrait alors marquer `../style.css` à la place). Une fois ceci fait, lorsque quelqu'un va visiter une page HTML, il va automatiquement récupérer le fichier CSS associé, et l'appliquer. Voici encore une fois, à titre indicatif, un contenu exemple pour `style.css` : +``` +body +{ + margin: 0 auto; + max-width: 1000px; + padding: 10px 10px 10px 10px; +} +``` +Encore une fois, plein de ressources sont disponibles en ligne, et Mozilla propose encore une fois [une bonne base](https://developer.mozilla.org/fr/docs/Web/CSS).
\ No newline at end of file |