Hypertext Markup Language

ovvero come ho imparato a non preoccuparmi e ad amare l’HTML

di Matteo Nicoletti per

Che cos’è l’HTML?

L’HyperText Markup Language (la cui traduzione letterale è “linguaggio a marcatori per ipertesti”) è un linguaggio di markup.

È la tecnologia principale utilizzata per scrivere i documenti ipertestuali che compongono il world wide web, cioè le pagine web.

Descrive la struttura logica di una pagina web (definita appunto dal markup) mentre la sua rappresentazione grafica viene gestita tramite gli stili CSS (Cascading Style Sheet).

Linguaggio di markup!?

<html>

  <head>
    <title>Pagina web di esempio</title>
    <link rel="stylesheet" href="assets/styles.css">
  </head>

  <body class="pagina">
    <h1>Titolo della pagina</h1>
    <p>
      Questo è il <strong>contenuto della <em>pagina</em></strong>.<br>
      Questo è un <a href="/" title="un link">link</a>.<br>
      E questa è un’immagine:<br>
      <img src="http://lorempixel.com/320/320/cats/" alt="foto di un gatto">
    </p>
  </body>

</html>

Un linguaggio di markup è un insieme di regole che descrivono i meccanismi di rappresentazione (strutturali, semantici e/o estetici) di un contenuto, utilizzabili su più supporti.

Nel caso dell’HTML il supporto è, in genere, un browser web.

Un nome per ogni cosa

<p>
  Questo è un <a href="/" title="un link">link</a> […]
  <img src="http://lorempixel.com/320/320/cats/" alt="foto di un gatto">
</p>

apertura del tag

chiusura  del tag

attributo

valore

questo è un self closing tag

(cioè non ha chiusura)

contenuto del tag, nei link si chiama anche anchor text

Come funziona in pratica

<p>
  Questo è il <strong>contenuto della <em>pagina</em></strong>.
</p>

Questo è il contenuto della pagina .

Il codice è circondato da un <p></p>, avete appena conosciuto il tag HTML che delimita un paragrafo.

All’interno di questo tag c'è del testo e altri tag: uno si occupa di rendere il testo grassetto e l’altro di renderlo corsivo.

In questo caso si parla di tag “nidificati” (nested, in inglese).

There is a tag for that

<p><img src="http://lorempixel.com/100/100/nature/"></p>

<ul>
  <li>questo è un elenco puntato</li>
  <li><em>testo corsivo</em></li>
  <li><strong>testo grassetto</strong></li>
  <li><a href="https://google.com" target="_blank">link a Google</a></li>
</ul>

  • questo è un elenco puntato
  • testo corsivo
  • testo grassetto
  • link a Google

esercitazione

✏️ edit HTML

Hypertext Markup Language (HTML)

By Matteo Nicoletti

Made with Slides.com

Hypertext Markup Language (HTML)

ovvero come ho imparato a non preoccuparmi e ad amare l’HTML - presentazione del 19/7/2017 alla B2Commerce

  • 413

More from Matteo Nicoletti