Desenvolupament web estàtic amb HTML + CSS
Conceptes¶

Sessió 3: HTML 5¶

Objectiu Sessió 3

L'objectiu d'aquesta 3a sessió és el HTML 5, que és l'estàndard en llenguatges de marques per a formatar pàgines web.

HTML 5 al complert¶

Recordem què és un element HTML: Tot allò que comença i acaba amb una etiqueta

<tagname>Contingut…</tagname>

Moltes etiquetes els cal un atribut per definir el seu ús.
Un atribut en HTML és una propietat que proporciona informació addicional sobre un element i es col·loca a la seva etiqueta d'apertura...

<tagname [atribut=valor, ...]>

Alguns atributs són específics de l'etiqueta, per exemple href, però en tenim alguns que són usables a totes les etiquetes
Per exemple:
id

<a id="link-text" href="www.google.com">text</a>

Atributs globals

https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes
https://www.w3schools.com/tags/ref_attributes.asp

L'objectiu principal és el de formatar contingut web usant la interfície d'un navegador.

Per aconseguir aquest objectiu tenim un conjunt d'etiquetes que estan a dins d'un fitxer amb extensió .html i és retornat com a resposta a una petició normalment HTTP GET.

Recordem que l'estàndard HTML5 és l'evolució de llenguatge de marques, fusionant les característiques del XHTML, on tindrem etiquetes amb els seus atributs i usarem bàsicament el CSS per a donar disseny a la interfície.

Llistat complert d'etiquetes¶

Ordenades alfabéticament:

https://www.w3schools.com/tags/default.asp
https://developer.mozilla.org/es/docs/Web/HTML/Reference

ordenades per categoria:

https://www.w3schools.com/tags/ref_byfunc.asp
https://developer.mozilla.org/es/docs/Web/HTML/Element
https://developer.mozilla.org/es/docs/Web/HTML/Content_categories

Tip

Depenent de l'objectiu a assolir en el format de disseny de la pàgina o lloc web, caldrà usar unes o altres etiquetes o elements per obtenir la interfície desitjada.

Tip

Caldrà diferenciar entre elements HTML per formatar i estils CSS per donar disseny

Tip

Més endavant es veurà com tenir present els temes de responsivitat, que serà ampliat el proper curs.

Agrupem-les:

Arrel principal¶

MDN →

Element	Descripció
`<html>`	L'element HTML `<html>` (o element HTML arrel ) representa l'arrel d'un document HTML. La resta d'elements baixen d'aquest element.
`<head>`	L'element HTML`<head>` proveeix informació general (metadades) sobre el document, incloent-hi el títol i els enllaços a scripts i fulls d'estils.
`<body>`	L'element `<body>` HTML representa el contingut d'un document HTML. Només hi pot haver un element `<body>` en un document.

Exemple Estructura HTML

Exemple:

exemple estructura bàsica
<!DOCTYPE html>
<html lang="ca">
  <head>     
    <meta charset="utf-8">
    <title>Pàgina d'Exemple</title>
  </head>
  <body>
    <h1>Benvingut a la meva pàgina web!</h1>
    <p>Aquesta és una pàgina d'exemple amb HTML bàsic. Aquí hi pots trobar text, enllaços i més.</p>   
  </body>
</html>

Metadades del document¶

MDN →

Les metadades contenen informació sobre la pàgina. Es defineixen a dins del <head> Això inclou informació sobre estils, scripts i dades que ajuden el programari ( search engines , browsers , etc.) a usar i generar la pàgina. Les metadades d'estils i scripts poden estar definides a la pàgina o estar enllaçades a un altre fitxer que conté la informació.

Element	Descripció
`<base>`	L'element HTML`<base>` especifica l'adreça URL base que s'utilitzarà per a totes les adreces URL relatives contingudes dins d'un document. Només hi pot haver un element `<base>` en un document.
`<link>`	L'element HTML`<link>` especifica la relació entre el document actual i un recurs extern. Els possibles usos d'aquest element inclouen la definició d'un marc relacional per a la navegació. Aquest element és més freqüentment usat per enllaçar fulls d'estils.
`<meta>`	Meta de "metainformation" - metainformació. Serveix per aportar informació sobre el document.
`<style>`	Estil. És l'element encarregat d'indicar la informació d'estil.
`<title>`	L'element HTML defineix el títol del document que apareix a la barra de títol o la pestanya d'una pàgina en un navegador . Només conté text; les etiquetes dins de l'element s'ignoren.`<title>`

Exemple Metadades HEAD

Exemple:

exemple metadades HEAD
<!DOCTYPE html>
<html lang="ca">
  <head>
    <title>Llista de navegadors</title>      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Exemple de metas">
    <meta name="keywords" content="HTML, HEAD, META">
    <meta name="author" content="Un alumne">
  </head>
  <body>
    <h1>Benvingut a la meva pàgina web!</h1>
    <p>Aquesta és una pàgina d'exemple amb HTML bàsic. Aquí hi pots trobar text, enllaços i més.</p>   
  </body>
</html>

Formatar text¶

MDN →

Utilitzeu la semàntica del text en línia HTML per definir el significat, estructura, o l'estil d'una paraula, una línia o qualsevol peça arbitrària de text.

Element	Descripció
`<a>`	L'Element HTMLAnchor `<a>` crea un enllaç a altres pàgines d'internet, fitxers o ubicacions dins de la mateixa pàgina, adreces de correu o qualsevol altre URL.
`<abbr>`	L'element HTML`<abbr>` ( o Element d'Abreviació HTML ) representa una abreujament o acrònim; l'atribut opcional titlepot ampliar o descriure l'abreviatura. Si hi és present, l'atribut titleha de contenir la descripció completa i res més.
`<b>`	b de bold=negreta.
`<bdi>`	L'element HTML`<bdi>` (o element d'aïllament Bi-Direccional) aïlla un tros de text perquè pugui ser formatat amb una adreça diferent del text que hi ha fora.
`<bdo>`	bdo Bi-Directional Overriding=Anul·lació de bidireccionalitat.
`<br>`	L'element HTML line break `<br>` produeix un salt de línia al text (retorn de carro). És útil per escriure un poema o una adreça, on la divisió de les línies és significant.
`<cite>`	Marca una referència a una font, o a l'autor d'un text citat..
`<code>`	Etiqueta utilitzada per marcar el codi d'un programa.
`<data>`	L'Element HTML`<data>` vincula un contingut donat amb una traducció llegible per una màquina. Si el contingut està relacionat amb time-o date-, cal utilitzar l'element `<time>`.
`<dfn>`	Serveix per marcar el terme que es vol definir
`<em>`	L'element HTML`<em>` és adequat per marcar amb èmfasi les parts importants d'un text. L'element `<em>`pot ser niat, amb cada nivell d'anidament indicant un major grau d'èmfasi.
`<i>`	Per mostrar el text en cursiva o itàlica en HTML, es fa servir l'element o l'element .
`<kbd>`	Aquest element es fa servir per indicar la informació que un usuari ha d'escriure o introduir, com ara una combinació de tecles o text
`<mark>`	L'Element HTML Mark`<mark>` representa un text marcat o ressaltat com a referència o anotació, per la seva rellevància o importància en un context particular.
`<q>`	L'element HTML`<q>` indica que el text adjunt és una cita curta en línia. La majoria dels navegadors moderns implementen això envoltant el text entre cometes. Aquest element està destinat a cites breus que no requereixen salts de paràgraf; per a cites de bloc independent, utilitza l'element `<blockquote>`.
`<rp>`	S'utilitza per proporcionar parèntesis alternatius per a navegadors que no admeten la visualització d'anotacions Ruby mitjançant l'element `<ruby>`. Un element `<rp>`ha d'incloure cadascun dels parèntesis d'obertura i tancament que embolcallen l'element `<rt>`que conté el text de l'anotació.
`<rt>`	Especifica el component de text ruby d'una anotació ruby, que es fa servir per proporcionar informació de pronunciació, traducció o transliteració per a la tipografia de l'Àsia oriental. L'element `<rt>`sempre ha d'estar contingut dins d'un element `<ruby>`.
`<ruby>`	Representa petites anotacions que es mostren a sobre, a sota o al costat del text base, generalment utilitzades per mostrar la pronunciació dels caràcters de l'Àsia oriental. També es pot fer servir per anotar altres tipus de text, però aquest ús és menys comú.
`<s>`	Per mostrar el text tatxat amb una línia horitzontal en HTML, s'utilitza l'element ~~o l'element .~~
`<samp>`	L'element HTML Sample ( `<samp>`) es fa servir per incloure text en línia que representa una mostra (o cita) de la sortida d'un programa d'ordinador. El contingut d'aquesta etiqueta és generalment renderitzat usant la tipografia monoespaiada per defecte del navegador.
`<small>`	L'element HTML `<small>` fa la mida del text una talla més petita (per exemple, de llarg a mitjà, o de petit a extra petit) que la mida mínima de font del navegador. A HTML5, aquest element és reutilitzat per representar comentaris laterals i lletra petita, incloent drets d'autor i text legal, independentment del seu estil de presentació.
`<span>`	abastar. És un contenidor en línia. Serveix per aplicar estil al text o agrupar elements en línia.
`<strong>`	L'element strong és l'adequat per marcar amb especial èmfasi les parts més importants d'un text.
`<sub>`	L'element HTML `<sub>` defineix un fragment de text que cal mostrar, per raons tipogràfiques, més baix, i generalment més petit, que el tram principal del text, és a dir, en subíndex.
`<sup>`	L'element HTML `<sup>` defineix un fragment de text que cal mostrar, per raons tipogràfiques, més alt, i generalment més petit, que el tram principal del text, és a dir, en superíndex.
`<time>`	L'element HTML`<time>` representa un període de temps específic. Podeu incloure l'atribut datetimeper convertir les dates en un format intern llegible per un ordinador, permetent millors resultats en els motors de cerca o característiques personalitzades com a recordatoris.
`<u>`	Per mostrar el text subratllat.
`<var>`	Per marcar variables de programes i elements similars.
`<wbr>`	L'element HTML word break opportunity `<wbr>` representa una posició dins del text on l'explorador pot opcionalment saltar una línia, encara que les seves regles de salt de línia d'una altra manera no crearien un salt en aquesta posició. En pàgines codificades a UTF-8, `<wbr>` es comporta com el punt de codi U+200B ZERO-WIDTH SPACE. En particular es comporta com un punt de codi unicode bidi BN, significant això que no té efecte en ordenament bidi: `<div dir=rtl>`123,`<wbr>`456`</div>`mostra, quan no es trenqui en dues línies, 123, 456 i no 456, 123.
`<del>`	L'element del (deleted-borrat) marca les parts d'un text o document que han estat suprimides o substituïdes.
`<ins>`	L'element ins (inserir) marca les parts d'un text que han estat afegides al document.

Exemple Formatar Text

Exemple:

exemple Formatar Text
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple HTML amb etiquetes</title>
  </head>
  <body>
    <p>Aquesta és una <b>etiqueta en negreta</b> i aquí una <strong>etiqueta de text destacat</strong>.</p>
    <p>Aquí tens una <i>etiqueta en cursiva</i> i una <em>etiqueta de text emfatitzat</em>.</p>
    <p>Pots consultar el meu perfil a <a href="https://exemple.com">aquesta pàgina web</a>.</p>
    <p>Aquest és un exemple de cita curta: <q>Caminant es fa camí</q>.</p>
    <p>Una línia nova <br> Després del salt de línia.</p>
    <p>Citant una font amb <cite>cita textual</cite>.</p>
    <p>Exemple de codi: <code>console.log("Hola món!");</code></p>
    <p>Amb <data value="12345">valor de dades</data> integrat.</p>
    <p>El terme definit és <dfn>HTML</dfn>.</p>
    <p>Aquí tens un <kbd>Ctrl + C</kbd> per copiar el text.</p>
    <p>Destaca amb <mark>text ressaltat</mark>.</p>
    <p>Un exemple de variable matemàtica: <var>x</var> + <var>y</var> = <var>z</var>.</p>
    <p>Text <u>subratllat</u> i <s>text tatxat</s>.</p>
    <p>Resultat de mostres de codi: <samp>Output correcte!</samp></p>
    <p><small>Text petit per a notes a peu de pàgina.</small></p>
    <p>Aquest és un text dins d'un <span style="color:blue">span personalitzat</span>.</p>
    <p>Un text amb <sup>superíndex</sup> i <sub>subíndex</sub>.</p>
    <p>Aquest és un exemple de temps: <time datetime="2023-10-01">1 d'octubre, 2023</time>.</p>
    <p>Text afegit amb <ins>ins</ins> i text eliminat amb <del>del</del>.</p>
  </body>
</html>

Contingut Text¶

MDN →

Utilitza els elements HTML de contingut del text per organitzar blocs o seccions de contingut col·locats entre les etiquetes d'obertura <body>i tancament. És important per a l'accessibilitat i el SEO , que aquests elements s'identifiquin amb l'objectiu o l'estructura d'aquest contingut.

Element	Descripció
`<blockquote>`	Cita en bloc. Crea cites en bloc, marca les cites d'altres autors o documents.
`<dd>`	L'element HTML `<dd>` proporciona detalls sobre o la definició d'un terme precedent (`<dt>`) en una llista de descripcions (`<dl>`).
`<div>`	L'element HTML `<div>` és el contenidor genèric per al contingut. No té efecte en el contingut o en el disseny fins que se li aplica un estil de alguna manera utilitzant CSS (per exemple, se li aplica un estil directament o se li aplica algun tipus de model de disseny com Flexbox al seu element principal).
`<dl>`	L'element HTML `<dl>` representa una llista descriptiva, incloent termes (`<dt>`) i descripcions (`<dd>`).
`<dt>`	L'element HTML `<dt>` especifica un terme en una llista de descripcions (`<dl>`), usualment seguit per `<dd>`.
`<figcaption>`	L'element HTML `<figcaption>` representa un subtítol o llegenda associat al contingut de l'element `<figure>`, i és opcional.
`<figure>`	L'element HTML `<figure>` representa contingut independent, com imatges o diagrames, amb un títol associat.
`<hr>`	L'element HTML `<hr>` representa un canvi de tema entre paràgrafs (per exemple, un canvi d'escena en una història, un canvi de tema en una secció). En versions anteriors d'HTML, representava una línia horitzontal. Encara pot ser representada com una línia horitzontal en els navegadors visuals, però ara és definida en termes semàntics i no tant en termes representatius; per tant, per dibuixar una línia horitzontal s'hauria d'utilitzar el CSS apropiat.
`<li>`	L'element li (del anglès list item o element de llista) declara cadascun dels elements d'una llista.
`<menu>`	L'element HTML `<menu>` es descriu en la especificació HTML com una alternativa semàntica a `<ul>`, però els navegadors el tracten (i el presenten a través de l'arbre d'accessibilitat) com a no diferent de `<ul>`. Representa una llista desordenada d'elements (que estan representats per elements `<li>`).
`<ol>`	L'element ol permet definir llistes o vinyetes ordenades ("Ordered List"), ja sigui amb numeració o alfabèticament..
`<p>`	L'element p (paràgraf) és l'apropiat per distribuir el text en paràgrafs.
`<pre>`	L'element HTML `<pre>` (o Text HTML Preformatat) representa text preformatat. El text en aquest element típicament es mostra en una font fixa, no proporcional, exactament com es mostra al fitxer. Els espais dins d'aquest element també es mostren tal com estan escrits.
`<ul>`	De "unordered list" - llista no ordenada. Crea una llista no ordenada.

Exemple 1 Contingut Text

Exemple:

exemple 1 Contingut Text
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'ús de l'etiqueta &lt;figure&gt;</title>
  </head>
  <body>
    <h1>Exemple de &lt;figure&gt; amb imatge</h1>

    <figure>
      <img src="../../img/html/gokuDaima.jpg" alt="Goku :)" width="200">
      <figcaption>Imatge de goku de petit a la serie Bola de Drac</figcaption>
    </figure>

    <p>Aquest és un exemple bàsic d'una imatge dins d'un <code>&lt;figure&gt;</code> amb una llegenda que la descriu.</p>

  </body>
</html>

Explicació:

L'etiqueta <figure> agrupa contingut independent, com imatges, gràfics o diagrames.
L'etiqueta <img> s'utilitza per mostrar la imatge.
L'etiqueta <figcaption> proporciona una llegenda que descriu el contingut de la figura.

Aquest exemple mostra una imatge amb una descripció que l'acompanya, tot organitzat dins d'una figura per mantenir una estructura semàntica clara en el codi HTML.

Exemple 2 Contingut Text

Exemple:

exemple 2 Contingut Text
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de llista no ordenada amb dos nivells</title>
  </head>
  <body>
    <p>Aquest és un text inicial abans de la línia horitzontal.</p>

    <hr>

    <h2>Llista no ordenada amb dos nivells</h2>

    <ul>
      <li>Primer element</li>
      <li>Segon element
        <ol>
          <li>Subelement 1</li>
          <li>Subelement 2</li>
        </ol>
      </li>
      <li>Tercer element</li>
    </ul>

  </body>
</html>

Explicació:

L'etiqueta <hr> crea una línia horitzontal que separa el text anterior de la resta del contingut.
L'etiqueta <ul> defineix una llista no ordenada (amb punts).
Cada element de la llista es defineix amb <li>.
Per crear una llista de segon nivell (una subllista), simplement s'anida una altra etiqueta <ul> dins d'un element <li>.

Aquest codi mostra una llista de tres elements, on el segon element conté una subllista amb dos subelements.

Seccions de contingut¶

MDN →

Els elements de seccionament del contingut us permeten organitzar els continguts del document en parts lògiques. Fes servir els elements de seccionat per crear una descripció àmplia dels continguts de la teva pàgina, incloent la capçalera i peu de pàgina i elements per identificar seccions.

Element	Descripció
`<address>`	L'element HTML `<address>` aporta informació de contacte per al seu `<article>` més proper o ancestre `<body>`; en aquest últim cas, s'aplica a tot el document.
`<article>`	L'element HTML `<article>` representa una composició autocontinguda dins d'un document o aplicació, com articles de revista, missatges en fòrums, entrades de blocs o qualsevol altre element de contingut independent.
`<aside>`	L'element HTML `<aside>` representa contingut indirectament relacionat amb el contingut principal, com barres laterals amb definicions, publicitat, biografies de l'autor o informació addicional.
`<footer>`	L'element HTML `<footer>` representa un peu de pàgina per al contingut de la secció més propera o l'element arrel de secció, com informació d'autor, drets d'autor o enllaços a documents relacionats.
`<header>`	L'element HTML `<header>` representa un grup d'ajudes introductòries o de navegació, com logotips, capçaleres, formularis de cerca o noms d'autor.
`<h1>`, `<h2>`,`<h3>`, `<h4>`, `<h5>`, `<h6>`	Els elements de capçalera implementen sis nivells de capçalera del document, amb `<h1>` com el més important i `<h6>` com el menys important. Serveixen per descriure breument el tema de la secció que presenten.
`<main>`	L'element HTML `<main>` representa el contingut principal del document dins del `<body>`, incloent contingut relacionat directament amb el tema central del document o aplicació. Exclou elements comuns com barres laterals o drets d'autor repetits.
`<nav>`	L'element HTML `<nav>` representa una secció de la pàgina dedicada a proporcionar enllaços de navegació, com menús, taules de contingut o índexs.
`<section>`	L'element HTML `<section>` representa una secció genèrica d'un document, ajudant a estructurar-lo semànticament, com una part d'un esquema o índex de contingut. Aquest element facilita la navegació en documents per part d'agents usuaris, com lectors de pantalla.

Exemple Contingut

Exemple:

exemple Contingut
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple HTML</title>
  </head>
  <body>

    <!-- Header -->
    <header>
      <h1>Títol del lloc web</h1>
      <nav>
        <ul>
          <li><a href="#section1">Secció 1</a></li>
          <li><a href="#section2">Secció 2</a></li>
          <li><a href="#section3">Secció 3</a></li>
        </ul>
      </nav>
    </header>

    <!-- Main content -->
    <main>
      <article>
        <h2>Títol de l'article</h2>
        <section>
          <h3>Introducció</h3>
          <p>Aquesta és una introducció a l'article.</p>
        </section>
        <section id="section1">
          <h4>Secció 1</h4>
          <p>Contingut de la primera secció.</p>
        </section>
        <section id="section2">
          <h5>Secció 2</h5>
          <p>Contingut de la segona secció.</p>
        </section>
        <section id="section3">
          <h6>Secció 3</h6>
          <p>Contingut de la tercera secció.</p>
        </section>
      </article>

      <!-- Aside -->
      <aside>
        <h3>Informació relacionada</h3>
        <p>Aquesta és una informació complementària a l'article.</p>
      </aside>
    </main>

    <!-- Footer with contact info -->
    <footer>
      <address>
        Contacte: <a href="mailto:info@example.com">info@example.com</a>
      </address>
    </footer>

  </body>
</html>

Explicació:

L'<header> conté el títol principal del lloc web i una barra de navegació (<nav>).
El <main> inclou un article (<article>) amb diverses seccions (<section>), cada una amb encapçalaments jeràrquics (<h2>, <h3>, etc.).
Un <aside> proporciona informació relacionada al costat de l'article.
El <footer> conté una adreça de contacte, utilitzant l'element <address>.

Imatges i multimèdia¶

MDN →

HTML suporta diversos recursos multimèdia com a imatges, àudio, i vídeo.

Element	Descripció
`<area>`	àrea de àrea=àrea.
`<audio>`	L'element `<audio>` s'utilitza per inserir contingut d'àudio en un document HTML o XHTML. Aquest element es va introduir en HTML5.
`<img>`	L'element d'imatge HTML `<img>` representa una imatge dins del document.
`<map>`	L'element HTML s'utilitza per definir un mapa d'imatge, que permet crear àrees clicables dins d'una imatge. Aquestes àrees poden enllaçar a diferents destinacions, de manera que els usuaris poden fer clic en diferents parts de la imatge per accedir a continguts específics.
`<track>`	L'element HTML `<track>` s'utilitza dins dels elements multimèdia com `<audio>` i `<video>` per especificar pistes de text cronometrades, com subtítols. Les pistes es formaten en WebVTT.
`<video>`	L'element `<video>` s'utilitza per incrustar vídeos en un document HTML o XHTML.

Exemple Imatges i Multimèdia

Exemple:

exemple Imatges i Multimèdia
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'ús de l'etiqueta &lt;map&gt;</title>
  </head>
  <body>
    <h1>Imatge interactiva amb &lt;map&gt;</h1>

    <p>Aquesta imatge té zones clicables amb àrees definides mitjançant l'etiqueta <code>&lt;map&gt;</code>:</p>

    <img src="../../img/html/mapa-exemple.png" alt="Mapa amb zones interactives" usemap="#mapa" style="width: 100%;">

    <map name="mapa">
      <area shape="rect" coords="34,44,270,350" alt="Zona 1" href="https://exemple1.com">
      <area shape="circle" coords="400,250,50" alt="Zona 2" href="https://exemple2.com">
      <area shape="poly" coords="500,100,600,200,550,350,450,300" alt="Zona 3" href="https://exemple3.com">
    </map>

    <p>Aquest és un exemple d'una imatge amb tres àrees interactives: un rectangle, un cercle i un polígon.</p>

  </body>
</html>

Explicació:

L'etiqueta <img> carrega la imatge i l'atribut usemap="#mapa" associa la imatge amb el mapa d'àrees definides.
L'etiqueta <map> crea un conjunt de zones interactives (clicables) dins de la imatge.
L'etiqueta <area> defineix cada zona interactiva. Els atributs importants són:
shape: defineix la forma de l'àrea (pot ser rect per rectangle, circle per cercle, o poly per polígon).
coords: defineix les coordenades de la zona.
href: especifica el link on es redirigeix quan es fa clic a l'àrea.
alt: text alternatiu per descriure l'àrea.

En aquest exemple, la imatge té tres zones clicables: un rectangle, un cercle i un polígon, cadascun redirigeix a un enllaç diferent.

Contingut inscrustat¶

MDN →

A més dels continguts multimèdia habituals, HTML pot incloure una altra varietat de continguts, encara que no sempre és fàcil interactuar-hi.

Element	Descripció
`<embed>`	L'element HTML `<embed>` representa un punt d'integració per a una aplicació externa o contingut interactiu, com un connector.
`<iframe>`	L'element HTML `<iframe>` (d'inline frame) permet incrustar una altra pàgina HTML dins de la pàgina actual.
`<object>`	L'element HTML `<object>` representa un recurs extern que pot ser tractat com una imatge, un context de navegació imbricat, o un recurs manejat per un plugin.
`<picture>`	L'element HTML `<picture>` és un contenidor que especifica múltiples elements `<source>` i un element `<img>` per servir diferents versions d'una imatge segons els dispositius. El fitxer especificat en l'atribut `src` de `<img>` s'utilitza si no hi ha coincidències.
`<portal>`	Habilita la incrustació d'una altra pàgina HTML a la pàgina actual, permetent una navegació més fluida a noves pàgines.
`<source>`	L'element HTML `<source>` especifica múltiples recursos de mitjans per als elements `<picture>`, `<audio>`, o `<video>`. És un element buit que serveix per oferir el mateix contingut multimèdia en diversos formats.

Exemple Contingut Incrustat

Exemple:

exemple Contingut Incrustat
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" cont  ent="width=device-width, initial-scale=1.0">
    <title>Exemple d'ús de l'etiqueta &lt;iframe&gt;</title>
  </head>
  <body>
    <h1>Exemple d'incrustació d'una pàgina amb &lt;iframe&gt;</h1>

    <p>A continuació tens una pàgina web incrustada dins d'aquest document utilitzant un <code>&lt;iframe&gt;</code>:</p>

    <iframe src="https://www.wikipedia.org" width="100%" height="460" title="Wikipedia"></iframe>

    <p>Aquest és un exemple d'una pàgina web incrustada des de Wikipedia dins d'un iframe.</p>

  </body>
</html>

Explicació:

L'etiqueta <iframe> permet incrustar una altra pàgina web dins de la pàgina HTML.
Atributs importants:
src: especifica l'URL de la pàgina web que es vol mostrar dins de l'iframe.
width i height: defineixen les dimensions de l'iframe en píxels.
title: proporciona una descripció breu de l'iframe per motius d'accessibilitat.

Aquest exemple incrusta la pàgina principal de Wikipedia en un quadre de 600x400 píxels dins del document.

SVG i MathML¶

MDN →

Podeu incrustar contingut SVG i MathML directament en documents HTML, usant els elements <svg>i { {MathMLElement("math")}}.

Element	Descripció
`<svg>`	L'element `<svg>` és un contenidor que defineix un nou sistema de coordenades i viewport. S'utilitza per crear documents SVG o incrustar fragments SVG dins d'un document HTML o SVG.
`<math>`	L'element `<math>` és l'element superior de MathML. Cada instància de MathML vàlida ha d'estar envoltada per etiquetes `<math>`, però no es poden niar elements `<math>` dins d'altres.

Exemple SVG i MathML

Exemple:

exemple SVG i MathML
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'ús de l'etiqueta &lt;math&gt;</title>
  </head>
  <body>
    <h1>Exemple d'una fórmula matemàtica amb &lt;math&gt;</h1>

    <p>A continuació es mostra una equació quadràtica dins d'una etiqueta <code>&lt;math&gt;</code>:</p>

    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <mi>x</mi>
        <mo>=</mo>
        <mfrac>
          <mrow>
            <mo>&#x2212;</mo>
            <mi>b</mi>
            <mo>&#xB1;</mo>
            <msqrt>
              <mrow>
                <msup>
                  <mi>b</mi>
                  <mn>2</mn>
                </msup>
                <mo>&#x2212;</mo>
                <mn>4</mn>
                <mo>&#x2062;</mo>
                <mi>a</mi>
                <mo>&#x2062;</mo>
                <mi>c</mi>
              </mrow>
            </msqrt>
          </mrow>
          <mrow>
            <mn>2</mn>
            <mo>&#x2062;</mo>
            <mi>a</mi>
          </mrow>
        </mfrac>
      </mrow>
    </math>

    <p>Aquesta és la fórmula de resolució d'una equació quadràtica.</p>

  </body>
</html>

Explicació:

L'etiqueta <math> s'utilitza per escriure notació matemàtica en HTML utilitzant MathML (Mathematical Markup Language).
Atributs i etiquetes:
<mi>: variable matemàtica (com ara x, a, b).
<mo>: operador matemàtic (com ara +, -, =, √).
<mfrac>: fracció.
<msup>: superíndex (per a potències).
<msqrt>: arrel quadrada.
<mn>: nombre matemàtic.

Aquest exemple mostra la fórmula per resoldre una equació quadràtica:

Scripting¶

MDN →

Per tal de crear contingut dinàmic i aplicacions web, HTML suporta l'ús de llenguatges de scripting, el més prominent és JavaScript. Certs elements suporten aquesta capacitat.

Element	Descripció
`<canvas>`	L'element HTML `<canvas>` es pot utilitzar per dibuixar gràfics mitjançant seqüències d'ordres, normalment JavaScript. Es pot utilitzar per crear gràfics, composicions de fotos o animacions.
`<noscript>`	Aquest element es mostra quan el navegador no admet JavaScript o si aquest està desactivat.
`<script>`	L'element `<script>` s'utilitza per incrustar codi executable, generalment JavaScript, però també pot utilitzar altres llenguatges com GLSL de WebGL o JSON.

Exemple Scripting

Exemple:

exemple Scripting
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'ús de l'etiqueta &lt;script&gt;</title>
  </head>
  <body>
    <h1>Exemple d'un petit script amb &lt;script&gt;</h1>

    <p>Fes clic al botó per veure un missatge:</p>

    <button onclick="mostrarMissatge()">Clica'm</button>

    <script>
      function mostrarMissatge() {
        alert("Hola! Aquest és un missatge de prova.");
      }
    </script>

  </body>
</html>

Explicació:

L'etiqueta <script> conté codi JavaScript que s'executa en el navegador.
La funció mostrarMissatge() utilitza l'alerta del navegador (alert()) per mostrar un missatge quan l'usuari fa clic al botó.
L'atribut onclick del botó especifica que, quan es faci clic, es crida la funció mostrarMissatge().

Quan facis clic al botó, apareixerà un missatge emergent amb el text: "Hola! Aquest és un missatge de prova."

Taules¶

MDN →

Aquests elements són usats per crear i manejar dades tabulades.

Element	Descripció
`<caption>`	Utilitzat per afegir un títol o descripció a una taula.
`<col>`	Defineix les característiques d'una o més columnes dins d'una taula.
`<colgroup>`	Agrupa un o més elements `<col>` dins d'una taula.
`<table>`	L'element de taula HTML (`<table>`) representa dades en dues o més dimensions, organitzades en files i columnes.
`<tbody>`	L'element `<tbody>` encapsula un conjunt de files d'una taula (`<tr>`) que formen el cos de la taula.
`<td>`	L'element cel·la de taula HTML (`<td>`) defineix una cel·la que conté dades dins d'una fila d'una taula.
`<tfoot>`	L'element `<tfoot>` defineix un conjunt de files que resumeixen les columnes d'una taula.
`<th>`	L'element `<th>` defineix una cel·la com a capçalera d'un grup de cel·les en una taula, amb atributs com `scope` i `headers` per definir el grup.
`<thead>`	L'element `<thead>` defineix un conjunt de files com la capçalera de les columnes d'una taula.
`<tr>`	L'element fila de taula HTML (`<tr>`) defineix una fila de cel·les dins d'una taula, que pot contenir elements `<td>` o `<th>`.

Exemple Taules

Exemple:

exemple Taules
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'ús de l'etiqueta &lt;table&gt;</title>
  </head>
  <body>
    <h1>Exemple de taula amb colspan i rowspan</h1>

    <table border="1" width="600">
      <tr>
        <th colspan="2">Capçalera amb colspan (2 columnes)</th>
        <th>Columna 3</th>
      </tr>
      <tr>
        <td rowspan="2">Fila 1, Columna 1 (amb rowspan)</td>
        <td>Fila 1, Columna 2</td>
        <td>Fila 1, Columna 3</td>
      </tr>
      <tr>
        <td>Fila 2, Columna 2</td>
        <td>Fila 2, Columna 3</td>
      </tr>
      <tr>
        <td>Fila 3, Columna 1</td>
        <td colspan="2">Fila 3, Columna 2 (amb colspan de 2 columnes)</td>
      </tr>
    </table>

  </body>
</html>

Explicació:

L'etiqueta <table> crea la taula.
L'atribut border="1" dibuixa un contorn al voltant de les cel·les, i width="600" especifica l'amplada de la taula en píxels.
L'etiqueta <th> defineix cel·les de capçalera, i <td> defineix cel·les de dades.
L'atribut colspan s'utilitza per fusionar cel·les horitzontalment (combinant columnes).
L'atribut rowspan s'utilitza per fusionar cel·les verticalment (combinant files).

En aquest exemple:

La primera fila té una capçalera que ocupa dues columnes gràcies a colspan="2".
La primera columna de la primera i segona fila es combina verticalment amb rowspan="2".
La tercera fila té una cel·la que ocupa dues columnes amb colspan="2".

Formularis¶

MDN →

HTML proveeix un nombre d'elements que es poden utilitzar conjuntament per crear formularis els quals l'usuari pot completar i enviar al lloc web oa una aplicació. Hi ha una gran quantitat d'informació sobre això disponible a l'HTML forms guide .

Element	Descripció
`<button>`	L'element HTML `<button>` crea un botó interactiu.
`<datalist>`	L'element HTML `<datalist>` conté un conjunt d'elements `<option>` que representen els valors disponibles per a altres controls d'entrada.
`<fieldset>`	S'utilitza per agrupar diversos controls dins d'un formulari.
`<form>`	L'element HTML `<form>` representa una secció d'un document que conté controls interactius per permetre a un usuari enviar informació a un servidor web.
`<input>`	L'element HTML `<input>` crea controls interactius per formularis web per rebre dades de l'usuari. Pot tenir molts tipus i atributs diferents.
`<label>`	L'element HTML `<label>` representa una etiqueta per a un control d'entrada, associat mitjançant l'atribut `for` o contenint el control dins de l'etiqueta.
`<legend>`	Utilitzat per proporcionar un títol o descripció a un `<fieldset>`.
`<meter>`	Representa un valor escalar dins d'un rang conegut o un valor fraccionari, com per a qualificacions o mesures.
`<optgroup>`	Agrupa opcions dins d'un element `<select>`.
`<option>`	L'element HTML `<option>` representa una opció dins d'un menú desplegable, creat amb elements `<select>`, `<optgroup>`, o `<datalist>`.
`<output>`	Element contenidor per mostrar els resultats d'un càlcul o una acció de l'usuari dins d'una pàgina web.
`<progress>`	L'element `<progress>` visualitza el progrés d'una tasca, apareixent com una barra de progrés que varia segons el navegador del client.
`<select>`	L'element HTML `<select>` crea un menú d'opcions desplegables amb elements `<option>`, i pot ser agrupat per elements `<optgroup>`.
`<textarea>`	L'element HTML `<textarea>` proporciona un camp d'entrada de text multilínia, sense format.

Exemple Formularis

Exemple:

exemple Formularis
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulari de Login</title>
  </head>
  <body>
    <h1>Formulari de Login</h1>

    <form action="/processa-login" method="post">
      <label for="usuari">Nom d'usuari:</label><br>
      <input type="text" id="usuari" name="usuari" required><br><br>

      <label for="contrasenya">Contrasenya:</label><br>
      <input type="password" id="contrasenya" name="contrasenya" required><br><br>

      <input type="submit" value="Iniciar sessió">
    </form>

  </body>
</html>

Explicació:

L'etiqueta <form> crea el formulari i té els atributs:
action: especifica la URL on s'enviarà la informació del formulari (en aquest cas, /processa-login).
method: defineix el mètode d'enviament, en aquest cas post (per enviar dades de manera segura).
Les etiquetes <label> proporcionen una etiqueta descriptiva per als camps.
Els camps d'entrada es creen amb l'etiqueta <input>:
type="text" per al nom d'usuari.
type="password" per al camp de contrasenya, que oculta els caràcters mentre es teclegen.
required obliga que els camps es completin abans de poder enviar el formulari.
El botó d'enviament s'especifica amb type="submit".

Aquest és un formulari bàsic de login amb camps per al nom d'usuari i la contrasenya.

Entitats¶

Són caràcters que es podrien confondre amb elements d'etiquetes, per exemple < o >

Si volem mostrar correctament el símbol < (menor que) usarem <

Això és el que anomenem entitat.

La sintaxi és

&entity_name;

i tenim la versió número:

&#entity_number;

Per exemple volem escriure l'expressió

3 < 4

seria entitat HTML

3 < 4

Un altre exemple són els accents:

à

seria entitat HTML

à

Tip

Normalment a causa d'una mala codificació els accents es visualitzen amb un rombe negre i interrogant quan el navegador no ho sap interpretar.

error UTF8

Això passa per haver escrit al text un caràcter que no ha referenciat o codificat bé!

Per exemple quan es mostra: cami error UTF8

S'ha intentat desar: camió
I hauriem d'haver desat: camiò

Tip

D'aquesta manera ens assegurem que la codificació dels caràcters del text que volem mostrar s'interpreten correctament des de l'origen fins al destí.

Info

https://www.w3schools.com/html/html_entities.asp
https://developer.mozilla.org/es/docs/Glossary/Entity
https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

Validem¶

Un aspecte important per saber si el codi web que estem creant és formalment correcte, seria usar un validador. De fet la 1a etiqueta que s'usa <! doctype html>, ja ens indica quines són les etiquetes vàlides a usar, però, són realment vàlides les que usem?
Doncs, això ho podem validar a:

Validador

https://validator.w3.org/

Exemples¶

Exemple 1

Exemple 1: Organitzar una llista d'enllaços a navegadors, fer-ho amb etiquetes aniuades.

p1-s3-ex1.html
<!doctype html>

<html lang="ca">
    <head>`
        <title>Llista de navegadors</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="description" content="Llista de navegadors">
        <meta name="keywords" content="HTML, HEAD, META">
        <meta name="author" content="Carles Mellado Bosch">
    </head>

    <body>
        <h1>Llista de navegadors</h1>
        <p>
            Aquí trobareu una llista de navegadors web:
        </p>
        <ul>
            <li><a href="https://www.google.com/intl/ca/chrome/"><img src='Google_Chrome_icon.png' width=16 height=16 > Google Chrome </a></li>
            <li><a href="https://www.mozilla.org/ca/firefox/new/"><img src='Mozilla_Firefox_icon.png' width=16 height=16 > Mozilla Firefox</a></li>
            <li><a href="https://www.microsoft.com/es-es/edge?form=MA13FJ"><img src='Microsoft_Edge_icon.png' width=16 height=16 > Microsoft Edge</a></li>
        </ul>
    </body>
</html>

p1-s3-ex1.html p1-s3-ex1.html :fontawesome-solid-download:

Exemple 2

Exemple 2:

Ara farem una maquetació de text Lorem Ipsum.

Per anar ubicant blocs de continguts podem usar les etiquetes <DIV> o etiquetes semàntiques <ARTICLE>

p1-s3-ex2.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Exemple 2</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet"
      type="text/css" />
    <link rel="stylesheet" href="style.css" />

  </head>

  <body>
    <!-- Aquí comença l'encapsulat principal que es mantindrà en totes les pàgines del lloc web -->

    <header>
      <h1>Encapçalament</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Inici</a></li>
        <li><a href="#">El nostre equip</a></li>
        <li><a href="#">Projectes</a></li>
        <li><a href="#">Contacte</a></li>
      </ul>

      <!-- Un formulari de cerca al lloc web. -->

      <form>
        <input type="search" name="q" placeholder="Cercar" />
        <input type="submit" value="Som-hi!" />
      </form>
    </nav>

    <!-- Aquí està el contingut principal de la nostra pàgina -->
    <main>
      <!-- Conté un article -->
      <article>
        <h2>Títol de l'article</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
          congue enim, ut porta lorem lacinia consectetur.
        </p>

        <h3>Subsecció primera</h3>

        <p>
          Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
          Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
        </p>

        <p>
          Pelientesque auctor nisi id magna consequat sagittis. Curabitur
          dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
          Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
        </p>

        <h3>Subsecció segona</h3>

        <p>
          Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
          soclis natoque penatibus et manis dis parturient montes, nascetur
          ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
          facilisis semper ac in est.
        </p>

        <p>
          Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
          tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
          ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
          diam iaculis velit, is fringille sem nunc vet mi.
        </p>
      </article>

      <!-- altre contingut relacionat -->
      <aside>
        <h2>Relacionat</h2>

        <ul>
          <li><a href="#">Oh, m'agrada estar al costat del mar</a></li>
          <li><a href="#">Oh, m'agrada estar al costat del mar</a></li>
          <li><a href="#">Encara que sigui al nord d'Anglaterra</a></li>
          <li><a href="#">Mai deixarà de ploure</a></li>
          <li><a href="#">Oh, bé...</a></li>
        </ul>
      </aside>
    </main>

    <!-- Y aquí está nuestro pie de página principal que se utiliza en todas las páginas de nuestro sitio web -->

    <footer>
      <p>©Copyright 2050 de ningú. Tots els drets concedits.</p>
    </footer>
  </body>
</html>

p1-s3-ex2.html p1-s3-ex2.html :fontawesome-solid-download:

Fixeu-vos com canvia fen l'aplicació d'un arxiu CSS arbritari. Ho veurem més endavant.

p1-s3-ex2-css.html p1-s3-ex2-css.html :fontawesome-solid-download:

Info

Hi ha moltes etiquetes HTML amb diversitat de funcionalitats en formatar el contingut Web. Caldrà mica en mica anar adquirint habilitats en la utilització de les mateixes, conjuntament amb els estils CSS.

Podem veure algunes habilitats a aprendre:

Amb diverses possibilitats de testejar codi online.

Desenvolupament web estàtic amb HTML + CSS Conceptes¶

Sessió 3: HTML 5¶

HTML 5 al complert¶

Llistat complert d'etiquetes¶

Arrel principal¶

Metadades del document¶

Formatar text¶

Contingut Text¶

Seccions de contingut¶

Imatges i multimèdia¶

Contingut inscrustat¶

SVG i MathML¶

Scripting¶

Taules¶

Formularis¶

Entitats¶

Validem¶

Exemples¶

Desenvolupament web estàtic amb HTML + CSS
Conceptes¶