Diapositiva 1
Download
Report
Transcript Diapositiva 1
HTML
HTML è l’acronimo di HyperText Markup Language(linguaggio
di marcatura ipertestuale), ovvero il linguaggio con il quale
vengono realizzate pagine web.
Un documento HTML non è altro che un file di testo, contenente
alcune parole chiave aventi la funzione di indicare al browser
le caratteristiche degli oggetti che lo compongono(dimensione
del testo, colore, immagini,ecc).
Si parla di linguaggio di marcatura, in quanto esso permette di
indicare come disporre gli elementi nella pagina. Tali
indicazioni vengono fornite attraverso appositi marcatori, detti
tag.
Contenuto di una pagina HTML
Il tag BODY
Il corpo di un documento racchiude le
informazioni che riguardano il contenuto del
documento HTML,:testo, immagini, colori,
grafici ecc…
La struttura di un documento HTML :
<html>
<head>
Tag di intestazione
</head>
<body >
tag del corpo della pagina
</body>
</html>
Attributi del tag body:
La sintassi è la seguente:
<BODY attributo
=”valore” attributo
=”valore” ecc…>
Attributi
RISULTATO
LEFTMARGI
N
Modifica il margine sinistro
TOPMARGIN
Modifica del margine superiore
TEXT
Scelta colore del testo di default
LINK
Scelta colore del link di default
BGCOLOR
Modifica colore di sfondo della
pagina
BACKGROUN Assegna un’immagine
D
sfondo
allo
I Margini
<HTML>
<HEAD> <TITLE> Esempio sui
margini</TITLE>
</HEAD>
<BODY BGCOLOR=green LEFTMARGIN=30
TOPMARGIN=0 TEXT=yellow>
Margini sinistro a 30 pixel e superiore a 0
</BODY>
</HTML>
Tag di formattazione del testo:
TAG
RISULTATO
<B>
Grassetto
<I>
Corsivo
<TT>
Monospaziatura in courier
<P>
Paragrafo
<BR>
Ritorno a capo
<DIV>
Consente di marcare una parte del documento e di
gestirne l’allineamento
<U>
Attiva il carattere sottolineato
<S>
Attiva la cancellatura visibile
<SUP>
Attiva il carattere apice
<SUB>
Attiva il carattere pedice
<MARQUEE>
Attiva l’animazione del testo
<PRE>
Conserva l’originale formattazione del testo.
Il paragrafo
<HTML>
<HEAD><TITLE> Esempio sui paragrafi</TITLE></HEAD>
<BODY BGCOLOR=red TEXT=black> Titolo della pagina
<P>Paragrafo primo</P>
<P ALIGN=left>Paragrafo allineato a sinistra</P>
<P ALIGN=right>Paragrafo allineto a destra</P>
<P ALIGN=center>Paragrafo centrato</P>
<P ALIGN=justify>Paragrafo giustificato:il testo viene allineato
sia a destra che a sinistra, il browser provvede ad inserire spazi
opportuni dove necessario per allineare
correttamente sia a destra che a sinistra</P>
</BODY>
</HTML>
Il paragrafo
Il tag <BLOCKQUOTE> permette di ottenere paragrafi indentati
<HTML>
<HEAD><TITLE> Esempio sui paragrafi</TITLE></HEAD>
<BODY BGCOLOR=red TEXT=black> Titolo della pagina
<P>Paragrafo primo</P>
<P ALIGN=justify>Paragrafo giustificato:
<BLOCKQUOTE>il testo viene allineato sia a destra che a sinistra.
<BLOCKQUOTE>Il browser provvede ad inserire spazi opportuni dove
necessario per allineare
correttamente sia a destra che a sinistra
</BLOCKQUOTE></BLOCKQUOTE>
</P>
</BODY>
</HTML>
Il paragrafo
Il tag <DIV> consente di marcare una parte del
documento per gestirne l’ allineamento. La
differenza con il tag <P> è che con <DIV> non
vengono inseriti spazi all’inizio e alla fine del
paragrafo marcato.
Il paragrafo
<HTML>
<HEAD><TITLE> Esempio sui paragrafi</TITLE></HEAD>
<BODY BGCOLOR=red TEXT=black> Titolo della pagina
<DIV>Paragrafo primo</DIV>
<DIV ALIGN=left>Paragrafo allineato a sinistra</DIV>
<DIV ALIGN=right>Paragrafo allineto a destra</DIV>
<DIV ALIGN=center>Paragrafo centrato</DIV>
<DIV ALIGN=justify>Paragrafo giustificato:il testo viene allineato sia a destra
che a sinistra, il browser provvede ad inserire spazi opportuni dove
necessario per allineare
correttamente sia a destra che a sinistra</DIV>
</BODY>
</HTML>
Il testo
Il carattere usato nella pagina
può essere modificato dal
tag <FONT>…</FONT>
Attributi
RISULTATO
FACE
Specifica il tipo di font
(Arial, Courier)
SIZE
Modifica dimensione del
carattere
COLOR
Modifica il colore del testo
marcato
Il testo
<HTML>
<HEAD><TITLE> Formattazione del testo</TITLE></HEAD>
<BODY BGCOLOR=red TEXT=black> Titolo della
pagina<BR>
<FONT FACE=arial SIZE=1 COLOR=yellow><B>testo in
neretto-dimensione 1</FONT></B><BR>
<FONT FACE=courier SIZE=2 COLOR=blue><U>testo
sottolineato-dimensione2 </FONT></U><BR>
<FONT FACE=comic sans SIZE=7
COLOR=white><marquee>www.google.it-dimensione
7</FONT></marquee><BR>
</BODY>
</HTML>
Intestazioni
Hanno il compito di evidenziare i titoli
all’interno all’ interno di un documento,
La sintassi è la seguente:
<Hn ALIGN=”posizione” WIDTH=”valore
lunghezza ” COLOR=”valore colore”
SIZE=”altezza” >
n può essere un numero compreso tra 1 e 6 che
ne definisce la dimensione
Intestazioni
<HTML>
<HEAD><TITLE> Esempio Intestazioni</TITLE></HEAD>
<BODY BGCOLOR=yellow TEXT=black> Titolo della pagina
<H1 ALIGN=center>titolo1</H1>
<H2 ALIGN=right>titolo2</H2>
<H3 ALIGN=left>titolo3</H3>
<H4 ALIGN=center>titolo4</H4>
<H5 ALIGN=right>titolo5</H5>
<H6 ALIGN=left>titolo6</H6>
</BODY>
</HTML>
Le immagini
I formati grafici supportati in una pagina web
sono:
GIF (supporta le animazioni e la trasparenza che
ha al massimo 256 colori)
JPEG (permette moltissimi colori ma non
supporta ne le animazioni ne la trasparenza)
PNG (sostituisce i precedenti)
Le immagini
Per caricare un’immagine:
<IMG SRC=”percorso sorgente” attributi>
Le immagini
Attributi
Risultato
BORDER
Spessore del bordo
WIDTH
Larghezza
HEIGTH
Lunghezza
ALIGN
Allineamento: LEFT,RIGHT,ABSBOTTOM(testo alla
base dell’immagine),ABSMIDDLE(immagine al
centro rispetto al testo), TEXTTOP,BOTTOM
(testo incorniciato),BASELINE,TOP(testo in alto)
ALT
Frase alternativa(commento nel caso in cui l’immagine
non venga caricata)
LOWSRC
Immagine precaricata(viene usato per caricare
un’immagine di anteprima che precede la foto
vera e propria)
Le immagini
<HTML>
<HEAD><TITLE> Esempio Immagini</TITLE></HEAD>
<BODY BGCOLOR=yellow TEXT=black> Immagini
<img src="C:\Documents and Settings\web\Desktop\Ninfee.jpg"
ALIGN=“left” WIDTH=100 HEIGHT=70 BORDER=7>
<P>immagine a sinistra rispetto al
testo</P><BR><BR><BR><BR><BR><BR><BR><BR>
<P ALIGN=“center”>immagine a destra rispetto al testo</P>
<img src="C:\Documents and Settings\web\Desktop\Ninfee.jpg"
ALIGN=“right” WIDTH=200 HEIGHT=200
BORDER=3></P>
</BODY>
</HTML>
Il tag <MARQUEE>
Viene utilizzato per l’ animazione di testo e
immagini.
Attibuti
Attributi
Risultato
BGCOLOR
Colore per lo spazio dietro il
messaggio
Indica la direzione in cui il testo
scorrevole si
sposta:right,left,up,down
Determina la velocità di ritardo
nello scorrimento
Determina la velocità di
scorrimento
Indica se il messaggio si sposta
scorrendo(scroll).scivolando(sli
de)o alternando(alternate)
Indica quante volte si deve
spostare il testo, per continuare
assegnare valore -1
DIRECTION
SCROLLDELAY
SCROLLAMOUNT
BEHAVIOR
Loop
<HTML>
<HEAD><TITLE> Esempio Immagine
scorrevole</TITLE></HEAD>
<BODY BGCOLOR=yellow
TEXT=black><MARQUEE BEHAVIOR=alternate
BGCOLOR=white>TESTO
SCORREVOLE</MARQUEE>
<MARQUEE LOOP=-1 BEHAVIOR=SLIDE
SCROLLDELAY=30>
<img src="C:\Documents and
Settings\web\Desktop\Ninfee.jpg" ALIGN=“left”
WIDTH=100 HEIGHT=70 BORDER=7></MARQUEE>
</BODY>
</HTML>
Gli elenchi numerati
Un elenco numerato è delimitato dal
tag di apertura <OL>, che sta per
lista ordinata, e dal tag di chiusura
</OL>. Ogni elemento della lista
deve essere preceduto dal tag <LI>
Elenchi
<HTML>
<HEAD><TITLE> Esempio elenchi</TITLE></HEAD>
<BODY BGCOLOR=pink TEXT=black> Elenchi
<OL>
<FONT FACE=Arial SIZE=5>
<LI>Primo
<LI>Secondo
<LI>Terzo
</FONT>
</OL>
</BODY>
</HTML>
Indicizzazione alfabetica maiuscola
<HTML>
<HEAD><TITLE> Esempio elenchi</TITLE></HEAD>
<BODY BGCOLOR=pink TEXT=black> Elenchi
<OL TYPE=A>
<FONT FACE=Arial SIZE=5>
<LI>Primo elemento
<LI>Secondo elemento
<LI>Terzo elemento
</FONT>
</OL>
</BODY>
</HTML>
Indicizzazione alfabetica minuscola
<HTML>
<HEAD><TITLE> Esempio elenchi</TITLE></HEAD>
<BODY BGCOLOR=aqua TEXT=black> Elenchi
<OL TYPE=a>
<FONT FACE=Arial SIZE=5>
<LI>Primo elemento
<LI>Secondo elemento
<LI>Terzo elemento
</FONT>
</OL>
</BODY>
</HTML>
Indicizzazione con numeri romani
maiuscoli e minuscoli
<HTML>
<HEAD><TITLE> Esempio elenchi</TITLE></HEAD>
<BODY BGCOLOR=aqua TEXT=black> Elenchi
<OL TYPE=I>
<FONT FACE=Arial SIZE=5>
<LI>Primo elemento
<LI>Secondo elemento
<LI>Terzo elemento
</FONT>
</OL>
<OL TYPE=i>
<FONT FACE=Arial SIZE=5>
<LI>Primo elemento
<LI>Secondo elemento
<LI>Terzo elemento
</FONT>
</OL>
</BODY>
</HTML>
Gli elenchi
E’ inoltre possibile, grazie all’ attributo VALUE, indicare da quale
numero fare iniziare l’ elenco.
<HTML>
<HEAD><TITLE> Esempio elenchi</TITLE></HEAD>
<BODY BGCOLOR=aqua TEXT=black> Elenchi
<OL>
<FONT FACE=Arial SIZE=5>
<LI VALUE=4>Quarto elemento
<LI>Quinto elemento
<LI VALUE=9> Nono elemento
</FONT>
</OL></BODY></HTML>
Gli elenchi
Gli attributi TYPE e VALUE possono essere
usati insieme, per esempio, per iniziare il
conteggio da cinque in lettere romane si scrive
il seguente codice
<HTML>
<HEAD><TITLE> Esempio elenchi</TITLE></HEAD>
<BODY BGCOLOR=aqua TEXT=black> Elenchi
<OL TYPE=I>
<FONT FACE=Arial SIZE=5>
<LI VALUE=5>Quinto elemento
<LI>Sesto
<LI > Settimo
</FONT>
</OL>
</BODY>
</HTML>
Elenchi non ordinati
Sono gli elenchi caratterizzati dal fatto che le
voci che li compongono risultano
caratterizzate tutte dallo stesso simbolo.
IL tag che li identifica è <UL>.
Il tag che rappresenta ogni singolo elemento è
sempre <LI>
Gli elenchi
<HTML>
<HEAD><TITLE> Esempio elenchi</TITLE></HEAD>
<BODY BGCOLOR=aqua TEXT=black> Elenchi
<UL>
<FONT FACE=Arial SIZE=5>
<LI >Primo elemento
<LI>Secondo elemento
<LI > Terzo elemento
</FONT>
</UL>
</BODY>
</HTML>
Gli elenchi
Per utilizzare altri simboli occorre utilizzare lo
attributo TYPE
<HTML>
<HEAD><TITLE> Esempio elenchi</TITLE></HEAD>
<BODY BGCOLOR=aqua TEXT=black> Elenchi
<UL>
<FONT FACE=Arial SIZE=5>
<LI >Primo elemento
<LI>Secondo elemento
<LI > Terzo elemento
</FONT>
</UL>
<UL TYPE=square>
<FONT FACE=Arial SIZE=5>
<LI >Primo elemento
<LI>Secondo elemento
<LI > Terzo elemento
</FONT>
</UL>
<UL TYPE=circle>
<FONT FACE=Arial SIZE=5>
<LI >Primo elemento
<LI>Secondo elemento
<LI > Terzo elemento
</FONT>
</UL></BODY></HTML>
Elenchi strutturati
Si tratta della combinazione di più elenchi
semplici.
Il tag da utilizzare è: <OL>
<HTML>
<HEAD><TITLE> Esempio ELENCHI
STRUTTURATI</TITLE></HEAD>
<BODY BGCOLOR=fuchsia TEXT=black> Elenchi
<OL>
<FONT FACE=Arial SIZE=5>
<LI>Italia
<OL TYPE=a>
<LI>Lombardia
<LI>Veneto
</OL>
<LI>Francia
<OL TYPE=a>
<LI>Loira
<LI>Provenza
</OL>
</FONT></OL></BODY></HTML>
Elenchi di definizione
Sono costituiti da coppie di elementi composte
da un termine e dalla sua definizione; i termini
da definire vengono visualizzati in genere in
grassetto, mentre la spiegazione è mostrata
nella riga sottostante, come paragrafo
indentato.
Tag di inizio lista <DL>
Tag per il termine da definire <DT>
Tag per la definizione del termine<DD>
<HTML>
<HEAD><TITLE> Elenchi di
definizione</TITLE></HEAD>
<BODY BGCOLOR=yellow TEXT=black><FONT
FACE=Arial SIZE=5> Elenchi di definizione
<DL>
<DT><B>Html</B><DD>Linguaggio per la
creazione di pagine web.
<DT><B>Html</B><DD>Linguaggio per la
creazione di pagine web.
</DL></FONT>
</BODY></HTML>
Le tabelle
Per disegnare una tabella in HTML è necessario
utilizzare tre marcatori:
<TABLE> elemento di inizio e fine tabella
<TR> elemento di inizio e fine riga
<TD> elemento di inizio e fine cella
(intestazione)
Le tabelle
<HTML>
<HEAD><TITLE> Esempio sulle tabelle</TITLE></HEAD>
<BODY BGCOLOR=aqua TEXT=black>
TABELLA
<TABLE>
<TR>
<TD> Lunedì</TD>
<TD>8.00-12.00</TD>
<TR>
<TD> Martedì</TD>
<TD>16.00-18.00</TD>
<TR>
<TD> Mercoledì</TD>
<TD>19.00-21.00</TD>
</TABLE></BODY></HTML>
Le tabelle
Per evidenziare l’intestazione di una tabella, si
usano i tag <TH> di apertura e </TH> di
chiusura al posto dei tag <TD> nella
definizione delle singole celle. Tali tag
applicano al contenuto della cella il grassetto e
l’ allineamento centrato
Le tabelle
<HTML>
<HEAD><TITLE> Tabelle con intestazione</TITLE></HEAD>
<BODY BGCOLOR=aqua TEXT=black><FONT FACE=Arial SIZE=5>
TABELLA CON INTESTAZIONE
<TABLE>
<TR>
<TH> Giorno</TH>
<TH>Ore</TH>
<TR>
<TD> Lunedì</TD>
<TD>16.00-18.00</TD>
<TR>
<TD> Martedì</TD>
<TD>19.00-21.00</TD>
</FONT>
</TABLE></BODY></HTML>
Le tabelle
La tabella può essere disposta all’interno della pagina
secondo diversi allineamenti che vengono definiti
dall’attributo ALIGN seguito da: left, right,center.
TABELLA CENTRATA:
<TABLE ALIGN=center>
TABELLA ALLINEATA A DESTRA
<TABLE ALIGN=right>
Titolo della tabella
Per assegnare un titolo a una tabella, è necessario
inserire subito dopo il tag <TABLE> il marcatore
<CAPTION> di inizio titolo e </CAPTION> di fine.
Utilizzando tale attributo , verrà aggiunto alla tabella
un titolo centrato sulla prima riga.
Per posizionare il titolo alla fine della tabella, occorre
specificare all’interno del tag <CAPTION> i valori
per l’attributo ALIGN(bottom, top).
Titolo della tabella
<HTML>
<HEAD><TITLE> Tabelle con intestazione</TITLE></HEAD>
<BODY BGCOLOR=aqua TEXT=black><FONT FACE=Arial SIZE=5>
TABELLA CON INTESTAZIONE<BR><BR><BR>
<TABLE><CAPTION> Orario settimanale</CAPTION>
<TR>
<TH> Giorno</TH>
<TH>Ore</TH>
<TR>
<TD> Lunedì</TD>
<TD>16.00-18.00</TD>
<TR>
<TD> Martedì</TD>
<TD>19.00-21.00</TD>
</FONT>
</TABLE></BODY></HTML>
La bordatura delle tabelle
Per rendere visibili i bordi delle tabelle è
necessario utilizzare l’ attributo BORDER del
tag <TABLE> specificandone la dimensione
nella forma BORDER=“valore”.
Per ottenere dei bordi visibili occorre usare un
valore maggiore o uguale a 1;più alto è il
valore, più spessi risultano i bordi.
Tabella con bordi
<HTML>
<HEAD><TITLE> Tabelle con bordi</TITLE></HEAD>
<BODY BGCOLOR=yellow TEXT=black><FONT FACE=Arial SIZE=5>
TABELLA CON BORDI<BR><BR><BR>
<TABLE BORDER=3><CAPTION> Orario settimanale</CAPTION>
<TR>
<TH> Giorno</TH>
<TH>Ore</TH>
<TR>
<TD> Lunedì</TD>
<TD>16.00-18.00</TD>
<TR>
<TD> Martedì</TD>
<TD>19.00-21.00</TD>
</FONT>
</TABLE></BODY></HTML>
Modifica del colore del bordo
E’ possibile modificare il colore del bordo della
tabella utilizzando i seguenti attributi del tag
<TABLE>: BORDERCOLOR(assegna un
colore a tutto il
bordo),BORDERCOLORDARK e
BORDERCOLORLIGHT(permettono di
attribuire un effetto tridimensionale alla
tabella).
<HTML>
<HEAD><TITLE> Tabelle con bordi</TITLE></HEAD>
<BODY BGCOLOR=white TEXT=black><FONT FACE=Arial SIZE=5>
TABELLA CON BORDI<BR><BR><BR>
<TABLE BORDERCOLORDARK=blue BORDERCOLORLIGHT=yellow
BORDER=12>
<CAPTION> Orario settimanale</CAPTION>
<TR>
<TH> Giorno</TH>
<TH>Ore</TH>
<TR>
<TD> Lunedì</TD>
<TD>16.00-18.00</TD>
<TR>
<TD> Martedì</TD>
<TD>19.00-21.00</TD>
</FONT>
</TABLE></BODY></HTML>
Dimensioni di una tabella
Se non diversamente specificato, le dimensioni
della tabella si adattano al contenuto presente
nelle celle.
Se si desidera definire larghezza altezza ben
precise, occorre usare gli attributi WIDHT per
la larghezza e HEIGHT per l’altezza nel tag
<TABLE>
<HTML>
<HEAD><TITLE> Tabelle con bordi</TITLE></HEAD>
<BODY BGCOLOR=white TEXT=black><FONT FACE=Arial SIZE=5>
TABELLA CON BORDI<BR><BR><BR>
<TABLE BORDERCOLORDARK=blue BORDERCOLORLIGHT=yellow
BORDER=12 WIDTH=200 HEIGHT=200>
<CAPTION> Orario settimanale</CAPTION>
<TR>
<TH> Giorno</TH>
<TH>Ore</TH>
<TR>
<TD> Lunedì</TD>
<TD>16.00-18.00</TD>
<TR>
<TD> Martedì</TD>
<TD>19.00-21.00</TD>
</FONT>
</TABLE></BODY></HTML>
La spaziatura
La spaziatura all’interno di una tabella può
essere sia quella tra le celle, definita all’interno
dell’ attributo CELLSPACING, sia quella tra il
bordo della cella e il suo contenuto,
modificabile mediante l’ attributo
CELLPADDING
<HTML>
<HEAD><TITLE> Tabelle con bordi</TITLE></HEAD>
<BODY BGCOLOR=white TEXT=black><FONT FACE=Arial SIZE=5>
TABELLA CON BORDI<BR><BR><BR>
<TABLE BORDER=1 CELLSPACING=50>
<TR>
<TH> Giorno</TH>
<TH>Ore</TH>
<TR>
<TABLE>
<TABLE BORDER=1 CELLPADDING=35>
<TR>
<TD> Lunedì</TD>
<TD>16.00-18.00</TD>
<TR>
<TD> Martedì</TD>
<TD>19.00-21.00</TD>
</FONT>
</TABLE></BODY></HTML>
Colori delle tabelle
HTML permette di modificare i colori di sfondo
dell’intera tabella,di una singola cella, oppure di
inserire un’ immagine di sfondo all’intera tabella o ad
una singola cella.
<TABLE BGCOLOR=“colore di sfondo”
BACKGROUND=“immagine di sfondo”>
<TD BGCOLOR=“colore sfondo cella”
BACKGROUND=“immagine sfondo cella”>
<HTML> <HEAD><TITLE> Tabelle con bordi</TITLE></HEAD>
<BODY BGCOLOR=white TEXT=black><FONT FACE=Arial SIZE=5>
TABELLA CON BORDI<BR><BR><BR>
<TABLE BORDER=1 BGCOLOR=AQUA>
<TR>
<TH> Giorno</TH>
<TH>Ore</TH>
<TR>
</TABLE><BR><BR>
<TABLE BORDER=1 BGCOLOR=pink>
<TR>
<TH BGCOLOR=yellow> Lunedì</TH>
<TH>16.00-18.00</TH>
<TR>
<TD> Martedì</TD>
<TD>19.00-21.00</TD>
</FONT>
</TABLE></BODY></HTML>
Allineamenti
Il contenuto di ogni singola cella può possedere
un allineamento diverso sia in orizzontale, sia
in verticale.
<HTML> <HEAD><TITLE> Tabelle con
bordi</TITLE></HEAD>
<BODY BGCOLOR=white TEXT=black>
<FONT FACE=Arial SIZE=5>TABELLA CON
BORDI<BR><BR><BR>
<TABLE BORDER=1 WIDTH=200>
<TR>
<TD ALIGN=left> Allineamento a sinistra
<TR>
<TD ALIGN=center> Allineamento al centro<TR>
<TD ALIGN=right> Allineamento a destra </FONT>
</TABLE></BODY></HTML>
Allineamento
Per modificare l’ allineamento verticale di una cella, si
utilizza l’ attributo VALIGN
<HTML> <HEAD><TITLE> Tabelle con bordi</TITLE></HEAD>
<BODY BGCOLOR=white TEXT=black>
<FONT FACE=Arial SIZE=5>TABELLA CON BORDI<BR><BR><BR>
<TABLE BORDER=1 HEIGHT=200>
<TR>
<TD VALIGN=top> Allineamento in alto<TR>
<TD VALIGN=middle> Allineamento al centro<TR>
<TD VALIGN=bottom> Allineamento in basso </FONT>
</TABLE></BODY></HTML>
Unione di celle
Per unire più celle orizzontalmente, è disponibile
l’attributo di cella COLSPAN.
L’unione delle righe consente invece di unire più
celle verticalmente mediante l’ attributo di
cella ROWSPAN
Unione di celle
<HTML> <HEAD><TITLE> Tabelle con bordi</TITLE></HEAD>
<BODY BGCOLOR=white TEXT=black>
<FONT FACE=Arial SIZE=5>TABELLA CON BORDI<BR><BR><BR>
<TABLE BORDER=1 WIDHT=200>
<TR>
<TD ALIGN=center COLSPAN=2>Alunno</TD>
<TD ALIGN=center ROWSPAN=2>Data di nascita</TD>
<TR>
<TD>Cognome</TD>
<TD>Nome</TD>
<TR>
<TD>Rossi</TD>
<TD>Mario</TD>
<TD ALIGN=center>14/07/1987</TD>
</FONT>
</TABLE></BODY></HTML>
Esercitazione
1)Crea una pagina con: i tuoi dati
anagrafici personali, il testo in
bianco (per il cognome e il nome
il testo deve essere scorrevole)
carattere Comic Sans, un margine
sinistro di 100 pixel, uno sfondo
verde chiaro .
2)Visualizza un’immagine con dei
bordi e centrata nello schermo,
scrivendone a fianco(sinistra) un
commento.
3) Crea una tabella che raffigura lo
schema visualizzato a destra.
IMMAGINE
Mi chiamo:
Abito:
Ho svolto stage
presso:
1.
Ditta A
2.
Ditta B
I miei amici :
Maria
Carla
Giulio
I miei sport
preferiti:
oTennis
oCalcio
Collegamenti ipertestuali
Attraverso i link è possibile dotare una
pagina di collegamenti ipertestuali. Lo
strumento che consente questo nuovo
modo di fruire dell’informazione è
l’hyperlink rappresentato dal tag <A>
che sta per ancor. Pertanto un link è un
richiamo ad un altro documento, ad una
parte dello stesso o più in generale a
qualsiasi elemento residente su interne e
descrivibile tramite URL.
I collegamenti ipertestuali
Link a risorse interne al sito
Il tag <A> possiede fra gli altri come
attributo HREF che sta per HyperText
Reference, il quale ha il compito di
definire la destinazione da richiamare
quando si fa click sul link:
<A HREF=”percorso/risorsa” > testo
cliccabile </A>
Per risorsa si intende una pagina HTML ma
anche un’immagine, un file video o
audio.
I collegamenti ipertestuali
Link a risorse esterne al sito
<A HREF=”http://www.google.it” > vai a google
italia </A>
Mediante l’attributo LINK è possibile definire un
colore di collegamento ipertestuale diverso da
quello predefinito (solitamente blu). Con
VLINK è possibile definire un colore per i
collegamenti già visitati (solitamente viola) :
<BODY LINK=”green” VLINK=”red”>
<A HREF=”percorso/risorsa” > testo cliccabile
</A>
I collegamenti ipertestuali
E’possibile il testo che forma il link con
un’immagine:
<A HREF=”http://www.google.it” > <IMG
SRC=”immagine.jpg”> </A>
I collegamenti ipertestuali
Link alla posta elettronica:
<A HREF=”mailto:[email protected]> scivetemi
</A>
Quando il visitatore fa click sul link si apre il
programma di e-mail predefinito con il campo
del destinatario già compilato.
I collegamenti ipertestuali
Le etichette nel documento
Per creare questo tipo di collegamento è necessario:
- inserire l’etichetta nel posto in cui si vuole saltare <A
NAME=”nome_etichetta”
- nel collegamento ipertestuale si deve inserire il nome
dell’etichetta da raggiungere preceduto da #:
<A HREF=”#etichetta”> testo di collegamento </A>