Progettazione Siti Web: Pagine Web Introduzione e HTML

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Progettazione Siti Web: Pagine Web Introduzione e HTML"

Ada Fusco
7 anni fa
Visualizzazioni

1 Progettazione Siti Web: Pagine Web Introduzione e HTML Dr. Ing. Information Management Systems (IMS) Research Group, Dipartimento di Ingegneria dell Informazione, Università degli Studi di Padova {silvello}@dei.unipd.it Corso di Progettazione Siti Web Laurea Magistrale in Strategie di Comunicazione e Laurea Magistrale in Linguistica -

2 Date d esame Prova di valutazione IPSA@CULTURA: 11 dicembre : Comunicazione composizione dei gruppi: 14 dicembre 2012 Relazione sulla Qualità dei siti Web : 15 gennaio 2013 I appello d esame: 12 febbraio ore 9.00 Discussione progetti di gruppo: 19 febbraio ore 9.30 : II appello d esame: 26 febbraio ore

3 Indice Caratteristiche di base dell HTML Elementi di base dell HTML Realizzazione di documenti HTML 3

4 HTML Un linguaggio di mark-up è un linguaggio artificiale che viene definito e realizzato per permettere di specificare la struttura e il formato di documenti digitali, questi obiettivi si ottengono utilizzando combinazioni apposite dello stesso alfabeto di caratteri che viene utilizzato per scrivere il contenuto dei documenti Queste combinazione apposite prendono il nome di tag L insieme dei tag di un linguaggio di mark-up permette di identificare i componenti logici di un documento e di collegarli alla definizione sintattica della struttura del documento HTML è un linguaggio di mark-up che è stato definito per presentare contenuti di tipo testuale nel Web, quindi lo scopo del linguaggio è quello di presentare all utente il contenuto dei documenti. 4

Cascading Style Sheets: Introduzione Una pagina Web è formata da: Struttura Contenuto Presentazione image from http://www.

5 Cascading Style Sheets: Introduzione Una pagina Web è formata da: Struttura Contenuto Presentazione image from Inizialmente le pagine Web erano state pensate sopratutto per i contenuti, senza prestare troppa attenzione alla presentazione Progettazioni siti Web LMSGC mutuato da LMLIN - a.a. 2011/12 5

6 HTML e CSS: Introduzione Separazione presentazione e contenuto: HTML + CSS Progettazioni siti Web LMSGC mutuato da LMLIN - a.a. 2011/12 6

7 HTML e CSS: Introduzione Separazione presentazione e contenuto: HTML + CSS Contenuto (HTML)) Presentazione (CSS) Progettazioni siti Web LMSGC mutuato da LMLIN - a.a. 2011/12 6

8 HTML e CSS: Introduzione Separazione presentazione e contenuto: HTML + CSS Contenuto (HTML)) Presentazione (CSS) HTML + CSS images from: Progettazioni siti Web LMSGC mutuato da LMLIN - a.a. 2011/12 6

9 HTML e CSS: Introduzione Separazione presentazione e contenuto: HTML + CSS Progettazioni siti Web LMSGC mutuato da LMLIN - a.a. 2011/12 6

10 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 Progettazioni siti Web LMSGC mutuato da LMLIN - a.a. 2011/12 7

11 Il canvas 8

Elementi di una pagina Web Una pagina Web è un insieme di elementi disposti uno di fianco all altro nello spazio (canvas) messo a disposizione dal browser per la loro visualizzazione.

12 Elementi di una pagina Web Una pagina Web è un insieme di elementi disposti uno di fianco all altro nello spazio (canvas) messo a disposizione dal browser per la loro visualizzazione. Questi elementi galleggiano nello spazio a disposizione cercando di occuparlo al meglio. image from Progettazioni siti Web LMSGC mutuato da LMLIN - a.a. 2011/12 9

13 Struttura della pagina HTML o pagina Web <HTML> intestazione (head) <HEAD> </HEAD> <TITLE> titolo </TITLE> <BODY> corpo (body) corpo (body) => appare sul canvas </BODY> </HTML> 10

14 Struttura della pagina HTML o pagina Web Una pagina Web preparata utilizzando HTML è un documento testuale strutturato in due parti principali: intestazione (head) e corpo (body). <HTML> intestazione (head) <HEAD> </HEAD> <TITLE> titolo </TITLE> <BODY> corpo (body) corpo (body) => appare sul canvas </BODY> </HTML> 10

15 Struttura della pagina HTML o pagina Web <HTML> intestazione (head) <HEAD> </HEAD> <TITLE> titolo </TITLE> <BODY> corpo (body) corpo (body) => appare sul canvas </BODY> </HTML> 10

16 Concetto di documento testuale e di formato 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 un documento LaTex Documento in un formato per videoscrittura -> Documento prodotto da un software di word processing concetto di formato, eventualmente di formato proprietario -> what you see is what you get (WYSIWYG) 11

17 Alcuni editor... (esempi) Microsoft Windows: Notepad++ (presente in laboratorio LAIF) MAC OSX: Sublime Text 2 Frontpage o Dreamweaver non sono editor 12

18 HTML è un linguaggio di markup HTML permette di definire quali sono le regole che devono essere rispettate dagli elementi che compongono un documento Un elemento HTML di solito è composto da tre parti: tag (o etichetta) di apertura contenuto 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 13

19 Elementi Aspetto di un file HTML: è composto da testo ASCII, 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. 14

20 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> Vedere esempio1.html 15

21 Realizzazione di un semplice documento HTML - 2 Un elemento di HEAD è l elemento TITLE: <TITLE> Cinema e dintorni </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) 16

22 Realizzazione di un semplice documento HTML - 3 Elemento BODY: <HTML> <HEAD> <TITLE> Cinema e dintorni </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 Vedere esempio2.html 17

23 Elemento titolo <Hx> Elemento titolo di primo livello, denominato H1, va all interno di BODY: <HTML> <HEAD> <TITLE>Cinema e dintorni </TITLE> </HEAD> < BODY> <H1>Home page di Cinema e dintorni</h1> < /BODY> </HTML> HTML prevede altri livelli di titolo: H2, H3, H4, H5, H6; più il numero è elevato minore è l importanza del titolo Vedere esempio3.html, esempio4.html ed esempio5.html 18

24 Elemento paragrafo: <P> Elemento paragrafo di testo, denominato P, ovviamente va all interno di BODY: <HTML> <HEAD> <TITLE> Cinema e dintorni </TITLE> </HEAD> < BODY> <H1>Biografia di Woody Allen</H1> <P>Genio umoristico americano ma amato anche e soprattutto in Europa per l'omaggio stilistico a grandi nomi del cinema come Bergman, Fellini e Lubitsch...</P> < /BODY> </HTML> </P> può essere omesso. Vedere esempio6.html 19

25 Elementi EM e STRONG Gli elementi STRONG e EM per mettere in evidenza del testo rispetto a quello circostante: <html> <head> <title>cinema e dintorni</title> </head> <BODY> <H1>Biografia di Woody Allen</H1> <P>Genio umoristico americano ma amato anche e soprattutto in <em>europa</em> per l'omaggio stilistico a grandi nomi del cinema come <strong>bergman, Fellini e Lubitsch</strong>...</P> </html> </BODY> Vedere esempio7.html 20

26 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  il testo non viene presentato nel canvas Vedere esempio8.html 21

27 Elementi lista 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 Vedere esempio9.html, esempio10.html, esempio11.html 22

28 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 Vedere esempio12.html 23

Documenti analoghi

Progettazione Siti Web: Introduzione al corso

Progettazione Siti Web: Introduzione al corso Dr. Ing. Information Management Systems (IMS) Research Group, Dipartimento di Ingegneria dell Informazione, Università degli Studi di Padova {silvello}@dei.unipd.it