Formation HTML5 et CSS3, création d'un site internet professionnel

Journée 1:

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 que nous allons utiliser durant la formation.
• Installation du logiciel et des plug'in utiles.
• Installation de Chrome, Firefox.
• Aperçu du mode développeur sur les navigateurs Chrome et Firefox.

Création de notre premier projet avec une seule 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.

Journée 2 :

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.

 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.

Journée 3 :

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 (formulaire de contact, d'inscription à une newsletter, identifiant, inscription ...).
• 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".

Journée 4 :

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 (carousel, afficher / masquer du contenu, galerie d'images ...)

Installer un serveur local

• Introduction au serveur apache local et installation sur Windows (wamp) ou Mac (mamp).
• l'extension .php
• Les balises de déclaration de code php
• echo "Bonjour le monde";
• Le code include() en php pour faciliter la maintenance de notre site internet (on sépare le haut, le milieu et le bas de notre site).
• Création d'un index.php pour centraliser les contenus de nos pages (title, description ou autres éléments).

Travaux pratique: Conception d'un nouveau site en responsive design (HTML5) et mise en place du PHP pour gagner du temps.

Journée 5:

Le nom de domaine.

• Exemple d'une URL.
• Pourquoi le nom de domaine existe t'il ? Quelle utilité ? Comment choisir ?
• L'extension .com reine du monde. L'extention .fr en France. Les extensions plébiscités en France.
• Un nom de domaine, trois niveaux: le registrar, le DNS, le serveur MX (serveur de mail).
• Ce que doit être votre nom de domaine. Ciblez le public ? Les extensions par type d'activité.
• Whois ? Le domaine est-il disponible ?
• Acheter votre nom de domaine. Chez qui ? A quel prix ? Et après ?
• Configurez votre nom de domaine pour qu'il pointe vers votre site.

L'hébergement web.

• Qu'est-ce qu'un hébergeur web ?
• Vous avez dit Data Center ?
• Fonctionnement d'un serveur.
• Le logiciel Apache.
• Bien choisir son hébergeur web et l'offre d'hébergement la plus adapté à on activité (Mutualisé, serveur dédié, VPS ...).
• Transférer son site internet chez l'hébergeur avec un logiciel FTP.