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 .