Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat"

Transcript

1 Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

2 File HTML e tag Un file HTML non è nient'altro che un puro file di testo al cui interno sono presenti delle istruzioni speciali (chiamate tag) che informano il browser su come il contenuto dovrebbe essere visualizzato. Da questo punto di vista un file HTML è molto diverso da un file binario, come potrebbe essere ad esempio un documento Word. Se ad esempio apriamo un file Word con un editor di testo come Notepad, il risultato visualizzato è un insieme di caratteri senza senso. Illustrazione 1: Un file Word aperto con Notepad

3 Se invece apriamo un file HTML con un editor di testo come Notepad, il risultato è leggibile anche ad un essere umano. Illustrazione 2: Un file HTML aperto con Notepad Per poter vedere il codice HTML di una pagina web, normalmente è sufficiente aprire la pagina con un browser, cliccare con il tasto destro sulla pagina e selezionare sul menu contestuale l'opzione appropriata per visualizzare il codice sorgente (ad esempio, "Visualizza codice sorgente" in Chrome). Provate a farlo con la homepage del sito dell'università, Ciò che si nota subito (anche grazie all'utilizzo del colore che viene fatto automaticamente dal browser) è la presenza dei cosiddetti

4 tag html, gli elementi costituiti da parole chiave racchiuse tra parentesi angolari. Senza tag, un browser non è in grado di capire come interpretare una pagina html. Proviamo ad esempio a creare un file di testo in cui inseriamo un titolo e un paragrafo di testo. Nell'editor di testo riusciamo a separare chiaramente i due elementi, strutturando quindi il nostro contenuto, ma se salviamo il file come html e lo visualizziamo in un browser, il risultato che otteniamo è un unico blocco di testo, abbiamo perso la struttura. Illustrazione 3: Esempio di file di testo Illustrazione 4: Lo stesso file aperto in un browser web Proviamo adesso ad aggiungere dei tag html per ottenere la

5 stessa struttura del file di testo originale. Il codice è il seguente (non preoccupatevi per il momento del significato dei tag): <p>titolo</p> <p>paragrafo di testo</p> Salvate il file con estensione html e visualizzatelo con il browser. Il risultato che dovreste ottenere è che avete mantenuto la struttura del file originale. Notate che i tag non vengono visualizzati. Illustrazione 5: Pagina web con la struttura del file di testo originale NOTA: Sebbene la pagina web venga visualizzata correttamente, tenete presente che questo frammento di codice html non è ben strutturato, mancando di alcuni elementi fondamentali che vedremo in seguito. Ritornando al frammento di codice visto sopra, notiamo la presenza dei tag <p> e </p> che racchiudono le due righe di

6 contenuto che vogliamo mostrare. Il primo è un tag di apertura ed attiva una certa funzionalità, il secondo tag di chiusura, identificato dalla barra inclinata, e disattiva l'effetto del tag di apertura. Strettamente parlando l'insieme di tag di apertura, tag di chiusura e ciò che sta nel mezzo viene identificato con il termine "elemento". In pratica ogni elemento è una specie di contenitore. I caratteri interni alle parentesi angolari determinano lo scopo del tag ed indicano al browser cosa fare a ciò che c'è nel contenitore. In questo caso, il carattere p indica che ciò che sta in mezzo ai due tag di apertura e chiusura è un paragrafo di testo e deve essere mostrato come tale. Che cosa succede se togliamo i tag di chiusura dal codice del nostro esempio? In questo caso nulla, il browser è sufficientemente intelligente da capire quando termina l'effetto di un certo tag (in questo caso, quando incontra il tag di apertura successivo). In generale però è sempre bene ricordarsi di inserire esplicitamente i tag di chiusura e non fare affidamento esclusivamente sul browser, altrimenti potrebbero generarsi situazioni in cui il contenuto viene visualizzato scorrettamente. Adesso che abbiamo appena menzionato la regola dei tag di apertura e chiusura, introduciamo una classe di elementi che non ne fa uso, i cosiddetti elementi vuoti ("empty elements"). Tali elementi consistono in un tag unico che ha tipicamente come scopo inserire qualcosa in una pagina piuttosto che dare indicazioni su come gestire un particolare contenuto. Un esempio è l'elemento <br> che aggiunge

7 un'interruzione di riga in una pagina. In XHTML era obbligatorio inserire tale elemento con una barra inclinata prima della parentesi angolare chiusa, cioè <br />. In HTML5, tale obbligo è scomparso. Il frammento seguente utilizza l'elemento <br> <p>titolo</p> <p>testo normale con <br>interruzione di riga.</p> E' possibile innestare un elemento html all'interno di un altro elemento, come nel seguente frammento di codice <p>titolo</p> <p>testo normale. <b>testo evidenziato.</b> Testo normale.</p> Il tag <b> indica al browser di mettere in evidenza il testo fino al corrispondente tag di chiusura. Normalmente i browser interpretano tale tag mettendo il testo in grassetto (e fino ad HTML5 questo tag voleva in effetti dire bold). Laddove ci siano tag innestati come in questo caso, è buona norma chiudere i tag nell'ordine inverso rispetto a quello con cui sono stati aperti, evitando ad esempio combinazioni come <p><b></p></b>. Sebbene normalmente i browser siano in grado di interpretare correttamente la vostra intenzione, potrebbero generarsi problemi se non seguite questa regola. E' anche possibile innestare un elemento direttamente all'interno di un altro elemento come nel seguente esempio:

8 <p>titolo</p> <p>testo normale. <i><b>testo in grassetto e corsivo.</b></i> Testo normale.</p> Nell'esempio abbiamo racchiuso l'elemento <b> all'interno dell'elemento <i> che visualizza il contenuto in corsivo (In HTML5, questo elemento indica che il testo è in una voce diversa rispetto al resto, ad esempio un termine tecnico o latino). Il risultato è che il testo è sia grassetto che corsivo. Un aspetto importante degli elementi è che essi possono essere di tipo blocco, come <p>, o di tipo inline, come <b>. I browser interpretano gli elementi di tipo blocco come se fossero dei box rettangolari posizionati uno sopra l'altro sulla pagina. Ogni elemento inizia su una nuova riga ed il browser normalmente aggiunge dello spazio prima e dopo l'elemento. Gli elementi inline vengono invece inseriti all'interno del flusso del testo, non iniziano su una nuova riga e non hanno spazio aggiuntivo intorno ad essi. La distinzione tra i due tipi di elementi è importante perchè porta a delle differenze di comportamento, ad esempio nell'applicazione del CSS. Dovrebbe anche non essere possibile inserire un elemento blocco all'interno di un elemento inline ma a quanto pare i browser riescono comunque ad interpretare il codice. Un altro aspetto importante dei tag è che essi possono contenere degli attributi che forniscono informazioni addizionali relative al contenuto di un elemento. Gli attributi vengono inseriti all'interno del tag di apertura di un elemento e sono costituiti da due parti, un nome ed un

9 valore, separate da un segno di uguale. Un esempio è il seguente: <p>titolo</p> <p lang="it">testo in Italiano.</p> Il nome dell'attributo indica il tipo di informazione extra che stiamo fornendo ed è preferibile sia scritto in minuscolo. Il valore dell'attributo è l'informazione o parametro associato all'attributo ed è preferibile sia inserito tra doppie virgolette. In questo esempio, l'attributo specifica il linguaggio utilizzato nell'elemento. E' possibile inserire più di un attibuto per elemento, separati da uno spazio. Alcuni elementi richiedono obbligatoriamente l'inserimento di attributi. La maggior parte degli attributi possono essere utilizzati solo per alcuni elementi specifici e possono assumere solo un certo insieme di valori (o un certo formato). NOTA: e se volessi visualizzare una parentesi angolare (simbolo di maggiore o minore) nel testo? In tal caso, è necessario utilizzare dei simboli speciali, in particolare < per il minore e > per il maggiore. Che cosa viene ignorato dai browser I browser ignorano alcune delle informazioni che inserite all'interno delle pagine html. In particolare, vengono ignorate le interruzioni di riga create andando a capo, le

10 tabulazioni e gli spazi bianchi multipli (viene considerato sempre un solo spazio bianco), markup non riconosciuto (il risultato può essere variabile), commenti. In html i commenti vengono inseriti utilizzando i tag speciali <!-- e -->. Un commento può anche coprire più righe di codice. Normalmente, un commento viene utilizzato per documentare un pezzo di codice. Struttura di un documento HTML Tutti gli esempi che abbiamo visto finora erano solo frammenti di codice html. Anche se il browser riusciva a visualizzarli correttamente, non contengono gli elementi che tradizionalmente costituiscono un documento html di base. Il primo elemento che un browser si aspetta di trovare in un documento html è il cosiddetto doctype (document type definition) ossia un codice che identifica il tipo di markup (in pratica, le versione di HTML) che è stato utilizzato per scrivere il documento. In presenza di doctype, il browser entra in modo standard e cerca di visualizzare la pagina nel modo più coerente e standardizzato possibile, mentre se il doctype non è definito può succedere qualunque cosa. Alcuni browser ad esempio entrano in una modalità compatibilità che cerca di comportarsi come i browser di anni fa, in modo da supportare vecchio codice che sfruttava funzionalità ora non più presenti o modificate.

11 La maggior parte degli sviluppatori usa oggi il doctype HTML5 che è definito nel modo seguente: <!DOCTYPE html> In confronto, il seguente è il doctype per XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Tenete presente che potete specificare il doctype HTML5 anche se non usate alcuna delle nuove funzionalità del linguaggio. Per un browser, l'importante è che ci sia un doctype non quale sia. Successivamente al doctype, un documento html tipicamente contiene tre elementi di tipo contenitore: <html>, <head> e <body>. L'elemento <html> viene utilizzato per specificare che tutto ciò che c'è al suo interno è codice html e tipicamente racchiude tutto il codice, tranne il doctype. L'elemento <head> viene utilizzato per specificare alcune informazioni opzionali relative alla pagina web, come titolo, parole chiave, fogli di stile, etc. L'elemento <body> racchiude tutto il contenuto che deve essere mostrato sulla finestra del browser. C'è un solo modo per combinare questi elementi in una pagina web:

12 <!DOCTYPE html> <html> <head>... </head> <body>... </body> </html> All'interno dell'elemento <head> viene tipicamente inserito un elemento <title> che serve a specificare il titolo della pagina. I browser visualizzano il titolo sulla barra del titolo oppure sulle tab. Il titolo è ciò che viene utilizzato quando viene salvato un bookmark di una pagina. Inoltre, il titolo è ciò che viene mostrato, assieme ad un pezzo di contenuto, quando la pagina web viene inserita all'interno dei risultati di un motore di ricerca. <!DOCTYPE html> <html> <head> <title> Titolo della pagina </title> </head> <body> Contenuto della pagina </body> </html> Tenete presente che gli elementi sopra descritti sono opzionali per HTML5 anche se è fortemente consigliato inserirli in ciascuna pagina. Se prendiamo uno dei frammenti di codice precedenti e lo ispezioniamo con il

13 browser (ogni browser ha un meccanismo per ispezionare la struttura effettiva della pagina web), notiamo come siano comunque presenti questi elementi.

UTILIZZO DEL TEMPLATE Parte 1 - struttura

UTILIZZO DEL TEMPLATE Parte 1 - struttura UTILIZZO DEL TEMPLATE Parte 1 - struttura PROGRAMMI UTILIZZATI: gestione del codice HTML - HTML-Kit è un Editor Web non di tipo visuale, che consente la costruzione ex-novo di pagine web o la loro modifica,

Dettagli

Registrazione. Scelta del nome

Registrazione. Scelta del nome Introduzione Altervista (www.altervista.org) mette a disposizione le più moderne tecnologie web 2.0 per creare un proprio sito web. In questo tutorial vogliamo guidarvi nella registrazione al sito e nella

Dettagli

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali?

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Riprendiamo il discorso, introducendo la tag Body e iniziando

Dettagli

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013 Corso di HTML Modulo L3 1-Concetti generali 1 Prerequisiti Browser Rete Internet Client e server 2 1 Introduzione In questa Unità introduciamo alcuni semplici elementi del linguaggio HTML, con il quale

Dettagli

COME ELIMINARE PARTI DEL TEMPLATE IN PAGINE SINGOLE

COME ELIMINARE PARTI DEL TEMPLATE IN PAGINE SINGOLE COME ELIMINARE PARTI DEL TEMPLATE IN PAGINE SINGOLE Con questa guida impareremo come eliminare delle singole zone del template che utilizziamo all'interno di una pagina specifica. Questo metodo torna utile

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

HTML HyperText Markup Language:

HTML HyperText Markup Language: HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto

Dettagli

Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. **********

Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. ********** Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. ********** Prime nozioni: Tag e prima pagina, continuazione. Nota bene, al fine di avere anche

Dettagli

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE.

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE. Cos'è l'html HTML è una sigla che viene da una frase inglese che vuol dire: " Linguaggio di contrassegno di ipertesti" (Hyper Text Markup Language) L'Html non è un vero e proprio linguaggio di programmazione,

Dettagli

GB informazioni e freeware

GB informazioni e freeware GB informazioni e freeware Informazioni per PC, internet, software, freeware e tutorial Home Programmi Informazioni Passatempo Siti utili Aggiornamenti sito News Posizione nel sito : Home >> Informazioni

Dettagli

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità Maria Grazia Ottaviani informatica, comunicazione e multimedialità Unità digitale 1 Ambiente HTML Introduzione Oltre ai linguaggi di programmazione esistono anche linguaggi detti markup. Sono linguaggi

Dettagli

Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat www.dimi.uniud.it/burigat Aggiungere immagini E' possibile inserire immagini all'interno delle pagine web in due modi: come contenuto

Dettagli

Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte.

Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte. Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte. Continuiamo la parte che completerà la trattazione dei link, andando ad operare direttamente

Dettagli

Il linguaggio HTML - Parte 2

Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza

Dettagli

Lezione nr. 5. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente!

Lezione nr. 5. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente! Lezione nr. 5 >> Come creare un modulo Web I moduli web sono delle strutture fondamentali per ogni sito web e la loro conoscenza ti permetterà di risolvere almeno il 60% delle problematiche di gestione

Dettagli

Educazione didattica per la E-Navigation

Educazione didattica per la E-Navigation Educazione didattica per la E-Navigation Guida utente per l utilizzo della piattaforma WIKI Rev. 3.0 23 febbraio 2012 Guida EDEN rev. 3.0 P. 1 di 24 23/02/2012 Indice Come registrarsi... 3 Utilizzo della

Dettagli

Il linguaggio HTML - Nozioni di base (2)

Il linguaggio HTML - Nozioni di base (2) Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@dti.unimi.it TAG strutturali visti fino ad ora -

Dettagli

Scrivere una applicazione html, css e javascript per Android

Scrivere una applicazione html, css e javascript per Android Scrivere una applicazione html, css e javascript per Android Prima di tuffarsi dentro, vorrei stabilire rapidamente il campo di gioco. In questo capitolo, definisco termini chiave, confrontare i pro e

Dettagli

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas Fogli di stile CSS Il foglio CSS (Cascading Style Sheet, foglio di stile a cascata) è un documento in formato testuale che definisce il controllo sulla visualizzazione della pagina HTML e sul suo layout,

Dettagli

WEB MARKETING CODE by scamurra.it

WEB MARKETING CODE by scamurra.it WEB MARKETING CODE by scamurra.it www.scamurra.it info@scamurra.it Livello: principiante CAPITOLO 1 INTRODUZIONE CAPITOLO 2 L IMPORTANZA DEI CONTENUTI CAPITOLO 3 UN PO DI CAPITOLO 4 PULIZIA DEL

Dettagli

Siti web e Dreamweaver. La schermata iniziale

Siti web e Dreamweaver. La schermata iniziale Siti web e Dreamweaver Dreamweaver è la soluzione ideale per progettare, sviluppare e gestire siti web professionali e applicazioni efficaci e conformi agli standard e offre tutti gli strumenti di progettazione

Dettagli

Parte I - Struttura. Adotta un template. Parte 1 struttura pag. - 1

Parte I - Struttura. Adotta un template. Parte 1 struttura pag. - 1 Tutorial per siti scolastici accessibili con editor web open source Parte I - Struttura Adotta un template Parte 1 struttura pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte

Dettagli

Introduzione allo sviluppo Web. Studium Generale, a.a. 2013-2014, II semestre

Introduzione allo sviluppo Web. Studium Generale, a.a. 2013-2014, II semestre Introduzione allo sviluppo Web Studium Generale, a.a. 2013-2014, II semestre 1 Contatto Daniel Graziotin graziotin@inf.unibz.it http://task3.cc/teaching/introduzion e-allo-sviluppo-web 2 Ciao mondo File

Dettagli

extensible Markup Language

extensible Markup Language XML a.s. 2010-2011 extensible Markup Language XML è un meta-linguaggio per definire la struttura di documenti e dati non è un linguaggio di programmazione un documento XML è un file di testo che contiene

Dettagli

1) il menu: qui trovi tutte le funzioni di comando del sito. 2) i dati sulla campagna corrente: qui puoi cambiare il nome e la descrizione e puoi

1) il menu: qui trovi tutte le funzioni di comando del sito. 2) i dati sulla campagna corrente: qui puoi cambiare il nome e la descrizione e puoi Come si fa? Struttura del messaggio Cominciamo con l illustrare la struttura dello spazio in cui costruire il messaggio. Come vedi in figura la pubblicità è composta da 6 elementi: 1 5 PERSONALE (ES. LOGO)

Dettagli

HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) E un linguaggio di scrittura di pagine per Internet (pagine web) nato nel 1992. E un linguaggio di marcatura ipertestuale Non è un linguaggio di programmazione, in quanto

Dettagli

HTML 1. HyperText Markup Language

HTML 1. HyperText Markup Language HTML 1 HyperText Markup Language Introduzione ad HTML Documenti HTML Tag di markup Formattazione del testo Collegamenti ipertestuali Immagini Tabelle Form in linea (moduli) Tecnologie di Sviluppo per il

Dettagli

MANUALE IMMEDIATO DI HTML

MANUALE IMMEDIATO DI HTML MANUALE IMMEDIATO DI HTML Realizzato da NiktorTheNat Iniziato il giorno 9 aprile 2010 - terminato il giorno 22 aprile 2010 email autore: niktorthenat@tiscali.it canale youtube: http://www.youtube.com/user/niktorthenat

Dettagli

Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Quinta lezione) Unitre Pavia a.a.

Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Quinta lezione) Unitre Pavia a.a. Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Quinta lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 Adobe Dreamweaver http://www.adobe.com/it/products/dreamweaver/features/?view=topnew

Dettagli

Moduli (schede compilabili) in Word Esempio: scheda di alimentazione per un degente

Moduli (schede compilabili) in Word Esempio: scheda di alimentazione per un degente Moduli (schede compilabili) in Word Esempio: scheda di alimentazione per un degente Vediamo come utilizzare Word per costruire un modulo compilabile, ovvero una scheda che contenga delle parti fisse di

Dettagli

01. Conoscere l area di lavoro

01. Conoscere l area di lavoro 01. Conoscere l area di lavoro Caratteristiche dell interfaccia Cambiare vista e dividere le viste Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze

Dettagli

I principali tag nella realizzazione di pagine web

I principali tag nella realizzazione di pagine web Ministero della Pubblica Istruzione Ufficio Scolastico Regionale per il Veneto Ufficio Scolastico Provinciale di Padova Area della comunicazione e web I principali tag nella realizzazione di pagine web

Dettagli

www.associazioni.milano.it - Il sito dedicato alle associazioni no-profit di Milano e provincia

www.associazioni.milano.it - Il sito dedicato alle associazioni no-profit di Milano e provincia Utilizzo del Forum NEWS Il forum news è stato pensato per dare ad ogni associazione la possibilità di pubblicare una pagina di novità all intero del proprio sito (scheda o pagina autocomposta). E la sezione

Dettagli

paragrafo. Testo Incorniciato Con bordo completo Testo Incorniciato Con bordo incompleto

paragrafo. Testo Incorniciato Con bordo completo Testo Incorniciato Con bordo incompleto Applicare bordi e sfondi ai paragrafi Word permette di creare un bordo attorno ad un intera pagina o solo attorno a paragrafi selezionati. Il testo risulta incorniciato in un rettangolo completo dei quattro

Dettagli

Corso WEB. Scuola Media Statale Ferentino. Aprile 2011. relatore: ing. Gianluca VENTURI. Corso WEB - lezione 3 1. www.ergonotec.it

Corso WEB. Scuola Media Statale Ferentino. Aprile 2011. relatore: ing. Gianluca VENTURI. Corso WEB - lezione 3 1. www.ergonotec.it Corso WEB Scuola Media Statale Ferentino Aprile 2011 relatore: ing. Gianluca VENTURI Corso WEB - lezione 3 1 UN PO' DI RIPASSO... Corso WEB - lezione 3 2 ESERCITAZIONE Verifichiamo se abbiamo acquisito

Dettagli

Figura 1 Le Icone dei file di Excel con e senza macro.

Figura 1 Le Icone dei file di Excel con e senza macro. 18 Le macro Le macro rappresentano una soluzione interessante per automatizzare e velocizzare l esecuzione di operazioni ripetitive. Le macro, di fatto, sono porzioni di codice VBA (Visual Basic for Applications)

Dettagli

GUIDA ALL HTML. Creato da SUPREMO KING

GUIDA ALL HTML. Creato da SUPREMO KING GUIDA ALL HTML Creato da SUPREMO_KING 1 PREMESSE L html è il linguaggio fondamentale attraverso il quale è possibile creare delle semplici pagine web. L html non è un linguaggio di programmazione ma un

Dettagli

CAPITOLO 6 - LINGUAGGIO HTML INTRODUZIONE

CAPITOLO 6 - LINGUAGGIO HTML INTRODUZIONE INTRODUZIONE Le pagine web sono scritte in HTML, un semplice linguaggio di scrittura. In pratica, un documento HTML non è nient'altro che un file di testo. L'HTML permette di scrivere un documento come

Dettagli

HTML INFORMATICA PER LE APPLICAZIONI ECONOMICHE PROF.SSA BICE CAVALLO

HTML INFORMATICA PER LE APPLICAZIONI ECONOMICHE PROF.SSA BICE CAVALLO HTML INFORMATICA PER LE APPLICAZIONI ECONOMICHE PROF.SSA BICE CAVALLO Introduzione 2 HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio

Dettagli

IMSV 0.8. (In Media Stat Virtus) Manuale Utente

IMSV 0.8. (In Media Stat Virtus) Manuale Utente Introduzione IMSV 0.8 (In Media Stat Virtus) Manuale Utente IMSV è una applicazione che calcola che voti può'prendere uno studente negli esami che gli mancano per ottenere la media che desidera. Importante:

Dettagli

Introduzione all'uso di

Introduzione all'uso di Introduzione all'uso di 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.

Dettagli

www.filoweb.it STAMPA UNIONE DI WORD

www.filoweb.it STAMPA UNIONE DI WORD STAMPA UNIONE DI WORD Molte volte abbiamo bisogno di stampare più volte lo stesso documento cambiando solo alcuni dati. Potremmo farlo manualmente e perdere un sacco di tempo, oppure possiamo ricorrere

Dettagli

Laboratorio di Informatica. Facoltà di Economia Università di Foggia. Prof. Crescenzio Gallo

Laboratorio di Informatica. Facoltà di Economia Università di Foggia. Prof. Crescenzio Gallo . Laboratorio di Informatica Facoltà di Economia Università di Foggia Prof. Crescenzio Gallo Word è un programma di elaborazione testi che consente di creare, modificare e formattare documenti in modo

Dettagli

Gestione dei contenuti web Ultimi eventi

Gestione dei contenuti web Ultimi eventi Gestione dei contenuti web Ultimi eventi Questo manuale illustra le operazioni più comuni per la manutenzione e aggiornamento del sito web http://terremoti.ingv.it/ultimi eventi/ tramite l interfaccia

Dettagli

Esercitazioni di HTML

Esercitazioni di HTML Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:

Dettagli

LEZIONE NO. 1: INTRODUZIONE, ELEMENTI BASE, DI ATTILIO ABBIEZZI

LEZIONE NO. 1: INTRODUZIONE, ELEMENTI BASE, <HEAD> DI ATTILIO ABBIEZZI HTML BASE LEZIONE NO. 1: INTRODUZIONE, ELEMENTI BASE, DI ATTILIO ABBIEZZI FONTI: HTML.IT 1 Breve Introduzione Che cosa significa linguaggio HTML? HTML = HyperText Markup Language Il primo concetto

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali

Dettagli

Lezione nr. 3. >> Le basi della tecnologia PHP per scrivere applicazioni per il web.

Lezione nr. 3. >> Le basi della tecnologia PHP per scrivere applicazioni per il web. Lezione nr. 3 >> Le basi della tecnologia PHP per scrivere applicazioni per il web. Ciao, spero tu abbia installato l editor di testo preferito o quello che ti ho consigliato e che tu sia riuscito a creare

Dettagli

Modulo 1: Fondamenti per scrivere una pagina web

Modulo 1: Fondamenti per scrivere una pagina web Modulo 1: Fondamenti per scrivere una pagina web Indice del modulo Introduzione al linguaggio di marcatura Contenuto, struttura, presentazione Elementi e attributi Proviamo a scrivere una pagina HTML Aggiungere

Dettagli

Videoscrittura con OpenOffice Writer V

Videoscrittura con OpenOffice Writer V Videoscrittura con OpenOffice Writer V Videoscrittura con OpenOffice Writer V 1. Importare fogli di calcolo o altri oggetti 2. Tabulazione 3. Realizzazione di un volantino con suddivisione in colonne 4.

Dettagli

HTML: Altri elementi

HTML: Altri elementi Laboratorio di Tecnologie Web HTML: Altri elementi Dott. Stefano Burigat www.dimi.uniud.it/burigat Oltre a quelli chhe abbiamo visto in precedenza, l'html5 supporta diversi altri elementi che vengono utilizzati

Dettagli

WORD 97 SCRIVERE UNA TESI DI LAUREA

WORD 97 SCRIVERE UNA TESI DI LAUREA WORD 97 SCRIVERE UNA TESI DI LAUREA PASSO 1 Per prima cosa pensiamo al formato generale della pagina: i margini richiesti da una tesi sono quasi sempre più ampi di quelli di un testo normale. Apriamo ora

Dettagli

Layout dell area di lavoro

Layout dell area di lavoro Layout dell area di lavoro In Windows, Dreamweaver fornisce un layout che integra tutti gli elementi in una sola finestra. Nell area di lavoro integrata, tutte le finestre e i pannelli sono integrati in

Dettagli

G. Pettarin ECDL Modulo 3: Word 84

G. Pettarin ECDL Modulo 3: Word 84 G. Pettarin ECDL Modulo 3: Word 84 La scheda vai a La scheda Vai è probabilmente la meno utilizzata delle tre: permette di spostarsi in un certo punto del documento, ad esempio su una determinata pagina

Dettagli

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW 1 INTRODUZIONE AL LINGUAGGIO HTML Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML 3 Architettura

Dettagli

Guida all utilizzo del forum online dell Università Gregoriana. Per gli studenti

Guida all utilizzo del forum online dell Università Gregoriana. Per gli studenti Guida all utilizzo del forum online dell Università Gregoriana Per gli studenti 1. Introduzione Lo scopo di questa guida è di presentare le basi per aiutare gli studenti ad utilizzare l applicazione forum

Dettagli

Esercitazione n. 10: HTML e primo sito web

Esercitazione n. 10: HTML e primo sito web + Strumenti digitali per la comunicazione A.A 0/4 Esercitazione n. 0: HTML e primo sito web Scopo: Creare un semplice sito web con Kompozer. Il sito web è composto da una home page, e da altre due pagine

Dettagli

Manuale di realizzazione dei modelli di documento

Manuale di realizzazione dei modelli di documento MystiqueXML Manuale di realizzazione dei modelli di documento Indice 1 Le tabelle...5 1.1 Tabelle condizionali...5 1.2 Tabelle Multiple - un solo livello...5 1.3 Tabelle Multiple - a più livelli...5 2

Dettagli

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language HTML 05/04/2012 1 Introduzione Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language L'ipertesto è semplicemente un testo che funziona

Dettagli

Il foglio elettronico

Il foglio elettronico Il foglio elettronico Foglio di calcolo, Spreadsheet in inglese, Permette di elaborare DATI NUMERICI. E una TABELLA che contiene numeri che possono essere elaborati con FUNZIONI matematiche e statistiche.

Dettagli

Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********`

Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********` Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********` Nota importante: Questa lezione e la successiva vanno considerate come un'unica lezione. Affronteremo

Dettagli

LABORATORIO PER IL DESIGN DELLE INTERFACCE PEGORARO ALESSANDRO CASSERO.IT MANUALE DI AGGIORNAMENTO, MANUTENZIONE E USO DEL SITO

LABORATORIO PER IL DESIGN DELLE INTERFACCE PEGORARO ALESSANDRO CASSERO.IT MANUALE DI AGGIORNAMENTO, MANUTENZIONE E USO DEL SITO CASSERO.IT MANUALE DI AGGIORNAMENTO, MANUTENZIONE E USO DEL SITO 1 Installazione e requisiti per il corretto funzionamento del sito: L istallazione è possibile sui più diffusi sistemi operativi. Il pacchetto

Dettagli

Cos è un word processor

Cos è un word processor Cos è un word processor è un programma di videoscrittura che consente anche di applicare formati diversi al testo e di eseguire operazioni di impaginazione: font diversi per il testo impaginazione dei

Dettagli

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup)

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup) HTML Olga Scotti Cos è HTML Hypertext Markup Language non è un linguaggio di programmazione non ha meccanismi che consentono di prendere delle decisioni non è in grado di compiere delle iterazioni linguaggio

Dettagli

LA CORRISPONDENZA COMMERCIALE

LA CORRISPONDENZA COMMERCIALE LA CORRISPONDENZA COMMERCIALE GLI ELEMENTI ESSENZIALI DELLA LETTERA COMMERCIALE Intestazione Individua il nome e il cognome o la ragione sociale di chi scrive; contiene inoltre l indirizzo e i recapiti

Dettagli

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 Copyright 2010 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT Tutti i diritti sono riservati. Per pubblicazioni od utilizzo di questo materiale pregasi contattare l autore al seguente indirizzo: andreavasini@libero.it Andrea Vasini HTML.IT HTML.IT - Andrea Vasini

Dettagli

Manuale utente. Versione aggiornata al 29/01/2011

Manuale utente. Versione aggiornata al 29/01/2011 Manuale utente Versione aggiornata al 29/01/2011 Pagina di Login Per utilizzare al meglio GASdotto è raccomandato di usare il browser Mozilla Firefox ; se non è installato sul vostro PC potete scaricarlo

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head...

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi> FRAME HTML 6 I frame Danno la possibilità di creare finestre multiple all'interno della finestra del browser Si riesce a suddividere la pagina in più sezioni indipendenti, ma che si possono influenzare

Dettagli

Modulo 8. Sviluppo di pagine e siti Creare pagine Web

Modulo 8. Sviluppo di pagine e siti Creare pagine Web Pagina 1 di 6 Sviluppo di pagine e siti Creare pagine Web HTML è l'acronimo di HyperText Markup Language; si tratta di un linguaggio utilizzato per la marcatura ipertestuale. A differenza dei comuni linguaggi

Dettagli

Entrare nel sistema. Clicca su Entra per entrare nel sistema. PAGINA 1

Entrare nel sistema. Clicca su Entra per entrare nel sistema. PAGINA 1 Entrare nel sistema Clicca su Entra per entrare nel sistema. PAGINA 1 Entrare nel sistema Compare il box di login in cui inserire il nome utente e la password fornite tramite posta elettronica. PAGINA

Dettagli

Iniziativa Comunitaria Equal II Fase IT G2 CAM - 017 Futuro Remoto. Approfondimento SOFTWARE PER L ARCHIVIAZIONE

Iniziativa Comunitaria Equal II Fase IT G2 CAM - 017 Futuro Remoto. Approfondimento SOFTWARE PER L ARCHIVIAZIONE APPROFONDIMENTO ICT Iniziativa Comunitaria Equal II Fase IT G2 CAM - 017 Futuro Remoto Approfondimento SOFTWARE PER L ARCHIVIAZIONE ORGANISMO BILATERALE PER LA FORMAZIONE IN CAMPANIA INDICE SOFTWARE PER

Dettagli

Nuovo documento Anteprima di stampa Collegamento Zoom. Apri Controllo ortografico Annulla Sorgente dati. Salva Controllo automatico Ripristina Gallery

Nuovo documento Anteprima di stampa Collegamento Zoom. Apri Controllo ortografico Annulla Sorgente dati. Salva Controllo automatico Ripristina Gallery Writer è il programma per l'elaborazione di testi della suite OpenOffice.org che ti consente di creare documenti, lettere, newsletter, brochures, grafici, etc. Gli elementi dello schermo: Di seguito le

Dettagli

Presentazione piattaforma Csv

Presentazione piattaforma Csv Presentazione piattaforma Csv Il Csv di Rovigo ha preparato una piattaforma web con l obiettivo di fornire alle associazioni che lo richiedono la possibilità di creare e mantenere in modo semplice un sito

Dettagli

Definire gli attributi dei blocchi

Definire gli attributi dei blocchi Definire gli attributi dei blocchi Attributi:Informazioni associate ad un blocco Definire gli attributi Menu: Disegna Blocco Attributo Comando: DEFATT Utilizzo riga di comando: -DEFATT Note Lo stile di

Dettagli

Laboratorio Matematico Informatico 2

Laboratorio Matematico Informatico 2 Laboratorio Matematico Informatico 2 (Matematica specialistica) A.A. 2006/07 Pierluigi Amodio Dipartimento di Matematica Università di Bari Laboratorio Matematico Informatico 2 p. 1/1 Informazioni Orario

Dettagli

Pubblicazione di contenuti vari sul sito web www.setificio.gov.it

Pubblicazione di contenuti vari sul sito web www.setificio.gov.it Pubblicazione di contenuti vari sul sito web www.setificio.gov.it Istruzioni per i docenti-editor, che hanno la possibilità di pubblicare articoli, modificare o cancellare quelli scritti da loro, modificare

Dettagli

FUNZIONI AVANZATE DI EXCEL

FUNZIONI AVANZATE DI EXCEL FUNZIONI AVANZATE DI EXCEL Inserire una funzione dalla barra dei menu Clicca sulla scheda "Formule" e clicca su "Fx" (Inserisci Funzione). Dalla finestra di dialogo "Inserisci Funzione" clicca sulla categoria

Dettagli

JAVASCRIPT. Tale file è associato alla pagina web mediante il tag