1 Scoprire e capire HTML Creare semplici pagine WEB Maria Laura Alessandroni.

1

Scoprire e capire HTMLScoprire e capire HTMLScoprire e capire HTMLScoprire e capire HTML

Creare semplici pagine WEBCreare semplici pagine WEBMaria Laura AlessandroniMaria Laura Alessandroni

2

Pagine WEBHTML è il linguaggio di formattazione delle pagine

web

Basato sull’utilizzo di contrassegni

(TAG)

Con Notepad è possibile scrivere pagine web

usando direttamemente l’HTML

I browser (IE, Netscape,…) permettono di visualizzare

le pagine web

Con programmi di web editor è possibile realizzare

pagine web senza conoscere l’HTLM

Utilizzano un’interfaccia

grafica

+ graficaper le immagini

+ graficaper le immagini

Linguaggio diprogrammazione

3

Sito InternetInsieme di pagine web collegate

e relative ad uno stesso argomento o azienda

Per essere visibile sul web deve risiedere su un server web

Se ne può avere uno dedicato e autogestito

Dominio personalizzato (di solito a pagamento)

Il sito è ospitato in uno spazio web di un ISP (internet

Service Provider)

Con un DNS associato

Semplice cartella all’interno di un

dominio predefinito (di solito gratuito)

4

Sviluppo e upload

Il sito si realizza in locale, sul proprio PC

(ambiente di sviluppo)

LOCALE SERVER

Il sito deve risiedere sul server web per

essere visibile sul web

UPLOAD

Si utilizza un programma di FTP (File Transfer Protocol)

È necessario possere un account di

accesso al server web fornito

dall’amministratore

Sono necessari:

Server NameUsernamePassword

5

Introduzione

HTML è l’acronimo di HyperText Markup Language

HyperText significa “ipertesto” e indica un testo che permette di passare automaticamente ad un’altra parte del testo o ad altro file;Markup significa “contrassegno” ed indica che per formattare il testo e dare un aspetto alla pagina si usano particolari contrassegni detti tag;Language significa “linguaggio”, poiché l’Html è un linguaggio riconosciuto da tutti i browser (internet explorer, netscape,…).

6

Principi di base

Tutti gli elementi della pagina devono essere inseriti tra un tag di inizio ed un tag di fine (o chiusura). La sintassi è:

<tag di inizio> testo o elemento multimediale </tag di fine>

Il testo di una pagina HTML, per essere riconosciuto dai browser, deve racchiudere tutti i suoi elementi tra i tag <HTML> e </HTML> .

L’estensione di tali file è htm o html.

7

Principi di base 2

Come una lettera, una pagina HTML contiene sempre

un’intestazione, racchiusa tra i tag <HEAD> e </HEAD>, un corpo, racchiuso tra i tag <BODY> e </BODY>.

Quindi, il codice di una pagina HTML vuota è:<HTML><HEAD></HEAD><BODY></BODY></HTML>

HEAD

BODY

HTML

8

Creazione di una pagina

Creare una cartella MioWeb;Creare un nuovo documento con Notepad;Salvare il documento nella cartella MioWeb, con il nome index.html;Scrivere il codice di una pagina web vuota;Dare un titolo alla pagina (apparirà nella barra del titolo del browser) utilizzando il tag <TITLE>Inserire nel body il testo Ciao Mondo!

9

ATTRIBUTI

I tag possono avere attributi che ne specificano le caratteristiche. Nell’esempio, il tag BODY ha

l’attributo BGCOLOR per specificare il colore di sfondo della pagina<BODY BGCOLOR=“yellow”>

l’attributo BACKGROUND per inserire un’immagine di sfondo della pagina<BODY BACKGROUND =“sfondo.gif”>

10

Esempio

<HTML><HEAD><TITLE>Benvenuti nel mio sito</TITLE></HEAD><BODY

BGCOLOR=“yellow”>Ciao Mondo!</BODY></HTML>

11

TAG <FONT>

Il testo viene visualizzato con il carattere impostato sul browser.Per impostare un tipo di carattere specifico si utilizza il tag <FONT>, che supporta i seguenti attributi:

FACE per il tipo di carattere (arial, verdana, Comic,…)SIZE per la dimensione del carattereCOLOR per il colore del carattere

12

ESEMPIO

…<BODY><FONT FACE=“arial,verdana,tahoma” SIZE=“2”

COLOR=“red”>Viva l’informatica</FONT></BODY>

…

13

TAG IMG

Per inserire un’immagine in una pagina WEB è necessario usare il tag IMG;l’attributo obbligatorio SRC, permette di specificare il path (posizione nel disco rigido) dell’immagine da inserire<IMG SRC=“IMAGES/COLOSSEO.JPG”>

14

Collegamenti ipertestuali

Permette di passare ad un’altra pagina o ad altro fileIl testo o l’immagine su cui fare clic per attivare il collegamento deve essere inserito tra i tag <A></A>Il percorso della pagina o file collegati deve essere inserito nell’attributo HREF<A HREF=“articoli/jazz.html”> Jazz e dintorni (da Musica e Moda) <A>

15

Se il percorso al file è completo si parla di indirizzamento assoluto. Ad esempio

<A HREF = file://documenti/mio_WEB/articoli/jazz.html”> Jazz e dintorni (da Musica e Moda) <A>

È poco utilizzato poiché troppo legato all’organizzazione del proprio disco;

Ci sono problemi se si pubblicano le relative pagine su di un Web Server.

Indirizzamento assoluto

16

Indirizzameto Relativo

Se si vuole inserire nella pagina index.html, un collegamento alla pagina jazz.html che si trova nella sottocartella articoli allora HREF = “articoli/jazz.html”HREF=“testi.html” fa riferimento ad un file nella stessa cartella di index.htmlHREF=“../canto.html” fa riferimento ad un file nella cartella immediatamente superiore a quella in cui si trova index.html

1 Scoprire e capire HTML Creare semplici pagine WEB Maria Laura Alessandroni.

Documents

Transcript of 1 Scoprire e capire HTML Creare semplici pagine WEB Maria Laura Alessandroni.