INFORMATICA HTML

HTML 🤔
capitolo 1: concetti base del web

Internet è una rete a livello mondiale che mette a disposizione materiale in pagine
ipertestuali.
Ciò che differenzia un ipertesto è la presenza di un link o di collegamenti ipertestuali.
Quando il cursore è su un link assume l’aspetto di una mano.
L’insieme delle pagine ipertestuali prende il nome di World Wide Web (www →
ragnatela estesa a livello mondiale).
Per fare in modo che tutti gli elaboratori possano passare i dati e leggerli nello stesso
modo sono stati concordati:
- un protocollo di trasferimento = HTTP (hyper text transfer protocol)
- un linguaggio di formattazione = HTML (hyper text markup language)
browser = programma nel computer che interpreta il linguaggio html per impaginare il
testo e predisporre i link.
Internet NON è l’insieme delle pagine web; internet è la rete di calcolatori che collega
elaboratori situati in ogni parte del mondo. Internet è una rete di reti, cioè, collega
fisicamente tra loro centinaia di reti locali di elaboratori
Quindi internet è l'insieme di computer, cavi e dispositivi fisici tutti connessi tra loro
Il World Wide Web è l’insieme delle pagine web.
capitolo 2: una prima pagina html

1. Come prima cosa dobbiamo salvare con nome una pagina web nel pc (per
Chrome basta fare: tasto destro + Salva con nome con .html) (per Internet
Explorer basta scegliere la voce salva con nome nel menu file)
2. Dopo di che basta aprire il documento con un editor testo qualunque
3. Pulire la pagina (deve essere vuota)
capitolo 3: elementi di base del linguaggio html
Le istruzioni HTML, i tag, sono sempre racchiusi tra parentesi angolari <>.
Quasi tutti i tag html sono a coppie: uno di apertura e uno di chiusura. Il tag di
chiusura è identico a quello di apertura ma preceduto da una barra retroversa/.
Il primo tag da scrivere è è l’istruzione <HTML>
esempio pagina web con solo testo:
<html>
Ciao a tutti! (testo o altri codici html)
</html>
Normalmente il resto del codice è diviso in due parti:

1. l’intestazione [ <HEAD> … </HEAD>]
2. il corpo [ <BODY> … </BODY>]
esempio
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Tra i titoli <TITLE> e </TITLE> si scrive il titolo da assegnare alla pagina Web
sarà quindi:
<html>
<head>
<title> saluti </title> → la parte “saluti” la si vede in altro non nella pagina
</head>
<body>
Ciao a tutti!
</body>
</html>
Tra i tag <BODY> </BODY> c’è il codice della pagina vera e propria (testo, immagini,
link…)
Per modificare il colore dello sfondo inserire all’interno del tag <BODY> </BODY>
“BGCOLOR” e il nome del colore
esempio: <BODY BGCOLOR = aliceblue>
I nomi dei colori sono scritti nella tabella a pagina 28 del libro.
esempio codice completo:
<html>
<head>
<title> saluti </title>
</head>
<body bgcolor = aliceblue>
Ciao a tutti!
</body>
</html>
Con l’istruzione BACKGROUND si può inserire un’immagine come sfondo

La sintassi è: <body background = percorso immagine + nome
immagine.estensione>
Il percorso immagine è la sequenza di cartelle che si devono aprire per raggiungere il

file desiderato. Il percorso si trova cliccando tasto destro + proprietà. Può essere copiato
e incollato nel codice.
L’estensione di un file è la parte del nome che indica il tipo di file: file testo (.docx, .txt)
o file grafico (.jpg, .gif, .bmp, .tiff)
Normalmente l'estensione non è visualizzata si può vedere andando su visualizza →
estensione nome file.
GIF → immagini che contengono altre immagini all’interno
Si può cambiare il colore del testo nella sezione BODY inserendo all’interno del tag
<BODY> l’attributo TEXT e il nome del colore
La sintassi è: <body text = “Nome colore”>
I colori sono gli stessi del bgcolor
TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN sono i 4 attributi per
definire la distanza (in pixel) del testo rispettivamente da: margine superiore, margine
inferiore, margine sinistro, margine destro
Alcuni esempi:
<body topmargin = “30”>
<body bottommargin = “30”>
<body rightmargin = “30”>
<body leftmargin = “30”>
capitolo 4: la formattazione del testo
Il tag <BR> (abbreviazione di break) specifica quando si deve andare a capo
esempio:
<body>
ciao <BR>
a <BR>
tutti
</body>
se devo andare a capo due volte metto due tag <BR>.
Se non specifico nulla il testo viene allineato a sinistra; con i tag <DIV ALIGN></DIV ALIGN> si
può scegliere come allineare tutto il testo preso tra questi tag: a sinistra (LEFT), al centro
(CENTER), a destra (right)
Ad esempio:
<DIV ALIGN=“CENTER”>
Se vuoi che nella pagina web appaiano con tipo di carattere, dimensioni, e colori diversi tra
loro, utilizza i tag <FONT></FONT>
FACE è il nome del carattere
<FONT FACE = Arial> ciao a tutti </FONT> → testo all’interno in Arial
COLOR è il nome del colore

<FONT COLOR = azure> ciao a tutti </FONT><BR>
<FONT COLOR = green> ciao a tutti </FONT><BR>
SIZE imposta la dimensione del carattere
<FONT SIZE=22> ciao a tutti </FONT><BR> → testo di dimensione 22
esempio
<FONT FACE=“arial” COLOR=”red” SIZE =”22”> ciao a tutti </FONT>
tag <B></B> → grassetto

tag <I></I> → corsivo
tag <U></U> → sottolineato
tag <STRIKE> </STRIKE> → testo barrato
altre formattazioni (non del tutto affidabili)
tag <EM></EM> → evidenziato
<STRONG> </STRONG> → molto evidenziato
<CITE> </CITE> →citazione
<CODE> </CODE> → codice
<SAMP> </SAMP> → esempio
<KBD> </KBD> → immissione da tastiera
<VAR> </VAR> → variabile
<DEN> </DEN> → definizione
<ADDRESS> </ADRESS> → indirizzo
<MARQUE> </MARQUE> → testo scorrevole (valido solo per Chrome ed Internet Explorer)
attributi:
BEHAVIOUR specifica come si sposta il testo. Ci sono 3 modi:
1. SCROLL: è l'impostazione tipica. Inizia lo spostamento e finisce ogni volta che il testo
sparisce dalla schermata.
2. SLIDE: permette lo scorrimento una sola volta prima di trasformarsi in testo fisso
3. ALTERNATE: una volta raggiunto il margine opposto questo rimbalza continuando lo
spostamento nel lato opposto.
DIRECTION: indica la direzione di scorrimento. Normalmente va da destra verso sinistra ma si
può cambiare con l’attributo RIGHT (<MARQUEE DIRECTION=RIGHT>)
HSPACE: indica lo spazio libero che rimane ai lati della scritta. Può essere ad esempio 200
pixel.
LOOP: specifica quante volte il testo scorre (senza l’attributo LOOP il testo scorre all’infinito).
Una volta eseguito il numero di cicli il testo automaticamente scompare.
WIDTH: indica lo spazio per lo scorrimento del testo (può essere in pixel o in percentuale della
lunghezza dello schermo.
<HR> → linea orizzontale (non c’è rispettivo tag di chiusura come per il <BR>)
ALIGN specifica se la barra deve stare a sinistra (LEFT) o a destra (RIGHT) o al centro
(CENTER).
COLOR è il colore della barra
SIZE è lo spessore della barra in pixel
NOSHADE: la barra appare senza l'ombreggiatura che normalmente ha di default.
<SUB></SUB> il testo tra questi due tag appare in pedice
<SUP></SUP> il testo tra questi due tag appare in apice
&nbsp → spazio prima dell’inizio delle parole (carattere speciale html)
vd tabella pagina 60
<P></P> → testo racchiuso in un paragrafo (questo tag ha come attributi: ALIGN, CENTER,
RIGHT, LEFT, JUSTIFY).
Con i tag <Hx></Hx> (dove x è un numero) si può scrivere un testo con 6 stili di paragrafo. il
più alto è H1, con gli altri livelli diminuisce il carattere e lo spazio tra un paragrafo e l’altro.
capitolo 5: immagini suoni e filmati
comando per inserire un’immagine:
<IMG SRC= posizione/nome.estensione>
Il tag <IMG> non deve essere chiuso
WIDTH e HEIGHT indicano la larghezza e l'altezza dell’immagine. L’espressione della
larghezza e dell’altezza è espressa in pixel.
ALIGN: specifica come si dispone il testo che segue una immagine; non indicando nulla
il testo si dispone sul fianco destro dell’immagine.
Per indicare l’allineamento tra testo e immagine si usano i parametri: LEFT, RIGHT,
TOP, MIDDLE, BOTTOM
comando per inserire un video:
< video di =“sampleMovie” src = “video.estensione” </video>
Ogni tipo di browser privilegia un particolare formato di video:

- H.264: formato molto popolare, supportato da internet explorer e Safari.
- OggTheora: standard aperto liberamente utilizzabile, supportato da Firefox,
Chrome e Opera.
- VP8 (o WebM): è nuovo ed è supportato da Chrome, Firefox e Opera.
Attributi:
CONTROLS: visualizza i comandi praticamente identici a quelli dell’audio (volume, play
e stop del video, spostamenti all’interno della traccia).
WIDTH/HEIGHT: larghezza e altezza del fotogramma video 📼
👁 alla legge sui diritti d’autore per scaricare e ricaricare immagini, video e audio.
Banche di immagini e file multimediali ad uso libero:
- WikiCommons
- EveryStockPhoto
- FreePhotosBank
- FreeImages
capitolo 6: gli elenchi puntati e numerati
Elenchi puntati e numerati: <LI>
▪️liste non numerate: <UL> </UL>
Per gli elenchi non numerati è possibile specificare il simbolo che precede la voce
della lista con l’attributo TYPE
- <UL TYPE = disc> (pallino piccolo nero)
- <UL TYPE = circle> (pallino grande vuoto)
- <UL TYPE = square> (pallino grande nero)
Ogni tag <LI> può avere vicino il tag <FONT>, ad esempio per indicare il colore della
scritta’
esempio:
<UL TYPE = circle>
<LI> <FONT COLOR = “blue”> informatica </font>
</UL>
▪️liste numerate: <OL> </OL> (ordered list)
Per default la numerazione la numerazione e di tipo 1, 2, 3, 4…
Con l’attributo TYPE posso cambiare il tipo di numerazione:
- TYPE= A (lettere maiuscole A,B,C,D)
- TYPE= a (lettere minuscole a,b,c,d)
- TYPE= I (numerazione romana maiuscola)
- TYPE= i (numerazione romana minuscola)
- TYPE= 1 (numero come da default 1,2,3,4)
Posso iniziare da una lettera che non è la prima. Dovendo iniziare dalla lettera “C” ed
essendo la terza lettera dell’alfabeto, si indica il numero “3”:
<OL TYPE=”a” START=”3”>
Per elenchi che ne contengono altri vedi pagina 93 e successive

Le liste di definizione sono individuate dal tag <dl>. Gli elementi sono formati da 2
parti:
- <dt> (definition term): indica il termine da definire
- <dd> (description term): e la definizione vera e propria del termine
Il<dt> viene in grassetto e a capo la definizione.
capitolo 7: i link
I link sono riconoscibili perché, di solito, sono sottolineati, hanno un colore differente
dal resto del testo e soprattutto sono cliccabili e permettono di saltare ad un’altra
pagina (quando ci passo sopra il cursore freccia diventa “manina”).
Un collegamento può essere diretto verso:
- ad un diverso punto della stessa pagina;
- ad un’altra pagina dello stesso sito;
- ad un altro sito;
- ad un indirizzo di posta elettronica.
Il tag che gestisce queste azioni è <A HREF> (hypertext reference)
Si chiude con </A>
esempio:
<A HREF = PaginaCollegata.htm>Clicca su questa scritta per andare alla
pagina collegata </A>
Questo è il caso più semplice: cliccando sulla scritta sottolineata si apre la pagina
collegata che si trova nella stessa cartella.
Per collegare una pagina che si trova in un’altra cartella la sintassi è:
<A HREF = poszione pagina\PaginaCollegata.estensione>Clicca su questa
scritta per andare alla pagina collegata </A>
Con posizione pagina è il percorso per individuare la cartella dove è memorizzata la

pagina web collegata.
esempio:
<A HREF = “C:\materiali\elenco_articoli.htm>Clicca su questa scritta
per andare alla pagina collegata </A>
Questo codice collega il link al file elenco_articoli che si trova nella cartella materiali nel
disco rigido.
Il collegamento può essere anche indirizzato a un qualsiasi file anche se non è una
pagina Web (anche suoni e filmati sebbene sia preferibile utilizzare le istruzioni viste in
precedenza). Basta specificare il nome del file, con la sua estensione, e il percorso dov'è
memorizzato. Ad esempio, il seguente codice collega Il file Richiesta_arretrati.doc,
preparato con il programma Word, che si trova nella cartella Arretrati nell'hard disk:
<A HREF - C: VArretrati\Richiesta arretrati.doc>Clicca su questa
scritta per 1l modulo di richiesta arretrati</A>
Come ultimo caso, si può collegare il link a pagine Web presenti in Internet. È
sufficiente specificare l'indirizzo Internet (URL) del sito. Vediamo un esempio pratico:
<A HREF-"http://how2edizioni.it/">Clicca su questa scritta per andare
al sito della casa editrice How2</A>
In questo caso il link collega la Home page della casa editrice How2.
Si può creare un link anche ad un punto preciso di una pagina come ad esempio una
parola, una frase, un’immagine. Per fare questo bisogna identificare il punto della
pagina con l’istruzione <A NAME>...</A>.
<A NAME> è un segnalibro che sarà poi possibile richiamare con l’istruzione <A HREF>
in questo modo si richiama non solo la pagina ma anche il punto preciso del segnalibro.
esempio:
Vogliamo inserire un segnalibro alla frase "Dati del destinatario" presente in una pagina
Web chiamata "Richiesta arretrati.htm"
Il codice è:
<A NAME = punto esatto>Dati del destinatario</A>
Questo segnalibro risulterà essere completamente trasparente alla pagina Web: non
vedrai nulla di diverso a video.
Adesso vogliamo creare un link in un'altra pagina Web (per semplicità presente nella
stessa cartella della pagina precedente) che richiami questo segnalibro.
Il codice in quest'altra pagina è:
<A HREF = Richiesta arretrati.htm#punto esatto› vai alla frase</A>
Separando con il simbolo # (pound o cancelletto) il nome del file dal nome che è stato
assegnato con l'attributo NAME al segnalibro, il link sposterà la visualizzazione nel punto
esatto in cui il segnalibro è stato posizionato.
Per inserire un segnalibro ad una immagine chiamata copertina.jpg, sempre presente
nella pagina Web chiamata Richiesta_arretrati.htm, il codice è:
<A NAME = punto esatto><IMG SRC"copertina.jpg"></A>
Riassumendo:
- Con il codice <A NAME = nome segnalibro> si crea un segnalibro in un punto
nel documento;
- Con il codice <A HREF - Nome pagina Web#nome assegnato al segnalibro>
si raggiunge quel punto.
Il tag <A HREF> può essere associato all'istruzione MAILTO per spedire un messaggio di
posta elettronica al destinatario specificato. Ad esempio il codice:
<A HREF - "MAILTO: servizioabbonati@How2.it">Scrivici</A>
Trasforma il testo Scrivici in un link che, quando è attivato, apre il programma
predefinito
di posta elettronica con un nuovo messaggio indirizzato a "servizioabbonati@How2.it".
Per inserire diversi indirizzi mail basta separarli con una virgola.
Per aggiungere il soggetto al nostro link MAILTO aggiungi, dopo l'indirizzo email, un
punto di domanda e, di seguito, il parametro Subject seguito da un uguale (=) e dal
contenuto del campo oggetto (La combinazione %20 indica uno spazio).
Puoi arricchire il link MAILTO con altri valori come:
cc: definisce il valore preimpostato per il campo copia carbone;
bcc: definisce il valore preimpostato per il campo copia carbone nascosta;
body: definisce il contenuto della mail;
Per inserire le varie opzioni nello stesso messaggio: dopo il destinatario principale scrivi
un punto interrogativo (?) e collega le altre parti con &. Naturalmente, puoi tralasciare
una o più opzioni. Non si devono lasciare spazi fra le varie parti. Quindi cc= deve essere
scritto tutto attaccato.
Ecco un link MAILTO completo:
<a href="mailto: info@How2.it?cc= ServizioClienti@How.itabcc=
ServizioAbbonati@How2.it&subject= Richie-
sta20informazioni&body= Buongior-
no, $20vorrei%20delle%20notizie">Scrivi a How2 </a>
Si può cambiare il colore del link all’interno della sezione <BODY>

<BODY LINK = “green”>
<BODY VLINK = “red”> → per i link già stati aperti almeno una volta.
<BODY ALINK = “gold”> → specifica il colore dei link attivi (i link quando sono
attivati diventano oro).
capitolo 8: le tabelle
Per inserire una tabella si usa il tag <TABLE> con il relativo tag di chiusura </TABLE>.
Attributi:
- BORDER: attribuisce un bordo che contorna tutte le celle, specificando un numero
ne specifico la grandezza.
esempio: <TABLE BORDER = “2”>
- BORDERCOLOR: specifico il colore del bordo (è dipendente dal tag BORDER)
esempio: <TABLE BORDER = “2” BORDERCOLOR = “red”>
- ALIGN:specifica l’allineamento della tabella nella pagina con possibilità di:
- CENTER
- LEFT
- RIGHT
esempio: <TABLE BORDER = “2” BORDERCOLOR = “red” ALIGN = center>
- WIDTH,HEIGHT: impostano larghezza e lunghezza della tabella nella pagina, i
valori vengono espressi in percentuale rispetto alla pagina.
esempio: <TABLE BORDER = “2” WIDTH = 50% HEIGHT = 50%>
- BGCOLOR, BACKGROUND: permettono di avere rispettivamente lo sfondo della
tabella a tinta unita o un'immagine.
esempio: <TABLE BORDER = “2” BGCOLOR = “fuchsia”>
- CELLSPACING: imposta uno spazio tra celle (misura in pixel)
- CELLPADDING: imposta uno spazio tra la cella e il testo.
- CAPTION: permette di inserire una didascalia alla tabella. Il testo va specificato
tra <CAPTION> e </CAPTION>. Se la tabella è allineata al centro anche la
didascalia verrà allineata al centro.
<TR> </TR> → segnalano l’inizio e la fine della tabella e vanno inseriti all’interno dei
tag <TABLE> </TABLE>.
<TD> </TD> → vanno inseriti all’interno dei tag <TR> </TR> e definiscono la cella vera
e propria della tabella.
All’interno dei tag <TR> e <TD> si può usare l’attributo BGCOLOR per avere un colore di
sfondo diverso tra le singole celle.
Se voglio avere un colore diverso per ogni riga inserisco BGCOLOR dopo<TR> </TR>,
mentre se lo voglio diverso per ogni singola cella lo inserisco all’interno del <TD> </TD>.
! Ricorda se no utilizzo l’attributo border la tabella non ha il bordo.
esempio:
«HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<table>
(tr>
(td>lunedi</td><td>visitaoculistica<td)
</tr>
<tr>
<td>martedi</td><td>corsodiHTML</td>
</tr>
<tr>
<ta›mercoledì anbsp</td><td›commercialista</td>
</tr>
</table>
</BODY>
</HTML>
Quindi si ottiene:
lunedì. visita oculistica
martedì. corso di HTML
mercoledì commercialista
<TR HEIGHT = 50> → per modificare l’altezza della riga (inserisco HEIGHT nel tag <TR>)
<TD HEIGHT = 50> → per modificare la larghezza della colonna (inserisco HEIGHT nel
tag <TD>)
Se si modifica la larghezza di una cella tutte le celle della colonna avranno la larghezza
specificata.
<TD ALIGN = “left”> → per allineare a sinistra il testo all’interno della cella
Per avere l’intera colonna allineata si deve impostare l’attributo ALIGN su ogni cella.
Allo stesso modo, con l'attributo VALIGN hai l'allineamento verticale delle celle. I valori
possibili sono TOP (alto), MIDDLE (in mezzo: è il valore di default), BOTTOM (in basso),
BASELINE (alla linea di base).
Ad esempio:
‹TABLE BORDER="1">
<TR HEIGHT ="50">
<TD VALIGN ="TOP">cella</TD><TD VALIGN “TOP”> cella </TD>
<TD VALIGN ="TOP"> cella </TD>
</TR>
<TR HEIGHT ="50'>
<TD VALIGN ="MIDDLE"> cella </TD> <TD VALIGN ="MIDDLE"> cella
</TD> <TD VALIGN ="MIDDLE"> cella</TD>
</TR>
</TR>
<TR HEIGHT ="50">
<TD VALIGN = "BOTTOM"> cella </TD><TD VALIGN ="BOTTOM"> cella </TD>
<TD VALIGN ="BOTTOM"> cella </TD>
</IR>
</TABLE>
Una cella è vuota se tra i tag di definizione di cella <TD> e </TD>

non si inserisce niente.
Con il tag <TH> puoi definire le celle che fanno da intestazione
dalla tabella: significa che il testo di queste celle sarà in neretto.
Necessita di essere racchiuso tra i tag <TR>.</TR>.
esempio:
<TABLE BORDER = "1" BORDERCOLOR= "RED”>
<TR><TH> questa è la prima cella di Intestazione </TH><TH> questa è la seconda cella
di intestazione </TH></TR>
<TR><TD>cella</TD><TD>cella</TD></TR>
<TR>(TD>Cella</TD><TD>cella</TD></TR>
</TABLE>
questa è la prima cella di Intestazione questa è la seconda cella di

intestazione
cella cella
cella cella
Gli attributi COLSPAN e ROWSPAN permettono di unire più celle di una stessa riga o di
una stessa colonna in una unica.
A questo scopo devi specificare il numero di celle della riga o della colonna da unire.
Vediamo qualche esempio.
Se vuoi una tabella che ha due righe con due celle ciascuna e una riga con due celle
unite,
usa questo codice:
<TABLE BORDER ="1">
<TR><TD›cella</TD><TD>cella</TD></TR>
<TR><TD>cella</TD><TD>Cella</TD></TR>
<TR><TD COLSPAN = 2>due celle unite</TD></TR>
</TABLE>
Se vuoi una tabella formata da due colonne con due celle e una colonna con due celle
unite, usa il codice:
<TABLE BORDER = "1">
<TR><TD>cella</TD><TD ROWSPAN = 2> due celle unite <TD> cella
</TD></TR>
<TR><TD>cella</TD><TD>cella</TD›</TR>
</TABLE>
capitolo 9: i frames
ciao

INFORMATICA HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

INFORMATICA HTML

Caricato da

Copyright:

Formati disponibili

HTML 🤔

capitolo 1: concetti base del web

capitolo 2: una prima pagina html

Normalmente il resto del codice è diviso in due parti:

Con l’istruzione BACKGROUND si può inserire un’immagine come sfondo

Il percorso immagine è la sequenza di cartelle che si devono aprire per raggiungere il

COLOR è il nome del colore

tag <B></B> → grassetto

Ogni tipo di browser privilegia un particolare formato di video:

Per elenchi che ne contengono altri vedi pagina 93 e successive

Con posizione pagina è il percorso per individuare la cartella dove è memorizzata la

Si può cambiare il colore del link all’interno della sezione <BODY>

Una cella è vuota se tra i tag di definizione di cella <TD> e </TD>

questa è la prima cella di Intestazione questa è la seconda cella di

Potrebbero piacerti anche