HTML - Camuso.it
annuncio pubblicitario
Introduzione allo sviluppo di pagine WEB per le classi prime – versione 28 Novembre 2010 Introduzione all’(X)HTML Questa parte contiene adattamenti (curati dal prof. Camuso) del materiale che potete trovare all’indirizzo www.html.it (X)HTML (da www.html.it con adattamenti del prof. Camuso) L'HTML è il linguaggio originale con cui viene descritto come i vari elementi che la compongono vanno disposti in una pagina Web (paragrafi, immagini, link, tabelle ecc.). l'XTHML è una sua variante che vuole risolvere alcuni problemi emersi con l'HTML standard. Oggi siamo arrivati per entrambi alla versione 5: HTML5 e XHTML5. Il Browser (Internet Explorer, Firefox, Chrome, Opera ecc.) è il programma che usate quando navigate nel Web e svolge principalmente due compiti dopo che gli avete comunicato l'indirizzo di un sito web (come www.google.it) o dopo che avete fatto clic su un link che porta ad una certa pagina sul web: scarica i vari files (pagine di testo html, immagini ecc.) che si trovano sul computer remoto (il server web, quello che 'ospita' le pagine del sito richiesto) legge i documenti scritti in html, e a seconda delle indicazioni ivi contenute, visualizza la pagina in un modo, piuttosto che in un altro; inoltre i vari files associati a quel documento (ad esempio le immagini, o i filmati in flash) vengono disposti secondo le indicazioni del codice html Il compito del linguaggio HTML è dunque quello di spiegare al browser come i vari files relativi alla pagina web in esame devono essere disposti all'interno di quest'ultima. HTML è l'acronimo di HyperText Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione. Non possiede infatti istruzioni e altre caratteristiche tipiche di un linguaggio di programmazione. Per curiosità: la X di Xhtml sta per eXtensible (nel senso che XTHML può estendere le possibilità dell'HTML. Nel resto di questa dispensa non sarà necessario fare distinzione tra HTML e XHTML, anche se in effetti farò riferimento all'XHTML. Autore: Fabrizio Camuso (email: [email protected] sito web: www.camuso.it ) Pag. 1 Introduzione allo sviluppo di pagine WEB per le classi prime – versione 28 Novembre 2010 La vostra prima pagina (x)html (prof. Camuso) Prima di tutto vi ricordo che sul mio sito, all'indirizzo http://www.camuso.it/1AB/index.asp troverete dei link a videolezioni che spiegano come usare Netbeans e come comporre pagine web). Usando il blocco note di windows od uno degli editor html gratuiti che vi sono stati presentati a scuola (first page 2006, NVU, Page Breeze, Netbeans) scrivete il seguente codice, salvatelo con l’estensione .htm o .html e visualizzatelo con un browser: <html> <body> I love HTML! </body> </html> Quindi tutto ciò che descrive una pagina web deve essere contenuto tra <html> e </html> che sono chiamati tag (marcatori): rispettivamente tag di apertura e chiusura; notate il carattere slash (/) nel tag di chiusura. All’interno di questi, un po’ come accade per le 'scatole cinesi' o le bambole matrioske russe , possiamo trovare altri tag che definiscono altre sezioni della pagina. La parte visibile nel browser è definita all’interno della sezione <body> … </body> (body = corpo, corpo del pagina). Un’altra sezione sempre presente è l’intestazione (head= testa): <head> … </head>; qui troviamo informazioni varie, tra cui: il titolo della pagina (che apparirà nel browser in cima alla pagina), la versione dell’html/xhtml usata, il set di caratteri usato (italiano? inglese? ecc.), alcune parole chiave usate dai motori di ricerca per catalogare la pagina ed altro ancora. Per il momento limitiamoci al titolo della pagina: <html> <head> <title> SONO IL TITOLO DELLA PAGINA </title> </head> <body> I love HTML! </body> </html> Autore: Fabrizio Camuso (email: [email protected] sito web: www.camuso.it ) Pag. 2 Introduzione allo sviluppo di pagine WEB per le classi prime – versione 28 Novembre 2010 Paragrafi: <p> (prof. Camuso) Anche se è possibile scrivere del testo direttamente nel body, come abbiamo fatto nel primissimo esempio (I love HTML!, ricordate?), è molto meglio farlo tramite dei tag che consentiranno un controllo molto più accurato. Il principale tag per il testo è sicuramente il paragrafo: <p> ...testo ...testo ...testo </p>. Un paragrafo, come tutti gli elementi chiamati di blocco, manda a capo eventuali altri elementi che lo seguono (altri paragrafi, tabelle ecc.). Da subito è meglio evidenziare alcuni particolari che disorientano quando si è agli inizi: Non usate gli spazi per allineare il testo! Gli spazi in più tra le parole inseriti semplicemente con il tasto barra spaziatrice vengono ignorati dal browser. L'unico modo, di cui è meglio non abusare, è servirsi del carattere speciale &nbsp; che va inserito proprio così: & fa capire al browser che inizia un carattere speciale nbsp indica quale sia carattere speciale: non breakable space, spazio indivisibile ; il punto e virgola termina la sequenza del carattere speciale Ad esempio per lasciare tre spazi (due agguntivi, quindi!) tra le parole PIANETA e SELVAGGIO: PIANETA &nbsp; SELVAGGIO dove ovviamente contano anche gli spazi prima e dopo la sequenza &nbsp; In ogni caso sono preferibili le tecniche di allineamento e spaziatura messe a disposizione dai CSS (spiegati più avanti) o da elementi come le tabelle. Per andare a capo non basta premere l’invio! Normalmente quando si arriva alla fine di una riga il testo va a capo in modo automatico adattandosi allo spazio a disposizione nella finestra del browser se la stringete o la allargate. Quando il paragrafo termina (</p>) l'elemento successivo viene automaticamente mandato a capo. Per forzare l'andare a capo in un qualsiasi punto del testo senza iniziare un nuovo paragrafo esiste il tag <br /> ("break", cioè "interruzione"). Ecco un esempio: <p> prima riga <br /> seconda riga <br /> terza riga <br /> </p> apparirà così: prima riga seconda riga terza riga Autore: Fabrizio Camuso (email: [email protected] sito web: www.camuso.it ) Pag. 3 Introduzione allo sviluppo di pagine WEB per le classi prime – versione 28 Novembre 2010 Gli attributi dei tag (da www.html.it con adattamenti del prof. Camuso) Nei tag di apertura possiamo indicare i cosiddetti attributi: <p attributo> Materasso in lattice, ottimo per …</p> o anche più di un attributo: <p attributo1 attributo2 ... > Materasso in lattice, ottimo per …</p> Gli attributi definiscono come deve apparire quell'elemento (colore, tipo del testo, bordi ecc.) o come deve comportarsi al succedere di certi eventi (caricamento della pagina, clic del mouse, passaggio del mouse su di esso ecc.) ed altro. Un attributo è definito da un nome ed un valore che viene specificato dopo il simbolo = e racchiuso tra virgolette: nomeAttributo = "valore" Ad esempio l'attributo id (iniziale di IDentificatore) assegna un nome agli elementi. In questo modo, ad esempio, è possibile distinguere un paragrafo da tutti gli altri: <p id="materasso"> Materasso in lattice, ottimo per … </p> Con un attributo possiamo ad esempio assegnare un identificatore a quel tag per distinguerlo dagli altri: <p attributi >Materasso in lattice, ottimo per …</p> Come si diceva possiamo avere anche due o più attributi (id e style nell'esempio che segue): <p id="materasso" style="color: red;"> Materasso in lattice ... </p>. Gli stili Nell'esempio al punto precedente ho aggiunto l'importantissimo attributo style che serve a definire come apparirà sul video quell'elemento (si parla di stili): uno stile è definito da proprietà separate da punti e virgola. Nell'esempio è stata inserita una sola proprietà (color: red;) che come si intuisce facilmente sceglie il colore rosso per il testo del paragrafo. Una proprietà prevede quindi: - un nome, come color - i due punti che separano il nome dal valore che segue - il valore - un punto e virgola che serve a separare più proprietà Esempio con due proprietà nello stile: <p id="materasso" style="color: red; font-size: 35px;"> Materasso in lattice ... </p>. In questo caso abbiamo fissa la dimensione (size) del carattere (font) a 35px dove px indica un punto sullo schermo; attenzione a non lasciare spazi tra 35 e px! Autore: Fabrizio Camuso (email: [email protected] sito web: www.camuso.it ) Pag. 4 Introduzione allo sviluppo di pagine WEB per le classi prime – versione 28 Novembre 2010 NOTA: esistono moltissime proprietà che possiamo usare nell'attributo style (cercate CSS con google o scaricate dal mio sito la dispensa per le classi terze se volete approfondire l'argomento; e, sì, sono disponibili anche delle videolezioni dedicate :) Nel seguito della dispensa presenterò diverse altre utili proprietà ma in ogni caso non sarete costretti a studiarle a memoria: l'editor (Netbeans in particolare) è in grado di presentare a richiesta l'elenco di tutte le proprietà e di autocompletare ciò che si inizia a scrivere; certo è richiesto almeno sapere che esiste la proprietà e saper riconoscere il suo nome inglese! Ma per questo è sufficiente stare attenti in aula e fare gli esercizi in laboratorio! Aggiungiamo un poco di interattività Oggi le pagine web non sono delle semplici 'cartoline' senza vita come una volta in cui l'unica cosa che poteva fare il visitatore era cliccare sui link per cambiare pagina: usando linguaggi di scripting come javascript e php (blocchi di istruzioni ospitate dentro l'HTML) è possibile far eseguire comandi all'accadere di particolari eventi (clic, passaggio del mouse ecc.) oppure recuperare informazioni da una banca dati ed usarle per comporre la pagina. Ecco come si programma la pagina web per cambiare il colore del testo da rosso a verde quando si fa clic su un punto qualsiasi del paragrafo: <p id="materasso" style="color: red;" onclick=" document.getElementById('materasso').style.color='green'; "> Cliccami ed diventerò verde dalla rabbia!!! </p> Anche se riprenderemo con calma l'argomento della programmazione javascript non è impossibile capire un passo alla volta quello che si sta chiedendo: innanzitutto con l'attributo onclick si sta chiarendo che si vuole programmare il comportamento del paragrafo quando qualcuno farà click su di esso il valore che si assegna a onclick è il comando (o i comandi) da eseguire document rappresenta la pagina document. usando il punto accediamo, tra le altre cose, ai comandi disponibili per questo oggetto document.getElementById('materasso'): dell'oggetto document usiamo il comando che prende (get) l'elemento (Element) individuato (By) il suo id (Id) che deve essere specificato come argomento del comando tra parentesi ed apici; quindi questa scrittura corrisponde al paragrafo con id=materasso document.getElementById('materasso').style di nuovo con il punto accediamo al contenuto del paragrafo individuato; in particolare ci interessa l'attributo style document.getElementById('materasso').style.color e sempre con il punto di tutte le proprietà dell'attributo style individuiamo color perchè vogliamo assegnarle un diverso valore con = 'green'; Autore: Fabrizio Camuso (email: [email protected] sito web: www.camuso.it ) Pag. 5 Introduzione allo sviluppo di pagine WEB per le classi prime – versione 28 Novembre 2010 Gli elenchi ordinati e non ordinati: <ol>, <li>, <ul> (da www.html.it) Gli elenchi numerati sono contraddistinti da un numero progressivo che precede ogni elemento della lista. Utilizzando un programma di videoscrittura siete abituati a chiamarli elenchi numerati. Il tag da utilizzare per aprire un elenco numerato è <ol> ("ordered list") e gli elementi sono individuati dal tag <li>("list item"): codice Testo che precede la lista <ol> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> </ol> Testo che segue la lista risultato Testo che precede la lista 1. primo elemento 2. secondo elemento 3. terzo elemento Testo che segue la lista Gli elenchi puntati sono individuati invece dal tag <ul> ("unordered list"), e gli elementi dell’elenco sono contraddistinti anch’essi dal tag <li> (in buona sostanza si tratta di quello che i programmi di videoscrittura chiamano elenchi puntati). Testo che precede la lista <ul> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> </ul> Testo che segue la lista Testo che precede la lista primo elemento secondo elemento terzo elemento Testo che segue la lista I link: <a> (prof. Camuso) Facendo clic su un elemento link (una parola o una immagine) il browser ‘naviga’ verso la risorsa indicata nel link: e cioè verso un altro punto della stessa pagina o un punto di un'altra pagina dello stesso o di altri siti, un documento (word, excel, PDF che quasi sempre verrà visualizzato direttamente), un file file compresso che potrà essere scaricato, un file audio o video che sarà riprodotto ecc. Per i link si usa il tag <a> da ancor = ancora, perché è come se un punto di una pagina ne agganciasse un altro un po’ come un ancora si aggancia al fondo marino. L'immagine è quindi quella di una serie di pagine tutte agganciate tra di loro. I link sono formati da due parti: quella visibile su cui si fa clic (la scritta tra il tag di apertura e chiusura) e quella che definisce la posizione della risorsa su Internet a cui saltare (href=”…” da hypertext reference = indirizzo ipertestuale). Autore: Fabrizio Camuso (email: [email protected] sito web: www.camuso.it ) Pag. 6 Introduzione allo sviluppo di pagine WEB per le classi prime – versione 28 Novembre 2010 indirizzo da raggiungere Ecco alcuni esempi: a) link esterno ad un altro sito scritta su cui si può fare click <a href="http://www.thebest.it/"> clic qui per il meglio del web! </a> b) link interno alla pagina <a href="#capitolo2"> Vai al Capitolo 2 </a> In questo ultimo caso si salta in un punto diverso della stessa pagina del link; la pagina scorrerà verso il basso o verso l’alto fino alla posizione in cui è stato inserito il punto di arrivo che dovrà essere segnalato con: <a name=”capitolo2”> ... testo .... testo </a> c) link ad un file compresso che si trova nella cartella manuali <a href="http://www.theBest.it/manuali/manuale.zip"> preleva il manuale ‘zippato’ </a> d) Mandare una mail! Come link si può anche specificare un indirizzo e-mail. In questo caso si aprirà direttamente il programma di posta dell’utente con l’indirizzo e-mail pre-impostato: <a href="mailto:[email protected]"> Contattami! </a> Le immagini : <img> (da www.html.it con adattamenti del prof. Camuso) La sintassi per inserire una immagine è: <img src=http://html.it/guide/img/guida_html/miaImmagine.gif /> dove img significa image, cioè immagine e src significa source, cioè origine Il tag <img> è un tag “vuoto”, che in xhtml ha la necessità di essere chiuso con spazio e / L’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto: <img src="logo.gif" alt="HTML.it" /> L’attributo alt è di estrema utilità per rendere il sito accessibile a tutti gli utenti: i disabili che non sono in grado di vedere nitidamente le immagini sullo schermo potrebbero avere delle difficoltà, nel caso in cui l’attributo alt non sia specificato. Autore: Fabrizio Camuso (email: [email protected] sito web: www.camuso.it ) Pag. 7 Introduzione allo sviluppo di pagine WEB per le classi prime – versione 28 Novembre 2010 Gli ipo-vedenti e i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini grazie a dei software appositi (gli screen reader) che “leggono” lo schermo tramite un programma di sintesi vocale e vanno a cercare proprio le descrizioni contenute nel tag alt. Non specificare il testo alternativo significa rendere impossibile la navigazione a queste persone così sfortunate. Usare una immagine come link E’ sufficiente inserire <img … > all’interno del tag <a> … </a>: <a href=http://www.html.it> <img src="logo.gif" /> </a> Tabelle: <table> (da www.html.it con adattamenti del prof. Camuso) Una tabella è una griglia formata da righe e colonne. Anche se è possibile fare diversamente, per il momento ci limiteremo a tabelle in cui tutte le righe hanno lo steso numero di colonne. I tag necessari per creare una tabella sono (li presento proprio sotto forma di tabella!): <table> </table> Apre / chiude la tabella <tr> </tr> “table row”: apre / chiude una riga <td> </td> “table data”: apre / chiude una cella all’interno di una riga Per vedere i bordi delle celle di una tabella bisogna impostare il loro spessore almeno a 1. Anche se sarebbe più corretto farlo usando gli stili con le tabelle le cose sono un poco più complicate per cui adotteremo, per il momento, un metodo assai semplice che però in futuro non dovete abituarvi ad usare: l'attributo border a cui si assegna il valore corrispondente allo spessore: <table border="1"> <tr> <td>prima cella</td> <td>seconda cella</td> </tr> <tr> <td>terza cella</td> <td>quarta cella</td> </tr> </table> Usando regole css (vedi avanti) è possibile specificare altezza e larghezza per la tabella o per le singole righe e/o colonne e la spaziatura tra le celle. Autore: Fabrizio Camuso (email: [email protected] sito web: www.camuso.it ) Pag. 8
