L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr http://ensweb.users.info.unicaen.fr
HTML + CSS Listes, images et liens
Page HTML <!DOCTYPE html> déclaration de type! <html lang="fr-fr"> racine! <head> en-tête! <meta charset="utf-8" /> jeu de caractères! <title>! Cours L1 -- Première page HTML! </title>! </head>! <body> corps du document!! <h1>bonjour le monde</h1> titre principal! </body>! </html>!!
Cascading Style Sheet h1 { sélecteur! color: red;!!!! font-size: 2em; règle de style!!!! propriété : valeur;! }!! p { sélecteur!!!! margin-left: 150px;! }!!! p::first-letter { sélecteur!!! font-size: 200%;!!! font-weight: bold;!! }!
Associer HTML et CSS <head>! <meta charset="utf-8" />! <title>! Cours L1 -- Première page HTML! </title>! <link type="text/css"! media="screen"! rel="stylesheet"! href="styles/style5.css" />! </head>! <body>!
Associer une image <h2>le dire en images</h2> titre de niveau 2! <figure> container pour les images! <img src="images/hello-world-tshirt.jpg"! alt="geek's style" /> accessibilité! <figcaption>! Pour bien débuter avec la! programmation : réussir à saluer! le monde! </figcaption>! </figure>!
Validation d'une page HTML nécessité de la normalisation rigueur dans l'encodage http://validator.w3.org
Organiser son espace de travail Nommage des fichiers et des répertoires! pas de caractères en dehors de [A-z] [0-9] [_-]! utiliser les minuscules! extension de fichier (.html ;.jpg ;.css)! Organiser les répertoires! un répertoire par projet / TP, sujet! dans lequel on met les images dans un sous-répertorie! Rappel : ces répertoires sont dans un répertoire dénommé public_html pour permettre l'accès par serveur
Préparer le travail Regrouper les sources textes images Noter les références des sources pour pouvoir les citer Faire un schéma général de ce que l'on veut obtenir En cours de programmation : vérifier régulièrement la validité
Structure d'une page
Les éléments structurants <header> : en-tête de page, ou d'article. Structure répétable sur plusieurs pages! <footer> : pied de page (idem)! <article> : contenu qui pourrait être utilisé dans plusieurs sites (avec des styles différents)! <aside> : encart, qui a une relation avec le contenu! <section> : organisation du contenu. Permet de regrouper des sous-titres, des textes et des images dans un "bloc"! <nav> : zone destinée à recevoir des liens pour naviguer dans le site
block / inline block : regroupement de contenu / inline : contenu qui s'insère dans le fil du texte (pas de saut de ligne)! <div> : division, élément de bloc! <p> : spécifique des blocs de texte (des "paragraphes")! <span> : élément inline (lettrine, parties mises en valeur dans un texte )! Propriété display des feuilles de style! block / inline / none / inline-block
Les listes regrouper des contenus dans une énumération! menus! listes d'objets, de personnes, de livres! regroupements de paragraphes! <ul> : liste sans numérotation (<ol> : numérotée)! <li> (list item) : chaque élément d'une liste! choisir la puce (ou l'absence de puce) par la feuille de style
L'attribut class Très important pour distinguer certains éléments :! la balise donne la sémantique générale! l'attribut class précise l'usage particulier! qui sera représenté typographiquement par la feuille de style! <p class="intro"> : le texte du paragraphe sera plus gros, avec une marge.! <span class="titrelivre"> : le titre d'un livre sera mis en valeur (en général italique)
Classes et feuille de style le sélecteur d'une classe commence par un point! p.intro { color: maroon; font-size: 1.1em; }!.titrelivre { font-style: italic; }
Notion de cascade Un sélecteur CSS peut suivre l'emboîtement des éléments HTML! header h1 { font-size: 2em; color: red; }! article header h1 { font-size: 1.5em; color: green; font-style: italic; }
Typographie Familles génériques de caractères Nom d'une police dans chaque famille générique Toujours terminer la règle de style par une famille générique font-family: Arial Helvetica sans-serif! font-family: "Times new roman", serif
Dimensions éviter les dimensions absolues (cm, mm, pt pour les écrans) mesure en pixel : pour les ordinateurs : 1200px dimensions relatives em : coeff. multiplicateur de la taille de la police du bloc englobant rem : coeff multiplicateur de la taille de la police de base % : pourcentage du bloc englobant font-size: 0.8em équivalent font-size: 80%
Couleurs Espace des couleurs RVB chaque couleur (rouge, vert bleu) a 256 valeurs. représentées en hexadécimal (16 symboles) color: #C0DEED; (bleu clair) opacité : coefficient entre 0 (opaque) et 1 (transparent) opacity: 0.4;
Le modèle de boîte CSS Tous les éléments sont considérés comme des boîtes dont on peut régler par la feuille de style la taille (largeur et hauteur) les marges (extérieur), le padding (entre le bord et le contenu) et la bordure (par côté) figure.encart { margin: 5px padding: 5px; border: 1px solid black; width: 30% min-width: 150px; }
La pseudo-classe :hover Quand la souris est positionnée sur une boîte, on peut appliquer une feuille de style différente le sélecteur de la boîte qui capte la souris est désigné par :hover! figure.exemple { opacity: 1; }! figure.exemple:hover { opacity: 0.4; }
Box-sizing La taille d'une boîte est par défaut celle du contenu (content) et donc ne comprend pas le padding et le border! Or dans notre approche intuitive, la taille d'une boîte comprend «toute la boîte» Une règle de feuille de style permet de dire que pour un élément, quand on va calculer la taille (width et height) on prendra aussi en compte le padding et le border : figcaption { box-sizing: border-box; }