INTRODUZIONE
Prima di iniziare a parlare del post “Il linguaggio HTML” ti darò delle indicazioni sull’editor da utilizzare. Io personalmente mi trovo bene con Visual Studio Code ma non è detto che tu sia della stessa opinione. Altri buoni editor in circolazione sono atom, questo è il link atom e comunque la scelta dell’editor è strettamente personale, e in questo hai piena libertà. Il browser che mi permetto di consigliarti è Chrome soprattutto per il suo inspector.
INSTALLAZIONE DI VISUAL STUDIO CODE PER CHI INTENDE USARLO
Questo è il link per scaricare Visual Studio Code. Recati con il browser a questo indirizzo e scarica la versione per il tuo Sistema Operativo. Una volta fatta l’installazione ti consiglio di integrare le estensioni che riporto nelle figure sottostanti.
Una volta installate queste tre estensioni abbiamo l’auto completamento del codice. Vedrai che con emmet si può fare molto di più. Arrivati a questo punto crea una cartella sul tuo hard disk che utilizzerai per questi articoli, poi crea una sottocartella e chiamala Introduzione. Importa la sottocartella in visual studio code. Crea un nuovo file html chiamato Introduzione.html utilizzando l’auto completamento del codice. Per far ciò ti basterà iniziare a scrivere html e subito dopo comparirà l’intellisense. Hai diverse opzioni, scegli HTML5.
HTML
HTML è l’acronimo di Hyper Text Markup Language. Non è un linguaggio di programmazione, e non possiede quindi i costrutti logici della programmazione. È un Linguaggio di Markup per Ipertesti, lo standard utilizzato per la creazione di Pagine Web. Ci permette di indicare al Browser quali elementi mostrare e come disporli nelle Pagine Web attraverso l’uso dei <tag>. Possiamo ad esempio definire titoli e sottotitoli, paragrafi e tabelle, creare collegamenti tra pagine e inserire immagini. Sviluppato da Tim Berners-Lee al CERN di Ginevra. La versione attuale è HTML5.
STRUTTURA DI UNA PAGINA HTML
ANALIZZIAMO LO SCHELETRO DI UN DOCUMETO HTML5
- <!DOCTYPE html> definisce al Browser che questo è un documento HTML5
- <html> È l’elemento radice di una pagina HTML
- <head> È l’elemento che contiene meta informazioni sulla pagina HTML. Il suo contenuto non risulta visibile.
- <title> L’elemento specifica un titolo per la pagina HTML (che viene mostrato nella barra del titolo del browser o nella scheda della pagina)
- <body> L’elemento definisce il corpo del documento ed è un contenitore per tutti i contenuti visibili, come intestazioni, paragrafi, immagini, collegamenti ipertestuali, tabelle, elenchi, ecc.
- <h1> L’elemento definisce un’intestazione grande
- <p> L’elemento definisce un paragrafo
STRUTTURA DOCUMENTO
Ti riporto in figura la struttura del documento appena creato.
IL BROWSER WEB
Lo scopo di un browser web (Chrome, Edge, Firefox, Safari) è leggere documenti HTML e visualizzarli correttamente. Un browser non visualizza i tag HTML, ma li utilizza per determinare come visualizzare il documento: Per visualizzare il documento nel Browser web fai click con il tasto destro sul documento e seleziona “Open In Default Browser”. Hai appena aperto il tuo primo documento HTML.
LINK UTILI
Ti riporto alcuni link di approfondimento che saranno fondamentali nei post successivi:
Scrivi un commento