Tabelle. Tag fondamentali. Costruzione di tabelle riga per riga. Esempi. Tecnologie di Sviluppo per il WEB 2
|
|
- Gina Tucci
- 5 anni fa
- Visualizzazioni
Transcript
1 HTML 5 Le tabelle 1
2 Tabelle Tag fondamentali Costruzione di tabelle riga per riga Esempi Tecnologie di Sviluppo per il WEB 2
3 Il tag <TABLE> Una tabella è suddivisa in righe e ciascuna riga è suddivisa in celle. Una tabella deve essere racchiusa tra i tag <TABLE> </TABLE> Ogni riga di una tabella deve essere racchiusa tra i tag <TR> </TR> Ogni cella di una tabella deve essere racchiusa tra i tag <TD> </TD> Tecnologie di Sviluppo per il WEB 3
4 Titolo di una tabella Si usa il tag <CAPTION> (all interno del tag <TABLE>) Valori attributo ALIGN (deprecato): TOP: titolo prima della tabella (default) BOTTOM: titolo alla fine della tabella LEFT/RIGHT Si possono usare tutti i tipi di tag di markup text-level all interno di <CAPTION> Tecnologie di Sviluppo per il WEB 4
5 Attributo BORDER di TABLE Il bordo di una tabella è creato utilizzando l attributo BORDER <TABLE BORDER=1> <TR> <TD> cella </TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 5
6 Attributo FRAME di TABLE Specifica quali lati della cornice circostante la tabella saranno visibili. Valori possibili: void: Nessun lato visibile above: Lato superiore visibile below: Lato inferiore visibile hsides: Lato destro e sinistro visibili vsides: Lato superiore ed inferiore visibili lhs: Lato sinistro visibile rhs: Lato destro visibile box, border: Tutti i lati visibili Tecnologie di Sviluppo per il WEB 6
7 Attributo RULES di TABLE Questo attributo specifica quali filetti 1 appariranno tra le celle in una tabella. Il modo in cui i filetti appaiono dipende dal browser. Possibili valori: none: Nessun filetto. groups: i filetti appariranno solo tra gruppi di righe (THEAD, TFOOT, e TBODY) e gruppi di colonne (COLGROUP e COL) rows: i filetti appariranno solo tra le righe cols: i filetti appariranno solo tra le colonne all: i filetti appariranno tra righe e colonne 1 filetto: sinonimo di linea Tecnologie di Sviluppo per il WEB 7
8 Relazione tra BORDER, FRAME e RULES Il valore border="0" implica frame="void e, fin quando non specificato diversamente, rules="none" Altri valori di border implicano frame="border/box" e, fin quando non specificato diversamente, rules="all" esempio chrome vs. firefox Tecnologie di Sviluppo per il WEB 8
9 Il tag <TH> Serve per definire l intestazione di una colonna. Il testo nella cella è centrato e in grassetto. Tecnologie di Sviluppo per il WEB 9
10 Codice della tabella precedente <HTML> <BODY> <HEAD> <TITLE> Esempio di tabella </TITLE></HEAD> <TABLE BORDER> <CAPTION ALIGN=BOTTOM> Una semplice tabella </CAPTION> <TR> <TH> Heading 1 </TH> <TH> Heading 2 </TH> <TH> Heading 3 </TH> </TR> <TR> <TD> item 1 </TD> <TD> item 2 </TD> <TD> item 3 </TD> </TR> <TR> <TD> item 4 </TD> <TD> item 5 </TD> <TD> item 6 </TD> </TR> <TR> <TD> item 7 </TD> <TD> item 8 </TD> <TD> item 9 </TD> </TR> </TABLE> </BODY> </HTML> Tecnologie di Sviluppo per il WEB 10
11 Cosa succede con celle vuote? <HTML> <BODY> <HEAD> <TITLE> Tabella Con Vuoti </TITLE></HEAD> <TABLE BORDER> <TR> <TD> item 1 </TD> <TD> item 2 </TD> <TD> item 3 </TD> </TR> <TR> <TD> item 4 </TD> <TD> </TR> <TD> <TR> <TD> item 7 </TD> <TD> item 8 </TD> </TR> </TABLE> </BODY> </HTML> Soluzione Tecnologie di Sviluppo per il WEB 11
12 Attributi di <TABLE> ALIGN: specifica l allineamento della tabella rispetto alla finestra (deprecato) LEFT, RIGHT, CENTER WIDTH: specifica la larghezza WIDTH= 140 (pixel) WIDTH= 40% (percentuale) HEIGHT: specifica l altezza espressa in pixel o in percentuale Estensione allo standard di IE e N Tecnologie di Sviluppo per il WEB 12
13 Esempio <TABLE BORDER=3 WIDTH=100%> <TR> <TD>Anna, Giulia, Carla</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 13
14 Esempio <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=20%> Anna</TD> <TD WIDTH=80%> Giulia</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 14
15 Esempio Il valore dell attributo WIDHT viene esteso anche alle righe successive Tecnologie di Sviluppo per il WEB 15
16 Attributi di <TABLE> CELLPADDING= numero Stabilisce lo spazio tra il contenuto della cella ed i suoi bordi CELLPADDING= 10 CELLSPACING= numero Stabilisce lo spazio tra i bordi delle celle CELLSPACING= 5 Tecnologie di Sviluppo per il WEB 16
17 CELLPADDING e CELLSPACING Questi due attributi controllano lo spazio tra ed all interno delle celle. Tecnologie di Sviluppo per il WEB 17
18 Esempio di CELLPADDING <TABLE BORDER=3 CELLPADDING=12> <TR> <TD >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 18
19 Esempio di CELLSPACING <TABLE BORDER=3 CELLSPACING=12> <TR> <TD >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 19
20 Combinazione degli attributi <TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12> <TR> <TD >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 20
21 Tabelle a colori: attributi BGCOLOR="#rrggbb" Definisce il colore di sfondo di tutta la tabella Tecnologie di Sviluppo per il WEB 21
22 Esempio <TABLE BORDER=3 BGCOLOR= #FFCC66 > <TR> <TD >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 22
23 Priorità di attributi Il valore di un attributo di una riga <TR ALIGN= LEFT > copre quello di tabella <TABLE ALIGN= RIGHT > Il valore di un attributo di una cella <TD ALIGN= CENTER > copre quello di riga <TR ALIGN= LEFT > Come è normale che sia...i più interni oscurano i più esterni Tecnologie di Sviluppo per il WEB 23
24 Tabelle a vari colori <TABLE BORDER=3 BGCOLOR= #FF6633 > <TR BGCOLOR= # > <TD BGCOLOR= #9999FF >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> indovinate i colori... Tecnologie di Sviluppo per il WEB 24
25 Attributi di <TR> e <TD> ALIGN= tipo Allineamento orizzontale di una cella LEFT (default), RIGHT, CENTER, JUSTIFY. VALIGN= tipo Allineamento verticale di una cella MIDDLE (default), TOP, BOTTOM, BASELINE (allineata alla base della prima linea) BGCOLOR= #rrggbb Colore di sfondo Tecnologie di Sviluppo per il WEB 25
26 Attributo NOWRAP Quando è presente, questo attributo booleano indica al browser di disabilitare il wrapping automatico per la cella in esame. L attributo è deprecato. Dovrebbero essere usati i fogli di stile per disabilitare il wrapping automatico Nota: se è usato senza molta cura, questo attributo può generare celle eccessivamente ampie Tecnologie di Sviluppo per il WEB 26
27 Altri attributi di <TH> e <TD> WIDTH = valore Specifica l ampiezza di una cella Valore espresso in pixel o percentuale HEIGHT = valore Specifica l altezza di una cella Valore espresso in pixel o percentuale NOTA: px è una misura relativa (legata alla risoluzione dello schermo) pt è una misura assoluta: 72 pt = 1 inch = 2,54 cm Tecnologie di Sviluppo per il WEB 27
28 COLSPAN e ROWSPAN: attributi di <td> COLSPAN=numero Controlla il numero di colonne su cui una cella si può estendere. È possibile creare delle celle larghe 2 o più colonne ROWSPAN=numero Definisce il numero di righe su cui incide la casella. Tecnologie di Sviluppo per il WEB 28
29 Esempio di COLSPAN <TABLE BORDER=3> <TR> <TD COLSPAN=2> Anna</TD> <TD>Giulia</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 29
30 Esempio di ROWSPAN <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Anna</TD> <TD>Giulia</TD> <TD>Carla</TD> </TR> <TR> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 30
31 Come creare tabelle con celle unite Per creare il layout di una tabella in cui vi sono celle che si estendono per più righe o colonne, si possono seguire i seguenti passi: Disegnare una bozza della tabella finale Disegnare la struttura a celle (quante righe e colonne occupa la tabella) Confrontare i due disegni per capire quali celle unire Se ci sono celle da unire su una riga (colonne), unirle con una freccia che parte dalla prima cella e prosegue verso destra (il basso) Adesso si può iniziare a creare la tabella Tecnologie di Sviluppo per il WEB 31
32 Esempio tabella finale struttura a celle Tecnologie di Sviluppo per il WEB 32
33 Regole per TD Regola 1 Ogni riga conterrà un TD per ogni cella vuota e per ogni cella che contiene l inizio di una freccia Regola 2 Se un TD contiene l inizio di una freccia verso destra (il basso), allora l attributo COLSPAN (ROWSPAN) assumerà un valore pari al numero di celle, o il numero di colonne (righe) che la freccia attraversa Tecnologie di Sviluppo per il WEB 33
34 Esempio 2 TD 3 TD 2 TD COLSPAN=2 per il secondo TD ROWSPAN=2 per il secondo TD Tecnologie di Sviluppo per il WEB 34
35 Codice e risultato <TR ALIGN=CENTER> <TD> 1</TD> <TD COLSPAN=2> 2</TD> </TR> <TR ALIGN=CENTER> <TD ROWSPAN=2> 3</TD> <TD> 4</TD> <TD> 5</TD> </TR> <TR ALIGN=CENTER> <TD> 6</TD> <TD> 7</TD> </TR> Tecnologie di Sviluppo per il WEB 35
36 Errori Se si commettono errori sovrapponendo più celle, il comportamento dei browser non è sempre lo stesso. Esercizio: soluzione Tecnologie di Sviluppo per il WEB 36
37 Raggruppamento di righe Possiamo raggruppare le righe di una tabella in THEAD Intestazione della tabella TFOOT Piè pagina della tabella TBODY Una o più sezioni intermedie Questa divisione permette(rebbe) al browser di supportare lo scrolling delle sezioni intermedie indipendentemente da intestazione e piè pagina della tabella (non supportato) Quando tabelle molto lunghe vengono stampate, le informazioni nell head e nel foot possono essere ripetute su ogni pagina che contiene i dati della tabella (parzialmente supportato solo da Netscape) Da non confondere con <TH> che rende in boldface l'intestazione di una colonna Tecnologie di Sviluppo per il WEB 37
38 Esempio <TABLE BORDER=1 CELLPADDING=4 RULES="GROUPS"> <THEAD> <TR><TH COLSPAN=2>Table Head</TR> (grassetto) <TFOOT ALIGN="CENTER"> <TR><TD COLSPAN=2>Footer (non in grassetto) <TBODY> <TR><TD>Gruppo 1<TD>Gruppo 1 <TR><TD>Gruppo 1<TD>Gruppo 1 <TBODY> <TR><TD ROWSPAN=2>Gruppo 2<TD>Gruppo 2 <TR><TD>Gruppo 2 <TBODY> <TR><TD COLSPAN=2 ALIGN=CENTER>Gruppo 3 <TR><TD>Gruppo 3<TD>Gruppo 3 </TABLE> Tecnologie di Sviluppo per il WEB 38
39 Risultato Tecnologie di Sviluppo per il WEB 39
40 Raggruppamento di colonne COLGROUP Crea esplicitamente un gruppo di colonne in una tabella Attributi principali SPAN indica il numero di colonne comprese in un COLGROUP WIDTH indica l ampiezza di una singola colonna del COLGROUP ALIGN allineamento del contenuto delle colonne VALIGN allineamento verticale del contenuto delle colonne Non più supportati dai browser HTML5 compliant... Tecnologie di Sviluppo per il WEB 40
41 Raggruppamento di colonne COL Rappresenta una o più colonne in un gruppo Serve a controllare l aspetto di ogni singola colonna in un gruppo Attributi principali SPAN indica quante colonne successive sono controllate da COL WIDTH, ALIGN, VALIGN Non più supportati dai browser HTML5 compliant... Tecnologie di Sviluppo per il WEB 41
42 Esempio <TABLE CELLPADDING=3 RULES="GROUPS"> <COLGROUP> <COL ALIGN="CENTER"> <COL ALIGN="LEFT"> <COL ALIGN="CENTER"> <COLGROUP ALIGN="RIGHT"> <THEAD> <TR><TH> Anno <TH>Nome<TH> Tipo <TH> Costo <TBODY> <TR><TD>1965<TD>Luxury Lace <TD>M <TD>11.75 <TR><TD>1976<TD>Green Flutter <TD>M <TD>7.50 <TR><TD>1984<TD>My Belle <TD>P <TD>12.00 <TR><TD>1985<TD>Stella De Oro <TD>P-G <TD> 5.00 <TR><TD>1989<TD>Brocaded Gown<TD>P <TD>14.50 <TFOOT> <TR><TD COLSPAN=4>M-medio P-piccolo G-grande </TABLE> Tecnologie di Sviluppo per il WEB 42
43 Risultato Tecnologie di Sviluppo per il WEB 43
44 Esempi Tabella Allineata Esempio Precedente Tecnologie di Sviluppo per il WEB 44
HTML 5. Tabelle. Bordi di una tabella. Il tag <TABLE> Le tabelle. Tag fondamentali. Costruzione di tabelle riga per riga. Esempi
HTML 5 Tabelle Tag fondamentali Costruzione di tabelle riga per riga Le tabelle Esempi 1 Tecnologie di Sviluppo per il WEB 2 Il tag Una tabella è suddivisa in righe e ciascuna riga è suddivisa
DettagliHTML 3. I link (collegamenti) L URL. Accesso a documenti locali. Link Mappe Tabelle. <A HREF= path_del_documento > link </A>
Link Mappe Tabelle HTML 3 I link (collegamenti)! Semplicemente "cliccando" su una parola o su un'immagine si può accedere ad un'altra pagina Web! Questo effetto si ottiene con la cosiddetta ancora. Un'ancora
DettagliAPPUNTI 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
DettagliCorso 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
DettagliTabelle HTML. Tabelle Un po di notazione.
Tabelle HTML!! Le tabelle in HTML permettono di rappresentare tabelle di dati ", ma anche di formattare del testo, delle immagini, altre tabelle in righe e colonne, possono cioè essere usate per l impaginazione
DettagliTabelle. 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
DettagliCreazione 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
DettagliHTML 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
DettagliTutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali
DettagliINTRODUZIONE 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
DettagliProgettazione multimediale
Progettazione multimediale Le tabelle 1 Obiettivi Perché si usano le tabelle Le proprietà delle tabelle Inserimento e modifica delle proprietà 2 Perché si usano le tabelle Una pagina Web è formata da testo
DettagliTabella: 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
DettagliCorso html Lezione 3
Corso html Lezione 3 ELENCHI 3 ELENCHI NUMERICI 3 ELENCHI PUNTATI O NON ORDINATI 6 ELENCHI DI DEFINIZIONE 7 ELENCHI STRUTTURATI 8 TABELLE 12 DEFINIRE UNA TABELLA 12 TITOLO DI UNA TABELLA 16 BORDI 20 DIMENSIONI
DettagliFormattazione 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
DettagliInformatica. 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
DettagliLe tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.
Le tabelle Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne. E' difficile? All'inizio costruire le tabelle in HTML
DettagliTabella: struttura di base
Tabella: struttura di base Le Tabelle Nel Linguaggio 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
DettagliLaboratorio di Tecnologie Web HTML: Tabelle Dott. Stefano Burigat
Laboratorio di Tecnologie Web HTML: Tabelle Dott. Stefano Burigat www.dimi.uniud.it/burigat Come usare le tabelle Le tabelle HTML possono essere utilizzate in tutti quei casi in cui sia necessario inserire
DettagliLEZIONE 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
DettagliIl linguaggio HTML - Parte 2
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza
DettagliInformatica 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
Dettaglinon è 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
DettagliTabelle Tabella: struttura di base
06 HTML tabelle Prof. Sabato Dario Pagina 1 di 14 Tabelle Tabella: struttura di base Le tabelle sono componenti importanti in HTML: nate agli inizi del Web per impaginare dati aggregati, si sono poi trasformate
DettagliELENCHI. 1. Prima 2. Seconda 3. terza. Prima Seconda terza
ELENCHI Un elenco è una serie di voci di testo che possono essere contrassegnate da un punto elenco oppure da un numero o da una lettera e volendo anche da un elemento grafico. Si possono avere elenchi
Dettaglilayout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto
Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding
DettagliCosa 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)
DettagliMetodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 6. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze
DettagliServe per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine
Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare
DettagliHTML 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
Dettagli14 attributi per tabelle.html prof. Uccellani pagina 1
1 2 3 attributi per tabelle nelle pagine HTML 4 5 6 attributi per le tabelle 7 8 border
DettagliPrincipali tipi di layout. Approfondimento sul box model
Principali tipi di layout. Approfondimento sul box model 1 Il layout stabilisce il modo in cui le varie parti (immagini, paragrafi, elenchi, intestazioni ) che compongono un documento ipertestuale devono
DettagliOgni 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
DettagliCSS: 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
DettagliHTML 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
DettagliCSS 6. Il modello contenitore (box model) Elementi flottanti
CSS 6 Il modello contenitore (box model) Elementi flottanti Il modello contenitore Tecnologie di Sviluppo per il WEB 2 BOX MODEL CSS assume che ogni elemento genera uno o più box rettangolari, chiamati
DettagliII LINGUAGGIO HTML...1
Indice 1 II LINGUAGGIO HTML...1 1.1 INTRODUZIONE AL WWW...1 1.2 IL DOCUMENTO HTML...2 1.2.1 Elementi...3 1.2.2 Attributi...4 1.2.3 Riferimenti a caratteri...4 1.2.4 Commenti...4 1.3 STRUTTURA GLOBALE DI
DettagliIntroduzione. 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
DettagliWeb Programming. testi consigliati. Programma di massima. contacts. Beginning PHP and MySQL - Apress. Beginning Ajax with PHP - Apress
Web Programming Costantino Pistagna pistagna@dmi.unict.it http://aladino.dmi.unict.it testi consigliati Beginning PHP and MySQL - Apress Beginning Ajax with PHP - Apress Beginning Javascript 3rd Edt. -
DettagliFrames. Come organizzare le pagine web usando i frames. Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice
Frames Come organizzare le pagine web usando i frames Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice Usare i frame Per poter usare i frame è necessario comunicare
DettagliLinguaggio per ipertesti
Linguaggio per ipertesti Un linguaggio per descrivere gli ipertesti è l HyperText Markup Language (HTML) Non è il solo (VRML,XML,...) l HTML è un linguaggio di formattazione e permette di formattare del
DettagliSilvia Likavec. Lezione 6
Silvia Likavec Lezione 6 2 ! Le principali proprietà che permettono di manipolare le immagini agiscono sul box model: " Border (o border-style; border-width; bordercolor); " Padding; " Margin; " Width;
Dettaglia 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.
DettagliIl 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
DettagliTag <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
DettagliTutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi Appendice A Riepilogo dei tag HTML A.1 Struttura del documento
DettagliSelettori. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
Selettori Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola CSS Sintassi valore valore h1 { color: blue;
DettagliNOZIONI BASE DI HTML
NOZIONI BASE DI HTML Aggiornato al 06 marzo 2006 Ermes ZANNONI (ermes@zannoni.to.it) (http://www.zannoni.to.it) Indice : 1. Introduzione 2. Tag di default 3. Formattazione del testo 3.1 Dimensione del
DettagliCl 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
DettagliLinguaggi 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
DettagliSiti molto ben fatti /1 08
Siti molto ben fatti /1 08 1) Mettiamoci a cucinare Crea la cartella 30 ricette con le sottocartelle css e img. L'obiettivo è di realizzare un sito come questo rappresentato in figura. Cominciamo con l'operare
DettagliCSS: HTML: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli. Le immagini mappate
CSS: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli HTML: Le immagini mappate 1 Le principali proprietà che permettono di manipolare le immagini agiscono sul box mode
DettagliTipi 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
DettagliCorso 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
DettagliCorso 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
DettagliHTML Tutorial HTML By A.C. Neve 1
HTML Tutorial HTML By A.C. Neve 1 Il linguaggio HTML (Hyper Text Markup Language) è il più diffuso linguaggio per la creazione di pagine WEB. La creazione di un documento HTML si effettua con un qualsiasi
DettagliElenchi. Con HTML è possibile generare tre tipi di elenco: - a punti (non ordinato) - numerati - di definizioni
Elenchi Con HTML è possibile generare tre tipi di elenco: - a punti (non ordinato) - numerati - di definizioni Gli elenchi possono contenere al loro interno altri elenchi. Tag utilizzati: (unordered
DettagliWeb. HyperText Markup Language
Web HyperText Markup Language HTML HyperText Markup Language permette la creazione di documenti multimediali ipertestuali è il linguaggio per la creazione di pagine web non è l unico: PHP, JavaScript,
DettagliHTML 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
DettagliCome creare una tabella responsive
Come creare una tabella responsive martedì, 26 dicembre 2017 Uno degli elementi HTML più difficili da trattare quando si passa dalla visualizzazione desktop a quella mobile è senz'altro la tabella. Si
DettagliSTILE E CSS. classi sezioni. tag
Perchè occorre lo stile? HTML con i suoi tag e relativi attributi possiede un suo stile standard che offre purtroppo poche personalizzazioni. Un sito web deve avere uniformità di colori, di font e dimensioni
DettagliMacchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II
Macchine per l elaborazione dell informazion e Sistemi di Elaborazione delle Informazioni Informatica II Ing. Mauro Iacono Seconda Università degli Studi di Napoli Facoltà di Studi Politici e per l Alta
DettagliCSS. Esercizi CC BY ALESSANDRO URSOMANDO DIAPOSITIVA 2 CSS PROPRIETÀ
CSS Esercizi CSS PROPRIETÀ DIAPOSITIVA 2 Corredare l esercizio precedentemente realizzato di un file.css che presenti delle dichiarazioni per impostare: l ampiezza del body a 800 pixel a giallo chiaro
DettagliIl linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio
Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio Dipartimento di Matematica Università di Bari Il linguaggio HTML p. 1/3 HTML L HTML è il linguaggio (di
DettagliLaboratorio 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
Dettaglicaratteri speciali + form, tabelle e testi
caratteri speciali + form, tabelle e testi Caratteri Speciali I caratteri di un testo che necessitano, per essere rappresentati in HTML, di un sistema di rappresentazione che sia indipendente dal set di
DettagliHTML. 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
DettagliIl 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
DettagliChe Cosa è un Ipertesto??
Che Cosa è un Ipertesto?? Con il termine IPERTESTO definiamo un documento la cui struttura di consultazione non è lineare, cioè le parti di cui è logicamente costituito ( capitoli, paragrafi, ) sono organizzati
DettagliCorso 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/
DettagliIntroduzione all HTML
prof. ing. Dino Molli SVILUPPO SOFTWARE - FORMAZIONE E CONSULENZA INFORMATICA MARIGLIANO (NA) http://www.dinomolli.it info@dinomolli.it Dispense a cura del prof. ing. Dino Molli Introduzione all HTML Introduzione
DettagliLinguaggio 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
DettagliMODULO 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.
Dettagli4.5 Formattazione. La finestra è composta dalle schede Numero, Allineamento, Carattere, Bordo, Riempimento e Protezione.
4.5 Formattazione Formattare (cioè dare un formato a ) una cella (o più celle) di Excel significa definirne l aspetto grafico, il tipo di dati che può contenere, il modo in cui appaiono e impostarne o
DettagliCascading Style Sheet CSS. Sintassi Css. Come inserire un foglio di stile. Fogli di stile esterni. Separazione contenuto/layout
Cascading Style Sheet CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. L'introduzione
DettagliHTML 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
Dettagli(b) - Creazione del layout delle pagine nella vista Layout
(b) - Creazione del layout delle pagine nella vista Layout La vista Layout di Dreamweaver semplifica l utilizzo delle tabelle per il layout delle pagine. Nella vista Layout, è possibile progettare le pagine
DettagliMetodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 9. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze
DettagliComandi principali del linguaggio HTML (Hyper Text Markup Language)
Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per
DettagliSommario. HTML e CSS I fogli di stile. cosa sono principali proprietà
HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento
DettagliPrimi passi con HTML. Il documento HTML
Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.
DettagliElementi blocco e Elementi in linea
Elementi blocco e Elementi in linea Sostanzialmente il box model di una pagina Internet basata su markup (x)html è composto da due tipologie di elementi: gli inline elements e i block-level elements. Rientrano
DettagliElenchi, 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
DettagliHTML. 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
DettagliCSS. Cascading Style Sheet
CSS Cascading Style Sheet CSS Il CSS è un linguaggio, di tipo dichiarativo, che serve per definire lo stile di presentazione degli elementi presenti in un documento HTML. Esso è inglobato all interno dell
DettagliCimini Simonelli - Testa
WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire
DettagliWEB I FOGLI DI STILE. Gabriele Murara
WEB I FOGLI DI STILE Gabriele Murara 1 Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento
DettagliLinguaggio per ipertesti
Linguaggio per ipertesti Un linguaggio per descrivere gli ipertesti è l HyperText Markup Language (HTML) Non è il solo (VRML,XML,...) l HTML è un linguaggio di formattazione e permette di formattare del
DettagliIl linguaggio html. HyperText Markup Language (Linguaggio di contrassegno di ipertesti) Creato al CERN nel 1989 e reso pubblico nel 1991.
Il linguaggio HTML Il linguaggio html HyperText Markup Language (Linguaggio di contrassegno di ipertesti) Creato al CERN nel 1989 e reso pubblico nel 1991. Il linguaggio html NON è un linguaggio di programmazione.
DettagliLEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONI DI HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... FORMATTARE IL CARATTERE Per formattare titoli interni del documento web possiamo utilizzare i tag , ,...,
DettagliHTML Guida di riferimento
Dipartimento di Elettronica ed Informazione Politecnico di Milano Informatica A - GES Prof. Plebani A.A. 2006/2007 HTML Guida di riferimento La presente dispensa e da utilizzarsi ai soli fini didattici
DettagliInformatica 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 1 Che cos è l HTML? Hyper Text Markup Language Definisce le caratteristiche stilistiche di un documento, non è programmazione!
DettagliEsistono editor WYSIWYG (What You See Is What You Get) (FrontPage)
HTML significa Hyper Text Markup Language I documenti HTML sono file plain-text che possono essere creati usando un qualsiasi text editor e possono essere visualizzati con browsers Web. Il documento HTML
DettagliHTML 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
DettagliLezione del corso CSS - Web Design ed Accessibilità secondo il W3C con CSS ed XHTML
Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle 16.03. Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione
Dettagli