Scoprire e capire HTML

1
Scoprire e capire HTML

• Creare semplici pagine WEB
• Maria Laura Alessandroni

2
Pagine WEB
Linguaggio di programmazione
HTML è il linguaggio di formattazione delle
pagine web
Utilizzano uninterfaccia grafica
Basato sullutilizzo di contrassegni (TAG)
Con Notepad è possibile scrivere pagine web
usando direttamemente lHTML
Con programmi di web editor è possibile
realizzare pagine web senza conoscere lHTLM
grafica per le immagini
grafica per le immagini
I browser (IE, Netscape,) permettono di
visualizzare le pagine web
3
Sito Internet
Insieme 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
Il sito è ospitato in uno spazio web di un ISP
(internet Service Provider)
Con un DNS associato
Semplice cartella allinterno di un dominio
predefinito (di solito gratuito)
Dominio personalizzato (di solito a pagamento)
4
Sviluppo e upload
UPLOAD
SERVER
LOCALE
Il sito si realizza in locale, sul proprio PC
(ambiente di sviluppo)
Il sito deve risiedere sul server web per essere
visibile sul web
Si utilizza un programma di FTP (File Transfer
Protocol)
Sono necessari Server Name Username Password
È necessario possere un account di accesso al
server web fornito dallamministratore
5
Introduzione

• HTML è lacronimo di HyperText Markup Language
• HyperText significa ipertesto e indica un testo
  che permette di passare automaticamente ad
  unaltra 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é lHtml è
  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 è
• lttag di iniziogt testo o elemento multimediale
  lt/tag di finegt
• Il testo di una pagina HTML, per essere
  riconosciuto dai browser, deve racchiudere tutti
  i suoi elementi tra i tag ltHTMLgt e lt/HTMLgt .
• Lestensione di tali file è htm o html.

7
Principi di base 2

• Come una lettera, una pagina HTML contiene sempre
• unintestazione, racchiusa tra i tag ltHEADgt e
  lt/HEADgt,
• un corpo, racchiuso tra i tag ltBODYgt e lt/BODYgt.
• Quindi, il codice di una pagina HTML vuota è
• ltHTMLgt
• ltHEADgtlt/HEADgt
• ltBODYgtlt/BODYgt
• lt/HTMLgt

HTML
HEAD
BODY
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
  ltTITLEgt
• Inserire nel body il testo Ciao Mondo!

9
ATTRIBUTI

• I tag possono avere attributi che ne specificano
  le caratteristiche.
• Nellesempio, il tag BODY ha
• lattributo BGCOLOR per specificare il colore di
  sfondo della pagina
• ltBODY BGCOLORyellowgt
• lattributo BACKGROUND per inserire unimmagine
  di sfondo della pagina
• ltBODY BACKGROUND sfondo.gifgt

10
Esempio

• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• Benvenuti nel mio sito
• lt/TITLEgt
• lt/HEADgt
• ltBODY BGCOLORyellowgt
• Ciao Mondo!
• lt/BODYgt
• lt/HTMLgt

11
TAG ltFONTgt

• Il testo viene visualizzato con il carattere
  impostato sul browser.
• Per impostare un tipo di carattere specifico si
  utilizza il tag ltFONTgt, che supporta i seguenti
  attributi
• FACE per il tipo di carattere (arial, verdana,
  Comic,)
• SIZE per la dimensione del carattere
• COLOR per il colore del carattere

12
ESEMPIO

• ltBODYgt
• ltFONT FACEarial,verdana,tahoma SIZE2
  COLORredgt
• Viva linformatica
• lt/FONTgt
• lt/BODYgt

13
TAG IMG

• Per inserire unimmagine in una pagina WEB è
  necessario usare il tag IMG
• lattributo obbligatorio SRC, permette di
  specificare il path (posizione nel disco rigido)
  dellimmagine da inserire
• ltIMG SRCIMAGES/COLOSSEO.JPGgt

14
Collegamenti ipertestuali

• Permette di passare ad unaltra pagina o ad altro
  file
• Il testo o limmagine su cui fare clic per
  attivare il collegamento deve essere inserito tra
  i tag ltAgtlt/Agt
• Il percorso della pagina o file collegati deve
  essere inserito nellattributo HREF
• ltA HREFarticoli/jazz.htmlgt Jazz e dintorni (da
  Musica e Moda) ltAgt

15
Indirizzamento assoluto

• Se il percorso al file è completo si parla di
  indirizzamento assoluto. Ad esempio
• ltA HREF file//documenti/mio_WEB/articoli/jazz.
  htmlgt Jazz e dintorni (da Musica e Moda) ltAgt
• È poco utilizzato poiché troppo legato
  allorganizzazione del proprio disco
• Ci sono problemi se si pubblicano le relative
  pagine su di un Web Server.

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
• HREFtesti.html fa riferimento ad un file
  nella stessa cartella di index.html
• HREF../canto.html fa riferimento ad un file
  nella cartella immediatamente superiore a quella
  in cui si trova index.html