Vous êtes ici

Formation HTML et CSS

Formation HTML et CSS

Formation HTML et CSS : Apprendre à concevoir un site web dans les règles de l'art

Dispensée par les membres de notre équipe d'intégrateurs web, notre formation HTML et CSS est destinée aux développeurs web et webdesigners désirant 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.

Contexte :

L'Hypertext Markup Language (HTML) est le format de données conçu pour représenter les pages web. C'est un langage de balisage qui permet de structurer sémantiquement et de mettre en forme le contenu des pages, d'inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets. Les feuilles de style en cascade (Cascading Style Sheets : CSS) est un langage informatique qui sert à décrire la présentation des documents HTML et XML.

Public :

Cette formation s'adresse aux utilisateurs de l'informatique, contributeurs, informaticiens (chefs de projet, concepteurs, réalisateurs, développeurs débutants, webmasters amenés à participer à l'élaboration de documents en vue d'une mise en place sur le web. Pour tirer pleinement profit de cette formation, il est simplement nécessaire d'avoir une bonne pratique de l'internet.

Objectifs :

Ce cours a pour objectifs de savoir réaliser une structure de pages web en langages HTML et CSS de façon totalement autonome, et en particulier de :

Comprendre et utiliser le langage HTML et de concevoir des pages internet valides selon les standards W3C
Connaître les principales balises HTML existantes
Structurer son contenu, d'utiliser des éléments de liste, des liens hypertexte, d'insérer des images
Appliquer ses premières mises en forme à l'aide des styles CSS

Durée :

2 jours

Les Plus :

Une pédagogie riche : l'alternance d'exposés théoriques, de mises en application immédiate à travers de nombreux travaux pratiques et de partages d'expériences garantit une appréhension rapide de HTML et CSS.
Les méthodes, bonnes pratiques et astuces pour créer des pages web en tirant le meilleur parti des possibilités offertes par HTML.
Le support de formation complet fourni dès le début de la formation.

Certification :

Possibilité de délivrer une formation certifiante TOSA dans le cadre du CPF ou de la Période de Professionnalisation.
Prévoir le coût de la certification en supplément

Logo TOSA.

 

Pour toute demande concernant la formation contactez-nous au

03 80 60 52 99

Programme :

Introduction et notions de base

  • HTML et définition
  • Le 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 (id, src, class, href, etc)

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

  • Le doctype
  • La balise <html>
  • La balise <head>
  • La balise <body>
  • Le commentaire dans le HTML

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, ancre, etc.

Les balises HTML de type bloc

  • La balise « division » <div>
  • La balise paragraphe <p>
  • Espaces insécables
  • Forcer un saut de ligne <br/>
  • Titre h1 à h6
  • Les listes HTML
  • Listes ordonnées, listes non ordonnées
  • La balise blockquote

Les balises HTML de type inline

  • Éléments en ligne « inline » de mise en forme de texte
  • La balise <em> , strong, b et i
  • La balise <span>
  • D’autres balises (code cite abbr)

Ajouter des images avec la balise img

  • Rapide guide des formats d’image pour le web et outils de compression
  • La balise <img> (src, alt, title, etc.)
  • Attributs width et height

Les tableaux HTML pour des données tabulaires

  • Créer un tableau : <table> <tr> <td>
  • Un exemple de tableau simple
  • Ajout d’une entête avec <th>
  • Ajouter un titre au tableau (caption)
  • Colspan, rowspan et attributs avancés

Les formulaires

  • Les formulaires sont partout autour de nous
  • La balise <form>
  • La zone de texte monoligne <input>
  • Ajout de libellé <label>
  • Les placeholder (ne sont pas des labels !)
  • Associer le label au champ (id et name)
  • Zone de texte multiligne <textarea> et attributs
  • Bouton d’envoi <input type="submit">
  • Rapide présentation des autres éléments (checkbox, radio, select)
  • Rapide mot sur les inputs HTML5

Les 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
  • Différents degrés de compréhension des propriétés en fonction des navigateurs

Appliquer un style

  • Le CSS “en ligne” dans la balise HTML et les inconvénients de cette technique
  • Le CSS “interne” dans l’entête du HTML et les inconvénients de cette technique
  • La / les feuille(s) de style externe(s)
  • Un petit schéma récapitulatif HTML + CSS

La syntaxe CSS

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

Les différents types de sélecteurs

  • Le sélecteur usuel d'élément HTML
  • Hiérarchie et généalogie
  • Notion d’enfants
  • Notion de parent
  • Sélecteur de descendance
  • Sélecteur de groupe
  • Les sélecteurs de classe
  • Les classes multiples
  • Cibler une balise HTML avec une classe (p.maclasse)
  • Cibler une classe indépendamment de la balise (.maclasse)
  • L’id ou identifiant
  • Espace ou pas entre mes selecteurs ?
  • 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
  • Line-height
  • Font-size
  • Font-weight
  • Font-style
  • Color
  • Text-align
  • Text-decoration
  • Changer les icônes d’une liste à puce

Bordures et arrières plans

  • Les bordures : border, style de bordure et bords arrondis CSS3
  • Background-color, Background-image, Background-repeat, Background-position et Background-attachment

Dimensions margin et padding

  • Rappel de la différence inline et block
  • Largeur et hauteur avec width et height
  • Max et min width-height
  • Marge extérieures « margin »
  • Centrer horizontalement à l’aide de margin
  • Padding : la marge « intérieure »
  • Padding et calcul de dimension d’élément
  • Overflow: hidden et auto

Initiation au positionnement CSS

  • Les « flottants » et le flux (left, right, clear)
  • La propriété « display » pour mise en page (block, inline, inline-block)
  • Positionnement CSS (absolute, relative, fixed)
  • Quelques exemples de mise en page
Retour en haut de page