shadok Accueil NSI - Tle NSI - 1ere Maths expertes - Tle Liens Archives

Introduction à HTML/CSS

Première partie : Hacker le web !

Présentation

Cette partie se fait sur la première séance uniquement. L'objectif est de créer sa propre page Web en bidouillant et bricolant des pages déjà existantes. Vous pouvez faire cette partie seul ou à deux. Si vous maitrisez -ou avez l'impression de maitriser, ou simplement avez déjà quelques connaissances- le/en HTML, vous pouvez passer directement à la deuxième partie.

Les outils

Le plus sympathique est d'aller sur les lunettes google, puis :

Si des restrictions d'utilisation font que vous ne pouvez utiliser les lunettes google, avec aucun des deux moyens précédents, cherchez dans le menu de Firefox (navigateur conseillé) les outils de développement, icône "clef à molette" dans le menu.

Des idéees pour commencer ?

Travail à rendre

Sur traitement de texte (LibreOffice) :

Merci à ALexis Lamouret pour l'idée des lunettes !

Deuxième partie : faire son site

Présentation

Cette partie se fait pendant l'intégralité du premier trimestre. L'objectif est de créer son propre site en utilisant un modèle préexistant (« template »). Si vous débutez, ce qui est le cas de l'immense majorité d'entre vous, il vaut mieux faire seul un site simple, que de faire à deux un site plus compliqué. Vous apprendrez et retiendrez mieux tout ce que vous allez faire.
La notation/appréciation ne se fera pas sur la complexité du site, mais sur sa qualité :

Méthode

Les modèles (templates en aglais) sont sur le dossier « classes », dans votre classe bien sûr. Ils sont aussi sur ce site, onglet ICN. Vous disposez d'un modèle fait par votre professeur, simplifié par rapport aux modèles présents en open source sur le web, et de modèles bien plus sophistiqués.
Vous pouvez tester les différents modèles en cliquant sur la page « index ».
Une fois que vous vous êtes décidé pour un modèle, copiez-le sur vos documents : ne pas modifier l’original !
Pour modifier le modèle, il vaut mieux travailler dans un éditeur de développement. En effet, vous allez constater que tous les mots-clés sont mis en couleur. Vous utiliserez Notepad++ (qui, s’il n’a pas changé de place, est dans MCNL).
Ouvrez dans Notepad++ le fichier « index.html » et modifiez-le. Visualisez ensuite les changements en l’ouvrant sous Firefox (menu éxecution).

Un site est composé de plusieurs pages HTML, et de feuilles de style CSS. Le HTML est un langage de description, qui permet de dire cette phrase est un titre. Le CSS est un langage de présentation, qui permet de dire les titres sont en vert. Plus un template est sophistiqué, plus les codes HTML et CSS sont lourds. Par ailleurs, dans les templates open source, les feuilles de style CSS sont souvent faites pour tous les sites d'un même web-designer. En conséquence, une toute petite partie de ce code est utilisée réellement. Un des enjeux de ce cours est de comprendre quelques bases de HTML et de CSS, notamment en ne gardant que ce qui est utile pour votre site.

Travail à rendre

Le site bien sûr ! Par e-mail s’il n’est pas trop lourd, sinon sur clé USB.
Comme précisé ci-dessus, le modèle doit être purgé de tout ce qui est inutile, du moins autant que possible, aussi bien en HTML qu'en CSS. Le code CSS, souvent très lourd, doit être nettoyé et commenté. Gardez la première partie du CSS, de /*Extract from normalize.css... à /*fin de l'extrait*/, sans chercher à la comprendre. Commentez également les parties importantes du HTML.

En commentaire dans la partie header de l’index, doivent impérativement se trouver :

Vous pouvez héberger votre site par votre FAI (fournisseur d’accès internet), qui propose en général un espace personnel pour cela. D’autres sites gratuits existent, comme par exemple hostinger.fr qui permet une inscription et une utilisation immédiate.
Envoyer l’adresse du site par email au professeur, avec l’objet ICN.