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