www.icoarena.com
Costruisci il tuo sito web
da solo!
Un pratico tutorial per imparare velocemente a
scrivere pagine HTML e pubblicarle online.
Ico Arena
01. PREMESSA
Sviluppare un sito web è costoso
Per sviluppare un sito web si deve saper programmare
2
02. PERCHÉ DOVRESTI AVERE UN SITO WEB
Perché dovresti avere un sito web se hai un’azienda
Perché dovresti avere un sito web se non hai un’azienda
3
E’ tutta questione di stile
4
03. LA SCELTA DEL NOME
Alcune cose da tener presente
Quanto costa registrare un dominio
5
Qualche consiglio spassionato
Bisogna sempre avere un Piano B
6
04. PROGETTAZIONE DEL LAYOUT
Disegna il layout
7
Che stile scegliere
Le dimensioni contano
8
05. COSA È L'HTML?
Per cosa posso usare l'HTML?
Cosa significa H-T-M-L?
9
06. ELEMENTI E TAG
"Tag" che?
Puoi farmi qualche esempio?
<b>This text must be bold.</b>
10
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
This is a heading
This is a subheading
Ho sempre bisogno di un tag di apertura e uno di chiusura?
I tag devono essere scritti maiuscoli o minuscoli?
A molti browser non interessa se scrivi i tag tutti maiuscoli, tutti minuscoli o misti. <HTML>, <html>
o<HtMl> normalmente forniscono lo stesso risultato.
In ogni caso il modo corretto è quello di scriverli tutti minuscoli, quindi abituati a scrivere i tuoi tag con
i caratteri minuscoli.
Se continui con la prossima lezione in 10 minuti avrai fatto il tuo primo sito web.
11
07. CREA IL TUO PRIMO SITO WEB
Cosa posso fare?
<html>
<head>
</head>
<body>
</body>
</html>
12
Come faccio ora ad aggiungere contenuto al mio sito web?
<title>My first website</title>
<p>Hurra! Questo è il mio primo sito web.</p>
<html>
<head>
<title>Il mio primo sito web</title>
</head>
<body>
<p>Hurra! Questo è il mio sito web.</p>
</body>
</html>
.
13
08. ALTRI ELEMENTI
<html>
<head>
<title>My website</title>
</head>
<body>
<h1>Un titolo</h1>
<p>testo, testo, testo, testo</p>
<h2>Un sottotitolo</h2>
<p>testo, testo, testo, teso</p>
</body>
</html>
E ora?
<i>Questo dovrebbe essere corsivo.</i>
<small>Questo dovrebbe essere più piccolo.</small>
Questo dovrebbe essere più piccolo.
14
Posso utilizzare diversi elementi contemporaneamente?
<b><i>Testo in grassetto e in corsivo</i></b>
<b><i>Testo in grassetto e in corsivo</b></i>
Ancora elementi!
Un po' di testo<br /> e un altro po' di testo su un nuova riga
15
<hr />
<ul>
<li>Elemento della lista</li>
<li>Altro elemento della lista</li>
</ul>
<ol>
<li>Primo elemento della lista</li>
<li>Secondo elemento della lista/li>
</ol>
16
09. ATTRIBUTI
Cosa è un attributo?
<h2 style="background-color:#ff0000;">La mia amicizia con l'HTML</h2>
<html>
<head>
</head>
<body style="background-color:#ff0000;">
</body>
</html>
17
Come hanno fatto a diventare rosse le pagine?
<body style="background-color: red;">
Quali elementi possono utilizzare gli attributi?
18
10. LINK
<a href="http://www.icoarena.com/">Questo è il link a icoarena.com </a>
Cosa mi dici dei link tra le mie stesse pagine?
<a href="pagina2.htm">Fai click qui per andare alla pagina 2</a>
<a href="sottocartella/pagina2.htm">Fai click qui</a>
19
<a href="../pagina1.htm">Un link alla pagina 1</a>
Come faccio per i link interni alla pagina?
<h1 id="heading1">Titolo 1</h1>
<a href="#heading1">Link a titolo 1</a>
Posso fare un link a qualcos'altro?
<a href="mailto:[email protected]">Manda una e-mail Ico</a>
20
11. IMMAGINI
<img src="tim.jpg" alt="Tim" />
21
Questo è tutto quello che mi serve sapere sulle immagini?
<img src="images/logo.png" />
<img src="http://www.icoarena.com/logo.png" />
<a href="http://www. icoarena.com ">
<img src="logo.png" /></a>
<img src="logo.gif" alt=" icoarena.com logo" />
22
<img src="logo.gif" title="Impara l'HTML su icoarena.com" />
<img src="logo.png" width="141" height="32" />
23
12. TABELLE
E' difficile?
<table>
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
Che differenza c'è tra <tr> e <td>?
24
Ci sono degli attributi?
<table border="1">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
25
<table border="1" width="30%">
Altri attributi?
<td align="right" valign="top">Cell 1</td>
Cosa posso inserire nella mia tabella?
26
13. LAYOUT (CSS)
Certo, ma come?
<p style="font-size:20px;">Questo è scritto con dimensione 20</p>
<p style="font-family:courier;">Questo è Courier</p>
<p style="font-size:20px; font-family:courier;">Questo è Courier di
dimensione20</p>
Questo è scritto con dimensione 20
Questo è Courier
Questo è Courier di dimensione 20
27
Sembra un sacco di lavoro?
<html>
<head>
<title>La mia prima pagina web</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>La mia prima pagina web</h1>
<h2>Benvenuto nella mia prima pagina con i CSS</h2>
<p>Qui puoi vedere come funzionano i CSS</p>
</body>
</html>
28
Cosa posso fare ancora con i CSS?
<p style="color:green;">Testo verde</p>
<h1 style="background-color: blue;"Titolo con sfondo blu</h1>
<body style="background-image: url('http://www.html.net/logo.png');">
<p style="padding:25px;border:1px solid red;">Amo i CSS</p>
Amo i CSS
29
14. PUBBLICARE LE PAGINE
Il mondo è pronto per questo?
E' tutto quello che mi serve?
Come faccio per pubblicare le pagine?
30
14. ULTIMI CONSIGLI
Attento all'antialiasing
Un sito che balla!
I visitatori non sono daltonici!
31
Pagine leggere per una navigazione veloce
Aggiornare il sito
L'errato utilizzo dei font poco comuni
Non utilizzare i frames
Facilitare la navigazione
32
15. CONCLUSIONE
Google Plus
Twitter
33
