Home
Realizzare velocemente

Pagine web

con html

 

 

  1. Guide in linea
  2. Come è fatto un sito web
  3. Cos’è HTML
  4. Come creare una pagina con HTML
  5. I comandi essenziali
  6. Altri modi per creare una pagina web
  7. Come arricchire una pagina web
  8. Farsi trovare dai motori di ricerca
  9. Bibliografia

 

 

 

Guide in linea

 

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/

 

 

INDICE

 

Come è fatto un sito web

 

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.

 

INDICE

 

Cos’è HTML

 

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.

 

 

INDICE

 

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.

 

INDICE

 

 

I comandi essenziali

 

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.

 

 

INDICE


 

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.

 

 

INDICE

 

Come arricchire la pagina web

 

·        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:

Bordo della tabella

Spazio tra le celle

Spazio nelle celle

Larghezza della tabella

Larghezza delle celle

Allineamenti

Tabelle colorate

Celle su più righe o colonne

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">

 

INDICE

 

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.

 

INDICE

 

Bibliografia – Sitografia

http://www.html.it/

http://xhtml.html.it/guide/leggi/51/guida-html/

http://riemann.unica.it/studenti/guida/

 

 

 

INDICE