Formation HTML 5/CSS 3 – les bases

Formation HTML 5/CSS 3 – les bases

Inscription

Contactez-nous directement pour connaitre les modalités de mise en place de cette formation.

Objectifs

Vous souhaitez connaitre les bases du langage de structuration graphique de contenu web et pouvoir ainsi éditer / modifier tout types de pages ? Cette formation vous permettra de comprendre les principes de balises, la structuration HTML et les spécificités de la version HTML 5 vous permettant la création d’un site “reponsive” compatible tous supports.

Suite à cette formation, vous serez en mesure de créer des pages responsives et modernes en étant conscient des contraintes de compatibilité.

Pour quels profils ?
Toute personne souhaitant créer ou modifier du contenu selon les dernières normes HTML 5/CSS 3.

Prérequis
Bonne maitrise de l’outil informatique. Une bonne connaissance de l’utilisation du web est indispensable.

Contenu de formation

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 …)


Les autres formations qui pourraient vous intéresser