- Séance 1 – HTML Les base d’un nouveau langage
- Séance 2 – HTML Formatage de texte
- Séance 3 – CSS pour le style
- Séance 4 – Insertion et style CSS
- Séance 5 – Barre de navigation en CSS
- 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
- Navigateurs = interprètes
- Langage de balises : ouverture et fermeture
- Connaissance de la structure d’une page HTML
- Exemples avec « code source de la page » sur le site Csspeeper
- Ajout d’un plug-in Firebug Firebug
- Structure complexe via le code source avec le Le Monde
- 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
Séance 2
HTML – Formatage d’un texte
- 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
- Formatage du texte de la recette grâce aux balises/li>
- balises h1,h2,h3,…
- balises blockquote
- balises ul et li
- balises ol et li
HTML – Balises et Attributs
- Modifier la couleur du fond de la balise « body »
- Modifier l’image de fond de page avec une image existante sur internet
- Modifier de la couleur de la police de caractère
- Modifier de la police de caractère
- Modifier la couleur du h1 et des « h2 »
HTML – Exercice en ligne
Exercice en autonomie : Lien vers l’exercice
Séance 3
CSS – Feuilles de style en cascade
- Explications sur le CSS
- Evolution du CSS
- Implantation du CSS dans une page HTML
- Dreamweaver : colorisation du code en rose pour le CSS
- HTML : Structure et CSS : Style
Premier pas en CSS
- implantation du CSS dans la page « recette.html »
- suppression de tous les styles dans les balises HTML dans la page html
- modification de la page « recette.html » avec du CSS
- changement du fond d’écran
- changement de toutes les balises h2
- changement de la balise h1
Lien utiles :
w3schools – CSS 3
Séance 4
Insertion d’éléments style CSS
- insérer une image et flottage à droite
- insérer une vidéo youtube
Divisions de la page et style CSS
- mettre en place des divisions de la page
- modifier la structure des divisions en CSS avec
- width:50%;
- margin-left:25%;
Polices de caractère supplémentaires
- inventaire des polices de caractères de base
- 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
- insérer des liens internes et externes
- 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
- Connaître les codes des couleurs d’une photo avec Imagecolorpicker
- Connaître les codes des couleurs d’une photo avec Code Couleur
- Accents et mise en français avec Accents HTML
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