CATALOGUE Code & Data Formation XHTML/CSS Apprendre XHTML & CSS Création de la Page d'Accueil de A à Z

Création de la Page d'Accueil de A à Z

Mise en place du projet

Vidéo non disponible ! Réessayez plus tard

9h 49min

54 leçons

3,0

Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

9h 49min

54 leçons

3,0

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Initialisation et Mise en Page avec HTML et CSS

Objectifs

Les objectifs de cette vidéo sont :

Créer une page d'accueil en HTML.
Apprendre à lier des feuilles de style externes avec CSS.
Centrer du contenu sur une page web de manière efficace.
Utiliser des marges et des paddings pour styliser le contenu.

Résumé

Résume de configuration initiale et de la mise en page en utilisant le langage HTML et le CSS.

Description

Dans cette leçon, nous commencerons par créer le premier contenu en copiant le code HTML de la page d'accueil. Nous allons travailler sur ce fichier pour intégrer des titres, des paragraphes et des listes de liens. Nous introduirons également l'élément blockquote pour afficher des citations.

Nous apprendrons à utiliser l'outil Skeletor pour générer une page XHTML 1.0 strict valide, ainsi qu'à lier une feuille de style externe nommée global.css. Nous illustrerons comment donner un style initial au contenu et centrer celui-ci à l'aide des marges automatiques en CSS.

Ensuite, nous ajusterons la largeur du conteneur global pour inclure des ombres portées et utiliserons des techniques avancées de centrage et de mise en page de texte. Enfin, nous ajouterons une image de fond et ajusterons la typographie de manière adéquate.

Questions - réponses

Quel est l'élément HTML utilisé pour annoncer une citation?

L'élément HTML utilisé pour annoncer une citation est

.

Pourquoi est-il préférable d'utiliser des valeurs de taille en pourcentage plutôt qu'en pixels pour le texte?

Utiliser des valeurs en pourcentage pour la taille du texte est préférable pour l'accessibilité, car cela permet au texte de se redimensionner correctement dans tous les navigateurs.

Comment centrer un contenu horizontalement en CSS?

Pour centrer un contenu horizontalement en CSS, on utilise les marges automatiques, par exemple : margin-left: auto; margin-right: auto.

Programme détaillé

Accueil de la formation

Module 1 - Introduction

Le mot de l'auteur avec Tuto XHTML et CSS 00:53

Module 2 - Apprendre XHTML et CSS

Module 3 - Premier contact avec HTML et CSS

Qu'est-ce qu'une page web ? À quoi servent les feuilles de style ? 08:00

HTML: du contenu et des balises 08:26

Les principales balises HTML pour le texte 07:15

Exercice de balisage HTML : présentation de l'exercice 01:23

Corrigé: structurer un texte en HTML 06:36

Les commentaires en HTML 02:09

Styles CSS : attribut style et élément style, sélecteur d'éléments 09:41

Styles CSS : utiliser les classes et identifiants 07:26

Exercice : reproduction d'un style existant 17:55

Des images pour les pages web 15:43

Module 4 - Annexe 1: Travailler avec les bons outils

Éditeur WYSIWYG ou éditeur de code ? 06:27

Les navigateurs web 05:44

Barre d'outils Web Developer et Firebug 08:53

Module 5 - Introduction à la mise en page en CSS

Éléments de type bloc et éléments de type en-ligne 16:40

Le modèle de boite CSS : hauteur et largeur 13:15

Le modèle de boite CSS : les marges 07:34

Le modèle de boite CSS : bordures et padding 08:33

Le modèle de boite CSS : comment se cumulent ces propriétés 04:45

Le positionnement relatif 11:31

Le positionnement absolu 08:04

Le positionnement flottant 12:14

Une fiche produit (exercice) : balisage HTML 15:15

Une fiche produit (exercice) : mise en forme CSS 18:10

Module 6 - Annexe 2 : Standards et validité

Validité du code XHTML 18:00

Les validateurs sont mes amis 08:13

Les standards XHTML et CSS : spécifications et références 15:45

Module 7 - Mise en page d'un design simple

Présentation de l'exercice : réalisation d'un site web complet 03:52

Mise en place du projet 16:36

Mise en forme de l'en-tête du site 13:40

Analyse du design et création de de blocs conteneurs (éléments DIV) 06:18

Positionnement des principaux blocs 16:40

Un point sur les couleurs pour le Web (couleurs en CSS, outils pratiques) 10:13

Décorer un bloc avec des images de fond (propriété background) 25:15

Module 8 - Des menus de navigation en HTML et CSS

Qu'est-ce qu'un menu de navigation? 12:12

Analyse du design du menu principal de notre site web 03:23

Styles CSS du menu principal 20:44

Module 9 - Annexe 3 : L'encodage des caractères

Qu'est-ce qu'un encodage de caractères ? Quel encodage choisir ? 06:05

Comment bien déclarer l'encodage d'une page ? 08:50

Les entités HTML 09:58

Module 10 - Mise en forme du contenu

Mise en forme des contenus de l'accueil : boites pour le texte 06:19

Mise en forme des contenus de l'accueil : styles du texte 13:36

Préparation de la page «fiche produit» 03:00

Intégration et adaptation de la fiche produit 24:22

Récapitulatif des propriétés CSS pour le texte 16:00

Module 11 - Annexe 4 : Des gabarits de mise en page pour vos projets

Présentation des gabarits de mise en page 16:23

Rappel largeur fluide et largeur fixe - Modifier un gabarit 05:33

Module 12 - Mise en forme d'un contenu

Construire et mettre en forme un tableau 17:42

Un formulaire simple en HTML 13:38

Mise en forme du formulaire 13:36

Module 13 - Conclusion

Conclusion de la formation avec Tuto XHTML et CSS 01:58

Demo - Le mot de l'auteur avec Tuto XHTML et CSS 00:53

Demo - Exercice : reproduction d'un style existant 17:55

Demo - Style CSS du menu principal 20:44

1 commentaire

3,0

1 vote

wfischli

Il y a 2 years

Commentaire

Dans l'ensemble bon cours, toutefois pas adapté au débutant car très touffu.
Je me perds toujours dans les marges, les paddings et les positionnements!
Beaucoup de petites astuces, bienvenues.
Gros défaut: tous les écrans sont flous, et le son est exécrable.