unslug pt-br: move

6 files changed, 1759 insertions, 0 deletions

diff --git a/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
new file mode 100644
index 0000000000..2ebc971f42
--- /dev/null
+++ b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
@@ -0,0 +1,352 @@
+---
+title: Adicionando vetor gráfico na web
+slug: Aprender/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div class="summary">
+<p>Vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size. In this article we'll show you how to include one in your webpage.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>You should know the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> and how to <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">insert an image into your document</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>Learn how to embed an SVG (vector) image into a webpage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: This article doesn't intend to teach you SVG; just what it is, and how to add it to web pages.</p>
+</div>
+
+<h2 id="O_que_são_vetores_gráficos">O que são vetores gráficos?</h2>
+
+<p>Na web, você pode trabalhar com dois tipos de imagem — <strong>raster images</strong>, and <strong>vector images</strong>:</p>
+
+<ul>
+ <li><strong>Imagens Raster</strong> são definidos usando uma grade de pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be. Popular web raster formats include Bitmap (<code>.bmp</code>), PNG (<code>.png</code>), JPEG (<code>.jpg</code>), and GIF (<code>.gif</code>.)</li>
+ <li><strong>Imagens vetoriais</strong> são definidas usando algoritmos — um arquivo de imagem vetorial contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen. The {{glossary("SVG")}} format allows us to create powerful vector graphics for use on the Web.</li>
+</ul>
+
+<p>To give you an idea of the difference between the two, let's look at an example. You can find this example live on our Github repo as <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — it shows two seemingly identical images side by side, of a red star with a  black drop shadow. The difference is that the left one is a PNG, and the right one is an SVG image.</p>
+
+<p>The difference becomes apparent when you zoom in the page — the PNG image becomes pixellated as you zoom in because it contains information on where each pixel should be (and what color). When it is zoomed, each pixel is simply increased in size to fill multiple pixels on screen, so the image starts to look blocky. The vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger.</p>
+
+<p><img alt="Two star images" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p>
+
+<p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: The images above are actually all PNGs — with the left-hand star in each case representing a raster image, and the right-hand star representing a vector image. Again, go to the <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> demo for a real example!</p>
+</div>
+
+<p>Moreover, vector image files are much lighter than their raster equivalents, because they only need to hold a handful of algorithms, rather than information on every pixel in the image individually.</p>
+
+<h2 id="What_is_SVG">What is SVG?</h2>
+
+<p><a href="/en-US/docs/Web/SVG">SVG</a> is an {{glossary("XML")}}-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. SVG is for marking up graphics, not content. At the simplest end of the spectrum, you've got elements for creating simple shapes, like {{svgelement("circle")}} and {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)</p>
+
+<p>As a simple example, the following code creates a circle and a rectangle:</p>
+
+<pre class="brush: html notranslate">&lt;svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect width="100%" height="100%" fill="black" /&gt;
+  &lt;circle cx="150" cy="100" r="90" fill="blue" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>This creates the following output:</p>
+
+<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>From the example above, you may get the impression that SVG is easy to handcode. Yes, you can handcode simple SVG in a text editor, but for a complex image this quickly starts to get very difficult. For creating SVG images, most people use a vector graphics editor like <a href="https://inkscape.org/en/">Inkscape</a> or <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>. These packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example Inkscape's Trace Bitmap feature.)</p>
+
+<p>SVG has some additional advantages besides those described so far:</p>
+
+<ul>
+ <li>Text in vector images remains accessible (which also benefits your {{glossary("SEO")}}).</li>
+ <li>SVGs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via CSS or scripted via JavaScript.</li>
+</ul>
+
+<p>So why would anyone want to use raster graphics over SVG? Well, SVG does have some disadvantages:</p>
+
+<ul>
+ <li>SVG can get complicated very quickly, meaning that file sizes can grow; complex SVGs can also take significant processing time in the browser.</li>
+ <li>SVG can be harder to create than raster images, depending on what kind of image you are trying to create.</li>
+ <li>SVG is not supported in older browsers, so may not be suitable if you need to support older versions of Internet Explorer with your web site (SVG started being supported as of IE9.)</li>
+</ul>
+
+<p>Raster graphics are arguably better for complex precision images such as photos, for the reasons described above.</p>
+
+<div class="note">
+<p><strong>Note</strong>: In Inkscape, save your files as Plain SVG to save space. Also, please refer to this <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">article describing how to prepare SVGs for the Web</a>.</p>
+</div>
+
+<h2 id="Adding_SVG_to_your_pages">Adding SVG to your pages</h2>
+
+<p>In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.</p>
+
+<h3 id="The_quick_way_htmlelementimg">The quick way: {{htmlelement("img")}}</h3>
+
+<p>To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a <code>height</code> or a <code>width</code> attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</p>
+
+<pre class="brush: html notranslate">&lt;img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87"
+    width="100" /&gt;</pre>
+
+<h4 id="Pros">Pros</h4>
+
+<ul>
+ <li>Quick, familiar image syntax with built-in text equivalent available in the <code>alt</code> attribute.</li>
+ <li>You can make the image into a hyperlink easily by nesting the <code>&lt;img&gt;</code> inside an {{htmlelement("a")}} element.</li>
+ <li>The SVG file can be cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future.</li>
+</ul>
+
+<h4 id="Cons">Cons</h4>
+
+<ul>
+ <li>You cannot manipulate the image with JavaScript.</li>
+ <li>If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)</li>
+ <li>You cannot restyle the image with CSS pseudoclasses (like <code>:focus</code>).</li>
+</ul>
+
+<h3 id="Troubleshooting_and_cross-browser_support">Troubleshooting and cross-browser support</h3>
+
+<p>For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your <code>src</code> attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:</p>
+
+<pre class="brush: html notranslate">&lt;img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"&gt;</pre>
+
+<p>You can also use SVGs as CSS background images, as shown below. In the below code, older browsers will stick with the PNG that they understand, while newer browsers will load the SVG:</p>
+
+<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code>
+<code>background-image: url("image.svg");
+background-size: contain;</code></pre>
+
+<p>Like the <code>&lt;img&gt;</code> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.</p>
+
+<p>If your SVGs aren't showing up at all, it might be because your server isn't set up properly. If that's the problem, this <a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">article will point you in the right direction</a>.</p>
+
+<h3 id="How_to_include_SVG_code_inside_your_HTML">How to include SVG code inside your HTML</h3>
+
+<p>You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your <strong>SVG inline</strong>, or <strong>inlining SVG</strong>. Make sure your SVG code snippet begins and ends with the <code><a href="/en-US/docs/Web/SVG/Element/svg">&lt;svg&gt;&lt;/svg&gt;</a></code> tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document:</p>
+
+<pre class="brush: html notranslate">&lt;svg width="300" height="200"&gt;
+    &lt;rect width="100%" height="100%" fill="green" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<h4 id="Pros_2">Pros</h4>
+
+<ul>
+ <li>Putting your SVG inline saves an HTTP request, and therefore can reduce a bit your loading time.</li>
+ <li>You can assign <code>class</code>es and <code>id</code>s to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any <a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">SVG presentation attribute </a>as a CSS property.</li>
+ <li>Inlining SVG is the only approach that lets you use CSS interactions (like <code>:focus</code>) and CSS animations on your SVG image (even in your regular stylesheet.)</li>
+ <li>You can make SVG markup into a hyperlink by wrapping it in an {{htmlelement("a")}} element.</li>
+</ul>
+
+<h4 id="Cons_2">Cons</h4>
+
+<ul>
+ <li>This method is only suitable if you're using the SVG in only one place. Duplication makes for resource-intensive maintenance.</li>
+ <li>Extra SVG code increases the size of your HTML file.</li>
+ <li>The browser cannot cache inline SVG as it would cache regular image assets, so pages that include the image will not load faster after the first page containing the image is loaded.</li>
+ <li>You may include fallback in a {{svgelement("foreignObject")}} element, but browsers that support SVG still download any fallback images. You need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers.</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="How_to_embed_an_SVG_with_an_htmlelementiframe">How to embed an SVG with an {{htmlelement("iframe")}}</h3>
+
+<p>You can open SVG images in your browser just like webpages. So embedding an SVG document with an <code>&lt;iframe&gt;</code> is done just like we studied in <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a>.</p>
+
+<p>Here's a quick review:</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="triangle.svg" width="500" height="500" sandbox&gt;
+    &lt;img src="triangle.png" alt="Triangle with three unequal sides" /&gt;
+&lt;/iframe&gt;</pre>
+
+<p>This is definitely not the best method to choose:</p>
+
+<h4 id="Cons_3">Cons</h4>
+
+<ul>
+ <li><code>iframe</code>s do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for <code>iframe</code>s altogether.</li>
+ <li>Moreover, unless the SVG and your current webpage have the same {{glossary('origin')}}, you cannot use JavaScript on your main webpage to manipulate the SVG.</li>
+</ul>
+
+<h2 id="Active_Learning_Playing_with_SVG">Active Learning: Playing with SVG</h2>
+
+<p>In this active learning section we'd like you to simply have a go at playing with some SVG for fun. In the <em>Input</em> section below you'll see that we've already provided you with some samples to get you started. You can also go to the <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, find out more details about other toys you can use in SVG, and try those out too. This section is all about practising your research skills, and having some fun.</p>
+
+<p>If you get stuck and can't get your code working, you can always reset it using the <em>Reset</em> button.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="width: 95%;min-height: 200px;"&gt;
+  &lt;svg width="100%" height="100%"&gt;
+    &lt;rect width="100%" height="100%" fill="red" /&gt;
+    &lt;circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /&gt;
+    &lt;polygon points="120,0 240,225 0,225" fill="green"/&gt;
+    &lt;text x="50" y="100" font-family="Verdana" font-size="55"
+          fill="white" stroke="black" stroke-width="2"&gt;
+            Hello!
+    &lt;/text&gt;
+  &lt;/svg&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution" disabled&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+const htmlSolution = '';
+let solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has provided you with a quick tour of what vector graphics and SVG are, why they are useful to know about, and how to include SVG inside your webpages. It was never intended to be a full guide to learning SVG, just a pointer so you know what SVG is if you meet it in your travels around the Web. So don't worry if you don't feel like you are an SVG expert yet. We've included some links below that might help you if you wish to go and find out more about how it works.</p>
+
+<p>In the last article of this module we will explore responsive images in detail, looking at the tools HTML has to allow you to make your images work better across different devices.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started">SVG tutorial</a> on MDN</li>
+ <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Quick tips for responsive SVGs</a></li>
+ <li><a href="https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial on responsive SVG images</a></li>
+ <li><a href="https://www.w3.org/TR/SVG-access/">Accessibility benefits of SVG</a></li>
+ <li><a href="https://css-tricks.com/scale-svg/">How to scale SVGs </a>(it's not as simple as raster graphics!)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html
new file mode 100644
index 0000000000..4f463148c1
--- /dev/null
+++ b/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html
@@ -0,0 +1,368 @@
+---
+title: Imagens no HTML
+slug: Aprender/HTML/Multimedia_and_embedding/Images_in_HTML
+tags:
+  - Guía
+  - HTML
+  - Imagens
+  - alt text
+  - captions
+  - figcaption
+  - figure
+  - img
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">No início a Web era somente texto, e era tedioso. Felizmente, não demorou muito para que a capacidade de incorporar imagens (e outros tipos de conteúdo mais interessantes) dentro das páginas da web fosse adicionada. Existem outros tipo de mídia para se considerar, mas é lógico começar com o humilde elemento {{htmlelement("img")}}, usado para inserir uma simples imagem em uma página web. Neste artigo, analisaremos como dominar seu uso, incluindo o básico, anotando-o com legendas usando o elemento {{htmlelement("figure")}}, e detalhando como ele se relaciona com imagens de fundo do CSS.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimento básico em informática, <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os Programas Básicos</a>, conhecimento básico em <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">lidando com arquivos</a>, familiaridade com fundamentos do HTML (como abordado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivos:</th>
+   <td>Para aprender a incorporar imagens simples em HTML, anote-as com legendas e como as imagens HTML se relacionam às imagens de plano de fundo CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Como_colocamos_uma_imagem_numa_página_web">Como colocamos uma imagem numa página web?</h2>
+
+<p>Para colocar uma única imagem em uma página da web, usamos o elemento {{htmlelement("img")}}. Isso é um elemento vazio (quer dizer que não possui conteúdo de texto ou tag de fechamento) que requer no mínimo um atributo para ser útil — <code>src</code> (às vezes pronunciado como seu título completo, <em>source</em>). O atributo src contém um caminho apontando para a imagem que você deseja incorporar na página, que pode ser uma URL relativa ou absoluta, da mesma maneira que o valores de atributo <code>href</code> no elemento {{htmlelement("a")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Antes de continuar, você deveria ler <a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">Um guia rápido sobre URLs e caminhos</a> para refrescar sua memória sobre URL relativo e absoluto.</p>
+</div>
+
+<p>Por exemplo, se sua imagem for chamada <code>dinossauro.jpg</code>, e está no mesmo diretório de sua página HTML, você poderia inserir a imagem assim:</p>
+
+<pre class="brush: html">&lt;img src="dinossauro.jpg"&gt;</pre>
+
+<p>Se a imagem estivesse em um subdiretório de <code>images</code>, que estivesse dentro do mesmo diretório da página HTML (que o Google recomenda para fins de indexição/{{glossary("SEO")}}), então você a incorporaria da seguinte maneira:</p>
+
+<pre class="brush: html">&lt;img src="images/dinossauro.jpg"&gt;</pre>
+
+<p>E assim por diante.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Os mecanismos de pesquisa também leem os nomes dos arquivos de imagem e os contam para o  SEO. Portanto, dê à sua imagem um nome de arquivo descritivo; <code>dinosaur.jpg</code> é melhor que <code>img835.png</code>.</p>
+</div>
+
+<p>Você pode incorporar a imagem usando seu URL absoluto, por exemplo:</p>
+
+<pre class="brush: html">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
+
+<p>Mas isso é inútil, pois apenas faz o navegador trabalhar mais, pesquisando o endereço IP do servidor DNS novamente, etc. Você quase sempre manterá as imagens do seu site no mesmo servidor que o HTML.</p>
+
+<div class="warning">
+<p><strong>Aviso:</strong> A  maioria das imagens tem direitos autorais. Não exiba uma imagem em sua página da web, a menos que:</p>
+
+<p>1) você é o dono da imagem<br>
+ 2) você recebeu permissão explícita e por escrito do proprietário da imagem, ou<br>
+ 3) você tem ampla prova de que a imagem é, de fato, de domínio público.</p>
+
+<p><br>
+ Violações de direitos autorais são ilegais e antiéticas. Além disso, <strong>nunca</strong> aponte seu atributo <code>src </code>para uma imagem hospedada no site de outra pessoa à qual você não tem permissão para vincular. Isso é chamado de "hotlinking". Mais uma vez, roubar a largura de banda de alguém é ilegal. Ele também torna a página mais lenta, deixando você sem controle sobre se a imagem é removida ou substituída por algo embaraçoso.</p>
+</div>
+
+<p>Nosso código acima nos daria o seguinte resultado:</p>
+
+<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Elementos como {{htmlelement("img")}} e {{htmlelement("video")}} às vezes são chamados de elementos substituídos. Isso ocorre porque o conteúdo e o tamanho do elemento são definidos por um recurso externo (como uma imagem ou arquivo de vídeo), não pelo conteúdo do próprio elemento.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar o exemplo final desta seção <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (Veja o <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">source code</a> também.)</p>
+</div>
+
+<h3 id="Texto_alternativo">Texto alternativo</h3>
+
+<p>O próximo atributo que veremos é <code>alt</code>. Seu valor deve ser uma descrição textual da imagem, para uso em situações em que a imagem não pode ser vista/exibida ou leva muito tempo para renderizar devido a uma conexão lenta à Internet. Por exemplo, nosso código acima pode ser modificado da seguinte maneira:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"&gt;</pre>
+
+<p>A maneira mais fácil de testar seu texto <code>alt</code> é digitar incorretamente seu nome de arquivo. Se, por exemplo, o nome da nossa imagem estivesse escrito <code>dinosooooor.jpg</code>, o navegador não exibiria a imagem, mas exibiria o texto alternativo:</p>
+
+<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>Então, por que você veria ou precisaria de texto alternativo? Pode ser útil por vários motivos:</p>
+
+<ul>
+ <li>O usuário é deficiente visual e usa um <a href="https://pt.wikipedia.org/wiki/Leitor_de_tela">leitor de tela</a> para ler a web para eles. De fato, ter o texto alternativo disponível para descrever imagens é útil para a maioria dos usuários.</li>
+ <li>Como descrito acima, você pode ter digitado o nome do arquivo ou caminho errado.</li>
+ <li>O navegador não suporta o tipo de imagem. Algumas pessoas ainda usam navegadores somente de texto, como <a href="https://pt.wikipedia.org/wiki/Lynx_(navegador_web)">Lynx</a>, que alternativamente exibe o texto alternativo das imagens.</li>
+ <li>Você pode fornecer texto para os mecanismos de pesquisa utilizarem. Por exemplo, os mecanismos de pesquisa podem corresponder o texto alternativo às consultas de pesquisa.</li>
+ <li>Os usuários desativaram as imagens para reduzir o volume e as distrações de transferência de dados. Isso é especialmente comum em telefones celulares e em países onde a largura de banda é limitada e cara.</li>
+</ul>
+
+<p>O que exatamente você deve escrever dentro do seu atributo <code>alt</code>? Depende do <em>por que</em> a imagem está lá em primeiro lugar. Em outras palavras, o que você perde se sua imagem não aparecer:</p>
+
+<ul>
+ <li><strong>Decoração. </strong>Se a imagem é apenas decoração e não faz parte do conteúdo, adicione um espaço em branco <code>alt=""</code>. Por exemplo, um leitor de tela não perde tempo lendo conteúdo que não é essencial para o usuário. Imagens decorativas realmente não pertencem ao seu HTML. {{anch("CSS background images")}} deve ser usado para inserir decoração, mas se for inevitável, <code>alt=""</code> é o melhor caminho a percorrer.</li>
+ <li><strong>Conteúdo. </strong>Se sua imagem fornecer informações significativas, forneça as mesmas informações em um <em>breve</em><em> </em><code>alt</code> texto. Ou melhor ainda, no texto principal que todos podem ver. Não escreva redundante <code>alt</code> texto. O quão irritante seria para um usuário que enxerga se todos os parágrafos fossem escritos duas vezes no conteúdo principal? Se a imagem for descrita adequadamente pelo corpo do texto principal, você pode simplesmente usar <code>alt=""</code>.</li>
+ <li><strong>Link.</strong> Se você colocar uma imagem dentro das tags {{htmlelement("a")}}, para transformar uma imagem em um link, você ainda deve fornecer <a href="/pt-BR/docs/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks#Pr%C3%A1ticas_recomendadas">links acessíveis</a>. Nesses casos, você também pode escrevê-lo no mesmo elemento <code>&lt;a&gt;</code>, ou dentro do atributo <code>alt</code> da imagem. O que funcionar melhor no seu caso.</li>
+ <li><strong>Texto.</strong> Você não deve colocar seu texto em imagens. Se o cabeçalho principal precisar de uma sombra projetada, por exemplo, <a href="/pt-BR/docs/Web/CSS/text-shadow">use CSS</a> para isso, em vez de colocar o texto em uma imagem. No entanto, se você <em>realmente não puder evitar fazer isso</em>, deve fornecer o texto dentro do atributo <code>alt</code>.</li>
+</ul>
+
+<p>Essencialmente, a chave é oferecer uma experiência utilizável, mesmo quando as imagens não podem ser vistas. Isso garante que todos os usuários não estejam perdendo nenhum conteúdo. Tente desativar as imagens no seu navegador e veja como as coisas ficam. Você logo perceberá como o texto alternativo é útil se a imagem não puder ser vista.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Para mais informações, consulte o nosso guia para <a href="/pt-BR/docs/Learn/Accessibility/HTML#Alternativas_em_textos">Textos alternativos</a>.</p>
+</div>
+
+<h3 id="Largura_e_altura">Largura e altura</h3>
+
+<p>Você pode usar os atributos <code>width</code> e <code>height</code>, para especificar a largura e altura da sua imagem. Você pode encontrar a largura e a altura da sua imagem de várias maneiras. Por exemplo, no Mac, você pode usar <kbd>Cmd</kbd> + <kbd>I</kbd>  para exibir as informações do arquivo de imagem. Voltando ao nosso exemplo, poderíamos fazer isso:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="A cabeça e o tronco de um esqueleto de dinossauro;
+          tem uma cabeça grande com dentes longos e afiados"
+     width="400"
+     height="341"&gt;</pre>
+
+<p>Isso não resulta em muita diferença para a tela, em circunstâncias normais. Mas se a imagem não estiver sendo exibida, por exemplo, o usuário acabou de navegar para a página e a imagem ainda não foi carregada, você notará que o navegador está deixando um espaço para a imagem aparecer:</p>
+
+<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>É uma coisa boa a fazer, resultando no carregamento da página mais rápido e sem problemas.</p>
+
+<p>No entanto, você não deve alterar o tamanho das suas imagens usando atributos HTML. Se você definir o tamanho da imagem muito grande, terá imagens granuladas, confusas ou muito pequenas e desperdiçando largura de banda ao fazer o download de uma imagem que não atenda às necessidades do usuário. A imagem também pode ficar distorcida, se você não mantiver a <a href="Proporção de tela">proporção de tela</a>. Você deve usar um editor de imagens para colocar sua imagem no tamanho correto antes de colocá-la em sua página da web.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você precisar alterar o tamanho de uma imagem, use <a href="/pt-BR/docs/Aprender/CSS">CSS</a> então.</p>
+</div>
+
+<h3 id="Títulos_de_imagem">Títulos de imagem</h3>
+
+<p>Como <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">nos links</a>, você também pode adicionar o atributo <code>title</code> nas images, para fornecer mais informações de suporte, se necessário. No nosso exemplo, poderíamos fazer isso:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="A cabeça e o tronco de um esqueleto de dinossauro;
+          tem uma cabeça grande com dentes longos e afiados"
+     width="400"
+     height="341"
+     title="Um T-Rex em exibição no Museu da Universidade de Manchester"&gt;</pre>
+
+<p>Isso nos dá uma dica de ferramenta, assim como os títulos dos links:</p>
+
+<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
+
+<p>Os títulos das imagens não são essenciais para incluir. Geralmente, é melhor incluir essas informações de suporte no texto principal do artigo, em vez de anexá-las à imagem. No entanto, eles são úteis em algumas circunstâncias; por exemplo, em uma galeria de imagens quando você não tem espaço para legendas.</p>
+
+<h3 id="Aprendizado_ativo_incorporando_uma_imagem">Aprendizado ativo: incorporando uma imagem</h3>
+
+<p>Agora é sua vez de jogar! Esta seção de aprendizado ativo o ajudará a executar com um simples exercício de incorporação. Você é fornecido com um básico {{htmlelement("img")}} tag; gostaríamos que você incorporasse a imagem localizada no seguinte URL:</p>
+
+<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
+
+<p>Anteriormente, dissemos para nunca vincular as imagens a outros servidores, mas isso é apenas para fins de aprendizado; portanto, deixaremos você de fora dessa vez.</p>
+
+<p>Também gostaríamos que você:</p>
+
+<ul>
+ <li>Adicione algum texto alternativo e verifique se ele funciona incorretamente com o URL da imagem.</li>
+ <li>Defina a imagem correta <code>width</code> e <code>height</code> (dica; isto é 200px largo e 171px altura), experimente outros valores para ver qual é o efeito.</li>
+ <li>Defina um <code>title</code> na imagem.</li>
+</ul>
+
+<p>Se você cometer um erro, sempre poderá redefini-lo usando o botão <em>Reset</em>. Se você realmente ficar preso, pressione o botão <em>Show solution</em> para ver a resposta:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&lt;img&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n     alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum"&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h2 id="Anotar_imagens_com_figuras_e_legendas_de_figuras">Anotar imagens com figuras e legendas de figuras</h2>
+
+<p>Por falar em legendas, existem várias maneiras de adicionar uma legenda para acompanhar sua imagem. Por exemplo, não haveria nada para impedi-lo de fazer isso:</p>
+
+<pre class="brush: html">&lt;div class="figure"&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Está tudo bem. Isso contém o conteúdo que você precisa e é bem estiloso usando CSS. Mas há um problema aqui: não há nada que vincule semanticamente a imagem à sua legenda, o que pode causar problemas para os leitores de tela. Por exemplo, quando você tem 50 imagens e legendas, qual legenda combina com qual imagem?</p>
+
+<p>Uma solução melhor, é usar os elementos do HTML5 {{htmlelement("figure")}} e {{htmlelement("figcaption")}}. Eles são criados exatamente para esse propósito: fornecer um contêiner semântico para figuras e vincular claramente a figura à legenda. Nosso exemplo acima, pode ser reescrito assim:</p>
+
+<pre>&lt;figure&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>O elemento {{htmlelement("figcaption")}} informa aos navegadores e à tecnologia de assistência que a legenda descreve o outro conteúdo do elemento {{htmlelement("figure")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Do ponto de vista da acessibilidade, legendas e {{htmlattrxref('alt','img')}} texto têm papéis distintos. As legendas beneficiam até as pessoas que podem ver a imagem, enquanto {{htmlattrxref('alt','img')}} texto fornece a mesma funcionalidade que uma imagem ausente. Portanto, legendas e <code>alt</code> texto não deve apenas dizer a mesma coisa, porque ambos aparecem quando a imagem desaparece. Tente desativar as imagens no seu navegador e veja como fica.</p>
+</div>
+
+<p>Uma figura não precisa ser uma imagem. É uma unidade de conteúdo independente que:</p>
+
+<ul>
+ <li>Expressa seu significado de maneira compacta e fácil de entender.</li>
+ <li>Pode ir em vários lugares no fluxo linear da página.</li>
+ <li>Fornece informações essenciais de suporte ao texto principal.</li>
+</ul>
+
+<p>Uma figura pode ser várias imagens, um trecho de código, áudio, vídeo, equações, uma tabela ou outra coisa.</p>
+
+<h3 id="Aprendizado_ativo_criando_uma_figura">Aprendizado ativo: criando uma figura</h3>
+
+<p>Nesta seção de aprendizado ativo, gostaríamos que você pegasse o código finalizado da seção de aprendizado ativo anterior e o transformasse em uma figura:</p>
+
+<ul>
+ <li>Envolve em um elemento {{htmlelement("figure")}}.</li>
+ <li>Copie o texto do atributo <code>title</code>, remova o atributo <code>title</code>, e coloque o texto dentro de um elemento {{htmlelement("figcaption")}} abaixo da imagem.</li>
+</ul>
+
+<p>Se você cometer um erro, sempre poderá redefini-lo usando o botão <em>Reset</em>. Se você realmente ficar preso, pressione o botão <em>Show solution</em> para ver a resposta:</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;figure&gt;\n  &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n       alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n       width="200"\n       height="171"&gt;\n  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>
+
+<h2 id="Imagens_de_fundo_CSS">Imagens de fundo CSS</h2>
+
+<p>Você também pode usar CSS para incorporar imagens em páginas da web (e JavaScript, mas isso é outra história). A propriedade {{cssxref("background-image")}} do CSS, e o outras propriedades <code>background-*</code>, são usados ​​para controlar o posicionamento da imagem de fundo. Por exemplo, para colocar uma imagem de plano de fundo em cada parágrafo de uma página, você pode fazer o seguinte:</p>
+
+<pre class="brush: css">p {
+  background-image: url("images/dinosaur.jpg");
+}</pre>
+
+<p>A imagem incorporada resultante é sem dúvida mais fácil de posicionar e controlar do que as imagens HTML. Então, por que se preocupar com imagens HTML? Como sugerido acima, as imagens de plano de fundo CSS são apenas para decoração. Se você quiser adicionar algo bonito à sua página para melhorar o visual, tudo bem. No entanto, essas imagens não têm significado semântico. Eles não podem ter nenhum equivalente de texto, são invisíveis para os leitores de tela, etc. É hora das imagens HTML brilharem!</p>
+
+<p>Resumindo: se uma imagem tiver significado, em termos de seu conteúdo, você deverá usar uma imagem HTML. Se uma imagem é puramente decorativa, você deve usar imagens de plano de fundo CSS.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você aprenderá muito mais sobre <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> no nosso tópico de <a href="/pt-BR/docs/Aprender/CSS">CSS</a>.</p>
+</div>
+
+<p>É tudo por agora. Cobrimos imagens e legendas em detalhes. No próximo artigo, avançaremos, analisando como usar HTML para incorporar vídeo e áudio em páginas da web.</p>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
diff --git a/files/pt-br/learn/html/multimedia_and_embedding/index.html b/files/pt-br/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..d644018330
--- /dev/null
+++ b/files/pt-br/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,67 @@
+---
+title: Multimídia e Incorporação
+slug: Aprender/HTML/Multimedia_and_embedding
+tags:
+  - Acesso
+  - Aprender
+  - Audio
+  - Avaliação
+  - Flash
+  - Gráficos Vetoriais
+  - Guia(2)
+  - HTML
+  - Imagens
+  - Iniciante
+  - SVG
+  - Vídeo(2)
+  - iframes
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">Nós vimos muito sobre texto até aqui nesse curso, mas a internet seria muito chata se usassemos apenas texto. Vamos começar a ver como fazer a internet criar vida, com conteúdo mais interessante! Esse módulo explora como usar HTML para incluir multimídia em sua pagina web,usando as diferentes formas de inclusão de imagens , e como adicionar video, audio, e até paginas da web inteiras.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Antes de iniciar esse módulo, você deve ter um conhecimento razoável de HTML, como previamente abrangido em <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">introdução a HTML</a>. Se você não estudou esse módulo (ou algo similar), estude-o primeiro e depois retorne!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está trabalhando em um computador/tablet/outro dispositivo onde você não tem a habilidade de criar seus próprios arquivos, você pode testar (maior parte) dos exemplos de códigos em um programa online para codar tais como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<p>Esse módulo contém os seguintes artigos, que vão passar por todos os fundamentos para inserir multimídia em páginas da web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imagens em HTML</a></dt>
+ <dd>Existem outros tipos de multimídia para considerar, porém é lógico começar com o modesto elemento {{htmlelement("img")}} , usado para inserir uma simples imagem em uma página da web. Nesse artigo vamos aprender a usar esse elemento com mais profundidade, incluindo os básicos, anotando com legendas usando {{htmlelement("figure")}}  e como se relaciona com imagens de fundo em CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Conteúdo em áudio e video</a></dt>
+ <dd>Agora nós iremos aprender como usar os elementos HTML5 {{htmlelement("video")}}  e  {{htmlelement("audio")}} , para inserir video e audio em nossa página; incluindo o basico, fornecendo acesso a diferentes tipos de arquivo para navegadores diferentes, adicionando legenda , e como adicionar alternativas para navegadores mais antigos.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; para &lt;iframe&gt; — outras tecnologias incorporadas</a></dt>
+ <dd>A essa altura, nós gostariamos de avançar alguns passos sobre um conjunto de elementos que permitem você incorporar uma ampla variedade de tipos de conteúdo na suas páginas web: os elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} e {{htmlelement("object")}}. <code>&lt;iframe&gt;</code>s servem para incorporar outras páginas web, enquanto as outras duas permitem você incorporar PDFs, SVG, e até mesmo Flash — uma tecnologia cada vez menos presente, mas que ainda é possível você encontrar de forma quase regular.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adicionando gráficos vetoriais à Web</a></dt>
+ <dd>Gráficos vetoriais podem ser muito úteis em determinadas situações. Diferente dos formatos comuns, como PNG/JPG, eles não sofrem distorção/pixelização quando o zoom é ampliado — podendo continuar com a mesma qualidade quando alterado em escala. Esse artigo irá introduzir a você o que são os gráficos vetoriais e como incluir o formato {{glossary("SVG")}} nas páginas web.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagens responsivas</a></dt>
+ <dd>Com a atual variedade de tipos de dispositivos capazes de navegar na web - de celulares móveis à computadores pessoais - um conceito essencial para dominar o mundo web moderno é o design responsivo. Este se refere à criação de páginas web que podem automaticamente mudar seus atributos para se adaptar a diferentes resoluções e tamanhos de tela. Isso será explorado em mais detalhes em um módulo CSS posterior, mas, por enquanto, iremos verificar as ferramentas HTML disponíveis para criar imagens responsivas, incluindo o elemento {{htmlelement("picture")}}.</dd>
+</dl>
+
+<h2 id="Testes_de_Conhecimentos">Testes de Conhecimentos</h2>
+
+<p>Os testes de conhecimentos a seguir vão avaliar seu aprendizado nos assuntos abaixo:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página Inicial do Mozilla</a></dt>
+ <dd>Neste teste nós vamos avaliar seus conhecimentos quanto a algumas técnicas discutidas nos artigos desse módulo, devendo você adicionar imagens e videos numa divertida página inicial sobre o Mozilla!</dd>
+</dl>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Adicionando um hitmap no topo de uma imagem</a></dt>
+ <dd>Image maps consiste em um mecanismo que torna diferentes partes de uma imagem em uma forma de acesso para outros lugares ou coisas (pense em um mapa mundi que apresenta informações sobre o país em que você clicou em cima). Essa técnica pode ser útil as vezes.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 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. </p>
+ </dd>
+</dl>
diff --git a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
new file mode 100644
index 0000000000..80299e4f72
--- /dev/null
+++ b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
@@ -0,0 +1,394 @@
+---
+title: Do objeto ao iframe - outras tecnologias de incorporação
+slug: Aprender/HTML/Multimedia_and_embedding/Other_embedding_technologies
+translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary"><font><font>Até agora você já deve ter aprendido a incorporar coisas em suas páginas da web, incluindo imagens, vídeo e áudio. </font><font>Neste ponto, gostaria de ter um pouco de um passo para o lado, olhando para alguns elementos que permitem incorporar uma ampla variedade de tipos de conteúdo em suas páginas: as </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (&lt;iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code>&lt;iframe&gt;</code></a><font><font>,  </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="O elemento HTML &lt;embed> incorpora conteúdo externo no ponto especificado no documento.  Este conteúdo é fornecido por um aplicativo externo ou outra fonte de conteúdo interativo, como um plug-in de navegador."><code>&lt;embed&gt;</code></a><font><font>e </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="O elemento HTML &lt;object> representa um recurso externo, que pode ser tratado como uma imagem, um contexto de navegação aninhado ou um recurso a ser tratado por um plug-in."><code>&lt;object&gt;</code></a><font><font>elementos. </font></font><code>&lt;iframe&gt;</code><font><font>s são para incorporar outras páginas da Web, e as outras duas permitem incorporar PDFs, SVG e até Flash - uma tecnologia que está saindo, mas que você ainda verá semi-regularmente.</font></font></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td><font><font>Conhecimento </font><font>básico em informática, </font></font><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font>software básico instalado</font></font></a><font><font> , conhecimento básico sobre o </font></font><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font>trabalho com arquivos</font></font></a><font><font> , familiaridade com os fundamentos de HTML (conforme abordado em </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started"><font><font>Introdução ao HTML</font></font></a><font><font> ) e os artigos anteriores deste módulo.</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <table>
+     <tbody>
+      <tr>
+       <td><font><font>Para saber como itens incorporar em páginas da web que usam </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="O elemento HTML &lt;object> representa um recurso externo, que pode ser tratado como uma imagem, um contexto de navegação aninhado ou um recurso a ser tratado por um plug-in."><code>&lt;object&gt;</code></a><font><font>,  </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="O elemento HTML &lt;embed> incorpora conteúdo externo no ponto especificado no documento.  Este conteúdo é fornecido por um aplicativo externo ou outra fonte de conteúdo interativo, como um plug-in de navegador."><code>&lt;embed&gt;</code></a><font><font>e </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (&lt;iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code>&lt;iframe&gt;</code></a><font><font>, como filmes em Flash e outras páginas da web.</font></font></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Uma_breve_história_de_incorporação"><font><font>Uma breve história de incorporação</font></font></h2>
+
+<p>Há muito tempo, na Web, era popular o uso de <strong>quadros</strong> para criar sites - pequenas partes de um site armazenadas em páginas HTML individuais. Elas foram incorporadas em um documento mestre chamado <strong>conjunto de quadros</strong>, que permitiu especificar a área na tela que cada quadro preenchia, como dimensionar as colunas e linhas de uma tabela. Eles foram considerados o auge da frescura entre a metade e o final dos anos 90, e havia evidências de que ter uma página da Web dividida em partes menores como essa era melhor para as velocidades de download - especialmente perceptível pelas conexões de rede que eram tão lentas na época. No entanto, eles tinham muitos problemas, que superavam quaisquer positivos à medida que as velocidades da rede ficavam mais rápidas, para que você não as veja mais sendo usadas.</p>
+
+<p><font><font>Um pouco mais tarde (final dos anos 90, início dos anos 2000), as tecnologias de plug-in tornaram-se muito populares, como </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Java"><font><font>Java Applets</font></font></a><font><font> e </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Adobe_Flash"><font><font>Flash</font></font></a><font><font> - isso permitiu que os desenvolvedores da Web incorporassem conteúdo rico em páginas da Web, como vídeos e animações, que não estavam disponíveis apenas no HTML. </font><font>A incorporação dessas tecnologias foi alcançada através de elementos como </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="O elemento HTML &lt;object> representa um recurso externo, que pode ser tratado como uma imagem, um contexto de navegação aninhado ou um recurso a ser tratado por um plug-in."><code>&lt;object&gt;</code></a><font><font>, e os menos utilizados </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="O elemento HTML &lt;embed> incorpora conteúdo externo no ponto especificado no documento.  Este conteúdo é fornecido por um aplicativo externo ou outra fonte de conteúdo interativo, como um plug-in de navegador."><code>&lt;embed&gt;</code></a><font><font>, e eles eram muito úteis na época. </font><font>Desde então, ficaram fora de moda devido a muitos problemas, incluindo acessibilidade, segurança, tamanho do arquivo e muito mais; </font><font>hoje em dia, a maioria dos dispositivos móveis não suporta mais esses plug-ins, e o suporte para desktop está saindo.</font></font></p>
+
+<p><font><font>Finalmente, o elemento </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (&lt;iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code>&lt;iframe&gt;</code></a><font><font> apareceu (juntamente com outras formas de incorporar conteúdo, como </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="Use o elemento &lt;canvas> HTML com a API de script de tela ou a API WebGL para desenhar gráficos e animações."><code>&lt;canvas&gt;</code></a><font><font>, </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="O elemento HTML Video (&lt;video>) incorpora um media player que suporta a reprodução de vídeo no documento.  Você também pode usar &lt;video> para conteúdo de áudio, mas o elemento &lt;audio> pode fornecer uma experiência de usuário mais apropriada.">&lt;video&gt;</a> </code><font><font>etc.). Isso fornece uma maneira de incorporar um documento da Web inteiro dentro de outro, como se fosse um </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" title="O elemento HTML &lt;img> incorpora uma imagem no documento."><code>&lt;img&gt;</code></a><font><font>ou outro elemento, e é usado regularmente hoje .</font></font></p>
+
+<p>Com a lição de história fora do caminho, vamos seguir em frente e ver como usar algumas delas.</p>
+
+<h2 id="Aprendizado_ativo_usos_clássicos_de_incorporação"><font><font>Aprendizado ativo: usos clássicos de incorporação</font></font></h2>
+
+<p><font><font>Neste artigo, vamos pular direto para uma seção de aprendizado ativo, para fornecer imediatamente uma idéia real de para que servem as tecnologias de incorporação. </font><font>O mundo on-line está muito familiarizado com o </font></font><a href="https://www.youtube.com/" rel="noopener"><font><font>Youtube</font></font></a><font><font> , mas muitas pessoas não conhecem alguns dos recursos de compartilhamento disponíveis. </font><font>Vejamos como o YouTube nos permite incorporar um vídeo em qualquer página que gostamos de usar </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (&lt;iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code>&lt;iframe&gt;</code></a><font><font>.</font></font></p>
+
+<ol>
+ <li><font><font>Primeiro, vá ao Youtube e encontre o vídeo que você gosta.</font></font></li>
+ <li><font><font>Abaixo do vídeo, você encontrará um </font><font>botão </font></font><em><font><font>Compartilhar</font></font></em><font><font> - selecione para exibir as opções de compartilhamento.</font></font></li>
+ <li><font><font>Selecione o </font><font>botão </font></font><em><font><font>Incorporar</font></font></em><font><font> e você receberá um </font></font><code>&lt;iframe&gt;</code><font><font>código - copie isso.</font></font></li>
+ <li><font><font>Insira-o na </font><font>caixa de </font></font><em><font><font>entrada</font></font></em><font><font> abaixo e veja qual é o resultado na </font></font><em><font><font>saída</font></font></em><font><font> .</font></font></li>
+</ol>
+
+<p><font><font>Para pontos de bônus, você também pode tentar incorporar um </font></font><a href="https://www.google.com/maps/" rel="noopener"><font><font>mapa do Google</font></font></a><font><font> no exemplo:</font></font></p>
+
+<ol>
+ <li><font><font>Vá para o Google Maps e encontre um mapa que você gosta.</font></font></li>
+ <li><font><font>Clique no "Menu Hamburger" (três linhas horizontais) no canto superior esquerdo da interface do usuário.</font></font></li>
+ <li><font><font>Selecione a opção </font></font><em><font><font>Compartilhar ou incorporar mapa</font></font></em><font><font> .</font></font></li>
+ <li><font><font>Selecione a opção Incorporar mapa, que fornecerá algum </font></font><code>&lt;iframe&gt;</code><font><font>código - copie isso.</font></font></li>
+ <li><font><font>Insira-o na </font><font>caixa de </font></font><em><font><font>entrada</font></font></em><font><font> abaixo e veja qual é o resultado na </font></font><em><font><font>saída</font></font></em><font><font> .</font></font></li>
+</ol>
+
+<p><font><font>Se você cometer um erro, sempre poderá redefini-lo usando o </font><font>botão </font></font><em><font><font>Redefinir</font></font></em><font><font> . </font><font>Se você realmente ficar atolado, pressione o botão </font></font><em><font><font>Mostrar solução</font></font></em><font><font> para ver uma resposta.</font></font></p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 250px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="width: 95%;min-height: 100px;"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+const htmlSolution = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen&gt;\n&lt;/iframe&gt;\n\n&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;\n&lt;/iframe&gt;';
+let solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Iframes_em_detalhes"><font><font>Iframes em detalhes</font></font></h2>
+
+<p><font><font>Então, isso foi fácil e divertido, certo? Os elementos </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (&lt;iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code>&lt;iframe&gt;</code></a><font><font> foram projetados para permitir que você incorpore outros documentos da Web ao documento atual. </font><font>Isso é ótimo para incorporar conteúdo de terceiros em seu site sobre o qual você pode não ter controle direto e não querer implementar sua própria versão - como vídeo de fornecedores de vídeo on-line, sistemas de comentários como </font></font><a href="https://disqus.com/" rel="noopener"><font><font>Disqus</font></font></a><font><font> , mapas on-line fornecedores de mapas, banners publicitários etc. Os exemplos editáveis ​​ao vivo que </font></font>você está usando neste curso<font><font> são implementados usando </font></font><code>&lt;iframe&gt;</code><font><font>s.</font></font></p>
+
+<p><font><font>Existem algumas sérias </font></font><a href="https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#Security_concerns"><font><font>preocupações de segurança</font></font></a><font><font> a serem consideradas com </font></font><code>&lt;iframe&gt;</code><font><font>s, como discutiremos abaixo, mas isso não significa que você não deve usá-las em seus sites - apenas requer algum conhecimento e pensamento cuidadoso. </font><font>Vamos explorar o código um pouco mais detalhadamente. </font><font>Digamos que você queira incluir o glossário MDN em uma de suas páginas da web - você pode tentar algo como isto:</font></font></p>
+
+<pre>&lt;iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox&gt;
+  &lt;p&gt;
+    &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary"&gt;
+       Fallback link for browsers that don't support iframes
+    &lt;/a&gt;
+  &lt;/p&gt;
+&lt;/iframe&gt;</pre>
+
+<p><font><font>Este exemplo inclui os fundamentos básicos necessários para usar um </font></font><code>&lt;iframe&gt;</code><font><font>:</font></font></p>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowfullscreen">allowfullscreen</a></code></dt>
+ <dd><font><font>Se definido, ele </font></font><code>&lt;iframe&gt;</code><font><font>poderá ser colocado no modo de tela cheia usando a </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API"><font><font>API de tela cheia</font></font></a><font><font> (um pouco além do escopo deste artigo).</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-frameborder">frameborder</a></code></dt>
+ <dd><font><font>Se definido como 1, isso indica ao navegador para desenhar uma borda entre esse quadro e outros quadros, que é o comportamento padrão. </font><font>0 remove a borda. </font><font>Usar isso não é mais recomendado, pois o mesmo efeito pode ser melhor alcançado usando </font><font>em seu </font><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS" title="CSS: CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser."><font>CSS</font></a><font> .</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border" title="A propriedade CSS abreviada da borda define a borda de um elemento."><code>border</code></a><code>: none;</code></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-src">src</a></code></dt>
+ <dd><font><font>Este atributo, como </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="O elemento HTML Video (&lt;video>) incorpora um media player que suporta a reprodução de vídeo no documento.  Você também pode usar &lt;video> para conteúdo de áudio, mas o elemento &lt;audio> pode fornecer uma experiência de usuário mais apropriada."><code>&lt;video&gt;</code></a><font><font>/ </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" title="O elemento HTML &lt;img> incorpora uma imagem no documento."><code>&lt;img&gt;</code></a><font><font>, contém um caminho apontando para o URL do documento a ser incorporado.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-width">width</a></code><font><font> e </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-height">height</a></code></dt>
+ <dd><font><font>Esses atributos especificam a largura e a altura que você deseja que o iframe seja.</font></font></dd>
+ <dt>Conteúdo alternativo</dt>
+ <dd><font><font>Da mesma forma que outros elementos semelhantes </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="O elemento HTML Video (&lt;video>) incorpora um media player que suporta a reprodução de vídeo no documento.  Você também pode usar &lt;video> para conteúdo de áudio, mas o elemento &lt;audio> pode fornecer uma experiência de usuário mais apropriada."><code>&lt;video&gt;</code></a><font><font>, você pode incluir conteúdo de fallback entre as </font></font><code>&lt;iframe&gt;&lt;/iframe&gt;</code><font><font>tags de </font><font>abertura e fechamento </font><font>que aparecerão se o navegador não suportar </font></font><code>&lt;iframe&gt;</code><font><font>. </font><font>Nesse caso, incluímos um link para a página. </font><font>É improvável que você encontre qualquer navegador que não suporte </font></font><code>&lt;iframe&gt;</code><font><font>s atualmente.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox</a></code></dt>
+ <dd><font><font>Esse atributo, que funciona em navegadores um pouco mais modernos que o restante dos </font></font><code>&lt;iframe&gt;</code><font><font>recursos (por exemplo, IE 10 e superior), requer configurações de segurança mais elevadas; </font><font>falaremos mais sobre isso na próxima seção.</font></font></dd>
+</dl>
+
+<div class="note">
+<p><strong><font><font>Nota</font></font></strong><font><font>: Para melhorar a velocidade, é uma boa ideia definir o </font></font><code>src</code><font><font>atributo </font><font>do iframe </font><font>com JavaScript após o carregamento do conteúdo principal. </font><font>Isso torna sua página utilizável mais cedo e diminui o tempo de carregamento da página oficial (uma importante </font><font>métrica de </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/SEO" title="SEO: SEO (Search Engine Optimization) é o processo de tornar um site mais visível nos resultados de pesquisa, também denominado melhorar as classificações de pesquisa."><font><font>SEO</font></font></a><font><font> ).</font></font></p>
+</div>
+
+<h3 id="Preocupações_com_segurança">Preocupações com segurança</h3>
+
+<p><font><font>Acima, mencionamos preocupações de segurança - vamos abordar isso com mais detalhes agora. </font><font>Não esperamos que você entenda todo esse conteúdo perfeitamente da primeira vez; </font><font>queremos apenas que você fique ciente dessa preocupação e forneça uma referência para retornar à medida que for mais experiente e começar a considerar o uso de </font></font><code>&lt;iframe&gt;</code><font><font>s em seus experimentos e trabalhos. </font><font>Além disso, não há necessidade de ter medo e não usar </font></font><code>&lt;iframe&gt;</code><font><font>s - você só precisa ter cuidado. </font><font>Leia...</font></font></p>
+
+<p><font><font>Fabricantes de navegadores e desenvolvedores da Web descobriram da maneira mais difícil que iframes são um alvo comum (termo oficial: </font></font><strong><font><font>vetor de ataque</font></font></strong><font><font> ) para pessoas más na Web (geralmente chamadas de </font></font><strong><font><font>hackers</font></font></strong><font><font> ou, mais precisamente, </font></font><strong><font><font>crackers</font></font></strong><font><font> ) atacarem se estiverem tentando modificar maliciosamente seu página da web ou induzir as pessoas a fazer algo que não desejam, como revelar informações confidenciais como nomes de usuário e senhas. </font><font>Por esse motivo, engenheiros de especificações e desenvolvedores de navegadores desenvolveram vários mecanismos de segurança para torná- </font></font><code>&lt;iframe&gt;</code><font><font>los mais seguros, e também existem práticas recomendadas a serem consideradas - abordaremos alguns deles abaixo.</font></font></p>
+
+<div class="note">
+<p>{{interwiki('wikipedia','Clickjacking')}} <font>é um tipo comum de ataque iframe, no qual hackers incorporam um iframe invisível ao documento (ou incorporam o documento ao próprio site malicioso) e o usam para capturar as interações dos usuários. </font><font>Essa é uma maneira comum de enganar os usuários ou roubar dados confidenciais.</font></p>
+</div>
+
+<p><font><font>Um primeiro exemplo rápido - tente carregar o exemplo anterior que mostramos acima em seu navegador - você pode </font></font><a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html" rel="noopener"><font><font>encontrá-lo ao vivo no Github</font></font></a><font><font> ( </font></font><a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html" rel="noopener"><font><font>consulte o código-fonte</font></font></a><font><font> também.) Na verdade, você não verá nada exibido na página e se olhar para o </font></font><em><font><font>console</font></font></em><font><font> nas </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"><font><font>ferramentas de desenvolvedor</font></font></a><font><font> do </font><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"><font>navegador</font></a><font> , você verá uma mensagem informando o motivo. </font><font>No Firefox, você será informado sobre o </font></font><em><font><font>Load negado pelo X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary não permite o enquadramento</font></font></em><font><font> . </font><font>Isso ocorre porque os desenvolvedores que criaram o MDN incluíram uma configuração no servidor que serve as páginas do site para impedir que elas sejam incorporadas dentro de </font></font><code>&lt;iframe&gt;</code><font><font>s (consulte </font></font><a href="https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#Configure_CSP_directives"><font><font>Configurar diretivas CSP</font></font></a><font><font>, abaixo.) Isso faz sentido - uma página MDN inteira não faz sentido para ser incorporada em outras páginas, a menos que você queira fazer algo como incorporá-las ao seu site e reivindicá-las como suas - ou tentar roubar dados via clickjacking , que são coisas muito ruins para se fazer. </font><font>Além disso, se todos começassem a fazer isso, toda a largura de banda adicional começaria a custar muito dinheiro à Mozilla.</font></font></p>
+
+<h4 id="Incorporar_somente_quando_necessário">Incorporar somente quando necessário</h4>
+
+<p><font><font>Às vezes, faz sentido incorporar conteúdo de terceiros - como vídeos e mapas do youtube -, mas você pode economizar muitas dores de cabeça se incorporar apenas conteúdo de terceiros quando completamente necessário. </font><font>Uma boa regra geral para a segurança da Web é </font></font><em><font><font>"Você nunca pode ser muito cauteloso. Se você fez isso, verifique-o de qualquer maneira. Se alguém o fez, assuma que é perigoso até prova em contrário".</font></font></em></p>
+
+<p><font><font>Além da segurança, você também deve estar ciente dos problemas de propriedade intelectual. </font><font>A maioria dos conteúdos tem direitos autorais, offline e online, mesmo o conteúdo que você não pode esperar (por exemplo, a maioria das imagens no </font></font><a href="https://commons.wikimedia.org/wiki/Main_Page" rel="noopener"><font><font>Wikimedia Commons</font></font></a><font><font> ). </font><font>Nunca exiba conteúdo em sua página da Web, a menos que você seja o proprietário ou os proprietários tenham lhe dado uma permissão inequívoca por escrito. </font><font>As penalidades por violação de direitos autorais são severas. </font><font>Novamente, você nunca pode ser muito cauteloso.</font></font></p>
+
+<p><font><font>Se o conteúdo for licenciado, você deverá obedecer aos termos da licença. </font><font>Por exemplo, o conteúdo no MDN é </font></font><a href="https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses"><font><font>licenciado sob CC-BY-SA</font></font></a><font><font> . </font><font>Isso significa que você deve </font></font><a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution" rel="noopener"><font><font>creditar-nos adequadamente</font></font></a><font><font> quando citar nosso conteúdo, mesmo que faça alterações substanciais.</font></font></p>
+
+<h4 id="Use_HTTPS">Use HTTPS</h4>
+
+<p>{{Glossary("HTTPS")}} é a versão criptografada do {{Glossary("HTTP")}}. Você deve utilizar HTTPS em seus websites sempre que possível:</p>
+
+<ol>
+ <li>HTTPS reduz a chance de que conteúdo remoto tenha sido adulterado no caminho.</li>
+ <li>HTTPS previne que conteúdo que tenha incorporado ao site acesse conteúdo em seu documento de origem, e vice versa.</li>
+</ol>
+
+<p>Utilizar HTTPS requer um certificado de segurança, que pode ser bem caro (apesar que o <a href="https://letsencrypt.org/">Let's Encrypt</a> deixe as coisas mais fáceis) — se você não puder obter um certificado, você deve fornecer seus documentos com HTTP. Contudo, por conta do segundo benefício do HTTPS descrito acima, <em>não importa o custo, você nunca deve incorporar conteúdo de terceiros em HTTP. </em>(No caso do melhor cenário, o navegador de seu usuário irá dá-lo um aviso assustador.) Todas as empresas com boa reputação irão fornecer conteúdo para ser incoporado por meio <code>&lt;iframe&gt;</code> irá fazê-lo disponível através de HTTPS — veja a URLs dentro do <code>&lt;iframe&gt;</code> <code>no</code>atributo src, quando você está incorporando conteúdo do Google Maps ou Youtube, por exemplo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Páginas do Github</a> permitem que conteúdo seja fornecido via HTTPS por padrão, então é útil para hospedar conteúdo. Se você está utilizando uma hospedagem diferente e não tem certeza do mesmo, pergunte sobre com o seu provedor de hospedagem.</p>
+</div>
+
+<h4 id="Sempre_utilize_o_atributo_sandbox">Sempre utilize o atributo <code>sandbox</code></h4>
+
+<p>Você deseja que os atacantes tenham a menor quantidade possível de poder para causar danos ao seu website, portanto, você deve dar ao conteúdo incorporado <em>apenas a permissão para fazer o seu trabalho. </em>É claro, isto se aplica ao seu próprio conteúdo, também. Um container para código onde ele possa ser utilizado apropriadamente — ou para testes — mas não pode causar nenhum dano ao resto do código base (tanto acidental quanto maliciosa) é chamado <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox</a>.</p>
+
+<p>Conteúdo fora de uma sandbox pode fazer muito mais que o esperado (executar JavaScript, submeter forms, criar novas janelas no navegador, etc.) Por padrão, você deve impor todas as restrições disponíveis utilizando o atributo<code>sandbox</code> sem parâmetros, como mostrado em nosso exemplo anterior.</p>
+
+<p>Se absolutamente necessário, você pode adicionar permissões uma a uma (dentro do valor do atributo<code>sandbox=""</code>) — veja em  {{htmlattrxref('sandbox','iframe')}}  as referências de entrada para todas as opções disponíveis. Uma nota importante é que você <em>nunca</em> deve adicionar ambos <code>allow-scripts</code> e <code>allow-same-origin</code> no atributo de sandbox — neste caso, conteúdo incorporado pode burlar a política de segurança de mesmo destino que impede sites de executarem scripts, e utilizar JavaScript para desativar o sandboxing completamente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Sandboxing não fornece nenhuma proteção se atacantes puderem enganar os usuários para que visitem  conteúdo malicioso diretamete (fora de um <code>iframe</code>). Se existir qualquer chance que certo conteúdo possa ser malicioso (exemplo, conteúdo gerado por usuários), por favor forneça-o em um {{glossary("domain")}} diferente de seu site principal.</p>
+</div>
+
+<h4 id="Configure_directivas_CSP">Configure directivas CSP</h4>
+
+<p>{{Glossary("CSP")}} significa <strong><a href="/en-US/docs/Web/Security/CSP">política de segurança de conteúdo</a></strong> e fornece um <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">conjunto de cabeçalhos HTTP</a> (metadados enviados junto com suas páginas da web quando são veiculados de um servidor da web) projetados para melhorar a segurança do seu documento HTML. Quando se trata de proteger <code>&lt;iframe&gt;</code> s, você pode <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configurar seu servidor para enviar um cabeçalho <code>X-Frame-Options</code> apropriado</a></em>.</p>
+
+<p>stands for <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong> and provides <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">a set of HTTP Headers</a> (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <code>&lt;iframe&gt;</code>s, you can <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configure your server to send an appropriate <code>X-Frame-Options</code>  header.</a></em> Isso pode impedir que outros sites incorporem seu conteúdo em suas páginas da Web (o que habilitaria o {{interwiki('wikipedia','clickjacking')}} e vários outros ataques), exatamente o que os desenvolvedores do MDN fizeram, como vimos anteriormente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode ler a publicação de Frederik Braun <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">X-Frame-Options Security Header</a> para obter mais informações sobre este tópico. Obviamente, está fora do escopo uma explicação completa neste artigo.</p>
+</div>
+
+<h2 id="The_&lt;embed>_and_&lt;object>_elements">The &lt;embed&gt; and &lt;object&gt; elements</h2>
+
+<p>The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!</p>
+
+<div class="note">
+<p><strong>Note</strong>: A <strong>plugin</strong>, in this context, refers to software that provides access to content the browser cannot read natively.</p>
+</div>
+
+<p>However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see {{anch("The case against plugins")}}, below), PDFs tend to be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.</p>
+
+<p>If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">{{htmlelement("embed")}}</th>
+   <th scope="col">{{htmlelement("object")}}</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{glossary("URL")}} of the embedded content</td>
+   <td>{{htmlattrxref('src','embed')}}</td>
+   <td>{{htmlattrxref('data','object')}}</td>
+  </tr>
+  <tr>
+   <td><em>accurate </em>{{glossary("MIME type", 'media type')}} of the embedded content</td>
+   <td>{{htmlattrxref('type','embed')}}</td>
+   <td>{{htmlattrxref('type','object')}}</td>
+  </tr>
+  <tr>
+   <td>height and width (in CSS pixels) of the box controlled by the plugin</td>
+   <td>{{htmlattrxref('height','embed')}}<br>
+    {{htmlattrxref('width','embed')}}</td>
+   <td>{{htmlattrxref('height','object')}}<br>
+    {{htmlattrxref('width','object')}}</td>
+  </tr>
+  <tr>
+   <td>names and values, to feed the plugin as parameters</td>
+   <td>ad hoc attributes with those names and values</td>
+   <td>single-tag {{htmlelement("param")}} elements, contained within <code>&lt;object&gt;</code></td>
+  </tr>
+  <tr>
+   <td>independent HTML content as fallback for an unavailable resource</td>
+   <td>not supported (<code>&lt;noembed&gt;</code> is obsolete)</td>
+   <td>contained within <code>&lt;object&gt;</code>, after <code>&lt;param&gt;</code> elements</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: <code>&lt;object&gt;</code> requires a <code>data</code> attribute, a <code>type</code> attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox, as of this writing). <code>typemustmatch</code> keeps the embedded file from running unless the <code>type</code> attribute provides the correct media type. <code>typemustmatch</code> can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin).</p>
+</div>
+
+<p>Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, and <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a> too):</p>
+
+<pre class="brush: html">&lt;embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;</pre>
+
+<p>Pretty horrible, isn't it? The HTML generated by the Adobe Flash tool tended to be even worse, using an <code>&lt;object&gt;</code> element with an <code>&lt;embed&gt;</code> element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.</p>
+
+<p>Now let's look at an <code>&lt;object&gt;</code> example that embeds a PDF into a page (see the <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> and the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p>
+
+<pre class="brush: html">&lt;object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch&gt;
+  &lt;p&gt;You don't have a PDF plugin, but you can
+    &lt;a href="mypdf.pdf"&gt;download the PDF file.
+    &lt;/a&gt;
+  &lt;/p&gt;
+&lt;/object&gt;</pre>
+
+<p>PDFs were a necessary stepping stone between paper and digital, but they pose many <a href="http://webaim.org/techniques/acrobat/acrobat">accessibility challenges</a> and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.</p>
+
+<h3 id="The_case_against_plugins">The case against plugins</h3>
+
+<p>Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For virtually all applications, it's time to stop delivering content that depends on plugins and start taking advantage of Web technologies instead.</p>
+
+<ul>
+ <li><strong>Broaden your reach to everyone. </strong>Everyone has a browser, but plugins are increasingly rare, especially among mobile users. Since the Web is easily used without any plugins, people would rather just go to your competitors' websites than install a plugin.</li>
+ <li><strong>Give yourself a break from the <a href="https://webaim.org/techniques/flash/">extra accessibility headaches </a>that come with Flash and other plugins.</strong></li>
+ <li><strong>Stay clear of additional security hazards. </strong>Adobe Flash is <a href="https://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoriously insecure,</a> even after countless patches. In 2015, Alex Stamos, then-Chief Security Officer at Facebook,  <a href="https://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">requested that Adobe discontinue Flash.</a></li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong>Due to its inherent issues and the lack of support for Flash, Adobe announced that they would stop supporting it at the end of 2020.  As of January 2020, most browsers block Flash content by default, and by December 31st of 2020, all browsers will have completly removed all Flash functionality. Any existing Flash content will be inaccessable after that date.</p>
+</div>
+
+<p>So what should you do? If you need interactivity, HTML and {{glossary("JavaScript")}} can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology. Instead of relying on Adobe Flash, you should use <a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">HTML5 video</a> for your media needs, <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> for vector graphics, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> for complex images and animations. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst was already writing some years ago</a> that Adobe Flash is rarely the right tool for the job. As for ActiveX, even Microsoft's {{glossary("Microsoft Edge","Edge")}} browser no longer supports it.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of the this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding">Test your skills: Multimedia and embedding</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third-party content like maps and videos on your pages. As you become more experienced, however, you are likely to start finding more uses for them.</p>
+
+<p>There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as {{htmlelement("video")}}, {{htmlelement("audio")}}, and {{htmlelement("img")}}, but there are others to discover, such as {{htmlelement("canvas")}} for JavaScript-generated 2D and 3D graphics, and {{SVGElement("svg")}} for embedding vector graphics. We'll look at <a href="/en-US/docs/Web/SVG">SVG</a> in the next article of the module.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html
new file mode 100644
index 0000000000..961ec6d82e
--- /dev/null
+++ b/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -0,0 +1,259 @@
+---
+title: Imagens responsivas
+slug: Aprender/HTML/Multimedia_and_embedding/Responsive_images
+translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<p class="summary">Neste artigo nós iremos aprender sobre o conceito de imagens responsivas —imagens que funcionam em dispositivos com diferentes tamanhos de tela, resoluções e outras funcionalidades— e entrar em contato com quais ferramentas o HTML oferece para ajudar a implementá-las. Imagens responsivas são apenas uma parte do web design responsivo, um futuro <a href="/en-US/docs/Learn/CSS">tópico de CSS</a> para você aprender.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Você deve ter visto a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">introdução ao HTML</a> e como <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">adicionar imagens estáticas numa página web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender como usar funcionalidades como {{htmlattrxref("srcset", "img")}} e o elemento {{htmlelement("picture")}} para implementar soluções de imagens responsivas em websites.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Por_que_imagens_responsivas">Por que imagens responsivas?</h2>
+
+<p>Então qual o problema nós estamos tentando resolver com imagens responsivas? Vamos examinar um cenário típico. Um típico website provavelmente tem uma imagem de cabeçalho, para ter uma boa aparência para os visitantes, e talvez mais algumas imagens no conteúdo abaixo. Você provavelmente quer fazer uma imagem do cabeçalho em toda a largura do cabeçalho, e o as imagens no conteúdo caiba dentro de alguma coluna. Vamos dar uma olhada em um exemplo simples disso:</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
+
+<p>Isto funciona bem em um dispositivo de tela grande, como um laptop ou desktop (você pode <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">ver o exemplo ao vivo</a> e encontrar o <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">código-fonte</a> no Github.) Nós não vamos discutir muito o CSS, exceto para dizer que:</p>
+
+<ul>
+ <li>O conteúdo do &lt;body&gt; foi colocado para o máximo de 1200 pixels de largura (width) —em viewports acima, o body continua a 1200 pixels e centrado no espaço disponível. Em viewports abaixo, o body vai usar 100% da largura disponível.</li>
+ <li>A imagem de cabeçalho foi colocada para estar sempre no centro, não importando a largura do título. Então, se a página está sendo vista em uma tela mais estreita, o detalhe importante no centro da imagem (as pessoas) continuam sendo visto, e o excesso é perdido nos lados. E tem 200 pixels de altura.</li>
+ <li>As imagens do conteúdo foram configuradas para caso o elemento body se torne menor que as imagens, então elas começam a diminuir. Assim sempre estarão dentro do body, mesmo que ultrapassando ele.</li>
+</ul>
+
+<p>Isto está bom, mas o problema vem quando você começa a ver a página em uma tela estreita - o cabeçalho parece bom, mas está começando a pegar um tamanho grande para um dispositivo móvel; A primeira imagem do conteúdo por outro lado parece terrível - neste tamanho você mal consegue ver as pessoas nela.</p>
+
+<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>
+
+<p>Seria muito melhor mostrar uma versão cortada da imagem que contenha os detalhes importantes quando a página é vista em uma tela estreita, e talvez algo entre as duas para uma tela de largura média como um tablet - isto é comumente conhecido como o <strong>problema de direção artística</strong>.</p>
+
+<p>Ainda, não é preciso embutir estas imagens grandes em páginas se será visto em pequenas telas de celulares; isto é chamado de problema de mudança de resolução - uma imagem rasterizada é um número de pixels de largura e um número de pixels de altura; como nós vimos quando olhamos para <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vetores gráficos</a>, uma imagem rasterizada começa a parecer granulada e horrível se é mostrada maior que seu tamanho original (enquanto que um vetor não). E se isto é mostrado muito menor que seu tamanho original, é um desperdício de largura de banda - usuários mobile especialmente não querem ter que gastar seu pacote de dados baixando uma imagem grande feita para desktop, quando uma imagem pequena poderia ser feita para seu dispositivo. Uma situação ideal seria ter múltiplas resoluções disponíveis e apresentar tamanhos apropriados dependendo dos diferentes dispositivos que acessam a página.</p>
+
+<p>Para tornar as coisas mais complicadas, alguns dispositivos tem uma alta resolução, que demanda imagens maiores do que as que você espera para ficar bom. Isto é essencialmente o mesmo problema, mas em um contexto diferente.</p>
+
+<p>Você pode pensar que imagens vetorizadas resolveria estes problemas, e elas resolvem em certo grau - elas têm um tamanho pequeno e se adaptam bem, e você deveria usá-las sempre que possível. Mas elas não são possíveis para todos os tipos de imagem - enquanto elas são ótimas para gráficos simples, padrões, elementos de interface, etc., começa a ficar complexo criar uma imagem baseada em vetor com o tipo de detalhe que você encontraria em uma foto, por exemplo. Formatos de imagens rasterizadas, como JPEGs, são melhores para este tipo como nós vemos no exemplo acima.</p>
+
+<p>Este tipo de problema não existe quando a web começou a existir, no começo dos anos 1990 - naquele tempo somente desktops e laptops navegavam a Web, então engenheiros de navegadores e programadores nem pensavam em implementar soluções. <em>Tecnologias de imagens responsivas</em> foram implementadas recentemente para resolver os problemas indicados acima, permitindo a você oferecer ao navegador vários arquivos de imagens, todas mostrando a mesma coisa mas contendo diferente número de pixels (mudança de resolução), ou diferentes imagens para diferente espaços de alocação (direção de arte).</p>
+
+<div class="note">
+<p><strong>Note</strong>: As novas funcionalidades discutidas neste artigo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — são todas suportadas nas versões atuais de navegadores mobile e desktop (incluindo Microsoft Edge, embora não suportada pelo Internet Explorer).</p>
+</div>
+
+<h2 id="Como_você_faz_para_criar_imagens_responsivas">Como você faz para criar imagens responsivas?</h2>
+
+<p>Nesta seção, nós iremos ver os dois problemas ilustrados acima e mostrar como resolvê-los usando fucionalidades de imagens responsivas do HTML. Você deve notar que nós iremos focar no elemento HTML {{htmlelement("img")}} para esta seção, como visto na área de conteúdo do exemplo acima - a imagem no cabeçalho da página é somente para decoração, e assim implementada usando imagens de background CSS. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS indiscutivelmente tem ferramentas melhores para design responsivo</a> do que HTML, e nós iremos falar sobre estas ferramentas em um módulo futuro de CSS.</p>
+
+<h3 id="Mudança_de_resolução_Diferentes_tamanhos">Mudança de resolução: Diferentes tamanhos</h3>
+
+<p>Então, qual é o problema que nós queremos resolver com mudança de resolução? Nós queremos mostrar identico conteúdo da imagem, somente maior ou menor dependendo do dispositivo - esta é a situação que nós temos com a segunda imagem do conteúdo em nosso exemplo. O padrão do elemento {{htmlelement("img")}} tradicionalmente somente permite apontar o navegador para uma única fonte:</p>
+
+<pre class="brush: html">&lt;img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+
+<p>Nós podemos, entretanto, usar dois novos atributos — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} —para fornecer várias fontes adicionais juntamente com sugestões para ajudar o navegador a pegar a correta. Você pode ver um exemplo disso no nosso exemplo <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> no Github (ver também <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">o código fonte</a>):</p>
+
+<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+
+<p>Os atributos <code>srcset</code> e <code>sizes</code> parecem complicados, mas não são difíceis de entender se você formata eles como mostrado acima, com uma parte diferente do valor do atributo para cada linha. Cada valor contém uma lista separada por vírgula, e cada parte da lista é dividida em três sub-partes. Vamos percorrer o conteúdo de cada agora:</p>
+
+<p><strong><code>srcset</code></strong> define o conjunto de imagens que nós iremos permitir ao navegador escolher, e qual tamanho cada imagem tem. Antes de cada vírgula nós escrevemos:</p>
+
+<ol>
+ <li>Um<strong> nome do arquivo da imagem</strong> (<code>elva-fairy-480w.jpg</code>).</li>
+ <li>Um espaço.</li>
+ <li>A <strong>largura da imagem em pixels </strong>(<code>480w</code>) — note que é usado a unidade <code>w</code>, e não <code>px</code> como você pode esperar. Este é o tamanho real da imagem, que pode ser encontrado no arquivo dela no seu computador (por exemplo no Mac você pode selecionar a imagem no Finder, e pressionar <kbd>Cmd</kbd> + <kbd>I</kbd> para mostrar as informações na tela).</li>
+</ol>
+
+<p><strong><code>sizes</code></strong> define um conjunto de condições de mídia (ex.: largura da tela) e indica qual tamanho da imagem deveria ser a melhor escolha, quando certas condições de tela são verdadeiras - Estas são as sugestões que nós falamos antes. Neste caso, antes de cada vírgula nós escrevemos:</p>
+
+<ol>
+ <li>Uma <strong>condição de mídia</strong> (<code>(max-width:480px)</code>) — Você vai aprender mais sobre isso no  <a href="/en-US/docs/Learn/CSS">tema CSS</a>, mas para agora vamos somente dizer que a condição de mídia descreve um possível estado em que a tela pode estar. Neste caso, nós estamos dizendo "quando a largura da tela é 480px ou menos".</li>
+ <li>Um espaço.</li>
+ <li>A <strong>largura do slot da imagem</strong> vai preencher quando a condição de mídia for verdadeira (<code>440px</code>).</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Para a largura do slot, você pode fornecer um tamanho absoluto (<code>px</code>, <code>em</code>) ou um tamanho relativo (como porcentagem).Você pode ter notado que o último slot de largura não tem condição de mídia - isto é o padrão que será escolhido quando nenhuma condição for verdadeira. O navegador ignora tudo depois da primeira condição satisfeita, então tenha cuidado com a ordem de condições.</p>
+</div>
+
+<p>Então, com estes atributos no lugar, o navegador irá:</p>
+
+<ol>
+ <li>Ver a largura do dispositivo.</li>
+ <li>Ver qual condição de mídia na lista <code>sizes</code> é a primeira a ser verdadeira.</li>
+ <li>Ver qual é o slot para aquela condição de mída.</li>
+ <li>Carregar a imagem definida na lista <code>srcset</code> que mais chega perto do tamanho do slot.</li>
+</ol>
+
+<p>E é isto! Então neste ponto, se um navegador suportado com uma largurar de 480px carregar a página, a condição (<code>max-width: 480px</code>) será verdadeira, então o slot <code>440px</code> será escolhido, então o <code>elva-fairy-480w.jpg</code> será carregada, como a largura inerente (<code>480w</code>) é a mais próxima de <code>440px</code>. A imagem de 800px é 128KB no disco enquanto que a versão de 480px é somente 63KB - economizando 65KB. Agora imagine se fosse uma página que tivesse várias imagens. Usando esta técnica poderia economizar os dados de usuários de celular.</p>
+
+<p>Navegadores antigos que não suportam estas funcionalidades serão ignorados, seguiremos e carregaremos a imagem definida no atributo {{htmlattrxref("src", "img")}} como normal.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> No {{htmlelement("head")}} do documento você encontrará a linha <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>: isto força navegadores de celular adotar a largura real para carregar páginas web (alguns navegadores mobile mentem sobre sua largura da janela, e em vez carregam páginas em uma largura grante e então encolhem a página carregada, o que é de muita ajuda para imagens e design responsivos. Nós iremos ensinar mais sobre isso em um módulo futuro).</p>
+</div>
+
+<h3 id="Ferramentas_de_desenvolvimento_úteis">Ferramentas de desenvolvimento úteis</h3>
+
+<p>Há algumas <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">ferramenta de desenvolvimento </a>úteis em navegadores para ajudar a exercitar o necessário para slot de largura, etc, que você precisa usar. Quando eu estava trabalhando neles, eu primeiro carreguei a versão não responsiva do meu exemplo (<code>not-responsive.html</code>), então fui no <a href="/en-US/docs/Tools/Responsive_Design_Mode">Modo de Design Responsivo </a>(Ferramentas &gt;Desenvolvimento Web &gt; Modo de Design Responsivo), que permite a você ver o layout da sua página como se ele estivesse visto através de uma variedade de diferentes tamanhos de telas.</p>
+
+<p>Eu configurei a largura da janela para 320px e depois 480px; para cada uma eu fui no <a href="/en-US/docs/Tools/Page_Inspector">DOM Inspector</a>, cliquei no elemento {{htmlelement("img")}} no qual nós estamos interessados, então olhei o tamanho na aba Box Model view no lado direito da tela. Isto deve dar para você a dica da largura de imagem que você precisa.</p>
+
+<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
+
+<p>Próximo, você pode checar se o <code>srcset </code>está funcionando configurando a largura da janela para a qual você quiser (coloque para uma largura estreita, por exemplo), abrindo o Network Inspector (Ferramentas &gt; Web Developer &gt; Network), então recarregue a página. Isto deve dar a você uma lista do que foi carregado na página, e aqui você pode checar qual arquivo da imagem foi escolhida para baixar.</p>
+
+<div class="note">
+<p><strong>Nota:  </strong>Use o Mozilla Firefox para testar <code>srcset</code>. O Chrome carrega a melhor imagem se estiver em cache no navegador, anulando o propósito do teste na ferramenta de desenvolvimento.</p>
+</div>
+
+<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Mudança_de_Resolução_Mesmo_tamanho_diferente_resoluções">Mudança de Resolução: Mesmo tamanho, diferente resoluções</h3>
+
+<p>Se você está dando suporte a múltiplas resoluções de vídeo, mas todas veem sua imagem no tamanho real na tela, você pode permitir ao navegador escolher uma resolução apropriada para a imagem usando <code>srcset</code> com x indentificadores e sem <code>sizes </code>- uma sintaxe um pouco mais fácil! Você pode encontrar um exemplo de como isto parece em <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html </a>(ver também <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">o código fonte</a>):</p>
+
+<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"&gt;
+</pre>
+
+<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">Neste exemplo, o seguinte CSS é aplicado na imagem, então ela etra uma largura de 320 pixels na tela (também chamado pixels CSS):</p>
+
+<pre class="brush: css">img {
+  width: 320px;
+}</pre>
+
+<p>Neste caso, <code>sizes</code> não é preciso - o navegador simplesmente encontra qual resolução é a que será mostrada, e fornece a mais apropriada definida no <code>srcset</code>. Então se o dispositivo que acessa a página tem um padrão de baixa resolução, com um pixel do dispositivo representando cada pixel CSS, a imagem <code>elva-fairy-320w.jpg</code> será carregada (o 1x é implícito, então você não precisa incluí-lo). Se o dispositivo tem uma alta resolução de dois pixels do dispositivo para pixel CSS ou mais, a imagem <code>elva-fairy-640w.jpg</code> será carregada. A imagem 640px é 93KB, enquanto a 320px é somente 39KB.</p>
+
+<h3 id="Direção_de_Arte">Direção de Arte</h3>
+
+<p>Recapitulando, o problema de direção de arte involve querer mudar a imagem mostrada para se adequar a diferentes tamanhos de tela. Por exemplo, se uma foto de um grande panorama com uma pessoa no centro é mostrada em uma página quando visualizada em um navegador de desktop, então é encolhido quando a página é vista em um navegador de celular, ficará ruim pois a pessoa no centro aparecerá bem pequena e difícil de ver. Provavelmente seria melhor mostrar uma imagem menor e em formato retrato (em pé) no celular, que mostrará a pessoa ampliada. O elemento {{htmlelement("picture")}} permite a nós implementar justamente este tipo de solução.</p>
+
+<p>Voltando para o nosso exemplo <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>, nós temos uma imagem que precisa de uma direção de arte:</p>
+
+<pre class="brush: html">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>
+
+<p>Vamos consertar isso, com {{htmlelement("picture")}}! Como <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> e <code>&lt;audio&gt;</code></a>, O elemento <code>&lt;picture&gt;</code> é um invólocro contendo muitos elementos {{htmlelement("source")}} que fornecem muitas fontes diferentes para o navegador escolher, seguido pelo elemento mais importante {{htmlelement("img")}}. O código em <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> ficará assim então:</p>
+
+<pre class="brush: html">&lt;picture&gt;
+  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
+  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
+  &lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>Os elementos <code>&lt;source&gt; </code>inclui um atributo <code>media</code> que contem uma condição de mídia - como no nosso primeiro exemplo <code>srcset</code>, estas condições são testadas para qual imagem será mostrada no dispositivo - a primeira que retornar um valor verdadeiro, será escolhida. Neste caso, se a largura da janela é 799px ou menor, a primeira imagem do elemento <code>&lt;source&gt;</code> será mostrada. Se a largura da janela é 800px ou maior, será escolhida a segunda.</li>
+ <li>Os atributos <code>srcset</code> contem o caminho para a imagem que será apresentada. Note que como acabamos de ver acima com <code>&lt;img&gt;</code>, <code>&lt;source&gt;</code> pode pegar um atributo srcsetcom múltiplas imagens referenciadas, e um atributo sizes também. Então você pode oferecer múltiplas imagens via um elemento <code>&lt;picture&gt;</code>, mas também oferecer múltiplas resoluções para cada uma. Na prática, você provavelmente não vai querer fazer isso com frequência.</li>
+ <li>Em todos os casos, você deve fornecer um elemento <code>&lt;img&gt;</code>, com <code>src</code> e <code>alt</code>, logo antes do <code>&lt;/picture&gt;</code>, de outra forma não aparecerá imagens. Assim um padrão será aplicado quando nenhuma condição for atendida (você pode remover o segundo elemento <code>&lt;source&gt;</code> neste exemplo), e verificar navegadores que não suportam o elemento <code>&lt;picture&gt;</code>.</li>
+</ul>
+
+<p>Este código nos permite mostrar uma imagem adequada em ambas extensas e estreitas telas, como podemos ver abaixo:</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
+
+<div class="note">
+<p>Nota: Você deveria usar o atributo <code>media</code> somente em cenários de direção de arte; quando você usa <code>media</code>, não oferecendo também condições com o atributo <code>sizes</code>.</p>
+</div>
+
+<h3 id="Por_que_não_podemos_só_fazer_isso_usando_CSS_ou_JavaScript">Por que não podemos só fazer isso usando CSS ou JavaScript?</h3>
+
+<p>Quando o navegador começa a carregar a página, inicia o download de todas as imagens antes do analisador principal ter começado a carregar e interpretar o JavaScript e o CSS da página. Isto é uma técnica útil, a qual diminui o tempo de carregamento médio em 20%. Entretanto, isto não é útil para imagens responsivas, então é necessário implementar soluções como srcset. Você não pode, por exemplo, carregar o elemento {{htmlelement("img")}}, então detectar a largura da janela com JavaScript e mudar dinamicamente o arquivo da imagem para um menor, caso deseje. Até lá, a imagem original deveria já ter sido carregado, e você iria carregar uma menor, o que é ainda pior em termos de imagens responsivas.</p>
+
+<ul>
+</ul>
+
+<h3 id="Use_bastante_formatos_de_imagens_modernos">Use bastante formatos de imagens modernos</h3>
+
+<p>Há vários novos e excitantes formatos de imagens (como WebP e JPEG-2000) que podem manter baixo tamanho de arquivo e alta qualidade ao mesmo tempo. Entretanto, o suporte do navegador é menor.</p>
+
+<p><code>&lt;picture&gt;</code> permite-nos continuar dando suporte para navegadores antigos. Você pode suprir tipos MIME dentro de atributos <code>type</code>, então o navegador pode rejeitar imediatamente arquivos não suportados:</p>
+
+<pre class="brush: html">&lt;picture&gt;
+  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
+  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
+  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li><em>Não</em> use o atributo <code>media</code>, a menos que você também precise de direção de arte.</li>
+ <li>No elemento <code>&lt;source&gt;</code>, você só pode refenciar imagens de tipos declarados em <code>type</code>.</li>
+ <li>Como antes, você é encorajado a usar uma lista separada por vírgula com <code>srcset</code> e <code>sizes</code>, caso precise.</li>
+</ul>
+
+<h2 id="Aprendizado_ativo_Implementando_suas_próprias_imagens_responsivas">Aprendizado ativo: Implementando suas próprias imagens responsivas</h2>
+
+<p>Para esse exercício, nós estamos esperando que você seja corajoso e vá sozinho.. principalmente. Nós queremos que você implemente sua própria adequada direção de arte em tela estreita/ampla usando <code>&lt;picture&gt;</code>, e um exemplo de mudança de resolução que use <code>srcset</code>.</p>
+
+<ol>
+ <li>Escreva um simples HTML contendo seu código (use <code>not-responsive.html</code> como um ponto de partida, se quiser)</li>
+ <li>Encontre uma boa imagem ampla de um panorama com algum detalhe contido em alguma parte. Crie uma versão de tamanho web usando um editor de imagem, então coloque parra mostrar uma pequena parte que amplia o detalhe, e salve em uma segunda imagem (algo como 480px está bom).</li>
+ <li>Use o elemento <code>&lt;picture&gt;</code> para implementar uma mudança de imagem!</li>
+ <li>Crie múltiplos arquivos de imagem de diferentes tamanhos, cada um mostrando a mesma imagem.</li>
+ <li>Use <code>srcset</code>/<code>size</code> para criar um exemplo de mudança de resolução, que sirva para os mesmos tamanhos de imagens em diferentes resoluções, ou diferentes tamanhos de imagens em cada largura de janela.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota:</strong>Use a ferramenta de desenvolvimento do navegador para ajudar a ver os tamanhos que você precisa, como mencionado acima.</p>
+</div>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Isto é um geral sobre imagens responsivas - nós esperamos que você tenha aproveitado estas novas técnicas. Recapitulando, há dois problemas que nós discutimos aqui:</p>
+
+<ul>
+ <li><strong>Direção de Arte: </strong>O problema consiste em apresentar imagens cortadas para diferentes layouts - por exemplo, uma imagem panorâmica mostrada completa em um layout desktop, e uma imagem retrato mostrando o objeto principal ampliado em um layout mobile. Isto pode ser resolvido usando o elemento {{htmlelement("picture")}}.</li>
+ <li><strong>Mudança de resolução:</strong> O problema é apresentar arquivos menores de imagens para dispositivos estreitos, porque eles não precisam de imagens gigantes como em computadores - e também, opcionalmente, que você quer apresentar imagens de diferentes resoluções para alta e baixa densidades de tela. Isto pode resolver usando <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (imagens SVG), e os atributos {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}}.</li>
+</ul>
+
+<p>Isto também encerra o módulo <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a>! A única coisa para fazer agora é seguir e tentar nosso teste de multimídia, e ver como você está. Se divirta.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excelente introdução a imagens responsivas</a></li>
+ <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Imagens respondivas: Se você está mudando de resolução, use srcset</a> — Inclui mais explicação sobre como o navegador resolve qual imagem usar</li>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("picture")}}</li>
+ <li>{{htmlelement("source")}}</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<h2 id="Neste_Módulo">Neste Módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imagens em HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; — outras tecnologias</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adicionando gráficos vetorias na Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagens responsivas</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
+</div>
diff --git a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..2a894b7fd0
--- /dev/null
+++ b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,319 @@
+---
+title: Conteúdo de vídeo e áudio
+slug: Aprender/HTML/Multimedia_and_embedding/Video_and_audio_content
+tags:
+  - Artigos
+  - Audio
+  - Guías
+  - HTML
+  - Video
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary"><span id="result_box" lang="pt"><span class="alt-edited">Agora que estamos à vontade para adicionar imagens simples a uma página da Web, o próximo passo é começar a adicionar players de vídeo e áudio aos seus documentos HTML!</span></span> <span class="short_text" id="result_box" lang="pt"><span class="alt-edited">Neste artigo vamos olhar para fazer exatamente isso com os elementos </span></span>{{htmlelement("video")}} e {{htmlelement("audio")}} ; <span id="result_box" lang="pt"><span class="alt-edited">Então, vamos terminar de olhar como adicionar legendas/subtítulos aos seus vídeos.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td><span class="short_text" id="result_box" lang="pt"><span>Alfabetização básica em informática</span></span>, <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">software básico instalado</a>, <span class="short_text" id="result_box" lang="pt"><span>conhecimento básico de <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">trabalhar com arquivos</a></span></span>, <span class="short_text" id="result_box" lang="pt"><span>familiaridade com os fundamentos HTML</span></span> (<span class="short_text" id="result_box" lang="pt"><span>Como coberto em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Introdução ao HTML</a></span></span>) e <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td><span id="result_box" lang="pt"><span>Para aprender a incorporar conteúdo de vídeo e áudio em uma página da Web e adicionar legendas/subtítulos ao vídeo.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Audio_e_video_na_web">Audio e video na web</h2>
+
+<p><span id="result_box" lang="pt"><span class="alt-edited">Os desenvolvedores da Web quiseram usar vídeo e áudio na Web por um longo tempo, desde o início dos anos 2000, quando começamos a ter largura de banda rápida o suficiente para suportar qualquer tipo de vídeo</span></span> ( <span id="result_box" lang="pt"><span>Os arquivos de vídeo são muito maiores que o texto ou mesmo imagens</span></span>.). Nos primeiros dias, as tecnologias web nativas, como o HTML, não tinham a capacidade de incorporar vídeo e áudio na Web, de modo que as tecnologias proprietárias (ou baseado em plugin) como o <a href="https://pt.wikipedia.org/wiki/Adobe_Flash">Flash</a> (e depois, <a href="https://pt.wikipedia.org/wiki/Silverlight">Silverlight</a>) tornaram-se populares para lidar com esse conteúdo . <span id="result_box" lang="pt"><span>Esse tipo de tecnologia funcionou bem, mas teve vários problemas, incluindo não funcionar bem com recursos HTML/CSS, problemas de segurança e problemas de acessibilidade</span></span>.</p>
+
+<p>Uma solução nativa resolveria muito disso, se bem feita. Felizmente, alguns anos depois, o {{glossary("HTML5")}} especificação tinha tais recursos adicionados, com o {{htmlelement("video")}} e{{htmlelement("audio")}} elementos, e alguns novos brilhantes {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} por controlá-los. Não veremos o JavaScript aqui - apenas os fundamentos básicos que podem ser alcançados com o HTML.</p>
+
+<p>Não ensinaremos como produzir arquivos de áudio e vídeo - isso requer um conjunto de habilidades completamente diferente. Nós fornecemos a você <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">amostras de arquivos de áudio e vídeo e exemplos de códigos</a> para sua própria experimentação, caso você não consiga se apossar.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Antes de começar aqui, você também deve saber que existem algumas {{glossary("OVP","OVPs")}} (fornecedores de vídeo online) como <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, e <a href="https://vimeo.com/">Vimeo</a>, e provedores de áudio on-line como <a href="https://soundcloud.com/">Soundcloud</a>. Essas empresas oferecem uma maneira conveniente e fácil de hospedar e consumir vídeos, para que você não precise se preocupar com o enorme consumo de largura de banda. Os OVPs geralmente oferecem código pronto para incorporar vídeo / áudio em suas páginas da web. Se você seguir esse caminho, poderá evitar algumas das dificuldades que discutimos neste artigo. Discutiremos esse tipo de serviço um pouco mais no próximo artigo.</p>
+</div>
+
+<h3 id="O_elemento_&lt;video>">O elemento &lt;video&gt; </h3>
+
+<p>O elemento {{htmlelement("video")}} permite incorporar um vídeo com muita facilidade. Um exemplo realmente simples é assim:</p>
+
+<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.webm"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Os recursos da nota são:</p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>Da mesma maneira que para o elemento {{htmlelement("img")}}, O atributo <code>src</code> contém um caminho para o vídeo que você deseja incorporar. Funciona exatamente da mesma maneira.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>Os usuários devem poder controlar a reprodução de vídeo e áudio (isso é especialmente crítico para pessoas que possuem <a href="https://pt.wikipedia.org/wiki/Epilepsia">epilepsy</a>.) Você deve usar o atributo <code>controls</code> para incluir a própria interface de controle do navegador ou criar sua interface usando o apropriado <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. No mínimo, a interface deve incluir uma maneira de iniciar e parar a mídia e ajustar o volume.</dd>
+ <dt>O parágrafo dentro do <code>&lt;video&gt;</code> tags</dt>
+ <dd>Isso é chamado de <strong>conteúdo alternativo</strong> - será exibido se o navegador que acessa a página não suportar o elemento <code>&lt;video&gt;</code>, permitindo fornecer um substituto para navegadores mais antigos. Isso pode ser o que você quiser; nesse caso, fornecemos um link direto para o arquivo de vídeo, para que o usuário possa acessá-lo de alguma forma, independentemente do navegador que estiver usando.</dd>
+</dl>
+
+<p>O vídeo incorporado será mais ou menos assim:</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>Você pode tentar o <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">exemplo ao vivo</a> aqui (veja também o <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">código fonte</a>.)</p>
+
+<h3 id="Usando_vários_formatos_de_origem_para_melhorar_a_compatibilidade">Usando vários formatos de origem para melhorar a compatibilidade</h3>
+
+<p>Há um problema no exemplo acima, que você já deve ter notado se você tentou acessar o link do video acima em navegadores mais antigos como Internet Explorer ou até mesmo uma versão antiga do Safari. O vídeo não será reproduzido, porque navegadores diferentes suportam diferentes formatos de vídeo (e áudio). Felizmente, existem coisas que você pode fazer para ajudar a evitar que isso seja um problema.</p>
+
+<h4 id="Conteúdo_de_um_arquivo_de_mídia">Conteúdo de um arquivo de mídia</h4>
+
+<p>Primeiro, vamos analisar a terminologia rapidamente. Formatos como MP3, MP4 e WebM são chamados de <a href="https://pt.wikipedia.org/wiki/Arquivo_recipiente">arquivos recipiente</a> (formatos de contêiner). Eles definem uma estrutura na qual cada faixa de áudio e / ou vídeo que compõe a mídia é armazenada, juntamente com os metadados que descrevem a mídia, quais codecs são usados ​​para codificar seus canais e assim por diante.</p>
+
+<p>As faixas de áudio e vídeo também estão em diferentes formatos, por exemplo:</p>
+
+<ul>
+ <li>Um contêiner WebM geralmente empacota o áudio do Ogg Vorbis com vídeo VP8 / VP9. Isso é suportado principalmente no Firefox e Chrome.</li>
+ <li>Um contêiner MP4 geralmente empacota áudio AAC ou MP3 com vídeo H.264. Isso é suportado principalmente no Internet Explorer e Safari.</li>
+ <li>O contêiner Ogg mais antigo tende a usar o áudio Ogg Vorbis e o vídeo Ogg Theora. Isso foi suportado principalmente no Firefox e Chrome, mas foi basicamente substituído pelo formato WebM de melhor qualidade.</li>
+</ul>
+
+<p>Existem alguns casos especiais. Por exemplo, para alguns tipos de áudio, os dados de um codec geralmente são armazenados sem um contêiner ou com um contêiner simplificado. Uma dessas instâncias é o codec FLAC, que é armazenado com mais frequência em arquivos FLAC, que são apenas faixas FLAC brutas.</p>
+
+<p>Outra situação é o sempre popular arquivo MP3. Um "arquivo MP3" é na verdade uma faixa de áudio MPEG-1 Audio Layer III (MP3) armazenada em um contêiner MPEG ou MPEG-2. Isso é especialmente interessante, pois embora a maioria dos navegadores não suporte o uso de mídia MPEG nos elementos {{HTMLElement("video")}} e {{HTMLElement("audio")}}, eles ainda podem suportar MP3 devido à sua popularidade.</p>
+
+<p>Um reprodutor de áudio tenderá a reproduzir uma faixa de áudio diretamente, por exemplo um arquivo MP3 ou Ogg. Estes não precisam de contêineres.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Não é tão simples, como você pode ver no nosso <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats#Browser_compatibility">tabela de compatibilidade de codec de áudio e vídeo</a>. Além disso, muitos navegadores de plataforma móvel podem reproduzir um formato não suportado, entregando-o ao reprodutor de mídia do sistema subjacente. Mas isso servirá por enquanto.</p>
+</div>
+
+<h4 id="Suporte_a_arquivos_de_mídia_em_navegadores">Suporte a arquivos de mídia em navegadores</h4>
+
+<p>Os codecs descritos na seção anterior existem para compactar vídeo e áudio em arquivos gerenciáveis, pois o áudio e o vídeo bruto são extremamente grandes. Cada navegador da web suporta uma variedade de <strong>{{Glossary("Codec","Codecs")}}</strong>, como Vorbis ou H.264, que são usados ​​para converter o áudio e o vídeo compactados em dados binários e vice-versa. Cada codec oferece suas próprias vantagens e desvantagens, e cada contêiner também pode oferecer seus próprios recursos positivos e negativos, afetando suas decisões sobre qual usar.</p>
+
+<p>As coisas se tornam um pouco mais complicadas porque cada navegador não apenas suporta um conjunto diferente de formatos de arquivo de contêiner, como também suporta uma seleção diferente de codecs. Para maximizar a probabilidade de seu site ou aplicativo funcionar no navegador de um usuário, você pode precisar fornecer cada arquivo de mídia usado em vários formatos. Se o seu site e o navegador do usuário não compartilharem um formato de mídia em comum, sua mídia simplesmente não será reproduzida.</p>
+
+<p>Devido à complexidade de garantir que a mídia do aplicativo seja visível em todas as combinações de navegadores, plataformas e dispositivos que você deseja acessar, a escolha da melhor combinação de codecs e contêiner pode ser uma tarefa complicada. Veja {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} para obter ajuda na seleção do formato de arquivo do contêiner mais adequado às suas necessidades; Da mesma forma, veja {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} e {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} para obter ajuda na seleção dos primeiros codecs de mídia a serem usados ​​no seu conteúdo e no seu público-alvo.</p>
+
+<p>Um aspecto adicional a ter em mente: os navegadores móveis podem suportar formatos adicionais não compatíveis com seus equivalentes de desktop, assim como podem não suportar os mesmos formatos da versão para desktop. Além disso, os navegadores de desktop e móveis <em>podem </em>ser projetados para descarregar o manuseio da reprodução de mídia (para todas as mídias ou apenas para tipos específicos que não podem ser tratados internamente). Isso significa que o suporte à mídia depende parcialmente do software que o usuário instalou.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Você pode estar se perguntando por que essa situação existe. <strong>MP3</strong> (para áudio) e <strong>MP4 / H.264</strong> (para vídeo) são amplamente suportados e de boa qualidade. No entanto, eles também são patentiados - as patentes americanas cobrem o MP3 até pelo menos 2017 e o H.264 até 2027, o que significa que os navegadores que não possuem a patente precisam pagar grandes quantias para suportar esses formatos. Além disso, muitas pessoas evitam, por princípio, software restrito, a favor de formatos abertos. É por isso que precisamos fornecer vários formatos para diferentes navegadores.</p>
+</div>
+
+<p>Então, como fazemos isso? Dê uma olhada no seguinte <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">exemplo atualizado</a>(<a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">tente ao vivo aqui</a>, também):</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Aqui nós tiramos o atributo <code>src</code> (source) do {{HTMLElement("video")}} tag, mas incluímos os elementos {{htmlelement("source")}} que apontam para suas próprias fontes. Nesse caso, o navegador passará pelo elemento {{HTMLElement("source")}} e reproduza o primeiro que ele possui o codec para suportar. A inclusão de fontes WebM e MP4 deve ser suficiente para reproduzir seu vídeo na maioria das plataformas e navegadores atualmente.</p>
+
+<p>Cada elemento <code>&lt;source&gt;</code> também tem um atributo {{htmlattrxref("type", "source")}}. Isso é opcional, mas é recomendável que você os inclua - eles contêm o {{glossary("MIME type","MIME types")}} dos arquivos de vídeo, e os navegadores podem lê-los e pular imediatamente os vídeos que não entendem. Se não estiverem incluídos, os navegadores carregarão e tentarão reproduzir cada arquivo até encontrar um que funcione, consumindo ainda mais tempo e recursos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Consulte o nosso <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">guia sobre tipos e formatos de mídias</a> (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada</p>
+</div>
+
+<h3 id="Outros_recursos_de_&lt;video>">Outros recursos de &lt;video&gt;</h3>
+
+<p>Há vários outros recursos que você pode incluir em um vídeo HTML5. Dê uma olhada no nosso terceiro exemplo, abaixo:</p>
+
+<pre class="brush: html">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Isso nos dará uma saída parecida com esta:</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Os novos recursos são:</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt>
+ <dd>Você pode controlar o tamanho do vídeo com esses atributos ou com {{Glossary("CSS")}}. Nos dois casos, os vídeos mantêm sua proporção largura-altura nativa - conhecida como <strong>proporção de tela</strong>. Se a proporção não for mantida pelos tamanhos definidos, o vídeo aumentará para preencher o espaço horizontalmente, e o espaço não preenchido receberá apenas uma cor sólida de fundo por padrão.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Faz com que o áudio ou o vídeo comece a ser reproduzido imediatamente, enquanto o restante da página está sendo carregado. É aconselhável não usar vídeo (ou áudio) de reprodução automática em seus sites, porque os usuários podem achar isso realmente irritante.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Faz com que o vídeo (ou áudio) comece a ser reproduzido novamente sempre que terminar. Isso também pode ser irritante, portanto, use apenas se for realmente necessário.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Faz com que a mídia seja reproduzida com o som desativado por padrão.</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>O URL de uma imagem que será exibida antes da reprodução do vídeo. Destina-se a ser usado para uma tela inicial ou tela de publicidade.</dd>
+ <dt>{{htmlattrxref("preload","video")}}</dt>
+ <dd>
+ <p>Usado para armazenar arquivos grandes em buffer; pode levar um dos três valores:</p>
+
+ <ul>
+  <li><code>"none"</code> não armazena em buffer o arquivo</li>
+  <li><code>"auto"</code> armazena em buffer o arquivo de mídia</li>
+  <li><code>"metadata" </code>armazena em buffer apenas os metadados do arquivo</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Você pode encontrar o exemplo acima disponível para <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">tocar ao vivo no Github</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">código fonte</a>.) Observe que não incluímos o atributo <code>autoplay</code> na versão ao vivo - se o vídeo começar a ser reproduzido assim que a página for carregada, você não poderá ver o pôster!</p>
+
+<h3 id="O_elemento_&lt;audio>">O elemento &lt;audio&gt;</h3>
+
+<p>O elemento {{htmlelement("audio")}} funciona exatamente como o elemento {{htmlelement("video")}}, com algumas pequenas diferenças, conforme descrito abaixo. Um exemplo típico pode parecer assim:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>Isso produz algo como o seguinte em um navegador:</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">run the audio demo live</a> on Github (also see the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">audio player source code</a>.)</p>
+</div>
+
+<p>Isso ocupa menos espaço do que um reprodutor de vídeo, pois não há componente visual - você só precisa exibir controles para reproduzir o áudio. Outras diferenças do vídeo HTML5 são as seguintes:</p>
+
+<ul>
+ <li>O elemento {{htmlelement("audio")}} não suporta os atributos <code>width</code>/<code>height</code> — novamente, não há componente visual; portanto, não há nada para atribuir uma largura ou altura.</li>
+ <li>Também não suporta o atributo <code>poster</code> — novamente, não há componente visual</li>
+</ul>
+
+<p>Mais do que isso, <code>&lt;audio&gt;</code> suporta todos os mesmos recursos que <code>&lt;video&gt;</code> — revise as seções acima para obter mais informações sobre elas.</p>
+
+<h3 id="Reiniciando_a_reprodução_de_mídia">Reiniciando a reprodução de mídia</h3>
+
+<p>A qualquer momento, você pode redefinir a mídia para o início, incluindo o processo de seleção da melhor fonte de mídia, se mais de uma for especificada usando o elemento  {{HTMLElement("source")}} — chamando o método {{domxref("HTMLMediaElement.load", "load()")}} do elemento:</p>
+
+<pre><code>const mediaElem = document.getElementById("my-media-element");
+mediaElem.load();</code></pre>
+
+<h3 id="Detectando_adição_e_remoção_de_faixas">Detectando adição e remoção de faixas</h3>
+
+<p>Você pode monitorar as listas de faixas em um elemento de mídia para detectar quando as faixas são adicionadas ou removidas da mídia do elemento. Por exemplo, você pode assistir ao evento {{event ("addtrack")}} ser disparado no objeto associado {{domxref ("AudioTrackList")}} (recuperado por meio de {{domxref ("HTMLMediaElement.audioTracks")}} ) para ser informado quando as faixas de áudio forem adicionadas à mídia:</p>
+
+<pre><code>const mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}</code></pre>
+
+<p>Você encontrará mais informações sobre isso na nossa documentação {{domxref ("TrackEvent")}}.</p>
+
+<h2 id="Exibindo_trilhas_de_texto_em_vídeo">Exibindo trilhas de texto em vídeo</h2>
+
+<p>Agora discutiremos um conceito um pouco mais avançado que é realmente útil para se conhecer. Muitas pessoas não podem ou não querem ouvir o conteúdo de áudio / vídeo que encontram na Web, pelo menos em determinados momentos. Por exemplo:</p>
+
+<ul>
+ <li>Muitas pessoas têm problemas auditivos (mais comumente conhecidos como deficientes auditivos ou surdos), portanto, não conseguem ouvir o áudio.</li>
+ <li>Outros podem não conseguir ouvir o áudio porque estão em ambientes barulhentos (como um bar lotado quando um jogo de esportes está sendo exibido) ou podem não querer incomodar os outros se estiverem em um local silencioso (como uma biblioteca).</li>
+ <li>As pessoas que não falam o idioma do vídeo podem querer uma transcrição de texto ou mesmo tradução para ajudá-las a entender o conteúdo da mídia.</li>
+ <li>Da mesma forma, em ambientes em que a reprodução do áudio seria uma distração ou perturbação (como em uma biblioteca ou quando um parceiro está tentando dormir), ter legendas pode ser muito útil.</li>
+</ul>
+
+<p>Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT </a>e o elemento {{htmlelement ("track")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: "Transcrever" significa "escrever as palavras faladas como texto". O texto resultante é uma "transcrição".</p>
+</div>
+
+<p>O WebVTT é um formato para gravar arquivos de texto contendo várias seqüências de texto, juntamente com metadados, como a que horas do vídeo você deseja que cada sequência de texto seja exibida e até informações limitadas sobre estilo / posicionamento. Essas cadeias de texto são chamadas de <strong>pistas </strong>e existem vários tipos de pistas que são usadas para propósitos diferentes. As dicas mais comuns são:</p>
+
+<dl>
+ <dt>subtitles</dt>
+ <dd>Traduções de material estrangeiro, para pessoas que não entendem as palavras ditas no áudio.</dd>
+ <dt>captions</dt>
+ <dd>Transcrições sincronizadas de diálogos ou descrições de sons significativos, para permitir que as pessoas que não conseguem ouvir o áudio entendam o que está acontecendo.</dd>
+ <dt>timed descriptions</dt>
+ <dd>Texto que deve ser falado pelo media player para descrever elementos visuais importantes para usuários cegos ou deficientes visuais.</dd>
+</dl>
+
+<p>Um arquivo WebVTT típico terá a seguinte aparência:</p>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+  ...</code>
+</pre>
+
+<p>Para que isso seja exibido juntamente com a reprodução de mídia HTML, você precisa:</p>
+
+<ol>
+ <li>Salve-o como um arquivo <code>.vtt</code> em um local adequado.</li>
+ <li>Vincule ao arquivo <code>.vtt</code> com o elemento {{htmlelement ("track")}}. <code>&lt;track&gt;</code> deve ser colocado dentro de <code>&lt;audio&gt;</code> ou <code>&lt;video&gt;</code>, mas depois de todos os elementos <code>&lt;source&gt;</code>. Use o atributo {{htmlattrxref ("kind", "track")}} para especificar se as pistas são <code>subtitles</code>, <code>captions, </code>ou <code>descriptions</code>. Além disso, use {{htmlattrxref ("srclang", "track")}} para informar ao navegador em que idioma você escreveu as legendas.</li>
+</ol>
+
+<p>Aqui está um exemplo:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>Isso resultará em um vídeo com legendas exibidas, mais ou menos assim:</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>Para mais detalhes, leia <a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>. Você pode <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">encontrar o exemplo</a> que acompanha este artigo no Github, escrito por Ian Devlin (consulte o <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">código-fonte</a> também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: As faixas de texto também ajudam você com o {{glossary ("SEO")}}, pois os mecanismos de pesquisa prosperam especialmente no texto. As trilhas de texto permitem até que os mecanismos de pesquisa sejam vinculados diretamente a um ponto no meio do vídeo.</p>
+</div>
+
+<h3 id="Aprendizado_ativo_incorporando_seu_próprio_áudio_e_vídeo">Aprendizado ativo: incorporando seu próprio áudio e vídeo</h3>
+
+<p>Para esse aprendizado ativo, gostaríamos (idealmente) de você sair para o mundo e gravar alguns de seus próprios vídeos e áudio - a maioria dos telefones hoje em dia permite gravar áudio e vídeo com muita facilidade, e desde que você possa transferi-lo para o seu computador, você pode usá-lo. Talvez você precise fazer algumas conversões para obter um WebM e MP4 no caso de vídeo e um MP3 e Ogg no caso de áudio, mas existem programas suficientes disponíveis para permitir isso sem problemas, como o <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> e o <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Gostaríamos que você experimentasse!</p>
+
+<p>Se você não conseguir obter nenhum vídeo ou áudio, pode usar nossos <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">exemplos de arquivos de áudio e vídeo</a> para realizar este exercício. Você também pode usar nosso código de exemplo para referência.</p>
+
+<p>Gostaríamos que você:</p>
+
+<ol>
+ <li>Salve seus arquivos de áudio e vídeo em um novo diretório no seu computador.</li>
+ <li>Crie um novo arquivo HTML no mesmo diretório, chamado <code>index.html</code>.</li>
+ <li>Adicione elementos <code>&lt;audio&gt;</code> e <code>&lt;video&gt;</code> à página; faça com que eles exibam os controles padrão do navegador.</li>
+ <li>Forneça os dois elementos <code>&lt;source&gt;</code> para que os navegadores encontrem o formato de áudio mais compatível e o carreguem. Isso deve incluir atributos de <code>type</code>.</li>
+ <li>Dê ao elemento <code>&lt;video&gt;</code> um pôster que será exibido antes que o vídeo comece a ser reproduzido. Divirta-se criando seu próprio gráfico de pôster.</li>
+</ol>
+
+<p>Para um bônus adicional, você pode tentar pesquisar faixas de texto e descobrir como adicionar legendas ao seu vídeo.</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>E isso é um tudo; esperamos que você tenha se divertido brincando com vídeo e áudio em páginas da web! No próximo artigo, veremos outras maneiras de incorporar conteúdo na Web, usando tecnologias como {{htmlelement ("iframe")}}} e {{htmlelement ("object")}}.</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>Os elementos de mídia HTML: {{htmlelement("audio")}}, {{htmlelement("video")}}, {{htmlelement("source")}}, {{htmlelement("track")}}.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Tecnologias de mídia da Web</a>.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">Guia para tipos e formatos de mídia na Web</a>.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Entrega de áudio e vídeo:</a> muitos detalhes sobre como colocar áudio e vídeo em páginas da Web usando HTML e JavaScript.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulação de áudio e vídeo:</a> muitos detalhes sobre a manipulação de áudio e vídeo usando JavaScript (por exemplo, adicionando filtros).</li>
+ <li>Opções automatizadas para <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduzir multimídia.</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<dl>
+</dl>
+
+<ul>
+</ul>