Struttura e TAG di una pagina HTML

In questo tutorial ti spiegheremo come è strutturata una pagina HTML e come è gerarchicamente composta. Nel modulo precedente ti abbiamo fatto vedere, con una semplice immagine e riportando una metafora, cosa fanno l’HTML e il CSS.

In questa lezione ti parleremo di come è composta una pagina HTML in modo che, da ora in poi, metterai a fuoco come ordinarla. L’immagine che vedi rappresenta una pagina web e, come avrai potuto notare, ha una struttura gerarchica ossia divisa da insiemi e sottoinsiemi.

Corso Html e Css

Tutti gli insiemi Titolo Browser, Contenuto, Titolo Articolo, Testo1, Sottotitolo Articolo e Testo2 sono contenuti nell’insieme primario Pagina. Naturalmente un insieme può avere anche dei sottoinsiemi come nel caso di Contenuto che al suo interno ha i sottoinsiemi Titolo1 e Testo articolo1. Da questo esempio si può capire come l’HTML ha una struttura gerarchica.

Un dato importante racchiuso in questo codice è la presenza dei caratteri speciali < (minore) e > (maggiore) che racchiudono l’insieme seguiti poi dalla chiusura dello stesso insieme preceduto da uno / (slash). I caratteri speciali sono dei delimitatori cioè i cosiddetti TAG.

Ora possiamo dirti il significato di HTML ovvero HyperText Markup Language. Ipertesto perché i contenuti sono contrassegnati da link ovvero da testo cliccabile; Markup Language perché il codice si basa su questi delimitatori, ossia i TAG, i quali gerarchicamente si incapsulano l’uno dentro l’altro.

Nel nostro caso i TAG indicati erano solo degli esempi inventati di sana pianta, l’HTML possiede molti TAG di cui alcuni usati spesso e presenti in quasi tutte le pagine, altri invece poco usati ma che in molti casi potrebbero servirci a migliorare alcuni aspetti. Dopo ciò passiamo a vedere un vero codice HTML base, però, con gli elementi essenziali affinché possa funzionare.

Nell’HTML alla prima riga è presente il codice DOCTYPE il quale comunica al Browser che documento gli stiamo inviando affinché lo interpreti per restituirci una risposta.

Subito dopo abbiamo il TAG <html> che rappresenta l’insieme principale della pagina. Ancora in basso è presente il TAG <head> il quale invia al computer una serie di informazioni non visibili al visitatore. Ancora, in basso, è presente il TAG <body> che è il corpo del codice in cui verranno inseriti i vari contenuti come Titoli, paragrafi, immagini, link, ecc.. che saranno visibili quando apriremo la pagina nel browser.

Il TAG <h1> rappresenta il titolo dell’argomento che andremo a trattare e si presenterà con un carattere grande rispetto al resto del contenuto. Oltre al TAG <h1> esistono anche i TAG <h2>, <h3>, <h4>, ecc.. che hanno il compito di indicare il titolo magari ai vari paragrafi presenti nella pagina. Il TAG <p> indica un paragrafo dove viene scritto l’argomento indicato nel titolo.

Commenti

Per qualsiasi dubbio o domanda, scrivi un commento qui sotto.

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

HTML e CSS