Guida Html

Materie:	Appunti
Categoria:	Informatica
Voto:	2 (2)
Download:	41
Data:	24.01.2007
Numero di pagine:	26
Formato di file:	.doc (Microsoft Word)

HTML
L’html è insieme di codici con i quali sono scritte le pagine Web. Le pagine scritte in linguaggio HTML sono costituite da puro testo ASCII; questo significa che non contengono informazioni specifiche di una determinata piattaforma o di un determinato programma. Un file HTML può essere scritto e letto con qualsiasi programma di editor. Le pagine HTML contengono due tipi di oggetti:
• Il testo del documento
• I tag HTML che in dicano gli elementi, la struttura, la formattazione e i link ipertestuali con altre pagine o che consentono di includere altri file.
La maggior parte dei tag HTML hanno il seguente aspetto:
testo influenzato dal tag
Il nome del tag (in questo caso NomeTag) è racchiuso fra i segni “minore di” e “maggiore di” ().
I tag HTML prevedono generalmente un codice iniziale e un codice finale che racchiudono il testo influenzato dal tag. Il tag iniziale attiva una funzionalità (un titolo, il grassetto e così via) e il tag finale disattiva la stessa funzionalità. I tag di chiusura sono preceduti da una barra (/).
Non tutti i tag HTML prevedono l’uso di un codice finale. Alcuni tag vengono utilizzati singolarmente e non in coppia mentre altri ancora fungono da contenitori per informazioni o testo. Alcuni tag prevedono anche degli attributi, cioè degli elementi opzionali che definiscono le modalità di funzionamento di quell'elemento HTML.
Nei nomi di tag HTML non si fa differenza fra lettere maiuscole e minuscole.
Per iniziare a scrivere codice HTML non è necessario un server Web, un provider Web e neppure un collegamento a Internet. Tutto ciò che occorre è un programma che consenta di scrivere file di testo e almeno un browser per visualizzare il risultato.
In ambiente Windows è possibile usare il blocco note, prestando attenzione alla fase di salvataggio durante la quale bisognerà impostare nel campo “Salva come” la scelta Tutti i file, la quale ci permetterà di assegnare al nome del file l’estensione “html” oppure “htm”.
Dopo aver creato il file html, l’icona del file sarà quella tipica di Internet Explorer, a questo punto sarà sufficiente fare doppio clic su di essa per visualizzare il file stesso così come se fosse una pagina Web in Internet.
Quando il browser elabora un documento HTML, ogni genere di formattazione eseguita manualmente (spazi aggiuntivi, tabulazioni, a capo forzati e così via) viene ignorata. L’unico elemento che può generare una formattazione in una pagina HTML è un tag HTML.
Esempi:
Home page

Home page

Home page
Home page
Struttura di un documento HTML
La struttura generale di un documento HTML viene definita con i seguenti elementi fondamentali:
html
head
body
title
Il solo elemento è obbligatorio in quanto gli altri, se assenti, vengono automaticamente inseriti da molti browser; è comunque buona norma includere tutti e quattro questi elementi in qualsiasi documento HTML.
All'inizio del sorgente HTML si deve inoltre inserire una riga che specifichi quale è la versione di HTML
utilizzata. Per fare questo si usa la dichiarazione che non è un tag HTML ma una entità SGML.
Molti browser gestiscono tranquillamente anche documenti WEB mancanti di tale elemento ma è comunque
opportuno inserirlo per evitare incompatibilità.
Per la versione HTML 3.2 la linea da scrivere è la seguente (vengono omessi i dettagli sul significato dei singoli
elementi di tale dichiarazione):
Essendo essa abbastanza complessa e da ricordare può essere conveniente crearsi un modello di documento
HTML, che includa solo tale linea, da riempire di volta in volta con il contenuto desiderato.
Il tag HTML
Lo scopo di questo elemento è quello di indicare che il file che si sta scrivendo è realizzato in linguaggio
HTML. Tutto il testo, comprensivo degli altri tag, dovrà essere racchiuso tra i tag di inizio e fine dell'elemento
html:
....
.... documento
....
Il Tag HEAD
La sezione HEAD inizia con il tag e termina con e contiene di solito solo il titolo del
documento racchiuso tra i tag e anche se può contenere altre informazioni come i dati
sull'autore e sul programma che ha generato il documento, o anche degli script cioè insiemi di comandi scritti in
un qualche linguaggio apposito e che possono svolgere varie attività interagendo con il browser.
Istituto F. Besta
Il titolo deve essere una descrizione del documento breve, perché viene visualizzato dai browser nella barra del titolo della finestra, e significativa, perché viene utilizzato dai programmi che catalogano i documenti di Internet per creare indici di ricerca.
Il tag BODY
La sezione BODY è racchiusa tra i tag e e contiene la parte del documento che viene
visualizzata dai browser quando si apre la pagina.
Il seguente è un semplicissimo esempio che riassume la struttura generale di una pagina HTML con l'uso dei tag
sinora illustrati:
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Elementi di blocco e elementi di testo
All'interno della sezione body possono essere presenti molti elementi suddivisi fondamentalmente secondo due
tipologie:
• elementi di testo
• elementi di blocco
i primi si usano per inserire immagini, creare collegamenti, modificare l'aspetto del testo, i secondi per definire gruppi di testo con uno scopo specifico, come intestazioni, tabelle ed altro ancora.
La differenza principale tra i due tipi di elementi è che quelli di blocco provocano interruzioni di paragrafo e
quelli di testo invece no.
Intestazioni
Le intestazioni sono elementi DI BLOCCO e ne esistono sei livelli diversi. Non è obbligatorio usarli ma sono utili perché aiutano a organizzare in modo razionale le pagine ossia a distinguere le parti del testo.
Ogni intestazione inizia con e termina con dove n è il numero corrispondente al livello desiderato.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Manutenzione motore
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi

Nei tag di inizio è possibile inserire i seguenti attributi:
ALIGN="LEFT"
ALIGN="RIGHT"
ALIGN="CENTER"
ALIGN="JUSTIFY" (novità dell'HTML 4.0) e quindi non supportata da tutti i browser
Il loro effetto è rispettivamente quello di allineare le intestazioni a sinistra, destra, centro e ad entrambi i
margini.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Manutenzione motore
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
Paragrafi
In HTML l'inizio di un paragrafo è indicato con il tag mentre non è obbligatorio il tag di fine .
E' molto importante notare che la presenza di spazi o righe vuote nel sorgente HTML viene ignorata dai browser (gli spazi vengono compattati) e quindi l'unico modo per separare correttamente i paragrafi è, appunto, l'uso del tag .
Per chiarire meglio il discorso consideriamo le seguenti porzioni di codice HTML:
Semplice esempio
Questo è un semplice esempio con due righe di testo.
Questa è la seconda riga
oppure
Semplice esempio
Questo è un semplice esempio con due righe di testo.
Questa è la seconda riga
oppure
Semplice esempio
Questo è un semplice
esempio con due righe di testo.
Questa è la seconda riga
questi tre esempi produrranno esattamente lo stesso effetto al momento della visualizzazione con il browser.
A proposito dei paragrafi si deve anche ricordare che non è opportuno cercare di inserire righe vuote con una
sequenza di consecutivi perché molti browser in questo caso li riducono ad un solo annullando lo
sforzo compiuto dall'autore del sorgente HTML.
All'interno dell'elemento paragrafo si possono utilizzare gli attributi di allineamento visti per le intestazioni.
Naturalmente il tag è un elemento DI BLOCCO.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
Righello orizzontale
Con il tag si inserisce nel documento una riga orizzontale, oltre a separare il testo in due paragrafi
separati. A questo tag non è associato alcun tag di chiusura né alcun testo. Questo elemento è DI BLOCCO ed è sempre gestito anche se non tutti i browser visualizzano la riga nello stesso modo.
In questo tag è possibile inserire i seguenti attributi:
SIZE che indica lo spessore in pixel
WIDTH che indica la larghezza in pixel o in percentuale riferita alla larghezza dello schermo (ad esempio il 30% o il 50%)
Se si specifica una larghezza più piccola dello schermo si può anche specificare l’allineamento della linea tramite l’attributo ALIGN in modo da accostare, la linea a sinistra ALIGN=LEFT a destra ALIGN=RIGHT o al centro ALIGN=CENTER.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
Centratura
I tag e vengono usati per centrare tutto ciò che è contenuto tra essi, testo o immagini.
Anche questo è un elemento DI BLOCCO.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
Interruzione di linea
Per interrompere una linea e "tornare a capo" si può usare il tag
. Questo elemento è DI TESTO e si
differenzia da perché quest'ultimo, oltre a terminare la linea termina anche il paragrafo iniziandone uno
nuovo.

PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Di seguito elencheremo I responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
Grassetto, corsivo, sottolineato
Con i tag e si enfatizza il testo compreso, con e si visualizza in corsivo, con e si sottolinea. Sono tutti elementi DI TESTO.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Di seguito elencheremo I responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
Nidificazione dei tag
In un documento HTML i tag sono sempre nidificati (cioè inseriti uno nel contenuto di uno precedente).
Abbiamo visto ad esempio come l'elemento body sia contenuto all'interno dell'elemento html. Consideriamo ora
la seguente porzione di codice HTML:
Esempio con tag nidificati
Abbiamo il marcatore per il corsivo all'interno di quello per il grassetto che, a sua volta è all'interno di quello
per la separazione dei paragrafi. L'effetto di questi tag farà visualizzare il testo in grassetto e la parola
"nidificati" anche in corsivo.
Riguardo alla nidificazione ci sono alcune regole da ricordare:
• gli elementi devono essere completamente nidificati e non chiusi nell'ordine sbagliato;
• gli elementi di testo possono essere nidificati in elementi di blocco o in altri di testo;
• gli elementi di blocco possono essere nidificati solo in altri elementi di blocco.
Alla luce di queste regole i seguenti esempi risultano errati:
Esempio con nidificazione sbagliata per colpa dei tag di chiusura
Esempio sbagliato con tag di blocco interno a uno di testo
Alcuni browser riescono ugualmente ad interpretare sorgenti HTML contenenti errori simili a questi ma, come
più volte detto in precedenza, è sempre bene rispettare le regole standard.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Di seguito elencheremo I responsabile dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
Set di caratteri
Le prime versioni di HTML, fino alla 3.2, utilizzano un set di caratteri chiamato LATIN-1 o ISO 8859-1. (L'ISO è l'Organizzazione Internazionale per le Standardizzazioni e ha il compito di definire gli standard in vari ambiti a livello mondiale).
Questo set comprende i caratteri stampabili del codice ASCII, cioè quelli di valore decimale da 32 a 126, e altri caratteri numerati da 160 a 255 che includono simboli speciali e lettere straniere.
Con l'HTML 4.0 viene introdotto l'uso del set di caratteri UNICODE o UCS (Universal Character Set) che
contiene 38.885 caratteri che fanno parte delle lingue scritte in tutto il Mondo. Essendo questo standard ancora abbastanza nuovo può capitare che un browser non gestisca i caratteri UCS ed inoltre non è detto che il computer che utilizziamo contenga il FONT di caratteri in grado di visualizzare determinati simboli UCS.
Entità per caratteri speciali
Torniamo allora al set di caratteri LATIN-1 e vediamo come si possono utilizzare i simboli speciali (quelli che non hanno codice ASCII compreso tra 32 e 126); si devono usare le ENTITA' PER CARATTERI SPECIALI cioè dei codici che rappresentano tali simboli.
Le entità per caratteri speciali possono assumere due forme: con NOME o con NUMERO. Per esempio il
simbolo "à" corrisponde all'entità à oppure à.
Tutte le entità iniziano con "&" e finiscono con ";" , in quelle con numero le cifre sono precedute dal simbolo
"#".
Di seguito sono elencati alcuni dei caratteri speciali più usati (almeno in Italia) con i rispettivi codici:
CARATTERE
NOME
NUMERO
à
à
à
è
è
è
é
é
é
ì
ì
ì
ò
ò
ò
ù
ù
ù
£
£
£
È
È
È
2.7.2 Entità per caratteri riservati
Con lo stesso sistema viene risolto anche il problema dell'uso di caratteri "normali" ma che per HTML hanno un significato particolare come i simboli di maggiore e minore, la "&" e le virgolette. Si usano in questo caso le ENTITA' PER CARATTERI RISERVATI con le stesse regole di sintassi:
CARATTERE
NOME
NUMERO
"
"
<
<
<
>
>
>
&
&
&
Per le virgolette esisterebbe anche l'entità con nome " che però non fa parte dello standard riconosciuto dal W3C e quindi è meglio usare l'entità con numero ".

PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Di seguito elencheremo I responsabile dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
Lo spazio unificatore
Tra i caratteri speciali ce n'è uno molto importante: lo SPAZIO UNIFICATORE con il quale si inserisce uno
spazio tra due parole facendo in modo però che esse rimangano sempre nella stessa riga. Per inserire tale
simbolo si usano le entità   oppure  .
Con lo spazio unificatore si riesce anche ad ottenere il rientro della prima riga di un paragrafo cosa impossibile da con gli spazi "normali" o i tabulatori visto che questi verrebbero compattati dal browser in fase di visualizzazione.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
MIO SITO WEB
Di seguito elencheremo I responsabile dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
I commenti
In un documento HTML si possono inserire commenti e annotazioni che non verranno visualizzate ma che
possono essere utili per chi esamina il codice sorgente. I commenti devono essere racchiusi tra i caratteri: .
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
Di seguito elencheremo I responsabile dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
Uso dei colori
In un documento HTML si possono gestire i colori dello sfondo e del testo e si può definire un'immagine come sfondo usando alcuni attributi del tag body. Come prerequisito occorre però conoscere i codici RGB (Red,Green, Blu) dei colori: tali codici sono costituiti da tre coppie di numeri esadecimali che specificano
rispettivamente la quantità di rosso, di verde e di blu presenti nel colore (combinando in vario modo questi trecolori fondamentali si ottengono infatti tutti i colori possibili). Per indicare il verde si dovrà avere il massimo di verde e niente rosso e blu e quindi il codice sarà #00FF00. Ogni codice esadecimale deve essere preceduto dal simbolo di cancelletto "#". I codici dei colori più usati sono:
COLORE
CODICE RGB
Bianco
#FFFFFF
Marrone
#800000
Rosso
#FF0000
Verde
#00FF00
Blu
#0000FF
Giallo
#FFFF00
Fucsia
#FF00FF
Ciano
#00FFFF
Blu scuro
#000080
Grigio
#808080
Violetto
#800080
Nero
#000000
Gli attributi del tag body da usare sono BGCOLOR per il colore dello sfondo, TEXT per il colore del testo e BACKGROUND per usare un'immagine come sfondo.
Nel seguente esempio viene definito un documento con sfondo nero e testo bianco:
Esempio con i colori
Testo
Se si vuole usare l'immagine contenuta nel file clouds.jpg come sfondo si scrive invece:

PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
Di seguito elencheremo I responsabile dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
Elemento FONT
E' un elemento DI TESTO che consente di cambiare il colore, la dimensione ed il tipo dei caratteri utilizzando rispettivamente gli attributi COLOR, SIZE e FACE.
Per i colori si usano i codici esadecimali visti in precedenza, per il tipo carattere si usa il suo nome, per la
dimensione ci sono sette possibilità numerate da 1, la più piccola, a 7, la più grande. Si può però anche indicare una dimensione relativa rispetto alla dimensione normale del testo. Ecco alcuni esempi:
Esempio con dimensione 5
Esempio con dimensione minore di uno di quella normale
Esempio con dimensione maggiore di uno di quella normale
Gli ultimi due esempi equivalgono ai seguenti in cui si usano i tag SMALL e BIG:
Esempio con dimensione minore di uno di quella normale
Esempio con dimensione maggiore di uno di quella normale
Naturalmente i tre attributi possono essere combinati come nel seguente esempio:
Esempio con colore verde, grandezza 2
e tipo Arial
L'elemento FONT può essere utilizzato anche per modificare colore e dimensione delle intestazioni se viene
nidificato all'interno dei tag , ecc.
Possiamo anche nidificare l’elemento Font anche all’interno del tag Center

PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
L'officina numero uno in Puglia
La nostra serietà a servizio della gente
Soddisfatti o rimborsati
Il tuo primo intervento è gratuito
VIENI A TROVARCI
E NON DIMENTICARE DI CHIEDERE L'OMAGGIO CHE ABBIAMO PREPARATO SOLO PER TE!
Di seguito elencheremo I responsabile dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
Ora eseguiamo le seguenti impostazioni:
• applicare in grassetto il testo Mio sito web;
• in corsivo il testo “L’officina numero uno in Puglia”;
• sottolineato il testo:” La nostra serietà a servizio della gente”
MIO SITO WEB
L'officina numero uno in Puglia
La nostra serietà a servizio della gente
ADDRESS
Il Tag Address viene utilizzato per inserire informazioni che riguardano l'autore del documento ed è contraddistinto dai tag e . Solitamente è posto al termine della pagina. Nell’esempio l’indirizzo è preceduto da una linea e per separare le righe si è usato il tag
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
L'officina numero uno in Puglia
La nostra serietà a servizio della gente
Soddisfatti o rimborsati
Il tuo primo intervento è gratuito
VIENI A TROVARCI
E NON DIMENTICARE DI CHIEDERE L'OMAGGIO CHE ABBIAMO PREPARATO SOLO PER TE!
Di seguito elencheremo I responsabile dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
Per info contatta: Rossi Paolo 123456789
[email protected]

Elemento DIV
L'elemento DI BLOCCO DIV suddivide il documento in sezioni ed è delimitato dai tag e . Ogni sezione può essere definita con un particolare allineamento del testo grazie all'uso degli stessi attributi visti per paragrafi e intestazioni. Se ad esempio si vuole centrare una porzione di testo composta da molti paragrafi, invece di centrarli uno ad uno si può ricorrere al tag DIV nel seguente modo:
testo da centrare
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
L'officina numero uno in Puglia
La nostra serietà a servizio della gente
Soddisfatti o rimborsati
Il tuo primo intervento è gratuito
VIENI A TROVARCI
E NON DIMENTICARE DI CHIEDERE L'OMAGGIO CHE ABBIAMO PREPARATO SOLO PER TE!
Di seguito elencheremo i responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
Per info contatta: Rossi Paolo 123456789
[email protected]
Tag PRE
E' un elemento DI BLOCCO che permette di visualizzare del testo nel modo in cui viene scritto nel file
sorgente, senza che gli spazi siano compattati dal browser. Tutto il testo contenuto fra i tag e viene visualizzato così come è scritto e viene usato un carattere monospaziato (generalmente il Courier).
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
L'officina numero uno in Puglia
La nostra serietà a servizio della gente
Soddisfatti o rimborsati
Il tuo primo intervento è gratuito
VIENI A TROVARCI
E NON DIMENTICARE DI CHIEDERE L'OMAGGIO CHE ABBIAMO PREPARATO SOLO PER TE!
Di seguito elencheremo i responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
La nostra officina va in vacanza solo ad agosto
ma un servizio di assistenza 24 ore su 24 è a tua disposizione
Per info contatta: Rossi Paolo 123456789
[email protected]
Tag SUBSCRIPT e SUPERSCRIPT
Sono elementi DI TESTO che servono a trasformare il testo rispettivamente in pedice e in apice. I tag sono
e , e .
Quindi per visualizzare in un documento la forma normale di un equazione di secondo grado si deve scrivere:
A*X2 +B*X+C=0
Apporta le seguenti modifiche
La nostra serietà aservizio della gente
Elementi EMPHASIS e STRONG
Sono elementi DI TESTO che servono rispettivamente a scrivere in corsivo e a enfatizzare quanto viene
racchiuso tra i rispettivi tag e , e . Con alcuni browser questi elementi hanno lo stesso effetto rispettivamente dei tag e .
aggiungere al nostro esempio le parti in grassetto:
Di seguito elencheremo i responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
Elenchi o Liste
Gli elenchi o liste sono elementi DI BLOCCO e sono fra i più usati in HTML insieme ai paragrafi e alle
intestazioni. Sono definiti cinque tipi di liste:
• liste numerate e ordinate
• liste puntate con richiamo grafico
• liste a glossario o di definizione
Liste numerate
I tag di inizio e fine di una lista numerata sono e ; ciascuna voce dell'elenco deve essere poi
preceduta dal marcatore che non necessita obbligatoriamente del corrispondente . E' possibile
stabilire il tipo di numerazione desiderata con l'attributo TYPE del tag :
TYPE="1" numeri arabi
TYPE="a" carattere minuscolo
TYPE="A" carattere maiuscolo
TYPE="i" numeri romani minuscoli
TYPE="I" numeri romani maiuscoli
Inoltre si può stabilire il punto di partenza della numerazione con l'attributo START.
Le impostazioni di default sono: numerazione araba e partenza da 1.
Anche il tag prevede un attributo, VALUE per assegnare ad una certa voce un valore specifico.
Il seguente codice:
Penne
Matite
Quaderni
Libri
Zaini
viene visualizzato dal browser nel seguente modo:
1. Penne
2. Matite
3. Quaderni
5. Libri
6. Zaini
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
L'officina numero uno in Puglia
La nostra serietà aservizio della gente
Soddisfatti o rimborsati
Il tuo primo intervento è gratuito
VIENI A TROVARCI
E NON DIMENTICARE DI CHIEDERE L'OMAGGIO CHE ABBIAMO PREPARATO SOLO PER TE!
Di seguito elencheremo i responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
I PUNTI DA SEGUIRE PER UN'AUTO SEMPRE A PUNTO
CONTROLLO PERIODICO DEL LIVELLO OLIO MOTORE
CONTROLLO PERIODICO REFRIGERANTE IMPIANTO DI RAFFREDDAMENTO
ISPEZIONE PASTICCHE FRENI
CONTROLLO PERIODICO LIVELLO LIQUIDO FRENI
VERIFICA PERIODICA PRESSIONE PNEUMATICI
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
La nostra officina va in vacanza solo ad agosto
ma un servizio di assistenza 24 ore su 24 è a tua disposizione
Per info contatta: Rossi Paolo 123456789
[email protected]
In questo esempio la lista contiene solo testo non formattato; è comunque possibile inserire qualsiasi elemento di blocco o di testo come voce dell'elenco.

Nel nostro esempio formatta l’elenco utilizzando i seguenti Tag
CONTROLLO PERIODICO DEL LIVELLO OLIO MOTORE
CONTROLLO PERIODICO REFRIGERANTE IMPIANTO DI RAFFREDDAMENTO
ISPEZIONE PASTICCHE FRENI
CONTROLLO PERIODICO LIVELLO LIQUIDO FRENI
VERIFICA PERIODICA PRESSIONE PNEUMATICI
Liste puntate
I tag di inizio e fine di una lista non numerata sono e ; ciascuna voce dell'elenco deve essere poi preceduta dal marcatore che non necessita obbligatoriamente del corrispondente . E' possibile
stabilire il tipo di carattere di richiamo degli elementi con l'attributo TYPE:
TYPE="CIRCLE" cerchio vuoto
TYPE="DISC" cerchio pieno
TYPE="SQUARE" quadrato
E' importante notare che le liste (anche quelle numerate) possono essere nidificate in modo da creare delle
sottoliste. I caratteri standard di richiamo sono il disco per le liste principali, il cerchio per le sottoliste di primo livello e il quadrato per le altre.
Esempio (i rientri utilizzati nel sorgente HTML hanno il solo scopo di aumentare la leggibilità dello stesso in
quanto, come più volte detto, gli spazi sono ignorati dal browser):
Hardware
Unità centrale
CPU
Memoria centrale
Clock
Periferiche
Memorie di massa
Nastro
Floppy Disk
Hard Disk
CD-ROM
Stampante
Tastiera
Mouse
Schermo
Software
Software di base
Software applicativo
Il risultato è:

PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
L'officina numero uno in Puglia
La nostra serietà aservizio della gente
Soddisfatti o rimborsati
LE NOSTRE SEDI
Provincia di Taranto
Martina Franca
Zona industriale
Via Taranto
Valle d'Itria
Grottaglie
Zona Industriale
Rione Le Ceramiche
Rione Stanic
Rione Carrassi
Rione Rosalba
Rione Poggiofranco
Rione San Vito
Rione San Giorgio
Via Lecce
Crispiano
Rione Le Masserie
Zona Artigianale
Il tuo primo intervento è gratuito
VIENI A TROVARCI
E NON DIMENTICARE DI CHIEDERE L'OMAGGIO CHE ABBIAMO PREPARATO SOLO PER TE!
Di seguito elencheremo i responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
I PUNTI DA SEGUIRE PER UN'AUTO SEMPRE A PUNTO
CONTROLLO PERIODICO DEL LIVELLO OLIO MOTORE
CONTROLLO PERIODICO REFRIGERANTE IMPIANTO DI RAFFREDDAMENTO
ISPEZIONE PASTICCHE FRENI
CONTROLLO PERIODICO LIVELLO LIQUIDO FRENI
VERIFICA PERIODICA PRESSIONE PNEUMATICI
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
La nostra officina va in vacanza solo ad agosto
ma un servizio di assistenza 24 ore su 24 è a tua disposizione
Per info contatta: Rossi Paolo 123456789
[email protected]
Liste a glossario
Le liste a glossario sono delimitate dai tag e ; le voci dell'elenco sono contrassegnati dal marcatore e viene usato per fornirne la definizione.
Esempio:
Hardware
Insieme degli elementi del computer che hanno una consistenza fisica
Software
Insieme dei programmi.
Viene così visualizzato:
Hardware
Insieme degli elementi del computer che hanno una consistenza fisica
Software
Insieme dei programmi.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
L'officina numero uno in Puglia
La nostra serietà aservizio della gente
Soddisfatti o rimborsati
LE NOSTRE SEDI
Provincia di Taranto
Martina Franca
Zona industriale
Via Taranto
Valle d'Itria
Grottaglie
Zona Industriale
Rione Le Ceramiche
Rione Stanic
Rione Carrassi
Rione Rosalba
Rione Poggiofranco
Rione San Vito
Rione San Giorgio
Via Lecce
Crispiano
Rione Le Masserie
Zona Artigianale
Il tuo primo intervento è gratuito
VIENI A TROVARCI
E NON DIMENTICARE DI CHIEDERE L'OMAGGIO CHE ABBIAMO PREPARATO SOLO PER TE!
Di seguito elencheremo i responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
I PUNTI DA SEGUIRE PER UN'AUTO SEMPRE A PUNTO
CONTROLLO PERIODICO DEL LIVELLO OLIO MOTORE
CONTROLLO PERIODICO REFRIGERANTE IMPIANTO DI RAFFREDDAMENTO
ISPEZIONE PASTICCHE FRENI
CONTROLLO PERIODICO LIVELLO LIQUIDO FRENI
VERIFICA PERIODICA PRESSIONE PNEUMATICI
Intervallo dei tagliandi
30.000 Km
Sotituzione olio, pasticche freni, filtro olio e aria
60.000 Km
Sostituzione olio, filtro olio e aria, filtro antipolline
90.000 Km
Sostituizione olio, filtri vari, cinghia di distribuzione
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
La nostra officina va in vacanza solo ad agosto
ma un servizio di assistenza 24 ore su 24 è a tua disposizione
Per info contatta: Rossi Paolo 123456789
[email protected]
2.10 Collegamenti
La possibilità di definire collegamenti ipertestuali o LINK tra i vari documenti presenti nel WEB è senz'altro uno dei motivi del suo successo in quanto permette di passare facilmente da una pagina ad un'altra senza
preoccuparsi della sua collocazione fisica. Essa può essere infatti memorizzata sulla stessa macchina o su una diversa, distante anche migliaia di chilometri (ma comunque collegata ad Internet). Inoltre è anche possibile definire dei collegamenti ad altre parti dello stesso documento.
L'entità HTML da usare per definire i collegamenti è chiamata àncora ed è un elemento DI TESTO. I tag da
usare sono e e sono previsti vari attributi tra i quali i più usati sono NAME e HREF. Il testo che si trova tra i tag di apertura e chiusura (senza considerare gli attributi) è quello che il browser evidenzierà in
qualche modo per attirare l'attenzione sulla presenza del link.
Ogni browser mette in risalto i link in modo diverso e di solito vengono differenziati quelli già "visitati", da
quelli da visitare e da quelli attivi (un link è attivo per il breve tempo in cui viene selezionato dall'utente).
NETSCAPE NAVIGATOR e INTERNET EXPLORER usano rispettivamente i seguenti colori standard: blu
(#0000FF), violetto (#800080) e rosso (#FF0000).
Si possono comunque impostare i colori del testo dei collegamenti secondo i nostri gusti ricorrendo a degli
attributi del tag e precisamente: LINK per il colore dei collegamenti, VLINK per il colore dei
collegamenti già visitati, ALINK per il colore dei collegamenti attivi.
Per esempio potremmo avere rispettivamente verde, marrone, fucsia:
Collegamenti esterni
Per collegamenti esterni si intendono quelli che puntano a documenti memorizzati su macchine diverse. Per
definire questo tipo di collegamenti è necessario usare l'attributo HREF (che sta per Hypertext REFerence)
seguito dall'URL della pagina alla quale ci si vuole collegare.
Esempio:
Ministero della Pubblica Istruzione
La scritta Ministero della Pubblica Istruzione viene evidenziata dal browser; la selezione di tale voce con il
mouse o con la tastiera attiva il collegamento con il sito del M.P.I. ed il browser visualizza la pagina iniziale o "di benvenuto" di tale sito. Di solito è la pagina contenuta nel file index.html che viene aperta per default se, come nell'esempio in questione, non è indicato espressamente un nome di file.
Altro esempio:
Corriere della Sera
In questo modo si definisce un collegamento con la pagina "benven.htm" del sito del Corriere della Sera.
PRIMO DOCUMENTO HTML 5S ITIS MAJORANA
visualizzata dai browser quando si apre la pagina->
MIO SITO WEB
L'officina numero uno in Puglia
La nostra serietà aservizio della gente
Soddisfatti o rimborsati
Il paradiso dell'auto
LE NOSTRE SEDI
Provincia di Taranto
Martina Franca
Zona industriale
Via Taranto
Valle d'Itria
Grottaglie
Zona Industriale
Rione Le Ceramiche
Rione Stanic
Rione Carrassi
Rione Rosalba
Rione Poggiofranco
Rione San Vito
Rione San Giorgio
Via Lecce
Crispiano
Rione Le Masserie
Zona Artigianale
Il tuo primo intervento è gratuito
VIENI A TROVARCI
E NON DIMENTICARE DI CHIEDERE L'OMAGGIO CHE ABBIAMO PREPARATO SOLO PER TE!
Di seguito elencheremo i responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO
I PUNTI DA SEGUIRE PER UN'AUTO SEMPRE A PUNTO
CONTROLLO PERIODICO DEL LIVELLO OLIO MOTORE
CONTROLLO PERIODICO REFRIGERANTE IMPIANTO DI RAFFREDDAMENTO
ISPEZIONE PASTICCHE FRENI
CONTROLLO PERIODICO LIVELLO LIQUIDO FRENI
VERIFICA PERIODICA PRESSIONE PNEUMATICI
Intervallo dei tagliandi
30.000 Km
Sotituzione olio, pasticche freni, filtro olio e aria
60.000 Km
Sostituzione olio, filtro olio e aria, filtro antipolline
90.000 Km
Sostituizione olio, filtri vari, cinghia di distribuzione
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
La nostra officina va in vacanza solo ad agosto
ma un servizio di assistenza 24 ore su 24 è a tua disposizione
Per info contatta: Rossi Paolo 123456789
[email protected]

Collegamenti a etichette in un documento
L'attributo NAME del tag permette di inserire delle etichette che fanno riferimento a diverse sezioni di un documento. Tali etichette possono essere sfruttate quando si inseriscono, in un'altra pagina HTML, dei link al documento che le contiene: è infatti possibile collegarsi a quest'ultimo "puntando" ad una sezione specifica e non all'inizio del testo come avviene di solito.
Se ad esempio definiamo una pagina di nome "esempio.html" sulla macchina "giobix.mat.besta" con delle
etichette nel modo seguente:
…..
…..
Esempio di etichetta numero 1
…..
…..
Esempio di etichetta numero 2
è poi possibile collegarsi ad essa da un altro documento in vari modi come mostrato di seguito:
Da qui ci si collega all'inizio della
pagina esempio.
Da qui ci si collega alla pagina
esempio all'etichetta 1.
Da qui ci si collega alla pagina
esempio all'etichetta 2.
Quindi per collegarsi ad una certa etichetta di un documento basta aggiungere al riferimento di quest'ultimo
(URL e nome) il simbolo "#" seguito dal nome dell'etichetta a cui vogliamo fare riferimento.
Creare il seguente file Html e salvarlo con il nome “SecondaPagina.html” nella stessa cartella del file “mio web.html”
Seconda pagina 5S ITIS MAJORANA
Il Nostro Mercato dell’Usato
Ancora creare il seguente file Html e salvarlo con il nome “TerzaPagina.html” in una cartella che creerete nel “disco locale C:” e che chiamerete “Esempi”:
Terza Pagina 5S ITIS MAJORANA
AUTO NUOVE

Ora in questi due nuovi file Html inseriremo dei collegamenti ad una determinata sezione del file “mio web” utilizzando il tag con l’attributo Name.
Nel file TerzaPagina.html inserirete i seguenti link (collegamenti) al file mio web.html:
Terza Pagina 5S ITIS MAJORANA
AUTO NUOVE
Home page

Nel file SecondaPagina.html inserirete i seguenti link (collegamenti) al file mio web.html:
Seconda pagina 5S ITIS MAJORANA
IL NOSTRO MERCATO DELL'USATO
Home page
La nostra serietà aservizio della gente
Soddisfatti o rimborsati
AUto Nuove
Mercato dell'usato
Il paradiso dell'auto

Grottaglie
Zona Industriale
Rione Le Ceramiche
Rione Stanic
Rione Carrassi
Rione Rosalba
Rione Poggiofranco
Rione San Vito
Rione San Giorgio
Via Lecce
Crispiano
Rione Le Masserie
Zona Artigianale
Il tuo primo intervento è gratuito
VIENI A TROVARCI
E NON DIMENTICARE DI CHIEDERE L'OMAGGIO CHE ABBIAMO PREPARATO SOLO PER TE!
Di seguito elencheremo i responsabili dell’officina autorizzata
AUDI
RANIERI
BRUNO
GUARINO

CONTROLLO PERIODICO DEL LIVELLO OLIO MOTORE
CONTROLLO PERIODICO REFRIGERANTE IMPIANTO DI RAFFREDDAMENTO
ISPEZIONE PASTICCHE FRENI
CONTROLLO PERIODICO LIVELLO LIQUIDO FRENI
VERIFICA PERIODICA PRESSIONE PNEUMATICI
Intervallo dei tagliandi
30.000 Km
Sotituzione olio, pasticche freni, filtro olio e aria
60.000 Km
Sostituzione olio, filtro olio e aria, filtro antipolline
90.000 Km
Sostituizione olio, filtri vari, cinghia di distribuzione
Manutenzione motore
Responsabile Rossi Paolo Addetti Bianchi Giulio & Verdi Mario
Caio Andrea Catalano Biagio
Cambio olio
Sostituzione candele
Preparazione nuove candele
Eliminazione delle nuove candele
Regolazione della distanza fra gli elettrodi
L’attività sottolencata può dare al cliente una bozza di preventivo
  L'officina esegue anche       lavori di carrozzeria
La nostra officina va in vacanza solo ad agosto
ma un servizio di assistenza 24 ore su 24 è a tua disposizione
Per info contatta: Rossi Paolo 123456789
[email protected]
Da notare che le etichette inserite nel file mio web possono essere tranquillamente utilizzate anche dai link creati all’interno dello stesso file, praticamente e possibile creare un collegamento ad una determinata sezione della stessa pagina. Crea ora un collegamento alla sezione della manutenzione e prevedi di ritornare dal piè di pagina all’inizio della pagina web.