La FAQ HTML essentielle que vous devriez mettre en signet

HTML existe depuis longtemps maintenant, il est donc temps que vous appreniez les bases. Qu'est-ce que c'est, comment ça marche et comment écrire quelques éléments communs en HTML.

Avant de commencer, assurez-vous de lire notre guide des éditeurs HTML en ligne gratuits et des meilleurs sites Web pour des exemples HTML de qualité.

Qu'est-ce que le HTML ?

HTML est le langage utilisé pour construire des pages Web. HTML signifie langage de balisage hypertexte et est simple un ensemble d'instructions pour votre navigateur Web. À l'aide de ces instructions, votre navigateur affiche à quoi devrait ressembler une page Web.

Il est important de comprendre qu'il s'agit d'un balisage langage, pas une programmation Langue. Les langages de programmation vous permettent de résoudre des problèmes, tels que des équations mathématiques, la manipulation de données ou le déplacement d'un personnage de jeu vidéo.

Vous ne pouvez pas écrire de logique en HTML. Il ne concerne que la mise en page.

À quoi ressemble le HTML ?

HTML se compose de plusieurs éléments appelés "balises". Les balises sont des instructions pour styliser une partie spécifique de votre page Web. Pour en revenir à la construction, HTML correspond aux plans et les balises sont des éléments spécifiques tels que des fenêtres ou des portes.

Voici à quoi ressemble une page Web très basique en HTML :

Les balises HTML sont prédéfinies et spécifient des fonctionnalités communes telles que des images, des liens vers d'autres pages Web, des boutons, etc.

La grande majorité des balises doivent être ouvertes et fermé . Cela définit simplement une fonctionnalité, avec du texte, des images ou d'autres balises à l'intérieur, puis termine la définition. En repensant aux maisons, ouvrir le tag revient à dire "démarre la fenêtre ici", et fermer le tag revient à dire "voici où se termine la fenêtre".

Les balises HTML n'apparaîtront pas réellement sur votre site Web. Votre navigateur suit les instructions, mais ne les montre jamais à aucun visiteur. Ce n'est pourtant pas un secret. N'importe qui peut consulter votre code HTML une fois que vous avez publié vos pages Web.

Bien qu'il existe un grand nombre de balises HTML différentes, vous n'avez pas besoin de toutes les apprendre avant de pouvoir coder un site Web. Aujourd'hui, vous allez apprendre à écrire des balises courantes et à quoi elles peuvent servir.

Que sont les attributs de balise HTML ?

Une dernière chose à savoir sur les balises sont les attributs . Les attributs définissent les caractéristiques spéciales des balises. Si les balises sont des fenêtres et des portes, les attributs spécifient des détails de construction spécifiques. Cela peut être la largeur et la hauteur du cadre, si la fenêtre s'ouvre ou si la porte a une serrure.

Les attributs sont inclus dans la balise d'ouverture, comme ceci :

Vous ne pouvez pas simplement créer vos propres balises ou attributs. Les attributs et les balises sont prédéfinis par le World Wide Web Consortium (W3C).

Qu'est-ce que HTML5 ?

HTML5 est la dernière version de HTML. Il contient plusieurs nouvelles balises, attributs et fonctionnalités.

Comme HTML est un ensemble d'instructions, différents navigateurs Web l'interprètent parfois différemment. Un navigateur peut décider que les fenêtres et les portes doivent être peintes en noir, sauf indication contraire de votre part.

Alors que les navigateurs ont finalement commencé à devenir assez cohérents les uns avec les autres, vous pouvez toujours vous faire prendre parfois avec de toutes nouvelles fonctionnalités. Google Chrome a peut-être implémenté une nouvelle balise, mais Internet Explorer de Microsoft ne l'a pas encore fait.

Pour la plupart, vos pages Web auront la même apparence sur tous les principaux navigateurs, mais cela vaut toujours la peine de faire un test rapide avant de publier quoi que ce soit, surtout si vous utilisez des balises plus récentes, qui ne sont peut-être pas encore prises en charge par tous les navigateurs.

Si vous souhaitez en savoir plus sur HTML5, consultez notre guide de démarrage HTML5.

Comment commenter le HTML

Comme beaucoup d'autres langages, de balisage ou de programmation, HTML a la capacité de "commenter" des blocs de balisage. Un commentaire est quelque chose qui est ignoré par le navigateur. Cela peut être une note pour vous rappeler ce que fait cette partie particulière de votre site Web.

En commentant le balisage, vous demandez au navigateur d'ignorer une ou plusieurs balises. Cela peut être utile pour supprimer des fonctionnalités ou pour masquer une partie de votre site Web sans supprimer le code.

Lorsqu'un navigateur Web voit un commentaire, il le comprend comme "n'utilisez pas ces instructions jusqu'à ce que je dise le contraire". Les commentaires se composent d'un commentaire "d'ouverture" et d'un commentaire de "fermeture", tout comme les balises.

Voici un exemple :

Commenter le code se fait exactement de la même manière :

Plutôt qu'un message, placez votre balisage entre les balises de commentaire.

Comment insérer des images en HTML

L'insertion d'images dans votre HTML se fait avec la balise image :

Remarquez comment le nom de la balise s'appelle img , et il y a deux attributs. Le src l'attribut spécifie où trouver l'image, et l'attribut alt tag est une description textuelle alternative, au cas où l'image ne pourrait pas être chargée pour une raison quelconque.

La balise d'image n'a pas besoin d'être fermée, contrairement à la plupart des autres balises.

Comment changer la police en HTML

Les polices peuvent être modifiées à l'aide de la police tag et le visage attribut :

Texte Arial MUO 

La taille de la police peut être facilement modifiée à l'aide de la taille attribut :

MUO Big Text 

Si vous souhaitez changer la couleur de la police, cela peut être facilement fait avec la couleur attribut :

Texte rouge MUO 

Ces attributs sont uniques à la police étiqueter. Si vous souhaitez utiliser une autre balise, vous pouvez imbriquer tags, en les plaçant les uns dans les autres :

Texte rouge MUO
 

Comment ajouter un lien en HTML

Des liens peuvent être ajoutés en utilisant le a balise :

MakeUseOf.com
 

Le href l'attribut est la destination de votre lien.

Comment créer un tableau en HTML

Les tableaux HTML impliquent l'imbrication de plusieurs balises différentes. Vous devrez commencer avec un tableau balise :

Ajoutez maintenant quelques lignes en utilisant le tr balise :

Enfin, utilisez le td balise pour créer vos cellules de tableau, qui créeront également les colonnes :

Il est possible d'aller trop loin et de se déchaîner avec la disposition de votre table, mais il est généralement préférable de garder les choses simples si possible. Dans le passé, les tableaux étaient utilisés pour structurer une page Web, mais cette pratique est datée et semble terrible. Gardez les tableaux simplement pour relayer les données au lecteur.

Utiliser CSS avec HTML

Ces exemples ont couvert les bases, mais si vous voulez être vraiment créatif, vous devrez utiliser CSS. Les feuilles de style en cascade vous permettent de mieux contrôler la conception de votre site Web et vous permettent de réutiliser une grande quantité de code entre différentes parties de votre site Web.

Bien que nous ayons des didacticiels sur l'apprentissage du CSS et des exemples CSS rapides, vous pouvez encore effectuer certaines configurations en HTML.

Si vous souhaitez écrire du CSS à côté de votre code HTML, vous pouvez utiliser le style attribut. Cet attribut applique simplement le CSS à la balise sur laquelle il est utilisé :

Bien que cette méthode fonctionne bien, vous aurez du mal à la maintenir si vous avez beaucoup de balisage nécessitant un style similaire.

La meilleure façon est d'utiliser le style tag, placé à l'intérieur de la tête étiqueter. Ici, vous pouvez définir le CSS pour l'ensemble de votre page :

La balise de style a un attribut text/css . Ceci est nécessaire pour que votre navigateur connaisse le style exact à attendre dans la balise.

La troisième et dernière façon d'utiliser CSS consiste à utiliser un fichier externe, en utilisant le lien étiqueter. Cela relie votre HTML au CSS stocké dans son propre fichier, ce qui est très bien si vous en avez une grande quantité :

Plusieurs attributs sont utilisés ici. Le rel L'attribut déclare votre lien en tant que feuille de style. Le type de "text/css" est à nouveau défini dans le type et l'attribut href l'attribut est où trouver le fichier externe.

Comment créer un site Web avec HTML ?

Comme vous l'avez vu, HTML n'est vraiment pas si mal, n'est-ce pas ? À l'aide de quelques balises et attributs simples, vous pouvez assembler rapidement une page Web, même si vous n'avez jamais écrit de HTML auparavant !

Si vous cherchez à écrire un site Web complet, assurez-vous de consulter notre guide du débutant pour créer un site Web.

[]