{"id":3137,"date":"2024-09-21T11:24:00","date_gmt":"2024-09-21T09:24:00","guid":{"rendered":"https:\/\/www.robertomaiolino.it\/blografik\/?p=3137"},"modified":"2026-06-04T12:16:32","modified_gmt":"2026-06-04T10:16:32","slug":"web-design-nozioni-base-html","status":"publish","type":"post","link":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/","title":{"rendered":"Web design \u2013 Nozioni base: HTML"},"content":{"rendered":"\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b885449e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b885449e\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1080\" height=\"648\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo.jpg\" alt=\"\" class=\"wp-image-3172\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo.jpg 1080w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo-300x180.jpg 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo-1024x614.jpg 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo-768x461.jpg 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo-110x66.jpg 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo-420x252.jpg 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo-717x430.jpg 717w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nel <a href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#Cosa_sapere_per_progettare_un_sito\">precedente articolo di questa rubrica<\/a> abbiamo introdotto i concetti base del web (protocolli <em>HTTP<\/em>, differenza tra internet e web, sistema <em>client-server<\/em>). In questo articolo, invece, entreremo nello specifico e parleremo <em>di <\/em><strong><em>HTML, <\/em><\/strong>cercando di capire cos&#8217;\u00e8 una <strong>Pagina HTML<\/strong> e come funziona il linguaggio con il quale viene &#8220;scritta&#8221;.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><label class=\"ez-toc-title\" style=\"cursor:inherit\">In questo articolo<\/label>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#Cose_lHTML\" >Cos&#8217;\u00e8 l&#8217;HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#Cose_lipertesto\" >Cos&#8217;\u00e8 l&#8217;ipertesto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#Dallipertesto_allHTML\" >Dall&#8217;ipertesto all&#8217;HTML<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#Lo_sviluppo_dei_browser\" >Lo sviluppo dei browser<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#Come_funziona_lHTML\" >Come funziona l&#8217;HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#Caratteristiche_di_un_documento_HTML\" >Caratteristiche di un documento HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#Struttura_di_un_documento_HTML\" >Struttura di un documento HTML<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#Associazione_con_il_CSS\" >Associazione con il CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#Conclusione\" >Conclusione<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cose_lHTML\"><\/span>Cos&#8217;\u00e8 l&#8217;HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Innanzitutto, diciamo che una <strong>pagina HTML<\/strong> non \u00e8 altro che un documento di testo, molto simile ad un documento <em>word <\/em>o .<em>txt<\/em>. La differenza \u00e8 che questo documento \u00e8 scritto con un <strong>linguaggio di formattazione<\/strong>, chiamato appunto<strong> HTML<\/strong> (<em>HyperText Markup Language<\/em>). <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><em>l&#8217;<strong>HTML<\/strong> <\/em>prima di tutto <strong>\u00e8 un linguaggio<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Si, avete letto bene: tutte quelle straordinarie pagine dei siti web, con video, immagini, animazioni e interazioni stupefacenti sono tutte rese possibile da un semplice documento di testo. In un qualsiasi sito, quindi, i documenti scritti in <em>HTML <\/em>rappresentano la <strong>base strutturale<\/strong> delle <strong>pagina web<\/strong>. Tali pagine possono essere un<strong> file HTML<\/strong> &#8220;puro&#8221; (.html) o un file di altro tipo contenente codice scritto con <strong>linguaggio html<\/strong>. Quindi:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A rendere questi <em>file <\/em>delle vere e proprie <strong>pagine web<\/strong> \u00e8 il <strong><em>browser<\/em><\/strong>, ovvero un software capace di interpretare l&#8217;<strong>HTML<\/strong> (e altri <em>linguaggi<\/em>) ed eseguire le istruzioni contenute all&#8217;interno dei nostri file. Senza il <em>browser <\/em>la nostra pagina web apparirebbe come una serie di stringhe di codice. Per comprendere l&#8217;<strong>HTML <\/strong>dobbiamo, quindi, capire cos&#8217;\u00e8 <em><strong>l&#8217;ipertesto<\/strong><\/em>. <\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b8854fed&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b8854fed\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"389\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/Immagine-2024-09-19-090252-1024x389.jpg\" alt=\"\" class=\"wp-image-3138\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/Immagine-2024-09-19-090252-1024x389.jpg 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/Immagine-2024-09-19-090252-300x114.jpg 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/Immagine-2024-09-19-090252-768x292.jpg 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/Immagine-2024-09-19-090252-110x42.jpg 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/Immagine-2024-09-19-090252-420x159.jpg 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/Immagine-2024-09-19-090252-770x292.jpg 770w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/Immagine-2024-09-19-090252.jpg 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Esempio di codice HTML. Questo codice corrisponde alla pagina che state vedendo in questo momento.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cose_lipertesto\"><\/span>Cos&#8217;\u00e8 l&#8217;ipertesto<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un <em><strong>ipertesto <\/strong><\/em>\u00e8 un testo contenente particolari<strong> <\/strong>parole chiave che mettono in relazione un insieme di documenti. Tali documenti risultano, quindi, essere <strong>collegati <\/strong>tra loro in una <strong>rete di informazioni<\/strong> <strong>non lineari<\/strong>, formata, cio\u00e8, da nodi di collegamento detti &#8220;<strong><em>collegamenti ipertestuali<\/em><\/strong>&#8221; o <strong><em>link<\/em><\/strong>. Grazie a questa rete di <strong><em>collegamenti ipertestuali<\/em><\/strong>, qualsiasi documento pu\u00f2 essere &#8220;il successivo&#8221; in base alla scelta del lettore, che pu\u00f2 &#8220;viaggiare&#8221; senza un ordine prestabilito, da un documento all&#8217;altro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ad esempio: Se cliccate su questo testo &#8220;<em><a href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#Cosa_sapere_per_progettare_un_sito\">precedente articolo di questa rubrica<\/a> <\/em>&#8221; verrete portati ad un&#8217;altra pagina. Ecco questo \u00e8 un tipico <em><strong>collegamento ipertestuale<\/strong><\/em>. Il <em>design <\/em>nel tempo ha imparato a trasformare questi <strong>link <\/strong>facendoli apparire come elementi grafici: un pulsante, un&#8217;immagine, le voce di men\u00f9 o il video di Youtube sulla bacheca del nostro social, sono tutti <em>collegamenti ipertestuali<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dallipertesto_allHTML\"><\/span>Dall&#8217;ipertesto all&#8217;HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Il concetto di <em>ipertesto <\/em>esiste da molto prima della nascita di internet, prima della nascita del design stesso, \u00e8 un concetto radicato nella storia della comunicazione. Proviamo a ripercorrere brevemente la sua storia:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>L&#8217;ipertesto \u00e8 un evoluzione tecnologia e teorica della scrittura: Dai primi pittogrammi nelle caverne ad oggi, la scrittura ha reso disponibili le informazioni che possono essere consultate anche a distanza di tempo. <\/li>\n\n\n\n<li>I libri sono un invenzione cruciale, in cui ogni informazione ha un ordine prestabilito e ogni pagina segue quella precedente. Con <em><strong>l&#8217;ipertesto <\/strong><\/em>si vuole superare questo concetto di ordine.<\/li>\n\n\n\n<li>La prima forma di <em><strong>ipertesto <\/strong><\/em>la si pu\u00f2 fare risalire ad <strong>Agostino Ramelli<\/strong>, progettista rinascimentale che, nella seconda met\u00e0 del 1500 ha ideato la <em>&#8220;ruota dei libri&#8221;<\/em>, con il quale si poteva passare da un libro all&#8217;altro in base alle informazioni che si volevano approfondire.<\/li>\n\n\n\n<li>Fu per\u00f2 <strong>Ted Nelson<\/strong>, che coni\u00f2 il termine <em><strong>hypertext <\/strong><\/em>molti secoli dopo, nel 1965. Egli defin\u00ec <em>ipertesto <\/em>qualsiasi sistema di scrittura non lineare che utilizza l&#8217;informatica.<\/li>\n\n\n\n<li>Nel 1989 <strong>Tim Berners-Lee<\/strong>, il ricercatore inglese del CERN che invent\u00f2 il <strong>World Wide Web<\/strong>, sfrutt\u00f2 il conetto di <em>hypertext <\/em>di <strong>Nelson <\/strong>per ideare un <em>sistema di condivisione di documenti ipertestuali<\/em>.<\/li>\n\n\n\n<li>Cos\u00ec, arriviamo allo sviluppo <em>dell&#8217;HTML<\/em>. Nel 1993, insieme al gruppo di lavoro dell&#8217;<em>Internet Engineering Task Force<\/em> (<strong>IETF<\/strong>) del CERN, chiamato <em>&#8220;Integration of Internet Information Resources&#8221;<\/em>, <strong>Berners-Lee<\/strong> insieme a <strong>Daniel Connolly<\/strong>, firmano la prima versione del <strong>HTML<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Da quel momento, per la prima volta una tecnologia permetteva alle persone di accedere ad informazioni in maniera arbitraria, passando da una pagina all&#8217;altra e senza un ordine prestabilito, cambiando di fatto il modo in cui pensiamo e ci rapportiamo con il sapere:.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Nel web, teoricamente, non c&#8217;\u00e8 qualcuno che sceglie con quale sequenza leggere le informazioni ma \u00e8 l&#8217;utente stesso che sceglie le informazioni da reperire e l&#8217;ordine da utilizzare.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lo_sviluppo_dei_browser\"><\/span>Lo sviluppo dei browser<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Come detto, per poter visualizzare una pagina web e interpretare il <strong>linguaggio HTML<\/strong>, \u00e8 necessario un particolare software chiamato <strong>browser<\/strong>. Fu lo stesso team di <strong>Berners-Lee <\/strong>ha sviluppare, nel 1990, il primo <strong>browser <\/strong>della storia, il <em>WorldWideWeb<\/em>, che per\u00f2 era riservato all&#8217;uso interno del CERN.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b8855845&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b8855845\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" width=\"960\" height=\"542\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/1397828296_mosaic.webp\" alt=\"\" class=\"wp-image-3149\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/1397828296_mosaic.webp 960w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/1397828296_mosaic-300x169.webp 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/1397828296_mosaic-768x434.webp 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/1397828296_mosaic-110x62.webp 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/1397828296_mosaic-420x237.webp 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/1397828296_mosaic-762x430.webp 762w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Circa tre anni dopo, il <em>National Center for Supercomputing Applications<\/em> (<strong>NCSA<\/strong>), all&#8217;<em>Universit\u00e0 dell&#8217;Illinois<\/em>, rese pubblica la prima versione del loro <strong>browser<\/strong> pubblico, il <em>Mosaic<\/em>. Molto popolare nella comunit\u00e0 scientifica, offriva un&#8217;interfaccia di facile utilizzo che contribu\u00ec alla sua diffusione, facendo impazzire il traffico web, che pass\u00f2 da soli 500 <strong>web server<\/strong> a oltre 10.000 in un solo anno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Negli anni successivi, le maggiori aziende di informatica svilupparono i loro <strong>browser<\/strong>, cos\u00ec in poco tempo si diffusero i celebri<em>&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Internet_Explorer\">Internet Explorer<\/a><\/em>, <em>Netscape<\/em>,<em> Safari<\/em>,<em> Opera <\/em>fino ai pi\u00f9 recenti <em>Mozilla Firefox<\/em>, <em>Google Chrome<\/em> e l&#8217;ultimo arrivato <em>Microsoft Edge<\/em>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b8855c29&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b8855c29\" class=\"wp-block-image aligncenter size-full is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"621\" height=\"200\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/browser2.jpg\" alt=\"\" class=\"wp-image-3151\" style=\"aspect-ratio:3.10509171952683;width:980px;height:auto\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/browser2.jpg 621w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/browser2-300x97.jpg 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/browser2-110x35.jpg 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/browser2-420x135.jpg 420w\" sizes=\"(max-width: 621px) 100vw, 621px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Come_funziona_lHTML\"><\/span>Come funziona l&#8217;HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ovviamente, in questo articolo ci limiteremo ad descrivere il funzionamento base del<strong> linguaggio HTML<\/strong>  ma se volete imparare il linguaggio e scoprire i segreti del coding vi suggerisco di consultare uno dei miei riferimenti preferiti &#8220;<a href=\"https:\/\/www.html.it\/\">HTML.it<\/a>&#8221; e tenere in casa libri come: &#8220;<em>HTML e CSS. Progettare e costruire siti web<\/em>&#8220;, di <strong>Jon Duckett<\/strong> &#8211; edizioni Wiley.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando parliamo di <em>HyperText Markup Language<\/em>, parliamo di un <em>&#8220;linguaggio di <strong>marcatura <\/strong>d&#8217;ipertesto&#8221;<\/em>. Questo vuol dire che l&#8217;HTML <strong>non \u00e8 un vero e proprio linguaggio di programmazione<\/strong>, come ad esempio il <em>C <\/em>o il <em>Basic<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>l&#8217;HTML <\/em>\u00e8, pi\u00f9 propriamente, un <strong>linguaggio di formattazione <\/strong>per marcatura, o <em><strong>markup<\/strong><\/em>, di dominio pubblico e, come tutti i linguaggi, regolato da un preciso <strong>codice <\/strong>e <strong>sintassi<\/strong>. Quest&#8217;ultimi<strong> <\/strong>vengono stabiliti e regolati dal <em>World Wide Web Consortium<\/em> (<strong><a href=\"https:\/\/www.w3.org\/\">W3C<\/a><\/strong>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I marcatori dell&#8217;HTML vengono rappresentati da una sequenza di caratteri detta <em>tag<\/em>, che per essere considerati validi dal browser devono essere racchiusi dalle due parentesi uncinate &#8220;&lt;>&#8221;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h6 class=\"wp-block-heading\">Esempio<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"testoprova\"&gt;Questo \u00e8 un testo di prova&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-verse\"><strong>Esempio di sintassi: <\/strong>stringa <strong>HTML<\/strong>, costituita dal <em>tag <\/em>\"div\", aperto tramite \"&lt;div&gt;\" al quale \u00e8 stato assegnato l'<em>attributo <\/em>\"id\" con <em>valore <\/em>\"testoprova\". Alla fine della stringa troviamo \"&lt;\/div&gt;\" rappresenta la chiusura del <em>tag <\/em>\"div\". All'interno del <em>tag <\/em>(tra l'apertura e la chiusura), c'\u00e8 il contenuto che verr\u00e0 mostrato a schermo dal browser \"<strong>Questo \u00e8 un testo di prova<\/strong>\".<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Non essendo un linguaggio di programmazione, l&#8217;HTML non prevede alcuna <strong>struttura dati<\/strong>, <strong>funzioni <\/strong>o <strong>strutture di controllo<\/strong>, il suo codice \u00e8 in grado soltanto di strutturare e stilizzare dati testuali. Tuttavia, esso ha il grande &#8220;potere&#8221; di integrare <em>script<\/em> e collegarsi a file esterni o includere elementi multimediali (quali immagini, video e audio) rendendo possibile la creazione di pagine interattive, complesse e visivamente pensate per una navigazione gradevole e un&#8217;esperienza utente completa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Caratteristiche_di_un_documento_HTML\"><\/span>Caratteristiche di un documento HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La &#8220;lettura&#8221; di un <strong>documento HTML<\/strong> segue le logiche della scrittura occidentale latina. Tali documenti hanno quindi le seguenti caratteristiche:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Il verso<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Sembra banale ma per per chi si occupa di programmazione vi assicuro che non lo \u00e8 affatto: Come in un tradizionale file di testo, se un <em>tag <\/em>nel codice \u00e8 scritto prima apparir\u00e0 per primo nella pagina, se \u00e8 scritto dopo apparir\u00e0 dopo. Semplice no? Seguendo il verso di lettura da sinistra verso destra e dall&#8217;alto verso il basso.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h6 class=\"wp-block-heading\">Esempio<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Primo Elemento&lt;\/p&gt;&lt;p&gt;Secondo Elemento&lt;\/p&gt;&lt;p&gt;Terzo Elemento&lt;\/p&gt;&lt;p&gt;Quarto Elemento&lt;\/p&gt;&lt;p&gt;Quinto Elemento&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-verse\">Il codice nell'esempio verr\u00e0 mostrato cos\u00ec:<\/pre>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b885642e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b885642e\" class=\"wp-block-image size-full is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"168\" height=\"168\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/image-3-edited-1.png\" alt=\"\" class=\"wp-image-3210\" style=\"width:265px;height:auto\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/image-3-edited-1.png 168w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/image-3-edited-1-150x150.png 150w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/image-3-edited-1-125x125.png 125w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/image-3-edited-1-110x110.png 110w\" sizes=\"(max-width: 168px) 100vw, 168px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. La gerarchia<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Se un elemento nel codice \u00e8 ramificato in un altro, cio\u00e8 se un <em>tag <\/em>si trova ad esempio tra l&#8217;apertura e la chiusura di un altro <em>tag<\/em>, egli verr\u00e0 tendenzialmente rappresentato all&#8217;interno dell&#8217;elemento genitore. I <em>tag <\/em>possono essere viste come delle scatole, che contengono altre scatole, che contengono a loro volta altri elementi.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h6 class=\"wp-block-heading\">Esempio<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"border: solid 1px #000;\"&gt;\nPrimo Elemento\n&lt;div style=\"border: solid 1px #000; margin:5px;\"&gt;\nSecondo Elemento\n&lt;div style=\"border: solid 1px #000; margin:5px;\"&gt;\nTerzo Elemento&lt;p&gt;Quarto Elemento&lt;\/p&gt;&lt;p&gt;Quinto Elemento&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-verse\">In questo esempio, il secondo elemento \u00e8 all'interno del primo (tra l'apertura e la chiusura). Il terzo \u00e8 all'interno del secondo. Il quarti e il quinto sono allo stesso livello all'interno del terzo. I primi tre <em>tag <\/em>\"div\" hanno l'attributo \"<em>style<\/em>\" con una regola che gestisce l'aspetto del bordo del contenitore. Questo codice verr\u00e0 interpretato dal browser cos\u00ec:<\/pre>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b88568b1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b88568b1\" class=\"wp-block-image size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"343\" height=\"229\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/image-4-edited.png\" alt=\"\" class=\"wp-image-3213\" style=\"width:530px;height:auto\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/image-4-edited.png 343w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/image-4-edited-300x200.png 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/image-4-edited-110x73.png 110w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Struttura_di_un_documento_HTML\"><\/span>Struttura di un documento HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un documento HTML \u00e8 anche caratterizzato da una struttura. Essa viene utilizzata per convenzione e definita come detto dalla <a href=\"https:\/\/www.w3.org\/\">W3C<\/a>. Tale struttura prevede tue macro sezioni, <strong>tag della head<\/strong> e <strong>tag del body<\/strong>, in cui inserire rispettivamente informazioni relative al documento stesso (principalmente <em>metadata <\/em>e <em>script <\/em>non html) e i <em>tag<\/em> che rappresentano il contenuto del documento. Tali tag struttutali vanno sempre messi all&#8217;interno al tag che informa il browser del tipo di documento, in questo caso: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>&lt;html&gt;&#91;...]&lt;\/html&gt;<\/em><\/code><\/pre>\n\n\n\n<h4 id=\"Tag_della_head\" class=\"wp-block-heading\">Tag della&nbsp;<em>head<\/em><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">La sezione <strong>head <\/strong>si inserisce, con <em>tag <\/em>&#8220;<em>head<\/em>&#8220;, subito dopo il <em>tag <\/em>di apertura &#8220;<em>html<\/em>&#8220;. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;head&gt;&#91;...]&lt;\/head&gt;\n&#91;...]\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I <em>tag <\/em>utilizzati nella sezione&nbsp;<em>head<\/em>&nbsp;non vengono visualizzati dal browser ma servono come informazioni di servizio quali:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>metadata<\/em>&nbsp;per indicare informazioni utili al browser (es. codifica dei caratteri, tipo di alfabeto, tipo di documento)<\/li>\n\n\n\n<li><em>matadata <\/em>per il titolo, la descrizione e le parole chiavi associate alla pagina.<\/li>\n\n\n\n<li><em>metadata<\/em>&nbsp;di tipo&nbsp;<em>http-equiv<\/em>&nbsp;per controllare informazioni aggiuntive nel protocollo&nbsp;<em>HTTP<\/em><\/li>\n\n\n\n<li>collegamenti verso file di risorse esterne (fogli di stile <em>CSS<\/em>, icone visualizzabili nella barra degli indirizzi del browser)<\/li>\n\n\n\n<li>inserimento di&nbsp;<a href=\"https:\/\/it.wikipedia.org\/wiki\/Script\">script<\/a>&nbsp;(codice eseguibile), non html, utilizzati dal documento<\/li>\n\n\n\n<li>informazioni di stile (<em>CSS <\/em>locali)<\/li>\n<\/ul>\n\n\n\n<h4 id=\"Tag_del_body\" class=\"wp-block-heading\">Tag del&nbsp;<em>body<\/em><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">La sezione <strong>body <\/strong>si inserisce, con <em>tag <\/em>&#8220;<em>body<\/em>&#8220;, dopo la chiusura del <em>tag <\/em>&#8220;<em>head<\/em>&#8220;. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;head&gt;&#91;...]&lt;\/head&gt;\n&lt;body&gt;&#91;...]&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">All&#8217;interno della sezione di&nbsp;<em>body<\/em>, si utilizzano i tag specifici previsti per la&nbsp;formattazione&nbsp;dei contenuti, quindi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>testo (quindi titoli, testo indentato, paragrafi)<\/li>\n\n\n\n<li>aspetto del testo (come grassetto e corsivo)<\/li>\n\n\n\n<li>elenchi e liste (numerate, generiche, di definizione)<\/li>\n\n\n\n<li>tabelle<\/li>\n\n\n\n<li>moduli elettronici&nbsp;(campi compilabili, campi selezionabili, menu a tendina e pulsanti)<\/li>\n\n\n\n<li>collegamenti ipertestuali&nbsp;e&nbsp;ancore<\/li>\n\n\n\n<li>inserimento di immagini e contenuti&nbsp;multimediali<\/li>\n\n\n\n<li>contenuti&nbsp;interattivi&nbsp;(script, applicazioni esterne)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">All&#8217;interno del body, si pu\u00f2 creare, attraverso i tag, il layout della nostra <strong>pagina web<\/strong> anch&#8217;essa con una struttura convenzionale che <a href=\"https:\/\/www.robertomaiolino.it\/blografik\/2021\/07\/08\/la-struttura-di-una-pagina-web\/\">potete approfondire in questo articolo<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Associazione_con_il_CSS\"><\/span>Associazione con il CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b8857164&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b8857164\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"579\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/site-html-css-1024x579-1.jpg\" alt=\"\" class=\"wp-image-3158\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/site-html-css-1024x579-1.jpg 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/site-html-css-1024x579-1-300x170.jpg 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/site-html-css-1024x579-1-768x434.jpg 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/site-html-css-1024x579-1-110x62.jpg 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/site-html-css-1024x579-1-420x237.jpg 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/site-html-css-1024x579-1-760x430.jpg 760w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Marchi CSS3 e HTML5<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Dopo i primi anni di diffusione del web, nacque la necessit\u00e0 di migliorare l&#8217;aspetto visivo delle pagine, per superare la struttura rigida e tabellare <em>dell&#8217;HTML <\/em>e ampliare le possibilit\u00e0 creative. Per questo motivo furono ideati i cos\u00ec detti<strong> &#8220;fogli di stile<\/strong>&#8220;. Tali documenti possono essere associati ad un <strong>documento HTML <\/strong>per descrivere l&#8217;aspetto dei vari elementi della pagina, attraverso il linguaggio <strong><em>CSS<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Oggi l&#8217;accoppiata <em><strong>HTML\/CSS<\/strong><\/em> rappresenta uno standard imprescindibile per la creazione di pagine e siti web, anche perch\u00e9 pi\u00f9 file <strong>HTML <\/strong>possono essere associati ad un singolo documento <strong>CSS <\/strong>cos\u00ec da avere uno stile coordinato e uniformare le singole pagine di un <strong>sito web<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b8857528&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b8857528\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"797\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-1024x797.png\" alt=\"struttura HTML\/CSS\" class=\"wp-image-2656\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-1024x797.png 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-300x233.png 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-768x598.png 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-1536x1195.png 1536w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-110x86.png 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-420x327.png 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-553x430.png 553w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3.png 1664w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusione\"><\/span>Conclusione<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il <strong>linguaggio HTML<\/strong> ha rappresentato una rivoluzione nello scambio di informazioni in rete e rappresenta ancora oggi un fondamentale strumento per la creazione di siti internet e applicazioni browser. Con la crescente necessit\u00e0 di sfruttare il web per la comunicazione, sono state sviluppate versioni HTML e CSS sempre pi\u00f9 efficaci e flessibili, portando il mondo del <em>web design<\/em> a risultati impensabili fino a soli 20 anni fa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Oggi, grazie <strong>all&#8217;HTML5 <\/strong>e al <strong>CSS3, <\/strong>si possono creare siti internet personalizzati, facilmente navigabili e adattabili ad ogni dispositivo e schermo dell&#8217;utente. Proprio pe questo, nel <a href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/23\/web-design-nozioni-base-css\/\">prossimo articolo<\/a> ci occuperemo del fedele compagno del <strong>HTML<\/strong>, il <strong>CSS<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nel precedente articolo di questa rubrica abbiamo introdotto i concetti base del web (protocolli HTTP, differenza tra internet e web, sistema client-server). In questo articolo, invece, entreremo nello specifico e parleremo di HTML, cercando di capire cos&#8217;\u00e8 una Pagina HTML e come funziona il linguaggio con il quale viene &#8220;scritta&#8221;. Cos&#8217;\u00e8 l&#8217;HTML Innanzitutto, diciamo che [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3172,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,2],"tags":[569,571,157,156,232,570,568,164,79],"class_list":["post-3137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html_css","category-webdesign","tag-coding","tag-collegamento-ipertestuale","tag-css","tag-html","tag-internet","tag-ipertesto","tag-sviluppo","tag-web","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web design \u2013 Nozioni base: HTML - BloGrafik<\/title>\n<meta name=\"description\" content=\"Parleremo di HTML, cercando di capire cos&#039;\u00e8 una Pagina HTML e come funziona il linguaggio con il quale viene &quot;scritta&quot;.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web design \u2013 Nozioni base: HTML - BloGrafik\" \/>\n<meta property=\"og:description\" content=\"Parleremo di HTML, cercando di capire cos&#039;\u00e8 una Pagina HTML e come funziona il linguaggio con il quale viene &quot;scritta&quot;.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/\" \/>\n<meta property=\"og:site_name\" content=\"BloGrafik\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/robertomaiolinodesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-21T09:24:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-04T10:16:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"648\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Roberto Maiolino\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Roberto_RMD\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roberto Maiolino\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/\"},\"author\":{\"name\":\"Roberto Maiolino\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/person\\\/c71e1a677856d2fe685162286d1d3719\"},\"headline\":\"Web design \u2013 Nozioni base: HTML\",\"datePublished\":\"2024-09-21T09:24:00+00:00\",\"dateModified\":\"2026-06-04T10:16:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/\"},\"wordCount\":1765,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/HTML-logo.jpg\",\"keywords\":[\"coding\",\"collegamento ipertestuale\",\"css\",\"html\",\"internet\",\"ipertesto\",\"sviluppo\",\"web\",\"web design\"],\"articleSection\":[\"HTML &amp; CSS\",\"Web Design\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/\",\"name\":\"Web design \u2013 Nozioni base: HTML - BloGrafik\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/HTML-logo.jpg\",\"datePublished\":\"2024-09-21T09:24:00+00:00\",\"dateModified\":\"2026-06-04T10:16:32+00:00\",\"description\":\"Parleremo di HTML, cercando di capire cos'\u00e8 una Pagina HTML e come funziona il linguaggio con il quale viene \\\"scritta\\\".\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/HTML-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/HTML-logo.jpg\",\"width\":1080,\"height\":648},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/09\\\/21\\\/web-design-nozioni-base-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web design \u2013 Nozioni base: HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#website\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/\",\"name\":\"BloGrafik\",\"description\":\"Il blog di Roberto Maiolino\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#organization\",\"name\":\"BloGrafik\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Testata_blografik@2x.png\",\"contentUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Testata_blografik@2x.png\",\"width\":1265,\"height\":196,\"caption\":\"BloGrafik\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/person\\\/c71e1a677856d2fe685162286d1d3719\",\"name\":\"Roberto Maiolino\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro\",\"caption\":\"Roberto Maiolino\"},\"description\":\"Formazione professionale da graphic designer, lavoro nel settore nel marketing tradizionale e digitale. Una figura unica per la grafica, la comunicazione e l\u2019advertising. Da anni lavoro per le aziende sul territorio nazionale e per le agenzie di comunicazione del Trentino-Alto Adige. www.robertomaiolino.it\",\"sameAs\":[\"https:\\\/\\\/www.robertomaiolino.it\",\"https:\\\/\\\/www.facebook.com\\\/robertomaiolinodesign\\\/\",\"www.linkedin.com\\\/in\\\/roberto-maiolino-81a209a5\",\"https:\\\/\\\/x.com\\\/Roberto_RMD\"],\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/author\\\/roberto-maiolino\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web design \u2013 Nozioni base: HTML - BloGrafik","description":"Parleremo di HTML, cercando di capire cos'\u00e8 una Pagina HTML e come funziona il linguaggio con il quale viene \"scritta\".","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/","og_locale":"it_IT","og_type":"article","og_title":"Web design \u2013 Nozioni base: HTML - BloGrafik","og_description":"Parleremo di HTML, cercando di capire cos'\u00e8 una Pagina HTML e come funziona il linguaggio con il quale viene \"scritta\".","og_url":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/","og_site_name":"BloGrafik","article_author":"https:\/\/www.facebook.com\/robertomaiolinodesign\/","article_published_time":"2024-09-21T09:24:00+00:00","article_modified_time":"2026-06-04T10:16:32+00:00","og_image":[{"width":1080,"height":648,"url":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo.jpg","type":"image\/jpeg"}],"author":"Roberto Maiolino","twitter_card":"summary_large_image","twitter_creator":"@Roberto_RMD","twitter_misc":{"Scritto da":"Roberto Maiolino","Tempo di lettura stimato":"11 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#article","isPartOf":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/"},"author":{"name":"Roberto Maiolino","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/person\/c71e1a677856d2fe685162286d1d3719"},"headline":"Web design \u2013 Nozioni base: HTML","datePublished":"2024-09-21T09:24:00+00:00","dateModified":"2026-06-04T10:16:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/"},"wordCount":1765,"commentCount":0,"publisher":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#organization"},"image":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo.jpg","keywords":["coding","collegamento ipertestuale","css","html","internet","ipertesto","sviluppo","web","web design"],"articleSection":["HTML &amp; CSS","Web Design"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/","url":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/","name":"Web design \u2013 Nozioni base: HTML - BloGrafik","isPartOf":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#primaryimage"},"image":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo.jpg","datePublished":"2024-09-21T09:24:00+00:00","dateModified":"2026-06-04T10:16:32+00:00","description":"Parleremo di HTML, cercando di capire cos'\u00e8 una Pagina HTML e come funziona il linguaggio con il quale viene \"scritta\".","breadcrumb":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#primaryimage","url":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo.jpg","contentUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/09\/HTML-logo.jpg","width":1080,"height":648},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertomaiolino.it\/blografik\/"},{"@type":"ListItem","position":2,"name":"Web design \u2013 Nozioni base: HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#website","url":"https:\/\/www.robertomaiolino.it\/blografik\/","name":"BloGrafik","description":"Il blog di Roberto Maiolino","publisher":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robertomaiolino.it\/blografik\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#organization","name":"BloGrafik","url":"https:\/\/www.robertomaiolino.it\/blografik\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/logo\/image\/","url":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/Testata_blografik@2x.png","contentUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/Testata_blografik@2x.png","width":1265,"height":196,"caption":"BloGrafik"},"image":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/person\/c71e1a677856d2fe685162286d1d3719","name":"Roberto Maiolino","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro","url":"https:\/\/secure.gravatar.com\/avatar\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro","caption":"Roberto Maiolino"},"description":"Formazione professionale da graphic designer, lavoro nel settore nel marketing tradizionale e digitale. Una figura unica per la grafica, la comunicazione e l\u2019advertising. Da anni lavoro per le aziende sul territorio nazionale e per le agenzie di comunicazione del Trentino-Alto Adige. www.robertomaiolino.it","sameAs":["https:\/\/www.robertomaiolino.it","https:\/\/www.facebook.com\/robertomaiolinodesign\/","www.linkedin.com\/in\/roberto-maiolino-81a209a5","https:\/\/x.com\/Roberto_RMD"],"url":"https:\/\/www.robertomaiolino.it\/blografik\/author\/roberto-maiolino\/"}]}},"_links":{"self":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts\/3137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/comments?post=3137"}],"version-history":[{"count":40,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts\/3137\/revisions"}],"predecessor-version":[{"id":4793,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts\/3137\/revisions\/4793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/media\/3172"}],"wp:attachment":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/media?parent=3137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/categories?post=3137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/tags?post=3137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}