Progettazione di siti web (ING-INF/05) LMSGC, mutuato da LMLIN e Sc. Stat. a. a

Transcript

1 Indice: Università degli Studi di Padova Facoltà di Lettere e Filosofia Progettazione di siti web (ING-INF/05) LMSGC, mutuato da LMLIN e Sc. Stat. a. a Prof. Maristella Agosti Ing. Marco Dussin Introduzione al corso 2 Marco Dussin: informazioni utili

2 Copyright Image from New Yorker cartoon by Peter Steiner. Low resolution image from Docente Docente: Ing. Marco Dussin Laboratorio di Basi di Dati, Dipartimento di Ingegneria dell Informazione (DEI), terzo piano DEI/G. Sito Web con materiale utile: Specificare nell oggetto: [LABPSW] 2

3 Indice: Università degli Studi di Padova Facoltà di Lettere e Filosofia Progettazione di siti web (ING-INF/05) LMSGC, mutuato da LMLIN e Sc. Stat. a. a Prof. Maristella Agosti Ing. Marco Dussin Le basi di HTML Caratteristiche di base di HTML Elementi di base di HTML Realizzazione di documenti HTML Riferimento bibliografico: Håkon Wium Lie, Bert Bos. Cascading Style Sheets. Guida pratica. Pearson Education Italia, 2006.

4 Image from La Pagina HTML o pagina Web Una pagina Web è formata fondamentalmente da due elementi: i contenuti (strutturati) veri e propri e la presentazione ovvero l'aspetto attraverso il quale i contenuti sono mostrati all'utente. Inizialmente le pagine Web erano state pensate soprattutto per i contenuti, con pochissime possibilità di personalizzazione della presentazione. E di questo tipo di pagine che ci occuperemo in questa prima parte del corso. 4

5 HTML: struttura invece di grafica HTML permette di concentrarsi sulla struttura piuttosto che sulla rappresentazione grafica del documento I programmi di DeskTop Publishing (DTP), invece, mettono in gran evidenza la presentazione di un documento, non la sua struttura Comunque va tenuto presente che la distinzione fra struttura e presentazione non può essere sempre netta 5

6 HTML: linguaggio di pubblico dominio Documento testuale software: editor Software di interpretazione di un documento testuale es. un browser Web per un documento HTML Software di compilazione di un documento testuale es. un compilatore per il file sorgente di un programma scritto, ad esempio, in linguaggio di programmazione Java Documento in un formato per videoscrittura Documento prodotto da un software di word processing what you see is what you get (WYSIWYG) Concetto di formato, pubblico o proprietario, chiuso o aperto. 6

7 Il browser Il browser è un programma che consente di visualizzare i contenuti di pagine web e l interazione con i loro componenti. Esso interpreta l HTML e ne fornisce una possibile visualizzazione, che varia a seconda del browser utilizzato. Gli elementi vengono visualizzati in uno spazio del browser chiamato canvas. Esistono numerosi browser, supportati da diverse piattaforme progettati per diversi dispositivi. 7

8 HTML: linguaggio di markup HTML permette di definire quali sono i meccanismi di rappresentazione (struttura, semantica e presentazione) di un documento testuale: per questo è un linguaggio di markup (marcatura). Un elemento HTML di solito è composto da tre parti: 1. tag (o etichetta) di apertura 2. contenuto 3. tag di chiusura Struttura di un elemento HTML: <Nome tag> testo influenzato dal tag </Nome tag> I simboli < > (parentesi angolari) sono i caratteri che delimitano i tag HTML 8

9 HTML: descrizione generale HTML sta per HyperText Markup Language (linguaggio di descrizione per ipertesti). Si usa per controllare la struttura del contenuto di documenti ipertestuali resi disponibili nel World Wide Web. E un linguaggio di markup di pubblico dominio, sviluppato e mantenuto dal W3C (World Wide Web Consortium, e standardizzato ISO. Attualmente sia il W3C sia un gruppo di lavoro esterno ad esso, il WHATWG ( stanno lavorando alla definizione della specifica numero 5. Noi faremo tuttavia sempre riferimento, quando non altrimenti specificato, alla specifica 4.01, in uso sin dal

10 Costruire una pagina HTML o pagina Web Una pagina Web preparata utilizzando HTML è un documento testuale strutturato in tre parti principali: definizione del tipo di documento (DTD), intestazione (head o header), corpo (body). 10

11 Elementi Aspetto di un file HTML: è composto da testo UTF-8, che contiene o incorpora elementi HTML che sono composti, come si è visto, di due tipi di oggetti: 1. Testo 2. TAG HTML, usualmente di apertura e chiusura. Gli elementi più utilizzati in HTML sono circa 30. Di seguito si fanno alcuni esempi utilizzando gli elementi HTML più utili e comuni e si rinvia a file HTML d esempio.

12 Document Type Definition (DTD) Definisce la specifica che stiamo utilizzando, e quindi gli elementi leciti all interno di tale specifica Definisce la struttura di ogni elemento, nel numero, ordine, possibilità di contenere altri elementi e obbligatorietà Dichiara attributi e tipi di valore per ogni elemento Permette di controllare la correttezza del documento (validazione).

13 Realizzazione di un semplice documento HTML - 1 Elemento HTML: <HTML> </HTML> questo è l elemento che serve ad indicare l inizio (<HTML>) e la fine (</HTML>) di un documento HTML qualsiasi sia il contenuto fra questi tag è contenuto dell elemento HTML All interno dell elemento HTML vi sono due altri elementi di livello inferiore HEAD e BODY: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> 13

14 Realizzazione di un semplice documento HTML - 2 Un elemento di HEAD è l elemento TITLE: <TITLE> La home page di Bach </TITLE> questo è l elemento che serve ad indicare l inizio e la fine del titolo di un documento HTML il contenuto di TITLE viene generalmente visualizzato nella barra del titolo, l area più in alto della finestra (area browser); subito sotto c è l area dei pulsanti del browser e più in basso ancora l area dove viene rappresentato il documento o area di canvas (tela) 14

15 Realizzazione di un semplice documento HTML - 3 Elemento BODY: <HTML> <HEAD> <TITLE> La home page di Bach </TITLE> </HEAD> < BODY> < /BODY> </HTML> l elemento BODY va messo all interno dell elemento HTML il contenuto dell elemento HTML consiste ora di due elementi l elemento BODY da solo non crea nessun contenuto nella finestra (canvas) del browser, occorre inserire nell elemento BODY del contenuto 15

16 Realizzazione di un semplice documento HTML - 4 Elemento titolo di primo livello, denominato H1, va all interno di BODY: <HTML> <HEAD> <TITLE> La home page di Bach </TITLE> </HEAD> < BODY> <H1>La home page di Bach</H1> < /BODY> </HTML> HTML prevede altri livelli di titolo: H2, H3, H4, H5, H6; più il numero è elevato minore è l importanza del titolo 16

17 Realizzazione di un semplice documento HTML - 5 Elemento paragrafo di testo, denominato P, ovviamente va all interno di BODY: <HTML> <HEAD> <TITLE> La home page di Bach </TITLE> </HEAD> < BODY> <H1>La home page di Bach</H1> <P>Johann Sebastian Bach è stato un compositore prolifico.</p> < /BODY> </HTML> </P> può essere omesso. 17

18 Elementi STRONG e EM Gli elementi STRONG e EM per mettere in evidenza del testo rispetto a quello circostante: <HTML> <HEAD> <TITLE> La home page di Bach </TITLE> </HEAD> < BODY> <H1>La home page di Bach</H1> <P>Johann Sebastian Bach è stato un <STRONG> compositore prolifico </STRONG>.</P> <P>Johann Sebastian Bach è stato un <EM>compositore prolifico</em>. </P> < /BODY> </HTML> File: html-es06.html 18

19 Elementi: posizioni Gli elementi possono appartenere a tre gruppi diversi: block-level Es: P, H1 inline Es: STRONG, EM invisibili Es: elemento che permette di scrivere commenti <!-- testo del commento --> il testo non viene presentato nel canvas File: html-es07.html 19

20 Elementi liste Tre diversi elementi per creare delle liste (elenchi): OL - ordered list - lista ordinata UL - unordered list - lista non ordinata DL - definition list - elenco di definizioni File: html-es08.html 20

21 Elementi vuoti HR e BR Elementi che non hanno uno specifico contenuto ma che creano un qualche effetto: HR - linea di separazione o filetto BR - interpunzione di riga File: html-es09.html 21

22 Elemento per preservare una formattazione Elemento che permette di preservare la formattazione di un testo: <PRE> testo </PRE> File: html-es10.html 22

23 Collegamento ipertestuale Una possibilità offerta dagli ipertesti è quella di permettere ad un documento di essere collegato con altri documenti. Un collegamento permette di collegare una risorsa Web ad un altra risorsa Web. Un collegamento ha due parti, chiamate ancore, e una direzione. Un collegamento inizia dall ancora sorgente e fa riferimento all ancora destinazione, che può essere una qualsiasi risorsa Web. ancora sorgente ancora destinazione Per creare un collegamento è necessario utilizzare le ancore. Tramite esse si associa ad una parte del documento un documento esterno al documento stesso. La sintassi d uso di un ancora è: <A opzioni> testo </A> In questo modo la parte di testo testo viene collegata al documento (o alla parte di documento) specificato da opzioni.

24 Collegamento ipertestuale: elemento A Esempio (URL relativo): Johann Sebastian <A HREF="Bach.html">Bach</A> è stato un compositore prolifico. File: html-es11.html Esempio (URL assoluto): <A HREF= n) >BWV988</A> <A HREF=" <A HREF=" File: html-es12.html

25 Elemento IMG (IMG è l abbreviazione di image): <IMG SRC= nome-file ALT= descrizione immagine > SRC specifica la localizzazione dell immagine ALT ha lo scopo di permettere di inserire una descrizione testuale alternativa Esempio utilizzando il file bach.jpg presente nella cartella immagini: <IMG SRC="immagini/bach.jpg" ALT="Ritratto di J.S. Bach"> File: html-es13.html Aggiungere immagini Dove: img significa image, cioè immagine; src significa source, cioè origine; alt indica alternative text

26 Elemento BLOCKQUOTE È un elemento che permette di inserire del testo all interno di altro testo mettendo in evidenza che il nuovo testo è, appunto, al suo interno, tipo citazione. Questa tecnica si chiama annidamento. File: html-es14.html Elementi annidati File: html-es15.html con una immagine all interno dei blocchi