Fondamentaux du HTML CSS

Généralités sur le Web, concepts et termes techniques

• Fonctionnement du Web, réseaux, services
• Clients et serveurs : rôles, technologies
• Hébergement Web et hébergeurs
• Domaines, ressources, adresses (URL)
• Qu’est-ce qu’un site Web, qu’est-ce qu’un CMS ?
• Le FTP : fonctionnement, utilité
• Les différentes technologies

Les bases du langage HTML, le code source

• Hypertexte, balisage et attributs de balise
• Structure d’un document HTML : les éléments essentiels
• Séparation du contenu et de la forme : le langage CSS
• Edition du code source, éditeurs WYSIWIG des CMS
• Affichage, rendu et inspection dans les différents navigateurs

Créer un document au format HTML 5

• Sémantique du balisage HTML5 et structuration des contenus
• En-tête simple : langue du document, titre, description
• Différence entre les éléments en ligne et en bloc
• Qu’est-ce que le Flux du document ?
• Eléments HTML simples : paragraphes, headings
• Eléments HTML composés : listes et tableaux
• Conteneurs : div, span, section
• Mise en forme avec strong, em et CSS
• Formulaires (initiation)

Mise en forme avec CSS

• Les différents médias d’affichage
• Couleurs, polices, unités, bordures
• Styles et attributs de style
• Assignation d’un style au document
• Assignation d’un style a un élément
• Sélecteurs, attributs id et classes, raccourcis
• Cascade des styles
• Création d’une feuille de style, réutilisation sur plusieurs pages

Insérer des images

• Adapter ses images pour le Web
• L’élément <img> et ses attributs
• Positionnement des images
• Animations d’images et effets (initiation)

Ancres et liens

• URL absolue, relative, paramètres d’URL
• Nommage des fichiers
• Protocoles : HTTP, HTTPS, FTP…
• L’élément <a> et ses attributs
• Lien vers une page interne du site, lien vers une page externe
• Définir des ancres et établir des liens vers ces ancres dans une même page
• Le type de lien mailto: intérêt et fonctionnalités
• Mise en forme des liens et effets de style avec CSS

Positionnement CSS

• Margin, padding, border, height/width
• Le positionnement dans le flux : relatif, absolu, fixe et z-index
• Le positionnement flottant
• Cas pratiques pour l’alignement

Tester son site

• Validateur W3C
• Désactiver le CSS
• Débogage avec l’inspecteur Web
• Liens cassés, chemins et droits
• Codes d’erreur HTTP (400, 404)
• Tester la compatiblité de son site sur plusieurs navigateurs et appareils
• Tester et comprendre la performance de son site