8 meilleurs sites Web pour des exemples de codage HTML de qualité

Depuis que j'ai commencé à apprendre le HTML dans les années 90, j'ai toujours trouvé presque impossible de trouver de bons exemples HTML solides sur Internet. Il aurait été bien d’avoir quelques sites Web qui offrent les exemples de codage de sites Web les plus récents et les plus intéressants..

Eh bien, beaucoup de choses ont changé depuis les années 90 et l'avènement de langages de codage Web dynamiques tels que PHP et CSS fait vraiment du HTML old-school. Encore une fois, vous devez comprendre le code HTML de la vieille école avant de pouvoir comprendre les langages qui créent dynamiquement le code HTML que les navigateurs affichent..

Heureusement, certains sites Web impressionnants offrent des exemples et des tutoriels de codage HTML bien conçus et utiles. Il y a certainement encore beaucoup de sites Web assez médiocres sur les tutoriels HTML, alors j'ai décidé de rassembler huit de mes sites Web préférés..

Je devrais mentionner que MUO est probablement le premier endroit pour commencer, avec des articles sympas sur le langage HTML de base. 5 étapes pour comprendre le code HTML de base. 5 étapes pour comprendre le code HTML de base. En savoir plus, effets HTML sympas 7 Effets HTML géniaux que tout le monde peut ajouter à son site Web 7 effets HTML cool que tout le monde peut ajouter à leur site Web Ne désespérez pas! Vous n'avez pas besoin de connaître CSS ou PHP pour créer un site de fantaisie. Un bon vieux code HTML et savoir copier-coller suffiront. Pour en savoir plus et conseils HTML 5 Conseils HTML pour créer un site Web gratuit à chargement rapide 5 Conseils HTML pour créer un site Web gratuit à chargement rapide En savoir plus pour accélérer le chargement de votre site Web.

Les huit sites suivants offrent non seulement une base solide et solide sur le codage HTML, mais ils offrent également le meilleur environnement d’apprentissage, avec des outils que vous pouvez utiliser pour tester vos connaissances..

1. Chien HTML

HTML Dog est l'un de mes sites préférés que je vérifie généralement en premier lorsque j'oublie la syntaxe de base des instructions HTML. Le site est bien conçu, contrairement à 90% des sites Web de conception de sites Web qui semblent avoir été construits dans les années 1990 et qui n'ont jamais été mis à jour. Le format est simple et rapide - il suffit de cliquer sur le lien Exemples de la page principale pour obtenir une liste d'éléments HTML tels que la mise en page, la couleur, le texte, etc..

HTML Dog fournit des exemples clairs dans des zones de code blanc que vous pouvez copier et coller dans votre propre code HTML. Vous pouvez voir la sortie HTML réelle réelle de l'exemple de code dans le volet de droite..

2. W3Schools

Maintenant, alors que HTML Dog est mon préféré quand il s’agit de vérifier la syntaxe de base, W3Schools est l’endroit où je vais habituellement quand je veux avoir un peu de fantaisie avec mon codage Web. C'est l'une des ressources les plus populaires pour tous les exemples de codage simples et dynamiques, de PHP à JQuery et Javascript - mais vous trouverez également une section géniale remplie d'exemples de codage HTML de base..

L’avantage de W3Schools, c’est que, comme HTML Dog, ils ont intégré un outil utile d’écran partagé permettant de tester le code appris dans chaque leçon. Juste modifier le HTML un peu, cliquez sur “Courir” et vous verrez les résultats dans la zone à droite. Très utile!

3. Quackit

Quackit est un autre site au même niveau que W3Schools en termes d’utilité et de design moderne. Oui, le nom est un peu loufoque, mais le site fournit de nombreux exemples utiles..

Dans la zone HTML, vous trouverez de nombreux exemples de code dans des zones de texte que vous pouvez mettre en surbrillance et copier - avec l’effet d’affichage réel affiché dans l’affichage. “Exemple” colonne.

4. Landofcode.com

LandOfCode est un autre site proposant l’outil utile en écran partagé permettant de tester le code HTML. Le site principal propose un grand nombre d’exemples HTML, allant du formatage du texte HTML au lien approprié avec les formulaires HTML, les feuilles de style et les balises méta. Mais le vrai bijou sur ce site est l'éditeur de code PractiCode Online..

Celui-ci est en fait un peu plus avancé que l'outil W3Schools et HTML Dog, car il comporte des boutons supplémentaires qui vous permettent d'afficher les résultats dans une nouvelle fenêtre, pas seulement dans la zone d'affichage à droite..

5. Codecademy

Codecademy est l’un des sites Web les plus connus pour l’apprentissage d’une langue. Et quand il s'agit d'apprendre le HTML de base, Codecademy ne déçoit pas avec son premier site Web utilisant le cours HTML et CSS [Broken Link Removed].

L'espace de travail du cours, comme le reste de Codecademy, est assez avancé et vous permet de jouer dans la zone de code et d'afficher votre page Web en temps réel sur la bonne mise à jour à mesure que vous apportez des modifications. Vous pouvez également passer en mode plein écran pour voir à quoi ressemble votre site Web dans une fenêtre de navigation complète.

La bonne chose à propos de ce cours est qu’il intègre également l’apprentissage de l’utilisation de CSS pour formater vos pages. 10 Exemples de code CSS simples à apprendre en 10 minutes 10 Exemples de codes CSS simples à 10 minutes Nous allons voir comment créer un feuille de style intégrée pour vous permettre de mettre en pratique vos compétences CSS. Nous passerons ensuite à 10 exemples CSS de base. A partir de là, votre imagination est la limite! En savoir plus, que toute personne apprenant le HTML de base devrait apprendre en même temps qu'elle apprend le HTML.

6. EchoEcho

Quelques sites Web supplémentaires que je voulais aborder ne sont pas les meilleurs, mais ils se situent au-dessus des autres sites de code HTML, car ils sont bien écrits, bien formatés et couvrent le sujet à fond. Le premier d'entre eux est EchoEcho. Ce site contient une section HTML qui est probablement l’une des listes les plus exhaustives d’éléments HTML à apprendre en un seul endroit..

Chacune de celles-ci fournit un exemple très clair de la manière dont le code HTML devrait être structuré, ainsi qu'une explication de tous les paramètres et options disponibles que vous pouvez utiliser..

Ce site est en réalité consacré à offrir beaucoup plus que des tutoriels - son D-Zine en ligne! est essentiellement un magazine en ligne consacré à tout ce qui concerne la conception de sites Web.

7. Java2

La section HTML / CSS du site Web Java2s ressemble à une encyclopédie de balises HTML pour les débutants et les experts. La mise en page est parfaite, en particulier pour les personnes qui savent peut-être déjà quelles balises HTML elles souhaitent utiliser, mais ne se souviennent pas exactement de la syntaxe exacte..

La liste des balises est propre et classée par ordre alphabétique afin que vous puissiez rapidement faire défiler la liste pour trouver celle que vous souhaitez. Une fois que vous avez cliqué sur la balise, vous verrez une liste d’exemples de cas d’utilisation, et lorsque vous cliquez sur l’un d’eux, vous verrez le fragment de code exact que vous devez utiliser pour l’implémenter..

Vous pouvez cliquer sur Essayez cet exemple pour voir la page HTML résultante dans une nouvelle fenêtre de navigateur.

8. Awwwards

Enfin, comme c’est toujours une bonne idée d’apprendre à coder en voyant des exemples d’excellent code, je dois féliciter l’un des sites les plus utiles sur Internet auquel tous les étudiants débutants en HTML devraient créer un signet. Le site s'appelle Awwwards.

Awwwards attribue des récompenses pour le site de l'année, du mois et du jour et donne même un coup de pouce aux meilleurs développeurs et sites mobiles. En parcourant ces sélections, vous aurez une foule d'idées sur les éléments et les dispositions qui fonctionnent le mieux lorsque vous créez vos propres pages Web..

Allez en avant et créez

Rien de plus grisant que de passer des jours, voire des mois, à coder votre propre site Web et à révéler enfin votre chef d’œuvre au monde entier. Si vous êtes un bon élève du HTML et de bonnes pratiques de conception HTML, vous pouvez certainement rejoindre les rangs des développeurs Web qui ont contribué au meilleur de ce que le Web peut offrir..

N'oubliez pas de consulter la liste d'exemples HTML de MakeUseOf 17 Exemples de codes HTML simples à apprendre en 10 minutes 17 Exemples de codes HTML simples à apprendre en 10 minutes Si vous connaissez les 17 balises HTML suivantes (et quelques-unes supplémentaires avec eux), vous pourrez créer une page Web de base à partir de rien ou modifier le code créé par une application telle que… Lire la suite, ça vous aidera à démarrer sur votre chemin.

Connaissez-vous d'autres exemples de ressources HTML vraiment utiles pour les programmeurs Web qui apprennent simplement à créer des pages Web?? Partagez vos propres ressources dans la section commentaires ci-dessous.

En savoir plus sur: HTML, développement Web, outils pour les webmasters.