Sintesi della lezione

HTML

HTML è l'acronimo di HyperText Markup Language ("Linguaggio a marcatori per gli Ipertesti").

  • Non è un linguaggio di programmazione non ha, cioè, meccanismi che consentono di prendere delle decisioni ("in questa situazione fai questo, in quest'altra fai quest'altro"), e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione.
  • Si tratta invece di un linguaggio di contrassegno (o 'di marcatura'), che permette di articolare gli elementi di una pagina in blocchi le cui caratteristiche vengono definite attraverso degli appositi marcatori, detti "tag".
  • Comunica al browser di quali risorse ha bisogno per comporre la pagina web
  • Definisce e articola il contenuto della pagina:
    • Struttura semantica della pagina
    • Elementi di formattazione
    • Componenti multimediali
    • Componenti funzionali

I TAG

  • I tag vanno inseriti tra parentesi uncinate:  <TAG>
  • La chiusura del tag viene indicata con una barra:  </TAG>
  • Il contenuto che il tag modifica va inserito tra l'apertura e la chiusura del tag medesimo:
Questa <span style=“font-wieight:bold”>parola</span> è in grassetto. 
  • che nel rendering verrà reso:

Questa parola è in grassetto.

  • Alcuni tag non hanno (o possono non avere) contenuto (empty tag) . Ad esempio l’interruzione di linea la indico così:  <br />

ELEMENTI

  • Ogni tag definisce un elemento (element) del documento HTML
  • Esistono vari tipi di elementi:
    • Elementi visibili che definiscono componenti semantiche del testo (titoli, intestazioni, piè di pagina, paragrafi, ecc.)
    • Elementi visibili che definiscono componenti che consentono l'interazione con l'utente (link, campi che consentono l'immissione di testo, bottoni, ecc.)
    • Elementi visibili che servono a formattare parti di testo (grassetto, corsivo, ecc.)
    • Elementi visibili e non visibili che consentono l'inserimento di risorse multimediali (immagini, audio, video, ecc.)
    • Elementi non visibili che servono a caricare risorse funzionali necessarie alla pagina web (script, fogli di stile)
    • Elementi non visibili che racchiudono codice eseguibile o istruzioni di stile.

ATTRIBUTI

  • Le caratteristiche di un tag vengono determinate dagli attributi del tag. Ogni tag ha per i suoi attributi dei valori predefiniti che io posso modificare:
<tag attributo_1="valore1" attributo_2="valore2">contenuto</tag>
  • Alcuni attributi sono generali, comuni a tutti i tag (id, class, ecc.), altri sono specifici e valgono solo per determianti elementi. AD esempio gli attributi che segueno possono essere usati nel tag  <img>  ma non nel ta  <p> :
<img width="20" height="20" src="miaImmagine.gif" alt="alt“ />
  • Una caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro.
  • È quindi opportuno usare l’indentazione. Grazie ad essa il codice HTML risulta più leggibile.

Due attributi sono possono essere attribuiti a tutti gli elementi html:

  • id indica un nome con cui l'elemento è identificato in maniera univoca in una pagina;
  • class usato principalmente (ma non solo) nella definizione di regole di stile serve ad indicare un gruppo di elementi che condividono determinate caratteristiche.

ENTITY

  • Per rappresentare i caratteri non codificabili con lo standard ASCII si è introdotta una codifica particola detta entity.
  • Un entity è così composta:
&nnnn;
  • Quando il parser HTML incontra una parola che inizia con  &  legge i successivi caratteri fino ad in contrare   ;   e tenta di interpretare il tutto come un carattere secondo la tabella di codici definita dal W3C.
  • Elenco completo delle entity: https://dev.w3.org/html5/html-author/charref

COMMENTI

  • Un strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi:
  • Un commento è un’indicazione significativa per il webmaster, ma invisibile al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi.
  • La sintassi è la seguente:
<!-- questo è un commento -->


<h1>Title</h1>

HTML 5

STRUTTURA DELLA PAGINA WEB

<!-- Prologo -->
<!DOCTYPE html>
<!-- fine prologo -->
<!-- HTML (Documento web) -->
<html lang="it">
<!-- Head: impostazioni della pagina -->
<head>
<script src="mioscripr.js"></script>
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<meta name="google" value="notranslate">
</head>
<!-- fine head -->
<!-- body: contenuto visibile della pagina -->
<body>
<h1>Benvenuto!</h1>
<p>Questo &egrave; il mondo di HMTL!</p>
</body>
<!-- fine body -->
</html>
<!-- fine HTML -->

PROLOGO

In HTML 5 il prologo è la semplice dichiarazione del tipo di documento come HTML  <!DOCTYPE html>

ELEMENTO RADICE (ROOT)

L'elemento  <html>  è obbligatorio e può assumere questi attributi:

  • dir  Determina la direzione del testo
  • lang  Specifica il linguaggio di base dell'elemento quando è interpretato come HTML
<html lang="it"> 
....
</html>

HE AD

La sezione  <head>  contiene informazioni che non vengono direttamente visualizzate nella pagina:

  • <link>  Contiene informazioni su documenti esterni collegati: fogli di stile, favicon, ecc.
  • <meta>  Specifica informazioni di vario tipo sul documento.
  • <object>  Racchiude un oggetto.
  • <script>  Contiene script di programmazione o carica uno script di programmazione esterno .
  • <style>  Definisce le regole di formattazione per il documento corrente
  • <title>  Specifica il titolo del documento che compare nella barra del titolo del browser
<head>
<script src="mioscripr.js"></script>
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<meta name="google" value="notranslate">
</head>

BODY

Il corpo del documento è la sezione in cui si sviluppa il contenuto. È racchiusa, come in HTML, tra i tag  <body>...</body> .

Gli elementi che possono comparire all'interno del corpo sono in genere suddivisi in due categorie:

  • elementi blocco ed gli elementi blocco sono quelli che definiscono la struttura del documento. Possono contenere altri elementi blocco, elementi inline o testo. Quando sono inseriti danno origine ad una nuova riga nel flusso del documento.
  • elementi inline: quando sono inseriti non danno origine a una nuova riga e possono contenere solo dati (essenzialmente testo) o altri elementi inline. 
<body>
<h1>Benvenuto!</h1>
<p>Questo &egrave; il mondo di HMTL!</p>
</body>

ELEMENTI DI BASE

ELEMENTI BLOCCO

TITOLI (HEADINGS)

  • Gli heading (titoli) sono elementi blocco contrassegna dai tag da  <h1>  a  <h6>  e possono essere utilizzati per strutturare gerarchicamente un documento.
  • Per default i browser rendono i titoli in grassetto con corpi crescenti da  <h6>  (più piccolo del testo normale) a  <h1> .
   <h1>Questo è un titolo di primo livello</h1> 
<h2>Questo è un titolo di secondo livello</h2>

DIV

  • L’elemento  <div>  è un generico elemento blocco che racchiude una porzione di documento
  • Non è prevista alcuna formattazione di default
  <div> 
Testo o qualsiasi altro elemento 
</div>

P

  • L’elemento  <p>  è un elemento blocco che racchiude una paragrafo
  • Normalmente i browser rendono l'elemento  <p>  assegnandogli un margine inferiore e la dimensione di carattere di default.
  • La specifica prevede che l'elemento  <p>  non contenga elementi blocco
<p> Testo e elementi inline o inline-block </p>

UL

L’elemento  <ul>  rappresenta una lista non ordinata.

  • Gli elementi della lista sono rappresentati da elementi  <li>
  • Per default una lista  <ul>  viene resa come lista puntata
  • All'interno di un elemento <li> può essere inserito un elemento  <ul>  o  <ol>  per creare liste annidate a più livelli
	<ul>
<li>Elemento lista</li>
<li>Elemento Lista
<ul>
<li>Elemeto Lista di secondo livello</li>
</ul>
</li>
<li>Elemento lista</li>
<li>Elemento lista</li>
</ul>

OL

L’elemento  <ol>  rappresenta una lista ordinata.

  • Gli elementi della lista sono rappresentati da elementi  <li>
  • Per default una lista  <ol>  viene resa come lista numerata
  • All'interno di un elemento <li> può essere inserito un elemento  <ul>  o  <ol>  per creare liste annidate a più livelli
	<ol>
<li>Elemento lista</li>
<li>Elemento Lista
<ul>
<li>Elemeto Lista di secondo livello</li>
</ul>
</li>
<li>Elemento lista</li>
<li>Elemento lista</li>
</ol>

ELEMENTI INLINE

Quando sono inseriti non danno origine a una nuova riga e possono contenere solo testo o altri elementi inline.

<p>Questo tasto è<b>grassetto</b></p>

La parte delimitata dai tag  <b>...</b>  non sarà posta su una nuova riga.

Esempi come questo:

<b><p>Testo in grassetto</p></b>

sono tollerati dai browser, ma non reggono al giudizio della validazione in quanto un elemento inline non può contenerne uno di tipo blocco.

span

L’elemento <span> è una generico elemento inline che definisce una porzione di testo. Non è prevista lacuna formattazione di default.

<p>Questa <span style="“font-wieight: bold”">parola</span> è in grassetto.</p>

FORMATTAZIONE

Esistono una serie di elementi inline che definiscono la funzione di una porzione di testo.

  • <em>  Testo enfatizzato
  • <strong>  Testo importante
  • <dfn>  Definizione
  • <code>  Codice
  • <samp>  Esempio di output
  • <kbd>  Imput da tastiera
  • <var>  Variabile

In HTML5 è compito del foglio di stile definire il formato di questi elementi.

ELEMENTI SEMANTICI

Gli elementi semantici sono quelli che ci aiutano a dare una struttura logica ad un documento

  • Normalmente sono elementi di tipo blocco
  • Nella maggior parte dei casi i browser non prevendono alcuna formattazione di default e vengono resi sullo schermo come testo normale

HEADER

La specifica impone che questo elemento debba delimitare l’intestazione di una sezione del documento.

  • Le intestazioni possono essere molteplici all’interno di un documento. Si pensi ad esempio blog: nell’home page ci sarà un’intestazione contenente il nome del blog, un menù di navigazione e qualche altra informazione. Sotto l’intestazione potrebbe esserci una sezione contenente gli articoli recenti, ognuna di queste dovrà avere anch’essa un’intestazione che potrebbe l’autore e la data di pubblicazione.
  • Non è prevista lacuna formattazione di default
	<header class="main-header">
<div class="logo">Logo</div>
<nav>
<!-- Menu del sito -->
</nav>
</header>

NAV

L’elemento <nav> specifica una porzione di documento destinato alla navigazione per esempio la lista di un menu.

	<nav>
<ul class="navbar">
<li><a href="#titoli">Titoli</a> </li>
<li><a href="#paragrafo">Paragrafo</a> </li>
<li><a href="#liste">Liste</a> </li>
</ul>
</nav>

SECTION

L'elemento <section> rappresenta una sezione generica di un documento o applicazione.

  • Individua un raggruppamento tematico di contenuti, ed in genere contiene un titolo introduttivo ad esempio le sezioni di una homepage o i capitoli di un libro.
  • Se la sezione racchiusa è una notizia l’elemento più appropriato per tale impiego è il tag <article>.
	<section>
Testo o qualsiasi altro elemento 
</section>

ARTICLE

L’elemento  <article>  dev’essere utilizzato quando s’inseriscono informazioni indipendenti dal resto del documento o della sezione in cui è racchiuso.

  • Può trattarsi ad esempio di un articolo di giornale o un post in un blog o un qualsiasi altro elemento.
	<article>
<header>
<h1>Titolo</h1>
<div class="autore>">Mario Rossi</div>
</header>
<p>....</p>
<!-- Contenuto articolo -->
<footer><time datetime="2017-03-01T14:00" pubdate>01/03/2017 14:00</time> </footer>
<section class="commenti">
<article>
<!-- Autore commento 1, avatar, testo commento -->
</article>
<article>
<!-- Autore commento 2, avatar, testo commento -->
</article>
<section class="aggiungi-commento">
<form method="post">
<label>Aggiungi commento:</label>
<textarea rows="5" maxlength="500"></textarea>
<button type="submit">Invia</button>
</form>
</section>
</section>
</article>

ASIDE

L’elemento  <aside>  viene utilizzato per definire una porzione di codice correlata al contenuto ma separata come per esempio una sidebar.

  • Le informazioni che racchiude, se rimosse, non devono incidere negativamente sulla completezza dell’informazione contenuta nell’elemento a cui è associato.
  • Può essere utilizzato ad esempio per racchiudere elementi  <nav>  aggiuntivi, banner pubblicitari o note.

FOOTER

L’elemento  <footer>  definisce una porzione di documento che rappresenta il piede della pagina o di una parte del documento.

  • Non è prevista lacuna formattazione di default
  • Analogamente alle intestazioni anche i piè di pagina possono essere molteplici all’interno di una pagina web.
<footer> &copy; 2017 Mia Azienda - Tutti i diritti riservati </footer>

FIGURE

Il tag <figure> specifica un contenuto indipendente dal testo, come illustrazioni, diagrammi, foto, esempi di codice, ecc

  • Mentre il contenuto dell'elemento <figure> è in relazione al flusso principale, la sua posizione è indipendente dal flusso principale, e se rimosso non dovrebbe influenzare il flusso del documento.
  • Di norma l’elemento <figure> contiene un elemento <figcaption> che arricchisce l'elemento contenuto in <figure> con una descrizione
	<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Una didascalia</figcaption> 
</figure>

TIME

L’elemento  <time>  rappresenta una data.

  • È normalmente utilizzato all'interno di un elemento  <article>
  • L'attributo  datetime  indica la data in forma "iso" ( anno[-mese[-giorno]] [ora[:minuti[:secondi]]] ) in modo che programmi esterni che consultano l'articolo possano determinarla in modo certo
  • L'attributo  pubdate  indica, se presente, che la data si riferisce alla pubblicazione dell'articolo in cui  <time>  è inserito altrimenti si presumerà che la data sia la data di pubblicazione della pagina.
   <time datetime="2010-04-21 11:45" pubdate ="pubdate" > 
21 Pubblicato il 21 febbraio 2017 alle ore 11:45 
</time>