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 312 104 visites depuis 7 jours , classé 1/777

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, 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

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

Retour en haut

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

Note moyenne : 3.86 / 4 (2982 votes)

Pseudo	Commentaire
dydy72	# Posté le 04/02/2012 à 22:11:21
Avis : Très bon Ville : Vernie Pays : France métropolitaine	Bonjour a toi et a tous les Zéros!J'ai 11 ans et l'informatique j'adore l'utiliser!! Ton cours est super !!!!!!J ' ai passé 2 jours dessus et j'ai tout compris !! et je me suis amusé a créer une page web sans la mettre en ligne !!
Kaleldekrypton	# Posté le 05/02/2012 à 20:23:51
Avis : Très bon	Merci beaucoup M@teo21 de m'avoir permis d'apprendre le HTML et CSS. C'est un cours très enrichissant ! Après plusieurs relectures, on commence à savoir manipuler de plus en plus ces deux langages ! Bonne continuation et merci de nous faire partager tes connaissances en informatique.
redswords	# Posté aujourd'hui à 10:56:21
Avis : Très bon	Je me suis créer un compte uniquement pour te remercier de tes très bon cours. Bonne continuation pour tous tes prochain cours
2807	# Posté aujourd'hui à 12:48:57
Avis : Très bon	Excellent, très bon tuto je viens même d'acheter le livre.J'ai 11ans et je suis un as en HTML
Lotfi Orwil	# Posté il y a 1h20
Avis : Bon	salut a tous les zer0 je veux dire a M@teo21 merciiiiiiiiiiiiiiiiiiiiiiiiiiii!!!!!!!!!!!!!!! merci pour tous ça il ya sellment un souci moi je suis algirien est nous en peut pas payer alors dit moi comment je fais si il ya un truc gratuit pour metre mon site dans le web svp svp svp svp svpsvp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp svp

Voir tous les commentaires