Indica la forma del documento e cosa contiene il file
È il tag radice:
Dento head troviamo i metadati, questa parte non è visibile
Dentro body troveremo i dati, questa è la parte visibile della pagina
Come è codificato ^
Documento
Ci dice il titolo del documento ^
Il tag br serve per andare a capo
p è il paragrafo che di defult va a capo
Tag b è per il grassetto oppure strong
Tag i è per il corsivo oppure em
Il tag ul è una lista non ordinata, in ogni lista va a mettere una riga-> li li fa con il pallino
h1 e h2 indicano titolo di primo e secondo livello
Ul>li*3 fai un tag ul e metti dentro tre tag li
Per mettere un commento: Prima pagina di prova
Oltre questo esiste un attributo title che può essere usato con qualsiasi cosa, ad esempio può essere dato n titolo anche ad un semplice paragrafo.
meta name="description" content="descrizione del sito">
È un tag che serve per descrivere il nostro sito
Open graph-> è un protocollo creato da Facebook per standardizzare l’uso dei metadati in una pagina web, può dare anche info specifiche come il nome della pagina
Ci sono altri tag meta/metadati che possono essere aggiunti dentro l’head prima del body:
meta property="og:title" content="il contenuto">
meta property="og:type" content="website">
meta property="og:url" content="il link del sito">
meta property="og:image" content="link dell'immagine">
meta property="og:description" content="descrizione del sito">
Tag di marcatura del testo:
small> rende un po’ più piccolo
sub> e sup> li mette uno sopra e uno sotto come una frazione
mark> lo rende evidenziato
del> elimina
ins> inserito -> li sottolinea
u> -> li sottoliena
Table>tr*3>td*3. -> crea una tabella dove ogni tr è una riga ogni td è una cella (* e il numero di quante righe/caselle vogliamo)
Nella tabella tfoot> spunterà alla fine per indicare una sorta di risultato, una sorta di sintesi dei dati (anche se nel codice viene messo prima)
caption> indica il titolo della tabella
thread>con dentro prima tr> e poi th> dentro cui si scrive /th> indica la parte in grassetto della tabella, i titoli delle colonne in pratica
Per inserire immagini nella pagina non le metto nella pagina, ma le inserisco nel tag img
img src="è la fonte da cui prende l'immagine,ovvero url" alt="è il testo alternativo
Salvare l’immagine nella cartella per evitare che venga persa se mai nel sito in cui l’abbiamo presa venisse spostata
Il tag per fare un collegamento ipertestuale è a
a href="http://www.unict.it">La mia università
Lì metto il collegamento link , dentro al tag a devo mettere la parola che voglio si clicchi per andare al link
br> è per andare a capo
Collegamenti con siti esterni e collegamenti con pagine del nostro stesso progetto, per i collegamenti esterni si deve aggiungere target= _blank per fare aprire il collegamento esterno in un’altra finestra
a href="http://www.unict.it" target="_blank">La mia università
Nei collegamenti esterni per mettere un tasto che ritorni di nuovo alla home devo mettere:
a href=index.htm> Torna alla home (metto index.htm perché ho chiamato così la home, devo mettere il link della home)
Il tag hr> serve per mettere una linea orizzontale
Il tag div> divide le sezioni
Per differenziare le parti si usano le diverse sezioni: id e classe
Id serve per identificare univocamente un elemento, la caratteristica è che deve essere univoco, nella stessa pagina non ci possono essere due id uguali.
La classe ci permette di assegnare lo stesso nome a più blocchi senza avere errori, la classe infatti non è univoca ma può essere assegnata a più elementi
I tag semantici hanno un significa chiaro per raggruppare tutte le sezioni: sectioning elements, servono a raggruppare le sezioni. Il primo è header> serve per la testata iniziale del nostro sito, rappresenta le info introduttive o di supporto alla navigazione (es: il nome del blog o del giornale) . all’interno dell’header> spesso si inserisce l’h1>.
Il blocco di navigazione è il tag nav> , spesso qui dentro si mettono i link,
il tag ul> è per fare un elenco non numerato
• Si usa così per fare l’elenco così
Per creare un indice interno
article> contiene un contenuto autosufficiente del documento ad esempio un articolo di giornale
section> una sezione dove sono raggruppati tematicamente una serie di contenuti, all’interno possiamo usare dei titoli. Section è interpretato come un tag semantico, serve per raggruppare contenuti. Section si può trovare sia dentro article che stare fuori e raggruppare più article
Tag aside> è correlato agli altri contenuti della pagina, serve per dare la barra laterale. Serve per separare il contenuo rincipale da un contenuto correlato ma che è a margine.