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—————————–
Un bell’articolo sul numero di maggio di Macworld, elenca una serie molto corposa di utility o abbellimenti nascosti che possiamo attivare dal Terminale.
Ne elenco alcuni tra i più carini a mio gusto e che ho attivato sul mio Mac Pro:
Percorso completo nel Finder:
Leopard ha introdotto nel Finder una funzione molto utile: la barra del percorso. Per attivarla selezioniamo l’apposita voce di menu (Vista > Mostra la barra del percorso): nella parte inferiore del finder apparirà una riga con, visivamente, il percorso che serve per arrivare alla cartella che stiamo esplorando. Questo percorso è attivo, nel senso che trascinando un qualsiasi elemento in una qualunque cartella del percorso, lo si sposterà in tale cartella e facendo doppio click su un elemento del percorso lo si visualizzerà nella stessa finestra del Finder.
Avere la barra del percorso in basso non è sempre comodo. Possiamo spostarla nella parte superiore della finestra del Finder dal Terminale eseguendo il seguente comando:
defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES
Infine dobbiamo riavviare il Finder per vedere la modifica. Per rilanciarlo facciamo Control-click sulla sua icona del Dock mentre teniamo premuto il tasto Opzione: dal menu che appare selezioniamo la voce Riapri.
Lo stack Elementi recenti:
Leopard mostra di suo lo stack Download e lo stack Documenti ma ha inserito anche, nascosto, lo stack Elementi recenti. Per attivarlo dobbiamo eseguire il seguente comando dal Terminale:
defaults write com.apple.dock persistent-others -array-add ‘{tile-data={list-type=1;}; tile-type=’recents-tile’;}’
Infine dobbiamo riavviare il Dock e lo possiamo fare sempre dal terminale digitando killall Dock.
Facendo Control-click sul nuovo stack, è possibile scegliere se visualizzare le Applicazioni recenti, i Documenti recenti, i Server recenti, i Volumi Preferiti o i Preferiti.
Effetto mouseover negli stack:
Apple ha incluso in Leopard un effetto “mouseover” che evidenzia, se uno stack è in modalità di visualizzazione a griglia, l’elemento dello stack su cui stiamo passando il mouse. Una funzione divertente che però è impossibile da avviare senza Terminale. Apriamolo e digitiamo:
defaults write com.apple.dock mouse-over-hilte-stack -boolean YES
Infine dobbiamo riavviare il Dock e lo possiamo fare sempre dal terminale digitando killall Dock.
Se vogliamo tornare alla configurazione precedente basta ripetere la procedura scrivendo NO al posto di YES.
Più ricerche:
In Leopard, nella colonna a sinistra delle finestre del Finder, c’è una sezione Cerca che comprende alcune ricerche preimpostate. Cliccando su una di esse verranno elencati, ad esempio, tutti i file aperti nella giornata o tutte le immagini presenti sul disco. In Leopard sono però preimpostate anche altre ricerche che non sono visualizzate in questa sezione. Per trovarle andiamo in /Sistema/Libreria/CoreServices e facciamo Control-click su Finder.app. Si aprirà un menu dal quale dobbiamo scegliere Mostra contenuto pacchetto e poi, nella finestra che si aprirà, navigare a /Contents/Resources/Canned-Searches. Qui troviamo ricerche come Tutta la musica, Tutte le applicazioni, Tutte le presentazioni, Tutti i documenti PDF. Per importarne una nella colonna sinistra del Finder, per prima cosa trasciniamola in una cartella (viene copiata) in una posizione dove poi non dobbiamo cancellarla (quindi non consiglio la scrivania come dicono su Macworld). Nel Finder a questo punto facciamo Control-click su di essa e selezioniamo Mostra contenuto pacchetto. Nella prima cartella che si apre troviamo il file search.savedSearch: diamogli un nuovo nome (mantenendo l’estensione .savedSearch) e trasciniamolo nella barra laterale del Finder.
Dicono anche che si può scrivere una nuova e personalissima ricerca da noi ma non ho ancora provato…
Dove sono gli elementi di login:
Nella sezione Account delle Preferenze di sistema c’è il pannello Elementi login nel quale sono elencati i moduli che si avviano al momento del nostro ingresso in Mac OS X. Alcuni li abbiamo impostati noi, altri no. Per sapere dove sono, sul disco, è sufficiente fare Control-click su ciascuno di essi e selezioniamo il comando Rivela nel Finder dal menu contestuale.
Commenta sul forum
Come dicevamo il Mac non è esente da problemi. Capita (raramente diciamolo) che alcune applicazioni, il sistema in generale, faccia cose strane, apparentemente causate da nulla.
In questi casi, se la riparazione dei permessi non sortisse alcun effetto, ci viene in aiuto Yasu.
L’utilizzo anche in questo caso è molto sempice. Buona visione!
La Riparazione dei permessi dell’Applicazione Utility Disco di Mac Os X è la funzione di manutenzione per eccellenza del nostro sistema operativo.
Come vedrete il suo funzionamento è molto semplice….
E’ con piacere ed onore che inizio qui, il corso a tappe di webprogramming.
Il corso affronterà vari argomenti partendo dall’ html, css, javascript, passando al php e jsp, dando alcuni accenni di Servlet e dando le basi di SQL gettando un occhio in particolare sul dialetto di Mysql nostro fedele database, che ci accompagnerà come supporto nel nostro percorso..
SI INIZIA!
Il World Wide Web – 1
Una possibile soluzione alla proliferazione di
differenti protocolli utilizzati su Internet
Origini
–Tim Berners-Lee propose il WEB al CERN (Conseil
Européen pour la Recherche Nucléaire – Consiglio Europeo
per la Ricerca Nucleare) nel 1989
Sito Web
–Insieme coordinato di pagine, relative ad uno
stesso tema, che risiedono tipicamente su uno
stesso server HTTP
Il Web è l’insieme di siti web interconnessi
con hyperlink
Scopo del WWW secondo T.B.L.
–Permettere a studiosi di avere accesso a molti
database di lavori scientifici attraverso i propri
computer. Studiosi da tutto il mondo potrebbero
ricercare e recuperare documenti su un qualsiasi
numero di server.
Ipertesto
Un ipertesto è formato da un insieme di
documenti, collegati tra loro tramite riferimenti
ipertestuali, denominati link.
Questi documenti possono essere costituiti
da testo, immagini, suono, ecc. A differenza del normale testo, che deve
essere letto sequenzialmente, i link
permettono a chi naviga l’ipertesto, di
accedere alle sue componenti in un ordine
non rigido, ma seguendo un percorso a
piacere tra quelli possibili al suo interno.
Terminologia
Quale parola usare?
–Documento, pagina, risorsa?
• Le più usate sono documento e pagina
Forma del documento:
–Ipertesto contenente collegamenti per permettere
una lettura non sequenziale del materiale testuale
–Quando un documento contiene non solo materiale
testuale parliamo di documento ipermediale
Quale parola significa cosa? WEB – Internet
–Il WEB usa uno dei protocolli, HTTP, che “viaggia”
su Internet
WEB vs. Internet
Il WEB non è Internet ed Internet non è il WEB
Internet
– Un insieme di computer ed altri dispositivi collegati da
un’infrastruttura che gli permette di comunicare tra di loro
attraverso TCP/IP
– Internet era utile prima che il WEB venisse sviluppato ed è
ancora utile senza di esso. Tuttavia, la maggior parte degli
utenti di Internet sono utenti del WEB
WEB
– Un insieme di software e protocolli che sono stati installati
sulla maggior parte, se non su tutti, i computer collegati ad
Internet
– Il WEB è un insieme di documenti, collegati tra di loro
attraverso link, a cui si può accedere tramite un browser
Mission del W3C
Il World Wide Web Consortium (W3C)
sviluppa tecnologie interoperabili
(specifiche, linee guida, software, tool)
per portare il WEB al suo pieno
potenziale come forum di informazione,
commercio e comunicazione.
http://www.w3.org
WEB browser
I browser sono client
–Iniziano loro il collegamento, i server rispondono
anche se a volte i server stessi aspettano risposte
dai client (e.g., compilazione form)
–La maggior parte delle richieste, usando HTTP,
sono per documenti esistenti, ma alcune richieste
sono per l’esecuzione di programmi sul server che
restituiscono come risposta un documento
WEB server
UnServer Webè un programma che fornisce
documenti ai browser che ne fanno richiesta.
I documenti possono essere statici o
dinamici. I documenti dinamici sono costruiti
da programmi che sono “memorizzati” sul
server.
Ad esempio, un browser invia al server un
modulo compilato e richiede ad un
programma, che risiede “dal lato del server”
(server-side), di elaborare i dati specificati nel
modulo
WEB server
Apache
• http://httpd.apache.org
• Gratuito, distribuito con Linux
• Disponibile anche sotto Windows, OS/2, Unix,
…
ISS (Internet Information Server)
• http://www.microsoft.com
• A pagamento, Microsoft
Apache Tomcat (per brevi test, sconsigliato)
Netscape-Enterprise
IBM HTTP SERVER
Jigsaw
– reference server di W3C
URI – URL – URN
Per poter individuare ed accedere documenti
(risorse) su WEB è necessario un
meccanismo per poterli identificare e
localizzare
Tutti i protocolli su Internet sono dotati di un
meccanismo per individuare e localizzare le
risorse attraverso nomi ed indirizzi.
–DNS
I nomi o indirizzi usati da un protocollo sono
validi solo nell’ambito delle risorse accessibili
mediante il protocollo stesso: tale ambito
viene definito spazio dei nomi.
URI
Attraverso il WEB (o meglio un browser) si
può accedere a risorse collocate in spazi
diversi
È necessario creare uno spazio universale
dei nomi e degli indirizzi
Tale spazio universale permette di
identificare ogni risorsa astraendo dai
requisiti tecnici di ogni singolo protocollo.
Un membro dell’insieme di nomi o indirizzi
in tale spazio universale viene definito
Universal Resource Identifier (URI).
Anatomia di un URI
Ogni URI è divisa in due parti principali
separate da : (due punti)
– schema : path
• uno specificatore di schema (schema)
• una stringa di identificazione dell’oggetto (path),
–La forma di path è determinata dallo schema (a sua
volta funzione del protocollo cui è associato)
L’unica forma di URI attualmente in uso è
l’Uniform Resource Locator (URL)
Alcuni URI si riferiscono ad una locazione
all’interno di una risorsa
Questi URI finiscono con un “#” seguito da un
identificatore di frammento (chiamato
“fragment identifier”)
http://www.macvillage.it/pagina.html#php <– Esempio –>
URL
Un’URL indica la collocazione reale di
un oggetto accessibile mediante uno dei
protocolli attualmente in uso su Internet
Una URN, a differenza di una URL,
esprime il nome di un oggetto in un dato
spazio dei nomi indipendentemente
dalla sua locazione fisica.
URN
Per risolvere una serie di problemi legati
alla natura delle URL
–la risorsa è non disponibile
• Gli è stato cambiato nome
–il contenuto del documento è cambiato
• La homepage di un quotidiano on-line cambia
ogni fissato intervallo di tempo
da alcuni anni è in fase di sviluppo una
nuova forma di URI, denominata
Universal Resource Name (URN)
URN vs URL
La URL fornisce un ottimo sistema di indirizzamento
ma un pessimo schema di assegnazione di nomi
Indirizzamento ed identificazione delle risorse in una
unica tecnologia crea problemi anche in altri settori:
– Sistemi di information retrieval
– Citazione, riferimento e catalogazione bibliografica dei
documenti presenti in rete
– Sistemi di versioning
• tenere traccia dell’evoluzione dinamica di un documento,
conservando le versioni successive
– gestione del mirroring
• creazione e l’allineamento di molteplici esemplari di un
medesimo documento.
———————————————————–
Come avrete notato questa è una introduzione a quello che verrà.. il suo scopo
è quella di spiegare un pò la genesi e la base di quello che studieremo..
———————————————————–
———————FINE INTRODUZIONE———————
