Formation HTML5, CSS3, Responsive - Création de pages web

Présentation

• Contexte historique
• HTML : le langage du Web
• Fonctionnement d'un site internet
• Histoire et normalisation du HTML
• La nouvelle vision HTML5

Structure d'un document HTML

• Concept et usage des balises
• Le bon usage des balises
• Particularités et pièges du HTML
• Le document HTML minimum

L'en-tête d'un document HTML

• Doctype ou DTD
• Méta-informations

Le corps d'un document HTML

• Texte sans balise
• Types de balise et référencement
• Balises de type block et inline

Structurer le texte

• Titres et paragraphes de texte
• Le contrôle de passage à la ligne
• Les caractères spéciaux
• Les commentaires
• Les autres balises de texte

Les feuilles de style

• Dynamiser un site avec CSS : styles inline, balise style, balise link
• Les commentaires
• Les propriétés
• Styles du texte : couleur, police, taille, alignement, ...
• Intérêt des balises div et span
• Styles des boites : bordures, fond, taille, marge, ...
• Les sélecteurs : balise, classe, id, pseudo-classes ...
• Gérer les positionnements

Les listes

• Numérotées, à puces, imbriquées
• Les listes de définition
• Styles dans les listes

Les tableaux

• Cellules de tableau et fusion des cellules
• Gestion de la taille du tableau
• En-tête et légende
• Les bordures
• Les groupes de colonnes et de lignes
• Styles dans les tableaux

Les hypertextes

• La balise de liens
• Les différents types de liens : vers une autre page, dans une page, vers un site Web, de téléchargement...
• Les Target
• L'attribut titre
• Pseudo-classes des liens
• Styles dans les liens

Insertion d'images

• L'insertion d'une image
• Couleur et image d'arrière-plan
• L'insertion d'un lien sur une image
• Les images réactives
• Styles sur les images

Les formulaires

• La déclaration de formulaire (balise form)
• Zone de texte à une ligne
• Menu déroulant
• Boutons : radio, checkbox, d'envoi, d'annulation, de commande
• Les champs cachés, de transfert de fichier, de mot de passe
• L'organisation des éléments d'un formulaire
• Styles dans les formulaires

Le balisage HTML5

• Référencement et web sémantique
• Les nouveaux éléments (main, header, footer...)

Audio et vidéo

• Les éléments audios et vidéos
• Les conteneurs, les codecs
• Compromis pour un site à forte audience

CSS3 – les styles avancés

• Se passer d'images, éviter les astuces
• Coins arrondis, ombres portées, transparence, animations
• Niveau de présentation
• Mise en page par patron
• Mise en page multi-colonnes
• Mise en page par boites horizontales ou verticales (flexbox)
• Positionnement par grille (grid)
• Autres nouveautés

Responsive Web Design

• Découverte du viewport
• Présentation en mode grille
• Media queries
• Introduction à Boostrap