Formation Initiation HTML5 et CSS3

Apprenez à réaliser des pages web en langages HTML et CSS de façon totalement autonome, sans éditeur WYSIWYG ni tableaux de mise en page.

Public

Rédacteurs de contenu souhaitant comprendre le code manipulé, webmasters débutants, graphistes et autres métiers liés au web

Objectifs

Savoir réaliser une conception de pages web en langages HTML et CSS de façon totalement autonome, sans éditeur WYSIWYG ni tableaux de mise en page. Concevoir des sites internet valides selon les standards W3C, connaître les principales balises HTML existantes, structurer son contenu (utiliser des éléments de liste, des liens hypertexte, des images), appliquer ses premières mises en forme à l'aide des styles CSS.

Prérequis

Être déjà familier avec les outils informatiques et le Web en général.

Moyens pédagogiques

Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 7 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.

Suivi et appréciation des résultats

L'exécution physique de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les stagiaires et le formateur.
Sanction : attestation de fin de stage.

Introduction et notions de base

  • C'est quoi HTML ? (et un peu d'histoire)
  • Les standards (W3C)
  • Les navigateurs web (inspecter un élément, lire la source)
  • Les éditeurs de code (Atom, Brackets, Notepad++, etc.)

La syntaxe HTML

  • La balise et l'élément
  • Les Attributs et leurs valeurs

La structure d'une page web

  • Le Doctype
  • Les éléments <html>, <head>, <body>
  • Les bonnes pratiques (indentation de code, commentaires)

Les éléments HTML5 et blocs sectionnants

  • <div>, le conteneur de bloc neutre
  • <header> et <footer>, introduction et conclusion de section
  • <nav>, les liens de navigation principaux
  • <section> et <article>, les sections de contenus
  • <aside>, la section complémentaire

Les paragraphes et les titres

  • <p>, le paragraphe
  • <h1>, <h2>… <h6>, les niveaux de titres
  • <strong> et <em>, la mise en exergue
  • <br>, le saut de ligne
  • <span>, le conteneur de texte neutre

Les listes

  • <ul>, les listes non ordonnées
  • <ol>, les listes ordonnées

Les liens hypertexte

  • <a>, les liens, leur structure et l'accessibilité
  • Les attributs : href, target, title. Ancres et mailto
  • Les liens externes et les liens internes

Les images de contenu

  • <img>, formats d'image pour le Web
  • Structure et accessibilité (<figure>)

L'audio et la vidéo

  • <audio>, formats et structure
  • <video>, formats et structure

Les tableaux en HTML

  • Créer un tableau : <table> <tr> <td>
  • Ajouter des en-têtes avec <th>
  • La légende de tableau

Les formulaires

  • La conteneur de formulaire : <form>
  • Le champ <input> (texte, email, etc.)
  • Ajout de libellés avec <label>
  • Zone de texte multiligne <textarea>
  • Bouton de validation
  • Présentation des autres éléments (placeholder, checkbox, radio, <select>)

Introduction et concepts de base

  • CSS : Cascading Style Sheets, c'est quoi ?
  • Les CSS, un peu d'histoire
  • La fonction de CSS

Syntaxe générale

  • Le sélecteur (classe, élément, id)
  • Les propriétés et leurs valeurs
  • Les commentaires en CSS

Où appliquer les styles ?

  • Dans l'élément <head>
  • Dans la balise (méthode "inline")
  • Dans un fichier .css séparé

CSS et les navigateurs

  • Le rendu visuel des navigateurs (et leurs différences)
  • Le support des propriétés

Priorité et hierarchies

  • La hierarchie des éléments
  • Les priorités en CSS
  • Les sélecteurs CSS usuels
  • Les pseudos-classes usuelles

Propriétés CSS visuelles

  • color et background-color, la couleur de texte et d'arrière-plan
  • Les unités de mesure (fixes et fluides)
  • Les propriétés typographiques
  • Les bordures et images de fond

Le modèle de boîte

  • Le modèle de boîte
  • Les dimensions des éléments (min-|max-)width et (min-|max-)height
  • les marges internes et externes (padding, margin)

Initiation au positionnement CSS

  • La notion de Flux
  • Les valeurs de la propriété display (block, inline, inline-block, none, table), etc.
  • Les flottants (float)
  • La propriété position (absolute, relative, fixed)
  • Le modèle Flexbox
  • Le futur en marche : Grid Layout

Travaux Pratiques

Programme en cours de finalisation. À venir prochainement.

Besoin d'un financement ?

Une formation est un investissement, pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées.

Voir les différents financements

À la suite de cette formation, nous vous recommandons :

Témoignages

Ils ont aimé

Le cours a été bien présenté et bien structuré. Le formateur était à l'écoute et disponible. Le cours est bien pour des développeurs sans connaissances web, mais je pense qu'il serait plus adapté en 3 jours pour des non informaticiens.
Un bon rythme théorie/pratique, une formatrice pédagogue, un bon accueil, des supports réutilisables... Je me sens plus armée dans mon métier de designer UX et ai désormais envie de m'exercer pour approfondir le sujet HTML/CSS.
Patiente et à l'écoute, merci à Stéphanie pour ses cours bien structurés et instructifs.

Envie de connaître la date
de nos prochaines formations ?

Calendrier des formations

Nous contacter

09 54 96 50 50 contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France