Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online.

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online."

Edmondo Festa
8 anni fa
Visualizzazioni

1 Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online. Ico Arena

2 01. PREMESSA Sviluppare un sito web è costoso Per sviluppare un sito web si deve saper programmare 2

3 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

4 E tutta questione di stile 4

5 03. LA SCELTA DEL NOME Alcune cose da tener presente Quanto costa registrare un dominio 5

6 Qualche consiglio spassionato Bisogna sempre avere un Piano B 6

7 04. PROGETTAZIONE DEL LAYOUT Disegna il layout 7

8 Che stile scegliere Le dimensioni contano 8

9 05. COSA È L'HTML? Per cosa posso usare l'html? Cosa significa H-T-M-L? 9

10 06. ELEMENTI E TAG "Tag" che? Puoi farmi qualche esempio? <b>this text must be bold.</b> 10

11 <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

12 07. CREA IL TUO PRIMO SITO WEB Cosa posso fare? <html> <head> </head> <body> </body> </html> 12

13 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

14 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

15 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

16 <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

17 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

18 Come hanno fatto a diventare rosse le pagine? <body style="background-color: red;"> Quali elementi possono utilizzare gli attributi? 18

19 10. LINK <a href=" è 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

20 <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:info@icoarena.com">manda una Ico</a> 20

21 11. IMMAGINI <img src="tim.jpg" alt="tim" /> 21

22 Questo è tutto quello che mi serve sapere sulle immagini? <img src="images/logo.png" /> <img src=" /> <a href=" icoarena.com "> <img src="logo.png" /></a> <img src="logo.gif" alt=" icoarena.com logo" /> 22

23 <img src="logo.gif" title="impara l'html su icoarena.com" /> <img src="logo.png" width="141" height="32" /> 23

24 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

25 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

26 <table border="1" width="30%"> Altri attributi? <td align="right" valign="top">cell 1</td> Cosa posso inserire nella mia tabella? 26

27 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

28 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

29 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(' <p style="padding:25px;border:1px solid red;">amo i CSS</p> Amo i CSS 29

30 14. PUBBLICARE LE PAGINE Il mondo è pronto per questo? E' tutto quello che mi serve? Come faccio per pubblicare le pagine? 30

31 14. ULTIMI CONSIGLI Attento all'antialiasing Un sito che balla! I visitatori non sono daltonici! 31

32 Pagine leggere per una navigazione veloce Aggiornare il sito L'errato utilizzo dei font poco comuni Non utilizzare i frames Facilitare la navigazione 32

33 15. CONCLUSIONE Google Plus Twitter 33

Documenti analoghi

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es: