É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:

Le dernier mot sera dans <b>audacieux</b>.

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.

<i>Ceci est en italique.</i> Ce n'est pas.

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.

Lisez tous les jours Design Shack pour de superbes atouts de conception.

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:

Texte, images, etc.

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.

<img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_4.jpg"> <p>Nous avons maintenant une bonne idée de la façon dont HTML est un langage de balisage et de ce que cela signifie. Nous savons que c’est essentiellement un moyen de donner du texte brut au navigateur et de lui donner une sortie riche en contenu et même un contenu actif sur lequel il est possible de cliquer. La dernière chose que nous devons comprendre, c'est comment cela s'intègre dans la vue d'ensemble d'une page Web terminée.</p> <p>Comme nous l'avons vu dans les exemples ci-dessus, HTML <em>la plupart</em> concerne la saisie directe de contenu sur une page. La structure sous-jacente réelle de toute page Web correspond au type de déclarations marquées que nous venons d'apprendre. La plupart du texte et des liens que vous voyez sur une page donnée, ainsi qu'un grand nombre d'images, sont implémentés directement avec HTML. </p> <h3>HTML est censé être ennuyeux</h3> <p>Comme je l'ai dit plus haut, HTML est techniquement tout ce dont vous avez besoin pour une page Web. Cependant, ce contenu HTML en lui-même est assez clair. Notez que nulle part dans les exemples ci-dessus, nous n’avons indiqué à la page la couleur de fond que nous souhaitons utiliser, la taille du texte, les polices à appliquer où, la largeur de certaines parties et leur alignement, etc. </p> <p>Nous avons simplement jeté le contenu sans vraiment réfléchir à ce à quoi il va ressembler. En regardant une page du Web, vous pouvez voir que personne ne s’arrête ici. Chaque site a sa propre apparence, ses propres couleurs, typographie, mise en page, etc.</p> <p>Par exemple, imaginez que votre site de nouvelles local collecte un article de l'Associate Press. Ils pourraient imprimer le récit textuellement et donc disposer de la même structure HTML de base pour ce contenu, mais il semblerait que ce soit très différent de la version sur le site AP. Pourquoi?</p> <h3>CSS est la peau, les cheveux et les vêtements</h3> <p>La réponse est que le HTML moderne n'est généralement pas utilisé pour régir le style et la mise en page esthétiques. Pour cela, nous avons adopté quelque chose appelé Cascading Style Sheets, ou CSS.</p> <p>Le flux de travail typique d'un développeur Web peut être d'insérer d'abord le contenu pur et varié dans un document HTML, puis de passer au CSS et de commencer à concevoir ce contenu pour qu'il apparaisse de manière plus attrayante et utilisable. Un an plus tard, le développeur pourrait revenir et ajouter un tout nouveau fichier CSS qui rendrait le site Web complètement différent, sans toucher au code HTML. </p> <p>JavaScript entre dans ce jeu en jouant un rôle plus actif dans la façon dont la page <em>se comporte</em>. Animations, soumissions de formulaires, contenu dynamique, tels sont le domaine de JavaScript. Dernièrement, CSS a envahi ce territoire, mais c'est un sujet d'actualité pour un autre jour. </p> <h2>Qu'est-ce que HTML5?</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_5.jpg"> <p>Avant de terminer, vous vous demandez sûrement de quoi parle tout ce discours HTML5. HTML5 est exactement ce que cela ressemble: la cinquième grande itération de HTML.</p> <p>Les technologies Web ne sont pas immuables, elles évoluent et se développent constamment. Tout comme les concepteurs graphiques doivent généralement suivre les dernières nouveautés de la dernière version de Photoshop, les concepteurs Web doivent surveiller les modifications apportées aux normes Web. </p> <p>HTML5 apporte de nombreuses nouvelles fonctionnalités à la table tout en réduisant les dépenses inutiles de son précédent versement. Par exemple, les développeurs HTML5 ont à travailler avec de nouvelles balises qui rendent plus logique la structure de base d'une page Web. </p> <p>Pour plus d'informations sur HTML5, consultez notre série complète sur le sujet:</p> <ul> <li>HTML5: les bases</li> <li>HTML5: Nouveaux éléments</li> <li>HTML5: changements sémantiques</li> <li>HTML5: faites-le fonctionner aujourd'hui</li> </ul> <h2>Conclusion: plus à venir!</h2> <p>Cet article était destiné à vous donner un aperçu conceptuel de base du HTML. Si vous avez commencé à lire sans avoir la moindre idée de ce qu'est le HTML et de son utilisation, il est à espérer que vous maîtriserez maintenant ces concepts.</p> <p>À mesure que nous nous tournons vers l'avenir, je vais développer ce sujet, passer en revue l'anatomie de base d'un document HTML, puis passer à une autre question importante: qu'est-ce que le CSS? </p> <p>Assurez-vous de revenir bientôt pour en savoir plus sur ces sujets!</p> <p><em>Sources d'images: xlibber, Ryan Amos, Dave Parker</em></p>