HTML5 et CSS3

  1. Séance 1 – HTML Les base d’un nouveau langage
  2. Séance 2 – HTML Formatage de texte
  3. Séance 3 – CSS pour le style
  4. Séance 4 – Insertion et style CSS
  5. Séance 5 – Barre de navigation en CSS
  6. Séance 6 – Les plus et la suite
























Séance 1

HTML Les bases d’un nouveau langage

HyperText Markup Language : Langage de balises hypertext

  1. Navigateurs = interprètes
  2. Langage de balises : ouverture et fermeture
  3. Connaissance de la structure d’une page HTML
  4. Exemples avec « code source de la page » sur le site Csspeeper
  5. Ajout d’un plug-in Firebug Firebug
  6. Structure complexe via le code source avec le Le Monde
  7. Utilisation d’un logiciel éditeur HTML ( Notepad++ et Adobe Dreamweaver )

Liens :
L’école du W3C – HTML : w3schools – HTML
Structure de page complexe : Le monde
Structure de page HTML 5 : csspeeper

HTML5
























Séance 2

HTML – Formatage d’un texte

  1. Ouvrez un des fichiers salade banane ou salade césar ou salade gambas et copier le contenu dans le logiciel Dreamweaver par un copier/coller
  2. Formatage du texte de la recette grâce aux balises/li>
  3. balises h1,h2,h3,…
  4. balises blockquote
  5. balises ul et li
  6. balises ol et li

HTML – Balises et Attributs

  1. Modifier la couleur du fond de la balise « body »
  2. Modifier l’image de fond de page avec une image existante sur internet
  3. Modifier de la couleur de la police de caractère
  4. Modifier de la police de caractère
  5. Modifier la couleur du h1 et des « h2 »

HTML – Exercice en ligne

Exercice en autonomie : Lien vers l’exercice

Dreamweaver
























Séance 3

CSS – Feuilles de style en cascade

  1. Explications sur le CSS
  2. Evolution du CSS
  3. Implantation du CSS dans une page HTML
  4. Dreamweaver : colorisation du code en rose pour le CSS
  5. HTML : Structure et CSS : Style

Premier pas en CSS

  1. implantation du CSS dans la page « recette.html »
  2. suppression de tous les styles dans les balises HTML dans la page html
  3. modification de la page « recette.html » avec du CSS
  4. changement du fond d’écran
  5. changement de toutes les balises h2
  6. changement de la balise h1



Lien utiles :
w3schools – CSS 3

CSS3
























Séance 4

Insertion d’éléments style CSS

  1. insérer une image et flottage à droite
  2. insérer une vidéo youtube

Divisions de la page et style CSS

  1. mettre en place des divisions de la page
  2. modifier la structure des divisions en CSS avec
  3. width:50%;
  4. margin-left:25%;

Polices de caractère supplémentaires

  1. inventaire des polices de caractères de base
  2. utiliser une ou des police(s) de caractère Google Fonts avec Google Fonts  Etape par étape




























Séance 5

Barre de navigation à partir d’une liste

  1. insérer des liens internes et externes
  2. insérer un menu avec des liens



2 exemples à suivre :
Liste de navigation
Barre de navigation avec transition CSS



Inspiration Navigation spéciale
























Séance 6

Liens utiles



Inspiration : Tout sur les logos des marques

CSS3 – Animations et propriétés

Propriétés CSS3
inspiration : Zoom avant sur les articles

Sites intéressants

Navigation aussi intéressante
Site intéressant
Adidas Flux