Imparare l'HTML

Video: Corso HTML COMPLETO gratis: da PRINCIPIANTE a ESPERTO

Contenuto

Al passo
Parte 1 di 2: apprendimento delle basi dell'HTML
Parte 2 di 2: apprendimento dell'HTML avanzato
Suggerimenti
Avvertenze
Necessità

HTML è l'abbreviazione di Hyper Text Markup Language, è il codice o linguaggio che viene utilizzato per la creazione di siti Web. Potrebbe sembrare complicato se non l'hai mai programmato prima, ma per provarlo tutto ciò di cui hai bisogno è un semplice programma di elaborazione testi e un browser Internet. Potresti riconoscere del codice HTML da forum, profili online o articoli wikiHow. L'HTML è una risorsa utile per chiunque utilizzi Internet e l'apprendimento dell'HTML potrebbe richiedere meno tempo di quanto ci si potrebbe aspettare.

Al passo

Parte 1 di 2: apprendimento delle basi dell'HTML

Apri un documento HTML. La maggior parte dei programmi di elaborazione testi, inclusi Blocco note o Word per Windows e Editor di testo per Mac, possono essere utilizzati per creare documenti HTML. Apri un nuovo documento e seleziona File → Salva con nome dal menu in alto per salvare il documento come pagina web, oppure cambia l'estensione del file da ".doc", ".rtf" o qualsiasi altra cosa a ".html" o ".htm ".
- È ora possibile visualizzare un avviso che indica che il documento viene modificato dal formato RTF (Rich Text Format) al formato "testo normale" e che alcune opzioni di formattazione e immagini non vengono salvate correttamente. Puoi ignorare questo avviso; I documenti HTML non utilizzano queste opzioni.
- I file .html e .htm sono gli stessi. Funziona entrambi.
Visualizza il tuo documento con un browser. Salvare il documento vuoto, chiuderlo e quindi fare doppio clic sul documento nella posizione in cui è stato salvato per aprirlo di nuovo. Il tuo documento dovrebbe ora essere aperto dal tuo browser come una pagina web vuota. Se non funziona, trascina l'icona del file sulla barra degli indirizzi del tuo browser. Successivamente, se modifichi il tuo documento HTML seguendo i passaggi in questo articolo, tornerai al browser per verificare l'aspetto delle modifiche nel codice.
- Nota: la tua pagina web non è ancora online. La pagina non è accessibile ad altri e non è necessaria una connessione Internet funzionante per testarla. Basta usare il browser per "leggere" il documento HTML come se fosse un sito web.
Comprendi cosa sono i "tag". I tag non sono visibili nella pagina web finale, come il testo normale. I tag indicano al browser come visualizzare la pagina e il contenuto sulla pagina. Il tag iniziale contiene le istruzioni. Ad esempio, può indicare al browser di visualizzare il testo in grassetto. Il tag di fine è necessario per indicare al browser dove si applicano le istruzioni: in questo esempio, tutto il testo tra il tag di inizio e quello di fine è in grassetto. Anche i tag finali vengono inseriti tra parentesi, ma una barra segue la prima parentesi.
- Scrivi i tag iniziali tra parentesi: questo è il giorno di inizio>
- Scrivi i tag di fine tra parentesi, ma metti una barra dopo la prima parentesi: /questo è il tag di chiusura>)
- Leggi più avanti l'articolo su come scrivere tag funzionali. In questo passaggio, devi solo ricordare in che modo scrivere i tag:> e />.
- In altri corsi HTML, i tag vengono anche chiamati "elementi" e il testo tra i tag di apertura e di chiusura viene anche chiamato "contenuto dell'elemento".
Scrivi il tuo primo tag html>. Ogni documento HTML inizia con un file html>tag e termina con un / html>etichetta. Questo dice al browser che tutto ciò che si trova tra questi tag è scritto in HTML. Aggiungi questi tag al tuo documento:
- Scrivi html> nella parte superiore del documento.
- Premi Invio o Invio più volte per darti un po 'di spazio, quindi scrivi / html>
- Ricordati qualunque cosa in questo articolo tra questi due tag.
Rendi la testa> parte del tuo documento. Tra i tag html> e / html> scrivi un file testa>tag iniziale e un file / head>-end tag. Fai di nuovo dello spazio tra questi tag. Qualsiasi cosa scritta tra questi tag non sarà visibile sulla pagina web stessa. Prova i seguenti passaggi e vedi se riesci a vedere dove vengono visualizzate le informazioni:
- Scrivi tra i tag head> e / head>: titolo> e / titolo>
- Tra i tag title> e / title> scrivi: Come imparare l'HTML (con immagini) - wikiHow.
- Salvare il documento e aprirlo in un browser (o salvare il documento e aggiornare la pagina nel browser se la pagina era ancora aperta). Vedi quello che hai appena scritto nella parte superiore della pagina, sopra la barra degli indirizzi?
Crea un corpo> sezione. Tutto il resto in questo documento per principianti viene inserito nella sezione corpo> e viene visualizzato nella pagina web. Dopo il tag / head>, ma di fronte a il tag / html> che scrivi corpo> e / body>. Tutto ciò di cui discuteremo ulteriormente in questo articolo, lo inseriamo tra i tag del corpo. Ora dovresti avere un documento simile a questo (senza i punti elenco):
- html>
- testa>
- title> impara l'HTML - wikiHow / title>
- / head>
- corpo>
- / body>
- / html>
Aggiungi testo in stili diversi. Ora è il momento di iniziare a scrivere qualcosa che sarà effettivamente visibile nel browser! Tutto ciò che scrivi all'interno dei tag del corpo sarà visibile nel browser dopo aver salvato le modifiche e aggiornato la pagina all'interno del browser. Scrivi non qualcosa con i segni e >perché il tuo browser le interpreterà come istruzioni HTML invece di testo normale. Scrivi per esempio Ciao mondo! (Inglese per "Hello world!", Questo è il testo standard globale come primo esempio in qualsiasi corso di programmazione in un particolare linguaggio di programmazione) o qualcos'altro, e inserisci i seguenti tag prima e dopo il testo e guarda cosa succede:
- em> Ciao mondo! / em> sembra un testo in corsivo: Ciao mondo!
- forte> Ciao mondo! / forte> sembra un testo in grassetto: Ciao mondo!
- s> Ciao mondo! / s> sembra un testo barrato: ~~Ciao mondo!~~
- sup> Ciao mondo! / sup> sembra in apice:
- sub> Hello world! / sub> sembra didascalia: _{Ciao mondo!}
- Prova le combinazioni: come vede em> strong> Hello world! / strong> / em> esci?
Dividi il testo in paragrafi. Se inserisci diverse righe di testo nel documento, vedrai che tutte le righe vengono posizionate una dopo l'altra. Devi programmare tu stesso nuove righe e righe vuote:
- p> Questa è una sezione separata./p>
- Questa frase è sulla prima riga e questa frase sulla successiva.
  Questo è il primo tag che incontriamo che non ha bisogno di un tag di fine! Chiamiamo uno di questi tag tag vuoto.
- Crea intestazioni per rendere chiari i nomi delle sezioni:
  h1> intestazione / h1>: l'intestazione più grande possibile
  h2> intestazione / h2> (l'intestazione di 2 livelli)
  h3> intestazione / h3> (l'intestazione di 3 livelli)
  h4> intestazione / h4> (l'intestazione di 4 livelli)
  h5> intestazione / h5> (l'intestazione più piccola possibile)
Impara a creare elenchi. Esistono diversi modi per creare elenchi su una pagina web. Prova i seguenti metodi per scoprire cosa ti piace di più. Nota che una coppia di tag viene posizionata attorno all'intero elenco (come i tag ul> e / ul> per elenchi non ordinati) e che una coppia di tag diversa viene posizionata attorno a ciascun elemento all'interno della lista, come li> e / li> .
- Usa il codice seguente per creare elenchi puntati:
  ul> li> Un elemento / li> li> Un altro elemento / li> li> Un altro elemento / li> / ul>
- Oppure questo codice per creare elenchi numerati:
  ol> li> Elemento 1 / li> li> Elemento 2 / li> li> Elemento 3 / li> / ol>
- O questo codice per creare un cosiddetto elenco di definizioni:
  dl> dt> Caffè / dt> dd> - Bevanda calda / dd> dt> Latte / dt> dd> - Bevanda fredda / dd> / dl>
Rendi la tua pagina più attraente con nuove linee, linee orizzontali e immagini. Ora è il momento di iniziare ad aggiungere altre cose alla tua pagina. Prova i seguenti tag (l'immagine deve essere pubblicata online in modo da poter utilizzare un collegamento all'immagine):
- Inserisci una riga: br> o hr>
- Inserisci immagini: img src = "the_url_of_your_image">
Inserisci collegamenti ad altri punti della pagina. Puoi anche utilizzare questo codice per collegarti ad altre pagine e siti web, ma poiché non hai ancora un sito web, ci concentreremo sugli "ancoraggi", che sono punti specifici della pagina a cui puoi collegarti:
- Innanzitutto, crea un'ancora con il tag a> nel punto della pagina a cui desideri collegarti. Dai alla tua ancora un nome chiaro e facile da ricordare:
  
  a name = "Tips"> Questo è il testo attorno al quale posizionate l'ancora./a>
- Usa il tag href> per collegarti al tuo ancoraggio o a un'altra pagina web:
  
  a href = "URL della pagina web o nome dell'ancora su questa pagina"> Scrivi il testo o l'immagine mostrata come link qui./a>
- Per creare un collegamento a un'ancora su un'altra pagina, aggiungi il carattere # dopo l'URL, seguito dal nome dell'ancora. Ad esempio, http://www.wikihow.com/HTML-leren#Tips ti porterà direttamente alla sezione "Suggerimenti" in questa pagina.

Parte 2 di 2: apprendimento dell'HTML avanzato

Informazioni sugli attributi. Gli attributi vengono inseriti all'interno del tag e vengono utilizzati per apportare ulteriori modifiche al "contenuto dell'elemento" tra il tag iniziale e quello finale. Non stanno mai soli. Sono scritti nel modo seguente: nome = "valore". nome rappresenta il nome dell'attributo (ad esempio, "color") e valore descrive questo caso particolare (ad esempio "rosso").
- Se hai esaminato attentamente nella parte precedente di questo articolo, hai già riscontrato attributi. Il tag img> utilizza l'attributo src, un'ancora utilizza l'attributo nome e i collegamenti utilizzano l'attributo href. Puoi dire che sono tutti di dimensioni ___='___’ da seguire.
Sperimenta con le tabelle HTML. Per creare una tabella o un grafico sono necessari diversi tag:
- Inizia con i tag della tabella ("table" in inglese) attorno all'intera tabella:tabella> / tabella>
- Posiziona i tag attorno al contenuto di ogni riga: tr>
- Posiziona le intestazioni di colonna nella prima riga: th>
- Posiziona le celle in righe consecutive: td>
- Questo è un esempio di come tutto questo si riunisce:
  
  table> tr> th> Colonna 1: Month / th> th> Colonna 2: Money risparmiato / th> / tr> tr> td> gennaio / td> td> € 100 / td> / tr> / table>
Impara gli altri tag utilizzati nella sezione head. Hai già imparato il tag head>, che inserisci all'inizio di ogni documento. Oltre al tag title>, potrebbero esserci altri tag nella sezione head:
- I metatag vengono utilizzati per creare file metadati su una pagina web. Questi dati vengono utilizzati dai motori di ricerca per classificare le pagine web. Per rendere la tua pagina visibile ai motori di ricerca puoi inserire uno o più meta tag (i tag finali non sono necessari), ogni tag deve contenere esattamente un attributo nome e un attributo contenuto, ad esempio: meta nome = "descrizione" contenuto = "inserisci qui descrizione ">; o meta name = "keywords" content = "scrivi qui un elenco di parole chiave, sempre separate da una virgola">
- i tag link> vengono utilizzati per collegare altri file alla pagina. Tipicamente utilizzate per associare fogli di stile CSS a pagine HTML, queste pagine sono costruite con un diverso tipo di codice e vengono utilizzate per determinare lo stile generale di una pagina.
- I tag script> vengono utilizzati per associare file javascript alla pagina HTML. Javascript consente alla pagina di cambiare se l'utente fa qualcosa sulla pagina.
Gioca con HTML da pagine esistenti. La visualizzazione del codice sorgente delle pagine web è un ottimo modo per espandere la tua conoscenza dell'HTML. Fare clic con il tasto destro sulla pagina e selezionare "Visualizza sorgente", "Mostra sorgente pagina" o simili. Scopri cosa fa un tag particolare che non conosci o cerca la risposta online.
- Non puoi modificare i siti web di altre persone, ma puoi copiare il codice HTML nel tuo documento e giocarci per vedere cosa fanno le diverse regolazioni. Nota: poiché molti siti Web utilizzano fogli di stile CSS, potresti non essere in grado di vedere molti colori o altri stili.
Ulteriori informazioni sull'HTML leggendo articoli più approfonditi. Ci sono molte risorse su Internet per padroneggiare più tag HTML come W3Schools o Codecademy. Sono disponibili anche molti libri HTML, ma assicurati di utilizzare un'edizione recente poiché lo standard HTML cambia di volta in volta. Una volta che hai acquisito padronanza dell'HTML a un buon livello, puoi passare ai CSS per un maggiore controllo sul design e sullo stile della tua pagina web. Dopodiché, il passaggio successivo è solitamente javascript.

Suggerimenti

Può essere utile trovare una semplice pagina web su Internet e quindi iniziare a giocare con il codice. Prova a spostare del testo, cambia il carattere, cambia le immagini, quello che vuoi!
Puoi usare un taccuino per annotare il codice, in modo da avere qualcosa su cui ripiegare se non lo ricordi per un momento. Puoi anche stampare questa pagina e conservarla per riferimento.
Oggigiorno XML e RSS sono sempre più utilizzati sui siti web. Il codice può sembrare inaccessibile all'occhio umano, specialmente se visualizzato nel codice sorgente, ma la funzionalità può essere utile.
I tag utilizzati all'interno dell'HTML non fanno distinzione tra maiuscole e minuscole, ma l'impostazione predefinita è utilizzare lettere minuscole (come in questo articolo). Le lettere minuscole per i tag sono altamente raccomandate, anche per compatibilità con XHTML.

Avvertenze

Alcuni tag non vengono più utilizzati e sono stati sostituiti da altri tag che fanno lo stesso, ma spesso offrono più opzioni.
Se vuoi assicurarti che la tua pagina sia conforme allo standard HTML, vai al sito web di W3 per testare il tuo codice rispetto allo standard attuale. Molti tag sono diventati obsoleti e sono stati sostituiti da tag che funzionano meglio sui browser moderni.

Necessità

Un programma di elaborazione testi, come Blocco note (Windows) o Editor di testo (Mac).
un foglio di carta o un taccuino (opzionale)
Un programma appositamente progettato per scrivere HTML, come Notepad ++ per Windows o TextWrangler per Mac (opzionale)