L1 - Informatique et internet

Dimension: px

Commencer à balayer dès la page:

Download "L1 - Informatique et internet"

Gilbert Marois
il y a 7 ans
Total affichages :

1 L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr

2 HTML + CSS Listes, images et liens

3 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>!!

4 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;!! }!

5 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>!

6 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>!

7 Validation d'une page HTML nécessité de la normalisation rigueur dans l'encodage

8 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

9 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é

10 Structure d'une page

11 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

12 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

13 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

14 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)

15 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; }

16 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; }

17 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.

18 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%

19 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

20 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; }

sélecteur de la boîte qui capte la souris est désigné par :hover!

21 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; }

Or dans notre approche intuitive, la taille d'une boîte comprend «toute la boîte» Une règle de feuille

22 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; }

Documents pareils

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles