La produzione di pagine web

Slides:



Advertisements
Presentazioni simili
Open Document Format for Office Applications Organization for the Advancement of Structured Information Standards Sergio Capone ITP.
Advertisements

A. Ferrari Alberto Ferrari. Un form html è una sezione di documento che contiene Testo normale e markup Elementi speciali chiamati controlli (checkbox,
WSDL (Web Services Description Language) Laurea Magistrale in Informatica Reti 2 (2006/07) dott. Federico Paoloni
E Windows SharePoint Services 2.0 Ivan Renesto Overview how to use Windows SharePoint Services.
Un DataBase Management System (DBMS) relazionale client/server.
Esempi sui CSS.
Unintroduzione a HTML (II). 4-2 Includere figure con i tag immagine Le immagini possono essere usate come link utilizzando i tag àncora Formato del tag.
Sequence. CREARE UNA SEQUENCE CREATE SEQUENCE nome [INCREMENT BY n] [START WITH n] [MAXVALUE n | NOMAXVALUE] [MINVALUE n | NOMINVALUE] [CYCLE | NOCYCLE]
FUNZIONI DI GRUPPO Le funzioni di gruppo operano su un set di record restituendo un risultato per il gruppo. AVG ([DISTINCT|ALL] n) media, ignora i valori.
Constraints.
1 HTML L’HTML è un linguaggio di markup: le istruzioni vengono date attraverso comandi denominati tag e racchiusi tra i segni di maggiore e minore ().
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Roma, 16 novembre 2010 SPT – Il sistema di accettazione Gestione centralizzata Dott. Paolo Spadetta.
COMUNICAZIONE ONLINE, RETI E VIRTUALITA MATTEO CRISTANI.
Fotogrammetria elementare
Un esempio: Registrazione e lettura di dati in un file
Professional Users. Per poter lavorare sul Dizionario, bisogna registrarsi come Utente Professionale – Professional User (solo.
Comunicare con il computer. Posta elettronica2 La posta elettronica La posta elettronica, conosciuta come , abbreviazione del termine inglese electronic.
I SISTEMI OPERATIVI: INTERFACCE Interfacce testuali: le operazioni vengono compiute scrivendo i comandi su una riga dello schermo (riga di comando). Esempi:
By Inter-Ware Soft. Tech. Introduzione all'uso del PC Massimo Sgambato.
Microsoft Access Maschere.
Il sistema operativo Sistema operativo (in breve) –È costituito dai programmi di gestione delle operazioni più elementari del computer –… gestione di vari.
Muoversi tra le finestre
C aso di Studio Gruppo9: DAvino,Vetrano,Monda,Papa, Berardini,Schettino.
JavaScript Lezione 5 Tipizzazione ed operazioni tra tipi diversi Istruzioni di input.
Lambiente operativo. 2 Per avviare e poter utilizzare il computer è necessario un particolare programma che si chiama sistema operativo. Windows è un.
Corso di Elementi di Informatica
Microsoft Access Cosa sono i database, microsoft access, le relazioni e le tabelle.
PRIMI DISEGNI CON CABRI Realizzato da Daniel Bulgarini e Matteo Co CLASSE 2°C LICEO PASCAL MANERBIO.
Riprendendo Il tag il tag Div rappresenta un contenitore. Tutto quello che è incluso fra il tag iniziale e quello di chiusura reagisce secondo gli stili.
La risoluzione determina il dettaglio dell'immagine, quindi le massime dimensioni di stampa che potete raggiungere mantenendo una buona qualità. La fotocamera.
Primi passi con Windows: Gestione del Desktop Barra Applicazioni Menu Avvio ISTITUTO COMPRENSIVO N.7 - VIA VIVALDI - IMOLA Via Vivaldi, Imola.
C OME CREARE I FRAME. Dal pannello File fai doppio clic sul file default.html per aprire la pagina (figura 1.1). Figura 1.1 Il file default.html.
DA NATIVI DIGITALI A INTERNAUTI CONSAPEVOLI
Creare e gestire un sito Web scolastico P.O.N ITIS Marconi Nocera a.s
PORTE APERTE SUL WEB L'officina del webmaster: strumenti, materiali, iniziative, fonti di informazione, e poi perché costruire siti scolastici ? Laura.
«Piazza Mercato» su La conveniente piattaforma pubblicitaria per i partner della campagna!
1 Web Design Internet Agency. 2 Web Design Internet Agency Qual è il valore aggiunto che può portare allimpresa ? Perché è fondamentale oggi avere un.
Tesina di Negri Michel. La ditta ATS produce articoli per auto-modelli radiocomandati in scala 1:8 e 1:10. La ATS ha richiesto la realizzazione del sito.
OUTPUT FORMATTATO La funzione printf consente di effettuare la stampa a video formattata. Sintassi: printf ( stringa_formato, arg0, arg1, … ); La stringa.
Tutorial relativo al Mio EBSCOhost. Benvenuti al tutorial dedicato a Mio EBSCOhost, verranno fornite le istruzioni per la configurazione e lutilizzo ottimizzato.
Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto.
Gli standard web W3C standard HTML CSS …a set of standardized best practices for building web sites, and a philosophy of web design and development that.
Modulo 1 bis Menù Incolla Esercitazione Un computer è quasi umano, a parte il fatto che non attribuisce i propri errori a un altro computer. (Anonimo)
Prof. Reale Nicola Stud. Manola Bauco
Innovazioni versione 4 Bari, 17 ottobre Innovazioni versione 4 Il menù dinamico secondo logica operativa Il ruolo dei Ruoli Facilitare la scelta.
Moduli o Form I Moduli permettono all'utente di immettere informazioni...
Marco Gribaudo - thanks to C. Gena e R. Damiano 1 Le basi del linguaggio HTML Marco Gribaudo
Hot Shots Vendita di alcolici
INTERNET Internet è una rete a livello mondiale che permette alle persone di comunicare ed ad accedere a banca dati da qualunque parte del mondo e su qualunque.
Gruppo 4: Gelmi Martina, Morelato Francesca, Parisi Elisa La mia scuola ha un sito Web: modelli per la qualità dei siti (Ingegneria del Web)
Sistema Informativo Demanio Idrico marzo Per aumentare lefficienza del servizio abbiamo realizzato un sistema in grado di gestire in modo integrato.
INTERNET Antonio Papa Classe 2^ beat I.S.I.S. G. Meroni a.s. 2007/2008.
La nascita di internet Luigi Di Chiara Arci Solidarietà Napoli.
Le reti informatiche Modulo 7. Internet Il browser La navigazione Motori di ricerca Raccogliere dati La stampa sommario.
LE RETI E IL DDNS.
HTML Creazione di moduli Prof.ssa Daniela Decembrino.
SUBQUERY Chi ha un salario maggiore di quello di Abel? Occorre scomporre la query in due sotto problemi: MAIN : quali impiegati hanno un salario maggiore.
Il Linguaggio HTML “Profe, ma io a casa l’HTML non ce l’ho!“
Introduzione al linguaggio C. Cos’e’ il C? Il C e’ un linguaggio ad alto livello Un compilatore C prende in input un file contenente codice sorgente C.
Sistemi di elaborazione dell’informazione Modulo 3 -Protocolli applicativi Unità didattica 4 - Protocolli del Web Ernesto Damiani Lezione 3 – Esempi HTTP.
JDBC Java DataBase Connectivity SISTEMI ITIS B. CASTELLI Anno Scolastico
Tabelle in HTML Le tabelle permettono di creare una struttura matriciale (un foglio con tanti quadretti) Vengono utilizzate non solo per presentare dei.
Creazione di pagine per Internet Brevi note a cura di Emanuele Lana
Tag TABLE. Oltre ad avere la funzione di rappresentare dati di ogni genere allineati in righe e colonne, le tabelle in HTML si utilizzano per costruire.
HTML 4.01 Apogeo. I tag di base Capitolo 1 I tag SintassiEsempi:
HTML HTML Sistema di contrassegno riconosciuto dai Browser come (Firefox, Chrome, Internet Explorer) Hyper Text Markup Language.
Hyper Text Markup Language
HTML 4.01 Quinta lezione 22 Marzo 2004 di Ivano Stranieri.
HYPER TEXT MARK-UP LANGUAGE
Transcript della presentazione:

La produzione di pagine web Il Linguaggio HTML La produzione di pagine web

Il linguaggio HTML - Cristina Fregni Il World Wide Web Il WWW è un progetto nato al CERN di Ginevra per risolvere il problema della ricerca di documenti che sono diventati disponibili a ritmo esponenziale su Internet. I precedenti sistemi di classificazione dei documenti (Gopher e Veronica), non erano adatti ad un pubblico eterogeneo ed abituato agli ausili delle interfacce grafiche e non erano in grado di fornire strutture di ricerca sufficientemente elastiche. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Ipertesti Nasce l’idea di utilizzare il concetto di ipertesto esteso alle risorse della Rete. Vengono quindi riorganizzati i documenti in giganteschi ipertesti che guidano la consultazione mediante rimandi (link). L'ipertesto può contenere, oltre agli elementi testuali, anche immagini, suoni, filmati e qualsiasi altro oggetto digitalizzabile. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Un ipertesto è un insieme di documenti che può essere consultato in modo non sequenziale, passando da un documento all’altro attraverso collegamenti (link). Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Il progetto WWW ha: definito un protocollo di trasmissione (HyperText Transfer Protocol): insieme di regole con cui i computer si trasmettono i dati; creato un linguaggio (HyperText Markup Language); fondato un consorzio (W3 Organization) con il compito di governare lo sviluppo futuro dello standard. Il linguaggio HTML - Cristina Fregni

URL (Uniform Resource Locator) E’ l’indirizzo standard (mnemonico) per individuare una risorsa (in genere un file) di Internet. Gli indirizzi vengono definiti da uno schema di indirizzamento generale della forma: Protocollo://NomeHost.NomeDominio/Percorso/NomeFile/#NomeAncora Risorsa usata (FILE, HTTP, FTP..) Indica il nome simbolico del server (WWW) e il nome del dominio (gruppo di server dello stesso nodo). L'ultima parte identifica: con due lettere la nazione di appartenenza; con tre lettere il tipo di organizzazione cui si fa riferimento (COM, EDU, GOV). Pathname del file Segnalibro all’interno del file Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Gli URL per i collegamenti ipertestuali possono essere: ASSOLUTI: quando definiscono l’indirizzo completo di una risorsa. Hanno la sintassi precedentemente indicata; RELATIVI: se descrivono la destinazione del collegamento relativamente alla posizione corrente della pagina sorgente sul server Web. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni I nomi dei file Sono di norma liberi ed hanno estensione .htm oppure .html è utile comunque considerare che: per indicare la Home Page di un sito Internet esiste un identificativo particolare: index.htm o default.htm. Se questo file è presente nella directory del sito sul server, esso viene aperto automaticamente quando l’utente specifica l’indirizzo del sito; alcuni sistemi operativi che gestiscono i server Internet (Unix e Linux) sono case sensitive e non supportano i nomi lunghi per i file, quindi è conveniente utilizzare lettere minuscole e nomi di 8 caratteri al massimo per i file. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni I Browsers Per poter consultare il file in formato HTML occorre uno specifico programma (BROWSER) in grado di interpretare correttamente la sintassi del linguaggio. Il compito del browser è quello di leggere gli ordini contenuti nel documento e impaginare sul monitor il documento stesso. Può capitare che browser diversi rappresentino in maniera diversa lo stesso documento, ciò può dipendere da: una diversa interpretazione della sintassi; da errori presenti nel browser; dal mancato allineamento del browser allo standard. Il linguaggio HTML - Cristina Fregni

L’HyperText Markup Language È un linguaggio di formazione delle pagine, non un linguaggio di programmazione; È un linguaggio statico nato solo per visualizzare informazioni; I documenti scritti in HTML sono normali file di testo, visualizzabili e modificabili con semplici programmi editor; Esistono molti editor, alcuni molto potenti, specializzati nella scrittura di documenti HTML che aiutano l'operatore nella corretta stesura dei documenti. Il linguaggio HTML - Cristina Fregni

Gli elementi del linguaggio I file scritti in HTML hanno estensione .HTM o .HTML; Al contenuto di questi file vengono aggiunti dei TAG (marche, contrassegni) che consentono di impostare caratteristiche particolari per il testo contenuto tra i tag; I tag sono racchiusi tra le parentesi angolari '<' e '>' Esiste sempre un tag iniziale (<tag>) ed un tag finale (</tag>); Il linguaggio HTML - Cristina Fregni

La struttura della pagina HTML <HEAD> <TITLE>La mia prima Home Page</TITLE> </HEAD> <BODY> Questa è la prima pagina web </BODY> </HTML> <b> testo o elementi ulteriori </b> PAGINA WEB intestazione corpo posizione errata Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Intestazione Contiene notizie dichiarative, informative o di impostazione globale del documento. Questa sezione inizia sempre con il tag <HEAD> e termina con </HEAD>. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni HEAD In questo tag vi sono informazioni di impostazione della finestra e può contenere: Il tag TITLE I tag META I CSS (Cascade Style Sheet) o fogli di stile Codice di programmazione Javascript, VBScript, PHP, ASP… Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni TITLE Ad ogni pagina web può essere associato un titolo che ne descrive il contenuto. L’elemento <TITLE>…</TITLE> viene visualizzato solitamente dai browser nella barra del titolo della finestra; In caso di salvataggio dell’URL il tag TITLE dà il nome al collegamento; Viene utilizzato da alcuni motori di ricerca per indicizzare la pagina e trovare le parole chiave. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni I tag META I tag META sono stati creati per descrivere il documento agli occhi degli spider, i software usati dai motori di ricerca per indicizzare le pagine e inserirle, pronte per essere recuperate nei database. Attraverso questi tag il motore di ricerca ha le informazioni necessarie per catalogare la pagina. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni KEYWORDS <META name=“keywords” Content=“keyword1, keyword2, …”> Le parole chiave sono i termini che descrivono il contenuto della pagina, sono quelli che l’utente inserisce come chiave di ricerca. È attraverso questi termini che la pagina potrà essere trovata. DESCRIPTION <META name=“description” content=“descrizione della pagina”> Questa frase apparirà (nella maggior parte dei motori di ricerca) come titolo alla fine della ricerca. Attraverso queste parole l’utente deciderà se visitare o meno la nostra pagina. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni AUTHOR <META name=“author” content=“Nome Cognome”> Poco usato, ma previsto dal W3C, per segnalare l’autore della pagina html, spesso contiene anche l’indirizzo e-mail, l’homepage, l’URL e altre informazioni. GENERATOR <META name=“generator” content=“blocco note di Win98”> Non indispensabile, indica il nome del software usato per costruire la pagina. Tutti i programmi che aiutano a costruire una pagina HTML si auto-inseriscono in questo tag. Il linguaggio HTML - Cristina Fregni

I formati delle immagini Le immagini utilizzate nelle pagine web devono avere i seguenti formati: GIF(Graphics Intercanghe Format), formato usato per le immagini grafiche, utilizzato anche per comporre brevi sequenze di immagini (GIF animate); JPG(Joint Photographic Experts Group), formato utilizzato per le immagini di tipo fotografico; PNG(Portable Network Graphics), formato di compressione di immagini destinato a sostituire il formato GIF rispetto al quale presenta miglioramenti e maggiore compressione. Il linguaggio HTML - Cristina Fregni

La rappresentazione dei colori Il linguaggio HTML utilizza una combinazione dei tre colori fondamentali RGB (Red, Green, Blue) per l’impostazione dei colori nei vari elementi delle pagine. Tali colori vengono indicati attraverso 3 numeri, compresi ciascuno tra 0 e 255, che specificano la gamma cromatica del rosso, del verde e del blu. I valori devono essere scritti in formato esadecimale e quindi variano da 00 a FF. Ad esempio: nero 00 00 00 bianco FF FF FF rosso FF 00 00 verde 00 FF 00 blu 00 00 FF E’ possibile usare anche un nome simbolico corrispondente al valore esadecimale utilizzando un’apposita tabella. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni I commenti Per documentare il codice della pagina HTML, in vista di successive revisioni, l’autore può inserire commenti che vengono ignorati dal browser. Le righe di commento sono delimitate dalla coppia di tag: <!-- … --!>. I commenti possono essere formati da una o più righe. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Corpo Contiene il documento vero e proprio con tutti gli elementi caratteristici di un ipertesto. Inizia sempre con il tag <BODY> e termina con </BODY>, tutto ciò che viene scritto all’esterno dei due tag non verrà visualizzato. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni BODY A questo tag si possono aggiungere attributi per l’impostazione dei colori di pagina e testo: Attributi di BODY Imposta... BGCOLOR=“rrggbb” il colore dello sfondo; BACKGROUND=“URL-file-immagine” una immagine di sfondo; LINK=“rrggbb” il colore del link VLINK=“rrggbb” il colore del link visitato; ALINK=“rrggbb” il colore del link attivo; TEXT=“rrggbb” il colore del testo; Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Il testo L’inserimento di testo si effettua digitando una o più frasi all’interno del corpo della pagina e completandolo con i tag di formattazione. Il testo di un documento HTML è visualizzato dal browser in modo da riempire lo spazio disponibile sullo schermo (word-wrapping). Il browser quindi non riconosce più di uno spazio o i ritorni a capo utilizzati durante l’editing del testo. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni I caratteri speciali Per inserire caratteri speciali e simboli particolari (es.: <, >, segni e accenti aggiunti agli altri caratteri per motivi di pronuncia) in modo che siano visualizzati da tutti i browser, si impiegano le character entity dell’HTML, ad esempio: Carattere Codice spazio   virgolette " è &egrave È &Egrave é &eacute minore < maggiore > Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni I paragrafi <BR>: inserisce un ritorno a capo per l’interruzione della riga; <P ALIGN=LEFT|CENTER|RIGHT>…</P>: specifica l’inizio di un nuovo paragrafo creando una porzione di testo separata dalle altre da una riga di spazio ; <PRE>…</PRE>”: permette l’inserimento di testo preformattato, cioè che viene visualizzato esattamente come scritto nel file HTML; <HR ALIGN=LEFT|CENTER|RIGHT SIZE=n WIDTH=n|n% NOSHADE>: inserisce una riga orizzontale; Il linguaggio HTML - Cristina Fregni

La formattazione del testo Solitamente è necessario differenziare le dimensioni dei caratteri per distinguere il titolo dal resto del testo o per definire sottotitoli o elementi testuali evidenziati. HTML dispone dei seguenti tag: <B>…</B>: per il grassetto (Bold); <I>…</I>: per il testo in corsivo (Italic); <U>...</U>: per il sottolineato (Underline); <Hn>...</Hn>: permette di impostare i titoli. Vi sono sei livelli di intestazione che vanno da n=1, per il primo livello (con maggiore dimensione di carattere), fino a n=6 per il sesto livello. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Font dei caratteri L’HTML permette di definire il font di un testo racchiudendolo nei tag <FONT>…</FONT> e specificando i suoi attributi, descritti nella tabella seguente: Attributi di FONT Definisce.. FACE=“font” il tipo di font da applicare. Se il font non è installato nel computer, il browser utilizza quello predefinito. SIZE=“n” le dimensioni indicate in modo assoluto da “1” a “7”, o relativo aumentando (+n) o diminuendo (-n) il valore di default (in genere 4). COLOR=“rrggbb” il colore con il formato RGB. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Le liste E’ possibile definire due diversi tipi di liste che vengono classificati in elenchi puntati: Elenco non ordinato (unordered list) Elenco numerato (ordered list) <UL> <LI>primo punto</LI> <LI>secondo punto</LI> </UL> <OL> </OL> Il linguaggio HTML - Cristina Fregni

Visualizzazione di immagini Per includere un’immagine nel documento si deve usare il tag: <IMG SRC=“URL-file-immagine” Attributi> L’URL può essere assoluto o relativo. Il file immagine è memorizzato separatamente dal documento HTML. In genere tutte le immagini di un sito web vengono inserite in una apposita cartella (images). Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Attributi di IMG Definisce… WIDTH=“nn” e HEIGHT=“nn” la larghezza e l’altezza occupate dall’immaginenella pagina. Vengono indicate in pixel oppure in percentuale (“n%”) rispetto allo schermo. ALT (ALTernate text) il testo visualizzato: durante il download del file; in caso di mouseover; al posto dell’immagine quando non viene visualizzata. BORDER=“n” la larghezza del bordo in pixel. ALIGN= RIGHT|LEFT come è visualizzato il testo intorno all’immagine. Il linguaggio HTML - Cristina Fregni

I collegamenti ipertestuali La principale caratteristica di un ipertesto è la possibilità di consultare il documento in modo non sequenziale attraverso l’uso di collegamenti ad altri oggetti o pagine. Con i link si effettuano riferimenti a file remoti (esterni) o ad altre parti del documento stesso (interni). Il link appare sulla pagina come un’immagine, un’animazione o semplicemente un testo di norma evidenziato con sottolineatura e colore diverso, inoltre passando su di esso il puntatore del mouse si trasforma in mano indicando che si può attivare il link premendo con il tasto del mouse. Il linguaggio HTML - Cristina Fregni

I link esterni Sono collegamenti ad altri documenti HTML, oggetti multimediali o servizi Internet. Per realizzare un link si utilizza il tag: <A HREF=“URL”>descrizione</A> Documento a cui si vuole fare riferimento Testo/immagine che permette di collegarsi al documento di riferimento Il linguaggio HTML - Cristina Fregni

L’URL si può riferire ad oggetti diversi: Oggetto URL File nella stessa directory dello stesso server “nome-file.htm” Sito internet remoto “http://indirizzo-internet” Invio di messaggio di posta elettronica “mailto:nomeutente@dominio Sito web remoto Pagina1 HTML Pagina2 HTML Gestore posta elettronica Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni I link interni Sono collegamenti ad una determinata posizione dello stesso documento HTML. Vengono utilizzati quando i documenti da visualizzare sono molto lunghi. Si inseriscono specifiche ‘ancore’ per muoversi in modo mirato all’interno del documento garantendo una migliore leggibilità del documento stesso. Il linguaggio HTML - Cristina Fregni

<A NAME= “nome”> I link interni si indicano con il tag: <A HREF= “#nome”>descrizione</A> Ancora a cui si vuole fare riferimento all’interno del documento Testo/immagine che permette di collegarsi al punto di riferimento nel documento L’ancora dovrà essere definita all’interno dello stesso documento con l’attributo: <A NAME= “nome”> Ancora a cui si fa riferimento nel documento Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni I link possono anche essere fatti ad un punto specifico di un altro documento. Doc1 <A NAME=“inizio”> <A HREF=”doc2.htm#primo”>…</A> <A HREF=”#fine”>Vai alla fine</A> <A NAME=“fine”> <A HREF=”#inizio”>Torna su</A> Doc2 <A NAME=“primo”> Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Le Tabelle Nelle pagine web sono impiegate per: organizzare i dati in modo ordinato inserendoli in una griglia; creare layout di pagina complessi, posizionando i diversi oggetti multimediali in posizioni individuate dalle righe e colonne della tabella stessa. Il linguaggio HTML - Cristina Fregni

<TABLE> … </TABLE> Nell’HTML, la descrizione di una tabella è racchiusa nel tag: <TABLE> … </TABLE> e nei seguenti elementi annidati, che ne definiscono le componenti (righe e colonne): Tag annidato in TABLE Delimita all’interno della tabella… <TR>…</TR> (Table Row) una singola riga <TD>…</TD> (Table Data) Una singola cella all’interno di una riga <TH>…</TH> (Table Heading) L’intestazione di una colonna Il linguaggio HTML - Cristina Fregni

BORDERCOLOR e BGCOLOR=“rrggbb” Il formato di una tabella può essere modificato mediante gli attributi principali elencati di seguito: Attributo Imposta… BORDER=“n” il bordo della tabella, “n” ne definisce lo spessore, quando è 0 la tabella risulta senza bordi. BORDERCOLOR e BGCOLOR=“rrggbb” il colore dei bordi e quello interno della tabella. ALIGN= RIGHT|CENTER|LEFT l’allineamento della tabella nella finestra. WIDTH=“nn”(%) la larghezza della tabella in pixel o in percentuale. CELLSPACING=n lo spazio tra le celle. CELLPADDING=n lo spazio all’interno delle celle. Il linguaggio HTML - Cristina Fregni

BORDERCOLOR e BGCOLOR=“rrggbb” Anche il formato delle celle (definite con i tag <TD> e <TH>) può essere modificato mediante gli attributi: Attributo Imposta… BORDERCOLOR e BGCOLOR=“rrggbb” il colore dei bordi e quello interno della cella. ALIGN= RIGHT|CENTER|LEFT l’allineamento orizzontale del testo nella cella. VALIGN= TOP|MIDDLE|BOTTOM l’allineamento verticale del testo nella cella. WIDTH=“nn”(%) la larghezza della cella in pixel o in percentuale. COLSPAN=“n” e ROWSPAN=“n” l’unione in orizzontale o verticale delle celle, “n” ne indica il numero. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni I Moduli Sono contenitori di elementi HTML che realizzano una Interfaccia Grafica per l’Utente (GUI) e gli permettono di interagire con il sistema In questo modo l’utente può operare scelte, fornire risposte, inserire dati . Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni L’interazione tramite i form avviene attraverso due fasi: creazione del form con i suoi elementi e attributi per ricevere i dati in input; elaborazione dei dati che può avvenire: direttamente sul client tramite programmi di scripting; al momento della sottomissione del form, quando i dati vengono inviati ad un programma di script del server. Il linguaggio HTML - Cristina Fregni

<FORM> elementi form </FORM> Per inserire un form si usa il tag doppio: <FORM> elementi form </FORM> i cui attributi, descritti nella tabella seguente, specificano il tipo di comunicazione tra il browser e i programmi eseguiti sul server. Attributo Definisce… NAME=“nome” l’identificatore del modulo. ACTION=“URL” l’URL del programma che elabora i dati o un indirizzo di e-mail. METHOD= “GET|POST” il metodo di trasmissione dei dati tra browser e server. “GET” – tutti i dati dei campi del modulo sono trasmessi in un’unica variabile stringa (query_string), lunga al massimo 256 caratteri, aggiungendoli all’URL dello script; “POST” – i dati vengono inviati al server in modo autonomo nel corpo del messaggio HTTP per diventare l’input dell’applicazione remota. Il linguaggio HTML - Cristina Fregni

Gli elementi dei moduli Per inserire un campo in un modulo si deve annidare nell’elemento FORM il tag singolo <INPUT> con i principali attributi descritti di seguito: Attributo Definisce… NAME=“nome” il nome per richiamare l’oggetto durante l’elaborazione dei dati. VALUE=“valore” il valore iniziale del campo. TYPE= “TEXT|PASSWORD|HIDDEN |CHECKBOX|RADIO |BUTTON|SUBMIT|RESET” il tipo di funzionalità svolta dall’oggetto-campo. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Caselle di Testo Hanno la funzione di raccogliere i dati digitati dall’utente, possono essere dei seguenti tipi: Valore TYPE Caselle di testo Funzioni Aspetto nel Browser TEXT a singola linea Input di una stringa digitata dall’utente nel browser PASSWORD password Input di dati nascosti durante la digitazione HIDDEN nascoste Invio di parametri al server definiti dal programmatore nell’attributo VALUE e non visualizzati all’utente Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Pulsanti di Comando Permettono di eseguire alcune azioni associate al loro evento predefinito (click) e dispongono di funzionalità diverse: Valore TYPE Pulsante L’evento click(): Aspetto nel Browser BUTTON normale deve definirlo il programmatore con un linguaggio di script SUBMIT invio dei dati provoca l’invio dei dati dal browser al programma del server web RESET cancellazione dati provoca la cancellazione di tutti i dati digitati Il linguaggio HTML - Cristina Fregni

Caselle di Selezione e Pulsanti di Opzione Permettono all’utente di fare più (checkbox) o una sola scelta (radio button) all’interno di voci predefinite. Si devono utilizzare i seguenti valori degli attributi: Valore TYPE Campo L’evento click(): Aspetto nel Browser CHECKBOX casella di selezione provoca la selezione della casella RADIO pulsante di opzione causa la scelta del pulsante eliminando la selezione negli altri Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Caselle di selezione e pulsanti di opzione devono essere inseriti in un gruppo di campi individuato da un insieme di tag <INPUT> separati, ma con valore dell’attributo NAME comune. In entrambi i controlli: il valore inviato al server è definito dall’attributo VALUE; la presenza dell’attributo CHECKED, determina una selezione di default. Il linguaggio HTML - Cristina Fregni

<SELECT>…</SELECT> Caselle di riepilogo Consentono di definire una lista mediante l’elemento doppio <SELECT>…</SELECT> che include un elenco di valori inseriti nei tag singoli <OPTION>. Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni In questo tipo di controllo: il dato trasmesso al server è quello impostato dal programmatore nell’attributo VALUE di OPTION, sulla base della scelta fatta dall’utente nella lista; per impostare un elemento come selezionato, si deve aggiungere a OPTION l’attributo SELECTED; per poter scegliere più di una voce occorre aggiungere a SELECT l’attributo MULTIPLE. Il linguaggio HTML - Cristina Fregni

<TEXTAREA>…</TEXTAREA> Aree di Testo Permettono di far inserire testo all’utente come all’interno di un editor, ammettendo quindi la composizione di un testo su più righe. Si definisce con il tag doppio: <TEXTAREA>…</TEXTAREA> Il linguaggio HTML - Cristina Fregni

Il linguaggio HTML - Cristina Fregni Gli attributi che si possono utilizzare nell’area di testo sono indicati nella seguente tabella: Attributo Definisce… NAME il nome per richiamare l’oggetto durante l’elaborazione dei dati. ROWS=“n” il numero di righe visibili. COLS=“n” la larghezza in caratteri. WRAP= “virtual/off” se il testo va a capo automaticamente o solo quando l’utente preme INVIO. Il linguaggio HTML - Cristina Fregni

Formattazione di un Form Il formato di un modulo può essere modificato inserendo nella sua definizione i tag o attributi descritti nella tabella seguente: Inserire… Per…. <FIELDSET> <LEGEND>Etichetta cornice</LEGEND> Elementi del form da raggruppare </FIELDSET> raggruppare un insieme di elementi del form in una cornice. <LABEL FOR=IDControllo> Valore etichetta </LABEL> inserire un’etichetta. Si associa a un altro controllo mediante gli attributi ID del campo e della label. TABINDEX determinare l’ordine di input dei dati. L’attributo va inserito nel tag <INPUT>. Il valore 1 determina il campo con il focus. Il linguaggio HTML - Cristina Fregni