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:
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.
3 commenti
Aggiungi il tuo
3 Pingback
HTML BASE - Lezione 2 - Corsi Formazione Online
[…] prossima lezione andremo a scaricare Atom, il programma che useremo per scrivere il codice […]
HTML BASE - Lezione 4 - Corsi Formazione Online
[…] codice duplica lezione-3 e rinominala in lezione-4 con gli stessi passaggi che abbiamo visto nella lezione precedente. Poi apri il file index.html con […]
HTML BASE - Lezione 5 - Corsi Formazione Online
[…] duplica lezione-4 e rinominala in lezione-3 con gli stessi passaggi che abbiamo visto sia nella lezione 3 che nella lezione […]