Manuale di HTML per Principianti

Germano Pettarin

• Publisher: HOW2 Edizioni
• Year: 2017
• eBook ISBN: 9788893051354
• Topic: Computer Science
• Subtopic: Programming
• Index: Computer Science

Grazie a questo libro, facilissimo e ricco di pratiche esercitazioni, imparerai a realizzare la tua prima pagina web e infine il tuo primo sito in HTML. Leggendo questo libro, infatti, seguirai un corso di HTML base che, passo dopo passo, ti spiegherà trucchi e segreti per diventare un vero programmatore. Parti da zero e ti mancano le basi?
Non preoccuparti, questo manuale è pensato proprio per te che sai appena accendere il computer.
Partiremo, infatti, dalle nozioni basilari, con un linguaggio semplice e alla portata di tutti. Dimentica i noiosi classici libri di programmazione, pesanti e ostici anche per gli addetti ai lavori.
Questo libro è il contrario: vuole farti imparare l'HTML in modo divertente e stimolante.
Magari questa guida ti piacerà così tanto da spingerti a imparare poi anche gli altri linguaggi di programmazione, chi può dirlo!
Ma come tutte le cose, bisogna sempre partire dal primo passo, per cui ti auguro in bocca al lupo e un fantastico apprendimento del linguaggio HTML!
Per chi è questo libro: Aspiranti programmatori
Studenti di informatica
Aspiranti web designer
Contenuti principali di questa guida: Come si costruisce una pagina web in HTML
Quali sono gli elementi di base di questo linguaggio
Come formattare il testo
Come gestire immagini, suoni e filmati
Come fare gli elenchi
Come fare le tabelle
Come creare e gestire i frames
I principali oggetti HTML
Come pubblicare un sito
Fondamenti del CSS
Cenni al Javascript
Cenni agli altri linguaggi di programmazione

1. CONCETTI BASE DEL WEB

 

1.1. Internet e pagine Web

 

Che cos’è Internet ormai è noto a tutti. Internet è una rete a livello mondiale che mette a disposizione degli utenti collegati informazioni, file, materiale di vario genere in forma di pagine ipertestuali, oltre ad altri servizi che vedremo in seguito.

Internet assomiglia alla rete telefonica internazionale: nessuno ne detiene il controllo completo, ma le sue interconnessioni le permettono di operare come un'unica grande rete.

Come vedremo meglio in seguito, le pagine ipertestuali (o “ipertesto” o “ipermedia”) sono delle pagine simili a quelle di una rivista: contengono testo, in vari formati, disegni, immagini, ecc.

In particolare, dato che sono visualizzate al computer, possono contenere dei filmati e dei suoni.

Ma quello che differenzia in modo specifico un testo da un ipertesto è la presenza dei link o collegamenti ipertestuali.

 

 

 

In figura è visualizzata la pagina Web della casa editrice HOW2. Le frasi “HOME”, “STAFF”, “PRODOTTI”… e le immagini sono link.

Un link, in pratica, è un collegamento ad un’altra pagina ipertestuale: si attivano facendo clic sulla parola o sull'immagine. Facendo clic su un collegamento ipertestuale ti sposti su un altro documento. Questi documenti possono essere altre pagine di informazioni, altri siti Web, immagini, filmati o suoni.

Un link ha un aspetto simile al seguente: questo è un link. Ma anche un’immagine può essere un link: con un clic sul link vai alla pagina ipertestuale indicata. Ad esempio, se ti trovi su un sito di acquisti online, con un clic sul link Acquista ora vai alla pagina relativa alle indicazioni per il pagamento.

Quando il cursore è su un link assume l’aspetto di una piccola mano, con l’indice puntato proprio come quando premi un pulsante.

 

La lettura di ipertesti è diversa da quella sequenziale, pagina per pagina, di un libro.

Con un link si può passare da una pagina di un sito a un’altra, tornare indietro di tre pagine in un solo passaggio, ecc.

Quindi quando leggi un ipertesto puoi seguire molti percorsi alternativi.

Riassumendo i link sono particolari parole o immagini (dette anche hot word) che permettono al lettore di passare ad un'altra parte del documento, o ad un altro documento logicamente collegato al precedente, semplicemente cliccando sul link stesso.

Un ipertesto relativo alla presentazione di una ditta, potrà, ad esempio, mostrarci una immagine del prodotto offerto dalla ditta quando facciamo clic sul nome del prodotto.

 

L’insieme delle pagine ipertestuali prende il nome di World Wide Web: (ragnatela estesa a livello mondiale).

Il WWW consente quindi di consultare l’ipertesto distribuito spostandosi, senza che te ne accorgi, da un documento contenuto in un elaboratore tedesco a un’immagine fornita da un server australiano a un suono memorizzato in un computer indiano, con clic del mouse; Internet è “semplicemente” la rete di collegamento che supporta i calcolatori “nodi” dell’ipertesto WWW.

Per fare in modo che tutti gli elaboratori possano passarsi i dati e leggerli nello stesso modo sono stati concordati un protocollo di trasferimento, detto HTTP (HyperText Transfer Protocol) ed un linguaggio di formattazione, detto HTML (HyperText Markup Language) con cui viene scritta una pagina ipertestuale. Quindi, quando viene spedita una pagina Web da un computer ad un altro si seguono delle regole per trasmissione: è come il dialogo tra due persone. Sicuramente se due persone devono colloquiare seguono, anche inconsciamente, delle regole: cominci a parlare tu, se non capisco ti chiedo di ripetere, … . Regole simili ci sono tra i computer che si mandano le pagine ipertestuali. Inoltre, come le due persone devono parlare la stessa lingua per potersi comprendere, così avviene tra i computer.

Come noi riusciamo ad interpretare il linguaggio parlato elaborando il contenuto, così nel computer ci deve essere un particolare programma, detto browser, che interpreta il linguaggio HTML per impaginare il testo e predisporre i link. I browser più conosciuti e usati sono Chrome, Microsoft Edge, Internet Explorer, Firefox, Safari… che integrano anche le funzionalità per utilizzare gli altri servizi di rete.

Un concetto fondamentale, spesso fonte di confusione, è che Internet non è l’insieme delle pagine Web.

Internet è la rete di calcolatori che collega elaboratori situati in ogni parte del mondo. In realtà Internet è una rete di reti, cioè, collega fisicamente tra loro centinaia di migliaia di reti locali di elaboratori.

Quindi Internet è l’insieme dei computer, dei cavi, dei dispositivi fisici tutti connessi tra loro. Internet non è l’insieme delle pagine Web: è solo la parte fisica. L’insieme delle pagine Web è il World Wide Web (WWW).

I segreti svelati in questo capitolo

 

Ti riporto in breve alcuni dei punti più interessanti che abbiamo affrontato insieme in questo primo capitolo:

. Un ipertesto è un particolare tipo di testo dove la lettura non è per forza tutta di seguito, ma è possibile spostarsi da un punto ad un altro e tornare indietro. Questo grazie ai collegamenti ipertestuali o link.

. I link (o collegamenti ipertestuali) sono dei particolari punti del testo che, con un clic ti portano a un’altra pagina, ti fanno navigare tra le pagine Web.

. HTML è il linguaggio che ti permette di costruire una pagina ipertestuale, una pagina Web: un testo dove, oltre a immagini, suoni e filmati, ci sono i link per passare da una pagina ad un’altra.

. Il browser è il programma che permette di visualizzare i contenuti delle pagine web scritte in HTML: il browser capisce il codice HTML, lo interpreta e ti mostra quello che definisce. Il programma che apri per navigare in internet è il browser: Edge (una volta Internet Explorer), Firefox, Chrome, Safari e Opera sono tutti dei Browser.

. Il World Wide Web (WWW) è l’insieme di tutte le pagine Web, cioè tutte le informazioni che può trovare in rete. Non si deve far confusione tra il WWW e

. Internet che è la rete, o meglio l’insieme di reti collegate tra loro, capaci di scambiarsi informazioni, “dialogare” tra loro tramite le pagine Web. Oggi internet rappresenta la rete più vasta esistente a livello mondiale.

Alla fine di ogni capitolo sono proposti degli esercizi per verificare e consolidare le conoscenze che hai acquisito. Sono proposti sotto forma di domanda multipla, se gli argomenti erano prettamente teorici, o come applicazione pratica. Alla fine è sempre presente la soluzione.

Domande

1. Internet è:

a) Un ipertesto distribuito;

b) Una rete di calcolatori;

c) Un browser;

d) Un protocollo di comunicazione.

2. Cosa si intende per WWW:

a) È un sinonimo di internet;

b) È l’insieme delle pagine ipertestuali;

c) È l’insieme dei calcolatori collegati alla rete;

d) È un protocollo di rete.

3. Quale di questi è un browser?

a) Windows Mail;

b) In...

Table of contents

• Sommario
• INTRODUZIONE: PERCHÉ HAI BISOGNO DI QUESTO LIBRO
• 1. CONCETTI BASE DEL WEB
• I segreti svelati in questo capitolo
• Domande
• 2. una prima pagina html
• I segreti svelati in questo capitolo
• Domande
• 3. ELEMENTI DI BASE DEL LINGUAGGIO HTML
• 3.1. Il tag <html>...</html>
• 3.2. La struttura di una pagina html
• 3.3. Titolo di una pagina web
• 3.4. Il corpo di una pagina Web
• 3.5. Modificare il colore di sfondo
• 3.6. Inserire una immagine come sfondo
• 3.7. Alcune estensioni dei file
• 3.8. Le immagini animate
• 3.9. Il colore del testo nel corpo
• 3.10. I margini del testo
• 3.11. Commentare il codice
• I segreti svelati in questo capitolo
• Esercizi
• 4. LA FORMATTAZIONE DEL TESTO
• 4.1. Andare a capo in una pagina web
• 4.2. Allineamento del testo
• 4.3. Cambiare colore, grandezza e font di un testo
• 4.4. Grassetto, corsivo, sottolineato, barrato
• 4.5. Altre formattazioni
• 4.6. Testo scorrevole
• 4.7. Riga separatrice
• 4.8. Apice e pedice
• 4.9. Come scrivere uno spazio: i caratteri speciali
• 4.10. I paragrafi
• 4.11. Stili di paragrafi
• I segreti svelati in questo capitolo
• Esercizi
• 5. IMMAGINI, SUONI E FILMATI
• 5.2. Suoni e musica: novità di HTML5
• 5.3. Il tag <AUDIO>
• 5.4. Video
• 5.5. Dove trovare immagini, file musicali, video (legalmente)
• I segreti svelati in questo capitolo
• Esercizio
• 6. GLI ELENCHI PUNTATI E NUMERATI
• 6.1. Liste non numerate
• 6.2. Liste numerate
• 6.3. Elenchi puntati e numerati nidificati
• 6.4. Liste di definizione
• I segreti svelati in questo capitolo
• Esercizi
• 7. I LINK
• 7.1. Il tag <A HREF>
• 7.2. Il tag <A NAME>...</A>
• 7.3. Mailto
• 7.4. I colori dei link
• I segreti svelati in questo capitolo
• Esercizi
• 8. LE TABELLE
• 8.1. Come inserire una tabella: il tag <table>...</table>
• 8.2. Definizione di una tabella
• 8.3. Inserire righe e celle: i tag <tr>...</tr> e <td>…</td>
• 8.4. Inserire il colore di sfondo per le righe e le celle
• 8.5. Modificare l’altezza della riga
• 8.6. Modificare la larghezza della colonna
• 8.7. Allineare il testo delle celle
• 8.8. Definire la riga di intestazione
• 8.9. Unire le celle: rowspan e colspan
• I segreti svelati in questo capitolo
• Esercizi
• 9. I FRAMES
• 9.1. Il tag <frameset>...</frameset>
• 9.2. <FRAME>
• 9.3. Suddividere un frame in altri frames
• I segreti svelati in questo capitolo
• Esercizi
• 10. GLI OGGETTI HTML
• 10.1. Casella di testo
• 10.2. Casella di controllo
• 10.3. Pulsante di opzione
• 10.4. Casella di riepilogo
• 10.5. Riquadro di testo
• 10.6. I pulsanti
• I segreti svelati in questo capitolo
• Esercizi
• Soluzioni
• 11. PUBBLICARE IL SITO
• 11.2. Scegliere il provider
• 11.3. Pubblichiamo un sito su alter vista
• 11.4. Prepariamo un sito
• 11.5. Pubblichiamo il sito
• I segreti svelati in questo capitolo
• Esercizi
• 12. CENNI AL CSS: MIGLIORARE L’ASPETTO DELLE PAGINE WEB
• 12.2. Dove scrivere il codice CSS
• 12.3. Utilizzo del CSS all’interno del file
• 12.4. Utilizzo del CSS all’esterno del file: i fogli di stile
• 12.5. A cosa applicare le regole CSS
• 12.6. Altre regole CSS per il testo
• 12.7. Il selettore universale
• 12.8. Le regole CSS per le immagini
• 12.9. Creare regole diverse per lo stesso tag: gli attributi ID e CLASS
• 12.10. I commenti
• I segreti svelati in questo capitolo
• Esercizi
• Soluzioni
• 13. cenni DI JAVASCRIPT
• 13.2. Subito un esempio di codice JavaScript
• 13.3. Miglioriamo un po’ il programma: una prima funzione
• 13.4. Facciamo un quiz!
• 13.5. Un po’ di teoria: elementi di base del linguaggio JavaScript
• 13.6. Come si scrive un programma JavaScript: programmi e sottoprogrammi
• 13.7. Esempio di suddivisione di un programma
• 13.8. Gli eventi
• 13.9. Istruzione if ... else if ... else
• 13.10. Istruzione switch
• 13.11. Le istruzioni che ripetono istruzioni: cicli for() e while()
• 13.12. Le variabili
• 13.13. Il ciclo while()
• 13.14. Il ciclo for()
• 13.15. Commentare il codice
• I segreti svelati in questo capitolo
• Esercizi
• 14. brevi cenni ad altri linguaggi: PHP, MySQL, AJAX, HTML per il mobile
• 14.2 Il Php
• 14.3. MySql
• 14.4. Ajax
• 14.5. HTML per il mobile
• I segreti svelati in questo capitolo
• Domande
• 15. conclusioni: GLI ARTIGIANI DEL SOFTWARE
• GLOSSARIO