5 étapes pour comprendre le code HTML de base

Notez que la balise de fermeture commence par une barre oblique (/). Cela signifie une balise de fermeture, ce qui est important. Si vous ne fermez pas une balise, tout depuis le début aura cet attribut.

Cependant, toutes les étiquettes n'ont pas une paire. Certains éléments HTML, appelés éléments vides , n'ont aucun contenu et existent par eux-mêmes. Un exemple est le & lt; br & gt;  tag, qui est un saut de ligne. Vous pouvez «fermer» ces balises en ajoutant une barre oblique (telle que & lt; br / & gt; ) mais ce n’est pas strictement nécessaire.

Étape 2: La mise en page HTML squelette

Un document HTML approprié doit avoir certaines balises définies afin qu’il soit correctement mis en forme. Ce sont les parties essentielles:

• Chaque document HTML doit commencer par & lt;! DOCTYPE html & gt;  se déclarer comme tel. Ainsi, sa balise de fermeture, & lt; / html & gt; , est le dernier élément d'un fichier HTML.
• Ensuite, le & lt; tête & gt; Cette section contient des informations telles que le titre de la page, divers scripts s’exécutant sur la page, etc. Comme son nom l’indique, cela intervient généralement juste après la première & lt; html & gt;  étiquette. L’utilisateur final ne voit pas beaucoup de contenu dans ces balises.
• Finalement, le & lt; corps & gt; balise contient le texte de la page que le lecteur voit (plus beaucoup plus). Vous y trouverez des images, des liens et plus encore.

Depuis le & lt; corps & gt;  Cette section constitue l'essentiel d'un document HTML. Le reste de notre procédure pas à pas examine les éléments qui le concernent.

Étape 3: balises HTML de base pour le formatage

17 exemples de codes HTML simples à apprendre en 10 minutes Vous souhaitez créer une page Web de base? Apprenez ces exemples HTML et essayez-les dans un éditeur de texte pour voir à quoi ils ressemblent dans votre navigateur. Read Article

Si ces balises semblent assez basiques, rappelez-vous que le HTML a été créé complètement en 1993. Le Web était à l’origine très textuel.

Formatage de texte simple

HTML prend en charge les styles de texte de base, comme dans Microsoft Word:

• & lt; forte & gt;  les balises font du texte audacieux .
• & lt; em & gt;  balises (qui signifie «emphase») seront mettre en italique  texte.

HTML prend également en charge les anciens & lt; b & gt;  tag pour gras et & lt; i & gt;  pour l'italique. Cependant, il est préférable d’utiliser celles ci-dessus.

En bref, & lt; forte & gt;  et & lt; em & gt;  montre comment quelque chose doit être compris, alors que les dernières balises vous indiquent seulement à quoi cela devrait ressembler. Ces anciennes balises sont plus accessibles aux lecteurs d'écran utilisés par les malvoyants.

Paragraphe et autres divisions

HTML & lt; div & gt;  balise vous permet de définir une section du document. Généralement, cela est associé à CSS (voir ci-dessous) pour formater une section d’une certaine manière.

le & lt; p & gt;  balise vous permet de diviser le texte en paragraphes. Les navigateurs insèrent automatiquement de l'espace avant et après, vous permettant de séparer le texte naturellement.

Vous pouvez ajouter des en-têtes à votre document et le rendre plus facile à suivre à l'aide du bouton & lt; h1 & gt;  à travers & lt; h6 & gt;  Mots clés. H1 est l'en-tête le plus important, tandis que H6 est le moins important. Presque tout  article utilise les en-têtes H2 et H3 pour organiser les informations.

Frappe Entrer  ajouter des sauts de ligne dans votre document HTML ne les affichera pas réellement. Au lieu de cela, vous pouvez utiliser & lt; br & gt;  ajouter un saut de ligne.

Voici un exemple qui utilise tous ces éléments:

& lt; div class = "example" & gt;
& lt; h2 & gt; Exemple de titre & lt; / h2 & gt;
& lt; p & gt; Ceci est un paragraphe. & lt; / p & gt;
& lt; p & gt; Ceci est un deuxième & lt; br & gt; paragraphe divisé en deux lignes. & lt; / p & gt;
& lt; / div & gt;

Étape 4: Insérer des images

Les images sont une partie essentielle de la plupart des pages Web. Vous pouvez les ajouter facilement avec HTML et même leur définir différentes propriétés.

Vous insérez une image en utilisant le & lt; img & gt;  étiquette. Combinant cela avec le src  attribut vous permet de spécifier où vous voulez que l'image soit chargée.

Un autre attribut important de & lt; img & gt;  balises est alt . Le texte alternatif vous permet de décrire l’image pour les lecteurs d’écran ou au cas où l’image ne se chargerait pas correctement. Vous pouvez passer la souris sur une image pour voir son texte alternatif.

Utilisez le largeur  et la taille  éléments pour spécifier le nombre de pixels de l'image apparaît.

Rassemblez tout cela, et une balise d'image ressemblera à ceci:

& lt; img src = "https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg" alt = "Dr. Phil" width = "1280" height = "720 "& gt;

Étape 5: Ajout de liens

Le World Wide Web ne serait pas vraiment un site Web sans liens vers d’autres pages. En utilisant le & lt; a & gt;  balise, vous pouvez créer un lien vers d’autres pages sur n’importe quel texte.

À l'intérieur de & lt; a & gt;  tag, le href  attribut indique où vous liez. Il vous suffit de coller l'URL. Vous pouvez utiliser le Titre  élément pour ajouter un peu de texte qui apparaît lorsque quelqu'un survole le lien.

Un lien de base ressemble à ceci:

& lt; a href = "https://www.google.com/" title = "Cliquez ici pour effectuer une recherche sur le Web" & gt; Visitez Google & lt; / a & gt;

le & lt; a & gt;  tag a beaucoup d’autres éléments possibles, mais nous n’y plongerons pas ici.

Comment HTML se connecte avec CSS et JavaScript

Nous avons examiné la base du HTML et la manière dont il établit une page Web. Mais comme vous pouvez l’imaginer, HTML seul ne suffit pas pour le Web moderne. Les pages Web HTML simples étaient courantes au cours des journées «Web 1.0», lorsque la plupart des sites Web n'étaient rien d'autre que du texte statique.

Mais maintenant, nous en avons beaucoup plus. CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'aspect du texte que vous avez préparé en HTML. Se souvenir du & lt; div & gt;  tag nous avons discuté? À l'intérieur de celui-ci (et d'autres tags), vous pouvez définir un classe  attribut. Ensuite, dans votre document CSS d’accompagnement, vous pouvez écrire des instructions expliquant comment classe  devrait regarder.

JavaScript

Nous avons vu que HTML définit le contenu et que CSS en détermine l'apparence. JavaScript, dernier membre du trio essentiel pour le Web, permet aux pages Web de réagir aux actions des utilisateurs sans charger une nouvelle page à chaque fois.

Par exemple, JavaScript permet à un site Web de vous avertir que le mot de passe que vous avez entré ne répond pas à ses exigences avant que vous essayiez de le soumettre. Un concepteur de sites Web peut utiliser JavaScript pour parcourir les images d’un diaporama ou inviter l’utilisateur à le saisir.

L'examen complet de la conception Web dépasse le cadre de cet article, mais il suffit de dire que le HTML interagit avec d'autres langues pour créer les pages Web que nous connaissons aujourd'hui.

L'évolution du HTML

Il est important de noter que le HTML n’est pas statique. HTML a fait l'objet de plusieurs révisions, la plus récente étant HTML 5. Il convient de noter que cette norme prend en charge l'intégration vidéo native au lieu de s'appuyer sur des formats propriétaires tels qu'Adobe Flash.

De nouvelles itérations de HTML déclarent également certaines balises archaïques comme obsolètes de temps en temps. Ceux-ci incluent des balises terribles comme & lt; chapiteau & gt;  et & lt; clignoter & gt;  (défilement et texte flash respectivement) fréquemment observés dans la conception de sites Web des années 1990. Alors gardez à l'esprit que les normes changent avec le temps.

Un peu de connaissances HTML va un long chemin

Nous avons brièvement décrit le fonctionnement d’un document HTML. Vous connaissez maintenant les bases de la structure des pages Web. Même si vous ne créez pas de pages Web, vous êtes un peu plus au courant du Web que vous utilisez tous les jours.

Mettez à niveau vos compétences en développement Web avec ces 10 outils essentiels Prêt à commencer à développer des sites Web? Ces outils en ligne pour les développeurs Web débutants et experts sont assurés de renforcer vos compétences! Read Article

Crédit d'image: Belyaevskiy / Depositphotos