Lezione 2 - 3

Nella seconda e terza lezione abbiamo studiato i vari tag html ed abbiamo provato ad inserire in una pagina HTML i più importanti.

Sintesi delle lezioni

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

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

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.

INTERATTIVITÀ

A

Il tag <a> definisce un collegamento ipertestuale, che viene utilizzato per collegare una risorsa internet.

  • L'attributo più importante dell'elemento <a> è l'attributo href, che indica la destinazione del collegamento.
  • Il collegamento può essere un URL assoluta o un URL relativa
    • In un URL Assoluta l'indirizzo inizia sempre con il nome host che deve essere preceduto dalla doppia barra (//www.google.com)
    • Se il browser non trova il nome host considererà l'url come relativa e completerà l'indirizzo generando un'URL assoluta.
    • Se l'URL relativa inizia con la barra semplice (/) come punto di riferimento per il calcolo sarà presa la cartella iniziale del sito (root) e quindi verrà aggiunto solo il nome host
    • In caso contrario il calcolo verrà fatta partendo dalla cartella in cui si trova la pagina cliccata.
    • All'URL posso aggiungere un segnalibro (anchor) che mi fa saltare ad un determinato punto di una pagina. Il segno dell'anchor è il cancelletto (#), va aggiunto alla fine dell'URL e va scorrere la pagina al punto in cui viene visualizzato l'elemento che ha come l'attributo id corrispondente.
  • Per impostazione predefinita, i collegamenti verranno visualizzati come segue in tutti i browser:
    • Un collegamento non visitato è sottolineato e blu
    • Un link visitati è sottolineato e viola
    • Un collegamento attivo è sottolineato e rosso
<a href="#su-di-me" >Su di me</a> 
<a class="btn btn-primary" href="https://github.com/magicbruno" target="_blank">
    magicbruno su GitHub
</a>

FORM

Il tag <form> viene utilizzato per creare un modulo HTML per l'input dell'utente.

  • L'elemento <form> può contenere uno o più dei seguenti elementi del modulo:
    • <input>
    • <textarea>
    • <button>
    • <select>
    • <option>
    • <optgroup>
    • <fieldset>
    • <label>
    • <button> 
	<form action="demo_form.asp" method="get">
		<label>Nome</label>
		<input type="text" name="nome"><br />
		<label>Cognome</label>
		<input type="text" name="cognome"><br />
		<input type="submit" value="Invia">
	</form>

INPUT

Il tag <input> specifica un campo di input in cui l'utente può inserire i dati.

  • Gli elementi <input> vengono utilizzati all'interno di un elemento <form>
  • La funzione di imput cambia a secondo del valore definito dall'attributo type:
    • button,
    • checkbox,
    • color,
    • date,
    • datetime,
    • datetime-local,
    • email,
    • file,
    • hidden,
    • image,
    • month,
    • number,
    • password,
    • radio,
    • range,
    • reset,
    • search,
    • submit,
    • tel,
    • text,
    • time,
    • url,
    • week 
	<form action="demo_form.asp" method="get">
		<label>Nome</label>
		<input type="text" name="nome"><br />
		<label>Cognome</label>
		<input type="text" name="cognome"><br />
		<input type="submit" value="Invia">
	</form>

TEXTAREA

Il tag <textarea> definisce un controllo di input di testo multilinea.

  • Un'area di testo può contenere un numero illimitato di caratteri.
  • Per default il testo viene reso in un font a larghezza fissa (di solito Courier).
<textarea rows="5" maxlength="500"> 
    Testo contenuto nella casella editabile 
</textarea>

BUTTON

Il tag <button> definisce un pulsante cliccabile.

  • Contrariamente che per l'elemento input all'interno di un elemento <button> Posso inserire qualsiasi tipo di contenuto.
  • Browser diversi utilizzano diversi tipi di default per l'elemento <button>
  • <button> supporta l'attributo type che può assumere i valori: button, submit e reset, gli stessi usati quando l'elemento <input> viene usato come pulsante e con lo stesso significato
<button type="button">Cliccami!</button>

SELECT

L'elemento <select> viene utilizzato per creare un elenco a discesa.

  • I tag <option> all'interno dell'elemento <select> definiscono le opzioni disponibili nella lista. <select>
	<select>
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="mercedes">Mercedes</option>
		<option value="audi">Audi</option>
	</select>

ELEMENTI MULTIMEDIALI

IMG

Il tag <img> definisce un'immagine in una pagina HTML.

  • Il tag <img> ha due attributi obbligatori: src e alt.
  • Le immagini non sono tecnicamente inserite in una pagina HTML, ma collegate attraverso l'URL, l'indirizzo univoco la identifica. Il tag <img> crea lo spazio di per l'immagine caricata.
<img src="smiley.gif" alt="Smiley face" height="42" width="42" /> 
<img src="https://unsplash.it/1280/720?random" alt="Immagine caricata da unsplash.it" /> 

VIDEO

Il tag <video> consente di inserire un video in una pagina WEB, ad esempio un clip filmato o un video in streaming.

  • Attualmente sono tre i formati video supportati dall'elemento <video>:
    • MP4 (Internet Explorer, Chrome, Safari, Firefox su Windows),
    • WebM (Chrome, Firefox, Opera)
    • Ogg (Chrome, Firefox, Opera).
	<video controls>
		<source src="movie.mp4" type="video/mp4">
		<source src="movie.ogg" type="video/ogg">
		Il tuo browser non supporta il tag video.
	</video>

AUDIO

Il tag <audio> consente di inserire una risorsa audio in una pagina WEB, ad esempio una clip audioo un audio in streaming.

  • Attualmente sono tre i formati audio supportati dall'elemento <audio>:
    • MP3 (Internet Explorer, Chrome, Safari, Firefox su Windows),
    • Wav(Chrome, Firefox, Opera. Safari) e
    • Ogg (Chrome, Firefox, Opera).
	<audio controls>
		<source src="horse.ogg" type="audio/ogg">
		<source src="horse.mp3" type="audio/mpeg">
		Il tuo browser non supporta il tag audio. 
	</audio>

CANVAS

Il tag HTML5 <canvas> viene usato per disegnare la grafica, al volo, tramite scripting (di solito Javascript). L'elemento <canvas> non ha capacità di disegno proprie (è solo un contenitore per la grafica). È necessario utilizzare uno script per disegnare effettivamente la grafica.

Elenco completo tag HTML

Torna all'inizio