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

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

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

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...

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

HT : visione orizzontale (Docuverso)

HT : visione verticale (Struttura dati)

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

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

HTML Una particolare Document Type Definition (DTD) Una? Molte: – Strict – Transitional – Frameset Specifica:

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

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

Struttura di un documento/

Ciao mondo! Ciao Mondo Ciao mondo crudele Ciao!

Ciao mondo – vista ad albero

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

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

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]

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....

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

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

Esercizio Riscrivere l'Esercizio 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.

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

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