Font in HTML

I tag utilizzati per editare un testo vengono racchiusi nei tag:


<font>
</font> Gli attributi appartenenti al tag font sono:

• size
• color
• face

Attributi size Con questo tag possiamo modificare la dimensione del testo. <font size=4> Il size impostato è 4. </font> Il size impostato è 4. color Questo tag permette di specificare il colore del testo. Le rose sono <font color="#d20000">rosse</font.> Le rose sono rosse. face Serve per specificare il carattere che si vuole utilizzare. <font face=arial> Questo testo è scritto in Arial. </font> Questo testo è scritto in Arial.

---

- FINE -

Immagini in HTML

Per poter inserire un'immagine nella nostra pagina web dobbiamo usare una semplice stringa di codici:

<img src="file.png" />

Con src="file.png" (source=sorgente) possiamo specificare il nome del file immagine o il percorso del file immagine. Ad esempio se l'immagine che vogliamo inserire non è salvata nella nostra cartella possiamo inserire il suo URL:

<img src="http://it.html.net/tutorials/html/tim.it.jpg" />

Attributi    height e width Il tag height serve per definire, in pixel o in percentuale, l'altezza dell'immagine. Il tag width serve per definire, in pixel o in percentuale, la largezza dell'immagine. <img height=244 width=370 src="http://it.html.net/tutorials/html/tim.it.jpg" /> align Con l'attributo align possiamo determinare l'allineamento dell'immagine utilizzando i valori left, center e right (rispettivamente: sinistra, centro e destra).   <img align=right height=244 width=370 src="http://it.html.net/tutorials/html/tim.it.jpg" />

---

- FINE -

Tabelle in HTML

I tag utilizzati per creare una tabella vengono racchiusi nei tag:

<table>

</table>

Vengono utilizzati i tag:

• <tr>  = crea una riga
• <th> = crea una cella che funge da intestazione compresa nella riga
• <td> = crea una cella compresa nella riga

<table> <table> <tr><th>Lettere</th><th>Numeri</th></tr> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td>2</td></tr> <tr><td>C</td><td>3</td></tr> </table> Lettere Numeri A 1 B 2 C 3 Attributi border Serve per definire, in pixel, lo spessore del bordo della tabella. Per creare una tabella senza bordi, cioè invisibile, omettere il tag border. <table border=3> <tr><th>Lettere</th><th>Numeri</th></tr> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td>2</td></tr> <tr><td>C</td><td>3</td></tr> </table> Lettere Numeri A 1 B 2 C 3 cellspacing Serve per definire al distanza tra una cella ed un'altra. <table border=2 cellspacing=9> <tr><th>Lettere</th><th>Numeri</th></tr> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td>2</td></tr> <tr><td>C</td><td>3</td></tr> </table> Lettere Numeri A 1 B 2 C 3 cellpadding Serve per determinare, in pixel, lo spazio tra il testo della cella ed il bordo. <table border=2 cellpadding=9> <tr><th>Lettere</th><th>Numeri</th></tr> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td>2</td></tr> <tr><td>C</td><td>3</td></tr> </table> Lettere Numeri A 1 B 2 C 3 align Con l'attributo align possiamo determinare l'allineamento della tabella o del testo di una cella utilizzando i valori left, center e right (rispettivamente: sinistra, centro e destra). <table align=right border=2 > <tr><th>Lettere</th><th>Numeri</th></tr> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td>2</td></tr> <tr><td>C</td><td>3</td></tr> </table> Lettere Numeri A 1 B 2 C 3 bgcolor Serve per determinare il colore di una cella, di una riga o dell'intera tabella. Facciamo un esempio dove il colore #99FF66 andrà a colorare tutta la tabella, il colore #CCFFFF andrà a colorare la seconda riga e il colore #FF3300 andrà a colorare la seconda cella della terza riga. <table bgcolor=#99FF66 border=2> <tr><th>Lettere</th><th>Numeri</th></tr> <tr bgcolor=#CCFFFF><td>A</td><td>1</td></tr> <tr><td>B</td><td bgcolor=#999966>2</td></tr> <tr><td>C</td><td>3</td></tr> </table> Lettere Numeri A 1 B 2 C 3 rowspan Tramite l’attributo rowspan (da riferirsi sempre a <td>) è possibile creare delle celle che occupino più di una riga. <table border=3> <tr><th>Lettere</th><th>Numeri</th></tr> <tr><td rowspan=2>A</td><td>1</td></tr> <tr><td>2</td></tr> <tr><td>B</td><td>3</td></tr> </table> Lettere Numeri A 1 2 B 3 colspan Tramite l’attributo colspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una colonna. <table border=3> <tr><th>Lettere</th><th>Numeri</th></tr> <tr><td colspan=2>A & 1</td></tr> <tr><td>B</td><td>2</td></tr> <tr><td>C</td><td>3</td></tr> </table> Lettere Numeri A & 1 B 2 C 3

---

- FINE -

Elenchi o liste in HTML

Per creare elenchi in una pagina web vengono usati i tag:

• <ul> elenchi non ordinati
• <ol> elenchi ordinati
• <dl> elenchi di definizione

Per creare, invece, le voci dell'elenco si usa il tag <li>. Bisogna specificare che la chiusura </li> non è obbligatoria ma è consigliato metterla.

<ul> Il tag <ul> Serve per creare una lista non ordinata di un elenco puntato di voci. Per la creazione delle voci richiede al suo interno l'uso del tag <li>. <ul> <li>Lettere</li> <li>Numeri</li> <li>Simboli</li> </ul> Lettere Numeri Simboli Attributi    type Il tag <ul> per default adopera un pallino nero, con l'attributo type si possono cambiare in cerchietti (circle) o quadratini (square). <ul type=circle> <li>Lettere</li> <li>Numeri</li> <li>Simboli</li> </ul> Lettere Numeri Simboli <ul type=square> <li>Lettere</li> <li>Numeri</li> <li>Simboli</li> </ul> Lettere Numeri Simboli

<ol> Il tag <ol> Serve per creare una lista ordinata di un elenco puntato di voci. Per la creazione delle voci richiede al suo interno l'uso del tag <li>. <ol> <li>Lettere</li> <li>Numeri</li> <li>Simboli</li> </ol> Lettere Numeri Simboli Attributi    type Il tag <ol> per default adopera la numerazione e segue l'ordine cronologico: 1, 2, 3 e cos' via. Con l'attributo type si possono cambiare i numeri con una delle seguenti alternative: -type="A" Lettere maiuscole: A , B, C, ... -type="a"  Lettere minuscole: a, b, c, ... -type="I"  Numerazione romana maiuscola: I, II, III, ... -type="i"  Numerazione romana minuscola: i, ii, iii, ... -type="l"  I numeri come da default: 1, 2, 3, ... <ol type=I> <li>Lettere</li> <li>Numeri</li> <li>Simboli</li> </ol> Lettere Numeri Simboli start nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una lettera diversa da "a", sarà sufficiente usare l'attributo start impostando il valore alfanumerico da cui iniziare l'incremento. <ol type=a start=5> <li>Lettere</li> <li>Numeri</li> <li>Simboli</li> </ol> Lettere Numeri Simboli

<dl> Con gli elementi <dt>, <dd> e <dl> è possibile creare Elenchi di definizione, dove con <dt> si definisce il termine e con <dd> la sua definizione o descrizione. Il tutto racchiuso in una struttura <dl>. <dl>   <dt>Lettere</dt>      <dd>A B C</dd>   <dt>Numeri</dt>      <dd>1 2 3</dd>   <dt>Simboli</dt>      <dd>£ & % ? !</dd> </dl> Lettere A B C Numeri 1 2 3 Simboli £ & % ? ! Il tag <dl> non ha attributi

---

- Fine -

Tag base del linguaggio HTML

Tag Base

HTML (HyperText Markup Language) è il linguaggio con cui le pagine web vengono scritte e progettate.

<html> <head>...</head> <body>...</body> </html>	Struttura di base per ogni documento HTML
<title>...</title>	Titolo del Documento (Tag inserito nel head...head)
<!-- Note sulla pagina -->	Note ed informazioni nel corpo del testo ma non visualizzate dal browser
<body bgcolor="#7f7f7f">	Colora lo sfondo della web page
<body background="filename.gif">	Usa un'immagine grafica per creare uno sfondo per la pagina web
<body TEXT="#7f7f7f"> <body LINK="7F7F7F"> <body VLINK="#7F7F7F">	Colora tutti gli oggetti testuali o i link di qualsiasi colore l'utente desideri
<Hn.../Hn> <Hn align=center.../Hn>	Intestazioni di sezioni con grandezza variabile, dove n = 1 a 6. align=center per allineare l'intestazione al centro della pagina
<b.../b> <i.../i> <tt.../tt> <u.../u> <strike>...</strike>	Applica grassetto, corsivo, telescrivente (caratteri monospaziati), sottolineato o sbarrato
<pre>...</pre>	Visualizza caratteri mono spaziati con tutti gli spazi e i ritorni a capo preimpostati
<font size=X>... </font>	Cambia l'altezza del testo selezionato, dove x = 1 - 7
<big>...</big> <small>...</small>	Cambia l'altezza di caratteri del testo selezionato, rendendolo più grande o più piccolo di qello corrente
<font color="#7f7f7f">...</font>	Cambia il colore dei testi selezionati dove #7f7f7f è il codice esadecimale del valore del colore RGB
<sup>...</sup> <sub>...</sub>	Apice Pedice
<p>...</p>	Forza nuovi paragrafi con una linea bianca di separazione
<br>	Crea nuovi paragrafi senza una linea bianca di separazione
<hr> <hr width=X size=X align=left|right noshade>	Crea nuovi paragrafi con una linea di separazione piena. Attributi opzionali: width specifica la larghezza della linea sulla pagina, dove X è il numero assoluto dei pixel e "X%" un'ampiezza relativa alla finestra del browser; size specifica lo spessore della linea in pixel; align forza la linea ad alinnearsi ad un lato della pagina piuttosto che al centro; noshade disegna una linea intera senza l'ombra tridimensionale
<center>... </center>	Allinea qualsiasi cosa al centro della pagina ESEMPIO: <p align=center>... </p>
<table>...</table> <table border=X cellpadding=Y cellspacing=Z>...</table> <table> <tr> <td align=left|center|right valign=top|middle|bottom rowspan=X colspan=Y bgcolor=#7F7F7F>...</td> </tr> </table>	Le tabelle semplici hanno bordi spessi un pixel e divisori tra le varie celle. Omettendo l'attributo border, o border=0, si crea una tabella invisibile. Valori del border maggiori di 1 creano un bordo più grosso. Cellpadding è la quantità di spazio (in pixel) tra il contenuto della cella e la sua parete.   Cellspacing determina la larghezza della parete propria delle celle. <tr> definisce la singola riga della tabella e <td> fornisce i dati contenuti in una singola cella della riga. Opzionali per il tag <td> sono l'allineamento orizzontale e verticale in una cella. Gli attributi rowspan e colspan possono essere usati per creare cell che si allungano per più di una cella. L'attributo bgcolor definisce un colore di sfondo per una cella (dentro un tag <td>), una riga (dentro un tag <tr>) o per l'intera tabella (dentro un tag <table>)
<ul type=XXXX>    <li>....    <li>....    <li>.... </ul>	Elenchi non ordinati: type=circle   type=square   type=disc
<ol type=X start=i>    <li>....    <li>....    <li>.... </ol>	Elenchi ordinati: type=1 (1,2,3,4,..) type=A (A,B,C,D,..) type=a (a,b,c,d,..) type=I (I,II,III,IV,...) type=i (i,ii,iii,iiii,...) start comincia una lista da un determinato numero
<dl>      <dt>....        <dd>,,,,,,,,      <dt>....        <dd>,,,,,,,,     <dt>...        <dd>,,,,,,,,</dl>	Elenchi di definizioni: Con <dt> crei un titolo Con <dd> crei una descrizione
<img src="file.gif"> <img src="file.gif"  alt="ABCD"  align=top|middle|bottom|left|rigt  height=X  width=Y  hspace=H  vspace=V border=N>	Serve ad inserire un'immagine in una pagina web. - src è il nome, il percorso file, oppure l'URL del file immagine; - alt (alternativa) è una stringa di testo visualizzata dai browser non grafici o utenti a cui il caricamento dell'immagine è saltato;  - align controlla la relazione immagine con il testo intorno; top, middle, bottom allineano una riga del testo successivo; left, right dispongono l'immagine su un lato della pagina e adattano il testo intorno ad essa; - height e width sono le dimensioni di un immagine (in pixel); - hspace e vspace indicano quando spazio bianco (in pixel) deve essere lasciato come contorno all'immagine; - border definisce (in pixel) lo spessore del bordo dell'immagine
<a href="file.gif">testo link</a>	Link ipertestuali che partono da un'immagine visualizzata. Il valore del tag href può essere un'immagine con file locale od un URL completo

---

- FINE -

Cos'è un URL

Un URL è l'indirizzo univoco di un file su Internet. URL è l'acronimo di Uniform Resource Locator. Gli URL consentono di individuare una risorsa quale una pagina Web, un'immagine o un file audio.

Dominio

Il dominio è costituito da una serie di stringhe separate da punti www.google.it . La parte più importante è la prima partendo da destra. Questa è detta dominio di primo livello (Top Level Domain), per esempio .org o .it 

Un dominio di secondo livello consiste in due parti (google.it). Ogni elemento che verà aggiunto prima darà un adiversa classificazione al dominio (ad esempio plus.google.it è un dominio di terzo livello)

---

- FINE -