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:  

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———————

Lezioni di Web Programming

On 7 maggio 2008, in Web Programming, by Raiden

 

 

Penso che sia arrivato il momento a questo punto di dare un mio serio contributo.. Se il boss me lo concede proverei ad iniziare delle semplici lezioni con esempi di web programming.. partendo dal banale html passando per css e javascript arrivando fino a php e jsp con supporto per mysql con qualche script di programmazione anche un pò + avanzata..

 

javascript, html...

 

 

Nota dell’Admin: nessun problema, attendiamo i tuoi articoli ;-)

Tagged with: