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

Créer un site internet dans le respect des bonnes pratiques et utiliser les nouveautés du HTML5 pour obtenir un site compatible sur tous supports "responsive design" (mobile, tablette, ordinateur).

35 heures | 5 jours
Débutant
Dernière mise à jour : 09/2021
Formation HTML5 et CSS3, création d'un site internet professionnel

logo qualiopi
Objectifs de formation
  • Être autonome pour réaliser son propre site internet en HTML et CSS.
  • Créer des formulaires et structurer la mise en page.
  • Rendre son site agréable à visiter avec des animations et effets visuels.
  • Découvrir les nouveautés du HTML5.
  • Travail en local et utiliser une petite touche de PHP.
  • Acheter un nom de domaine et un hébergement web et publier son site.
Pré-requis à la formation
  • Formation accessible aux débutants souhaitant apprendre un premier langage de programmation (aucune connaissance en informatique n'est nécessaire).
Programme

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.

Notre organisme est certifié Qualiopi, gage de la qualité de nos services.
Vous pouvez télécharger notre certificat en suivant ce lien :
Téléchargez notre certificat Qualiopi
Informations supplémentaire sur la formation
Modalités pédagogiques

Nous favorisons un apprentissage avec des apports théoriques et des exercices sous forme de travaux pratiques (mise en situation, cas pratiques ...), contrôle continu et qcm pour favoriser l'apprentissage et atteindre les objectifs.

Modalités d'inscription

Inscription possible à tout moment, sous réserve de place disponible, en nous contactant au 0805 691 308. Un délai de rétractation de 14 jours s'applique.

Outils et supports

Nous précaunisons l'utilisation de votre propre ordinateur pour les formations qui ont lieu en présentiel et à distance. Un poste de travail est disponible pour les formations en présentiel. Le support de cours est transmis par le formateur.

Modalités de formation à distance

Les formations à distance se déroule en « classe virtuelle », avec un logiciel de visio-conférence, permettant de vous former dans toute la France depuis votre lieu de travail. Notre outils de visio-conférence favorise l'apprentissage avec des outils comme le partage de la caméra, partage d'écran, un tableau blanc, un espace de dialogue par message, la possibilité pour l'apprenant de « lever la main » pour interpeller le formateur, le partage de fichiers (cours, travaux pratiques ...) et l'enregistrement des sessions pour revoir le cours.

Modalités d'évaluation

Avant la formation
Un audit gratuit et sans engagement est établi notre formateur référent. Un test d'autopositionnement avant l'entrée en formation est envoyé.

Au cours de la formation
Travaux pratiques, mises en situation réel, quiz ... pour valider l'appropriation et la compréhension de chaque notion abordée en formation par les participants.

Après la formation
Une attestation de formation et un certificat de réalisation, reprenant l'ensemble des informations de la formation est remise aux stagiaires. Un certificat est remis au stagiaire après le passage de la certification.

Évaluation qualitative

En fin de formation un questionnaire de satisfaction est à remplir par le stagiaire pour nous permettre d'améliorer notre offre.

Modalités particulières

Nous adaptons les outils et réseaux nécessaires afin d'accueillir, accompagner et former les publics en situation de handicap. avec une adaptation possible du rythme pédagogique et des modalités d'évaluation.Renseignez-vous auprès de la personne référente : Mickael Masset au téléphone 01 83 64 34 37.

Formateur pour cette formation
Formateur pour cette formation Mickael
Mickael dispose d'une solide expérience front-end et notamment en référencement et graphisme. Il travail en informatique depuis plus de 15 ans. Mickael intervient également en administration système Linux et et macOS.
Autres formations qui pourraient vous intéresser
Formation Atomic Design
Dernière mise à jour : 02/2019
1690 € HT
Formation Progressive Web App (PWA)
Dernière mise à jour : 06/2020
1290 € HT
Formation au préprocesseur SASS avec le framework Compass
1290 € HT
Formation Responsive Web Design
Dernière mise à jour : 01/2020
1200 € HT