Depuis que j'ai commencé à apprendre le HTML dans les années 90, j'ai toujours trouvé presque impossible de trouver de bons exemples de HTML sur Internet. Il aurait été agréable d'avoir quelques sites Web qui offrent les derniers exemples de codage de sites Web les plus dynamiques.
Eh bien, beaucoup de choses ont changé depuis les années 90, et l'avènement de langages de codage web dynamiques comme PHP et CSS rend vraiment HTML old-school. Là encore, vous devez comprendre le HTML old-school avant de pouvoir comprendre les langages qui créent dynamiquement le code HTML que les navigateurs affichent.
Heureusement, il existe maintenant de super sites Web qui offrent des exemples de codage HTML et des didacticiels bien conçus et utiles. Il y a certainement encore beaucoup de sites Web de didacticiels HTML assez médiocres, alors j'ai décidé de rassembler huit de mes sites préférés.
Je devrais mentionner que MUO est probablement le premier endroit pour commencer, avec les articles frais sur 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 cool 7 Effets HTML cool que tout le monde peut ajouter à leur 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 savoir CSS ou PHP pour construire un site de fantaisie. Un bon vieux HTML et savoir copier-coller fera l'affaire. En savoir plus et conseils HTML 5 Conseils HTML pour créer un site Web à chargement rapide 5 Conseils HTML pour créer un site Web à 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 ce que vous apprenez.
1. Chien HTML
Un de mes sites préférés que je vérifie habituellement en premier quand j'oublie la syntaxe de base pour les déclarations HTML est HTML Dog. Le site est bien conçu, contrairement à 90% des sites de conception Web qui semblent avoir été construits dans les années 1990 et jamais mis à jour. Le format est simple et rapide - il suffit de cliquer sur le lien Exemples sur la page principale, et vous trouverez une liste d'éléments HTML comme la mise en page, la coloration, le texte et plus encore.
HTML Dog fournit des exemples clairs dans des zones de code blanches que vous pouvez copier et coller dans votre propre code HTML. Vous pouvez voir la sortie HTML en direct réelle de l'exemple de code sur le volet sur la 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 code 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 impressionnante remplie d'exemples de codage HTML de base.
Ce qui est cool à propos de W3Schools, c'est que, comme HTML Dog, ils ont incorporé un outil utile de l'écran partagé où vous pouvez tester le code que vous apprenez dans chaque leçon. Modifiez un peu le HTML, cliquez sur " Exécuter " et vous verrez les résultats dans la zone à droite. Très utile!
3. Quackit
Un autre site qui est au même niveau que W3Schools en termes d'utilité et de design moderne est Quackit. Oui, le nom est un peu maladroit, mais le site fournit des volumes d'exemples utiles.
Dans la zone HTML, vous trouverez beaucoup de code d'exemple dans les zones de texte que vous pouvez mettre en surbrillance et copier - avec l'effet d'affichage réel affiché dans la colonne " Exemple ".
4. Landofcode.com
LandOfCode est un autre site qui offre l'outil utile de l'écran partagé pour tester le code HTML. Le site principal offre un bon nombre d'exemples HTML, tout ce qui concerne la mise en forme du texte HTML et la liaison correcte aux formulaires HTML, aux feuilles de style et aux métabalises. Mais le vrai bijou sur ce site est l'éditeur de code en ligne PractiCode.
Celui-ci est en fait un peu plus avancé que l'outil W3Schools et HTML Dog, car il possède des boutons supplémentaires qui vous permettent d'afficher les résultats dans une nouvelle fenêtre, pas seulement dans la zone d'affichage vers la droite.
5. Codecademy
L'un des sites les plus connus pour l'apprentissage de toute langue est évidemment Codecademy. Et quand il s'agit d'apprendre le HTML de base, Codecademy ne déçoit pas avec son cours First Website Using HTML et CSS.
L'espace de travail du cours, comme le reste de Codecademy, est assez avancé et vous donne la possibilité de jouer dans la zone de code et de voir votre page web en temps réel sur la bonne mise à jour lorsque vous apportez des modifications. Vous pouvez également passer en plein écran pour voir à quoi ressemble votre site dans une fenêtre de navigateur 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 simple Vous pouvez apprendre en 10 minutes 10 Exemples de code CSS simple Vous pouvez apprendre en 10 minutes Nous allons voir comment créer un feuille de style inline afin que vous puissiez pratiquer vos compétences CSS. Ensuite, nous passerons à 10 exemples CSS de base. De là, votre imagination est la limite! Lire la suite, que toute personne apprenant le HTML de base devrait apprendre en même temps qu'ils apprennent le HTML.
6. EchoEcho
Quelques autres sites Web que je voulais aborder ne sont pas les meilleurs des meilleurs - mais ils se tiennent au-dessus des autres sites de code HTML parce qu'ils sont bien écrits, bien formatés et couvrent parfaitement le sujet. Le premier d'entre eux est EchoEcho. Ce site a une section HTML qui est probablement l'une des listes les plus exhaustives d'éléments HTML à apprendre en un seul endroit.
Chacun d'entre eux fournit un exemple très clair de la façon dont le code HTML devrait être structuré, avec une explication de tous les paramètres et options disponibles que vous pouvez utiliser.
Ce site est en fait consacré à offrir beaucoup plus que des tutoriels - son D-Zine en ligne! est essentiellement un magazine en ligne consacré à toutes les choses liées à la conception de sites Web.
7. Java2s
La section HTML / CSS du site Web Java2s est comme une encyclopédie de balises HTML pour les débutants comme pour les experts. La mise en page est parfaite, en particulier pour les personnes qui savent déjà quels balises HTML ils veulent utiliser, mais qui ne peuvent pas vraiment se souvenir de la syntaxe exacte.
La liste des balises est propre et alphabétisée, de sorte que vous pouvez rapidement faire défiler vers le bas pour trouver celui que vous voulez. Une fois que vous avez cliqué sur la balise, vous verrez une liste d'exemples de cas d'utilisation, et lorsque vous cliquerez sur l'un d'entre eux, vous verrez l'extrait de code exact que vous devez utiliser pour l'implémenter.
Vous pouvez cliquer sur Essayer cet exemple pour voir la page HTML résultante dans une nouvelle fenêtre de navigateur.
8. Awwwards
Enfin, parce que 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 que tous les nouveaux étudiants en HTML devraient mettre en signet. Le site s'appelle Awwwards.
Awwwards donne 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. La navigation à travers ces sélections vous donnera beaucoup d'idées pour savoir quels éléments et quelles mises en page fonctionnent le mieux lorsque vous créez vos propres pages Web.
Allez-y et créez
Il n'y a rien de plus exaltant 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 étudiant de HTML et de bonnes pratiques de conception HTML, vous pouvez certainement rejoindre les rangs des développeurs Web qui ont contribué à ce que le web a de mieux à offrir.
N'oubliez pas de consulter la liste des exemples HTML de MakeUseOf. 17 Exemples de code HTML simple que vous pouvez apprendre en 10 minutes 17 Exemples de code HTML simple Vous pouvez apprendre en 10 minutes Si vous connaissez les 17 balises HTML suivantes (et quelques-unes en plus) avec eux), vous serez en mesure de créer une page Web de base à partir de zéro ou de modifier le code créé par une application comme ... Lire la suite qui vous aidera à démarrer sur votre chemin.
Connaissez-vous d'autres ressources d'exemples HTML vraiment utiles pour les programmeurs Web qui apprennent à créer des pages Web? Partagez vos propres ressources dans la section des commentaires ci-dessous.