Il linguaggio HTML. Marco Porta - CIM: Web Design & Technologies

Transcript

1 Il linguaggio HTML 1

2 Il linguaggio HTML Origini e caratteristiche dell'html... HTML = Hyper Text Markup Language è un linguaggio di markup, e in quanto tale non richiede alcuna conoscenza della programmazione - Dà una descrizione del contenuto del documento Deriva da SGML (Standard Generalized Markup Language) un metalinguaggio per creare linguaggi Un documento HTML è un file di testo contenente la codifica di una pagina web quindi una pagina web può essere creata utilizzando un editor di testo qualunque 2

3 Il linguaggio HTML... origini e caratteristiche dell HTML Il linguaggio HTML è stato creato con l obiettivo di essere device independent il suo scopo, fin dall inizio, era quello di descrivere la struttura di un documento, non l aspetto (compito lasciato al browser) Ma il World Wide Web si è diffuso molto rapidamente... dalle comunità scientifiche e militari si è esteso ad altri ambiti (ad esempio, quello commerciale...) Il linguaggio è stato quindi via via modificato per includere anche una descrizione della formattazione contro l intento originale... 3

4 Il linguaggio HTML I tag Specificano gli elementi strutturali in un documento HTML definiscono la tipologia delle porzioni di contenuto che includono, le connessioni con altri documenti, le immagini o gli elementi multimediali da visualizzare,... Sono racchiusi tra parentesi angolari es.: <body>, <h1>,... In genere, si usano a coppie ogni tag di apertura ha associato un corrispondente tag di chiusura (es.: <body>... </body>, <head>... </head>,...) 4

5 Il linguaggio HTML Un introduzione all HTML L ultima versione standardizzata è la 5 (2014) la penultima versione, la 4.01, è diventata una raccomandazione ufficiale nel lontano 1999 le raccomandazioni ufficiali si possono trovare sul sito del World Wide Web Consortium (l organo internazionale che si occupa della standardizzazione di tutto ciò che riguarda il Web) Sul Web (e non solo) è possibile reperire una quantità enorme di materiale riguardante l'html e gli altri linguaggi del Web 5

6 Struttura generale di un documento HTML <html> <head> <title>... </title>... </head> <body> </body> </html> 6

7 I tag base <html> dichiara che il file contiene codice HTML <head> identifica la sezione introduttiva del documento <title> specifica il titolo per il documento <body> definisce il corpo principale del documento 7

8 Heading e paragrafi Esistono sei livelli di heading hanno un significato logico (<h1> più importante, <h6> meno importante - il browser li visualizza in modo diverso) I paragrafi definiscono il testo normale gli spazi (oltre al primo) e i ritorni a capo non contano (non solo per <p>, ma anche per gli altri tag tranne <pre>) Ogni volta che incontra il tag <p>, il browser lascia una riga vuota... 8

9 Gli attributi Ai tag possono essere associati attributi Ad esempio, se voglio che il testo di un paragrafo sia centrato: <p align="center">questo e il testo del paragrafo</p> Gli attributi definiscono delle proprietà per i tag possono essere più d uno e hanno la struttura nomeattributo="valoreattributo" Quelli deprecati non si dovrebbero usare... 9

10 Liste Tre tipi possibili: Unnumbered lists tag <ul> e <li> per creare liste non ordinate Numbered lists tag <ol> e <li> per creare liste ordinate Definition lists tag <dl>, <dt> e <dd> per creare liste di definizione Si possono anche avere liste annidate una dentro l altra 10

11 Testo preformattato Utile quando gli spazi e i ritorni a capo contano il tag <pre> rappresenta l eccezione che conferma la regola... Utilizzato spesso per riportare codice (HTML, CSS, programmi, ecc.) il codice include generalmente delle indentazioni, e i ritorni a capo sono importanti per la comprensione della sua struttura 11

12 Line break e barre orizzontali Anche se l HTML ignora i ritorni a capo nel testo, è possibile forzarli attraverso il tag <br> Per separare zone diverse di uno stesso documento è possibile utilizzare barre orizzontali con il tag <hr> (si possono specificare gli attributi size e width) Esempio: <hr size="4" width="50%"> 12

13 Stili logici e stili fisici Concetto che vale sia per tag che per attributi Stili logici danno un informazione sul tipo di contenuto (la loro rappresentazione è lasciata completamente al browser) Esempi: <em>, <strong>, <code>,... Stili fisici specificano l aspetto del contenuto (che il browser dovrà rispettare) Esempi: <b>, <i>, align, bgcolor, Gli stili fisici andrebbero sempre evitati 13

14 Sequenze di escape Servono per inserire nella pagina caratteri speciali che non possono essere utilizzati direttamente perché non appartengono alle 26 lettere dell alfabeto inglese o hanno un significato particolare per l HTML Esempi: < = < > = > & = & è = è é = é È = È 14

15 Link... Permettono di creare collegamenti ad altri documenti Struttura: <a href="indirizzo">...</a> Esempio: <a href=" di Pavia</a> I pathname possono essere anche relativi Esempio: <a href="xxx/miofile.html">università di Pavia</a> 15

16 ... link È anche possibile creare collegamenti all interno dello stesso documento o a sezioni specifiche di un altro documento Esempio: <a href="#sez1">sezione 1</a> crea un link a sez1 nel documento corrente <a href="miofile.html#sez1">sezione 1</a> crea un link a sez1 nel file MioFile.html sez1 sarà definito da: <a name="sez1">questa è la sezione 1</a> 16

17 ... link Percorsi (pathnames) relativi indicano dove si trova una risorsa (file) rispetto alla posizione (directory/cartella) del file che contiene il collegamento alla risorsa stessa Esempio: link nel file f.html <a href="f1.html">link 1</a> f1.html si trova nella stessa cartella che contiene f.html <a href="c1/f1.html">link 1</a> f1.html si trova nella cartella c1, che si trova nella stessa cartella che contiene f.html <a href="c1/c2/f1.html">link 1</a> f1.html si trova nella cartella c2, che si trova nella cartella c1, che si trova nella stessa cartella che contiene f.html <a href="../f1.html">link 1</a> f1.html si trova nella cartella che contiene la cartella in cui si trova f.html 17

18 ... link Percorsi (pathnames) assoluti indicano dove si trova una risorsa (file) rispetto alla directory di root (la cartella del web server nella quale sono memorizzati i file del sito) L indirizzo inizia sempre con / o con Esempio: link nel file f.html (e la directory di root è c:\internet\www\) <a href="/f1.html">link 1</a> f1.html si trova nella directory di root del server che ospita f.html (cioè in c:\internet\www\) <a href="/c1/f1.html">link 1</a> f1.html si trova nella sottocartella c1 della directory di root del server che ospita f.html (cioè in c:\internet\www\c1\) <a href=" 1</a> il collegamento è a un file di default (il cui nome, configurabile nelle impostazioni del web server, è tipicamente index.html, home.html o welcome.html) contenuto nella directory di root del server identificato dall indirizzo <a href=" 1</a> il collegamento è al file f1.html contenuto nella directory di root del server identificato dall indirizzo 18

19 Link a indirizzi Permettono di aprire il programma per la composizione del messaggio con un clic Esempio: <p> Il prof. <a href="mailto:marco.porta@unipv.it">marco Porta</a> può essere contattato... </p> Il prof. Marco Porta può essere contattato... 19

20 Inclusione di immagini Si possono utilizzare immagini in formato GIF, JPEG e PNG attraverso il tag <img> (non richiede il tag di chiusura) Esempio: <img src="miaimmagine.gif"> È possibile specificare le dimensioni anche se non è strettamente necessario... Esempio: <img src="miaimmagine.gif" width="300" height="138"> L attributo alt permette di specificare testo alternativo 20

21 Il colore di sfondo della pagina Se nessun colore è specificato, il default è bianco o grigio il colore è impostato attraverso l attributo bgcolor del tag <body> Esempio: <body bgcolor="yellow"> Esistono 16 colori testuali predefiniti (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) È possibile specificare il colore anche con la codifica esadecimale Esempio: bgcolor="#02fc16" Attenzione: attributo deprecato (non deve essere usato!) 21

22 Immagini di sfondo È possibile specificare un immagine da visualizzare come sfondo della pagina attraverso l attributo background del tag <body> Esempio: <body background="miaimmagine.gif"> L immagine viene ripetuta automaticamente in modo che, indipendentemente dalle sue dimensioni, copra tutto lo sfondo Attenzione: attributo deprecato (non deve essere usato!) 22

23 Link a elementi multimediali Un link può anche riferirsi a un immagine, un animazione,... basta specificare l elemento multimediale nell attributo href Esempio: <a href="miaimmagine.gif">immagine 1</a> <a href="miofilmato.mov">filmato 1</a> Un immagine può anche essere un link Esempio: <a href="miaimmagine.gif"> <img src="miaimmaginepiccola.gif"> </a> 23

24 I font E possibile specificare il tipo di font da utilizzare per un certo tag famiglia, colore, dimensione, Si utilizza il tag <font> con gli attributi face, color, size, Esempio: Attenzione: tag deprecato (non deve essere usato!) <font face="sans-serif" color="red" size="+2"> <h1>questo è un titolo con carattere <em>sans-serif </em>, colore rosso e dimensione <EM>+2</EM> rispetto al font di default</h1> </font> 24

25 Tabelle... Permettono una suddivisione in righe e colonne utili per strutturare informazioni intrinsecamente tabellari Un tempo venivano usate per creare il layout della pagina ora non si usano più per questo scopo (ci sono i CSS!) Sono descritte in termini di righe e colonne tabella tag <table> righe tag <tr> colonne tag <td> e <th> 25

26 ... tabelle... Tabella con n righe e m colonne: <table> <tr> <td>riga 1, Colonna 1</td>... <td>riga 1, Colonna m</td> </tr>... <tr> <td>riga n, Colonna 1</td>... <td>riga n, Colonna m</td> </tr> </table> Celle riga 1 Celle riga n Riga 1 Riga n Tabella 26

27 ... tabelle Attributi di <table> width larghezza; border bordo; align allineamento orizzontale; valign allineamento verticale; cellpadding spazio all interno delle celle; cellspacing spazio tra le celle; bgcolor colore di sfondo; background immagine di sfondo Attributi di <tr> align allineamento orizzontale; valign allineamento verticale; bgcolor colore di sfondo Attributi di <td> e <th> width larghezza; height altezza; bgcolor colore di sfondo; background immagine di sfondo; align allineamento orizzontale; valign allineamento verticale; colspan numero di colonne occupate; rowspan numero di righe occupate 27

28 HTML "avanzato" - I form... Permettono all utente di fornire degli input Esempio: 28

29 ... i form... Sono definiti attraverso il tag <form> Il tag <input> permette di creare vari tipi di controlli text finestrelle di input testuale checkbox opzioni selezionabili radiobutton opzioni mutuamente esclusive password finestrelle input password image immagini (es. bottoni disegnati) button bottoni submit bottoni invio form reset bottoni reset form file invio file hidden dati nascosti 29

30 ... i form Altri tipi di input tag <button> bottoni (possono contenere immagini) tag <textarea> aree per l immissione di testo (su più righe) tag <select> e <option> elenchi tag <label> etichette Una volta inseriti, i dati devono essere inviati a qualcuno tipicamente, a un server che li elaborerà (attributo action del tag <form>) Due metodi disponibili per l invio GET e POST (attributo method del tag <form>) 30