HTML 4.01 Apogeo. I tag di base Capitolo 1 I tag Sintassi<nome_tag></nome_tag>Esempi:<strong><cite><b><em>

Presentazione sul tema: "HTML 4.01 Apogeo. I tag di base Capitolo 1 I tag Sintassi<nome_tag></nome_tag>Esempi:<strong><cite><b><em>"— Transcript della presentazione:

1 HTML 4.01 Apogeo

2 I tag di base Capitolo 1

3 I tag Sintassi<nome_tag></nome_tag>Esempi:<strong><cite><b><em>

4 Attributi Attributi nome_attributo = “valore” Gli attributi del tag Gli attributi del tag lang = “codice lingua” lang = “it” dir = “direzione testo” dir = “LTR” I tag e I tag e

5 Attributi del tag Attributi del tag bgcolor = “colore” Appendice A per nomi e codici dei colori background = “file_immagine” text = “colore_testo” link alink vlink Esempio javascript onLoad …

6 Formattazione del testo Capitolo 2

7 Header e paragrafi Tag header … Tag header … Tag Tag attributo align = “posizione” Il tag con attributi face = “font” color = “colore” color = “colore” size = “dimensione”

8 Caratteristiche Caratteri speciali Appendice D Accenno a Accenno a Caratteristiche del testo <tt><u><strike><sub><sup> Tag con attributo height

9 Elenchi ordinati, non ordinati ed elenchi di definizioni Capitolo 3

10 Elenchi ordinati tag tag attributo type = “valore” (1 i I a A) attributo start = “valore” tag tag Elenchi all’interno di altri elenchi

11 Elenchi non ordinati tag tag attributo type = “valore” (disc circle square) tag tag Elenchi di definizione tag tag

12 Inserimento di un’immagine Capitolo 4

13 Il tag Il tag Attributo src Percorsi relativi e percorsi assoluti Attributo alt alt = “descrizione immagine” Attributi width e height Attributo align = “valore” (top bottom left … )

14 I formati delle immagini jpg (Joint Photographic Experts Group) buona compressione ampia gamma cromatica scelta della qualità gif (Graphics Interchange Format) animazionetrasparenza png (Portable Network Graphics) formato “libero” più livelli di trasparenza

15 I link Capitolo 5

16 Il tag Il tag Link a una pagina dello stesso sito o di un sito diverso Attributo href = “percorso_pagina” link locale link locale link esterno link esterno Attributo target = “valore” (_blank) Attributo alt = “testo alternativo” Attributo title=“testo tooltip”

17 Immagine come link Inserimento del tag all’interno del tag Inserimento del tag all’interno del tag Attributo border = “valore” border = “0” per eliminare il bordo

18 Link interni alla pagina attributo name per definire un punto di destinazione interno a un documento (àncora) href = “#capitolo1” (riferimento interno) href = “pagina.html#capitolo1” (interno ad altra pagina)

19 Link mailto href = mailto:utente@sito per inviare un messaggio di posta elettronica utilizzando il client e-mail predefinito sul computer

20 Mappe sensibili Capitolo 6

21 Tabelle Capitolo 7

22 <table> Il tag con attributo border = “valore” all’interno di vari tag (table row), uno per ogni riga All’interno del tag tanti tag (table data) quante sono le colonne Opzionalmente il tag come intestazione di colonna

23 Un esempio Mese Mese Importo Importo Gennaio Gennaio 200 200 Febbraio Febbraio 350 350 </table>

24 Attributi di Attributi di align = “valore” (left center right) width = “valore” (in pixel o in percentuale) border = “valore” (0 bordo invisibile) …

25 Frames e Iframes Capitolo 8

26 Form Capitolo 9

27 Un form html è una sezione di documento che contiene Un form html è una sezione di documento che contiene Testo normale e markup Testo normale e markup Elementi speciali chiamati controlli (checkbox, bottoni radio, menu ecc.) Elementi speciali chiamati controlli (checkbox, bottoni radio, menu ecc.) Gli utenti di solito “completano” questi controlli Gli utenti di solito “completano” questi controlli Inserimento testo, selezione voci di menu ecc. Inserimento testo, selezione voci di menu ecc. Poi il form viene inviato (submit) Poi il form viene inviato (submit) Eleborazione remota su web server Eleborazione remota su web server Alberto Ferrari

28 I form sono racchiusi dai tag e I form sono racchiusi dai tag e Il tag ha Il tag ha Un attributo action – url a cui inviare i dati del form Un attributo action – url a cui inviare i dati del form Un attributo method – metodo http da usare per sottomettere i dati del form (get o post) Un attributo method – metodo http da usare per sottomettere i dati del form (get o post) Esempio Esempio Alberto Ferrari

29 Ogni campo di input in un form ha: Ogni campo di input in un form ha: Un nome, definito dall’attributo name (o id) del tag,, o Un nome, definito dall’attributo name (o id) del tag,, o Un valore, che l’utente imposta immettendo testo o cliccando col mouse Un valore, che l’utente imposta immettendo testo o cliccando col mouse I dati del form vengono inviati (submit) allo script sul server come un insieme di coppie nome/valore I dati del form vengono inviati (submit) allo script sul server come un insieme di coppie nome/valore Campi di testo vuoti sono inviati come una coppia nome/valore, in cui il valore è una stringa vuota Campi di testo vuoti sono inviati come una coppia nome/valore, in cui il valore è una stringa vuota Checkbox e pulsanti radio non selezionati non vengono inviati Checkbox e pulsanti radio non selezionati non vengono inviati Alberto Ferrari

30 Altri usi del form E’ possibile utilizzare i form per altri scopi: E’ possibile utilizzare i form per altri scopi: per mandare un e-mail con il contenuto del form, in questo caso method sarà POST e action sarà: action="mailto:nome@provider.it" per mandare un e-mail con il contenuto del form, in questo caso method sarà POST e action sarà: action="mailto:nome@provider.it" oppure come aree attive per script eseguiti sul client (es. per realizzare una calcolatrice in javascript): in questo caso action mancherà. oppure come aree attive per script eseguiti sul client (es. per realizzare una calcolatrice in javascript): in questo caso action mancherà. Alberto Ferrari

31 Campi per l’immissione di testo, checkbox, bottoni radio, o bottoni normali Campi per l’immissione di testo, checkbox, bottoni radio, o bottoni normali Menu a discesa e box di selezione Menu a discesa e box di selezione Campi per l’immissione di testo su righe multiple Campi per l’immissione di testo su righe multiple Alberto Ferrari

32 Il tag crea diversi tipi di campi, a seconda del valore dell’attributo type Il tag crea diversi tipi di campi, a seconda del valore dell’attributo type text – Campo normale per l’immissione di testo (default) text – Campo normale per l’immissione di testo (default) password – Identico a text, ma nasconde il testo inserito password – Identico a text, ma nasconde il testo inserito checkbox – Per semplici valori on/off checkbox – Per semplici valori on/off radio – Pulsante per scegliere una tra diverse opzioni radio – Pulsante per scegliere una tra diverse opzioni submit – Bottone per inviare i dati inseriti nel form submit – Bottone per inviare i dati inseriti nel form reset – Buttone che riporta tutti i campi al valore iniziale reset – Buttone che riporta tutti i campi al valore iniziale image – Come submit, ma immagine come bottone image – Come submit, ma immagine come bottone hidden – ulteriori coppie nome/valore da inviare al server, ma non visualizzate all’utente hidden – ulteriori coppie nome/valore da inviare al server, ma non visualizzate all’utente Alberto Ferrari

33 Insieme di attributi variabile a seconda dell’attributo type Insieme di attributi variabile a seconda dell’attributo type text, password text, password value – Valore di default per il campo value – Valore di default per il campo size – Dimensione visualizzata del campo size – Dimensione visualizzata del campo maxlength – Quantità di dati che si può inserire maxlength – Quantità di dati che si può inserire checkbox, radio checkbox, radio value – Valore del campo quando è selezionato; default = "on" value – Valore del campo quando è selezionato; default = "on" checked – Se il campo per default è selezionato checked – Se il campo per default è selezionato submit, reset submit, reset value – Etichetta del bottone value – Etichetta del bottone image image src – Url dell’immagine da visualizzare src – Url dell’immagine da visualizzare maggior parte degli attributi del tag img maggior parte degli attributi del tag img Alberto Ferrari

34 Esempio input text <input type=”text" name="nome" maxlength="40" size="33" value="Il tuo nome” <input type=”text" name="nome" maxlength="40" size="33" value="Il tuo nome” text ha tre attributi aggiuntivi: text ha tre attributi aggiuntivi: maxlength (il numero massimo di caratteri inseribili nel campo) maxlength (il numero massimo di caratteri inseribili nel campo) size (la larghezza della stringa all'interno della pagina) size (la larghezza della stringa all'interno della pagina) value (valore di default della stringa). value (valore di default della stringa). Alberto Ferrari

35 State: Password: Send me more info. Select your gender below: Female Male Alberto Ferrari

36 State: Password: Send me more info. Select your gender below: Female Male Alberto Ferrari

37 Choose your favorite color: green aquamarine emerald turquoise aqua green

38 Il tag crea aree per l’inserimento di testo su più linee, con barre di scorrimento Il tag crea aree per l’inserimento di testo su più linee, con barre di scorrimento Tutto ciò che si trova tra i tag di apertura e chiusura costituisce il contenuto iniziale del campo Tutto ciò che si trova tra i tag di apertura e chiusura costituisce il contenuto iniziale del campo Alberto Ferrari Enter stuff here

39 Cenni sui fogli di stile Capitolo 10