0
WEB WRITING 2 Corso di formazione per l’aggiornamento e l’implementazione del sito WEB d’Istituto Rel. Adriano Disperati
Il linguaggio XHTML <ul><li>Il linguaggio di marcatura XHTML, usato per costruire siti web e pagine ipertestuali, e’ un'es...
Struttura, contenuti, presentazione <ul><ul><ul><li>La struttura:  rappresenta l'organizzazione logica del contenuto (ad e...
Struttura di una pagina web <ul><li>L'analisi del codice XHTML di una pagina web nel suo insieme consente di individuare u...
Struttura del sito web <ul><li>Nella cartella WebDAV risiedono i singoli documenti (file HTLM, fogli di stile, immagini, e...
Tag <ul><li><h1….h6> testo </h1…h6> =  grandezza caratteri </li></ul><ul><li><p> testo  </p>  =  delimita un paragrafo </l...
Tag <ul><li><img  src=   &quot;stdoc/image001.gif&quot;   alt=   &quot;logo dell’Istituto&quot;   width=   &quot;210&quot;...
Tag <ul><li><table  border=   “4”  > </li></ul><ul><li><tr> </li></ul><ul><li><td> ORARIO ANTIMERIDIANO </td> </li></ul><u...
Upcoming SlideShare
Loading in...5
×

Web writing 2

273

Published on

corso - 2 parte

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
273
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web writing 2"

  1. 1. WEB WRITING 2 Corso di formazione per l’aggiornamento e l’implementazione del sito WEB d’Istituto Rel. Adriano Disperati
  2. 2. Il linguaggio XHTML <ul><li>Il linguaggio di marcatura XHTML, usato per costruire siti web e pagine ipertestuali, e’ un'estensione dell'HTML divenuto obsoleto e abusato. </li></ul><ul><li>L’XHTM e’ piu’ &quot; rigoroso &quot;, &quot; pulito &quot; e &quot; ben formato &quot; , evita la sovrastruttura impropria di cui è stato caricato l'HTML nel tempo e rispetta rigide regole sintattiche. </li></ul><ul><li>Il lin g uaggio Xhtml 1.0 Strict e’ sempre associato ai fogli di stile CSS2 </li></ul><ul><li>la soluzione migliore per garantire la separazione fra i contenuti veri e propri della pagina e la loro presentazione. </li></ul><ul><li>I fogli di stile CSS hanno lo scopo di istruire il browser in modo da scindere chiaramente la presentazione dai contenuti e dalla struttura. </li></ul><ul><li>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> ). </li></ul>
  3. 3. Struttura, contenuti, presentazione <ul><ul><ul><li>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. </li></ul></ul></ul><ul><ul><ul><li>I Contenuti: testi, immagini, elementi multimediali (suoni, filmati, animazioni). I contenuti vengono inseriti nella gabbia costruita con il codice di marcatura. </li></ul></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul>
  4. 4. Struttura di una pagina web <ul><li>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. </li></ul><ul><li>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: </li></ul><ul><li>testata: in questa sezione ci sono îl nome del sito e l'eventuale logo; </li></ul><ul><li>menu di navigazione : i link per la navigazione del sito; </li></ul><ul><li>contenuto: è il corpo principale della pagina; </li></ul><ul><li>contenuti contestuali: ad es., news e testo aggiuntivo, etc.; </li></ul><ul><li>piè di pagina: è la sezione disposta a fondo pagina. </li></ul><ul><li>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>). </li></ul>
  5. 5. Struttura del sito web <ul><li>Nella cartella WebDAV risiedono i singoli documenti (file HTLM, fogli di stile, immagini, ecc) organizzati in sottocartelle. </li></ul><ul><li>La home page e’ il file index.htm, nelle cartella “css” i fogli di stile e in “stdoc” documenti vari e immagini. </li></ul><ul><li>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. </li></ul>
  6. 6. Tag <ul><li><h1….h6> testo </h1…h6> = grandezza caratteri </li></ul><ul><li><p> testo </p> = delimita un paragrafo </li></ul><ul><li><br /> = a capo </li></ul><ul><li><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 </li></ul><ul><li><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 </li></ul><ul><li><ul> </li></ul><ul><li><li> testo</li> </li></ul><ul><li></ul> = elenco puntato </li></ul>
  7. 7. Tag <ul><li><img src= &quot;stdoc/image001.gif&quot; alt= &quot;logo dell’Istituto&quot; width= &quot;210&quot; height= &quot;273&quot; /> = Inserimento immagine </li></ul><ul><li><p>E-mail:<a title= &quot;link alla casella postale dell’Istituto&quot; href= mailto:ptmm00700a@istruzione.it > Ferrucci</a></p> = Link E-Mail attraverso una parola </li></ul><ul><li><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 </li></ul><ul><li><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 </li></ul>
  8. 8. Tag <ul><li><table border= “4” > </li></ul><ul><li><tr> </li></ul><ul><li><td> ORARIO ANTIMERIDIANO </td> </li></ul><ul><li><td> </td> </li></ul><ul><li><td> ORARIO POMERIDIANO </td> </li></ul><ul><li><td> </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> = Costruzione di una tabella </li></ul><ul><li><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 </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×