A la fin du cours 1, on peut avoir une barre de navigation, un bloc de texte, et une couleur de fond: exemple.

Tous les liens externes mènent au site https://www.w3schools.com/, vous pouvez apprendre directement dessus.

Cours 1


Un dossier zip avec une page web vierge: page_web_vierge.zip ou voir le rendu.

Un zip dans un autre style proposé par Thomas Lepoutre: Toto_dupont.zip ou voir le rendu.

Le dossier contient
Remarque : la librairie Bootstrap est intéressante car elle gère bien le changement d'écran (si on regarde le site sur un ordi, une tablette ou un smartphone).

Utile ! sur une page dont le code vous intéresse : "clic droit, code source de la page" ou "clic droit, examiner éléments" (-> "examiner éléments" peut aussi vous aider à débugger votre page).

Dans le fichier index.html

Dans l'en-tête de vos fichiers .html

Choisir le nom de l'onglet : Les meta-données servent à choisir Si les champs sont vides, la description sera piochés dans les premières phrases de la page, idem pour les mots-clefs.

Premier pas de HTML5

L'en-tête de la page : le titre du site (votre nom) et une barre de navigation (si plusieurs pages ou une page mais longue). C'est juste une liste de liens ! Pour faire une barre soi-même, voir ce lien . De plus, les liens peuvent apparaître au fil de la page. Le premier environnement sera un div qui va vous permettre de diviser la page. Vous pouvez emboiter les "div":

Une page

Section 1

Section 2


Pour les environnements "div", la librairie bootstrap gère deux options par défaut : Séparation verticale : les colonnes de la librairie Bootstrap (qu gère le passage petit et grand écrans).

Les différentes formes de textes : Les images sous l'environnement img. Exemple :
<img src="img/image.png" alt="texte alternatif" width="128px" height="128px">
La hauteur (ou la largeur) suffit, il re-dimensionne proportionnelement :) Et n'oubliez pas de vérifier le chemin ! (et pas le chemin de votre PC, en ligne, ça ne marchera pas...)

Les commentaires en html sont de la forme <!-- commentaire -->.

Dans le fichier design.css

Premier pas de CSS

Le background ! images, couleurs, ou pour les plus téméraires le dégradé (pas toujours intéressant).

Les commentaires en css sont de la forme /* commentaire */.

Vos choix de couleurs seront dans le fichier css pour toutes les pages, et surtout, sans changer les environnements html un par un !

Rq. le nom du fichier est totalement arbitraire, il faut juste vérifier que votre fichier html sache quel fichier css utiliser (cf la partie head de votre fichier html).

Les couleurs ? Là, il va falloir se limiter... Perso, j'utilise : une première couleur, une version plus claire ou plus foncée de la première, une deuxième couleur, une dernière entre blanc / gris / noir (à peu près).
Ici on peut avoir le code html d'une couleur. Pour avoir des idées de combinaisons de couleurs, par ici.

Il y a plusieurs façon de coder une couleur, est-ce que pour nous ça fait une différence ?

Je rappelle qu'on peut aussi coder une couleur en rgb (à valuers entre 0 et 255), hsl et bien d'autres. En revanche, on peut avoir besoin de choisir l'opacité !
Par exemple, on a une image en fond, mais écrire sur une image, ce n'est pas top... alors on peut construire un environnement avec un blanc transparent en utilisant rgba. Le "a" correspond au canal alpha (pour ceux qui font des montages photos), et prend des valeurs entre 0 et 1.

Pour rendre "un objet" transparent, comme une photo, il y a l'option "opacity" en css.

Environnements avancés :

Raccourcis clavier du navigateur