Corso di Informatica II. Corso di Informatica II. Corso di Informatica II. Orario lezioni 27/02/2009. Ing. Dario Sguassero. Ing.
|
|
|
- Adolfo Filippi
- 5 anni fa
- Visualizzazioni
Transcript
1 Lezione del 27 febbraio 2009 Html Orario lezioni Il nuovo orario di lezioneè: martedì venerdì In questo modo il corso terminerà entro i primi d aprile. Testo in html
2 Schede Modalità grafica vs codice Ogni scheda rappresenta una modalità di visualizzazione della pagina: Anteprima:come dovrebbe essere visualizzata dal browser Normale:come anteprima ma evidenzia le tabelle invisibili Sorgente: mostra il codice html TagHTML:evidenzia i comandi html La modalità grafica è molto intuitiva, ma solo la modalità codice consente un controllo totale del risultato ottenuto Si inizia imparando a leggereil codice, poi lo si ritocca, e infine si crea direttamente in html Html Tag L html è un linguaggio descrittivo della formattazione del testo e dell impaginazione grafica di immagini e testo Immagini ed oggetti non sono incorporati direttamente nel codice, ma collegati L html si è sviluppato nel tempo perciò spesso lo stesso risultato si può ottenere con molti comandi diversi, più o meno compatibili I comandi html sono compresi tra tag, solitamente uno di apertura e uno di chiusura I tag sono parole riservate, racchiuse tra < e > Un tag di chiusura è preceduto da / Per inserire nel testo i caratteri < e > (ed altri riservati) esistono delle codifiche speciali, es. < e > sono sostituiti da <e > I tag sono case-insensitive
3 Struttura di una pagina html 1 Una pagina html è un normale file di testo Per indicare al browser che contiene formattazione html si racchiude tutto il codice tra i tag <html> e </html> Alcuni comandi per il browser non devono essere visualizzati, perciò sono racchiusi fra i tag di secondo livello <head> </head> Il testo da visualizzare è invece compreso tra i tag di secondo livello <body> </body> Struttura di una pagina html 2 Se perciò visualizzate una pagina web qualsiasi (menù visualizza html) troverete sempre questa struttura base: <html> <head> </head> <body> </body> </html> Formattazione del carattere - 1 I tag più diffusi per formattare il testo sono: <u> </u> per il sottolineato (underlined) <b> </b> per il grassetto (bold) <i> </i> per il corsivo (italic) Possono dare risultati simili anche: <strong> </strong> grassetto <em> </em> corsivo (emphasize) I primi indicano il risultato, i secondi l effetto Formattazione del carattere - 2 E preferibile indicare l effetto perché garantisce maggiore compatibilità con browser limitati, come quelli dei cellulari: se non dispongono della formattazione richiesta la sostituiscono con un altra che dia lo stesso effetto Es. con <strong> il grassetto diventa un colore Per altri vedere il menù NVU -> formato -> stile
4 Tag con parametri Regole html Il tag <font> accetta anche dei parametri per il tipo, dimensione e colore del carattere: <font size= -1 face= Arial, Verdana color= red >prova</font> Questo comando in realtà è ora deprecatodal W3C a favore dei comandi di stile (parametro style o file.css) Attenzione: I doppi spazi non vengono considerati Gli a capo nel testo non vengono considerati I tag devono essere correttamente nidificati: Sbagliato: <p>ciao <em>tim</p></em> Corretto: <p>ciao <em>tim</em></p> Quando su più linee è opportuno indentarli Elenchi Paragrafi Gli elenchi puntati si ottengono con: <ul> <li>prima riga</li> <li>seconda riga</li> <li>terza riga</li> </ul> Mentre quelli numerati prevedono <ol> al posto di <ol> Unparagrafoèracchiusotraitag <p></p> Il parametro align indica l allineamento, es. <p align= center >questo è un paragrafo</p> oppure left, right o justify Un a capo più piccolo si ottiene con il tag unico <br>(deprecato, ma diffuso) o <br/> <!-- --> racchiude un commento, il testo all interno non è visualizzato dal browser
5 Titoli Ci sono formattazioni predisposte per i titoli: <h1>titolo di livello 1</h1> <h2>titolo di livello 2</h2> <h6>titolo di livello 6</h6> ecc. ma ogni browser le visualizza a piacimento. Il vero titolo della pagina, quello che compare nella barra del titolo del browser, si indica all interno dell header racchiuso tra i tag: <title>questo è il titolo della pagina</title> Accenno agli stili Stili -1 Stili -2 Con l evoluzione dell html i comandi iniziavano ad essere troppi, perciò si è preferito arricchire la scelta dei parametri tramite gli stili Gli stili possono essere applicati ai vecchi tag, oppure ad insiemi di caratteri delimitati dal tag generico <span> </span> o insiemi di righe racchiusi tra il tag <div> </div> <p align= center ><b><i><u>ciao </u></i></b></p> è diventato: <div style="text-align: center;"> <spanstyle="font-weight: bold; font-style: italic; text-decoration: underline;">ciao</span> </div><br/>
6 Stili di pagina 1 Stili di pagina 2 Per dotare la pagina di una grafica omogenea, nell header è possibile associare ad un tag un insieme di caratteristiche da ripetere <head> <style> h1 {font-weight: bold; font-size: 50px} </style> </head> E possibile anche definire più stili per lo stesso tag associandogli nomi diversi <style> p.es {font-style: italic;} p.des {font-family:courier new} </style> L attributo class richiama le varianti: <p class= es >esempio</p> <p class= des >descrizione</p> Foglio di stile.css Personalizzazioni avanzate Per dotare l intero sito di una grafica omogenea, nell header è possibile richiamare un file.css esterno che definisce tutti gli stili da utilizzare <LINK rel="stylesheet" type="text/css" href= file.css"> Modificando un solo file è possibile aggiornare l aspetto grafico di un intero sito! L uso degli stili è più complesso rispetto ai tag vecchio stile ma permettono personalizzazioni anche sofisticate. Posso impostare lo stile anche in base allo stato del testo, ad esempio per link che cambiano colore al passaggio del mouse: <STYLE TYPE="text/css"> A:hover { color: red} </STYLE>
7 Ipertesti Ipertesti Gli ipertestisono dei testi non lineari, un insieme di pagine collegate in maniera logica, ma non necessariamente sequenziale, in modo tale che esistano diversi percorsi di lettura. L esplorazione di un ipertesto in ambito informatico avviene con un browser ed è detta navigazione Strutture ipertestuali Il reticolo può essere rappresentato graficamente mediante un grafo. Le strutture possono essere: gerarchicase il reticolo dei rimandi è strutturato ad albero semigerarchicase il reticolo è gerarchico con collegamenti trasversali a rete se i collegamenti non hanno gerarchia Collegamenti 1 I link sono una parte essenziale di un ipertesto: pochi link rischiano di forzare la navigazione lungo percorsi obbligati troppi link non differenziati tra loro rischiano di far perdere il filo durante la lettura necessari link per tornare indietro, o al punto di inizio, o a un motore, mappa o indice; attenzione ai percorsi che si autoreferenziano (possibili loop)
8 Collegamenti 2 Collegamenti 3 I collegamenti si ottengono con il comando HTML: <A HREF= pagina_destinazione >parola</a> Ad esempio: <A HREF= >Ateneo di Trieste</A> La scritta Ateneo di Trieste sarà visualizzata sottolineata, al passaggio il puntatore del mouse diventerà una manina e nella barra di stato verrà visualizzato il link di rimando Con NVU si seleziona la parola, si clicca sul pulsante collegamento e si inserisce l indirizzo di destinazione Pagine 1 Pagine 2 Da evitare: impaginazioni monotone, senza formattazioni per imporre le gerarchie dei contenuti, senza paragrafi, titoletti, elenchi e interruzioni pagine troppo lunghe, sono lente da caricare e scomode da scorrere, meglio scomporle (piuttosto creare una piccola sezione con link sequenziali); testi lunghi sono ammessi per le pagine formattate per la stampa testi troppo corti, possono far perdere tempo e il filo del discorso con le interruzioni dovute al loro caricamento, meglio unirli inserendo dei sottotitoli intermedi pagine contenenti argomenti diversiportano a collegamenti generici e poco chiari Generalmente ci si orienta su lunghezze di 1-2 videate, comprese le cornici per pulsanti e menù
9 Immagini Includere un immagine 1 Per includere un immagine si può utilizzare il comando IMG: <IMG SRC= immagini/pulsante.gif > Si utilizzano spesso con i seguenti attributi: WIDTH impone la larghezza se non specificata mantiene quella del file originale HEIGHT specifica l altezza ALT testo alternativo al passaggio del mouse Includere un immagine 2 InserImento immagini con NVU BORDER spessore del bordo (usato solo per evidenziare un immagine trasformata in link) Esempio: <IMG SRC= firma.gif" WIDTH= 300" HEIGHT="50" BORDER="0" ALT= firma del titolare"> Siccome le varianti di formattazione sono limitate, spesso si utilizzano i disegni anche per le scritte, soprattutto per i pulsanti dei menù Con NVU basta posizionarsi con il cursore nel punto in cui si vuole inserire l immagine, cliccare il pulsante Immagine e indicare il nome del file (e gli eventuali attributi)
10 Indirizzi relativi o assoluti Lasciare spuntata l opzione L URL è relativo Se nel campo indirizzo immagine compare un valore che inizia con filetipo: file:///c:/temp/pictures/codice_fiscale.jpg allora l upload del sito non può avere successo Funzionerà con un indirizzo relativo tipo:../immagini/codice_fiscale.jpg facendo l upload dell intera struttura del sito Tabelle Le tabelle L uso delle tabelle è estremamente diffuso nell HTML perché sono utilizzate per l impaginazione delle pagina web Le celle Questa versatilità è dovuta alla proprietà di ogni cella di essere gestita come una piccola pagina indipendente, innestandoci eventualmente all interno anche altre tabelle Una tabella trasparenteconsente di definire la struttura di una pagina così come l intestazione e le colonne di un giornale ne definiscono il suo aspetto grafico
11 Una tabella deve avere almeno una cella: <TABLE> <TR> <TD> Contenuto </TD> </TR> </TABLE> Struttura HTML 1 Esempio tabella 2x2: <TABLE> <TR> <TD>CellaA1</TD> <TD>CellaB1</TD> </TR> <TR> <TD>CellaA2</TD> <TD>CellaB2</TD> </TR> </TABLE> Struttura HTML 2 L indentazione è per facilitare la lettura: <TABLE><TR><TD>Contenuto</TD></TR></TABLE> Tag utilizzati: <TABLE>indicano i confini della tabella</table> <TR> apertura della prossima riga </TR> <TD> apertura di una cella/colonna </TD> L innesto dei tre livelli deve sempre esserci <TABLE> 1 Tra i suoi argomenti più diffusi si trovano: WIDTH indica la larghezza che può essere espressa in pixel oppure in percentuale di finestra (del cliente che la visualizza). Un suo fine utilizzo può essere molto potente per creare delle pagine che si autoridimensionanoin base allo schermo utilizzato <TABLE> 2 BORDER visualizzazione del bordo (spesso nascosta) CELLSPACING dimensione del bordo CELLPADDING spazio tra cella e suo bordo
12 <TABLE> 3 E possibile stabilire anche altri parametri come: BGCOLOR per definire il colore di sfondo, es. BGCOLOR= red, oppure BORDERCOLOR="blue BORDERCOLORLIGHT="#00CCFF BORDERCOLORDARK="# Il codiceesprimecolorirgb con ilvalorea 2 cifreesadecimali(00 è scuro 9 A B FF è chiaro) <COL> e <TR> Dopo <TABLE> posso imporre la dimensione delle colonne con il tagcol (pari al num. di colonne): <COL WIDTH= 50% ></COL><COL WIDTH= 40 ></COL> Con <TR> posso impostare l allineamento del testo per tutta la riga: ALIGN impone l allineamento orizzontale del contenuto, come left, center, right o justify VALIGN impone l allineamento verticale, che può essere top, middle o bottom <TD> 1 <TD> 2 Finalmente all interno del tag TD posso includere il contenuto della cella: <TD>testo contenuto nella cella</td> Per ogni colonna posso ri-specificare diversi attributi (che prevaricano sui precedenti), come ALIGN, VALIGN, BGCOLOR, WIDTH, esempio: <TD ALIGN= center VALIGN= top BGCOLOR= red WIDTH= 30% >testo contenuto nella cella</td> Oppure altri come: HEIGHT per l altezza delle celle BACKGROUND inserisce un immagine di sfondo COLSPAN e ROWSPAN effettuano l unione (estensione) di celle, in basso e a destra rispettivamente; bisognerà poi ricordarsi di saltare le celle nascoste
13 Tabelle con NVU 1 Tabelle con NVU 2 Si posiziona il cursore nel punto di inserimento Si seleziona il pulsante tabella dalla barra degli strumenti, quindi si compila la finestra di Inserimento tabella Posizionandosi nella tabella si può accedere alle proprietà con il tasto destro del mouse, dove si possono personalizzare gli altri attributi Layout Innanzitutto bisogna scegliere il layout della pagina, in particolare posizione e voci del menù: larghezza della pagina: legata alla dimensione della finestra o fissa (e sua posizione) Creazione di un sito
14 Posizione menù Griglia principale Posizione e voci del menù: solo in alto, a fianco oppure su più lati Si scompone la pagina in una griglia e si realizza la tabella che la deve contenere: solitamente una tabella più esterna determina la posizione e dimensioni rispetto alla finestra una seconda tabella definisce gli spazi per i menù che poi vengono creati tramite altre tabelle Utilizzare un unica tabella è più complesso perché bisogna unire molte celle Realizzazione menù I menù sono solitamente tabelle con un unica riga o colonna Le voci possono essere dei link testuali, ma solitamente sono realizzati con immagini Un vantaggio di questa tecnica è che modificando l immagine posso aggiornare il menù in tutte le pagine del sito (ma non il relativo collegamento ) Indirizzi relativi ed assoluti
15 Indirizzi relativi ed assoluti Quando si crea un link o si richiama un immagine si possono utilizzare indirizzi assoluti o relativi: assoluti: la destinazione si indica in forma completa relativi: il percorso della destinazione è riferito alla posizione del file html attuale Esempi indirizzi relativi immagini/logo.jpg indica un file che si trova in una sottocartella immagini rispetto alla posizione attuale../../immagini/logo.jpg risale di due cartelle rispetto al livello del file html da cui è richiamata /immagini/logo.jpg crea il percorso partendo dalla radice (vista dal browser, come Indirizzi con NVU Errore tipico è linkare una immagine/pagina in locale e dopo l upload ritrovarsi il link che punta ad un file inesistente. Controllare sempre il risultato di un operazione di link in una pagina html! Bisogna prestare attenzione anche quando si spostano dei file html tra cartelle diverse (soprattutto se a livelli diversi) Larghezza tabelle
16 Dimensione tabella e colonne Dimensioni colonne Può essere impostata come valore assoluto (pixel) oppure relativo (alla dimensione della finestra del browser, solitamente 100%) Comunque verrà estesa alla dimensione minima del suo contenuto (perciò dimensione di celle e colonne hanno priorità) Se occupa più della larghezza della finestra del browser verrà attivata la barra di scorrimento orizzontale del programma Lo stesso vale anche per la dimensione delle colonne Prima viene riservato lo spazio per le colonne con larghezza espressa in pixel, poi lo spazio rimanente viene suddiviso tra quelle con larghezza in percentuale Raramente si vincola l altezza delle righe Dimensioni celle Esempi layout Essendo una griglia, l altezza e la larghezza delle celle è la maggiore tra quelle della stessa riga e colonna Può essere impostata come valore assoluto (pixel) oppure relativo (alla dimensione della tabella) Comunque verrà estesa alla dimensione minima del suo contenuto Per ottenere un risultato come posso: 50% 50% centrare la tabella o inserirla in una colonna centrata di una tabella
17 Tabelle per linee Per disegnare una linea orizzontale si può usare il tag <HR>, ma non supporta personalizzazioni Spesso invece si usa una cella vuota alta pochi pixel con sfondo colorato Inserendoci un immagine creata appositamente è possibile anche visualizzare delle righe sfumate o generare altri effetti Gallery Esercizio photogallery 1 Esercizio photogallery 2 Realizzare una galleria di immagini Bisogna disporre di una serie di foto in grande formato (es. da macchina fotografica digitale) oppure scaricandole da Google Creare con Irfanview le corrispondenti immagini rimpicciolite (thumbnails) con il comando menù immagine ridimensiona e poi salva con nome (aggiungere al nome un suffisso per distinguerle dalle originali) La pagina indice deve essere composta da una tabella (es. 2x3) e ogni cella contenere un immagine ridimensionata con un link ad una pagina specifica per la foto Quando ci sono più di 2x3 foto bisogna prevedere una seconda pagina indice e dei pulsanti per spostarsi Analogamente anche le pagine delle foto devono avere dei pulsanti di spostamento
18 Piccolo sito aziendale Struttura I siti per piccole ditte sono solitamente minimali, composti da 5-10 pagine statichei cui contenuti ricalcano quelli del depliant aziendale. Sono graficamente accattivanti ma hanno poco testo, al più una gallery dei prodotti offerti Le parti dinamiche (news, forum, area riservata ) sono troppo spesso abbandonate, per non parlare del riferimento Menù sito aziendale Esercizio sito aziendale Il menù principale richiama: rimando all homepage (sempre presente!) presentazione, valori, storia, vision, mission dell azienda prodotti venduti o servizi offerti principali lavorazioni, metodi, strumentazione, tecnologia contatti e mappa stradale Creare una struttura di questo tipo (dimensione fissa) e popolarla: menù menù menù menù menù cornice testo foto
19 Icone per menù Per recuperare velocemente dei pulsanti piacevoli da utilizzare nel menù si può: Partire da immagini scrivete icon seguito dal nome in inglese del pulsante che state cercando es. homepage selezionare nel menù a tendina immagini piccole o medie salvare l icona scelta con il tasto destro e il comando salva immagine con nome
INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2. Internet + HTML + HTTP = WWW
1 INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2 Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML
Formattazione di liste
Formattazione di liste Con HTML si possono costruire liste puntate o numerate: Occorre definire l inizio e la fine della lista e poi definire ogni singolo elemento della lista. Le liste numerate si costruiscono
Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2
Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto
Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine
Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare
Corso di HTML. Prerequisiti. Modulo L2 B4 - Le tabelle. Concetto di tabella Coordinate di cella in una tabella. M. Malatesta B4-Le tabelle-06
Corso di HTML Modulo L2 B4 - Le tabelle 1 Prerequisiti Concetto di tabella Coordinate di cella in una tabella 2 1 Introduzione In questa Unità illustriamo il concetto e l uso delle tabelle in HTML. Le
HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte
HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo
APPUNTI DI HTML (QUARTA LEZIONE)
APPUNTI DI HTML (QUARTA LEZIONE) 1. LA STRUTTURA BASE DELLE TABELLE Le tabelle sono una parte estremamente importante del codice HTML. Sono uno strumento indispensabile per gestire i layout grafici. Immaginiamo
non è linguaggio di markup formato testo .htm .html interpretando
HTML Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML). HTML non è un linguaggio di programmazione! HTML non ha meccanismi per prendere delle decisioni o compiere
Informatica. Comunicazione & DAMS A.A. 2015/16. Dr.ssa Valeria Fionda
Informatica Comunicazione & DAMS A.A. 2015/16 Dr.ssa Valeria Fionda Pagina Web Struttura base pagina Web: (Heading
Linguaggio HTML. Elementi di Informatica e Programmazione Università degli Studi di Brescia. Il Linguaggio HTML
Reti Linguaggio HTML 1 Il Linguaggio HTML n HTML = Hypertext Markup Language n Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita
Cl Calendario dl del corso
Cl Calendario dl del corso 12/02/2010 09.00-12.00 Introduzione al mondo WEB Concetti fondamentali e struttura di un sito e delle pagine pg web Gli URL, i link, le immagini I linguaggi HTML e CSS 16/02/2010
Progettazione multimediale
Progettazione multimediale Le tabelle 1 Obiettivi Perché si usano le tabelle Le proprietà delle tabelle Inserimento e modifica delle proprietà 2 Perché si usano le tabelle Una pagina Web è formata da testo
Tabelle. Esempio 20. Inserire righe e colonne. Dimensioni delle tabelle. Attributi del tag TABLE INFO WEB LEZIONE N.6
Tabelle INFO WEB LEZIONE N.6 RAVENNA, 2 APRILE 2008 In HTML le tabelle vengono largamente utilizzate per organizzare i dati in tabelle creare il layout della pagina servendosi di tabelle nascoste Si definiscono
Tabelle HTML. Tabelle Un po di notazione.
Tabelle HTML!! Le tabelle in HTML permettono di rappresentare tabelle di dati ", ma anche di formattare del testo, delle immagini, altre tabelle in righe e colonne, possono cioè essere usate per l impaginazione
HTML Sintassi di HTML Tag principali per i contenuti I Forms
Lezione 1 HTML Sintassi di HTML Tag principali per i contenuti Tag principali per i contenuti I Forms L HTML (HyperText Markup Language) g è il linguaggio gg di markup utilizzato per veicolare le informazioni
IMMAGINI INTRODUZIONE
IMMAGINI INTRODUZIONE Prima di inserire le immagini nella pagina HTML, le stesse devono essere copiate all interno della cartella del progetto (Sito). La loro copia può avvenire o tramite Risorse del Computer
Creazione di tabelle.
Creazione di tabelle. Argomenti trattati: - Premessa: Cosa sono le tabelle in HTML. - Costruiamo una tabella: Come realizzare semplici tabelle con i tag principali ed i loro attributi. - Personalizziamo
DEFINIZIONI SMART E RELATIVE ESERCITAZIONI. MODULO 2 Creazione e gestione di documenti di testo
DEFINIZIONI SMART E RELATIVE ESERCITAZIONI MODULO 2 Creazione e gestione di documenti di testo MODULO 2 CREAZIONE E GESTIONE DI DOCUMENTI DI TESTO Primi passi con un word processor L elaboratore di testi
HTML Lezione3 Le Tabelle. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML Lezione3 Le Tabelle Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Le Tabelle Non servono soltanto per incolonnare e tabulare i dati come si potrebbe facilmente pensare. Le
Linguaggio per ipertesti
Linguaggio per ipertesti Un linguaggio per descrivere gli ipertesti è l HyperText Markup Language (HTML) Non è il solo (VRML,XML,...) l HTML è un linguaggio di formattazione e permette di formattare del
Linguaggi di programmazione PC server-client CSS
Linguaggi di programmazione PC server-client CSS HTML MySQL PHP HTML: Hyper Tex Markup Language PHP: Hypertext Preprocessor CSS: Cascading Style Sheet MySQL: Relational database HTML Hyper Tex Markup Language
Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura:
COMANDI BASE HTML Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura: Nome del documento All'interno
Il linguaggio HTML. <html> </html> I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura.
Il linguaggio HTML I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura. . I tag devono essere racchiusi dentro parentesi acute Il tag di chiusura
Scrivere in Html Tag e loro attributi
Scrivere in Html Tag e loro attributi + Esercizi Prof.ssa Daniela Zangirolami Tutti i diritti sono riservati. Qualsiasi riproduzione, anche parziale, senza autorizzazione scritta è vietata. Legge 633 del
Tipi di testo. Esempio 4. Enfasi. Inserire immagini. Esempio 5 INFO WEB LEZIONE N.4
Tipi di testo INFO WEB LEZIONE N.4 RAVENNA, 13 MARZO 2008 All interno di un documento HTML è possibile inserire due tipi di testo Titoli Sei livelli di grandezza , ,, Paragrafi
CSS: HTML: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli. Le immagini mappate
CSS: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli HTML: Le immagini mappate 1 Le principali proprietà che permettono di manipolare le immagini agiscono sul box mode
Sommario. Nozioni di base su HTML
Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................
Grafici e Pagina web
Grafici e Pagina web Grafici Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro. Quando si crea un grafico ogni riga
Laboratorio Digitale 1
Informatica Corso di PROGRAMMAZIONE Applicata ai Beni IN Culturali RETE Laboratorio Digitale 1 Corso di Laboratorio Digitale 1 Corso di laurea comunicazione e DAMS Laurea Specialistica - Media Education
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. L HTML non è un linguaggio di programmazione
Come usare Doyouall. Usare il software Doyouall è molto semplice. Questa piccola guida è un aiuto per realizzare velocemente il tuo nuovo sito web.
Come usare Doyouall Usare il software Doyouall è molto semplice. Questa piccola guida è un aiuto per realizzare velocemente il tuo nuovo sito web. 1. Accedi ai template gratuiti, scegli il template che
Gestione del testo. Dreamweaver e il testo. Richiamare la pagina
Gestione del testo 04 In questo capitolo In questo capitolo imparerai a utilizzare gli strumenti di formattazione del testo. Imparerai come impostare uno stile a un testo per un titolo o un paragrafo.
Introduzione al linguaggio HTML
Introduzione al linguaggio HTML 1 Richiami introduttivi (1) sito Internet (sito Web o sito WWW) insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate su un server
Metodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 6. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze
Corso di HTML. Prerequisiti. Modulo L3 3 Blocchi di testo
Corso di HTML Modulo L3 3 Blocchi di testo 1 Prerequisiti Formattazione di un testo Struttura a titoli di un testo Giustificazione e allineamento del testo 2 1 Introduzione In questa Unità vediamo altri
Corso di Informatica
Corso di Informatica CL3 - Biotecnologie Prof. Mauro Giacomini Ing. Susanna Pivetti susanna.pivetti@dist.unige.it Tel: 010-3532217 Esercitazioni pratiche Uso di editor di testi Uso di foglio elettronico
Guida al documento ben formato
Passo 1. Operazioni preliminari Scelgo dal menu Formato il comando Stili e formattazione Sulla destra viene visualizzata la finestra Stili e formattazione Passo 2. Via formattazione e paragrafi vuoti Cancellazione
HTML. I tag HTML (parte 1)
HTML I tag HTML (parte 1) I tag HTML I comandi che il browser interpreta Etichette per marcare l inizio e la fine di un elemento HTML Formato e possono essere tag di apertura: tag di chiusura:
Interfaccia di Word. Scheda File: contiene i comandi per intervenire sul documento, come Nuovo, Apri, Salva con nome, Stampa e Chiudi.
Interfaccia di Word Barra del titolo: visualizza il nome di file del documento appena creato o che si sta modificando. Sul lato destro sono visibili i pulsanti Riduci a icona, Ripristina e Chiudi. Barra
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML Vediamo le seguenti istruzioni dell HTML link permette di dare un colore alla nostra "parola calda", se questo attributo non viene esplicitato
Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row
TAG FONDAMENTALI Tag : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag , tag ,.tag : per definire le intestazioni (i titoli) e la loro
CSS. Esercizi CC BY ALESSANDRO URSOMANDO DIAPOSITIVA 2 CSS PROPRIETÀ
CSS Esercizi CSS PROPRIETÀ DIAPOSITIVA 2 Corredare l esercizio precedentemente realizzato di un file.css che presenti delle dichiarazioni per impostare: l ampiezza del body a 800 pixel a giallo chiaro
Sistemi Di Elaborazione Dell informazione
Sistemi Di Elaborazione Dell informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010 Fogli di stile (CSS) Cascade Style Sheets
Corso di Introduzione all Informatica. Microsoft Word Nozioni di base
Corso di Introduzione all Informatica Microsoft Word Nozioni di base LA GUIDA IN LINEA 2 FORMATTARE UN DOCUMENTO Impostazione della pagina Per definire i parametri di impostazione della pagina, selezionare
Tabelle. Verdi A. Bianchi B. Rossi C. 12/02 Trasferta a Milano. Corso in sede. Riunione Ispettori a Milano Riunione in sede.
1 Tabelle Una tabella è una griglia composta da righe e colonne: l intersezione fra una riga e una colonna si chiama cella ed è un elemento di testo indipendente che può avere un proprio formato. Spesso,
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. HTML non è un linguaggio di programmazione ma
Tabelle. Tag fondamentali. Costruzione di tabelle riga per riga. Esempi. Tecnologie di Sviluppo per il WEB 2
HTML 5 Le tabelle 1 Tabelle Tag fondamentali Costruzione di tabelle riga per riga Esempi Tecnologie di Sviluppo per il WEB 2 Il tag Una tabella è suddivisa in righe e ciascuna riga è suddivisa
Opzioni contenitore Prodotti
Opzioni contenitore Prodotti Clicca il pulsante destro del mouse sul contenitore prodotti per accedere alle opzioni. Clicca il pulsante OPZIONI del menù che appare. Adesso puoi accedere a tutte le opzioni
Modulo 3 - Elaborazione Testi 3.4 Oggetti
Università degli Studi dell Aquila Corso ECDL programma START Modulo 3 - Elaborazione Testi 3.4 Oggetti Oggetti: le tabelle Gli oggetti sono entità, diverse da un testo, dotate di un propria identità:
LE MASCHERE. Maschera standard. Maschera semplice. Questa maschera però non consente di nascondere alcuni campi e visualizza i record uno ad uno.
LE MASCHERE Inserire i dati direttamente in tabella non è agevole. Questa operazione normalmente viene svolta utilizzando le maschere. I vantaggi offerti dalle maschere sono: Aspetto grafico più accattivante
Capitolo 2. Figura 21. Inserimento dati
Capitolo 2 INSERIMENTO DI DATI In ogni cella del foglio di lavoro è possibile inserire dati che possono essere di tipo testuale o numerico, oppure è possibile inserire formule le quali hanno la caratteristica
Un documento ben formato
Un documento ben formato Sommario PREMESSA... 1 PASSO 1. OPERAZIONI PRELIMINARI... 1 PASSO 2.VIA FORMATTAZIONE E PARAGRAFI VUOTI...2 CANCELLAZIONE FORMATTAZIONE...... 2 ELIMINO I PARAGRAFI VUOTI... 2 PASSO
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
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/ HTML e Cascading Style Sheets > L
Corso di PROGRAMMAZIONE IN RETE
Corso di PROGRAMMAZIONE IN RETE Laurea Specialistica - Media Education Dr. Annamaria Bria 1 1 Dipartimento di Matematica Università della Calabria Riferimenti MANUALE http://www.w3.org/tr/1999/rec-html401-19991224/
BREVE GUIDA ALL UTILIZZO DI
BREVE GUIDA ALL UTILIZZO DI Concetti generali di PowerPoint Aprire PowerPoint L apertura del programma Microsoft PowerPoint dipende dal sistema operativo che si utilizza per la gestione del computer. In
HTML Lezione2 Le Immagini e i link. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML Lezione2 Le Immagini e i link Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Le immagini I formati supportati dal websono diversi e variano a seconda del browser adoperato.i
Informatica d ufficio
Informatica d ufficio Anno Accademico 2008/2009 Lezione N 3 Microsoft Word - prima parte Microsoft Word E un Word processor,cioè un programma che consente di creare e modificare documenti. Prevede numerose
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS - appendice) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in
Video Scrittura (MS Word)
Video Scrittura (MS Word) Ripasso/approfondimento: Il Menù Home di Word Rivediamo i principali comandi presenti nel Menu Home di Word A sinistra troviamo le icone dei comandi di: Taglia, Copia e Incolla.
HTML 3. Liste puntate ed ordinate Immagini
HTML 3 Liste puntate ed ordinate Immagini Creazione di elenchi Elenchi puntati (elenchi non ordinati) Elenchi numerati (elenchi ordinati) Elenchi annidati Elenchi menu Elenchi glossario Tecnologie di Sviluppo
HTML 5. Tabelle. Bordi di una tabella. Il tag <TABLE> Le tabelle. Tag fondamentali. Costruzione di tabelle riga per riga. Esempi
HTML 5 Tabelle Tag fondamentali Costruzione di tabelle riga per riga Le tabelle Esempi 1 Tecnologie di Sviluppo per il WEB 2 Il tag Una tabella è suddivisa in righe e ciascuna riga è suddivisa
Web. HyperText Markup Language
Web HyperText Markup Language HTML HyperText Markup Language permette la creazione di documenti multimediali ipertestuali è il linguaggio per la creazione di pagine web non è l unico: PHP, JavaScript,
INSERIRE I DATI NEL DATABASE
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 201 CAPITOLO10 INSERIRE I DATI NEL DATABASE In questo capitolo In questo capitolo imparerai a interagire con i contenuti del database gestiti nel sito. In particolare
U.T.E Università della Terza Età
U.T.E Università della Terza Età Sede di Novate Milanese Corso Informatica Approfondimento FOGLIO ELETTRONICO Docente: Giovanni Pozzi FOGLIO ELETTRONICO MS-Excel E un programma che permette di effettuare:
Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro;
EXCEL Modulo 3 Grafici Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro; Quando si crea un grafico ogni riga o ogni
Fondamenti di informatica. Word Elaborazione di testi
Fondamenti di informatica Word Elaborazione di testi INTRODUZIONE Cos è Word? Word è un word processor WYSIWYG (What You See Is What You Get) in grado di soddisfare molte esigenze di word processing e
Facoltà di Giurisprudenza
Università degli Studi di Palermo Facoltà di Giurisprudenza Fondamenti di informatica per gli studenti del corso di Laurea Magistrale A. A. 2008-2009 Docente: ing. Giuseppe Balistreri Informazioni Ricevimento
4 Estensioni proprietarie. 4 Conversione del testo in immagini. 4 Uso di immagini per il controllo degli spazi bianchi
Universita degli Studi di Bologna - Facolta di Ingegneria HTML e Cascading Style Sheets > L HTML è nato in ambienti scientifici Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/
Word 2007 - Esercizio 2 - Parigi 1. Aprire il programma di elaborazione testi.
Word 2007 - Esercizio 2 - Parigi 1. Aprire il programma di elaborazione testi. 1. Avviare il PC( se leggi questo file è già avviato ) 2. Dal Desktop di Windows cliccare con il pulsante sinistro del mouse
Strumenti di elaborazioni testi
Consulente del Lavoro A.A 2002/2003 I Semestre Strumenti di elaborazioni testi Microsoft Word Introduzione Gli strumenti di elaborazione testi (videoscrittura) sono programmi che consento di creare, leggere
Guida a WordPress. 1. Iscrizione a Wordpress
Guida a WordPress 1. Iscrizione a Wordpress Digitare il seguente indirizzo: https://it.wordpress.com/ Cliccare su Crea sito web Scegliere un tema, ovvero la struttura principale che assumeranno le pagine
Guida pratica per la creazione di un documento Word accessibile Sommario
Guida pratica per la creazione di un documento Word accessibile Sommario Introduzione... 2 Proprietà... 2 Stili e formattazione... 2 Creazione di un sommario... 3 Collegamenti ipertestuali... 3 Colori...
Anno 2009/2010 Syllabus 5.0
Patente Europea di Informatica ECDL Modulo 6 Lezione 2: Inserimento e formattazione di testo Tabelle Grafici Organigrammi Anno 2009/2010 Syllabus 5.0 La maggior parte delle presentazioni di PowerPoint
I fogli di stile (CSS)
I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono
U.T.E FOGLIO ELETTRONICO. Università della Terza Età. Sede di Novate Milanese. Corso Informatica Approfondimento. Docente: Giovanni Pozzi
U.T.E Università della Terza Età Sede di Novate Milanese Corso Informatica Approfondimento FOGLIO ELETTRONICO Docente: Giovanni Pozzi FOGLIO ELETTRONICO MS-Excel E un programma che permette di effettuare:
Cascading Style Sheet CSS. Sintassi Css. Come inserire un foglio di stile. Fogli di stile esterni. Separazione contenuto/layout
Cascading Style Sheet CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. L'introduzione
Corso Base Informatica Lezione 6. 14/03/18 Corso Base Informatica Windows
Corso Base Informatica Lezione 6 Nella Lezione Precedente Programmi in Windows 7 Software Libero e Software Proprietario Installazione di programmi liberi Esercizi con Wordpad, cartelle e file Rimozione
Il foglio elettronico
Istituto Europeo Ricerca Formazione Orientamento Professionale Onlus Il foglio elettronico Docente: Filippo E. Pani I fogli elettronici L organizzazione a celle del foglio
CSS / TIPOGRAFIA WEB. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
CSS / TIPOGRAFIA WEB LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 GESTIRE I CARATTERI CON I CSS I CSS hanno dato un notevole impulso alla tipografia web visto che permettono di
Word Elaborazione di testi
Fondamenti di informatica Cos è Word? Word è un word processor WYSIWYG (What You See Is What You Get) in grado di soddisfare molte esigenze di word processing e desktop publishing Word Elaborazione di
Modulo 3 - Elaborazione Testi 3.4 Oggetti
Università degli Studi dell Aquila Corso ECDL programma START Modulo 3 - Elaborazione Testi 3.4 Oggetti Maria Maddalena Fornari Creare una tabella È possibile creare una tabella nel documento cliccando
Windows. La prima realizzazione di un ambiente grafico si deve alla Apple (1984) per il suo Macintosh. La gestione dei file conserva la logica del DOS
Windows La prima realizzazione di un ambiente grafico si deve alla Apple (1984) per il suo Macintosh La gestione dei file conserva la logica del DOS Funzionalità di un S.O. Gestione dei file Gestione dei
Stili e Formattazione in Word
10 Stili e Formattazione in Word In questo spazio ci soffermeremo su come Formattare il testo, Allineare il Testo, Inserire uno stile e Inserire Numeri di pagina. Formattare il testo Un testo subisce di
HTML - ESERCITAZIONE 1
HTML - ESERCITAZIONE 1 Impostazione - sfondo formattazione 1. Costruisci un file di testo e salvalo come pagina web (con estensione.htm) col nome: Cognome Nome 01. 2. Inserisci nella giusta posizione i
Alcune definizioni HTML CSS. Introduzione a HTML. November 13, HTML+CSS+Javascript
Introduzione a November 13, 2016 ++Javascript Outline 1 2 3 ++Javascript Internet vs Web Internet : rete fisica di dispositivi interconnessi. (ARPANET 1970) Web : applicativo di alto livello relativo a
Il giorno 18 febbraio 2013 verrà effettuato un esame finale (test) di verifica
Titolo del corso Docente Obiettivi del corso Principali argomenti Prerequisiti Sede Calendario Modalità di svolgimento Esame Finale Microsoft Word Livello base Giuseppe Contu Alla fine del corso l allievo
PRIMA DI PROCEDERE CON L ASCOLTO DELLE LEZIONI E DEGLI ESERCIZI COPIARE LA CARTELLA ESERCIZI SUL DESKTOP
PRIMA DI PROCEDERE CON L ASCOLTO DELLE LEZIONI E DEGLI ESERCIZI COPIARE LA CARTELLA ESERCIZI SUL DESKTOP SEQUENZA FILMATI ED ESERCIZI: 1. INIZIO 1) IL FOGLIO ELETTRONICO 2) NOZINI DI BASE DI EXCEL 2010
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. HTML non è un linguaggio di programmazione ma
Turismo POI. Manuale per il redattore
Turismo POI Manuale per il redattore Sommario 1. Introduzione... 2 Informazioni su questa guida... 2 Convenzioni... 3 2. Modifica di un POI... 3 2.1 Accesso alla scheda... 3 2.2 Presentazione della scheda
HTML. Hyper Text Mark-Up Language
HTML Hyper Text Mark-Up Language Cos è l HTML? È un linguaggio usato per descrivere documenti ipertestuali disponibili nel Web È un linguaggio di marcatura del testo che descrive il contenuto e il formato
LEZIONE NO. 3: LE TABELLE DI ATTILIO ABBIEZZI
HTML BASE LEZIONE NO. 3: LE TABELLE DI ATTILIO ABBIEZZI 1 gestire Tabelle La larghezza e l'altezza complessiva di una tabella viene indicata all'interno dell'attributo , il quale appunto