Abbiamo creato questo sito web per insegnare ai principianti "programmatori*", anche a quelli con una scarsa base, come usare l'HTML, ma non solo. Vi invitiamo ad iniziare subito il corso di "programmazione*". Ma prima, "il menu"...
Questa serie di tutorial è fatta per darvi un po' di esperienza, in modo che possiate essere in grado di leggere e scrivere HTML, di salvare documenti e poi di vedere il vostro lavoro in un browser web. Purtroppo questa pagina non ha una sezione per insegnarvi ad usare tutte le funzioni di base di un computer, quindi in questo senso potete chiedere aiuto ad un amico: Prima di continuare ad imparare l'HTML, è necessario:
Mi dispiace deludervi, ma la programmazione HTML non esiste perché l'HTML non è un linguaggio di programmazione. È un linguaggio di markup. Quindi semplicemente distorce il contenuto e niente di più.
Di seguito ho fatto una breve lista dei codici HTML più utilizzati. È possibile aggiungere questa pagina ai preferiti per tornare qui più facilmente quando non si sa come creare un codice HTML o semplicemente non lo si ricorda.
I principali elementi HTML sono <html>, <head>, <title> e <body>. Di seguito è riportato un semplice esempio di come costruire un sito web.
html<html>
<head>
<title>La mia prima pagina web!</title>
</head>
<body>
Ciao! Qua potrai scrivere il contenuto della tua pagina.
</body>
</html>html<p>Questo è un semplice paragrafo.</p>
<p align="left">Questo è un paragrafo allineato a sinistra.</p>Questo è un semplice paragrafo.
Questo è un paragrafo allineato a sinistra.
Per allineare un testo in html si utilizza l'attributo align che può assumere i seguenti valori: left, right, center, justify.
html<h1>Questo è il titolo più grande in HTML</h1>Altre etichette utilizzate per i titoli sono: h1, h2, h3, h4, h5, h6. Il titolo definito con h1 è il titolo più grande, mentre h6 è il più piccolo.
<br /> E' un'interruzione di linea. Lo spazio tra "br" e "/" è la differenza tra HTML 4 e un codice XHTML valido.
<hr /> is used to draw a horizontal line. Lo spazio tra "hr" e "/" è la differenza tra HTML 4 e un codice XHTML valido.
Un semplice esempio di lista:
html<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>L'esempio qui sopra è l'esempio di una lista ordinata. Altri tipi di lista sono: unordered e definition list.
html<a href="http://www.tutorialeshtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">Go to top </a> (<a name="top"></a>)
<a href="mailto:admin@example.com" >Contattaci</a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>Qui sopra, avete un esempio di un normale collegamento html, un collegamento tra due sezioni della stessa pagina, un collegamento a un'e-mail e un collegamento a un'immagine. Anche se non più utilizzato in html, merita di essere menzionato:
html<base href="http://www.tutorialehtml.com/">Basehref è stato rimosso in HTML 5.
html<img src="img//html_image.jpg" alt="Html Image" width="100" height="50" align="center" />E' sempre meglio allineare un'immagine utilizzando CSS come nell'esempio sottostante:
html<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />Questo è solo un esempio di codice html utilizzato per creare un modulo. Un modulo è ciò che un utente può usare per inserire informazioni. Ma per elaborare tali informazioni è necessario un file php (per esempio) che invia le informazioni al database, per posta, ecc.
html<form method="post" name="my_form" action="process.php">
<!--i campi di testo utilizzati per inserire le informazioni-->
<input type="submit" value="Inviare">
<input type="reset" value="Elimina" />
</form>Qua sotto ci sono un paio di esempi di campi di testo.
html<input type="text" size="10" maxlength="40" name="name"> --> normale campo di testo
<input type="password" size="10" maxlength="10" name="pass"> --> campo password
<input type="radio" name="color" value="red"> --> pulsante opzione
<input type="checkbox" name="check" value="yes"> --> checkbox
<select name="select"> --> lista a selezione / lista a tendina
<option>Html 4.1</option>
<option>Html 5</option>
</select>La struttura base di una tabella è la seguente:
html<table>
<tr>
<th>Colonna 1</th>
<th>Colonna 2</th>
</tr>
<tr>
<td>Riga 1 Cella 1</td>
<td>Riga 1 Cella 2</td>
</tr>
<tr>
<td>Riga 2 Cella 1</td>
<td>Riga 2 Cella 2</td>
</tr>
</table>L'attributo bgcolor è utilizzato per impostare il colore dello sfondo. Ecco alcuni esempi sul suo utilizzo:
html<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.E' anche possibile inserire un'immagine da utilizzare come sfondo come nell'esempio successivo.
html<table background="img/pattern.jpg">html<!-- Questo è un semplice commento HTML-->Per inserire musica o suoni all'interno della pagina HTML si usa l'etichetta embed
html<embed src="example.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />Per inserire un video si utilizza l'etichetta embed nel seguente modo:
html<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>html<b>Testo in grassetto</b>
<strong>Testo in grassetto</strong>html<i>Corsivo</i>
<em>Enfatizzato</em>Questi tipi di testo non sono molto utilizzati ma a volte si rivelano particolarmente utili.
html<sub>Pedice!</sub>
<sup>Apice</sup>
<del>Testo barrato</del>Il modulo sottostante viene utilizzato per caricare un file sul server. Non dimenticare che è solo la parte html. Per renderla funzionale dovresti processarla usando php, asp, o qualsiasi altro linguaggio dal lato del server.
html<form method="post" action="process.php">
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="file" />
<input type="submit" value="Upload">
<input type="reset" value="Reset" />
</form>