Benvenuti su questa mia guida dedicata a HTML. Nessuna pretesa,

Transcript

1 Il sito per imparare gratuitamente a fare pagine web. Menù Argomenti Home Page Web-Link Introduzione Elementi Struttura Formattaz. Testo Immagini Links Tabelle Elenchi o Liste Form o Moduli Frames Iframes Audio Applets e Flash JavaScript Guida CSS Forum di supporto Guida HTML Ver Dicembre 2010 Benvenuti su questa mia guida dedicata a HTML. Nessuna pretesa, vuole semplicemente essere una guida di aiuto con basi introduttive, qualcosa che illustri con esempi pratici le potenzialità di questo metalinguaggio che nonostante le continue evoluzioni del web continua ad essere il pilastro portante della rete. Nasce dalle molteplici domande che ricevevo in forma privata nella mia mailbox e da qualche anno ormai sul forum gratuito di supporto. Come potrete notare cerco di tenerla sempre aggiornata nonostante non sia facile visto il continuo evolversi della rete stessa, mi auguro con questo mio ennesimo sforzo di riuscire a soddisfare tutte (o quasi) le vostre esigenze. Se poi l'argomento dovesse interessarvi al punto tale di volerlo ulteriormente approfondire, la cosa migliore sarebbe affidarsi alla letteratura specializzata. Da modesto credo di aver trattato in queste pagine tutto quello che realmente serve per creare un buon sito web. Dicembre 2010: La guida è stata scritta nella sua prima versione nel Settembre del 1998 ed oggi molte cose sono cambiate, o sarebbe meglio dire evolute, grazie soprattutto all'uso dei CSS: fogli di stile, e ad alcune regole ben precise e più restrittive che hanno dato vita al XHTML (evoluzione del linguaggio html) entrambi regolati dal W3C, consorzio che si occupa proprio di questo argomento. Tutto quello che troverete in questa guida è e resta comunque perfettamente funzionante, vi informo che esiste una rubrica che tratta Xhtml con i fogli di style. La trovate su questo link: mentre qui la guida ai fogli di style CSS. Con questo aggiornamento mi prefiggo di rendere questa stessa guida adeguata e di conseguenza sempre al passo coi tempi. E' possibile scaricare la guida in due formati: e-book e pdf per poterla consultare comodamente off-line, cioè scollegati dalla rete. Sono gradite segnalazioni, commenti e qualsiasi altra cosa ritenuta utile al fine di migliorare il lavoro che sarà sempre e solo a beneficio di tutti quanti voi. Alcuni consigli per adoperarla al meglio: La versione PDF per ovvie ragioni, non dipendenti dalla mia volontà, non permette di vedere in pratica gli effetti procurati da script, applet e musica ma conserva a tutti gli effetti le indicazioni corrette per realizzare. Nel menù laterale trovate disposto verticalmente l'indice degli argomenti: tabelle, links, immagini ecc. Per ogni argomento esistono altri due menù disposti orizzontalmente che riportano in ordine alfabetico i nomi degli elementi o tags

2 Elementi o Tags: ed i relativi attributi, (sempre in ordine alfabetico o di assemblaggio codice). Attributi: Basterà un clik sul nome dell'elemento o su quello del suo attributo per raggiungere la descrizione. Alla fine di ogni descrizione una riga come questa sotto separa e conclude gli elementi, grazie alla piccola freccia verde posizionata a destra della riga separatrice sarà possibile (cliccandola) ritornare all'indice degli argomenti. HTML (Hyper Text Markup Language) è formato da definizioni, elementi (tags), questi impartiscono al browser (il programma usato per la navigazione) delle direttive ben precise al fine di ottenere il risultato a video, una sorta di interpretazione che varia a volte a seconda del tipo di browser adoperato. Si tratta dunque di conoscere il significato dei vari elementi e come questi possono essere combinati fra loro per avere la padronanza del linguaggio. Per la stesura di questo metalinguaggio si fa uso di un normale editor di testi, meglio se un editor specifico per HTML, cominciamo proprio da qui, cliccando su questo link sarà possibile scaricarne uno dalla rete. Cosa è un editor e cosa è il codice html? Un editor altro non è che uno strumento che ci consente di scrivere in modo semplice e veloce righe di codice html; quel codice che i vari browser di navigazione, qualunque essi siano, riconoscono ed interpretano. Si potrebbe paragonarlo ad un programma per videoscrittura, anzi sono molte le similitudini, con la sola differenza che il testo scritto da questi editors è formattato nel modo giusto per dare vita a pagine di ipertesto, da qui il nome sigla HTML: Hyper Text Markup Language. Gli editors per HTML si dividono in due categorie: Visuali: molto semplici, simili ai programmi di grafica, permettono di disegnare o semplicemente trascinare quello che serve all'interno del loro ambiente di sviluppo, operazione che genera automaticamente codice html valido. Testuali: bisogna scrivere il codice, quindi conoscerlo, offrono gli strumenti giusti con i suggerimenti necessari alle varie situazioni, si ha il pieno controllo di quello che si sta facendo superando così quelli che spesso sono i limiti degli editors visuali. Personalmente adopero: HomeSite da quando era di Allaire, poi Macromedia ed oggi Adobe, fermo alla sua versione 5.5 da anni, ma guarda

3 caso sempre molto attuale, lo trovo formidabile consapevole che si tratta di un parere del tutto soggettivo. Ha un solo difetto: costa, a differenza di molti altri editors distribuiti gratuitamente. Dopo quanto appena detto è abbastanza ovvio immaginare che il principiante si affiderà agli editors visuali. Non fatelo se non per prova. C'è chi consiglia di adoperare il notepad o il wordpad di windows, personalmente reputo la scelta a dir poco illogica, della serie "facciamoci del male da soli". Non capisco perchè mai si dovrebbe adoperare uno strumento che di html non ha nulla quando la rete offre ottimi programmi, alcuni addirittura gratuiti (freeware), che danno un grosso aiuto proprio nella stesura di questo tipo di codice. Chi avesse comunque deciso di affidarsi agli editors visuali può tranquillamente smettere di leggere il seguito di queste pagine, non gli serviranno a molto visto che parleremo di codice che l'editor visuale gestisce in assoluta autonomia. Un arrivederci a queste persone che probabilmente torneranno qui non appena insorgeranno le prime difficoltà dovute alla mancata realizzazione di determinate "cose" che non sempre un editor visuale è in grado di fare. Non ho nulla contro gli editor visuali ve lo assicuro, anzi per certe "cose" ho sempre pensato che avrei dovuto farne uso anch'io. Un'ultima raccomandazione prima di passare in rassegna i vari elementi (tags): è bene ricordare sempre che qualsiasi pagina creata per la rete prima di poter essere visualizzata dovrà essere scaricata nella memoria interna del browser (cache); quindi, pagine lunghe o farcite di immagini, applets e suoni, sono spesso per il visitatore un ottimo motivo per decidere di abbandonare quella pagina perchè stanco di attendere. Evitatele nel modo più assoluto, meglio pianificare diverse pagine al posto di una singola. Suddividere il lavoro in più pagine non costa nulla ed offre maggiore flessibilità anche a voi stessi per eventuali future modifiche. Html non è un vero e proprio linguaggio di programmazione, o almeno non come si è abituati a pensare quando si parla di programmazione. HTML è molto più semplicemente un insieme di istruzioni: <TAGS>, che il browser legge in maniera sequenziale: dall'alto verso il basso, da sinistra verso destra, esattamente come avviene per noi umani la normale lettura di un testo. Queste istruzioni, o meglio questi elementi (tags), sono racchiusi fra parentesi angolari: <queste> ogni elemento (tag) impartisce un ordine preciso che termina con lo stesso elemento preceduto da una barra retroversa, per rifarmi all'esempio appena citato: </queste> Non sono molti gli elementi che compongono il linguaggio, alcuni non vengono addirittura mai adoperati, al punto che spesso mi sono chiesto cosa li abbiano inventati a fare :). Come già detto, mi limiterò ad illustrare soltanto quelli che secondo il mio modesto parere possono realmente essere utili. Per chi non avesse mai avuto prima d'ora alcuna esperienza con HTML è consigliabile iniziare dalla rubrica primi passi che in poche e semplici lezioni chiarisce quelli che sono i meccanismi per usare gli elementi illustrati in questa stessa guida, sulla quale potrete sempre ritornare una volta acquisito quel minimo di esperienza necessaria ad assemblare gli elementi trattati.

4 Non vi resta che selezionare dal menù laterale il gruppo di elementi che vi interessano. Buona lettura. Andrea Bianchi Vedi un esempio della Struttura Base Andrea Bianchi Potete fare domande e discutere l'argomento sul Forum gratuito di supporto. Questa opera è pubblicata sotto una Creative Commons Attribuzione - Non commerciale - Non opere derivate 2.5 Italia License.

5 Il sito per imparare gratuitamente a fare pagine web. Menù Argomenti Home Page Web-Link Introduzione Elementi Struttura Formattaz. Testo Immagini Links Tabelle Elenchi o Liste Form o Moduli Frames Iframes Audio Applets e Flash JavaScript Guida CSS Forum di supporto Guida HTML Ver Dicembre 2010 Benvenuti su questa mia guida dedicata a HTML. Nessuna pretesa, vuole semplicemente essere una guida di aiuto con basi introduttive, qualcosa che illustri con esempi pratici le potenzialità di questo metalinguaggio che nonostante le continue evoluzioni del web continua ad essere il pilastro portante della rete. Nasce dalle molteplici domande che ricevevo in forma privata nella mia mailbox e da qualche anno ormai sul forum gratuito di supporto. Come potrete notare cerco di tenerla sempre aggiornata nonostante non sia facile visto il continuo evolversi della rete stessa, mi auguro con questo mio ennesimo sforzo di riuscire a soddisfare tutte (o quasi) le vostre esigenze. Se poi l'argomento dovesse interessarvi al punto tale di volerlo ulteriormente approfondire, la cosa migliore sarebbe affidarsi alla letteratura specializzata. Da modesto quale sono credo di aver trattato in queste pagine tutto quello che realmente serve per creare un buon sito web. Dicembre 2010: La guida è stata scritta nella sua prima versione nel Settembre del 1998 ed oggi molte cose sono cambiate, o sarebbe meglio dire evolute, grazie soprattutto all'uso dei CSS: fogli di stile, e ad alcune regole ben precise e più restrittive che hanno dato vita al XHTML (evoluzione del linguaggio html) entrambi regolati dal W3C, consorzio che si occupa proprio di questo argomento. Tutto quello che troverete in questa guida è e resta comunque perfettamente funzionante, vi informo che esiste una rubrica che tratta Xhtml con i fogli di style. La trovate su questo link: mentre qui la guida ai fogli di style CSS. Con questo aggiornamento mi prefiggo di rendere questa stessa guida adeguata e di conseguenza sempre al passo coi tempi. E' possibile scaricare la guida anche in formato compresso.zip per poterla consultare comodamente off-line, cioè scollegati dalla rete, è sufficiente cliccare su questo link: Scarica guida html Attenzione! eventuali ultime modifiche potrebbero non essere ancora inserite nella versione scaricabile, queste vengono infatti aggiornate ad intervalli prestabiliti o quando siano di una certa importanza. Sono gradite segnalazioni, commenti e qualsiasi altra cosa ritenuta utile al fine di migliorare il lavoro che sarà sempre e solo a beneficio di tutti quanti voi. Alcuni consigli per adoperarla al meglio: nel menù laterale trovate disposto verticalmente l'indice degli argomenti: tabelle, links, immagini ecc. Per ogni argomento esistono

6 altri due menù disposti orizzontalmente che riportano in ordine alfabetico i nomi degli elementi o tags Elementi o Tags: ed i relativi attributi, (sempre in ordine alfabetico o di assemblaggio codice). Attributi: Basterà un clik sul nome dell'elemento o su quello del suo attributo per raggiungere la descrizione. Alla fine di ogni descrizione una riga come questa sotto separa e conclude gli elementi, grazie alla piccola freccia verde posizionata a destra della riga separatrice sarà possibile (cliccandola) ritornare all'indice degli argomenti. HTML (Hyper Text Markup Language) è formato da definizioni, elementi (tags), questi impartiscono al browser (il programma usato per la navigazione) delle direttive ben precise al fine di ottenere il risultato a video, una sorta di interpretazione che varia a volte a seconda del tipo di browser adoperato. Si tratta dunque di conoscere il significato dei vari elementi e come questi possono essere combinati fra loro per avere la padronanza del linguaggio. Per la stesura di questo metalinguaggio si fa uso di un normale editor di testi, meglio se un editor specifico per HTML, cominciamo proprio da qui, cliccando su questo link sarà possibile scaricarne uno dalla rete. Cosa è un editor e cosa è il codice html? Un editor altro non è che uno strumento che ci consente di scrivere in modo semplice e veloce righe di codice html; quel codice che i vari browser di navigazione, qualunque essi siano, riconoscono ed interpretano. Si potrebbe paragonarlo ad un programma per videoscrittura, anzi sono molte le similitudini, con la sola differenza che il testo scritto da questi editors è formattato nel modo giusto per dare vita a pagine di ipertesto, da qui il nome sigla HTML: Hyper Text Markup Language. Gli editors per HTML si dividono in due categorie: Visuali: molto semplici, simili ai programmi di grafica, permettono di disegnare o semplicemente trascinare quello che serve all'interno del loro ambiente di sviluppo, operazione che genera automaticamente codice html valido. Testuali: bisogna scrivere il codice, quindi conoscerlo, offrono gli strumenti giusti con i suggerimenti necessari alle varie situazioni, si ha il pieno controllo di quello che si sta facendo superando così quelli che spesso sono i limiti degli

7 editors visuali. Personalmente adopero: HomeSite da quando era di Allaire, poi Macromedia ed oggi Adobe, fermo alla sua versione 5.5 da anni, ma guarda caso sempre molto attuale, lo trovo formidabile consapevole che si tratta di un parere del tutto soggettivo. Ha un solo difetto: costa, a differenza di molti altri editors distribuiti gratuitamente. Dopo quanto appena detto è abbastanza ovvio immaginare che il principiante si affiderà agli editors visuali. Non fatelo se non per prova. C'è chi consiglia di adoperare il notepad o il wordpad di windows, personalmente reputo la scelta a dir poco illogica, della serie "facciamoci del male da soli". Non capisco perchè mai si dovrebbe adoperare uno strumento che di html non ha nulla quando la rete offre ottimi programmi, alcuni addirittura gratuiti (freeware), che danno un grosso aiuto proprio nella stesura di questo tipo di codice. Chi avesse comunque deciso di affidarsi agli editors visuali può tranquillamente smettere di leggere il seguito di queste pagine, non gli serviranno a molto visto che parleremo di codice che l'editor visuale gestisce in assoluta autonomia. Un arrivederci a queste persone che probabilmente torneranno qui non appena insorgeranno le prime difficoltà dovute alla mancata realizzazione di determinate "cose" che non sempre un editor visuale è in grado di fare. Non ho nulla contro gli editor visuali ve lo assicuro, anzi per certe "cose" ho sempre pensato che avrei dovuto farne uso anch'io. Un'ultima raccomandazione prima di passare in rassegna i vari elementi (tags): è bene ricordare sempre che qualsiasi pagina creata per la rete prima di poter essere visualizzata dovrà essere scaricata nella memoria interna del browser (cache); quindi, pagine lunghe o farcite di immagini, applets e suoni, sono spesso per il visitatore un ottimo motivo per decidere di abbandonare quella pagina perchè stanco di attendere. Evitatele nel modo più assoluto, meglio pianificare diverse pagine al posto di una singola. Suddividere il lavoro in più pagine non costa nulla ed offre maggiore flessibilità anche a voi stessi per eventuali future modifiche. Html non è un vero e proprio linguaggio di programmazione, o almeno non come si è abituati a pensare quando si parla di programmazione. HTML è molto più semplicemente un insieme di istruzioni: <TAGS>, che il browser legge in maniera sequenziale: dall'alto verso il basso, da sinistra verso destra, esattamente come avviene per noi umani la normale lettura di un testo. Queste istruzioni, o meglio questi elementi (tags), sono racchiusi fra parentesi angolari: <queste> ogni elemento (tag) impartisce un ordine preciso che termina con lo stesso elemento preceduto da una barra retroversa, per rifarmi all'esempio appena citato: </queste> Non sono molti gli elementi che compongono il linguaggio, alcuni non vengono addirittura mai adoperati, al punto che spesso mi sono chiesto cosa li abbiano inventati a fare :). Come già detto, mi limiterò ad illustrare soltanto quelli che secondo il mio modesto parere possono realmente essere utili. Per chi non avesse mai avuto prima d'ora alcuna esperienza con HTML è consigliabile iniziare dalla rubrica primi passi che in poche e semplici lezioni chiarisce quelli che sono i meccanismi per usare gli elementi illustrati in

8 questa stessa guida, sulla quale potrete sempre ritornare una volta acquisito quel minimo di esperienza necessaria ad assemblare gli elementi trattati. Non vi resta che selezionare dal menù laterale il gruppo di elementi che vi interessano. Buona lettura. Andrea Bianchi Vedi un esempio della Struttura Base Andrea Bianchi Potete fare domande e discutere l'argomento sul Forum gratuito di supporto. Questa opera è pubblicata sotto una Creative Commons Attribuzione - Non commerciale - Non opere derivate 2.5 Italia License.

9 Il sito per imparare gratuitamente a fare pagine web. Elementi della Struttura Elementi o Tags: <!DOCTYPE> <base> <body> <head> <html> <link> <meta> <script> <style> <title> Attributi: alink background bgcolor bgproperities link margin text vlink colori Menù Argomenti Home Page Web-Link Introduzione Elementi Struttura Formattaz. Testo Immagini Links Tabelle Elenchi o Liste Form o Moduli Frames Iframes Audio Applets e Flash JavaScript Guida CSS Forum di supporto <!DOCTYPE...> Guida HTML Ver Dicembre 2010 Affinché un documento sia identificato come HTML esso deve iniziare con il suo identificatore di prologo: <!DOCTYPE... HTML 4.01 prevede tre tipi di DTD e sono rispettivamente: Strict, la più rigida che prevede l'abolizione dei tag deprecati a favore dei CSS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Transitional, maggiormente tollerante è quella più largamente usata, anche questa guida fa uso di transitional. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Frameset, nel caso in cui il sito sia strutturato a frames

10 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " Questo tipo di riga chiamata prologo, è solitamente generata in modo automatico dall'editor che adoperate per la stesura del codice html, visuale o testuale che sia. Non è obbligatoria anche se molto consigliata, specialmente in caso di validazione del documento da parte del W3C. Ha il compito di informare il browser che si tratta di un documento html relativo a quelle determinate specifiche, in mancanza di questa dichiarazione il documento sarà identificato come rispondente alla specifica HTML 2.0 <html>...</html> L'elemento <html> identifica un documento che contiene elementi HTML, esso dovrebbe seguire l'identificatore di prologo e circondare tutto il testo restante, inclusi tutti gli altri elementi o tags. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> la parte restante del documento </html> <head>...</head> L'elemento <head> viene utilizzato per fornire informazioni sul documento, in questa sezione trovano posto tutti quei tags che impartiscono direttive ai browser quali: titolo, Meta comandi, richiami ai fogli di stile, script. Notare che tutto ciò che si trova all'interno della struttura head non sarà visualizzato, ma interpretato dal browser, quindi una zona destinata ad uso esclusivo dei soli comandi che impartiscono direttive ben specifiche. <!DOCTYPE HTML...> <html> <head> elementi di informazione quali: </head> la parte restante del documento </html> <base> <link> <meta> <style> <title> <script>

11 <base> Consente di specificare la destinazione per tutti i link della pagina, qualora questa fosse strutturata in frames: <base target="nome_del_frame_sul_quale_aprire_i_links"> <link> Ha diverse funzioni ma la più adoperata è il richiamo a fogli di style esterni: <link rel="stylesheet href="weblink.css" type="text/css"> <meta> Sono davvero molti i Meta Comandi che si possono inserire: <meta http equiv="clicca questo link per un elenco completo."> <style>...</style> Dichiarazione di uno stile interno alla pagina che contiene la dichiarazione: <style type="text/css"..."> <title>...</title> Il titolo da assegnare alla pagina.

12 <title>web-link - Tutto per la costruzione delle tue pagine web </title> <script>...</script> Inserimento di funzioni, effetti, controlli e molto altro sotto forma di script (linguaggio di programmazione lato client): <script type="text/javascript">...</script> <body>...</body> L'elemento <body> contiene la pagina vera e propria, quello che si vedrà a video: testo, immagini e tutti gli elementi che forniscono il controllo e la formattazione della pagina stessa. I possibili attributi sono: background, bgcolor, link, vlink, alink, text. <body attributo> Molti gli attributi associabili a questo tag: background bgcolor link vlink alink text evidenziati in giallo gli attributi proprietari di singoli browser dei quali si sconsiglia l'utilizzo. bgproperties topmargin bottommargin leftmargin rightmargin Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ background-image: url("sfondo.gif"); background-attachment: fixed; background-color: #ff00ff; color: #000066; margin-left: 2px; }

13 background Permette di adoperare un'immagine come sfondo della pagina, immagine che dovrà essere di tipo.gif.jpg o.png. Indipendentemente dalle dimensioni verrà usata a riempimento di tutta la finestra del browser, qualunque sia la sua dimensione e risoluzione del video: <body background="nome_immagine.gif"> E' possibile richiamare l'immagine anche da altro sito, specificandone l'indirizzo completo (URL) <body background=" Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ background-image: url("nome_immagine.gif"); } bgproperties L'immagine adoperata a riempimento può essere tenuta ferma durante lo spostamento verticale (scrolling) sulla pagina, dando l'impressione di scivolare con le immagini e i testi sullo sfondo. Attributo proprietario di alcuni browser non riconosciuto dal W3C. <body background="nome_immagine.gif" bgproperties="fixed"> Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ background-attachment: fixed; } bgcolor

14 Si adopera questo attributo per colorare lo sfondo della pagina di una tinta unita, il colore può essere espresso sia col nome inglese che nel relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base con relativo nome e codice esadecimale. <body bgcolor="green"> oppure <body bgcolor="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ background-color: #006600; } link Si adopera questo attributo per decidere il colore di tutti i links facenti parte della pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base. <body link="green"> oppure <body link="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è blu (blue) #0000ff Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: a:link{ color: #006600; }

15 vlink Si adopera questo attributo per decidere il colore di tutti i links, dopo che questi sono stati visitati, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base. <body vlink="green"> oppure <body vlink="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è porpora (purple) # Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: a:visited{ color: #800080; } alink Si adopera questo attributo per decidere il colore di tutti i links attivi, colore che cambierà nel momento del click su di esso, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base. <body alink="green"> oppure <body alink="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è rosso (red) #ff0000

16 Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: a:active{ color: #800080; } text Si adopera questo attributo per decidere il colore di tutto il testo nella pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base. <body text="green"> oppure <body text="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Fate attenzione a non assegnare colori assomiglianti allo sfondo, scelta che renderebbe il testo quasi invisibile. Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ color: #006600; } MARGINI topmargin, bottommargin, leftmargin, rightmargin sono i quattro attributi per definire la distanza in pixel rispettivamente da: margine superiore, margine inferiore, margine sinistro e margine destro. Un margine uguale a zero farà si che il testo inizi praticamente sul bordo della finestra del browser. Attributo proprietario di alcuni browser non riconosciuto dal W3C. <body topmargin="30"> <body bottommargin="30">

17 <body leftmargin="30"> <body rightmargin="30"> Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body { margin-bottom: 30px; margin-top: 30px; margin-left: 30px; margin-right: 30px; } ESEMPIO Riassumendo, questa potrebbe essere una definizione del corpo (body), di una pagina che abbia uno sfondo come riempimento, e questo resti fisso durante le operazioni di spostamento (scrolling), con un testo di colore nero, i links di colore rosso, i links visitati di colore verde, il tutto con una distanza dai quattro margini di 50 pixel. <body background="nome_immagine.gif" bgproperties="fixed" text="black" link="red" vlink="green" topmargin="50" bottommargin="50" leftmargin="50" rightmargin="50" > Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body { background-image: url("nome_immagine.gif"); background-attachment: fixed; color: black; margin: 50px; } a:link { color: red; } a:visited { color: green;} Andrea Bianchi Potete fare domande e discutere l'argomento sul Forum gratuito di supporto.

18

19 Il sito per imparare gratuitamente a fare pagine web. Elementi di formattazione Elementi o Tags: <!-- --> <b> <basefont> <br> <center> <div> <em> <font> <hr> <hx> <i> <marquee> <p> <pre> <span> <strong> <u> Attributi: color face size Menù Argomenti Home Page Web-Link Introduzione Elementi Struttura Formattaz. Testo Immagini Links Tabelle Elenchi o Liste Form o Moduli Frames Iframes Audio Applets e Flash JavaScript Guida CSS Forum di supporto Guida HTML Ver Dicembre 2010 Il Testo Cosa sarebbe una pagina web senza testo? Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria importanza. Oltre al colore e al tipo di font (carattere) ci sono molti altri elementi che servono per formattarlo ed impaginarlo. <BASEFONT> Specifica le dimensioni del font (carattere) di base su cui si basano poi tutte le relative modifiche di <font size=...>il valore di default è 3 e può essere compreso tra 1 e 7. Questo Tag è in via di estinzione visto che i nuovi browser ed i relativi fogli di style hanno fatto si che vi sia una tendenza a non adoperarlo più <basefont size="4"> Si possono inserire anche altri due attributi face specifica il tipo di font color specifica il colore che potrebbe essere espresso oltre che col nome in inglese anche con il codice numerico esadecimale.

20 <basefont size="4" face="arial" color="green"> Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body { font-size: 14pt; font-family: arial, verdana, sans-serif; color: green; } Il mio consiglio è di non adoperarlo, guardate quello che è possibile fare con i CSS fogli di style e capirete il perchè. <BR> L'elemento <br> specifica che una nuova riga deve iniziare in un determinato punto, un ritorno a capo forzato, più <br> consecutivi equivalgono a più righe saltate. <br> Con l'aggiunta di immagini flottanti, allineate a destra o sinistra con il testo che le contorna, è possibile aggiungere l'attributo CLEAR con i seguenti risultati: clear="left": spezza la riga e si sposta verticalmente verso il basso fino ad avere un margine sinistro libero. clear="right": stessa cosa ma con margine libero destro. clear="all": Si sposta verso il basso fino a quando entrambi i margini non siano liberi da immagini. <br clear="all"> <CENTER>...</CENTER>

21 Tutto ciò che si trova fra gli elementi center e /center sarà centrato rispetto ai margini destro e sinistro della finestra del browser. Questo Tag è in disuso da quando elementi quali <DIV> offrono maggiore flessibilità, si ottengono analoghi risultati anche assegnando l'attributo align="center" ai vari tags di formattazione. <center> Questo testo è centrato sulla finestra di visualizzazione </center> Deprecato, meglio usare un contenitore come <div> al quale assegnare un attributo di allineamento centrato: <div align="center">...</div> <!-- --> Consente di lasciare un testo di commento all'interno del listato html senza che questo possa influire o essere visualizzato dal browser. <!-- Questo testo non serve a niente per il buon funzionamento della pagina web, è semplicemente un commento, un qualcosa da ricordare dovendo visionare e modificare il listato. --> I simboli di commento sono molto utili anche per gli script ed i fogli di style e servono a nascondere il listato a quei browser che non supportano ne script ne fogli di style, anche se mi chiedo quanti e quali saranno i browser ancora in funzione che non supportano queste due cose divenute ormai parte integrante del web. <DIV>...</DIV> L'elemento <DIV> non ha una sua vera e propria caratteristica, serve infatti da supporto, da scatola contenitore ed è molto usato anche con l'associazione dei fogli di style. Tutti gli attributi e le associazioni applicate al tag DIV saranno estese a tutto il blocco di codice in esso contenuto.

22 <div align="center"> Questa riga di testo ed anche eventuali altri elementi, se presenti, subiranno l'allineamento centrato. </div> L'uso del contenitore div provoca un ritorno a capo con la sua chiusura /div <SPAN>...</SPAN> L'elemento <span> non ha alcuna caratteristica se non quella di fare da supporto per gli stili, come DIV si presta bene come contenitore per l'associazione di tutto quello che serve ad Html. <span style="color: red"> Questa riga di testo è colorata di rosso, anzi di red. :-) </span> L'uso del contenitore SPAN non provoca alcun ritorno a capo con la sua chiusura /SPAN, a differenza di /DIV ed è quindi indicato per assegnare attributi con i CSS a parti di un testo senza scombinarne l'impaginazione. <FONT>...</FONT> L'elemento <FONT> definisce le dimensioni, il colore ed il tipo di carattere adoperato per la scrittura del testo. Questo Tag viene adoperato sempre meno dal momento che i fogli di style riescono a gestire il tutto in modo più semplice e versatile. Il Tag <font> ha dimensione di base (default) del carattere uguale a 3, si veda a questo proposito anche <basefont>. Font da solo non ha ragione di esistere, al suo interno si deve sempre inserire almeno un attributo. <font attributo="specifica"> Testo che avrà tutti gli attributi specificati nel tag font </font> E' possibile specificare quale carattere adoperare dando anche delle eventuali alternative separandole da virgole. Se il font scelto non fosse presente sulla macchina del visitatore si tenterà di visualizzare il secondo font, poi il terzo, e

23 se nessuno dei tre fosse presente il browser adopererà quello di default. Evitate dunque fonts particolari e poco comuni o quasi sicuramente nessuno riuscirà poi a vedere il testo allo stesso modo di come avreste voluto voi. face="nome" [,nome] [,nome] L'attributo face imposta il carattere utilizzato e questo deve trovarsi già installato nel computer dell'utente, le alternative sono separate da uno spazio e da una virgola. <font face="comic Sans MS">Testo con font Comic Sans MS</font> color="#rrggbb" oppure COLOR="nome" in inglese del colore. A questo proposito su questa pagina è possibile vedere 140 colori di base. <font color="red">testo con font di colore rosso</font> SIZE="n" oppure SIZE="+n" o anche SIZE="-n" dove n è un numero compreso fra 1 e 7, mentre i vari + o - si riferiscono al numero che per default è 3, salvo variazioni specificate con basefont <font size="-1">testo con font di dimensione -1 rispetto a quella di default. Tutti gli attributi di font possono essere adoperati anche contemporaneamente <font face="comic Sans MS" color="red" size="-1"> Testo con font Comic di colore rosso ed una dimensione -1 </font> Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body { font-size: 14pt; font-family: "Comic Sans MS", arial, sans-serif; color: red; } <HR> L'elemento <HR> Horizontal Rules, altro non è che una linea orizzontale

24 divisoria, come quella che potete vedere in questa pagina a divisione dei vari elementi (tags), per default questa linea è ombreggiata e in rilievo. Si possono modificare i vari attributi. <hr> questo sotto il risultato attributi di formattazione quali: align noshade size width color evidenziati in giallo gli attributi proprietari di singoli browser dei quali si sconsiglia l'utilizzo. <hr align=left right center>dove left right center sono allineamento a sinistra, a destra o centrato Adopero una linea ridotta del 50% per meglio rendere l'idea <hr align="left"> <hr align="right"> <hr align="center"> <HR COLOR=nome #rrggbb>dove nome è il nome in inglese di uno dei colori possibili, mentre #rrggbb è il codice numerico esadecimale del colore scelto. L'attributo color è supportato dai soli browser IE. <hr color="red"> color attributo proprietario di singoli browser, se ne sconsiglia l'utilizzo. <hr noshade>nessuna ombreggiatura, praticamente una barra solida. <hr noshade>

25 <HR SIZE=numero>Dove numero è espresso in pixel e si riferisce allo spessore della barra. una riga di spessore 5 pixel <hr size="50"> <HR WIDTH=numero percentuale>senza alcuna specifica la linea orizzontale occupa tutta la largezza della pagina. Con questo attributo si possono specificare con esattezza la sua ampiezza, dove numero sono i pixel. percentuale invece è relativa alla percentuale della finestra del browser una riga di lunhezza 150 pixel <hr width="150"> Si possono anche combinare i vari attributi, quello sotto è un esempio per ottenere una riga che sia di colore blu, spessore 3 pixel, che occupi il 70% della finestra alla quale è destinata e che non sia ombreggiata (la percentuale di ampiezza è relativa alla cornice che la ospita): <hr width="70%" size="3" noshade> Consiglio, meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag hr: hr { height: 3px; width: 70%; } <Hx>...<Hx> Titoli - è possibile avere sei livelli di titolo che dimensionano i caratteri. Il più alto livello è <H1> scalano a salire tutti gli altri: <H1>...</H1> Grassetto, carattere molto grande e

26 centrato, una o due righe vuote sopra e sotto. <H2>...</H2> Grassetto, carattere grande a sinistra, una o due righe vuote sopra e sotto. <H3>...</H3> Corsivo, carattere grande leggermente rientrato sul margine sinistro, una o due righe vuote sopra e sotto. <H4>...</H4> Grassetto, carattere normale, rientro maggiore rispetto a H3, una riga vuota sopra e sotto. <H5>...</H5> Corsivo, carattere normale, rientro normale come H4, una riga vuota sopra. <H6>...</H6> Grassetto, rientro come testo normale ma più di H5, una riga vuota sopra. Consiglio, è possibile ridefinire in un foglio di stile CSS i vari tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6> inserendo tutte le personalizzazioni che si desiderano, basterà poi richiamarlo alla solita maniera per avere un risultato decisamente diverso che definirei molto più versatile e comodo. h1{ font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 16pt; color: #006400; font-style: italic; text-indent: 12pt; } <P>...</P> L'elemento <P> specifica un paragrafo di testo, ha come attributo ALIGN che permette di allineare il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY, rispettivamente per: Centrato, a sinistra, a destra e giustificato. Viene adoperato prevalentemente con l'attributo CLASS che richiama una

27 classe di style in modo da avere paragrafi con font, colori e formattazioni personalizzate. Si veda a questo proposito le spiegazioni relative ai fogli di stile. <p align="left">questo paragrafo è allineato a sinistra.</p> Questo paragrafo è allineato a sinistra. <p align="right">questo paragrafo invece è allineato a destra.</p> Questo paragrafo invece è allineato a destra. <p align="center">questo paragrafo è allineato al centro.</p> Questo paragrafo è allineato al centro. <p align="justify">questo paragrafo è allineato al centro con giustificazione.</p> Questo paragrafo invece è allineato al centro con giustificazione, che cosa è la giustificazione? Guardate attentamente i due margini, destro e sinistro, come potete notare il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge in automatico degli spazi fra le parole. Consiglio, è possibile ridefinire il tag <p> all'interno di un foglio di stile (CSS) o creare una apposita classe ed inserire tutte le varie personalizzazioni, basterà poi richiamare questa classe per avere un risultato uguale su tutti i paragrafi della pagina web. p{ font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 16pt; color: #006400; text-indent: 12pt; } <B>...</B> L'elemento <B> specifica un blocco di testo da mostrare in grassetto (bold). Risultato simile si ottiene anche con <STRONG>...</STRONG> Questa guida è offerta da <b> Web-Link </b> tutto per la tua pagina web. Questa guida è offerta da Web-Link tutto per la tua pagina web.

28 Consiglio, è preferibile usare questi attributi all'interno dei fogli di style. TT: Riproduce come testo di telescrivente o a spaziatura fissa. I: Riproduce come stile corsivo del testo. B: Riproduce come stile grassetto del testo. BIG: Riproduce il testo con un carattere "grande". SMALL: Riproduce il testo con un carattere "piccolo". STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego. U:Disapprovato. Riproduce del testo sottolineato. <U>...</U> L'elemento <U> specifica un blocco di testo da mostrare sottolineato (underline). Questa guida è offerta da <u> Web-Link </u> tutto per la tua pagina web. Questa guida è offerta da Web-Link tutto per la tua pagina web. Consiglio, è preferibile usare questi attributi all'interno dei fogli di style. TT: Riproduce come testo di telescrivente o a spaziatura fissa. I: Riproduce come stile corsivo del testo. B: Riproduce come stile grassetto del testo. BIG: Riproduce il testo con un carattere "grande". SMALL: Riproduce il testo con un carattere "piccolo". STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego. U:Disapprovato. Riproduce del testo sottolineato. <I>...</I> L'elemento <I> specifica un blocco di testo da mostrare in corsivo (italic). Risultato simile si ottiene anche con <EM>...</EM> Questa guida è offerta da <i> Web-Link </i> tutto per la tua pagina web. Questa guida è offerta da Web-Link tutto per la tua pagina web.

29 Gli elementi possono essere fra loro nidificati, combinando i vari attributi, per esempio posso scrivere weblink in modo marcato, inclinato e sottolineato: Questa guida è offerta da <U><I><B> Web-Link </B></I></U> tutto per la tua pagina web. Questa guida è offerta da Web-Link tutto per la tua pagina web. Consiglio, è preferibile usare questi attributi all'interno dei fogli di style. TT: Riproduce come testo di telescrivente o a spaziatura fissa. I: Riproduce come stile corsivo del testo. B: Riproduce come stile grassetto del testo. BIG: Riproduce il testo con un carattere "grande". SMALL: Riproduce il testo con un carattere "piccolo". STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego. U:Disapprovato. Riproduce del testo sottolineato. <PRE>...</PRE> L'elemento <PRE> specifica un blocco di testo preformattato, cioè a larghezza e spaziatura fissa. Attenzione: talmente fissa che non torna neppure a capo se non con il comando <br>. <pre> Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente <br> dai vari parametri di pagina </pre> Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente dai vari parametri di pagina Andrea Bianchi

30 Potete fare domande e discutere l'argomento sul Forum gratuito di supporto.

31 Il sito per imparare gratuitamente a fare pagine web. Le Immagini grafiche Elementi o Tags: <area> <img> <map> Attributi: align alt border height hspace src title usemap vspace width Menù Argomenti Home Page Web-Link Introduzione Elementi Struttura Formattaz. Testo Immagini Links Tabelle Elenchi o Liste Form o Moduli Frames Iframes Audio Applets e Flash JavaScript Guida CSS Forum di supporto Guida HTML Ver Dicembre 2010 Le immagini Cosa sarebbe una pagina web senza immagini? Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria importanza. I formati supportati dal www sono diversi e variano a seconda del browser adoperato, diciamo che.gif.jpg e.png sono quelli riconosciuti ufficialmente da tutti i browser e non si dovrebbero usare formati diversi da questi. <IMG...> L'elemento <img> necessita di attributi, di cui almeno uno necessariamente obbligatorio: src, a differenza di molti altri elementi html (tags), questo non ha bisogno di essere concluso dallo stesso elemento preceduto dalla barra retroversa </img>. vediamo gli attributi più comuni: SRC L'attributo src è indispensabile per l'elemento img, senza di questo non funzionerebbero neppure tutti gli altri. Permette di specificare il nome dell'immagine da visualizzare quando questa si trovasse nella stessa cartella (dir) in cui è presente la pagina web che la richiama. E' possibile specificare anche percorsi (path) fatti da cartelle (directory) e/o sottocartelle (subdirectory) compresi gli URL assoluti richiamanti l'immagine da altri siti.

32 Il tag img src può essere adoperato anche all'interno del tag <a href (ancora o link), potrà essere cliccato come un normale link testo. Questa la sintassi: <img src="nome_immagine.jpg"> o anche <img src=" ALIGN L'attributo align permette di specificare l'allineamento dell'immagine rispetto alla riga di testo successiva, i valori ammessi sono: left, right, top, middle, baseline e bottom. I due valori principali left e right fanno si che l'immagine diventi di tipo flottante, vediamo come: align="left" Allinea l'immagine sul bordo sinistro della finestra di visualizzazione del browser, il testo che segue circonda la parte destra dell'immagine. Allineamento di tipo left, il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento. align="right" Allinea l'immagine sul bordo destro della finestra di visualizzazione del browser, il testo che segue circonda la parte sinistra dell'immagine. Allineamento di tipo right il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

33 Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietà float: img { float: left; } valori per float sono: left, right, none, inherith align="top" Allinea il testo che segue l'immagine con la parte superiore dell'elemento più alto nella riga. Allineamento di tipo top il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento. align="middle" Allinea la linea di base della riga corrente con la parte centrale dell'immagine. Allineamento di tipo middle il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento. align="bottom" Allinea il testo che segue l'immagine con la parte inferiore dell'elemento più basso nella riga di testo. Allineamento di tipo bottom il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della

34 finestra del browser per meglio capire l'allineamento. Alcuni attributi sembrano gli stessi di altri, è vero, ma ognuno svolge una funzione differente. L'importante è farsi un'idea, ognuno di noi poi adopererà quello che riterrà più adatto alle proprie esigenze. Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietà verticalalign: img { vertical-align: top; } valori per vertical-align sono: baseline, middle, top, super, sub, text-top, bottom e text-bottom ALT L'attributo alt (alternativa alla grafica), permette di specificare un testo per quei browser non grafici. Viene adoperato per descrivere l'immagine e non va confuso con title spiegato sotto. Il testo apparirà nel caso in cui l'immagine non venisse caricata, per questo motivo l'attributo ALT diventa obbligatorio ai fini di una validazione del W3C. Questo il codice: <img src="tarta.jpg" alt="questa è una tartaruga"> Ho volutamente tolto l'immagine e come potete vedere al suo posto c'è il testo alternativo immesso con l'attributo ALT. TITLE L'attributo Title (titolo), permette di specificare un testo che descriva l'immagine, simile ad alt viene interpretato correttamente a prescindere se l'immagine grafica sia visibile o meno. Questo il codice: <img src="tarta.jpg" title="ciao sono una tartaruga"> Provate a posizionare il mouse sull'immagine, sarà così possibile leggere il testo immesso con l'attributo Title.

35 BORDER L'attributo border permette di specificare lo spessore del bordo intorno all'immagine. Risulta utile impostare border="0" quando l'immagine fa parte di un collegamento (link o ancora) e non si vuole visualizzare quel bordino azzurro di default, tipico delle immagini facenti parte di un link. Questo il codice: <img src="tarta.jpg" border="3"> Si noti lo spessore del bordo dell'immagine che in questo caso è stato impostato come spessore 3. Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietà border: img { border: 3px solid #ff0000; } Per non avere un bordo sulle immagini linkate si usa border: none. E' possibile specificare il tipo di bordo, per esempio solid o anche il colore, per esempio #ff0000. VSPACE e HSPACE L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right, servono ad impostare rispettivamente degli spazi verticali ed orizzontali (vertical space ed horizontal space) fra il testo e l'immagine stessa, ed anche fra l'immagine e la sua cornice. Un esempio chiarirà sicuramente meglio:. Questa la sintassi: <img src="tarta.jpg" hspace="25"> ho impostato uno spazio orizzontale di 25 pixel. Questa la sintassi: <img src="tarta.jpg" vspace="25"> ho impostato uno spazio verticale di 25

36 pixel. Questa la sintassi: <img src="tarta.jpg" hspace="25" vspace="25"> ho impostato uno spazio orizzontale ed uno spazio verticale entrambi di 25 pixel. Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno usando la proprietà float insieme a quella padding: { float: left; padding: 25px 10px 35px 5px; } Avendo il pieno controllo sui quattro lati in modo indipendente grazie alla proprietà padding WIDTH e HEIGHT L'attributo WIDTH, così come l'attributo HEIGHT, vengono adoperati per specificare le dimensioni orizzontale e verticale dell'immagine; se omessi il browser impiegherà più tempo per calcolare l'area sulla quale disporre eventuale testo, per questo motivo conviene impostare sempre questi valori, visto poi che sono noti. Si possono impostare anche valori diversi da quelli reali nel caso in cui si volesse adattare l'immagine a certe dimensioni, compreso un'eventuale distorsione. Questa la sintassi: <img src="tarta.jpg" width="114" height="75"> ho impostato le dimensioni orizzontali e verticali dell'immagine. potrei decidere di modificare l'immagine assegnando valori diversi da quelli reali, come in questo caso: <img src="tarta.jpg" width="60" height="35">