- Le site : https://lamouchedu94.github.io/Nsi1/index.html
- Le source: https://github.com/lamouchedu94/Nsi1/releases
Le web, conçu comme un outil ouvert, collaboratif et émancipateur, a été détourné par des escrocs et des trolls, qui l’ont utilisé pour manipuler le reste des internautes à travers le monde. Tim Berners-Lee, inventeur du web
Objectif : S’inscrire sur le site https://openclassrooms.com/fr/ et suivre le cours « apprenez à créer votre site web avec html5 et css3 » (https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3). Cela représente environ 8 à 12h de travail. Il n’est pas question de connaître par cœur toutes les balises et toutes les propriétés de ces langages, mais de comprendre les grands principes. Ainsi, les deux mémento disponibles sur le drive (dossier architecture et réseaux) seront autorisés en évaluation. Le logiciel https://code.visualstudio.com/ pourra être utilisé pour éditer les fichiers html et CSS.
Plus qu’un devoir, les trois parties du présent document sont un guide précisant les notions importantes et les savoir faire à acquérir en suivant le cours en ligne. Vous devez utiliser ces notions en élaborant votre site web et être capable à la rentrée de répondre à toutes ces questions.
- Que signifient les sigles HTML et CSS ? Années d’apparition de ces langages ? Expliquer succintement les termes Hypertext et Cascading.
- Quelle est la différence fondamentale entre HTML et CSS ?
- Connaître le code minimal d’une page html.
- Principe d’utilisation des balises : une balise ouvrante et une fermante, qui délimitent le contenu entre les deux.
- Particularité des balises dites orphelines, ou autofermantes comme
<br/>ou<img.../> - Identifier les principales balises : paragraphe, titres, mise en valeur d’une partie précise d’un texte...
- Savoir créer une liste (à puces ou numérotée)
- Savoir créer un lien hypertexte ; ajouter un attribut dans une balise.
- Savoir insérer une image dans une page web.
- Savoir ajouter des commentaires dans le code de la page.
- Savoir attacher un fichier CSS à une page html via la balise <link .../>
- Savoir ajouter des commentaires dans le code de la feuille.
- Savoir modifier l’apparence (couleur, taille, fond, bordure,...) d’une partie de la page.
- Être capable de cibler une partie précise (toutes les balises d’un type, ou au contraire juste une balise bien précise).
- Utiliser les attributs id et class (quelle différence entre les deux ?)
- À quoi servent les balises
<div>et<span>? Quelle différence entre les deux ?
- Savoir améliorer la structure de la page avec les balises
<header>,<footer>,<nav>,<section>,... - Connaître la différence entre une balise block et une balise inline. De quel type sont les principales balises.
- Savoir modifier les dimensions d’un bloc, modifier les marges, mettre une bordure...
- Utilisation de Flexbox : comprendre les principes de fonctionnement. Être capable de l’utiliser avec aisance et sans indication n’est pas un attendu du programme.
- Savoir créer un tableau.
- Savoir créer un formulaire simple (par exemple demander nom, prénom, âge...)
Travail à rendre : Conseil : le faire au fur et à mesure du suivi du cours Il est même préférable de penser d’abord sur papier au contenu qu’on veut intégrer et à ce qu’on cerchera à obtenir puis à le réaliser au fur et à mesure du cours. Créer un site web basique en utilisant HTML et CSS. Sujet libre ; vous pouvez parler de vos loisirs, centres d’intérêt, sports pratiqués, présenter un livre, parler d’un sujet qui vous tient à cœur, parler du lycée,... Soyez imaginatifs. Les informations de base (nom, prénom, date de naissance,...) devront être présentes quelque part dans le document.
Il n’est pas question de se lancer dans une dissertation de 12 pages. Le but du travail est de se familiariser avec les notions de base de création d’un site web et d’appliquer ce que vous aurez appris dans le cours. Il sera donc important d’avoir plusieurs sections, des titres, des paragraphes, des images, d’utiliser la mise en forme CSS pour mettre en valeur certains éléments...