Come se fa un sito internet

Profittoaffarionline.com

Come Guadagnare online

Introduzione al

Linguaggio HTML

Template

55 modelli pronti per l'uso

Esplodere la tua Rete di Vendita Velocemente e di risparmiare una fortuna in tasse Web Develope

Super Bonus
Corso completo linguaggio html

Introduzione

Una pagina Web non è altro che un file di testo, contenente etichette o

istruzioni (tag) di formattazione in linguaggio HTML (HyperText Markup

Language - Linguaggio di contrassegno per gli Ipertesti) e collegamenti (parole

calde, hyperlink o link) a file di grafica, video, suoni o file multimediali e ad

altre pagine Web.

Ma come funziona il browser?

Il browser scarica le pagine Web, che si trovano sul server Internet del sito

visitato e che fanno riferimento a un certo indirizzo Web, sul proprio computer

- Tutte le pagine pubblicate in Internet hanno un loro indirizzo specifico

chiamato URL (Uniform Resources Locators) - e, interpretando le istruzioni e i

collegamenti HTML, dispone i vari files associati a quel documento (le

immagini, i filmati in flash…..) sul monitor, mostrando la pagina web in tutta la

sua interezza.

La fase di visualizzazione di una pagina Web da parte del browser viene

definita col nome di rendering della pagina, il Motore di rendering è quindi

quella parte del browser che ha il compito di mostrare sul monitor il documento

HTML definitivo.

Il linguaggio HTML, ha quindi la funzione di segnalare al browser come i vari

elementi del documento richiamato devono essere distribuiti all’interno della

pagina che si sta visualizzando.

Incominciamo quindi ad esaminare in questa lezione il linguaggio HTML, come

si realizza una pagina web e quali strumenti occorrano per iniziare a lavorare.

Lo standard HTML

Il consorzio che si è occupato di uniformare la sintassi del linguaggio HTML è il

W3C (World Wide Web Consortium) e ha rilasciato, in questi anni, varie

versioni di questo importante linguaggio (HTML 2.0, HTML 3.2, HTML 4.0), fino

all’ultima rilasciata nel 1999 e cioè l’HTML 4.01.

Da quel momento in poi il linguaggio HTML è stato evoluto in XHTML

(Extensible HyperText Markup Language) e si tratta dell’HTML riformulato come

linguaggio XML (eXtensible Markup Language), il quale non è altro che un

insieme standard di norme che regolano la sintassi per definire l’organizzazione

dei documenti.

In altre parole, il linguaggio XHTML è l’HTML composto seguendo le regole

fissate in XML. Attualmente l’XHTML è stato rilasciato nella versione 2.0.

Perché si è scelto di integrare l’HTML con l’XML? Perché le regole che

definiscono questo linguaggio sono standard e quindi assicura l’indipendenza

da una particolare piattaforma hardware e software o da uno singolo

produttore.

Anche se il linguaggio HTML si è evoluto in XHTML vi sono delle eccellenti

motivazioni per iniziare a studiare e a lavorare con l’HTML e non l’XHTML:

 Innanzitutto l’HTML sarà utilizzato ancora per diversi anni come

linguaggio primario nello sviluppo delle pagine web.

 Il linguaggio HTML è facile, immediato e permette di iniziare subito a

realizzare documenti destinati al web, mentre diverse nozioni proprie del

linguaggio XHTML richiedono una certa conoscenza dei problemi, che ci si

procura solo con l’esperienza diretta sul campo di lavoro.

 Per conoscere il linguaggio XHTML occorre prima imparare l’HTML. Infatti

la comprensione dell’HTML è difatti il prerequisito fondamentale di ogni

persona che miri a diventare un webmaster.

 Inoltre le differenze tra i due linguaggi non sono poi così nette e spostarsi

dall’uno all’altro non necessita di molta fatica e impegno.

Iniziamo a lavorare….. con l’HTML

Siccome, come abbiamo già anticipato, le pagine web sono formate in gran

parte da testo, per realizzare la struttura di pagine elementari basta un editor

semplice e molto facile da usare, come per esempio il Blocco Note (Notepad) di

Windows, col quale si lavora direttamente sul codice HTML.

Prima di iniziare a lavorare si deve tenere in considerazione alcuni fattori

importanti quali:

 Tutti i siti Web, prima di essere pubblicati, sono realizzati in locale, cioè

sul proprio computer. Solo in un secondo momento, quando si è sicuri

dell’operato fatto, vengono pubblicati in Internet.

 I nomi dei file e le rispettive estensioni conviene scriverli con caratteri

minuscoli.

 Nei nomi dei file è opportuno non inserire degli spazi vuoti e scrivere per

esempio home_page.htm e non home page.htm.

 Conviene lavorare, inserire e salvare tutti i documenti del web in un’unica

cartella, all’interno si possono poi inserire delle sottocartelle per

contenere le immagini, i suoni o i video, in modo da ottenere una

struttura del sito più ordinata.

È chiaro, come poi vedremo in seguito nelle prossime lezioni, che per realizzare

pagine molto complesse, occorrono editor più professionali e completi come

Front Page o Dreamweaver.

La struttura di una pagina HTML

I documenti HTML per poter essere visualizzati correttamente in Internet,

devono contenere le istruzioni (tag) necessarie per fornire al browser le

indicazioni per visualizzare le pagine web.

Come prima riga conviene innanzitutto inserire questa stringa, la quale indica

che si stanno utilizzando le specifiche del Word Wide Web Consortium che

riguardano il codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Dove:

 HTML: indica che il tipo di linguaggio utilizzato è l'HTML

 PUBLIC: indica che il documento è pubblico

 W3C: indica che il documento fa riferimento alle specifiche rilasciate dal

W3C

 DTD HTML 4.01 Transitional//EN: indica che la versione di HTML

utilizzata è la 4.01

Nelle ultime versioni dei browser, l'assenza o la presenza del tag <!DOCTYPE>

determina il modo in cui è visualizzata una pagina web, per cui è opportuno

inserirlo sempre. Si deve anche tenere presente che questa istruzione può

Template

55 modelli pronti per l'uso

Esplodere la tua Rete di Vendita Velocemente e di risparmiare una fortuna in tasse Web Develope

Super Bonus
Corso completo linguaggio html

essere scritta in diverse versioni che possono a loro volta influire sulla

visualizzazione delle pagine. La versione appena descritta risulta comunque

essere una delle più utilizzate.

Inserita la prima riga, è necessario indicare al browser dove comincia e dove

finisce il documento HTML, questo si ottiene con le semplici istruzioni: <html>

e </html>.

Inoltre un file HTML si divide in due parti fondamentali: l’intestazione (head) e

il corpo del documento (body) e, naturalmente, occorre anche indicare al

browser dove iniziano e dove finiscono queste parti con queste istruzioni:

<head> </head> e <body> </body>.

Pertanto un file html contiene sempre, obbligatoriamente queste istruzioni:

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">

<html>

<head>

</head>

<body>

</body>

</html>

Il corpo del documento contiene tutti i componenti che formano la pagina Web:

il testo, le immagini, i suoni, i video……..

Cosa si trova invece nell’intestazione del file HTML?

L’intestazione racchiude delle informazioni non immediatamente comprensibili,

ma che si riferiscono al modo in cui il documento deve essere letto e

interpretato dal browser.

Qui si trova, per esempio, il titolo della pagina, che verrà visualizzato in alto

nello schermo, al di sopra dei vari menù e pulsanti cliccabili del nostro browser.

Per fare questo si usano semplicemente i seguenti tags: <title> </title>.

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">

<html>

<head>

<title> Corso Gestione di Siti Web </title>

</head>

<body>

</body>

</html>

 Esercizio N.1

Ora si conoscono alcuni comandi per realizzare la prima pagina web, proviamo

ad utilizzarli.

Prima di tutto creiamo la cartella dove dobbiamo salvare i nostri documenti, poi

apriamo il Blocco Note e digitiamo i comandi appena visti, magari modificando

il titolo, salviamo poi la pagina con il nome esercizio1.htm.

Apriamo quindi la pagina web appena realizzata con il nostro browser e

vediamo cosa succede.

La pagina risulta completamente vuota (generalmente bianca), ma in alto a

sinistra, accanto all’icona del browser, troviamo il titolo del documento:

- Esercizio N.1 -

Il titolo viene anche utilizzato dai browser in caso di salvataggio della pagina

web, o tramite il comando "Preferiti/Aggiungi a preferiti" (per Internet

Explorer) o "Segnalibri/Aggiungi Pagina nei Segnalibri" (per Mozilla Firefox) per

inserire un collegamento alla pagina visualizzata.

Proviamo ora a scrivere del testo all’interno dei tags <BODY> e </BODY>

come per esempio: Svolgimento dell’Esercizio N.1.

Salviamo nuovamente il file con Blocco Note e aggiorniamo la pagina del nostro

browser, utilizzando il pulsante AGGIORNA con Internet Explorer (o RICARICA

PAGINA CORRENTE con Mozilla Firefox), in modo da ricaricare la pagina web

appena salvata.

Che cosa abbiamo ottenuto? Che il testo scritto all’interno del corpo del

documento (body) è stato visualizzato dal browser! In parole povere abbiamo

realizzato la nostra prima pagina web.

Ora proseguiamo….

Che altro ci può essere nell’intestazione? L’intestazione contiene una sequenza

di dati necessari al nostro browser (e non solo), per leggere correttamente il

file HTML, ma non visualizzati all’interno del documento stesso. Alcuni di questi

come i META TAG o i JAVASCRIPT li esamineremo in altre lezioni.

L’istruzione <BODY>

Abbiamo visto che dentro il corpo del file HTML si trovano il testo e tutte le

altre parti visibili del documento, vediamo ora come definire il colore o

l’immagine di sfondo e i colori del testo, dei link (collegamenti) attivi e visitati.

Questi sono tutti inseriti all’interno della sintassi del tag <BODY>.

 BGCOLOR - ("background color" ovvero "colore di sfondo") Indica il

colore dello sfondo della pagina

La denominazione esatta è: <body bgcolor="red"> oppure

<body bgcolor="#ff0000">

Il colore può essere immesso con il nome in inglese (vedi l’esempio nella

tabella):

Black Yellow Red Maroon

Gray Lime Green Olive

Silver Aqua Blue Navy

White Fuchsia Purple Teal

Oppure inserendo il corrispondente codice esadecimale (Figura3).

1. 00FFFF AZZURRO

2. FF0000 ROSSO

3. 00FF00 VERDE CHIARO

4. FFF000 GIALLO CHIARO

5. 0000FF BLU

6. FFFFFF BIANCO

7. FF00FF VIOLA

8. FFFF00 GIALLO

9. ABCDEF BLU CHIARO

10. 000000 NERO

11. 990000 ROSSO SCURO

12. 009900 VERDE SCURO

13. 000099 BLU SCURO

14. 999900 GIALLO SCURO

15. 990099 PORPORA

16. 009999 ACQUA MARINA

Figura 3 – Esempi di colori in esadecimale

Occorre però fare un po’ di attenzione, perché sono soltanto 216 i colori che

vengono definiti "sicuri" ("web safe").

I cosiddetti colori sicuri sono quelli che vengono visualizzati nello stesso modo

da tutti i browser, questi, infatti, funzionano su diverse piattaforme (Windows,

Linux, Mac,…) e interpretano i colori in modo leggermente diverso.

Più precisamente questo problema è nato in quanto i PC più vecchi (e ormai

obsoleti) possiedono schede video e monitor in grado di visualizzare in modo

corretto solo 256 colori.

Questi colori sono poi utilizzati in modo diverso, come detto, dalle varie

piattafome PC, Linux, Mac e quindi a causa di queste sostanziali differenze

permangono soltanto 216 colori comuni.

Gli unici 216 colori che si vedono sempre e comunque allo stesso modo, sono

quelli composti da coppie di 00, 33, 66, 99, CC e FF

 BACKGROUND - Inserisce un’immagine di sfondo

Questo attributo sostituisce BGCOLOR, inserendo, al posto di un colore fisso,

un’immagine (del tipo GIF o JPEG) come sfondo della nostra pagina web.

Un esempio di sintassi esatta è: <body background="sfondo.gif">

In questo caso l’immagine di sfondo è inserita nella stessa cartella della pagina

web. Con questo comando il browser visualizza l’immagine di sfondo e la

replica su ogni punto dello schermo, riempiendo ogni spazio disponibile della

pagina.

Per questo motivo è indispensabile creare sfondi che non presentino soluzione

di continuità, ma abbiano un aspetto il più possibile uniforme, scegliendo

immagini non invadenti, che non infastidiscano la lettura e che siano il più

possibile coese con il colore del testo inserito

 TEXT - Seleziona il colore del testo di default

Esempio di sintassi: <BODY BACKGROUND="sfondo.gif" TEXT="red">

Normalmente se questo attributo è omesso, il testo inserito nella pagina viene

visualizzato di colore nero per default, inserendolo è possibile modificare il

colore del testo visualizzato dal browser.

Anche in questo caso il colore può essere inserito con il nome in inglese o con

valori esadecimali.

Comunque, come poi vedremo, è possibile modificare parte del testo all’interno

del documento (parole, paragrafi o frasi) con colori differenti da quelli impostati

con il tag TEXT.

 LINK - ALINK - VLINK - Selezionano il colore dei link attivi e visitati

Quando in una pagina web vengono inseriti dei LINK (collegamenti) ad altre

pagine, questi assumono per default il colore blu.

In questo caso è possibile modificare oltre al colore dei link, anche i colori dei

link attivi (Active LINK) e visitati (Visited LINK).

Vediamo ora un esempio di sintassi corretta:

In questo caso il collegamento assumerà per default il colore marrone, quando

cliccato con il mouse assumerà il colore porpora, mentre diventerà rosso

quando il link sarà stato visitato.

 BGPROPERTIES – Rende fisso lo sfondo della pagina

Questo attributo funziona sicuramente con Internet Explorer, mentre con

Mozzilla Firefox no e serve per rendere fisso lo sfondo della pagina, anche

quando ci si sposta in su o in giù con la barra laterale (mentre normalmente lo

sfondo segue lo spostamento).

La sintassi è:

<BODY BACKGROUND="sfondo.gif" BGPROPERTIES="fixed">

Come Inserire Suoni e Musiche di sottofondo

Anche se generalmente non si consiglia di inserire suoni o musiche di

sottofondo durante l’apertura delle pagine web, perché ne rallentano lo

scaricamento, vediamo ora come inserire questi elementi.

Prima di tutto si deve considerare il fatto che occorrono diversi tipi di comandi

per fare funzionare suoni in sottofondo, a seconda del browser che si usa.

 Con Internet Explorer si può utilizzare il comando:

<bgsound src="nomefile.mid" loop=infinite>

Questo commando è compatibile solo con questo browser, mentre l’attributo

LOOP indica quante volte il file sonoro verrà prodotto, inserendo la dicitura

INFINITE il suono verrà riprodotto all’infinito.

 Un comando obsoleto ma ancora funzionante e definito crossbrowser è:

Questa sintassi è compatibile, oltre che con Internet Explorer, con il browser

Netscape, ma anche con Firefox che comunque ha bisogno, per funzionare

correttamente, dell’installazione del plugin Apple Quicktime.

I file musicali che si possono utilizzare in entrambi i casi sono i MIDI, i .WAV e

gli .AU.

<html>

<head>

<title> Esercizio N.1 </title>

</head>

Svolgimento dell'Esercizio N.1

</body>

</html>

<html>

<head>

<title> Esercizio N.1 </title>

</head>

loop=true volume="80" width="0"

height="0">

Svolgimento dell'Esercizio N.1

</body>

</html>

– Come inserire i suoni di sottofondo

con Internet Explorer

– Come inserire i suoni di

sottofondo con il tag Embed

 Per inserire un file audio seguendo le direttive dell'HTML 4.01 occorre

invece utilizzare il tag <object>.

La sintassi corretta è per esempio:

Anche in questo caso Mozzilla Firefox ha bisogno, per funzionare

correttamente, dell’installazione del plugin Apple Quicktime.

Un altro inconveniente nell’utilizzo di file sonori di sottofondo, sta nel fatto che

ogni volta che si cambia pagina, il suono si interrompe ed eventualmente (se

inserito nella nuova pagina) comincia un nuovo suono.

Come Inserire le Immagini

Le immagini come i suoni, i video e altri elementi multimediali delle pagine

web, sono file a parte e devono essere collegati all’interno della pagina nel

punto desiderato.

La sintassi giusta è: <img src="nomeimmagine.gif">

Dove IMG (Image) è il tag per le immagini e SRC (Search) ricerca il percorso

dove si trova l’immagine stessa.

In Internet possono essere pubblicate immagini con estensione .GIf, .JPG e

attualmente anche con estensione .PNG.

Se le immagini, come del resto tutti gli altri elementi esterni alla pagina ma

collegati con essa, si trovano in altre posizioni all’interno del web, si deve

specificarne il percorso.

Se per caso l’immagine si trova nella cartella IMAGES, il percorso risulta:

< img src ="images/nomeimmagine.gif">

Nel caso in cui l’immagine da inserire si trovi in un altro sito web, occorre

inserire tutto il percorso (URL) fino a giungere ad essa.

Esempio:

<img src ="http://www.nomesito.it/images/nomeimmagine.gif”>

Il tag <IMG> utilizza attributi molto utili per definire alcune specifiche

dell’immagine stessa.

 ALT – Testo Alternativo

Sintassi:

< img src ="mare.jpg" alt="Palme">

Questo attributo visualizza il testo scritto (in questo caso Palme) quando il

mouse passa e si sofferma sull’immagine, ed è molto utile in quanto, oltre ad

indicare il tipo di immagine presente nella pagina nei browser impostati per

non visualizzare le immagini, viene utilizzato per la lettura delle immagini dai

browser testuali per non vedenti.

 WIDTH e HEIGHT - Altezza e larghezza dell’immagine

Sintassi:

<img src ="mare.jpg" width=200 height=150 alt="Palme">

Con questo attributo si possono definire le dimensioni dell’immagine

visualizzata, modificandole rispetto a quelle originali.

In questo caso occorre fare molta attenzione in quanto decade la qualità

dell’immagine stessa.

 BORDER

Sintassi:

<img src ="mare.jpg" width=200 height=150 border=2 alt="Palme">

Con BORDER è possibile inserire un bordo attorno all’immagine di grossezza

pari al numero inserito (digitare 0 in questo campo equivale a un’immagine

senza bordo).

 HSPACE e VSPACE

Sintassi:

Questi attributi definiscono la distanza (in pixel) che deve avere l’immagine

rispetto agli altri elementi presenti nella pagina.

Con HSPACE si fissa la distanza dai bordi destro e sinistro dell'immagine, da

parte degli elementi più vicini (testo, immagini,….), mentre con VSPACE si

fissa, invece, la distanza dai bordi superiore e inferiore dell'immagine stessa.

 ALIGN

Sintassi:

<img src="mare.jpg" align=top alt="Palme">

Con questo attributo si definisce la posizione del testo posto a fianco

dell’immagine, che può assumere diverse posizioni, le principali sono:

align=top: allinea il testo in alto.

align=middle: allinea il testo al centro.

align=bottom: allinea il testo in basso.

I Link (Collegamenti ipertestuali)

Le pagine web non sono altro che ipertesti il cui funzionamento è in massima

parte dovuto agli HyperLink (Link) o Collegamenti ipertestuali o Ancoraggi, che

permettono di muoversi all’interno di Internet saltando da pagina a pagina, di

sito in sito.

La sintassi corretta di un link generico è:

<a href="http://www.nomesito.it">Visita il mio sito Web</a>

In questo caso il testo – Visita il mio sito Web – corrisponde al link realizzato

verso il sito www.nomesito.it, assumerà come colore il blu ed inoltre sarà

sottolineato: Visita il mio sito Web.

Il puntatore del mouse passandoci sopra assumerà la caratteristica forma di

mano, cliccandoci sopra si visiterà il sito collegato al link stesso.

Ovviamente un link può anche essere diretto verso una pagina dello stesso sito

di partenza, in questo caso occorre inserire l’esatto percorso della pagina

linkata.

Al tag A HREF si può associare l’attributo TARGET, con il quale è possibile

collegarsi ad un’altra pagina web, aprendo la pagina, per esempio, in una

nuova finestra del browser.

Esempio:

<a href="http://www.nomesito.it" target="_new"> Visita il mio sito

Web </a>

Come per le immagini, anche per i link è possibile

definire un Testo Alternativo inserendo l’attributo

TITLE, visibile quando il puntatore del mouse

passa sopra al link stesso (Figura 5).

Esempio:

<a href="http://www.nomesito.it" title="Il

mio Sito"> Visita il mio Sito </a>

Attraverso i collegamenti ipertestuali è possibile collegare non solo altre pagine

o pagine esterne al sito, ma anche punti specifici dello stesso documento.

Se per esempio si è realizzato un indice all’inizio della pagina e si vuole

raggiungere per ogni voce il corrispondente argomento, è molto utile realizzare

un collegamento di questo tipo che viene indicato con il nome di

SEGNALIBRO.

Se per esempio si vuole raggiungere il testo MARZO 2005, scritto in un punto

determinato della nostra pagina, occorre indicarlo con un Segnalibro:

Esempio:

<a name="marzo 2006"> MARZO 2006</a>

dove name=”marzo 2006” indica appunto il testo che si raggiunge attraverso

un link interno alla pagina.

Ovviamente, ora, si dovrà creare il link che si collega a questo Segnalibro:

<a href="#marzo 2006">Vai al Mese di Marzo 2006</a>

Nel collegamento ipertestuale realizzato, viene inserito il # che indica appunto

un link interno alla pagina, che è indirizzato verso il segnalibro dal nome, in

questo caso, marzo 2006.

Se invece si vuole raggiungere un punto preciso di un documento esterno alla

pagina, la sintassi corretta è per esempio:

<a href="appunti.htm#web">Leggi i miei appunti sul Web</A>

Dove "appunti.htm" è il nome del documento da raggiungere, e "web" il

punto preciso all'interno dello stesso (Segnalibro) che si vuole raggiungere.

Infine i link possono essere collegati, oltre che alle pagine web, anche a

immagini, suoni, video, file multimediali o qualsiasi altro tipo di documento

<a href="immagine1.gif">Guarda la Prima Immagine</a>

<a href="musica.mp3">Ascolta la mia Musica</a>

<a href="appunti.zip">Scarica i Miei Appunti</a>

<a href="manuale.pdf">Leggi il Manuale</a>

La Formattazione del Testo

 I Titoli - h1….h6 –

Il tag H formatta i titoli dando differente

grandezza al testo e può assumere valori che

vanno da H1 (testo più grande) a H6 (testo più

piccolo).

La sintassi corretta è:

<h1>TITOLO 1</h1>

L’immagine qui di fianco (Figura 6) riassume il

funzionamento del tag h.

Figura 6

 Il tag FONT

Questo tag ha il compito di formattare il testo

inserito al suo interno, determinando il tipo di

font (Face), la grandezza (Size) e il colore

(Figura 7).

Esempio:

<font face="verdana" size=4

color=red>Testo

Figura 7

 I tags B, I, U, STRIKE

Questi tags hanno compiti quali: il Grassetto, il Corsivo, il Sottolineato e il

Barrato (Figura 8):

 Testo in grassetto 

Il testo compreso tra questi tags è visualizzato in grassetto (la B sta per

BOLD).

 Testo in corsivo 

Il testo compreso tra questi tags è visualizzato in

corsivo (la I sta per ITALIC)

 Testo sottolineato 

Il testo compreso tra questi tags è visualizzato

sottolineato (la U sta per UNDERLINE).

<strike> Testo barrato </strike>

Con il testo barrato, vengono indicate (ad esempio) le

correzioni.

Figura 8

 I tags e 

Questi comandi servono per inserire il testo come

Apice e Pedice:

Esempio:

E=mc2

H2O

Figura 9

Formattazione dei Paragrafi

 Il tag 

Il tag che indica i paragrafi è  e se non specificato allinea il testo a sinistra

su una nuova riga.

Se invece si vuole allineare il paragrafo su posizioni stabilite si usano i seguenti

attributi:

 Testo del Paragrafo 

Indica un paragrafo con allineamento a sinistra (left).

 Testo del Paragrafo 

Indica un paragrafo con allineamento a destra (right).

 Testo del Paragrafo 

Indica un paragrafo con allineamento al centro (center).