4.3 HTML et CSS

TP1 - Ecriture d'une page WEB (1h)

Sequence reprise à partir du site SNT du Lycée La Martinière Diderot à Lyon

Qu'est-ce qu'une page web ?

Une page web est un fichier qui permet de publier :
- - un contenu (textes, images, vidéos...) : le fond
  - un style graphique : la forme
Le contenu est écrit en langage HTML (langage à balises dont l'extension du fichier est .htm ou .html)
Le style graphique est écrit en langage CSS (extension du fichier .css)
Le fichier html fait appel par une instruction à un fichier css pour assurer la mise en forme

Qu'est-ce qu'une page web ?

Une page web est un fichier qui permet de publier :
- - un contenu (textes, images, vidéos...) : le fond
  - un style graphique : la forme
Le contenu est écrit en langage HTML (langage à balises dont l'extension du fichier est .htm ou .html)
Le style graphique est écrit en langage CSS (extension du fichier .css)
Le fichier html fait appel par une instruction à un fichier css pour assurer la mise en forme

Comment une page web est-elle écrite ?

Le code HTML (aussi appelé code source) ci-dessous

La page dans un navigateur :

Le changement de style

On aura remarqué l'usage des balises h1 et h2 qui permettent de déclarer des titres de niveaux 1 et 2. Ces titres ont une mise en forme par défaut. Voyons à présent comment on peut améliorer cette mise en forme de ces titres.

Pour cela, créons un nouveau fichier style_perso.css et enregistrons-le juste à côté de notre fichier .html. On pourra ensuite l'appeler à l'intérieur de notre page HTML avec la ligne suivante (dans la section <head>) :

Dans le fichier style_perso.css, ajoutons ces quelques lignes :

La page dans un navigateur :

h1 {

color: blue;

}

h2 { font-variant: small-caps;

color: green;

}

strong {

background-color: gold;

}

TP2 - Ma première page HTML

Travail à faire :

A partir du document ressource ci-contre, vous allez réaliser une page HTML de présentation de votre film préféré. Cette page sera simple. On pourra piocher les informations de votre film sur des bases de données en ligne de films telles que IMDb, AlloCiné, Wikipédia...
Vous réaliserez une feuille de style à votre page.

Vous trouverez de nombreuses références sur les styles sur Internet mais le plus simple sera d'utiliser cette page.

Document Ressource :

FT-seq4-TP-Page-Web.pdf

Code source HTML

Feuille de style.css

Pour aller plus loin...

Page updated

Google Sites

Report abuse