Come creare una pagina html
Come creare una pagina web html
In questa lezione gratuita imparerai come creare una pagina html partendo da zero e senza saper programmare. Prima però voglio mostrarti delle pagine html già fatte cosi puoi prendere ispirazioni dalle migliori pagine web disponibili online. Inoltre puoi scaricare ed utilizzare gratuitamente il file pagina html esempio con il quale potrai esercitarti a realizzare la tua pagina web utilizzando semplicemente il notepad++.
Se non hai scelto una piattaforma CMS per creare una pagina web allora il linguaggio html è quello che ti serve, continua a leggere questa facile guida come creare una pagina web per siti html.
A questo punto ti chiedo, Sei Pronto? vuoi iniziare a crearla? ecco cosa devi fare:
- Apri il Notepad++
- Scrivi il codice html
- Salva il tuo file html (tuofile.html)
- Pubblica la tua pagina online
Segui questi quattro passi per creare il tuo file pronto per essere pubblicato sul tuo sito html. Se usi Windows lancia il blocconote o Notepad mentre se usi iMac allora apri AppleScript (script editor) e comincia ad incollare dentro questo file l’intestazione html.
DOCTYPE
Ogni pagina html ha una intestazione, è sempre posta nella parte più in alto della pagina perché con questa siamo capaci di dichiarare ai browser che si tratta di un file scritto con lo standard HTML5.
<!DOCTYPE html>TAG HTML
Questo tag è il più popolare del linguaggio html, e non ti dico perché visto che è quello che apre le danze ed ogni file che vuoi creare ne dovrà avere uno perché funzioni. Il tag Html è quello che contiene tutto il resto del codice necessario al funzionamento dello stesso.
<html>
TAG Head
Il tag Head è in parole semplici una porzione di pagina nascosta agli occhi degli utenti ma ben visibile ai motori di ricerca, che la usano e la interpretano, cosi in alcuni casi ed in certe misure la mostrano a gli utenti. Ad esempio un motore di ricerca come Google va ad usare i meta tag contenuti nell’head per ottenere suggerimenti dalla pagina per una corretta indicizzazione sui motori di ricerca.
<head>
TAG META
Come dicevo prima i motori di ricerca usano i meta tag precompilati nell’head e ottenere le informazioni necessarie per una corretta indicizzazione del sito. Ma quali sono i meta tag più importanti? ecco qui una breve lista e la spiegazione di cosa servono.
Questo tag indica ai browser quale linguaggio deve usare, solitamente per la lingua latina viene usato utf-8 che indica i caratteri unicode.
<meta charset="utf-8">
Importante è dire ai motori di ricerca e agli utenti che vedono questa descrizione sulle Serp dei risultati di ricerca proprio questo tag qui sotto inerente alla descrizione.
<meta name="description" content="inserisci qui la tua descrizione>
Se la tua intenzione è quella di creare un sito web responsive, è dovrà essere così per ovvi motivi, allora dovrai inserire proprio nel head della tua pagina il meta name=”viewport” come scritto proprio qui sotto:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ci siamo quasi, la prima parte è quasi completa, manca ancora un ultima cosa indispensabile per la tua pagina. Cosa? un titolo! ecco come devi inserirlo.
<title> inserisci qui il tuo titolo e poi chiudi il tag </title>
Direi ben fatto! hai già inserito tutti i tag sul tuo file creato con il Notepad? perfetto allora puoi già fare un test.
Salva il tuo file cambiandogli l’estensione e cambiando da pagina.txt con pagina.html e prova a pubblicare tutto sul tuo server ftp per vedere il risultato, dovrebbe essere una pagina tutta bianca ancora perché manca il body. Se non hai ancora un hosting ti consiglio di dare un occhiata a questo che io ho scelto. Ma prima completiamo la pagina aggiungendo un corpo. Nel nostro caso visto che è un esempio possiamo aggiungere giusto un titolo, una frase ed una immagine. Poi sarà la tua immaginazione a creare qualcosa di meglio.
BODY
Il tag Body definisce quell’area della pagina che l’utente vede, infatti sarà nel corpo della pagina che devi inserire i contenuti come testi, immagini e form contatti nel caso creassi una landing page. Inoltre, se vuoi inserire il numero di cellulare cliccabile da una pagina html usa il tag call to qui è spiegato bene. Ma adesso torniamo al body e vediamo un piccolo esempio.
<body>
<body>
<h1>Questo è il titolo principale</h1>
<p>Qui puoi inserire il tuo testo</p>
</body>Se vuoi inserire una immagine html qui trovi una guida a questo punto potrebbe interessarti anche questa guida html come inserire una immagine oppure semplicemente usa il tag <img src=""> che trovi nell’esempio, qui sotto, nel prossimo paragrafo.
Pagine html già fatte
Quello che devi sapere prima d’iniziare a creare siti web professionali è che esistono risorse a pagamento che ti possono semplificare di molto il lavoro. Se scegli di costruire da solo il tuo sito web qui trovi le migliori risorse per WordPress, se invece opti per qualcosa di pagine html già fatte ti consiglio di visitare Themeforest.
Notepad++
In questo capitolo scopri come creare una pagina html con blocco note e come utilizzarlo per creare un intero sito web. Prova a copiare ed incollare questo codice qui sotto e cambiane i contenuti a secondo come più si addice alle tue esigenze. Solo un avvertenza volevo ricordarti che quando salvi il file sul tuo pc, assicurati che abbia l’estensione .html perchè funzioni. Adesso che tutto è pronto puoi fare il tuo testt e pubblicare il file via ftp o comunque sul tuo server.
nota per i meno esperti: per raggiungere la tua pagina dal browser, una volta pubblicata dovrai digitare il nome di dominio ed aggiungere il nome con il quale hai rinominato il file completo di estensione. Insomma per non farti perdere altro tempo dovresti digitare qualcosa di simile nomedeltuodominio.it/nomedellapagina.html
Adesso che hai imparato come creare una pagina web in html ti lascio qui sotto un esempio del codice pronto da utilizzare per realizzare la tua prima webpage.
Pagina html esempio
Qui puoi scaricare un esempio di pagina html file.html
<!-- Dichiara il tipo di file ai browser -->
<!DOCTYPE html>
<!-- Tag di apertura del codice HTML -->
<html>
<head>
<!-- Tag Meta -->
<meta charset="utf-8">
<meta name="description" content="Crea una pagina web da zero e scopri quali sono gli elementi principali per iniziare un nuovo progetto HTML attraverso l'uso di Visual Studio Code.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Inserisci qui sotto il titolo dellla tua pagina -->
<title>pagina html</title>
</head>
<body>
<!-- Inserisci qui il contenuto del tuo sito web -->
Esempio: inserisci qui un'immagine nel body basta sostituire la url
<a src="https://www.monacodesign.it/varie/creare-siti-web/"><img src="https://www.monacodesign.it/wp-content/uploads/2020/12/crea-sito-gratis-per-sempre-800x445.png" width="100%" hright="auto" alt="Crea sito gratis per sempre"></a>
</body>
</htm>
Ottimo! Hai finito. Adesso che sai come fare una pagina html, scopri come creare sito web gratis per sempre
