1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
---
title: Multimédia e integração
slug: Learn/HTML/Multimedia_e_integracao
tags:
- Aprender
- Audio
- Avaliação
- CodingScripting
- Flash
- Guía
- HTML
- Imagens
- Landing
- Principiante
- Responsivo
- SVG
- Video
- iframes
- mapas de imagem
translation_of: Learn/HTML/Multimedia_and_embedding
---
<p>{{LearnSidebar}}</p>
<p class="summary">Nós já vimos muito texto até agora neste curso, mas a Web seria realmente chata se se utilizasse apenas texto. Vamos começar a ver como dar vida à Web, com conteúdo mais interessante! Este módulo explora como utilizar HTML para incluir multimédia nas suas páginas da Web, incluindo os modos diferentes em que as imagens podem ser incluídas, e como incorporar vídeo, áudio e até páginas da Web completas.</p>
<h2 id="Pré-requisitos">Pré-requisitos</h2>
<p>Antes de iniciar este módulo, deverá ter um conhecimento razoável dos conceitos básicos de HTML, como anteriormente abordado em <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a>. Se ainda não leu este módulo (ou qualquer coisa similar), leia-o primeiro, e depois volte aqui!</p>
<div class="note">
<p><strong>Nota</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="https://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Guias">Guias</h2>
<p>This module contains the following articles, which will take you through all the fundamentals of embedding multimedia on webpages.</p>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imagens em HTML</a></dt>
<dd>There are other types of multimedia to consider, but it is logical to start with the humble {{htmlelement("img")}} element, used to embed a simple image in a webpage. In this article we'll look at how to use it in more depth, including basics, annotating it with captions using {{htmlelement("figure")}}, and how it relates to CSS background images.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Conteúdo de vídeo e de áudio</a></dt>
<dd>Next, we'll look at how to use the HTML5 {{htmlelement("video")}} and {{htmlelement("audio")}} elements, to embed video and audio on our pages; including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> para <iframe> — outras tecnologias de integração</a></dt>
<dd>At this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}} elements. <code><iframe></code>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology on its way out, but which you may still see semi-regularly.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adicionar gráficos de vetor à Web</a></dt>
<dd>Vector graphics can be very useful in certain situations. Unlike regular formats like PNG/JPG, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. This article introduces you to what vector graphics are, and how to include the popular {{glossary("SVG")}} format in web pages.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagens responsivas</a></dt>
<dd>With so many different device types now able to browse the Web — from mobile phones to desktop computers — an essential concept to master in the modern web world is responsive design. This refers to the creation of webpages that can automatically change their features to suit different screen sizes, resolutions, etc. This will be looked at in much more detail in a CSS module later on, but for now we'll look at the tools HTML has available to create responsive images, including the {{htmlelement("picture")}} element.</dd>
</dl>
<h2 id="Avaliações">Avaliações</h2>
<p>The following assessments will test your understanding of the HTML basics covered in the guides above:</p>
<dl>
<dt><a href="/pt-PT/docs/Learn/HTML/Multimedia_and_embedding/Pagina_de_boas_vindas_da_Mozilla">Página de boas-vindas da Mozilla</a></dt>
<dd>In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!</dd>
</dl>
<h2 id="Consulte_também">Consulte também</h2>
<dl>
<dt><a href="/pt-PT/docs/Learn/HTML/Como/Adicionar_um_mapa_de_zona_clicavel_numa_imagem">Adicionar um mapa clicável no topo de uma imagem</a></dt>
<dd>Image maps provide a mechanism to make different parts of an image link to different places (think of a map, linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd>
<dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Literacia da Web - básicos 2</a></dt>
<dd>
<p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in the <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available, and shareable by others).</p>
</dd>
</dl>
|
