Web writing 2
Upcoming SlideShare
Loading in...5
×
 

Web writing 2

on

  • 420 views

corso - 2 parte

corso - 2 parte

Statistics

Views

Total Views
420
Views on SlideShare
420
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web writing 2 Web writing 2 Presentation Transcript

  • WEB WRITING 2 Corso di formazione per l’aggiornamento e l’implementazione del sito WEB d’Istituto Rel. Adriano Disperati
  • 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 lin g uaggio 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 &quot;paragrafo&quot; (<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 &quot;Template del sito&quot;, si individua la pagina html che costituisce il modello di base, una sorta di &quot;gabbia&quot; 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= &quot;Link alle pagine con le informazioni generali sulla scuola&quot; href= &quot;scuola.htm &quot; >Scuola</a> = link relativo ad una pagina del sito
    • <a onkeypress= &quot;window.open(this.href);return false&quot; onclick= &quot;window.open(this.href);return false&quot; title= &quot;Link a sito esterno - La pagina si apre in una nuova finestra - Biblioceca di Larciano&quot; 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= &quot;stdoc/image001.gif&quot; alt= &quot;logo dell&#8217;Istituto&quot; width= &quot;210&quot; height= &quot;273&quot; /> = Inserimento immagine
    • <p>E-mail:<a title= &quot;link alla casella postale dell&#8217;Istituto&quot; href= mailto:ptmm00700a@istruzione.it > Ferrucci</a></p> = Link E-Mail attraverso una parola
    • <a href= &quot;uae.htm&quot; > <img src= &quot;stdoc/UAE.gif&quot; alt= &quot;Link alla pagina - Union des Anciens Eleves&quot; width= &quot;55&quot; height= &quot;88&quot; /></a> = Link ad una pagina del sito attraverso un’immagine
    • <a href= &quot;stdoc/prog/relazione2007.doc“ onkeypress= &quot;window.open(this.href);return false&quot; onclick= &quot;window.open(this.href);return false&quot; title= &quot;Documento in formato WORD - La pagina si apre in una nuova finestra &quot;> 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= &quot;stdoc/foto/art01.gif&quot; alt= &quot;Laboratorio artistico&quot; width= &quot;110&quot; height= &quot;80“ /><br /><a href= &quot;lab2a.htm“ >Arte e Creativita'</a><br / > = Caricamento di un’immagine e link ad una pagina del sito attraverso una frase