Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 1

Save this PDF as:
 WORD  PNG  TXT  JPG

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 1"

Transcript

1 Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 1

2 IL LINGUAGGIO HTML Html è il linguaggio con cui le pagine web vengono scritte e progettate, anche se molti progettisti si rifiutano di pensare all'html come ad un linguaggio di layout. In effetti l'html non è nato per essere un linguaggio di progettazione, ma per essere un linguaggio di visualizzazione, che possa essere mostrato in modo diverso a seconda dei diversi computer e dei diversi sistemi operativi. L'Html, però, che ci piaccia o meno, è il linguaggio del web e quindi se si vuole costruire un sito o una pagina web bisogna conoscerlo. Magari non è necessario conoscere tutti i tag e tutti gli attributi, anche perchè oggi disponiamo di editor WYSIWYG molto potenti e precisi, ma conoscere almeno a grandi linee il linguaggio Html è fondamentale e risulta di grande aiuto nella realizzazione di qualunque progetto web. Un file HTML non è altro che un file di testo (definito genericamente "puro testo" o "testo ASCII"), sostanzialmente identico ai file di tipo TXT che si possono scrivere con un comune editor di testo, come il blocco note di windows. Per funzionare come pagina web, questo file di testo deve essere rinominato con il suffisso.html o.htm e deve contenere, oltre al testo vero e proprio, anche le istruzioni che consentono al browser di riconoscerlo e gestirlo correttamente. Queste istruzioni sono chiamate Tag (marcatori). Un tag è un comando racchiuso tra i segni < (minore) e > (maggiore), chiamati anche parentesi angolari. Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo. Nella maggior parte dei casi i tag funzionano in coppia, richiedono cioè un'istruzione d'apertura ed una di chiusura secondo lo schema: <TAG DI INIZIO>elemento Cui si applica l istruzione</tag DI FINE> È anche possibile includere coppie di tag all'interno d'altre coppie di tag mantenendo una sequenza simmetrica. A titolo d'esempio, il tag <B> identifica il grassetto ed il tag <I> il corsivo. Così per formattare in grassetto e corsivo una parola si deve scrivere: <B><I>Testo</I></B> oppure: <I><B>Testo</B></I> ma non: <B><I>Testo</B></I> I tag in generale possono contenere attributi che ne definiscono determinate proprietà. Ogni attributo può assumere differenti valori. Quasi tutti i tag prevedono attributi che sono specifiche aggiuntive che ne influenzano il risultato. La sintassi è: <TAG ATTRIBUTO="valore">; ad esempio: <IMG SRC="foto.jpg">. Le virgolette che racchiudono il valore di un attributo a volte sono obbligatorie ed a volte no. In ogni caso sono sempre accettabili anche quando non sono necessarie. Come già detto, per creare un file HTML è sufficiente un editor di testo come il blocco note di Windows. Conoscendo bene il linguaggio HTML si può abbozzare una pagina o un intero sito con un editor WYSIWYG e in seguito apportare a mano al codice HTML generato tutti i ritocchi necessari per raffinare e perfezionare ulteriormente i risultati. Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 2

3 I tag essenziali La struttura essenziale di ogni pagina web e costituita da: I tag <HTML> e </HTML> all'inizio ed alla fine del documento; essi indicano al browser che tutto ciò che è compreso nel mezzo è una pagina web. I tag <HEAD> e </HEAD> racchiudono l'intestazione del documento dove si possono inserire informazioni che non vengono visualizzate nella pagina, ma che ne descrivono caratteristiche come titolo, autore e parole-chiave. Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo. I tag <BODY> e </BODY> racchiudono il corpo del documento dove si inserisce il contenuto da visualizzare nella pagina (testo, collegamenti, immagini e così via). Esempio di pagina web vuota: <HTML> <HEAD> Sezione relativa all intestazione </HEAD> <BODY> Sezione relativa al corpo vero e proprio del documento </BODY> </HTML> <!- commento ->: questo tag consente di commentare alcune parti del codice della pagina e può essere inserito in qualsiasi punto. Quando nel codice HTML si inseriscono questi tag aggiuntivi bisogna fare sempre attenzione a non accrescere esageratamente ed inutilmente le dimensioni della pagina che incidono sensibilmente sui tempi di trasmissione, caricamento e visualizzazione nel browser. I tag di intestazione I tag di intestazione sono:<title> e <META>. Con <TITLE> si definisce il titolo della pagina web. Il titolo appare sulla barra superiore della finestra del browser quando la pagina viene visualizzata durante la navigazione. Questo tag richiede un'istruzione di apertura ed una di chiusura. La sintassi corretta è: <HEAD> <TITLE>Titolo della pagina</title> </HEAD> È buona norma specificare il titolo di ogni pagina web perché una pagina senza titolo è anonima e poco professionale. Non è possibile inserire nella stessa intestazione più di un tag <TITLE>. Mediante il tag <META> si possono inserire nell'intestazione dei dati che non vengono visualizzati nella pagina ma servono al browser e ai motori di ricerca per gestirne i contenuti in modo più efficace. È possibile specificare con il tag <META> informazioni come: il nome dell'autore della pagina, una breve descrizione dei contenuti della pagina ed un elenco schematico di parole-chiave legate ai contenuti. Il tag <META> non richiede chiusura ma l'aggiunta di alcuni attributi e dei rispettivi valori. Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 3

4 La sintassi generica è: <META ATTRIBUTO1= VALORE ATTRIBUTO2= VALORE > dove la voce ATTRIBUTO1 serve ad indicare il tipo di informazione e la voce ATTRIBUTO2 serve a specificare il contenuto concreto della meta-informazione. Per inserire nell'intestazione il nome dell'autore si utilizza: <META NAME=author CONTENT= nome e cognome > Per inserire nell'intestazione una descrizione del documento si utilizza: <META NAME=description CONTENT= breve descrizione della pagina > Per inserire nell'intestazione un elenco di parole-chiave che specificano l'argomento della pagina si utilizza: <META NAME=keywords CONTENT= parola1, parola2, parola3, parola4 > Le parole chiave possono essere separate sia da spazi che da virgole; alcuni motori di ricerca prediligono la prima tecnica, altri la seconda. Il tag BODY La sezione <BODY> è il corpo principale del documento HTML dove vanno inseriti tutti i contenuti che devono apparire nella pagina web. Vedremo adesso alcune caratteristiche generali del corpo del documento, come lo sfondo della pagina, il colore del testo ed il colore dei collegamenti ipertestuali, che possono essere specificate mediante attributi da aggiungere al tag <BODY>. Per impostare un colore come sfondo della pagina web si usa l'attributo BGCOLOR. Se vogliamo realizzare una pagina con lo sfondo nero scriveremo allora: <BODY BGCOLOR= # > dove il codice del colore è in formato esadecimale. Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale: <BODY BGCOLOR= black > Questa però non è una pratica comune perché non tutti i browser sono in grado di interpretare correttamente tale genere di espressione. È possibile impostare come sfondo della pagina web un'immagine in formato GIF o JPEG utilizzando l'attributo BACKGROUND secondo la sintassi: <BODY BACKGROUND= percorso e nome del file > Se l'immagine si trova nella stessa cartella della pagina HTML e si chiama sfondo.gif scriveremo: <BODY BACKGROUND= sfondo.gif > Inserendo un'immagine come sfondo della pagina web, questa viene automaticamente replicata dal browser in modo da coprire l'intero spazio visibile. Allora è opportuno scegliere un'immagine che si presti ad essere replicata e affiancata in un numero indefinito di copie, senza che si vedano le giunture o si creino stacchi poco estetici. Per impostare a priori il colore del testo del testo della pagina si usa l'attributo <TEXT> secondo la sintassi: Se non specificato, il colore di default del testo è il nero. <BODY TEXT= #codice del colore > Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 4

5 Tramite gli attributi del tag <BODY> si possono definire anche i colori dei collegamenti ipertestuali. I colori da definire sono tre: per i collegamenti ipertestuali in condizioni normali si usa l'attributo LINK="codice del colore"; per i collegamenti attivi, nel momento cioè in cui vi si fa clic, si usa l'attributo ALINK="codice del colore"; per i collegamenti già visitati si usa l'attributo VLINK="codice del colore". In pratica per personalizzare il colore dei collegamenti la sintassi è: <BODY LINK= colore1 ALINK= colore2 VLINK= colore3 > Paragrafi (Tag BR, P) Quando si scrive il codice HTML, per mandare a capo il testo che segue non basta premere il tasto Invio. Anche se nel codice una frase sembra andare a capo, ciò non accade una volta che la pagina viene visualizzata nel browser. Per mandare a capo il testo di una pagina web si usano i tag <BR>, <P>. Il tag <BR> equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag <BR> non richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo. Il tag <P> crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo precedente. Il tag <P> deve ess er e usato con la rispettiva chiusura </P>. Allineamenti di testo Per impostare gli allineamenti di testo che valgono paragrafo per paragrafo si usa l'attributo ALIGN del tag <P> secondo la sintassi: <P ALIGN= valore >paragrafo da allineare</p> dove il valore di ALIGN può essere: left per l'allineamento a sinistra, center per l'allineamento al centro, right per l'allineamento a destra, justify per l'allineamento giustificato. L'allineamento a sinistra è quello predefinito, quindi specificare l'attributo ALIGN="left" è superfluo, mentre il valore justify è stato introdotto a partire da Html 4.0 e quindi non tutti i browser sono in grado di interpretarlo correttamente. Formattazione I tag per la formattazione del testo si suddividono in stili fisici e stili logici. Gli stili fisici sono tag definiscono in modo univoco gli attributi grafici dei caratteri. I principali tag fisici sono: <B>... </B>: testo in grassetto; <I>... </I>: testo in corsivo; <U>... </U>: testo sottolineato; <SUP>... </SUP>: testo apice ; <SUB>... </SUB>: testo pedice. <Q> </Q>: citazione breve tra apici; <CITE>.</CITE>: il testo viene visualizzato in corsivo Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 5

6 Usare il tag <U>... </U> è sconsigliabile perché un testo sottolineato può creare confusione con i collegamenti ipertestuali che solitamente appaiono sottolineati. Scegliere il font del testo Il tipo di carattere (cioè il "font") che il browser visualizza di default è il "Times New Roman". Purtroppo questo carattere (ottimo per la carta stampata) non è adatto a essere visualizzato sul monitor di un computer: è una questione di "grazie" (le grazie sono quegli abbellimenti tipografici delle lettere, che dovrebbero servire per rendere più leggibile il carattere). Dal momento che i caratteri con grazie non ottengono il risultato voluto sul monitor (quello cioè di rendere le lettere maggiormente riconoscibili e di conseguenza il testo più leggibile), ma anzi ottengono l effetto contrario, si preferisce di solito utilizzare dei caratteri senza grazie come il "Verdana", l "Arial" o l "Helvetica". E bene sottolineare da subito che non è possibile far sì che l utente visualizzi un testo in un carattere fantasioso scelto da noi. Allo stato attuale dell arte l utente che naviga in internet può visualizzare solo i caratteri che sono installati nel suo sistema: in Windows si tratta dei caratteri presenti in: Pannello di controllo > Tipi di caratteri. Se ad esempio scarichiamo dal nostro archivio preferito di font il carattere «Hackers» e lo inseriamo nella cartella dei caratteri, saremo poi in grado di visualizzare sul nostro computer il testo in Hackers. Per questo motivo è bene tener conto di due accorgimenti: scegliere caratteri "sicuri", che siano cioè senz altro presenti sul pc dell utente non indicare un solo carattere, ma una serie di caratteri che gradualmente si allontanano dal risultato che vorremmo ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. In questo modo il browser dell utente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al secondo, e solo come ultima spiaggia sceglierà si utilizzare il carattere predefinito (il famigerato "Times") Vediamo alcuni esempi di famiglie "sicure" di caratteri: <font face="verdana, Arial, Helvetica, sans-serif">verdana e caratteri simili</font> <font face="arial, Helvetica, sans-serif">arial e caratteri simili</font> <font face="times New Roman, Times, serif">times e caratteri simili</font> <font face="courier New, Courier, mono">curier e caratteri simili</font> Verdana e caratteri simili Arial e caratteri simili Times e caratteri simili Curier e caratteri simili <font face="georgia, Times New Roman, Times, serif">georgia e caratteri simili </font> Georgia e caratteri simili <font face="geneva, Arial, Helvetica, sans-serif">geneva e caratteri simili</font> Geneva e caratteri simili È vero: l impossibilità di scegliere i caratteri che preferiamo limita terribilmente le nostre possibilità espressive, ma il bello di sviluppare per il web è proprio accettare di creare con delle regole ben definite, e a volte anche molto vincolanti. Per i titoli delle pagine, i menu, e quant altro potremmo poi sempre utilizzare delle immagini con il nostro carattere tipografico preferito (ad esempio delle "gif"). Scegliere il colore del testo Una volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice: <font color="blue">testo blu</font> oppure: <font color="#0000ff">testo blu</font> La scelta del colore può essere effettuata nello stesso momento in cui si sceglie il tipo di carattere (dal momento che "face" e "color" sono entrambi attributi del tag <font>): <font face="verdana, Arial, Helvetica, sans-serif" color="blue"> testo blu in Verdana </font> Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 6

7 Una volta scelto il colore possiamo sempre decidere di cambiarlo: <font face="verdana, Arial, Helvetica, sans-serif" color="blue">testo blu in Verdana</font> <br > <font face="verdana, Arial, Helvetica, sans-serif" color="red">testo rosso</font> o meglio ancora: <font face="verdana, Arial, Helvetica, sans-serif" color="blue">testo blu in Verdana <font color="red">testo rosso</font> </font> La seconda codifica è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta, evitando così di scrivere del codice inutile. È importante notare che per evitare la ripetizione i due tag sono annidati l'uno dentro l'altro. Le dimensioni del testo Le dimensioni del testo si attribuisco mediante l'attributo 'size' del tag <font>. Ci sono due modi per dare attribuire le dimensioni al testo tramite il tag <font>: valori interi da 1 a 7 valori relativi alla dimensione di base del tag font (di default "3") Nel caso dei valori interi, ecco la scala di grandezza: Codice Effetto <font size="1">testo di grandezza 1</font> <font size="2">testo di grandezza 2</font> <font size="3">testo di grandezza 3</font> <font size="4">testo di grandezza 4</font> <font size="5">testo di grandezza 5</font> <font size="6">testo di grandezza 6</font> <font size="7">testo di grandezza 7</font> Nel caso dei valori relativi alla dimensione di base è possibile "spostarsi" nella scala di grandezza utilizzando i segni "+" e "-". Abbiamo detto che la grandezza del font di base di default nel browser è 3. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 7

8 Dunque se utilizziamo un size="+2", vuol dire che la dimensione del font deve essere di 2 misure più grande della dimensione del font di base, quindi avremo un font di grandezza 5. Vediamo l'esempio: Codice Effetto <font size="+2"> Testo di grandezza +2 rispetto al font di base (3).<br /> Cioè font di grandezza 5. </font> <br/> <font size="5"> Testo di grandezza 5. </font> Come si può vedere le due sintassi sono equivalenti. È importante evitare di cadere nell'errore di pensare che la dimensione relativa faccia riferimento al precedente tag font. La dimensione relativa fa sempre riferimento alla dimensione del font di base: Codice Effetto <font size="7"> Testo di grandezza 7 <font size="-1"> testo di grandezza inferiore di 1 al font di base (che di default è 3), NON al tag precedente </font> </font> Quando state utilizzando il tag <font> sia che utilizziate il size di valori interi, sia che utilizziate i valori relativi al tag di base, in realtà la grandezza del carattere dipende dalle impostazioni del browser dell'utente (come già abbiamo visto per i tag "heading"). Con Internet Explorer ad esempio andando in: Visualizza > Carattere. Se cambiate le dimensioni del carattere, vedrete cambiare le dimensioni dei font. Questo appunto per le grandezze da 1 a 7 sono grandezze anch'esse relative. Questa caratteristica da un lato è positiva (permette di ingrandire testi piccoli), dall'altra può risultare molto fastidiosa per il webmaster. L'unico modo per fissare il carattere è (ancora una volta) quello di utilizzare i fogli di stile, esprimendo le dimensioni in pixel. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 8

9 Titoli, elenchi, righe orizzontali Titoli Mediante l'inserimento di opportuni titoli il testo di una pagina HTML può essere suddivisa in capitoli e sottocapitoli. Per i titoli HTML sono previsti sei livelli gerarchici. Il tag per definire un titolo è <Hn>... </Hn> dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei livelli di titolazione, da <H1> (livello superiore) a<h6> (livello inferiore). In visualizzazione i titoli appaiono come paragrafi a sé stanti con caratteristiche di formattazione legate al livello di titolazione. L'aspetto dei titoli può essere personalizzato per quanto riguarda l'allineamento e la formattazione. È importante inserire dei titoli nei testi delle pagine web perché questo incrementa notevolmente la leggibilità e perché i motori di ricerca, quando catalogano i siti web, spesso si basano anche sui titoli presenti nella pagina per classificarne gli argomenti. Righe Orizzontali Per tracciare una riga orizzontale, da usare come divisorio, si usa il tag <HR> che significa Horizontal Roules. Questo tag prevede i seguenti attributi: ALIGN= right left o center COLOR=come per gli altri tag NOSHADE la linea non prevede ombreggiatura SIZE= numero indica la dimensione in pixel WIDTH= numero o n% indica la lunghezza della riga in pixel o in misura percentuale rispetto alla pagina Esempio: <HR ALIGN= left COLOR= red SIZE= 2 WIDTH= 100% > Elenchi Puntati, Numerati, Di Definizione Il primo tipo di elenco che vedremo è quello puntato; le voci di questo elenco non hanno un ordine di successione ed ogni voce viene evidenziata da un simbolo. Il tag è <UL> (Unordered List) e funziona con il rispettivo </UL>. Nel mezzo del tag <UL>... </UL> ciascuna voce è identificata dal tag <LI>. Esempio: <UL> <LI> voce a <LI> voce b <LI> voce c </UL> Al tag <UL> si può aggiungere l'attributo TYPE="tipo di simbolo" che permette di scegliere un simbolo personalizzato. I valori previsti sono: disc: punto pieno circle: punto vuoto square: quadrato nero. Esempio: <UL TYPE= square > Un altro tipo di elenco è quello numerato; le voci di questo elenco hanno un preciso ordine di successione ed ogni voce viene evidenziata da un numero oppure opzionalmente, da una lettera. Il tag è <OL> (Ordered List) e funziona con il rispettivo </OL>. Nel mezzo del tag <OL>... </OL> ciascuna voce è identificata dal tag <LI>. Al tag <OL> si può aggiungere l'attributo TYPE="tipo di numerazione" che permette di scegliere numeri o lettere. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 9

10 I valori previsti sono: 1 numeri arabi, I numeri romani maiuscoli, i numeri romani minuscoli, A lettere maiuscole, a lettere minuscole. Si può anche usare l'attributo START="numero" per far iniziare il conteggio da un qualsiasi valore. Elenco di definizione E possibile anche creare degli elenchi di definizione utilizzando i seguenti tag: Il tag e <DL> (Definition List con il rispettivo tag di chiusura </DL> Nel mezzo del tag <DL> ciascuna voce è identificata dal tag <DT> (Definition term) con il rispettivo tag di chiusura </DT>. Nel mezzo del tag >DT> ciascuna definizione della voce è identificata dal tag <DD> (Definition Description) con il tag di chiusura <DD>. Esempio: <DL> <DT>Voce a</dt> <DD>Definizione della voce a</dd> <DT>Voce b</dt> <DD>Definizione della voce a</dd> </DL> Darà come risultato: Voce A Definizione della voce a Voce B Definizione della voce b Immagini Il tag IMG Per inserire un'immagine in una pagina HTML basta inserire il tag: <IMG SRC="nome immagine">; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute. Adesso vedremo gli attributi del tag <IMG> che ci permettono di personalizzare l'impaginazione dell'immagine. Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi WIDTH (larghezza in pixel) e HEIGHT (altezza in pixel). Ad esempio <IMG SRC= image.jpg WIDTH= 100 HEIGHT= 50 > Quando si specificano le dimensioni di un'immagine è necessario conoscerne le dimensioni effettive per mantenere inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine. Anche se si vuole visualizzare l'immagine a grandezza naturale è sempre preferibile specificare i valori di WIDTH e HEIGHT perché così il browser ha maggiori informazioni per collocare l'immagine ed il caricamento della pagina risulta molto più rapido. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 10

11 Oltre alle dimensioni di visualizzazione possiamo definire anche l'allineamento dell'immagine rispetto al testo circostante mediante l'attributo ALIGN. Esempio: <IMG SRC= image.jpg ALIGN= bottom > I valori di ALIGN ammessi sono: Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito); Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e prosegue sotto l'immagine; Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro; Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro. Nel caso in cui si voglia allontanare l'immagine dal testo si può aumentare lo spazio vuoto che circonda l'immagine attraverso gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio orizzontale, in pixel). Ad esempio scrivendo: <IMG SRC= image.jpg VSPACE= 10 HSPACE= 20 > oltre ad inserire nella pagina web image.jpg si specifica che sopra e sotto l'immagine devono rimanere 10 pixel vuoti, e a destra e sinistra dell'immagine devono rimanere 20 pixel vuoti. Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo BORDER che deve essere espresso in pixel secondo la sintassi: <IMG SRC= image.jpg BORDER= 5 > Attributi fondamentali del tag <IMG> sono: ALT (testo alternativo) e TITLE. Grazie all attributo ALT si può definire un testo descrittivo dell'immagine. L attributo TITLE invece farà visualizzare all'utente cosa succederà in caso di click o, al non vedente, farà ascoltare cosa succederà quando cliccherà. La sintassi corretta è: <IMG SRC= nome immagine ALT= Testo descrittivo dell immagine TITLE= Cosa succede al click? Di cosa si parla qui? > Riassumendo: Con l'alt dovresti fornire una piccola descrizione nel caso manchi l'immagine o, per l'accessibilità, cosa leggerà il software di un non vedente. Col title invece farai visualizzare all'utente cosa succederà in caso di click o, al non vedente, farai ascoltare cosa succederà quando cliccherà. Questa didascalia associata all'immagine appare durante il caricamento della pagina o quando si passa con il mouse sopra l'immagine. I vantaggi principali dell'usare l'attributo ALT sono: i visitatori possono capire prima del caricamento completo il contenuto delle immagini; i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina; diversi motori di ricerca tengono conto del valore dell'attributo ALT delle immagini di una pagina per catalogarla con precisione. Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag <IMG> all'interno della coppia di tag <A HREF> e </A> secondo la sintassi: <A HREF= index.html ><1MG SRC= index.gif ></A> Associare un collegamento ipertestuale ad un'immagine è molto utile quando si vuole creare ad esempio un menù grafico di navigazione per un sito web. Creando immagini ad hoc come icone o pulsanti il visitatore né intuirà la funzione a colpo d'occhio. Però quando un'immagine è cliccabile, appare generalmente circondata da un bordo di colore blu che risulta anti- estetico. In questo caso basta indicare all'interno del tag <IMG> l'attributo BORDER="0" per fare in modo che il bordo resti invisibile. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 11

12 I collegamenti ipertestuali I collegamenti ipertestuali si creano associando l'indirizzo (percorso/nome file) del nodo di destinazione ad un elemento visualizzato nella pagina corrente che può essere una stringa di testo o un'immagine. Questa associazione è basata sull'utilizzo del tag <A HREF> dove A sta per ancoraggio ed HREF è l'abbreviazione di Hypertext-Reference (riferimento ipertestuale). Per creare un collegamento verso un'altra pagina dello stesso sito la sintassi è: <A HREF= pagina2.html > Vai a pagina 2 </A> Affinché il collegamento funzioni è fondamentale scrivere il nome del file di destinazione correttamente, rispettando maiuscole e minuscole. Nel caso in cui il file di destinazione non si trovi nella stessa directory del file di posizione bisogna specificare anche il percorso completo. Il tag <A HREF> permette di puntare un collegamento anziché ad una pagina web ad un'immagine. La sintassi è: <A HREF= foto.jpg > Vai a foto </A> Anche in questo caso bisogna specificare correttamente il nome dell'immagine e l'eventuale percorso; supponendo che l'immagine si trovi nella cartella images si dovrà scrivere: <A HREF= images/foto.jpg > Vai a foto </A> Se si vuole creare un collegamento ad un file da aprire o da scaricare come ad esempio un filmato o un pacchetto compresso la sintassi è: <A HREF= file.zip > Scarica il file in formato zip </A> dove file.zip è il file che verrà scaricato sul computer di chi naviga. Per creare un collegamento verso un'altro sito web è sufficiente inserire nel tag <A HREF> l'indirizzo completo del sito in questione: <A HREF= Principi di Web Design by GDC </A> Quando una pagina è molto lunga e suddivisa in sezioni distinte si possono creare dei collegamenti all'interno della stessa pagina che permettono al lettore di saltare facilmente da un punto all'altro del testo. Per creare i collegamenti interni bisogna innanzitutto definire le destinazioni (ancore) nei vari punti prescelti mediante il tag <A NAME="nome scelto dal webmaster">. Supponiamo di aver definito due destinazioni all'interno della nostra pagina: <A NAME= sezione1 >Sezione 1 </A> <A NAME= sezione2 >Sezione 2 </A> adesso possiamo creare i collegamenti che ci portano alle due destinazioni secondo la sintassi: <A HREF= #sezione1 > Vai alla sezione 1 </A> <A HREF= #sezione2 > Vai alla sezione 2 </A> Si possono anche combinare collegamenti esterni ed interni, cioè definire un collegamento ipertestuale che punta ad un'ancora specifica all'interno di un'altra pagina web. <A HREF= pagina2.html#sezione1 >Vai alla sezione 1 della pagina 2</A> Naturalmente anche in questo caso bisogna aver definito in precedenza l'ancora di destinazione nella pagina2.html. È consigliabile inserire nelle proprie pagine web un indirizzo di posta elettronica cui i visitatori possano rivolgersi. Allora si può inserire un indirizzo cliccabile, associato cioè alla casella corrispondente, in modo che l'invio del messaggio sia quasi automatizzato. La sintassi è: <A HREF= per informazioni</a> Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 12

13 Sino ad ora abbiamo visto collegamenti associati ad un testo, ma i collegamenti possono essere associati anche ad un'immagine. Quindi è possibile avere un'immagine cliccabile che ci porti ad un'altra pagina web, a un sito, ad una sezione e via dicendo. Per associare un collegamento ad un'immagine si usa il tag <IMG SRC> con l'attributo BORDER="0". Ad esempio: <A HREF= pagina2.html ><IMG SRC= pagina2.gif BORDER= 0 ></A> Se non si specifica l'attributo BORDER="0" l'immagine apparirà contornata da un profilo colorato e ciò è sconsigliabile dal punto di vista estetico. Quando si clicca su un collegamento in una pagina web, viene caricata la nuova destinazione (immagine, pagina o sito) nella stessa finestra del browser. Seguendo i vari collegamenti ipertestuali, il lettore potrebbe non ricordarsi più il punto di destinazione. Per prevenire questo inconveniente si può fare in modo che la destinazione del collegamento venga visualizzata in una nuova finestra del browser che si sovrappone a quella di partenza. Per ottenere questo risultato basta aggiungere al tag <A HREF> di partenza l'attributo TARGET. Ad esempio: <A HREF= pagina2.html TARGET= _blank > Vai a pagina 2 </A> Il valore dell'attributo TARGET (nell'esempio:_blank) è un nome convenzionale e può essere inventato di sana pianta senza alcun vincolo. Il suo effetto è di aprire in ogni caso una finestra a sé stante. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 13

I PRINCIPALI TAG DEL LINGUAGGIO HTML

I PRINCIPALI TAG DEL LINGUAGGIO HTML Struttura generica di una pagina Web: I PRINCIPALI TAG DEL LINGUAGGIO HTML Titolo

Dettagli

HTML. http://www.w3schools.com/html/default.asp

HTML. http://www.w3schools.com/html/default.asp HTML http://www.w3schools.com/html/default.asp HTML Cosa è l'html? HTML è un linguaggio per descrivere le pagine web. HTML è l'acronimo di H yper T ext M arkup L anguage HTML è un markup language Un linguaggio

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

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

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

Dettagli

APPUNTI DI HTML (TERZA LEZIONE)

APPUNTI DI HTML (TERZA LEZIONE) Il web è costituito non da testi ma da ipertesti. APPUNTI DI HTML (TERZA LEZIONE) I link ci permettono di passare da un testo all altro. I link sono formati da due componenti: IL CONTENUTO "nasconde" il

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

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi 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

Dettagli

Guida html e css base

Guida 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

Dettagli

Cimini Simonelli - Testa

Cimini 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

, utilizzando il tasto destro

, utilizzando il tasto destro HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione (sono linguaggi di programmazione il C, il C++, il Pascal, il Java,

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

HTML per tu+ Chiara Pere+

HTML 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

Dettagli

INTRODUZIONE ALL HTML

INTRODUZIONE 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

Dettagli

Olga Scotti. Esercizi. Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file)

Olga Scotti. Esercizi. Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file) Esercizi Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file) Esercizi 12biz htdocs img Index.html Canzoni.html Galleria.htm guestbook

Dettagli

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...

HTML 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

Primi passi con HTML. Il documento HTML

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

Dettagli

APPUNTI DI HTML (SECONDA LEZIONE)

APPUNTI 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à

Dettagli

Scegliere il font del testo

Scegliere il font del testo Scegliere il font del testo Vediamo ora come formattare il testo mediante la scelta del colore, delle dimensioni e del tipo di carattere del testo attraverso l utilizzo del tag . Il tipo di carattere

Dettagli

LEZIONI 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à... 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 , ,...,

Dettagli

Spazio WEB: spazio fisico dove vengono memorizzate le pagine (15, 50, 100 Mb che si acquistano)

Spazio WEB: spazio fisico dove vengono memorizzate le pagine (15, 50, 100 Mb che si acquistano) 1 Concetti di base Pagina WEB: è un documento scritto in linguaggio html che contiene testo, immagini, link. L estensione di questi file è.html o.htm (pagine statiche, pagine dinamiche). Un sito WEB è

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

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

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

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 3 Immagini in documenti HTML 3.1 Rappresentazione delle

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

MODULO 3. Microsoft Excel. TEST ED ESERCIZI SU: http://www.informarsi.net/ecdl/excel/index.php

MODULO 3. Microsoft Excel. TEST ED ESERCIZI SU: http://www.informarsi.net/ecdl/excel/index.php MODULO 3 Microsoft Excel TEST ED ESERCIZI SU: http:///ecdl/excel/index.php Foglio Elettronico - SpreadSheet Un foglio elettronico (in inglese spreadsheet) è un programma applicativo usato per memorizzare

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

Collegamenti ipertestuali.

Collegamenti ipertestuali. Collegamenti ipertestuali. Argomenti trattati: - Premessa: Cosa sono e perchè sono l'essenza del Web. - : Come realizzare e personalizzare i vari tipi di link a pagine o risorse. - Il collegamento ipertestuale

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

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

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

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla! HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!) CENNI SULL'HTML L'html è il linguaggio di base per lo sviluppo di pagine

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

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

Login. Gestione contenuto. www.sitofaidate.it

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

Dettagli

Disegnare il Layout. www.vincenzocalabro.it 1

Disegnare il Layout. www.vincenzocalabro.it 1 Disegnare il Layout www.vincenzocalabro.it 1 Il problema dell interfaccia Una buona interfaccia deve assolvere a diverse funzioni: far percepire i contenuti permettere di individuare le principali aree

Dettagli

Prof. Rocco Ciurleo 1

Prof. Rocco Ciurleo 1 Istituto Tecnico Industriale Statale Conte Michele Maria Milano Polistena Classi: 2 E 2 G - a. s. 2012/2013 H T M L Guida base al linguaggio Prof. Rocco Ciurleo 1 Cos è l HTML HTML è l'acronimo di Hypertext

Dettagli

Il linguaggio HTML - Parte 4

Il 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

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

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

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

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

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

Creare un nuovo articolo sul sito Poliste.com

Creare 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

Dettagli

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

Dettagli

Esercitazione n. 11: Sito web con Kompozer

Esercitazione n. 11: Sito web con Kompozer + Strumenti digitali per la comunicazione A.A 2013/14 Esercitazione n. 11: Sito web con Kompozer Scopo: Creare un sito Web che fornisce informazioni su un negozio di articoli sportivi chiamato Championzone.

Dettagli

EDITOR per la modifica delle pagine

EDITOR per la modifica delle pagine Pagina 1 EDITOR per la modifica delle pagine Sommario EDITOR per la modifica delle pagine...1 Apertura...2 L'EDITOR...3 Procedure...6 Inserire collegamenti...6 Inserire un'ancora...6 Inserire un collegamento...6

Dettagli

lezione 4 I collegamenti

lezione 4 I collegamenti lezione 4 I collegamenti In questa lezione conoscerai gli elementi necessari per arricchire le tue pagine Web di collegamenti ipertestuali. l documenti creati con il linguaggio Html, come spiegato nella

Dettagli

SCRIVERE TESTO BLOCCO NOTE WORDPAD WORD IL PIU' DIFFUSO APRIRE WORD

SCRIVERE TESTO BLOCCO NOTE WORDPAD WORD IL PIU' DIFFUSO APRIRE WORD SCRIVERE TESTO Per scrivere del semplice testo con il computer, si può tranquillamente usare i programmi che vengono installati insieme al sistema operativo. Su Windows troviamo BLOCCO NOTE e WORDPAD.

Dettagli

HTML 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 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

Dettagli

3.3 Formattazione. Formattare un testo. Copyright 2008 Apogeo. Formattazione del carattere

3.3 Formattazione. Formattare un testo. Copyright 2008 Apogeo. Formattazione del carattere 3.3 Formattazione Formattare un testo Modificare la formattazione del carattere Cambiare il font di un testo selezionato Modificare la dimensione e il tipo di carattere Formattazione del carattere In Word,

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

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

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

Guida OpenOffice.org Impress

Guida OpenOffice.org Impress Guida OpenOffice.org Impress Introduzione ad Impress IMPRESS è un programma nato per creare presentazioni e lezioni di aspetto professionale. È un programma inserito nella versione standard del pacchetto

Dettagli

Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password.

Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password. Uso del computer e gestione dei file Primi passi col computer Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password. Spegnere il computer impiegando la procedura corretta.

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

Capitolo3. Si apre la seguente finestra. Figura 29. Proprietà immagine di sfondo. - Università degli Studi della Repubblica di San Marino -

Capitolo3. Si apre la seguente finestra. Figura 29. Proprietà immagine di sfondo. - Università degli Studi della Repubblica di San Marino - Capitolo3 LAVORARE CON LE IMMAGINI E certo che l impatto visivo in un sito internet è molto importante ma è bene tenere presente che immagini e fotografie, pur arricchendo la struttura grafica di un web,

Dettagli

WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &#"#2

WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &##2 ! "#$" %% $"$&&"'& $%%& $'&( ) *+&, ) && *+ ( -./ WWW (World Wide Web)!& ( # (&%#(!(&&( %% (*0 #,% )0#1( &#"#2 Siti Web pagine Web: documenti pronti per essere registrati su un server Internet residenza

Dettagli

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML

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

Dettagli

Foglio elettronico. OpenOffice.org Calc 1.1.3

Foglio elettronico. OpenOffice.org Calc 1.1.3 Foglio elettronico OpenOffice.org Calc 1.1.3 PRIMI PASSI CON IL FOGLIO ELETTRONICO Aprire il programma Menu Avvio applicazioni Office OpenOffice.org Calc. Chiudere il programma Menu File Esci. Pulsanti

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

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

Lezione 1: Introduzione Struttura e aspetto di PowerPoint Sviluppare una presentazione. Patente Europea di Informatica ECDL Modulo 6

Lezione 1: Introduzione Struttura e aspetto di PowerPoint Sviluppare una presentazione. Patente Europea di Informatica ECDL Modulo 6 Patente Europea di Informatica ECDL Modulo 6 Lezione 1: Introduzione Struttura e aspetto di PowerPoint Sviluppare una presentazione Anno 2009/2010 Syllabus 5.0 Microsoft PowerPoint è un software progettato

Dettagli

Foglio di calcolo. Il foglio di calcolo: Excel. Selezione delle celle

Foglio di calcolo. Il foglio di calcolo: Excel. Selezione delle celle Foglio di calcolo Il foglio di calcolo: Excel I dati inseriti in Excel sono organizzati in Cartelle di lavoro a loro volta suddivise in Fogli elettronici. I fogli sono formati da celle disposte per righe

Dettagli

LEZIONE NO. 4: IMMAGINI E LINK: <IMG> <A HREF> DI ATTILIO ABBIEZZI

LEZIONE NO. 4: IMMAGINI E LINK: <IMG> <A HREF> DI ATTILIO ABBIEZZI HTML BASE LEZIONE NO. 4: IMMAGINI E LINK: DI ATTILIO ABBIEZZI FONTI: HTML.IT 1 inserire immagini Internet, solo negli ultimi 10 anni affermatasi come media di massa, è stato per lunghi

Dettagli

Informatica di Base. Programma Lezioni

Informatica di Base. Programma Lezioni Informatica di Base Lezione III Il linguaggio HTML Hyper Text Markup Language 1 Informatica di Base Programma Lezioni 1 26 ottobre Introduzione Sistema binario e formato dei dati 2 2 novembre Numeri negativi

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

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO 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

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

Come Creare Un Nuovo Articolo Con WordPress. Ebook - Gratuito

Come Creare Un Nuovo Articolo Con WordPress. Ebook - Gratuito Come Creare Un Nuovo Articolo Con WordPress Ebook - Gratuito 1 Indice Come Creare Un Nuovo Articolo Con Wordpress 1. Accedi al pannello di controllo del sito... 3 2. La Bacheca di Wordpress... 4 3. Il

Dettagli

Introduzione al Linguaggio HTML

Introduzione 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

Dettagli

I PROGRAMMI PER L ELABORAZIONE DEL TESTO

I PROGRAMMI PER L ELABORAZIONE DEL TESTO I PROGRAMMI PER L ELABORAZIONE DEL TESTO Modulo 3 dell ECDL Terza Parte pag. 1 di 10 CopyLeft Multazzu Salvatore I programmi per elaborazione del testo: Terza Parte SOMMARIO Stili... 3 Inserire il numero

Dettagli

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori HTML e XML Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi

Dettagli

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat www.dimi.uniud.it/burigat File HTML e tag Un file HTML non è nient'altro che un puro file di testo al cui interno sono presenti delle

Dettagli

Costruzione di un sito web - HTML

Costruzione di un sito web - HTML Costruzione di un sito web - HTML Obiettivi. Presentare le caratteristiche di un sito Web ed i concetti base per la sua costruzione: fasi di realizzazione e linguaggio HTML. Illustrare gli elementi fondamentali

Dettagli

Manuale di Outlook Express

Manuale di Outlook Express 1. Introduzione 2. Aprire Outlook Express 3. L'account 4. Spedire un messaggio 5. Opzione invia ricevi 6. La rubrica 7. Aggiungere contatto alla rubrica 8. Consultare la rubrica 9. Le cartelle 10. Come

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

POWERPOINT è un programma del pacchetto Office con il quale si possono facilmente creare delle presentazioni efficaci ed accattivanti.

POWERPOINT è un programma del pacchetto Office con il quale si possono facilmente creare delle presentazioni efficaci ed accattivanti. 1 POWERPOINT è un programma del pacchetto Office con il quale si possono facilmente creare delle presentazioni efficaci ed accattivanti. Le presentazioni sono composte da varie pagine chiamate diapositive

Dettagli

Word Elaborazione testi

Word Elaborazione testi I seguenti appunti sono tratti da : Consiglio Nazionale delle ricerche ECDL Test Center modulo 3 Syllabus 5.0 Roberto Albiero Dispense di MS Word 2003 a cura di Paolo PAVAN - pavan@netlink.it Word Elaborazione

Dettagli

8 Word seconda lezione 1

8 Word seconda lezione 1 8 Word seconda lezione 1 Word incominciamo a digitare! È il momento di iniziare a scrivere, posizionandosi con il cursore all inizio o in mezzo al documento. Talvolta però può capitare di fare degli sbagli.

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

Guida OpenOffice.org Writer

Guida OpenOffice.org Writer Guida OpenOffice.org Writer Le visualizzazioni di Writer Writer permette di visualizzare un documento in diverse maniere tramite: Visualizza->Schermo intero: permette di visualizzare il documento Writer

Dettagli

lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000

lo 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,

Dettagli

Hyper Text Markup Language HTML

Hyper Text Markup Language HTML Operatore informatico giuridico A.A 2003/2004 I Semestre Hyper Text Markup Language HTML Dr. Raffaella Brighi HTML HTML è un linguaggio di marcatura (markup) per la creazione di ipertesti Le sezioni di

Dettagli

Cos'è Writer? Gestisce file di testo con estensione.odt, ma supporta anche.txt,.rtf,.doc,.docx, ecc.

Cos'è Writer? Gestisce file di testo con estensione.odt, ma supporta anche.txt,.rtf,.doc,.docx, ecc. Cos'è Writer? Writer è un componente del pacchetto di programmi OpenOffice. Si tratta di un editor di testo avanzato, dando la possibilità di dare degli stili al nostro testo. Per cominciare ad usare questa

Dettagli

4.1 UTILIZZO DELL APPLICAZIONE

4.1 UTILIZZO DELL APPLICAZIONE 4.1 UTILIZZO DELL APPLICAZIONE Il foglio elettronico (definito anche spreadsheet) è uno strumento formidabile. Possiamo considerarlo come una specie di enorme tabellone a griglia il cui utilizzo si estende

Dettagli

La pagina di Explorer

La pagina di Explorer G. Pettarin ECDL Modulo 7: Internet 11 A seconda della configurazione dell accesso alla rete, potrebbe apparire una o più finestre per l autenticazione della connessione remota alla rete. In linea generale

Dettagli

[Tutoriale] Realizzare un cruciverba con Excel

[Tutoriale] Realizzare un cruciverba con Excel [Tutoriale] Realizzare un cruciverba con Excel Aperta in Excel una nuova cartella (un nuovo file), salviamo con nome in una precisa nostra cartella. Cominciamo con la Formattazione del foglio di lavoro.

Dettagli

Sessione Formativa ALI ComuniMolisani Portale Internet Comunale

Sessione Formativa ALI ComuniMolisani Portale Internet Comunale Sessione Formativa Portale Internet Comunale Per assistenza e informazioni contattare: Redazione ALIComuniMolisani c/o Provincia di Campobasso - Via Roma, 47 email: redazione@alicomunimolisani.it tel:

Dettagli

Guida di Keyboard Builder. 2009 Sielco Sistemi Srl

Guida di Keyboard Builder. 2009 Sielco Sistemi Srl Guida di Keyboard Builder Guida di Keyboard Builder Keyboard Builder è uno strumento che permette di costruire tastiere da visualizzare sullo schermo, utili per la realizzazione di applicazioni che operano

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

caratteristiche del documento </head>

caratteristiche del documento </head> HTML: sintassi caratteristiche del documento documento 21 HTML: titolo del documento

Dettagli

I link e l'ipertestualità

I 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ò

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

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

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

Dipartimento di Storia, Società e Studi sull Uomo Università del Salento Ing. Maria Grazia Celentano Mariagrazia.celentano@gmail.

Dipartimento di Storia, Società e Studi sull Uomo Università del Salento Ing. Maria Grazia Celentano Mariagrazia.celentano@gmail. Dipartimento di Storia, Società e Studi sull Uomo Università del Salento Ing. Maria Grazia Celentano Mariagrazia.celentano@gmail.com Indice: La finestra di Word Barra del titolo Barra dei menu Barra degli

Dettagli

G. Pettarin ECDL Modulo 3: Word 125

G. Pettarin ECDL Modulo 3: Word 125 G. Pettarin ECDL Modulo 3: Word 125 Stampa unione buste: passaggio 2 di 6 Con il pulsante Sfoglia, come nei casi precedenti, seleziona il file elenco per i destinatari da stampare sulle buste. Nel quarto

Dettagli

Guida alla composizione di modelli OpenOffice

Guida alla composizione di modelli OpenOffice Tekne Informatica & Comunicazione Guida alla composizione di modelli OpenOffice guida rapida per creare e modificare modelli OpenOffice per XDent 01 aprile 2011 Sommario Premessa... 2 Ottenere ed Installare

Dettagli