Home
Realizzare velocemente
Pagine web
con html
Per
avere tutte le informazioni necessarie sulla sintassi HTML:
Guida
completa
http://xhtml.html.it/guide/leggi/51/guida-html/
Guida
semplice e di rapida consultazione
http://riemann.unica.it/studenti/guida/
Un sito Web
non è altro che un ipertesto che ha dei collegamenti attivi con
altre pagine, immagini e suoni che fanno parte dello stesso sito ma anche di
siti diversi e la sua costruzione dovrebbe essere intesa come un progetto a
lungo termine che include anche i futuri aggiornamenti.
Sappiamo che un
ipertesto è un tipo di documento che permette di creare dei collegamenti.
Le pagine Web
sono ipertesti creati con il linguaggio ipertestuale HTML (Hyper Text Markup
Language) che contengono dei link
(collegamenti) ad altre pagine.
Prima di iniziare
a realizzare un sito Web è necessario sapere che cos’è il linguaggio HTML e che
cosa può o non può fare.
L’HTML descrive
la struttura di un documento, non il suo aspetto finale; per
capire meglio pensiamo ad una persona che, portando una pagina da comporre a un
tipografo, gli dicesse:
“questa frase
è il titolo, poi lascia due interlinee, scrivi questo paragrafo rientrato,
elenca queste frasi ecc.
In altre parole,
il linguaggio HTML utilizza una serie di stili fissi relativi ai titoli, alle
intestazioni, agli elenchi o tabelle e all’aspetto della pagina in generale.
Per utilizzare questo linguaggio è necessario decidere quale riga è il titolo,
quale frase è la didascalia di un’immagine, quali frasi devono essere elencate,
se un determinato paragrafo deve essere allineato a sinistra oppure al centro
ecc. I browser (sfogliatori) Web come Internet
Explorer, Netscape o altri leggono e interpretano il
linguaggio HTML e formattano (applicando le istruzioni) il testo facendolo
apparire sullo schermo.
Tuttavia essi
interpretano queste istruzioni in modo differente: ad esempio, un browser
potrebbe interpretare un titolo in grassetto, un altro invece in formato
normale. Come fare allora per ottenere che il browser visualizzi il testo
nell’aspetto voluto dall’autore? Purtroppo l’unico sistema è concentrarsi
sui contenuti, che devono essere facili da leggere e da comprendere,
in modo che, anche se l’aspetto della pagina varia leggermente, il significato
sia ugualmente ben chiaro per il lettore.
HTML è un
linguaggio “markup” (contrassegno), cioè un
linguaggio che applica particolari contrassegni, detti tag,
intorno alle parole e ai paragrafi. Poiché browser differenti utilizzano tag differenti, ci si basa sull’HTML 2.0, che è costituito
da tag supportati da tutti i browser. E comunque
consigliabile effettuare delle prove con browser differenti per controllare
come visualizzano la pagina.
Come creare pagine web con HTML
Esempio:
Aprire
il blocco note e scrivere la seguente intestazione in codice html (vedere le guide per il significato delle parole
chiave):
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>pagina
di prova</TITLE>
<BODY text=black >
<TABLE border=0>
<TBODY>prova
prova prova</TBODY></TABLE></HTML>
Salvare
il file con estensione htm o html.
Aprire
il documento con il browser, visualizzare il codice html
(per non fare confusione, sarebbe bene che la pagina web avesse lo stesso nome
– indicato in TITLE - del file htm).
In
questo modo è stata creata una semplicissima pagina web.
Preliminari alla creazione di una pagina Web:
1.
Installare un editor HTML (se ne trovano di tutti i tipi nei dischi
allegati alle riviste);
2.
installare un browser: Internet Explorer o Netscape;
3.
poiché le pagine Web possono essere considerate come file di testo che
devono essere salvati in un particolare formato, cioè con estensione .HTM, sarà
opportuno creare una directory dove salvare i futuri file *.HTM (le
vostre creazioni);
4.
i contrassegni dell’HTML (tag) sono case insensitive, cioè si possono scrivere indifferentemente
in maiuscolo o in minuscolo.
Prima Regola
Ogni elemento tag (contrassegno)
deve essere racchiuso tra parentesi acute <>.
Seconda Regola
Per ogni elemento (tag) è
necessario indicare l’inizio dell’effetto (ad esempio il grassetto) e la
fine dell’effetto indicandola con una barra che precede il tag:
<tag> inizio dell’effetto </tag> fine dell’effetto
Terza Regola
Ogni pagina Web deve iniziare con il tag
<html> e terminare con </html>.
Quarta Regola
In ogni pagina Web subito dopo <html>
occorre inserire i tag <head> INTESTAZIONE e
<title> TITOLO che servono per indicare
al browser il nome della pagina; il contenuto appare nella barra superiore
della finestra del browser; questi tag vanno chiusi
subito dopo il nome.
Quinta Regola
Chiudere nell’ordine:
1.
</title>
2
</head>
Sesta Regola
Occorre inserire il tag
<body> CORPO per evidenziare dove inizia il testo.
Altri modi per creare una pagina web
§
Per creare pagine web senza conoscere il linguaggio HTML esistono degli
applicativi specifici come FrontPage.
§
Anche con Word 2000 e (2002
XP) si possono creare pagine Web utilizzando il comando Salva come pagina
web. Questa procedura converte un testo esistente in HTML; verranno però
perse alcune informazioni relative alla formattazione del documento, come
margini, tabulazioni ecc.
§
Oppure si può creare un nuovo documento come pagina Web, aprendo un
documento “Nuovo” e scegliendo la scheda Pagine Web e poi Pagina Web
vuota.
Aprire la pagina web che si vuole utilizzare come
modello per creare una nuova pagina.
Salvare con nome: con questa operazione si crea
automaticamente la cartella di files collegati
alla nuova pagina; la nuova cartella
avrà il nome della nuova pagina_file.
Ricordarsi di modificare il TITLE nella versione HTML
altrimenti la pagina web riporterà lo stesso titolo della pagina originale, con
rischio di confusione.
Quindi esistono
varie possibilità per creare pagine Web tra cui utilizzare il codice HTML o
usare un tool di sviluppo (per esempio Front Page).
Va tenuto
presente che, se da un lato il codice HTML è diventato più complesso per
consentire lo sviluppo di pagine molto sofisticate, dall’altro non tutti hanno
il tempo o il desiderio di imparare il linguaggio HTML.
Vi domanderete sicuramente
come mai, se esistono programmi che consentono la creazione di pagine Web in
modo facile e completamente guidato, gli sviluppatori professionisti continuino
ad usare il codice HTML nonostante la sua complessità.
Il principale
difetto dei sistemi di composizione automatica è quello di generare un codice
HTML non sempre adeguato; infatti, quando si desidera modificare una pagina per
aggiornare il sito, la pagina aggiornata non mantiene l’aspetto originario,
anzi, talvolta lo peggiora. E per questo motivo che gli sviluppatori
preferiscono usare il codice HTML, che garantisce, a patto di conoscerlo bene,
i migliori risultati.
· Modificare
la struttura della pagina (paragrafi, blocchi, linee …)
· Personalizzare
la formattazione del testo (colore, dimensioni, stile)
· Inserire
tabelle e partizioni delle pagine
L'HTML
definisce una serie di attributi che, specificati nei tag fondamentali per
la creazione delle tabelle, consentono di impostare:
Si possono sfruttare questi attributi per creare, ad esempio,
un menù per la navigazione.
· Modificare
sfondi e colori:
L'attributo "Bgcolor="
consente di modificare il colore dello sfondo, mentre con "Background=" è possibile visualizzare un'immagine di
sfondo, specificando il nome dell'immagine con il relativo path
(directory o cartella in cui si trova). Gli attributi: "Text=", Link=", "Vlink=" e "Alink=";
consentono di impostare rispettivamente: il colore del testo (link esclusi), il colore dei link,
il colore dei link a pagine già visitate e il colore
dei link attivati (cioè quelli su cui è stato puntato
il mouse ma non si è ancora rilasciato il pulsante.
Esempio:
<BODY
text=black vLink=yellow link=white background=homemath_file/stelline.gif>
· Inserire:
<IMG
SRC="gif/icona.gif">
o <A HREF="esempi.html">informazioni</A>
Il link va creato in questo
modo:
<A href="http://digilander.iol.it/chiarinus/listaescursioni.htm#link1">Monte
Grappa e Prealpi Venete</A>
Nel punto ove si vuole arrivare bisogna inserire la
stringa:
<A name=link1>
<alt="testo da
visualizzare">
Farsi trovare dai motori di ricerca
Inserire
dopo il TITLE i META TAG con le parole chiave:
<META
Name="keywords" Content="Matematica, Geometria, Informatica">
In
questo modo è possibile impostare le parole chiave per i motori di ricerca,cioè
le parole con le quali vogliamo essere rintracciati da essi.
http://xhtml.html.it/guide/leggi/51/guida-html/
http://riemann.unica.it/studenti/guida/