Introduzione ad HTML/CSS. Linguaggi di Mark-Up: XML Anno Accademico 2003/2004

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Introduzione ad HTML/CSS. Linguaggi di Mark-Up: XML Anno Accademico 2003/2004"

Transcript

1 Introduzione ad HTML/CSS Linguaggi di Mark-Up: XML Anno Accademico 2003/2004

2 Cosa è il web? Il Web è una rete di risorse di informazioni. È composto da 3 elementi fondamentali: 1. Un uniform naming scheme per localizzare le risorse nel Web (e.g., URIs). 2. Protocolli, per accedere alle risorse per nome del Web (e.g., HTTP). 3. Ipertesti per la navigazione sul web (e.g., HTML).

3 URI (Uniform Resource Identifier) Ogni risorsa disponibile su web (documenti HTML,immagini,video,mp3,...) ha un indirizzo che può essere codificato da un URI. Un URI consiste tipicamente da tre parti: Meccanismo usato per accedere alla risorsa (Naming Scheme); Nome della macchina su cui risiede la risorsa (Machine Hosting); La Risorsa: Il path della risorsa sulla macchina che ospita; Esempio Indirizzo WEB della mia home page: Che si traduce in: C'è un documento disponibile tramite il protocollo HTTP; Questo documento risiede sul server accessibile tramite il path: /~snicotra/index.html (index.html viene attaccato di default) Altri esempi di naming scheme sono: Indirizzi di posta elettronica: Siti ftp (File Transfer Protocol):_ ftp://ftp.unina.it

4 Sezioni e URI relativi All'interno di un documento HTML possono essere specificate delle ancore che risultanto accessibili aggiungendo all'uri il simbolo # seguito dal nome. Es: Gli URI relativi sono privi di naming scheme e di machine hosting In altre parole contengono solo il path della risorsa. (Es. file.html, img/background.gif

5 A che servono gli URI? Creare Link ad un altro documento o risorsa, Creare Link a fogli di stile o script esterni Inserire un immagine, oggetto, o un applet nella pagine, Creare un immagine cliccabile (MAP) Spedire una form. Creare dei Frames Citare riferimenti esterni Riferirsi a convenzioni sui metadata che descrivono dei documenti.

6 Cosa è HTML? HTML è una lingua franca per pubblicare ipertesti sul World Wide Web. E' un formato non proprietario basato su SGML. I documenti HTML possono essere creati da semplici editor di testo (persino Blocco Note ), da più meno potenti tool WYSISYG, o generati dinamicamente da linguaggi di scripting sever side (PHP, ASP, Perl)

7 Che cos è l HTML (2) Linguaggio universalmente conosciuto (potenzialmente una sorta di lingua madre di pubblicazione) che tutti i computer possono interpretare. Tramite l HTML l autore può: Pubblicare documenti online con headings (titoli), testo, tabelle, liste, foto, etc. Recuperare informazioni online attraverso links inpertestuali cliccando Costruire forms per condurre transazione con servizi remoti, per fare ricerche, prenotare alberghi, fare acquisti ecc. Insierire fogli di calcolo, video, suoni, e molte altre applicazioni.

8 Chi decide cosa? L HTML è un linguaggio che viene interpretato dal browser. Differenti Browser = Differenti HTML? Nasce il Consorzio w3c (www.w3c.org) (1994) allo scopo di creare standard che tutti i produttori devono (o dovrebbero) rispettare. Il consorzio fornisce le specifiche Recommendation.

9 HTML History 1990 Nascita HTML HTML HTML HTML XHTML XHTML Module-based XHTML 2001

10 Noi tratteremo HTML 4.01 Specification W3C Recommendation 24 December con attenzione a XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) e a Web Accessibility Initiative (WAI) E un occhio lontano al concetto di usabilità

11 Struttura di un documento HTML Un documento HTML è fatto da tre parti 1. Una linea che contiene la versione di HTML 2. Una sezione contenente l'intestazione. (HEAD) 3. Il corpo, che contiene il contenuto del documento.

12 Il mio primo HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>il mio primo HTML</title> </head> <body> <p> Hello, World! </p> </body> </html> Esempi\ilmioprimohtml.html

13 La dichiarazione <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Ci dice quale versione di HTML stiamo utilizzando. In particolare quale DTD (Document Type Definition) tra quelle disponibili in HTML 4.01 utilizziamo: The HTML 4.01 Strict DTD (strict.dtd) : comprende tutti gli elementi e gli attributi che non sono deprecated e che non appaiono nei documenti frameset. The HTML 4.01 Transitional DTD (loose.dtd): Strict + elementi deprecated <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> The HTML 4.01 Frameset DTD (frameset.dtd) Transitional + Frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd">

14 Analisi <html> <head> <meta http-equiv="content-type content="text/html; charset=iso "> <title>il mio primo HTML</title> </head> <body> <p> Hello, World! </p> </body> </html> TAG di apertura Radice del documento HTML Intestazione del documento Dichiarazione necessaria Al browser per identificare Il tipo di documento E il set di caratteri Corpo del documento TAG di chiusura

15 Struttura dei comandi HTML Un generico TAG HTML (elemento) è del tipo: <nometag attr1= val1 attr2= val2 > Parte interna (può contenere altri tag) </nometag> Esempio: <html> blablabla </html>

16 Buone abitudini (in vista di XTML) In XHTML vanno scritti solo in minuscolo. In XHTML tutti i TAG devono essere chiusi I valori degli attributi vanno sempre tra

17 Gli attributi e i tag deprecated Nelle varie versioni di HTML, spesso si sono mantenuti obsoleti o sbagliati alcuni tag e alcuni attributi per retro-compatibilità. Tali elementi vengono detti deprecated. Le versioni Transitional di HTML li ammettono e, in ogni caso, vanno conosciuti. Molti di questi elementi hanno a che fare con la rappresentazione visiva degli elementi

18 Il Tag HTML TAG: <html> Attributi: Lang: (it,en) Dir: Direzione del testo (LTR RTL) NOTA: Lang e Dir sono attributi di internazionalizzazione (i18n) che quasi tutti gli elementi supportano.

19 L intestazione <head> </head> Racchiude informazioni sul documento. <title> </title> Titolo (Obbligatorio) Indica il titolo del documento (si vede nella barra del titolo) <meta> (non si chiude) Attributi: Name: Nome Content: CDATA http-equiv: Nome Esempi: <meta http-equiv="content-type content="text/html; charset=iso > <meta name= author content= Salvo Nicotra > <meta name="keywords" content= html,css,dmi"> Anche i tag <script> <style> <link> vanno in questa sezione

20 L elemento BODY <body> Attributi: background = uri Sfondo Pagina (deprecated) text = color Colore del testo (deprecated) link, vlink, alink = color Colori dei link da visitare, visitati, rollover Altri attributi comuni: id, class: identificatori lang, dir: informazioni i18n style: informazioni di stile bgcolor=colore colore di sfondo Attributi sugli eventi: onload,onunload, onclick

21 Due parole sugli identificatori Gli attributi id, class vengono rispettivamente per assegnare un nome unico ad un elemento e per assegnare l elemento ad una o più classi. Ad esempio id viene usato come selettore di stile, come target anchor per i link, per i linguaggi di script, ecc. Class viene usato sostanzialmente per i fogli di stile

22 Elementi inline o block level Gli elementi HTML si distinguono in inline o block level. I block level contengono altri block level o inline, gli inline solo dati o altri inline. (ad esempio <p> è inline)

23 Raggruppare gli elementi: div e span <div> contenitore per elementi block level <span> contenitore per elementi in line Aggiungono struttura al documento (divisione in sezioni) Attributi: id, class, lang, dir, style, eventi align = left center right justify (Deprecated) Allineamento orizzontale dell elemento rispetto al contesto Esempio: <div align="center"> Sezione allineata al centro </div>

24 Titoli (Headings) <h1> <h2> <h3> <h4> <h5> <h6> Sei livelli di titoli (livello di importanza: da 1 a 6). Attributi: id, class, i18n, style, align, eventi Di solito l user agent (il browser) li visualizza usando particolari font e portando a capo il testo successivo. Non servono a fare il testo + grande, ma ad indicare del testo che è considerato + importante nel documento.

25 Address <address> </address> E un elemento inline. Attributi: id, class, i18n, style, eventi (li chiameremo soliti ) Il tag ADDRESS normalmente si usa all inizio o alla fine del corpo del documento HTML per indicare i riferimenti dell autore e/o curatore della pagina. Il browser può visualizzarlo in corsivo. Esempio: <address> Questo documento è stato scritto da </address>

26 Tag di testo I seguenti TAG sono tag inline che indicano particolari proprietà del testo. Normalmente il browser li rappresenta in modo particolare, il che non significa che devono essere usati per ottenere effetti visivi!!! Gli attributi per tutti questi tab sono i soliti EM: Indicates emphasis. STRONG: Indicates stronger emphasis. CITE: Contains a citation or a reference to other sources. DFN: Indicates that this is the defining instance of the enclosed term. CODE: Designates a fragment of computer code. SAMP: Designates sample output from programs, scripts, etc. KBD: Indicates text to be entered by the user. VAR: Indicates an instance of a variable or program argument. ABBR: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.). ACRONYM: Indicates an acronym (e.g., WAC, radar, etc.).

27 blockquote e q Tag per le citazioni. <blockquote> Block-level <q> inline Ammettono l attributo cite=uri per indicare l origine della citazione (oltre i soliti ) q si usa per citazioni in mezzo al testo blocklevel per una citazione lunga Non servono a identare il testo, sebbene sia la normale rappresentazione del visual agent

28 Apice e Pedice <sub> e <sup> Scrivere l equazione della parabola y=ax 2 +bx+c diventa y=ax<sup>2</sup>+bx+c Descrivere un elemento di una matrice: M i,j M<sub>i,j</sub> Nomi stranieri: <span lang="fr">m<sup>lle</sup> Dupont</span>

29 Linee e paragrafi Il tag <p> definisce un paragrafo (è inline) Attributi: I soliti + align (deprecated) Per andare a capo forzatamente si usa il tag <br> (sta per break) che non si chiude.

30 Il Tag PRE (Preformatted) <pre> Inserisce del testo preformattato, cioè del testo che viene stampato dal browser così come lo abbiamo scritto. È un tag inline.

31 Sui colori I colori vanno in esadecimale ma alcuni sono stati standardizzati con nomi significativi Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF

32 Il tag FONT (Very deprecated) Specifica alcune caratteristiche del font usato. Attributi: Size (intero da 1...7) Color (o #xxyyzz o per nome (black )) Face (lista tipo font da utilizzare (helvetica,verdana..)

33 Stili di Font TT: Renders as teletype or monospaced text. I: Renders as italic text style. B: Renders as bold text style. BIG: Renders text in a "large" font. SMALL: Renders text in a "small" font. STRIKE e S: Render strike-through style text. (deprecated) U: Renders underlined text (deprecated) I tag fisici (inline) riguardano i font, sebbene non siano tutti deprecated, è sconsigliabile il loro uso in favore degli stili.

34 Elenchi L HTML permette di rappresentare dati sotto forma di elenco. Tre categorie: Liste non ordinate Liste ordinate Definizioni

35 Elenchi non ordinati L elenco non ordinato viene introdotto dal TAG <UL> (Unordered List) che va chiuso All interno del TAG ogni elemento va specificato con il TAG <LI> (List Element) Struttura: <ul> <li> Primo elemento </li> <li> i-esimo elemento </li> </UL>

36 Elenchi ordinati L elenco ordinato viene introdotto dal TAG <ol> (Ordered List) che va chiuso All interno del TAG ogni elemento va specificato con il TAG <li> (List Element) Struttura: <ol> <li> Primo elemento </li> <li> i-esimo elemento </li> </ol>

37 Alcuni attributi start= elemento_di_partenza ; da applicare a <ol> (deprecated) type= tipo_elenco ; da applicare ad entrambi (deprecated) Per ol i valori sono: 1, A, a, I, i Per ul, i valori sono: circle, square, dis

38 Elenchi di definizioni Generalmente sono coppie di termini/definizioni. Ad esempio quando si pubblicizza un prodotto si potrebbero indicare: Basso Costo La nuova versione di questo prodotto costa molto meno della precedente; Facile da usare Abbiamo migliorato l usabilità del prodotto Sicuro per i bambini Lo si può lasciare in una stanza con bimbi da soli: non si feriranno (non lo garantiamo)

39 I Tag <dl> Definition List: Apre l elenco, va chiuso alla fine. <dt>: Definition Term: Definisce il termine <dd>: Definition Description: Definisce la descrizione del termine.

40 Le liste si possono annidare <ul> <li> Sotto mettiamo una lista </li> <li> <ul> <li>bla</li> </ul> </li> </ul>

41 Link Collegamenti Ipertestuali Un link è un collegamento tra una risorsa web ed un altra. Costrutto di base per gli ipertesti. Causa di successo del web Un link ha due estremi, detti anchor Source anchor: inizio del link Destination: Risorsa puntata, qualsiasi risorsa web (documenti HTML, video, suoni, immagini, ecc)

42 Visitare una risorsa linkata Il comportamento di base di un link, di solito attivato dal click del mouse è: Viene prelevata la risorsa Il visual agent (browser) carica la risorsa visualizzandola o nella stessa pagina o in una nuova finestra (o in un frame) o aprendo un programma che gestisce il tipo di file relativo. Un link può puntare ad una parte della stessa pagina.

43 Il Tag <a> Il tag <a> Anchor, permette la creazione di link all interno di pagine HTML Va chiuso obbligatoriamente Di solito l elemento (la parte compresa tra l inizio e la fine di un tag) viene sottolineato e quando ci si passa sopra il cursore del mouse cambia forma

44 Il Tag <a> (2) Sintassi <a> Attributi: href= URI, indica la risorsa destinazione, può essere relativo (e.g. nello stesso computer) o assoluto (specificando tutte le parti dell URI). In altre parole specifica l anchor destinazione. name= Nome, da un nome al punto di ancoraggio in modo che possa essere destinazione di 0 o più link.

45 E tempo di esempi Un link alla pagina dell università <a href= >Se clicchi qui vai al sito dell università di Catania </A> Un link a google (importantissimo) <a href= > <strong> Il motore di Ricerca</strong> </a>

46 Links nella stessa pagina. <h1> Sommario</h1> <a href= #sezione1> > Sezione 1 </A> altre sezioni <a name= sezione1 > Sezione </A> Scrivere la sezione 1 <a name= sezione2 > Sezione 2</A>

47 Alcune note I link non si possono annidare. È illegale mettere un link dentro un altro link, oltre che inutile I nomi del link devono essere UNIVOCI Esempio sbagliato <a name= uno > </a> <a name= uno > </a>

48 Alcune note (bis) Il riferimento ai fragment identifiers, cioè ai nomi dei link, devono essere scritti esattamente come sono stati scritti. Il sistema dei nomi è case-sensitive, cioè distingue in modo diverso maiuscole e minuscole (esempio: Sezione è diverso da sezione )

49 Alcune note (tris) Gli anchor destination possono essere fissati su qualunque elemento utilizzando l attributo id. Valgono le stesse regole di prima Esempio <h1 id= sezione1 > </h1> Per riferirsi a <A href= #sezione1 > </A> L attributo id serve anche ad altre cose, che vedremo in seguito.

50 Id or Name? Visto che posso usare due tipi di anchor destination, quale scelgo? Alcune issues L attributo id si usa anche per altre cose (fogli di stile, javascript ) Alcuni vecchi browser non supportano l anchor destination con id L attributo name permette di usare più nomi

51 Un ultima cosa L attributo target= _blank, permette di aprire una nuova pagina quando si apre il link.

52 Non solo parole! Aggiungiamo le immagini alle nostre pagine WEB. Un immagine è un rettangolo colorato in cui ogni pixel (picture s element) è caratterizzato da un colore. Un immagine è una risorsa web che deve essere disponibile e localizzata da un URI! Le immagini sono collegate alla pagine HTML, il browser le carica e le visualizza nel punto in cui sono collegate.

53 E per il WEB? Non tutti i formati di immagini sono supportati dai browser. Consideriamo il sottoinsieme proprio dei formati supportati dai browser GIF (per immagini a pochi colori) JPEG (per fotografie) PNG (in evoluzione alternativa open source a GIF) Molti software per l elaborazione delle immagini supportano un ottimizzazione per comprimere le immagini per il WEB.

54 Il TAG per le immagini <img> NON VA CHIUSO Attributi: src= URI : obbligatorio: indica la locazione dell immagine. alt= Testo descrittivo : fornisce una descrizione testuale per i browser non visuali width e height, larghezza e altezza dell immagine impostate manualmente, supportano l uso di percentuali. (non obbligatori ma consigliati)

55 Alcuni altri attributi di IMG hspace= pixels, vspace= pixels (deprecated) Quantità di spazio da mettere a sinistra e a destra dell immagine border= pixels (deprecated) Dimensione del bordo dell immagine align= bottom middle top left right (deprecated) Posizione dell immagine rispetto al contesto

56 Tabelle Le tabelle costituiscono un modo per organizzare dati in righe e colonne; Le celle delle tabelle possono contenere: Testo Immagini Link Moduli Altre tabelle Le tabelle permettono anche di strutturare le pagine, di raggruppare celle, contenere titoli e didascalie;

57 Il TAG fondamentale <table> </table> Alcuni attributi: Width (in punti o percentuale, width= 100% allarga la tabella in tutto lo spazio del browser ) Align (left, center, right): allineamento rispetto alla pagina della tabella; (deprecated) Summary: testo, riassunto della tabella, per browser non visuali.

58 Didascalia della Tabella <caption> </caption> Indica una didascalia della tabella Se si vuole inserire, va messo subito dopo <table> Attributi: Align (top,bottom, left, right) (deprecated)

59 I tre gruppi fondamentali Ogni tabella è costituita da tre parti fondamentali: <thead>: intestazioni <tfoot>: finale <tbody>: corpo

60 Tabelle I tag <thead>, <tbody> e <tfoot> non sono obbligatori, possono essere omessi. <tbody> ci deve essere sempre tranne quando la tabella è fatta da una sola riga e non ci sono <thead> e <tfoot> I tag <thead> e <tfoot> ci devono essere solo quando la tabella ha rispettivamente intestazioni in alto o in basso. Possono esistere più blocchi <tbody>

61 Inserire una nuova Riga <tr> Table Row Crea una riga della tabella Attributi: bgcolor (colore di sfondo della riga) align (left,center,right,justify) valign (top,middle,bottom)

62 Inserire una colonna <td> Table Data Inserisce un elemento di colonna Attributi Width=percentuale o numeropixels; (deprecated) Height=percentuale o numeropixels; (deprecated) Rowspan=di quante righe mi prendo lo spazio? Colspan=di quante colonne mi prendo lo spazio? Bgcolor Align, valign

63 Esempio <table> <caption align="bottom">didascalia</caption> <tr> <td> Uno </td> <td> Due </td> <td> Tre </td> </tr> <tr> <td> Quattro </td> <td> Cinque </td> <td> Sei </td> </tr> <tr> <td> Sette </td> <td> Otto </td> <td> Nove </td> </tr> </table>

64 Formattazione della tabella da parte del browser Esistono alcune attributi della tabella che riguardano la visualizzazione della tabella. Stile del bordo Allineamento orizzontale e verticale del contenuto delle celle Margini delle celle

65 Bordi Frame (quale lato del rettangolo attorno l elemento deve essere visibile) Void (nessuno) Above Below Hsides Vsides Lhs Rhs Box Border

66 Rules Indica quale linee mettere tra le celle dentro la tabella rules= None Rows Cols all

67 Grandezza del bordo Grandezza del bordo Border = pixels Alcune regole Border= 0 implica frame= void

68 Allineamenti E possibile allineare il contenuto delle celle in modo autonomo. align= left center right justify valign = top middle bottom baseline

69 Ereditarietà delle specifiche di allineamento L allineamento orizzontale di una cella può essere specificato: Nell elemento stesso (ad esempio con <p> o <span>) Nella definizione dell elemento stesso <td> Nella riga di appartenza <tr> Nella tabella stessa

70 Ereditarietà delle specifiche di allineamento L allineamento verticale di una cella può essere specificato: Nell elemento stesso (ad esempio con <p>) Nella definizione dell elemento stesso <td> Nella riga di appartenza <tr> Nella tabella stessa

71 Margini Cellspacing = length (indica il numero di pixel da lasciare tra le celle e le celle con il bordo della tabella Cellpadding = lenght (indica il numero di pixel da lasciare tra la cella e il suo bordo).

72 Tabelle: In short <TABLE width border summary frames rules cellspacing cellpadding bgcolor background > <CAPTION align> </CAPTION> (opzionale) <thead> <tfoot> <tbody> <TR bgcolor align valign> <td o th bgcolor rowspan colspan width height align>... </table>

73

74 Anche l occhio vuole la sua parte Se le pagine web, in origine, sono nate dalla necessità di scrivere documenti in una lingua nota a tutti (e quindi sottolineando l aspetto semantico), Oggi le pagine web sono oggetto di consumo di milioni di persone e di conseguenza l aspetto spartano (ma chiaro) della pagine ha lasciato spazio all uso della grafica a scopo prevalentemente estetico.

75 Soluzioni prive di stile Il TAG Font e vari attributi (bgcolor ) L uso di tabelle e frames per il layout L uso di immagini-link Le mappe cliccabili Uso di TAG proprietari (Marquee su tutti Usare programmi (Applet Java, Flash, Shockwave, plugin vari) Dynamic HTML

76 Parole Nuove Accessibilità di un sito web Usabilità di un sito web Web-Designer

77 Idea Usare l HTML per descrivere il contenuto della pagine e definire un nuovo linguaggio (CSS) per controllare il layout globale della pagina. Separare dunque l aspetto grafico da quello informativo allo scopo di migliorare la navigazione, l usabilità e l aspetto estetico delle pagine.

78 I Fogli di Stile (CSS) CSS sta Cascading Style Sheets Gli stili definiscono come mostrare gli elementi HTML. Gli Stili sono normalmente immagazzinati in Style Sheets (Fogli di stile) Gli Stili sono stati aggiunti all HTML per risolvere un problema. I Fogli di stile esterni (.css) permettono di creare uno stile per una serie di pagine, e di risparmiare tempo. Le definizioni di stile multipli seguono precise regole di gerarchie (Cascading).

79 Gli stili: Risolvere un problema I Tag HTML sono stati creati per definire il contenuto di un documento. I TAG devono dire: questo è un paragrafo, questa è una tabella, questo è un titolo, ecc. Il Layout del documento era relegato al browser. Visto che IE e Netscape cominciavano ad aggiungere HTML tags e attributi (come FONT o l attributo bgcolor) alla specifica originale dell HTML, diventava sempre più difficile creare pagine Web che separassero chiaramente il contenuto dal layout. Per risolvere il problema, il World Wide Web Consortium (W3C) ha creato gli STILI aggiungendoli alla specifica HTML 4.0. Sia Netscape 4.0 (e superiori) che Internet Explorer 4.0 (e superiori) supportanno Cascading Style Sheets.

80 Fogli di stile:risparmio di tempo Gli stili in HTML 4 definiscono come gli elementi HTML devono essere visualizzati, similmente a come fa il tag FONT. I fogli di stile sono normalmente memorizzati al di fuori dei documenti HTML e usati da tutti i documenti. Se volessi cambiare l apparenza e il layout di tutto il sito, basta cambiare il foglio di stile senza modificare l HTML. CSS fa risparmiare tempo!

81 Multiple Styles Will Cascade Into One I fogli di stile permettono di specificare informazioni di stile in molti modi: Gli stili possono essere specificati: Dentro un elemento HTML (con l attributo style) Dentro un documento HTML (nella sezione HEAD) Esternamente in un file CSS e richiamati dentro un documento HTML

82 Cascading Order Quale stile viene usato quando vengono definiti più stili per lo stesso elemento? In generale, tutti gli stili cascade dentri un unico foglio di stile virtuale dove vengono rispettate le seguenti priorità (dal meno importante al più importante) Browser default External Style Sheet Internal Style Sheet (in <head> ) Inline Style (nell elemento HTML)

83 Sintassi CSS La sintassi di CSS è composta da tre parti: Un selettore (tipicamente il tag HTML da formattare) Una proprietà (un attributo da cambiare) Un Valore (valore ammissibile per la proprietà) selector {property: value} La proprietà e il valore sono divise da i due punti e dentro le parentesi graffe. body {color: black} Se il valore è un parola con spazi va messo tra virgolette. p {font-family: "sans serif"}

84 Specificare più proprietà Si possono specificare più proprietà comuni allo stesso selector (ad esempio colore del testo e allineamento per il tag P) separandole con il ; p {text-align:center;color:red} Allo scopo di migliorare la lettura dello stile si preferisce scriverlo nella forma: p { text-align: center; color: black; font-family: arial; }

85 Grouping I selettori possono essere raggruppati. L elemento di separazione è la virgola. Esempio: Tutti gli headings (titoli) scritti in verde. h1,h2,h3,h4,h5,h6 { color: green }

86 Esempio <style type="text/css"> h1 {color: red; text-align: center; font-size:24px} p {color: rgb(12,154,130); text-align: justify; font-size:12px} table {background:blue} td {color: yellow; text-align: center; font-size:14px; fontfamily:arial} </style>

87 The class Selector E possibile specificare uno stile specifico per un elemento in modo da caratterizzarlo ulteriormente. Ad esempio potrei volere un tipo paragrafo con allineamento a destra e corsivo e un altro tipo paragrafo centrato e grassetto. Con i fogli di stile è possibile definire un sotto tipo e richiamarlo con l attributo class. p.right {text-align: right; font-style: italic} p.center {text-align: center; font-weight:bold} Per richiamare i due tipi di paragrafo <p class="right"> Paragrafo a destra e corsivo </p> <p class="center"> Paragrafo centrato e grassetto </p> SEE

88 Definizioni Generali Il selettore può anche essere del tipo.nomeclasse il che vuol dire che tutti gli elementi HTML (specificando la classe) saranno formattati allo stesso modo.center {text-align: center} Significa tutti gli elementi con class= center saranno allineati al centro. <h1 class="center"> Titolo Centrato </h1> <p class="center"> Paragrafo centrato </p> See

89 CSS Comments Possono essere inseriti commenti nei fogli di stile mettendoli tra /* e */ Esempio /* questo è un commento */ p { text-align: center; /* Altro commento */ color: black; font-family: arial }

90 Scrivere CSS: Esterni Un foglio di stile esterno è ideale per siti che hanno più pagine su cui mantenere lo stesso stile. Con un foglio di stile esterno, è possibile cambiare il look di un sito, semplicemente cambiando un file. I fogli di stile vengono richiamati dentro le pagine HTML con il TAG <LINK> Il Tag <LINK> va messo nella sezione <HEAD> e ha questa forma <head> <link rel="stylesheet" type="text/css" href= miofile.css" /> </head> Il browser leggerà il foglio di stile e si preoccuperà di formattare la pagina come descritto nel file css. I file css possono essere scritti in quasiasi editor di testo (tipo Blocco Note) Il file CSS non deve contenere TAG HTML ma solo definizioni di stile. L estensione del file deve essere.css

91 Scrivere CSS: Interni I CSS interni vanno definiti se un documento HTML deve avere uno specifico stile. La struttura del CSS interno è racchiusa nell elemento <style> da inserire nel HEAD del documento. <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>

92 Scrivere CSS: Inline Gli stili possono essere specificati anche nell elemento stesso tramite l attributo style. Questo metodo va usato quando si vuole specificare uno stile da applicare ad un singolo elemento. Lo stile inline ha la stessa struttura di uno stile qualsiasi. Nell esempio sotto, vediamo come cambiare il colore e il margine sinistro di un paragrafo. <p style="color: sienna; margin-left: 20px"> Questo è un paragrafo </p>

Questo é il link all altra pagina

<a href= page2.html > Questo é il link all altra pagina </a> <a href= page2.html > <img src= lamiaimmagine.jpg/> </a> Tutorial 4 Links, Span e Div È ora di fare sul serio! Che ci crediate o no, se sei arrivato fino a questo punto, ora hai solo bisogno di una cosa in più per fare un sito reale! Al momento hai una pagina

Dettagli

Le Reti Informatiche

Le Reti Informatiche Le Reti Informatiche modulo 10 Prof. Salvatore Rosta www.byteman.it s.rosta@byteman.it 1 Nomenclatura: 1 La rappresentazione di uno schema richiede una serie di abbreviazioni per i vari componenti. Seguiremo

Dettagli

Appunti sugli Elaboratori di Testo. Introduzione. D. Gubiani. 19 Luglio 2005

Appunti sugli Elaboratori di Testo. Introduzione. D. Gubiani. 19 Luglio 2005 Appunti sugli Elaboratori di Testo D. Gubiani Università degli Studi G.D Annunzio di Chieti-Pescara 19 Luglio 2005 1 Cos è un elaboratore di testo? 2 3 Cos è un elaboratore di testo? Cos è un elaboratore

Dettagli

MANUALE D USO LEXUN ver. 5.0. proprietà logos engineering - Sistema Qualità certificato ISO 9001 DNV Italia INDICE. 6. Flash top 6 C.

MANUALE D USO LEXUN ver. 5.0. proprietà logos engineering - Sistema Qualità certificato ISO 9001 DNV Italia INDICE. 6. Flash top 6 C. Pag. 1/24 INDICE A. AMMINISTRAZIONE pagina ADMIN Pannello di controllo 2 1. Password 2 2. Cambio lingua 2 3. Menù principale 3 4. Creazione sottomenù 3 5. Impostazione template 4 15. Pagina creata con

Dettagli

Internet Internet è universalmente nota come la Rete delle reti: un insieme smisurato di computer collegati tra loro per scambiarsi dati e servizi.

Internet Internet è universalmente nota come la Rete delle reti: un insieme smisurato di computer collegati tra loro per scambiarsi dati e servizi. Internet Internet è universalmente nota come la Rete delle reti: un insieme smisurato di computer collegati tra loro per scambiarsi dati e servizi. Internet: la rete delle reti Alberto Ferrari Connessioni

Dettagli

WHITE PAPER TECNICO PER L ADVERTISER GUIDA AI MEZZI PUBBLICITARI

WHITE PAPER TECNICO PER L ADVERTISER GUIDA AI MEZZI PUBBLICITARI WHITE PAPER TECNICO PER L ADVERTISER GUIDA AI MEZZI PUBBLICITARI SOMMARIO 1. Mezzo pubblicitario... 3 1.1 Configurazione di mezzi pubblicitari... 3 1.1.1 Osservazioni generali... 3 1.1.2 Procedura... 4

Dettagli

Analisi dei requisiti e casi d uso

Analisi dei requisiti e casi d uso Analisi dei requisiti e casi d uso Indice 1 Introduzione 2 1.1 Terminologia........................... 2 2 Modello della Web Application 5 3 Struttura della web Application 6 4 Casi di utilizzo della Web

Dettagli

Lezione n 1! Introduzione"

Lezione n 1! Introduzione Lezione n 1! Introduzione" Corso sui linguaggi del web" Fondamentali del web" Fondamentali di una gestione FTP" Nomenclatura di base del linguaggio del web" Come funziona la rete internet?" Connessione"

Dettagli

Si prega di comunicare eventuali errori o inesattezze riscontrate, scrivendo una mail a: otebac@beniculturali.it

Si prega di comunicare eventuali errori o inesattezze riscontrate, scrivendo una mail a: otebac@beniculturali.it TEMPLATE IN MWCMS D A N I E L E U G O L E T T I - G R U P P O M E T A Si prega di comunicare eventuali errori o inesattezze riscontrate, scrivendo una mail a: otebac@beniculturali.it C ONTENTS I template

Dettagli

I.Stat Guida utente Versione 1.7 Dicembre 2010

I.Stat Guida utente Versione 1.7 Dicembre 2010 I.Stat Guida utente Versione 1.7 Dicembre 2010 1 Sommario INTRODUZIONE 3 I concetti principali di I.Stat 4 Organizzazione dei dati 4 Ricerca 5 GUIDA UTENTE 6 Per iniziare 6 Selezione della lingua 7 Individuazione

Dettagli

Sistemi Web-Based - Terminologia. Progetto di Sistemi Web-Based Prof. Luigi Laura, Univ. Tor Vergata, a.a. 2010/2011

Sistemi Web-Based - Terminologia. Progetto di Sistemi Web-Based Prof. Luigi Laura, Univ. Tor Vergata, a.a. 2010/2011 Sistemi Web-Based - Terminologia Progetto di Sistemi Web-Based Prof. Luigi Laura, Univ. Tor Vergata, a.a. 2010/2011 CLIENT: il client è il programma che richiede un servizio a un computer collegato in

Dettagli

WORD (livello avanzato): Struttura di un Documento Complesso. Struttura di un Documento Complesso

WORD (livello avanzato): Struttura di un Documento Complesso. Struttura di un Documento Complesso Parte 5 Adv WORD (livello avanzato): Struttura di un Documento Complesso 1 di 30 Struttura di un Documento Complesso La realizzazione di un libro, di un documento tecnico o scientifico complesso, presenta

Dettagli

UNIVERSITA DEGLI STUDI DI TORINO WORD

UNIVERSITA DEGLI STUDI DI TORINO WORD WORD SOMMARIO 1. Muoversi nel testo... 1 2. Taglia, copia e incolla... 2 3. Aprire, salvare e chiudere... 3 4. Trovare e sostituire... 4 5. Visualizzare in modi diversi... 6 6. Formattare e incolonnare...

Dettagli

Protocollo HTTP. Alessandro Sorato

Protocollo HTTP. Alessandro Sorato Un protocollo è un insieme di regole che permettono di trovare uno standard di comunicazione tra diversi computer attraverso la rete. Quando due o più computer comunicano tra di loro si scambiano una serie

Dettagli

Funzioni di base. Manualino OE6. Outlook Express 6

Funzioni di base. Manualino OE6. Outlook Express 6 Manualino OE6 Microsoft Outlook Express 6 Outlook Express 6 è un programma, incluso nel browser di Microsoft Internet Explorer, che ci permette di inviare e ricevere messaggi di posta elettronica. È gratuito,

Dettagli

RefWorks Guida all utente Versione 4.0

RefWorks Guida all utente Versione 4.0 Accesso a RefWorks per utenti registrati RefWorks Guida all utente Versione 4.0 Dalla pagina web www.refworks.com/refworks Inserire il proprio username (indirizzo e-mail) e password NB: Agli utenti remoti

Dettagli

Il World Wide Web: nozioni introduttive

Il World Wide Web: nozioni introduttive Il World Wide Web: nozioni introduttive Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html Cos è Internet! Acronimo di "interconnected networks" ("reti interconnesse")!

Dettagli

How to Develop Accessible Linux Applications

How to Develop Accessible Linux Applications How to Develop Accessible Linux Applications Sharon Snider Copyright 2002 IBM Corporation v1.1, 2002-05-03 Diario delle Revisioni Revisione v1.1 2002-05-03 Revisionato da: sds Convertito in DocBook XML

Dettagli

Lezione su Informatica di Base

Lezione su Informatica di Base Lezione su Informatica di Base Esplora Risorse, Gestione Cartelle, Alcuni tasti di scelta Rapida Domenico Capano D.C. Viterbo: Lunedì 21 Novembre 2005 Indice Una nota su questa lezione...4 Introduzione:

Dettagli

LA POSTA ELETTRONICA

LA POSTA ELETTRONICA LA POSTA ELETTRONICA Nella vita ordinaria ci sono due modi principali di gestire la propria corrispondenza o tramite un fermo posta, creandosi una propria casella postale presso l ufficio P:T., oppure

Dettagli

Data warehouse.stat Guida utente

Data warehouse.stat Guida utente Data warehouse.stat Guida utente Versione 3.0 Giugno 2013 1 Sommario INTRODUZIONE 3 I concetti principali 4 Organizzazione dei dati 4 Ricerca 5 Il browser 5 GUIDA UTENTE 6 Per iniziare 6 Selezione della

Dettagli

Introduzione ad Access

Introduzione ad Access Introduzione ad Access Luca Bortolussi Dipartimento di Matematica e Informatica Università degli studi di Trieste Access E un programma di gestione di database (DBMS) Access offre: un supporto transazionale

Dettagli

GUIDA ALL UTILIZZO DELL ECM 8

GUIDA ALL UTILIZZO DELL ECM 8 GUIDA ALL UTILIZZO DELL ECM 8 GUIDA ALL UTILIZZO DELL ECM 8 1) Introduzione Pg 3 2) L area amministratore Pg 3 2.1) ECM Pg 4 2.1.1) Sezione Struttura Pg 5 2.1.2) Sezione Documento Pg 7 2.1.3) Sezione Pubblicazione

Dettagli

P a s q u a l e t t i V e r o n i c a

P a s q u a l e t t i V e r o n i c a PHP: OOP Pasqualetti Veronica Oggetti Possiamo pensare ad un oggetto come ad un tipo di dato più complesso e personalizzato, non esistente fra i tipi tradizionali di PHP, ma creato da noi. 2 Gli oggetti

Dettagli

Talento LAB 4.1 - UTILIZZARE FTP (FILE TRANSFER PROTOCOL) L'UTILIZZO DI ALTRI SERVIZI INTERNET. In questa lezione imparerete a:

Talento LAB 4.1 - UTILIZZARE FTP (FILE TRANSFER PROTOCOL) L'UTILIZZO DI ALTRI SERVIZI INTERNET. In questa lezione imparerete a: Lab 4.1 Utilizzare FTP (File Tranfer Protocol) LAB 4.1 - UTILIZZARE FTP (FILE TRANSFER PROTOCOL) In questa lezione imparerete a: Utilizzare altri servizi Internet, Collegarsi al servizio Telnet, Accedere

Dettagli

LA FINESTRA DI OPEN OFFICE CALC

LA FINESTRA DI OPEN OFFICE CALC LA FINESTRA DI OPEN OFFICE CALC Barra di Formattazione Barra Standard Barra del Menu Intestazione di colonna Barra di Calcolo Contenuto della cella attiva Indirizzo della cella attiva Cella attiva Intestazione

Dettagli

Comandi filtro: sed. Se non si specificano azioni, sed stampa sullo standard output le linee in input, lasciandole inalterate.

Comandi filtro: sed. Se non si specificano azioni, sed stampa sullo standard output le linee in input, lasciandole inalterate. Comandi filtro: sed Il nome del comando sed sta per Stream EDitor e la sua funzione è quella di permettere di editare il testo passato da un comando ad un altro in una pipeline. Ciò è molto utile perché

Dettagli

Guida rapida all uso di ECM Titanium

Guida rapida all uso di ECM Titanium Guida rapida all uso di ECM Titanium Introduzione Questa guida contiene una spiegazione semplificata del funzionamento del software per Chiputilizzare al meglio il Tuning ECM Titanium ed include tutte

Dettagli

CONFIGURAZIONE DEI SERVIZI (seconda parte)

CONFIGURAZIONE DEI SERVIZI (seconda parte) Corso ForTIC C2 LEZIONE n. 10 CONFIGURAZIONE DEI SERVIZI (seconda parte) WEB SERVER PROXY FIREWALL Strumenti di controllo della rete I contenuti di questo documento, salvo diversa indicazione, sono rilasciati

Dettagli

Cross Software ltd Malta Pro.Sy.T Srl. Il gestionale come l'avete sempre sognato... Pag. 1

Cross Software ltd Malta Pro.Sy.T Srl. Il gestionale come l'avete sempre sognato... Pag. 1 Il gestionale come l'avete sempre sognato... Pag. 1 Le funzionalità di X-Cross La sofisticata tecnologia di CrossModel, oltre a permettere di lavorare in Internet come nel proprio ufficio e ad avere una

Dettagli

Codici sorgenti di esempio per l'invio di email da pagine WEB per gli spazi hosting ospitati presso ITESYS SRL.

Codici sorgenti di esempio per l'invio di email da pagine WEB per gli spazi hosting ospitati presso ITESYS SRL. Data: 8 Ottobre 2013 Release: 1.0-15 Feb 2013 - Release: 2.0 - Aggiunta procedura per inviare email da Windows con php Release: 2.1-20 Mar 2013 Release: 2.2-8 Ottobre 2013 - Aggiunta procedura per inviare

Dettagli

Un approccio moderno alle pagine web*

Un approccio moderno alle pagine web* Un approccio moderno alle pagine web* MASSIMILIANO FILACCHIONI Quest'articolo propone un approccio alla realizzazione delle pagine Web basato sull'esplicita separazione degli aspetti che le caratterizzano.

Dettagli

GUIDA ALL USO CORRETTO DI MICROSOFT OFFICE WORD 2007 PER LA REALIZZAZIONE E LA FORMATTAZIONE DI DOCUMENTI PROFESSIONALI

GUIDA ALL USO CORRETTO DI MICROSOFT OFFICE WORD 2007 PER LA REALIZZAZIONE E LA FORMATTAZIONE DI DOCUMENTI PROFESSIONALI GUIDA ALL USO CORRETTO DI MICROSOFT OFFICE WORD 2007 PER LA REALIZZAZIONE E LA FORMATTAZIONE DI DOCUMENTI PROFESSIONALI Francesca Plebani Settembre 2009 Sommario 1. INTRODUZIONE... 3 2. WORD E L ASPETTO

Dettagli

I Grafici. La creazione di un grafico

I Grafici. La creazione di un grafico I Grafici I grafici servono per illustrare meglio un concetto o per visualizzare una situazione di fatto e pertanto la scelta del tipo di grafico assume notevole importanza. Creare grafici con Excel è

Dettagli

GESTIRE LA BIBLIOGRAFIA

GESTIRE LA BIBLIOGRAFIA GESTIRE LA BIBLIOGRAFIA STRUMENTI DI GESTIONE BIBLIOGRAFICA I software di gestione bibliografica permettono di raccogliere, catalogare e organizzare diverse tipologie di materiali, prendere appunti, formattare

Dettagli

CORSO RETI INFORMATICHE

CORSO RETI INFORMATICHE CORSO RETI INFORMATICHE Che cos è una rete Una rete è un sistema di interconnessione non gerarchico tra diverse unità. Nel caso dei computer la rete indica l insieme delle strutture hadware, tra cui anche

Dettagli

NAVIGAORA HOTSPOT. Manuale utente per la configurazione

NAVIGAORA HOTSPOT. Manuale utente per la configurazione NAVIGAORA HOTSPOT Manuale utente per la configurazione NAVIGAORA Hotspot è l innovativo servizio che offre ai suoi clienti accesso ad Internet gratuito, in modo semplice e veloce, grazie al collegamento

Dettagli

PHP: form, cookies, sessioni e. Pasqualetti Veronica

PHP: form, cookies, sessioni e. Pasqualetti Veronica PHP: form, cookies, sessioni e mysql Pasqualetti Veronica Form HTML: sintassi dei form 2 Un form HTML è una finestra contenente vari elementi di controllo che consentono al visitatore di inserire informazioni.

Dettagli

Un client su arduino invia i dati acquisiti ad un database

Un client su arduino invia i dati acquisiti ad un database Un client su arduino invia i dati acquisiti ad un database PROBLEMA Si vogliono inviare, periodicamente, i dati acquisiti da alcuni sensori ad un database presente su di un server. Arduino con shield Ethernet

Dettagli

Gestore Comunicazioni Obbligatorie. Progetto SINTESI. Comunicazioni Obbligatorie. Modulo Applicativo COB. - Versione Giugno 2013 -

Gestore Comunicazioni Obbligatorie. Progetto SINTESI. Comunicazioni Obbligatorie. Modulo Applicativo COB. - Versione Giugno 2013 - Progetto SINTESI Comunicazioni Obbligatorie Modulo Applicativo COB - Versione Giugno 2013-1 Versione Giugno 2013 INDICE 1 Introduzione 3 1.1 Generalità 3 1.2 Descrizione e struttura del manuale 3 1.3 Requisiti

Dettagli

La gestione documentale con il programma Filenet ed il suo utilizzo tramite la tecnologia.net. di Emanuele Mattei (emanuele.mattei[at]email.

La gestione documentale con il programma Filenet ed il suo utilizzo tramite la tecnologia.net. di Emanuele Mattei (emanuele.mattei[at]email. La gestione documentale con il programma Filenet ed il suo utilizzo tramite la tecnologia.net di Emanuele Mattei (emanuele.mattei[at]email.it) Introduzione In questa serie di articoli, vedremo come utilizzare

Dettagli

BIBLIOWIN 5.0WEB Versione 5.0.2

BIBLIOWIN 5.0WEB Versione 5.0.2 BIBLIOWIN 5.0WEB Versione 5.0.2 Premessa. In questa nuova versione è stata modificata la risoluzione (dimensione) generale delle finestre. Per gli utenti che navigano nella modalità a Finestre, la dimensione

Dettagli

IMPOSTARE UNA MASCHERA CHE SI APRE AUTOMATICAMENTE

IMPOSTARE UNA MASCHERA CHE SI APRE AUTOMATICAMENTE IMPOSTARE UNA MASCHERA CHE SI APRE AUTOMATICAMENTE Access permette di specificare una maschera che deve essere visualizzata automaticamente all'apertura di un file. Vediamo come creare una maschera di

Dettagli

INSTALLAZIONE E UTILIZZO DEL COMPILATORE Code::Blocks 8.02

INSTALLAZIONE E UTILIZZO DEL COMPILATORE Code::Blocks 8.02 INSTALLAZIONE E UTILIZZO DEL COMPILATORE Code::Blocks 8.02 Download Si può scaricare gratuitamente la versione per il proprio sistema operativo (Windows, MacOS, Linux) dal sito: http://www.codeblocks.org

Dettagli

ESEMPI DI FORM (da www.html.it)

ESEMPI DI FORM (da www.html.it) ESEMPI DI FORM (da www.html.it) Vediamo, nel particolare, tutti i tag che HTML 4.0 prevede per la creazione di form. Questo tag apre e chiude il modulo e raccoglie il contenuto dello stesso,

Dettagli

Calc è il programma per la gestione di fogli di calcolo della suite OpenOffice.org.

Calc è il programma per la gestione di fogli di calcolo della suite OpenOffice.org. Calc è il programma per la gestione di fogli di calcolo della suite OpenOffice.org. Nuovo documento Anteprima di stampa Annulla Galleria Apri Controllo ortografico Ripristina Sorgente dati Salva Controllo

Dettagli

Lezione III: Oggetti ASP e interazione tramite form HTML

Lezione III: Oggetti ASP e interazione tramite form HTML Lezione III: Oggetti ASP e interazione tramite form HTML La terza lezione, come le precedenti, ha avuto una durata di due ore, di cui una in aula e l altra in laboratorio, si è tenuta alla presenza della

Dettagli

Informatica per la comunicazione" - lezione 9 -

Informatica per la comunicazione - lezione 9 - Informatica per la comunicazione" - lezione 9 - Protocolli di livello intermedio:" TCP/IP" IP: Internet Protocol" E il protocollo che viene seguito per trasmettere un pacchetto da un host a un altro, in

Dettagli

Manuale d uso Apache OpenMeetings (Manuale Utente + Manuale Amministratore)

Manuale d uso Apache OpenMeetings (Manuale Utente + Manuale Amministratore) Manuale d uso Apache OpenMeetings (Manuale Utente + Manuale Amministratore) Autore: Matteo Veroni Email: matver87@gmail.com Sito web: matteoveroni@altervista.org Fonti consultate: http://openmeetings.apache.org/

Dettagli

Documentazione tecnica

Documentazione tecnica Documentazione tecnica Come spedire via Post 1.1) Invio di Loghi operatore 1.2) Invio delle Suonerie (ringtone) 1.3) Invio di SMS con testo in formato UNICODE UCS-2 1.4) Invio di SMS multipli 1.5) Simulazione

Dettagli

Appunti di Antonio Bernardo

Appunti di Antonio Bernardo Internet Appunti di Antonio Bernardo Cos è Internet Internet può essere vista come una rete logica di enorme complessità, appoggiata a strutture fisiche e collegamenti di vario tipo (fibre ottiche, cavi

Dettagli

- Antivirus, Firewall e buone norme di comportamento

- Antivirus, Firewall e buone norme di comportamento Reti Di cosa parleremo? - Definizione di Rete e Concetti di Base - Tipologie di reti - Tecnologie Wireless - Internet e WWW - Connessioni casalinghe a Internet - Posta elettronica, FTP e Internet Browser

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

Non tutto, ma un po di tutto

Non tutto, ma un po di tutto ALFREDO MANGIA Non tutto, ma un po di tutto Nozioni fondamentali per conoscere e usare un foglio di calcolo. Corso di alfabetizzazione all informatica Settembre 2004 SCUOLA MEDIA GARIBALDI Genzano di Roma

Dettagli

Dipartimento del Tesoro

Dipartimento del Tesoro Dipartimento del Tesoro POWER POINT AVANZATO Indice 1 PROGETTAZIONE DELL ASPETTO...3 1.2 VISUALIZZARE GLI SCHEMI...4 1.3 CONTROLLARE L ASPETTO DELLE DIAPOSITIVE CON GLI SCHEMI...5 1.4 SALVARE UN MODELLO...6

Dettagli

sull argomento scelto ( evidenziare il testo passandoci sopra con il tasto sinistro del mouse e copiare premendo i tasti Ctrl + C )

sull argomento scelto ( evidenziare il testo passandoci sopra con il tasto sinistro del mouse e copiare premendo i tasti Ctrl + C ) This work is licensed under the Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/3.0/.

Dettagli

Analisi di massima: L utente dovrà inserire un numero limite, e tramite vari calcoli verrà stampato a video la sequenza.

Analisi di massima: L utente dovrà inserire un numero limite, e tramite vari calcoli verrà stampato a video la sequenza. Relazione tecnica Fibonacci ANDENA GIANMARCO Traccia: Creare un algoritmo che permetta, dato un valore intero e positivo, di stabilire la sequenza utilizzando la regola di fibonacci dei numeri fino al

Dettagli

CATTURARE LO SCHERMO INTERO O LA FINESTRA ATTIVA

CATTURARE LO SCHERMO INTERO O LA FINESTRA ATTIVA CATTURARE LO SCHERMO INTERO O LA FINESTRA ATTIVA Supponiamo di voler eseguire una istantanea del nostro desktop, quella che in gergo si chiama Screenshot (da screen, schermo, e shot, scatto fotografico).

Dettagli

Elementi di Informatica e Programmazione

Elementi di Informatica e Programmazione Elementi di Informatica e Programmazione Le Reti di Calcolatori (parte 2) Corsi di Laurea in: Ingegneria Civile Ingegneria per l Ambiente e il Territorio Università degli Studi di Brescia Docente: Daniela

Dettagli

Le variabili. Olga Scotti

Le variabili. Olga Scotti Le variabili Olga Scotti Cos è una variabile Le variabili, in un linguaggio di programmazione, sono dei contenitori. Possono essere riempiti con un valore che poi può essere riletto oppure sostituito.

Dettagli

Client di Posta Elettronica PECMailer

Client di Posta Elettronica PECMailer Client di Posta Elettronica PECMailer PECMailer è un semplice ma completo client di posta elettronica, ovvero un programma che consente di gestire la composizione, la trasmissione, la ricezione e l'organizzazione

Dettagli

Guida ai Servizi Internet per il Referente Aziendale

Guida ai Servizi Internet per il Referente Aziendale Guida ai Servizi Internet per il Referente Aziendale Indice Indice Introduzione...3 Guida al primo accesso...3 Accessi successivi...5 Amministrazione dei servizi avanzati (VAS)...6 Attivazione dei VAS...7

Dettagli

Fatti trovare... Fatti preferire! Web Site» E-Commerce» Social Media» Web Marketing» Photo» Video» Graphic design

Fatti trovare... Fatti preferire! Web Site» E-Commerce» Social Media» Web Marketing» Photo» Video» Graphic design Fatti trovare... Fatti preferire! Web Site» E-Commerce» Social Media» Web Marketing» Photo» Video» Graphic design Come si trovano oggi i clienti? Così! ristorante pizzeria sul mare bel Perchè è importante

Dettagli

Se il corso non si avvia

Se il corso non si avvia Se il corso non si avvia Ci sono quattro possibili motivi per cui questo corso potrebbe non avviarsi correttamente. 1. I popup Il corso parte all'interno di una finestra di popup attivata da questa finestra

Dettagli

testo influenzato dal tag

<nome tag>testo influenzato dal tag</nome tag> HTML (Hyper Text Mark-up Language) nasce come linguaggio per la descrizione di testi strutturati. HTML non è come un linguaggio di programmazione ma un semplice sistema di contrassegno, i cui TAG vengono

Dettagli

Manipolazione di testi: espressioni regolari

Manipolazione di testi: espressioni regolari Manipolazione di testi: espressioni regolari Un meccanismo per specificare un pattern, che, di fatto, è la rappresentazione sintetica di un insieme (eventualmente infinito) di stringhe: il pattern viene

Dettagli

Traduzione di TeamLab in altre lingue

Traduzione di TeamLab in altre lingue Lingue disponibili TeamLab è disponibile nelle seguenti lingue nel mese di gennaio 2012: Traduzioni complete Lingue tradotte parzialmente Inglese Tedesco Francese Spagnolo Russo Lettone Italiano Cinese

Dettagli

RedDot Content Management Server Content Management Server Non sottovalutate il potenziale della comunicazione online: usatela! RedDot CMS vi permette di... Implementare, gestire ed estendere progetti

Dettagli

Guida alla scansione su FTP

Guida alla scansione su FTP Guida alla scansione su FTP Per ottenere informazioni di base sulla rete e sulle funzionalità di rete avanzate della macchina Brother, consultare la uu Guida dell'utente in rete. Per ottenere informazioni

Dettagli

Luca Mari, Sistemi informativi applicati (reti di calcolatori) appunti delle lezioni. Architetture client/server: applicazioni client

Luca Mari, Sistemi informativi applicati (reti di calcolatori) appunti delle lezioni. Architetture client/server: applicazioni client Versione 25.4.05 Sistemi informativi applicati (reti di calcolatori): appunti delle lezioni Architetture client/server: applicazioni client 1 Architetture client/server: un esempio World wide web è un

Dettagli

Ora possiamo specificare la dimensione della casella di immissione dati.

Ora possiamo specificare la dimensione della casella di immissione dati. 1 di 6 17/04/2012 6.37 D'ora in poi, per maggiore chiarezza, scriverò solo quello che sta fra i due tag . Tralascerò i tag head, body, title e form. Ovviamente nei tuoi documenti è necessario che

Dettagli

FileMaker Server 12. Guida introduttiva

FileMaker Server 12. Guida introduttiva FileMaker Server 12 Guida introduttiva 2007 2012 FileMaker, Inc. Tutti i diritti riservati. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, California 95054 FileMaker e Bento sono marchi di FileMaker,

Dettagli

Introduzione a MySQL

Introduzione a MySQL Introduzione a MySQL Cinzia Cappiello Alessandro Raffio Politecnico di Milano Prima di iniziare qualche dettaglio su MySQL MySQL è un sistema di gestione di basi di dati relazionali (RDBMS) composto da

Dettagli

Le formule possono essere scritte utilizzando un insieme di funzioni predefinite che Excel mette a disposizione, raggruppate per argomento.

Le formule possono essere scritte utilizzando un insieme di funzioni predefinite che Excel mette a disposizione, raggruppate per argomento. Excel: le funzioni Le formule possono essere scritte utilizzando un insieme di funzioni predefinite che Excel mette a disposizione, raggruppate per argomento. DEFINIZIONE: Le funzioni sono dei procedimenti

Dettagli

MINI GUIDA SINTETICA per l uso della lavagna interattiva multimediale

MINI GUIDA SINTETICA per l uso della lavagna interattiva multimediale MINI GUIDA SINTETICA per l uso della lavagna interattiva multimediale InterWrite SchoolBoard è un software per lavagna elettronica di facile utilizzo. Può essere adoperata anche da studenti diversamente

Dettagli

Firma Digitale Remota. Manuale di Attivazione, Installazione,Utilizzo

Firma Digitale Remota. Manuale di Attivazione, Installazione,Utilizzo Firma Digitale Remota Manuale di Attivazione, Installazione,Utilizzo Versione: 0.3 Aggiornata al: 02.07.2012 Sommario 1. Attivazione Firma Remota... 3 1.1 Attivazione Firma Remota con Token YUBICO... 5

Dettagli

Corso di Alfabetizzazione Informatica

Corso di Alfabetizzazione Informatica Corso di Alfabetizzazione Informatica Scopo di questo corso, vuole essere quello di fornire ad ognuno dei partecipanti, indipendentemente dalle loro precedenti conoscenze informatiche, l apprendimento

Dettagli

DynDevice ECM. La Suite di applicazioni web per velocizzare, standardizzare e ottimizzare il flusso delle informazioni aziendali

DynDevice ECM. La Suite di applicazioni web per velocizzare, standardizzare e ottimizzare il flusso delle informazioni aziendali DynDevice ECM La Suite di applicazioni web per velocizzare, standardizzare e ottimizzare il flusso delle informazioni aziendali Presentazione DynDevice ECM Cos è DynDevice ICMS Le soluzioni di DynDevice

Dettagli

WEB Conference, mini howto

WEB Conference, mini howto Prerequisiti: WEB Conference, mini howto Per potersi collegare o creare una web conference è necessario: 1) Avere un pc con sistema operativo Windows XP o vista (windows 7 non e' ancora certificato ma

Dettagli

Introduzione agli algoritmi e alla programmazione in VisualBasic.Net

Introduzione agli algoritmi e alla programmazione in VisualBasic.Net Lezione 1 Introduzione agli algoritmi e alla programmazione in VisualBasic.Net Definizione di utente e di programmatore L utente è qualsiasi persona che usa il computer anche se non è in grado di programmarlo

Dettagli

GeoGebra 4.2 Introduzione all utilizzo della Vista CAS per il secondo biennio e il quinto anno

GeoGebra 4.2 Introduzione all utilizzo della Vista CAS per il secondo biennio e il quinto anno GeoGebra 4.2 Introduzione all utilizzo della Vista CAS per il secondo biennio e il quinto anno La Vista CAS L ambiente di lavoro Le celle Assegnazione di una variabile o di una funzione / visualizzazione

Dettagli

CREAZIONE E INVIO OFFERTA DI APPALTO DA FORNITORE

CREAZIONE E INVIO OFFERTA DI APPALTO DA FORNITORE CREAZIONE E INVIO OFFERTA DI APPALTO DA FORNITORE 1 SOMMARIO 1 OBIETTIVI DEL DOCUMENTO...3 2 OFFERTA DEL FORNITORE...4 2.1 LOG ON...4 2.2 PAGINA INIZIALE...4 2.3 CREAZIONE OFFERTA...6 2.4 ACCESSO AL DOCUMENTALE...8

Dettagli

Parallels Plesk Panel

Parallels Plesk Panel Parallels Plesk Panel Notifica sul Copyright ISBN: N/A Parallels 660 SW 39 th Street Suite 205 Renton, Washington 98057 USA Telefono: +1 (425) 282 6400 Fax: +1 (425) 282 6444 Copyright 1999-2009, Parallels,

Dettagli

Manuale Software. www.smsend.it

Manuale Software. www.smsend.it Manuale Software www.smsend.it 1 INTRODUZIONE 3 Multilanguage 4 PANNELLO DI CONTROLLO 5 Start page 6 Profilo 7 Ordini 8 Acquista Ricarica 9 Coupon AdWords 10 Pec e Domini 11 MESSAGGI 12 Invio singolo sms

Dettagli

InitZero s.r.l. Via P. Calamandrei, 24-52100 Arezzo email: info@initzero.it

InitZero s.r.l. Via P. Calamandrei, 24-52100 Arezzo email: info@initzero.it izticket Il programma izticket permette la gestione delle chiamate di intervento tecnico. E un applicazione web, basata su un potente application server java, testata con i più diffusi browser (quali Firefox,

Dettagli

APPLICAZIONE WEB PER LA GESTIONE DELLE RICHIESTE DI ACQUISTO DEL MATERIALE INFORMATICO. Francesco Marchione e Dario Richichi

APPLICAZIONE WEB PER LA GESTIONE DELLE RICHIESTE DI ACQUISTO DEL MATERIALE INFORMATICO. Francesco Marchione e Dario Richichi APPLICAZIONE WEB PER LA GESTIONE DELLE RICHIESTE DI ACQUISTO DEL MATERIALE INFORMATICO Francesco Marchione e Dario Richichi Istituto Nazionale di Geofisica e Vulcanologia Sezione di Palermo Indice Introduzione...

Dettagli

Per realizzare un programma in VB

Per realizzare un programma in VB Per realizzare un programma in VB E necessario eseguire nell ordine i seguenti passi: 1) Dato un problema, disegnare la tabella delle variabili 2) Determinare l algoritmo risolutivo con la pseudocodifica

Dettagli

Outlook Express 6 Microsoft Internet Explorer, Avvio del programma Creare un nuovo account

Outlook Express 6 Microsoft Internet Explorer, Avvio del programma Creare un nuovo account Outlook Express 6 è un programma, incluso nel browser di Microsoft Internet Explorer, che ci permette di inviare e ricevere messaggi di posta elettronica. È gratuito, semplice da utilizzare e fornisce

Dettagli

Presentazioni efficaci: come si usa prezi?

Presentazioni efficaci: come si usa prezi? Presentazioni efficaci: come si usa prezi? a cura di Lorenzo Amadei (amadei@iol.it) versione 5 febbraio 2013 Cos è prezi Prezi (http://prezi.com/) è un applicazione online per creare presentazioni. In

Dettagli

LISTA TITOLI ACCESSI

LISTA TITOLI ACCESSI LISTA TITOLI ACCESSI La Lista Unica Titoli di Accesso, così come definita dal Provvedimento al punto 1.1.2, è memorizzata, come raggruppamento degli eventi del giorno, secondo tracciati ASCII a campi fissi

Dettagli

Cos è Excel. Uno spreadsheet : un foglio elettronico. è una lavagna di lavoro, suddivisa in celle, cosciente del contenuto delle celle stesse

Cos è Excel. Uno spreadsheet : un foglio elettronico. è una lavagna di lavoro, suddivisa in celle, cosciente del contenuto delle celle stesse Cos è Excel Uno spreadsheet : un foglio elettronico è una lavagna di lavoro, suddivisa in celle, cosciente del contenuto delle celle stesse I dati contenuti nelle celle possono essere elaborati ponendo

Dettagli

UML: Class Diagram. Ing. Orazio Tomarchio Orazio.Tomarchio@diit.unict.it

UML: Class Diagram. Ing. Orazio Tomarchio Orazio.Tomarchio@diit.unict.it UML: Class Diagram Ing. Orazio Tomarchio Orazio.Tomarchio@diit.unict.it Dipartimento di Ingegneria Informatica e delle Telecomunicazioni Università di Catania Class Diagram Forniscono una vista strutturale

Dettagli

if t>=0 x=1; else x=0; end fornisce, nella variabile x, il valore della funzione gradino a tempi continui, calcolata in t.

if t>=0 x=1; else x=0; end fornisce, nella variabile x, il valore della funzione gradino a tempi continui, calcolata in t. Il programma MATLAB In queste pagine si introduce in maniera molto breve il programma di simulazione MAT- LAB (una abbreviazione di MATrix LABoratory). Introduzione MATLAB è un programma interattivo di

Dettagli

Cos'é Code::Blocks? Come Creare un progetto Come eseguire un programma Risoluzione problemi istallazione Code::Blocks Che cos è il Debug e come si usa

Cos'é Code::Blocks? Come Creare un progetto Come eseguire un programma Risoluzione problemi istallazione Code::Blocks Che cos è il Debug e come si usa di Ilaria Lorenzo e Alessandra Palma Cos'é Code::Blocks? Come Creare un progetto Come eseguire un programma Risoluzione problemi istallazione Code::Blocks Che cos è il Debug e come si usa Code::Blocks

Dettagli

ELEMENTI DI GRAFICA IN AMBIENTE DEV-PASCAL v. 9.2

ELEMENTI DI GRAFICA IN AMBIENTE DEV-PASCAL v. 9.2 ELEMENTI DI GRAFICA IN AMBIENTE DEV-PASCAL v. 9.2 MODULI GRAPH, DOS E CRT Una volta entrati in ambiente DEV-Pascal possiamo cominciare ad editare un programma nel modo che conosciamo. Se dobbiamo far uso

Dettagli

INTERPUMP GROUP SPA-VIA E. FERMI 25 42040 S.ILARIO (RE) http: //www.interpumpgroup.it

INTERPUMP GROUP SPA-VIA E. FERMI 25 42040 S.ILARIO (RE) http: //www.interpumpgroup.it PROCEDURA E-COMMERCE BUSINESS TO BUSINESS Guida alla Compilazione di un ordine INTERPUMP GROUP SPA-VIA E. FERMI 25 42040 S.ILARIO (RE) http: //www.interpumpgroup.it INDICE 1. Autenticazione del nome utente

Dettagli

La Valutazione Euristica

La Valutazione Euristica 1/38 E un metodo ispettivo di tipo discount effettuato da esperti di usabilità. Consiste nel valutare se una serie di principi di buona progettazione sono stati applicati correttamente. Si basa sull uso

Dettagli

Modulo. Programmiamo in Pascal. Unità didattiche COSA IMPAREREMO...

Modulo. Programmiamo in Pascal. Unità didattiche COSA IMPAREREMO... Modulo A Programmiamo in Pascal Unità didattiche 1. Installiamo il Dev-Pascal 2. Il programma e le variabili 3. Input dei dati 4. Utilizziamo gli operatori matematici e commentiamo il codice COSA IMPAREREMO...

Dettagli