Creare un pagina web usando HTML: informazioni preliminari
Nel precedente articolo abbiamo visto cosa e’ HTML e perché bisognerebbe impararlo, puoi prendere visione cliccando qui. Oggi parleremo invece di come creare una pagina web da zero usando HTML.
Ricordiamo, innanzitutto, che HTML è acronimo di Hypertext Markup Language, che può essere tradotto come linguaggio di marcatura per ipertesti. Al contrario di quanto ciò possa lasciare intendere, però, HTML NON è un linguaggio di programmazione (poiché non si basa sui principi della programmazione ), bensì un linguaggio dichiarativo di markup: questa categoria di linguaggi, si occupa di contrassegnare una serie di elementi e specificarne l’ordine in cui mostrarli. Nel caso di HTML, il compito del linguaggio è quello di indicare al suo interprete (il browser) il tipo di elementi da visualizzare, oltre che la modalità con cui devono essere disposti all’interno della singola pagina: in pratica si racchiude l’elemento tra due tag, cioè tra due marcatori identificati da termini simili all’inglese, compresi tra parentesi angolari (ad esempio, <input> è il tag HTML che permette di creare caselle di testo e altri widget).
Al momento, la versione più recente di HTML è HTML 5: è un evoluzione della versione di base che consente non solo di definire la struttura della pagina web che si intende costruire, ma anche il comportamento di molte tipologie di contenuti multimediali (immagini, video, audio ed altro) e di monitorare anche gli aspetti relativi al dispositivo da cui le pagine vengono visitate (come per esempio la risoluzione), senza utilizzare risorse esterne come Flash o applet Java, come accadeva un tempo. Per queste ragioni, oggi è ampiamente impiegato per realizzare non solo pagine web di siti e portali web ma anche per lo sviluppo di app mobile.
Pagine web create attraverso l’impiego del solo linguaggio HTML, sono pagine dette statiche, cioè progettata per mostrare sempre lo stesso contenuto e non modificabile dalle azioni dell’utente o da condizioni ambientali. Tuttavia, è possibile creare una pagina web dinamica e questo è possibile facendo collaborare HTML con numerosi altri linguaggi, come CSS (usato per definire lo stile degli elementi che compongono la pagina) e JavaScript (un linguaggio di programmazione, o meglio di scripting, che permette di manipolare in maniera dinamica la pagina rendendola interattiva).
Struttura di base di una pagina HTML
Creare una pagina web è abbastanza semplice, basterà comprendere alcuni concetti fondamentali che serviranno ogni qualvolta andrai a costruire una nuova pagina HTML.
Prima di tutto, è necessario conoscere il significato di TAG e la relativa sintassi. Un TAG altro non è che un etichetta che identifica uno specifico elemento e comunica al browser il modo in cui mostrare quello specifico elemento.
Ogni TAG segue una specifica sintassi e prevede alcune eccezioni, vediamo di seguito la sintassi
<tag_html attributo=”valore”></tag_html>
in alcuni casi:
<tag_html>
La sintassi di un tag quindi prevede la scrittura di un termine tra parentesi angolari e prevede la presenza di un tag di apertura ed un tag di chiusura. Tuttavia, in alcuni casi è previsto un solo tag, che funge da apertura e da chiusura, come nel caso del tag <br> che serve per mandare a capo un elemento. Inoltre, su ogni tag è possibile aggiungere uno o più proprietà dette attributi che hanno lo scopo di influenzare il comportamento di base dell’elemento su cui è applicato.
Per esempio: <input type=”text”> identifica un campo di testo e la presenza dell’attributo type=”text” comunica al browser che ciò che dovrà mostrare è proprio un campo di testo. Se invece usassimo lo stesso tag con un valore per il type diverso, il browser mostrerà un altro widget: <input type=”checkbox”> indica che dovrà essere mostrata una checkbox ossia una casella di spunta.
Per approfondire questi aspetti e conoscere tutti gli elementi del linguaggio HTML ti rimando al mio corso gratuito, con cui imparerai tutti i segreti di questo linguaggio e potrai conseguire una certificazione di fine corso da inserire nel tuo CV.
Fatta questa importante precisazione, passiamo con lo studiare i tag fondamentali per la realizzazione della struttura di base di una pagina web ed i passi da svolgere.
Per iniziare, ti basterà utilizzare il blocco note installato di default sul tuo pc e crea un nuovo file con estensione .html avendo premura di racchiudere tra virgolette il nome e l’estensione del file, altrimenti verrà salvato come un semplice file di testo. (è importante specificare l’estensione, affinché il file venga riconosciuto come pagina HTML).
A questo punto, sei pront* per creare la tua pagina web!
La prima cosa da fare è inserire quelli che sono i tag obbligatori e senza cui non si potrebbe avere una ogina html. Rappresentano la struttura di base della nostra pagina.
- <!DOCTYPE html> – rappresenta il primo tag che dev’essere inserito, utile a specificare che il file in questione contiene una pagina HTML.
- <html> – si tratta del marcatore che racchiude l’intera pagina. Accetta come parametri diversi aspetti della pagina stessa, come la lingua e lo schema usato dal markup.
- <head> – questo tag racchiude le informazioni attraverso le quali la pagina viene gestita dagli interpreti (il browser, il crawler dei motori di ricerca e via dicendo): per esempio, è possibile indicare in questo tag il titolo della pagina, la sua icona caratteristica, il set di caratteri e altre informazioni specifiche.
- <body> – questo marcatore contiene tutte le informazioni relative al corpo della pagina, cioè agli elementi che verranno mostrati a schermo. Per esempio, in questo tag si specificano i titoli e sottotitoli (<h1>, <h2>, <h3> ecc.), i paragrafi e il relativo contenuto (<p>), le immagini (<img>), i collegamenti ipertestuali o ancore (<a>), le tabelle (<table>), i moduli (<form>) ed altro.
Crea la tua prima pagina web
In questo paragrafo ti insegno come creare la tua prima pagina web, da zero! La classica pagina del “Hello World”, ti lascio anche qualche indicazione per poter visualizzare il risultato.
Ricordi che nel precedente paragrafo ti ho fatto creare un file html? Benissimo, ripescalo e inizia a scrivere i tag fondamentali, come mostrato nell’immagine seguente:
Bene, abbiamo creato la nostra struttura di base, ma questo non basta! E’ necessario inserire qualcosa in più per poter visualizzare un contenuto, come quello di “Hello World”.
Per prima cosa, inseriamo nel tag head, il tag per creare il titolo della nostra pagina web, sarebbe quel tag che da la possibilità di dare un nome alla scheda del browser che sta visualizzando la nostra pagina:
Il risultato, una volta salvato il nostro file (ricordiamo con Salva con nome -> “index.html” compreso di virgolette) sarà il seguente:
Troverai un file con l’icona del tuo browser, denominato index (index.html, in genere è il nome che si da ai file html principali, quelli che rappresenta la prima pagina di un progetto web), come quello che segue:
Cliccandoci sopra, verrà aperta una pagina del browser vuota, bianca, ma con un titolo sulla scheda che abbiamo aperto. Il titolo è proprio quello utilizzato nel tag title
Nel tag head potremmo inserire altre informazioni, altri tag, ma al momento non sono fondamentali. Adesso possiamo passare alla realizzazione del corpo della nostra pagina andando ad animare il nostro tag body. L’esercizio prevede la scrittura di un semplice testo con la frase “Hello World”, supponiamo che volessimo rappresentarlo come un titolo, in modo tale da renderlo abbastanza evidente. Per realizzare un titolo, quindi ci serviremo del tag <h1></h1> che è un tag che fa parte della famiglia dei tag di intestazione.
A questo punto, la nostra pagina web è completa ed il risultato visivo sarà il seguente:
Ricordati di salvare il tuo file ogni volta che fai una modifica, se non salvi , non vedrai le modifiche nel tuo browser!
Conclusioni
Come hai potuto notare, creare una pagina web è estremamente facile! Una volta imparata la struttura di base, il gioco è fatto! E’ chiaro che per realizzare qualcosa di più complesso, sarà necessario studiare tutti gli elementi html. Con esso possiamo creare pagine di login, photo gallery, tabelle contenenti dati e tanto altro! Allora corri as iscriverti al mio corso gratuito e impara tutto il necessario!
Non dimenticare di seguirmi su Instagram e Facebook per rimanere sempre aggiornato sulle novità.
P.S. Hai notato? In questo blog non trovi pubblicità. Non è fantastico? Puoi leggere i contenuti senza dover chiudere milioni di popup che disturbano pesantemente! E’ uno dei metodi di guadagno dei blogger! Qui non li trovi e ciò significa che non c’è ombra di guadagno.
Puoi leggere la mia mission a questo link https://www.ilcodingrosa.it/about-me-ilcodingrosa-gender-gap-abbattiamolo/ e se ti piace la mia idea e ti va di darmi supporto, considera l’idea di offrirmi un caffè!
Scegli tu il valore! Puoi decidere, in alternativa di offrirmi una birra, una pizza, una cena, quello che vuoi. Il tuo contributo mi aiuterà a portare avanti la mia battaglia e a mantenere attiva questa piattaforma. Grazie <3