Laboratorio di sistemi ArrayList e file sequenziali Jsp [NetBeans]

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Laboratorio di sistemi ArrayList e file sequenziali Jsp [NetBeans]"

Transcript

1 Sul sito della casa editrice DC Comics ( fino a poco tempo fa, erano disponibili le schede dei personaggi più noti al grande pubblico (adesso le schede sono state sostituite da file in formato flash e pdf). Figura 1 - La scheda di Batman L obiettivo era di realizzare una pagina simile nella struttura. Per comodità, ho memorizzato le informazioni sui personaggi in un file sequenziale tab delimited (dc_supereroi.txt, package risorse). I campi sono quelli che vedete nella figura precedente. Successivamente il file viene letto un record alla volta e i dati caricati in memoria nell arraylist di nome al_supereroe. Per semplicità, ho utilizzato la classe Supereroe (package it.mauriziocozzetto), ma le informazioni sull immagine, non sono state accorpate nella classe. batman_v2.pdf Pag. 1/8 Cozzetto

2 Ecco il risultato finale (ho volutamente reso l atmosfera un po più cupa): /* * Supereroe.java * * Created on 27 agosto 2006, * * To change this template, choose Tools Template Manager * and open the template in the editor. */ package it.mauriziocozzetto; /** * admin */ public class Supereroe { private String alias; private String realname; private String occupation; private String image; private String description; batman_v2.pdf Pag. 2/8 Cozzetto

3 public Supereroe() { // /** Creates a new instance of supereroe */ public Supereroe(String alias, String realname, String occupation, String image,string description) { this.alias=alias; this.realname=realname; this.occupation=occupation; this.image=image; this.description=description; public void setalias(string alias) { this.alias=alias; public void setrealname(string realname) { this.realname=realname; public void setoccupation(string occupation) { this.occupation=occupation; public void setimage(string image) { this.image=image; public void setdescription(string description) { this.description=description; public String getalias() { return alias; public String getrealname() { return realname; public String getoccupation() { return occupation; public String getimage() { return image; public String getdescription() { return description; batman_v2.pdf Pag. 3/8 Cozzetto

4 Segue codice della pagina index.jsp (lo stile è incorporato nella pagina per brevità): contenttype="text/html"%> pageencoding="utf-8"%> import="java.util.*" %> import="java.io.*" %> import="it.mauriziocozzetto.*" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>batman - Versione con JSP</title> <style type="text/css"> <!-- body,td,th { font-family: Trebuchet MS, Verdana; font-size: 13px; body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-image: url(pic/bg_pg_blue.gif); background-repeat: repeat; #header { width:760px; height:174px; background-image:url(pic/batman_begins2.jpg); background-color: #262427; background-repeat: no-repeat; background-position: center center; margin-left:auto; margin-right:auto; #menu { width:750px; background-color:#003366; margin-left:auto; margin-right:auto; padding:5px; batman_v2.pdf Pag. 4/8 Cozzetto

5 #footer { width:750px; background-color:#003366; margin-left:auto; margin-right:auto; padding:5px; text-align:center; clear:both; #main { width:740px; background-color:#262427; margin-left:auto; margin-right:auto; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; overflow:auto; #left { width:120px; background-color:#262427; padding:5px; float:left; border: 1px solid #FF9900; margin-right:0px; margin-left:0px; margin-top:0px; #right { width:560px; background-color:#262427; padding:5px; float:right; border: 1px solid #FF9900; margin-right:0px; margin-top:0px; batman_v2.pdf Pag. 5/8 Cozzetto

6 .alias { font-size:17px; font-weight:bold; color:white; a:link { color: #FFFFFF; text-decoration: none; a:visited { text-decoration: none; color: #FFFFFF; a:hover { text-decoration: underline; color: #FF9900; a:active { text-decoration: none; color: #FF9900;.img_left { margin:2px; float:left; a:link { color: #FFFFFF;.arancio {color: #FF > </style> </head> <body> <div id="header"> <% FileReader filereader; File file=null; try { // Apro il file sequenziale dc_supereroi.txt nel quale sono contenuti i dati //filereader = new FileReader(application.getRealPath("/")+"dati/dc_supereroi.txt"); file = new File( getclass().getresource("/risorse/dc_supereroi.txt").touri() ); filereader = new FileReader( file ); catch(filenotfoundexception fnfe) { out.println("impossibile aprire il file."); return; // Buffer di lettura BufferedReader bufferedreader = new BufferedReader(fileReader); batman_v2.pdf Pag. 6/8 Cozzetto

7 // Leggo un record String rec = bufferedreader.readline(); // Predispongo un arraylist per contenere tutta la matrice ArrayList al_supereroe = new ArrayList(); // Oggetto di tipo Supereroe Supereroe se=null; // Leggo tutti i record while (rec!=null) { // Estraggo le singole informazioni separate dal carattere di tabulazione StringTokenizer st=new StringTokenizer(rec,"\t"); String alias = st.nexttoken(); String realname=st.nexttoken(); String occupation=st.nexttoken(); String image=st.nexttoken(); String base=st.nexttoken(); String marital_status=st.nexttoken(); String height=st.nexttoken(); String weight=st.nexttoken(); String eyes=st.nexttoken(); String hair=st.nexttoken(); String first_appearance=st.nexttoken(); String description=st.nexttoken(); // Creo un supereroe se = new Supereroe(alias,realname,occupation,image,description); // Lo carico nell'arraylist al_supereroe.add(se); // Leggo un altro record rec = bufferedreader.readline(); %> </div> <div id="menu"><a href="#">home</a> <a href="#">downloads</a> <a href="#">film</a> <a href="#">news</a> </div> <div id="main"> <div id="left"> <% // Faccio riferimento a tutte le righe della matrice for(int i=0; i<al_supereroe.size(); i++) { se=(it.mauriziocozzetto.supereroe) al_supereroe.get(i); %> <a href="<%=request.getrequesturi()%>?id=<%=i%>"> <%=se.getalias()%> </a><br/> <% %></div> batman_v2.pdf Pag. 7/8 Cozzetto

8 <div id="right"> <% // Effettuo i controlli sull'id if ( (request.getparameter("id")==null) (Integer.parseInt(request.getParameter("id")) > al_supereroe.size()) (Integer.parseInt(request.getParameter("id"))<0) ) { out.println("scegli un supereroe."); else { // Trovo l id corrispondente al personaggio scelto dall'utente String id=request.getparameter("id"); int i = Integer.parseInt(id); se=(it.mauriziocozzetto.supereroe) al_supereroe.get(i); out.println("<span class='alias'>"+se.getalias()+"</span><br/>"); // Visualizzo le informazioni della riga iesima // Trovo l'immagine e la metto a sinistra out.println("<img src='pic/"+se.getimage()+"' class='img_left' />"); // Trovo l'alias //out.println("<span class='arancio'>supereroe:</span> "+se.getalias()+"<br/>"); // Trovo l'identita' segreta out.println("<span class='arancio'>identità segreta:</span> "+se.getrealname()+"<br/>"); // Trovo l'occupazione out.println("<span class='arancio'>occupazione:</span> "+se.getoccupation()+"<br/>"); out.println("<br/>"); // Trovo la descrizione out.println(se.getdescription()+"<br/>"); %> </div> </div> <div id="footer">copyright DC Comics & MC</div> </body> </html> batman_v2.pdf Pag. 8/8 Cozzetto

Laboratorio di Sistemi Accesso a un database Jsp [NetBeans]

Laboratorio di Sistemi Accesso a un database Jsp [NetBeans] Modifichiamo l applicativo ListaSupereroiWebApp in modo che i dati dei supereroi non vengano caricati staticamente mediante delle istruzioni di assegnamento ma dinamicamente leggendo i record della tabella

Dettagli

Laboratorio di Sistemi Accesso a un database MySQL NetBeans [Jsp]

Laboratorio di Sistemi Accesso a un database MySQL NetBeans [Jsp] Figura 1 Vogliamo realizzare una pagina web simile alla precedente: i dati si trovano nel db MySQL simpsons_db all'interno della tabella simpsons_tbl simpsons_mysql.pdf Pag. 1/12 Cozzetto Figura 2 - La

Dettagli

Laboratorio di sistemi Pacchetti PEAR: DB e HTML_Template_IT Php

Laboratorio di sistemi Pacchetti PEAR: DB e HTML_Template_IT Php Uno dei problemi che si deve affrontare nel progetto delle pagine web è quello della commistione tra parte grafica (che si colloca al livello di presentazione) e il codice (che si colloca al livello della

Dettagli

Il sito della MultisalaOz [ dispone di un archivio dei film già proiettati.

Il sito della MultisalaOz [  dispone di un archivio dei film già proiettati. Il sito della MultisalaOz [http://www.multisalaoz.it] dispone di un archivio dei film già proiettati. In questa figura, potete osservare un sito clone. L utente, selezionando una lettera dell alfabeto

Dettagli

Laboratorio di sistemi Autenticazione utente mediante scriplet Jsp [NetBeans]

Laboratorio di sistemi Autenticazione utente mediante scriplet Jsp [NetBeans] Figura 1 - La pagina input_user.jsp appena caricata Figura 2 - Lascio vuoti entrambi i campi o immetto un solo valore Figura 3 - Immetto dei valori che non esistono nel database autent_utente_scriplet.pdf

Dettagli

Laboratorio di Sistemi Prototipo applicazione Biblioteca Jsp [Java]

Laboratorio di Sistemi Prototipo applicazione Biblioteca Jsp [Java] Vogliamo progettare un prototipo di applicazione web che consenta ad un utente di ottenere, selezionando l'autore da una casella combinata, l'elenco dei libri scritti da quell'autore, come nelle figure

Dettagli

Guida alla modifica di un layout

Guida alla modifica di un layout Guida alla modifica di un layout Abbiamo realizzato il sito web di Hexagon Tours utilizzando HTML e CSS, impostando una struttura formata da header, barra di navigazione, contenuti principali e laterali,

Dettagli

Struttura Layout Monolitico Fisso con Menu Orizzontale

Struttura Layout Monolitico Fisso con Menu Orizzontale Struttura Layout Monolitico Fisso con Menu Orizzontale BODY Body { margin: 0px; padding:0; font-family: arial,sans-serif; font-size: 76%; text-align: center; background-color: #FC3; background-image: url();

Dettagli

Istruzioni per la creazione delle pagine Contratto e Scheda

Istruzioni per la creazione delle pagine Contratto e Scheda Istruzioni per la creazione delle pagine Contratto e Scheda Indice 1 Introduzione 3 2 Strumenti di aiuto per la creazione delle pagine 3 3 Inserimento codice HTML creato esternamente 5 2 1 INTRODUZIONE

Dettagli

Laboratorio di sistemi Information hiding Jsp [Java]

Laboratorio di sistemi Information hiding Jsp [Java] Vogliamo realizzare una pagina web che ci consenta di filtrare i record della tabella books del database MySQL shop. Fig. 1 Tabella books, database MySQL shop Il filtro viene scritto direttamente dall'utente

Dettagli

Laboratorio di sistemi Template e MySQL Php

Laboratorio di sistemi Template e MySQL Php Uno dei problemi che si deve affrontare nel progetto delle pagine web è quello della commistione tra parte grafica (che si colloca al livello di presentazione) e il codice (che si colloca al livello della

Dettagli

Laboratorio di sistemi Fortune Java/Jsp

Laboratorio di sistemi Fortune Java/Jsp Ricordiamo che in Ubuntu il comando fortune impartito da shell produce una frase umoristica, un anedotto o una frase bizzarra ecc. Si può installare e localizzare nella lingua italiana mediante il comando

Dettagli

Creare un portale personalizzato

Creare un portale personalizzato 1 Creare un portale personalizzato Passi da seguire 1) Aprire la pagina: http://www.term-minator.it/modello.html 2) Scaricare modello : 2) Aprire il file modello con blocco note : 1 2 3) Modificare il

Dettagli

ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag.

ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. 1

Dettagli

Anno Accademico ANT Html e Css

Anno Accademico ANT Html e Css Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 ANT Html e Css F. Pizza fpizza@deis.unibo.it cos'è ANT tool di build indipendente dalla piattaforma, scritto in java

Dettagli

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere compilato

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere compilato CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style

Dettagli

e il Giardino di Zen CSS ESTERNI CSS INTERNI

e il Giardino di Zen CSS ESTERNI CSS INTERNI e il Giardino di Zen Per gli aggiornamenti consultare il sito del World Wide Web Consortium all'indirizzo. http://en.wikipedia.org/wiki/world_wide_web_consortium Inserimento CSS

Dettagli

CSS avanzati. Marco Porta CIM: Sistemi e Tecnologie Multimediali. esempi di definizione del layout e specifica del dispositivo di visualizzazione

CSS avanzati. Marco Porta CIM: Sistemi e Tecnologie Multimediali. esempi di definizione del layout e specifica del dispositivo di visualizzazione CSS avanzati esempi di definizione del layout e specifica del dispositivo di visualizzazione 1 Un esempio di definizione del layout attraverso i fogli di stile Si consideri la pagina seguente: In questa

Dettagli

Laboratorio di Sistemi CRUD con MySQL JSP (Java)

Laboratorio di Sistemi CRUD con MySQL JSP (Java) Il problema Vogliamo realizzare un applicativo web che consenta di inserire, modificare e cancellare i record della tabella libri_tbl (database MySQL biblio_db). In questi casi, parliamo di applicativo

Dettagli

Primi elementi di... Cascading Style Sheet (o Fogli di Stile)

Primi elementi di... Cascading Style Sheet (o Fogli di Stile) ISIS Giordano Bruno - BUDRIO Primi elementi di... Cascading Style Sheet (o Fogli di Stile) Lezioni del Prof. Gianluigi Roveda Caratteristiche dei Fogli di Stile Divide la descrizione del contenuto del

Dettagli

CSS Cascading Style Sheet Parte 2 (b)

CSS Cascading Style Sheet Parte 2 (b) CSS Cascading Style Sheet Parte 2 (b) Dr. Ing. Information Management Systems (IMS) Research Group, Dipartimento di Ingegneria dell Informazione, Università degli Studi di Padova {silvello}@dei.unipd.it

Dettagli

Laboratorio di sistemi Tag personalizzati Jsp [NetBeans] Sezione A

Laboratorio di sistemi Tag personalizzati Jsp [NetBeans] Sezione A Sezione A In NetBeans creiamo una applicazione web nel solito modo, confermando tutte le impostazioni proposte senza alcuna variazione. Per costruire una libreria di tag personalizzata, costruiamo innanzitutto

Dettagli

Laboratorio di Sistemi Serializzare mediante file Java

Laboratorio di Sistemi Serializzare mediante file Java Torniamo ancora una volta sul problema della serializzazione degli oggetti e riconsideramo il seguente modello a oggetti. Fig. 1 Modello a oggetti della nostra applicazione Per semplicità supponiamo che

Dettagli

Selettori. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione

Selettori. 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;

Dettagli

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style

Dettagli

Laboratorio di sistemi MVC Jsp [NetBeans]

Laboratorio di sistemi MVC Jsp [NetBeans] Estratto da "http://it.wikipedia.org/wiki/model-view-controller" Definizione Model-View-Controller (MVC, talvolta tradotto in italiano Modello-Vista-Controllore) è il nome di un design pattern fondamentale

Dettagli

Lezione 7: Introduzione ai layout

Lezione 7: Introduzione ai layout Lezione 7: Introduzione ai layout Principali tipi di layout; Gli strumentidel mestiere: Il box model; Elementi di blocco e in linea; e ; Il posizionamento. Tutorial: un semplice layout a una

Dettagli

Laboratorio di sistemi JSTL e database Jsp [NetBeans]

Laboratorio di sistemi JSTL e database Jsp [NetBeans] Elenco dei film ottenuti usando la libreria JSTL 1.1 elenco_film_jstl.pdf Pag. 1/18 Cozzetto Inserisco i dati di un film. Prima dell'inserimento i dati vengono confrontati con quelli della tabella film_tbl

Dettagli

Elementi Blocco vs elementi inline

Elementi Blocco vs elementi inline (X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra

Dettagli

Realizzare un semplice layout a due colonne. Esempio base (fisso) Alternative posizionamento colonne Lavorare con le percentuali.

Realizzare un semplice layout a due colonne. Esempio base (fisso) Alternative posizionamento colonne Lavorare con le percentuali. Realizzare un semplice layout a due colonne Esempio base (fisso) Alternative posizionamento colonne Lavorare con le percentuali. 1 Tutorial 2 Di cosa abbiamo bisogno? intestazione contenitore (non indispensabile)

Dettagli

Elementi Blocco vs elementi inline

Elementi Blocco vs elementi inline (X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra

Dettagli

Anno Accademico Corso di Tecnologie Web CSS

Anno Accademico Corso di Tecnologie Web CSS Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/ HTML e Cascading Style Sheets > L

Dettagli

Anno Accademico Corso di Tecnologie Web CSS

Anno Accademico Corso di Tecnologie Web CSS Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2007 2008 Corso di Tecnologie Web CSS http://www lia.deis.unibo.it/courses/tecnologieweb0708/ HTML e Cascading Style Sheets > L

Dettagli

Guida ai CSS. Introduzione

Guida ai CSS. Introduzione Guida ai CSS Introduzione... 1 Sintassi... 1 Stile in linea... 1 Stile incorporato... 2 Stile esterno... 2 Classi... 3 Selettori ID... 4 Grafica... 4 Link... 5 Attributi testo... 6 Attributi carattere...

Dettagli

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) Foglio di stile CSS (Cascading Style Sheets) Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Vedi http://www.w3schools.com/css/demo_default.htm

Dettagli

Università di Bergamo Facoltà di Ingegneria. Applicazioni Internet B. Paolo Salvaneschi B4_1 V1.9 HTML CSS

Università di Bergamo Facoltà di Ingegneria. Applicazioni Internet B. Paolo Salvaneschi B4_1 V1.9 HTML CSS Università di Bergamo Facoltà di Ingegneria Applicazioni Internet B Paolo Salvaneschi B4_1 V1.9 HTML CSS Il contenuto del documento è liberamente utilizzabile dagli studenti, per studio personale e per

Dettagli

Guida alla realizzazione di un layout fluido

Guida alla realizzazione di un layout fluido Guida alla realizzazione di un layout fluido I siti Web possono essere realizzati secondo due diversi schemi di layout: layout fissi e fluidi. La differenza tra i due tipi di layout consiste in una diversa

Dettagli

4 Estensioni proprietarie. 4 Conversione del testo in immagini. 4 Uso di immagini per il controllo degli spazi bianchi

4 Estensioni proprietarie. 4 Conversione del testo in immagini. 4 Uso di immagini per il controllo degli spazi bianchi Universita degli Studi di Bologna - Facolta di Ingegneria HTML e Cascading Style Sheets > L HTML è nato in ambienti scientifici Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/

Dettagli

Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2

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

Dettagli

FUTURAWEB. Animazioni CSS3. Esempio di utilizzo delle animazioni CSS3 (con l utilizzo della proprietà animation.

FUTURAWEB. Animazioni CSS3. Esempio di utilizzo delle animazioni CSS3 (con l utilizzo della proprietà animation. FUTURAWEB Animazioni CSS3 Esempio di utilizzo delle animazioni CSS3 (con l utilizzo della proprietà animation www.futuraweb.eu 1 di 12 Questioni di compatibilità Quando parliamo di CSS3 e animazioni, inevitabilmente

Dettagli

Sistemi Di Elaborazione Dell informazione

Sistemi Di Elaborazione Dell informazione Sistemi Di Elaborazione Dell informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010 Fogli di stile (CSS) Cascade Style Sheets

Dettagli

Riassunto CSS Tutorial

Riassunto CSS Tutorial Colori e sfondi color background-color h1 { color: #ff0000; body { background-color: #FFCC66; Riassunto CSS Tutorial Per uno sfondo trasparente: body { background-color: transparent; background-image background-repeat

Dettagli

Riassunto CSS Tutorial Colori e sfondi

Riassunto CSS Tutorial Colori e sfondi Proprietà Esempio Descrizione color background-color background-image background-repeat background-attachment background-position h1 { color: #ff0000; body { background-color: #FFCC66; body { background-image:

Dettagli

Stile CSS per sito web

Stile CSS per sito web Stile CSS per sito web Ivancich Stefano 15 Marzo 2015 INDICE 1. PAGINA DI BASE...1...1...2 2. HEADER...3...3...3 2.1. LOGO DEL SITO...3...3...4 2.2. NAVIGATION MENU...4...4...4 3. FOOTER...5...5...5 4.

Dettagli

CSS / BOX MODEL e PSEUDOCLASSI. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1

CSS / BOX MODEL e PSEUDOCLASSI. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 CSS / BOX MODEL e PSEUDOCLASSI LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 CSS: RIPRESA DELLA SCORSA LEZIONE CSS: servono per separare il contenuto dal visual per questo è preferibile

Dettagli

Laboratorio di Sistemi DAO JSP (Java)

Laboratorio di Sistemi DAO JSP (Java) Il problema Vogliamo progettare una piccola web application che ci consenta di ottenere, scegliendo un autore da una combo box, l'elenco dei libri scritti da quell'autore (è un esempio già trattato in

Dettagli

Siti molto ben fatti /1 08

Siti 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

Dettagli

CSS: Colori, testo, caratteri, liste e link

CSS: Colori, testo, caratteri, liste e link CSS:, testo, caratteri, liste e link Università di Pisa pievatolo@dsp.unipi.it 13 aprile 2014 Sommario 1 2 Famiglia Dimensioni Corsivo e maiuscoletto Peso: quanto dev essere grasso il grassetto? 3 4 5

Dettagli

Laboratorio di Sistemi Fattoriale di un numero Jsp [Java]

Laboratorio di Sistemi Fattoriale di un numero Jsp [Java] Desideriamo realizzare una applicazione web che ci consenta di calcolare il fattoriale di un numero. L'esercizio in sé non particolarmente difficile, tuttavia esso ci consentirà di affrontare il problema

Dettagli

* Le proprieta' dei margini: "margin" che assegnano un bordo esterno al box;

* Le proprieta' dei margini: margin che assegnano un bordo esterno al box; TIPO: CSS ATTRIBUTI DI MARGINI ED ALLINEAMENTO I fogli di stile permettono di giustificare il testo senza l'uso improprio di tabelle o espedienti simili. I CSS creano degli elementi visualizzati all'interno

Dettagli

STILE E CSS. classi sezioni. tag

STILE 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

Dettagli

Cascading Style Sheet

Cascading Style Sheet I fogli di stile Cascading Style Sheet Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione e Culture (si ringrazia il dott. Claudio Schifanella, che ha concesso l uso del materiale)

Dettagli

Architettura dell Informazione

Architettura dell Informazione Architettura dell Informazione 7. - Cascading Style Sheets (CSS - appendice) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in

Dettagli

Tabella 2.2 Indice delle proprietà Nome Valori Pr El Er Cp

Tabella 2.2 Indice delle proprietà Nome Valori Pr El Er Cp Tabella 2.2 Indice delle background ['background-color' 'background-image' 'background-repeat' 'background-attachment' 'background-position'] background-attachment scroll fixed scroll background-color

Dettagli

Laboratorio di Sistemi Serializzazione JSP (Java)

Laboratorio di Sistemi Serializzazione JSP (Java) Il problema Vogliamo realizzare un prototipo di applicazione web che visualizzi l'elenco degli album relativi ad un certo artista e, per ogni album, l'elenco dei brani in esso contenuti. Per farlo sfruttiamo

Dettagli

CSS. Cascading Style Sheet

CSS. 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

Dettagli

CSS - Elementi di base

CSS - Elementi di base Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle 16.02. Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione

Dettagli

Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row

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

Dettagli

ALBO PRETORIO ONLINE

ALBO PRETORIO ONLINE ALBO PRETORIO ONLINE Integrazione dell'albo nel sito della scuola Versione 1.0 Mediasoft snc Guida rapida Per integrare la tabella con l'elenco dei documenti e, eventualmente, il form di ricerca è sufficiente

Dettagli

Laboratorio di sistemi MVC versione 2 Jsp (NetBeans)

Laboratorio di sistemi MVC versione 2 Jsp (NetBeans) Definizione Adattato da "http://it.wikipedia.org/wiki/model-view-controller" Model-View-Controller (MVC, talvolta tradotto in italiano Modello-Vista-Controllore) è il nome di un design pattern fondamentale

Dettagli

I fogli di stile (CSS)

I fogli di stile (CSS) I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono

Dettagli

Struttura di una pagina HTML Le parti fondamentali che compongono una pagina web

Struttura di una pagina HTML Le parti fondamentali che compongono una pagina web Struttura di una pagina HTML Le parti fondamentali che compongono una pagina web Sviluppo di siti web UD03 Fablab Design Macrostruttura della pagina Una pagina HTML è sostanzialmente composta di una riga

Dettagli

Divisions e spans. Esercizio. <html> <head> <title>esempio uso del tag span</title> <style> <!--

Divisions e spans. Esercizio. <html> <head> <title>esempio uso del tag span</title> <style> <!-- Divisions e spans L applicazione degli stili può essere eseguita anche su sezioni di testo tramite i tag div e span. Div suddivide il testo analogamente a come si suddivide un articolo in titolo, sottotitolo,paragrafi,

Dettagli

hashmap.pdf Pag. 1/6 Cozzetto

hashmap.pdf Pag. 1/6 Cozzetto / Persona.java Created on 20 novembre 2007, 10.07 To change this template, choose Tools Template Manager and open the template in the editor. / package hashmapjavaapp; / @author maurizio / public class

Dettagli

Laboratorio di sistemi SELECT e checkbox Jsp [Java]

Laboratorio di sistemi SELECT e checkbox Jsp [Java] Fig. 1 - Vogliamo visualizzare book_id, autore e titolo dalla tabella books del database shop Fig. 2 - Tabella books select_checkbox.pdf Pag. 1/5 Cozzetto Fig. 3 - Abbiamo due record in output File index_1.jsp

Dettagli

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web. I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come

Dettagli

layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto

layout 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

Dettagli

Linguaggi per il Web Linguaggi di markup: CSS

Linguaggi per il Web Linguaggi di markup: CSS Linguaggi per il Web Linguaggi di markup: CSS Fogli di stile (CSS) Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme permettono di separare il contenuto

Dettagli

I fogli di stile (CSS)

I fogli di stile (CSS) I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono

Dettagli

CSS 6. Il modello contenitore (box model) Elementi flottanti

CSS 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

Dettagli

Liberamente adattato da Java dai fondamenti alla programmazione avanzata JS2E versione 1.5 di Karsten Samaschke, Apogeo editrice

Liberamente adattato da Java dai fondamenti alla programmazione avanzata JS2E versione 1.5 di Karsten Samaschke, Apogeo editrice Liberamente adattato da Java dai fondamenti alla programmazione avanzata JS2E versione 1.5 di Karsten Samaschke, Apogeo editrice Vogliamo realizzare un'applicazione di tipo CRUD (Create, Read, Update,

Dettagli

CSS: CASCADING STYLE SHEETS MODULO 8

CSS: CASCADING STYLE SHEETS MODULO 8 CSS: CASCADING STYLE SHEETS MODULO 8 CSS È il linguaggio standard per la stilizzazione di documenti HTML Assolve al compito di informare il browser circa l'aspetto da conferire ai vari tag presenti nel

Dettagli

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style

Dettagli

LEZIONE 04. Riepilogo CSS

LEZIONE 04. Riepilogo CSS LEZIONE 04 Riepilogo CSS SELETTORI SELETTORI I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile. Prova il codice ELEMENTO

Dettagli

Personalizza, modifica il layout di Contact Form 7 via Css

Personalizza, modifica il layout di Contact Form 7 via Css Personalizza, modifica il layout di Contact Form 7 via Css wpp.altervista.org/blog/personalizza-modifica-il-layout-di-contact-form-7/ Ciao, benvenuto su Go WordPress. In un articolo precedente ho spiegato,

Dettagli

JavaScript 5. CSS e JavaScript

JavaScript 5. CSS e JavaScript JavaScript 5 CSS e JavaScript CSS e JavaScript Attraverso JavaScript è possibile controllare proprietà CSS Possiamo controllare lo stile di un singolo elemento HTML o di un tag in generale Possiamo aggiungere

Dettagli

Cascading Style Sheet CSS. Sintassi Css. Come inserire un foglio di stile. Fogli di stile esterni. Separazione contenuto/layout

Cascading 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

Dettagli

Laboratorio di Sistemi Autenticazione utente mediante MySQL Jsp [Java]

Laboratorio di Sistemi Autenticazione utente mediante MySQL Jsp [Java] Per la comprensione del presente articolo, occorre aver assimilato i concetti esposti nell'articolo Prototipo autenticazione utente (file autenticazione_2.pdf). (Tratto da Wikipedia, l'enciclopedia libera)

Dettagli

Applicazione Ipermediali 2007/2008

Applicazione Ipermediali 2007/2008 Applicazione Ipermediali 2007/2008 CSS: esempi pratici Politecnico di Milano Obiettivi Aumentare la confidenza con le regole CSS Dimostrare alcune problematiche relative alla compatibilità tra browser

Dettagli

Progettazione di siti web a.a. 2015/16

Progettazione di siti web a.a. 2015/16 CSS per la tipografia web Progettazione di siti web a.a. 2015/16 Fogli di stile: tipografia web Maria Simi Marzo, 2016 [Manuale di riferimento del W3C] Gli stili per i caratteri Gli stili per il testo

Dettagli

Realizzare il layout di un sito web senza utilizzare frame e tabelle

Realizzare il layout di un sito web senza utilizzare frame e tabelle Realizzare il layout di un sito web senza utilizzare frame e tabelle Questa guida descrive in maniera semplice e essenziale i passi necessari alla realizzazione di una pagina web strutturata in maniera

Dettagli

Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine

Serve 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

Dettagli

Cosa vuol dire HTML? Hyper Text Markup Language

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)

Dettagli

Laboratorio di Sistemi Database a oggetti: db4o Jsp [Java]

Laboratorio di Sistemi Database a oggetti: db4o Jsp [Java] (liberamente adattato da www.db4o.com) db4o (database for objects) db4o (www.db4o.com) è un database open source che consente agli sviluppatori Java e.net di rendere persistenti gli oggetti (cioè salvarne

Dettagli

CSS IN PASSATO ABBIAMO DETTO.. Introduzione. Con HTML non possiamo produrre siti come quelli che conosciamo, ma solo specificare dei contenuti

CSS IN PASSATO ABBIAMO DETTO.. Introduzione. Con HTML non possiamo produrre siti come quelli che conosciamo, ma solo specificare dei contenuti CSS Introduzione CSS3 INTRODUZIONE IN PASSATO ABBIAMO DETTO.. Con HTML non possiamo produrre siti come quelli che conosciamo, ma solo specificare dei contenuti Con CSS specificheremo lo stile con il quale

Dettagli

Laboratorio di Sistemi Autenticazione utente mediante MySQL Jsp [Java]

Laboratorio di Sistemi Autenticazione utente mediante MySQL Jsp [Java] Per la comprensione del presente articolo, occorre aver assimilato i concetti esposti nell'articolo Prototipo autenticazione utente (file autenticazione_2.pdf). (Tratto da Wikipedia, l'enciclopedia libera)

Dettagli

Laboratorio di sistemi Web Application in Php5 Php

Laboratorio di sistemi Web Application in Php5 Php Applicazioni web con Xampp, Php5 e NetBeans 6.5 (Windows) Vogliamo ora riscrivere a titolo di prova un'applicazione web precedentemente scritta in Java (si legga l'articolo all'indirizzo http://www.mauriziocozzetto.net/pdf/dao_mysql.pdf).

Dettagli

Tecnico della Produzione Multimediale per la Valorizzazione della Cultura e dell'arte

Tecnico della Produzione Multimediale per la Valorizzazione della Cultura e dell'arte Piano triennale regionale 2016-2018 Rete Politecnica PO FSE 2014/2020 Regione Emilia Romagna - Obiettivo Tematico 10 - Asse III Istruzione e formazione Priorità di Investimento 10.4 Obiettivo specifico

Dettagli

CSS: HTML: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli. Le immagini mappate

CSS: 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

Dettagli

<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jsp Page</title> </head> <body>

<html> <head> <meta http-equiv=content-type content=text/html; charset=utf-8> <title>jsp Page</title> </head> <body> itext è una libreria (ottimizzata per l uso in java) per generare pdf al volo ideata da Bruno Lowagie e Paolo Soares. Per poter sviluppare un applicazione con NetBeans, dobbiamo intanto scaricare il file

Dettagli

Modalità per le denunce dei Sinistri

Modalità per le denunce dei Sinistri body.base {font-family: Arial; font-size: 10pt;} p.titolo12 {font-size: 16pt; font-weight: bold; color: green; text-align: center; margin-bottom:auto;} p.titolo22 {font-size: 12pt; font-weight: bold; color:

Dettagli

Laboratorio di Informatica (Chimica)

Laboratorio di Informatica (Chimica) Laboratorio di Informatica (Chimica) HTML: Cascading Style Sheet (CSS). Walter Cazzola Dipartimento di Informatica e Comunicazione Università à degli Studi di Milano. e-mail: cazzola@dico.unimi.it Walter

Dettagli

CSS (Cascading Style Sheets) HTML (Hyper Text Markup Language) HTML: stili. A.Lioy - Politecnico di Torino ( ) F.1

CSS (Cascading Style Sheets) HTML (Hyper Text Markup Language) HTML: stili. A.Lioy - Politecnico di Torino ( ) F.1 CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale

Dettagli

HTML Lezione1. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni

HTML Lezione1. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni HTML Lezione1 Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni HTML (Hyper Text Markup Language) è formato da definizioni, elementi (tags), questi impartiscono al browser (il programma

Dettagli

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets il linguaggio per modificare lo stile delle pagine web 1 Fogli di stile (CSS) Servono per facilitare la creazione di pagine HTML con un aspetto uniforme Permettono di separare

Dettagli

Laboratorio Digitale 1

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

Dettagli