Materiale per gli studenti in formato HTML

L'HTML è la base di una pagina web. In questa unità vedremo come creare una struttura solida e significativa per una pagina web.

Concetti principali

  • Gli studenti comprendono la struttura del file HTML.
  • Gli studenti sanno come utilizzare i tag comuni per creare una pagina web.

Che cos'è l'HTML?

HTML è l'abbreviazione di HyperText Markup Language. È un codice che utilizziamo per:

  • creare documenti archiviati sul World Wide Web e visualizzati in un browser.
  • fornisce una struttura di base per la nostra pagina web, ovvero lo scheletro della pagina.
  • garantire il corretto caricamento di testo e immagini da visualizzare nel browser.

Quando utilizziamo l'HTML?

Ogni pagina web che vedi sul World Wide Web è scritta utilizzando il codice HTML. Pulsanti, immagini, moduli, sezioni di testo: tutti questi elementi vengono creati con HTML.

Se pensiamo alla nostra pagina web come a un corpo umano, l'HTML è la struttura ossea. Possiamo aggiungere pelle e vestiti al corpo utilizzando CSS, ma solo dopo aver creato la struttura scheletrica.

HTML in azione

Gli elementi sono il fulcro dell'HTML. Gli elementi vengono creati con i tag.

La maggior parte degli elementi ha un tag di apertura e un tag di chiusura:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

I contenuti (testo o anche altri elementi HTML) che vuoi visualizzare nella pagina web possono essere inseriti tra questi tag, un po' come se annidassi gli strati di un panino.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Alcuni contenuti HTML vengono creati con tag autochiudenti che non richiedono un tag di chiusura aggiuntivo:

<img />
<link />

È sufficiente un solo tag, in quanto il compito di questo elemento è quello di occupare un posto nel documento. A differenza della maggior parte degli altri elementi HTML, non è possibile nidificare altri elementi o informazioni all'interno di questi elementi auto-chiusi.

Parti di un elemento HTML

Esempio di HTML

Questo codice verrà visualizzato in un browser e avrà l'aspetto dell'immagine seguente.

Questo codice…

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... Makes This Web Page

Riferimento HTML

Inquadratura

Contesto e scopo

HTML sta per Hyper Text Markup Language. È un modo per dare un significato strutturale al testo. Consente a computer e programmatori di determinare facilmente lo scopo di un blocco di testo.

Pensa all'HTML come allo scheletro di una pagina web: fornisce la struttura e i contenuti, mentre JavaScript e CSS forniscono l'interattività e lo stile.

Obiettivi di apprendimento

Gli studenti potranno

  • creare un file HTML e aprirlo nell'editor e nel browser
  • configurare un file HTML con la struttura corretta
  • elencare e utilizzare alcuni tag comuni per aggiungere struttura e contenuti al proprio sito web

Per iniziare

Inquadratura e scopo della sezione

  • L'HTML viene scritto all'interno di file con estensione .html.
  • Puoi assegnare ai tuoi file HTML il nome che preferisci, tuttavia index.html è il nome più comune utilizzato per la pagina di destinazione, a meno che lo sviluppatore non abbia un motivo per configurare il server in modo diverso.
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

Mini sfide

  1. Crea altri tre file HTML con i nomi che preferisci.
  2. Apri uno dei file nell'editor di testo e nel browser.

Struttura di una pagina HTML

Inquadratura e scopo della sezione

Un documento HTML deve sempre iniziare con la stessa struttura:

  • Il tag DOCTYPE è speciale e non viene chiuso. Inoltre, è l'unico tag che può contenere valori non alfanumerici (lettere/numeri).
  • Il tag <head> contiene informazioni sul tuo sito web, ma non i contenuti effettivi che verranno visualizzati nella pagina.
  • Il <body> contiene tutti i contenuti della pagina che verranno effettivamente visualizzati sullo schermo.
  • I tag che utilizzerai per creare la struttura della pagina devono essere inseriti tra i tag <body>.
  • Tra i tag di apertura e chiusura, inseriamo il testo o i "contenuti" dell'elemento. Il risultato finale sarà simile a questo: <example-tag>Content Goes in here</example-tag>. I tag possono essere inseriti anche all'interno di altri tag.
  • Tieni presente che quando inserisci un tag all'interno di un altro tag, devi rientrare il nuovo tag per indicare che è un tag secondario del tag principale.

Lessico

  • Elementi: elementi (come immagini, paragrafi e intestazioni) creati con codice HTML.
  • Tag: porzioni di codice che indicano dove iniziano e terminano determinati elementi.
  • child: elementi contenuti ALL'INTERNO di altri elementi.
  • genitore: elementi che CONTENGONO altri elementi.

Esempi di HTML

Nota : il seguente è solo un esempio di riferimento; non è necessario comprenderlo immediatamente, ma è utile vedere come potrebbe apparire un codice HTML ben formattato.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Mini sfide

  1. Apri uno dei file che hai creato e aggiungi la struttura di base dei tag HTML.
  2. Configura il corpo HTML per mostrare il tuo albero genealogico (o quello di qualcun altro). Utilizza un tag section per creare un gruppo Famiglia. Usa un tag p per tenere in mano un membro del gruppo Famiglia. Le famiglie sono complicate, ma un esempio potrebbe essere:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Tag comuni

Inquadratura e scopo della sezione

In generale, non creiamo tipi di elementi personalizzati. Esiste invece un insieme di elementi predefiniti con funzionalità già associate.

Consulta il riferimento HTML per un'analisi dettagliata degli esempi di blocchi di codice

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Mini sfide

  1. Rivedi tutti i contenuti sopra riportati in modo che riflettano I TUOI interessi.
  2. In uno degli altri file HTML vuoti che hai creato all'inizio della lezione, fingi di preparare un articolo di notizie con titolo, intestazioni e sottotitoli (non riesci a pensare a un contenuto? Scrivi di un giorno in cui eri in viaggio. Pensa a piccoli viaggi che hai fatto, ai luoghi che hai visitato, al cibo che hai mangiato.
  3. Utilizza i tag pertinenti e aggiungi alcuni contenuti per visualizzare l'articolo di notizie sul tuo sito web.
  4. Verifica che i contenuti vengano visualizzati nel browser.
  5. STRETCH: crea un modulo che qualcuno possa compilare per inviarti un commento sul tuo articolo. Anche se non funzionerà ancora (non è collegato a JavaScript), la creazione di questo modulo in HTML può mostrarci il primo passaggio per creare un modulo funzionante.

Contesto

L'HTML è il linguaggio dei contenuti del World Wide Web.

Utilizzerai la riga di comando per navigare e aprire i file HTML. I file HTML verranno arricchiti con stili CSS e comportamenti scritti utilizzando script JavaScript composti da varie funzioni. I file HTML saranno anche modelli utilizzati da Google App Engine e compilati da un database.

HTML in azione

Getting Started with HTML

L'HTML viene scritto all'interno di file con estensione .html.

Visualizzare la tua Pagina

Per visualizzare l'anteprima di un file HTML su un Mac: nella riga di comando, vai alla cartella con la pagina HTML e digita open filename, sostituendo "filename" con il nome del file HTML.

Sintassi generale

<tag>
  Content
</tag>

Gli elementi sono nidificati

Gli elementi HTML possono essere inseriti all'interno di altri elementi:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

Struttura di una pagina HTML

Ogni pagina web ha una struttura di base identica. Ha questo aspetto:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • Il <head> contiene informazioni su il tuo sito web, ma non i contenuti effettivi che verranno visualizzati nella pagina (consideralo come il "cervello" della tua pagina web).
  • Il <body> contiene tutti i contenuti della pagina che verranno effettivamente visualizzati sullo schermo.

Elementi comuni

Utilizza questi elementi comuni all'interno dei tag <body> e </body> per aggiungere contenuti a una pagina.

Paragrafo

Per creare un paragrafo, utilizza i tag di apertura e chiusura p:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Commento

Utilizza i commenti per rendere il codice più facile da leggere senza influire sull'HTML di rendering finale.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Headings

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Generico <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Elenchi

Gli elenchi di voci di elenco, <li>, sono racchiusi da un tag di elenco non ordinato, <ul>, o da un tag di elenco ordinato, <ol>.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Immagine

Il tag <img> richiede di specificare l'indirizzo dell'immagine utilizzando l'attributo src, mentre l'attributo facoltativo alt viene utilizzato per l'accessibilità, inclusi gli screen reader.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

Per un link ipertestuale, il tag <a> richiede di specificare l'indirizzo della destinazione del link ipertestuale utilizzando l'attributo href.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Righello orizzontale

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Pausa

<!-- This self-closing tag creates a line break between elements. -->
<br>

Modulo

Un <form> viene utilizzato per raccogliere informazioni da un utente. Affinché un <form> funzioni, deve inviare i dati che raccoglie da qualche parte per essere elaborati o gestiti. Pertanto, <form> spesso richiede attributi aggiuntivi:

  • action: la destinazione dei dati del modulo quando viene inviato
  • method: indica se i dati devono essere trattati utilizzando un tipo di richiesta GET o POST.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Input

<input> è l'elemento utilizzato da un <form> per raccogliere informazioni.

Un elemento <input> di solito ha anche un attributo name utilizzato dai database per identificare il campo a cui appartengono i dati inviati.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

L'elemento <input> è molto versatile: specificando l'attributo type, può essere visualizzato come campo di testo, selettore di date in stile calendario, pulsante di opzione, menu a discesa e altro ancora. Per un elenco più completo, puoi consultare la documentazione esterna.

Suggerimenti utili

  • Scopri quali tag HTML sono disponibili esaminando il codice delle pagine web per vedere quali tag hanno utilizzato altri sviluppatori per aggiungere qualcosa a una pagina web.
  • Se non riesci a trovare quello che vuoi aggiungere, consulta la documentazione per gli sviluppatori. Di seguito sono riportati alcuni elenchi di tutti i possibili elementi HTML https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
  • Quando scrivi codice HTML, per gli elementi che richiedono un tag di apertura e uno di chiusura, è meglio aprire e chiudere prima il tag prima di aggiungere contenuti tra i tag. In questo modo, non rimarranno tag orfani.
  • Per visualizzare al meglio la natura nidificata degli elementi HTML nel codice, rientra gli elementi che si trovano all'interno di altri elementi. In questo modo, potrai riconoscere rapidamente la struttura dei contenuti HTML.
  • Utilizza molti commenti. Questi suggerimenti ti aiuteranno a risolvere i problemi del tuo codice e ad aiutare gli altri quando chiedi loro di esaminarlo.
  • Risorse sul web come html5boilerplate.com possono aiutarti a iniziare rapidamente a scrivere codice HTML.

Riepilogo delle best practice

  • Le informazioni su una pagina web vengono inserite nell'<head> di un documento HTML: titolo, metadati, link agli stili e così via.
  • Le informazioni su una pagina web vengono inserite nel <body> di un documento HTML.
  • Gli sviluppatori possono utilizzare molti elementi per creare i contenuti di un documento HTML, tra cui: <p>, <h1>-<h6>, <div>, <li>, <img>, <a>, <hr>, <br>, <!-- --> e altri ancora.
  • Alcuni elementi richiedono un tag di apertura e un tag di chiusura: <p></p>.
  • Altri elementi si chiudono automaticamente, quindi richiedono solo un tag di apertura: <img>.
  • I tag possono includere attributi (src, alt, id e così via) che forniscono maggiori informazioni sul comportamento di un elemento: <img src="filename.png" alt="description">.
  • I commenti, <!-- -->, forniscono note agli sviluppatori utili per comprendere la funzione delle sezioni di una pagina web.
  • Utilizza gli strumenti per sviluppatori integrati nel browser per ispezionare il codice HTML delle pagine web ed esaminare la struttura della pagina.

Domanda 1

Quale dei seguenti elementi è un elemento secondario? (ignora gli elementi body/html ai fini di questo esercizio)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 e p

Domanda 2

In un documento HTML, __ va nell'elemento <head> e __ va nell'elemento <body>.

  1. struttura, metadati
  2. metadati, struttura
  3. intestazioni, contenuti più piccoli
  4. l'intestazione del sito, i contenuti principali del sito

Domanda 3

Quali dei seguenti non sono buoni motivi per rientrare gli elementi nidificati?

  1. Il rientro rende più facile vedere quali elementi sono contenuti in altri elementi
  2. Il rientro rende più facile per gli utenti leggere la struttura della pagina web
  3. Il rientro rende più facile per i bot/motori di ricerca leggere la struttura della pagina web
  4. Il rientro rende più facile identificare gli elementi di pari livello

Domanda 4

Quale dei seguenti è un attributo dell'elemento HTML?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. barra laterale
  4. La barra laterale va qui.

Domanda 5

Quanti attributi ha il seguente elemento HTML?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

Domanda 6

Nel seguente snippet HTML che mostra una relazione, qual è l'elemento principale?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

Domanda 7

Quanti degli elementi nel seguente snippet HTML sono elementi secondari di un elemento principale?

Non conteggiare gli elementi di wrapping <body> o <html>.

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

Domanda 8

Sebbene alcuni browser eseguano il rendering dello snippet HTML seguente correttamente, qual è il problema?

<img src=puppies.png width=400 />
  1. Non ha un tag di chiusura
  2. I valori degli attributi devono essere racchiusi tra virgolette
  3. Se fornisci l'attributo width, devi specificare anche l'attributo height
  4. Manca un attributo obbligatorio

Domanda 1

Quale dei seguenti elementi è un elemento secondario? (ignora gli elementi body/html ai fini di questo esercizio)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

L'elemento a è un elemento secondario perché è contenuto all'interno di un altro elemento.

Domanda 2

In un documento HTML, __ va nell'elemento <head> e __ va nell'elemento <body>.

I metadati vanno nell'elemento <head> e la struttura nell'elemento <body>. Nessun elemento <head> sarà visibile nella pagina web.

Domanda 3

Quali dei seguenti non sono buoni motivi per rientrare gli elementi nidificati?

Il rientro non facilita la lettura della struttura della pagina web da parte di bot/motori di ricerca. Quando un bot legge un sito web, può leggere il codice HTML anche se fosse tutto su una riga.

Domanda 4

Quale dei seguenti è un attributo dell'elemento HTML?

<div class="sidebar">Sidebar goes here!</div>

class è l'attributo. Gli attributi si trovano all'interno di un elemento HTML e di solito hanno (ma non necessariamente) un valore.

Domanda 5

Quanti attributi ha il seguente elemento HTML?

<input type="text" placeholder="username" name="username" />

L'elemento input riportato sopra ha tre attributi: type, placeholder e name.

Domanda 6

Nel seguente snippet HTML che mostra una relazione, qual è l'elemento principale?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> è un elemento principale perché contiene altri elementi.

Domanda 7

Quanti degli elementi nel seguente snippet HTML sono elementi secondari di un elemento principale?

Non conteggiare gli elementi di wrapping <body> o <html>.

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

Nello snippet sono presenti 4 elementi secondari, ovvero tutti gli elementi che hanno un elemento principale sopra, quindi tutto tranne l'elemento <div>: <h1>, <p>, <i>, <a>.

Domanda 8

Sebbene alcuni browser eseguano il rendering dello snippet HTML seguente correttamente, qual è il problema?

<img src=puppies.png width=400 />

I valori degli attributi devono essere racchiusi tra virgolette. <img /> è un tag di chiusura automatica e non ha attributi obbligatori. È possibile avere width senza height e viceversa.