Apprenez à créer votre site web avec HTML5 et CSS3

Par Mathieu Nebra (M@teo21) Mise à jour : 01/11/2011 Difficulté : Facile Durée d'étude : 20 jours 208 729 visites depuis 7 jours, classé 1/784

Vous rêvez d'apprendre à créer des sites web ?
(mais vous avez peur que ce soit compliqué car vous débutez ?)

Vous êtes au bon endroit ! Ce cours est destiné aux débutants qui ne connaissent rien à la création de sites web et qui n'attendent qu'une chose : qu'on leur explique pas à pas comment tout cela fonctionne avec des mots simples et des exemples concrets !

Nous découvrirons dans ce cours les célèbres langages HTML5 et CSS3 que l'on utilise aujourd'hui pour concevoir des sites web. Même si ces "langages" ne signifient pas encore grand chose pour vous, rassurez-vous : tout ce que vous avez besoin de savoir sera expliqué dans ce cours ! Vous découvrirez notamment comment :

• Insérer du texte, des images et des vidéos
• Faire des liens entre vos pages
• Mettre en forme en modifiant la couleur, la taille, le fond, la police...
• Positionner les éléments du site comme bon vous semble : en-tête, menus...
• ... et bien plus encore !

Vous n'avez qu'une chose à faire : lisez les chapitres dans l'ordre et découvrez le monde fascinant de la création de sites web avec HTML5 et CSS3 !

Aperçu de sites web créés à l'aide des langages HTML5 et CSS3 que nous allons découvrir

Ce cours vous plaît ?

Si vous avez aimé ce cours, vous pouvez retrouver le livre "Réalisez votre site web avec HTML5 et CSS3" du même auteur, en vente sur le Site du Zéro, en librairie et dans les boutiques en ligne. Vous y trouverez ce cours adapté au format papier avec une série de chapitres inédits.

Vous pouvez également obtenir cet ouvrage au format eBook sur Amazon ou sur iTunes.

Plus d'informations

• Les bases de HTML5
• Les joies de la mise en forme avec CSS
• Mise en page du site
• Fonctionnalités évoluées
• Annexes
• Lire aussi
• Commentaires et appréciations

• Retour en haut

  Partie 1 : Les bases de HTML5

  Vous n'avez jamais entendu parler du HTML, ou alors seulement de façon très vague ?
  Pas de panique, les explications arrivent dès le premier chapitre... et la pratique suit juste après !
  
  Nous commencerons par présenter comment les sites web fonctionnent, puis nous téléchargerons tous les programmes (gratuits) nécessaires pour bien travailler.
  A la fin de cette partie, vous saurez déjà insérer du texte, des liens et des images !

  • Chapitre 1

    ---

    Comment fait-on pour créer des sites web ?

    • Comment fonctionnent les sites web ?
    • HTML et CSS : deux langages pour créer un site web
    • L'éditeur de texte
    • Les navigateurs
    • Q.C.M.
  • Chapitre 2

    ---

    Votre première page web en HTML

    • Créer une page web avec l'éditeur
    • Les balises et leurs attributs
    • Structure de base d'une page HTML5
    • Les commentaires
    • Q.C.M.
  • Chapitre 3

    ---

    Organiser son texte

    • Les paragraphes
    • Les titres
    • La mise en valeur
    • Les listes à puces
    • Q.C.M.
  • Chapitre 4

    ---

    Créer des liens

    • Un lien vers un autre site
    • Un lien vers une autre page de son site
    • Un lien vers une ancre
    • Cas pratiques d'utilisation des liens
    • Q.C.M.
  • Chapitre 5

    ---

    Les images

    • Les différents formats d'images
    • Insérer une image
    • Les figures
    • Q.C.M.
• Retour en haut

  Partie 2 : Les joies de la mise en forme avec CSS

  Maintenant que vous connaissez les bases du HTML... donnez du style à votre page grâce au CSS !

  • Chapitre 1

    ---

    Mettre en place le CSS

    • La petite histoire du CSS
    • Où écrit-on le CSS ?
    • Appliquer un style : sélectionner une balise
    • Appliquer un style : class et id
    • Appliquer un style : les sélecteurs avancés
    • Q.C.M.
  • Chapitre 2

    ---

    Formatage du texte

    • La taille
    • La police
    • Italique, gras, souligné...
    • L'alignement
    • Les flottants
    • Q.C.M.
  • Chapitre 3

    ---

    La couleur et le fond

    • Couleur du texte
    • Couleur de fond
    • Images de fond
    • La transparence
    • Q.C.M.
  • Chapitre 4

    ---

    Les bordures et les ombres

    • Bordures standard
    • Bordures arrondies
    • Les ombres
    • Q.C.M.
  • Chapitre 5

    ---

    Création d'apparences dynamiques

    • Au survol
    • Au clic et lors de la sélection
    • Lorsque le lien a déjà été visité
    • Q.C.M.
• Retour en haut

  Partie 3 : Mise en page du site

  Nous avons appris à construire des pages basiques en HTML, à modifier la mise en forme avec CSS... Intéressons-nous maintenant à la mise en page de notre site ! A la fin de cette partie, nous aboutirons à notre premier site complet, agencé comme nous le voulons !
  

  • Chapitre 1

    ---

    Structurer sa page

    • Les balises structurantes de HTML5
    • Exemple concret d'utilisation des balises
    • Assurer la compatibilité avec IE
    • Q.C.M.
  • Chapitre 2

    ---

    Le modèle de boîte

    • Les balises de type block et inline
    • Les dimensions
    • Les marges
    • Quand ça dépasse...
    • Q.C.M.
  • Chapitre 3

    ---

    Le positionnement en CSS

    • Le positionnement flottant
    • Transformez vos éléments avec display
    • Le positionnement inline-block
    • Les positionnements absolu, fixe et relatif
    • Q.C.M.
  • Chapitre 4

    ---

    TP : création d'un site pas à pas

    • Maquettage du design
    • Organiser le contenu en HTML
    • Mettre en forme en CSS
    • Assurer la compatibilité avec IE
    • Vérifier la validité
    • Le code final
• Retour en haut

  Partie 4 : Fonctionnalités évoluées

  A ce stade, vous êtes déjà capables de réaliser sans problème votre site web.
  Nous allons découvrir dans cette partie de nouvelles fonctionnalités de HTML et CSS, que l'on peut considérer un peu plus évoluées (et donc un peu plus complexes).

  • Chapitre 1

    ---

    Les tableaux

    • Un tableau simple
    • Un tableau structuré
    • Q.C.M.
  • Chapitre 2

    ---

    Les formulaires

    • Créer un formulaire
    • Les zones de saisie basiques
    • Les zones de saisie enrichies
    • Les éléments d'options
    • Finaliser et envoyer le formulaire
    • Q.C.M.
  • Chapitre 3

    ---

    La vidéo et l'audio

    • Les formats audio et vidéo
    • Insertion d'un élément audio
    • Insertion d'une vidéo
    • Q.C.M.
  • Chapitre 4

    ---

    Aller plus loin

    • Du site web à l'application web (Javascript, AJAX...)
    • Technologies liées à HTML5 (Canvas, SVG, Web Sockets...)
    • Les sites web dynamiques (PHP, JEE, ASP .NET...)
• Retour en haut

  Partie 5 : Annexes

  Les annexes contiennent d'autres informations qui vous seront utiles lors de la création de votre site web, comme des mémentos (résumés), ou encore des explications sur la façon dont on envoie un site sur le web.
  Vous n'êtes pas obligés de lire ces informations à la fin, vous pouvez vous en servir n'importe quand lors de votre lecture du cours.

  • Chapitre 1

    ---

    Envoyez votre site sur le web

    • Le nom de domaine
    • L'hébergeur
    • Utiliser un client FTP
  • Chapitre 2

    ---

    Mémento des balises HTML

    • Balises de premier niveau
    • Balises d'en-tête
    • Balises de structuration du texte
    • Balises de liste
    • Balises de tableau
    • Balises de formulaire
    • Balises sectionnantes
    • Balises génériques
  • Chapitre 3

    ---

    Mémento des propriétés CSS

    • Propriétés de formatage de texte
    • Propriétés de couleur et de fond
    • Propriétés des boîtes
    • Propriétés de positionnement et d'affichage
    • Propriétés des listes
    • Propriétés des tableaux
    • Autres propriétés

Le cours s'arrête ici ! Pensez à consulter les annexes si vous ne l'avez pas fait, vous y découvrirez de nouvelles pistes pour poursuivre votre apprentissage de HTML et CSS !

Partager

Lire aussi

	Comment fait-on pour créer des sites web ?
	Aller plus loin
	Des techniques modernes pour l'agencement en colonnes
	TP : création d'un site pas à pas

Retour en haut

1201 commentaires pour "Apprenez à créer votre site web avec HTML5 et CSS3"

Note moyenne : 3.85 / 4 (3149 votes)

Pseudo	Commentaire
Moctey	# Posté le 08/05/2012 à 21:02:18
Avis : Très bon	C'est super !!! Merci le site du zéro !!!
pier4du86	# Posté le 11/05/2012 à 19:28:51
Avis : Très bon	Super tuto vraiment mais juste je suis entrain de créé mon site web et pour une présentation de projet personnel j'ai besoin d'y insérer un diaporama fais sous openoffice.org 3.3impress et j'aimerais gardé une sorte d'interaction au seins de celui-ci comment puis-je l'insérer à mon site et comment garder ses interactions ? Merci d'avance.
Kukka	# Posté le 12/05/2012 à 20:46:26
Avis : Très bon	Bonjour voici le site que j'ai créer en 5 jours (2 jours de conception pure et 3 jours de lecture de vos instructions) Évidemment il reste quelques modifications a faire. Merci pour ces explications. http://asgardpictures.franceserv.com/
clara_web	# Posté le 14/05/2012 à 11:14:47
	Bonjour! Jai un probleme de zoom sur mon site web avec Google Chrome en effet en changeant de page le zoom s agrandit ou se retrecit... Auriez vous une idee pourquoi? Merci davance!!"
Herval	# Posté hier à 05:48:00
Avis : Très bon	Ca c'est un tuto assez violent! Mais SVP puisque j'ai lu le tuto alors j'aimerais savoir avec quoi on crée des onglets du genre la partie web du site du zéro ainsi que le menu programmation dans une page web et comment cela se fait.

Voir tous les commentaires