Aller au menu - Aller au contenu

Le tutoriel HTML5 est désormais complet !

Revenir à la liste des news
Participer à la discussion

Image

Informations

Contributeur(s) : John-John et M@teo21
Publié : le 03/11/2011 à 16:05:07
Catégorie : Tutoriels
Visualisations : 19 047

Licence : Creative Commons BY SA

Le tutoriel HTML5 est désormais complet !

Bonjour à tous !

Je vous en parlais il y a peu de temps : j'avais entamé la mise à jour du cours XHTML vers HTML5 et CSS3. J'ai travaillé d'arrache-pied ces dernières semaines sur la rédaction du cours pour publier toutes les parties suivantes, et c'est avec joie que je vous annonce aujourd'hui que le tutoriel a entièrement été mis à jour ! Vous pouvez le consulter dès aujourd'hui.

Qu'est-ce qui change exactement ?


Après la partie I, ce sont toutes les parties suivantes qui sont désormais disponibles dans le cours (parties II à V) :

  • Les joies de la mise en forme avec CSS
  • Mise en page du site
  • Fonctionnalités évoluées
  • Annexes

Certains chapitres sont entièrement nouveaux, d'autres ont subi de sérieux liftings pour être à jour. Vous pourrez désormais découvrir comment :

  • Mieux structurer vos pages HTML avec les nouvelles balises <header>, <nav>, <footer>
  • Ajouter les nouveaux champs de formulaire de HTML5
  • Insérer facilement des vidéos, de la musique dans vos pages
  • Créer des bordures arrondies
  • Ajouter des ombres sous vos blocs ou vos textes
  • Utiliser des polices de caractères personnalisées
  • Utiliser des effets de transparence
  • etc.

Bref, voilà de quoi vous occuper à améliorer votre site pendant ces longs mois d'hiver qui se profilent. :)

Si j'avais lu le tutoriel XHTML, est-ce que je dois tout relire ?


Il y a beaucoup de nouveautés mais vous verrez que le langage reste globalement très similaire. Je vous conseille une relecture rapide, même en diagonale. Vous aurez vite lu à nouveau le cours et vous y apprendrez de nouvelles choses !

Notez que j'en ai également profité pour refondre entièrement le TP sur la création d'un site. Voici le design que vous apprendrez à réaliser au cours de ce TP :

Image utilisateur
Le site que vous apprendrez à réaliser au cours du TP


Je vous souhaite une bonne découverte et une bonne lecture ! :)

Lire le tutoriel HTML5 / CSS3

Suivante

Précédente

68 Participations

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1  2  3  Suivante
Pseudo Discussion
1 visiteur sur cette news (0 membre et 1 Anonyme)
Page 1  2  3  Suivante
Hors ligne Gilux # Posté le 03/11/2011 à 16:09:28

J'ai parcouru rapidement le tutoriel hier, pas mal de nouveautés et de changements, bravo à toi :)
Image utilisateur
Image utilisateur

 
Hors ligne lordbanana25 # Posté le 03/11/2011 à 16:11:52
Drummer-Wookiee
Avatar
bon eh ben c'est parti !
merci beaucoup pour cette mise à jour :)
Drummer in Steel and Blood: http://steelandblood.tk/

Détournez VW du côté obscur : http://bit.ly/ofHgpz

Image utilisateur
 
Hors ligne Hirokoshi # Posté le 03/11/2011 à 16:12:03
MATT BELLAMY.
Avatar
close

Bravo. J'imagine que c'était un travail colossal de mettre à jour le tuto' en si peu de temps !

- Up-Shack : Votre clé USB en ligne ! (présentation SdZ)
- GW2.FR : Communauté francophone et services pour Guild Wars 2
Image utilisateurImage utilisateurImage utilisateur

 
Hors ligne le-pro99 # Posté le 03/11/2011 à 16:22:23
Vive l'informatique !
Avatar
C'est super ça !
Hors ligne TheGeekyKid # Posté le 03/11/2011 à 16:26:00
Avatar
J'ai vu hier qu'il était mis à jour, j'ai du me pincer , j'en croyait pas mes yeux o_O Une mise a jour de qualité en si peu de temps c'est un travail de titan! Merci beaucoup , je le lis avec beaucoup de plaisir et d'aisance :)
Hors ligne Romain D # Posté le 03/11/2011 à 16:30:19

Études : Polytech'Orléans
Quand j'ai vu le titre de la news, ma réaction a été "Déjà ?!?".
Je n'ai pas encore lu, mais je me ferai un plaisir de le faire sous peu.

Bravo et merci ;-)
Myfiles : Hébergez gratuitement et sans inscription tous vos fichiers d'un poids allant jusqu'à 10 Mo !
 
Hors ligne virdisss # Posté le 03/11/2011 à 16:47:57
Avatar
Je viens d'y jeter un coup d'oeil c'est pas mal du tout. Je te félicite Mateo. Donc étant donné que cette semaine j'ai examen je ne vais pas pouvoir étudier ce tuto mais je compte commencer dès que j'aurai terminé mes examen.

Merci encore une fois a toi.
Hors ligne JuKe # Posté le 03/11/2011 à 16:50:51
Yes, I can
Avatar

Ville : Nice
Pays : France métropolitaine
Dommage qu'il n'y a pas toute les propriétés de CSS3 (comme les transitions, 3D ...)
I ♥Image utilisateur andImage utilisateur | Jeune Webdeseigner & Graphiste bourré de talent !
 
Hors ligne Auré1000 # Posté le 03/11/2011 à 17:00:59
Avatar
Bravo ,il y a l'air d'avoir pas mal de nouveautés, je m'y met tout de suite !

Mon projet de jeu Iphone


Quizzz !, le jeu de quizz !


Forum Iphone

 
Hors ligne Nicolas M. # Posté le 03/11/2011 à 17:04:05
M(NiCoLaSm) = 406,9 g/mol
Avatar

Ville : Notre-dame de bondeville
Pays : France métropolitaine
Au risque d’être original… DÉJÀ ?! :waw:

Je ne pensais pas qu’on puisse faire une mise à jour aussi conséquente dans un délai aussi réduit, chapeau !
Allez, avoue, tu avais tout préparé avant de nous prévenir de la mise à jour, hein ? :pirate:

@JuKe : Pour les transitions, c’est par ici. Pour un peu plus de nouveautés, de ce côté. Pour le reste, Google est ton ami. ;)
Image utilisateur Image utilisateur

Changer mon avatar


Le saviez-vous ? Les forums sont environ 283 174 fois plus efficaces que ma boîte MP pour vous aider. ;)
Image utilisateur
 
Hors ligne Kvothe # Posté le 03/11/2011 à 17:08:07
Prononcé 'Quote'
Avatar
C'est un cours pour débutant, normal qu'il n'y ait pas toutes les nouveautés comme les transitions, mais ce serait quand même sympa de les mentionnés je crois, au moins dire qu'elles existent, dans la partie "autres propriétés" du mémento.
Image utilisateur
 
Hors ligne Aravis # Posté le 03/11/2011 à 17:26:08
apt-get install Windows
Avatar
Je n'ai pas lu le tuto et je ne le lirai surement plus maintenant mais en tout cas le nouveau site qu'on apprend à fabriquer est quand même vachement plus classe que l'ancien avec polypocket ^^ .
Image utilisateur
 
Connecté Toggy # Posté le 03/11/2011 à 17:31:40
Avatar
Pourquoi le chapitre sur la publicité a-t-il disparu ?
StreamSuggest
Créez votre liste de films, de séries et musiques.
Recevez des suggestions de films, séries et musiques selon vos goûts.
Présenté ici sur le SdZ
 
Hors ligne M@teo21 # Posté le 03/11/2011 à 17:46:00
Amateur professionnel
Avatar
Admins
Flux RSS
close

Ville : Paris
Pays : France métropolitaine
Études : EFREI
Citation : Hirokoshi
Bravo. J'imagine que c'était un travail colossal de mettre à jour le tuto' en si peu de temps !


En fait j'y ai passé mes journées et une partie de mes nuits sur les deux dernières semaines. J'ai pris des "congés" exprès. :-°
Quand je travaille d'affilée, sans interruption, ça peut aller très vite ! Quand on travaille sur un tuto, ce qui prend le plus de temps ce sont justement les interruptions (il faut beaucoup de temps pour se "remettre dans le bain").
Auteur de 5 livres : HTML5 - C - PHP - Linux - C++
L'urgent est fait, l'impossible est en cours, pour les miracles, prévoir un délai...
 
Hors ligne souls killer # Posté le 03/11/2011 à 18:15:51
Groupe : aigris
Avatar
Groupe : Bannis
Flux RSS
close

Ville : Chevilly-larue
Pays : France métropolitaine
Études : Université Paris XII
En effet, chapeau bas pour la rapidité !
La ligne droite est le plus long chemin d'un point à un autre. — Théorème mathématique shadok.
Mon blog (un peu mort depuis quelques mois) | Twitter

Discutez en direct avec les membres du site.
 
Hors ligne Hirokoshi # Posté le 03/11/2011 à 18:27:43
MATT BELLAMY.
Avatar
close

Citation : M@teo21
En fait j'y ai passé mes journées et une partie de mes nuits sur les deux dernières semaines. J'ai pris des "congés" exprès. :-°
Quand je travaille d'affilée, sans interruption, ça peut aller très vite ! Quand on travaille sur un tuto, ce qui prend le plus de temps ce sont justement les interruptions (il faut beaucoup de temps pour se "remettre dans le bain").


Haha, c'est bon à savoir. :)

- Up-Shack : Votre clé USB en ligne ! (présentation SdZ)
- GW2.FR : Communauté francophone et services pour Guild Wars 2
Image utilisateurImage utilisateurImage utilisateur

 
Hors ligne rubydium # Posté le 03/11/2011 à 18:27:51

Très bonne idée l'idée du design!
Connecté Programpriv # Posté le 03/11/2011 à 18:40:58
C'est beau C++ !
Avatar
La vache La rapidité!
C'est rapide tout de même, mais une lecture en diagonale m'a fait le plus grand bien. D'ailleurs, j'ai vu un ou deux trucs en moins, comme les
Code : CSS
1
2
3
4
5
6
7
h1:before
{
     content: url("image/lol.png"); // Met cette image avant tous les h1
}
h1:after
{
}

En tout cas, chapeau bas!
Tutoriels
Introduction aux algorigrammes
 
Hors ligne candide # Posté le 03/11/2011 à 18:46:25
"In C ode we trust"
Avatar
À peine annoncé que déjà terminé !



Sauf que si on regarde, ya rien sur Canvas, rien sur offline, :( Ce sont ces balises qui apportent un énorme plus au html (+ javascript, c'est vrai). Ce tuto ne peut pas faire comprendre l'extraordinaire mutation que représente le html5.
  • Make it work, Make it well, Make it fast, Make it short, Make it fun
  • Comment insérer les balises de code dans un message ? : Screencast ou Texte
  • Le rasoir d'Occam : Entities should not be multiplied beyond necessity.
  • KISS !
  • Le gâteau sous la cerise.
  • (Lien vers fichier pdf) La norme du langage C 99
  • scanf et printf : les colifichets de la programmation bling bling

 
Hors ligne pacman2 # Posté le 03/11/2011 à 19:06:59
Zzzz
Avatar
Bravo, le design du TP est vraiment sympa et ça change de l'ancien qui faisait bien vieux ^^ par contre maintenant tout le monde va avoir le même...

PS : On aura accès à l'ancien cours ou pas ?
Ma biographie
 
Hors ligne razira59 # Posté le 03/11/2011 à 19:13:00
Don't give it to me.
Avatar
J'ai relu en diagonale et il m'a l'air pas mal bravo. Par contre même s'il a été mis à jour, de nouveaux chapitres sont à venir ou pas ?
Image utilisateur
Image utilisateur
Image utilisateur



 
Hors ligne Kvothe # Posté le 03/11/2011 à 19:17:49
Prononcé 'Quote'
Avatar
Citation : candide
Sauf que si on regarde, ya rien sur Canvas, rien sur offline, :(

C'est mentionné ici, même si je te l'accorde pas forcément mis bien en valeur. ;)
Image utilisateur
 
Hors ligne Nesquik69 # Posté le 03/11/2011 à 19:21:54
Slave of the Rythm
Avatar
Groupe : Auteurs
close

Ville : Tassin la demi-lune
Pays : France métropolitaine
Citation : candide
Ce tuto ne peut pas faire comprendre l'extraordinaire mutation que représente le html5.

Il s'agit d'un tuto qui a pour but d'enseigner les bases de l'HTML, il est pas fait pour aborder des sujets aussi complexes (surtout que, comme tu le dis si bien, ça utilise aussi le JS).
Mes sites web : Plune | It's Friday!
Mes tutos : Javascript | Ajax
Mes projets : SpeedTest | Boxifier | zUploader
Articles : Breakpoint 2007 / 2008 / 2009
Useless : Mangas | Caramelldansen | Monde parallèle acidifié | Tydax
 
Hors ligne nivramdu94 # Posté le 03/11/2011 à 19:25:00
Linuxien et fier de l'être !
Avatar
Waouh... bravo pour la rapidité !
C'est génial de tenir à jour les tutos de cette façon, chapeau bas. ;)
Sur ce, je m'en vais me mettre à jour...
Image utilisateur Android User

Image utilisateur HTML5/CSS3 Programmer
 
Hors ligne Aravis # Posté le 03/11/2011 à 19:59:58
apt-get install Windows
Avatar
Citation : M@teo21
J'ai pris des "congés" exprès. :-°

Pour de vrai ? Ecrire des tuto ça ne fait pas partie intégrante de ton travail ?
Image utilisateur
 
Hors ligne remontees # Posté le 03/11/2011 à 20:05:54
Vive Symfony2 !
Avatar
Que dire, génial ! Bravo pour cet excellent tutoriel. Je trouve par contre qu'il manque la mention des attributs role="" et aria="". La partie formulaires HTML5 est excellente.

BRAVO ! :)

Merci encore pour ce tuto génial !
Pensez à indiquer les messages qui vous ont aidé et à indiquer vos problèmes résolus ;)
XHTML 1.0/CSS <= 2 : IIIIIIIIII
PHP/MySQL : IIIIIIIIII
Javascript : IIIIIIIIII
HTML5/CSS3 : IIIIIIIIII



Citation
Je sais plus ce que j'écrivais ! :)
Qui que quoi dont où
Alors j'ai activé la prévisualisation automatique !
Citation : Moi
Eh oui

Et maintenant je suis tranquille !



Mon site : http://remontees.free.fr
 
Hors ligne Arius # Posté le 03/11/2011 à 20:13:23
Great minds do think alike
Avatar
Newsers

Citation : Aravis
Citation : M@teo21
J'ai pris des "congés" exprès. :-°

Pour de vrai ? Ecrire des tuto ça ne fait pas partie intégrante de ton travail ?

La réponse à ta question se situe ici. La gestion d'une société prend du temps, il est donc normal que la rédaction d'un cours passe "au second plan" (notez les guillemets), il y a des priorités au quotidien qui limitent le temps qui serait alloué pour la rédaction.
Participez à la rédaction des news communautaires !
Image utilisateur

 
Hors ligne Aravis # Posté le 03/11/2011 à 20:18:29
apt-get install Windows
Avatar
Non la réponse ne se situe pas "ici". Bien sûr que M@ateo fait tout plein de trucs de patron d'entreprise c'est évident mais je pensais que gérer et maintenir ses tutos pouvait faire partie de son job officiel. C'est un petit peu ses tuto qui ramènent du monde quand même ; du coup ca me semblait naturel.
Image utilisateur
 
Hors ligne frezi # Posté le 03/11/2011 à 20:43:15
Linux un jour, Linux toujours
Avatar

Ville : La louvière
Pays : Belgique
Études : Université Libre de Bruxelles (ULB)
Très bien :ange: Bravo
Image utilisateur

 
Hors ligne Arius # Posté le 03/11/2011 à 20:44:16
Great minds do think alike
Avatar
Newsers

Les temps changent, comme les responsabilités. Cela fait partie de son job comme auteur, preuve en est de la refonte de ce tuto mais ce n'est pas sa tâche principale (comme gérant d'une société, oui il faut savoir dissocier les deux) et c'est logique, puisque cela prend du temps, temps déjà utilisé pour autre chose. ^^
Participez à la rédaction des news communautaires !
Image utilisateur

 
Pour accéder à cette section
Connectez-vous !
connexion_rpx

Revenir à la liste des news

Lire aussi