{"id":2234,"date":"2024-07-17T06:22:46","date_gmt":"2024-07-17T06:22:46","guid":{"rendered":"\/tutorial\/?p=2234"},"modified":"2025-12-18T13:24:17","modified_gmt":"2025-12-18T13:24:17","slug":"realizzazione-di-un-sito-web-con-html","status":"publish","type":"post","link":"\/it\/tutorial\/realizzazione-di-un-sito-web-con-html\/","title":{"rendered":"Realizzare un sito web con HTML in 8 semplici passaggi + suggerimenti post sviluppo"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Costruire un sito web oggi &egrave; semplice e non richiede conoscenze di programmazione. Piattaforme come il <strong>creatore di siti web<\/strong> di Hostinger offrono un&rsquo;interfaccia visiva semplice e funzionalit&agrave; drag and drop per semplificare il processo di sviluppo.<\/p><p class=\"wp-block-paragraph\">Tuttavia, potresti voler costruire siti web da zero con Hypertext Markup Language (HTML). Sebbene sia pi&ugrave; difficile, i siti web HTML sono pi&ugrave; flessibili e veloci in quanto richiedono meno risorse per funzionare.<\/p><p class=\"wp-block-paragraph\">Per aiutarti a iniziare, questo articolo spiegher&agrave; i passaggi per realizzare un sito web con HTML. Ti forniremo anche pratiche post-sviluppo per migliorare l&rsquo;aspetto e la funzionalit&agrave; del tuo sito HTML.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-come-realizzare-un-sito-web-con-html\"><strong>Come realizzare un sito web con HTML<\/strong><\/h2><p class=\"wp-block-paragraph\">Questa sezione fornir&agrave; istruzioni passo per passo per programmare un sito con HTML. Prima di procedere, consulta la nostra scheda informativa sull&rsquo;HTML se non sei familiare con il linguaggio di markup standard. Non esitare a consultare la nostra guida su le basi della creazione di un sito per acquisite ancora pi&ugrave; familiarit&agrave;.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-scegli-un-editor-di-codice-html\"><strong>1. Scegli un editor di codice HTML<\/strong><\/h3><p class=\"wp-block-paragraph\">Un editor di codice &egrave; un software utilizzato per scrivere il tuo sito web. Sebbene tu possa creare una pagina HTML con un editor di testo predefinito come Notepad, manca di funzionalit&agrave; che aiutano a semplificare il processo di sviluppo, come:<\/p><ul class=\"wp-block-list\">\n<li><strong>Evidenziazione della sintassi <\/strong>: contrassegna i tag HTML in diversi colori in base alle loro categorie. Questo rende la struttura del codice pi&ugrave; facile da leggere e capire.<\/li>\n\n\n\n<li><strong>Completamento automatico <\/strong>: suggerisce automaticamente attributi, tag ed elementi HTML basati sul valore precedente per velocizzare il processo di programmazione.<\/li>\n\n\n\n<li><strong>Rilevamento degli errori <\/strong>: evidenzia gli errori di sintassi, permettendo a uno sviluppatore web di notarli e correggerli rapidamente.<\/li>\n\n\n\n<li><strong>Integrazione <\/strong>: alcuni editor di codice si integrano con plugin, Git e client FTP per rendere il processo di distribuzione pi&ugrave; efficiente.<\/li>\n\n\n\n<li><strong>Anteprima dal vivo<\/strong>: invece di aprire manualmente i file HTML sui browser, puoi installare un plugin per ottenere un&rsquo;anteprima dal vivo del sito.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a701054a2680\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a701054a2680\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"527\" 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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/Live-preview-feature-in-Visual-Studio-Code-1024x527-1.png\/public\" alt=\"Funzione di anteprima dal vivo in Visual Studio Code\" class=\"wp-image-2236\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/Live-preview-feature-in-Visual-Studio-Code-1024x527-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/Live-preview-feature-in-Visual-Studio-Code-1024x527-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/Live-preview-feature-in-Visual-Studio-Code-1024x527-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Poich&eacute; ci sono molte opzioni, abbiamo elencato alcuni dei migliori editor di codice HTML per aiutarti a trovare quello che si adatta alle tue esigenze:<\/p><ul class=\"wp-block-list\">\n<li><strong>Notepad++ <\/strong>: un editor di testo gratuito e leggero con funzionalit&agrave; aggiuntive per la programmazione e il supporto dei plugin.<\/li>\n\n\n\n<li><strong>Atom <\/strong>: un editor HTML open-source con una funzione di anteprima del sito web dal vivo e una vasta compatibilit&agrave; con i linguaggi di markup e di scripting.<\/li>\n\n\n\n<li><strong>Visual Studio Code (VSCode) <\/strong>: uno strumento popolare per lo sviluppo web con una vasta libreria di estensioni per espandere le sue funzionalit&agrave;.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-2-pianifica-la-struttura-del-sito\"><strong>2. Pianifica la struttura del sito<\/strong><\/h3><p class=\"wp-block-paragraph\">Creare un piano di layout ti permette di visualizzare meglio l&rsquo;aspetto del tuo sito web. Puoi anche usarlo come una lista di controllo per tenere traccia di quali elementi includere nel tuo sito.<\/p><p class=\"wp-block-paragraph\">Inoltre, un piano di layout ti aiuta a determinare l&rsquo;usabilit&agrave; e la navigazione del tuo sito, che influenzano l&rsquo;esperienza dell&rsquo;utente. Alcuni elementi da considerare durante la pianificazione includono l&rsquo;intestazione, il pi&egrave; di pagina e la navigazione dei siti.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a701054a397d\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a701054a397d\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"407\" 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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-rough-website-layout-plan-1024x407-1.png\/public\" alt=\"Un piano di layout approssimativo del sito web\" class=\"wp-image-2238\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-rough-website-layout-plan-1024x407-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-rough-website-layout-plan-1024x407-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-rough-website-layout-plan-1024x407-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Puoi utilizzare penna e carta o software di progettazione web come<a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\"> <strong>Figma<\/strong><\/a> per progettare un layout di un sito web. Non deve essere dettagliato finch&eacute; rappresenta approssimativamente l&rsquo;aspetto e l&rsquo;idea del tuo sito.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-scrivi-il-codice-html\"><strong>3. Scrivi il codice HTML<\/strong><\/h3><p class=\"wp-block-paragraph\">Una volta che lo strumento e il piano di layout sono pronti, puoi iniziare a scrivere il codice del tuo sito. I passaggi possono variare a seconda del tuo editor di codice, ma l&rsquo;idea generale &egrave; simile.<\/p><p class=\"wp-block-paragraph\">In questa guida, ti mostreremo come farlo utilizzando <strong>VSCode<\/strong>:<\/p><ol class=\"wp-block-list\">\n<li>Crea una nuova cartella sul tuo computer. Sar&agrave; la directory per tutti i file del tuo sito.<\/li>\n\n\n\n<li>Apri VSCode &rarr; <strong>File<\/strong> &rarr; <strong>Apri cartella<\/strong>.<\/li>\n\n\n\n<li>Trova la nuova cartella e fai clic su <strong>Seleziona cartella<\/strong>.<\/li>\n\n\n\n<li>Seleziona <strong>Nuovo file<\/strong>. Nomina il file <strong>index.html<\/strong> e premi <strong>invio<\/strong>.<\/li>\n\n\n\n<li>Clicca <strong>Crea file <\/strong>per confermare.<\/li>\n\n\n\n<li>Una volta richiamato alla scheda dell&rsquo;editor <strong>index.html<\/strong>, inserisci la seguente struttura di base del documento HTML:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br><br>&lt;html&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;head&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; &lt;\/title&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;\/head&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;body&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;\/body&gt;<br><br>&lt;\/html&gt;<\/pre><p class=\"wp-block-paragraph\">Per aiutarti a capire il codice, ecco una spiegazione di ogni tag:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;!DOCTYPE html&gt; <\/strong>: dice ai browser web che il sito web &egrave; una pagina HTML.<\/li>\n\n\n\n<li><strong>&lt;\/html&gt;<\/strong>: il tag di apertura del documento HTML che indica dove inizia il codice.<\/li>\n\n\n\n<li><strong>&lt;head&gt; <\/strong>: un tag che contiene i metadati del sito.<\/li>\n\n\n\n<li><strong>&lt;title&gt;<\/strong>: definisce il testo mostrato sulla scheda del browser quando si visita la pagina web.<\/li>\n\n\n\n<li><strong>&lt;body&gt;<\/strong>: contiene tutto il contenuto visibile sulla pagina web.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-4-crea-elementi-nel-layout\"><strong>4. Crea elementi nel layout<\/strong><\/h3><p class=\"wp-block-paragraph\">Aggiungi il codice HTML nel file <strong>index.html <\/strong>per creare gli elementi del layout previsto. A seconda del design del tuo sito web, avrai bisogno di diversi elementi semantici HTML.<\/p><p class=\"wp-block-paragraph\">Questi elementi divideranno il tuo sito in diverse sezioni e diventeranno i container per il contenuto. Ecco le etichette che utilizzeremo:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;header&gt; <\/strong>: container per contenuti introduttivi o navigazione.<\/li>\n\n\n\n<li><strong>&lt;main&gt; <\/strong>: rappresenta il contenuto principale di una pagina web.<\/li>\n\n\n\n<li><strong>&lt;div&gt; <\/strong>: definisce una sezione in un documento HTML.<\/li>\n\n\n\n<li><strong>&lt;footer&gt; <\/strong>: contiene il contenuto visualizzato in fondo al tuo sito web.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Inserisci questi elementi all&rsquo;interno dei tag <strong>&lt;body&gt;&lt;\/body&gt; <\/strong>nel codice del tuo file <strong>index.html <\/strong>. Assicurati di chiudere ogni elemento con un tag di chiusura, altrimenti il tuo codice non funzioner&agrave;.<\/p><p class=\"wp-block-paragraph\">Ecco come appare il codice completo:<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br><br>&lt;html&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;head&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Blog personale&lt;\/title&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;\/head&gt;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&lt;body&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;&nbsp;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/header&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"row\"&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;post-text-box&rdquo;&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"profile\"&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/main&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;&nbsp;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/footer&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/body&gt;<br><br>&lt;\/html&gt;<\/pre><h3 class=\"wp-block-heading\" id=\"h-5-aggiungi-il-contenuto-html\"><strong>5. Aggiungi il contenuto HTML<\/strong><\/h3><p class=\"wp-block-paragraph\">Dopo che il layout &egrave; pronto, inizia a riempirlo con i contenuti del tuo sito, come testo, immagini, link ipertestuali o video. Se il contenuto non &egrave; pronto, utilizza un contenuto fittizio come segnaposto e sostituiscilo in seguito.<\/p><p class=\"wp-block-paragraph\">Ecco alcuni tag che utilizzeremo per aggiungere contenuti al sito web:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;h1&gt; e &lt;p&gt; <\/strong>: contengono titolo e testo del paragrafo. Usa il tag <strong>&lt;br&gt;<\/strong> per creare un&rsquo;interruzione di linea se il testo &egrave; troppo lungo.<\/li>\n\n\n\n<li><strong>&lt;nav&gt; e &lt;a&gt;<\/strong>: specificano la barra di navigazione e il suo elemento di ancoraggio. Utilizza l&rsquo;attributo <strong>href<\/strong> per specificare l&rsquo;URL collegato all&rsquo;ancora.<\/li>\n\n\n\n<li><strong>&lt;img&gt;<\/strong>: container per l&rsquo;elemento immagine. Contiene l&rsquo;attributo <strong>img src <\/strong>, che specifica il link o il nome del file immagine.<\/li>\n<\/ul><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Suggerimento professionale                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Il tag <strong>img<\/strong> ha anche un attributo opzionale <strong>alt<\/strong>. Descrive l'immagine nel caso in cui il file non si carichi.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Ecco come appare il codice:<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br><br>&lt;html&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;head&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Blog personale&lt;\/title&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/head&gt;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&lt;body&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;&nbsp;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Il tuo blog personale&lt;\/h1&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;domain.tld\/home&rdquo;&gt;Casa&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=\"domain.tld\/blog\"&gt;Blog&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=\"domain.tld\/about\"&gt;Informazioni&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/nav&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/header&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"row\"&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;post-text-box&rdquo;&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Ultimo post&lt;\/h1&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Primo post&lt;\/h1&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Il contenuto del primo post&lt;\/p&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/section&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"profile\"&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Chi sono&lt;\/h1&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"profile-picture.png\"&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Sull'autore&lt;\/p&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/main&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;twitter.com\/author&rdquo;&gt;Twitter&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=\"facebook.com\/author\"&gt;Facebook&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;instagram.com\/author&rdquo;&gt;Instagram&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/footer&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/body&gt;<br><br>&lt;\/html&gt;<\/pre><p class=\"wp-block-paragraph\">Dopo aver aggiunto il codice, il tuo sito web HTML avr&agrave; un suo aspetto. Ecco come si presenta:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a701054a4e2f\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a701054a4e2f\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"437\" 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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-website-written-only-with-HTML-1024x437-2.png\/public\" alt=\"Un sito web scritto solo con HTML\" class=\"wp-image-2240\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-website-written-only-with-HTML-1024x437-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-website-written-only-with-HTML-1024x437-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-website-written-only-with-HTML-1024x437-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-6-includi-layout-css\"><strong>6. Includi layout CSS<\/strong><\/h3><p class=\"wp-block-paragraph\">Poich&eacute; HTML ti permette solo di creare la struttura del sito web e aggiungere contenuti di base, usa Cascading Style Sheets (CSS) per modificarne il layout. CSS &egrave; un linguaggio che definisce lo stile del tuo documento HTML.<\/p><p class=\"wp-block-paragraph\">Per fare questo, crea un file <strong>style.css<\/strong> e collega lo stylesheeet al documento HTML aggiungendo il seguente codice tra i tag di apertura e chiusura <strong>&lt;head&gt; <\/strong>di<strong> index.html:<\/strong><\/p><pre class=\"wp-block-preformatted\">&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/pre><p class=\"wp-block-paragraph\">Per creare il layout del sito web a due colonne, utilizzeremo la propriet&agrave; <strong>flex<\/strong>. Organizza gli elementi HTML utilizzando contenitori flessibili, permettendo loro di adattarsi in base alla dimensione dello schermo dell&rsquo;utente.<\/p><p class=\"wp-block-paragraph\">Ecco come appare il codice completo:<\/p><pre class=\"wp-block-preformatted\">\/*header style*\/<br><br>header {<br><br>&nbsp;&nbsp;&nbsp;text-align: center;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;padding: 20px;<br><br>}<br><br>\/*navigation menu style*\/<br><br>nav {<br><br>&nbsp;&nbsp;&nbsp;text-align: center;<br><br>&nbsp;&nbsp;&nbsp;word-spacing: 30px;<br><br>&nbsp;&nbsp;&nbsp;Padding: 10px;<br><br>}<br><br>\/*creating the two-column layout*\/<br><br>*{<br><br>&nbsp;&nbsp;&nbsp;box-sizing: border-box;<br><br>}<br><br>.row {<br><br>&nbsp;&nbsp;&nbsp;display: flex;<br><br>&nbsp;&nbsp;&nbsp;flex-wrap: wrap;<br><br>}<br><br>.post-text-box {<br><br>&nbsp;&nbsp;&nbsp;flex: 70%;<br><br>&nbsp;&nbsp;&nbsp;padding: 20px;<br><br>}<br><br>.profile {<br><br>&nbsp;&nbsp;&nbsp;flex: 70%;<br><br>&nbsp;&nbsp;&nbsp;padding: 20px;<br><br>}<br><br>\/*profile image and heading style*\/<br><br>.profile img {<br><br>&nbsp;&nbsp;&nbsp;width: 120px;<br><br>&nbsp;&nbsp;&nbsp;display: block;<br><br>&nbsp;&nbsp;&nbsp;margin-left: 0;<br><br>&nbsp;&nbsp;&nbsp;margin-right: 0;<br><br>}<br><br>.profile h1 {<br><br>&nbsp;&nbsp;&nbsp;text-align: center;<br><br>}<\/pre><p class=\"wp-block-paragraph\">Dopo aver aggiunto il frammento di codice al tuo file CSS, ecco come apparir&agrave; il sito web:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a701054a5c96\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a701054a5c96\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"412\" 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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-website-with-CSS-layout-1024x412-2.png\/public\" alt=\"Un sito web con layout CSS&nbsp;\" class=\"wp-image-2242\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-website-with-CSS-layout-1024x412-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-website-with-CSS-layout-1024x412-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/A-website-with-CSS-layout-1024x412-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-7-personalizza-il-tuo-sito\"><strong>7. Personalizza il tuo sito<\/strong><\/h3><p class=\"wp-block-paragraph\">Oltre a modificare il layout, utilizza CSS per personalizzare altri aspetti visivi del tuo sito web. Ad esempio, puoi cambiare il tipo di font e l&rsquo;immagine di sfondo.<\/p><p class=\"wp-block-paragraph\">Per modificare l&rsquo;aspetto del tuo sito web, aggiungi le propriet&agrave; CSS nell&rsquo;elemento che desideri personalizzare. Ad esempio, ecco il codice per personalizzare il colore di sfondo e gli elementi di testo della barra del menu di navigazione:<\/p><pre class=\"wp-block-preformatted\">\/*navigation bar style*\/<br><br>nav {<br><br>&nbsp;&nbsp;&nbsp;text-align: center;<br><br>&nbsp;&nbsp;&nbsp;word-spacing: 30px;<br><br>&nbsp;&nbsp;&nbsp;padding: 10px;<br><br>&nbsp;&nbsp;&nbsp;background-color: #f5f5dc<br><br>&nbsp;&nbsp;&nbsp;font-family: Helvetica;<br><br>}<br><br>\/*navigation bar button style*\/<br><br>nav a {<br><br>&nbsp;&nbsp;&nbsp;color: #000000;<br><br>&nbsp;&nbsp;&nbsp;text-decoration: none;<br><br>&nbsp;&nbsp;&nbsp;font-size: larger;<br><br>}<\/pre><p class=\"wp-block-paragraph\">Dopo aver aggiunto lo stile CSS per ogni elemento, ecco come appare il sito web:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a701054a6ae8\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a701054a6ae8\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"401\" 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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/An-HTML-website-with-CSS-layout-and-styling-1024x401-1.png\/public\" alt=\"Un sito web HTML con layout e stile CSS\" class=\"wp-image-2243\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/An-HTML-website-with-CSS-layout-and-styling-1024x401-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/An-HTML-website-with-CSS-layout-and-styling-1024x401-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/An-HTML-website-with-CSS-layout-and-styling-1024x401-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-8-scegli-una-piattaforma-di-hosting-e-pubblica\"><strong>8. Scegli una piattaforma di hosting e pubblica<\/strong><\/h3><p class=\"wp-block-paragraph\">Una volta che hai tutti i file e le risorse del sito web pronti, &egrave; il momento di pubblicarli. Questo passaggio richiede un hosting, che puoi ottenere da un fornitore di hosting.<\/p><p class=\"wp-block-paragraph\">I<a href=\"\/it\/web-hosting\"> <strong>piani di web hosting di Hostinger<\/strong><\/a>, a partire da <strong>2,99&euro;<\/strong>, includono un dominio gratuito, certificato SSL e backup automatizzati. Il piano di livello pi&ugrave; basso offre <strong>100 GB di archiviazione SSD<\/strong> per ospitare fino a 100 siti web, fornendo ampio spazio per futuri progetti di sviluppo web.<\/p><p class=\"wp-block-paragraph\">Misure di sicurezza standard, come un firewall per applicazioni web, scanner malware, firewall DNS di Cloudflare e protezione della privacy WHOIS, proteggono il tuo sito web HTML da attacchi malevoli. Gli utenti che utilizzano il piano <strong>Web hosting business<\/strong> e superiori possono anche sfruttare la nostra soluzione DNS interna per migliorare le prestazioni.<\/p><p class=\"wp-block-paragraph\">Puoi provare i nostri servizi di hosting senza rischi con la nostra <strong>garanzia di rimborso di 30 giorni<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/it\/hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-1317\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Web-hosting_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><p class=\"wp-block-paragraph\">Dopo aver ottenuto l&rsquo;hosting, utilizza un <strong>file manager<\/strong> o un client <strong>FTP<\/strong> per caricare il tuo sito web su internet.<\/p><p class=\"wp-block-paragraph\">Ecco come caricare i file del tuo sito web con il File Manager di Hostinger:<\/p><ol class=\"wp-block-list\">\n<li>Naviga su <strong>File <\/strong>&rarr; <strong>Fine Manager<\/strong> da hPanel.<\/li>\n\n\n\n<li>Apri <strong>public_html<\/strong> e carica il file di archivio del sito web dal tuo computer alla root directory.<\/li>\n\n\n\n<li>Fai clic con il tasto destro sul file caricato e seleziona <strong>Estrai<\/strong>.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Il metodo del file manager &egrave; ideale per caricare file del sito web sotto i <strong>100GB<\/strong>.<\/p><p class=\"wp-block-paragraph\"><strong>Suggerimenti per ottimizzare un sito web HTML<\/strong><\/p><p class=\"wp-block-paragraph\">Questa sezione spiegher&agrave; i passaggi da seguire dopo aver creato un sito web utilizzando HTML e CSS. Seguili per migliorare l&rsquo;accessibilit&agrave; e la funzionalit&agrave; del tuo sito.<\/p><p class=\"wp-block-paragraph\"><strong>Aggiungi una barra a tendina per una migliore navigazione<\/strong><\/p><p class=\"wp-block-paragraph\">I siti web complessi con molteplici pagine hanno molti pulsanti di navigazione, link e testi. Puoi creare un semplice menu a tendina utilizzando CSS per raggruppare questi elementi.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a701054a8965\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a701054a8965\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"409\" 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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/image-1.png\/public\" alt=\"Una barra dei menu a discesa CSS\" class=\"wp-image-2245\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/image-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/image-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/07\/image-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Gli utenti possono espandere la barra di navigazione per accedere agli elementi. Aiuta a ridurre l&rsquo;ingombro e migliora l&rsquo;usabilit&agrave; del sito web per gli utenti con schermi pi&ugrave; piccoli.<\/p><p class=\"wp-block-paragraph\"><strong>Migliora il design del sito con CSS avanzato<\/strong><\/p><p class=\"wp-block-paragraph\">CSS ti permette di fare personalizzazioni avanzate per migliorare il design del tuo sito per una migliore esperienza utente. Ad esempio, abilita lo scroll snapping, l&rsquo;animazione del testo, l&rsquo;animazione dello zoom al passaggio del mouse e i gradienti.<\/p><p class=\"wp-block-paragraph\">Inoltre, puoi creare un sito web responsive con media queries, regole CSS e flexbox. Il layout flexbox adatta automaticamente il tuo sito alla dimensione dello schermo del cliente.<\/p><p class=\"wp-block-paragraph\"><strong>Rendi il sito pi&ugrave; interattivo con JavaScript<\/strong><\/p><p class=\"wp-block-paragraph\">JavaScript &egrave; un linguaggio di scripting che ti permette di creare contenuti per siti web interattivi e dinamici. Ad esempio, abilita l&rsquo;animazione, aggiungi conto alla rovescia e includi pulsanti, moduli o menu.<\/p><p class=\"wp-block-paragraph\">Queste funzionalit&agrave; rendono il tuo sito web pi&ugrave; interessante e coinvolgente, migliorando l&rsquo;esperienza dell&rsquo;utente. I passaggi per <strong>aggiungere JavaScript al tuo sito HTML<\/strong> sono simili a quelli per CSS. Puoi utilizzare un file separato o scriverlo direttamente nel codice corrente.<\/p><h2 class=\"wp-block-heading\" id=\"h-devo-imparare-html-per-creare-un-sito-web\"><strong>Devo imparare HTML per creare un sito web?<\/strong><\/h2><p class=\"wp-block-paragraph\">Gli utenti potrebbero non avere il tempo o l&rsquo;impegno per imparare l&rsquo;HTML per lo sviluppo web. Fortunatamente, alcune piattaforme consentono loro di creare un sito web funzionale senza scrivere codice.<\/p><p class=\"wp-block-paragraph\">Un<a href=\"\/it\/creare-sito-web\"> <strong>website builder<\/strong><\/a> come Hostinger &egrave; un&rsquo;ottima opzione per i principianti. Ha un&rsquo;interfaccia utente visiva e un editor drag and drop, che rende la personalizzazione facile.<\/p><p class=\"wp-block-paragraph\">Mantenere un sito web basato su un builder &egrave; anche pi&ugrave; semplice e meno incline agli errori poich&eacute; non &egrave; necessario aggiornare manualmente il suo codice sorgente. Semplicemente seleziona gli elementi che vuoi modificare e applica le modifiche direttamente su un unico schermo.<\/p><p class=\"wp-block-paragraph\">Poich&eacute; il website builder di Hostinger &egrave; incluso in tutti i nostri piani di hosting, non &egrave; necessario acquistare il servizio separatamente. Parte da <strong>2,99&euro;\/mese <\/strong>e pu&ograve; essere aggiornato a servizi di hosting di prestazioni superiori.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/it\/builder-di-siti-web-ai\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-1330\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusioni\"><strong>Conclusioni<\/strong><\/h2><p class=\"wp-block-paragraph\">Invece di utilizzare i website builder, puoi programmare un sito web da zero con HTML. Sebbene siano pi&ugrave; complicati da costruire, i siti web HTML sono pi&ugrave; efficienti in termini di risorse e flessibili poich&eacute; puoi modificare il codice sorgente.<\/p><p class=\"wp-block-paragraph\">In questo articolo, abbiamo spiegato come programmare un sito web utilizzando HTML e CSS in otto passaggi:<\/p><ol class=\"wp-block-list\">\n<li><strong>Scegli un editor HTML <\/strong>: scegli il programma per scrivere e modificare il codice del tuo sito web, come VSCode.<\/li>\n\n\n\n<li><strong>Pianifica la disposizione del sito <\/strong>: crea un mockup del layout del sito web utilizzando un programma come Adobe XD o una penna e carta.<\/li>\n\n\n\n<li><strong>Scrivi il codice HTML <\/strong>: crea un file <strong>index.html<\/strong> e aggiungi i tag della struttura del documento HTML.<\/li>\n\n\n\n<li><strong>Crea gli elementi del layout <\/strong>: suddividi il tuo sito web in diverse sezioni in base al layout aggiungendo tag al file HTML.<\/li>\n\n\n\n<li><strong>Aggiungi il contenuto HTML <\/strong>: aggiungi il titolo dell&rsquo;intestazione, il testo del corpo e le immagini in ogni sezione.<\/li>\n\n\n\n<li><strong>Includi il layout CSS <\/strong>&ndash; crea un file <strong>style.css <\/strong>e aggiungi il codice CSS per modificare la posizione della colonna, l&rsquo;allineamento del testo e il padding degli elementi.<\/li>\n\n\n\n<li><strong>Personalizza il tuo sito <\/strong>: utilizza gli attributi di stile CSS per personalizzare il colore di sfondo del sito web, la dimensione del font, i tipi di font e altri elementi visivi.<\/li>\n\n\n\n<li><strong>Scegli una piattaforma di hosting e pubblica<\/strong>: seleziona un host web affidabile e sicuro che offre il miglior rapporto qualit&agrave;-prezzo.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Dopo aver creato la tua pagina web HTML, puoi aggiungere CSS avanzato e JavaScript per migliorare la navigazione, l&rsquo;interattivit&agrave; e il design generale. Troppo da imparare? Cerchi un builder senza codice? Dai un&rsquo;occhiata al website builder di Hostinger:<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/it\/builder-di-siti-web-ai\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-1330\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/27\/2024\/02\/IT-Website-Builder_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-faq-su-come-realizzare-un-sito-web-con-html\"><strong>FAQ su come realizzare un sito web con HTML<\/strong><\/h2><p class=\"wp-block-paragraph\">Per aiutarti a capire di pi&ugrave; sulla creazione di un sito web con HTML, risponderemo ad alcune domande frequentemente poste su questo argomento.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69440081d144e\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>&Egrave; sufficiente l&rsquo;HTML per creare un sito web?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>S&igrave;, puoi creare un sito web funzionale solo con HTML. Tuttavia, mostra solo contenuti statici come testo, link, immagini e video.<\/p>\n<p>Utilizza CSS per stilizzare l&rsquo;elemento HTML, come cambiare il colore di sfondo e la dimensione del font. Per creare un sito web dinamico e interattivo, hai bisogno anche di PHP.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69440081d1452\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>L&rsquo;HTML &egrave; buono per creare siti web?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>S&igrave;, &egrave; buono per creare un sito web statico. I siti web HTML richiedono meno risorse per essere caricati e sono flessibili in quanto &egrave; possibile modificare il codice sorgente.<\/p>\n<p>Tuttavia, HTML &egrave; adatto solo per siti web complessi se abbinato a CSS e JavaScript. Se stai imparando solo HTML, &egrave; meglio usare WordPress.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69440081d1453\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Quanto tempo ci vuole per programmare un sito web HTML?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Siti web pi&ugrave; complessi richiederanno pi&ugrave; tempo per essere costruiti. Il numero di sviluppatori web che lavorano al progetto, le loro competenze e risorse possono influenzare anche il tempo di costruzione. In generale, uno sviluppatore esperto pu&ograve; programmare un sito web semplice da zero da quattro a sei settimane.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Costruire un sito web oggi &egrave; semplice e non richiede conoscenze di programmazione. Piattaforme come il creatore di siti web di Hostinger offrono un&rsquo;interfaccia visiva semplice e funzionalit&agrave; drag and drop per semplificare il processo di sviluppo. Tuttavia, potresti voler costruire siti web da zero con Hypertext Markup Language (HTML). Sebbene sia pi&ugrave; difficile, i [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/it\/tutorial\/realizzazione-di-un-sito-web-con-html\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":399,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Realizzare un sito web con HTML in 8 semplici passaggi","rank_math_description":"Leggi il nostro articolo e scopri come realizzare un sito web con HTML. Troverai anche dei suggerimenti post sviluppo.","rank_math_focus_keyword":"realizzazione di un sito web con html","footnotes":""},"categories":[48,61],"tags":[],"class_list":["post-2234","post","type-post","status-publish","format-standard","hentry","category-siti-web","category-sviluppo-di-siti-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/making-website-with-html\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/site-html\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-creer-page-web-html\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-website-dengan-html\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/website-mit-html-erstellen\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/realizzazione-di-un-sito-web-con-html\/","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/website-maken-met-html\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/making-website-with-html\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/site-html\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/posts\/2234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/users\/399"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/comments?post=2234"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/posts\/2234\/revisions"}],"predecessor-version":[{"id":5900,"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/posts\/2234\/revisions\/5900"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/media?parent=2234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/categories?post=2234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/it\/tutorial\/wp-json\/wp\/v2\/tags?post=2234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}