Cours HTML et CSS

Ce cours présente les bases du langage de représentation HTML et CSS

Presentation du cours HTML/CSS

Ce cours présente les bases du langage de représentation HTML et CSS

W3Schools HTML Tutorial

Cours de référence du site W3Schools en HTML...

W3Schools CSS Tutorial

Cours de référence du site W3Schools en HTML...

TD site from scratch

TD sur la construction d'un site "from scratch"... à terminer

Parcours d'apprentissage

Grille d'auto-évaluation permettant de parcourir l'ensemble des notions de base en HTML/CSS, par la pratique en réalisant un premier modèle de site professionnel.

1MADE_MODE

Grille d'autoévaluation la création du site de cours en DNMADE MODE 1. Objectif : Connaître, assimiler et manipuler les concepts de base du HTML/CSS en se basant sur la documentation.
mdp:EsdmDiderotAnnée_en_cours*

1MADE_DG_NI

Grille d'autoévaluation la création du site de cours en DNMADE DG1 NI. Objectif : Connaître, assimiler et manipuler les concepts de base du HTML/CSS en se basant sur la documentation.

DSAA DG1

Grille d'autoévaluation la création du site de cours en DSAA DG1. Objectif : Connaître, assimiler et manipuler les concepts de base du HTML/CSS en se basant sur la documentation.

Un exemple de site Pro : Chloé Huet

Un site professionel réalisé par une étudiante de DSAA Design Graphique et Narration Multimédia de Boulogne,Chloé Huet. Vous pouvez télécharger une version allégée ne contenant que 2 pages projets...

Un exemple de site Pro : Noémie Soubeyran

Un site professionel réalisé par Noémie Soubeyran en DSAA2 Design Graphique à l'ESDM en 2022-2023. Vous pouvez télécharger une version allégée ne contenant que 2 pages projets...

Un exemple de site Pro : Léa Dos Santos

Un site professionel réalisé par Léa Dos Santos en DSAA2 Design Graphique à l'ESDM en 2023-2024. Vous pouvez télécharger une version allégée ne contenant que 2 pages projets...

Un exemple de site Pro : Maxime Pappotto

Un site professionel réalisé par Maximme Pappotto en DNMADE MODE 3eme Année à l'ESDM en 2022-2023. Vous pouvez télécharger une version allégée ne contenant que 2 pages projets...

Un exemple de site Pro : Clémentine Lefèvre

Un site professionel réalisé par Clémentine Lefèvre en DNMADE MODE 2eme Année à l'ESDM en 2022-2023.

Templates W3Schools

Différents templates (modèles de site) libre de droits proposés par W3Schools.

Exemple de cours

Sites de effectués en cours de HTML/CSS.

Archives sites des Étudiants

Archive de tous les sites effectués par les étudiants depuis 2022-2023.

Google Fonts

Banque de Fonts libre de droits, facilement utilisable via l'inclusion de "link" dans le head...

W3 Schools - Google Fonts

Tutoriel permettant d'inclure la typographie Google Fonts dans une page HTML via l'inclusion de "link" dans le head.

DaFont

Banque de Fonts libre de droits, facilement utilisable par le téléchargement des fichiers ttf ou otf. Il suffit de créer une @font-face rules dans la css...

W3 Schools - @font-face Rule

Tutoriel permettant d'inclure la typographie en téléchargeant directement les fichiers ttf et otf dans le dossier "fonts" de vos ressources.

Typothèque Esa

Bibliothèque numérique "open source" dans laquelle sont enregistrées toutes les typographies créées par les étudiants de l’option graphisme de l'Esa.

Collletttivo

Collletttivo designs and distributes free Open-Source typefaces.

velvetyne

VTF, or the Velvetyne Type Foundry, designs and distributes free and open source typefaces

Adobe Font

Tutoriel pour ajouter des fonts Adobe sur votre site. Fait par Claire Baron (2MADEDG_ED_2023-2024) et ChatGpt.

Flexbox - CSS-Tricks

Une description complète et élégante des Flexboxes.

Flexbox - W3-Schools

Une description complète et élégante des Flexboxes.

Flexbox - Mozilla Developper

Une description complète et élégante des Flexboxes.

Top Navigation Menu

Comment réaliser un menu horizontal simple.

Portfolio - Slideshow

Comment réaliser un portfolio sous la forme d'un diaporama.

Favicon

Comment insérer un "favicon", c'est-à-dire une petite image affichée à côté du titre de la page dans l'onglet du navigateur.

Pseudo-class Hover

Le sélecteur :hover est utilisé pour sélectionner des éléments lorsque vous les survolez avec la souris. Le sélecteur :hover DOIT être placé après les sélecteurs :link et :visited (s'ils sont présents) dans la définition CSS, pour être effectif !

Transitions

Transition de style dynamique. W3Schools

Animations

Animations sur des éléments HTML/CSS : Trnaslation, rotations, etc. W3Schools

Slider en CSS

Une page proposant un slider en CSS

Vidéo en background

Tutoriel expliquant comment placer une vidéo en background d'une page. Une méthode utilisé dans le projet ABCdaire effectué parles DNMADE Graphisme ENI en 2022 (voir ci-dessous).