andrea spinelli linguaggio html lezione 1: ipertesti precursori linguaggi di marcatura ted nelson...
TRANSCRIPT
Andrea SpinelliLinguaggio HTML
Lezione 1:Ipertesti
PrecursoriLinguaggi di marcatura
Ted NelsonTim Berners-LeeStrutture 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)
Link
Àncore
NodiQuel ramodel lago diComo, chevolge a
Quel ramodel lago diComo, chevolge a
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>
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
HTML
● Una particolare Document Type Definition (DTD)
● Una? Molte:
– Strict
– Transitional
– Frameset● Specifica: http://www.w3.org/
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/2
<HEAD> ... </HEAD>
<HTML>
<BODY>....</BODY>
</HTML>
Ciao mondo!
<HTML>
<HEAD>
<title>Ciao Mondo</title>
</HEAD>
<BODY>
<p>Ciao mondo crudele</p>
<p>Ciao!</p>
</BODY>
</HTML>
Ciao mondo – vista ad albero
HTML
HEAD
TITLE
BODY
P
P
Elementi importanti
● HTML: tutto il documento● HEAD: testata (metainformazione)● TITLE = titolo ● BODY = corpo dell'informazione● P = paragrafo
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
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
<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>
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
Entità
● HTML permette di specificare alcuni caratteri in modo speciale
● à = à● à è é ...● > < &
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.
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>
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