HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto
|
|
- Carmelo Santini
- 8 anni fa
- Visualizzazioni
Transcript
1 HTML5 Nel seguito troverai una breve introduzione agli elementi essenziali di HTML 5, non si tratta di una guida completa. Se conosci una precedente versione di HTML forse noterai alcune differenze. La modalità di creare pagine web è cambiata e si è evoluta negli ultimi 20 anni, per avere un web 'migliore' sono stati introdotti nuovi elementi e attributi e ne sono stati vietati degli altri che restano validi solo per consentire la visualizzazione di vecchie pagine web, ma sono espressamente vietati nella creazione di nuovi documenti. Ad esempio sono vietati: basefont, big, center, font, s, strike, tt, u, align e valign, background, bgcolor, cellpadding, border, cellspacing e molti altri. Vietati anche i tag per i frame, ritenuti dannosi per usabilità e accessibilità: frame, frameset e noframes. Per avere gli effetti di presentazione che prima di HTML5 venivano ottenuti con i tag ora vietati o per suddividere la pagina senza usare i frame è ora necessario usare i fogli di stile CSS(Cascading Style Sheet). Per maggiori informazioni visita: e INTRODUZIONE HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto Si usa per costruire pagine web definendo Contenuto Layout (aspetto grafico) di ogni pagina e memorizzandolo in un file di testo con estensione htm o html. Un file HTML contiene il testo della pagina e i tag (etichetta). I tag non fanno parte del testo e non sono visibili all utente che consulta le pagine web I tag sono racchiusi tra parentesi angolari: < >. 1
2 I tag definiscono la struttura della pagina sintassi generale : <tag> testo od oggetto da visualizzare </tag> Per ogni tag aperto deve esserci un tag chiuso ad eccezione di alcuni che prendono il nome di tag secchi la cui sintassi e': <tag /> I tag devono essere annidati, come le parentesi in una espressione matematica <html>... </html> contengono tutta la pagina. Struttura della pagina HTML Il documento HTML si suddivide in due parti: intestazione e corpo L intestazione è contenuta tra i tag <head> e </head> Contiene il titolo della pagina (<title>...</title>), l indicazione dell autore e altre informazioni. Il titolo e' quello che compare in piccolo nella barra superiore del browser Il corpo è racchiuso dai tag <body> e </body> contiene tutto il testo da visualizzare, i link ad altre pagine, a file, a immagini, etc. In una pagina html i tag <body> e </body> devono comparire una sola volta <!DOCTYPE html> <html> <head> <title>titolo </title>... </head> <body> Contenuto del corpo </body> </html> 2
3 Il tag <p> (paragraph paragrafo) In un documento html il testo è separato in paragrafi. Ogni paragrafo è contenuto all'interno del tag <p>, esempio <body> </body> <p> testo del primo paragrafo</p> <p> testo del secondo paragrafo</p> Il tag <br /> br sta per break (interruzione forzata di riga) Si tratta del comando vai a capo che permette di interrompere una riga e riprendere il testo nella riga successiva all'interno dello stesso paragrafo (questo tag è necessario poiché i browser non riconoscono il carattere di andata a capo). È un tag 'secco' apre e chiude Esempio: Creare una pagina con la prima terzina della Divina Commedia. <!DOCTYPE html> <html> <head> <title> Esempio </title> </head> <body> <p> Nel mezzo del cammin di nostra vita<br/> mi ritrovai per una Selva oscura <br/> che la diritta via era smarrita<br/> </p> </body> </html> 3
4 Esercizi Crea il file esempio.html con un editor di testo. Aggiungi le seguenti terzine e salva il file con il nome divina.html Ah quanto a dir qual è cosa dura esta selva selvaggia ed aspra e forte che nel pensier rinnova la paura! Tant'è amara che poco è più morte; ma per trattar del ben ch'i vi trovai, dirò de l'altre cose ch'i v'ho scorte Caratteri speciali Per la visualizzazione di alcuni caratteri speciali occorre utilizzare i seguenti codici (Entità di carattere speciali), altrimenti il browser potrebbe non essere in grado di interpretarli : Simbolo Codice < < > > spazio é é è è " " & & TM bisogna ricordarsi che tutte I codici iniziano con & e finiscono con ; inoltre i codici delle altre vocali si ottengono con la stessa regola mostrata sopra per la e 4
5 Titoli dei paragrafi Un titolo è l elemento di un paragrafo che deve distinguersi dal testo normale e deve risultare più evidente al lettore. Il titolo più importante che comprende tutto il testo viene individuato dal tag <h1>; seguono, in ordine di importanza e di evidenza, i sottotitoli <h2>, <h3>, <h4>, <h5>, <h6>. I titoli e sottotitoli sono raggrupati nel tag hgroup. Esempio: <!DOCTYPE html> <html> <body> <hgroup> <h1> titolo più importante </h1> <h2> sottotitolo più importante </h2> </hgroup> <p> testo del paragrafo </p> </body> </html> Esercizio Inserire nella pagina divina.html i titoli: DIVINA COMMEDIA INFERNO PRIMO CANTO 5
6 CSS Iniziamo ora a vedere come modificare lo stile dei paragrafi attraverso il CSS Per prima cosa bisogna sapere che esistono diversi modi per formattare gli elementi html con il CSS CSS inline Consiste nell'utilizzo dell'attributo globale style, chiamato globale perche' e' applicabile a tutti gli elementi html (body, p, h, etc) e non perche' modifica lo stile di tutti i tag di un certo tipo. Quindi notiamo bene che si tratta di un attributo dei tag e non di un tag. Per modificare il colore del testo di un paragrafo dovremmo procedere nel seguente modo: <p style= color:red; > testo paragrafo </p> Per modificare colore e sfondo del testo: <p style= color:red; background:yellow; > testo paragrafo</p> Per modificare il font di un paragrafo <p style= font-family:verdana > testo paragrafo</p> Modificare font e dimensione: <p style= font-family:verdana; font-size:10px> testo paragrafo</p> Gli elementi che appaiono fra gli apici dopo l'attributo style, prendono il nome di regole di stile, se dobbiamo definire più di una regola per un elemento html queste devono essere separate tra loro dal ; 6
7 Riepiloghiamo le regole viste finora e introduciamone delle nuove: color:valore background:valore font-family:valore font-size:valore text-align:valore text-decoration:valore definisce il colore del testo definisce lo sfondo definisce il font definisce la dimensione del carattere definisce l'allineamento (left, right, center, justify) definisce elementi decorativi per il testo (underline, line-throught, blink, overline) Esercizio Prova ora ad utilizzare le regole CSS appena viste riprendendo l'esercizio precedente e visualizzando ogni terzina con uno stile differente 7
8 Internal CSS (Fogli di stile Interni) Come abbiamo detto in precedenza, esistono altri modi per definire lo stile della pagina web. Un altro modo prende il nome di internal CSS, e consiste nel definire le regole di stile tramite il tag <style> all'interno della sezione <head>. Le regole definite attraverso questo tag modificano lo stile di tutti i tag di un certo tipo all'interno della pagina. A differenza del CSS inline di cui abbiamo parlato prima, in questo caso style e' un tag a se stante e non l'attributo di un altro tag. Attenzione deve esistere una sola sezione <style>...</style> in tutta la pagina Le regole di stile in questo caso vengono definite nel seguente modo: <!DOCTYPE html> <html> </html> <head> </head> <body> </body> <style type=valore> </style>... nome_elemento_html{ regole_stile;} nel nostro caso al posto di valore scriveremo sempre text/css nel seguente modo: <style type= text/css > Vediamo come definire lo sfondo di una pagina con i fogli di stile interni <style type= text/css > body { background-color: white; background-image: url(back_400.gif); background-repeat: repeat-x; background-attachment: fixed; } </style> 8
9 Riepiloghiamo i nuovi elementi di stile: background-color:valore background-image:url(path) background-repeat:valore background-attachment:valore background-position:valore definisce un colore di sfondo (termine inglese che definisce il colore: red, white, ecc) definisce un'immagine come sfondo stabilisce come si deve ripetere l'immagine di sfondo (repeat-x, repeat-y, repeat, no-repeat) stabilisce come deve scorrere l'immagine di sfondo (scroll, fixed) definisce la posizione dello sfondo (left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, x % y%, xpos ypos) Esercizio Prova anche questi elementi aggiungendo uno sfondo alla pagina dell'esercizio precedente 9
10 Per evidenziare il testo In modo che il testo appaia enfatizzato (corsivo) si usa il tag <em> - emphasis: enfasi <em> testo che deve comparire enfatizzato </em> In modo che il testo appaia in grassetto si usa il tag <strong> (forte): <strong> testo che deve comparire in grassetto </strong> Esercizio modifica la pagina divina.html in modo che una terzina appaia enfatizzata Liste Si usano per dare risalto a elenchi e liste, segnandone o numerandone le voci. Sono previste tre modalità diverse di creazione di elenchi: La lista disordinata che consiste in un elenco di elementi, ciascuno preceduto da un carattere speciale (es. un pallino nero); La lista ordinata dove ogni elemento è preceduto da un numero o da una lettera che indica la posizione dell'elemento all interno della lista; La lista di definizioni in cui ogni elemento è composto da due parti: una che indica il termine da definire e una che indica il testo della definizione. Per i primi due tipi di elenchi, si utilizzano due tag che segnalano l inizio dell elenco, rispettivamente <ul> (unordered list lista casuale) e <ol> (ordered list lista ordinata), e ogni elemento della lista è racchiusa tra i tag <li> e </li> (list item elemento della lista). 10
11 Esempio <!DOCTYPE html> <html> <body> <p>in base alle loro proprietà i quadrilateri possono essere:</p> <ol > <li> trapezi </li> <li> parallelogrammi </li> <li> rettangoli </li> <li> rombi </li> <li> quadrati </li> </ol > </body> </html> Esercizio Crea il file opere.html contenente il seguente elenco puntato: OPERE DI DANTE Vita Nuova Convivio De vulgari Eloquentia Commedia (Divina Commedia) Monarchia Epistole Egloghe Questio de aqua et terra Fiore Detto d'amore 11
12 Stile delle liste Attraverso il CSS possiamo definire in vari modi lo stile delle liste html. Le proprietà dedicate alla formattazione delle liste sono essenzialmente tre: list-style-type, list-style-position, list-style-image. Analizziamo meglio la sintassi e alcuni esempi list-style-type sintassi: Selettore {list-style-type:valore;} Si applica agli elementi <ol><ul><li> e al posto di valore possiamo inserire una delle seguenti scelte: per le liste non ordinate disc, circle, square per le liste ordinate decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha Esempio <!DOCTYPE html> <html> <body> <head> </head> <style> </style> ul {list-style-type:square;} ol {list-style-type:lower-roman;} <p>in base alle loro proprietà i quadrilateri possono essere:</p> <ul > </ul> <li> trapezi </li> <li> parallelogrammi </li> <li> rettangoli </li> <li> rombi </li> <li> quadrati </li> <p> i triangoli possono essere:</p> 12
13 <ol> </ol> </body> </html> <li> isosceli</li> <li> scaleni </li> <li> equilateri </li> Tabelle Per disporre delle informazioni in una tabella si usa il tag <table> con il relativo tag di chiusura </table> All interno della coppia <table> </table> vanno definite: 1. le righe che compongono la tabella con i tag <tr>... </tr> (table row riga di tabella) 2. in ogni riga si definiscono le celle di dati con i tag <td>... </td> (table data dati contenuti in una cella di una tabella) Intestazione della tabella E possibile definire una riga iniziale che contenga il nome di ogni colonna, le celle della riga di intestazione si distinguono dalle altre perché sono definite dai tag: <th> </th> (table header intestazione di tabella) in luogo di <td>... </td>. Il suo contenuto viene presentato in grassetto in modo automatico. 13
14 Esempio Realizzare in una pagina HTML la seguente tabella che riporta i cognomi e i ruoli dei dipendenti di una società. Rossi Bianchi Direttore Impiegato... <table> <tr> <th>cognome</th> <th>ruolo</th> </tr> <tr> <td>rossi</td> <td>direttore</td> </tr> <tr> <td> Bianchi </td> <td>impiegato</td> </tr> </table>... 14
15 Bordi delle tabelle Quando andiamo a visualizzare la nostra tabella attraverso il browser ci accorgeremo che appare senza alcun bordo che identifichi le varie celle della tabella, per ovviare a questo problema dobbiamo utilizzare anche in questo caso delle regole di stile che agiscono sui vari elementi della tabella Per specificare il bordo bisogna utilizzare le proprietà border-width, border-style, border-color proprietà applicabili ai tag <table>, <th>, <td>, <p>, etc. Noi in questo caso lo applicheremo ai tag <th> e <td> Esempio <!DOCTYPE html> <html> <head> <style> td, th{ border-width:1px; border-style:solid; border-color:black; } </style> </head> <body> <table> <tr> <th>cognome</th> <th>ruolo</th> </tr> <tr> <td>rossi </td> <td>direttore</td> </tr> <tr> <td>bianchi </td> <td>impiegato</td> </tr> </table> </body> </html> 15
16 Quando rivisualizziamo la tabella le celle appariranno separate fra loro per ovviare a questo problema dobbiamo impostare altre regole per unire fra loro i bordi delle varie celle: border-collapse, illustrato di seguito. Vediamo alcune altre proprietà applicabili alle tabelle border-collapse:valore border-spacing:valore padding:valore Definisce se I bordi dei vari elementi della tabella devono essere separati fra loro o sovrapporsi (separated, collapse) Definisce la distanza del bordo (della tabella o del paragrafo, etc) dai margini della pagina. Il valore deve essere espresso come coppia di valori in cui il primo rappresenta la distanza dal margine sinistro e la seconda dal margine superiore, per esempio: border-spacing: 10px 20px; per le tabelle funziona solo se uso la modalità separated Definisce la distanza del contenuto della cella dal suo bordo Il valore deve essere espresso come sequenza di quattro valori, alto destra basso sinistra, per esempio: border-padding: 10px 20px 15px 20px; 16
17 LINK I collegamenti ipertestuali o link, (più precisamente hyperlink), sono elementi attivi del documento HTML, per esempio un testo o un immagine, che indirizzano il browser ad un'altra pagina o al contenuto di un file. Il testo o l'immagine che si vuole usare come collegamento dovrà essere posto all'interno dei tag <a>...</a> occorre specificare la destinazione attraverso l'attributo href con la seguente sintassi: <a href= destinazione > testo da visualizzare </a> la destinazione puo' essere l'indirizzo (url) di un sito oppure il percorso di un file. In quest'ultimo caso il percorso deve essere relativo alla cartella in cui si trova la pagina che stiamo visitando. Quando costruiamo un sito con diverse pagine tutte le pagine secondarie devono contenere un link che riporti alla pagina principale Esempio <a href= > tiscali </a> Apre la pagina di tiscali. Se la destinazione del link è una pagina interna allo stesso sito <a href= percorso_relativo_pagina > testo da visualizzare </a> Esempio <a href= opere.html > opere </a> Apre la pagina 'opere' il cui file è contenuto nella stessa directory. Esercizio Nel file divina.html crea un link al file opere.html Nel file opere.html crea un link al file divina.html 17
18 IMMAGINI Per l inserimento di un immagine si usa il tag <img> (image immagine) é sempre necessario usare gli attributi: src che serve per specificare la posizione del file che contiene l immagine. alt in modo che in alternativa alla figura compaia una breve descrizione che ne spieghi il contenuto se il browser non consente la visualizzazione dell immagine. Come <br /> anche <img> e' un tag secco. Scrivendo: <img src= cane.gif alt= Disegno di un cane /> src specifica che il file cane.gif che contiene l'immagine è nella stessa directory del file html alt specifica che, in alternativa alla figura, se il browser non consente la visualizzazione, compaia la descrizione: 'Disegno di un cane' Se tutte le immagini del sito sono contenute nella directory 'immagini' si dovrà scrivere: <img src= immagini/cane.gif alt= Disegno di un cane /> Esercizio aggiungi l'immagine di Dante alla pagina divina.html Dimensione delle immagini Per definire la dimensione dell'immagine si usano le regole di stile: width specifica il valore in pixel della larghezza dell'immagine height specifica il valore in pixel della altezza dell'immagine 18
19 Specificando uno solo dei due valori l'altro verrà impostato automaticamente dal browser, esempio: <img src= cane.gif alt= Disegno cane style= width:200px; /> Quando si inserisce un immagine in una pagina web si dovrebbero utilizzare i formati GIF JPG PNG Le immagini devono essere di dimensioni contenute, max 100 kbyte, per le più grandi. 19
Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language
Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML Elisa Quintarelli-Laura Mandelli 1 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized
DettagliAPPUNTI DI HTML (SECONDA LEZIONE)
APPUNTI DI HTML (SECONDA LEZIONE) 1. TITOLI, PARAGRAFI, BLOCCHI DI TESTO E CONTENITORI. E utile scrivere il testo che vogliamo inserire nella nostra pagina html all interno di appositi tag. La pagina sarà
DettagliTutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali
DettagliLEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONI DI HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... FORMATTARE IL CARATTERE Per formattare titoli interni del documento web possiamo utilizzare i tag , ,...,
DettagliIntroduzione HTML. Maurizio Palesi. Multimedialità - Maurizio Palesi 1
Introduzione HTML Maurizio Palesi Multimedialità - Maurizio Palesi 1 Generalità sull HTML HTML: HyperText Markup Language (linguaggio di marcatura ipertestuale) E il linguaggio che permette di descrivere
DettagliIntroduzione al Linguaggio HTML
Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la
DettagliLinguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:
Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:
DettagliHTML per tu+ Chiara Pere+
HTML per tu+ Chiara Pere+ Cos é L HTML è il linguaggio con cui potete indicare come i vari elemen7 saranno dispos7 in una pagina Web. L estensione del file è.html e verrà visualizzato corre?amente trascinandolo
DettagliComandi principali del linguaggio HTML (Hyper Text Markup Language)
Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per
DettagliManuale 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
DettagliLEZIONE 1 HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONE 1 HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... La struttura di una pagina web intestazione Qui si dichiara il titolo del documento
DettagliCMS MUSEO&WEB. Mappe grafiche. Andrea Tempera (OTEBAC) 12 aprile 2010
CMS MUSEO&WEB Mappe grafiche Andrea Tempera (OTEBAC) 12 aprile 2010 Introduzione Grazie ad appositi tag HTML possiamo associare molteplici collegamenti a differenti zone di un'unica immagine; un'immagine
DettagliI link e l'ipertestualità
I link e l'ipertestualità I link sono "il ponte" che consente di passare da un documento all altro. In quanto tali, i link sono formati da due componenti: il contenuto che "nasconde" il collegamento (può
DettagliHTML+XML= XHTML. Che cos è l XHTML
HTML+XML= XHTML Il ritorno al futuro del WEB A cura di Barbara Lotti Che cos è l XHTML Nel gennaio del 2000 il W3C ha rilasciato, anziché una nuova versione, una riformulazione dell HTML come applicazione
DettagliHTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...
HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento
Dettagli- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.
I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come
DettagliPer 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,
DettagliIl linguaggio HTML - Parte 2
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza
DettagliIl linguaggio HTML - Parte 4
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 4 Dott. Chiara Braghin braghin@dti.unimi.it HTML - I Riferimenti Ipertestuali Il piatto forte di tutto
DettagliHTML 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
DettagliIntroduzione all'html
Introduzione all'html WWW (World Wide Web) SGML (Standard Generalized Markup Language) Linguaggi per la descrizione astratta di documenti. HTML (HyperText Markup Language) HTML è un caso particolare di
DettagliIl linguaggio HTML - Nozioni di base
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghin braghin@dti.unimi.it What is HTML? HTML (HyperText Markup Language)
DettagliIpertesti. Informatica. Internet e WEB WEB. Come funziona il WWW. Come funziona il WWW. Lezione III. Il linguaggio HTML Hyper Text Murkup Language
Informatica Lezione III Il linguaggio HTML Hyper Text Murkup Language Ipertesti Sono testi che possono essere letti sia in modo sequenziale sia eseguendo salti da un paragrafo ad un altro Sono il soggetto
DettagliGuida all uso di Java Diagrammi ER
Guida all uso di Java Diagrammi ER Ver. 1.1 Alessandro Ballini 16/5/2004 Questa guida ha lo scopo di mostrare gli aspetti fondamentali dell utilizzo dell applicazione Java Diagrammi ER. Inizieremo con
DettagliXSL: extensible Stylesheet Language
XSL: extensible Stylesheet Language XSL è un insieme di tre linguaggi che forniscono gli strumenti per l elaborazione e la presentazione di documenti XML in maniera molto flessibile. I tre linguaggi devono
DettagliSettaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template.
I TEMI PREDEFINITI (TEMPLATE) Scelta del tema I temi predefiniti di wordpress sono la base di un sito che usa un utente che per ragioni pratiche o per incapacità non può creare un sito usando solo codice
DettagliFISH Sardegna ONLUS. www.fishsardegna.org. Manuale Utente. www.fishsardegna.org
FISH Sardegna ONLUS Manuale Utente Note generali: Il sito è costruito su CMS Drupal 7. Per avere maggiori informazioni su Drupal si puo consultare online il portale ufficiale http://drupal.org/( in inglese)
DettagliCapitolo 3. L applicazione Java Diagrammi ER. 3.1 La finestra iniziale, il menu e la barra pulsanti
Capitolo 3 L applicazione Java Diagrammi ER Dopo le fasi di analisi, progettazione ed implementazione il software è stato compilato ed ora è pronto all uso; in questo capitolo mostreremo passo passo tutta
DettagliUTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.
UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui
DettagliCorso 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
Dettaglilo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000
Capittol lo 2 Visualizzazione 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Nel primo capitolo sono state analizzate le diverse componenti della finestra di Word 2000: barra del titolo, barra dei menu,
DettagliLogin. Gestione contenuto. www.sitofaidate.it
www.sitofaidate.it Questa guida è stata scritta per utenti di basso/medio livello, guida pratica per chi vede per la prima volta l editor di testo jce i cui riferimenti delle icone sono visibili cliccando
DettagliHTML SITI WEB. FEQUENZA OBBLIGATORIA 80% ESERCITAZIONI (laboratorio) RICONOSCIMENTO 3 CFU. infolab@uniroma3.it host.uniroma3.it/laboratori/infolab
HTML SITI WEB FEQUENZA OBBLIGATORIA 80% ESERCITAZIONI (laboratorio) RICONOSCIMENTO 3 CFU infolab@uniroma3.it host.uniroma3.it/laboratori/infolab INTERNET Generalmente Internet è definita la rete delle
DettagliMANUALE PER L UTILIZZO DELLA FUNZIONE EVENTI Rel.1.2 del 29 gennaio 2004
MANUALE PER L UTILIZZO DELLA FUNZIONE EVENTI Rel.1.2 del 29 gennaio 2004 PRELIMINARE - Avete digitato la password che Vi è stata attribuita e siete entrati nell area riservata all AMMINISTRAZIONE del Vostro
DettagliCREAZIONE E MODIFICA DELLA PAGINA WEB DELLA BIBLIOTECA Andare nel modulo Biblioteche in alto a sinistra. Digitare nel campo Nome Biblioteca la
CREAZIONE E MODIFICA DELLA PAGINA WEB DELLA BIBLIOTECA Andare nel modulo Biblioteche in alto a sinistra. Digitare nel campo Nome Biblioteca la denominazione del Comune della Biblioteca (basta anche solo
DettagliEsercitazione 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
DettagliPrimi passi con HTML. Il documento HTML
Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.
DettagliHTML 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
DettagliGuida html e css base
Sommario Guida html e css base...1 Introduzione...1 Formattare il testo...4 Organizzare il testo in paragrafi...5 Creare le sezioni come in un libro...6 Creare gli elenchi...8 Inserire immagini e collegamenti...11
DettagliItis Cardano. Introduzione a HTML. Pavia. M. Rivera Itis Cardano Pavia. A.s. 2005-2006
Introduzione a HTML A.s. 2005-2006 M. Rivera Itis Cardano Pavia Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali
DettagliIntroduzione al linguaggio HTML. A. Lorenzi - Università di Bergamo - Facoltà di Economia 1
Introduzione al linguaggio HTML A. Lorenzi - Università di Bergamo - Facoltà di Economia 1 Richiami introduttivi (1) sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno
Dettagli3.5.1.1 Aprire, preparare un documento da utilizzare come documento principale per una stampa unione.
Elaborazione testi 133 3.5 Stampa unione 3.5.1 Preparazione 3.5.1.1 Aprire, preparare un documento da utilizzare come documento principale per una stampa unione. Abbiamo visto, parlando della gestione
Dettagli1. Le macro in Access 2000/2003
LIBRERIA WEB 1. Le macro in Access 2000/2003 Per creare una macro, si deve aprire l elenco delle macro dalla finestra principale del database: facendo clic su Nuovo, si presenta la griglia che permette
DettagliCorso 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
DettagliGuida Joomla. di: Alessandro Rossi, Flavio Copes
Guida Joomla di: Alessandro Rossi, Flavio Copes Grafica e template 1. 15. La grafica e i template Personalizzare l'aspetto del sito aggiungendo nuovi template e customizzandoli 2. 16. Personalizzare il
DettagliLanguage. info@settingweb.it. www.settingweb.it
HTML HyperText Markup Language Documenti ipertestuali Sono formati da documenti multimediali: testo, immagini, suoni, video, ecc Comprendono le seguenti parti: contenuto struttura presentazione Che cos
Dettagliwww.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
DettagliEsercizi. Introduzione all HTML. Il WWW
Politecnico di Milano Esercizi Introduzione all HTML Il WWW Il World Wide Web: una rete di pagine connesse tra loro e distribuite su diverse macchine Il server Web contiene le pagine Web da visualizzare
DettagliINTRODUZIONE 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
DettagliLinguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML
Reti Linguaggio HTML 1 HTML = Hypertext Markup Language E il linguaggio usato per descrivere documenti ipertestuali Ipertesto = Testo + elementi di collegamento ad altri testi (link) Linguaggio di markup:
DettagliAlla scoperta della nuova interfaccia di Office 2010
Alla scoperta della nuova interfaccia di Office 2010 Una delle novità più eclatanti della versione 2007 era la nuova interfaccia con la barra multifunzione. Office 2010 mantiene questa filosofia di interfaccia
DettagliFormattazione e Stampa
Formattazione e Stampa Formattazione Formattazione dei numeri Formattazione del testo Veste grafica delle celle Formattazione automatica & Stili Formattazione dei numeri Selezionare le celle, poi menu:
DettagliIntroduzione. Portare HTML nella famiglia XML Mantenere compatibilità con i software che supportano HTML
Lezione 8 XHTML Introduzione " XHTML = HTML + XML " HTML: linguaggio di marcatura per presentare i contenuti di una pagina web " XML: super-linguaggio che consente la creazione di nuovi linguaggi di marcatura
DettagliTutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 3 Immagini in documenti HTML 3.1 Rappresentazione delle
DettagliChe cos'è un modulo? pulsanti di opzione caselle di controllo caselle di riepilogo
Creazione di moduli Creazione di moduli Che cos'è un modulo? Un elenco di domande accompagnato da aree in cui è possibile scrivere le risposte, selezionare opzioni. Il modulo di un sito Web viene utilizzato
DettagliHTML. Breve manuale d uso
HTML Breve manuale d uso Come funziona il linguaggio Html? Queste sono le domande cui le lezioni e questo manuale intendono dare una risposta INDICE HTML BREVE GUIDA INTRODUTTIVA...3 1 - COS'E' UN FILE
DettagliMS Word per la TESI. Barra degli strumenti. Rientri. Formattare un paragrafo. Cos è? Barra degli strumenti
MS Word per la TESI Barra degli strumenti Cos è? Barra degli strumenti Formattazione di un paragrafo Formattazione dei caratteri Gli stili Tabelle, figure, formule Intestazione e piè di pagina Indice e
DettagliTEMI - Struttura. I file del tema
TEMI - Struttura - Ci sono due possibilità per modificare un tema: - Tramite l editor di amministrazione (AspettoàEditor), che consente di selezionare modificare i file (NOTA: copiare il file prima di
DettagliNell esempio verrà mostrato come creare un semplice documento in Excel per calcolare in modo automatico la rata di un mutuo a tasso fisso conoscendo
Nell esempio verrà mostrato come creare un semplice documento in Excel per calcolare in modo automatico la rata di un mutuo a tasso fisso conoscendo - la durata del mutuo in anni - l importo del mutuo
DettagliManuale Utente Albo Pretorio GA
Manuale Utente Albo Pretorio GA IDENTIFICATIVO DOCUMENTO MU_ALBOPRETORIO-GA_1.4 Versione 1.4 Data edizione 04.04.2013 1 TABELLA DELLE VERSIONI Versione Data Paragrafo Descrizione delle modifiche apportate
DettagliCos è 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
DettagliAppunti 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
DettagliEUROPEAN COMPUTER DRIVING LICENCE SYLLABUS VERSIONE 5.0
Pagina I EUROPEAN COMPUTER DRIVING LICENCE SYLLABUS VERSIONE 5.0 Modulo 3 Elaborazione testi Il seguente Syllabus è relativo al Modulo 3, Elaborazione testi, e fornisce i fondamenti per il test di tipo
Dettagli2.2.2.1 Identificare le diverse parti di una finestra: barra del titolo, barra dei menu, barra degli strumenti, barra di stato, barra di scorrimento.
Uso del computer e gestione dei file 57 2.2.2.1 Identificare le diverse parti di una finestra: barra del titolo, barra dei menu, barra degli strumenti, barra di stato, barra di scorrimento. All interno
DettagliCATALOGO E-COMMERCE E NEGOZIO A GRIGLIA
CATALOGO E-COMMERCE E NEGOZIO A GRIGLIA In questo tutorial verrà illustrato come sfruttare la flessibilità del componente "Catalogo E-commerce" per realizzare un classico negozio a griglia, del tipo di
DettagliIL MIO PRIMO SITO: NEWS
Pagina 1 IL MIO PRIMO SITO: NEWS Sommario IL MIO PRIMO SITO: NEWS...1 Introduzione...2 I Contenitori...2 Creo un Contenitore...3 I Tracciati...4 Creo le Notizie...6 Inserisco il Testo...6 Inserisco un
DettagliFigura 54. Visualizza anteprima nel browser
Per vedere come apparirà il nostro lavoro sul browser, è possibile visualizzarne l anteprima facendo clic sulla scheda Anteprima accanto alla scheda HTML, in basso al foglio. Se la scheda Anteprima non
DettagliExcel. A cura di Luigi Labonia. e-mail: luigi.lab@libero.it
Excel A cura di Luigi Labonia e-mail: luigi.lab@libero.it Introduzione Un foglio elettronico è un applicazione comunemente usata per bilanci, previsioni ed altri compiti tipici del campo amministrativo
DettagliMANUALE D USO DELLA PIATTAFORMA ITCMS
MANUALE D USO DELLA PIATTAFORMA ITCMS MANULE D USO INDICE 1. INTRODUZIONE... 2 2. ACCEDERE ALLA GESTIONE DEI CONTENUTI... 3 3. GESTIONE DEI CONTENUTI DI TIPO TESTUALE... 4 3.1 Editor... 4 3.2 Import di
DettagliConcetti Fondamentali
EXCEL Modulo 1 Concetti Fondamentali Excel è un applicazione che si può utilizzare per: Creare un foglio elettronico; costruire database; Disegnare grafici; Cos è un Foglio Elettronico? Un enorme foglio
DettagliBrescianet.com Sito didattico - Prof. Sechi Marco. II Modulo - Classe 3O. Accoda qui le risposte. differenze per aree sovrapposte.
Brescianet.com Sito didattico - Prof. Sechi Marco FAQ Cerca Lista degli utenti Gruppi utenti Registrati Profilo Entra per controllare i messaggi privati Entra II Modulo - Classe 3O Indice del forum ->
DettagliPULSANTI E PAGINE Sommario PULSANTI E PAGINE...1
Pagina 1 Sommario...1 Apertura...2 Visualizzazioni...2 Elenco...2 Testo sul pulsante e altre informazioni...3 Comandi...3 Informazioni...4 Flow chart...5 Comandi...6 Pulsanti Principali e Pulsanti Dipendenti...6
DettagliCreare documenti XML. La natura epistemologica della codifica. Perché comprare XML? La struttura gerarchica ordinata. Riassumendo le componenti
Lez. 7 Creare documenti XML La codifica deve raggiungere 2 traguardi: Accessibilità tecnica Permanenza a lungo termine 05/03/12 Perché comprare XML La natura epistemologica della codifica HTML Descrive
DettagliCOME 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
DettagliHTML. giovedì 22 settembre 11
HTML Webmaster con strumenti Open Source AGENDA HTML/XHTML Introduzione Html Struttura di una pagina Html Fogli di stile (CSS) HTML/XHTML L'organizzazione che si occupa di standardizzare la sintassi del
DettagliManuale per i redattori del sito web OttoInforma
Manuale per i redattori del sito web OttoInforma Contenuti 1. Login 2. Creare un nuovo articolo 3. Pubblicare l articolo 4. Salvare l articolo in bozza 5. Le categorie 6. Modificare un articolo 7. Modificare
DettagliDipartimento di Ingegneria Civile e Ambientale TYPO 3 MANUALE UTENTE
Dipartimento di Ingegneria Civile e Ambientale TYPO 3 MANUALE UTENTE Sommario 1) Introduzione... 3 2) Come richiedere l autorizzazione alla creazione di pagine personali... 3 3) Frontend e Backend... 3
DettagliLA 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
DettagliUso di base delle funzioni in Microsoft Excel
Uso di base delle funzioni in Microsoft Excel Le funzioni Una funzione è un operatore che applicato a uno o più argomenti (valori, siano essi numeri con virgola, numeri interi, stringhe di caratteri) restituisce
DettagliInformatica per la comunicazione" - lezione 10 -
Informatica per la comunicazione" - lezione 10 - Evoluzione del Web" Nell evoluzione del Web si distinguono oggi diverse fasi:" Web 1.0: la fase iniziale, dal 1991 ai primi anni del 2000" Web 2.0: dai
DettagliINTRODUZIONE ALL HTML
INTRODUZIONE ALL HTML LE REGOLE GENERALI Di seguito, sono raccolti i tag html (comandi) di uso più frequente per la formattazione dei testi e la gestione di una pagina web all interno del nostro sistema
DettagliPersonalizza. Page 1 of 33
Personalizza Aprendo la scheda Personalizza, puoi aggiungere, riposizionare e regolare la grandezza del testo, inserire immagini e forme, creare una stampa unione e molto altro. Page 1 of 33 Clicca su
DettagliCome costruire una presentazione. PowerPoint 1. ! PowerPoint permette la realizzazione di presentazioni video ipertestuali, animate e multimediali
PowerPoint Come costruire una presentazione PowerPoint 1 Introduzione! PowerPoint è uno degli strumenti presenti nella suite Office di Microsoft! PowerPoint permette la realizzazione di presentazioni video
Dettagli[Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina
[Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina Creare cartelle per salvare il lavoro] Per iniziare dobbiamo imparare a gestire quello spazio bianco che diverrà la
DettagliPROGRAMMA GESTIONE TURNI MANUALE UTENTE. Programma Gestione Turni Manuale Utente versione 1.1
PROGRAMMA GESTIONE TURNI MANUALE UTENTE INDICE 1 PREMESSA 3 2 COMANDI COMUNI 3 3 SEDI 3 4 FESTIVITÀ 4 5 PERIODI TURNI 4 6 COD. TURNI 6 7 TURNI SPORTIVI 9 8 COD. EQUIPAGGI 9 9 DISPONIBILITÀ 10 10 INDISPONIBILITÀ
DettagliModuli (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
DettagliIL MIO PRIMO SITO NEWS USANDO GLI SCHEDARI
Pagina 1 UN SISTEMA DI NEWS Sommario UN SISTEMA DI NEWS...1 Introduzione...2 Scelgo l'area su cui operare...3 Un minimo di teoria...3 Creo le Pagine...4 Definizione dello Schedario Novità...6 Compilo la
DettagliLa pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.
Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,
DettagliNavigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Terza lezione) Unitre Pavia a.a.
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Terza lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 La struttura del testo in html L'HTML fornisce una serie
DettagliLA FINESTRA DI EXCEL
1 LA FINESTRA DI EXCEL Barra di formattazione Barra degli strumenti standard Barra del titolo Barra del menu Intestazione di colonna Contenuto della cella attiva Barra della formula Indirizzo della cella
DettagliMicrosoft Word. Nozioni di base
Microsoft Word Nozioni di base FORMATTARE UN DOCUMENTO Gli stili Determinano l aspetto dei vari elementi di testo di un documento Consistono in una serie di opzioni (predefinite o personalizzate) salvate
DettagliLa grafica con Word. La parte evidenziata è una Riga. La parte evidenziata è una Colonna. La parte evidenziata è una Cella
9 La grafica con Word Lezione 09 Word non è un programma di grafica e, pertanto, non può sostituire i programmi che sono abilitati alle realizzazioni grafiche. Nonostante tutto, però, la grafica in Word
DettagliCapitolo 4 Pianificazione e Sviluppo di Web Part
Capitolo 4 Pianificazione e Sviluppo di Web Part Questo capitolo mostra come usare Microsoft Office XP Developer per personalizzare Microsoft SharePoint Portal Server 2001. Spiega come creare, aggiungere,
DettagliCreare un nuovo articolo sul sito Poliste.com
Creare un nuovo articolo sul sito Poliste.com Questa breve guida ti permetterà di creare dei nuovi articoli per la sezione news di Poliste.com. Il sito Poliste.com si basa sulla piattaforma open-souce
DettagliIntroduzione 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 Progettare un
DettagliCimini Simonelli - Testa
WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire
Dettagli(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE
Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA
DettagliMANUALE 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