Formation initiation HTML et CSS

Formation initiation HTML et CSS

Vous avez un site web et vous voulez dompter votre code source !

Apprenez à coder comme un webmaster

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.
Cette formation s’adresse principalement aux personnes ou sociétés qui possèdent déjà un site web e-commerce ou corporate, et qui souhaitent travailler directement sur le code source.

A la fin de la formation, le stagiaire est capable :

  • de comprendre et utiliser le langage HTML et de concevoir des pages internet valides selon les standards W3C;
  • de connaître les principales balises HTML existantes;
  • de structurer son contenu, d’utiliser des éléments de liste, des liens hypertexte, d’insérer des images;
  • d’appliquer ses premières mises en forme à l’aide des styles CSS;
  • de modifier votre site web en mode HMTL;
  • de créer ou modifier des newsletters;

Tarifs & Conditions
Être déjà familier avec les outils informatiques et le Web en général.
Durée : 6h ( 2 jours ) | Prix : 3 000 dhs HT
+ DVD de la formation

Détails de la formation

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

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

  • Le doctype
  • La balise La balise
  • La balise
  • Le commentaire dans le HTML

3- 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)

4- Les liens hypertexte

  • Liens externes et liens internes
  • Target
  • Les liens “spéciaux” : mailto, ancre, etc.

5- Les balises HTML de type bloc

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

6- Les tableaux HTML pour des données tabulaires

<table>
<tbody>
<tr>
<td>Un exemple de tableau simple
Ajout d’une entête avecAjouter un titre au tableau (caption)
Colspan, rowspan et attributs avancés</td>
</tr>
</tbody>
</table>

7- Ajouter des images avec la balise img

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

8- 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)

9- La syntaxe CSS

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

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

11- Les classes 

  • 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
  • Les pseudos-classes sur les liens

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

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

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

©2017 NOLIMIT DIGITAL AGENCY since 2001

 

Vous connecter avec vos identifiants

Vous avez oublié vos informations ?