HTML è l’acronimo che sta per Hyper Text Markup Language. E’ un linguaggio di presentazione web. In questa breve guida riassumeremo gli argomenti principali trattati a lezione.
Indice:
Introduzione;
La sintassi;
Struttura base;
Formattazione del testo;
Immagini;
Tabelle.
L’Html è formato di TAG, ognuno di essi ha un numero di ATTRIBUTI che specifichiamo quando vogliamo definire gli aspetti che andranno a caratterizzare l’oggetto che stiamo creando nella pagina web, e lo facciamo assegnando dei VALORI (nei formati previsti) a questi attributi.
Un tag inizia sempre con il simbolo < minore e finisce col > maggiore. Un tag di chiusura inizia con il <maggiore più lo / slash. Un attributo va seguito dal simbolo = ed il valore va tra virgolette.
<tag attributo1="valore1" attributo2="valore2"></tag>
Ogni tag va chiuso come indicato, tranne per quelli che fanno eccezione. Se per esempio dimentichiamo di chiudere il tag per rendere il testo corsivo, tutto ciò che viene dopo il tag resterà in corsivo!
Volendo, nel voglio foglio di lavoro potremmo scrivere tutti i tag uno dopo l’altro ma il risultato darebbe una gran confusione e sarà un’impresa individuare una eventuale porzione di codice che necessita un aggiornamento in seguito. Il codice, e solo il codice, non fa distinzione tra maiuscole e minuscole.
Per aiutarci possiamo usare delle note nel codice, da mettere appunto per dare inizio e fine ad una porzione di codice che magari richiedrà un aggiornamento in seguito, oppure per ricordarci a cosa serve e a che punto del foglio siamo.
<!questa è una nota e non apparirà nella pagina web>
Una pagina web va aperta in un certo modo e vi sono i codici di base che non devono mancare:
<html>
<head>
All’interno di head si possono specificare codici come title ma anche codici per indicizzare al meglio il nostro sito su Google, dei richiami al foglio di stile che abbiniamo alla nostra pagina ed anche codici per installare degli script nel sito.
</head>
<body>
All’interno del body scriveremo appunto tutto ciò che vogliamo inserire all’interno della pagina web.
</body>
</html>
Esempio del title
<title>Titolo della pagina che appare come titolo della finestra del browser</title>
Al tag body posso essere assegnati attributi come bgcolor che serve per indicare il colore di sfondo della pagina, alla quale all’interno inseriamo il nome del colore in inglese, opure il codice esadecimale preceduto dal cancelletto.
<body bgcolor="blue">
<body bgcolor="#0000CC">
Quando scriviamo dei paragrafi di testo, è bene usare il comando <p> alla quale all’interno inseriamo il testo, prima di chiudere il tag</p>.
Alcuni attributi che possiamo dare al <p> sono align e class.
Con l’attributo align possiamo allineare il paragrafo orizzontalmente nella pagina, dando i valori prefediniti:
left (valore di default), center e right.
<p align="center">paragrafo centrato</p>
<p align="right">paragrafo a destra</p>
Se non specifichiamo questo attributo, il testo si allinea di default a sinistra.
L’attributo class serve ad indicare il nome dello stile (associato al CSS), che vogliamo dare a questo paragrafo
<p class="Nome Stile"></p>
Automaticamente, se scriviamo utilizziamo una serie di paragrafi, essi si distanziano tra loro con un’interlinea. E’ assolutamente sbagliato però, nonché errore comune di molti sviluppatori, utilizzare questo tag per andara a capo.
Il tag apposito per mandare il testo a capo a prescindere dal paragrafo in cui si trova è il tag <br> che si possiamo rafforzare per andare a capo lasciando una o più righe vuote utilizzandolo due o più volte di seguito.
Il tag <br> è uno dei pochi che non va chiuso. Non esiste infatti il tag di chiusura </br>.
Per specificare il tipo di carattere, il colore e la dimensione che deve avere che il nostro testo, utilizziamo il tag font, alla quale attribuiamo il tipo di carattere con l’attributo face, la dimensione con size ed il colore con color.
<font face="Tahoma" size="2" color="#000000">testo</font>
I valori che possiamo dare al color possono essere i nomi dei colori in inglese, oppure il codice esadecimale di una determinata variante di un colore. In questo caso il valore deve essere preceduto dal #. Il valore esadecimale si da con numeri da 0 a 9 e lettere dalla a alla f.
Ecco alcuni semplici tag per la formattazione:
<i>testo in corsivo</i>
<b>testo in grassetto</b> oppure <strong>testo</strong>
<u>testo sottolineato</u>
<s>testo sbarrato</s>
Quando scriviamo dei paragrafi di testo, è bene usare il comando <p> alla quale all’interno inseriamo il testo, prima di chiudere il tag</p>.
Alcuni attributi che possiamo dare al <p> sono align e class.
Con l’attributo align possiamo allineare il paragrafo orizzontalmente nella pagina, dando i valori prefediniti:
left (valore di default), center e right.
Per inserire un’immagine basta usare il semplice codice <img>. Anche questo è un tag che non necessita la chiusura. Gli attributi necessari all’inserimento sono src, alla quale si specifica il nome del file (che fa distinzione tra minuscole e maiuscole) e alt, dentro alla quale si scrive una descrizione dell’immagine. Volendo si può specificare il bordo, la larghezza e l’altezza dell’immagine.
<img src="percorso/dell/immagine/nomeimg.jpg" border="0" width="700" height="250" alt="banner">
Il tag apposito per creare una tabella è table, ogni tabella è composta da un numero un righe e colonne. Le righe si sono i tr mentre le colonne sono indicate con td, entrambi sono codici e non attributi di table.
Gli attributi possono essere align, bgcolor, backgroung (alla quale si specifica un’immagine di sfondo indicandone il percorso nello spazio apposito ad indicare il valore dell’attributo. Con cellspacing si indica il margine tra le celle, Cellpadding indica invece il margine tra il testo e la cella di appartenenza. Con border indichiamo lo spessore della tabella.
Con width ed heigth indiciamo rispettivamente, la larghezza e l’altezza della tabella, possiamo eventualmente specificare questi attributi alle singole colonne e righe ed il valore va indicato in pixel o percentuale.
Le colonne vanno aperte all’interno delle righe. Il numero di colonne deve essere uguale al numero di colonne presenti in ogni riga a meno che non vogliamo unire le celle, ma per questo servirà un attributo apposito.
Se diamo alla tabella l’attributo align, indichiamo l’allineamento che deve prende la tabella all’interno della pagina, se invece diamo questo attributo alla colonna, indichiamo l’allineamento che deve avere ciò che inseriamo all’interno della colonna.
L’attributo background può essere specificato o alla tabella in generale o alle singole colonne ma NON alle righe.
Eccoun esempio che contiene tutti i tag e gli attributi specificati:
<table border="1" cellpadding="2" cellspacing="0" bgcolor="#0000cc" align="center" width="100%" height="100%">
<tr>
<td>riga 1 cella 1</td>
<td>riga 1 cella 2 </td>
<td>riga 1 cella 3 </td>
</tr>
<tr>
<td>riga 2 cella 1 </td>
<td>riga 2 cella 2 </td>
<td>riga 2 cella 3 </td>
</tr>
<tr>
<td>riga 3 cella 1</td>
<td>riga 3 cella 2</td>
<td>riga 3 cella 3</td>
</tr>
</table>
| riga 1 cella 1 | riga 1 cella 2 | riga 1 cella 3 |
| riga 2 cella 1 | riga 2 cella 2 | riga 2 cella 3 |
| riga 3 cella 1 | riga 3 cella 2 | riga 3 cella 3 |
Il risultato è una tabella che occupa in larghezza ed in altezza tutto lo spazio a disposizione delle pagina web, se vogliamo unire più celle nella stessa riga usiamo l’attributo colspan. Se per esempio diamo questo attributo alla prima cella della prima riga, e diamo come valore 3, la cella si prenderà lo spazio di 3 celle (corrispondende ovviamente alle celle che si trovano sotto). Bisogna infine eliminare le celle superflue che rimangono nella riga in questione.
Lo stesso metodo si può usare con l’attributo rowspan, che funziona allo stesso modo, ma per unire stavolta, celle che appartengono a righe diverse.
In questo eempio, definiamo anche la larghezza per le colonne, in modo che abbiano ognuna la stessa larghezza (che altrimenti si regolerebbe diversamente per ogni colonna, in base a quanto ci scriviamo dentro)
<table border="1" cellpadding="2" cellspacing="0" bgcolor="#0000cc" align="center" width="100%" height="100%">
<tr>
<td colspan="3">riga uno che ha preso lo spazio di 3 celle</td>
</tr>
<tr>
<td rowspan="2" width="30%">questa riga, a cui do il comando rowspan="2"
prende lo spazio della cella che sta sotto</td>
<td width="20%">riga 2 cella 2 </td>
<td width="20%">riga 2 cella 3 </td>
</tr>
<tr>
<td>riga 3 cella 2</td>
<td>riga 3 cella 3</td>
</tr>
</table>
| riga uno che ha preso lo spazio di 3 celle | ||
| questa riga, a cui do il comando rowspan=”2″ prende lo spazio della cella che sta sotto |
riga 2 cella 2 | riga 2 cella 3 |
| riga 3 cella 2 | riga 3 cella 3 | |
Se per esempio dimentichiamo di togliere le righe che invece vanno assorbite dall’attributo colpsan o rowspan, ecco cosa succede, si mettono all’estremità della tabella e noteremo subito l’errore in quanto non vi sono celle sotto!
<table border="1" cellpadding="2" cellspacing="0" bgcolor="#0000cc" align="center" width="100%" height="100%">
<tr>
<td colspan="3">riga uno che ha preso lo spazio di 3 celle</td>
<!facciamo finta di dimenticarle>
<td></td>
<td></td>
<!facciamo finta di dimenticarle>
</tr>
<tr>
<td rowspan="2" width="30%">questa riga, a cui do il comando rowspan="2"
prende lo spazio della cella che sta sotto</td>
<td width="20%">riga 2 cella 2 </td>
<td width="20%">riga 2 cella 3 </td>
</tr>
<tr>
<td>riga 3 cella 2</td>
<td>riga 3 cella 3</td>
</tr>
</table>
| riga uno che ha preso lo spazio di 3 celle | ||||
| questa riga, a cui do il comando rowspan=”2″ prende lo spazio della cella che sta sotto |
riga 2 cella 2 | riga 2 cella 3 | ||
| riga 3 cella 2 | riga 3 cella 3 | |||
[...] Tutorial Html Inserito da: vuze | Aprile 5, 2009 [...]
Da: Hello wordpress! « Wordpress di Vuze su 7 aprile 2009
alle 12:40 am