Lezione 2 (IFTS 2018)

HTML 5 - Principali tag e attributi from Bruno Migliaretti

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

altervista.org

In primo luogo abbiamo perfezionato la creazione di un sito web personale su altervista.org. Il video che potete vedere qui vi spiega come creare un account su altervista.org, come configurarlo come servizio di hosting e come creare un sito su Dreamweaver e collegarlo con il vostro account Altervista.

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>

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>

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>

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 <br>
amici.</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