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
- une page d'accueil "index.html" (ne pas changer le nom)
- un dossier "css" avec un fichier "design.css" de base (cf fin cours 1 ou cours 2),
- un dossier "img" où vous pourrez ranger vos images,
- un dossier "lib" qui contient la librairie Bootstrap.
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 :
- au début du document html, dans la partie head, le nom de l'onglet est choisi dans title
Les meta-données servent à choisir
- la description que donnera le navigateur de votre page (environ 300 caractères)
- les mots-clefs pour chercher votre page
- l'auteur de la page et l'échelle d'affichage
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.
- exemple 1: barre de navigation standard en haut + liste de boutons sur la page
- exemple 2: liste de boutons dans un environnement vertical à gauche
- exemple 3: les listes de bouttons de la librairie Bootstrap
Le premier environnement sera un
div qui va vous permettre de diviser la page. Vous pouvez emboiter les "div":
Pour les environnements "div", la librairie bootstrap gère deux options par défaut :
- <div class="container"> : bloc à largeur limité sur les grands écrans
- <div class="container-fluid"> : bloc qui prend toute la largeur (en générale la largeur du bloc qui le contient pour faire un bandeau)
Séparation verticale :
les colonnes de la librairie Bootstrap (qu gère le passage petit et grand écrans).
Les différentes formes de textes :
- le texte et les titres. Le texte peut être écrit sans environnement ou dans l'environnement "p" (= paragraphe), et les titre en h1, h2,...h6 avec h1 la plus grande taille
- les liens, l'environnement "a"
- le saut de ligne: <br>
- le texte en gras, italique, etc, en général "b" (=bold) pour gras, "i" pour italique et "em" suffisent.
- les listes, l'environnement "ul" (=unordered list) avec pour item "li"(= list item)
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 :
- une fenêtre avec des images qui défilent: le carousel
- le site qui défile en scrollant (en utilisant la roulette de la souris): le scrollspy
Raccourcis clavier du navigateur
- actualiser: F5
- nouvel onglet: ctrl + t
- fermer un onglet: ctrl + w
- agrandir ou rétrécir la visualisation d'une page: ctrl + scroll (ctrl + zéro pour la taille normal)
- ouvrir un lien dans un nouvel onglet: ctrl + clic gauche