Vous êtes sur la page 1sur 2

chapitre 5 Architecture et réseaux 2

HTML et CSS :
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.

Partie 1 : Les balises html.


1) Que signifient les sigles HTML et CSS ? Années d’apparition de ces langages ? Expliquer succintement les termes
Hypertext et Cascading.
2) Quelle est la différence fondamentale entre HTML et CSS ?
3) Connaître le code minimal d’une page html.
4) Principe d’utilisation des balises : une balise ouvrante et une fermante, qui délimitent le contenu entre les deux.
5) Particularité des balises dites orphelines, ou autofermantes comme <br/> ou <img…/>
6) Identifier les principales balises : paragraphe, titres, mise en valeur d’une partie précise d’un texte…
7) Savoir créer une liste (à puces ou numérotée)
8) Savoir créer un lien hypertexte ; ajouter un attribut dans une balise.
9) Savoir insérer une image dans une page web.
10) Savoir ajouter des commentaires dans le code de la page.

Partie 2 :.Feuille de style


1) Savoir attacher un fichier CSS à une page html via la balise <link …/>
2) Savoir ajouter des commentaires dans le code de la feuille.
3) Savoir modifier l’apparence (couleur, taille, fond, bordure,…) d’une partie de la page.
4) Être capable de cibler une partie précise (toutes les balises d’un type, ou au contraire juste une balise bien précise).
5) Utiliser les attributs id et class (quelle différence entre les deux ?)
6) À quoi servent les balises <div> et <span> ? Quelle différence entre les deux ?
Partie 3 :.Approfondissement
1) Savoir améliorer la structure de la page avec les balises <header>, <footer>, <nav>, <section>,…
2) Connaître la différence entre une balise block et une balise inline. De quel type sont les principales balises.
3) Savoir modifier les dimensions d’un bloc, modifier les marges, mettre une bordure…

Optionnel ; uniquement pour ceux qui souhaitent creuser le sujet :


4) 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.
5) Savoir créer un tableau.
6) 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…

Vous aimerez peut-être aussi