Site Web
Objectifs
- Expliquer l'utilisation du HTML, CSS et JS
- Créer une page web en HTML
Théorie
Languages du web
Lorsque vous accédez à une page web grâce à votre navigateur web, le serveur web vous envoie un fichier HTML qui contient le contenu de la page web. Ce fichier HTML peut contenir des liens vers d'autres fichiers (CSS, JS, images, vidéos, etc.) qui seront aussi récupéré par le navigateur. Le navigateur web va ensuite interpréter tous ces fichiers et afficher le résultat à l'écran.
Les trois languages principaux utilisés pour créer des pages web sont :
- HTML : HyperText Markup Language
- Définit la structure d'une page web : des paragraphes, des titres, des listes, des tableaux, des formulaires, etc.
- CSS : Cascading Style Sheets
- Définit le style d'une page web : la couleur, la taille, la police, la position, etc. des éléments d'une page web.
- JS : JavaScript
- Définit le comportement d'une page web : des animations, des interactions avec l'utilisateur, etc.
Source : https://www.linkedin.com/pulse/building-blocks-web-development-html-css-javascript-sahil-kavitake/
Outils de développement
On va utiliser Visual Studio Code, un éditeur de code (IDE), pour écrire les fichiers HTML, CSS et JS.
Pratique
Connectez-vous sur l'application desktop OneDrive afin d'avoir votre dossier synchronisé.
Réorganisez votre dossier OneDrive, par exemple :
- Mettez tous vos fichiers de l'année dernière dans un dossier
1m
et créez un dossier2m
pour cette année. - Dans le dossier
2m
, créez un dossierinformatique
, puis un dossiersite-web
dans le dossierinformatique
. - md
. ├── 1m/ │ ├── informatique │ └── autres-branches └── 2m/ └── informatique/ └── site-web
- Mettez tous vos fichiers de l'année dernière dans un dossier
Ouvrez l'application Visual Studio Code et ouvrez le dossier
site-web
que vous venez de créer dans votre OneDrive.Créez un ficher
index.html
depuis Visual Studio Code.
Suivez le tutoriel sur OpenClassrooms pour créer une page web :
- HTML
- Créez votre première page web en HTML (sans la partie commentaire)
- Organisez votre texte
- Créez un lien hypertexte en HTML
- Insérez des images
- Quiz
- CSS
WARNING
A la fin du cours, vérifiez bien que votre site web est sur OneDrive.
On va le réutiliser dans un prochain TP où vous allez le partager avec vos camarades.