Questa serie di tutorial ti guiderà attraverso la creazione e l’ulteriore personalizzazione di questo sito web utilizzando l’HTML, il linguaggio di markup standard utilizzato per visualizzare i documenti in un browser web. Non è necessaria alcuna precedente esperienza di codifica, ma ti consigliamo di iniziare dall’inizio della serie se vuoi ricreare il sito web dimostrativo.
Al termine di questa serie, dovreste avere un sito web pronto per essere distribuito nel cloud e una familiarità di base con l’HTML. Saper scrivere l’HTML fornirà una solida base per imparare altre competenze di sviluppo web front-end, come CSS e JavaScript.
Questo tutorial ti introdurrà a un documento HTML di base e ti insegnerà come visualizzare il codice sorgente di un documento HTML in un browser.
HTML è usato per marcare un documento con istruzioni che dicono al browser come visualizzare e interpretare il contenuto del documento. Per esempio, l’HTML può dire al browser quale contenuto di testo dovrebbe essere interpretato come un’intestazione e quale contenuto di testo dovrebbe essere interpretato come paragrafi. L’HTML è anche usato per aggiungere immagini e assegnare link a testo e immagini. Queste istruzioni sono comunicate attraverso i tag HTML, che sono scritti in questo modo: <tagname>. Molti tag, anche se non tutti, usano un tag di apertura e un tag di chiusura per avvolgere il contenuto che sono usati per modificare.
Per avere un’idea di come vengono usati questi tag, esaminiamo un frammento di codice HTML. Il codice HTML qui sotto mostra come i tag HTML sono usati per strutturare il testo e aggiungere link e immagini. Non preoccupatevi se non capite subito i tag, li studieremo nel prossimo tutorial.
<h1>Sammy's Sample HTML</h1><p>This code is an example of how HTML is written.</p><p>It uses HTML tags to structure the text.</p><p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p><p>And it also uses HTML to add an image:</p><img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>Questo codice HTML è reso nel browser come segue:
Ora dovreste avere una comprensione di come il codice HTML di esempio viene reso in un browser. In seguito, impareremo come visualizzare il codice sorgente di qualsiasi pagina web usando uno strumento del browser.
Visualizzare il codice sorgente di una pagina web
Praticamente ogni pagina web che incontri usa l’HTML per strutturare e visualizzare le pagine HTML. Puoi ispezionare il codice sorgente di qualsiasi pagina web usando un browser web come Firefox o Chrome. Su Firefox, vai alla voce “Strumenti” nel menu in alto e clicca su “Sviluppatore Web/Sorgente della pagina” in questo modo:
Su Firefox, potete anche usare la scorciatoia da tastiera Command-U per visualizzare il codice sorgente di una pagina web.
Su Chrome, il processo è molto simile. Navigate alla voce del menu in alto “Visualizza” e cliccate su “Sviluppatore/Visualizza sorgente”. Puoi anche usare la scorciatoia da tastiera Option-Command-U.
Prova a ispezionare il codice sorgente del sito demo che costruiremo in questa serie di tutorial. Dovreste ricevere una pagina con molti più tag HTML del nostro esempio sopra. Non allarmatevi se vi sembrerà opprimente. Alla fine di questa serie di tutorial, dovreste avere una migliore comprensione di come interpretare il codice sorgente HTML e come usare l’HTML per costruire e personalizzare i vostri siti web.
Nota: Come detto sopra, puoi ispezionare il codice sorgente di qualsiasi pagina web usando gli strumenti del browser Firefox o Chrome. Prova a ispezionare il codice di alcuni dei tuoi siti preferiti per farti un’idea del codice sottostante che struttura i documenti web. Anche se il codice sorgente di questi siti probabilmente conterrà più linguaggi dell’HTML, imparare prima l’HTML ti aiuterà a prepararti ad imparare altri linguaggi e strutture per creare siti web in seguito, se lo desideri.