27/9/2015 html

http://www.giordanicaserta.it/frapec/vba/notaHtml.html 1/6

Hyper Text Markup Language

Pagine WebCodici dei colori

caratteri speciali

torna a frapec

Un riferimento al linguaggio disponibile presso w3scool.

Una panoramica sul linguaggio HTMLIl World Wide Web un insieme di documenti e di risorse contenute in calcolatori sparsi nel mondo, collegati tramiteInternet.

Ciascun documento pu contenere collegamenti (link, in inglese) ad altri documenti e risorse disponibili su altri computer.

L'insieme di tutti i collegamenti forma una maglia che viene paragonata idealmente ad una ragnatela. Web significa appuntoragnatela.

Il Web nacque per migliorare la distribuzione delle informazioni tra le universit e i centri di ricerca. L'esigenza deiricercatori era ostacolata dalla difficolt di distribuire risorse eterogenee. Ad esempio il trasferimento di file, lapartecipazione ad un Newsgroup, ad una discussione su forum, e cos via.

Il Web consente l'accesso a tutte queste risorse tramite un solo strumento: il browser, cio il programma utilizzato per"sfogliare" i contenuti della rete.

I documenti che costituiscono il Web, denominati pagine Web, vengono scritti in HTML (Hyper Text Markup Language,Linguaggio Ipertestuale a Marcatori), un linguaggio descrittivo basato sulla presenza nel documento di marcatori, questielementi svolgono la funzione di parentesi, nel senso che racchiudono parti che vengono interpretate dal programma, chelegge il documento, e vengono elaborate in modo appropriato.

La pagina HTML, a differenza delle pagine cartacee, non ha delle dimensioni fisiche prestabilite: si tratta di una entitcontenente informazioni. Quindi, una pagina HTML pu corrispondere a svariate pagine cartacee.

Un computer della rete identificato da un nome (o anche da un indirizzo). Il computer ospita (Host in inglese) documentie risorse, che nel loro insieme costituiscono un sito Web. La pagina principale, predefinita dall'autore, viene chiamata HomePage e rappresenta il punto di partenza per l'esplorazione del sito.

Breve storia

La prima versione dell'HTML si rivolgeva prevalentemente ad un ristretto numero di utenti, tutti con conoscenza e culturascientifica. Il linguaggio serviva unicamente per formattare le relazioni ed i documenti della comunit scientifica.

Era fortemente limitativo, e permetteva di descrivere la pagina "a grandi linee", senza scendere effettivamente nei"particolari". Tramite il ristretto set di tag disponibili era possibile indicare il titolo, formattare i paragrafi e realizzare delleliste puntate e numerate. Era anche possibile evidenziare porzioni di testo, introdurre delle immagini, e soprattuttointrodurre dei collegamenti ipertestuali, detti "link", in modo che una pagina che parlasse - ad esempio - di "botanica", dessela possibilit di "saltare" verso altri siti che trattavano lo stesso argomento (o altri argomenti correlati).

Nonostante queste limitazioni e la ridottissima banda passante che caratterizzava la Rete ai primi anni '90, il Web ebbe unsuccesso strepitoso. Il successo presso il grande pubblico di utenti non tecnici fece sorgere nuove necessit, mentre il Webiniziava ad assumere una nuova natura commerciale.

Per rispondere alle nuove esigenze, furono introdotti nuovi tag per la formattazione delle immagini e del testo e, soprattutto,le tabelle, impiegate anche per posizionare gli elementi sulla pagina. Furono inoltre introdotte le texture di sfondo chevivacizzano l'aspetto.

Nonostante i grandi cambiamenti, per, si era ancora lontani dal completo controllo dell'aspetto, ancora fortementedipendente dal browser.

La competitivit tra i produttori di browser cominci a manifestarsi con le incompatibilit delle pagine. Infatti, elementiinnovativi come i Frame (letteralmente "cornici") tramite i quali era possibile visualizzare ed organizzarecontemporaneamente pi pagine HTML in una stessa finestra non erano riconosciuti da tutti i browser. La mancanza dicompatibilit per un tag ha come conseguenza che un documento diventa accessibile ad un pi ristretto bacino di utenza.

I MarcatoriIl concetto di Marcatore nasce nelle tipografie e si riferisce alle note scritte dall'impaginatore intorno al documento perdescrivere l'impaginazione finale del documento stesso. Un linguaggio basato su marcatori un insieme di istruzioni chedefiniscono come debbono essere elaborati ed organizzati i dati del documento.

I marcatori vengono anche chiamati tag. In generale si utilizza un tag per indicare l'inizio del testo da trattare ed un tag perdefinirne la fine. Il linguaggio a marcatori si occupa di definire la struttura ed il contenuto del documento stesso. Tramite itag si procede nella definizione delle parti del documento.

Per dare un esempio di elemento si pensi a dei numeri di telefono contenuti nel documento. Tramite i tag

....

sar possibile riconoscere immediatamente il tipo delle informazioni e procedere ad una rappresentazione che le metta inevidenza.

Ovviamente, per poter utilizzare e leggere una pagina scritta in HTML serve un browser che ne consenta la lettura.

In definitiva, l'HTML un linguaggio ideato per organizzare ed archiviare informazioni di natura scientifica consentendoneil reperimento facilmente e velocemente. Un'altra caratteristica che ha influenzato la stesura dell'HTML l'indipendenzadalla piattaforma su cui si legge il documento.

Tra gli elementi che l'HTML consente di definire all'interno di un documento vi sono: titolo, intestazione, corpo del testo,elenchi numerati e puntati e collegamenti ipertestuali;

Ciascun elemento viene individuato tramite un tag iniziale, racchiuso tra i segni di minore e maggiore (< e >), ed un tagfinale, racchiuso tra i caratteri (). Il tag case insensitive, cio pu essere scritto sia maiuscolo che minuscolo, ma ingenere buona norma scriverli tutti nella stessa maniera per facilitare la lettura e la manutenzione del documento. I tagpossono essere raggruppati per tipologia:

formattazione della struttura documento,formattazione del testo,inserimento di elementi ipertestuali,inserimento di immagini,

27/9/2015 html

http://www.giordanicaserta.it/frapec/vba/notaHtml.html 2/6

inserimento di elementi multimediali,formattazione di caratteri,form e moduli,tabelle,documenti attivi e dinamici,frame.

Dichiarazione DOCTYPE

La stesura di un documento prevede prima di tutto l'identificazione del documento tramite il tag speciale

La dichiarazione DOCTYPE deve essere la prima riga di ogni documento HTML e deve precedere qualsiasi altro tag.

La dichiarazione DOCTYPE non un tag HTML, un'informazione rivolta al browser relativa alla versione del linguaggiousato per scrivere la pagina.

La dichiarazione DOCTYPE fa riferimento ad un Document Type Definition (DTD) che specifica le regole dellinguaggio, affinch i browser possano rappresentare correttamente la pagina. Per gli esempi qui proposti la dichiarazionepu essere omessa, oppure si pu adottare la seguente:

Per una comprensione del significato dei vari campi (peraltro inutile perch la linea non consente modifiche) consultare latabella: W3C

Dopo la dichiarazione DOCTYPE seguono i tag ... , all'interno di questi viene riportata l'intestazione..., comprendente il titolo del documento e le informazioni sull'autore e sul contenuto della pagina. e ilcorpo del documento delimitato dai tag .... All'interno di quest'ultimo risiederanno le informazioni chedovranno essere rappresentate. Un documento di base quindi:

La regola di rispettare una corretta indentazione e l'aggiunta di commenti esaustivi facilitano la manutenzione dei documentistessi.

La dichiarazione DOCTYPE denota il fatto che l'HTML si evolve, e nella sua trasformazione molti attributi e tag sono statidichiarati deprecated, intendendo che si presume che essi saranno aboliti in una versione finale dell'HTML.

L'indirizzo di una pagina webindirizzo: Un URL (acronimo di Uniform Resource Locator) il metodo usato nei file HTML per indicare la posizione diuna risorsa a cui si vuole accedere.

Spesso questa risorsa il nome di un file ottenibile comunicando con un server mediante un protocollo, cio un insieme diconvenzioni che permettono di capirsi durante un colloquio. Un URL ha la seguenti parti:

protocollo://server.dominio[:porta]/path/nomefile[#sezione]

dove Protocollo vale spesso http per indicare che nomefile va prelevato da server.dominio.

Altri protocolli sono ftp, news, mailto oppure telnet.

Il numero della porta va specificato solo se diverso da quello che per default gestisce il protocollo indicato.

Se il documento HTML, il suo nome potrebbe essere seguito dal carattere # e dal nome di una sezione all'interno del filerichiesto.

Negli URL obbligatorio separare le varie componenti con il carattere "/", indipendentemente da quello che si fa nelproprio sistema operativo.

Se un URL termina con "/" significa che si sta specificando una directory. bene considerare l'URL sempre case sensitive,anche se il sistema operativo che si sta usando non fa differenza tra maiuscole e minuscole nei nomi dei file. Quindi,bisogna sempre scrivere i nomi con le lettere maiuscole e minuscole in esatta corrispondenza a quanto memorizzato sulserver.

Nella maggior parte dei sistemi operativi esiste il concetto di directory corrente; lo stesso avviene per gli URL che possonoessere assoluti o relativi all'URL corrente, cio la pagina che mostra il browser al momento.

Un URL assoluto contiene sempre tutte le informazioni necessarie alla sua localizzazione: protocollo, server, path assoluto enome del documento. In un URL relativo invece si specifica solo un path relativo per individuare il documento, partendodal path del documento corrente.

I Commenti sono delimitati da . Possono apparire in qualsiasi punto, all'esterno dei tag.

L'HTML trasforma in spazio le tabulazioni, i vai a capo e pi spazi consecutivi.

I nomi dei tag e degli attributi sono case insensitive, quindi possono essere scritti indifferentemente in maiuscolo o inminuscolo. Il valore degli attributi invece non sempre case insensitive.

Caratteri speciali

27/9/2015 html

http://www.giordanicaserta.it/frapec/vba/notaHtml.html 3/6

Consulta la tabella di codifica dei caratteri speciali

I caratteri "" non possono essere usati in un file HTML, perch sono riservati a individuare i tag del linguaggio. Alloro posto di usano "" che sono le abbreviazioni di "less than" e "greater than". Per questo motivo, anche "&" un carattere speciale: serve a introdurre i caratteri riservati.

Per scrivere "&" nel proprio documento HTML, necessario digitare la sequenza "&" (abbreviazione di ampersand).

La Tabella mostra i nomi di altri caratteri riservati. Questi nomi sono case sensitive.

Per forzare pi spazi consecutivi si usa la sequenza (non breakeble space).

l'apice, codificato con " serve quando bisogna inserire delle virgolette dentro il valore di un attributo, che gi delimitato da virgolette. ad esempio:

value="ITI "F. Giordani&quot"

I colori

Black Green

Silver Lime

Gray Olive

White Yellow

Maroon Navy Red

Blue Purple

Teal Fuchsia

Aqua

Consulta la tabella dei colori.

Alcuni tag permettono di specificare un colore come attributo.

In HTML i colori si possono esprimere in due modi:

usando dei nomi mnemonici standard, alcuni dei quali sono Black, Green, Silver, Lime, Gray, Olive,White, Yellow, Maroon, Navy Red, Blue, Purple, Teal, Fuchsia e Aqua;scrivendo la stringa "#RRGGBB", dove RR, GG e BB sono tre numeri esadecimali da 0 a FF cheindicano rispettivamente le componenti di rosso, verde e blu che si vogliono dare al colore.

Struttura di una pagina WebLa pagina Web viene scritta usando il linguaggio HTML (HyperText Markup Language), che consiste in una descrizionedell'aspetto che si vuole dare alla pagina. Il linguaggio Html non un linguaggio di programmazione.

Il codice HTML pu essere scritto tramite il Blocco Note di Windows oppure tramite un editor specifico.

Gli elementi di HTML sono chiamati TAG, o marcatori, e sono racchiusi tra i simboli minore di ().Normalmente indifferente scrivere i tag in maiuscolo o in minuscolo. Quasi tutti i tag hanno un corrispondente tag dichiusura, per indicare il punto in cui deve terminare l'applicazione di una caratteristica del testo. Il tag di chiusura ha lo stessonome del tag di apertura con l'aggiunta del carattere slash:

Esempio:

...

Un tag pu specificare anche degli attributi (o propriet). Esempio:

font il tag,size una propriet del tag font,2 il valore da assegnare alla propriet size

Gli attributi sono contenuti solo nel tag di apertura. Il valore all'attributo viene assegnato specificandolo tra le virgolettedopo il segno di =.

La struttura di un documento HTML composta da due sezioni: Intestazione e area del documento:

informazioni varie (titolo del documento, autore, argomenti trattati, stili, ecc..)

In questa sezione viene inserito tutto quelloche deve apparire nell'area principale della finestradel browser.

27/9/2015 html

http://www.giordanicaserta.it/frapec/vba/notaHtml.html 4/6

stile H1

stile H2

...

stile H6

Commentiun commento inizia con la sequenza di caratteri

I commenti servono all'autore della pagina per inserire dei promemoria che non devono essere mostrati nel browser

il documentoIl tag descrive il documento, cio il contenuto della pagina web. attributi del tag body:

background="indirizzo": specifica un'immagine di sfondo della paginabgcolor="RGB": specifica il colore di sfondo della pagina,text="RGB": specifica il colore del testo.link="RGB": specifica il colore dei link non visitatialink="RGB": (accessed link) specifica il colore che il link assume tra il clic e l'apertura del linkvlink="RGB": (visited link) specifica il colore dei link visitati.

L'uso di questi attributi stato dichiarato deprecato, cio si suggerisce di ricorrere ai fogli di stile e di non usare gli attributi.

intestazione del documentoil tag viene collocato nella parte iniziale del codice html del documento

contiene la descrizione del documento, quale ad esempio, l'autore, i riferimenti agli script e ai fogli di stili esterni, ecc. il contenuto della sezione head non viene mostrato dal browser

Attributi del caratteregrassettoIl tag (Bold) applica il grassetto al testo compreso tra i tag b.

applicare il corsivoIl testo da mostrare in corsivo viene racchiuso tra i tag (italic)

il seguente esempio mostra un testo in corsivo

Il browser mostra un testo in corsivo

ingrandire il carattereil tag aumenta l'altezza del font.

il testo compreso tra i tag viene mostrato ingrandito

Il tag big applica la dimensione del font immediatamente superiore a quella in uso. I tag big possono essere nidificati.

ridurre l'altezza del testoEsempio:Il testo racchiuso tra i tag small viene mostrato con un'altezza minore

il browser mostra:Il testo racchiuso tra i tag small viene mostrato con un'altezza minore

Tipo del carattere Il tag permette di cambiare il tipo del carattere ad esempio il tag

mostra la parte di testo che segue, fino alla chiusura del tag, con il carattere Courier New Altri attributi del tag font: size e color

TitoliPer assegnare uno dei titoli predefiniti ad un paragrafo si usa il tag ... , dove n unnumero compreso tra 1 e 6.

Ci sono 6 stili per i titoli: da h1 ad h6.

L'ordine della numerazione si riferisce alla gerarchia degli argomenti. Ad esempio si sceglie il titolo H1per il titolo del capitolo, si sceglie il titolo H2 per i titoli dei paragrafi contenuti nel capitolo, e cos via.

Esercizio

Lezioni di HTML

introduzione al linguaggio HTMLPagina Web di provaProvare i tag

27/9/2015 html

http://www.giordanicaserta.it/frapec/vba/notaHtml.html 5/6

i tag ... delimitano un paragrafo, ovvero una sezione compresa tra due caratteri vai a capo

i tag ... delimitano una parte di testo che viene mostrata in grassetto. La b del tag l'iniziale della parola bold, che significa grassetto. ;

i tag ... delimitano una parte di testo che viene mostrata in corsivo. La i del tag l'iniziale della parola italic, che significa corsivo.

i tag ... delimitano una parte di testo che viene mostrata in una dimensione ingrandita. I tag possono essere nidificati.

i tag ... delimitano una parte di testo che viene mostrata in una dimensione ridotta. I tag possono essere nidificati.

Problemi:Modificare il colore di sfondo usando altre combinazioni di colori RGB, oppure usare i nomi mnemonici (ad esempio"gray")

Creare un'immagine (gif o jpg) di dimensione 80x80 pixel (ad esempio un quadrato) e salvarla nella stessa cartella dellapagina web. Usarla poi come immagine di sfondo.

Inserire un tag font per modificare il colore di una parte del testo.

Utilizzare i tag big nidificati per ottenere un effetto del tipo: ABCDEFG

Musica, Video, ...Il tag inserisce un oggetto.

ad esempio inserendo il tag:

Quando la pagina viene aperta inizia un brano audio e compare una barra che permette di fermare la riproduzione delbrano.

il tag imgInserimento di immagini nella pagina Web.

sintassi:

mostra un'immagine. Il tag img non possiede il tag di chiusura.

Attributi del tag img:

src: l'indirizzo del file,alt: un testo alternativo da mostrare nel caso che l'immagine non venga trovata,title: un suggerimento che compare accanto al puntatore del mouse quando questo si trova sopral'immagine.

Attributi di paragrafoinserire una lineaIl tag: (Horizontal Rule) inserisce una linea orizzontale, il cui scopo potrebbe essere quello di evidenziare unaseparazione tra sezioni del documento.

Il tag hr non possiede il tag di chiusura.

Attributi del tag hr sono:

Align="CENTER" (default) la linea appare al centro"LEFT" la linea si appoggia al margine sinistro della pagina"RIGHT" la linea si appoggia al margine destro della pagina

width (larghezza in %)size (spessore in punti)color.

Allineamento a centro

Il tag ... mostra il testo al centro della riga successiva.

testo centrato

27/9/2015 html

http://www.giordanicaserta.it/frapec/vba/notaHtml.html 6/6

Esempio:Questo un normale paragrafo. Sembra scritto bene, ma potrebbe essere migliorato se fosse in grassetto, corsivo, blu

alcuni tag riconoscono l'attributo ALIGN che specifica l'allineamento. Il tag consente di allineare a centro unblocco di contenuto, evitando di specificare l'allineamento di ciascun elemento.

Il valore dell'attributo ALIGN di un tag ha la priorit sull'allineamento specificato con il tag .

Passare alla riga successiva

il tag (line break) Inserisce un vai a capo, senza aggiungere spazi.

Il tag BR Non richiede il tag di chiusura.

Incorniciare l'immagine:

Dopo il tag IMG c' il testo di questo paragrafo. Solo la prima linea del paragrafo si trova allineata con l'immagine. Se siinserisce un tag BR l'immagine e il testo occupano righe separate. Ci sono situazioni in cui si desidera che il testo si troviaccanto all'immagine.

Ad esempio, in questo paragrafo l'immagine allineata a sinistra.

Le linee del testo vengono scritte sul lato destro dell'immagine e continuano al di sotto dell'immagine. Per ottenerequesto effetto, stato assegnato il valore LEFT alla propriet ALIGN del tag IMG.

Questa una linea separata dal paragrafo precedente.

In questo paragrafo l'immagine allineata a destra (con l'attributo ALIGN="RIGHT"), segue il testo

Questo testo inizia su una nuova linea.

SPANIl tag SPAN delimita un testo a cui si vogliono modificare le propriet attualmente applicate al testo.

Esempio:

Questo un normale paragrafo. Sembra scritto bene, ma potrebbe essere migliorato se fosse in grassetto, corsivo, blu.

Problemi

Riferendosi al testo di esempio del problema precedente:

Allineare al centro tutti i titoli della pagina (tag h1 e h6)

Dopo l'ultimo titolo inserire una linea che occupi la terza parte della finestra, abbia uno spessore di 3 pixel e sia di colorerosso.

Inserire un'immagine e fare in modo che il testo compaia su uno dei lati, destro o sinistro, dell'immagine.