Web writing 2

WEB WRITING 2

Corso di formazione per l’aggiornamento e l’implementazione

del sito WEB d’Istituto

Rel. Adriano Disperati

ISTITUTO COMPRENSIVO MATERNA - ELEMENTARE - MEDIA

“FERRUCCI” LARCIANO (PT)

Il linguaggio XHTML

Il linguaggio di marcatura XHTML, usato per costruire siti web e pagine ipertestuali, e’ un'estensione dell'HTML divenuto obsoleto e abusato.

L’XHTM e’ piu’ " rigoroso", "pulito" e "ben formato", evita la sovrastruttura impropria di cui è stato caricato l'HTML nel tempo e rispetta rigide regole sintattiche.

Il linguaggio Xhtml 1.0 Strict e’ sempre associato ai fogli di stile CSS2 la soluzione migliore per garantire la separazione fra i contenuti veri e

propri della pagina e la loro presentazione.

I fogli di stile CSS hanno lo scopo di istruire il browser in modo da scindere chiaramente la presentazione dai contenuti e dalla struttura.

I CSS consentono di controllare la presentazione i tutte le pagine del sito in un colpo solo. Una modifica allo stile del paragrafo, ad esempio, si propaga su tutte le pagine che utilizzano il tag "paragrafo" (<p> ... </p> ).

Struttura, contenuti, presentazione

La struttura: rappresenta l'organizzazione logica del contenuto (ad esempio titoli,sottotitoli, paragrafi, ecc.). Il linguaggio di marcatura XHTML serve per istruire il browser(Internet Explorer, Firefox, Opera, ecc.) a creare le aree in cui inserire i contenuti.

I Contenuti: testi, immagini, elementi multimediali (suoni, filmati, animazioni). I contenuti vengono inseriti nella gabbia costruita con il codice di marcatura.

La presentazione e’ I'insieme di regole con cui una pagina è riprodotta a video. Comprende la formattazione dei testi, la posizione di immagini e multimedia, il layout. Queste regole di stile sono fornite al browser da specifici file: i fogli di stile, che hanno l'estensione css.

Struttura di una pagina web

L'analisi del codice XHTML di una pagina web nel suo insieme consente di individuare una struttura logica che organizza i contenuti e le sezioni della pagina.

Ad esempio, nel "Template del sito", si individua la pagina html che costituisce il modello di base, una sorta di "gabbia" costituita da:

-testata: in questa sezione ci sono îl nome del sito e l'eventuale logo;

-menu di navigazione: i link per la navigazione del sito;

-contenuto: è il corpo principale della pagina;

-contenuti contestuali: ad es., news e testo aggiuntivo, etc.;

-piè di pagina: è la sezione disposta a fondo pagina.

Le diverse sezioni di pagina sono definite nel codice da tag di apertura (<div>) e di chiusura (</div>), all’'interno di un macro-contenitore principale (<body>).

Struttura del sito web

Nella cartella WebDAV risiedono i singoli documenti (file HTLM, fogli di stile, immagini, ecc) organizzati in sottocartelle.

La home page e’ il file index.htm, nelle cartella “css” i fogli di stile e in “stdoc” documenti vari e immagini.

Con WebDav si possono gestire file e cartelle del sito come fossero del proprio computer. E’ importante tenere presente, pero’, che qualunque modifica a questi file sara’ immediatamente pubblica. Per questo è preferibile duplicare l’intera cartella sul proprio PC e lavorare su quella fino a quando non siamo sicuri del risultato.

Tag

<h1….h6> testo </h1…h6> = grandezza caratteri

<p> testo </p> = delimita un paragrafo

<br /> = a capo

<a title= "Link alle pagine con le informazioni generali sulla scuola" href= "scuola.htm" >Scuola</a> = link relativo ad una pagina del sito

<a onkeypress= "window.open(this.href);return false" onclick= "window.open(this.href);return false" title= "Link a sito esterno - La pagina si apre in una nuova finestra - Biblioceca di Larciano" href= http://biblio.comune.pistoia.it/easyweb/new/larc.html >Biblioteca di Larciano</a> = Link assoluto collegato ad una pagina di un sito esterno

<ul> <li> testo</li> </ul> = elenco puntato

Tag

<img src= "stdoc/image001.gif" alt= "logo dell’Istituto" width= "210" height= "273" /> = Inserimento immagine

<p>E-mail:<a title= "link alla casella postale dell’Istituto" href= mailto:[email protected]> Ferrucci</a></p> = Link E-Mail attraverso una parola

<a href= "uae.htm"> <img src= "stdoc/UAE.gif" alt= "Link alla pagina - Union des Anciens Eleves" width= "55" height= "88" /></a> = Link ad una pagina del sito attraverso un’immagine

<a href= "stdoc/prog/relazione2007.doc“ onkeypress= "window.open(this.href);return false" onclick= "window.open(this.href);return false" title= "Documento in formato WORD - La pagina si apre in una nuova finestra"> Relazione della Giunta Esecutiva 2007</a> = Link ad un documento .doc

Tag

<table border= “4” > <tr> <td> ORARIO ANTIMERIDIANO </td> <td> </td> <td> ORARIO POMERIDIANO </td> <td> </td> </tr> </table> = Costruzione di una tabella

<img src= "stdoc/foto/art01.gif" alt= "Laboratorio artistico" width= "110" height= "80“ /><br /><a href= "lab2a.htm“ >Arte e Creativita'</a><br /> = Caricamento di un’immagine e link ad una pagina del sito attraverso una frase

Web writing 2

Education

Transcript of Web writing 2