HTML Tutorials - Hyper Text Markup Language

  »   HTML  »   HTML Tutorials, Web design, HTML Programming

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:

  • Conoscere e saper utilizzare il Blocco note (notepad)
  • Saper aprire un file con Internet Explorer ( o un altro browser come Chrome)
  • Saper copiare ed incollare un testo

* Esiste effettivamente la programmazione html?

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ù.

HTML Breve guida

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.

HTML - Elementi

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 - Paragrafi

html<p>Questo è un semplice paragrafo.</p>
<p align="left">Questo è un paragrafo allineato a sinistra.</p>

Demo

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 - I titoli

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.

Html - Interruzione di linea

<br /> E' un'interruzione di linea. Lo spazio tra "br" e "/" è la differenza tra HTML 4 e un codice XHTML valido.

HTML - Regole orizzontali

<hr /> is used to draw a horizontal line. Lo spazio tra "hr" e "/" è la differenza tra HTML 4 e un codice XHTML valido.

HTML - Le liste

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 - I link

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 - Immagini

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;" />

HTML - Moduli

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>

HTML - Campi di testo

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>

HTML - Tabelle

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>

Html - Colore dello sfondo

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.

Html - Sfondo

E' anche possibile inserire un'immagine da utilizzare come sfondo come nell'esempio successivo.

html<table background="img/pattern.jpg">

HTML - Commenti

html<!-- Questo è un semplice commento HTML-->

Html - Embed (Musica e suoni)

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" />

Html - Oggetti (Video)

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 - Grassetto

html<b>Testo in grassetto</b>
<strong>Testo in grassetto</strong>

HTML - Corsivo

html<i>Corsivo</i>
<em>Enfatizzato</em>

HTML - Apice, pedice e testo barrato

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>

HTML - Upload e campi nascosti

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>