Microbos - Prestataire informatique... Nos formations informatiques

Module 2 : L’initiation et la création d’un site Internet en HTML et CSS.

Public : Débutant – Intermédiaire ; Durée : 3 jours (15 heures) ; Tarifs : 900€ H.T.

L’initiation du langage HTML (langage qui affiche des éléments textuels, graphiques et vidéos dans un navigateur « Web » et assure leur mise en page) et des feuilles de style CSS (langage qui se charge de la mise en forme et de la mise en page des éléments HTML).

Cette formation de trois journées s'adresse aux personnes débutantes ou intermédiaires souhaitant se familiariser avec les langages du « Web ».

Ce module va permettre d’une part, de réaliser une conception de pages « Web » en langages HTML et CSS de façon totalement autonome, avec ou sans éditeur WYSIWYG et avec ou sans tableaux de mise en page, et d’autre part d’étudier les différentes étapes de création d’un projet Internet.

PRÉSENTATION :

L’objectif de cette formation est de savoir exploiter pertinemment le langage HTML et le potentiel encore mal connu de la norme des feuilles de styles CSS, tout cela dans le respect des standards de conception W3C (organisme de normalisation des standards de l’Internet), de compatibilité entre les navigateurs et des bonnes pratiques.

OBJECTIF :

A la fin de la prestation, la personne est capable de comprendre et d’utiliser le langage HTML, 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 et d'appliquer ses premières mises en forme à l'aide des styles CSS.

PRINCIPE :

Le principe de la formation est d’acquérir les compétences nécessaires pour maîtriser le développement de sites Internet en HTML et CSS au moyen d’un programme de formation et d’un projet en parallèle visant à concrétiser l’utilisation et l’intérêt de ces outils.

PRÉ-REQUIS :

Cette formation de trois jours s’adresse aux personnes débutantes ou intermédiaires ou déjà familiarisées avec les outils informatiques et le « Web » en général, désirant maîtriser le langage HTML et les feuilles de style CSS et concevoir des pages Internet valides selon les standards W3C (organisme de normalisation des standards de l’Internet).

DURÉE :

3 jours (15heures)

PROGRAMME :

Programme de la première journée : découverte des bases de l’HTML

I. L’introduction, la présentation et les notions de base

La page « Web », le W3C et le WHATWG.
La présentation de quelques outils : éditeurs de texte, wysiwyg et clients ftp.
La syntaxe HTML et le principe de balise, d’éléments et d’attributs.

II. La programmation HTML efficace

L’élaboration de la structure d’un document.
Le code scindé en sections logiques.
La création d’un modèle personnalisé.
Le doctype, les balises « html », « head » et « body ».
Les balises de commentaire dans le HTML.
Les attributs (« id », « src », « class », « href », etc.) et les valeurs.

III. La mise en forme standard d’un texte

La création d’un filtre de section.
La définition d’un paragraphe.
L’insertion d’un saut de ligne.
La mise en valeur d’un texte.
Les espaces et les marges.
La création d’une liste à puce.
La création d’une liste numérotée.
L’insertion d’un trait horizontal.
L’alignement d’un passage de texte.
La création d’un lien hypertexte.
Le renforcement d’un lien hypertexte.

IV. Les liens hypertextes

La fonction d’un lien et la balise « a ».
Les liens externes, les liens internes et la hiérarchisation du site.
L’ouverture d’un lien dans un nouvel onglet ou le choix de l’utilisateur.
Les liens spéciaux : « mailto », « ancre », etc.

V. Les balises HTML de type « inline »

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

VI. Les balises HTML de type « bloc »

Les balises HTML de type bloc.
La balise de division « div ».
La balise de paragraphe « p ».
Les espaces insécables.
Le saut de ligne « br ».
Les titres (« h1 » à « h6 »).
Les listes HTML.
Listes ordonnées et les listes non ordonnées.
La balise « blockquote ».

Programme de la deuxième journée : Les concepts de base et les CSS

VII. L’ajout d’images avec la balise « img »

Le guide des formats d’image pour le « Web » et les outils de compression.
La balise « img » et les attributs « src », » alt », « title », etc.).
Les attributs « width » et « height ».

VIII. La mise en page en HTML

Les tableaux HTML pour des données tabulaires.
La mise en page avec des cadres.

IX. La création de formulaires interactifs

La balise « form ».
La zone de texte monoligne « input ».
L’ajout de libellé « label ».
Les placeholder et la différence avec des labels.
L’association d’un label au champ (« id « et « name »).
Les zones de texte multiligne « textarea » et les attributs.
Le bouton d’envoi « submit ».
La présentation des autres éléments (« checkbox », « radio », « select »).
Les inputs HTML5.

Programme de la troisième journée : la définition, les concepts de base et l’utilisation des CSS

X. Les feuilles de styles CSS et les concepts de base

Les pages avec CSS ( Cascading Style Sheets).
Les différents rendus entre les navigateurs et la pixellisation.
Les différents degrés de compréhension des propriétés en fonction des navigateurs.

XI. L’application d’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.
Les feuilles de style externes.
Un petit schéma récapitulatif HTML et CSS.

XII. La syntaxe CSS

La syntaxe de base : sélecteur, propriété, valeur.
La déclaration CSS.
Les commentaires CSS.

XIII. La généalogie et les différents types de sélecteurs

Le sélecteur usuel d'élément HTML.
La hiérarchie et la généalogie.
La notion de parents et d’enfants.
Les sélecteurs de descendance.
Les sélecteurs de groupe.
Les sélecteurs de classe.
Les classes multiples.
Le ciblage d’une balise HTML avec une classe (p.maclasse).
Le ciblage d’une classe indépendamment de la balise (.maclasse).
L’identifiant ou « id ».
Un espace ou pas entre mes sélecteurs ?
Les pseudos-classes sur les liens.
Les autres pseudo-classes.

XIV. Les couleurs et les unités

La notation des couleurs en CSS.
Les unités « fixes » en CSS.
Les unités « fluides » en CSS.
Les unités à utiliser dans les applications « Web ».

XV. Les propriétés de typographie et la mise en page sur le « Web »

La police, la graisse, la taille et la couleur de caractères au moyen d’un style.
La mise en valeur au moyen d’un style.
La hauteur des lignes et des interlignes au moyen d’un style.
L’alignement au moyen d’un style.
La suppression du soulignement des liens au moyen d’un style.
La définition des marges au moyen d’un style.
Les couleurs et les images d’arrière- plan au moyen d’un style.
Le contrôle d’une mosaïque au moyen d’un style.
La propriété « font-family » et les polices utilisables.

XVI. Les bordures et les arrières plans

Les bordures avec « border », le style de bordure et les bords arrondis CSS3.
Les proprieties « background-color », « background-image », « background-repeat », « background-position » et « background-attachment ».

XVII. Les dimensions avec « margin » et « padding »

Le rappel de la différence « inline » et « block ».
La largeur et la hauteur avec « width » et « height ».
Les propriétés « max », « min » et « width-height ».
Les marges extérieures et le centrage horizontal avec « margin ».
La marge intérieure et le calcul de dimension d’élément avec « padding ».
La propriété « Overflow » et les attributs « hidden » et « auto ».

XVIII. Le positionnement d’éléments avec des feuilles de styles en cascade

Les « flottants » et le flux « left », « right » et « clear ».
La propriété de mise en page « display » et les attributs (« block », « inline » et « inline-block »).
Le positionnement CSS (« absolute », « relative » et « fixed »).
Quelques exemples de mise en page.