css

Tutorial HTML


Indice:

Cos'è HTML?

HTML (HyperText Markup Language) è un linguaggio di marcatura che permette di indicare come disporre gli elementi all'interno di una pagina attraverso appositi marcatori, detti tag.

Permette di impaginare e formattare pagine collegate tra loro attraverso link, creando così un flusso di pagine (ipertesto).

HTML ha un'architettura client-server, ovvero un'architettura di rete nella quale un computer client si connette ad un computer server.
Nel caso di HTML il risultato di questa connessione è la visualizzazione della pagina web scritta in linguaggio HTML.

Headings e Paragrafi

Gli Headings sono i titoli o sottotitoli visualizzabili sulla pagina. Si indicano con:

Possono essere di 6 dimensioni diverse da <h1> a <h6>.
I titoli hanno dimensioni standard che possono, però, essere modificate usando il CSS.

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

I Paragrafi iniziano sempre in una nuova riga e sono, generalmente, blocchi testuali.

<p>Paragrafo</p>

Si indicano con il tag <p> ed ogni schermo e browser mostrerà i paragrafi in modo differente in base alle sue dimensioni.

Link e Immagini

I Link permettono all'utente di passare da una pagina ipertestuale ad un'altra cliccando su di essi.

Si indicano con il tag <a> che può essere attribuito al testo, ad un immagine o ad altri elementi di HTML.

<a href="url">testo link</a>

Ci sono due tipi di link:

Link assoluti

Link con l'intero indirizzo della pagina nell'attributo href.

href="https://www.google.com/"

Link relativi

Link locale, ovvero che porta ad una pagina nello stesso sito, e che non ha "https://www".

href="page2.html"

Le Immagini possono essere aggiunte in una pagina web per migliorarne l'aspetto tramite il tag <img>.

<img src="url" alt="alternatetext">

Tecnicamente, le immagini visualizzate sono a loro volta dei link a delle pagine web.

L'attributo alt serve a specificare un testo alternativo che verrà visualizzato se l'immagine non sarà disponibile.

L'attributo src serve a specificare l'indirizzo della pagina web dove si trova l'immagine.

Table

Le Tabelle permettono di organizzare i dati in righe e colonne.

<table>
<tr>
<th>Colonna1</th>
<th>Colonna2</th>
<th>Colonna3</th>
</tr>
<tr>
<td>Riga 1.1</td>
<td>Riga 1.2</td>
<td>Riga 1.3</td>
</tr>
<tr>
<td>Riga 2.1</td>
<td>Riga 2.2</td>
<td>Riga 2.3</td>
</tr>
</table>
Colonna1 Colonna2 Colonna3
1.1 1.2 1.3
2.1 2.2 2.3

Questo è il risultato del codice precedente. Sono state create:

  • 3 colonne
  • 2 righe

N.B. la tabella mostrata è stata modificata con il CSS.

Si utilizzano 4 tag principali:

Il tag <table> crea la tabella.

Il tag <tr> definisce ogni cella della tabella, sia le colonne che le righe.

Il tag <th> definisce una colonna nella tabella.

Il tag <td> definisce una riga nella tabella.

Liste ordinate e non ordinate

Le Liste servono per organizzare i vari elementi in liste, generalmente uno sotto l'altro. Si dividono in:

Liste Non Ordinate

Gli elementi della lista sono contrassegnati con dei cerchietti neri (bullets).
Si utilizza il tag <ul> (unordered list)

<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

Liste Ordinate

Gli elementi della lista sono contrassegnati con i numeri in ordine crescente. Si utilizza il tag <ol> (ordered list)

<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>

I risultati sono:

  • Item
  • Item
  • Item
  • Item
  1. Item
  2. Item
  3. Item
  4. Item

Blocchi (DIV e SPAN)

I blocchi più utilizzati in HTML sono div e span.

L'elemento <div> inizia sempre in una nuova riga e occupa tutto lo spazio disponibile.

L'elemento <div> è un blocco

Esempio: <div>Hello World!</div>

Le div sono utilizzate come contenitori per altri elementi HTML e sono generalmente modificate tramite classi, id e con il CSS.

L'elemento <span> non inizia in una nuova riga e occupa solo lo spazio necessario.

Questo è un elemento <span> all'internodi un paragrafo.


Esempio: <span>Hello World!</span>

Gli span sono utilizzati come contenitori interni per modificare una parte di testo o di documento. Sono generalmente modificati tramite classi, id e con il CSS.

Iframe

Gli Iframe servono per mostrare una pagina web all'interno di un'altra pagina web.

<iframe src="url" title="description"></iframe>

L'attributo title serve per aggiungere una descrizione che specifichi il contenuto dell'iframe.

L'attributo src cerca l'indirizzo della pagina web.

Si può anche aggiungere l'attributo style per modificare, ad esempio, le dimensioni dell'iframe.

Ecco un esempio:

Semantic elements

I semantic elements, o elementi semantici, descrivono il proprio contenuto in modo che sia il programmatore che il browser possano identificare le diverse parti della pagina web.

semantic elements

Vediamo i principali tag semantici: