Come Imparare il Linguaggio HTML

Info sull'Autore

HTML è l'acronimo di HyperText Markup Language ed è il codice o linguaggio che viene utilizzato per la creazione dei siti web. Il codice HTML, a prima vista, può sembrare scoraggiante, se non si ha mai avuto a che fare con nessun linguaggio di programmazione, ma tutto quello di cui avrai bisogno per iniziare sarà un editor di testo e un browser internet. Imparando a riconoscere il codice HTML potrai perfino arrivare a utilizzarlo per modificare il testo nei forum online, personalizzare i tuoi profili internet o gli articoli di wikiHow. L'HTML è uno strumento molto potente per chiunque utilizzi le risorse di internet, e imparare le basi di questo linguaggio potrebbe richiedere meno tempo di quello che pensi.

Parte 1

Parte 1 di 2:

Imparare le Basi dell’HTML

1
Apri un documento HTML. La maggior parte degli editor di testo, inclusi Blocco Note e Microsoft Word per Windows e TextEdit per Mac, possono essere utilizzati per creare documenti HTML. Crea un nuovo documento, dopodiché accedi al menu File e seleziona la voce Salva con nome per salvarlo come "Pagina Web" o per modificarne l'estensione in ".html" o ".htm" in sostituzione della classica estensione ".doc", ".rtf" o ".txt".
- Potrebbe essere visualizzato un messaggio di avviso, indicante che il documento verrà modificato dal formato "Rich text" in file di testo semplice o che la formattazione del testo o le immagini contenute non verranno salvate correttamente. È tutto normale; i documenti HTML non utilizzano questi elementi, sono semplici file di testo.
- Non c'è differenza fra un file .html e un file .htm. Entrambi sono adatti ai nostri scopi.^{[1]
  X
  Fonte di ricerca}
2
Visualizza il tuo documento utilizzando un browser internet. Salva il tuo documento vuoto, dopodiché individua l'icona del tuo documento all'interno del computer e selezionalo con un doppio click del mouse per aprirlo. Il tuo file dovrebbe essere visualizzato dal tuo browser internet predefinito, come una pagina web vuota. Se così non fosse, trascina il file all'interno della barra degli indirizzi (URL) del tuo browser. Mentre modificherai il tuo documento HTML seguendo le istruzioni di questo tutorial, sarai in grado di tenere traccia dei cambiamenti per poter apprendere come impattano sulla tua pagina web.
- Nota che questa procedura non crea realmente un sito web online. La tua creazione non sarà accessibile dagli altri utenti del web, e non avrai bisogno di una connessione internet per poter testare le tue modifiche. Si tratta solo di utilizzare il tuo browser internet per interpretare il documento HTML che hai creato, come se fosse un sito web.
3
Interpreta i tag dell'HTML. I tag html non vengono visualizzati nelle pagine web come semplice testo. Vengono utilizzati dal browser per capire come visualizzare il contenuto della pagina web. Il tag di "apertura" contiene tutte le istruzioni. Ad esempio per comunicare al browser di visualizzare il testo in grassetto. Hai la necessità di utilizzare anche un tag di "chiusura" per permettere al browser di capire a quale elemento vadano applicate le istruzioni contenute nel tag di apertura. In questo esempio tutto il testo compreso nel tag di apertura e chiusura verrà visualizzato in grassetto. I tag di chiusura sono racchiusi fra parentesi angolari come i tag di apertura, ma con l'aggiunta del simbolo / dopo la prima parentesi angolare.
- Scrivi i tag di apertura racchiusi da parentesi angolari:<I tag di apertura vanno scritti qui>.
- Scrivi i tag di chiusura racchiusi da parentesi angolari, inserendo però il simbolo / dopo la prima parentesi angolare:</I tag di chiusura vanno scritti qui>)
- Prosegui nella lettura per imparare a utilizzare i tag più importanti. Per questo passaggio tutto quello che devi ricordare è la sintassi da utilizzare per scrivere i tag di apertura e chiusura: < > e </ >.
- Se stai utilizzando o consultando altri tutorial sul linguaggio HTML, potrai osservare che si riferiscono ai tag chiamandoli "elementi" e che il testo contenuto fra i tag di apertura e chiusura viene chiamato "contenuto dell'elemento".
4
Scrivi il tuo primo tag <html>. Tutti i documenti html iniziano con il tag <html> e terminano con il corrispondente tag di chiusura </html>. Questo indica al browser web che tutto ciò che è contenuto fra i due tag è descritto utilizzando codice HTML. Aggiungi questi due tag al tuo documento:
- Scrivi il seguente codice all'inizio del tuo documento: <html>.
- Premi il tasto Invio diverse volte, in modo da lasciare sufficiente spazio vuoto, dopodiché aggiungi il tag di chiusura </html>.
- Ricorda di scrivere tutto ciò che viene elencato in questo tutorial all'interno di questi due tag.
5
Crea la sezione <head> del tuo documento. All'interno dei due tag <html> e </html>, inserisci il tag di apertura <head> e il relativo tag di chiusura </head>. Lascia sufficiente spazio vuoto fra i due tag. Tutto il codice inserito nella sezione <head> non verrà visualizzato all'interno della pagina web. Prova a utilizzare il seguente codice per scoprire dove verrà visualizzato il contenuto della sezione <head>:
- All'interno dei tag <head> e </head> aggiungi i tag <title> e </title>.
- All'interno dei tag <title> e </title> aggiungi il seguente testo Come imparare l'HTML con wikiHow.
- Salva il tuo documento e aprilo utilizzando un browser internet (se hai già aperto il documento all'interno del browser, salva le nuove modifiche e aggiorna la visualizzazione di pagina del browser). Riesci a vedere quello che hai scritto sulla parte superiore della finestra del browser, sopra alla barra degli indirizzi?
6
Crea la sezione <body>. Tutto il resto del contenuto di questo documento iniziale andrà inserito nella sezione <body>, che sarà poi visualizzato all'interno della pagina web. Inserisci i tag <body> e </body> dopo il tag di chiusura </head>, ma prima del tag di chiusura </html>. Da questo punto in poi del tutorial, tutto il codice descritto andrà inserito fra i due tag che delimitano la sezione <body>. Il tuo documento html dovrebbe apparire simile al seguente (ignorando i simboli dell'elenco puntato):
- <html>
- <head>
- <title>How to Learn HTML - wikiHow</title>
- </head>
- <body>
- </body>
- </html>
7
Aggiungi il testo utilizzando diversi stili. Adesso è giunto il momento di scrivere qualcosa che tu possa effettivamente visualizzare con il tuo browser. Tutto il contenuto inserito fra i tag della sezione <body> verrà visualizzato dal tuo browser non appena salverai le modifiche al documento HTML e aggiornerai la visualizzazione di pagina del browser. Non scrivere il testo del tuo contenuto racchiuso fra parentesi angolari < o >, altrimenti il browser cercherà di interpretare ciò che hai scritto come se fosse codice HTML invece che semplice testo. Prova a scrivere semplicemente Hello world! (o qualsiasi altra cosa di tuo gradimento), dopodiché racchiudi il testo utilizzando ogni volta una coppia differente dei seguenti tag per osservare i relativi cambiamenti:
- <em>Hello world!</em> il contenuto verrà visualizzato in questo modo: Hello world!
- <strong>Hello world!</strong> il contenuto verrà visualizzato in grassetto: Hello world!
- <s>Hello world!</s> il contenuto verrà visualizzato barrato: ~~Hello world!~~
- <sup>Hello world!</sup> il contenuto verrà visualizzato come apice: ^{Hello world!}
- <sub>Hello world!</sub> il contenuto verrà visualizzato come pedice: _{Hello world!}
- Prova queste combinazioni: Come appare il testo <em><strong>Hello world!</strong></em>?
8
Dividi il testo del tuo contenuto in paragrafi. Se all'interno del tuo documento HTML, provassi ad aggiungere diverse linee di testo ti accorgeresti che il browser web non visualizza l'interruzione di riga. Dovrai indicare manualmente quando la linea di testo termina e deve andare a capo:
- <p>Questi due tag indicano un paragrafo.</p>
- Questa frase è seguita da un'interruzione di riga,<br> prima dell'inizio di questa seconda frase.
  Questo è il primo tag html che non necessita di un tag di chiusura. Questa tipologia di tag è chiamata "tag vuoti".
- Crea un'intestazione o un titolo per visualizzare i nomi delle sezioni:
  <h1>Testo dell'intestazione</h1>: è l'intestazione o titolo più grande.
  <h2>Testo dell'intestazione</h2> (intestazione di secondo livello)
  <h3>Testo dell'intestazione</h3> (intestazione di terzo livello)
  <h4>Testo dell'intestazione</h4> (intestazione di quarto livello)
  <h5>Testo dell'intestazione</h5> (intestazione più piccola)
9
Impara come si creano le liste. Esistono diversi metodi differenti per creare una lista o un elenco in una pagina web. Prova i seguenti codici di esempio e scegli quello che ti soddisfa di più. Nota che una lista è composta da una coppia di tag che deve racchiudere tutta la struttura dell'elenco (come ad esempio i tag <ul> e </ul> nel caso delle liste non ordinate) e dai singoli elementi della lista che vanno racchiusi fra una seconda coppia di tag, come ad esempio i tag <li> e </li>.
- Utilizza il seguente codice per creare un elenco puntato:
  <ul><li>Primo elemento</li><li>Secondo elemento</li><li>Terzo elemento</li></ul>
- Utilizza questo codice per creare un elenco numerato:
  <ol><li>Elemento numero 1</li><li> Elemento numero 2</li><li> Elemento numero 3</li></ol>
- Usa il seguente codice per creare una lista di definizioni:
  <dl><dt>Caffè</dt><dd>- Bevanda Calda</dd><dt>Latte</dt><dd>- Bevanda Fredda</dd></dl>
10
Ravviva la tua pagina web utilizzando le interruzioni di riga, le linee orizzontali e le immagini. Adesso è il momento di aggiungere elementi nuovi oltre al testo della tua pagina web. Prova a utilizzare i seguenti tag o seleziona i relativi link per avere maggiori informazioni. Per inserire un'immagine, avrai la necessità di utilizzare un servizio di hosting in cui memorizzare il file relativo all'immagine per poi utilizzarne l'URL per creare un link utilizzando il tag <img>:
- Usa il seguente codice per inserire un'interruzione di riga in HTML: <br>
- Usa il seguente codice per inserire una linea di separazione in HTML: <hr>
- Usa il seguente codice per inserire un'immagine: <img src="URL_tua_immagine">
11
Crea un link esterno nella tua pagina web. Puoi utilizzare il seguente codice per creare un link a un'altra pagina web o a un altro sito, ma per il momento, dato che ancora non disponiamo di un sito web, ci focalizzeremo sul creare dei link interni alla pagina web chiamati "ancore":
- Il primo passo consiste nel creare un'ancora nel punto della pagina a cui vuoi far riferimento, utilizzando il tag <a>. Assegna alla tua ancora un nome descrittivo per poterlo ricordare facilmente:
  
  <a name="Consigli">Questo è il testo che rappresenta la tua ancora.</a>
- Utilizza il tag <href> per creare un link a un'ancora o a un'altra pagina web:
  
  <a href="URL della pagina web o nome dell'ancora presente in questa pagina">Inserisci qui il testo o l'immagine che verrà visualizzato come link.</a>
- Per creare un link a un'ancora presente in un'altra pagina web, utilizza il simbolo # dopo l'URL della pagina, seguito dal nome dell'ancora. Ad esempio il seguente link http://www.wikihow.com/Learn-HTML#Tips ti riporta alla sezione Consigli di questa stessa pagina.
Pubblicità

Parte 2

Parte 2 di 2:

Imparare il Codice HTML Avanzato

1
Impara a utilizzare gli attributi. Gli attributi vengono inseriti all'interno dei tag e servono per aggiungere alterazioni e formattazioni all'elemento contenuto fra i tag di apertura e chiusura. Gli attributi non possono mai essere utilizzati da soli. Il formato con cui vanno scritti gli attributi è il seguente nome="valore", dove nome è il tipo di attributo (ad esempio "color") e valore descrive il valore associato all'attributo scelto (ad esempio "red").
- Ora ti renderai conto di aver già visto utilizzare gli attributi nel codice preso in esame fino ad ora, nella sezione Imparare le Basi dell’HTML. Il tag <img> utilizza l'attributo src, mentre le ancore utilizzano l'attributo name e i link usano l'attributo href. Hai notato come tutti questi attributi seguono il formato ___="___" visto in precedenza?
2
Sperimenta l'utilizzo delle tabelle in HTML. Creare una tabella o un grafico richiede l'utilizzo di parecchi tag differenti. Prova a giocare un po' con questi tag oppure utilizza la seguente guida per imparare in modo dettagliato come creare una tabella in HTML.
- Parti utilizzando il tag che racchiude l'intera struttura della tabella:<table></table>
- Utilizza il seguente tag per descrivere le singole righe che formano la tabella: <tr>
- Per inserire la riga di intestazione di una tabella utilizza il tag:<th>
- Per descrivere le celle delle righe successive utilizza il seguente tag: <td>
- Di seguito un esempio di come utilizzare insieme tutti questi tag:
  
  <table><tr><th>Colonna 1: Mese</th><th>Colonna 2: Denaro Risparmiato</th></tr><tr><td>Gennaio</td><td>100€</td></tr></table>
- Impara a utilizzare altri tag di intestazione. Hai già visto come utilizzare il tag <head> che viene inserito all'inizio di un documento HTML. All'interno della sezione <head>, oltre al tag <title>, puoi includere i seguenti tipi di tag:
  - Usa i tag <meta> che vengono utilizzati per fornire i metadati della pagina web. I metadati possono essere utilizzati dai motori di ricerca per classificare tutti i siti web presenti in internet. Per aumentare la visibilità del tuo sito web sui motori di ricerca, utilizza uno o più tag <meta> (questo tag non necessita di utilizzare il tag di chiusura) che specifichi al suo interno un singolo attributo associato a un valore. Ad esempio: <meta name="description" content="scrivi qui la descrizione"> oppure <meta name="keywords" content="inserisci qui la lista delle parole chiave, ognuna separata da una virgola">.
  - I tag <link> vengono utilizzati per associare altri file a una pagina web. Nella maggior parte dei casi vengono utilizzati per collegare i fogli di stile CSS. I CSS vengono utilizzati per descrivere la formattazione dei singoli elementi che compongono una pagina web, alterandone il colore, l'allineamento del testo e molti altri aspetti.
  - I tag <script> vengono utilizzati per poter usare, all'interno di una pagina web, i Javascript contenuti in un file. I Javascript vengono usati per modificare l'aspetto e il funzionamento di una pagina web in base all'interazione dell'utente.
- Sperimenta con il codice HTML reperibile in altri siti web. Uno dei metodi migliori per espandere la tua conoscenza consiste nel studiare il codice sorgente delle pagine web presenti in internet. Puoi farlo selezionando una pagina web con il tasto destro del mouse per poi scegliere la voce "Visualizza sorgente", "Visualizza sorgente pagina" o un'opzione simile dal menu contestuale apparso. In alternativa puoi accedere al menu Visualizza posto nella parte superiore del browser. Cerca di scoprire come funzionano i tag HTML che ancora non conosci o con cui non hai familiarità, oppure esegui una semplice ricerca online per scoprire velocemente la risposta alle tue domande.
  - Anche se non puoi modificare il codice HTML dei siti di altri utenti, puoi sempre copiarlo e incollarlo in un tuo documento e da qui sperimentare nuovi risultati apportando tutti i cambiamenti che desideri. Nota: senza avere accesso ai fogli di stile CSS utilizzati dal sito web di origine, non sarai in grado di visualizzare correttamente la medesima gamma di colori o la medesima formattazione degli elementi che lo compongono.
- Impara tecniche avanzate per il web design sfruttando guide complete ed esaurenti in merito. Esistono numerose risorse nel web utilizzabili per imparare tutto sui tag HTML, come ad esempio i siti W3Schools o Codecademy. Inoltre potrai sempre avvalerti di libri cartacei che spieghino l'utilizzo del codice HTML, in questo caso però consulta solo i contenuti pubblicati negli ultimi due anni così che comprendano le modifiche e gli aggiornamenti più importanti. Meglio ancora, impara a utilizzare i fogli di stile CSS per aumentare ulteriormente il controllo sull'aspetto e il layout delle pagine web. Quando saprai padroneggiare l'uso dei fogli di stile CSS, il passo successivo come web designer sarà quello di approfondire la conoscenza e l'utilizzo dei Javascript.
Pubblicità