Web Design

Il tag <form>

noreply@myblog.it (francescoalbano) — Wed, 11 Apr 2012 17:40:00 +0200

Il tag <form> è utilizzato per creare delle "maschere" di inserimento dati da parte dell'utente. Esempio:

<form name="login" action="login.php" method="post">
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="password" /><br />
<input type="button" onclick="InviaDati()" value="Invia" />
</form>

L'elemento <form> può contenere uno o più dei seguenti elementi: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <datalist>, <output> e <label>.

Attributo	Valore	Descrizione
accept-charset	set di caratteri (esempio: ISO-8859-1)	Specifica una lista di codifiche di caratteri accettate dal server
action	URL	Specifica l'URL del file al quale inviare i dati del form (affinché vengano elaborati)
autocomplete	on off	Se all'attributo viene assegnato il valore on (default), il browser completerà il form con i dati precedentemenete inseriti dall'utente. Se, invece, all'attributo viene asseganto il valore off, l'utente dovrà inserire ogni volta i dati richiesti all'interno del form.
enctype	application/x-www-form-urlencoded multipart/form-data text-plain	Specifica come dovrebbero essere codificati i dati contenuti all'interno del form quando vengono inviati al server (solo se method="post")
method	get post	Specifica il metodo HTTP da utilizzare per inviare i dati contenuti nel form
name	testo	Specifica il nome del form
NOVALIDATE	novalidate	Indica che i dati contenuti all'interno del form non devono essere validati al momento dell'invio
target	_blank _parent _self _top framename	Specifica dove visualizzare la risposta del server dopo aver inviato i dati contenuti all'interno del form.

Gli heading tag <h1> - <h6>

noreply@myblog.it (francescoalbano) — Sat, 31 Mar 2012 11:50:00 +0200

I tag <h1 - <h6> sono utili per suddividere i contenuti di un documento in modo gerarchico in base alla loro importanza.

Il testo contenuto all’interno di un elemento <hx> viene reso dal browser con una dimensione predeterminata. Esempio:

<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>

Risultato:

Titolo 1

Titolo 2

...

Titolo 6

Imparare come utilizzare gli heading tag all'interno di un blocco di testo è importante ai fini della corretta indicizzazione da parte dei motori di ricerca.

Il tag <h1>, per esempio, è preposto a segnalare l'argomento generale della pagina, di conseguenza, i motori di ricerca assegneranno grande importanza alle parole contenute all’interno di un elemento <h1>.

Il tag <section>

noreply@myblog.it (francescoalbano) — Fri, 30 Mar 2012 16:17:00 +0200

Il tag <section> è uno dei nuovi tag introdotti nell'HTML5. Come suggerito dal nome, è utilizzato per definire delle "sezioni" all'interno di un documento. Un capitolo, l'intestazione, una parte di un'articolo o, al contrario, un insieme di articoli, sono tutti esempi di sezioni. Esempio:

<section>
<h1>Web Design</h1>
<p>Il Web Design è una disciplina finalizzata alla creazione di siti internet nella loro interezza e in tutte le loro funzionalità...</p>
</section>

Tiltviewer: la galleria di immagini flash con effetti 3D!

noreply@myblog.it (francescoalbano) — Fri, 30 Mar 2012 13:28:52 +0200

Tiltviewer è un'applicazione che consente di visualizzare le vostre foto o immagini con accattivanti effetti 3D. Date un'occhiata alla demo per capire di che si parla.

E' possibile navigare all'interno della galleria utilizzando il mouse o la tastiera in modo semplice ed intuitivo.

Tra le caratteristiche principali ricordiamo che Tiltviwer è utilizzabile all'interno di qualunque sito Web ed è compatibile con Windows, Mac e Linux.

Creare la propria galleria è semplice e ci sono diversi modi per farlo:

Se le immagini sono su Flickr, è possibile caricarle direttamente da lì. Ecco le istruzioni.
Se avete Photoshop (versione CS3 o successiva), è possibile creare automaticamente una galleria Tiltviewer. Qui le istruzioni.
Infine è disponibile anche un template per Picasa scaricabile da qui.

Il tag <blockquote>

noreply@myblog.it (francescoalbano) — Thu, 29 Mar 2012 14:30:00 +0200

Il tag <blocquote> identifica una sezione del testo che rappresenta una citazione di un'altra fonte. Esempio:

<p>Citazione dal sito delle Nazioni Unite</p>
<blockquote cite="http://www.un.org/en/aboutun/index.shtml">
The United Nations is an international organization founded in 1945 after the Second World War by 51 countries committed to maintaining international peace and security, developing friendly relations among nations and promoting social progress, better living standards and human rights.
</blockquote>

Risultato:

Citazione dal sito delle Nazioni Unite

The United Nations is an international organization founded in 1945 after the Second World War by 51 countries committed to maintaining international peace and security, developing friendly relations among nations and promoting social progress, better living standards and human rights.

I browsers, di solito, indentano il testo contenuto all'interno dell'elemento <blockquote>.

L'attributo cite specifica l'URL di origine della citazione.

Il tag <base>

noreply@myblog.it (francescoalbano) — Thu, 29 Mar 2012 13:08:00 +0200

Se all'interno di un link come valore dell'attributo href indichiamo un percorso relativo, quest'ultimo farà riferimento alla directory in cui si trova il file html che stiamo scrivendo. Se tuttavia vogliamo fare riferimento ad una diversa directory per tutti i percorsi relativi, possiamo farlo includendo il tag <base> all'interno della sezione <head>. Esempio:

Attributo	Valore	Descrizione
href	URL	Specifica l'URL a cui faranno riferimento tutti i percorsi relativi all'interno del documento
target	_blank _parent _self _top framename	Specifica il target di default per tutti i link all'interno di una pagina

Attributo

Valore

Descrizione

href

URL

Specifica l'URL a cui faranno riferimento tutti i percorsi relativi all'interno del documento

target

_blank

_parent

_self

_top

framename

Specifica il target di default per tutti i link all'interno di una pagina

It tag <b>

noreply@myblog.it (francescoalbano) — Wed, 28 Mar 2012 22:53:00 +0200

Il tag <b> è utilizzato per rendere una parte del testo in grassetto.

<p>La parola seguente è in <b>grassetto</b>.</p>

La parola seguente è in grassetto.

Si ricorda che in base alle specifiche dell'HTML5, il tag <b> va utilizzato solo nel caso in cui nessun altro tag risulti più appropriato. E' quindi preferibile usare a seconda dei casi i tag <em>, <strong>, dfn>, <code>, <samp>, <kbd> e <var>.