Passo 1: Inizia con la Struttura di Base Ogni pagina HTML deve iniziare con la struttura di base dell'HTML. Di seguito è riportato un esempio di un codice HTML molto semplice che puoi utilizzare come riferimento:
>
<html>
<head>
<title>Il mio primo sitotitle>
head>
<body>
<h1>Benvenuto sul mio sito!h1>
<p>Questo è un paragrafo di testo.p>
body>
html>
: Racchiude tutto il codice della tua pagina web.: Contiene metadati e link a fogli di stile CSS o script JavaScript.</code>: Imposta il titolo della tua pagina web che appare nella scheda del browser.</li> <li><code></code>: Contiene tutto il contenuto visibile della tua pagina web.</li> </ul> <p>Visita <a target="_blank" rel="noopener noreferrer" href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_document">W3Schools</a> per vedere un esempio vivo.</p> <p><strong>Passo 2</strong>: Aggiungi Paragrafi e Intestazioni Il tag <code><p></code> si utilizza per creare paragrafi, mentre i tag <code><h1></code>, <code><h2></code>, <code><h3></code>, ecc., servono per creare intestazioni.</p> <div class="bg-black rounded-md mb-4"> <div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div> <div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Questo è un titolo<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Questo è un paragrafo di testo semplice.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </code></div> </div> <p>Verifica il tuo codice su <a target="_blank" rel="noopener noreferrer" href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1">W3Schools</a>.</p> <p><strong>Passo 3</strong>: Aggiungere Immagini Per aggiungere un'immagine, utilizza il tag <code><img loading="lazy" alt=""></code> e imposta l'attributo <code>src</code> con il percorso dell'immagine.</p> <div class="bg-black rounded-md mb-4"> <div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div> <div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"percorso/della/tua/immagine.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Descrizione dell'immagine"</span>></span> </code></div> </div> <p>Guarda un esempio su <a target="_blank" rel="noopener noreferrer" href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images1">W3Schools</a>.</p> <p><strong>Passo 4</strong>: Creare Collegamenti Per creare un collegamento, utilizza il tag <code><a></code> e l'attributo <code>href</code> per indicare l'indirizzo web di destinazione.</p> <div class="bg-black rounded-md mb-4"> <div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div> <div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.esempio.com"</span>></span>Visita il nostro sito<span class="hljs-tag"></<span class="hljs-name">a</span>></span> </code></div> </div> <p>Prova a creare un link su <a target="_blank" rel="noopener noreferrer" href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links">W3Schools</a>.</p> <h2>Guida 2: Creare una lista in HTML</h2> <p><strong>Passo 1</strong>: Creare una Lista Non Ordinata Le liste non ordinate si creano utilizzando il tag <code><ul></code> e ogni elemento della lista si segna con il tag <code><li></code>.</p> <div class="bg-black rounded-md mb-4"> <div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div> <div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Elemento 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Elemento 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Elemento 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> </code></div> </div> <p>Un esempio è disponibile su <a target="_blank" rel="noopener noreferrer" href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_list_test">W3Schools</a>.</p> <p><strong>Passo 2</strong>: Creare una Lista Ordinata Le liste ordinate utilizzano il tag <code><ol></code> al posto di <code><ul></code>.</p> <div class="bg-black rounded-md mb-4"> <div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div> <div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Elemento 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Elemento 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Elemento 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ol</span>></span> </code></div> </div> <p>Visualizza un esempio su <a target="_blank" rel="noopener noreferrer" href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists2">W3Schools</a>.</p> <p>Queste sono due guide di base per chi inizia a lavorare con l'HTML. Le guide possono essere espanse con ulteriori informazioni su argomenti come tabelle, form, iframe, e molti altri elementi HTML. Assicurati di includere i link a W3Schools o ad altri strumenti interattivi per permettere ai tuoi utenti di sperimentare con il codice in tempo reale!</p> </div> <h4 class="tw-font-medium tw-text-lg tw-mt-6"> Hai trovato utile quest'articolo? </h4> <div class="answer_response tw-mb-2 tw-text-neutral-500"></div> <div class="btn-group article_useful_buttons" role="group"> <button type="button" data-answer="1" class="btn btn-success"> Si </button> <input type="hidden" name="articleid" value="1094"> <button type="button" data-answer="0" class="btn btn-danger"> No </button> </div> </div> </div> </div> <div class="col-md-4"> <h4 class="kb-related-heading tw-font-semibold tw-text-lg tw-text-neutral-700 tw-mt-0 tw-my-0"> Articoli Correlati </h4> <ul class="articles_list tw-divide-y tw-divide-neutral-200 tw-divide-solid tw-space-y-3"> <li class="tw-pt-3"> <h4 class="article-heading article-related-heading tw-text-normal tw-font-medium tw-my-0"> <a href="https://crm.gtechgroup.it/knowledge-base/article/come-creare-un-redirect-in-html" class="tw-text-neutral-700 hover:tw-text-neutral-900 active:tw-text-neutral-900"> Come Creare un Redirect in Html </a> </h4> <div class="tw-text-neutral-500"> Come creare un redirect in HTML Un redirect HTML è un metodo per indirizzare automaticamente i visit... </div> </li> <li class="tw-pt-3"> <h4 class="article-heading article-related-heading tw-text-normal tw-font-medium tw-my-0"> <a href="https://crm.gtechgroup.it/knowledge-base/article/come-creare-una-tabella-in-html" class="tw-text-neutral-700 hover:tw-text-neutral-900 active:tw-text-neutral-900"> Come Creare una Tabella in Html ? </a> </h4> <div class="tw-text-neutral-500"> Come creare una tabella in HTML ? Creare tabelle in HTML può sembrare complicato, ma seguendo questi... </div> </li> <li class="tw-pt-3"> <h4 class="article-heading article-related-heading tw-text-normal tw-font-medium tw-my-0"> <a href="https://crm.gtechgroup.it/knowledge-base/article/come-creare-un-modulo-di-contatto-in-html" class="tw-text-neutral-700 hover:tw-text-neutral-900 active:tw-text-neutral-900"> Come Creare un Modulo di Contatto in Html ? </a> </h4> <div class="tw-text-neutral-500"> Come creare un Modulo di Contatto in HTML ? Creare un modulo di contatto è fondamentale per ogni sit... </div> </li> <li class="tw-pt-3"> <h4 class="article-heading article-related-heading tw-text-normal tw-font-medium tw-my-0"> <a href="https://crm.gtechgroup.it/knowledge-base/article/introduzione-agli-elementi-semantici-in-html5" class="tw-text-neutral-700 hover:tw-text-neutral-900 active:tw-text-neutral-900"> Introduzione agli Elementi Semantici in Html5 </a> </h4> <div class="tw-text-neutral-500"> Introduzione agli Elementi Semantici in HTML5 Gli elementi semantici di HTML5 forniscono un modo per... </div> </li> <li class="tw-pt-3"> <h4 class="article-heading article-related-heading tw-text-normal tw-font-medium tw-my-0"> <a href="https://crm.gtechgroup.it/knowledge-base/article/come-incorporare-video-e-audio-in-html5" class="tw-text-neutral-700 hover:tw-text-neutral-900 active:tw-text-neutral-900"> Come Incorporare Video e Audio in Html5 </a> </h4> <div class="tw-text-neutral-500"> Come Incorporare Video e Audio in HTML5 Con l'evoluzione di HTML5, incorporare contenuti multimedial... </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <span class="copyright-footer">2026 Copyright G Tech Group S.R.L.S. </span> - <a href="https://crm.gtechgroup.it/terms-and-conditions" class="terms-and-conditions-footer"> Termini & Condizioni </a> </div> </div> </div> </footer><script type="text/javascript" id="bootstrap-js" src="https://crm.gtechgroup.it/assets/plugins/bootstrap/js/bootstrap.min.js?v=3.3.0"></script> <script type="text/javascript" id="datatables-js" src="https://crm.gtechgroup.it/assets/plugins/datatables/datatables.min.js?v=3.3.0"></script> <script type="text/javascript" id="jquery-validation-js" src="https://crm.gtechgroup.it/assets/plugins/jquery-validation/jquery.validate.min.js?v=3.3.0"></script> <script type="text/javascript" id="jquery-validation-lang-js" src="https://crm.gtechgroup.it/assets/plugins/jquery-validation/localization/messages_it.min.js?v=3.3.0"></script> <script type="text/javascript" id="bootstrap-select-js" src="https://crm.gtechgroup.it/assets/builds/bootstrap-select.min.js?v=3.3.0"></script> <script type="text/javascript" id="bootstrap-select-lang-js" src="https://crm.gtechgroup.it/assets/plugins/bootstrap-select/js/i18n/defaults-it_IT.min.js?v=3.3.0"></script> <script type="text/javascript" id="datetimepicker-js" src="https://crm.gtechgroup.it/assets/plugins/datetimepicker/jquery.datetimepicker.full.min.js?v=3.3.0"></script> <script type="text/javascript" id="chart-js" src="https://crm.gtechgroup.it/assets/plugins/Chart.js/Chart.min.js?v=3.3.0"></script> <script type="text/javascript" id="colorpicker-js" src="https://crm.gtechgroup.it/assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js?v=3.3.0"></script> <script type="text/javascript" id="lightbox-js" src="https://crm.gtechgroup.it/assets/plugins/lightbox/js/lightbox.min.js?v=3.3.0"></script> <script type="text/javascript" id="common-js" src="https://crm.gtechgroup.it/assets/builds/common.js?v=3.3.0"></script> <script type="text/javascript" id="theme-global-js" src="https://crm.gtechgroup.it/assets/themes/perfex/js/global.min.js?v=3.3.0"></script> <script type="text/javascript" id="whm-js" src="https://crm.gtechgroup.it/modules/whm/assets/js/client.js"></script> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MFMDVVK');</script> <!-- End Google Tag Manager --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MFMDVVK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <!-- Pixel Code - https://analytics.gtechgroup.it/ --> <script defer src="https://analytics.gtechgroup.it/pixel/Pfg5aDR8ILzlagsc"></script> <!-- END Pixel Code --> </body> </html>