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édenteDernière révisionLes deux révisions suivantes | ||
formations:devweb_1 [03/09/2021 13:41] – fjiang | formations:devweb_1 [15/04/2023 03:14] – dmassif | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Devweb 101 : Les bases du développement web ====== | ||
+ | |||
+ | Ce premier tutoriel a pour but de donner les bases en développement web, en effectuant la création puis la mise en ligne de votre page perso Centrale. | ||
+ | |||
+ | ** Compétences abordées : ** HTML, CSS, SFTP, Liens entre fichiers (absolu/ | ||
+ | ===== Prérequis ===== | ||
+ | |||
+ | Aucune connaissance technique n'est requise, si ce n'est savoir utiliser un minimum un ordinateur. Certains logiciels sont nécessaires, | ||
+ | |||
+ | ==== Notre première page ==== | ||
+ | Commençons par créer un fichier base.html (affichez les extensions de fichier sur windows si vous ne pouvez pas ajouter l' | ||
+ | |||
+ | <file html / | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <!-- Un commentaire --> | ||
+ | Bonjour.< | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Si vous enregistrez le fichier et que vous ouvrez le fichier avec un navigateur, vous devriez voir ceci. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -> La ligne contenant **< | ||
+ | |||
+ | -> La balise **< | ||
+ | |||
+ | -> La balise **< | ||
+ | |||
+ | ==== Rajoutons un peu de style ==== | ||
+ | |||
+ | === Stylisons un texte === | ||
+ | Nous allons maintenant voir comment rajouter un peu de style à notre texte. Modifiez le fichier précédent avec ce contenu et ouvrez le avec un navigateur : | ||
+ | |||
+ | <file html / | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <!-- Un commentaire --> | ||
+ | <div class=" | ||
+ | <br /> | ||
+ | Ceci est un texte non stylisé. Il n'est entouré d' | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | Expliquons un peu ce qui a été fait ici : on utilise ici la balise '< | ||
+ | Cette balise est une balise assez générique très utilisée en html, elle permet des actions à appliquer à son contenu. Ici, on précise à la balise **div** une classe de style **grand_centre** que l'on a définie plus haut dans la section head et qui définie tous les styles qui seront appliqués au contenu de la balise <div> (à savoir notre texte). Dans notre cas, la classe de style précise de rendre le **texte plus gros (200%)**, que la police à utiliser est le **Verdana**, | ||
+ | |||
+ | === Rajoutons une couleur de fond === | ||
+ | |||
+ | On peut aussi rajouter une couleur de fond à notre site. Pour cela, on va appliquer un élément de style à notre balise **< | ||
+ | |||
+ | <file html / | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | < | ||
+ | |||
+ | body{ | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <!-- Un commentaire --> | ||
+ | <div class=" | ||
+ | <br /> | ||
+ | Ceci est un texte non stylisé. Il n'est entouré d' | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | === Séparons le style (.css) de la structure (.html) === | ||
+ | |||
+ | Pour faire un code plus ' | ||
+ | |||
+ | <file css / | ||
+ | |||
+ | body{ | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | .grand_centre { | ||
+ | color: blue; | ||
+ | font-family: | ||
+ | font-size: 200%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | et | ||
+ | |||
+ | <file html / | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | <link href=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <!-- Un commentaire --> | ||
+ | <div class=" | ||
+ | <br /> | ||
+ | Ceci est un texte non stylisé. Il n'est entouré d' | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Remarque : On n' | ||
+ | ==== Les images ==== | ||
+ | |||
+ | Nous allons ajouter une image de bienvenue à notre page et la centrer. Créez un dossier **images** dans votre dossier et placez y une image, (dans cet exemple nous utiliserons le portrait de Jean Loutre en guise d' | ||
+ | |||
+ | <file html / | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | < | ||
+ | |||
+ | body{ | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | .image_centre { | ||
+ | | ||
+ | } | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <!-- Un commentaire --> | ||
+ | <div class=" | ||
+ | <br /> | ||
+ | <div class=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | <br /> | ||
+ | Bienvenue sur mon CV. Vous trouverez sur cette page différentes informations concernant ma personne. | ||
+ | <br /> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | **Expliquons ce qui a été fait ici :** | ||
+ | |||
+ | -> On a ajouté une balise **< | ||
+ | |||
+ | -> A cette image on fixe une largeur de 200 pixels. La hauteur étant automatiquement proportionnellement affichée. | ||
+ | |||
+ | -> On entoure l' | ||
+ | |||
+ | A ce point là, votre page devrait ressembler à ceci : | ||
+ | |||
+ | {{: | ||
+ | |||
+ | C'est évidemment un site très basique, codé avec du HTML/CSS de base. | ||
+ | |||
+ | |||
+ | Si vous voulez, vous pouvez vous amuser à modifier le texte et les images, et à rajouter les éléments suivants où vous le souhaitez : | ||
+ | |||
+ | **Un lien :** | ||
+ | |||
+ | <file html> | ||
+ | <a href=" | ||
+ | </ | ||
+ | **Des titres :** | ||
+ | |||
+ | <file html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | **Une citation :** | ||
+ | <file html> | ||
+ | <p>Ma citation préférée < | ||
+ | </ | ||
+ | |||
+ | **Un tableau :** | ||
+ | <file html> | ||
+ | <table style=" | ||
+ | <tr> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </tr> | ||
+ | <tr> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </tr> | ||
+ | <tr> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </tr> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== TP CV SVP ==== | ||
+ | |||
+ | <file html / | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | < | ||
+ | |||
+ | body{ | ||
+ | background-color: | ||
+ | padding-left: | ||
+ | } | ||
+ | |||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | .gros_bout h2 { /*Concerne toutes les balises h1 dans les balises de classe gros_bout*/ | ||
+ | color: black; | ||
+ | font-family: | ||
+ | font-size: 200% | ||
+ | } | ||
+ | |||
+ | .gros_bout li { /*Concerne toutes les balises h1 dans les balises de classe gros_bout*/ | ||
+ | font-size: 101% | ||
+ | } | ||
+ | |||
+ | .image_centre { | ||
+ | | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <div class=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | | ||
+ | <div class=" | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Si vous le souhaitez, vous pouvez mettre votre page personnalisée en ligne sur votre page perso Centrale : avec FileZilla en SFTP en vous connectant sur **sas1.centrale-marseille.fr** avec vos identifiants Centrale et le port **22**, fichiers à placer dans **/ | ||
+ | |||
+ | Vous aurez alors accès à votre page à cette adresse : | ||
+ | https:// | ||
+ | |||
+ | Vous aurez certainement remarqué que ce site n'est pas très beau et fait très " | ||
+ | ==== Ce qu'il faut retenir : ==== | ||
+ | |||
+ | -> Le HTML/CSS sont des langages FrontEnd, c'est à dire dont le code est entièrement visible par le visiteur quand il va sur le site | ||
+ | |||
+ | -> Une page HTML est structurée grâce à des balises | ||
+ | |||
+ | -> Ces balises permettent d' | ||
+ | |||
+ | Lien vers la CheatSheet HTML/CSS : https:// | ||
+ | |||
+ | ==== Pour la suite ==== | ||
+ | [[formations: | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | Cette formation a été réalisée par [[user: | ||
+ | |||