Come Creare una pagina in HTML | Guida HTML

Creare una pagina in HTML

HTML: è il linguaggio principale per creare pagine Web. Seguendo questa guida imparerai cos’è il linguaggio html e come realizzare pagine web.

HTML è l’acronimo di HyperText Markup Language e non è un linguaggio di programmazione. Si tratta invece di un linguaggio di markup (marcatura), che indica come disporre gli elementi dentro le pagine web.

Queste indicazioni vengono date attraverso i tag, i quali sono inclusi tra parentesi angolari (ad es, <p> è il segnaposto di un paragrafo).

Attraverso i tag HTML quindi indichiamo, quali elementi devono apparire come devono essere disposti.

Queste istruzioni devono essere contenute in un documento HTML (“Pagina HTML“). Una pagina HTML è rappresentata da un file di testo, ovvero un file che possiamo modificare con programmi come notepad o brackets e finisce con l’estensione .html.

Come Creare un Sito: HTML, CSS e JavaScript

Per lavorare con HTML è importante conoscere tutte le tecnologie necessarie a realizzare un sito o una web app.

Linguaggio HTML

Il linguaggio html serve a definire:

  • Quali sono gli elementi che devono apparire sullo schermo e come devono essere disposti.
  • Stabilire collegamenti (link) tra le pagine.
  • Stabilire l’importanza di link, pagine e testi. (non la forma o il colore)
  • Creare form di conttato per gli utenti.
  • Creare titoli e paragrafi
  • Caricare immagini, video, etc.

Linguaggio CSS

Il linguaggio CSS o “fogli di stile” permette di definire l’aspetto (lo stile) che devono assumere gli elementi sulla pagina.

Grazie al linguaggio css è possibile manipolare dimensioni, colori, ed ogni caratteristica visuale.

JavaScript

Javascript è un linguaggio di programmazione che consente di manipolare in profondo qualsiasi elemento nella pagina HTML:

  • Lo stile
  • I contenuti della pagina
  • Le interazioni con l’utente.

Javascript ci permette di creare la logica dell’interfaccia utente delle pagine web e di sfruttare le API messe a disposizione dal browser:

Con Javascript è possibile modificare

  • La gestione del mouse.
  • La gestione del touch.
  • Le immagini.
  • Le richieste di dati dinamiche.
  • La gestione di dati in locale.

HTML5

HTML 5, è la versione che nasce, oltre che per sviluppare pagine web, per la creazione di applicazioni, anche desktop e mobile.

Link e Seo

Il linguaggio HTML e i link sono alla base del meccanismo che consente agli utenti di muoversi rapidamente tra testi, immagini, video e applicazioni.

Per accedere rapidamente a una ormai enorme mole di informazioni, sono nati i motori di ricerca (Google, Bing, Yahoo, Yandex, Baidu), che si basano su una serie di fattori per selezionare le pagine web che rispondono adeguatamente alle richieste degli utenti.

Si parte dall’analisi del testo (o del contenuto) e dei collegamenti, fino a sfruttare i comportamenti degli utenti per catalogare le pagine e stabilire il livello di rilevanza (ranking) che hanno a seconda della singola query di ricerca.

L’ottimizzazione dei contenuti per favorire il posizionamento delle pagina per specifiche ricerche si chiama SEO (Search Engine Optimization).

Iniziare con l’HTML

HTML non è un linguaggio complicato e si può iniziare ad utilizzarlo immediatamente, basta pochissimo:

Lanciamo il nostro editor di testo e scriviamo un semplice testo come il seguente:

“<p>Ciao Mondo!</p>”

Fatto questo salviamo il file con estensione .html ad esempio “ciao-mondo.html“.

Una volta assegnata questa estensione, cliccando sul file si aprirà automaticamente il browser predefinito di sistema e mostrerà una schermata con scritto il testo nel file.

<h1>Ciao Mondo!</h1>
<p>Questa è la nostra prima pagina HTML!</p>Una volta aggiunto un titolo (Heading) di primo livello (<h1>) e un paragrafo (<p>) proviamo ad aggiornare la pagina.

Il browser mostra il nostro titolo con un carattere grande e in grassetto. Mentre il contenuto del paragrafo (quello compreso tra <p></p>) è rappresentato con una dimensione più piccola.

In effetti non abbiamo detto nulla sullo stile degli elementi rappresentati, ci siamo limitati a definire un titolo e un paragrafo e, come ci ritroveremo a dire diverse altre volte, questo è il compito del markup HTML. Tali definizioni infatti hanno un’importanza che va oltre la sola rappresentazione grafica.

Dobbiamo aggiungere i tag <head> e <body>: ovvero la struttura essenziale della pagina HTML

Per fare le cose un po’ meglio e dirci soddifatti della nostra prima pagina torniamo sul nostro editor e modifichiamo il codice in questo modo:

<!doctype html>
<html lang=”it”>
<head><title>Ciao Mondo!</title></head>
<body>
<h1>Ciao Mondo!</h1>
<p>Questa è la nostra prima pagina HTML!</p>
</body>
</html>Impostando la pagina così, ad un primo impatto non osserveremo sostanziali cambiamenti, ma è bene impostare l’html di una pagina correttamente per poter lavorare bene quando si apprenderanno ulteriori notizie.

Descrizione Tag

  • <!DOCTYPE html> Serve semplicemente a dire che il file è una pagina HTML e in particolare che si tratta di un documento secondo lo standard HTML5.
  • <html> È il tag che racchiude tutta la pagina e ci permette ad esempio di definire quale sia la lingua della pagina, come nel nostro caso in cui abbiamo definito che il documento è in Italiano grazie all’attributo lang=”it”
  • <head> Questo tag contiene una serie di informazioni utili per la gestione della pagina, nel nostro caso abbiamo definito ad esempio quale sarà il titolo che apparirà sui motori di ricerca e sulle linguette del browser, grazie al tag <title>, ma questa sezione è destinata a contenere molto di più: dall’inserimento di librerie alla definizione dell’insieme di caratteri.
  • <body> Contiene gli elementi della pagina, tutto il contenuto e tutti i relativi tag che saranno poi resi a video vengono inseriti qui dentro, come abbiamo fatto nel nostro caso con il titolo e il paragrafo.

Imparare Html, CSS e Javascript

Scoprire il codice HTML delle pagine Web

Abbiamo visto come completare con soddifazione una prima pagina HTML, ma una delle cose più interessanti di questo linguaggio è che il markup è scritto come un testo, perciò è possibile leggere codice scritto da altri.

Tutti i browser infatti danno la possibilità di mostrare il codice HTML delle pagine e quasi tutti permettono di farlo con la combinazione di tasti CTRL+U.

Guide Consigliate per lo Sviluppo Web