MON 1 : Le Web Front pour Soline
- MON
- 2023-2024
- temps 1
- Lola Bourdon
MON 1 sur le développement d'un site web basique
Niveau débutant
Mes objectifs pour ce premier MON sont de découvrir les bases des langages HTML et CSS afin d'être capable de coder un site internet simple pour appliquer ce que j'ai appris. Pour rendre cela plus ludique, je vais coder au fur et à mesure de mon apprentissage un site internet très basique décrivant une fiche méthode du langage html pour Soline qui n'a pas suivi la formation html. Par la suite j'améliorerait l'esthétique du site grâce à la découverte de CSS.
Méthodologie
Pour me former aux langages html et css, je suis partie de zéro. J'ai suivi, comme beaucoup, les cours de https://internetingishard.netlify.app. Il est temps de partager mes nouvelles compétences avec Soline pour qu'elle soit capable de faire son site web basique, sans trop approfondir ses connaissances.
1. Prérequis
Pour commencer, Soline aura besoin d'utiliser sur son ordinateur un éditeur de texte tel que Visual Studio Code qu'elle possède déjà, même si elle pourrait en utiliser d'autres.
Sur VScode, elle devra suivre les étapes suivantes :
- Dans l’explorateur de fichier, créer un dossier : "Mon-premier-site-vsc"
- Ouvrir l'application VsCode et choisir Fichier > ouvrir > fichier puis naviguer jusqu'au dossier "Mon-premier-site-vsc".
- Installer l’extension live folder : extension > live folder > installer, qui lui permettra de visualiser son super site web basique
- Créer un nouveau fichier html "premier-essai.html", un icone <> devrait apparaitre devant le nom du dossier
2. Les bases
Maintenant que Soline est sur la fenêtre de son fichier html, voici quelques bases :
Un fichier html se commence avec <html></html>. Maintenant l’intégralité de la page Web doit être enveloppée dans <html> tout le code </html>.
Entres les <html></html>. :
- Il ne faut jamais mélanger les imbrications
- Placer <head></head> qui fait référence au titre de la page, langages CSS, et contenu qui ne seront pas visible directement sur le site
- Écrire le titre de la page entre <title></title> même si il n'apparaitra pas directement sur le site.
Maintenant que le </head> est fermée mais pas le </html>, placer <body></body> qui encadre le contenu visible, rien ne s'affiche sur la page web lorsqu'il est vide.
Dans <body></body> :
- <p></p> encadre les paragraphes,
- <h1></h1> à <h6></h6> sont pour les titres du plus au moins gros
- <ul></ul>et <li></li> servent pour les listes simple et sont indissociables
- On peut mettre le <p></p> dans le <li></li> mais pas dans le <ul></ul>
- Pour faire apparaître les crochets sur la page il suffira de les encadrer par < ; > ; sans espace entre le t et le point virgule
Voyons ce que ces premières informations rendent sur un site web basique. Pour cela il suffit de faire clique droit sur le nom du fichier html et de cliquer sur Open with Live Server :
Il existe également des liste ordonnées qui permettent de numéroter la liste. Cela fonctionne de la même manière mais on remplacera le <ul></ul> par <ol></ol>.
Écrire en Italique, gras ou souligné
Pour écrire en italique :
- Utiliser la commande <em> texte </em>
Pour écrire en gras :
- Utiliser la commande <strong> texte </strong>
Pour écrire en Souligné :
- Utiliser la commande <u> texte </u>
On peux également imbriquer un élément gras dans un italique ou vice versa avec : <em><strong> texte </strong></em>
Avec ces nouvelles informations, voyons ce que cela peut donner sur donner sur notre super site web :
Les Eléments Vides
Les sauts de ligne et les lignes horizontales sont les éléments vides les plus courants. Pour indiquer un saut de ligne définitif, utiliser un seul élément </br> Pour les lignes horizontales, utiliser <hr/>.
Images
Pour finir la formation simple et rapide de Soline, parlons de comment insérer une image sur notre super site web basique.
Pour cela, il faudra ajouter au dossier "Mon-premier-site-vsc", les images que l'on veut utiliser, de la manière suivante :
Partons du principe que Soline n'a que des images.png. Il faut utiliser la commande <img src='/code1.png'/>
On pourra ajuster la taille avec width: <img src='/screen3.png' width='200'/> selon le rendu souhaité.
Le fin du site final est le suivant :
3. Amélioration du site
L'objectif principal du site est terminée mais l'esthétique n'est pas forcément la meilleure. Pour l'améliorer j'ai fait mes premiers pas avec CSS en me basant toujours sur les cours de https://internetingishard.netlify.app. Finalement, j'ai tenté d'amener un côté plus pratique qu'esthétique.
J'ai aimé créer un sommaire avec des liens cliquables (en html) qui créent des liens vers certains titres de la page de la manière suivante :
Dans les balises <head></head> du fichier "mon-premier-site.html" je suis venue ajouter de nouvelles commandes comme une nouvelle police, un nouveau fond (je ne citerai pas tout) et des commandes de couleurs, en CSS, parmi :
qui selon la taille des titres, les affiche de différentes couleurs.
4. Résultat
Pour finir ce premier MON sur le web front, j'ai pu découvrir les langages HTML et CSS. Mes conaissances sont encore à développer, notamment avec CSS mais je suis parvenue au résultat suivant : (affiché en partie)
