1 / 23

Andiamo on-line

Andiamo on-line. Corso di formazione Elementi base per la costruzione di un sito web. Lezione 2 Progettare il sito e scrivere le pagine web. Nozioni di base per scrivere una pagina web Impostare la struttura delle pagine Organizzare i contenuti per il sito Mettere on-line le pagine web.

steel-vinson
Download Presentation

Andiamo on-line

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Andiamo on-line Corso di formazione Elementi base per la costruzione di un sito web

  2. Lezione 2Progettare il sito e scrivere le pagine web • Nozioni di base per scrivere una pagina web • Impostare la struttura delle pagine • Organizzare i contenuti per il sito • Mettere on-line le pagine web

  3. Nozioni basecodice HTML/XHTML • Anche se al momento conoscere il codice HTML/XHTML non serve per creare il vostro sito con questo corso, è bene sapere di cosa si tratta. • Ecco un esempio di codice in HTML: • Il codice XHTML differisce per: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3

  4. Nozioni baseTAG • All'interno di ogni pagina è presente una serie di marcatori (i TAG) a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. • I tag vanno inseriti tra parentesi uncinate (<TAG>), la chiusura del tag viene indicata con una "/" slash (</TAG>). • Il contenuto viene inserito all’interno dei tag: <TAG>contenuto</TAG> 4

  5. Nozioni base Attributi • Ai TAG possono essere associati degli attributi, tramite i quali si impostano delle varianti con cui il TAG agisce. • Ad esempio, per disporre un testo giustificato a destra: <P align="right">testo</P> • Alcuni TAG non hanno contenuto e non hanno chiusura, e il contenuto è identificato negli attributi, come ad esempio per le immagini: <IMG src=“logo.gif”> 5

  6. Nozioni baseProprietà della pagina • Una pagina web ha la seguente struttura: <html> <head> <title>Titolo della pagina</title> </head> <body> Contenuto della pagina </body> </html> • A livello di <body> possono essere definite alcune proprietà della pagina: • Colori di base per sfondo, testo e link • Immagine di sfondo 6

  7. Nozioni baseTesto • Esistono diverse tipologie di testo: • I titoli <h1>, <h2>, ..., <h6> • Il paragrafo <p> • Il blocco di testo<div> (va a capo, ma - a differenza del paragrafo non lascia spazi prima e dopo la sua apertura) • Il blocco di testo<span>(non va a capo) • Gli elenchi, numerati e non <ol><li> / <ul><li> 7

  8. Nozioni baseFormattazioni • Per ogni tipologia di testo è possibile applicare delle formattazioni, agendo con dei TAG o definendo degli attributi: • Font • Grassetto <b> • Corsivo <i> • Sottolineato <u> • Allineamento • Colore 8

  9. Nozioni baseLink • I link, o collegamenti, fanno riferimento a diversi tipi di indirizzi: • indirizzi URL assoluti: <a href="http://www.sito.it/">SITO.IT</a> • indirizzi relativi alla struttura del sito stesso <a href=“pagina1.html">Vai alla pagina</a> • indirizzi che fanno riferimento a documenti da scaricare <a href=“docs/volantino.pdf">Scarica il volantino</a> • indirizzi che fanno riferimento a mail <a href=“mailto:info@sito.it">Scrivici</a> • Indirizzi che fanno riferimento a delle ancore, cioè delle a posizioni interne alla pagina corrente <a name="posizione1"></a> e possono essere raggiunti tramite un collegamento: <a href="#posizione1">Vai alla posizione 1</a> 9

  10. Nozioni baseImmagini • I formati delle immagini che possono essere inseriti sono JPER, GIF e PNG. • Il formato base è: <img src=“logo.gif"> • Il file deve essere posizionato su uno spazio web, e l’indirizzo URL può essere completo (http://www...) o relativo al sito stesso (img/logo.gif) • Per le immagini possono essere definiti: • Dimensioni • Allineamento / posizionamento rispetto al testo • Spaziature • Link 10

  11. Nozioni baseTabelle • L’uso delle tabelle è molto importante per l’organizzazione dei contenuti in una pagina. • E’ possibile definire varie proprietà per righe, colonne o singole celle: • Dimensioni, bordi, spaziature • Colori di sfondo • Allineamento del testo • Le celle possono essere unite, per formare strutture anche complesse. 11

  12. Nozioni baseApprofondimenti HTML • Per maggiori approfondimenti sui TAG HTML: • http://www.webmasterpoint.org/programmazione/html/html/ • http://xhtml.html.it/guide/leggi/51/guida-html/ • http://www.cerca-manuali.it/manuale-guida/html.htm 12

  13. Nozioni baseFogli stile (CSS) / 1 • Servono per gestire la formattazione e la grafica • Sono molto potenti e funzionano “a cascata” • Possono essere interni (nell'HTML) ed esterni (in file appositi e poi inclusi nell'HTML) • Gli esterni sono i più usati e quelli che hanno più 'senso' • Per includere un file CSS: <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=all> 13

  14. Nozioni baseFogli stile (CSS) / 2 • La sintassi prevede questa forma: • Esempi di selettori: • Di tag: body, p, h2, h1, ul • Di classi: .menu, .paragrafoUno, .sottoTitolo • Di ID: #mioTitolo, #menuUno 14

  15. Nozioni baseFogli stile (CSS) / 3 • Qualche esempio P { font-size: 12px; color:black; margin-top:20px; margin-bottom 10px; } .paragrafoBlu { background-color: blue; } #boxMenu { background-image:url('/img/bgBox.jpg') } • Per approfondire: • http://css.html.it/guide/leggi/2/guida-css-di-base/ • http://www.morpheusweb.it/html/manuali/css.asp • http://www.cerca-manuali.it/manuale-guida/css.htm 15

  16. Struttura delle pagineLe pagine e i contenuti / 1 • Per iniziare va preparato un elenco delle pagine che si voglio realizzare, e dei contenuti necessari, in modo da organizzare adeguatamente i file. E' utile anche organizzare le pagine con le loro relazioni come in un diagramma. 16

  17. Struttura delle pagineLe pagine e i contenuti / 2 • Inoltre vanno impostati i modelli base almeno per: • Pagina principale (home - index.html) • Pagina di contenuto Si possono utilizzare anche modelli web già pronti, o preparati appositamente da grafici

  18. Struttura delle pagineI modelli • Per impostare un sito web è utile creare delle pagine di modello, con cui definire la struttura base dei contenuti e la veste grafica. • L’utilizzo degli stili (CSS) permette di separare contenuti e grafica, cioè di modificare elementi grafici parallelo agli elementi di contenuto. • E' bene definire con il miglior dettaglio possibile i modelli su cui si basano le pagine, prima di inserire i contenuti e produrre le singole pagine. 18

  19. Struttura delle pagineForma delle pagine • La forma delle pagine può essere definita a tavolino, senza strumenti software, per identificare le aree in cui andranno posizionati i contenuti. Delle strutture classiche sono: 19

  20. Organizzare i contenuti / 1 • I file che rappresentano i contenuti vanno organizzati in una cartella locale di lavoro (directory), meglio se con delle sotto-cartelle che raggruppano file di tipo diverso. • Per esempio: • nome_sito: cartella principale con le pagine html • img: contiene i file immagine • doc: contiene i documenti • css: contiene eventuali fogli di stile 20

  21. Organizzare i contenuti / 2 • Alcuni editor html permettono di gestire direttamente file e cartelle (es. NVU). • In particolare vanno posizionati i file relativi a immagini e documenti che poi verranno “linkati” nelle pagine web. • Le pagine web vanno create definendo esattamente i loro nomi, affinché i collegamenti tra le pagine siano consistenti. 21

  22. Pubblicare le pagine web • Una volta create le pagine web, è possibile metterle on-line attraverso un programma FTP, che permette sostanzialmente di spostare e copiare file tra le nostre cartelle locali e le cartelle presenti sullo spazio web. • Per attivare il collegamento FTP è necessario impostare: • Host: corsowebcsv.altervista.org • Login: corsowebcsv • Password: corsoweb 22

  23. Compitini per casa • Registrare uno spazio web su altervista • Realizzare delle pagine web di prova I materiali del corso sono disponibili su http://corsowebcsv.altervista.org 23

More Related