HTML

Scrivere una pagina HTML è semplice. Basta un editor di testo (notepad++ è un’ottima scelta) ed un browser web (Internet Explorer, oppure, se preferite, Google Chrome o Mozilla Firefox).

TABLE

Usando notepad++, create un file table.html:

<table border="1">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
</table>

Un tag HTML è racchiuso tra i simboli < e >. Esistono tag di apertura e chiusura: il simbolo / indica che si tratta di un simbolo di chiusura. Le TABLE in HTML sono il modo in cui gli oggetti vengono posizionati all’interno di una pagina. TR (table row) e TD (table data, le celle della tabella) permettono di strutturare la tabella. L’attributo border=”1″ mostra il bordo della tabella. Aprite il file con internet explorer (o un qualsiasi browser): vedrete visualizzata la vostra prima pagina HTML.

FORM

Adesso create un secondo file form.html:

<form>
	login: <input name="login"><br/>
	password: <input name="password"><br/>
	<input type="submit"><br/>
</form>

Le FORM sono invece il modo in cui potete leggere i valori inseriti dall’utente. I tag INPUT vi consentono di accettare una stringa, il tasto (type=”submit”) di passare i valori al controller. BR vi consente di andare a capo. Provate a premere il bottone: se osservate l’indirizzo della pagina adesso contiene i due campi di input presenti nella pagina.

Proviamo adesso a mettere tutto insieme. Create una pagina login.html

<form>
	<table border="1">
		<tr>
			<td>login</td>
			<td><input name="login"></td>
		</tr>
		<tr>
			<td>password</td>
			<td><input name="password"></td>
		</tr>
	</table>
	<input type="submit" value="login">
</form>

Questa č la struttura di una tipica pagina web interattiva anche se possono esserci molte piů informazioni. value=”login” cambia il testo del bottone.

Diamo un’occhiata alla struttura completa del tag FORM:

<form action="login.html" method="get">

L’attributo action indica la pagina di arrivo, method se i parametri vengono viusalizzati nella barra dell’indirizzo (get) oppure no (post). Quando premete il bottone submit viene richiamata la pagina prensente nell’attributo action.

Approfondimenti

Provate a creare alcune pagine di prova. Vi consiglio inoltre un ottimo tutorial in italiano. Per ulteriori approfondimenti, vi rimando al sito w3schools. Date inoltre un’occhiata ai fogli di stile CSS .