Corso WEB DESIGN Aprile – Maggio 2015 Il World Wide Web (in inglese letteralmente significa "ragnatela mondiale"), abbreviato Web o web, sigla WWW, è uno dei principali servizi di Internet che permette di navigare e usufruire di un insieme vastissimo di contenuti (multimediali e non) collegati tra loro attraverso legami (link). Altri servizi download: la distribuzione di software , dati , giochi ecc.; web mail: la gestione della casella di posta elettronica attraverso il Web; streaming: la distribuzione di audio/video in tempo reale; web TV: la televisione fruita attraverso il Web; web radio: la radio fruita attraverso il Web; chat: la comunicazione testuale e multimediale; videochiamate: la comunicazione vocale tra più utenti di Internet; socia network : tenere contatti con amici e follower Tali servizi sono resi disponibili attraverso particolari computer chiamati server web. Chiunque disponga di un computer, di un accesso ad Internet, degli opportuni programmi e di uno spazio web ( dominio ), porzione di memoria di un server web destinata alla memorizzazione di contenuti web e all'implementazione di servizi web, può, nel rispetto delle leggi vigenti nel Paese in cui risiede il server web, pubblicare contenuti multimediali sul Web e fornire particolari servizi attraverso il Web. I contenuti del Web sono costantemente on-line quindi costantemente fruibili da chiunque disponga di un computer, di un accesso a Internet e degli opportuni programmi (in particolare del browser , il programma che permette, come si dice in gergo, di "navigare" nel Web, cioè di fruire dei contenuti e dei servizi del Web.) I contenuti I contenuti del Web sono organizzati nei siti web a loro volta strutturati nelle pagine web le quali si presentano come composizioni di testo e/o grafica visualizzate sullo schermo del computer dal browser web. Le pagine web, anche appartenenti a siti diversi, sono collegate fra loro in modo non sequenziale attraverso i cosiddetti link (anche chiamati collegamenti), parti di testo e/o grafica di una pagina web che permettono di accedere ad un'altra pagina web, di scaricare particolari contenuti, o di accedere a particolari funzionalità, cliccandoci sopra con il mouse, creando così un ipertesto. Tutti i siti web, sono identificati dal cosiddetto indirizzo web, una sequenza di caratteri univoca chiamata in termini tecnici URL (Uniform Resource Locator) che ne permette la rintracciabilità nel Web. l Web è implementato attraverso un insieme di standard, i principali dei quali sono i seguenti: HTML : HyperText Markup Language (traduzione letterale: linguaggio a marcatori per ipertesti)): il linguaggio con cui sono scritte e descritte le pagine web; HTTP : il protocollo di rete (HyperText Transfer Protocol : protocollo di trasferimento di un ipertesto) ; URL : indirizzo del sito web. Le pagine WEB Come abbiamo visto le pagine Web sono il mattone con cui sono costruiti i Siti Web. Le pagine web si presentano come composizioni di testo e/o grafica visualizzate sullo schermo del computer dal browser web. Consideriamo una semplicissima pagina web Essa è costituita da • • • • Un logo Una descrizione (nel corpo) Una immagine Un’altra descrizione ( nel piede) Ma cosa c’è dietro la pagina ? Chi è che si occupa della visualizzazione di quei contenuti ? Come si fa per disporre i contenuti in quel modo nell’ambito della pagina? Tutto questo avviene utilizzando nel modo opportuno il linguaggio HTML ( HyperText Markup Language ) Tramite il quale viene generato e visualizzato il contenuto della pagina. (L’ acronimo HTML indica «linguaggio a marcatori per ipertesti») Questo è il codice che genera la pagina in oggetto <!DOCTYPE HTML> <html> <head> <title>STRUTTURA DI UNA PAGINA HTML</title> </head> <body "> <img src="csclogo.jpg" width="320" height="200" > <br> <p> <h1> Corso di WEB DESIGN </h1> </p> <br> <img src="webdesign.jpg" width="300" height="250" > <br> <p> <h3> Castel Goffredo Aprile-Maggio 2015 </h3> </p> </body> </html> STRUTTURA DI UNA PAGINA WEB Un documento HTML o «pagina web» è un file di testo composto da una serie di elementi chiamati TAG e dai relativi attributi. Ogni tag è racchiuso tra i simbolo < e > . ( es. < nome_tag > ) Generalmente i tag lavorano in coppia : al tag di apertura va associato un tag di chiusura la cui sintassi è </ nome_tag > Una pagina web contiene obbligatoriamente i seguenti tag : <!DOCTYPE html> Si dichiara che la pagina è un documento html N.B. Non ha il tag di chiusura <html> Tutto il documento è compreso tra questo tag e quello di chiusura </html> <head> Nella testata della pagina vengono inserite informazioni per i motori di ricerca , per caricare i fogli di stile ed i file javascript e , all’interno di questo tag , viene definito il titolo della pagina ( unico dato della «head» che viene visualizzato ) . </head> <body> L’elemento «body» racchiude i contenuti della pagina quali : testo , immagini , moduli , audio , video ed altri contenuti interattivi. In altre parole , ciò che vedranno i visitatori del sito. </body> Ecco , quindi come sarà la struttura HTML della pagina web : <!DOCTYPE HTML> <html> <head> <title> </title> </head> <body> </body> </html> Rivediamo l’ HTML della pagina web precedente <!DOCTYPE HTML> <html> <head> <title>STRUTTURA DI UNA PAGINA HTML</title> </head> <body "> <img src="csclogo.jpg" width="320" height="200" > <br> <p> <h1> Corso di WEB DESIGN </h1> </p> <br> <img src="webdesign.jpg" width="300" height="250" > <br> <p> <h3> Castel Goffredo Aprile-Maggio 2015 </h3> </p> </body> </html> Il testo Paragrafi 1. Aggiungere <p> al corpo del documento 2. Digitare il contenuto del paragrafo 3. Aggiungere il tag </p> per chiudere il paragrafo Titoli HTML include 6 elementi per diversi livelli di titolo <h1> è il titolo più importante <h6> il titolo meno importante N.B. : i tag dei titoli vanno sempre chiusi (es. : </h1> ) Interlinea Il tag <br> permette di inserire una riga vuota Visualizzare una immagine Per inserire una immagine si usa il tag <img> inserito nel punto in cui si vuole visualizzare l’immagine. La sintassi del comando è la seguente : <img src=«nome file» width=«misura in pixel» height=«altezza in pixel» > N.B. • il tag non necessita di chiusura • Nome file deve includere il path completo se l’immagine non è nella stessa cartella in cui si trova la pagina html Link (Collegamenti) E’ possibile effettuare collegamenti a: • • • • Altre pagine html Siti web Qualsiasi tipo di file Indirizzi di posta elettronica La sintassi del tag è la seguente : <a href=«nome_pagina.html»> <a href=«http://www.google.it»> <a href=«mailto:[email protected]> <a href=«doc.pdf»> per scaricare un documento pdf Segue il tag di chiusura </a> Le tabelle Negli esempi visti , il testo e le immagini si susseguono sequenzialmente nella pagina web. In genere , però , c’è la necessità di distribuire testo e immagini su tutta la superficie della pagina seguendo uno schema o una logica voluta dal webmaster. Uno strumento che ci permette di organizzare i contenuti secondo un preciso layout è costituito dalle tabelle. Uso di una tabella per creare la struttura della pagina I tag tramite i quali definiamo una tabella sono i seguenti : <table> <tr> <td> tanti quante sono le celle tanti quante sono le righe </td> </tr> </table> Il tag table accetta vari attributi tra cui border=«numero» ; numero indica la dimensione del bordo; se non è specificato viene assunto = 0 (nessun bordo). Interessanti i seguenti attributi delle celle ( td ) : Colspan=«numero» , indica su quante colonne si estende la cella Rowspan=«numero , indica su quante righe si estende la cella <!DOCTYPE HTML> <html> <head> <title></title> </head> <body > <table border="1" width=300 bgcolor=lime> <tr > <TD colspan=2 align="middle" bgcolor=white > <img src="csclogo.jpg" width=120 height=100 > </TD> </tr> <tr> <tr> <td><a href=tabelle.html>Home</td> <TD rowspan=3 align="middle" bgcolor=yellow> <img src="webdesign.jpg" width=100 height=100 > </td> </tr> <tr> <td><a href=menu1.html> Menu 1</td> </tr> <tr> <td><a href=menu2.html>Menu 2</td> </tr> </TD> </tr> <tr> <TD colspan=2 align="middle"bgcolor=red > CSC Castel Goffredo </TD> </tr> </table> </body> </html> Bibliografia Livello Base HTML 4.01 – Gigliotti - Apogeo HTML, XHTML & CSS per Negati – Tittel e Noble - Oscar Mondadori Creare un sito web per Negati – Crowder - Oscar Mondadori Livello avanzato HTML5 con css3 e ECMAScript – Bochicchio,Casati,Civera,Golia,Mostarda - Hoepli HTML5 E CSS3 – Castro e Hyslop - Hops Tecniche Nuove
Scarica
