Webdesign for Dummies [lezione 3]

Nella lezione precedente abbiamo visto l'HTML di base per la creazione della nostra prima pagina web. Ora passiamo a vedere alcuni tag per la formattazione del testo e qualche altro tag utile, come le liste, che però approfondiremo più avanti.

Elementi di tipo blocco	Elementi in linea	Elementi generici	Liste	Elementi di presentazione	Ritorno a capo
h# ~ Headings o Intestazioni. Al posto di # ci va un numero da 1 a 6. 1 si usa per i titoli principali dal 2 in poi per il resto.	code ~ Codice Si usa per formattare del codice di programmazione.	div ~ Divsione a blocco. Crea un generico contenitore di testo a blocco, ovvero che va a capo quando viene chiuso rispetto all'elemento successivo, lasciando un certo spazio.	ul ~ Unsorted list. Crea una lista di elementi senza un ordine preciso. Le ul vengono usate anche per creare dei menù di navigazione	b ~ Bold. Rende grassetto una porzione di testo. Si preferisce usare strong o la proprietà css font-weight:bold	br ~ Break line. Manda a capo il testo.
p ~ Paragrafi. Nei paragrafi ci può stare del testo o tag in linea ma non altri tag a blocco come altri paragrafi.	em ~ Testo enfatizzato Viene mostrato in corsivo ed è usato al posto del tag i. *	span ~ Esattamente come il div, ti permette di creare un contenitore personabilizzabile per il testo. A differenza del div però è di tipo inline ovvero non lascia spazi.	ol ~ Ordered list. A differenza della prima crea una lista di elementi il cui ordine è importante come una serie di istruzioni da seguire passo passo.	big ~ Big. Rende più grande una porzione di testo. Meglio usare la proprietà css font-size:bigger
pre ~ Testo preformattato. . Si usa quando è necessario preservare la spaziatura e i ritorni a capo in un testo come nei codici o nelle poesie.	q ~ Citazione breve. Serve a citare delle frasi brevi. Per frasi più lunghe si usa il blockquote.		li ~ Sia ul che ol al loro interno hanno dei tag li che caratterizzano un singolo elemento della lista. Ad ogni li costituisce, dunque, un elemento della lista.	i ~ Italic. Rende corsivo una porzione di testo. Si preferisce usare em o la proprietà css font-style:italic
blockquote ~ Citazioni. Serve a citare un testo lungo, contenente magari diversi paragrafi e ritorni a capo.	strong ~ Enfasi forte. Come em serve ad evidenziare del testo con enfasi. Viene usato al posto del tag b. *		dl ~ Definition list. Serve a stilare una lista di coppie termine/definizione.	small ~ Small. Rende più piccola una porzione di testo. Meglio usare la proprietà css font-size:smaller
	sub & sup ~ Mette una porzione di testo abbassata o rialzata rispetto al resto. Si usa nelle formule matematiche e chimiche.		dt ~ Term. Contiene il termine.	hr ~ Horizontal rule. Crea un divisore tra due parti di testo, va a capo come il br ma crea anche una linea orizzontale.
			dd ~ Definition. Contiene la definizione.

*em e strong non sono esattamente sostituti di i e b ma si preferiscono. In ogni caso è possibile sistemare lo stile del testo come si preferisce usando il css.

I tag più usati

Nella tabella sopra ho inserito solo una parte dei tags, evitando quelli deprecati o che non si usano quasi mai. Vi suggerisco comunque di fare un giro e di scoprirli tutti. In ogni caso, un genere, in un sito si tende ad usare questi:

• h1 ~ h6 per le intestazioni. E' buona norma tenere h1 per l'intestazione principale e solo quella. In ogni pagina è bene non averne più di una. Con gli altri si creano le altre intestazioni. Sono già formattate con dimensioni e aspetto standard ed è possibile personalizzarli tramite css.


• p per i testi. Ogni porzione di testo è racchiusa in un p. In genere si può usare i p per mandare a capo essendo un elemento a blocco, ogni qual volta che si desidera andare a capo e lasciare una linea vuota si chiude un paragrafo e se ne inizia un altro. Ovviamente si può tornare a capo anche senza lasciare una linea.


• div si usa spesso per creare la struttura della pagina. Dentro il div si possono creare altri div in modo che siano dei veri e propri blocchi di contenuti che è possibile posizionare dove si preferisce tramite css. Questo lo rende un elemento molto versatile e personalizzabile.


• span è come il div, solo che è in linea. Quindi è possibile dare uno stile solo alla porzione di testo selezionata. Questo lo rende comunque uno strumento potente. Può, ad esempio, sostituire il tag font che è stato deprecato, per dare uno stile particolare ad una porzione di testo che altrimenti prenderebbe lo stile del contenitore genitore o quello generico del body. Tipo creare una porzione di testo rosso dentro un testo normale come questa frase.


• ul/ol per creare delle liste come questa. Ol è un tipo di lista che presenta un ordine dato ad esempio da dei numeri o dalle lettere dell'alfabeto. Col css però è anche possibile inserire dei marcatori personalizzati per gli elementi o toglierli del tutto. Questa ultima possibilità viene usata spesso nelle liste non ordinate per creare dei menù di navigazione anche orizzontali. E' possibile creade delle liste dentro le liste, basta che dentro un li inseriate un'altra lista tipo li ul li /li li /li /ul /li.

Tutti gli altri sono utili ma principalmente si usano questi.

Links

I link hanno bisogno di una citazione a parte perchè è un'argomento più massiccio. Col tag per i link possiamo fare svariate cose come rendere delle immagini cliccabili o ancore per spostarsi all'interno di una pagina.

Semplici collegamenti ipertestuali

Il tag per creare i link è a (anchor,ancora).Questo tag ha una lista di attributi che gli fanno fare cose differenti. I più importanti sono:

• href che fornisce il percorso assoluto o relativo alla pagina o alla risorsa che vogliamo collegare.


• name che da un nome univoco al link


• rel stabilisce la relazione col documento linkato


• target specifica il nome della finestra o del frame nel quale si aprirà il link

Esempio di link:
Testo cliccabile

Link assoluti e relativi

La differenza tra link assoluti e relativi è molto importante. I link assoluti sono i links completi alla risorsa con tutto il percorso, mentre quelli relativi contengono solo una porzione del link o il solo nome del file o della pagina da linkare. I link assoluti servono per linkare risorse esterne al proprio sito altrimenti non raggiungibili, mentre quelli relativi si usano per linkare risorse o pagine del sito stesso. Se la pagina linkata è sullo stesso "livello" di quella che la linka allora possiamo inserire il singolo nome del file. Altrimenti dobbiamo risalire al file in questione. Ad esempio, se nella mia index.html voglio linkare una pagina chiamata icone natura che sta dentro una cartella chiamata icone a sua volta dentro una che si chiama risorse, il percorso sarà tipo così: a href="/risorse/icone/icone_natura.html". Se volete andare sul sicuro potete aprire la pagina e prendere il link assoluto, anche se questo metodo è più pulito.

Linkare delle immagini

Per linkare un'immagine è possibile inserire il tag per le immagini, che analizzeremo in dettaglio nella prossima lezione, dentro il tag a al posto del testo che verrà visualizzato.

Link a particolari punti della pagina

E' possibile anche linkare un punto particolare della pagina. Ad esempio: Faqs. Come vedete, cliccando sul link si ottengono due cose. La pagina va al punto desiderato e l'url in cima cambia.

Per prima cosa dobbiamo dare un nome alla porzione della pagina da linkare, chiamata frammento. Il tag a infatti non prende automaticamente la forma di link cliccabile. Senza l'attributo href infatti non è un link cliccabile, però l'ancora viene messa lo stesso. Per dare un nome al frammento basta dare l'attributo name ad a. Nell'esempio verrebbe: a name="1.1". Dentro il tag a, come nome del link potete mettere l'intera domanda.

Una volta dato un nome al frammento basta linkarlo. Questo si fa con href in quanto ci serve un link cliccabile. Il nome del frammento viene preceduto da un cancelletto (#): a href="#1.1". Dentro il tag come testo mostrato mettete la stessa domanda o lo stesso testo di cui sopra. Non è importante ma non mette confusione e fa capire all'utente in che punto della pagina si trova.
E' possibile anche linkare un frammento di un'altra pagina, aggiungendo al percorso assoluto o relativo il nome del frammento: a href="baubau.html#maltese" oppure a href="http://www.animali.it/baubau.html#maltese".

Target

Con l'attributo target è possibile forzare il browser ad aprire il link in una nuova finestra o scheda o nella stessa pagina. In genere si usa _blank per aprire i link in una nuova finestra o scheda se le pagine successivi non hanno ritorni indietro. Se invece non si vuole che il browser apra nuove finestre, come nelle ancore dentro una stessa pagina, si usa il _self. Ad esempio, il mio browser è impostato per aprire tutte le pagine in una nuova scheda forzatamente. Per evitare che mi apra le ancore in una nuova scheda, rendendo inutile l'ancoraggio alla stessa pagina, inserisco un target="_self" ad a.

Protocollo mailto

E' possibile creare dei link per spedire automaticamente delle mail usando il programma di posta di default del browser o un programma esterno come gmail. Per utilizzarlo si inserisce il protocollo in href: a href="mailto:nome@dominio". Cliccando sul link si apre il programma di posta per mandare la mail.

Linkare documenti con link

E' possibile linkare delle pagine con il tag link. Queste pagine non creano dei veri e propri link come a, infatti si usano per linkare fogli di stile o codici javascript esterni alla pagina. I suoi attributi principali sono:

• href per dargli il link alla pagina


• media per definire il mezzo che vedrà questo documento. Ad esempio per associare un foglio di stile per la stampa con print.


• rel per definire la relazione


• type per il tipo di documento

Un esempio:

<link href="stile.css" rel="stylesheet" type="text/css" media="print">

Messo all'interno dell'head associerà alla pagina un foglio di stile che verrà applicato al momento di stampare la pagina. Questo è molto utile per stampare i contenuti eliminando tutte le informazioni inutili come loghi e immagini di sfondo, lasciando solo il testo che serve.

Nella prossima lezione vedremo le immagini e gli oggetti.