Structure du document HTML : découvrez la structure de base du HTML

Publié: 2020-12-14

HTML a été utilisé comme langage de balisage standard pour les documents accessibles sur Internet via les données du navigateur. HTML se compose d'une série d'éléments courts, de balises et de codes qui, lorsqu'ils sont compilés ensemble dans un format structuré, créent une page Web que tout le monde peut consulter avec un accès Internet approprié.

Cela a changé la façon dont les gens travaillent. HTML et CSS sont utilisés pour créer et manipuler des éléments sur une page Web avec javascript, HTML permet aux créateurs de définir différents rôles pour chaque élément, ce qui donne une liberté de personnalisation totale dans le processus de création.

HTML signifie Hyper Text Markup Language et est utilisé pour concevoir des pages Web qui sont affichées sur des sites Web.

Il y a trois aspects principaux qui, une fois réunis, aident à créer une page Web.

Structure HTML — prend en charge les éléments structurels
Style CSS - aide à concevoir et donne un style à ces éléments structurels
Interaction JS - permet l'interaction entre ces éléments

Dans la structure HTML, les éléments et les balises sont associés les uns aux autres pour marquer le contenu.

Chaque page disponible sur Internet comprend des balises HTML. Ces balises aident à afficher le contenu en ligne avec une perspective claire et ouverte, qui peut toujours être modérée et modifiée. Afin d'expliquer les choses de manière plus simple, décrivons comment les éléments et les balises sont utilisés dans le programme.

Les éléments d'ouverture et de fermeture changent, mais les balises restent les mêmes. Les balises sont insérées avant et à la fin des phrases, permettant de les mettre en forme sur la page. Une page Web idéale se compose de trois sections principales et essentielles :

Titre
Diriger
Corps

L'élément Head est utilisé pour mettre en surbrillance le début/le titre de la section d'en-tête. La section d'en-tête sert toujours de description de la page. Le contenu des balises d'en-tête, c'est-à-dire le titre, est ce qui est utilisé comme source pour identifier le contenu de la page.

Vous trouverez ci-dessous toutes les balises pouvant être utilisées dans l'élément head :

<base>
<lien>
<méta>
<noscript>
<script>
<style>
<titre>

Par exemple:

<TÊTE>

<TITLE> Un exemple Hello world en HTML<TITLE>

</HEAD>

Les éléments de niveau bloc sont utilisés pour identifier des sections spécifiques d'une page Web, qu'il s'agisse d'un paragraphe, de sous-titres ou de certaines listes à créer.

Paragraphe : <P>et </P>

Titre, niveau un :<H1>Titre, niveau deux :<H2>et </H2>

Règle horizontale :<HR> Centrage :<CENTER>

Pied de page : Il n'y a pas de balises spéciales pour le désigner, mais il est toujours recommandé d'avoir un pied de page sur la page Web pour aider à identifier les sections nécessitant un contact avec l'auteur. Ils peuvent inclure une section FAQ ou un e-mail pour s'abonner à une newsletter.

<HTML>

<TÊTE>

<TITLE>Une entreprise de chaussures <TITLE>

</HEAD>

<CORPS>

<H1>Bienvenue dans des chaussures incroyables ! </H1> : </H2>

<CENTER> Pourquoi ne pas visiter <A HREF =..http://www.example1.com/..>Example Website

</A>

</CENTRE>

</BODY>

</HTML>

La section ci-dessus a expliqué les principaux éléments d'une page Web d'une structure HTML.

Maintenant, nous nous dirigeons vers le source HTML et essayons de comprendre comment on peut l'utiliser pour comprendre la structure du programme et ses éléments.

En tant que débutant, cela aide beaucoup à comprendre comment les autres pages sont développées, et elles peuvent être utilisées comme référence pour créer une version personnalisée pour votre propre page Web.

Cliquez sur le bouton droit n'importe où sur la page Web, puis sélectionnez "Afficher la source de la page". Cela ouvrira une fenêtre contenant le code source de la page.

Pour inspecter une page

Cliquez sur le bouton droit n'importe où sur la page Web, puis sélectionnez "Inspecter" pour voir la liste et les types d'éléments utilisés pour créer cette page Web spécifique. Il inclurait à la fois HTML et CSS, qui peuvent être modifiés via le panneau de style.

Après avoir expliqué la structure de base du HTML et ses balises, passons maintenant à la compréhension des éléments de base requis pour écrire du contenu en HTML.

<p> Cette balise est utilisée dans une page Web lorsqu'il y a un besoin pour un paragraphe, et pour le terminer, la balise </p> est utilisée.

<br> Cette balise est utilisée pour couper les lignes et est principalement utilisée pour écrire des lignes simples, qu'il s'agisse d'un contact ou d'une adresse.

<hr> Cette balise est utilisée pour séparer le contenu de la page Web en deux sections.

Toutes les balises ici sont implémentées dans un exemple de code de page Web

Apprendre : 21 idées de projets de développement Web

CONTRIBUTION

<html>

<tête>

</head>

<corps>

<h1>Structure HTML</h1>

<p>

Par upGrad Education<br>

<h>

Apprenez les bases <br>

<h>

Par upGrad Education<br>

</p>

</body>

</html>

Les attributs

Pour toutes les balises mentionnées, un attribut est utilisé lorsqu'il y a un besoin d'informations supplémentaires. Les attributs sont définis avec deux paramètres, à savoir 'value' et 'name'.

Ici, le paramètre 'name' a pour fonction de prendre le nom de la propriété à laquelle il est censé être attribué. Et le paramètre 'value' a une fonction similaire pour prendre la valeur des noms de propriété alignés sur l'élément.

<img> Cet attribut est utilisé pour ajouter/intégrer une image dans la page Web. Cette balise aidera à spécifier le chemin de l'image. Et les <height> et <width> indiquent respectivement la hauteur et la largeur de l'image.

<alt> Cet attribut est appliqué lorsque l'image ne peut pas être chargée en raison d'une erreur de connexion ou pour une autre raison. La balise alt sert de sous-titre pour l'image.

Inscrivez-vous à des cours de génie logiciel dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Lire : 8 idées et sujets passionnants pour des projets Full Stack

Exemple

<html>

<corps>

<h2>L'attribut src</h2>

<p>Les images HTML sont définies avec la balise img et le nom de fichier de la source de l'image est spécifié dans l'attribut src :</p>

</body>

</html>

Pour changer le style de texte, la taille, la police et toute autre fonction liée au texte, la balise <style> est utilisée

Exemple

<html>

<corps>

<h2>L'attribut de style</h2>

<p>L'attribut est utilisé pour modifier les styles, tels que la couleur :</p>

<p style="color:red;">Ceci est un paragraphe rouge.</p>

</body>

</html>

Avec les applications de modification de texte, HTML fournit également des balises pour modifier le texte en fonction de demandes personnalisées à l'aide de ces balises.

<b> – texte en gras
<strong> – Texte important
<i> – Texte en italique
<em> – Texte mis en évidence
<marque> – Texte marqué
<petit> – Texte plus petit
<del> – Texte supprimé
<ins> – Texte inséré
<sub> – Texte en indice
<sup> – Texte en exposant

Pour résumer l'article, nous avons appris les fonctionnalités et les bases suivantes du HTML :

Structure HTML
Balises, éléments et leurs types
Balises de base et leurs applications

Toutes ces fonctionnalités, balises et attributs aident à comprendre le besoin de HTML.

Si vous souhaitez en savoir plus sur le développement de logiciels à pile complète, consultez le programme Executive PG de upGrad & IIIT-B en développement de logiciels à pile complète, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse, plus de 9 projets, et affectations, statut d'ancien de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.

Préparez-vous à une carrière d'avenir

Postulez maintenant pour une maîtrise en génie logiciel