---
title: Multimèdia i incrustar
slug: Learn/HTML/Multimedia_and_embedding
tags:
  - Assessment
  - Audio
  - Beginner
  - CodingScripting
  - Flash
  - Guide
  - HTML
  - Images
  - Landing
  - Learn
  - SVG
  - Video
  - iframes
  - imagemaps
  - responsive
translation_of: Learn/HTML/Multimedia_and_embedding
original_slug: Learn/HTML/Multimèdia_i_incrustar
---
<div class="textArea" id="destText" style="direction: ltr;">
<div><span class="highlighted" id="ouHighlight__0_9TO0_9">Multimèdia</span><span id="noHighlight_0.7886620835513062"> </span><span id="ouHighlight__11_13TO11_11">i</span><span id="noHighlight_0.5759707384643681"> </span><span id="ouHighlight__15_23TO13_21">incrustar</span></div>
</div>

<p>{{LearnSidebar}}</p>

<p class="summary">Hem vist una gran quantitat de text fins ara en aquest curs. Molt. de. text. Però la web seria molt avorrida sense res més que el text, de manera que anem a començar a buscar la manera de fer que la web cobri vida, amb un contingut més interessant! Aquest mòdul explora com utilitzar HTML per incloure multimèdia en les pàgines web, incloent-hi les diferents formes en què les imatges poden ser inclosos, i com integrar vídeo, àudio i fins i tot altres pàgines web senceres.</p>

<h2 id="Requisits_previs">Requisits previs</h2>

<p>Abans d'iniciar aquest mòdul, s'ha de tenir un coneixement raonable dels conceptes bàsics d'HTML, com s'explica en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. Si no s'ha treballat a través d'aquest mòdul (o alguna cosa semblant), comenceu a treballar amb ell en primer lloc, i a continuació, tornar!</p>

<div class="note">
<p><strong>Nota</strong>: Si esteu treballant en un ordinador/tauleta/altre dispositiu els quals no tenen la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples en un programa de codificació en línia, com ara <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>

<h2 id="Guies">Guies</h2>

<p>Aquest mòdul conté els següents articles, que ens portarà a través de tots els fonaments de la incrustació de multimèdia en pàgines web.</p>

<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imatges en HTML</a></dt>
 <dd>Hi ha altres tipus de multimèdia a tenir en compte, però és lògic començar amb l'element humil {{htmlelement("img")}}, que s'utilitza per incrustar una imatge en una pàgina web senzilla. En aquest article veurem com utilitzar-lo en profunditat, incloent conceptes bàsics, anotant-ho amb subtítols utilitzant {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.</dd>
 <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contingut d'àudio i vídeo</a></dt>
 <dd>A continuació, veurem com utilitzar els elements HTML5 {{htmlelement("video")}} i {{htmlelement("audio")}} per incrustar vídeo i àudio a les pàgines, incloent conceptes bàsics, proporcionant accés a diferents formats d'arxiu a diferents navegadors, afegir títols i subtítols, i com afegir alternatives per als navegadors antics.</dd>
 <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; — altres tecnologies d'incrustació</a></dt>
 <dd>En aquest punt ens agradaria fer un petit pas al costat, mirant a un parell d'elements que permeten introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}}. <code>&lt;iframe&gt;</code>s són per incrustar en altres pàgines web, i els altres dos permeten incrustar arxius PDF, SVG, i fins i tot flash - una tecnologia que està en camí de desapareixa, però que encara es veu semi-regularment.</dd>
 <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Afegir gràfics vectorials a la Web</a></dt>
 <dd>
 <p>Els gràfics vectorials poden ser molt útils en certes situacions. A diferència dels formats habituals com PNG/JPG, que no es distorsionen/pixelen quan s'acostan - poden romandre suaus quan s'escalen. Aquest article és una introducció al que són vectors gràfics, i com incloure el popular format {{glossary("SVG")}} en pàgines web.</p>
 </dd>
 <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imatges responsive</a></dt>
 <dd>Amb tants tipus de dispositius differerents capaços de navegar per la web - des de telèfons mòbils als ordinadors d'escriptori - un concepte essencial per dominar en el món web modern és el disseny sensible. Això es refereix a la creació de pàgines web que poden canviar de forma automàtica les seves característiques per adaptar-se a diferents mides de pantalla, resolucions, etc. Això es veurà amb més detall en un mòdul CSS més endavant, però per ara mirem les eines HTML que tenim a disposició per crear imatges sensibles, incloent l'element {{htmlelement("picture")}}.</dd>
</dl>

<h2 id="Avaluació">Avaluació</h2>

<p>Les següents avaluacions posaran a prova la comprensió dels conceptes bàsics HTML coberts en les guies anteriors.</p>

<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Pàgina de benvinguda de Mozilla</a></dt>
 <dd>En aquesta avaluació, posarem a prova el coneixement d'algunes de les tècniques descrites en els articles d'aquest mòdul, aconseguir afegir algunes imatges i vídeo a una pàgina de benvinguda de moda, tot sobre Mozilla!</dd>
</dl>

<h2 id="Veure">Veure</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Afegir un hitmap a la part superior d'una imatge</a></dt>
 <dd>Els mapes d'imatge proporcionen un mecanisme perquè les diferents parts d'una imatge enllaci a diferents llocs (pensem en un mapa, a través del qual amb els enllaços obtenim més informació sobre cada pais en clicar-los.) Aquesta tècnica pot ser útil a vegades.</dd>
 <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Conceptes bàsics d'alfabetització Web 2</a></dt>
 <dd>
 <p>Un excel·lent curs de la fundació Mozilla que explora i posa a prova algunes de les habilitats parlades en el mòdul <em>Multimèdia i incrustació</em>. Busseig profund en la composició bàsica de les pàgines web, disseny per l'accessibilitat, compartint recursos, utilitzant els medis en línia, i el treball obert.</p>
 </dd>
</dl>