Guide du débutant: Création de pages Web HTML5 / CSS3

Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

HTML5 et CSS3 ont balayé le web en deux ans. Avant eux il y avait beaucoup de sémantique modifiée dans la façon dont les concepteurs de sites Web devraient créer des pages Web, et avec leur arrivée, un grand nombre de supports tels que des médias alternatifs, des balises XML et des attributs d'entrée progressifs pour les concepteurs web. des fonctionnalités comme l'animation.

Bien que la plupart des développeurs semblent présenter des démos potentielles mais compliquées, HTML5 / CSS3 ne sont pas vraiment une science de la fusée, et je vais vous guider dans le processus relaxant pour construire une page web HTML5 / CSS3 standard avec des explications complètes et détaillées! Des bonus comme des ressources d'apprentissage et des modèles HTML5 gratuits sont disponibles pour vous, alors saisissez cette opportunité pour démarrer votre voyage HTML5!

Changements entre HTML4 et HTML5

Vous vous demandez peut-être pourquoi il est même important de passer au HTML5. Il y a une myriade de raisons, mais surtout parce que vous travaillerez avec les standards Internet mondiaux comme tous les autres concepteurs. De cette façon, vous trouverez plus de soutien en ligne et vos sites web seront rendus correctement dans les navigateurs modernes qui sont constamment améliorés.

(Source de l'image: W3C)

La comparaison entre HTML4 et HTML5 est difficile à repérer au niveau de la surface. En consultant le nouveau brouillon HTML5, vous pouvez voir les éléments sélectionnés et les procédures de gestion des erreurs corrigées. Les développeurs de navigateurs ont particulièrement apprécié les nouvelles spécifications pour le rendu des pages Web par défaut.

De plus, HTML5 est la conversion de notre navigateur Web moderne. Avec ces nouvelles spécifications, le Web dans son ensemble est maintenant considéré comme une plate-forme d'application pour HTML (en particulier HTML5), CSS et JavaScript sur lequel s'appuyer. En outre, ce système crée élégamment l' harmonie entre les concepteurs Web et les développeurs en définissant des normes communes que tous les navigateurs doivent suivre.

De plus, de nombreux éléments ont été créés pour représenter les médias numériques new-age . Ceux-ci inclus

Squelette HTML5 nu

Je trouve que la façon la plus simple de comprendre un sujet est de s'y plonger . Je vais donc construire un modèle de squelette HTML5 très basique pour une page web. J'ai inclus quelques-uns des éléments les plus récents, que j'espère catégoriser un peu plus tard.

 Bienvenue, un et tous! 
du contenu ici.
mais certains ici aussi!

Tout de suite, ce n'est pas très différent d'une page Web HTML4 standard. Ce que vous pouvez remarquer, c'est que nous n'avons pas besoin d'inclure d'autres étiquettes à fermeture automatique . C'est vraiment une excellente nouvelle, car cela vous permettra d'économiser beaucoup de temps sur vos projets de développement.

Pour ceux qui ne le savent pas, dans les versions XHTML, il y avait beaucoup d'éléments étiquetés à fermeture automatique . Ceux-ci se termineraient par une barre oblique avant l'opérateur 'plus grand que' pour signifier que vous n'auriez pas besoin d'inclure une autre étiquette de fermeture ailleurs. Par exemple, pour créer une balise meta keywords, vous utiliserez sans avoir besoin d'une fermeture autre part.

Cette règle s'applique toujours en HTML5. Mais maintenant vous n'avez même pas besoin de la barre oblique supplémentaire ! est complètement valide, bien que vous soyez autorisé à continuer à utiliser la norme XHTML / XML. Pour tous les navigateurs conformes aux normes, les deux éléments seront rendus de la même manière.

Définir nos zones de page

La majorité de notre nouveau code ne devrait pas être trop choquant. Notre doctype est hilarante plus simple que jamais, pas besoin d'attributs corporels excessifs, et les informations dans notre rubrique sont clairement étiquetés. En continuant, je voudrais attirer votre attention sur le contenu de notre marque. Cela inclut toute la structure de la page principale. J'ai délibérément utilisé quelques balises HTML5 pour indiquer comment vous pouvez les inclure dans votre propre travail.

D'abord, vous verrez que toute la page est encapsulée dans une balise div . Je l'ai étiqueté avec un ID de wrapper, ce qui signifie qu'il enveloppe tout le contenu de notre site Web. Ceci est utile pour définir une largeur ou un contenu de position maximum sur l'écran. Ensuite, j'ai fracturé la page en 3 éléments de base - un