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 199 visites depuis 7 jours, classé 1/786

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 ?

    • Le fonctionnement des 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
    • 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é consulté
    • 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 des boîtes

    • 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 listes
    • 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 mise en forme du 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
	Des techniques modernes pour l'agencement en colonnes
	Aller plus loin
	Comment fait-on pour créer des sites web ?

Retour en haut

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

Note moyenne : 3.85 / 4 (3160 votes)

Pseudo	Commentaire
floflo63400	# Posté le 20/05/2012 à 10:20:50
	Merci pour ce tuto vraiment complet Let's Sleep - Concept de montre hors du commun...
Dark dragon	# Posté le 20/05/2012 à 16:52:19
Life needs lotta fun Avis : Très bon	Le meilleur tutoriel. ::||:: Dark Dragon ::||:: Mon site : Algo Rythm'
alexis75014p	# Posté le 22/05/2012 à 14:40:31
	bonjour à tous, je suis perdu, est-il possible de mettre du texte sur une image en html/css?
ThePaulo	# Posté le 23/05/2012 à 21:30:35
	Salut tout le monde ! Donc voilà je venais vous dire juste que ce tutoriel est tout simplement GENIAL ! Voilà mon site d'hébergement d'image http://www.hebergupload.free-h.fr/ A+ Paulo
p@olo84	# Posté hier à 18:27:01
Avis : Très bon	bravo !!!!!!

Voir tous les commentaires