HTML
HyperText Markup
Language
(linguaggio a marcatori per ipertesto)
Testi e Ipertesti
• Testi: …. Beh …
• Ipertesti: testi con collegamenti (links)
• possono anche contenere
– immagini (?)
– suoni
– filmati
• e diventare Multimediali
HTML
• Linguaggio descrittivo per le pagine web
• Differente da Pascal, Basic, C ed altri
linguaggi di programmazione
• Marcatori (tags) identificati da “<XYZ…>”
• descrivono il formato della pagina
HTML e HTTP
• Il PROTOCOLLO HTTP (Hyper Text Transfer
Protocol)
• Fa comunicare il Browser con i “web servers” e
trasferisce i documenti HTML (e gli oggetti a cui
essi fanno riferimento)
• Un URL è l’indirizzo Internet di un oggetto
• Normalmente un URL (Uniform Resource Locator)
è del tipo:
“http://www.dominio.ext/racco1/racco2/nomefile.tip
o
• ad es: http://www.yahoo.com/index.htm
Protocollo
• Insieme di regole per lo scambio di
informazioni fra entità
• Metodo concordato per lo svolgimento delle
operazioni.
• Dal greco: proto-kolon = prima pagina,
intestazione
• Insieme di regole stabilite tra due parti per
riuscire a comunicare in modo compatibile.
bruno:
bruno:e.g.
e.g.==
“example
“examplegiven”
given”
URLs
• Assoluti:
http://www.nomedominio.tipo/raccoglitore/
sottoraccoglitore/nomefile.tipo
• Relativi:
– nomefile.tipo e.g. pagina2.html
– tools/realpresenter.htm (giù di un livello)
– ../suoni/test/thx.mp3
(su-giù-giù)
Oggetti e peso
•
•
•
•
•
•
•
Immagini .gif, .jpg, .bmp .png…
suoni .mp3 .wav .mid …
video .mpg .flv .avi .rm…
animazioni flash .swf
ogni oggetto ha un peso (in KB)
e un indirizzo (URL)
Il peso complessivo della pagina è la somma
dei pesi degli oggetti contenuti
bruno:
bruno:Internet
Internet
Information
InformationServer
Server
Il web server
• È un elaboratore che ospita
alcuni domini e siti e contiene le
pagine, i documenti, gli oggetti
etc ad essi relativi
• Un programma WEB server
(come IIS della Microsoft o
Apache, Open Source) “serve” i
documenti ai clients (browsers)
• Il web server comunica con i
browsers tramite il protocollo
Http.
La pagina WEB
• Al contrario delle pagine di giornale, di
libro etc non ha dimensioni predefinite
• luuungaaaa
• largaaaaa
• a piacere?
• Contiene codice HTML
cip:
cip:I Itags
tagssono
sono
solitamente
solitamenteaperti
apertiee
poi
poichiusi
chiusi
HTML: struttura di pagina
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
HTML: il titolo
•
•
•
•
•
Appare nella cornice del browser
<title> ecco la mia prima pagina </title>
fondamentale!
I commenti, utilissimi per l’autore.
<!-- questo è un commento -->
HTML: i caratteri (fonts)
•
•
•
•
•
•
•
•
Tipo font
<font face="Arial">testo in Arial</font>
Attributi (bold, underline, italic…apice pedice strike )
<b>testo in grassetto</b>
<i>testo in corsivo</i> corsivo
Dimensioni
colore
<font color="blue">testo blu</font>
• ovvero:
• <font color="#0000FF">testo blu</font>
HTML: i caratteri II
•
•
•
•
•
•
Dimensioni
size="5"
colore
<font color="blue">testo blu</font>
ovvero:
<font color="#0000FF">testo blu</font>
HTML: links
• I links (collegamenti) rendono Ipertestuale
l’Internet
• Esterni al dominio/sito (sempre assoluti)
• Interni al dominio/sito (relativi)
• interni alla pagina
–
–
–
–
<a href="#verbale">Capacità verbale</a>
salta a:
<a name="verbale"></a>
si possono linkare testi o immagini
LINKS: esempi
• Da: http://www.html.it/guida/html_22.htm
• <a href=“pagina2.html”> clicca qui </a>
• Le risorse per webmaster sono su <a
href="http://www.html.it/">HTML.IT</a>
• <a href=“foto2.jpg”> vedi l’immagine </a>
• Hotlinking ovvero furto di banda
HTML: tags vari
• <p>: paragrafo
• <p align="left">testo</p>
• <br> salto riga
cip:
cip:Copiare
Copiarealla
alla
grande
grande
HTML: Il Browser
• Il Browser (Internet Explorer, Netscape,
Mozilla, Firefox, Chrome, Opera…) opera
sul client (spesso un PC) e visualizza le
pagine HTML eseguendo i comandi (in
chiaro) che esse contengono
• In caso di documenti in altri formati (PDF,
DOC, ... viene lanciato il lettore appropriato
• Il linguaggio è interpretato
(*)
(*)Dipende
Dipendedal
dalS.O.
S.O.del
delserver
server
(windows
(windowsooUnix)
Unix)
Pagine HTML
• nomepagina.htm o nomepagina.html
• Maiuscole e minuscole (ahime!) spesso
contano: (*) “Bruno.html” diverso da
“bruno.html” diverso da “bruno.htm”
• la pagina iniziale di un sito solitamente si
chiama “index.html” o “index.htm”
Oggetti “nella pagina”
•
•
•
•
Ogni oggetto è un file sul server
gif, jpg, flash…
PDF, DOC, PPT etc etc
Il browser scarica la pagina html da
internet, la legge e poi richiede tutti gli
oggetti “contenuti”
• (in parallelo)
Immagini
• Sfondi (piastrelle, listoni, immaginone) (attenti
ai colori killer e alla leggibilità) cerca
“background library” su google
• pulsanti etc. “button library”
• gif animate “animated gif library”
autocostruite con “easy gif animator”
(shareware 30 colpi)
• icone
Pulsanti
Autocostruiti?
Animati?
Easy Gif
animator
Shareware 30
“usi”
Errori
Erroritipici
tipici
Attenzione!!
• Tutti i nomi e tipi di oggetti in minuscolo!!!
• Abbreviare i nomi troppo lunghi o
complicati
• Senza spazi (eliminare)
• tipi files .jpg o .jpeg.
• tutti i files nello stesso raccoglitore (per siti
molto semplici)
Attenzione!! (2)
• Indirizzi e links relativi!!!
• Assoluti solo se esterni al sito
• Esempio di link relativo
• <a href=”pagina2.html”> clicca qui </a>
• Assoluto:
• <a href=”http://www.yahoo.it/index.html”>
clicca qui </a>
bruno:MIDI=Musical
bruno:MIDI=MusicalInstruments
InstrumentsDigital
Digital
Interface
Interface
Suoni su internet: pagine musicali
•
•
•
•
•
•
Formati audio
WAV (pesante)
MP3 (attenzione al copyright!)
WMA (Windows Media)
MIDI (solo note, niente voce)
Audio Streaming Realaudio (WOW!!!!!)
cip:
cip:e.g.=
e.g.=Example
Example
Given
Given
HTML: risorse su internet
•
•
•
•
•
www.Html.it
e.g. http://www.html.it/guida/html_26.htm
(per le immagini)
http://webspace.tiscali.it/guidahtml/
mille altri
FTP e upload
• A parte
Altre risorse
•
•
•
•
Gif animate su server
\\Server\scientifico\cdsoft\gif
MIDI su server
\\Server\scientifico\cdsoft\suoni\midi
Meta tags
• Da fare
Esercizi: I
• Utilizziamo il browser, e l’editor di testo
• Crea un raccoglitore col nome del progetto
• Con l’editor di testo scrivi una frase
qualsiasi (“ciao a tutti”) senza tags!
tags e salva
il documento di testo come “index.html”
• Aprilo con il browser (drag and drop)
• cosa succede? (il browser è di bocca
buona!)
Esercizi: II
• Inserisci il primo tag <html> e </html>
Esercizi III
Esercizi: IV
• Varia il colore e le dimensioni e gli attributi
del testo
• inserisci il tag <title> </title>
• Dove appare il titolo nel browser?
cip:
cip:l’MP3
l’MP3viene
viene
accettato
accettatodal
daltuo
tuo
provider?
provider?
•
•
•
•
•
Esercizi: IV
Inserisci oggetti nella pagina:
immagini Gif
immagini GIF animate
immagini Jpeg
suoni (midi, wav, mp3 …)
Esercizi: V
• Inserisci collegamenti nella pagina
• <A href=“altrapagina.html”>frase </A>
• “A” sta per “Anchor”, il tag “A href” è il
tag più importante in assoluto poiché senza
di esso non esisterebbero collegamenti fra le
pagine (Link) è l’ipertestualità
scomparirebbe.
Esercizi: VI
• Giochiamo con gli extra
• cosa fa questo “target=blank” nel tag “<a
href”?
• <a href=”url” target="blank">frase</a>
Esercizi: VII
• Cosa fà il qualificatore alt=“frase” nel tag
img?
• <IMG align=middle alt=”che bella foto!"
height=240 src=”foto.jpg" width=320>
Esercizio finale
• Prepara due-tre pagine “personali”con:
• immagine di sfondo, suoni
• almeno una occorrenza di ognuno dei tags
della dispensa
• link da pagina1 a pagina2 e viceversa
• Almeno due links esterni
• almeno una immagine di ogni tipo, inserire i
metadati nell’immagine
Ancora..
•
•
•
•
•
Inserire almeno un commento <!commento>
Fare upload su tripod
segnalare l’esistenza a google
Inviati un contenitore ZIP con il progetto su Gmail
Quanto sono stati compressi in percentuale i vari
files usati?
• Invia l’url a [email protected]
Attenzione a:
•
•
•
•
Peso oggetti
urls e links assoluti/relativi
maiuscole/minuscole
htm/html
