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 311 502 visites depuis 7 jours, classé 1/795

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.

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, des images et même des vidéos !

  • 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.
  • 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.
  • Organiser son texte
    
    • Les paragraphes
    • Les titres
    • La mise en valeur
    • Les listes à puces
    • Q.C.M.
  • 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.
  • 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 !

  • 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.
  • Formatage du texte
    
    • La taille
    • La police
    • Italique, gras, souligné...
    • L'alignement
    • Les flottants
    • Q.C.M.
  • La couleur et le fond
    
    • Couleur du texte
    • Couleur de fond
    • Images de fond
    • La transparence
    • Q.C.M.
  • Les bordures et les ombres
    
    • Bordures standard
    • Bordures arrondies
    • Les ombres
    • Q.C.M.
  • 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 !
  

  • Structurer sa page
    
    • Les balises structurantes de HTML5
    • Exemple concret d'utilisation des balises
    • Assurer la compatibilité avec IE
    • Q.C.M.
  • Le modèle de boîte
    
    • Les balises de type block et inline
    • Les dimensions
    • Les marges
    • Quand ça dépasse...
    • Q.C.M.
  • 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.
  • 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).

  • Les tableaux
    
    • Un tableau simple
    • Un tableau structuré
    • Q.C.M.
  • 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.
  • 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.
  • 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.

  • Envoyez votre site sur le web
    
    • Le nom de domaine
    • L'hébergeur
    • Utiliser un client FTP
  • 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
  • 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

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

Retour en haut

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

Note moyenne : 3.86 / 4 (2970 votes)

Pseudo	Commentaire
franki29	# Posté le 01/02/2012 à 20:15:52
Avis : Très bon	super tuto je suis a la partie 2 et je l'aime beaucoup
-AZ-AZ-	# Posté hier à 01:50:13
	salut les zéros! merci a toi m@teo21, il est trop fort ton tuto, très bien adapté pour zéros comme moi j'ai commencer ce tuto il y a peine une semaine, et je suis déjà au deuxième chapitre
lag.spring	# Posté hier à 06:28:29
Avis : Très bon	Salut Alors je ne sais pas trop quoi te dire M@teo21... j'ai acheté ton livre pour te remercier et celui de php aussi ( que j'ai eu un peu plus de mal à trouver dans la librairie du coin lol ) Il y aurait tellement de chose à dire mais je pense que ce que je devrais plutôt dire c'est : MERCI. Voilà ce que j'ai réussi à faire avec tes cours : http://lavoiedusage.kegtux.org/ En passant j'aime bien ton humour
ThinkAhead	# Posté hier à 10:33:42
Avis : Bon	Je suis à la partie 2 de votre Tuto... Petite question/ conseil : Pensez vous qu'il vaut mieux faire une sorte de "maquette"/ plan écrit avant de se lancer dans la réalisation? ça me parait mieux non? Merci de me répondre
ibrodiallo12	# Posté hier à 20:30:06
Avis : Très bon	slt a tous jai sai faire un site en html mais le design d'un site cest compliquer pour moi jarrive pas vraiment a realiger un vrai site avec le html et le css jai besoin de kelke conseil ou kelkun ki peu aider urgenceQQQQQQQQQQQQQQ !!!!!!!!!!!!!!!!!!!!!!!!!!

Voir tous les commentaires