Formation HTML CSS

Créer des pages web avec HTML5 et CSS3

+700 apprenants

Objectifs de la formation

Apprenez à créer des pages web et mobile au design Responsive. Maîtriser le style CSS, le positionnement et la structure d'une page web.

Votre formateur

Frederic Lossignol

Expert Angular et NodeJS depuis 2016.

Public concerné

Toute personne désirant connaître les bases nécessaires à la réalisation de sites web en HTML5 et CSS3.

Niveau requis

Débutant

Programme

PARTIE 1 Introduction : le navigateur et les langages

Les navigateurs web et mobile
Différences entre un langage de description et un langage de style
Définition et syntaxes des balises HTML

PARTIE 2 HTML5 : créer notre première page web

Le document HTML, les balises essentielles
Les balises de section header, nav et footer
HTML5 et la notion de sémantique descriptive
Les balises titre, paragraphe, lien, liste et citation
Exercice : créer une page web qui contient des éléments titre, paragraphe et liste
Les balises sémantiques au niveau textuel
Notion d'attribut
La balise image et son attribut src
Les balises médias audio et video
TP : d'après un screenshot, créer la page web et y insérer le contenu

PARTIE 3 Les liens hypertextes

Lien vers une ancre, une page du site, une url externe, vers une messagerie ou un téléphone
Lien sur une image
Exercice : ajouter des liens hypertextes vers des ancres et une page externe

PARTIE 4 HTML5 : Insérer des médias

Notion d'attribut de balise - les attributs courants
La balise image et l'attribut src
Insérer de la vidéo et de l'audio
Exercice : ajouter les 3 images fournies dans la page web

PARTIE 5 Créer des formulaires

Les champs : texte, mot de passe, menu déroulant, case à cocher…
Les validations du navigateur avec HTML5
Exercice : créer un formulaire de contact
Envoyer les informations par email

PARTIE 6 CSS : ajouter du style à vos pages web

Quel est le rôle du langage CSS dans la page web ?
Syntaxe : cibler des éléments HTML et utiliser les propriétés de style
Les style CSS courants (color, background, font)
Positionner des éléments - la propriété position
Organiser le contenu à l'aide de flex
Gérer le responsive avec les media queries
Notion de framework CSS : tour sur Bootstrap
TP Final : ajouter le style correspondant à la maquette

Modalités pratiques

Travaux pratiques
Création d'une application fil rouge avec les derniers standards : standalone components, l'API Signal pour gérer la réactivité, la syntaxe de control flow.

Méthodes pédagogiques
Chaque nouveau concept théorique sera appliqué immédiatement de façon pratique.