Nella seconda lezione abbiamo iniziato a studiare i vari tag html ed abbiamo provato ad inserirli in una pagina HTML di prova per vedere come vengono resi dal browser.

Sintesi della lezione

ELEMENTI HTML DI BASE (2° parte)

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>

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 <strong>...</strong> non sarà posta su una nuova riga.

Esempi come questo:

<strong><p>Testo in grassetto</p></strong> 

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

Elenco completo dei tag e digli attributi HTML

Pagine create durante la lezione

index.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pagina Personale di Bruno Migliaretti</title>
</head>
<body>
	<h1>Bruno Migliaretti</h1>
	<p>Docente del corso.</p>
	<p>Pippo e pluto sono amici.</p>
	<p><a href="tipografia.html">Il mio esercizio</a> ecc.</p>
	<p><a href="https://www.google.com" target="_blank">Cerca su Google</a></p>
</body>
</html>

tipografia.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tipografia</title>
</head>

<body>
<h1>Titolo 1 <br>
    pippo</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam tenetur aliquam asperiores beatae, eos ex enim, nesciunt esse libero quo ullam ab dicta fugit sed. Dicta tempora quas possimus dolorum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id adipisci tempora, perferendis assumenda consectetur, soluta explicabo consequatur magni corrupti minima deserunt enim fugit necessitatibus vero temporibus ipsam repellat voluptatem tenetur.</p>
<ul>
    <li>Primo elemento</li>
    <li>Secondo</li>
    <li> Sottolista
        <ul>
            <li>Sottolista</li>
            <li>Sotto sotto</li>
        </ul>
    </li>
    <li>Quarto</li>
</ul>
<ol>
    <li>Primo</li>
    <li>Secondo</li>
</ol>
</body>
</html>

 

Torna all'inizio