Imparare le Basi dell’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. 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. 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". 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. 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? 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> 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>? 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) 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> 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"> 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.
Apri un documento HTML. Visualizza il tuo documento utilizzando un browser internet. Interpreta i tag dell'HTML. Scrivi il tuo primo tag <html>. Crea la sezione <head> del tuo documento. Crea la sezione <body>. Aggiungi il testo utilizzando diversi stili. Dividi il testo del tuo contenuto in paragrafi. Impara come si creano le liste. Ravviva la tua pagina web utilizzando le interruzioni di riga, le linee orizzontali e le immagini. Crea un link esterno nella tua pagina web.
https://www.wikihow.com/Learn-HTML
Learning Basic HTML