HTML BASE – Lezione 3

Il programma giusto per scrivere il codice

In questa lezione vedremo quale software utilizzare per scrivere il codice delle nostre pagine web in html.

Quale editor scegliere?

Ne esistono tanti gratuiti e a pagamento, quello che consiglio è atom completamente open source. Altri editor per le pagine web che posso suggerirti se vuoi andarli a vedere per curiosità sono:

• Notepad++
• Brackets

Questi sono solo alcuni, basta cercare su google “open source editor html” o open source editor web page” e ne trovi davvero tantissimi.

Atom editor di testo per scrivere il codice delle pagine web

Devi scaricare questo programma e installarlo sul tuo computer, per farlo basta cliccare qui https://atom.io/ e cliccare su download.

Installazione di Atom

Dopo averlo scaricato vai nella cartella Download, fai doppio click sul file e inizia l’installazione.

L’installazione è piuttosto veloce, dopo pochi secondi dovresti vedere sullo schermo un messaggio simile all’immagine che vedi sotto.

Atom ora è installato, comparirà sul desktop il collegamento diretto e il programma di aprirà da solo facendoti vedere una schermata come quella dell’immagine successiva.

Chiudi tutti i tab (schede) aperte di Atom in modo da avere come risultato finale una schermata come quella dell’immagine sotto.

Ora dobbiamo andare a lavorare nella cartella “Lezione 3” dentro il XAMPP, il programma che simula la navigazione online e che abbiamo installato nella lezione precedente.

Entra nella cartella C:\xampp\htdocs\sitiweb\html-base dove al suo interno troverai la sotto cartella “lezione-2”. Duplica lezione-2 e rinominala in “lezione-3” (vedi immagini).

Lavorare al progetto

Ora trascina la cartella di lezione-3 dentro Atom, il programma di predisporrà automaticamente in modalità progetto (vedi immagini).

Ora digita nella barra dell’indirizzo del browser http://127.0.0.1/sitiweb/html-base/, dovresti vedere tra l’elenco delle cartelle “lezione-3”. Al click su lezione-3 tornerai a dove eravamo rimasti a lezione-2.

Ricordati che per effettuare correttamente questi passaggi XAMPP deve essere attivo.

La scrittura del codice HTML

Ora fai doppio click sul file index.html all’interno di Atom, a questo punto possiamo iniziare a scrivere il codice HTML. Come avrai modo di vedere dall’immagine successiva, l’editor è pronto a lavorare.

I tag HTML

Il linguaggio HTML è un linguaggio composto da tag, elementi che danno delle informazioni al browser su come interpretare l’impaginazione e la grafica dei contenuti delle pagine web di un sito.

La struttura di un tag html

Un tag html è scritto in questo modo:

<nometag>contenuto</nometag>

Dove il nome del tag varia in base al ruolo che lo stesso ha all’interno della pagina web e proprio in base al suo ruolo, il browser lo interpreta a livello grafico.

Il nome del tag senza il simbolo ” / ” slash indica l’apertura, mentre con il simbolo ” / ” slash indica la chiusura

<nometag> contenuti </nometag>

I contenuti devono necessariamente essere racchiusi tra il tag di apertura e il tag di chiusura.

Di base una pagina web è composta da 3 tag organizzati come segue:

html, head, body che su Atom andremo a scrivere così (vedi immagine).

Come potrai vedere, posizionando su un tag il programma indica il suo inizio e la sua fine. Andiamo ad approfondire ogni singolo tag.

Il tag HTML dice al browser il tipo di documenti, il tag HEAD indica l’intestazione del documento, mentre in tag BODY è il corpo del documento dove saranno inseriti i testi e le immagini che l’utente vede quando visita un sito web.

A video per il momento non è cambiato niente fino ad ora perchè all’interno del body non siamo andati ad indicare nessun tag specifico, quindi quello che abbiamo scritto dal browser viene semplicemente interpretato come testo.

I tag h

I tag h vengono usati per indicare i titoli all’interno di una pagina, vanno da h1 ad h6 e la grandezza varia in funzione proprio del numero indicato. Prova scrivere il codice come rappresentato nell’immagine successiva, salva e ricarica il browser.

Rispetto alla versione precedente della nostra pagina web, dopo l’inserimento dei tag h1 e h2 il browser ha cambiato la visualizzazione dei contenuti perchè grazie all’inserimento dei tag è riuscito ad interpretarli.

Il concetto di base del linguaggio HTML è proprio questo, ogni tag ha un ruolo ben preciso che gli viene attribuito grazie al suo nome.

Il browser interpreta i contenuti al suo interno <nometag>contenuti</nometag> in un modo piuttosto che un altro in base al ruolo del tag html.

Nella prossima lezione andremo a creare una home page composta da più tag così da individuare il loro comportamento.