andrea spinelli linguaggio html lezione 1: ipertesti precursori linguaggi di marcatura ted nelson...
TRANSCRIPT
![Page 1: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/1.jpg)
Andrea SpinelliLinguaggio HTML
Lezione 1:Ipertesti
PrecursoriLinguaggi di marcatura
Ted NelsonTim Berners-LeeStrutture di base
![Page 2: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/2.jpg)
Ipertesti
● Definizioni:
– “Lettura non lineare” [Nelson]
– “Nodi, Ancore, Link” [Lange]
![Page 3: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/3.jpg)
Precursori
● Metatesto : strutture di lettura non lineare● Sommario● Indice analitico, glossario, dizionario● Note a margine e a pié di pagina● Riferimenti bibliografici● Riferimenti interni
![Page 4: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/4.jpg)
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 ...
![Page 5: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/5.jpg)
HT : Cos'è un ipertesto
● Lettura non lineare
– Documento => nodo
– Sottoinsieme di documento => àncora
– Link => àncora àncora
![Page 6: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/6.jpg)
HT : visione orizzontale(Docuverso)
![Page 7: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/7.jpg)
HT : visione verticale(Struttura dati)
Link
Àncore
NodiQuel ramodel lago diComo, chevolge a
Quel ramodel lago diComo, chevolge a
![Page 8: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/8.jpg)
ML : Testo e marcatori
Quel ramo del lago di Como che volge a mezzogiorno tra due catene non interrotte di monti.
<P>Quel ramo del <GEO>lago di Como</GEO> che volge a <DIR>mezzogiorno</DIR> tra due catene non interrotte di monti</P>
![Page 9: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/9.jpg)
ML : Marcatura
● Structured Generalized Markup Language (SGML)
● Nasce in ambiente editoriale● Testo non formattato ma contrassegnato da
coppie di marcatori <XX> </XX>● Document Type Definition (DTD) per ogni
categoria di documenti
![Page 10: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/10.jpg)
HTML
● Una particolare Document Type Definition (DTD)
● Una? Molte:
– Strict
– Transitional
– Frameset● Specifica: http://www.w3.org/
![Page 11: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/11.jpg)
Strumenti HTML
● Blocco Note● Strumenti specializzati
– NoteTab
– DreamWeaver
– Quanta
– ... ● Strumenti di verifica (tidy...)
![Page 12: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/12.jpg)
Struttura di un documento/1
● Versione (opzionale)● Elemento HTML
– Header (HEAD)
– Corpo (BODY, FRAMESET)
![Page 13: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/13.jpg)
Struttura di un documento/2
<HEAD> ... </HEAD>
<HTML>
<BODY>....</BODY>
</HTML>
![Page 14: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/14.jpg)
Ciao mondo!
<HTML>
<HEAD>
<title>Ciao Mondo</title>
</HEAD>
<BODY>
<p>Ciao mondo crudele</p>
<p>Ciao!</p>
</BODY>
</HTML>
![Page 15: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/15.jpg)
Ciao mondo – vista ad albero
HTML
HEAD
TITLE
BODY
P
P
![Page 16: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/16.jpg)
Elementi importanti
● HTML: tutto il documento● HEAD: testata (metainformazione)● TITLE = titolo ● BODY = corpo dell'informazione● P = paragrafo
![Page 17: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/17.jpg)
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
![Page 18: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/18.jpg)
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]
![Page 19: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/19.jpg)
Struttura di titoli● H1 – H6 : titoli di livello 1 – 6● Il testo va nei P
<body> <h1>Curriculum di X Y</h1> <h2>Dati anagrafici</h2> <p>Sono nato il.. a.. ...</p> <h2>Studi</h2> <p>Ho conseguito la licenza elementare bla bla</p> <h2>Esperienze lavorative</h2> <p>Ho lavorato in miniera...<p> <h2>Tempo libero</h2> <h3>Kayak</h3> <p>descrizione...</p> <h3>Musica</h3><p>....</p></body>
![Page 20: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/20.jpg)
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
![Page 21: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/21.jpg)
Entità
● HTML permette di specificare alcuni caratteri in modo speciale
● à = à● à è é ...● > < &
![Page 22: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/22.jpg)
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.
![Page 23: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/23.jpg)
Tipologie di elementi
● Elementi a blocchi : P● Elementi in linea : EM, STRONG
<p>Non avevo mai preso <em>seriamente</em> in considerazione questa possibilità... <strong>Aaaagh!</strong></p>
![Page 24: Andrea Spinelli Linguaggio HTML Lezione 1: Ipertesti Precursori Linguaggi di marcatura Ted Nelson Tim Berners-Lee Strutture di base](https://reader036.vdocumenti.com/reader036/viewer/2022062418/5542eb65497959361e8d0f5f/html5/thumbnails/24.jpg)
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