Topo aver visto cosa sono i tag e le principali metodi con cui questi possono essere utilizzati andiamo a vedere i principali TAG e la loro funzione.
- html Il blocco che contiene tutti gli eleemnti della pagina e, tramite alcuni attributi, definisce in che linguaggio è scritta al pagina.
- head E’ l’elemento che contiene le informazioni della pagina che non verranno visualizzate dal browser, ma servono a classificare la pagina.
- body Contiene la parte visibile della pagina, ovvero il corpo principale che poi verrà renderizzato dal browser.
All’interno del tag head si possono trovare i seguenti TAG
- title Il titolo del documento (è la parte che viene visualizzata in alto sulla barra del browser). \’E l’unico tag obbligatorio all’internoo dell’head.
- meta Tag che può essere presente e serve a fornire informazioni aggiuntive (tramite l’utilizzo degli attributi) sulla pagina, quali l’autore, la data di creazione, una dscrizione del contenuto, le parole chiave della pagina, …
- style Tag per la definizioni degli stili grafici della pagina.
- link Tag, che tramite alcuni attributi, permette l’inclusione di fogli di stile o javascript.
L’elemento body, invece, contiene gli elementi che devono essere mostrati all’utente, tra questi i più importanti sono:
- h1, h2, h3, h4, h5, h6 Tag al cui interno viene inserito il titolo della sezione che segue. Il numero indica l’importanza del titolo all’interno del documento; all’interno della pagina pvi può essere un solo elemento h1, ma più elementi h2. Se si usa un tag h2 deve esserci il tag h1, se si usa un tag h3 deve esseri almeno un tag h2 e così via.
- p Rappresenta un paragrafo di testo. Possono esserci più paragrafi di testo, ma non possono esservi paragrafi di testo all’interno di altri paragrafi.
- ul, ol Servono a creare elenchi non ordinati (il primo) o ordinati. Ogni elemento della lista presente all’interno viene indicato dal tag indicato di seguito.
- li Serve a suddividere, all’interno di una lista i vari elementi. Può essere utilizzato solo all’interno di un elemento ol o ul.
- table Serve a creare una tabella
- tr Indica una riga della tabella. Può essere utilizzato solo all’interno di un tag table.
- td Indica una cella di una riga e può trovarsi solo all’interno di un tag tr che a sua volta si trova in un tag table.
- strong Serve a far si che il testo al suo interno assuma un importanza maggiore. Solitamente viene rappresentato come testo in grassetto.
- em Serve ad enfatizzare il testo che racchiude, solitamente viene indicato come testo in corsivo.
- a Peremtte di inserire un link all’interno del testo. per far si che possa possa puntare un altra pagina va utilizzato l’attributo href che indica indica il percorso (assoluto o relativo) verso cui deve essere redirezionato l’utente.
- img Serve ad inserire delle immagini all’interno del documento. Per sapere che immagine inserire si utilizza l’attributo src che indica il percorso assoluto o relativo dell’immagine, mentre l’attributo alt indica il testo che verrà visualizzato nel caso in cui l’immagine non fosse disponibile o non venisse visualizzata. L’attributo longdesc viene utilizzato per dare una descrizione dell’immagine per coloro che non possono visualizzare l’immagine (per esempio non vedenti).
- br Serve a mandare a capo il testo anche se non ha raggiunto la fine della pagina. Un corretto utilizzo del tag p riduce di molto l’utilizzo di questo tag.
- hr Serve ad inserire una riga orizzontale di separazione della pagina.
- pre Permette di inserire all’interno della pagina un testo che non verrà a sua volta interpretato. solitamente viene utilizzato per inserire del codice all’interno della pagina.
- code Assolve una funzione simile al tag \textit{pre}, e serve ad inserire solamente del codice.
- dl Crea un elenco di definizioni dei diversi termini. Al suo interno devono trovarsi i tag dt e dd in maniera alterna.
- dt Crea un nuovo termine a cui dare la definizione
- dd Definizione del nuovo termine.
- form Serve a creare un modulo di inserimento dei dati ceh poi devo essere inviati al server.
- input Elementi in cui inserire i dati che devono essere posizionati all’interno del form. In funzione degli attributo che questo possiede è possibile ottenere finestre per l’inserimento dati, a selezione multipla, checkbox, pulsanti…
Questa non è un elenco completo dei tag utilizzabili, ma solo un elenco dei più utilizzati, per maggiori approfondimenti è consigliata una lettura delle specifiche presenti sul sito del W3C.