HTML Lezione 2 - Composizione

NON COPIATE IL TUTORIAL O VI SPEZZO LE BRACCINE.

HTML Lezione 2 - Composizione

Dopo aver imparato la struttura, adesso impariamo un po' come comporre la nostra pagina. Stavamo costruendo una pagina per gli amanti del Giappone, giusto?

Devo precisare una cosa spiegata nella lezione 1: esistono alcuni tag senza chiusura come

ma, con l'xhtml (che dovremmo usare) sarebbe cosa buona e giusta utilizzare l'autochiusura, ovvero chiudere alla fine i tag di cui non esiste la chiusura, come br e img:

come avete notato c'è uno spazio e poi una barra prima della chiusura, questo avviene quando il tag non è un tag che ha apertura + chiusura come i seguenti


Iniziamo a spiegare giusto un po' di codici basilari.
Ricordiamo la nostra struttura di base che è


Il contenuto della pagina dovrà essere necessariamente infilato in body.
Iniziamo con l'inserire una frase del genere così strutturata e in alto della pagina:



Iniziamo con l'aprire un paragrafo con il tag

che conterrà questo titolo. Con il tag paragrafo potete fare molte cose, come ad esempio allinearlo al centro. Per metterlo al centro basta inserire nel tag il codice align="center" (che può essere anche left o right se non volete metterlo al centro)
Il codice completo sarà

Come vedete abbiamo inserito un br poichè la frase seguente va a capo!
Ma non è ancora finita poichè lo stile ha differenti grandezze ed è inoltre bold, ovvero in grassetto. Per farlo in grasseto potete usare il tag

che però è un po' vecchiotto. Secondo l'attuale html, viene più e meglio usato il tag

per cui usiamo quest ultimo e andiamo a comporre il codice nuovamente:

Potete notare che il tag grassetto è inserito dentro il paragrafo, altrimenti sarebbe stupido! XD

Manca ancora qualcosa però, poichè il testo in alto dovrebbe essere più grande. Qui viene usato il tag

per impostare i valori del testo: esistono vari codici da poter usare dentro font, andiamo a vedere quali sono

face="" qui va inserito il tipo di font (Arial, Tahoma, Verdana, ecc)
size="" la grandezza del font, si può usare +1, +2 ecc, -1, -2 ecc, 1, 2 ecc. Per trovare la grandezza che vi serve fate molte prove!
color="" il colore, potete scriverlo in inglese (black, white, red ecc) o con i codici esadecimali (#000000 è il colore del nero, #FFFFFF è quello del bianco, ecc)

dobbiamo impostare alla prima frase una grandezza superiore alla seconda, impostiamo +3 se ci piace ed ecco il codice:

come avrete notato, il tag font l'ho messo dopo il grassetto, perchè?
Il grassetto comprende tutto il paragrafo mentre il tag font deve comprendere solo la prima frase, dato che il grassetto viene chiuso alla fine della seconda frase non potevo mettere l'apertura del font prima del grassetto e la chiusura prima che chiuda questo.
Vi spiego più chiaramente:

La struttura html funziona ad insiemi, c'è un insieme, un insieme dentro, un altro insieme dentro e così via
c'è
bla e /bla
dobbiamo mettere lol, va messo DENTRO bla
bla lol /lol /bla
bla lol nya /nya /lol /bla
bla lol nya hug /hug /nya /lol /bla
bla lol nya hug chu /chu /hug /nya /lol /bla

potete intuire che sono tutti uno dentro l'altro, non esiste che si faccia un
bla lol /bla /lol
il lol dev'essere chiuso dentro bla.

Per cui, se il tag font andava fuori il tag strong, doveva essere chiuso dopo questo. Dato che il tag strong comprende due frasi mentre il tag font doveva comprenderne solo una, il tag font va inserito dentro il tag strong.

salvate la vostra pagina con il nome index.html (o htm, non c'è molta differenza). Index serve a trascinare su quella pagina tutte le persone che cliccano sul vostro sito:
se il vostro sito è www.bla.it non c'è bisogno che scriviate anche il nome della pagina, ovvero www.bla.it/index.html poichè la pagina che si chiama index fa automaticamente da redirect. Ovviamente, se non avete una pagina index, arrivando sul sito ci sarà un errore. Se avete per esempio la pagina home.html, per andare su quella pagina dovete necessariamente andare su www.bla.it/home.html

Click!