web writing 2
DESCRIPTION
corso - 2 parteTRANSCRIPT
![Page 1: Web writing 2](https://reader034.vdocuments.net/reader034/viewer/2022050905/54903c7cb47959e54f8b4620/html5/thumbnails/1.jpg)
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)
![Page 2: Web writing 2](https://reader034.vdocuments.net/reader034/viewer/2022050905/54903c7cb47959e54f8b4620/html5/thumbnails/2.jpg)
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> ).
![Page 3: Web writing 2](https://reader034.vdocuments.net/reader034/viewer/2022050905/54903c7cb47959e54f8b4620/html5/thumbnails/3.jpg)
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.
![Page 4: Web writing 2](https://reader034.vdocuments.net/reader034/viewer/2022050905/54903c7cb47959e54f8b4620/html5/thumbnails/4.jpg)
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>).
![Page 5: Web writing 2](https://reader034.vdocuments.net/reader034/viewer/2022050905/54903c7cb47959e54f8b4620/html5/thumbnails/5.jpg)
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.
![Page 6: Web writing 2](https://reader034.vdocuments.net/reader034/viewer/2022050905/54903c7cb47959e54f8b4620/html5/thumbnails/6.jpg)
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
![Page 7: Web writing 2](https://reader034.vdocuments.net/reader034/viewer/2022050905/54903c7cb47959e54f8b4620/html5/thumbnails/7.jpg)
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
![Page 8: Web writing 2](https://reader034.vdocuments.net/reader034/viewer/2022050905/54903c7cb47959e54f8b4620/html5/thumbnails/8.jpg)
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