HTML 1. HyperText Markup Language

Transcript

1 HTML 1 HyperText Markup Language

2 Introduzione ad HTML Documenti HTML Tag di markup Formattazione del testo Collegamenti ipertestuali Immagini Tabelle Form in linea (moduli) Tecnologie di Sviluppo per il WEB 2

3 Terminologia HTML Acronimo di HyperText Markup Language È una collezione di stili indipendenti dalla piattaforma che definiscono Ie varie componenti di un documento del World Wide Web È un linguaggio utilizzato per pubblicare documenti ipermediali sul WWW Documento HTML Documento di testo (ASCII) che può essere creato con qualsiasi text-editor (si potrebbe usare vi oppure notepad) Tecnologie di Sviluppo per il WEB 3

4 HyperText Markup Language È un linguaggio di marcatura del testo Non è un linguaggio di programmazione È costituito da un insieme di parole chiave (tag o marcatori) con cui identifica porzioni del documento È nato con l obiettivo di consentire la definizione di documenti ipertestuali distribuiti su una rete di computer HTML viene definito come applicazione di SGML (Standard Generalized Mark Up Language) (non vale per HTML 5) Tecnologie di Sviluppo per il WEB 4

5 Caratteristiche di HTML Con HTML è possibile: Definire la struttura logica di un documento Definire la formattazione tipografica del testo fornendo indicazioni utili per il rendering Definire dei collegamenti ipertestuali tra i vari documenti Definire l interfaccia utente di un applicazione WEB Tecnologie di Sviluppo per il WEB 5

6 Errore di sintassi in HTML L errore di sintassi in HTML non è previsto nell ambito dell elaborazione di un documento Ciò che non è riconducibile ad un tag del linguaggio viene semplicemente ignorato e visualizzato in quanto tale Tecnologie di Sviluppo per il WEB 6

7 Che cosa è un tag In un documento testuale, un elemento è una parte fondamentale della sua struttura Esempi di elementi sono: Tabelle, paragrafi, liste, immagini, Un tag è un mezzo per contrassegnare (marcare) gli elementi di un file testuale che deve essere poi interpretato da un altra entità (e.g, user agent browser) Il tag associa all elemento una determinata caratteristica (strutturale, tipografica, ) Tecnologie di Sviluppo per il WEB 7

8 Ancora sui tag I tag sono costituiti da un elemento di inizio marcatura ed un elemento di fine marcatura I tag HTML sono case insensitive... Gli elementi di inizio marcatura possono essere caratterizzati da attributi a cui è associato un particolare valore: Tecnologie di Sviluppo per il WEB 8

9 Forma di un TAG <tag attributo 1 = valore 1 attributo n = valore n > </TaG> Tecnologie di Sviluppo per il WEB 9

10 Entità o sequenze di escape Per garantire la trasportabilità del documento, HTML utilizza la codifica ASCII standard a 7 bit (caratteri da 1 a 127) Per rappresentare simboli speciali o caratteri nazionali, HTML utilizza alcune entità o sequenza di escape Tali entità vengono utilizzate quando l uso del carattere reale può confondere il browser La sequenza di escape è case sensitive Tecnologie di Sviluppo per il WEB 10

11 Esempi di entità Un' entità ha la seguente forma &Entityname; ( spazio ) < (<) > (>) & (&) " ( ) à (à) Á (Á) è (è) é (è) ( ) Ä (Ä) ü (ü) Tecnologie di Sviluppo per il WEB 11

12 Origini di HTML HTML è derivato da SGML (Standard Generalized Mark Up Language) SGML è uno standard ISO (International Standards Organization) per descrivere linguaggi di formattazione di testi Non vale più per HTML 5 (v. dopo) Intento originale: Fornire un impaginazione generale di documenti che potessero essere riprodotti da un ampia varietà di computer Tecnologie di Sviluppo per il WEB 12

13 Evoluzione di HTML HTML 4.0 (standardizzato nel 1997) Ha introdotto molte caratteristiche rispetto alla precedente versione, ma ha anche deprecato molte delle caratteristiche delle versioni precedenti HTML 4.01 (standardizzato nel 1998) Una ripulitura della versione 4.0 XHTML 1.0 è HTML 4.01 modificato in modo da soddisfare la sintassi XML Gennaio 2008: HTML 5.0 (...fine nel 2012) Tecnologie di Sviluppo per il WEB 13

14 Linguaggio di markup (marcatura) Impaginazione WYSIWYG oppure basata su tag e.g. MS Word vs HTML (LaTeX) Visuale oppure Strutturale e.g. Specificare la grandezza del font oppure il livello di Heading Tecnologie di Sviluppo per il WEB 14

15 Le Pagine Web Consistono di istruzioni HTML Si trovano memorizzate su computer detti server web Sono visibili da computer detti client usando un browser Mozilla Firefox Internet Explorer Opera Chrome Safari Tecnologie di Sviluppo per il WEB 15

16 Il browser 1 Il browser legge un documento scritto in linguaggio HTML interpretandone i comandi e visualizzandolo Quando si clicca su un collegamento ipertestuale, il browser utilizza il protocollo HTTP per inviare ad un server Web una richiesta del nuovo documento Tecnologie di Sviluppo per il WEB 16

17 Il browser 2 Il server Web risponde alla richiesta, utilizzando il protocollo HTTP ed invia il documento richiesto Il browser legge e interpreta l informazione scritta in HTML e la presenta (quasi sempre) nel formato corretto Tecnologie di Sviluppo per il WEB 17

18 Riferimenti Specifica di HTML Indice degli elementi di HTML Indice degli attributi di HTML HTML 5 HTML 4 Tecnologie di Sviluppo per il WEB 18

19 I tag di HTML

20 I tag HTML Indica come l elemento a cui è associato deve essere rappresentato Consiste di una parentesi angolare aperta <, seguita da un nome, e da una parentesi angolare chiusa > Alcuni tag possono essere presenti in coppia ( <H1> e </H1> ). Tag contenitori Tecnologie di Sviluppo per il WEB 20

21 Tag Esistono tag di apertura e tag di chiusura <H1> è un tag di apertura </H1> è un tag di chiusura Per chiudere un tag aggiungi / al tag iniziale Molti tag, ma non tutti, devono avere un tag di chiusura Per i tag che lo ammettono, conviene sempre chiuderli. (per abituarsi ad XML) Tecnologie di Sviluppo per il WEB 21

22 Gli attributi Informazioni aggiuntive associate a tag Aiutano ad associare delle proprietà agli elementi nella formattazione di documenti NomeAttributo = valore <FONT FACE="ARIAL"> esempio </FONT> Molti degli attributi sono deprecati in HTML 4.01, si dovrebbe usare CSS per indicare le caratteristiche del tag Tecnologie di Sviluppo per il WEB 22

23 Struttura di un documento HTML Ogni documento HTML inizia con <HTML> e termina con </HTML> Viene diviso in due parti Intestazione <HEAD> </HEAD> Contiene il titolo del documento ed altre informazioni non visualizzate dal browser Corpo <BODY> </BODY> Contiene il documento vero e proprio Tecnologie di Sviluppo per il WEB 23

24 HEAD e BODY L intestazione (HEAD) fornisce al browser informazioni importanti sul documento che si vuole visualizzare come: titolo della pagina le parole chiave per i motori di ricerca i file esterni da includere (js e/o css) Il corpo (BODY) rappresenta quello che viene poi visualizzato nella pagina: Testo Immagini Link Tabelle Tecnologie di Sviluppo per il WEB 24

25 Un documento HTML minimale <HTML> <HEAD> <TITLE> Un semplice documento HTML </TITLE> </HEAD> <BODY> Questo è un semplicissimo documento HTML </BODY> </HTML> Tecnologie di Sviluppo per il WEB 25

26 Risultato titolo Tecnologie di Sviluppo per il WEB 26

27 Il tag <HTML> Funzione: Delimita un documento HTML completo Attributi: DIR LANG VERSION (deprecato) Tecnologie di Sviluppo per il WEB 27

28 L'attributo DIR Specifica in quale direzione il browser mostra il testo all'interno dell'intero documento: Valore di default ltr left-to-right rtl usato per il cinese, l'ebraico,... Da usare congiuntamente a LANG Tecnologie di Sviluppo per il WEB 28

29 L'attributo lang Specifica la lingua utilizzata in tutto il documento. Idealmente il browser lo usa per rendere migliore il testo per l'utente. Setta l'attributo ad uno standard ISO-639 Tecnologie di Sviluppo per il WEB 29

30 Il tag <HEAD> Contiene informazioni sulla pagina È un tag contenitore Viene subito dopo HTML e prima di BODY Il tag più utilizzato all interno di HEAD è <TITLE> Per dare un titolo ad un documento (quello che compare come intestazione della finestra del browser) Tecnologie di Sviluppo per il WEB 30

31 Nota Ogni tag può essere scritto sia in minuscolo che in maiuscolo Solo le sequenze di escape sono case sensitive Nelle slide useremo sempre le maiuscole per chiarezza, ma... abituatevi a scriverli in minuscolo per abituarvi alla sintassi di XML Tecnologie di Sviluppo per il WEB 31

32 Il tag BASE Specifica la locazione iniziale per le URL relative (non completamente specificate con protocollo e nome dell host) Sintassi <BASE HREF= > HREF indica la stringa da prependere a tutte le URL contenute nel documento Esempio <BASE HREF= > Tecnologie di Sviluppo per il WEB 32

33 Il tag SCRIPT È usato per immergere, all interno del documento del codice in un linguaggio di scripting, in genere Javascript Sintassi <SCRIPT LANGUAGE= TYPE= > </SCRIPT> LANGUAGE specifica il linguaggio TYPE è un MIME Type (e.g., text/javasript) Maggiori dettagli in seguito Tecnologie di Sviluppo per il WEB 33

34 Il tag STYLE È usato per includere, all interno del documento, un foglio di stile (CSS...) Sintassi <STYLE TYPE= >... </STYLE> TYPE è un MIME Type (e.g., text/css) Maggiori dettagli in seguito Tecnologie di Sviluppo per il WEB 34

35 Il tag LINK (sezione HEAD) Fornisce solo delle informazioni su come il documento corrente si relaziona agli altri documenti, specificando: una locazione dell indice documento precedente, quello successivo Utile per motori di ricerca e pre-caricare alcune pagine Permette di includere dei file esterni Contenenti fogli di stile o codice Javascript Stessi attributi delle ancore (v. dopo), ma non hanno alcun effetto... Tecnologie di Sviluppo per il WEB 35

36 Sintassi del tag LINK <LINK REL= HREF= TYPE= > Esempio <LINK HREF= MioStile.css REL= STYLESHEET TYPE= text/css > <LINK HREF= cap14.html REL=next > <LINK REL= ICON" HREF="mozilla-16.png" TYPE="image/png"> URL del documento target. RELazione con il documento target Documento che fa parte di una sequenza di documenti Aggiunge un icona all inizio della barra di navigazione Tecnologie di Sviluppo per il WEB 36

37 Un altro modo per aggiungere icone Creare un file di nome favicon.ico ed inserirlo nella root directory del sito Il file deve essere un icona di Windows con particolari caratteristiche 16x16 oppure 32x32 pixel Massimo 32 colori Esistono programmi (e.g. Michelangelo) per generare file con questo formato o per convertire un immagine da un qualsiasi formato al formato icona (.ico) Tecnologie di Sviluppo per il WEB 37

38 Il tag META Il tag META è utilizzato per conservare informazioni sul documento, caricare o ricaricare una pagina web, includere file di suoni (li vediamo subito) Il tag META è utilizzato dai motori di ricerca per catalogare il documento (S.E.O.) Molte informazioni sono individuate dagli attributi NAME e CONTENT: NAME identifica il nome della proprietà CONTENT identifica il valore della proprietà Tecnologie di Sviluppo per il WEB 38

39 Uso del tag META Sintassi: <META NAME= CONTENT= > Valori comuni usati per NAME author Autore del documento description Breve descrizione del documento keywords Parole che descrivono il documento usate dai motori di ricerca generator Programma che ha generato il documento Tecnologie di Sviluppo per il WEB 39

40 Esempio <META name="author" content= Ambrogio D'Ambrogio"> <META name="description" content= Tecnologie di Sviluppo per il Web"> <META name="keywords" content= HTTP, HTML, CSS, PHP"> <META name= generator" content= L editor vi"> Tecnologie di Sviluppo per il WEB 40

41 Refresh di una pagina Il tag META è usato anche per caricare pagine in maniera automatica. Bisogna sfruttare l attributo HTTP-EQUIV Per caricare la stessa pagina (refresh): <META HTTP-EQUIV="refresh" CONTENT= x"> Entro x secondi il documento sarà ricaricato Per fare il forward verso una nuova pagina: <META HTTP-EQUIV="refresh" CONTENT= x;url=y"> Entro x secondi sarà caricata la pagina y y può essere un file di suoni Tecnologie di Sviluppo per il WEB 41

42 Ancora su HTTP-EQUIV Questo attributo può essere utilizzato in congiunzione con CHARSET per indicare al browser il tipo di testo con cui visualizzare il documento <META HTTP-EQUIV= Content-type" CONTENT= text/html; CHARSET=GB2312"> Tecnologie di Sviluppo per il WEB 42