TP : WEB - Partie 2 : Mettre en forme en css3

(1)

Première NSI M^me Pierrot

WEB - Partie 2 : Mettre en forme en css3

Thème :

Interaction entre l’homme et la machine sur le Web

Compétences à acquerir :

• Mettre en forme une page web avec une feuille de style.

• Connaitre la syntaxe du langage « CSS » qui sert à décrire la présentation d’un document html

Notions :

Langage de description d’une mise en forme : css3

Eléments d’information et exemples.

Sitographie :

• La liste des balises css : http://www.css-faciles.com/proprietes-css-familles.php

• Codage des couleurs sur le web : https://www.w3schools.com/colors/colors_picker.asp

CSS :

Cascading Style Sheets

en français :

feuilles de style en cascade

Integration dans la page web :

<!doctype html>

<html>

<head>

<title>Titre de ma page</title>

</head>

Code css de base :

html { height:100%; }

body { background: /*couleur*/;

font-family: Verdana, Arial, sans-serif;

font-size: /*taille*/;

margin: /*taille*/ auto;

padding: /*taille*/;

position: relative; } h1 { font-size: /*taille*/;

font-style: bold;

color:/*couleur*/;

text-align:center; } ...

h6 { }

p { }

img { border: /*taille*/ solid /*couleur*/;

float:right;

width:/*taille*/;

margin:/*taille*/; }

a { }

a:hover { }

Travail à réaliser

1) Définir des caractéristiques générales à l'ensemble du document :

/*couleur*/ : doit être remplacé par une couleur : - soit sous la forme héxadécimal #RRGGBB - soit sous son petit nom anglais (red, blue ...) /*taille*/ : doit être remplacée par une taille : - soit en pixel (ex.: 20px)

- soit en cm (ex.: 0.7cm)

- soit en poucentage du contenant (ex.: 25%)... et il y en a d'autres ! 2) Enregistrer ce fichier dans un dossier style que vous crérez à coté de votre page web avec un nom que vous

utiliserez dans l’entête de votre code html comme « mapremierefeuilledestyle.css ».