wdlab2012 - Bacheca x il Laboratorio di Web Design @dsc: marzo 2012

lunedì 19 marzo 2012

Rudimenti di Editor

Deve essere sempre presente un elemento che dà identità al sito e che faciliti la navigazione tramite pulsanti adeguati presenti in tutte le pagine. In ogni punto in cui sono all'interno del sito, devo potermi muovere agilmente senza le frecce "indietro".

Cosa vuol dire in html navigare. Lo scopriamo con un esercizio pratico.

Creiamo sito con tema "vacanze” facendo riferimento al nostro albero del sito:

- Testo

            Definizione di vacanze
      -        Immagine
            Foto di NY
      -        Video
            Naufragio crociera
      -        FB
            Pagina

ATTENZIONE, i passaggi sono sempre gli stessi. Modifichiamo il codice HTML, salviamo, visualizziamo.

serve a fare il doppio accapo così dividiamo logicamente .

Per andare a capo una volta sola va messo il tag .

Bisogna creare 5 file. Terminata l'homepage, la Salviamo col nome "index".

Ora inseriamo un’immagine. La salviamo nella stessa cartella in cui salviamo tutti i nostri fogli di HTML. Andare alla pagina della guida html lezione 26. I browser leggono le immagini, ma solo 3 tipi GIF JPG e PNG. L'immagine normale è jpg, png per gestire le trasparenze. Il tag img è singolo, non si deve chiudere. Sintassi: <img src="../img/logo.gif" />

Possiamo dargli il link della pagina web o il file nella cartella. Se non si specifica il dove, va automaticamente a cercare nella cartella di destinazione dove è salvato anche il file editor.

Inserire i video: la cosa più facile è utilizzare i siti che sono contenitori di immagini e video. Questi siti offrono modalità di contenuto integrando il video sulla tua pagina web. Integriamo il video da youtube e comparirà sulla nostra pagina. C’è un tag html da copiare e incollare. Passaggi: condividi >> codice da incorporare >> copio e incollo il codice direttamente nella pagina editor.

Ho il sito con tutte e 5 le mie pagine e ne aggiungeremo uno con i fogli di stile per i colori e il resto.

Ora devo collegare queste 5 pagine con un link interno!!!

Lezione 22 della guida on-line. Il link è contraddistinto dal tag <a>. Con attributi. Il fondamentale è href, ovvero dove va il link, da che parte. Noi costruiamo la navigazione giusta e poi la copiamo nelle altre.

venerdì 16 marzo 2012

HTML

Per HTML (= HyperText Markup Language) s'intende un linguaggio di documenti ipertestuali disponibili nel web.

E' un linguaggio di markup (non di programmazione, in quanto non prevede la gestione di variabili, di strutture dati etc etc): descrive le modalità di impaginazione, formattazione o visualizzazione grafica del contenuto.

Per scrivere un documento ipertestuale sono necessari:

1)un editor testuale e/o visuale (ad es."Dreamweaver")

2)un browser per la visualizzazione (N.B.: occorre avere una mentalità "multi-browser" ed essere consapevoli che il documento prodotto potrebbe non avere lo stesso rendering su tutti i browser).

Per strutturare un sito web, è necessario creare tante pagine HTML quante sono le pagine dello schema "ad albero", ed è fondamentale salvare OGNI documento HTML con l'estensione ".html".

TAG

All'interno della pagina HTML sono presenti dei "marcatori" cui viene affidata la visualizzazione; essi sono diversi a seconda della loro funzione.

I Tag vanno inseriti tra parentesi uncinate (in apertura) e (in chiusura). Un esempio che esprime tale sintassi è il tag d'inserimento di un paragrafo: testo .Esistono, però, tag "particolari" che non prevedono strettamente tale struttura , ad es. il tag d'inserimento di un'immagine: < img attributi >

I Tag sono caratterizzati da valori detti "attributi", quelle caratteristiche, cioè, che completano e definiscono meglio il Tag.

Per ulteriori info, cfr http://xhtml.html.it/guide/lezione/1657/i-tag-dellhtml-come-scriverli/

Struttura di una pagina HTML

La struttura di una pagina HTML presenta:

- una dichiarazione che indica che stiamo utilizzando le specifiche del World Wide Web Consortium riguardanti il codice HTML

- tag di apertura < html >

- una "testa" (head) che contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato.

-un "corpo" (body), dov'è racchiuso il contenuto vero e proprio.

-tag di chiusura < /html >

Un documento HTML risulterà così formato:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
< title>HTML.it< /title>
< /head>
< body>

>
Qui il nostro contenuto

< /body>
< /html>

Per ulteriori info, cfr. http://xhtml.html.it/guide/lezione/1660/struttura-della-pagina/