5 étapes pour comprendre le code HTML de base

5 étapes pour comprendre le code HTML de base

Le HTML est une partie vitale du Web tel que nous le connaissons. Et bien que peu de concepteurs de sites Web créent des pages en tapant manuellement du code HTML, il est toujours pratique d'en savoir un peu plus à ce sujet.





Nous allons examiner quelques bases du langage, y compris ce qu'est vraiment HTML, quelques concepts fondamentaux et comment il interagit avec d'autres langages. Considérez cela comme un cours accéléré « HTML pour les nuls ».



Principes de base du HTML : qu'est-ce que le HTML ?

HTML signifie Langage Signalétique Hyper Text . Et bien qu'il soit parfois regroupé avec les langages de programmation, ce n'est pas exact.





As a langage de balisage , HTML vous permet uniquement de créer la mise en page d'affichage des pages. Une véritable langage de programmation , comme Java ou C++, contient une logique et des commandes qui sont exécutées.

Bien que ce soit simple, le HTML est à la base de chaque page du Web. Il est responsable du texte qui apparaît en gras, de l'ajout d'images et des liens vers d'autres pages. Nous avons une FAQ HTML qui explique plus.



Vous pouvez cliquer avec le bouton droit sur la plupart des pages Web de votre navigateur et choisir Afficher la source de la page ou similaire pour voir le code HTML derrière eux. Cela contiendra probablement aussi beaucoup de code qui n'est pas du HTML, mais vous pouvez le parcourir.

Même si vous n'avez aucune expérience avec le balisage ou les langages de programmation, apprendre un peu sur HTML fera de vous un utilisateur Web plus informé. Passons en revue cinq étapes de base pour vous aider à comprendre le fonctionnement du HTML. Nous fournirons des exemples en cours de route.



Étape 1 : Comprendre le concept des balises

HTML utilise un système de Mots clés pour classer les différents éléments du document.

La plupart des balises viennent par paires pour envelopper le texte affecté à l'intérieur. Voici un exemple simple (le



la balise fait du texte gras ; nous en discuterons plus dans un instant.)

This is some bold text .

Remarquez comment 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.

meilleur gestionnaire de fichiers pour windows 10

Cependant, toutes les balises n'ont pas de paire. Certains éléments HTML, appelés éléments vides , n'ont pas de contenu et existent par eux-mêmes. Un exemple est le


balise, qui est un saut de ligne. Vous pouvez « fermer » ces balises en ajoutant une barre oblique (comme


) 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 présenté. Voici les pièces essentielles :

  • Chaque document HTML doit commencer par |_+_| se déclarer comme tel. Ainsi, sa balise de fermeture, |_+_| , est le dernier élément d'un fichier HTML.
  • Ensuite, le |_+_| La section comprend des informations telles que le titre de la page, divers scripts qui s'exécutent sur la page, etc. Comme son nom l'indique, cela vient généralement juste après l'initiale |_+_| étiqueter. L'utilisateur final ne voit pas beaucoup de contenu dans ces balises.
  • Enfin, le |_+_| La balise contient le texte de la page que le lecteur voit (et bien plus encore). Vous trouverez ici des images, des liens et plus encore.

Depuis le

constitue l'essentiel d'un document HTML, le reste de notre procédure pas à pas examine les éléments qui s'y rapportent.

Étape 3 : Balises HTML de base pour le formatage

Examinons ensuite quelques balises courantes qui composent les documents HTML. Bien sûr, il n'est pas possible de couvrir tous les éléments, nous allons donc passer en revue certains des plus importants. Nous avons couvert beaucoup plus d'exemples HTML si ceux-ci ne vous satisfont pas.

Si ces balises semblent assez basiques, rappelez-vous que le HTML a été créé en 1993. Le Web était alors très basé sur du texte à ses débuts.

Formatage de texte simple

HTML prend en charge les styles de texte de base comme vous le trouverez dans Microsoft Word :

  • |_+_| les balises font du texte gras .
  • |_+_| les balises (qui signifie 'emphasis') seront mettre en italique texte.

HTML prend également en charge l'ancien

balise pour gras et

pour les italiques. Cependant, il est préférable d'utiliser ceux ci-dessus.

En bref,

et

montrent comment quelque chose doit être compris, tandis que les dernières balises ne vous indiquent que ce à quoi cela doit ressembler. Ces anciennes balises sont plus accessibles pour les lecteurs d'écran utilisés par les malvoyants.

Paragraphe et autres divisions

HTML

La balise vous permet de définir une section du document. Habituellement, cela est associé à CSS (voir ci-dessous) pour formater une section d'une certaine manière.

Les

La balise vous permet de diviser le texte en paragraphes. Les navigateurs placeront automatiquement de l'espace avant et après ceux-ci, vous permettant de séparer naturellement le texte.

Vous pouvez ajouter des en-têtes à votre document et le rendre plus facile à suivre en utilisant le

par

Mots clés. H1 est l'en-tête le plus important, tandis que H6 est le moins important. Presque tous les articles MakeUseOf utilisent 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

pour ajouter un saut de ligne.

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

Étape 4 : Insertion d'images

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

Vous insérez une image en utilisant le

étiqueter. En combinant cela avec le

L'attribut vous permet de spécifier d'où vous voulez que l'image soit chargée.

Un autre attribut important de

comment activer le mode avion sur mac

les balises sont

. 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

et




éléments pour spécifier le nombre de pixels auxquels l'image apparaît.

Rassemblez le tout et une balise d'image ressemble à ceci :


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



Le World Wide Web ne serait pas vraiment un site Web sans liens vers d'autres pages. En utilisant le

tag, vous pouvez créer un lien vers d'autres pages sur n'importe quel texte.

À l'intérieur de

src

étiquette, le

L'attribut indique où vous vous connectez. Coller simplement l'URL fonctionnera très bien. Vous pouvez utiliser le

alt

élément pour ajouter un peu de texte qui apparaît lorsque quelqu'un survole le lien.

Un lien basique ressemble à ceci :

width

Les

height

tag a de nombreux autres éléments possibles, mais nous ne les détaillerons pas ici.

Comment HTML se connecte avec CSS et JavaScript

Nous avons examiné les bases du HTML et comment il établit une page Web. Mais comme vous pouvez l'imaginer, le HTML seul ne suffit pas pour le Web moderne. Les pages Web HTML simples étaient courantes à l'époque du « Web 1.0 », lorsque la plupart des sites Web n'étaient rien de plus que du texte statique.

Mais maintenant, nous en avons beaucoup plus. CSS (Cascading Style Sheets) est un langage utilisé pour décrire à quoi devrait ressembler le texte que vous avez préparé en HTML. Se souvenir du

Dr. Phil

tag dont nous avons discuté ? A l'intérieur de cette (et d'autres balises), vous pouvez définir un

attribut. Ensuite, dans votre document CSS d'accompagnement, vous pouvez écrire des instructions sur la façon dont

devrait regarder.

Vous pouvez définir ces éléments de style en ligne dans votre code HTML, mais cela est considéré comme une mauvaise pratique car il est beaucoup plus difficile à maintenir. En savoir plus avec ces exemples CSS simples . Consultez également comment optimiser vos fichiers CSS .

JavaScript

Nous avons vu que HTML définit le contenu et CSS détermine l'apparence. JavaScript, le dernier membre du trio vital pour le Web, permet aux pages Web de répondre aux actions des gens 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 d'essayer de le soumettre. Un concepteur de sites Web peut utiliser JavaScript pour parcourir les images d'un diaporama ou inviter l'utilisateur à entrer.

Ce ne sont que quelques exemples élémentaires. JavaScript est un langage de script capable de faire beaucoup de choses et est comparativement beaucoup plus compliqué que HTML et CSS. Voir notre aperçu de JavaScript pour bien plus.

Examiner la portée complète de la conception Web dépasse le cadre de cet article, mais il suffit de dire que HTML interagit avec d'autres langages 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 subi plusieurs révisions, la plus récente étant HTML 5. Notamment, cette norme prend en charge l'intégration vidéo native au lieu de s'appuyer sur des formats propriétaires comme 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

href

et

title

(qui font défiler et clignotent respectivement) couramment observés dans la conception de sites Web des années 1990. Gardez donc à l'esprit que les normes changent avec le temps.

Un peu de connaissances en HTML va un long chemin

Nous avons fait une brève visite guidée du fonctionnement d'un document HTML. Vous connaissez maintenant les principes fondamentaux de la structure des pages Web. Même si vous ne créez pas de pages Web, vous êtes un peu plus conscient du Web que vous utilisez tous les jours.

comment avoir plus de films sur netflix

Pour en savoir plus, améliorez vos compétences en développement Web avec des outils essentiels, puis consultez notre guide sur la façon de concevoir votre premier site Web .

Crédit d'image: Belyaevskiy/ Depositphotos

Partager Partager Tweeter E-mail 5 astuces pour surcharger vos machines Linux VirtualBox

Vous en avez assez des mauvaises performances offertes par les machines virtuelles ? Voici ce que vous devez faire pour améliorer les performances de votre VirtualBox.

Lire la suite Rubriques connexes
  • La programmation
  • HTML
  • Développement web
  • JavaScript
  • Outils pour les webmasters
  • La programmation
  • HTML5
A propos de l'auteur Ben Stegner(1735 articles publiés)

Ben est rédacteur en chef adjoint et responsable de l'intégration chez MakeUseOf. Il a quitté son travail informatique pour écrire à temps plein en 2016 et n'a jamais regardé en arrière. Il couvre des tutoriels techniques, des recommandations de jeux vidéo et plus encore en tant qu'écrivain professionnel depuis plus de sept ans.

Plus de Ben Stegner

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner