Corso HTML base – Lezione #1 – Cosa è l’HTML

Condividi

DOCTYPE ed head

Innanzitutto, ciao! Se sei qui, allora hai probabilmente intenzione di imparare le nozioni base dell’HTML ed è esattamente quello che faremo assieme. Nel nostro corso html base Ti guideremo, passo dopo passo, nell’apprendere le nozioni base che ti aiuteranno a creare siti web moderni ed accessibili in estrema facilità, grazie anche alle numerose risorse che il web, ad oggi, ci offre in maniera più o meno gratuita. Niente chiacchere, soltanto esempi pratici e facilmente comprensibili per chi vuole iniziare il suo percorso nella creazione di siti web. Ma, come appena detto, non perdiamoci in ulteriori sproloqui ed andiamo al sodo.

corso html base lezione 1

Cosa è l’HTML?

L’HTML, o Hypertext markup Language, è il linguaggio di programmazione principale con il quale il web interpreta le pagine web per poi mostrarcele nella loro versione finale, tramite una serie di combinazioni tra ulteriori, diversi, linguaggi come il CSS, Javascript o PHP.

I browser ricevono i documenti HTML grazie a dei web server, per poi renderizzarli in forma di pagina multimediale.

La struttura

Un documento HTML, esattamente come ogni cosa, ha una sua struttura ben precisa che inizia con una dichiarazione che identifica il tipo di documeto in questione. Si tratta di una riga di codice che va ad indicare la versione. Alcune di queste, che hai sicuramente già potuto intravedere sono

  • HTML 4.0
  • HTML5
  • XHTML

E via discorrendo. La dichiarazione del tipo di documento viene fatta grazie alla stringa <!DOCTYPE>. Ecco un esempio pratico di introduzione e specifica del tipo di documento :


<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina web</title>
</head>
<body>
Ulteriore codice che renderizzerà la nostra pagina web
</body>
</html>

Il tag head

Dopo aver visto come impostare il tipo di documento è ora di capire quali sono i codici principali che andranno a comporre la nostra pagina web.

I codici dentro il tag <head> sono codici non visualizzabili nel rendering della pagina e servono a richiamare elementi esterni, come file CSS o Javascript.

Un esempio pratico lo vediamo di seguito dove, dopo la dichiarazione del tipo di documento viene inserito il tag <link rel=”stylesheet”> che andrà a richiamare il foglio di stile che disegnerà la maggior parte degli elementi della nostra pagina web :

<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina web</title>
<link rel="stylesheet" type="text/css" src="/path/foglio-di-stile.css">
</head>
<body>
Ulteriore codice che renderizzerà la nostra pagina web
</body>
</html>

Non solo, ovviamente, fogli di stile ma anche file Javascript che potranno servirci sia per le funzionalità che per il design del nostro sito web :

<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina web</title>
<link rel="stylesheet" type="text/css" src="/path/foglio-di-stile.css">
<script src="https://xirxjijv7lox.cdn.shift8web.ca/path/javascript.js">
</head>
<body>
Ulteriore codice che renderizzerà la nostra pagina web
</body>
</html>

In ultimo (e non per ordine di importanza, anzi) all’interno del tag <head> dovranno essere inseriti i tag meta relativi alla nostra pagina. Tali tag sono importantissimi per specificare ai crawler dei motori di ricerca informazioni importanti come la descrizione della pagina, la viewport etc.

Abbiamo parlato in maniera più specifica dei tag <meta> nella nostra guida su come utilizzare i meta tag e quali sono i più importanti.

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo