Qu'est-ce que HTML? Retour aux sources

Étant donné que j'ai une formation en impression, je suis toujours désireux d'aider les concepteurs d'autres domaines à se lancer dans la conception Web et le développement de base. Je sais par expérience que la transition est extrêmement intimidante et que beaucoup de gens ne pensent tout simplement pas pouvoir y arriver.

Heureusement, je peux aussi attester du fait que ce n'est probablement pas aussi difficile que vous pourriez l'imaginer. Dans le monde du codage hardcore, HTML et CSS occupent une place relativement basse sur le marché. barrière à l'entrée échelle.

Aujourd'hui, nous allons commencer une série qui examine les éléments de base du développement Web. HTML, CSS, JavaScript; Si vous êtes un débutant complet et que vous ne possédez peut-être pas une compréhension de base de ce que ces technologies sont beaucoup moins à même de les manier, cette série est faite pour vous.

Qu'est-ce que HTML?

Il y a un million de façons de commencer cette discussion. Nous pourrions expliquer en détail comment HTML représente Hypertext Markup Language ou comment il a été inventé en 1980 par le physicien Tim Berners-Lee en tant que système de partage de documents, mais vous pouvez obtenir tout cela sur Wikipedia. Si l’histoire du World Wide Web vous intéresse, je vous recommande vivement d’enquêter davantage sur le sujet, mais cela ne nous aide pas beaucoup dans notre discussion sur le format HTML actuel et sur la façon dont vous devrez l’utiliser.

Ce que vous devez vraiment comprendre, c'est le but conceptuel du HTML. Pourquoi est-ce? Pourquoi en avez-vous besoin? Comment se compare-t-il à d'autres technologies telles que CSS et JavaScript?

HTML: La pièce la plus importante

Dans ce sens, HTML peut être considéré comme la pierre angulaire du Web tel que vous le connaissez. Il existe une architecture sous-jacente de technologie compliquée qui constitue? Internet? mais le bon vieux WWW dépend en grande partie de HTML.

En fait, techniquement, HTML est tout ce dont vous avez besoin pour créer une page Web. Quelques lignes extrêmement simples de HTML téléchargées sur un serveur Web constitueraient une page Web, ce qui n’est certainement pas quelque chose qui peut être dit pour CSS, ni en général pour JavaScript. Le point ici est que, bien que toutes ces technologies soient étroitement liées, HTML est la pièce maîtresse du puzzle.

Maintenant, avant que vous ne soyez trop excité, cela ne signifie pas que vous pouvez vous contenter d'apprendre le HTML. Vous auriez du mal à trouver une page Web moderne qui n'utilise pas, au minimum, une combinaison de HTML et de CSS.

Langages de balisage

Pour vraiment comprendre ce qu'est le HTML, vous devez comprendre ce que sont les langages de balisage et pourquoi ils existent (je me faufile dans ce drivel après tout).

Fondamentalement, le Web est écrit en texte brut. Maintenant, par? Texte brut? Je ne parle pas seulement d'un manque d'images, je parle d'un manque de formatage riche de toutes sortes. À la différence de Microsoft Word, où vous pouvez facilement créer du texte en italique gras à n’importe quelle taille en points, écrire du code revient à utiliser WriteRoom ou IA Writer; tout ce que vous obtenez est de vieilles lettres et symboles simples.

La métaphore de la machine à écrire

Imaginez-vous en train de composer un essai sur une machine à écrire ancienne, puis de le remettre à quelqu'un pour qu'il puisse le saisir dans un ordinateur. Votre machine à écrire ne présente aucune fonctionnalité de formatage, mais lorsque votre associé entre votre essai dans le traitement de texte moderne, vous souhaitez que celui-ci ait des en-têtes, du texte en gras, du texte en italique, des listes à puces, etc. Comment diriez-vous à cette personne où implémenter ces fonctionnalités?

La réponse est bien sûr que vous voudriez? Marquer? votre document et insérez des indicateurs supplémentaires indiquant comment vous souhaitez que le texte soit mis en forme. Celles-ci ne figureront pas dans le résultat final mais serviront simplement à expliquer à l'interprète comment tout donner comme vous le souhaitez. C'est exactement comment un langage de balisage fonctionne. Avec HTML, ce balisage est accompli par le biais de balises.

Tag, tu es ça

Au moment d'écrire cet article, je le fais en HTML au format texte brut. Cela signifie quand je veux audacieux quelque chose, je ne peux pas simplement appuyer sur un bouton. Au lieu de cela, j'insère une balise en gras:

Voyez comment j'ai utilisé?? indiquer où commencerait le texte en gras? Notez également comment j'ai utilisé?? pour indiquer la fin du texte en gras. Pour mettre quelque chose en italique, j'utilise la même technique.

Les parties entre crochets sont appelées étiquettes et chaque ensemble d’étiquettes a un point de départ et d’arrêt. Avec ceux-ci, vous indiquez à l'interprète, dans notre cas, un navigateur Web tel que Firefox, comment vous souhaitez que le contenu soit formaté. Lorsque nous plaçons le contenu entre une balise ouvrante et une balise fermée, nous disons généralement que nous avons? Emballé? dans une balise.

Exemple de balises

Maintenant que vous savez quelles sont les balises, voici quelques exemples plus élémentaires de balises HTML:

  • paragraphe

  • entête

    (h2, h3, h4, etc. créent des en-têtes de plus en plus petits)

  • petit texte

Liens, balises et attributs

C'est là que le? Hypertexte? dans? Hypertext Markup Language? une partie entre. L’un des principaux aspects de l’écriture HTML et de l’utilisation du Web en général est la création de liens. C'est comme ça que tout fonctionne bien? Si une page Web est chargée dans votre navigateur et que vous souhaitez accéder à une autre page, que faites-vous? Cliquez sur un lien! Ce système est fantastique pour connecter tous les différents éléments d’information stockés sur le Web.

Pour lier quelque chose en HTML, nous utilisons bien sûr une balise. Cette balise va paraître un peu plus complexe que la plupart des autres. Regardons un exemple qui renvoie à la page d'accueil de Design Shack.

Ici nous n'avons pas seulement étiquette mais un attribut ainsi que. La balise () indique au navigateur qu’il existe un lien et l’attribut (href) indique au navigateur où le lien doit aller. La syntaxe pour ce type de structure est la suivante:

Dans notre exemple précédent, tout ce qui se situe entre? tags devient un lien. Alors les mots? Design Shack? aurait été un lien texte actif qui, en cliquant dessus, a dirigé l'utilisateur vers l'URL href, qui était la page d'accueil de Design Shack.

Placer une image via HTML fonctionne à peu près de la même manière. Nous utilisons le? Src? attribuer à pointer le navigateur à l'emplacement de l'image et le? alt? attribut du texte qui apparaîtra à la place de l'image s'il ne peut pas être affiché. Notez que la structure de la balise de fermeture est un peu différente cette fois avec tous les? Img? info placée dans une seule étiquette.