Torniamo indietro nel tempo? Eheh vi pubblico la prima guida all’html che pubblicai in giro per la rete. Potrebbe essere utile a qualcuno… Riveduta e corretta ovviamente, ma se avete appunti da fare non possono non essere bene accetti!! 😀

HTML: cos’è?

Html sta per Hyper Text Markup Language = Linguaggio di marcatori per ipertesti.

1. Cos’è un ipertesto?
2. Cos’è un marcatore?

1. Un ipertesto come dice la parola stessa, è un testo “iper”, cioè, non necessariamente di “grandi dimensioni” (come richiamerebbe alla mente la parola) ma che si sviluppa su più livelli. Contrariamente allo sviluppo lineare che può avere un libro, infatti, un ipertesto permette di approfondire più argomenti partendo dalla stessa pagina, “saltando” da un punto all’altro dello stesso senza necessariamente seguire una cronologia.
Un esempio di ipertesto sono quegli articoli che possiamo trovare su internet e che contengono parole evidenziate (links interni) cliccando sulle quali si accede al significato delle stesse o ad argomenti correlati che compongono l’ipertesto.
L’ipertesto è insomma il predecessore e la base degli attuali siti internet.

2. Un marcatore, detto anche tag, è un nome che diamo ad un elemento particolare che compone una pagina html. L’insieme di tutti questi elementi costituisce un linguaggio (l’html appunto) attraverso il quale i nostri browser* (es. Microsoft Internet Explorer) leggono e interpretano la pagina html (o ipertesto) restituendocela graficamente.

*browser (dall’inglese to browse=sfogliare): è il nostro “sfogliatore” di pagine internet, che legge nel codice html e ci restituisce visivamente la pagina web. Può essere di diversi tipi a seconda del tipo di macchina che usiamo (pc o Macintosh) e a seconda del sistema operativo (Apple, Windows, Linux, ecc).

Cominciamo a capire l’html…

La struttura di base dell’html è la seguente:

Ebbene cosa significa?
Questi sono i cosiddetti tag, i marcatori che definiscono una pagina html e che devono necessariamente esistere perchè un browser capisca il linguaggio e il contenuto di quello che si sta cercando di visualizzare. Ma andiamo ad analizzarli uno a uno e soprattutto a spiegare perché sono scritti in questo modo.

I tag sono normalmente racchiusi fra questi due simboli: < (minore) e > (maggiore). Come vedete alcuni si differenziano perché subito dopo il segno < (minore) contengono anche questo segno: / detto anche “slash”. Questo sta ad indicare un tag “di chiusura”. Ovvero, tutti i tag (con qualche eccezione che vedremo) devono essere “aperti” (o dichiarati) e “chiusi” per comunicare al nostro browser che fra l’inizio e la fine di essi sono contenute tutte le caratteristiche riferite a quel tag e l’eventuale contenuto.

Ma vediamoli uno per uno:

1.
Questo tag indica innanzitutto al browser che tutto quello che è contenuto fra i due tag è codice html, pertanto il browser saprà a che linguaggio deve fare riferimento per “capire” la pagina.

2.
Head=testa e infatti in questa parte vengono riportate le istruzioni che fisicamente non compaiono direttamente nella pagina (a parte il “title”) ma che bisogna dire al browser di “tenere a mente”

3.
Body=corpo, come dice la parola stessa è il corpo, cioè la pagina vera e propria.

Esempio:

Fra questi due tag ci metto il testo della pagina

Come vedete ci sono in questo esempio due tag in più rispetto a quelli evidenziati, e sono quelli che vi presenterà il vostro editor di pagine html (il programma cioè che vi aiuta a crearle, nel nostro caso Dreamweaver): questi due tag sono descrittivi e contengono ulteriori istruzioni che servono al browser a capire la versione di html che stiamo usando (in questo caso il 4.01). Non cancellatele mai per non compromettere l’interpretazione delle pagine.

Ma torniamo al nostro esempio:
notate anche la presenza del tag
Title=titolo
Qui viene inserito il testo che comparirà nella nostra barra di intestazione del browser (in Explorer, per intenderci, la barra blu in alto dove viene riportata anche la scritta “Microsoft Internet Explorer”). Si consiglia di essere sintetici nello scegliere il titolo del sito, soprattutto senza scrivere banali ed inutili “homepage” o peggio ancora lasciare il predefinito “Untitled”, per motivi di ovvietà e anche per altri motivi che vedremo più a fondo quando parleremo di “motori di ricerca”.

Nell’esempio ho evidenziato con diversi colori i tag di apertura e chiusura dello stesso tipo. Vedrete poi utilizzando il vostro editor che anche esso evidenzierà con colori diversi i tipi di tag per più facilmente identificarli. Normalmente i tag di base sono evidenziati tutti con lo stesso colore.
Noterete che esiste una sequenza con la quale si presentano i vari tag, e questa è necessaria affinché innanzitutto il browser non faccia confusione e in secondo luogo perché se per esempio, per errore ponessimo il tag (cioè la fine del corpo) in posizione antecedente rispetto a del testo che vorremmo invece far comparire in pagina, lo stesso non verrà considerato né interpretato dal browser e non lo vedremmo.

Consiglio inoltre di avere ordine nell’aprire e chiudere i tag, o meglio, cercare di fare ordine per avere poi sott’occhio tutto quanto ci serve per eventuali correzioni del codice. Attenzione questa è una buona abitudine che serve a noi (e non al browser) per non generare confusione nel modificare il codice.
E’ giusto infatti “indentare” i tag di apertura e chiusura nello stesso punto fra di loro piuttosto che sfalsarli o lasciarli tutti allineati a sinistra generando confusione nella lettura.
Esempio:

Fra questi due tag ci metto il testo della pagina

Meglio questa versione piuttosto che questa:

Fra questi due tag ci metto il testo della pagina

O questa:

Fra questi due tag ci metto il testo della pagina