Alfabetizzazione informativa

Uso di html e css

Il linguaggio standard per costruire ipertesti multimediali da pubblicare sulla rete è html (HyperTest Markup Language). Ci sono varie versioni di html; attualmente si può scegliere tra html 4 oppure xhtml, mentre si sta lavorando a html 5. Per una corretta scrittura si distingue la costruzione logica della pagina dalla sua visualizzazione grafica che è affidato al foglio di stile costruito secondo il linguaggio css (Cascade Style Sheet). Anche il CSS conosce varie versioni. L'ente che garantisce gli standard e che è il punto di riferimento ultimo è il Wold Wide Web consortium: W3C. In questa lezione diamo solo gli elementi fondamentali con suggerimenti per uno studio ulteriore. Bisogna dunque distinguere contenuto, struttura e rappresentazione (esempio su questo sito). I file sono salvati con estensione html, htm. In alcuni casi sono salvati con estensione php, asp o altro.

Elementi sintattici di html

Marcatori - tag

Tag o "marcatori". Tag+contenuto=elemento. Elemento contenitore o elemento semplice. Tag di apertura e di chiusura;
Html non è case-sensitive; xhtml sì;
La struttura base di una pagina html, elementi indispensabili: <!DOCTYPE>, <html>, <head>, <title>, <body>;
Altri marcatori: <p>, <h1>, <h2>, etc.;
Si possono creare liste ordinate <ol>, non ordinate <ul> e liste di definizioni: <dl>. Le liste ordinate e non-ordinate hanno come tag per ogni elemento della lista <li> mentre le liste di definizioni hanno per la parola da definire il tag <dt>e per la definizione il tag <dd> (ricordare sempre tag di apertura e tag di chiusura);
Inserire immagini: <img src=""> (con attributo necessario: vedi sotto);
Creare dei link: <a href=" "> (con attributo necessario: vedi sotto);
Ritorno a capo <br /> e linea orizzontale <hr /> ;
Creare delle sezioni a livello di blocco o a livello della riga: <div> e <span> (con eventuali attributi: vedi sotto);
Inserire commento nel codice (non viene visualizzato):

Attributi

Stanno all'interno dei marcatori (tag di apertura);
Sono gli "aggettivi" dei marcatori;
Hanno determinati valori (seguono dopo un segno = e stanno dentro virgolette);
Alcuni sono necessari, altri obbligatori (caso di <img>, <a>), altri facoltativi, e altri ancora deprecati;
L'importanza degli attributi id e class;
Anche lo stile può essere definito con l'aiuto degli attributi (stile inline): <div style="color:red; background-color:#000;">;
I valori degli attributi spesso possono espressi in varie formati. Colore (nome, esadecimale, funzione rgb); misure (fisse e variabili);

Determinare lo stile, elementi di css

Lo stile può essere definito in tre modi diversi: all'interno dei marcatori con gli attributi (in linea); all'interno dell'elemento <style> nell'intestazione della pagina (incorporato); in un foglio di stile esterno (collegato). Discutere quale effetto e implicazione hanno le varie soluzioni (pecedenze; raggio d'azione,...) e quando scegliere quale soluzione.

Esempio di stile in-linea:
<div style="background-color:red; color:black;">
<p style='color:red; font-size:24pt'>;
Il marcatore <style> nell'intestazione. Esempio:
<style type="text/css"> h1 {text-align: center; color: blue;} li {background-color:lime;} </style>
Fogli di stile esterni. Estensione css. Link all'interno dell'intestazione della pagina oppure @import.

La sintassi nei fogli di stile:

Selettore
Gerarchia, albero, ereditarietà
Indicare elementi unici (con attributo id): nome (valore), preceduto da cancelletto (#); indicare una classe: nome (valore), preceduto da un punto;
Commenti
Pseudo-classi

Su che cosa incide lo stile?

Testo: colore, carattere, interlinea, decorazione, spaziatura delle lettere e parole, stili, titoli, giustificazione, posizione, peso, rientro,...
Blocchi: margini, bordi, distanze, colore dello sfondo, posizionamento,...

Creare un sito

Un sito è composto di varie pagine, raggruppate eventualmente in sezioni. Per poter esplorare il sito è necessario prevedere un sistema di navigazione logico, intuitivo e immediato (menù).

Gli strumenti di lavoro

Chiunque può scrivere pagine per internet. Non c'è bisogno di nessun programma particolare. Noi utlizziamo i seguenti programmi:

Un programma videoscrittura elementare come blocco note (sconsigliati i programmi evoluti come Word etc.) per scrivere le pagine dalle fondamenta.
Per visualizzare le pagine costruite va bene qualsiasi browser. E' bene per pagine più complesse controllare la loro visualizzazione in diversi browser, anche in versioni vecchi.
In seguito si può ricorrere a programmi che incorporano i vari comandi dei linguaggi e permettono un lavoro accelerato, un integrated development environment (IDE) o ambiente integrato di sviluppo, per esempio html-kit o il più evoluto e open source Flashdevelop (guida su html.it).
Un browser open source del W3C che permette di visualizzare e lavorare sul codice sorgente è Amaya.
Uno tra i tanti strumento per i colori (codice esadecimale): RgbHex (i programmi di manipolazione immagini hanno incorporato questi strumenti - p.e. Gimp!).

Costruire pagine con html e css