Description :

L'HTML, pour HyperText Markup Langage, constitue le langage de bases d'un site internet. Ce n'est pas un langage de programmation mais un langage de balisage qui permet d'écrire de l'hypertexte et ainsi de définir la structure sémantique d'une page web. Le CSS, Cascading Style Sheet, est un langage qui permet de définir les styles associés à un document HTML, c’est-à-dire le design. Quel que soit la technologie que vous utilisiez, ou que vous allez utiliser, l’apprentissage des langages HTML et CSS est un passage obligé. En effet, JAVA, .NET, PHP ou autre langage ou architecture, en dernier ressort, génèrent du HTML. C'est dire l'importance de ce langage et la nécessité de la connaître.

Prérequis :

Pas de prérequis.

Niveau :

Débutant

Introduction au domaine

Pile des différentes couches logicielles. La couche front-end. Introduction au protocole http. Les cookies

Introduction au html

Historique. Langage de description de données. Langage de balisage. Imbrication de balises et attributs. Squelette standard HTML5. Document Object Model (DOM)

Composants graphiques

Textes, sauts de ligne et espaces. Paragraphe. Titres et sous-titres. Listes ordonnées. Liens hypertextes. Les images. Les tableaux

Les formulaires

Zone de texte. Zone de mot de passe. Les cases à cocher. Les zones d'options. Liste déroulante. Regrouper les champs. Les zones de saisie enrichies (HTML5). Formulaire avancé

Spécificités html 5

Les éléments de section. HTML5 sémantique. Complément balise img. La vidéo et l'audio

Introduction au css

Feuilles de style Cascading style sheet. Intégrer du code CSS. Quelques balises CSS texte

Principe d’application du css

Sélecteurs, propriétés et valeurs. Sélecteur d’élément. Sélecteur de classe. Héritage de style. Les couleurs, les dimensions, les marges

Mise en page avec Flexbox

Agencer les éléments. Retour à la ligne.l Aligner sur l'axe principal. Aligner sur l'axe secondaire. Centrage vertical et horizontal

Quelques notions avancées

Pseudo-classes. Les ombres. Déformation et transition. Les transitions. Accordéon.

Les modèle de boîte

Présentation du modèle. Les éléments de type block. Les éléments de type inline. Le positionnement inline-block. Positionnement flottant. Les positionnements absolu, fixe et relatif. Mise en page adaptative avec les Media Queries