web programming

 

Introduzione ad HTML
Documenti HTML
Tag di markup
Formattazione del testo
Collegamenti ipertestuali
Immagini
Tabelle
Frame
Form in linea (moduli)

Terminologia
HTML
–Acronimo di HyperText Markup Language
–È una collezione di stili indipendenti dalla
piattaforma che definiscono Ie varie componenti di
un documento del World Wide Web
–È un linguaggio utilizzato per pubblicare
documenti ipermediali sul WWW
Documento HTML
–Documento di testo (ASCII) che può essere creato
con qualsiasi text-editor (si potrebbe usare vi
oppure notepad)

HyperText Markup Language
È un linguaggio di marcatura del testo
–Non è un linguaggio di programmazione
–È costituito da un insieme di parole chiave (tag o
marcatori) con cui identifica porzioni del
documento
–È nato con l’obiettivo di consentire la definizione di
documenti ipertestuali distribuiti su una rete di
computer
HTML viene definito come applicazione di
SGML (Standard Generalized Mark Up
Language)


Caratteristiche di HTML
Con HTML è possibile:
–Definire la struttura logica di un documento
–Definire la formattazione tipografica del
testo fornendo indicazioni utili per il
rendering
–Definire dei collegamenti ipertestuali tra i
vari documenti
–Definire l’interfaccia utente di
un’applicazione WEB

Errore di sintassi in HTML
L’errore di sintassi in HTML non è
previsto nell’ambito dell’elaborazione di
un documento
Ciò che non è riconducibile ad un tag
del linguaggio viene semplicemente
ignorato e visualizzato in quanto tale

Che cosa è un tag

In un documento testuale, un elemento è una
parte fondamentale della sua struttura
Esempi di elementi sono:
–Tabelle, paragrafi, liste, immagini, …
Un tag è un mezzo per contrassegnare
(marcare) gli elementi di un file testuale che
deve essere poi interpretato da un’altra entità
(e.g, user agent – browser)
Il tag associa all’elemento una determinata
caratteristica (strutturale, tipografica, …)

I tag sono costituiti da un elemento di
inizio marcatura ed un elemento di fine
marcatura
I tag HTML sono case insensitive…
Gli elementi di inizio marcatura possono
essere caratterizzati da attributi a cui è
associato un particolare valore:


Forma di un TAG
<tag
attributo1=“valore1”

attributon=“valoren”>
</TaG>

Entità o sequenze di escape
Per garantire la trasportabilità del documento,
HTML utilizza la codifica ASCII standard a 7
bit (caratteri da 1 a 127)
Per rappresentare simboli speciali o caratteri
nazionali, HTML utilizza alcune entità o
sequenza di escape
Tali entità vengono utilizzate quando l’uso del
carattere reale può confondere il browser
La sequenza di escape è case sensitive


Esempi di entità
Un entità ha la seguente forma
&Entityname;
–  (“spazio”)
–< (<) > (>)
–& (&) ” (“)
–à (à) Á (Á)
–è (è) é (è)
–® (®)
–Ä (Ä) ü (ü)

 

 

 


 

 

 

 

I tag di HTML

 

 

 

 


I tag HTML
Indica come l’elemento a cui è
associato deve essere rappresentato
Consiste di una parentesi angolare
aperta <, seguita da un nome, e da una
parentesi angolare chiusa >
Alcuni tag possono essere presenti in
coppia ( <H1> e </H1> ).
–Tag contenitori

 

 

 

 

 

Tag
Esistono tag di apertura e tag di
chiusura
–<H1> è un tag di apertura
–</H1> è un tag di chiusura
Per chiudere un tag aggiungi / al tag
iniziale
Molti tag, ma non tutti, devono avere un
tag di chiusura
–Per, quelli che lo ammettono conviene
metterlo sempre per abituarsi ad XML

Gli attributi
Informazioni aggiuntive associate a tag
Aiutano ad associare delle proprietà agli
elementi nella formattazione di
documenti
NomeAttributo = “ valore ”
<FONT FACE=”ARIAL”> esempio
</FONT>
Molti degli attributi sono deprecati in
HTML 4.01, si dovrebbe usare CSS per
indicare le caratteristiche del tag

Struttura di un documento HTML
Ogni documento HTML inizia con
<HTML> e termina con </HTML>
Viene diviso in due parti
–Intestazione <HEAD> </HEAD>
• Contiene il titolo del documento ed altre
informazioni non visualizzate dal browser
–Corpo <BODY> </BODY>
• Contiene il documento vero e proprio

HEAD e BODY
L’intestazione (HEAD) fornisce al browser
informazioni importanti sul documento che si
vuole visualizzare come:
–titolo della pagina
– le parole chiave per i motori di ricerca
– i file esterni da includere (js e/o css)
Il corpo (BODY) rappresenta quello che viene
poi visualizzato nella pagina:
–Testo
–Immagini
–Link
–Tabelle …

Un documento HTML minimale

<HTML>
<HEAD>
<TITLE>
Un semplice documento HTML </TITLE>
</HEAD>
<BODY>

Questo è un semplicissimo documento HTML
</BODY>
</HTML>


Il tag <HTML>

Funzione:
–Delimita un documento HTML completo
Attributi:
–DIR
–LANG
–VERSION (deprecato)

L’attributo DIR
Specifica in quale direzione il browser
mostra il testo all’interno dell’intero
documento:
–Valore di default ltr left-to-right
–rtl usato per il cinese, l’ebraico, …
Dipende dal contenuto che si mostra
–Potrebbe semplicemente giustificare il testo

L’attributo lang
Specifica la lingua utilizzata in tutto il
documento.
Idealmente il browser lo usa per rendere
migliore il testo per l’utente.
–Setta l’attributo ad uno standard ISO-639
• Si può anche settare un dialetto
–en,fr,de, it,…

Il tag <HEAD>
Contiene informazioni sulla pagina
È un tag contenitore
Viene subito dopo HTML e prima di
BODY
Il tag più utilizzato all’interno di HEAD è
<TITLE>
–Per dare un titolo ad un documento (quello
che compare come intestazione della
finestra del browser) si usa il tag <TITLE>

Nota
Ogni tag può essere scritto sia in
minuscolo che in maiuscolo
Solo le sequenze di escape sono case
sensitive
Nelle slide useremo sempre le
maiuscole per chiarezza, ma…
abituatevi a scriverli in minuscolo per
abituarvi alla sintassi di XML

Il tag BASE
Specifica la locazione iniziale per le URL
relative (non completamente specificate con
protocollo e nome dell’host)
Sintassi
<BASE HREF=“…”>
HREF indica la stringa da prependere a tutte le URL
contenute nel documento
Esempio
<BASE
HREF=“http://www.dia.unisa.it/parente/TSW”>

Il tag SCRIPT
È usato per immergere, all’interno del
documento del codice in un linguaggio di
scripting, in genere Javascript
Sintassi
<SCRIPT LANGUAGE=“…” TYPE=“…” >…</SCRIPT>
LANGUAGE specifica il linguaggio
TYPE è un MIME Type (e.g., text/javasript)
Maggiori dettagli in seguito

Il tag STYLE
È usato per includere, all’interno del
documento, un foglio di stile
Sintassi
<STYLE TYPE=“…” > . . . </STYLE>
TYPE è un MIME Type (e.g., text/css)
Maggiori dettagli in seguito

Il tag LINK
Fornisce solo delle informazioni su come
il documento corrente si relaziona agli
altri documenti, specificando:
–una locazione dell’indice
–documento precedente, quello successivo
–Utile per motori di ricerca e pre-caricare alcune pagine
Permette di includere dei file esterni
–Contenenti fogli di stile o codice Javascript
Possono essere presenti più LINK nella
stessa sezione HEAD

Sintassi del tag LINK
<LINK REL=“…” HREF=“…” TYPE=“…”>
Esempio
<LINK  HREF=“MioStile.css”
REL=“STYLESHEET”
TYPE=“text/css”>
<LINK HREF=”cap14.html”
REL=next >
<LINK REL=“ICON”
HREF=”mozilla-16.png”
TYPE=”image/png”>
Documento che fa parte di
una sequenza di
documenti
Aggiunge un’icona all’inizio
della barra di navigazione


Un altro modo per aggiungere icone
Creare un file di nome favicon.ico ed
inserirlo nella root directory del sito
Il file deve essere un’icona di Windows
con particolari caratteristiche
–16×16 oppure 32×32 pixel
–Massimo 32 colori
Esistono programmi (e.g. Michelangelo)
per generare file con questo formato o
per convertire un’immagine da un
qualsiasi formato al formato icona (.ico)

Il tag META
Il tag META è utilizzato per conservare
informazioni sul documento, caricare o
ricaricare una pagina web, includere file di
suoni (li vediamo subito)
Il tag META è utilizzato dai motori di ricerca
per catalogare il documento
Molte informazioni sono individuate dalla
coppia NAME-CONTENT
–NAME identifica il nome della proprietà
–CONTENT identifica il valore della proprietà


Uso del tag META
Sintassi:
<META NAME=“…” CONTENT=“…” >
Valori comuni usati per NAME
– author
• Autore del documento
– description
• Breve descrizione del documento
– keywords
• Parole che descrivono il documento usate dai motori
di ricerca
– generator
• Programma che ha generato il documento

—————————–FINE LEZIONE 01 HTML—————————–

Tagged with: