Costruisci il tuo sito web da solo!
annuncio pubblicitario
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
