Sites web : à la découverte du HTML et du CSS

16 novembre

Intro

Pour débuter les recherches, chaque groupe peut doit s’appuyer sur une veille informationnelle en cours.

Pour l‘économie de l’attention, pour Facebook et les données personnelles, pour Amazon et pour la neutralité du Net.

Une bonne stratégie de recherche passe par…

La recherche avancée avec Google

… la création d’alertes Google

… l’agrégation de contenus via les flux RSS


23 novembre

Cours #1 – La structure d’une page Web

Intro

Commençons par les bases, et découvrons ensemble comment fonctionne le triptyque Navigateur / HTML / CSS. Une mise en bouche rapide qui se concluera par la création d’une page web ultra simpliste 🙂

Cliquez sur ce lien pour accéder au déroulement général du TP.

Cliquez sur ce lien pour accéder au déroulé du cours dédié au HTML.


30 novembre

Cours #2 – Les principales balises HTML pour organiser son texte

Intro

Reprenons la page créée au cours précédent et allons plus loin en découvrant les balises essentielles qui vont structurer votre page.

Cliquez sur ce lien pour accéder au cours #2.


21 décembre

Cours #3 – Insérer des liens

Exercice

Reprenez la page que vous avez rédigée en cours (et chez vous). En vous appuyant sur le cours ci-dessous, insérez au moins 2 liens qui pointent vers les articles que vous avez utilisés pour nourrir votre page.

Le cours est ici, à lire jusqu’au .2 inclus. Me demander l’ouverture du fichier.

Et pour les retardataires et autres procrastinatrices, vous pouvez récupérer le cours en cliquant sur le lien ci-après : ICN 1ere ES – Cours n°3 – Insérer des liens


11 janvier 2018

Programme du jour : Poursuite de la rédaction des pages HTML. A la lumière de ce que vous avez déjà rédigé, et en fonction d’une actualité récente liée à votre sujet, il me semble pertinent d’enrichir vos sites Web de nouvelles informations.

Mais avant cela : Il me semble également pertinent d’utiliser dès à présent des versions corrigées de vos pages. Mode d’emploi :

  1. Téléchargez le fichier qui correspond à votre nom
  2. Enregistrez-le dans vos documents, à l’emplacement du fichier html déjà sauvegardé
  3. Ouvrez-le dans Notepad++ afin de poursuivre sa rédaction

Vos pages, par ordre alphabétique (clic droit, Enregistrer sous, bla bla…) :

Ambre : ambre-index2

Anne : anne-Index2

Clarisse : clarisse-index2

Léana : leana-index2

Maëlys : maelys-Index2

Mathilde : mathilde-index2

Mélanie : melanie-index2

Shirley : shirley-index2

J’ai demandé (dans le corps du texte corrigé) à certaines d’entre vous de modifier/ajouter/approfondir certains aspects/articles/arguments. Merci d’y procéder avant d’enchaîner.

Dans le PDF ci-après, vous trouverez des liens vers des articles qui enrichiront vos sujets. Ressources cours #3.1 – de nouveaux articles à exploiter

Maëlys, l’article « abonnés » du Monde, est ici : Polémique Facebook : qu’est-il reproché au réseau social ?

Vous prendrez ensuite le temps de réorganiser votre site Web en respectant le cahier des charges qui suit.

Ainsi, dans votre site, je veux voir…

  • Une page d’accueil, nommée… accueil.html
  • Sur cette page, il y aura un paragraphe de présentation du sujet général
  • Mais également le sommaire sous forme de liste, avec liens directs
  • Ensuite, je veux une page html par article, nommée avec pertinence…
  • Chaque page comprendra un titre principal
  • Mais aussi des sous-titres
  • Des paragraphes, avec des liens qui pointent vers les articles sources
  • Des images (au moins une) avec un lien vers leur source
  • Une vidéo (s’il y a lieu)
  • Des liens vers les autres pages du sites pour faciliter la navigation au sein du site

A vous de vous organiser, de communiquer entre vous, d’utiliser vos drive, de mémoriser les URL des articles sources, et de vous répartir les rôles dans le projet afin de pouvoir présenter un beau site Web lors de l’oral de fin de projet, le 22 février prochain 🙂


18 janvier 2018

Cours #4 – Intégrer des images

En cette nouvelle année, nous passons un cap avec l’intégration des images dans notre site Web. Youpi ! Mais attention, jeune Padawan numérique : au-delà du seul fait de rédiger du code HTML, l’insertion d’images implique d’autres problématiques ; techniques (avec la question des formats et des dimensions), éthiques (avec la question des droits) ou encore esthétiques (bah oui, vous n’allez pas intégrer des images moches).

Bref, si vous souhaitez prendre un peu d’avance, le cours est là : Cours n°4 – Intégrer des images dans une page HTML

@++

Bonus track : le diaporama qui rappelle les 3 ou 4 choses à savoir quant aux images

Bonus track n°2 : de l’importance de la balise Alt


25 janvier 2018

Cours #4 – Intégrer des images, la suite

Aujourd’hui TP ! Vous savez comment rédiger des pages HTML, il est temps que votre site prenne forme. Pour cela, vous allez rédiger un article par page, y intégrer des liens et des images. Suivez les consignes ci-après : TP #2 – Intégrer des images dans sa page Web

Une fois les pages rédigées, de la première à la dernière balise, nous verrons comment créer des miniatures qui, via un lien, afficheront une image dans de plus grandes dimensions.

Au boulot !


1er, 8 février 2018

Cours #5 – La mise en forme avec CSS 3

Passons aux choses sérieuses ! Vos sites sont créés, ou presque. Les pages sont liées entre elles, les images intégrées. Il ne reste plus qu’à mettre tout cela en forme. Rappelons encore une fois le mantra du développeur débutant : »le HTML structure votre site, le CSS le met en forme ». Ci-après, le cours #5, au format PDF. Bonne lecture 🙂

Cours n°5 – La mise en forme avec CSS 3, les bases


15 février 2018

Cours #6 – CSS, en mode avancé

Cette fois, à l’aide du document PDF ci-dessous, qui n’est rien de plus qu’un mémo où sont listées les principales propriétés CSS, vous allez enrichir la présentation de vos sites Web. Faites-vous plaisir, mais surtout concertez-vous afin de définir une charte graphique unique pour votre site.

Ressources cours #5 (suite) – Les balises CSS, la récap

Vous pourrez également vous exercer en ligne (et récupérer des lignes de code) à l’aide du site html-css-js.com

Et si vous ne trouvez pas votre bonheur dans les 16 couleurs vues la semaine dernière, utilisez les couleurs héxadécimales en cliquant sur ce lien.

Bon travail 🙂