Blog

516 views

Published on

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

No Downloads
Views
Total views
516
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Blog

  1. 1. BLOG 1UN MODO MODERNO PER COMUNICARE
  2. 2. Definizione 2 BLOG web + log1997 dicembre: John Barger usa nel suo sito il termine weblog 1999: Patrick Merholz usa la frase we blog nel suo sito
  3. 3. Classificazione dei blog 3Blog personaleBlog didattico Audio blogBlog di attualità Video blogBlog politico M blogBlog tematico Blog directory Watch blog Photo blog
  4. 4. Cosa mi serve? 4 Blog ospitato da server pubblico  Wordpress  Splinder  Myblog  Blogspot  Il Cannocchiale Blog disponibile su sito personale  http://www.mioblog.com
  5. 5. Terminologia 5Blog : diario in reteBlogger : autore di un blogPost : singolo messaggio in un blogCommento : commento ad un postPermalink : link ad un singolo postTrackback : segnalazione di link ai propripostTemplate : struttura del blogFeed (RSS) : formato testuale per leggere ipost fuori dal blog
  6. 6. HTML 6IL LINGUAGGIO BASE PER LE PAGINE WEB
  7. 7. Ipertesti 7Insieme di documenti, collegati tra loro tramite link (riferimenti ipertestuali) I link consentono di seguire un percorso scelto a piacere e non impongono sequenzialità.
  8. 8. HTTP 8 Hyper Text Transfer Protocoltrasferisce attraverso la rete internet lepagine web localizzandole mediante unsistema di indirizzamento noto comeURL – Uniform Resource Locator
  9. 9. HTML 9 Hyper Text Markup Language Consente di: Inserire oggettiDefinisce: immagini Struttura di un ipertesto tabelle Aspetto di un ipertesto moduli Creare link ipertestuali interni esterni
  10. 10. Strumenti per creare un file HTML 101. Editor di testo 1. WordPad (blocco note)2. Applicazione specifica di tipo WYSIWYG 1. Microsoft FrontPage 2. Netscape Composer 3. Macromedia DreamWeaver Il file va salvato con estensione .htm o .html affinché sia letto da un browser
  11. 11. Tag HTML 11 sono i comandi del linguaggio<NOMETAG>………………………</NOMETAG> (tranne pochi casi vanno aperti e chiusi) possono avere degli attributi scelti tra un insieme predefinito, i quali assumono determinati valori (scritti tra virgolette)
  12. 12. Struttura di un documento HTML 12Un documento HTML è contenuto per intero all’interno del tag <HTML>…………………………………………..</HTML> <HTML> <HEAD> descrizione delle caratteristiche del documento </HEAD> <BODY> documento vero e proprio </BODY> </HTML>
  13. 13. Caratteristiche dei tag HTML 13 hanno nomi mnemonici possono avere degli attributi si possono indentare per facilitare la leggibilità sono indifferenti rispetto all’uso di caratteri maiuscoli o minuscoli sono indifferenti rispetto agli spazi
  14. 14. Intestazione del documento (tag <HEAD>) 14<HEAD> <TITLE>ITIS Alessandro Volta – Napoli </TITLE> <META name = “keywords” content = “Napoli, Alessandro Volta”> <META name = “author” content = “Francesco Zoino”> <META name = “generator” content = “WordPad”></HEAD> Il titolo viene usato per costruire gli indici automatici di cui si servono i motori di ricerca Le keywords sono i termini usati dai motori di ricerca per l’indicizzazione Il contenuto del tag <TITLE> viene inserito nell’elenco dei Preferiti quando si salva la pagina nel browser
  15. 15. Titoli 15 <H1>titolo 1</H1> <H2>titolo 2</H2> <H3>titolo 3</H3> ……. <H6>titolo 6</H6>Oltre che per indicare quali parti di testo vengono usate cometitoli, permettono di controllare le dimensioni dei caratteri dal piùgrande (titolo 1) al più piccolo (titolo 6).
  16. 16. Attributi di <BODY> 16<BODY bgcolor = “colore sfondo” text = “colore testo” background = “immagine di sfondo” link = “colore link da visitare” vlink = “colore link visitato”> Il colore può essere specificato con: parole chiave: red, yellow,…. codice esadecimale
  17. 17. Gestione dei caratteri 17<BASEFONT size = “4”> caratteri a dimensione 4<FONT size = “3”> caratteri a dimensione 3 </FONT> caratteri a dimensione 4<FONT size = “+1”> caratteri a dimensione 5 </FONT> caratteri a dimensione 4<FONT size = “5” color = “red” face = “Courier”> testo rosso Courier didimensione 5 </FONT>
  18. 18. Formato dei caratteri 18Stili fisici<B>testo</B> grassetto<I>testo</I> corsivoStili logici<EM> testo </EM> enfasi (corsivo)<STRONG> testo </STRONG> forte enfasi (grassetto)
  19. 19. Allineamento e paragrafi 19<p align = “left”> testo del paragrafo </p><p align = “right”> testo del paragrafo </p><p align = “center”> testo del paragrafo </p> <CENTER> testo da centrare </CENTER> <BR> HTML non è sensibile alle linee vuote <P>
  20. 20. Lista di elementi non numerata 20UL = Unordered List LI = List Item <UL> <LI> primo item </LI> <LI> secondo item </LI> … <LI> ultimo item </LI> </UL> tipo di punto elenco <UL type = “disc”> <UL type = “circle”> <UL type = “square”>
  21. 21. Lista di elementi numerata 21<OL> OL = Ordered List<LI> primo item </LI><LI> secondo item </LI> tipo di numerazione… <OL type = “1”><LI> ultimo item </LI> <OL type = “A”></OL> <OL type = “a”> <OL type = “I”> <OL type = “i”><OL start = “numero di partenza”>
  22. 22. Lista descrittiva 22DL = Definition ListDT = Definition TermDD = Definition Description <DL> <DT> primo termine </DT> <DD> descrizione </DD> … <DT> ultimo termine </DT> </DL>
  23. 23. Immagini 23<IMG src = “pathname” align = “tipo di allineamento” alt = “testo alternativo all’immagine” border = “larghezza del bordo in pixel” height = “altezza dell’immagine in pixel” width = “larghezza dell’immagine in pixel” space = “spazio a destra e a sinistra in pixel” vspace = “spazio in alto e in basso in pixel”>
  24. 24. Collegamenti ipertestuali 24 URL : protocollo://indirizzo internet/pathname#labelProtocolli http (trasferimento con http) ftp (trasferimento con ftp) news (collegamento a server news) telnet (collegamento remoto) mailto (spedizione di mail)
  25. 25. Tag A 25 <A href = “ URL “> testo di riferimento </A><A href = “http://www.itis-volta.it> Istituto Tecnico Industriale“Alessandro Volta” </A>
  26. 26. TABELLE 26<TABLE> descrizione della tabella </TABLE><TABLE border = “larghezza dei bordi” align = “allineamento” cellspacing = “spazio in pixel tra le celle” cellpadding = “spazio tra bordo e contenuto delle celle” width = “larghezza della tabella in pixel o in percentuale”>
  27. 27. TABELLE -FORMATTAZIONE : TR 27 <TR> nuova riga </TR><TR align = “allineamento” valign = “allineamento verticale del testo” bgcolor = “colore di sfondo della riga”> <TR align = “left” valign = “bottom” bgcolor = “yellow” >
  28. 28. TD – TH - CAPTION 28 <TD> nuova cella in una riga </TD> <TH> elemento evidenziato in cella </TH><CAPTION> titolo della tabella </CAPTION>
  29. 29. ATTRIBUTI DI TD E TH 29<TD (TH) width = “larghezza in pixel o in percentuale” colspan = “numero di colonne su cui si distribuisce” rowspan = “numero di righe su cui si distribuisce” nowrap (non andare a capo nella cella)>
  30. 30. THEAD – TFOOT - TBODY 30<THEAD> righe di intestazione </THEAD> <TFOOT> righe di fondo </TFOOT> <TBODY> righe del corpo </TBODY>
  31. 31. ESEMPIO 31<TABLE> <CAPTION> Tabella </CAPTION><THEAD> <TR><TD>Primo</TD><TD>Secondo</TD></TR></THEAD><TBODY> <TR><TD>uno</TD><TD>due</TD></TR> <TR><TD>tre</TD><TD>quattro</TD></TR> <TR><TD>cinque</TD><TD>sei</TD></TR></TBODY></TABLE>
  32. 32. ESEMPIO 32<TABLE><THEAD> <TR><TD>Primo</TD><TD>Secondo</TD></TR></THEAD><TBODY> <TR><TD>uno</TD><TD>due</TD></TR> <TR><TD>tre</TD><TD>quattro</TD></TR></TBODY><TFOOT> <TR><TD>Alfa</TD><TD>Beta</TD></TR></TFOOT></TABLE>
  33. 33. ESEMPIO 33<TABLE border = “1”> <CAPTION align = “top”> Tabella complessa </CAPTION><TR> <TH colspan = “2”, rowspan = “2”> </TH> <TH colspan = “2”> MEDIA </TH></TR><TR> <TH>Altezza</TH> <TH>Peso</TH></TR><TR> <TH rowspan = “2”, valign = “top”> Genere </TH> <TH> Maschi </TH> <TD> 1,75 </TD> <TD> 70 </TD></TR><TR> <TH> Femmine </TH> <TD> 1,65 </TD> <TD> 60 </TD></TR></TABLE>
  34. 34. CSS 34FOGLI DI STILE A CASCATA
  35. 35. CSS 35 Cascading Style Sheet Può essere: •Un file con estensione .css associato al file html •Del codice che si incorpora nelle pagine html stesse<head> <head><link rel = “stylesheet” href = “foglio.css” type = <style type = “text/css”>“text/css”> …… </style></head> </head>
  36. 36. Formato delle regole CSS 36 selettore { dichiarazione }un oggetto all’interno del documento ciò che si vuole ottenere sull’oggetto In generale: selettore, selettore, selettore { dichiarazione; dichiarazione; dichiarazione; }
  37. 37. Dichiarazioni CSS 37selettore { proprietà : valore valore_alternativo valore_alternativo …} scomposizione della dichiarazionei valori alternativi si assegnano in ordine di importanza e sono separati da spazi
  38. 38. Esempi 38 h1 { color : red } BODY { background: url(fondale.jpg) white }si attribuisce al BODY lo sfondo fondale.jpg o in subordine uno sfondo bianco
  39. 39. Selettori 39• Selettori di tipo• Classi• Identificatori
  40. 40. Selettori di tipo 40Corrispondono al nome del TAG HTML cui si riferiscono p {…} a {…} div {…} h1 {…} * {…}
  41. 41. Classi 41Servono a definire un insieme di oggetti omogenei. Per associare un elemento a una classe è sufficiente specificarne il nome attraverso HTML l’attributo class. <div class = “nomeclasse”>…</div> .nomeclasse {…} CSS
  42. 42. Combinazione di selettori di tipo e classi 42 HTML <p class = “nomeclasse”>…</p> <h1 class = “nomeclasse”>…</h1> applicata a tutti gli elementi di classe nomeclasse CSS applicata agli elementi <p> di classe nomeclasse.nomeclasse {…}p.nomeclasse {…}h1.nomeclasse {…} applicata agli elementi <h1> di classe nomeclasse
  43. 43. Identificatori 43Servono a selezionare un elemento unico nella pagina. Per associare un elemento a un identificatore è sufficiente specificarne il nome attraverso HTML l’attributo id. <div id = “nomeidentificatore”>…</div> # nomeidentificatore {…} CSS
  44. 44. Pseudoclassi 44Supportate dai browser più diffusi (è importante scriverle in ordine) link non ancora visitato link già visitato a:link a:visited a:hover link su cui è posizionato il mouse a:focus a:active link che ha ricevuto il focus link durante l’attivazione da parte dell’utente
  45. 45. Discendenza tra selettori 45Per selezionare un elemento della pagina con maggioreaccuratezza, è possibile indicarne non solo tipo, classe oidentificatore, ma anche specificare uno o più elementi progenitori. HTML <h1>Omero - <em>Iliade</em></h1> <p>Cantami, o Diva, del <em>Pelide Achille</em></p> CSS Se la discendenza è padre-figlio h1 em {…} la si indica con > p em {…}

×