INDICE HTML
1.00 - TIPS & TRICKS
1.01 - I meta HTTP-EQUIV
1.02 - Tag <a>
1.03 - Tag <abbr>
1.04 - Tag <acronym>
1.05 - Tag <address>
1.06 - Tag <applet>
1.07 - Tag <area>
1.08 - Tag <article>
1.09 - Tag <div>
1.10 - Tag <font>
1.11 - Tag <table>
1.12 - Tag <span>
Guida di riferimento
1.00 - TTIPS & TRICKS
1) Distanziare il testo di una distanza dal margine sinistro
<div style="margin-left:34px">
2) Imporre il formato nonostante i CSS
Se vogliamo imporre il formato (colore, dimensione, etc) basta scrivere la stringa del font prima del tesot da formattare:
<a href='elenco0-9.asp'><font size='5' color='BLACK'>0-1</font></a>
1.01 - I meta HTTP-EQUIV
Http è il protocollo standard che viene utilizzato per la trasmissione delle informazioni e potremmo interpretarlo come un linguaggio
con il quale comunicano due computer.
Questo significa che quando ci si collega ad una pagina, il server Web riceve la richiesta del browser via http e genera a sua volta
una risposta http.
Il dato iniziale in questa risposta è chiamato HTTP header block cioè il blocco di intestazione dell'http.
L'intestazione dà informazioni utili sulla visualizzazione del documento.
I meta tags http-equiv integrano queste informazioni.
Vediamone alcuni:
1) tag per la descrizione del contenuto di una pagina:
<META HTTP-EQUIV="description" content="Correct IE cache use methods">
2) tag per l'indicizzazione della pagina in cui sono contenuti nei motori di ricerca:
<META HTTP-EQUIV="keywords" content="broswer cache caching management pragma no-cache">
3) tag per indicare l'autore:
<META HTTP-EQUIV="author" content="Riccardo Morosini">
4) tag per i copyright:
<META HTTP-EQUIV="copyright" content="© 2014-2017 Riccardo Morosini">
Ma i più interessanti sono i seguenti, utilizzati nell'HTTP header:
5) META Cache-Control. Il seguente meta tag impedisce, con efficacia non assoluta, la memorizzazione in cache della pagina:
<META HTTP-EQUIV="Cache-Control" content="no-cache">
6) META Expires. Esiste inoltre la possibilità di specificare il tempo di vita di una pagina in cache.
Nel meta tag seguente è indicato l'istante fino al quale il browser userà la versione della pagina in cache.
Ciò significa che il browser continuerà ad usare la versione in cache fino al raggiungimento della data indicata.
Se si specifica una data del passato, o '0', si ha il download immediato della pagina da server, cosicchè il contenuto della cache viene aggiornato.
Il formato delle date deve essere in Greenwich Mean Time (GMT), e non PST o EST, secondo quanto mostrato nell'esempio sotto.
<META HTTP-EQUIV="Expires" content="Tue, 20 Aug 2014 14:25:27 GMT">
La data rappresenta l'istante dopo cui il browser effettuerà il download dei contenuti della pagina web dal server anzichè dalla cache;
in ogni caso, se la data è anteriore a quella della pubblicazione della pagina, il download partirà istantaneamente.
In particolare, utilizzare questo META tag per aggiornare la cache immediatamente:
<META HTTP-EQUIV="Expires" content="0">
6) META Pragma. Esiste un'altro modo per controllare il caching del browser.
Per utilizzare questo tag, il valore deve essere impostato su "no-cache". Quando è inserito in un documento, esso previene la memorizzazioe
locale in cache da parte del browser:
<META HTTP-EQUIV="Pragma" content="no-cache">
META tag quali Cache-Control, Expires e Pragma possono essere usati insieme per mantenere corrente il contenuto di una pagina:
<META HTTP-EQUIV="Expires" content="Mon, 10 Sep 2001 00:00:00 GMT">
<META HTTP-EQUIV="Pragma" content="no-cache">
6) META Content-Type
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
dà informazioni sul tipo di caratteri che sono usati nel documento, e che corrispondono allo standard "iso-8859-1".
ISO/IEC 8859-1 è una codifica di caratteri standard appartenente alla famiglia ISO 8859, orientata principalmente alla rappresentazione
delle lingue dell'Europa occidentale (elencate sotto). Standardizzato nel 1998, costituisce la base degli insiemi di caratteri ad otto bit più
diffusi ed utilizzati, come il Windows-1252 e coincide con il primo blocco di caratteri dell'Unicode.
Ecco di seguito alcuni attributi di http- equiv:
Refresh Specifica il tempo in secondi dopo i quali il browser ricarica automaticamente il documento. Il seguente codice:
<META HTTP-EQUIV="Refresh" CONTENT =3>
indica che il documento sarà ricaricato ogni tre secondi.
Se si aggiunge l'URL completo di un altro documento, sarà esso ad essere ricaricato.
Ad esempio questo codice:
<META HTTP-EQUIV="Refresh" CONTENT="0;URL =http://www....">
reindirizza immediatamente l'utente. Quest'ultimo metodo è molto usato qualora un sito abbia cambiato il proprio URL.
Content-language (linguaggio usato nel contenuto della pagina)
Indica al motore di ricerca in quale lingua è scritto il sito. Il seguente codice:
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="Italian">
indica che il sito è scritto in italiano.
Page Permette di ottenere effetti in entrata o in uscita da una pagina (effetti di transizione)
Per ottenere un effetto in entrata usa il seguente codice:
<META HTTP-EQUIV="Page-Enter" content="revealTrans(Duration=x,Transition=y)">
Per ottenere un effetto in uscita usa il seguente codice:
<META HTTP-EQUIV="Page-Exit" content="revealTrans(Duration=x,Transition=y)">
Imposta la durata (Duration) in secondi. Transition rappresenta il tipo di animazione e si indica con un numero intero.
Le transizioni sono in tutto 25, e quindi i valori che possiamo dare ad y variano fra 0 e 24.
In effetti se si dà a y un valore superiore a 24, ad esempio 25, l'effetto di transizione c'è ugualmente, ma non è sempre lo stesso.
1.02 - Tag <a>
ATTRIBUTI: charset, coords, datafld, datasrc, download, href, hreflang, media, methods, name, ping, rel, rev, shape, target, type, urn
è usato per indicare o ancorare un particolare punto in un file HTML o per associare un collegamento ipertestuale alla porzione
di documento racchiusa tra il tag di apertura e quello di chiusura, che può essere del semplice teso o una immagine, oppure una sequenza
di elementi.
Vediamo alcuni esempi:
1.Collegamento ad un file esterno:
Link esterno
2.Creare un'immagine cliccabile:
3.Creare un link ad un'email:
Invia un'email a Riccardo Morosini
1.03 - Tag <abbr>
Il tag HTML consente agli autori di indicare chiaramente le occorrenze di abbreviazioni permettendo di fornire
informazioni aggiuntive sul significato dell’abbreviazione.
Ad esempio (se lasci il mouse sopra UK esce la scritta United Kingdom):
Tony Blair is the prime minister of the UK
1.04 - Tag <acronym> [OBSOLETO]
Un acronimo è simile ad un’abbreviazione, con l’unica differenza che esso può essere pronunciato come una parola (ES: NATO, CONI, RAM).
Il contenuto del tag ACRONYM specifica l’espressione abbreviata in sé così come normalmente appare nel testo e mostra un tooltip al passaggio
del mouse con la descrizione completa dello stesso. Ad es.:
Il WWW è solo uno dei componenti di Internet.
1.05 - Tag <address> non supp. in HTML5
è inteso per informazioni come un indirizzo, un numero di telefono etc .., all'interno del documento. Il testo incluso tra i tag viene
comunemente visualizzato usando un tipo di carattere corsivo. Un esempio:
You can contact author at www.somedomain.com.
If you see any bugs, please contact webmaster.
You may also want to visit us:
Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA
1.06 - Tag <applet> non supp. in HTML5
è usato per includere o avviare applicazioni Java nel codice HTML.
Il testo incluso tra i tag viene ignorato dai browser che possono visualizzare i contenuti in Java, mentre viene mostrato dai browser che non
riconoscono il tag e quindi lo ignorano.
1.07 - Tag <area>
definisce una zona all’interno di una mappa immagine (una mappa immagine è un’immagine con varie zone cliccabili)
Definizione delle coordinate mediante l'attributo Coords
Per le forme rettangolari questa è una lista di quattro valori separata da virgole partendo dalle coordinate "x" e "y"
del primo punto in alto a sinistra del rettangolo considerato e successivamente indicando le coordinate "x" e "y" dell'ultimo
punto in basso a destra del rettangolo considerato (es. coords = "0,0,50,50")
shape="rect" ->coords="Xaltosinistra, Yaltosinistra, Xbassodestra, Ybassodestra"
Per le forme circolari si tratta di un elenco di tre valori separato da virgole, nell'ordine vanno indicate le coordinate "x" e "y"
del centro del cerchio e successivamente la dimensione in pixel del raggio del cerchio che si intende definire (es. coords = "50,50,25")
shape="circ" ->coords="Xcentro,Ycentro,raggio"
Per le forme poligonali, questa è una lista contenente un numero pari di valori separata da virgole, specificando nell'ordine le
coordinate "x" e "y" di ogni punto della forma (es. coords = "0,0,25,25,50,25,50,100")
shape="poly" ->coords="X1, Y1, X2, Y2, ..., Xn, Yn"
1.08 - Tag <article>
l tag <article> rappresenta una sezione autonoma in un documento, pagina, applicazione o sito; infatti è potenzialmente
ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte o interamente in diverse pagine.
Esso può identificare il post di un forum, un articolo di una rivista o di un giornale, l’articolo di un blog, un commento, un widget interattivo,
o qualsiasi cosa che abbia un contenuto indipendente.
1.09 - Tag <div>
Div è uno tra i tag più utilizzati nella creazione di pagine Web, soprattutto nella creazione di layout, fornisce a tutti gli effetti un vero e proprio
elemento strutturale della pagina.
Una delle principali funzioni di un div (sta per divide) è proprio quello di suddividere gli spazi in zone, permettendoci di progettare il nostro sito
in modo semplice e dettagliato.
Facciamo subito un esempio: immaginando di dover costruire un sito pensiamo a come esso debba essere strutturato, tipicamente abbiamo
- un conteitore (container)
- una parte alta (header)
- un corpo centrale (middle)
- un menu (navigation)
- una parte bassa (footer)
- spesso anche un pannello laterale (sidebar)
Tutte queste porzioni possono essere rappresentate, nel nostro layout, grazie ad altrettanti div ai quali assegnaremo dei nomi grazie
all’attributo id.
1.10 - Tag <font>
Il tag in oggetto è font e supporta gli attributi face per la scelta del carattere, size per la definizione delle dimensioni del testo e color per la
definizione del colore.
face:
This attribute contains a comma-separated list of one or more font names.
The document text in the default style is rendered in the first font face that the client's browser supports.
If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.
size:
This attribute specifies the font size as either a numeric or relative value.
Numeric values range from 1 to 7 with 1 being the smallest and 3 the default.
It can be defined using a relative value, like +2 or -3, which set it relative to the value of the size attribute of the basefont element,
or relative to 3, the default value, if none does exist.
1.11 - Tag <table>
L'elemento HTML <table> rappresenta una Tabella.
Vediamo gli Attributi:
align:
Questo attributo indica come la tabella deve essere allineata rispetto al documento che la contiene. Può assumere uno dei seguenti valori:
• left, indica che la tabella deve essere mostrata sulla sinistra del documento;
• center, indica che la tabella deve essere mostrata al centro del documento;
• right, indica che la tabella seve essere mostrata sulla sinistra del documento.
bgcolor:
Questo attributo definisce il colore di sfondo della tabella e del suo contenuto. È un codice esadecimale di 6 cifre, come definito in sRGB
(A Standard Default Color Space for the Internet), preceduto da '#'. Ad es.: black = "#000000", red = "#FF0000"
Può anche essere usato uno dei sedici colori predefiniti.
PS: anche questo attributo è deprecato. Lo stile dell'elemento table dovrebbe essere definito usando il CSS.
Per ottenere un effetto simile all'attributo bgcolor, usare la proprietà CSS background-color.
border:
Questo attributo, il cui valore è un numero intero, definisce la dimensione in pixel dello spazio intorno alla tabella.
Se impostato a 0, implica che l'attributo frame abbia un valore nullo.
cellpadding:
Questo attributo definisce lo spazio tra il contenuto e il bordo, anche se non visibile, delle celle. Se è un valore in pixel, verrà applicato
a tutti e quattro i lati; se è un valore percentuale, il contenuto verrà centrato e lo spazio verticale (sopra e sotto) verrà rappresentato
da questa percentuale.
Lo stesso per lo spazio orizzontale (destra e sinistra).
PS: nei CSS usare la proprietà border-collapse con valore collapse applicata all'elemento table e la proprietà padding all'elemento td.
cellspacing:
Questo attributo definisce lo spazio, in percentuale o in pixel, tra due celle (sia in verticale che in orizzontale), trail bordo superiore della
tabella e le celle della prima riga, tra il bordo inferiore della tabella e l'ultima riga, tra il bordo sinistro della tabella e la prima colonna,
e tra il bordo destro della tabella e l'ultima colonna.
PS: nei CSS usare la proprietà border-spacing applicata all'elemento table.
frame:
Questo attributo definisce quale parte del frame che circonda la tabella deve essere mostrata. Può avere i seguenti valori:
above, below, hsides, vsides, lhs, rhs, border, box, void
PS: nei CSS usare la proprietà border-style e border-width
rules:
Questo attributo definisce come devono essere mostrate le linee nella tabella. Può assumere i seguenti valori:
• none, indica che non deve essere mostrata nessuna linea (il valore di default);
• groups, indica che le linee devono essere mostrate solo tra i gruppi di righe (definiti dagli elementi thead, tbody e tfoot)
e tra i gruppi di colonne (definiti dagli elementi col e colgroup);
• rows, indica che le linee devono essere mostrate tra le righe tr;
• columns, indica che le linee devono essere mostrate tra le colonne;
• all, indica che le linee devono essere mostrate sia tra le righe che le colonne.
PS: nei CSS usare la proprietà border sugli eleementi thead, tbody, tfoot, col o colgroup.
summary:
Questo attributo definisce un testo alternativo che descriva il contenuto della tabella nei brawser che non la possono mostrare.
Spesso viene usato per fornire le informazioni anche a presone non vedenti, che visualizzano il documento tramite sintetizzatori vocali.
Se tali informazioni possono essere utili per chiunque, considerare l'utilizzo dell'elemento caption.
L'elemento summary non è obbligatorio e può essere omesso se l'elemento caption ne copre il ruolo.
width:
Questo attributo definisce la larghezza della tabella. Può assumere un valore in pixel o in precentuale,
che rappresenta la larghezza in percentuale rispetto al suo contenitore.
PS: nei CSS usare la proprietà width
Vediamo un esempio abbastanza complesso (sotto il codice HTML): ESEMPIO
1.12 - Tag <span>
TESTO NERO CON SFONDO COLORATO DI GIALLO: <span STYLE="background: YELLOW">
TESTO BIANCO CON SFONDO COLORATO DI VERDE: <span STYLE="color: WHITE; background: GREEN">