Initiation HTML5 & CSS3
Vous souhaitez créer vos propres sites web ? cette formation est faite pour vous!
Vous apprendrez comment utiliser HTML5 et CSS3, les deux langages de programmation à la base de tous les sites web.
Ce que vous apprendrez
Construire un site internet statique de A à Z
Comprendre la structure d’un site internet
Utiliser les dernières nouveautés en HTML5
Utiliser les dernières nouveautés en CSS3
Plan de la formation
Initiation au HTML
Le HTML – généralités
– HTML et définition
– W3C et le WHATWG
– Présentation rapide de quelques outils : éditeurs de
texte, wysiwyg et clients FTP
La syntaxe HTML : balises, éléments et attributs
– Le principe de balise et d’élément
– Attributs et valeurs
– Quelques exemples d’attributs
Doctype, html, body : structure d'un document
– Le doctype
– Les balises <html>, <head> et <body>
– Les commentaires
Les éléments de structuration du contenu
– La balise division <div>
– La balise paragraphe <p>
– Espaces insécables Titres <h1> à <h6>
– La balise <blockquote>
Les liens hypertexte
– Fonction d’un lien
– La balise <a>
– Liens externes
– Liens internes et hiérarchisation du site
– Ouvrir un lien dans un nouvel onglet ou laisser l’utilisateur choisir ?
– Les liens spéciaux : mailto, ancres, etc.
Les éléments de « mise en forme » de texte
– Les balises <strong> et <em>
– La balise <span>
– D’autres balises (<sup>, <sub>, etc.)
Les éléments de liste
– Listes ordonnées
– Listes non ordonnées
Ajouter des images avec la balise <img />
– Guide des formats d’image pour le web et outils de compression
– La balise <img> et ses attributs
Les tableaux HTML
– Créer un tableau : <table> <tr> <td>
– Un exemple de tableau simple
– Ajout d’en-têtes avec <th>
– Légende de tableau
– Attributs avancés, dont colspan, rowspan
Les formulaires
– La balise <form>
– Le champ <input>
– Ajout de libellés avec <label>
– Les placeholder HTML5
– Zone de texte multiligne <textarea>
– Bouton de validation <input type=”submit”>
– Présentation des autres éléments (checkbox, radio, <select>)
Initiation au CSS
CSS : introduction et notions de base
– Ajoutez du style à vos pages !
– CSS : Cascading Style Sheets, une définition
– Les CSS, un peu d’histoire
– Différents rendus entre les navigateurs : le pixel perfect n’existe pas
Appliquer un style, oui mais où ?
– Le CSS inline et inconvénients
– Le CSS “interne” intégré au document et inconvénients
– Feuille de style externe et balise <link>
Syntaxe CSS
– La syntaxe de base : selecteur, propriété, valeur
– La déclaration CSS
– Les commentaires CSS
Généalogie et différents types de sélecteurs
– Le sélecteur usuel d’élément HTML
– Hiérarchie et généalogie : notion d’enfants, de parent, de descendance
– Sélecteur de groupe, de classe
– L’id ou identifiant
– Espace entre sélecteurs, ou pas ?
– Les pseudos-classes sur les liens
– Les autres pseudo-classes
Couleurs et unités
– Notation des couleurs en CSS
– Les unités fixes en CSS
– Les unités fluides en CSS
– En web, quelle unité utiliser ?
Propriétés de typographie, polices et puces
– Font-family et polices utilisables
– Propriété typographiques (gras, italique, interlignage, etc.)
– Changer la couleur du texte
– Alignements de texte
– Décoration de texte (soulignement, etc.)
– Changer les icônes d’une liste à puce
Bordures et arrières plans
– Bordures et styles, bords arrondis CSS3
– Arrière-plan et propriétés background
Dimensions, margin et padding
– Différences entre inline et block
– Largeur et hauteur avec width et height
– Dimensions maximum et minimum
– Marge extérieure margin
– Centrer horizontalement à l’aide de margin
– Marge intérieure padding
– Calcul des dimensions réelles d’un élément
– S’affranchir du calcul avec box-sizing: border-box
– Gestion des dépassements avec overflow
Positionnement CSS : les flottants pour placer des images
– Les flottants et le flux
– Ferrer les images à gauche et à droite
– Nettoyer les flottants avec clear
– Notion de contexte de formatage de bloc et gestion des conflits de flottants
Prérequis
