Prof. Pagani Corrado HTML

Транскрипт

1 Prof. Pagani Corrado HTML

2 IPERTESTI E MULTIMEDIALITÀ Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave sensibili (link). Può essere visto come una rete; i documenti ne costituiscono i nodi. La caratteristica principale di un ipertesto è che la lettura può svolgersi in maniera non lineare: qualsiasi documento della rete può essere "il successivo", in base alla scelta del lettore di quale parola chiave usare come collegamento. Con l'inserimento di contenuti da media diversi (multimedia) all'interno di un ipertesto, si è cominciato a utilizzare il termine ipermedia, per evidenziare appunto che il sistema non è composto di solo testo.

3 SITI STATICI E DINAMICI Un sito web statico utilizza solo il linguaggio html (più eventuali css e linguaggi di script) senza interazioni con basi di dati. Per apportare modifiche occorre essere a conoscenza del linguaggio HTML e delle tecniche di FTP. Non sono possibili inoltre interazioni significative tra l utente finale e le pagine web; l utente può semplicemente consultare le informazioni presentate che appaiono uguali a tutti gli utenti. Un sito web dinamico interagisce con una base di dati che contiene le informazioni da presentare. Occorrerà utilizzare un vero linguaggio di programmazione che permetta l interazione con una base di dati (ASP.NET, PHP, JSP ). In questo caso le informazioni che andranno a completare la pagina web non ne sono contenute direttamente all interno, ma vengono richiamate dalla base di dati in tempo reale in seguito ad una richiesta dell utente.

4 WEB 2.0 Si indica come Web 2.0 l'insieme di tutte quelle applicazioni (paradigma del web dinamico) online che permettono un elevato livello di interazione tra il sito web e l'utente ottenute tipicamente attraverso opportune tecniche di programmazione Web e utilizzo di DataBase Esempi blog, forum, i wiki, le piattaforme di condivisione di media (Flickr, YouTube, Vimeo), i social network Tutto ciò è in contrapposizione al Web statico o Web 1.0 in cui le pagine appaiono uguali per tutti gli utenti

5 WEB 3.0? Web semantico trasformazione del Web in un ambiente dove i documenti pubblicati sono associati ad informazioni e dati (metadati) che ne specificano il contesto semantico in un formato adatto all'interrogazione e l'interpretazione (es. tramite motori di ricerca) e all'elaborazione automatica Realtà aumentata Sovrapposizione di una realtà virtuale (digitale che prescinde i 5 sensi) partendo dalla realtà fisica GPS SCAN Google Glass

6 LINGUAGGIO HTML L HTML è il linguaggio con cui si può indicare come i vari elementi vanno disposti in una pagina Web. HTML è l acronimo di HyperText Markup Language ( Linguaggio di contrassegno per gli Ipertesti ) e non è un linguaggio di programmazione, si tratta invece di un linguaggio di markup, che permette di indicare come disporre gli elementi all interno di una pagina: le indicazioni vengono date attraverso appositi elementi detti tag.

7 BROWSER Il Browser è il programma che si usa per navigare nel Web e svolge principalmente due compiti: scarica i vari file che si trovano su un server remoto e che fanno riferimento a un certo indirizzo (URL) legge i documenti scritti in html e visualizza la pagina nel modo graficamente desiderato disponendo i vari files associati a quel documento (ad esempio le immagini, o i filmati) secondo le indicazioni del codice html

8 TANTI BROWSER È importante sin dall inizio acquisire una mentalità multi-browser, infatti uno dei compiti più difficili è quello di riuscire a far vedere correttamente il proprio sito con tutti i browser più utilizzati. Il linguaggio HTML è uno standard con una precisa sintassi, tuttavia i browser riescono a tollerare bene anche qualche errore. Gli effetti negativi di un errore di scrittura del markup può essere quello di non ottenere la visualizzazione della pagina esattamente come la desideriamo, o al peggio di perdere la visualizzazione di alcune porzioni di pagina

9 TAG I tag sono composti da un elemento di apertura che si indica tra parentesi angolari (<TAG>), e un elemento di chiusura che ingloba la / (</TAG>). Il contenuto va inserito tra l apertura e la chiusura del tag medesimo, secondo questa forma <TAG attributi>contenuto</tag> la struttura di un attributo è: attributo="valore"

10 STRUTTURA DELLA PAGINA HTML Un documento HTML è diviso in due sezioni: Testa (<head>) Contiene informazioni non immediatamente visibili sulla pagina, ma che riguardano il modo in cui il documento deve essere letto e interpretato. In questa sezione troveremo, ad esempio, i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, Corpo (<body>) il contenuto visibile del documento Testo, immagini, streaming di filmati etc

11 INDENTAZIONE E buona norma utilizzare dei caratteri di tabulazione (il tasto tab) per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento. Apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab. In alternativa, se il contenuto del tag è limitato, è possibile inserire il tag sulla stessa riga

12 VISUALIZZA SORGENTE HTML

13 ISPEZIONA ELEMENTO

14 PRIMI TAG

15 COMMENTI Una prassi importante per rendere il nostro codice più leggibile è quella di inserire dei commenti nei punti più significativi: si tratta di indicazioni significative per chi edita il file, ma invisibili per chi naviga utilizzando il browser. La sintassi è la seguente: <!-- questo è un commento -->

16 NUOVA PAGINA E MODALITÀ DI LAVORO Le pagine HTML create sono normali file di testo con estensione.html (o. htm). Per editare le pagine e sufficiente qualsiasi editor di testo come blocco note o notepad++ Per avere un anteprima immediata di quanto realizzato occorre aprire il file nel browser e riaggiornare la pagina Attenti alla cache!

17

18 TAG SENZA APERTURA E CHIUSURA

19 ATTRIBUTI DEI TAG

20 LINK ASSOLUTI E RELATIVI

21 ESEMPI DI LINK ASSOLUTI

22 ESEMPI DI LINK RELATIVI