Corso WEB

Transcript

Corso WEB

Corso WEB
Scuola Media Statale Ferentino
Maggio 2011
relatore: ing. Gianluca VENTURI
www.ergonotec.it
Corso WEB - lezione 5
1
RIPASSO...
Chi “costruisce“ il web?
Chi può pubblicare contenuti?
Cosa serve per farlo?
www.ergonotec.it
2
RIPASSO...
Cosa serve per essere online?
1. host: un computer (server) che ospiti il
nostro sito facendogli corrispondere un
indirizzo www.miosito.it
2. dei contenuti compatibili con il web
3. il modo per caricare (upload) contenuti
sull'host
www.ergonotec.it
3
La “grammatica” dell'HTML
Il W3C (World Wide Web Consortium)
Da Wikipedia:“Il web ormai non è più uno strumento per «appassionati», ma è
diventato parte integrante della vita comune dell'essere umano. Attualmente
esistono diversi tipi di apparecchi (come cellulari e PDA) che accedono ad internet.
Ciò è possibile solo grazie ad un «comune linguaggio di comunicazione» [...].
Il W3C si occupa di aggiornare e creare queste specifiche.
”
Cos'è l'accessibilità?
www.ergonotec.it
4
Una pagina WEB: I TAG PRINCIPALI
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
</head>
<body>
</body>
</html>
www.ergonotec.it
5
Una pagina WEB: I TAG PRINCIPALI
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>La mia prima pagina web</title>
</head>
<body>
<h1>Questo è il titolo della mia pagina</h1>
<p>Questo è il contenuto</p>
</body>
</html>
www.ergonotec.it
6
Questo è il risultato
www.ergonotec.it
7
Regole
I TAG sono “parole chiave” del linguaggio
HTML e si aprono e si chiudono
<miotag> ... </miotag>
TAG
APERTO
www.ergonotec.it
TAG
CHIUSO
8
Gli ATTRIBUTI dei TAG
Ogni TAG può essere “meglio specificato” con dei
parametri aggiuntivi che prendono il nome di
attributi
Gli attributi vengono inseriti nel tag di apertura
come nell'esempio di seguito riportato:
<p align='left'>Ecco un semplice paragrafo</p>
www.ergonotec.it
9
TAG e ATTRIBUTI
CI sono alcuni tag che addirittura non sortiscono
alcun effetto se non arricchiti da attibuti.
Uno di questi è <font>
Ecco un esempio:
Ecco il risultato:
<p>
Ecco un
<font FACE="Comic Sans MS" COLOR="red" SIZE="6">
Semplice
</font>
paragrafo
</p>
www.ergonotec.it
10
Due link utili
Il riferimento più autorevole per la sintassi (la
grammatica) dell'HTML è il sito della W3C:
http://www.w3.org/TR/html4/index/elements.html
Da questo sito potrete provare a digitare del codice
HTML e vedere immediatamente cosa accade:
http://www.w3schools.com/html/default.asp
Scegliere i COLORI per un sito web
http://visibone.com/colorlab/big.html
www.ergonotec.it
11
ESERCITAZIONE
Scegliere i COLORI per un sito web
Chi ha fatto i compiti?
www.ergonotec.it
12
Le Tabelle
Una tabella è una struttura fondamentale per
l'HTML e può essere un comodo sistema per
organizzare dei contenuti:
NOME
COGNOME
INDIRIZZO
TELEFONO
Pippo
Disney
Via Appia, 122
32911122233
Pluto
Disney
Via Cassia, 124
3478822334
Inoltre le tabelle possono essere visibili o invisibili
e di varie forme.
www.ergonotec.it
13
Tabelle: i TAG
<table border='1'>
<tr>
<td>riga 1, colonna 1</td>
</tr>
<tr>
</tr>
</table>
www.ergonotec.it
14
Tabelle: i TAG
Ogni tabella deve essere individuata dal TAG
<table> (in inglese appunto “tabella”)
Ad ogni riga della tabella deve esserci il TAG
<tr> (Table Row = riga della tabella)
Ad ogni colonna della tabella deve esserci il TAG
<td> (Table Data = dato della tabella)
www.ergonotec.it
15
Tabelle
Come si possono fare tabelle di questo tipo?
o di questo tipo?
www.ergonotec.it
16
Tabelle
<table border='1'>
<tr>
<td rowspan="2"> riga 1 cella 1 e 2 </td>
<td> riga 1 cella 2 </td>
</tr>
<tr><td> riga 2 cella 3 </td></tr>
</table>
www.ergonotec.it
17
Tabelle
<table border='1'>
<tr><td colspan="2"> riga 1 cella 1 e 2 </td></tr>
<tr><td> riga 2 cella 2 </td><td> riga 2 cella 3 </td></tr>
</table>
www.ergonotec.it
18
ESERCITAZIONE
Come si possono fare tabelle di questo tipo?
o di questo tipo?
www.ergonotec.it
19
Soluzione 1
<table>
<tr>
<td rowspan="2"> riga 1/2 cella 1 </td>
</tr>
<tr>
</tr>
</table>
www.ergonotec.it
20
ATTRIBUTI delle TABELLE
ALIGN: Consente di specificarne l'allineamento con le seguenti possibilità: Center, Left e Right
rispettivamente per centrato, a sinistra, a destra.
es. <Table align="center">......</Table>
BACKGROUND:
Permette di avere un'immagine come sfondo della tabella, è possibile applicarlo oltre che
all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e
<TH> descritti più avanti. Si possono utilizzare i vari tipi di file grafici consentiti: gif, jpg, png.
es. <Table background="immagine_di_sfondo.jpg">......</Table>
BGCOLOR:
Permette di avere un colore in tinta unita come sfondo della tabella, il colore può essere
espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.
es. <Table BGCOLOR="Yellow">......</Table>
BORDER:
Permette di avere un bordo perimetrale che contorna tutte le celle facenti parte della tabella; è
possibile impostarne anche lo spessore. Alcuni browser in mancanza di questo attributo lasciano un
piccolo spazio pur non facendo vedere alcun bordo, per recuperare quello spazio è necessario impostare il
border a zero.
es. <Table border ="1">......</Table>
BORDERCOLOR:
Permette di selezionare il colore del bordo, questo attributo supportato solo da IE per
funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso
col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.
es. <Table border="1" bordercolor="Red">......</Table>
www.ergonotec.it
21
ATTRIBUTI delle TABELLE
CELLPADDING: Specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di
una tabella e il dato vero e proprio in esse contenuto, il valore per default è 1 ,
quindi per tabelle più compresse si dovrà impostare cellpadding uguale a zero.
es. <Table cellpadding="10">......</Table>
CELLSPACING: Specifica la quantità di spazio vuoto da lasciare tra le singole celle
di dati di una tabella, il valore per default è 2, per tabelle più compresse si dovrà
impostare cellspacing uguale a zero.
es. <Table cellspacing="5">......</Table>
HEIGHT: Permette di specificare l'altezza della tabella, che può essere in pixel o in
percentuale dell'altezza della finestra del browser che la visualizza.
es. <Table height="50">......</Table> o <Table height="90%">......</Table>
WIDTH: Permette di specificare la larghezza della tabella, che può essere in pixel o in
percentuale dell'altezza della finestra del browser che la visualizza.
es. <Table width="350">......</Table> o <Table width="50%">......</Table>
www.ergonotec.it
22
IMPOSTIAMO UNA SITO WEB
Proviamo ora ad impostare la home page del
nostro primo sito web.
Immaginiamo di utilizzare lo schema classico
dividendo la pagina in tre parti attraverso una
tabella:
INTESTAZIONE
MENU'
-…
-…
- ...
www.ergonotec.it
CORPO CENTRALE
23
La scelta dei colori
Proviamo a scegliere da una tavolozza 3 o 4 colori
(è bene non esagerare) sulla base dei quali
costruire l'intero sito.
A tal proposito utilizziamo l'applicazione web
disponibile al link:
www.ergonotec.it
24
La scelta delle ragazze
www.ergonotec.it
25
La scelta dei ragazzi
www.ergonotec.it
26
Qualche aiuto per il codice
www.ergonotec.it
27
ESERCITAZIONE
Creare una pagina web con i colori
scelti precedentemente.
Inserire una intestazione ed un
menu' ma prima... scegliere di cosa
vuole parlare il nostro sito web.
Proviamo a caricare sul nostro sito
www.smsferentino.it le nostre
esercitazioni →
www.ergonotec.it
28

Corso WEB

Transcript

Documenti analoghi

tavolino CIRCLE

Tavolini tondi di servizio

Zapping Table

Scheda Prodotto Modello PEBBLE TABLE STRUTTURA

Le Tabelle - Roberta Gerboni

ellipse table

tavoli autoptici autopsy tables

COLLEZIONE Diamond COLLEZIONE Diamond

Tavolini quadrati o rettangolari

Tecno Life - tecno spa