Come imparare l'HTML

Video: Corso HTML COMPLETO gratis: da PRINCIPIANTE a ESPERTO

Contenuto

Passi
Parte 1 di 2: apprendimento delle basi dell'HTML
Parte 2 di 2: HTML avanzato
Consigli
Avvertenze
Di che cosa hai bisogno

HTML è l'abbreviazione di inglese Hyper Text Markup Language (Hyper Text Markup Language). Questo è il codice, o linguaggio, in cui viene creato il markup di base dei siti. L'apprendimento può sembrare scoraggiante se non hai mai programmato, ma in realtà tutto ciò di cui hai bisogno per iniziare è un editor di testo di base e un browser Internet. Potresti anche riconoscere alcuni esempi di markup HTML che hai incontrato su forum Internet, pagine personalizzate personalizzate o articoli di wikiHow. L'HTML è uno strumento utile per qualsiasi utente di Internet e l'apprendimento delle basi richiederà meno tempo di quanto pensi.

Passi

Parte 1 di 2: apprendimento delle basi dell'HTML

1 Apri un documento HTML. La maggior parte degli editor di testo (Notepad o Notepad ++ per Windows, TextEdit per Mac, gedit per GNU/Linux) può essere utilizzata per generare file HTML. Crea un nuovo documento e salvalo usando File → Salva con nome in formato pagina Web, o cambia l'estensione del file in .html o .htm invece di .doc, .rtf o un'altra estensione.
- Potresti ricevere un avviso che il file verrà salvato come "testo normale" anziché in formato RTF o che la formattazione e le immagini non verranno salvate. Questo va bene; per HTML queste opzioni non sono necessarie.
2 Apri il file generato in un browser. Salva il file vuoto, trovalo sul tuo computer e fai doppio clic per aprirlo. Dovrebbe aprirsi una pagina vuota nel browser. In caso contrario, trascina il file nella barra degli indirizzi del browser. Quando modifichi il file HTML, puoi aggiornare questa pagina per vedere le modifiche.
- Tieni presente che in questo modo non stai creando un sito Web su Internet. Altre persone non avranno accesso a questa pagina e non hai bisogno di una connessione Internet per testare la tua pagina locale. Il browser interpreta semplicemente il codice HTML, "leggendolo" come se fosse un sito web.
3 Comprendi cosa sono i tag di markup. A differenza del testo normale, i tag non vengono visualizzati nella pagina. Invece, dicono al browser come visualizzare la pagina e il suo contenuto. Il tag "opening" contiene istruzioni. Ad esempio, può dire al browser che il testo deve essere visualizzato come grassetto... Ha anche bisogno di un tag "end" per mostrare al browser dove finisce l'istruzione. In questo esempio, il testo tra i tag di inizio e di fine verrà visualizzato in grassetto. I tag sono scritti all'interno di segni disuguali, ma il tag di fine inizia con una barra.
- Il tag di apertura è scritto tra i segni di disuguaglianza: tag di apertura>
- Nel tag di chiusura, viene posizionata una barra prima del descrittore del tag (nome): /tag di fine>
- Continua a leggere per scoprire come vengono utilizzati i diversi tag. Per questo passaggio, devi solo ricordare il formato di registrazione. I tag sono scritti tra i segni di disuguaglianza:> e />
- In alcuni tutorial, i tag HTML sono chiamati elementi e il testo tra i tag di apertura e chiusura è chiamato contenuto dell'elemento.
4 Digita html> tag nell'editor. Ogni file HTML deve iniziare con un tag html> e finisci con un tag / html>... Questi tag dicono al browser che tutto il contenuto tra i tag è in HTML. Aggiungi questi tag al tuo documento:
- Spesso i file HTML iniziano con la linea DOCTYPE html>il che significa che i browser devono riconoscere l'intero file come HTML. Questa riga non è necessaria, ma può aiutarti a risolvere i problemi di compatibilità.
- Comporre html> nella parte superiore del documento.
- Premi Invio o A capo più volte per creare più righe vuote, quindi digita / html>
- ricordati che il tutto il codice che creerai in questo articolo dovrà essere scritto tra questi due tag.
5 Crea una sezione head> nel file. Tra i tag html> e / html>, crea un tag di apertura testa> e il tag di chiusura / testa>... Aggiungi alcune righe vuote tra di loro. Il contenuto scritto tra i tag head> e / head> non viene visualizzato nella pagina stessa. Segui questi passaggi e vedrai a cosa serve questo tag:
- Tra i tag head> e / head> scrivi titolo> e / titolo>
- Tra i tag title> e / title> scrivi Come imparare l'HTML - wikiHow.
- Salva le modifiche e apri il file in un browser (o aggiorna la pagina se il file è già aperto). Vedi il testo che appare nel titolo della pagina sopra la barra degli indirizzi?
6 Crea un corpo> sezione. Tutti gli altri tag e testo in questo esempio sono scritti nella sezione del corpo, il cui contenuto viene visualizzato nella pagina. Dopo tag di chiusura / testa>, ma Prima tag / html> aggiungi tag corpo> e / corpo>... Per il resto di questo articolo, lavora con la sezione del corpo. Il tuo file dovrebbe assomigliare a questo:
html>
testa>
title> Come Imparare l'HTML - wikiHow / title>
/ testa>
corpo>
/ corpo>
/ html>
7 Aggiungi testo utilizzando stili diversi. È ora di aggiungere il vero contenuto alla pagina! Tutto ciò che scrivi tra i tag del corpo verrà visualizzato sulla pagina dopo essere stato aggiornato nel browser. Non usare simboli o >poiché il browser proverà a interpretare il contenuto come tag anziché come testo. Scrivere Ciao! (o qualunque cosa ti piaccia), quindi prova ad aggiungere questi tag al testo e guarda cosa succede:
- em> Ciao a tutti! / em> rende il testo "in corsivo": Ciao!
- forte> Ciao a tutti! / forte> rende il testo "grassetto": Ciao!
- s> Ciao a tutti! / s> testo barrato: ~~Ciao!~~
- sup> Ciao a tutti! / sup> visualizza il carattere come apice:
- sub> Ciao a tutti! / sub> visualizza il carattere come pedice: _Ciao!
- Prova diversi tag insieme. Come apparirà em> forte> Ciao a tutti! / forte> / em>?
8 Dividi il testo in paragrafi. Se provi a scrivere più righe di testo in un file HTML, noterai che le interruzioni di riga non vengono visualizzate nel browser. Per dividere il testo in paragrafi, devi aggiungere i tag:
- p> Questo è un paragrafo separato. / p>
- Questa frase è seguita da un'interruzione di riga br> prima dell'inizio di questa riga.
  Questo è il primo tag che non richiede un tag finale. Questi tag sono chiamati tag "vuoti".
- Crea intestazioni per mostrare i titoli delle sezioni:
  h1> testo intestazione / h1>: titolo più grande
  h2> testo intestazione / h2> (titolo di secondo livello)
  h3> testo intestazione / h3> (titolo di terzo livello)
  h4> testo intestazione / h4> (titolo di quarto livello)
  h5> testo intestazione / h5> (titolo più piccolo)
9 Impara a creare elenchi. Esistono diversi modi per creare elenchi in una pagina Web. Prova le opzioni di seguito e decidi quale ti piace di più. Nota che è necessaria una coppia di tag per l'elenco nel suo insieme (ad esempio, ul> e / ul> per un elenco puntato) e ogni elemento dell'elenco è evidenziato con una coppia di tag diversa, ad esempio li> e / li>.
- Elenco puntato:
  ul> li> Prima riga / li> li> Seconda riga / li> li> E così via / li> / ul>
- Elenco numerato:
  ol> li> Uno / li> li> Due / li> li> Tre / li> / ol>
- Elenco definizioni:
  dl> dt> Caffè / dt> dd> - bevanda calda / dd> dt> Limonata / dt> dd> - bevanda fredda / dd> / dl>
10 Impagina la pagina usando interruzioni di riga, linee orizzontali e Immagini. È il momento di aggiungere qualcosa di diverso dal testo alla pagina. Prova i seguenti tag o segui i collegamenti per ulteriori informazioni. Utilizza un servizio di hosting online per creare un collegamento all'immagine che desideri pubblicare:
- Linea orizzontale: h>
- Inserisci immagine: img src = "link immagine">
11 Aggiungi collegamenti. Puoi utilizzare questi tag per creare collegamenti ipertestuali ad altre pagine e siti, ma poiché non hai ancora un sito Web, ora imparerai come creare collegamenti di ancoraggio, ovvero collegamenti a punti specifici su una pagina:
- Crea un'ancora con il tag a> dove vuoi collegare nella pagina. Trova un nome chiaro e memorabile:
  
  a name = "Suggerimenti"> Il testo a cui ti stai collegando. / a>
- Usa il tag href> per creare un collegamento relativo o un collegamento a una risorsa esterna:
  
  a href = "link alla pagina o nome dell'ancora all'interno della pagina"> Testo o immagine che fungerà da collegamento. / a>
- Per collegarsi a un collegamento relativo in un'altra pagina, aggiungere un segno # dopo il collegamento principale e il nome dell'ancora. Ad esempio, https://en.wikihow.com/learn-HTML#Tips si collega alla sezione dei suggerimenti di questa pagina.

Parte 2 di 2: HTML avanzato

1 Conosci gli attributi. Gli attributi sono scritti all'interno del tag, indicando informazioni aggiuntive. Il formato degli attributi è il seguente: nome = "valore", dove titolo definisce un attributo (ad esempio, colore per un attributo di colore) e il valore indica il suo valore (ad esempio, rosso per il rosso).
- Gli attributi sono stati effettivamente utilizzati nella sezione precedente sulle basi dell'HTML. Il tag img> usa l'attributo src, gli ancoraggi di collegamento relativi utilizzano l'attributo nomee i collegamenti usano l'attributo href... Come hai già notato, tutti gli attributi sono scritti nel formato ___='___’.
2 Sperimenta con le tabelle HTML. La creazione di una tabella prevede l'utilizzo di vari tag. Puoi sperimentare o leggere istruzioni più dettagliate.
- Crea tag tabella:tavolo> / tavolo>
- Racchiudere il contenuto di ogni riga nella tabella nei tag: tr>
- L'intestazione della colonna è definita dal tag: th>
- Celle nelle righe successive: td>
- Un esempio di utilizzo di questi tag:
  
  tabella> tr> th> Colonna 1: mese / th> th> Colonna 2: risparmio / th> / tr> tr> td> gennaio / td> td> 5000 rubli / td> / tr> / tabella>
3 Impara i tag aggiuntivi della sezione di testa. Hai già imparato il tag head> che si trova all'inizio di ogni file html. Oltre al tag title>, ci sono altri tag per questa sezione:
- Meta tag che contengono metadatiutilizzato dai motori di ricerca per indicizzare il sito. Per rendere più facile la ricerca del tuo sito nei motori di ricerca, utilizza uno o più meta>tag di apertura (non sono richiesti tag di chiusura).Usa un attributo e un valore per tag: meta name = "descrizione" content = "descrizione della pagina">; o meta name = "parole chiave" content = "parole chiave separate da virgole">
- Link> tag che puntano a file di terze parti, come fogli di stile (CSS), che vengono creati utilizzando un diverso tipo di codifica e consentono di modificare la pagina HTML utilizzando il colore, l'allineamento del testo e molte altre funzionalità.
- I tag script> utilizzati per allegare file JavaScript alla pagina. Questi file sono necessari per modificare la pagina in modo interattivo (in risposta alle azioni dell'utente).
4 Sperimenta con il codice HTML di altri siti. Visualizzare il codice sorgente di altre pagine Web è un ottimo modo per imparare l'HTML. Puoi fare clic con il tasto destro sulla pagina e selezionare Visualizza sorgente o qualcosa di simile dal menu in alto del tuo browser. Cerca di capire cosa fa un tag sconosciuto o cerca in Internet informazioni al riguardo.
- Anche se non puoi modificare i siti di altre persone, puoi copiare il codice sorgente nel tuo file per sperimentare con i tag in un secondo momento. Tieni presente che il markup CSS potrebbe non essere disponibile e che i colori e la formattazione potrebbero apparire diversi.
5 Inizia a esplorare guide più dettagliate. Ci sono molti siti su Internet dedicati ai tag HTML, come W3Schools o HTMLbook. Ci sono anche libri cartacei in vendita, ma cerca di trovare l'ultima edizione man mano che gli standard cambiano e si evolvono. Meglio ancora, padroneggia i CSS per avere molto più controllo sul layout e sull'aspetto del tuo sito. Dopo aver appreso i CSS, i web designer di solito imparano JavaScript.

Consigli

Notepad ++ è un ottimo programma gratuito, simile al normale Blocco note, ma puoi salvare e testare il tuo codice nel tuo browser online. (Supporta anche quasi tutti i linguaggi: HTML, CSS, Python, JavaScript e così via.)
Trova qualche semplice pagina in rete, salva il codice sul tuo computer e sperimentalo. Prova a spostare il testo, cambiare il carattere, sostituire le immagini - qualunque cosa!
Puoi tenere un quaderno dove scrivi i tag in modo da averli sempre a portata di mano. Puoi anche stampare questa pagina e fare riferimento ad essa.
Quando scrivi il codice, fallo con attenzione in modo che tu e le altre persone possiate capirlo. Usa! - Inserisci commento qui -> per i commenti HTML: non verranno riportati nella pagina, ma saranno visibili nel documento del codice.
XML e RSS stanno guadagnando popolarità. Il codice per le pagine contenenti le tecnologie XML e RSS è più difficile da leggere e comprendere per un utente inesperto, ma questi strumenti sono piuttosto utili.
I tag di markup in HTML non fanno distinzione tra maiuscole e minuscole, ma consigliamo di utilizzare solo lettere minuscole (come negli esempi in questo articolo) sia per la standardizzazione che per la compatibilità XHTML.

Avvertenze

Alcuni tag sono andati fuori uso negli ultimi anni e sono stati sostituiti da nuovi che danno gli stessi o alcuni effetti aggiuntivi.
Se desideri testare la tua pagina, vai al sito W3 e controlla i moderni requisiti HTML. Gli standard HTML cambiano nel tempo e alcuni tag vengono sostituiti da nuovi che funzionano meglio nei browser moderni.