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

Corso Web CSV – Andiamo on-line 2 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

Corso Web CSV – Andiamo on-line Nozioni base codice 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: 3

Corso Web CSV – Andiamo on-line Nozioni base TAG 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 ( ), la chiusura del tag viene indicata con una "/" slash ( ). Il contenuto viene inserito all’interno dei tag: contenuto 4

Corso Web CSV – Andiamo on-line 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: testo Alcuni TAG non hanno contenuto e non hanno chiusura, e il contenuto è identificato negli attributi, come ad esempio per le immagini: 5

Corso Web CSV – Andiamo on-line Nozioni base Proprietà della pagina Una pagina web ha la seguente struttura: Titolo della pagina Contenuto della pagina A livello di possono essere definite alcune proprietà della pagina: –Colori di base per sfondo, testo e link –Immagine di sfondo 6

Corso Web CSV – Andiamo on-line Nozioni base Testo Esistono diverse tipologie di testo:  I titoli,,...,  Il paragrafo  Il blocco di testo (va a capo, ma - a differenza del paragrafo non lascia spazi prima e dopo la sua apertura)  Il blocco di testo (non va a capo)  Gli elenchi, numerati e non / 7

Corso Web CSV – Andiamo on-line Nozioni base Formattazioni Per ogni tipologia di testo è possibile applicare delle formattazioni, agendo con dei TAG o definendo degli attributi:  Font  Grassetto  Corsivo  Sottolineato  Allineamento  Colore 8

Corso Web CSV – Andiamo on-line Nozioni base Link I link, o collegamenti, fanno riferimento a diversi tipi di indirizzi: indirizzi URL assoluti: SITO.IT indirizzi relativi alla struttura del sito stesso Vai alla pagina indirizzi che fanno riferimento a documenti da scaricare Scarica il volantino indirizzi che fanno riferimento a mail Scrivici Indirizzi che fanno riferimento a delle ancore, cioè delle a posizioni interne alla pagina corrente e possono essere raggiunti tramite un collegamento: Vai alla posizione 1 9

Corso Web CSV – Andiamo on-line Nozioni base Immagini I formati delle immagini che possono essere inseriti sono JPER, GIF e PNG. Il formato base è: Il file deve essere posizionato su uno spazio web, e l’indirizzo URL può essere completo ( o relativo al sito stesso (img/logo.gif) Per le immagini possono essere definiti:  Dimensioni  Allineamento / posizionamento rispetto al testo  Spaziature  Link 10

Corso Web CSV – Andiamo on-line Nozioni base Tabelle 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

Corso Web CSV – Andiamo on-line Nozioni base Approfondimenti HTML Per maggiori approfondimenti sui TAG HTML: one/html/html/ guida/html.htm 12

Corso Web CSV – Andiamo on-line Nozioni base Fogli 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: 13

Corso Web CSV – Andiamo on-line Nozioni base Fogli 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

Corso Web CSV – Andiamo on-line Nozioni base Fogli 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:    15

Corso Web CSV – Andiamo on-line Struttura delle pagine Le 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

Corso Web CSV – Andiamo on-line 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 Struttura delle pagine Le pagine e i contenuti / 2

Corso Web CSV – Andiamo on-line Struttura delle pagine I 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

Corso Web CSV – Andiamo on-line Struttura delle pagine Forma 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

Corso Web CSV – Andiamo on-line 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

Corso Web CSV – Andiamo on-line 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

Corso Web CSV – Andiamo on-line 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

Corso Web CSV – Andiamo on-line Compitini per casa Registrare uno spazio web su altervista Realizzare delle pagine web di prova I materiali del corso sono disponibili su