Creazione di pagine per Internet - Home

Transcript Creazione di pagine per Internet - Home

Creazione
di pagine per Internet
Brevi note a cura di Emanuele Lana
[email protected]
Argomenti
definizione di HTML
i tag
i collegamenti ipertestuali
gli elenchi puntati e numerati
le immagini
Che cos'è l'HTML
HTML: Hyper Text Markup Language
Un file HTML è un file di testo che contiene
dei tag
I tag indicano al web browser come
visualizzare la pagina
Un file HTML deve avere l'estensione htm o
html
Un file HTML può essere creato usando un
semplice editor di testo, per es. il Blocco note
La mia prima pagina HTML
<html>
<head>
<title>Elenco dei corsi</title>
</head>
<body>
<b>Elenco dei corsi 2006-2007</b>
Italiano:...
</body>
</html>
Funzionamento della pagina
Il primo tag è <html>. Segnala al browser che inizia
un documento HTML. L'ultimo tag della pagina è
</html>. Segnala al browser che finisce un
documento HTML.
Il testo contenuto tra il tag <head> e il tag </head>
è l'informazione dell'intestazione (header). Questo
testo non sarà visualizzato nella pagina del browser.
Il testo tra i tag <title> e </title> identifica il titolo
del documento. Esso viene visualizzato nel titolo della
finestra del browser.
Il testo compreso tra <body> e </body> è il corpo
principale della pagina ed è visualizzato dal browser.
Il testo tra <b> e </b> sarà visualizzato in grassetto.
I tag
sono usati per marcare gli elementi HTML
sono racchiusi tra i caratteri < e >
solitamente si usano in coppia, come i tag
<b> e </b>
il primo di una coppia è definito tag di
apertura, il secondo tag di chiusura
possono essere scritti in maiuscolo o
minuscolo:
<b> ha lo stesso significato di <B>
Gli elementi
Esempio di elemento:
<b>Programma dell'anno</b>
L'elemento:




comincia con un tag di apertura: <b>
finisce con un tag di chiusura: </b>
il contenuto è: Programma dell'anno
lo scopo del tag b è indicare al browser che
quel testo dev'essere visualizzato in grassetto
b sta per bold
Gli attributi dei tag
forniscono ulteriori informazioni all'elemento
il tag <body> definisce la parte di testo che
rappresenta il contenuto della pagina
l'attributo bgcolor imposta il colore di sfondo
di tutta la pagina:
<body bgcolor="green">
colore verde per tutta la pagina
bg sta per background
I principali tag
Livelli di titolo: da <h1> a <h6>, dove <h1>
è il più importante, <h6> il meno importante.
<h1>Divina commedia</h1>
<h2>Inferno</h2>
<h3>Canto I</h3>
h sta per heading
Paragrafi: <p>...</p>
Interruzioni di riga: <br>
NB: Il tag <br> non ha tag di chiusura
Commenti: 
Collegamenti ipertestuali
consentono la navigazione tra le pagine
possono essere associati a:


testo, solitamente sottolineato
immagini
si riconoscono perché, posizionandosi sopra, il
puntatore del mouse da freccia diventa una
"manina"
cliccando sul testo o sull'immagine, la finestra
del browser visualizzerà un nuovo contenuto
Il tag <a>
viene usato per creare un collegamento a un'altra
risorsa (pagina HTML, file di Word, file AVI, file PDF
ecc.)
con l'attributo href indica la posizione del file
<a href="esami.html">Esami</a>
con l'attributo target indica in quale finestra del browser
aprire la destinazione
<a href="esami.html" target="_blank">Esami</a>
viene aperta una nuova finestra del browser in cui sarà
visualizzato il contenuto della pagina esami.html
con l'attributo title visualizza una descrizione quando si
posiziona sopra il mouse
<a href="esami.html" title="Guarda gli esami">Esami</a>
Elenchi numerati
vengono definiti ordinati (ordered list):
1.
2.
3.
leggere il materiale
preparare una sintesi in Word
inviare l'allegato al docente
<ol>
<li>leggere il materiale</li>
<li>preparare una sintesi in Word</li>
<li>inviare l'allegato al docente</li>
</ol>
li sta per list item
Elenchi puntati
vengono definiti non ordinati (unordered list):



latino
italiano
geografia
<ul>
<li>latino</li>
<li>italiano</li>
<li>geografia</li>
</ul>
li sta per list item
Dimensioni del testo
assoluta


espressa in punti, per es. 12 pt
se l'utente modifica la dimensione carattere del
browser, non cambia la dimensione del testo
relativa


3 equivale a circa 12 pt
se l'utente modifica la dimensione carattere del
browser, cambia la dimensione del testo
<font size="3">ciao!</font>
Colori
Tabella colori con nome:
www.molly.com/molly/webdesign/136_colors.html
Tabella colori esadecimali
www.molly.com/molly/webdesign/colorchart.html
combinazioni RGB (red, green, blue)
valore colore (0-255) trasformato in esadecimale
Le immagini
una pagina HTML può visualizzare immagini
le immagini sono salvate in file diversi da
quello che contiene il testo e ha estensione
HTML
se in una pagina HTML compare
un'immagine, in realtà si tratta di due file:
uno contiene il vero e proprio contenuto (il
testo), l'altro è l'immagine
Il tag <img>
le immagini sono definite dal tag img
NB il tag img non ha tag di chiusura.
per visualizzare l'immagine, il tag img ha bisogno
dell'attributo src
<img src="images/logo.jpg">
L'indirizzo dell'attributo src indica la posizione in cui si
trova l'immagine, in questo caso nella cartella che ha
nome images.
l'attributo alt visualizza una descrizione quando si
passa sopra l'immagine con il mouse (cfr. attributo
title per tag a)
<img src="img/logo.jpg" alt="Logo della scuola">
src sta per search
Questione di pixel
la dimensione
dell'immagine può essere
misurata in pixel: per es.
246 x 307 (larghezza per
altezza)
ridimensionare on line
immagini:
www.picresize.com
Le tabelle
sono uno dei possibili strumenti per
impostare il layout della pagina
consentono la disposizione di testo e
immagini
la larghezza può essere assoluta (pixel)
o in percentuale della pagina
titolo
link
contenuto
banner
I tag <table>, <tr>, <td>
esempio di tabella con 2 righe e 2 colonne
<table width="80%">
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
tr sta per table row (riga)
td sta per table data (cella)
Riferimenti
Il materiale è stato liberamente
adattato da:
http://www.w3schools.com
Tra i numerosi siti di riferimento per
guide, software ecc.: http://www.html.it