CORSO ONLINE HTML
Come creare una pagina htmlCorso online HTML
Se stai cercando un corso online html per imparare le nozioni base necessarie a capire come creare una pagina web utilizzando il linguaggio html, sei capitato nel posto giusto!
Sei già sicuro all 100% di voler fare un corso online di html? Allora ti proponiamo senza perdere tempo con tanti giri di parole i corsi che noi di Digital Coach® abbiamo realizzato per gli utenti interessati a questo linguaggio apparentemente difficile:
- Tutorial: SEO HTML – Come ottimizzare il codice html ai fini SEO
- Corso on demand: Esercitazioni HTML e CSS
Il consiglio che ti possiamo dare è quello di “perdere” qualche minuto del tuo prezioso tempo alle pagine di presentazione di ogni video corso html da noi proposto. Alcuni corsi proposti sul web promettono di farti imparare tutti i codici html, niente di più falso. Quello che promettiamo è che sarai in grado di comprendere come creare una pagina html in totale autonomia.
Quale corso online html scegliere
Nel caso tu non abbia ancora cliccato i due link sopra menzionati, non preoccuparti, perchè ora ti daremo tutte le indicazioni che stavi cercando. Di seguito ti spiegheremo la differenza tra i due corsi per imparare ad utilizzare e controllare il linguaggio html.
Inizieremo con l’esposizione dei punti in comune di entrambi i corsi:
- utilizzo del linguaggio html e CSS ai fini SEO
- strutturazione pagine web in html5 (attualmente il più diffuso sul web)
- studio dei principali tag e meta tag
- istruzioni sul linguaggio html da implementare in WordPress
Ed ora proseguiamo con le differenze.
Corso1: SEO html – Come ottimizzare il codice html ai fini SEO
Questo corso online html è la scelta più economica e rapida per ottimizzare le tue pagine web su WordPress a livello SEO. A differenza del secondo corso proposto, avrai a disposizione 11 video di breve durata volti alla descrizione dei principali tag (title, no follow, description, h1, ecc.) e metatag (metadati non visibili all’utente che aiutano i googlebot ad indicizzare le pagine web).
Una volta acquistato il corso, avrai accesso ai video dalla tua “Area riservata”; per accedervi è sufficiente aver ricevuto le credenziali sulla propria mail, andare sulla homepage del sito di Digital Coach e cliccare su “Accesso Studenti” presente nell’area centrale della parte più alta del menù principale.
Corso2: Esercitazioni HTML e CSS
Qualora sentissi l’esigenza di voler approfondire l’argomento con lezioni on demand più mirate e complete, allora questo corso online html fa per te!
Si, conoscere tutti i codici html è impossibile, ma sapere anche solo come creare una pagina html sembra essere una cosa da veri fichi! Perciò questo corso lo consigliamo,soprattutto per la sua completezza, a chiunque voglia diventare autonomo nella gestione e nel controllo della struttura del testo html sulle pagine scritte in WordPress. Quindi è rivolto a SEO Specialist, Web Marketing Specialist, Webmaster e/o chiunque voglia intraprendere questa strada nel Marketing Digitale.
HTML cos’è?
Ora ti daremo un assaggio di quello che si studierà durante il corso online html da te scelto. Innanzituto la <<base delle basi>>: cos’è l’html?
Html sta per “Hyper Text Markup Language” ovvero “Linguaggio per la Codifica di Ipertesti“. Ogni giorno ti capiterà di aprire pagine web e di visualizzare una marea di contenuti ben ordinati. Se stai leggendo questo testo potremmo pensare che tu non abbia mai visualizzato una pagina web nella sua versione “originale” fatta di codici e tags. 
Facendo un passo indietro ti invitiamo a dare un’occhiata all’infografica che abbiamo realizzato qui a fianco. Con essa cerchiamo di farti capire con estrema facilità che cosa succede quando facciamo una ricerca sul motore di ricerca.
Nel tuo caso ad esempio, avrai cercato dal tuo PC (client) su Google (browser) la parola “corso online html“; a questo punto il tuo browser si sarà collegato all’infinità di sever presenti in tutto il mondo per cercare le informazioni da te digitate. Queste informazioni presenti nei server, non sono altro che un insieme di codici e tags che non sarebbero comprensibili all’uomo. I server, una volta trovate le informazioni cercate, rimanderanno al browser i dati raccolti, il quale codificherà tutti i codici html rendendoli fruibili all’uomo.
Per dirla in una sola frase:
l’html è un linguaggio di codifica che utilizza tags per identificare i contenuti.
Come creare una pagina html
Struttura generale
A quanto scritto in precedenza vorremmo aggiungere con più precisione di che cosa è in realtà composta una pagina web. In un breve elenco possiamo dire che:
- HTML= struttura della pagina
- CSS= presentazione della pagina (colori, font, immagini di sfondo,ecc.)
- Javascript =comportamento della pagina (effetti speciali, oggetti in movimento, ecc.)
- PHP o simili = backend della pagina
- CMS = gestione dei contenuti
Nel corso online html con Digital Coach si andranno a toccare con mano solamente i codici html e css, il resto dei linguaggi nominati, per quanto simili, sono più utilizzati dagli sviluppatori web, i quali cercheranno di rendere l’esperienza degli utenti in una pagina web più piacevole ed interattiva.
I tags sono tutto nel linguaggio html. Rappresentano letteralmente l’alfa e l’omega per creare una pagina html. Più semplicemente puoi immaginare una pagina web come un panino, dove “html” rappresenterà le fette di pane all’inizio (<html>) e alla fine del documento html (</html>). I simboli “<” e “>” racchiudono i tags mentre il simbolo”/” rappresenta la fine del tag. Per capire bene cosa intendo con il termine tag dai un’occhiata all’immagine qui sotto:
Eccoci arrivati al sodo! Il momento clou che aspettavi fin dall’inizio! Quello che vedi qui sopra non è altro che una pagina html e qui sotto il risultato che apparirà sul browser dopo la codifica del linguaggio html:
Dopo aver visto queste immagini sei ancora più confuso? Non preoccuparti, ora riprenderemo passo passo i passaggi per arrivare a realizzare quella semplicissima pagina web, che ovviamente durante il corso online html avrai modo di vedere in modo più approfondito.
Da dove iniziare?
Come abbiamo fatto a realizzare quell’insieme di tags? Innanzitutto dovrai utilizzare uno text editor (editor di testo). Dove lo trovi? Niente di più facile! Puoi utilizzare il “Blocco note” del tuo pc se utilizzi Windows, “Gedit” se utilizzi Linux oppure “TextEdit” nel caso utilizzassi l’OSX del tuo Mac.
Se desideri un programma serio ma soprattutto che funzioni in tutti questi sistemi operativi, l’alternativa gratuita consigliata nel corso online html è il software open source Notepad++, è il più popolare, intuitivo e dall’interfaccia basic. Ottimo per chi si addentra in questo mondo.
Un’altra alternativa open source consigliata è Atom. Oltre ad essere fruibile su Windows, Linux e Mac, ha maggiori funzionalità e l’interfaccia più accattivante. Ma in realtà potete trovarne molti altri nel web, la scelta quindi è nelle vostre mani.
Per semplificare il tutto, qui di seguito ti faremo vedere come creare una pagina web utilizzando il “Blocco note” installato di default sul tuo sistema operativo (nel nostro caso il “Blocco note” di Windows).
Step1: creazione file di testo
Apri il “Blocco note” e salva il file in 2 versioni:
- come normale file di testo
- come file html; per farlo è sufficiente che al momento del salvataggio aggiungi l’estensione “.html” o “.htm” al nome del tuo file e per quanto riguarda la voce “Salva come”seleziona “Tutti i file “.””
Bene! Ora dovresti avere due file come nell’immagine qui a fianco. Il primo sarà il foglio del blocco note nel quale inserirai il linguaggio html, mentre il secondo sarà la tua pagina web.
Ogni volta che apporterai delle modifiche al blocco note, dovrai quindi effettuare due salvataggi come sopra descrittti.
Step2: Doctype
Apri il tuo text editor e come prima riga dovrai scrivere: <!DOCTYPE html>. Perchè va scritto ciò? Ora non prendertela con noi se in questo breve corso online html di presentazione ti faremo un po’ di storia, ma è necessaria per comprendere a fondo quello che stai facendo. Innanzitutto il browser dal quale si aprirà la pagina creata, necessiterà di conoscere con quale linguaggio html è stata scritta la stessa. Non sono certo che tu lo sappia, ma il linguaggio html è nato negli anni ’90 dal lavoro di Tim Berners-Lee, un informatico britannico creatore del World Wide Web (www).
Possiamo dire che le versioni strutturali del linguaggio html sono cambiate nel tempo. Si è partiti dalla versione html1 fino ad arrivare oggi all’ultima versione disponibile: l’html5, linguaggio di markup più diffuso al mondo lanciato nel 2014.
Quindi nel momento in cui scriverai nel tuo text editor <DOCTYPE html>, istruirai il tuo browser specificandogli che la tua pagina è scritta utilizzando gli standard del linguaggio html5 (vedi immagine a lato).
Step3: tag html
Come ti abbiamo già anticipato, devi pensare alla pagina html come un grande panino. All’inizio e alla fine del tuo foglio dovrai inserire i tags <html> e </html>, che in questo caso rappresenteranno le 2 fette di pane all’interno delle quali sarà contenuto tutto il sito.
Anche durante il corso online html avrai modo di capire che generalmente i tags hanno un’apertura e una chiusura.
Infatti, come avrai potuto notare, il secondo tag presenta uno slash “/” che sta ad indicare la conclusione del tag.
Step4: tag head & title
Al secondo posto della struttura di un foglio ci sarà il tag <head>, composto anch’esso di un tag di apertura <head> e chiusura </head>. All’interno dei tags <head> </head> saranno contenuti tutti gli elementi non visibili che aiuteranno la pagina a funzionare.
Ad esempio sarà proprio in questa sezione che andrà inserito il tag <title>.Esso definirà il titolo della vostra pagina. Anche se già descritto in una delle immagini precedenti ripeteremo l’esempio sul “Blocco note” e faremo vedere il risultato di questa azione (vedi immagine qui sotto).
Durante il corso online html avrai modo di vedere molti altri tag da inserire all’interno dell’head ma per ora vogliamo solo introdurti nel mondo vasto del linguaggio html.
Step5: tag body
Ultima parte importante di una pagina web è il tag <body>. A differenza del tag <head> nel quale sono contenuti tutti gli elementi non visibili, nel body saranno presenti tutti gli elementi visuali e strutturali della mia pagina, come ad esempio titoli, sottotitoli, paragrafi, immagini, video, links e davero molto altro. Ricorda che tutto ciò che sarà scritto all’interno del tag body sarà visibile ad esclusione ovviamente dei tags stessi.
Prima di inziare il corso online html ti mostreremo alcuni di tag utili nella creazione di una pagina html. Questi sono:
- <p> = sta per “paragraph” e permette di creare paragrafi
- <b> = sta per “bold” e permette di mettere in grassetto frasi e/o parole
- <h1> = sta per “heading” e permette di creare i titoli e sottotitoli. L’ordine degli “h” va da h1 ad h6
- <!– –> = è un tag che permette di scrivere commenti senza che vengano visualizzati nel body
Per ora crediamo che questi tag siano sufficienti per entrare nell’ordine delle idee di come ci si muove all’interno di un foglio per la creazione di una pagina html. Qui di seguito avrai modo di vedere come abbiamo impostato un’ipotetica pagina html, ma sentiti libero, anzi ti consigliamo vivamente di provare a fare tu delle modifiche ai tag per vedere il risultato a cui porteranno.
Consigli per realizzare una pagina html
Hai visto? Non dovrebbe esser stato difficile arrivare a questo punto se hai seguito tutti i passaggi alla lettera. Possiamo immaginare che la prima volta si sia leggermente più lenti perciò ti daremo alcuni consigli pratici per condurre il corso online html da te prescelto nel migliore dei modi:
- utilizza un text editor come Notepad++ o Atom
- non scrivere tutti i tag uno sotto l’altro come un elenco, ma cerca di spaziarli con il tasto TAB della tastiera Una struttura facile da leggere a colpo d’occhio ti risparmierà davvero molto tempo (osserva bene le immagini viste finora)
- controlla i tag principali. Devono avere sempre un’apertura e una chiusura (ricordati il panino!)
- ricorda che le immagini non hanno un tag di chiusura mentre i video si
- non utilizzare il tag <h..> per rendere grassetto un testo. Utilizza i tag <b>, <strong> oppure impara nel corso online html a formattare attraverso il linguaggio CSS i font dei testi
Bene, siamo arrivati alla fine di questo breve manuale html. Speriamo che l’argomento sia stato di tuo gradimento oltre ad esserti stato utile per chiarire eventuali dubbi.
In caso contrario ti ricordiamo la possibilità di contattare i nostri esperti per maggiori informazioni cliccando sul bottone qui sotto.
Grazie e buon html!