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
Scarica
Random flashcards
CRANIO

2 Carte oauth2_google_d7270607-b7ab-4128-8f55-c54db3df9ba1

Prova Lavoro

2 Carte nandoperna1

biologia

5 Carte patty28

CIAO

2 Carte oauth2_google_78a5e90c-1db5-4c66-ac49-80a9ce213cb9

il condizionale

2 Carte oauth2_google_2e587b98-d636-4423-a451-84f012b884f0

creare flashcard