Concetti iniziali

Cos'è l'HTML? Quando è nato? Come si è evoluto? Cos'è il www? A cosa servono i broswer?
Ecco come è possibile creare una semplice pagina da pubblicare sul web. leggi ancora...
html - basi
Cos'è l'HTML?
E’ il linguaggio standard che determina gli elementi salienti delle pagine web. E’ in grado di ospitare tanti altri linguaggi per elaborazioni lato client, come javascript e jquery, e lato server come php, jsp o asp.
Cos'è il www?
Ogni pagina pubblicata in rete entra a far parte del www. La data di nascita del World Wide Web viene comunemente indicata nel 6 agosto 1991, giorno in cui venne pubblicato il primo sito web. Quel giorno naque il fenomeno "WWW" cioè l’idea di elaborare un software per la condivisione di documenti in formato elettronico indipendenti dalla piattaforma informatica utilizzata. A lato della creazione del software, iniziò anche la definizione di standard e protocolli per lo scambio di documenti in rete: il linguaggio HTML e il protocollo di rete HTTP. La semplicità della tecnologia decretò un immediato successo: in pochi anni il WWW divenne la modalità più diffusa al mondo per inviare e ricevere dati su Internet, facendo nascere quella che oggi è nota come "era del web".
Cos'è un browser?
Per vedere una pagina web serve un browser. E’ un programma che decodifica e traduce in testi chiari, immagini, link il nostro codice HTML. In questo modo l’utente finale può navigare tra le pagine web in modo non necessariamente sequenziale ma saltando da una pagina all’altra o da un sito all’altro senza curarsi di dove questi siano ubicati nel grande patrimonio ipertestuale del mondo.
HTML 5: STRUTTURA E TAG SEMANTICI
HTML 5 introduce un set di nuovi elementi, detti tag semantici, che rendono più semplice e ordinata la definizione della struttura di una pagina. Si riconoscono diversi tag semantici:

Le differenze tra le versione HTML precedenti e HTML 5 sono fondamentalmente due: la prima riguardante la scomparsa di frame a vantaggio dei box, la seconda è l’adozione di un nuovo DOCTYPE.
Il DOCTYPE è uno standard che permette al browser di capire il tipo di documento che si sta trattando. Il DOCTYPE dell’ HTML 4 era costituito da lunghe stringhe di caratteri, mentre nell’ HTML 5 è composto da un unico tag < !DOCTYPE html >.
TAG FONDAMENTALI

Obiettivo del nostro progetto è insegnare in modo pratico.
Ci proviamo con un semplice esempio realizzato e commentato da noi. Vedi esempio...
html - tag fondamentali
Il nostro obiettivo è mostrare un elenco di tag fondamentali html, come questi di seguito, e spiegarli in una pagina successiva.

Clicca qui per sapere cosa sono i singoli tag.
La timeline dei siti famosi in rete

Ecco come i siti più importanti hanno trasformato il loro look.
Confrontiamoli insieme per scoprirne i motivi. leggi ancora...
html - i siti nel tempo




layout statici e dinamici

Differenze fra layout statici e layout dinamici,
queste sono solo due parole, ma vediamo cosa sono..
html - layout statici e dinamici
Negli anni novanta non si pensava che i supporti in futuro sarebbero stati così tanti e così diversi. Il fatto che siano anche molto piccoli è comodo ma crea numerosi problemi di visibilità a leggibilità della pagina.
Larghezza fissa
Quando si scrive una pagina HTML si dispongono gli elementi interni in posizioni fisse con proporzioni precise. L’unico modo di leggere tutto è utilizzare la barra di scorrimento sia orizzontale che verticale

La pagina web è centrata all’interno del Body utilizzando una tabella (come mostra l’esempio successivo) o dei DIV con posizionamento assoluto e proporzioni fisse.





















Per vedere un esempio clicca qui
Larghezza variabile
I layout a larghezza variabile sono anche detti fluidi o liquidi e si progettano in base a percentuali. Una soluzione di questo tipo va ben pensata, dato che diventa necessario prevedere i problemi che si possono verificare per ogni larghezza possibile della finestra del browser.

La dinamicità della pagina si crea utilizzando i DIV. Tramite attributi particolari come FLOAT, CLEAR, MAX-WIDTH è possibile rendere la pagina fluida o, come si dice, liquida.

Noi abbiamo creato una piccola applicazione di fluttuazione nella sezione CSS del nostro lavoro: clicca qui

Per vedere un esempio clicca qui