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 :

• se créer un compte (en haut à droite : create account);
• cliquer-glisser sur le bouton rose (drag and drop), jusqu’à la barre des marque-pages (bookmark);
• Si cela ne fonctionne pas, cliquer-glisser jusqu’à la barre de saisie d’adresses.
  • Cliquer dans cette barre, tout sélectionner (avec les touches ctrl A), puis copier (ctrl C) et coller dans un document texte libreOffice (ctrl V). Lorsque vous voudrez utiliser les lunettes « X-Ray Goggles » par la suite, il faudra :
  • Aller sur le site choisi ;
  • Copier-coller l’adresse des lunettes dans la barre d’adresse ;
  • Appuyer sur entrée.
  • … c’est bien moins pratique que le marque-page…

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 ?

• Allez sur un site que vous visitez régulièrement, de préférence pas trop compliqué.
• Activez les lunettes : il suffit pour cela de cliquer sur le marque-page « X-Ray Goggles » situé dans la barre d'outils. Si vous n'avez pas les lunettes, ouvrez les outils de développement.
• En utilisant les lunettes, déplacez lentement le curseur de la souris sur des objets de la page afin de voir que l'outil inspecte le code et affiche les balises de chaque objet. Les balises précisent ce qu'est chaque partie de la page, et comment elle est présentée. Les balises sont entre < et >. Elles sont souvent ouvertes comme ceci : <nom de la balise >, puis fermées comme cela : </nom de la balise >.
• Survolez une image ou du texte sur la page et appuyez sur la touche « R » de votre clavier (ou bien cliquez).
• Laissez cet écran affiché pour voir le code.
• Notez dans un document LibreOffice la fonctionnalité de la balise comme vous la devinez. Constituez-vous ainsi une liste des balises importantes.
• Si vous avez choisi de bidouiller du texte, rédigez le texte de substitution ; si vous bidouillez une image, recherchez une autre image sur Internet et remplacez l'adresse.
• Si vous avez utilisé les lunettes google, une fois les informations obtenues et les modifications apportées, appuyez sur le bouton OK. Publiez vos modifications sur internet et notez précisément l'adresse de cette publication.

Travail à rendre

Sur traitement de texte (LibreOffice) :

• Indiquez l'adresse de votre site modifié ; si vous n'avez pas pu utiliser les lunettes montrez moi directement ce que vous avez fait.
• Fabriquer un pense-bête des codes html en indiquant les balises que vous avez rencontrées et leur signification.
• Enregistrer le document sous le titre intro_html_Nom premier élève_Nom deuxième élève.
• Envoyer le document par email au professeur, avec l’objet ICN.

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é :

• Tout ce qui est superflu par rapport aux modèles proposés doit être supprimé.
• Le code HTML/CSS doit être nettoyé de tout ce qui est inutile, chaque ligne du CSS -ou presque- doit être commentée.

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 :

• Vos noms. S'ils n'y sont pas je considèrerai que le travail n'est pas fait...
• La licence d’utilisation du site ainsi que le nom des créateurs du template : il serait malhonnête de ne pas préciser que le site que vous avez fait provient d’un modèle, crée et mis à disposition gratuitement par ses créateurs.

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.