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 286 936 visites depuis 7 jours, classé 1/778

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, ainsi qu'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 !

  • 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
	Aller plus loin
	Comment fait-on pour créer des sites web ?

Retour en haut

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

Note moyenne : 3.85 / 4 (3018 votes)

Pseudo	Commentaire
spider17	# Posté le 16/02/2012 à 19:57:00
Fasciné par le sdz Avis : Bon	Salut lol trop rigolo la photo devant le titre "Envoyer votre site sur le web" aller on place notre site sur le lance pierre puis en l'expédie sur la toile T'es trop drôle Mathéo21 et très créatif
Ros@lie	# Posté le 17/02/2012 à 01:01:24
Ma Rosalie <3 (ci-dessous) Avis : Très bon	Citation : spider17 Salut lol trop rigolo la photo devant le titre "Envoyer votre site sur le web" aller on place notre site sur le lance pierre puis en l'expédie sur la toile T'es trop drôle Mathéo21 et très créatif Je confirme !!! +1 pour le livre Javascript ! +1 pour le livre Stylisez votre site avec CSS3 ! +1 pour mettre le menu du sdz en position relatif !
Ros@lie	# Posté le 17/02/2012 à 01:06:22
Ma Rosalie <3 (ci-dessous) Avis : Très bon	Je ne savais pas que c'était possible ???!!! +1 pour le livre Javascript ! +1 pour le livre Stylisez votre site avec CSS3 ! +1 pour mettre le menu du sdz en position relatif !
jojolaterreur	# Posté le 18/02/2012 à 14:07:48
Avis : Très bon	Ouééé! super tuto! merci M@teo21!
Anosolo	# Posté le 20/02/2012 à 16:34:46
Avis : Très bon	Ce tuto m'a énormément aidé dans le codage d'un site web et je remercie fortement l'auteur.

Voir tous les commentaires