Une introduction au HTML
HTML signifie langage de balisage hypertexte, et les documents utilisant ce langage créent des pages Web. Chaque site Web l'utilise, il est donc important de comprendre comment cela fonctionne.
Dans cet article de didacticiel, vous apprendrez tout ce que vous devez savoir sur HTML .
Qu'est-ce que la déclaration <!DOCTYPE > ?
La déclaration <!DOCTYPE> est la première ligne de code de chaque fichier HTML . Il indique aux navigateurs Web quelle version de HTML se trouve dans un fichier spécifique.
Chaque version de HTML est unique et possède son propre ensemble de règles. HTML 5 est la dernière version du langage. C'est la version recommandée pour les développeurs, ainsi que la version la plus simple à déclarer. Pour déclarer un document HTML 5 , ajoutez simplement l'élément HTML à la déclaration <!DOCTYPE> .
Vous pouvez voir un exemple ci-dessous :
<!DOCTYPE html>Qu'est-ce que la balise <head> ?
Dans chaque document HTML , la déclaration <!DOCTYPE> est suivie de la balise <html> . Cette balise identifie la racine du document et englobe les balises <head> et <body> .
La balise <head> est la première section et elle contient les balises <title> et <meta> . Cependant, dans certains cas, lorsque le développeur choisit d'utiliser du CSS interne, la balise <style> est également placée dans la balise <head> .
Une seule balise <title> se trouve dans un document HTML . La balise <title> contient le titre d'une page Web et cette information apparaît dans la zone d'onglet d'un navigateur Web.
Vous pouvez voir un exemple de balise de titre ci-dessous :
<title>An Introduction to HTML</title>Un fichier HTML qui a la balise <title> ci-dessus apparaîtra comme "Une introduction au HTML" dans la zone d'onglet des navigateurs.
La balise <meta> décrit le contenu d'une page Web et a généralement un nom et un attribut de contenu. Trois des types de balises <meta> les plus populaires sont la description, le mot-clé et la fenêtre d'affichage.
Vous trouverez ci-dessous un exemple de balise de description <meta> :
<mete name="description" content="This is a simple page, which demonstrates the basics of HTML">
L'attribut de contenu de la balise description <meta> contient une description de votre page Web. Il s'agit des données affichées dans les résultats d'un moteur de recherche, qui indiquent à un visiteur potentiel à quoi s'attendre sur un site Web.
Vous trouverez ci-dessous un exemple de balise <meta> de mots-clés :
<meta name="keywords" content="HTML, web development, etc">
La balise keywords <meta> contient des mots ou des phrases pertinents pour votre site Web. Chaque nouveau mot ou expression attribué à un attribut de contenu de mot-clé est séparé par une virgule, comme vous pouvez le voir dans l'exemple ci-dessus.
Voici un exemple de balise <meta> de fenêtre d' affichage :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
La balise viewport <meta> permet de créer des conceptions réactives, en rendant votre page Web réactive à différents types d'appareils.
Qu'est-ce que la balise <body> ?
La balise <body> est la deuxième section principale de la balise racine <html> . La balise <body> contient tous les éléments affichés sur une page Web.
Les éléments avec une balise <body> sont classés en tant qu'éléments en ligne ou en bloc. Si vous voulez voir un aide-mémoire complet sur l'essentiel HTML , nous en avons créé un pour que vous puissiez tout comprendre plus facilement.
Que sont les éléments de bloc ?
Les éléments de bloc commencent toujours sur une nouvelle ligne et occupent toute la largeur de la ligne sur laquelle ils se trouvent.
Certains éléments de bloc que vous utiliserez incluent :
- Les balises de titre
- La balise <p>
- La balise <div>
- La balise <ol>
- La balise <ul>
- La balise <li>
Les éléments de bloc sont utilisés pour diviser le texte sur le site Web dans un format cohérent et digeste.
Que sont les balises de titre ?
Il existe six types différents de balises de titre : <h1> , <h2> , <h3> , <h4> , <h5> et <h6> . La balise <h1> produit le titre le plus grand, le <h6> produit le titre le plus petit et tous les autres titres se situent à une position entre les deux (selon sa valeur numérique).
Les balises d'en-tête sont utilisées sur les en-têtes d'une page Web. L'utilisation d'une balise d'en-tête spécifique dépend de la position de l'en-tête sur la page Web. Par exemple, la balise <h1> est utilisée sur le premier titre d'une page Web, et une page Web n'utilise qu'un seul élément h1 (bien qu'elle puisse avoir plusieurs éléments h2, h3 et h4).
Vous pouvez voir un exemple de la balise <h1> en action ci-dessous :
<h1> Learning the Basics of HTML </h1>
Qu'est-ce que la balise <p> ?
Le <p> est un autre élément de bloc qui est utilisé dans le corps de la page Web et qui crée des paragraphes. Voici un exemple d'utilisation de cette balise :
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
Qu'est-ce que la balise <div> ?
La balise <div> représente une division. Il est utilisé pour créer des conteneurs pour des groupes d'autres éléments HTML à des fins de style ou de fonctionnalité.
Par exemple, si vous travaillez avec une grille, vous devrez placer tous les éléments de la grille dans un conteneur. Une balise <div> est ce que vous devrez utiliser pour créer le conteneur.
Que sont les balises <ol> et <ul> ?
Les balises <ol> et <ul> sont utilisées pour créer des listes en HTML . La balise <ol> crée des listes ordonnées, tandis que la balise <ul> crée des listes non ordonnées. Cependant, les deux balises utilisent la balise <li> , qui crée des éléments de liste.
Utilisation de la balise <ol>
Une liste ordonnée utilise des nombres par défaut. Cependant, la balise <ol> a un attribut type que vous pouvez utiliser pour indiquer explicitement l'élément que vous souhaitez utiliser pour ordonner votre liste. Vous pouvez commander une liste avec des chiffres romains majuscules ou minuscules, des lettres majuscules ou minuscules ou des chiffres.
Vous pouvez voir un exemple ci-dessous :
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Le code ci-dessus crée une liste ordonnée utilisant des lettres minuscules.
Utilisation de la balise <ul>
La balise <ul> a également un attribut type, qui prend l'une des valeurs suivantes : disque, cercle ou carré. Cependant, le disque est l'indicateur par défaut d'un nouvel élément de liste dans une liste non ordonnée.
Voici un exemple de ce qu'une liste non ordonnée voudrait sous forme de code :
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Que sont les éléments en ligne ?
Un élément en ligne ne commence pas sur une nouvelle ligne. Il commence à la prochaine position disponible, qui peut être ou non sur une nouvelle ligne, et il n'utilise que la largeur nécessaire. Certains éléments en ligne que vous êtes le plus susceptible d'utiliser incluent :
- La balise <span>
- La balise <a>
- La balise <img>
- La balise <label>
- La balise <button>
Nous allons discuter de chacun d'eux plus en profondeur ci-dessous.
Qu'est-ce que la balise <span> ?
La balise <span> est utilisée à des fins de style en ligne. Par exemple, si vous souhaitez modifier le style d'un mot ou d'une phrase spécifique dans un paragraphe, vous pouvez utiliser la balise <span> .
Voici un exemple de cette balise :
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
L'utilisation de la balise <span> dans l'exemple ci-dessus garantit que les deux mots de la balise <span> peuvent désormais avoir un style unique.
Qu'est-ce que la balise <a> ?
La balise <a> est utilisée pour créer des liens sur une page Web. La balise <a> permet à un développeur de créer un lien vers un site Web différent (lien externe) ou une page Web différente sur le même site Web (lien interne). La balise <a> a deux attributs importants : href et target.
L'attribut href est essentiel, car il stocke la valeur de l'emplacement du lien. Et l'attribut target est nécessaire car il permet à un utilisateur d'ouvrir le lien dans un nouvel onglet. Sans l'attribut target, un lien s'ouvrira dans l'onglet actuel, et s'il s'agit d'un lien externe, il éloignera le trafic de votre site Web.
Voir ci-dessous pour un exemple de la balise <a> en action :
<a href="http://google.com" target="_blank">Click this link to Google</a>Apprendre le HTML est essentiel pour les programmeurs
L'apprentissage du HTML est crucial pour tous les programmeurs et devrait constituer la base de vos études. Heureusement, cependant, ce n'est pas trop compliqué non plus.
Après avoir lu ce guide, vous devriez avoir tout ce dont vous avez besoin pour commencer à mieux formater les sites Web.