Formation Initiation HTML et CSS

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, 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

  • HTML et définition
  • W3C et le WHATWG
  • Une page web c'est quoi exactement ?
  • Présentation rapide de quelques outils : éditeurs de texte, wysiwyg et clients FTP

La syntaxe HTML : balises, éléments et attributs

  • Le principe de balise et d'élément
  • Attributs et valeurs
  • Quelques exemples d'attributs

Les liens hypertexte

  • Fonction d'un lien
  • La balise <a>
  • Liens externes
  • Liens internes et hiérarchisation du site
  • Ouvrir un lien dans un nouvel onglet ou laisser l'utilisateur choisir ?
  • Les liens spéciaux : mailto, ancres, etc.

Les balises HTML de type bloc

  • La balise division <div>
  • La balise paragraphe <p>
  • Espaces insécables
  • Forcer un saut de ligne avec <br>
  • Titres <h1> à <h6>
  • La balise <blockquote>

Doctype, html, body : structure d'un document valide

  • Le doctype
  • Les balises <html>, <head> et <body>
  • Les commentaires

Mise en forme de texte

  • Les balises <strong> et <em>
  • La balise <span>
  • D'autres balises (<sup>, <sub>, etc.)

Listes

  • Listes ordonnées
  • Listes non ordonnées

Ajouter des images avec la balise <img>

  • Guide des formats d'image pour le web et outils de compression
  • La balise <img> et ses attributs

Tableaux en HTML

  • Créer un tableau : <table> <tr> <td>
  • Un exemple de tableau simple
  • Ajout d'en-têtes avec <th>
  • Légende de tableau
  • Attributs avancés, dont colspan, rowspan

Les formulaires

  • Les formulaires sont partout autour de nous
  • La balise <form>
  • Le champ <input>
  • Ajout de libellés avec <label>
  • Les placeholder HTML5
  • Zone de texte multiligne <textarea>
  • Bouton de validation <input type="submit">
  • Présentation des autres éléments (checkbox, radio, <select>)

CSS et quelques concepts de base

  • Ajoutez du style à vos pages !
  • CSS : Cascading Style Sheets, une définition
  • Les CSS, un peu d'histoire
  • Différents rendus entre les navigateurs : le pixel perfect n'existe pas

Appliquer un style, oui mais où ?

  • Le CSS inline et inconvénients
  • Le CSS "interne" intégré au document et inconvénients
  • Feuille de style externe et balise <link>

Syntaxe CSS

  • La syntaxe de base : selecteur, propriété, valeur
  • La déclaration CSS
  • Les commentaires CSS

Généalogie et différents types de sélecteurs

  • Le sélecteur usuel d'élément HTML
  • Hiérarchie et généalogie : notion d'enfants, de parent, de descendance
  • Sélecteur de groupe, de classe
  • L'id ou identifiant
  • Espace entre sélecteurs, ou pas ?
  • Les pseudos-classes sur les liens
  • Les autres pseudo-classes

Couleurs et unités

  • Notation des couleurs en CSS
  • Les unités fixes en CSS
  • Les unités fluides en CSS
  • En web, quelle unité utiliser ?

Propriétés de typographie, polices et puces

  • Font-family et polices utilisables
  • Propriété typographiques (gras, italique, interlignage, etc.)
  • Changer la couleur du texte
  • Alignements de texte
  • Décoration de texte (soulignement, etc.)
  • Changer les icônes d'une liste à puce

Bordures et arrières plans

  • Bordures et styles, bords arrondis CSS3
  • Arrière-plan et propriétés background

Dimensions, margin et padding

  • Différences entre inline et block
  • Largeur et hauteur avec width et height
  • Dimensions maximum et minimum
  • Marge extérieure margin
  • Centrer horizontalement à l'aide de margin
  • Marge intérieure padding
  • Calcul des dimensions réelles d'un élément
  • S'affranchir du calcul avec box-sizing: border-box
  • Gestion des dépassements avec overflow

Initiation au positionnement CSS : les flottants

  • Les flottants et le flux
  • Ferrer les images à gauche et à droite
  • Nettoyer les flottants avec clear
  • Mise en page en deux colonnes avec les flottants
  • Notion de contexte de formatage de bloc et gestion des conflits de flottants

Propriété display et mise en page

  • Valeurs block, inline-block, inline et none
  • Créer une navigation à partir des propriétés de display

Positionnement CSS

  • Position relative pour déplacer des éléments
  • Position fixe et barre de navigation fixée en haut
  • Position absolue et déplacement d'élement dans bloc

Aller plus loin

  • Avant-goût du Responsive Web Design
  • Quelques exemples de mise en page

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.
Patiente et à l'écoute, merci à Stéphanie pour ses cours bien structurés et instructifs.
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.

Validez vos connaissances avec la certification HTML / CSS Alsacréations

La Certification “HTML/CSS” Alsacréations est une validation de vos acquis d'intégrateur ou développeur front-end. Elle est un gage de compétences, vous permet de vous auto-évaluer et peut être mise en avant sur votre CV : votre score reflète des compétences professionnelles spécifiques que les employeurs apprécient.

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

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

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