unslug pt-br: move

108 files changed, 19919 insertions, 0 deletions

diff --git a/files/pt-br/learn/accessibility/acessibilidade_problemas/index.html b/files/pt-br/learn/accessibility/accessibility_troubleshooting/index.html
index 727433531a..727433531a 100644
--- a/files/pt-br/learn/accessibility/acessibilidade_problemas/index.html
+++ b/files/pt-br/learn/accessibility/accessibility_troubleshooting/index.html
diff --git a/files/pt-br/learn/accessibility/css_e_javascript/index.html b/files/pt-br/learn/accessibility/css_and_javascript/index.html
index f0d8a728c5..f0d8a728c5 100644
--- a/files/pt-br/learn/accessibility/css_e_javascript/index.html
+++ b/files/pt-br/learn/accessibility/css_and_javascript/index.html
diff --git a/files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html b/files/pt-br/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
index 762169926c..762169926c 100644
--- a/files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html
+++ b/files/pt-br/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
diff --git a/files/pt-br/learn/common_questions/como_a_internet_funciona/index.html b/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html
index 6bc88ac21f..6bc88ac21f 100644
--- a/files/pt-br/learn/common_questions/como_a_internet_funciona/index.html
+++ b/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html
diff --git a/files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html b/files/pt-br/learn/common_questions/how_much_does_it_cost/index.html
index 7c92c2fb03..7c92c2fb03 100644
--- a/files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html
+++ b/files/pt-br/learn/common_questions/how_much_does_it_cost/index.html
diff --git a/files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html b/files/pt-br/learn/common_questions/set_up_a_local_testing_server/index.html
index 83b4f50a41..83b4f50a41 100644
--- a/files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html
+++ b/files/pt-br/learn/common_questions/set_up_a_local_testing_server/index.html
diff --git a/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html b/files/pt-br/learn/common_questions/thinking_before_coding/index.html
index 342692db46..342692db46 100644
--- a/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html
+++ b/files/pt-br/learn/common_questions/thinking_before_coding/index.html
diff --git a/files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html b/files/pt-br/learn/common_questions/what_are_browser_developer_tools/index.html
index 80df8f9ddf..80df8f9ddf 100644
--- a/files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html
+++ b/files/pt-br/learn/common_questions/what_are_browser_developer_tools/index.html
diff --git a/files/pt-br/learn/common_questions/o_que_são_hyperlinks/index.html b/files/pt-br/learn/common_questions/what_are_hyperlinks/index.html
index 5cfb905389..5cfb905389 100644
--- a/files/pt-br/learn/common_questions/o_que_são_hyperlinks/index.html
+++ b/files/pt-br/learn/common_questions/what_are_hyperlinks/index.html
diff --git a/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html b/files/pt-br/learn/common_questions/what_is_a_web_server/index.html
index f963103480..f963103480 100644
--- a/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html
+++ b/files/pt-br/learn/common_questions/what_is_a_web_server/index.html
diff --git a/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html b/files/pt-br/learn/common_questions/what_software_do_i_need/index.html
index 392b7fd03a..392b7fd03a 100644
--- a/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html
+++ b/files/pt-br/learn/common_questions/what_software_do_i_need/index.html
diff --git a/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..b3988ca69b
--- /dev/null
+++ b/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,345 @@
+---
+title: Cascade and inheritance
+slug: Aprender/CSS/Construindo_blocos/Cascade_and_inheritance
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>O objetivo desta lição é desenvolver sua compreensão para alguns dos conceitos mais fundamentais de CSS - cascata, especificidade e herança - que controlam como o CSS é aplicado ao HTML e como os conflitos são resolvidos.</p>
+
+<p>Embora esta lição possa parecer menos pouco relevante e mais acadêmico do que algumas outras partes do curso, a compreensão desses itens (cascata, especificidade e herança), poupará muito tempo no futuro! Recomendamos que você trabalhe nesta seção com cuidado e verifique se entendeu os conceitos antes de prosseguir.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Aprender sobre cascata e especificidade, e como funciona a herança em CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Regras_de_Conflitos">Regras de Conflitos</h2>
+
+<p>CSS - <strong>Cascading Style Sheets</strong>, <em>cascata</em> (a primeira palavra) é muito importante compreender - a maneira como a<em> cascata </em>se comporta é a chave para entender <strong>CSS</strong>.</p>
+
+<p>Em algum momento, você estará trabalhando em um projeto e descobrirá que o CSS que você pensou que deveria ser aplicado a um elemento não está funcionando. Normalmente, o problema é que você criou duas regras que poderiam se aplicar ao mesmo elemento. A cascata e o conceito intimamente relacionado com especificidade que são mecanismos que controlam qual regra se aplica quando existe tal conflito. A regra que define o estilo do seu elemento pode não ser a esperada, portanto, você precisa entender como esses mecanismos funcionam.</p>
+
+<p>Também é importante aqui é o conceito de <strong>herança</strong>, o que significa que algumas propriedades CSS por padrão herdam os valores definidos no elemento pai do elemento atual, e outras não. Isso também pode causar algum comportamento que você não esperava.</p>
+
+<p>Vamos começar dando uma olhada rápida nas nestes itens com os quais estamos lidando (cascata, especificidade e herança), então vamos ver como elas interagem entre si e com o CSS. Isso pode parecer um conjunto de conceitos difíceis de entender, mas a medida que você pratica mais a escrita de CSS, o funcionamento vai se tornando mais óbvio para você.</p>
+
+<h3 id="The_cascade_-_A_Cascata">The cascade - A Cascata</h3>
+
+<p>Stylesheets <strong>cascade (Cascata)</strong> — em um nível muito simples, significa que a ordem das regras CSS é importante; quando se aplicam duas regras com especificidade igual, a que vier por último no CSS é a que será usada.</p>
+
+<p>No exemplo abaixo, temos duas regras que podem ser aplicadas ao h1. O h1 acaba tendo a cor azul - essas regras têm um seletor idêntico e, portanto, carregam a mesma especificidade, portanto, o último na ordem de origem vence.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+
+<h3 id="Specificity_-_Especificidade">Specificity - Especificidade</h3>
+
+<p>A especificidade é como o navegador decide/verifica qual regra se aplica se várias regras têm seletores diferentes, que poderiam ser aplicadas ao mesmo elemento. É basicamente uma medição de qual das regras/caracteristicas específica será a mais indicada/específica de um seletor:</p>
+
+<ul>
+ <li>
+  <p>Um seletor de elemento é menos específico - ele selecionará todos os elementos daquele tipo que aparecem em uma página - portanto, obterá uma pontuação mais baixa.</p>
+ </li>
+ <li>Um seletor de classe é mais específico - ele selecionará apenas os elementos em uma página que possuem um valor de atributo de classe específico - portanto, obterá uma pontuação mais alta.</li>
+</ul>
+
+<p>Hora do exemplo! Abaixo, temos novamente duas regras que podem ser aplicadas ao h1. O h1 abaixo acaba sendo colorido em vermelho - o seletor de classe dá a sua regra uma especificidade mais alta e, portanto, será aplicada mesmo que a regra com o seletor de elemento apareça mais abaixo na ordem de origem.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+
+<p>Explicaremos a pontuação de especificidade mais tarde.</p>
+
+<h3 id="Inheritance_-_Herança">Inheritance - Herança</h3>
+
+<p>A herança também precisa ser entendida neste contexto - alguns valores de propriedade CSS definidos em elementos pais são herdados por seus elementos filhos e outros não.</p>
+
+<p>Por exemplo, se você definir uma cor e uma família de fontes em um elemento, todos os elementos dentro dele também serão estilizados com essa cor e fonte, a menos que você tenha aplicado cores e valores de fonte diferentes diretamente a eles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+
+<p>Algumas propriedades não herdam - por exemplo, se você definir um {{cssxref ("width")}} de 50% em um elemento, todos os seus descendentes não terão uma largura de 50% da largura de seus pais. Se fosse esse o caso, CSS seria muito frustrante de usar!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Nas páginas de referência de propriedade CSS do MDN, você pode encontrar uma caixa de informações técnicas, geralmente na parte inferior da seção de especificações, que lista uma série de pontos de dados sobre essa propriedade, incluindo se ela é herdada ou não. Veja o <a href="/en-US/docs/Web/CSS/color#Specifications">color property Specifications section</a> (seção de especificações de propriedade de cor) , por exemplo.</p>
+</div>
+
+<h2 id="Entendendo_como_os_conceitos_funcionam_juntos">Entendendo como os conceitos funcionam juntos</h2>
+
+<p>Esses três conceitos juntos controlam que caractersticas CSS se aplicam a qual elemento; nas seções a seguir, veremos como eles funcionam juntos. Às vezes pode parecer um pouco complicado, mas você começará a entende-los conforme for ficando mais experiente com CSS, e você sempre poderá consultar os detalhes se esquecer! Mesmo os desenvolvedores experientes não se lembram de todos os detalhes.</p>
+
+<p>O vídeo a seguir mostra como você pode usar o Firefox DevTools para inspecionar a cascata, a especificidade de uma página e muito mais:</p>
+
+<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p>
+
+<h2 id="Entendendo_Herança">Entendendo Herança</h2>
+
+<p>Começaremos com herança. No exemplo abaixo, temos um {{HTMLElement ("ul")}}, com dois níveis de listas não ordenadas aninhadas dentro dele. Demos ao &lt;ul&gt; externo uma borda, preenchimento e uma cor de fonte.</p>
+
+<p>A cor foi aplicada aos filhos diretos, mas também aos filhos indiretos - os filhos imediatos &lt;li&gt; são aqueles dentro da primeira lista aninhada. Em seguida, adicionamos uma classe especial à segunda lista aninhada e aplicamos uma cor diferente a ela. Isso então é herdado por meio de seus filhos.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+
+<p>Coisas como larguras (conforme mencionado acima), margens, preenchimento e bordas não são herdadas. Se uma borda fosse herdada pelos filhos de nossa lista, cada lista e cada item da lista ganhariam uma borda - provavelmente não é um efeito que desejaríamos!</p>
+
+<p>Quais propriedades são herdadas por padrão e quais não são, depende do bom senso.</p>
+
+<h3 id="Controlando_Herança">Controlando Herança</h3>
+
+<p>CSS fornece quatro valores especiais de propriedades universais para controlar a herança. Cada propriedade CSS aceita esses valores.</p>
+
+<p>{{cssxref("inherit")}}</p>
+
+<p>    Define o valor da propriedade aplicada a um elemento selecionado para ser o mesmo de          seu elemento pai. Efetivamente, isso "ativa a herança".</p>
+
+<p>{{cssxref("initial")}}</p>
+
+<dl>
+ <dd>Define o valor da propriedade aplicada a um elemento selecionado para o valor inicial dessa propriedade.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>Restaura a propriedade com seu valor natural, o que significa que se a propriedade é herdada naturalmente, ela age como herdada, caso contrário, ela age como inicial.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Temos um comando mais recente, {{cssxref("revert")}}, mas nem todos os navegadores suportam</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: veja {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}}para obter mais informações sobre como cada um deles funcionam.</p>
+</div>
+
+<p>Podemos ver uma lista de links e explorar como funcionam os valores universais. O exemplo ao vivo abaixo permite que você brinque com o CSS e veja o que acontece quando você faz alterações. Usar/modificar o código é realmente a melhor maneira de se familiarizar com HTML e CSS.</p>
+
+<p>Por exemplo:</p>
+
+<ol>
+ <li>O segundo item da lista tem a classe my-class-1 aplicada. Isso define a cor do elemento &lt;a&gt; aninhado dentro para herdar. Se você remover a regra, como ela muda a cor do link?</li>
+ <li>Você consegue entende por que o terceiro e o quarto links são da mesma cor? Verifique a descrição dos valores acima se não.</li>
+ <li>Qual dos links mudará de cor se você definir uma nova cor para o elemento &lt;a&gt; - por exemplo, um {color: red; }?</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p>
+
+<h3 id="Redefinindo_todos_os_Valores_de_Propriedade">Redefinindo todos os Valores de Propriedade</h3>
+
+<p>A propriedade abreviada CSS <em><strong>all</strong></em> pode ser usada para aplicar um desses valores de herança a (quase) todas as propriedades de uma vez. Seu valor pode ser qualquer um dos valores de herança (herdar, inicial, não definido ou reverter). É uma maneira conveniente de desfazer as alterações feitas nos estilos para que você possa voltar a um ponto de partida conhecido antes de iniciar novas alterações.</p>
+
+<p>No exemplo abaixo, temos duas aspas em bloco. O primeiro tem um estilo aplicado ao próprio elemento blockquote, o segundo tem uma classe aplicada ao <em>blockquote</em> que define o valor de <strong>all (todos)</strong> como <strong>unset (indefinido)</strong>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+
+<p>Tente definir o valor de todos para alguns dos outros valores disponíveis e observe qual é a diferença.</p>
+
+<h2 id="Compreendendo_Cascata">Compreendendo Cascata</h2>
+
+<p>Agora entendemos por que um parágrafo aninhado profundamente na estrutura do seu HTML tem a mesma cor do CSS aplicado ao corpo e, a partir das lições introdutórias, entendemos como alterar o CSS aplicado a algo em qualquer ponto do documento - seja atribuindo CSS a um elemento ou criando uma classe. Agora daremos uma olhada apropriada em como a cascata define quais regras CSS se aplicam quando mais de uma coisa pode estilizar um elemento.</p>
+
+<p>Há três fatores a serem considerados, listados aqui em ordem crescente de importância. Os posteriores anulam os anteriores:</p>
+
+<ol>
+ <li><strong>Ordem da Fonte</strong></li>
+ <li><strong>Especificidade</strong></li>
+ <li><strong>Importância</strong></li>
+</ol>
+
+<p>Vamos dar uma olhada neles para ver como os navegadores descobrem exatamente o que CSS deve ser aplicado.</p>
+
+<h3 id="Ordem_da_Fonte_origem">Ordem da Fonte (origem)</h3>
+
+<p>Já vimos como a ordem da fonte é importante para a cascata. Se você tiver mais de uma regra, que tenha exatamente o mesmo peso, a que vier por último no CSS será a vencedora. Você pode pensar nisso como regras que estão mais próximas do próprio elemento, sobrescrevendo as anteriores, até que a última vença e dê estilo ao elemento.</p>
+
+<h3 id="Especificidade"><strong>Especificidade</strong></h3>
+
+<p>Depois de compreender o fato de que a ordem da fonte é importante, em algum momento você se deparará com uma situação em que saberá que uma regra vem depois na folha de estilo, mas uma regra anterior conflitante é aplicada. Isso ocorre porque a regra anterior tem uma especificidade mais alta - é mais específica e, portanto, está sendo escolhida pelo navegador como a que deve estilizar o elemento.<br>
+ <br>
+ Como vimos anteriormente nesta lição, um seletor de classe tem mais peso do que um seletor de elemento, portanto, as propriedades definidas na classe substituirão aquelas aplicadas diretamente ao elemento.<br>
+ <br>
+ Algo a se notar aqui é que, embora estejamos pensando em seletores e nas regras que são aplicadas ao que eles selecionam, não é a regra inteira que é substituída, apenas as propriedades que são iguais.</p>
+
+<p>Esse comportamento ajuda a evitar a repetição em seu CSS. Uma prática comum é definir estilos genéricos para os elementos básicos e, em seguida, criar classes para aqueles que são diferentes. Por exemplo, abaixo definimos estilos genéricos para títulos de nível 2 e, em seguida, criamos algumas classes que alteram apenas algumas das propriedades e valores. Os valores definidos inicialmente são aplicados a todos os títulos, depois os valores mais específicos são aplicados aos títulos com as classes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+
+<p>Vamos agora dar uma olhada em como o navegador calculará a especificidade. Já sabemos que um seletor de elemento tem baixa especificidade e pode ser substituído por uma classe. Essencialmente, um valor em pontos é concedido a diferentes tipos de seletores, e somar esses pontos dá a você o peso daquele seletor específico, que pode então ser avaliado em relação a outras combinações potenciais.</p>
+
+<p>A quantidade de especificidade que um seletor tem é medida usando quatro valores (ou componentes) diferentes, que podem ser considerados como milhares, centenas, dezenas e uns - quatro dígitos únicos em quatro colunas:</p>
+
+<ol>
+ <li><strong>Thousands</strong>: marque um nesta coluna se a declaração estiver dentro de um atributo {{htmlattrxref ("style")}}, também conhecido como estilos embutidos. Essas declarações não têm seletores, portanto, sua especificidade é sempre simplesmente 1000.</li>
+ <li><strong>Hundreds</strong>: marque um nesta coluna para cada seletor de ID contido no seletor geral.</li>
+ <li><strong>Tens</strong>: marque um nesta coluna para cada seletor de classe, seletor de atributo ou pseudoclasse contido no seletor geral.</li>
+ <li><strong>Ones</strong>: marque um nesta coluna para cada seletor de elemento ou pseudoelemento contido dentro do seletor geral.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: O Seletor universal (<code>*</code>), combinadores (<code>+</code>, <code>&gt;</code>, <code>~</code>, ' '), e pseudo-classe de negação (<code>:not</code>) não tem efeito de especificidade.</p>
+</div>
+
+<p>A tabela a seguir mostra alguns exemplos isolados para colocá-lo no clima. Experimente passar por eles e certifique-se de entender por que eles têm a especificidade que demos a eles. Ainda não cobrimos os seletores em detalhes, mas você pode encontrar detalhes de cada seletor em MDN  <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors reference</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Thousands</th>
+   <th scope="col">Hundreds</th>
+   <th scope="col">Tens</th>
+   <th scope="col">Ones</th>
+   <th scope="col">Total specificity</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifier</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>No selector, with a rule inside an element's {{htmlattrxref("style")}} attribute</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Antes de prosseguirmos, vejamos um exemplo em ação.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
+
+<p>Então, o que está acontecendo aqui? Em primeiro lugar, estamos interessados ​​apenas nas primeiras sete regras deste exemplo e, como você notará, incluímos seus valores de especificidade em um comentário antes de cada uma.</p>
+
+<ul>
+ <li>Os dois primeiros seletores estão competindo pelo estilo da cor de fundo do link - o segundo vence e torna a cor de fundo azul porque tem um seletor de ID extra na cadeia: sua especificidade é 201 vs. 101.</li>
+ <li>O terceiro e o quarto seletores estão competindo pelo estilo da cor do texto do link - o segundo vence e torna o texto branco porque embora tenha um seletor de elemento a menos, o seletor ausente é trocado por um seletor de classe, que vale dez, em vez do que um. Portanto, a especificidade vencedora é 113 contra 104.</li>
+ <li>Os seletores 5 a 7 estão competindo pelo estilo da borda do link quando pairados. O seletor seis claramente perde para cinco com uma especificidade de 23 contra 24 - ele tem um seletor de elemento a menos na cadeia. O seletor sete, no entanto, vence o cinco e o seis - ele tem o mesmo número de sub-seletores na cadeia que cinco, mas um elemento foi trocado por um seletor de classe. Portanto, a especificidade vencedora é 33 contra 23 e 24.</li>
+</ul>
+
+<ol>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Este foi apenas um exemplo aproximado para facilitar a compreensão. Na realidade, cada tipo de seletor tem seu próprio nível de especificidade que não pode ser substituído por seletores com um nível de especificidade inferior. Por exemplo, um milhão de seletores de <strong>classe</strong> combinados não seriam capazes de sobrescrever as regras de um seletor de <strong>id</strong>.</p>
+
+<p>Uma forma mais precisa de avaliar a especificidade seria pontuar os níveis de especificidade individualmente começando do mais alto e passando para o mais baixo quando necessário. Somente quando há um empate entre as pontuações do seletor dentro de um nível de especificidade, você precisa avaliar o próximo nível abaixo; caso contrário, você pode desconsiderar os seletores de nível de especificidade inferior, pois eles nunca podem substituir os níveis de especificidade mais altos.</p>
+</div>
+
+<h3 id="!_Importante">! Importante</h3>
+
+<p>Existe uma parte especial do CSS que você pode usar para ignorar todos os cálculos acima, no entanto, você deve ter muito cuidado ao usá-la -! Importante. Isso é usado para tornar uma determinada propriedade e valor a coisa mais específica, substituindo assim as regras normais da cascata.<br>
+ <br>
+ Dê uma olhada neste exemplo onde temos dois parágrafos, um dos quais tem um ID.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
+
+<p>Vamos examinar isso para ver o que está acontecendo - tente remover algumas das propriedades para ver o que acontece e se você tiver dificuldade de entender:</p>
+
+<ol>
+ <li>Você verá que os valores da terceira regra {{cssxref ("color")}} e {{cssxref ("padding")}} foram aplicados, mas o {{cssxref ("background-color")}} não foram?. Por quê? Na verdade, todos os três devem ser aplicados, porque as regras posteriores na ordem de origem geralmente substituem as regras anteriores.</li>
+ <li>No entanto, as regras acima vencem, porque os seletores de classe têm uma especificidade mais alta do que os seletores de elemento.</li>
+ <li>Ambos elementos tem {{htmlattrxref("class")}} de <code>better (melhor)</code>, mas o segundo tem um <strong>id</strong> {{htmlattrxref("id")}} que é mais forte. Como os IDs têm uma especificidade ainda maior do que as classes (você só pode ter um elemento com cada ID exclusivo em uma página, mas muitos elementos com a mesma classe - os seletores de ID são muito específicos no que se destinam), a cor de fundo vermelha e A borda preta de 1 pixel deve ser aplicada ao segundo elemento, com o primeiro elemento recebendo a cor de fundo cinza, e sem borda, conforme especificado pela classe.</li>
+ <li>O segundo elemento obtém a cor de fundo vermelha, mas sem borda. Por quê? Por causa da declaração! Important na segunda regra - incluindo isso depois de border: none significa que essa declaração vai superar o valor de border na regra anterior, embora o ID tenha uma especificidade mais alta.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: A única maneira de sobrescrever essa declaração! Importante seria incluir outra declaração! Importante em uma declaração com a mesma especificidade posteriormente na ordem de origem, ou uma com uma especificidade mais alta.</p>
+</div>
+
+<p>É útil saber que! Important existe para que você saiba o que é quando o encontrar no código de outras pessoas. No entanto, recomendamos enfaticamente que você nunca o use, a menos que seja absolutamente necessário. ! mudanças importantes na maneira como a cascata normalmente funciona, portanto, pode tornar a depuração de problemas CSS realmente difícil de resolver, especialmente em uma folha de estilo grande.</p>
+
+<p>Uma situação em que você pode ter que usá-lo é quando você está trabalhando em um CMS onde você não pode editar os módulos CSS principais e você realmente deseja sobrescrever um estilo que não pode ser sobrescrito de nenhuma outra maneira. Mas, sério, não use se você puder evitar.</p>
+
+<h2 id="O_Efeito_da_Localização_CSS">O Efeito da Localização CSS</h2>
+
+<p>Por fim, também é útil observar que a importância de uma declaração CSS depende em qual folha de estilo ela é especificada - é possível que os usuários definam folhas de estilo personalizadas para substituir os estilos do desenvolvedor, por exemplo, o usuário pode ser deficiente visual e deseja para definir o tamanho da fonte em todas as páginas da Web que eles visitam com o dobro do tamanho normal para permitir uma leitura mais fácil.</p>
+
+<h2 id="Resumindo">Resumindo</h2>
+
+<p>As declarações conflitantes serão aplicadas na seguinte ordem, com as posteriores substituindo as anteriores:</p>
+
+<ol>
+ <li>Declarações nas folhas de estilo do agente do usuário (por exemplo, os estilos padrão do navegador, usados quando nenhum outro estilo está definido).</li>
+ <li>Declarações normais em folhas de estilo do usuário (estilos personalizados definidos por um usuário).</li>
+ <li>Declarações normais em folhas de estilo do autor (esses são os estilos definidos por nós, os desenvolvedores da web).</li>
+ <li>Declarações importantes nas folhas de estilo do autor</li>
+ <li>
+  <p>Declarações importantes nas folhas de estilo do usuário</p>
+
+  <p>Faz sentido que as folhas de estilo dos desenvolvedores da web substituam as folhas de estilo do usuário, para que o design possa ser mantido conforme pretendido, mas às vezes os usuários têm bons motivos para substituir os estilos do desenvolvedor da web, conforme mencionado acima - isso pode ser feito usando! Important em suas regras.<br>
+    </p>
+ </li>
+</ol>
+
+<h2 id="Teste_suas_Habilidades!">Teste suas Habilidades!</h2>
+
+<p>Abordamos muito neste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir - consulte <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>.</p>
+
+<h2 id="O_que_vem_a_seguir">O que vem a seguir?</h2>
+
+<p>Se você entendeu a maior parte deste artigo, então muito bem - você começou a se familiarizar com a mecânica fundamental do CSS. A seguir, veremos os seletores em detalhes.</p>
+
+<p>Se você não entendeu totalmente a cascata, a especificidade e a herança, não se preocupe! Esta é definitivamente a coisa mais complicada que abordamos até agora no curso e é algo que até mesmo os desenvolvedores profissionais da Web às vezes acham complicado. Aconselhamos que você volte a este artigo algumas vezes à medida que avança no curso e continue pensando a respeito.</p>
+
+<p>Volte aqui se você começar a encontrar problemas estranhos com estilos que não se aplicam conforme o esperado. Pode ser um problema de especificidade.</p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/pt-br/learn/css/building_blocks/index.html b/files/pt-br/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..b79de8baa0
--- /dev/null
+++ b/files/pt-br/learn/css/building_blocks/index.html
@@ -0,0 +1,83 @@
+---
+title: Construindo blocos CSS
+slug: Aprender/CSS/Construindo_blocos
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Este módulo continua onde <a href="/en-US/docs/Learn/CSS/First_steps">Primeiros passos em CSS</a> parou — agora que você já ganhou familiaridade com a linguagem e sua sintaxe, e já tem alguma experiência básica usando-a, é hora de mergulhar um pouco mais fundo. Este módulo analisa a conceitos de cascata e herança , todos os tipos de seletores que temos disponíveis, unidades, dimensionamentos, estilos de fundo e bordas, depuração, e muito mais.</p>
+
+<p class="summary">O objetivo aqui é lhe prover com um conjunto de ferramentas para construir um código CSS competente e ajuda-lo a entender toda a teoria essencial, antes de passarmos para tópicos mais específicos como <a href="/en-US/docs/Learn/CSS/Styling_text">Estilização de texto</a> e <a href="/en-US/docs/Learn/CSS/CSS_layout">Modelo CSS</a>.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Antes de iniciar este módulo, você deve ter:</p>
+
+<ol>
+ <li>Familiaridade básica com uso de computadores, e usar a Web passivamente (por exemplo. apenas olhar, consumindo o conteúdo.)</li>
+ <li>Um ambiente de trabalho básico configurado conforme detalhado em <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalando software básico</a>, e um entendimento de como criar e gerenciar arquivos, como detalhado em <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Lidando com arquivos</a>.</li>
+ <li>Familiaridade básica com HTML, como foi discutido no módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a>.</li>
+ <li>Um entendimento do básico em CSS, como o mostrado no módulo  <a href="/en-US/docs/Learn/CSS/First_steps">Primeiros Passos com CSS</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você estiver usando um computador/tablet/outro dispositivo onde você não puder criar seus próprios arquivos, você pode tentar rodar (a maioria) os códigos de exemplo em um programa de codificação online como o <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<p>Este módulo contém os seguintes artigos, que cobrem a maioria das partes essenciais da linguagem CSS. Ao longo do caminho você encontrará vários exercícios para testar seu entendimento.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascata e Herança</a></dt>
+ <dd>O objetivo desta lição é desenvolver seu entendimento de alguns dos conceitos mais fundamentais do CSS — a cascata, especificidade e herança — que controlam como o CSS será aplicado ao HTML e como conflitos são resolvidos.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Seletores CSS</a></dt>
+ <dd>Há uma ampla variedade de seletores CSS disponíveis, permitindo uma fina precisão ao selecionar elementos para estilizar. Neste artigo e em seus sub-artigos, examinaremos os diferentes tipos em detalhes, vendo como eles funcionam. Os sub-artigos são os seguintes:
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tipo, classe e seletores de ID</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Seletores de atributo</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes e pseudo-elementos</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinadores</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">O modelo de caixa</a> (Ou Box Model)</dt>
+ <dd>Tudo em CSS está dentro de caixas, e entender essas caixas é a chave para estar apto a criar layouts (modelos) em CSS, ou alinhar itens com outros itens. Nesta lição,trataremos mais propriamente sobre Modelo de Caixa CSS, afim de que você possa passar para tarefas de Layout mais complexas com um entendimento de como isto funciona e a terminologia relacionada a este modelo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Planos de fundo e bordas</a></dt>
+ <dd>Nesta lição, examinaremos algumas das coisas criativas que você pode fazer com os planos de fundo e as bordas do CSS. Desde a criação de gradientes, imagens de plano de fundo e cantos arredondados, planos de fundo e bordas são a resposta para muitas questões de estilo em CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Manipulando diferentes direções de texto</a></dt>
+ <dd>Nos últimos anos, o CSS evoluiu para oferecer melhor suporte a diferentes direções de conteúdo, incluindo o conteúdo da direita para a esquerda, mas também de cima para baixo (como o japonês) - essas diferentes direções são chamadas de modos de escrita. À medida que você progride em seu estudo e começa a trabalhar com o layout, o entendimento dos <strong>modos de escrita</strong> será muito útil para você; portanto, os apresentaremos neste artigo..</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Transbordando conteúdo</a></dt>
+ <dd>Nesta lição, examinaremos outro conceito importante em CSS - overflow, efeito de transbordar. O overflow é o que acontece quando há muito conteúdo para ser contido adequadamente dentro de uma "caixa". Neste guia, você aprenderá o que é e como gerenciá-lo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valores CSS e unidades</a></dt>
+ <dd>Cada propriedade usada em CSS tem um valor ou um conjunto de valores que são permitidos para uma dada propriedade, veremos alguns dos valores e unidades mais comuns em uso.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionando itens em CSS</a></dt>
+ <dd>Nas várias lições até agora, você encontrou várias maneiras de dimensionar itens em uma página da Web usando CSS. É importante entender o tamanho dos diferentes recursos do seu design e, nesta lição, resumiremos as várias maneiras pelas quais os elementos obtêm um tamanho via CSS e definiremos alguns termos de dimensionamento que ajudarão você no futuro.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imagens, mídia, e elementos de formulário</a></dt>
+ <dd>Nesta lição, veremos como certos elementos especiais são tratados no CSS. Imagens, outras mídias e elementos de formulário se comportam de maneira um pouco diferente em termos de sua capacidade de estilizá-los com CSS do que as caixas regulares. Compreender o que é e o que não é possível pode poupa-lo de algumas frustrações, e esta lição destacará algumas das principais coisas que você precisa saber.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Estilizando Tabelas</a></dt>
+ <dd>Estilizar uma tabela HTML não é o trabalho mais fascinante do mundo, mas às vezes todos nós precisamos fazê-lo. Este artigo fornece um guia para melhorar a aparência das tabelas HTML, com algumas técnicas específicas de estilo de tabela destacadas.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurando CSS</a></dt>
+ <dd>Às vezes, ao escrever CSS, você encontrará um problema em que seu CSS parece não estar fazendo o que você espera. Este artigo fornecerá orientações sobre como depurar um problema de CSS e mostrará como os DevTools (ferramentas de desenvolvedor) incluídos em todos os navegadores modernos podem ajudá-lo a descobrir o que está acontecendo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizando seu CSS</a></dt>
+ <dd>Ao começar a trabalhar com folhas de estilo e em projetos maiores, você descobrirá que manter um grande arquivo CSS pode ser desafiador. Neste artigo, examinaremos brevemente algumas práticas recomendadas para escrever seu CSS para facilitar a manutenção e algumas das soluções que você encontrará em uso por outras pessoas para ajudar a melhorar a capacidade de manutenção.</dd>
+</dl>
+
+<h2 id="Avaliações">Avaliações</h2>
+
+<p>Deseja testar suas habilidades de CSS? As avaliações a seguir testarão sua compreensão do CSS abordado nos guias acima.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Entendimento fundamental de CSS</a></dt>
+ <dd>Esta avaliação testará seu entendimento da sintaxe básica, seletores, especificidade, modelo caixa, e mais.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Criando uma carta timbrada ideal</a></dt>
+ <dd>Se você deseja causar uma boa impressão, escrever uma carta em papel timbrado bonito pode ser um bom começo. Nesta avaliação, desafiaremos você a criar um modelo online para obter essa aparência.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Caixa de estilo atraente</a></dt>
+ <dd>Aqui você aprenderá a usar o estilo de plano de fundo e borda para criar uma caixa agradável.</dd>
+</dl>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Efeitos de estilo avançados</a></dt>
+ <dd>Este artigo funciona como uma caixa de truques, fornecendo uma introdução a alguns recursos avançados de estilo interessantes, como sombras de caixa, modos de mesclagem e filtros.</dd>
+</dl>
diff --git a/files/pt-br/learn/css/building_blocks/the_box_model/index.html b/files/pt-br/learn/css/building_blocks/the_box_model/index.html
new file mode 100644
index 0000000000..841540a8f0
--- /dev/null
+++ b/files/pt-br/learn/css/building_blocks/the_box_model/index.html
@@ -0,0 +1,343 @@
+---
+title: The box model
+slug: Aprender/CSS/Construindo_blocos/The_box_model
+translation_of: Learn/CSS/Building_blocks/The_box_model
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Tudo em CSS tem um quadro em torno de si, e entender estes quadros é chave para ser capaz de criar arranjos ( layouts ) com CSS, ou para alinhar itens com outros itens. Nesta lição, olharemos de modo apropiado para o modelo de caixas do CSS ( CSS Box Model ), de forma que você possa montar arranjos mais complexos com um melhor entendimento de como ele funciona e da terminologia relacionada.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Familiaridade básica em utilizar computadores, ambiente de trabalho básico configurado conforme detalhado em<a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">software básico instalado</a>, conhecimento básico de como <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos"> criar e gerenciar arquivos</a>, básico de HTML ( <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a>), e uma idéia de como o  CSS funciona (ensinado em <a href="/en-US/docs/Learn/CSS/First_steps">CSS primeiros passos</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender sobre o Modelo de Caixa do CSS, o que faz o modelo de caixa e como trocar para um modelo alternativo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Block_and_inline_boxes">Block and inline boxes</h2>
+
+<p>In CSS we broadly have two types of boxes — <strong>block boxes</strong> and <strong>inline boxes</strong>. These characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page:</p>
+
+<p>If a box is defined as a block, it will behave in the following ways:</p>
+
+<ul>
+ <li>The box will break onto a new line.</li>
+ <li>The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.</li>
+ <li>The {{cssxref("width")}} and {{cssxref("height")}} properties are respected.</li>
+ <li>Padding, margin and border will cause other elements to be pushed away from the box</li>
+</ul>
+
+<p>Unless we decide to change the display type to inline, elements such as headings (e.g. <code>&lt;h1&gt;</code>) and <code>&lt;p&gt;</code> all use <code>block</code> as their outer display type by default.</p>
+
+<p>If a box has an outer display type of <code>inline</code>, then:</p>
+
+<ul>
+ <li>The box will not break onto a new line.</li>
+ <li>The {{cssxref("width")}} and {{cssxref("height")}} properties will not apply.</li>
+ <li>Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.</li>
+ <li>Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.</li>
+</ul>
+
+<p>The <code>&lt;a&gt;</code> element, used for links, <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code> are all examples of elements that will display inline by default.</p>
+
+<p>The type of box applied to an element is defined by {{cssxref("display")}} property values such as <code>block</code> and <code>inline</code>, and relates to the <strong>outer</strong> value of <code>display</code>.</p>
+
+<h2 id="Além_disto_Tipos_de_exibição_display_internos_e_externos">Além disto: Tipos de exibição ( display ) internos e externos</h2>
+
+<p>Nesse ponto, é melhor também explicar os tipos de exibição interna ( <strong>inner </strong>) e externa ( <strong>outer )</strong>. Como mencionado acima, as caixas em CSS têm um tipo de exibição externa, que detalha se a caixa é em bloco ou em linha.</p>
+
+<p>Caixas possuem também um tipo de display <em>inner</em>, que determina como elementos dentro da caixa são posicionados. Por default, os elementos dentro de uma caixa são posicionados em um fluxo normal ( <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">normal flow</a> </strong>), significando que eles se comportam como qualquer outro bloco e elementos inline (como explicado acima).</p>
+
+<p>We can, however, change the inner display type by using <code>display</code> values like <code>flex</code>. If we set <code>display: flex;</code> on an element, the outer display type is <code>block</code>, but the inner display type is changed to <code>flex</code>. Any direct children of this box will become flex items and will be laid out according to the rules set out in the <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> spec, which you'll learn about later on.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide to <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout</a>.</p>
+</div>
+
+<p>When you move on to learn about CSS Layout in more detail, you will encounter <code>flex</code>, and various other inner values that your boxes can have, for example <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+
+<p>Block and inline layout, however, is the default way that things on the web behave — as we said above, it is sometimes referred to as <em>normal flow</em>, because without any other instruction, our boxes lay out as block or inline boxes.</p>
+
+<h2 id="Examples_of_different_display_types">Examples of different display types</h2>
+
+<p>Let's move on and have a look at some examples. Below we have three different HTML elements, all of which have an outer display type of <code>block</code>. The first is a paragraph, which has a border added in CSS. The browser renders this as a block box, so the paragraph begins on a new line, and expands to the full width available to it.</p>
+
+<p>The second is a list, which is laid out using <code>display: flex</code>. This establishes flex layout for the items inside the container, however, the list itself is a block box and — like the paragraph — expands to the full container width and breaks onto a new line.</p>
+
+<p>Below this, we have a block-level paragraph, inside which are two <code>&lt;span&gt;</code> elements. These elements would normally be <code>inline</code>, however, one of the elements has a class of block, and we have set it to <code>display: block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+
+<p>We can see how <code>inline</code> elements behave in this next example. The <code>&lt;span&gt;</code> elements in the first paragraph are inline by default and so do not force line breaks.</p>
+
+<p>We also have a <code>&lt;ul&gt;</code> element which is set to <code>display: inline-flex</code>, creating an inline box around some flex items.</p>
+
+<p>Finally, we have two paragraphs both set to <code>display: inline</code>. The inline flex container and paragraphs all run together on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements.</p>
+
+<p><strong>In the example, you can change <code>display: inline</code> to <code>display: block</code> or <code>display: inline-flex</code> to <code>display: flex</code> to toggle between these display modes.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+
+<p>You will encounter things like flex layout later in these lessons; the key thing to remember for now is that changing the value of the <code>display</code> property can change whether the outer display type of a box is block or inline, which changes the way it displays alongside other elements in the layout. </p>
+
+<p>In the rest of the lesson, we will concentrate on the outer display type.</p>
+
+<h2 id="What_is_the_CSS_box_model">What is the CSS box model?</h2>
+
+<p>The full CSS box model applies to block boxes, inline boxes only use some of the behavior defined in the box model. The model defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on the page. To add some additional complexity, there is a standard and an alternate box model.</p>
+
+<h3 id="Parts_of_a_box">Parts of a box</h3>
+
+<p>Making up a block box in CSS we have the:</p>
+
+<ul>
+ <li><strong>Content box</strong>: The area where your content is displayed, which can be sized using properties like {{cssxref("width")}} and {{cssxref("height")}}.</li>
+ <li><strong>Padding box</strong>: The padding sits around the content as white space; its size can be controlled using {{cssxref("padding")}} and related properties.</li>
+ <li><strong>Border box</strong>: The border box wraps the content and any padding. Its size and style can be controlled using {{cssxref("border")}} and related properties.</li>
+ <li><strong>Margin box</strong>: The margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. Its size can be controlled using {{cssxref("margin")}} and related properties.</li>
+</ul>
+
+<p>The below diagram shows these layers:</p>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<h3 id="The_standard_CSS_box_model">The standard CSS box model</h3>
+
+<p>In the standard box model, if you give a box a <code>width</code> and a <code>height</code> attribute, this defines the width and height of the <em>content box</em>. Any padding and border is then added to that width and height to get the total size taken up by the box. This is shown in the image below.</p>
+
+<p>If we assume that the box has the following CSS defining <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code>:</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+</pre>
+
+<p>The space taken up by our box using the standard box model will actually be 410px (350 + 25 + 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box.</p>
+
+<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The margin is not counted towards the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the border — it does not extend into the margin.</p>
+</div>
+
+<h3 id="The_alternative_CSS_box_model">The alternative CSS box model</h3>
+
+<p>You might think it is rather inconvenient to have to add up the border and padding to get the real size of the box, and you would be right! For this reason, CSS had an alternative box model introduced some time after the standard box model. Using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding and border. The same CSS as used above would give the below result (width = 350px, height = 150px).</p>
+
+<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+
+<p>By default, browsers use the standard box model. If you want to turn on the alternative model for an element you do so by setting <code>box-sizing: border-box</code> on it. By doing this you are telling the browser to take the border box as the area defined by any size you set.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  box-sizing: border-box;
+} </code></pre>
+
+<p>If you want all of your elements to use the alternative box model, and this is a common choice among developers, set the <code>box-sizing</code> property on the <code>&lt;html&gt;</code> element, then set all other elements to inherit that value, as seen in the snippet below. If you want to understand the thinking behind this, see <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: An interesting bit of history — Internet Explorer used to default to the alternative box model, with no mechanism available to switch.</p>
+</div>
+
+<h2 id="Playing_with_box_models">Playing with box models</h2>
+
+<p>In the below example, you can see two boxes. Both have a class of <code>.box</code>, which gives them the same <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code>. The only difference is that the second box has been set to use the alternative box model.</p>
+
+<p><strong>Can you change the size of the second box (by adding CSS to the <code>.alternate</code> class) to make it match the first box in width and height?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find a solution for this task <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">here</a>.</p>
+</div>
+
+<h3 id="Use_browser_DevTools_to_view_the_box_model">Use browser DevTools to view the box model</h3>
+
+<p>Your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> can make understanding the box model far easier. If you inspect an element in Firefox's DevTools, you can see the size of the element plus its margin, padding, and border. Inspecting an element in this way is a great way to find out if your box is really the size you think it is!</p>
+
+<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+
+<h2 id="Margins_padding_and_borders">Margins, padding, and borders</h2>
+
+<p>You've already seen the {{cssxref("margin")}}, {{cssxref("padding")}}, and {{cssxref("border")}} properties at work in the example above. The properties used in that example are <strong>shorthands</strong> and allow us to set all four sides of the box at once. These shorthands also have equivalent longhand properties, which allow control over the different sides of the box individually.</p>
+
+<p>Let's explore these properties in more detail.</p>
+
+<h3 id="Margin">Margin</h3>
+
+<p>The margin is an invisible space around your box. It pushes other elements away from the box. Margins can have positive or negative values. Setting a negative margin on one side of your box can cause it to overlap other things on the page. Whether you are using the standard or alternative box model, the margin is always added after the size of the visible box has been calculated.</p>
+
+<p>We can control all margins of an element at once using the {{cssxref("margin")}} property, or each side individually using the equivalent longhand properties:</p>
+
+<ul>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+</ul>
+
+<p><strong>In the example below, try changing the margin values to see how the box is pushed around due to the margin creating or removing space (if it is a negative margin) between this element and the containing element.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+
+<h4 id="Margin_collapsing">Margin collapsing</h4>
+
+<p>A key thing to understand about margins is the concept of margin collapsing. If you have two elements whose margins touch, and both margins are positive, those margins will combine to become one margin, which is the size of the largest individual margin. If one or both margins are negative, the amount of negative value will subtract from the total.</p>
+
+<p>In the example below, we have two paragraphs. The top paragraph has a <code>margin-bottom</code> of 50 pixels. The second paragraph has a <code>margin-top</code> of 30 pixels. The margins have collapsed together so the actual margin between the boxes is 50 pixels and not the total of the two margins.</p>
+
+<p><strong>You can test this by setting the <code>margin-top</code> of paragraph two to 0. The visible margin between the two paragraphs will not change — it retains the 50 pixels set in the <code>bottom-margin</code> of paragraph one. If you set it to -10px, you'll see that the overall margin becomes 40px — it subtracts from the 50px.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+
+<p>There are a number of rules that dictate when margins do and do not collapse. For further information see the detailed page on <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">mastering margin collapsing</a>. The main thing to remember for now is that margin collapsing is a thing that happens. If you are creating space with margins and don't get the space you expect, this is probably what is happening.</p>
+
+<h3 id="Borders">Borders</h3>
+
+<p>The border is drawn between the margin and the padding of a box. If you are using the standard box model, the size of the border is added to the <code>width</code> and <code>height</code> of the box. If you are using the alternative box model then the size of the border makes the content box smaller as it takes up some of that available <code>width</code> and <code>height</code>.</p>
+
+<p>For styling borders, there are a large number of properties — there are four borders, and each border has a style, width and color that we might want to manipulate.</p>
+
+<p>You can set the width, style, or color of all four borders at once using the {{cssxref("border")}} property.</p>
+
+<p>To set the properties of each side individually, you can use:</p>
+
+<ul>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+</ul>
+
+<p>To set the width, style, or color of all sides, use the following:</p>
+
+<ul>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+</ul>
+
+<p>To set the width, style, or color of a single side, you can use one of the most granular longhand properties:</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+</ul>
+
+<p><strong>In the example below we have used various shorthands and longhands to create borders. Have a play around with the different properties to check that you understand how they work. The MDN pages for the border properties give you information about the different styles of border you can choose from.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+
+<h3 id="Padding">Padding</h3>
+
+<p>The padding sits between the border and the content area. Unlike margins you cannot have negative amounts of padding, so the value must be 0 or a positive value. Any background applied to your element will display behind the padding, and it is typically used to push the content away from the border.</p>
+
+<p>We can control the padding on each side of an element individually using the {{cssxref("padding")}} property, or each side individually using the equivalent longhand properties:</p>
+
+<ul>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+</ul>
+
+<p><strong>If you change the values for padding on the class <code>.box</code> in the example below you can see that this changes where the text begins in relation to the box.</strong></p>
+
+<p><strong>You can also change the padding on the class <code>.container,</code> which will make space between the container and the box. Padding can be changed on any element, and will make space between its border and whatever is inside the element.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+
+<h2 id="The_box_model_and_inline_boxes">The box model and inline boxes</h2>
+
+<p>All of the above applies fully to block boxes. Some of the properties can apply to inline boxes too, such as those created by a <code>&lt;span&gt;</code> element.</p>
+
+<p>In the example below, we have a <code>&lt;span&gt;</code> inside a paragraph and have applied a <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code> to it. You can see that the width and height are ignored. The vertical margin, padding, and border are respected but they do not change the relationship of other content to our inline box and so the padding and border overlaps other words in the paragraph. Horizontal padding, margins, and borders are respected and will cause other content to move away from the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+
+<h2 id="Using_display_inline-block">Using display: inline-block</h2>
+
+<p>There is a special value of <code>display</code>, which provides a middle ground between <code>inline</code> and <code>block</code>. This is useful for situations where you do not want an item to break onto a new line, but do want it to respect <code>width</code> and <code>height</code> and avoid the overlapping seen above.</p>
+
+<p>An element with <code>display: inline-block</code> does a subset of the block things we already know about:</p>
+
+<ul>
+ <li>The <code>width</code> and <code>height</code> properties are respected.</li>
+ <li><code>padding</code>, <code>margin</code>, and <code>border</code> will cause other elements to be pushed away from the box.</li>
+</ul>
+
+<p>It does not, however, break onto a new line, and will only become larger than its content if you explicitly add <code>width</code> and <code>height</code> properties.</p>
+
+<p><strong>In this next example, we have added <code>display: inline-block</code> to our <code>&lt;span&gt;</code> element. Try changing this to <code>display: block</code> or removing the line completely to see the difference in display models.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+
+<p>Where this can be useful is when you want to give a link to a larger hit area by adding <code>padding</code>. <code>&lt;a&gt;</code> is an inline element like <code>&lt;span&gt;</code>; you can use <code>display: inline-block</code> to allow padding to be set on it, making it easier for a user to click the link.</p>
+
+<p>You see this fairly frequently in navigation bars. The navigation below is displayed in a row using flexbox and we have added padding to the <code>&lt;a&gt;</code> element as we want to be able to change the <code>background-color</code> when the <code>&lt;a&gt;</code> is hovered. The padding appears to overlap the border on the <code>&lt;ul&gt;</code> element. This is because the <code>&lt;a&gt;</code> is an inline element.</p>
+
+<p><strong>Add <code>display: inline-block</code> to the rule with the <code>.links-list a</code> selector, and you will see how it fixes this issue by causing the padding to be respected by other elements.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>We have covered a lot in 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/CSS/Building_blocks/Selectors/Box_Model_Tasks">Test your skills: The Box Model</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's most of what you need to understand about the box model. You may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout.</p>
+
+<p>In the next lesson, we will take a look at how <a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">backgrounds and borders</a> can be used to make your plain boxes look more interesting.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/pt-br/learn/css/css_layout/intro_leiaute_css/index.html b/files/pt-br/learn/css/css_layout/introduction/index.html
index 9314e8efd3..9314e8efd3 100644
--- a/files/pt-br/learn/css/css_layout/intro_leiaute_css/index.html
+++ b/files/pt-br/learn/css/css_layout/introduction/index.html
diff --git a/files/pt-br/learn/css/css_layout/layout_de_varias_colunas/index.html b/files/pt-br/learn/css/css_layout/multiple-column_layout/index.html
index 2605843ff4..2605843ff4 100644
--- a/files/pt-br/learn/css/css_layout/layout_de_varias_colunas/index.html
+++ b/files/pt-br/learn/css/css_layout/multiple-column_layout/index.html
diff --git a/files/pt-br/learn/css/css_layout/fluxo_normal/index.html b/files/pt-br/learn/css/css_layout/normal_flow/index.html
index c27a403fa7..c27a403fa7 100644
--- a/files/pt-br/learn/css/css_layout/fluxo_normal/index.html
+++ b/files/pt-br/learn/css/css_layout/normal_flow/index.html
diff --git a/files/pt-br/learn/css/first_steps/iniciando/index.html b/files/pt-br/learn/css/first_steps/getting_started/index.html
index a9a5218e98..a9a5218e98 100644
--- a/files/pt-br/learn/css/first_steps/iniciando/index.html
+++ b/files/pt-br/learn/css/first_steps/getting_started/index.html
diff --git a/files/pt-br/learn/css/first_steps/como_css_e_estruturado/index.html b/files/pt-br/learn/css/first_steps/how_css_is_structured/index.html
index 4084647920..4084647920 100644
--- a/files/pt-br/learn/css/first_steps/como_css_e_estruturado/index.html
+++ b/files/pt-br/learn/css/first_steps/how_css_is_structured/index.html
diff --git a/files/pt-br/learn/css/first_steps/o_que_e_css/index.html b/files/pt-br/learn/css/first_steps/what_is_css/index.html
index 41980dfee6..41980dfee6 100644
--- a/files/pt-br/learn/css/first_steps/o_que_e_css/index.html
+++ b/files/pt-br/learn/css/first_steps/what_is_css/index.html
diff --git a/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html b/files/pt-br/learn/css/howto/css_faq/index.html
index f3febd4637..f3febd4637 100644
--- a/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html
+++ b/files/pt-br/learn/css/howto/css_faq/index.html
diff --git a/files/pt-br/learn/css/index.html b/files/pt-br/learn/css/index.html
new file mode 100644
index 0000000000..f5004d47f3
--- /dev/null
+++ b/files/pt-br/learn/css/index.html
@@ -0,0 +1,61 @@
+---
+title: Aprenda a estilizar HTML utilizando CSS
+slug: Aprender/CSS
+tags:
+  - CSS
+  - Folha de Estilos
+  - Iniciante
+  - especificação
+translation_of: Learn/CSS
+---
+<p class="summary">Cascading Stylesheets — ou {{glossary("CSS")}} — é a primeira tecnologia que você deve aprender após o {{glossary("HTML")}}. Enquanto o HTML é utilizado para definir a estrutura e semântica do seu conteúdo, o CSS é usado para estilizá-lo e desenhá-lo. Por exemplo, você pode usar o CSS para alterar a fonte, cor, tamanho e espaçamento do seu conteúdo, dividí-lo em multiplas colunas, ou adicionar animações e outros recursos decorativos.</p>
+
+<h2 id="Percurso_de_aprendizagem">Percurso de aprendizagem</h2>
+
+<p>Você deveria aprender o básico de HTML antes de tentar algo com CSS. Nós recomendamos que você comece através da nossa <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a>.Neste módulo você irá aprender sobre:</p>
+
+<ul>
+ <li>CSS, começando com a <a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">introdução ao CSS</a></li>
+ <li><a href="/en-US/Learn/HTML#Modules">Módulos HTML </a>mais avançados</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, e como utiliza-lo para adicionar funcionalidade dinâmica as páginas da web</li>
+</ul>
+
+<p>Uma vez que voce entendeu os Fundamentos do HTML, Nós recomendamos que você aprenda HTML e CSS ao mesmo tempo, movendo-se para trás e para frente entre os dois temas. Isso por que HTML é muito mais interessante com CSS e você não pode aprender realmente CSS sem conhecer HTML.</p>
+
+<p>Antes de iniciar este tópico, você também deve ter ao menos familiaridade com o uso de computadores, e utilizar a Web passivamente (isto é, apenas navegando e consumindo conteúdo.) Você deve ter uma configuração básica de ambiente de trabalho, conforme detalhado no <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalando o software básico</a>, e entender como criar e gerenciar arquivos, conforme detalhado em <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Lidando com arquivos</a> — ambos são partes do nosso <a href="/en-US/docs/Learn/Getting_started_with_the_web">Como começar com a web</a> módulo completo de iniciante.</p>
+
+<p>É recomendável que você trabalhe através do <a href="/en-US/docs/Learn/Getting_started_with_the_web">Como começar com a web</a> antes de começar este tema. Contudo, não é absolutamente necessário; ja que muito do que é abordado no artigo básico de CSS também é coberto em nossa <a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">introdução ao CSS</a>, embora com muito mais detalhes.</p>
+
+<h2 id="Módulos">Módulos</h2>
+
+<p>Este tópico contém os seguintes módulos em uma ordem sugerida para trabalhar através deles. Você deve definitivamente começar com o primeiro.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">Introdução ao CSS</a></dt>
+ <dd>Este módulo é uma introdução com as noções básicas de como CSS funciona, incluindo seletores e propriedades, escrever regras CSS, aplicando CSS para HTML, como especificar comprimento, cor e outras unidades em CSS, controlar cascatas e heranças, noções básicas de box model e depuração CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Estilo de texto</a></dt>
+ <dd>Aqui nós olhamos os fundamentos do estilos de texto, incluindo a configuração da fonte, negrito, itálico, linha e espaçamento das letras, além de sombras e outros componentes de texto. Nós usamos este módulo para personalizar fontes para sua página, e estilizar listas e links.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Caixas de estilo</a></dt>
+ <dd>Próximo, procuramos as caixas de estilo, um dos passos fundamentais para elaborar uma página web. Neste módulo, nós recapitulamos box model para então controlarmos o layout por configuração de padding, borders e margins, configurações personalizada do background colors , imagens e outros componentes, componentes elegantes tais como sombras e filtros das caixas.</dd>
+ <dt><a href="/pt-BR/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
+ <dd>Neste ponto, nós olharemos os fundamentos CSS, como estilizar o texto, e como estilizar e manipular as caixas com conteudos alocados. Agora é hora de olhar como pôr suas caixas no lugar certo em relação ao viewport,  e outros. Nós temos cobertos os pré-requisitos necessários para então agora podemos aprofundar no layout CSS, olhar em diferentes configurações de telas, tradicionais métodos envolvendo float e posicionamento, além de novos ferramentas de flanged layouts como flexbox, CSS Grid e posicionamento, alem de algumas tecnicas que voce ainda pode querer conhecer.</dd>
+ <dt>Design Responsivo (TBD)</dt>
+ <dd>Com tantos tipos diferentes de dispositivos capazes de navegar pela internet nos dias de hoje, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Responsive_design">design web responsivo</a> (RWD) se tornou uma habilidade primordial para o desenvolvimento web. Esse módulo irá cobrir os principios básicos e ferramentas do RWD, explicar como aplicar diferentes arquivos CSS à um documento a depender de dos recursos do dispositivo como largura de tela, orientação, e resolução, e explorar tecnologias disponíveis para servir diferentes vídeos e imagens dependendo de tais recursos.</dd>
+ <dt>Animações e transformações (TBD)</dt>
+ <dd>Duas das áreas mais interessantes do CSS são a habilidade de manipular elementos (ex. mover, rotacionar e inclinação), e animar elementos suavemente (ex. de uma cor ou posição para outra). Esse módulo explora como implementar as transformações e animações.</dd>
+</dl>
+
+<h2 id="Resolvendo_problemas_de_CSS_comuns">Resolvendo problemas de CSS comuns</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS para resolver problemas comuns</a> proporcione links para seções de conteúdo explicando como usar CSS para resolver problemas muito comuns na criação de páginas web.</p>
+
+<p>Para começar, primeirmamente você aplicara cores aos elementos HTML e seus backgrounds;  alterará o tamanho, forma e posição dos elementos; definira e adicionara bordas aos elementos. Não há muito o que você não podera fazer depois que tiver uma compreensão solida até mesmo sobre o basico do CSS. Uma das melhores coisas sobre aprender CSS é que uma vez que voce conhece os fundamentos, normalmente voce tera uma boa noção do que pode ou não fazer, mesmo que não saiba como fazer aquilo ainda.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS">CSS no MDN</a></dt>
+ <dd>O principal ponto de entrada para documentação CSS no MDN, onde voce encontra desde referências detalhadas a tutoriais avançados. Quer saber todos os valores que uma propriedade pode ter? Este é o melhor lugar</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Reference">Referência CSS</a></dt>
+ <dd>Um guia de referência abrangente para todos os muitos recursos da linguagem CSS - se você quiser saber quais valores uma propriedade pode tomar, por exemplo, este é um ótimo lugar para começar.</dd>
+</dl>
diff --git a/files/pt-br/learn/css/styling_text/index.html b/files/pt-br/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..b2eafa9f05
--- /dev/null
+++ b/files/pt-br/learn/css/styling_text/index.html
@@ -0,0 +1,48 @@
+---
+title: Estilizando texto
+slug: Aprender/CSS/Estilizando_texto
+tags:
+  - CSS
+  - Fontes
+  - Iniciante
+  - Links
+  - Texto
+  - listas
+  - web fontes
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Com o básico de CSS compreendido, o próximo passo para você se concentrar será a estilização de textos — uma das mais importantes coisas que você fará com CSS. Aqui nós olhamos para os fundamentos de estilização de texto, fontes, negritos, italicos, linha e espaço entre letras, sombreamente e outras características textuais. Completamos o módulo produrando aplicar fontes personalizadas para sua página, e estilizando listas e links.</p>
+
+<h2 id="Pré-requisites">Pré-requisites</h2>
+
+<p>Antes de começar este módulo, você já deverá ter familiaridade básica com HTML, como dissemos no módulos <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a>, e estar confortável com os fundamentos de CSS, como discutido em <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está usando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar seus próprios arquivos, você poderá treinar os códigos-exemplo em um programa de código online como <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<p>Este módulo contém os seguintes artigos que ensinarão você todos os fundamentos por trás da estilização de conteúdo textual HTML.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamentos da estilização de texto e fontes</a></dt>
+ <dd>Neste artigo nós passamos por todo o básico da estilização de texto/fonte, incluindo a configuração weight(negrito), family e style, configuração com forma abreviada, alinhamento textual, linha e espaçamento entre as letras.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Estilizando lista</a></dt>
+ <dd>Listas comportam-se como qualquer texto na maior parte das vezes, ma há algumas propriedades CSS específicas para lista que você precisa conhecer, e algumas boas práticas a considerar. Este artigo esclarecerá tudo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Estilizando links</a></dt>
+ <dd>Na estilização de links, é importante entender como fazer uso de pseudo-classes para estilizar o estado dos links efetivamente, como estilizar links para uso em recursos de interfaces diversas como menus de navegação e guias. Veremos todos esses tópicos neste artigo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web Fontes</a></dt>
+ <dd>Aqui nós exploraremos Web Fontes em detalhes — isto permite que você baixe fontes personalizadas junto com sua página web, para permitir maior personalização na estilização.</dd>
+</dl>
+
+<h2 id="Avaliação">Avaliação</h2>
+
+<p>A seguinte avaliação testará seu entendimento das técnicas de estilização de texto cobertas pelo guia acima.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Estilizando a homepage de um escola comunitária</a></dt>
+ <dd>Nesta avaliação nos testeremos seu entendimento de estilização de texto fazendo com que você estilize a homepage de uma escola comunitária.</dd>
+</dl>
diff --git a/files/pt-br/learn/css/styling_text/styling_lists/index.html b/files/pt-br/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..72dc8dc227
--- /dev/null
+++ b/files/pt-br/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,272 @@
+---
+title: Manipulando Listas
+slug: Web/CSS/Getting_Started/Lists
+translation_of: Learn/CSS/Styling_text/Styling_lists
+translation_of_original: Web/Guide/CSS/Getting_started/Lists
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}</p>
+
+<p><font><font>Este é o 10º seção do </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="EN-US / docs / Web / Guia / CSS / Introdução"><font><font>CSS Introdução</font></font></a><font><font> tutorial; </font><font>ele descreve como você pode usar CSS para especificar o aparecimento de listas. </font><font>Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.</font></font></p>
+
+<h2 class="clearLeft" id="Informação_Lists"><font><font>Informação: Lists</font></font></h2>
+
+<p><font><font>Se você aceitou o desafio na </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/ en-US / docs / Web / Guia / CSS / Getting_Started / Conteúdo"><font><font>última </font></font></a><font><font>seção, </font><font>em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.</font></font></p>
+
+<p><font><font>CSS proporciona propriedades especiais que são projetados para listas. </font><font>Geralmente é mais conveniente usar estas propriedades sempre que puder.</font></font></p>
+
+<p><font><font>Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.</font></font></p>
+
+<p><font><font>O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.</font></font></p>
+
+<h3 id="Listas_não_ordenadas"><font><font>Listas não ordenadas</font></font></h3>
+
+<p><font><font>Em uma lista </font></font><em><font><font>desordenada</font></font></em><font><font>, cada item da lista é marcado da mesma forma.</font></font></p>
+
+<p><font><font>CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:</font></font></p>
+
+<ul style="padding-left: 2em;">
+ <li style="list-style-type: disc;"><code><font><font>disc</font></font></code></li>
+ <li style="list-style-type: circle;"><code><font><font>circle</font></font></code></li>
+ <li style="list-style-type: square;"><code><font><font>square</font></font></code></li>
+</ul>
+
+<p style="list-style-type: square;">        none</p>
+
+<p><font><font>Alternativamente, você pode especificar o URL de uma imagem.</font></font></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><font><font>Exemplo</font></font></div>
+
+<p><font><font>Essas regras especificam diferentes marcadores para diferentes classes de item da lista:</font></font></p>
+
+<pre class="brush:css"><font><font>li.open {list-style: circle;} </font></font><font><font>
+li.closed {list-style: disc;}</font></font>
+</pre>
+
+<p><font><font>Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):</font></font></p>
+
+<pre class="brush: html"><font><font>&lt;ul&gt; </font></font><font><font>
+  &lt;li class="open"&gt; Lorem ipsum &lt;/ li&gt; </font></font><font><font>
+  &lt;li class="closed"&gt; dolor sit &lt;/ li&gt;
+  &lt;li class="closed"&gt; Amet consectetuer &lt;/ li&gt;
+  &lt;li class="open"&gt; Magna aliquam &lt;/ li&gt;
+  &lt;li class="closed"&gt; Autem veleum &lt;/ li&gt;
+&lt;/ ul&gt;</font></font>
+</pre>
+
+<p><font><font>O resultado pode parecer:</font></font></p>
+
+<p><font><font>{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}</font></font></p>
+</div>
+
+<h3 id="Listas_ordenadas"><font><font>Listas ordenadas</font></font></h3>
+
+<p><font><font>Em uma lista<em>ordenada</em></font></font><font><font> , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.</font></font></p>
+
+<p><font><font>Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:</font></font></p>
+
+<ul style="padding-left: 2em;">
+ <li><code>decimal</code></li>
+ <li><code>lower-roman</code></li>
+ <li><code>upper-roman</code></li>
+ <li><code>lower-latin</code></li>
+ <li><code>upper-latin</code></li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type"><font><font>Exemplo</font></font></div>
+
+<p><font><font>Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe </font></font><code><font><font>informações, os itens são identificados com letras maiúsculas.</font></font></code></p>
+
+<pre><code>&lt;ol class="info"&gt;
+  &lt;li&gt;Lorem ipsum&lt;/li&gt;
+  &lt;li&gt;Dolor sit&lt;/li&gt;
+  &lt;li&gt;Amet consectetuer&lt;/li&gt;
+  &lt;li&gt;Magna aliquam&lt;/li&gt;
+  &lt;li&gt;Autem veleum&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<pre class="brush:css"><font><font>ol.info {list-style: upper-latin;}
+</font></font></pre>
+
+<p><font><font>O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:</font></font></p>
+
+<p><font><font>{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}</font></font></p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type"><font><font>Mais detalhes</font></font></div>
+
+<p><font><font>O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. </font><font>Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. </font><font>Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.</font></font></p>
+
+<p><font><font>Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. </font><font>No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.</font></font></p>
+
+<p><font><font>Browsers diferem na maneira de implementar os estilos para listas. </font><font>Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</font></font></p>
+</div>
+
+<h3 id="Contadores"><font><font>Contadores</font></font></h3>
+
+<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
+<p><strong><font><font>Nota: </font></font></strong><font><font> Alguns navegadores não suportam contadores. </font><font>O </font></font><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html"><font><font>conteúdo CSS e compatibilidade do navegador</font></font></a><font><font> página no </font></font><a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/"><font><font>site de modo Quirks</font></font></a><font><font> contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. </font><font>Páginas individuais na </font></font><a href="/en-US/docs/Web/CSS/Reference" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference"><font><font>referência CSS</font></font></a><font><font> neste local também têm tabelas de compatibilidade do navegador.</font></font></p>
+</div>
+
+<p><font><font>Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. </font><font>Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</font></font></p>
+
+<p><font><font>Para especificar a numeração, você precisa de um </font></font><em><font><font>contador</font></font></em><font><font> com um nome que você especificar.</font></font></p>
+
+<p><font><font>Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. </font><font>O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.</font></font></p>
+
+<p><font><font>Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.</font></font></p>
+
+<p><font><font>Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o </font></font><code><font><font>conteúdo</font></font></code><font><font> da propriedade (como você fez na página anterior, </font><font>Conteúdo) </font><font>.</font></font></p>
+
+<p><font><font>No valor do </font></font><code><font><font>conteúdo</font></font></code><font><font> de propriedade, especifique </font></font><code><font><font>counter ()</font></font></code><font><font> com o nome de seu contador. </font><font>Opcionalmente especifique um tipo. </font><font>Os tipos são os mesmos que na </font></font><strong><font><font>lista ordenada</font></font></strong><font><font> secção acima.</font></font></p>
+
+<p><font><font>Normalmente, o elemento que apresenta o contador também incrementa-lo.</font></font></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><font><font>Exemplo</font></font></div>
+
+<p><font><font>Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe </font><font>numeradas:</font></font></p>
+
+<pre class="brush:css"><font><font>h3.numbered {counter-reset: mynum;}
+</font></font></pre>
+
+<p> </p>
+
+<p><font><font>Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe </font><font>numeradas:</font></font></p>
+
+<pre class="brush: html"><font><font>&lt;p class = "numbered"&gt; Lorem ipsum &lt;/ p&gt;
+&lt;p class = "numbered"&gt; dolor sit &lt;/ p&gt;
+&lt;p class = "numbered"&gt; Amet consectetuer &lt;/ p&gt;
+&lt;p class = "numbered"&gt; Magna aliquam &lt;/ p&gt;
+&lt;p class = "numbered"&gt; Autem veleum &lt;/ p&gt;</font></font>
+</pre>
+
+<pre class="brush:css"><font><font>body </font></font><font><font>
+   {counter-reset: </font></font><font><font>
+mynum;} </font></font><font><font>
+p.numbered:before
+  {content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}</font></font>
+</pre>
+
+<p><font><font>O resultado se parece com isso:</font></font></p>
+
+<p><font><font>{{ EmbedLiveSample("Contadores", '300', '200', '') }}</font></font></p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type"><font><font>Mais detalhes</font></font></div>
+
+<p><font><font>Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.</font></font></p>
+
+<p><font><font>Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. </font><font>No exemplo acima, os contadores estão em negrito mas os itens da lista não são.</font></font></p>
+
+<p><font><font>Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. </font><font>Para mais detalhes, consulte </font></font><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters"><font><font>contadores automáticos e numeração</font></font></a><font><font> em CSS Specification.</font></font></p>
+</div>
+
+<h2 id="Listas_denominadas_Ação"><font><font>Listas denominadas: Ação</font></font></h2>
+
+<p><font><font>Crie um novo documento HTML, </font><font>doc2.html. </font><font>Copie e cole o conteúdo daqui:</font></font></p>
+
+<pre class="brush:html;"><font><font>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Sample document 2&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style2.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Arctic&lt;/li&gt;
+      &lt;li&gt;Atlantic&lt;/li&gt;
+      &lt;li&gt;Pacific&lt;/li&gt;
+      &lt;li&gt;Indian&lt;/li&gt;
+      &lt;li&gt;Southern&lt;/li&gt;
+    &lt;/ul&gt;
+
+    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
+    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
+    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
+    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
+    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
+    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</font></font>
+
+</pre>
+
+<p><font><font>Faça uma nova folha de estilo, </font><font>style2.css. </font><font>Copie e cole o conteúdo daqui:</font></font></p>
+
+<pre class="brush:css;"><font><font>/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}</font></font>
+</pre>
+
+<p><font><font>Se o layout e comentário não são a seu gosto, alterá-los.</font></font></p>
+
+<p><font><font>Abra o documento no seu browser. </font><font>Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. </font><font>Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):</font></font></p>
+
+<p><font><font>{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}</font></font></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><font><font>Desafios</font></font></div>
+
+<p><font><font>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:</font></font></p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>The oceans</strong></p>
+
+    <ul>
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p><font><font>Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:</font></font></p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>(A) The oceans</strong></p>
+
+    <p><strong>. . .</strong></p>
+
+    <p><strong>(B) Numbered paragraphs</strong></p>
+
+    <p><strong>. . .</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="EN-US / docs / Web / Guia / CSS / Introdução / desafio soluções # Lists"><font><font>Ver soluções para esses desafios.</font></font></a></p>
+
+<h2 id="Qual_o_proximo"><font><font>Qual o proximo?</font></font></h2>
+
+<p><font><font>{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. </font><font>A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, </font><font>caixas.</font></font></p>
diff --git a/files/pt-br/learn/forms/basic_native_form_controls/index.html b/files/pt-br/learn/forms/basic_native_form_controls/index.html
new file mode 100644
index 0000000000..ebefe55869
--- /dev/null
+++ b/files/pt-br/learn/forms/basic_native_form_controls/index.html
@@ -0,0 +1,701 @@
+---
+title: Os widgets nativos
+slug: Web/Guide/HTML/Forms/Os_widgets_nativos
+tags:
+  - Aprender
+  - Contrôles
+  - Exemplos
+  - Guía
+  - HTML
+  - Iniciantes
+  - Intermediário
+  - Web
+translation_of: Learn/Forms/Basic_native_form_controls
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div>
+
+<p class="summary">Veremos agora, detalhadamente, a funcionalidade dos diferentes widgets dos formulários, observando as opções disponíveis para coletar diferentes tipos de dados. Este guia é um tanto exaustivo, cobrindo todos os widgets de formulários nativos disponíveis.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Alfabetização básica em informática e um <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">entendimento básico de HTML.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender quais são os widgets nativos de formulário disponiveis nos navegadores para coletar dados, e como implementa-los usando HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Aqui vamos nos concentrar nos widgets de formulário baseados em navegador, mas como os formulários HTML são muito limitados e a qualidade da implementação pode ser muito diferente de navegador para navegador, os desenvolvedores da Web às vezes criam seus próprios widgets de formulários </span></span>— Veja <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a> <span class="tlid-translation translation" lang="pt"><span title="">posteriormente neste mesmo módulo para obter mais idéias sobre isso.</span></span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: A maioria dos recursos discutidos neste artigo possui <span class="tlid-translation translation" lang="pt"><span title="">amplo suporte nos navegadores</span></span>; destacaremos as exceções existentes. Se você quiser mais detalhes, consulte nosso artigo <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">referência aos elementos de formulário HTML</a>, <span class="tlid-translation translation" lang="pt"><span title="">e, em particular, nossa extensa referência de </span></span><a href="/en-US/docs/Web/HTML/Element/input">tipos &lt;input&gt;</a>.</p>
+</div>
+
+<h2 id="Atributos_comuns">Atributos comuns</h2>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Muitos dos elementos usados para definir widgets de formulário têm seus próprios atributos</span></span>. Entretanto, <span class="tlid-translation translation" lang="pt"><span title="">há um conjunto de atributos comuns a todos os elementos do formulário</span></span>, os quais permitem certo controle sobre os widgets. <span class="tlid-translation translation" lang="pt"><span title="">Aqui está uma lista desses atributos comuns</span></span>:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Nome do atributo</th>
+   <th scope="col">Valor padrão</th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>(falso)</td>
+   <td>Este é um atributo booleano que permite especificar automaticamente qual elemento deverá ter o foco quando a página carregar, a menos que o usuário a substitua, por exemplo <span class="tlid-translation translation" lang="pt"><span title=""> digitando sobre um controle diferente</span></span>. <span class="tlid-translation translation" lang="pt"><span title="">Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado</span></span>.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>(<em>falso</em>)</td>
+   <td>Este é um atributo booleano que indica <span class="tlid-translation translation" lang="pt"><span title="">que o usuário não pode interagir com este elemento</span></span>. Se este atributo não estiver especificado, o elemento, então, herda a configuração do elemento que o contém, por exemplo, {{HTMLElement("fieldset")}}; se o elemento que o contém não possuir o atributo <code>disabled</code>, então o elemento é ativado.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td></td>
+   <td><span class="tlid-translation translation" lang="pt"><span title="">O elemento do formulário ao qual o widget está associado</span></span>. O valor do atributo deve ser o atributo <code>id</code> de um {{HTMLElement("form")}} no mesmo documento. <span class="tlid-translation translation" lang="pt"><span title="">Em teoria, permite colocar um widget fora de um elemento</span></span> {{HTMLElement("form")}}. <span class="tlid-translation translation" lang="pt"><span title="">Na prática, no entanto, não há navegador que suporte esse recurso.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td></td>
+   <td><span class="tlid-translation translation" lang="pt"><span title="">O nome do elemento. Este atributo é</span><span title=""> enviado com os dados do formulário.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td></td>
+   <td>O Valor inicial do elemento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Text_input_fields">Text input fields</h2>
+
+<p>Text {{htmlelement("input")}} fields are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. However, some text fields can be specialized to achieve particular needs. We've already seen a few simple examples</p>
+
+<div class="note">
+<p><strong>Note</strong>: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.</p>
+</div>
+
+<p>All text fields share some common behaviors:</p>
+
+<ul>
+ <li>They can be marked as {{htmlattrxref("readonly","input")}} (the user cannot modify the input value) or even {{htmlattrxref("disabled","input")}} (the input value is never sent with the rest of the form data).</li>
+ <li>They can have a {{htmlattrxref("placeholder","input")}}; this is text that appears inside the text input box that describes the purpose of the box briefly.</li>
+ <li>They can be constrained in {{htmlattrxref("size","input")}} (the physical size of the box) and <a href="/en-US/docs/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">length</a> (the maximum number of characters that can be entered into the box).</li>
+ <li>They can benefit from <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spell checking</a>, if the browser supports it.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its <code>type</code> attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.</p>
+</div>
+
+<h3 id="Single_line_text_fields">Single line text fields</h3>
+
+<p>A single line text field is created using an {{HTMLElement("input")}} element whose {{htmlattrxref("type","input")}} attribute value is set to <code>text</code> (also, if you don't provide the {{htmlattrxref("type","input")}} attribute, <code>text</code> is the default value). The value <code>text</code> for this attribute is also the fallback value if the value you specify for the {{htmlattrxref("type","input")}} attribute is unknown by the browser (for example if you specify <code>type="date"</code> and the browser doesn't support native date pickers).</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find examples of all the single line text field types on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">see it live also</a>).</p>
+</div>
+
+<p>Here is a basic single line text field example:</p>
+
+<pre class="brush: html">&lt;input type="text" id="comment" name="comment" value="I'm a text field"&gt;</pre>
+
+<p>Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data.</p>
+
+<p><img alt="Screenshots of single line text fields on several platforms." src="/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p>
+
+<p>HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.</p>
+
+<h4 id="E-mail_address_field">E-mail address field</h4>
+
+<p>This type of field is set with the value <code>email</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="email" id="email" name="email" multiple&gt;</pre>
+
+<p>When this <code>type</code> is used, the user is required to type a valid e-mail address into the field; any other content causes the browser to display an error when the form is submitted. Note that this is client-side error validation, performed by the browser:</p>
+
+<p><img alt="An invalid email input showing the message Please enter an email address." src="https://mdn.mozillademos.org/files/14781/email-invalid.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.</p>
+
+<p>On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find out more about form validation in the article <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a>.</p>
+</div>
+
+<h4 id="Password_field">Password field</h4>
+
+<p>This type of field is set using the value <code>password</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="password" id="pwd" name="pwd"&gt;</pre>
+
+<p>It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.</p>
+
+<p>Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.</p>
+
+<p>Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>.</p>
+
+<h4 id="Search_field">Search field</h4>
+
+<p>This type of field is set by using the value <code>search</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="search" id="search" name="search"&gt;</pre>
+
+<p>The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.</p>
+
+<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p>
+
+<h4 id="Phone_number_field">Phone number field</h4>
+
+<p>This type of field is set using <code>tel</code> as the value of the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="tel" id="tel" name="tel"&gt;</pre>
+
+<p>Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.</p>
+
+<h4 id="URL_field">URL field</h4>
+
+<p>This type of field is set using the value <code>url</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="url" id="url" name="url"&gt;</pre>
+
+<p>It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.</p>
+
+<div class="note"><strong>Note:</strong> Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.</div>
+
+<div class="note">
+<p><strong>Note</strong>: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a>.</p>
+</div>
+
+<h3 id="Multi-line_text_fields">Multi-line text fields</h3>
+
+<p>A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.</p>
+
+<pre class="brush: html">&lt;textarea cols="30" rows="10"&gt;&lt;/textarea&gt;</pre>
+
+<p>The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).</p>
+
+<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find an example of a multi-line text field on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">see it live also</a>). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to <code>none</code> using <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<p>{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):</p>
+
+<table>
+ <caption>Attributes for the {{HTMLElement("textarea")}} element</caption>
+ <thead>
+  <tr>
+   <th scope="col">Attribute name</th>
+   <th scope="col">Default value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("cols","textarea")}}</td>
+   <td><code>20</code></td>
+   <td>The visible width of the text control, in average character widths.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("rows","textarea")}}</td>
+   <td></td>
+   <td>The number of visible text lines for the control.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("wrap","textarea")}}</td>
+   <td><code>soft</code></td>
+   <td>Indicates how the control wraps text. Possible values are: <code>hard</code> or <code>soft</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.</p>
+
+<p>There are two key related points to note here:</p>
+
+<ul>
+ <li>If you want to define a default value for an {{HTMLElement("input")}} element, you have to use the <code>value</code> attribute; for a {{HTMLElement("textarea")}} element on the other hand you put the default text between the starting tag and the closing tag of the {{HTMLElement("textarea")}}.</li>
+ <li>Because of its nature, the {{HTMLElement("textarea")}} element only accepts text content; this means that any HTML content put inside a {{HTMLElement("textarea")}} is rendered as if it was plain text content.</li>
+</ul>
+
+<h2 id="Drop-down_content">Drop-down content</h2>
+
+<p>Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the <strong>select box</strong>, and <strong>autocomplete box</strong>. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.</p>
+
+<div class="note">
+<p>Note: You can find examples of all the drop-down box types on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/drop-down-content.html">drop-down-content.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html">see it live also</a>).</p>
+</div>
+
+<h3 id="Select_box">Select box</h3>
+
+<p>A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.</p>
+
+<pre class="brush: html">&lt;select id="simple" name="simple"&gt;
+  &lt;option&gt;Banana&lt;/option&gt;
+  &lt;option&gt;Cherry&lt;/option&gt;
+  &lt;option&gt;Lemon&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<p>If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:</p>
+
+<pre class="brush: html">&lt;select id="groups" name="groups"&gt;
+  &lt;optgroup label="fruits"&gt;
+    &lt;option&gt;Banana&lt;/option&gt;
+    &lt;option selected&gt;Cherry&lt;/option&gt;
+    &lt;option&gt;Lemon&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="vegetables"&gt;
+    &lt;option&gt;Carrot&lt;/option&gt;
+    &lt;option&gt;Eggplant&lt;/option&gt;
+    &lt;option&gt;Potato&lt;/option&gt;
+  &lt;/optgroup&gt;
+&lt;/select&gt;</pre>
+
+<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p>
+
+<p>If an {{HTMLElement("option")}} element is set with a <code>value</code> attribute, that attribute's value is sent when the form is submitted. If the <code>value</code> attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.</p>
+
+<p>On the {{HTMLElement("optgroup")}} element, the <code>label</code> attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.</p>
+
+<h3 id="Multiple_choice_select_box">Multiple choice select box</h3>
+
+<p>By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> and clicking multiple values).</p>
+
+<p>Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.</p>
+
+<pre class="brush: html">&lt;select multiple id="multi" name="multi"&gt;
+  &lt;option&gt;Banana&lt;/option&gt;
+  &lt;option&gt;Cherry&lt;/option&gt;
+  &lt;option&gt;Lemon&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p>
+
+<div class="note"><strong>Note:</strong> All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.</div>
+
+<h3 id="Autocomplete_box">Autocomplete box</h3>
+
+<p>You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.</p>
+
+<p>The data list is then bound to a text field (usually an <code>&lt;input&gt;</code> element) using the {{htmlattrxref("list","input")}} attribute.</p>
+
+<p>Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.</p>
+
+<pre class="brush: html">&lt;label for="myFruit"&gt;What's your favorite fruit?&lt;/label&gt;
+&lt;input type="text" name="myFruit" id="myFruit" list="mySuggestion"&gt;
+&lt;datalist id="mySuggestion"&gt;
+  &lt;option&gt;Apple&lt;/option&gt;
+  &lt;option&gt;Banana&lt;/option&gt;
+  &lt;option&gt;Blackberry&lt;/option&gt;
+  &lt;option&gt;Blueberry&lt;/option&gt;
+  &lt;option&gt;Lemon&lt;/option&gt;
+  &lt;option&gt;Lychee&lt;/option&gt;
+  &lt;option&gt;Peach&lt;/option&gt;
+  &lt;option&gt;Pear&lt;/option&gt;
+&lt;/datalist&gt;</pre>
+
+<div class="note"><strong>Note:</strong> According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.</div>
+
+<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div>
+
+<div></div>
+
+<h4 id="Datalist_support_and_fallbacks">Datalist support and fallbacks</h4>
+
+<p>The  {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.</p>
+
+<p>To handle this, here is a little trick to provide a nice fallback for those browsers:</p>
+
+<pre class="brush:html;">&lt;label for="myFruit"&gt;What is your favorite fruit? (With fallback)&lt;/label&gt;
+&lt;input type="text" id="myFruit" name="fruit" list="fruitList"&gt;
+
+&lt;datalist id="fruitList"&gt;
+  &lt;label for="suggestion"&gt;or pick a fruit&lt;/label&gt;
+  &lt;select id="suggestion" name="altFruit"&gt;
+    &lt;option&gt;Apple&lt;/option&gt;
+    &lt;option&gt;Banana&lt;/option&gt;
+    &lt;option&gt;Blackberry&lt;/option&gt;
+    &lt;option&gt;Blueberry&lt;/option&gt;
+    &lt;option&gt;Lemon&lt;/option&gt;
+    &lt;option&gt;Lychee&lt;/option&gt;
+    &lt;option&gt;Peach&lt;/option&gt;
+    &lt;option&gt;Pear&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/datalist&gt;
+</pre>
+
+<p>Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row">Safari 6</th>
+   <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Firefox 18</th>
+   <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Checkable_items">Checkable items</h2>
+
+<p>Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.</p>
+
+<p>It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">see it live also</a>).</p>
+</div>
+
+<p>For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list.  Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples. </p>
+
+<p>You also need to provide values for these kinds of inputs inside the <code>value</code> attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of <code>on</code>.</p>
+
+<h3 id="Check_box">Check box</h3>
+
+<p>A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>checkbox</code>.</p>
+
+<pre class="brush: html">&lt;input type="checkbox" checked id="carrots" name="carrots" value="carrots"&gt;
+</pre>
+
+<p>Including the <code>checked</code> attribute makes the checkbox checked automatically when the page loads.</p>
+
+<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p>
+
+<h3 id="Radio_button">Radio button</h3>
+
+<p>A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>radio</code>.</p>
+
+<pre class="brush: html">&lt;input type="radio" checked id="soup" name="meal"&gt;</pre>
+
+<p>Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.</p>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;What is your favorite meal?&lt;/legend&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;label for="soup"&gt;Soup&lt;/label&gt;
+      &lt;input type="radio" checked id="soup" name="meal" value="soup"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="curry"&gt;Curry&lt;/label&gt;
+      &lt;input type="radio" id="curry" name="meal" value="curry"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="pizza"&gt;Pizza&lt;/label&gt;
+      &lt;input type="radio" id="pizza" name="meal" value="pizza"&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/fieldset&gt;</pre>
+
+<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p>
+
+<h2 id="Buttons">Buttons</h2>
+
+<p>Within HTML forms, there are three kinds of button:</p>
+
+<dl>
+ <dt>Submit</dt>
+ <dd>Sends the form data to the server. For {{HTMLElement("button")}} elements, omitting the <code>type</code> attribute (or an invalid value of <code>type</code>) results in a submit button.</dd>
+ <dt>Reset</dt>
+ <dd>Resets all form widgets to their default values.</dd>
+ <dt>Anonymous</dt>
+ <dd>Buttons that have no automatic effect but can be customized using JavaScript code.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">see it live also</a>).</p>
+</div>
+
+<p>A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:</p>
+
+<h3 id="submit">submit</h3>
+
+<pre class="brush: html">&lt;button type="submit"&gt;
+    This a &lt;br&gt;&lt;strong&gt;submit button&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="submit" value="This is a submit button"&gt;</pre>
+
+<h3 id="reset">reset</h3>
+
+<pre class="brush: html">&lt;button type="reset"&gt;
+    This a &lt;br&gt;&lt;strong&gt;reset button&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="reset" value="This is a reset button"&gt;</pre>
+
+<h3 id="anonymous">anonymous</h3>
+
+<pre class="brush: html">&lt;button type="button"&gt;
+    This an &lt;br&gt;&lt;strong&gt;anonymous button&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="button" value="This is an anonymous button"&gt;</pre>
+
+<p>Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:</p>
+
+<ul>
+ <li>As you can see from the examples, {{HTMLElement("button")}} elements let you use HTML content in their labels, which are inserted inside the opening and closing <code>&lt;button&gt;</code> tags. {{HTMLElement("input")}} elements on the other hand are empty elements; their labels are inserted inside <code>value</code> attributes, and therefore only accept plain text content.</li>
+ <li>With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (by setting it inside a <code>value</code> attribute). This isn't reliable in versions of Internet Explorer prior to IE 8.</li>
+</ul>
+
+<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p>
+
+<p>Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.</p>
+
+<h2 id="Advanced_form_widgets">Advanced form widgets</h2>
+
+<p>In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/advanced-examples.html">advanced-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/advanced-examples.html">see it live also</a>).</p>
+</div>
+
+<h3 id="Numbers">Numbers</h3>
+
+<p>Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value <code>number</code>. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.</p>
+
+<p>It's also possible to:</p>
+
+<ul>
+ <li>Constrain the value by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</li>
+ <li>Specify the amount by which the increase and decrease buttons change the widget's value by setting the {{htmlattrxref("step","input")}} attribute.</li>
+</ul>
+
+<h4 id="Example">Example</h4>
+
+<pre class="brush: html">&lt;input type="number" name="age" id="age" min="1" max="10" step="2"&gt;</pre>
+
+<p>This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.</p>
+
+<p><code>number</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+
+<h3 id="Sliders">Sliders</h3>
+
+<p>Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.</p>
+
+<p>A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>range</code>. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.</p>
+
+<h4 id="Example_2">Example</h4>
+
+<pre class="brush: html">&lt;input type="range" name="beans" id="beans" min="0" max="500" step="10"&gt;</pre>
+
+<p>This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.</p>
+
+<p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.</p>
+
+<pre class="brush: html">&lt;label for="beans"&gt;How many beans can you eat?&lt;/label&gt;
+&lt;input type="range" name="beans" id="beans" min="0" max="500" step="10"&gt;
+&lt;span class="beancount"&gt;&lt;/span&gt;</pre>
+
+<p>This can be implemented using some simple JavaScript:</p>
+
+<pre class="brush: js">var beans = document.querySelector('#beans');
+var count = document.querySelector('.beancount');
+
+count.textContent = beans.value;
+
+beans.oninput = function() {
+  count.textContent = beans.value;
+}</pre>
+
+<p>Here we store references to the range input and the span in two variables, then we immediately set the span's <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to the current <code>value</code> of the input. Finally, we set up an <code>oninput</code> event handler so that every time the range slider is moved, the span <code>textContent</code> is updated to the new input value.</p>
+
+<p><code>range</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+
+<h3 id="Date_and_time_picker">Date and time picker</h3>
+
+<p>Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.</p>
+
+<p>A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.</p>
+
+<h4 id="datetime-local"><code>datetime-local</code></h4>
+
+<p>This creates a widget to display and pick a date with time, but without any specific time zone information.</p>
+
+<pre class="brush: html">&lt;input type="datetime-local" name="datetime" id="datetime"&gt;</pre>
+
+<h4 id="month"><code>month</code></h4>
+
+<p>This creates a widget to display and pick a month with a year.</p>
+
+<pre class="brush: html">&lt;input type="month" name="month" id="month"&gt;</pre>
+
+<h4 id="time"><code>time</code></h4>
+
+<p>This creates a widget to display and pick a time value.</p>
+
+<pre class="brush: html">&lt;input type="time" name="time" id="time"&gt;</pre>
+
+<h4 id="week"><code>week</code></h4>
+
+<p>This creates a widget to display and pick a week number and its year.</p>
+
+<pre class="brush: html">&lt;input type="week" name="week" id="week"&gt;</pre>
+
+<p>All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</p>
+
+<pre class="brush: html">&lt;label for="myDate"&gt;When are you available this summer?&lt;/label&gt;
+&lt;input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate"&gt;</pre>
+
+<p>Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.</p>
+
+<h3 id="Color_picker">Color picker</h3>
+
+<p>Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.</p>
+
+<p>A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>.</p>
+
+<pre class="brush: html">&lt;input type="color" name="color" id="color"&gt;</pre>
+
+<p>Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.</p>
+
+<h2 id="Other_widgets">Other widgets</h2>
+
+<p>There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html">see it live also</a>).</p>
+</div>
+
+<h3 id="File_picker">File picker</h3>
+
+<p>HTML forms are able to send files to a server; this specific action is detailed in the article <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>. The file picker widget is how the user can choose one or more files to send.</p>
+
+<p>To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to <code>file</code>. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.</p>
+
+<h4 id="Example_3">Example</h4>
+
+<p>In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.</p>
+
+<pre class="brush: html">&lt;input type="file" name="file" id="file" accept="image/*" multiple&gt;</pre>
+
+<h3 id="Hidden_content">Hidden content</h3>
+
+<p>It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>hidden</code>.</p>
+
+<p>If you create such an element, it's required to set its <code>name</code> and <code>value</code> attributes:</p>
+
+<pre class="brush: html">&lt;input type="hidden" id="timestamp" name="timestamp" value="1286705410"&gt;</pre>
+
+<h3 id="Image_button">Image button</h3>
+
+<p>The <strong>image button</strong> control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).</p>
+
+<p>An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>image</code>. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.</p>
+
+<pre class="brush: html">&lt;input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /&gt;</pre>
+
+<p>If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:</p>
+
+<ul>
+ <li>The X value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.x</em>".</li>
+ <li>The Y value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.y</em>".</li>
+</ul>
+
+<p>So for example when you click on the image of this widget, you are sent to a URL like the following:</p>
+
+<pre>http://foo.com?pos.x=123&amp;pos.y=456</pre>
+
+<p>This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a> article.</p>
+
+<h3 id="Meters_and_progress_bars">Meters and progress bars</h3>
+
+<p>Meters and progress bars are visual representations of numeric values.</p>
+
+<h4 id="Progress">Progress</h4>
+
+<p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.</p>
+
+<pre class="brush: html">&lt;progress max="100" value="75"&gt;75/100&lt;/progress&gt;</pre>
+
+<p>This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.</p>
+
+<p>The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
+
+<h4 id="Meter">Meter</h4>
+
+<p>A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:</p>
+
+<ul>
+ <li>The {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts:
+  <ul>
+   <li>The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values (including those values).</li>
+   <li>The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values (excluding those values).</li>
+   <li>The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values (including those values).</li>
+  </ul>
+ </li>
+ <li>The {{htmlattrxref("optimum","meter")}} value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered:
+  <ul>
+   <li>If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part.</li>
+   <li>If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part and the higher range is considered to be average as well.</li>
+   <li>If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:</p>
+
+<ul>
+ <li>If the current value is in the prefered part of the range, the bar is green.</li>
+ <li>If the current value is in the average part of the range, the bar is yellow.</li>
+ <li>If the current value is in the worst part of the range, the bar is red.</li>
+</ul>
+
+<p>Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.</p>
+
+<pre class="brush: html">&lt;meter min="0" max="100" value="75" low="33" high="66" optimum="50"&gt;75&lt;/meter&gt;</pre>
+
+<p>The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
+
+<p>Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>To dig into the different form widgets, there are some useful external resources you should check out:</p>
+
+<ul>
+ <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">The Current State of HTML5 Forms</a> by Wufoo</li>
+ <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> on Quirksmode (also <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">available for mobile</a> browsers)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/pt-br/learn/forms/form_validation/index.html b/files/pt-br/learn/forms/form_validation/index.html
new file mode 100644
index 0000000000..7f9146d0a4
--- /dev/null
+++ b/files/pt-br/learn/forms/form_validation/index.html
@@ -0,0 +1,813 @@
+---
+title: Form data validation
+slug: Web/Guide/HTML/Forms/Form_validation
+translation_of: Learn/Forms/Form_validation
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</div>
+
+<p class="summary">A validação de formulário nos ajuda a garantir que os usuários preencham os formulários no formato correto, garantindo que os dados enviados funcionem com êxito em nossos aplicativos. Este artigo apresentará conceitos e exemplos básicos sobre validação de formulário. Para mais informações adicionais, consulte o <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation guide</a>.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimento em informática, uma compreensão razoável de <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender o que é validação de formulário, por que é importante e aplicação de várias técnicas para implementá-lo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_que_é_validação_de_formulário">O que é validação de formulário?</h2>
+
+<p>Vá a qualquer site popular com um formulário de registro, e perceberá que eles dão feedback quando você não insere seus dados no formato esperado. Você receberá mensagens como:</p>
+
+<ul>
+ <li>"Sua senha precisa ter entre 8 e 30 caracteres e conter uma letra maiúscula, um símbolo e um número"</li>
+ <li>"Por favor, digite seu número de telefone no formato xxx-xxxx" (ele impõe três números seguidos por um traço, seguido por quatro números)</li>
+ <li>"Por favor insira um endereço de email válido" (se a sua entrada não estiver no formato "email@email.com")</li>
+ <li>"Este campo é obrigatório" (você não pode deixar este campo em branco)</li>
+</ul>
+
+<p>Isso é chamado de validação de formulário - quando você insere dados, o aplicativo da Web faz a verificação para ver se os dados estão corretos. Se estiver correto, o aplicativo permite que os dados sejam enviados ao servidor e (geralmente) salvos em um banco de dados; se não, você receberá uma mensagem de erro explicando quais correções precisam ser feitas. A validação de formulários pode ser implementada de várias maneiras diferentes.</p>
+
+<p><br>
+ Queremos tornar o preenchimento de formulários da web o mais fácil possível. Então, por que insistimos em validar nossos formulários? Existem três razões principais:</p>
+
+<ul>
+ <li><strong>Nos queremos que o dado correto e no formato correto </strong> — nossa aplicação não irá trabalhar de forma correta se os dados dos nossos usuarios estivem armazenados em formato incorreto, ou quando esses dados são omitidos.</li>
+ <li><strong>Quemos proteger os dados dos nossos usuários</strong> — Forçarnosos usuários a fornecer senhas seguras facilita na proteção das informações da conta do usuário.</li>
+ <li><strong>Queremos proteger nos mesmos</strong> — Existem diversas maneiras de um usuário malicioso usar formulários desprotegidos para danificar nossa aplicação (veja <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).<br>
+  {{warning("Nunca confie nos dados passados do cliente para o servidor. Mesmo que seu formulário seja validado de maneira correta e previna a má formação de inputs no lado do cliente, um usuário malicioso ainda pode roubar o request da conexão.")}}</li>
+</ul>
+
+<h3 id="Different_types_of_form_validation">Different types of form validation</h3>
+
+<p>There are two different types of form validation which you'll encounter on the web:</p>
+
+<ul>
+ <li><strong>Client-side validation</strong> is validation that occurs in the browser before the data has been submitted to the server. This is more user-friendly than server-side validation as it gives an instant response. This can be further subdivided:
+
+  <ul>
+   <li><strong>JavaScript</strong> validation is coded using JavaScript. It is completely customizable.</li>
+   <li><strong>Built-in form validation</strong> using HTML5 form validation features.  This generally does not require JavaScript. Built-in form validation has better performance, but it is not as customizable as JavaScript.</li>
+  </ul>
+ </li>
+ <li><strong>Server-side validation</strong> is validation which occurs on the server after the data has been submitted.  Server-side code is used to validate the data before it is saved into the database. If the data fails authentication, a response is sent back to the client to tell the user what corrections to make. Server-side validation is not as user-friendly as client-side validation, as it does not provide errors until the entire form has been submitted.  However, server-side validation is your application's last line of defence against incorrect or even malicious data. All popular <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">server-side frameworks</a> have features for <strong>validating</strong> and <strong>sanitizing</strong> data (making it safe).</li>
+</ul>
+
+<p>In the real world, developers tend to use a combination of client-side and server-side validation.</p>
+
+<h2 id="Using_built-in_form_validation">Using built-in form validation</h2>
+
+<p>One of the features of <a href="/en-US/docs/HTML/HTML5">HTML5</a> is the ability to validate most user data without relying on scripts. This is done by using <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">validation attributes</a> on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all the specified rules, it is considered valid; if not, it is considered invalid.</p>
+
+<p>When an element is valid:</p>
+
+<ul>
+ <li>The element matches the {{cssxref(":valid")}} CSS pseudo-class; this will let you apply a specific style to valid elements.</li>
+ <li>If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., JavaScript).</li>
+</ul>
+
+<p>When an element is invalid:</p>
+
+<ul>
+ <li>The element matches the {{cssxref(":invalid")}} CSS pseudo-class; this will let you apply a specific style to invalid elements.</li>
+ <li>If the user tries to send the data, the browser will block the form and display an error message.</li>
+</ul>
+
+<h3 id="Validation_constraints_on_input_elements_—_starting_simple">Validation constraints on input elements — starting simple</h3>
+
+<p>In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.</p>
+
+<p>Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, and a live example below:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
+  &lt;input id="choose" name="i_like"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code", "100%", 50)}}</p>
+
+<p>To begin with, make a copy of <code>fruit-start.html</code> in a new directory on your hard drive.</p>
+
+<h3 id="The_required_attribute">The required attribute</h3>
+
+<p>The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).</p>
+
+<p>Add a <code>required</code> attribute to your input, as shown below:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Also, take note of the CSS included in the example file:</p>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+
+<p>This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:</p>
+
+<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p>
+
+<h3 id="Validating_against_a_regular_expression">Validating against a regular expression</h3>
+
+<p>Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as a variety of other uses in JavaScript).</p>
+
+<p>Regexs are quite complex, and we do not intend to teach you them exhaustively in this article. Below are some examples to give you a basic idea of how they work:</p>
+
+<ul>
+ <li><code>a</code> — matches one character that is <code>a</code> (not <code>b</code>, not <code>aa</code>, etc.)</li>
+ <li><code>abc</code> — matches <code>a</code>, followed by <code>b</code>, followed by <code>c</code>.</li>
+ <li><code>a|b</code> — matches one character that is <code>a</code> or <code>b</code>.</li>
+ <li><code>abc|xyz</code> — matches exactly <code>abc</code> or exactly <code>xyz</code> (but not <code>abcxyz</code>, or <code>a</code> or <code>y</code>, etc).</li>
+ <li>There are many more possibilities that we don't need to cover here.</li>
+</ul>
+
+<p>Anyway, let's implement an example — update your HTML to add a <code>pattern</code> attribute, like so:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required pattern="banana|cherry"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p>
+
+<p>In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".</p>
+
+<p>At this point, try changing the value inside the <code>pattern</code> attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!</p>
+
+<div class="note">
+<p><strong>Note:</strong> Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the <code>email</code> type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the <code>url</code> type automatically require a properly-formed URL.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.</p>
+</div>
+
+<h3 id="Constraining_the_length_of_your_entries">Constraining the length of your entries</h3>
+
+<p>All text fields created by {{HTMLElement("input")}} or {{HTMLElement("textarea")}} can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.</p>
+
+<p>For number fields (i.e. <code>&lt;input type="number"&gt;</code>), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.</p>
+
+<p>Let's look at another example. Create a new copy of the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> file.</p>
+
+<p>Now delete the contents of the <code>&lt;body&gt;</code> element, and replace it with the following:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
+    &lt;input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="number"&gt;How many would you like?&lt;/label&gt;
+    &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<ul>
+ <li>Here you'll see that we've given the <code>text</code> field a <code>minlength</code> and <code>maxlength</code> of 6 — the same length as banana and cherry. Entering less characters will show as invalid, and entering more is not possible in most browsers.</li>
+ <li>We've also given the <code>number</code> field a <code>min</code> of 1 and a <code>max</code> of 10 — entered numbers outside this range will show as invalid, and you won't be able to use the increment/decrement arrows to move the value outside this range.</li>
+</ul>
+
+<div class="hidden">
+<pre class="notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+
+div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Here is the example running live:</p>
+
+<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>&lt;input type="number"&gt;</code> (and other types, like <code>range</code>) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).</p>
+</div>
+
+<h3 id="Full_example">Full example</h3>
+
+<p>Here is a full example to show off usage of HTML's built-in validation features:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Title&lt;abbr title="This field is mandatory"&gt;*&lt;/abbr&gt;&lt;/legend&gt;
+      &lt;input type="radio" required name="title" id="r1" value="Mr"&gt;&lt;label for="r1"&gt;Mr.&lt;/label&gt;
+      &lt;input type="radio" required name="title" id="r2" value="Ms"&gt;&lt;label for="r2"&gt;Ms.&lt;/label&gt;
+    &lt;/fieldset&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="n1"&gt;How old are you?&lt;/label&gt;
+    &lt;!-- The pattern attribute can act as a fallback for browsers which
+         don't implement the number input type but support the pattern attribute.
+         Please note that browsers that support the pattern attribute will make it
+         fail silently when used with a number field.
+         Its usage here acts only as a fallback --&gt;
+    &lt;input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t1"&gt;What's your favorite fruit?&lt;abbr title="This field is mandatory"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+    &lt;input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"&gt;
+    &lt;datalist id="l1"&gt;
+      &lt;option&gt;Banana&lt;/option&gt;
+      &lt;option&gt;Cherry&lt;/option&gt;
+      &lt;option&gt;Apple&lt;/option&gt;
+      &lt;option&gt;Strawberry&lt;/option&gt;
+      &lt;option&gt;Lemon&lt;/option&gt;
+      &lt;option&gt;Orange&lt;/option&gt;
+    &lt;/datalist&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t2"&gt;What's your e-mail?&lt;/label&gt;
+    &lt;input type="email" id="t2" name="email"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t3"&gt;Leave a short message&lt;/label&gt;
+    &lt;textarea id="t3" name="msg" maxlength="140" rows="5"&gt;&lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+  margin: 0;
+  padding: 0 5px;
+}
+
+p &gt; label {
+  display: block;
+}
+
+input[type=text],
+input[type=email],
+input[type=number],
+textarea,
+fieldset {
+/* required to properly style form
+   elements on WebKit based browsers */
+  -webkit-appearance: none;
+
+  width : 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}</pre>
+
+<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p>
+
+<p>See <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">Validation-related attributes</a> for a complete list of attributes that can be used to constrain input values, and the input types that support them.</p>
+
+<h3 id="Customized_error_messages">Customized error messages</h3>
+
+<p>As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.</p>
+
+<p>These automated messages have two drawbacks:</p>
+
+<ul>
+ <li>There is no standard way to change their look and feel with CSS.</li>
+ <li>They depend on the browser locale, which means that you can have a page in one language but an error message displayed in another language.</li>
+</ul>
+
+<table>
+ <caption>French versions of feedback messages on an English page</caption>
+ <thead>
+  <tr>
+   <th scope="col">Browser</th>
+   <th scope="col">Rendering</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox 17 (Windows 7)</td>
+   <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td>
+  </tr>
+  <tr>
+   <td>Chrome 22 (Windows 7)</td>
+   <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td>
+  </tr>
+  <tr>
+   <td>Opera 12.10 (Mac OSX)</td>
+   <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.</p>
+
+<p>HTML5 provides the <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">constraint validation API</a> to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="mail"&gt;I would like you to provide me an e-mail&lt;/label&gt;
+  &lt;input type="email" id="mail" name="mail"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>In JavaScript, you call the <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> method:</p>
+
+<pre class="brush: js notranslate">var email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("I expect an e-mail, darling!");
+  } else {
+    email.setCustomValidity("");
+  }
+});</pre>
+
+<p>{{EmbedLiveSample("Customized_error_messages", "100%", 80)}}</p>
+
+<h2 id="Validating_forms_using_JavaScript">Validating forms using JavaScript</h2>
+
+<p>If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.</p>
+
+<h3 id="The_constraint_validation_API">The constraint validation API</h3>
+
+<p>More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on specific form element interfaces:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></li>
+</ul>
+
+<h4 id="Constraint_validation_API_properties">Constraint validation API properties</h4>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>validationMessage</code></td>
+   <td>A localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is <code>false</code>), or the element's value satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>validity</code></td>
+   <td>A {{domxref("ValidityState")}} object describing the validity state of the element. See that article for details of possible validity states.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate</code></td>
+   <td>Returns <code>true</code> if the element will be validated when the form is submitted; <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Constraint_validation_API_methods">Constraint validation API methods</h4>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>Returns <code>true</code> if the element's value has no validity problems; <code>false</code> otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLFormElement.reportValidity()")}}</td>
+   <td>Returns <code>true</code> if the element or its child controls satisfy validation constraints. When <code>false</code> is returned, cancelable {{event("invalid")}} events are fired for each invalid element and validation problems are reported to the user.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity(<em>message</em>)</code></td>
+   <td>Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.<br>
+    <br>
+    If the argument is the empty string, the custom error is cleared.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For legacy browsers, it's possible to use a <a href="https://hyperform.js.org/" rel="external">polyfill such as Hyperform </a> to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.</p>
+
+<h4 id="Example_using_the_constraint_validation_API">Example using the constraint validation API</h4>
+
+<p>Let's see how to use this API to build custom error messages. First, the HTML:</p>
+
+<pre class="brush: html notranslate">&lt;form novalidate&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+      &lt;span&gt;Please enter an email address:&lt;/span&gt;
+      &lt;input type="email" id="mail" name="mail"&gt;
+      &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.</p>
+
+<p>The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.</p>
+
+<h5 id="CSS">CSS</h5>
+
+<p>This CSS styles our form and the error output to look more attractive.</p>
+
+<pre class="brush: css notranslate">/* This is just to make the example nicer */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<h5 id="JavaScript">JavaScript</h5>
+
+<p>The following JavaScript code handles the custom error validation.</p>
+
+<pre class="brush: js notranslate">// There are many ways to pick a DOM node; here we get the form itself and the email
+// input box, as well as the span element into which we will place the error message.
+
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+var error = document.querySelector('.error');
+
+email.addEventListener("input", function (event) {
+  // Each time the user types something, we check if the
+  // email field is valid.
+  if (email.validity.valid) {
+    // In case there is an error message visible, if the field
+    // is valid, we remove the error message.
+    error.innerHTML = ""; // Reset the content of the message
+    error.className = "error"; // Reset the visual state of the message
+  }
+}, false);
+form.addEventListener("submit", function (event) {
+  // Each time the user tries to send the data, we check
+  // if the email field is valid.
+  if (!email.validity.valid) {
+
+    // If the field is not valid, we display a custom
+    // error message.
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+    // And we prevent the form from being sent by canceling the event
+    event.preventDefault();
+  }
+}, false);</pre>
+
+<p>Here is the live result:</p>
+
+<p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p>
+
+<p>The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.</p>
+
+<h3 id="Validating_forms_without_a_built-in_API">Validating forms without a built-in API</h3>
+
+<p>Sometimes, such as with legacy browsers or <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">custom widgets</a>, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.</p>
+
+<p>To validate a form, you have to ask yourself a few questions:</p>
+
+<dl>
+ <dt>What kind of validation should I perform?</dt>
+ <dd>You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.</dd>
+ <dt>What should I do if the form does not validate?</dt>
+ <dd>This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?</dd>
+ <dt>How can I help the user to correct invalid data?</dt>
+ <dd>In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read:
+ <ul>
+  <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li>
+  <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li>
+  <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li>
+  <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<h4 id="An_example_that_doesnt_use_the_constraint_validation_API">An example that doesn't use the constraint validation API</h4>
+
+<p>In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+        &lt;span&gt;Please enter an email address:&lt;/span&gt;
+        &lt;input type="text" class="mail" id="mail" name="mail"&gt;
+        &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;p&gt;
+  &lt;!-- Some legacy browsers need to have the `type` attribute
+       explicitly set to `submit` on the `button`element --&gt;
+  &lt;button type="submit"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that <a href="/en-US/docs/Accessibility/ARIA">ARIA</a> is an independent specification that's not specifically related to HTML5.</p>
+
+<h5 id="CSS_2">CSS</h5>
+
+<p>Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.</p>
+
+<pre class="brush: css notranslate">/* This is just to make the example nicer */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<h5 id="JavaScript_2">JavaScript</h5>
+
+<p>The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.</p>
+
+<pre class="brush: js notranslate">// There are fewer ways to pick a DOM node with legacy browsers
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+
+// The following is a trick to reach the next sibling Element node in the DOM
+// This is dangerous because you can easily build an infinite loop.
+// In modern browsers, you should prefer using element.nextElementSibling
+var error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// As per the HTML5 Specification
+var emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Many legacy browsers do not support the addEventListener method.
+// Here is a simple way to handle this; it's far from the only one.
+function addEvent(element, event, callback) {
+  var previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    var output = callback(e);
+
+    // A callback that returns `false` stops the callback chain
+    // and interrupts the execution of the event callback.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Now we can rebuild our validation constraint
+// Because we do not rely on CSS pseudo-class, we have to
+// explicitly set the valid/invalid class on our email field
+addEvent(window, "load", function () {
+  // Here, we test if the field is empty (remember, the field is not required)
+  // If it is not, we check if its content is a well-formed e-mail address.
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// This defines what happens when the user types in the field
+addEvent(email, "input", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// This defines what happens when the user tries to submit the data
+addEvent(form, "submit", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Some legacy browsers do not support the event.preventDefault() method
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});</pre>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample("An_example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}</p>
+
+<p>As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:</p>
+
+<ul>
+ <li>Standalone library
+  <ul>
+   <li><a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></li>
+  </ul>
+ </li>
+ <li>jQuery plug-in:
+  <ul>
+   <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Remote_validation">Remote validation</h4>
+
+<p>In some cases, it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a username. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the username rather than asking the user to send the data, then send back the form with an error.</p>
+
+<p>Performing such a validation requires taking a few precautions:</p>
+
+<ul>
+ <li>It requires exposing an API and some data publicly; be sure it is not sensitive data.</li>
+ <li>Network lag requires performing asynchronous validation. This requires some UI work in order to be sure that the user will not be blocked if the validation is not performed properly.</li>
+</ul>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:</p>
+
+<ul>
+ <li>Display explicit error messages.</li>
+ <li>Be permissive about the input format.</li>
+ <li>Point out exactly where the error occurs (especially on large forms).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.html b/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.html
new file mode 100644
index 0000000000..76e202e685
--- /dev/null
+++ b/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.html
@@ -0,0 +1,786 @@
+---
+title: How to build custom form widgets
+slug: Web/Guide/HTML/Forms/How_to_build_custom_form_widgets
+translation_of: Learn/Forms/How_to_build_custom_form_controls
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</div>
+
+<p class="summary">There are many cases where <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">available HTML form widgets</a> are just nThere are many cases where available HTML form widgets are just not enough. If you want to <a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">perform advanced styling</a> on some widgets such as the {{HTMLElement("select")}} element or if you want to provide custom behaviors, you have no choice but to build your own widgets.</p>
+
+<p>In this article, we will see how to build such a widget. To that end, we will work with an example: rebuilding the {{HTMLElement("select")}} element.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We'll focus on building the widgets, not on how to make the code generic and reusable; that would involve some non-trival JavaScript code and DOM manipulation in an unknown context, and that is out of the scope of this article.</p>
+</div>
+
+<h2 id="Design_structure_and_semantics">Design, structure, and semantics</h2>
+
+<p>Before building a custom widget, you should start by figuring out exactly what you want. This will save you some precious time. In particular, it's important to clearly define all the states of your widget. To do this, it's good to start with an existing widget whose states and behavior are well known, so that you can simply mimic those as much as possible.</p>
+
+<p>In our example, we will rebuild the {{HTMLElement("select")}} element. Here is the result we want to achieve:</p>
+
+<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p>
+
+<p>This screenshot shows the three main states of our widget: the normal state (on the left); the active state (in the middle) and the open state (on the right).</p>
+
+<p>In terms of behavior, we want our widget to be usable with a mouse as well as with a keyboard, just like any native widget. Let's start by defining how the widget reaches each state:</p>
+
+<dl>
+ <dt>The widget is in its normal state when:</dt>
+ <dd>
+ <ul>
+  <li>the page loads</li>
+  <li>the widget was active and the user clicks anywhere outside the widget</li>
+  <li>the widget was active and the user moves the focus to another widget using the keyboard</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note:</strong> Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/" title="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">Option+Tab combination</a>.</p>
+ </div>
+ </dd>
+ <dt>The widget is in its active state when:</dt>
+ <dd>
+ <ul>
+  <li>the user clicks on it</li>
+  <li>the user hits the tab key and it gains focus</li>
+  <li>the widget was in its open state and the user clicks on the widget.</li>
+ </ul>
+ </dd>
+ <dt>The widget is in its open state when:</dt>
+ <dd>
+ <ul>
+  <li>the widget is in any other state than open and the user clicks on it</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Once we know how to change states, it is important to define how to change the widget's value:</p>
+
+<dl>
+ <dt>The value changes when:</dt>
+ <dd>
+ <ul>
+  <li>the user clicks on an option when the widget is in the open state</li>
+  <li>the user hits the up or down arrow keys when the widget is in its active state</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Finally, let's define how the widget's options will behave:</p>
+
+<ul>
+ <li>When the widget is opened, the selected option is highlighted</li>
+ <li>When the mouse is over an option, the option is highlighted and the previously highlighted option is returned to its normal state</li>
+</ul>
+
+<p>For the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. For example, what do you think will happen if the user hits the tab key while the widget is in its open state? The answer is... nothing. OK, the right behavior seems obvious but the fact is, because it's not defined in our specs, it is very easy to overlook this behavior. This is especially true in a team environment when the people who design the widget's behavior are different from the ones who implement it.</p>
+
+<p>Another fun example: what will happen if the user hits the up or down arrow keys while the widget is in the open state? This one is a little bit trickier. If you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any keyboard interactions for the opened state. On the other hand, if you consider that the active state and the open state overlap a bit, the value may change but the option will definitely not be highlighted accordingly, once again because we did not define any keyboard interactions over options when the widget is in its opened state (we have only defined what should happen when the widget is opened, but nothing after that).</p>
+
+<p>In our example, the missing specifications are obvious so we will handle them, but it can be a real problem on exotic new widgets, for which nobody has the slightest idea of what the right behavior is. So it's always good to spend time in this design stage, because if you define a behavior poorly, or forget to define one, it will be very hard to redefine it once the users have gotten used to it. If you have doubts, ask for the opinions of others, and if you have the budget for it, do not hesitate to <a href="http://en.wikipedia.org/wiki/Usability_testing" rel="external" title="http://en.wikipedia.org/wiki/Usability_testing">perform user tests</a>. This process is called UX Design. If you want to learn more about this topic, you should check out the following helpful resources:</p>
+
+<ul>
+ <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li>
+ <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li>
+ <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note: </strong>Also, in most systems there is a way to open the {{HTMLElement("select")}} element to look at all the available choices (this is the same as clicking the {{HTMLElement("select")}} element with a mouse). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the <code>click</code> event.</p>
+</div>
+
+<h3 id="Defining_the_HTML_structure_and_semantics">Defining the HTML structure and semantics</h3>
+
+<p>Now that the widget's basic functionality has been decided upon, it's time to start building our widget. The first step is to define its HTML structure and to give it some basic semantics. Here is what we need to rebuild a {{HTMLElement("select")}} element:</p>
+
+<pre class="brush: html">&lt;!-- This is our main container for our widget.
+     The tabindex attribute is what allows the user to focus the widget.
+     We'll see later that it's better to set it through JavaScript. --&gt;
+&lt;div class="select" tabindex="0"&gt;
+
+  &lt;!-- This container will be used to display the current value of the widget --&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+
+  &lt;!-- This container will contain all the options available for our widget.
+       Because it's a list, it makes sense to use the ul element. --&gt;
+  &lt;ul class="optList"&gt;
+    &lt;!-- Each option only contains the value to be displayed, we'll see later
+         how to handle the real value that will be sent with the form data --&gt;
+    &lt;li class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li class="option"&gt;Banana&lt;/li&gt;
+    &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+
+&lt;/div&gt;</pre>
+
+<p>Note the use of class names; these identify each relevant part regardless of the actual underlying HTML elements used. This is important to make sure that we will not bind our CSS and JavaScript to a strong HTML structure, so that we can make implementation changes later without breaking code that uses the widget. For example if you wish to implement the equivalent of the {{HTMLElement("optgroup")}} element.</p>
+
+<h3 id="Creating_the_look_and_feel_using_CSS">Creating the look and feel using CSS</h3>
+
+<p>Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.</p>
+
+<h4 id="Required_styles">Required styles</h4>
+
+<p>The required styles are those necessary to handle the three states of our widget.</p>
+
+<pre class="brush: css">.select {
+  /* This will create a positioning context for the list of options */
+  position: relative;
+
+  /* This will make our widget become part of the text flow and sizable at the same time */
+  display : inline-block;
+}</pre>
+
+<p>We need an extra class <code>active</code> to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.</p>
+
+<pre class="brush: css">.select .active,
+.select:focus {
+  outline: none;
+
+  /* This box-shadow property is not exactly required, however it's so important to be sure
+     the active state is visible that we use it as a default value, feel free to override it. */
+  box-shadow: 0 0 3px 1px #227755;
+}</pre>
+
+<p>Now, let's handle the list of options:</p>
+
+<pre class="brush: css">/* The .select selector here is syntactic sugar to be sure the classes we define are
+   the ones inside our widget. */
+.select .optList {
+  /* This will make sure our list of options will be displayed below the value
+     and out of the HTML flow */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}</pre>
+
+<p>We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.</p>
+
+<pre class="brush: css">.select .optList.hidden {
+  /* This is a simple way to hide the list in an accessible way,
+     we will talk more about accessibility in the end */
+  max-height: 0;
+  visibility: hidden;
+}</pre>
+
+<h4 id="Beautification">Beautification</h4>
+
+<p>So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.</p>
+
+<pre class="brush: css">.select {
+  /* All sizes will be expressed with the em value for accessibility reasons
+     (to make sure the widget remains resizable if the user uses the
+     browser's zoom in a text-only mode). The computations are made
+     assuming 1em == 16px which is the default value in most browsers.
+     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* We need extra room for the down arrow we will add */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* The first declaration is for browsers that do not support linear gradients.
+     The second declaration is because WebKit based browsers haven't unprefixed it yet.
+     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* Because the value can be wider than our widget, we have to make sure it will not
+     change the widget's width */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* And if the content overflows, it's better to have a nice ellipsis. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}</pre>
+
+<p>We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the <code>select</code> class.</p>
+
+<pre class="brush: css">.select:after {
+  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}</pre>
+
+<p>Next, let's style the list of options:</p>
+
+<pre class="brush: css">.select .optList {
+  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
+
+  /* this will reset the default style of the ul element */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* This will ensure that even if the values are smaller than the widget,
+     the list of options will be as large as the widget itself */
+  min-width : 100%;
+
+  /* In case the list is too long, its content will overflow vertically
+     (which will add a vertical scrollbar automatically) but never horizontally
+     (because we haven't set a width, the list will adjust its width automatically.
+     If it can't, the content will be truncated) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}</pre>
+
+<p>For the options, we need to add a <code>highlight</code> class to be able to identify the value the user will pick (or has picked).</p>
+
+<pre class="brush: css">.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<p>So here's the result with our three states:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Basic state</th>
+   <th scope="col" style="text-align: center;">Active state</th>
+   <th scope="col" style="text-align: center;">Open state</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+  </tr>
+  <tr>
+   <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Bring_your_widget_to_life_with_JavaScript">Bring your widget to life with JavaScript</h2>
+
+<p>Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Creating reusable widgets is something that can be a bit tricky. The <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component draft</a> is one of the answers to this specific issue. <a href="http://x-tags.org/" rel="external" title="http://x-tags.org/">The X-Tag project</a> is a test implementation of this specification; we encourage you to take a look at it.</p>
+</div>
+
+<h3 id="Why_isn't_it_working">Why isn't it working?</h3>
+
+<p>Before we start, it's important to remember something very important about JavaScript: inside a browser, <strong>it's an unreliable technology</strong>. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:</p>
+
+<ul>
+ <li>The user has turned off JavaScript: This is the most unusual case ever; very few people turn off JavaScript nowadays.</li>
+ <li>The script is not loading. This is one of the most common cases, especially in the mobile world where the network is not very reliable.</li>
+ <li>The script is buggy. You should always consider this possibility.</li>
+ <li>The script is in conflict with a third party script. This can happen with tracking scripts or any bookmarklets the user uses.</li>
+ <li>The script is in conflict with, or is affected by, a browser extension (such as Firefox's <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> extension or Chrome's <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> extension).</li>
+ <li>The user is using a legacy browser, and one of the features you require is not supported. This will happen frequently when you make use of cutting-edge APIs.</li>
+</ul>
+
+<p>Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.</p>
+
+<p>In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.</p>
+
+<p>First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.</p>
+
+<pre class="brush: html">&lt;body class="no-widget"&gt;
+  &lt;form&gt;
+    &lt;select name="myFruit"&gt;
+      &lt;option&gt;Cherry&lt;/option&gt;
+      &lt;option&gt;Lemon&lt;/option&gt;
+      &lt;option&gt;Banana&lt;/option&gt;
+      &lt;option&gt;Strawberry&lt;/option&gt;
+      &lt;option&gt;Apple&lt;/option&gt;
+    &lt;/select&gt;
+
+    &lt;div class="select"&gt;
+      &lt;span class="value"&gt;Cherry&lt;/span&gt;
+      &lt;ul class="optList hidden"&gt;
+        &lt;li class="option"&gt;Cherry&lt;/li&gt;
+        &lt;li class="option"&gt;Lemon&lt;/li&gt;
+        &lt;li class="option"&gt;Banana&lt;/li&gt;
+        &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+        &lt;li class="option"&gt;Apple&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  &lt;/form&gt;
+
+&lt;/body&gt;</pre>
+
+<p>Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.</p>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  /* This CSS selector basically says:
+     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
+     - or we have not changed the body class, therefore the body class is still "no-widget",
+       so the elements whose class is "select" must be hidden */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}</pre>
+
+<p>Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the <code>no-widget</code> class and add the <code>widget</code> class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.</p>
+
+<pre class="brush: js">window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Without JS</th>
+   <th scope="col" style="text-align: center;">With JS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+   <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+  </tr>
+  <tr>
+   <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.</p>
+</div>
+
+<h3 id="Making_the_job_easier">Making the job easier</h3>
+
+<p>In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).</p>
+
+<p>If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external" title="http://dojotoolkit.org/">Dojo</a>, <a href="http://yuilibrary.com/" rel="external" title="http://yuilibrary.com/">YUI</a>, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the <a href="http://yepnopejs.com/" rel="external" title="http://yepnopejs.com/">yepnope</a> library for example).</p>
+
+<p>The features we plan to use are the following (ordered from the riskiest to the safest):</p>
+
+<ol>
+ <li>{{domxref("element.classList","classList")}}</li>
+ <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (This is not DOM but modern JavaScript)</li>
+ <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li>
+</ol>
+
+<p>Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. This is important because <code>Array</code> objects support the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an <code>Array</code> and because <code>forEach</code> is so convenient to use, we can easily add the support of <code>forEach</code> to {{domxref("NodeList")}} in order to make our life easier, like so:</p>
+
+<pre class="brush: js">NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}</pre>
+
+<p>We weren't kidding when we said it's easy to do.</p>
+
+<h3 id="Building_event_callbacks">Building event callbacks</h3>
+
+<p>The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.</p>
+
+<pre class="brush: js">// This function will be used each time we want to deactivate a custom widget
+// It takes one parameter
+// select : the DOM node with the `select` class to deactivate
+function deactivateSelect(select) {
+
+  // If the widget is not active there is nothing to do
+  if (!select.classList.contains('active')) return;
+
+  // We need to get the list of options for the custom widget
+  var optList = select.querySelector('.optList');
+
+  // We close the list of option
+  optList.classList.add('hidden');
+
+  // and we deactivate the custom widget itself
+  select.classList.remove('active');
+}
+
+// This function will be used each time the user wants to (de)activate the widget
+// It takes two parameters:
+// select : the DOM node with the `select` class to activate
+// selectList : the list of all the DOM nodes with the `select` class
+function activeSelect(select, selectList) {
+
+  // If the widget is already active there is nothing to do
+  if (select.classList.contains('active')) return;
+
+  // We have to turn off the active state on all custom widgets
+  // Because the deactivateSelect function fulfill all the requirement of the
+  // forEach callback function, we use it directly without using an intermediate
+  // anonymous function.
+  selectList.forEach(deactivateSelect);
+
+  // And we turn on the active state for this specific widget
+  select.classList.add('active');
+}
+
+// This function will be used each time the user wants to open/closed the list of options
+// It takes one parameter:
+// select : the DOM node with the list to toggle
+function toggleOptList(select) {
+
+  // The list is kept from the widget
+  var optList = select.querySelector('.optList');
+
+  // We change the class of the list to show/hide it
+  optList.classList.toggle('hidden');
+}
+
+// This function will be used each time we need to highlight an option
+// It takes two parameters:
+// select : the DOM node with the `select` class containing the option to highlight
+// option : the DOM node with the `option` class to highlight
+function highlightOption(select, option) {
+
+  // We get the list of all option available for our custom select element
+  var optionList = select.querySelectorAll('.option');
+
+  // We remove the highlight from all options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // We highlight the right option
+  option.classList.add('highlight');
+};</pre>
+
+<p>That's all you need in order to handle the various states of the custom widget.</p>
+
+<p>Next, we bind these functions to the appropriate events:</p>
+
+<pre class="brush: js">// We handle the event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // as well as all its `option` elements
+    var optionList = select.querySelectorAll('.option');
+
+    // Each time a user hovers their mouse over an option, we highlight the given option
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note: the `select` and `option` variable are closures
+        // available in the scope of our function call.
+        highlightOption(select, option);
+      });
+    });
+
+    // Each times the user click on a custom select element
+    select.addEventListener('click', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We toggle the visibility of the list of options
+      toggleOptList(select);
+    });
+
+    // In case the widget gain focus
+    // The widget gains the focus each time the user clicks on it or each time
+    // they use the tabulation key to access the widget
+    select.addEventListener('focus', function (event) {
+      // Note: the `select` and `selectList` variable are closures
+      // available in the scope of our function call.
+
+      // We activate the widget
+      activeSelect(select, selectList);
+    });
+
+    // In case the widget loose focus
+    select.addEventListener('blur', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We deactivate the widget
+      deactivateSelect(select);
+    });
+  });
+});</pre>
+
+<p>At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Handling_the_widget's_value">Handling the widget's value</h3>
+
+<p>Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.</p>
+
+<p>The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.</p>
+
+<p>As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:</p>
+
+<pre class="brush: js">// This function updates the displayed value and synchronizes it with the native widget.
+// It takes two parameters:
+// select : the DOM node with the class `select` containing the value to update
+// index  : the index of the value to be selected
+function updateValue(select, index) {
+  // We need to get the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  // We also need  to get the value placeholder of our custom widget
+  var value = select.querySelector('.value');
+
+  // And we need the whole list of options
+  var optionList = select.querySelectorAll('.option');
+
+  // We set the selected index to the index of our choice
+  nativeWidget.selectedIndex = index;
+
+  // We update the value placeholder accordingly
+  value.innerHTML = optionList[index].innerHTML;
+
+  // And we highlight the corresponding option of our custom widget
+  highlightOption(select, optionList[index]);
+};
+
+// This function returns the current selected index in the native widget
+// It takes one parameter:
+// select : the DOM node with the class `select` related to the native widget
+function getIndex(select) {
+  // We need to access the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};</pre>
+
+<p>With these two functions, we can bind the native widgets to the custom ones:</p>
+
+<pre class="brush: js">// We handle event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // We make our custom widget focusable
+    select.tabIndex = 0;
+
+    // We make the native widget no longer focusable
+    select.previousElementSibling.tabIndex = -1;
+
+    // We make sure that the default selected value is correctly displayed
+    updateValue(select, selectedIndex);
+
+    // Each time a user clicks on an option, we update the value accordingly
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // When the user hits the down arrow, we jump to the next option
+      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
+
+      // When the user hits the up arrow, we jump to the previous option
+      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});</pre>
+
+<p>In the code above, it's worth noting the use of the <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code> property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.</p>
+
+<p>With that, we're done! Here's the result:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>But wait a second, are we really done?</p>
+
+<h2 id="Make_it_accessible">Make it accessible</h2>
+
+<p>We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!</p>
+
+<p>Fortunately, there is a solution and it's called <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA stands for "Accessible Rich Internet Application", and it's <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C specification</a> specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.</p>
+
+<h3 id="The_role_attribute">The <code>role</code> attribute</h3>
+
+<p>The key attribute used by <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute. The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the <code>option</code> role).</p>
+
+<p>It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role <code>grid</code>, and the {{HTMLElement("ul")}} element matches the role <code>list</code>. Because we use a {{HTMLElement("ul")}} element, we want to make sure the <code>listbox</code> role of our widget will supersede the <code>list</code> role of the {{HTMLElement("ul")}} element. To that end, we will use the role <code>presentation</code>. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.</p>
+
+<p>To support the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role, we just have to update our HTML like this:</p>
+
+<pre class="brush: html">&lt;!-- We add the role="listbox" attribute to our top element --&gt;
+&lt;div class="select" role="listbox"&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+  &lt;!-- We also add the role="presentation" to the ul element --&gt;
+  &lt;ul class="optList" role="presentation"&gt;
+    &lt;!-- And we add the role="option" attribute to all the li elements --&gt;
+    &lt;li role="option" class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Banana&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Including both the <code>role</code> attribute and a <code>class</code> attribute is only necessary if you want to support legacy browsers that do not support the <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">CSS attribute selectors</a>.</p>
+</div>
+
+<h3 id="The_aria-selected_attribute">The <code>aria-selected</code> attribute</h3>
+
+<p>Using the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute is not enough. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: <code>aria-selected</code>.</p>
+
+<p>The <code>aria-selected</code> attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our <code>updateValue()</code> function:</p>
+
+<pre class="brush: js">function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // We make sure that all the options are not selected
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // We make sure the chosen option is selected
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};</pre>
+
+<p>Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> or <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>):</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the final source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).</p>
+
+<p>Here are a few libraries you should consider before coding your own:</p>
+
+<ul>
+ <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li>
+ <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li>
+ <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li>
+ <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a">And many more…</a></li>
+</ul>
+
+<p>If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/learn/forms/how_to_structure_a_web_form/index.html b/files/pt-br/learn/forms/how_to_structure_a_web_form/index.html
new file mode 100644
index 0000000000..33a562813c
--- /dev/null
+++ b/files/pt-br/learn/forms/how_to_structure_a_web_form/index.html
@@ -0,0 +1,304 @@
+---
+title: Como estruturar um formulário HTML
+slug: Web/Guide/HTML/Forms/How_to_structure_an_HTML_form
+tags:
+  - Beginner
+  - CodingScripting
+  - Example
+  - Forms
+  - Guide
+  - HTML
+  - Learn
+  - Structure
+  - Web
+translation_of: Learn/Forms/How_to_structure_a_web_form
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p>
+</div>
+
+<p class="summary">Com o básico fora do caminho, podemos olhar melhor para os elementos utilizados, a fim de entender as diferentes partes de um formulário.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-Requisitos:</th>
+   <td>Leitura sobre computação básica e <a href="/docs/Learn/HTML/Introduction_to_HTML">entendimento básico de HTML.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender como estruturar formulários HTML e entregar a eles semântica de forma a torná-los úteis e acessíveis.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A flexibilidade dos formulários HTML fazem com que sejam uma das estruturas mais complexas do HTML, você pode construir qualquer tipo básico de formulário usando elementos e atributos exclusivos de formulários. Assim, usar a estrutura correta ao criar um formulário HTML o ajudará a garantir que o formulário seja utilizável e <a href="/pt-BR/docs/Learn/Accessibility">acessível</a>.</p>
+
+<h2 id="O_elemento_&lt;form>">O elemento &lt;form&gt; </h2>
+
+<p>O elemento {{HTMLElement("form")}} é o elemento que formalmente define o formulário e os atributos que definem a maneira como esse formulário se comporta. Sempre que você desejar criar um formulário HTML, você deve iniciá-lo usando este elemento, colocando todo o conteúdo dentro deste. Muitas tecnologias assistivas ou plugins de navegadores são capazes de descobrir elemetos {{HTMLElement("form")}} e de implementar ganchos especiais para torná-los mais fáceis de usar.</p>
+
+<p>Nós já vimos isto em um artigo anterior:</p>
+
+<div class="note"><strong>Nota:</strong> É estritamente proíbido aninhar um formulário dentro de outro formulário. Isto pode fazer com que os formulários se comportem de maneira imprevisível baseada no navegador que está sendo utilizado.</div>
+
+<p>Note que, sempre é possível usar um widget de formulário fora de um elemento {{HTMLElement("form")}} mas se o fizer, o widget não terá nada a ver com o formulário. Estes widgets podem ser usados fora de um formulário, mas para tanto você deverá ter um plano especial para eles, pois este não farão nada por si próprios. Você terá de controlar o comportamento deles através de JavaScript.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>O HTML 5 introduziu o atributo <code>form</code> no grupo de elementos de formulários em HTML. Ele deve deixá-lo atrelar explícitamente um elemento com um form mesmo se não estiver dentro de um {{ HTMLElement("form") }}. Infelizmente, devido ao tempo de vida, essa implementação ainda pelos navegadores ainda não é boa o suficiente para se confiar nela.</p>
+</div>
+
+<h2 id="Os_elementos_&lt;fieldset>_e_&lt;legend>">Os elementos &lt;fieldset&gt; e &lt;legend&gt;</h2>
+
+<p>O elemento {{HTMLElement ("fieldset")}} é uma maneira conveniente de criar grupos de widgets que compartilham o mesmo propósito. Um elemento {{HTMLElement ("fieldset")}} pode ser rotulado com um elemento {{HTMLElement ("legend")}}. O elemento {{HTMLElement ("legend")}} descreve formalmente a finalidade do elemento {{HTMLElement ("fieldset")}} ao qual está incluído.</p>
+
+<p>Muitas tecnologias assistivas usarão o elemento {{HTMLElement ("legend")}} como se fosse parte da etiqueta de cada widget dentro do elemento {{HTMLElement ("fieldset")}} correspondente. Por exemplo, alguns leitores de tela, como <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> ou <a href="http://www.nvda-project.org/">NVDA</a>, pronunciarão o conteúdo da legenda antes de pronunciar o rótulo de cada widget.</p>
+
+<p>Aqui está um pequeno exemplo:</p>
+
+<pre class="brush:html; notranslate">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Fruit juice size&lt;/legend&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_1" value="small" /&gt;
+      &lt;label for="size_1"&gt;Small&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_2" value="medium" /&gt;
+      &lt;label for="size_2"&gt;Medium&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_3" value="large" /&gt;
+      &lt;label for="size_3"&gt;Large&lt;/label&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>Com este exemplo, um leitor de tela pronunciará "Fruit juice size small" para o primeiro widget, "Fruit juice size medium" para o segundo, e "Fruit juice size large" para o terceiro.</p>
+
+<p>O caso de uso neste exemplo é um dos mais importantes. Cada vez que você tiver um conjunto de botões de opção, você deve ter certeza de que eles estão aninhados dentro de um elemento {{HTMLElement ("fieldset")}}. Existem outros casos de uso e, em geral, o elemento {{HTMLElement ("fieldset")}} também pode ser usado para conferir acessibilidade a um formulário. Devido à sua influência sobre a tecnologia assistiva, o elemento {{HTMLElement ("fieldset")}} é um dos elementos-chave para a construção de formulários acessíveis. No entanto, é sua responsabilidade não abusá-lo. Se possível, cada vez que você criar um formulário, tente ouvir como o leitor de tela o interpreta. Se parecer estranho, é uma boa sugestão de que sua estrutura de formulário precisa ser melhorada.</p>
+
+<h2 id="O_elemento_&lt;label>">O elemento &lt;label&gt; </h2>
+
+<p>Como vimos no artigo anterior, o elemento {{HTMLElement ("label")}} é a maneira formal de definir um rótulo para um widget de formulário HTML. Esse é o elemento mais importante se você quiser criar formulários acessíveis - quando implementados corretamente, os leitores de tela falarão o rótulo de um elemento de formulário juntamente com as instruções relacionadas. Veja este exemplo, que vimos no artigo anterior:</p>
+
+<pre class="notranslate"><code>&lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input type="text" id="name" name="user_name"&gt;</code></pre>
+
+<p>Com o &lt;label&gt; associado corretamente ao &lt;input&gt; por meio de seus atributos 'for' e 'id' respectivamente (o 'label' do atributo faz referência ao atributo id do widget correspondente), um leitor de tela lerá algo como "Nome, editar texto".</p>
+
+<p>Se o 'label' não estiver configurado corretamente, um leitor de tela só lerá algo como "Editar texto em branco", o que não é muito útil.</p>
+
+<p>Observe que um widget pode ser aninhado dentro de seu elemento &lt;label&gt;, assim:</p>
+
+<pre class="notranslate"><code>&lt;label for="name"&gt;
+  Name: &lt;input type="text" id="name" name="user_name"&gt;
+&lt;/label&gt;</code></pre>
+
+<p>Mesmo nesses casos, entretanto, é considerada a melhor prática definir o atributo 'for' porque algumas tecnologias assistivas não entendem os relacionamentos implícitos entre labels e widgets.</p>
+
+<h3 id="Labels_são_clicáveis_também_!.">Labels são clicáveis também !.</h3>
+
+<p>Outra vantagem de configurar 'labels' adequadamente é que você pode clicar no label para ativar o widget correspondente, em todos os navegadores. Isso é útil para exemplos como entradas de texto, onde você pode clicar no label, bem como na entrada para focalizá-lo, mas é especialmente útil para botões de opção e caixas de seleção - a área de acerto de tal controle pode ser muito pequena, então é útil para torná-lo o maior possível.</p>
+
+<p>Por exemplo:</p>
+
+<pre class="notranslate"><code>&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="taste_1"&gt;I like cherry&lt;/label&gt;
+    &lt;input type="checkbox" id="taste_1" name="taste_cherry" value="1"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="taste_2"&gt;I like banana&lt;/label&gt;
+    &lt;input type="checkbox" id="taste_2" name="taste_banana" value="2"&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota: Você pode encontrar este exemplo em</strong> <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">ver ao vivo também</a>).</p>
+</div>
+
+<h3 id="Múltiplos_labels">Múltiplos labels</h3>
+
+<p>Estritamente falando, você pode colocar vários rótulos em um único widget, mas isso não é uma boa ideia, pois algumas tecnologias de assistência podem ter problemas para lidar com eles. No caso de vários rótulos, você deve aninhar um widget e seus rótulos dentro de um único elemento {{htmlelement ("label")}}.</p>
+
+<p>Vamos considerar este exemplo:</p>
+
+<pre class="notranslate"><code>&lt;p&gt;Required fields are followed by &lt;abbr title="required"&gt;*&lt;/abbr&gt;.&lt;/p&gt;
+
+&lt;!-- So this: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;Name:&lt;/label&gt;
+  &lt;input type="text" name="username"&gt;
+  &lt;label for="username"&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;!-- would be better done like this: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;
+    &lt;span&gt;Name:&lt;/span&gt;
+    &lt;input id="username" type="text" name="username"&gt;
+    &lt;abbr title="required"&gt;*&lt;/abbr&gt;
+  &lt;/label&gt;
+&lt;/div&gt;
+
+&lt;!-- But this is probably best: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;Name: &lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+  &lt;input id="username" type="text" name="username"&gt;
+&lt;/div&gt;</code></pre>
+
+<p>The paragraph at the top defines the rule for required elements. It must be at the beginning to make sure that assistive technologies such as screen readers will display or vocalize it to the user before they find a required element. That way, they will know what the asterisk means. A screen reader will speak the star as "<em>star</em>" or "<em>required</em>", depending on the screen reader's settings — in any case, what will be spoken is made clear in the first paragraph).</p>
+
+<ul>
+ <li>In the first example, the label is not read out at all with the input — you just get "edit text blank", plus the actual labels are read out separately. The multiple <code>&lt;label&gt;</code>elements confuse the screenreader.</li>
+ <li>In the second example, things are a bit clearer — the label read out along with the input is "name star name edit text", and the labels are still read out separately. Things are still a bit confusing, but it's a bit better this time because the input has a label associated with it.</li>
+ <li>The third example is best — the actual label is read out all together, and the label read out with the input is "name star edit text".</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.</p>
+</div>
+
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">see it live also</a>). don't run the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!</p>
+
+<h2 dir="ltr" id="Estruturas_comuns_HTML_usadas_com_formulários">Estruturas comuns HTML usadas com formulários</h2>
+
+<p dir="ltr" id="tw-target-text">Além das estruturas específicas dos formulários HTML, é bom lembrar que os formulários são apenas HTML. Isso significa que você pode usar todo o poder do HTML para estruturar um formulário HTML.</p>
+
+<p>Como você pode ver nos exemplos, é comum envolver um <em>label</em> e seu <em>widget</em> com um elemento {{HTMLElement("div")}}. Os elementos {{HTMLElement("p")}} também são comumente usados, assim como as listas HTML (a última é mais comum para estruturar vários <em>checkboxes</em> ou <em>radio buttons</em>).</p>
+
+<p>Além do elemento {{HTMLElement("fieldset")}}, uma prática comum também é usar títulos HTML (por exemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}) e seção (por exemplo, {{htmlelement("section")}}) para estruturar um formulário complexo.</p>
+
+<p>Acima de tudo, cabe a você encontrar um estilo com o qual você acha confortável codificar e que também resulte em formulários acessíveis e utilizáveis.</p>
+
+<p>Temos cada seção desacoplada da funcionalidade contida nos elementos de {{htmlelement("section")}} e um {{htmlelement("fieldset")}} para conter os <em>radio buttons</em>.</p>
+
+<h3 id="Active_learning_building_a_form_structure">Active learning: building a form structure</h3>
+
+<p>Let's put these ideas into practice and build a slightly more involved form structure — a payment form. This form will contain a number of widget types that you may not yet understand — don't worry about this for now; you'll find out how they work in the next article (<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a>). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.</p>
+
+<ol>
+ <li>To start with, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">blank template file</a> and the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS for our payment form</a> in a new directory on your computer.</li>
+ <li>First of all, apply the CSS to the HTML by adding the following line inside the HTML {{htmlelement("head")}}:
+  <pre class="notranslate"><code>&lt;link href="payment-form.css" rel="stylesheet"&gt;</code></pre>
+ </li>
+ <li>Next, start your form off by adding the outer {{htmlelement("form")}} element:
+  <pre class="notranslate"><code>&lt;form&gt;
+
+&lt;/form&gt;</code></pre>
+ </li>
+ <li>Inside the <code>&lt;form&gt;</code> tags, start by adding a heading and paragraph to inform users how required fields are marked:
+  <pre class="notranslate"><code>&lt;h1&gt;Payment form&lt;/h1&gt;
+&lt;p&gt;Required fields are followed by &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;</code></pre>
+ </li>
+ <li>Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct {{htmlelement("section")}} element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list ({{htmlelement("li")}}) element. Last, we have two standard text {{htmlelement("input")}}s and their associated {{htmlelement("label")}} elements, each contained inside a {{htmlelement("p")}}, plus a password input for entering a password. Add this code to your form now:
+  <pre class="notranslate"><code>&lt;section&gt;
+    &lt;h2&gt;Contact information&lt;/h2&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Title&lt;/legend&gt;
+      &lt;ul&gt;
+          &lt;li&gt;
+            &lt;label for="title_1"&gt;
+              &lt;input type="radio" id="title_1" name="title" value="M." &gt;
+              Mister
+            &lt;/label&gt;
+          &lt;/li&gt;
+          &lt;li&gt;
+            &lt;label for="title_2"&gt;
+              &lt;input type="radio" id="title_2" name="title" value="Ms."&gt;
+              Miss
+            &lt;/label&gt;
+          &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/fieldset&gt;
+    &lt;p&gt;
+      &lt;label for="name"&gt;
+        &lt;span&gt;Name: &lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="text" id="name" name="username"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="mail"&gt;
+        &lt;span&gt;E-mail: &lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="email" id="mail" name="usermail"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="pwd"&gt;
+        &lt;span&gt;Password: &lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="password" id="pwd" name="password"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</code></pre>
+ </li>
+ <li>Now we'll turn to the second <code>&lt;section&gt;</code> of our form — the payment information. Here we have three distinct widgets along with their labels, each contained inside a <code>&lt;p&gt;</code>. The first is a drop down menu ({{htmlelement("select")}}) for selecting credit card type. the second is an <code>&lt;input&gt;</code> element of type number, for entering a credit card number. The last one is an <code>&lt;input&gt;</code> element of type <code>date</code>, for entering the expiration date of the card (this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers). Again, enter the following below the previous section:
+  <pre class="notranslate"><code>&lt;section&gt;
+    &lt;h2&gt;Payment information&lt;/h2&gt;
+    &lt;p&gt;
+      &lt;label for="card"&gt;
+        &lt;span&gt;Card type:&lt;/span&gt;
+      &lt;/label&gt;
+      &lt;select id="card" name="usercard"&gt;
+        &lt;option value="visa"&gt;Visa&lt;/option&gt;
+        &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
+        &lt;option value="amex"&gt;American Express&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="number"&gt;
+        &lt;span&gt;Card number:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="number" id="number" name="cardnumber"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="date"&gt;
+        &lt;span&gt;Expiration date:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+        &lt;em&gt;formatted as yyyy/mm/dd&lt;/em&gt;
+      &lt;/label&gt;
+      &lt;input type="date" id="date" name="expiration"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</code></pre>
+ </li>
+ <li>The last section we'll add is a lot simpler, containing only a {{htmlelement("button")}} of type <code>submit</code>, for submitting the form data. Add this to the bottom of your form now:
+  <pre class="notranslate"><code>&lt;p&gt; &lt;button type="submit"&gt;Validate the payment&lt;/button&gt; &lt;/p&gt;</code></pre>
+ </li>
+</ol>
+
+<p>You can see the finished form in action below (also find it on GitHub — see our payment-form.html <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">source</a> and <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">running live</a>):</p>
+
+<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You now have all the knowledge you'll need to properly structure your HTML forms; the next article will dig into implementing all the different types of form widgets you'll want to use to collect information from your users.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/pt-br/learn/forms/index.html b/files/pt-br/learn/forms/index.html
new file mode 100644
index 0000000000..15bd243566
--- /dev/null
+++ b/files/pt-br/learn/forms/index.html
@@ -0,0 +1,79 @@
+---
+title: Formulários da Web - Trabalhando com dados do usuário
+slug: Web/Guide/HTML/Forms
+tags:
+  - Aprender
+  - Funcionalidades
+  - Guía
+  - HTML
+  - Iniciante
+  - Web
+  - formulários
+translation_of: Learn/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">Este guia tem uma série de artigos que vão ajudar você a ficar craque em HTML forms.</span> HTML forms são ferramentas poderosas para interagir com usuários; contudo, por razões técnicas e históricas,  <span>nem sempre é óbvio como usá-los em seu pleno potencia</span>l. Neste guia, vamos cobrir todos os aspectos dos HTML forms, da estrutura ao estilo, do manuseio de dados à widgets personalizados. Você vai aprender a desfrutar do grande poder que elas lhes oferecem!</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Antes de iniciar este guia, você deve estar familiarizado com os conceitos da nossa <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a>.</p>
+
+<div class="note">
+<p><strong>Dica</strong>: Se você está usando um computador/tablet/outro aparelho onde você não pode criar seus próprios arquivos, você pode testar (a maior parte) dos códigos de exemplo em uma ferramenta online como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/pt-BR/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias_básicos">Guias básicos</h2>
+
+<p>Os seguintes guias te ensinarão todo o básico de formulários HTML, alcançando alguns tópicos ligeiramente mais avançados no caminho.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Meu primeiro formulário HTML</a></dt>
+ <dd>O primeiro artigo na série te instruirá em sua primeira vez criando um formulário HTML, incluindo o projeto/desenho de um formulário simples, implementação usando os elementos HTML corretos, estilização bem básica com CSS, e como os dados são enviados para um servidor.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Como estruturar um formulário HTML</span></a></dt>
+ <dd><span>Agora que o básico não é mais problema, daremos uma olhada mais aprofundada nos elementos usados para dar estrutura e significado para as diferentes partes de um formulário.</span></dd>
+ <dt><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Os form widgets nativos </span></a></dt>
+ <dd>Veremos a funcionalidade de diferentes form widgets em detalhe, observando quais opções estão disponíveis para coletar diferentes tipos de dados.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando e recuperando dados</span></a></dt>
+ <dd><span>Este artigo mostra o que acontece quando um usuário submete (envia) um formulário </span>—<span> para onde os dados vão, e o que fazer quando ele chegar lá? Também algumas das preocupações com segurança envolvida ao enviar dados em um formulário.</span></dd>
+ <dt><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validação de dados nos formulários HTML</a></dt>
+ <dd>Enviar os dados não é o suficiente — também precisamos garantir que os dados que o usuário preenche num formulário está no formato correto que precisamos para processá-los com sucesso, e que não quebre nossas aplicações. Também queremos ajudar nossos usuários a preencher os formulários corretamente e não se sentirem frustrados ao usar nossos apps. Validação de dados nos ajuda a alcançar esses objetivos — este artigo te diz o que precisa saber.</dd>
+</dl>
+
+<h2 id="Guias_avançados">Guias avançados</h2>
+
+<p>Estes guias passam por algumas técnicas mais avançadas, que você achará útil aprender quando já tiver dominado o básico.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Como criar widgets HTML form personalizados</a></dt>
+ <dd>Você encontrará alguns casos onde os widgets nativos não fornecem o que você precisa, por exemplo em função de estilo ou funcionalidade. Nestes casos, você precisará construir seu próprio widget de formulário a partir de HTML puro. Neste artigo explicamos como você pode fazer isso e o que precisa considerar ao fazer isso, com um estudo de caso prático.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviando HTML forms através do JavaScript</a></dt>
+ <dd>Este artigo mostra formas de usar um formulário para montar um HTTP request e enviá-lo via JavaScript personalizado, em vez da forma de submissão padrão. Também apresenta razões pelas quais você quereria fazer isso, e as implicações de fazer dessa forma. (Veja também Usando o objeto FormData.)</dd>
+ <dt><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formulários HTML para browsers antigos</a></dt>
+ <dd>Aborda detecção de funcionalidades, etc. Deveria ser movido para o módulo de testes multi-browser, já que a mesma coisa é abordada lá.</dd>
+ <dt><a href="/pt-BR/docs/HTML/Forms_in_HTML">Novidades em formulários no HTML5</a></dt>
+ <dd>Este artigo provê uma referência às novas adições aos formulários HTML na especificação HTML5.</dd>
+</dl>
+
+<h2 id="Guias_de_estilização_de_formulários">Guias de estilização de formulários</h2>
+
+<p>Estes guias para estilizar formulários com CSS realmente deveriam estar nos tópicos sobre <a href="/pt-BR/docs/Aprender/CSS">CSS</a>, mas estamos mantendo-os aqui por enquanto até uma oportunidade apropriada de movê-los.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilizando formulários HTML</a></dt>
+ <dd>Este artigo fornece uma introdução à personalização de estilos de formulário com CSS, incluindo todo o básico que você precisa para tarefas básicas de estilização.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilos avançados para HTML forms</a></dt>
+ <dd>Aqui vemos algumas técnicas mais avançadas de estilização de formulários que precisam ser usadas quando tiver de lidar com alguns dos elementos mais difíceis de personalizar.</dd>
+ <dt><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabela de compatibilidade das Propriedades dos widgets</a></dt>
+ <dd>Este último artigo fornece uma referência prática que te permite procurar quais propriedades CSS são compatíveis com quais elementos de formulário.</dd>
+</dl>
+
+<h2 id="Avaliações">Avaliações</h2>
+
+<p>A definir.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/HTML/Element#Formulários">Referência de elementos de formulário HTML</a></li>
+</ul>
diff --git a/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.html b/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.html
new file mode 100644
index 0000000000..c6eaaee29b
--- /dev/null
+++ b/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.html
@@ -0,0 +1,251 @@
+---
+title: Sending form data
+slug: Web/Guide/HTML/Forms/Sending_and_retrieving_form_data
+translation_of: Learn/Forms/Sending_and_retrieving_form_data
+---
+<p>Em muitos casos, a finalidade de <a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Form</a> Um é enviar dados para um servidor. O servidor processa os dados e envia uma resposta ao usuário. Isso parece simples, mas é importante manter algumas coisas em mente para garantir que os dados não danifiquem o servidor ou causem problemas para seus usuários.</p>
+
+<h2 id="Para_onde_vão_os_dados">Para onde vão os dados?</h2>
+
+<p>Aqui nós discutiremos o que acontece com os dadosquando um formulário é enviado.</p>
+
+<h3 id="Sobre_a_arquitetura_cliente_servidor">Sobre a arquitetura cliente / servidor</h3>
+
+<p>A web é baseada em uma arquitetura cliente / servidor muito básica que pode ser resumida da seguinte forma: um cliente (normalmente um navegador da Web) envia um pedido a um servidor (na maioria das vezes um servidor web como <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a>, <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>, <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>, <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a>, etc.), usando o <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a>. O servidor responde a solicitação usando o mesmo protocolo.</p>
+
+<p><img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="height: 141px; width: 400px;"></p>
+
+<p>No lado do cliente, um formulário HTML é nada mais do que uma maneira conveniente e amigável para configurar uma solicitação HTTP para enviar dados para um servidor. Isso permite que o usuário forneça informações a serem entregues na solicitação HTTP.</p>
+
+<h3 id="No_lado_do_cliente_definindo_como_enviar_os_dados">No lado do cliente: definindo como enviar os dados</h3>
+
+<p>O elemento {{HTMLElement("form")}} define como os dados serão enviados. Todos os seus atributos são projetados para permitir que você configure o pedido a ser enviado quando um usuário acessa um botão de envio. Os dois atributos mais importantes são:{{htmlattrxref("action","form")}} e {{htmlattrxref("method","form")}}.</p>
+
+<h4 id="o_atributo_htmlattrxref(actionform)">o atributo {{htmlattrxref("action","form")}}</h4>
+
+<p>Este atributo define para onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário.</p>
+
+<h5 id="Exemplos">Exemplos</h5>
+
+<p>Neste exemplo, os dados são enviados para http://foo.com:</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com"&gt;</pre>
+
+<p class="brush: html">Aqui, os dados são enviados para o mesmo servidor que hospeda a página do formulário, mas para um URL diferente no servidor:</p>
+
+<pre class="brush: html">&lt;form action="/somewhere_else"&gt;</pre>
+
+<p class="brush: html">Quando especificado sem atributos, como abaixo, o atributo {{HTMLElement("form")}}   faz com que os dados sejam enviados para a página que inclui o formulário:</p>
+
+<pre class="brush: html">&lt;form&gt;</pre>
+
+<p class="brush: html">Muitas páginas mais antigas usam a seguinte notação para indicar que os dados devem ser enviados para a mesma página que contém o formulário; Isso era necessário porque até HTML5, o atributo {{htmlattrxref ( "action", "form")}} era obrigatório. Isso não é mais necessário.</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;</pre>
+
+<div class="note">
+<p><strong>Nota: É possível especificar um URL que use o protocolo HTTPS (HTTP seguro). Quando você fizer isso, os dados são criptografados junto com o resto da solicitação, mesmo se o formulário em si é hospedado em uma página insegura acessada usando HTTP. Por outro lado, se o formulário estiver hospedado na página segura, mas você especificar um URL HTTP inseguro com o atributo {{htmlattrxref ( "action", "form")}}, todos os navegadores exibirão um aviso de segurança para o usuário cada vez que Tente enviar dados porque os dados não serão criptografados.</strong></p>
+</div>
+
+<h4 id="o_atributo_htmlattrxref(methodform)">o atributo {{htmlattrxref("method","form")}}</h4>
+
+<p>Este atributo define como os dados são enviados. o <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a> </p>
+
+<p>Fornece várias maneiras de executar um pedido; Os dados de formulários HTML podem ser enviados através de pelo menos dois deles: o método GET eo método POST.</p>
+
+<p>Para entender a diferença entre esses dois métodos, vamos dar um passo atrás e examinar como funciona o HTTP. Cada vez que você deseja acessar um recurso na Web, o navegador envia uma solicitação para um URL. Uma solicitação HTTP consiste em duas partes: um cabeçalho que contém um conjunto de metadados globais sobre as capacidades do navegador e um corpo que pode conter informações necessárias ao servidor para processar a solicitação específica.</p>
+
+<h5 id="O_método_GET">O método GET</h5>
+
+<p>O método GET é o método usado pelo navegador para pedir ao servidor para enviar de volta um determinado recurso: "Hey servidor, eu quero obter este recurso." Nesse caso, o navegador envia um corpo vazio. Como o corpo está vazio, se um formulário é enviado usando esse método, os dados enviados para o servidor são anexados ao URL.</p>
+
+<h6 id="Exemplo_Considere_o_seguinte_formulário">Exemplo<br>
+ Considere o seguinte formulário:</h6>
+
+<pre class="brush: html">&lt;form action="http://foo.com" method="get"&gt;
+  &lt;input name="say" value="Hi"&gt;
+  &lt;input name="to" value="Mom"&gt;
+  &lt;button&gt;Envie meus cumprimentos&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Com o método GET, a solicitação HTTP tem esta aparência:</p>
+
+<pre>GET /?say=Hi&amp;to=Mom HTTP/1.1
+Host: foo.com</pre>
+
+<h5 id="O_método_POST">O método POST</h5>
+
+<p>O método POST é um pouco diferente. É o método que o navegador envia ao servidor para pedir uma resposta que leva em conta os dados fornecidos no corpo da solicitação HTTP: "Hey servidor, dê uma olhada nesses dados e envie-me de volta um resultado apropriado". Se um formulário é enviado usando esse método, os dados são anexados ao corpo do pedido HTTP.</p>
+
+<h6 id="Exemplo">Exemplo</h6>
+
+<p>Considere esta forma (a mesma acima):</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com" method="post"&gt;
+  &lt;input name="say" value="Hi"&gt;
+  &lt;input name="to" value="Mom"&gt;
+  &lt;button&gt;Send my greetings&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Quando enviado usando o método POST, o pedido HTTP se parece com isto:</p>
+
+<pre>POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&amp;to=Mom</pre>
+
+<p>O cabeçalho Content-Length indica o tamanho do corpo eo cabeçalho Content-Type indica o tipo de recurso enviado para o servidor. Vamos discutir esses cabeçalhos em um pouco.</p>
+
+<p>Obviamente, as solicitações HTTP nunca são exibidas para o usuário (se você quiser vê-las, você precisa usar ferramentas como o Firefox <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a> ou o <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). A única coisa exibida para o usuário é o URL chamado. Assim, com uma solicitação GET, o usuário verá os dados em sua barra de URL, mas com uma solicitação POST, eles não. Isso pode ser muito importante por duas razões:</p>
+
+<ol>
+ <li>Se você precisar enviar uma senha (ou qualquer parte sensível de dados), nunca use o método GET ou corre o risco de exibi-lo na barra de URL.</li>
+ <li>Se você precisar enviar uma grande quantidade de dados, o método POST é preferido porque alguns navegadores limitam o tamanho dos URLs. Além disso, muitos servidores limitam o comprimento dos URLs que aceitam.</li>
+</ol>
+
+<h3 id="No_lado_do_servidor_recuperar_os_dados">No lado do servidor: recuperar os dados</h3>
+
+<p>Seja qual for o método HTTP escolhido, o servidor recebe uma string que será analisada para obter os dados como uma lista de pares chave / valor. A maneira como você acessa essa lista depende da plataforma de desenvolvimento que você usa e de quaisquer frameworks específicos que você possa usar com ele. A tecnologia que você usa também determina como as chaves duplicadas são manipuladas; Freqüentemente, o valor recebido mais recentemente para uma determinada chave recebe prioridade.</p>
+
+<h4 id="Exemplo_PHP_Bruto">Exemplo: PHP Bruto</h4>
+
+<p>O PHP oferece alguns objetos globais para acessar os dados. Supondo que você tenha usado o método POST, o exemplo a seguir apenas leva os dados e exibe-o para o usuário. Claro, o que você faz com os dados depende de você. Você pode exibi-lo, armazená-lo em um banco de dados, enviá-los por e-mail, ou processá-lo de alguma outra maneira.</p>
+
+<pre class="brush: php">&lt;?php
+  // The global $_POST variable allows you to access the data sent with the POST method
+  // To access the data sent with the GET method, you can use $_GET
+  $say = htmlspecialchars($_POST['say']);
+  $to  = htmlspecialchars($_POST['to']);
+
+  echo  $say, ' ', $to;</pre>
+
+<p>Este exemplo exibe uma página com os dados enviados. Em nosso exemplo de antes, a saída seria:</p>
+
+<pre>Oi Mãe</pre>
+
+<h4 id="Example_Python_Bruto">Example: Python Bruto</h4>
+
+<p>This example uses Python to do the same thing--display the provided data on a web page. It uses the <a href="http://docs.python.org/3/library/cgi.html" rel="external" title="http://docs.python.org/3/library/cgi.html">CGI Python package</a> to access the form data.</p>
+
+<pre class="brush: python">#!/usr/bin/env python
+import html
+import cgi
+import cgitb; cgitb.enable()     # for troubleshooting
+
+print("Content-Type: text/html") # HTTP header to say HTML is following
+print()                          # blank line, end of headers
+
+form = cgi.FieldStorage()
+say  = html.escape(form["say"].value);
+to   = html.escape(form["to"].value);
+
+print(say, " ", to)</pre>
+
+<p>O resultado é o mesmo que com o PHP:</p>
+
+<pre>Oi Mãe</pre>
+
+<h4 id="Outros_idiomas_e_frameworks">Outros idiomas e frameworks</h4>
+
+<p>Há muitas outras tecnologias do lado do servidor que você pode usar para o tratamento de formulários, incluindo <a href="/en-US/docs/" title="/en-US/docs/">Perl</a>, <a href="/en-US/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>, etc. Basta escolher o que você mais gosta. Dito isto, é importante notar que é muito incomum usar essas tecnologias diretamente porque isso pode ser complicado. É mais comum usar um dos muitos frameworks agradáveis que facilitam o manuseio de formulários, como:</p>
+
+<ul>
+ <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> Para PHP</li>
+ <li><a href="https://www.djangoproject.com/" rel="external" title="https://www.djangoproject.com/">Django</a> Para Python</li>
+ <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> Para Ruby</li>
+ <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> Para Java</li>
+ <li>etc.</li>
+</ul>
+
+<p>Vale a pena notar que mesmo usando essas estruturas, trabalhar com formulários não é necessariamente fácil. Mas é muito melhor, e você vai economizar muito tempo.</p>
+
+<h2 id="Um_caso_especial_enviar_arquivos">Um caso especial: enviar arquivos</h2>
+
+<p>Arquivos são um caso especial com formulários HTML. Eles são dados binários - ou considerados como tal - onde todos os outros dados são dados de texto. Porque HTTP é um protocolo de texto, há requisitos especiais para manipular dados binários.</p>
+
+<h3 id="o_htmlattrxref(enctypeform)_atributo">o {{htmlattrxref("enctype","form")}} atributo</h3>
+
+<p>Esse atributo permite especificar o valor do cabeçalho HTTP Content-Type. Este cabeçalho é muito importante porque informa ao servidor que tipo de dados está sendo enviado. Por padrão, seu valor é application / x-www-form-urlencoded. Em termos humanos, isso significa: "Este é o formulário de dados que foi codificado em forma de URL."</p>
+
+<p>Mas se você quiser enviar arquivos, você precisa fazer duas coisas:</p>
+
+<ul>
+ <li>Colocou o {{htmlattrxref("method","form")}} Atributo para POST porque o conteúdo do arquivo não pode ser colocado dentro de um parâmetro de URL usando um formulário.</li>
+ <li>Defina o valor de {{htmlattrxref("enctype","form")}} Para multipart / form-data porque os dados serão divididos em várias partes, uma para cada arquivo mais uma para o texto do corpo do formulário que pode ser enviado com eles.</li>
+</ul>
+
+<p>Por exemplo:</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="file" name="myFile"&gt;
+  &lt;button&gt;Send the file&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<div class="note">
+<p><strong>Nota: Alguns navegadores suportam</strong>{{htmlattrxref("multiple","input")}} Atributo no {{HTMLElement("input")}} Elemento para enviar mais de um arquivo com apenas um elemento de entrada. Como o servidor lida com esses arquivos realmente depende da tecnologia usada no servidor. Como mencionado anteriormente, usando um quadro fará sua vida muito mais fácil.</p>
+</div>
+
+<div class="warning">
+<p><strong>Aviso: Muitos servidores são configurados com um limite de tamanho para arquivos e solicitações HTTP, a fim de evitar abusos. É importante verificar esse limite com o administrador do servidor antes de enviar um arquivo.</strong></p>
+</div>
+
+<h2 id="Preocupações_com_segurança">Preocupações com segurança</h2>
+
+<p>Cada vez que você envia dados para um servidor, você precisa considerar a segurança. Formulários HTML são um dos primeiros vetores de ataque contra servidores. Os problemas nunca vêm dos formulários HTML em si; Eles vêm de como o servidor manipula dados.</p>
+
+<h3 id="Falhas_de_segurança_comuns">Falhas de segurança comuns</h3>
+
+<p>Dependendo do que você está fazendo, existem alguns problemas de segurança muito conhecidos:</p>
+
+<h4 id="XSS_e_CSRF">XSS e CSRF</h4>
+
+<p>Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF) são tipos comuns de ataques que ocorrem quando você exibe dados enviados por um usuário para o usuário ou para outro usuário.</p>
+
+<p>O XSS permite que os invasores injetem scripts do lado do cliente em páginas da Web vistas por outros usuários. Uma vulnerabilidade de scripts entre sites pode ser usada por atacantes para ignorar controles de acesso, como o <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">same origin policy</a>. O efeito desses ataques pode variar de um pequeno incômodo a um risco de segurança significativo.</p>
+
+<p>CSRF são semelhantes aos ataques XSS, já que eles começam da mesma maneira - injetando script do lado do cliente em páginas da Web - mas seu destino é diferente. Os invasores do CSRF tentam aumentar os privilégios para aqueles de um usuário com privilégios mais altos (como um administrador do site) para executar uma ação que não deve ser capaz de fazer (por exemplo, enviar dados para um usuário não confiável).</p>
+
+<p>Os ataques XSS exploram a confiança que um usuário tem para um site, enquanto os ataques CSRF exploram a confiança que um site tem para seus usuários.</p>
+
+<p>To prevent these attacks, you should always check the data a user sends to your server and (if you need to display it) try not to display the HTML content as provided by the user. Intead, you should process the user-provided data so you don't display it verbatim. <span style="line-height: 1.5;"> Almost all frameworks on the market today implement a minimal filter that removes the HTML {{HTMLElement("script")}}, {{HTMLElement("iframe")}} and {{HTMLElement("object")}} elements from data sent by any user. This helps to mitigate the risk, but doesn't necessarily eradicate it.</span></p>
+
+<h4 id="SQL_injection">SQL injection</h4>
+
+<p>SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request in the hope that the server will execute it (many times when the application server tries to store the data). This is actually <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">one of the main vector attacks against web sites</a>.</p>
+
+<p>The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> on a PHP/MySQL infrastructure).</p>
+
+<h4 id="HTTP_header_injection_and_email_injection">HTTP header injection and email injection</h4>
+
+<p>These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users, but they are an open door to deeper problems such as session hijacking or phishing attacks.</p>
+
+<p>These attacks are mostly silent, and can turn your server into a <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p>
+
+<h3 id="Be_paranoid_Never_trust_your_users">Be paranoid: Never trust your users</h3>
+
+<p>So, how do you fight these threats? This is a topic far beyond this guide, but there are a few rules to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.</p>
+
+<p>All data that comes to your server must be checked and sanitized. Always. No exception.</p>
+
+<ul>
+ <li>Escape potentially dangerous characters. The specific characters you should be cautious with vary depending on the context in which the data is used and the server platform you employ, but all server-side languages have functions for this.</li>
+ <li>Limit the incoming amount of data to allow only what's necessary.</li>
+ <li>Sandbox uploaded files (store them on a different server and allow access to the file only through a different subdomain or even better through a fully different domain name).</li>
+</ul>
+
+<p>You should avoid many/most problems if you follow these three rules, but it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>As you can see, sending form data is easy, but securing an application can be tricky. Just remember that a front-end developer is not the one who should define the security model of the data. Yes, as we'll see, it's possible to <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">perform client side data validation</a> but the server can't trust this validation because it has no way to truly know what really happens on the client side.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>If you want to learn more about securing a web application, you can dig into these resources:</p>
+
+<ul>
+ <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">The Open Web Application Security Project (OWASP)</a></li>
+ <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Chris Shiflett's blog about PHP Security</a></li>
+</ul>
diff --git a/files/pt-br/learn/forms/your_first_form/index.html b/files/pt-br/learn/forms/your_first_form/index.html
new file mode 100644
index 0000000000..31ef58aa7c
--- /dev/null
+++ b/files/pt-br/learn/forms/your_first_form/index.html
@@ -0,0 +1,270 @@
+---
+title: Meu primeiro formulário HTML
+slug: Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML
+translation_of: Learn/Forms/Your_first_form
+---
+<p>Este é um artigo introdutório para formulários HTML. Através de um simples formulário de contato, nós veremos os requisitos básicos para construir formulários HTML. Esse artigo assume que você não sabe nada sobre formulários HTML, mas presume que você conhece o <a href="/pt-BR/docs/HTML/Introduction">básico de HTML</a> e <a href="/pt-BR/docs/Web/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">CSS</a>.</p>
+
+<h2 id="Antes_de_começarmos">Antes de começarmos</h2>
+
+<h3 id="O_que_são_formulários_HTML">O que são formulários HTML?</h3>
+
+<p>Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.</p>
+
+<p>Um formulário HTML é feito de um ou mais widgets. Esses widgets podem ser campos de texto (linha única ou de várias linhas), caixas de seleção, botões, checkboxes ou radio buttons. A maior parte do tempo, estes elementos são emparelhados com uma legenda que descreve o seu objetivo.</p>
+
+<h3 id="O_que_você_precisa_para_trabalhar_com_formulários">O que você precisa para trabalhar com formulários?</h3>
+
+<p>Você não precisa de nada mais do que o que é requisitado para trabalhar com HTML: Um editor de texto e um navegador. É claro, que se você esta acostumado a usá-los você pode ter vantagens de uma IDE completa como <a href="http://www.microsoft.com/visualstudio" rel="external" title="http://www.microsoft.com/visualstudio">Visual Studio</a>, <a href="http://www.eclipse.org" rel="external" title="http://www.eclipse.org">Eclipse</a>, <a href="http://www.aptana.com/" rel="external" title="http://www.aptana.com/">Aptana</a>, etc., mas cabe somente a você.</p>
+
+<p>A principal diferença entre um formulário de HTML e um documento regular de HTML é que, maioria das vezes, o dado coletado é enviado ao servidor. Nesse caso, você precisa configurar um servidor web para receber e processar os dados. Como configurar um servidor está além do escopo deste artigo, mas se você quer saber mais, consulte o artigo dedicado a este tema: <a href="/en-US/docs/HTML/Forms/Sending_and_Retrieving_form_data">Envio e recuperação de dados do formulário</a>.</p>
+
+<h2 id="Desenhando_seu_formulário">Desenhando seu formulário</h2>
+
+<p>Antes de começar a codificar, é sempre melhor dar um passo atrás e tomar o tempo para pensar sobre o seu formulário. Desenhando um rascunho rápido irá ajudar a definir o conjunto correto de dados que você quer perguntar ao usuário. De um ponto de vista da experiência do usuário (UX), é importante lembrar que quanto maior o seu formulário, maior o risco de perder os usuários. Mantenha o formuário simples e mantenha o foco: <strong>peça apenas o que é absolutamente necessário</strong>.<br>
+ A criação de formulários é um passo importante quando você está construindo um site ou um aplicativo. Está além do escopo deste artigo  cobrir as formas, mas se você quiser se aprofundar neste tópico você deve ler os seguintes artigos:</p>
+
+<ul>
+ <li>A Smashing Magazine tem <a href="http://uxdesign.smashingmagazine.com/tag/forms/">ótimos artigos sobre UX</a> nos formulários, mas talvez o mais importante é o <a href="https://translate.google.com/translate?sl=en&amp;tl=pt&amp;js=y&amp;prev=_t&amp;hl=pt-BR&amp;ie=UTF-8&amp;u=http%3A%2F%2Fwww.smashingmagazine.com%2Ftag%2Fforms%2F&amp;edit-text=&amp;act=url">Extenso Guia para a usabilidade em formulários Web</a>.</li>
+ <li>UXMatters também é um recurso muito atencioso com bons conselhos de <a href="https://translate.google.com/translate?sl=en&amp;tl=pt&amp;js=y&amp;prev=_t&amp;hl=pt-BR&amp;ie=UTF-8&amp;u=http%3A%2F%2Fwww.uxmatters.com%2Fmt%2Farchives%2F2012%2F05%2F7-basic-best-practices-for-buttons.php&amp;edit-text=&amp;act=url">melhores práticas básicas </a>para conceitos complexos, tais como <a href="https://translate.google.com/translate?hl=pt-BR&amp;sl=en&amp;tl=pt&amp;u=http%3A%2F%2Fwww.uxmatters.com%2Fmt%2Farchives%2F2010%2F03%2Fpagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">formulários de várias páginas </a>.</li>
+</ul>
+
+<p>Neste artigo vamos construir um formulário de contato simples. Vamos fazer um esboço.</p>
+
+<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p>
+
+<p>O nosso formulário terá três campos de texto e um botão. Basicamente, pedimos ao usuário o seu nome, seu e-mail e a mensagem que deseja enviar. Ao apertar o botão apenas irá enviar os dados para o servidor web.</p>
+
+<h2 id="Sujar_as_mãos_com_HTML">Sujar as mãos com HTML</h2>
+
+<p><br>
+ Ok, agora estamos prontos para ir para o código HTML do nosso formulário. Para construir o nosso formulário de contato, vamos utilizar os seguintes elementos {{HTMLElement("form")}} , {{HTMLElement("label")}} , {{HTMLElement("input")}} , {{HTMLElement("textarea")}} , e {{HTMLElement("button")}} .</p>
+
+<h3 id="O_Elemento_HTMLElement(form)">O Elemento {{HTMLElement("form")}} </h3>
+
+<p>Todos formulários HTML começam com um elemento {{HTMLElement("form")}} como este:</p>
+
+<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
+
+&lt;/form&gt;</pre>
+
+<p>Este elemento define um formulário. É um elemento de container como um elemento {{HTMLElement ("div")}} ou {{HTMLElement ("p")}} , mas ele também suporta alguns atributos específicos para configurar a forma como o formulário se comporta. Todos os seus atributos são opcionais, mas é considerada a melhor prática sempre definir pelo menos o atributo <code><em>action </em></code>e o atributo <code><em>method</em></code>.</p>
+
+<ul>
+ <li>O atributo <em><strong>action </strong></em>define o local (uma URL) em que os dados recolhidos do formulário devem ser enviados.</li>
+ <li>O atributo <em><strong>method</strong></em> define qual o método HTTP para enviar os dados (ele pode ser "<strong>GET</strong>" ou "<strong>POST</strong>" (veja as diferenças <a href="http://www.comocriarsites.com/html/como-funciona-os-metodos-get-e-post-diferencas/">aqui</a>).</li>
+</ul>
+
+<p>Se você quiser se aprofundar em como esses atributos funcionam, está detalhado no artigo <a href="/pt-BR/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviando e recebendo dados de um formulário</a></p>
+
+<h3 id="Adicionar_campos_com_os_elementos_HTMLElement(label)_HTMLElement(input)_e_HTMLElement(textarea)">Adicionar campos com os elementos {{HTMLElement("label")}} , {{HTMLElement("input")}} , e {{HTMLElement("textarea")}} </h3>
+
+<p>O nosso formulário de contato é muito simples e contém três campos de texto, cada um com uma etiqueta. O campo de entrada para o nome será um campo básico texto de linha única("input"); o campo de entrada do e-mail será um campo de texto com uma única linha("input") que vai aceitar apenas um endereço de e-mail; o campo de entrada para a mensagem será um campo de texto de várias linhas("textarea").</p>
+
+<p>Em termos de código HTML, teremos algo assim:</p>
+
+<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="nome"&gt;Nome:&lt;/label&gt;
+        &lt;input type="text" id="nome" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="email"&gt;E-mail:&lt;/label&gt;
+        &lt;input type="email" id="email" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Mensagem:&lt;/label&gt;
+        &lt;textarea id="msg"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Os elementos  {{HTMLElement ("div")}} estão lá para estruturar nosso código e deixar a estilização mais fácil (ver abaixo). Observe o uso do atributo <em><strong>for</strong></em> em todos os elementos {{HTMLElement ("label")}} ; é uma maneira para vincular uma <strong><em>label</em></strong> à um campo do formulário. Este atributo faz referência ao <em><strong>id</strong></em> do campo correspondente. Há algum benefício para fazer isso, é a de permitir que o usuário clique no rótulo para ativar o campo correspondente. Se você quer uma melhor compreensão dos outros benefícios deste atributo, tudo é detalhado no artigo: <a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a>(en).</p>
+
+<p>No  elemento {{HTMLElement ("input")}} , o atributo mais importante é o atributo <code><em><strong>type</strong></em></code>. Esse atributo é extremamente importante porque define a forma como o elemento  {{HTMLElement ("input")}} se comporta. Ele pode mudar radicalmente o elemento,  então preste atenção a ele. Se você quiser saber mais sobre isso, leia o artigo <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">native form widgets</a>. Em nosso exemplo, nós usamos somente o  <code><strong>type<em>=</em></strong>"<em><strong>text</strong></em>",</code> valor padrão para este atributo. Ele representa um campo de texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. Nós também usamos o <code><strong>type<em>=</em></strong>"<strong><em>email</em></strong>"</code> que define um campo de texto com uma única linha que só aceita um endereço de e-mail bem-formados. Este último valor torna um campo de texto básico em uma espécie de campo "inteligente", que irá realizar alguns testes com os dados digitados pelo usuário. Se você quiser saber mais sobre a validação de formulário, detalharemos melhor no artigo <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validação de dados de formulário</a>.</p>
+
+<p>Por último, mas não menos importante, observe a sintaxe de <code><strong>&lt;input /&gt;</strong> </code> e <code><strong>&lt;textarea&gt; &lt;/ textarea&gt;</strong>.</code> Esta é uma das esquisitices do HTML. A tag<strong> <code>&lt;input /&gt;</code> </strong>é um elemento que se  auto-fecha, o que significa que se você quiser encerrar formalmente o elemento, você tem que adicionar uma barra "<strong>/</strong>" no final do próprio elemento e não uma tag de fechamento. No entanto, o tipo {{HTMLElement ("textarea")}} não é um elemento de auto-fechamento, então você tem que fechá-lo com a tag final adequada. Isso tem um impacto sobre um recurso específico de formulários HTML: a maneira como você define o valor padrão. Para definir o valor padrão de um elemento {{HTMLElement ("input")}} você tem que usar o atributo <code><em><strong>value</strong></em> </code>como este:</p>
+
+<pre class="brush:html;">&lt;input type="text" value="Por padrão, este elemento será preenchido com este texto " /&gt;</pre>
+
+<p>Pelo contrário, se você deseja definir o valor padrão de um elemento {{HTMLElement ("textarea")}} , você só tem que colocar esse valor padrão no meio das tags, entre tag inicial e a tag final do elemento {{HTMLElement ("textarea")}} , como abaixo:</p>
+
+<pre class="brush:html;">&lt;textarea&gt;Por padrão, este elemento será preenchido com este texto &lt;/textarea&gt;</pre>
+
+<h3 id="E_um_elemento_HTMLElement(button)_para_concluir">E um elemento {{HTMLElement("button")}} para concluir</h3>
+
+<p>O nosso formulário está quase pronto; nós temos apenas que adicionar um botão para permitir que o usuário envie seus dados depois de ter preenchido o formulário. Isto é simplesmente feito usando o elemento {{HTMLElement ("button")}} :</p>
+
+<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="name"&gt;Nome:&lt;/label&gt;
+        &lt;input type="text" id="name" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+        &lt;input type="email" id="mail" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Mensagem:&lt;/label&gt;
+        &lt;textarea id="msg"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+    &lt;div class="button"&gt;
+        &lt;button type="submit"&gt;Enviar sua mensagem&lt;/button&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Um botão pode ser de três tipos: <strong><code>submit</code></strong>, <strong><code>reset</code></strong>, ou <strong><code>button</code></strong>.</p>
+
+<ul>
+ <li>Um clique sobre um botão de <strong><code>submit</code> </strong>envia os dados do formulário para a página de web definida pelo atributo <code><strong>action </strong></code>do elemento {{HTMLElement ("form")}} .</li>
+ <li>Um clique sobre um botão de <strong><code>reset </code></strong>redefine imediatamente todos os campos do formulário para o seu valor padrão. De um ponto de vista na usabilidade do usuário(UX), isso é considerado uma má prática.</li>
+ <li>Um clique em um botão do tipo <code><strong>button</strong></code> faz ...ops, nada! Isso soa bobo, mas é incrivelmente útil para construir botões personalizados com JavaScript, ou seja, ele pode assumir qualquer comportamento através desta linguagem.</li>
+</ul>
+
+<p>Note que você também pode usar o elemento  {{HTMLElement ("input")}} com o tipo correspondente para produzir um botão. A principal diferença com o elemento {{HTMLElement ("button")}} é que o elemento {{HTMLElement ("input")}} permite apenas texto sem formatação como seu valor, enquanto que o elemento  {{HTMLElement ("button")}} permite que o conteúdo HTML completo como seu valor.</p>
+
+<h2 id="Vamos_deixar_um_pouco_mais_legal_com_CSS">Vamos deixar um pouco mais legal com CSS</h2>
+
+<p>Agora que temos o nosso formulário HTML, se você olhar para ele em seu navegador favorito, você vai ver que ele parece meio feio.</p>
+
+<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p>
+
+<p>Vamos deixar ele um pouco mais legal com os códigos CSS a seguir:</p>
+
+<p>Vamos começar com o próprio formulário; vamos centralizá-lo e torná-lo visível com uma borda:</p>
+
+<pre class="brush:css;">form {
+    /* Apenas para centralizar o form na página */
+    margin: 0 auto;
+    width: 400px;
+    /* Para ver as bordas do formulário */
+    padding: 1em;
+    border: 1px solid #CCC;
+    border-radius: 1em;
+}</pre>
+
+<p>Então, adicionaremos algum espaço entre cada conjunto de campos do form:</p>
+
+<pre class="brush:css;">form div + div {
+    margin-top: 1em;
+}</pre>
+
+<p>Agora vamos focar nas <strong><code><em>labels</em></code></strong>. Para fazer o nosso formulário mais legível, é considerada a melhor prática ter todas as etiquetas do mesmo tamanho e alinhadas do mesmo lado. Nesse caso, vamos alinhá-los para a direita, mas em alguns casos, o alinhamento à esquerda pode ficar bem também.</p>
+
+<pre class="brush:css;">label {
+    /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+}</pre>
+
+<p>Uma das coisas mais difíceis de fazer em formulários HTML são os estilo dos próprios  campos. Os campos de texto são fáceis de estilizar, mas alguns outros campos não são. Se você quiser saber mais sobre  estilização de formulários HTML, leia o artigo <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a>.</p>
+
+<p>Aqui vamos usar alguns truques comuns: fontes de harmonização, tamanho e bordas:</p>
+
+<pre class="brush:css;">input, textarea {
+    /* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace*/
+    font: 1em sans-serif;
+
+    /* Para dar o mesmo tamanho a todos os campo de texto */
+    width: 300px;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    /* Para harmonizar o look &amp; feel das bordas nos campos de texto*/
+    border: 1px solid #999;
+}</pre>
+
+<p>Formulários HTML suportam muitas pseudo-classes para descrever os estados de cada elemento. Como exemplo, vamos adicionar um pouco de destaque quando um campo está ativo. É uma maneira conveniente para ajudar a manter o controle do usuário de onde eles está no formulário.</p>
+
+<pre class="brush:css;">input:focus, textarea:focus {
+    /* Dar um pouco de destaque nos elementos ativos */
+    border-color: #000;
+}</pre>
+
+<p>Campos de texto de várias linhas precisam de alguns estilos personalizados sozinhos. Por padrão, um elemento  {{HTMLElement ("textarea")}} é um bloco em linha com sua parte inferior alinhada à linha de base do texto. Na maioria das vezes, não é baseline o que queremos. Nesse caso, a fim de alinhar a <code><em>label </em></code>e o campo, temos que alterar a propriedade  <em>vertical-align</em> do {{HTMLElement ("textarea")}} para <em>top</em>.</p>
+
+<p>Observe também o uso da propriedade de <em>resize</em>, que é uma forma de permitir que os usuários redimensionar um elemento {{HTMLElement ("textarea")}}.</p>
+
+<pre class="brush:css;">textarea {
+    /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/
+    vertical-align: top;
+
+    /* Para dar espaço suficiente para digitar algum texto */
+    height: 5em;
+
+    /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers */
+    resize: vertical;
+}</pre>
+
+<p>Muitas vezes, os botões precisam de estilos especiais também. Para esse fim, nós o colocamos dentro de uma {{HTMLElement ("div")}} com uma classe css <em><code>button</code></em>. Aqui, queremos que o botão esteja alinhado com os outros campos . Para conseguir isso, temos de imitar a presença de uma {{HTMLElement ("label")}}. Isso é feito utilizando <code><em><strong>padding </strong></em></code>e <code><em><strong>margin</strong></em></code>.</p>
+
+<pre class="brush:css;">.button {
+    /* Para posicionar os botões para a mesma posição dos campos de texto */
+    padding-left: 90px; /* mesmo tamanho que os elementos do tipo label */
+}
+button {
+    /* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto*/
+    margin-left: .5em;
+}</pre>
+
+<p>Agora o nosso formulário parece muito mais bonito.</p>
+
+<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Enviar_os_dados_para_seu_servidor_web">Enviar os dados para seu servidor web</h2>
+
+<p>A última parte, e talvez a mais complicado, é lidar com dados de formulário no lado do servidor. Como dissemos antes, na maioria das vezes, um formulário HTML é uma forma conveniente para perguntar ao usuário os dados e enviá-lo para um servidor web.</p>
+
+<p>O elemento {{HTMLElement("form")}} definirá onde e como enviar os dados, graças ao atribudo <em><strong>action</strong></em> e ao atributo <em><strong>method</strong></em></p>
+
+<p>Mas não é o suficiente. Nós também precisamos dar um nome a nossos dados. Esses nomes são importantes em ambos os lados; no lado do navegador, ele informa ao navegador que nome dar a cada pedaço de dados, e no lado do servidor, ele permite que o servidor lidar com cada pedaço de dados pelo nome.</p>
+
+<p>Então, para nomear seus dados, você precisará usar o atributo <em><strong><code>name </code></strong></em>em cada campo do formulário que irá recolher uma parte específica dos dados:</p>
+
+<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="nome"&gt;Nome:&lt;/label&gt;
+        &lt;input type="text" id="nome" name="usuario_nome" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="email"&gt;E-mail:&lt;/label&gt;
+        &lt;input type="email" id="email" name="usuario_email" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Mensagem:&lt;/label&gt;
+        &lt;textarea id="msg" name="usuario_msg"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+    &lt;div class="button"&gt;
+        &lt;button type="submit"&gt;Enviar sua mensagem&lt;/button&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Em nosso exemplo, o formulário irá enviar 3 informações, chamados "usuario_nome", "usuario_email" e "usuario_msg" e os dados serão enviados para a URL "<em><strong>/pagina-processa-dados-do-form</strong></em>" com o método HTTP:  <strong>POST </strong>.</p>
+
+<p>No lado do servidor, o script na URL "<em><strong>/pagina-processa-dados-do-form</strong></em>" receberá os dados como uma lista de itens 3 de chave/valor contidos na solicitação HTTP. A forma como o script  vai lidar com esses dados fica a seu critério. Cada linguagem server-side (PHP, Python, Ruby, Java, C #, etc.) tem seu próprio mecanismo. Está além do escopo deste guia aprofundar o assunto, mas se você quiser saber mais, vamos dar alguns exemplos no artigo <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando e recuperando dados de formulário</span></a>.</p>
+
+<p> </p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Parabéns! Você construiu seu primeira formulário HTML. Aqui está um exemplo do resultado final.</p>
+
+<table style="height: 267px; width: 772px;">
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<p>Agora é hora de dar uma olhada mais profunda. Formulários HTML são muito mais poderoso do que o que nós vimos aqui <a href="/pt-BR/docs/Web/Guide/HTML/Forms">e os outros artigos deste guia</a> irá ajudá-lo a dominar o resto.</p>
diff --git a/files/pt-br/learn/front-end_web_developer/index.html b/files/pt-br/learn/front-end_web_developer/index.html
new file mode 100644
index 0000000000..67a73497ef
--- /dev/null
+++ b/files/pt-br/learn/front-end_web_developer/index.html
@@ -0,0 +1,231 @@
+---
+title: Desenvolvedor Web Front-end
+slug: Aprender/Front-end_web_developer
+tags:
+  - Aprender
+  - CSS
+  - Ferramentas
+  - Front-end
+  - HTML
+  - Iniciantes
+  - JavaScript
+  - Padrões Web
+translation_of: Learn/Front-end_web_developer
+---
+<p>{{learnsidebar}}</p>
+
+<p>Boas vindas a nossa trilha de estudos para front-end web developer.</p>
+
+<p>Aqui nós provemos um curso estruturado que irá lhe ensinar tudo o que você precisa para se tornar um desenvolvedor web front-end. Simplesmente trabalhe em cada sessão, aprendendo novas habilidades (ou melhorando as existentes) à medida que avança. Durante cada sessão, você encontrará exercícios e avaliações para testar sua compreensão antes de avançar.</p>
+
+<h2 id="Temas_cobertos">Temas cobertos</h2>
+
+<p>Os temas gerais abordados são:</p>
+
+<ul>
+ <li>Configuração básica e aprender como aprender</li>
+ <li>Padrões Web e melhores práticas (como acessibilidade e compatibilidade cross-browser)</li>
+ <li>HTML, a linguagem que fornece significado e estrutura ao conteúdo web</li>
+ <li>CSS, a linguagem usada para estilizar as páginas web</li>
+ <li>JavaScript, a linguagem de scripts usada para criar funcionalidades dinâmicas na web</li>
+ <li>Ferramentas usadas para facilitar o desenvolvimento client-side moderno.</li>
+</ul>
+
+<p>As diferentes sessões são desenhadas para trabalhar em ordem, mas cada uma também é independente. Se, por exemplo, você já souber HTML, pode avançar rapidamente para a sessão de CSS.</p>
+
+<h2 id="Pré-requisitos"><strong>Pré</strong>-<strong>requisitos</strong></h2>
+
+<p>Você não precisa de nenhum conhecimento prévio para começar este curso. Tudo o que você precisa é um computador executando um navegador web moderno, uma conexão com internet, e vontade de aprender.</p>
+
+<p>Se você não tem certeza se o desenvolvimento front-end é para você, e/ou se deseja uma introdução mais suave antes de começar um curso mais completo, você pode conferir primeiro nossa <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web">Introdução à web</a>.</p>
+
+<h2 id="Conseguindo_ajuda">Conseguindo ajuda</h2>
+
+<p>Nós tentamos deixar os estudos de desenvolvimento web front-end o mais confortável possível, entretanto, você provavelmente chegará em algum ponto em que irá travar por não entender alguma coisa, ou algum código pode não funcionar como deveria.</p>
+
+<p><span>Não entre em pânico. Às vezes, todas as pessoas ficam presas, sejamos iniciantes ou profissionais em desenvolvimento web. O artigo Aprendendo a Aprender (à ser adicionado) irá te prover uma série de dicas e sugestões sobre como procurar informações e se ajudar. E se você continuar travando, sinta-se à vontade para postar uma dúvida em nosso <a href="https://discourse.mozilla.org/c/mdn/learn/">fórum no Discourse</a>.</span></p>
+
+<p><span>Vamos começar. Boa sorte!</span></p>
+
+<h2 id="A_trilha_de_estudos">A trilha de estudos</h2>
+
+<h3 id="Começando">Começando</h3>
+
+<p>Tempo para completar: 1–2 horas</p>
+
+<h4 id="Pré-requisitos_2">Pré-requisitos</h4>
+
+<p>Nada, exceto conhecimentos básicos de informática.</p>
+
+<h4 id="Como_saberei_se_posso_seguir_em_frente">Como saberei se posso seguir em frente?</h4>
+
+<p>Não há avaliações nesta parte do curso. Certifique-se de não ignorá-lo — é importante para te preparar para enfrentar os exercícios mais tarde.</p>
+
+<h4 id="Guias_principais">Guias principais</h4>
+
+<ul>
+ <li><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a> — configuração básica das ferramentas (15 min de leitura)</li>
+ <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Introdução à Web e aos Padrões Web</a> (45 min de leitura)</li>
+ <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Aprendendo a buscar ajuda</a> (45 min de leitura)</li>
+</ul>
+
+<h3 id="Semântica_e_estrutura_HTML">Semântica e estrutura HTML</h3>
+
+<p>Tempo para completar: 35–50 horas</p>
+
+<h4 id="Pré-requisitos_3">Pré-requisitos</h4>
+
+<p>Nada, exceto conhecimentos básicos de informática e o ambiente de desenvolvimento web básico.</p>
+
+<h4 id="Como_saberei_se_posso_seguir_em_frente_2">Como saberei se posso seguir em frente?</h4>
+
+<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
+
+<h4 id="Guias_principais_2">Guias principais</h4>
+
+<ul>
+</ul>
+
+<ul>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a> (15–20 horas de leitura/exercícios)</li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Multimedia_and_embedding">Multimídia e Incorporação</a> (15–20 horas de leitura/exercícios)</li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Tables">Tabelas em HTML</a> (5–10 horas de leitura/exercícios)</li>
+</ul>
+
+<h3 id="Estilizando_e_layout_com_CSS">Estilizando e layout com CSS</h3>
+
+<p>Tempo para completar: 90–120 horas</p>
+
+<h4 id="Pré-requisitos_4">Pré-requisitos</h4>
+
+<p>É recomendável que você possua o conhecimento básico de HTML antes de começar aprender CSS. Você pode estudar nossa <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a> primeiro.</p>
+
+<h4 id="Como_saberei_se_posso_seguir_em_frente_3">Como saberei se posso seguir em frente?</h4>
+
+<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
+
+<h4 id="Guias_principais_3">Guias principais</h4>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<ul>
+ <li><a href="/pt-BR/docs/Learn/CSS/First_steps">Primeiros passos com CSS</a> (10–15 horas de leitura/exercícios)</li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks">Blocos de construção CSS</a> (35–45 horas de leitura/exercícios)</li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text">Estilizando Texto</a><a href="/pt-BR/docs/Aprender/CSS/Estilizando_texto">stilizando Texto</a> (15–20 horas de leitura/exercícios)</li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout </a><a href="/pt-BR/docs/Learn/CSS/CSS_layout"> </a>(30–40 horas de leitura/exercícios)</li>
+</ul>
+
+<h4 id="Conteúdo_adicional">Conteúdo adicional</h4>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li>
+</ul>
+
+<h3 id="Interatividade_com_JavaScript">Interatividade com JavaScript</h3>
+
+<p>Tempo para completar: 135–185 horas</p>
+
+<h4 id="Pré-requisitos_5">Pré-requisitos</h4>
+
+<p>É recomendável que você possua o conhecimento básico de HTML antes de começar aprender JavaScript. Você pode estudar nossa <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a> primeiro.</p>
+
+<h4 id="Como_saberei_se_posso_seguir_em_frente_4">Como saberei se posso seguir em frente?</h4>
+
+<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
+
+<h4 id="Guias_principais_4">Guias principais</h4>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<ul>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos com JavaScript</a> (30–40 horas de leitura/exercícios)</li>
+ <li><a href="/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Elementos construtivos do Javascript</a> (25–35 horas de leitura/exercícioss)</li>
+ <li><a href="/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs">APIs web do lado cliente</a> (30–40 horas de leitura/exercícios)</li>
+ <li><a href="/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em Javascript</a> (25–35 horas de leitura/exercícios)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">JavaScript Assíncrono</a> (25–35 horas de leitura/exercícios)</li>
+</ul>
+
+<h3 id="Formulários_Web_—_Trabalhando_com_dados_de_usuário">Formulários Web — Trabalhando com dados de usuário</h3>
+
+<p>Tempo para completar: 40–50 horas</p>
+
+<h4 id="Pré-requisitos_6">Pré-requisitos</h4>
+
+<p>Formulários demandam conhecimento em HTML, CSS e JavaScript para o seu bom uso. Eles são complexos e, portanto, recebem tratamento separado.</p>
+
+<h4 id="Como_saberei_se_posso_seguir_em_frente_5">Como saberei se posso seguir em frente?</h4>
+
+<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
+
+<h4 id="Guias_principais_5">Guias principais</h4>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Forms">Formulários da Web - Trabalhando com dados do usuário</a> (40–50 horas)</li>
+</ul>
+
+<h3 id="Fazendo_uma_web_para_todas_as_pessoas">Fazendo uma web para todas as pessoas</h3>
+
+<p>Tempo para completar: 60–75 horas</p>
+
+<h4 id="Pré-requisitos_7">Pré-requisitos</h4>
+
+<p>É uma boa ideia que você saiba HTML, CSS e JavaScript antes de ler esta sessão — muitas das técnicas e melhores práticas contidas aqui utilizam várias tecnologias.</p>
+
+<h4 id="Como_saberei_se_posso_seguir_em_frente_6">Como saberei se posso seguir em frente?</h4>
+
+<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
+
+<h4 id="Guias_principais_6">Guias principais</h4>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<ul>
+ <li><a href="/pt-BR/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross Browser Teste</a> (25–30 horas de leitura/exercícioss)</li>
+ <li><a href="/pt-BR/docs/Web/Acessibilidade">Acessibilidade</a> (20–25 horas de leitura/exercícios)</li>
+</ul>
+
+<h3 id="Ferramentas_modernas">Ferramentas modernas</h3>
+
+<p>Tempo para completar: 55–90 horas</p>
+
+<h4 id="Pré-requisitos_8">Pré-requisitos</h4>
+
+<p>É uma boa ideia que você saiba HTML, CSS e JavaScript antes de ler esta sessão, as ferramentas citadas aqui utilizam várias dessas tecnologias.</p>
+
+<h4 id="Como_saberei_se_posso_seguir_em_frente_7">Como saberei se posso seguir em frente?</h4>
+
+<p>Não temos avaliações específicas neste conjunto de módulos, mas os tutoriais de estudo de caso no final dos 2º e 3º módulos irão te preparar bem para compreender os elementos essenciais das ferramentas modernas.</p>
+
+<h4 id="Guias_principais_7">Guias principais</h4>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a> (5 hour read)</li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> (20–25 horas de leitura)</li>
+ <li>
+  <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> (30-60 horas de leitura/exercícios)</p>
+ </li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..34d0eb95ad
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,290 @@
+---
+title: CSS básico
+slug: Aprender/Getting_started_with_the_web/CSS_basico
+tags:
+  - Aprender
+  - CSS
+  - Codificação de Scripts
+  - Estilo
+  - Iniciante
+  - Web
+  - 'l10n:prioridade'
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à sua página Web. <em>CSS básico</em> apresenta tudo que você precisa para começar. Responderemos a perguntas do tipo: Como mudo meu texto para preto ou vermelho? Como faço para que meu conteúdo apareça em determinados lugares na tela? Como decoro minha página com imagens e cores de fundo?</p>
+</div>
+
+<h2 id="Então_o_que_realmente_é_CSS">Então, o que realmente é CSS?</h2>
+
+<p>Assim como o HTML, o CSS não é realmente uma linguagem de programação. Também não é uma linguagem de marcação  — é uma <em>linguagem de folhas de estilos</em>. Isso significa que o CSS permite aplicar estilos seletivamente a elementos em documentos HTML. Por exemplo, para selecionar <strong>todos</strong> os elementos parágrafo de uma página HTML e tornar o texto dentro deles vermelho, você escreveria este CSS:</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Vamos tentar: cole as três linhas de CSS acima em um novo arquivo, no seu editor de texto, e salve o arquivo como <code>estilo.css</code> na sua pasta <code>estilos</code>.</p>
+
+<p>Ainda assim, precisamos aplicar o CSS ao seu documento HTML. Do contrário, o estilo CSS não irá afetar a maneira como o seu navegador mostra seu documento HTML (se você não estiver acompanhando o nosso projeto, leia <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a> para descobrir o que você precisa fazer primeiro).</p>
+
+<ol>
+ <li>Abra seu arquivo <code>index.html</code> e cole o seguinte código em algum lugar no cabeçalho, ou seja, entre as tags {{HTMLElement("head")}} e <code>&lt;/head&gt;</code>:
+
+  <pre class="brush: html">&lt;link href="estilos/estilo.css" rel="stylesheet"&gt;</pre>
+ </li>
+ <li>Salve o arquivo <code>index.html</code> e abra ele no seu navegador. Você deve ver uma página como essa:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Se o texto do seu parágrafo estiver vermelho, parabéns! Você acabou de escrever seu primeiro CSS de sucesso.</p>
+
+<h3 id="Anatomia_de_um_conjunto_de_regras_CSS">Anatomia de um conjunto de regras CSS</h3>
+
+<p>Vamos dar uma olhada no CSS acima com mais detalhes:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Toda essa estrutura é chamada de <strong>conjunto de regras </strong>(mas geralmente usamos o termo "regra", por ser mais curto). Note os nomes das partes individuais:</p>
+
+<dl>
+ <dt>Seletor (Selector)</dt>
+ <dd>O nome do elemento HTML no começo do conjunto de regras. Ele seleciona o(s) elemento(s) a serem estilizados (nesse caso, elementos {{HTMLElement("p")}}). Para dar estilo a um outro elemento, é só mudar o seletor.</dd>
+ <dt>Declaração (Declaration)</dt>
+ <dd>Uma regra simples como <code>color: red;</code> especificando quais das <strong>propriedades</strong> do elemento você quer estilizar.</dd>
+ <dt>Propriedades (Property)</dt>
+ <dd>Forma pela qual você estiliza um elemento HTML. (Nesse caso, <code>color</code> é uma propriedade dos elementos {{HTMLElement("p")}}.) Em CSS, você escolhe quais propriedades você deseja afetar com sua regra.</dd>
+ <dt>Valor da propriedade (Property value)</dt>
+ <dd>À direita da propriedade, depois dos dois pontos, nós temos o <strong>valor de propriedade</strong>, que escolhe uma dentre muitas aparências possíveis para uma determinada propriedade (há muitos valores <code>color(cor)</code> além do <code>red(vermelho)</code>).</dd>
+</dl>
+
+<p>Note outras partes importantes da sintaxe:</p>
+
+<ul>
+ <li>Cada linha de comando deve ser envolvida em chaves (<code>{}</code>).</li>
+ <li>Dentro de cada declaração, você deve usar dois pontos (<code>:</code>) para separar a propriedade de seus valores.</li>
+ <li>Dentro de cada conjunto de regras, você deve usar um ponto e vírgula (<code>;</code>) para separar cada declaração da próxima.</li>
+</ul>
+
+<p>Então para modificar múltiplos valores de propriedades de uma vez, você deve escrevê-los separados por ponto e vírgula, desse modo:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Selecionando_múltiplos_elementos">Selecionando múltiplos elementos</h3>
+
+<p>Você também pode selecionar vários tipos de elementos e aplicar um único conjunto de regras a todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo:</p>
+
+<pre class="brush: css">p, li, h1 {
+  color: red;
+}</pre>
+
+<h3 id="Diferentes_tipos_de_seletores">Diferentes tipos de seletores</h3>
+
+<p>Há muitos tipos diferentes de seletores. Abaixo, nós mostramos apenas os <strong>seletores de elementos</strong>, que selecionam todos os elementos de um determinado tipo nos documentos HTML. Mas nós podemos fazer seleções mais específicas que essas. Aqui estão alguns dos tipos mais comuns de seletores:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nome do seletor</th>
+   <th scope="col">O que ele seleciona</th>
+   <th scope="col">Exemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Seletor de elemento (às vezes, chamado tag ou seletor de tipo)</td>
+   <td>Todos os elementos HTML de determinado tipo.</td>
+   <td><code>p</code><br>
+    Seleciona <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de ID</td>
+   <td>O elemento na página com o ID específicado. Em uma determinada página HTML, é uma boa prática usar um elemento por ID (e claro, um ID por elemento) mesmo que seja permitido usar o mesmo ID para vários elementos.</td>
+   <td><code>#my-id</code><br>
+    Seleciona <code>&lt;p id="my-id"&gt;</code> ou <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de classe</td>
+   <td>O(s) elemento(s) na página com a classe específicada (várias instâncias de classe podem aparecer em uma página).</td>
+   <td><code>.my-class</code><br>
+    Seleciona <code>&lt;p class="my-class"&gt;</code> e <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de atributo</td>
+   <td>O(s) elemento(s) na página com o atributo especificado.</td>
+   <td><code>img[src]</code><br>
+    Seleciona <code>&lt;img src="myimage.png"&gt;</code> mas não <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de pseudo-classe</td>
+   <td>O(s) elemento(s) específicado(s), mas somente quando estiver no estado especificado. Ex.: com o mouse sobre ele.</td>
+   <td><code>a:hover</code><br>
+    Seleciona <code>&lt;a&gt;</code>, mas somente quando o mouse está em cima do link.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Há muito mais seletores para explorar e você pode achar uma lista mais detalhada em nosso <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS/Introduction_to_CSS/Seletores">Guia de seletores</a>.</p>
+
+<h2 id="Fontes_e_texto">Fontes e texto</h2>
+
+<p>Agora que exploramos algumas noções básicas de CSS, vamos começar a adicionar mais regras e informações no nosso arquivo <code>estilo.css</code> para deixar nosso exemplo bonito. Vamos começar fazendo nossas fontes e textos parecerem um pouco melhores.</p>
+
+<ol>
+ <li>Primeiro de tudo, volte e encontre a <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer#Fonte">fonte do Google Fonts</a> que você armazenou em algum lugar seguro. Adicione o elemento {{htmlelement ("link")}} em algum lugar dentro do cabeçalho no <code>index.html</code> (novamente, em qualquer lugar entre as tags {{HTMLElement ("head")}} e <code>&lt;/ head&gt;</code>). Será algo parecido com isto:
+
+  <pre class="brush: html">&lt;link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;</pre>
+  Esse código vincula sua página a uma folha de estilo que baixa a família de fontes Open Sans junto com sua página web e permite que você a defina em seus elementos HTML usando sua própria folha de estilos.</li>
+ <li>Em seguida, exclua a regra existente no seu arquivo <code>estilo.css</code>. Foi um bom teste, mas o texto vermelho não parece muito bom.</li>
+ <li>Adicione as seguintes linhas em seu lugar, substituindo a linha do espaço reservado pela linha <code>font-family</code> que você obteve do Google Fonts. (<code>font-family</code> significa apenas a(s) fonte(s) que você deseja usar para o seu texto.) Esta regra primeiro define uma fonte base global e o tamanho da fonte para a página inteira (já que {{HTMLElement ("html")}} é o elemento pai de toda a página, e todos os elementos dentro dele herdam o mesmo <code>font-size</code> e <code>font-family</code>):
+  <pre class="brush: css">html {font-size: 10px; /* px significa "pixels": o tamanho da fonte base é agora de 10 pixels */
+  font-family: "Open Sans", sans-serif; /* este deve ser o nome da fonte que você obteve no Google Fonts */
+}</pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: Qualquer coisa em um documento CSS entre <code>/*</code> e <code>*/</code> é um <strong>comentário CSS</strong>, que o navegador ignora quando renderiza o código. Este é um lugar para você escrever notas úteis sobre o que você está fazendo.</p>
+  </div>
+ </li>
+ <li>Agora definiremos tamanhos de fonte para elementos que contêm texto dentro do corpo HTML ({{htmlelement ("h1")}}, {{htmlelement ("li")}} e {{htmlelement ("p")}}). Também centralizaremos o texto do nosso cabeçalho e definiremos a altura da linha e o espaçamento das letras no conteúdo do corpo para torná-lo um pouco mais legível:
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Você pode ajustar esses valores de <code>px</code> para o que você desejar, para deixar seu design com a aparência que quiser, mas no geral seu design deve parecer com isso:<img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 728px; margin: 0px auto; width: 672px;"></p>
+
+<h2 id="Caixas_caixas_é_tudo_sobre_caixas">Caixas, caixas, é tudo sobre caixas</h2>
+
+<p>Uma coisa que você notará sobre escrever CSS é que muito disso é sobre caixas — indicar seu tamanho, cor, posição, etc. Muitos dos elementos HTML da sua página podem ser pensados como caixas umas em cima das outras.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Como esperado, o layout CSS é baseado principalmente no <em>modelo de caixas</em>. Cada um dos blocks que ocupam espaço na sua página tem propriedades como essas:</p>
+
+<ul>
+ <li><code>padding</code>, o espaço ao redor do conteúdo (ex.: ao redor do texto de um parágrafo).</li>
+ <li><code>border</code>, a linha sólida do lado de fora do padding.</li>
+ <li><code>margin</code>, o espaço externo a um elemento.</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>Nessa seção nós também vamos usar:</p>
+
+<ul>
+ <li><code>width</code> (largura de um elemento).</li>
+ <li><code>background-color</code>, a cor atrás do conteúdo de um elemento e do padding.</li>
+ <li><code>color</code>, a cor do conteúdo de um elemento (geralmente texto).</li>
+ <li><code>text-shadow</code>: cria uma sombra no texto dentro de um elemento.</li>
+ <li><code>display</code>: define a maneira de dispor um elemento (não se preocupe com isso ainda).</li>
+</ul>
+
+<p>Então, vamos começar e adicionar mais CSS à nossa página! Continue adicionando essas novas regras à parte inferior da página e não tenha medo de experimentar alterações nos valores para ver o que aparece.</p>
+
+<h3 id="Mudando_a_cor_da_página">Mudando a cor da página</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Essa regra define uma cor de fundo para toda a página. Mude a cor acima para a cor <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer#Cor_do_tema">que você escolheu ao planejar seu site.</a></p>
+
+<h3 id="Separando_o_corpo">Separando o corpo</h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Agora para o elemento {{htmlelement ("body")}}. Há algumas declarações aqui, então vamos passar por elas uma a uma:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — Isso força o corpo a ter 600 pixels de largura.</li>
+ <li><code>margin: 0 auto;</code> — Quando você define dois valores em uma propriedade como <code>margin</code> ou <code>padding</code>, o primeiro valor afeta a parte superior do elemento <strong>e</strong> a parte inferior (tornando-os <code>0</code> nesse caso), e no segundo valor os lados esquerdo <strong>e</strong> direito (aqui, <code>auto</code> é um valor especial que divide o espaço horizontal uniformemente entre esquerda e direita). Você também pode utilizar um, três ou quatro valores, como documentado <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/margin#Sintaxe">aqui</a>.</li>
+ <li><code>background-color: #FF9500;</code> — como antes, isso define a cor de fundo do elemento. Usamos um tipo de laranja avermelhado no corpo, para opor ao azul escuro no elemento {{htmlelement ("html")}}, mas fique à vontade para ir em frente e experimentar.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — temos quatro valores definidos no padding, para criar um pouco de espaço em torno do nosso conteúdo. Dessa vez, estamos definindo sem padding na parte superior do corpo, e 20 pixels no lado esquerdo, na parte inferior e no lado direito. Os valores definem a parte superior, o lado direito, a parte inferior e o lado esquerdo, nessa ordem. Como com a <code>margin</code>, você também pode usar um, dois, ou três valores, conforme documentado na <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/padding#Sintaxe">sintaxe do padding</a>.</li>
+ <li><code>border: 5px solid black;</code> — isso simplesmente define uma borda preta sólida de 5 pixels de largura em todos os lados do corpo.</li>
+</ul>
+
+<h3 id="Posicionando_e_estilizando_o_título_da_nossa_página_principal">Posicionando e estilizando o título da nossa página principal</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Você deve ter notado que há um espaço horrível no topo do corpo. Isso acontece porque os browsers aplicam algumas <strong>estilizações padrão</strong> ao {{htmlelement("h1")}} (entre outros), mesmo quando você não aplicou nenhum CSS! Isso pode soar como uma má ideia, mas queremos ter uma legibilidade básica, mesmo em uma página sem estilos. Para nos livrarmos desse espaço, sobrescrevemos o estilo padrão, definindo <code>margin: 0;</code>.</p>
+
+<p>Em seguida, definimos o padding das partes superior e inferior do cabeçalho para 20 pixels e fizemos o texto do cabeçalho da mesma cor que a cor de fundo do HTML.</p>
+
+<p>Uma propriedade bastante interessante que usaremos aqui é o <code>text-shadow</code>, que aplica uma sombra ao conteúdo de texto do elemento. Seus quatro valores são os seguintes:</p>
+
+<ul>
+ <li>O primeiro valor em pixel define o <strong>deslocamento horizontal </strong>da sombra do texto — até onde ele se move: um valor negativo deve movê-la para a esquerda.</li>
+ <li>O segundo valor em pixel define o <strong>deslocamento vertical</strong> da sombra do texto — o quanto ela se move para baixo, neste exemplo; um valor negativo deve movê-la para cima.</li>
+ <li>O terceiro valor em pixel define o <strong>raio de desfoque</strong> da sombra — um valor maior significará uma sombra mais borrada.</li>
+ <li>O quarto valor define a cor base da sombra.</li>
+</ul>
+
+<p>De novo, tente experimentar com diferentes valores para ver o que você pode criar!</p>
+
+<h3 id="Centralizando_a_imagem">Centralizando a imagem</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Finalmente, centralizaremos a imagem para melhorar a aparência. Nós poderiamos usar novamente o truque <code>margin: 0 auto</code> que aprendemos anteriormente para o corpo, mas também precisamos fazer outra coisa. O elemento {{htmlelement ("body")}} é <strong>em nível de bloco</strong>, o que significa que ocupa espaço na página e pode ter margens e outros valores de espaçamento aplicados a ele. Imagens, por outro lado, são elementos<strong> em linha</strong>, o que significa que não podem ter margens. Então, para aplicar margens a uma imagem, temos que dar o comportamento de nível de bloco a imagem usando <code>display: block;</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: As instruções acima assumem que você está usando uma imagem menor que a largura definida no corpo (600 pixels). Se sua imagem for maior, ela irá transbordar o corpo e vazar para o restante da página. Para corrigir isso, você pode 1) reduzir a largura da imagem usando um <a href="https://en.wikipedia.org/wiki/Raster_graphics_editor">editor gráfico</a> (em inglês) ou 2) dimensionar a imagem usando CSS definindo a propriedade {{cssxref ("width")}} no elemento <code>&lt;img&gt;</code> com um valor menor (por exemplo, <code>400 px;</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Não se preocupe se você ainda não entender <code>display: block;</code> ou a distinção entre em nível de bloco / em linha. Você entenderá ao estudar CSS com mais profundidade. Você pode descobrir mais sobre os diferentes valores de exibição disponíveis em nossa <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/display">página de referência sobre display</a>.</p>
+</div>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Se você seguiu todas as instruções desse artigo, você deve terminar com uma página parecida com essa (você também pode <a href="http://mdn.github.io/beginner-html-site-styled/">ver nossa versão aqui</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Se você emperrar, sempre poderá comparar seu trabalho com nosso código de <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">exemplo finalizado no Github</a>.</p>
+
+<p>Aqui, nós só arranhamos na superfície do CSS. Para descobrir mais, vá ao nosso <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS">tópico de aprendizado CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..a2d477a698
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,115 @@
+---
+title: Lidando com arquivos
+slug: Aprender/Getting_started_with_the_web/lidando_com_arquivos
+tags:
+  - Arquivos
+  - Codificação de Scripts
+  - Guía
+  - HTML
+  - Iniciante
+  - Site
+  - 'l10:prioridade'
+  - teoria
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Um site consiste de muitos arquivos: conteúdo em texto, código, folhas de estilo, conteúdo em mídia e por aí vai. Ao criar um site, você precisa reunir esses arquivos em uma certa estrutura no computador local, certificar-se de que eles possam se comunicar e obter todo o conteúdo antes de <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">enviá-los para o servidor</a>. <em>Lidando com Arquivos</em> discute algumas questões às quais você deve estar ciente para que você possa configurar uma estrutura de arquivos para o seu site.</p>
+</div>
+
+<h2 id="Onde_seu_site_deve_residir_no_seu_computador">Onde seu site deve residir no seu computador?</h2>
+
+<p>Quando você está trabalhando em um site localmente no seu próprio computador, você deve manter todos os arquivos relacionados em uma mesma pasta que reflete a estrutura dos arquivos do site publicado em um servidor. Essa pasta pode estar em qualquer lugar que você quiser, mas você deve colocá-la em algum lugar de fácil acesso, talvez no Desktop, na sua pasta Home, ou na raiz do seu HD.</p>
+
+<ol>
+ <li>Escolha um lugar para guardar seus projetos de site. Aqui, crie uma nova pasta chamada <code>projetos-web</code> (ou algo do tipo). Essa é a pasta onde todos seus projetos de site estarão.</li>
+ <li>Dentro dessa pasta, crie outra pasta para guardar seu primeiro site. Chame ela de <code>site-teste</code> (ou algo mais criativo).</li>
+</ol>
+
+<h2 id="Deixando_de_lado_as_maiúsculas_e_espaços">Deixando de lado as maiúsculas e espaços</h2>
+
+<p>Você vai perceber no decorrer desse artigo que nós pedimos para que você nomeie pastas e arquivos completamente em letras minúsculas e sem espaços. Isso acontece porque:</p>
+
+<ol>
+ <li>Muitos computadores, particularmente servidores web, são case-sensitive. Então, por exemplo, se você colocar uma imagem no seu site em <code><span style="font-family: consolas,monaco,andale mono,monospace;">site-teste</span>/MyImage.jpg</code>, e então em um outro arquivo você tentar chamar <code><span style="font-family: consolas,monaco,andale mono,monospace;">site-teste</span>/myimage.jpg</code>, não vai funcionar.</li>
+ <li>Navegadores, servidores web e linguagens de programação não lidam bem com espaços. Por exemplo, se você usa espaços no nome do seu arquivo, alguns sistemas vão tratar o nome do arquivo como dois nomes. Alguns servidores vão substituir os espaços no nome do arquivo por "%20" (o código para espaço em URLs), quebrando seus links. É melhor separar palavras com traços, em vez de sublinhado: <code> meu-arquivo.html</code> vs. <code>meu_arquivo.html</code>.</li>
+</ol>
+
+<p>A resposta curta é que você deve usar um hífen para os nomes dos arquivos. O mecanismo de pesquisa do Google trata um hífen como separador de palavras, mas não considera um sublinhado dessa maneira. Por esses motivos, é melhor criar o hábito de escrever sua pasta e nomes de arquivos em letras minúsculas, sem espaços e com palavras separadas por traços, pelo menos até você saber o que está fazendo. Dessa forma, você encontrará menos problemas no futuro.</p>
+
+<h2 id="Qual_estrutura_seu_site_deve_ter">Qual estrutura seu site deve ter?</h2>
+
+<p>A seguir, vamos ver qual estrutura seu site teste deve ter. As coisas mais comuns que temos em qualquer projeto de site que criamos são um arquivo de índice HTML e pastas que contém imagens, arquivos de estilo e arquivos de scripts. Vamos criá-los agora:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Esse arquivo vai geralmente conter o conteúdo da sua página, ou seja, os textos e as imagens que as pessoas veem quando acessam seu site pela primeira vez. Usando seu editor de texto, crie um novo arquivo chamado <code>index.html</code> e salve dentro da sua pasta <code>site-teste</code>.</li>
+ <li><strong>pasta <code>imagens</code></strong>: Essa pasta vai conter todas as imagens que você vai usar no seu site. Crie uma pasta chamada <code>imagens</code>, dentro da sua pasta <code>site-teste</code>.</li>
+ <li><strong>pasta <code>estilos</code></strong>: Essa pasta vai conter os códigos CSS usados para dar estilo ao seu conteúdo (por exemplo, configurando a cor do texto e do fundo da página). Crie uma pasta chamada <code>estilos</code>, dentro da pasta <code>site-teste</code>.</li>
+ <li><strong>pasta <code>scripts</code></strong>: Essa pasta vai conter todos os códigos JavaScript usados para adicionar funcionalidades interativas para seu site (ex.: botões que carregam dados quando clicados). Crie uma pasta chamada <code>scripts</code>, dentro da sua pasta <code>site-teste</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Em computadores com Windows, você deve ter problemas para ver os nomes dos arquivos, porque o Windows tem uma opção chamada <strong>Ocultar as extensões dos tipos de arquivo conhecidos</strong> ativada por padrão. Geralmente você pode desativar essa opção indo no Windows Explorer, selecionando a opção <strong>Opções de pasta...</strong>, desmarque a caixa de seleção <strong>Ocultar as extensões dos tipos de arquivo conhecidos</strong>, e clique em <strong>OK</strong>. Para mais informação sobre sua versão de Windows, procure na web.</p>
+</div>
+
+<h2 id="Caminhos_de_arquivo">Caminhos de arquivo</h2>
+
+<p>Para fazer arquivos conversarem entre si, você tem que fornecer um caminho de arquivo entre eles — basicamente uma rota para que um arquivo saiba onde o outro está. Para demonstrar isso, nós vamos inserir um pouco de HTML no nosso arquivo <code>index.html</code>, e fazer mostrar a imagem que você escolheu no artigo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"</a><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a><a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"</a></p>
+
+<ol>
+ <li>Copie a imagem que você escolheu antes para sua pasta <code>imagens</code>.</li>
+ <li>Abra seu arquivo <code>index.html</code> e insira o seguinte código exatamente como está escrito. Não se preocupe com o significado — nós vamos olhar com mais detalhes essa estrutura posteriormente.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Minha página de teste&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="Minha imagem de teste"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>A linha <code>&lt;img src="" alt="Minha imagem de teste"&gt;</code> é o código HTML que vai inserir uma imagem na página. Nós precisamos dizer ao HTML onde a imagem está. A imagem está dentro da pasta <em>imagens</em>, no mesmo diretório do <code>index.html</code>. Para trilhar o caminho de <code>index.html</code> para nossa imagem, o caminho é <code>imagens/nome-da-sua-imagem</code>. Por exemplo, nossa imagem é chamada <code>firefox-icon.png</code>, então, nosso caminho é <code>imagens/firefox-icon.png</code>.</li>
+ <li>Insira o caminho dentro do seu código HTML, dentro das aspas do código <code>src=""</code>.</li>
+ <li>Salve seu arquivo HTML, então carregue em seu navegador web (dê um duplo-clique no arquivo). Você deve ver sua nova página mostrando sua imagem!</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Algumas regras gerais para caminhos de arquivo:</p>
+
+<ul>
+ <li>Para linkar para um arquivo no mesmo diretório do arquivo HTML, apenas use o nome do arquivo, ex.: <code>my-image.jpg</code>.</li>
+ <li>Para linkar um arquivo em um sub-diretório, escreva o nome do diretório na frente, mais uma barra, ex.: <code>subdirectory/my-image.jpg</code>.</li>
+ <li>Para linkar um arquivo <strong>acima </strong>do arquivo HTML, use dois pontos. Então, por exemplo, se <code>index.html</code> estiver dentro de uma subpasta de <code>site-teste</code> e <code>my-image.png</code> estiver dentro de <code>site-teste</code>, você pode fazer referência a <code>my-image.png</code> em <code>index.html</code> usando <code>../my-image.png</code>.</li>
+ <li>Você pode combinar isso como preferir, por exemplo <code>../subdiretorio/outro-subdiretorio/my-image.png</code>.</li>
+</ul>
+
+<p>Por agora, isso é tudo o que precisamos saber.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: O sistema de arquivos do Windows tende a usar barras invertidas, não barras normais , ex.: <code>C:\windows</code>. Isso não importa — mesmo se você estiver desenvolvendo seu site no Windows, você ainda deve usar barras normais no seu código.</p>
+</div>
+
+<h2 id="O_que_mais_deve_ser_feito">O que mais deve ser feito?</h2>
+
+<p>Por agora, é isso. Sua pasta deve parecer algo do tipo:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;">{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Javascript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..cf911dafc5
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -0,0 +1,110 @@
+---
+title: Como a Web funciona
+slug: Aprender/Getting_started_with_the_web/Como_a_Web_funciona
+tags:
+  - Aprender
+  - Cliente
+  - DNS
+  - HTTP
+  - IP
+  - Infraestrutura
+  - Iniciante
+  - Servidor
+  - TCP
+  - 'l10n:prioridade'
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<p>{{LearnSidebar}}</p>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Como a Web funciona</em> oferece uma visão simplificada do que acontece quando você vê uma página em um navegador, no seu computador ou telefone.</p>
+</div>
+
+<p>Essa teoria não é essencial para escrever códigos em curto prazo, mas em pouco tempo você vai se beneficiar ao entender o que está acontecendo em segundo plano.</p>
+
+<h2 id="Clientes_e_servidores">Clientes e servidores</h2>
+
+<p>Computadores conectados à web são chamados <strong>clientes</strong> e <strong>servidores</strong>. Um diagrama simplificado de como eles interagem pode ter essa aparência:</p>
+
+<p><img alt="Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png"></p>
+
+<ul>
+ <li>Clientes são os típicos dispositivos conectados à internet dos usuários da web (por exemplo, seu computador conectado ao seu Wi-Fi ou seu telefone conectado à sua rede móvel) e programas de acesso à Web disponíveis nesses dispositivos (geralmente um navegador como Firefox ou Chrome).</li>
+ <li>Servidores são computadores que armazenam páginas, sites ou aplicativos. Quando o dispositivo de um cliente quer acessar uma página, uma cópia dela é baixada do servidor para a máquina do cliente para ser apresentada no navegador web do usuário.</li>
+</ul>
+
+<h2 id="As_outras_partes_da_caixa_de_ferramentas">As outras partes da caixa de ferramentas</h2>
+
+<p>O cliente e o servidor que descrevemos acima não contam toda a história. Existem muitas outras partes envolvidas, e vamos descrevê-las abaixo.</p>
+
+<p>Por enquanto, vamos imaginar que a web é uma estrada. Em um extremo da estrada, temos o cliente, que é como sua casa. No extremo oposto, temos o servidor, que é como uma loja onde você quer comprar algo.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Além do cliente e do servidor, também precisamos dizer oi para:</p>
+
+<ul>
+ <li><strong>Sua conexão de Internet</strong>: permite que você mande e receba dados na web. É basicamente como a rua entre sua casa e a loja.</li>
+ <li><strong>TCP/IP</strong>: Protocolo de Controle de Transmissão e Protocolo de Internet (<em>Transmission Control Protocol</em> e <em>Internet Protocol</em>) são protocolos de comunicação que definem como os dados trafegam pela web. São como os mecanismos de transporte que te permitem ir ao shopping, fazer um pedido e comprar seus produtos. Em nosso exemplo, é como um carro ou uma bicicleta (ou qualquer outra coisa que você possa usar).</li>
+ <li><strong>DNS</strong>: Servidor de Nome de Domínio (<em>Domain Name Servers</em>) são como um catálogo de endereços para sites. Quando você digita um endereço web no seu navegador, o navegador procura no servidor de DNS para localizar o endereço real do site, antes que ele possa recuperar o site. O navegador precisa encontrar em qual servidor web a página está hospedada para que ele possa mandar mensagens HTTP ao lugar certo (veja abaixo). Isso é como pesquisar o endereço da loja para que você possa entrar em contato.</li>
+ <li><strong>HTTP</strong>: Protocolo de Transferência de Hypertexto (<em>Hypertext Transfer Protocol</em>) é um {{Glossary("Protocol" , "protocolo de aplicação")}} que define uma linguagem para clientes e servidores se comunicarem entre si. É como a linguagem que você usa para encomendar seus produtos.</li>
+ <li><strong>Arquivos componentes</strong>: um website é feito de muitos arquivos diferentes, que são como as diferentes partes dos produtos que você comprou na loja. Esses arquivos são divididos em dois tipos principais:
+  <ul>
+   <li><strong>Arquivos de Código</strong>: os sites são feitos principalmente de HTML, CSS e JavaScript, embora você possa conhecer outras tecnologias mais tarde.</li>
+   <li><strong>Recursos</strong>: esse é o nome coletivo para todas as outras coisas que compõem um site, como imagens, música, vídeos, documentos do Word e PDFs.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Então_o_que_acontece_exatamente">Então, o que acontece, exatamente?</h2>
+
+<p>Quando você digita um endereço da web no seu navegador (pela nossa analogia é como ir andando até a loja):</p>
+
+<ol>
+ <li>O navegador vai para o servidor de DNS e encontra o endereço verdadeiro de onde o site está hospedado (você encontra o endereço da loja).</li>
+ <li>O navegador manda uma mensagem de requisição HTTP para o servidor, pedindo que envie uma cópia do site ao cliente (você vai até a loja e pede suas mercadorias). Esta mensagem e todos os outros dados enviados entre o cliente e o servidor são enviados pela sua conexão à internet usando TCP/IP.</li>
+ <li>Se o servidor aprovar a requisição do cliente, o servidor enviará ao cliente uma mensagem "200 OK", que significa "Claro que você pode ver esse site! Aqui está" e então começa a enviar os arquivos do site para o navegador como uma série de pequenos pedaços chamados pacotes de dados (a loja dá a você as suas mercadorias e você as traz para sua casa).</li>
+ <li>O navegador monta os pequenos pedaços em um site completo e o mostra a você (as mercadorias chegam à sua porta — novas coisas brilhantes e incríveis!).</li>
+</ol>
+
+<h2 id="DNS_explicado">DNS explicado</h2>
+
+<p>Endereços web verdadeiros não são sequências de textos boas e fáceis de lembrar que você digita na sua barra de endereços para encontrar seus sites favoritos. Eles são números especiais que se parecem com isso: <code>63.245.215.20</code>.</p>
+
+<p>Isso é chamado {{Glossary("IP Address", "endereço IP")}} e representa um local único na web. No entanto, não é muito fácil de lembrar, é? É por isso que o Servidor de Nome de Domínio foi inventado. Esses são servidores especiais que relacionam o endereço da web que você digita no seu navegador (como "mozilla.org") com o endereço real do site (IP).</p>
+
+<p>Sites podem ser acessados diretamente pelo seu endereço IP. Você pode encontrar o endereço IP de um site, digitando seu domínio em uma ferramenta como o <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
+
+<h2 id="Pacotes_explicados">Pacotes explicados</h2>
+
+<p>Anteriormente, usamos o termo "pacotes" para descrever o formato no qual os dados são enviados do servidor para o cliente. O que nós queremos dizer? Basicamente, quando os dados são enviados pela web, eles são enviados como milhares de pequenos blocos, para que muitos usuários diferentes possam baixar o mesmo site ao mesmo tempo. Se os websites fossem enviados como um grande bloco, somente um usuário por vez poderia baixá-los, o que, obviamente, tornaria a web muito ineficiente e não muito divertida de usar.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona">Como a Internet funciona</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — uma Aplicação a Nível de Protocolo</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Vamos Começar!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Códigos de resposta</a></li>
+</ul>
+
+<h2 id="Créditos">Créditos</h2>
+
+<p>Foto da rua: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, por <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..534fc5b9c9
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,239 @@
+---
+title: HTML básico
+slug: Aprender/Getting_started_with_the_web/HTML_basico
+tags:
+  - Aprender
+  - Codificação de Scripts
+  - HTML
+  - Iniciante
+  - Web
+  - 'l10:prioridade'
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (Linguagem de Marcação de Hipertexto) é o código que você usa para estruturar uma página web e seu conteúdo. Por exemplo, o conteúdo pode ser estruturado em parágrafos, em uma lista com marcadores ou usando imagens e tabelas. Como o título sugere, este artigo fornecerá uma compreensão básica do HTML e suas funções.</p>
+</div>
+
+<h2 id="Então_o_que_é_HTML">Então, o que é HTML?</h2>
+
+<p>HTML não é uma linguagem de programação; é uma <em>linguagem de marcação</em>, usada para definir a estrutura do seu conteúdo. HTML consiste de uma série de <strong>{{Glossary("element", "elementos")}}</strong>, que você usa para delimitar ou agrupar diferentes partes do conteúdo para que ele apareça ou atue de determinada maneira. As {{Glossary ("tag", "tags")}} anexas podem transformar uma palavra ou imagem num hiperlink, pode colocar palavras em itálico, pode aumentar ou diminuir a fonte e assim por diante. Por exemplo, veja a seguinte linha de conteúdo:</p>
+
+<pre class="notranslate">Meu gatinho é muito mal humorado</pre>
+
+<p>Se quiséssemos que a linha permanecesse por si só, poderíamos especificar que é um parágrafo colocando-a em uma tag de parágrafo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meu gatinho é muito mal humorado&lt;/p&gt;</pre>
+
+<h3 id="Anatomia_de_um_elemento_HTML">Anatomia de um elemento HTML</h3>
+
+<p>Vamos explorar esse parágrafo mais profundamente.</p>
+
+<p><img alt="Imagem mostrando como funciona a tag P" src="https://i.imgur.com/rgZBXCd.png" style="height: 255px; width: 821px;"></p>
+
+<p>As principais partes de um elemento são:</p>
+
+<ol>
+ <li>A<strong> tag de abertura</strong>: Consiste no nome do elemento (no caso, p), envolvido em <strong>parênteses angulares</strong> de abertura e fechamento. Isso demonstra onde o elemento começa, ou onde seu efeito se inicia — nesse caso, onde é o começo do parágrafo.</li>
+ <li>A <strong>tag de fechamento</strong>: Isso é a mesma coisa que a tag de abertura, exceto que inclui uma barra antes do nome do elemento. Isso demonstra onde o elemento acaba — nesse caso, onde é o fim do parágrafo. Esquecer de incluir uma tag de fechamento é um dos erros mais comuns de iniciantes e pode levar a resultados estranhos.</li>
+ <li>O <strong>conteúdo</strong>: Esse é o conteúdo do elemento, que nesse caso é apenas texto.</li>
+ <li>O <strong>elemento</strong>: A tag de abertura, a de fechamento, e o conteúdo formam o elemento.</li>
+</ol>
+
+<p>Elementos também podem ter atributos, que parecem assim:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Atributos contém informação extra sobre o elemento que você não quer que apareça no conteúdo real. Aqui, <code>class</code> é o nome do atributo e <code>editor-note</code> é o valor do atributo. O atributo <code>class</code> permite que você forneça ao elemento um identificador que possa ser usado posteriormente para aplicar ao elemento informações de estilo e outras coisas.</p>
+
+<p>Um atributo sempre deve ter:</p>
+
+<ol>
+ <li>Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já tiver um).</li>
+ <li>O nome do atributo, seguido por um sinal de igual.</li>
+ <li>Aspas de abertura e fechamento, envolvendo todo o valor do atributo.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Valores de atributos simples que não contém espaço em branco ASCII (ou qualquer um dos caracteres <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> <code>&gt;</code>) podem permanecer sem aspas, mas é recomendável colocar em todos os valores de atributos, pois isso torna o código mais consistente e compreensível.</p>
+</div>
+
+<h3 id="Aninhando_elementos">Aninhando elementos</h3>
+
+<p>Você pode colocar elementos dentro de outros elementos também — isso é chamado de <strong>aninhamento</strong>. Se quiséssemos afirmar que nosso gato é <strong>muito </strong>mal-humorado, poderíamos envolver a palavra "muito" em um elemento {{htmlelement ("strong")}}, o que significa que a palavra deve ser fortemente enfatizada:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meu gatinho é &lt;strong&gt;muito&lt;/strong&gt; mal humorado.&lt;/p&gt;</pre>
+
+<p>Você precisa, no entanto, certificar-se de que seus elementos estejam adequadamente aninhados. No exemplo acima, abrimos primeiro o elemento {{htmlelement ("p")}}, depois o elemento {{htmlelement ("strong")}}; portanto, temos que fechar primeiro o elemento {{htmlelement ("strong")}}, depois o elemento {{htmlelement ("p")}}. O código abaixo está incorreto:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Meu gatinho é &lt;strong&gt;muito mal humorado.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Os elementos precisam ser abertos e fechados corretamente para que eles estejam claramente visíveis dentro ou fora um do outro. Se eles se sobrepuserem conforme mostrado acima, seu navegador tentará adivinhar o que você estava tentando dizer, o que pode levar a resultados inesperados. Então não faça isso!</p>
+
+<h3 id="Elementos_vazios">Elementos vazios</h3>
+
+<p>Alguns elementos não possuem conteúdo e são chamados de <strong>elementos vazios</strong>. Considere o elemento {{htmlelement("img")}} que temos na nossa página HTML:</p>
+
+<pre class="brush: html notranslate">&lt;img src="imagens/firefox-icon.png" alt="Minha imagem de teste"&gt;</pre>
+
+<p>Ele contém dois atributos, mas não há tag <code>&lt;/img&gt;</code> de fechamento, e não há conteúdo interno. Isso acontece porque um elemento de imagem não envolve conteúdo para ter efeito em si mesmo. Sua proposta é incorporar uma imagem na página HTML no lugar que o código aparece.</p>
+
+<h3 id="Anatomia_de_um_documento_HTML">Anatomia de um documento HTML</h3>
+
+<p>Isso resume o básico dos elementos HTML individuais, mas eles não são úteis por si só. Agora vamos ver como elementos individuais são combinados para formar uma página HTML inteira. Vamos visitar novamente os códigos que colocamos no exemplo de <code>index.html</code> (que vimos no artigo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a>):</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Minha página de teste&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="imagens/firefox-icon.png" alt="minha página de teste"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Aqui nós temos:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — o doctype. É a parte inicial obrigatória do documento. Nas névoas do tempo, quando o HTML era novo (por volta de 1991/2), doctypes eram criados para agir como links para um conjunto de regras que a página HTML tinha que seguir para ser considerada um bom HTML, o que poderia significar checagem automática de erros e outras coisas úteis. No entanto, atualmente, eles não fazem muito sentido e são basicamente necessários apenas para garantir que o documento se comporte corretamente. Isso é tudo que você precisa saber agora.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — o elemento {{htmlelement("html")}}. Esse elemento envolve todo o conteúdo da página e às vezes é conhecido como o elemento raiz.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — o elemento {{htmlelement("head")}}. Esse elemento age como um recipiente de tudo o que você deseja incluir em uma página HTML que <em>não é</em> o conteúdo que você quer mostrar para quem vê sua página. Isso inclui coisas como {{Glossary("keyword", "palavras-chave")}} e uma descrição que você quer que apareça nos resultados de busca, CSS para dar estilo ao conteúdo, declarações de conjuntos de caracteres e etc.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — esse elemento define o conjunto de caracteres que seu documento deve usar para o UTF-8, que inclui praticamente todos os caracteres da grande maioria dos idiomas escritos. Essencialmente, agora ele pode manipular qualquer conteúdo textual que você possa colocar. Não há razão para não definir isso e assim pode ajudar a evitar alguns problemas no futuro.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — o elemento {{htmlelement ("title")}}. Ele define o título da sua página, que é o título que aparece na guia do navegador onde sua página é carregada. Ele também é usado para descrever a página quando você a adiciona aos favoritos.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — o elemento {{htmlelement("body")}}. Contém <em>todo</em> o conteúdo que você quer mostrar ao público que visita sua página, seja texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis ou qualquer outra coisa.</li>
+</ul>
+
+<h2 id="Imagens">Imagens</h2>
+
+<p>Vamos voltar nossa atenção para o elemento {{htmlelement("img")}} novamente:</p>
+
+<pre class="brush: html notranslate">&lt;img src="imagens/firefox-icon.png" alt="Minha imagem de teste"&gt;</pre>
+
+<p>Como dissemos antes, isso incorpora uma imagem na nossa página na posição que aparece. Isso é feito pelo atributo <code>src</code> (<em>source</em>), que contém o caminho para nosso arquivo de imagem.</p>
+
+<p>Incluímos também um atributo <code>alt</code> (<em>alternative</em>). Neste atributo, você especifica um texto descritivo para usuários que não podem ver a imagem, possivelmente devido aos seguintes motivos:</p>
+
+<ol>
+ <li>Eles são deficientes visuais. Usuários com deficiências visuais significativas costumam usar ferramentas chamadas leitores de tela para ler o texto alternativo para eles.</li>
+ <li>Algo deu errado, fazendo com que a imagem não seja exibida. Por exemplo, tente alterar deliberadamente o caminho dentro do atributo <code>src</code> para torná-lo incorreto. Se você salvar e recarregar a página, você deve ver algo assim no lugar da imagem:</li>
+</ol>
+
+<p><img alt="" src="https://i.imgur.com/35Rirpx.png" style="display: block; height: 38px; margin: 0px auto; width: 191px;"></p>
+
+<p>As palavras-chave para o texto alternativo são "texto descritivo". O texto alternativo que você escreve deve fornecer ao leitor informações suficientes para ter uma boa ideia do que a imagem mostra. Neste exemplo, nosso texto "Minha imagem teste" não é bom para todos. Uma alternativa muito melhor para o nosso logotipo do Firefox seria "A logo do Firefox: uma raposa em chamas envolvendo a Terra."</p>
+
+<p>Tente criar um texto alternativo melhor para sua imagem agora.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Saiba mais sobre acessibilidade em <a href="https://developer.mozilla.org/pt-BR/docs/Web/Acessibilidade">módulo de aprendizagem sobre acessibilidade.</a></p>
+</div>
+
+<h2 id="Marcando_o_texto">Marcando o texto</h2>
+
+<p>Essa seção abordará alguns dos elementos HTML essenciais que você usará para marcar o texto.</p>
+
+<h3 id="Cabeçalhos">Cabeçalhos</h3>
+
+<p>Os elementos de cabeçalhos permitem especificar que certas partes do seu conteúdo são títulos ou subtítulos. Da mesma forma que um livro tem o título principal e os capítulos possuem títulos e subtítulos, um documento HTML também tem. HTML contém 6 níveis de título, {{htmlelement ("h1")}} - {{htmlelement ("h6")}}, embora você normalmente só use de 3 a 4:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Meu título principal&lt;/h1&gt;
+&lt;h2&gt;Meu título de alto nível&lt;/h2&gt;
+&lt;h3&gt;Meu subtítulo&lt;/h3&gt;
+&lt;h4&gt;Meu segundo subtítulo&lt;/h4&gt;</pre>
+
+<p>Agora, tente adicionar um título adequado à sua página HTML logo acima do elemento {{htmlelement("img")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados ​​para <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">acessibilidade</a> e <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">outros motivos, como SEO</a>. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.</p>
+</div>
+
+<h3 id="Parágrafo">Parágrafo</h3>
+
+<p>Como explicado acima, os elementos {{htmlelement ("p")}} são para conter parágrafos de texto; você os usará com frequência ao marcar um conteúdo de texto regular:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Este é um parágrafo simples&lt;/p&gt;</pre>
+
+<p>Adicione seu texto de exemplo (você o obteve em <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer"><em>Como será o seu site?</em></a>) Em um ou alguns parágrafos, colocados diretamente abaixo do seu elemento {{htmlelement ("img")}}.</p>
+
+<h3 id="Listas">Listas</h3>
+
+<p>Muito do conteúdo da web é de listas e o HTML tem elementos especiais para elas. Listas de marcação sempre consistem em pelo menos 2 elementos. Os tipos mais comuns de lista são ordenadas e não ordenadas:</p>
+
+<ol>
+ <li><strong>Listas não ordenadas</strong> são para listas onde a ordem dos itens não importa, como uma lista de compras, por exemplo. Essas são envolvidas em um elemento {{htmlelement("ul")}}.</li>
+ <li><strong>Listas Ordenadas</strong> são para listas onde a ordem dos itens importa, como uma receita. Essas são envolvidas em um elemento {{htmlelement("ol")}}.</li>
+</ol>
+
+<p>Cada item dentro das listas é posto dentro de um elemento {{htmlelement("li")}} (item de lista).</p>
+
+<p>Por exemplo, se nós quisermos tornar uma parte de um parágrafo numa lista: </p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Na Mozilla, somos uma comunidade global de tecnólogos, pensadores e construtores trabalhando juntos ... &lt;/p&gt;</pre>
+
+<p>Nós podemos fazer assim:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Na Mozilla, somos uma comunidade global de&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;tecnólogos&lt;/li&gt;
+  &lt;li&gt;pensadores&lt;/li&gt;
+  &lt;li&gt;construtores&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;trabalhando juntos ... &lt;/p&gt;</pre>
+
+<p>Tente adicionar uma lista ordenada ou não ordenada à sua página de exemplo.</p>
+
+<h2 id="Links">Links</h2>
+
+<p>Links são muito importantes — eles são o que faz da web ser de fato uma REDE! Para adicionar um link, precisamos usar um elemento simples — {{htmlelement ("a")}} — "a" é a forma abreviada de "âncora". Para transformar o texto do seu parágrafo em um link, siga estas etapas:</p>
+
+<ol>
+ <li>Escolha algum texto. Nós escolhemos o texto "Mozilla Manifesto".</li>
+ <li>Envolva o texto em um elemento {{htmlelement("a")}} , assim:
+  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Dê ao elemento &lt;a&gt; um atributo href, assim:
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Preencha o valor desse atributo com o endereço da Web que você deseja vincular o link:
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/pt-BR/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Você pode obter resultados inesperados se omitir a parte <code>https://</code> ou o <code>http://</code>, o chamado <em>protocolo</em>, no começo do endereço web. Então depois de criar um link, clique nele para ter certeza de que ele está indo para onde você deseja.</p>
+
+<div class="note">
+<p><code>href</code> pode parecer, numa primeira impressão, uma escolha obscura para um nome de atributo. Se você está tendo problemas para lembrar do nome, lembre que significa <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>. (referência em hipertexto)</p>
+</div>
+
+<p>Adicione um link em sua página agora, se ainda não tiver feito isso.</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Se você seguiu todas as instruções neste artigo, você deve terminar com uma página que pareça algo do tipo (você também pode <a href="http://mdn.github.io/beginner-html-site/">vê-la aqui</a>):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Se você ficar emperrado, pode sempre comparar seu trabalho com nosso <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">código de exemplo finalizado</a> no Github.</p>
+
+<p>Aqui, nós só arranhamos na superfície do HTML. Para descobrir mais, vá a nossa <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML">Estruturando a web com HTML</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Javascript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/index.html b/files/pt-br/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..ac40c9ed36
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,65 @@
+---
+title: Introdução à Web
+slug: Aprender/Getting_started_with_the_web
+tags:
+  - CSS
+  - Design
+  - Guía
+  - HTML
+  - Iniciante
+  - 'l10:prioridade'
+  - publicação
+  - teoria
+  - Índice
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Introdução à Web</em> é uma série concisa que apresenta os aspectos práticos do desenvolvimento web. Você configurará as ferramentas necessárias para construir uma página web simples e publicará seu próprio código.</p>
+</div>
+
+<h2 id="A_história_do_seu_primeiro_website">A história do seu primeiro website</h2>
+
+<p>É muito trabalhoso criar um site profissional, então se você é um iniciante em desenvolvimento web, nós encorajamos você a começar pequeno. Você não vai construir outro Facebook imediatamente, mas não é difícil colocar seu próprio site online, então vamos começar por aí.</p>
+
+<p>Por meio dos artigos listados abaixo, você vai sair do nada e vai construir sua primeira página online. Vamos lá!</p>
+
+<h3 id="Instalando_os_programas_básicos"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></h3>
+
+<p>Quando se trata de ferramentas para construir um site, há muito a se escolher. Se você está começando, pode ficar confuso com a variedade de editores de código, frameworks e ferramentas de teste existentes. Em <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a> nós vamos te mostrar passo a passo como instalar apenas o software necessário para começar o desenvolvimento web básico.</p>
+
+<h3 id="Como_será_o_seu_site"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer/">Como será o seu site?</a></h3>
+
+<p>Antes de começar a escrever o código do seu site, você deve planejá-lo primeiro. Quais informações você vai disponibilizar? Quais fontes e cores você irá usar? Em <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será seu site?</a> Nós fornecemos um método simples que você pode seguir para planejar o conteúdo e design do seu site.</p>
+
+<h3 id="Lidando_com_arquivos"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></h3>
+
+<p>Um site consiste em muitos arquivos: conteúdo de texto, código, folhas de estilo, conteúdo de mídia etc. Ao criar um site, você precisa reunir esses arquivos em uma estrutura que faça sentido e garantir que eles possam se conectar. <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a> explica como configurar uma estrutura de arquivos para o seu site e sobre quais problemas você deve estar ciente.</p>
+
+<h3 id="HTML_básico"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></h3>
+
+<p>Linguagem de Marcação de Hypertexto (HTML - Hypertext Markup Language) é o código que você usa para estruturar seu conteúdo web, dando significado e propósito. Por exemplo, meu conteúdo é organizado em parágrafos, ou em uma lista de pontos? Eu tenho imagens na minha página? Eu tenho uma tabela de dados? Sem pressionar você, o <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a> provê informação suficiente para você se familiarizar com HTML.</p>
+
+<h3 id="CSS_básico"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></h3>
+
+<p>Folhas de Estilo em Cascata (CSS - Cascading Stylesheets) é o código que você usa para dar estilo ao seu site. Por exemplo, você quer que seu texto seja preto ou vermelho? Onde o conteúdo deve aparecer na tela? Quais imagens ou cores de fundo devem ser usadas para decorar seu site? <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a> provê o necessário para você começar.</p>
+
+<h3 id="JavaScript_básico"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></h3>
+
+<p>JavaScript é a linguagem de programação que você usa para adicionar recursos interativos ao seu site. Alguns exemplos podem ser jogos, coisas que acontecem quando botões são pressionados ou dados que são inseridos em formulários, efeitos dinâmicos de estilo, animação e muito mais. <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a> vai te dar uma ideia do que é possível com essa excitante linguagem de programação e como começar a usá-la.</p>
+
+<h3 id="Publicando_seu_site"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu site</a></h3>
+
+<p>Uma vez que você tenha acabado de escrever seu código e organizado os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo. <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu site</a> descreve como colocar seu código online com o mínimo de esforço.</p>
+
+<h3 id="Como_a_web_funciona"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></h3>
+
+<p>Quando você acessa seu site favorito, um monte de coisas complicadas acontecem em segundo plano que você pode não conhecer. <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a> mostra o que acontece quando você visualiza um site no seu computador.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Uma grande série de vídeos explicando os fundamentos da web, destinados a levar iniciantes ao desenvolvimento web. Criado por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>..</li>
+ <li><a href="/pt-BR/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">A web e seus padrões</a>: Este artigo fornece algumas informações úteis na Web - como surgiu, quais são as tecnologias padrão da Web, como elas funcionam juntas, por que "desenvolvedor da Web" é uma ótima carreira para escolher e que tipos de práticas recomendadas você aprenderá sobre o curso.</li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..0093c0a82d
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,80 @@
+---
+title: Instalando os programas básicos
+slug: Aprender/Getting_started_with_the_web/instalando_programas_basicos
+tags:
+  - Aprender
+  - Ferramentas
+  - Iniciante
+  - Mecânica da Web
+  - Navegador
+  - configuração
+  - editor de texto
+  - 'l10:prioridade'
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Em <em>Instalando os programas básicos</em>, mostraremos quais ferramentas você precisa para o desenvolvimento web simples e como instalá-los apropriadamente.</p>
+</div>
+
+<h2 id="Quais_ferramentas_os_profissionais_usam">Quais ferramentas os profissionais usam?</h2>
+
+<ul>
+ <li><strong>Um computador</strong>. Talvez isso soe óbvio para algumas pessoas, mas alguns de vocês estão lendo esse artigo de um smartphone ou de um computador público. Para um desenvolvimento sério em web, é melhor investir em um desktop ou notebook rodando Windows, macOS ou Linux.</li>
+ <li><strong>Um editor de texto</strong>, para escrever código. Pode ser um editor de texto (ex: <a href="https://code.visualstudio.com/">Visual Studio Code</a> (em inglês), <a href="https://notepad-plus-plus.org">Notepad++</a> (em inglês), <a href="https://www.sublimetext.com/">Sublime Text</a> (em inglês), <a href="https://atom.io/">Atom</a> (em inglês), <a href="http://brackets.io/">Brackets</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a> (em inglês) ou <a href="https://www.vim.org">VIM</a> (em inglês)), ou um editor hibrído (ex: <a href="https://www.adobe.com/br/products/dreamweaver.html">Dreamweaver </a>ou <a href="https://www.jetbrains.com/webstorm/">WebStorm</a> (em inglês)). Editores de documentos do Office não são adequados para esse tipo de uso, pois ele se baseiam em elementos escondidos que interferem com os motores de renderização usados pelos navegadores.</li>
+ <li><strong>Navegadores web</strong>, para testar os códigos. Atualmente os navegadores mais usados são <a href="https://www.mozilla.org/pt-BR/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/br/safari/">Safari</a>, <a href="https://support.microsoft.com/pt-br/help/17621/internet-explorer-downloads">Internet Explorer</a> e <a href="https://www.microsoft.com/pt-br/windows/microsoft-edge">Microsoft Edge</a>. Você também deve testar o desempenho do seu site em dispositivos móveis e navegadores antigos que seu público-alvo ainda esteja usando (como o IE 8–10). O <a href="https://lynx.browser.org/">Lynx</a>, um navegador da Web baseado em texto, é ótimo para ver como o site é experimentado por usuários com deficiência.</li>
+ <li><strong>Um editor gráfico</strong>, como o <a href="http://www.gimp.org/">GIMP</a> (em inglês), <a href="http://www.getpaint.net/">Paint.NET</a> (em inglês), <a href="https://www.adobe.com/br/products/photoshop.html">Photoshop</a>, or <a href="https://www.adobe.com/products/xd.html">XD</a> , para fazer imagens ou gráficos para suas páginas.</li>
+ <li><strong>Um sistema de controle de versão</strong>, para gerenciar arquivos em servidores, colaborar em um projeto com uma equipe, compartilhar códigos e ativos, e evitar conflitos de edição. Atualmente, o <a href="http://git-scm.com/">Git</a> (em inglês) é o sistema de controle de versão mais popular junto com o serviço de hospedagem <a href="https://github.com/">GitHub</a> (em inglês) ou <a href="https://gitlab.com">GitLab</a> (em inglês).</li>
+ <li><strong>Um programa de FTP</strong>, usado em contas de hospedagem web mais antigas para gerenciar arquivos em servidores (o <a href="git-scm.com">Git</a> está substituindo cada vez mais o FTP para esse propósito). Existem muitos programas de FTP disponíveis, incluindo o <a href="https://cyberduck.io">Cyberduck</a> (em inglês), o <a href="https://fetchsoftworks.com/">Fetch</a> (em inglês) e o <a href="https://filezilla-project.org">FileZilla</a> (em inglês).</li>
+ <li><strong>Um sistema de automação</strong>, como o <a href="http://gruntjs.com/">Grunt</a> (em inglês) ou o <a href="http://gulpjs.com/">Gulp</a> (em inglês), para realizar tarefas repetitivas automaticamente, como por exemplo minificar o código e executar testes.</li>
+ <li>Templates, bibliotecas, frameworks, etc., para acelerar a funcionalidade da escrita.</li>
+ <li>Além de mais ferramentas!</li>
+</ul>
+
+<h2 id="Quais_ferramentas_eu_realmente_preciso_nesse_momento">Quais ferramentas eu realmente preciso nesse momento?</h2>
+
+<p>Isso parece uma lista assustadora, mas felizmente, você pode começar a desenvolver web sem saber nada sobre a maioria deles. Neste artigo, vamos apenas configurá-lo com um mínimo  — um editor de texto e alguns navegadores modernos.</p>
+
+<h3 id="Instalando_um_editor_de_texto">Instalando um editor de texto</h3>
+
+<p>Você provavelmente já tem um editor de texto básico no seu computador. Por padrão, o Windows inclui o <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Bloco de Notas</a> (em inglês) e o Mac OS vem com o <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a> (em inglês). Linux varia; Ubuntu vem com o <a href="http://en.wikipedia.org/wiki/Gedit">gedit</a> (em inglês) por padrão.</p>
+
+<p>Para desenvolvimento web, você provavelmente pode ter mais do que o Bloco de Notas ou o TextEdit. Recomendamos começar com o <a href="https://code.visualstudio.com/">Visual Studio Code</a> (em inglês), que é um editor gratuito, que oferece visualizações ao vivo e dicas de código.</p>
+
+<h3 id="Instalando_navegadores_web_modernos">Instalando navegadores web modernos</h3>
+
+<p>Por enquanto, instalaremos alguns navegadores da Web para testar nosso código. Escolha seu sistema operacional abaixo e clique nos links relevantes para fazer o download dos instaladores dos seus navegadores favoritos:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/pt-BR/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/pt-BR/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://support.microsoft.com/pt-br/help/17621/internet-explorer-downloads">Internet Explorer</a>, <a href="https://www.microsoft.com/pt-br/windows/microsoft-edge">Microsoft Edge</a>, <a href="https://brave.com">Brave</a> (O Windows 10 vem com o Edge por padrão, se você tem o Windows 7 ou acima, você pode instalar o internet explorer 11; caso contrário, você deve instalar um navegador alternativo)</li>
+ <li>Mac: <a href="https://www.mozilla.org/pt-BR/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/br/safari/">Safari</a>, <a href="https://brave.com">Brave</a> (Safari vem no iOS e macOS por padrão)</li>
+</ul>
+
+<p>Antes de continuar, você deve instalar pelo menos dois desses navegadores e tê-los disponíveis para teste.</p>
+
+<div class="blockIndicator note">
+<p>O Internet Explorer não é compatível com alguns recursos modernos da web e pode não ser capaz de executar seu projeto.</p>
+</div>
+
+<h3 id="Instalando_um_servidor_web_local">Instalando um servidor web local</h3>
+
+<p>Alguns exemplos precisarão ser executados por um servidor web para funcionar com êxito. Você pode ver como fazer isso em <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_configurar_um_servidor_de_testes_local">Como eu configuro um servidor de teste localmente?</a></p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Com será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Javascript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu site</a></li>
+ <li id="How_the_web_works"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..a54cab793a
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,448 @@
+---
+title: JavaScript básico
+slug: Aprender/Getting_started_with_the_web/JavaScript_basico
+tags:
+  - Aprender
+  - Codificação de Script
+  - Iniciante
+  - JavaScript
+  - Web
+  - 'l10:prioridade'
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_fwith_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript é a linguagem de programação usada para adicionar interatividade ao seu site (por exemplo: jogos, respostas quando botões são pressionados ou dados são inseridos em formulários, estilo dinâmico, animações). Esse artigo ajuda você a começar com essa linguagem interessante e dá uma idéia do que é possível.</p>
+</div>
+
+<h2 id="O_que_é_JavaScript_realmente">O que é JavaScript, realmente?</h2>
+
+<p>{{Glossary("JavaScript")}} (abreviado como "JS") é uma {{Glossary("Dynamic programming language", "linguagem de programação dinâmica")}} cheia de recursos que quando aplicada em um documento {{Glossary("HTML")}}, pode fornecer interatividade dinâmica em sites. Foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Fundação Mozilla e da Corporação Mozilla.</p>
+
+<p>JavaScript é incrivelmente versátil e amigável ao iniciante. Com mais experiência, você poderá criar jogos, gráficos 2D e 3D animados, aplicativos abrangentes baseados em bancos de dados e muito mais!</p>
+
+<p>JavaScript em si é bastante compacto, mas muito flexível. Os desenvolvedores escreveram uma grande variedade de ferramentas sobre a linguagem JavaScript principal, desbloqueando uma grande quantidade de funcionalidades extras com o mínimo de esforço. Essas incluem:</p>
+
+<ul>
+ <li>Interfaces de programação de aplicativos no navegador ({{Glossary ("API", "APIs")}}) - APIs integradas em navegadores da Web, fornecendo funcionalidade como criar dinamicamente HTML e definir estilos CSS, coletar e manipular um fluxo de vídeo da webcam do usuário ou gerando gráficos 3D e amostras de áudio.</li>
+ <li>APIs de terceiros  — Permitem que os desenvolvedores incorporem funcionalidades em seus sites de outros provedores de conteúdo, como o Twitter ou o Facebook.</li>
+ <li>Estruturas e bibliotecas de terceiros — você pode aplicá-las ao seu HTML para permitir que você crie rapidamente sites e aplicativos.</li>
+</ul>
+
+<p>Como este artigo deve ser apenas uma introdução ao JavaScript, não vamos confundir você neste estágio, falando em detalhes sobre qual é a diferença entre a linguagem JavaScript principal e as diferentes ferramentas listadas acima. Você pode aprender tudo isso em detalhes mais tarde, em nossa <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript">área de aprendizado de JavaScript</a> e no restante do MDN.</p>
+
+<p>Abaixo, apresentaremos alguns aspectos da linguagem principal, e você também poderá brincar com alguns recursos da API do navegador. Divirta-se!</p>
+
+<h2 id="Um_exemplo_Olá_mundo">Um exemplo "Olá mundo"</h2>
+
+<p>A seção acima pode parecer realmente empolgante, e assim deve ser  — o JavaScript é uma das tecnologias mais ativas da Web e, à medida que você começa a usá-lo bem, seus sites entrarão em uma nova dimensão de poder e criatividade.</p>
+
+<p>No entanto, ficar confortável com o JavaScript é um pouco mais difícil do que ficar confortável com HTML e CSS. Você pode ter que começar pequeno e continuar trabalhando em pequenos passos consistentes. Para começar, mostraremos como adicionar alguns JavaScript básicos à sua página, criando um exemplo de "Olá mundo!" (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">o padrão em exemplos básicos de programação</a>).</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Se você não acompanhou o restante de nosso curso, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">faça o download desse código exemplo</a> e use-o como um ponto de partida.</p>
+</div>
+
+<ol>
+ <li>Primeiro, vá para o seu site de teste e crie uma nova pasta chamada <code>scripts</code>. Em seguida, dentro da nova pasta de scripts que você acabou de criar, crie um novo arquivo chamado <code>main.js</code>. Salve na sua pasta de <code>scripts</code>.</li>
+ <li>Em seguida, no seu arquivo <code>index.html</code>, insira o seguinte elemento em uma nova linha logo antes da tag de fechamento <code>&lt;/body&gt;</code>:
+  <pre class="brush: html notranslate">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Isso é basicamente a mesma coisa que o elemento {{htmlelement("link")}} para o CSS — ele aplica o JavaScript à página, para que ele tenha efeito no HTML (junto com o CSS e qualquer outra coisa na página).</li>
+ <li>Agora adicione o seguinte código no arquivo <code>main.js</code>:
+  <pre class="brush: js notranslate">const meuCabecalho = document.querySelector('h1');
+meuCabecalho.textContent = 'Ola mundo!';</pre>
+ </li>
+ <li>Por fim, verifique se os arquivos HTML e Javascript estão salvos e, em seguida, carregue o <code>index.html</code> no navegador. Você deve ver algo do tipo:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: A razão pela qual colocamos o elemento {{htmlelement("script")}} perto da parte inferior do arquivo HTML, é que o HTML é carregado pelo navegador na ordem em que ele aparece no arquivo. Se o JavaScript é carregado primeiro ele pode afetar o HTML abaixo dele, mas as vezes isso pode não funcionar, já que o JavaScript seria carregado antes do HTML em que ele deveria trabalhar. Portanto, colocar o JavaScript próximo à parte inferior da página HTML geralmente é um meio de corrigir isto, veja <a href="/pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript#Script_loading_strategies">Estratégias de carregamento de scripts</a>.</p>
+</div>
+
+<h3 id="O_que_aconteceu">O que aconteceu?</h3>
+
+<p>Seu texto de título foi alterado para "Hello world!" usando JavaScript. Você fez isso primeiro usando uma função chamada <code>{{domxref("Document.querySelector", "querySelector()")}}</code> para obter uma referência ao título e armazená-lo em uma variável chamada <code>meuCabecalho</code>. Isso é muito parecido ao que fizemos usando seletores CSS. Quando queremos fazer algo em um elemento, primeiro você precisa selecioná-lo.</p>
+
+<p>Depois disso, você define o valor da propriedade {{domxref ("Node.textContent", "textContent")}} para "Hello world!", na variável <code>meuCabecalho</code> (que representa o conteúdo do título).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Os dois recursos usados acima são partes da <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">API do Modelo de Objeto de Documento (DOM)</a>, que permite manipular documentos.</p>
+</div>
+
+<h2 id="Curso_intensivo_de_fundamentos_da_linguagem">Curso intensivo de fundamentos da linguagem</h2>
+
+<p>Vamos explicar alguns dos principais recursos da linguagem JavaScript, para dar a você um melhor entendimento de como tudo funciona. Vale a pena notar que esses recursos são comuns a todas as linguagens de programação, por isso, se você dominar esses fundamentos, estará no caminho certo para programar qualquer coisa!</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Nesse artigo, tente escrever linhas de código de exemplo no seu console JavaScript para ver o que acontece. Para mais detalhes sobre o console JavaScript, consulte <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">Descobrir as ferramentas do desenvolvedor do navegador</a>.</p>
+</div>
+
+<h3 id="Variáveis">Variáveis</h3>
+
+<p>{{Glossary("Variable", "Variáveis")}} são espaços na memória do computador onde você pode armazenar dados. Você começa declarando uma variável com a palavra-chave <code>var</code> (menos recomendado, se aprofunde mais para uma explicação) ou a palavra chave <code>let</code>, seguida por qualquer nome que você queira chamá-la:</p>
+
+<pre class="brush: js notranslate">let minhaVariavel;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Ponto-e-vírgula no fim de uma linha indica onde uma instrução termina; só é absolutamente necessário quando você precisa separar instruções em uma única linha. No entanto, algumas pessoas acreditam que é uma boa prática colocá-las no final de cada instrução. Existem outras regras para quando você deve ou não usá-las — consulte <a href="https://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Seu Guia para Ponto-e-Vírgula em Javascript</a> para mais detalhes.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode dar quase qualquer nome a uma variável, mas há algumas restrições (veja <a href="http://www.codelifter.com/main/tips/tip_020.shtml">esse artigo sobre regras de nomes de variáveis</a>). Se você não tem certeza, você pode <a href="https://mothereff.in/js-variables">conferir se sua variável tem um nome válido</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: JavaScript é case sensitive — <code>minhaVariavel</code> é  diferente de <code>minhavariavel</code>. Se você estiver tendo problemas no seu código, cheque seu casing!</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Para mais detalhes sobre a diferença entre <code>var</code> e <code>let</code>, veja<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let"> A diferença entre var e let</a>.</p>
+</div>
+
+<p>Depois de declarar uma variável, você pode dar a ela um valor:</p>
+
+<pre class="brush: js notranslate">minhaVariavel = 'Bob';</pre>
+
+<p>Você pode fazer as duas operações na mesma linha se você quiser:</p>
+
+<pre class="brush: js notranslate">let minhaVariavel = 'Bob';
+</pre>
+
+<p>Você pode retornar o valor chamando a variável pelo nome:</p>
+
+<pre class="brush: js notranslate">minhaVariavel;</pre>
+
+<p>Depois de dar à variável um valor, você pode mudá-lo:</p>
+
+<pre class="brush: js notranslate">let minhaVAriavel = 'Bob';
+minhaVariavel = 'Steve';</pre>
+
+<p>Note que as variáveis podem conter valores com diferentes <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Data_structures">tipos de dados</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variável</th>
+   <th scope="col">Explicação</th>
+   <th scope="col">Exemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Uma sequência de texto é conhecida como uma string. Para mostrar que o valor é uma string, você deve envolvê-la em aspas.</td>
+   <td><code>let minhaVariavel = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Um número. Números não tem aspas ao redor deles.</td>
+   <td><code>let minhaVariavel = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>
+    <p>Um valor verdadeiro ou falso. As palavras <code>true</code> e <code>false</code> são palavras-chaves especiais em JS e não precisam de aspas.</p>
+   </td>
+   <td><code>let minhaVariavel = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Uma estrutura que permite armazenar vários valores em uma única variável.</td>
+   <td><code>let minhaVariavel = [1,'Bob','Steve',10];</code><br>
+    Acesse cada item do array dessa maneira: <code>minhaVariavel[0]</code>, <code>minhaVariavel[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>Basicamente, qualquer coisa. Tudo em JavaScript é um objeto e pode ser armazenado em uma variável. Tenha isso em mente enquanto aprende.</td>
+   <td><code>let minhaVariavel = document.querySelector('h1');</code><br>
+    Todos os exemplos acima também.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Então, por que precisamos de variáveis? Bom, variáveis são necessárias para fazer qualquer coisa interessante em programação. Se os valores não pudessem mudar, então você não poderia fazer nada dinâmico, como personalizar uma mensagem de boas-vindas, ou mudar a imagem mostrada em uma galeria de imagens.</p>
+
+<h3 id="Comentários">Comentários</h3>
+
+<p>Os comentários são, essencialmente, pequenos trechos de texto que podem ser adicionados entre os códigos e são ignorados pelo navegador. Você pode colocar comentários no código JavaScript, assim como em CSS:</p>
+
+<pre class="brush: js notranslate">/*
+Tudo no meio é um comentário.
+*/</pre>
+
+<p>Se o seu comentário não tiver quebras de linha, é mais fácil colocá-lo depois de duas barras como esta:</p>
+
+<pre class="brush: js notranslate">// Isto é um comentário.</pre>
+
+<h3 id="Operadores">Operadores</h3>
+
+<p>Um <code>{{Glossary("operator", "operador")}}</code> é um símbolo matemático que produz um resultado baseado em dois valores (ou variáveis). Na tabela a seguir, você pode ver alguns dos operadores mais simples, além de alguns exemplos para experimentar no console JavaScript.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Operador</th>
+   <th scope="col">Explicação</th>
+   <th scope="col">Simbolo(s)</th>
+   <th scope="col">Exemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Adição</th>
+   <td>Usado para somar dois números ou juntar duas strings.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Ola " + "mundo!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Subtração, multiplição, divisão</th>
+   <td>Fazem exatamente o que você espera que eles façam na matemática básica.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // no JS a multiplicação é um asterisco<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Atribuição</th>
+   <td>Você já viu essa, ela associa um valor a uma variável.</td>
+   <td><code>=</code></td>
+   <td><code>let minhaVariavel = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>Operador de igualdade</p>
+   </th>
+   <td>Faz um teste para ver se dois valores são iguais, retornando um resultado <code>true</code>/<code>false</code> (booleano).</td>
+   <td><code>===</code></td>
+   <td><code>let minhaVAriavel = 3;<br>
+    minhaVariavel === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Negação, não igual</th>
+   <td>Retorna o valor lógico oposto do sinal; transforma um true em um false, etc. Quando usado junto com o operador de igualdade, o operador de negação testa se os valores são diferentes.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Para "Negação", a expressão básica é <code>true</code>, mas a comparação retorna <code>false</code> porque a negamos:</p>
+
+    <p><code>let minhaVariavel = 3;<br>
+     !(minhaVariavel === 3);</code></p>
+
+    <p>"Não igual" dá basicamente o mesmo resultado com sintaxe diferente. Aqui estamos testando "é <code>minhaVariavel</code> NÃO é igual a 3". Isso retorna <code>false</code> porque <code>minhaVariavel</code> É igual a 3.</p>
+
+    <p><code><code>let minhaVariavel = 3;</code><br>
+     minhaVariavel !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Há vários outros operadores para explorar, mas por enquanto esses são suficientes. Consulte <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators">Expressões e operadores</a> para ver uma lista completa.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Misturar tipos de dados pode levar a resultados estranhos quando uma operação é executada, portanto, tome cuidado para declarar suas variáveis corretamente, e você obterá os resultados esperados. Por exemplo, digite <code>'35' + '25'</code> no seu console. Por que você não teve o resultado esperado? Porque as aspas transformam os números em strings, você acabou concatenando strings em vez de somar os números. Se você digitar <code>35 + 25</code>, você obterá o resultado correto.</p>
+</div>
+
+<h3 id="Condicionais">Condicionais</h3>
+
+<p>Condicionais são estruturas de código que te permitem testar se uma expressão retorna verdadeiro ou não, executando um código alternativo revelado por seu resultado. Uma forma muito comum de condicional é a instrução <code>if ... else</code>. Por exemplo:</p>
+
+<pre class="brush: js notranslate">let sorvete = 'chocolate';
+if (sorvete === 'chocolate') {
+  alert('Opa, Eu amo sorvete de chocolate!');
+} else {
+  alert('Ahh, mas chocolate é o meu favorito...');
+}</pre>
+
+<p>A expressão dentro do <code>if ( ... )</code> é o teste — ela usa o operador de igualdade (como descrito anteriormente) para comparar a variável <code>sorvete</code> com a string <code>chocolate</code> para ver se elas são iguais. Se essa comparação retorna <code>true</code>, o primeiro bloco de código será executado. Se a comparação não for verdadeira, o primeiro bloco de código será ignorado e o segundo bloco de código, após a instrução <code>else</code>, será executado.</p>
+
+<h3 id="Funções">Funções</h3>
+
+<p>{{Glossary("Function", "Funções")}} são uma maneira de encapsular funcionalidades que você deseja reutilizar. Quando você precisa de um procedimento, você pode chamar a função com um nome, em vez de reescrever o código inteiro a cada vez. Você já viu alguns usos de funções acima, por exemplo:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">let minhaVariavel = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">alert('Ola!');</pre>
+ </li>
+</ol>
+
+<p>Essas funções, <code>document.querySelector</code> e <code>alert</code> são pré-definidas nos navegadores para você usar quando quiser.</p>
+
+<p>Se você ver algo que parece com um nome de variável, mas com parênteses — <code>()</code> — depois, provavelmente é uma função. Funções geralmente tem {{Glossary("Argument", "Argumentos")}} — pedaços de dados que elas precisam para realizarem o seu trabalho. Os argumentos são colocados dentro dos parênteses e separados por vírgulas, se houver mais de um.</p>
+
+<p>Por exemplo, a função <code>alert()</code> faz com que uma caixa pop-up apareça dentro da janela do navegador, mas precisamos passar uma string como argumento para dizer à função o que escrever na caixa pop-up.</p>
+
+<p>A boa noticia é que você pode definir suas próprias funções — no próximo exemplo nós escrevemos uma função simples que recebe dois números como argumentos e os multiplica:</p>
+
+<pre class="brush: js notranslate">function multiplica(num1,num2) {
+  let resultado = num1 * num2;
+  return resultado;
+}</pre>
+
+<p>Tente executar a função acima no console e teste com vários argumentos. Por exemplo:</p>
+
+<pre class="brush: js notranslate">multiplica(4, 7);
+multiplica(20, 20);
+multiplica(0.5, 3);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: A instrução <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> diz ao navegador para retornar a variável <code>resultado</code> da função para que ela esteja disponível para uso. Isso é necessário porque as variáveis definidas dentro das funções só estão disponíveis dentro destas funções. Isso é chamado {{Glossary("Scope", "Escopo")}} de variável (leia mais em<a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope"> escopo da variável</a>.)</p>
+</div>
+
+<h3 id="Eventos">Eventos</h3>
+
+<p>Interatividade real em um site precisa de eventos. Estas são estruturas de código que percebem as coisas que acontecem no navegador, executando o código em resposta. O exemplo mais óbvio é o <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Element/click_event">evento de clique</a>, que é disparado pelo navegador quando você clica em algo com o mouse. Para demonstrar isso, insira o seguinte código no seu console e, em seguida, clique na página da Web atual:</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {
+    alert('Ai! Pare de me cutucar!');
+}</pre>
+
+<p>Há muitas maneiras de associar um evento a um elemento. Aqui selecionamos o elemento {{htmlelement("html")}}, definindo sua propriedade <code><a href="/pt-BR/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> igual a uma função anônima (ou seja, sem nome), que contém o código que queremos que o evento clique execute.</p>
+
+<p>Observe que:</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre>
+
+<p>é equivalente a</p>
+
+<pre class="brush: js notranslate">let meuHTML = document.querySelector('html');
+meuHTML.onclick = function() {};</pre>
+
+<p>É só uma maneira mais curta de escrever.</p>
+
+<h2 id="Melhorando_nosso_site_de_exemplo">Melhorando nosso site de exemplo</h2>
+
+<p>Agora que analisamos alguns fundamentos do JavaScript, vamos adicionar alguns recursos interessantes ao nosso site de exemplo para ver o que é possível fazer.</p>
+
+<h3 id="Adicionando_um_modificador_de_imagem">Adicionando um modificador de imagem</h3>
+
+<p>Nessa parte, nós adicionaremos outra imagem no nosso site, e vamos usar o JavaScript para alternar entre as duas, quando a imagem for clicada.</p>
+
+<ol>
+ <li>Antes de tudo, ache outra imagem que você gostaria que aparecesse no seu site. Tenha certeza que ela tem o mesmo tamanho que sua primeira imagem, ou o mais perto disso possível.</li>
+ <li>Salve a imagem na pasta <code>imagens</code>.</li>
+ <li>Renomeie a imagem para 'firefox2.png' (sem as aspas).</li>
+ <li>Vá no seu arquivo <code>main.js</code>, e digite o seguinte código JavaScript (se seu "Ola mundo" em JavaScript ainda estiver lá, delete-o):
+  <pre class="brush: js notranslate">let minhaImagem = document.querySelector('img');
+
+minhaImagem.onclick = function() {
+    let meuSrc = minhaImagem.getAttribute('src');
+    if(meuSrc === 'imagens/firefox-icon.png') {
+      minhaImagem.setAttribute ('src','imagens/firefox2.png');
+    } else {
+      minhaImagem.setAttribute ('src','imagens/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Salve todos os arquivos e carregue o <code>index.html</code> no navegador. Agora quando você clicar na imagem, ela deve mudar para a outra!</li>
+</ol>
+
+<p>Você armazena uma referência ao seu elemento {{htmlelement("img")}} na variável <code>minhaImagem</code>. Depois, você faz a propriedade do manipulador de evento <code>onclick</code> dessa variável igual a uma função sem nome (uma função "anônima"). Agora, toda vez que esse elemento de imagem é clicado:</p>
+
+<ol>
+ <li>Você recupera o valor do atributo <code>src</code> da imagem.</li>
+ <li>Você usa uma condicional para checar se o valor <code>src</code> é igual ao caminho da imagem original:
+  <ol>
+   <li>Se for, você muda o valor de <code>src</code> para o caminho da segunda imagem, forçando a outra imagem a ser carregada dentro do elemento {{htmlelement("img")}}.</li>
+   <li>Se não é (significando que já mudou), nós mudamos o valor <code>src</code> de volta ao caminho da imagem, para o estado original.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Adicionando_uma_mensagem_personalizada_de_boas_vindas">Adicionando uma mensagem personalizada de boas vindas</h3>
+
+<p>Em seguida, adicionaremos outro trecho de código, alterando o título da página para uma mensagem personalizada de boas vindas quando o usuário realizar sua primeira visita ao site. Essa mensagem de boas vindas persistirá, quando o usuário deixar o site e voltar mais tarde — salvaremos a mensagem usando a <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Web_Storage_API_pt_br">API de Armazenamento Web</a>. Incluiremos também uma opção para mudar o usuário e, portanto, a mensagem de boas vindas sempre que necessário.</p>
+
+<ol>
+ <li>Em <code>index.html</code>, adicione a seguinte linha de código antes do elemento {{htmlelement("script")}}:
+
+  <pre class="brush: html notranslate">&lt;button&gt;Mudar usuário&lt;/button&gt;</pre>
+ </li>
+ <li>Em <code>main.js</code>, adicione o seguinte código no fim do arquivo, exatamente como está escrito — isso pega referências para o novo botão que adicionamos e para o título, e guarda ambos em variáveis:
+  <pre class="brush: js notranslate">let meuBotao = document.querySelector('button');
+let meuCabecalho = document.querySelector('h1');</pre>
+ </li>
+ <li>Agora adicione a seguinte função para criar a saudação personalizada — isso não vai fazer nada ainda, mas corrigiremos isso em um momento:
+  <pre class="brush: js notranslate">function defineNomeUsuario() {
+  let meuNome = prompt('Por favor, digite seu nome.');
+  localStorage.setItem('nome', meuNome);
+  meuCabecalho.textContent = 'Mozilla é legal, ' + meuNome;
+}</pre>
+  Essa função contem uma função <a href="/pt-BR/docs/Web/API/Window/prompt"><code>prompt()</code></a>, que traz uma caixa de diálogo assim como <code>alert()</code> faz. Este <code>prompt()</code>, no entanto, pede ao usuário para inserir algum dado e guarda os dados em uma variável quando o botão <strong>OK</strong> é pressionado. Nesse caso, estamos pedindo ao usuário para digitar seu nome. Em seguida, chamamos uma API denominada <code>localStorage</code>, o que nos permite guardar dados no navegador para usarmos mais tarde. Usamos a função <code>setItem()</code> de localStorage para criar e guardar um item de dado chamado <code>'nome'</code>, definindo seu valor para a variável <code>meuNome</code> que contém o nome que o usuário digitou. Finalmente, definimos o <code>textContent</code> do título como uma string, mais o nome recém-armazenado do usuário.</li>
+ <li>Em seguida, adicione esse bloco <code>if ... else</code> — poderíamos chamar isso de código de inicialização, pois ele estrutura o aplicativo quando é carregado pela primeira vez:
+  <pre class="brush: js notranslate">if(!localStorage.getItem('nome')) {
+  defineNomeUsuario();
+} else {
+  let nomeGuardado = localStorage.getItem('nome');
+  meuCabecalho.textContent = 'Mozilla é legal, ' + nomeGuardado;
+}</pre>
+  Primeiro, esse bloco usa o operador de negação (NÃO lógico representado pelo <code>!</code>) para checar se o dado <code>nome</code> existe — se não existir, a função <code>defineNomeUsuario()</code> é executada para criá-lo. Se ele já existir (isto é, se o usuário já tiver digitado quando visitou o site anteriormente), nós recuperamos o nome guardado usando <code>getItem()</code> e associamos o <code>textContent</code> do título a uma string, mais o nome do usuário, como fizemos dentro de <code>defineNomeUsuario()</code>.</li>
+ <li>Finalmente, coloque o evento <code>onclick</code> no botão, para que quando clicado, ele execute a função <code>defineNomeUsuario()</code>. Isso permite que o usuário defina um novo nome sempre que quiser ao pressionar o botão:
+  <pre class="brush: js notranslate">meuBotao.onclick = function() { defineNomeUsuario();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Agora quando você visitar seu site pela primeira vez, ele solicitará seu nome de usuário e, em seguida, enviará uma mensagem personalizada. Você pode alterar o nome a qualquer momento, pressionando o botão. Como um bônus, porque o nome é armazenado dentro de  <code>localStorage</code> , ele persiste depois que o site é fechado, mantendo a mensagem personalizada lá quando você abrir o site novamente!</p>
+
+<h3 id="Um_nome_de_usuário_nulo">Um nome de usuário nulo?</h3>
+
+<p>Quando você executa o exemplo e obtém a caixa de diálogo que solicita a inserção do seu nome de usuário, tente pressionar o botão Cancelar. Você deve terminar com um título que diz "Mozilla is cool, null". Isso ocorre porque, quando você cancela o prompt, o valor é definido como <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>, um valor especial em JavaScript que se refere basicamente à ausência de um valor.</p>
+
+<p>Tente também pressionar OK sem digitar nenhum nome - você deve terminar com um título que diz "Mozilla é legal,", por razões bastante óbvias.</p>
+
+<p>Se você quiser evitar esses problemas, verifique se o usuário não inseriu um nome <code>null</code> ou em branco, atualizando a função <code>defineNomeUsuario()</code> para isso:</p>
+
+<pre class="brush: js notranslate">function defineNomeUsuario() {
+  let meuNome = prompt('Por favor, digite seu nome.');
+  if(!meuNome || meuNome === null) {
+    defineNomeUsuario();
+  } else {
+    localStorage.setItem('nome', meuNome);
+    meuCabecalho.innerHTML = 'Mozilla é legal, ' + meuNome;
+  }
+}</pre>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Na linguagem humana - se </span></span><code>meuNome</code><span class="tlid-translation translation" lang="pt"><span title=""> não tiver valor ou seu valor for </span></span><code>null</code><span class="tlid-translation translation" lang="pt"><span title="">, execute </span></span><code>defineNomeUsuario()</code><span class="tlid-translation translation" lang="pt"><span title=""> novamente desde o início.</span> <span title="">Se ele tiver um valor (se as instruções acima não forem verdadeiras), armazene o valor em </span></span><code>localStorage</code><span class="tlid-translation translation" lang="pt"><span title=""> e defina-o como o texto do cabeçalho.</span></span></p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Se você seguiu todas as instruções deste artigo, você deve terminar com uma página parecida com essa (você também pode <a href="https://mdn.github.io/beginner-html-site-scripted/">ver nossa versão aqui</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Se você ficar empacado, você pode comparar seu trabalho com o nosso <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">exemplo finalizado no Github</a>.</p>
+
+<p>Nós mal arranhamos a superfície do JavaScript. Se você gostou e deseja avançar ainda mais, <span class="tlid-translation translation" lang="pt"><span title="">veja os outros recursos abaixo</span></span>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript">JavaScript — Script dinâmico do lado cliente</a></dt>
+ <dd><span class="tlid-translation translation" lang="pt"><span title="">Nosso tópico de aprendizado JavaScript - mergulhe no JavaScript com muito mais detalhes.</span></span></dd>
+ <dt><a class="external" href="https://learnjavascript.online/" rel="noopener">Learn JavaScript</a></dt>
+ <dd><span class="tlid-translation translation" lang="pt"><span title="">Um excelente recurso para aspirantes a desenvolvedores web - Aprenda JavaScript em um ambiente interativo, com breves lições e testes interativos, guiados por avaliação automatizada.</span> <span title="">As primeiras 40 lições são gratuitas e o curso completo está disponível por um pequeno pagamento único.</span></span></dd>
+</dl>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_Módulo">Neste Módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..7bc25089da
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,131 @@
+---
+title: Publicando seu site
+slug: Aprender/Getting_started_with_the_web/Publicando_seu_site
+tags:
+  - Codificação em Script
+  - FTP
+  - GitHub
+  - Iniciante
+  - Motor de Apps do Google
+  - Web
+  - 'l10n:prioridade'
+  - publicação
+  - servidor web
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<div class="summary">
+<p>Uma vez que você tenha acabado de escrever seu código e organizar os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo.  Este artigo mostra como colocar online seu código de amostra simples com o mínimo de esforço.</p>
+</div>
+
+<h2 id="Quais_são_as_opções">Quais são as opções?</h2>
+
+<p>Publicar um site não é um tópico simples, principalmente porque há muitas maneiras diferentes de fazê-lo. Nesse artigo, nós não pretendemos documentar todos os métodos possíveis. Em vez disso, nós discutiremos os prós e contras de três estratégias do ponto de vista de um iniciante, e então o guiaremos por um método que irá funcionar por enquanto.</p>
+
+<h3 id="Conseguindo_uma_hospedagem_e_um_nome_de_domínio">Conseguindo uma hospedagem e um nome de domínio</h3>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Para ter mais controle sobre o conteúdo e a aparência do site, a maioria das pessoas escolhe comprar hospedagem na web e um nome de domínio:</span></span></p>
+
+<ul>
+ <li>Hospedagem é um espaço para arquivos alugado no <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/o_que_e_um_web_server">servidor</a> de uma compania de hospedagem. O servidor disponibiliza o conteúdo do site para os usuários que o visitam.</li>
+ <li>Um <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/What_is_a_domain_name">nome de domínio</a> é o endereço único onde pessoas encontram seu site, como <code>http://www.mozilla.org</code>, ou <code>http://www.bbc.co.uk</code>. Você aluga seu nome de domínio por tantos anos quanto desejar por meio de um <strong>registrador de domínio</strong>.</li>
+</ul>
+
+<p>Muitos sites profissionais ficam online dessa maneira.</p>
+
+<p>Você vai precisar ainda de um programa de  {{Glossary("FTP", "Protocolo de Transferência de Arquivos (FTP)")}} (veja <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Quanto_custa_fazer_algo_web#Software">Quanto custa: software</a> para mais detalhes) para transferir os arquivos do site ao servidor. Programas FTP variam, mas geralmente você tem que logar no servidor usando detalhes fornecidos por sua empresa de hospedagem (ex. nome de usuário, senha, nome de host). Então, o programa mostra para você os arquivos locais e do servidor em duas janelas, para que você possa transferí-los ao servidor e de volta para o computador:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Dicas_para_encontrar_hospedagem_e_domínios">Dicas para encontrar hospedagem e domínios</h4>
+
+<ul>
+ <li>Nós não promovemos empresas de hospedagem comercial ou para registro de nome de domínio. Para encontrar empresas de hospedagem e registradores de domínio, basta procurar por "hospedagem web" e "nomes de domínio". Todos os registradores terão um recurso para permitir que você verifique se o nome de domínio desejado está disponível.</li>
+ <li>Seu {{Glossary("ISP", "provedor de serviço de internet")}} local ou empresarial pode fornecer uma hospedagem limitada para um site pequeno. O conjunto de recursos disponíveis será limitado, mas pode ser perfeito para seus primeiros experimentos — entre em contato com eles e pergunte!</li>
+ <li>Há alguns serviços disponíveis gratuitamente, como <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a> e <a href="https://wordpress.com/">Wordpress</a>. <span class="tlid-translation translation" lang="pt"><span title="">Às vezes, você recebe o que paga, mas às vezes esses recursos são bons o suficiente para suas experiências iniciais</span></span>.</li>
+ <li>Muitas empresas fornecem hospedagem e registro de domínio.</li>
+</ul>
+
+<h3 id="Usando_uma_ferramenta_online_como_Github_ou_Google_App_Engine">Usando uma ferramenta online como Github ou Google App Engine</h3>
+
+<p>Algumas ferramentas permitem que você publique seu site online:</p>
+
+<ul>
+ <li><a href="https://github.com/">Github</a> é um site de "codificação social". Ele permite que você faça upload de repositórios de código para armazenamento no <strong>sistema de controle de versão</strong> <a href="http://git-scm.com/">Git</a><strong>. </strong>Você pode então colaborar em projetos de código, e o sistema é open-source por padrão, o que significa que todo mundo pode encontrar seu código Github, usá-lo, aprender com ele e se aprimorar. O Gitub tem um recurso muito útil chamado <a href="https://pages.github.com/">GitHub Pages</a>, que permite expor o código do site ao vivo na web.</li>
+ <li>O <a href="https://cloud.google.com/appengine/">Google App Engine</a> é uma plataforma poderosa que permite criar e executar aplicativos na infraestrutura do Google, seja para criar um aplicativo da Web de várias camadas a partir do zero ou para hospedar um site estático. Veja <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_voce_hospeda_seu_site_Google_App_Engine">Como você hospeda seu website no Google App Engine?</a> Para maiores informações.</li>
+</ul>
+
+<p>Diferente da maioria das hospedagens, essas ferramentas geralmentre são gratuitas, mas você tem um conjunto limitado de recursos.</p>
+
+<h3 id="Usando_uma_IDE_baseada_na_web_como_o_CodePen">Usando uma IDE baseada na web como o CodePen</h3>
+
+<p>Há um número grande de web apps que emulam um ambiente de desenvolvimento de site, permitindo a você escrever HTML, CSS e JavaScript e então expor o resultado renderizado como em um site — tudo em uma aba do navegador! Falando de forma genérica, essas ferramentas são fáceis, boas para aprender e gratuitas (para recursos básicos), e elas geralmente hospedam sua página em um endereço único na web. No entanto, os recursos são limitados e esses aplicativos  geralmente não provêem espaço de hospedagem para recursos (como imagens).</p>
+
+<p>Tente codificar com alguns desses exemplos, e veja qual se encaixa melhor para você:</p>
+
+<ul>
+ <li><a href="http://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.mozilla.org/pt-BR/">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JSBin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Publicando_via_Github">Publicando via Github</h2>
+
+<p>Agora vamos mostrar como publicar seu site facilmente por meio das páginas do GitHub.</p>
+
+<ol>
+ <li>Primeiro de tudo, <a href="https://github.com">inscreva-se no GitHub</a> e verifique seu e-mail.</li>
+ <li>Em seguida, você precisa <a href="https:/github.com/new">criar um repositório</a> para colocar seus arquivos.</li>
+ <li>Nesta página, na caixa <em>Repository name</em> (nome do repositório), digite username.github.io, onde <em>username</em> é o seu nome de usuário. Então, por exemplo, nosso amigo bobsmith entraria em bobsmith.github.io. Além disso, marque <em>Initialize this repository with a README </em>(inicializar este repositório com um README) e então clique em <em>Create repository</em> (Criar repositório).</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<ol start="4">
+ <li>Arraste e solte o conteúdo da pasta do site no seu repositório e clique em <em>Commit changes</em> (confirmar alterações).</li>
+</ol>
+
+<div class="blockIndicator note">
+<p>Nota: Certifique-se que sua pasta possui um arquivo <code>index.html</code>.</p>
+</div>
+
+<ol start="5">
+ <li>Navegue em seu navegador até <em>username</em>.github.io para ver seu site online. Por exemplo, para o usuário <em>chrisdavidmills</em>, vá para <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p>Nota: Pode levar alguns minutos para seu site ficar online. Se ele não funcionar imediatamente, talvez seja necessário aguardar alguns minutos e tentar novamente.</p>
+</div>
+
+<p>Para aprender mais, consulte a <a href="https://help.github.com/en/categories/github-pages-basics">Ajuda do Github Pages</a> (em inglês).</p>
+
+<h2 id="Leitura_complementar">Leitura complementar</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/o_que_e_um_web_server">O que é um servidor web</a></li>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/What_is_a_domain_name">Entendendo nomes de domínio</a></li>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Quanto_custa_fazer_algo_web">Quanto custa fazer algo na web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Publicar um site</a>: Um bom tutorial da Codecademy que vai um pouco além e mostra algumas técnicas adicionais.</li>
+ <li><a href="https://alignedleft.com/resources/cheap-web-hosting">Hospedagem baratas ou gratuitas de sites estáticos</a>, por Scott Murray, tem algumas idéias úteis sobre serviços disponíveis.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Comp será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
new file mode 100644
index 0000000000..26de56ea06
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
@@ -0,0 +1,164 @@
+---
+title: A web e seus padrões
+slug: Aprender/Getting_started_with_the_web/A_web_e_seus_padrões
+translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
+---
+<p dir="ltr"><font><font>{{learnsidebar}}</font></font></p>
+
+<p dir="ltr">Este artigo fornece algumas informações úteis sobre a Web - como ela surgiu, quais são suas tecnologias padrões, como elas funcionam juntas, porque "desenvolvedor web" é uma grande carreira para escolher e quais são os tipos de boas práticas são coisas que você aprenderá neste curso.</p>
+
+<h2 dir="ltr" id="Breve_histórico_da_web">Breve histórico da web</h2>
+
+<p dir="ltr">Seremos breves, já que existem muitos (mais) artigos detalhados do histórico da web por aí, que mostraremos mais tarde (tente também pesquisar por "histórico da web" no seu mecanismo de pesquisa favorito e veja o que você encontra, se estiver interessado em maiores detalhes.)</p>
+
+<p dir="ltr">No fim da década de 1960, os militares dos Estados Unidos desenvolveram uma rede de comunicação chamada <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. Ela pode ser considerada como precursora da Web, já que trabalhava com <a href="https://pt.wikipedia.org/wiki/Comuta%C3%A7%C3%A3o_de_pacotes">comutação de pacotes</a> e apresentou a primeira implementação do conjuto de protocolos <a href="https://pt.wikipedia.org/wiki/TCP/IP">TCP/IP</a>. Estas duas tecnologias formaram a base da infraestrutura em que a internet foi construída.</p>
+
+<p dir="ltr">Em 1980, Tim Berners-Lee (frequentemente chamado de TimBL) escreveu um programa de notebook chamado <a href="https://pt.wikipedia.org/wiki/ENQUIRE">ENQUIRE</a>, que apresentava o conceito de links entre diferentes nós. Parece familiar?</p>
+
+<p dir="ltr"><font><font>Avance para 1989, e TimBL escreveu </font></font><a href="https://www.w3.org/History/1989/proposal.html"><font><font>Information Management: A Proposal</font></font></a><font><font> and HyperText and CERN; </font><font>essas duas publicações juntas forneceram o pano de fundo de como a web funcionaria. </font><font>Eles receberam uma boa quantidade de juros, o suficiente para convencer os chefes da TimBL a permitir que ele fosse em frente e criasse um sistema de hipertexto global.</font></font></p>
+
+<p dir="ltr"><font><font>No final de 1990, TimBL havia criado todas as coisas necessárias para executar a primeira versão da web - </font></font><a href="/en-US/docs/Web/HTTP"><font><font>HTTP</font></font></a><font><font> , </font></font><a href="/en-US/docs/Web/HTML"><font><font>HTML</font></font></a><font><font> , o primeiro navegador da web, que era chamado de </font></font><a href="https://en.wikipedia.org/wiki/WorldWideWeb"><font><font>WorldWideWeb</font></font></a><font><font> , um servidor HTTP e algumas páginas da web para olhar.</font></font></p>
+
+<p dir="ltr"><font><font>Nos próximos anos que se seguiram, a web explodiu, com vários navegadores sendo lançados, milhares de servidores da web sendo configurados e milhões de páginas da web sendo criadas. </font><font>OK, é um resumo muito simples do que aconteceu, mas prometi a você um breve resumo.</font></font></p>
+
+<p dir="ltr"><font><font>Um último dado significativo para compartilhar é que, em 1994, TimBL fundou o </font></font><a href="https://en.wikipedia.org/wiki/World_Wide_Web_Consortium"><font><font>World Wide Web Consortium</font></font></a><font><font> (W3C), uma organização que reúne representantes de muitas empresas de tecnologia diferentes para trabalharem juntos na criação de especificações de tecnologia da web. </font><font>Depois disso, outras tecnologias surgiram, como </font></font><a href="/en-US/docs/Web/CSS"><font><font>CSS</font></font></a><font><font> e </font></font><a href="/en-US/docs/Web/JavaScript"><font><font>JavaScript</font></font></a><font><font> , e a web começou a se parecer mais com a que conhecemos hoje.</font></font></p>
+
+<h2 dir="ltr" id="Padrões_da_web"><font><font>Padrões da web</font></font></h2>
+
+<p dir="ltr"><strong><font><font>Os padrões da Web</font></font></strong><font><font> são as tecnologias que usamos para construir sites. </font><font>Esses padrões existem como longos documentos técnicos chamados especificações, que detalham exatamente como a tecnologia deve funcionar. </font><font>Esses documentos não são muito úteis para aprender como usar as tecnologias que eles descrevem (é por isso que temos sites como MDN Web Docs), mas em vez disso, devem ser usados ​​por engenheiros de software para implementar essas tecnologias (geralmente em navegadores da web).</font></font></p>
+
+<p dir="ltr"><font><font>Por exemplo, o </font></font><a href="https://html.spec.whatwg.org/multipage/"><font><font>HTML Living Standard</font></font></a><font><font> descreve exatamente como o HTML (todos os elementos HTML e suas APIs associadas e outras tecnologias adjacentes) deve ser implementado.</font></font></p>
+
+<p dir="ltr"><font><font>Os padrões da Web são criados por órgãos de padrões - instituições que convidam grupos de pessoas de diferentes empresas de tecnologia para se reunirem e concordarem sobre como as tecnologias devem funcionar da melhor maneira para cumprir todos os seus casos de uso. </font><font>O W3C é o órgão de padrões da web mais conhecido, mas existem outros como o </font></font><a href="https://whatwg.org/"><font><font>WHATWG</font></font></a><font><font> (que foi responsável pela modernização da linguagem HTML), </font></font><a href="https://www.ecma-international.org/"><font><font>ECMA</font></font></a><font><font> (que publicou o padrão para ECMAScript, no qual o JavaScript é baseado), </font></font><a href="https://www.khronos.org/"><font><font>Khronos</font></font></a><font><font> (que publica tecnologias para gráficos 3D, como WebGL) e outros.</font></font></p>
+
+<h3 dir="ltr" id="Padrões_abertos"><font><font>Padrões "abertos"</font></font></h3>
+
+<p dir="ltr"><font><font>Um dos principais aspectos dos padrões da web, que TimBL e o W3C concordaram desde o início, é que a web (e as tecnologias da web) devem ser livres para contribuir e usar, e não onerada por patentes / licenciamento. </font><font>Portanto, qualquer pessoa pode escrever o código para construir um site de graça e pode contribuir com o processo de criação de padrões, onde as especificações são escritas.</font></font></p>
+
+<p dir="ltr"><font><font>Como as tecnologias da web são criadas abertamente, em colaboração entre muitas empresas diferentes, isso significa que nenhuma empresa consegue controlá-las, o que é realmente bom. </font><font>Você não gostaria que uma única empresa repentinamente decidisse colocar toda a web atrás de um acesso pago, ou lançar uma nova versão de HTML que todos precisam comprar para continuar a fazer sites, ou pior ainda, apenas decidir que não estão mais interessados e apenas desligá-lo.</font></font></p>
+
+<p dir="ltr"><font><font>Isso permite que a web continue sendo um recurso público disponível gratuitamente.</font></font></p>
+
+<h3 dir="ltr" id="Não_quebre_a_web"><font><font>Não quebre a web</font></font></h3>
+
+<p dir="ltr"><font><font>Outra frase que você ouvirá sobre os padrões abertos da web é "não quebre a web" - a ideia é que qualquer nova tecnologia da web introduzida deve ser compatível com o que existia antes (ou seja, os sites antigos ainda continuarão a funcionar ), e compatível com as versões futuras (tecnologias futuras, por sua vez, serão compatíveis com o que temos atualmente). </font><font>Conforme você avança no material de aprendizagem apresentado aqui, você começará a aprender como isso é possível com um projeto muito inteligente e trabalho de implementação.</font></font></p>
+
+<h2 id="Ser_um_desenvolvedor_web_é_bom"><font><font>Ser um desenvolvedor web é bom</font></font></h2>
+
+<p><font><font>A indústria da web é um mercado muito atraente para se entrar, se você estiver procurando por um emprego. </font><font>Números publicados recentes dizem que existem atualmente cerca de 19 milhões de desenvolvedores da web no mundo, e esse número deve mais que dobrar na próxima década. </font><font>E, ao mesmo tempo, há uma escassez de habilidades na indústria - então, que melhor momento para aprender desenvolvimento web?</font></font></p>
+
+<p><font><font>No entanto, nem tudo é diversão e jogos - construir sites é uma proposta mais complicada do que costumava ser, e você terá que investir algum tempo para estudar todas as diferentes tecnologias que precisa usar, todas as técnicas e melhores práticas que você precisa saber e todos os padrões típicos que você deverá implementar. </font><font>Você levará alguns meses para realmente começar a entrar no assunto e, em seguida, precisará continuar aprendendo para que seu conhecimento fique atualizado com todas as novas ferramentas e recursos que aparecem na plataforma da web, e continue praticando e refinando seu ofício.</font></font></p>
+
+<p><em><font><font>A única constante é a mudança.</font></font></em></p>
+
+<p><font><font>Isso parece difícil? </font><font>Não se preocupe - nosso objetivo é fornecer a você tudo o que você precisa saber para começar, e as coisas ficarão mais fáceis. </font><font>Depois de abraçar as constantes mudanças e incertezas da web, você começará a se divertir. </font><font>Como parte da comunidade web, você terá toda uma rede de contatos e materiais úteis para ajudá-lo, e começará a desfrutar das possibilidades criativas que isso traz.</font></font></p>
+
+<p><font><font>Você é um criativo digital agora. </font><font>Aproveite a experiência e o potencial para ganhar a vida.</font></font></p>
+
+<h2 id="Visão_geral_das_tecnologias_modernas_da_web"><font><font>Visão geral das tecnologias modernas da web</font></font></h2>
+
+<p><font><font>Existem várias tecnologias para aprender se você quiser ser um desenvolvedor front-end da web. </font><font>Nesta seção, iremos descrevê-los brevemente. </font><font>Para uma explicação mais detalhada de como alguns deles funcionam juntos, leia nosso artigo </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works"><font><font>Como funciona a web</font></font></a><font><font> .</font></font></p>
+
+<h3 id="Navegadores"><font><font>Navegadores</font></font></h3>
+
+<p><font><font>Provavelmente, você está lendo essas palavras dentro de um navegador da Web neste exato momento (a menos que as tenha imprimido ou esteja usando tecnologia de assistência, como um leitor de tela para ler para você). </font><font>Os navegadores da web são os programas de software que as pessoas usam para consumir a web e incluem </font></font><a href="https://www.mozilla.org/en-US/firefox/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="https://www.opera.com/"><font><font>Opera</font></font></a><font><font> , </font></font><a href="https://www.apple.com/safari/"><font><font>Safari</font></font></a><font><font> e </font></font><a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font><font>Edge</font></font></a><font><font> .</font></font></p>
+
+<h3 id="HTTP"><font><font>HTTP</font></font></h3>
+
+<p><font><font>O protocolo de transferência de hipertexto, ou </font></font><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP"><font><font>HTTP</font></font></a><font><font> , é um protocolo de mensagens que permite aos navegadores da web se comunicarem com os servidores da web (onde os sites da web são armazenados). </font><font>Uma conversa típica é algo como</font></font></p>
+
+<pre class="notranslate">"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+
+"Sure thing web browser — here you go"
+
+[Downloads files and renders web page]</pre>
+
+<p><font><font>A sintaxe real para mensagens HTTP (chamadas de solicitações e respostas) não é legível por humanos, mas isso lhe dá uma ideia básica.</font></font></p>
+
+<h3 id="HTML_CSS_e_JavaScript"><font><font>HTML, CSS e JavaScript</font></font></h3>
+
+<p><a href="/en-US/docs/Web/HTML"><font><font>HTML</font></font></a><font><font> , </font></font><a href="/en-US/docs/Web/CSS"><font><font>CSS</font></font></a><font><font> e </font></font><a href="/en-US/docs/Web/JavaScript"><font><font>JavaScript</font></font></a><font><font> são as três tecnologias principais que você usará para construir um site:</font></font></p>
+
+<ul>
+ <li>
+  <p><font><font>A linguagem de marcação de hipertexto, ou </font></font><strong><font><font>HTML</font></font></strong><font><font> , é uma linguagem de marcação que consiste em diferentes elementos nos quais você pode agrupar (marcar) o conteúdo para dar-lhe significado (semântica) e estrutura. </font><font>HTML simples se parece com isto:</font></font></p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;This is a top-level heading&lt;/h1&gt;
+
+&lt;p&gt;This is a paragraph of text.&lt;/p&gt;
+
+&lt;img src="cat.jpg" alt="A picture of my cat"&gt;</pre>
+
+  <p><font><font>Se adotássemos uma analogia com a construção de uma casa, o HTML seria como as fundações e paredes da casa, que lhe dão estrutura e a mantém unida.</font></font></p>
+ </li>
+ <li>
+  <p><font><font>Cascading Style Sheets ( </font></font><strong><font><font>CSS</font></font></strong><font><font> ) é uma linguagem baseada em regras usada para aplicar estilos ao seu HTML, por exemplo, definindo texto e cores de fundo, adicionando bordas, animando coisas ou fazendo o layout de uma página de uma determinada maneira. </font><font>Como um exemplo simples, o código a seguir tornaria nosso parágrafo HTML em vermelho:</font></font></p>
+
+  <pre class="brush: css notranslate">p  {
+  color: red;
+}</pre>
+
+  <p><font><font>Na analogia da casa, CSS é como a pintura, o papel de parede, os tapetes e as pinturas que você usaria para deixar a casa bonita.</font></font></p>
+ </li>
+ <li>
+  <p><strong><font><font>JavaScript</font></font></strong><font><font> é a linguagem de programação que usamos para adicionar interatividade aos sites, desde a troca de estilo dinâmico até a obtenção de atualizações do servidor, até gráficos 3D complexos. </font><font>O seguinte JavaScript simples armazenará uma referência ao nosso parágrafo na memória e mudará o texto dentro dele:</font></font></p>
+
+  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+pElem.textContent =  'We changed the text!';</pre>
+
+  <p><font><font>Na analogia da casa, o JavaScript é como o fogão, a TV, o microondas ou o secador de cabelo - as coisas que fornecem funcionalidade útil à sua casa</font></font></p>
+ </li>
+</ul>
+
+<h3 id="Ferramental"><font><font>Ferramental</font></font></h3>
+
+<p><font><font>Depois de aprender as tecnologias "brutas" que podem ser usadas para construir páginas da web (como HTML, CSS e JavaScript), você logo começará a encontrar várias ferramentas que podem ser usadas para tornar seu trabalho mais fácil ou mais eficiente. </font><font>Exemplos incluem:</font></font></p>
+
+<ul>
+ <li><font><font>As </font></font><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"><font><font>ferramentas de desenvolvedor</font></font></a><font><font> dentro de navegadores modernos que podem ser usadas para depurar seu código.</font></font></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing"><font><font>Ferramentas de teste</font></font></a><font><font> que podem ser usadas para executar testes para mostrar se o seu código está se comportando como você deseja.</font></font></li>
+ <li><font><font>Bibliotecas e estruturas construídas com base em JavaScript que permitem a você construir certos tipos de site da Web com muito mais rapidez e eficácia.</font></font></li>
+ <li><font><font>Os chamados "Linters", que pegam um conjunto de regras, olham para o seu código e destacam os lugares onde você não seguiu as regras corretamente.</font></font></li>
+ <li><font><font>Minificadores, que removem todos os espaços em branco dos arquivos de código para torná-los menores e, portanto, fazer o download do servidor mais rapidamente.</font></font></li>
+</ul>
+
+<h3 id="Linguagens_e_estruturas_do_lado_do_servidor"><font><font>Linguagens e estruturas do lado do servidor</font></font></h3>
+
+<p><font><font>HTML, CSS e JavaScript são linguagens de front-end (ou cliente), o que significa que são executadas pelo navegador para produzir um front-end de site que seus usuários possam usar.</font></font></p>
+
+<p><font><font>Há outra classe de linguagens chamadas linguagens de back-end (ou do lado do servidor), o que significa que são executadas no servidor antes de o resultado ser enviado ao navegador para exibição. </font><font>Um uso típico para uma linguagem do lado do servidor é obter alguns dados de um banco de dados e gerar algum HTML para conter os dados, antes de enviar o HTML ao navegador para exibi-lo ao usuário.</font></font></p>
+
+<p><font><font>Linguagens de servidor de exemplo incluem ASP.NET, Python, PHP e NodeJS.</font></font></p>
+
+<h2 id="Melhores_práticas_da_web"><font><font>Melhores práticas da web</font></font></h2>
+
+<p><font><font>Falamos brevemente sobre as tecnologias que você usará para construir sites. </font><font>Agora, vamos discutir as melhores práticas que você deve empregar para garantir que está usando essas tecnologias da melhor maneira possível.</font></font></p>
+
+<p><font><font>Ao fazer o desenvolvimento da web, a principal causa de incerteza vem do fato de que você não sabe qual combinação de tecnologia cada usuário usará para visualizar seu site:</font></font></p>
+
+<ul>
+ <li><font><font>O usuário 1 pode estar olhando para ele em um iPhone, com uma tela pequena e estreita.</font></font></li>
+ <li><font><font>O usuário 2 pode estar olhando para ele em um laptop Windows com um monitor widescreen conectado a ele.</font></font></li>
+ <li><font><font>O usuário 3 pode ser cego e usar um leitor de tela para ler a página da web para eles.</font></font></li>
+ <li><font><font>O usuário 4 pode estar usando uma máquina de desktop muito antiga que não pode executar navegadores modernos.</font></font></li>
+</ul>
+
+<p><font><font>Como você não sabe exatamente o que seus usuários usarão, você precisa fazer um design defensivo - tornar seu site o mais flexível possível, de modo que todos os usuários acima possam usá-lo, mesmo que nem todos recebam o mesmo experiência. </font><font>Resumindo, estamos tentando fazer a web funcionar para todos, tanto quanto possível.</font></font></p>
+
+<p><font><font>Você encontrará os conceitos abaixo em algum momento de seus estudos.</font></font></p>
+
+<ul>
+ <li><strong><font><font>A compatibilidade entre navegadores</font></font></strong><font><font> é a prática de tentar garantir que sua página da web funcione em tantos dispositivos quanto possível. </font><font>Isso inclui o uso de tecnologias que todos os navegadores suportam, proporcionando melhores experiências aos navegadores que podem lidar com elas (aprimoramento progressivo) e / ou escrever código para que ele volte a uma experiência mais simples, mas ainda utilizável em navegadores mais antigos (degradação normal). </font><font>Também envolve muitos testes para ver se algo falha em determinados navegadores e, em seguida, mais trabalho para corrigir essas falhas.</font></font></li>
+ <li><strong><font><font>Web design responsivo</font></font></strong><font><font> é a prática de tornar sua funcionalidade e layouts flexíveis para que eles possam se adaptar automaticamente a diferentes navegadores. </font><font>Um exemplo óbvio é um site que é apresentado de uma maneira em um navegador widescreen na área de trabalho, mas é exibido como um layout mais compacto de coluna única em navegadores de telefones celulares. </font><font>Tente ajustar a largura da janela do navegador agora e veja o que acontece.</font></font></li>
+ <li><strong><font><font>Desempenho</font></font></strong><font><font> significa carregar os sites o mais rápido possível, mas também torná-los intuitivos e fáceis de usar, para que os usuários não fiquem frustrados e vão para outro lugar.</font></font></li>
+ <li><strong><font><font>Acessibilidade</font></font></strong><font><font> significa tornar seus sites utilizáveis ​​por tantos tipos diferentes de pessoas quanto possível (conceitos relacionados são diversidade e inclusão e design inclusivo). </font><font>Isso inclui pessoas com deficiências visuais, auditivas, cognitivas ou físicas. </font><font>Também vai além das pessoas com deficiência - que tal pessoas jovens ou velhas, pessoas de diferentes culturas, pessoas que usam dispositivos móveis ou pessoas com conexões de rede lentas ou não confiáveis?</font></font></li>
+ <li><strong><font><font>Internacionalização</font></font></strong><font><font> significa tornar os sites utilizáveis ​​por pessoas de diferentes culturas, que falam línguas diferentes com a sua. </font><font>Existem considerações técnicas aqui (como alterar seu layout para que ainda funcione bem para linguagens da direita para a esquerda ou até mesmo verticais) e humanas (como usar uma linguagem simples e sem gíria para que as pessoas que têm sua linguagem já que o segundo ou terceiro idioma deles têm mais probabilidade de entender seu texto).</font></font></li>
+ <li><strong><font><font>Privacidade e segurança</font></font></strong><font><font> . </font><font>Esses dois conceitos estão relacionados, mas são diferentes. </font><font>Privacidade refere-se a permitir que as pessoas façam seus negócios em particular e não espioná-las ou coletar mais dados do que você absolutamente precisa. </font><font>Segurança refere-se à construção de seu site de maneira segura, de forma que usuários mal-intencionados não possam roubar informações contidas nele de você ou de seus usuários.</font></font></li>
+</ul>
+
+<h2 dir="ltr" id="Veja_também"><font><font>Veja também</font></font></h2>
+
+<ul dir="ltr">
+ <li><a href="https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web"><font><font>História da World Wide Web</font></font></a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work"><font><font>Como funciona a internet?</font></font></a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..62ad3bd27d
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,111 @@
+---
+title: Com será o seu site?
+slug: Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer
+tags:
+  - Aprender
+  - Ativos
+  - Composição
+  - Conteúdo
+  - Descontinuado
+  - Design
+  - Fontes
+  - Iniciante
+  - Passo a passo
+  - Simples
+  - 'l10:prioridade'
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Como será o seu site?</em> discute o trabalho de planejamento e design que você precisa fazer para o seu site antes de escrever o código, incluindo "Quais informações meu site oferece?", "Quais fontes e cores eu quero?" e ​​"O que meu site faz?"</p>
+</div>
+
+<h2 id="Primeiramente_planejamento">Primeiramente: planejamento</h2>
+
+<p>Antes que você faça qualquer coisa, você precisa de algumas ideias. O que seu site realmente vai fazer? Um site pode fazer praticamente tudo, mas primeiro você deve manter as coisas em um nível simples. Nós vamos começar criando um site simples com um cabeçalho, uma imagem e alguns parágrafos.</p>
+
+<p>Para começar, você deve responder às seguintes questões:</p>
+
+<ol>
+ <li><strong>Sobre o que é seu site? </strong>Você gosta de cachorros, Nova Iorque ou Pacman?</li>
+ <li><strong>Que informação você está apresentando sobre o assunto? </strong>Escreva um título e alguns parágrafos e pense em uma imagem para ilustrar sua página.</li>
+ <li><strong>Como será seu site, </strong>em termos simples. Qual é a cor de fundo? Qual é o tipo de fonte apropriado: formal, desenhado, negrito e gritante, sutil?</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Projetos complexos precisam de guias detalhados que abordam todos os detalhes de cores, fontes, espaçamento entre itens de uma página, estilo de escrita apropriado, e por aí vai. Isso é denominado um guia de design, sistema de design ou manual da marca, e você pode ver um exemplo no <a href="https://design.firefox.com/photon/">Sistema de Design do Firefox Photon</a> (em inglês).</p>
+</div>
+
+<h2 id="Rascunhando_seu_design">Rascunhando seu design</h2>
+
+<p>Em seguida, pegue papel e caneta e faça um rascunho de como você deseja que seu site seja. Para sua primeira página simples, não há muito o que rascunhar, mas você deve criar o hábito desde o começo. Realmente ajuda — você não precisa ser um Van Gogh!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Mesmo em sites reais e complexos, os times de design geralmente começam pelo rascunho em papel e depois constroem a versão digital usando um editor gráfico ou tecnologias da web.</p>
+
+<p>Os times de web geralmente incluem um designer gráfico e um designer de {{Glossary("UX", "experiencia do usuário")}} (UX). Designers gráficos, obviamente, constroem a parte visual do site. UX designers tem uma função de certa forma mais abstrata, direcionando como os usuários vão interagir e experimentar o site.</p>
+</div>
+
+<h2 id="Construindo_seus_ativos">Construindo seus ativos</h2>
+
+<p>Nesse ponto, é bom começar juntando o conteúdo que vai eventualmente aparecer no site.</p>
+
+<h3 id="Texto">Texto</h3>
+
+<p>Você deve ter seu título e parágrafos desde antes. Mantenha eles por perto.</p>
+
+<h3 id="Cor_do_tema">Cor do tema</h3>
+
+<p>Para escolher a cor, vá ao <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Colors/seletor_de_cores">Seletor de Cores</a> e escolha a cor que preferir. Quando escolher a cor, você verá uma sequência de seis caracteres, como <code>#660066</code>. Isso é chamado um <em>código hex(adecimal)</em>, e representa sua cor. Copie esse código em algum lugar seguro por enquanto.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Imagens">Imagens</h3>
+
+<p>Para escolher uma imagens, vá no <a href="https://www.google.com/imghp?gws_rd=ssl">Google Imagens</a> e procure por algo que se encaixe no seu site.</p>
+
+<ol>
+ <li>Quando você achar a imagem que você quer, clique nela para obter uma visão ampliada dela.</li>
+ <li>Clique com o botão direito na imagem (Ctrl + click no Mac) escolha <em>Salvar imagem como...</em> e escolha um local seguro para salvar sua imagem. Como alternativa, copie o endereço web da imagem da barra de endereço do navegador, para uso posterior.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16599/updated-google-images.png" style="border-style: solid; border-width: 1px; height: 636px; width: 750px;"></p>
+
+<p>Observe que a maioria das imagens na Web, inclusive no Imagens do Google, é protegida por direitos autorais. Para reduzir a probabilidade de violar direitos autorais, você pode usar o filtro de licenças do Google. Clique no botão <em>Ferramentas</em> e, em seguida, na opção <em>Direitos de uso</em> resultante que aparece abaixo. Você deve escolher uma opção como <em>Marcada para reutilização</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; height: 401px; width: 750px;"></p>
+
+<h3 id="Fonte">Fonte</h3>
+
+<p>Para escolher uma fonte:</p>
+
+<ol>
+ <li>Vá no <a href="http://www.google.com/fonts">Google Fontes</a> e role a lista até que você ache uma que você goste. Você também pode usar os controles à direita para filtrar os resultados.</li>
+ <li>Clique no ícone "mais" (Adicionar a) ao lado da fonte desejada.</li>
+ <li>Clique no botão "* Família Selecionada" no painel na parte inferior da página ("*" depende de quantas fontes você selecionou).</li>
+ <li>Na caixa pop-up, você pode ver e copiar as linhas de código que o Google oferece em seu editor de texto para salvar posteriormente.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="border-style: solid; border-width: 1px; height: 1016px; width: 1697px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="border-style: solid; border-width: 1px; height: 714px; width: 705px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Com será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Javascript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..e693b6fed8
--- /dev/null
+++ b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,135 @@
+---
+title: Dicas para criar páginas HTML de carregamento rápido
+slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido
+tags:
+  - Performance
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>Estas dicas são baseadas em conhecimento comum e experimentação.</p>
+<p>Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.</p>
+<p>Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.</p>
+<h2 id="Dicas" name="Dicas">Dicas</h2>
+<h3 id="Reduza_o_peso_da_página" name="Reduza_o_peso_da_página">Reduza o peso da página</h3>
+<p>O peso da página é, de longe, o fator mais importante na performance de seu carregamento.</p>
+<p>Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS <em>inline</em> para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.</p>
+<p>Ferramentas como <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.</p>
+<h3 id="Minimize_o_número_de_arquivos" name="Minimize_o_número_de_arquivos">Minimize o número de arquivos</h3>
+<p>Reduzir o número de arquivos referenciados por uma página diminui o número de conexões <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> requeridas para realizar o download da página.</p>
+<p>Dependendo das configurações de cache do <em>browser</em>, este pode enviar uma requisição <code>If-Modified-Since</code> ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.</p>
+<p>Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.</p>
+<p>Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um <em>sprite</em> de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e <em>caching</em> de uma única imagem devem ajudar a reduzir o tempo de carregamento.</p>
+<p>Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o <em>browser</em> deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.</p>
+<h3 id="Reduza_pesquisa_de_domínio" name="Reduza_pesquisa_de_domínio">Reduza pesquisa de domínio</h3>
+<p>Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.</p>
+<p>Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.</p>
+<h3 id="Conteúdo_em_cache_reutilizado" name="Conteúdo_em_cache_reutilizado">Conteúdo em cache reutilizado</h3>
+<p>Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.</p>
+<p>Em especial, atente ao cabeçalho <code>Last-Modified</code>. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho <code>Last-Modified</code> a páginas estáticas (p. ex.: <code>.html</code>, <code>.css</code>), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:<code>.php</code>, <code>.aspx</code>), isso não pode ser feito, e o cabeçalho não é enviado.</p>
+<p>Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.</p>
+<p>Mais informações:</p>
+<ol>
+  <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">Get HTTP Condicional para Hackers RSS</a></li>
+  <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+  <li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">Sobre o Last-Modified HTTP e ETag</a></li>
+</ol>
+<h3 id="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada" name="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada">Estabeleça a ordem dos componentes da página de forma otimizada</h3>
+<p>Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.</p>
+<p>Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.</p>
+<h3 id="Reduza_o_número_de_scripts" name="Reduza_o_número_de_scripts">Reduza o número de scripts <em>inline</em></h3>
+<p>Scripts <em>inline</em> podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de <em>parsing</em> está em andamento. Reduzir o número de scripts <em>inline</em> no geral e reduzir o uso de <code>document.write()</code> para a saída de conteúdo pode melhorar o carregamento da página. Use métodos <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em <code>document.write()</code>.</p>
+<h3 id="Use_CSS_moderno_e_marcação_validada" name="Use_CSS_moderno_e_marcação_validada">Use CSS moderno e marcação validada</h3>
+<p>O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados -- que "custam" muito mais do que o texto estilizado com CSS.</p>
+<p>Usar marcações validadas tem outras vantagens. Primeiro, <em>browsers</em> não precisarão realizar correção de erros durante o <em>parsing</em> de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).</p>
+<p>Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.</p>
+<h3 id="Divida_seu_conteúdo" name="Divida_seu_conteúdo">Divida seu conteúdo</h3>
+<p>Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">layout multi-colunas CSS3</a> ou <a href="/pt-BR/docs/Usando_caixas_flexiveis_css" title="pt-BR/docs/Usando_caixas_flexiveis_css">layout de caixas flexíveis CSS3</a>, devem ser utilizadas ao invés disso.</p>
+<p>Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.</p>
+<p>Ao invés de realizar aninhamentos profundos como:</p>
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+<p>use tabelas não-aninhadas ou divs, como em</p>
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+</pre>
+<p>Veja também: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">Especificações do layout multi-colunas CSS3</a> e <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">layout de caixas flexíveis CSS3</a></p>
+<h3 id="Especifique_tamanhos_para_imagens_e_tabelas" name="Especifique_tamanhos_para_imagens_e_tabelas">Especifique tamanhos para imagens e tabelas</h3>
+<p>Se o <em>browser</em> puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, <code>height</code> e <code>width</code> devem ser especificadas para imagens, sempre que possível.</p>
+<p>Tabelas devem usar a combinação CSS selector:property:</p>
+<pre>  table-layout: fixed;
+</pre>
+<p>e devem especificar as larguras das colunas usando as tags HTML <code>COL</code> e <code>COLGROUP</code>.</p>
+<h3 id="Escolha_bem_seus_requisitos_de_agente_de_usuário" name="Escolha_bem_seus_requisitos_de_agente_de_usuário">Escolha bem seus requisitos de agente de usuário</h3>
+<p>Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os <em>browsers</em>, especialmente nos obsoletos.</p>
+<p>Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os <em>browsers</em> modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.</p>
+<p>Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em <em>browsers</em>.</p>
+<h2 id="Exemplo_de_estrutura_de_página" name="Exemplo_de_estrutura_de_página">Exemplo de estrutura de página</h2>
+<p>· <code>HTML</code></p>
+<dl>
+  <dd>
+    · <code>HEAD</code></dd>
+</dl>
+<dl>
+  <dd>
+    <dl>
+      <dd>
+        · <code>LINK </code>...<br>
+        Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd>
+    </dl>
+  </dd>
+</dl>
+<dl>
+  <dd>
+    <dl>
+      <dd>
+        · <code>SCRIPT </code>...<br>
+        Arquivos JavaScript para funções <strong>requeridas</strong> durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.</dd>
+      <dd>
+        Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.</dd>
+    </dl>
+  </dd>
+</dl>
+<dl>
+  <dd>
+    · <code>BODY</code></dd>
+  <dd>
+    · Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.</dd>
+</dl>
+<dl>
+  <dd>
+    <dl>
+      <dd>
+        · <code>SCRIPT </code>...<br>
+        Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.</dd>
+      <dd>
+        Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd>
+      <dd>
+        Se uma ou mais imagens forem usadas para efeitos de <em>rollover</em>, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.</dd>
+    </dl>
+  </dd>
+</dl>
+<h2 id="Use_async_and_defer_se_possível" name="Use_async_and_defer_se_possível">Use async and defer, se possível</h2>
+<p>Faça com que scripts JavaScript sejam compatíveis tanto com <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> como <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> e use <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sempre que possível, especialmente se você tiver múltiplas tags de script.</p>
+<p>Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o <em>browser</em> não renderizará nada que estiver após as tags de script sem esses atributos.</p>
+<p>Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os <em>browsers</em>. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.</p>
+<h2 id="Links_Relacionados" name="Links_Relacionados">Links Relacionados</h2>
+<ul>
+  <li>Livro: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" por Andy King</a></li>
+  <li>O excelente e muito completo <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Melhores Práticas para Acelerar Seu Web Site</a> (Yahoo!)</li>
+  <li>Ferramentas para analisar e otimizar a performance: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed</a></li>
+</ul>
+<div class="originaldocinfo">
+  <h2 id="Informações_do_Documento_Original" name="Informações_do_Documento_Original">Informações do Documento Original</h2>
+  <ul>
+    <li>Autor(es): Bob Clary, Evangelista de Tecnologia, Netscape Communications</li>
+    <li>Última Data de Atualização: Publicado em 04 Abr 2003</li>
+    <li>Informações de Copyright: Copyright © 2001-2003 Netscape. Todos os direitos reservados.</li>
+    <li>Nota: Este artigo reeditado foi originalmente parte do site DevEdge.</li>
+  </ul>
+</div>
+<p> </p>
diff --git a/files/pt-br/learn/html/howto/index.html b/files/pt-br/learn/html/howto/index.html
new file mode 100644
index 0000000000..4d64f7d792
--- /dev/null
+++ b/files/pt-br/learn/html/howto/index.html
@@ -0,0 +1,150 @@
+---
+title: Use HTML para resolver problemas comuns
+slug: Aprender/HTML/como-fazer
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Os links a seguir apontam para soluções de problemas comuns que você precisará resolver utilizando HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Estrutura_Básica">Estrutura Básica</h3>
+
+<p>A aplicação mais básica de HTML é na estrutura de um documento. Se você está começando no HTML, deve começar por aqui.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">Como criar um documento básico HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">Como separar uma página web em seções lógicas</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">Como configurar uma estrutura adequada de cabeçalhos e parágrafos</a></li>
+</ul>
+
+<h3 id="Semântica_básica_em_nível_de_texto">Semântica básica em nível de texto</h3>
+
+<p>O HTML se especializou em fornecer informação semântica para um documento, portanto o HTML responde muitas questões que você talvez tenha sobre a melhor maneira de passar sua mensagem em um documento.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Como criar uma lista de itens com HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Como destacar ou enfatizar conteúdo</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Como indicar que um texto é importante</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Como mostrar código de computador com HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">Como adicionar anotações em imagens e figuras</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Como assinalar abreviaturas e torná-las inteligíveis</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">Como adicionar citações em páginas web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Como definir termos com HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hiperlinks">Hiperlinks</h3>
+
+<p>Uma das principais atribuições do HTML é tornar a navegação mais fácil com {{Glossary("hyperlink", "hiperlinks")}}, que podem ser usados de diferentes formas:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Como criar um hiperlink</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Como criar um menu de navegação com HTML </a></li>
+</ul>
+
+<h3 id="Imagens_multimídia">Imagens &amp; multimídia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Como adicionar imagens em uma página web</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Como adicionar conteúdo de vídeo em uma página web</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Como adicionar conteúdo de áudio em uma página web</a></li>
+</ul>
+
+<h3 id="Scripts_estilos">Scripts &amp; estilos</h3>
+
+<p>O HTML só configura a estrutura do documento. Para resolver problemas de apresentação, use o {{glossary("CSS")}} ou use scripts para tornar sua página interativa.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Como usar CSS em uma página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Como usar JavaScript em uma página web</a></li>
+</ul>
+
+<h3 id="Conteúdo_embutido">Conteúdo embutido</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Como embutir uma página web dentro de outra página web</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">Como adicionar conteúdo em Flash dentro de uma página</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Problemas_incomuns_ou_avançados">Problemas incomuns ou avançados</h2>
+
+<p>Além do básico, o HTML é muito rico e oferece recursos avançados para resolver problemas complexos. Estes artigos lhe ajudam a lidar com casos de uso menos comuns que você possa encontrar:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Formulários">Formulários</h3>
+
+<p>Formulários são uma estrutura complexa em HTML, criada para enviar dados de uma página web para um servidor web. Nós lhe encorajamos a conhecer nosso <a href="/en-US/docs/Web/Guide/HTML/Forms">guia completo</a>. Eis os tópicos onde você deve começar:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Como criar um formulário Web simples</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Como estruturar um formulário Web</a></li>
+</ul>
+
+<h3 id="Informação_tabular">Informação tabular</h3>
+
+<p>Algumas informações, chamadas de dados tabulares, precisam ser organizadas em tabelas com colunas e linhas. Esta é uma das estruturas HTML mais complexas, e dominá-la não é fácil:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Como criar uma planilha de dados</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Como tornar as tabelas HTML acessíveis</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Como otimizar a renderização de tabelas HTML</a></li>
+</ul>
+
+<h3 id="Representação_de_dados">Representação de dados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Como representar valores numéricos em HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Como usar atributos de dados</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Como associar conteúdo legível por humanos com estruturas arbitrárias de dados</a></li>
+</ul>
+
+<h3 id="Interatividade">Interatividade</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Como criar conteúdo recolhível em HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Como adicionar menus contextuais em uma página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Como criar caixas de diálogo em HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Semântica_avançada_de_texto">Semântica avançada de texto</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Como controlar quebras de linha em HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Como destacar mudanças (texto adicionado ou removido)</a></li>
+</ul>
+
+<h3 id="Imagens_multimídia_avançados">Imagens &amp; multimídia avançados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Como adicionar imagens responsivas em uma página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Como adicionar imagens vetoriais em uma página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Como adicionar um mapa de links em uma imagem</a></li>
+</ul>
+
+<h3 id="Internacionalização">Internacionalização</h3>
+
+<p>HTML não é unilíngue. A linguagem fornece ferramentas para lidar com problemas comuns de internacionalização.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Como adicionar múltiplos idiomas em uma única página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Como lidar com caracteres ruby em japonês</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Como mostrar data e hora em HTML</a></li>
+</ul>
+
+<h3 id="Performance">Performance</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">Como criar páginas HTML que carregam rápido</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/pt-br/learn/html/howto/use_data_attributes/index.html b/files/pt-br/learn/html/howto/use_data_attributes/index.html
new file mode 100644
index 0000000000..20daf02206
--- /dev/null
+++ b/files/pt-br/learn/html/howto/use_data_attributes/index.html
@@ -0,0 +1,72 @@
+---
+title: Utilizando data attributes
+slug: Web/Guide/HTML/Using_data_attributes
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<p>O <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido.  <a href="/en-US/docs/Web/HTML/Global_attributes#data-*">Atributos data-* </a>nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como <a href="/en-US/docs/Web/API/Element.classList">classList</a>, atributos fora do padrão, propriedades extras no DOM ou o método depreciado <a href="/en-US/docs/Web/API/Node.setUserData">setUserData</a>.</p>
+
+<h2 id="Sintaxe_HTML">Sintaxe HTML</h2>
+
+<p>A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com <code>data-</code> é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Acesso_no_JavaScript">Acesso no JavaScript</h2>
+
+<p>Ler os valores destes atributos via <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> é muito simples também. Você pode lê-los usando {{domxref("Element.getAttribute", "getAttribute()")}} com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um {{domxref("DOMStringMap")}} pode ser lido através da propriedade {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Para obter o atributo data através do objeto <code>dataset</code>, acesse a propriedade utilizando a parte do nome do atributo após o prefixo <code>data-</code> (note que o hífen é convertido para camelCase).</p>
+
+<pre class="brush: js">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição <code>article.dataset.columns = 5</code> iria alterar esse atributo para "5".</p>
+
+<h2 id="Acesso_no_CSS">Acesso no CSS</h2>
+
+<p>Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">conteúdo gerado</a> em CSS com a função {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Pode-se também usar os <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">seletores de atributos</a> em CSS para alterar estilos de acordo com o atributo data:</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>Pode-se tudo isso em funcionamento neste <a href="http://jsbin.com/ujiday/2/edit">exemplo JSBin</a>.</p>
+
+<p>Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">esta tela</a> para um exemplo utilizando conteúdo gerado e transições CSS (<a href="http://jsbin.com/atawaz/3/edit">exemplo JSBin</a>).</p>
+
+<p><span style="line-height: 16.7999992370605px;">Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.</span></p>
+
+<h2 id="Issues">Issues</h2>
+
+<p>Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data. </p>
+
+<p>Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores <a href="http://caniuse.com/#feat=dataset">não suportam <code>dataset</code></a>. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de {{domxref("Element.getAttribute", "getAttribute()")}} . E ainda, a <a href="http://jsperf.com/data-dataset">performance de leitura dos atributos data</a> é ruim, comparada com o armazenamento em um data warehouse JS. O uso de <code>dataset</code> é até pior que a leitura dos dados com <code>getAttribute()</code>.</p>
+
+<p>Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.</p>
+
+<p>No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Este artigo é uma adaptação de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Usando atributos data em JavaScript e CSS no hacks.mozilla.org</a>.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">Como usar atributos data em HTML5</a> (Sitepoint)</li>
+</ul>
diff --git a/files/pt-br/learn/html/index.html b/files/pt-br/learn/html/index.html
new file mode 100644
index 0000000000..498ba9ab01
--- /dev/null
+++ b/files/pt-br/learn/html/index.html
@@ -0,0 +1,54 @@
+---
+title: Estruturando a web com HTML
+slug: Aprender/HTML
+tags:
+  - Aprender
+  - Guía
+  - HTML
+  - Iniciante
+  - Introdução
+  - Tópico
+translation_of: Learn/HTML
+---
+<p class="summary">{{LearnSidebar}}</p>
+
+<p class="summary">Para construir websites, você deve conhecer sobre {{Glossary('HTML')}} — a tecnologia fundamental usada para definir a estrutura de uma página web. HTML é usado para especificar se o conteúdo da web deve ser reconhecido como um parágrafo, uma lista, um título, um link, uma imagem, um visualizador multimídia, um formulário ou um dos muitos outros elementos disponíveis ou até mesmo um novo elemento definido por você.</p>
+
+<h2 id="Percurso_de_aprendizagem">Percurso de aprendizagem</h2>
+
+<p>Você deve, preferencialmente, iniciar sua jornada aprendendo HTML. Comece lendo <a href="/pt-BR/docs/HTML/Introduction">Introdução ao HTML</a>. Você pode então passar a aprender sobre tópicos mais avançados, tais como:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS">CSS </a> e como usá-lo para estilizar o HTML (como por exemplo alterar o tamanho e a fonte usados, adicionar bordas e sombras, definir o layout da sua página com várias colunas, adicionar animações e outros efeitos visuais).</li>
+ <li><a href="/pt-BR/docs/Web/JavaScript">JavaScript</a> e como usá-lo para adicionar funcionalidade dinâmica para páginas da web (como por exemplo encontrar sua localização e exibí-la em um mapa, fazer com que elementos da interface gráfica apareçam/desapareçam quando se pressiona um botão, salvar os dados do usuário localmente em seus computadores e muito mais).</li>
+</ul>
+
+<p>Antes de iniciar este tópico, você deve pelo menos ter uma familiaridade básica com o uso de computadores e com a web (por exemplo: apenas olhando para ele, consumindo o conteúdo). Você deve ter um ambiente básico de trabalho configurado como detalhado em <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a> e entender como criar e gerenciar arquivos, como detalhado em <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a> — ambos fazem parte do nosso módulo para iniciantes <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web"> Introdução à Web</a>.</p>
+
+<p>Recomenda-se que você complete o módulo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web">Introdução à Web</a> antes de tentar este tópico, mas isto não é absolutamente necessário; muito do que é abordado no artigo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a> é também abordado no nosso módulo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a>, embora com muito mais detalhes.</p>
+
+<h2 id="Módulos">Módulos</h2>
+
+<p>Este tópico contém os seguintes módulos, em uma ordem sugerida para trabalhar com eles. Você deve definitivamente começar com o primeiro módulo.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/HTML/Introduction">Introdução ao HTML </a></dt>
+ <dd>Este módulo define o cenário, introduzindo você a conceitos e sintaxe importantes, procurando aplicar HTML ao texto, como criar hiperlinks e como usar HTML para estruturar uma página da web.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Multimedia_and_embedding">Multimídia e incorporação </a></dt>
+ <dd>Este módulo explora como usar HTML para incluir multimídia em suas páginas web, incluindo as diferentes formas que as imagens podem ser inseridas e como incorporar vídeo, áudio e até mesmo outras páginas inteiras.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Tables">Tabelas HTML</a></dt>
+ <dd>Representar dados tabulares em uma página da web de maneira compreensível e {{glossary("Accessibility", "acessível")}} pode ser um desafio. Este módulo abrange a marcação básica de tabelas, além de outros recursos mais complexos, tais como a implementação de legendas e resumos.</dd>
+</dl>
+
+<h2 id="Resolvendo_problemas_comuns_com_HTML">Resolvendo problemas comuns com HTML</h2>
+
+<p><a href="/pt-BR/docs/Aprender/HTML/como-fazer">Usar HTML para resolver problemas comuns</a> fornece links para seções com conteúdos que explicam como usar HTML para resolver problemas muito comuns ao criar uma página da web: lidar com títulos, adicionar imagens ou vídeos, enfatizar conteúdo, criar um formulário básico, etc.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Forms">Formulários HTML</a></dt>
+ <dd><span class="tlid-translation translation" lang="pt"><span title="">Este módulo fornece uma série de artigos que ajudarão você a dominar o essencial dos formulários da web.</span> <span title="">Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário.</span> <span title="">No entanto, por razões históricas e técnicas, nem sempre é óbvio como usá-las em todo o seu potencial.</span> <span title="">Abordaremos todos os aspectos essenciais dos formulários da Web, incluindo marcação de sua estrutura HTML, controles de estilo, validação de dados e envio de dados ao servidor.</span></span></dd>
+ <dt><a href="/pt-BR/docs/Web/HTML">HTML (Linguagem de Marcação de HiperTexto)</a></dt>
+ <dd>O principal ponto de entrada para a documentação HTML no MDN, incluindo referências detalhadas de elementos e atributos — se você quiser saber quais atributos um elemento possui ou quais valores tem um atributo, por exemplo, este é um ótimo lugar para começar.</dd>
+</dl>
diff --git a/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html
new file mode 100644
index 0000000000..3b5365b074
--- /dev/null
+++ b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html
@@ -0,0 +1,481 @@
+---
+title: Formatação avançada de texto
+slug: Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto
+tags:
+  - Aprender
+  - Guía
+  - HTML
+  - Texto
+  - abreviação
+  - citar
+  - lista de descrição
+  - semântico
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p>
+Existem muitos outros elementos em HTML para formatação de texto, que não tratamos no artigo de <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a>. Os elementos descritos neste artigo são menos conhecidos, mas ainda são úteis para conhecer (e isso ainda não é uma lista completa de todos os elementos). Aqui, você aprenderá a marcar citações, listas de descrição, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contato e muito mais.
+</p>
+
+<p class="summary"></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Familiaridade básica em HTML, conforme abordado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Introdução ao HTML</a>. Formatação de texto em HTML, conforme abordado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentais de texto em HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a usar elementos HTML menos conhecidos para marcar recursos semânticos avançados.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Listas_de_descrição">Listas de descrição</h2>
+
+<p>Nos Fundamentos do texto em HTML, falamos sobre como <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML/#Listas">marcar as listas básicas</a> em HTML, mas não mencionamos o terceiro tipo de lista que ocasionalmente irá encontrar - listas de descrição. O objetivo dessas listas é marcar um conjunto de itens e suas descrições associadas, como termos e definições, ou perguntas e respostas. Vejamos um exemplo de um conjunto de termos e definições:</p>
+
+<pre class="notranslate">solilóquio
+No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).
+monólogo
+No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.
+aparte
+No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.</pre>
+
+<p>As listas de descrição usam um invólucro diferente dos outros tipos de lista — {{htmlelement("dl")}}; além disso, cada termo está envolvido em um {{htmlelement("dt")}} (termo de descrição) elemento, e cada descrição está envolvida em um {{htmlelement("dd")}} (definição de descrição) elemento. Vamos terminar marcando nosso exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;solilóquio&lt;/dt&gt;
+  &lt;dd&gt;No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).&lt;/dd&gt;
+  &lt;dt&gt;monólogo&lt;/dt&gt;
+  &lt;dd&gt;No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.&lt;/dd&gt;
+  &lt;dt&gt;aparte&lt;/dt&gt;
+  &lt;dd&gt;No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>Os estilos padrões do navegador exibirão as listas com as descrições indentadas um pouco dos termos. Os estilos da MDN seguem esta convenção de forma bastante parecida, mas também enfatizam os termos, para uma definição extra.</p>
+
+<dl>
+ <dt>solilóquio</dt>
+ <dd>No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).</dd>
+ <dt>monólogo</dt>
+ <dd>No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.</dd>
+ <dt>aparte</dt>
+ <dd>No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.</dd>
+</dl>
+
+<p>Observe que é permitido ter um único termo com múltiplas descrições, por exemplo:</p>
+
+<dl>
+ <dt>aparte</dt>
+ <dd>No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.</dd>
+ <dd>Por escrito, uma seção de conteúdo que está relacionada ao tópico atual, mas não se encaixa diretamente no fluxo principal de conteúdo, então é apresentado próximo (muitas vezes em uma caixa ao lado).</dd>
+</dl>
+
+<h3 id="Aprendizagem_ativa_marcando_um_conjunto_de_definições">Aprendizagem ativa: marcando um conjunto de definições</h3>
+
+<p>É hora de pôr as mãos nas listas de descrição. Adicione elementos ao texto bruto no campo de <em>Entrada</em> para que ele se pareça como uma lista de descrição no campo <em>Saída</em>. Você pode tentar usar seus próprios termos e descrições, se quiser.</p>
+
+<p>Se você cometer um erro, sempre pode reiniciá-lo usando o botão 'Limpar'. Se ficar realmente preso, pressione o botão <em>'Mostrar solução</em>' para ver a resposta.</p>
+
+<div class="hidden">
+<h6 id="Código_reproduzível">Código reproduzível</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Entrada&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Bacon
+A cola que liga o mundo em conjunto.
+Ovos
+A cola que une o bolo juntos.
+Café
+A bebida que faz correr o mundo pela manhã.
+Uma cor castanho claro.&lt;/textarea&gt;
+&lt;h2&gt;Saída&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Limpar" /&gt;
+  &lt;input id="solution" type="button" value="Mostrar solução" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">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 notranslate">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;dl&gt;\n  &lt;dt&gt;Bacon&lt;/dt&gt;\n  &lt;dd&gt;The glue that binds the world together.&lt;/dd&gt;\n  &lt;dt&gt;Eggs&lt;/dt&gt;\n  &lt;dd&gt;The glue that binds the cake together.&lt;/dd&gt;\n  &lt;dt&gt;Coffee&lt;/dt&gt;\n  &lt;dd&gt;The drink that gets the world running in the morning.&lt;/dd&gt;\n  &lt;dd&gt;A light brown color.&lt;/dd&gt;\n&lt;/dl&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h2 id="Cotações">Cotações</h2>
+
+<p>HTML também possui recursos disponíveis para marcação de cotações. Qual elemento você pode usar? Depende se está marcando um bloco ou uma cotação em linha.</p>
+
+<h3 id="Blockquotes">Blockquotes</h3>
+
+<p>Se uma seção de conteúdo em nível de bloco (seja um parágrafo, vários parágrafos, uma lista, etc.) for citada em algum outro lugar, você deverá envolvê-la em um elemento &lt;blockquote&gt; para indicar isso e incluir um URL apontando para a fonte da citação dentro de um atributo cite. Por exemplo, a marcação a seguir é obtida da página do elemento <code>&lt;blockquote&gt;</code> do MDN:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
+Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;</pre>
+
+<p>Para transformar isso em uma cotação em bloco, faríamos assim:</p>
+
+<pre class="brush: html notranslate">&lt;blockquote cite="/en-US/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
+  Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;
+&lt;/blockquote&gt;</pre>
+
+<p>O estilo padrão do navegador renderiza isso como um parágrafo recuado, como um indicador de que é uma citação. O MDN faz isso, mas também, adiciona um estilo extra:</p>
+
+<blockquote cite="/en-US/docs/Web/HTML/Element/blockquote">
+<p>O <strong>Elemento HTML <code>&lt;blockquote&gt;</code> </strong>(or <em>HTML Block Quotation Element</em>) indica que o texto em anexo é uma cotação estendida.</p>
+</blockquote>
+
+<h3 id="Cotações_em_linha">Cotações em linha</h3>
+
+<p>As cotações embutidas funcionam exatamente da mesma maneira, exceto pelo uso do elemento {{htmlelement("q")}}. Por exemplo, o bit de marcação abaixo contém uma cotação da página MDN &lt;q&gt;:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;The quote element — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — is &lt;q cite="/en-US/docs/Web/HTML/Element/q"&gt;intended
+for short quotations that don't require paragraph breaks.&lt;/q&gt;&lt;/p&gt;</pre>
+
+<p>O estilo padrão do navegador renderiza isso como texto normal entre aspas para indicar uma cotação, assim:</p>
+
+<p>O elemento de cotação — <code>&lt;q&gt;</code> — é "destinado a citações curtas que não exigem quebras de parágrafo".</p>
+
+<h3 id="Citações">Citações</h3>
+
+<p>O conteúdo do atributo {{htmlattrxref("cite","blockquote")}} parece útil, mas, infelizmente, navegadores, leitores de tela etc. não fazem muito uso dele. Não há como fazer com que o navegador exiba o conteúdo de <code>cite</code>, sem escrever sua própria solução usando JavaScript ou CSS. Se você deseja disponibilizar a fonte da cotação na página, uma maneira melhor de marcá-la é colocar o elemento {{htmlelement("cite")}} próximo ao elemento quote. Isso realmente tem o objetivo de conter o nome da fonte da citação — ou seja, o nome do livro ou o nome da pessoa que disse a citação — mas não há razão para que você não possa vincular o texto dentro de <code>&lt;cite&gt;</code> à citação fonte de alguma forma:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;According to the &lt;a href="/en-US/docs/Web/HTML/Element/blockquote"&gt;
+&lt;cite&gt;MDN blockquote page&lt;/cite&gt;&lt;/a&gt;:
+&lt;/p&gt;
+
+&lt;blockquote cite="/en-US/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
+  Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;
+&lt;/blockquote&gt;
+
+&lt;p&gt;The quote element — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — is &lt;q cite="/en-US/docs/Web/HTML/Element/q"&gt;intended
+for short quotations that don't require paragraph breaks.&lt;/q&gt; -- &lt;a href="/en-US/docs/Web/HTML/Element/q"&gt;
+&lt;cite&gt;MDN q page&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>As citações são estilizadas em fonte itálica por padrão. Você pode ver esse código funcionando em nosso exemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a>.</p>
+
+<h3 id="Aprendizado_ativo_quem_disse_isso">Aprendizado ativo: quem disse isso?</h3>
+
+<p>Hora de outro exemplo de aprendizado ativo! Neste exemplo, gostaríamos que você:</p>
+
+<ol>
+ <li>Transforme o parágrafo do meio em uma citação em bloco, que inclui um atributo <code>cite</code>.</li>
+ <li>Transforme parte do terceiro parágrafo em uma cotação embutida, que inclui um atributo de <code>cite</code>.</li>
+ <li>Inclua um elemento <code>&lt;cite&gt;</code> para cada link.</li>
+</ol>
+
+<p>Pesquise on-line para encontrar fontes de cotação apropriadas.</p>
+
+<p>Se você cometer um erro, sempre poderá redefini-lo usando o botão 'Limpar'. Se você realmente ficar atolado, pressione o botão 'Mostrar solução' para ver a resposta.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Entrada&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;p&gt;Hello and welcome to my motivation page. As Confucius once said:&lt;/p&gt;
+
+&lt;p&gt;It does not matter how slowly you go as long as you do not stop.&lt;/p&gt;
+
+&lt;p&gt;I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk
+(as mentioned in Affirmations for Positive Thinking.)&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Saída&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Limpar" /&gt;
+  &lt;input id="solution" type="button" value="Mostrar solução" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">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 notranslate">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;p&gt;Hello and welcome to my motivation page. As &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;Confucius&lt;/cite&gt;&lt;/a&gt; once said:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n  &lt;p&gt;It does not matter how slowly you go as long as you do not stop.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;I also love the concept of positive thinking, and &lt;q cite="http://www.affirmationsforpositivethinking.com/index.htm"&gt;The Need To Eliminate Negative Self Talk&lt;/q&gt; (as mentioned in &lt;a href="http://www.affirmationsforpositivethinking.com/index.htm"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt;.)&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>
+
+<h2 id="Abreviações">Abreviações</h2>
+
+<p>Outro elemento bastante comum que você encontrará ao olhar na Web é o {{htmlelement("abbr")}} — usado para contornar uma abreviação ou sigla e fornecer uma expansão completa do termo (incluído em um atributo {{htmlattrxref("title")}}.) Vejamos alguns exemplos</p>
+
+<pre class="notranslate">&lt;p&gt;Usamos &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; para estruturar nossos documentos da web.&lt;/p&gt;
+
+&lt;p&gt;Acho que o &lt;abbr title="Reverendo"&gt;Rev.&lt;/abbr&gt; Green fez isso na cozinha com a motosserra.&lt;/p&gt;</pre>
+
+<p>Elas aparecerão da seguinte forma (a expansão aparecerá em uma dica de ferramenta quando o termo passar o mouse):</p>
+
+<p>Usamos <abbr title="Hypertext Markup Language">HTML</abbr> para estruturar nossos documentos da web.</p>
+
+<p>Acho que o <abbr title="Reverend">Rev.</abbr> Green fez isso na cozinha com a motosserra.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Há outro elemento, {{htmlelement("acronym")}}, que basicamente faz a mesma coisa que <code>&lt;abbr&gt;</code>, e foi projetado especificamente para acrônimos, em vez de abreviações. Isso, no entanto, caiu em desuso — não era suportado em navegadores nem o <code>&lt;abbr&gt;</code>, e tem uma função semelhante que foi considerado inútil ter os dois. Apenas use <code>&lt;abbr&gt;</code>.</p>
+</div>
+
+<h3 id="Aprendizado_ativo_marcando_uma_abreviação">Aprendizado ativo: marcando uma abreviação</h3>
+
+<p>Para esta tarefa simples de aprendizado ativo, gostaríamos que você simplesmente marque uma abreviação. Você pode usar nossa amostra abaixo ou substituí-la por uma de sua preferência.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Entrada&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;p&gt;NASA sure does some exciting work.&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Saída&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 notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 5em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">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;p&gt;&lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; sure does some exciting work.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p>
+
+<h2 id="Marcando_detalhes_de_contato">Marcando detalhes de contato</h2>
+
+<p>O HTML possui um elemento para marcar os detalhes do contato — {{htmlelement("address")}}. Isso simplesmente envolve seus detalhes de contato, por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  &lt;p&gt;Chris Mills, Manchester, The Grim North, UK&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<p>Porém, uma coisa a se lembrar é que o elemento &lt;address&gt; destina-se a marcar os detalhes de contato da pessoa que escreveu o documento HTML e não qualquer endereço. Portanto, o exposto acima só seria bom se Chris tivesse escrito o documento em que a marcação aparece. Observe, que, algo assim também seria bom:</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  &lt;p&gt;Page written by &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<h2 id="Sobrescrito_e_subscrito">Sobrescrito e subscrito</h2>
+
+<p>Ocasionalmente, você precisará usar sobrescrito e subscrito ao marcar itens como datas, fórmulas químicas e equações matemáticas para que eles tenham o significado correto. Os elementos {{htmlelement("sup")}} e {{htmlelement("sub")}} manipulam esse trabalho. Por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My birthday is on the 25&lt;sup&gt;th&lt;/sup&gt; of May 2001.&lt;/p&gt;
+&lt;p&gt;Caffeine's chemical formula is C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
+&lt;p&gt;If x&lt;sup&gt;2&lt;/sup&gt; is 9, x must equal 3 or -3.&lt;/p&gt;</pre>
+
+<p>A saída desse código é assim:</p>
+
+<p>Meu aniversário é no dia 25 de maio de 2001.</p>
+
+<p>A fórmula química da cafeína é C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+
+<p>Se x<sup>2</sup> é 9, x deve ser igual a 3 ou -3.</p>
+
+<h2 id="Representando_código_de_computador">Representando código de computador</h2>
+
+<p>Existem vários elementos disponíveis para marcar código de computador usando HTML:</p>
+
+<ul>
+ <li>{{htmlelement("code")}}: Para marcar partes genéricas de código de computador.</li>
+ <li>{{htmlelement("pre")}}: Para reter espaço em branco (geralmente blocos de código) — se você usar recuo ou espaço em branco em excesso no seu texto, os navegadores o ignorarão e você não o verá na sua página renderizada. Se você envolver o texto nas tags <code>&lt;pre&gt;&lt;/pre&gt;</code> seu espaço em branco será renderizado de forma idêntica à maneira como você o vê no seu editor de texto.</li>
+ <li>{{htmlelement("var")}}: Para marcar especificamente nomes de variáveis.</li>
+ <li>{{htmlelement("kbd")}}: Para marcar a entrada do teclado (e outros tipos) inserida no computador.</li>
+ <li>{{htmlelement("samp")}}: Para marcar a saída de um programa de computador.</li>
+</ul>
+
+<p>Vejamos alguns exemplos. Você deve tentar brincar com eles (tente pegar uma cópia do nosso arquivo de exemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p>
+
+<pre class="brush: html notranslate">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}&lt;/code&gt;&lt;/pre&gt;
+
+&lt;p&gt;You shouldn't use presentational elements like &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+
+&lt;p&gt;In the above JavaScript example, &lt;var&gt;para&lt;/var&gt; represents a paragraph element.&lt;/p&gt;
+
+
+&lt;p&gt;Select all the text with &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;
+
+&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
+&lt;samp&gt;PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms&lt;/samp&gt;&lt;/pre&gt;</pre>
+
+<p>O código acima terá a seguinte aparência:</p>
+
+<p>{{ EmbedLiveSample('Representing_computer_code','100%',300) }}</p>
+
+<h2 id="Marcando_horários_e_datas">Marcando horários e datas</h2>
+
+<p>O HTML também fornece o elemento {{htmlelement("time")}} para marcar horários e datas em um formato legível por máquina. Por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;time datetime="2016-01-20"&gt;20 January 2016&lt;/time&gt;</pre>
+
+<p>Por que isso é útil? Bem, existem muitas maneiras diferentes pelas quais os humanos escrevem datas. A data acima pode ser escrita como:</p>
+
+<ul>
+ <li>20 January 2016</li>
+ <li>20th January 2016</li>
+ <li>Jan 20 2016</li>
+ <li>20/01/16</li>
+ <li>01/20/16</li>
+ <li>The 20th of next month</li>
+ <li>20e Janvier 2016</li>
+ <li>2016年1月20日</li>
+ <li>And so on</li>
+</ul>
+
+<p>Mas essas formas diferentes não podem ser facilmente reconhecidas pelos computadores — e se você quiser pegar automaticamente as datas de todos os eventos em uma página e inseri-las em um calendário? O elemento {{htmlelement("time")}} permite anexar uma data/hora inequívoca e legível por máquina para esse fim.</p>
+
+<p>O exemplo básico acima fornece apenas uma data legível por máquina simples, mas existem muitas outras opções possíveis, por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;!-- Data simples padrão --&gt;
+&lt;time datetime="2016-01-20"&gt;20 January 2016&lt;/time&gt;
+&lt;!-- Apenas ano e mês --&gt;
+&lt;time datetime="2016-01"&gt;January 2016&lt;/time&gt;
+&lt;!-- Just month and day --&gt;
+&lt;time datetime="01-20"&gt;20 January&lt;/time&gt;
+&lt;!-- Apenas tempo, horas e minutos --&gt;
+&lt;time datetime="19:30"&gt;19:30&lt;/time&gt;
+&lt;!-- Você pode fazer segundos e milissegundos também! --&gt;
+&lt;time datetime="19:30:01.856"&gt;19:30:01.856&lt;/time&gt;
+&lt;!-- Data e hora --&gt;
+&lt;time datetime="2016-01-20T19:30"&gt;7.30pm, 20 January 2016&lt;/time&gt;
+&lt;!-- Data e hora com compensação de fuso horário --&gt;
+&lt;time datetime="2016-01-20T19:30+01:00"&gt;7.30pm, 20 January 2016 is 8.30pm in France&lt;/time&gt;
+&lt;!-- Chamando um número de semana específico --&gt;
+&lt;time datetime="2016-W04"&gt;The fourth week of 2016&lt;/time&gt;</pre>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Isso marca o fim de nosso estudo da semântica de texto HTML. Lembre-se de que o que você viu durante este curso não é uma lista exaustiva de elementos de texto HTML — queríamos tentar cobrir o essencial, e alguns dos mais comuns que você verá na natureza, ou pelo menos podem achar interessantes. Para encontrar muito mais elementos HTML, você pode dar uma olhada no nosso <a href="/pt-BR/docs/Web/HTML/Element">HTML element reference</a> (a seção <a href="/pt-BR/docs/Web/HTML/Element#Semânticas_textuais_inline">Inline text semantics</a> seria um ótimo ponto de partida.) No próximo artigo, examinaremos os elementos HTML que você usaria para estruturar as diferentes partes de um documento HTML.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Introdução ao HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">O que tem na cabeça? Metadados em HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Criando hiperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatação avançada de texto</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Estrutura de documentos e sites</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurando HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marcando uma carta</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Estruturando uma página de conteúdo</a></li>
+</ul>
diff --git a/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..1abbfa20c4
--- /dev/null
+++ b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -0,0 +1,324 @@
+---
+title: Criando hyperlinks
+slug: Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks
+tags:
+  - Guía
+  - HTML
+  - HTTP
+  - Iniciante
+  - Link
+  - URL
+  - absoluto
+  - href
+  - hyperlinks
+  - relativo
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>
+</div>
+
+<p class="summary">Os hiperlinks são realmente importantes — são o que torna a Web uma <em>web</em>. Este artigo mostra a sintaxe necessária para criar um link e discute as suas melhores práticas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>
+    <p>Familiaridade básica em HTML, conforme <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Começando com o HTML</a>. Formatação de texto em HTML, conforme <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para aprender a implementar um hiperlink efetivamente e vincular vários arquivos juntos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_que_é_um_hiperlink">O que é um hiperlink?</h2>
+
+<p>Os hiperlinks são uma das inovações mais interessantes que a Web oferece. Bem, eles são uma característica da Web desde o início, mas são o que torna a Web como ela é — eles nos permitem vincular nossos documentos a qualquer outro documento (ou outro recurso) que queremos. Também podemos vincular para partes específicas de documentos e podemos disponibilizar aplicativos em um endereço web simples (em contraste com aplicativos nativos, que devem ser instalados e tantas outras coisas). Qualquer conteúdo da web pode ser convertido em um link, para que, quando clicado (ou ativado de outra forma) fará com que o navegador vá para outro endereço ({{glossary("URL")}}).</p>
+
+<div class="note">
+<p dir="ltr" id="tw-target-text"><strong>Nota</strong>: Um URL pode apontar para arquivos HTML, arquivos de texto, imagens, documentos de texto, arquivos de vídeo e áudio e qualquer outra coisa que possa estar na Web. Se o navegador não souber exibir ou manipular o arquivo, ele perguntará se você deseja abrir o arquivo (nesse caso, o dever de abrir ou manipular o arquivo é passado para um aplicativo nativo adequado no dispositivo) ou fazer o download dele (nesse caso, você pode tentar lidar com isso mais tarde).</p>
+</div>
+
+<p dir="ltr" id="tw-target-text">A página inicial da BBC, por exemplo, contém um grande número de links que apontam não apenas para várias notícias, mas também diferentes áreas do site (funcionalidade de navegação), páginas de login/registro (ferramentas do usuário) e muito mais.</p>
+
+<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Anatomia_de_um_link">Anatomia de um link</h2>
+
+<p dir="ltr" id="tw-target-text">Um link básico é criado envolvendo o texto (ou outro conteúdo, veja {{anch("Block level links")}}) que você quer transformar em um link dentro de um elemento {{htmlelement("a")}}, e dando-lhe um atributo {{htmlattrxref("href", "a")}}, (também conhecido como <strong>Hypertext Reference</strong>, ou <strong>target</strong>) que conterá o endereço da Web para o qual você deseja que o link aponte.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Estou criando um link para
+&lt;a href="https://www.mozilla.org/pt-BR/"&gt;a página inicial da Mozilla&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p dir="ltr" id="tw-target-text">Isso nos dá o seguinte resultado:</p>
+
+<p>Estou criando um link para <a class="ignore-external" href="https://www.mozilla.org/pt-BR/">a página inicial da Mozilla</a>.</p>
+
+<h3 id="Adicionando_informações_de_suporte_com_o_atributo_title">Adicionando informações de suporte com o atributo <em>title</em></h3>
+
+<p>Outro atributo que você pode querer adicionar aos seus links é o <code>title</code>; pretende-se que ele contenha informações úteis adicionais sobre o link, como, que tipo de informação a página contém ou informações importantes. Por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Estou criando um link para
+&lt;a href="https://www.mozilla.org/pt-BR/"
+   title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir"&gt; a página inicial da Mozilla&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>Isto nos dá o seguinte resultado (o título aparecerá como uma dica de ferramenta quando o link estiver suspenso):</p>
+
+<p>Estou criando um link para <a class="ignore-external" href="https://www.mozilla.org/pt-BR/" title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir">a página inicial da Mozilla</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Um título de link só é revelado ao passar o mouse sobre ele, o que significa que as pessoas que dependem do teclado ou <em>touchscreen</em> para navegar em páginas web terão dificuldade em acessar a informação do título. Se a informação de um título é realmente importante para a usabilidade da página, então você deve apresentá-la de uma maneira que será acessível a todos os usuários, por exemplo, colocando-o no texto normal.</p>
+</div>
+
+<p dir="ltr" id="tw-target-text">Aprendizagem na prática: criando seu próprio link de exemplo</p>
+
+<p dir="ltr" id="tw-target-text">Momento da aprendizagem na prática: gostaríamos que você criasse um documento HTML usando seu editor de código local (nosso <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">modelo inicial</a> seria interessante.)</p>
+
+<ul>
+ <li>Dentro do corpo do HTML, tente adicionar um ou mais parágrafos ou outros tipos de conteúdo que você já conhece.</li>
+ <li>
+  <p dir="ltr" id="tw-target-text">Transforme alguns dos conteúdos em links.</p>
+ </li>
+ <li>
+  <p dir="ltr" id="tw-target-text">Inclua atributos de título.</p>
+ </li>
+</ul>
+
+<h3 id="Links_de_nível_de_bloco">Links de nível de bloco</h3>
+
+<p dir="ltr" id="tw-target-text">Como falamos anteriormente, você pode transformar qualquer conteúdo em um link, mesmo <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started#Elementos_em_bloco_versus_elementos_inline">elementos de nível de bloco</a>. Se você tiver uma imagem que queira transformar em um link, você pode simplesmente colocar a imagem entre as tags <code>&lt;a&gt;&lt;/a&gt;</code>.</p>
+
+<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/pt-BR/"&gt;
+  &lt;img src="mozilla-image.png" alt="Logotipo mozilla que liga a página inicial do mozilla"&gt;
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Você descobrirá muito mais sobre o uso de imagens na Web em artigo posterior.</p>
+</div>
+
+<h2 dir="ltr" id="Um_guia_rápido_sobre_URLs_e_caminhos">Um guia rápido sobre URLs e caminhos</h2>
+
+<p dir="ltr" id="tw-target-text">Para entender completamente os destinos de links, você precisa entender URLs e caminhos de arquivos. Esta seção fornece as informações que você precisa para conseguir isso.</p>
+
+<p>Um URL ou <em>Uniform Resource Locator</em> é simplesmente uma sequência de texto que define onde algo está localizado na Web. Por exemplo, a página inicial em inglês da Mozilla está localizada em <code>https://www.mozilla.org/en-US/</code>.</p>
+
+<p>Os URLs usam caminhos para encontrar arquivos. Os caminhos especificam onde, no explorador de arquivos, o recurso que você está interessado está localizado. Vejamos um exemplo simples de uma estrutura de diretório (veja o diretório de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">criação de hiperlinks</a>).</p>
+
+<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>
+
+<p>A raiz dessa estrutura de diretório é chamada de  <code>criação de hiperlinks</code>. Ao trabalhar localmente com um site, você terá um diretório no qual ele todo esta dentro. Incluído na raiz, temos um arquivo <code>index.html</code> e um arquivo <code>contacts.html</code>. Em um site real, <code>index.html</code> seria nossa página inicial ou página de entrada (uma página da web que serve como ponto de entrada para um site ou uma seção específica de um site).</p>
+
+<p>Existem também dois diretórios dentro da nossa raiz — <code>pdfs</code> e <code>projects</code>. Cada um deles contém um único arquivo — um PDF (<code>projetos-brief.pdf</code>) e um arquivo <code>index.html</code>, respectivamente. Observe como é possível, felizmente, ter dois arquivos <code>index.html</code> em um projeto, desde que estejam em locais diferentes no sistema de arquivos. Muitos sites fazem isso. O segundo <code>index.html</code> poderia ser a página de destino principal para informações relacionadas ao projeto.</p>
+
+<ul>
+ <li>
+  <p><strong>Mesmo diretório: </strong>se você deseja incluir um hiperlink dentro de <code>index.html</code> (o <code>index.html</code> de nível superior) apontando para <code>contacts.html</code>, basta especificar o nome do arquivo ao qual deseja vincular, já que está no mesmo diretório que o arquivo atual. Portanto, o URL que você usaria seria <code>contacts.html</code>:</p>
+
+  <pre class="brush: html notranslate">&lt;p&gt;Deseja entrar em contato com um membro da equipe específica?
+Encontre detalhes sobre nossos serviços em nossa &lt;a href="contato.html"&gt;página de contatos&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Movendo-se para baixo em subdiretórios: </strong>se você quisesse incluir um hiperlink dentro do <code>index.html</code> apontando para o <code>projeto/index.html</code>, você precisaria descer no diretório de projetos antes de indicar o arquivo que deseja vincular. Isso é feito especificando o nome do diretório, depois uma barra inclinada e, em seguida, o nome do arquivo. Então o URL que você usaria seria <code>projeto/index.html</code>:</p>
+
+  <pre class="brush: html notranslate">&lt;p&gt;Visite minha &lt;a href="projects/index.html"&gt;pagina inicial do projeto&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Movendo-se de volta para os diretórios pai: </strong>se você quisesse incluir uma hiperlink dentro de <code>projeto/index.html</code> apontando para pdfs/<code>projetos-brief.pdf</code>, você precisaria subir um nível de diretório e voltar para o diretório <code>pdf</code>. "Subir um diretório" é indicado usando dois pontos — <code>..</code> — então a URL que você usaria seria  <code>../pdfs/project-brief.pdf</code></p>
+
+  <pre class="brush: html notranslate">&lt;p&gt;Um link para o meu &lt;a href="../pdfs/project-brief.pdf"&gt; breve de projeto&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode combinar várias instâncias desses recursos em URLs complexas, se necessário, por exemplo<code>../../../complex/path/to/my/file.html</code>.</p>
+</div>
+
+<h3 id="Fragmentos_de_documento">Fragmentos de documento</h3>
+
+<p>É possível vincular a uma parte específica de um documento HTML (conhecido como um <strong>fragmento de documento</strong>) e não apenas ao topo do documento. Para fazer isso, primeiro você deve atribuir um atributo "id" ao elemento ao qual deseja vincular. Normalmente faz sentido vincular a um título específico, então ficaria algo do tipo:</p>
+
+<pre class="brush: html notranslate">&lt;h2 id="Mailing_address"&gt;Endereço de correspondência&lt;/h2&gt;</pre>
+
+<p>Em seguida, para vincular a esse  <code>id</code> específico, você o incluirá no final do URL, precedido por um símbolo de hashtag/cerquilha, por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Quer escrever uma carta? Use nosso&lt;a href="contacts.html#Mailing_address"&gt;endereço de correspondência&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Você pode até usar apenas referência de fragmento do documento por si só para vincular a outra parte do mesmo documento:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;O &lt;a href="#Mailing_address"&gt;endereço postal da empresa&lt;/a&gt; pode ser encontrado na parte inferior desta página.&lt;/p&gt;</pre>
+
+<h3 id="URLs_absolutos_versus_relativos">URLs absolutos versus relativos</h3>
+
+<p>Dois termos que você encontrará na Web são URL <strong>absoluto</strong> e URL <strong>relativo</strong>:</p>
+
+<p><strong>URL absoluto: </strong>aponta para um local definido por sua localização absoluta na web, incluindo "protocolo" e "nome de domínio". Então, por exemplo, se uma página <code>index.html</code> for carregada para um diretório chamado <code>projeto</code> que fica dentro da raiz de um servidor web, e o domínio do site é <code>http://www.exemplo.com</code>, a página estará disponível em <code>http://www.exemplo.com/projeto/index.html</code> (ou mesmo apenas <code>http://www.exemplo.com/projeto/</code>, pois a maioria dos servidores web apenas procura uma página de destino como index.html para carregar, se não está especificado no URL.)</p>
+
+<p>Um URL absoluto sempre aponta para o mesmo local, não importa onde seja usado.</p>
+
+<p><strong>URL relativa: </strong>aponta para um local <em>relativo</em> ao arquivo do qual você está vinculando, mais como o que vimos na seção anterior. Por exemplo, se desejássemos vincular nosso arquivo de exemplo em <code>http://www.exemplo.com/projeto/index.html</code> para um arquivo PDF no mesmo diretório, o URL seria apenas o nome do arquivo — por exemplo, <code>project-brief.pdf</code> — nenhuma informação extra é necessária. Se o PDF estava disponível em um subdiretório dentro de <code>projects</code> chamado <code>pdfs</code>, o link relativo seria  <code>pdfs/projeto-brief.pdf</code> (o URL absoluto equivalente seria <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p>
+
+<p>Um URL relativo apontará para lugares diferentes, dependendo da localização real do arquivo ao qual você se refere — por exemplo, se tivermos movido nosso arquivo <code>index.html</code> para fora do diretório de projetos e para a raiz do site (no nível superior, não em qualquer diretório), o link relativo à URL referente a <code>pdfs/project-brief.pdf</code> agora apontaria para um arquivo localizado em <code>http://www.example.com/pdfs/project-brief.pdf</code>, não para um arquivo localizado em <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
+
+<h2 id="Práticas_recomendadas">Práticas recomendadas</h2>
+
+<p>Existem algumas práticas recomendadas a seguir, ao escrever links. Vejamos.</p>
+
+<ul>
+</ul>
+
+<h3 id="Use_palavras-chave_claras">Use palavras-chave claras</h3>
+
+<p>É muito fácil jogar links na sua página, porém somente isto não é suficiente. Precisamos tornar nossos links <em>acessíveis</em> a todos os leitores, independentemente do contexto atual e de quais ferramentas eles prefiram. Por exemplo:</p>
+
+<ul>
+ <li>Os usuários de leitores de telas gostam pular de link a outro link na página e ler links fora do contexto.</li>
+ <li>Os motores de busca usam o texto do link para indexar arquivos de destino, por isso é uma boa idéia incluir palavras-chave no texto do link para descrever efetivamente o que está sendo vinculado.</li>
+ <li>Os usuários normalmente deslizam sobre a página em vez de ler cada palavra, e são atraídos para recursos de página que se destacam, como links. Eles acharão os textos descritivos de links úteis.</li>
+</ul>
+
+<p>Vejamos um exemplo específico:</p>
+
+<p><em>Texto de link </em><strong>correto</strong>:<em> </em><a href="https://firefox.com/">Baixe o Firefox</a></p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Baixe o Firefox
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<p><em>Texto de link</em> <strong>incorreto</strong>: <a href="https://firefox.com/">clique aqui</a> para baixar o Firefox</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  clique aqui
+&lt;/a&gt;
+para baixar o Firefox&lt;/p&gt;
+</pre>
+
+<p>Outras dicas:</p>
+
+<ul>
+ <li>Não repita o URL como parte do texto do link — Os URLs parecem feios e até são mais feios quando um leitor de tela os lê letra por letra.</li>
+ <li>Não diga "link" ou "links para" no texto do link — é apenas ruído. Os leitores de tela já dizem às pessoas que existe um link. Os usuários visuais também sabem que existe um link, porque eles geralmente são de cor diferente e sublinhados (esta convenção geralmente não deve ser quebrada, pois os usuários estão muito acostumados a isso).</li>
+ <li>Mantenha seu rótulo de link o mais curto possível — links longos irritam especialmente os usuários de leitores de tela, que têm que ouvir o texto inteiro lido.</li>
+ <li>Minimize instâncias em que o mesmo texto esteja ligado a diferentes lugares. Isso pode causar problemas para os usuários do leitor de tela, que muitas vezes mostrará uma lista dos links fora do contexto — vários links todos rotulados como "clique aqui", "clique aqui", "clique aqui"... seria confuso.</li>
+</ul>
+
+<h3 id="Use_links_relativos_sempre_que_possível">Use links relativos sempre que possível</h3>
+
+<p>A partir da descrição acima, você pode pensar que é uma boa idéia usar apenas links absolutos o tempo todo; Afinal, eles não quebram quando uma página é movida como pode ocorrer com <em>links relativos</em>. No entanto, você deve usar <em>links relativos</em> sempre que possível ao vincular a outros locais dentro do mesmo site (ao vincular a outro site, você precisará usar um link absoluto):</p>
+
+<ul>
+ <li>Para começar, é muito mais fácil verificar seu código — os URL relativos geralmente são muito mais curtos que os URLs absolutos, o que torna o código de leitura muito mais fácil.</li>
+ <li>Em segundo lugar, é mais eficiente usar URLs relativas sempre que possível. Quando você usa um URL absoluto, o navegador começa procurando a localização real do servidor no Servidor de Nomes de Domínio "DNS"; veja <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a> para obter mais informações), então ele vai para esse servidor e encontra o arquivo que está sendo solicitado. Por outro lado, com um URL relativo, o navegador apenas procura o arquivo que está sendo solicitado, no mesmo servidor. Então, se você usa URLs absolutos para fazer o que os URLs relativos fariam, você está constantemente fazendo o seu navegador realizar trabalho extra, o que significa que ele irá executar de forma menos eficiente.</li>
+</ul>
+
+<h3 id="Vinculando-se_a_recursos_que_não_sejam_HTML_—_deixe_indicadores_claros">Vinculando-se a recursos que não sejam HTML — deixe indicadores claros</h3>
+
+<p>Ao vincular a um arquivo que será baixado (como um documento PDF ou Word) ou transmitido (como vídeo ou áudio) ou ainda tiver outro efeito potencialmente inesperado (abrir uma janela pop-up ou carregar um filme Flash), você deve adicionar uma redação clara para reduzir qualquer confusão. Pode ser bastante irritante, por exemplo:</p>
+
+<ul>
+ <li>Se você estiver em uma conexão de baixa banda larga, clicar em um link e, em seguida, um download de muitos megabytes começa inesperadamente.</li>
+ <li>Se você não tiver instalado o Flash Player, clicar em um link e, de repente, ser levado para uma página que requer Flash Player.</li>
+</ul>
+
+<p>Vejamos alguns exemplos, para ver que tipo de texto pode ser usado aqui:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
+  Baixe o relatório de vendas (PDF, 10MB)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/video-stream/"&gt;
+  Assista ao vídeo (o fluxo abre em separado, qualidade HD)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
+  Jogue o jogo de carro (requer Flash Player)
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Use_o_atributo_de_download_ao_vincular_a_um_download">Use o atributo de download ao vincular a um download</h3>
+
+<p>Quando você está apontando para um arquivo que deve ser baixado em vez de ser aberto no navegador, poderá usar o atributo de download para fornecer um nome de arquivo salvo padrão. Aqui está um exemplo, com um link de <code>baixar</code> para a versão do Windows 39 do Firefox:</p>
+
+<pre class="brush: html notranslate">&lt;a href="https://download.mozilla.org/?product=firefox-39.0-SSL&amp;os=win&amp;lang=en-US"
+   download="firefox-39-installer.exe"&gt;
+  Faça o download do Firefox 39 para Windows
+&lt;/a&gt;</pre>
+
+<h2 id="Aprendizagem_ativa_criando_um_menu_de_navegação">Aprendizagem ativa: criando um menu de navegação</h2>
+
+<p>Para este exercício, gostaríamos que você vinculasse algumas páginas a um menu de navegação para criar um <em>site</em> com várias páginas. Essa é uma maneira comum de criá-los — a mesma estrutura de página é usada em todas elas, incluindo o mesmo menu de navegação. Portanto, quando os <em>links</em> são clicados, dá a impressão de que você permanece no mesmo lugar e que um conteúdo diferente está sendo criado.</p>
+
+<p>Você precisará fazer cópias locais das quatro páginas a seguir, tudo no mesmo diretório (veja também o diretório de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">início do menu de navegação</a> para uma lista completa de arquivos):</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
+</ul>
+
+<p>Você deve:</p>
+
+<ol>
+ <li>Adicionar uma lista não ordenada no local indicado em uma página, contendo os nomes das páginas a serem vinculadas. Um menu de navegação geralmente é apenas uma lista de <em>links</em>, então está semanticamente correto.</li>
+ <li>Transformar o nome de cada página em um <em>link</em> para essa página.</li>
+ <li>Copiar o menu de navegação para cada uma.</li>
+ <li>Em cada página, remova apenas o <em>link</em> para a mesma página - é confuso e inútil que uma página inclua um link para si mesma, e a falta de um <em>link</em> é um bom lembrete visual de qual página você está atualmente.</li>
+</ol>
+
+<p>O exemplo final acabaria por parecer algo assim:</p>
+
+<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Se você ficar preso, ou não tem certeza se o fez bem, você pode verificar o diretório de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navegação-menu-marcado</a> para ver a resposta correta.</p>
+</div>
+
+<h2 id="Links_de_e-mail">Links de e-mail</h2>
+
+<p>É possível criar <em>links</em> ou botões que, quando clicados, abrem uma nova mensagem de e-mail de saída em vez de vincular a um recurso ou página. Isso é feito usando o elemento {{HTMLElement("a")}} e o <code>mailto:</code> estrutura de URL.</p>
+
+<p>Na sua forma mais comum, um <code>mailto:</code> simplesmente indica o endereço de e-mail do destinatário pretendido. Por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org"&gt;Enviar email para nenhum lugar&lt;/a&gt;
+</pre>
+
+<p>Isso resulta em um <em>link</em> que se parece com isto: <a href="mailto:nowhere@mozilla.org">Enviar e-mail para lugar nenhum.</a></p>
+
+<p>Na verdade, o endereço de e-mail é opcional. Se você deixar de fora (ou seja, seu {{htmlattrxref("href", "a")}} for simplesmente "mailto:"), uma nova janela de e-mail de saída será aberta pelo aplicativo de e-mail do usuário sem um destinatário. Isso geralmente é útil como "Compartilhar" <em>links</em> que os usuários podem clicar para enviar um e-mail para um endereço escolhido.</p>
+
+<h3 id="Especificando_detalhes">Especificando detalhes</h3>
+
+<p>Além do endereço de e-mail, você pode fornecer outras informações. Na verdade, qualquer campo de cabeçalho de correio padrão pode ser adicionado ao URL do <code>mailto:</code> que você fornece. Os mais utilizados são "assunto", "cc" e "corpo" (que não é um campo de cabeçalho verdadeiro, mas permite que você especifique uma mensagem de conteúdo curta para o novo e-mail). Cada campo e seu valor são especificados como um termo de consulta.</p>
+
+<p>Aqui está um exemplo que inclui um cc, bcc, assunto e corpo de texto:</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;amp;subject=The%20subject%20of%20the%20email &amp;amp;body=The%20body%20of%20the%20email"&gt;
+ Aqui está um exemplo, incluindo um cc, bcc, assunto e corpo:
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Os valores de cada campo devem ser codificados por URL, ou seja, com caracteres não imprimíveis (caracteres invisíveis, como guias, carriage returns e quebras de página) e espaços com <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Observe também o uso do ponto de interrogação (<code>?</code>) Para separar o URL principal dos valores do campo e do <em>e</em> comercial (&amp;) para separar cada campo no <code>mailto:</code> URL. Essa é a notação de consulta padrão do URL. Leia <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">O método GET</a> para entender para que esta notação de consulta é mais comum.</p>
+</div>
+
+<p>Aqui estão alguns outros exemplos de URLs de <code>mailto:</code></p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
+</ul>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Por enquanto isto é tudo sobre links! Você retornará aos links mais tarde no curso quando começar a analisar o estilo deles. Em seguida, em HTML, retornaremos à semântica de texto e veremos alguns recursos mais avançados/incomuns que você achará úteis — No próximo artigo você verá a formatação avançada de texto.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/pt-br/learn/html/introduction_to_html/debugging_html/index.html b/files/pt-br/learn/html/introduction_to_html/debugging_html/index.html
new file mode 100644
index 0000000000..4b518454d9
--- /dev/null
+++ b/files/pt-br/learn/html/introduction_to_html/debugging_html/index.html
@@ -0,0 +1,175 @@
+---
+title: Debugging HTML
+slug: Aprender/HTML/Introducao_ao_HTML/Debugging_HTML
+translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Escrever HTML é legal, mas e se algo der errado, e você não conseguir descobrir onde está o erro no código? Este artigo apresentará algumas ferramentas que podem ajudá-lo a encontrar e corrigir erros no HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Familiaridade com HTML, conforme abordado, por exemplo, em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Introdução ao HTML</a>, <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos de texto em HTML</a> e <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criação de Hiperlinks</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender o básico sobre o uso de ferramentas de depuração (debugging) para encontrar problemas em HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Depurar_não_é_assustador">Depurar não é assustador</h2>
+
+<p>Ao escrever algum tipo de código, tudo costuma ir bem, até o temido momento quando ocorre um erro — você fez algo errado, então seu código não funciona - talvez não funcione mais nada ou não funciona exatamente como você queria. Por exemplo, a seguir é mostrado um erro relatado ao tentar {{glossary("compilar")}} um programa simples escrito na linguagem <a href="https://www.rust-lang.org/">Rust</a>.</p>
+
+<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">Aqui, a mensagem de erro é relativamente fácil de entender — "string de aspas duplas sem terminação". Se você olhar a listagem, provavelmente verá como <code>println!(Hello, world!");</code> pode estar faltando logicamente uma aspa dupla. No entanto, as mensagens de erro podem ficar mais complicadas e menos fáceis de interpretar à medida que os programas se tornam maiores, e até mesmo casos simples podem parecer um pouco intimidadores para alguém que não sabe nada sobre o Rust.</p>
+
+<p>Depurar um código não tem que ser assustador, porém —  a chave para se sentir confortável em escrever e depurar qualquer linguagem ou código de programação é a familiaridade com a linguagem e as ferramentas.</p>
+
+<h2 id="HTML_e_depuração">HTML e depuração</h2>
+
+<p>HTML não é tão complicado de entender quanto o Rust. O HTML <strong>não é compilado</strong> em um formato diferente antes do navegador analisá-lo e mostrar o resultado (ele é interpretado, não compilado). E a sintaxe do {{glossary("elemento")}} HTML é muito mais fácil de entender do que uma "linguagem de programação real" como Rust, {{glossary("JavaScript")}}, ou {{glossary("Python")}}. A forma como os navegadores analisam o HTML é muito mais <strong>permissiva </strong>do que a forma como as linguagens de programação são executadas, o que é bom e ruim.</p>
+
+<h3 id="Código_permissivo">Código permissivo</h3>
+
+<p>Então, o que queremos dizer com permissivo? Bem, geralmente quando você faz algo errado no código, existem dois tipos principais de erros que você encontrará:</p>
+
+<ul>
+ <li><strong>Erros de sintaxe</strong>: São os erros de ortografia no seu código que realmente fazem com que o programa não seja executado, como o erro do Rust mostrado acima. Estes geralmente são fáceis de corrigir, desde que você esteja familiarizado com a sintaxe (forma de escrever) da linguagem e saiba o que significam as mensagens de erro.</li>
+ <li><strong>Erros lógicos</strong>: São erros onde a sintaxe está correta, mas o código não é o que você pretendia, o que significa que o programa é executado incorretamente. Geralmente, eles são mais difíceis de corrigir do que erros de sintaxe, pois não há uma mensagem de erro para direcioná-lo para a origem deste erro.</li>
+</ul>
+
+<p>O próprio HTML não sofre de erros de sintaxe porque os navegadores o analisam permissivamente, o que significa que a página ainda é exibida mesmo se houver erros de sintaxe. Os navegadores têm regras internas para indicar como interpretar a marcação escrita incorretamente, para que você obtenha algo em execução, mesmo que não seja o esperado. Isso, claro, ainda pode ser um problema!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: O HTML é analisado permissivamente porque, quando a web foi criada, foi decidido que permitir que as pessoas publicassem seus conteúdos era mais importante do que garantir que a sintaxe estivesse absolutamente correta. A web provavelmente não seria tão popular quanto é hoje, se tivesse sido mais rigorosa desde o início.</p>
+</div>
+
+<h3 id="Aprendizado_Ativo_Estudando_código_permissivo">Aprendizado Ativo: Estudando código permissivo</h3>
+
+<p>É hora de estudar a natureza permissiva do código HTML.</p>
+
+<ol>
+ <li>Primeiramente, faça o download do <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> e o salve localmente. Esse exemplo contém erros propositais para que possamos explorá-los (tal código HTML é dito  <em><strong>badly-formed</strong></em>, em contraponto ao HTML <em><strong>well-formed</strong></em>).</li>
+ <li>Em seguida, abra o arquivo em um navegador. Você verá algo como:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
+ <li>Isso claramente não parece bom; vamos dar uma olhada no código fonte para tentar achar os erros (somente o conteúdo de <em>body</em> é mostrado):
+  <pre class="brush: html notranslate">&lt;h1&gt;HTML debugging examples&lt;/h1&gt;
+
+&lt;p&gt;What causes errors in HTML?
+
+&lt;ul&gt;
+  &lt;li&gt;Unclosed elements: If an element is &lt;strong&gt;not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  &lt;li&gt;Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. &lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt;
+      what is this?&lt;/em&gt;
+
+  &lt;li&gt;Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla
+      homepage&lt;/a&gt;
+&lt;/ul&gt;</pre>
+ </li>
+ <li>Vamos analisar os erros:
+  <ul>
+   <li>Os elementos {{htmlelement("p","parágrafo")}} e {{htmlelement("li","item da lista")}} não possuem <em>tags</em> de fechamento. Olhando a imagem acima, isso não parece ter afetado muito a renderização do HTML já que é fácil deduzir onde um elemento deveria terminar e outro, começar.</li>
+   <li>O primeiro elemento {{htmlelement("strong")}} não possui <em>tag</em> de fechamento. Isto é um pouco mais problemático porque não é necessariamente fácil determinar onde um elemento deveria terminar. Assim, todo o resto do texto foi fortemente enfatizado.</li>
+   <li>Essa seção foi aninhada incorretamente: <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. Não é fácil dizer como esse trecho foi interpretado por causa do problema anterior.</li>
+   <li>O valor do atributo {{htmlattrxref("href","a")}} não tem as aspas de fechamento. Isso parece ter causado o maior problema — o <em>link</em> não foi renderizado.</li>
+  </ul>
+ </li>
+ <li>Agora vamos dar uma olhada no HTML que o navegador renderizou, comparando-o com o nosso código fonte. Para fazer isso, usaremos as ferramentas de desenvolvimento oferecidas pelo navegador. Se você não está familiarizado com estas ferramentas, dê uma olhadinha nesse tutorial: <a href="/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">O que são as ferramentas de desenvolvimento do navegador</a>.</li>
+ <li>No inspetor DOM, você pode ver como o HTML renderizado fica: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text &quot;What causes errors in HTML?&quot; Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
+ <li>Utilizando o inspetor DOM, vamos explorar nosso código detalhadamente para ver como o navegador tentou consertar os erros do código HTML (nós fizemos a análise com o Firefox, mas outros navegadores modernos <em>devem</em> apresentar o mesmo resultado):
+  <ul>
+   <li>As <em>tags</em> de fechamento foram colocadas nos parágrafos e itens da lista.</li>
+   <li>Não está claro onde o primeiro elemento <code>&lt;strong&gt;</code> deveria terminar, portanto o navegador envolveu cada bloco subsequente em uma <em>tag</em> <em>strong</em> própria até o fim do documento!</li>
+   <li>O aninhamento incorreto foi corrigido pelo navegador da seguinte maneira:
+    <pre class="brush: html notranslate">&lt;strong&gt;strong
+  &lt;em&gt;strong emphasised?&lt;/em&gt;
+&lt;/strong&gt;
+&lt;em&gt; what is this?&lt;/em&gt;</pre>
+   </li>
+   <li>O link cujas aspas de fechamento não estavam presentes foi totalmente excluído da renderização. Então o último item ficou assim:
+    <pre class="brush: html notranslate">&lt;li&gt;
+  &lt;strong&gt;Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: &lt;/strong&gt;
+&lt;/li&gt;</pre>
+   </li>
+  </ul>
+ </li>
+</ol>
+
+<h3 id="Validação_HTML">Validação HTML</h3>
+
+<p>Então, você pode ver pelo exemplo acima que você realmente  quer ter certeza de que o seu HTML foi bem construido! Mas Como? Em um pequeno exemplo como o que foi visto acima, é facil analisar as linhas e achar os erros, mas e se fosse um gigante e complexo documento HTML?</p>
+
+<p>A melhor estratégia é começar rodando a sua página HTML através do <a href="https://validator.w3.org/">Markup Validation Service</a> — criado e mantido pelo W3C, uma organização que cuida das especificações que define o HTML, CSS, e outras tecnologias WEB. Esta página considera um documento HTML como uma entrada, fazendo a leitura dela e retornando o que há de errado com o seu HTML.</p>
+
+<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Para especificar o HTML a ser validado, você pode dar um endereço web, fazer o upload de um arquivo HTML, ou diretamente inserir o código HTML.</p>
+
+<h3 id="Aprendizado_Ativo_Validando_um_documento_HTML">Aprendizado Ativo: Validando um documento HTML</h3>
+
+<p>Vamos tentar fazer isto com o nosso <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a>.</p>
+
+<ol>
+ <li>Primero, carregue o <a href="https://validator.w3.org/">Markup Validation Service</a> em uma aba no seu navegador, caso já não esteja carregada.</li>
+ <li>Troque para a aba <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li>
+ <li>Copie todo o código do documento de exemplo (não apenas o body) e cole dentro da grande área de texto mostrada no Markup Validation Service.</li>
+ <li>Pressione o botão <em>Check</em>.</li>
+</ol>
+
+<p>Você deverá receber uma lista de erros e outras informações.</p>
+
+<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>
+
+<h4 id="Interpretando_as_mensagens_de_erros">Interpretando as mensagens de erros</h4>
+
+<p>As mensagens de erros geralmente são úteis, mas algumas vezes elas não ajudam tanto; com um pouco de prática você pode descobrir como interpretar-lás para arrumar o seu código. Vamos dar uma olhada nas mensagens de erros e ver o que elas significam. Você verá que cada mensagem vem com um numero para a linha e um para a coluna afim de ajudar você a localizar o erro facilmente.</p>
+
+<ul>
+ <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Estas mensagens indicam que um elemento que esta aberto deveria estar fechado. O final da tag esta implicito, mas não esta realmente lá. A informação de linha/coluna indica para a primeira linha depois de onde a tag de fechamento realmente deveria estar, mas isto é uma pista boa o suficiente para ver o que há de errado.</li>
+ <li>"Unclosed element <code>strong</code>": Este é muito fácil de entender — um {{htmlelement("strong")}} elemento esta aberto, e uma informação de linha/coluna indica diretamente para onde esta.</li>
+ <li>"End tag <code>strong</code> violates nesting rules": Este aponta os elementos incorretamente aninhados, e a informação de linha/coluna aponta onde o erro está.</li>
+ <li>"End of file reached when inside an attribute value. Ignoring tag": This one is rather cryptic; it refers to the fact that there is an attribute value not properly formed somewhere, possibly near the end of the file because the end of the file appears inside the attribute value. The fact that the browser doesn't render the link should give us a good clue as to what element is at fault.</li>
+ <li>"End of file seen and there were open elements": This is a bit ambiguous, but basically refers to the fact there are open elements that need to be properly closed. The lines numbers point to the last few lines of the file, and this error message comes with a line of code that points out an example of an open element:
+  <pre class="notranslate">example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla homepage&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>
+
+  <div class="note">
+  <p><strong>Note</strong>: An attribute missing a closing quote can result in an open element because the rest of the document is interpreted as the attribute's content.</p>
+  </div>
+ </li>
+ <li>"Unclosed element <code>ul</code>": This is not very helpful, as the {{htmlelement("ul")}} element <em>is</em> closed correctly. This error comes up because the {{htmlelement("a")}} element is not closed, due to the missing closing quote mark.</li>
+</ul>
+
+<p><span>If you can't work out what every error message means, don't worry about it — a good idea is to try fixing a few errors at a time. Then try revalidating your HTML to show what errors are left. Sometimes fixing an earlier error will also get rid of other error messages — several errors can often be caused by a single problem, in a domino effect.</span></p>
+
+<p><span>You will know when all your errors are fixed when you see the following banner in your output: </span></p>
+
+<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>So there we have it, an introduction to debugging HTML, which should give you some useful skills to count on when you start to debug CSS, JavaScript, and other types of code later on in your career. This also marks the end of the Introduction to HTML module learning articles — now you can go on to testing yourself with our assessments: the first one is linked below.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML">O que está no cabeçalho? Metadados em HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando hyperlinks</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites">Estrutura de documento e sites</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html
new file mode 100644
index 0000000000..825d2cec6e
--- /dev/null
+++ b/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html
@@ -0,0 +1,299 @@
+---
+title: Estrutura de documento e sites
+slug: Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites
+translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<div>Além de definir as partes individuais de sua página (como "um parágrafo" ou "uma imagem"),</div>
+
+<p class="summary">o {{glossary("HTML")}}  também conta com vários elementos de nível de bloco usados para definir as áreas de seu site (como "o cabeçalho", "o menu de navegação", "a coluna de conteúdo príncipal"). Este artigo explora como planejar uma estrutura básica de website, e escrever o HTML para representar essa estrutura.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>
+    <p>Familiaridade básica com HTML, como mostrado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a>. Formatação de texto HTML, como mostrado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a>. O funcionamento de hiperlinks, como visto em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando hyperlinks</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p dir="ltr" id="tw-target-text">Aprenda a estruturar seu documento usando tags semânticas e como elaborar a estrutura de um site simples.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Seções_básicas_de_um_documento">Seções básicas de um documento</h2>
+
+<p dir="ltr" id="tw-target-text">As páginas da web podem e serão muito diferentes umas das outras, mas todas tendem a compartilhar componentes padrão semelhantes, a menos que a página exiba um vídeo ou um jogo em tela cheia, seja parte de algum tipo de projeto de arte ou seja mal estruturada:</p>
+
+<dl>
+ <dt>cabeçalho (header)</dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Normalmente, uma grande faixa na parte superior com um grande título e / ou logotipo. É aí que as principais informações comuns sobre um site geralmente ficam de uma página para outra.</p>
+ </dd>
+ <dt>barra de navegação</dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Links para as principais seções do site; geralmente representado por botões de menu, links ou guias. Como o cabeçalho, esse conteúdo geralmente permanece consistente de uma página para outra - ter uma navegação inconsistente em seu site levará a usuários confusos e frustrados. Muitos web designers consideram a barra de navegação parte do cabeçalho em vez de um componente individual, mas isso não é um requisito; na verdade, alguns também argumentam que ter os dois separados é melhor para acessibilidade, já que os leitores de tela podem ler melhor os dois recursos se estiverem separados.</p>
+ </dd>
+ <dt>conteúdo principal</dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Uma grande área no centro que contém a maior parte do conteúdo exclusivo de uma determinada página da Web, por exemplo, o vídeo que você deseja assistir ou a história principal que você está lendo ou o mapa que deseja visualizar ou as manchetes de notícias, etc. Esta é a única parte do site que definitivamente irá variar de página para página!</p>
+ </dd>
+ <dt>barra lateral (sidebar)</dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Algumas informações periféricas, links, cotações, anúncios etc. Geralmente, isso é contextual ao conteúdo principal (por exemplo, em uma página de um artigo de notícias, a barra lateral pode conter a biografia do autor ou links para artigos relacionados), mas há também casos em que você encontrará alguns elementos recorrentes como um sistema de navegação secundário.</p>
+ </dd>
+ <dt>rodapé (footer)</dt>
+ <dd>
+ <p dir="ltr">Uma faixa na parte inferior da página que geralmente contém letras pequenas, avisos de direitos autorais ou informações de contato. É um lugar para colocar informações comuns (como o cabeçalho), mas geralmente essas informações não são críticas ou secundárias ao próprio site. O rodapé também é usado às vezes para fins de {{Glossary ("SEO")}}, fornecendo links para acesso rápido a conteúdo popular.  Um "site típico" poderia ser colocado assim:</p>
+ </dd>
+</dl>
+
+<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="HTML_para_estruturar_conteúdo">HTML para estruturar conteúdo</h2>
+
+<p class="tw-data-text tw-ta tw-text-small" dir="ltr" style="text-align: left;"><span lang="pt">O exemplo simples mostrado acima não é bonito, mas é perfeitamente aceitável para ilustrar um exemplo típico de layout de website. Alguns sites têm mais colunas, algumas são bem mais complexas, mas você tem a ideia. Com o CSS certo, você poderia usar praticamente todos os elementos para agrupar as diferentes seções e fazer com que parecesse como você queria, mas como discutido anteriormente, precisamos respeitar a semântica e <strong>usar o elemento certo para o trabalho certo.</strong></span></p>
+
+<p class="tw-data-text tw-ta tw-text-small" dir="ltr" style="text-align: left;">Isso ocorre porque os visuais não contam toda a história. Usamos cor e tamanho de fonte para chamar a atenção dos usuários para as partes mais úteis do conteúdo, como o menu de navegação e links relacionados, mas sobre pessoas com deficiência visual, por exemplo, que podem não encontrar conceitos como "rosa" e "grande". fonte "muito útil?</p>
+
+<div class="note">
+<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left;"><span lang="pt">Nota: as pessoas daltônicas representam cerca de 4% da população mundial ou, em outras palavras, aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres são daltônicas. Cegos e deficientes visuais representam cerca de 4-5% da população mundial (em 2012 havia 285 milhões de pessoas no mundo, enquanto a população total era de cerca de 7 bilhões).</span></p>
+</div>
+
+<p><span lang="pt">Em seu código HTML, você pode marcar seções de conteúdo com base em sua funcionalidade. Você pode usar elementos que representam as seções de conteúdo descritas acima sem ambigüidade, e tecnologias assistivas, como leitores de tela, podem reconhecer esses elementos e ajudar com tarefas como "localizar a navegação principal". "ou" encontre o conteúdo principal. " Como mencionamos anteriormente no curso, há um número de <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">consequências de não usar a estrutura de elemento e semâtica certas para o trabalho certo.</a></span></p>
+
+<p><span lang="pt">Para implementar essa marcação semântica, o HTML fornece tags dedicadas que você pode usar para representar essas seções, por exemplo:</span></p>
+
+<ul>
+ <li><strong>cabeçalho</strong>: {{htmlelement("header")}}.</li>
+ <li><strong>barra de navegação: </strong>{{htmlelement("nav")}}.</li>
+ <li><strong>conteúdo principal: </strong>{{htmlelement("main")}}, com várias subseções de conteúdo representadas por {{HTMLElement("article")}}, {{htmlelement("section")}}, e elementos {{htmlelement("div")}}.</li>
+ <li><strong>rodapé: </strong>{{htmlelement("footer")}}.</li>
+</ul>
+
+<h3 id="Aprendizagem_ativa_explorando_o_código_para_o_nosso_exemplo"><span lang="pt">Aprendizagem ativa: explorando o código para o nosso exemplo</span></h3>
+
+<div class="oSioSc">
+<div id="tw-target">
+<div class="gsrt tw-ta-container tw-nfl" id="tw-target-text-container">
+<p class="tw-data-text tw-ta tw-text-small" dir="ltr" style="text-align: left; height: 48px;"><span lang="pt">Nosso exemplo visto acima é representado pelo seguinte código (você também pode <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">encontrar o exemplo em nosso repositório GitHub</a>). Gostaríamos que você olhasse o exemplo acima e, em seguida, examine a listagem abaixo para ver quais partes compõem a seção do visual.</span> </p>
+</div>
+</div>
+</div>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+
+    &lt;title&gt;My page title&lt;/title&gt;
+    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"&gt;
+    &lt;link rel="stylesheet" href="style.css"&gt;
+
+    &lt;!-- as três linhas abaixo são uma correção para que elementos semânticos HTML5 funcionem em versões antigas do Internet Explorer--&gt;
+    &lt;!--[if lt IE 9]&gt;
+      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
+    &lt;![endif]--&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;!-- Esse é o cabeçalho (header) principal que vai ser usado em todas as páginas do nosso website --&gt;
+
+    &lt;header&gt;
+      &lt;h1&gt;Header&lt;/h1&gt;
+    &lt;/header&gt;
+
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Our team&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+
+       &lt;!-- Um formulário de pesquisa é uma outra maneira não linear comum de navegar por um site. --&gt;
+
+       &lt;form&gt;
+         &lt;input type="search" name="q" placeholder="Search query"&gt;
+         &lt;input type="submit" value="Go!"&gt;
+       &lt;/form&gt;
+     &lt;/nav&gt;
+
+    &lt;!-- Esse é o conteúdo principal da nossa página --&gt;
+    &lt;main&gt;
+
+      &lt;!-- Contém um artigo --&gt;
+      &lt;article&gt;
+        &lt;h2&gt;Article heading&lt;/h2&gt;
+
+        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.&lt;/p&gt;
+
+        &lt;h3&gt;Subsection&lt;/h3&gt;
+
+        &lt;p&gt;Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.&lt;/p&gt;
+
+        &lt;p&gt;Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.&lt;/p&gt;
+
+        &lt;h3&gt;Another subsection&lt;/h3&gt;
+
+        &lt;p&gt;Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
+
+        &lt;p&gt;Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.&lt;/p&gt;
+      &lt;/article&gt;
+
+      &lt;!-- O contéudo do elemento aside pode ser aninhado dentro do conteúdo do elemento main --&gt;
+      &lt;aside&gt;
+        &lt;h2&gt;Related&lt;/h2&gt;
+
+        &lt;ul&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh I do like to be beside the seaside&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh I do like to be beside the sea&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Although in the North of England&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;It never stops raining&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh well...&lt;/a&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/aside&gt;
+
+    &lt;/main&gt;
+
+    &lt;!-- Esse é o rodapé principal que vai ser usado em todas as páginas do nosso website --&gt;
+
+    &lt;footer&gt;
+      &lt;p&gt;©Copyright 2050 by nobody. All rights reversed.&lt;/p&gt;
+    &lt;/footer&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Reserve um tempo para examinar o código e entendê-lo - os comentários dentro do código também devem ajudá-lo a entendê-lo. Não estamos pedindo que você faça muito mais neste artigo, porque a chave para entender o layout do documento é escrever uma estrutura HTML sólida e, em seguida, defini-la com CSS. Nós vamos aguardar isso até que você comece a estudar o CSS layout como parte do tópico do estudo de CSS.</p>
+
+<h2 id="Elementos_de_layout_do_HTML_em_mais_detalhes">Elementos de layout do HTML em mais detalhes</h2>
+
+<p>É bom entender o significado geral de todos os elementos de seção do HTML em detalhes - isso é algo em que você trabalhará gradualmente ao começar a obter mais experiência com o desenvolvimento web. Você pode encontrar muitos detalhes lendo o nosso <a href="/pt-BR/docs/Web/HTML/Element">Elementos HTML</a>. Para agora, estes são as principais definições que você deve tentar entender:</p>
+
+<ul>
+ <li>{{HTMLElement('main')}} é para o conteúdo único dessa página.Use &lt;main&gt; apenas uma vez por página, e o coloca diretamente dentro do {{HTMLElement('body')}}. Não é ideal aninhar ele dentro de qualquer outro elemento senão o elemento &lt;body&gt;.</li>
+ <li>{{HTMLElement('article')}} inclui um bloco de conteúdo relacionado o qual faz sentido por si só, sem o restante da página (por exemplo, uma postagem singular dum blog).</li>
+ <li>{{HTMLElement('section')}} é similar com &lt;article&gt;, mas ele é mais para agrupar uma única parte de página que constitui em um único pedaço de funcionalidade (por exemplo, um minimapa, ou um conjunto de manchetes e resumo). É considerado boa prática começar cada seção com um <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">título</a>; observe também que você pode dividir um &lt;article&gt;s em diferentes &lt;section&gt;s, ou &lt;section&gt;s em diferentes &lt;article&gt;s, dependendo do contexto.</li>
+ <li>{{HTMLElement('aside')}} é para conteúdo que não está relacionados diretamente com os conteúdos principais, mas que podem providenciar informações complementares a esses (entradas de glossários, biografia do autor, links relacionados, etc.).</li>
+ <li>{{HTMLElement('header')}} representa um grupo de conteúdo introdutório. Se ele for um elemento filho do {{HTMLElement('body')}}, Ele é um header global da página do site, mas se for um elemento filho de um {{HTMLElement('article')}} ou {{HTMLElement('section')}}, é definido como um header específico para essa seção ( tenta não confundir isso com <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML#Adicionando_um_título">títulos e cabeçalhos</a>).</li>
+ <li>{{HTMLElement('nav')}} contém a funcionalidade principal de navegação da página. Links secundários, etc., não iria na navegação</li>
+ <li>{{HTMLElement('footer')}} representa um grupo de conteúdo final da página.</li>
+</ul>
+
+<h3 id="Elementos_de_layout_não-semânticos">Elementos de layout não-semânticos</h3>
+
+<p>Às vezes, você se depara numa situação em que não consegue encontrar um elemento semântico ideal para agrupar alguns itens ou agrupar algum conteúdo. Nesses momentos, convém agrupar um conjunto de elementos para afetá-los todos como uma única entidade com alguns {{glossary("CSS")}} ou {{glossary("JavaScript")}}. Para casos como esses, HTML oferece os elementos {{HTMLElement("div")}} e {{HTMLElement("span")}}. Você deve usá-los preferencialmente com um atributo {{htmlattrxref('class')}} adequado, para fornecer a eles algum tipo de rótulo para que possam ser facilmente referenciados.</p>
+
+<p>{{HTMLElement("span")}} é um elemento não-semântico embutido, que você deve usar apenas se não conseguir pensar em um elemento de texto semântico melhor para agrupar seu conteúdo ou se não quiser adicionar um significado específico. Por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;O rei voltou bêbado para o quarto às 01:00, a cerveja não fez nada para ajudá-lo
+enquanto ele cambaleando pela porta &lt;span class="editor-note"&gt;[Nota do editor: Neste ponto da peça, as luzes devem estar baixas]&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>Nesse caso, a nota do editor deve meramente fornecer orientação extra para o diretor da peça; não é suposto ter um significado semântico extra. Para usuários observador, talvez o CSS fosse usado para distanciar a nota um pouco do texto principal.</p>
+
+<p>{{HTMLElement("div")}} é um elemento não semântico no nível de bloco, que você deve usar apenas se não conseguir pensar em um elemento de bloco semântico melhor para usar ou se não quiser adicionar um significado específico. Por exemplo, imagine um widget de carrinho de compras que você poderia escolher a qualquer momento durante o seu tempo em um site de comércio eletrônico:</p>
+
+<pre class="brush: html notranslate">&lt;div class="carrinho-de-compras"&gt;
+  &lt;h2&gt;Carrinho de compras&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;p&gt;&lt;a href=""&gt;&lt;strong&gt;Brincos de prata&lt;/strong&gt;&lt;/a&gt;: $99.95.&lt;/p&gt;
+      &lt;img src="../products/3333-0985/thumb.png" alt="Brincos de prata"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      ...
+    &lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;Preço total: $237.89&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Este não é realmente um <code>&lt;aside&gt;</code>, pois não está necessariamente relacionado ao conteúdo principal da página (você deseja visualizá-lo de qualquer lugar). Nem sequer garante particularmente o uso de uma <code>&lt;section&gt;</code>, pois não faz parte do conteúdo principal da página. Portanto, um &lt;div&gt; é bom neste caso. Incluímos um cabeçalho como orientação para ajudar os usuários de leitores de tela a encontrá-lo.</p>
+
+<div class="warning">
+<p><strong>Aviso:</strong> Divs são tão convenientes de usar que é fácil usá-los demais. Como eles não carregam valor semântico, eles apenas confundem seu código HTML. Tome cuidado para usá-los somente quando não houver uma solução semântica melhor e tente reduzir ao mínimo o uso deles, caso contrário, será difícil atualizar e manter seus documentos.</p>
+</div>
+
+<h3 id="Quebras_de_linha_e_regras_horizontais">Quebras de linha e regras horizontais</h3>
+
+<p>Dois elementos que você ocasionalmente vai usar e desejerá conhecer são {{htmlelement("br")}} e {{htmlelement("hr")}}:</p>
+
+<p><code>&lt;br&gt;</code> cria uma quebra de linha em um parágrafo; é a única maneira de forçar uma estrutura rígida em uma situação em que você deseja uma série de linhas curtas fixas, como em um endereço postal ou um poema. Por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Era uma vez um homem chamado O'Dell&lt;br&gt;
+Que adorava escrever HTML&lt;br&gt;
+Mas sua estrutura era ruim, sua semântica era triste&lt;br&gt;
+e sua marcação não leu muito bem.&lt;/p&gt;</pre>
+
+<p>Sem os elementos <code>&lt;br&gt;</code>, o parágrafo seria apenas renderizado em uma longa linha (como dissemos anteriormente no curso, o HTML ignora a maioria dos espaços em branco); com elementos <code>&lt;br&gt;</code> no código, a marcação é renderizada assim</p>
+
+<p>Era uma vez um homem chamado O'Dell<br>
+ Que adorava escrever HTML<br>
+ Mas sua estrutura era ruim, sua semântica era triste<br>
+ e sua marcação não leu muito bem.</p>
+
+<p>Elementos <code>&lt;hr&gt;</code> criam uma regra horizontal no documento que indica uma alteração temática no texto (como uma alteração no tópico ou na cena). Visualmente, apenas se parece com uma linha horizontal. Como um exemplo:</p>
+
+<pre class="notranslate">&lt;p&gt;Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.&lt;/p&gt;
+&lt;hr&gt;
+&lt;p&gt;Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.&lt;/p&gt;</pre>
+
+<p>Seria renderizado assim:</p>
+
+<p>Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.</p>
+
+<hr>
+<p>Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.</p>
+
+<h2 id="Planejando_um_simples_website">Planejando um simples website</h2>
+
+<p>Depois de planejar o conteúdo de uma página da Web simples, o próximo passo lógico é tentar descobrir qual conteúdo você deseja colocar em um site inteiro, quais páginas você precisa e como elas devem ser organizadas e vinculadas umas às outras. para a melhor experiência de usuário possível. Isso é chamado {{glossary("Information architecture")}}. Em um site grande e complexo, é possível planejar muito esse processo, mas para um site simples de poucas páginas, isso pode ser bastante simples e divertido!</p>
+
+<ol>
+ <li>Lembre-se de que você terá alguns elementos comuns à maioria das páginas (se não todas), como o menu de navegação e o conteúdo do rodapé. Se seu site é para uma empresa, por exemplo, é uma boa ideia ter suas informações de contato disponíveis no rodapé de cada página. Anote o que você deseja que seja comum a todas as páginas.<img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li>
+ <li>Em seguida, desenhe um esboço de como a estrutura de cada página deve parecer (pode parecer com nosso site simples acima). Observe o que cada bloco será.<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li>
+ <li>Agora, faça um brainstorm de todos os outros conteúdos (comuns a todas as páginas) que você deseja ter no seu site - escreva uma grande lista.<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li>
+ <li>Em seguida, tente classificar todos esses itens de conteúdo em grupos, para ter uma idéia de quais partes podem viver juntas em páginas diferentes. Isso é muito semelhante a uma técnica chamada {{glossary("Card sorting")}}.<img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li>
+ <li>Agora, tente esboçar um mapa do site aproximado - faça um balão para cada página do seu site e desenhe linhas para mostrar o fluxo de trabalho típico entre as páginas. A página inicial provavelmente estará no centro e terá um link para a maioria, senão todas as outras; a maioria das páginas em um site pequeno deve estar disponível na navegação principal, embora haja exceções. Você também pode incluir notas sobre como as coisas podem ser apresentadas.<img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li>
+</ol>
+
+<h3 id="Aprendizado_ativo_crie_seu_próprio_mapa_do_site">Aprendizado ativo: crie seu próprio mapa do site</h3>
+
+<p>Tente realizar o exercício acima para um site de sua própria criação. Sobre o que você gostaria de criar um site?</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Salve seu trabalho em algum lugar; você pode precisar mais tarde.</p>
+</div>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Nesse ponto, você deve ter uma idéia melhor sobre como estruturar uma página / site. No último artigo deste módulo, estudaremos como depurar HTML.</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document">Seções e estruturas de um documento HTML5</a>: Guia avançado para elementos semânticos do HTML5 e o algoritmo de estrutura de tópicos do HTML5.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML">O que está no cabeçalho? Metadados em HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando hyperlinks</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites">Estrutura de documento e sites</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/pt-br/learn/html/introduction_to_html/getting_started/index.html b/files/pt-br/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..ed79c15034
--- /dev/null
+++ b/files/pt-br/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,755 @@
+---
+title: Iniciando com HTML
+slug: Aprender/HTML/Introducao_ao_HTML/Getting_started
+tags:
+  - Codificação de Scripts
+  - Comentário
+  - Elemento
+  - Guía
+  - HTML
+  - Iniciante
+  - atributo
+  - espaço em branco
+  - referência de entidade
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Neste artigo nós abordamos os princípios básicos do HTML, para você começar. Definimos os elementos, atributos e todos os outros termos importantes que você possa ter ouvido e onde eles se encaixam na linguagem. Também mostramos como um elemento HTML é estruturado, como uma página HTML típica é estruturada e explicamos outras importantes características básicas da linguagem. Ao longo do caminho, nós brincaremos com um pouco de HTML, para despertar seu interesse!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Básico de informática, <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">software básico instalado</a> e conhecimento básico de como <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">trabalhar com arquivos</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivos:</th>
+   <td>Obter uma familiaridade básica com a linguagem HTML e adquirir um pouco de prática escrevendo alguns elementos HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_que_é_HTML">O que é HTML?</h2>
+
+<p>{{glossary("HTML")}} (HyperText Markup Language) não é uma linguagem de programação, é uma <em>linguagem de marcação</em> utilizada para dizer ao seu navegador como estruturar a página web que você visita. A página pode ser tanto complicada como simples quanto o desenvolvedor web desejar que seja. HTML consiste em uma série de {{glossary("Element", "elementos")}} que você usa para anexar, envolver ou <em>marcar</em> diferentes partes do conteúdo para que apareça ou aja de uma certa maneira. O fechamento das {{glossary("Tag", "tags")}} pode transformar uma parte do conteúdo dentro do elemento em um link para direcionar à uma outra página web, colocar as palavras em itálico, e assim por diante. Por exemplo, observe o conteúdo a seguir:</p>
+
+<pre class="notranslate">Meu gato é muito mal-humorado.</pre>
+
+<p> Se nós quisermos que a linha permaneça, nós podemos especificar que é um parágrafo, fechando-a com a elemento de parágrafo({{htmlelement("p")}}):</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meu gato é muito mal-humorado.&lt;/p&gt;</pre>
+
+<h2 id="Anatomia_de_um_elemento_HTML">Anatomia de um elemento HTML</h2>
+
+<p>Vamos explorar nosso elemento parágrafo um pouco mais:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>As partes principais do elemento são:</p>
+
+<ol>
+ <li><strong>Tag de abertura:</strong> Consiste no nome do elemento ( neste caso: p ), envolvido entre <strong>parênteses angulares</strong> de abertura e fechamento. Isso indica onde o elemento começa, ou inicia a produzir efeito — neste caso, onde o parágrafo se inicia.</li>
+ <li><strong> Tag de fechamento:</strong>  É o mesmo que a tag de abertura, exceto que este inclui uma barra diagonal antes do nome do elemento. Indica onde o elemento termina — neste caso, onde fica o fim do parágrafo. Falhar em incluir o fechamento de uma tag é um erro comum para iniciantes e pode levar a resultados estranhos.</li>
+ <li><strong>O conteúdo:</strong>  Este é o conteúdo do elemento, que neste caso é somente texto.</li>
+ <li><strong>O elemento:</strong> A tag de abertura, mais a tag de fechamento, mais o conteúdo, é igual ao elemento.</li>
+</ol>
+
+<h3 id="Aprendizado_ativo_criando_seu_primeiro_elemento_HTML">Aprendizado ativo: criando seu primeiro elemento HTML</h3>
+
+<p>Edite a linha abaixo na área <em>Entrada</em> colocando-a entre as tags <code>&lt;em&gt;</code> e <code>&lt;/em&gt;</code> (adicione o <code>&lt;em&gt;</code> <em>antes para abrir o elemento</em>, e <code>&lt;/em&gt;</code> depois, <em>para fechar o elemento</em>). Isto dará à linha uma ênfase em itálico! Você poderá ver as mudanças efetuadas no momento na área <em>Saída.</em></p>
+
+<p>Caso você cometa um erro, você pode usar o botão <em>Resetar</em> para desfazer a ação incorreta. Se você realmente não souber o que fazer, pressione o botão <em>Mostrar solução</em> para visualizar a resposta.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editável&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
+  Este é meu texto.
+&lt;/textarea&gt;
+
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Resetar" /&gt;
+  &lt;input id="solution" type="button" value="Mostrar solução" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: 'Open Sans Light',Helvetica,Arial,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">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solução';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solução') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solução';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solução';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;em&gt;Este é meu texto.&lt;/em&gt;';
+var 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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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 === 'Mostrar solução') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Aninhando_elementos">Aninhando elementos</h3>
+
+<p>Elementos podem ser inseridos dentro de outros elementos — isto é chamado de  <strong>aninhamento</strong>. Se nós quisermos dizer que nosso gato é <strong>muito </strong>mal-humorado, nós poderemos envolver a palavra "muito" com o elemento {{htmlelement("strong")}},  que significa enfatizar fortemente a palavra:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meu gato é &lt;strong&gt;muito&lt;/strong&gt; mal-humorado.&lt;/p&gt;</pre>
+
+<p>No entanto, você precisa garantir que seus elementos estejam adequadamente aninhados: no exemplo acima nós abrimos o elemento <code>p</code> primeiro, e então o elemento <code>strong</code>, portanto temos que fechar o elemento <code>strong</code> primeiro, depois o <code>p</code>. O código a seguir está errado:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Meu gato é &lt;strong&gt;muito mal-humorado.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Os elementos devem abrir e fechar corretamente para que eles fiquem claramente dentro ou fora do outro. Caso eles se sobreponham, como no exemplo acima, então o seu navegador tentará adivinhar o que você quis dizer, e talvez você obtenha resultados inesperados. Então não faça isso!</p>
+
+<h3 id="Elementos_em_bloco_versus_elementos_inline">Elementos em bloco versus elementos inline</h3>
+
+<p>Há duas categorias importantes no HTML, que você precisa conhecer. Eles são elementos em bloco e elementos inline.</p>
+
+<ul>
+ <li>Elementos em bloco formam um bloco visível na página — eles aparecerão em uma nova linha logo após qualquer elemento que venha antes dele, e qualquer conteúdo depois de um elemento em bloco também aparecerá em uma nova linha. Elementos em bloco geralmente são elementos estruturais na página que representam, por exemplo: parágrafos, listas, menus de navegação, rodapés etc. Um elemento em bloco não seria aninhado dentro de um elemento inline, mas pode ser aninhado dentro de outro elemento em bloco.</li>
+ <li>Elementos inline (na linha) são aqueles que estão contidos dentro de elementos em bloco envolvem apenas pequenas partes do conteúdo do documento e não parágrafos inteiros ou agrupamentos de conteúdo. Um elemento inline não fará com que uma nova linha apareça no documento: os elementos inline geralmente aparecem dentro de um parágrafo de texto, por exemplo: um elemento {{htmlelement("a")}}(hyperlink) ou elementos de ênfase como {{htmlelement("em")}} ou {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Veja o seguinte exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;em&gt;primeiro&lt;/em&gt;&lt;em&gt;segundo&lt;/em&gt;&lt;em&gt;terceiro&lt;/em&gt;
+
+&lt;p&gt;quarto&lt;/p&gt;&lt;p&gt;quinto&lt;/p&gt;&lt;p&gt;sexto&lt;/p&gt;
+</pre>
+
+<p>O elemento {{htmlelement("em")}} é inline, então como você pode ver abaixo, os três primeiros elementos ficam na mesma linha uns dos outros sem espaço entre eles. O {{htmlelement("p")}}, por outro lado, é um elemento em bloco, então cada elemento aparece em uma nova linha, com espaço acima e abaixo de cada um (o espaçamento é devido à <a href="/pt-BR/docs/Learn/CSS/First_steps">estilização CSS</a> padrão que o browser aplica aos parágrafos).</p>
+
+<p>{{ EmbedLiveSample('Elementos_em_bloco_versus_elementos_inline', 700, 200, "", "") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: o HTML5 redefiniu as categorias de elemento em HTML5: veja <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Categorias de conteúdo de elementos</a>. Enquanto essas definições são mais precisas e menos ambíguas que as anteriores, elas são muito mais complicadas de entender do que "em bloco" e "inline", então usaremos estas ao longo deste tópico.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: <span class="tlid-translation translation" lang="pt"><span title="">Os termos "bloco" e "inline", conforme usados neste tópico, não devem ser confundidos com os <a href="/pt-BR/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">tipos de caixas CSS</a> com os mesmos nomes.</span> <span title="">Embora eles se correlacionem por padrão, alterar o tipo de exibição CSS não altera a categoria do elemento e não afeta em quais elementos ele pode conter e em quais elementos ele pode estar contido. Um dos motivos pelos quais o HTML5 abandonou esses termos foi</span> <span title="">evitar essa confusão bastante comum.</span></span>  </p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar páginas de referência úteis que incluem uma lista de elementos inline e em bloco — veja <a href="/en-US/docs/Web/HTML/Block-level_elements">elementos em bloco</a> e <a href="/en-US/docs/Web/HTML/Inline_elements">elementos inline</a>.</p>
+</div>
+
+<h3 id="Elementos_vazios">Elementos vazios</h3>
+
+<p>Nem todos os elementos seguem o padrão acima de: tag de abertura, conteúdo, tag de fechamento. Alguns elementos consistem apenas em uma única tag, que é geralmente usada para inserir/incorporar algo no documento no lugar em que ele é incluído. Por exemplo, o elemento {{htmlelement("img")}} insere uma imagem em uma página na posição em que ele é incluído:</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+
+<p>Isto exibirá em sua página:</p>
+
+<p>{{ EmbedLiveSample('Elementos_vazios', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Elementos vazios são também chamados de <em>void elements</em>.</p>
+</div>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Elementos também podem conter atributos, que se apresentam da seguinte forma:</p>
+
+<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Atributos contém informação extra sobre o elemento, mas que você não deseja que apareça no conteúdo. Nete caso, o atributo <code>class</code> permite que você dê ao elemento um nome de identificação, que pode ser usada mais tarde para direcionar informação de estilo ao elemento e outras coisas.</p>
+
+<p>Um atributo deve conter:</p>
+
+<ol>
+ <li>Um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.)</li>
+ <li>O nome do atributo, seguido por um sinal de igual.</li>
+ <li><span class="tlid-translation translation" lang="pt"><span title="">Um valor de atributo, com aspas de abertura e fechamento em volta dele.</span></span></li>
+</ol>
+
+<h3 id="Aprendizado_ativo_Adicionando_atributos_a_um_elemento">Aprendizado ativo: Adicionando atributos a um elemento</h3>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Outro exemplo de um elemento é </span></span>{{htmlelement("a")}}<span class="tlid-translation translation" lang="pt"><span title=""> </span></span>—<span class="tlid-translation translation" lang="pt"><span title=""> isso significa "âncora" e fará com que a parte do texto que ele envolve vire um link.</span> <span title="">Isso pode ter vários atributos, mas o mais comuns são os seguintes:</span></span></p>
+
+<ul>
+ <li>O valor desse atributo especifica o endereço da web para o qual você deseja que o link aponte; onde o navegador irá quando o link for clicado. Por exemplo <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><code>title</code>: O atributo <code>title</code> especifica uma informação extra sobre o link, assim como o assunto da página que está sendo linkada. Por exemplo <code>title="Homepage da Mozilla"</code>. Isto será exibido como uma <em>tooltip (dica de contexto)</em> quando passarmos o mouse sobre o link.</li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Edite a linha abaixo na área de Entrada para transformá-la em um link para o seu site favorito.</span></span></p>
+
+<ol>
+ <li>Primeiro, adicione o elemento <code>&lt;a&gt;</code>.</li>
+ <li>Segundo, adicione o atributo <code>href</code> e o atributo <code>title</code>.</li>
+ <li>Por último, especifique o atributo <code>target</code> para abrir o link em uma nova aba.</li>
+</ol>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Você poderá ver as atualizações das alterações ao vivo na área Saída.</span> <span title="">Você deve ver um link que, quando passa o mouse sobre ele, exibe o valor do atributo </span></span><code>title</code><span class="tlid-translation translation" lang="pt"><span title=""> e, quando clicado, navega para o endereço da web no atributo </span></span><code>href</code><span class="tlid-translation translation" lang="pt"><span title="">.</span> <span title="">Lembre-se de que você precisa incluir um espaço entre o nome do elemento e cada atributo.</span></span></p>
+
+<p>Caso você cometa um erro, você poderá desfazê-lo usando o botão <em>Reset</em>ar. Caso você realmente não saiba como fazer, pressione o botão <em>Mostrar solução</em> para ver a resposta.</p>
+
+<div class="hidden">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editável&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;Um link para o meu site favorito.&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Resetar"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solução"&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">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solução';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solução') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solução';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solução';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;Um link para o meu &lt;a href="https://www.mozilla.org/" title="Página da Mozilla" target="_blank"&gt; site favorito&lt;/a&gt;.&lt;/p&gt;';
+var 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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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 === 'Mostrar solução') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Atributos_boleanos">Atributos  boleanos</h3>
+
+<p>Às vezes você verá atributos escritos sem valores — isso é permitido nos chamados atributos boleanos, e eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Por exemplo, o atributo {{htmlattrxref("disabled", "input")}} você pode atribuir para os elementos de entrada de formulários, se desejar que estes estejam desativados (acinzentados), para que o usuário não possa inserir nenhum dado neles.</p>
+
+<pre class="notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>De forma abreviada, é perfeitamente permitido escrever isso da seguinte maneira (também incluímos um elemento de entrada de formulário não desativado para referência, para dar uma idéia do que está acontecendo):</p>
+
+<pre class="brush: html notranslate">&lt;!-- o uso do atributo disabled impede que o usuário final insira texto na caixa de entrada --&gt;
+&lt;input type="text" disabled&gt;
+
+&lt;!-- O usuário pode inserir texto na caixa de entrada a seguir, pois não contém o atributo disabled --&gt;
+&lt;input type="text"&gt;
+</pre>
+
+<p>Ambos resultarão em uma <em>Saída</em> da seguinte forma:</p>
+
+<p>{{ EmbedLiveSample('Atributos_boleanos', 700, 100) }}</p>
+
+<h3 id="Omitindo_as_aspas_dos_valores_do_atributo">Omitindo as aspas dos valores do atributo</h3>
+
+<p>Olhando a World Wide Web (internet), você encontrará todos os tipos de estilos de marcação HTML, incluindo valores de atributos sem as aspas. Isso é permitido em algumas circunstâncias, mas irá quebrar sua marcação em outras. Por exemplo, se voltarmos ao exemplo anterior de link , nós podemos escrever a versão básica deste somente com o atributo <code>href</code>, da seguinte forma:</p>
+
+<pre class="notranslate">&lt;a href=<code>https://www.mozilla.org/</code>&gt;site favorito&lt;/a&gt;</pre>
+
+<p>No entanto, assim que adicionamos o atributo <code>title</code> neste elemento, a marcação resultará em erro:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage&gt;site favorito&lt;/a&gt;</pre>
+
+<p>Neste ponto, o navegador irá interpretar errado sua marcação, de modo a pensar que o atributo <code>title</code> trata-se, na verdade, de três atributos: o atributo <code>title</code> com o valor "The", e dois atributos boleanos, <code>Mozilla</code> e <code>homepage</code>. Esta obviamente não era a intenção e irá causar erros ou um comportamento inesperado no código, assim como visto no exemplo abaixo. Tente colocar o mouse em cima do link para visualizar qual é o título que aparece!</p>
+
+<p>{{ EmbedLiveSample('Omitindo_as_aspas_dos_valores_do_atributo', 700, 100) }}</p>
+
+<p>Nossa recomendação é <em>sempre incluir as aspas nos valores dos atributos </em>— isto evita inúmeros problemas, além de resultar em um código mais legível.</p>
+
+<h3 id="Aspas_simples_ou_duplas">Aspas simples ou duplas?</h3>
+
+<p>Você pode perceber que os valores dos atributos exemplificados neste artigo estão todos com aspas duplas, mas você poderá ver aspas simples no HTML de algumas pessoas. Esta é puramente uma questão de estilo e você pode se sentir livre para escolher qual prefere. As duas linhas de código a seguir são equivalentes:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com"&gt;Um link para o exemplo.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;Um link para o exemplo.&lt;/a&gt;</pre>
+
+<p>Entretanto, você deve se certificar de não misturar os dois tipos de aspas juntos. O exemplo a seguir está errado!</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href="http://www.exemplo.com'&gt;Um link para o exemplo.&lt;/a&gt;</pre>
+
+<p>Se utilizar um tipo de aspas no seu HTML, você pode inserir o outro tipo de aspas no texto, por exemplo, que não ocorrerá erro, desta forma: </p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>No entanto, se você quiser incluir aspas, dentro de aspas onde ambas as aspas são do mesmo tipo (aspas simples ou aspas duplas), será necessário usar entidades HTML para as aspas. <span title="">Por exemplo, isso irá quebrar:</span></p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Então você precisa fazer isso:</p>
+
+<pre class="brush: html notranslate">&lt;a href='http://www.example.com' title='Isn&amp;#39;t this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<h2 id="Anatomia_de_um_documento_HTML">Anatomia de um documento HTML</h2>
+
+<p>Já vimos os conceitos básicos dos elementos individuais do HTML, mas eles não são muito úteis sozinhos, Vamos aprender como estes elementos individuais são combinados entre si para criar uma página HTML inteira:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Neste código nós temos:</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code>: O doctype. Nas névoas do tempo, quando o HTML era recente (por volta de 1991/2), doctypes funcionavam como links para uma série de regras as quais uma página HTML tinha que seguir para ser considerada uma página com um bom HTML, o que poderia significar a verificação automática de erros e outras coisas úteis. Ele costumava ser assim:
+
+  <pre class="notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  <span class="tlid-translation translation" lang="pt"><span title="">No entanto, atualmente, ninguém se importa com eles, e eles são realmente apenas um artefato histórico que precisa ser incluído para que tudo funcione corretamente.</span> <span title="">&lt;! DOCTYPE html&gt; é a menor cadeia de caracteres que conta como um doctype válido;</span> <span title="">é tudo o que você realmente precisa saber.</span></span></li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code>: O elemento <a href="/pt-BR/docs/Web/HTML/Element/html" title="The HTML &lt;html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element."><code>&lt;html&gt;</code></a> envolve o conteúdo da página inteira e é conhecido como o "elemento raiz" da página HTML.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: O elemento <a href="/pt-BR/docs/Web/HTML/Element/head" title="The HTML &lt;head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets."><code>&lt;head&gt;</code></a> atua como um container para todo o conteúdo da página HTML que não é visível para os visitantes do site. Isso inclui palavras-chave e a descrição da página que você quer que apareça nos resultados de busca,  o CSS para estilizar o conteúdo da página (apesar de ser recomendado faze-lo num aquivo separado), declaração de conjunto de caracteres, e etc. Você aprenderá mais sobre isso no próximo artigo da série.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code>: Este elemento define o tipo da codificação dos caracteres que o seu documento deve usar, neste caso, para o tipo UTF-8, que inclui a maioria dos caracteres das linguas humanas escritas. Essencialmente, ele consegue lidar com qualquer tipo de conteúdo textual que você puder colocar no documento. Não há motivos para não indicar essa informação e esse elemento ajuda a evitar vários problemas na sua página.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code>: O elemento <a href="/pt-BR/docs/Web/HTML/Element/title" title="The HTML Title element (&lt;title>) defines the document's title that is shown in a browser's title bar or a page's tab."><code>&lt;title&gt;</code></a>. Isto define o título de sua página, que aparecerá na guia do navegador na qual a página está carregada e é usado para descrevê-la quando for salva nos favoritos.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code>: O elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body" title="The HTML &lt;body> Element represents the content of an HTML document. There can be only one &lt;body> element in a document."><code>&lt;body&gt;</code></a> contém <em>todo</em> o conteúdo que você quer mostrar aos usuários quando eles visitarem sua página, como texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, ou qualquer outra coisa.</li>
+</ol>
+
+<h3 id="Aprendizado_ativo_Adicionando_alguns_recursos_ao_documento_HTML">Aprendizado ativo: Adicionando alguns recursos ao documento HTML</h3>
+
+<p>Se você quiser experimentar como funciona um documento HTML no seu computador, você pode:</p>
+
+<ol>
+ <li>Copiar o exemplo de página HTML mostrada acima.</li>
+ <li>Criar um novo documento em seu editor de texto.</li>
+ <li>Colar o código no novo arquivo de texto.</li>
+ <li>Salvar o arquivo com o nome <code>index.html</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Você também pode encontrar o template básico de HTML no <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
+</div>
+
+<p>Você pode abrir este arquivo no navegador para ver como o código renderizado se apresenta, e então, editar o código e atualizar a página no navegador para ver o resultado com as mudanças. Inicialmente será exibido assim:</p>
+
+<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Neste exercício, você pode editar o código localmente em seu computador, com descrito acima, ou você pode editá-lo na janela de exemplo editável abaixo (esta janela editável representa apenas o conteúdo do elemento <code>&lt;body&gt;</code> , neste caso). Nós gostaríamos que você seguisse as seguintes etapas:</p>
+
+<ul>
+ <li>Logo abaixo da tag de abertura <a href="/pt-BR/docs/Web/HTML/Element/body" title="The HTML &lt;body> Element represents the content of an HTML document. There can be only one &lt;body> element in a document."><code>&lt;body&gt;</code></a>, adicione um título principal para o documento. Isso deve estar dentro da tag de abertura <code>&lt;h1&gt;</code>e da tag de fechamento <code>&lt;/h1&gt;</code> .</li>
+ <li>Edite o conteúdo do parágrafo para incluir algum texto sobre algo de seu interesse.</li>
+ <li>Faça com que todas as palavras importantes sejam destacadas em negrito, colocando-as dentro da tag de abertura <code>&lt;strong&gt;</code> e da tag de fechamento <code>&lt;/strong&gt;</code> .</li>
+ <li>Adicione um link ao seu parágrafo, conforme <a href="/pt-BR/Aprender/HTML/Introducao_ao_HTML/Getting_started#Aprendizado_ativo_Adicionando_atributos_a_um_elemento">explicado anteriormente neste artigo</a>.</li>
+ <li>conforme explicado anteriormente no artigo. <span title="">Você receberá pontos de bônus se conseguir vincular a uma imagem diferente (localmente no seu computador ou em outro lugar da web).</span></li>
+</ul>
+
+<p>Caso você cometa um erro, você poderá desfazê-lo usando o botão <em>Resetar</em>. Caso você realmente não saiba como fazer, pressione o botão <em>Mostrar solução</em> para ver a resposta.</p>
+
+<div class="hidden">
+<h6 id="Playable_code3">Playable code3</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editável&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;Esta é minha página&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Resetar"&gt;
+  &lt;input id="solution" type="button" value="Mostrar Solução"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h1 {
+ color: blue;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar Solução';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar Solução') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar Solução';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar Solução';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Algumas músicas&lt;/h1&gt;&lt;p&gt;Gosto muito de &lt;strong&gt; tocar bateria &lt;/strong&gt;. Um dos meus bateristas favoritos é Neal Peart, que toca na banda &lt;a href="https://pt.wikipedia.org/wiki/Rush" title="Artigo da Rush na Wikipedia"&gt;Rush&lt;/a&gt;. Meu álbum favorito do Rush atualmente é &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;&lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+var 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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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 === 'Mostrar Solução') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Espaços_em_branco_no_HTML">Espaços em branco no HTML</h3>
+
+<p>Nos exemplos anteriores, você pode ter percebido a presença de espaços em branco nos códigos — isto não é necessário; os dois trechos de códigos a seguir são equivalentes:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Dogs are silly.&lt;/p&gt;
+
+&lt;p&gt;Dogs        are
+         silly.&lt;/p&gt;</pre>
+
+<p>Não importa quantos espaços em branco você use (que pode incluir caracteres de espaço, mas também quebras de linha), o analisador de HTML reduz cada um deles em um único espaço ao renderizar o código. Então, por que espaço em branco? A resposta é legibilidade — é muito mais fácil entender o que está acontecendo no seu código, se você o tiver bem formatado, e não apenas agrupado em uma grande confusão. Em nosso HTML, cada elemento aninhado é indentado em dois espaços a mais do que aquele em que está localizado. Depende de você que estilo de formatação você usa (quantos espaços para cada nível de recuo, por exemplo), mas considere formatá-lo.</p>
+
+<h2 id="Referências_de_entidades_incluindo_caracteres_especiais_no_HTML">Referências de entidades: incluindo caracteres especiais no HTML</h2>
+
+<p>No HTML, os caracteres <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> e o <code>&amp;</code> são caracteres especiais. Eles fazem parte da própria sintaxe HTML; portanto, como você inclui um desses caracteres no seu texto? Por exemplo, se você realmente deseja usar um e comercial ou sinal de menor que, e não tenha ele interpretado como código.</p>
+
+<p>Temos que usar referências de caracteres — códigos especiais que representam caracteres e podem ser usados nessas circunstâncias. Cada referência de caractere é iniciada com um e comercial (&amp;) e finalizada por um ponto e vírgula (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caractere literal</th>
+   <th scope="col">Referência de caractere equivalente</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>No exemplo abaixo, você pode ver dois parágrafos, que estão falando sobre tecnologias da web:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Em HTML, você define um parágrafo usando o elemento &lt;p&gt;.&lt;/p&gt;
+
+&lt;p&gt;Em HTML, você define um parágrafo usando o elemento &amp;lt;p&amp;gt;.&lt;/p&gt;</pre>
+
+<p>Na saída ao vivo abaixo, você pode ver que o primeiro parágrafo deu errado, porque o navegador pensa que a segunda instância de &lt;p&gt; está iniciando um novo parágrafo. O segundo parágrafo parece bom, porque substituímos os parênteses angulares por referências de caracteres.</p>
+
+<p>{{EmbedLiveSample('Referências_de_entidades_incluindo_caracteres_especiais_no_HTML', 7700, 200, "", "", "hide-codepen-jsfiddle")}}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: A tabela com todas as referências de caracteres disponíveis em HTML pode ser encontrada na Wikipédia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>. Observe que você não precisa usar referências de entidade para outros símbolos, pois os navegadores modernos manipularão os símbolos reais muito bem, desde que a codificação de caracteres do HTML esteja definida como UTF-8.</p>
+</div>
+
+<h2 id="Comentários_no_HTML">Comentários no HTML</h2>
+
+<p>Em HTML, assim como na maioria das linguagens de programação, há um mecanismo para escrevermos comentários no código — comentários são ignorados pelo navegador e são invisíveis para o usuário, seu propósito é permitir a inclusão de comentários para descrever como o código funciona, especificar o que cada parte dele faz, e por ai vai. <span class="tlid-translation translation" lang="pt"><span title="">Isso pode ser muito útil se você retornar a uma base de código em que não trabalhou há muito tempo e não se lembrar do que fez </span></span> — <span class="tlid-translation translation" lang="pt"><span title=""> ou se você entregar seu código para outra pessoa trabalhar.</span></span></p>
+
+<p>Para transformar uma seção do conteúdo HTML em um comentário, você precisa agrupá-lo nos marcadores especiais <code>&lt;!--</code> e <code>--&gt;</code>, por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Eu não estou dentro de um comentário&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;Eu estou!&lt;/p&gt; --&gt;</pre>
+
+<p>Como você pode ver abaixo, o primeiro parágrafo fica visível na saída ao vivo, mas o segundo (que é um comentário) não.</p>
+
+<p>{{ EmbedLiveSample('Comentários_no_HTML', 700, 100) }}</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Você chegou ao final do artigo — esperamos que tenha gostado do seu tour pelos princípios básicos do HTML! Nesse ponto, você deve entender como é a linguagem, como ela funciona em um nível básico e ser capaz de escrever alguns elementos e atributos. Este é o lugar perfeito para se estar agora, já que os artigos subseqüentes deste módulo abordarão algumas das coisas que você já examinou com mais detalhes e introduzirão alguns novos conceitos da linguagem. Fique ligado!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Nesse ponto, à medida que você começa a aprender mais sobre HTML, também pode querer explorar os conceitos básicos de Cascading Style Sheets, ou <a href="/pt-BR/docs/Aprender/CSS">CSS</a>. CSS é a linguagem usada para estilizar suas páginas da web (por exemplo, alterando a fonte ou as cores ou alterando o layout da página). HTML e CSS vão muito bem juntos, como você descobrirá em breve.</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/HTML/Applying_color">Aplicando cores a elementos HTML usando CSS</a> </li>
+</ul>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML">O que está no cabeçalho? Metadados em HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando links</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites">Estrutura do documento e site</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Debugging_HTML">Depurando HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Marking_up_a_letter">Marcando uma carta</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Structuring_a_page_of_content">Estruturando o conteudo de uma página</a></li>
+</ul>
diff --git a/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html
new file mode 100644
index 0000000000..47ca918b68
--- /dev/null
+++ b/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -0,0 +1,955 @@
+---
+title: Fundamentos do texto em HTML
+slug: Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML
+tags:
+  - Aprender
+  - Guía
+  - HTML
+  - Iniciante
+  - Introdução
+  - Texto
+  - cabeçalho
+  - parágrafo
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Um dos principais objetivos do HTML é dar estrutura de texto e significado, também conhecido como {{glossary("semantics", "semântica")}}), para que um navegador possa exibi-lo corretamente. Este artigo explica a forma como {{glossary("HTML")}} pode ser usado para estruturar uma página de texto, adicionar títulos e parágrafos, enfatizar palavras, criar listas e muito mais.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Familiaridade básica em HTML, tal como coberto  <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com o HTML.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprenda como marcar uma página básica de texto para dar-lhe estrutura e significado — incluindo parágrafos, títulos, listas, ênfase e citações.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_básico_Cabeçalhos_e_Parágrafos">O básico: Cabeçalhos e Parágrafos</h2>
+
+<p>O texto mais estruturado é composto por títulos e parágrafos,esteja você lendo uma história, um jornal, um livro da faculdade, uma revista, etc.</p>
+
+<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p>
+
+<p>O conteúdo estruturado torna a experiência de leitura mais fácil e mais agradável.</p>
+
+<p>Em HTML, cada parágrafo deve ser envolvido em um elemento {{htmlelement("p")}} , assim:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Eu sou um parágrafo, oh sim, eu sou.&lt;/p&gt;</pre>
+
+<p>Cada título deve ser envolvido em um elemento de título:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Eu sou o título da história.&lt;/h1&gt;</pre>
+
+<p>Existem seis elementos de título — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} e {{htmlelement("h6")}} . Cada elemento representa um nível diferente de conteúdo no documento; <code>&lt;h1&gt;</code> representa o título principal, <code>&lt;h2&gt;</code> representa subtítulos, <code>&lt;h3&gt;</code> representa sub-subtítulos, e assim por diante.</p>
+
+<h3 id="Implementando_hierarquia_estrutural">Implementando hierarquia estrutural</h3>
+
+<p>Como exemplo, em uma história, <code>&lt;h1&gt;</code> representaria o título da história, <code>&lt;h2&gt;</code> representaria o título de cada capítulo e <code>&lt;h3&gt;</code> representaria sub-seções de cada capítulo, e assim por diante.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;O furo esmagador&lt;/h1&gt;
+
+&lt;p&gt;Por Chris Mills&lt;/p&gt;
+
+&lt;h2&gt;Capítulo 1: A noite escura&lt;/h2&gt;
+
+&lt;p&gt;Era uma noite escura. Em algum lugar, uma coruja piou. A chuva caiu no chão ...&lt;/p&gt;
+
+&lt;h2&gt;Capítulo 2: O eterno silêncio&lt;/h2&gt;
+
+&lt;p&gt;Nosso protagonista não podia ver mais que um relance da figura sombria ...&lt;/p&gt;
+
+&lt;h3&gt;O espectro fala&lt;/h3&gt;
+
+&lt;p&gt;Várias horas se passaram, quando, de repente, o espectro ficou em pé e exclamou: "Por favor, tenha piedade da minha alma!"&lt;/p&gt;</pre>
+
+<p>Depende realmente de você, o quê, exatamente, representam os elementos envolvidos, desde que a hierarquia faça sentido. Você só precisa ter em mente algumas das melhores práticas ao criar tais estruturas:</p>
+
+<ul>
+ <li>Preferencialmente, você deve usar apenas um <code>&lt;h1&gt;</code> por página — esse é o título do nível superior e todos os outros ficam abaixo dele, na hierarquia.</li>
+ <li>Certifique-se de usar os títulos na ordem correta na hierarquia. Não use <code>&lt;h3&gt;</code> para representar subtítulos, seguido de <code>&lt;h2&gt;</code>para representar sub-subtítulos - isso não faz sentido e levará a resultados estranhos.</li>
+ <li>Dos seis níveis de cabeçalho disponíveis, você deve usar no máximo três por página, a menos que considere necessário usar mais. Documentos com vários níveis (ou seja, uma hierarquia profunda de cabeçalho) tornam-se difíceis de navegar. Nessas ocasiões, é aconselhável espalhar o conteúdo por várias páginas, se possível.</li>
+</ul>
+
+<h3 id="Por_que_precisamos_de_estrutura">Por que precisamos de estrutura?</h3>
+
+<p>Para responder a esta pergunta, dê uma olhada em <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — o ponto de partida do nosso exemplo em execução para este artigo (uma boa receita de hummus.) Você deve salvar uma cópia desse arquivo em sua máquina local, pois será necessário para os exercícios posteriores. No momento, o corpo deste documento contém várias partes do conteúdo — elas não são marcadas de forma alguma, mas são separadas por quebras de linha (Enter/Return pressionado para ir para a próxima linha).</p>
+
+<p>No entanto, quando você abre o documento em seu navegador, você verá que o texto aparece como uma só parte!</p>
+
+<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;"></p>
+
+<p>Isso ocorre porque não há elementos para dar a estrutura de conteúdo, então o navegador não sabe o que é um título e o que é um parágrafo. Além disso:</p>
+
+<ul>
+ <li>Os usuários que olham para uma página web tendem a procurar rapidamente conteúdo relevante, muitas vezes apenas lendo os títulos para começar (normalmente <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">passamos um tempo muito curto em uma página web</a>). Se eles não conseguem ver nada útil dentro de alguns segundos, eles provavelmente ficarão frustrados e irão para outro lugar.</li>
+ <li>Os mecanismos de pesquisa que indexam sua página consideram o conteúdo dos títulos como palavras-chave importantes para influenciar os rankings de pesquisa da página. Sem cabeçalhos, sua página irá funcionar mal em termos de {{glossary("SEO")}} (Search Engine Optimization).</li>
+ <li>As pessoas com deficiência visual, muitas vezes, não leem páginas da web; elas escutam-na em vez disso. Isso é feito com um software chamado <a href="https://pt.wikipedia.org/wiki/Leitor_de_tela" title="screen readers">leitor de tela</a>. Este software fornece formas de obter acesso rápido a determinado conteúdo de texto. Entre as várias técnicas utilizadas, elas fornecem um esboço do documento lendo os títulos, permitindo que seus usuários encontrem as informações que precisam rapidamente. Se os títulos não estiverem disponíveis, eles serão obrigados a ouvir todo o documento lido em voz alta.</li>
+ <li>Para criar um estilo de conteúdo com {{glossary("CSS")}}, ou fazer coisas interessantes com {{glossary("JavaScript")}}, você precisa ter elementos que envolvam o conteúdo relevante, assim CSS/JavaScript pode efetivamente segmentá-lo.</li>
+</ul>
+
+<p>Nós, portanto, precisamos dar marcações estruturais ao nosso conteúdo.</p>
+
+<h3 id="Aprendizagem_ativa_Fornecendo_nossa_estrutura_de_conteúdo">Aprendizagem ativa: Fornecendo nossa estrutura de conteúdo</h3>
+
+<p>Vamos pular diretamente com um exemplo ao vivo. No exemplo abaixo, adicione elementos ao texto bruto no campo <em>Entrada</em> para que ele apareça como um título e dois parágrafos no campo <em>Saída</em>.</p>
+
+<p>Se você cometer um erro, você sempre pode reiniciar usando o botão <em>Resetar</em>. Se você ficar preso, pressione o botão <em>Mostrar solução</em> para ver a resposta.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editável&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;Minha pequena história: sou policial e meu nome é Trish.
+
+Minhas pernas são feitas de papelão e sou casada com um peixe.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Resetar"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solução"&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">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solução';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solução') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solução';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solução';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Minha pequena história&lt;/h1&gt;\n&lt;p&gt;Sou policial e meu nome é Trish.&lt;/p&gt;\n&lt;p&gt;Minhas pernas são feitas de papelão e sou casada com um peixe.&lt;/p&gt;';
+var 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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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 === 'Mostrar solução') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Por_que_precisamos_de_semântica">Por que precisamos de semântica?</h3>
+
+<p>A semântica estã em todos os lugares — contamos com experiência anterior para nos dizer qual é a função dos objetos do dia a dia. Quando vemos algo, sabemos qual será a sua função. Então, por exemplo, esperamos que um semáforo vermelho signifique "pare" e um semáforo verde signifique "ir". As coisas podem ficar complicadas muito rapidamente se a semântica errada for aplicada (os países usam vermelho para significar "ir"? Espero que não).</p>
+
+<p>Na mesma linha, precisamos ter certeza de que estamos usando os elementos corretos, dando ao nosso conteúdo o significado, função ou aparência corretos. Nesse contexto, o elemento  {{htmlelement("h1")}} também é um elemento semântico, que dá o texto que envolve a representação (ou significado) de "um título de nível superior em sua página".</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Este é um título de nível superior&lt;/h1&gt;</pre>
+
+<p>Por padrão, o navegador fornecerá um tamanho de fonte grande para torná-lo um cabeçalho (embora você possa estilizá-lo como qualquer coisa que você quiser usando CSS). Mais importante, seu valor semântico será usado de várias maneiras, por exemplo, por mecanismos de pesquisa e leitores de tela (como mencionado acima).</p>
+
+<p>Por outro lado, você pode fazer com que qualquer elemento se pareça um título de nível superior. Considere o seguinte:</p>
+
+<pre class="brush: html notranslate">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Este é um título de nível superior?&lt;/span&gt;</pre>
+
+<p>Este é um elemento {{htmlelement("span")}}. Não tem semântica. Você usa-o para agrupar conteúdo quando deseja aplicar o CSS (ou fazer algo com JavaScript) sem dar-lhe nenhum significado extra (você saberá mais sobre isto mais tarde, no curso). Nós aplicamos alguns CSS para fazê-lo parecer um título de nível superior, mas como não tem valor semântico, ele não receberá nenhum dos benefícios extras descritos acima. É uma boa idéia usar o elemento HTML relevante para o trabalho.</p>
+
+<h2 id="Listas">Listas</h2>
+
+<p>Agora voltemos nossa atenção para as listas. As listas estão em toda parte na vida — de sua lista de compras à lista de instruções que você seguiu inconscientemente para chegar à sua casa todos os dias, para as listas das instruções que está seguindo nesses tutoriais! As listas também estão na Web e temos três tipos diferentes para prestarmos atenção.</p>
+
+<h3 id="Não_ordenada">Não ordenada</h3>
+
+<p>As listas não ordenadas são usadas para marcar listas de itens para os quais a ordem dos itens não importa — vamos pegar uma lista de compras como um exemplo.</p>
+
+<pre class="notranslate">leite
+ovos
+pão
+homus</pre>
+
+<p>Toda lista desordenada começa com um {{htmlelement("ul")}} — isso envolve todos os itens da lista:</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+leite
+ovos
+pão
+homus
+&lt;/ul&gt;</pre>
+
+<p>O último passo é envolver cada item da lista em um elemento {{htmlelement("li")}} (elemento da lista):</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;leite&lt;/li&gt;
+  &lt;li&gt;ovos&lt;/li&gt;
+  &lt;li&gt;pão&lt;/li&gt;
+  &lt;li&gt;homus&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Aprendizagem_ativa_Marcando_uma_lista_desordenada">Aprendizagem ativa: Marcando uma lista desordenada</h4>
+
+<p>Tente editar a amostra, ao vivo, abaixo para criar sua própria lista não ordenada HTML.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editável&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;leite
+ovos
+pão
+hummus&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Resetar"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solução"&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">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solução';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solução') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solução';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solução';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ul&gt;\n&lt;li&gt;leite&lt;/li&gt;\n&lt;li&gt;ovos&lt;/li&gt;\n&lt;li&gt;pão&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&gt;';
+var 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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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 === 'Mostrar solução') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Ordenada">Ordenada</h3>
+
+<p>As listas ordenadas são listas em que a ordem dos itens é importante — vamos seguir um conjunto de instruções como exemplo:</p>
+
+<pre class="notranslate">Dirija até o final da estrada
+Vire à direita
+Vá em frente nas duas primeiras rotatórias
+Vire à esquerda na terceira rotatória
+A escola fica à sua direita, a 300 metros da estrada</pre>
+
+<p>A estrutura de marcação é a mesma das listas não ordenadas, exceto que você deve conter os itens da lista em um elemento {{htmlelement("ol")}}, em vez de <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Dirija até o final da estrada&lt;/li&gt;
+  &lt;li&gt;Vire à direita&lt;/li&gt;
+  &lt;li&gt;Vá em frente nas duas primeiras rotatórias&lt;/li&gt;
+  &lt;li&gt;Vire à esquerda na terceira rotatória&lt;/li&gt;
+  &lt;li&gt;A escola fica à sua direita, a 300 metros da estrada&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Aprendizagem_ativa_Marcando_uma_lista_ordenada">Aprendizagem ativa: Marcando uma lista ordenada</h4>
+
+<p>Tente editar a amostra ao vivo abaixo, para criar sua própria lista ordenada por HTML.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editável&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Dirija até o final da estrada
+Vire à direita
+Vá em frente nas duas primeiras rotatórias
+Vire à esquerda na terceira rotatória
+A escola fica à sua direita, a 300 metros da estrada&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Resetar"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solução"&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">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solução';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solução') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solução';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solução';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ol&gt;\n&lt;li&gt;Dirija até o final da estrada&lt;/li&gt;\n&lt;li&gt;Vire à direita&lt;/li&gt;\n&lt;li&gt;Vá em frente nas duas primeiras rotatórias&lt;/li&gt;\n&lt;li&gt;Vire à esquerda na terceira rotatória&lt;/li&gt;\n&lt;li&gt;A escola fica à sua direita, a 300 metros da estrada&lt;/li&gt;\n&lt;/ol&gt;';
+var 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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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 === 'Mostrar solução') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Aprendizagem_ativa_marcando_nossa_página_de_receita">Aprendizagem ativa: marcando nossa página de receita</h3>
+
+<p>Então, neste ponto do artigo, você tem todas as informações necessárias para marcar nosso exemplo de página de receita. Você pode optar por salvar uma cópia local do nosso arquivo inicial de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> e fazer o trabalho lá, ou fazê-lo no exemplo editável abaixo. Fazê-lo, localmente, provavelmente será melhor, pois você conseguirá salvar o trabalho que está fazendo. Enquanto que, se o preencher no exemplo editável, ele será perdido na próxima vez que você abrir a página. Ambos têm prós e contras.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_4">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editável&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Receita rápida de hummus
+
+  Esta receita faz hummus rápido e saboroso, sem mexer. Foi adaptado de várias receitas diferentes que li ao longo dos anos.
+
+  Hummus é uma deliciosa pasta grossa usada fortemente em pratos gregos e do Oriente Médio. É muito saboroso com salada, carnes grelhadas e pães pitta.
+
+  Ingredientes
+
+  1 lata (400g) de grão de bico
+  175g de tahine
+  6 tomates secos
+  Metade de pimenta vermelha
+  Uma pitada de pimenta caiena
+  1 dente de alho
+  Uma pitada de azeite
+
+  Instruções
+
+  Retire a pele do alho e pique
+  Retire todas as sementes e caule da pimenta e pique
+  Adicione todos os ingredientes em um processador de alimentos
+  Processar todos os ingredientes em uma pasta
+  Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo
+  Se você deseja um hummus suave, processe-o por mais tempo
+
+  Para um sabor diferente, você pode tentar misturar uma pequena quantidade de limão e coentro, pimenta, limão e chipotle, harissa e hortelã ou espinafre e queijo feta. Experimente e veja o que funciona para você.
+
+  Armazenamento
+
+  Leve à geladeira o hummus processado em um recipiente fechado. Você poderá usá-lo por cerca de uma semana depois de fazer isso. Se começar a ficar borbulhante, você definitivamente deve descartá-lo.
+
+  Hummus é adequado para congelamento; você pode descongelá-lo e usá-lo dentro de alguns meses.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Resetar"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solução"&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">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solução';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solução') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solução';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solução';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Receita rápida de hummus&lt;/h1&gt;\n\n&lt;p&gt;Esta receita faz hummus rápido e saboroso, sem mexer. Foi adaptado de várias receitas diferentes que li ao longo dos anos.&lt;/p&gt;\n\n&lt;p&gt;Hummus é uma deliciosa pasta grossa usada fortemente em pratos gregos e do Oriente Médio. É muito saboroso com salada, carnes grelhadas e pães pitta.&lt;/p&gt;\n\n&lt;h2&gt;Ingredientes&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 lata (400g) de grão de bico&lt;/li&gt;\n&lt;li&gt;175g de tahine&lt;/li&gt;\n&lt;li&gt;6 tomates secos&lt;/li&gt;\n&lt;li&gt;Metade de pimenta vermelha&lt;/li&gt;\n&lt;li&gt;Uma pitada de pimenta caiena&lt;/li&gt;\n&lt;li&gt;1 dente de alho&lt;/li&gt;\n&lt;li&gt;Uma pitada de azeite&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instruções&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Retire a pele do alho e pique&lt;/li&gt;\n&lt;li&gt;Retire todas as sementes e caule da pimenta e pique&lt;/li&gt;\n&lt;li&gt;Adicione todos os ingredientes em um processador de alimentos&lt;/li&gt;\n&lt;li&gt;Processar todos os ingredientes em uma pasta&lt;/li&gt;\n&lt;li&gt;Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo&lt;/li&gt;\n&lt;li&gt;Se você deseja um hummus suave, processe-o por mais tempo&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;Para um sabor diferente, você pode tentar misturar uma pequena quantidade de limão e coentro, pimenta, limão e chipotle, harissa e hortelã ou espinafre e queijo feta. Experimente e veja o que funciona para você.&lt;/p&gt;\n\n&lt;h2&gt;Armazenamento&lt;/h2&gt;\n\n&lt;p&gt;Leve à geladeira o hummus processado em um recipiente fechado. Você poderá usá-lo por cerca de uma semana depois de fazer isso. Se começar a ficar borbulhante, você definitivamente deve descartá-lo.&lt;/p&gt;\n\n&lt;p&gt;Hummus é adequado para congelamento; você pode descongelá-lo e usá-lo dentro de alguns meses.&lt;/p&gt;';
+var 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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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 === 'Mostrar solução') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Se você ficar preso, você sempre pode pressionar o botão<em> Mostrar solução</em>, ou confira nosso exemplo de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> em nosso repositório Github.</p>
+
+<h3 id="Aninhando_listas">Aninhando listas</h3>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Não há problema em aninhar uma lista dentro de outra.</span> <span title="">Você pode ter algumas sub-listas abaixo de uma lista de nível superior.</span> <span title="">Vamos pegar a segunda lista do nosso exemplo de receita</span></span>:</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Retire a pele do alho e pique&lt;/li&gt;
+  &lt;li&gt;Retire todas as sementes e caule da pimenta e pique&lt;/li&gt;
+  &lt;li&gt;Adicione todos os ingredientes em um processador de alimentos&lt;/li&gt;
+  &lt;li&gt;Processar todos os ingredientes em uma pasta&lt;/li&gt;
+  &lt;li&gt;Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo&lt;/li&gt;
+  &lt;li&gt;Se você deseja um hummus suave, processe-o por mais tempo&lt;/li&gt;
+&lt;/ol&gt; </pre>
+
+<p>Uma vez que as duas últimas listas estão intimamente relacionadas com a anterior (elas leem como sub-instruções ou escolhas que se encaixam abaixo dessa lista), pode fazer sentido aninhá-las dentro de sua própria lista desordenada e colocar essa lista dentro da quarta lista. Isso pareceria assim:</p>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Como os dois últimos itens da lista estão intimamente relacionadas (eles são lidos como sub-instruções ou opções que se encaixam abaixo dessa lista), pode fazer sentido aninha-los em sua própria lista não ordenada e colocá-los no quarto item da lista atual</span><span title="">.</span> <span title="">Isso seria assim:</span></span></p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Retire a pele do alho e pique&lt;/li&gt;
+   &lt;li&gt;Retire todas as sementes e caule da pimenta e pique&lt;/li&gt;
+   &lt;li&gt;Adicione todos os ingredientes em um processador de alimentos&lt;/li&gt;
+   &lt;li&gt;Processar todos os ingredientes em uma pasta
+     &lt;ul&gt;
+       &lt;li&gt;Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo&lt;/li&gt;
+       &lt;li&gt;Se você deseja um hummus suave, processe-o por mais tempo&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Tente voltar ao exemplo de aprendizagem ativo anterior e atualizar a segunda lista como esta aqui.</p>
+
+<h2 id="Ênfase_e_importância">Ênfase e importância</h2>
+
+<p>Na linguagem humana, muitas vezes enfatizamos certas palavras para alterar o significado de uma frase, e muitas vezes queremos marcar certas palavras como importantes ou diferentes de alguma forma. O HTML fornece vários elementos semânticos que nos permitem marcar o conteúdo textual com esses efeitos, e, nesta seção, vamos ver alguns dos mais comuns.</p>
+
+<h3 id="Ênfase">Ênfase</h3>
+
+<p>Quando queremos acrescentar ênfase na linguagem falada, enfatizamos certas palavras, alterando sutilmente o significado do que estamos dizendo. Da mesma forma, em linguagem escrita tendemos a enfatizar as palavras colocando-as em itálico. Por exemplo, as seguintes duas frases têm significados diferentes.</p>
+
+<p>Estou <em>feliz </em>que você não chegou <em>atrasado</em>.</p>
+
+<p>Estou <strong>feliz </strong>que você não chegou <strong>atrasado</strong>.</p>
+
+<p>A primeira frase parece genuinamente aliviada de que a pessoa não estava atrasada. Em contraste, a segunda parece ser sarcástica ou passiva-agressiva, expressando aborrecimento que a pessoa chegou um pouco atrasada.</p>
+
+<p>Em HTML usamos o elemento de ênfase {{htmlelement("em")}} para marcar tais instâncias. Além de tornar o documento mais interessante de ler, estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem isso como itálico por padrão, mas você não deve usar esta tag apenas para obter estilo itálico. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e alguns CSS, ou talvez um elemento {{htmlelement("i")}} (veja abaixo).</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Eu estou &lt;em&gt;feliz&lt;/em&gt; você não está &lt;em&gt;atrasado&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Importância">Importância</h3>
+
+<p>Para enfatizar palavras importantes, tendemos a enfatizá-las na linguagem falada e colocá-la em <strong>negrito</strong> na linguagem escrita. Por exemplo:</p>
+
+<p>Este líquido é <strong>altamente tóxico</strong>.</p>
+
+<p>Eu estou contando com você. <strong>Não</strong> se atrase!</p>
+
+<p>Em HTML usamos o elemento {{htmlelement("strong")}} (importância) para marcar tais instâncias. Além de tornar o documento mais útil, novamente estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem este texto como negrito por padrão, mas você não deve usar esta marca apenas para obter um estilo negrito. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e algum CSS, ou talvez um {{htmlelement("b")}} (veja abaixo).</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Este líquido é &lt;strong&gt;altamente tóxico&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;Estou contando com você. &lt;strong&gt;Não&lt;/strong&gt; se atrase!&lt;/p&gt;</pre>
+
+<p>Você pode aninhar importância e ênfase entre si, se desejar:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Este líquido é &lt;strong&gt;altamente tóxico&lt;/strong&gt; -
+Se você beber, &lt;strong&gt;você pode &lt;em&gt;morrer&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Aprendizagem_ativa_Vamos_ser_importantes!">Aprendizagem ativa: Vamos ser importantes!</h3>
+
+<p>Nesta seção de aprendizado ativo, fornecemos um exemplo editável. Nele, gostaríamos que você tentasse adicionar ênfase e importância às palavras que acha que precisam delas, apenas para praticar um pouco.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_5">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editável&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;&lt;h1&gt;Notícia importante&lt;/h1&gt;
+&lt;p&gt;No domingo, 9 de janeiro de 2010, uma gangue de góticos foi
+   vista roubando vários gnomos de jardim de um
+   centro comercial no centro de Milwaukee. Eles estavam
+   todos vestindo macacões verdes e chapéus bobos, que
+   pareciam ter a forma de uma baleia. Se alguém
+   tiver alguma informação sobre este incidente, por favor
+   entre em contato com a polícia.&lt;/p&gt;&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Resetar"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solução"&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">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solução';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solução') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solução';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solução';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Notícia importante&lt;/h1&gt;\n&lt;p&gt;No &lt;strong&gt;domingo, 9 de janeiro de 2010&lt;/strong&gt;, uma gangue de &lt;em&gt;góticos&lt;/em&gt; foi vista roubando &lt;strong&gt;&lt;em&gt;vários&lt;/em&gt; gnomos de jardim&lt;/strong&gt; de um centro comercial no centro de &lt;strong&gt;Milwaukee&lt;/strong&gt;. Eles estavam todos &lt;em&gt;vestindo macacões verdes e chapéus bobos&lt;/em&gt;, que pareciam ter a forma de uma baleia. Se alguém tiver &lt;strong&gt;alguma informação&lt;/strong&gt; sobre este incidente, por favor entre em contato com a &lt;strong&gt;polícia&lt;/strong&gt;.&lt;/p&gt;';
+var 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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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 === 'Mostrar solução') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Itálico_negrito_sublinhado...">Itálico, negrito, sublinhado...</h3>
+
+<p>Os elementos que discutimos até agora têm clara semântica associada. A situação com {{htmlelement("b")}}, {{htmlelement("i")}}, e com {{htmlelement("u")}} é um pouco mais complicada. Eles surgiram para que as pessoas pudessem escrever negrito, itálico ou texto sublinhado em uma época em que o CSS ainda era pouco suportado. Elementos como este, que apenas afetam a apresentação e não a semântica, são conhecidos como <strong>elementos de apresentação</strong> e não devem mais ser usados, porque, como já vimos, a semântica é importante para a acessibilidade, SEO, etc.</p>
+
+<p>O HTML5 redefiniu <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> e <code>&lt;u&gt;</code>  com novas funções semânticas um pouco confusas.</p>
+
+<p>Aqui está a melhor regra geral: provavelmente é apropriado usar  <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> ou <code>&lt;u&gt;</code>  para transmitir um significado tradicionalmente transmitido com negrito, itálico ou sublinhado, desde que não exista um elemento mais adequado. No entanto, sempre é essencial manter uma mentalidade de acessibilidade. O conceito de itálico não é muito útil para pessoas que usam leitores de tela ou para pessoas que usam um sistema de escrita diferente do alfabeto Latino.</p>
+
+<ul>
+ <li>{{htmlelement("i")}} é usado para transmitir um significado tradicionalmente transmitido por itálico: palavras estrangeiras, designação taxonômica, termos técnicos, um pensamento...</li>
+ <li>{{htmlelement("b")}} é usado para transmitir um significado tradicionalmente transmitido por negrito: palavras-chave, nomes de produtos, sentença principal...</li>
+ <li>{{htmlelement("u")}} é usado para transmitir um significado tradicionalmente transmitido pelo sublinhado: nome próprio, erro de ortografia...</li>
+</ul>
+
+<div class="note">
+<p>Um aviso amável sobre o sublinhado: <strong>as pessoas associam fortemente o sublinhado com hiperlinks</strong>. Portanto, na Web, é melhor sublinhar apenas os links. Use o elemento <code>&lt;u&gt;</code> quando for semanticamente apropriado, mas considere usar o CSS para alterar o sublinhado padrão para algo mais apropriado na Web. O exemplo abaixo ilustra como isso pode ser feito.</p>
+</div>
+
+<pre class="brush: html notranslate">&lt;!-- nomes científicos --&gt;
+&lt;p&gt;
+  O Colibri Ruby-throated (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
+  é o colibri mais comum do Leste da América do Norte.
+&lt;/p&gt;
+
+&lt;!-- palavras estrangeiras --&gt;
+&lt;p&gt;
+  O menu era um mar de palavras exóticas como &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; e &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- um erro de ortografia conhecido --&gt;
+&lt;p&gt;
+  Algum dia eu vou aprender como &lt;u style="text-decoration-line: underline; text-decoration-style: wavy;"&gt;jogar&lt;/u&gt; melhor.
+&lt;/p&gt;
+
+&lt;!-- Destaque as palavras-chave em um conjunto de instruções --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Fatie&lt;/b&gt;dois pedaços de pão do pão.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Colocar&lt;/b&gt; uma fatia de tomate e uma folha de
+     alface entre as fatias de pão.
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h2 id="Teste_suas_habilidades!"><span class="tlid-translation translation" lang="pt"><span title="">Teste suas habilidades</span></span>!</h2>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes?</span> <span title="">Você pode encontrar alguns testes adicionais para verificar se você absorveu essas informações antes de prosseguir </span></span>—<span class="tlid-translation translation" lang="pt"><span title=""> consulte <a href="/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics">Teste suas habilidades: noções básicas de texto HTML</a>.</span></span></p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Por enquanto é isso!</span> <span title="">Este artigo deve fornecer uma boa idéia de como começar a marcar texto em HTML e apresentar alguns dos elementos mais importantes nessa área.</span> <span title="">Há muito mais elementos semânticos a serem abordados nesta área, e veremos muito mais em nosso artigo de <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a>, mais adiante neste curso.</span> <span title="">No próximo artigo, veremos detalhadamente como <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">criar links</a>, possivelmente o elemento mais importante na Web.</span></span></p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/pt-br/learn/html/introduction_to_html/index.html b/files/pt-br/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..f0e69d61d4
--- /dev/null
+++ b/files/pt-br/learn/html/introduction_to_html/index.html
@@ -0,0 +1,69 @@
+---
+title: Introdução ao HTML
+slug: Aprender/HTML/Introducao_ao_HTML
+tags:
+  - Codificação de Script
+  - Estrutura
+  - HTML
+  - Introdução ao HTML
+  - Links
+  - Página de destino
+  - Texto
+  - cabeçalho
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Em sua essência, {{glossary("HTML")}} é uma linguagem bastante simples composta de <a href="https://developer.mozilla.org/pt-BR/docs/Glossario/Elemento">elementos</a>, que podem ser aplicados a pedaços de texto para dar-lhes significado diferente em um documento (é um parágrafo? é uma lista de seleção? é parte de uma tabela?), estrutura um documento em seções lógicas (Possui um cabeçalho? Três colunas de conteúdo? Um menu de navegação?) e incorpora conteúdo como imagens e vídeos em uma página. Este módulo irá introduzir os dois primeiros e apresentar conceitos fundamentais e a sintaxe que você precisa saber para entender o HTML.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Antes de iniciar este módulo, você não precisa de nenhum conhecimento prévio sobre HTML, mas deve ter pelo menos uma familiaridade básica em utilizar computadores e utilizar a web passivamente (por exemplo, apenas navegando e consumindo conteúdo). Você deve ter um ambiente de trabalho básico configurado (como detalhado em <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a>) e entender como criar e gerenciar arquivos (como detalhado em <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a>). Ambos são partes do nosso módulo completo para iniciantes <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web">indrodução à web</a>.</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>Nota</strong></span>: Se você estiver trabalhando em um computador/tablet/outro dispositivo que não permita a criação de seus próprios arquivos, você pode testar (a maior parte) dos exemplos de códigos em um programa de codificação online como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<p>Este módulo contém os seguintes artigos, que te levarão por toda teoria básica do HTML e fornecerão muitas oportunidades para você testar algumas habilidades.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com o HTML</a></dt>
+ <dd>Abrange todo o básico do HTML, para você iniciar - nós definimos elementos, atributos e outros termos importantes, e mostramos onde eles se encaixam na linguagem. Também mostramos como uma página HTML típica e um elemento HTML é estruturado, e explicamos outros recursos básicos importantes da linguagem. Ao longo do caminho, nós brincaremos com algum HTML, para fazer você se interessar!</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML">O que está no cabeçalho? Metadados no HTML</a></dt>
+ <dd>O {{glossary("Head", "cabeçalho")}} de um documento HTML é a parte que <strong>não é</strong> mostrada no navegador web quando a página é carregada. Ele contém informações como o {{htmlelement("title")}} da página, links para {{glossary("CSS")}} (se você quiser estilizar seu conteúdo HTML com CSS), links para favicons personalizados e metadados (que são dados sobre o HTML, tais como quem o escreveu e palavras-chaves importantes que descrevem o documento).</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto HTML</a></dt>
+ <dd>Uma das principais funções do HTML é dar significado ao texto (também conhecido como {{glossary("Semantics", "semântica")}}), para que o navegador saiba como exibi-lo corretamente. Este artigo analisa como usar HTML para dividir um bloco de texto em uma estrutura de títulos e parágrafos, adicionar ênfase/importância nas palavras, criar listas e muito mais.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando hiperlinks</a></dt>
+ <dd>Os hiperlinks são realmente importantes — eles são o que faz da web o que ela é. Este artigo mostra a sintaxe necessária para criar um link e discute as melhores práticas para links.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação de texto avançada</a></dt>
+ <dd>Existem muitos outros elementos em HTML para formatar o texto, que não apresentamos no artigo sobre os <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a>. Os elementos aqui são menos conhecidos, mas ainda úteis para se conhecer. Neste artigo, você aprenderá sobre marcação de citações, listas de descrições, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contatos e muito mais.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites">Estrutura dos documentos e do site</a></dt>
+ <dd>Além de definir partes individuais de sua página (como "um parágrafo" ou "uma imagem"), o HTML também é usado para definir as áreas do seu site (como "o cabeçalho", "o menu de navegação" ou "a coluna de conteúdo principal"). Este artigo analisa como planejar uma estutura básica de site e como escrever o HTML para representar esta estrutura.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Debugging_HTML">Depuração HTML</a></dt>
+ <dd>Escrever HTML é tranquilo, mas e se algo der errado, e você não conseguir descobrir onde o erro está no código? Este artigo irá apresentar algumas ferramentas que podem ajudar.</dd>
+</dl>
+
+<h2 id="Avaliações">Avaliações</h2>
+
+<p>As avaliações a seguir testarão sua compreensão dos princípios básicos de HTML abordados nos guias acima.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Marcando_uma_carta">Marcando uma carta</a></dt>
+ <dd>Todos aprendemos a escrever uma carta mais cedo ou mais tarde; também é um exemplo útil para testar habilidades de formatação de texto. Nesta avaliação, você receberá uma carta para marcar.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estruturando_uma_pagina_de_conteudo">Estruturando a página de conteúdo</a></dt>
+ <dd>Essa avaliação testa sua capacidade de utilizar HTML para estruturar uma página simples de conteúdo, contendo um cabeçalho, um rodapé, um menu de navegação, o conteúdo principal e uma barra lateral.</dd>
+</dl>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Noções básica sobre alfabetização na web 1</a> (em inglês)</dt>
+ <dd>Um excelente curso da Fundação Mozilla que explora e testa muitas das habilidades discutidas no Módulo <em>Introdução ao HTML. </em>Os estudantes se familiarizam com a leitura, a redação e a participação na web neste módulo de seis partes. Descubra as bases da web através da produção e da colaboração.</dd>
+</dl>
+
+<div id="gtx-trans" style="position: absolute; left: 57px; top: 1691px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html b/files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html
new file mode 100644
index 0000000000..c6d49c4015
--- /dev/null
+++ b/files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html
@@ -0,0 +1,72 @@
+---
+title: 'Teste suas habilidades: Noções básicas de texto HTML'
+slug: 'Aprender/HTML/Introducao_ao_HTML/Test_your_skills:_HTML_text_basics'
+tags:
+  - HTML
+  - Iniciante
+  - Teste suas habilidades
+  - Texto
+  - aprendizado
+translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics'
+---
+<div>{{learnsidebar}}</div>
+
+<p>O objetivo deste teste de habilidades é avaliar se você entendeu nosso artigo <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML.</a></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Você pode testar suas soluções nos editores interativos abaixo, entretanto pode ser de ajuda fazer download do código e usar uma ferramenta online como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a> para trabalhar nas tarefas.<br>
+ <br>
+ Se você ficar travado em alguma tarefa, peça-nos ajuda  — veja a seção{{anch("Assessment or further help")}} no final desta página.</p>
+</div>
+
+<h2 id="Texto_básico_em_HTML_1">Texto básico em HTML 1</h2>
+
+<p>Nesta tarefa queremos que você faça a marcação do HTML fornecido, utilizando a semântica de título e parágrafo. Tente editar a amostra, ao vivo, para alterar o exemplo final:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text1-download.html">Faça download do ponto de partida desta tarefa</a> para trabalhar em seu próprio editor ou em um editor online.</p>
+</div>
+
+<h2 id="Texto_básico_em_HTML_2">Texto básico em HTML 2</h2>
+
+<p>Nesta tarefa queremos que você transforme a primeira lista sem marcação em uma lista não ordenada e a segunda em uma lista ordenada.</p>
+
+<p>Tente editar a amostra, ao vivo, para alterar o exemplo final:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text2-download.html">Faça download do ponto de partida desta tarefa</a> para trabalhar em seu próprio editor ou em um editor online.</p>
+</div>
+
+<h2 id="Texto_básico_em_HTML_3">Texto básico em HTML 3</h2>
+
+<p>Nesta tarefa um parágrafo é fornecido e o seu objetivo é usar elementos de ênfase para fazer a marcação apropriada de algumas palavras com forte importância e com ênfase.</p>
+
+<p>Tente editar a amostra, ao vivo, para alterar o exemplo final:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text3-download.html">Faça download do ponto de partida desta tarefa</a> para trabalhar em seu próprio editor ou em um editor online.</p>
+</div>
+
+<h2 id="Avaliação_ou_ajuda_adicional">Avaliação ou ajuda adicional</h2>
+
+<p>Você pode praticar os exemplos nos Editores Interativos acima.</p>
+
+<p>Se você gostaria de ter seu trabalho avaliado ou está travado e quer pedir ajuda:</p>
+
+<ol>
+ <li>Coloque seu trabalho em um editor online compartilhável como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> ou <a href="https://glitch.com/">Glitch</a>. Você pode escrever o código por si só ou usar os arquivos linkados nas seções acima.</li>
+ <li>Escreva um post pedindo por avaliação e/ou ajuda no <a href="https://discourse.mozilla.org/c/mdn/learn">Fórum de discussão do MDN na categoria Learning</a>. Seu post deve incluir:
+  <ul>
+   <li>Um título descritivo como "Avaliação desejada para o teste de habilidade Texto básico em HTML 1"</li>
+   <li>Detalhes sobre o que você já tentou e o que você gostaria que fizéssemos, p. ex. se você está travado e precisa de ajuda ou se deseja uma avaliação.</li>
+   <li>Um link para o exemplo que você deseja ser avaliado ou ajudado em um editor online compartilhável (como mencionado no passo 1 acima). Essa é uma boa prática para se adquirir - é muito difícil ajudar alguém com um problema no código, se você não consegue ver o código.</li>
+   <li>Um link para a tarefa atual ou página de avaliação, assim poderemos achar a questão na qual você quer ajuda.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
new file mode 100644
index 0000000000..66dd155c09
--- /dev/null
+++ b/files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -0,0 +1,284 @@
+---
+title: O que está no cabeçalho? Metadados em HTML
+slug: Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML
+tags:
+  - Guía
+  - HTML
+  - Iniciante
+  - head
+  - lang
+  - metadados
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}  </div>
+
+<p class="summary">O {{glossary("Head", "head")}} de um documento HTML é a parte que não é exibida no navegador da Web quando a página é carregada. Ele contém informações como {{glossary("title")}} , links para {{htmlelement("CSS")}} (se você deseja modelar seu conteúdo HTML com CSS), links para favicons personalizados e outros metadados (dados sobre o HTML, como quem o escreveu, e palavras-chave importantes que descrevem o documento.) Neste artigo, abordaremos todas as coisas acima e mais. Dando-lhe uma boa base para lidar com marcação.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>
+    <table>
+     <tbody>
+      <tr>
+       <td>Familiaridade básica em HTML, tal como <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML.</a></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender sobre o cabeçalho HTML, seu propósito, os itens mais importantes que ele pode conter e que efeito isso pode ter no documento HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_que_há_no_cabeçalho_HTML">O que há no cabeçalho HTML?</h2>
+
+<p>Vamos rever o simples<a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document"> </a><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started#Anatomia_de_um_elemento_HTML">Documento HTML que abordamos no artigo anterior:</a></p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Minha página de teste&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Essa é minha página&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>O cabeçalho HTML é o conteúdo do elemento {{htmlelement("head")}} — ao contrário do conteúdo do elemento {{htmlelement("body")}} (que são exibidos na página quando carregados no navegador), o conteúdo do cabeçalho não é exibido na página, em vez disso, o trabalho do cabeçalho é conter {{glossary("Metadata", "metadados")}}  sobre o documento. No exemplo seguinte, o cabeçalho é bem simples:</p>
+
+<pre class="brush: html notranslate">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Minha página de teste&lt;/title&gt;
+&lt;/head&gt;</pre>
+
+<p>Em páginas maiores, o cabeçalho pode ter mais conteúdo. Tente acessar um dos seus sites favoritos e use as <a href="/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">ferramentas de desenvolvimento</a> para verificar o conteúdo do cabeçalho. Nosso objetivo aqui não é mostrar a você como usar tudo o que é possível pôr no cabeçalho, mas te ensinar a usar as coisas mais obvias que você vai querer incluir no cabeçalho, e lhe dar alguma familiaridade. Vamos começar.</p>
+
+<h2 id="Adicionando_um_título">Adicionando um título</h2>
+
+<p>Nós já vimos o elemento {{htmlelement("title")}} em ação — ele pode ser usado para adicionar um título ao documento, mas pode ser confundido com o elemento {{htmlelement("h1")}}, que é usado para adicionar um título de nível superior ao conteúdo do body — as vezes também é associado como o título da página. Mas são coisas diferentes!</p>
+
+<ul>
+ <li>O elemento {{htmlelement("h1")}} aparece na página quando é carregado no navegador — geralmente isso deve ser usado uma vez por página, para marcar o título do conteúdo da sua página, (o título da história, ou da notícia, ou o que quer que seja apropriado para o uso).</li>
+ <li>O elemento {{htmlelement("title")}} é um metadado que representa o título de todo o document HTML (não o conteúdo do documento).</li>
+</ul>
+
+<h3 id="Aprendizado_ativo_observando_um_exemplo_simples">Aprendizado ativo: observando um exemplo simples</h3>
+
+<ol>
+ <li>Para começar esta aprendizagem ativa, gostaríamos que você fosse ao nosso depósito GitHub e baixasse uma cópia do nossa página <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>. Para fazer isso:
+
+  <ol>
+   <li>Copie e cole o código em um novo arquivo de texto no seu editor e salve-o com o nome de index.html em um lugar de fácil acesso.</li>
+   <li>Pressione o botão "Raw" na página do GitHub, que faz com que o código bruto apareça (possivelmente em uma nova guia do navegador). Em seguida, escolha o menu <em>Arquivo do navegador&gt; Salvar página como ...</em> e escolha um local adequado para salvar o arquivo.</li>
+  </ol>
+ </li>
+ <li>Agora abra o arquivo no seu navegador. Você deve ver algo assim:
+  <p><img alt="A simple web page with the title set to &lt;title> element, and the &lt;h1> set to &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Agora deve ser completamente óbvio onde o conteúdo <code>&lt;h1&gt;</code> aparece e onde o conteúdo  <code>&lt;title&gt;</code> aparece!</p>
+ </li>
+ <li>Você também deve tentar abrir o código no seu editor, editar o conteúdo desses elementos e atualizar a página no seu navegador. divirta-se.</li>
+</ol>
+
+<p>O conteúdo do elemento <code>&lt;title&gt;</code> também é usado de outras maneiras. Por exemplo, se você tentar favoritar a página, (<em>Favoritos &gt; Adicionar página aos favoritos </em>ou o ícone da estrela na barra de URL no Fireofx), você verá o conteúdo <code>&lt;title&gt;</code> preenchido como o nome sugerido do favorito.</p>
+
+<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the &lt;title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Os conteúdos <code>&lt;title&gt;</code> também são usados nos resultados de pesquisa, conforme você verá abaixo.</p>
+
+<h2 id="Metadados_o_elemento_&lt;meta>">Metadados: o elemento &lt;meta&gt;</h2>
+
+<p>Metadados é dado descreve dados, e HTML possui uma maneira "oficial" de adicionar metadados a um documento — o elemento {{htmlelement("meta")}}. Claro, as outras coisas em que estamos falando neste artigo também podem ser pensadas como metadados. Existem muitos tipos diferentes de elementos <code>&lt;meta&gt;</code>  que podem ser incluídos no &lt;head&gt;<strong> </strong>da sua página, mas não tentaremos explicar todos eles nesta fase, pois seria muito confuso. Em vez disso, explicaremos algumas coisas que você pode ver comumente, apenas para lhe dar uma idéia.</p>
+
+<h3 id="Especificando_a_codificação_de_caracteres_do_seu_documento">Especificando a codificação de caracteres do seu documento</h3>
+
+<p>No exemplo que vimos acima, esta linha foi incluída:</p>
+
+<pre class="brush: html notranslate">&lt;meta charset="utf-8"&gt;</pre>
+
+<p>Este elemento simplesmente especifica a codificação de caracteres do documento — o conjunto de caracteres que o documento está autorizado a usar.  <code>utf-8</code> é um conjunto de caracteres universal que inclui praticamente qualquer caractere de qualquer linguagem humana. Isso significa que sua página web poderá lidar com a exibição de qualquer idioma; portanto, é uma boa idéia configurar isso em todas as páginas web que você cria! Por exemplo, sua página poderia lidar com o Inglês e Japonês muito bem:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Se você definir sua codificação de caracteres para  <code>ISO-8859-1</code>, por exemplo (o conjunto de caracteres para o alfabeto latino), a renderização de sua página ficaria toda bagunçada:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Alguns navegadores (como o Chrome) corrigem automaticamente as codificações incorretas, então, dependendo do navegador que você usar, você pode não ver esse problema. Ainda assim, você deve definir uma codificação do <code>utf-8</code> em sua página, para evitar problemas em outros navegadores.</p>
+</div>
+
+<h3 id="Aprendizagem_ativa_Experimento_com_a_codificação_de_caracteres">Aprendizagem ativa: Experimento com a codificação de caracteres</h3>
+
+<p>Para experimentar isso, revise o modelo HTML simples que você obteve na seção anterior em <code>&lt;title&gt;</code> (a página  <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html </a>), tente alterar o valor do meta charset para <code>ISO-8859-1</code> e adicione o Japonês à sua página . Este é o código que usamos:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Exemplo Japonês:ご飯が熱い&lt;/p&gt;</pre>
+
+<h3 id="Adicionando_um_autor_e_descrição">Adicionando um autor e descrição</h3>
+
+<p>Muitos elementos <code>&lt;meta&gt;</code> incluem atributos de <code>name</code> e  <code>content</code>:</p>
+
+<ul>
+ <li>O <code>name</code> especifica o tipo de elemento meta que é; que tipo de informação contém.</li>
+ <li>O <code>content</code> especifica o conteúdo real do meta.</li>
+</ul>
+
+<p>Dois desses meta-elementos que são úteis para incluir na sua página definem o autor da página e fornecem uma descrição concisa da página. Vejamos um exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;meta name="description" content="A Área de Aprendizagem do MDN tem como objetivo
+proporcionar iniciantes em Web com tudo o que eles precisam saber
+para começar a desenvolver sites e aplicativos."&gt;</pre>
+
+<p>Especificar um autor é útil de muitas maneiras: é útil para poder descobrir quem escreveu a página, se quiser enviar perguntas sobre o conteúdo que você gostaria de contacta-la. Alguns sistemas de gerenciamento de conteúdo possuem ferramentas para extrair automaticamente as informações do autor da página e disponibilizá-las para seus propósitos.</p>
+
+<p>Especificar uma descrição que inclua palavras-chave relacionadas ao conteúdo da sua página é útil porque tem potencial para tornar sua página mais alta nas pesquisas relevantes realizadas nos mecanismos de busca (tais atividades são denominadas <a href="/pt-BR/docs/Glossario/SEO">Search Engine Optimization</a> ou {{glossary("SEO")}}.</p>
+
+<h3 id="Aprendizagem_ativa_Uso_da_descrição_nos_motores_de_busca">Aprendizagem ativa: Uso da descrição nos motores de busca</h3>
+
+<p>A descrição também é usada nas páginas de resultados do mecanismo de pesquisa. Vamos passar por um exercício para explorar isso</p>
+
+<ol>
+ <li>Vá para a <a href="https://developer.mozilla.org/en-US/">página inicial da Mozilla Developer Network.</a></li>
+ <li>Veja a fonte da página (botão direito do mouse/<kbd>Ctrl</kbd> + clique na página, escolha <em>Ver código-fonte da página</em> no menu de contexto).</li>
+ <li>Encontre a meta tag de descrição. Isso parecerá assim:
+  <pre class="brush: html notranslate">&lt;meta name="description" content="A Mozilla Developer Network (MDN) fornece
+informações sobre tecnologias Open Web, incluindo HTML, CSS e API para ambos
+Sites e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox."&gt;</pre>
+ </li>
+ <li>Agora, procure por "Mozilla Developer Network" no seu motor de busca favorito (Utilizamos o Yahoo.) Você notará a descrição <code>&lt;meta&gt;</code> e <code>&lt;title&gt;</code> elemento usado no resultado da pesquisa — definitivamente vale a pena ter!
+  <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: No Google, você verá algumas subpáginas relevantes do MDN listadas abaixo do principal link da página inicial do MDN — estes são chamados de sitelinks e são configuráveis nas <a href="http://www.google.com/webmasters/tools/">Ferramentas para webmasters do Google</a> — uma maneira de melhorar os resultados de pesquisa do seu site no mecanismo de pesquisa do Google.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Muitos recursos <code>&lt;meta&gt;</code> simplesmente não são mais usados. Por exemplo, a palavra-chave <code>&lt;meta&gt;</code> elemento (<code>&lt;meta name="keywords" content="preencha, suas, palavras-chave, aqui"&gt;</code>) — que é suposto fornecer palavras-chave para os motores de busca para determinar a relevância dessa página para diferentes termos de pesquisa — são ignorados pelos motores de busca, porque os spammers estavam apenas preenchendo a lista de palavras-chave com centenas de palavras-chave, influenciando os resultados.</p>
+</div>
+
+<h3 id="Outros_tipos_de_metadados">Outros tipos de metadados</h3>
+
+<p>Ao navegar pela web, você também encontrará outros tipos de metadados. Muitos dos recursos que você verá em sites são criações proprietárias, projetados para fornecer a determinados sites (como sites de redes sociais) informações específicas que eles podem usar.</p>
+
+<p>Por exemplo, <a href="http://ogp.me/">Open Graph Data</a> é um protocolo de metadados que o Facebook inventou para fornecer metadados mais ricos para sites. No código-fonte MDN, você encontrará isso:</p>
+
+<pre class="brush: html notranslate">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content="A Mozilla Developer Network (MDN) fornece
+informações sobre tecnologias Open Web, incluindo HTML, CSS e APIs para ambos os sites da Web
+e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox."&gt;
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
+
+<p>Um efeito disso é que, quando você liga a MDN no facebook, o link aparece junto com uma imagem e descrição: uma experiência mais rica para usuários.</p>
+
+<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">O Twitter também possui seus próprios metadados proprietários, o que tem um efeito semelhante quando o URL do site é exibido no twitter.com. Por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
+
+<h2 id="Adicionando_ícones_personalizados_ao_seu_site">Adicionando ícones personalizados ao seu site</h2>
+
+<p>Para enriquecer ainda mais o design do seu site, você pode adicionar referências a ícones personalizados em seus metadados, e estes serão exibidos em determinados contextos. O mais usado é o <strong>favicon</strong> (abreviação de "favorites icon", referindo-se ao seu uso nas listas "favoritos" nos navegadores).</p>
+
+<p>O humilde favicon existe há muitos anos. É o primeiro ícone desse tipo: um ícone 16 pixels quadrados usado em vários lugares. Você pode ver (dependendo do navegador) ícones favoritos exibidos na guia do navegador que contém cada página aberta e ao lado de páginas marcadas no painel de favoritos.</p>
+
+<p>Um favicon pode ser adicionado à sua página:</p>
+
+<ol>
+ <li>Salvando-o no mesmo diretório que a página de índice do site, salvo no formato <code>.ico</code> (a maioria dos navegadores suportará favicons em formatos mais comuns como <code>.gif</code> ou <code>.png</code>, mas usar o formato ICO irá garantir que ele funcione tão bem como o Internet Explorer 6 .)</li>
+ <li>Adicionando a seguinte linha ao HTML <code>&lt;head&gt;</code> para fazer referência a ele:
+  <pre class="brush: html notranslate">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
+ </li>
+</ol>
+
+<p>Aqui está um exemplo de um favicon em um painel de faforitos:</p>
+
+<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Há muitos outros tipos de ícones para considerar nestes dias também. Por exemplo, você encontrará isso no código-fonte da página inicial do MDN Web Docs:</p>
+
+<pre class="brush: html notranslate">&lt;!-- iPad de terceira geração com tela retina de alta resolução: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone com tela retina de alta resolução: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- iPad de primeira e segunda geração: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- iPhone não-Retina, iPod Touch e dispositivos Android 2.1+: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- favicon básico --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p>Os comentários explicam onde cada ícone é usado - esses elementos cobrem coisas como fornecer um ícone de alta resolução agradável para usar quando o site é salvo na tela inicial do iPad.</p>
+
+<p>Não se preocupe muito com a implementação de todos esses tipos de ícone agora  — este é um recurso bastante avançado, e você não precisará ter conhecimento disso para avançar no curso. O objetivo principal aqui é permitir que você saiba o que são essas coisas, no caso de você encontrá-las enquanto navega no código-fonte dos outros sites.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Se o seu site usa uma Política de Segurança de Conteúdo (CSP) para aumentar sua segurança, a política se aplica ao favicon. Se você encontrar problemas com o favicon não carregando, verifique se a diretiva <a href="/pt-BR/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code></a> do cabeçalho <a href="/pt-BR/docs/Web/HTTP/Headers/Content-Security-Policy" title="The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks (XSS)."><code>Content-Security-Policy</code></a> não está impedindo o acesso a ele.</p>
+</div>
+
+<h2 id="Aplicando_CSS_e_JavaScript_ao_HTML">Aplicando CSS e JavaScript ao HTML</h2>
+
+<p>Todos os sites que você usar nos dias atuais empregarão o {{glossary("CSS")}} para torná-los legais e o {{glossary("JavaScript")}}  para ativar a funcionalidade interativa, como players de vídeo, mapas, jogos e muito mais. Estes são comumente aplicados a uma página web usando o elemento {{htmlelement("link")}} e o elemento {{htmlelement("script")}} , respectivamente.</p>
+
+<ul>
+ <li>
+  <p>O elemento {{htmlelement("link")}} sempre vai no cabeçalho do seu documento. Isso requer dois atributos, rel = "stylesheet", que indica que é a folha de estilo do documento e href, que contém o caminho para o arquivo de folha de estilo:</p>
+
+  <pre class="brush: html notranslate">&lt;link rel="stylesheet" href="meu-arquivo-css.css"&gt;</pre>
+ </li>
+ <li>
+  <p>O elemento  {{htmlelement("script")}} não precisa ir no cabeçalho; na verdade, muitas vezes é melhor colocá-lo na parte inferior do corpo do documento (antes da tag<code> &lt;/body&gt;</code> de fechamento), para garantir que todo o conteúdo HTML tenha sido lido pelo navegador antes de tentar aplicar o JavaScript nele (se o JavaScript tentar acessar um elemento que ainda não existe, o navegador gerará um erro.)</p>
+
+  <pre class="brush: html notranslate">&lt;script src="meu-arquivo-js.js"&gt;&lt;/script&gt;</pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: O elemento <code>&lt;script&gt;</code> pode parecer um elemento vazio, mas não é, e, portanto, precisa de uma tag de fechamento. Em vez de apontar para um arquivo de script externo, você também pode escolher colocar seu script dentro do elemento <code>&lt;script&gt;</code>.</p>
+  </div>
+ </li>
+</ul>
+
+<h3 id="Aprendizagem_ativa_aplicar_CSS_e_JavaScript_a_uma_página">Aprendizagem ativa: aplicar CSS e JavaScript a uma página</h3>
+
+<ol>
+ <li>Para iniciar esta aprendizagem ativa, pegue uma cópia dos nossos arquivos  <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> e <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> e salve-os em seu computador local no mesmo diretório. Verifique se eles são salvos com os nomes e extensões de arquivo corretos.</li>
+ <li>Abra o arquivo HTML em seu navegador e seu editor de texto.</li>
+ <li>Ao seguir as informações fornecidas acima, adicione os elementos {{htmlelement("link")}} e  {{htmlelement("script")}} ao seu HTML, para que seu CSS e JavaScript sejam aplicados ao seu HTML.</li>
+</ol>
+
+<p>Se for feito corretamente, quando você salvar seu HTML e atualizar seu navegador, verá que as coisas mudaram:</p>
+
+<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>O JavaScript adicionou uma lista vazia à página. Agora, quando você clica em qualquer lugar da lista, uma caixa de diálogo aparecerá pedindo para que você, insira algum texto para um novo item de lista. Quando você pressiona o botão OK, um novo item será adicionado à lista contendo o texto. Quando você clica em um item de lista existente, uma caixa de diálogo será exibida permitindo que você altere o texto do item.</li>
+ <li>O CSS fez com que o plano de fundo ficasse verde e o texto se tornasse maior. Ele também estilizou parte do conteúdo que o JavaScript adicionou à página (a barra vermelha com a borda preta é o estilo que o CSS adicionou à lista gerada por JS).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você ficar preso neste exercício e não conseguir aplicar o CSS/JS, tente verificar nossa página de exemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p>
+</div>
+
+<h2 id="Definir_o_idioma_principal_do_documento">Definir o idioma principal do documento</h2>
+
+<p>Finalmente, vale a pena mencionar que você pode (e realmente deveria) definir o idioma da sua página. Isso pode ser feito adicionando o <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">atributo lang</a> à tag HTML de abertura (como visto no <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> e mostrado abaixo).</p>
+
+<pre class="brush: html notranslate">&lt;html lang="pt-BR"&gt;</pre>
+
+<p>Isso é útil de várias maneiras. O seu documento HTML será indexado de forma mais eficaz pelos motores de busca se o seu idioma for definido (permitindo que ele apareça corretamente em resultados específicos do idioma, por exemplo), e é útil para pessoas com deficiências visuais usando leitores de tela (por exemplo, a palavra "seis" existe em Francês e Inglês, mas é pronunciado de forma diferente.)</p>
+
+<p>Você também pode definir seções secundárias do seu documento para serem reconhecidas em diferentes idiomas. Por exemplo, podemos configurar nossa seção do idioma Japonês para ser reconhecida como japonesa, assim:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Exemplo japonês: &lt;span lang="jp"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>Esses códigos são definidos pelo padrão <a href="https://pt.wikipedia.org/wiki/ISO_639">ISO 639</a>. Você pode encontrar mais sobre eles em <a href="https://www.w3.org/International/articles/language-tags/">Tags de idioma em HTML e XML</a>.</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Isso marca o fim de nossa rápida turnê pelo HTML — há muito mais que você pode fazer aqui, mas uma excursão exaustiva seria chata e confusa nesta fase, e nós só queríamos dar uma idéia das coisas mais comuns você encontrará lá, por enquanto! No próximo artigo, veremos o básico do texto HTML.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
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>
diff --git a/files/pt-br/learn/html/tables/basics/index.html b/files/pt-br/learn/html/tables/basics/index.html
new file mode 100644
index 0000000000..36dcaebfa7
--- /dev/null
+++ b/files/pt-br/learn/html/tables/basics/index.html
@@ -0,0 +1,559 @@
+---
+title: HTML table basics
+slug: Aprender/HTML/Tables/Basics
+translation_of: Learn/HTML/Tables/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Aprender/HTML/Tabelas/Avançado", "Aprender/HTML/Tabelas")}}</div>
+
+<p class="summary">Este artigo é uma introdução às tabelas HTML, cobrindo o básico, como linhas e células, cabeçalhos, fazendo as células ocuparem várias colunas e linhas e como agrupar todas as células em uma coluna para fins de estilo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Noções básicas de HTML (consulte <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a> ).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para obter familiaridade básica com tabelas HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_que_é_uma_tabela">O que é uma tabela?</h2>
+
+<p>Uma tabela é um conjunto estruturado de dados composto de linhas e colunas (<strong>dados tabulares</strong>). Uma tabela permite consultar de forma rápida e fácil valores que indicam algum tipo de conexão entre diferentes tipos de dados, por exemplo, uma pessoa e sua idade, ou um dia da semana, ou os horários de uma piscina local.</p>
+
+<p><img alt="Uma tabela de amostra mostrando nomes e idades de algumas pessoas - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p>
+
+<p><img alt="Um cronograma de natação mostrando uma tabela de dados de amostra" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p>
+
+<p>As tabelas são muito comumente usadas na sociedade humana, e têm sido por muito tempo, como evidenciado por este documento do Censo dos EUA de 1800:</p>
+
+<p><img alt="Um documento de pergaminho muito antigo;  os dados não são facilmente legíveis, mas mostram claramente uma tabela de dados sendo usada." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p>
+
+<p>Portanto, não é de se admirar que os criadores do HTML tenham fornecido um meio de estruturar e apresentar dados tabulares na web.</p>
+
+<h3 id="Como_funciona_uma_tabela">Como funciona uma tabela?</h3>
+
+<p>Tabelas possuem estrutura. As informações são facilmente interpretadas fazendo associações visuais entre os cabeçalhos de linha e coluna. Veja a tabela abaixo, por exemplo, e encontre um gigante gasoso Júpiter com 62 luas. Você pode encontrar a resposta associando os cabeçalhos de linha e coluna relevantes.</p>
+
+<table>
+ <caption>Dados sobre os planetas do nosso sistema solar (fatos planetários retirados da <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Planilha Planetária da Nasa - Métrica</a> .</caption>
+ <thead>
+  <tr>
+   <td colspan="2"></td>
+   <th scope="col">Nome</th>
+   <th scope="col">Massa (10 <sup>24</sup> kg)</th>
+   <th scope="col">Diâmetro (km)</th>
+   <th scope="col">Densidade (kg/m <sup>3</sup> )</th>
+   <th scope="col">Gravity (m/s<sup>2</sup>)</th>
+   <th scope="col">Length of day (hours)</th>
+   <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
+   <th scope="col">Mean temperature (°C)</th>
+   <th scope="col">Number of moons</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="2" rowspan="4" scope="rowgroup">Terrestial planets</th>
+   <th scope="row">Mercury</th>
+   <td>0.330</td>
+   <td>4,879</td>
+   <td>5427</td>
+   <td>3.7</td>
+   <td>4222.6</td>
+   <td>57.9</td>
+   <td>167</td>
+   <td>0</td>
+   <td>Closest to the Sun</td>
+  </tr>
+  <tr>
+   <th scope="row">Venus</th>
+   <td>4.87</td>
+   <td>12,104</td>
+   <td>5243</td>
+   <td>8.9</td>
+   <td>2802.0</td>
+   <td>108.2</td>
+   <td>464</td>
+   <td>0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Earth</th>
+   <td>5.97</td>
+   <td>12,756</td>
+   <td>5514</td>
+   <td>9.8</td>
+   <td>24.0</td>
+   <td>149.6</td>
+   <td>15</td>
+   <td>1</td>
+   <td>Our world</td>
+  </tr>
+  <tr>
+   <th scope="row">Mars</th>
+   <td>0.642</td>
+   <td>6,792</td>
+   <td>3933</td>
+   <td>3.7</td>
+   <td>24.7</td>
+   <td>227.9</td>
+   <td>-65</td>
+   <td>2</td>
+   <td>The red planet</td>
+  </tr>
+  <tr>
+   <th rowspan="4" scope="rowgroup">Jovian planets</th>
+   <th rowspan="2" scope="rowgroup">Gas giants</th>
+   <th scope="row">Jupiter</th>
+   <td>1898</td>
+   <td>142,984</td>
+   <td>1326</td>
+   <td>23.1</td>
+   <td>9.9</td>
+   <td>778.6</td>
+   <td>-110</td>
+   <td>67</td>
+   <td>The largest planet</td>
+  </tr>
+  <tr>
+   <th scope="row">Saturn</th>
+   <td>568</td>
+   <td>120,536</td>
+   <td>687</td>
+   <td>9.0</td>
+   <td>10.7</td>
+   <td>1433.5</td>
+   <td>-140</td>
+   <td>62</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="rowgroup">Ice giants</th>
+   <th scope="row">Uranus</th>
+   <td>86.8</td>
+   <td>51,118</td>
+   <td>1271</td>
+   <td>8.7</td>
+   <td>17.2</td>
+   <td>2872.5</td>
+   <td>-195</td>
+   <td>27</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Neptune</th>
+   <td>102</td>
+   <td>49,528</td>
+   <td>1638</td>
+   <td>11.0</td>
+   <td>16.1</td>
+   <td>4495.1</td>
+   <td>-200</td>
+   <td>14</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="rowgroup">Dwarf planets</th>
+   <th scope="row">Pluto</th>
+   <td>0.0146</td>
+   <td>2,370</td>
+   <td>2095</td>
+   <td>0.7</td>
+   <td>153.3</td>
+   <td>5906.4</td>
+   <td>-225</td>
+   <td>5</td>
+   <td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Quando criadas corretamente, até pessoas cegas podem interpretar dados tabulares em uma tabela HTML - uma tabela HTML bem sucedida deve melhorar a experiência tanto de usuários com deficiências visuais quanto daqueles capazes de ver</p>
+
+<h3 id="Estilizando_tabelas">Estilizando tabelas</h3>
+
+<p>You can also have a <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">look at the live example</a> on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.</p>
+
+<p>Be under no illusion; for tables to be effective on the web, you need to provide some styling information with <a href="/en-US/docs/Learn/CSS">CSS</a>, as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a> article after you've finished here.</p>
+
+<p>We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">stylesheet here</a>, and you can also find an <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML template</a> that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.</p>
+
+<h3 id="When_should_you_NOT_use_HTML_tables">When should you NOT use HTML tables?</h3>
+
+<p>HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at <a href="/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Page Layouts</a> in our <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Module</a>. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.</p>
+
+<p>In short, using tables for layout rather than <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout techniques</a> is a bad idea. The main reasons are as follows:</p>
+
+<ol>
+ <li><strong>Layout tables reduce accessibility for visually impaired users</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders</a>, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screenreaders' output will be confusing to their users.</li>
+ <li><strong>Tables produce tag soup</strong>: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.</li>
+ <li><strong>Tables are not automatically responsive</strong>: When you use proper layout containers (such as {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, or {{htmlelement("div")}}), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.</li>
+</ol>
+
+<h2 id="Active_learning_Creating_your_first_table">Active learning: Creating your first table</h2>
+
+<p>We've talked table theory enough, so, let's dive into a practical example and build up a simple table.</p>
+
+<ol>
+ <li>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> in a new directory on your local machine.</li>
+ <li>The content of every table is enclosed by these two tags : <strong><code><a href="/en-US/docs/Web/HTML/Element/table">&lt;table&gt;&lt;/table&gt;</a></code></strong>. Add these inside the body of your HTML.</li>
+ <li>The smallest container inside a table is a table cell, which is created by a <strong><code><a href="/en-US/docs/Web/HTML/Element/td">&lt;td&gt;</a></code></strong> element ('td' stands for 'table data'). Add the following inside your table tags:
+  <pre class="brush: html notranslate">&lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;</pre>
+ </li>
+ <li>If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so:
+  <pre class="brush: html notranslate">&lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;
+&lt;td&gt;I'm your second cell.&lt;/td&gt;
+&lt;td&gt;I'm your third cell.&lt;/td&gt;
+&lt;td&gt;I'm your fourth cell.&lt;/td&gt;</pre>
+ </li>
+</ol>
+
+<p>As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <code>&lt;td&gt;</code> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.</p>
+
+<p>To stop this row from growing and start placing subsequent cells on a second row, we need to use the <strong><code><a href="/en-US/docs/Web/HTML/Element/tr">&lt;tr&gt;</a></code></strong> element ('tr' stands for 'table row'). Let's investigate this now.</p>
+
+<ol>
+ <li>Place the four cells you've already created inside <code>&lt;tr&gt;</code> tags, like so:
+
+  <pre class="brush: html notranslate">&lt;tr&gt;
+  &lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;
+  &lt;td&gt;I'm your second cell.&lt;/td&gt;
+  &lt;td&gt;I'm your third cell.&lt;/td&gt;
+  &lt;td&gt;I'm your fourth cell.&lt;/td&gt;
+&lt;/tr&gt;</pre>
+ </li>
+ <li>Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <code>&lt;tr&gt;</code> element, with each cell contained in a <code>&lt;td&gt;</code>.</li>
+</ol>
+
+<p>This should result in a table that looks something like the following:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Hi, I'm your first cell.</td>
+   <td>I'm your second cell.</td>
+   <td>I'm your third cell.</td>
+   <td>I'm your fourth cell.</td>
+  </tr>
+  <tr>
+   <td>Second row, first cell.</td>
+   <td>Cell 2.</td>
+   <td>Cell 3.</td>
+   <td>Cell 4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: You can also find this on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p>
+</div>
+
+<h2 id="Adding_headers_with_&lt;th>_elements">Adding headers with &lt;th&gt; elements</h2>
+
+<p>Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
+    &lt;td&gt;Knocky&lt;/td&gt;
+    &lt;td&gt;Flor&lt;/td&gt;
+    &lt;td&gt;Ella&lt;/td&gt;
+    &lt;td&gt;Juan&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Breed&lt;/td&gt;
+    &lt;td&gt;Jack Russell&lt;/td&gt;
+    &lt;td&gt;Poodle&lt;/td&gt;
+    &lt;td&gt;Streetdog&lt;/td&gt;
+    &lt;td&gt;Cocker Spaniel&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Age&lt;/td&gt;
+    &lt;td&gt;16&lt;/td&gt;
+    &lt;td&gt;9&lt;/td&gt;
+    &lt;td&gt;10&lt;/td&gt;
+    &lt;td&gt;5&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Owner&lt;/td&gt;
+    &lt;td&gt;Mother-in-law&lt;/td&gt;
+    &lt;td&gt;Me&lt;/td&gt;
+    &lt;td&gt;Me&lt;/td&gt;
+    &lt;td&gt;Sister-in-law&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Eating Habits&lt;/td&gt;
+    &lt;td&gt;Eats everyone's leftovers&lt;/td&gt;
+    &lt;td&gt;Nibbles at food&lt;/td&gt;
+    &lt;td&gt;Hearty eater&lt;/td&gt;
+    &lt;td&gt;Will eat till he explodes&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Now the actual rendered table:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td></td>
+   <td>Knocky</td>
+   <td>Flor</td>
+   <td>Ella</td>
+   <td>Juan</td>
+  </tr>
+  <tr>
+   <td>Breed</td>
+   <td>Jack Russell</td>
+   <td>Poodle</td>
+   <td>Streetdog</td>
+   <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+   <td>Age</td>
+   <td>16</td>
+   <td>9</td>
+   <td>10</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Owner</td>
+   <td>Mother-in-law</td>
+   <td>Me</td>
+   <td>Me</td>
+   <td>Sister-in-law</td>
+  </tr>
+  <tr>
+   <td>Eating Habits</td>
+   <td>Eats everyone's leftovers</td>
+   <td>Nibbles at food</td>
+   <td>Hearty eater</td>
+   <td>Will eat till he explodes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.</p>
+
+<h3 id="Active_learning_table_headers">Active learning: table headers</h3>
+
+<p>Let's have a go at improving this table.</p>
+
+<ol>
+ <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.</li>
+ <li>To recognize the table headers as headers, both visually and semantically, you can use the <strong><code><a href="/en-US/docs/Web/HTML/Element/th">&lt;th&gt;</a></code></strong> element ('th' stands for 'table header'). This works in exactly the same way as a <code>&lt;td&gt;</code>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <code>&lt;td&gt;</code> elements surrounding the table headers into <code>&lt;th&gt;</code> elements.</li>
+ <li>Save your HTML and load it in a browser, and you should see that the headers now look like headers.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">see it live also</a>).</p>
+</div>
+
+<h3 id="Why_are_headers_useful">Why are headers useful?</h3>
+
+<p>We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.</p>
+</div>
+
+<p>Tables headers also have an added benefit — along with the <code>scope</code> attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.</p>
+
+<h2 id="Allowing_cells_to_span_multiple_rows_and_columns">Allowing cells to span multiple rows and columns</h2>
+
+<p>Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.</p>
+
+<p>The initial markup looks like this:</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Animals&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Hippopotamus&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Horse&lt;/th&gt;
+    &lt;td&gt;Mare&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Stallion&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Crocodile&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Chicken&lt;/th&gt;
+    &lt;td&gt;Hen&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Rooster&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>But the output doesn't give us quite what we want:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Animals</th>
+  </tr>
+  <tr>
+   <th>Hippopotamus</th>
+  </tr>
+  <tr>
+   <th>Horse</th>
+   <td>Mare</td>
+  </tr>
+  <tr>
+   <td>Stallion</td>
+  </tr>
+  <tr>
+   <th>Crocodile</th>
+  </tr>
+  <tr>
+   <th>Chicken</th>
+   <td>Hen</td>
+  </tr>
+  <tr>
+   <td>Rooster</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the <code>colspan</code> and <code>rowspan</code> attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, <code>colspan="2"</code> makes a cell span two columns.</p>
+
+<p>Let's use <code>colspan</code> and <code>rowspan</code> to improve this table.</p>
+
+<ol>
+ <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same animals example as you saw above.</li>
+ <li>Next, use <code>colspan</code> to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.</li>
+ <li>Finally, use <code>rowspan</code> to make "Horse" and "Chicken" span across two rows.</li>
+ <li>Save and open your code in a browser to see the improvement.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">see it live also</a>).</p>
+</div>
+
+<table id="tabular" style="background-color: white;">
+</table>
+
+<h2 id="Providing_common_styling_to_columns">Providing common styling to columns</h2>
+
+<p>There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <strong><code><a href="/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code></strong> and <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code></strong> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on <em>every</em> <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Styling columns like this is <a href="https://www.w3.org/TR/CSS22/tables.html#columns">limited to a few properties</a>: <code><a href="/en-US/docs/Web/CSS/border">border</a></code>, <code><a href="/en-US/docs/Web/CSS/background">background</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, and <code><a href="/en-US/docs/Web/CSS/visibility">visibility</a></code>. To set other properties you'll have to either style every <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.</p>
+</div>
+
+<p>Take the following simple example:</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Data 1&lt;/th&gt;
+    &lt;th style="background-color: yellow"&gt;Data 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcutta&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Which gives us the following result:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Data 1</th>
+   <th style="background-color: yellow;">Data 2</th>
+  </tr>
+  <tr>
+   <td>Calcutta</td>
+   <td style="background-color: yellow;">Orange</td>
+  </tr>
+  <tr>
+   <td>Robots</td>
+   <td style="background-color: yellow;">Jazz</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a <code>class</code> set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a <code>&lt;col&gt;</code> element. <code>&lt;col&gt;</code> elements are  specified inside a <code>&lt;colgroup&gt;</code> container just below the opening <code>&lt;table&gt;</code> tag. We could create the same effect as we see above by specifying our table as follows:</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col&gt;
+    &lt;col style="background-color: yellow"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Data 1&lt;/th&gt;
+    &lt;th&gt;Data 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcutta&lt;/td&gt;
+    &lt;td&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <code>&lt;col&gt;</code> element — if we didn't, the styling would just be applied to the first column.</p>
+
+<p>If we wanted to apply the styling information to both columns, we could just include one <code>&lt;col&gt;</code> element with a span attribute on it, like this:</p>
+
+<pre class="brush: html notranslate">&lt;colgroup&gt;
+  &lt;col style="background-color: yellow" span="2"&gt;
+&lt;/colgroup&gt;</pre>
+
+<p>Just like <code>colspan</code> and <code>rowspan</code>, <code>span</code> takes a unitless number value that specifies the number of columns you want the styling to apply to.</p>
+
+<h3 id="Active_learning_colgroup_and_col">Active learning: colgroup and col</h3>
+
+<p>Now it's time to have a go yourself.</p>
+
+<p>Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p>
+
+<p>Recreate the table by following the steps below.</p>
+
+<ol>
+ <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.</li>
+ <li>Add a <code>&lt;colgroup&gt;</code> element at the top of the table, just underneath the <code>&lt;table&gt;</code> tag, in which you can add your <code>&lt;col&gt;</code> elements (see the remaining steps below).</li>
+ <li>The first two columns need to be left unstyled.</li>
+ <li>Add a background color to the third column. The value for your <code>style</code> attribute is <code>background-color:#97DB9A;</code></li>
+ <li>Set a separate width on the fourth column. The value for your <code>style</code> attribute is <code>width: 42px;</code></li>
+ <li>Add a background color to the fifth column. The value for your <code>style</code> attribute is <code>background-color: #97DB9A;</code></li>
+ <li>Adicione uma cor de fundo diferente mais uma borda à sexta coluna, para indicar que este é um dia especial e ela está dando uma nova aula. Os valores do seu <code>style</code>atributo são<code>background-color:#DCC48E; border:4px solid #C1437A;</code></li>
+ <li>Os últimos dois dias são dias livres, então apenas defina-os para nenhuma cor de fundo, mas uma largura definida; o valor do <code>style</code>atributo é<code>width: 42px;</code></li>
+</ol>
+
+<p>Veja como você segue com o exemplo. Se você tiver dúvidas ou quiser verificar seu trabalho, pode encontrar nossa versão no GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">schedule-fixed.html</a> ( <a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">veja ao vivo também</a> ).</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Isso envolve o básico das tabelas HTML. No próximo artigo, veremos alguns recursos de mesa um pouco mais avançados e começaremos a pensar como eles são acessíveis para pessoas com deficiência visual.</p>
+
+<div>{{NextMenu("Aprender/HTML/Tabelas/Avançado", "Aprender/HTML/Tabelas")}}</div>
+
+<div>
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Noções básicas de tabela HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Recursos avançados e acessibilidade da tabela HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estruturação de dados do planeta</a></li>
+</ul>
+</div>
diff --git a/files/pt-br/learn/html/tables/index.html b/files/pt-br/learn/html/tables/index.html
new file mode 100644
index 0000000000..990e9ad438
--- /dev/null
+++ b/files/pt-br/learn/html/tables/index.html
@@ -0,0 +1,36 @@
+---
+title: Tabelas em HTML
+slug: Aprender/HTML/Tables
+tags:
+  - tabelas
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Uma tarefa muito comum em HTML é estruturar os dados tabulares, e há vários elementos e atributos próprios para essa finalidade. Em conjunto com a linguagem <a href="https://developer.mozilla.org/pt-PT/docs/Learn/CSS">CSS</a> para estilização, o HTML torna fácil a exibição de tabelas com informação na Web, tais como o seu plano de lições escolares, o horário na sua piscina local, ou estatísticas sobre os seus dinossauros favoritos ou seu time de futebol favorito. Este módulo te guia por tudo que você precisa saber sobre a estruturação de dados tabulares utilizando o HTML.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Antes de iniciar este módulo, você deverá ter domínio dos básicos de HTML — consulte <a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: se está utilizando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar os seus próprios arquivos, pode testar a maioria dos exemplos de código num programa de codificação on-line, tais como <a href="http://jsbin.com/" rel="noopener">JSBin</a> ou <a href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<p>Este módulo contém os seguintes artigos:</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Tables/Basicos">HTML - o básico sobre tabelas</a></dt>
+ <dd>Este artigo apresenta as tabelas HTML, cobrindo o essencial, tal como linhas e células, cabeçalhos, como extender células por múltiplas colunas e linhas, e como agrupar todas as células numa coluna para efeitos de estilo.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Tables/Avancada">HTML - funcionalidades avançadas de tabelas e acessibilidade</a></dt>
+ <dd>No segundo artigo deste módulo, nós vamos ver algumas funcionalidades mais avançadas das tabelas HTML — tais como legendas/resumos e agrupar as suas filas no cabeçalho da tabela (head), seções de corpo (body) e rodapé (footer) — bem como, veremos sobre a acessibilidade das tabelas para os utilizadores deficientes visuais .</dd>
+</dl>
+
+<h2 id="Exercícios">Exercícios</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Tables/Avaliacao_Estruturar_os_dados_dos_planetas">Estruturar dados sobre planetas</a></dt>
+ <dd>Na nossa avaliação sobre tabelas em HTML, vamos fornecer alguns dados sobre os planetas do nosso sistema solar, para que possa estruturá-los numa tabela HTML.</dd>
+</dl>
diff --git a/files/pt-br/learn/index.html b/files/pt-br/learn/index.html
new file mode 100644
index 0000000000..cef65bb9c7
--- /dev/null
+++ b/files/pt-br/learn/index.html
@@ -0,0 +1,129 @@
+---
+title: Aprendendo desenvolvimento web
+slug: Aprender
+tags:
+  - Aprender
+  - CSS
+  - HTML
+  - Index
+  - Iniciante
+  - Intro
+  - Novato
+  - Web
+translation_of: Learn
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">Bem-vindo à área de aprendizado da MDN. Este conjunto de artigos tem como objetivo fornecer aos iniciantes no desenvolvimento web tudo o que eles precisam para começar a codificar sites.</p>
+
+<p>O objetivo desta área da MDN não é levá-lo de "iniciante" a "especialista", mas levá-lo de "iniciante" a "confortável". A partir daí, você poderá começar a fazer o seu próprio caminho, aprendendo com o <a href="/pt-BR/">restante da MDN</a> e outros recursos intermediários a avançados que assumem muito conhecimento prévio.</p>
+
+<p>Se você é um iniciante, o desenvolvimento web pode ser desafiador - nós o ajudaremos e forneceremos detalhes suficientes para que você se sinta à vontade e aprenda os tópicos adequadamente. Você deve se sentir em casa, seja um aluno aprendendo desenvolvimento web (sozinho ou como parte de uma classe), um professor que procura materiais para a aula, um hobby ou alguém que só quer entender mais sobre como as tecnologias web funcionam.</p>
+
+<h2 id="O_que_há_de_novo">O que há de novo?</h2>
+
+<p>O conteúdo da área de aprendizado está sendo adicionado regularmente. Começamos a manter as <a href="/pt-BR/docs/Learn/Release_notes">Notas de versão da área de aprendizado</a> para mostrar o que mudou - verifique regularmente!</p>
+
+<p>Se você tiver dúvidas sobre os tópicos que gostaria de ver cobertos ou que estão faltando, envie-nos uma mensagem em nosso <a href="https://discourse.mozilla.org/c/mdn">Fórum de discussão</a>.</p>
+
+<h2 id="Onde_começar">Onde começar</h2>
+
+<ul class="card-grid">
+ <li><span>Iniciante:</span> Se você é um iniciante no desenvolvimento web, recomendamos que você comece trabalhando no nosso módulo <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web">Introdução à Web</a>, que fornece uma introdução prática ao desenvolvimento web.</li>
+ <li><span>Perguntas específicas:</span> Se você tiver uma pergunta específica sobre desenvolvimento web, nossa seção <a href="/pt-BR/docs/Learn/Common_questions">Perguntas comuns</a> pode ter algo para ajudá-lo.</li>
+ <li><span>Além do básico:</span> Se você já possui um pouco de conhecimento, o próximo passo é aprender {{glossary ("HTML")}} e {{glossary ("CSS")}} em detalhes: comece com o módulo <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a> e vá para nosso módulo <a href="/pt-BR/docs/Learn/CSS/First_steps">Primeiros passos com CSS</a>.</li>
+ <li><span>Passando para o script:</span> Se você já está familiarizado com HTML e CSS ou se interessa principalmente por codificação, deve passar para o {{glossary ("JavaScript")}} ou para o desenvolvimento no servidor. Comece com nossos módulo <a href="/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos com JavaScript</a> e<a href="/pt-BR/docs/Learn/Server-side/First_steps"> Primeiros passos programando o site no servidor</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Nosso <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario">glossário</a> fornece definições de terminologia.</p>
+</div>
+
+<p>{{LearnBox({"title":"Entrada aleatória do glossário"})}}</p>
+
+<h2 id="Assuntos_abordados">Assuntos abordados</h2>
+
+<p>A seguir, uma lista de todos os tópicos abordados na área de aprendizado da MDN.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web">Intordução à Web</a></dt>
+ <dd>Fornece uma introdução prática ao desenvolvimento da web para iniciantes.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML">HTML - Estruturando a Web</a></dt>
+ <dd>HTML é a linguagem que usamos para estruturar as diferentes partes do nosso conteúdo e definir qual é o seu significado ou propósito. Este tópico ensina HTML em detalhes.</dd>
+ <dt><a href="/pt-BR/docs/Aprender/CSS">CSS - Estilizando a Web</a></dt>
+ <dd>CSS é a linguagem que podemos usar para estilizar e esquematizar nosso conteúdo web, além de adicionar comportamentos como animação. Este tópico fornece uma cobertura abrangente de CSS.</dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript">JavaScript — Script dinamico do lado do cliente</a></dt>
+ <dd><span>JavaScript é a linguagem de script usada para adicionar funcionalidade dinâmica a páginas da web. Este tópico ensina todos os elementos essenciais necessários para se sentir confortável com a escrita e a compreensão do JavaScript.</span></dd>
+ <dt><a href="/pt-BR/docs/Web/Guide/HTML/Forms">Formulários web - Trabalhando com dados do usuário</a></dt>
+ <dd>Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados ​​para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário. Nos artigos listados abaixo, abordaremos todos os aspectos essenciais da estruturação, estilo e interação com os formulários web.</dd>
+ <dt><a href="/pt-BR/docs/Learn/Accessibility">Acessibilidade - torne a web utilizável por todos</a></dt>
+ <dd>Acessibilidade é a prática de disponibilizar o conteúdo web para o maior número possível de pessoas, independentemente da deficiência, dispositivo, localidade ou outros fatores de diferenciação. Este tópico fornece tudo o que você precisa saber.</dd>
+ <dt><a href="/pt-BR/docs/Aprender/Performance">Desempenho da Web - tornando os sites rápidos e responsivos</a></dt>
+ <dd>O desempenho da Web é a arte de garantir que os aplicativos façam download rápido e respondam à interação do usuário, independentemente da capacidade, tamanho da tela, rede ou recursos do dispositivo.</dd>
+ <dt><a href="/pt-BR/docs/Aprender/Ferramentas_e_teste">Ferramentas e testes</a></dt>
+ <dd>
+ <p>Este tópico aborda as ferramentas que os desenvolvedores usam para facilitar seu trabalho, como ferramentas de teste entre navegadores, linters, formatadores, ferramentas de transformação, sistemas de controle de versão e ferramentas de implantação.</p>
+ </dd>
+ <dt><a href="/pt-BR/docs/Learn/Server-side">Programação do site no servidor</a></dt>
+ <dd>Mesmo se você estiver se concentrando no desenvolvimento web do lado do cliente, ainda é útil saber como os servidores e os recursos de código do lado do servidor funcionam. Este tópico fornece uma introdução geral sobre como funciona o lado do servidor e tutoriais detalhados que mostram como criar um aplicativo do lado do servidor usando duas frameworks populares - Django (Python) e Express (Node.js).</dd>
+</dl>
+
+<h2 id="Obtendo_nossos_exemplos_de_código">Obtendo nossos exemplos de código</h2>
+
+<p>Os exemplos de código que você encontrará na Área de aprendizado estão<a href="https://github.com/mdn/learning-area/"> disponíveis no GitHub</a>. Se você deseja copiar todos eles para o seu computador, a maneira mais fácil é fazer o <a href="https://github.com/mdn/learning-area/archive/master.zip">download de um ZIP da última ramificação do código mestre</a>.</p>
+
+<p>Se você preferir copiar o repositório de uma maneira mais flexível que permita atualizações automáticas, siga as instruções mais complexas:</p>
+
+<ol>
+ <li><a href="https://git-scm.com/downloads">Instale o Git </a>na sua máquina. Este é o software do sistema de controle de versão, no qual o GitHub trabalha.</li>
+ <li>Abra o <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">prompt de comando</a> do seu computador (Windows) ou terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li>
+ <li>Para copiar o repositório da área de aprendizado para uma pasta chamada learning-area no local atual para o qual o prompt de comando / terminal está apontando, use o seguinte comando:
+  <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
+ </li>
+ <li>Agora você pode entrar no diretório e encontrar os arquivos que procura (usando o Finder / File Explorer ou o <a href="https://en.wikipedia.org/wiki/Cd_(command)">comando cd</a>).</li>
+</ol>
+
+<p>Você pode atualizar o repositório <code>learning-area</code> com as alterações feitas na versão principal no GitHub com as seguintes etapas:</p>
+
+<ol>
+ <li>No prompt de comando / terminal, entre no diretório <code>learning-area</code> usando <code>cd</code>. Por exemplo, se você estivesse no diretório pai:
+
+  <pre class="brush: bash notranslate">cd learning-area</pre>
+ </li>
+ <li>Atualize o repositório usando o seguinte comando:
+  <pre class="brush: bash notranslate">git pull</pre>
+ </li>
+</ol>
+
+<h2 id="Contate-nos">Contate-nos</h2>
+
+<p>Se você quiser entrar em contato conosco sobre qualquer coisa, a melhor maneira é enviar uma mensagem para o nosso <a href="https://discourse.mozilla.org/c/mdn">Fórum de discussão</a>. Gostaríamos de ouvir sua opinião sobre qualquer coisa que você acha que está errada ou ausente no site, solicitações de novos tópicos de aprendizado, solicitações de ajuda com itens que você não entende ou qualquer outra pergunta ou preocupação.</p>
+
+<p>Se você estiver interessado em ajudar a desenvolver / melhorar o conteúdo, veja <a href="/pt-BR/docs/Aprender/Como_contribuir">como você pode ajudar</a> e entre em contato! Temos o prazer em conversar com você, seja você um aluno, professor, desenvolvedor web experiente ou alguém interessado em ajudar a melhorar a experiência de aprendizado.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="https://www.mozilla.org/pt-BR/newsletter/developer/">Boletim informativo para desenvovedores mozilla</a></dt>
+ <dd>Nosso boletim informativo para desenvolvedores web, que é um excelente recurso para todos os níveis de experiência.</dd>
+ <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
+ <dd>Um excelente recurso para aspirantes a desenvolvedores web - Aprenda JavaScript em um ambiente interativo, com breves lições e testes interativos, guiados por avaliação automatizada. As primeiras 40 lições são gratuitas e o curso completo está disponível por um pequeno pagamento único.</dd>
+ <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
+ <dd>Uma grande série de vídeos explicando os fundamentos da web, destinados a iniciantes no desenvolvimento web. Criado por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
+ <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
+ <dd>Um ótimo site interativo para aprender linguagens de programação do zero.</dd>
+ <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
+ <dd>
+ <p>Teoria básica de programação com um processo de aprendizado gamificado. Principalmente focado em iniciantes.</p>
+ </dd>
+ <dt><a href="https://code.org/">Code.org</a></dt>
+ <dd>Teoria e prática básicas de programação, destinadas principalmente a crianças / iniciantes.</dd>
+ <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
+ <dd>Cursos gratuitos e abertos para o aprendizado de habilidades técnicas, com orientação e aprendizado baseado em projetos.</dd>
+ <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
+ <dd>Site interativo com tutoriais e projetos para aprender desenvolvimento web.</dd>
+ <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Web literacy map</a></dt>
+ <dd>Uma estrutura para alfabetização na web de nível básico e habilidades do século XXI, que também fornece acesso a atividades de ensino classificadas por categoria.</dd>
+ <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt>
+ <dd>Milhares de desafios interativos de JavaScript.</dd>
+</dl>
diff --git a/files/pt-br/learn/javascript/asynchronous/escolhendo_abordagem_correta/index.html b/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html
index 254bc41a99..254bc41a99 100644
--- a/files/pt-br/learn/javascript/asynchronous/escolhendo_abordagem_correta/index.html
+++ b/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html
diff --git a/files/pt-br/learn/javascript/asynchronous/conceitos/index.html b/files/pt-br/learn/javascript/asynchronous/concepts/index.html
index f2e6759f41..f2e6759f41 100644
--- a/files/pt-br/learn/javascript/asynchronous/conceitos/index.html
+++ b/files/pt-br/learn/javascript/asynchronous/concepts/index.html
diff --git a/files/pt-br/learn/javascript/asynchronous/introdução/index.html b/files/pt-br/learn/javascript/asynchronous/introducing/index.html
index b95a88d35c..b95a88d35c 100644
--- a/files/pt-br/learn/javascript/asynchronous/introdução/index.html
+++ b/files/pt-br/learn/javascript/asynchronous/introducing/index.html
diff --git a/files/pt-br/learn/javascript/building_blocks/build_your_own_function/index.html b/files/pt-br/learn/javascript/building_blocks/build_your_own_function/index.html
new file mode 100644
index 0000000000..d701a63823
--- /dev/null
+++ b/files/pt-br/learn/javascript/building_blocks/build_your_own_function/index.html
@@ -0,0 +1,242 @@
+---
+title: Construa sua própria função
+slug: Aprender/JavaScript/Elementos_construtivos/Build_your_own_function
+translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece experiência prática. Aqui você terá algumas práticas construindo sua própria função personalizada. Ao longo do caminho, também explicaremos alguns detalhes úteis sobre como lidar com funções.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Alfabetização básica em informática, um entendimento básico de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos do JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funções — blocos reutilizáveis de código</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetiva:</th>
+   <td>Para fornecer alguma prática na criação de uma função personalizada e explicar alguns detalhes associados mais úteis.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aprendizagem_ativa_vamos_construir_uma_função">Aprendizagem ativa: vamos construir uma função</h2>
+
+<p>A função personalizada que vamos construir será chamada  <code>displayMessage().</code> Ele exibirá uma caixa de mensagem personalizada em uma página da Web e atuará como um substituto personalizado para a função de <a href="/en-US/docs/Web/API/Window/alert">alert()</a> interna do navegador. Já vimos isso antes, mas vamos apenas refrescar nossas memórias. Digite o seguinte no console JavaScript do seu navegador, em qualquer página de sua preferência:</p>
+
+<pre class="brush: js notranslate">alert('This is a message');</pre>
+
+<p>A função <code>alert</code> leva um único argumento — a string exibida na caixa de alerta. Tente variar a string para mudar a mensagem.</p>
+
+<p>A função <code>alert</code> é limitada: você pode alterar a mensagem, mas não pode variar com facilidade nada, como cor, ícone ou qualquer outra coisa. Nós vamos construir um que se mostrará mais divertido.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este exemplo deve funcionar bem em todos os navegadores modernos, mas o estilo pode parecer um pouco engraçado em navegadores um pouco mais antigos. Recomendamos que você faça esse exercício em um navegador moderno como o Firefox, o Opera ou o Chrome.</p>
+</div>
+
+<h2 id="A_função_básica">A função básica</h2>
+
+<p>Para começar, vamos montar uma função básica.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Para convenções de nomenclatura de função, você deve seguir as mesmas regras das <a href="/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">convenções de nomenclatura de variáveis</a>. Algo bom é como você pode diferenciá-los — os nomes das funções aparecem com parênteses depois deles e as variáveis não.</p>
+</div>
+
+<ol>
+ <li>Comece acessando o arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a> e fazendo uma cópia local. Você verá que o HTML é simples — o corpo contém apenas um único botão. Também fornecemos algumas CSS básicas para estilizar a caixa de mensagem personalizada e um elemento {{htmlelement("script")}} vazio para colocar nosso JavaScript.</li>
+ <li>Em seguida, adicione o seguinte dentro do elemento <code>&lt;script&gt;</code> :
+  <pre class="brush: js notranslate">function displayMessage() {
+
+}</pre>
+  Começamos com a palavra-chave <code>function</code>, o que significa que estamos definindo uma função. Isto é seguido pelo nome que queremos dar à nossa função, um par de parênteses e um conjunto de chaves. Quaisquer parâmetros que queremos dar à nossa função vão dentro dos parênteses, e o código que é executado quando chamamos a função vai dentro das chaves.</li>
+ <li>Por fim, adicione o seguinte código dentro das chaves:
+  <pre class="brush: js notranslate">var html = document.querySelector('html');
+
+var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+ </li>
+</ol>
+
+<p>Isso é um monte de código para passar, então vamos guiá-lo pouco a pouco.</p>
+
+<p>A primeira linha usa uma função da API do DOM chamada {{domxref("document.querySelector()")}} para selecionar o elemento {{htmlelement("html")}} e armazenar uma referência a ele em uma variável chamada <code>html</code>, para que possamos fazer coisas com ela mais tarde:</p>
+
+<pre class="brush: js notranslate">var html = document.querySelector('html');</pre>
+
+<p>A próxima seção usa outra função da API do DOM chamada {{domxref("Document.createElement()")}} para criar um elemento {{htmlelement("div")}} elemento e armazenar uma referência a ele em uma variável chamada <code>panel</code>. Este elemento será o recipiente externo da nossa caixa de mensagens.</p>
+
+<p>Em seguida, usamos outra função da API do DOM chamada {{domxref("Element.setAttribute()")}} para setar o atributo <code>class</code> atributo no nosso painel com um valor de <code>msgBox</code>. Isso é para facilitar o estilo do elemento — se você olhar para o CSS na página, verá que estamos usando um seletor de classe <code>.msgBox</code> para estilizar a caixa de mensagem e seu conteúdo.</p>
+
+<p>Finalmente, chamamos uma função DOM chamada {{domxref("Node.appendChild()")}} na variável <code>html</code> vque armazenamos anteriormente, que nidifica um elemento dentro do outro como um filho dele. Nós especificamos o painel <code>&lt;div&gt;</code> como o filho que queremos acrescentar dentro do elemento <code>&lt;html&gt;</code> Precisamos fazer isso porque o elemento que criamos não aparecerá na página sozinho — precisamos especificar onde colocá-lo.</p>
+
+<pre class="brush: js notranslate">var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);</pre>
+
+<p>As próximas duas seções fazem uso das mesmas funções <code>createElement()</code> e <code>appendChild()</code> que já vimos para criar dois novos elementos — um {{htmlelement("p")}} e um {{htmlelement("button")}} — e inseri-los na página como filhos do painel <code>&lt;div&gt;</code>. Nós usamos a sua propriedade {{domxref("Node.textContent")}} — que representa o conteúdo de texto de um elemento — para inserir uma mensagem dentro do parágrafo e um 'x' dentro do botão. Este botão será o que precisa ser clicado / ativado quando o usuário quiser fechar a caixa de mensagem.</p>
+
+<pre class="brush: js notranslate">var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);</pre>
+
+<p>Finalmente, usamos um manipulador eventos {{domxref("GlobalEventHandlers.onclick")}} para fazer com que, quando o botão é clicado, algum código seja executado para excluir todo o painel da página — para fechar a caixa de mensagem.</p>
+
+<p>Resumidamente, o manipulador <code>onclick</code> é uma propriedade disponível no botão (ou, na verdade, qualquer elemento na página) que pode ser definida para uma função para especificar qual código será executado quando o botão for clicado. Você aprenderá muito mais sobre isso em nosso artigo de eventos posteriores. Estamos tornando o manipulador <code>onclick</code> igual a uma função anônima, que contém o código a ser executado quando o botão é clicado. A linha dentro da função usa a função da API do DOM {{domxref("Node.removeChild()")}} para especificar que queremos remover um elemento filho específico do elemento HTML — nesse caso, o painel <code>&lt;div&gt;</code>.</p>
+
+<pre class="brush: js notranslate">closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+
+<p>Basicamente, todo esse bloco de código está gerando um bloco de HTML semelhante a isso e inserindo-o na página:</p>
+
+<pre class="brush: html notranslate">&lt;div class="msgBox"&gt;
+  &lt;p&gt;This is a message box&lt;/p&gt;
+  &lt;button&gt;x&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Isso foi um monte de código para trabalhar — não se preocupe muito se você não se lembra exatamente como tudo funciona agora! A parte principal que queremos focar aqui é a estrutura e uso da função, mas queremos mostrar algo interessante para este exemplo.</p>
+
+<h2 id="Chamando_a_função">Chamando a função</h2>
+
+<p>Você tem sua própria definição de função escrita em seu elemento  <code>&lt;script&gt;</code>, mas não fará nada do jeito que está.</p>
+
+<ol>
+ <li>Tente incluir a seguinte linha abaixo da sua função para chamá-lo:
+  <pre class="brush: js notranslate">displayMessage();</pre>
+  Esta linha chama a função, fazendo com que ela seja executada imediatamente. Quando você salvar seu código e recarregá-lo no navegador, verá a pequena caixa de mensagem aparecer imediatamente, apenas uma vez. Nós só estamos chamando uma vez, afinal.</li>
+ <li>
+  <p>Agora abra suas ferramentas de desenvolvedor do navegador na página de exemplo, vá para o console JavaScript e digite a linha novamente, você verá que ela aparece novamente! Então isso é divertido — agora temos uma função reutilizável que podemos chamar a qualquer momento que quisermos.</p>
+
+  <p>Mas provavelmente queremos que apareça em resposta a ações do usuário e do sistema. Em um aplicativo real, essa caixa de mensagem provavelmente seria chamada em resposta a novos dados sendo disponibilizados, ou um erro ocorreria, ou o usuário tentando excluir seu perfil ("você tem certeza disso?") Ou o usuário adicionando um novo contato e a operação completando com sucesso ... etc.</p>
+
+  <p>Nesta demonstração, faremos com que a caixa de mensagem apareça quando o usuário clicar no botão.</p>
+ </li>
+ <li>Exclua a linha anterior que você adicionou.</li>
+ <li>Em seguida, vamos selecionar o botão e armazenar uma referência a ele em uma variável. Adicione a seguinte linha ao seu código, acima da definição da função:
+  <pre class="brush: js notranslate">var btn = document.querySelector('button');</pre>
+ </li>
+ <li>Por fim, adicione a seguinte linha abaixo da anterior:
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+  De maneira semelhante à nossa linha  <code>closeBtn.onclick...</code> dentro da função, aqui estamos chamando algum código em resposta a um botão sendo clicado. Mas, neste caso, em vez de chamar uma função anônima contendo algum código, estamos chamando nosso nome de função diretamente.</li>
+ <li>Tente salvar e atualizar a página — agora você verá a caixa de mensagem quando clicar no botão.</li>
+</ol>
+
+<p>Você pode estar se perguntando por que não incluímos os parênteses após o nome da função. Isso ocorre porque não queremos chamar a função imediatamente — somente depois que o botão foi clicado. Se você tentar mudar a linha para</p>
+
+<pre class="brush: js notranslate">btn.onclick = displayMessage();</pre>
+
+<p>e salvar e recarregar, você verá que a caixa de mensagem aparece sem que o botão seja clicado! Os parênteses neste contexto são às vezes chamados de "operador de invocação de função". Você só os usa quando deseja executar a função imediatamente no escopo atual. No mesmo sentido, o código dentro da função anônima não é executado imediatamente, pois está dentro do escopo da função.</p>
+
+<p>Se você tentou o último experimento, certifique-se de desfazer a última alteração antes de continuar.</p>
+
+<h2 id="Melhorando_a_função_com_parâmetros">Melhorando a função com parâmetros</h2>
+
+<p>Tal como está, a função ainda não é muito útil — nós não queremos apenas mostrar a mesma mensagem padrão todas as vezes. Vamos melhorar nossa função adicionando alguns parâmetros, permitindo-nos chamá-lo com algumas opções diferentes.</p>
+
+<ol>
+ <li>Primeiro de tudo, atualize a primeira linha da função:
+  <pre class="brush: js notranslate">function displayMessage() {</pre>
+  para isso:</li>
+ <li>
+  <pre class="brush: js notranslate">function displayMessage(msgText, msgType) {</pre>
+  Agora, quando chamamos a função, podemos fornecer dois valores de variáveis dentro dos parênteses para especificar a mensagem a ser exibida na caixa de mensagem e o tipo de mensagem que ela é.</li>
+ <li>Para utilizar o primeiro parâmetro, atualize a seguinte linha dentro da sua função:
+  <pre class="brush: js notranslate">msg.textContent = 'This is a message box';</pre>
+  to
+
+  <pre class="brush: js notranslate">msg.textContent = msgText;</pre>
+ </li>
+ <li>Por último, mas não menos importante, você precisa atualizar sua chamada de função para incluir um texto de mensagem atualizado. Altere a seguinte linha:
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+  para este bloco:
+
+  <pre class="brush: js notranslate">btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};</pre>
+  Se quisermos especificar parâmetros dentro de parênteses para a função que estamos chamando, então não podemos chamá-la diretamente — precisamos colocá-lo dentro de uma função anônima para que não fique no escopo imediato e, portanto, não seja chamado imediatamente. Agora ele não será chamado até que o botão seja clicado.</li>
+ <li>Recarregue e tente o código novamente e você verá que ele ainda funciona muito bem, exceto que agora você também pode variar a mensagem dentro do parâmetro para obter mensagens diferentes exibidas na caixa!</li>
+</ol>
+
+<h3 id="Um_parâmetro_mais_complexo">Um parâmetro mais complexo</h3>
+
+<p>Para o próximo parâmetro. Este vai envolver um pouco mais de trabalho — vamos configurá-lo para que, dependendo do parâmetro <code>msgType</code>, a função mostre um ícone diferente e uma cor de fundo diferente.</p>
+
+<ol>
+ <li>Primeiro de tudo, baixe os ícones necessários para este exercício (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">aviso</a> e <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">batepapo</a>) do GitHub. Salve-os em uma nova pasta chamada  <code>icons</code> no mesmo local que seu arquivo HTML.
+
+  <div class="note"><strong>Nota</strong>: Os icones <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">aviso</a> e <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">batepapo</a> são encontrado em iconfinder.com, e desenhados por <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Obrigado!</div>
+ </li>
+ <li>Em seguida, encontre o CSS dentro do seu arquivo HTML. Faremos algumas alterações para abrir caminho para os ícones. Primeiro, atualize a largura do <code>.msgBox</code> de:
+  <pre class="brush: css notranslate">width: 200px;</pre>
+  para:</li>
+ <li>
+  <pre class="brush: css notranslate">width: 242px;</pre>
+ </li>
+ <li>Em seguida, adicione as seguintes linhas dentro da regra <code>.msgBox p { ... }</code>:
+  <pre class="brush: css notranslate">padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;</pre>
+ </li>
+ <li>Agora precisamos adicionar código à nossa função <code>displayMessage()</code> para manipular a exibição dos ícones. Adicione o seguinte bloco logo acima da chave de fechamento (<code>}</code>) da sua função:
+  <pre class="brush: js notranslate">if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}</pre>
+  Aqui, se o parâmetro <code>msgType</code> estiver definido como <code>'warning'</code>, o ícone de aviso será exibido e a cor de fundo do painel será definida como vermelha. Se estiver definido para <code>'chat'</code>, o ícone de bate-papo é exibido e a cor de fundo do painel é definida como azul aqua. Se o parâmetro <code>msgType</code> não estiver definido (ou para algo diferente), então a parte <code>else { ... }</code> do código entra em jogo, e o parágrafo é simplesmente fornecido padding padrão e nenhum ícone, sem conjunto de cores do painel de fundo também. Isso fornece um estado padrão se nenhum parâmetro <code>msgType</code> for fornecido, significando que é um parâmetro opcional!</li>
+ <li>Vamos testar nossa função atualizada, tente atualizar a chamada <code>displayMessage()</code> a partir disso:
+  <pre class="brush: js notranslate">displayMessage('Woo, this is a different message!');</pre>
+  para um destes:</li>
+ <li>
+  <pre class="brush: js notranslate">displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');</pre>
+  Você pode ver como a nossa pequena função (agora nem tanto) está se tornando útil.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você tiver problemas para fazer o exemplo funcionar, sinta-se à vontade para verificar seu código na <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">versão finalizada no GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">veja-a também em execução</a>), ou peça nos ajuda.</p>
+</div>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Parabéns por chegar ao final! Este artigo levou você ao longo de todo o processo de criação de uma função prática personalizada, que com um pouco mais de trabalho poderia ser transplantada em um projeto real. No próximo artigo, vamos encerrar as funções explicando outro conceito relacionado essencial — valores de retorno.</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/building_blocks/conditionals/index.html b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html
new file mode 100644
index 0000000000..0fec6d40e7
--- /dev/null
+++ b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html
@@ -0,0 +1,616 @@
+---
+title: Tomando decisões no seu código — condicionais
+slug: Aprender/JavaScript/Elementos_construtivos/conditionals
+tags:
+  - Artigo
+  - Condicionais
+  - Iniciante
+translation_of: Learn/JavaScript/Building_blocks/conditionals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo, dependendo de diferentes entradas. Por exemplo, em um jogo, se o número de vidas do jogador é 0, então o jogo acaba. Em um aplicativo de clima, se estiver sendo observado pela manhã, ele mostra um gráfico do nascer do sol; Mostra estrelas e uma lua se for noite. Neste artigo, exploraremos como as chamadas declarações condicionais funcionam em JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimento básico de algoritmos, um entendimento básico de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript </a>primeiros passos.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender como usar estruturas condicionais em JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Você_pode_tê-lo_em_uma_condição_...!">Você pode tê-lo em uma condição ...!</h2>
+
+<p>Seres humanos (e outros animais) tomam decisões o tempo todo que afetam suas vidas, desde pequenas ("devo comer um biscoito ou dois?") até grandes ("devo ficar no meu país de origem e trabalhar na fazenda do meu pai ou devo mudar para a América e estudar astrofísica?").</p>
+
+<p>As declarações condicionais nos permitem representar tomadas de decisão como estas em <em>JavaScript</em>, a partir da escolha que deve ser feita (por exemplo, "um biscoito ou dois"), ao resultado obtido dessas escolhas (talvez o resultado de "comer um biscoito" possa ser "ainda sentido fome ", e o resultado de "comer dois biscoitos" pode ser "ter se sentido cheio, mas mamãe me falou para comer todos os biscoitos".)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Declarações_if_..._else">Declarações if ... else</h2>
+
+<p>De longe o tipo mais comum de declaração condicional que você usará em JavaScript  — as modestas declarações <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code>.</p>
+
+<h3 id="Sintaxe_básica_if_..._else">Sintaxe básica if ... else</h3>
+
+<p>Veja a sintaxe básica do <code>if...else</code> no {{glossary("pseudocódigo")}}:</p>
+
+<pre class="notranslate"><strong>if (</strong><em>condicao</em><strong>) {</strong>
+  <em>codigo para executar caso a condição seja verdadeira</em>
+<strong>} else {</strong>
+  <em>senão, executar este código</em>
+<strong>}</strong></pre>
+
+<p>Aqui nós temos:</p>
+
+<ol>
+ <li>A palavra reservada <code>if</code> seguida de um par de parênteses.</li>
+ <li>Um teste condicional, localizado dentro dos parênteses (normalmente "este valor é maior que esse", ou "este valor existe"). Esta condição pode fazer uso dos <a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">operadores de comparação</a> que discutimos no último módulo, e podem retornar  <code>true</code> ou <code>false</code>.</li>
+ <li>Um par de chaves, e dentro dele temos código — pode ser qualquer código que queiramos, e só vai ser executado se o teste condicional retornar <code>true</code>.</li>
+ <li>A palavra reservada <code>else</code>.</li>
+ <li>Outro par de chaves, dentro dele temos mais um pouco de código — pode ser qualquer código que queiramos, e só vai executar se o teste condicional retornar um valor diferente de <code>true</code>, neste caso <code>not true, </code>ou <code>false</code>.  </li>
+</ol>
+
+<p>Este tipo de código é bem legível por seres humanos — ele diz: "<strong>if</strong> a condição for <code>true</code>, execute o bloco de código A, <strong>else</strong> execute o bloco de código B" (<strong>se</strong> a condição for <strong>verdadeira</strong>, execute o bloco de código A, <strong>senão</strong> execute o bloco de código B).</p>
+
+<p>Você precisa saber que não é obrigado a colocar a palavra reservada <code>else</code> e e o segundo bloco de par de chaves. O código apresentado a seguir é perfeitamente válido e não produz erros:</p>
+
+<pre class="notranslate"><strong>if (</strong>condicao<strong>) {</strong>
+  codigo para executar se a condição for verdadeira
+<strong>}</strong>
+
+código a ser executado</pre>
+
+<p>Entretanto, você precisa ser cauteloso aqui — neste caso, repare que o segundo bloco de código não é controlado pela declaração condicional, então ele vai executar <strong>sempre</strong>, independente do teste condicional retornar <code>true</code> ou <code>false</code>. É claro, isto não é necessariamente uma coisa ruim, mas isso pode não ser o que você quer — com muita frequência você vai querer executar ou um bloco de código ou outro, não os dois juntos.</p>
+
+<p>Por fim, você verá muitas vezes declarações <code>if...else</code> escritas sem as chaves, no seguinte estilo de escrita:</p>
+
+<pre class="notranslate">if (condicao) executar aqui se for verdadeira
+else executar este outro codigo</pre>
+
+<p>Este é um código perfeitamente válido, mas não é recomendado — ele facilita que você escreva código fora do escopo do <code>if</code> e do <code>else</code>, o que seria mais difícil se você estivesse usando as chaves para delimitar os blocos de código, e usando multiplas linhas de código e identação.</p>
+
+<h3 id="Um_exemplo_real">Um exemplo real</h3>
+
+<p>Para entender bem a sintaxe, vamos considerar um exemplo real. Imagine um filhote de humanos sendo chamdo a ajudar com as tarefas do Pai ou da Mãe. Os pais podem falar: "Ei querido, se você me ajudar a ir e fazer as compras, eu te dou uma grana extra para que você possa comprar aquele brinquedo que você quer." Em JavaScript, nós podemos representar isso como:</p>
+
+<p>var comprasFeitas = false;</p>
+
+<p>if (comprasFeitas === true) {<br>
+   var granaFilhote = 10;<br>
+ } else {<br>
+   var granaFilhote = 5;<br>
+ }</p>
+
+<p>Esse código como mostrado irá sempre resultar na variável <code>comprasFeitas</code> retornando <code>false</code>, sendo um desapontamento para nossas pobres crianças. Cabe a nós fornecer um mecanismo para o pai definir a variável <code>comprasFeitas</code> como <code>true</code> se o filho fez as compras.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode ver a versão completa desse exemplo no <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">GitHub</a> (também veja <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">live</a>.)</p>
+</div>
+
+<h3 id="else_if">else if</h3>
+
+<p dir="ltr" id="tw-target-text">O último exemplo nos forneceu duas opções ou resultados - mas e se quisermos mais do que dois?</p>
+
+<p dir="ltr">Existe uma maneira de encadear escolhas/resultados extras ao seu <code>if...else</code> — usando <code>else if</code>. Cada escolha extra requer um bloco adicional para colocar entre <code>if() { ... }</code> e <code>else { ... }</code> — confira o seguinte exemplo mais envolvido, que pode fazer parte de um aplicativo simples de previsão do tempo:</p>
+
+<pre class="brush: html notranslate">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
+  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
+  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
+  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
+  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  var choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('else_if', '100%', 100) }}</p>
+
+<ol>
+ <li>Aqui, temos um elemento HTML {{htmlelement("select")}} que nos permite fazer escolhas de clima diferentes e um simples parágrafo.</li>
+ <li>No JavaScript, estamos armazenando uma referência para ambos os elementos {{htmlelement("select")}} e {{htmlelement("p")}}, e adicionando um listener de evento ao elemento  <code>&lt;select&gt;</code> para que, quando o valor for alterado, a função <code>setWeather()</code> é executada.</li>
+ <li>Quando esta função é executada, primeiro definimos uma variável chamada <code>choice</code> para o valor atual selecionado no elemento <code>&lt;select&gt;</code>. Em seguida, usamos uma instrução condicional para mostrar um texto diferente dentro do parágrafo, dependendo de qual é o valor de <code>choice</code> . Observe como todas as condições são testadas nos blocos <code>else if() {...}</code>, com exceção do primeiro, que é testado em um bloco <code>if() {...}</code>.</li>
+ <li>A última escolha, dentro do bloco <code>else {...}</code>, é basicamente uma opção de "último recurso" — o código dentro dele será executado se nenhuma das condições for <code>true</code>. Nesse caso, ele serve para esvaziar o texto do parágrafo, se nada for selecionado, por exemplo, se um usuário decidir selecionar novamente a opção de espaço reservado "- Make a choice--" mostrada no início.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode também <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">encontrar este exemplo no GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">veja ele sendo executado</a> lá também.)</p>
+</div>
+
+<h3 id="Uma_nota_sobre_os_operadores_de_comparação">Uma nota sobre os operadores de comparação</h3>
+
+<p>Operadores de comparação são usados para testar as condições dentro de nossas declarações condicionais. Nós primeiro olhamos para operadores de comparação de volta em nosso artigo <a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Matemática básica em JavaScript - números e operadores</a>. Nossas escolhas são:</p>
+
+<ul>
+ <li><code>===</code> e <code>!==</code> — testar se um valor é idêntico ou não idêntico a outro.</li>
+ <li><code>&lt;</code> e <code>&gt;</code> — teste se um valor é menor ou maior que outro.</li>
+ <li><code>&lt;=</code> e <code>&gt;=</code> — testar se um valor é menor ou igual a, ou maior que ou igual a outro.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Revise o material no link anterior se quiser atualizar suas memórias sobre eles.</p>
+</div>
+
+<p>Queríamos fazer uma menção especial do teste de valores boolean (<code>true</code>/<code>false</code>) , e um padrão comum que você vai encontrar de novo e de novo. Qualquer valor que não seja  <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, ou uma string vazia (<code>''</code>) retorna <code>true</code> quando testado como uma instrução condicional, portanto, você pode simplesmente usar um nome de variável para testar se é verdadeiro , ou mesmo que existe (ou seja, não é indefinido). Por exemplo:</p>
+
+<pre class="brush: js notranslate">var cheese = 'Cheddar';
+
+if (cheese) {
+  console.log('Yay! Cheese available for making cheese on toast.');
+} else {
+  console.log('No cheese on toast for you today.');
+}</pre>
+
+<p>E, voltando ao nosso exemplo anterior sobre a criança fazendo uma tarefa para seu pai, você poderia escrevê-lo assim:</p>
+
+<pre class="brush: js notranslate">var shoppingDone = false;
+
+if (shoppingDone) { // don't need to explicitly specify '=== true'
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}</pre>
+
+<h3 id="Aninhando_if_..._else">Aninhando if ... else</h3>
+
+<p>É perfeitamente correto colocar uma declaração <code>if...else</code> dentro de outra — para aninhá-las. Por exemplo, poderíamos atualizar nosso aplicativo de previsão do tempo para mostrar mais opções dependendo de qual é a temperatura:</p>
+
+<pre class="brush: js notranslate">if (choice === 'sunny') {
+  if (temperature &lt; 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+  } else if (temperature &gt;= 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+  }
+}</pre>
+
+<p>Mesmo que o código trabalhe em conjunto, cada uma das instruções <code>if...else</code> funcionam completamente independente uma da outra.</p>
+
+<h3 id="Operadores_lógicos_AND_OR_e_NOT">Operadores lógicos: AND, OR e NOT</h3>
+
+<p>Se você quiser testar várias condições sem escrever instruções aninhadas <code>if...else</code>, os <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">operadores lógicos</a> poderão ajudá-lo. Quando usado em condições, os dois primeiros fazem o seguinte:</p>
+
+<ul>
+ <li><code>&amp;&amp;</code> — AND; permite encadear duas ou mais expressões para que todas elas tenham que ser avaliadas individualmente como <code>true</code> assim toda a expressão retorna <code>true</code>.</li>
+ <li><code>||</code> — OR; permite encadear duas ou mais expressões para que uma ou mais delas tenham que ser avaliadas individualmente como <code>true</code> assim toda a expressão retorna <code>true</code>.</li>
+</ul>
+
+<p>Para fornecer um exemplo AND, o fragmento de exemplo anterior pode ser reescrito assim:</p>
+
+<pre class="brush: js notranslate">if (choice === 'sunny' &amp;&amp; temperature &lt; 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+} else if (choice === 'sunny' &amp;&amp; temperature &gt;= 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+}</pre>
+
+<p>Então, por exemplo, o primeiro bloco de código só será executado se ambas as condições <code>choice === 'sunny'</code> <em>e </em><code>temperature &lt; 86</code> retornarem <code>true</code>.</p>
+
+<p>Vamos ver um exemplo rápido de OR:</p>
+
+<pre class="brush: js notranslate">if (iceCreamVanOutside || houseStatus === 'on fire') {
+  console.log('You should leave the house quickly.');
+} else {
+  console.log('Probably should just stay in then.');
+}</pre>
+
+<p>O último tipo de operador lógico, NOT, expressado pelo operador <code>!</code>, pode ser usado para negar uma expressão. Vamos combiná-lo com OR no exemplo acima:</p>
+
+<pre class="brush: js notranslate">if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
+  console.log('Probably should just stay in then.');
+} else {
+  console.log('You should leave the house quickly.');
+}</pre>
+
+<p>Nesse trecho, se a instrução OR retornar <code>true</code>, o operador NOT negará isso para que a expressão geral retorne <code>false</code>.</p>
+
+<p>Você pode combinar tantas instruções lógicas quanto quiser, em qualquer estrutura. O exemplo a seguir executa o código interno apenas se ambos os conjuntos de instruções OR retornarem true, significando que a instrução AND global também retornará true:</p>
+
+<pre class="brush: js notranslate">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (loggedIn || userName === 'Steve')) {
+  // run the code
+}</pre>
+
+<p>Um erro comum ao usar o operador OR lógico em instruções condicionais é tentar indicar a variável cujo valor você está verificando uma vez e, em seguida, fornecer uma lista de valores que poderia ser para retornar true, separados pelos operadores <code>||</code> (OR) . Por exemplo:</p>
+
+<pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) {
+  // run my code
+}</pre>
+
+<p>Nesse caso, a condição dentro de <code>if(...)</code>  sempre será avaliada como verdadeira, já que 7 (ou qualquer outro valor diferente de zero) sempre é avaliado como verdadeiro. Esta condição está realmente dizendo "se x é igual a 5, ou 7 é verdade — o que sempre é". Isso logicamente não é o que queremos! Para fazer isso funcionar, você precisa especificar um teste completo ao lado de cada operador OR:</p>
+
+<pre class="brush: js notranslate">if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // run my code
+}</pre>
+
+<h2 id="Instruções_switch">Instruções switch</h2>
+
+<p>As instruções <code>if...else</code> fazem o trabalho de habilitar o código condicional bem, mas elas também possuem suas desvantagens. Elas são boas principalmente para casos em que você tem algumas opções, e cada uma requer uma quantidade razoável de código para ser executado, e / ou as condições são complexas (por exemplo, vários operadores lógicos). Nos casos em que você deseja definir uma variável para uma determinada opção de valor ou imprimir uma determinada instrução dependendo de uma condição, a sintaxe pode ser um pouco incômoda, especialmente se você tiver um grande número de opções.</p>
+
+<p>As <a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">instruções<code>switch</code></a> são suas amigas aqui — elas tomam uma única expressão / valor como uma entrada e, em seguida, examinam várias opções até encontrarem um que corresponda a esse valor, executando o código correspondente que o acompanha. Aqui está mais um pseudocódigo, para você ter uma ideia:</p>
+
+<pre class="notranslate">switch (expression) {
+  case choice1:
+    run this code
+    break;
+
+  case choice2:
+    run this code instead
+    break;
+
+  // include as many cases as you like
+
+  default:
+    actually, just run this code
+}</pre>
+
+<p>Aqui nós temos:</p>
+
+<ol>
+ <li>A palavra-chave <code>switch</code>, seguido por um par de parênteses.</li>
+ <li>Uma expressão ou valor dentro dos parênteses.</li>
+ <li>A palavra-chave <code>case</code>, seguido por uma escolha que a expressão / valor poderia ser, seguido por dois pontos.</li>
+ <li>Algum código para ser executado se a escolha corresponder à expressão.</li>
+ <li>Uma instrução <code>break</code>, seguido de um ponto e vírgula. Se a opção anterior corresponder à expressão / valor, o navegador interromperá a execução do bloco de código aqui e passará para qualquer código que aparecer abaixo da instrução switch.</li>
+ <li>Como muitos outros casos (marcadores 3 a 5) que você quiser.</li>
+ <li>A palavra-chave <code>default</code>, seguido por exatamente o mesmo padrão de código de um dos casos (marcadores 3 a 5), exceto que o <code>default</code> não tem escolha após ele, e você não precisa da instrução <code>break</code>, pois não há nada para executar depois disso o bloco de qualquer maneira. Esta é a opção padrão que é executada se nenhuma das opções corresponder.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Você não precisa incluir a seção <code>default</code> — você pode omiti-la com segurança se não houver chance de que a expressão possa se igualar a um valor desconhecido. Se houver uma chance disso, você precisará incluí-lo para lidar com casos desconhecidos.</p>
+</div>
+
+<h3 id="Um_exemplo_de_switch">Um exemplo de switch</h3>
+
+<p>Vamos dar uma olhada em um exemplo real — vamos reescrever nosso aplicativo de previsão do tempo para usar uma instrução switch:</p>
+
+<pre class="brush: html notranslate">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
+  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
+  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
+  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
+  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  var choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}</pre>
+
+<p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">encontrar este exemplo no GitHub</a> (veja-o em <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">execução </a>lá também.)</p>
+</div>
+
+<h2 id="Operador_ternário">Operador ternário</h2>
+
+<p>Há um bit final de sintaxe que queremos apresentar a você antes de começar a brincar com alguns exemplos. O <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">operador ternário ou condicional</a> é um pequeno bit de sintaxe que testa uma condição e retorna um valor / expressão se for  <code>true</code>, e outro caso seja <code>false</code> — isso pode ser útil em algumas situações e pode ocupar muito menos código que um bloco <code>if...else</code> se você simplesmente tiver duas opções escolhidas entre uma condição <code>true</code>/<code>false</code> condition. O pseudocódigo é assim:</p>
+
+<pre class="notranslate">( condition ) ? run this code : run this code instead</pre>
+
+<p>Então, vamos dar uma olhada em um exemplo simples:</p>
+
+<pre class="brush: js notranslate">var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';</pre>
+
+<p>Aqui temos uma variável chamada <code>isBirthday</code> — se ela for <code>true</code>, nós damos ao nosso convidado uma mensagem de feliz aniversário; se não, damos a ela a saudação diária padrão.</p>
+
+<h3 id="Exemplo_de_operador_ternário">Exemplo de operador ternário</h3>
+
+<p>Você não precisa apenas definir valores de variáveis com o operador ternário; Você também pode executar funções ou linhas de código - qualquer coisa que você gosta. O exemplo ao vivo a seguir mostra um seletor de temas simples em que o estilo do site é aplicado usando um operador ternário.</p>
+
+<pre class="brush: html notranslate">&lt;label for="theme"&gt;Select theme: &lt;/label&gt;
+&lt;select id="theme"&gt;
+  &lt;option value="white"&gt;White&lt;/option&gt;
+  &lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;h1&gt;This is my website&lt;/h1&gt;</pre>
+
+<pre class="brush: js notranslate">var select = document.querySelector('select');
+var html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Ternary_operator_example', '100%', 300) }}</p>
+
+<p>Aqui nós temos um elemento {{htmlelement('select')}} para escolher um tema (preto ou branco), além de um simples {{htmlelement('h1')}} para exibir um título do site. Nós também temos uma função chamada <code>update()</code>, que leva duas cores como parâmetros (entradas). A cor do plano de fundo do site é definida para a primeira cor fornecida e sua cor de texto é definida para a segunda cor fornecida.</p>
+
+<p>Finalmente, nós também temos um evento listener <a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> que serve para executar uma função que contém um operador ternário. Começa com uma condição de teste — <code>select.value === 'black'</code>. Se este retornar <code>true</code>, nós executamos a função <code>update()</code> com parâmetros de preto e branco, o que significa que acabamos com a cor de fundo do preto e cor do texto de branco. Se retornar <code>false</code>, nós executamos a função <code>update()</code> com parâmetros de branco e preto, o que significa que a cor do site está invertida.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode também <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">encontrar este exemplo no GitHub</a> (veja-o <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">executando</a> lá também.)</p>
+</div>
+
+<h2 id="Aprendizado_ativo_um_calendário_simples">Aprendizado ativo: um calendário simples</h2>
+
+<p>Neste exemplo, você nos ajudará a concluir um aplicativo de calendário simples. No código que você tem:</p>
+
+<ul>
+ <li>Um elemento {{htmlelement("select")}} para permitir que o usuário escolha entre diferentes meses.</li>
+ <li>Um evento manipulador <code>onchange</code> para detectar quando o valor selecionado no menu <code>&lt;select&gt;</code> é mudado.</li>
+ <li>Uma função chamada <code>createCalendar()</code> que desenha o calendário e exibe o mês correto no elemento {{htmlelement("h1")}} .</li>
+</ul>
+
+<p>Precisamos que você escreva uma instrução condicional dentro da função do manipulador onchange, logo abaixo do comentário <code>// ADD CONDITIONAL HERE</code>. Ele deve:</p>
+
+<ol>
+ <li>Olhar para o mês selecionado (armazenado na variavel <code>choice</code>. Este será o valor do elemento <code>&lt;select&gt;</code> após o valor ser alterado, portanto, "Janeiro", por exemplo.</li>
+ <li>Definir uma variável chamada  <code>days</code> para ser igual ao número de dias no mês selecionado. Para fazer isso, você terá que procurar o número de dias em cada mês do ano. Você pode ignorar anos bissextos para os propósitos deste exemplo.</li>
+</ol>
+
+<p>Dicas:</p>
+
+<ul>
+ <li>É aconselhável usar o OR lógico para agrupar vários meses em uma única condição; muitos deles compartilham o mesmo número de dias.</li>
+ <li>Pense em qual número de dias é o mais comum e use isso como um valor padrão.</li>
+</ul>
+
+<p>Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente preso, pressione "Mostrar solução" para ver uma solução.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
+  &lt;label for="month"&gt;Select month: &lt;/label&gt;
+  &lt;select id="month"&gt;
+    &lt;option value="January"&gt;January&lt;/option&gt;
+    &lt;option value="February"&gt;February&lt;/option&gt;
+    &lt;option value="March"&gt;March&lt;/option&gt;
+    &lt;option value="April"&gt;April&lt;/option&gt;
+    &lt;option value="May"&gt;May&lt;/option&gt;
+    &lt;option value="June"&gt;June&lt;/option&gt;
+    &lt;option value="July"&gt;July&lt;/option&gt;
+    &lt;option value="August"&gt;August&lt;/option&gt;
+    &lt;option value="September"&gt;September&lt;/option&gt;
+    &lt;option value="October"&gt;October&lt;/option&gt;
+    &lt;option value="November"&gt;November&lt;/option&gt;
+    &lt;option value="December"&gt;December&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;&lt;/h1&gt;
+
+  &lt;ul&gt;&lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;hr&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 500px;"&gt;
+var select = document.querySelector('select');
+var list = document.querySelector('ul');
+var h1 = document.querySelector('h1');
+
+select.onchange = function() {
+  var choice = select.value;
+
+  // ADD CONDITIONAL HERE
+
+  createCalendar(days, choice);
+}
+
+function createCalendar(days, choice) {
+  list.innerHTML = '';
+  h1.textContent = choice;
+  for (var i = 1; i &lt;= days; i++) {
+    var listItem = document.createElement('li');
+    listItem.textContent = i;
+    list.appendChild(listItem);
+  }
+}
+
+createCalendar(31,'January');
+&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 notranslate">.output * {
+  box-sizing: border-box;
+}
+
+.output ul {
+  padding-left: 0;
+}
+
+.output li {
+  display: block;
+  float: left;
+  width: 25%;
+  border: 2px solid white;
+  padding: 5px;
+  height: 40px;
+  background-color: #4A2DB6;
+  color: white;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n  var choice = select.value;\n  var days = 31;\n  if(choice === \'February\') {\n    days = 28;\n  } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n    days = 30;\n  }\n\n  createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n  list.innerHTML = \'\';\n  h1.textContent = choice;\n for(var i = 1; i &lt;= days; i++) {\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = i;\n    list.appendChild(listItem);\n  }\n }\n\ncreateCalendar(31,\'January\');';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 1110) }}</p>
+
+<h2 id="Aprendizado_ativo_mais_opções_de_cores!">Aprendizado ativo: mais opções de cores!</h2>
+
+<p>Neste exemplo, você terá o exemplo de operador ternário que vimos anteriormente e converterá o operador ternário em uma instrução switch que nos permitirá aplicar mais opções ao site simples. Olhe para a {{htmlelement("select")}} — desta vez você verá que não tem duas opções de tema, mas cinco. Você precisa adicionar uma instrução switch abaixo do comentário <code>// ADD SWITCH STATEMENT</code>:</p>
+
+<ul>
+ <li>Ele deve aceitar a variável <code>choice</code> como sua expressão de entrada.</li>
+ <li>Para cada caso, a escolha deve ser igual a um dos valores possíveis que podem ser selecionados, ou seja, branco, preto, roxo, amarelo ou psicodélico.</li>
+ <li>Para cada caso, a função <code>update()</code> deve ser executada e receber dois valores de cor, o primeiro para a cor de segundo plano e o segundo para a cor do texto. Lembre-se de que valores de cores são strings, portanto, precisam ser agrupados entre aspas.</li>
+</ul>
+
+<p>Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente travado, pressione "Show solution" para ver uma solução.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;div class="output" style="height: 300px;"&gt;
+  &lt;label for="theme"&gt;Select theme: &lt;/label&gt;
+  &lt;select id="theme"&gt;
+    &lt;option value="white"&gt;White&lt;/option&gt;
+    &lt;option value="black"&gt;Black&lt;/option&gt;
+    &lt;option value="purple"&gt;Purple&lt;/option&gt;
+    &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
+    &lt;option value="psychedelic"&gt;Psychedelic&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;This is my website&lt;/h1&gt;
+&lt;/div&gt;
+
+&lt;hr&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 450px;"&gt;
+var select = document.querySelector('select');
+var html = document.querySelector('.output');
+
+select.onchange = function() {
+  var choice = select.value;
+
+  // ADD SWITCH STATEMENT
+}
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}&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: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n  var choice = select.value;\n\n  switch(choice) {\n    case \'black\':\n      update(\'black\',\'white\');\n      break;\n    case \'white\':\n      update(\'white\',\'black\');\n      break;\n    case \'purple\':\n      update(\'purple\',\'white\');\n      break;\n    case \'yellow\':\n      update(\'yellow\',\'darkgray\');\n      break;\n    case \'psychedelic\':\n      update(\'lime\',\'purple\');\n      break;\n  }\n}\n\nfunction update(bgColor, textColor) {\n  html.style.backgroundColor = bgColor;\n  html.style.color = textColor;\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>E isso é tudo que você realmente precisa saber sobre estruturas condicionais no JavaScript por agora! Tenho certeza que você terá entendido esses conceitos e trabalhou com os exemplos com facilidade; se houver algo que você não tenha entendido, sinta-se à vontade para ler o artigo novamente ou <a href="/en-US/Learn#Contact_us">contate-nos</a> para pedir ajuda.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Operadores de comparação</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">Declarações condicionais em detalhes</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">Referência if...else</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Referência do operador condicional (ternário)</a></li>
+</ul>
+
+<h2 id="Teste_suas_habilidades!">Teste suas habilidades!</h2>
+
+<p>Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Teste suas habilidades: Condicionais</a>.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p>
diff --git a/files/pt-br/learn/javascript/building_blocks/events/index.html b/files/pt-br/learn/javascript/building_blocks/events/index.html
new file mode 100644
index 0000000000..dd6e41f674
--- /dev/null
+++ b/files/pt-br/learn/javascript/building_blocks/events/index.html
@@ -0,0 +1,582 @@
+---
+title: Introdução a eventos
+slug: Aprender/JavaScript/Elementos_construtivos/Events
+tags:
+  - Aprender
+  - Artigo
+  - Guía
+  - Iniciante
+  - JavaScript
+  - Programando
+  - eventos
+translation_of: Learn/JavaScript/Building_blocks/Events
+---
+<div>
+<div>{{LearnSidebar}}</div>
+</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Eventos são ações ou ocorrências que acontecem no sistema que estamos desenvolvendo, no qual este te alerta sobre essas ações para que você possa responder de alguma forma, se desejado. Por exemplo, se o usuário clica em um botão numa pagina web, você pode querer responder a esta ação mostrando na tela uma caixa de informações. Nesse artigo, nós iremos discutir sobre alguns conceitos importantes envolvendo eventos, e veremos como eles funcionam nos browsers. Isto não será algo cansativo para estudar; somente o que você precisar saber até agora.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimentos básicos em informática, conhecimento básico em HTML e CSS,  <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript, primeiros passos</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender a teoria fundamentos dos eventos, como eles funcionam nos browsers, e como eventos podem ser diferentes dependendo do ambiente de desenvolvimento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aventuras_em_Série">Aventuras em Série</h2>
+
+<p>Como mencionado acima, <strong>eventos </strong>são ações ou ocorrências que acontecem no sistema que estamos desenvolvendo — o sistema irá disparar algum tipo de sinal quando o evento acontecer, além de prover um mecanismo pelo qual alguma ação automática possa ser executada (ou seja, rodar algum código) quando o evento ocorrer. Por exemplo, em um aeroporto, quando a pista está livre para um avião decolar, um sinal é repassado ao piloto, e como resultado, ele inicia a decolagem.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
+
+<p>No caso da web, eventos são disparados dentro da janela do navegador, e tende a estarem anexados a algum item especifico nele — pode ser um único elemento, um conjunto de elementos, o HTML carregado na guia atual, ou toda a janela do navegador. Existem vários tipos diferentes de eventos que podem vir a acontecer, por exemplo:</p>
+
+<ul>
+ <li>O usuário clicando com o mouse sobre um certo elemento ou passando o cursor do mouse sobre um certo elemento.</li>
+ <li>O usuário pressionando uma tecla do teclado.</li>
+ <li>O usuário redimensionando ou fechando a janela do navegador.</li>
+ <li>Uma pagina da web terminando de carregar.</li>
+ <li>Um formulário sendo enviado.</li>
+ <li>Um video sendo reproduzido, interrompido, ou terminando sua reprodução.</li>
+ <li>Um erro ocorrendo.</li>
+</ul>
+
+<p>Você vai perceber com isso (e dando uma olhada no <a href="/en-US/docs/Web/Events">Event reference</a> MDN) que<strong> </strong>há uma <strong>série</strong> de eventos que podem  ser utilizados.</p>
+
+<p>Cada evento disponivel possui um <strong>manipulador de eventos </strong>(event handler), que é um bloco de código (geralmente uma função JavaScript definida pelo usuário) que será executado quando o evento for disparado. Quando esse bloco de código é definido para rodar em resposta a um evento que foi disparado, nós dizemos que estamos <strong>registrando um manipulador de eventos</strong>. Note que manipuladores de eventos são, em alguns casos, chamados de <strong>ouvinte de eventos </strong>(event listeners) — <span id="result_box" lang="pt"><span>eles são praticamente intercambiáveis para nossos propósitos, embora estritamente falando, eles trabalhem juntos. Os ouvintes escutam o evento acontecendo, e o manipulador é o codigo que roda em resposta a este acontecimento.</span></span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: É importante notar que eventos web não são parte do core da linguagem JavaScript — elas são definidas como parte das APIs JavaScript incorporadas ao navegador.</p>
+</div>
+
+<h3 id="Um_exemplo_simples">Um exemplo simples</h3>
+
+<p>Vamos dar uma olhada em um simples exemplo para explicar o que nós queremos dizer aqui. Você já viu eventos e manipuladores de eventos sendo utilizados na maioria dos exemplos deste curso até agora, mas vamos recapitular somente para cimentar nosso conhecimento. No exemplo a seguir, nós temos um simples {{htmlelement("button")}} que quando pressionado, irá fazer com que o fundo mude para uma cor aleatória:</p>
+
+<pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">button { margin: 10px };</pre>
+</div>
+
+<p>O JavaScript seria algo como:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random()*(number+1));
+}
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>Nesse código, nós guardamos uma referência ao botão dentro de uma variável chamada <code>btn</code>, usando a função {{domxref("Document.querySelector()")}}. Também definimos uma função que retorna um número aleatório. A terceira parte do código é o manipulador de eventos. A variável <code>btn</code> aponta para um elemento <code>&lt;button&gt;</code>, e esse tipo de objeto tem um número de eventos que podem ser disparados nele, assim sendo, manipuladores de eventos estão disponíveis.</p>
+
+<p>Esse código rodará sempre que o evento de clique for disparado pelo elemento <code>&lt;button&gt;</code>, isto é, sempre que um usuário clicar nele.</p>
+
+<p>Um exemplo de saída seria:</p>
+
+<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Não_são_apenas_paginas_da_web">Não são apenas paginas da web</h3>
+
+<p>Outra coisa que vale mencionar a esse ponto é que eventos não são exclusivos ao JavaScript — muitas linguagens de programação possuem algum tipo de modelo de evento, e a maneira que elas funcionam irão, frequentemente, diferenciar-se da maneira que funciona em JavaScript. De fato, o modelo de evento no JavaScript para web pages difere dos outros modelos de evento do próprio JavaScript quando usados em outros ambientes.</p>
+
+<p>Por exemplo, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> é um interpretador de código JavaScript muito popular que permite desenvolvedores a usarem JavaScript para construir aplicações de rede e do lado do servidor. O <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Node.js event model</a> depende dos ouvintes para escutar eventos e emissores para emitir eventos periodicamente. — não parece tão diferente, mas o código é bem diferente, fazendo uso de funções como <code>on()</code> para registrar um ouvinte de evento e  <code>once()</code> para registrar um ouvinte de evento que cancela o registro depois de ter sido executado uma vez. Os <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">Documentos do evento de conexão HTTP</a> fornecem um bom exemplo de uso.</p>
+
+<p>Como outro exemplo, agora você também pode usar o JavaScript para criar complementos entre navegadores — aprimoramentos da funcionalidade do navegador — usando uma tecnologia chamada <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. O modelo de eventos é semelhante ao modelo de eventos da Web, mas um pouco diferente — as propriedades dos event listeners são camel-cased, onde cada palavra é iniciada com maiúsculas e unidas sem espaços (por exemplo, <code>onMessage</code> em vez de <code>onmessage</code>), e precisam ser combinadas com a função <code>addListener</code>. Veja a página <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage</a> para um exemplo.</p>
+
+<p>Você não precisa entender nada sobre outros ambientes nesse estágio do aprendizado; nós só queríamos deixar claro que os eventos podem diferir em diferentes ambientes de programação.</p>
+
+<h2 id="Formas_de_usar_eventos_da_web">Formas de usar eventos da web</h2>
+
+<p>Há várias maneiras diferentes de adicionar código de ouvinte de evento a páginas da Web para que ele seja executado quando o evento associado for disparado. Nesta seção, revisaremos os diferentes mecanismos e discutiremos quais devem ser usados.</p>
+
+<h3 id="Propriedades_do_manipulador_de_eventos">Propriedades do manipulador de eventos</h3>
+
+<p>Essas são as propriedades que existem para conter o código do manipulador de eventos que vimos com mais frequência durante o curso. Voltando ao exemplo acima:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>A propriedade <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> é a propriedade do manipulador de eventos que está sendo usada nesta situação. É essencialmente uma propriedade como qualquer outra disponível no botão (por exemplo, <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, ou <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), mas é um tipo especial — quando você configura para ser igual a algum código, esse código será executado quando o evento é acionado no botão.</p>
+
+<p>Você também pode definir a propriedade handler para ser igual a um nome de função nomeado (como vimos em <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Construa sua própria função</a>). O seguinte funcionaria da mesma forma:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;</pre>
+
+<p>Há muitas propriedades diferentes de manipulador de eventos disponíveis. Vamos fazer um experimento.</p>
+
+<p>Primeiro de tudo, faça uma cópia local do <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, e abra-o no seu navegador. É apenas uma cópia do exemplo de cor aleatória simples com o qual já estamos jogando neste artigo. Agora tente alterar <code>btn.onclick</code> para os seguintes valores diferentes, por sua vez, e observando os resultados no exemplo:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> e <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — A cor mudará quando o botão estiver focado e fora de foco (tente pressionar a guia para aba no botão e desligar novamente). Eles geralmente são usados para exibir informações sobre como preencher campos de formulário quando eles estão focalizados ou exibir uma mensagem de erro se um campo de formulário tiver acabado de ser preenchido com um valor incorreto.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — A cor só será alterada quando for clicada duas vezes.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — A cor mudará quando uma tecla for pressionada no teclado. <code>keypress</code> refere-se a um pressionamento geral (botão para baixo e depois para cima), enquanto <code>keydown</code> e <code>keyup</code> refere-se apenas a parte do pressionamento da tecla para baixo e de soltar a tecla para cima, respectivamente. Note que não funciona se você tentar registrar este manipulador de eventos no próprio botão — nós tivemos que registrá-lo no objeto <a href="/en-US/docs/Web/API/Window">window</a>, que representa toda a janela do navegador.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> e <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — A cor mudará quando o ponteiro do mouse for movido, de modo que comece a passar o mouse sobre o botão, ou quando parar de passar o mouse sobre o botão e sair dele, respectivamente.</li>
+</ul>
+
+<p>Alguns eventos são muito gerais e estão disponíveis praticamente em qualquer lugar (por exemplo, um manipulador  <code>onclick</code> pode ser registrado em quase qualquer elemento), enquanto alguns são mais específicos e úteis apenas em certas situações (por exemplo, faz sentido usar <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> apenas em elementos específicos, como {{htmlelement("video")}}).</p>
+
+<h3 id="Manipuladores_de_eventos_in-line_-_não_use_esses">Manipuladores de eventos in-line - não use esses</h3>
+
+<p>Você também pode ver um padrão como este em seu código:</p>
+
+<pre class="brush: html">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
+</pre>
+
+<pre class="brush: js">function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>:  Você pode encontrar o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">código fonte completo</a> para este exemplo no GitHub (também <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">veja isso executando em tempo real</a>).</p>
+</div>
+
+<p>O método mais antigo de registrar manipuladores de eventos encontrados na Web envolveu <strong>atributos HTML de manipulador de eventos</strong> (também conhecidos como <strong>manipuladores de eventos inline</strong>) como o mostrado acima — o valor do atributo é literalmente o código JavaScript que você deseja executar quando o evento ocorre. O exemplo acima chama uma função definida dentro de um elemento {{htmlelement("script")}} na mesma página, mas você também pode inserir JavaScript diretamente dentro do atributo, por exemplo:</p>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+
+<p>Você encontrará equivalentes de atributo HTML para muitas das propriedades do manipulador de eventos; no entanto, você não deve usá-los — eles são considerados uma prática ruim. Pode parecer fácil usar um atributo manipulador de eventos se você estiver apenas fazendo algo realmente rápido, mas eles se tornam rapidamente incontroláveis e ineficientes.</p>
+
+<p>Para começar, não é uma boa ideia misturar o seu HTML e o seu JavaScript, pois é difícil analisar — manter seu JavaScript em um só lugar é melhor; se estiver em um arquivo separado, você poderá aplicá-lo a vários documentos HTML.</p>
+
+<p>Mesmo em um único arquivo, os manipuladores de eventos in-line não são uma boa ideia. Um botão está OK, mas e se você tivesse 100 botões? Você teria que adicionar 100 atributos ao arquivo; isso rapidamente se tornaria um pesadelo de manutenção. Com JavaScript, você poderia facilmente adicionar uma função de manipulador de eventos a todos os botões da página, não importando quantos fossem, usando algo assim:</p>
+
+<pre class="brush: js">var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Separar sua lógica de programação do seu conteúdo também torna seu site mais amigável aos mecanismos de pesquisa.</p>
+</div>
+
+<h3 id="addEventListener_e_removeEventListener">addEventListener() e removeEventListener()</h3>
+
+<p>O mais novo tipo de mecanismo de evento é definido na Especificação de Eventos Nível 2 do <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM)</a>, que fornece aos navegadores uma nova função — <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. Isso funciona de maneira semelhante às propriedades do manipulador de eventos, mas a sintaxe é obviamente diferente. Poderíamos reescrever nosso exemplo de cor aleatória para ficar assim:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">código fonte completo</a> para este exemplo no GitHub (também <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">veja isso executando em tempo real</a>).</p>
+</div>
+
+<p>Dentro da função <code>addEventListener()</code>, especificamos dois parâmetros — o nome do evento para o qual queremos registrar esse manipulador, e o código que compreende a função do manipulador que queremos executar em resposta a ele. Note que é perfeitamente apropriado colocar todo o código dentro da função <code>addEventListener()</code>, em uma função anônima, assim:</p>
+
+<pre class="brush: js">btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});</pre>
+
+<p>Esse mecanismo tem algumas vantagens sobre os mecanismos mais antigos discutidos anteriormente. Para começar, há uma função de contraparte, <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, que remove um listener adicionado anteriormente. Por exemplo, isso removeria o listener definido no primeiro bloco de código nesta seção:</p>
+
+<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre>
+
+<p>Isso não é significativo para programas pequenos e simples, mas para programas maiores e mais complexos, pode melhorar a eficiência para limpar antigos manipuladores de eventos não utilizados. Além disso, por exemplo, isso permite que você tenha o mesmo botão executando ações diferentes em circunstâncias diferentes — tudo o que você precisa fazer é adicionar / remover manipuladores de eventos conforme apropriado.</p>
+
+<p>Em segundo lugar, você também pode registrar vários manipuladores para o mesmo ouvinte. Os dois manipuladores a seguir não seriam aplicados:</p>
+
+<pre class="brush: js">myElement.onclick = functionA;
+myElement.onclick = functionB;</pre>
+
+<p>Como a segunda linha sobrescreveria o valor de  <code>onclick</code> definido pelo primeiro. Isso funcionaria, no entanto:</p>
+
+<pre class="brush: js">myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);</pre>
+
+<p>Ambas as funções serão executadas quando o elemento for clicado.</p>
+
+<p>Além disso, há vários outros recursos e opções poderosos disponíveis com esse mecanismo de eventos. Estes são um pouco fora do escopo deste artigo, mas se você quiser ler sobre eles, dê uma olhada nas páginas de referência <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> e <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.</p>
+
+<h3 id="Qual_mecanismo_devo_usar">Qual mecanismo devo usar?</h3>
+
+<p>Dos três mecanismos, você definitivamente não deve usar os atributos do manipulador de eventos HTML — estas são desatualizadas e más práticas, como mencionado acima.</p>
+
+<p>Os outros dois são relativamente intercambiáveis, pelo menos para usos simples:</p>
+
+<ul>
+ <li>As propriedades do manipulador de eventos têm menos poder e opções, mas melhor compatibilidade entre navegadores (sendo suportado desde o Internet Explorer 8). Você provavelmente deve começar com estes como você está aprendendo.</li>
+ <li>Eventos DOM Nível 2 (<code>addEventListener()</code>, etc.) são mais poderosos, mas também podem se tornar mais complexos e menos bem suportados (suportados desde o Internet Explorer 9). Você também deve experimentá-los e tentar usá-los sempre que possível.</li>
+</ul>
+
+<p>As principais vantagens do terceiro mecanismo são que você pode remover o código do manipulador de eventos, se necessário, usando <code>removeEventListener()</code>, e você pode adicionar vários listeners do mesmo tipo aos elementos, se necessário. Por exemplo, você pode chamar <code>addEventListener('click', function() { ... })</code> em um elemento várias vezes, com diferentes funções especificadas no segundo argumento. Isso é impossível com as propriedades do manipulador de eventos porque qualquer tentativa subseqüente de definir uma propriedade sobrescreverá as anteriores, por exemplo:</p>
+
+<pre class="brush: js">element.onclick = function1;
+element.onclick = function2;
+etc.</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você for chamado para oferecer suporte a navegadores anteriores ao Internet Explorer 8 em seu trabalho, poderá encontrar dificuldades, pois esses navegadores antigos usam modelos de eventos diferentes dos navegadores mais recentes. Mas não tenha medo, a maioria das bibliotecas JavaScript (por exemplo, <code>jQuery</code>) tem funções internas que abstraem as diferenças entre navegadores. Não se preocupe muito com isso neste estágio de sua jornada de aprendizado.</p>
+</div>
+
+<h2 id="Outros_conceitos_de_evento">Outros conceitos de evento</h2>
+
+<p>Nesta seção, abordaremos brevemente alguns conceitos avançados que são relevantes para os eventos. Não é importante entendê-las totalmente neste momento, mas pode servir para explicar alguns padrões de código que você provavelmente encontrará ao longo do tempo.</p>
+
+<h3 id="Objetos_de_evento">Objetos de evento</h3>
+
+<p>Às vezes, dentro de uma função de manipulador de eventos, você pode ver um parâmetro especificado com um nome como <code>event</code>, <code>evt</code>, ou simplesmente <code>e</code>. Isso é chamado de <strong>event object</strong>, e é passado automaticamente para os manipuladores de eventos para fornecer recursos e informações extras. Por exemplo, vamos reescrever nosso exemplo de cor aleatória novamente:</p>
+
+<pre class="brush: js">function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">código fonte completo</a> para este exemplo no GitHub (também <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">veja isso executando em tempo real</a>).</p>
+</div>
+
+<p>Aqui você pode ver que estamos incluindo um objeto de evento, <strong>e</strong>, na função, e na função definindo um estilo de cor de fundo em <code>e.target</code> — que é o próprio botão. A propriedade <code>target</code> do objeto de evento é sempre uma referência ao elemento em que o evento acabou de ocorrer. Portanto, neste exemplo, estamos definindo uma cor de fundo aleatória no botão, não na página.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Você pode usar qualquer nome que desejar para o objeto de evento — você só precisa escolher um nome que possa ser usado para referenciá-lo dentro da função de manipulador de eventos. <code>e</code>/<code>evt</code>/<code>event</code> são mais comumente usados pelos desenvolvedores porque são curtos e fáceis de lembrar. É sempre bom manter um padrão.</p>
+</div>
+
+<p><code>e.target</code> é incrivelmente útil quando você deseja definir o mesmo manipulador de eventos em vários elementos e fazer algo com todos eles quando ocorre um evento neles. Você pode, por exemplo, ter um conjunto de 16 blocos que desaparecem quando são clicados. É útil poder sempre apenas definir a coisa para desaparecer como <code>e.target</code>, ao invés de ter que selecioná-lo de alguma forma mais difícil. No exemplo a seguir (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> para o código-fonte completo; veja também a <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">execução ao vivo</a> aqui), criamos 16 elementos {{htmlelement("div")}} usando JavaScript. Em seguida, selecionamos todos eles usando {{domxref("document.querySelectorAll()")}}  e, em seguida, percorremos cada um deles, adicionando um manipulador onclick a cada um, de modo que uma cor aleatória seja aplicada a cada um deles quando clicados:</p>
+
+<pre class="brush: js">var divs = document.querySelectorAll('div');
+
+for (var i = 0; i &lt; divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}</pre>
+
+<p>A saída é a seguinte (tente clicar em cima — divirta-se):</p>
+
+<div class="hidden">
+<h6 id="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Useful event target example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        background-color: red;
+        height: 100px;
+        width: 25%;
+        float: left;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+      for (var i = 1; i &lt;= 16; i++) {
+        var myDiv = document.createElement('div');
+        document.body.appendChild(myDiv);
+      }
+
+      function random(number) {
+        return Math.floor(Math.random()*number);
+      }
+
+      function bgChange() {
+        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        return rndCol;
+      }
+
+      var divs = document.querySelectorAll('div');
+
+      for (var i = 0; i &lt; divs.length; i++) {
+        divs[i].onclick = function(e) {
+          e.target.style.backgroundColor = bgChange();
+        }
+      }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>A maioria dos manipuladores de eventos que você encontrará apenas tem um conjunto padrão de propriedades e funções (métodos) disponíveis no objeto de evento (consulte a referência de objeto {{domxref("Event")}} para obter uma lista completa). Alguns manipuladores mais avançados, no entanto, adicionam propriedades especializadas contendo dados extras que precisam para funcionar. A <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, por exemplo, tem um evento <code>dataavailable</code> que é acionado quando algum áudio ou vídeo é gravado e está disponível para fazer algo com (por exemplo, salvá-lo ou reproduzi-lo). O objeto de evento do manipulador correspondente <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> tem uma propriedade de dados disponível contendo os dados de áudio ou vídeo gravados para permitir que você acesse e faça algo com ele.</p>
+
+<h3 id="Evitando_o_comportamento_padrão">Evitando o comportamento padrão</h3>
+
+<p>Às vezes, você se deparará com uma situação em que deseja interromper um evento fazendo o que ele faz por padrão. O exemplo mais comum é o de um formulário da Web, por exemplo, um formulário de registro personalizado. Quando você preenche os detalhes e pressiona o botão Enviar, o comportamento natural é que os dados sejam enviados para uma página específica no servidor para processamento, e o navegador seja redirecionado para uma página de "mensagem de sucesso" de algum tipo (ou a mesma página, se outra não for especificada.)</p>
+
+<p>O problema surge quando o usuário não submete os dados corretamente - como desenvolvedor, você deve interromper o envio para o servidor e fornecer uma mensagem de erro informando o que está errado e o que precisa ser feito para corrigir as coisas. Alguns navegadores suportam recursos automáticos de validação de dados de formulário, mas como muitos não oferecem isso, é recomendável não depender deles e implementar suas próprias verificações de validação. Vamos dar uma olhada em um exemplo simples.</p>
+
+<p>Primeiro, um formulário HTML simples que requer que você digite seu primeiro e último nome:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name: &lt;/label&gt;
+    &lt;input id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
+    &lt;input id="lname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+     &lt;input id="submit" type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+</pre>
+</div>
+
+<p>Agora algum JavaScript — aqui nós implementamos uma verificação muito simples dentro de um manipulador de evento onsubmit (o evento submit é disparado em um formulário quando é enviado) que testa se os campos de texto estão vazios. Se estiverem, chamamos a função <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> no objeto de evento — que interrompe o envio do formulário — e, em seguida, exibir uma mensagem de erro no parágrafo abaixo do nosso formulário para informar ao usuário o que está errado:</p>
+
+<pre class="brush: js">var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}</pre>
+
+<p>Obviamente, isso é uma validação de forma bastante fraca — ela não impediria o usuário de validar o formulário com espaços ou números inseridos nos campos, por exemplo — mas está tudo bem, por exemplo. A saída é a seguinte:</p>
+
+<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: para o código fonte completo, veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (também veja isso <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">executando em tempo real</a> aqui.)</p>
+</div>
+
+<h3 id="Borbulhamento_e_captura_de_eventos">Borbulhamento e captura de eventos</h3>
+
+<p>O assunto final a ser abordado aqui é algo que você não encontrará com frequência, mas pode ser uma dor real se você não entender. Borbulhamento e captura de eventos são dois mecanismos que descrevem o que acontece quando dois manipuladores do mesmo tipo de evento são ativados em um elemento. Vamos dar uma olhada em um exemplo para facilitar isso — abra o exemplo show-video-box.html em uma nova guia (e o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">código-fonte</a> em outra guia). Ele também está disponível ao vivo abaixo:</p>
+
+<div class="hidden">
+<h6 id="Hidden_video_example">Hidden video example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Show video box example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: 480px;
+        height: 380px;
+        border-radius: 10px;
+        background-color: #eee;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+      }
+
+      .hidden {
+        left: -50%;
+      }
+
+      .showing {
+        left: 50%;
+      }
+
+      div video {
+        display: block;
+        width: 400px;
+        margin: 40px auto;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;button&gt;Display video&lt;/button&gt;
+
+    &lt;div class="hidden"&gt;
+      &lt;video&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/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;
+    &lt;/div&gt;
+
+    &lt;script&gt;
+
+      var btn = document.querySelector('button');
+      var videoBox = document.querySelector('div');
+      var video = document.querySelector('video');
+
+      btn.onclick = function() {
+        displayVideo();
+      }
+
+      function displayVideo() {
+        if(videoBox.getAttribute('class') === 'hidden') {
+          videoBox.setAttribute('class','showing');
+        }
+      }
+
+      videoBox.addEventListener('click',function() {
+        videoBox.setAttribute('class','hidden');
+      });
+
+      video.addEventListener('click',function() {
+        video.play();
+      });
+
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Este é um exemplo bastante simples que mostra e oculta um {{htmlelement("div")}} com um elemento {{htmlelement("video")}} dentro dele:</p>
+
+<pre class="brush: html">&lt;button&gt;Display video&lt;/button&gt;
+
+&lt;div class="hidden"&gt;
+  &lt;video&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;
+&lt;/div&gt;</pre>
+
+<p>Quando o {{htmlelement("button")}} é clicado, o vídeo é exibido, alterando o atributo de classe em <code>&lt;div&gt;</code> de <code>hidden</code> para <code>showing</code> (o CSS do exemplo contém essas duas classes, que posicione a caixa fora da tela e na tela, respectivamente):</p>
+
+<pre class="brush: js">btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}</pre>
+
+<p>Em seguida, adicionamos mais alguns manipuladores de eventos <code>onclick</code> — o primeiro ao <code>&lt;div&gt;</code> e o segundo ao <code>&lt;video&gt;</code>. A ideia é que, quando a área do <code>&lt;div&gt;</code> fora do vídeo for clicada, a caixa deve ser ocultada novamente; quando o vídeo em si é clicado, o vídeo deve começar a tocar.</p>
+
+<pre>videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};</pre>
+
+<p>Mas há um problema — atualmente, quando você clica no vídeo, ele começa a ser reproduzido, mas faz com que o <code>&lt;div&gt;</code> também fique oculto ao mesmo tempo. Isso ocorre porque o vídeo está dentro do <code>&lt;div&gt;</code> — é parte dele — portanto, clicar no vídeo realmente executa os dois manipuladores de eventos acima.</p>
+
+<h4 id="Borbulhando_e_capturando_explicados">Borbulhando e capturando explicados</h4>
+
+<p>Quando um evento é acionado em um elemento que possui elementos pai (por exemplo, o {{htmlelement("video")}} no nosso caso), os navegadores modernos executam duas fases diferentes — a fase de  <strong>captura </strong>e a fase de <strong>bubbling</strong>.</p>
+
+<p>Na fase de <strong>captura</strong>:</p>
+
+<ul>
+ <li>O navegador verifica se o ancestral mais externo do elemento ({{htmlelement("html")}}) tem um manipulador de eventos <code>onclick</code> registrado nele na fase de captura e o executa em caso afirmativo.</li>
+ <li>Em seguida, ele passa para o próximo elemento dentro de <code>&lt;html&gt;</code>  e faz a mesma coisa, depois o próximo, e assim por diante até alcançar o elemento que foi realmente clicado.</li>
+</ul>
+
+<p>Na fase de <strong>bubbling</strong>, ocorre exatamente o oposto:</p>
+
+<ul>
+ <li>O navegador verifica se o elemento que realmente foi clicado tem um manipulador de eventos <code>onclick</code> registrado nele na fase de bubbling e o executa em caso afirmativo.</li>
+ <li>Em seguida, ele passa para o próximo elemento ancestral imediato e faz a mesma coisa, depois o próximo, e assim por diante, até alcançar o elemento <code>&lt;html&gt;</code>.</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
+
+<p>(Clique na imagem para um diagrama maior)</p>
+
+<p>Nos navegadores modernos, por padrão, todos os manipuladores de eventos são registrados na fase de bubbling. Portanto, em nosso exemplo atual, quando você clica no vídeo, o evento de clique passa do elemento <code>&lt;video&gt;</code> para o elemento <code>&lt;html&gt;</code> Pelo caminho:</p>
+
+<ul>
+ <li>Ele encontra o manipulador <code>video.onclick...</code> e o executa, então o vídeo começa a ser reproduzido pela primeira vez.</li>
+ <li>Em seguida, ele encontra o manipulador <code>videoBox.onclick...</code> e o executa, então o vídeo também está oculto.</li>
+</ul>
+
+<h4 id="Corrigindo_o_problema_com_stopPropagation">Corrigindo o problema com stopPropagation()</h4>
+
+<p>Este é um comportamento irritante, mas existe uma maneira de corrigir isso! O objeto de evento padrão tem uma função disponível chamada <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, que quando invocada no objeto de evento de um manipulador, faz com que o manipulador seja executado, mas o evento não borbulha mais acima na cadeia, portanto, mais nenhum manipulador rodará.</p>
+
+<p>Podemos, portanto, consertar nosso problema atual alterando a segunda função do manipulador no bloco de códigos anterior para isto:</p>
+
+<pre class="brush: js">video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};</pre>
+
+<p>Você pode tentar fazer uma cópia local do código-fonte <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html source code</a> e tentar corrigi-lo sozinho, ou observar o resultado corrigido em <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">código-fonte</a> aqui).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Por que se preocupar em capturar e borbulhar? Bem, nos velhos tempos em que os navegadores eram muito menos compatíveis entre si do que são agora, o Netscape usava apenas captura de eventos, e o Internet Explorer usava apenas borbulhamento de eventos. Quando o W3C decidiu tentar padronizar o comportamento e chegar a um consenso, eles acabaram com esse sistema que incluía ambos, que é o único navegador moderno implementado.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Como mencionado acima, por padrão, todos os manipuladores de eventos são registrados na fase de bubbling, e isso faz mais sentido na maioria das vezes. Se você realmente quiser registrar um evento na fase de captura, registre seu manipulador usando <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, e defina a propriedade terceira opcional como <code>true</code>.</p>
+</div>
+
+<h4 id="Delegação_de_eventos">Delegação de eventos</h4>
+
+<p>O borbulhar também nos permite aproveitar a <strong>delegação de eventos</strong> — esse conceito depende do fato de que, se você quiser que algum código seja executado quando clicar em qualquer um de um grande número de elementos filho, você pode definir o ouvinte de evento em seu pai e ter os eventos que acontecem neles confluem com o pai, em vez de precisar definir o ouvinte de evento em cada filho individualmente.</p>
+
+<p>Um bom exemplo é uma série de itens de lista — Se você quiser que cada um deles apareça uma mensagem quando clicado, você pode definir o ouvinte de evento <code>click</code> no pai <code>&lt;ul&gt;</code>,  e ele irá aparecer nos itens da lista.</p>
+
+<p>Este conceito é explicado mais adiante no blog de David Walsh, com vários exemplos — veja <a href="https://davidwalsh.name/event-delegate">Como funciona a delegação de eventos em JavaScript.</a></p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Agora você deve saber tudo o que precisa saber sobre os eventos da Web nesse estágio inicial. Como mencionado acima, os eventos não são realmente parte do núcleo do JavaScript — eles são definidos nas APIs da Web do navegador.</p>
+
+<p>Além disso, é importante entender que os diferentes contextos nos quais o JavaScript é usado tendem a ter diferentes modelos de evento — de APIs da Web a outras áreas, como WebExtensions de navegador e Node.js (JavaScript do lado do servidor). Não esperamos que você entenda todas essas áreas agora, mas certamente ajuda a entender os fundamentos dos eventos à medida que você avança no aprendizado do desenvolvimento da web.</p>
+
+<p>Se houver algo que você não entendeu, fique à vontade para ler o artigo novamente, ou <a href="/en-US/Learn#Contact_us">entre em contato conosco</a> para pedir ajuda.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/building_blocks/functions/index.html b/files/pt-br/learn/javascript/building_blocks/functions/index.html
new file mode 100644
index 0000000000..05e9ffcfea
--- /dev/null
+++ b/files/pt-br/learn/javascript/building_blocks/functions/index.html
@@ -0,0 +1,394 @@
+---
+title: Funções — blocos reutilizáveis de código
+slug: Aprender/JavaScript/Elementos_construtivos/Functions
+translation_of: Learn/JavaScript/Building_blocks/Functions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p>Outro conceito essencial em código é função, que permitem que você armazene um pedaço de código que realiza uma simples tarefa dentro de um bloco, e então chama aquele código sempre que você precisar usá-lo com um curto comando — em vez de ter que escrever o mesmo código multiplas vezes. Neste artigo nós vamos explorar conceitos fundamentais por trás  das funções como sintaxe básica, como invocá-las e defini-las, escopo, e parâmetros.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Infrmática básica, um entendimento básico de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender conceitos fundamentais por trás das funções em JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Onde_eu_encontro_funções">Onde eu encontro funções?</h2>
+
+<p>Em JavaScript, você encontrará funções em todos os lugares, de fato, nós vamos usar funções ao longo de todo o curso; nós só não falaremos sobre elas em damasia. Agora está na hora, contudo, para falarmos sobre funções explicitamente, e realmente explorar sua sintaxe.</p>
+
+<div id="gt-res-content">
+<div class="trans-verified-button-large" dir="ltr" id="gt-res-dir-ctr"><span class="short_text" id="result_box" lang="pt"><span>Praticamente sempre que você faz uso de um</span></span> uma estrutura JavaScript em que tem um par de parenteses — <code>()</code> — e você <strong>não</strong> está usando uma estrutura  embutida da linguagem como um <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a>, <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while or do...while loop</a>, ou <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else statement</a>, você está fazendo uso de uma função.</div>
+</div>
+
+<h2 id="Funções_embutidas_do_navegador">Funções embutidas do navegador</h2>
+
+<p>Nós fizemos bastante uso de funções embutidas do navegador neste curso. Toda vez que manipulamos uma string de texto, por exemplo:</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made</pre>
+
+<p>Ou toda vez que manipulamos uma lista:</p>
+
+<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+console.log(madeAString);
+// the join() function takes an array, joins
+// all the array items together into a single
+// string, and returns this new string</pre>
+
+<p>Ou toda vez que nós geramos um número aleatório:</p>
+
+<pre class="brush: js">var myNumber = Math.random();
+// the random() function generates a random
+// number between 0 and 1, and returns that
+// number</pre>
+
+<p>...nós usamos uma função!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Fique a vontade para inserir essas linhas no console JavaScript do navegador para refamiliarizar-se com suas funcionalidades, se necessário.</p>
+</div>
+
+<p>A linguagem JavaScript tem muitas funções embutidas que o permitem fazer coisas úteis sem que você mesmo tenha que escrever aquele código. De fato, alguns dos códigos que você está chamando quando você <strong>invoca</strong> (uma palavra rebuscada para rodar, ou executar) uma função embutida de navegador não poderia ser escrita em JavaScript — muitas dessa funções são chamadas a partes de código base do navegador, que é escrita grandemente em linguages de<span class="short_text" id="result_box" lang="pt"><span> sistema de baixo nível</span></span> como C++, não linguagem Web como JavaScript.</p>
+
+<p>Tenha em mente que algumas funções embutidas de navegador não são parte do core da linguagem JavaScript — algumas são definidas como partes de APIs do navegador, que são construídas no topo da linguagem padão para prover ainda mais funcionalidades (recorra a <a href="/en-US/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">esta seção inicial de nosso curso</a> para mais descrições). Nós olharemos o uso de APIs de navegador em mais detalhes em um módulo posterior.</p>
+
+<h2 id="Funções_versus_métodos">Funções versus métodos</h2>
+
+<p>Uma coisas que devemos esclarecer antes de seguir em frente — tecnicamente falando, funções embutidas de navegador não são funções — elas são <strong>métodos</strong>. Isso pode soar um pouco assustador e confuso, mas não se preocupe — as palavras funções e métodos são largamente intercambeáveis, ao menos para nossos propósitos, neste estágio de nosso aprendizado.</p>
+
+<p>A distinção é que métodos são funções definidas dentro de objetos. Funções embutidas de navegador (métodos) e variáveis (que são chamadas <strong>propriedades</strong>) são armazenadas dentro de objetos estruturados, para tornar o código mais estruturado e fácil de manipular.</p>
+
+<p>Você não precisa aprender sobre o<span class="short_text" id="result_box" lang="pt"><span> funcionamento interno</span></span> de objetos estruturados em JavaScript ainda — você pode esperar nosso módulo posterior que ensinará tudo sobre <span class="short_text" id="result_box" lang="pt"><span>funcionamento interno</span></span> de objetos, e como criar o seu próprio. Por hora, nós só queremos esclarecer qualquer confusão possível de método versus função — é pr<span class="short_text" id="result_box" lang="pt"><span>ovável que você encontre ambos</span></span> termos enquanto você olhar os recursos disponível pela  Web.</p>
+
+<h2 id="Funções_personalizadas">Funções personalizadas</h2>
+
+<p>Nós vimos também várias funções personalizadas no curso até agora — funções definidas em seu código, não dentro do navegador. Sempre que você viu um nome personalizado com parênteses logo após ele, você estava usando funções personalizadas. em nosso exemplo <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">código fonte</a> completo) de nosso <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">loops article</a>, nós incluimos a função personalizada <code>draw()</code> que era semelhante a essa:</p>
+
+<pre class="brush: js">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>Esta função desenha 100 círculos aleatórios dentro de um elemento {{htmlelement("canvas")}}. Toda vez que queremos fazer isso, nós podemos simplesmente invocar a função com isto</p>
+
+<pre class="brush: js">draw();</pre>
+
+<p>ao invés de ter que escrever todo o código novamente todas as vezes que queremos repetí-lo. <span class="short_text" id="result_box" lang="pt"><span>E funções podem conter qualquer código que você gosta</span></span> — você pode até chamar outra função dentro das funções. A função acima por exemplo chama a função <code>random()</code> três vezes, o qual é definido pelo seguinte código:</p>
+
+<pre class="brush: js">function random(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>Nós precisamos desta função porque a função embutida do navegador<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> só gera números decimais aleatórios entre 0 e 1. Nós queriamos um número aleatório inteiro entre 0 e um número especificado.</p>
+
+<h2 id="Invocando_funções">Invocando funções</h2>
+
+<p>Provavelmente você já tem conhecimento sobre iso agora, mas... para realmente usar uma função depois dela ter sido definida, você tem que rodá-la — ou invocá-la. Isso é feito ao se incluir o nome da função em algum lugar do código, seguido por parênteses.</p>
+
+<pre class="brush: js">function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// Chama a função um vez</pre>
+
+<h2 id="Funções_anônimas">Funções anônimas</h2>
+
+<p>Você viu funções definidas e invocadas de maneiras ligeiramente diferentes. Até agora nós só criamos funções como esta:</p>
+
+<pre class="brush: js">function myFunction() {
+  alert('hello');
+}</pre>
+
+<p>Mas você também pode criar funções que não tem nome:</p>
+
+<pre class="brush: js">function() {
+  alert('hello');
+}</pre>
+
+<p>Isto é chamado<strong> Função anônima</strong> — não tem nome! E também não fará nada em si mesma. Você geralmente cria funções anônimas junto com um<span class="short_text" id="result_box" lang="pt"><span>  manipulador de eventos</span></span>, o exemplo a seguir poderia rodar o código dentro da função sempre que o botão associado é clicado:</p>
+
+<pre class="brush: js">var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}</pre>
+
+<p>O exemplo acima requer que exista um elemento {{htmlelement("button")}} diponível na página para selecionar e clicar. Você já viu essa estrutura algumas vezes ao longo do curso, e aprenderá mais a respeito disso e o verá no próximo artigo.</p>
+
+<p>Voce também pode atribuir uma função anônima para ser o valor de uma variável, por exemplo:</p>
+
+<pre class="brush: js">var myGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>Esta função agora poder ser invocada usando:</p>
+
+<pre class="brush: js">myGreeting();</pre>
+
+<p>Isso dá efetivamente um nome a função; você também pode atribuir uma função para ser o valor de múltiplas variáveis , por exemplo:</p>
+
+<pre class="brush: js">var anotherGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>Esta função agora pode ser invocada usando qualquer das funções abaixo</p>
+
+<pre class="brush: js">myGreeting();
+anotherGreeting();</pre>
+
+<p>Mas isso pode simplesmente ser confuso, então não faça! Quando criar funções, é melhor ficar com apenas uma forma:</p>
+
+<pre class="brush: js">function myGreeting() {
+  alert('hello');
+}</pre>
+
+<p>De modo geral você irá usar funções anônimas só para rodar um código em resposta a um disparo de evento — como um botão ao ser clicado — usando um gerenciador de eventos. Novamente, Isso é algo parecido com:</p>
+
+<pre class="brush: js">myButton.onclick = function() {
+  alert('hello');
+  // Eu posso colocar código aqui
+  // dentro o quanto eu quiser
+}</pre>
+
+<h2 id="Parâmetro_de_funções">Parâmetro de funções</h2>
+
+<p>Algumas funções requerem <strong>parâmetros</strong> <span class="short_text" id="result_box" lang="pt"><span>a ser especificado quando você está invocando-os</span></span> — esses são valores que precisam ser inclusos dentro dos parênteses da função, o que é necessário para fazer seu trabalho apropriado.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Parâmetros algumas vezes são chamados de argumentos, propriedades, ou até atributos.</p>
+</div>
+
+<p>Como um exemplo, a função embutida de navegador <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> não requer nenhum parâmetro. Quando chamada, ela sempre retorna um número aleatório entre 0 e 1:</p>
+
+<pre class="brush: js">var myNumber = Math.random();</pre>
+
+<p>A função embutida de navegador <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a>  entretanto precisa de dois parâmetros — a substring para encotrar a string principal, e a substring para ser substituida com ela:</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Quando você precisa especificar multiplos parâmetros, eles são separados por vígulas.</p>
+</div>
+
+<p>Nota-se também que algumas vezes os parâmetros são opcionais — você não tem que especificá-los. Se você não o faz, a função geralmente adota algum tipo de comportamento padrão. Como exemplo, a função <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> tem parâmetro opcional:</p>
+
+<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// returns 'I love chocolate frogs'
+var madeAString = myArray.join();
+// returns 'I,love,chocolate,frogs'</pre>
+
+<p>Se nenhum parâmetro é incluído para especificar a combinação/delimitação de caractere, uma vírgula é usada por padrão.</p>
+
+<h2 id="Função_escopo_e_conflitos">Função escopo e conflitos</h2>
+
+<p>vamos falar um pouco sobre {{glossary("scope")}} — um conceito muito importante quando lidamos com funções. Quando você cria uma função, as variáveis e outras coisas definidas dentro da função ficam dentro de seu próprio e separado <strong>escopo</strong>, significando que eles estão trancados a parte em seu próprio compartimento, inacesível de dentro de outras funções ou de código fora das funções.</p>
+
+<p>O mais alto nível fora de todas suas funções é chamado de <strong>escopo global</strong>. Valores definidos no escopo global são acessíveis em todo lugar do código.</p>
+
+<p>JavaScript é configurado assim por várias razões — mas principalmente por segurança e organização. Algumas vezes você não quer que variáveis sejam acessadas de todo lugar no código — scripts externos que você chama de algum outro lugar podem iniciar uma bagunça no seu código e causar problemas porque eles estão usando os mesmos nomes de variáveis que em outras partes do código, provocando conflitos. Isso pode ser feito maliciosamente, ou só por acidente.</p>
+
+<p>Por exemplo, digamos que você tem um arquivo HTML que está chamando dois arquivos JavaScript externos, e ambos tem uma variável e uma função definidos que usam o mesmo nome:</p>
+
+<pre class="brush: html">&lt;!-- Excerpt from my HTML --&gt;
+&lt;script src="first.js"&gt;&lt;/script&gt;
+&lt;script src="second.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  greeting();
+&lt;/script&gt;</pre>
+
+<pre class="brush: js">// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Olá ' + name + ': bem-vindo a nossa compania.');
+}</pre>
+
+<pre class="brush: js">// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Nossa compania é chamada ' + name + '.');
+}</pre>
+
+<p>Ambas as funções que você quer chamar são chamadas <code>greeting()</code>, mas você só pode acessar o arquivo <code>second.js</code> da função <code>greeting()</code>  — Ele é aplicado no HTML depois no código fonte, então suas variáveis e funções sobrescrevem as de <code>first.js</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode ver este exemplo <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">rodando no GitHub</a> (veja também <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">o código fonte</a>).</p>
+</div>
+
+<p>Manter parte de seus código trancada em funções evita tais problemas, e é considerado boa prática.</p>
+
+<p>Parece um pouco com um zoológico. Os leões, zebras, tigres, e pinguins são mantidos em seus próprios cercados, e só tem acesso as coisas dentro de seu cercado — da mesma maneira que escopos de função. Se eles forem capazes de entrar em outros cercados, problemas podem acontecer. No melhor caso, diferentes animais poderiam sentir-se ralmente desconfortáveis dentro de habitats não familiares — um leão e um tigre poderiam sentir-se muito mal dentro de um úmido e gelado terreno. No pior caso, os leões e tigres poderiam tentar comer os pinguins!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>O zelador do zoológico é como o escopo global — ele ou ela tem as chaves para acessar cada cercado, reabastecer comida, tratar animais doentes, etc.</p>
+
+<h3 id="Aprendizado_ativo_Brincando_com_o_escopo">Aprendizado ativo: Brincando com o escopo</h3>
+
+<p>Vamos observar um exemplo real para mostrar escopo.</p>
+
+<ol>
+ <li>Primeiro, faça uma cópia local de nosso exmplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Isto contém duas funções chamadas <code>a()</code> e <code>b()</code>, e três variáveis — <code>x</code>, <code>y</code>, e <code>z</code> — duas das quais estão definidas dentro de funções, e uma no escopo global. Ele também contém uma terceira função chamada <code>output()</code>, que leva um simples parâmetro e mostra-o em um parágrafo na página.</li>
+ <li>Abra o exemplo em um navegador e em um editor de textos.</li>
+ <li>Abra o console JavaScript no developer tools de seu navegador. No console  JavaScript, digite o seguinte comando:
+  <pre class="brush: js">output(x);</pre>
+  Você deve ver o valor da variável <code>x</code> exibida na página.</li>
+ <li>Agora tente digitar o seguinte no seu console:
+  <pre class="brush: js">output(y);
+output(z);</pre>
+  Ambos dever retornar um erro com as seguintes linhas "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Por que isso? Porque o escopo da função — <code>y</code> e <code>z</code> estão trancadas dentro das funções <code>a()</code> e  <code>b()</code>, então <code>output()</code> não pode acessá-las quando chamadas do escopo global.</li>
+ <li>Contudo, que tal chamá-las de dentro de outra função? Tente editar <code>a()</code> e <code>b()</code> para que fiquem desta forma:
+  <pre class="brush: js">function a() {
+  var y = 2;
+  output(y);
+}
+
+function b() {
+  var z = 3;
+  output(z);
+}</pre>
+  Salve o código e atualize o navegador, então tente chamar as funções <code>a()</code> e <code>b()</code> do console JavaScript:
+
+  <pre class="brush: js">a();
+b();</pre>
+  Você verá os valores de <code>y</code> e <code>z</code> mostrados na página. <span class="short_text" id="result_box" lang="pt"><span>Isso funciona bem</span></span>, desde que a função <code>output()</code> está sendo chamada dentro de outra função — <span id="result_box" lang="pt"><span>no mesmo escopo que as variáveis que estam imprimindo são definidas</span></span>, em cada caso. <code>output()</code> em si é acessível de qualquer lugar, <span class="short_text" id="result_box" lang="pt"><span>como é definido no escopo global.</span></span></li>
+ <li>Agora tente atualizar seu código como este:
+  <pre class="brush: js">function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}</pre>
+  Salve e atualize novamente, e tente isso novamente em seu console JavaScript:         </li>
+ <li>
+  <pre class="brush: js">a();
+b();</pre>
+  Ambas chamadas de <code>a()</code> e <code>b()</code> devem mostrar o valor de x — 1. Isso dá certo porque até mesmo a chamada de  <code>output()</code> não está no mesmo escopo em que <code>x</code> é definido, <code>x</code> é uma variável global então é disponível dentro de todo código, em toda parte.</li>
+ <li>Finalmente, tente atualizar o código o seguinte:
+  <pre class="brush: js">function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}</pre>
+  Salve e atualize novamente, e tente isso novamente em seu console JavaScript: </li>
+ <li>
+  <pre class="brush: js">a();
+b();</pre>
+  Desta vez as chamadas de <code>a()</code> e <code>b()</code> retornaram o irritante erro "<a href="/pt-BR/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" — isto porque a chamada de <code>output()</code> e as variáveis que eles estão tentando imprimir não estão definidas dentro do mesmo escopo das funções — as variáveis são efetivamente invisíveis aquelas chamadas de função.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: As mesmas regras de escopo não se aplicam a laços (ex.: <code>for() { ... }</code>) e blocos condicionais (ex.: <code>if() { ... }</code>) — eles parecem muito semelhantes, mas eles não são a mesma coisa! Tome cuidado para não confudir-se.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: O erro <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> é um dos mais comuns que você encontrará. Se você receber este erro e tem certeza que definiu a variável em questão, cheque em que escopo ela está.</p>
+</div>
+
+<ul>
+</ul>
+
+<h3 id="Funções_dentro_de_funções">Funções dentro de funções</h3>
+
+<p>Tenha em mente que você pode chamar uma função de qualquer lugar, até mesmo dentro de outra função.  Isso é frenquentemente usado para manter o código organizado — se você tem uma função grande e complexa, é mais fácil de entendê-la se você quebrá-la em várias subfunções:</p>
+
+<pre class="brush: js">function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+</pre>
+
+<p>Apenas certifique-se que os valores usados dentro da função estão apropriadamente no escopo. O exemplo acima deve lançar um erro <code>ReferenceError: myValue is not defined</code>, porque apesar da variável <code>myValue</code> estar definida no mesmo escopo da chamda da função, ela não está definida dentro da definição da função — o código real que está rodando quando as funções são chamadas. Para fazer isso funcionar, você deveria passar o valor dentro da função como um parâmetro, desta forma:</p>
+
+<pre class="brush: js">function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}</pre>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Este arquivo explorou os conceitos fundamentais por trás das funções, pavimentando o caminho para o próximo no qual nos tornamos práticos e o levamos através de passos para construir suas próprias funções personalizadas.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Guia detalhado de funções</a> — cobre algumas características avançadas não includas aqui.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Referências de funções</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Parâmetros padrão</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Funções de flexa</a> — referências de conceito avançado</li>
+</ul>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/building_blocks/image_gallery/index.html b/files/pt-br/learn/javascript/building_blocks/image_gallery/index.html
new file mode 100644
index 0000000000..2e4fc27c4d
--- /dev/null
+++ b/files/pt-br/learn/javascript/building_blocks/image_gallery/index.html
@@ -0,0 +1,140 @@
+---
+title: Galeria de Imagens
+slug: Aprender/JavaScript/Elementos_construtivos/Image_gallery
+translation_of: Learn/JavaScript/Building_blocks/Image_gallery
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Agora que analisamos os blocos de construção fundamentais do JavaScript, testaremos seu conhecimento de loops, funções, condicionais e eventos, fazendo com que você crie um item bastante comum que você verá em muitos sites — uma galeria de imagens ativadas em JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Antes de tentar esta avaliação, você já deve ter trabalhado em todos os artigos deste módulo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para testar a compreensão de loops, funções, condicionais e eventos de JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ponto_de_partida">Ponto de partida</h2>
+
+<p>Para começar esta avaliação, você deve <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">pegar o arquivo ZIP</a> para o exemplo e descompactá-lo em algum lugar no seu computador.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Como alternativa, você pode usar um site como o <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para fazer sua avaliação. Você pode colar o HTML, CSS e JavaScript em um desses editores on-line. Se o editor on-line que você está usando não tiver painéis JavaScript / CSS separados, sinta-se à vontade para colocar os elementos in-line <code>&lt;script&gt;<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4;"> e </span></font></code><code>&lt;style&gt;</code> dentro da página HTML.</p>
+</div>
+
+<h2 id="Resumo_do_projeto">Resumo do projeto</h2>
+
+<p>Você recebeu alguns recursos de HTML, CSS e imagem e algumas linhas de código JavaScript; você precisa escrever o JavaScript necessário para transformar isso em um programa de trabalho. O corpo do HTML se parece com isto:</p>
+
+<pre class="brush: html">&lt;h1&gt;Image gallery example&lt;/h1&gt;
+
+&lt;div class="full-img"&gt;
+  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
+  &lt;div class="overlay"&gt;&lt;/div&gt;
+  &lt;button class="dark"&gt;Darken&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="thumb-bar"&gt;
+
+&lt;/div&gt;</pre>
+
+<p>O exemplo é assim:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+</ul>
+
+<p>As partes mais interessantes do arquivo CSS do exemplo:</p>
+
+<ul>
+ <li>Absolutamente posicione os três elementos dentro do <code>full-img &lt;div&gt;</code> — o <code>&lt;img&gt;</code> no qual a imagem em tamanho normal é exibida, um <code>&lt;div&gt;</code> vazio que é dimensionado para ser do mesmo tamanho que o <code>&lt;img&gt;</code> e colocado sobre a parte superior (isso é usado para aplicar um efeito de escurecimento à imagem através de uma cor de fundo semitransparente) e um <code>&lt;button&gt;</code> que é usado para controlar o efeito de escurecimento.</li>
+ <li>Defina a largura de qualquer imagem dentro da thumb-bar  <code>thumb-bar &lt;div&gt;</code> (as chamadas imagens "thumbnail") para 20%, e flutue-as para a esquerda para que elas fiquem lado a lado em uma linha.</li>
+</ul>
+
+<p>Seu JavaScript precisa:</p>
+
+<ul>
+ <li>Faça um loop em todas as imagens e, para cada uma, insira um elemento <code>&lt;img&gt;</code> dentro do <code>thumb-bar &lt;div&gt;</code> que incorporará a imagem na página.</li>
+ <li>Anexe um manipulador <code>onclick</code> para cada <code>&lt;img&gt;</code> dentro do <code>thumb-bar &lt;div&gt;</code> para que, quando clicados, a imagem correspondente seja exibida no elemento <code>displayed-img &lt;img&gt;</code>.</li>
+ <li>Anexe um manipulador <code>onclick</code> ao <code>&lt;button&gt;</code> para que, ao ser clicado, um efeito de escurecimento seja aplicado à imagem em tamanho normal. Quando é clicado novamente, o efeito de escurecimento é removido novamente.</li>
+</ul>
+
+<p>Para lhe dar mais uma ideia, dê uma olhada no <a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">exemplo finalizado</a> (não espreite o código-fonte!)</p>
+
+<h2 id="Passos_para_concluir">Passos para concluir</h2>
+
+<p>As seções a seguir descrevem o que você precisa fazer.</p>
+
+<h3 id="Looping_através_das_imagens">Looping através das imagens</h3>
+
+<p>Já fornecemos a você linhas que armazenam uma referência à <code>thumb-bar &lt;div&gt;</code> dentro de uma variável chamada <code>thumbBar</code>, cria um novo elemento <code>&lt;img&gt;</code> define seu atributo <code>src</code> como um valor de espaço reservado <code>xxx</code>, e acrescenta essa nova  <code>&lt;img&gt;</code> elemento dentro do <code>thumbBar</code>.</p>
+
+<p>Você precisa:</p>
+
+<ol>
+ <li>Coloque a seção de código abaixo do comentário "Looping through images" dentro de um loop que percorre todas as 5 imagens — você só precisa percorrer cinco números, um representando cada imagem.</li>
+ <li>Em cada iteração de loop, substitua o valor de espaço reservado <code>xxx</code> por uma string que seja igual ao caminho para a imagem em cada caso. Estamos definindo o valor do atributo <code>src</code> para esse valor em cada caso. Tenha em mente que, em cada caso, a imagem está dentro do diretório de imagens e seu nome é <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li>
+</ol>
+
+<h3 id="Adicionando_um_manipulador_onclick_a_cada_imagem_em_miniatura">Adicionando um manipulador onclick a cada imagem em miniatura</h3>
+
+<p>Em cada iteração de loop, você precisa adicionar um manipulador <code>onclick</code> ao atual <code>newImage</code> — isso deve:</p>
+
+<ol>
+ <li>Encontre o valor do atributo <code>src</code> da imagem atual. Isto pode ser feito executando a função <code><a href="/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> no <code>&lt;img&gt;</code> em cada caso e passando um parâmetro de <code>"src"</code> em cada caso. Mas como conseguir a imagem? O uso do <code>newImage.getAttribute()</code> não funcionará, pois o loop é concluído antes de os manipuladores de eventos serem aplicados; fazer desta forma resultaria no retorno do valor <code>src</code> do último <code>&lt;img&gt;</code> para todos os casos. Para resolver isso, tenha em mente que, no caso de cada manipulador de eventos, o <code>&lt;img&gt;</code> é o destino do manipulador. Que tal obter as informações do objeto de evento?</li>
+ <li>Rode uma função, passando o valor <code>src</code> retornado como um parâmetro. Você pode chamar essa função como quiser.</li>
+ <li>Esta função do manipulador de eventos deve definir o valor do atributo <code>src</code> do <code>displayed-img &lt;img&gt;</code> para o valor <code>src</code> passado como um parâmetro. Já fornecemos uma linha que armazena uma referência ao <code>&lt;img&gt;</code> relevante em uma variável chamada <code>displayedImg</code>. Note que queremos uma função nomeada definida aqui.</li>
+</ol>
+
+<h3 id="Escrevendo_um_manipulador_que_executa_o_botão_escurecer_clarear">Escrevendo um manipulador que executa o botão escurecer / clarear</h3>
+
+<p>Isso só deixa o nosso escurecer / clarear <code>&lt;button&gt;</code> — nós já fornecemos uma linha que armazena uma referência ao <code>&lt;button&gt;</code> em uma variável chamada <code>btn</code>. Você precisa adicionar um manipulador <code>onclick</code> que:</p>
+
+<ol>
+ <li>Verifica o nome da classe atual definido no <code>&lt;button&gt;</code> — você pode novamente fazer isso usando <code>getAttribute()</code>.</li>
+ <li>Se o nome da classe for <code>"dark"</code>, altera a classe <code>&lt;button&gt;</code> para <code>"light"</code> (usando <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), seu conteúdo de texto para "Lighten", e o {{cssxref("background-color")}} da sobreposição <code>&lt;div&gt;</code> para <code>"rgba(0,0,0,0.5)"</code>.</li>
+ <li>Se o nome da classe não for <code>"dark"</code>, a classe <code>&lt;button&gt;</code> será alterada para <code>"dark"</code>, o conteúdo de texto de volta para "Darken", e o {{cssxref("background-color")}} da sobreposição <code>&lt;div&gt;</code> para <code>"rgba(0,0,0,0)"</code>.</li>
+</ol>
+
+<p>As linhas seguintes fornecem uma base para alcançar as mudanças estipuladas nos pontos 2 e 3 acima.</p>
+
+<pre class="brush: js">btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;</pre>
+
+<h2 id="Dicas_e_sugestões">Dicas e sugestões</h2>
+
+<ul>
+ <li>Você não precisa editar o HTML ou CSS de forma alguma.</li>
+</ul>
+
+<h2 id="Avaliação">Avaliação</h2>
+
+<p>Se você está seguindo esta avaliação como parte de um curso organizado, você deve poder dar seu trabalho ao seu professor / mentor para marcação. Se você é auto-didata, então pode obter o guia de marcação com bastante facilidade, perguntando no tópico de <a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">discussão sobre este exercício</a>, ou no canal <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC da <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tente o exercício primeiro — não há nada a ganhar com a trapaça!</p>
+
+<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/learn/javascript/building_blocks/index.html b/files/pt-br/learn/javascript/building_blocks/index.html
new file mode 100644
index 0000000000..cb8deab502
--- /dev/null
+++ b/files/pt-br/learn/javascript/building_blocks/index.html
@@ -0,0 +1,51 @@
+---
+title: Elementos construtivos do Javascript
+slug: Aprender/JavaScript/Elementos_construtivos
+tags:
+  - Artigo
+  - Condicionais
+  - Exercício
+  - Funções
+  - Iniciante
+  - JavaScript
+  - Loops
+  - eventos
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Neste módulo, continuaremos nossa abordagem por todos os recursos-chave fundamentais de Javascript, voltando nossa atenção para os tipos de bloco de código comumente encontrados, tais como declarações condicionais, laços, funções e eventos. Você já viu isso no curso, mas apenas de passagem - aqui nós vamos discutir tudo isso explicitamente.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Antes  de iniciar este módulo, você deve ter familiaridade com os conceitos básicos de <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">HTML</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">CSS</a>, além de ter estudado nosso módulo anterior, <a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps">primeiros passos no Javacript</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está trabalhando em um computador, tablet ou outro dispositivo onde você não tem a habilidade para criar seus próprios arquivos, você pode testar os exemplos de código (a maioria deles) em um programa de codificação online, tal como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals">Tomando decisões em seu código — condicionais</a></dt>
+ <dd>Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo com diferentes valores de entrada. Por exemplo, em um jogo, se o número de vidas de um jogador é 0, então é "fim de jogo". Em um aplicativo de previsão do tempo, se ele está sendo olhado de manhã, é exibido um gráfico de nascer do sol; se for noite, mostra estrelas e a lua. Neste artigo, vamos explorar como as estruturas condicionais funcionam em Javascript.</dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Looping_code">Re-executando código</a></dt>
+ <dd>Às vezes você precisa que uma tarefa seja feita mais de uma vez em uma linha. Por exemplo, percorrendo uma lista de nomes. Em programação, laços realizam esse trabalho muito bem. Aqui nós vamos ver estruturas de laço em Javascript.</dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Functions">Funções — blocos reutilizáveis de código</a></dt>
+ <dd>Outro conceito essencial em codificação são <strong>funções</strong>. <strong>Funções </strong>permitem que você armazene um trecho de código que executa uma única tarefa dentro de um bloco definido, e então chame aquele código em qualquer lugar que você precise dele usando um comando curto - em vez de ter que digitar o mesmo código múltiplas vezes. Neste artigo, vamos explorar conceitos fundamentais por trás das funções, tais como sintaxe básica, como invocar e definir funções, escopo e parâmetros.</dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Construa sua própria função</a></dt>
+ <dd>Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece uma experiência prática. Aqui você vai adquirir um pouco de prática construindo sua própria função personalizada. Junto com isso, vamos explicar mais alguns detalhes úteis sobre lidar com funções.</dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Return_values">Funções retornam valores</a></dt>
+ <dd>Há um último conceito essencial para discutirmos nesse curso, antes de encerrarmos nossa abordagem sobre funções — valores de retorno. Algumas funções não retornam nenhum valor significativo após executar, outras retornam. É importantes entender o que esses valores são, como utilizá-los em seu código, e como fazer suas próprias funções customizadas retornarem valores utilizáveis. </dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Events">Introdução a eventos</a></dt>
+ <dd>Eventos são ações ou ocorrências que acontecem no sistema que você está programando, sobre os quais o sistema te informa para que você possa reagir a eles de alguma forma se desejar. Por exemplo se o usuário clica em um botão numa página, você deve querer responder a essa ação exibindo uma caixa de informação. Neste artigo final nós discutiremos alguns conceitos importantes sobre eventos, e ver como eles funcionam em navegadores.</dd>
+</dl>
+
+<h2 id="Exercícios">Exercícios</h2>
+
+<p>O exercício a seguir irá testar seu entendimento do básico de JavaScript abordado nos guias acima.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galeria de imagens</a></dt>
+ <dd>Agora que demos uma olhada os elementos construtivos do JavaScript, vamos testar seu conhecimento sobre loops, funções, condicionais e eventos construindo um item bastante comum que você verá em muitos websites — uma galeria de imagens movida a JavaScript.</dd>
+</dl>
diff --git a/files/pt-br/learn/javascript/building_blocks/looping_code/index.html b/files/pt-br/learn/javascript/building_blocks/looping_code/index.html
new file mode 100644
index 0000000000..058ce0385c
--- /dev/null
+++ b/files/pt-br/learn/javascript/building_blocks/looping_code/index.html
@@ -0,0 +1,940 @@
+---
+title: Código em loop
+slug: Aprender/JavaScript/Elementos_construtivos/Código_em_loop
+tags:
+  - Artigo
+  - CodingScripting
+  - DO
+  - Guide
+  - Iniciante
+  - JavaScript
+  - Loop
+  - break
+  - continue
+  - for
+  - while
+translation_of: Learn/JavaScript/Building_blocks/Looping_code
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">As linguagens de programação são muito úteis para concluir rapidamente tarefas repetitivas, desde vários cálculos básicos até praticamente qualquer outra situação em que você tenha muitos itens semelhantes para manipular. Aqui, veremos as estruturas de loop disponíveis no JavaScript que ajudam com essas necessidades..</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conhecimento básico em informática, um básico entendimento  de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Entender como usar loops em JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mantenha-me_no_looplaço">Mantenha-me no loop(laço)</h2>
+
+<p>Loops, loops, loops. Além de estarem associados a <a href="https://en.wikipedia.org/wiki/Froot_Loops">populares cereais matinais</a>, <a href="https://pt.wikipedia.org/wiki/Montanha-russa">montanhas-russas</a> e <a href="https://pt.wikipedia.org/wiki/Loop_(m%C3%BAsica)">produção musical</a>, eles também são um conceito importante na programação. O loop de programação é como fazer a mesma coisa repetidas vezes - o que é chamado de <strong>iteração</strong> na linguagem de programação.</p>
+
+<p>Vamos considerar o caso de um agricultor que quer se certificar de que ele terá comida suficiente para alimentar sua família durante a semana. Ele pode usar o seguinte loop para conseguir isso:</p>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Um loop geralmente possui um ou mais dos seguintes itens:</p>
+
+<ul>
+ <li> O <strong>contador</strong>, que é inicializado com um certo valor - este é o ponto inicial do loop ("Iniciar: não tenho comida", figura acima).</li>
+ <li>A <strong>condição de saída</strong>, que é o critério no qual o loop pára - geralmente o contador atinge um certo valor. Isso é ilustrado por "Tenho comida suficiente?",  na figura acima. Vamos dizer que ele precisa de 10 porções de comida para alimentar sua família.</li>
+ <li>Um <strong>iterador</strong>, que geralmente incrementa o contador em uma pequena quantidade a cada loop, sucessivamente, até atingir a condição de saída. Nós não ilustramos explicitamente isso acima, mas poderíamos pensar sobre o agricultor ser capaz de coletar 2 porções de comida por hora. Depois de cada hora, a quantidade de comida que ele coletou é incrementada em dois, e ele verifica se ele tem comida suficiente. Se ele atingiu 10 porções (a condição de saída), ele pode parar de coletar e ir para casa.</li>
+</ul>
+
+<p>No seu {{glossary("pseudocode")}}, isso seria algo como o seguinte:</p>
+
+<pre>loop(food = 0; foodNeeded = 10) {
+  if (food = foodNeeded) {
+    exit loop;
+    // Nós temos comida o suficiente, Vamos para casa
+  } else {
+    food += 2; // Passe uma hora coletando mais 2 alimentos(food)
+    // loop será executado novamente
+  }
+}</pre>
+
+<p>Assim, a quantidade de comida necessária é fixada em 10, e o montante que o agricultor tem atualmente é fixado em 0. Em cada iteração do ciclo, verificamos se a quantidade de alimento que o agricultor tem é igual à quantidade que ele precisa. Se assim for, podemos sair do loop. Se não, o agricultor gasta mais uma hora coletando duas porções de comida, e o laço é executado novamente.</p>
+
+<h3 id="Porque_se_importar">Porque se importar?</h3>
+
+<p>Neste ponto, você provavelmente já entendeu o conceito de alto nível por trás dos loops, mas provavelmente está pensando "OK, ótimo, mas como isso me ajuda a escrever um código JavaScript melhor?" Como dissemos anteriormente, <strong>os loops têm tudo a ver com fazer a mesma coisa repetidas vezes, o que é ótimo para concluir rapidamente tarefas repetitivas</strong>.</p>
+
+<p>Muitas vezes, o código será um pouco diferente em cada iteração sucessiva do loop, o que significa que você pode completar toda uma carga de tarefas que são semelhantes, mas não são totalmente iguais — se você tem muitos cálculos diferentes para fazer, e você quer fazer um diferente do outro, e não o mesmo repetidamente!</p>
+
+<p>Vejamos um exemplo para ilustrar perfeitamente por que os loops são uma coisa tão boa. Digamos que quiséssemos desenhar 100 círculos aleatórios em um elemento  {{htmlelement("canvas")}}  (pressione o botão Atualizar para executar o exemplo várias vezes para ver os conjuntos aleatórios diferentes):</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Random canvas circles&lt;/title&gt;
+    &lt;style&gt;
+      html {
+        width: 100%;
+        height: inherit;
+        background: #ddd;
+      }
+
+      canvas {
+        display: block;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      button {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;button&gt;Update&lt;/button&gt;
+
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+
+    &lt;script&gt;
+    var btn = document.querySelector('button');
+    var canvas = document.querySelector('canvas');
+    var ctx = canvas.getContext('2d');
+
+    var WIDTH = document.documentElement.clientWidth;
+    var HEIGHT = document.documentElement.clientHeight;
+
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+
+    function random(number) {
+      return Math.floor(Math.random()*number);
+    }
+
+    function draw() {
+      ctx.clearRect(0,0,WIDTH,HEIGHT);
+      for (var i = 0; i &lt; 100; i++) {
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,0,0,0.5)';
+        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    }
+
+    btn.addEventListener('click',draw);
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Você não precisa entender todo esse código por enquanto, mas vamos ver a parte do código que realmente desenha os 100 círculos:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<ul>
+ <li><code>random()</code>, definido anteriormente no código, retorna um número inteiro entre <code>0</code> e <code>x-1</code>.</li>
+ <li><code>WIDTH</code> e <code>HEIGHT</code> são a largura e a altura da janela interna do navegador. </li>
+</ul>
+
+<p>Você deve ter notado - estamos usando um loop para executar 100 iterações desse código, cada uma delas desenhando um círculo em uma posição aleatória na página. A quantidade de código necessária seria a mesma se estivéssemos desenhando 100 círculos, 1.000 ou 10.000. Apenas um número tem que mudar.</p>
+
+<p>Se não estivéssemos usando um loop aqui, teríamos que repetir o seguinte código para cada círculo que queríamos desenhar:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();</pre>
+
+<p>Isso ficaria muito chato, difícil e lento de manter. Loops são realmente os melhores.</p>
+
+<h2 id="O_for_loop_padrão">O for loop padrão</h2>
+
+<p>Vamos começar a explorar alguns exemplos específicos de construções de loop. O primeiro e que você usará na maior parte do tempo, é o loop <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> - ele tem a seguinte sintaxe:</p>
+
+<pre>for (inicializador; condição-saída; expressão-final) {
+  // código para executar
+}</pre>
+
+<p>Aqui nós temos:</p>
+
+<ol>
+ <li>A palavra-chave <code>for</code>, seguido por parênteses.</li>
+ <li>Dentro do parênteses temos três itens, sepados por ponto e vírgula:
+  <ol>
+   <li>O<strong> inicializador</strong>— geralmente é uma variável configurada para um número, que é incrementado para contar o número de vezes que o loop foi executado. É também por vezes referido como uma <strong>variável de contador</strong>.</li>
+   <li>A <strong>condição-saída</strong> — como mencionado anteriormente, aqui é definido qundo o loop deve parar de executar. Geralmente, essa é uma expressão que apresenta um operador de comparação, um teste para verificar se a condição de saída foi atendida.</li>
+   <li>A <strong>expressão-final </strong>— isso sempre é avaliado (ou executado) cada vez que o loop passou por uma iteração completa. Geralmente serve para incrementar (ou, em alguns casos, decrementar) a variável do contador, aproximando-a do valor da condição de saída.</li>
+  </ol>
+ </li>
+ <li>Algumas chaves contêm um bloco de código - esse código será executado toda vez que o loop for iterado.</li>
+</ol>
+
+<p>Vejamos um exemplo real para podermos visualizar o que isso faz com mais clareza.</p>
+
+<pre class="brush: js">var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+var info = 'My cats are called ';
+var para = document.querySelector('p');
+
+for (var i = 0; i &lt; cats.length; i++) {
+  info += cats[i] + ', ';
+}
+
+para.textContent = info;</pre>
+
+<p>Isso nos dá a seguinte saída:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Basic for loop example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+    var info = 'My cats are called ';
+    var para = document.querySelector('p');
+
+    for (var i = 0; i &lt; cats.length; i++) {
+      info += cats[i] + ', ';
+    }
+
+    para.textContent = info;
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Você pode encontrar este <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">código de exemplo no GitHub</a> (também <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">veja em execução </a>).</p>
+</div>
+
+<p>Aqui mostra um loop sendo usado para iterar os itens em uma matriz e fazer algo com cada um deles - um padrão muito comum em JavaScript. Aqui:</p>
+
+<ol>
+ <li>O iterador, <code>i</code>, começa em <code>0</code> (<code>var i = 0</code>).</li>
+ <li>Foi dito para executar até que não seja menor que o comprimento do array dos gatos. Isso é importante - a condição de saída mostra a condição sob a qual o loop ainda será executado. No caso, enquanto <code>i &lt; cats.length</code>  for verdadeiro, o loop continuará executando.</li>
+ <li>Dentro do loop, nós concatenamos o item de loop atual (<code>cats[i]</code> é <code>cats[o nome do item que está iterado no momento]</code>) junto com uma vírgula e um espaço, no final da variável <code>info</code> . Assim:
+  <ol>
+   <li>Durante a primeira execução, <code>i = 0</code>, então <code>cats[0] + ', '</code> será concatenado na variável info ("Bill").</li>
+   <li>Durante a segunda execução, <code>i = 1</code>, so <code>cats[1] + ', '</code> será concatenado na variável info ("Jeff, ")</li>
+   <li>E assim por diante. Após cada execução do loop, 1 será adicionado à <code>i</code> (<code>i++</code>), então o processo será iniciado novamente.</li>
+  </ol>
+ </li>
+ <li>Quando <code>i</code> torna-se igual a <code>cats.length</code>, o loop é interrompido e o navegador passará para o próximo trecho de código abaixo do loop.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>:Nós fizemos a condição de saída <code>i &lt; cats.length</code>, e não <code>i &lt;= cats.length</code>, porque os computadores contam a partir de 0, não 1 - estamos começando <code>i</code> em <code>0</code>, e indo até <code>i = 4</code> (o index do último item do array). <code>cats.length</code> retorna 5, pois há 5 itens no array, mas não queremos chegar até  <code>i = 5</code>, pois isso retornaria  <code>undefined</code> para o último item (não há nenhum item  no índice 5 do array). Então, portanto, queremos ir até 1 a menos de  <code>cats.length</code> (<code>i &lt;</code>), não é o mesmo que <code>cats.length</code> (<code>i &lt;=</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Um erro comum nas condições de saída é usá-las "igual a" (<code>===</code>) em vez de dizer "menor ou igual a" (<code>&lt;=</code>). Se quiséssemos executar nosso loop até  <code>i = 5</code>, a condição de saída precisaria ser  <code>i &lt;= cats.length</code>. Se nós setarmos para  <code>i === cats.length</code>, o loop não seria executado em todos, porque  <code>i</code> não é igual a <code>5</code> na primeira iteração do loop, a execução pararia imediatamente.</p>
+</div>
+
+<p>Um pequeno problema que nos resta é que a sentença de saída final não é muito bem formada:</p>
+
+<blockquote>
+<p>Meus gatos se chamam: Bill, Jeff, Pete, Biggles, Jasmin,</p>
+</blockquote>
+
+<p>Neste caso, queremos alterar a concatenação na iteração final do loop, para que não tenhamos uma vírgula no final da frase. Bem, não há problema - podemos muito bem inserir uma condicional dentro do nosso loop for para lidar com este caso especial:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Nota: </strong>Você pode encontrar este <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">código de exemplo no GitHub</a> (também <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">veja em execução </a>).</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: Com <strong>for</strong> - como acontece com todos os loops - você deve certificar-se de que o inicializador está iterado(configurado) para que ele atinja a condição de saída. Caso contrário, o loop continuará indefinidamente executando e o navegador irá forçá-lo a parar ou falhará. Isso é chamado de<strong> loop infinito</strong>.</p>
+</div>
+
+<h2 id="Saindo_do_loop_com_o_break">Saindo do loop com o break</h2>
+
+<p>Se você quiser sair de um loop antes que todas as iterações sejam concluídas, você poderá usar a instrução <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a>. Nós já encontramos isso em um artigo anterior, quando observamos as instruções switch - quando um determinado caso é atendido em uma <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">condição do switch</a> e que corresponde à expressão de entrada informada, a instrução break sai imediatamente da instrução switch e passa para o trecho de código seguinte.</p>
+
+<p>É o mesmo com loops  — um comando  <code>break</code>  irá imediatamente sair do loop e fazer o navegador passar para o código seguinte.</p>
+
+<p>Digamos que quiséssemos pesquisar por uma variedade de contatos e números de telefone e retornar apenas o número que queríamos encontrar? Primeiro, algum HTML simples  — um texto {{htmlelement("input")}} permitindo-nos iserir um nome para pesquisar, {{htmlelement("button")}} elemento para submeter a pesquisa e um {{htmlelement("p")}} elemento para mostrar o resultado em:</p>
+
+<pre class="brush: html">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+&lt;input id="search" type="text"&gt;
+&lt;button&gt;Search&lt;/button&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<p>Agora para no JavaScript:</p>
+
+<pre class="brush: js">var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+var para = document.querySelector('p');
+var input = document.querySelector('input');
+var btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  var searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (var i = 0; i &lt; contacts.length; i++) {
+    var splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      para.textContent = 'Contact not found.';
+    }
+  }
+});</pre>
+
+<div class="hidden">
+<h6 id="Hidden_code_3">Hidden code 3</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple contact search example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+  &lt;input id="search" type="text"&gt;
+  &lt;button&gt;Search&lt;/button&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+    var para = document.querySelector('p');
+    var input = document.querySelector('input');
+    var btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      var searchName = input.value;
+      input.value = '';
+      input.focus();
+      for (var i = 0; i &lt; contacts.length; i++) {
+        var splitContact = contacts[i].split(':');
+        if (splitContact[0] === searchName) {
+          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+          break;
+        } else if (i === contacts.length-1)
+              para.textContent = 'Contact not found.';
+        }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>Primeiramente, temos algumas definições de variáveis —  temos um array com as informações dos contatos, cada item é uma string e contém um nome e um número de telefone separados por dois pontos.</li>
+ <li>Em seguida, anexamos um ouvinte de evento ao botão (<code>btn</code>),  de modo que quando ele é pressionado, algum código é invocado para executar a pesquisa e retornar os resultados.</li>
+ <li>Armazenamos o valor que foi inserido no input de texto em uma variável chamada  <code>searchName</code>, antes de limpar a entrada de texto e focar novamente, deixando o campo pronto para a próxima pesquisa.</li>
+ <li>Agora, na parte interessante, o loop for:
+  <ol>
+   <li>Iniciamos o contador em <code>0</code>, executamos o loop até que o contador não seja menor que  <code>contacts.length</code>, e incrementamos <code>i</code> com 1 depois e cada iteração do loop.</li>
+   <li>Dentro do loop, primeiro dividimos o contato atual (<code>contacts[i]</code>) no caractere " : " e armazenamos os dois valores resultantes em uma matriz chamada  <code>splitContact</code>.</li>
+   <li>Em seguida, usamos uma instrução condicional para testar se o  <code>splitContact[0]</code> (nome do contato) é igual ao  <code>searchName</code>. Se for igual, inserimos uma string no parágrafo para mostrar em tela qual é o número do contato e usamos o <code>break</code> para encerrar o loop.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Após <code>(contacts.length-1)</code> iterações, se o nome do contato não corresponder à pesquisa inserida, o texto do parágrafo será definido como "Contato não encontrado" e o loop continuará a iterar.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar este <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">código de exemplo no GitHub</a> (também <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">veja em execução</a> ).</p>
+</div>
+
+<h2 id="Ignorando_iterações_com_continue">Ignorando iterações com continue</h2>
+
+<p>A instrução <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> funciona de maneira semelhante ao  <code>break</code>, mas ao invés de sair inteiramente do loop, ele pula para a próxima iteração do loop. Vejamos outro exemplo que usa um número como entrada e retorna apenas os números que são quadrados de inteiros (números inteiros).</p>
+
+<p>O HTML é basicamente o mesmo do último exemplo - uma entrada de texto simples e um parágrafo para saída. O JavaScript é basicamente o mesmo, embora o próprio loop seja um pouco diferente:</p>
+
+<pre class="brush: js">var num = input.value;
+
+for (var i = 1; i &lt;= num; i++) {
+  var sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}</pre>
+
+<p>Aqui está a saída:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_4">Hidden code 4</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Integer squares generator&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="number"&gt;Enter number: &lt;/label&gt;
+  &lt;input id="number" type="text"&gt;
+  &lt;button&gt;Generate integer squares&lt;/button&gt;
+
+  &lt;p&gt;Output: &lt;/p&gt;
+
+
+    &lt;script&gt;
+    var para = document.querySelector('p');
+    var input = document.querySelector('input');
+    var btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      para.textContent = 'Output: ';
+      var num = input.value;
+      input.value = '';
+      input.focus();
+      for (var i = 1; i &lt;= num; i++) {
+        var sqRoot = Math.sqrt(i);
+        if (Math.floor(sqRoot) !== sqRoot) {
+          continue;
+        }
+
+        para.textContent += i + ' ';
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>Nesse caso, a entrada deve ser um número (<code>num</code>). O loop <code>for</code> recebe um contador começando em 1 (como não estamos interessados em 0 neste caso), uma condição de saída que diz que o loop irá parar quando o contador se tornar maior que o input <code>num</code>, e um iterador que adiciona 1 ao contador a cada vez.</li>
+ <li>Dentro do loop, encontramos a raiz quadrada de cada número usando <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>, e, em seguida, verificamos se a raiz quadrada é um inteiro, testando se é igual a ela mesma quando foi arredondada para o inteiro mais próximo é o que <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a> faz com o número que é passado).</li>
+ <li>Se a raiz quadrada e a raiz quadrada arredondada não forem iguais (<code>! ==</code>), isso significa que a raiz quadrada não é um número inteiro, portanto, não estamos interessados nela. Nesse caso, usamos a instrução <code>continue</code> para pular para a próxima iteração de loop sem registrar o número em nenhum lugar.</li>
+ <li>Se a raiz quadrada é um inteiro, nós pulamos o bloco if inteiramente para que a instrução <code>continue</code> não seja executada; em vez disso, concatenamos o valor <code>i</code> atual mais um espaço até o final do conteúdo do parágrafo.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Você pode encontrar este <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">código de exemplo no GitHub</a> (também <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">veja em execução</a> ).</p>
+</div>
+
+<h2 id="while_e_o_do_..._while">while e o do ... while</h2>
+
+<p><code>for</code> não é o único tipo de loop disponível em JavaScript. Na verdade, existem muitos outros, embora você não precise entender tudo isso agora, vale a pena dar uma olhada na estrutura dos outros tipos de loops para que você possa reconhecer a mesma lógica na funcionalidade porém empregada de uma forma diferente.</p>
+
+<p>Primeiro, vamos dar uma olhada no <a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> loop. A sintaxe deste loop é assim:</p>
+
+<pre>inicializador
+while (condição-saída) {
+  // code to run
+
+  expressão-final
+}</pre>
+
+<p>While funciona de maneira muito semelhante ao loop for, exceto que a variável inicializadora é definida antes do loop, e a expressão final é incluída dentro do loop após o código a ser executado - em vez de esses dois itens serem incluídos dentro dos parênteses. A condição de saída está incluída dentro dos parênteses, que são precedidos pela palavra-chave <code>while</code> e não por <code>for</code>.</p>
+
+<p>Os mesmos três itens ainda estão presentes, e eles ainda são definidos na mesma ordem do loop for - isso faz sentido, já que você ainda precisa ter um inicializador definido antes de poder verificar se ele atingiu a condição de saída ; a condição final é então executada após o código dentro do loop ser executado (uma iteração foi concluída), o que só acontecerá se a condição de saída ainda não tiver sido atingida.</p>
+
+<p>Vamos dar uma olhada novamente no nosso exemplo de lista de gatos, que reescrevemos para usar um loop while:</p>
+
+<pre class="brush: js">var i = 0;
+
+while (i &lt; cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}</pre>
+
+<div class="note">
+<p><strong>Nota: </strong>Isso ainda funciona da mesma forma esperada — dê uma olhada no <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">código em execução</a>  (também veja o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">código fonte completo</a>).</p>
+</div>
+
+<p>O <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> loop é muito semelhante, mas fornece uma variação na estrutura while:</p>
+
+<pre>initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>Nesse caso, o inicializador novamente vem em primeiro lugar, antes que o loop seja iniciado. A palavra-chave precede diretamente as chaves que contêm o código a ser executado e a expressão final.</p>
+
+<p>O diferenciador aqui é que a condição de saída vem depois de todo o resto, envolvida em parênteses e precedida por uma palavra-chave while. Em um loop do ... while, o código dentro das chaves é sempre executado uma vez antes da verificação ser feita para ver se deve ser executada novamente (no while e para, a verificação vem primeiro, então o código pode nunca ser executado ).</p>
+
+<p>Vamos reescrever nosso exemplo de listagem de gato novamente para usar um loop do ... while:</p>
+
+<pre class="brush: js">var i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i &lt; cats.length);</pre>
+
+<div class="note">
+<p><strong>Nota: </strong>Novamente, isso funciona exatamente como esperado - dê uma olhada nele <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">executando no GitHub</a> (veja também o<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html"> código fonte completo</a>).</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante:</strong> Com while e do ... while - como em todos os loops - você deve certificar-se de que o inicializador esteja iterado para que ele atinja a condição de saída. Caso contrário, o loop continuará indefinidamente e o navegador irá forçá-lo a parar ou falhará. Isso é chamado de loop infinito.</p>
+</div>
+
+<h2 id="Aprendizado_ativo_contagem_regressiva!">Aprendizado ativo: contagem regressiva!</h2>
+
+<p>Nesse exercício, nós queremos que você imprima uma simples contagem regressiva na caixa de saída, de 10 até terminar. Especificamente, queremos que você:</p>
+
+<ul>
+ <li>Faça um loop de 10 até 0. Fornecemos à você um inicializador  — <code>var i = 10;</code>.</li>
+ <li>Para cada iteração, crie um novo parágrafo e o anexe à saída  <code>&lt;div&gt;</code>, que selecionamos usando <code>var output = document.querySelector('.output');</code>. Nos comentários, nós providenciamos a você três linhas de código que precisam ser usadas em algum lugar dentro do loop:
+  <ul>
+   <li><code>var para = document.createElement('p');</code> — cria um novo parágrafo.</li>
+   <li><code>output.appendChild(para);</code> — anexa o parágrafo à saída <code>&lt;div&gt;</code>.</li>
+   <li><code>para.textContent =</code> — faz o texto dentro do parágrafo ser igual ao que você coloca do lado direito, depois do sinal de igual.</li>
+  </ul>
+ </li>
+ <li>Números de iteração diferentes exigem que texto diferente seja inserido no parágrafo para essa iteração (você precisará de uma declaração condicional e várias linhas <code>para.textContent =</code> ):
+  <ul>
+   <li>Se o número é 10, imprima "Contagem regressiva 10" no parágrafo.</li>
+   <li>Se o número é 0, imprima "Lançar!" no parágrafo.</li>
+   <li>Para qualquer outro número, apenas o imprima no parágrafo.</li>
+  </ul>
+ </li>
+ <li>Lembre-se de incluir um iterador! No entanto, neste exemplo, estamos em contagem regressiva após cada iteração, e não progressiva, então você não vai querer usar <code>i++</code> — como você itera para baixo?</li>
+</ul>
+
+<p>Se você cometer um erro, sempre poderá redefinir o exemplo com o botão "Reset". Se você realmente ficar preso, pressione "Show solution" para ver uma solução.</p>
+
+<div class="hidden">
+<h6 id="Active_learning">Active learning</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 410px;overflow: auto;"&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="playable-code" style="height: 300px;width: 95%"&gt;
+var output = document.querySelector('.output');
+output.innerHTML = '';
+
+// var i = 10;
+
+// var para = document.createElement('p');
+// para.textContent = ;
+// output.appendChild(para);
+&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>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<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>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  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();
+});
+
+var jsSolution = 'var output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nvar i = 10;\n\nwhile(i &gt;= 0) {\n var para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Contagem regressiva \' + i;\n } else if(i === 0) {\n  para.textContent = \'Lançar!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
+var solutionEntry = jsSolution;
+
+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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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>
+
+<p class="brush: js"></p>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Aprendizado_ativo_preenchendo_uma_lista_de_convidados">Aprendizado ativo: preenchendo uma lista de convidados</h2>
+
+<p>Nesse exercício, nós queremos que você pegue uma lista de nomes armazenados em um array, e os coloque em uma lista de convidados. Mas não tão fácil — nós não queremos que Phil e Lola estejam nela porque eles são gananciosos e rudes, e sempre comem a comida toda! Nós temos duas listas, uma para convidados aceitos, e uma para convidados recusados.</p>
+
+<p>Especificamente, nós queremos que você:</p>
+
+<ul>
+ <li>Escreva um loop que iterará de 0 até o comprimento do array <code>people</code>. Você precisará começar com um inicializador de  <code>var i = 0;</code>, Mas qual condição de saída você precisa?</li>
+ <li>Durante cada iteração de loop, verifique se o item atual do array é igual a "Phil" ou "Lola" usando uma declaração condicional:
+  <ul>
+   <li>Se for, concatene o item do array no final do <code>textContent</code> do paragrafo <code>refused</code>, seguido por uma vírgula e um espaço.</li>
+   <li>Se não for, concatene o item do array no final do <code>textContent</code> do paragrafo <code>admitted</code>, seguido por uma vírgula e um espaço.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Nós já fornecemos a você:</p>
+
+<ul>
+ <li><code>var i = 0;</code> — Seu inicializador.</li>
+ <li><code>refused.textContent +=</code> — o início de uma linha que concatenará algo no final de <code>refused.textContent</code>.</li>
+ <li><code>admitted.textContent +=</code> — o início de uma linha que concatenará algo no final de <code>admitted.textContent</code>.</li>
+</ul>
+
+<p>Questão bônus extra  — depois de completar as tarefas acima com sucesso, você terá duas listas de nomes, separados por vírgulas, mas eles estarão desarrumados — haverá uma vírgula no final decada um. Você pode descobrir como escrever linhas que que cortam a última vírgula em cada caso, e adicionar um ponto final? Dê uma olhada no artigo <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos úteis de string</a> para ajuda.</p>
+
+<p>Se você cometer um erro, sempre poderá redefinir o exemplo com o botão "Reset". Se você realmente ficar preso, pressione "Show solution" para ver uma solução.</p>
+
+<div class="hidden">
+<h6 id="Active_learning_2">Active learning 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
+  &lt;p class="admitted"&gt;Admit: &lt;/p&gt;
+  &lt;p class="refused"&gt;Refuse: &lt;/p&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="playable-code" style="height: 400px;width: 95%"&gt;
+var people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
+
+var admitted = document.querySelector('.admitted');
+var refused = document.querySelector('.refused');
+admitted.textContent = 'Admit: ';
+refused.textContent = 'Refuse: '
+
+// var i = 0;
+
+// refused.textContent += ;
+// admitted.textContent += ;
+
+&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">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  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();
+});
+
+var jsSolution = 'var people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+var solutionEntry = jsSolution;
+
+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) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var 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('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Which_loop_type_should_you_use">Which loop type should you use?</h2>
+
+<p>For basic uses, <code>for</code>, <code>while</code>, and <code>do...while</code> loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again.</p>
+
+<p>First <code>for</code>:</p>
+
+<pre>for (initializer; exit-condition; final-expression) {
+  // code to run
+}</pre>
+
+<p><code>while</code>:</p>
+
+<pre>initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}</pre>
+
+<p>and finally <code>do...while</code>:</p>
+
+<pre>initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>Nós recomendamos o uso do <code>for</code>, pelo menos no começo, já que ele é provavelmente a forma mais fácil de lembrar de tudo  — o inicializador, a condição de saída, e a expressão final final tudo fica ordenadamente dentro dos parênteses, então é fácil de ver onde eles estão e para verifcar se você não os esqueceu.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration guide</a>.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples!</p>
+
+<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration in detail</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for statement reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> references</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> references</li>
+ <li>
+  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — some advanced loop best practices</p>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/building_blocks/return_values/index.html b/files/pt-br/learn/javascript/building_blocks/return_values/index.html
new file mode 100644
index 0000000000..39d72a1660
--- /dev/null
+++ b/files/pt-br/learn/javascript/building_blocks/return_values/index.html
@@ -0,0 +1,168 @@
+---
+title: Valores de retorno de função
+slug: Aprender/JavaScript/Elementos_construtivos/Return_values
+translation_of: Learn/JavaScript/Building_blocks/Return_values
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Há um último conceito essencial para discutirmos neste curso, para fechar nossa visão das funções — valores de retorno. Algumas funções não retornam um valor significativo após a conclusão, mas outras o fazem, e é importante entender quais são seus valores, como utilizá-los em seu código e como fazer com que suas próprias funções personalizadas retornem valores úteis. Nós vamos cobrir tudo isso abaixo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>
+    <p>Conhecimento básico de internet, compreenção básica de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript primeiros passos</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funções — reutilizando blocos de código</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender os valores de retorno de uma função, e como utilizá-los</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quais_são_os_valores_de_retorno">Quais são os valores de retorno?</h2>
+
+<p><strong>Valores de retorno</strong> são exatamente como soam — valores retornados pela função quando são concluídos. Você já conheceu os valores de retorno várias vezes, embora possa não ter pensado neles explicitamente. Vamos voltar para algum código familiar:</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made</pre>
+
+<p>Nós vimos exatamente este bloco de código em nosso primeiro artigo de função. Estamos invocando a função <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> na string <code>myText</code> e passando a ela dois parâmetros — a substring para localizar e a substring para substituí-la. Quando essa função é concluída (termina a execução), ela retorna um valor, que é uma nova string com a substituição feita. No código acima, estamos salvando esse valor de retorno como o valor da variável  <code>newString</code>.</p>
+
+<p>Se você observar a página de referência MDN da função de substituição, verá uma seção chamada <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Valor de retorno</a>. É muito útil conhecer e entender quais valores são retornados por funções, portanto, tentamos incluir essas informações sempre que possível.</p>
+
+<p>Algumas funções não retornam um valor de retorno como tal (em nossas páginas de referência, o valor de retorno é listado como <code>void</code> ou <code>undefined</code> em tais casos). Por exemplo, na <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">função displayMessage()</a> que criamos no artigo anterior, nenhum valor específico é retornado como resultado da função que está sendo chamada. Apenas faz uma caixa aparecer em algum lugar na tela — é isso!</p>
+
+<p>Geralmente, um valor de retorno é usado onde a função é uma etapa intermediária em um cálculo de algum tipo. Você quer chegar a um resultado final, que envolve alguns valores. Esses valores precisam ser calculados por uma função, que retorna os resultados para que possam ser usados no próximo estágio do cálculo.</p>
+
+<h3 id="Usando_valores_de_retorno_em_suas_próprias_funções">Usando valores de retorno em suas próprias funções</h3>
+
+<p>Para retornar um valor de uma função personalizada, você precisa usar ... aguarde por isso ... a palavra-chave <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a>. Vimos isso em ação recentemente em nosso exemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. Nossa função <code>draw()</code> desenha 100 círculos aleatórios em algum lugar em um HTML {{htmlelement("canvas")}}:</p>
+
+<pre class="brush: js">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>Dentro de cada iteração de loop, três chamadas são feitas para a função <code>random()</code> , para gerar um valor aleatório para a coordenada x do círculo atual, coordenada y e raio, respectivamente. A função <code>random()</code> recebe um parâmetro — um número inteiro — e retorna um número aleatório inteiro entre 0 e esse número. Se parece com isso:</p>
+
+<pre class="brush: js">function randomNumber(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>Isso pode ser escrito da seguinte maneira:</p>
+
+<pre class="brush: js">function randomNumber(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}</pre>
+
+<p>Mas a primeira versão é mais rápida de escrever e mais compacta.</p>
+
+<p>Estamos retornando o resultado do cálculo <code>Math.floor(Math.random()*number)</code> cada vez que a função é chamada. Esse valor de retorno aparece no ponto em que a função foi chamada e o código continua. Então, por exemplo, se nós rodássemos a seguinte linha:</p>
+
+<pre class="brush: js">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre>
+
+<p>e as três chamadas <code>random()</code> retornaram os valores 500, 200 e 35, respectivamente, a linha seria executada como se fosse isso:</p>
+
+<pre class="brush: js">ctx.arc(500, 200, 35, 0, 2 * Math.PI);</pre>
+
+<p>As chamadas de função na linha são executadas primeiro e seus valores de retorno substituem as chamadas de função, antes que a própria linha seja executada.</p>
+
+<h2 id="Aprendizagem_ativa_nossa_própria_função_de_valor_de_retorno">Aprendizagem ativa: nossa própria função de valor de retorno</h2>
+
+<p>Vamos escrever nossas próprias funções com valores de retorno.</p>
+
+<ol>
+ <li>Primeiro de tudo, faça uma cópia local do arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> do GitHub. Esta é uma página HTML simples contendo um campo de texto {{htmlelement("input")}} e um parágrafo. Há também um elemento {{htmlelement("script")}} no qual armazenamos uma referência a ambos os elementos HTML em duas variáveis. Esta pequena página permitirá que você insira um número na caixa de texto e exiba diferentes números relacionados a ele no parágrafo abaixo.</li>
+ <li>Vamos adicionar algumas funções úteis para este elemento <code>&lt;script&gt;</code>. Abaixo das duas linhas existentes de JavaScript, adicione as seguintes definições de função:
+  <pre class="brush: js">function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  var x = num;
+  while (x &gt; 1) {
+    num *= x-1;
+    x--;
+  }
+  return num;
+}</pre>
+  As funções <code>squared()</code> e <code>cubed()</code> são bastante óbvias — elas retornam o quadrado ou cubo do número dado como um parâmetro. A função <code>factorial()</code> retorna o  <a href="https://pt.wikipedia.org/wiki/Fatorial">fatorial</a> do número fornecido.</li>
+ <li>Em seguida, vamos incluir uma maneira de imprimir informações sobre o número digitado na entrada de texto. Digite o seguinte manipulador de eventos abaixo das funções existentes:
+  <pre class="brush: js">input.onchange = function() {
+  var num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}</pre>
+
+  <p>Aqui estamos criando um manipulador de eventos <code>onchange</code> que é executado sempre que o evento de mudança é acionado na entrada de texto — ou seja, quando um novo valor é inserido na entrada de texto e enviado (insira um valor e pressione tab por exemplo). Quando essa função anônima é executada, o valor existente inserido na entrada é armazenado na variável <code>num</code>.</p>
+
+  <p>Em seguida, fazemos um teste condicional — se o valor inserido não for um número, imprimiremos uma mensagem de erro no parágrafo. O teste analisa se a expressão <code>isNaN(num)</code> retorna true. Usamos a função <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> para testar se o valor num não é um número — se for, retorna <code>true</code>, e, se não, <code>false</code>.</p>
+
+  <p>Se o teste retorna <code>false</code>, o valor  <code>num</code> é um número, então imprimimos uma frase dentro do elemento de parágrafo informando o que é o quadrado, o cubo e o fatorial do número. A sentença chama as funções <code>squared()</code>, <code>cubed()</code>, e <code>factorial()</code> para obter os valores necessários.</p>
+ </li>
+ <li>Salve seu código, carregue-o em um navegador e experimente.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você tiver problemas para fazer o exemplo funcionar, sinta-se à vontade para verificar seu código na <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">versão finalizada no GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">consulte também sua execução</a>), ou peça ajuda.</p>
+</div>
+
+<p>Neste ponto, gostaríamos que você escrevesse algumas funções e as adicionasse à biblioteca. Como sobre o quadrado ou raiz cúbica do número, ou a circunferência de um círculo com um raio de comprimento <code>num</code>?</p>
+
+<p>Este exercício trouxe alguns pontos importantes além de ser um estudo sobre como usar a declaração de <code>return</code>. Além disso, temos:</p>
+
+<ul>
+ <li>Analisamos outro exemplo de como escrever erros em nossas funções. Geralmente, é uma boa ideia verificar se os parâmetros necessários foram fornecidos e, no tipo de dados correto, e se eles são opcionais, que algum tipo de valor padrão é fornecido para permitir isso. Desta forma, o seu programa terá menos probabilidade de lançar erros.</li>
+ <li>Pense na ideia de criar uma biblioteca de funções. À medida que você avança na sua carreira de programação, você começará a fazer o mesmo tipo de coisas uma e outra vez. É uma boa idéia começar a manter sua própria biblioteca de funções utilitárias que você usa com muita frequência — você pode então copiá-las para o seu novo código, ou até mesmo aplicá-las a qualquer página HTML onde você precisar.</li>
+</ul>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Então, temos isso — funções são divertidas, muito úteis e, embora haja muito o que falar em relação à sua sintaxe e funcionalidade, bastante compreensíveis, dados os artigos certos para se estudar.</p>
+
+<p>Se houver algo que você não entendeu, fique à vontade para ler o artigo novamente ou entre em <a href="/en-US/Learn#Contact_us">contato conosco</a> para pedir ajuda.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Funções detalhadas</a> — um guia detalhado cobrindo informações relacionadas a funções mais avançadas.</li>
+ <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Funções de retorno de chamada em JavaScript</a> — um padrão JavaScript comum é passar uma função para outra função como um argumento, que é então chamado dentro da primeira função. Isso está um pouco além do escopo deste curso, mas vale a pena ser estudado em pouco tempo.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html
new file mode 100644
index 0000000000..ce4d3c2a20
--- /dev/null
+++ b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html
@@ -0,0 +1,778 @@
+---
+title: Client-side storage
+slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage
+translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
+---
+<p>{{LearnSidebar}}</p>
+
+<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">Os navegadores modernos oferecem suporte a várias maneiras de os sites armazenarem dados no computador do usuário - com a permissão do usuário - e depois recuperá-los quando necessário. Isso permite que você mantenha dados para armazenamento de longo prazo, salve sites ou documentos para uso offline, retenha configurações específicas do usuário para seu site e muito mais. Este artigo explica os princípios básicos de como eles funcionam.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Noções básicas de JavaScript (consulte as <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">primeiras etapas </a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps"> </a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">blocos de construção</a> , <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">objetos JavaScript</a> ), as <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">noções básicas de APIs do lado do cliente</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para aprender como usar APIs de armazenamento do lado do cliente para armazenar dados de aplicativos</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Armazenamento_do_lado_do_cliente">Armazenamento do lado do cliente?</h2>
+
+<p>Em outro lugar na área de aprendizagem MDN, falamos sobre a diferença entre <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites estáticos</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dinâmicos</a> . A maioria dos principais sites modernos são dinâmicos - eles armazenam dados no servidor usando algum tipo de banco de dados (armazenamento do lado do servidor) e, em seguida, executam o código do <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">lado do servidor</a> para recuperar os dados necessários, inserem-nos em modelos de página estática e fornecem o HTML resultante para o cliente a ser exibido pelo navegador do usuário.er.</p>
+
+<p>O armazenamento do lado do cliente funciona em princípios semelhantes, mas tem usos diferentes. Consiste em APIs JavaScript que permitem armazenar dados no cliente (ou seja, na máquina do usuário) e recuperá-los quando necessário. Isso tem muitos usos distintos, como:</p>
+
+<ul>
+ <li>Personalizar as preferências do site (por exemplo, mostrar a escolha do usuário de widgets personalizados, esquema de cores ou tamanho da fonte).</li>
+ <li>Atividade anterior persistente do site (por exemplo, armazenar o conteúdo de um carrinho de compras de uma sessão anterior, lembrando se um usuário estava conectado anteriormente).</li>
+ <li>Salvar dados e ativos localmente para que o download de um site seja mais rápido (e potencialmente mais barato) ou possa ser usado sem uma conexão de rede.</li>
+ <li>Salvar documentos gerados por aplicativos da web localmente para uso offline</li>
+</ul>
+
+<p>Freqüentemente, o armazenamento do lado do cliente e do lado do servidor são usados ​​juntos. Por exemplo, você pode baixar um lote de arquivos de música (talvez usados ​​por um jogo da web ou aplicativo de reprodutor de música), armazená-los em um banco de dados do cliente e reproduzi-los conforme necessário. O usuário só teria que baixar os arquivos de música uma vez - em visitas subsequentes, eles seriam recuperados do banco de dados.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consulte <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Limites de armazenamento do navegador e critérios de despejo</a> para obter mais informações..</p>
+</div>
+
+<h3 id="Old_school_Cookies">Old school: Cookies</h3>
+
+<p>The concept of client-side storage has been around for <strong>Nota</strong> : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consultea long time. Since the early days of the web, sites have used <a href="/en-US/docs/Web/HTTP/Cookies">cookies</a> to store information to personalize user experience on websites. They're the earliest form of client-side storage commonly used on the web.</p>
+
+<p>These days, there are easier mechanisms available for storing client-side data, therefore we won't be teaching you how to use cookies in this article. However, this does not mean cookies are completely useless on the modern-day web — they are still used commonly to store data related to user personalization and state, e.g. session IDs and access tokens. For more information on cookies see our <a href="/en-US/docs/Web/HTTP/Cookies">Using HTTP cookies</a> article.</p>
+
+<h3 id="New_school_Web_Storage_and_IndexedDB">New school: Web Storage and IndexedDB</h3>
+
+<p>The "easier" features we mentioned above are as follows:</p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> provides a very simple syntax for storing and retrieving smaller, data items consisting of a name and a corresponding value. This is useful when you just need to store some simple data, like the user's name, whether they are logged in, what color to use for the background of the screen, etc.</li>
+ <li>The <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> provides the browser with a complete database system for storing complex data. This can be used for things from complete sets of customer records to even complex data types like audio or video files.</li>
+</ul>
+
+<p>You'll learn more about these APIs below.</p>
+
+<h3 id="The_future_Cache_API">The future: Cache API</h3>
+
+<p>Some modern browsers support the new {{domxref("Cache")}} API. This API is designed for storing HTTP responses to specific requests, and is very useful for doing things like storing website assets offline so the site can subsequently be used without a network connection. Cache is usually used in combination with the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a>, although it doesn't have to be.</p>
+
+<p>Use of Cache and Service Workers is an advanced topic, and we won't be covering it in great detail in this article, although we will show a simple example in the {{anch("Offline asset storage")}} section below.</p>
+
+<h2 id="Storing_simple_data_—_web_storage">Storing simple data — web storage</h2>
+
+<p>The <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> is very easy to use — you store simple name/value pairs of data (limited to strings, numbers, etc.) and retrieve these values when needed.</p>
+
+<h3 id="Basic_syntax">Basic syntax</h3>
+
+<p>Let's show you how:</p>
+
+<ol>
+ <li>
+  <p>First, go to our <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">web storage blank template</a> on GitHub (open this in a new tab).</p>
+ </li>
+ <li>
+  <p>Open the JavaScript console of your browser's developer tools.</p>
+ </li>
+ <li>
+  <p>All of your web storage data is contained within two object-like structures inside the browser: {{domxref("Window.sessionStorage", "sessionStorage")}} and {{domxref("Window.localStorage", "localStorage")}}. The first one persists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again. We'll use the second one in this article as it is generally more useful.</p>
+
+  <p>The {{domxref("Storage.setItem()")}} method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. Try typing this into your JavaScript console (change the value to your own name, if you wish!):</p>
+
+  <pre class="brush: js   notranslate">localStorage.setItem('name','Chris');</pre>
+ </li>
+ <li>
+  <p>The {{domxref("Storage.getItem()")}} method takes one parameter — the name of a data item you want to retrieve — and returns the item's value. Now type these lines into your JavaScript console:</p>
+
+  <pre class="brush: js   notranslate">let myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>Upon typing in the second line, you should see that the <code>myName</code> variable now contains the value of the <code>name</code> data item.</p>
+ </li>
+ <li>
+  <p>The {{domxref("Storage.removeItem()")}} method takes one parameter — the name of a data item you want to remove — and removes that item out of web storage. Type the following lines into your JavaScript console:</p>
+
+  <pre class="brush: js   notranslate">localStorage.removeItem('name');
+let myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>The third line should now return <code>null</code> — the <code>name</code> item no longer exists in the web storage.</p>
+ </li>
+</ol>
+
+<h3 id="The_data_persists!">The data persists!</h3>
+
+<p>One key feature of web storage is that the data persists between page loads (and even when the browser is shut down, in the case of <code>localStorage</code>). Let's look at this in action.</p>
+
+<ol>
+ <li>
+  <p>Open our web storage blank template again, but this time in a different browser to the one you've got this tutorial open in! This will make it easier to deal with.</p>
+ </li>
+ <li>
+  <p>Type these lines into the browser's JavaScript console:</p>
+
+  <pre class="brush: js   notranslate">localStorage.setItem('name','Chris');
+let myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>You should see the name item returned.</p>
+ </li>
+ <li>
+  <p>Now close down the browser and open it up again.</p>
+ </li>
+ <li>
+  <p>Enter the following lines again:</p>
+
+  <pre class="brush: js   notranslate">let myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>You should see that the value is still available, even though the browser has been closed and then opened again.</p>
+ </li>
+</ol>
+
+<h3 id="Separate_storage_for_each_domain">Separate storage for each domain</h3>
+
+<p>There is a separate data store for each domain (each separate web address loaded in the browser). You will see that if you load two websites (say google.com and amazon.com) and try storing an item on one website, it won't be available to the other website.</p>
+
+<p>This makes sense — you can imagine the security issues that would arise if websites could see each other's data!</p>
+
+<h3 id="A_more_involved_example">A more involved example</h3>
+
+<p>Let's apply this new-found knowledge by writing a simple working example to give you an idea of how web storage can be used. Our example will allow you enter a name, after which the page will update to give you a personalized greeting. This state will also persist across page/browser reloads, because the name is stored in web storage.</p>
+
+<p>You can find the example HTML at <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> — this contains a simple website with a header, content, and footer, and a form for entering your name.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Let's build up the example, so you can understand how it works.</p>
+
+<ol>
+ <li>
+  <p>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> file in a new directory on your computer.</p>
+ </li>
+ <li>
+  <p>Next, note how our HTML references a JavaScript file called <code>index.js</code> (see line 40). We need to create this and write our JavaScript code into it. Create an <code>index.js</code> file in the same directory as your HTML file. </p>
+ </li>
+ <li>
+  <p>We'll start off by creating references to all the HTML features we need to manipulate in this example — we'll create them all as constants, as these references do not need to change in the lifecycle of the app. Add the following lines to your JavaScript file:</p>
+
+  <pre class="brush: js   notranslate">// create needed constants
+const rememberDiv = document.querySelector('.remember');
+const forgetDiv = document.querySelector('.forget');
+const form = document.querySelector('form');
+const nameInput = document.querySelector('#entername');
+const submitBtn = document.querySelector('#submitname');
+const forgetBtn = document.querySelector('#forgetname');
+
+const h1 = document.querySelector('h1');
+const personalGreeting = document.querySelector('.personal-greeting');</pre>
+ </li>
+ <li>
+  <p>Next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want. Add this snippet below your previous code:</p>
+
+  <pre class="brush: js   notranslate">// Stop the form from submitting when a button is pressed
+form.addEventListener('submit', function(e) {
+  e.preventDefault();
+});</pre>
+ </li>
+ <li>
+  <p>Now we need to add an event listener, the handler function of which will run when the "Say hello" button is clicked. The comments explain in detail what each bit does, but in essence here we are taking the name the user has entered into the text input box and saving it in web storage using <code>setItem()</code>, then running a function called <code>nameDisplayCheck()</code> that will handle updating the actual website text. Add this to the bottom of your code:</p>
+
+  <pre class="brush: js   notranslate">// run function when the 'Say hello' button is clicked
+submitBtn.addEventListener('click', function() {
+  // store the entered name in web storage
+  localStorage.setItem('name', nameInput.value);
+  // run nameDisplayCheck() to sort out displaying the
+  // personalized greetings and updating the form display
+  nameDisplayCheck();
+});</pre>
+ </li>
+ <li>
+  <p>At this point we also need an event handler to run a function when the "Forget" button is clicked — this is only displayed after the "Say hello" button has been clicked (the two form states toggle back and forth). In  this function we remove the <code>name</code> item from web storage using <code>removeItem()</code>, then again run <code>nameDisplayCheck()</code> to update the display. Add this to the bottom:</p>
+
+  <pre class="brush: js   notranslate">// run function when the 'Forget' button is clicked
+forgetBtn.addEventListener('click', function() {
+  // Remove the stored name from web storage
+  localStorage.removeItem('name');
+  // run nameDisplayCheck() to sort out displaying the
+  // generic greeting again and updating the form display
+  nameDisplayCheck();
+});</pre>
+ </li>
+ <li>
+  <p>It is now time to define the <code>nameDisplayCheck()</code> function itself. Here we check whether the name item has been stored in web storage by using <code>localStorage.getItem('name')</code> as a conditional test. If it has been stored, this call will evaluate to <code>true</code>; if not, it will be <code>false</code>. If it is <code>true</code>, we display a personalized greeting, display the "forget" part of the form, and hide the "Say hello" part of the form. If it is <code>false</code>, we display a generic greeting and do the opposite. Again, put the following code at the bottom:</p>
+
+  <pre class="brush: js   notranslate">// define the nameDisplayCheck() function
+function nameDisplayCheck() {
+  // check whether the 'name' data item is stored in web Storage
+  if(localStorage.getItem('name')) {
+    // If it is, display personalized greeting
+    let name = localStorage.getItem('name');
+    h1.textContent = 'Welcome, ' + name;
+    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
+    // hide the 'remember' part of the form and show the 'forget' part
+    forgetDiv.style.display = 'block';
+    rememberDiv.style.display = 'none';
+  } else {
+    // if not, display generic greeting
+    h1.textContent = 'Welcome to our website ';
+    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
+    // hide the 'forget' part of the form and show the 'remember' part
+    forgetDiv.style.display = 'none';
+    rememberDiv.style.display = 'block';
+  }
+}</pre>
+ </li>
+ <li>
+  <p>Last but not least, we need to run the <code>nameDisplayCheck()</code> function every time the page is loaded. If we don't do this, then the personalized greeting will not persist across page reloads. Add the following to the bottom of your code:</p>
+
+  <pre class="brush: js   notranslate">document.body.onload = nameDisplayCheck;</pre>
+ </li>
+</ol>
+
+<p>Your example is finished — well done! All that remains now is to save your code and test your HTML page in a browser. You can see our <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">finished version running live here</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There is another, slightly more complex example to explore at <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: In the line <code>&lt;script src="index.js" defer&gt;&lt;/script&gt;</code> of the source for our finished version, the <code>defer</code> attribute specifies that the contents of the {{htmlelement("script")}} element will not execute until the page has finished loading.</p>
+</div>
+
+<h2 id="Storing_complex_data_—_IndexedDB">Storing complex data — IndexedDB</h2>
+
+<p>The <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> (sometimes abbreviated IDB) is a complete database system available in the browser in which you can store complex related data, the types of which aren't limited to simple values like strings or numbers. You can store videos, images, and pretty much anything else in an IndexedDB instance.</p>
+
+<p>However, this does come at a cost: IndexedDB is much more complex to use than the Web Storage API. In this section, we'll really only scratch the surface of what it is capable of, but we will give you enough to get started.</p>
+
+<h3 id="Working_through_a_note_storage_example">Working through a note storage example</h3>
+
+<p>Here we'll run you through an example that allows you to store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of IDB as we go along.</p>
+
+<p>The app looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Each note has a title and some body text, each individually editable. The JavaScript code we'll go through below has detailed comments to help you understand what's going on.</p>
+
+<h3 id="Getting_started">Getting started</h3>
+
+<ol>
+ <li>First of all, make local copies of our <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css">style.css</a></code>, and <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js">index-start.js</a></code> files into a new directory on your local machine.</li>
+ <li>Have a look at the files. You'll see that the HTML is pretty simple: a web site with a header and footer, as well as a main content area that contains a place to display notes, and a form for entering new notes into the database. The CSS provides some simple styling to make it clearer what is going on. The JavaScript file contains five declared constants containing references to the {{htmlelement("ul")}} element the notes will be displayed in, the title and body {{htmlelement("input")}} elements, the {{htmlelement("form")}} itself, and the {{htmlelement("button")}}.</li>
+ <li>Rename your JavaScript file to <code>index.js</code>. You are now ready to start adding code to it.</li>
+</ol>
+
+<h3 id="Database_initial_set_up">Database initial set up</h3>
+
+<p>Now let's look at what we have to do in the first place, to actually set up a database.</p>
+
+<ol>
+ <li>
+  <p>Below the constant declarations, add the following lines:</p>
+
+  <pre class="brush: js   notranslate">// Create an instance of a db object for us to store the open database in
+let db;</pre>
+
+  <p>Here we are declaring a variable called <code>db</code> — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.</p>
+ </li>
+ <li>
+  <p>Next, add the following to the bottom of your code:</p>
+
+  <pre class="brush: js   notranslate">window.onload = function() {
+
+};</pre>
+
+  <p>We will write all of our subsequent code inside this <code>window.onload</code> event handler function, called when the window's {{event("load")}} event fires, to make sure we don't try to use IndexedDB functionality before the app has completely finished loading (it could fail if we don't).</p>
+ </li>
+ <li>
+  <p>Inside the <code>window.onload</code> handler, add the following:</p>
+
+  <pre class="brush: js   notranslate">// Open our database; it is created if it doesn't already exist
+// (see onupgradeneeded below)
+let request = window.indexedDB.open('notes_db', 1);</pre>
+
+  <p>This line creates a <code>request</code> to open version <code>1</code> of a database called <code>notes_db</code>. If this doesn't already exist, it will be created for you by subsequent code. You will see this request pattern used very often throughout IndexedDB. Database operations take time. You don't want to hang the browser while you wait for the results, so database operations are {{Glossary("asynchronous")}}, meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done.</p>
+
+  <p>To handle this in IndexedDB, you create a request object (which can be called anything you like — we called it <code>request</code> so it is obvious what it is for). You then use event handlers to run code when the request completes, fails, etc., which you'll see in use below.</p>
+
+  <div class="note">
+  <p><strong>Note</strong>: The version number is important. If you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the <code>onupgradeneeded</code> handler (see below), etc. We won't cover upgrading databases in this simple tutorial.</p>
+  </div>
+ </li>
+ <li>
+  <p>Now add the following event handlers just below your previous addition — again inside the <code>window.onload</code> handler:</p>
+
+  <pre class="brush: js   notranslate">// onerror handler signifies that the database didn't open successfully
+request.onerror = function() {
+  console.log('Database failed to open');
+};
+
+// onsuccess handler signifies that the database opened successfully
+request.onsuccess = function() {
+  console.log('Database opened successfully');
+
+  // Store the opened database object in the db variable. This is used a lot below
+  db = request.result;
+
+  // Run the displayData() function to display the notes already in the IDB
+  displayData();
+};</pre>
+
+  <p>The {{domxref("IDBRequest.onerror", "request.onerror")}} handler will run if the system comes back saying that the request failed. This allows you to respond to this problem. In our simple example, we just print a message to the JavaScript console.</p>
+
+  <p>The {{domxref("IDBRequest.onsuccess", "request.onsuccess")}} handler on the other hand will run if the request returns successfully, meaning the database was successfully opened. If this is the case, an object representing the opened database becomes available in the {{domxref("IDBRequest.result", "request.result")}} property, allowing us to manipulate the database. We store this in the <code>db</code> variable we created earlier for later use. We also run a custom function called <code>displayData()</code>, which displays the data in the database inside the {{HTMLElement("ul")}}. We run it now so that the notes already in the database are displayed as soon as the page loads. You'll see this defined later on.</p>
+ </li>
+ <li>
+  <p>Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupgradeneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:</p>
+
+  <pre class="brush: js   notranslate">// Setup the database tables if this has not already been done
+request.onupgradeneeded = function(e) {
+  // Grab a reference to the opened database
+  let db = e.target.result;
+
+  // Create an objectStore to store our notes in (basically like a single table)
+  // including a auto-incrementing key
+  let objectStore = db.createObjectStore('notes_os', { keyPath: 'id', autoIncrement:true });
+
+  // Define what data items the objectStore will contain
+  objectStore.createIndex('title', 'title', { unique: false });
+  objectStore.createIndex('body', 'body', { unique: false });
+
+  console.log('Database setup complete');
+};</pre>
+
+  <p>This is where we define the schema (structure) of our database; that is, the set of columns (or fields) it contains. Here we first grab a reference to the existing database from the <code>result</code> property of the event's target (<code>e.target.result</code>), which is the <code>request</code> object. This is equivalent to the line <code>db = request.result;</code> inside the <code>onsuccess</code> handler, but we need to do this separately here because the <code>onupgradeneeded</code> handler (if needed) will run before the <code>onsuccess</code> handler, meaning that the <code>db</code> value wouldn't be available if we didn't do this.</p>
+
+  <p>We then use {{domxref("IDBDatabase.createObjectStore()")}} to create a new object store inside our opened database called <code>notes_os</code>. This is equivalent to a single table in a conventional database system. We've given it the name notes, and also specified an <code>autoIncrement</code> key field called <code>id</code> — in each new record this will automatically be given an incremented value — the developer doesn't need to set this explicitly. Being the key, the <code>id</code> field will be used to uniquely identify records, such as when deleting or displaying a record.</p>
+
+  <p>We also create two other indexes (fields) using the {{domxref("IDBObjectStore.createIndex()")}} method: <code>title</code> (which will contain a title for each note), and <code>body</code> (which will contain the body text of the note).</p>
+ </li>
+</ol>
+
+<p>So with this simple database schema set up, when we start adding records to the database; each one will be represented as an object along these lines:</p>
+
+<pre class="brush: js   notranslate">{
+  title: "Buy milk",
+  body: "Need both cows milk and soy.",
+  id: 8
+}</pre>
+
+<h3 id="Adding_data_to_the_database">Adding data to the database</h3>
+
+<p>Now let's look at how we can add records to the database. This will be done using the form on our page.</p>
+
+<p>Below your previous event handler (but still inside the <code>window.onload</code> handler), add the following line, which sets up an <code>onsubmit</code> handler that runs a function called <code>addData()</code> when the form is submitted (when the submit {{htmlelement("button")}} is pressed leading to a successful form submission):</p>
+
+<pre class="brush: js   notranslate">// Create an onsubmit handler so that when the form is submitted the addData() function is run
+form.onsubmit = addData;</pre>
+
+<p>Now let's define the <code>addData()</code> function. Add this below your previous line:</p>
+
+<pre class="brush: js   notranslate">// Define the addData() function
+function addData(e) {
+  // prevent default - we don't want the form to submit in the conventional way
+  e.preventDefault();
+
+  // grab the values entered into the form fields and store them in an object ready for being inserted into the DB
+  let newItem = { title: titleInput.value, body: bodyInput.value };
+
+  // open a read/write db transaction, ready for adding the data
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+
+  // call an object store that's already been added to the database
+  let objectStore = transaction.objectStore('notes_os');
+
+  // Make a request to add our newItem object to the object store
+  let request = objectStore.add(newItem);
+  request.onsuccess = function() {
+    // Clear the form, ready for adding the next entry
+    titleInput.value = '';
+    bodyInput.value = '';
+  };
+
+  // Report on the success of the transaction completing, when everything is done
+  transaction.oncomplete = function() {
+    console.log('Transaction completed: database modification finished.');
+
+    // update the display of data to show the newly added item, by running displayData() again.
+    displayData();
+  };
+
+  transaction.onerror = function() {
+    console.log('Transaction not opened due to error');
+  };
+}</pre>
+
+<p>This is quite complex; breaking it down, we:</p>
+
+<ul>
+ <li>Run {{domxref("Event.preventDefault()")}} on the event object to stop the form actually submitting in the conventional manner (this would cause a page refresh and spoil the experience).</li>
+ <li>Create an object representing a record to enter into the database, populating it with values from the form inputs. note that we don't have to explicitly include an <code>id</code> value — as we explained earlier, this is auto-populated.</li>
+ <li>Open a <code>readwrite</code> transaction against the <code>notes_os</code> object store using the {{domxref("IDBDatabase.transaction()")}} method. This transaction object allows us to access the object store so we can do something to it, e.g. add a new record.</li>
+ <li>Access the object store using the {{domxref("IDBTransaction.objectStore()")}} method, saving the result in the <code>objectStore</code> variable.</li>
+ <li>Add the new record to the database using {{domxref("IDBObjectStore.add()")}}. This creates a request object, in the same fashion as we've seen before.</li>
+ <li>Add a bunch of event handlers to the <code>request</code> and the <code>transaction</code> to run code at critical points in the lifecycle. Once the request has succeeded, we clear the form inputs ready for entering the next note. Once the transaction has completed, we run the <code>displayData()</code> function again to update the display of notes on the page.</li>
+</ul>
+
+<h3 id="Displaying_the_data">Displaying the data</h3>
+
+<p>We've referenced <code>displayData()</code> twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition:</p>
+
+<pre class="brush: js   notranslate">// Define the displayData() function
+function displayData() {
+  // Here we empty the contents of the list element each time the display is updated
+  // If you didn't do this, you'd get duplicates listed each time a new note is added
+  while (list.firstChild) {
+    list.removeChild(list.firstChild);
+  }
+
+  // Open our object store and then get a cursor - which iterates through all the
+  // different data items in the store
+  let objectStore = db.transaction('notes_os').objectStore('notes_os');
+  objectStore.openCursor().onsuccess = function(e) {
+    // Get a reference to the cursor
+    let cursor = e.target.result;
+
+    // If there is still another data item to iterate through, keep running this code
+    if(cursor) {
+      // Create a list item, h3, and p to put each data item inside when displaying it
+      // structure the HTML fragment, and append it inside the list
+      const listItem = document.createElement('li');
+      const h3 = document.createElement('h3');
+      const para = document.createElement('p');
+
+      listItem.appendChild(h3);
+      listItem.appendChild(para);
+      list.appendChild(listItem);
+
+      // Put the data from the cursor inside the h3 and para
+      h3.textContent = cursor.value.title;
+      para.textContent = cursor.value.body;
+
+      // Store the ID of the data item inside an attribute on the listItem, so we know
+      // which item it corresponds to. This will be useful later when we want to delete items
+      listItem.setAttribute('data-note-id', cursor.value.id);
+
+      // Create a button and place it inside each listItem
+      const deleteBtn = document.createElement('button');
+      listItem.appendChild(deleteBtn);
+      deleteBtn.textContent = 'Delete';
+
+      // Set an event handler so that when the button is clicked, the deleteItem()
+      // function is run
+      deleteBtn.onclick = deleteItem;
+
+      // Iterate to the next item in the cursor
+      cursor.continue();
+    } else {
+      // Again, if list item is empty, display a 'No notes stored' message
+      if(!list.firstChild) {
+        const listItem = document.createElement('li');
+        listItem.textContent = 'No notes stored.';
+        list.appendChild(listItem);
+      }
+      // if there are no more cursor items to iterate through, say so
+      console.log('Notes all displayed');
+    }
+  };
+}</pre>
+
+<p>Again, let's break this down:</p>
+
+<ul>
+ <li>First we empty out the {{htmlelement("ul")}} element's content, before then filling it with the updated content. If you didn't do this, you'd end up with a huge list of duplicated content being added to with each update.</li>
+ <li>Next, we get a reference to the <code>notes_os</code> object store using {{domxref("IDBDatabase.transaction()")}} and {{domxref("IDBTransaction.objectStore()")}} like we did in <code>addData()</code>, except here we are chaining them together in one line.</li>
+ <li>The next step is to use {{domxref("IDBObjectStore.openCursor()")}} method to open a request for a cursor — this is a construct that can be used to iterate over the records in an object store. We chain an <code>onsuccess</code> handler on to the end of this line to make the code more concise — when the cursor is successfully returned, the handler is run.</li>
+ <li>We get a reference to the cursor itself (an {{domxref("IDBCursor")}} object) using let <code>cursor = e.target.result</code>.</li>
+ <li>Next, we check to see if the cursor contains a record from the datastore (<code>if(cursor){ ... }</code>) — if so, we create a DOM fragment, populate it with the data from the record, and insert it into the page (inside the <code>&lt;ul&gt;</code> element). We also include a delete button that, when clicked, will delete that note by running the <code>deleteItem()</code> function, which we will look at in the next section.</li>
+ <li>At the end of the <code>if</code> block, we use the {{domxref("IDBCursor.continue()")}} method to advance the cursor to the next record in the datastore, and run the content of the <code>if</code> block again. If there is another record to iterate to, this causes it to be inserted into the page, and then <code>continue()</code> is run again, and so on.</li>
+ <li>When there are no more records to iterate over, <code>cursor</code> will return <code>undefined</code>, and therefore the <code>else</code> block will run instead of the <code>if</code> block. This block checks whether any notes were inserted into the <code>&lt;ul&gt;</code> — if not, it inserts a message to say no note was stored.</li>
+</ul>
+
+<h3 id="Deleting_a_note">Deleting a note</h3>
+
+<p>As stated above, when a note's delete button is pressed, the note is deleted. This is achieved by the <code>deleteItem()</code> function, which looks like so:</p>
+
+<pre class="brush: js   notranslate">// Define the deleteItem() function
+function deleteItem(e) {
+  // retrieve the name of the task we want to delete. We need
+  // to convert it to a number before trying it use it with IDB; IDB key
+  // values are type-sensitive.
+  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
+
+  // open a database transaction and delete the task, finding it using the id we retrieved above
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+  let objectStore = transaction.objectStore('notes_os');
+  let request = objectStore.delete(noteId);
+
+  // report that the data item has been deleted
+  transaction.oncomplete = function() {
+    // delete the parent of the button
+    // which is the list item, so it is no longer displayed
+    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
+    console.log('Note ' + noteId + ' deleted.');
+
+    // Again, if list item is empty, display a 'No notes stored' message
+    if(!list.firstChild) {
+      let listItem = document.createElement('li');
+      listItem.textContent = 'No notes stored.';
+      list.appendChild(listItem);
+    }
+  };
+}</pre>
+
+<ul>
+ <li>The first part of this could use some explaining — we retrieve the ID of the record to be deleted using <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> — recall that the ID of the record was saved in a <code>data-note-id</code> attribute on the <code>&lt;li&gt;</code> when it was first displayed. We do however need to pass the attribute through the global built-in <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number()</a></code> object as it is of datatype string, and therefore wouldn't be recognized by the database, which expects a number.</li>
+ <li>We then get a reference to the object store using the same pattern we've seen previously, and use the {{domxref("IDBObjectStore.delete()")}} method to delete the record from the database, passing it the ID.</li>
+ <li>When the database transaction is complete, we delete the note's <code>&lt;li&gt;</code> from the DOM, and again do the check to see if the <code>&lt;ul&gt;</code> is now empty, inserting a note as appropriate.</li>
+</ul>
+
+<p>So that's it! Your example should now work.</p>
+
+<p>If you are having trouble with it, feel free to <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">check it against our live example</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">source code</a> also).</p>
+
+<h3 id="Storing_complex_data_via_IndexedDB">Storing complex data via IndexedDB</h3>
+
+<p>As we mentioned above, IndexedDB can be used to store more than just simple text strings. You can store just about anything you want, including complex objects such as video or image blobs. And it isn't much more difficult to achieve than any other type of data.</p>
+
+<p>To demonstrate how to do it, we've written another example called <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">IndexedDB video store</a> (see it <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">running live here also</a>). When you first run the example, it downloads all the videos from the network, stores them in an IndexedDB database, and then displays the videos in the UI inside {{htmlelement("video")}} elements. The second time you run it, it finds the videos in the database and gets them from there instead before displaying them — this makes subsequent loads much quicker and less bandwidth-hungry.</p>
+
+<p>Let's walk through the most interesting parts of the example. We won't look at it all — a lot of it is similar to the previous example, and the code is well-commented.</p>
+
+<ol>
+ <li>
+  <p>For this simple example, we've stored the names of the videos to fetch in an array of objects:</p>
+
+  <pre class="brush: js   notranslate">const videos = [
+  { 'name' : 'crystal' },
+  { 'name' : 'elf' },
+  { 'name' : 'frog' },
+  { 'name' : 'monster' },
+  { 'name' : 'pig' },
+  { 'name' : 'rabbit' }
+];</pre>
+ </li>
+ <li>
+  <p>To start with, once the database is successfully opened we run an <code>init()</code> function. This loops through the different video names, trying to load a record identified by each name from the <code>videos</code> database.</p>
+
+  <p>If each video is found in the database (easily checked by seeing whether <code>request.result</code> evaluates to <code>true</code> — if the record is not present, it will be <code>undefined</code>), its video files (stored as blobs) and the video name are passed straight to the <code>displayVideo()</code> function to place them in the UI. If not, the video name is passed to the <code>fetchVideoFromNetwork()</code> function to ... you guessed it — fetch the video from the network.</p>
+
+  <pre class="brush: js   notranslate">function init() {
+  // Loop through the video names one by one
+  for(let i = 0; i &lt; videos.length; i++) {
+    // Open transaction, get object store, and get() each video by name
+    let objectStore = db.transaction('videos_os').objectStore('videos_os');
+    let request = objectStore.get(videos[i].name);
+    request.onsuccess = function() {
+      // If the result exists in the database (is not undefined)
+      if(request.result) {
+        // Grab the videos from IDB and display them using displayVideo()
+        console.log('taking videos from IDB');
+        displayVideo(request.result.mp4, request.result.webm, request.result.name);
+      } else {
+        // Fetch the videos from the network
+        fetchVideoFromNetwork(videos[i]);
+      }
+    };
+  }
+}</pre>
+ </li>
+ <li>
+  <p>The following snippet is taken from inside <code>fetchVideoFromNetwork()</code> — here we fetch MP4 and WebM versions of the video using two separate {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} requests. We then use the {{domxref("blob()", "Body.blob()")}} method to extract each response's body as a blob, giving us an object representation of the videos that can be stored and displayed later on.</p>
+
+  <p>We have a problem here though — these two requests are both asynchronous, but we only want to try to display or store the video when both promises have fulfilled. Fortunately there is a built-in method that handles such a problem — {{jsxref("Promise.all()")}}. This takes one argument — references to all the individual promises you want to check for fulfillment placed in an array — and is itself promise-based.</p>
+
+  <p>When all those promises have fulfilled, the <code>all()</code> promise fulfills with an array containing all the individual fulfillment values. Inside the <code>all()</code> block, you can see that we then call the <code>displayVideo()</code> function like we did before to display the videos in the UI, then we also call the <code>storeVideo()</code> function to store those videos inside the database.</p>
+
+  <pre class="brush: js   notranslate">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =&gt;
+  response.blob()
+);
+let webmBlob = fetch('videos/' + video.name + '.webm').then(response =&gt;
+  response.blob()
+);
+
+// Only run the next code when both promises have fulfilled
+Promise.all([mp4Blob, webmBlob]).then(function(values) {
+  // display the video fetched from the network with displayVideo()
+  displayVideo(values[0], values[1], video.name);
+  // store it in the IDB using storeVideo()
+  storeVideo(values[0], values[1], video.name);
+});</pre>
+ </li>
+ <li>
+  <p>Let's look at <code>storeVideo()</code> first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a <code>readwrite</code> transaction and get a reference to our <code>videos_os</code> object store, create an object representing the record to add to the database, then simply add it using {{domxref("IDBObjectStore.add()")}}.</p>
+
+  <pre class="brush: js   notranslate">function storeVideo(mp4Blob, webmBlob, name) {
+  // Open transaction, get object store; make it a readwrite so we can write to the IDB
+  let objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
+  // Create a record to add to the IDB
+  let record = {
+    mp4 : mp4Blob,
+    webm : webmBlob,
+    name : name
+  }
+
+  // Add the record to the IDB using add()
+  let request = objectStore.add(record);
+
+  ...
+
+};</pre>
+ </li>
+ <li>
+  <p>Last but not least, we have <code>displayVideo()</code>, which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a <code>&lt;video&gt;</code> element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the values of our {{htmlelement("source")}} element's <code>src</code> attributes, and it works fine.</p>
+
+  <pre class="brush: js   notranslate">function displayVideo(mp4Blob, webmBlob, title) {
+  // Create object URLs out of the blobs
+  let mp4URL = URL.createObjectURL(mp4Blob);
+  let webmURL = URL.createObjectURL(webmBlob);
+
+  ...
+
+  const video = document.createElement('video');
+  video.controls = true;
+  const source1 = document.createElement('source');
+  source1.src = mp4URL;
+  source1.type = 'video/mp4';
+  const source2 = document.createElement('source');
+  source2.src = webmURL;
+  source2.type = 'video/webm';
+
+  ...
+}</pre>
+ </li>
+</ol>
+
+<h2 id="Offline_asset_storage">Offline asset storage</h2>
+
+<p>The above example already shows how to create an app that will store large assets in an IndexedDB database, avoiding the need to download them more than once. This is already a great improvement to the user experience, but there is still one thing missing — the main HTML, CSS, and JavaScript files still need to be downloaded each time the site is accessed, meaning that it won't work when there is no network connection.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p>
+
+<p>This is where <a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a> and the closely-related <a href="/en-US/docs/Web/API/Cache">Cache API</a> come in.</p>
+
+<p>A service worker is a JavaScript file that, simply put, is registered against a particular origin (web site, or part of a web site at a certain domain) when it is accessed by a browser. When registered, it can control pages available at that origin. It does this by sitting between a loaded page and the network and intercepting network requests aimed at that origin.</p>
+
+<p>When it intercepts a request, it can do anything you wish to it (see <a href="/en-US/docs/Web/API/Service_Worker_API#Other_use_case_ideas">use case ideas</a>), but the classic example is saving the network responses offline and then providing those in response to a request instead of the responses from the network. In effect, it allows you to make a web site work completely offline.</p>
+
+<p>The Cache API is a another client-side storage mechanism, with a bit of a difference — it is designed to save HTTP responses, and so works very well with service workers.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Service workers and Cache are supported in most modern browsers now. At the time of writing, Safari was still busy implementing it, but it should be there soon.</p>
+</div>
+
+<h3 id="A_service_worker_example">A service worker example</h3>
+
+<p>Let's look at an example, to give you a bit of an idea of what this might look like. We have created another version of the video store example we saw in the previous section — this functions identically, except that it also saves the HTML, CSS, and JavaScript in the Cache API via a service worker, allowing the example to run offline!</p>
+
+<p>See <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">IndexedDB video store with service worker running live</a>, and also <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">see the source code</a>.</p>
+
+<h4 id="Registering_the_service_worker">Registering the service worker</h4>
+
+<p>The first thing to note is that there's an extra bit of code placed in the main JavaScript file (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js">index.js</a>). First we do a feature detection test to see if the <code>serviceWorker</code> member is available in the {{domxref("Navigator")}} object. If this returns true, then we know that at least the basics of service workers are supported. Inside here we use the {{domxref("ServiceWorkerContainer.register()")}} method to register a service worker contained in the <code>sw.js</code> file against the origin it resides at, so it can control pages in the same directory as it, or subdirectories. When its promise fulfills, the service worker is deemed registered.</p>
+
+<pre class="brush: js   notranslate">  // Register service worker to control making site work offline
+
+  if('serviceWorker' in navigator) {
+    navigator.serviceWorker
+             .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
+             .then(function() { console.log('Service Worker Registered'); });
+  }</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The given path to the <code>sw.js</code> file is relative to the site origin, not the JavaScript file that contains the code. The service worker is at <code>https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. The origin is <code>https://mdn.github.io</code>, and therefore the given path has to be <code>/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. If you wanted to host this example on your own server, you'd have to change this accordingly. This is rather confusing, but it has to work this way for security reasons.</p>
+</div>
+
+<h4 id="Installing_the_service_worker">Installing the service worker</h4>
+
+<p>The next time any page under the service worker's control is accessed (e.g. when the example is reloaded), the service worker is installed against that page, meaning that it will start controlling it. When this occurs, an <code>install</code> event is fired against the service worker; you can write code inside the service worker itself that will respond to the installation.</p>
+
+<p>Let's look at an example, in the <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a> file (the service worker). You'll see that the install listener is registered against <code>self</code>. This <code>self</code> keyword is a way to refer to the global scope of the service worker from inside the service worker file.</p>
+
+<p>Inside the <code>install</code> handler we use the {{domxref("ExtendableEvent.waitUntil()")}} method, available on the event object, to signal that the browser shouldn't complete installation of the service worker until after the promise inside it has fulfilled successfully.</p>
+
+<p>Here is where we see the Cache API in action. We use the {{domxref("CacheStorage.open()")}} method to open a new cache object in which responses can be stored (similar to an IndexedDB object store). This promise fulfills with a {{domxref("Cache")}} object representing the <code>video-store</code> cache. We then use the {{domxref("Cache.addAll()")}} method to fetch a series of assets and add their responses to the cache.</p>
+
+<pre class="brush: js   notranslate">self.addEventListener('install', function(e) {
+ e.waitUntil(
+   caches.open('video-store').then(function(cache) {
+     return cache.addAll([
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
+     ]);
+   })
+ );
+});</pre>
+
+<p>That's it for now, installation done.</p>
+
+<h4 id="Responding_to_further_requests">Responding to further requests</h4>
+
+<p>With the service worker registered and installed against our HTML page, and the relevant assets all added to our cache, we are nearly ready to go. There is only one more thing to do, write some code to respond to further network requests.</p>
+
+<p>This is what the second bit of code in <code>sw.js</code> does. We add another listener to the service worker global scope, which runs the handler function when the <code>fetch</code> event is raised. This happens whenever the browser makes a request for an asset in the directory the service worker is registered against.</p>
+
+<p>Inside the handler we first log the URL of the requested asset. We then provide a custom response to the request, using the {{domxref("FetchEvent.respondWith()")}} method.</p>
+
+<p>Inside this block we use {{domxref("CacheStorage.match()")}} to check whether a matching request (i.e. matches the URL) can be found in any cache. This promise fulfills with the matching response if a match is found, or <code>undefined</code> if it isn't.</p>
+
+<p>If a match is found, we simply return it as the custom response. If not, we <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a> the response from the network and return that instead.</p>
+
+<pre class="brush: js   notranslate">self.addEventListener('fetch', function(e) {
+  console.log(e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});</pre>
+
+<p>And that is it for our simple service worker. There is a whole load more you can do with them — for a lot more detail, see the <a href="https://serviceworke.rs/">service worker cookbook</a>. And thanks to Paul Kinlan for his article <a href="https://developers.google.com/web/fundamentals/codelabs/offline/">Adding a Service Worker and Offline into your Web App</a>, which inspired this simple example.</p>
+
+<h4 id="Testing_the_example_offline">Testing the example offline</h4>
+
+<p>To test our <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">service worker example</a>, you'll need to load it a couple of times to make sure it is installed. Once this is done, you can:</p>
+
+<ul>
+ <li>Try unplugging your network/turning your Wifi off.</li>
+ <li>Select <em>File &gt; Work Offline</em> if you are using Firefox.</li>
+ <li>Go to the devtools, then choose <em>Application &gt; Service Workers</em>, then check the <em>Offline</em> checkbox if you are using Chrome.</li>
+</ul>
+
+<p>If you refresh your example page again, you should still see it load just fine. Everything is stored offline — the page assets in a cache, and the videos in an IndexedDB database.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's it for now. We hope you've found our rundown of client-side storage technologies useful.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web storage API</a></li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service worker API</a></li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/client-side_web_apis/index.html b/files/pt-br/learn/javascript/client-side_web_apis/index.html
new file mode 100644
index 0000000000..03477c04af
--- /dev/null
+++ b/files/pt-br/learn/javascript/client-side_web_apis/index.html
@@ -0,0 +1,52 @@
+---
+title: APIs web do lado cliente
+slug: Aprender/JavaScript/Client-side_web_APIs
+tags:
+  - API
+  - Aprender
+  - Artigos
+  - DOM
+  - Iniciante
+  - Mídia
+  - WebAPI
+  - dados
+  - graficos
+  - modulo
+translation_of: Learn/JavaScript/Client-side_web_APIs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Se você decidir usar JavaScript no lado do cliente para sites ou aplicativos, você rapidamente vai se deparar com as <strong>APIs</strong> - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou mesmo dados de outros sites ou serviços. Neste módulo, descobriremos o que são APIs, e como usar algumas das APIs mais comuns, que serão úteis no seu trabalho de desenvolvimento.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Para tirar o máximo proveito deste módulo, é recomendável a leitura dos módulos anteriores de JavaScript da série (<a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>, e <a href="/en-US/docs/Learn/JavaScript/Objects">Objetos javaScript </a>). Esses módulos envolvem bastante uso de API simples, e não é facil escrever exemplos Javascript do lado do cliente sem eles. Aqui, subimos um nível, assumindo o conhecimento da linguagem core JavaScript e explorando as APIs comuns da Web com um pouco mais de detalhes.</p>
+
+<p>Conhecimento básico de <a href="/en-US/docs/Learn/HTML">HTML</a> e <a href="/en-US/docs/Learn/CSS">CSS</a> serão utéis.</p>
+
+<div class="note">
+<p><strong>Notes </strong>Se você estiver trabalhando de um dispositivo que não permita a criação de arquivos. Você pode tentar editar os arquivos em um editor online como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introdução a APIs para a web</a></dt>
+ <dd>Primeiro, vamos começar com apis de alto nível — o que elas são, como elas funcionam, quando usar no seu código, como elas são estruturadas? Nós veremos diferentes tipos de classses principais e o que elas são, e quais são as possibilidades de uso.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulando documentos</a></dt>
+ <dd>Quando estiver codificando páginas da web ou aplicações, uma das coisas mais comuns que você irá fazer será manipular documentos da web de alguma forma. Normalmente isso é feito usando o Document Object Model (DOM), um conjunto de APIs para controlar o HTML e a informação sobre os estilos que usa fortemente o objeto {{domxref("Document")}}. Neste artigo vamos ver como usar o DOM em detalhes, juntamente com outras APIs interessantes que podem alterar seu ambiente de desenvolvimento de modos interessantes.</dd>
+ <dt><a href="/pt-BR/docs/">Buscando dados do servidor</a></dt>
+ <dd>Outra tarefa muito comum em websites modernos e aplicações é recuperar dados individuais de um servidor para atualizar partes de uma página sem ter que recarregar uma página inteira novamente. Este aparentemente pequeno detalhe tem tido um impacto enorme sobre o desempenho e comportamento de websites, desse modo neste artigo, vamos explicar esse conceito, e observar as tecnologias que tornam isso possível, tais como  {{domxref("XMLHttpRequest")}} e o <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a> </dt>
+ <dd>The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt>
+ <dd>The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (<a href="/en-US/docs/Web/SVG">SVG</a>) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ths article provides an introduction to the Canvas API, and further resources to allow you to learn more.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt>
+ <dd>HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt>
+ <dd>Modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.</dd>
+</dl>
+
+<div id="gtx-trans" style="position: absolute; left: 4px; top: 1072px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/pt-br/learn/javascript/client-side_web_apis/introduction/index.html b/files/pt-br/learn/javascript/client-side_web_apis/introduction/index.html
new file mode 100644
index 0000000000..dfab85143b
--- /dev/null
+++ b/files/pt-br/learn/javascript/client-side_web_apis/introduction/index.html
@@ -0,0 +1,274 @@
+---
+title: Introdução às Web APIs
+slug: Aprender/JavaScript/Client-side_web_APIs/Introdução
+translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">Primeiro, vamos ver as APIs a partir de um nível mais alto: o que são, como funcionam, como usá-las em seu código e como são estruturadas? Ainda, vamos entender quais são as principais classes de APIs e quais usos elas possuem.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>
+    <p>Conhecimentos básicos de computação, <a href="/pt-BR/docs/Aprender/HTML">HTML</a>, <a href="/pt-BR/docs/Aprender/CSS">CSS</a> e JavaScript (veja <a href="/pt-BR/docs/Learn/JavaScript/First_steps">primeiros passos</a>, <a href="/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">elementos construtivos</a> e <a href="/pt-BR/docs/Aprender/JavaScript/Objetos">introdução a objetos</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizar-se com APIs, o que elas podem fazer, e como usá-las em seu código.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_que_são_APIs">O que são APIs?</h2>
+
+<p>As APIs (Application Programming Interfaces) são construções disponíveis nas linguagens de programação que permitem a desenvolvedores criar funcionalidades complexas mais facilmente. Tais construções abstraem o código mais complexo, proporcionando o uso de sintaxes mais simples em seu lugar.</p>
+
+<p>Pense no seguinte exemplo: o uso de energia elétrica em sua casa ou apartamento. Quando você deseja utilizar um eletrodoméstico, você precisa somente ligar o aparelho na tomada. Não é preciso conectar diretamente o fio do aparelho diretamente na caixa de luz. Isso seria, além de muito ineficiente, difícil e perigoso de ser feito (caso você não seja eletricista).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p>
+
+<p><em>Fonte da imagem: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> por <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, retirado do Flickr.</em></p>
+
+<p>Da mesma forma, caso você queira programar gráficos em 3D, é muito mais fácil usar uma API escrita em linguagem de alto nível como JavaScript ou Python, do que escrever em código de mais baixo nível (C ou C++) que controla diretamente a GPU ou outras funções gráficas.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: para mais informações, consulte o <a href="/pt-BR/docs/Glossario/API">termo API</a> no glossário.</p>
+</div>
+
+<h3 id="APIs_JavaScript_client-side">APIs JavaScript client-side</h3>
+
+<p>A linguagem JavaScript, especialmente client-side, possui diversas APIs disponíveis. Elas não fazem parte da linguagem em si, mas são escritas sobre o <em>core </em>da linguagem JavaScript, fornecendo superpoderes para serem utilizados em seu código. Geralmente, tais APIs fazem parte de uma das seguintes categorias:</p>
+
+<ul>
+ <li><strong>APIs de navegadores: </strong>fazem parte do seu navegador web, sendo capazes de expor dados do navegador e do ambiente ao redor do computador circundante, além de fazer coisas úteis com esses dados. Por exemplo, a <a href="/pt-BR/docs/Web/API/API_Web_Audio">API Web Áudio</a> fornece construções JavaScript simples para manipular áudio em seu navegador - pegar uma faixa de áudio, alterar o volume dela, aplicar efeitos, etc. Por trás dos panos, o navegador utiliza códigos complexos de baixo nível (ex: C++) para realizar o processamento de áudio de fato. Como foi dito anteriormente, essa complexidade toda é abstraída de você pela API. </li>
+ <li><strong>APIs de terceiros:</strong> geralmente, não fazem parte do navegador e você precisa recuperar seu código e suas informações de outro local da web. A <a href="https://developer.twitter.com/en/docs">API do Twitter</a>, por exemplo, permite mostrar os seus últimos tweets no seu site. Ela fornece um conjunto de construções especiais para ser usado de maneira a consultar o serviço do Twitter e retornar informações específicas.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<h3 id="Relacionamento_entre_JavaScript_APIs_e_outras_ferramentas_JavaScript">Relacionamento entre JavaScript, APIs, e outras ferramentas JavaScript</h3>
+
+<p>Na seção anterior, abordamos as APIs JavaScript client-side e como elas se relacionam com a linguagem JavaScript. Esse ponto merece uma revisão e também uma breve menção de como outras ferramentas JavaScript encaixam-se nesse contexto:</p>
+
+<ul>
+ <li>JavaScript — linguagem de alto nível, embutida em navegadores, que permite implementar funcionalidades em páginas web/aplicativos. A linguagem também está disponível em outros ambientes de programação, tais como o <a href="/pt-BR/docs/Learn/Server-side/Express_Nodejs/Introdução">Node</a>.</li>
+ <li>APIs de navegadores — construções presentes no navegador, as quais são baseadas em linguagem JavaScript e permitem a implementação de funcionalidades de uma maneira mais fácil.</li>
+ <li>APIs de terceiros — construções presentes em plataformas de terceiros (ex: Twitter, Facebook), que permitem o uso de alguma funcionalidade da plataforma em suas páginas na web. Um exemplo é a possibilidade de mostrar os últimos tweets em sua página.</li>
+ <li>Bibliotecas JavaScript — em geral, um ou mais arquivos JavaScript contendo<a href="/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos/Functions#Funções_personalizadas"> funções personalizadas</a>, as quais podem ser usadas em sua página web para acelerar ou permitir escrever funcionalidades comuns. Exemplos: jQuery, Mootools e React.</li>
+ <li>Frameworks JavaScript — uma evolução das bibliotecas. Frameworks JavaScript (ex: Angular e Ember), normalmente, são pacotes de tecnologias HTML, CSS, JavaScript e outras, que você instala e usa para escrever uma aplicação web completa do zero. A principal diferença entre uma biblioteca e um framework é a inversão de controle ("Inversion of Control"). Quando um método de uma biblioteca é chamado, a pessoa desenvolvedora está no controle. Em um framework, o controle inverte-se: é o framework que chama o código da pessoa desenvolvedora.</li>
+</ul>
+
+<h2 id="O_que_as_APIs_podem_fazer">O que as APIs podem fazer?</h2>
+
+<p>Existem muitas APIs disponíveis, nos navegadores modernos, que permitem uma liberdade de ação na hora de codar. Você pode conferir isso na <a href="https://developer.mozilla.org/pt-BR/docs/Web/API">página de referência das APIs da MDN</a>.</p>
+
+<h3 id="APIs_comuns_de_navegadores">APIs comuns de navegadores</h3>
+
+<p>As categorias mais comuns de APIs de navegadores que você irá utilizar (e que veremos em detalhes neste módulo), são:</p>
+
+<ul>
+ <li><strong>APIs para manipular documentos </strong>carregados no navegador. O exemplo mais óbvio é a <a href="https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM">API DOM (Document Object Model)</a>, que permite manipular HTML e CSS — criando, removendo a alterando o HTML, aplicando dinamicamente novos estilos a sua página, etc. Toda vez que você vê uma janela pop-up em uma página, ou um novo conteúdo é mostrado, o DOM está em ação. Para saber mais sobre estes tipos de API, leia <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulando documentos</a>.</li>
+ <li><strong>APIs</strong><strong> que buscam dados no servidor</strong> para atualizar pequenas seções da página, por conta própria, são bastante usadas. Isso, a princípio, parece ser um detalhe pequeno, mas tem um impacto enorme na performance e no comportamento dos sites. Se você precisa atualizar a cotação de uma ação ou listar novas histórias disponíveis, a possibilidade de fazer isso instantaneamente sem precisar atualizar a página dá a impressão de um site muito mais responsivo. Entre as APIs que tornam isso possível, podemos destacar o <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> e a <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API">API Fetch</a>. Você pode também encontrar o termo <strong>Ajax</strong>, que descreve essa técnica. Para saber mais sobre essas APIs, leia <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>.</li>
+ <li><strong>APIs para desenhar e manipular elementos gráficos</strong> são completamente suportados nos browsers — os mais comuns são <a href="/en-US/docs/Web/API/Canvas_API">Canvas</a> e <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, que possibilitam que você atualize os dados dos pixels em um elemento HTML de maneira programática. {{htmlelement("canvas")}} elemento para criar cenas 2d e 3d. Por exemplo, você poderia dezenhar formas como retangulos e circulos, importar uma imagem para o canvas, e aplicar um filtro para sepia ou grayscale usando o Canvas API, ou criar uma complexa cena 3d com brilho e texturas usando WebGL. Essas APIs são frequentemente combinar com APIs para criar loops de animações(como {{domxref("window.requestAnimationFrame()")}}) e outros para constantemente lançar cenas like como cartoons e jogos.</li>
+ <li><strong><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a></strong> como {{domxref("HTMLMediaElement")}}, a <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, e <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> permiten a você fazer coisas realmente interessantes com multimedia como a criação personalizada controles de UI para executar audio e video, exibindo faixas de texto como legendas e legendas ocultas junto com seus vídeos, capturando vídeo de sua câmera da web para ser manipulado por meio de uma tela (veja acima) ou exibido no computador de outra pessoa em uma webconferência,ou adicionar efeitos às trilhas de áudio (como ganho, distorção, panorâmica, etc.).</li>
+ <li><strong>Device APIs</strong> São basicamente APIs para manipulação e recuperação de dados de hardware de dispositivo moderno de uma forma que seja útil para aplicativos da web.Já falamos sobre a Geolocation API acessando o dispositivo dados de localização para que você possa marcar sua posição em um mapa.Outros exemplos incluem informar ao usuário que uma atualização útil está disponível em um aplicativo da web por meio de notificações do sistema(Veja em <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a>)ou hardware de vibração(Veja em <a href="/en-US/docs/Web/API/Vibration_API">Vibration API</a>).</li>
+ <li><strong>Client-side storage APIs</strong> estão se tornando muito mais difundidos em navegadores da web - a capacidade de armazenar dados no lado do cliente é muito útil se você quer criar um app que vai salvar seu estado entre carregamentos de página, e talvez até funcione quando o dispositivo estiver offline. Existem várias opções disponíveis, por exemplo, armazenamento simples de nome / valor com o <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>, e armazenamento de dados tabulares mais complexos com o <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>.</li>
+</ul>
+
+<h3 id="APIs_comuns_de_terceiros">APIs comuns de terceiros</h3>
+
+<p>APIs de terceiros são bastante variadas. Dentre as mais populares, que você eventualmente irá utilizar em algum momento, podermos destacar:</p>
+
+<ul>
+ <li>A <a href="https://dev.twitter.com/overview/documentation">Twitter API</a>, que permite coisas como mostrar seu últimos tweets no seu website.</li>
+ <li>O <a href="https://developers.google.com/maps/">Google Maps API</a> permite que você faça todo tipo de coisa com mapas nas suas páginas web (funnily enough, it also powers Google Maps). This is now an entire suite of APIs, which handle a wide variety of tasks, as evidenced by the <a href="https://developers.google.com/maps/documentation/api-picker">Google Maps API Picker</a>.</li>
+ <li>The <a href="https://developers.facebook.com/docs/">Facebook suite of APIs</a> enables you to use various parts of the Facebook ecosystem to benefit your app, for example by providing app login using Facebook login, accepting in-app payments, rolling out targetted ad campaigns, etc.</li>
+ <li>The <a href="https://developers.google.com/youtube/">YouTube API</a>, which allows you to embed YouTube videos on your site, search YouTube, build playlists, and more.</li>
+ <li>The <a href="https://www.twilio.com/">Twilio API</a>, which provides a framework for building voice and video call functionality into your app, sending SMS/MMS from your apps, and more.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Você pode encontrar informações sobre muitas outras APIs de terceiros no <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>.</p>
+</div>
+
+<h2 id="Como_as_APIs_funcionam">Como as APIs funcionam?</h2>
+
+<p>APIs JavaScript possuem pequenas diferenças mas, em geral, possuem funcionalidades em comum e operam de maneira semelhante.</p>
+
+<h3 id="Elas_são_baseadas_em_objetos">Elas são baseadas em objetos</h3>
+
+<p>Your code interacts with APIs using one or more <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>, which serve as containers for the data the API uses (contained in object properties), and the functionality the API makes available (contained in object methods).</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are not already familiar with how objects work, you should go back and work through our <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a> module before continuing.</p>
+</div>
+
+<p>Let's return to the example of the Geolocation API — this is a very simple API that consists of a few simple objects:</p>
+
+<ul>
+ <li>{{domxref("Geolocation")}}, which contains three methods for controlling the retrieval of geodata.</li>
+ <li>{{domxref("Position")}}, which represents the position of a device at a given time — this contains a {{domxref("Coordinates")}} object that contains the actual position information, plus a timestamp representing the given time.</li>
+ <li>{{domxref("Coordinates")}}, which contains a whole lot of useful data on the device position, including latitude and longitude, altitude, velocity and direction of movement, and more.</li>
+</ul>
+
+<p>So how do these objects interact? If you look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> example (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">see it live also</a>), you'll see the following code:</p>
+
+<pre class="brush: js notranslate">navigator.geolocation.getCurrentPosition(function(position) {
+  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+  var myOptions = {
+    zoom: 8,
+    center: latlng,
+    mapTypeId: google.maps.MapTypeId.TERRAIN,
+    disableDefaultUI: true
+  }
+  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+});</pre>
+
+<div class="note">
+<p><strong>Note</strong>: When you first load up the above example, you should be given a dialog box asking if you are happy to share your location with this application (see the {{anch("They have additional security mechanisms where appropriate")}} section later in the article). You need to agree to this to be able to plot your location on the map. If you still can't see the map, you may need to set your permissions manually; you can do this in various ways depending on what browser you are using; for example in Firefox go to &gt; <em>Tools</em> &gt; <em>Page Info</em> &gt; <em>Permissions</em>, then change the setting for <em>Share Location</em>; in Chrome go to <em>Settings</em> &gt; <em>Privacy</em> &gt; <em>Show advanced settings</em> &gt; <em>Content settings</em> then change the settings for <em>Location</em>.</p>
+</div>
+
+<p>We first want to use the {{domxref("Geolocation.getCurrentPosition()")}} method to return the current location of our device. The browser's {{domxref("Geolocation")}} object is accessed by calling the {{domxref("Navigator.geolocation")}} property, so we start off by using</p>
+
+<pre class="brush: js notranslate">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre>
+
+<p>Isso é equivalente a fazer algo como</p>
+
+<pre class="brush: js notranslate">var myGeo = navigator.geolocation;
+myGeo.getCurrentPosition(function(position) { ... });</pre>
+
+<p>But we can use the dot syntax to chain our property/method access together, reducing the number of lines we have to write.</p>
+
+<p>The {{domxref("Geolocation.getCurrentPosition()")}} method only has a single mandatory parameter, which is an anonymous function that will run when the device's current position has been successfully retrieved. This function itself has a parameter, which contains a {{domxref("Position")}} object representing the current position data.</p>
+
+<div class="note">
+<p><strong>Note</strong>: A function that is taken by another function as an argument is called a <a href="/en-US/docs/Glossary/Callback_function">callback function</a>.</p>
+</div>
+
+<p>This pattern of invoking a function only when an operation has been completed is very common in JavaScript APIs — making sure one operation has completed before trying to use the data the operation returns in another operation. These are called <strong><a href="/en-US/docs/Glossary/Asynchronous">asynchronous</a> operations</strong>. Because getting the device's current position relies on an external component (the device's GPS or other geolocation hardware), we can't guarantee that it will be done in time to just immediately use the data it returns. Therefore, something like this wouldn't work:</p>
+
+<pre class="brush: js example-bad notranslate">var position = navigator.geolocation.getCurrentPosition();
+var myLatitude = position.coords.latitude;</pre>
+
+<p>If the first line had not yet returned its result, the second line would throw an error, because the position data would not yet be available. For this reason, APIs involving asynchronous operations are designed to use {{glossary("callback function")}}s, or the more modern system of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>, which were made available in ECMAScript 6 and are widely used in newer APIs.</p>
+
+<p>We are combining the Geolocation API with a third party API — the Google Maps API — which we are using to plot the location returned by <code>getCurrentPosition()</code> on a Google Map. We make this API available on our page by linking to it — you'll find this line in the HTML:</p>
+
+<pre class="brush: html notranslate">&lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"&gt;&lt;/script&gt;</pre>
+
+<p>To use the API, we first create a <code>LatLng</code> object instance using the <code>google.maps.LatLng()</code> constructor, which takes our geolocated {{domxref("Coordinates.latitude")}} and {{domxref("Coordinates.longitude")}} values as parameters:</p>
+
+<pre class="brush: js notranslate">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre>
+
+<p>This object is itself set as the value of the <code>center</code> property of an options object that we've called <code>myOptions</code>. We then create an object instance to represent our map by calling the <code>google.maps.Map()</code> constructor, passing it two parameters — a reference to the {{htmlelement("div")}} element we want to render the map on (with an ID of <code>map_canvas</code>), and the options object we defined just above it.</p>
+
+<pre class="brush: js notranslate">var myOptions = {
+  zoom: 8,
+  center: latlng,
+  mapTypeId: google.maps.MapTypeId.TERRAIN,
+  disableDefaultUI: true
+}
+
+var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);</pre>
+
+<p>With this done, our map now renders.</p>
+
+<p>This last block of code highlights two common patterns you'll see across many APIs. First of all, API objects commonly contain constructors, which are invoked to create instances of those objects that you'll use to write your program. Second, API objects often have several options available that can be tweaked to get the exact environment you want for your program. API constructors commonly accept options objects as parameters, which is where you'd set such options.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Don't worry if you don't understand all the details of this example immediately. We'll cover using third party APIs in a lot more detail in a future article.</p>
+</div>
+
+<h3 id="Possuem_pontos_de_entrada_reconhecíveis">Possuem pontos de entrada reconhecíveis</h3>
+
+<p>When using an API, you should make sure you know where the entry point is for the API. In The Geolocation API, this is pretty simple — it is the {{domxref("Navigator.geolocation")}} property, which returns the browser's {{domxref("Geolocation")}} object that all the useful geolocation methods are available inside.</p>
+
+<p>The Document Object Model (DOM) API has an even simpler entry point — its features tend to be found hanging off the {{domxref("Document")}} object, or an instance of an HTML element that you want to affect in some way, for example:</p>
+
+<pre class="brush: js notranslate">var em = document.createElement('em'); // create a new em element
+var para = document.querySelector('p'); // reference an existing p element
+em.textContent = 'Hello there!'; // give em some text content
+para.appendChild(em); // embed em inside para</pre>
+
+<p>Other APIs have slightly more complex entry points, often involving creating a specific context for the API code to be written in. For example, the Canvas API's context object is created by getting a reference to the {{htmlelement("canvas")}} element you want to draw on, and then calling its {{domxref("HTMLCanvasElement.getContext()")}} method:</p>
+
+<pre class="brush: js notranslate">var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');</pre>
+
+<p>Anything that we want to do to the canvas is then achieved by calling properties and methods of the content object (which is an instance of {{domxref("CanvasRenderingContext2D")}}), for example:</p>
+
+<pre class="brush: js notranslate">Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this code in action in our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">bouncing balls demo</a> (see it <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">running live</a> also).</p>
+</div>
+
+<h3 id="Usam_eventos_para_lidar_com_mudanças_de_estado">Usam eventos para lidar com mudanças de estado</h3>
+
+<p>We already discussed events earlier on in the course, in our <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a> article — this article looks in detail at what client-side web events are and how they are used in your code. If you are not already familiar with how client-side web API events work, you should go and read this article first before continuing.</p>
+
+<p>Some web APIs contain no events, but some contain a number of events. The handler properties that allow us to run functions when events fire are generally listed in our reference material in separate "Event handlers" sections. As a simple example, instances of the <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> object (each one represents an HTTP request to the server to retrieve a new resource of some kind) have a number of events available on them, for example the <code>load</code> event is fired when a response has been successfully returned containing the requested resource, and it is now available.</p>
+
+<p>O código seguinte fornece um exemplo simples de como isso seria utilizado:</p>
+
+<pre class="brush: js notranslate">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.responseType = 'json';
+request.send();
+
+request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this code in action in our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> example (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">see it live</a> also).</p>
+</div>
+
+<p>The first five lines specify the location of resource we want to fetch, create a new instance of a request object using the <code>XMLHttpRequest()</code> constructor, open an HTTP <code>GET</code> request to retrieve the specified resource, specify that the response should be sent in JSON format, then send the request.</p>
+
+<p>The <code>onload</code> handler function then specifies what we do with the response. We know the response will be successfully returned and available after the load event has required (unless an error occurred), so we save the response containing the returned JSON in the <code>superHeroes</code> variable, then pass it to two different functions for further processing.</p>
+
+<h3 id="Possuem_mecanismos_de_segurança_adicionais_quando_apropriado">Possuem mecanismos de segurança adicionais, quando apropriado</h3>
+
+<p>WebAPI features are subject to the same security considerations as JavaScript and other web technologies (for example <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>), but they sometimes have additional security mechanisms in place. For example, some of the more modern WebAPIs will only work on pages served over HTTPS due to them transmitting potentially sensitive data (examples include <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> and <a href="/en-US/docs/Web/API/Push_API">Push</a>).</p>
+
+<p>In addition, some WebAPIs request permission to be enabled from the user once calls to them are made in your code. As an example, you may have noticed a dialog like the following when loading up our earlier <a href="/en-US/docs/Web/API/Geolocation">Geolocation</a> example:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14313/location-permission.png" style="border-style: solid; border-width: 1px; display: block; height: 188px; margin: 0px auto; width: 413px;"></p>
+
+<p>The <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> asks for permission in a similar fashion:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>These permission prompts are given to users for security — if they weren't in place, then sites could start secretly tracking your location without you knowing it, or spamming you with a lot of annoying notifications.</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Ao chegar aqui, você deve ter uma boa ideia do que são APIs, como funcionam e o que você pode fazer com elas em seu código JavaScript. Além do mais, você deve estar ansioso(a) para colocar a mão na massa e trabalhar com APIs. Na sequência, iremos ver como manipular documentos com o DOM (Document Object Model).</p>
+
+<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/pt-br/learn/javascript/client-side_web_apis/manipulating_documents/index.html
new file mode 100644
index 0000000000..544deb8960
--- /dev/null
+++ b/files/pt-br/learn/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -0,0 +1,140 @@
+---
+title: JavaScript e CSS
+slug: Web/CSS/Getting_Started/JavaScript
+translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+translation_of_original: Web/Guide/CSS/Getting_started/JavaScript
+---
+<p>{{ CSSTutorialTOC() }}</p>
+<p>Esta é a pirmeira sessão da Parte II do <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">Tutorial de CSS</a>. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.</p>
+<p>Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.</p>
+<p>Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.</p>
+<p>Sessão Anterior (da Parte I): <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br>
+  Próxima sessão: <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p>
+<h3 id="Information:_JavaScript" name="Information:_JavaScript">Informação: JavaScript</h3>
+<p>JavaScript é um <em>programming language</em>. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.</p>
+<p>JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica</p>
+<p>Há três formas de fazer isso:</p>
+<ul>
+  <li>Trabalhando com lista de documentos de stylesheets—por exemplo: adicionando, removendo ou adicionando uma stylesheet.</li>
+  <li>Trabalhando com as regras em uma stylesheet—por exemplo: adicionando, removendo ou modificando uma regra.</li>
+  <li>Trabalhando com um documento individual na DOM—modificando seu estilo independentemente do stylesheetsdo documento.</li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+  <caption>
+    Mais detalhes</caption>
+  <tbody>
+    <tr>
+      <td>Para mais informações sobre JavaScript, veja a página <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> nesta wiki.</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">Ação: Uma demonstração de  JavaScript</h3>
+<p>Faça um novo documento em HTML, <code>doc5.html</code>. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:</p>
+<div style="width: 48em;">
+  <pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/title&gt;
+&lt;link rel="stylesheet" type="text/css" href="style5.css" /&gt;
+&lt;script type="text/javascript" src="script5.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;h1&gt;JavaScript sample&lt;/h1&gt;
+
+&lt;div id="square"&gt;&lt;/div&gt;
+
+&lt;button type="button" onclick="doDemo(this);"&gt;Click Me&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+<p>Crie um novo arquivo  CSS, <code>style5.css</code>. Copie e cole o conteúdo daqui:</p>
+<div style="width: 48em;">
+  <pre class="brush:css;">/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+}
+
+button {
+  padding: .5em 2em;
+}
+</pre>
+</div>
+<p>Crie um novo arquivo de texto, <code>script5.js</code>. Coie e cole o conteúdo daqui:</p>
+<div style="width: 48em;">
+  <pre class="brush:js;">// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "#fa4";
+  button.setAttribute("disabled", "true");
+  setTimeout(clearDemo, 2000, button);
+}
+
+function clearDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "transparent";
+  button.removeAttribute("disabled");
+}
+</pre>
+</div>
+<p>Abra o documento no seu Browser e pressione o botão.</p>
+<p>Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:</p>
+<table>
+  <tbody>
+    <tr>
+      <td style="padding-right: 2em;">
+        <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
+          <tbody>
+            <tr>
+              <td>
+                <p><strong>JavaScript demonstration</strong></p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+      <td>
+        <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
+          <tbody>
+            <tr>
+              <td>
+                <p><strong>JavaScript demonstration</strong></p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<div class="note">
+  <strong>Notas importantes </strong>sobre esta demonstração:
+  <ul>
+    <li>Os links do documento HTML document linca a como usual, e também linca o script.</li>
+    <li>O script trabalha com elementos individuais no DOM. Ele modifica o square's style diretamente. Ele modifica o estilo dos botões indiretamente mudando um atributo.</li>
+    <li>Em JavaScript, <code>document.getElementById("square")</code> é similar em função ao seletor CSS <code>#square</code>.</li>
+    <li>Em JavaScript, <code>backgroundColor</code> corresponde à propriedade CSS<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">background-color</code><span style="line-height: 1.5em;">. JavaScript não permite hífens em nomes, então "camelCase" é usada no lugar dele.</span></li>
+    <li>Seu browser tem uma regra built-in CSS para<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">button{{ mediawiki.external('disabled=\"true\"') }}</code><span style="line-height: 1.5em;"> ela muda a aparência dos botões quando está disabilitado.</span></li>
+  </ul>
+</div>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
+  <caption>
+    Desafio</caption>
+  <tbody>
+    <tr>
+      <td>
+        <p>Mude o script e então o <span style="line-height: inherit;">square salta para a direita em 20 em quando muda as cores, e salta de volta depois.</span></p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">Veja a solução deste desafio.</a></p>
+<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.428em; line-height: inherit;">O que vem agora?</span></p>
+<p>Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Di</a>scussão.</p>
+<p>Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras <span style="line-height: inherit;">stylesheets) para selecionar elementos. A próxima página demonstra isso: </span><strong style="line-height: inherit;"><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p>
diff --git a/files/pt-br/learn/javascript/first_steps/matematica/index.html b/files/pt-br/learn/javascript/first_steps/math/index.html
index fce74528f7..fce74528f7 100644
--- a/files/pt-br/learn/javascript/first_steps/matematica/index.html
+++ b/files/pt-br/learn/javascript/first_steps/math/index.html
diff --git a/files/pt-br/learn/javascript/first_steps/gerador_de_historias_bobas/index.html b/files/pt-br/learn/javascript/first_steps/silly_story_generator/index.html
index cc8a8cc542..cc8a8cc542 100644
--- a/files/pt-br/learn/javascript/first_steps/gerador_de_historias_bobas/index.html
+++ b/files/pt-br/learn/javascript/first_steps/silly_story_generator/index.html
diff --git a/files/pt-br/learn/javascript/first_steps/teste_suas_habilidades_colon__variaveis/index.html b/files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.html
index 1a14c86630..1a14c86630 100644
--- a/files/pt-br/learn/javascript/first_steps/teste_suas_habilidades_colon__variaveis/index.html
+++ b/files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.html
diff --git a/files/pt-br/learn/javascript/first_steps/variáveis/index.html b/files/pt-br/learn/javascript/first_steps/variables/index.html
index 1afd436622..1afd436622 100644
--- a/files/pt-br/learn/javascript/first_steps/variáveis/index.html
+++ b/files/pt-br/learn/javascript/first_steps/variables/index.html
diff --git a/files/pt-br/learn/javascript/first_steps/o_que_e_javascript/index.html b/files/pt-br/learn/javascript/first_steps/what_is_javascript/index.html
index 771541b047..771541b047 100644
--- a/files/pt-br/learn/javascript/first_steps/o_que_e_javascript/index.html
+++ b/files/pt-br/learn/javascript/first_steps/what_is_javascript/index.html
diff --git a/files/pt-br/learn/javascript/howto/index.html b/files/pt-br/learn/javascript/howto/index.html
new file mode 100644
index 0000000000..c06dbd4d3f
--- /dev/null
+++ b/files/pt-br/learn/javascript/howto/index.html
@@ -0,0 +1,290 @@
+---
+title: Solve common problems in your JavaScript code
+slug: Aprender/JavaScript/Howto
+translation_of: Learn/JavaScript/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Os links a seguir apontam soluções para problemas comuns do dia a dia, você precisará consertar em ordem para que seu código javascript execute corretamente.</p>
+
+<h2 id="Erros_comuns_de_iniciantes">Erros comuns de iniciantes</h2>
+
+<h3 id="Digitação_correta_and_casing">Digitação correta and casing</h3>
+
+<p>Se o seu código não funciona e/ou se seu navegador indicar que algo está indefinido, verifique se você declarou todas os nomes de suas variáveis, nomes de funções, etc. corretamente.</p>
+
+<p>Algumas funções comuns dos navegadores que causam problema são:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Correto</th>
+   <th scope="col">Incorreto</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>getElementsByTagName()</code></td>
+   <td><code>getElementbyTagName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementsByName()</code></td>
+   <td><code>getElementByName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementsByClassName()</code></td>
+   <td><code>getElementByClassName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementById()</code></td>
+   <td><code>getElementsById()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Posições_de_ponto_e_vírgula">Posições de ponto e vírgula</h3>
+
+<p>Você precisa ter certeza que você não colocou nenhum ponto e vírgula incorretamente. Por exemplo:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Correct</th>
+   <th scope="col">Wrong</th>
+  </tr>
+  <tr>
+   <td><code>elem.style.color = 'red';</code></td>
+   <td><code>elem.style.color = 'red;'</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Funções">Funções</h3>
+
+<p>Há uma série de coisas que podem dar errado com funções</p>
+
+<p>Um dos erros mais comuns é declarar a função, mas não chama-la em lugar nenhum. Por exemplo:</p>
+
+<pre class="brush: js">function myFunction() {
+  alert('This is my function.');
+};</pre>
+
+<p>Este código não fará nada a menos que você o chame, por exemplo com</p>
+
+<pre class="brush: js">myFunction();</pre>
+
+<h4 id="Escopo_da_função">Escopo da função</h4>
+
+<p>Lembre-se que <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">funções tem seu próprio escopo</a> — você não pode acessar um conjunto de valores de variáveis ​​dentro de uma função fora da função, a não ser que você tenha declarado a variável globalmente (i.e. não dentro de nenhuma função), ou retorne o valor or <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">retorne o valor</a> fora da função</p>
+
+<h4 id="Executar_o_código_antes_de_uma_declaração_de_retorno">Executar o código antes de uma declaração de retorno</h4>
+
+<p>Remember also that when you return a value out of a function, the JavaScript interpreter exits the function — no code declared after the return statement will run.</p>
+
+<p>In fact, some browsers (like Firefox) will give you an error message in the developer console if you have code after a return statement. Firefox gives you "unreachable code after return statement".</p>
+
+<h3 id="Object_notation_versus_normal_assignment">Object notation versus normal assignment</h3>
+
+<p>When you assign something normally in JavaScript, you use a single equals sign, e.g.:</p>
+
+<pre class="brush: js">var myNumber = 0;</pre>
+
+<p>This doesn't work in <a href="/en-US/docs/Learn/JavaScript/Objects">Objects</a>, however — with objects you need to separate member names from their values using colons, and separate each member with a comma, for example:</p>
+
+<pre class="brush: js">var myObject = {
+  name : 'Chris',
+  age : 38
+}</pre>
+
+<h2 id="Definições_básicas">Definições básicas</h2>
+
+<div class="column-container">
+<div class="column-half">
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition">O que é Javascript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable">O que é uma variável?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">O que são strings?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array">O que é um vetor?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">O que é um laço?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">O que é uma função?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">O que é um evento?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">O que é um objeto?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON">O que é JSON?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs">O que é uma web API?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">O que é o DOM?</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Casos_de_uso_básicos">Casos de uso básicos</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Geral">Geral</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page">Como adicionar JavasScript para sua página?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments">Como adicionar comentários em um código Javascript?</a></li>
+</ul>
+
+<h3 id="Variáveis">Variáveis</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">Como você declara uma variável?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">Como você inicializa uma variável com um valor?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">Como você atualiza o valor de uma variável</a> (ver também <a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">Operadores de atribuição</a>)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Variable_types">Quais tipos de dados os valores podem ter em JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">O que 'fracamente tipada' significa?</a></li>
+</ul>
+
+<h3 id="Matemática">Matemática</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers">Quais tipos de números você tem que lidar no desenvolvimento web?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">Como você faz matemática básica em JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">Qual a precedência do operador, e como isso é tratado em JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">Como você incrementa e decrementa valores em JavaScript?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">Como você compara valores em JavaScript?</a> (por exemplo, para ver qual é o maior, ou para ver se um valor é igual ao outro).</li>
+</ul>
+
+<h3 id="Strings">Strings</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string">Como você cria uma string em JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes">Do you have to use single quotes or double quotes?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string">How do you escape characters in strings?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">How do you join strings together?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">Can you join strings and numbers together?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string">How do you find the length of a string?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">How you find what character is at a certain position in a string?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it">How do you find and extract a specific substring from a string?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case">How do you change the case of a string?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string">How do you replace one specific substring with another?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Arrays">Arrays</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array">How do you create an array?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items">How do you access and modify the items in an array?</a> (this includes multidimensional arrays)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array">How do you find the length of an array?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items">How you add and remove array items?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays">How do you split a string into array items, or join array items into a string?</a></li>
+</ul>
+
+<h3 id="Debugging_JavaScript">Debugging JavaScript</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error">What are the basic types of error?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools, and how do you access them?</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API">How do you log a value to the JavaScript console?</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger">How do you use breakpoints, and other JavaScript debugging features?</a></li>
+</ul>
+
+<p>For more information on JavaScript debugging, see <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a>; also see <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors">Other common errors</a> for a description of common errors.</p>
+
+<h3 id="Making_decisions_in_code">Making decisions in code</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">How do you execute different blocks of code, depending on a variable's value or other condition?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">How do you use if ...else statements?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">How do nest one decision block inside another?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">How do you use AND, OR, and NOT operators in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">How do you conveniently handle a large number of choices for one condition?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">How do you use a ternary operator to make a quick choice between two options based on a true or false test?</a></li>
+</ul>
+
+<h3 id="Loopingiteration">Looping/iteration</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">How do you run the same bit of code over and over again?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">How do you exit a loop before the end if a certain condition is met?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">How do you skip to the next iteration of a loop if a certain condition is met?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">How do you use while and do ... while loops?</a></li>
+ <li>How to iterate over the elements in an array</li>
+ <li>How to iterate over the elements in a multidimensional array</li>
+ <li>How to iterate over the members in an object</li>
+ <li>How to iterate over the members of an object nested inside an array</li>
+</ul>
+</div>
+</div>
+
+<h2 id="Intermediate_use_cases">Intermediate use cases</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Functions">Functions</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">How do you find functions in the browser?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods">What is the difference between a function and a method?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">How do you create your own functions?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions">How do you run (call, or invoke) a function?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">What is an anonymous function?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters">How do you specify parameters (or arguments) when invoking a function?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">What is function scope?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">What are return values, and how do you use them?</a></li>
+</ul>
+
+<h3 id="Objects">Objects</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">How do you create an object?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Dot_notation">What is dot notation?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">What is bracket notation?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">How do you get and set the methods and properties of an object?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#What_is_this">What is <code>this</code>, in the context of an object?</a></li>
+ <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">What is object-oriented programming?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">What are constructors and instances, and how do you create them?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">What different ways are there to create objects in JavaScript?</a></li>
+</ul>
+
+<h3 id="JSON">JSON</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#JSON_structure">How do you structure JSON data, and read it from JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON">How can you load a JSON file into a page?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">How do you convert a JSON object to a text string, and back again?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Eventos">Eventos</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties">What are event handlers and how do you use them?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">What are inline event handlers?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()">What does the <code>addEventListener()</code> function do, and how do you use it?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use">Which mechanism should I use to add event code to my web pages?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">What are event objects, and how do you use them?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour">How do you prevent default event behaviour?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation">What is event delegation, and how does it work?</a></li>
+</ul>
+
+<h3 id="Javascript_Orientado_a_objetos">Javascript Orientado a objetos</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes"> Quais são protótipos de objetos?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property">Qual é a propriedade do construtor, e como você pode usa-la?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes">Como você adiciona métodos para o construtor?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Como você cria um novo constructor que herda os membros do construtor pai? </a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary">Quando você deve usar herança em Javascript?</a></li>
+</ul>
+
+<h3 id="Web_APIs">Web APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation">Como você manipula o DOM (por exemplo, adicionando e removendo elementos) usando Javascript?</a></li>
+</ul>
+
+<p> </p>
+</div>
+</div>
diff --git a/files/pt-br/learn/javascript/index.html b/files/pt-br/learn/javascript/index.html
new file mode 100644
index 0000000000..d1a9db5057
--- /dev/null
+++ b/files/pt-br/learn/javascript/index.html
@@ -0,0 +1,78 @@
+---
+title: JavaScript
+slug: Aprender/JavaScript
+tags:
+  - Beginner
+  - CodingScripting
+  - Iniciante Javascript
+  - JavaScript
+  - NeedsContent
+  - Principiante
+  - Tópico
+  - modulo
+translation_of: Learn/JavaScript
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{glossary('JavaScript')}} é uma linguagem de programação que permite implementar funcionalidades mais complexas em páginas web. Sempre que uma página web faz mais do que apenas mostrar informações estáticas para você - ela mostra em tempo real conteúdos atualizados, mapas interativos, animações gráficas em 2D/3D, vídeos, etc. -  você pode apostar que o Javascript provavelmente está envolvido.</p>
+
+<h2 id="O_caminho_para_o_aprendizado">O caminho para o aprendizado</h2>
+
+<p>O JavaScript não é tão fácil de aprender como outras linguagens, como <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML">HTML</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS">CSS</a>, que são outros dois pilares do desenvolvimento front-end. Antes de tentar aprender JavaScript, é altamente recomendável que você aprenda e se familiarize com pelo menos estas duas tecnologias primeiro. Você pode começar através dos seguintes módulos:</p>
+
+<ul>
+ <li><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web">Começando na Web</a></li>
+ <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a></li>
+ <li><a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">Introdução ao CSS</a></li>
+</ul>
+
+<p>Possuir experiência em outras linguagens de programação pode também ser útil.</p>
+
+<p>Depois de aprender o básico de JavaScript, você estará apto a estudar tópicos mais avançados, como:</p>
+
+<ul>
+ <li>JavaScript aprofundado, como ensinado em <a href="/pt-BR/docs/Web/JavaScript/Guide">Guia JavaScript</a></li>
+ <li><a href="/pt-BR/docs/Web/Reference/API">Referências API Web</a></li>
+</ul>
+
+<h2 id="Módulos">Módulos</h2>
+
+<p>Este tópico contém os seguintes módulos, em uma ordem que sugerimos para estudá-los.</p>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a></dt>
+ <dd>Em nosso primeiro módulo JavaScript, primeiro responderemos algumas questões fundamentais como "o que é JavaScript?", "Como ele se parece?" E "o que ele pode fazer?", antes de passar para sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos alguns recursos chave do JavaScript em detalhes, como variáveis, cadeias de caracteres, números e matrizes.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Blocos de codigo JavaScript</a></dt>
+ <dd>Neste módulo, continuaremos a falar sobre os principais recursos fundamentais do JavaScript, voltando nossa atenção para os tipos mais comuns de blocos de código<strong>,</strong> como instruções condicionais, funções e eventos. Você já viu essas coisas no curso, mas apenas de passagem, aqui discutiremos tudo explicitamente.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em JavaScript</a></dt>
+ <dd>Em JavaScript, a maioria das coisas são objetos, desde seus principais recursos até as APIs do navegador. Você pode até criar seus próprios objetos.É importante entender a natureza orientada a objetos do JavaScript se você quiser ir mais longe com seu conhecimento da linguagem e escrever um código mais eficiente, portanto, fornecemos este módulo para ajudá-lo. Aqui ensinamos a teoria e a sintaxe de objetos em detalhes, observamos como criar seus próprios objetos e explicamos quais são os dados JSON e como trabalhar com eles.</dd>
+ <dt><strong><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Asynchronous">JavaScript Assíncrono</a></strong></dt>
+ <dd>Neste módulo, examinamos o JavaScript assíncrono, por que é importante e como ele pode ser usado para lidar efetivamente com possíveis operações de bloqueio, como a busca de recursos de um servidor.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs">API's Web do lado cliente</a></dt>
+ <dd>Ao escrever JavaScript para sites ou aplicativos da Web, você não vai muito longe antes de começar a usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou até dados de outros sites ou serviços. Neste módulo, vamos explorar o que são as APIs e como usar algumas das APIs mais comuns que você encontrará com frequência em seu trabalho de desenvolvimento.</dd>
+</dl>
+
+<h2 id="Aprofundando">Aprofundando</h2>
+
+<p>Uma vez que você se acostumar com o mundo do JavaScript aqui estão alguns outros módulos em que você pode mergulhar:</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Web/JavaScript/Reference">Biblioteca de referência JavaScript</a></dt>
+ <dd>Em nossa extensa biblioteca de referência você encontrará cada aspecto de Javascript tratado em detalhes: objetos globais, operadores, declarações e funções.</dd>
+ <dt><a href="/pt-BR/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introdução à Orientação a Objetos (OO) em JavaScript</a></dt>
+ <dd>Introdução aos conceitos de {{glossary("OOP","Programação orientada a objetos")}} em JavaScript.</dd>
+</dl>
+
+<h2 id="Resolvendo_problemas_comuns_com_Javascript">Resolvendo problemas comuns com Javascript</h2>
+
+<p><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Howto">Use Javascript para resolver problemas comuns</a>, este link proporciona contéudos explicativos de como usar o JavaScript para solucionar problemas muito comuns ao criar uma página da Web.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>O ponto de entrada principal para a documentação básica do JavaScript no MDN - é aqui que você encontrará extensos documentos de referência em todos os aspectos do JavaScript e alguns tutoriais avançados destinados a JavaScripters experientes.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath">Matemática do programador</a></dt>
+ <dd>Uma excelente série de vídeos que ensina a matemática necessária para ser um bom programador, por <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+ <dt></dt>
+</dl>
diff --git a/files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html
new file mode 100644
index 0000000000..b0e0c0d534
--- /dev/null
+++ b/files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html
@@ -0,0 +1,202 @@
+---
+title: Adicionando recursos à nossa demonstração de bolas pulantes
+slug: Aprender/JavaScript/Objetos/Adding_bouncing_balls_features
+translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Nesta avaliação, espera-se que você use a demonstração de bolas saltantes do artigo anterior como ponto de partida e adicione alguns recursos novos e interessantes a ela.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Before attempting this assessment you should have already worked through all the articles in this module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To test comprehension of JavaScript objects and object-oriented constructs</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ponto_de_partida">Ponto de partida</h2>
+
+<p>Para iniciar essa avaliação, faça uma cópia local de <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html">index-finished.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a>, e <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finished.js</a> do nosso último artigo em um novo diretório em seu computador local.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Alternatively, you could use a site like <a class="external external-icon" href="http://jsbin.com/">JSBin</a> or <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> to do your assessment. You could paste the HTML, CSS and JavaScript into one of these online editors. If the online editor you are using doesn't have separate JavaScript/CSS panels, feel free to put them inline <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> elements inside the HTML page.</p>
+</div>
+
+<h2 id="Resumo_do_projeto">Resumo do projeto</h2>
+
+<p>Nossa demo com bola saltitante é divertida, mas agora queremos torná-la um pouco mais interativa, adicionando um círculo maligno controlado pelo usuário, que vai comer as bolas se elas forem capturadas. Também queremos testar suas habilidades de construção de objetos criando um objeto <code>Shape()</code> genérico do qual nossas bolas e círculo maligno podem herdar. Por fim, queremos adicionar um contador de pontuação para rastrear o número de bolas a serem capturadas.</p>
+
+<p>A imagem seguinte dá-lhe uma ideia do que deve ser o programa final:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+</ul>
+
+<p>Para lhe dar mais uma ideia, dê uma olhada no <a href="http://mdn.github.io/learning-area/javascript/oojs/assessment/">exemplo finalizado</a> (não espreitar o código-fonte!)</p>
+
+<h2 id="Passos_para_concluir">Passos para concluir</h2>
+
+<p>As seções a seguir descrevem o que você precisa fazer.</p>
+
+<h3 id="Criando_nossos_novos_objetos">Criando nossos novos objetos</h3>
+
+<p>Primeiro de tudo, altere seu construtor <code>Ball()</code> existente para que ele se torne um construtor <code>Shape()</code> e adicione um novo construtor <code>Ball()</code>:</p>
+
+<ol>
+ <li>O construtor <code>Shape()</code>  deve definir as propriedades <code>x</code>, <code>y</code>, <code>velX</code>, e <code>velY</code> da mesma maneira que o construtor <code>Ball()</code> fez originalmente, mas não as propriedades de <code>color</code> e <code>size</code>.</li>
+ <li>Também deve definir uma nova propriedade chamada <code>exists</code>, que é usada para rastrear se as bolas existem no programa (não foram comidas pelo círculo do mal). Este deve ser um booleano (<code>true</code>/<code>false</code>).</li>
+ <li>O construtor <code>Ball()</code> deve herdar as propriedades <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, e <code>exists</code> do construtor <code>Shape()</code>.</li>
+ <li>Ele também deve definir uma propriedade <code>color</code> e uma <code>size</code>, como fez o construtor  <code>Ball()</code> original.</li>
+ <li>Lembre-se de definir o <code>prototype</code> e o <code>constructor</code> do construtor <code>Ball()</code> adequadamente.</li>
+</ol>
+
+<p>As definições do método ball <code>draw()</code>, <code>update()</code>, e <code>collisionDetect()</code> devem permanecer exatamente iguais às anteriores.</p>
+
+<p>Você também precisa adicionar um novo parâmetro à nova chamada de construtor <code>new Ball() ( ... )</code> — o parâmetro <code>exists</code> deve ser o quinto parâmetro, e deve receber um valor <code>true</code>.</p>
+
+<p>Neste ponto, tente recarregar o código — ele deve funcionar da mesma forma que antes, com nossos objetos redesenhados.</p>
+
+<h3 id="Definindo_EvilCircle()">Definindo EvilCircle()</h3>
+
+<p>Agora é hora de conhecer o cara mau — o <code>EvilCircle()</code>! Nosso jogo só envolverá um círculo maligno, mas ainda vamos defini-lo usando um construtor que herda de <code>Shape()</code> para lhe dar alguma prática. Você pode querer adicionar outro círculo ao aplicativo mais tarde, que pode ser controlado por outro jogador, ou ter vários círculos malignos controlados por computador. Você provavelmente não vai dominar o mundo com um único círculo maligno, mas fará por essa avaliação.</p>
+
+<p>O construtor <code>EvilCircle()</code> deve herdar  <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, e <code>exists</code> de <code>Shape()</code>, mas <code>velX</code> e <code>velY</code> devem sempre ser iguais a 20.</p>
+
+<p>Você deveria fazer algo como <code>Shape.call(this, x, y, 20, 20, exists);</code></p>
+
+<p>Ele também deve definir suas próprias propriedades, da seguinte maneira:</p>
+
+<ul>
+ <li><code>color</code> — <code>'white'</code></li>
+ <li><code>size</code> — <code>10</code></li>
+</ul>
+
+<p>Novamente, lembre-se de definir suas propriedades herdadas como parâmetros no construtor e defina as propriedades <code>prototype</code> e <code>constructor</code> corretamente.</p>
+
+<h3 id="Definindo_os_métodos_de_EvilCircle()">Definindo os métodos de EvilCircle()</h3>
+
+<p><code>EvilCircle()</code> deve ter quatro métodos, conforme descrito abaixo.</p>
+
+<h4 id="draw()"><code>draw()</code></h4>
+
+<p>Este método tem o mesmo propósito que o método <code>draw()</code> de <code>Ball()</code>: Ele desenha a instância do objeto na tela. Ele funcionará de maneira muito semelhante, portanto, você pode começar copiando a definição <code>Ball.prototype.draw</code>. Você deve então fazer as seguintes alterações:</p>
+
+<ul>
+ <li>Nós queremos que o círculo do mal não seja preenchido, mas apenas tenha uma linha externa (traço). Você pode conseguir isso atualizando <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> e <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> para <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> e <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code>.</li>
+ <li>Também queremos tornar o traço um pouco mais espesso, para que você possa ver o círculo maligno com mais facilidade. Isso pode ser obtido definindo um valor para <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> em algum lugar após a chamada  <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> (3 será suficiente).</li>
+</ul>
+
+<h4 id="checkBounds()"><code>checkBounds()</code></h4>
+
+<p>Este método fará a mesma coisa que a primeira parte da função <code>update()</code> do <code>Ball()</code> — olhe para ver se o círculo do mal vai sair da borda da tela, e pare de fazer isso. Novamente, você pode simplesmente copiar a definição de <code>Ball.prototype.update</code>, mas há algumas alterações que você deve fazer:</p>
+
+<ul>
+ <li>Livre-se das duas últimas linhas - não queremos atualizar automaticamente a posição do círculo maligno em todos os quadros, pois estaremos mudando isso de alguma outra forma, como você verá abaixo.</li>
+ <li>Dentro das instruções <code>if()</code>, se os testes retornam true, não queremos atualizar o <code>velX</code>/<code>velY</code>; Em vez disso, queremos alterar o valor de <code>x</code>/<code>y</code> para que o círculo maligno seja devolvido na tela um pouco. Adicionar ou subtrair (conforme apropriado) a propriedade <code>size</code> do círculo maligno faria sentido.</li>
+</ul>
+
+<h4 id="setControls()"><code>setControls()</code></h4>
+
+<p>Esse método adicionará um ouvinte de evento  <code>onkeydown</code> ao objeto <code>window</code> para que, quando determinadas teclas do teclado forem pressionadas, possamos mover o círculo maligno ao redor. O bloco de código a seguir deve ser colocado dentro da definição do método:</p>
+
+<pre class="brush: js">var _this = this;
+window.onkeydown = function(e) {
+    if (e.keyCode === 65) {
+      _this.x -= _this.velX;
+    } else if (e.keyCode === 68) {
+      _this.x += _this.velX;
+    } else if (e.keyCode === 87) {
+      _this.y -= _this.velY;
+    } else if (e.keyCode === 83) {
+      _this.y += _this.velY;
+    }
+  }</pre>
+
+<p>Assim, quando uma tecla é pressionada, a propriedade <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> é consultada para ver qual tecla é pressionada. Se for um dos quatro representados pelos códigos de teclas especificados, o círculo maligno se moverá para a esquerda / direita / para cima / para baixo.</p>
+
+<ul>
+ <li>Para um ponto de bônus, deixe-nos saber a quais chaves os códigos de teclas específicos estão mapeados.</li>
+ <li>Para outro ponto de bônus, você pode nos dizer por que precisamos definir <code>var _this = this;</code> na posição em que está? É algo a ver com o escopo da função.</li>
+</ul>
+
+<h4 id="collisionDetect()"><code>collisionDetect()</code></h4>
+
+<p>Este método irá agir de forma muito semelhante ao método<code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> </span></font></code><code>collisionDetect()</code> do <code>Ball()</code>, então você pode usar uma cópia disso como base deste novo método. Mas há algumas diferenças:</p>
+
+<ul>
+ <li>Na declaração  <code>if</code> externa, você não precisa mais verificar se a bola atual na iteração é igual à bola que está fazendo a verificação - porque ela não é mais uma bola, é o círculo do mal! Em vez disso, você precisa fazer um teste para ver se a bola que está sendo checada existe (com qual propriedade você poderia fazer isso?). Se não existe, já foi comido pelo círculo do mal, por isso não há necessidade de verificá-lo novamente.</li>
+ <li>Na instrução  <code>if</code> interna, você não quer mais que os objetos mudem de cor quando uma colisão é detectada — em vez disso, você quer definir quaisquer bolas que colidam com o círculo maligno para não existir mais (novamente, como você pensa? d fazer isso?).</li>
+</ul>
+
+<h3 id="Trazendo_o_círculo_do_mal_para_o_programa">Trazendo o círculo do mal para o programa</h3>
+
+<p>Agora nós definimos o círculo do mal, precisamos realmente fazer isso aparecer em nossa cena. Para fazer isso, você precisa fazer algumas alterações na função <code>loop()</code>.</p>
+
+<ul>
+ <li>Primeiro de tudo, crie uma nova instância de objeto do círculo do mal (especificando os parâmetros necessários) e, em seguida, chame seu método <code>setControls()</code>. Você só precisa fazer essas duas coisas uma vez, não em todas as iterações do loop.</li>
+ <li>No ponto em que você percorre todas as bolas e chama as funções <code>draw()</code>, <code>update()</code>, e <code>collisionDetect()</code> para cada uma, faça com que essas funções sejam chamadas apenas se a bola atual existir.</li>
+ <li>Chame os métodos <code>draw()</code>, <code>checkBounds()</code>, e <code>collisionDetect()</code> da instância do mal ball em cada iteração do loop.</li>
+</ul>
+
+<h3 id="Implementando_o_contador_de_pontuação">Implementando o contador de pontuação</h3>
+
+<p>Para implementar o contador de pontuação, siga os seguintes passos:</p>
+
+<ol>
+ <li>No seu arquivo HTML, adicione um elemento {{HTMLElement("p")}} logo abaixo do elemento {{HTMLElement("h1")}} contendo o texto "Contagem de bolas:".</li>
+ <li>No seu arquivo CSS, adicione a seguinte regra na parte inferior:
+  <pre class="brush: css">p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}</pre>
+ </li>
+ <li>Em seu JavaScript, faça as seguintes atualizações:
+  <ul>
+   <li>Crie uma variável que armazene uma referência ao parágrafo.</li>
+   <li>Mantenha uma contagem do número de bolas na tela de alguma forma.</li>
+   <li>Incrementar a contagem e exibir o número atualizado de bolas cada vez que uma bola é adicionada à cena.</li>
+   <li>Decrementar a contagem e exibir o número atualizado de bolas cada vez que o círculo maligno come uma bola (faz com que ele não exista).</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Dicas_e_sugestões">Dicas e sugestões</h2>
+
+<ul>
+ <li>Essa avaliação é bastante desafiadora. Tome cada passo devagar e com cuidado.</li>
+ <li>Pode ser uma idéia manter uma cópia separada da demo depois que você fizer com que cada estágio funcione, para que você possa consultá-la caso se encontre em apuros mais tarde.</li>
+</ul>
+
+<h2 id="Avaliação">Avaliação</h2>
+
+<p>Se você está seguindo esta avaliação como parte de um curso organizado, você deve poder dar seu trabalho ao seu professor / mentor para marcação. Se você é auto-didata, então você pode obter o guia de marcação com bastante facilidade, perguntando no tópico de <a href="https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689">discussão para este exercício</a>, ou no canal de <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC da <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tente o exercício primeiro — não há nada a ganhar com a trapaça!</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p>
+
+<p> </p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/learn/javascript/objects/basics/index.html b/files/pt-br/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..ef9cb18c95
--- /dev/null
+++ b/files/pt-br/learn/javascript/objects/basics/index.html
@@ -0,0 +1,258 @@
+---
+title: O básico sobre objetos JavaScript
+slug: Aprender/JavaScript/Objetos/Básico
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Neste artigo, veremos a sintaxe fundamental de objetos JavaScript e revisitaremos alguns recursos JavaScript vistos anteriormente no curso, reiterando o fato de que muitos dos recursos que você já utilizou são objetos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Interação básica com o computador, entendimento básico de HTML e CSS, familiaridade com o básico de JavaScript (ver <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Elementos construtivos</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender a teoria básica por trás da programação orientada a objetos, como isso se relaciona com o JavaScript ("quase tudo é objeto"), e como começar a trabalhar com objetos JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Objeto_noções_básicas">Objeto, noções básicas</h2>
+
+<p>Um objeto é uma coleção de dados e/ou funcionalidades relacionadas (que geralmente consistem em diversas variáveis e funções — que são chamadas de propriedades e métodos quando estão dentro de objetos). Vamos trabalhar com um exemplo para entender como eles são.</p>
+
+<p>Para começar, faça uma cópia do nosso arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Isto contém muito pouco — um elemento {{HTMLElement("script")}} para escrevermos nosso código-fonte. Vamos usar isto como base para explorar a sintaxe básica do objeto. Ao trabalhar com este exemplo, você deve ter seu <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">console de ferramentas de desenvolvedor JavaScript</a> aberto e pronto para digitar alguns comandos.</p>
+
+<p>Como acontece com muitas coisas em JavaScript, a criação de um objeto geralmente começa com a definição e a inicialização de uma variável. Tente digitar o código a seguir no arquivo que você baixou, salve e atualize:</p>
+
+<pre class="brush: js notranslate">var pessoa = {};</pre>
+
+<p>Se você inserir <code>pessoa</code> no seu console JS e pressionar o botão, deverá obter o seguinte resultado:</p>
+
+<pre class="brush: js notranslate">[object Object]</pre>
+
+<p>Parabéns, você acabou de criar seu primeiro objeto. Tarefa concluída! Mas este é um objeto vazio, então não podemos fazer muita coisa com isso. Vamos atualizar nosso objeto para ficar assim:</p>
+
+<pre class="brush: js notranslate">var pessoa = {
+  nome: ['Bob', 'Smith'],
+  idade: 32,
+  sexo: 'masculino',
+  interesses: ['música', 'esquiar'],
+  bio: function() {
+    alert(this.nome[0] + ' ' + this.nome[1] + ' tem ' + this.idade + ' anos de idade. Ele gosta de ' + this.interesses[0] + ' e ' + this.interesses[1] + '.');
+  },
+  saudacao: function() {
+    alert('Oi! Eu sou ' + this.nome[0] + '.');
+  }
+};
+</pre>
+
+<p>Depois de salvar e atualizar, tente inserir alguns dos itens a seguir no console JavaScript no devtools do seu navegador:</p>
+
+<pre class="brush: js notranslate">pessoa.nome
+pessoa.nome[0]
+pessoa.idade
+pessoa.interesses[1]
+pessoa.bio()
+pessoa.saudacao()</pre>
+
+<p>Agora você tem alguns dados e funcionalidades dentro de seu objeto e é capaz de acessá-los com uma sintaxe simples e agradável!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está tendo problemas para fazer isto funcionar, tente comparar seu código com a nossa versão — veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (ou <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">veja um exemplo funcionando</a>). O exemplo lhe dará uma tela em branco, mas tudo bem — novamente, abra seu devtools e tente digitar os comandos acima para ver a estrutura do objeto.</p>
+</div>
+
+<p>Então, o que está acontecendo? Bem, um objeto é composto de vários membros, cada um  com um nome (ex.: <code>nome</code> e <code>idade</code> vistos acima), e um valor (ex.: <code>['Bob', 'Smith']</code> e <code>32</code>). Cada par nome/valor deve ser separado por uma vírgula e o nome e valor, em cada caso, separados por dois pontos. A sintaxe sempre segue esse padrão:</p>
+
+<pre class="brush: js notranslate">var nomeDoObjeto = {
+  nomeMembro1: valorMembro1,
+  nomeMembro2: valorMembro2,
+  nomeMembro3: valorMembro3
+};</pre>
+
+<p>O valor de um membro do objeto pode ser praticamente qualquer coisa. Em nosso objeto pessoa, temos uma string, um número, dois arrays e duas functions. Os primeiros quatro são data items (dados) e são referenciados como <strong>propriedades</strong> do objeto. Enquanto os dois últimos ítens são funções que permitem que o objeto faça algo com esses dados. São chamados de <strong>métodos </strong>do objeto.</p>
+
+<p>Um objeto como esse é chamado de  <strong>objeto literal</strong> — ao pé da letra, escrevemos o conteúdo do objeto conforme o criamos. Isto está em contraste com objetos instanciados de classes, que veremos mais adiante.</p>
+
+<p>É muito comum criar um objeto usando um objeto literal quando você deseja transferir uma série de itens de dados relacionados estruturados de alguma maneira, por exemplo, enviando uma solicitação para o servidor para ser colocado em um banco de dados. Enviar um único objeto é muito mais eficiente do que enviar vários itens individualmente, e é mais fácil trabalhar com um array, quando você deseja identificar itens individuais pelo nome.</p>
+
+<h2 id="Notação_de_ponto">Notação de ponto</h2>
+
+<p>Acima, você acessou as propriedades de objetos e métodos usando <strong>notação de ponto</strong>. O objeto nome (pessoa) atua como <strong>namespace </strong>(espaço de nomes) — ele deve ser digitado primeiro para que você acesse qualquer coisa <strong>encapsulada </strong>dentro do objeto. Depois você escreve um ponto, então o item que quer acessar — isso pode ser o nome de uma simples propriedade, um item de um array ou a chamada para um dos métodos do objeto, por exemplo: </p>
+
+<pre class="brush: js notranslate">pessoa.idade
+pessoa.interesse[1]
+pessoa.bio()</pre>
+
+<h3 id="Sub-namespaces">Sub-namespaces</h3>
+
+<p>É até possível fazer o valor de um membro de um objeto ser outro objeto. Por exemplo, tente alterar o nome do membro de:</p>
+
+<pre class="brush: js notranslate">nome: ['Bob', 'Smith'],</pre>
+
+<p>para</p>
+
+<pre class="brush: js notranslate">nome : {
+  primeiro: 'Bob',
+  ultimo: 'Smith'
+},</pre>
+
+<p>Aqui estamos efetivamente criando um <strong>sub-namespace</strong>. Parece difícil, mas não é — para acessar esses itens você apenas precisa encadear mais um passo ao final de outro ponto. Tente isso aqui no console:</p>
+
+<pre class="brush: js notranslate">pessoa.nome.primeiro
+pessoa.nome.ultimo</pre>
+
+<p><strong>Importante</strong>: Nesse ponto você também precisará revisar seus métodos e mudar quaisquer instâncias de</p>
+
+<pre class="brush: js notranslate">nome[0]
+nome[1]</pre>
+
+<p>para</p>
+
+<pre class="brush: js notranslate">nome.primeiro
+nome.ultimo</pre>
+
+<p>Caso contrário seus métodos não funcionarão.</p>
+
+<h2 id="Notação_de_colchetes">Notação de colchetes</h2>
+
+<p>Há outra forma de acessar propriedades do objeto — usando notação de colchetes. Ao invés desses:</p>
+
+<pre class="brush: js notranslate">pessoa.idade
+pessoa.nome.primeiro</pre>
+
+<p>Você pode usar:</p>
+
+<pre class="brush: js notranslate">pessoa['idade']
+pessoa['nome']['primeiro']</pre>
+
+<p>Fica muito parecido com a maneira que acessamos itens de um array, e é basicamente a mesma coisa, só que ao invés de usarmos um número de índice para selecionar um item, usamos o nome associado a cada valor. Não é por menos que objetos às vezes são chamados de <strong>arrays associativos</strong> — eles mapeiam strings a valores do mesmo modo que arrays mapeiam números a valores.</p>
+
+<h2 id="Setando_membros_do_objeto">Setando membros do objeto</h2>
+
+<p>Até agora nós apenas procuramos receber (ou <strong>apanhar</strong>) membros de objetos — podemos também <strong>setar </strong>(atualizar) o valor de membros de objetos simplesmente declarando o membro que queremos setar (usando notação de ponto ou colchete), tipo assim:</p>
+
+<pre class="brush: js notranslate">pessoa.idade = 45;
+pessoa['nome']['ultimo'] = 'Cratchit';</pre>
+
+<p>Tente escrever as linhas acima e então apanhar seus membros novamente para ver como mudaram. Assim:</p>
+
+<pre class="brush: js notranslate">pessoa.idade
+pessoa['nome']['ultimo']</pre>
+
+<p>Não podemos apenas atualizar valores existentes de propriedades e métodos; podemos também criar membros completamente novos. Tente isso aqui no console:</p>
+
+<pre class="brush: js notranslate">pessoa['olhos'] = 'castanho'.
+pessoa.despedida = function() { alert( "Adeus a todos!" ); }</pre>
+
+<p>Podemos testar nossos novos membros:</p>
+
+<pre class="brush: js notranslate">pessoa['olhos'];
+pessoa.despedida();</pre>
+
+<p>Um aspecto útil de notação de colchetes é que ela pode ser usadada não apenas para setar valores dinamicamente, mas também nomes de membros. Vamos dizer que queremos que usuários possam armazenar tipos de valores personalizados em seus dados de 'pessoa', digitando o nome e o valor do membro em dois inputs de texto. Podemos obter esses valores dessa forma:</p>
+
+<pre class="brush: js notranslate">var myDataName = nameInput.value;
+var myDataValue = nameValue.value;</pre>
+
+<p>Podemos, então, adicionar esse novo nome e valor ao objeto <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pessoa</span></font> assim:</p>
+
+<pre class="brush: js notranslate">pessoa[myDataName] = myDataValue;</pre>
+
+<p>Para testar isso, tente adicionar as seguinte linhas em seu código, abaixo do fechamento da chaves do objeto <code>pessoa</code> :</p>
+
+<pre class="brush: js notranslate">var myDataName = 'altura';
+var myDataValue = '1.75m';
+pessoa[myDataName] = myDataValue;</pre>
+
+<p>Agora tente salvar e atualizar, entrando o seguinte no seu input de texto:</p>
+
+<pre class="brush: js notranslate">pessoa.altura</pre>
+
+<p>Adicionar uma propriedade a um objeto usando o método acima não é possível com a notação ponto, que só aceita um nome de membro literal, não aceita valor de variável apontando para um nome.</p>
+
+<h2 id="O_que_é_o_this">O que é o "this"?</h2>
+
+<p>Você pode ter reparado algo levemente estranho em nossos métodos. Olhe esse aqui, por exemplo:</p>
+
+<pre class="brush: js notranslate">saudacao: function(){
+  alert("Oi! Meu nome é " + this.nome.primeiro + ".");
+}</pre>
+
+<p>Você deve estar se perguntando o que é o "this". A palavra-chave <code>this</code> se refere ao objeto atual em que o código está sendo escrito — nesse caso o <code>this</code> se refere a <code>pessoa</code>. Então por que simplesmente não escrever <code>pessoa</code>? Como verá no artigo <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Orientaçã a objeto em JavaScript para iniciantes</a>, quando começamos a criar funções construtoras, etc, o <code>this</code> é muito útil — sempre lhe assegurará que os valores corretos estão sendo usados quando o contexto de um mebro muda (exemplo: duas instâncias diferentes do objeto <code>pessoa</code> podem ter diferentes nomes, mas vão querer usar seu próprio nome ao usar a saudação).</p>
+
+<p>Vamos ilustrar o que queremos dizer com um par de objetos pessoa:</p>
+
+<pre class="brush: js notranslate">var pessoa1 = {
+  nome: 'Chris',
+  saudacao: function() {
+    alert('Oi! Meu nome é ' + this.nome + '.');
+  }
+}
+
+var pessoa2 = {
+  nome: 'Brian',
+  saudacao: function() {
+    alert('Oi! Meu nome é ' + this.nome + '.');
+  }
+} </pre>
+
+<p>Neste caso, <code>pessoa1.saudacao()</code><strong> </strong>gerará "Oi! Meu nome é Chris."; No entanto, <code>pessoa2.saudacao()</code><strong> </strong>retornará "Oi! Meu nome é Brian.", mesmo que os códigos dos métodos sejam idênticos. Como dissemos antes, o <code>this</code> é igual ao código do objeto dentro dele — não é exatamente útil quando estamos escrevendo objetos literais na mão, mas é realmente incrível quando adicionamos objetos gerados dinamicamente (por exemplo usando construtores). Tudo ficará mais claro mais para frente.</p>
+
+<h2 id="Você_vem_usando_objetos_o_tempo_todo">Você vem usando objetos o tempo todo</h2>
+
+<p>Enquanto passava por esses exemplos, você provavelmente andou pensando que essa notação de ponto que estamos usando é muito familiar. Isso é porque você vem usando isso durante todo o curso! Todas as vezes que trabalhamos num exemplo que usa uma API interna do navegador ou objetos Javascript, estamos usando objetos, porque esses recursos são construídos usando exatamente o mesmo tipo de estrutura de objetos que vimos aqui, embora mais complexos do que nossos exemplos básicos.</p>
+
+<p>Então quando usamos métodos de strings como:</p>
+
+<pre class="brush: js notranslate">minhaString.split(',');</pre>
+
+<p>Estamos usando um método disponível na instância da class <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Toda vez que você cria uma string em seu código, essa string é automaticamente criada como uma instância de <code>String</code>, e, portanto, possui vários métodos e propriedades comuns que estão disponíveis para ela.</p>
+
+<p>Quando você acessa o document object model usando linhas como estas:</p>
+
+<pre class="brush: js notranslate">var minhaDiv = document.createElement('div');
+var meuVideo = document.querySelector('video');</pre>
+
+<p>Você está usando métodos disponíveis na instância da class <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Cada vez que a página é recarrecada, uma instância de <code>Document</code> é criada, chamando <code>document</code>, que representa a estrutura inteira da página, conteúdo e outros recursos como sua URL. Novamente, isso significa que ela tem vários métodos e propriedades disponíveis nela.</p>
+
+<p>O mesmo pode ser dito de basicamente qualquer outro objeto/API embutido que esteja usando — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, etc.</p>
+
+<p>Note que Objetos/APIs embutidos nem sempre criam instâncias de objetos automaticamente. Por exemplo, a <a href="/en-US/docs/Web/API/Notifications_API">API de Notificações </a>— que permite que navegadores modernos disparem notificações de sistema — requerem que você inicialize uma nova instância de objeto usando o construtor para cada notificação que queira disparar. Tente entrar o seguinte no seu console Javascript:</p>
+
+<pre class="brush: js notranslate">var minhaNotificacao = new Notification('Hello!');</pre>
+
+<p>Novamente, olharemos constructores num artigo mais na frente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: É útil pensar sobre como os objetos se comunicam <strong>passando mensagens</strong> - quando um objeto precisa de outro objeto para realizar algum tipo de ação, ele freqüentemente enviará uma mensagem para outro objeto através de um de seus métodos e aguardará uma resposta, que reconhecemos como um valor de retorno.</p>
+</div>
+
+<h2 id="Teste_suas_habilidades_!">Teste suas habilidades !</h2>
+
+<p>Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante  — veja  <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Parabéns, você chegou ao final de nosso primeiro artigo sobre objetos JS - agora você deve ter uma boa ideia de como trabalhar com objetos em Javascript - incluindo criar seus próprio objetos simples. Você também deve perceber que objetos são muito úteis como estruturas para armazenar dados e funcionalidades relacionadas - se tentar rastrear todas as propriedades e métodos do nosso objeto <code>pessoa</code> como variáveis e funções separadas, isso seria ineficiente e frustrante e correríamos o risco de termos outras variáveis e funções com o mesmo nome. Objetos nos permite manter informações guardadas em segurança em seus próprios pacotes, fora de perigo.</p>
+
+<p>No próximo artigo vamos começar a ver a teoria de programação orientada a objetos (OOP) e em como suas técnicas podem ser usadas em Javascript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="Nesse_módulo">Nesse módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Noções Básicas de Objetos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Orientação a objetos Javascript para iniciantes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Protótipos de Objetos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Herança no Javascript</a></li>
+ <li><a href="/pt-BR/docs/Aprender/JavaScript/Objetos/JSON">Trabalhando com JSON</a></li>
+ <li><a href="/pt-BR/docs/Aprender/JavaScript/Objetos/Object_building_practice">Prática de construção de Objetos</a></li>
+ <li><a href="/pt-BR/docs/Aprender/JavaScript/Objetos/Adding_bouncing_balls_features">Adicionando recursos à nossa demonstração de bolas pulantes</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/objects/index.html b/files/pt-br/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..4c19a1956b
--- /dev/null
+++ b/files/pt-br/learn/javascript/objects/index.html
@@ -0,0 +1,44 @@
+---
+title: Introdução a objetos em Javascript
+slug: Aprender/JavaScript/Objetos
+tags:
+  - Iniciante
+  - JavaScript
+  - Objetos
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Em JavaScript, quase tudo é objeto. Desde as funcionalidades padrão, como strings e arrays, até as APIs para navegadores baseadas na linguagem. Até você pode criar seus próprios objetos. Você pode encapsular funções e variáveis relacionadas de uma forma eficiente. Os objetos agem como uma espécie de manipuladores de dados. Compreender a natureza da orientação a objetos do JavaScript é crucial para aprofundar os conhecimentos acerca da linguagem. Por isso, nós elaboramos esse módulo para auxiliá-lo. Ensinaremos a teoria de objetos em detalhes. Crie seus próprios objetos!</p>
+
+<p>Antes de iniciar este módulo, você deve possuir alguma familiaridade com HTML e CSS. Se não possui, antes de continuar os estudos dos Objetos em Javascript, indicamos os módulos <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introdução ao HTML</a> e <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a> .</p>
+
+<p>Você precisa possuir também alguma familiaridade com os conceitos básicos de Javascript. Para isso indicamos o módulo <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeitos Passos: JavaScript</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Blocos de Construção do JavaScript</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está trabalhando em um computador/tablet/outros equipamentos , ao qual  não é possível  criar seus próprios arquivos , você pode testar (em grande parte) os nossos códigos de exemplo,  em um editor de código online , tal como o JSBin  ou o Thimble .</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos/B%C3%A1sico">Objetos: O básico.</a></dt>
+ <dd>No primeiro artigo sobre objetos em Javascript, vamos analisar a sintaxe básica de objetos e rever algumas caracterísitcas. Nós já notamos, como mencionado anteriomente, que muitas funcionalidades que você já teve algum contato são, na verdade, Objetos .</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript Orientado a Objetos para iniciantes</a></dt>
+ <dd>Com pelo menos o básico, agora vamos focar na Orientação a Objetos JavaScript  (OOJS) — este artigo cobre uma visão básica da teoria da Programação Orientada a Objetos (POO). Depois iremos explorar como o JavaScript emula classes de objetos via funções construtoras e como criar instâncias de objetos.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipação de Objetos</a></dt>
+ <dd>Prototypes é o mecanismo pelo qual os objetos JavaScript herdam características de outros e como eles funcionam de uma forma diferente dos mecanismos de herança de linguagens de programação clássicas. Neste artigo, vamos explorar essas diferenças, explicar como a cadeia de protótipos trabalha e perceber como a propriedade prototype pode ser usada para adicionar métodos a contrutores existentes.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Herança em JavaScript</a></dt>
+ <dd>Com a parte central da OOJS já explicada, este artigo mostra como criar classes de objetos "filhos" (construtores) que herdam características das suas classes "pais". Nós daremos ainda algumas dicas sobre quando e onde você pode usar OOJS.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Trabalhando com dados JSON</a></dt>
+ <dd>JavaScript Object Notation (JSON) é um formato padronizado para representar estruturas de dados em objetos JavaScript,  que é comunmente usado para representar e transmitir dados em sites da web (i.e. enviar alguma informação do serviror para o cliente, para ser exibido na página). Neste artigo vamos mostrar o que você precisa para trabalhar com JSON usando JavaScript, inclusive acesso a itens de dados num objeto JSON. Além disso, mostraremos como criar seu próprio JSON.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Prática de Construção de Objetos</a></dt>
+ <dd>No artigo anterior, nós vimos toda a parte essencial da teoria de Objetos em JavaScript, além de detalhes de sintaxe, fornecendo assim uma base sólida para você seguir adiante. No presente artigo, vamos nos aprofundar com exercícios práticos na construção de objetos personalizados. Faremos algo divertido e colorido  — algumas bolas coloridas saltitantes!</dd>
+</dl>
+
+<h2 id="Aprender_mais...">Aprender mais...</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Acrescentando funcionalidades a nossa demo de bolas saltitantes </a></dt>
+ <dd>Nesse "aprenda mais...", incentivamos você a usar a demo das bolas saltitantes do artigo anterior como ponto de partida para acrescentar algumas novas e interessantes funcionalidades.</dd>
+</dl>
diff --git a/files/pt-br/learn/javascript/objects/inheritance/index.html b/files/pt-br/learn/javascript/objects/inheritance/index.html
new file mode 100644
index 0000000000..81acc88a92
--- /dev/null
+++ b/files/pt-br/learn/javascript/objects/inheritance/index.html
@@ -0,0 +1,402 @@
+---
+title: Herança em JavaScript
+slug: Aprender/JavaScript/Objetos/Herança
+translation_of: Learn/JavaScript/Objects/Inheritance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Com a maior parte dos detalhes principais do OOJS agora explicados, este artigo mostra como criar classes de objetos "child" (construtores) que herdam recursos de suas classes "parent". Além disso, apresentamos alguns conselhos sobre quando e onde você pode usar o OOJS e veja como as classes são tratadas na sintaxe moderna do ECMAScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimento básico de computação, conhecimento básico de HTML e CSS, familiaridade com com o básico de Javascript (veja <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e OOJS básico (veja <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender como é possível implementar a herança em Javascript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Herança_Prototipada">Herança Prototipada</h2>
+
+<p>Até agora vimos alguma herança em ação — vimos como funcionam as cadeias de protótipos e como os membros são herdados subindo em uma cadeia. Mas principalmente isso envolveu funções internas do navegador. Como criamos um objeto em JavaScript que herda de outro objeto?</p>
+
+<p>Vamos explorar como fazer isso com um exemplo concreto.</p>
+
+<h2 id="Começando">Começando</h2>
+
+<p>Primeiro de tudo, faça uma cópia local do arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (veja também <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">ao vivo</a>). Aqui dentro você encontrará o mesmo exemplo de construtor  <code>Person()</code> que utilizamos durante todo o módulo, com uma pequena diferença — definimos apenas as propriedades dentro do construtor:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+};</pre>
+
+<p>Os métodos são <em>todos </em>definidos no protótipo do construtor. Por exemplo:</p>
+
+<pre class="brush: js">Person.prototype.greeting = function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+};</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: No código fonte, você também verá os métodos <code>bio()</code> e <code>farewell()</code> definidos. Depois você verá como eles podem ser herdados por outros construtores.</p>
+</div>
+
+<p>Digamos que quiséssemos criar uma classe <code>Teacher</code>, como a que descrevemos em nossa definição inicial orientada a objetos, que herda todos os membros de <code>Person</code>, mas também inclui:</p>
+
+<ol>
+ <li>Uma nova propriedade, <code>subject</code> — isso irá conter o assunto que o professor ensina.</li>
+ <li>Um método <code>greeting()</code> atualizado, que soa um pouco mais formal do que o método padrão  <code>greeting()</code> — mais adequado para um professor que se dirige a alguns alunos da escola.</li>
+</ol>
+
+<h2 id="Definindo_uma_função_construtora_Teacher">Definindo uma função construtora Teacher()</h2>
+
+<p>A primeira coisa que precisamos fazer é criar um construtor <code>Teacher()</code> — adicione o seguinte abaixo do código existente:</p>
+
+<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) {
+  Person.call(this, first, last, age, gender, interests);
+
+  this.subject = subject;
+}</pre>
+
+<p>Isto parece similar ao construtor Person de várias maneiras, mas há algo estranho aqui que nós não vimos antes — a função <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>. Esta função basicamente permite chamar uma função definida em outro lugar, mas no contexto atual. O primeiro parâmetro especifica o valor <code>this</code> que você deseja usar ao executar a função, e os outros parâmetros são aqueles que devem ser passados para a função quando ela é invocada.</p>
+
+<p>Nós queremos que o construtor <code>Teacher()</code> pegue os mesmos parâmetros que o construtor <code>Person()</code> de onde ele está herdando, então especificamos todos eles como parâmetros na chamada <code>call()</code>.</p>
+
+<p>A última linha dentro do construtor simplesmente define a nova propriedade <code>subject</code> que os professores terão, que pessoas genéricas não possuem.</p>
+
+<p>Como nota, poderíamos simplesmente ter feito isso:</p>
+
+<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.subject = subject;
+}</pre>
+
+<p>Mas isso é apenas redefinir as propriedades de novo, não herdá-las de  <code>Person()</code>, de modo que ela derrota o ponto que estamos tentando fazer. Também leva mais linhas de código.</p>
+
+<h3 id="Herdando_de_um_construtor_sem_parâmetros">Herdando de um construtor sem parâmetros</h3>
+
+<p>Observe que, se o construtor do qual você está herdando não tomar seus valores de propriedade de parâmetros, não será necessário especificá-los como argumentos adicionais em <code>call()</code>. Então, por exemplo, se você tivesse algo realmente simples assim:</p>
+
+<pre class="brush: js">function Brick() {
+  this.width = 10;
+  this.height = 20;
+}</pre>
+
+<p>Você pode herdar as propriedades <code>width</code> e <code>height</code> fazendo isso (assim como as outras etapas descritas abaixo, é claro):</p>
+
+<pre class="brush: js">function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}</pre>
+
+<p>Observe que apenas especificamos <code>this</code> dentro de <code>call()</code> — nenhum outro parâmetro é necessário, já que não estamos herdando propriedades do pai que são configuradas por meio de parâmetros.</p>
+
+<h2 id="Definindo_o_protótipo_e_referência_de_construtor_do_Teacher">Definindo o protótipo e referência de construtor do Teacher()</h2>
+
+<p>Tudo está bem até agora, mas nós temos um problema. Nós definimos um novo construtor, e ele tem uma propriedade  <code>prototype</code>, que por padrão apenas contém uma referência à própria função construtora. Ele não contém os métodos da propriedade <code>prototype</code> do construtor Person. Para ver isso, insira <code>Object.getOwnPropertyNames(Teacher.prototype)</code> no campo de entrada de texto ou no seu console JavaScript. Em seguida, insira-o novamente, substituindo <code>Teacher</code> por <code>Person</code>. O novo construtor também não herda esses métodos. Para ver isso, compare as saídas de <code>Person.prototype.greeting</code> e <code>Teacher.prototype.greeting</code>. Precisamos obter <code>Teacher()</code> para herdar os métodos definidos no protótipo <code>Person()</code>. Então, como fazemos isso?</p>
+
+<ol>
+ <li>Adicione a seguinte linha abaixo da sua adição anterior:
+  <pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre>
+  Aqui nosso amigo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> vem para o resgate novamente. Nesse caso, estamos usando para criar um novo objeto e torná-lo o valor de <code>Teacher.prototype</code>. O novo objeto tem <code>Person.prototype</code> como seu protótipo e, portanto, herdará, se e quando necessário, todos os métodos disponíveis no <code>Person.prototype</code>.</li>
+ <li>Precisamos fazer mais uma coisa antes de prosseguirmos. Depois de adicionar a última linha, a propriedade <code>constructor</code> de <code>Teacher.</code><code>prototype</code> agora é igual a <code>Person()</code>, porque apenas definimos <code>Teacher.prototype</code> para fazer referência a um objeto que herda suas propriedades de <code>Person.prototype</code>! Tente salvar seu código, carregar a página em um navegador e inserir <code>Teacher.prototype.constructor</code> no console para verificar.</li>
+ <li>Isso pode se tornar um problema, então precisamos definir isso corretamente. Você pode fazer isso voltando ao seu código-fonte e adicionando a seguinte linha na parte inferior:
+  <pre class="brush: js">Object.defineProperty(Teacher.prototype, 'constructor', {
+    value: Teacher,
+    enumerable: false, // so that it does not appear in 'for in' loop
+    writable: true });</pre>
+ </li>
+ <li>Agora, se você salvar e atualizar, entrar em <code>Teacher.prototype.constructor</code> deve retornar <code>Teacher()</code>, conforme desejado, além de estarmos herdando de <code>Person()</code>!</li>
+</ol>
+
+<h2 id="Dar_a_Teacher_uma_nova_função_greeting">Dar a Teacher() uma nova função greeting() </h2>
+
+<p>Para finalizar nosso código, precisamos definir uma nova função <code>greeting()</code> no construtor <code>Teacher()</code>.</p>
+
+<p>A maneira mais fácil de fazer isso é defini-lo no protótipo do <code>Teacher()</code> — adicione o seguinte na parte inferior do seu código:</p>
+
+<pre class="brush: js">Teacher.prototype.greeting = function() {
+  var prefix;
+
+  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
+    prefix = 'Mr.';
+  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
+    prefix = 'Mrs.';
+  } else {
+    prefix = 'Mx.';
+  }
+
+  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
+};</pre>
+
+<p>Isso alerta a saudação do professor, que também usa um prefixo de nome apropriado para seu gênero, elaborado usando uma instrução condicional.</p>
+
+<h2 id="Testando_o_exemplo">Testando o exemplo</h2>
+
+<p>Agora que você digitou todo o código, tente criar uma instância de objeto do <code>Teacher()</code> colocando o seguinte na parte inferior do seu JavaScript (ou algo semelhante à sua escolha):</p>
+
+<pre class="brush: js">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre>
+
+<p>Agora salve e atualize e tente acessar as propriedades e os métodos do novo objeto <code>teacher1</code>, por exemplo:</p>
+
+<pre class="brush: js">teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();</pre>
+
+<p>Tudo isso deve funcionar bem. As consultas nas linhas 1, 2, 3 e 6 acessam membros herdados do construtor genérico <code>Person()</code> (class). A consulta na linha 4 acessa um membro que está disponível somente no construtor mais especializado  <code>Teacher()</code> (class). A consulta na linha 5 teria acessado um membro herdado de <code>Person()</code>, exceto pelo fato de que <code>Teacher()</code> tem seu próprio membro com o mesmo nome, portanto, a consulta acessa esse membro.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble getting this to work, compare your code to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">running live</a> also).</p>
+</div>
+
+<p>A técnica que abordamos aqui não é a única maneira de criar classes herdadas em JavaScript, mas funciona bem e dá uma boa idéia sobre como implementar a herança em JavaScript.</p>
+
+<p>Você também pode estar interessado em conferir alguns dos novos recursos {{glossary("ECMAScript")}} que nos permitem fazer herança mais claramente em JavaScript (veja <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). Nós não cobrimos esses aqui, pois eles ainda não são suportados amplamente pelos navegadores. Todas as outras construções de código que discutimos neste conjunto de artigos são suportadas desde o IE9 ou anterior, e existem maneiras de obter suporte anterior a isso.</p>
+
+<p>Uma maneira comum é usar uma biblioteca JavaScript — a maioria das opções populares tem um conjunto fácil de funcionalidade disponível para fazer herança com mais facilidade e rapidez. <a href="http://coffeescript.org/#classes">CoffeeScript</a> por exemplo, fornece <code>class</code>, <code>extends</code>, etc.</p>
+
+<h2 id="Um_exercício_adicional">Um exercício adicional</h2>
+
+<p>Em nossa <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">seção de teoria OOP</a>, incluímos também uma classe <code>Student</code> como um conceito, que herda todos os recursos de <code>Person</code>, e também tem um método  <code>greeting()</code> diferente de <code>Person</code> que é muito mais informal do que a saudação do <code>Teacher</code>. Dê uma olhada na aparência da saudação do aluno nessa seção e tente implementar seu próprio construtor <code>Student()</code> que herda todos os recursos de <code>Person()</code>, e implemente a função <code>greeting()</code> diferente.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble getting this to work, have a look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">running live</a> also).</p>
+</div>
+
+<h2 id="Sumário_de_membro_do_objeto">Sumário de membro do objeto</h2>
+
+<p>Resumindo, você basicamente tem três tipos de propriedade / método para se preocupar:</p>
+
+<ol>
+ <li>Aqueles definidos dentro de uma função construtora que são dadas a instâncias de objetos. Estes são bastante fáceis de detectar — em seu próprio código personalizado, eles são os membros definidos dentro de um construtor usando as linhas <code>this.x = x</code> ; no código do navegador, eles são os membros disponíveis apenas para instâncias de objetos (geralmente criados chamando um construtor usando a palavra-chave <code>new</code>, por exemplo, <code>var myInstance = new myConstructor()</code>).</li>
+ <li>Aqueles definidos diretamente no próprio construtor, que estão disponíveis apenas no construtor. Geralmente, eles estão disponíveis apenas em objetos de navegador internos e são reconhecidos por serem encadeados diretamente em um construtor, não em uma instância. Por exemplo, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li>
+ <li>Aqueles definidos no protótipo de um construtor, que são herdados por todas as instâncias e herdam as classes de objetos. Estes incluem qualquer membro definido na propriedade de protótipo de um Construtor, por ex. <code>myConstructor.prototype.x()</code>.</li>
+</ol>
+
+<p>Se você não tem certeza de qual é qual, não se preocupe com isso ainda — você ainda está aprendendo e a familiaridade virá com a prática.</p>
+
+<h2 id="Classes_ECMAScript_2015">Classes ECMAScript 2015</h2>
+
+<p>O ECMAScript 2015 introduz a <a href="/en-US/docs/Web/JavaScript/Reference/Classes">sintaxe de classe</a> em JavaScript como uma maneira de escrever classes reutilizáveis usando uma sintaxe mais fácil e mais limpa, que é mais semelhante a classes em C ++ ou Java. Nesta seção, converteremos os exemplos Pessoa e Professor da herança protótipo para as classes, para mostrar como é feito.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Essa forma moderna de escrever classes é suportada em todos os navegadores modernos, mas ainda vale a pena saber como a herança prototípica subjacente, caso você trabalhe em um projeto que exija suporte a um navegador que não suporte essa sintaxe (mais notavelmente o Internet Explorer) .</p>
+</div>
+
+<p>Vejamos uma versão reescrita do exemplo Person, estilo de classe:</p>
+
+<pre class="brush: js">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+</pre>
+
+<p>A declaração <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a> indica que estamos criando uma nova classe. Dentro deste bloco, definimos todos os recursos da classe:</p>
+
+<ul>
+ <li>O método <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> define a função construtora que representa nossa classe <code>Person</code>.</li>
+ <li><code>greeting()</code> e <code>farewell()</code> são métodos de classe. Quaisquer métodos que você deseja associar à classe são definidos dentro dela, após o construtor. Neste exemplo, usamos <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> em vez de concatenação de string para facilitar a leitura do código.</li>
+</ul>
+
+<p>Agora podemos instanciar instâncias de objeto usando o operador <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a>, da mesma maneira que fizemos antes:</p>
+
+<pre class="brush: js">let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']);
+leia.farewell();
+// Leia has left the building. Bye for now
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Sob o capô, suas classes estão sendo convertidas em modelos de herança protótipos — isso é apenas açúcar sintático. Mas tenho certeza que você concordará que é mais fácil escrever.</p>
+</div>
+
+<h3 id="Herança_com_sintaxe_de_classe">Herança com sintaxe de classe</h3>
+
+<p>Acima nós criamos uma classe para representar uma pessoa. Eles têm uma série de atributos que são comuns a todas as pessoas; Nesta seção, criaremos nossa classe especializada <code>Teacher</code>, tornando-a herdada de <code>Person</code> usando a sintaxe de classe moderna. Isso é chamado de criação de uma subclasse ou subclasse.</p>
+
+<p>Para criar uma subclasse, usamos a palavra-chave <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a> para informar ao JavaScript a classe na qual queremos basear nossa classe.</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    this.name = {
+      first,
+      last
+    };
+
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  // subject and grade are specific to Teacher
+  this.subject = subject;
+  this.grade = grade;
+  }
+}</pre>
+
+<p>Podemos tornar o código mais legível definindo o operador <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> </a>como o primeiro item dentro do <code>constructor()</code>. Isso chamará o construtor da classe pai e herdará os membros que especificarmos como parâmetros de <code>super()</code>, desde que sejam definidos lá:</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+</pre>
+
+<p>Quando instanciamos instâncias de objeto <code>Teacher</code> , podemos agora chamar métodos e propriedades definidos em <code>Teacher</code> e <code>Person</code>, como seria de esperar:</p>
+
+<pre class="brush: js">let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts
+</pre>
+
+<p>Como fizemos com Teachers, poderíamos criar outras subclasses de <code>Person</code> para torná-las mais especializadas sem modificar a classe base.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">see it live also</a>).</p>
+</div>
+
+<h2 id="Getters_e_Setters">Getters e Setters</h2>
+
+<p>Pode haver momentos em que queremos alterar os valores de um atributo nas classes que criamos ou não sabemos qual será o valor final de um atributo. Usando o exemplo <code>Teacher</code>, podemos não saber o assunto que o professor ensinará antes de criá-lo, ou o assunto pode mudar entre os termos.</p>
+
+<p>Podemos lidar com essas situações com getters e setters.</p>
+
+<p>Vamos melhorar a classe Professor com getters e setters. A aula começa da mesma forma que foi a última vez que olhamos para ela.</p>
+
+<p>Os getters e setters trabalham em pares. Um getter retorna o valor atual da variável e seu setter correspondente altera o valor da variável para o que ela define.</p>
+
+<p>A classe <code>Teacher</code> modificada é assim:</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}
+</pre>
+
+<p>Em nossa classe acima, temos um getter e setter para a propriedade <code>subject</code>. Usamos  <strong><code>_</code> </strong> para criar um valor separado no qual armazenar nossa propriedade de nome. Sem usar essa convenção, obteríamos erros toda vez que chamássemos get ou set. Neste ponto:</p>
+
+<ul>
+ <li>Para mostrar o valor atual da propriedade <code>_subject</code> do objeto <code>snape</code> , podemos usar o método getter <code>snape.subject</code>.</li>
+ <li>Para atribuir um novo valor à propriedade <code>_subject</code> , podemos usar o método setter <code>snape.subject="new value"</code>.</li>
+</ul>
+
+<p>O exemplo abaixo mostra os dois recursos em ação:</p>
+
+<pre class="brush: js">// Check the default value
+console.log(snape.subject) // Returns "Dark arts"
+
+// Change the value
+snape.subject="Balloon animals" // Sets _subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape.subject) // Returns "Balloon animals"
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">see it live also</a>).</p>
+</div>
+
+<h2 id="Quando_você_usaria_a_herança_em_JavaScript">Quando você usaria a herança em JavaScript?</h2>
+
+<p>Particularmente após este último artigo, você pode estar pensando "woo, isso é complicado". Bem, você está certo. Protótipos e herança representam alguns dos aspectos mais complexos do JavaScript, mas muito do poder e flexibilidade do JavaScript vem de sua estrutura e herança de objetos, e vale a pena entender como ele funciona.</p>
+
+<p>De certa forma, você usa herança o tempo todo. Sempre que você usa vários recursos de uma API da Web ou métodos / propriedades definidos em um objeto de navegador interno que você chama em suas cadeias de caracteres, matrizes, etc., você está implicitamente usando herança.</p>
+
+<p>Em termos de usar a herança em seu próprio código, você provavelmente não a usará com frequência, principalmente no começo e em pequenos projetos. É uma perda de tempo usar objetos e herança apenas por causa dela quando você não precisa deles. Mas à medida que suas bases de código aumentam, é mais provável que você encontre uma necessidade para isso. Se você estiver começando a criar vários objetos com recursos semelhantes, criar um tipo de objeto genérico para conter toda a funcionalidade compartilhada e herdar esses recursos em tipos de objetos mais especializados pode ser conveniente e útil.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Por causa da maneira como o JavaScript funciona, com a cadeia de protótipos, etc., o compartilhamento de funcionalidade entre objetos é frequentemente chamado de <strong>delegação</strong>. Os objetos especializados delegam a funcionalidade a um tipo de objeto genérico.</p>
+</div>
+
+<p>Ao usar a herança, você é aconselhado a não ter muitos níveis de herança, e manter um controle cuidadoso de onde você define seus métodos e propriedades. É possível começar a escrever código que modifica temporariamente os protótipos dos objetos do navegador interno, mas você não deve fazer isso a menos que tenha um bom motivo. Demasiada herança pode levar a confusão sem fim, e dor infinita quando você tenta depurar esse código.</p>
+
+<p>Em última análise, os objetos são apenas outra forma de reutilização de código, como funções ou loops, com seus próprios papéis e vantagens específicos. Se você estiver criando um monte de variáveis e funções relacionadas e quiser rastreá-las todas juntas e empacotá-las perfeitamente, um objeto é uma boa ideia. Objetos também são muito úteis quando você quer passar uma coleção de dados de um lugar para outro. Ambas as coisas podem ser alcançadas sem o uso de construtores ou herança. Se você precisa apenas de uma única instância de um objeto, provavelmente é melhor usar apenas um literal de objeto e certamente não precisa de herança.</p>
+
+<h2 id="Alternativas_para_estender_a_cadeia_de_protótipos">Alternativas para estender a cadeia de protótipos</h2>
+
+<p>Em JavaScript, existem várias maneiras diferentes de estender o protótipo de um objeto além do que mostramos acima. Para saber mais sobre as outras formas, visite nosso artigo <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">Herança e a cadeia de protótipos</a>.</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Este artigo cobriu o restante da teoria e sintaxe central do OOJS que achamos que você deveria saber agora. Neste ponto, você deve entender os princípios de objeto e OOP JavaScript, protótipos e herança prototypal, como criar classes (construtores) e instâncias de objetos, adicionar recursos a classes e criar subclasses que herdam de outras classes.</p>
+
+<p>No próximo artigo, veremos como trabalhar com JavaScript Object Notation (JSON), um formato comum de troca de dados escrito usando objetos JavaScript.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — Um site de aprendizado interativo realmente útil para aprender sobre objetos.</li>
+ <li><a href="https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition">Segredos Ninja de JavaScript</a>, Capítulo 7 - Um bom livro sobre conceitos e técnicas avançadas de JavaScript, por John Resig, Bear Bibeault e Josip Maras. O Capítulo 7 aborda aspectos de protótipos e herança muito bem; Você provavelmente pode rastrear uma cópia impressa ou on-line com bastante facilidade.</li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">Você não sabe JS: this &amp; Object Prototypes</a> — Parte da excelente série de manuais de JavaScript de Kyle Simpson, o Capítulo 5, em particular, analisa os protótipos com muito mais detalhes do que fazemos aqui. Nós apresentamos uma visão simplificada nesta série de artigos destinados a iniciantes, enquanto Kyle entra em grande profundidade e fornece uma imagem mais complexa, mas mais precisa.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/objects/json/index.html b/files/pt-br/learn/javascript/objects/json/index.html
new file mode 100644
index 0000000000..e10e3e27a6
--- /dev/null
+++ b/files/pt-br/learn/javascript/objects/json/index.html
@@ -0,0 +1,350 @@
+---
+title: Trabalhando com JSON
+slug: Aprender/JavaScript/Objetos/JSON
+tags:
+  - JSON
+  - JavaScript
+  - assíncrono
+translation_of: Learn/JavaScript/Objects/JSON
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">JavaScript Object Notation (JSON) é um formato baseado em texto padrão para representar dados estruturados com base na sintaxe do objeto JavaScript. É comumente usado para transmitir dados em aplicativos da Web (por exemplo, enviar alguns dados do servidor para o cliente, para que possam ser exibidos em uma página da Web ou vice-versa). Você se deparará com isso com bastante frequência, portanto, neste artigo, oferecemos tudo o que você precisa para trabalhar com o JSON usando JavaScript, incluindo a análise do JSON para que você possa acessar os dados dentro dele e criar o JSON.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos</th>
+   <td>
+    <p>Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e o básico de OOJS (veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Para entender como trabalhar com dados armazenados em JSON e criar seus próprios objetos JSON.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Não_sério_o_que_é_o_JSON">Não, sério, o que é o JSON?</h2>
+
+<p>{{glossary("JSON")}} é um formato de dados baseado em texto seguindo a sintaxe do objeto JavaScript, que foi popularizada por  <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Mesmo que se assemelhe à sintaxe literal do objeto JavaScript, ele pode ser usado independentemente do JavaScript, e muitos ambientes de programação possuem a capacidade de ler (analisar) e gerar JSON</p>
+
+<p>O JSON existe como uma string — útil quando você deseja transmitir dados por uma rede. Ele precisa ser convertido em um objeto JavaScript nativo quando você quiser acessar os dados. Isso não é um grande problema —  o JavaScript fornece um objeto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> global que possui métodos disponíveis para conversão entre os dois.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Converter uma string em um objeto nativo é chamado de análise, enquanto a conversão de um objeto nativo em uma string para que possa ser transmitida pela rede é chamada de <em>stringification</em>.</p>
+</div>
+
+<p>Um objeto JSON pode ser armazenado em seu próprio arquivo, que é basicamente apenas um arquivo de texto com uma extensão de <code>.json</code>, e um {{glossary("MIME type")}} de <code>application/json</code>.</p>
+
+<h3 id="Estrutura_JSON">Estrutura JSON</h3>
+
+<p>Conforme descrito acima, um JSON é uma string cujo formato se parece muito com o formato literal do objeto JavaScript. Você pode incluir os mesmos tipos de dados básicos dentro do JSON, como em um objeto JavaScript padrão — strings, números, matrizes, booleanos e outros literais de objeto. Isso permite que você construa uma hierarquia de dados, assim:</p>
+
+<pre class="brush: json">{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}</pre>
+
+<p>Se nós carregássemos esse objeto em um programa JavaScript, analisado em uma variável chamada <code>superHeroes</code> por exemplo, poderíamos então acessar os dados dentro dele usando a mesma notação dot / bracket que observamos no artigo básico do objeto <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript</a>. Por exemplo:</p>
+
+<pre class="brush: js">superHeroes.homeTown
+superHeroes['active']</pre>
+
+<p>Para acessar os dados mais abaixo na hierarquia, basta encadear os nomes de propriedades e os índices de array necessários juntos. Por exemplo, para acessar o terceiro superpoder do segundo herói listado na lista de membros, você faria isso:</p>
+
+<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre>
+
+<ol>
+ <li>Primeiro temos o nome da variável — <code>superHeroes</code>.</li>
+ <li>Por dentro, queremos acessar a propriedade dos <code>members</code>, então usamos <code>["members"]</code>.</li>
+ <li><code>members</code> contém uma matriz preenchida por objetos. Queremos acessar o segundo objeto dentro da matriz, então usamos <code>[1]</code>.</li>
+ <li>Dentro deste objeto, queremos acessar a propriedade <code>powers</code>, então usamos <code>["powers"]</code>.</li>
+ <li>Dentro da propriedade  <code>powers</code> está um array contendo os superpoderes do herói selecionado. Nós queremos o terceiro, então nós usamos<br>
+  <code>[2]</code>.</li>
+</ol>
+
+<div class="note">
+<p>Nota: Nós fizemos o JSON visto acima disponível dentro de uma variável em nosso exemplo JSONTest.html (veja o código fonte). Tente carregar isso e depois acessar os dados dentro da variável pelo console JavaScript do seu navegador.</p>
+</div>
+
+<h3 id="Matrizes_como_JSON">Matrizes como JSON</h3>
+
+<p>Acima, mencionamos que o texto JSON basicamente se parece com um objeto JavaScript, e isso é basicamente correto. A razão pela qual dissemos "principalmente certo" é que uma matriz também é válida como JSON, por exemplo:</p>
+
+<pre class="brush: json">[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]</pre>
+
+<p>O código acima é um JSON perfeitamente válido. Você teria que acessar itens de matriz (em sua versão analisada) iniciando com um índice de matriz, por exemplo <code>[0]["powers"][0]</code>.</p>
+
+<h3 id="Outras_notas">Outras notas</h3>
+
+<ul>
+ <li>O JSON é puramente um formato de dados — contém apenas propriedades, sem métodos.</li>
+ <li>JSON requer aspas duplas para serem usadas em torno de strings e nomes de propriedades. Aspas simples não são válidas.</li>
+ <li>Mesmo uma única vírgula ou cólon perdidos podem fazer com que um arquivo JSON dê errado e não funcione. Você deve ter o cuidado de validar quaisquer dados que você esteja tentando usar (embora o JSON gerado por computador seja menos provável de incluir erros, desde que o programa gerador esteja funcionando corretamente). Você pode validar o JSON usando um aplicativo como o <a href="http://jsonlint.com/">JSONLint</a>.</li>
+ <li>O JSON pode realmente assumir a forma de qualquer tipo de dados que seja válido para inclusão dentro do JSON, não apenas matrizes ou objetos. Por exemplo, uma única string ou número seria um objeto JSON válido.</li>
+ <li>Ao contrário do código JavaScript no qual as propriedades do objeto podem estar sem aspas, em JSON, somente strings entre aspas podem ser usadas como propriedades.</li>
+</ul>
+
+<h2 id="Aprendizado_ativo_trabalhando_por_meio_de_um_exemplo_de_JSON">Aprendizado ativo: trabalhando por meio de um exemplo de JSON</h2>
+
+<p>Então, vamos trabalhar em um exemplo para mostrar como poderíamos usar alguns dados JSON em um site.</p>
+
+<h3 id="Começando">Começando</h3>
+
+<p>Para começar, faça cópias locais de nossos arquivos <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> e <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a>. O último contém alguns CSS simples para estilizar nossa página, enquanto o primeiro contém um HTML muito simples:</p>
+
+<pre class="brush: html">&lt;header&gt;
+&lt;/header&gt;
+
+&lt;section&gt;
+&lt;/section&gt;</pre>
+
+<p>Mais um elemento {{HTMLElement("script")}} para conter o código JavaScript que escreveremos neste exercício. No momento, ele contém apenas duas linhas, que pegam referências aos elementos {{HTMLElement("header")}} e {{HTMLElement("section")}} e os armazenam em variáveis:</p>
+
+<pre class="brush: js">var header = document.querySelector('header');
+var section = document.querySelector('section');</pre>
+
+<p>Disponibilizamos nossos dados JSON em nosso GitHub, em<a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p>
+
+<p>Vamos carregá-lo em nossa página e usar algumas manipulações de DOM nifty para exibi-lo, assim:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Obtendo_o_JSON">Obtendo o JSON</h3>
+
+<p>Para obter o JSON, vamos usar uma API chamada {{domxref("XMLHttpRequest")}} (geralmente chamada de XHR). Esse é um objeto JavaScript muito útil que nos permite fazer solicitações de rede para recuperar recursos de um servidor via JavaScript (por exemplo, imagens, texto, JSON e até trechos de código HTML), o que significa que podemos atualizar pequenas seções de conteúdo sem ter que recarregar todo página. Isso levou a páginas da Web mais responsivas e parece empolgante, mas está além do escopo deste artigo ensinar isso com muito mais detalhes.</p>
+
+<ol>
+ <li>Para começar, vamos armazenar a URL do JSON que queremos recuperar em uma variável. Adicione o seguinte na parte inferior do seu código JavaScript:
+  <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre>
+ </li>
+ <li>Para criar uma solicitação, precisamos criar uma nova instância de objeto de solicitação a partir do construtor <code>XMLHttpRequest</code> usando a palavra-chave <code>new</code>. Adicione o seguinte abaixo sua última linha:
+  <pre class="brush: js">var request = new XMLHttpRequest();</pre>
+ </li>
+ <li>Agora precisamos abrir uma nova solicitação usando o método <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code> . Adicione a seguinte linha:
+  <pre class="brush: js">request.open('GET', requestURL);</pre>
+
+  <p>Isso leva pelo menos dois parâmetros — existem outros parâmetros opcionais disponíveis. Nós só precisamos dos dois obrigatórios para este exemplo simples:</p>
+
+  <ul>
+   <li>O método HTTP a ser usado ao fazer a solicitação de rede. Neste caso, <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> é bom, pois estamos apenas recuperando alguns dados simples.</li>
+   <li>O URL para fazer a solicitação — esta é a URL do arquivo JSON que armazenamos anteriormente.</li>
+  </ul>
+ </li>
+ <li>Em seguida, adicione as duas linhas a seguir — aqui estamos definindo o  <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> como JSON, para que o XHR saiba que o servidor retornará o JSON e que isso deve ser convertido nos bastidores em um objeto JavaScript. Em seguida, enviamos a solicitação com o método <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code>:
+  <pre class="brush: js">request.responseType = 'json';
+request.send();</pre>
+ </li>
+ <li>A última parte desta seção envolve aguardar a resposta retornar do servidor e, em seguida, lidar com ela. Adicione o seguinte código abaixo do seu código anterior:
+  <pre class="brush: js">request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+ </li>
+</ol>
+
+<p>Aqui estamos armazenando a resposta ao nosso pedido (disponível na propriedade <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code>) em uma variável chamada <code>superHeroes</code>; essa variável agora conterá o objeto JavaScript com base no JSON! Então, estamos passando esse objeto para duas chamadas de função — a primeira preencherá o &lt;<code>header&gt;</code> com os dados corretos, enquanto a segunda criará uma ficha de informações para cada herói da equipe e a inserirá na <code>&lt;section&gt;</code>.</p>
+
+<p>Envolvemos o código em um manipulador de eventos que é executado quando o evento de carregamento é acionado no objeto de solicitação (consulte <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — isso ocorre porque o evento load é acionado quando a resposta é retornada com sucesso; Fazê-lo desta forma garante que <code>request.response</code> estará definitivamente disponível quando chegarmos a tentar fazer algo com ele.</p>
+
+<h3 id="Preenchendo_o_Cabeçalho">Preenchendo o Cabeçalho</h3>
+
+<p>Agora, recuperamos os dados JSON e os convertemos em um objeto JavaScript, vamos usá-lo escrevendo as duas funções mencionadas acima. Primeiro de tudo, adicione a seguinte definição de função abaixo do código anterior:</p>
+
+<pre class="brush: js">function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  var myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}</pre>
+
+<p>Nós chamamos o parâmetro <code>jsonObj</code>, para nos lembrarmos que esse objeto JavaScript foi originado do JSON. Aqui, primeiro criamos um elemento {{HTMLElement("h1")}} como <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, definimos seu <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> para igualar a propriedade <code>squadName</code> do objeto e, em seguida, o adicionamos ao cabeçalho usando <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. Em seguida, fazemos uma operação muito semelhante com um parágrafo: criá-lo, definir seu conteúdo de texto e anexá-lo ao cabeçalho. A única diferença é que seu texto é definido como uma string concatenada contendo as propriedades <code>homeTown</code> e <code>formed</code> do objeto.</p>
+
+<h3 id="Criando_os_cartões_de_informações_do_herói">Criando os cartões de informações do herói</h3>
+
+<p>Em seguida, adicione a seguinte função na parte inferior do código, que cria e exibe as cartas de super-heróis:</p>
+
+<pre class="brush: js">function showHeroes(jsonObj) {
+  var heroes = jsonObj['members'];
+
+  for (var i = 0; i &lt; heroes.length; i++) {
+    var myArticle = document.createElement('article');
+    var myH2 = document.createElement('h2');
+    var myPara1 = document.createElement('p');
+    var myPara2 = document.createElement('p');
+    var myPara3 = document.createElement('p');
+    var myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    var superPowers = heroes[i].powers;
+    for (var j = 0; j &lt; superPowers.length; j++) {
+      var listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}</pre>
+
+<p>Para começar, armazenamos a propriedade  <code>members</code> do objeto JavaScript em uma nova variável. Esta matriz contém vários objetos que contêm as informações para cada herói.</p>
+
+<p>Em seguida, usamos um<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop"> loop for</a> para percorrer cada objeto na matriz. Para cada um, nós:</p>
+
+<ol>
+ <li>Criamos vários novos elementos: um <code>&lt;ar</code><code>ticle&gt;</code>, um <code>&lt;h2&gt;</code>, três <code>&lt;p&gt;</code>s, e um <code>&lt;ul&gt;</code>.</li>
+ <li>Definimos o &lt;h2&gt; para conter o <code>name</code> do herói atual.</li>
+ <li>Preenchemos os três parágrafos com sua <code>secretIdentity</code>, <code>age</code>, e uma linha dizendo "Superpoderes:" para introduzir as informações na lista.</li>
+ <li>Armazenamos a propriedade <code>powers</code> em outra nova variável chamada <code>superPowers</code> — isso contém uma matriz que lista os superpoderes do herói atual.</li>
+ <li>Usamos outro loop <code>for</code> para percorrer os superpoderes do herói atual — para cada um criamos um elemento <code>&lt;li&gt;</code> colocamos o super poder dentro dele e colocamos o <code>listItem</code> dentro do elemento <code>&lt;ul&gt;</code> (<code>myList</code>) usando <code>appendChild()</code>.</li>
+ <li>A última coisa que fizemos foi acrescentar os <code>&lt;h2&gt;</code>, <code>&lt;p&gt;</code>s, e <code>&lt;ul&gt;</code> dentro do <code>&lt;article&gt;</code> (<code>myArticle</code>), depois acrescentar o <code>&lt;article&gt;</code> dentro do <code>&lt;section&gt;</code>. A ordem em que as coisas são anexadas é importante, pois essa é a ordem em que elas serão exibidas dentro do HTML.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está com problemas pegue um exemplo para trabalhar, tente nosso código fonte <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> (veja isso <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">ao vivo</a> também.)</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está tendo problemas para seguir a notação ponto / colchete que estamos usando para acessar o objeto JavaScript, pode ajudar a abrir o arquivo <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> em outra guia ou em seu editor de texto, e consultá-lo enquanto observa nosso JavaScript. Você também pode consultar o artigo sobre conceitos <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">O básico de objetos JavaScript</a> para obter mais informações sobre a notação de pontos e colchetes.</p>
+</div>
+
+<h2 id="Conversão_entre_objetos_e_texto">Conversão entre objetos e texto</h2>
+
+<p>O exemplo acima foi simples em termos de acesso ao objeto JavaScript, porque definimos a solicitação XHR para converter a resposta JSON diretamente em um objeto JavaScript usando:</p>
+
+<pre class="brush: js">request.responseType = 'json';</pre>
+
+<p>Mas às vezes não temos muita sorte — às vezes recebemos uma string JSON bruta e precisaremos convertê-la em um objeto por conta própria. E quando queremos enviar um objeto JavaScript pela rede, precisamos convertê-lo em JSON (uma string) antes de enviá-lo. Felizmente, esses dois problemas são tão comuns no desenvolvimento da Web que um objeto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> interno está disponível nos navegadores, o que contém os dois métodos a seguir:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: Aceita uma string JSON como um parâmetro e retorna o objeto JavaScript correspondente.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: Aceita um objeto como um parâmetro e retorna o formato equivalente de string JSON.</li>
+</ul>
+
+<p>Você pode ver o primeiro em ação em nosso exemplo <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> (veja o <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">source code</a>) — isso faz exatamente a mesma coisa que o exemplo que construímos anteriormente, exceto pelo fato de configurarmos o XHR para retornar texto JSON bruto, em seguida, usado <code>parse()</code> para convertê-lo em um objeto JavaScript real. O trecho principal do código está aqui:</p>
+
+<pre class="brush: js">request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  var superHeroesText = request.response; // get the string from the response
+  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<p>Como você pode imaginar, <code>stringify()</code> funciona da maneira oposta. Tente inserir as seguintes linhas no console JavaScript de seu navegador, uma por uma, para vê-lo em ação:</p>
+
+<pre class="brush: js">var myJSON = { "name": "Chris", "age": "38" };
+myJSON
+var myString = JSON.stringify(myJSON);
+myString</pre>
+
+<p>Aqui estamos criando um objeto JavaScript, em seguida, verificando o que ele contém, convertendo-o em uma string JSON usando <code>stringify()</code> — salvando o valor de retorno em uma nova variável — e, em seguida, verificando-o novamente.</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Neste artigo, fornecemos um guia simples para usar o JSON em seus programas, incluindo como criar e analisar o JSON e como acessar dados bloqueados nele. No próximo artigo começaremos a analisar o JavaScript orientado a objetos.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON">Objeto JSON página de refência</a></li>
+ <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest">Objeto XMLHttpRequest página de refência</a></li>
+ <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/pt-BR/docs/Web/HTTP/Methods">Métodos de requisição HTTP</a></li>
+ <li><a href="http://json.org">Site oficial JSON com o link para o padrão ECMA</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="Nesse_módulo">Nesse módulo</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Basics">O básico de objetos</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object-oriented_JS">Orientação a objetos em JavaScript para iniciantes</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object_prototypes">Protótipos de objetos</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Inheritance">Herança em JavaScript</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/JSON">Trabalhando com dados em JSON</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object_building_practice">Prática de construção de objetos</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adicionando melhorias para nossa demo bolas saltitantes</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/objects/object-oriented_js/index.html b/files/pt-br/learn/javascript/objects/object-oriented_js/index.html
new file mode 100644
index 0000000000..7772eec5cf
--- /dev/null
+++ b/files/pt-br/learn/javascript/objects/object-oriented_js/index.html
@@ -0,0 +1,275 @@
+---
+title: JavaScript orientado a objetos para iniciantes
+slug: Aprender/JavaScript/Objetos/Object-oriented_JS
+translation_of: Learn/JavaScript/Objects/Object-oriented_JS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Com o básico fora do caminho, agora vamos nos concentrar no JavaScript orientado a objetos (OOJS) — Este artigo apresenta uma visão básica da teoria de programação orientada a objeto (OOP), em seguida, explora como o JavaScript emula as classes de objetos através de funções de construtor e como criar instâncias de objeto.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Alfabetização básica em informática, um entendimento básico de HTML e CSS, familiaridade com o básico do JavaScript (consulte <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Blocos de construção</a>) e noções básicas do OOJS (consulte <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução aos objetos</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para entender a teoria básica por trás da programação orientada a objetos, como isso se relaciona com JavaScript ("tudo é um objeto") e como criar construtores e instâncias de objetos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Programação_orientada_a_objetos_-_o_básico">Programação orientada a objetos - o básico</h2>
+
+<p>Para começar, vamos dar uma visão simplista e de alto nível do que é programação orientada a objeto (OOP). Dizemos simplista, porque a OOP pode rapidamente se tornar muito complicada, e dar a ela um tratamento completo agora provavelmente confundiria mais do que ajuda. A idéia básica da OOP é que usamos objetos para modelar coisas do mundo real que queremos representar dentro de nossos programas, e / ou fornecer uma maneira simples de acessar funcionalidades que de outra forma seriam difíceis ou impossíveis de usar.</p>
+
+<p>Os objetos podem conter dados e códigos relacionados, que representam informações sobre o que você está tentando modelar e a funcionalidade ou o comportamento que você deseja ter. Dados de objeto (e muitas vezes, funções também) podem ser armazenados ordenadamente (a palavra oficial é <strong>encapsulados</strong>) dentro de um pacote de objetos (que pode ser dado um nome específico para se referir, que é às vezes chamado de <strong>namespace</strong>), tornando fácil de estruturar e acessar; objetos também são comumente usados como armazenamentos de dados que podem ser facilmente enviados pela rede.</p>
+
+<h3 id="Definindo_um_modelo_de_objeto">Definindo um modelo de objeto</h3>
+
+<p>Vamos considerar um programa simples que exibe informações sobre os alunos e professores de uma escola. Aqui vamos olhar para a teoria OOP em geral, não no contexto de qualquer linguagem de programação específica.</p>
+
+<p>Para começar, poderíamos retornar ao nosso tipo de objeto Person do nosso <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">primeiro artigo de objetos</a>, que define os dados genéricos e a funcionalidade de uma pessoa. Há muitas coisas que você poderia saber sobre uma pessoa (endereço, altura, tamanho do sapato, perfil de DNA, número de passaporte, traços de personalidade significativos ...), mas neste caso estamos interessados apenas em mostrar seu nome, idade, sexo e interesses, e também queremos ser capazes de escrever uma breve introdução sobre eles com base nesses dados e fazê-los dizer oi. Isso é conhecido como <strong>abstração</strong> — criando um modelo simples de uma coisa mais complexa, que representa seus aspectos mais importantes de uma forma que é fácil trabalhar com os objetivos do nosso programa.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p>
+
+<h3 id="Criando_objetos_reais">Criando objetos reais</h3>
+
+<p>De nossa classe, podemos criar <strong>instâncias de objeto</strong> — objetos que contêm os dados e a funcionalidade definidos na classe. Da nossa classe Person, podemos criar algumas pessoas reais:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p>
+
+<p>Quando uma instância de objeto é criada a partir de uma classe, a <strong>função construtora</strong> da classe é executada para criá-la. Esse processo de criação de uma instância de objeto de uma classe é chamado de <strong>instanciação</strong> — a instância do objeto é <strong>instanciada </strong>a partir da classe.</p>
+
+<h3 id="Classes_especialistas">Classes especialistas</h3>
+
+<p>Neste caso, não queremos pessoas genéricas — queremos professores e alunos, que são tipos mais específicos de pessoas. Em OOP, podemos criar novas classes com base em outras classes — essas novas <strong>classes filhas</strong> podem <strong>herdar </strong>os recursos de dados e código de sua <strong>classe pai</strong>, para que você possa reutilizar a funcionalidade comum a todos os tipos de objetos em vez de duplicá-los. Onde a funcionalidade difere entre as classes, você pode definir recursos especializados diretamente sobre eles, conforme necessário.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>Isso é realmente útil — professores e alunos compartilham muitos recursos comuns, como nome, sexo e idade, por isso é conveniente definir apenas esses recursos uma vez. Você também pode definir o mesmo recurso separadamente em classes diferentes, já que cada definição desse recurso estará em um namespace diferente. Por exemplo, a saudação de um aluno pode estar no formato "Yo, I'm [firstName]" (por exemplo, <em>Yo, I'm Sam</em>), enquanto um professor pode usar algo mais formal, como "Olá, meu nome é [Prefixo [lastName], e eu ensino [Subject]. " (por exemplo <em>Olá, Meu nome é Mr Griffiths, e eu ensino Química</em>).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: A palavra chique para a capacidade de múltiplos tipos de objeto de implementar a mesma funcionalidade é o <strong>polimorfismo</strong>. Apenas no caso de você estar se perguntando.</p>
+</div>
+
+<p>Agora você pode criar instâncias de objetos de suas classes filhas. Por exemplo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>No restante do artigo, começaremos a analisar como a teoria da POO pode ser colocada em prática no JavaScript.</p>
+
+<h2 id="Construtores_e_instâncias_de_objeto">Construtores e instâncias de objeto</h2>
+
+<p>O JavaScript usa funções especiais chamadas <strong>funções construtoras</strong> para definir objetos e seus recursos. Eles são úteis porque muitas vezes você encontrará situações em que não sabe quantos objetos estará criando; Os construtores fornecem os meios para criar quantos objetos forem necessários de forma eficaz, anexando dados e funções a eles, conforme necessário.</p>
+
+<p>Vamos explorar a criação de classes por meio de construtores e criar instâncias de objeto a partir deles em JavaScript. Primeiro de tudo, gostaríamos que você fizesse uma nova cópia local do arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> que vimos em nosso primeiro artigo Objetos.</p>
+
+<h3 id="Um_exemplo_simples">Um exemplo simples</h3>
+
+<ol>
+ <li>Vamos começar observando como você pode definir uma pessoa com uma função normal. Adicione esta função dentro do elemento <code>script</code>:
+
+  <pre class="brush: js">function createNewPerson(name) {
+  var obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + obj.name + '.');
+  };
+  return obj;
+}</pre>
+ </li>
+ <li>Agora você pode criar uma nova pessoa chamando essa função — tente as seguintes linhas no console JavaScript do seu navegador:
+  <pre class="brush: js">var salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();</pre>
+  Isso funciona bem o suficiente, mas é um pouco prolixo; Se sabemos que queremos criar um objeto, por que precisamos criar explicitamente um novo objeto vazio e devolvê-lo? Felizmente, o JavaScript nos fornece um atalho útil, na forma de funções de construtor — vamos criar um agora!</li>
+ <li>Substitua sua função anterior pelo seguinte:
+  <pre class="brush: js">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+ </li>
+</ol>
+
+<p>A função de construtor é a versão do JavaScript de uma classe. Você notará que ela tem todos os recursos que você espera em uma função, embora ela não retorne nada ou crie explicitamente um objeto — ela basicamente define propriedades e métodos. Você verá a palavra-chave <code>this</code> sendo usada aqui também — é basicamente dizer que sempre que uma dessas instâncias de objeto é criada, a propriedade <code>name</code>  do objeto será igual ao valor do nome passado à chamada do construtor, e o método <code>greeting()</code> usará o valor do nome passado para a chamada do construtor também.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Um nome de função de construtor geralmente começa com uma letra maiúscula — essa convenção é usada para tornar as funções do construtor mais fáceis de reconhecer no código.</p>
+</div>
+
+<p>Então, como podemos chamar um construtor para criar alguns objetos?</p>
+
+<ol>
+ <li>Adicione as seguintes linhas abaixo da sua adição de código anterior:
+  <pre class="brush: js">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+ </li>
+ <li>Salve seu código e recarregue-o no navegador e tente inserir as seguintes linhas em seu console JS:
+  <pre class="brush: js">person1.name
+person1.greeting()
+person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>Legal! Você verá agora que temos dois novos objetos na página, cada um deles armazenado em um namespace diferente — quando você acessa suas propriedades e métodos, é necessário iniciar chamadas com <code>person1</code> ou <code>person2</code>; a funcionalidade contida é cuidadosamente empacotada para que não entre em conflito com outras funcionalidades. Eles, no entanto, têm a mesma propriedade de <code>name</code> e o método <code>greeting()</code> disponível. Observe que eles estão usando seu próprio valor de <code>name</code> que foi atribuído a eles quando foram criados; Esta é uma razão pela qual é muito importante usar <code>this</code>, então eles usarão seus próprios valores e não algum outro valor.</p>
+
+<p>Vamos ver novamente as chamadas do construtor:</p>
+
+<pre class="brush: js">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+
+<p>Em cada caso, a palavra-chave <code>new</code> é usada para informar ao navegador que queremos criar uma nova instância de objeto, seguida pelo nome da função com seus parâmetros obrigatórios contidos entre parênteses, e o resultado é armazenado em uma variável — muito semelhante a como uma função padrão é chamada. Cada instância é criada de acordo com esta definição:</p>
+
+<pre class="brush: js">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+
+<p>Após a criação dos novos objetos, as variáveis <code>person1</code> e <code>person2</code> contêm os seguintes objetos:</p>
+
+<pre class="brush: js">{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>Note que quando estamos chamando nossa função de construtor, estamos definindo <code>greeting()</code> toda vez, o que não é ideal. Para evitar isso, podemos definir funções no protótipo, que veremos mais adiante.</p>
+
+<h3 id="Criando_nosso_construtor_acabado">Criando nosso construtor acabado</h3>
+
+<p>O exemplo que vimos acima foi apenas um exemplo simples para começarmos. Vamos agora começar e criar nossa função final do construtor <code>Person()</code>.</p>
+
+<ol>
+ <li>Remova o código que você inseriu até agora e inclua este construtor de substituição — isso é exatamente o mesmo que o exemplo simples em princípio, com um pouco mais de complexidade:
+  <pre class="brush: js">function Person(first, last, age, gender, interests) {
+  this.name = {
+    'first': first,
+    'last' : last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+}</pre>
+ </li>
+ <li>Agora adicione a seguinte linha abaixo, para criar uma instância de objeto a partir dela:
+  <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+ </li>
+</ol>
+
+<p>Agora você verá que pode acessar as propriedades e os métodos exatamente como fizemos anteriormente — Tente isso no seu console JS:</p>
+
+<pre class="brush: js">person1['age']
+person1.interests[1]
+person1.bio()
+// etc.</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está tendo problemas para fazer isso funcionar, tente comparar seu código com a nossa versão — veja o código em <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (também <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">você pode ve-lo sendo executado aqui</a>).</p>
+</div>
+
+<h3 id="Exercícios_adicionais">Exercícios adicionais</h3>
+
+<p>Para começar, tente adicionar mais algumas linhas de criação de objetos e tente obter e configurar os membros das instâncias de objetos resultantes.</p>
+
+<p>Além disso, há alguns problemas com nosso método  <code>bio()</code> — a saída sempre inclui o pronome "Ele", mesmo que sua pessoa seja do sexo feminino ou alguma outra classificação de gênero preferida. E a biografia incluirá apenas dois interesses, mesmo que mais sejam listados na matriz <code>interests</code>. Você pode descobrir como corrigir isso na definição de classe (construtor)? Você pode colocar qualquer código que você gosta dentro de um construtor (você provavelmente precisará de alguns condicionais e um loop). Pense em como as sentenças devem ser estruturadas de maneira diferente dependendo do gênero e dependendo se o número de interesses listados é 1, 2 ou mais de 2.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you get stuck, we have provided an <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">answer inside our GitHub repo</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — try writing it yourself first though!</p>
+</div>
+
+<h2 id="Outras_maneiras_de_criar_instâncias_de_objeto">Outras maneiras de criar instâncias de objeto</h2>
+
+<p>Até agora, vimos duas maneiras diferentes de criar uma instância de objeto — <a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">declarar um literal de objeto</a>, e usar uma função de construtor (veja acima).</p>
+
+<p>Isso faz sentido, mas existem outras maneiras — queremos familiarizá-lo com essas informações caso você as encontre em suas viagens pela Web.</p>
+
+<h3 id="O_construtor_Object">O construtor Object() </h3>
+
+<p>Primeiro de tudo, você pode usar o construtor <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> para criar um novo objeto. Sim, até objetos genéricos possuem um construtor, o que gera um objeto vazio.</p>
+
+<ol>
+ <li>Tente inserir isso no console JavaScript do seu navegador:
+  <pre class="brush: js">var person1 = new Object();</pre>
+ </li>
+ <li>Isso armazena um objeto vazio na variável <code>person1</code>. Você pode adicionar propriedades e métodos a esse objeto usando a notação de pontos ou colchetes conforme desejado; tente estes exemplos no seu console:
+  <pre class="brush: js">person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};</pre>
+ </li>
+ <li>Você também pode passar um literal de objeto para o construtor <code>Object()</code> como um parâmetro, para preenchê-lo com propriedades / métodos. Tente isso no seu console JS:
+  <pre class="brush: js">var person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});</pre>
+ </li>
+</ol>
+
+<h3 id="Usando_o_método_create">Usando o método create()</h3>
+
+<p>Os construtores podem ajudá-lo a fornecer seu pedido de código — você pode criar construtores em um único local e, em seguida, criar instâncias conforme necessário, e fica claro de onde eles vieram.</p>
+
+<p>No entanto, algumas pessoas preferem criar instâncias de objeto sem primeiro criar construtores, especialmente se estiverem criando apenas algumas instâncias de um objeto. JavaScript tem um método embutido chamado <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> que permite que você faça isso. Com ele, você pode criar um novo objeto com base em qualquer objeto existente.</p>
+
+<ol>
+ <li>Com o exercício concluído das seções anteriores carregadas no navegador, tente isso no seu console JavaScript:
+  <pre class="brush: js">var person2 = Object.create(person1);</pre>
+ </li>
+ <li>Agora tente estes:
+  <pre class="brush: js">person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>Você verá que a <code>person2</code> foi criada com base na  <code>person1</code>  —  ela tem as mesmas propriedades e métodos disponíveis para ela.</p>
+
+<p>Uma limitação do <code>create()</code>  é que o IE8 não o suporta. Então os construtores são mais efetivos se você quiser que funcione em navegadores antigos.</p>
+
+<p>Vamos explorar os efeitos de <code>create()</code> em mais detalhes posteriormente.</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Este artigo forneceu uma visão simplificada da teoria orientada a objetos — isso não é toda a história, mas dá uma idéia do que estamos lidando aqui. Além disso, começamos a analisar diferentes maneiras de gerar instâncias de objetos.</p>
+
+<p>No próximo artigo, vamos explorar os protótipos de objetos JavaScript.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Basics">O básico de objetos</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object-oriented_JS">Orientação a objetos em JavaScript para iniciantes</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object_prototypes">Protótipos de objetos</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Inheritance">Herença em JavaScript</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/JSON">Trabalhando com dados em JSON</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object_building_practice">Prática de construção de objetos</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adicionando melhorias no nossa demo bolas saltitantes</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/objects/object_building_practice/index.html b/files/pt-br/learn/javascript/objects/object_building_practice/index.html
new file mode 100644
index 0000000000..4c4ab6c629
--- /dev/null
+++ b/files/pt-br/learn/javascript/objects/object_building_practice/index.html
@@ -0,0 +1,300 @@
+---
+title: Prática de construção de objetos
+slug: Aprender/JavaScript/Objetos/Object_building_practice
+translation_of: Learn/JavaScript/Objects/Object_building_practice
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Nos artigos anteriores, analisamos todos os detalhes essenciais da teoria e da sintaxe do objeto JavaScript, fornecendo uma base sólida para começar. Neste artigo, vamos mergulhar em um exercício prático, dando a você mais prática na construção de objetos JavaScript personalizados, com um resultado divertido e colorido.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Conhecimentos básicos de informática, conhecimento básico de HTML e CSS, familiaridade com o básico de JavaScript (veja <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) e o básico de OOJS (veja <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>Adiquirir alguma prática no uso de objetos e técnicas de orientação a objetos num contexto real.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vamos_saltitar_algumas_bolas">Vamos saltitar algumas bolas</h2>
+
+<p>Neste artigo, vamos escrever uma demo clássica de "bolas saltitantes", para mostrar o quão úteis os objetos podem ser em JavaScript. Nossas bolinhas vão saltar pela tela e mudam de cor quando se tocam. O exemplo acabado vai parecer um pouco assim:<img alt="" src="https://mdn.mozillademos.org/files/13865/bouncing-balls.png" style="display: block; height: 614px; margin: 0px auto; width: 800px;"></p>
+
+<ol>
+</ol>
+
+<p>Este exemplo fará uso da <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Canvas API</a>, para desenhar as bolas na tela, e da <a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> API para animar toda a exibição — você não precisa ter nenhum conhecimento prévio dessas APIs e esperamos que, no momento em que você terminar este artigo, você esteja interessado em explorá-los mais. Ao longo do caminho, faremos uso de alguns objetos bacanas, e mostraremos algumas técnicas legais, como bolas quicando nas paredes, e verificando se elas se chocaram (também conhecidas como <strong>detecção de colisão</strong>).</p>
+
+<h2 id="Começando">Começando</h2>
+
+<p>Para começar, faça cópias locais de nossos arquivos  <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a></code>, e <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js">main.js</a></code>. Estes contêm o seguinte, respectivamente:</p>
+
+<ol>
+ <li>Um documento HTML muito simples com um elemento {{HTMLElement("h1")}}, um elemento {{HTMLElement("canvas")}} para desenhar nossas bolas e elementos para aplicar nosso CSS e JavaScript em nosso HTML.</li>
+ <li>Alguns estilos muito simples, que servem principalmente para estilizar e posicionar o <code>&lt;h1&gt;</code>, e se livrar de qualquer barra de rolagem ou margem ao redor da borda da página (para que fique bonito e arrumado).</li>
+ <li>Algum JavaScript que serve para configurar o elemento <code>&lt;canvas&gt;</code> e fornecer uma função geral que vamos usar.</li>
+</ol>
+
+<p>A primeira parte do script é assim:</p>
+
+<pre class="brush: js">const canvas = document.querySelector('canvas');
+
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width = window.innerWidth;
+const height = canvas.height = window.innerHeight;</pre>
+
+<p>Esse script obtém uma referência ao elemento <code>&lt;canvas&gt;</code> e, em seguida, chama o método <code><a href="/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext()</a></code> para nos fornecer um contexto no qual podemos começar a desenhar. A variável resultante (<code>ctx</code>) é o objeto que representa diretamente a área de desenho da tela e nos permite desenhar formas 2D nela.</p>
+
+<p>Em seguida, definimos variáveis chamadas <code>width</code> e <code>height</code>, e a largura e altura do elemento canvas (representado pelas propriedades <code>canvas.width</code> e <code>canvas.height</code>) para igualar a largura e a altura da viewport do navegador (a área em que a página da Web aparece — isso pode ser obtido das propriedades {{domxref("Window.innerWidth")}} e {{domxref("Window.innerHeight")}} ).</p>
+
+<p>Você verá aqui que estamos encadeando várias tarefas juntas, para que as variáveis sejam todas mais rápidas — isso é perfeitamente aceitável.</p>
+
+<p>A última parte do script inicial é a seguinte:</p>
+
+<pre class="brush: js">function random(min, max) {
+  const num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}</pre>
+
+<p>Essa função usa dois números como argumentos e retorna um número aleatório no intervalo entre os dois.</p>
+
+<h2 id="Modelando_uma_bola_no_nosso_programa">Modelando uma bola no nosso programa</h2>
+
+<p>Nosso programa contará com muitas bolas saltando ao redor da tela. Como todas essas bolas se comportarão da mesma maneira, faz sentido representá-las com um objeto. Vamos começar adicionando o construtor a seguir ao final do código.</p>
+
+<pre class="brush: js">function Ball(x, y, velX, velY, color, size) {
+  this.x = x;
+  this.y = y;
+  this.velX = velX;
+  this.velY = velY;
+  this.color = color;
+  this.size = size;
+}</pre>
+
+<p>Aqui incluímos alguns parâmetros que definem as propriedades que cada bola precisa para funcionar em nosso programa:</p>
+
+<ul>
+ <li>coordenadas <code>x</code> e <code>y</code> — coordenadas horizontal e vertical onde a bola vai começar na tela. Isso pode variar entre 0 (canto superior esquerdo) à largura e altura da janela de visualização do navegador (canto inferior direito).</li>
+ <li>velocidade horizontal e vertical (<code>velX</code> e <code>velY</code>) — cada bola recebe uma velocidade horizontal e vertical; em termos reais, esses valores serão adicionados regularmente aos valores das coordenadas <code>x</code>/<code>y</code> quando começarmos a animar as bolas, para movê-las tanto em cada quadro.</li>
+ <li><code>color</code> — cada bola recebe uma cor.</li>
+ <li><code>size</code> — cada bola recebe um tamanho — este será o seu raio, em pixels.</li>
+</ul>
+
+<p>Isso classifica as propriedades, mas e os métodos? Queremos realmente fazer com que nossas bolas façam algo em nosso programa.</p>
+
+<h3 id="Desenhando_a_bola">Desenhando a bola</h3>
+
+<p>Primeiro adicione o seguinte método <code>draw()</code> ao <code>prototype</code> do <code>Ball()</code>:</p>
+
+<pre class="brush: js">Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<p>Usando esta função, podemos dizer a nossa bola para desenhar-se na tela, chamando uma série de membros do contexto de tela 2D que definimos anteriormente (<code>ctx</code>). O contexto é como o papel, e agora queremos comandar nossa caneta para desenhar algo nela:</p>
+
+<ul>
+ <li>Primeiro, usamos <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> para declarar que queremos desenhar uma forma no papel.</li>
+ <li>Em seguida, usamos <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> para definir a cor que queremos que a forma seja — nós a definimos como a propriedade <code>color</code> da nossa bola.</li>
+ <li>Em seguida, usamos o método  <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/arc">arc()</a></code> para traçar uma forma de arco no papel. Seus parâmetros são:
+  <ul>
+   <li>A posição <code>x</code> e <code>y</code> do centro do arco — estamos especificando as propriedades <code>x</code> e <code>y</code> da nossa bola.</li>
+   <li>O raio do nosso arco — estamos especificando a propriedade <code>size</code>  da nossa bola.</li>
+   <li>Os dois últimos parâmetros especificam o número inicial e final de graus em volta do círculo em que o arco é desenhado entre eles. Aqui nós especificamos 0 graus e <code>2 * PI</code>, que é o equivalente a 360 graus em radianos (irritantemente, você tem que especificar isso em radianos). Isso nos dá um círculo completo. Se você tivesse especificado apenas <code>1 * PI</code>, você obteria um semicírculo (180 graus).</li>
+  </ul>
+ </li>
+ <li>Por último, usamos o método <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code>, que basicamente diz "terminar de desenhar o caminho que começamos com <code>beginPath()</code>, e preencher a área que ocupa com a cor que especificamos anteriormente em <code>fillStyle</code>."</li>
+</ul>
+
+<p>Você pode começar a testar seu objeto já.</p>
+
+<ol>
+ <li>Salve o código até o momento e carregue o arquivo HTML em um navegador.</li>
+ <li>Abra o console JavaScript do navegador e, em seguida, atualize a página para que o tamanho da tela mude para a viewport menor visível deixada quando o console for aberto.</li>
+ <li>Digite o seguinte para criar uma nova instância de bola:
+  <pre class="brush: js">let testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre>
+ </li>
+ <li>Tente chamar seus membros:
+  <pre class="brush: js">testBall.x
+testBall.size
+testBall.color
+testBall.draw()</pre>
+ </li>
+ <li>Quando você entra na última linha, você deve ver a bola se desenhando em algum lugar na sua tela.</li>
+</ol>
+
+<h3 id="Atualizando_os_dados_da_bola">Atualizando os dados da bola</h3>
+
+<p>Podemos desenhar a bola na posição, mas para começar a mover a bola, precisamos de uma função de atualização de algum tipo. Adicione o seguinte código na parte inferior do seu arquivo JavaScript, para adicionar um método  <code>update()</code> ao <code>prototype</code> do <code>Ball()</code>:</p>
+
+<pre class="brush: js">Ball.prototype.update = function() {
+  if ((this.x + this.size) &gt;= width) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.x - this.size) &lt;= 0) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.y + this.size) &gt;= height) {
+    this.velY = -(this.velY);
+  }
+
+  if ((this.y - this.size) &lt;= 0) {
+    this.velY = -(this.velY);
+  }
+
+  this.x += this.velX;
+  this.y += this.velY;
+}</pre>
+
+<p>As primeiras quatro partes da função verificam se a bola atingiu a borda da tela. Se tiver, invertemos a polaridade da velocidade relevante para fazer a bola viajar na direção oposta. Assim, por exemplo, se a bola estava viajando para cima (positivo <code>velY</code>), então a velocidade vertical é alterada de forma que ela comece a viajar para baixo (negativo <code>velY</code>).</p>
+
+<p>Nos quatro casos, estamos verificando se:</p>
+
+<ul>
+ <li>Se a coordenada <code>x</code> é maior que a largura da tela (a bola está saindo da borda direita).</li>
+ <li>Se a coordenada <code>x</code> é menor que 0 (a bola está saindo da borda esquerda).</li>
+ <li>Se a coordenada <code>y</code> é maior que a altura da tela (a bola está saindo da borda inferior).</li>
+ <li>Se a coordenada <code>y</code> é menor que 0 (a bola está saindo da borda superior).</li>
+</ul>
+
+<p>Em cada caso, estamos incluindo o <code>size</code> da bola no cálculo, porque as coordenadas <code>x</code>/<code>y</code> estão no centro da bola, mas queremos que a borda da bola saia do perímetro — não queremos a bola para fique no meio da tela antes de quicar de volta.</p>
+
+<p>As duas últimas linhas adicionam o valor <code>velX</code> à coordenada <code>x</code>, e o valor <code>velY</code> à coordenada <code>y</code> —  a bola é efitivamente movida cada vez que este método é chamado.</p>
+
+<p>Isso é o que será feito por ora; vamos continuar com alguma animação!</p>
+
+<h2 id="Animando_a_bola">Animando a bola</h2>
+
+<p>Agora vamos tornar isso divertido. Vamos começar a adicionar bolas à tela e a animá-las.</p>
+
+<ol>
+ <li>Primeiro, precisamos de um lugar para armazenar todas as nossas bolas. O array a seguir fará esse trabalho — adicione-o ao final do seu código agora:
+  <pre class="brush: js">let balls = [];</pre>
+
+  <p>Todos os programas que animam as coisas geralmente envolvem um loop de animação, que serve para atualizar as informações no programa e renderizar a visualização resultante em cada quadro da animação; esta é a base para a maioria dos jogos e outros programas.</p>
+ </li>
+ <li>Adicione o seguinte ao final do seu código agora:
+  <pre class="brush: js">function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  while (balls.length &lt; 25) {
+    let size = random(10,20);
+    let ball = new Ball(
+      // ball position always drawn at least one ball width
+      // away from the edge of the canvas, to avoid drawing errors
+      random(0 + size,width - size),
+      random(0 + size,height - size),
+      random(-7,7),
+      random(-7,7),
+      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+      size
+    );
+    balls.push(ball);
+  }
+
+  for (let i = 0; i &lt; balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}</pre>
+
+  <p>Nossa função <code>loop()</code> faz o seguinte:</p>
+
+  <ul>
+   <li>Define a cor de preenchimento da tela como preto semitransparente e desenha um retângulo com a cor em toda a largura e altura da tela, usando <code>fillRect()</code> (os quatro parâmetros fornecem uma coordenada de início e uma largura e altura para o retângulo desenhado ). Isso serve para encobrir o desenho do quadro anterior antes que o próximo seja desenhado. Se você não fizer isso, você verá apenas longas cobras se movimentando ao redor da tela, em vez de mover as bolas! A cor do preenchimento é definida como semitransparente, <code>rgba(0,0,0,0.25)</code>, para permitir que os poucos quadros anteriores brilhem levemente, produzindo as pequenas trilhas atrás das bolas à medida que elas se movem. Se você mudou 0,25 para 1, você não vai mais vê-los. Tente variar esse número para ver o efeito que ele tem.</li>
+   <li>Cria uma nova instância de nossa  <code>Ball()</code> usando valores aleatórios gerados com a nossa função  <code>random()</code> então <code>push()</code>para o final de nosso array de bolas, mas somente enquanto o número de bolas no array é menor que 25. Então quando temos 25 bolas na tela, não aparecem mais bolas. Você pode tentar variar o número em<code>balls.length &lt; 25</code> para obter mais ou menos bolas na tela. Dependendo de quanto poder de processamento seu computador / navegador possui, especificar vários milhares de bolas pode retardar bastante a animação!</li>
+   <li>Faz um loop em todas as <code>balls</code> no array de bolas e executa a função <code>draw()</code> e <code>update()</code> de cada bola para desenhar cada uma delas na tela, depois faz as atualizações necessárias para a posição e a velocidade no tempo para o próximo quadro.</li>
+   <li>Executa a função novamente usando o método <code>requestAnimationFrame()</code> — quando esse método é executado constantemente e passa o mesmo nome de função, ele executará essa função um número definido de vezes por segundo para criar uma animação suave. Isso geralmente é feito de forma recursiva — o que significa que a função está chamando a si mesma toda vez que é executada, portanto, ela será executada repetidas vezes.</li>
+  </ul>
+ </li>
+ <li>Por último mas não menos importante, adicione a seguinte linha à parte inferior do seu código — precisamos chamar a função uma vez para iniciar a animação.
+  <pre class="brush: js">loop();</pre>
+ </li>
+</ol>
+
+<p>É isso para o básico — tente salvar e atualizar para testar suas bolas quicando!</p>
+
+<h2 id="Adicionando_detecção_de_colisão">Adicionando detecção de colisão</h2>
+
+<p>Agora, para um pouco de diversão, vamos adicionar alguma detecção de colisão ao nosso programa, para que nossas bolas saibam quando bateram em outra bola.</p>
+
+<ol>
+ <li>Primeiro de tudo, adicione a seguinte definição de método abaixo onde você definiu o método  <code>update()</code> (ou seja, o bloco <code>Ball.prototype.update</code>).
+
+  <pre class="brush: js">Ball.prototype.collisionDetect = function() {
+  for (let j = 0; j &lt; balls.length; j++) {
+    if (!(this === balls[j])) {
+      const dx = this.x - balls[j].x;
+      const dy = this.y - balls[j].y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance &lt; this.size + balls[j].size) {
+        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+      }
+    }
+  }
+}</pre>
+
+  <p>Esse método é um pouco complexo, então não se preocupe se você não entender exatamente como isso funciona agora. Uma explicação a seguir:</p>
+
+  <ul>
+   <li>Para cada bola, precisamos checar todas as outras bolas para ver se ela colidiu com a bola atual. Para fazer isso, abrimos outro loop <code>for</code> para percorrer todas as bolas no array <code>balls[]</code>.</li>
+   <li>Imediatamente dentro de nosso loop for, usamos uma instrução  <code>if</code> para verificar se a bola atual em loop é a mesma bola que estamos verificando no momento. Não queremos verificar se uma bola colidiu consigo mesma! Para fazer isso, verificamos se a bola atual (ou seja, a bola cujo método collisionDetect está sendo invocado) é a mesma que a bola de loop (ou seja, a bola que está sendo referenciada pela iteração atual do loop for no collisionDetect método). Nós então usamos <code>!</code> para negar a verificação, para que o código dentro da instrução if seja executado apenas se eles não forem iguais.</li>
+   <li>Em seguida, usamos um algoritmo comum para verificar a colisão de dois círculos. Estamos basicamente verificando se alguma das áreas dos dois círculos se sobrepõe. Isso é explicado ainda mais na <a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a>.</li>
+   <li>Se uma colisão for detectada, o código dentro da instrução <code>if</code> interna será executado. Neste caso, estamos apenas definindo a propriedade <code>color</code> de ambos os círculos para uma nova cor aleatória. Poderíamos ter feito algo muito mais complexo, como fazer com que as bolas saltassem umas das outras de forma realista, mas isso teria sido muito mais complexo de implementar. Para essas simulações físicas, os desenvolvedores tendem a usar jogos ou bibliotecas físicas, como <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a>, etc.</li>
+  </ul>
+ </li>
+ <li>Você também precisa chamar esse método em cada quadro da animação. Adicione o seguinte abaixo do <code>balls[i].update();</code>:
+  <pre class="brush: js">balls[i].collisionDetect();</pre>
+ </li>
+ <li>Salve e atualize a demonstração novamente, e você verá suas bolas mudando de cor quando colidirem!</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble getting this example to work, try comparing your JavaScript code against our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">finished version</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">running live</a>).</p>
+</div>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Esperamos que você tenha se divertido escrevendo seu próprio exemplo de bolas saltitantes aleatórias do mundo real, usando várias técnicas orientadas a objetos e objetos de todo o módulo! Isso deve ter lhe dado alguma prática útil no uso de objetos e um bom contexto do mundo real.</p>
+
+<p>É isso para artigos de objetos — tudo o que resta agora é para você testar suas habilidades na avaliação de objetos.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> — um guia para iniciantes sobre o uso de telas (canvas) 2D .</li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a> — um ótimo tutorial para iniciantes que mostra como criar um jogo 2D.</li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser">2D breakout game using Phaser</a> — explica conceitos básicos da criação de um jogo 2D utilizando uma biblioteca JavaScript.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/objects/object_prototypes/index.html b/files/pt-br/learn/javascript/objects/object_prototypes/index.html
new file mode 100644
index 0000000000..c574781301
--- /dev/null
+++ b/files/pt-br/learn/javascript/objects/object_prototypes/index.html
@@ -0,0 +1,269 @@
+---
+title: Protótipos de objetos
+slug: Aprender/JavaScript/Objetos/Object_prototypes
+translation_of: Learn/JavaScript/Objects/Object_prototypes
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Protótipos são o mecanismo pelo qual objetos JavaScript herdam recursos uns dos outros. Neste artigo, explicamos como as cadeias de protótipos funcionam e observamos como a propriedade prototype pode ser usada para adicionar métodos aos construtores existentes.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Entender como funções em JavaScript funcionam, familiaridade com o básico de JavaScript (veja <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros Passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Elementos Construtivos</a>), e o básico de Orientação a Objetos em JavaScript (veja <a href="/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a Objetos</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender protótipos de objetos JavaScript, como a cadeia de protótipos funciona, e como adicionar novos métodos à propriedade <em>prototype.</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Uma_linguagem_baseada_em_protótipos">Uma linguagem baseada em protótipos?</h2>
+
+<p>O JavaScript é frequentemente descrito como uma <strong>linguagem baseada em protótipos</strong> — para fornecer herança, os objetos podem ter um <strong>objeto de protótipo</strong>, que atua como um objeto de modelo do qual herda métodos e propriedades. O objeto de protótipo de um objeto também pode ter um objeto de protótipo, do qual herda métodos e propriedades, e assim por diante. Isso geralmente é chamado de <strong>cadeia de protótipos</strong> e explica por que objetos diferentes têm propriedades e métodos definidos em outros objetos disponíveis para eles.</p>
+
+<p>Bem, para ser exato, as propriedades e os métodos são definidos na propriedade <code>prototype</code> nas funções construtoras dos Objetos, não nas próprias instâncias do objeto.</p>
+
+<p>Em JavaScript, é feito um link entre a instância do objeto e seu protótipo (sua propriedade  <code>__proto__</code>, que é derivada da propriedade <code>prototype</code> no construtor), e as propriedades e os métodos são encontrados percorrendo a cadeia de protótipos.</p>
+
+<div class="note">
+<p><strong>Note:</strong> É importante entender que há uma distinção entre o protótipo de um objeto (que está disponível por meio de <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(obj)</a></code>, ou por meio da propriedade <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> ) e a propriedade <code>prototype</code> em funções construtoras. O primeiro é a propriedade em cada instância e o último é a propriedade no construtor. Ou seja, <code>Object.getPrototypeOf(new Foobar())</code> efere-se ao mesmo objeto que <code>Foobar.prototype</code>.</p>
+</div>
+
+<p>Vejamos um exemplo para tornar isso um pouco mais claro.</p>
+
+<h2 id="Noções_básicas_sobre_objetos_de_protótipo">Noções básicas sobre objetos de protótipo</h2>
+
+<p>Aqui voltaremos ao exemplo em que terminamos de escrever nosso construtor <code>Person()</code> — carregamos o exemplo em seu navegador. Se você ainda não o conseguiu trabalhar no último artigo, use nosso exemplo  <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">código-fonte</a>).</p>
+
+<p>Neste exemplo, definimos uma função construtora, assim:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+
+  // property and method definitions
+  this.first = first;
+  this.last = last;
+//...
+}</pre>
+
+<p>Nós criamos então uma instância de objeto como esta:</p>
+
+<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+
+<p>Se você digitar "<code>person1.</code>" em seu console JavaScript, você deve ver o navegador tentar concluir automaticamente isso com os nomes de membros disponíveis neste objeto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Nesta lista, você verá os membros definidos no construtor de <code>person1</code>'s constructor — <code>Person()</code> — <code>name</code>, <code>age</code>, <code>gender</code>, <code>interests</code>, <code>bio</code>, e <code>greeting</code>. No entanto, você também verá alguns outros membros — <code>watch</code>, <code>valueOf</code>, etc — estes estão definidos no objeto de protótipo do <code>Person()</code>, que é <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p>
+
+<p>O que acontece se você chamar um método em <code>person1</code>, que é realmente definido em <code>Object</code>? Por exemplo:</p>
+
+<pre class="brush: js">person1.valueOf()</pre>
+
+<p>Este método — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.valueOf()</a></code> é herdado por  <code>person1</code> porque seu construtor é <code>Person()</code>, e o protótipo de <code>Person()</code> é  <code>Object()</code>. <code>valueOf()</code> retorna o valor do objeto em que é chamado — experimente e veja! Nesse caso, o que acontece é:</p>
+
+<ul>
+ <li>O navegador verifica inicialmente se o objeto  <code>person1</code> tem um método  <code>valueOf()</code> disponível nele, conforme definido em seu construtor, <code>Person()</code>.</li>
+ <li>Se não tem, então o navegador verifica se o objeto (<code>Object()</code>) de protótipo do construtor <code>Person()</code> tem um método <code>valueOf()</code> disponível, então ele é chamado, e tudo está bem!</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Queremos reiterar que os métodos e as propriedades <strong>não </strong>são copiados de um objeto para outro na cadeia de protótipos — eles são acessados ao percorrer a cadeia como descrito acima.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Não existe uma maneira oficial de acessar diretamente o objeto protótipo de um objeto — os "links" entre os itens da cadeia são definidos em uma propriedade interna, chamada de <code>[[prototype]]</code> na especificação da linguagem JavaScript (veja {{glossary("ECMAScript")}}). A maioria dos navegadores modernos, no entanto, tem uma propriedade disponível neles chamada <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> (que é sublinhada em ambos os lados), que contém o objeto de protótipo do construtor do objeto. Por exemplo, tente <code>person1.__proto__</code> and <code>person1.__proto__.__proto__</code> para ver como a cadeia se parece no código!</p>
+
+<p>Desde ECMAScript 2015 você pode acessar o objeto protótipo de um objeto indiretamente via <code>Object.getPrototypeOf(obj)</code>.</p>
+</div>
+
+<h2 id="A_propriedade_prototype_Onde_os_membros_herdados_são_definidos">A propriedade prototype: Onde os membros herdados são definidos</h2>
+
+<p>Então, onde estão as propriedades e os métodos herdados definidos? Se você observar a página de referência do  <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, verá, à esquerda, um grande número de propriedades e métodos — muito mais do que o número de membros herdados que vimos disponíveis no objeto <code>person1</code>. Alguns são herdados e outros não — por que isso acontece?</p>
+
+<p>Como mencionado acima, os herdados são os definidos na propriedade  <code>prototype</code> (você poderia chamá-lo de um subespaço de nomes) — ou seja, aqueles que começam com <code>Object.prototype.</code>, e não os que começam com apenas <code>Object.</code> O valor da propriedade <code>prototype</code> é um objeto, que é basicamente um bucket para armazenar propriedades e métodos que queremos que sejam herdados por objetos mais abaixo na cadeia de protótipos.</p>
+
+<p>Portanto, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">Object.prototype.watch()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a></code>, etc., estão disponíveis para qualquer tipo de objeto que herda de <code>Object.prototype</code>, incluindo novas instâncias de objeto criadas a partir do construtor <code>Person()</code>.</p>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>, e outros membros não definidos dentro do bloco <code>prototype</code> não são herdados por instâncias de objetos ou tipos de objetos que herdam de <code>Object.prototype</code>. Eles são métodos / propriedades disponíveis apenas no próprio construtor <code>Object()</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Isso parece estranho — como você pode ter um método definido em um construtor, que é em si uma função? Bem, uma função também é um tipo de objeto — veja a referência do construtor <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> se você não acredita em nós.</p>
+</div>
+
+<ol>
+ <li>Você pode conferir as propriedades de protótipo existentes para si mesmo — volte ao nosso exemplo anterior e tente inserir o seguinte no console JavaScript:
+  <pre class="brush: js">Person.prototype</pre>
+ </li>
+ <li>A saída não mostrará muito porque não definimos nada no protótipo do nosso construtor personalizado! Por padrão, o  <code>prototype</code> de um construtor sempre começa vazio. Agora tente o seguinte:
+  <pre class="brush: js">Object.prototype</pre>
+ </li>
+</ol>
+
+<p>Você verá um grande número de métodos definidos na propriedade <code>prototype</code>  do  <code>Object</code>, que estão disponíveis em objetos que herdam  <code>Object</code>, como mostrado anteriormente.</p>
+
+<p>Você verá outros exemplos de herança de cadeia de protótipos em todo o JavaScript — tente procurar os métodos e propriedades definidos no protótipo dos objetos globais <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code>, e <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, por exemplo. Estes todos têm um número de membros definidos em seu protótipo, e é por isso que, por exemplo, quando você cria uma string, como esta:</p>
+
+<pre class="brush: js">var myString = 'This is my string.';</pre>
+
+<p><code>myString</code> imediatamente tem vários métodos úteis disponíveis, como <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>, etc.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Vale a pena ler nosso guia mais aprofundado sobre <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Using_prototypes_in_JavaScript">Como usar protótipos em JavaScript</a>, uma vez que você tenha entendido esta seção e queira saber mais. Esta seção é intencionalmente simplificada para tornar esses conceitos um pouco mais fáceis de entender quando você os conhecer pela primeira vez.</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: A propriedade <code>prototype</code> é uma das partes com o nome mais confuso do JavaScript — você pode pensar que <code>this</code> aponta para o objeto de protótipo do objeto atual, mas não (esse é um objeto interno que pode ser acessado por <code>__proto__</code>, lembra?) . Em vez disso, <code>prototype</code> é uma propriedade que contém um objeto no qual você define os membros que deseja herdar.</p>
+</div>
+
+<h2 id="Revisitando_create">Revisitando create()</h2>
+
+<p>Anteriormente mostramos como o método <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> pode ser usado para criar uma nova instância de objeto.</p>
+
+<ol>
+ <li>Por exemplo, tente isso no console JavaScript do seu exemplo anterior:
+  <pre class="brush: js">var person2 = Object.create(person1);</pre>
+ </li>
+ <li>O que <code>create()</code> realmente faz é criar um novo objeto a partir de um objeto de protótipo especificado. Aqui, <code>person2</code> está sendo criado usando  <code>person1</code> como um objeto de protótipo. Você pode verificar isso inserindo o seguinte no console:
+  <pre class="brush: js">person2.__proto__</pre>
+ </li>
+</ol>
+
+<p>Isso retornará o <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">person1</span></font>.</p>
+
+<h2 id="A_propriedade_do_construtor">A propriedade do construtor</h2>
+
+<p>Toda função de construtor possui uma propriedade prototype cujo valor é um objeto que contém uma propriedade <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code>. Esta propriedade construtora aponta para a função construtora original. Como você verá na próxima seção, as propriedades definidas na propriedade Person.prototype (ou, em geral, na propriedade prototype de uma função construtora, que é um objeto, conforme mencionado na seção acima) tornam-se disponíveis para todos os objetos de instância criados usando Construtor Person(). Portanto, a propriedade constructor também está disponível para os objetos person1 e person2.</p>
+
+<ol>
+ <li>Por exemplo, tente estes comandos no console:
+  <pre class="brush: js">person1.constructor
+person2.constructor</pre>
+
+  <p>Estes devem retornar o construtor <code>Person()</code>, pois contém a definição original dessas instâncias.</p>
+
+  <p>Um truque inteligente é que você pode colocar parênteses no final da propriedade do <code>constructor</code> (contendo quaisquer parâmetros necessários) para criar outra instância de objeto daquele construtor. O construtor é uma função depois de tudo, então pode ser chamado usando parênteses; você só precisa incluir a palavra-chave <code>new</code> para especificar que deseja usar a função como um construtor.</p>
+ </li>
+ <li>Tente isso no console:
+  <pre class="brush: js">var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre>
+ </li>
+ <li>Agora tente acessar os recursos do seu novo objeto, por exemplo:
+  <pre class="brush: js">person3.name.first
+person3.age
+person3.bio()</pre>
+ </li>
+</ol>
+
+<p>Isso funciona bem. Você não precisará usá-lo com frequência, mas pode ser realmente útil quando você deseja criar uma nova instância e não tem uma referência ao construtor original facilmente disponível por algum motivo.</p>
+
+<p>A propriedade do <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> tem outros usos. Por exemplo, se você tiver uma instância de objeto e desejar retornar o nome do construtor do qual ela é uma instância, use o seguinte:</p>
+
+<pre class="brush: js">instanceName.constructor.name</pre>
+
+<p>Tente isso, por exemplo:</p>
+
+<pre class="brush: js">person1.constructor.name
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: O valor de  <code>constructor.name</code> pode mudar (devido à herança prototípica, ligação, pré-processadores, transpilers, etc.), portanto, para exemplos mais complexos, você desejará usar o operador <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>. </p>
+</div>
+
+<ol>
+</ol>
+
+<h2 id="Modificando_Protótipos">Modificando Protótipos</h2>
+
+<p>Vamos dar uma olhada em um exemplo de modificação da propriedade <code>prototype</code> de uma função construtora — os métodos adicionados ao protótipo estão então disponíveis em todas as instâncias de objeto criadas a partir do construtor. Neste ponto, finalmente adicionaremos algo ao protótipo do nosso construtor <code>Person()</code>.</p>
+
+<ol>
+ <li>Volte para o nosso exemplo de <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> e faça uma cópia local do <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">código-fonte</a>. Abaixo do JavaScript existente, adicione o seguinte código, que adiciona um novo método à propriedade <code>prototype</code> do construtor:
+
+  <pre class="brush: js">Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};</pre>
+ </li>
+ <li>Salve o código e carregue a página no navegador e tente inserir o seguinte na entrada de texto:
+  <pre class="brush: js">person1.farewell();</pre>
+ </li>
+</ol>
+
+<p>Você deve receber uma mensagem de alerta, mostrando o nome da pessoa, conforme definido dentro do construtor. Isso é realmente útil, mas o que é ainda mais útil é que toda a cadeia de herança foi atualizada dinamicamente, disponibilizando automaticamente esse novo método em todas as instâncias de objeto derivadas do construtor.</p>
+
+<p>Pense nisso por um momento. Em nosso código, definimos o construtor, então criamos um objeto de instância a partir do construtor, então adicionamos um novo método ao protótipo do construtor:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+
+  // property and method definitions
+
+}
+
+var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
+
+Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};</pre>
+
+<p>Mas o método  <code>farewell()</code> ainda está disponível na instância do objeto  <code>person1</code> — seus membros foram atualizados automaticamente para incluir o método <code>farewell()</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Se você está tendo problemas para fazer este exemplo funcionar, dê uma olhada no nosso exemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> (veja também <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">running live</a>).</p>
+</div>
+
+<p>Você raramente verá propriedades definidas na propriedade <code>prototype</code>, porque elas não são muito flexíveis quando definidas dessa forma. Por exemplo, você poderia adicionar uma propriedade assim:</p>
+
+<pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre>
+
+<p>sso não é muito flexível, pois a pessoa pode não ser chamada assim. Seria muito melhor construir o <code>fullName</code> fora do <code>name.first</code> e <code>name.last</code>:</p>
+
+<pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre>
+
+<p>No entanto, isso não funciona, pois  <code>this</code> fará referência ao escopo global nesse caso, não ao escopo da função. Chamar essa propriedade retornaria <code>undefined undefined</code>. Isso funcionou bem no método que definimos anteriormente no protótipo porque ele está dentro um escopo de função, que será transferido com sucesso para o escopo da instância do objeto, portanto, você pode definir propriedades constantes no protótipo (ou seja, aquelas que nunca precisam ser alteradas), mas geralmente funciona melhor definir propriedades dentro do construtor.</p>
+
+<p>Na verdade, um padrão bastante comum para mais definições de objetos é definir as propriedades dentro do construtor e os métodos no protótipo. Isso torna o código mais fácil de ler, pois o construtor contém apenas as definições de propriedade e os métodos são divididos em blocos separados. Por exemplo:</p>
+
+<pre class="brush: js">// Constructor with property definitions
+
+function Test(a, b, c, d) {
+  // property definitions
+}
+
+// First method definition
+
+Test.prototype.x = function() { ... };
+
+// Second method definition
+
+Test.prototype.y = function() { ... };
+
+// etc.</pre>
+
+<p>Esse padrão pode ser visto em ação no exemplo de <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">aplicativo de plano escolar</a> de Piotr Zalewa.</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Este artigo abrangeu protótipos de objetos JavaScript, incluindo como cadeias de objetos de protótipos permitem que objetos herdem recursos uns dos outros, a propriedade prototype e como ela pode ser usada para adicionar métodos a construtores e outros tópicos relacionados.</p>
+
+<p>No próximo artigo, veremos como você pode implementar a herança de funcionalidade entre dois dos seus próprios objetos personalizados.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p>
+
+
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/pt-br/learn/learning_and_getting_help/index.html b/files/pt-br/learn/learning_and_getting_help/index.html
new file mode 100644
index 0000000000..39d219bae4
--- /dev/null
+++ b/files/pt-br/learn/learning_and_getting_help/index.html
@@ -0,0 +1,315 @@
+---
+title: Learning and getting help
+slug: Aprender/Learning_and_getting_help
+translation_of: Learn/Learning_and_getting_help
+---
+<p>{{learnsidebar}}{{draft}}</p>
+
+<p>É muito bom aplicar seu tempo e esforço para aprender a fazer coisas novas, mas seu aprendizado poderá ser mais eficaz se você adotar boas práticas durante o percurso. Nem sempre você terá sucesso em realizar uma tarefa; se você não for uma pessoa com transtorno hiperativo, poderá ficar preso a uma tarefa devido a determinação de nunca desistir enquanto não conseguir realizar o objetivo traçado. Se não conseguir pode ficar frustrado. Mesmo desenvolvedores profissionais sentem-se assim de vez em quando. Para quem é sempre focado, vale a pena descobrir maneiras eficazes de pedir e receber ajuda para não ficar atolado em uma tarefa e consequentemente progredir na capacitação técnica. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..</p>
+
+<h2 id="Effective_learning">Effective learning</h2>
+
+<p>Let's move straight on and think about effective learning.</p>
+
+<h3 id="Different_learning_methods">Different learning methods</h3>
+
+<p>It is interesting to consider that there are two main ways in whch your brain learns things — <strong>focused</strong> and <strong>diffuse</strong> learning:</p>
+
+<ul>
+ <li>Focused learning is what you might more traditionally associate with academic subjects. You concentrate deeply on a low level topic, and solving the specific problems that it brings. You are focused on a narrow area.</li>
+ <li>Diffuse learning is more to do with high-level thinking around a wider area. You let your mind wander more widely, and seemingly make random connections between different things. This is more the kind of thinking you do while you are in the shower, or during a coffee break.</li>
+</ul>
+
+<p>From the studies that neuroscientists have done on brain activity, we have found out that you can't really engage on both ways of learning — or thinking — at once. So which one should you choose? You might think that focused learning is better for studying, but in reality <strong>both</strong> are very important.</p>
+
+<p>Focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. It isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. </p>
+
+<p>For that you need diffuse thinking. This is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.</p>
+
+<p>This is why it is usually good to read some introductory material first to get a high level understanding of an area, before you leap into the specific details.</p>
+
+<p>It is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). You might:</p>
+
+<ol>
+ <li>Know how to fix problem A with tool A.</li>
+ <li>Know how to fix problem B with tool B.</li>
+ <li>Not know how to fix problem C.</li>
+</ol>
+
+<p>Let's say you focus on problem C for a while and get frustrated because you can't think how to solve it. But then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool A and tool B, and realize that you can use them together to fix problem C! It isn't always this simple, but it is also surprising how many times this does happen. This also highlights the importance of taking regular breaks when you are studying in front of the computer.</p>
+
+<h3 id="Different_learning_materials">Different learning materials</h3>
+
+<p>It is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with.</p>
+
+<h4 id="Textual_articles">Textual articles</h4>
+
+<p>You'll find a lot of written articles on the web to teach you about web design. Like most of this course, for example. Some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "Learn the CSS box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the CSS <code>background</code> property"?)</p>
+
+<p>MDN Web Docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.</p>
+
+<p>There are also several other great resources on the web, some of which we'll mention below.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The above text should have given you an important fact — you aren't expected to remember everything! Professional web developers use tools like MDN Web Docs to look up things they have forgotten all the time. As you'll discover, learning web development is more about problem solving and learning patterns than it is about learning lots of syntax.</p>
+</div>
+
+<h4 id="Videos">Videos</h4>
+
+<p>There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as <a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag">Mozilla Layout Land</a>, <a href="https://www.youtube.com/MozillaDeveloper">MozillaDeveloper</a>, and <a href="https://www.youtube.com/user/ChromeDevelopers/">Google ChromeDevelopers</a> providing many useful videos. Many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. There is no right and wrong answer here.</p>
+
+<h4 id="Interactive_code_playgrounds">Interactive code playgrounds</h4>
+
+<p>You might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. This is also a reasonable approach, and some learning sites tend to favor it. <a href="https://www.codecademy.com/">Codecademy</a> for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.</p>
+
+<p>Many MDN Web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. And there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like <a href="https://jsbin.com/?html,css,js,output">JSBin</a>, <a href="https://codepen.io/">Codepen</a>, or <a href="https://glitch.com/">Glitch</a>. In fact, you'll be called to do so as part of this course when you are learning!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Online code editors are also really useful for sharing code you've written, for example if you are collaborating on learning with someone else who isn't in the same location, or are sending it someone to ask for help with it. You cna share the web address of the example with them so they can see it.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. And you'll probably come up with other methods than the three we covered above.</p>
+</div>
+
+<h3 id="Making_a_plan">Making a plan</h3>
+
+<p>It is a good idea to create a plan to help you achieve what you want to achieve through your learning.</p>
+
+<h4 id="A_goal_statement">A goal statement</h4>
+
+<p>It sounds silly, but why not start with a single sentence that says what you want to achieve? The following have different scopes, but are all realistic and achievable:</p>
+
+<ul>
+ <li>I want to become a professional web developer in two years' time.</li>
+ <li>I want to learn enough to build a website for my local amateur tennis club.</li>
+ <li>I want to lean HTML and CSS so I can expand my job role to take over updating the content on our company website.</li>
+</ul>
+
+<p>The following are not quite as reasonable:</p>
+
+<ul>
+ <li>I want to go from complete beginner to becoming a senior web developer in three months.</li>
+ <li>I want to start my own company and build a social network that will out-perform Facebook, in two years.</li>
+</ul>
+
+<h4 id="What_do_you_need_to_get_there">What do you need to get there?</h4>
+
+<p>Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:</p>
+
+<p>Materials I need:</p>
+
+<ul>
+ <li>A computer</li>
+ <li>Internet access</li>
+ <li>Pens and paper</li>
+</ul>
+
+<p>Knowledge I need:</p>
+
+<ul>
+ <li>How to use HTML, CSS, JavaScript, and associated tools and best practices to build web sites and web applications (we can definitely help you with this one!).</li>
+ <li>How to get a domain, hosting, and use them to put a web site or application online.</li>
+ <li>How to run a small business.</li>
+ <li>How to advertise my business and attract clients.</li>
+</ul>
+
+<h4 id="How_much_time_and_money_will_it_take">How much time and money will it take?</h4>
+
+<p>Estimate the time and cost of getting these things. If you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. Once you have a time estimate, you can start to build a plan around your life.</p>
+
+<h4 id="How_many_hours_per_week_do_I_need_to_do">How many hours per week do I need to do?</h4>
+
+<p>Once you know what you need to do, and how long you think it'll take you, you can start writing out a plan to follow, to achieve your goal. It can be as simple as:</p>
+
+<p>"It'll take me 500 hours to learn what I need to know, and I have a year to do it, so if I assume 2 weeks holiday I'll need to do work on this for 10 hours per week. I am free on evenings and weekends, so I'll plan my time around those."</p>
+
+<p>How much time you can spend on this of course depends on what your circumstances are. If you at school, then you've got way more free time than if you have a job and children to provide for. It is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.</p>
+
+<p>If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!</p>
+
+<p>When you have worked out a weekly schedule, then you should keep a record of what you manage to do each week in a simple speadsheet or even in a notebook!</p>
+
+<p>Also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily, for example:</p>
+
+<ul>
+ <li>HTML and CSS basics learnt by summer</li>
+ <li>JavaScript basics learnt by December</li>
+ <li>Example website project built by next April</li>
+ <li>etc.</li>
+</ul>
+
+<p>Keep thinking about how much progress you are making, and adjust your plan if needs be.</p>
+
+<h3 id="Staying_motivated">Staying motivated</h3>
+
+<p>It is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. What follows are some tips to stay motivated and keep working:</p>
+
+<ul>
+ <li><strong>Try to make your work environment as productive as possible</strong>. Try to get a comfortable desk and chair to work in, make sure you have enough light to see what you are doing, and try to include things that help you concentrate (e.g. mellow music, fragrances, whatever else you need). Don't try to work in a room with distractions — for example a television on, with your friends watching the football! Also, leave your mobile phone out of the room — most people we have are distracted by their phone a lot, so you should leave it somewhere else.</li>
+ <li><strong>Take regular breaks</strong>. It is not good for your motivation to keep working away for hours with no break, especially if you are finding it hard or getting stuck on a problem. That just leads to frustration — it is often better to take a break, move around for a bit, then relax with a drink before getting back to work, and as we said earlier, the diffuse learning you do in that time can often help you to figure out a solution to the problem you were facing. It is also physically bad to work for too long without a break — looking at a monitor for too long can hurt your eyes, and sitting still for too long can be bad for your back or legs. We'd recommend taking a 15 minutes break every hour to 90 minutes.</li>
+ <li><strong>Eat, exercise, and sleep</strong>. Eat healthily, get regular exercise, and make sure you get enough sleep. This sounds obvious, but it is easily to forget when you get really into coding. Factor these essential ingredients into your schedule, and make sure you are not doing your learning time instead of these things.</li>
+ <li><strong>Give yourself rewards</strong>. It's true that <em>all work and no play makes Jack a dull boy</em>. You should try to schedule fun things to do after each learning session, which you'll only have when the learning is over and complete. If you are really into gaming for example, there is something quite motivating about saying "no gaming tonight unless I get through my 5 hours of learning". Now all you need is willpower. Good luck!</li>
+ <li><strong>Colearning and demoing</strong>. This won't be an option for everyone, but if at all possible try to learn alongside others. Again, this is easier if you are doing a college course on web development, but perhaps you could convince a friend to learn along with you, or find a local meetup or skill sharing group? It is really useful and motivating to have someone to discuss ideas with and ask for help, and you should also take time to demo your work. Those shouts of appreciation will spur you on.</li>
+</ul>
+
+<h3 id="Effective_problem_solving">Effective problem solving</h3>
+
+<p>There is no one effective way to solve all problems (and learn all things) associated wth web design and development, but there some general bits of advice that will serve you well in most cases.</p>
+
+<h4 id="Break_things_down_into_chunks">Break things down into chunks</h4>
+
+<p>For a start, when you are trying to implement something specific and it sems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks.</p>
+
+<p>For example, if you are looking a task of "Build a simple two column website", you could break it down as follows:</p>
+
+<ul>
+ <li>Create the HTML structure</li>
+ <li>Work out basic site typography</li>
+ <li>Work out basic color scheme</li>
+ <li>Implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer.</li>
+ <li>Implement horizontal navigation menu</li>
+ <li>etc.</li>
+</ul>
+
+<p>Then you could break it down further, for example "Implement horizontal navigation menu" could be written out as:</p>
+
+<ul>
+ <li>Make list of menu items sit horizontally in a line.</li>
+ <li>Remove unneeded defaults, like list spacing and bullet points.</li>
+ <li>Style hover/focus/active states of menu items appropriately.</li>
+ <li>Make the menu items equally spaced along the line.</li>
+ <li>Give the menu items enough vertical spacing.</li>
+ <li>Make sure the text is centered inside each menu item</li>
+ <li>etc.</li>
+</ul>
+
+<p>Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. Now you've just got to go through and solve them all!</p>
+
+<h4 id="Learn_and_recognise_the_patterns">Learn and recognise the patterns</h4>
+
+<p>As we said before, web design/programming is mostly about problem solving and patterns. Once you have written out what you'll need to do to solve a specific problem, you can start to figure out what technology features to use to solve it. For example, professional web developers have created lots of horizontal navigation menus, so they'll problem immediately start thinking of a solution like this:</p>
+
+<p>A nav menu is usually created from a list of links, something like:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;First menu item&lt;/li&gt;
+  &lt;li&gt;Second menu item&lt;/li&gt;
+  &lt;li&gt;Third menu item&lt;/li&gt;
+  &lt;li&gt;etc.&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:</p>
+
+<pre class="brush: css">ul {
+  display: flex;
+}</pre>
+
+<p>To remove unneeded spacing and bullet points, we can do this:</p>
+
+<pre class="brush: css">ul {
+  list-style-type: none;
+  padding: 0;
+}</pre>
+
+<p>etc.</p>
+
+<p>If you are a complete beginner to web development, you'll have to do some study and web searches, and look up solutions to such problems. If you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of syntax that you forgot since then.</p>
+
+<p>When you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on previous work.</p>
+
+<p>In addition, the web has <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> that allow you to look at the code used to build any site on the web — if you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Notice how above we talked about the problem we are trying to solve first, and the technology used to solve it second. This is pretty much always the best way round to do it — don't start with a cool new technology that you want to use, and try to shoehorn it into the use case.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The simplest solution is often the best.</p>
+</div>
+
+<h3 id="Getting_practice">Getting practice</h3>
+
+<p>The more you practice solving a problem, the stronger your brain's neutral pathways are in that area, and the easier it becomes to recall the details and the logic of that particular problem.</p>
+
+<p>Keep tinkering with code, and getting more practice. If you run out of problems to solve, look up some tests online, do some more courses, or ask your friends and family (or local school or church) if there is anything they'd like you to build for them.</p>
+
+<h2 dir="ltr" id="Getting_help">Getting help</h2>
+
+<p dir="ltr">Web development requires you to learn a complex set of skills — you are bound to get stuck sometimes and need help. As we said before, even professional developers need regular help working out issues.</p>
+
+<p dir="ltr">There are a variety of ways to get help, and what follows are some tips for doing so more effectively.</p>
+
+<h3 dir="ltr" id="Effective_web_searches">Effective web searches</h3>
+
+<p dir="ltr">One important skill to learn is the art of effective web searches — what search terms do you need to use in your favorite search engine to find the articles you need? </p>
+
+<p dir="ltr">It is often fairly obvious what to search for. For example:</p>
+
+<ul dir="ltr">
+ <li>If you want to find out more about responsive web design, you could search for "responsive web design".</li>
+ <li>If you want to find out more about a specific technology feature, such as the HTML <code>&lt;video&gt;</code> element, or the CSS <code>background-color</code> or <code>opacity</code> properties, or the JavaScript <code>Date.setTime()</code> method, you should just search for the feature's name.</li>
+ <li>If you are looking for some more specific information, you can add other keywords as modifiers, for example "&lt;video&gt; element autoplay attribute", or "Date.setTime parameters".</li>
+</ul>
+
+<p dir="ltr">If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.</p>
+
+<ul dir="ltr">
+ <li>Run code after several promises are fulfilled</li>
+ <li>Play a video stream from a webcam in the browser</li>
+ <li>Create a linear gradient in the background of your element</li>
+</ul>
+
+<h4 id="Error_messages">Error messages</h4>
+
+<p>If you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. If other people have had the same problem, there'll likely be some articles or blog posts about it in places like MDN or Stack Overflow.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <a href="https://stackoverflow.com/">Stack Overflow</a> is a really useful website — it is basically a huge database of curated questions and answers on various technologies and related techniques. You'll probably find an answer that answers your question. If not, you can ask a question and see if anyone can help you.</p>
+</div>
+
+<h4 id="Browser_testing">Browser testing</h4>
+
+<p dir="ltr">It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:</p>
+
+<ul dir="ltr">
+ <li>&lt;video&gt; playback doesn't work in iOS browser.</li>
+ <li>Firefox doesn't seem to support the Beetlejuice API.</li>
+</ul>
+
+<h3 dir="ltr" id="Using_MDN">Using MDN</h3>
+
+<p dir="ltr">The site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques.</p>
+
+<p dir="ltr">We've provided most of the answers to the questions you'll have about web development fundamentals in this part of MDN. If you are stuck, then it is good to re-read the associated articles to see if you missed anything.</p>
+
+<p dir="ltr">If you are not sure which article to read, then try searching MDN for some related keywords (as indicated above), or try a general web search. To search on MDN, you can either use the site's in-built search functionality, or better still, use your favorite search engine and put "mdn" in front of the search term, for example "mdn responsive web design" or "mdn background-color".</p>
+
+<h3 dir="ltr" id="Other_online_resources">Other online resources</h3>
+
+<p>We already mentioned Stack Overflow, but there are other online resources that can help.</p>
+
+<p>It is good to find a community to be part of, and you'll get a lot of respect if you try to help others answer their questions as well as asking your own. Other good examples include:</p>
+
+<ul dir="ltr">
+ <li><a href="https://discourse.mozilla.org/c/mdn">MDN Discourse</a></li>
+ <li><a href="https://www.sitepoint.com/community/">Sitepoint Forums</a></li>
+ <li><a href="https://www.webdeveloper.com/">webdeveloper.com Forums</a></li>
+</ul>
+
+<p dir="ltr">However, it also makes sense to find useful groups on social networking sites such as Twitter or Facebook. Look for groups that discuss web development subjects you are interested in, and join up. Follow people on twitter you know are influential, smart, or just plain seem to share lots of useful tips.</p>
+
+<h3 dir="ltr" id="Physical_meetups">Physical meetups</h3>
+
+<p dir="ltr">Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater for beginners. <a href="https://www.meetup.com/find/tech/">meetup.com</a> is a good place to find local physical meetups, and you could also try your local press/what's on sites.</p>
+
+<p dir="ltr">You could also try attending full-fledged web conferences. While these can be expensive, you could try volunteering at them, and many conferences offer reduced rate tickets, for example student or diversity tickets.</p>
+
+<h2 dir="ltr" id="See_also">See also</h2>
+
+<ul dir="ltr">
+ <li><a href="https://www.coursera.org/learn/learning-how-to-learn">Coursera: Learning to learn</a></li>
+ <li><a href="https://www.freecodecamp.org/">Freecodecamp</a></li>
+ <li><a href="https://www.codecademy.com/">Codecademy</a></li>
+</ul>
diff --git a/files/pt-br/learn/release_notes/index.html b/files/pt-br/learn/release_notes/index.html
new file mode 100644
index 0000000000..d90c63c81b
--- /dev/null
+++ b/files/pt-br/learn/release_notes/index.html
@@ -0,0 +1,66 @@
+---
+title: Learning area release notes
+slug: Aprender/Release_notes
+translation_of: Learn/Release_notes
+---
+<div>{{learnsidebar}}</div>
+
+<p>Esta página detalha as mudanças significativas feitas na área de aprendizagem. Volte aqui se quiser saber qual conteúdo novo está disponível e qual conteúdo existente foi aprimorado.</p>
+
+<p>Se você quiser dar feedback sobre qualquer uma dessas novas adições, deixe seus comentários em nosso <a href="https://discourse.mozilla.org/c/mdn">Fórum de discussão</a>.</p>
+
+<h2 id="Junho_2020">Junho 2020</h2>
+
+<p>Nosso <a href="/en-US/docs/Learn/Front-end_web_developer">Caminho de aprendizagem para desenvolvedores da web de front-end</a> foi oficialmente lançado! confira um caminho opcional a seguir  para o desenvolvimento de front-end de aprendizagem! Consulte também  nossa postagem sobro hacks — <a href="https://hacks.mozilla.org/2020/06/introducing-the-mdn-web-docs-front-end-developer-learning-pathway/">Apresentando o caminho de aprendizagem do desenvolvimento do MDN Web Docs Front-end</a> — para obter mais informações sobre a lógica por trás disso.</p>
+
+<h2 id="Maio_2020">Maio 2020</h2>
+
+<p>Nosso módulo <a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Entendendo as estruturas do Client-side JavaScript </a> já está disponível. Aprenda por que existem frameworks, quando você deve usar um (e quando não deveria), que tipos de recursos são comuns a todos os frameworks e como eles se relacionam com o JavaScript básico que você conhece. Depois de ter uma compreensão geral das estruturas, vá para a série de tutoriais que abrangem estruturas populares como React, Ember e Vue.</p>
+
+<p>Nosso aprendizado de  <a href="/en-US/docs/Learn/Forms">Web Forms</a> agora tem avaliações "Teste suas habilidades" que acompanham os artigos.</p>
+
+<h2 id="Abril_2020">Abril 2020</h2>
+
+<p>Nosso novo módulo <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Entendendo as ferramentas de desenvolvimento client-side web </a>foi lançado! Aprenda os fundamentos das ferramentas de desenvolvimento da web, incluindo os tipos de ferrramentas existentes, as linhas de comando, gerenciadores de pacotes e como montar sua própria cadeia de ferramentas funcionais.</p>
+
+<h2 id="Março_2020">Março 2020</h2>
+
+<p>Agora você encontrará avaliações "Teste suas habilidades" que acompanham os artigos nos seguintes módulos:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript primeiros passos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></li>
+</ul>
+
+<h2 id="Janeiro_2020">Janeiro 2020</h2>
+
+<p>O módulo de formulários HTML foi significativamente atualizado:</p>
+
+<ul>
+ <li>Ele foi renomeado para <a href="/en-US/docs/Learn/Forms">Web forms</a>, e foi retirado da área de tópico HTML para reconhecer que ele é mais abrangente do que apenas elementos de formulários HTML — também abrange estilo, validação, os princípios básicos de como enviar dados e processá-los no servidor e muito mais.</li>
+ <li>Ele tem novos exemplos desponíveis e técnicas cobertas.</li>
+ <li>Tem uma nova estrutura para tornar a experiência de aprendizagem mais eficaz.</li>
+</ul>
+
+<p>Mais seções "Teste suas habilidades" foram adicionadas. Você pode ver isso em:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Test_your_skills!">CSS layout: Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Test_your_skills!">CSS layout: Grids</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats#Test_your_skills!">CSS layout: Floats</a></li>
+</ul>
+
+<h2 id="Dezembro_2019">Dezembro 2019</h2>
+
+<p>estamos adicionando um novo tipo de artigo de avaliação à área de aprendizado — "Teste suas habilidades" — que oferecerá várias perguntas curtas destinadas a testar rapidadmente se você entendeu o que está acontecendo. Isso é uma adição aos artigos de avaliação mais longos que você já encontrará em alguns módulos de aprendizagem. Você encontrará esses novos artigos com links nas seções "Teste suas habilidades" na parte inferior dos artigos relevantes. Você pode ver isso em:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Test_your_skills!">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Test_your_skills!">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Test_your_skills!">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Test_your_skills!">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#Test_your_skills!">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#Test_your_skills!">From object to iframe — other embedding technologies</a></li>
+</ul>
diff --git a/files/pt-br/learn/server-side/django/hospedagem/index.html b/files/pt-br/learn/server-side/django/deployment/index.html
index baa2217b71..baa2217b71 100644
--- a/files/pt-br/learn/server-side/django/hospedagem/index.html
+++ b/files/pt-br/learn/server-side/django/deployment/index.html
diff --git a/files/pt-br/learn/server-side/django/ambiente_de_desenvolvimento/index.html b/files/pt-br/learn/server-side/django/development_environment/index.html
index 101d1a15ad..101d1a15ad 100644
--- a/files/pt-br/learn/server-side/django/ambiente_de_desenvolvimento/index.html
+++ b/files/pt-br/learn/server-side/django/development_environment/index.html
diff --git a/files/pt-br/learn/server-side/django/introdução/index.html b/files/pt-br/learn/server-side/django/introduction/index.html
index 9258d18dc6..9258d18dc6 100644
--- a/files/pt-br/learn/server-side/django/introdução/index.html
+++ b/files/pt-br/learn/server-side/django/introduction/index.html
diff --git a/files/pt-br/learn/server-side/django/sessões/index.html b/files/pt-br/learn/server-side/django/sessions/index.html
index f2f16b521f..f2f16b521f 100644
--- a/files/pt-br/learn/server-side/django/sessões/index.html
+++ b/files/pt-br/learn/server-side/django/sessions/index.html
diff --git a/files/pt-br/learn/server-side/django/tutorial_website_biblioteca_local/index.html b/files/pt-br/learn/server-side/django/tutorial_local_library_website/index.html
index da69f5c9de..da69f5c9de 100644
--- a/files/pt-br/learn/server-side/django/tutorial_website_biblioteca_local/index.html
+++ b/files/pt-br/learn/server-side/django/tutorial_local_library_website/index.html
diff --git a/files/pt-br/learn/server-side/express_nodejs/ambiente_de_desenvolvimento/index.html b/files/pt-br/learn/server-side/express_nodejs/development_environment/index.html
index 289af21dde..289af21dde 100644
--- a/files/pt-br/learn/server-side/express_nodejs/ambiente_de_desenvolvimento/index.html
+++ b/files/pt-br/learn/server-side/express_nodejs/development_environment/index.html
diff --git a/files/pt-br/learn/server-side/express_nodejs/introdução/index.html b/files/pt-br/learn/server-side/express_nodejs/introduction/index.html
index 15ccfc6145..15ccfc6145 100644
--- a/files/pt-br/learn/server-side/express_nodejs/introdução/index.html
+++ b/files/pt-br/learn/server-side/express_nodejs/introduction/index.html
diff --git a/files/pt-br/learn/server-side/first_steps/introdução/index.html b/files/pt-br/learn/server-side/first_steps/introduction/index.html
index e5cc0b991c..e5cc0b991c 100644
--- a/files/pt-br/learn/server-side/first_steps/introdução/index.html
+++ b/files/pt-br/learn/server-side/first_steps/introduction/index.html
diff --git a/files/pt-br/learn/server-side/first_steps/seguranca_site/index.html b/files/pt-br/learn/server-side/first_steps/website_security/index.html
index 12a11cf641..12a11cf641 100644
--- a/files/pt-br/learn/server-side/first_steps/seguranca_site/index.html
+++ b/files/pt-br/learn/server-side/first_steps/website_security/index.html
diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/comecando_com_react/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html
index 5c1798518d..5c1798518d 100644
--- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/comecando_com_react/index.html
+++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html
diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_iniciando/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
index 607b876a2e..607b876a2e 100644
--- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_iniciando/index.html
+++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
diff --git a/files/pt-br/learn/tools_and_testing/index.html b/files/pt-br/learn/tools_and_testing/index.html
new file mode 100644
index 0000000000..5f1a76dbf7
--- /dev/null
+++ b/files/pt-br/learn/tools_and_testing/index.html
@@ -0,0 +1,45 @@
+---
+title: Ferramentas e teste
+slug: Aprender/Ferramentas_e_teste
+tags:
+  - Acessibilidade
+  - Aprendizagem
+  - Automação
+  - CSS
+  - Código
+  - Ferramentas
+  - HTML
+  - Iniciante
+  - JavaScript
+  - Navegadores
+  - Testes
+  - Testes do usuário
+  - Tópico
+translation_of: Learn/Tools_and_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Assim que você se sentir mais confortável programando nas tecnologias web básicas (como HTML, CSS e JavaScript), e pegar mais experiência, ler mais recursos, e souber mais dicas e truques, você começará a se deparar com todos os tipos de ferramentas, de CSS e JavaScript precompilados, a automação e testes de aplicações, além de outros assuntos mais avançados. Quando seus projetos começam a crescer e a ficarem mais complexos, você irá querer começar a aproveitar mais dessas ferramentas, e a elaborar planos de testes mais confiáveis para seu código. Esta parte do aprendizado está focada em te dar o que você precisa para iniciar e tomar decisões com melhores informações.</p>
+
+<p>A indústria de internet é um excitante lugar de trabalho, mas não é por ter menos problemas. Muito pelo contrário. As tecnologias básicas que usamos para construir sites estão razoavelmente estáveis agora, mas novas funcionalidades estão sendo introduzidas o tempo todo, assim como novas ferramentas — que facilitam o trabalho, e ainda são construídas usando essas mesmas tecnologias — estão constantemente aparecendo. Além disso, nós ainda precisamos ter sempre em mente que essas tecnologias devem funcionar em todos os navegadores, e ter certeza que nosso código segue as melhores práticas que permitem nossos projetos funcionarem em todos os tipos de navegadores e dispositivos que nossos usuários estão usando para navegar na internet, e ainda serem usados por pessoas com deficiência.</p>
+
+<p>Saber quais ferramentas você deve utilizar pode ser um processo bem difícil, então escrevemos esses artigos para te manter informado de quais tipos de ferramentas estão disponíveis, e o que elas podem fazer pra você, e como usar as preferidas do mercado.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: pelo fato de novas ferramentas e tecnologias aparecerem e saírem de moda o tempo todo, nós, deliberadamente, escrevemos este material para ser o mais neutro possível — queremos focar, antes de mais nada, nos tipos de tarefas gerais que essas ferramentas podem ajudar você a terminar, e endereçar ferramentas específicas o menos possível. Obviamente precisamos mostrar o uso das ferramentas para demonstrar técnicas específicas, mas que fique claro que com isso não estamos necessariamente, recomendando as ferramentas usadas nas demonstrações como as melhores, ou como único jeito, de se fazer as coisas — na maioria dos casos existem outras formas de se fazer, mas queremos dar a você a forma mais clara que funciona.</p>
+</div>
+
+<h2 id="Caminho_de_aprendizado">Caminho de aprendizado</h2>
+
+<p>Você realmente deve aprender os conceitos básicos de <a href="/pt-BR/docs/Aprender/HTML">HTML</a>, <a href="/pt-BR/docs/Aprender/CSS">CSS</a> e <a href="/pt-BR/docs/Aprender/JavaScript">JavaScript</a> antes de utilizar as ferramentas descritas aqui. Isto é, você precisará conhecer os principios fundamentais dessas linguagens antes de começar a debugar problemas em códigos mais complexos da internet, ou usar alguma biblioteca JavaScript, ou escrever testes e rodá-los no seu código com executores de testes, etc.</p>
+
+<p>Você realmente precisa de uma base forte de conhecimento nessas tecnologias antes de ir mais além.</p>
+
+<h2 id="Módulos">Módulos</h2>
+
+<dl>
+ <dt>Ferramentas de Desenvolvimento Web do Mundo Real (TBD)</dt>
+ <dd>Neste módulo, exploramos os diferentes tipos de ferramentas de desenvolvimento web disponíveis. Isso inclui revisar os tipos de tarefas mais comuns que será pedido a você para resolver, como elas se complementam no trabalho, e as melhores ferramentas disponíveis atualmente para endereçar essas tarefas.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testes de navegadores</a></dt>
+ <dd>Este módulo olha especificamente para a área de testes de projetos web sobre diferentes navegadores web. Neste módulo, procuramos identificar seu público alvo (por exemplo, quais usuários, navegadores e dispositivos você mais precisa se preocupar?), como elaborar os testes, os principais problemas que você vai enfrentar com tipos de código diferentes e como consertar ou mitigá-los, e como usar a automação para acelerar os testes.</dd>
+</dl>