Ing. Daniele Corti Mod 1 - Liceo Scientifico Statale "Arturo Tosi"
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Mod 1
Ing. Daniele Corti
Copyright © Ing. Daniele Corti 2013
www.ingdanielecorti.it
Tutti i diritti sono riservati a norma di legge e a norma delle convenzioni internazionali.
Ver.1.0
http://www.w3schools.com/tags/
1
PREREQUISITI
Conoscenza di base di un editor di testo.
Conoscenza di base della logica per la risoluzione di problemi con un linguaggio di programmazione
ad alto livello.
OBIETTIVI
Riconoscere i differenti tag con i loro relativi attributi.
Realizzare pagine Web in HTML con contenuti testuali e multimediali.
ARGOMENTI
Ipertesto e ipermedia
Il Web
La storia del Web
Internet
Il browser
Definizione di HTML
Cos’è un file HTML
La Home Page
Il sito Web
I tag di base
La struttura di una pagina Web
Il tag HTML, HEAD e BODY
Struttura pagina HTML 5
Creare e modificare una pagina HTML
I contenuti della pagina Web
Tag per la gestione del testo
Tag per inserire le immagini
2
Collegamenti ipertestuali
Immagini cliccabili
La gestione delle tabelle
Il tag DIV – cenni
Altri tag
Caratteri speciali
Le mappe sensibili
I meta-tag
Fuori dai tag HEAD e BIDY: FRAME e FRAMESET
3
SPECCHIETTO TAG HTML http://www.w3schools.com
EDITOR ONLINE http://www.quackit.com/html/online-html-editor/
EDITOR OFFLINE NOTEPAD++
Con Blocco note salvare il file con estensione HTM o HTML (scritto in
minuscolo) assicurandosi di aver scelto la codifica UTF-8 presente nella
finestra "Salva con nome…".
PAGINE WEB - FILE HTML con estensione .htm oppure .html
SINTASSI TAG
STRUTTURA PAGINA WEB - HTML 5.0
index.html (pagina HTML con CSS e JS)
Titolo pagina visualizzato sulla barra
.mioStile{
Proprietà1: valore; Proprietà2: valore; …
}
elemento
elemento
4NB con style si richiama il CSS utile per applicare proprietà agli elementi
stile.css (foglio di stile esterno)
a{
text-decoration: none;
font-weight: bold;
color: #0000FF
}
a:hover{
color: #0080FF;
text-decoration: underline;
}
META TAG - DA INSERIRE IN HEAD
COMMENTI
< !- - Commento, anche su più righe - - >
ARCHIVIAZIONE FILE IN SOTTOCARTELLA immagini
Link ad un percorso relativo
L’immagine "pluto.jpg" è residente in una sottocartella rispetto alla pagina web.
Link a file immagine locale
L’immagine "pippo.jpg" è residente nella directory principale dell’unità "d".
LAYOUT
blocco coinvolto
5colore=#rrggbb | nomecolore
Con
#rrggbb = codice colore esadecimale
nomecolore = black | navy | blue | maroon | purple | green | red | teal |
fuchsia | olive | gray | lime | aqua | silver | yellow | white
GESTIONE CONTENUTI TESTUALI
CONTENITORI
paragrafo=unità base entro cui suddividere il testo
paragrafo/blocco coinvolto lasciando una riga vuota
prima e dopo
valore=left|center|right|justify
titolo/heading del blocco con dimensione n, in grassetto
con X intero compreso fra 1 (più grande) e 6 (più piccolo), lascia una riga vuota prima e dopo
blocco che va a capo ma non lascia una riga vuota
prima e dopo
(valore=left|center|right)
blocco coinvolto che non va a capo
NB div e span sono molto utilizzati per generare dei contenitori (BOX) rettangolari e generare quindi
un layout tabletless.
blocco centrato
blocco di testo/immagine scorrevole (disapprovato dal W3C) da
destra verso sinistra
STILI
blocco in grassetto (b=bold)
blocco in corsivo (i=italic)
blocco sottolineato (u=underline)
blocco apice (sup=superscript)
blocco pedice (sub=subscript)
blocco lampeggiante
blocco barrato oppure blocco barrato
(s=strikeout)
blocco preformattato (non necessita del alla fine della riga)
font monospazio in Courier (char a spaziatura fissa)
6STILI LOGICI
blocco rientrato/indentato
citazione, in genere in corsivo
blocco enfatizzato (in grassetto o corsivo)
blocco enfatizzato (grassetto o corsivo)
blocco con Font più grande
blocco con Font più grande
SEPARATORE
(break - interruzione di riga, manda a capo senza aggiungere una nuova riga subito dopo l’invio a
capo, non ha tag di chiusura)
(Non-Breaking SPace - interruzione di riga, manda a capo senza aggiungere una nuova riga)
(horizontal row - linea orizzontale)
alignValore=left|center|right
FORMATTAZIONE CARATTERE
blocco di testo coinvolto
(d=valore_assoluto compreso fra 1 (più piccolo) e 7 (più grande), valore_relativo +/-valore)
NB Il tag font è incompatibile con HTML5 e quindi occorre utilizzare il comando style della sintassi
CSS (fogli di stile), per esempio:
blocco di testo coinvolto
(font-size: dimensione in pixel; color: codiceColore)
LISTA PUNTATA (valore=disc | circe | square)
primo elemento
secondo elemento
…………
n-esimo elemento
7LISTA NUMERATA (valore=1 | a | A | i | I)
primo elemento
secondo elemento
…………
n-esimo elemento
TABELLE
titolo/didascalia tabella
intestazione_colonna_1
intestazione_colonna_2
cella 1.1 cella 1.2
cella 2.1 cella 2.2
border larghezza dei bordi di una tabella (in pixel)
cellspacing distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo
cellpadding distanza tra il contenuto della cella e il bordo (in pixel o %)
Di solito la larghezza e l’altezza globali della tabella sono espresse nel tag , mentre la
larghezza delle varie celle viene espressa nei della prima riga. L’altezza in percentuale non
sempre è visualizzata correttamente da tutti i browser.
8GESTIONE CONTENUTI MULTIMEDIALI: IMMAGINI
nomeImmagine.formato
FORMATI IMMAGINI PER IL WEB
GIF: adatto a loghi, bottoni e banner, e possono essere immagini animate, quindi in movimento
JPG: adatto alle foto, dato che si tratta di un formato ad alta risoluzione
PNG: molto portabile su tutte le piattaforme e meglio trattabile attraverso software di grafica
RIDURRE LE DIMENSIONI DELLE IMMAGINI PER IL WEB
72dpi con 600/800px nella dim più lunga
web resizer: http://webresizer.com/
CODICE COLORI EXADECIMALE
http://digilander.libero.it/oldbat/toolgeneratorecodicicolore.html
http://codicicolori.com/
COLORI PER ALCUNI ELEMENTI (testo, bordi, sfondo tabelle, etc)
black | navy | blue | maroon | purple | green | red | teal | fuchsia |
olive | gray | lime | aqua | silver | yellow | white
COLORE DI SFONDO (PER ESEMPIO DI UNA TABELLA)
IMMAGINE DI SFONDO (PER ESEMPIO DI UNA TABELLA)
COLORE (E DIMENSIONE) TESTO
testo rosso
NB Si veda la seguente alternative con I CSS
DIMENSIONE TESTO, COLORE TESTO E COLORE SFONDO TESTO
Testo
9ES: valutare le differenze fra le seguenti due evidenziazioni applicate ad elementi racchiusi tra il tag
p e il tag SPAN:
Prova_Testo
Prova_Testo
IMMAGINI
valore = left | right | top | middle | bottom
num = valore espresso in pixel
(hspace="n", con n dimensione in pixel dello spazio vuoto in orizzontale intorno all’immagine)
(vspace="n", con n dimensione in pixel dello spazio vuoto in verticale intorno all’immagine)
STILE, COLORE E DIMENSIONE BORDI DI UN’IMMAGINE
NB http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=double
LINK
Testo che serve da link
valore =_blank | _self | _parent | _top
accesskey scorciatoia da tastiera = ALT+h+INVIO
ES
10(alt+shift+g in Firefox)
LINK AD UN IMMAGINE
Testo che serve da link
LINK A EMAIL
indirizzo visualizzato
IMMAGINI LINKABILI
Testo_ che serve_da_link
ES
LINK INTERNI - ANCORE
Per collegarsi ad un’ancora presente in un altro documento:
Testo_utilizzato_come_link
per collegarsi ad un’ancora presente nel documento stesso:
Testo_utilizzato_come_link
Etichetta:
Testo_visualizzato_utilizzato_come_ancora
DIMENSIONI RELATIVE E ASSOLUTE (width, height)
ALLINEAMENTI align=left|right|justify, valign=top|bottom|middle
LINK IN CSS
11GESTIONE CONTENUTI MULTIMEDIALI: VIDEO E AUDIO
VIDEO
Your browser does not support the video tag.
ES
Your browser does not support the video tag.
Video su: https://www.youtube.com/watch?v=oObxNDYyZPs
12AUDIO
Your browser does not support the audio element.
controls: Visualizza di controlli standard di HTML5 per l'audio su pagina web.
autoplay: Rende automatica la riproduzione dell'audio.
loop: Rende automatica la ripetizione (ciclo) dell'audio.
L'attributo preload è utilizzato nell'elemento video/audio per bufferizzare file di grandi dimensioni:
"none" non bufferizza il file
"auto" bufferizza il media
"metadata" bufferizza solo i metadati del file
Possono essere specificati più file sorgenti utilizzando l'elemento al fine di fornire
codifiche audio e video differenti per differenti browser.
ALTERNATIVE
bgsound (solo per file wav,
mid, e au)
bgsound (anche mp3)
bgsound
video
(supportato solo da IE)
video (video supportati: wmv, avi, mpg)
13IPERTESTO E IPERMEDIA
Un normale testo viene letto in maniera sequenziale. Nel momento in cui non conosciamo il
significato di una parola siamo costretti a interrompere la normale lettura per fare una ricerca.
Un ipertesto invece può essere letto in modo non lineare: possiamo scegliere gli argomenti che più ci
interessano e saltare quelli che già conosciamo. Inoltre, e soprattutto, alcune parole del testo possono
essere collegate ad altre parti di esso. Cliccando su queste parole "attive", possiamo visualizzare le
parti del testo collegate.
Questi collegamenti, chiamati "link", contraddistinguono un ipertesto.
Testo tradizionale
Un testo tradizionale (libro, film) prevede una modalità di consultazione abbastanza rigida: per poter
essere compreso, un testo deve essere ricevuto e decodificato in modo lineare, sequenziale.
Ipertesto
insieme di documenti messi in relazione tra loro tramite parole chiave,
la lettura può svolgersi in maniera non lineare.
Definizione di ipertesto
Modello testuale in cui le diverse unità di contenuti non sono articolate secondo un ordine lineare
prestabilito, ma secondo una struttura a “ragnatela”.
Diversamente da un testo tradizione, l’ipertesto non prevede un percorso fisso di consultazione o
navigazione: è il lettore a scegliere il proprio percorso in base ai propri interessi e obiettivi. Ciascun
lettore può liberamente decidere di volta in volta l’ordine con cui seguire i possibili collegamenti
impostati dall’autore dell’ipertesto.
Ipertesto informatico
le parole chiave in esso contenute appaiono marcate (sottolineate oppure evidenziate, etc.) in
maniera da renderle riconoscibili,
l’azione del clic con il mouse su una parola chiave ha come conseguenza l’apertura di un altro
documento. Quindi le parole chiave funzionano come collegamenti ipertestuali (hyperlink in
inglese).
14Ipermedia
Un’ipermedia è un’estensione dell’ipertesto: a una parola potrebbe essere collegato qualcosa di
diverso da un testo: un’immagine, un filmato, una musica.
Gli strumenti indispensabili per costruire e visualizzare una pagina HTML sono:
un browser, cioè un programma che consente di visualizzare le pagine web di Internet, ad
esempio Netscape o Internet Explorer;
un programma di grafica, che consente di creare e modificare immagini, soprattutto del tipo
GIF e JPG. Buoni programmi, facili da usare, sono Gimp e Paint Shop Pro, o programmi
professionali come Photoshop e Corel Draw;
un editor di testi. Ve ne sono alcuni molto semplici, normalmente forniti insieme al sistema
operativo, altri molto sofisticati. Nel DOS trovate EDIT, in Windows NOTEPAD. Si possono
usare anche l’editor di Turbo Pascal o un Word Processor come Word, con l’accortezza di
salvare il file in formato ASCII.
Se si dispone di un sistema operativo multitasking (che permette l’esecuzione contemporanea di più
programmi), un buon metodo consiste nell’aprire contemporaneamente due finestre: una con l’editor
in cui si compone l’ipertesto, l’altra con il browser in cui si visualizza l’ipertesto.
La struttura di un ipertesto
15IL WEB – L’INSIEME DEGLI IPERTESTI
Web, o World Wide Web (WWW), la Grande Ragnatela Mondiale, è l’insieme degli ipertesti, che
consentono di fornire dei servizi (detti servizi Internet) consistente nella possibilità di navigare ed
usufruire di un insieme vastissimo di contenuti multimediali e di ulteriori servizi accessibili a tutti o
ad una parte selezionata degli utenti di Internet (utenti con le necessarie credenziali). Le caratteristiche
più importante del Web sono:
i contenuti del Web sono tra loro collegati (formando un ipertesto, tramite i cosiddetti link,
collegamenti),
i suoi servizi possono essere resi disponibili dagli stessi utenti di Internet.
Per quanto riguarda i contenuti quindi, essendo Internet una rete di computer ad accesso pubblico, il
Web possiede la straordinaria peculiarità di offrire a chiunque la possibilità di diventare editore e,
con una spesa estremamente esigua, di raggiungere un pubblico potenzialmente vastissimo distribuito
in tutto il mondo.
1617
18
LA STORIA DEL WEB
Internet non è il Web. L’infrastruttura fisica della rete Internet è nata durante il periodo della guerra
fredda, all’inizio degli anni ‘60, prima come rete militare e poi come risorsa accademica; la
navigazione in Internet attraverso la consultazione della pagine Web è avvenuta molto dopo, negli
anni ‘90. Il Web, la ragnatela di pagine ipertestuali fra loro connesse, è nata nel 1991 presso il centro
di ricerca CERN di Ginevra ad opera del ricercatore e informatico britannico Tim Berners Lee
(Londra, 8 giugno 1955) in collaborazione con Robert Caillau, informatico belga. Oggi le loro idee,
sebbene il Web è in continua evoluzione, sono alla base dello standard (W3C, World Wide Web
Consortium).
Figura 1 - Tim Berners Lee
Il primo sito Web della storia (info.cern.ch) è stato messo online il 6 agosto 1991: nasce così il WWW
(World Wide Web o semplicemente Web) e, la prima pagina Web visualizzava il seguente messaggio:
Tale pagina era ospitata da un server che aveva le seguenti caratteristiche:
Processore da 25 MHz.
8 MB di memoria RAM.
256 MB di Hard Disk.
Inizialmente il Web era utilizzato solo dalla comunità scientifica, ma il 30 aprile 1993 il CERN decide
di rendere pubblica la tecnologia alla base del Web. A tale decisione fa seguito un immediato e ampio
successo del Web in virtù della possibilità offerta a chiunque di diventare editore, della sua efficienza
e, non ultima, della sua semplicità. Con il successo del Web ha inizio la crescita esponenziale e
inarrestabile di Internet ancora oggi in atto, nonché la cosiddetta "era del Web".
19INTERNET
Internet (dal latino inter, "tra" e dall’inglese net, "rete", tra la rete) è una rete di computer mondiale
ad accesso pubblico attualmente rappresentante il principale mezzo di comunicazione di massa.
Chiunque infatti disponga di un computer e degli opportuni software, appoggiandosi a un Internet
Service Provider, che gli fornisce un accesso a Internet attraverso una linea di telecomunicazione
dedicata (ADSL, HDSL, VDSL, GPRS, HSDPA, ecc.) o una linea telefonica della Rete Telefonica
Generale (POTS, ISDN, GSM, UMTS, ecc.), può accedere a Internet ed utilizzare i suoi servizi. Ciò
è reso possibile da una suite di protocolli di rete chiamata "TCP/IP" dal nome dei due principali, il
TCP e l’IP, la "lingua" comune con cui i computer di Internet si interconnettono e comunicano tra
loro indipendentemente dalla loro architettura hardware e software.
IL BROWSER
Il browser è il software Client per la visualizzazione delle pagine Web; esso ha il compito di
interpretare il codice HTML visualizzandone i contenuti (testuali e multimediali).
Quando un utente si collega alla rete non visualizza pagine piene di codice incomprensibile, ma testi
chiari, immagini, video, link (letteralmente collegamento), animazioni e, in sostanza il contenuto di
una pagina. È grazie al browser (letteralmente sfogliatore), installato sul computer client, che
l’utente riesce a vedere in chiaro le pagine. Il browser, quindi, è un programma che interpreta il codice
della pagina e lo traduce in modo che i contenuti siano comprensibili all’utente.
L’utente in questo modo può visualizzare le pagine e navigare tra esse, in modo non necessariamente
sequenziale, ma saltando da una pagina all’altra, anche di siti diversi, in modo ipertestuale attraverso
i link.
Per visualizzare una pagina occorre scrivere l’URL nella barra degli indirizzi del browser. L’URL
(Uniform Resource Locator, allocatore universale di risorsa) è l’indirizzo della pagina Web da
visualizzare.
Un URL è una sequenza di caratteri che identifica univocamente una risorsa della rete Internet:
http://percorsoRisorsa
Per esempio un sito Web:
http://atosi.it
Gli elementi che formano l’URL sono:
20 http://
Definisce il protocollo da usare per l’accesso al server Web, il computer su cui risiede il sito
Web. Altri protocolli sono https (http secure, sicuro), ftp (File Transfer Protocol, protocollo
per il trasferimento di file). Se non viene inserito nella barra degli indirizzi, il protocollo
predefinito (di default) è quello http.
www
Indica il servizio Internet World Wide Web comunemente indicato in modo abbreviato con
Web, cioè la consultazione ipertestuale delle pagine.
atosi.it
Rappresenta il Nome di Dominio del server, cioè il nome che identifica univocamente nella
rete il server sul quale è ospitato il sito Web.
Per indicare un server Internet si può utilizzare in alternativa un indirizzo numerico, chiamato
indirizzo IP (Internet Protocol), formato da una sequenza di quattro numeri separati da un punto, per
esempio:
100.104.1.128
Ogni numero può assumere un valore tra 0 e 255.
Scrivere, quindi, nella barra degli indirizzi il nome di dominio o il corrispondente indirizzo IP
produrrà lo stesso effetto, verrà visualizzata la pagina Web desiderata.
Per esempio l’indirizzo IP (statico) associato a Google.it è:
http://173.194.35.24/
ESERCIZIO 1
Provate a individuare qual è l’indirizzo IP della macchina sulla quale state lavorando.
Dal Prompt dei Comandi digitale CMD e poi premete Invio. Digitate il comando:
ipconfig /all
Dopo aver premuto Invio verranno visualizzati alcuni parametri sulla connessione di reti, in
particolare:
Fra i vari parametri, potete osservare l’indirizzo IPv4 della vostra macchina, che nel caso d’esempio
è 10.0.0.66.
21I nomi di dominio sono più facili da ricordare rispetto agli indirizzi IP.
La corrispondenza tra nomi di dominio e indirizzi IP è stabilita dalle tabelle di mappatura che
risiedono nei principali server di Internet secondo un sistema denominato DNS (Domain Name
System, sistema dei nomi a dominio).
L’indirizzo IP è l’indirizzo fisico di una risorsa Internet: a qualsiasi dispositivo collegato alla rete ne
viene assegnato uno, che può essere fisso (indirizzo IP statico) o cambiare ad ogni nuova
riconnessione alla rete (indirizzo IP dinamico). Esso identifica in modo univoco ogni nodo della rete
Internet.
In particolare il nome di dominio si divide in due parti:
atosi il nome del dominio di secondo livello;
it il nome del dominio di primo livello (TLD, Top Level Domain).
Il suffisso .it indica la nazione Italia e può essere utilizzato sia da privati che da aziende , enti e
organizzatori; altri suffissi per le nazioni sono .uk per la Gran Bretagna, .de per la Germania, etc.
I domini miosito.it e miosito.com non sono lo stesso sito Web, a meno che una persona non abbia
acquistato entrambi i nomi di dominio facendoli convergere sullo stesso sito.
Di solito i domini di primo livello .com sono richiesti nel settore commercio aziendale, mentre quelli
.org sono destinati ad associazioni e enti. Sono molto frequenti anche domini .net (network), .biz
(business), .info (informazioni e news), .name (siti Web personali), .gov (riservato a siti istituzionali
governativi americani e recentemente anche per la pubblica amministrazione in Italia).
ESERCIZIO 2
Provate ad individuare l’indirizzo IP del server di Google.
Dal Prompt dei Comandi digitale CMD e poi premete Invio. Digitate il comando:
ping www.google.it
Dopo aver premuto Invio verranno visualizzati alcuni parametri statistici, come quelli rappresentati
in questa immagine:
Fra le varie informazioni trovate anche l’indirizzo IP di Google: 173.194.35.24.
22Se ci sono problemi di connessione e il server di Google è irraggiungibile potete utilizzare al Prompt
dei Comandi l’istruzione
tracert www.google.it
per individuare il punto in cui la connessione è interrotta. Tracert è un comando che analizza la
raggiungibilità di ogni nodo della rete attraversato per raggiungere la destinazione.
DEFINIZIONE DI HTML
L’HTML è il linguaggio standard utilizzato per la realizzazione delle pagine Web, apribili con i
browser (ad esempio Internet Explorer, Google Chrome, Mozilla Firefox, etc.). In realtà, per
realizzare un sito Web si utilizzano anche altri linguaggi che ne estendono le potenzialità, per esempio
JavaScript, PhP, JSP, ASP.
HTML è l’acronimo di Hyper Text Markup Language (linguaggio marcatore degli ipertesti).
L’ipertesto è semplicemente un testo che funziona come un link.
Markup Language è una maniera di scrivere informazioni sul layout dei documenti.
In pratica un documento in HTML è soltanto un file che contiene solamente testo e nient’altro.
Quando un browser apre un file HTML, sarà lo stesso browser a cercare codici HTML nel testo e ad
usarli per modificare il layout, inserire immagini, o creare link per altre pagine.
Le pagine Web, essendo dei semplici file di testo, possono essere scritte e modificate con un qualsiasi
programma di editing testuale (text editor), come per esempio NOTEPAD o il Blocco Note.
Molti, però, preferiscono usare uno degli editor HTML visuali che consentono di mettere in evidenza
il risultato visivo piuttosto che i codici - un cosiddetto WYSIWYG ("What You See Is What You
Get").
23COS’È UN FILE HTML
Il file "html" (semplicemente "htm" per quelli che operano su un PC MS-DOS, nel quale non sono
ammesse estensioni di file di quattro lettere), sono dei semplici FILE DI TESTO (cioè contenenti solo
caratteri ASCII) che, per questo motivo sono facili da gestire, nel senso della trasmissione telematica.
Essi però differiscono da testi destinati ad essere semplicemente letti, perché contengono delle
ISTRUZIONI PROGRAMMATICHE, inframezzate al testo che dovrà essere realmente letto, scritte
secondo un linguaggio che è, appunto, l’HTML.
Il browser con cui il navigatore esplora il WWW (FireFox, Crhome, Mosaic, Netscape, Internet
Explorer, etc.) è in grado di interpretare le istruzioni presenti nel file html e per trasformarle nelle
caratteristiche grafiche (caratteri, colori, impaginazioni, immagini, link, etc.) di ciò che appare sullo
schermo. Pertanto redigere un file html è un piccolo lavoro di programmazione.
Per esempio se scrivete in un file html la frase: liceo scientifico verrà rappresentata sullo
schermo da una scritta in grassetto, perché il browser realizza in grassetto tutto ciò che sta fra e
.
LA HOME PAGE
La Home Page (letteralmente "pagina di casa"), anche chiamata pagina d’inizio o pagina iniziale è
solitamente la prima pagina di un Sito Web. È presente in tutti i Siti Web del mondo ed è quella che
viene aperta quando si digita l’indirizzo Web (URL) del dominio senza indicare una pagina in
particolare. Potrebbe anche essere definita pagina di "default". Visivamente si tratta di una schermata
che permette la visione e/o l’utilizzo, attraverso sottoinsiemi, dell’intero sito, può inoltre contenere
link per l’accesso immediato ad altri siti. La Home Page, nei sistemi UNIX-based, deve essere
nominata obbligatoriamente index con la possibilità di usufruire di più estensioni. Le più comuni
sono:
index.htm index.html
default.htm default.html
home.htm home.html
perché, su Internet, viene visualizzata automaticamente, senza che si debba chiamarla per nome. Il
nome preciso dipende dal server che contiene le pagine.
24IL SITO WEB
Un sito Web è un insieme di pagine Web fra loro correlate attraverso link e salvato su un Server Web.
I link si possono distinguere in:
Link statici: il percorso è fisso.
Esempio: http:\www.atosi.it\index.htm.
Link dinamici: il percorso cambia.
Esempio: http://www.atosi.it/login?user=valore_1&password=valore_2.
Esempio Link dinamici in PHP
Esempio: siano dati una serie di titoli di album musicali prelevati da un database MySQL. Si vuole
che, cliccandoci sopra, si acceda direttamente alla schermata di informazioni sul relativo album. La
pagina sarà sempre la stessa, cambieranno solo le informazioni visualizzate in base al titolo su cui si
clicca.
Risoluzione
Create la pagina1:
inviate le variabili tramite GET
$titolo
Create la pagina2:
ricavate la variabile inviata precedentemente
$titolo=$_GET[‘titolo’];
e poi fate una query del genere:
select * from tabella where nome_campo=‘$titolo’
Siti Web Statici e Dinamici
Siti Web Statici: le informazioni in esso contenute vengono aggiornate raramente. La loro
realizzazione avviene solamente attraverso linguaggi lato Client (HTML+CSS+JavaScript).
Siti Web Dinamici: le informazioni in esso contenute vengono aggiornate di frequente. La
loro realizzazione avviene attraverso linguaggi lato Server (HTML+ASP/PHP/JSP).
25Tipologia di siti Web
I tipi principali di siti sono:
Aziendale
Personale
Monografico
Intrattenimento
Siti personali
Gli obiettivi dei siti personali possono essere numerosi; spesso si tratta semplicemente di condividere
un qualche aspetto di se stessi con colleghi, amici, parenti o con altre persone.
Per la creazione e il mantenimento di un sito personale basta attenersi a queste semplici regole:
La prima “videata” o Home page del sito personale deve presentare con chiarezza lo scopo
principale. Se l’oggetto da presentare è sé stessi, la pagina iniziale deve presentare collegamenti
con le altre informazioni personali presenti sul sito.
Mantenere la semplicità: creare un elenco di “cose da fare” contenente le idee per l’estensione del
sito.
Fornire molti collegamenti.
Siti monografici
Le Home Page di questo tipo sono risorse dedicate ad argomenti specifici.
Elementi da prendere in considerazione per la creazione di siti monografici:
Prima di tutto, il titolo di una pagina monografica, insieme al contenuto della prima videata,
devono rivelare con assoluta chiarezza il tema al quale è dedicato il sito.
Focalizzare l’attenzione su un singolo tema (un sito monografico perde valore se va oltre un
singolo tema).
Siti commerciali
I siti commerciali rappresentano il peso maggiore per il web. Nel campo dei siti aziendali è possibile
trovare una gamma altamente diversificata di stili, perché gli obiettivi di questi siti, la professionalità
e le risorse a loro disposizioni sono altamente variabili.
Per creare pagine di questa tipologia occorre attenersi a queste semplici regole:
Rendere noto il nome dell’azienda e la sua attività e indicare informazioni sui modi di entrare in
contatto con l’azienda e sulle risorse messe a disposizione sul sito.
26 Chiedere il permesso (se non si è proprietari dell’azienda) prima di pubblicare una pagina
aziendale sul Web
Trarre ispirazione dai siti Web di aziende che operano nello stesso settore e, allo stesso tempo
trovare modi specifici per rendere il sito diverso e migliore di altri, senza compromettere
l’utilizzabilità globale.
Monitorare gli accessi (per giustificare la manutenzione e l’espansione di un sito) mediante un
contatore degli accessi.
FASI PER LA REALIZZAZIONE DI SITI WEB
PROGETTAZIONE DI UN SITO WEB
I passaggi necessari per la progettazione di un sito web sono i seguenti:
1. determinare gli scopi del sito (stabilire a quale tipo appartiene il sito da creare: personale,
monografico, commerciale o comico)
2. determinare il layout del sito e delle singole pagine. La struttura del sito può guidare il lettore
nelle parti che ritengono più interessanti. Il layout delle pagine del sito può renderle più utili, più
interessanti o più divertenti, a seconda del loro scopo. Le regole generali sono:
a. Stabilire il numero delle pagine e come devono essere collegate tra loro.
b. Specificare gli scopi del sito all’inizio della Home Page.
c. Specificare lo scopo delle altre pagine all’inizio di ciascuna di esse.
d. Utilizzare titoli, icone per elenchi puntati e altri elementi grafici per evidenziare i punti
chiave.
e. Creare o procurarsi gli elementi grafici che serviranno.
f. Inserire dispositivi di navigazione, ossia collegamenti dalla home page ad altre pagine
dello stesso sito, e altri collegamenti su queste ultime per tornare alla home page, in un
punto specifico all’inizio o alla fine di ciascuna pagina (collegamenti interni).
3. Scegliere i collegamenti da inserire (occorre considerare anche collegamenti a pagine di altri
siti, utilizzare motori di ricerca per cercare i collegamenti più adatti da inserire nelle vostre pagine
web).
CREAZIONE DEI CONTENUTI
27 Creazione del testo.
Creazione di elementi grafici (fotografie, immagini, testate, barre di separazione e icone).
PUBBLICARE IL SITO
Una volta creato il sito, occorre mettere insieme i vari elementi del sito e poi collaudarlo sulla propria
macchina ed infine pubblicarlo. Occorre effettuare un controllo di link interrotti (perché l’indirizzo è
stato digitato per sbaglio o la pagina è stata rinominata, spostata o cancellata.
CONTROLLO LINK INTERROTTI CON FRONTPAGE
1. Passare alla modalità di visualizzazione report (si apre Riepilogo sito, contenente informazioni
dettagliate sul sito realizzato come numero pagine aggiunte di recente, quante pagine risulteranno
lente da caricare etc.).
2. Fare doppio clic sulla riga del link interrotto per vedere un elenco dettagliato.
3. Per correggere il collegamento, fare doppio clic sulla riga corrispondente al collegamento
interrotto e nella finestra modifica collegamento scrivere il nome esatto della pagina, quindi
ciccare su sostituisci.
PUBBLICARE SU UN WEB SERVER
Dopo aver controllato gli errori nel sito realizzato, si procede alla pubblicazione. Prima di pubblicarlo,
è necessario avere un accesso a un server Web. Un server Web è tipicamente un computer con
un’ampia banda di connessione a Internet, sul quale gira uno speciale software che gestisce le richieste
di pagine, esegue gli script e “fornisce” le pagine stesse. È possibile avere accesso a un server web
tramite acquisto dello spazio web da un fornitore di servizi online (per esempio aruba.it, register.it).
Una volta che si ha a disposizione l’URL dello spazio web, utilizzando un software FTP
(opportunamente configurato), sarà possibile caricare i file del sito nello spazio Web.
PROVARE IL SITO IN UN BROWSER
1. Accedere al sito, controllare i link.
2. Controllare che il contatore visite funzioni correttamente.
3. Provare gli eventuali moduli inseriti nel sito.
28I TAG DI BASE
Il linguaggio HTML abbinato ai fogli di stile CSS (Cascading Style Sheets) permette la costruzione
di pagine Web. In particolare l’HTML si preoccupa del contenuto della pagina mentre il CSS regola
il layout, cioè il modo in cui la pagina visualizza i suoi contenuti (formattazione e disposizione degli
oggetti testuali e grafici).
Le pagine Web contengono due tipi di oggetti:
il testo del documento;
i marcatori del linguaggio HTML, detti tag.
I tag sono parole chiavi racchiuse fra le parentesi angolari che forniscono al browser le
necessarie informazioni per l’interpretazione della pagina e dei suoi elementi:
< nomeTag >
I tag, quindi, possono essere considerati dei comandi dell’HTML.
Esistono alcune regole fondamentali per la corretta scrittura dei tag:
i tag devono essere racchiusi fra ;
ogni tag aperto deve essere chiuso;
normalmente la chiusura di un tag avviene tramite la barra / (slash) che precede il nome del
tag, ma ci sono delle eccezioni a questa regola.
Quindi un tag, in generale, è scritto in questo modo:
contenuto
In realtà esiste un ristretto numero di tag che non hanno la chiusura . Per esempio, l’"a
capo" viene indicato così:
Si noti che tag di questo tipo hanno comunque lo slash che precede il nome del tag stesso.
La sintassi generale dei tag può prevedere non solo il nome del tag stesso ma anche degli attributi:
Per esempio:
29Questo tag, come vedremo, permette di specificare che, a quel punto, deve comparire un’immagine
che è il file image.gif . Quindi, IMG (che significa immagine) è il nome del tag, SRC (che significa
sorgente) è l’attributo, "image.gif" è il valore dell’attributo.
ESERCIZIO 3
Provate a visualizzare il codice HTML (codice sorgente) della pagina www.atosi.it.
LA STRUTTURA DI UNA PAGINA WEB
I tag fondamentali sono tre:
HTML,
HEAD,
BODY
Questi a loro volta contengono altri tag che possono contenere altri tag che possono contenere altri
tag, e via di seguito, fino a realizzare una struttura nidificata di tag.
Al browser bisogna sempre dire dove comincia e dove finisce il file html, e questo si ottiene con le
semplici istruzioni: e . Inoltre il file html contiene due parti. La testa (head) e il corpo
(body) e, naturalmente, bisogna dire al browser dove iniziano e dove finiscono queste parti. Si fa così:
e .
La struttura di base (scheletro) di una pagina Web, quindi, è la seguente:
30Avremmo potuto scrivere il codice tutto su una sola riga, il browser l’avrebbe interpretato
correttamente, a discapito della facilità di lettura del codice stesso da parte dell’uomo.
La spaziatura dal margine sinistro (identazione) ha solo una funzione estetica, serve ad aumentare la
leggibilità del codice.
Il tag HTML
Nella pagina il tag HTML serve sostanzialmente a delimitare l’inizio e la fine del file e ha la funzione
di dichiarare la tipologia di documento al browser.
Le due righe precedenti possono essere considerate una pagina Web.
Il tag HEAD
Il tag HEAD si trova all’interno del tag HTML e rappresenta l’intestazione del documento.
La sezione HEAD comprende tutto quello che non viene mostrato direttamente sulla stessa pagina.
L’HEAD può contenere altri tag aventi differenti funzioni, per esempio, quelli per descrivere il set
dei caratteri utilizzato nella pagina (charset), il collegamento ad altri file necessari per il corretto
funzionamento della pagina (per esempio fogli di stile CSS o script eseguibili dal browser).
Un tag sempre presente è … , utilizzato per visualizzare il titolo della pagina nella
barra del titolo del browser in uso.
Titolo della pagina
31Il tag BODY
Anche il tag BODY, che rappresenta il corpo del documento, si trova all’interno del tag HTML dopo
l’HEAD.
In questa sezione della pagina devono essere collocati tutti i contenuti visualizzati nella pagina: testi,
immagini, video e collegamenti.
La vocale e accentata
Se si vuole visualizzare la vocale accentata, si dovrebbe usare una notazione particolare. Ad esempio,
la vocale "e" accentata deve essere indicata così:
è
(compreso il ";" finale).
Allora, si può scrivere, per esempio:
Questo è un semplice ipertesto.
Visualizzando la pagina, avremo il seguente risultato:
Questo è un semplice ipertesto.
Si noti che, al posto della vocale accentata, è stata indicata la lettera "e" seguita dall’accento. Le vocali
accentate non dovrebbero mai essere usate su Internet, perché potrebbero non essere visualizzate
correttamente da tutti gli utenti.
LA STRUTTURA DI UNA PAGINA HTML 5
32La struttura di una pagina HTML secondo la nuova versione 5 semplifica notevolmente il codice:
Titolo della pagina
………
Rispetto allo scheletro base sono state aggiunte delle indicazioni che riguardano il tipo di documento,
la lingua utilizzata e il set di caratteri. Le informazioni sono state aggiunte attraverso nuovi elementi
chiamati attributi.
Gli attributi estendono il significato e le informazioni relative ad un determinato tag specificandone
le proprietà. Un tag può avere anche più di un attributo.
La struttura è la seguente:
Per esempio:
EDITOR - CREARE E MODIFICARE UN DOCUMENTO HTML
Gli editor consentono la creazione e l’aggiornamento delle pagine Web. Una pagina HTML è scritta
in “formato testo” ed ha estensione .htm o .html. per scrivere in HTML è sufficiente un qualunque
editor di testo.
ESERCIZIO 4
Creare il file “index.html” con il programma “Blocco Note” rinominando opportunamente
l’estensione del file da txt a html.
ESERCIZIO 5
Scrivete nel file “index.html” con il programma “Blocco Note” il seguente codice della vostra prima
pagina Web:
33Prima Pagina Web
La mia prima pagina Web in HTML.
Chiudete il programma salvando le modifiche e, aprite il documento con un browser qualsiasi.
ESERCIZIO 5 BIS
Creare il file “home.html” con il programma “Notepad++” e scrivere il codice del ESERCIZIO 5.
Gli editor si dividono in:
Editor testuali: per la scrittura del solo codice HTML (per esempio, NotePad++).
Editor visuali: per la scrittura del codice HTML con una interfaccia grafica amichevole che
consentono una più semplice gestione (per esempio HTML-Kit).
ESERCIZIO 6
Aprite il file “index.html”, precedentemente creato con il blocco note, con il programma “HTML-
Kit” in versione portabile e modificate a vostro piacere la frase contenuta fra i tag … .
Aprite il file con il browser (F5 per aggiornare la visualizzazione).
Esistono anche dei veri e propri “Ambienti di sviluppo HTML integrato”, ad esempio Seamonkey
(http://www.mozilla.org/projects/seamonkey/). Seamonkey ha le seguenti caratteristiche:
E’ multipiattaforma (Linux, Windows, Mac, ecc…).
E’ open source (quindi gratuito).
Funziona molto bene.
ESERCIZIO 7
34Aprite Seamonkey, e dal menu File New cliccate sulla voce Composer Page.
Seamonkey si apre nella sezione “Normal”:
In questa sezione è possibile creare le pagine Web come se si trattasse di un documento di testo.
Digitare del testo (per esempio, “This is my first Page in HTML”) e provate a cliccare in basso sulla
linguetta “HTML Source”.
35Rimanendo nella sezione “HTML Source” scrivete il titolo “Corso HTML” tra i due tag …
.
Tornate poi nella sezione “Normal” e constatate che il titolo della pagina sia cambiato.
I CONTENUTI DELLA PAGINA WEB
I tag che descrivono i vari contenuti di una pagina si possono distinguere in:
elementi di blocco (block-level);
elementi in linea (inline).
Gli elementi di blocco provocano interruzioni di paragrafo obbligando l’elemento precedente e quello
successivo ad andare a capo, mentre gli elementi in linea si posizionano sulla stessa riga.
Normalmente gli elementi di blocco vengono usati per inserire titoli, paragrafi, tabelle, linee
orizzontali di separazione oppure elenchi puntati e numerati; quelli in linea invece inseriscono
collegamenti, immagini oppur modificano l’aspetto del testo, applicando evidenziazioni (per esempio
il grassetto o il corsivo) ad una parte di testo della pagina.
Questa distinzione è importante nella progettazione di una pagina, perché determina la modalità con
la quale un oggetto viene disposto nella pagina.
Per esempio, inserendo un titolo, l’elemento precedente si posiziona sopra e il successivo sotto,
creando quindi un ritorno a capo. Diversamente, inserendo un’immagine, l’elemento successivo si
posiziona sulla stessa riga dell’immagine.
36Vediamo i tag fondamentali del linguaggio HTML di uso comune per i contenuti delle pagine Web.
TAG PER LA GESTIONE DEL TESTO
Vediamo i tag fondamentali per la gestione del testo, ovvero per trattare le seguenti caratteristiche:
Formattazione
Ridimensionamento
Layout
Listing
paragrafo
grassetto (dall’inglese bold)
sottolineato (underlined)
corsivo inclinato (italic)
equivalente logico del
equivalente logico del
centrato
allineato a sinistra
a capo (break)
aumenta la dimensione del carattere
diminuiscila
genera un carattere monospazio tipo "macchina da scrivere"
genera testo lampeggiante
determina la particolare colorazione dei caratteri compresi nell’istruzione
titoli e sottotitoli
linea orizzontale
liste puntate
liste numerate
Il tag P – Il tag per inserire un paragrafo
Il tag P si utilizza all’interno del tag BODY per scrivere un paragrafo che presenta una spaziatura
prima e dopo.
37Ciao!
Tra due paragrafi è presente una spaziatura.
Ciao!
Salve!
L’attributo STYLE
Serve per cambiare lo stile del carattere:
Testo
FONT-SIZE serve per cambiare la grandezza del carattere, può essere usato al suo posto SIZE.
FONT-FAMILY serve per cambiare il tipo di carattere, può essere usato al suo posto FACE.
COLOR serve per cambiare il colore al carattere.
BACKGROUND serve per cambiare il colore dello sfondo, può essere usato al suo posto BGCOLOR.
TEXT-ALIGN specifica l’allineamento, a destra (RIGHT), a sinistra (LEFT), al centro (CENTRE) o
giustificato (JUSTIFY).
NB per COLOR e BACKGROUND: si possono scegliere colori personalizzati utilizzando i numeri
esadecimali. Per esempio:
38#000000
A ogni due cifre corrisponde la quantità in numero esadecimale di quel tono di colore (le prime due
sono per il rosso, quelle in mezzo per il verde e le ultime due per il blu). In questo caso il testo
verrebbe nero. Siccome bisogna inserire numeri esadecimali, ci si può aiutare con la calcolatrice di
Windows (selezionare Visualizza Scientifica e impostare su DEC, scrivere il numero in decimale
e cliccare su HEX per ottenere il numero corrispondente esadecimale).
Per mettere un colore che avete visto in una pagina Web, aprite la pagina, trovate il colore che vi
interessa e premi Stamp Rsist. Andate su Paint e fai Ctrl + V, andate a scegliere lo strumento Scegli
Colore sulla barra a sinistra e cliccate sul colore desiderato. Quindi fate Colori Modifica colori...,
e cliccate su Definisci colori personalizzati. A questo punto troverete a sinistra dei numeri, copiate la
tonalità di rosso sulla calcolatrice e premere su HEX, copiate il risultato ottenuto nel codice HTML.
La stessa procedura può essere ripetuta per il verde e per il blu.
Esempio: il colore ha le seguenti tonalità di colore: Rosso: 22; Verde: 102; Blu: 178 (Notate che è
possibile arrivare al massimo a 255). Andate sulla calcolatrice, impostare DEC e scrivere 22: si otterrà
16, quindi ricopiare 16:
Testo
Poi rimettere su DEC e fare la stessa cosa con 102: si otterrà 66. Poi con 178: si otterrà B2:
Testo
Altrimenti usate una formula più semplice ma meno precisa:
Testo
L’attributo STYLE si può usare anche con il tag H e altri.
L’attributo CLASS
Serve per dare una classe (spiegheremo più avanti a cosa serve precisamente):
Testo
39Testo senza tag
Certamente senza tag si può inserire del testo, ma questo non verrà paragrafato. Per il ritorno a capo
esiste comunque il tag BR.
Il tag BR
Il tag BR serve per andare a capo, quindi, come puoi immaginare, non si apre e non si chiude, è un
elemento singolo:
Ciao!
Salve!
Così va a capo due volte, lasciando una riga vuota, quindi analogo a ciò che ho scritto prima.
Ovviamente BR si può utilizzare all’interno del tag P, se si vuole andare a capo solo una volta senza
iniziare un nuovo paragrafo.
Il tag B - Grassetto
Serve per scrivere in grassetto:
Il mio primo sito in HTML
Ciao!
Salve!
40Il tag U – tag sottolineatura
Il tag U serve per sottolineare:
Il mio primo sito in HTML
Ciao!
Salve!
Il tag I – tag corsivo
Il tag I serve per scrivere in corsivo:
Il mio primo sito in HTML
Ciao!
Salve!
Tutti questi tag possono essere combinati fra di loro, ad esempio per fare un testo in corsivo e
grassetto, in corsivo e sottolineato etc.
Tag di contesto EM e STRONG
41I tag di linea e conferiscono al testo solo un’importanza tipografica. Se invece il testo da
evidenziare ha anche un’importanza semantica, cioè contiene parole o informazioni rilevanti sulle
quali si desidera focalizzare l’attenzione del lettore, è necessario utilizzare i tag di contesto e
che si chiamano così perché la loro funzione è di enfatizzare e dare importanza al testo:
trasforma il testo in corsivo e viene usato per caricare il testo di un valore emotivo:
trasforma il testo in grassetto e conferisce al termine a cui viene associato un
paso e un rilievo, che sarà interpretato dal motore di ricerca come importante.
Il tag SUB
Scrive il testo a pedice:
H2O
Il tag SUP
Serve per scrivere ad apice:
H2O
32
Il tag BIG
42Serve per scrivere leggermente più in grande:
H2O
32
Il tag SMALL
Serve per scrivere leggermente più in piccolo:
H2O
32
Questo tag è utilizzato per formattare note legali, disclaimers, copyright oppure condizioni di utilizzo.
Produce l’effetto di un ridimensionamento del carattere.
ESERCIZIO 8
Fate pratica con i tag, utilizzando il programma Seamonkey. Andate nella sezione “HTML Source”
e inserite del testo utilizzando i tag .
Attenzione! Se un tag non viene chiuso, il suo effetto permane fino alla fine della pagina. Ad esempio,
se non chiudete il tag con il tag , tutto quello che verrà dopo sarà sottolineato.
Infine andate nella sezione “Preview” per visualizzare il risultato.
ESERCIZIO 9
I tag possono essere “nidificati”. Provate a fare pratica scrivendo:
43Corso HTML
ESERCIZIO 10
Fate pratica utilizzando i pulsanti di formattazione della sezione “Normal” di SeaMonkey.
Il tag FONT
Il tag font determinana la particolare colorazione del testo (il colore è stabilito dalla sigla numerica o
letterale fra virgolette).
testo
Esempi di colori:
1. 00FFFF,
2. FF0000,
3. 00FF00,
4. FFF000,
5. 0000FF,
6. FFFFFF,
7. FF00FF,
8. FFFF00,
9. ABCDEF,
10. 000000,
11. 990000,
12. 009900,
13. 000099,
14. 999900,
15. 990099,
4416. 009999.
Il tag BLOCKQUOTE
Il tag Blockquote genera un paragrafo rientrato verso destra (rientro a sinistra).
testo
Il tag MARK
Il tag permette di evidenziare una stringa di testo. È stato creato per mettere in risalto una
parola chiave richiesta dall’utente tramite un motore di ricerca. Visualizza il testo evidenziato in
giallo.
L’HTML è un linguaggio di markup
Il tag ADDRESS
Il tag è usato per formattare informazioni di contatto e indirizzi. Il testo inserito nel tag
viene automaticamente formattato in corsivo.
GigaBitIndirizzo: Via Marsala 10 – 21052 Busto A., Italia
Partita IVA: 12345678910
Il tag TIME
Il tag è utile non solo per la formattazione, ma anche per i motori di ricerca che riconoscono
una stringa temporale. La sintassi richiede l’attributo datetime seguito dalla data in formato
americano:
12 marzo 2014
12 marzo
12/03/2014
Il tag possiede anche l’attributo pubdate, usato soprattutto nei blog per indicare la data di
pubblicazione di un post. Essendo un attributo booleano è sufficiente la sua presenza, senza alcun
valore.
Post pubblicato il 12/03/2014
45Il tag H – il tag per inserire i titoli e i sottotitoli
Il tag H serve per scrivere un titolo, dopo H bisogna inserire un numero da 1 a 6, più il numero è
grande più il titolo verrà scritto in piccolo. Ad esempio puoi utilizzare H1 per il titolo e H2 per il
sottotitolo:
Titolo del Libro
Cap 1
Testo del Cap 1
Cap 2
Testo del Cap 2
Il tag HR
Crea una linea orizzontale (horizontal rule) di separazione:
Si tratta di un tag vuoto, che non contiene alcun tipo di informazione al suo interno.
Il tag UL
Insieme al tag LI fa una lista puntata con una spaziatura dal margine.
Software
Firmware
Hardware
46Il tag OL
Insieme al tag LI fa una lista numerata distanziata dal margine.
Cap1
Cap2
Cap3
NB In tutte le liste il pallino nero può essere sostituito con un disegnino a piacere, basta prima
prepararlo e salvarlo in formato GIF o JPG, e poi aggiungere un attributo all’istruzione , e cioè:
in cui image.gif è l’immagine da visualizzare, sistemata nella stessa directory in cui si trova il file
html.
Definizioni di liste
Il tag (definition list) che genera una lista particolare in cui ogni elemento della lista
compare come titoletto, seguito da una definizione (un discorsetto più lungo ulteriormente rientrato
a sinistra),
racchiude gli elementi della definition list,
indica l’inizio della definizione, cioè del piccolo paragrafo che spiega nei dettagli in
cosa consiste l’elemento principale della lista.
Esempio:
oChe è visualizzato nel seguente modo:
Primo termine
Qui si spiega cos’è il primo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla...
Secondo termine
Qui si spiega cos’è il secondo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla...
Terzo termine
Qui si spiega cos’è il terzo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla... ........
Elenchi nidificati
Si possono fare anche elenchi complessi nidificati:
Cap1
Cap2
Cap2.1
Cap2.2
La versione HTML 5 consente di personalizzare un elenco ordinato usando due attributi; start e type.
L’attributo start specifica il valore di partenza dell’elenco. Nel seguente esempio l’elenco parte da 4.
Cap4
Cap5
Cap6
L’attributo type indica la tipologia di marcatore dell’elenco ordinato. I possibili valori sono:
1 (valore di default)
A (lettere maiuscole)
a (lettere minuscole)
I (lettere maiuscole romane)
48i (lettere minuscole romane)
Il tag DEL
Barra il testo.
Testo barrato
Il tag CENTRE
Serve per scrivere un testo centrato.
Testo centrato
Il tag PRE
Il tag Pre (preformatted) riproduce il testo esattamente con la stessa formattazione che ha nel file html
(cioè con le stesse andate a capo, gli stessi spazi, gli stessi rientri, etc.); serve per semplici tabelle,
effetti grafici particolari, disegnini in caratteri ASCII.
testo
Il tag ! - tag commento
Inserisce un commento che verrà ignorato da browser e motori di ricerca e, quindi, non verrà mai
visualizzato dal browser.
ESERCIZIO 11
Fate pratica inserendo un commento dalla sezione “ Source” di Seamonkey.
TAG PER INSERIRE LE IMMAGINI
Finora abbiamo parlato di solo testo. In una pagina non c’è solo testo ma anche immagini. Chiariamo
subito un concetto importante: le immagini non si trovano nel file html, si trovano a parte e sono dei
49file indipendenti di tipo GIF o JPG. Il file html contiene solo una istruzione che indica al browser di
visualizzare la figura sullo schermo. Ora tutti capiscono subito che, per potere trovare questa figurina,
il browser deve sapere dove si trova. Occorre quindi l’istruzione apposita.
Il tag IMG
E’ un elemento, carica un immagine presente in un altro sito o un immagine dal computer locale. NB:
se l’immagine non esiste verrà visualizzata una X.
L’opzione SRC
Presente anche nel tag SCRIPT, specifica l’immagine (e il relativo percorso, assoluto o relativo) da
caricare:
Questa quindi è l’istruzione necessaria per far comparire l’immagine image.estensione (dove
estensione è il formato dell’immagine, GIF o JPG). IMG significa immagine e SRC significa sorgente
(source). Fate attenzione che se l’immagine si trova nella stessa directory in cui si trova il file html,
non occorre scrivere il percorso, altrimenti l’istruzione deve contenere l’informazione su tutto il
percorso necessario, per esempio: .
Esempio:
L’opzione ALT
Serve per visualizzare il testo specificato nel caso l’immagine non sia disponibile. Inoltre è utile per
i non vedenti e per molti motori di ricerca.
ESERCIZIO 12
Inserire un’immagine utilizzando il bottone “image” di Seamonkey:
50In questo modo otterrete una struttura come questa: Alternativa:
Quali formati di immagine
I file immagine permettono la riproduzione, sullo schermo di un computer, di un disegno o di una
fotografia in un determinato formato grafico. I formati sono dei metodi di salvataggio elettronico.
Esistono svariati formati: GIF, JPEG, PNG, TIFF, BMP, etc. nel Web, però, i formati utilizzabili e
supportabili da tutti i browser sono soltanto i primi tre. Utilizzare formati differenti potrebbero
richiedere programmi aggiuntivi e le immagini verrebbero visualizzate in una finestra separata.
Le immagini JPEG hanno il vantaggio di visualizzare un numero molto elevato di colori (oltre 16
milioni) e quindi vanno usate, in particolare, quando si richiede una qualità fotografica.
Le immagini GIF, invece, consentono di visualizzare contemporaneamente al massimo 256 colori. In
molti casi 256 colori sono sufficienti per ottenere una qualità accettabile dell’immagine.
Oltre alla qualità dell’immagine, dobbiamo considerare la dimensione del file che la contiene. Quanto
più aumenta la dimensione del file, tanto più si allunga il tempo di trasmissione sulla linea telefonica.
Di solito con le JPEG, se il numero di colori è elevato, si hanno file di dimensioni più contenute, ma
non è raro che le GIF si rivelino più compatte.
In generale, nella scelta del formato, si dovrebbero tenere presenti le seguenti regole:
se l’immagine contiene pochi colori (non più di 16), le GIF dovrebbero essere preferibili, non
solo per dimensioni del file, ma anche per il fatto che le JPEG possono modificare i colori di
alcuni punti.
se abbiamo bisogno di un’immagine con un numero molto elevato di colori, dobbiamo
necessariamente usare le JPEG.
con un numero intermedio di colori, ovviamente minore di 256, basta verificare la dimensione
del file e scegliere il formato cui è associato il file più compatto.
Dobbiamo tenere presente, inoltre, che alcune immagini GIF possono essere animate. Sono costituite
da un insieme di immagini (fotogrammi) che, mostrate una dopo l’altra, producono l’effetto di
movimento. Per costruire GIF animate è necessario un programma specifico, ma se ne trovano
moltissime su Internet. Le GIF potrebbero anche essere "interlacciate": le righe di punti non sono
visualizzate in modo sequenziale.
Il formato GIF
52Puoi anche leggere
