Lezioni web Programming – 01 – HTML

Raiden — Fri, 09 May 2008 08:00:03 +0000

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
attributo1=“valore1”
…
attributon=“valoren”>

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”)
–< (<) > (>)
–& (&) ” (“)
–à (à) Á (Á)
–è (è) é (è)
–® (®)
–Ä (Ä) ü (ü)

Tag
Esistono tag di apertura e tag di
chiusura
–

è un tag di apertura
–

è 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 ”
esempio

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
e termina con
Viene diviso in due parti
–Intestazione
• Contiene il titolo del documento ed altre
informazioni non visualizzate dal browser
–Corpo
• 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




Un semplice documento HTML 



Questo è un semplicissimo documento HTML

Il tag
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
Contiene informazioni sulla pagina
È un tag contenitore
Viene subito dopo HTML e prima di
BODY
Il tag più utilizzato all’interno di HEAD è
 –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—————————– </article> <article> <h1>Lezioni web Programming – 00 – HTML</h1> Raiden — Wed, 07 May 2008 15:59:11 +0000 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.. <hr /> <h1>SI INIZIA!</h1> <hr />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——————— </article> <article> <h1>Lezioni di Web Programming</h1> Raiden — Wed, 07 May 2008 11:14:53 +0000 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.. Nota dell’Admin: nessun problema, attendiamo i tuoi articoli </article> </main></body></html>

Mac Village » javascript

Lezioni web Programming – 01 – HTML

I tag di HTML

e

è un tag di apertura
–

Mac Village » javascript

Lezioni web Programming – 01 – HTML

I tag di HTML

e

è un tag di apertura –

è un tag di apertura
–