Science Numérique et Technologie - Classe de 2nde

Concevoir un site web en Html/Css

Logo HTML 5 Logo CSS 3

Avant de concevoir un site internet dans son ensemble, il faut apprendre à rédiger/composer une page au format .html. Le Html, HyperText Markup Language est le langage dans lequel ces pages sont rédigées. On met ensuite ces pages en forme (en couleur, avec des encadrements, etc...) à l'aide d'un autre langage : le Css, Cascading Style Sheet.

On rappelle que le menu permettant de naviguer au travers des pages du site (et dans chaque page) est à gauche de l'écran : il suffit d'approcher la souris de l'icône verte .

Présentation de la Séquence

L'objectif des quatre séances de Travaux Pratiques qui viennent sera de concevoir un site web «statique» sur les dinosaures à l'aide des langages Html et Css.

Ce travail sera ramassé et évalué à la fin de la 4ème séance : aucun délai supplémentaire ne sera accordé et un travail non rendu conduira à la note de 0.

Pour apprendre les rudiments de ces langages, il faudra suivre les étapes décrites au fur et à mesure des différentes pages de ce « tutoriel » en ligne. Quelques conseils :

  • Suivez bien les directives des Travaux Pratiques. En particulier, sauvegardez régulièrement votre travail, dans les bons dossiers.
  • A chaque fin d'heure, notez sur un cahier la page de travail à laquelle vous vous êtes arrêté. Cela vous évitera de perdre 15 minutes au début de la séance suivante...
  • Vous pouvez aussi sauvegarder votre travail sur clé USB afin de le terminer chez vous ou au CDI puisque ces pages sont accessibles sur internet.
  • Un élève qui suit exactement le « tutoriel » et réalise uniquement et comme il faut le travail proposé aura la note de 16/20. Il faudra ajouter des éléments de style Css pour obtenir la note de 20/20.
  • Le Javascript et les librairies utilisant du Javascript (JQuery, Bootstrap, etc...) ne sont pas autorisées pour ce travail.

Logiciels indispensables

Pour concevoir des pages Html et des feuilles Css, on utilisera deux types de logiciels :

L'éditeur de texte avec coloration syntaxique Notepad++.

Le navigateur internet Firefox.

Qu'est-ce qu'un navigateur internet ?

Un navigateur est un logiciel qui permet d'afficher des pages web.
Pour cela, il interprète de nombreux langages informatiques parmi lesquels :

  • le langage Html qui décrit le contenu d'une page web ;
  • le langage Css qui décrit la mise en forme d'une page web.

L'essentiel de cette séquence en SNT consistera à découvrir quelques éléments de ces langages.

Parmi tous les navigateurs disponibles (notamment sur «smartphone»), on peut citer :

Firefox, qui sera le navigateur à utiliser obligatoirement cette année.

Opera qui est un autre bon logiciel de navigation.

Chrome, un bon navigateur mais qui vous surveille à votre insu.

Internet explorer, un navigateur déconseillé car il pose régulièrement problème de non respect des standards du web.

Plan de la séquence