Ciao! Siamo ad una nuova lezione.
Oggi si programma!!
Intanto è bene stabilire un ordine nel sito. Abbiamo paragonato la pagina web ad un corpo, quindi avremo una HEAD (testa) ed un BODY(corpo).
head e body saranno racchiusi nel corpo unico: HTML.
Sto parlando di tag: <head>......</head> e <body>....</body>.
Adesso un piccolissimo ripasso; che tipo di tag sono questi due?
Ebbene sono dei tag contenitori, perchè hanno il tag di chiusura.
Adesso dobbiamo rachcchiudere il tag <head> e il tag <body> all'interno del tag <hml>.
Prima di fare ciò dovete sapere che il codice può essere scritto in orizzontale (come abbiamo fatto sempre fino ad ora negli esempi), ma, con un grande codice, la lettura sarebbe davvero faticosa, quindi si procede verticalmente.
L'ordine verticale con il quale sono posizionati gli elementi sarà anche l'ordine che vedremo nella pagina. Per esempio, se
<p>testo</p>
<p>testo2</p>
allora nella pagina vedremo prima "testo" e poi "testo2".
Inoltre, sempre per questioni di ordine, dobbiamo disporre gli elementi secondo un principio di "parentela".
Il principio che si segue si chiama "indentatura" e si basa sul disporre i tag più in basso e più rientrati rispetto ai tag in cui sono contenuti.
Per esempio se <head> <p>testo</p> </head>
allora scriveremo:
<head>
<p>Testo</p>
</head>
Avremo comunque altre occasioni per guardarlo meglio.
Dato che il tag <html> contiene tutti gli altri:
<html>
.
.
.
.
</html>
Adesso consideriamo che <head> e <body> non sono uno il contenitore dell'altro, quindi possiamo dire che sono allo stesso livello. Sappiamo, però, che prima viene la testa, e poi il resto del corpo, quindi dovremo posizionare il tag <head> prima (più sopra) del tag <body>, ma senza alcuna indentatura, proprio perchè non sono parenti, l'uno non è il genitore/figlio dell'altro.
Invece <html> è il genitore di entrambi i tag, quindi, possiamo dire che head e body sono allo stesso livello, ma più rientrati rispetto a html:
<html>
<head>
</head>
<body>
</body>
</html>
Questa è una regola generale, ma ci sono programmatori che cambiano un po' le cose: alcuni danno un rientro al tag di chiusura:
<head>
</head>;
e ci sono altre variazioni, comunque tutto è lecito, dato che html è case insensitive (come abbiamo già detto).
Ovviamente il contenuto di un tag è figlio del tag stesso, quindi:
<html>
<head>
contenuto
</head>
<body>
contenuto
</body>
</html>
Quando il contenuto è molto breve, o nel caso del tag <p>, si tende a non prestare attenzione alle convenzioni, quindi si dispone tutto in orizzontale e, quindi senza indentatura:
<p>testo</p> invece di <p>
testo
</p>
Comunque da questa eccezione, sono esenti i tag <html> , <head> e <body>.
Ripeto, sono solo convenzioni che si adottano, ma non troverete mai un tag <body> sviluppato in orizzontale, nemmeno quando il suo contenuto dovesse essere breve.
Date queste convenzioni, evince che un tag che si chiude sulla stessa riga, deve NECESSARIAMENTE svilupparsi nella stessa riga es:
<p>testo nella riga</p>
perche se accadesse questo:
<p>testo </p>
nella riga sotto
il tag <p> conterrebbe solo "testo" infatti il browser legge dall'alto verso il basso, ma anche da sinistra verso destra, quindi prima di "nella riga sotto", incontra la chiusura "</p>".
Ultima cosa per oggi: prima di scrivere qualsiasi tag in una nuova pagina web, anche prima di scrivere il tag <html>, si deve inserire una stringa:
<!doctype html> dopo questo particolare tag, si può iniziare come abbiamo visto prima. In realtà ci sono altre stringhe più complete, ma, per ora, ci serve solo questa.
Se avete qualche domanda, non esitate a lasciare un commento al post. Spero vi sia stato utile. Studiate e alla prossima!
Nessun commento:
Posta un commento