Lezione 2 (IFTS 2019)

HTML articola l'interfaccia in blocchi (semantici e funzionali) che interagiscono con css e javaScript consentendo di costruire le applicazioni web.

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 BOLOCCO

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>

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.
Di norma un elemento <p> non contiene elementi blocco

<p> Testo e elementi inline o inline-block </p>

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 DI TIPO LISTA

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

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.

Collegamento alla cartella condivisa contente l'esercizio svolto in aula