PW - 02 - HTML 02


Lecture Info

  • Date: [2018-03-09 ven]

  • Lecturer: Pierpaolo Loreti

  • Slides: ()

  • Argomenti:

    • Attributi html.

    • Pagina web come insieme di documenti.

    • Introduzione al Markup semantico.

    • HTML Headings.

    • Elenco elementi html per raggruppare il contenuto.


1 Attributi HTML

Attributi come coppie per definire caratteristiche; Attributo style; Singole e doppie virgolette.

Una pagina Web non è semplicemente un documento HTML, ma bensì una composizione di uno o più documenti HTML con delle risorse come immagini, video, etc.

Tipologie di tag: presentazione del contenuto; gestione del testo; gestione delle sezioni.

2 HTML Headings

Esistono sei livelli di intestazione o titolo: h1 , h2 , h3 , h4 , h5 , h6 .

Non bisogna utilizzare h3 se non abbiamo utilizzato h1 e h2 . h1 è il titolo della pagina. Non servono per fare i caratteri grandi. Vengono utilizzati dai motori di ricerca per indicizzare le pagine.

3 Grouping Content Elements

Lo scopo dell'HTML è quello di aggiungere significato e struttura al contenuto. Dunque l'HTML non è pensato per fornire istruzioni su come il contenuto deve essere presentato.

Andiamo adesso a descrivere gli elementi, con i relativi tag di definizione, utilizzati per l'organizzazaione del contenuto, anche noto come markup semantico. Il markup semantico consiste nello scegliere l'elemento HTML che fornisce la miglior descrizione del contenuto.

Link utile: grouping content.


3.1

Rappresenta un paragrafo. Dentro al paragrafo posso mettere del testo, delle immagini e degli elementi inline. Il browser generalmente riesce a chiudere i paragrafi lasciati aperti.

Deve essere chiuso.


3.2

Rappresenta un break tematico a livello di paragrafo. Viene quindi utilizzato quando abbiamo finito di scrivere un paragrafo e ne dobbiamo iniziare un altro che tratta di un altro argomento.

Non utilizzare questo tag per creare una riga vuota!

Non deve essere chiuso.


3.3
 

Rappresenta un blocco di testo preformattato nel quale la struttura viene rappresentata direttamente dai caratteri utilizzati e non dagli elementi html. All'interno di questo elemento quindi gli spazi e le newlines vengono mostrate come scritte.

Deve essere chiuso.


3.4

Rappresenta del contenuto che viene quotato da un'altra source. Di default formatta il testo verso destra.

Deve essere chiuso.


3.5
    ,
      ,

Il tag <ol> rappresenta una lista ordinata di oggetti e deve essere sempre chiuso.

Il tag <ul> rappresenta una lista non ordinata di oggetti e deve essere sempre chiuso.

Il tag <li> rappresenta un oggetto appartenente ad una lista di oggetti e deve essere sempre chiuso.


3.6
,
,

Il tag <dl> rappresenta una lista descrittiva che consiste di zero o più coppie nome-descrizione e deve essere sempre chiuso.

Le voci della lista sono composte da due elementi, un elemento "termine" tra i tag <dt> ... </dt> , e un elemento descrizione tra i tag <dd> ... </dd> . Entrambi i tag <dt> e <dd> devono essere sempre chiusi.

A seguire qualche osservazione da tenere a mente:

  • Nell'elemento <dl> ci possono essere solo <dt> e <dd> .

  • Nell'elemento <dt> non ci possono essere grouping elements (h1, p, etc).

  • Nell'elemento <dl> ci può essere qualunque cosa.

A seguire un esempio esplicativo

<dl> 
  <dt> Termine1 </dt>
  <dd> Descrizione1 </dd>
  
  <dt> Termine2 </dt>
  <dd> Descrizione2 </dd>
</dl>


3.7
,

Il tag <figure> rappresenta qualche flow content che sia self-contained e che viene tipicamente riferito come una singola unità di contenuto dal main flow del documento. Il tag <figure> deve essere sempre chiuso.

Il tag <figcaption> invece rappresenta una didascalia.


3.8

L'elemento <div> non ha nessun significato speciale, e rappresenta semplicemente i suoi figli.


3.9

L'elemento <main> rappresenta il contenuto principale del <body> di un documento o di una applicazione.

Per "parte principale", si intende tutto quel contenuto che risulta essere unico per il documento e non viene ripetuto più volte su vari documenti, come ad esempio un menu di nagivazione.

Deve essere sempre chiuso.