Cursus MTA : Introduction à la programmation à l'aide de HTML et CSS                                                                                                                                                                                                                                                                                   

- Avoir une expérience avec les outils informatiques et le Web en général

- Etre capable de créer des pages en HTML5/CSS3 de manière autonome et sans éditeur visuel ou tableaux de mise en page
- Pouvoir mettre en œuvre des sites internet valides selon les standards W3C
- Connaître les principales balises HTML existantes
- Structurer le contenu
- Apposer les premières mises en forme à l'aide des styles CSS

Public :

Pour les Graphistes, les Webmasters, les débutants et les Rédacteurs de contenu

Introduction

- HTML5
- CSS3

Le contenu

- Les balises paragraphes et titre
- Les premières décorations CSS par color et background-color
- Les alignements de contenus par text-align
- Les formats de couleurs
- Les familles de polices avec et sans empattements par font-family

Les liens

- Produire un lien vers une autre page à l’aide de l’élément et son attribut href
- Souligner un lien ou pas avec text-decoration

Appliquer des marges

- Présenter le Modèle de Boîte en CSS
- Effectuer une marge sous ou sur un élément

Les listes

- Créer une liste d’éléments
- Déterminer des puces par défaut et personnalisées

Anatomie d’une page web standard

- Concept de “Doctype”
-Éléments de structure : , ,

À l’abordage de la première page web

- Arborisation des fichiers
- Comment apposer les styles CSS ?
- Les éditeurs de code

Les images

- Arborer une image de contenu et ses attributs
- Afficher une image décorative avec background-image et propriétés associées
- Discerner une image (HTML) d’une image de fond (CSS)

Applications pratiques

- Insérer une image
- Ajouter un logo cliquable
- La personnalisation de listes

Les sections d’un document

- Le concept de section
- Deviner les sections par la maquette du projet
- Le classement des sections, titres et paragraphes
- Appliquer des styles CSS généraux conformément avec la maquette

Les composants

- Définition du composant
- Deviner les composants par la maquette
- Le premier composant : le bouton
- Le composant navigation
- Les composants du pied de page
- Le bloc info
- Le Constituant « Card »
- Le constituant du formulaire de contact

Le Responsive Web Design

- Les points de rupture
- Le viewport
- Les CSS Media Queries

Centrer le contenu dans la page

- A l’aide des propriétés CSS width et les marges automatiques
- Ajouter des éléments neutres
- Les priorités dans CSS

Le modèle Flexbox

- Le fonctionnement de Flexbox
- Voir où appliquer Flexbox sur la maquette

Positionnement flottant

- La propriété float

Éléments bonus

- Déterminer les tableaux de données
- La grille d’éléments

Le futur avec Grid Layout

- Définition de Grid Layout
- Définir les composant “Destinations” en Grid Layout

Les standards

- Le passage du code au validateur
- Concept d’entités HTML

Ressources HTML et CSS

- Les ressources HTML
- Les ressources CSS