Formation HTML 5/CSS 3 – les bases

Introduction générale au langage HTML.

• Présentation du HTML.
• Le HTML par qui, pourquoi, pour qui ?
• Le W3C.
• Communication navigateur / serveur (protocole, url …).
• Le premier navigateur web grand publique.
• Qu’est-ce qu’un fichier HTML ?
• Historique des versions du HTML.
• Logiciels pour développer, de quoi a-t-on besoin ?
• Présentation de l’éditeur de code.
• Installation du logiciel et des plugins utiles.
• Installation de Chrome, Firefox.
• Aperçu du mode développeur sur les navigateurs Chrome et Firefox.

Création d’une première page.

• Les règles de nommage à respecter par convention.
• Ma première page index.html
• Création du squelette de base d’un site: doctype, html, head et body (déclaration du doctype, de la langue du site, des meta-tags, ajout de contenu …)
• L’encodage de caractères qu’est-ce que c’est et pourquoi est-ce important ?

Ajout de contenu sur ma première page web.

• Balises et attributs : principes et fonctionnements.
• Les balises de mise en forme de texte (titres, paragraphes, gras, italique, souligné, polices d’écritures, alignement …).
• Créer un commentaire en HTML.
• Retour à la ligne et saut de ligne.
• Ajout d’un ou plusieurs attributs à une balise.
• Créer un lien hypertexte (vers une page web interne ou externe, une ancre, une messagerie).
• Ajouter une image et compléter avec les attributs title et alt.
• Les types de formats d’images (jpg, gif, png, svg)
• Les listes ordonnées et non ordonnées.
• Les tableaux (entête, corps, ligne et colonnes).
• Travaux pratique: Création d’un premier projet en autonomie «Mise en forme d’un article». Tour de table, correction du TP.

Introduction au CSS.

• Qu’est-ce qu’une feuille de style ?
• Le CSS dans quel intérêt ?
• Pourquoi dit-on en cascade ?
• Un premier code CSS.
• Historique des versions. Optimiser son workflow.
• Incorporer une feuille de style à ma page web.
• Création d’un fichier style.css
• Faire un lien dans ma page HTML vers le fichier style.css
• Syntaxe d’une règle CSS.
• Créer un commentaire en CSS.
• Les premiers code CSS: modifier la couleur du texte, du fond …

Les principaux styles CSS.

• La balise div pour la structuration.
• Différence entre type de sélecteur: une balise, un id et une class.
• Les groupe de sélecteurs.
• Agir sur les titres et textes de paragraphes.
• Couleur et image de fond avec la balise background.
• Les pseudos classes (:hover, :visited, :active) dans un lien.
• Centrer du contenu.
• Les bordures.
• Les marges intérieurs et extérieurs.
• Travaux pratique: Création d’un second projet guidé par le formateur
• «Mon premier site de quelques pages». Tour de table, problème rencontrés et correctif du TP.

Bien organiser son code CSS.

• Ajouter un logo a mon site avec différentes techniques.
• Menu vertical ou horizontal avec différentes techniques.
• Mise en forme de titre et texte, aérer le contenu a l’aide des marges.
• Savoir chercher sur internet lorsque l’on souhaite faire
• quelque chose de spécifique.

Un peu plus sur le CSS.

• Compatibilité du CSS avec les navigateurs.
• Incorporer du style: en ligne, dans un fichier interne ou externe.
• L’importance de la cascade dans une ou plusieurs feuilles de styles.

Utiliser une police d’écriture.

• Police d’écriture avec Google Font.
• Convertir et utiliser une police d’écriture non disponible dans Google Font.
• Que faire si je ne connais pas le nom de la police d’écriture ?
• Les polices d’écritures sont aussi des icônes.

Les styles avancés.

• Positionnement relatif, absolue ou fixe.
• L’alignement avec les flexbox.
• La compatibilité entre navigateurs (préfixes).
• Créer 2 gabarits différents et créer des variantes avec les classes.
• Les propriétés CSS combinés (background, font, border …).

Créer un formulaire.

• Présentation de différents formulaire.
• Mon premier formulaire de contact avec un nom, un texte et un bouton.
• Faire fonctionner le formulaire de contact sans PHP en passant par un service d’envoi.
• Principe de l’envoi d’un formulaire en PHP en _GET ou _POST.
• Formulaire avancé avec des boutons à choix unique ou multiple, des sélecteurs …
• Les nouveautés (placeholder, required, tel, url, email, search, date, time, datetime …)
• Problème de compatibilité. Les bibliothèques Javascript comme complément.
• Personnaliser mon formulaire avec le CSS.
• Travaux pratique: Création d’un troisième projet en autonomie «Formulaire de contact».

Utiliser les Media Queries pour rendre son site compatible sur tous supports.

• Les nouvelles balises HTML5: header, nav, article, section, aside, footer …
• Rendre mon site compatible pour mobile, tablette et ordinateur avec les media queries.
• Les sons et vidéo. Problème de compatibilités entre navigateurs. Solutions.
• Quelques nouveautés CSS3 (animation, transition …).
• Intégration d’effets dynamiques avec la bibliothèque
• Javascript Jquery.
• Principe du Javascript et du Jquery
• Intégrer la librairie Jquery à mon code.
• Ajout de différents script (carrousel, afficher / masquer du contenu, galerie d’images …)