Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base.

Presentazione sul tema: "Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base."— Transcript della presentazione:

1 Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base

2 Ipertesti Definizioni: – Lettura non lineare [Nelson] – Nodi, Ancore, Link [Lange]

3 Precursori Metatesto : strutture di lettura non lineare Sommario Indice analitico, glossario, dizionario Note a margine e a pié di pagina Riferimenti bibliografici Riferimenti interni

4 Genesi Vannevar Bush: How we may Think Ted Nelson: Literary Machines Tim Berners-Lee: HyperText Markup Language (HTML) Altri linguaggi ipertestuali: HyperCard, KMS, Guide, Trellis, ToolBook...

5 HT : Cos'è un ipertesto Lettura non lineare – Documento => nodo – Sottoinsieme di documento => àncora – Link => àncora àncora

6 HT : visione orizzontale (Docuverso)

7 HT : visione verticale (Struttura dati)

8 ML : Testo e marcatori Quel ramo del lago di Como che volge a mezzogiorno tra due catene non interrotte di monti. Quel ramo del lago di Como che volge a mezzogiorno tra due catene non interrotte di monti

9 ML : Marcatura Structured Generalized Markup Language (SGML) Nasce in ambiente editoriale Testo non formattato ma contrassegnato da coppie di marcatori Document Type Definition (DTD) per ogni categoria di documenti

10 HTML Una particolare Document Type Definition (DTD) Una? Molte: – Strict – Transitional – Frameset Specifica: http://www.w3.org/

11 Strumenti HTML Blocco Note Strumenti specializzati – NoteTab – DreamWeaver – Quanta –... Strumenti di verifica (tidy...)

12 Struttura di un documento/1 Versione (opzionale) Elemento HTML – Header (HEAD) – Corpo (BODY, FRAMESET)

13 Struttura di un documento/2.......

14 Ciao mondo! Ciao Mondo Ciao mondo crudele Ciao!

15 Ciao mondo – vista ad albero

16 Elementi importanti HTML: tutto il documento HEAD: testata (metainformazione) TITLE = titolo BODY = corpo dell'informazione P = paragrafo

17 Esercizio 01-01 Documento HTML tipo ciao mondo Blocco Note File Esercizio01-01.html su dischetto Visualizzare con Explorer Utilizzare tag: HTML, HEAD, TITLE, BODY,P

18 HTML – Princìpi Separazione di forma e contenuto contenuto HTML [Prima parte corso] forma Style Sheets [Seconda parte] VIETATO utilizzare attributi di formattazione! [prima parte del corso]

19 Struttura di titoli H1 – H6 : titoli di livello 1 – 6 Il testo va nei P Curriculum di X Y Dati anagrafici Sono nato il.. a..... Studi Ho conseguito la licenza elementare bla bla Esperienze lavorative Ho lavorato in miniera... Tempo libero Kayak descrizione... Musica....

20 Esercizio 01-02 Documento HTML tipo Curriculum File Esercizio01-02.html su dischetto Visualizzare con Explorer Utilizzare tag: HTML, HEAD, TITLE, BODY, P, H1, H2, H3

21 Entità HTML permette di specificare alcuni caratteri in modo speciale à = à à è é... > < &

22 Esercizio 01-03 Riscrivere l'Esercizio 01-02 utilizzando le entità per le lettere accentate File Esercizio01-03.html su dischetto Visualizzare con Explorer Utilizzare entità: tutte le vocali gravi e la e acuta.

23 Tipologie di elementi Elementi a blocchi : P Elementi in linea : EM, STRONG Non avevo mai preso seriamente in considerazione questa possibilità... Aaaagh!

24 Esercizio 01-04 Riscrivere l'Esercizio 01-03 utilizzando glil elementi in linea EM e STRONG File Esercizio01-04.html su dischetto Visualizzare con Explorer