Descrizione:
Breve References sull'Html :
HTML Hyper Text Marckup Language
L'Html è un linguaggio del web per creare pagine internet, non è difficile da imparare poiche non è altro che un sistema di marcatura del testo, cosa ben diversa da un linguaggio di programmazione.
Per pubblicare informazioni destinate ad una distribuzione globale, è necessario usare un linguaggio universalmente compreso, una specie di madre lingua per l'editoria che tutti i computer siano in grado potenzialmente di comprendere. Il linguaggio di pubblicazione usato dal World Wide Web è l'HTML (da HyperText Markup Language - linguaggio di marcatura ipertestuale).
Una breve storia dell'HTML (fonte W3Consortium)
L' HTML fu sviluppato in origine da Tim Berners-Lee mentre si trovava al CERN, e reso popolare dal browser Mosaic, sviluppato presso la NCSA. Nel corso degli anni '90 si è imposto grazie alla crescita esplosiva del Web. Durante questo tempo l'HTML è stato ampliato in molti modi. Il Web poggia sul fatto che autori di pagine Web e rivenditori condividono le medesime convenzioni per quanto riguarda l'HTML. Ciò ha motivato un lavoro congiunto sulle specifiche dell'HTML.
L'Html è un linguaggio del web per creare pagine internet, non è difficile da imparare poiche non è altro che un sistema di marcatura del testo, cosa ben diversa da un linguaggio di programmazione.
Per pubblicare informazioni destinate ad una distribuzione globale, è necessario usare un linguaggio universalmente compreso, una specie di madre lingua per l'editoria che tutti i computer siano in grado potenzialmente di comprendere. Il linguaggio di pubblicazione usato dal World Wide Web è l'HTML (da HyperText Markup Language - linguaggio di marcatura ipertestuale).
Una breve storia dell'HTML (fonte W3Consortium)
L' HTML fu sviluppato in origine da Tim Berners-Lee mentre si trovava al CERN, e reso popolare dal browser Mosaic, sviluppato presso la NCSA. Nel corso degli anni '90 si è imposto grazie alla crescita esplosiva del Web. Durante questo tempo l'HTML è stato ampliato in molti modi. Il Web poggia sul fatto che autori di pagine Web e rivenditori condividono le medesime convenzioni per quanto riguarda l'HTML. Ciò ha motivato un lavoro congiunto sulle specifiche dell'HTML.
Breve References sull'Html :
!Doctype
Rappresenta la prima riga di una pagina html, precisa la versione del codice utilizzato.
Esempio:
"<"!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">"
Rappresenta la prima riga di una pagina html, precisa la versione del codice utilizzato.
Esempio:
"<"!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">"
A
Il tag <a href=""></a> viene usato per generare i link nelle pagine Html. L‘attributo principale è sicuramente "href" il cui valore indica la pagina di destinazione del link.
Oltre a questo "A"
può contenere altri elementi come, ad es., "target" che indica letteralmente "l‘obiettivo": i suoi valori più usati sono :
"_top" (per aprire il link a tutta pagina);
"_parent" (per aprire il link eliminando tutti i frame della pagina corrente);
"_blank" (per aprire il link in una nuova finestra del browser).
Il tag <a href=""></a> viene usato per generare i link nelle pagine Html. L‘attributo principale è sicuramente "href" il cui valore indica la pagina di destinazione del link.
Oltre a questo "A"
può contenere altri elementi come, ad es., "target" che indica letteralmente "l‘obiettivo": i suoi valori più usati sono :
"_top" (per aprire il link a tutta pagina);
"_parent" (per aprire il link eliminando tutti i frame della pagina corrente);
"_blank" (per aprire il link in una nuova finestra del browser).
BLOCKQUOTE
Questo tag viene utilizzato per marcare delle lunghe citazioni all‘interno di un blocco di testo.
Il testo risulterà rientrato rispetto ai margini.
Questo tag viene utilizzato per marcare delle lunghe citazioni all‘interno di un blocco di testo.
Il testo risulterà rientrato rispetto ai margini.
BODY
Delimita il codice che descrive il corpo di una pagina.
All‘interno di questo tag è contenuta tutta la pagina web che verrà visualizzata dal Browser.
Attributi:
- Background
Sfondo della pagina
Es: <BODY background="sfondo.jpg">
- Bgcolor
Colore dello sfondo
Es: <BODY bgcolor="#000000">
- Ipertesto
Specifica i colori dei link. Precisamente:
alink="colore" (colore dell‘ipertesto)
link="colore" (colore dell‘ipertesto attivo)
vlink="colore" (colore dell‘ipertesto visitato)
- Text
Colore del testo della pagina.
Es: <BODY text="#FFFFFF">
Delimita il codice che descrive il corpo di una pagina.
All‘interno di questo tag è contenuta tutta la pagina web che verrà visualizzata dal Browser.
Attributi:
- Background
Sfondo della pagina
Es: <BODY background="sfondo.jpg">
- Bgcolor
Colore dello sfondo
Es: <BODY bgcolor="#000000">
- Ipertesto
Specifica i colori dei link. Precisamente:
alink="colore" (colore dell‘ipertesto)
link="colore" (colore dell‘ipertesto attivo)
vlink="colore" (colore dell‘ipertesto visitato)
- Text
Colore del testo della pagina.
Es: <BODY text="#FFFFFF">
BR
Il tag <br> sta per break (interruzione). Provoca il passaggio alla riga successiva.
Es: riga1 <br> riga2
Il risultato sarà:
riga1
riga2
Il tag <br> sta per break (interruzione). Provoca il passaggio alla riga successiva.
Es: riga1 <br> riga2
Il risultato sarà:
riga1
riga2
CENTER
Centra orizzontalmente il testo ed ogni altro elemento.
Es: <center>Testo...</center>
Centra orizzontalmente il testo ed ogni altro elemento.
Es: <center>Testo...</center>
DIV
Questo Tag viene utilizzato per assegnare degli attributi ad un blocco di testo.
Permette di raggruppare, quindi, elementi html per formattarli insieme.
Es: <div>Testo,elementi...</div>
Questo Tag viene utilizzato per assegnare degli attributi ad un blocco di testo.
Permette di raggruppare, quindi, elementi html per formattarli insieme.
Es: <div>Testo,elementi...</div>
FONT
Questo Tag è utilizzato per definire la dimensione, il tipo e il colore del carattere usato.
La dimensione del carattere varia da 1 a 7, e quella standard ha un valore di 3.
E‘ Possibile, ad es., indicare un valore +1 (per indicare 4) o -2 (per indicare 1) tenendo presente il valore predefinito.
Questo Tag è utilizzato per definire la dimensione, il tipo e il colore del carattere usato.
La dimensione del carattere varia da 1 a 7, e quella standard ha un valore di 3.
E‘ Possibile, ad es., indicare un valore +1 (per indicare 4) o -2 (per indicare 1) tenendo presente il valore predefinito.
FORM
Delimita un modulo interattivo, all'interno può presentare controlli interattivi tipo: BUTTON, INPUT, TEXTAREA, SELECT, ecc...
Es: "<form action=""></form>"
"< input type="button" value="">"
"< textarea name="" rows= cols= ></textarea>
Delimita un modulo interattivo, all'interno può presentare controlli interattivi tipo: BUTTON, INPUT, TEXTAREA, SELECT, ecc...
Es: "<form action=""></form>"
"< input type="button" value="">"
"< textarea name="" rows= cols= ></textarea>
FRAME
Un frame è una porzione di pagina web.
Viene utilizzato per definire le caratteristiche di un singolo frame all‘interno di una pagina realizzata con più frame (attraverso il tag "frameset").
La visualizzazione di un Frame può essere ottenuta utilizzando diversi attributi che ne modificano l‘aspetto:
- "noresize" (impedisce i ridimensionamento della pagina);
- "scrolling" (può avere come valore "yes" o "no" a seconda che si desideri o meno visualizzare la barra di scorrimento);
- "frameborder" (ha un valore numerico ed indica la dimensione del bordo del frame e "0" indica nessun bordo);
- "marginwidth" (distanza tra i margini destro e sinistro);
- "marginheigth" (distanza tra i margini superiore e inferiore).
Un frame è una porzione di pagina web.
Viene utilizzato per definire le caratteristiche di un singolo frame all‘interno di una pagina realizzata con più frame (attraverso il tag "frameset").
La visualizzazione di un Frame può essere ottenuta utilizzando diversi attributi che ne modificano l‘aspetto:
- "noresize" (impedisce i ridimensionamento della pagina);
- "scrolling" (può avere come valore "yes" o "no" a seconda che si desideri o meno visualizzare la barra di scorrimento);
- "frameborder" (ha un valore numerico ed indica la dimensione del bordo del frame e "0" indica nessun bordo);
- "marginwidth" (distanza tra i margini destro e sinistro);
- "marginheigth" (distanza tra i margini superiore e inferiore).
FRAMESET
Questo tag viene usato quando la nostra pagina è suddivisa in frame.
Il tag viene usato insieme ai suoi attributi principali "rows" e "cols" i cui valori sono espressi in pixel o in percentuale.
Rows (righe) viene utilizzato per suddividere la pagina orizzontalmente, Cols (colonne) per suddividerla verticalmente.
Es:
<FRAMESET framespacing="0" border="false" frameborder="0" rows="100,*">
<FRAME name="top" scrolling="no" noresize marginwidth="0" marginheight="0" src="top.htm">
<FRAME name="corpo" src="corpo.htm">
Questo tag viene usato quando la nostra pagina è suddivisa in frame.
Il tag viene usato insieme ai suoi attributi principali "rows" e "cols" i cui valori sono espressi in pixel o in percentuale.
Rows (righe) viene utilizzato per suddividere la pagina orizzontalmente, Cols (colonne) per suddividerla verticalmente.
Es:
<FRAMESET framespacing="0" border="false" frameborder="0" rows="100,*">
<FRAME name="top" scrolling="no" noresize marginwidth="0" marginheight="0" src="top.htm">
<FRAME name="corpo" src="corpo.htm">
H - H1,..,H6
Questo Tag viene usato per definire i titoli delle sezioni. il Tag H1 è quello che indica il titolo di primo livello, gli altri via via decrescendo.
Eempio:
<H1>Titolo della pagina</H1>
Questo Tag viene usato per definire i titoli delle sezioni. il Tag H1 è quello che indica il titolo di primo livello, gli altri via via decrescendo.
Eempio:
<H1>Titolo della pagina</H1>
HEAD
Tra iag <head> ed </head> è contenuta l‘intestazione della pagina dove sono contenute alcune informazioni come i "meta-tag" o il titolo (<title>) della pagina.
Queste informazioni non vengono comunque visualizzate dal Browser, ma vengono prese in considerazione ad esempio dai motori di ricerca.
Esempio:
<head>
<meta NAME="DESCRIPTION" CONTENT="herrel - l'angolo rel fagiano">
<meta NAME="KEYWORDS" CONTENT="herrel, fagiano, html,">
<title>titolo della pagina</title>
</head>
Tra iag <head> ed </head> è contenuta l‘intestazione della pagina dove sono contenute alcune informazioni come i "meta-tag" o il titolo (<title>) della pagina.
Queste informazioni non vengono comunque visualizzate dal Browser, ma vengono prese in considerazione ad esempio dai motori di ricerca.
Esempio:
<head>
<meta NAME="DESCRIPTION" CONTENT="herrel - l'angolo rel fagiano">
<meta NAME="KEYWORDS" CONTENT="herrel, fagiano, html,">
<title>titolo della pagina</title>
</head>
HR
Questo tag inserisce nella pagina una linea orizzontale. Le sue misure predefinite sono: size=2, width=100% e align=center. Con l‘attributo noshade non viene evidenziata l‘ombra.
"< HR >"
Questo tag inserisce nella pagina una linea orizzontale. Le sue misure predefinite sono: size=2, width=100% e align=center. Con l‘attributo noshade non viene evidenziata l‘ombra.
"< HR >"
HTML
Con questo Tag si inizia (<html>) e si finisce (</html>) tutta la pagina HTML. Anche se non è indispensabile l‘utilizzo, è buona norma usarlo.
Con questo Tag si inizia (<html>) e si finisce (</html>) tutta la pagina HTML. Anche se non è indispensabile l‘utilizzo, è buona norma usarlo.
I
Questo tag ha la funzione di rendere corsivo la parte di testo che ne è marcata.
Esempio: normale <i>corsivo</i> cioè corsivo
Questo tag ha la funzione di rendere corsivo la parte di testo che ne è marcata.
Esempio: normale <i>corsivo</i> cioè corsivo
IFRAME
Con questo tag abbiamo la possibilità di inserire un frame in un qualsiasi punto di una pagina html, definendone le misure con gli attributi width e height.
Tra <iframe> e </iframe> è possibile scrivere del testo o inserire altri elementi che verranno visualizzati ai browser che non supportano questo tag.
Esempio:
<iframe src="pagina.htm" width="200" height="400">Il tuo browser non supporta iFrame</iframe>
Con questo tag abbiamo la possibilità di inserire un frame in un qualsiasi punto di una pagina html, definendone le misure con gli attributi width e height.
Tra <iframe> e </iframe> è possibile scrivere del testo o inserire altri elementi che verranno visualizzati ai browser che non supportano questo tag.
Esempio:
<iframe src="pagina.htm" width="200" height="400">Il tuo browser non supporta iFrame</iframe>
IMG
Questo tag serve per aggiungere un‘immagine in una pagina web, ha diversi attributi:
- src
Indica il percorso fisico dell‘immagine sul web
- border
ha un valore numerico che indica lo spessore del bordo
- width
indica la larghezza dell‘immagine
- height
indica l‘altezza dell‘immagine
- alt
Indica il testo alternativo (viene visualizzato se l‘immagine nonrisultasse disponibile)
- hspace
indica la spaziatura orizzontale tra i margini dell‘immagine e quello che le sta accanto
- vspace
indica la spaziatura verticale tra i margini superiori dell‘immagine e quello che le sta sopra o sotto
Esempio:
<img border="0" src="http://www.herrel.altervista.org/immagini/sfondo.gif" width="50" height="100" alt="ecco l'immagine">
Questo tag serve per aggiungere un‘immagine in una pagina web, ha diversi attributi:
- src
Indica il percorso fisico dell‘immagine sul web
- border
ha un valore numerico che indica lo spessore del bordo
- width
indica la larghezza dell‘immagine
- height
indica l‘altezza dell‘immagine
- alt
Indica il testo alternativo (viene visualizzato se l‘immagine nonrisultasse disponibile)
- hspace
indica la spaziatura orizzontale tra i margini dell‘immagine e quello che le sta accanto
- vspace
indica la spaziatura verticale tra i margini superiori dell‘immagine e quello che le sta sopra o sotto
Esempio:
<img border="0" src="http://www.herrel.altervista.org/immagini/sfondo.gif" width="50" height="100" alt="ecco l'immagine">
INPUT
Questo tag viene usato per creare quasi tutti i controlli attivi in una pagina web. Serve ad inviare dati se racchiuso in un FORM, altrimenti può essere associato a controlli di tipo diverso.
L‘attributo "type" può assumere i valori sottoelencati:
- text
per creare in un campo un unica riga dove inserire del testo
- hidden
per creare dei dati non visibili dall‘utente il cui valore è determinato da variabili o valori predefiniti
- checkbox
per creare caselle da spuntare (generalmente ammette selezioni multiple)
- radio
tipo checkbox, con la differenza che se ce ne sono una serie con lo stesso nome, non è possibile selezionare più di una casella
- file
per creare un campo dove inserire un file
- image
per inserire un‘immagine al posto del tasto
- name
per assegnare un nome ad ogni controllo interattivo
- password
per creare in un campo un unica riga dove inserire del testo visualizzato con asterischi dall‘utente ma lettere leggibili dal server
- button
per creare pulsanti generici
- reset
per creare un tasto che annulla i campi selezionati
- submit
per creare del testo da inviare al server una volta selezionato
Questo tag viene usato per creare quasi tutti i controlli attivi in una pagina web. Serve ad inviare dati se racchiuso in un FORM, altrimenti può essere associato a controlli di tipo diverso.
L‘attributo "type" può assumere i valori sottoelencati:
- text
per creare in un campo un unica riga dove inserire del testo
- hidden
per creare dei dati non visibili dall‘utente il cui valore è determinato da variabili o valori predefiniti
- checkbox
per creare caselle da spuntare (generalmente ammette selezioni multiple)
- radio
tipo checkbox, con la differenza che se ce ne sono una serie con lo stesso nome, non è possibile selezionare più di una casella
- file
per creare un campo dove inserire un file
- image
per inserire un‘immagine al posto del tasto
- name
per assegnare un nome ad ogni controllo interattivo
- password
per creare in un campo un unica riga dove inserire del testo visualizzato con asterischi dall‘utente ma lettere leggibili dal server
- button
per creare pulsanti generici
- reset
per creare un tasto che annulla i campi selezionati
- submit
per creare del testo da inviare al server una volta selezionato
SELECT
Questo Tag è utilizzato per creare degli elenchi in cui scegliere una voce definita dal tag "option". I suoi attributi principali sono:
size = il suo valore numerico indica il numero di voci visibili nella finestra senza effettuare alcuno scrolling
multiple = se abilitato consente la scelta di più voci
Esempio:
Ti piace questo sito?<br>
<select size="1" name="scelta">
<option value="Sì" selected>Sì</option>
<option value="No">No</option>
</select>
Questo Tag è utilizzato per creare degli elenchi in cui scegliere una voce definita dal tag "option". I suoi attributi principali sono:
size = il suo valore numerico indica il numero di voci visibili nella finestra senza effettuare alcuno scrolling
multiple = se abilitato consente la scelta di più voci
Esempio:
Ti piace questo sito?<br>
<select size="1" name="scelta">
<option value="Sì" selected>Sì</option>
<option value="No">No</option>
</select>
SPAN
Il tag "span" definisce inizio e fine di un brano di testo.
(L'ho messo solo per dedicarlo al mio amico span :fagiano:)
Esempio:
<span>Ciao span come va?</span>
Il tag "span" definisce inizio e fine di un brano di testo.
(L'ho messo solo per dedicarlo al mio amico span :fagiano:)
Esempio:
<span>Ciao span come va?</span>
TABLE
Questo tag viene utilizzato per la creazione delle tabelle.
I valori di dimensione sono specificati attraverso "width" e "height" e sono indicate o in pixel o in percentuale.
Gli altri valori sono:
- border
E‘ un valore numerico che definisce lo spessore del bordo della tabella. "0" indica nessun bordo.
- bordercolor
Indica il colore del bordo
- cellpadding
spaziatura interna alle singole celle
- cellspacing
spaziatura tra le diverse celle
La suddivisione interna della tabella è effettuata con <tr></tr> (apre e chiude una riga) e <td></td> (apre e chiude una colonna)
Esempio:
<table border="1" cellpadding="1" cellspacing="1" bordercolor="#000000" width="100%">
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
Questo tag viene utilizzato per la creazione delle tabelle.
I valori di dimensione sono specificati attraverso "width" e "height" e sono indicate o in pixel o in percentuale.
Gli altri valori sono:
- border
E‘ un valore numerico che definisce lo spessore del bordo della tabella. "0" indica nessun bordo.
- bordercolor
Indica il colore del bordo
- cellpadding
spaziatura interna alle singole celle
- cellspacing
spaziatura tra le diverse celle
La suddivisione interna della tabella è effettuata con <tr></tr> (apre e chiude una riga) e <td></td> (apre e chiude una colonna)
Esempio:
<table border="1" cellpadding="1" cellspacing="1" bordercolor="#000000" width="100%">
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
TBODY
Con questo Tag è possibile organizzare le righe di una tabella in modo da fargli occupare meno spazio possibile in una pagina. I suoi attributi specifici sono:
align = per l‘allineamento orizzontale
char = per il carattere di riferimento da allineare
charoff = per il rientro di char
valign = per l‘allineamento verticale
Con questo Tag è possibile organizzare le righe di una tabella in modo da fargli occupare meno spazio possibile in una pagina. I suoi attributi specifici sono:
align = per l‘allineamento orizzontale
char = per il carattere di riferimento da allineare
charoff = per il rientro di char
valign = per l‘allineamento verticale
TD
Questo tag (da utilizzare tra <table> e </table>) definisce una cella all‘interno di una tabella. Con gli attributi rowspan o colspan è possibile creare delle celle su più righe e colonne.
Altri attributi sono:
- abbr = abbrevia il contenuto di una cella;
- nowrap = adatta il testo alle dimensioni di una cella;
- height = indica l‘altezza di una cella;
- width = indica la lunghezza di una cella .
Questo tag (da utilizzare tra <table> e </table>) definisce una cella all‘interno di una tabella. Con gli attributi rowspan o colspan è possibile creare delle celle su più righe e colonne.
Altri attributi sono:
- abbr = abbrevia il contenuto di una cella;
- nowrap = adatta il testo alle dimensioni di una cella;
- height = indica l‘altezza di una cella;
- width = indica la lunghezza di una cella .
TEXTAREA
Usato all‘interno di un Form crea un‘area interattiva dove si può inserire diverse righe di testo. Per definire la dimensione del campo sono usati gli attributi rows e cols. L‘attributo readonly confersice la proprietà di sola lettura.
Esempio:
<TEXTAREA name="commento" rows="10" cols="20"></TEXTAREA>
Usato all‘interno di un Form crea un‘area interattiva dove si può inserire diverse righe di testo. Per definire la dimensione del campo sono usati gli attributi rows e cols. L‘attributo readonly confersice la proprietà di sola lettura.
Esempio:
<TEXTAREA name="commento" rows="10" cols="20"></TEXTAREA>
TITLE
Questo tag è utilizzato in una pagina html per indicarne il titolo.
Esempio:
<title>Herrel - L'angolo del fagiano</title>
Questo tag è utilizzato in una pagina html per indicarne il titolo.
Esempio:
<title>Herrel - L'angolo del fagiano</title>