Nella lezione precedente abbiamo visto
l'introduzione alla creazione di un sito web. Adesso vedremo un pò di HTML di base per vedere come è strutturata una pagina web e svariati tags.
Cominciamo col dire che l'HTML non è un linguaggio di programmazione. Se qualcuno dice che programma in HTML sbaglia di brutto. I linguaggi di programmazione sono quelli che permettono di creare codici che vengono poi compilati e che creano poi un'eseguibile. Il C è un linguaggio di programmazione, il C++ è un linguaggio di programmazione, il Java è un linguaggio di programmazione. HTML e Css non sono linguaggi di programmazione. Anzi css non è nemmeno propriamente un linguaggio. Javascript, che è diverso da Java è un linguaggio di scripting, quindi nemmeno questo è un linguaggio di programmazione. Simile a questi come grammatica, ma non viene compilato, nè tantomeno crea eseguibili.
Cos'è dunque l'HTML?
L'HTML è un linguaggio di marcazione. Il testo e gli elementi di una pagina hanno dei marcatori, ovvero tags. I tags servono a dire alla pagina come strutturarsi ed eventualmente che aspetto avere. Però per correttezza i contenuti e l'aspetto vengono tenuti separati e quest'ultimo viene definito tramite CSS.
Cos'è invece il CSS?
CSS sta per Cascading Style Sheet, ovvero fogli di stile a cascata. Il CSS non è esattamente un linguaggio, bensì una serie di regole di stile da applicare alla pagina. Ad ogni tag è possibile applicare uno stile, ovviamente non tutti gli stili possono essere applicati a tutti i tags, alcune regole valgono solo per alcuni tag. Questo però lo vedremo in seguito, adesso parleremo di HTML.
Come detto prima, l'HTML marca gli elementi di una pagina. Tutte le pagine HTML hanno dei tag, altrimenti non sono tali. Esistono alcuni tag fissi che sono obbligatori in una pagina web. Vediamo dunque quali sono, ovvero com'è composta una pagina web di base:
<html>
<head>
<title>Documento senza titolo</title>
</head>
<body>
</body>
</html>
Vediamo dunque come è composto un tag. Un tag è fatto principalmente di due parti. Il tag di apertura dato da -parentesi angolata- nome del tag-parentesi angolata e il tag di chiusura dato da -parentesi angolata- slash + nome del tag- parentesi angolata. Questo vale per quasi tutti i tag come vedremo, infatti ci sono dei tags che non necessitano un ulteriore tag come img e br. In generale i tag che hanno bisogno di una chiusura sono quelli che racchiudono una porzione di testo al loro interno, mentre tag come br, che serve ad andare a capo non ne ha bisogno. Questi si chiudono mettendo lo / (slash) in fondo al tag.
I tag possono essere sia maiuscoli che minuscoli, però nelle prossime versioni sarà obbligatorio l'uso delle minuscole, quindi ve lo consiglio, anche per praticità.
I tag possono anche essere annidati un dentro l'altro (come nell'esempio sopra, title sta dentro head e vi è annidato). L'importante è ricordarsi di chiudere i tag che si sono aperti ordinatamente. Ovvero se avete messo il title in head, prima di chiudere head dovete chiudere title. Questo è sbagliato:
<head>
<title>Documento senza titolo</head>
</title>
HTML
Il tag html è il tag radice di tutte le pagine html. Con radice si intende che non ha genitori, ovvero che è il primo, fatta eccezione per il DOCTYPE. E' sempre presente nella pagina ed è obbligatorio.
HEAD
Il tag head è obbligatorio. Contiene informazioni su come la pagina deve essere letta e interpretata, oltre al titolo della pagina stessa. Infatti quando vedremo il css, vedremo anche come linkare css esterno al documento, che verrà messo nell'head. Dentro l'head inoltre specifichiamo anche il set di caratteri da usare per leggere correttamente il testo. Il tag è questo:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
Questo set di caratteri copre tutti i simboli di tutte le lingue del mondo e vi raccomando di usarlo sempre, anche se una volta inserito dovrete usare dei codici per i caratteri speciali e le lettere accentate. In alternativa mettete pure content="text/html; charset=utf-8" al posto del content precedente.
TITLE
E' il titolo della pagina, che appare sull'intestazione della finestra del browser e nella scheda se questo ha l'apertura a schede.
BODY
Dentro questo tag troviamo i contenuti veri e propri del sito. Qui inseriamo tutti i tag per la formattazione della pagina, come i tag per l'header e il content ecc.
Nella prossima lezione vedremo una carrellata di tag per la formattazione del testo.
.
.
