Web Coding Prototipazione di ipertesti e siti web in HTML ed introduzione alla creazione di stili grafici con fogli di stile CSS.
|
|
|
- Franca Buono
- 5 anni fa
- Visualizzazioni
Transcript
1 Prototipazione di ipertesti e siti web in HTML ed introduzione alla creazione di stili grafici con fogli di stile CSS. Unità Didattica UD02: Impostare URL, link, immagini, tabelle e moduli in HTML Fablab Design
2 Struttura di un documento HTML ed ereditarietà Gerarchia degli elementi e propagazione delle proprietà Fablab Design
3 Struttura di un documento HTML Osserviamo il codice a sinistra; la sua rappresentazione gerarchica può essere l immagine a destra: <html> <head> <title>struttura del documento</title> </head> <body> <h1>titolo</h1> <div> <p> Primo <a href="pagina.htm">paragrafo</a> </p> </div> <p>secondo<b>paragrafo</b></p> </body> </html>
4 Gerarchia degli elementi di un documento Il documento è in effetti una perfetta forma di gerarchia ordinata in cui tutti gli elementi hanno tra di loro una relazione del tipo genitore-figlio. PARENT-CHILD in inglese; dicitura importante perchè utilizzata nei linguaggi come DOM o Javascript: ogni elemento è genitore e/o figlio di un altro. Un elemento si dice genitore (parent) quando contiene altri elementi. Si dice figlio (child) quando è racchiuso in un altro elemento. In base a queste indicazioni il nostro documento ha le seguenti caratteristiche: 1. BODY è figlio di HTML, 2. BODY è anche genitore di H1, DIV e P. 3. P è a sua volta genitore di un elemento B.
5 Gerarchia ed ereditarietà Anche BODY è genitore di B? Non proprio. Serve un'altra distinzione, quella tra antenato (ancestor) e discendente (descendant). La relazione parent-child è valida solo se tra un elemento e l'altro si scende di UN livello. (Esattamente come in un albero familiare si indica la relazione tra padre e figlio). HEAD è figlio di HTML A è figlio di P ecc. Tra DIV e A, invece si scende di due livelli: diciamo allora che DIV è un antenato di A e che questo è rispetto al primo un discendente. C'è un solo elemento che racchiude tutti e non è racchiuso: HTML. Si dice infatti che HTML è l'elemento radice (root). NB: attenzione a non fraintendere: l'elemento radice di un documento (X)HTML non è BODY. HTML inoltre, non è una semplice dichiarazione ma a tutti gli effetti un TAG alla stregua di tutti gli altri.
6 Ereditarietà delle caratteristiche In un documento HTML tutte le proprietà di un tag vengono applicate anche a tutti i tag discendenti. Nel caso di proprietà in conflitto, ovvero quando sia per il tag antenato sia per il discendente vengano applicati valori diversi per una stessa caratteristica, prevale il valore attribuito al discendente
7 URL, nomi e percorsi Indirizzi per il collegamento delle risorse web Fablab Design
8 Riferimenti alle risorse esterne alla pagina Un documento come una pagina web è composta dalla parte di testo e da altre risorse di carattere non testuale come immagini, contenuti multimediali ma anche librerie di stili e di script. Queste risorse sono di fatto «esterne» alla pagina stessa. Non sono cioè contenute nel file HTML. Un esempio intuitivo di questo tipo di risorse sono le immagini; esse infatti sono semplicemente «collegate» alla pagina, non inserite nel codice. Per queste risorse, il codice HTML prevede l utilizzo di «indirizzi» da cui il browser può prelevare (scaricare) la risorsa stessa. Ecco perché, anche una singola pagina web non è quasi mai un solo file ma un gruppetto di file: tipicamente troviamo: il file HTML le immagini i fogli di stile gli script
9 Percorsi assoluti e percorsi relativi I siti web composti di poche pagine possono essere gestiti utilizzando una sola cartella. La generalità dei siti però ha molte pagine per cui è necessario mettere ordine alla numerosità dei file necessari. Nella maggioranza dei siti web abbiamo esigenze come ad esempio: inserire le immagini in una cartella specifica o in più cartelle dedicate dividere il sito in varie sezioni utilizzando cartelle diverse gestire tutti i documenti dello stesso tipo in modo più efficiente organizzandoli in cartelle dedicate I siti web sono dunque organizzati in strutture ordinate. Si parla anche di albero di un sito a sottolineare la natura strettamente gerarchica di tale struttura. L organizzazione di un sito in cartelle e sottocartelle è da tempo la prassi. Per questo occorre imparare a muoverci tra i vari file che costituiscono il sito, in modo da essere in grado di creare collegamenti verso i documenti che risiedono ai diversi livelli di profondità della struttura. I collegamenti si effettuano sulla base di un «indirizzo», detto anche «percorso» che può essere di due tipi: ASSOLUTO RELATIVO
10 I percorsi assoluti e gli URL Indipendentemente dalla cartelle in cui è localizzata la risorsa a cui vogliamo puntare, i percorsi assoluti contengono per esteso la sequenza delle cartelle e sottocartelle che portano dalla radice alla risorsa stessa. Ad esempio, l indirizzo è un percorso assoluto ed è composto dei seguenti elementi: Indica al browser di utilizzare il protocollo per navigare nel web (l http) css/ Indica che la risorsa si trova sul sito « Indica che la risorsa indicata si trova all interno della cartella "css" index.html Indica che il file da collegare è quello chiamato «index.html» Per tutte le risorse ospitate sui server web pubblici esiste dunque un percorso assoluto univoco da cui prelevarle; questo percorso è detto URL (Universal Resource Locator). NB: per collegare una risorsa ospitata su un server diverso da quello del nostro sito è ncessario utilizzare un URL assoluta.
11 Percorsi relativi Raramente si sviluppa un sito web operando direttamente all interno delle cartelle pubbliche del server. Spesso si lavora «in locale» ovvero sul nostro computer o su un computer della nostra rete interna, oppure si lavora su un server provvisorio e si effettua il «deploy» definitivo dei files una volta terminato lo sviluppo. I tutti questi casi l utilizzo di percorsi assoluti è un serio problema. Infatti lo spostamento dei files comporta spesso il cambiamento della «radice» dei percorsi, ovvero il nome o l indirizzo IP del server provvisorio oppure anche la lettera che identifica l unità disco in cui sono memorizzati i files. E prassi consolidata utilizzare per tutti i riferimenti alle risorse dello stesso sito dei percorsi relativi I percorsi relativi fanno riferimento alla posizione delle risorse in base a quella in cui ci si trova il documento che le collega. Ad esempio la posizione delle immagini di una pagina web è relativa a quella della posizione del file HTML che le deve visualizzare. NB: il percorso relativo più semplice è quello in cui documento e risorsa collegata si trovano nella stessa cartella. In questo caso è sufficiente scrivere il nome del file senza i nomi di alcuna cartella.
12 Percorsi relativi Vediamo ora un esempio in cui dalla pagina «index.html» si voglia far riferimento alla pagina «interna.html», che si trova all interno della cartella «interna», che a sua volta si trova all interno della cartella «prima». Il percorso da indicare sarà seguente: «prima/interna/interna.html» Si noti che il percorso non inizia da una «radice» (« «C:/» o simili) ma dalla prima sottocartella in cui si deve passare per raggiungere il file «interna.html».
13 Percorsi relativi Ora un esempio opposto al precedente: dalla pagina «interna.html» vogliamo far riferimento a una pagina ("index.html") che si trova più in alto di due livelli: In questo caso il percorso sarà il seguente: «../../index.html» La notazione «../» (doppio punto + slash) è appunto la notazione che indica di risalire di un livello l albero gerarchico delle cartelle. Nell esempio, dovendo risalire due livelli occorre inserire la notazione due volte.
14 Altre note A volte si può trovare un percorso indicato in questo modo: «/css/index.html». Il primo elemento è uno slash invece che il nome di una radice o di una cartella. Si tratta di una notazione che in origine era supportata dai sistemi Unix ma che oggi è supportata anche da quelli Windows: il carattere '/' indica la directory principale del sito, altrimenti detta «root». Si tratta dunque di un modo alternativo di esprimere percorsi assoluti. Altra Un'altra cosa importante da sapere è che quando metterete il vostro sito all'interno dello spazio web, l'indicazione della index all'interno di una directory è facoltativa. Al posto di questo: è sufficiente indicare la directory: Verificate solo con il vostro gestore dello spazio web (cioè "hosting"), se le pagine index della directory devono avere forma index.html, index.htm, index.asp, index.php, home.asp, o altro.
15 Note sulla nominazione dei file Una volta realizzato un sito web, per pubblicarlo occorre caricarlo su un server pubblico. Esistono due famiglie di sistemi operativi orientati a svolgere la funzione server: Windows e Unix. Questi due sistemi operativi utilizzano differenti modi per gestire i file; vediamo alcuni accorgimenti: Maiuscole e minuscole possono fare la differenza. In ambiente Unix (e Linux) la stessa lettera scritta nei due modi viene trattata come due caratteri distinti mentre in ambiente Windows questo non accade. Quindi il file Index.html può convivere con un file index.html SOLO su server Unix/Linux, e sono due file distinti. E consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti non sempre vengono interpretati correttamente), meglio ovviare a questa necessità con un "trattino basso" (cioè "_"). Ad esempio: mio_file.html Nota sui collegamenti: Quando si crea un collegamento occorre fare attenzione a non avere una notazione simile a questa: «file:///c cartella/nomefile.html» Succede utilizzando alcuni editor lavorando in locale: significa che si sta facendo riferimento (assoluto) al proprio computer e quindi quando si caricano i file sullo spazio spazio web i collegamenti non funzioneranno più.
16 Elenchi, link, immagini e tabelle Elementi per costruire liste, collegamenti, inserire immagini e tabelle Fablab Design
17 Gli elenchi dell HTML Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le «liste», che sono sostanzialmente di due tipi: Elenchi ordinati Elenchi non ordinati Entrambi i tipi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell elenco. La sintassi ha quindi questa forma: <elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento </elenco> come si può vedere, il tag che individua l elemento della lista non ha bisogno di chiusura (la sua chiusura, in questo caso, è opzionale). Le liste di definizioni hanno una struttura leggermente diversa che vedremo a breve.
18 Elenchi ordinati Detti anche «elenchi numerati», gli elenchi ordinati sono contraddistinti dall enumerazione degli elementi che compongono la lista. Avremo quindi una serie progressiva ordinata e individuata da lettere o numeri. Ecco un esempio di codice Il tag da utilizzare per aprire un elenco ordinato è <ol> («ordered list») e gli elementi sono individuati dal tag <li> («list item»). contenuto che precede la lista <ol> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> </ol> cesto che segue la lista 1. primo elemento 2. secondo elemento 3. terzo elemento
19 Elenchi ordinati - tipi di numerazione Da notare che il tag che individua l elenco lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (come avviene per il <p>); fa eccezione però l inclusione di un elenco all interno di un elenco preesistente: in questo caso non viene lasciato spazio, né prima, né dopo. Gli elementi dell elenco sono sempre rientranti di uno spazio verso destra come accade utilizzando i programmi di videoscrittura. Lo stile di enumerazione visualizzata di default dal browser è quello numerica. E però possibile indicare uno stile differente specificandolo per mezzo dell attributo type. Ad esempio: <ol type="a"> <li>primo elemento <li>secondo elemento <li>terzo elemento </ol>
20 Elenchi non ordinati Anche detti «elenchi puntati», gli elenchi non ordinati sono individuati dal tag <ul> ("unordered list") Gli elementi dell elenco sono contraddistinti anch essi dal tag <li> <ul> <li>primo elemento <li>secondo elemento <li>terzo elemento </ul> il tipo di segno grafico utilizzato per individuare gli elementi dell elenco di default dipende dal browser, ma di solito è un «pallino pieno». Anche per questo simbolo sono possibili alcune varianti sempre utilizzando l attributo TYPE del tag <ul>. NB: anche l attributo type è deprecato dal W3C, perché si tratta di una caratteristica che riguarda la formattazione, e dunque andrebbe effettuata utilizzando i CSS. Con i fogli di stile c è infatti anche la possibilità di scegliere un immagine (ad esempio una GIF) come segno distintivo per l elenco puntato.
21 Elenchi nidificati Nel caso di annidamento delle liste, indentazione e simboli vengono adeguati automaticamente: <ul> <ul> <li>primo della 1a lista</li> <li>secondo della 1a lista</li> <li>primo della 2a lista</li> <li>secondo della 2 lista</li> <ul> </ul> <li>primo della 3a lista</li> </ul> <li>terzo della 1a lista</li> </ul>
22 Link e ipertestualità Una delle caratteristiche su cui si basa il web è il fatto di essere costituito non da testi ma da ipertesti. I collegamenti ipertestuali o link sono il «ponte» che consente di passare da un testo ad un altro I link sono formati da due componenti: Il contenuto «attivo», ovvero quella parte della pagina che può essere «cliccata» per spostarsi ad un altra pagina (tipicamente un testo o un immagine). Essendo la parte fondamentale dell interazione, l utente deve essere sempre in grado di distinguerlo dal resto del contenuto della pagina. La risorsa verso cui il collegamento punta. Può essere o un altra pagina (sullo stesso sito o su un sito diverso), oppure un collegamento «interno» a un punto della pagina in cui si trova.
23 Link «esterni» La sintassi per creare un link con riferimento a una pagina web diversa da quella di partenza è il seguente: <a href=" Iuav di Venezia</a> Il nome del tag <a> deriva da «anchor», ovvero àncora, l elemento che tiene collegati origine e destinazione del flusso di navigazione. Il rendering dell esempio sarà il seguente: Università Iuav di Venezia Facendo «click» sopra la scritta, l utente visualizzerà la home page dell Università Iuav raggiungibile dell indirizzo inserito nell attributo HREF del tag <a>. Per ciò che riguarda la sintassi, il tipo di documento di destinazione è indifferente. Sia che si tratti di una pagina HTML di un sito, un immagine, un file.pdf, un file.zip, o un file.exe la sintassi è la stessa; sarà il browser a comportarsi in modo diverso a seconda del tipo di risorsa. Tipicamente: Le immagini.gif,.jpg,.png vengono direttamente visualizzate nel browser I documenti.html vengono direttamente visualizzate nel browser Alcuni documenti come i.pdf o i.doc possono venire visualizzati dal browser tramite un «plugin» oppure scaricati come download con relativa richiesta della posizione in cui salvare il file. I file.zip, file.exe e molti altri vengono scaricati con la funzione di download.
24 Protocolli nell HREF La navigazione tra le pagine web e i download avvengono secondo un protocollo definito HTTP (Hypertext Transfer Protocol). Esistono altri protocolli associati ad altre funzioni come ad esempio l FTP definito per trasferire files tra cartelle locali e remote. Un protocollo specifico è denominato MAILTO. Serve ad attivare un programma di posta elettronica. Questo protocollo è utilizzabile nei link con la seguente modalità: <a href="mailto:pippo@gmail.com">invia una a Pippo</a> Il click sul collegamento aprirà il programma di posta elettronica predefinito dell utente.
25 Link «interni» È possibile anche creare un indice interno al documento, utilizzando link «interni». Per creare un link interno si utilizza l attributo NAME anziché HREF. NAME definisce il nome del punto da contrassegnare all interno di una pagina. Si noti che questa tecnica ha un senso in pagine relativamente lunghe che comportano un abbondante scroll. <a name="primo">lorem ipsum factum. eccetera </a> La mancanza dell attributo HREF rende questi contrassegni «invisibili» all utente. Tuttavia essi servono come riferimento per lo «scroll» della pagina che avviene cliccando un secondo elemento così definito: <a href="#primo">vai al primo paragrafo</a> Il cancelletto indica che il collegamento deve cercare un contrassegno chiamato «primo» all interno della pagina stessa. NB: se non si specifica il nome del contrassegno a cui si vuol puntare, viene comunque creato un link che punta ad inizio pagina. Per creare un indice interno alla pagina si procede dunque in due fasi distinte: 1. creazione del contrassegno a cui puntare (attributo NAME) 2. creazione del link con relativo riferimento interno (attributo HREF con cancelletto) NB: è fondamentale non confondere le due fasi.
26 Attributi dei link Abbiamo due importanti attributi del tag <a>: Il primo è TARGET. LA seguente sintassi: <a href=" target ="_blank" >Università Iuav di Venezia</a> Apre la nuova pagina in una nuova finestra del browser anziché sostituire quella di origine. E consuetudine aprire i link su _blank quando si puntano pagine di altri siti mentre lasciare il default per le pagine interne. Altri valori per TARGET sono «_parent», «_self» e «_top» ma hanno significato nell impiego dei frames, cosa che è deprecata. Un secondo attributo è TITLE (da non confondere con il tag presente in intestazione): <a href=" title="università IUAV" >Università Iuav di Venezia</a> TITLE attiva il cosiddetto «tooltip» per il link, ovvero l etichetta che compare passando col mouse sopra il link senza cliccarlo. L utilizzo di etichette con questo attributo è una pratica fortemente consigliata per migliorare l usabilità delle pagine web.
27 Immagini i formati consentiti Le immagini ovviamente possono essere inserite non solo come sfondo di una pagina web, ma anche come contenuto. I formati ammessi nel Web sono sostanzialmente tre: GIF (Graphic Interchange Format): le GIF sono immagini con non più di 256 colori (dunque con colori piatti e senza sfumature), come grafici o icone. Supporta la trasparenza anche se non con le sfumature possibili col il PNG. JPG (Joint Photographic experts Group) supporta i 16M di colori, è l acronimo del gruppo di ricerca che ha ideato questo formato, idoneo per le immagini di qualità fotografica. Non supporta le trasparenze. Permette livelli di compressione regolabili in funzione della qualità richiesta. PNG (Portable Network Graphic) un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è appunto proprietario); anch esso supporta i 16M di colori ed è ormai letto da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno in primis il supporto al canale alfa che lo rende adatto a creare trasparenze molto morbide. Il livello di compressione è in genere intermedio tra GIF e JPG. NB: qualsiasi altro formato non è supportato (psd, tiff, ecc) e impedisce la visualizzazione dell immagine nella pagina oppure attiva la funzione di download del file.
28 Il tag IMG e le immagini Il tag per inserire una immagine è <img>; la sintassi è la seguente: <img src=" /> L attributo essenziale è SRC, che significa «source», ovvero origine; tramite SRC si specifica l indirizzo web da cui recuperare l immagine da visualizzare. Per il riferimento al file immagine valgono tutte le regole già trattate riguardo ai percorsi e i nomi dei file. Le immagini sono il primo elemento «esterno» alla pagina che trattiamo. Occorre comprendere come l accesso ai contenuti di un sito sia per lo più un processo ASINCRONO, ovvero regolato da flussi di informazioni che hanno tempi correlati ma non sincronizzati. Un esempio può chiarire meglio il concetto: Immaginiamo una pagina web con due immagini al suo interno. Il browser per prima cosa scaricherà il file HTML e lo interpreterà. Dalla lettura del codice capirà che deve scaricare altri 2 files (per esempio due JPG), inizierà il download, ma nel frattempo inizierà il rendering del testo. Il rendering completo (e l eventuale riassetto del layout) avverrà nel momento in cui entrambi i JPG saranno nella cache. NB: normalmente le immagini e i multimedia sono gli elementi «pesanti» di una pagina; se le immagini sono delle grafiche necessarie al layout occorre fare attenzione a renderle il più «leggere» possibile per velocizzare l impaginazione ed evitare fastidiosi effetti di riassetto/riallineamento delle varie parti della pagina.
29 Posizione del tag IMG e attributi principali L immagine NON è un elemento di blocco. Si allinea con il testo nel punto in cui viene inserito il tag e aumenta l interlinea in base alla sua altezza in pixel. Gli attributi principali del tag IMG sono i seguenti: WIDTH / HEIGHT Larghezza e altezza (in pixel). Non sono obbligatori ma è opportuno utilizzarli in modo che il browser disponga fin dall inizio lo spazio sulla pagina evitando un riassetto durante il caricamento. ALT E una didascalia «non-scritta» dell immagine; viene letta dai software per ipovedenti e, in alcuni browser attiva un tooltip. TITLE E l attributo specifico per il tooltip, supportato da tutti i browser. BORDER E lo spessore del bordo in pixel. Se lo spessore è impostato a 0 non viene applicato alcun bordo all immagine, mentre se viene omesso il bordo è di 1 pixel e, nel caso l immagine sia in un tag <a> assume gli stili dei link. Ecco un esempio che li utilizza tutti: <img src="logo.gif" title="logo aziendale" alt="logo aziendale" width="90" height="10" border ="1">
30 Immagini con collegamento ipertestuale Per rendere un immagine un collegamento ipertestuale è sufficiente nidificarla all interno di un tag <a>: <a href=" <img src="immagine.gif" border="0" /> </a> Si noti l attributo BORDER a zero per evitare un antiestetico bordo attorno all immagine. Oppure anche: <a href=" Università Iuav di Venezia <br /> <img src="immagine.gif" border="0" /> </a> Dove abbiamo un link composito formato da testo (codice in rosso) e immagine a seguire (codice in blu), entrambi parte del collegamento ipertestuale.
31 Allineamento delle immagini Un attributo essenziale del tag IMG è ALIGN. ALIGN consente l allineamento dell immagine rispetto al flusso del testo. Di seguito sintassi e valori ammessi: <img src="immagine.gif" align="left" /> bottom (default) middle top left right
32 Spazi attorno alle immagini Altri due pratici attributi del tag IMG sono HSPACE e VSPACE che governano gli spazi tra immagine e testo attorno ad essa nelle due direzioni. <img src="immagine.gif" hspace="20" vspace ="20" /> VSPACE HSPACE HSPACE VSPACE
33 Le tabelle in HTML Le tabelle HTML hanno avuto in passato un importanza fin troppo elevata nella realizzazione dei siti web visto che sono state largamente impiegate per realizzare i layout delle pagine oltre che per organizzare i contenuti per righe e colonne. Oggi l impaginazione mediante tabelle è fortemente sconsigliato e disapprovato dal W3C che, prima con i fogli di stile, poi con le novità dell HTML 5, ha definito modalità più efficaci e versatili per suddividere le pagine nelle diverse sezioni di contenuto. I tag necessari per realizzare tabelle sono i seguenti: <table> apre la tabella <tr> «table row»: indica l apertura di una riga <td> «table data»: indica una cella all interno di una riga (ovviamente i tre tag vanno chiusi con </table>, </tr> e </td>) La prima cosa che si nota è la mancanza di un tag per le colonne. Infatti, la natura sequenziale del codice HTML fa si che la tabella venga definita come serie di righe con n celle e che le colonne vengano a generarsi in funzione di queste. Una delle proprietà più interessanti delle tabelle HTML è quella di auto-adattarsi sia al contenuto sia al contenitore facilitando un utilizzo razionale dello spazio.
34 Le tabelle in HTML Ecco un esempio di sintassi per una tabella e relativo rendering: <table border="1"> <tr> <td>prima cella</td> <td>seconda cella</td> </tr> <tr> <td>terza cella</td> <td>quarta cella</td> </tr> </table> Nell esempio vediamo già il primo attributo di <table> ovvero BORDER, con cui è possibile specificare lo spessore dei bordi in pixel. La resa grafica di default è generalmente poco gradevole ma è possibile migliorarla sensibilmente con i fogli di stile.
35 Dimensionamento delle celle di una tabella Gli attributi WIDTH e HEIGHT consentono di specificare larghezza e altezza in pixel e possono essere utilizzati sia per <table>, sia per <tr> e <td>. Oltre alle misure in pixel è possibile utilizzare dimensioni in percentuale con l apposito carattere (es: 50%), nel qual caso le dimensioni si adattano in funzione del contenitore in cui è inserita la tabella. <table width="300" border="1"> <tr> <td>prima cella</td> <td>seconda cella</td> </tr> <tr> <td>terza cella</td> <td>quarta cella</td> </tr> </table> <table width="75%" border="1"> <tr> <td width="25%">prima cella</td> <td width="75%">seconda cella</td> </tr> <tr> <td width="25%">terza cella</td> <td width="75%">quarta cella</td> </tr> </table>
36 Raggruppamento di celle in una tabella Esistono due attributi per unire tra loro le celle di una tabella: si tratta di COLSPAN e ROWSPAN. Si applicano entrambi solo al tag <td>. Il primo permette di specificare quante colonne occupa la cella, il secondo quante righe. L utilizzo di questi attributi è tutt altro che intuitivo per cui molto spesso ci si avvale di editor grafici. La sintassi negli esempi che seguono: <table border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2" align="center"> cella unita </td> </tr> </table> cella unita <table border="1"> <tr> <td> </td> <td rowspan="2" align="center"> cella unita </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> cella unita NB: le celle vuote, ovvero senza alcun carattere di contenuto vengono renderizzate senza bordo per cui è consuetudine inserire uno spazio con la sequenza
37 Attributi del tag TABLE Per quel che riguarda il tag <table>, vediamo i principali attributi, quelli che ci permettono di regolare le distanze tra i margini della tabella (o della cella) e il suo contenuto: border (vedi sopra) specifica la larghezza dei bordi di una tabella (in pixel) cellspacing specifica la distanza (in pixel) tra una cella e l altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri cellpadding indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla.
38 Attributi validi per TABLE e per le celle Oltre a WIDTH e HEIGHT di cui abbiamo già trattato, altri tre attributi importanti applicabili sia alla tabella sia alle celle sono BGCOLOR, BACKGROUND e ALIGN. I primi due attributi hanno comportamento analogo a quanto visto per il tag body permettendo infatti di applicare un colore o una immagine allo sfondo della tabella o della singola cella. <table width="300" border="1" align="center" bgcolor="#00ff00"> <tr> <td width="50%" background="sfondo.gif"> <font color="#ffffff">prova</font> </td> <td width="50%"> </td> prova </tr> </table> Per quanto riguarda l attributo ALIGN va specificato che il comportamento sulla tabella è diverso da quello sulle celle. Nel caso della tabella, l allineamento riguarda la posizione della tabella rispetto alla pagina; nel caso delle celle riguarda invece la posizione del contenuto rispetto alla cella.
39 I moduli interattivi in HTML Elementi per l input di dati da inviare via Internet Fablab Design
40 Interazione e uso dei moduli Uno dei fattori che ha decretato il successo del Web è senz'altro la possibilità di interagire in modo bidirezionale, ovvero di inviare informazioni e non solo di scaricarle. Per realizzare questo tipo di servizi sono necessari strumenti co cui l utente può inserire i dati da inviare ad un sistema di gestione; per farlo si utilizzano i moduli, detti anche FORM. ACTION Invio dati Pagina di programmazione lato server (cgi, asp, php, js etc.. NAME
41 Tag FORM e attributi NAME e ACTION Il tag da utilizzare per creare un modulo è <form>. Il tag form è un elemento di blocco perciò lascia uno spazio prima dell apertura e dopo la chiusura. I due principali attributi del tag <form> sono NAME, che contraddistingue il «pacchetto dei dati inviato» e ACTION, che altro non è se non la URL di una pagina sul server che si occupa di elaborare i dati inviati. Ecco la sintassi di utilizzo di FORM: <form name="datiutenti" action="paginarisposta.php"> campi da compilare </form> NAME Indica il nome del form ACTION URL della pagina
42 I due metodi di invio dei dati e l attributo METHOD Una volta creato il form dobbiamo scegliere tra i due metodi di invio: GET e POST utilizzando l apposito attributo METHOD. Metodo GET: la pagina di risposta viene contattata e contemporaneamente le vengono inviati i dati tramite la «query string» che èuna parte della URL. Metodo POST: l'invio dei dati avviene in uno step successivo a quello della chiamata della pagina. Le due fasi sono: 1. viene contattata la pagina sul server che deve processare i dati, 2. vengono inviati i dati stessi Differenze rispetto a GET: a) i dati inviati non compaiono nella URL; è quindi preferibile se non si desidera che l utente li veda; b) la quantità di dati inviabili è superiore ed è possibile inviare immagini o altri files. In questo esempio si utilizza il metodo GET: <form name="datiutenti" action="paginarisposta.php" method="get">.</form>
43 I campi dei moduli Esistono dei tag che identificano i «campi» utili alla compilazione del modulo. Essi variano in funzione del tipo di ausilio che si vuole dare all utente (ad esempio, le caselle combinate permettono la scelta tra una lista di voci precompilata). La gran parte dei tipi di campo si realizza con l impiego del <input>. Si tratta di un tag vuoto, dotato di attributo TYPE che consente di specificare le varianti (es. testo, pulsante, lista ecc). Vediamo un primo esempio, la casella di testo semplice: <input type="text" name="nome" value="inserisci il tuo nome" /> In questo esempio vediamo due degli attributi più diffusi, NAME e VALUE. L attributo VALUE è valido per la maggior parte degli elementi di un form: definisce il contenuto del campo. Anche l attributo NAME è valido per la maggior parte degli elementi: esso definisce l etichetta associata al campo, appunto, il suo nome.
44 I pulsanti Altri esempi: 3 tipi di pulsante: Il tipo «button» è un pulsante generico che si utilizza per lo più con javascript. <input type="button" value="pulsante inattivo"> Il pulsante «submit» invece ha lo stesso aspetto ma è il pulsante più importante del form; salvo poche eccezioni, deve essere sempre presente in quanto è il controllo con cui l utente effettua l invio dei dati alla pagina indicata in ACTION: <input type="submit" value="invia i dati"> Un terzo tipo di pulsante è il «reset» che riporta tutti gli elementi del form allo stato iniziale: <input type="reset" value="ricomincia..."> L attributo VALUE in questo caso è il testo che compare sul pulsante stesso. Non è un dato che si invia.
45 I pulsanti Il comportamento di «submit» e «reset»: <form action=" <input type="submit" value="vai al portale IUAV"> </form> CLICK <form action="..."> <input type="text" value="scrivi un testo"> <input type="reset" value="cancella testo"> </form> CLICK TESTO
46 Il pulsante grafico Il tipo «image» ci consente di utilizzare come bottoni del form delle vere e proprie immagini e assegnare loro un valore grazie a JavaScript; in questo caso non si tratta propriamente di un bottone ma la funzionalità è la medesima. <input name="invia" type="image" src="invia.gif" alt="invia dati" title="invia dati" width="78" height="38"> OK L immagine «invia.gif» assume il comportamento di un «submit». Gli attributi del campo immagine sono molto simili a quelli del tag <img>. Il pulsante grafico ha il grande vantaggio di rendere illimitata la gamma di possibilità nella realizzazione di pulsanti di invio ma ha uno svantaggio in termini di usabilità: a schermo non dà l effetto di «pressione» di un tasto, tipico dei pulsanti classici.
47 Varianti del campo di testo Per i campi di testo esistono due principali varianti : Text e Textarea. Per l INPUT TEXT, visto all inizio, sono previsti i seguenti attributi: MAXLENGTH indica il numero massimo di caratteri che l'utente può inserire, SIZE indica le dimensioni del campo di testo (in numero di caratteri NON in pixel). <input name="miotesto" type="text" value="prova" size="40" maxlength="200" /> La TEXTAREA è invece un campo adatto all inserimento di testi di una certa lunghezza e con più di una riga. Non è un tipo di <input> bensì un tag preciso: <textarea> <textarea name="testo" rows="5" cols="40"> qui puoi scrivere il tuo testo </textarea> Con gli attributi ROWS e COLS si aatribuiscono le dimensioni in righe e colonne in unità carattere (non in pixel) TEXTAREA non è un tag vuoto e non è prevista una lunghezza massima.
48 Ancora un campo di testo: «password» L INPUT type PASSWORD è identico al type TEXT con la sola eccezione di visualizzare asterischi o pallini (dipende dal browser) al posto dei caratteri: <input type="password" maxlength="16" size="40" name= "password" />
49 Scelta di opzioni Per la scelta di opzioni abbiamo tre tipi di strumenti: 1. La scelta ad opzioni multiple (CHECKBOX) 2. La scelta ad opzione esclusiva (RADIO BUTTON) 3. La lista di opzioni - multipla o esclusiva (CASELLA COMBINATA) I primi due offrono visibilità completa a tutte le opzioni quindi sono più adatte a rose di pochi elementi mentre la lista di opzioni è «scrollabile» e si chiude automaticamente quindi consente di gestire numerose opzioni in poco spazio. Vediamo la sintassi per i checkbox, adatti per scelte multiple, e relativo rendering: <input type="checkbox" name="html" value="html"/> html <br /> <input type="checkbox" name="css" value="css"/> css <br /> <input type="checkbox" name="javascript" value="javascript"/> JavaScript NB: si noti come gli elementi definiti da questo codice HTML siano effettivamente 3 campi diversi.
50 Scelta di opzioni Nell esempio con i radio button optiamo per un layout orizzontale, quindi senza <BR />: HTML<input type="radio" name="linguaggio" value="html"/> CSS <input type="radio" checked="checked" name="linguaggio" value="css"/> JavaScript <input type="radio" name="linguaggio" value="javascript"/> Essendo il radio button lo strumento per le scelte ad opzione esclusiva (una sola scelta valida), il gruppo di elementi è considerato un unico campo. Per questo motivo il NAME con lo stesso valore è ciò che raggruppa le diverse opzioni della scelta. L attributo VALUE, come per i checkbox, è il contenuto del campo che viene inviato alla pagina di destinazione. Vediamo inoltre anche l attributo CHECKED che deve essere valorizzato con il testo «checked» che consente di pre-impostare una scelta iniziale. CHECKED è valido anche per i checkbox.
51 Scelta di opzioni Per creare un menu di opzioni si utilizza un tag apposito: <select>. Con questo tag, ciascuna voce deve essere compresa all'interno del tag <option> (con chiusura opzionale). Il valore viene sempre specificato con l'attributo VALUE. Analogo all attributo CHECKED visto precedentemente, con l'attributo SELECTED si può pre-impostare una scelta iniziale. Inoltre con l attributo MULTIPLE è possibile attivare la scelta multipla: <select name="siti" multiple="multiple"> <option value="iuav" selected="selected"> <option value="google"> <option value="facebook"> </select> Esiste infine l attributo SIZE con cui è possibile decidere di tenere la casella aperta con un numero fisso di righe visibili (es. <select name="siti" size="3"> - casella aperta con tre righe visibili e scrollbar per lo scorrimento).
52 Campi speciali Abbiamo infine due campi «speciali» che si utilizzano con i moduli più complessi: HIDDEN e FILE. Sono entrambi tipi del tag <input>. Il primo campo ha la seguente sintassi: <input type="hidden" name= "sessionid" value= "42533" /> E ha lo scopo di far transitare dei dati dal modulo alla pagina di destinazione senza che questi vengano visti dall utente, o quando non c è necessità che l utente li modifichi. E dunque un elemento che non viene renderizzato nella pagina. Il tipo FILE è invece molto utilizzato perché consente l upload di files dal computer dell utente al server remoto. Ecco la sintassi: <input type="file" name="fileutente" size="20" /> L attributo SIZE serve a specificare la larghezza dell elemento e si esprime in caratteri (non in pixel). Il rendering del tipo FILE è molto diverso da browser a browser ma in generale è composto da un pulsante con l indicazione «browse file», «scegli file» o similare e uno spazio dove viene visualizzato il nome del file dopo averlo selezionato.
53 Esercizio n.2 Fablab Design
54 Sviluppare una pagina di iscrizione ad esami universitari La pagina deve essere composta da due sezioni consecutive secondo le indicazioni a seguire: Contenuti sezione 1: Logo grafico dell ateneo con link all home page dello stesso. Immagine dell ateneo cliccabile con link verso una pagina web esistente. Tabella dei corsi di laurea. (layout a scelta) Elenco puntato con voci a scelta (es. istruzioni per la compilazione) e altro testo ritenuto necessario. Sfondi e colori a scelta. Contenuti sezione 2: un unico modulo che permetta: La selezione del docente e dell esame da sostenere tramite una casella combinata o altro metodo. (inserire alcune voci a scelta come esempio) L inserimento dei propri dati identificativi (nome cognome n. di matricola) in apposite caselle di testo. La conferma della prenotazione dell esame con un pulsante di invio. L azzeramento del modulo con un pulsante di reset.
I moduli HTML Interazione per l invio di informazioni in Internet
I moduli HTML Interazione per l invio di informazioni in Internet Sviluppo di siti web UD09 Fablab Design Interazione e uso dei moduli Uno dei fattori che ha decretato il successo del Web è senz'altro
URL, nomi e percorsi Indirizzi per il collegamento delle risorse web
URL, nomi e percorsi Indirizzi per il collegamento delle risorse web Sviluppo di siti web UD06 Fablab Design Riferimenti alle risorse esterne alla pagina Un documento come una pagina web è composta dalla
Elenchi, link, immagini e tabelle Elementi per costruire liste, collegamenti, inserire immagini e tabelle
Elenchi, link, immagini e tabelle Elementi per costruire liste, collegamenti, inserire immagini e tabelle Sviluppo di siti web UD07 Fablab Design Gli elenchi dell HTML Se abbiamo la necessità di inserire
Programmazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
D B M G Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
@2011 Politecnico di Torino 1
Concetti di base Programmazione Web Il linguaggio HTML HTML consente di annotare un testo per contrassegnare le parti che lo compongono Le annotazioni sono realizzate tramite i "tag" Visualizzare documenti
Programmazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
D B M G. Basi di dati. Programmazione Web: HTML. Programmazione Web. Il linguaggio Politecnico di Torino 1
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
D B M G. Basi di dati. Programmazione Web: HTML. Programmazione Web. Il linguaggio Politecnico di Torino 1
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
@2011 Politecnico di Torino 1
Il linguaggio HTML Programmazione Web Concetti di base Le interfacce utente in HTML I form Il passaggio dei parametri contenuti nei form Il linguaggio HTML Concetti di base Concetti di base HTML: HyperText
@2011 Politecnico di Torino 1
Il linguaggio HTML Programmazione Web Concetti di base Le interfacce utente in HTML I form Il passaggio dei parametri contenuti nei form Il linguaggio HTML Concetti di base Concetti di base HTML: HyperText
APPUNTI DI HTML (QUARTA LEZIONE)
APPUNTI DI HTML (QUARTA LEZIONE) 1. LA STRUTTURA BASE DELLE TABELLE Le tabelle sono una parte estremamente importante del codice HTML. Sono uno strumento indispensabile per gestire i layout grafici. Immaginiamo
Formattazione di liste
Formattazione di liste Con HTML si possono costruire liste puntate o numerate: Occorre definire l inizio e la fine della lista e poi definire ogni singolo elemento della lista. Le liste numerate si costruiscono
Elenchi puntati e numerati
Elenchi puntati e numerati Gli elenchi giocano un ruolo molto importante nei testi, ma anche nella definizione di elementi strutturali delle pagine HTML. Dal punto di vista dell organizzazione del testo
Modulo o Form in Html
Pagina dinamica E un documento contenente oggetti, dati e informazioni che possono variare anche in base all iterazione dell utente con il documento stesso. Un esempio classico è quello di una persona
HTML Terza lezione. Bruno Di Caprio
HTML 4.01 Terza lezione Bruno Di Caprio 0 Lezione precedente FORMATTAZIONE DEL TESTO: ELENCHI: Puntati Numerati Voci di elenco
Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML. Il Linguaggio HTML
Reti Il Linguaggio HTML Linguaggio HTML HTML = Hypertext Markup Language Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita
I campi di un form: come utilizzare il tag Input
Home -> Manuali & Tutorials -> Guida HTML I campi di un form: come utilizzare il tag Input Non c è form che si rispetti senza bottone di invio o un campo di inserimento di dati. La sintassi tradizionale
Informatica di base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05
Informatica di base Multid@ms Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 Le tabelle Creazione di una tabella: le tabelle vengono utilizzate sia per inserire dati che per migliorare
HTML 3. Liste puntate ed ordinate Immagini
HTML 3 Liste puntate ed ordinate Immagini Creazione di elenchi Elenchi puntati (elenchi non ordinati) Elenchi numerati (elenchi ordinati) Elenchi annidati Elenchi menu Elenchi glossario Tecnologie di Sviluppo
Corso di HTML. Prerequisiti. Modulo L2 B3-Immagini. Creazione di pagine web Visualizzazione pagine web. M. Malatesta B3-Immagini-05 09/01/2014
Corso di HTML Modulo L2 B3-Immagini 1 Prerequisiti Creazione di pagine web Visualizzazione pagine web 2 1 Introduzione In questa Unità diamo un approfondimento dell utilizzo del tag del linguaggio HTML
HTML Interazione con l utente
HTML Interazione con l utente Il web è interattivo e per questo motivo una pagina html deve prevedere la possibilità, per l'utente, di inviare informazioni o effettuare delle scelte. Il linguaggio HTML,
HTML: FORM. Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML: FORM Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Form Text Radio Select CheckBox TextArea Button ... L'elemento serve per delimitare un modulo
non è linguaggio di markup formato testo .htm .html interpretando
HTML Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML). HTML non è un linguaggio di programmazione! HTML non ha meccanismi per prendere delle decisioni o compiere
Il tag form indica l'inizio della costruzione di un modulo. Necessita del tag di chiusura
LE FORM Le form, note in italiano anche come moduli sono delle strutture che permettono all'utente di inserire dei dati o di effettuare delle scelte. Le form, prese singolarmente non sono nient'altro che
INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2. Internet + HTML + HTTP = WWW
1 INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2 Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML
Elenchi OL, gli elenchi ordinati (o elenchi numerati)
04 HTML elenchi Prof. Sabato Dario Pagina 1 di 5 Elenchi OL, gli elenchi ordinati (o elenchi numerati) Gli elenchi ordinati sono contraddistinti dall enumerazione degli elementi che compongono la lista.
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. L HTML non è un linguaggio di programmazione
Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML. Il Linguaggio HTML
Reti Il Linguaggio HTML Linguaggio HTML HTML = Hypertext Markup Language Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita
Cosa vuol dire HTML? Hyper Text Markup Language
IMPARIAMO Cosa vuol dire HTML? Hyper Text Markup Language PROGRAMMIAMO IN HTML? NO! L'HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica (layout)
Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono: <table>
LE TABELLE IN HTML Le tabelle sono una delle parti più importanti di tutto il codice HTML: nate sin dagli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile
Internet, il web e il linguaggio HTML. percorso 3. Form
Form Se le pagine web utilizzassero il linguaggio HTML limitatamente ai soli tipi di tag visti sino a questo punto, la comunicazione tra impianto tecnologico (computer, dati, programmi ecc.) ed utente
Corso di PROGRAMMAZIONE IN RETE
Corso di PROGRAMMAZIONE IN RETE Laurea Specialistica - Media Education Dr. Annamaria Bria 1 1 Dipartimento di Matematica Università della Calabria Riferimenti MANUALE http://www.w3.org/tr/1999/rec-html401-19991224/
HTML Sintassi di HTML Tag principali per i contenuti I Forms
Lezione 1 HTML Sintassi di HTML Tag principali per i contenuti Tag principali per i contenuti I Forms L HTML (HyperText Markup Language) g è il linguaggio gg di markup utilizzato per veicolare le informazioni
HTML il linguaggio per creare le pagine per il web
HTML: frame HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
Laboratorio Progettazione Web PHP e FORMs HTML - Lezione 8. Andrea Marchetti IIT-CNR 2011/2012
Laboratorio Progettazione Web PHP e FORMs HTML - Lezione 8 Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2011/2012 Architettura di una applicazione Web Browser Web HTTP Server Web Dati View Control
Tipi di testo. Esempio 4. Enfasi. Inserire immagini. Esempio 5 INFO WEB LEZIONE N.4
Tipi di testo INFO WEB LEZIONE N.4 RAVENNA, 13 MARZO 2008 All interno di un documento HTML è possibile inserire due tipi di testo Titoli Sei livelli di grandezza , ,, Paragrafi
HTML Settima lezione. 7 Aprile di Ivano Stranieri
HTML 4.01 Settima lezione 7 Aprile 2004 di Ivano Stranieri 0 Lezione precedente Cosa sono i FRAME A cosa servono i FRAME Sintassi Attributi Collegamenti e NOFRAME IFRAME Vantaggi e svantaggi dei FRAME
Corso di HTML. Prerequisiti. Modulo L2. B5-I frame. Percentuali Fattore di scala. M. Malatesta B5-I frame-07 09/01/ /01/2014
Corso di HTML Modulo L2 B5-I frame 1 Prerequisiti Percentuali Fattore di scala 2 1 Introduzione In questa Unità illustriamo la possibilità di dividere la pagina in aree indipendenti chiamate frame. I frame
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
Linguaggio HTML. Elementi di Informatica e Programmazione Università degli Studi di Brescia. Il Linguaggio HTML
Reti Linguaggio HTML 1 Il Linguaggio HTML n HTML = Hypertext Markup Language n Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita
MODULO 7 HTML HTML. HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali
MODULO 7 HTML MODULO 6 - HTML 1 HTML HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali Un sistema ipertestuale è un insieme di nodi connessi da collegamenti.
HTML Sesta lezione. 29 Marzo di Ivano Stranieri
HTML 4.01 Sesta lezione 29 Marzo 2004 di Ivano Stranieri 0 Lezione precedente Costruire una tabella Raggruppare righe (e colonne) Unire righe e colonne Attributi di e Come utilizzare
Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2
Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto
Corso di HTML. Prerequisiti. Modulo L2 B4 - Le tabelle. Concetto di tabella Coordinate di cella in una tabella. M. Malatesta B4-Le tabelle-06
Corso di HTML Modulo L2 B4 - Le tabelle 1 Prerequisiti Concetto di tabella Coordinate di cella in una tabella 2 1 Introduzione In questa Unità illustriamo il concetto e l uso delle tabelle in HTML. Le
<!-- TESTO DEL COMMENTO
Il corpo della pagina: il tag Come abbiamo già avuto modo di osservare, il tag definisce ed identifica il corpo della pagina, cioè la "porzione visibile" di un qualsiasi documento HTML. Avendo
IMMAGINI INTRODUZIONE
IMMAGINI INTRODUZIONE Prima di inserire le immagini nella pagina HTML, le stesse devono essere copiate all interno della cartella del progetto (Sito). La loro copia può avvenire o tramite Risorse del Computer
Il linguaggio HTML. <html> </html> I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura.
Il linguaggio HTML I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura. . I tag devono essere racchiusi dentro parentesi acute Il tag di chiusura
Laboratorio di Informatica (Chimica)
Laboratorio di Informatica (Chimica) HTML: Elementi Avanzati. Walter Cazzola Dipartimento di Informatica e Comunicazione Università à degli Studi di Milano. e-mail: cazzola@dico.unimi.it Walter Cazzola
HTML HTML HTML HTML. Un documento HTML contiene: Testo. Comandi HTML (tag). Collegamenti ad altri documenti.
Il linguaggio (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. L non è un linguaggio di programmazione ma un linguaggio
Introduzione al linguaggio HTML
Introduzione al linguaggio HTML 1 Richiami introduttivi (1) sito Internet (sito Web o sito WWW) insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate su un server
STRUTTURA BASE DELLA PAGINA HTML
INDICE INDICE... 1 Convenzioni e simboli usati... 1 STRUTTURA BASE DELLA PAGINA HTML... 1 Alcuni dei Principali TAG Html:... 2 Gli attributi dei TAG Html:... 2 ALIGN... 2 attributi del tag ... 2
HTML & MARKUP LANGUAGES 2. Informatica e grafica per il web docente: Gabbiadini Alessandro 1
HTML & MARKUP LANGUAGES 2 Informatica e grafica per il web 2017-2018 docente: Gabbiadini Alessandro 1 BODY Qui è racchiuso il contenuto vero e proprio del documento che viene visualizzato dal browser.
Il linguaggio HTML - Parte 5
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 5 Dott. Chiara Braghin braghin@dti.unimi.it Frame I frame (cornici) permettono di suddividere la finestra
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame I frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
HTML Lezione2 Le Immagini e i link. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML Lezione2 Le Immagini e i link Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Le immagini I formati supportati dal websono diversi e variano a seconda del browser adoperato.i
SOMMARIO. Prefazione... XI. Capitolo 1 - Le variabili dell ambiente di progettazione Web... 1
Prefazione... XI Capitolo 1 - Le variabili dell ambiente di progettazione Web... 1 HTML, XML e il futuro dei linguaggi per il Web... 2 Il linguaggio HTML: una breve introduzione storica... 2 Il linguaggio
LEZIONE NO. 3: LE TABELLE DI ATTILIO ABBIEZZI
HTML BASE LEZIONE NO. 3: LE TABELLE DI ATTILIO ABBIEZZI 1 gestire Tabelle La larghezza e l'altezza complessiva di una tabella viene indicata all'interno dell'attributo , il quale appunto
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame I frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
HTML il linguaggio per creare le pagine per il web
HTML: frame HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" I frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
Laboratorio Digitale 1
Informatica Corso di PROGRAMMAZIONE Applicata ai Beni IN Culturali RETE Laboratorio Digitale 1 Corso di Laboratorio Digitale 1 Corso di laurea comunicazione e DAMS Laurea Specialistica - Media Education
Creazione di tabelle.
Creazione di tabelle. Argomenti trattati: - Premessa: Cosa sono le tabelle in HTML. - Costruiamo una tabella: Come realizzare semplici tabelle con i tag principali ed i loro attributi. - Personalizziamo
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. HTML non è un linguaggio di programmazione ma
Le liste non ordinate
Le liste non ordinate Semplici elenchi preceduti da un pallino: segnala l inizio della lista precede ogni voce Attributi: disc(standard), square(quadrato pieno), circle(quadrato
HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte
HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo
HTML il linguaggio per creare le pagine per il web
HTML: frame HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
Tabelle. Esempio 20. Inserire righe e colonne. Dimensioni delle tabelle. Attributi del tag TABLE INFO WEB LEZIONE N.6
Tabelle INFO WEB LEZIONE N.6 RAVENNA, 2 APRILE 2008 In HTML le tabelle vengono largamente utilizzate per organizzare i dati in tabelle creare il layout della pagina servendosi di tabelle nascoste Si definiscono
Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row
TAG FONDAMENTALI Tag : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag , tag ,.tag : per definire le intestazioni (i titoli) e la loro
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. HTML non è un linguaggio di programmazione ma
APPUNTI DI HTML (TERZA LEZIONE)
Il web è costituito non da testi ma da ipertesti. APPUNTI DI HTML (TERZA LEZIONE) I link ci permettono di passare da un testo all altro. I link sono formati da due componenti: IL CONTENUTO "nasconde" il
Laboratorio di Basi di Dati e Web/Basi di dati e Multimedia. Docenti: Alberto Belussi e Carlo Combi Lezione 5
Laboratorio di Basi di Dati e Web/Basi di dati e Multimedia Docenti: Alberto Belussi e Carlo Combi Lezione 5 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard
Linguaggi di programmazione PC server-client CSS
Linguaggi di programmazione PC server-client CSS HTML MySQL PHP HTML: Hyper Tex Markup Language PHP: Hypertext Preprocessor CSS: Cascading Style Sheet MySQL: Relational database HTML Hyper Tex Markup Language
Informatica. Comunicazione & DAMS A.A. 2015/16. Dr.ssa Valeria Fionda
Informatica Comunicazione & DAMS A.A. 2015/16 Dr.ssa Valeria Fionda Pagina Web Struttura base pagina Web: (Heading
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
Sommario. Introduzione 1. 1 Scrivere in HTML con efficacia 7. 2 Formattazione standard del testo Aggiungere i colori 43. iii
Sommario Ringraziamenti Informazioni sull autore Introduzione 1 Finalità del libro 1 Introduzione a HTML 4 1 Nuove funzionalità di HTML 4 2 Come utilizzare questo libro 2 Struttura del libro 3 1 Scrivere
I TAG - Form (moduli) (1/21)
I TAG - Form (moduli) (1/21) Scopo: Raccogliere dati dell utente, interagire con esso. L invio dei dati è solitamente organizzato in due parti: una pagina principale che contiene i vari campi dei form,
Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura:
COMANDI BASE HTML Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura: Nome del documento All'interno
CSS: stili e layout BOX MODEL. Prof.ssa Cristina Gena
CSS: stili e layout BOX MODEL Prof.ssa Cristina Gena Box model In questa lezione vedremo la differenza tra gli elementi blocco e gli elementi in linea e scopriremo le caratteristiche del box model. In
HTML e interattività FORM
HTML e interattività FORM Interattività delle pagine web I moderni siti web non sono più soltanto un insieme di pagine da leggere con testo e immagini, ma rappresentano uno strumento per interagire con
HTML 5 e CSS 3 I LINK. Prof.ssa Cristina Gena
HTML 5 e CSS 3 I LINK Prof.ssa Cristina Gena I link In questa lezione impareremo a inserire i link interni ed esterni e le ancore; infine vedremo come formattare i link con CSS. Come abbiamo detto in precedenza
Il linguaggio HTML. Marco Porta - CIM: Web Design & Technologies
Il linguaggio HTML 1 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
World Wide Web. Angelo Di Iorio. ALMA MATER STUDIORUM UNIVERSITA DI BOLOGNA
World Wide Web Angelo Di Iorio angelo.diiorio@unibo.it Cosa è il World Wide Web? Il World Wide Web è un sistema ipertestuale per la presentazione a schermo di documenti multimediali, e per l utilizzo di
Cl Calendario dl del corso
Cl Calendario dl del corso 12/02/2010 09.00-12.00 Introduzione al mondo WEB Concetti fondamentali e struttura di un sito e delle pagine pg web Gli URL, i link, le immagini I linguaggi HTML e CSS 16/02/2010
Cosa sono le maschere
Prof. Emanuele Papotto Cosa sono le maschere La maschera è un oggetto di database che viene realizzato per mostrare, modificare e immettere i record in modo più chiaro rispetto alla visualizzazione foglio
Corso di HTML. Prerequisiti. Modulo L3 3 Blocchi di testo
Corso di HTML Modulo L3 3 Blocchi di testo 1 Prerequisiti Formattazione di un testo Struttura a titoli di un testo Giustificazione e allineamento del testo 2 1 Introduzione In questa Unità vediamo altri
HTML 6. Il modulo. Tipi di controlli. Esempio di modulo. I moduli a.k.a. form
I moduli a.k.a. form HTML 6 Il modulo Un modulo è un'area della pagina predisposta per accettare dei dati in ingresso dall'utente Gli utenti forniscono dati al WEB server che restituisce una risposta (pagina
INSERIRE I DATI NEL DATABASE
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 201 CAPITOLO10 INSERIRE I DATI NEL DATABASE In questo capitolo In questo capitolo imparerai a interagire con i contenuti del database gestiti nel sito. In particolare
OBIETTIVI MINIMI Anno scolastico TIC-TIT. 1. Foglio elettronico: funzioni fondamentali (Excel)
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI CLASSI CORSI OBIETTIVI MINIMI Anno scolastico 2010-2011 TIC-TIT OBIETTIVI 1. Foglio elettronico: funzioni fondamentali (Excel) CONTENUTI / tipologia
HTML Lezione3 Le Tabelle. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML Lezione3 Le Tabelle Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Le Tabelle Non servono soltanto per incolonnare e tabulare i dati come si potrebbe facilmente pensare. Le
a cura di Romina Biava HTML IMMAGINI ELENCHI TABELLE LINK FRAME FORM STRUTTURA DI UNA PAGINA HTML
a cura di Romina Biava HTML IMMAGINI ELENCHI TABELLE LINK FRAME FORM STRUTTURA DI UNA PAGINA HTML Le pagine web consistono in una "testa", in inglese head e un "corpo", detto anche body.
Collaboratori 2009 1 Collaboratori 2009 Introduzione Da inizio ottobre è stato messo in produzione un nuovo portale per la ricezione dei materiali digitali prodotti da inviati e collaboratori esterni.
Una pagina web inizia sempre con il tag <html> e si conclude con il tag </html> : ogni elemento che compone la pagina sarà racchiuso tra essi.
HTML per semplici pagine web HTML è l acronimo di Hypertext Markup Language ( Linguaggio di contrassegno per gli Ipertesti ) e NON è un linguaggio di programmazione E un linguaggio che permette di indicare
Tabella: struttura di base
Tabella: struttura di base Le tabelle sono una delle parti più importanti di tutto il codice HTML: nate sin dagli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile