formato ppt

HTML
Lezione 1
Introduzione – Primo file htm –
Struttura della pagina
Internet, il Web e HTML
• Internet è un insieme di computer connessi tra loro.
• Il World Wide Web è l’insieme di documenti situati
in diversi punti di Internet e scritti in HTML.
• HTML (HyperText Markup Language) è il linguaggio
che consente di formattare il testo, aggiungere
elementi grafici, audio, video e salvare tutto in un
file di testo leggibile da qualsiasi computer.
HyperText - Ipertestuale
• L’inventore del Web (Tim Bernes-Lee, 1989) ha
concepito il Web come un insieme di risorse (file)
collegati tra loro.
• Il collegamento (link) consente di passare da una
pagina ad un’altra pagina o ad un’altra
qualunque risorsa.
• Un insieme di risorse collegate da link si dice
ipertesto.
Markup
• Markup è un termine che ha origine nell'editoria e
deriva dall'unione delle parole mark e up
(annotare, contrassegnare)
• Si riferiscono al modo tradizionale di inserire
annotazioni in un documento nell'ambito della
stampa o del disegno.
• Il linguaggio HTML definisce le istruzioni di markup
che indicano il modo con cui la pagina web deve
essere visualizzata dal programma browser.
Il browser
• Il browser (da to browse = sfogliare) è il software
che visualizza le pagine web.
• I browser più usati: Internet Explorer, Firefox, Opera
e Safari.
• Purtroppo la stessa pagina web appare più o meno in
modo diverso a seconda del browser (e del
computer)
• Il sistema operativo associa al browser (cioè apre nel
browser) i file con estensione .htm o .html
Software visuali
• E’ possibile fare pagine Web (e interi siti) senza
conoscere l’HTML.
• Vi sono infatti molti programmi visuali, che
permettono di scrivere il testo della pagina e di
inserire i vari elementi sulla pagina mediante dei
comandi (menu e pulsanti) e di vedere già come la
pagina verrà tracciata dal browser.
• I programmi professionali più diffusi sono
Macromedia Dreamweaver, Microsoft FrontPage,
Adobe GoLive e sono software anche abbastanza
costosi.
Scrivere HTML
• E’ invece interessante (ed è lo scopo della prima
parte del corso) scrivere le istruzioni HTML, per
riuscirne a capire il funzionamento.
• Se si desidera capire il meccanismo con cui sono
costruite le pagine web, è indispensabile conoscere
il linguaggio HTML
• E’ inoltre utile conoscere anche altri linguaggi
collegati a HTML (stili CSS, programmazione
JavaScript).
I due livelli
File HTML
Il codice sorgente
Pagina visualizzata
dal browser
I file di testo
• I file HTML sono file di testo
• Un file di testo è un file per computer che contiene solo
caratteri di scrittura semplici, senza informazioni sul loro
formato (dimensione, colore, ecc). Di solito rappresenta
un testo leggibile direttamente dagli utenti senza bisogno
di installare programmi appositi.
• Il termine si usa in contrapposizione a file binario, che è
invece un file contenente dati generici non direttamente
leggibili dall'utente.
• I byte dei file di testo rappresentano quindi lettere,
numeri, punteggiatura, spazi e altri normali simboli
stampabili.
Blocco note
• Essendo un file di testo, una pagina Web può
essere scritta con un qualunque editor di testo.
• In Windows è preferibile usare Blocco note
(Start/Programmi/Accessori), che salva solo
come file di testo.
• E’ importante però salvare il file con estensione
.htm e non .txt come viene proposto da Blocco
note.
Il primo file HTML
• Aprire il programma Blocco note
• Scrivere del testo
ad esempio:
Prima pagina HTML. Questa pagina
contiene solo del testo.
• Salvare con un nome, mettendo .htm come estensione
del nome del file.
• Chiudere Blocco note
• In Esplora risorse, andare nella cartella e fare doppio
click sul file.
• Si avvia Internet Explorer, che visualizza il testo nella
pagina.
Visualizzare l’HTML
• Explorer costruisce una pagina, nella quale viene
tracciato il testo scritto nel file
• Non essendo indicato nessun markup, Explorer usa
alcune impostazioni predefinite (font Times New
Roman, colore nero, dimensione 12pt, allineamento a
sinistra, ecc)
• Usare il menu Visualizza/HTML per visualizzare il
sorgente della pagina.
• Exlorer fa avviare Blocco note, nel quale viene
visualizzato il testo che avevamo scritto.
Modificare il sorgente
• Per file che funzionano in locale (e non sono quindi
arrivati al browser dal web) è possibile fare modifiche
al codice HTML e vedere tale modifiche aggiornate
nel browser
• Modificare la frase scritta e salvare il file con le
modifiche
• Vedere tali modifiche nel browser mediante
- il pulsante Aggiorna
oppure
- il tasto funzione F5
oppure
- il menu Visualizza/Aggiorna.
Elementi HTML
• I termine base del markup HTML è detto elemento.
• Gli elementi HTML sono circa 90
• Ma una gran parte di questi è poco utilizzata o superata
da nuove tecnologie (e quindi è sconsigliato utilizzarli).
• Ci sono elementi per i paragrafi, per formattazione del
testo, per le tabelle, per le immagini, per i collegamenti,
per gli elementi multimediali, ecc.
Dichiarazione di un elemento
• Un elemento viene dichiarato (cioè introdotto nella
pagina) generalmente descrivendo tre parti:
– un tag (contrassegno) di apertura (o iniziale), nel
quale compare il nome dell'elemento (che si può
scrivere in maiuscolo o minuscolo), scritto tra '<' e
'>'
– un contenuto, costituito da testo o da altri elementi
– un tag di chiusura (o finale), nel quale ricompare il
nome dell'elemento, scritto tra '</' e '>'; si noti la
slash prima del nome dell'elemento nel tag finale.
• Alcune di queste tre parti potrebbero non esserci.
Esempio: l’elemento grassetto
• L’elemento che grassetta del testo si chiama b (bold,
grassetto).
Per grassettare del testo si usa la sintassi:
<b>testo grassettato</b>
• Viene reso in grassetto solo il testo tra i due tag.
HTML non distingue maiuscole o minuscole nei tag,
ma è preferibile usare lettere minuscole.
Elementi annidati
• Gli elementi possono essere annidati, cioè inseriti l'uno
nell'altro.
• Nell'esempio, l’elemento paragrafo p contiene
l'elemento u (underline, sottolineato) che a sua volta
contiene l’elemento b (bold, grassetto).
<p><u><b>questo testo è reso in un paragrafo
ed è sia grassettato che sottolineato</b></u></p>
Struttura della pagina - 1
• Anche se il primo file HTML conteneva solo del
testo senza nessuna indicazione di codice HTML, il
browser lo ha comunque interpretato e
visualizzato.
• Basta infatti che un file di testo abbia estensione
.htm e il browser lo considera una pagina web.
• HTML non è un linguaggio di programmazione
• La sua sintassi (le regole con le quali si forma il
codice) non sono molto rigorose
• Alcune sue istruzioni possono essere sottointese.
Struttura della pagina - 2
• Però è sempre bene strutturare la pagina in questo
modo:
<html>
indica che è codice HTML
<head>
l’intestazione contiene
…
informazioni sulla pagina
</head>
non visualizzate
<body>
il corpo contiene tutto quello
…
tracciato sulla pagina
</body>
</html>
Una pagina HTML ben formata
<html>
<head>
<title>Pagina web</title>
</head>
<body>
<p>Testo nel primo paragrafo</p>
<p><b>Testo nel secondo paragrafo</b></p>
<p><u>Testo nel terzo paragrafo</u></p>
</body>
</html>
Chiarezza nello scrivere il codice
• Nel codice dell’esempio si è andati a capo ad ogni istruzione
e si è anche inserito un rientro affinché chi legga capisca
l’annidamento degli elementi.
• Questo non è necessario, perché il browser interpreta il
codice anche se questo fosse stato scritto così: (!)
<html><head><title>Pagina web</title></head>
<body><p>Testo nel primo paragrafo</p><p><b>Testo
nel secondo paragrafo</b></p><p><u>Testo nel terzo
paragrafo</u></p></body></html>
• Una persona che però deve scrivere o lavorare sul codice, lo
capisce meglio se è scritto in modo chiaro.