HTML5 et CSS3

Teacher

SDFORM

Description

Réaliser ou mettre à jour des pages et applications Internet en HTML5 et CSS3. • Le langage HTML5 est de plus en plus utilisé pour les développements Internet car il permet de structurer une page et de disposer les éléments visuels de façon très précise. • Le second langage étudié, le CSS3, permet, quant à lui, d’ajouter des styles et des effets visuels rendant inutile l’utilisation d’images et permettant d’adapter l’affichage sur différents périphériques comme les tablettes, téléphones ou ordinateurs.

Programme détaillé

RETOUR SUR LE HTML ET CSS : LES FONDAMENTAUX :

• Les composants d’un document HTML : textes, liens, titres, paragraphes, tableaux, formulaires…
• Les commentaires,
• Comment est structuré un document HTML : le doctype,
• La balise <head>,
• Lien avec une feuille de style,
• Lien avec un fichier JavaScript,
• La balise <body>,
• Méthode et balises pour structurer une page,
• Les caractères spéciaux.

FEUILLES DE STYLE CSS :

• Images,
• JavaScript,
• Le modèle de document (DOM),
• Le protocole HTTP(S).

LE HTML 5 :

• Les principaux concepts et apports,
• Les différents composants : balises, formulaires, audio, vidéo, API,
• Outils de développement HTML 5

INTERET DE SES NOUVELLES BALISES DE STRUCTURE :

• Nouveaux éléments et attributs/nouvelle structuration,
• Sections <header>, <footer>, introduction/conclusion d’un bloc,
• L’élément <nav> navigation interne au site,
• L’élément <aside>,
• Balises <time>, <mark>, <figure>, <figcaption>,
• Balises <menu>, <command>, <details>, <summary>.

LES AUTRES BALISES DE STRUCTURE :

• Les nouvelles catégories de contenus : Metadata content, Flow content, Sectioning content, Heading content,
• Les nouvelles catégories de contenus : Phrasing content, Embedded content, Interactive content,
• La validation des pages (valideur officiel W3C).

LES SÉLECTEURS CSS 3 :

• Rappel sur la syntaxe : les sélecteurs, les règles, CSS3 : nouveaux sélecteurs et propriétés.

TRAVAUX PRATIQUES :

• Intégration de CSS 3 aux applications Internet,
• Sélection d’éléments d’une page HTML 5.

LES COULEURS :

• Rappel sur les déclarations rgb et rgba,
• La propriété opacity.

FORMATER LE TEXTE :

• Les polices embarquées avec @font-face,
• Mise en forme du texte,
• Gestion des débordements par text-overflow,
• Gestion des enchaînements par wrap-option, white-space-treatment,
• Effets de couleur et d’ombre sur texte text-fill-color, text-shadow.

LA MISE EN FORME DU FOND :

• Les fonds multiples, gradients, fonds ajustés aux conteneurs,
• Transitions / Transformations,
• Animations.