I "tag" servono a organizzare i contenuti di una pagina web, ce ne sono diversi ma hanno tutti (a eccezione di pochissimi "tag") un inizio e una fine.
I "tag" sono formati dai simboli < e > all'interno dei quali si trova il nome stesso del "tag": esempio <nometag> e vengono chiusi allo stesso modo facendo precedere davanti al nome del "tag" il simbolo "/" esempio </nometag>.
Vediamone alcuni tra i più importanti:
<html> ... </html> è il tag che indica il punto di partenza della pagina da visualizzare sullo schermo, tutto il suo contenuto è la pagina web.
<head> ... </head> contiene le informazioni utili per i motori di ricerca, contiene il "tag" <title> ... </title> che serve a dare il titolo alla pagina web,.
<body> ... </body> è la vera pagina HTML, contiene quello che compare sullo schermo, quello che vediamo.
<h1> ... </h1> combina l'effetto grassetto con font e dimensione carattere (la dimensione è data dal numero dopo la lettera h, numero che può variare da 1 a 6. Inoltre il "tag" lascia uno spazio sopra e sotto la scritta contenuta.
<br> va a capo di una linea, il "tag" non necessita di chiusura
<bh> disegna una linea, il "tag" non necessita di chiusura
<a è il "tag" per il link, href> è l'attributo del "tag" per linkare una pagina web o un file. E' importante ricordarsi che per linkare una pagina web bisogna inserire l'indirizzo completo in forma http://www.ecc... in caso contrario il browser andrà a cercare pagine interne al sito.
All'interno del "tag" andrà inserita anche il testo da visualizzare come link ed infine la chiusura del "tag" </a>.
*!* href="id" è l'identificatore, per linkare un punto della pagina.
esempio <a href="http://www.google.it">link a google.it</a>
esempio <a href="#a1">Clicca qui per andare in fondo alla pagina</a> ... <a id="a1">
<p> ... </p> è il "tag" paragrafo, lascia una riga spaziata in alto e una spaziata in basso per tutto il testo contenuto dentro il "tag".
La livello strutturale è fondamentale impostarei "tag" all'interno della pagina seguendo un modello di tipo matriosca come l'esempio seguente:
<html>
<head>
<title>
.....
</title>
</head>
<body>
.....
</body>
</html>
non rispettando questa struttura si incrrerà in errori di visualizzazione della pagina.
Liste:
<ul> ... </ul> è il "tag" per creare delle liste, molto utile per creare dei menù all'interno delle pagine web, ci sono due tipologie di liste: unordered (disordinate, con i pallini ecc...) e <ol> ... </ol> ordered (ordinate, con numeri ecc...), vediamo un esempio:
<ul> //unordered
<li>uno</li>
<li>due</li>
<li>tre</li>
</ul>
<ol> //ordered
<li>uno</li>
<li>due</li>
<li>tre</li>
</ol>
Tabelle:
Molto importanti sono le tabelle che permettono tra l'altro di creare i layout delle pagine web.
il "tag" da utilizzare è <table> ... </table>.
vediamo un esempio:
<table "widht:100" border="1">
//widht->occupa il 100% dell'area visibile, se non viene utilizzato la tabella viene adattata alla parola più lunga.
<tr>
//"tag" per creare una riga all'interno della tabella.
<td>
// "tag" per creare celle all'interno della tabella (non colonne)
</td>
<th>
// "tag"per l'intestazione
</th>
</tr>
<tr> //righe
<td>...</td>
<td>...</td>
</tr>
<tr> //righe
<td>...</td>
<td>...</td>
</tr>
</table>
E' possibile effettuare delle operazioni sulle celle per unirle l'une alle altre:
<td colspan="3"> le unisce in orizzontale, in questo caso tre celle
mentre
<td rowspan="3"> le unisce in verticale, in questo caso tre celle
Vediamo un esempio di un layout di una pagina web creato con i "tag" <table>:
<html>
<body>
<p>Esercizio Tabella</p>
<table style="width:100%" border="1">
<tr>
<th>LOGIN</th>
<td colspan="2">INTESTAZIONE...........................................</td>
</tr>
<tr>
<td>Menu
<ul>
<li>selezione 1</li>
<li>selezione 2</li>
<li>selezione 3</li>
</ul>
</td>
<td>CORPO DEL TESO....</td>
<td>colonna dx</td>
</tr>
<tr>
<td colspan="3">
chiusura layout pagina...................................
</td>
</tr>
</table>
</body>
</html>
Fonti: Appunti lezione Prof. Alemanno
Nessun commento:
Posta un commento