Do objeto ao iframe - outras tecnologias de incorporação - Aprendendo desenvolvimento web

Do objeto ao iframe - outras tecnologias de incorporação
========================================================

* Anterior
* Menu: Multimedia and embedding
* Próxima

Até agora você já deve ter aprendido a incorporar coisas em suas páginas da web, incluindo imagens, vídeo e áudio. 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 `<iframe>`, `<embed>`e `<object>` (en-US)elementos. `<iframe>`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.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimento básico em informática,
 software básico instalado
 , conhecimento básico sobre o
 trabalho com arquivos
 , familiaridade com os fundamentos de HTML (conforme abordado em
 Introdução ao HTML
 ) e os artigos anteriores deste módulo.
  |
| Objetivo: |

|  |
| --- |
|
 Para saber como itens incorporar em páginas da web que usam
 `<object>` (en-US),
 `<embed>`e
 `<iframe>`, como filmes em Flash e outras páginas da web.
  |

 |

Uma breve história de incorporação
----------------------------------

Há muito tempo, na Web, era popular o uso de **quadros** para criar sites - pequenas partes de um site armazenadas em páginas HTML individuais. Elas foram incorporadas em um documento mestre chamado **conjunto de quadros**, 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.

Um pouco mais tarde (final dos anos 90, início dos anos 2000), as tecnologias de plug-in tornaram-se muito populares, como Java Applets (en-US) e Flash - 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. A incorporação dessas tecnologias foi alcançada através de elementos como `<object>` (en-US), e os menos utilizados `<embed>`, e eles eram muito úteis na época. Desde então, ficaram fora de moda devido a muitos problemas, incluindo acessibilidade, segurança, tamanho do arquivo e muito mais; hoje em dia, a maioria dos dispositivos móveis não suporta mais esses plug-ins, e o suporte para desktop está saindo.

Finalmente, o elemento `<iframe>` apareceu (juntamente com outras formas de incorporar conteúdo, como `<canvas>`, `<video>` etc.). Isso fornece uma maneira de incorporar um documento da Web inteiro dentro de outro, como se fosse um `<img>`ou outro elemento, e é usado regularmente hoje .

Com a lição de história fora do caminho, vamos seguir em frente e ver como usar algumas delas.

Aprendizado ativo: usos clássicos de incorporação
-------------------------------------------------

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. O mundo on-line está muito familiarizado com o Youtube , mas muitas pessoas não conhecem alguns dos recursos de compartilhamento disponíveis. Vejamos como o YouTube nos permite incorporar um vídeo em qualquer página que gostamos de usar `<iframe>`.

1. Primeiro, vá ao Youtube e encontre o vídeo que você gosta.
2. Abaixo do vídeo, você encontrará um botão *Compartilhar* - selecione para exibir as opções de compartilhamento.
3. Selecione o botão *Incorporar* e você receberá um `<iframe>`código - copie isso.
4. Insira-o na caixa de *entrada* abaixo e veja qual é o resultado na *saída* .

Para pontos de bônus, você também pode tentar incorporar um mapa do Google no exemplo:

1. Vá para o Google Maps e encontre um mapa que você gosta.
2. Clique no "Menu Hamburger" (três linhas horizontais) no canto superior esquerdo da interface do usuário.
3. Selecione a opção *Compartilhar ou incorporar mapa* .
4. Selecione a opção Incorporar mapa, que fornecerá algum `<iframe>`código - copie isso.
5. Insira-o na caixa de *entrada* abaixo e veja qual é o resultado na *saída* .

Se você cometer um erro, sempre poderá redefini-lo usando o botão *Redefinir* . Se você realmente ficar atolado, pressione o botão *Mostrar solução* para ver uma resposta.
```

<h2>Live output</h2>

<div class="output" style="min-height: 250px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea
 id="code"
 class="input"
 style="width: 95%;min-height: 100px;"></textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
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;
}
```

```
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 =
  '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<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>\n</iframe>';
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();
};
```

Iframes em detalhes
-------------------

Então, isso foi fácil e divertido, certo? Os elementos `<iframe>` foram projetados para permitir que você incorpore outros documentos da Web ao documento atual. 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 Disqus , mapas on-line fornecedores de mapas, banners publicitários etc. Os exemplos editáveis ao vivo que você está usando neste curso são implementados usando `<iframe>`s.

Existem algumas sérias preocupações de segurança a serem consideradas com `<iframe>`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. Vamos explorar o código um pouco mais detalhadamente. Digamos que você queira incluir o glossário MDN em uma de suas páginas da web - você pode tentar algo como isto:
```

<iframe src="/pt-BR/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p>
    <a href="/pt-BR/docs/Glossary">
       Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>
```

Este exemplo inclui os fundamentos básicos necessários para usar um `<iframe>`:

`allowfullscreen`

Se definido, ele `<iframe>`poderá ser colocado no modo de tela cheia usando a API de tela cheia (en-US) (um pouco além do escopo deste artigo).

`frameborder`

Se definido como 1, isso indica ao navegador para desenhar uma borda entre esse quadro e outros quadros, que é o comportamento padrão. 0 remove a borda. Usar isso não é mais recomendado, pois o mesmo efeito pode ser melhor alcançado usando em seu CSS .`border` (en-US)`: none;`

`src`

Este atributo, como `<video>`/ `<img>`, contém um caminho apontando para o URL do documento a ser incorporado.

`width` e `height`

Esses atributos especificam a largura e a altura que você deseja que o iframe seja.

Conteúdo alternativo

Da mesma forma que outros elementos semelhantes `<video>`, você pode incluir conteúdo de fallback entre as `<iframe></iframe>`tags de abertura e fechamento que aparecerão se o navegador não suportar `<iframe>`. Nesse caso, incluímos um link para a página. É improvável que você encontre qualquer navegador que não suporte `<iframe>`s atualmente.

`sandbox`

Esse atributo, que funciona em navegadores um pouco mais modernos que o restante dos `<iframe>`recursos (por exemplo, IE 10 e superior), requer configurações de segurança mais elevadas; falaremos mais sobre isso na próxima seção.

**Nota:** Para melhorar a velocidade, é uma boa ideia definir o `src`atributo do iframe com JavaScript após o carregamento do conteúdo principal. Isso torna sua página utilizável mais cedo e diminui o tempo de carregamento da página oficial (uma importante métrica de SEO ).

### Preocupações com segurança

Acima, mencionamos preocupações de segurança - vamos abordar isso com mais detalhes agora. Não esperamos que você entenda todo esse conteúdo perfeitamente da primeira vez; 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 `<iframe>`s em seus experimentos e trabalhos. Além disso, não há necessidade de ter medo e não usar `<iframe>`s - você só precisa ter cuidado. Leia...

Fabricantes de navegadores e desenvolvedores da Web descobriram da maneira mais difícil que iframes são um alvo comum (termo oficial: **vetor de ataque** ) para pessoas más na Web (geralmente chamadas de **hackers** ou, mais precisamente, **crackers** ) 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. Por esse motivo, engenheiros de especificações e desenvolvedores de navegadores desenvolveram vários mecanismos de segurança para torná- `<iframe>`los mais seguros, e também existem práticas recomendadas a serem consideradas - abordaremos alguns deles abaixo.

**Nota:** Clickjacking é 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. Essa é uma maneira comum de enganar os usuários ou roubar dados confidenciais.

Um primeiro exemplo rápido - tente carregar o exemplo anterior que mostramos acima em seu navegador - você pode encontrá-lo ao vivo no Github ( consulte o código-fonte também.) Na verdade, você não verá nada exibido na página e se olhar para o *console* nas ferramentas de desenvolvedor do navegador , você verá uma mensagem informando o motivo. No Firefox, você será informado sobre o *Load negado pelo X-Frame-Options: /pt-BR/docs/Glossary não permite o enquadramento* . 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 `<iframe>`s (consulte Configurar diretivas CSP, 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. Além disso, se todos começassem a fazer isso, toda a largura de banda adicional começaria a custar muito dinheiro à Mozilla.

#### Incorporar somente quando necessário

À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. Uma boa regra geral para a segurança da Web é *"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".*

Além da segurança, você também deve estar ciente dos problemas de propriedade intelectual. 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 Wikimedia Commons ). 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. As penalidades por violação de direitos autorais são severas. Novamente, você nunca pode ser muito cauteloso.

Se o conteúdo for licenciado, você deverá obedecer aos termos da licença. Por exemplo, o conteúdo no MDN é licenciado sob CC-BY-SA . Isso significa que você deve creditar-nos adequadamente quando citar nosso conteúdo, mesmo que faça alterações substanciais.

#### Use HTTPS

HTTPS é a versão criptografada do HTTP. Você deve utilizar HTTPS em seus websites sempre que possível:

1. HTTPS reduz a chance de que conteúdo remoto tenha sido adulterado no caminho.
2. HTTPS previne que conteúdo que tenha incorporado ao site acesse conteúdo em seu documento de origem, e vice versa.

Utilizar HTTPS requer um certificado de segurança, que pode ser bem caro (apesar que o Let's Encrypt 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, *não importa o custo, você nunca deve incorporar conteúdo de terceiros em HTTP.* (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 `<iframe>` irá fazê-lo disponível através de HTTPS — veja a URLs dentro do `<iframe>` `no`atributo src, quando você está incorporando conteúdo do Google Maps ou Youtube, por exemplo.

**Nota:** Páginas do Github (en-US) 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.

#### Sempre utilize o atributo `sandbox`

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 *apenas a permissão para fazer o seu trabalho.* É 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 sandbox.

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`sandbox` sem parâmetros, como mostrado em nosso exemplo anterior.

Se absolutamente necessário, você pode adicionar permissões uma a uma (dentro do valor do atributo`sandbox=""`) — veja em `sandbox` as referências de entrada para todas as opções disponíveis. Uma nota importante é que você *nunca* deve adicionar ambos `allow-scripts` e `allow-same-origin` 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.

**Nota:** Sandboxing não fornece nenhuma proteção se atacantes puderem enganar os usuários para que visitem conteúdo malicioso diretamete (fora de um `iframe`). 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 domain diferente de seu site principal.

#### Configure directivas CSP

CSP (en-US) significa **política de segurança de conteúdo (en-US)** e fornece um conjunto de cabeçalhos HTTP (en-US) (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 `<iframe>`'s, você pode *configurar seu servidor para enviar um cabeçalho `X-Frame-Options` apropriado (en-US)*. Isso pode impedir que outros sites incorporem seu conteúdo em suas páginas da Web (o que habilitaria o clickjacking e vários outros ataques), exatamente o que os desenvolvedores do MDN fizeram, como vimos anteriormente.

**Nota:** Você pode ler a publicação de Frederik Braun X-Frame-Options Security Header para obter mais informações sobre este tópico. Obviamente, está fora do escopo uma explicação completa neste artigo.

The <embed> and <object> elements
---------------------------------

The `<embed>` and `<object>` (en-US) elements serve a different function to `<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!

**Nota:** A **plugin**, in this context, refers to software that provides access to content the browser cannot read natively.

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 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.

If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:

|  | `<embed>` | `<object>` (en-US) |
| --- | --- | --- |
| URL of the embedded content | `src` | `data` (en-US) |
| *accurate* media type (en-US) of the embedded content | `type` | `type` (en-US) |
| height and width (in CSS pixels) of the box controlled by the plugin | `height` `width` | `height` (en-US) `width` (en-US) |
| names and values, to feed the plugin as parameters | ad hoc attributes with those names and values | single-tag `<param>` (en-US) elements, contained within `<object>` |
| independent HTML content as fallback for an unavailable resource | not supported (`<noembed>` is obsolete) | contained within `<object>`, after `<param>` elements |

**Nota:** `<object>` requires a `data` attribute, a `type` attribute, or both. If you use both, you may also use the `typemustmatch` (en-US) attribute (only implemented in Firefox, as of this writing). `typemustmatch` keeps the embedded file from running unless the `type` attribute provides the correct media type. `typemustmatch` can therefore confer significant security benefits when you're embedding content from a different origin (it can keep attackers from running arbitrary scripts through the plugin).

Here's an example that uses the `<embed>` element to embed a Flash movie (see this live on Github, and check the source code too):

```html
<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" />
```

Pretty horrible, isn't it? The HTML generated by the Adobe Flash tool tended to be even worse, using an `<object>` element with an `<embed>` 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.

Now let's look at an `<object>` example that embeds a PDF into a page (see the live example and the source code):

```html
<object
 data="mypdf.pdf"
 type="application/pdf"
 width="800"
 height="1200"
 typemustmatch>
  <p>
    You don't have a PDF plugin, but you can
    <a href="mypdf.pdf">download the PDF file. </a>
  </p>
</object>
```

PDFs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges 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.

### The case against plugins

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.

* **Broaden your reach to everyone.** 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.
* **Give yourself a break from the extra accessibility headaches that come with Flash and other plugins.**
* **Stay clear of additional security hazards.** Adobe Flash is notoriously insecure, even after countless patches. In 2015, Alex Stamos, then-Chief Security Officer at Facebook, requested that Adobe discontinue Flash.

>
> \*\*Nota:\*\*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.
>
>
>

So what should you do? If you need interactivity, HTML and 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 HTML5 video (en-US) for your media needs, SVG (en-US) for vector graphics, and Canvas for complex images and animations. Peter Elst was already writing some years ago that Adobe Flash is rarely the right tool for the job. As for ActiveX, even Microsoft's Edge (en-US) browser no longer supports it.

Test your skills!
-----------------

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 Test your skills: Multimedia and embedding (en-US).

Summary
-------

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.

There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as `<video>`, `<audio>`, and `<img>`, but there are others to discover, such as `<canvas>` for JavaScript-generated 2D and 3D graphics, and `<svg>` for embedding vector graphics. We'll look at SVG in the next article of the module.

* Anterior
* Menu: Multimedia and embedding
* Próxima


Conteúdo de vídeo e áudio - Aprendendo desenvolvimento web

Conteúdo de vídeo e áudio
=========================

* Anterior
* Menu: Multimedia and embedding
* Próxima

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! Neste artigo vamos olhar para fazer exatamente isso com os elementos `<video>` e `<audio>` ; Então, vamos terminar de olhar como adicionar legendas/subtítulos aos seus vídeos.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Alfabetização básica em informática,
 software básico instalado,
 conhecimento básico de
 trabalhar com arquivos
 ,
 familiaridade com os fundamentos HTML
 (Como coberto em
 Introdução ao HTML) e
 Images in HTML.
  |
| Objetivo: |
 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.
  |

Audio e video na web
--------------------

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 ( Os arquivos de vídeo são muito maiores que o texto ou mesmo imagens.). 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 Flash (e depois, Silverlight) tornaram-se populares para lidar com esse conteúdo . 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.

Uma solução nativa resolveria muito disso, se bem feita. Felizmente, alguns anos depois, o HTML5 (en-US) especificação tinha tais recursos adicionados, com o `<video>` e`<audio>` elementos, e alguns novos brilhantes JavaScript APIs por controlá-los. Não veremos o JavaScript aqui - apenas os fundamentos básicos que podem ser alcançados com o HTML.

Não ensinaremos como produzir arquivos de áudio e vídeo - isso requer um conjunto de habilidades completamente diferente. Nós fornecemos a você amostras de arquivos de áudio e vídeo e exemplos de códigos para sua própria experimentação, caso você não consiga se apossar.

**Nota:** Antes de começar aqui, você também deve saber que existem algumas OVPs (fornecedores de vídeo online) como YouTube, Dailymotion, e Vimeo, e provedores de áudio on-line como Soundcloud. 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.

### O elemento <video>

O elemento `<video>` permite incorporar um vídeo com muita facilidade. Um exemplo realmente simples é assim:

```html
<video src="rabbit320.webm" controls>
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="rabbit320.webm">link to the video</a> instead.
  </p>
</video>
```

Os recursos da nota são:

`src`

Da mesma maneira que para o elemento `<img>`, O atributo `src` contém um caminho para o vídeo que você deseja incorporar. Funciona exatamente da mesma maneira.

`controls`

Os usuários devem poder controlar a reprodução de vídeo e áudio (isso é especialmente crítico para pessoas que possuem epilepsy.) Você deve usar o atributo `controls` para incluir a própria interface de controle do navegador ou criar sua interface usando o apropriado JavaScript API (en-US). No mínimo, a interface deve incluir uma maneira de iniciar e parar a mídia e ajustar o volume.

O parágrafo dentro do `<video>` tags

Isso é chamado de **conteúdo alternativo** - será exibido se o navegador que acessa a página não suportar o elemento `<video>`, 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.

O vídeo incorporado será mais ou menos assim:

![A simple video player showing a video of a small white rabbit](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/simple-video.png)

Você pode tentar o exemplo ao vivo aqui (veja também o código fonte.)

### Usando vários formatos de origem para melhorar a compatibilidade

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.

#### Conteúdo de um arquivo de mídia

Primeiro, vamos analisar a terminologia rapidamente. Formatos como MP3, MP4 e WebM são chamados de arquivos recipiente (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.

As faixas de áudio e vídeo também estão em diferentes formatos, por exemplo:

* Um contêiner WebM geralmente empacota o áudio do Ogg Vorbis com vídeo VP8 / VP9. Isso é suportado principalmente no Firefox e Chrome.
* Um contêiner MP4 geralmente empacota áudio AAC ou MP3 com vídeo H.264. Isso é suportado principalmente no Internet Explorer e Safari.
* 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.

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.

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 `<video>` e `<audio>`, eles ainda podem suportar MP3 devido à sua popularidade.

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.

**Nota:** Não é tão simples, como você pode ver no nosso tabela de compatibilidade de codec de áudio e vídeo. 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.

#### Suporte a arquivos de mídia em navegadores

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 **Codecs (en-US)**, 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.

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.

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 Escolhendo o contêiner certo (en-US) para obter ajuda na seleção do formato de arquivo do contêiner mais adequado às suas necessidades; Da mesma forma, veja Escolhendo o codec de vídeo (en-US) e Escolhendo o codec de aúdio (en-US) 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.

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 *podem* 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.

**Nota:** Você pode estar se perguntando por que essa situação existe. **MP3** (para áudio) e **MP4 / H.264** (para vídeo) são amplamente suportados e de boa qualidade. No entanto, eles também são patenteados - 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.

Então, como fazemos isso? Dê uma olhada no seguinte exemplo atualizado(tente ao vivo aqui, também):

```html
<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>
```

Aqui nós tiramos o atributo `src` (source) do `<video>` tag, mas incluímos os elementos `<source>` que apontam para suas próprias fontes. Nesse caso, o navegador passará pelo elemento `<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.

Cada elemento `<source>` também tem um atributo `type`. Isso é opcional, mas é recomendável que você os inclua - eles contêm o MIME types (en-US) 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.

**Nota:** Consulte o nosso guia sobre tipos e formatos de mídias (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

### Outros recursos de <video>

Há vários outros recursos que você pode incluir em um vídeo HTML5. Dê uma olhada no nosso terceiro exemplo, abaixo:

```html
<video
 controls
 width="400"
 height="400"
 autoplay
 loop
 muted
 poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>
```

Isso nos dará uma saída parecida com esta:

![A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/extra-video-features.png)Os novos recursos são:

`width` and `height`

Você pode controlar o tamanho do vídeo com esses atributos ou com CSS. Nos dois casos, os vídeos mantêm sua proporção largura-altura nativa - conhecida como **proporção de tela**. 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.

`autoplay`

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.

`loop`

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.

`muted`

Faz com que a mídia seja reproduzida com o som desativado por padrão.

`poster`

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.

`preload`

Usado para armazenar arquivos grandes em buffer; pode levar um dos três valores:

* `"none"` não armazena em buffer o arquivo
* `"auto"` armazena em buffer o arquivo de mídia
* `"metadata"` armazena em buffer apenas os metadados do arquivo

Você pode encontrar o exemplo acima disponível para tocar ao vivo no Github (veja também o código fonte.) Observe que não incluímos o atributo `autoplay` 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!

### O elemento <audio>

O elemento `<audio>` funciona exatamente como o elemento `<video>`, com algumas pequenas diferenças, conforme descrito abaixo. Um exemplo típico pode parecer assim:

```html
<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML5 audio. Here is a
    <a href="viper.mp3">link to the audio</a> instead.
  </p>
</audio>
```

Isso produz algo como o seguinte em um navegador:

![A simple audio player with a play button, timer, volume control, and progress bar](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/audio-player.png)

**Nota:** You can run the audio demo live on Github (also see the audio player source code.)

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:

* O elemento `<audio>` não suporta os atributos `width`/`height` — novamente, não há componente visual; portanto, não há nada para atribuir uma largura ou altura.
* Também não suporta o atributo `poster` — novamente, não há componente visual

Mais do que isso, `<audio>` suporta todos os mesmos recursos que `<video>` — revise as seções acima para obter mais informações sobre elas.

### Reiniciando a reprodução de mídia

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 `<source>` — chamando o método `load()` (en-US) do elemento:
```

const mediaElem = document.getElementById("my-media-element");
mediaElem.load();
```

### Detectando adição e remoção de faixas

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 `addtrack` ser disparado no objeto associado `AudioTrackList` (en-US) (recuperado por meio de `HTMLMediaElement.audioTracks` (en-US) ) para ser informado quando as faixas de áudio forem adicionadas à mídia:
```

const mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
  audioTrackAdded(event.track);
}
```

Você encontrará mais informações sobre isso na nossa documentação `TrackEvent` (en-US).

Exibindo trilhas de texto em vídeo
----------------------------------

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:

* Muitas pessoas têm problemas auditivos (mais comumente conhecidos como deficientes auditivos ou surdos), portanto, não conseguem ouvir o áudio.
* 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).
* 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.
* 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.

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 WebVTT (en-US) e o elemento `<track>`.

**Nota:** "Transcrever" significa "escrever as palavras faladas como texto". O texto resultante é uma "transcrição".

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 **pistas** e existem vários tipos de pistas que são usadas para propósitos diferentes. As dicas mais comuns são:

subtitles

Traduções de material estrangeiro, para pessoas que não entendem as palavras ditas no áudio.

captions

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.

timed descriptions

Texto que deve ser falado pelo media player para descrever elementos visuais importantes para usuários cegos ou deficientes visuais.

Um arquivo WebVTT típico terá a seguinte aparência:
```

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...
```

Para que isso seja exibido juntamente com a reprodução de mídia HTML, você precisa:

1. Salve-o como um arquivo `.vtt` em um local adequado.
2. Vincule ao arquivo `.vtt` com o elemento `<track>`. `<track>` deve ser colocado dentro de `<audio>` ou `<video>`, mas depois de todos os elementos `<source>`. Use o atributo `kind` para especificar se as pistas são `subtitles`, `captions,`ou `descriptions`. Além disso, use `srclang` para informar ao navegador em que idioma você escreveu as legendas.

Aqui está um exemplo:

```html
<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles\_en.vtt" srclang="en" />
</video>
```

Isso resultará em um vídeo com legendas exibidas, mais ou menos assim:

![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."](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/video-player-with-captions.png)

Para mais detalhes, leia Adicionando legendas e legendas ao vídeo HTML5. Você pode encontrar o exemplo que acompanha este artigo no Github, escrito por Ian Devlin (consulte o código-fonte 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.

**Nota:** As faixas de texto também ajudam você com o 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.

### Aprendizado ativo: incorporando seu próprio áudio e vídeo

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 Miro Video Converter e o Audacity. Gostaríamos que você experimentasse!

Se você não conseguir obter nenhum vídeo ou áudio, pode usar nossos exemplos de arquivos de áudio e vídeo para realizar este exercício. Você também pode usar nosso código de exemplo para referência.

Gostaríamos que você:

1. Salve seus arquivos de áudio e vídeo em um novo diretório no seu computador.
2. Crie um novo arquivo HTML no mesmo diretório, chamado `index.html`.
3. Adicione elementos `<audio>` e `<video>` à página; faça com que eles exibam os controles padrão do navegador.
4. Forneça os dois elementos `<source>` para que os navegadores encontrem o formato de áudio mais compatível e o carreguem. Isso deve incluir atributos de `type`.
5. Dê ao elemento `<video>` 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.

Para um bônus adicional, você pode tentar pesquisar faixas de texto e descobrir como adicionar legendas ao seu vídeo.

Resumo
------

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 `<iframe>` e `<object>` (en-US).

Ver também
----------

* Os elementos de mídia HTML: `<audio>`, `<video>`, `<source>`, `<track>`.
* Tecnologias de mídia da Web (en-US).
* Guia para tipos e formatos de mídia na Web.
* Adicionando legendas e legendas ao vídeo HTML5.
* Entrega de áudio e vídeo: (en-US) muitos detalhes sobre como colocar áudio e vídeo em páginas da Web usando HTML e JavaScript.
* Manipulação de áudio e vídeo: (en-US) muitos detalhes sobre a manipulação de áudio e vídeo usando JavaScript (por exemplo, adicionando filtros).
* Opções automatizadas para traduzir multimídia.
* Anterior
* Menu: Multimedia and embedding
* Próxima


Imagens no HTML - Aprendendo desenvolvimento web

Imagens no HTML
===============

* Menu: Multimedia and embedding
* Próxima

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 `<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 `<figure>`, e detalhando como ele se relaciona com imagens de fundo do CSS.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimento básico em informática,
 Instalando os Programas Básicos, conhecimento básico em
 lidando com arquivos, familiaridade com fundamentos do HTML (como abordado em
 Iniciando com HTML.)
  |
| Objetivos: |
 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.
  |

Como colocamos uma imagem numa página web?
------------------------------------------

Para colocar uma única imagem em uma página da web, usamos o elemento `<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 — `src` (às vezes pronunciado como seu título completo, *source*). 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 `href` no elemento `<a>`.

**Nota:** Antes de continuar, você deveria ler Um guia rápido sobre URLs e caminhos para refrescar sua memória sobre URL relativo e absoluto.

Por exemplo, se sua imagem for chamada `dinossauro.jpg`, e está no mesmo diretório de sua página HTML, você poderia inserir a imagem assim:

```html
<img src="dinossauro.jpg" />
```

Se a imagem estivesse em um subdiretório de `images`, que estivesse dentro do mesmo diretório da página HTML (que o Google recomenda para fins de indexição/SEO), então você a incorporaria da seguinte maneira:

```html
<img src="images/dinossauro.jpg" />
```

E assim por diante.

**Nota:** 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; `dinosaur.jpg` é melhor que `img835.png`.

Você pode incorporar a imagem usando seu URL absoluto, por exemplo:

```html
<img src="https://www.example.com/images/dinosaur.jpg" />
```

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.

**Aviso:** A maioria das imagens tem direitos autorais. Não exiba uma imagem em sua página da web, a menos que:

 1) você é o dono da imagem
 2) você recebeu permissão explícita e por escrito do proprietário da imagem, ou
 3) você tem ampla prova de que a imagem é, de fato, de domínio público.

Violações de direitos autorais são ilegais e antiéticas. Além disso, **nunca** aponte seu atributo `src` 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.

Nosso código acima nos daria o seguinte resultado:

![A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/basic-image.png)

**Nota:** Elementos como `<img>` e `<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.

**Nota:** Você pode encontrar o exemplo final desta seção running on Github (Veja o source code também.)

### Texto alternativo

O próximo atributo que veremos é `alt`. 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:

```html
<img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth" />
```

A maneira mais fácil de testar seu texto `alt` é digitar incorretamente seu nome de arquivo. Se, por exemplo, o nome da nossa imagem estivesse escrito `dinosooooor.jpg`, o navegador não exibiria a imagem, mas exibiria o texto alternativo:

![The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/alt-text.png)

Então, por que você veria ou precisaria de texto alternativo? Pode ser útil por vários motivos:

* O usuário é deficiente visual e usa um leitor de tela para ler a web para eles. De fato, ter o texto alternativo disponível para descrever imagens é útil para a maioria dos usuários.
* Como descrito acima, você pode ter digitado o nome do arquivo ou caminho errado.
* O navegador não suporta o tipo de imagem. Algumas pessoas ainda usam navegadores somente de texto, como Lynx, que alternativamente exibe o texto alternativo das imagens.
* 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.
* 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.

O que exatamente você deve escrever dentro do seu atributo `alt`? Depende do *por que* a imagem está lá em primeiro lugar. Em outras palavras, o que você perde se sua imagem não aparecer:

* **Decoração.** Se a imagem é apenas decoração e não faz parte do conteúdo, adicione um espaço em branco `alt=""`. 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. CSS background images deve ser usado para inserir decoração, mas se for inevitável, `alt=""` é o melhor caminho a percorrer.
* **Conteúdo.** Se sua imagem fornecer informações significativas, forneça as mesmas informações em um *breve* `alt` texto. Ou melhor ainda, no texto principal que todos podem ver. Não escreva redundante `alt` 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 `alt=""`.
* **Link.** Se você colocar uma imagem dentro das tags `<a>`, para transformar uma imagem em um link, você ainda deve fornecer links acessíveis. Nesses casos, você também pode escrevê-lo no mesmo elemento `<a>`, ou dentro do atributo `alt` da imagem. O que funcionar melhor no seu caso.
* **Texto.** Você não deve colocar seu texto em imagens. Se o cabeçalho principal precisar de uma sombra projetada, por exemplo, use CSS para isso, em vez de colocar o texto em uma imagem. No entanto, se você *realmente não puder evitar fazer isso*, deve fornecer o texto dentro do atributo `alt`.

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.

**Nota:** Para mais informações, consulte o nosso guia para Textos alternativos.

### Largura e altura

Você pode usar os atributos `width` e `height`, 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 `Cmd` + `I` para exibir as informações do arquivo de imagem. Voltando ao nosso exemplo, poderíamos fazer isso:

```html
<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" />
```

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:

![The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/alt-text-with-width-height.png)

É uma coisa boa a fazer, resultando no carregamento da página mais rápido e sem problemas.

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 proporção de tela. Você deve usar um editor de imagens para colocar sua imagem no tamanho correto antes de colocá-la em sua página da web.

**Nota:** Se você precisar alterar o tamanho de uma imagem, use CSS então.

### Títulos de imagem

Como nos links, você também pode adicionar o atributo `title` nas images, para fornecer mais informações de suporte, se necessário. No nosso exemplo, poderíamos fazer isso:

```html
<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" />
```

Isso nos dá uma dica de ferramenta, assim como os títulos dos links:

![The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum ](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/image-with-title.png)

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.

### Aprendizado ativo: incorporando uma imagem

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 `<img>` tag; gostaríamos que você incorporasse a imagem localizada no seguinte URL:
```

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
```

Anteriormente, dissemos para nunca vincular as imagens a outros servidores, mas isso é apenas para fins de aprendizado; portanto, deixaremos você de fora dessa vez.

Também gostaríamos que você:

* Adicione algum texto alternativo e verifique se ele funciona incorretamente com o URL da imagem.
* Defina a imagem correta `width` e `height` (dica; isto é 200px largo e 171px altura), experimente outros valores para ver qual é o efeito.
* Defina um `title` na imagem.

Se você cometer um erro, sempre poderá redefini-lo usando o botão *Reset*. Se você realmente ficar preso, pressione o botão *Show solution* para ver a resposta:
```

<h2>Input</h2>
<textarea id="code" class="input"><img></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
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;
}
```

```
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 =
    '<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">';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

Anotar imagens com figuras e legendas de figuras
------------------------------------------------

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:

```html
<div class="figure">
  <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" />

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>
```

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?

Uma solução melhor, é usar os elementos do HTML5 `<figure>` e `<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:
```

<figure>
  <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">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
```

O elemento `<figcaption>` informa aos navegadores e à tecnologia de assistência que a legenda descreve o outro conteúdo do elemento `<figure>`.

**Nota:** Do ponto de vista da acessibilidade, legendas e `alt` texto têm papéis distintos. As legendas beneficiam até as pessoas que podem ver a imagem, enquanto `alt` texto fornece a mesma funcionalidade que uma imagem ausente. Portanto, legendas e `alt` 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.

Uma figura não precisa ser uma imagem. É uma unidade de conteúdo independente que:

* Expressa seu significado de maneira compacta e fácil de entender.
* Pode ir em vários lugares no fluxo linear da página.
* Fornece informações essenciais de suporte ao texto principal.

Uma figura pode ser várias imagens, um trecho de código, áudio, vídeo, equações, uma tabela ou outra coisa.

### Aprendizado ativo: criando uma figura

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:

* Envolve em um elemento `<figure>`.
* Copie o texto do atributo `title`, remova o atributo `title`, e coloque o texto dentro de um elemento `<figcaption>` abaixo da imagem.

Se você cometer um erro, sempre poderá redefini-lo usando o botão *Reset*. Se você realmente ficar preso, pressione o botão *Show solution* para ver a resposta:
```

<h2>Input</h2>
<textarea id="code" class="input"></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
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;
}
```

```
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 =
    '<figure>\n <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 <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

Imagens de fundo CSS
--------------------

Você também pode usar CSS para incorporar imagens em páginas da web (e JavaScript, mas isso é outra história). A propriedade `background-image` (en-US) do CSS, e outras propriedades `background-*`, 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:

```css
p {
  background-image: url("images/dinosaur.jpg");
}
```

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!

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.

**Nota:** Você aprenderá muito mais sobre CSS background images (en-US) no nosso tópico de CSS.

É 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.

* Menu: Multimedia and embedding
* Próxima


Adicionando vetor gráfico na web - Aprendendo desenvolvimento web

Adicionando vetor gráfico na web
================================

* Anterior
* Menu: Multimedia and embedding
* Próxima

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.

|  |  |
| --- | --- |
| Prerequisites: |
 You should know the
 basics of HTML
 and how to
 insert an image into your document.
  |
| Objective: | Learn how to embed an SVG (vector) image into a webpage. |

**Nota:** This article doesn't intend to teach you SVG; just what it is, and how to add it to web pages.

O que são vetores gráficos?
---------------------------

Na web, você pode trabalhar com dois tipos de imagem — **raster images**, and **vector images**:

* **Imagens Raster** 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 (`.bmp`), PNG (`.png`), JPEG (`.jpg`), and GIF (`.gif`.)
* **Imagens vetoriais** 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 SVG format allows us to create powerful vector graphics for use on the Web.

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 vector-versus-raster.html — 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.

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.

![Two star images](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web/raster-vector-default-size.png)

![Two star images zoomed in, one crisp and the other blurry](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web/raster-vector-zoomed.png)

**Nota:** 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 vector-versus-raster.html demo for a real example!

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.

What is SVG?
------------

SVG is an 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 `<circle>` and `<rect>`. More advanced SVG features include `<feColorMatrix>` (en-US) (transform colors using a transformation matrix,) `<animate>` (animate parts of your vector graphic,) and `<mask>` (apply a mask over the top of your image.)

As a simple example, the following code creates a circle and a rectangle:

```html
<svg
 version="1.1"
 baseProfile="full"
 width="300"
 height="200"
 xmlns="https://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>
```

This creates the following output:

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 Inkscape or Illustrator. 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.)

SVG has some additional advantages besides those described so far:

* Text in vector images remains accessible (which also benefits your SEO).
* 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.

So why would anyone want to use raster graphics over SVG? Well, SVG does have some disadvantages:

* SVG can get complicated very quickly, meaning that file sizes can grow; complex SVGs can also take significant processing time in the browser.
* SVG can be harder to create than raster images, depending on what kind of image you are trying to create.
* 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.)

Raster graphics are arguably better for complex precision images such as photos, for the reasons described above.

**Nota:** In Inkscape, save your files as Plain SVG to save space. Also, please refer to this article describing how to prepare SVGs for the Web.

Adding SVG to your pages
------------------------

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

### The quick way: `<img>`

To embed an SVG via an `<img>` element, you just need to reference it in the src attribute as you'd expect. You will need a `height` or a `width` attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

```html
<img
 src="equilateral.svg"
 alt="triangle with all three sides equal"
 height="87"
 width="100" />
```

#### Pros

* Quick, familiar image syntax with built-in text equivalent available in the `alt` attribute.
* You can make the image into a hyperlink easily by nesting the `<img>` inside an `<a>` element.
* 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.

#### Cons

* You cannot manipulate the image with JavaScript.
* 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.)
* You cannot restyle the image with CSS pseudoclasses (like `:focus`).
### Troubleshooting and cross-browser support

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 `src` attribute and use a `srcset` 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:

```html
<img
 src="equilateral.png"
 alt="triangle with equal sides"
 srcset="equilateral.svg" />
```

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:

```css
background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;
```

Like the `<img>` 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.

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 article will point you in the right direction.

### How to include SVG code inside your HTML

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 **SVG inline**, or **inlining SVG**. Make sure your SVG code snippet begins and ends with the `<svg></svg>` tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document:

```html
<svg width="300" height="200">
  <rect width="100%" height="100%" fill="green" />
</svg>
```

#### Pros

* Putting your SVG inline saves an HTTP request, and therefore can reduce a bit your loading time.
* You can assign `class`es and `id`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 SVG presentation attribute as a CSS property.
* Inlining SVG is the only approach that lets you use CSS interactions (like `:focus`) and CSS animations on your SVG image (even in your regular stylesheet.)
* You can make SVG markup into a hyperlink by wrapping it in an `<a>` element.

#### Cons

* This method is only suitable if you're using the SVG in only one place. Duplication makes for resource-intensive maintenance.
* Extra SVG code increases the size of your HTML file.
* 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.
* You may include fallback in a `<foreignObject>` (en-US) 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.
### How to embed an SVG with an `<iframe>`

You can open SVG images in your browser just like webpages. So embedding an SVG document with an `<iframe>` is done just like we studied in From <object> to <iframe> — other embedding technologies.

Here's a quick review:

```html
<iframe src="triangle.svg" width="500" height="500" sandbox>
  <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
```

This is definitely not the best method to choose:

#### Cons

* `iframe`s do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for `iframe`s altogether.
* Moreover, unless the SVG and your current webpage have the same origin, you cannot use JavaScript on your main webpage to manipulate the SVG.
Active Learning: Playing with SVG
---------------------------------

In this active learning section we'd like you to simply have a go at playing with some SVG for fun. In the *Input* section below you'll see that we've already provided you with some samples to get you started. You can also go to the SVG Element Reference, 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.

If you get stuck and can't get your code working, you can always reset it using the *Reset* button.
```

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="width: 95%;min-height: 200px;">
  <svg width="100%" height="100%">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
    <polygon points="120,0 240,225 0,225" fill="green"/>
    <text x="50" y="100" font-family="Verdana" font-size="55"
 fill="white" stroke="black" stroke-width="2">
            Hello!
    </text>
  </svg>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" disabled />
</div>
```

```
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;
}
```

```
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();
};
```

Summary
-------

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.

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.

See also
--------

* SVG tutorial on MDN
* Quick tips for responsive SVGs
* Sara Soueidan's tutorial on responsive SVG images
* Accessibility benefits of SVG
* How to scale SVGs (it's not as simple as raster graphics!)
* Anterior
* Menu: Multimedia and embedding
* Próxima