remove retired locales (#699)

68 files changed, 0 insertions, 14906 deletions

diff --git a/files/pt-pt/learn/accessibility/index.html b/files/pt-pt/learn/accessibility/index.html
deleted file mode 100644
index 77403afbb0..0000000000
--- a/files/pt-pt/learn/accessibility/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Acessibilidade
-slug: Learn/Accessibility
-tags:
-  - ARIA
-  - Acessibilidade
-  - Aprender
-  - Artigos
-  - CSS
-  - CodingScripting
-  - HTML
-  - JavaScript
-  - Landing
-  - Principiantes
-  - modulo
-translation_of: Learn/Accessibility
-original_slug: Learn/Acessibilidade
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Aprender um pouco de HTML, CSS e JavaScript é útil se quiser tornar-se em um desenvolvedor da <em>web</em>, mas o seu conhecimento precisa de ir mais além do que apenas utilizar as tecnologias - precisa de as utilizar com responsabilidade para maximizar o público dos seus sites da <em>web</em> e não impedir que as utilizem. Para conseguir isso, precisa de aderir às melhores práticas gerais (que são demonstradas através dos tópicos de <a href="/pt-PT/docs/Learn/HTML">HTML</a>, <a href="/pt-PT/docs/Learn/CSS">CSS</a>, e <a href="/pt-PT/docs/Learn/JavaScript">JavaScript</a>), efetuar <a href="/pt-PT/docs/Learn/Tools_and_testing/Teste_cruzado_de_navegador">teste cruzado de navegador</a>, e considerar a acessibilidade desde o início. Neste módulo, nós iremos abordar o último em detalhes.</p>
-
-<h2 id="Sumario">Sumario</h2>
-
-<p>Quando um <em>site</em> é descrito como "acessível", isto significa que um utilizador pode aceder e interagir com todas as funções e conteúdo, sem preocupação de qual o modo que ele acede à <em>web</em> — inclusive e especialmente utilizadores com dificuldades físicas ou mentais.</p>
-
-<ul>
- <li><em>Sites</em> devem ser acessíveis a utilizadores de teclado, rato, e ecrãs <em>touch</em>, e qualquer outra forma que um utilizador aceda à <em>web</em>, incluindo leitores de ecrãs e assistentes de voz como a Alexa e a Google Home.</li>
- <li>Aplicações devem ser compreendidas e manuseáveis por pessoas com problemas auditórios, visuais, físicos, ou de habilidade cognitiva.</li>
- <li><em>Sites</em> não devem causar dano; funções da <em>web</em>, como movimento, podem causar dores de cabeça ou ataques epiléticos.</li>
-</ul>
-
-<p><strong>Como padrão, HTML é acessível, se utilizado corretamente.</strong> Acessibilidade <em>web</em> envolve certificar que o conteúdo continua acessível, indiferente de quem ou como se acede à <em>web</em>.</p>
-
-<p>O <em>Firefox Accessibility Inspector</em> (Inspetor de Acessibilidade Firefox) é uma ferramenta muito útil para verificar problemas de acessibilidade em páginas <em>web</em>. O seguinte vídeo oferece uma boa introdução:</p>
-
-<p>{{EmbedYouTube("7mqqgIxX_NU")}}</p>
-
-<div class="callout">
-<h3 id="Procura_ser_um_programador_de_web_front-end">Procura ser um programador de <em>web front-end</em>?</h3>
-
-<p>Nos construimos um curso que inclui toda a informação essencial que precisa para atingir o seu objetivo.</p>
-
-<p><a class="cta primary" href="https://wiki.developer.mozilla.org/docs/Learn/Front-end_web_developer">Começar a Aprender</a></p>
-</div>
-
-<h2 id="Pré-requisitos">Pré-requisitos</h2>
-
-<p>Para aproveitar este modulo ao máximo, é boa ideia estudar os primeiros dois módulos dos tópicos <a href="/pt-PT/docs/Learn/HTML">HTML</a>, <a href="/pt-PT/docs/Learn/CSS">CSS</a>, e <a href="/pt-PT/docs/Learn/JavaScript">JavaScript</a>, ou até melhor, estudar as partes relevantes do modulo de acessibilidade enquanto estuda os tópicos de tecnologia relacionados.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Se estiver a trabalhar num computador / tablete / outro dispositivo onde não tem a habilidade de criar os seus próprios ficheiros, pode tentar a maioria dos exemplos de código num IDE <em>online</em> 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="/en-US/docs/Learn/Accessibility/What_is_accessibility">O que é acessibilidade?</a></dt>
- <dd>Este artigo começa o módulo a definir o que acessibilidade — isto inclui quais os grupos que se tem de considerar e porquê, que ferramentas pessoas usam para aceder à <em>web</em> e como podemos fazer com que acessibilidade seja parte do nosso processo de desenvolvimento da <em>web</em>.</dd>
- <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: Uma boa base para acessibilidade</a></dt>
- <dd>Uma grande parte de conteúdo da <em>web</em> pode ser feito acessível ao usar os elementos corretos de HTML para os seus usos próprios. Este artigo dá uma vista aprofundada a como HTML pode ser utilizado para certificar a acessibilidade máxima.</dd>
- <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Melhores práticas de CSS e JavaScript</a></dt>
- <dd>CSS e JavaScript, quando usados corretamente, também têm o potencial de oferecer expriencias da web acessiveis, mas se mal utilizadas podem prejudicar significativamente a acessibilidade. Este artigo descreve algumas das melhores práticas de CSS e JavaScript que devem ser consideradas para garantir que mesmo conteúdos complexos sejam o mais acessíveis possível.</dd>
- <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">Básicos de WAI-ARIA</a></dt>
- <dd>
- <p>No seguimento do artigo anterior, por vezes é difícil criar controlos complexos da interface que envolvem HTML não semântico e conteúdos dinâmicos atualizados em JavaScript. WAI-ARIA é uma tecnologia que pode ajudar com tais problemas, acrescentando semântica que os navegadores e tecnologias de assistência podem reconhecer e utilizar para que os utilizadores saibam o que se está a passar. Aqui mostraremos como utilizá-la a um nível básico para melhorar a acessibilidade.</p>
- </dd>
- <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Acessibilidade em multimédia</a></dt>
- <dd>Outra categoria de conteúdos que pode criar problemas de acessibilidade é a multimédia — os conteúdos de vídeo, áudio e imagem precisam de receber alternativas textuais adequadas, para que possam ser compreendidos pelas tecnologias de assistência e pelos seus utilizadores. Este artigo mostra como.</dd>
- <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Acessibilidade em moveis</a></dt>
- <dd>Com o acesso à <em>web</em> em dispositivos móveis a ser tão popular, e com plataformas populares como o iOS e o Android a terem ferramentas de acessibilidade completas, é importante considerar a acessibilidade do seu conteúdo <em>web</em> nestas plataformas.  Este artigo analisa as considerações de acessibilidade específicas para dispositivos móveis.</dd>
-</dl>
-
-<h2 id="Avaliações">Avaliações</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting"><em>Troubleshooting</em> de Acessibilidade</a></dt>
- <dd>Na avaliação para este modulo, nos apresentamos um site simples com uns problemas de acessibilidade que tem de diagonisar e resolver.</dd>
-</dl>
-
-<h2 id="Ver_também">Ver também</h2>
-
-<ul>
- <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — uma exelente serie de tuturiais pela Marcy Sutton.</li>
- <li><a href="https://dequeuniversity.com/resources/">Recursos da Universidade de Deque</a> — inclui exemplos de código, referencias para leitores de ecras, e outros recursos uteis.</li>
- <li><a href="http://webaim.org/resources/">Recursos da WebAIM</a> — inclui guias, <em>checklists</em>, ferramentas, e mais.</li>
-</ul>
diff --git a/files/pt-pt/learn/common_questions/how_does_the_internet_work/index.html b/files/pt-pt/learn/common_questions/how_does_the_internet_work/index.html
deleted file mode 100644
index 1eddf3b641..0000000000
--- a/files/pt-pt/learn/common_questions/how_does_the_internet_work/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Como funciona Internet?
-slug: Learn/Common_questions/How_does_the_Internet_work
-tags:
-  - Mecânica da Web
-  - Principiante
-  - Tutorial
-translation_of: Learn/Common_questions/How_does_the_Internet_work
-original_slug: Learn/Questoes_comuns/Como_funciona_a_Internet
----
-<div>{{LearnSidebar}}</div>
-
-<div class="summary">
-<p>This article discusses what the Internet is and how it works.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>None, but we encourage you to read the <a href="/en-US/docs/Learn/Thinking_before_coding">Article on setting project goals</a> first</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together.</p>
-
-<p><a href="https://en.wikipedia.org/wiki/Internet#History" rel="external">The history of the Internet is somewhat obscure</a>. It began in the 1960s as a US-army-funded research project, then evolved into a public infrastructure in the 1980s with the support of many public universities and private companies. The various technologies that support the Internet have evolved over time, but the way it works hasn't changed that much: Internet is a way to connect computers all together and ensure that, whatever happens, they find a way to stay connected.</p>
-
-<h2 id="Active_Learning">Active Learning</h2>
-
-<ul>
- <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: A 5 minute video to understand the very basics of Internet by Aaron Titus.</li>
- <li><a href="https://www.youtube.com/watch?v=x3c1ih2NJEg">How does the Internet work?</a> Detailed well visualized 8 minute video.</li>
-</ul>
-
-<h2 id="Deeper_dive">Deeper dive</h2>
-
-<h3 id="A_simple_network">A simple network</h3>
-
-<p>When two computers need to communicate, you have to link them, either physically (usually with an <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Ethernet cable</a>) or wirelessly (for example with <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> or <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> systems). All modern computers can sustain any of those connections.</p>
-
-<div class="note">
-<p><strong>Note:</strong> For the rest of this article, we will only talk about physical cables, but wireless networks work the same.</p>
-</div>
-
-<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
-
-<p>Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!</p>
-
-<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
-
-<p>To solve this problem, each computer on a network is connected to a special tiny computer called a <em>router</em>. This <em>router</em> has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.</p>
-
-<p>Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.</p>
-
-<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
-
-<h3 id="A_rede_das_redes">A rede das redes</h3>
-
-<p>So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single <em>router</em> can't scale that far, but, if you read carefully, we said that a <em>router</em> is a computer like any other, so what keeps us from connecting two <em>routers</em> together? Nothing, so let's do that.</p>
-
-<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
-
-<p>By connecting computers to routers, then routers to routers, we are able to scale infinitely.</p>
-
-<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
-
-<p>Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a <em>modem</em>. This <em>modem</em> turns the information from our network into information manageable by the telephone infrastructure and vice versa.</p>
-
-<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
-
-<p>So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special <em>routers</em> that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.</p>
-
-<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
-
-<h3 id="Encontrar_computadores">Encontrar computadores</h3>
-
-<p>If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for <em>Internet Protocol</em>). It's an address made of a series of four numbers separated by dots, for example: <code>192.168.2.10</code>.</p>
-
-<p>That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a <em>domain name</em>. For example (at the time of writing; IP addresses can change) <code>google.com</code> is the domain name used on top of the IP address <code>173.194.121.32</code>. So using the domain name is the easiest way for us to reach a computer over the Internet.</p>
-
-<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
-
-<h3 id="Internet_e_a_Web">Internet e a Web</h3>
-
-<p>As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called <em>Web servers</em>) can send messages intelligible to web browsers. The <em>Internet</em> is an infrastructure, whereas the <em>Web</em> is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.</p>
-
-<h2 id="Passos_seguintes">Passos seguintes</h2>
-
-<ul>
- <li><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a></li>
- <li><a href="/pt-PT/docs/Learn/Questoes_comuns/Qual_e_a_diferenca_entre_pagina_site_servidor_da_web_e_mecanismo_pesquisa">Compreender a diferença entre uma página da Web, um <em>site</em> da Web, um servidor da Web e um mecanismo de pesquisa</a></li>
- <li><a href="/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_nome_de_dominio">Compreender os nomes de domínio</a></li>
-</ul>
diff --git a/files/pt-pt/learn/common_questions/index.html b/files/pt-pt/learn/common_questions/index.html
deleted file mode 100644
index 23788a5fd7..0000000000
--- a/files/pt-pt/learn/common_questions/index.html
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: Questões Comuns
-slug: Learn/Common_questions
-translation_of: Learn/Common_questions
-original_slug: Learn/Questoes_comuns
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p>
-
-<h2 id="Como_é_que_a_Web_funciona">Como é que a Web funciona</h2>
-
-<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p>
-
-<dl>
- <dt>
- <h3 id="Como_é_que_a_Internet_funciona"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">Como é que a Internet funciona?</a></h3>
- </dt>
- <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd>
- <dt>
- <h3 id="Qual_é_a_diferença_entre_página_da_Web_site_da_Web_servidor_da_Web_e_motor_de_pesquisa"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Qual é a diferença entre página da Web, site da Web, servidor da Web, e motor de pesquisa?</a></h3>
- </dt>
- <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd>
- <dt>
- <h3 id="O_que_é_um_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">O que é um URL?</a></h3>
- </dt>
- <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd>
- <dt>
- <h3 id="O_que_é_um_nome_de_domínio"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">O que é um nome de domínio?</a></h3>
- </dt>
- <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd>
- <dt>
- <h3 id="O_que_é_um_servidor_da_Web"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">O que é um servidor da Web?</a></h3>
- </dt>
- <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd>
- <dt>
- <h3 id="O_que_são_hiperligações"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">O que são hiper</a><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">ligações?</a></h3>
- </dt>
- <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd>
-</dl>
-
-<h2 id="Ferramentas_e_configuração">Ferramentas e configuração</h2>
-
-<p>Questions related to the tools/software you can use to build websites.</p>
-
-<dl>
- <dt>
- <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3>
- </dt>
- <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd>
- <dt>
- <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3>
- </dt>
- <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd>
- <dt>
- <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3>
- </dt>
- <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd>
- <dt>
- <h3 id="How_do_I_set_up_a_basic_working_environment"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">How do I set up a basic working environment?</a></h3>
- </dt>
- <dd>When working on a web project, you'll want to test it locally before you show it to the world. Some types of code require a server to test, and in this article we'll show you how to set one up. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.</dd>
- <dt>
- <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3>
- </dt>
- <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd>
- <dt>
- <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3>
- </dt>
- <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd>
- <dt>
- <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3>
- </dt>
- <dd>
- <div>
- <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p>
- </div>
- </dd>
- <dt>
- <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3>
- </dt>
- <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one fo the most common ways to get a website online so others can access it from their computers.</dd>
- <dt>
- <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3>
- </dt>
- <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd>
- <dt>
- <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3>
- </dt>
- <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd>
- <dt>
- <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3>
- </dt>
- <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd>
-</dl>
-
-<h2 id="Desenho_e_acessibilidade">Desenho e acessibilidade</h2>
-
-<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p>
-
-<dl>
- <dt>
- <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3>
- </dt>
- <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd>
- <dt>
- <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3>
- </dt>
- <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd>
- <dt>
- <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3>
- </dt>
- <dd>This article introduces the basic concepts behind web accessibility.</dd>
- <dt>
- <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3>
- </dt>
- <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd>
- <dt>
- <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3>
- </dt>
- <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd>
-</dl>
-
-<h2 id="Questões_sobre_HTML_CSS_e_JavaScript">Questões sobre HTML, CSS e JavaScript</h2>
-
-<p>Para soluções comuns para problemas de HTML/CSS/JavaScript, tente os seguintes artigos:</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Como">Utilize HTML para resolver problemas comuns</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Howto">Utilize CSS para </a><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">resolver problemas comun</a><a href="/en-US/docs/Learn/CSS/Howto">s</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Howto">Utilize JavaScript para </a><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">resolver problemas comun</a><a href="/en-US/docs/Learn/JavaScript/Howto">s</a></li>
-</ul>
diff --git a/files/pt-pt/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/pt-pt/learn/common_questions/pages_sites_servers_and_search_engines/index.html
deleted file mode 100644
index ba4db13d68..0000000000
--- a/files/pt-pt/learn/common_questions/pages_sites_servers_and_search_engines/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: >-
-  Qual é a diferença entre página da Web, site da Web, servidor da Web e
-  mecanismo de pesquisa?
-slug: Learn/Common_questions/Pages_sites_servers_and_search_engines
-tags:
-  - Mecânica da Web
-  - Principiante
-translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
-original_slug: >-
-  Learn/Questoes_comuns/Qual_e_a_diferenca_entre_pagina_site_servidor_da_web_e_mecanismo_pesquisa
----
-<div class="summary">
-<p><span class="seoSummary">In this article, we describe various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's learn what they each mean!</span></p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>You should know <a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">how the Internet works</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>Be able to describe the differences between a web page, a website, a web server, and a search engine.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>As with any area of knowledge, the web comes with a lot of jargon. Don't worry, we won't overwhelm you with all of it (we have a <a href="/en-US/docs/Glossary">glossary</a> if you're curious). However, there are a few basic terms you need to understand at the outset, since you'll hear these expressions all the time as you read on. It's easy to confuse these terms sometimes since they refer to related but different functionalities. In fact, you'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable!</p>
-
-<p>We'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you:</p>
-
-<dl>
- <dt>web page</dt>
- <dd>A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages."</dd>
- <dt>website</dt>
- <dd>A collection of web pages which are grouped together and usually connected together in various ways. Often called a "web site" or simply a "site."</dd>
- <dt>web server</dt>
- <dd>A computer that hosts a website on the Internet.</dd>
- <dt>search engine</dt>
- <dd>A web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (e.g. you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a web page (e.g. <a href="https://www.bing.com/">bing.com</a> or <a href="https://duckduckgo.com/">duckduckgo.com</a>).</dd>
-</dl>
-
-<p>Let's look at a simple analogy — a public library. This is what you would generally do when visiting a library:</p>
-
-<ol>
- <li>Find a search index and look for the title of the book you want.</li>
- <li>Make a note of the catalog number of the book.</li>
- <li>Go to the particular section containing the book, find the right catalog number, and get the book.</li>
-</ol>
-
-<p>Let's compare the library with a web server:</p>
-
-<ul>
- <li>The library is like a web server. It has several sections, which is similar to a web server hosting multiple websites.</li>
- <li>The different sections (science, math, history, etc.) in the library are like websites. Each section is like a unique website (two sections do not contain same books).</li>
- <li>The books in each section are like webpages. One website may have several webpages, e.g., the Science section (the website) will have books on heat, sound, thermodynamics, statics, etc. (the webpages). Webpages can each be found at a unique location (URL).</li>
- <li>The search index is like the search engine. Each book has its own unique location in the library (two books cannot be kept at the same place) which is specified by the catalog number.</li>
-</ul>
-
-<h2 id="Active_learning">Active learning</h2>
-
-<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
-
-<h2 id="Deeper_dive">Deeper dive</h2>
-
-<p>So, let's dig deeper into how those four terms are related and why they are sometimes confused with each other.</p>
-
-<h3 id="Página_da_Web">Página da Web</h3>
-
-<p>A <strong>web page</strong> is a simple document displayable by a {{Glossary("browser")}}. Such documents are written in the {{Glossary("HTML")}} language (which we look into in more detail in <a href="/en-US/docs/Web/HTML">other articles</a>). A web page can embed a variety of different types of resources such as:</p>
-
-<ul>
- <li><em>style information</em> — controlling a page's look-and-feel</li>
- <li><em>scripts</em> — which add interactivity to the page</li>
- <li><em>media</em> — images, sounds, and videos.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note: </strong>Browsers can also display other documents such as {{Glossary("PDF")}} files or images, but the term <strong>web page</strong> specifically refers to HTML documents. Otherwise, we only use the term <strong>document</strong>.</p>
-</div>
-
-<p>All web pages available on the web are reachable through a unique address. To access a page, just type its address in your browser address bar:</p>
-
-<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p>
-
-<h3 id="Sites_da_Web">Sites da Web</h3>
-
-<p>A <em>website</em> is a collection of linked web pages (plus their associated resources) that share a unique domain name. Each web page of a given website provides explicit links—most of the time in the form of clickable portion of text—that allow the user to move from one page of the website to another.</p>
-
-<p>To access a website, type its domain name in your browser address bar, and the browser will display the website's main web page, or <em>homepage </em>(casually referred as "the home"):</p>
-
-<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p>
-
-<p>The ideas of a <em>web page</em> and a <em>website</em> are especially easy to confuse for a <em>website</em> that contains only one <em>web page.</em> Such a website is sometimes called a <em>single-page website.</em></p>
-
-<h3 id="Servidor_da_Web">Servidor da Web</h3>
-
-<p>A <em>web server</em> is a computer hosting one or more <em>websites</em>. "Hosting" means that all the <em>web pages </em> and their supporting files are available on that computer. The <em>web server</em> will send any <em>web page</em> from the <em>website</em> it is hosting to any user's browser, per user request.</p>
-
-<p>Don't confuse <em>websites</em> and <em>web servers</em>. For example, if you hear someone say, "My website is not responding", it actually means that the <em>web server</em> is not responding and therefore the <em>website</em> is not available. More importantly, since a web server can host multiple websites, the term <em>web server</em> is never used to designate a website, as it could cause great confusion. In our previous example, if we said, "My web server is not responding", it means that multiple websites on that web server are not available.</p>
-
-<h3 id="Mecanismo_de_Pesquisa">Mecanismo de Pesquisa</h3>
-
-<p>Search engines are a common source of confusion on the web. A search engine is a special kind of website that helps users find web pages from <em>other</em> websites.</p>
-
-<p>There are plenty out there: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, and many more. Some are generic, some are specialized about certain topics. Use whichever you prefer.</p>
-
-<p>Many beginners on the web confuse search engines and browsers. Let's make it clear: A <em><strong>browser</strong></em> is a piece of software that retrieves and displays web pages; a <strong><em>search engine</em></strong> is a website that helps people find web pages from other websites. The confusion arises because, the first time someone launches a browser, the browser displays a search engine's homepage. This makes sense, because, obviously, the first thing you want to do with a browser is to find a web page to display. Don't confuse the infrastructure (e.g., the browser) with the service (e.g., the search engine). The distinction will help you quite a bit, but even some professionals speak loosely, so don't feel anxious about it.</p>
-
-<p>Here is an instance of Firefox showing a Google search box as its default startup page:</p>
-
-<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p>
-
-<h2 id="Passos_Seguintes">Passos Seguintes</h2>
-
-<ul>
- <li>Dig deeper: <a href="/en-US/docs/Learn/What_is_a_web_server">What is a web server</a></li>
- <li>See how web pages are linked into a web site: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Understanding links on the web</a></li>
-</ul>
diff --git a/files/pt-pt/learn/common_questions/set_up_a_local_testing_server/index.html b/files/pt-pt/learn/common_questions/set_up_a_local_testing_server/index.html
deleted file mode 100644
index ff782a93fb..0000000000
--- a/files/pt-pt/learn/common_questions/set_up_a_local_testing_server/index.html
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: Como configurar um servidor  local de testes?
-slug: Learn/Common_questions/set_up_a_local_testing_server
-tags:
-  - Aprender
-  - Nodo
-  - PHP
-  - Principiante
-  - Python
-  - django
-  - servidores
-translation_of: Learn/Common_questions/set_up_a_local_testing_server
-original_slug: Learn/Questoes_comuns/Congiurar_um_servidor_de_testes_local
----
-<div class="summary">
-<p>Este artigo explica como configurar um servidor de testes local simples  na sua máquina, e como o utilizar.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>pprimeiro, precisa de saber <a href="/pt-PT/docs/Learn/Questoes_comuns/Como_e_que_funciona_a_Internet">como é que a Internet funciona</a>, e o <a href="/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_servidor_da_Web">que é um servidor da Web</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>You will learn how to set up a local testing server.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Ficheiros_locais_vs._ficheiros_remotos">Ficheiros locais vs. ficheiros remotos</h2>
-
-<p>Throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the HTML file, dragging and dropping it into the browser window, or choosing <em>File</em> &gt; <em>Open...</em> and navigating to the HTML file. There are many ways to achieve this.</p>
-
-<p>If the web address path starts with <code>file://</code> followed by the path to the file on your local hard drive, a local file is being used. In contrast, if you view one of our examples hosted on GitHub (or an example on some other remote server), the web address will start with <code>http://</code> or <code>https://</code>, to show that the file has been received via HTTP.</p>
-
-<h2 id="O_problema_com_o_teste_de_ficheiros_locais">O problema com o teste de ficheiros locais</h2>
-
-<p>Some examples won't run if you open them as local files. This can be due to a variety of reasons, the most likely being:</p>
-
-<ul>
- <li><strong>They feature asynchronous requests</strong>. Some browsers (including Chrome) will not run async requests (see <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>) if you just run the example from a local file. This is because of security restrictions (for more on web security, read <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).</li>
- <li><strong>They feature a server-side language</strong>. Server-side languages (such as PHP or Python) require a special server to interpret the code and deliver the results.</li>
-</ul>
-
-<h2 id="Executar_um_servidor_um_servidor_local_de_HTTP_simples">Executar um servidor um servidor local de HTTP simples</h2>
-
-<p>To get around the problem of async requests, we need to test such examples by running them through a local web server. One of the easiest ways to do this for our purposes is to use Python's <code>SimpleHTTPServer</code> module.</p>
-
-<p>To do this:</p>
-
-<ol>
- <li>
-  <p>Install Python. If you are using Linux or Mac OS X, it should be available on your system already. If you are a Windows user, you can get an installer from the Python homepage and follow the instructions to install it:</p>
-
-  <ul>
-   <li>Go to <a href="https://www.python.org/">python.org</a></li>
-   <li>Under the Download section, click the link for Python "3.xxx".</li>
-   <li>At the bottom of the page, choose the <em>Windows x86 executable installer</em> and download it.</li>
-   <li>When it has downloaded, run it.</li>
-   <li>On the first installer page, make sure you check the "Add Python 3.xxx to PATH" checkbox.</li>
-   <li>Click <em>Install</em>, then click <em>Close</em> when the installation has finished.</li>
-  </ul>
- </li>
- <li>
-  <p>Open your command prompt (Windows)/terminal (OS X/Linux). To check Python is installed, enter the following command:</p>
-
-  <pre class="brush: bash">python -V</pre>
- </li>
- <li>
-  <p>This should return a version number. If this is OK, navigate to the directory that your example is inside, using the <code>cd</code> command.</p>
-
-  <pre class="brush: bash"># include the directory name to enter it, for example
-cd Desktop
-# use two dots to jump up one directory level if you need to
-cd ..</pre>
- </li>
- <li>
-  <p>Enter the command to start up the server in that directory:</p>
-
-  <pre class="brush: bash"># If Python version returned above is 3.X
-python -m http.server
-# If Python version returned above is 2.X
-python -m <code>SimpleHTTPServer</code></pre>
- </li>
- <li>
-  <p>By default, this will run the contents of the directory on a local web server, on port 8000. You can go to this server by going to the URL <code>localhost:8000</code> in your web browser. Here you'll see the contents of the directory listed — click the HTML file you want to run.</p>
- </li>
-</ol>
-
-<div class="note">
-<p><strong>Note</strong>: If you already have something running on port 8000, you can choose another port by running the server command followed by an alternative port number, e.g. <code>python -m http.server 7800</code> (Python 3.x) or <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). You can then access your content at <code>localhost:7800</code>.</p>
-</div>
-
-<h2 id="Running_server-side_languages_locally">Running server-side languages locally</h2>
-
-<p>Python's <code>SimpleHTTPServer</code> module is useful, but it doesn't know how to run code written in languages such as PHP or Python. To handle that you'll need something more — exactly what you'll need depends on the server-side language you are trying to run. Here are a few examples:</p>
-
-<ul>
- <li>To run Python server-side code, you'll need to use a Python web framework. You can find out how to use the Django framework by reading <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> is also a good (slightly less heavyweight) alternative to Django. To run this you'll need to <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>, then install Flask using <code>pip3 install flask</code>. At this point you should be able to run the Python Flask examples using for example <code>python3 python-example.py</code>, then navigating to <code>localhost:5000</code> in your browser.</li>
- <li>To run Node.js (JavaScript) server-side code, you'll need to use raw node or a framework built on top of it. Express is a good choice — see <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
- <li>To run PHP server-side code, you'll need a server setup that can interpret PHP. Good options for local PHP testing are <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) , <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) and <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL, and PHP/Python/Perl). These are complete packages that create local setups to allow you to run the Apache server, PHP, and MySQL databases.</li>
-</ul>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result"> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/common_questions/what_is_a_domain_name/index.html b/files/pt-pt/learn/common_questions/what_is_a_domain_name/index.html
deleted file mode 100644
index 2aa82b66be..0000000000
--- a/files/pt-pt/learn/common_questions/what_is_a_domain_name/index.html
+++ /dev/null
@@ -1,235 +0,0 @@
----
-title: O que é um nome de domíno?
-slug: Learn/Common_questions/What_is_a_domain_name
-tags:
-  - Infraestrutura
-  - Introdução
-  - Nomes de domínio
-  - Principiante
-  - Web
-translation_of: Learn/Common_questions/What_is_a_domain_name
-original_slug: Learn/Questoes_comuns/O_que_e_um_nome_de_dominio
----
-<div class="summary">
-<p>In this article we discuss domain names: what they are, how they are structured, and how to get one.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>First you need to know <a href="/en-US/docs/Learn/How_the_Internet_works">how the Internet works</a> and understand <a href="/en-US/Learn/Understanding_URLs">what URLs are</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Learn what domain names are, how they work, and why they are important.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p><span class="seoSummary">Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</span></p>
-
-<p>Any Internet-connected computer can be reached through a public {{Glossary("IP")}} Address, which consists of 32 bits for IPv4 (they are usually written as four numbers between 0 and 255, separated by dots (e.g., <code>173.194.121.32</code>) or which consists of 128 bits for IPv6 (they are usually written as eight groups of 4 hexadecimal numbers, separated by colons (e.g., <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Computers can handle those addresses easily, but people have a hard time finding out who's running the server or what service the website offers. IP addresses are hard to remember and might change over time. To solve all those problems we use human-readable addresses called domain names.</p>
-
-<h2 id="Aprendizagem_Ativa">Aprendizagem Ativa</h2>
-
-<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
-
-<h2 id="Deeper_dive">Deeper dive</h2>
-
-<h3 id="Estrutura_dos_nomes_de_domínio">Estrutura dos nomes de domínio</h3>
-
-<p>A domain name has a simple structure made of several parts (it might be one part only, two, three...), separated by dots and<strong> read from right to left</strong>:</p>
-
-<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p>
-
-<p>Each of those  parts provides specific information about the whole domain name.</p>
-
-<dl>
- <dt>{{Glossary("TLD")}} (Top-Level Domain).</dt>
- <dd>The TLD provides the most generic information. TLDs tell users the general purpose of the service behind the domain name. The most generic TLDs (.com, .org, .net) don't require web services to meet strict criteria, but some TLDs enforce stricter policies. For example, local TLDs such as .us, .fr, or .sh can require the service to be provided in a given language or hosted in a certain country.</dd>
- <dt>Label (or component)</dt>
- <dd>The labels are what follow the TLD. A label can be anything, from one letter to a full sentence. The label located right before the TLD can also be referred as a <em>Secondary Level Domain</em> (SLD). A domain name can have many labels (or components), it is not mandatory nor necessary to have 3 labels to form a domain name. For instance, www.inf.ed.ac.uk is a correct domain name. When controlling the "upper" part of a domain name (e.g. <a href="https://mozilla.org">mozilla.org</a>), one can create other domain names (sometimes called "subdomains") (e.g. <a href="https://developer.mozilla.org">developer.mozilla.org</a>).</dd>
-</dl>
-
-<h3 id="Comprar_um_nome_de_domínio">Comprar um nome de domínio</h3>
-
-<h4 id="Who_owns_a_domain_name">Who owns a domain name?</h4>
-
-<p>You cannot “buy a domain name”. You pay for the right to use a domain name for one or more years. You can renew your right, and your renewal has priority over other people's applications. But you never own the domain name.</p>
-
-<p>Companies called registrars use domain name registries to keep track of technical and administrative information connecting you to your domain name.</p>
-
-<div class="note">
-<p><strong>Nota : </strong>For some domain name, it might not be a registrar which is in charge of keeping track. For instance, every domain name under .fire is managed by Amazon.</p>
-</div>
-
-<h4 id="Encontrar_um_nome_de_domínio_disponível">Encontrar um nome de domínio disponível</h4>
-
-<p>To find out whether a given domain name is available,</p>
-
-<ul>
- <li>Go to a domain name registrar's website. Most of them provide a “whois” service that tells you whether a domain name is available.</li>
- <li>Alternatively, if you use a system with a built-in shell, type a <code>whois</code> command into it, as shown here for <code>mozilla.org</code>:</li>
-</ul>
-
-<pre>$ whois mozilla.org
-Domain Name:MOZILLA.ORG
-Domain ID: D1409563-LROR
-Creation Date: 1998-01-24T05:00:00Z
-Updated Date: 2013-12-08T01:16:57Z
-Registry Expiry Date: 2015-01-23T05:00:00Z
-Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
-Sponsoring Registrar IANA ID: 292
-WHOIS Server:
-Referral URL:
-Domain Status: clientDeleteProhibited
-Domain Status: clientTransferProhibited
-Domain Status: clientUpdateProhibited
-Registrant ID:mmr-33684
-Registrant Name:DNS Admin
-Registrant Organization:Mozilla Foundation
-Registrant Street: 650 Castro St Ste 300
-Registrant City:Mountain View
-Registrant State/Province:CA
-Registrant Postal Code:94041
-Registrant Country:US
-Registrant Phone:+1.6509030800
-</pre>
-
-<p>As you can see, I can't register <code>mozilla.org</code> because the Mozilla Foundation has already registered it.</p>
-
-<p>On the other hand, let's see if I could register <code>afunkydomainname.org</code>:</p>
-
-<pre>$ whois afunkydomainname.org
-NOT FOUND
-</pre>
-
-<p>As you can see, the domain does not exist in the <code>whois</code> database (at the time of writing), so we could ask to register it. Good to know!</p>
-
-<h4 id="Obter_um_nome_de_domínio">Obter um nome de domínio</h4>
-
-<p>The process is quite straightforward:</p>
-
-<ol>
- <li>Go to a registrar's website.</li>
- <li>Usually there is a prominent “Get a domain name” call to action. Click on it.</li>
- <li>Fill out the form with all required details. Make sure especially that you have not misspelled your desired domain name. Once it's paid for, it's too late!</li>
- <li>The registrar will let you know when the domain name is properly registered. Within a few hours, all DNS servers will have received your DNS information.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota:</strong> In this process the registrar asks you for your real-world address. Make sure you fill it properly, since in some countries registrars may be forced to close the domain if they cannot provide a valid address.</p>
-</div>
-
-<h4 id="Atualizar_DNS">Atualizar DNS</h4>
-
-<p>DNS databases are stored on every DNS server worldwide, and all these servers refer to a few ones called “authoritative name server” or “top-level DNS servers.” Whenever your registrar creates or updates any information for a given domain, the information must be refreshed in every DNS database. Each DNS server that knows about a given domain stores the information for some time before it is automatically invalidated and then refreshed (the DNS server queries an authoritative server again). Thus, it takes some time for DNS servers that know about this domain name to get the up-to-date information.</p>
-
-<div class="note">
-<p><strong>Nota :</strong> This time is often called <strong>propagation time</strong>. However this term is not precise since the update is not propagating itself (top → down). DNS servers queried by your computer (down) are the ones that fetch the information from the authoritative server (top) when they need it.</p>
-</div>
-
-<h3 id="Como_funciona_um_pedido_de_DNS">Como funciona um pedido de DNS?</h3>
-
-<p>As we already saw, when you want to display a webpage in your browser it's easier to type a domain name than an IP address. Let's take a look at the process:</p>
-
-<ol>
- <li>Type <code>mozilla.org</code> in your browser's location bar.</li>
- <li>Your browser asks your computer if it already recognizes the IP address identified by this domain name (using a local DNS cache). If it does, the name is translated to the IP address and the browser negotiates contents with the web server. End of story.</li>
- <li>If your computer does not know which IP is behind the <code>mozilla.org</code> name, it goes on to ask a DNS server, whose job is precisely to tell your computer which IP address matches each registered domain name.</li>
- <li>Now that the computer knows the requested IP address, your browser can negotiate contents with the web server.</li>
-</ol>
-
-<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p>
-
-<h2 id="Passos_seguintes">Passos seguintes</h2>
-
-<p>Okay, we talked a lot about processes and architecture. Time to move on.</p>
-
-<ul>
- <li>If you want to get hands-on, it's a good time to start digging into design and explore <a href="/en-US/Learn/Anatomy_of_a_web_page">the anatomy of a web page</a>.</li>
- <li>It's also worth noting that some aspects of building a website cost money. Please refer to <a href="/en-US/docs/Learn/How_much_does_it_cost">how much it costs to build a web site</a>.</li>
- <li>Or read more about <a href="http://en.wikipedia.org/wiki/Domain_name">Domain Name</a> on Wikipedia.</li>
-</ul>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/common_questions/what_is_a_url/index.html b/files/pt-pt/learn/common_questions/what_is_a_url/index.html
deleted file mode 100644
index 498be31fc4..0000000000
--- a/files/pt-pt/learn/common_questions/what_is_a_url/index.html
+++ /dev/null
@@ -1,232 +0,0 @@
----
-title: O que é um URL?
-slug: Learn/Common_questions/What_is_a_URL
-tags:
-  - Infraestrutura
-  - Principiante
-  - URL
-translation_of: Learn/Common_questions/What_is_a_URL
-original_slug: Learn/Questoes_comuns/O_que_e_um_URL
----
-<div class="summary">
-<p>This article discusses Uniform Resource Locators (URLs), explaining what they are and how they're structured.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>You need to first know <a href="/en-US/docs/Learn/How_the_Internet_works">how the Internet works</a>, <a href="/en-US/docs/Learn/What_is_a_Web_server">what a Web server is</a> and <a href="/en-US/docs/Learn/Understanding_links_on_the_web">the concepts behind links on the web</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>You will learn what a URL is and how it works on the Web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p><span class="seoSummary">With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, <strong><dfn>URL</dfn></strong> is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</span></p>
-
-<p><strong>URL</strong> stands for <em>Uniform Resource Locator</em>. A URL is nothing more than the address of a given unique resource on the Web. In theory, each valid URL points to a unique resource. Such resources can be an HTML page, a CSS document, an image, etc. In practice, there are some exceptions, the most common being a URL pointing to a resource that no longer exists or that has moved. As the resource represented by the URL and the URL itself are handled by the Web server, it is up to the owner of the web server to carefully manage that resource and its associated URL.</p>
-
-<h2 id="Aprendizagem_Ativa">Aprendizagem Ativa</h2>
-
-<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
-
-<h2 id="Deeper_dive">Deeper dive</h2>
-
-<h3 id="Basics_anatomy_of_a_URL">Basics: anatomy of a URL</h3>
-
-<p>Here are some examples of URLs:</p>
-
-<pre>https://developer.mozilla.org
-https://developer.mozilla.org/en-US/docs/Learn/
-https://developer.mozilla.org/en-US/search?q=URL</pre>
-
-<p>Any of those URLs can be typed into your browser's address bar to tell it to load the associated page (resource).</p>
-
-<p>A URL is composed of different parts, some mandatory and others optional. Let's see the most important parts using the following URL:</p>
-
-<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
-
-<dl>
- <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>http://</code> is the protocol. It indicates which protocol the browser must use. Usually it is the HTTP protocol or its secured version, HTTPS. The Web requires one of these two, but browsers also know how to handle other protocols such as <code>mailto:</code> (to open a mail client) or <code>ftp:</code> to handle file transfer, so don't be surprised if you see such protocols.</dd>
- <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>www.example.com</code> is the domain name. It indicates which Web server is being requested. Alternatively, it is possible to directly use an {{Glossary("IP address")}}, but because it is less convenient, it is not often used on the Web.</dd>
- <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>:80</code> is the port. It indicates the technical "gate" used to access the resources on the web server. It is usually omitted if the web server uses the standard ports of the HTTP protocol (80 for HTTP and 443 for HTTPS) to grant access to its resources. Otherwise it is mandatory.</dd>
- <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>/path/to/myfile.html</code> is the path to the resource on the Web server. In the early days of the Web, a path like this represented a physical file location on the Web server. Nowadays, it is mostly an abstraction handled by Web servers without any physical reality.</dd>
- <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>?key1=value1&amp;key2=value2</code> are extra parameters provided to the Web server. Those parameters are a list of key/value pairs separated with the <code>&amp;</code> symbol. The Web server can use those parameters to do extra stuff before returning the resource. Each Web server has its own rules regarding parameters, and the only reliable way to know if a specific Web server is handling parameters is by asking the Web server owner.</dd>
- <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>#SomewhereInTheDocument</code> is an anchor to another part of the resource itself. An anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. On an HTML document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. It is worth noting that the part after the <strong>#</strong>, also known as the<em> <strong>fragment identifier</strong>, is never sent to the server with the request.</em></dd>
-</dl>
-
-<p>{{Note('There are <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">some extra parts and some extra rules</a> regarding URLs, but they are not relevant for regular users or Web developers. Don\'t worry about this, you don\'t need to know them to build and use fully functional URLs.')}}</p>
-
-<p>You might think of a URL like a regular postal mail address: the <em>protocol</em> represents the postal service you want to use, the <em>domain name</em> is the city or town,  and the <em>port</em> is like the zip code; the <em>path</em> represents the building where your mail should be delivered; the <em>parameters</em> represent extra information such as the number of the apartment in the building; and, finally, the <em>anchor</em> represents the actual person to whom you've addressed your mail.</p>
-
-<h3 id="Como_utilizar_os_URLs">Como utilizar os URLs</h3>
-
-<p>Any URL can be typed right inside the browser's address bar to get to the resource behind it. But this is only the tip of the iceberg!</p>
-
-<p>The {{Glossary("HTML")}} language — <a href="/en-US/docs/Learn/HTML/HTML_tags">which will be discussed later on</a> — makes extensive use of URLs:</p>
-
-<ul>
- <li>to create links to other documents with the {{HTMLElement("a")}} element;</li>
- <li>to link a document with its related resources through various elements such as {{HTMLElement("link")}} or {{HTMLElement("script")}};</li>
- <li>to display medias such as images (with the {{HTMLElement("img")}} element), videos (with the {{HTMLElement("video")}} element), sounds and music (with the {{HTMLElement("audio")}} element), etc.;</li>
- <li>to display other HTML documents with the {{HTMLElement("iframe")}} element.</li>
-</ul>
-
-<p>Other technologies, such as {{Glossary("CSS")}} or {{Glossary("JavaScript")}}, use URLs extensively, and these are really the heart of the Web.</p>
-
-<h3 id="URLs_absolutos_vs_URLs_relativos">URLs absolutos vs URLs relativos</h3>
-
-<p>What we saw above is called an <em>absolute URL, </em>but there is also something called a <em>relative URL</em>. Let's examine what that distinction means in more detail.</p>
-
-<p>The required parts of a URL depend to a great extent on the context in which the URL is used. In your browser's address bar, a URL doesn't have any context, so you must provide a full (or <em>absolute</em>) URL, like the ones we saw above. You don't need to include the protocol (the browser uses HTTP by default) or the port (which is only required when the targeted Web server is using some unusual port), but all the other parts of the URL are necessary.</p>
-
-<p>When a URL is used within a document, such as in an HTML page,  things are a bit different. Because the browser already has the document's own URL, it can use this information to fill in the missing parts of any URL available inside that document. We can differentiate between an <em>absolute URL</em> and a <em>relative URL</em> by looking only at the <em>path</em> part of the URL. If the path part of the URL starts with the <code>"/</code>" character, the browser will fetch that resource from the top root of the server, without reference to the context given by the current document.</p>
-
-<p>Let's look at some examples to make this clearer.</p>
-
-<h4 id="Exemplos_de_URLs_absolutos">Exemplos de URLs absolutos</h4>
-
-<dl>
- <dt>Full URL (the same as the one we used before)</dt>
- <dd>
- <pre>https://developer.mozilla.org/en-US/docs/Learn</pre>
- </dd>
- <dt>Implicit protocol</dt>
- <dd>
- <pre>//developer.mozilla.org/en-US/docs/Learn</pre>
-
- <p>In this case, the browser will call that URL with the same protocol as the the one used to load the document hosting that URL.</p>
- </dd>
- <dt>Implicit domain name</dt>
- <dd>
- <pre>/en-US/docs/Learn</pre>
-
- <p>This is the most common use case for an absolute URL within an HTML document. The browser will use the same protocol and the same domain name as the one used to load the document hosting that URL. <strong>Note:</strong> <em>it isn't possible to omit the domain name without omitting the protocol as well</em>.</p>
- </dd>
-</dl>
-
-<h4 id="Exemplos_de_URLs_relativos">Exemplos de URLs relativos</h4>
-
-<p>To better understand the following examples, let's assume that the URLs are called from within the document located at the following URL: <code>https://developer.mozilla.org/en-US/docs/Learn</code></p>
-
-<dl>
- <dt>Sub-resources</dt>
- <dd>
- <pre>Skills/Infrastructure/Understanding_URLs
-</pre>
- Because that URL does not start with <code>/</code>, the browser will attempt to find the document in a sub-directory of the one containing the current resource. So in this example,  we really want to reach this URL: <code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code></dd>
- <dt>Going back in the directory tree</dt>
- <dd>
- <pre>../CSS/display</pre>
-
- <p>In this case, we use the <code>../</code> writing convention — inherited from the UNIX file system world — to tell the browser we want to go up from one directory. Here we want to reach this URL: <code>https://developer.mozilla.org/en-US/docs/Learn/../CSS/display</code>, which can be simplified to: <code>https://developer.mozilla.org/en-US/docs/CSS/display</code></p>
- </dd>
-</dl>
-
-<h3 id="URLs_semânticos">URLs semânticos</h3>
-
-<p>Despite their very technical flavor, URLs represent a human-readable entry point for a Web site. They can be memorized, and anyone can enter them into a browser's address bar. People are at the core of the Web, and so it is considered best practice to build what is called <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>semantic URLs</em></a>.  Semantic URLs  use words with inherent meaning that can be understood by anyone, regardless of their technical know-how.</p>
-
-<p>Linguistic semantics are of course irrelevant to computers. You've probably often seen URLs that look like mashups of random characters. But there are many advantages  to creating human-readable URLs:</p>
-
-<ul>
- <li>It is easier for you to manipulate them.</li>
- <li>It clarifies things for users in terms of where they are, what they're doing, what they're reading or interacting with on the Web.</li>
- <li>Some search engines can use those semantics to improve the classification of the associated pages.</li>
-</ul>
-
-<h2 id="Passos_seguintes">Passos seguintes</h2>
-
-<ul>
- <li><a href="/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_nome_de_dominio">Compreender os nomes de domínio</a></li>
-</ul>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/common_questions/what_is_a_web_server/index.html b/files/pt-pt/learn/common_questions/what_is_a_web_server/index.html
deleted file mode 100644
index 4be6ff278b..0000000000
--- a/files/pt-pt/learn/common_questions/what_is_a_web_server/index.html
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: O que é um servidor da Web?
-slug: Learn/Common_questions/What_is_a_web_server
-tags:
-  - Infraestrutura
-  - Principiante
-translation_of: Learn/Common_questions/What_is_a_web_server
-original_slug: Learn/Questoes_comuns/O_que_e_um_servidor_da_Web
----
-<div class="summary">
-<p>Neste artigo, nós examinamos quais são os servidores da Web, como é que estes funcionam, e por que é que eles são importantes.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>You should already know <a href="/en-US/docs/Learn/How_the_Internet_works">how the Internet works</a>, and <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">understand the difference between a web page, a web site, a web server and a search engine</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>You will learn what a web server is and gain a general understanding of how it works.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>"Web server" can refer to hardware or software, or both of them working together.</p>
-
-<ol>
- <li>On the hardware side, a web server is a computer that stores a website's component files (e.g. HTML documents, images, CSS stylesheets, and JavaScript files) and delivers them to the end-user's device. It is connected to the Internet and can be accessed through a domain name like <code>mozilla.org</code>.</li>
- <li>On the software side, a web server includes several parts that control how web users access hosted files, at minimum an <em>HTTP server. </em>An HTTP server is a piece of software that understands {{Glossary("URL","URLs")}} (web addresses) and {{Glossary("HTTP")}} (the protocol your browser uses to view webpages).</li>
-</ol>
-
-<p>At the most basic level, whenever a browser needs a file hosted on a web server, the browser requests the file via HTTP. When the request reaches the correct web server (hardware), the <em>HTTP server</em> (software) sends the requested document back, also through HTTP.</p>
-
-<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p>
-
-<p>To publish a website, you need either a static or a dynamic web server.</p>
-
-<p>A <strong>static web server</strong>, or stack, consists of a computer (hardware) with an HTTP server (software). We call it "static" because the server sends its hosted files "as-is" to your browser.</p>
-
-<p>A <strong>dynamic web server </strong>consists of a static web server plus extra software, most commonly an <em>application server </em>and a <em>database. </em>We call it "dynamic" because the application server updates the hosted files before sending them to your browser via the HTTP server.</p>
-
-<p>For example, to produce the final webpages you see in the browser, the application server might fill an HTML template with contents from a database. Sites like MDN or Wikipedia have many thousands of webpages, but they aren't real HTML documents, only a few HTML templates and a giant database. This setup makes it easier and quicker to maintain and deliver the content.</p>
-
-<h2 id="Aprendizagem_ativa">Aprendizagem ativa</h2>
-
-<p><em>Ainda não está disponível nenhuma aprendizagem ativa. <a href="/pt-PT/docs/MDN/Intrudução">Por favor, considere contribuir</a>.</em></p>
-
-<h2 id="Deeper_dive">Deeper dive</h2>
-
-<p>To fetch a webpage, as we already said, your browser sends a request to the web server, which proceeds to search for the requested file in its own storage space. On finding the file, the server reads it, processes it as needed, and sends it to the browser. Let's look at those steps in more detail.</p>
-
-<h3 id="Hosting_files">Hosting files</h3>
-
-<p>A web server first has to store the website's files, namely all HTML documents and their related assets, including images, CSS stylesheets, JavaScript files, fonts, and videos.</p>
-
-<p>Technically, you could host all those files on your own computer, but it's far more convenient to store them all on a dedicated web server that</p>
-
-<ul>
- <li>is always up and running</li>
- <li>is always connected to the Internet</li>
- <li>has the same IP address all the time (not all {{Glossary("ISP", "ISPs")}} provide a fixed IP address for home lines)</li>
- <li>is maintained by a third-party provider</li>
-</ul>
-
-<p>For all these reasons, finding a good hosting provider is a key part of building your website. Dig through the various services companies offer and choose one that fits your needs and your budget (services range from free to thousands of dollars per month). You can find more details <a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Hosting">in this article</a>.</p>
-
-<p>Once you set up a web hosting solution, you just have to <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">upload your files to your web server</a>.</p>
-
-<h3 id="Communicating_through_HTTP">Communicating through HTTP</h3>
-
-<p>Second, a web server provides support for {{Glossary("HTTP")}} (<strong>H</strong>yper<strong>t</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol). As its name implies, HTTP specifies how to transfer hypertext (i.e., linked web documents) between two computers.</p>
-
-<p>A <em>protocol </em>is a set of rules for communication between two computers. HTTP is a textual, stateless protocol.</p>
-
-<dl>
- <dt>Textual</dt>
- <dd>All commands are plain-text and human-readable.</dd>
- <dt>Stateless</dt>
- <dd>Neither the server nor the client remember previous communications. For example, relying on HTTP alone, a server cannot remember a password you typed or what step you're on in a transaction. You need an application server for tasks like that. (We'll cover that sort of technology in further articles.)</dd>
-</dl>
-
-<p>HTTP provides clear rules for how a client and server communicate. We'll cover HTTP itself in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">technical article</a> later on. For now, just be aware of these things:</p>
-
-<ul>
- <li>Only <em>clients </em>can make HTTP requests, and then only <em>to servers. </em>Servers can only<em> respond</em> to a <em>client's</em> HTTP request.</li>
- <li>When requesting a file via HTTP, clients must provide the file's {{Glossary("URL")}}.</li>
- <li>The web server <em>must answer </em>every HTTP request, at least with an error message.</li>
-</ul>
-
-<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>On a web server, the HTTP server is responsible for processing and answering incoming requests.</p>
-
-<ol>
- <li>On receiving a request, an HTTP server first checks whether the requested URL matches an existing file.</li>
- <li>If so, the web server sends the file content back to the browser. If not, an application server builds the necessary file.</li>
- <li>If neither process is possible, the web server returns an error message to the browser, most commonly "404 Not Found". (That error is so common that many web designers spend quite some time designing <a href="http://www.404notfound.fr/" rel="external">404 error pages</a>.)</li>
-</ol>
-
-<h3 id="Static_vs._dynamic_content">Static vs. dynamic content</h3>
-
-<p>Roughly speaking, a server can serve either static or dynamic content. "Static" means "served as-is". Static websites are the easiest to set up, so we suggest you make your first site a static site.</p>
-
-<p>"Dynamic" means that the server processes the content or even generates it on the fly from a database. This solution provides more flexibility, but the technical stack becomes more difficult to handle, making it dramatically more complex to build the website.</p>
-
-<p>Take for example the page you're reading right now. On the web server hosting it, there is an application server that takes article content from a database, formats it, puts it inside some HTML templates, and sends you the results. In this case, the application server is called <a href="/en-US/docs/MDN/Kuma">Kuma</a> and is built with <a href="https://www.python.org/">Python</a> (using the <a href="https://www.djangoproject.com/">Django</a> framework). The Mozilla team built Kuma for the specific needs of MDN, but there are many similar applications built on many other technologies.</p>
-
-<p>There are so many application servers that it's pretty hard to suggest a particular one. Some application servers cater to specific website categories like blogs, wikis or e-shops; others, called {{Glossary("CMS", "CMSs")}} (content management systems), are more generic. If you're building a dynamic website, take the time to choose a tool that fits your needs. Unless you want to learn some web server programming (which is an exciting area in itself!), you don't need to create your own application server. That's just reinventing the wheel.</p>
-
-<h2 id="Passos_seguintes">Passos seguintes</h2>
-
-<p>Now that you are familiar with web servers, you could:</p>
-
-<ul>
- <li>read up on<a href="/en-US/docs/Learn/How_much_does_it_cost"> how much it costs to do something on the web</a></li>
- <li>learn more about <a href="/en-US/docs/Learn/What_software_do_I_need">various software you need to create a website</a></li>
- <li>move on to something practical like <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">how to upload files on a web server</a>.</li>
-</ul>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html
deleted file mode 100644
index a35e695b08..0000000000
--- a/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: Cascata e herança
-slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
-translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
-original_slug: Web/CSS/Como_começar/Cascata_e_herança
----
-<p>{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}</p>
-
-<p>Esta página esboça como folhas de estilo interagem numa cascata, e como os elementos subordinados herdam o estilo do elementos primários.</p>
-
-<p>Você alterará à sua folha de estilo de amostra, usando herança para mudar o estilo de muitas partes do seu documento em um passo.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Cascata_e_heran.C3.A7a" name="Informa.C3.A7.C3.A3o:_Cascata_e_heran.C3.A7a">Informação: Cascata e herança</h2>
-
-<p>O estilo final para um elemento pode ser especificado em muitos lugares diferentes, que pode interagir num meio complexo. Esta interação complexa faz CSS poderoso, mas às vezes isto pode deixar confuso e difícil de depurar.</p>
-
-<p>Três códigos principais de informação de estilo formam uma cascata. Eles são:</p>
-
-<ul>
- <li>O estilo padrão do navegador para a linguagem de marcação</li>
- <li>O estilo especificado por um usuário que está lendo o documento</li>
- <li>O estilo ligado ao documento pelo seu autor</li>
-</ul>
-
-<p>O estilo do usuário modifica o estilo padrão do navegador. O estilo do autor do documento então modifica algum outro estilo. Neste tutorial, você é o autor do seu documeto de amostra, e você trabalha somente com folhas de estilo do autor.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Quando você lê este documento no seu navegador Mozilla, parte do estilo que você vê, vem do padrão do seu navegador para HTML.
-    <p>Parte do estilo deve vir das configurações do seu navegador em Opções, ou de um arquivo <code>userConten.css</code> no seu perfil no navegador.</p>
-
-    <p>Parte do seu estilo vem de folhas de estilo ligadas ao documento pelo server do wiki.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- Quando você abre seu documento de amostra no seu navegador, os elementos STRONG são mais fortes do que o resto do texto. Isto vem do estilo padrão do seu navegador para o HTML.</p>
-
-<p>Os elementos STRONG são vermelhos, Isto vem da sua folha de estilo de amostra.</p>
-
-<p>Os elementos STRONG as vezes também herdam muito do estilo de elemento P, pois eles são subordinados. No mesmo caminho, o elemento P herda muito do estilo do elemento BODY.</p>
-
-<p>Para estilos em cascata, o autor das folhas de estilo tem prioridade, depois o leitor das folhas de estilo, e por último o padrão do navegador.</p>
-
-<p>Para estilos em herança, um nó subordinado tem prioridade sobre o estilo que herdou do nó principal.</p>
-
-<p>Estas não são as únicas propriedades que se aplicam. Uma página posterior neste turorial explicará mais.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>CSS às vezes providencia um meio para o leitor anular o estilo do autor do documento, usando a palavra-chave <code>!important</code>.
-    <p>Este meio é para o autor do documento, você não pode sempre predizer exatamente o que os leitores verão.</p>
-
-    <p>Se você quer saber todos os detalhes sobre cascata e herança, veja <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na CSS Specification.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Usando_heran.C3.A7a" name="A.C3.A7.C3.A3o:_Usando_heran.C3.A7a">Ação: Usando herança</h2>
-
-<p>Edite seu arquivo de amostra CSS.</p>
-
-<p>Adicione esta linha copiando e colando isto. Não importa realmente se você adicionar a linha antes ou depois da que já está lá. Entretando, adicionar isto no topo é mais lógico pois no seu documento o elemento P é primário ao elemento STRONG:</p>
-
-<pre class="brush: css">p {color: blue; text-decoration: underline;}
-</pre>
-
-<p>Agora atualize seu navegador para ver o efeito no seu documento de amostra. O sublinhado afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos STRONG herdaram o estilo sublinhado do elemento primário P.</p>
-
-<p>Mas os elementos STRONG ainda são vermelhos. A cor vermelha é própria do estilo, então isto tem prioridade sobre a cor azul do seu elemento primário P.</p>
-
-<table>
- <tbody>
-  <tr>
-   <td>
-    <table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;">
-     <caption>Antes</caption>
-     <tbody>
-      <tr>
-       <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>
-    <table style="border: 2px outset #36b; padding: 1em;">
-     <caption>Depois</caption>
-     <tbody>
-      <tr>
-       <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
- <caption>Desafio</caption>
- <tbody>
-  <tr>
-   <td>Mude sua folha de estilo deixando somente as letras vermelhas sublinhadas:
-    <table style="border: 2px outset #36b; padding: 1em;">
-     <tbody>
-      <tr>
-       <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<h2 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h2>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Cascata_e_heran%C3%A7a" title="Talk:pt/CSS/Como_começar/Cascata_e_herança">Discussão</a>.</p>
-
-<p>Sua folha de estilo de amostra especifica o estilo para os tags, <code>P</code> e <code>STRONG</code>, mudando o estilo dos elementos correspondentes em todo o seu documento original. A próxima página descreve como espeficar estilos em meios mais seletivos: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Seletores" title="pt/CSS/Como_começar/Seletores">Seletores</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}</p>
diff --git a/files/pt-pt/learn/css/building_blocks/index.html b/files/pt-pt/learn/css/building_blocks/index.html
deleted file mode 100644
index 62d3b77849..0000000000
--- a/files/pt-pt/learn/css/building_blocks/index.html
+++ /dev/null
@@ -1,360 +0,0 @@
----
-title: Caixas
-slug: Learn/CSS/Building_blocks
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/Building_blocks
-translation_of_original: Web/Guide/CSS/Getting_started/Boxes
-original_slug: Web/CSS/Como_começar/Caixas
----
-<p>{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}</p>
-
-<p>Esta página descreve como você pode usar as CSS para controlar o espaço que um elemento ocupa quando é exibido.</p>
-
-<p>Em seu documento de amostra, você muda o espaçamento e adiciona regras decorativas.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Caixas" name="Informa.C3.A7.C3.A3o:_Caixas">Informação: Caixas</h2>
-
-<p>Quando seu navegador exibe um elemento, o elemento ocupa um espaço. Existem quatro partes do espaço que ele ocupa.</p>
-
-<p>No meio, está o espaço que o elemento precisa para exibir seu conteúdo. Em torno disso, está o enchimento. Em torno disso, está a borda. Em torno disso, está a margem.</p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="width: 22em;">
-    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;">margin</p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
-
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;">padding</p>
-
-    <div style="background-color: #eee;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
-    </div>
-    </div>
-    </div>
-
-    <p><em>A paleta cinza mostra partes da disposição.</em></p>
-   </td>
-   <td>
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;"> </p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
-
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;"> </p>
-
-    <div style="background-color: #fff;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
-    </div>
-    </div>
-    </div>
-
-    <p><em>Isto é o que você vê em seu navegador.</em></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>O enchimento, a borda e a margem podem ter diferentes tamanhos no topo, na direita, em baixo e na esquerda do elemento. Qualquer ou todos estes tamanhos podem ser zero.</p>
-
-<p>O enchimento é sempre da mesma cor do fundo do elemento. Então quando você configura a cor de fundo, você vê a cor aplicada ao próprio elemento e ao seu enchimento. A margem é sempre transparente.</p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="width: 22em;">
-    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;">margin</p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
-
-    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;">padding</p>
-
-    <div style="background-color: #ded;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
-    </div>
-    </div>
-    </div>
-
-    <p><em>O elemento tem um fundo verde.</em></p>
-   </td>
-   <td>
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;"> </p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
-
-    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;"> </p>
-
-    <div style="background-color: #efe;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
-    </div>
-    </div>
-    </div>
-
-    <p><em>É isto que você vê no seu navegador.</em></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Bordas" name="Bordas">Bordas</h3>
-
-<p>Você pode usar bordas para decorar elementos com linhas ou caixas.</p>
-
-<p>Para especificar a mesma borda em torno de todo o elemento, use a propriedade <code>border</code>. Especifique a largura (usualmente em pixels para exibir na tela), o estilo, e a cor.</p>
-
-<p>Os estilos são:</p>
-
-<table style="margin-left: 2em;">
- <tbody>
-  <tr>
-   <td style="width: 6em;">
-    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
-   </td>
-  </tr>
-  <tr>
-   <td style="width: 6em;">
-    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Você pode também configurar o estilo para <code>none</code> ou <code>hidden</code> para remover a borda explicitamente, ou configurar a cor para <code>transparent</code> para fazer a borda invisível sem mudar a disposição.</p>
-
-<p>Para especificar bordas em um lado de cada vez, use as propriedades: <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, <code>border-left</code>. Você pode usar isto para especificar uma borda em somente um lado, ou diferentes bordas em diferentes lados.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplos</caption>
- <tbody>
-  <tr>
-   <td>Esta regra configura a cor de fundo e a borda do topo dos elementos do cabeçalho:
-    <div style="width: 40em;">
-    <pre class="eval">
-h3 {
-  border-top: 4px solid #7c7; /* mid green */
-  background-color: #efe;     /* pale green */
-  color: #050;                /* dark green */
-  }
-</pre>
-    </div>
-
-    <p>O resultado deve ser como este:</p>
-
-    <table>
-     <tbody>
-      <tr>
-       <td>
-        <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Cabeçalho elegante</p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p><br>
-     Esta regra faz as imagens fáceis de ver dando-as uma borda com um cinza-médio em toda a volta:</p>
-
-    <div style="width: 30em;">
-    <pre class="eval">
-img {border: 2px solid #ccc;}
-</pre>
-    </div>
-
-    <p>O resultado deve ser como este:</p>
-
-    <table>
-     <tbody>
-      <tr>
-       <td>Imagem:</td>
-       <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2528/=Blue-rule.png"></td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Margens_e_enchimento" name="Margens_e_enchimento">Margens e enchimento</h3>
-
-<p>Use margens e enchimento para ajustar a posição dos elementos e para criar espaços ao redor deles.</p>
-
-<p>Use a propriedade <code>margin</code> ou a propriedade <code>padding</code> para configurar a largura da margem ou do enchimento respectivamente.</p>
-
-<p>Se você especificar uma largura, isto se aplicará em torno de todo o elemento (topo, direita, baixo e esquerda).</p>
-
-<p>Se você especificar duas larguras, a primeira se aplicará ao topo e à baixo, e a segunda à direita e à esquerda.</p>
-
-<p>Você pode especificar todas as quatro larguras na ordem: topo, direita, baixo, esquerda.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Esta regra diferencia parágrafos com a classe <code>remark</code> dando-os uma borda vermelha em toda a sua volta.
-    <p>O Enchimento em toda a volta separa um pouco a borda do texto.</p>
-
-    <p>Uma margem esquerda identifica o parágrafo relativo ao resto do texto:</p>
-
-    <div style="width: 30em;">
-    <pre class="eval">
-p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-</pre>
-    </div>
-
-    <p>O resultado deve ser como este:</p>
-
-    <table>
-     <tbody>
-      <tr>
-       <td>
-        <p>Aqui está um parágrafo normal.</p>
-
-        <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui está um com observação.</p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Quando você usa margens e enchimento para ajustar o modo como os elementos são exibidos, suas regras de estilo interagem com o padrão dos navegadores de maneiras que podem ser complexas.
-    <p>Navegadores diferentes exibem os elementos diferentemente. Os resultados podem ser similares antes de sua folha de estilo mudar coisas. Algumas vezes isto pode fazer sua folha de estilo dar resultados surpreendedores.</p>
-
-    <p>Para ter o resultado que você precisa, você pode ter que mudar a marcação do seu documento. A próxima página deste tutorial tem mais informações sobre isto.</p>
-
-    <p>Para informações detalhas sobre enchimento, margens e bordas, veja <a class="external" href="http://www.w3.org/TR/CSS21/box.html">Box model</a> em CSS Specification.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Adicionando_bordas" name="A.C3.A7.C3.A3o:_Adicionando_bordas">Ação: Adicionando bordas</h2>
-
-<p>Edite seu arquivo CSS. Adicione esta regra para desenhar uma linha até o fim da página sobre cada cabeçalho:</p>
-
-<div style="width: 30em;">
-<pre class="eval">h3 {border-top: 1px solid gray;}
-</pre>
-</div>
-
-<p>Se você pegou o desafio na página anterior, modifique a regra que você criou, se não, adicione esta nova regra para adicionar um espaço em baixo de cada item da lista:</p>
-
-<div style="width: 30em;">
-<pre class="eval">li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-</pre>
-</div>
-
-<p>Atualize seu navegador para ver o resultado:</p>
-
-<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
-
-    <ul style="">
-     <li style="margin-bottom: 8px;">Ártico</li>
-     <li style="margin-bottom: 8px;">Atlântico</li>
-     <li style="margin-bottom: 8px;">Pacífico</li>
-     <li style="margin-bottom: 8px;">Índico</li>
-     <li style="margin-bottom: 8px;">Antártico</li>
-    </ul>
-
-    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
-
-    <p><strong>1: </strong>Lorem ipsum</p>
-
-    <p><strong>2: </strong>Dolor sit</p>
-
-    <p><strong>3: </strong>Amet consectetuer</p>
-
-    <p><strong>4: </strong>Magna aliquam</p>
-
-    <p><strong>5: </strong>Autem veleum</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Desafio</caption>
- <tbody>
-  <tr>
-   <td>Adicione uma regra à sua folha de estilo, fazendo um borda larga em toda a volta dos oceanos em uma cor que te lembre o mar — algo como isto:
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
-
-        <div style="border: 12px solid #69b; padding-left: 1em;">
-        <ul style="">
-         <li style="margin-bottom: 8px;">Ártico</li>
-         <li style="margin-bottom: 8px;">Atlântico</li>
-         <li style="margin-bottom: 8px;">Pacífico</li>
-         <li style="margin-bottom: 8px;">Índico</li>
-         <li style="margin-bottom: 8px;">Antártico</li>
-        </ul>
-        </div>
-
-        <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
-
-        <p><strong>. . .</strong></p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>(Não é necessário fazer exatamente com a largura e a cor que usadas aqui.)</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois" name="O_que_vem_depois">O que vem depois</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Caixas" title="Talk:pt/CSS/Como_começar/Caixas">Discussão</a>.</p>
-
-<p>Especificando margens e enchimento, você modificou a disposição do seu documento. Na próxima página você poderá mudar a disposição do seu documento de outras maneiras: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="pt/CSS/Como_começar/Disposição">Disposição</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}</p>
diff --git a/files/pt-pt/learn/css/building_blocks/selectors/index.html b/files/pt-pt/learn/css/building_blocks/selectors/index.html
deleted file mode 100644
index d10ad5f044..0000000000
--- a/files/pt-pt/learn/css/building_blocks/selectors/index.html
+++ /dev/null
@@ -1,209 +0,0 @@
----
-title: Seletores
-slug: Learn/CSS/Building_blocks/Selectors
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/Building_blocks/Selectors
-translation_of_original: Web/Guide/CSS/Getting_started/Selectors
-original_slug: Web/CSS/Como_começar/Seletores
----
-<p>{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}</p>
-
-<p>Esta página explica como você pode aplicar estilos seletivamente, e como diferentes tipos de seletor têm propriedades diferentes.</p>
-
-<p>Você adiciona alguns atributos às tags do seu documento de amostra, e usa estes atributos em sua folha de estilo de amostra.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Seletores" name="Informa.C3.A7.C3.A3o:_Seletores">Informação: Seletores</h2>
-
-<p>CSS tem sua própria terminologia para descrever a linguagem CSS. Anteriormente neste tutorial, você criou uma linha em sua folha de estilo com esta:</p>
-
-<div style="width: 30em;">
-<pre>strong {color: red;}
-</pre>
-</div>
-
-<p>Na terminologia das CSS, esta linha inteira é uma <em>regra</em>. Esta regra começa com <code>STRONG</code>, que é um <em>seletor</em>. Isto seleciona que elementos no DOM a regra se aplicará.</p>
-
-<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>A parte interior das chaves é a <em>declaração</em>.
-    <p>A palavra-chave <code>color</code> é uma <em>propriedade</em>, e <code>red</code> é um <em>valor</em>.</p>
-
-    <p>O ponto-e-vírgula depois do par propriedade-valor separa isto de outros pares propriedade-valor na mesma descrição.</p>
-
-    <p>Este tutorial refere-se a um seletor <code>STRONG</code>, como um seletor de <em>tag</em>. A Especificação das CSS refere-se a isto como um seletor de <em>tipo</em>.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Esta página do tutorial explica mais sobre os seletores que você pode usar nas regras das CSS.</p>
-
-<p>Em adição aos nomes de tags, você pode usar valores de atributo nos seletores. Isto permite a você que as regras tornem-se mais específicas.</p>
-
-<p>Dois atributos tem estado especial para as CSS. Eles são <code>class</code> e <code>id</code>.</p>
-
-<p>Use o atributo <code>class</code> em uma tag para nomear a tag com um nome de classe. Isto é, o nome que você escolher para a classe.</p>
-
-<p>Na sua folha de estilo, digite um registro completo (período) antes do nome de classe quando você usá-lo em um seletor.</p>
-
-<p>Use o atributo <code>id</code> em uma tag para nomear a tag com um nome de id. Isto é, o nome que você escolher para o id. O nome do id deve ser único no documento.</p>
-
-<p>Na sua folha de estilo, digite um sinal de número (#) antes do id quando você usá-lo em um seletor.</p>
-
-<table style="border: 1px solid #36b; background-color: #ffe; padding: 1em;">
- <caption>Exemplos</caption>
- <tbody>
-  <tr>
-   <td>Este tag HTML tem ambos os atributos <code>class</code> e <code>id</code>.
-    <div style="width: 30em;">
-    <pre>
-&lt;P class="key" id="principal"&gt;
-</pre>
-    </div>
-
-    <p>O id, <code>principal</code>, deve ser o único no documento, mas outras tags no documento podem ter o mesmo nome de classe, <code>key</code>.</p>
-
-    <p>Em uma folha de estilo CSS, esta regra faz todos os elementos da classe <code>key</code> verdes. (Eles podem não ser todos elementos <small>P</small>.)</p>
-
-    <div style="width: 30em;">
-    <pre>
-.key {color: green;}
-</pre>
-    </div>
-
-    <p>Esta regra faz um elemento com o id <code>principal</code> negrito:</p>
-
-    <div style="width: 30em;">
-    <pre>
-#principal {font-weight: bolder;}
-</pre>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Se mais de uma regra se aplicar a um elemento e especificar a mesma propriedade, então CSS dará prioridade para a regra que tiver o seletor mais específico. Um seletor id é mais específíco que um seletor classe, que por sua vez é mais específico que um seletor tag.</p>
-
-<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Você pode combinar seletores para fazer um seletor mais específico.
-    <p>Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que tem o nome de classe <code>key</code>. O seletor <code>p.key</code> seleciona somente os elementos P que tiverem o nome de classe <code>key</code>.</p>
-
-    <p>Você não está restrito aos dois atributos especiais, <code>class</code> e <code>id</code>. Você pode especificar outros atributos igualando entre colchetes. Por exemplo, o seletor <code>{{ mediawiki.external('type=button') }}</code> seleciona todos os elementos que tiverem um atributo <code>type</code> com o valor <code>button</code>.</p>
-
-    <p>Uma página posterior deste tutorial (<a href="/pt/CSS/Como_come%C3%A7ar/Tabelas" title="pt/CSS/Como_começar/Tabelas">Tabelas</a>) tem informações sobre seletores complexos baseados em parentescos.</p>
-
-    <p>Para um informação completa sobre seletores, veja <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> na CSS Specification.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Se sua folha de estilo tiver regras conflitantes e elas estiverem igualmente especificadas, então CSS dará prioridade para a regra que foi especificada por último na folha de estilo.</p>
-
-<p>Quando você tiver um problema com regras conflitantes, tente resolvê-lo fazendo uma das regras mais especificada, então ela terá prioridade. Se você não puder fazer isto, tente mover uma das regras para mais perto do fim da folha de estilo, então esta terá prioridade.</p>
-
-<h3 id="A.C3.A7.C3.A3o:_Usando_seletores_de_classe_e_id" name="A.C3.A7.C3.A3o:_Usando_seletores_de_classe_e_id">Ação: Usando seletores de classe e id</h3>
-
-<p>Edite seu arquivo HTML, e duplique o paragrafo copiando e colando-o. Então adicione os atributos de id e classe na primeira cópia, e um id na segunda cópia como mostrado abaixo. Um alternativa é copiar e colar o arquivo inteiro novamente:</p>
-
-<div style="width: 48em; color: gray;">
-<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
-&lt;HTML&gt;
-  &lt;HEAD&gt;
-  &lt;TITLE&gt;Documento de amostra&lt;/TITLE&gt;
-  &lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;
-  &lt;/HEAD&gt;
-  &lt;BODY&gt;
-    &lt;P <strong style="color: black;">id="first"</strong>&gt;
-      &lt;STRONG <strong style="color: black;">class="carrot"</strong>&gt;C&lt;/STRONG&gt;ascading
-      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;tyle
-      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;heets
-    &lt;/P&gt;
-    <strong style="color: black;">&lt;P id="second"&gt;
-      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
-      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
-      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
-    &lt;/P&gt;</strong>
-  &lt;/BODY&gt;
-&lt;/HTML&gt;
-</pre>
-</div>
-
-<p>Agora edite seu arquivo CSS. Substitua os componentes inteiros com:</p>
-
-<div style="width: 40em;">
-<pre>strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-</pre>
-</div>
-
-<p><br>
- Atualize seu navegador para ver o resultado:</p>
-
-<table style="border: 2px outset #36b; padding: 1em;">
- <tbody>
-  <tr>
-   <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-  </tr>
-  <tr>
-   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- Você pode tentar re-dispor as linhas no seu arquivo CSS para mostrar que a ordem não muda o efeito.</p>
-
-<p>Os seletores de classe <code>.carrot</code> e <code>.spinach</code> tem prioridade sobre o seletor de tag <code>STRONG</code>.</p>
-
-<p>O seletor id <code>#first</code> tem prioridade sobre a classe o os seletores de tag.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
- <caption>Desafios</caption>
- <tbody>
-  <tr>
-   <td>Sem mudar seu arquivo HTML, adicione uma única regra para seu arquivo CSS deixando todas as letras iniciais da mesma cor que estão agora, mas fazendo todo o segundo parágrafo aparecer em azul:
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-      </tr>
-      <tr>
-       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>Agora mude a regra que você acabou de adicionar (sem mudar mais nenhuma coisa), para fazer o primeiro parágrafo em azul também:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-      </tr>
-      <tr>
-       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Seletores" title="Talk:pt/CSS/Como_começar/Seletores">Discussão</a>.</p>
-
-<p>Sua folha de estilo de amostra está começando a parecer densa e complicada. A próxima página descreve caminhos para fazer o CSS mais fácil de ler: <strong><a href="/pt/CSS/Como_come%C3%A7ar/CSS_leg%C3%ADvel" title="pt/CSS/Como_começar/CSS_legível">CSS legível</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}</p>
diff --git a/files/pt-pt/learn/css/building_blocks/styling_tables/index.html b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html
deleted file mode 100644
index 8967f90eb8..0000000000
--- a/files/pt-pt/learn/css/building_blocks/styling_tables/index.html
+++ /dev/null
@@ -1,656 +0,0 @@
----
-title: Tabelas
-slug: Learn/CSS/Building_blocks/Styling_tables
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/Building_blocks/Styling_tables
-translation_of_original: Web/Guide/CSS/Getting_started/Tables
-original_slug: Web/CSS/Como_começar/Tabelas
----
-<p>{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}</p>
-
-<p>Esta página descreve seletores mais avançados, e algumas maneiras específicas para estilizar tabelas.</p>
-
-<p>Você cria um novo documento de amostra contendo uma tabela, e uma folha de estilo para isto.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Mais_seletores" name="Informa.C3.A7.C3.A3o:_Mais_seletores">Informação: Mais seletores</h2>
-
-<p>CSS possui algumas maneiras para selecionar elementos baseadas nas relações entre eles. Você pode usá-las para fazer seletores que sejam mais específicos.</p>
-
-<p>Aqui está um sumário de seletores baseados em relações:</p>
-
-<table style="margin-left: 2em;">
- <tbody>
-  <tr>
-   <td style="width: 10em;"><strong>Seletor</strong></td>
-   <td><strong>Seleciona</strong></td>
-  </tr>
-  <tr>
-   <td><code>A E</code></td>
-   <td>Qualquer elemento E que seja <em>descendente</em> de um elemento A (isso é: um subitem, ou um subitem de um sub item, <em>etc</em>.)</td>
-  </tr>
-  <tr>
-   <td><code>A &gt; E</code></td>
-   <td>Qualquer elemento E que seja subitem de um elemento A</td>
-  </tr>
-  <tr>
-   <td><code>E:first-child</code></td>
-   <td>Qualque elemento E que seja o primeiro subitem do seu principal</td>
-  </tr>
-  <tr>
-   <td><code>B + E</code></td>
-   <td>Qualquer elemento E que seja o próximo <em>irmão</em> de um elemento B (isso é: o próximo subitem do mesmo principal)</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Você pode combinar isto para expressar relações complexas.</p>
-
-<p>Você pode também usar o símbolo <code>*</code> (asterisco) para dizer "qualquer elemento".</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Uma tabela HTML tem um atributo <code>id</code>, mas suas linhas e células não tem identificadores individuais:
-    <div style="width: 30em;">
-    <pre class="eval">
-&lt;TABLE id="data-table-1"&gt;
-...
-&lt;TR&gt;
-&lt;TD&gt;Prefix&lt;/TD&gt;
-&lt;TD&gt;0001&lt;/TD&gt;
-&lt;TD&gt;default&lt;/TD&gt;
-&lt;/TR&gt;
-...
-</pre>
-    </div>
-
-    <p>Estas regras fazem a primeira célula em cada linha em negrito, e a segunda célula em cada linha monoespaçada. Elas afetam somente uma tabela específica no documento:</p>
-
-    <div style="width: 45em;">
-    <ol>
-     <li>data-table-1 td:first-child {font-weight: bolder;}</li>
-     <li>data-table-1 td:first-child + td {font-family: monospace;}</li>
-    </ol>
-    </div>
-
-    <p>O resultado é algo como isto:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <table style="width: 18em; margin-right: 2em;">
-         <tbody>
-          <tr>
-           <td><strong>Prefix</strong></td>
-           <td><code>0001</code></td>
-           <td>default</td>
-          </tr>
-         </tbody>
-        </table>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>De maneira usual, se você faz um seletor mais específico então você aumenta sua prioridade.
-    <p>Usando estas técnicas, você evita precisar especificar atributos <code>class</code> ou <code>id</code> em muitas tags no seu documento. Em vez disso, CSS faz o trabalho.</p>
-
-    <p>Em grandes projetos onde a velocidade é importante, você pode fazer suas folhas de estilo mais eficientes evitando regras complexas que dependem da relação entre elementos.</p>
-
-    <p>Para detalhes completos sobre seletores, veja <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> em CSS Specification.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Tabelas" name="Informa.C3.A7.C3.A3o:_Tabelas">Informação: Tabelas</h2>
-
-<p>Uma tabela é um arranjo de informação em uma grade retangular. Algumas tabelas podem ser complexas, e para tabelas complexas diferentes navegadores podem exibir diferentes resultados.</p>
-
-<p>Quando você desenha seu documento, use e a tabela para expressar as relações entre as peças da informação. Então não importará se os diferentes navegadores apresentarem a informação de maneiras levemente diferentes, pois o significado ainda pode ser compreendido.</p>
-
-<p>Não use tabelas de maneiras não usuais para produzir disposições visuais particulares. As técnicas na página anterior deste tutorial (<a href="/pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="pt/CSS/Como_começar/Disposição">Disposição</a>) são melhores para isto.</p>
-
-<h4 id="Estrutura_da_tabela" name="Estrutura_da_tabela">Estrutura da tabela</h4>
-
-<p>Em uma tabela, cada peça de informação é exibida em uma <em>célula</em>.</p>
-
-<p>As células em uma linha horizontal na página compõem uma <em>linha</em>.</p>
-
-<p>Em algumas tabelas, as linhas podem ser agrupadas. Um grupo especial de linhas no começo da tabela é o <em>cabeçalho</em>. Um grupo especial de linhas no final da tabela é o <em>rodapé</em>. As linhas principais na tabela são o <em>corpo</em>, e elas podem também estar em grupos.</p>
-
-<p>As células em uma linha vertical na página compõem uma <em>coluna</em>, mas as colunas têm usos limitados nas tabelas das CSS.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>A tabela de seletores próxima ao topo desta página tem dez células em cinco linhas.
-    <p>A primeira linha é o cabeçalho. As outras quatro linhas são o corpo. Não há um rodapé.</p>
-
-    <p>Ela tem duas colunas.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Este tutorial somente cobre tabelas simples, onde os resultados são razoavelmente previsíveis. Em uma tabela simples, toda célula ocupa somente uma linha e coluna. Você pode usar CSS para tabelas complexas onde células <em>expandam</em> (extendam-se sobre) mais do que uma linha ou coluna, mas tabelas como estas estão fora do escopo deste tutorial básico.</p>
-
-<h3 id="Bordas" name="Bordas">Bordas</h3>
-
-<p>Células não têm margens.</p>
-
-<p>Células têm bordas e enchimento. Por padrão, as bordas são separadas pelo valor da propriedade <code>border-spacing</code> da tabela. Você pode também remover o espaçamento completamente configurando a propriedade <code>border-collapse</code> da tabela para <code>collapse</code>.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Aqui estão três tabelas.
-    <p>A tabela da esquerda tem espaçamento de borda 0.5 em. A tabela do centro tem espaçamento da borda zero. A tabela da direita tem bordas unidas:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td style="padding-right: 2em;">
-        <table style="">
-         <tbody>
-          <tr>
-           <td style="border: 1px solid #c00; text-align: center;">Paus</td>
-           <td style="border: 1px solid #c00; text-align: center;">Copas</td>
-          </tr>
-          <tr>
-           <td style="border: 1px solid #c00; text-align: center;">Ouros</td>
-           <td style="border: 1px solid #c00; text-align: center;">Espadas</td>
-          </tr>
-         </tbody>
-        </table>
-       </td>
-       <td style="padding-right: 2em;">
-        <table style="">
-         <tbody>
-          <tr>
-           <td style="border: 1px solid #c00; text-align: center;">Paus</td>
-           <td style="border: 1px solid #c00; text-align: center;">Copas</td>
-          </tr>
-          <tr>
-           <td style="border: 1px solid #c00; text-align: center;">Ouros</td>
-           <td style="border: 1px solid #c00; text-align: center;">Espadas</td>
-          </tr>
-         </tbody>
-        </table>
-       </td>
-       <td style="padding-right: 6em;">
-        <table style="border-collapse: collapse;">
-         <tbody>
-          <tr>
-           <td style="border: 1px solid #c00; text-align: center;">Paus</td>
-           <td style="border: 1px solid #c00; text-align: center;">Copas</td>
-          </tr>
-          <tr>
-           <td style="border: 1px solid #c00; text-align: center;">Ouros</td>
-           <td style="border: 1px solid #c00; text-align: center;">Espadas</td>
-          </tr>
-         </tbody>
-        </table>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Subt.C3.ADtulos" name="Subt.C3.ADtulos">Subtítulos</h3>
-
-<p>Um <em>subtítulo</em> é uma etiqueta que se aplica à tabela inteira. Por padrão, isto é mostrado no topo da tabela.</p>
-
-<p>Para mover isto para o fim, configure a propriedade <code>caption-side</code> para <code>bottom</code>. A propriedade é herdada, então alternativamente você pode configurar isto na tabela em outro elemento ascendente.</p>
-
-<p>Para estilizar o texto do subtítulo, use qualquer das propriedades usuais para texto.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Esta tabela tem um subtítulo no fim:
-    <div style="width: 30em;">
-    <pre class="eval">
-#demo-table &gt; caption {
-  caption-side: bottom;
-  font-style: italic;
-  text-align: right;
-  }
-</pre>
-    </div>
-
-    <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <table>
-         <caption>Naipes</caption>
-         <tbody>
-          <tr>
-           <td>
-            <table style="border-collapse: collapse;">
-             <tbody>
-              <tr>
-               <td style="border: 1px solid gray; text-align: center;">Paus</td>
-               <td style="border: 1px solid gray; text-align: center;">Copas</td>
-              </tr>
-              <tr>
-               <td style="border: 1px solid gray; text-align: center;">Ouros</td>
-               <td style="border: 1px solid gray; text-align: center;">Espadas</td>
-              </tr>
-             </tbody>
-            </table>
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="C.C3.A9lulas_vazias" name="C.C3.A9lulas_vazias">Células vazias</h3>
-
-<p>Você pode exibir células vazias (isto é, suas bordas e fundos) especificando <code>empty-cells: show;</code> para o elemento da tabela.</p>
-
-<p>Você pode escondê-los especificando <code>empty-cells:hide;</code>. Então, se um elemento principal tem um fundo e o chama, isto mostra através da célula vazia.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Estas tabelas tem um fundo de verde pálido. Suas células tem um fundo de cinza pálido e bordas de cinza escuro.
-    <p>Na esquerda da tabela, a célula vazia é mostrada. Na direita, é escondida:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td style="padding-right: 2em;">
-        <table style="background-color: #dfd;">
-         <tbody>
-          <tr>
-           <td style="border: 1px solid #555; background-color: #eee;"> </td>
-           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Copas</td>
-          </tr>
-          <tr>
-           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Ouros</td>
-           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Espadas</td>
-          </tr>
-         </tbody>
-        </table>
-       </td>
-       <td style="padding-right: 6em;">
-        <table style="background-color: #dfd;">
-         <tbody>
-          <tr>
-           <td> </td>
-           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Copas</td>
-          </tr>
-          <tr>
-           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Ouros</td>
-           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Espadas</td>
-          </tr>
-         </tbody>
-        </table>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Para informações detalhasdas sobre tabelas, veja <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> em CSS Specification.
-    <p>A informação lá vai além do que há neste tutorial, mas não cobre as diferenças entre os navegadores que podem afetar tabelas complexas.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Estilizando_uma_tabela" name="A.C3.A7.C3.A3o:_Estilizando_uma_tabela">Ação: Estilizando uma tabela</h2>
-
-<p>Faça um novo documento HTML, <code>doc3.html</code>. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:</p>
-
-<div style="width: 48em; height: 12em; overflow: auto;">
-<pre>&lt;DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
-&lt;HTML&gt;
-&lt;HEAD&gt;
-&lt;TITLE&gt;Documento de amostra 3&lt;/TITLE&gt;
-&lt;LINK rel="stylesheet" type="text/css" href="style3.css"&gt;
-&lt;/HEAD&gt;
-&lt;BODY&gt;
-
-&lt;TABLE id="demo-table"&gt;
-&lt;CAPTION&gt;Oceanos&lt;/CAPTION&gt;
-
-&lt;THEAD&gt;
-&lt;TR&gt;
-&lt;TH&gt;&lt;/TH&gt;
-&lt;TH&gt;Área&lt;/TH&gt;
-&lt;TH&gt;Profundidade Média&lt;/TH&gt;
-&lt;/TR&gt;
-&lt;TR&gt;
-&lt;TH&gt;&lt;/TH&gt;
-&lt;TH&gt;milhões de km&lt;SUP&gt;2&lt;/SUP&gt;&lt;/TH&gt;
-&lt;TH&gt;m&lt;/TH&gt;
-&lt;/TR&gt;
-&lt;/THEAD&gt;
-
-&lt;TBODY&gt;
-&lt;TR&gt;
-&lt;TH&gt;Ártico&lt;/TH&gt;
-&lt;TD&gt;13,000&lt;/TD&gt;
-&lt;TD&gt;1,200&lt;/TD&gt;
-&lt;/TR&gt;
-&lt;TR&gt;
-&lt;TH&gt;Atlântico&lt;/TH&gt;
-&lt;TD&gt;87,000&lt;/TD&gt;
-&lt;TD&gt;3,900&lt;/TD&gt;
-&lt;/TR&gt;
-&lt;TR&gt;
-&lt;TH&gt;Pacífico&lt;/TH&gt;
-&lt;TD&gt;180,000&lt;/TD&gt;
-&lt;TD&gt;4,000&lt;/TD&gt;
-&lt;/TR&gt;
-&lt;TR&gt;
-&lt;TH&gt;Índico&lt;/TH&gt;
-&lt;TD&gt;75,000&lt;/TD&gt;
-&lt;TD&gt;3,900&lt;/TD&gt;
-&lt;/TR&gt;
-&lt;TR&gt;
-&lt;TH&gt;Antártico&lt;/TH&gt;
-&lt;TD&gt;20,000&lt;/TD&gt;
-&lt;TD&gt;4,500&lt;/TD&gt;
-&lt;/TR&gt;
-&lt;/TBODY&gt;
-
-&lt;TFOOT&gt;
-&lt;TR&gt;
-&lt;TH&gt;Total&lt;/TH&gt;
-&lt;TD&gt;361,000&lt;/TD&gt;
-&lt;TD&gt;&lt;/TD&gt;
-&lt;/TR&gt;
-&lt;TR&gt;
-&lt;TH&gt;Média&lt;/TH&gt;
-&lt;TD&gt;72,000&lt;/TD&gt;
-&lt;TD&gt;3,800&lt;/TD&gt;
-&lt;/TR&gt;
-&lt;/TFOOT&gt;
-
-&lt;/TABLE&gt;
-
-&lt;/BODY&gt;
-&lt;/HTML&gt;
-</pre>
-</div>
-
-<p>Crie uma nova folha de estilo, <code>style3.css</code>. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:</p>
-
-<div style="width: 48em; height: 12em; overflow: auto;">
-<pre>/*** Estilo para doc3.html (Tabelas) ***/
-
-#demo-table {
-  font: 100% sans-serif;
-  background-color: #efe;
-  border-collapse: collapse;
-  empty-cells: show;
-  border: 1px solid #7a7;
-  }
-
-#demo-table &gt; caption {
-  text-align: left;
-  font-weight: bold;
-  font-size: 200%;
-  border-bottom: .2em solid #4ca;
-  margin-bottom: .5em;
-  }
-
-
-/* basic shared rules */
-#demo-table th,
-#demo-table td {
-  text-align: right;
-  padding-right: .5em;
-  }
-
-#demo-table th {
-  font-weight: bold;
-  padding-left: .5em;
-  }
-
-
-/* header */
-#demo-table &gt; thead &gt; tr:first-child &gt; th {
-  text-align: center;
-  color: blue;
-  }
-
-#demo-table &gt; thead &gt; tr + tr &gt; th {
-  font-style: italic;
-  color: gray;
-  }
-
-/* fix size of superscript */
-#demo-table sup {
-  font-size: 75%;
-  }
-
-/* body */
-#demo-table td {
-  background-color: #cef;
-  padding:.5em .5em .5em 3em;
-  }
-
-#demo-table tbody th:after {
-  content: ":";
-  }
-
-
-/* footer */
-#demo-table tfoot {
-  font-weight: bold;
-  }
-
-#demo-table tfoot th {
-  color: blue;
-  }
-
-#demo-table tfoot th:after {
-  content: ":";
-  }
-
-#demo-table &gt; tfoot td {
-  background-color: #cee;
-  }
-
-#demo-table &gt; tfoot &gt; tr:first-child td {
-  border-top: .2em solid #7a7;
-  }
-</pre>
-</div>
-
-<p>Abra o documento no seu navegador. Deve ser muito similar a este:</p>
-
-<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
- <tbody>
-  <tr>
-   <td>
-    <div>
-    <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceanos</p>
-
-    <div style="border: 1px solid #7a7; background-color: #efe;">
-    <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
-     <tbody>
-      <tr style="text-align: center; color: blue;">
-       <th> </th>
-       <th>Área</th>
-       <th style="padding-left: .5em; padding-right: .5em;">Profundidade média</th>
-      </tr>
-      <tr style="font-style: italic; color: gray;">
-       <th> </th>
-       <th style="padding-left: .5em; padding-right: .5em;">milhões de km<sup>2</sup></th>
-       <th style="padding-left: .5em; padding-right: .5em;">m</th>
-      </tr>
-      <tr>
-       <th style="padding-right: .5em;">Ártico:</th>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
-      </tr>
-      <tr>
-       <th style="padding-right: .5em;">Atlântico:</th>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
-      </tr>
-      <tr>
-       <th style="padding-right: .5em;">Pacífico:</th>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
-      </tr>
-      <tr>
-       <th style="padding-right: .5em;">Índico:</th>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
-      </tr>
-      <tr>
-       <th style="padding-left: .5em; padding-right: .5em;">Antártico:</th>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
-       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
-      </tr>
-      <tr>
-       <th style="padding-right: .5em; color: blue;">Total:</th>
-       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
-       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
-      </tr>
-      <tr>
-       <th style="padding-right: .5em; color: blue;">Média:</th>
-       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
-       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
-      </tr>
-     </tbody>
-    </table>
-    </div>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Compare estas regras em sua folha de estilo com a tabela exibida, para se assegurar de que entende o efeito de cada regra. Se você achou uma regra com a qual não está seguro sobre, descomente-a e atualize o navegador para ver o que acontece.</p>
-
-<p>Aqui estão algumas notas sobre esta tabela:</p>
-
-<ul>
- <li>O subtítulo encontra-se fora da borda da tabela.</li>
- <li>Se você tiver um tamanho mínimo do ponto ajustado nas Opções, isto pode afetar o sobre-escrito no km<sup>2</sup>.</li>
- <li>Existem três células vazias. Duas delas permitem que o fundo da tabela apareça através. A terceira tem um fundo e uma borda no topo.</li>
- <li>As colunas são adicionadas pela folha de estilos.</li>
-</ul>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
- <caption>Desafios</caption>
- <tbody>
-  <tr>
-   <td>Mude a folha de estilo para fazer a tabela parecer com isto:
-    <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <div>
-        <div style="border: 1px solid #7a7; background-color: #efe;">
-        <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
-         <tbody>
-          <tr style="text-align: center; color: blue;">
-           <th> </th>
-           <th>Área</th>
-           <th style="padding-left: .5em; padding-right: .5em;">Profundidade média</th>
-          </tr>
-          <tr style="font-style: italic; color: gray;">
-           <th> </th>
-           <th style="padding-left: .5em; padding-right: .5em;">milhões de km<sup>2</sup></th>
-           <th style="padding-left: .5em; padding-right: .5em;">m</th>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em;">Ártico:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em;">Atlântico:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em;">Pacífico:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em;">Índico:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
-          </tr>
-          <tr>
-           <th style="padding-left: .5em; padding-right: .5em;">Antártico:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em; color: blue;">Total:</th>
-           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
-           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em; color: blue;">Média:</th>
-           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
-           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
-          </tr>
-         </tbody>
-        </table>
-        </div>
-
-        <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceanos</p>
-        </div>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor combribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Tabelas" title="Talk:pt/CSS/Como_começar/Tabelas">Discussão</a>.</p>
-
-<p>Esta é a última página deste tutorial que foca as propriedades e valores das CSS. Para um sumário completo de propriedades e valores, veja <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> em CSS Specification.</p>
-
-<p>A próxima página mostra novamente o propósito e a estrutura das folhas de estilo CSS: <strong><a href="/pt/CSS/Como_come%C3%A7ar/M%C3%ADdia" title="pt/CSS/Como_começar/Mídia">Mídia</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}</p>
diff --git a/files/pt-pt/learn/css/building_blocks/values_and_units/index.html b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html
deleted file mode 100644
index 1c5855e14c..0000000000
--- a/files/pt-pt/learn/css/building_blocks/values_and_units/index.html
+++ /dev/null
@@ -1,342 +0,0 @@
----
-title: Cor
-slug: Learn/CSS/Building_blocks/Values_and_units
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
-translation_of_original: Web/Guide/CSS/Getting_started/Color
-original_slug: Web/CSS/Como_começar/Cor
----
-<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p>
-
-<p>Esta página explica mais sobre como você pode especificar cores no CSS.</p>
-
-<p>Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Cor" name="Informa.C3.A7.C3.A3o:_Cor">Informação: Cor</h2>
-
-<p>Neste tutorial até agora, você usou um limitado número de cores nomeadas. CSS 2 suporta ao todo 17 cores nomeadas. Alguns dos nomes podem não ser o que você espera:</p>
-
-<table style="border: 0px; margin-left: 2em; text-align: right;">
- <tbody>
-  <tr>
-   <td> </td>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: black;"> </td>
-   <td>gray</td>
-   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
-   <td>silver</td>
-   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
-  </tr>
-  <tr>
-   <td>primárias</td>
-   <td>red</td>
-   <td style="width: 2em; height: 2em; background-color: red;"> </td>
-   <td>lime</td>
-   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
-   <td>blue</td>
-   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
-  </tr>
-  <tr>
-   <td>secundárias</td>
-   <td>yellow</td>
-   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
-   <td>aqua</td>
-   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
-   <td>fuchsia</td>
-   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
-  </tr>
-  <tr>
-   <td> </td>
-   <td>maroon</td>
-   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
-   <td>orange</td>
-   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
-   <td>olive</td>
-   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
-   <td>purple</td>
-   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
-   <td>green</td>
-   <td style="width: 2em; height: 2em; background-color: green;"> </td>
-   <td>navy</td>
-   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
-   <td>teal</td>
-   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Seu navegador pode suportar muitas cores nomeadas, como:
-    <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;">
-     <tbody>
-      <tr>
-       <td>dodgerblue</td>
-       <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
-       <td>peachpuff</td>
-       <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
-       <td>tan</td>
-       <td style="width: 2em; height: 2em; background-color: tan;"> </td>
-       <td>firebrick</td>
-       <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
-       <td>aquamarine</td>
-       <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>Para detalhes sobre esta lista extendida, veja: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- Para uma paleta maior, específica de cores de componentes vermelho, verde ou azul você precisa usar um sinal numérico (#) e três digitos <em>hexadecimais</em> na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:</p>
-
-<table style="border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
-   <td><code>#000</code></td>
-  </tr>
-  <tr>
-   <td>pure red</td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#f00</code></td>
-  </tr>
-  <tr>
-   <td>pure green</td>
-   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
-   <td><code>#0f0</code></td>
-  </tr>
-  <tr>
-   <td>pure blue</td>
-   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
-   <td><code>#00f</code></td>
-  </tr>
-  <tr>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#fff</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- Para a paleta total, especifique dois digitos hexadecimais por cada componente:</p>
-
-<table style="border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
-   <td><code>#000000</code></td>
-  </tr>
-  <tr>
-   <td>pure red</td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#ff0000</code></td>
-  </tr>
-  <tr>
-   <td>pure green</td>
-   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
-   <td><code>#00ff00</code></td>
-  </tr>
-  <tr>
-   <td>pure blue</td>
-   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
-   <td><code>#0000ff</code></td>
-  </tr>
-  <tr>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#ffffff</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
- <caption>Exemplos</caption>
- <tbody>
-  <tr>
-   <td>Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos:
-    <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
-     <tbody>
-      <tr>
-       <td>Começe com vermelho puro:</td>
-       <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-       <td><code>#f00</code></td>
-      </tr>
-      <tr>
-       <td>Para tornar isto mais pálido, adicione um pouco de verde e azul:</td>
-       <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
-       <td><code>#f77</code></td>
-      </tr>
-      <tr>
-       <td>Para tornar isto mais alaranjado, adicione um pouquinho mais de verde:</td>
-       <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
-       <td><code>#fa7</code></td>
-      </tr>
-      <tr>
-       <td>Para tornar isto mais escuro, reduza todos os componentes:</td>
-       <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
-       <td><code>#c74</code></td>
-      </tr>
-      <tr>
-       <td>Para reduzir a saturação, faça os componentes mais parecidos:</td>
-       <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
-       <td><code>#c98</code></td>
-      </tr>
-      <tr>
-       <td>Se você quiser deixar todos os componentes iguais, você obterá cinza:</td>
-       <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
-       <td><code>#ccc</code></td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
-  <tr>
-   <td>Para uma sombra pastel como azul pálido:
-    <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
-     <tbody>
-      <tr>
-       <td>Começe com branco puro:</td>
-       <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-       <td><code>#fff</code></td>
-      </tr>
-      <tr>
-       <td>Reduza um pouco os outros componentes:</td>
-       <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
-       <td><code>#eef</code></td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens.
-    <p>Por exemplo, este marrom (vermelho escuro):</p>
-
-    <div style="width: 24em;">
-    <pre>
-rgb(128, 0, 0)
-</pre>
-    </div>
-
-    <p><br>
-     Para maiores detalhes sobre como especificar cores, veja: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> na CSS Specification.</p>
-
-    <p>Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> na CSS Specification.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Propriedades_de_cor" name="Propriedades_de_cor">Propriedades de cor</h3>
-
-<p>Você já usou a propriedade <code>color</code> para textos.</p>
-
-<p>Você também já usou a propriedade <code>background-color</code> para mudar elementos de fundo.</p>
-
-<p>Fundos podem ser configurados para <code>transparent</code> para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>As caixas de <strong>Exemplo</strong> neste tutorial usam este fundo amarelo pálido:
-    <div style="width: 24em;">
-    <pre>
-background-color: #fffff4;
-</pre>
-    </div>
-
-    <p>As caixas de <strong>Mais detalhes</strong> usam esta paleta cinza:</p>
-
-    <div style="width: 24em;">
-    <pre>
-background-color: #f4f4f4;
-</pre>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor" name="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor">Ação: Usando códigos de cor</h2>
-
-<p>Edite seu arquivo CSS. Faça a mudança mostrada aqui em negrito, para dar às letras iniciais um fundo azul pálido. (O layout e os comentários no seu arquivo irão provavelmente diferir do arquivo mostrado aqui. Mantenha o layout e os comentários como você preferir.)</p>
-
-<div style="width: 32em;">
-<pre class="eval">/*** CSS Tutorial: Página de Cor ***/
-
-/* Fonte da Página */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* Parágrafos */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* Letras Iniciais */
-strong {
-  color: red;
-  <strong>background-color: #ddf;</strong>
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
-</pre>
-</div>
-
-<p>Atualize seu navegador para ver o resultado:</p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
-  </tr>
-  <tr>
-   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;">
- <caption>Desafio</caption>
- <tbody>
-  <tr>
-   <td>No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado.
-    <p>(Isto não pode ser feito exatamente, mas você pode deixar parecido. Para fazer isso exatamente você precisa do código com seis dígitos, e você precisa olhar a Especificação CSS ou usar uma ferramenta gráfica para converter as cores.)</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Cor" title="Talk:pt/CSS/Como_começar/Cor">Discussão</a>.</p>
-
-<p>Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.</p>
-
-<p>A próxima página explica como você pode fazer exceções para separar rigorosamente: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p>
diff --git a/files/pt-pt/learn/css/css_layout/index.html b/files/pt-pt/learn/css/css_layout/index.html
deleted file mode 100644
index c6eb9caafa..0000000000
--- a/files/pt-pt/learn/css/css_layout/index.html
+++ /dev/null
@@ -1,454 +0,0 @@
----
-title: Disposição
-slug: Learn/CSS/CSS_layout
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/CSS_layout
-translation_of_original: Web/Guide/CSS/Getting_started/Layout
-original_slug: Web/CSS/Como_começar/Disposição
----
-<p>{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}</p>
-
-<p>Esta página descreve algumas maneiras para ajustar a disposição do seu documento.</p>
-
-<p>Você muda a disposição do seu documento de amostra...</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Disposi.C3.A7.C3.A3o" name="Informa.C3.A7.C3.A3o:_Disposi.C3.A7.C3.A3o">Informação: Disposição</h2>
-
-<p>Você pode usar as CSS para especificar vários efeitos visuais que mudam a disposição do seu documento. Algumas técnicas para especificação da disposição são avançadas,e além do alcance deste tutorial básico.</p>
-
-<p>Quando você desenha uma disposição que aparece similar em vários navegadores, sua folha de estilo interage com a folha de estilo padrão do navegador e o motor de disposição em alguns caminhos pode se tornar complexo. Isto é também uma matéria avançada, além do alcance deste tutorial básico.</p>
-
-<p>Esta página descreve algumas técnicas simples que você pode tentar.</p>
-
-<h4 id="Estrutura_do_documento" name="Estrutura_do_documento">Estrutura do documento</h4>
-
-<p>Se você quer controlar a disposição do seu documento, então você pode ter que mudar sua estrutura.</p>
-
-<p>A linguagem de marcação do seu documento pode ter tags com propósito geral para criar a estrutura. Por exemplo, no HTML você pode usar a tag <code>DIV</code> para criar a estrutura.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>No seu documento de amostra, os parágrafos numerados sob o segundo título não tem um "recipiente" próprio.
-    <p>Sua folha de estilo não pode desenhar uma borda ao redor destes parágrafos, porque não há elemento especificado no seletor.</p>
-
-    <p>Para fixar este problema estrutural, você pode adicionar uma tag <code>DIV</code> em torno dos parágrafos. Esta tag é única, então isto pode ser identificado por um atributo <code>id</code>:</p>
-
-    <div style="width: 40em; color: gray;">
-    <pre class="eval">
-&lt;H3 class="numbered"&gt;Parágrafos numerados&lt;/H3&gt;
-<strong style="color: black;">&lt;DIV id="numbered"&gt;</strong>
-&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;
-<strong style="color: black;">&lt;/DIV&gt;</strong>
-</pre>
-    </div>
-
-    <p>Agora sua folha de estilo pode use uma regra para especificar bordas em tordo de ambas as listas:</p>
-
-    <div style="width: 30em;">
-    <pre class="eval">
-ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-  }
-</pre>
-    </div>
-
-    <p>O resultado deve ser como este:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
-
-        <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
-        <ul style="">
-         <li>Ártico</li>
-         <li>Atlântico</li>
-         <li>Pacífico</li>
-         <li>Índico</li>
-         <li>Antártico</li>
-        </ul>
-        </div>
-
-        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
-
-        <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
-        <p><strong>1: </strong>Lorem ipsum</p>
-
-        <p><strong>2: </strong>Dolor sit</p>
-
-        <p><strong>3: </strong>Amet consectetuer</p>
-
-        <p><strong>4: </strong>Magna aliquam</p>
-
-        <p><strong>5: </strong>Autem veleum</p>
-        </div>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Tamanhos_das_unidades" name="Tamanhos_das_unidades">Tamanhos das unidades</h3>
-
-<p>Anteriormente neste tutorial, você especificou tamanhos em pixels (<code>px</code>). Estes são apropriados para alguns propósitos em um dispositivo de exposição como uma tela de computador. Mas quando o usuário muda o tamanho da fonte, sua disposição pode ficar errada.</p>
-
-<p>Para muitos propósitos é melhor especificar tamanhos com porcentagem ou em ems (<code>em</code>). Um em é nominalmente o tamanho da fonte corrente (a largura de uma letra m). Quando o usuário muda o tamanho da fonte, sua disposição ajusta-se automaticamente.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>A borda da esquerda deste texto tem o tamanho especificado em pixels.
-    <p>A borda da direita tem o tamanho especificado em ems. No seu navegador, mude o tamanho da fonte para ver como a borda da direita se ajusta mas a borda da esquerda não:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <div style="">Redimensione-me por favor</div>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Para outros dispositivos, outras unidades de comprimento são apropriadas.
-    <p>Há mais informação sobre isto em uma página anterior deste tutorial.</p>
-
-    <p>Para detalhes completos sobre os valores e unidades que você pode usar, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> em CSS Specification.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Disposi.C3.A7.C3.A3o_do_texto" name="Disposi.C3.A7.C3.A3o_do_texto">Disposição do texto</h3>
-
-<p>Duas propriedades especificam como o conteúdo de um elemento é alinhado. Você pode usá-las para ajustes simples na disposição:</p>
-
-<ul>
- <li><code>text-align</code></li>
-</ul>
-
-<dl>
- <dd>Alinha o conteúdo. Use um destes valores: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd>
-</dl>
-
-<ul>
- <li><code>text-indent</code></li>
-</ul>
-
-<dl>
- <dd>Indenta o conteúdo, colocando o espaço que você especificar.</dd>
-</dl>
-
-<p>Estas propriedades aplicam-se a qualquer conteúdo como texto no elemento, não somente ao texto atual. Lembre-se que elas são herdadas pelo elemento filho, então você pode ter que desativá-las nos elementos filhos para não se surpreender com os resultados.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Para centralizar títulos:
-    <div style="width: 30em;">
-    <pre class="eval">
-h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-  }
-</pre>
-    </div>
-
-    <p>Resulta em:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) Os oceanos</p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>Em um documento HTML, o conteúdo que você vê abaixo do título não é contido estruturalmente pelo título. Então quando você alinha um título como isto, as tags abaixo do título não são afetadas pela herança.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Flutuantes" name="Flutuantes">Flutuantes</h3>
-
-<p>A propriedade <code>float</code> força um elemento para a esquerda ou direita. Isto é uma maneira simples de controlar sua posição e tamanho.</p>
-
-<p>O resto do conteúdo do documento normalmente flui ao redor do elemento flutuado. Você pode controlar isto usando a propriedade <code>clear</code> em outros elementos para fazê-los permanecer sem flutuantes.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Em seu documento de amostra, as listas esticam através da janela. Você pode prevenir isto flutuando-os para a esquerda.
-    <p>Para manter os títulos no lugar, você precisa também especificar que eles permaneçam limpos de flutuantes à sua esquerda:</p>
-
-    <div style="width: 30em;">
-    <pre class="eval">
-ul, #numbered {float: left;}
-h3 {clear: left;}
-</pre>
-    </div>
-
-    <p>O resultado deve se parecer com isto:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
-
-        <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
-        <ul style="">
-         <li>Ártico</li>
-         <li>Atlântico</li>
-         <li>Pacífico</li>
-         <li>Índico</li>
-         <li>Antártico</li>
-        </ul>
-        </div>
-
-        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
-
-        <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
-        <p><strong>1: </strong>Lorem ipsum</p>
-
-        <p><strong>2: </strong>Dolor sit</p>
-
-        <p><strong>3: </strong>Amet consectetuer</p>
-
-        <p><strong>4: </strong>Magna aliquam</p>
-
-        <p><strong>5: </strong>Autem veleum</p>
-        </div>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>(Um pequeno enchimento é necessário à direita das caixas, onde a borda fica muito perto do texto.)</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Posicionamento" name="Posicionamento">Posicionamento</h3>
-
-<p>Você pode especificar a posição dos elementos de quatro maneiras, especificando a propriedade <code>position</code> e um dos valores seguintes:</p>
-
-<p>Estas são propriedades avançadas. É possível usá-las de maneiras simples — esta é a razão pela qual elas são mencionadas neste tutorial básico. Mas usando-as para disposições complexas pode-se dificultar.</p>
-
-<ul>
- <li><code>relative</code></li>
-</ul>
-
-<dl>
- <dd>A posição do elemento é alterada relativamente à sua posição normal.</dd>
- <dd>Use-o para mover um elemento por uma quantidade especificada. Às vezes você pode usar a margem do elemento para obter o mesmo efeito.</dd>
-</dl>
-
-<ul>
- <li><code>fixed</code></li>
-</ul>
-
-<dl>
- <dd>A posição do elemento é fixa.</dd>
- <dd>Especifique a posição do elemento relativa à janela do documento. Mesmo que o resto do documento seja rolado, o elemento permanece fixo.</dd>
-</dl>
-
-<ul>
- <li><code>absolute</code></li>
-</ul>
-
-<dl>
- <dd>A posição do documento é fixada relativamente a um elemento pai.</dd>
- <dd>Somente um elemento pai que esteja posicionado com <code>relative</code>, <code>fixed</code> ou <code>absolute</code> o fará.</dd>
-</dl>
-
-<dl>
- <dd>Você pode tornar qualquer elemento principal apropriado, especificando <code>position: relative;</code> sem especificar qualquer movimento.</dd>
-</dl>
-
-<ul>
- <li><code>static</code></li>
-</ul>
-
-<dl>
- <dd>O padrão. Use este valor caso precise desativar a posição explicitamente.</dd>
-</dl>
-
-<p>Agora, com estes valores da propriedade <code>position</code> (exeto para <code>static</code>), especifique uma ou mais propriedades: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> para identificar onde você quer que o elemento apareça, e talvez também seu tamanho.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Para posicionar dois elementos no topo, crie um "recipiente" principal em seu documento com os dois elementos dentre dele:
-    <div style="width: 30em;">
-    <pre class="eval">
-&lt;DIV id="parent-div"&gt;
-&lt;P id="forward"&gt;/&lt;/P&gt;
-&lt;P id="back"&gt;\&lt;/P&gt;
-&lt;/DIV&gt;
-</pre>
-    </div>
-
-    <p>Na sua folha de estilo, faça a posição principal <code>relative</code>. Ela não precisa que seja especificado qualquer movimento atual. Faça a posição subordinada <code>absolute</code>:</p>
-
-    <div style="width: 30em;">
-    <pre>
-#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-  }
-
-#forward, #back {
-  position: absolute;
-  margin:0px;
-  top: 0px;
-  left: 0px;
-  }
-
-#forward {
-  color: blue;
-  }
-
-#back {
-  color: red;
-  }
-</pre>
-    </div>
-
-    <p>O resultado deve ser como isto, com a contra barra (\) sobre a barra (/):</p>
-
-    <div style="position: relative; left: .33em; font: bold 300% sans-serif;">
-    <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>
-
-    <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
-    </div>
-
-    <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;">
-     <tbody>
-      <tr>
-       <td> </td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p> </p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>A história completa sobre posicionamento toma dois complexos capítulos em CSS Specification: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> e <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.
-    <p>Se você está desenhando folhas de estilo para trabalharem em vários navegadores, então você também precisa levar em conta as diferenças na maneira em que os navegadores interpretam o padrão, e talvez bugs em algumas versões de alguns navegadores.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Especificando_a_disposi.C3.A7.C3.A3o" name="A.C3.A7.C3.A3o:_Especificando_a_disposi.C3.A7.C3.A3o">Ação: Especificando a disposição</h2>
-
-<p>Mude seu documento de amostra e sua folha de estilo usando os exemplos anteriores nas seções <strong>Estrutura do documento</strong> e <strong>Flutuantes</strong>.</p>
-
-<p>No exemplo dos <strong>Flutuantes</strong>, adicione enchimento para separar o texto da borda direita por 0,5 em.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Desafio</caption>
- <tbody>
-  <tr>
-   <td>Mude seu documento de amostra, adicionando esta tag perto do fim, somente antes de <code>&lt;/BODY&gt;</code>
-    <pre>
-&lt;IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
-</pre>
-
-    <p>Se você não baixou o arquivo de imagem anteriormente neste tutorial, baixe-o agora:</p>
-
-    <table style="border: 2px solid #ccc;">
-     <tbody>
-      <tr>
-       <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>Prediga onde a imagem irá aparecer no seu documento. Então atualize seu navegador para ver se você estava certo.</p>
-
-    <p>Adicione uma regra à sua folha de estilo que fixe a imagem no topo e a direita do seu documento.</p>
-
-    <p>Atualize seu navegador e diminua o tamanho da janela. Cheque se a imagem permanece no topo e a direita mesmo que você role seu documento:</p>
-
-    <div style="position: relative; width: 29.5em; height: 18em;">
-    <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
-
-    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
-    <ul style="">
-     <li>Ártico</li>
-     <li>Atlântico</li>
-     <li>Pacífico</li>
-     <li>Índico</li>
-     <li>Antártico</li>
-    </ul>
-    </div>
-
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
-
-    <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
-    <p><strong>1: </strong>Lorem ipsum</p>
-
-    <p><strong>2: </strong>Dolor sit</p>
-
-    <p><strong>3: </strong>Amet consectetuer</p>
-
-    <p><strong>4: </strong>Magna aliquam</p>
-
-    <p><strong>5: </strong>Autem veleum</p>
-    </div>
-
-    <p style=""> </p>
-
-    <div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></div>
-    </div>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="Talk:pt/CSS/Como_começar/Disposição">Discussão</a>.</p>
-
-<p>A próxima página descreve seletores para regras mais avançadas das CSS, e algumas maneiras específicas de estilizar tabelas: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Tabelas" title="pt/CSS/Como_começar/Tabelas">Tabelas</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}</p>
diff --git a/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html b/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html
deleted file mode 100644
index 46e7d2db08..0000000000
--- a/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: CSS legível
-slug: Learn/CSS/First_steps/How_CSS_is_structured
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
-translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
-original_slug: Web/CSS/Como_começar/CSS_legível
----
-<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p>
-
-<p>Esta página discute o estilo e a gramática da linguagem CSS.</p>
-
-<p>Você muda a maneira em que seu arquivo de amostra CSS é exibido, para torná-lo mais legível.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel" name="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel">Informação: CSS legível</h2>
-
-<p>Você pode adicionar espaço em branco e comentários na sua folha de estilo para fazê-la mais legível. Você pode também juntar seletores de grupo, quando as mesmas regras de estilo se aplicam aos elementos selecionados em meios diferentes.</p>
-
-<h3 id="Espa.C3.A7o_em_branco" name="Espa.C3.A7o_em_branco">Espaço em branco</h3>
-
-<p>Espaços em branco significam espaços reais, tabs e quebras de linha. Você pode adicionar espaços em branco para tornar suas folhas de estilo mais legíveis.</p>
-
-<p>Seu arquivo de amostra de CSS atualmente tem uma regra por linha, e quase o mínimo de espaço em branco. Em uma uma folha de estilo complexa esta disposição pode dificultar a leitura, dificultando também a manutenção da sua folha de estilo.</p>
-
-<p>A disposição que você escolhe é usualmente um preferência pessoal, mas se suas folhas de estilo são parte de projetos compartilhados, estes projetos podem ter suas próprias convenções.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplos</caption>
- <tbody>
-  <tr>
-   <td>Algumas pessoas gostam de uma diposição compacta que temos usado, somente dividindo a linha quando ela se torna muito longa:
-    <pre>
-.carrot {color: orange; text-decoration: underline; font-style: italic;}
-</pre>
-
-    <p>Algumas pessoas preferem uma propriedade-valor por linha:</p>
-
-    <div style="width: 45em;">
-    <pre class="eval">
-.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-</pre>
-    </div>
-
-    <p>Algumas pessoas usam tabs – dois espaços, quatro espaços, ou um tab são comuns:</p>
-
-    <div style="width: 45em;">
-    <pre class="eval">
-.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-</pre>
-    </div>
-
-    <p>Algumas pessoas gostam de enfileirar a linha verticalmente (mas é difícil de manter uma disposição assim):</p>
-
-    <div style="width: 45em;">
-    <pre class="eval">
-.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-</pre>
-    </div>
-
-    <p>Algumas pessoas usam tabs para a disposição. Algumas pessoas usam somente espaços.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Coment.C3.A1rios" name="Coment.C3.A1rios">Comentários</h3>
-
-<p>Comentários em CSS começam com <code>/*</code> e terminam com <code>*/</code>.</p>
-
-<p>Você pode usar comentários para fazer comentários reais na sua folha de estilo, e também para <em>descomentar</em> partes que estiverem temporariamente para propósito de testes.</p>
-
-<p>Para comentar parte da folha de estilo, coloque a parte em um comentário então o navegador ignorará isso. Tome cuidado onde você começa e termina o seu comentário. O resto da sua folha de estilo ainda deve ter a sintaxe correta.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>
-    <div style="width: 45em;">
-    <pre class="eval">
-/* Estilo para a letra C inicial no primeiro parágrafo */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-</pre>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Seletores_agrupados" name="Seletores_agrupados">Seletores agrupados</h3>
-
-<p>Quando muitos elementos tiverem o mesmo estilo, você pode especificar um grupo de seletores, separando-os com comentários. A declaração se aplica a todos os elementos selecionados.</p>
-
-<p>Em outra parte da sua folha de estilo você pode especificar os mesmos seletores, de novo individualmente, para aplicar estilo individual às suas regras.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Esta regra faz os elementos <small>H1</small>, <small>H2</small> and <small>H3</small> da mesma cor.
-    <p>Isto é conveniente para especificar a cor em somente um lugar, no caso em que precisa ser alterado.</p>
-
-    <div style="width: 30em;">
-    <pre class="eval">
-/* cores para os cabeçalhos */
-h1, h2, h3 {color: navy;}
-</pre>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo" name="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo">Ação: Adicionando comentários e melhorando o arranjo</h2>
-
-<p>Edite seu arquivo CSS, e assegure-se que ele tem todas as regras nele (em qualquer ordem):</p>
-
-<div style="width: 30em;">
-<pre class="eval">strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-</pre>
-</div>
-
-<p>Faça isto mais legível rearranjando isto em um meio que possa ser achado lógicamente, adicionando espaços em branco e comentários da maneira que você achar melhor.</p>
-
-<p>Salve o arquivo e atualize a tela do seu navegador, assegure-se que as mudanças que você fez não afetaram o modo como a folha de estilo trabalha:</p>
-
-<table style="border: 2px outset #36b; padding: 1em;">
- <tbody>
-  <tr>
-   <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-  </tr>
-  <tr>
-   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
- <caption>Desafio</caption>
- <tbody>
-  <tr>
-   <td>Comente parte de sua folha de estilo, sem mudar qualquer coisa, para fazer a primeira letra de seu documento vermelha:
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-      </tr>
-      <tr>
-       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>(Existe mais de uma maneira de fazer isto.)</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/CSS_leg%C3%ADvel" title="Talk:pt/CSS/Como_começar/CSS_legível">Discussão</a>.</p>
-
-<p>Seu documento de amostra usou o texto em itálico e o texto com sublinhado. A próxima página descreve mais caminhos para especificar a aparência do texto no seu documento: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Estilos_de_texto" title="pt/CSS/Como_começar/Estilos_de_texto">Estilos de texto</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p>
diff --git a/files/pt-pt/learn/css/first_steps/how_css_works/index.html b/files/pt-pt/learn/css/first_steps/how_css_works/index.html
deleted file mode 100644
index f73b96a63a..0000000000
--- a/files/pt-pt/learn/css/first_steps/how_css_works/index.html
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: Como o CSS trabalha
-slug: Learn/CSS/First_steps/How_CSS_works
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
-original_slug: Web/CSS/Como_começar/Como_o_CSS_trabalha
----
-<p>{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}</p>
-
-<p>Esta página explica como o CSS trabalha no seu navegador. Você analiza seu documento de amostra, reavaliando os detalhes do seu estilo.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Como_o_CSS_trabalha" name="Informa.C3.A7.C3.A3o:_Como_o_CSS_trabalha">Informação: Como o CSS trabalha</h2>
-
-<p>Quando o Mozilla exibe um documento, é necessário combinar o conteúdo do documento com seu estilo de informação. Então o documento é processado em dois estágios:</p>
-
-<ul>
- <li>No primeiro estágio, o Mozilla converte a linguagem de marcação e o CSS em <em>DOM</em> (Document Object Model - Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Isto combina o conteúdo do documento com seu estilo.</li>
-</ul>
-
-<ul>
- <li>No segundo estágio, o Mozilla exibe o DOM.</li>
-</ul>
-
-<p>Uma linguagem de marcação usa tags para definir a estrutura do documento. Uma tag pode armazenar outras tags entre seu início e fim.</p>
-
-<p>Um DOM tem a estrutura como a de uma árvore. Cada tag e período do texto na linguagem de marcação torna-se um <em>nó</em> na estrutura da árvore. Os nós do DOM não são armazenadores. Em substituição, eles são primários aos nós subordinados.</p>
-
-<p>Os nós que correspondem a tags também são conhecidos por <em>elementos</em>.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>No seu documento de amostra, a tag <code>&lt;p&gt;</code> e seu fim <code>&lt;/p&gt;</code> criam um armazenamento:
-    <div style="width: 24em;">
-    <pre class="eval">
-&lt;p&gt;
-  &lt;strong&gt;C&lt;/strong&gt;ascading
-  &lt;strong&gt;S&lt;/strong&gt;tyle
-  &lt;strong&gt;S&lt;/strong&gt;heets
-&lt;/p&gt;
-</pre>
-    </div>
-
-    <p>No DOM, o corespondente ao nó P é um primário. Os subordinados são os nós <small>STRONG</small> e os nós do texto. Os nós <small>STRONG</small> são os primários, e os nós do texto são os subordinados.</p>
-
-    <div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;">
-    <p><span style="color: black;">P</span> ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">C</span>"<br>
-     │<br>
-     ├─"<span style="color: black;">ascading</span>"<br>
-     │<br>
-     ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>"<br>
-     │<br>
-     ├─"<span style="color: black;">tyle</span>"<br>
-     │<br>
-     ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>"<br>
-     │<br>
-     └─"<span style="color: black;">heets</span>"</p>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>O entendimento do DOM ajuda-o a projetar, depurar e manter seu CSS, pois o DOM é onde o seu CSS e o conteúdo do documento se unem.</p>
-
-<h2 id="A.C3.A7.C3.A3o:_Analizando_um_DOM" name="A.C3.A7.C3.A3o:_Analizando_um_DOM">Ação: Analizando um DOM</h2>
-
-<p>Para analizar um DOM, você precisa de um software especial. Aqui, você usa o <a href="/pt/DOM_Inspector" title="pt/DOM_Inspector">DOM Inspector</a> (DOMi) da Mozilla para analizar um DOM.</p>
-
-<p>Use seu navegador Mozilla para abrir seu documento simples.</p>
-
-<p>Na barra de menu do seu navegador, escolha Ferramentas – DOM Inspector, ou talvez Ferramentas – Desenvolvimento Web – DOM Inspector.</p>
-
-<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Se seu navegador Mozilla não tem o DOMi, você pode reinstalá-lo assegurando-se de escolher para instalar o componente de ferramentas da web. Então retorne a este tutorial.
-    <p>Se você não quiser instalar o DOMi, você pode pular esta seção e ir diretamente para a próxima página. Pulando esta seção você não interfere com o resto deste tutorial.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- No DOMi, expanda os nós do seu documento clicando em suas flechas.</p>
-
-<p><strong>Nota:</strong> O espaçamento em seu arquivo HTML faz com que o DOMi mostre alguns nós de texto vazios, que você pode ignorar.</p>
-
-<p>O resultado deve ser parecido com isto, dependendo do que você tenha expandido:</p>
-
-<table style="border: 2px outset #36b; padding: 0 0 0 2em;">
- <tbody>
-  <tr>
-   <td>
-    <div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;">
-    <p>│<br>
-     <span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span> │ │ │ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span> │ │ └<span style="color: darkblue;">#text</span> │ ├╴<span style="color: darkblue;">#text</span> │ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span> │ │</p>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Quando você seleciona algum nó, você pode usar o painel direito do DOMi para achar mais sobre ele. Por exemplo, quando você seleciona um nó do texto, DOMi mostra para você o texto no painel da direita.</p>
-
-<p>Quando você seleciona um elemento nó, DOMi o analiza e fornece uma enorme quantidade de informações no seu painel direito. A informação sobre estilo é somente uma parte das informações que ele fornece.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
- <caption>Desafio</caption>
- <tbody>
-  <tr>
-   <td>No DOMi, clique no nó <small>STRONG</small>.
-    <p>Use o painel direito do DOMi para achar onde fica a cor do nó (vermelho) e onde sua aparência é mais forte que o texto normal (negrito).</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Como_o_CSS_trabalha" title="Talk:pt/CSS/Como_começar/Como_o_CSS_trabalha">Discussão</a>.</p>
-
-<p>Se você tomou o desafio, você viu o estilo da informação em mais de um lugar interagir para criar o estilo final para um elemento.</p>
-
-<p>A próxima página explica mais sobre estas interações: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Cascata_e_heran%C3%A7a" title="pt/CSS/Como_começar/Cascata_e_herança">Cascata e herança</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}</p>
diff --git a/files/pt-pt/learn/css/first_steps/index.html b/files/pt-pt/learn/css/first_steps/index.html
deleted file mode 100644
index bb21186eda..0000000000
--- a/files/pt-pt/learn/css/first_steps/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Como começar
-slug: Learn/CSS/First_steps
-tags:
-  - CSS
-  - CSS:Como_começar
-  - Todas_as_Categorias
-translation_of: Learn/CSS/First_steps
-translation_of_original: Web/Guide/CSS/Getting_started
-original_slug: Web/CSS/Como_começar
----
-<p> </p>
-
-<h3 id="Introdu.C3.A7.C3.A3o" name="Introdu.C3.A7.C3.A3o">Introdução</h3>
-
-<p>Este tutorial o introduz às CSS (Cascading Style Sheets - Folhas de Estilo em Cascata).</p>
-
-<p>Este tutorial o orienta nos recursos básicos de CSS com exemplos práticos que você pode experimentar sozinho em seu computador. Ele é dividido em duas partes:</p>
-
-<ul>
- <li>A Parte I ilustra os recursos básicos das CSS que funcionam nos navegadores Mozilla e também na maioria dos navegadores modernos.</li>
-</ul>
-
-<ul>
- <li>A Parte II contém alguns exemplos de recursos especiais que funcionam no Mozilla, mas não necessariamente em outros ambientes.</li>
-</ul>
-
-<p>Este tutorial é baseado na <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specification</a>.</p>
-
-<h4 id="Quem_deve_ler_este_tutorial.3F" name="Quem_deve_ler_este_tutorial.3F">Quem deve ler este tutorial?</h4>
-
-<p>Este tutorial é direcionado para iniciantes em CSS, mas você também poderá usá-lo caso tenha alguma experiência em CSS.</p>
-
-<p>Se você é um iniciante em CSS, leia a Parte I deste tutorial para entender CSS e aprender a usá-lo. Em seguida, leia a Parte II para entender o escopo de CSS no Mozilla.</p>
-
-<p>Se você conhece CSS, poderá ignorar as partes desse tutorial que já conhece e ler apenas as partes que lhe interessam.</p>
-
-<p>Se você já tem experiência em CSS mas não no Mozilla, pode ir direto para a Parte II.</p>
-
-<h4 id="O_que_voc.C3.AA_precisa_antes_de_come.C3.A7ar.3F" name="O_que_voc.C3.AA_precisa_antes_de_come.C3.A7ar.3F">O que você precisa antes de começar?</h4>
-
-<p>Para melhor aproveitar este tutorial, você precisa de um editor de arquivos de texto e um navegador Mozilla (Firefox, Mozilla Suite ou Seamonkey). Você também deve saber como utilizá-los de um modo básico.</p>
-
-<p>Se não deseja editar arquivos, você pode apenas ler o tutorial e observar as imagens, mas este não é o melhor modo de aprendizado.</p>
-
-<p>Poucas partes deste tutorial podem requerer outro software Mozilla. Essas partes são opcionais. Você pode ignorar essas partes se não desejar fazer o download de outro software Mozilla.</p>
-
-<p><strong>Nota:</strong> As CSS oferece modos de se trabalhar com cores, de modo que partes deste tutorial dependem de cores. Você poderá utilizar essas partes facilmente somente se tiver um monitor colorido e uma visão colorida normal.</p>
-
-<h4 id="Como_utilizar_este_tutorial" name="Como_utilizar_este_tutorial">Como utilizar este tutorial</h4>
-
-<p>Para utilizar este tutorial, leia cuidadosamente as páginas e em seqüência. Se perder uma página, você poderá ter dificuldades para entender as páginas posteriores.</p>
-
-<p>Em cada página, utilize a seção<em>Informações</em> para entender como o CSS funciona. Utilize a seção<em>Ações</em> para tentar usar o CSS em seu próprio computador.</p>
-
-<p>Para testar seus conhecimentos, faça o teste ao final de cada página. As soluções para alguns testes são reveladas nas páginas posteriores no tutorial.</p>
-
-<p>Para se aprofundar em CSS, leia as informações nas caixas entituladas<em>Mais detalhes</em>. Utilize os links para localizar informações referentes às CSS.</p>
-
-<h3 id="Tutorial_Parte_I" name="Tutorial_Parte_I">Tutorial Parte I</h3>
-
-<p>Um guia passo-a-passo para CSS.</p>
-
-<ol>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/O_que_%c3%a9_CSS">O que é CSS</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Porque_usar_CSS">Porque usar CSS</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Como_o_CSS_trabalha">Como o CSS trabalha</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Cascata_e_heran%c3%a7a">Cascata e herança</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Seletores">Seletores</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/CSS_leg%c3%advel">CSS legível</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Estilos_de_texto">Estilos de texto</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Cor">Cor</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Conte%c3%bado">Conteúdo</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Listas">Listas</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Caixas">Caixas</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Disposi%c3%a7%c3%a3o">Disposição</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Tabelas">Tabelas</a></strong></li>
- <li><strong><a href="/pt-PT/docs/Web/CSS/Como_começar/Mídia">Média</a></strong></li>
-</ol>
-
-<h3 id="Tutorial_Parte_II" name="Tutorial_Parte_II">Tutorial Parte II</h3>
-
-<p>Exemplos que mostram o escopo da CSS no Mozilla.</p>
-
-<ol>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/JavaScript">JavaScript</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/XBL_bindings">XBL bindings</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Interfaces_de_usu%c3%a1rio_XUL">Interfaces de usuário XUL</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Gr%c3%a1ficos_SVG">Gráficos SVG</a></strong></li>
- <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Dados_XML">Dados XML</a></strong></li>
-</ol>
-
-<p>{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/pt-pt/learn/css/howto/css_faq/index.html b/files/pt-pt/learn/css/howto/css_faq/index.html
deleted file mode 100644
index e0e558f33b..0000000000
--- a/files/pt-pt/learn/css/howto/css_faq/index.html
+++ /dev/null
@@ -1,230 +0,0 @@
----
-title: Perguntas Frequentes sobre CSS
-slug: Learn/CSS/Howto/CSS_FAQ
-tags:
-  - CSS
-  - Exemplo
-  - FAQ
-  - Guía
-  - Web
-  - questões
-translation_of: Learn/CSS/Howto/CSS_FAQ
-original_slug: Learn/CSS/Howto/FAQ_de_CSS
----
-<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly">Why doesn't my CSS, which is valid, render correctly?</h2>
-
-<p>Browsers use the <code>DOCTYPE</code> declaration to choose whether to show the document using a mode that is more compatible  with Web standards or with old browser bugs. Using a correct and modern <code>DOCTYPE</code> declaration at the start of your HTML will improve browser standards compliance.</p>
-
-<p>Modern browsers have two main rendering modes:</p>
-
-<ul>
- <li><em>Quirks Mode</em>: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers. Documents with an incomplete, incorrect, or missing <code>DOCTYPE</code> declaration or a known <code>DOCTYPE</code> declaration in common use before 2001 will be rendered in Quirks Mode.</li>
- <li><em>Standards Mode</em>: the browser attempts to follow the W3C standards strictly. New HTML pages are expected to be designed for standards-compliant browsers, and as a result, pages with a modern <code>DOCTYPE</code> declaration will be rendered with Standards Mode.</li>
-</ul>
-
-<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p>
-
-<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p>
-
-<pre>&lt;!DOCTYPE html&gt; /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
-                   parser, this is the recommended doctype */
-
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd"&gt;
-
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd"&gt;
-
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
-</pre>
-
-<p>When at all possible, you should just use the HTML5 doctype.</p>
-
-<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">Why doesn't my CSS, which is valid, render at all?</h2>
-
-<p>Here are some possible causes:</p>
-
-<ul>
- <li>You've got the path to CSS file wrong.</li>
- <li>To be applied, a CSS stylesheet must be served with a <code>text/css</code> MIME type. If the Web server doesn't serve it with this type, it won't be applied.</li>
-</ul>
-
-<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">What is the difference between <code>id</code> and <code>class</code>?</h2>
-
-<p>HTML elements can have an <code>id</code> and/or <code>class</code> attribute. The <code>id</code> attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The <code>class</code> attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular <code>id</code> and/or <code>class</code> names.</p>
-
-<ul>
- <li>Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page, or when you currently only have element to style with that style, but you might want to add more later.</li>
- <li>Use an id-specific style when you need to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.</li>
-</ul>
-
-<p>It is generally recommended to use classes as much as possible, and to use ids only when absolutely necessary for specific uses (like to connect label and form elements or for styling elements that must be semantically unique):</p>
-
-<ul>
- <li>Using classes makes your styling extensible — even if you only have one element to style with a particular ruleset now, you might want to add more later.</li>
- <li>Classes allow you to style multiple elements, therefore they can lead to shorter stylesheets, rather than having to write out the same styling information in multiple rules that use id selectors. Shorter stylesheets are more performant.</li>
- <li>Class selectors have lower <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">specificity</a> than id selectors, so are easier to override if needed.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note</strong>: See <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> for more information.</p>
-</div>
-
-<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">How do I restore the default value of a property?</h2>
-
-<p>Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property. For example:</p>
-
-<pre class="brush: css">/* Heading default color is black */
-h1 { color: red; }
-h1 { color: black; }</pre>
-
-<p>This has changed with CSS 2; the keyword <a href="/es/CSS/initial" title="initial">initial</a> is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.</p>
-
-<pre class="brush: css">/* Heading default color is black */
-h1 { color: red; }
-h1 { color: initial; }</pre>
-
-<h2 id="Derived_styles" name="Derived_styles">How do I derive one style from another?</h2>
-
-<p>CSS does not exactly allow one style to be defined in terms of another. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). However, assigning multiple classes to a single element can provide the same effect, and <a href="/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a> now provide a way to define style information in one place that can be reused in multiple places.</p>
-
-<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">How do I assign multiple classes to an element?</h2>
-
-<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p>
-
-<pre>&lt;style type="text/css"&gt;
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-&lt;/style&gt;
-
-&lt;div class="news today"&gt;
-... content of today's news ...
-&lt;/div&gt;
-</pre>
-
-<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p>
-
-<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">Why don't my style rules work properly?</h2>
-
-<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p>
-
-<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML elements hierarchy</h3>
-
-<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p>
-
-<pre>.news { color: black; }
-.corpName { font-weight: bold; color: red; }
-
-&lt;!-- news item text is black, but corporate name is red and in bold --&gt;
-&lt;div class="news"&gt;
-   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
-&lt;/div&gt;
-</pre>
-
-<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p>
-
-<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">Explicitly re-defined style rule</h3>
-
-<p>In CSS stylesheets, order <strong>is</strong> important. If you define a rule and then you re-define the same rule, the last definition is used.</p>
-
-<pre>#stockTicker { font-weight: bold; }
-.stockSymbol { color: red; }
-/*  other rules             */
-/*  other rules             */
-/*  other rules             */
-.stockSymbol { font-weight: normal; }
-
-&lt;!-- most text is in bold, except "GE", which is red and not bold --&gt;
-&lt;div id="stockTicker"&gt;
-   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
-&lt;/div&gt;
-</pre>
-
-<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.</p>
-
-<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">Use of a shorthand property</h3>
-
-<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to their default values. This means that a previous rule for a single attribute could be implicitly overridden.</p>
-
-<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
-.stockSymbol { font: 14px Arial; color: red; }
-
-&lt;div id="stockTicker"&gt;
-   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
-&lt;/div&gt;
-</pre>
-
-<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p>
-
-<pre>#stockTicker {
-   font-weight: bold;
-   font: 12px Verdana;  /* font-weight is now set to normal */
-}
-</pre>
-
-<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">Use of the <code>*</code> selector</h3>
-
-<p>The <code>*</code> wildcard selector refers to any element, and it has to be used with particular care.</p>
-
-<pre>body * { font-weight: normal; }
-#stockTicker { font: 12px Verdana; }
-.corpName { font-weight: bold; }
-.stockUp { color: red; }
-
-&lt;div id="section"&gt;
-   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
-&lt;/div&gt;
-</pre>
-
-<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the <code>.stockUp</code> class. So <code>font-weight: bold;</code> applied to the <code>.corpName</code> class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p>
-
-<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p>
-
-<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">Specificity in CSS</h3>
-
-<p>When multiple rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors. The text color of the below {{htmlelement("div")}} will therefore be red.</p>
-
-<pre>div { color: black; }
-#orange { color: orange; }
-.green { color: green; }
-
-&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
-</pre>
-
-<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p>
-
-<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?</h2>
-
-<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They allow use of experimental and non-standard features in browsers without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p>
-
-<p>The use of such properties on production websites is not recommended — they have already created a huge web compatibility mess. For example, many developers only using the <code>-webkit-</code> prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature relying on that property would break in non-webkit-based browsers, completely needlessly. This problem got so bad that other browsers started to implement <code>-webkit-</code> prefixed aliases to improve web compatibility, as specified in the <a href="https://compat.spec.whatwg.org/">Compatibility Living Standard</a>.</p>
-
-<p>In fact most browsers now do not use CSS prefixes when implementing experimental features, insteading implementing those features only on Nightly browser versions or similar.</p>
-
-<p>If you need to use prefixes in your work, you are advised to write your code in a way that uses the prefixed versions first, but then includes a non-prefixed standard version afterwards so it can automatically override the prefixed versions where supported. For example:</p>
-
-<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="property token">-ms-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="property token">transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
-
-<div class="note">
-<p><strong>Note</strong>: For more information on dealing with prefixed properties, see <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">Handling common HTML and CSS problems — Handling CSS prefixes</a> from our <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> module.</p>
-</div>
-
-<div class="note">
-<p><strong>Note</strong>: See the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p>
-</div>
-
-<h2 id="How_does_z-index_relate_to_positioning">How does z-index relate to positioning?</h2>
-
-<p>The z-index property specifies the stack order of elements.</p>
-
-<p>An element with a higher z-index/stack order is always rendered in front of an element with a lower z-index/stack order on the screen. Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p>
-
-<div class="note">
-<p><strong>Nota</strong>: For more information, see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a> learning article, and in particular the <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning#Introducing_z-index">Introducing z-index</a> section.</p>
-</div>
diff --git a/files/pt-pt/learn/css/howto/generated_content/index.html b/files/pt-pt/learn/css/howto/generated_content/index.html
deleted file mode 100644
index c9b979f870..0000000000
--- a/files/pt-pt/learn/css/howto/generated_content/index.html
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: Conteúdo
-slug: Learn/CSS/Howto/Generated_content
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/Howto/Generated_content
-original_slug: Web/CSS/Como_começar/Conteúdo
----
-<p>{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}</p>
-
-<p>Esta página descreve algumas maneiras que você pode usar no CSS para adicionar conteúdo quando um documento é exibido.</p>
-
-<p>Você modifica sua folha de estilo para adicionar conteúdo de texto e uma imagem.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Conte.C3.BAdo" name="Informa.C3.A7.C3.A3o:_Conte.C3.BAdo">Informação: Conteúdo</h2>
-
-<p>Uma das vantagens importantes das CSS é que ele o ajuda a separar o estilo do documento do seu conteúdo. Mas há situações onde faz sentido especificar certo conteúdo como parte de sua folha de estilo, não como parte do seu documento.</p>
-
-<p>O conteúdo especificado em uma folha de estilo pode consistir em texto ou imagens. Você especifica o conteúdo em sua folha de estilo quando o conteúdo tem uma ligação próxima à estrutura do documento.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Especificar o conteúdo em uma folha de estilo pode causar complicações. Por exemplo, você pode ter versões diferentes da língua do seu documento que compartilham uma folha de estilo. Se parte da folha de estilo tem que ser traduzida, isto mostra que você precisa por estas partes da folha de estilo em arquivos separados e arrumá-los para então ligá-los com a versão apropriada da língua do seu documento.
-    <p>Estas complicações não surgem se o conteúdo que você especificou consistir em símbolos ou imagens que se aplicam em todas as línguas e culturas.</p>
-
-    <p><br>
-     O conteúdo especificado em uma folha de estilo não se tornará parte do DOM.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Conte.C3.BAdo_do_texto" name="Conte.C3.BAdo_do_texto">Conteúdo do texto</h3>
-
-<p>CSS pode inserir um texto antes ou depois de um elemento. Para especificar isto, faça uma regra e adicione <code>:before</code> ou <code>:after</code> ao seletor. Na declaração, especifique a propriedade <code>content</code> com o conteúdo do texto como seu valor.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Esta regra adiciona o texto <span style="font-weight: bold; color: navy;">Referência:</span> antes de todo elemento com a classe <code>ref</code>:
-    <div style="width: 30em;">
-    <pre class="eval">
-.ref:before {
-  font-weight: bold;
-  color: navy;
-  content: "Referência: ";
-  }
-</pre>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>O caractere de configuração de uma folha de estilo é por padrão o UTF-8, mas isto pode ser especificado na ligação, na própria folha de estilo ou por outras maneiras. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> na CSS Specification.
-    <p>Caracteres individuais podem às vezes ser especificados por um mecanismo de escape que use o contra barra (\) com o caráter de escape. Por exemplo, \265B é um símbolo do xadrez para a rainha preta ♛. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> e também <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> em CSS Specification.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Conte.C3.BAdo_da_imagem" name="Conte.C3.BAdo_da_imagem">Conteúdo da imagem</h3>
-
-<p>Para adicionar uma imagem antes ou depois de um elemento, você pode especificar a URL de um arquivo de imagem no valor da propriedade <code>content</code>.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Esta regra adiciona um espaço e um ícone depois de cada ligação da classe <code>glossary</code>:
-    <div style="width: 45em;">
-    <pre class="eval">
-a.glossary:after {content: " " url("../images/glossary-icon.gif");}
-</pre>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- Para adicionar uma imagem ao fundo de um elemento, especifique a URL de um arquivo de imagem no valor da propriedade <code>background</code>. Isto é uma propriedade que especifica a cor do fundo, a imagem, como a imagem repete, e alguns outros detalhes.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Esta regra configura o fundo de um elemento específico, usando uma URL para especificar um arquivo de imagem.
-    <p>O seletor especifica o id do elemento. O valor <code>no-repeat</code> faz a imagem aparecer apenas uma vez:</p>
-
-    <div style="width: 50em;">
-    <pre class="eval">
-#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
-</pre>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Para informações sobre propriedades individuais que afetam o fundo, e sobre outras opções que você pode especificar para as imagens de fundo, veja <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">The background</a> na CSS Specification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Adicionando_uma_imagem_de_fundo" name="A.C3.A7.C3.A3o:_Adicionando_uma_imagem_de_fundo">Ação: Adicionando uma imagem de fundo</h2>
-
-<p>Esta imagem é um quadrado branco com uma linha azul em baixo. Baixe o arquivo desta imagem no mesmo diretório do seu arquivo CSS:</p>
-
-<table style="border: 2px solid #ccc;">
- <tbody>
-  <tr>
-   <td><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2528/=Blue-rule.png"></td>
-  </tr>
- </tbody>
-</table>
-
-<p>(Por exemplo, clique com o botão direito sobre isto para abrir o menu de contexto, então escolha Salvar Imagem Como... e especifique o diretório que você está usando para este tutorial.)</p>
-
-<p>Edite o seu arquivo CSS e adicione esta regra ao corpo, configurando a imagem de fundo para a página inteira.</p>
-
-<div style="width: 40em;">
-<pre class="eval">background: url("Blue-rule.png");
-</pre>
-</div>
-
-<p>O valor <code>repeat</code> é o padrão, então isto não precisa ser especificado. A imagem é repetida horizontal e verticalmente, dando a aparência parecida com a de um papel de escrita com linhas:</p>
-
-<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
-<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/2527/=Blue-rule-ground.png"></p>
-
-<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
-<div style="font-style: italic; width: 24em;">
-<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
-</div>
-
-<div style="font-style: normal; padding-top: 2px; height: 8em;">
-<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
-</div>
-</div>
-</div>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Desafio</caption>
- <tbody>
-  <tr>
-   <td>Baixe esta imagem:
-    <table style="border: 2px solid #ccc;">
-     <tbody>
-      <tr>
-       <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>Adicione uma regra à sua folha de estilo então isto mostrará a imagem no começo de cada linha:</p>
-
-    <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
-    <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/2527/=Blue-rule-ground.png"></p>
-
-    <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
-    <div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
-
-    <div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
-    </div>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Uma maneira comum de adicionar conteúdo à folha de estilo é marcar os itens em listas. Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="Talk:pt/CSS/Como_começar/Conteúdo">Discussão</a>.</p>
-
-<p>A próxima página descreve como especificar o estilo para elementos de listas: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Listas" title="pt/CSS/Como_começar/Listas">Listas</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}</p>
diff --git a/files/pt-pt/learn/css/howto/index.html b/files/pt-pt/learn/css/howto/index.html
deleted file mode 100644
index ac198b7ae9..0000000000
--- a/files/pt-pt/learn/css/howto/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Utilizar CSS para resolver problemas comuns
-slug: Learn/CSS/Howto
-tags:
-  - Aprendizagem
-  - CSS
-  - Learn
-  - NeedsTranslation
-  - Precisa de Tradução
-  - Principiante
-translation_of: Learn/CSS/Howto
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">As seguintes hiperligações apontam para soluções até aos problemas comuns diários que irá precisar de resolver com CSS.</p>
-
-<h2 id="Casos_de_utilização_comuns">Casos de utilização comuns</h2>
-
-<div class="column-container">
-<div class="column-half">
-<h3 id="Básico">Básico</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li>
-</ul>
-
-<h3 id="CSS_e_texto">CSS e texto</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<h3 id="Caixas_e_layouts">Caixas e <em>layouts</em></h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
-</ul>
-</div>
-</div>
-
-<h2 id="Técninas_avançadas_e_invulgares">Técninas avançadas e invulgares</h2>
-
-<p>Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.</p>
-
-<h3 id="Geral">Geral</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
-</ul>
-
-<h3 id="Efeitos_avançados">Efeitos avançados</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
-</ul>
-
-<h3 id="Layout"><em>Layout</em></h3>
-
-<ul>
- <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
- <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
- <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
-</ul>
-
-<h2 id="Consultar_também">Consultar também</h2>
-
-<p><a href="/pt-PT/docs/Learn/CSS/Howto/FAQ_de_CSS">CSS - Perguntas Frequentes (FAQ)</a> — Uma coleção de pequenas partes de informação, abrangendo uma variedade de tópicos, desde a depuração até à utilização do seletor.</p>
diff --git a/files/pt-pt/learn/css/index.html b/files/pt-pt/learn/css/index.html
deleted file mode 100644
index eee5fb752a..0000000000
--- a/files/pt-pt/learn/css/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: 'Aprender a estilizar HTML, utilizando CSS'
-slug: Learn/CSS
-tags:
-  - CSS
-  - Depuração
-  - Estilo
-  - Principiante
-  - Tópico
-  - especificidade
-translation_of: Learn/CSS
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Folhas de Estilo em Cascata — ou {{glossary("CSS")}} — é a segunda tecnologia que deveria começar a aprender depois de {{glossary("HTML")}}. Considerando que HTML é utilizado para definir a estrutura e semântica do seu conteúdo, CSS é utilizada para estilizar e aplicar. Assim, por exemplo, pode utilizar CSS para alterar o tipo de letra, cor, tamanho e espaçamento de seu conteúdo, dividi-lo em várias colunas, ou adicionar animações e outros elementos decorativos.</p>
-
-<h2 id="Passos_de_aprendizagem">Passos de aprendizagem</h2>
-
-<p>Você deve aprender o básico de HTML antes de tentar qualquer CSS. Recomendamos que você trabalhe primeiro através do nosso módulo de <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a>. Nesse módulo, você aprenderá sobre:</p>
-
-<ul>
- <li>CSS, começando com o módulo Introduction to CSS</li>
- <li>Módulos de HTML mais avancados <a href="/pt-PT/docs/Learn/HTML#Módulos">HTML modules</a></li>
- <li><a href="/pt-PT/docs/Learn/JavaScript">Javascript</a>, e como utilizá-lo para adicionar funcionalidades dinâmicas às páginas web</li>
-</ul>
-
-<p>Uma vez entendidos os fundamentos do HTML, recomendamos que aprenda HTML e CSS ao mesmo tempo, andando para trás e para a frente entre os dois tópicos. Isto porque HTML é muito mais interessante com CSS, e você não pode realmente aprender CSS sem conhecer HTML.</p>
-
-<p>Antes de iniciar este tópico, deve também estar familiarizado com a utilização de computadores e o uso da web passivamente (ou seja, apenas olhando para ele, consumindo o conteúdo). Você deve ter um ambiente de trabalho básico configurado conforme detalhado em <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a>, e entender como criar e gerir arquivos, conforme detalhado em <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a> - ambos são partes do nosso módulo <a href="/pt-PT/docs/Learn/Comecar_com_a_Web">Primeiros passos na Web</a>.</p>
-
-<p>Recomenda-se que trabalhe através de <a href="/pt-PT/docs/Learn/Comecar_com_a_Web">Primeiros passos na Web</a> antes de prosseguir com este tópico. No entanto, fazê-lo não é absolutamente necessário, pois muito do que é abordado no artigo <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a> também é abordado no nosso módulo CSS first steps, embora com muito mais detalhe.</p>
-
-<h2 id="Módulos">Módulos</h2>
-
-<p>Este tópico contém os seguintes módulos, numa ordem sugerida para trabalhar com eles. Deveria definitivamente começar com o primeiro .</p>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS">Introdução à CSS</a></dt>
- <dd>This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd>
- <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_texto">Estilio de texto</a></dt>
- <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd>
- <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_caixas">Estilio de caixas</a></dt>
- <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such drop shadows and filters on boxes.</dd>
- <dt><a href="/pt-PT/docs/Learn/CSS/Disposição_CSS">Disposição de CSS</a></dt>
- <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.</dd>
- <dt>Desenho responsivo (TBD)</dt>
- <dd>Com tantos tipos diferentes de dispositivos capazes de navegar na Web nestes dias, o <a href="/pt-PT/docs/Web/Apps/Progressiva/Responsivo">desenho da <em>Web</em> responsivo </a>(RWD) tornou-se uma habilidade básica de desenvolvimento da <em>Web</em>. Este módulo irá abranger os princípios básicos e as ferramentas de RWD, explicar como aplicar CSS diferentes em um documento, dependendo das funcionalidades do dispositivo, como largura, orientação e resolução do ecrã, e explorar as tecnologias disponíveis para servir diferentes vídeos e imagens dependendo de tais funcionalidades.</dd>
-</dl>
-
-<h2 id="Resolver_problemas_de_CSS_comuns">Resolver problemas de CSS comuns</h2>
-
-<p><a href="/pt-PT/docs/Learn/CSS/Howto">Utilizar CSS para resolver problemas comuns,</a> fornece hioperligações para secções de conteúdo explicando como utilizar o CSS para resolver problemas muito comuns quando criar uma página da Web .</p>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<dl>
- <dt><a href="/pt-PT/docs/Web/CSS">CSS na MDN</a></dt>
- <dd>O ponto de entrada principal para a documentação de CSS na MDN, onde irá encontrar uma documentação de referência detalhada para todas as funcionalidades as linguagem CSS. Quer saber todos os valores que uma propriedade pode ter? Este é um bom lugar para ir.</dd>
-</dl>
diff --git a/files/pt-pt/learn/css/styling_text/fundamentals/index.html b/files/pt-pt/learn/css/styling_text/fundamentals/index.html
deleted file mode 100644
index d4e2e23478..0000000000
--- a/files/pt-pt/learn/css/styling_text/fundamentals/index.html
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: Estilos de texto
-slug: Learn/CSS/Styling_text/Fundamentals
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/Styling_text/Fundamentals
-translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
-original_slug: Web/CSS/Como_começar/Estilos_de_texto
----
-<p>{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}</p>
-
-<p>Esta página dá mais exemplos de estilos de texto.</p>
-
-<p>Você modifica sua folha de estilo de amostra para usar diferentes fontes.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Estilos_de_texto" name="Informa.C3.A7.C3.A3o:_Estilos_de_texto">Informação: Estilos de texto</h2>
-
-<p>CSS tem várias propriedades para estilos de texto.</p>
-
-<p>Há uma conveniente propriedade de abreviação de caracteres/palavras que facilitam a escrita, <code>font</code>, que você pode usar para especificar várias coisas de uma vez — por exemplo:</p>
-
-<ul>
- <li>Negrito, itálico e letras minúsculas</li>
- <li>O tamanho</li>
- <li>A altura da linha</li>
- <li>O tipo da fonte</li>
-</ul>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>
-    <div style="width: 40em;">
-    <pre class="eval">
-p {font: italic 75%/125% "Comic Sans MS", cursive;}
-</pre>
-    </div>
-
-    <p>Esta regra coloca várias propriedades da fonte, fazendo todos os parágrafos em itálico.</p>
-
-    <p>O tamanho da fonte é três quartos (75%) do tamanho em cada elemento do paragrafo principal e a altura da linha é 125% (um pouco mais espaçada que o normal).</p>
-
-    <p>O tipo da fonte é Comic Sans MS, mas se a fonte não estiver disponível então o navegador usará sua fonte cursiva padrão (escrita a mão).</p>
-
-    <p>A regra tem o efeito colateral de desativar o negrito e as letras minúsculas (colocando-os no estilo <code>normal</code>)</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Tipos_de_fonte" name="Tipos_de_fonte">Tipos de fonte</h3>
-
-<p>Você não pode predizer quais fontes os leitores do seu documento terão. Então quando você especifica tipos de fonte é uma boa idéia colocar uma lista de alternativas em ordem de preferência.</p>
-
-<p>Acabe a lista com um dos tipos de fontes internas padrão: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> ou <code>monospace</code>. (Algumas destas podem ser configuradas nas Opções do seu navegador.)</p>
-
-<p>Se o tipo não for suportado por algumas características no documento, então o navegador pode substituí-lo por um tipo diferente. Por exemplo, o documento pode conter caracteres especiais que a fonte não suporte. Se o navegador puder encontrar outra fonte que tenha os caracteres, então ele usará a outra fonte.</p>
-
-<p>Para especificar um tipo de fonte por conta própria, use a propriedade <code>font-family</code>.</p>
-
-<h3 id="Tamanho_da_fonte" name="Tamanho_da_fonte">Tamanho da fonte</h3>
-
-<p>Leitores que usam os navegadores Mozilla podem configurar o tamanho padrão das fontes em Opções, e mudar o tamanho do texto quando lêem uma página, isso a torna boa para você usá-la com tamanho relativos onde você puder.</p>
-
-<p>Você pode usar alguns valores internos para o tamanho das fontes, como: <code>small</code>, <code>medium</code> e <code>large</code>. Você pode também usar valores relativos para o tamanho das fontes do elemento primário, como: <code>smaller</code>, <code>larger</code>, <code>150%</code> ou <code>1.5em</code>.</p>
-
-<p>Se necessário você pode especificar um tamanho atual, como: <code>12px</code> (12 pixels) para um instrumento de exibição ou <code>12pt</code> (12 pontos) para uma impressora. Este tamanho é nominalmente a largura de uma letra m, mas fontes variam na maneira do tamanho, você vê relatos do tamanho que você especifica.</p>
-
-<p>Para especificar um tamanho de fonte por conta própria, use a propriedade <code>font-size</code>.</p>
-
-<h3 id="Altura_da_linha" name="Altura_da_linha">Altura da linha</h3>
-
-<p>A altura da linha especifica o espaçamento entre linhas. Se seu documento tem longos parágrafos com muitas linhas, um espaçamento mais largo que o normal faz com que a leitura seja mais fácil, especialmente se o tamanho da fonte for pequeno.</p>
-
-<p>Para especificar a altura da linha por conta própria, use a propriedade <code>line-height</code>.</p>
-
-<h3 id="Decora.C3.A7.C3.A3o" name="Decora.C3.A7.C3.A3o">Decoração</h3>
-
-<p>A propriedade separada <code>text-decoration</code> pode especificar outros estilos, como <code>underline</code> ou <code>line-through</code>. Você pode configurar isto para <code>none</code> removendo explicitamente qualquer decoração.</p>
-
-<h3 id="Outras_propriedades" name="Outras_propriedades">Outras propriedades</h3>
-
-<p>Para especificar itálico por conta própria, use <code>font-style: italic;</code><br>
- Para especificar negrito por conta própria, use <code>font-weight: bold;</code><br>
- Para especificar letras minúsculas por conta própria, use <code>font-variant: small-caps;</code></p>
-
-<p>Para tornar qualquer destes valores individualmente desativado, você pode especificar o valor <code>normal</code> ou <code>inherit</code>.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Você pode especificar os estilos do texto em uma variedade de outras maneiras.
-    <p>Por exemplo, algumas propriedades mencionadas aqui têm outros valores que podem ser usados.</p>
-
-    <p>Em uma folha de estilo complexa, evite usar a propriedade de abreviação de caracteres/palavras que facilitam a escrita <code>font</code>, por causa de seus efeitos colaterais (o re-escolher de outras propriedades individuais).</p>
-
-    <p>Para maiores detalhes sobre as propriedades relacionadas às fontes, veja <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> na especificação do CSS. Para maiores detalhes sobre decoração de textos, veja <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Especificando_fontes" name="A.C3.A7.C3.A3o:_Especificando_fontes">Ação: Especificando fontes</h2>
-
-<p>Para um documento de amostra, você pode escolher a fonte do elemento <small>BODY</small> e o resto do documento herda as configurações.</p>
-
-<p>Edite seu arquivo CSS. Adicione esta regra para mudar a fonte completamente. O topo do arquivo CSS é um local lógico para isto, mas isto terá o mesmo efeito em qualquer lugar que for posicionado:</p>
-
-<div style="width: 40em;">
-<pre class="eval">body {font: 16px "Comic Sans MS", cursive;}
-</pre>
-</div>
-
-<p>Adicione um comentário à regra, e deixe um espaço em branco para fazer sua disposição preferido.</p>
-
-<p>Atualize seu navegador para ver o efeito. Se o seu sistema tem Comic Sans MS, ou outra fonte cursiva que não suporta itálico, então seu navegador escolhe um tipo diferente de fonte para o texto em itálico na primeira linha:</p>
-
-<table style="border: 2px outset #36b; padding: 1em;">
- <tbody>
-  <tr>
-   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-  </tr>
-  <tr>
-   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Da barra de menu do seu navegador, escolha Exibir – Tamanho do Texto – Aumentar. Mesmo que o estilo especificado seja 16 pixels, um usuário lendo o documento pode mudar o tamanho.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
- <caption>Desafio</caption>
- <tbody>
-  <tr>
-   <td>Sem mudar mais nada, faça todas as seis letras iniciais duas vezes o tamanho na fonte serifada padrão do navegador:
-    <table>
-     <tbody>
-      <tr>
-       <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
-      </tr>
-      <tr>
-       <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Estilos_de_texto" title="Talk:pt/CSS/Como_começar/Estilos_de_texto">Discussão</a>.</p>
-
-<p>Seu documento de amostra está pronto para usar várias cores nomeadas. A próxima página lista os nomes das cores padrão e explica como você pode especificar outras: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Cor" title="pt/CSS/Como_começar/Cor">Cor</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}</p>
diff --git a/files/pt-pt/learn/css/styling_text/index.html b/files/pt-pt/learn/css/styling_text/index.html
deleted file mode 100644
index 6cd91239b8..0000000000
--- a/files/pt-pt/learn/css/styling_text/index.html
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: Estilizar texto
-slug: Learn/CSS/Styling_text
-tags:
-  - CSS
-  - Hiperligações
-  - Principiante
-  - Texto
-  - Tipos de Letra
-  - letra
-  - lina
-  - listas
-  - modulo
-  - sombra
-  - tipo de letra
-  - tipos de letra da Web
-translation_of: Learn/CSS/Styling_text
-original_slug: Learn/CSS/Estilo_de_texto
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Com os conceitos básicos da linguagem CSS cobertos, o próximo tópico de CSS para se concentrar será o estilo de texto - uma das coisas mais comuns que irá fazer com CSS. Aqui, nós vamos ver os fundamentos do estilo de texto, incluindo a configuração do tipo de letra, negrito, itálico, espaçamento de linha e letra, sombras e outros recursos de texto. Nós completamos o módulo ao analisar a aplicação de tipos de letra personalizadas para a sua página, e listas de estilo e hiperligações.</p>
-
-<h2 id="Pré-requisitos">Pré-requisitos</h2>
-
-<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="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>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
- <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt>
- <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt>
- <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt>
- <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd>
-</dl>
-
-<h2 id="Avaliações">Avaliações</h2>
-
-<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p>
-
-<dl>
- <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt>
- <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd>
-</dl>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody>
-  <tr>
-   <td class="SL_td"><input></td>
-   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-   </td>
-   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_font_patch"> </div>
-
-    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody>
-  <tr>
-   <td><input></td>
-   <td>
-    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-   </td>
-   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/css/styling_text/styling_lists/index.html b/files/pt-pt/learn/css/styling_text/styling_lists/index.html
deleted file mode 100644
index 654b8a240e..0000000000
--- a/files/pt-pt/learn/css/styling_text/styling_lists/index.html
+++ /dev/null
@@ -1,363 +0,0 @@
----
-title: Listas
-slug: Learn/CSS/Styling_text/Styling_lists
-tags:
-  - CSS:Como_começar
-translation_of: Learn/CSS/Styling_text/Styling_lists
-translation_of_original: Web/Guide/CSS/Getting_started/Lists
-original_slug: Web/CSS/Como_começar/Listas
----
-<p>{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}</p>
-
-<p>Esta página descreve como você pode usar as CSS para especificar a aparência das listas.</p>
-
-<p>Você cria um novo documento de amostra contendo listas, e uma nova folha de estilo que estiliza as listas.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_Listas" name="Informa.C3.A7.C3.A3o:_Listas">Informação: Listas</h2>
-
-<p>Se você resolveu o desafio da última página (<strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong>), então você viu como você pode adicionar conteúdo antes de qualquer elemento para mostrar isto como o item de uma lista.</p>
-
-<p>CSS proporciona propriedades especiais que foram designadas para listas. Geralmente é mais conveniente usar estas propriedades sempre que você puder.</p>
-
-<p>Para especificar o estilo para uma lista, use a propriedade <code>list-style</code> para especificar o tipo de marcador.</p>
-
-<p>O seletor nas regras do seu CSS pode selecionar qualquer um dos elementos na sua lista de itens (por exemplo, <code>LI</code>), ou isto pode selecionar o elemento primário da lista (por exemplo, <code>UL</code>). Então os elementos da lista herdam o estilo.</p>
-
-<h3 id="Listas_n.C3.A3o_ordenadas" name="Listas_n.C3.A3o_ordenadas">Listas não ordenadas</h3>
-
-<p>Em uma lista <em>não ordenada</em>, cada item da lista é marcado da mesma maneira.</p>
-
-<p>CSS tem três tipos de marcador. Aqui está como seu navegador os mostra:</p>
-
-<ul style="padding-left: 2em;">
- <li style=""><code>disc</code></li>
- <li style=""><code>circle</code></li>
- <li style=""><code>square</code></li>
-</ul>
-
-<p>Alternativamente, você pode especificar a URL de uma imagem.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Estas regras especificam diferentes marcadores para diferentes classes de itens da lista:
-    <div style="width: 30em;">
-    <pre class="eval">
-li.open {list-style: circle;}
-li.closed {list-style: disc;}
-</pre>
-    </div>
-
-    <p>Quando estas classes são usadas em uma lista, elas distinguem entre os itens aberto (open) e fechado (closed):</p>
-
-    <div style="width: 30em;">
-    <pre class="eval">
-&lt;UL&gt;
-  &lt;LI class="open"&gt;Lorem ipsum&lt;/LI&gt;
-  &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;
-</pre>
-    </div>
-
-    <p>O resultado será parecido com:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <ul style="padding-right: 6em;">
-         <li style="">Lorem ipsum</li>
-         <li style="">Dolor sit</li>
-         <li style="">Amet consectetuer</li>
-         <li style="">Magna aliquam</li>
-         <li style="">Autem veleum</li>
-        </ul>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Listas_ordenadas" name="Listas_ordenadas">Listas ordenadas</h3>
-
-<p>Em uma lista <em>ordenada</em>, cada item da lista é marcado diferentemente para mostrar a posição em seqüência.</p>
-
-<p>Use a propriedade <code>list-style</code> para especificar o tipo de marcador:</p>
-
-<ul style="padding-left: 2em;">
- <li style=""><code>decimal</code></li>
- <li style=""><code>lower-roman</code></li>
- <li style=""><code>upper-roman</code></li>
- <li style=""><code>lower-latin</code></li>
- <li style=""><code>upper-latin</code></li>
-</ul>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Esta regra especifica os elementos <small>OL</small> com a classe <code>info</code>, os itens são identificados com letras maiúsculas.
-    <div style="width: 30em;">
-    <pre class="eval">
-ol.info {list-style: upper-latin;}
-</pre>
-    </div>
-
-    <p>Os elementos <small>LI</small> na lista herdam este estilo:</p>
-
-    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <ul>
-         <li style="padding-right: 6em;">Lorem ipsum</li>
-         <li style="padding-right: 6em;">Dolor sit</li>
-         <li style="padding-right: 6em;">Amet consectetuer</li>
-         <li style="padding-right: 6em;">Magna aliquam</li>
-         <li style="padding-right: 6em;">Autem veleum</li>
-        </ul>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>A propriedade <code>list-style</code> é uma propriedade "abreviada". Em folhas de estilo complexas você pode preferir usar propriedades separadas para configurar valores separados. Para detalhes sobre estas propriedades separadas, e mais detalhes sobre como as CSS especificam listas, veja <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Lists</a> na CSS Specification.
-    <p>Se você está usando a linguagem de marcação como o HTML que proporciona tags convecionais para listas não ordenadas (<small>UL</small>) e ordenadas (<small>OL</small>), então é bom praticar usando tags da maneira que foi explicado. Contudo, você pode usar as CSS para fazer <small>UL</small> mostrar ordenado e <small>OL</small> para mostrar não ordenado se você precisar.</p>
-
-    <p>Os navegadores diferem no modo como implementam os estilos das listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Contadores" name="Contadores">Contadores</h3>
-
-<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
-<p><strong>Note: </strong> Alguns navegadores não suportam contadores.</p>
-</div>
-
-<p>Você pode usar contadores para numerar quaisquer elementos, não somente itens listados. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</p>
-
-<p>Para especificar uma numeração, você precisa de um <em>contador</em> com um nome que você especifica.</p>
-
-<p>Em alguns elementos antes da contagem começar, re-inicie o contador com a propriedade <code>counter-reset</code> e o nome do seu contador. O principal dos elementos que você estiver contando é um bom lugar para isto, mas você pode usar qualquer elemento que esteja antes da lista de itens.</p>
-
-<p>Em cada elemento que o contador incrementar, use a propriedade <code>counter-increment</code> e o nome do seu contador.</p>
-
-<p>Para mostrar seu contador, adicione <code>:before</code> ou <code>:after</code> ao seletor e use a propriedade <code>content</code> (como fez na página anterior, <strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong>).</p>
-
-<p>No valor da propriedade <code>content</code>, especifique <code>counter()</code> com o nome do seu contador. Opcionalmente especifique um tipo. Os tipos são como na seção passada em <strong>Listas ordenadas</strong>.</p>
-
-<p>Normalmente o elemento que mostra o contador também incrementa isto.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
-  <tr>
-   <td>Esta regra inicializa um contador para cada elemento <small>H3</small> com a classe <code>numbered</code>:
-    <div style="width: 30em;">
-    <pre class="eval">
-h3.numbered {counter-reset: mynum;}
-</pre>
-    </div>
-
-    <p>Esta regra mostra e incrementa o contador para cada elemento <small>P</small> com a classe <code>numbered</code>:</p>
-
-    <div style="width: 30em;">
-    <pre class="eval">
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-</pre>
-    </div>
-
-    <p>O resultado se parece com isto:</p>
-
-    <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td><strong>Cabeçalho</strong>
-
-        <p><strong>1: </strong>Lorem ipsum</p>
-
-        <p><strong>2: </strong>Dolor sit</p>
-
-        <p><strong>3: </strong>Amet consectetuer</p>
-
-        <p><strong>4: </strong>Magna aliquam</p>
-
-        <p><strong>5: </strong>Autem veleum</p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
-  <tr>
-   <td>Você não pode usar contadores a menos que você saiba que todos os que lêem o seu documento têm um navegador que os suporta.
-    <p>Se você puder usar contadores, eles tem a vantagem de que você pode estilizar os contadores separadamente da lista de itens. No exemplo anterior, os contadores estão em negrito mas a os itens da lista não.</p>
-
-    <p>Você pode também usar contadores em meios mais complexos — por exemplo, para numerar seções, cabeçalhos, sub-cabeçalhos e parágrafos em documentos formais. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> em CSS Specification.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Listas_denominadas" name="A.C3.A7.C3.A3o:_Listas_denominadas">Ação: Listas denominadas</h2>
-
-<p>Crie um novo documento HTML, <code>doc2.html</code>. Copie e cole o conteúdo daqui, tendo certeza de que você rola o mouse para pegar tudo isto:</p>
-
-<div style="width: 48em; height: 12em; overflow: auto;">
-<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
-&lt;HTML&gt;
-&lt;HEAD&gt;
-&lt;TITLE&gt;Documento de amostra 2&lt;/TITLE&gt;
-&lt;LINK rel="stylesheet" type="text/css" href="style2.css"&gt;
-&lt;/HEAD&gt;
-&lt;BODY&gt;
-
-&lt;H3 id="oceans"&gt;Os oceanos&lt;/H3&gt;
-&lt;UL&gt;
-&lt;LI&gt;Ártico&lt;/LI&gt;
-&lt;LI&gt;Atlântico&lt;/LI&gt;
-&lt;LI&gt;Pacífico&lt;/LI&gt;
-&lt;LI&gt;Índico&lt;/LI&gt;
-&lt;LI&gt;Antártico&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;
-</pre>
-</div>
-
-<p>Faça uma nova folha de estilo, <code>style2.css</code>. Copie e cole o conteúdo daqui:</p>
-
-<div style="width: 48em;">
-<pre class="eval">/* parágrafos numerados */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-</pre>
-</div>
-
-<p>Se a disposição e o comentário não estiver ao seu gosto, mude-os.</p>
-
-<p>Abra o documento no seu navegador. Se o seu navegador suporta contadores, você verá algo semelhante ao exemplo abaixo. Se o seu navegador não suporta contadores, então você não verá os números (e provavelmente nem sequer os dois pontos (:)):</p>
-
-<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Os oceanos</p>
-
-    <ul style="">
-     <li>Ártico</li>
-     <li>Atlântico</li>
-     <li>Pacífico</li>
-     <li>Índico</li>
-     <li>Antártico</li>
-    </ul>
-
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Parágrafos numerados</p>
-
-    <p><strong>1: </strong>Lorem ipsum</p>
-
-    <p><strong>2: </strong>Dolor sit</p>
-
-    <p><strong>3: </strong>Amet consectetuer</p>
-
-    <p><strong>4: </strong>Magna aliquam</p>
-
-    <p><strong>5: </strong>Autem veleum</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;">
- <caption>Desafios</caption>
- <tbody>
-  <tr>
-   <td>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais Romanos de i até v:
-    <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Os oceanos</p>
-
-        <ul style="">
-         <li>Ártico</li>
-         <li>Atlântico</li>
-         <li>Pacífico</li>
-         <li>Índico</li>
-         <li>Antártico</li>
-        </ul>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p><br>
-     Se o seu navegador suporta contadores, mude sua folha de estilo para identificar o cabeçalho com letras maiúsculas em parênteses como isto:</p>
-
-    <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
-     <tbody>
-      <tr>
-       <td>
-        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) Os oceanos</p>
-
-        <p><strong>. . .</strong></p>
-
-        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Parágrafos numerados</p>
-
-        <p><strong>. . .</strong></p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Listas" title="Talk:pt/CSS/Como_começar/Listas">Discussão</a>.</p>
-
-<p>Quando seu navegador exibe seu documento de amostra, cria espaços ao redor dos elementos quando eles são exibidos na página.</p>
-
-<p>A próxima página descreve como você pode usar as CSS para trabalhar com formas subjacentes de elementos: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Caixas" title="pt/CSS/Como_começar/Caixas">Caixas</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}</p>
diff --git a/files/pt-pt/learn/front-end_web_developer/index.html b/files/pt-pt/learn/front-end_web_developer/index.html
deleted file mode 100644
index 08d3626f6a..0000000000
--- a/files/pt-pt/learn/front-end_web_developer/index.html
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: Front-end web developer
-slug: Learn/Front-end_web_developer
-translation_of: Learn/Front-end_web_developer
----
-<p>{{learnsidebar}}</p>
-
-<p>Bem-vindos ao roteiro de aprendizado em desenvolvimento web front-end!</p>
-
-<p>Aqui disponibilizamos tudo o que precisas para te tornares um desenvolvedor Web front-end. Simplesmente trabalha cada secção deste curso, aprendendo novas habilidades (ou melhorando as que já tens) á medida que avanças. <span>Cada secção inclui exercicios e avaliações para testar a tua compreensão antes de avançares para proxima.</span></p>
-
-<h2 id="Temas_abrangidos">Temas abrangidos</h2>
-
-<p>Os temas abrangidos são:</p>
-
-<ul>
- <li>Preparação básica e aprender como estudar</li>
- <li>Normas da Web e boas práticas (como por exemplo acessibilidade e compatibilidade entre navegadores)</li>
- <li>HTML, a linguaguem de marcacao que proporciona a estrutura do conteudo web e seu significado</li>
- <li>CSS, a linguaguem usada para estilizar as paginas web</li>
- <li>JavaScript, a linguagem de definicoes usada para criar interacoes na web</li>
- <li>Ferramentas que sao usadas para facilitar o desenvolvimento web moderno do lado do cliente</li>
-</ul>
-
-<p>Sinta-se livre para trabalhar nas seccoes por ordem, mas cada uma e tambem independente. Por exemplo, se voce ja domina HTML, podes seguir para a seccao de CSS.</p>
-
-<h2 id="Pre_requisitos">Pre requisitos</h2>
-
-<p>Voce nao precisa de nenhum conhecimento anterior para este curso. Tudo que precisas e de um computador que possa operar um navegador moderno, conexao a internet, e boa vontade para aprender.</p>
-
-<p>Se nao estiveres seguro de que desenvolvimento web front-end e para si, e/ou voce quer uma introducao mais gentil antes de iniciar um curso mais longo e completo, trabalhe no nosso modulo <a href="/en-US/docs/Learn/Getting_started_with_the_web">Iniciando com a web</a> (ingles) primeiramente.</p>
-
-<h2 id="Obtendo_ajuda">Obtendo ajuda</h2>
-
-<p>Nos tentamos tornar o aprendizado de desenvolvimento web front-end mais confortavel possivel, mas provavelmente voce ainda fique bloqueado porque nao percebe alguma coisa, ou algum codigo ainda nao esteje funcionando.</p>
-
-<p>Nao entre em panico. Todos nos bloqueamos, quando somos iniciantes ou desenvolvedores web profissionais. O artigo <a href="/en-US/docs/Learn/Learning_and_getting_help">Estudando e obtendo ajuda</a> (ingles) e proporcionado a ti com uma serie de dicas para encontrares informacoes e auto ajudas. Se ainda assim continuas bloqueado, sinta se avontade para postar uma pergunta no nosso <a href="https://discourse.mozilla.org/c/mdn/learn/">Forum discussao</a> (ingles).</p>
-
-<p>Vamos iniciar. Boa sorte!</p>
-
-<h2 id="O_roteiro_de_aprendizagem">O roteiro de aprendizagem</h2>
-
-<h3 id="Iniciando">Iniciando</h3>
-
-<p>Tempo de duracao: 1.5–2 horas</p>
-
-<h4 id="Pre_requisitos_2">Pre requisitos</h4>
-
-<p>Nada mais, excepto um basico dominio computacional.</p>
-
-<h4 id="Como_saberei_que_estou_pronto_para_continuar">Como saberei que estou pronto para continuar?</h4>
-
-<p>Nao ha avaliacoes nesta seccao do curso. Mas certifique se de nao ignora-la. E importante que voce esteja preparado para trabalhar com os proximos exercicios do curso.</p>
-
-<h4 id="Guias">Guias</h4>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalando softwares basicos</a> (ingles)— configurando as ferramentas basicas (15 min leitura)</li>
- <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Segundo plano da web e seus principios</a> (ingles)—(45 min leitura)</li>
- <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Aprendendo e obtendo ajuda</a> (ingles)—(45 min leitura)</li>
-</ul>
-
-<h3 id="Semantica_e_estruturas_com_HTML">Semantica e estruturas com HTML</h3>
-
-<p>Tempo de duracao: 35–50 horas</p>
-
-<h4 id="Pre_requisitos_3">Pre requisitos</h4>
-
-<p>Nada mais, excepto um basico dominio computacional e um basico ambiente de desenvolvimento web.</p>
-
-<h4 id="Como_saberei_que_estou_pronto_para_continuar_2">Como saberei que estou pronto para continuar?</h4>
-
-<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>
-
-<h4 id="Modulos">Modulos</h4>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducao ao HTML</a> (ingles)—(15–20 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and incorporacao</a> (ingles)—(15–20 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/HTML/Tables">tabelas com HTML</a> (ingles)—(5–10 horas leitura/exercicios)</li>
-</ul>
-
-<h3 id="Estilizando_e_organizando_com_CSS">Estilizando e organizando com CSS</h3>
-
-<p>Tempo de duracao: 90–120 horas</p>
-
-<h4 id="Pre_requisitos_4">Pre requisitos</h4>
-
-<p>E recomendavel que voce tenha um conhecimento basico sobre HTML antes de comecar a aprender CSS. Deves no minimo estudar primeiramente a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducao ao HTML</a> (ingles).</p>
-
-<h4 id="Como_saberei_que_estou_pronto_para_continuar_3">Como saberei que estou pronto para continuar?</h4>
-
-<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>
-
-<h4 id="Modulos_2">Modulos</h4>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS primeiros passos</a> (ingles)–(10–15 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS construindo blocos</a> (ingles)–(35–45 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text">Estilizando textos</a> (ingles)–(15–20 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS organizacao</a> (ingles)–(30–40 horas leitura/exercicios)</li>
-</ul>
-
-<h4 id="Fontes_extras">Fontes extras</h4>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS organizacao cookbook</a> (ingles)</li>
-</ul>
-
-<h3 id="Interacao_com_JavaScript">Interacao com JavaScript</h3>
-
-<p>Tempo de duracao: 135–185 horas</p>
-
-<h4 id="Pre_requisitos_5">Pre requisitos</h4>
-
-<p>E recomendavel que voce tenha um conhecimento basico sobre HTML antes de comecar a aprender JavaScript. Deves no minimo estudar primeiramente a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducao ao HTML</a> (ingles).</p>
-
-<h4 id="Como_saberei_que_estou_pronto_para_continuar_4">Como saberei que estou pronto para continuar?</h4>
-
-<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>
-
-<h4 id="Modulos_3">Modulos</h4>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript primeiros passos</a> (ingles)–(30–40 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript construindo blocos</a> (ingles)–(25–35 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introducao aos objectos JavaScript</a> (ingles)–(25–35 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a> (30–40 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a> (25–35 horas leitura/exercicios)</li>
-</ul>
-
-<h3 id="Formularios_web_—_Trabalhando_com_dados_de_usuario">Formularios web — Trabalhando com dados de usuario</h3>
-
-<p>Tempo de duracao: 40–50 horas</p>
-
-<h4 id="Pre_requisitos_6">Pre requisitos</h4>
-
-<p>Formularios requerem conhecimento sobre HTML, CSS e JavaScript. A complexidade em trabalhar com formularios fazem deste um topico dedicado.</p>
-
-<h4 id="Como_saberei_que_estou_pronto_para_continuar_5">Como saberei que estou pronto para continuar?</h4>
-
-<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>
-
-<h4 id="Modulos_4">Modulos</h4>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Forms">Formularios web </a>(ingles)–(40–50 hours)</li>
-</ul>
-
-<h3 id="Fazendo_o_trabalho_de_web_para_todos">Fazendo o trabalho de web para todos</h3>
-
-<p>Tempo de duracao: 60–75 horas</p>
-
-<h4 id="Pre_requisitos_7">Pre requisitos</h4>
-
-<p>Seria uma otima ideia conhecer sobre HTML, CSS e JavaScript antes de trabalhar nesta seccao. Inclui outras tecnicas e boas praticas em contacto com multiplas tecnologias.</p>
-
-<h4 id="Como_saberei_que_estou_pronto_para_continuar_6">Como saberei que estou pronto para continuar?</h4>
-
-<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>
-
-<h4 id="Modulos_5">Modulos</h4>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testando a Compatibilidade entre navegadores</a> (ingles)–(25–30 horas leitura/exercicios)</li>
- <li><a href="/en-US/docs/Learn/Accessibility">Acessibilidade</a> (ingles)–(20–25 horas leitura/exercicios)</li>
-</ul>
-
-<h3 id="Ferramentas_modernas">Ferramentas modernas</h3>
-
-<p>Tempo de duracao: 55–90 horas</p>
-
-<h4 id="Pre_requisitos_8">Pre requisitos</h4>
-
-<p>Seria uma otima ideia conhecer sobre HTML, CSS e JavaScript antes de trabalhar nesta seccao, tal como ferramentas abordadas que trabalham em conjunto com muitas destas tecnologias.</p>
-
-<h4 id="Como_saberei_que_estou_pronto_para_continuar_7">Como saberei que estou pronto para continuar?</h4>
-
-<p>Nao ha avaliacoes especificas nos artigos definidos neste modulo. Os tutoriais de estudo de caso no final do segundo e terceiro modulo preparar-te-ao para dominar o essencial sobre as ferramentas modernas.</p>
-
-<h4 id="Modulos_6">Modulos</h4>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git i GitHub</a> (ingles)–(5 horas leitura)</li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Compreendendo as ferramentas para desenvolvimento web client-side</a> (ingles)–(20–25 horas leitura)</li>
- <li>
-  <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Compreendendo as estruturas client-side JavaScript</a> (ingles)–(30-60 horas leitura/exercicios)</p>
- </li>
-</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html b/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html
deleted file mode 100644
index 066748249a..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html
+++ /dev/null
@@ -1,294 +0,0 @@
----
-title: CSS - Essencial
-slug: Learn/Getting_started_with_the_web/CSS_basics
-tags:
-  - Aprender
-  - Beginner
-  - CSS
-  - CodingScripting
-  - Estilo
-  - I10n:priority
-  - Web
-translation_of: Learn/Getting_started_with_the_web/CSS_basics
-original_slug: Learn/Comecar_com_a_Web/CSS_basico
----
-<div>{{LearnSidebar}}
-<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web")}}</div>
-</div>
-
-<div class="summary">
-<p>CSS (Folhas de Estilo em Cascata) é o código que se utiliza para estilizar a sua página da Web. <em>CSS - Elementar</em> guia-o através do que precisa para começar. Vamos responder a perguntas deste género: Como é que eu coloco o meu texto a preto ou vermelho? Como é que eu faço para que o meu conteúdo apareça neste lugar do ecrã? Como é que eu decoro a minha página da Web, com cores e imagens de fundo?</p>
-</div>
-
-<h2 id="Então_o_que_realmente_é_o_CSS">Então, o que realmente é o CSS?</h2>
-
-<p>Tal como o HTML, o CSS não é bem uma linguagem de programação; também não é uma linguagem de demarcação. É uma <em>linguagem de folha de estilos</em>. Isto significa que permite aplicar estilos seletivamente aos elementos nos documentos HTML. Por exemplo, para selecionar <strong>todos</strong> os elementos do <strong>parágrafo</strong> numa página HTML e transformar o texto dentro deles em vermelho, iria escrever este CSS:</p>
-
-<pre class="brush: css notranslate">p {
-  color: red;
-}</pre>
-
-<p>Vamos tentar: copie e cole estas três linhas de CSS num novo ficheiro do editor de texto, depois grave com o nome <code>style.css</code> na diretoria <code>styles</code>.</p>
-
-<p>Mas ainda é preciso aplicar este CSS ao seu documento HTML. Se não, os estilos CSS não vão afetar a forma como o seu navegador apresenta o documento HTML. (Se não tem seguido o nosso projeto, leia <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a> e <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a> para saber o que fazer primeiro)</p>
-
-<ol>
- <li>Abra o seu ficheiro <code>index.html</code> e cole a linha seguinte no cabeçalho (isto é, entre as marcas <code>&lt;head&gt;</code> e <code>&lt;/head&gt;</code>):
-
-  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
- </li>
- <li>Guarde o ficheiro <code>index.html</code> e aceda-lhe no seu navegador. Deverá ver algo deste género:</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;">O texto dos seus parágrafos ficou vermelho. Parabéns! Acabou de escrever com sucesso o seu primeiro CSS.</p>
-
-<h3 id="Anatomia_de_um_conjunto_de_regras_de_CSS">Anatomia de um conjunto de regras de CSS</h3>
-
-<p>Vejamos o CSS acima com um pouco mais de detalhe:</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>A esta estrutura dá-se o nome <strong>conjunto de regras </strong>(geralmente, "regra" para abreviar). Repare nos nomes de cada parte:</p>
-
-<dl>
- <dt>Seletor</dt>
- <dd>Neste caso, é o nome do elemento HTML, no início do conjunto de regras. Seleciona o(s) elemento(s) a que vai ser aplicado o estilo (neste caso, todos os elementos <code>p</code>). Para dar estilo a outro elemento, muda-se o seletor.</dd>
- <dt>Declaração</dt>
- <dd>Trata-se de uma única regra, como  <code>color: red;</code>, que especifica as <strong>propriedades </strong>que se pretendem modificar no elemento.</dd>
- <dt>Propriedades</dt>
- <dd>São as formas como se pode estilizar o elemento HTML (Neste caso, <code>color</code> é uma propriedade dos elementos {{htmlelement("p")}}). Em CSS, pode escolher que propriedades pretende modificar na regra.</dd>
- <dt>Valor da propriedade</dt>
- <dd>À direita da propriedade, depois dos dois pontos (<code>:</code>), temos o <strong>valor da propriedade</strong>, que escolhe uma das possíveis aparências que a propriedade pode indicar (há muitos mais valores para <code>color</code> além de <code>red</code>).</dd>
-</dl>
-
-<p>Repare em outros aspetos importantes da sintaxe:</p>
-
-<ul>
- <li>Cada conjunto de regras (além do seletor) tem que estar entre chavetas (<code>{}</code>).</li>
- <li>Dentro de cada declaração, utilize dois pontos (<code>:</code>) para separar a propriedade dos seus valores.</li>
- <li>Dentro de cada conjunto de regras, utilize ponto e vírgula (<code>;</code>) para separar cada declaração da próxima.</li>
-</ul>
-
-<p>Para modificar múltiplas propriedades, basta separá-las com o ponto e vírgula, assim:</p>
-
-<pre class="brush: css notranslate">p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}</pre>
-
-<h3 id="Selecionar_múltiplos_elementos">Selecionar múltiplos elementos</h3>
-
-<p>Também pode selecionar vários elementos e aplicar um conjunto de regras único para todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo:</p>
-
-<pre class="brush: css notranslate">p, li, h1 {
-  color: red;
-}</pre>
-
-<h3 id="Diferentes_tipos_de_seletor">Diferentes tipos de seletor</h3>
-
-<p>Há muitos tipos diferentes de seletor. Por cima, apenas olhámos para <strong>seletores de elementos</strong>, que selecionam todos os elementos de determinado tipo no documento HTML a que são aplicados. Mas podemos fazer seleções mais específicas. Em baixo, 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 é que este seleciona</th>
-   <th scope="col">Exemplo</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Seletor de elemento (também chamado seletor de etiqueta ou tipo)</td>
-   <td>Todos os elementos HTML do tipo especificado.</td>
-   <td><code>p</code><br>
-    Seleciona todos os elementos <code>&lt;p&gt;</code></td>
-  </tr>
-  <tr>
-   <td>Seletor de ID </td>
-   <td>O elemento da página com o ID especificado (numa página HTML, só pode haver um elemento para cada ID e vice-versa).</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> (não devem existir ambos na mesma página)</td>
-  </tr>
-  <tr>
-   <td>Seletor de classe</td>
-   <td>Seleciona o(s) elementos(s) da página com a classe especificada (é possível haver elementos diferentes com a mesma classe).</td>
-   <td><code>.my-class</code><br>
-    Seleciona <code>&lt;p class="my-class"&gt;</code> e também <code>&lt;a class="my-class"&gt;</code></td>
-  </tr>
-  <tr>
-   <td>Seletor de atributo</td>
-   <td>Seleciona o(s) elementos(s) que tenham o atributo dado.</td>
-   <td><code>img[src]</code><br>
-    Seleciona <code>&lt;img src="myimage.png"&gt;</code> mas não seleciona <code>&lt;img&gt;</code></td>
-  </tr>
-  <tr>
-   <td>Seletor de Pseudo-classe</td>
-   <td>O(s) elemento(s) especificado(s), mas só quando estiverem no estado indicado. Ex: quando se tem cursor do rato sobre eles.</td>
-   <td><code>a:hover</code><br>
-    Seleciona <code>&lt;a&gt;</code>, mas só quando o cursor está sobre o <em>link</em>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Existem muitos mais seletores para explorar, e pode encontrar uma lista mais detalhada no nosso <a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS/Seletores">Guia de seletores</a>.</p>
-
-<h2 id="Fonte_e_texto">Fonte e texto</h2>
-
-<p>Agora que explorámos as bases do CSS, vamos acrescentar regras e informação ao nosso ficheiro <code>style.css</code> para que o exemplo tenha boa apresentação.</p>
-
-<ol>
- <li>Primeiro, volte atrás e encontre o <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site#Tipo_de_letra">output de Google Fonts</a> que guardou num lugar seguro. Acrescente o elemento {{htmlelement("link")}} no cabeçalho do <code>index.html</code> (entre etiquetas <code>&lt;head&gt;</code> e <code>&lt;/head&gt;</code>).
-
-  <pre class="brush: html notranslate">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
- </li>
- <li>De seguida, apague a regra que tinha no ficheiro <code>style.css</code>. Foi um bom teste, mas a cor vermelha não ficou muito bem.</li>
- <li>Insira as linhas que se seguem, substituindo a linha de substituição pela linha <code>font-family</code> que obteve no site Google Fonts. (<code>font-family</code> indica o nome do tipo de letra). Esta regra estabelece um tamanho e tipo de letra global, em toda a página, já que o elemento <code>&lt;html&gt;</code> é o elemento raiz e todos os elementos aninhados herdam <code>font-size</code> e <code>font-family</code>:
-  <pre class="brush: css notranslate">html {
-  font-size: 10px; /* px significa 'píxeis': o tamnho da letra base é duma altura de 10 píxeis */
-  font-family: placeholder: aqui deve aparecero resto do output do Google fonts
-}</pre>
-
-  <div class="note">
-  <p><strong>Nota</strong>: num documento CSS, tudo o que esteja entre <code>/*</code> e <code>*/</code> é um <strong>comentário de CSS</strong>, que o navegador ignora quando processa o código. Os comentários servem para escrever notas úteis sobre o que está a fazer.</p>
-  </div>
- </li>
- <li>Agora estabelecemos o tamanho da letra para elementos textuais no corpo do HTML: ({{htmlelement("h1")}}, {{htmlelement("li")}}, e {{htmlelement("p")}}). Também vamos centrar o texto dos nossos títulos e especificar altura da linha de texto e espaçamento entre letras no corpo para o tornar mais legível:
-  <pre class="brush: css notranslate">h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}</pre>
- </li>
-</ol>
-
-<p>Pode ajustar os valores de <code>px</code> conforme achar que fica melhor, mas em geral, o <em>design </em>deve ter esta aparência:</p>
-
-<p><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: 1020px; margin: 0px auto; width: 921px;"></p>
-
-<h2 id="Caixas_caixas_é_tudo_sobre_caixas">Caixas, caixas, é tudo sobre caixas</h2>
-
-<p>Quando escreve CSS, poderá notar que a maior parte do esforço é referente a caixas — configurar o seu tamanho, cor, posição, etc. Pode pensar na maioria dos elementos de HTML da sua página como caixas colocadas umas sobre a 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>Sem surpresa, a disposição de elementos em CSS assenta principalmente num <em>modelo de caixa</em><em>. </em>Cada um dos blocos que ocupa espaço na sua página tem propriedades como:</p>
-
-<ul>
- <li><code>padding</code> (preenchimento) — espaço em volta do elemento (ex: em volta do texto de um parágrafo)</li>
- <li><code>border</code> (contorno) — a linha que fica em torno do preenchimento</li>
- <li><code>margin</code> (margem) — espaço exterior em torno do 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>Nesta secção também vamos usar:</p>
-
-<ul>
- <li><code>width</code> — largura do elemento</li>
- <li><code>background-color</code> — cor de fundo que fica atrás do conteúdo e preenchimento do elemento</li>
- <li><code>color</code> — a cor do conteúdo (geralmente o conteúdo é texto)</li>
- <li><code>text-shadow</code> — sombreado do texto de um elemento</li>
- <li><code>display</code><span> </span>—<span> modo de apresentação do elemento (não se preocupe ainda com detalhes)</span></li>
-</ul>
-
-<p>Portanto, vamos começar e acrescentar algum CSS à nossa página! Acrescente as novas regras no fim do ficheiro e não tenha medo de mudar os valores para ver como fica.</p>
-
-<h3 id="Alterar_a_cor_da_página">Alterar a cor da página</h3>
-
-<pre class="brush: css notranslate">html {
-  background-color: #00539F;
-}</pre>
-
-<p>Esta regra estabelece uma cor de fundo na página inteira. Mude o código de cor para aquele que escolheu quando <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site#Cor_do_tema">planeou o seu site</a>.</p>
-
-<h3 id="Ordenar_o_corpo">Ordenar o corpo</h3>
-
-<pre class="brush: css notranslate">body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}</pre>
-
-<p>Agora o elemento {{htmlelement("body")}}. Há várias declarações, então vamos ver uma de cada vez:</p>
-
-<ul>
- <li><code>width: 600px;</code> — Faz com que a largura seja sempre 600 píxeis.</li>
- <li><code>margin: 0 auto;</code> — Quando se dá dois valores a <code>margin</code> ou <code>padding</code>, o primeiro afeta o espaço por cima <strong>e</strong> por baixo do elemento (neste caso, <code>0</code>), e o segundo o espaço à esquerda <strong>e</strong> à direita (<code>auto</code> é um valor especial que divide o espaço existente de forma igual entre a esquerda e a direita). Também pode utilizar um, três ou quatro valores, conforme a documentação da <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">sintaxe de <em>margin</em></a>.</li>
- <li><code>background-color: #FF9500;</code> — como já vimos, estabelece a cor de fundo. Esta é uma tonalidade vermelho alaranjado para o corpo, em vez do azul escuro do elemento {{htmlelement("html")}}, mas esteja à vontade para experimentar outras cores.</li>
- <li><code>padding: 0 20px 20px 20px;</code> — temos quatro valores nesta propriedade, para deixar bastante espaço em volta do conteúdo. Desta vez, fazemos com que não haja preenchimento por cima do elemento e 20 píxeis à esquerda, à direita e por baixo. Os valores estabelecem, por esta ordem, o preenchimento por cima, à direita, por baixo e à esquerda. Tal como a <code>margin</code>, pode usar um, dois ou três valores, conforme a documentação da <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Syntax">sintaxe de <em>padding</em></a>.</li>
- <li><code>border: 5px solid black;</code> — simplesmente, cria um contorno de todos os lados do elemento, com cor preta, a traço cheio (contínuo) e espessura de 5 píxeis.</li>
-</ul>
-
-<h3 id="Posicionar_e_estilizar_o_título_da_nossa_página_principal">Posicionar e estilizar o título da nossa página principal</h3>
-
-<pre class="brush: css notranslate">h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}</pre>
-
-<p>Deve ter notado que há espaço em branco horrível no topo do conteúdo da página. Isto acontece porque o navegador aplica <strong>estilo por omissão </strong>ao elemento {{htmlelement("h1")}} (entre outros), mesmo que não se tenha aplicado qualquer CSS! Embora isso possa parecer má ideia, na prática até uma página sem folha de estilos tem que ter alguma legibilidade. Para nos livrarmos deste espaço, colocamos <code>margin: 0;</code>.</p>
-
-<p>De seguida, colocámos o preenchimento por cima e por baixo a 20 píxeis, e demos ao texto a mesma cor que a cor de fundo do elemento {{htmlelement("html")}}.</p>
-
-<p>Utilizámos uma propriedade interessante, <code>text-shadow</code>, que aplica sombreado ao texto de um elemento. Estes são os quatro valores da mesma:</p>
-
-<ul>
- <li>O primeiro valor em píxeisestabelece a <strong>distância </strong><strong>horizontal</strong> entre a sombra e o texto, ou seja, quanto ela se desvia para a direita. Um valor negativo desvia para a esquerda.</li>
- <li>O segundo valor em píxeis estabelece a <strong>distância vertical</strong> entre a sombra e o texto, ou quanto ela se desvia para baixo. Um valor negativo desvia para cima.</li>
- <li>O terceiro valor em píxeis é o <strong>raio de desfoque</strong> da sombra — quanto maior o valor, mais a sombra ficará esbatida.</li>
- <li>O quarto valor é a cor da sombra.</li>
-</ul>
-
-<p>Novamente, tente experimentar os valores para ver como fica!</p>
-
-<h3 id="Centrar_a_imagem">Centrar a imagem</h3>
-
-<pre class="brush: css notranslate">img {
-  display: block;
-  margin: 0 auto;
-}</pre>
-
-<p>Por fim, vamos centrar a imagem para ficar melhor. Utilizámos o truque de colocar <code>margin: 0 auto</code> como fizemos com o corpo, mas temos que fazer outra coisa. O elemento {{htmlelement("body")}} está ao <strong>nível de bloco</strong>, ou seja, ocupa toda a largura da página e podem ser-lhe aplicados valores de margem, e outros valores de espaçamento. Por outro lado, as imagens são elemento <strong>em linha</strong>, a que não se podem aplicar estes valores. Então, para a margem ser aplicada à imagem, temos que lhe atribuir comportamento ao nível do bloco com <code>display: block;</code>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Estas instruções assumem que está a usar uma imagem mais pequena que a largura do corpo (600 píxeis). Se for maior, vai transbordar do corpo e ocupar espaço no resto da página. Para retificar isto, pode 1) reduzir a largura da imagem com um programa de <a href="https://pt.wikipedia.org/wiki/Editor_gráfico">edição gŕafica</a>, ou 2) reduzir a imagem com CSS utilizando a propriedade {{cssxref("width")}} no elemento <code>&lt;img&gt;</code> com um valor mais pequeno, como <code>400 px;</code>.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota</strong>: não se preocupe se ainda não entende <code>display: block;</code> e a distinção entre bloco e em linha (<em>block-level/inline</em>). Irá perceber à medida que estuda o CSS com mais profundidade. Pode descobrir mais sobre os diferentes valores de <em>display</em> na <a href="/pt-PT/docs/Web/CSS/display">página de referência de display</a>.</p>
-</div>
-
-<h2 id="Conclusão">Conclusão</h2>
-
-<p>Se seguiu as instruções nesta página, a sua página deve ter este aspeto (e pode ver <a href="http://mdn.github.io/beginner-html-site-styled/">a 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 ficou preso, pode sempre comparar o seu trabalho com <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">o exemplo terminado no GitHub</a>.</p>
-
-<p>Aqui, mal tocámos na superfície do CSS. Para saber mais, consulte o tópico de <a href="https://developer.mozilla.org/en-US/Learn/CSS">Aprender CSS</a>.</p>
-
-<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web")}}</p>
-
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
- <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site da Web?</a></li>
- <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
- <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">HTML - Essencial</a></li>
- <li><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
- <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
- <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></li>
- <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a></li>
-</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html
deleted file mode 100644
index 0c168838bb..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: Lidar com ficheiros
-slug: Learn/Getting_started_with_the_web/Dealing_with_files
-tags:
-  - Beginner
-  - Ficheiros
-  - Guía
-  - HTML
-  - Programação Scripting
-  - l10n:priority
-  - site da Web
-  - teoria
-translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
-original_slug: Learn/Comecar_com_a_Web/Lidar_com_ficheiros
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Apresentacao_do_meu_site", "Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web")}}</div>
-
-<div class="summary">
-<p>Um site da internet<em> </em>consiste em muitos ficheiros: conteúdo de texto, código, folhas de estilo, conteúdo de multimédia, e assim por diante. Enquanto estiver a criar o site, tem que reunir esses ficheiros numa estrutura conveniente no seu computador local, certificar-se que os mesmos podem comunicar uns com os outros e preparar a apresentação do seu conteúdo, antes de eventualmente <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">enviar os ficheiros para um servidor</a>. Este artigo, <strong>Lidar com ficheiros</strong>, apresenta algumas questões de que deverá estar ciente para poder configurar uma estrutura de ficheiros conveniente para o seu site.</p>
-</div>
-
-<h2 id="Onde_deve_ficar_o_seu_site_no_seu_computador">Onde deve ficar o seu site no seu computador ?</h2>
-
-<p>Quando estiver a trabalhar num site localmente, no seu computador, deve manter todos os ficheiros relacionados numa única pasta que seja o reflexo da estrutura de ficheiros do site no servidor. Esta pasta pode ficar onde quiser, mas deve colocá-la num local de fácil acesso: talvez no seu Ambiente de Trabalho, a pasta do seu utilizador, ou a raiz do seu disco rígido.</p>
-
-<ol>
- <li>Escolha um sítio para guardar os seus projetos relacionados com sites. Lá, crie uma pasta com o nome <code>projetos-web</code> (ou um nome semelhante). É aqui que vão morar todos os seus projetos de sites.</li>
- <li>Dentro desta pasta, crie outra pasta para guardar o seu primeiro site. Pode-lhe chamar <code>site-de-teste</code> (ou algo mais criativo).</li>
-</ol>
-
-<h2 id="Um_aparte_sobre_nomes_de_pastas_e_ficheiros">Um aparte sobre nomes de pastas e ficheiros</h2>
-
-<p>Ao longo deste artigo poderá notar que os nomes que são dados às pastas e aos ficheiros estão todos em minúsculas e sem espaços. Isto porque:</p>
-
-<ol>
- <li>Muitos computadores, particularmente servidores da internet, são sensíveis a maiúsculas. Por exemplo, se criar um ficheiro de imagem com o nome <code>site-de-teste/MinhaImagem.jpg</code> e depois noutro ficheiro tentar referir-se a ela com o nome <code>site-de-teste/minhaimagem.jpg</code>, pode não resultar.</li>
- <li>Navegadores, servidores, e linguagens de programação não tratam os espaços da mesma forma. Por exemplo, se usar espaços no nome do ficheiro, alguns sistemas podem tratá-lo como dois nomes separados. Alguns servidores substituem os espaços por "%20" (código de carácter de espaços em URI), e assim arruínam os seus <em>links</em>.</li>
-</ol>
-
-<p>Por essas razões, é melhor habituar-se a escrever os nomes de pastas e ficheiros sem espaços e com palavras separadas por hífen, pelo menos até saber o que está a fazer. Desta forma, irá encontrar menos problemas mais tarde.</p>
-
-<p>Inicialmente, é melhor separar palavras com hífen em vez de <em>underscore</em>: <code>meu-ficheiro.html</code> em vez de <code>meu_ficheiro.html</code>, pois o motor de pesquisa Google interpreta o hífen como separador de palavras, mas não o <em>underscore</em>.</p>
-
-<h2 id="Que_estrutura_deverá_ter_o_seu_site">Que estrutura deverá ter o seu site?</h2>
-
-<p>De seguida, vamos discutir a estrutura que deve ter o site de teste. As coisas mais comuns que temos em qualquer site são um ficheiro índice e pastas que organizam os ficheiros por tipo: imagens, folhas de estilo e scripts. Vamos criá-las agora:</p>
-
-<ol>
- <li><code><strong>index.html</strong></code>: Este ficheiro geralmente descreve o conteúdo da sua página principal, ou seja, o texto e imagens que as pessoas veem quando visitam o site pela primeira vez. Com um editor de texto, crie um ficheiro <code>index.html</code> e guarde-o dentro da pasta <code>site-de-teste</code>.</li>
- <li><strong>Pasta <code>images</code></strong>: Esta pasta irá conter todas as imagens do seu site. Crie um pasta com este nome dentro da pasta <code>site-de-teste</code>.</li>
- <li><strong>Pasta <code>styles</code></strong>: Esta pasta contém o código CSS que dá estilo ao conteúdo (por exemplo, cor do texto e do fundo). Crie-a dentro da pasta <code>site-de-teste</code>.</li>
- <li><strong>Pasta <code>scripts</code></strong>: Esta pasta contém o código JavaScript que dá interatividade ao seu site (ex: botões que carregam dados quando premidos). Crie-adentro da pasta <code>site-de-teste</code>.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: Em computadores com Windows, pode ter dificuldade em ver nomes dos ficheiros, porque no Windows tem uma opção, ligada por omissão, para <strong>Esconder extensões de ficheiros conhecidas</strong>. Em geral, pode desligá-la no Explorador do Windows, selecionar <strong>Opções de pastas...</strong>, desmarcar a opção em questão, na caixa de seleção, e clicar <strong>OK</strong>. Para mais informações sobre a sua versão específica de Windows, faça uma pesquisa na internet. </p>
-</div>
-
-<h2 id="Caminhos_de_ficheiros">Caminhos de ficheiros</h2>
-
-<p>Para permitir a comunicação entre ficheiros, é necessário estabelecer os caminhos entre eles. Para demonstrar, vamos inserir algum HTML no ficheiro <code>index.html</code> que mostra a imagem que escolheu no artigo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Qual será a aparência do meu site?</a></p>
-
-<ol>
- <li>Copie a imagem escolhida para a pasta <code>images</code>.</li>
- <li>Abra o ficheiro <code>index.html</code>, e copie o código exatamente como se mostra em baixo. Para já não se preocupe com o que significa — vamos olhar para estas estruturas mais tarde.
-  <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;img src="" alt="My test image"&gt;
-  &lt;/body&gt;
-&lt;/html&gt; </pre>
- </li>
- <li>A linha <code>&lt;img src="" alt="My test image"&gt;</code> é o código HTML que insere uma imagem na página. É necessário dizer, neste trecho de código HTML, onde está a imagem. A mesma está dentro da diretoria <em>images</em>, a qual está na mesma diretoria que <code>index.html</code>. Para descer na estrutura de ficheiros, de <code>index.html</code> para a imagem, o caminho é <code>images/nome-da-imagem</code>. Por exemplo, se a mesma e chamasse <code>firefox-icon.png</code>, o caminho seria <code>images/firefox-icon.png</code>.</li>
- <li>Insira este caminho no código HTML, entre as aspas neste trecho de código: <code>src=""</code>.</li>
- <li>Guarde o ficheiro HTML, depois carregue-o no seu navegador (com duplo clique). Deve conseguir ver o novo site, com a 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 sobre caminhos de ficheiros:</p>
-
-<ul>
- <li>Para referir a um ficheiro na mesma pasta que o ficheiro HTML onde a mesma é referida, utilize o nome desse ficheiro. Ex: <code>minha-imagem.jpg</code>.</li>
- <li>Para referir a um ficheiro numa sub-pasta, escreva o nome dessa sub-pasta antes do nome do ficheiro, seguido de uma barra. Ex: <code>sub-pasta/minha-imagem.jpg</code>.</li>
- <li>Para referir um ficheiro numa diretoria <strong>acima</strong> do ficheiro HTML que a refere, escreva dois pontos finais e uma barra. Por exemplo, se <code>index.html</code> estiver numa sub-pasta, que por sua vez está localizada em <code>site-de-teste</code>; e o ficheiro <code>minha-imagem.jpg</code> estiver na pasta <code>site-de-teste</code>, pode referir <code>minha-imagem.jpg</code> (a partir de <code>index.html</code>) com <code>../my-image.jpg</code>.</li>
- <li>Pode combiná-los como quiser. Por exemplo, <code>../subdiretoria/outra-subdiretoria/minha-imagem.jpg</code>.</li>
-</ul>
-
-<p>Por agora é tudo o que precisa de saber.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: O Windows usa barras invertidas, como no caminho <code>C:\windows</code>. Mas em HTML, isso é irrelevante — mesmo que esteja a construir o site num sistema Windows, pode usar a barra normal, <kbd>/</kbd>.</p>
-</div>
-
-<h2 id="Que_mais_deverá_ser_feito">Que mais deverá ser feito?</h2>
-
-<p>Por agora é tudo. A sua estrutura deverá ser como esta:</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;"></p>
-
-<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Apresentacao_do_meu_site", "Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web")}}</p>
-
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
- <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site?</a></li>
- <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
- <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
- <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
- <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
- <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site</a></li>
- <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a web</a></li>
-</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html
deleted file mode 100644
index 6eaf47b5fc..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Como funciona a Web
-slug: Learn/Getting_started_with_the_web/How_the_Web_works
-tags:
-  - Aprender
-  - Beginner
-  - Cliente
-  - DNS
-  - HTTP
-  - IP
-  - Infraestrutura
-  - Servidor
-  - TCP
-  - l10n:priority
-translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
-original_slug: Learn/Comecar_com_a_Web/Como_funciona_a_Web
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web", "Learn/Comecar_com_a_Web")}}</div>
-
-<div class="summary">
-<p>Como a Web funciona, fornece uma visualização simplificada do que acontece quando visualiza uma página da Web num navegador da Web no seu computador ou dispositivo móvel.</p>
-</div>
-
-<p>Esta teoria não é essencial para escrever o código da Web em curto prazo, mas em pouco tempo, irá realmente começar a beneficiar da compreensão do que está a acontecer em segundo plano.</p>
-
-<h2 id="Servidores_e_clientes">Servidores e clientes</h2>
-
-<p>Os computadores ligados à Web são chamados de clientes e servidores. Um diagrama simplificado de como eles interagem, parece-se como isto:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
-
-<ul>
- <li>Os clientes são os dispositivos típicos ligados à Internet dos utilizadores da Web (por exemplo, o seu computador ligado à sua <em>Wi-Fi</em> ou seu dispositivo móvel ligado à sua rede móvel) e o <em>software </em>de acesso à Internet disponível nesses dispositivos (geralmente um navegador da Web, tais como Firefox ou Chrome) .</li>
- <li>Os servidores são computadores que armazenam os sites, páginas ou aplicações da Web. Quando um dispositivo cliente pretende aceder a uma página da Web, uma cópia da página da Web é transferida do servidor para a máquina do cliente para ser exibida no navegador da Web do utilizador.</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. Há muitas outras partes envolvidas, e iremos descrevê-las em baixo.</p>
-
-<p>Por enquanto, vamos imaginar que a Web é uma estrada. Num extremo da estrada está o cliente, que é como a sua casa. Na outra extremidade da estrada está o servidor, que é uma loja na qual deseja 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, nós também precisamos cumprimentar:</p>
-
-<ul>
- <li><strong>A sua conexão com a internet</strong>: Permite que envie e receba dados na rede. Ela é basicamente como a rua entre a sua casa e a loja.</li>
- <li><strong>TCP/IP</strong>: Protocolo de Controlo de Transmissão (Transmission Control Protocol, em inglês) e o Protocolo da Internet (Internet Protocol, em inglês) são os protocolos de comunicação que definem como os dados devem viajar através da rede. Eles são como os mecanismos de transporte que permitem que faça um pedido, vá para a loja e compre as suas mercadorias. No nosso exemplo, eles são como um carro ou uma bicicleta (ou qualquer outra coisa que possa usar para se locomover).</li>
- <li><strong>DNS</strong>: Servidores de Nome de Domínio (Domain Name Servers, em inglês) são como um livro de endereços (ou uma agenda eletrônica) de websites. Quando digita o endereço de um site no seu navegador, ele espera o DNS encontrar o endereço real da página antes que ele possa recuperar o site para o utilizador. O navegador precisa encontrar em qual servidor o site se encontra, para que assim ele possa enviar mensagens HTTP para o lugar certo (veja abaixo).  Esse processo é como o de procurar pelo endereço da loja para que possa ir até lá.</li>
- <li><strong>HTTP</strong>: <em>Hypertext Transfer Protocol</em> é um {{Glossary("Protocol", "protocolo")}} de aplicação que define a linguagem usada para clientes e servidores comunicarem. Isto é igual à linguagem usada para comprar os bens.</li>
- <li><strong>Ficheiros componentes</strong>: Um site é feito a partir de vários ficheiros, que são como as diferentes partes dos bens que compra da loja. Estes ficheiros pertencem a duas categorias:
-  <ul>
-   <li><strong>Ficheiros de código</strong>: Websites são principalmente construidos com HTML, CSS e JavaScript, ficara a conhecer mais tecnologias mais logo.</li>
-   <li><strong>Ativos</strong>: Isto é o nome para o resto que constitui um site, como imagens, música, vídeo, documentos Word e PDFs.</li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="Então_o_que_acontece_exatamente">Então, o que acontece exatamente?</h2>
-
-<p>Quando escreve um endereço web no seu browser (para a nossa analogia isso é como caminhar até à loja):</p>
-
-<ol>
- <li>O navegador vai para o servidor DNS, e encontra o endereço real do servidor onde o sítio <em>web</em> vive (encontra o endereço da loja).</li>
- <li>O navegador envia uma mensagem de pedido HTTP ao servidor, pedindo-lhe que envie uma cópia do <em>website</em> ao cliente (vai à loja e encomenda a sua mercadoria). Esta mensagem e todos os outros dados enviados entre o cliente e o servidor, é enviada através da sua ligação à Internet utilizando TCP/IP.</li>
- <li>Desde que o servidor aprove o pedido do cliente, o servidor envia ao cliente uma mensagem "200 OK", o que significa "Claro que pode olhar para esse <em>website</em>! Aqui está", e depois começa a enviar os ficheiros do sítio <em>web</em> para o navegador como uma série de pequenos pedaços chamados <em>packets</em> / pacotes de dados (a loja dá-lhe os seus bens, e você trá-los de volta para a sua casa).</li>
- <li>O navegador monta os pequenos pedaços num <em>website</em> completo e mostra-lho (os bens chegam à sua porta — coisas novas e brilhantes, espetacular!).</li>
-</ol>
-
-<h2 id="DNS_explicado">DNS explicado</h2>
-
-<p>Os verdadeiros endereços <em>web</em> não são os nomes agradáveis e memoráveis que escreve na sua barra de endereços para encontrar os seus sítios <em>web</em> favoritos. São números especiais que têm este aspeto: 63.245.215.20.</p>
-
-<p>Isto chama-se um {{Glossary("IP Address", "Endereço IP")}}, e representa uma localidade única na <em>web</em>. No entanto, não é muito fácil de lembrar, pois não? É por isso que foram inventados os Servidores de Nome de Domínio. Estes são servidores especiais que correspondem a um endereço <em>web</em> que digita no seu browser (como "mozilla.org") ao endereço real (IP) do website.</p>
-
-<p>Os <em>websites</em> podem ser acedidos diretamente através dos seus endereços IP. Pode encontrar o endereço IP de um sítio <em>web</em> digitando o seu domínio numa ferramenta como o <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
-
-<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
-
-<h2 id="Packets_explicados"><em>Packets </em>explicados</h2>
-
-<p>Anteriormente utilizámos o termo "packets" para descrever o formato em que os dados são enviados do servidor para o cliente. O que é que queremos dizer aqui? Basicamente, quando os dados são enviados através da web, são enviados como milhares de pequenos pedaços, para que muitos utilizadores da web possam descarregar o mesmo website ao mesmo tempo. Se os sítios web fossem enviados como um único grande pedaço, apenas um utilizador poderia descarregar um de cada vez, o que obviamente tornaria a web muito ineficiente e não muito divertida de utilizar.</p>
-
-<h2 id="Ver_também">Ver também</h2>
-
-<ul>
- <li><a href="/pt-PT/docs/Learn/Questoes_comuns/Como_funciona_a_Internet">Como funciona a Internet</a></li>
- <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
- <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
- <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
-</ul>
-
-<h2 id="Créditos">Créditos</h2>
-
-<p>Street photo: <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/Comecar_com_a_Web/Publicar_o_seu_site_da_Web", "Learn/Comecar_com_a_Web")}}</p>
-
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
- <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site?</a></li>
- <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
- <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
- <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
- <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
- <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site</a></li>
- <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a web</a></li>
-</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html b/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html
deleted file mode 100644
index bad6619e6c..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html
+++ /dev/null
@@ -1,238 +0,0 @@
----
-title: HTML - Essencial
-slug: Learn/Getting_started_with_the_web/HTML_basics
-tags:
-  - Aprender
-  - CodingScripting
-  - HTML
-  - Principiante
-  - Web
-  - l10n:priority
-translation_of: Learn/Getting_started_with_the_web/HTML_basics
-original_slug: Learn/Comecar_com_a_Web/HTML_basicos
----
-<div>
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Lidar_com_ficheiros", "Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web")}}</div>
-
-<div class="summary">
-<p>HTML (Linguagem de Marcação de Hipertexto) é o código que é utilizado para estruturar uma página da <em>web</em> e o seu conteúdo. Por exemplo, o conteúdo poderá ser estruturado dentro de um conjunto de parágrafos, uma lista de pontos com marcadores, ou utilizando imagens e tabelas de dados. Como o título sugere, este artigo irá dar-lhe uma compreensão básica do HTML e as suas funções.</p>
-</div>
-
-<h2 id="Então_o_que_é_realmente_o_HTML">Então, o que é realmente o HTML?</h2>
-
-<p>HTML não é uma linguagem de programação; é uma <em>linguagem de marcação </em>que define a estrutura do seu conteúdo. HTML consiste numa série de <strong>{{Glossary("element", "elementos")}}</strong>, que se utilizam para envolver, ou cercar, diferentes partes do conteúdo, e assim fazê-lo ter uma determinada aparência ou agir de determinada maneira. As {{Glossary("tag", "etiquetas")}} envolventes podem interligar as palavras ou imagens para outro lugar, colocar palavras em itálico, tornar a letra maior ou menor, e assim por diante. Por exemplo, veja a seguinte linha de conteúdo:</p>
-
-<pre class="notranslate">O meu gato é muito rabugento</pre>
-
-<p>Caso queiramos que a linha esteja separada de outras, podemos especificar que é um parágrafo envolvendo-a em etiquetas de parágrafo:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;O meu gato é muito rabugento&lt;/p&gt;</pre>
-
-<h3 id="Anatomia_de_um_elemento_HTML">Anatomia de um elemento HTML</h3>
-
-<p>Vamos explorar este elemento de 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 nosso elemento são:</p>
-
-<ol>
- <li><strong>A etiqueta de abertura:</strong> Consiste no nome do elemento (neste caso, p), envolto em <strong>parênteses angulares</strong>. Isto afirma onde começa o elemento, ou onde começa a ter efeito — neste caso, onde começa o parágrafo.</li>
- <li><strong>A etiqueta de fecho:</strong> É igual à de abertura, mas tem uma barra antes do nome do elemento. Isto afirma onde acaba o elemento — neste caso, onde fica o fim do parágrafo. Omitir a etiqueta de fecho é um erro de principiante comum e pode levar a resultados estranhos.</li>
- <li><strong>O conteúdo:</strong> É o conteúdo do elemento, que neste caso é só texto.</li>
- <li><strong>O elemento:</strong> A etiqueta de abertura, mais a etiqueta de fecho, mais o conteúdo, é igual ao elemento.</li>
-</ol>
-
-<p>Elementos também podem ter atributos, que se 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 não quer que apareça no conteúdo. Aqui, <code>class</code> é o <em>nome </em>do atributo, e <code>editor-note</code> é o <em>valor</em> do atributo. O atributo <code>class</code> permite identificar o elemento como sendo parte de um grupo, que pode ser alvo de regras CSS e outras coisas.</p>
-
-<p>Um atributo deverá ter sempre:</p>
-
-<ol>
- <li>Um espaço entre si o nome do elemento (ou do atributo anterior, se esse elemento já possuir um ou mais atributos).</li>
- <li>O nome do atributo, seguido de um sinal de igual.</li>
- <li>O valor do atributo, envolto em abre e fecha aspas.</li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Nota:</strong> Valores de atributos que não possuam espaço em branco ASCII (ou nenhum dos caracteres <code>"</code> <code>'</code> <code>=</code> <code>&lt;</code> <code>&gt;</code>), mas recomendado que todos os valores de atributos sejam envoltos em aspas, para tornar o código mais consistente e compreensível.</p>
-</div>
-
-<h3 id="Aninhar_elementos">Aninhar elementos</h3>
-
-<p>Também pode colocar elementos dentro de outros elementos  — chama-se a isto <strong>aninhar</strong>. Se quisermos declarar que o nosso gato é <strong>muito</strong> rabugento, podemos cercar a palavra "muito" com um elemento {{htmlelement("strong")}}, que significa que a palavra tem ênfase forte:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;O meu gato é &lt;strong&gt;muito&lt;/strong&gt; rabugento.&lt;/p&gt;</pre>
-
-<p>No entanto, tem que se certificar que os seus elementos estão devidamente aninhados: no exemplo em cima, abrimos o elemento {{htmlelement("p")}} primeiro, e depois o elemento {{htmlelement("strong")}} , portanto temos que fechar o elemento {{htmlelement("strong")}} primeiro, e só depois o {{htmlelement("p")}}. A linha seguinte está errada:</p>
-
-<pre class="example-bad brush: html notranslate">&lt;p&gt;O meu gato é &lt;strong&gt;muito rabugento.&lt;/p&gt;&lt;/strong&gt;</pre>
-
-<p>Os elementos têm que abrir e fechar corretamente para que seja claro se estão dentro ou fora uns dos outros. Se ficarem sobrepostos como se mostrou em cima, o seu navegador vai tentar adivinhar o que quis dizer, e pode obter resultados inesperados. Então, não faça isso!</p>
-
-<h3 id="Elementos_vazios">Elementos vazios</h3>
-
-<p>Alguns elementos não têm conteúdo, aos quais chamamos <strong>elementos vazios</strong>. Veja o elemento {{htmlelement("img")}} que já temos no nosso HTML:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
-
-<p>O mesmo contém dois atributos, mas não há etiqueta de fecho, <code>&lt;/img&gt;</code>, nem conteúdo no seu interior, uma vez que um elemento de imagem não envolve conteúdo para o afetar. O seu propósito é incorporar uma imagem na página HTML, no local onde aparece.</p>
-
-<h3 id="Anatomia_de_um_documento_HTML">Anatomia de um documento HTML</h3>
-
-<p>Assim terminamos as bases de elementos HTML individuais, mas eles não são muito úteis sozinhos. Vamos agora ver como os elementos se combinam para formar uma página HTML inteira. Voltemos ao código que escrevemos no ficheiro de exemplo <code>index.html</code> (que conhecemos no artigo <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Lidar com ficheiros</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;My test page&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>Aqui temos:</p>
-</div>
-
-<ul>
- <li><code>&lt;!DOCTYPE html&gt;</code> — o tipo de documento. Na noite dos tempos, quando HTML era jovem (cerca de 1991/2), os tipos de documento agiam como ligações para um conjunto de regras que a página HTML tinha que seguir para ser considerado HTML, que podia significar verificação automática de erros e outras coisas úteis. Contudo, hoje em dia ninguém quer saber delas, e são apenas um artefacto histórico que tem que ser incluído para tudo funcionar. Para já é só isto que precisa de saber.</li>
- <li><code>&lt;html&gt;&lt;/html&gt;</code> — o elemento {{htmlelement("html")}}. Este elemento envolve o conteúdo de toda a página, e por vezes é conhecido como elemento de raiz.</li>
- <li><code>&lt;head&gt;&lt;/head&gt;</code> — o elemento {{htmlelement("head")}}. Este elemento funciona como contentor para tudo o que quer incluir na página HTML que <em>não é</em> o conteúdo mostrado aos visitantes da página. Tal inclui, por exemplo, {{Glossary("keyword", "keywords")}} e uma descrição da página que é mostrada em resultados de pesquisa, CSS para definir o estilo do conteúdo, declaração do conjunto de caracteres, e mais.</li>
- <li><code>&lt;body&gt;&lt;/body&gt;</code> — o elemento {{htmlelement("body")}}. Este elemento possui <em>todo</em> o conteúdo que quer mostrar aos utilizadores quando visitam a página, seja texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, e tudo mais.</li>
- <li><code>&lt;meta charset="utf-8"&gt;</code> — este elemento define que o documento deve utilizar conjunto de caracteres UTF-8, o qual inclui a maior parte dos caracteres da vasta maioria de linguagens humanas. Essencialmente, agora o ficheiro pode conter qualquer conteúdo textual que possa vir a pôr-lhe. Não há motivos para não colocar este elemento, e pode evitar problemas no futuro.</li>
- <li><code>&lt;title&gt;&lt;/title&gt;</code> — o elemento {{htmlelement("title")}}. Define o título da página, que é o título que aparece no separador do navegador que carregou a página. Também é usado para descrever a página quando é adicionada aos marcadores/favoritos.</li>
-</ul>
-
-<h2 id="Imagens">Imagens</h2>
-
-<p>Vamos virar a nossa atenção para o elemento {{htmlelement("img")}} outra vez:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
-
-<p>Como já referimos, incorpora uma imagem na nossa página, no local onde aparece. Para tal recorre ao atributo <code>src</code> (<em>source</em> — fonte, origem), que contém o caminho para o ficheiro de imagem.</p>
-
-<p>Também incluímos o atributo <code>alt</code> (alternativa). Neste atributo, você especifica texto descritivo para utilizadores que não conseguem ver a imagem, possivelmente porque:</p>
-
-<ol>
- <li>Têm deficiências visuais. Utilizadores com deficiências visuais significativas costumam utilizar ferramentas chamadas leitores de ecrã que lhes lê o texto alternativo.</li>
- <li>Alguma coisa correu mal e fez com que a imagem não fosse mostrada. Por exemplo, tente mudar deliberadamente o caminho no atributo <code>src</code> para torná-lo incorreto. Se guardar e recarregar a página, deve ver algo como isto em vez da imagem:</li>
-</ol>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
-
-<p>As palavras-chave sobre texto alternativo são: "texto descritivo". Ou seja, deve dar ao leitor informação suficiente para ter uma boa ideia do que a imagem transmite. Neste exemplo, o texto atual, "My test image" não é nada bom. Uma alternativa muito melhor para o nosso logótipo do Firefox seria "Logótipo do Firefox: uma raposa flamejante a rodear o mundo."</p>
-
-<p>Agora, tenta encontrar texto alternativo melhor para a tua imagem.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: saiba mais sobre acessibilidade em <a href="/pt-PT/docs/Web/Acessibilidade">MDN - Página de Acessibilidade</a>.</p>
-</div>
-
-<h2 id="Marcação_de_texto">Marcação de texto</h2>
-
-<p>Esta secção irá abranger alguns dos elementos básicos de HTML que irá utilizar para marcar texto.</p>
-
-<h3 id="Títulos">Títulos</h3>
-
-<p>Elementos de título permitem especificar que determinadas partes do seu conteúdo são títulos (ou subtítulos) do conteúdo. Da mesma forma que um livro tem um título principal, títulos de capítulos e subtítulos, um documento HTML também os pode ter. HTML contém seis níveis de títulos, {{htmlelement("h1")}}–{{htmlelement("h6")}} mas geralmente usam-se no máximo 3 ou 4:</p>
-
-<pre class="brush: html notranslate">&lt;h1&gt;Título principal&lt;/h1&gt;
-&lt;h2&gt;Título mais abrangente&lt;/h2&gt;
-&lt;h3&gt;Subtítulo&lt;/h3&gt;
-&lt;h4&gt;Sub-subtítulo&lt;/h4&gt;</pre>
-
-<p>Tente agora acrescentar um título à sua página HTML mesmo por cima do seu elemento {{htmlelement("img")}}.</p>
-
-<h3 id="Parágrafos">Parágrafos</h3>
-
-<p>Como já foi explicado, elementos {{htmlelement("p")}} servem para conter parágrafos; vai usá-los frequentemente quando marcar conteúdo textual:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Isto é um único parágrafo&lt;/p&gt;</pre>
-
-<p>Acrescente um ou mais parágrafos com a sua amostra de texto (conforme o artigo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Qual será a aparência do seu site da Web?</em></a>), diretamente por baixo do elemento {{htmlelement("img")}}.</p>
-
-<h3 id="Listas">Listas</h3>
-
-<p>Grande parte do conteúdo da web está em listas, e HTML tem elementos especiais para as mesmas. Marcar listas consiste sempre em pelo menos 2 elementos. As listas mais comuns são as listas ordenadas e não ordenadas:</p>
-
-<ol>
- <li><strong>Listas não ordenadas</strong> são listas em que a ordem dos elementos não é relevante, como uma lista de compras. São envoltas no elemento {{htmlelement("ul")}}.</li>
- <li><strong>Listas ordenadas</strong> são listas em que a ordem dos elementos é importante, como uma receita. São envoltas no elemento {{htmlelement("ol")}}.</li>
-</ol>
-
-<p>Cada artigo na lista é colocado dentro de um elemento {{htmlelement("li")}} (list item).</p>
-
-<p>Por exemplo, se quisermos transformar parte deste trecho numa lista:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Na Mozilla, somos uma comunidade global de tecnólogos, pensadores, e construtores que trabalham juntos ... &lt;/p&gt;</pre>
-
-<p>Podemos modificar a marcação desta forma:</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;que trabalham juntos ... &lt;/p&gt;</pre>
-
-<p>Tente acrescentar uma lista ordenada ou não ordenada à sua página de exemplo.</p>
-
-<h2 id="Hiperligações">Hiperligações</h2>
-
-<p>As hiperligações são muito importantes — são elas que tornam a internet na internet! Para acrescentar uma ligação, precisamos de um elemento simples — {{htmlelement("a")}} — cujo "a" abrevia "âncora". Para transformar texto no seu parágrafo numa ligação, siga estes passos:</p>
-
-<ol>
- <li>Escolha algum texto. Escolhemos o texto "Manifesto da Mozilla".</li>
- <li>Envolva o texto num elemento {{htmlelement("a")}}, assim:
-  <pre class="brush: html notranslate">&lt;a&gt;Manifesto da Mozilla&lt;/a&gt;</pre>
- </li>
- <li>Dê ao elemento {{htmlelement("a")}} um atributo <code>href</code>, assim:
-  <pre class="brush: html notranslate">&lt;a href=""&gt;Manifesto da Mozilla&lt;/a&gt;</pre>
- </li>
- <li>Preencha o valor deste atributo com o endereço web para o qual quer ligar a hiperligação:
-  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/pt-PT/about/manifesto/"&gt;Manifesto da Mozilla&lt;/a&gt;</pre>
- </li>
-</ol>
-
-<p>Pode obter resultados inesperados se omitir a parte do <em>protocolo</em> no início do endereço web (<code>https://</code> ou <code>http://</code>). Depois de criar uma hiperligação, clique para assegurar que está a enviá-lo para onde é pretendido.</p>
-
-<div class="note">
-<p><code>href</code> pode, à primeira vista, parecer uma escolha obscura para o nome de um atributo. Se tiver dificuldades em lembrar-se dele, recorde que significa <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p>
-</div>
-
-<p>Agora, acrescente a hiperligação à sua página, se ainda não o fez.</p>
-
-<h2 id="Conclusão">Conclusão</h2>
-
-<p>Se seguiu todas as instruções nesta página, deve ter conseguido uma página que se assemelha à página em baixo (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 ficou preso, pode comparar o seu trabalho com o <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">exemplo do código terminado </a>no GitHub.</p>
-
-<p>Aqui, mal tocámos na superfície da linguagem HTML. Para descobrir mais, dirija-se ao nosso tópico sobre <a href="/pt-PT/docs/Learn/HTML">Aprender HTML</a>.</p>
-
-<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Lidar_com_ficheiros","Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web")}}</p>
-
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
- <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Qual será a aparência do seu site da Web</a><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">?</a></li>
- <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
- <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial </a></li>
- <li><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
- <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
- <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></li>
- <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a></li>
-</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/index.html b/files/pt-pt/learn/getting_started_with_the_web/index.html
deleted file mode 100644
index aff432c058..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Primeiros passos na Web
-slug: Learn/Getting_started_with_the_web
-tags:
-  - Beginner
-  - CSS
-  - Desenho
-  - Guía
-  - HTML
-  - I10n:priority
-  - Index
-  - publicação
-  - teoria
-translation_of: Learn/Getting_started_with_the_web
-original_slug: Learn/Comecar_com_a_Web
----
-<div>{{LearnSidebar}}</div>
-
-<div class="summary">
-<p><strong>Iniciação à Web</strong> é uma série concisa introduzindo-lhe os aspetos práticos do desenvolvimento da Web<em>. </em>Irá configurar as ferramentas necessárias para criar uma página da Web simples e publicar o seu próprio código simples.</p>
-</div>
-
-<h2 id="A_história_do_seu_primeiro_site_da_Web">A história do seu primeiro <em>site </em>da Web</h2>
-
-<p>É muito trabalho para criar um site da <em>Web </em>profissional, por isso, se é novo no desenvolvimento da Web, nós encorajamos que comece por uma coisa pequena. Não irá criar outro Facebook de imediato, mas não é difícil ter o seu próprio site da Web simples <em>on-line</em>. Vamos lá começar.</p>
-
-<p>Ao trabalhar com os artigos listados abaixo em ordem, irá passar do nada para ter a sua primeira página da Web <em>on-line</em>. Vamos lá!</p>
-
-<h3 id="Instalar_software_básico"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></h3>
-
-<p>Quando se trata de ferramentas para criar um site da Web, há muito a escolher. Se está apenas a começar, pode ficar confuso com a variedade de editores de código, estruturas e ferramentas de teste disponíveis. Em <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a>, nós mostramos-lhe passo-a-passo como instalar apenas o software necessário para iniciar um desenvolvimento da <em>web</em> básico.</p>
-
-<h3 id="Qual_será_a_aparência_do_seu_site_da_Web"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site da Web?</a></h3>
-
-<p>Antes de começar a escrever o código do seu site da Web, deverá planeá-lo primeiro. Que informação está a apresentar? Que tipo de letra e cores está a utilizar? <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Como é que será apresentado o seu site da Web</a>? Nós descrevemos um método simples que pode seguir para planear o conteúdo e o desenho do seu site.</p>
-
-<h3 id="Lidar_com_ficheiros"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></h3>
-
-<p>Um site consiste em muitos ficheiros: conteúdo de texto, código, <em>stylesheets</em>, conteúdo de média, e mais. Quando constrói um site, precisa de organizar os seus ficheiros e certificar-se que podem comunicar uns com os outros. <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Lidar com ficheiros</a> explica como criar uma estrutura para os ficheiros do seu site e quais as questões que devem ser do seu conhecimento.</p>
-
-<h3 id="Básicos_de_HTML"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">Básicos de HTML</a></h3>
-
-<p><em>Hypertext Markup Language</em> (HTML) é o código que usa para estruturar, dar significado, e propósito ao seu conteúdo de <em>web</em>. Por exemplo, é o meu conteúdo um conjunto de parágrafos, ou uma lista de pontos? Tenho imagens inseridas na minha página? O <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a> fornece informação suficiente para o familiarizar com o HTML, sem o sobrecarregar.</p>
-
-<h3 id="Básicos_de_CSS"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">Básicos de CSS</a></h3>
-
-<p>Cascading Stylesheets (CSS) é o código que usa para decorar o seu site. Por exemplo, quer o texto colorido negro ou vermelho? Onde desenhar o conteúdo no ecrã? Que imagens de fundo e cores deve usar para decorar o site? <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a> leva-o através do que precisa para começar.</p>
-
-<h3 id="Básicos_de_JavaScript"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">Básicos de JavaScript</a></h3>
-
-<p>JavaScript é a linguagem de programação que utiliza para adicionar funcionalidades interativas ao seu website, por exemplo, jogos, coisas que acontecem quando botões são premidos ou quando dados são introduzidos em formulários, efeitos de estilo dinâmicos, animação, e muito mais. <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a> dá-lhe uma ideia do que é possível com esta linguagem emocionante, e como começar.</p>
-
-<h3 id="Publicar_o_seu_site_da_Web"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></h3>
-
-<p>Após de escrever o código e organizar os ficheiros que compõem o seu site, tem de o colocar online para que as pessoas o possam encontrar. "Publicar o seu site da Web" descreve como colocar o seu código de amostra simples online com o mínimo de esforço.</p>
-
-<h3 id="Como_é_que_funciona_a_Web"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como é que funciona a Web</a></h3>
-
-<p>Quando acede ao seu site favorito, muitas coisas complicadas acontecem em segundo plano de que poderá não ter conhecimento. <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a> descreve o que acontece quando visualiza uma página da web no seu computador.</p>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<ul>
- <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a> (Inglês): Uma série fantástica de vídeos a explicar os fundamentos da <em>web</em>, dirigido a totais iniciantes de desenvolvimento da <em>web</em>. Criado por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</li>
- <li><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/A_web_e_os_padroes_da_web">A Web e os padrões da Web</a>: Este artigo oferece detalhes úteis acerca da <em>web</em> — como foi inicialmente desenvolvida, o que são as tecnologias padrão da <em>web</em>, como trabalhar em equipa, porque ser um "programador da <em>web</em>" é uma carreira excelente, e que melhores práticas irá aprender durante o curso.</li>
-</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html
deleted file mode 100644
index c3cff40e7f..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: Instalar software básico
-slug: Learn/Getting_started_with_the_web/Installing_basic_software
-tags:
-  - Aprender
-  - Beginner
-  - Configurar
-  - Ferramentas
-  - Mecânicas da Web
-  - Navegador
-  - editor de texto
-  - l10n:priority
-translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
-original_slug: Learn/Comecar_com_a_Web/Installing_basic_software
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{NextMenu("Learn/Comecar_com_a_Web/Apresentacao_do_meu_site", "Learn/Comecar_com_a_Web")}}</div>
-
-<div class="summary">
-<p>Neste artigo<em>, </em>mostramos-lhe de que ferramentas precisa para desenvolvimento da Web básico, e como instalá-las corretamente.</p>
-</div>
-
-<h2 id="Que_ferramentas_é_que_os_profissionais_utilizam">Que ferramentas é que os profissionais utilizam?</h2>
-
-<ul>
- <li><strong>Um computador</strong>. Até pode parecer óbvio, mas alguns de vocês estão a ler este artigo através do telefone ou numa biblioteca com um computador. Para desenvolvimento sério, é melhor investir num PC ou num portátil, seja Windows, Mac, ou Linux.</li>
- <li><strong>Um editor de </strong><strong>texto</strong>, para escrever o código. Pode ser um editor de texto simples (ex: <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, ou <a href="https://www.vim.org/">VIM</a>), ou pode ser um editor híbrido (ex: <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver </a>ou <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Programas de <em>Office</em> não são adequados, já que dependem de elementos escondidos que interferem com os mecanismos de desenho dos navegadores.</li>
- <li><strong>Navegadores da Web</strong>, para testar o código. Atualmente, os mais utilizados são <a href="https://www.mozilla.org/en-US/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/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> e <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Também deve testar o seu site em dispositivos móveis ou navegadores antigos que por algum motivo ainda sejam utilizados pelo seu público-alvo (como o IE 8–10). <a href="https://lynx.browser.org/">Lynx</a>, um navegador da web de terminal baseado em texto, é ótimo para ver como o seu site é experienciado por utilizadores com deficiência visual.</li>
- <li><strong>Um editor de gráficos</strong>, como o <a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.figma.com/">Figma</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, ou <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, para criar imagens para a sua página da internet.</li>
- <li><strong>Um sistema de controlo de versões</strong>, para gerir ficheiros em servidores, colaborar num projeto de equipa, partilhar código e recursos, e evitar alterações conflituosas. Agora <a href="http://git-scm.com/">Git</a> é a ferramenta de controlo de versões mais popular e o serviço de hospedagem de código <a href="https://github.com/">GitHub</a>, baseado no mesmo, também é largamente utilizado.</li>
- <li><strong>Um programa de FTP</strong>, utilizado em contas de hospedagem de sites para gerir ficheiros no servidor (o <a href="http://git-scm.com/">Git</a> cada vez mais substitui FTP neste aspeto). Há diversos programas de (S)FTP como <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, e <a href="https://filezilla-project.org/">FileZilla</a>.</li>
- <li><strong>Um sistema de automatização</strong> como <a href="https://webpack.js.org/">Webpack</a>, <a href="http://gruntjs.com/">Grunt</a> ou <a href="http://gulpjs.com/">Gulp</a> para automatizar tarefas repetitivas, como minimizar o código e realizar testes.</li>
- <li><em>Templates</em>, bibliotecas, <em>frameworks</em>, etc., para escrever mais rapidamente e facilmente o código relativo a funcionalidades comuns. Uma biblioteca tende a ser um ficheiro JavaScript ou CSS existente que lhe proporciona uma funcionalidade pronta a ser utilizada no seu código. Uma <em>framework</em> expande sobre esta, oferecendo-lhe um sistema completo com sintaxes personalizadas para que possa escrever uma aplicação <em>web</em> em cima.</li>
- <li>E ainda mais ferramentas!</li>
-</ul>
-
-<h2 id="De_que_ferramentas_realmente_preciso_de_momento">De que ferramentas realmente preciso, de momento?</h2>
-
-<p>Parece uma lista assustadora, mas felizmente pode começar a desenvolver para a <em>web</em> sem saber nada sobre a maioria daquelas coisas. Neste artigo instalamos o mínimo dos mínimos — editor de texto e navegadores modernos.</p>
-
-<h3 id="Instalar_um_editor_de_texto">Instalar um editor de texto</h3>
-
-<p>Provavelmente já tem um editor de texto simples no seu computador. O Windows inclui, de fábrica, o Bloco de Notas (<a href="https://pt.wikipedia.org/wiki/Bloco_de_Notas">Notepad</a>) e o macOS vem com o Editor de Texto (<a href="https://pt.wikipedia.org/wiki/TextEdit">TextEdit</a>). Em distribuições de Linux, varia; Ubuntu vem com o <a href="https://pt.wikipedia.org/wiki/Gedit">gedit</a>.</p>
-
-<p>Para desenvolvimento na Web, há alternativas mais completas que o Notepad ou TextEdit. Propomos-lhe começar com o <a href="https://code.visualstudio.com/">Visual Studio Code</a>, um editor gratuito que oferece pré-visualização em tempo real e sugestões de código.</p>
-
-<div class="blockIndicator note">
-<p>Não confundir Notepad (Bloco de Notas) com Wordpad! Este último é equiparável a programas de <em>Office</em>, que não são adequados para escrever código de computador, como já foi referido. </p>
-</div>
-
-<h3 id="Instalar_navegadores_da_Web_modernos">Instalar navegadores da Web modernos</h3>
-
-<p>Antes de avançar, deve escolher uns navegadores que possa ter à mão para realizar testes. Escolha o seu sistema operativo e faça clique nos <em>links</em> para descarregar o programa de instalação respetivo dos seus navegadores preferidos:</p>
-
-<ul>
- <li>Linux: <a href="https://www.mozilla.org/en-US/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/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>, <a href="https://brave.com">Brave</a> (Windows 10 já vem com Edge de fábrica; se possuir Windows 7 ou posterior, pode instalar Internet Explorer 11; se não, instale um dos outros navegadores).</li>
- <li>Mac: <a href="https://www.mozilla.org/en-US/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/safari/">Safari</a> (Safari vem de fábrica no iOS e macOS).</li>
-</ul>
-
-<div class="blockIndicator note">
-<p>Internet Explorer (IE) não é compatível com funções da <em>web</em> modernas e pode não conseguir correr o seu projeto. Tipicamente não será necessário fazer os seus projetos compatíveis com o IE, pois muito poucas pessoas ainda a utilizam - certamente não se preocupe muito com isso enquanto está a aprender. Por vezes pode deparar-se com um projeto que requer apoio para o mesmo.</p>
-</div>
-
-<h3 id="Instalar_um_servidor_da_Web_local">Instalar um servidor da Web local</h3>
-
-<p>Alguns exemplos terão de ser executados através de um servidor da Web para funcionar com sucesso. Pode aprender como fazer isto no artigo <a href="/pt-PT/docs/Learn/Questoes_comuns/Congiurar_um_servidor_de_testes_local">como configurar um servidor local de testes?</a></p>
-
-<div>{{NextMenu("Learn/Comecar_com_a_Web/Apresentacao_do_meu_site", "Learn/Comecar_com_a_Web")}}</div>
-
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
- <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site?</a></li>
- <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
- <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
- <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
- <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
- <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site na web</a></li>
- <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Como funciona a web</a></li>
-</ul>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button"></div>
-
-<div id="SL_shadow_translation_result2" class="hidden"></div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
-
-<div id="SL_alert_cont"></div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody>
-  <tr>
-   <td class="SL_td"><input></td>
-   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"></div>
-   </td>
-   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"></div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"></div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_font_patch"></div>
-
-    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"></div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"></div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"></div>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result"></div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
-
-<div id="SL_player2"></div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody>
-  <tr>
-   <td><input></td>
-   <td>
-    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"></div>
-   </td>
-   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html
deleted file mode 100644
index 8a3efc4ba4..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html
+++ /dev/null
@@ -1,414 +0,0 @@
----
-title: JavaScript - Essencial
-slug: Learn/Getting_started_with_the_web/JavaScript_basics
-tags:
-  - Aprender
-  - Beginner
-  - CodingScripting
-  - JavaScript
-  - Web
-  - l10n:priority
-translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
-original_slug: Learn/Comecar_com_a_Web/Elementar_de_JavaScript
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web", "Learn/Comecar_com_a_Web")}}</div>
-
-<div class="summary">
-<p>JavaScript é uma linguagem de programação que dá interatividade ao seu website (sob a forma, por exemplo, de jogos, respostas quando os botões são pressionados ou quando são inseridos dados nos formulários, estilos dinâmicos ou animações). Este artigo faz uma introdução a esta linguagem excitante e dá-lhe uma ideia do que é possível.</p>
-</div>
-
-<h2 id="O_que_é_JavaScript_realmente">O que é JavaScript, realmente?</h2>
-
-<p>{{Glossary("JavaScript")}} (abreviado "JS") é uma {{Glossary("Dynamic programming language", "linguagem de programação dinâmica")}} completa que, quando é aplicada a um documento {{Glossary("HTML")}}, produz interatividade dinânimca no website. Foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Mozilla Foundation, e da Mozilla Corporation.</p>
-
-<p>JavaScript é incrivelmente versátil. Pode começar em ponto pequeno, com carrosséis, galerias de imagens, <em>layouts </em>flutuantes, e mensagens quando se prime um botão. Depois de ganhar experiência, será capaz de criar jogos, gráficos 2D e 3D animados, aplicações completas conduzidas por bases-de-dados e muito mais!</p>
-
-<p>JavaScript é relativamente compacta e muito flexível. Os programadores já escreveram uma grande variedade de ferramentas sobre o núcleo desta linguagem, o que abriu portas a uma vasta quantidade de funcionalidade extra com esforço mínimo. Isto inclui:</p>
-
-<ul>
- <li>{{Glossary("API","API")}} de navegadores — São as API incluídas nos navegadores, que proporcionam funcionalidades como criar HTML dinamicamente e definir estilos CSS, agregar e manipular uma transmissão de vídeo da <em>webcam</em> do utilizador, ou gerar gráficos 3D graphics e amostras de som.</li>
- <li>API de terceiros — que permitem aos programadores incorporar funcionalidade nos seus sites de outros fornecedores de conteúdo, como Twitter ou Facebook.</li>
- <li>Framework e bibliotecas de terceiros — que podem ser aplicadas ao HTML e assim permitem construir sites e aplicações rapidamente.</li>
-</ul>
-
-<p>Uma vez que este artigo é apenas uma introdução ligeira a JavaScript, não vamos confundi-lo com detalhes sobre a diferença entre JavaScript puro e as ferramentas enumeradas em cima. Poderá aprender esse detalhe mais tarde, na nossa <a href="/pt-PT/docs/Learn/JavaScript">área de aprendizagem de JavaScript</a>, e no resto da MDN.</p>
-
-<p>De seguida vamos introduzi-lo a alguns aspetos do núcleo da linguagem (JS puro, sem ferramentas), e também vai jogar com algumas funcionalidades da API do navegador. Divirta-se!</p>
-
-<h2 id="Um_exemplo_olá_mundo">Um exemplo "olá mundo"</h2>
-
-<p>A secção anterior deve parecer mesmo empolgante — JavaScript é uma das tecnologias web mais animadas, e à medida que se torna bom a usá-la, os seus sites entrarão numa nova dimensão de poder e creatividade.</p>
-
-<p>Contudo, ficar confortável com JavaScript é um pouco mais difícil do que ficar confortável com HTML e CSS. Terá que começar com projetos pequenos e prosseguir com passos pequenos e consistentes. Para começar, vamos mostrar como adicionar JavaScript básico à sua página, criando um exemplo "hello world" / "olá mundo!" (<a href="https://pt.wikipedia.org/wiki/Programa_Olá_Mundo">o padrão de exemplos básicos de programação</a>).</p>
-
-<div class="warning">
-<p><strong>Importante</strong>: Se não tem seguido o resto deste curso, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">descarregue este exemplo de código </a>e utilize-o como ponto de partida.</p>
-</div>
-
-<ol>
- <li>Primeiro, crie uma pasta "scripts" (sem aspas) na raíz do seu site de testes. Depois, dento desta pasta, crie um ficheiro chamado <code>main.js</code>.</li>
- <li>A seguir, no ficheiro <code>index.html</code> introduza o elemento seguinte numa linha nova mesmo antes da etiqueta de fechi <code>&lt;/body&gt;</code>:
-  <pre class="brush: html notranslate">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
- </li>
- <li>Basicamente isto faz o mesmo que o elemento {{htmlelement("link")}} faz com CSS — aplica o código JavaScript à página, para que surta efeito no HTML (juntamente com o CSS, e outros recursos da página).</li>
- <li>Agora adicione o código seguinte ao ficheiro <code>main.js</code>:
-  <pre class="brush: js notranslate">var myHeading = document.querySelector('h1');
-myHeading.textContent = 'Olá mundo!';</pre>
- </li>
- <li>Finalmente, certifique-se que guardou as alterações aos ficheiros HTML e JavaScript, e carregue o ficheiro <code>index.html</code> no navegador. Deverá ver algo como:<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>: O motivo pelo qual pusemos o elemento {{htmlelement("script")}} no fim do ficheiro HTML é que os elementos são carregados pelo navaegador na ordem em que aparecem no ficheiro. Se o JavaScript é carregado primeiro e tem que afetar o HTML por baixo dele, pode não funcionar, já que o código JavaScript seria carregado antes do HTML que era suposto modificar. Assim, colocar o JavaScript no fim do ficheiro HTML costuma ser a melhor estratégia.</p>
-</div>
-
-<h3 id="O_que_aconteceu">O que aconteceu?</h3>
-
-<p>O texto do título foi mudado para "Hello world!", utilizando JavaScript. Isto foi feito com a função <code>{{domxref("Document.querySelector", "querySelector()")}}</code> para obter uma referência do título e guardá-la numa variável <code>myHeading</code>. Isto é semelhante ao que fizémos com seletores CSS. Quando se pretende fazer algo com um elemento, há que selecioná-lo primeiro.</p>
-
-<p>Depois, muda-se o valor da propriedade <code>{{domxref("Node.textContent", "textContent")}}</code> da variável <code>myHeading</code> (a qual representa o conteúdo textual do título) para "Olá Mundo!".</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Ambas as funções utilizadas fazem parte da <a href="/en-US/docs/Web/API/Document_Object_Model">API do Document Object Model (DOM) </a>, o qual permite manipular documentos HTML.</p>
-</div>
-
-<h2 id="Curso_intensivo_das_bases_da_linguagem">Curso intensivo das bases da linguagem</h2>
-
-<p>Vamos explicar algumas funcionalidades fundamentais da linguagem JavaScript, para permitir uma melhor compreensão de como a mesma funciona. Note que estas funcionalidades são comuns a todas as linguagens de programação, por isso, se dominar estes fundamentos, estará no bom caminho para programar praticamente qualquer coisa!</p>
-
-<div class="warning">
-<p><strong>Importante</strong>: Neste artigo, tente introduzir os exemplos de código na consola JavaScript para ver o que acontece. Para mais detalhes sobre a consola JavaScript, veja o artigo <a href="/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">Descobrir as ferramentas de desenvolvimentos do navegador</a>.</p>
-</div>
-
-<h3 id="Variáveis">Variáveis</h3>
-
-<p>{{Glossary("Variable", "Variáveis")}} são "recipientes" em que pode guardar valores. Comece por declarar a variável com a palavra-chave <code>var</code>, seguida de qualquer nome que lhe queira dar:</p>
-
-<pre class="brush: js notranslate">var minhaVariavel;</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: O ponto e vírgula indica onde termina a instrução; apenas é estritamente necessário quando pretende separar instruções numa só linha. Contudo, algumas pessoas acham que é boa prática colocar este sinal no fim de cada instrução. Há mais regras sobre quando se deve ou não utilizá-lo — veja o artigo <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript (inglês)</a> para obter mais detalhes.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota</strong>: O nome da varíavel pode ser quase tudo, mas há restrições (veja este <a href="http://www.codelifter.com/main/tips/tip_020.shtml">artigo sobre regras para dar nome às variáveis (inglês)</a>). Se não tem a certeza, pode <a href="https://mothereff.in/js-variables">verificar o nome da sua variável</a> para assegurar que é válido.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota</strong>: JavaScript é sensível a maiúsculas — <code>minhaVariavel</code> é uma variável diferente de <code>minhavariavel</code>. Se tiver encontrar problemas depois de escrever p código, verifique as maiúsculas e minúsculas!</p>
-</div>
-
-<p>Depois de declarar a variável, pode atribuir-lhe um valor:</p>
-
-<pre class="brush: js notranslate">minhaVariavel = 'Bob';</pre>
-
-<p>Pode efetuar ambas as operações com uma só instrução:</p>
-
-<pre class="brush: js notranslate">var myVariable = 'Bob';</pre>
-
-<p>O valor é obtido simplesmente escrevendo o nome da variável:</p>
-
-<pre class="brush: js notranslate">myVariable;</pre>
-
-<p>Depois de lhe dar um valor, pode optar por mudá-lo mais tarde:</p>
-
-<pre class="notranslate">var minhaVariavel = 'Bob';
-minhaVariavel = 'Steve';</pre>
-
-<p>Atenção que as variáveis podem ter valores com diferentes <a href="/en-US/docs/Web/JavaScript/Data_structures">tipos de 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 conhecido como s<em>tring</em> ou cadeia de caracteres. Para indicar que é uma string, envolve-se em plicas <kbd>'</kbd>.</td>
-   <td><code>var minhaVariavel = 'Bob';</code></td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Number")}}</th>
-   <td>Um número. Não tem plicas em sua volta.</td>
-   <td><code>var minhaVariavel</code><code> = 10;</code></td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Boolean")}}</th>
-   <td>Valor que ou é verdadeiro ou falso. As palavras <code>true</code> e <code>false</code> são palavras-chave em JS, e não precisam de plicas.</td>
-   <td><code>var minhaVariavel = true;</code></td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Array")}}</th>
-   <td>Estrutura que permite guardar múltiplos valores numa só referência.</td>
-   <td><code>var minhaVariavel = [1,'Bob','Steve',10];</code><br>
-    Cada elemento da Array é referido desta forma (começa em zero):<br>
-    <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Object")}}</th>
-   <td>Pode ser qualquer coisa. Em JavaScript, tudo é um objeto e pode guardar-se numa variável. Mantenha isto em mente enquanto aprende.</td>
-   <td><code>var minhaVariavel = document.querySelector('h1');</code><br>
-    Assim como todos os exemplos anteriores.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Então para que precisamos das variáveis? Bem, são necessárias para qualquer tarefa interessante em programação. Se não houvesse valores que mudassem, não seria possível criar nada que fosse dinâmico, como personalizar uma mensagem de boas vindas ou mudar a imagem que se está a ver numa galeria.</p>
-
-<h3 id="Comentários">Comentários</h3>
-
-<p>Pode deixar comentários no seu código JavaScript, tal como em CSS:</p>
-
-<pre class="brush: js notranslate">/*
-Tudo entre estas marcas é um comentário.
-*/</pre>
-
-<p>Se o comentário não contiver quebras de linha, deve ser mais fácil utilizar duas barras, assim:</p>
-
-<pre class="brush: js notranslate" style="font-size: 14px;">// Isto é um comentário
-</pre>
-
-<h3 id="Operadores">Operadores</h3>
-
-<p>Um <code>{{Glossary("operator")}}</code> é um símbolo matemático que produz o resultado de uma operação entre dois valores (que podem ser variáveis). Na tabela seguinte constam alguns dos operadores mais simples, juntamente com alguns exemplos que pode experimentar na consola de JavaScript.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="row">Operador</th>
-   <th scope="col">Explicação</th>
-   <th scope="col">Símbolo(s)</th>
-   <th scope="col">Exemplo</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">Adição</th>
-   <td>Soma números ou junta duas strings.</td>
-   <td><code>+</code></td>
-   <td><code>6 + 9;<br>
-    "Hello " + "world!";</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Subtração, Multiplicação, Divisão</th>
-   <td>Comportam-se com esperado em aritmética.</td>
-   <td><code>-</code>, <code>*</code>, <code>/</code></td>
-   <td><code>9 - 3;<br>
-    8 * 2; // em JS, o sinal de "vezes" é um asterisco<br>
-    9 / 3;</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Atribuição</th>
-   <td>Já vimos isto: atribui um valor a uma variável.</td>
-   <td><code>=</code></td>
-   <td><code>var minhaVariavel = 'Bob';</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Igualdade</th>
-   <td>Faz um teste para verificar se dois valores são iguais e retorna um valor booleano (<code>true</code>/<code>false</code>).</td>
-   <td><code>===</code></td>
-   <td><code>var minhaVariavel = 3;<br>
-    minhaVariavel === 4;</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Negação, Desigualdade</th>
-   <td>Devolve o valor logicamente oposto, ou seja, torna o verdadeiro em falso e vice-versa. When it is used alongside the Equality operator, the negation operator tests whether two values are <em>not</em> equal.</td>
-   <td><code>!</code>, <code>!==</code></td>
-   <td>
-    <p>The basic expression is <code>true</code>, but the comparison returns <code>false</code> because we've negated it:</p>
-
-    <p><code>var myVariable = 3;<br>
-     !(myVariable === 3);</code></p>
-
-    <p>Verificar se "a <code>minhaVariavel</code> NÃO é igual a 3". Retorna <code>false</code> porque <code>minhaVariavel</code> é de facto igual a 3.</p>
-
-    <p><code><code>var </code>minhaVariavel<code> = 3;</code><br>
-     minhaVariavel !== 3;</code></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Há muito mais operadores a explorar, mas por agora basta. Veja uma lista completa no artigo <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressões e operadores</a>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Misturar tipos de dados pode ter resultados estranhos, então certifique-se que está a utilizar as variáveis corretamente e que os resultados estão dentro do esperado. Por exemplo, introduza <code>"35" + "25"</code> na consola. Porque é que não faz a soma dos números? Porque as aspas tornam os números em strings, então em vez de somar, fez a concatenção das strings. Se introduzir, <code>35 + 25</code> já obterá o resultado correto.</p>
-</div>
-
-<h3 id="Condições">Condições</h3>
-
-<p>Condições são estruturas de código que permitem, em função do valor lógico (verdadeiro/falso) de uma expressão, executar código de entre várias alterantivas. Uma forma comum de uma condiçães é a instrução <code>if ... else</code> (se ... senão). Por exemplo:</p>
-
-<pre class="brush: js notranslate">var gelado = 'chocolate';
-if (gelado === 'chocolate') {
-  alert('Viva, adoro gelado de chocolate!');
-} else {
-  alert('Ohhhh, mas o meu favorito é chocolate...');
-}</pre>
-
-<p>A expressão dentro de parênteses em <code>if ( ... )</code> é a condição — utilza o operador de igualdade (como foi descrito em cima) para comparar a variável <code>gelado</code> com a string <code>'chocolate'</code> e assim verificar se são iguais. Caso esta comparação devolva <code>true</code>, é executado o primeiro bloco de código. Se não for verdadeira, não é executado o primeiro mas sim o segundo bloco de código, depois da instrução <code>else</code>.</p>
-
-<h3 id="Funções">Funções</h3>
-
-<p>{{Glossary("Function", "Functions")}} são uma maneira de juntar uma funcionalidade ou um conjunto instruções que se pretende reutilizar. Quando se pretende utilizar esta funcionalidade, chama-se a função pelo nome, em vez de voltar a escrever o código em cada utilização. Já pudémos ver a utilização de algumas funções, por exemplo:</p>
-
-<ol>
- <li>
-  <pre class="brush: js notranslate">var minhaVariavel = document.querySelector('h1');</pre>
- </li>
- <li>
-  <pre class="brush: js notranslate">alert('hello!');</pre>
- </li>
-</ol>
-
-<p>Estas funções, <code>document.querySelector</code> e <code>alert</code>, estão incluídas no navegador para serem utilizadas sempre que necessário.</p>
-
-<p>Quando vê algo que parece um nome de uma variável mas tem parênteses à direita— <code>()</code> —  é provavelmente uma função. As funções costumam possuir {{Glossary("Argument", "arguments")}} — dados de que necessitam para fazer o seu trabalho. Estes são passados dentros dos parênteses, separados por vírgulas quando há mais do que um.</p>
-
-<p>Por exemplo, a função <code>alert()</code> faz aparecer um "pop-up" na janela do navegador, mas é preciso dar-lhe uma string como argumento para que ela saiba o que escrever.</p>
-
-<p>E as boa notícia é que pode definir as suas próprias funções. Neste exemplo escrevemos uma função simples que aceita dois argumentos numéricos e multiplica-os:</p>
-
-<pre class="brush: js notranslate">function multiplicar(num1,num2) {
-  var resultado = num1 * num2;
-  return resultado;
-}</pre>
-
-<p>Tente declarar esta função na consola e depois testá-la com vários argumentos. Por exemplo:</p>
-
-<pre class="brush: js notranslate">multiplicar(4, 7);
-multiplicar(20, 20);
-multiplicar(0.5, 3);</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: A instrução <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> diz ao navegador para devolver/retornar a variável <code>result</code> para fora da função para que o seu valor possa ser utilizado. Isto é necessário porque variáveis definidas dentro das funções só estão disponíveis dentro dessas funções — a essa particularidade chama-se o âmbito da variável ({{Glossary("Scope", "scoping")}}). (Leia mais sobre <a href="/pt-PT/docs/Web/JavaScript/Guia/Gramática_e_tipos#Variable_scope">âmbito de variáveis</a>)</p>
-</div>
-
-<h3 id="Eventos">Eventos</h3>
-
-<p>Num site, interactividade a sério precisa de eventos. Eles são estruturas de código que esperam que algo aconteça no navegador e respondem executando código. O exemplo mais óbvio é o <a href="/en-US/docs/Web/Events/click">evento de clique</a>, que é enviado pelo navegador quando se clica em algo com o rato. Para demonstrar, introduza isto na sua consola, e depois clique na página atual:</p>
-
-<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {
-    alert('Ai! Para de me picar!');
-}</pre>
-
-<p>Há muitas maneiras de associar um evento a um elemento. Aqui, selecionamos o elemento {{htmlelement("html")}}, atribuímos à sua propriedade <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> o manuseador do evento (<em>event handler</em>), que neste caso é uma função anónima (sem nome), que contém o código que queremos que o evento de clique execute.</p>
-
-<p>Note que isto:</p>
-
-<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre>
-
-<p>É equivalente a isto:</p>
-
-<pre class="brush: js notranslate">var myHTML = document.querySelector('html');
-myHTML.onclick = function() {};</pre>
-
-<p>Só que o primeiro é mais curto.</p>
-
-<h2 id="Supercarregar_o_nosso_site-exemplo">Supercarregar o nosso site-exemplo</h2>
-
-<p>Agora que que já vimos as bases de JavaScript, vamos acrescentar umas funcionalidades fixes ao nosso site para ver o que é possível.</p>
-
-<h3 id="Acrescentar_um_alterador_de_imagens">Acrescentar um alterador de imagens</h3>
-
-<p>Nesta secção, vamos acrescentar uma imagem adicional ao nosso site com funções da API da DOM, utilizando JavaScript para mudar alternar entre as duas imagens quando se clica nelas.</p>
-
-<ol>
- <li>Primeiro, encontre outra imagem que goste de ter no seu site. Certifique-se que o tamanho é o mais próximo possível da primeira imagem.</li>
- <li>Guarde-a na pasta <code>images</code>.</li>
- <li>Mude o nome para "firefox2.png" (sem aspas).</li>
- <li>Vá ao ficheiro <code>main.js</code>, e introduza o seguinte código JavaScript. (Apague o código do "olá mundo", se ainda lá estiver)
-  <pre class="brush: js notranslate">var myImage = document.querySelector('img');
-
-myImage.onclick = function() {
-    var mySrc = myImage.getAttribute('src');
-    if(mySrc === 'images/firefox-icon.png') {
-      myImage.setAttribute('src','images/firefox2.png');
-    } else {
-      myImage.setAttribute('src','images/firefox-icon.png');
-    }
-}</pre>
- </li>
- <li>Guarde todos os ficheiros e carregue o <code>index.html</code> no navegador. Agora, quando clicar sobre a imagem, ela deve mudar para a outra!</li>
-</ol>
-
-<p>Guardou-se uma referência para o elemento {{htmlelement("img")}} na variável <code>myImage</code>. Depois, atribui-se à propriedade <code>onclick</code> desta variável uma função anónima. Agora, sempre que se clica no elemento:</p>
-
-<ol>
- <li>Obtem-se o valor do atributo <code>src</code>.</li>
- <li>Utiliza-se uma condição para averiguar se o valor do mesmo é igual ao caminho da primeira imagem:
-  <ol>
-   <li>Se for, muda-se para o caminho da 2ª imagem, o que a obriga a ser carregada no elemento {{htmlelement("img")}}.</li>
-   <li>Se não for (e portanto, já se trocaram as imagens), o valor de <code>src</code> volta a ser o caminho da imagem original.</li>
-  </ol>
- </li>
-</ol>
-
-<h3 id="Dar_uma_mensagem_de_boas-vindas_personalizada">Dar uma mensagem de boas-vindas personalizada</h3>
-
-<p>De seguida vamos acrescentar mais um pouco de código, que vai mudar o título da página para uma mensagem de boas-vindas personalizada quando o utilizador navega no site pela primeira vez. A mesma vai persistir, mesmo que o utilizador saia do site e volte mais tarde — vamos guardá-la com a <a href="/en-US/docs/Web/API/Web_Storage_API">API de Web Storage</a>. Também vamos acrescentar opção de mudar de utilizador e, com o mesmo, a mensagem de boas-vindas sempre que for necessário.</p>
-
-<ol>
- <li>Em <code>index.html</code>, acrescente esta linha logo antes do elemento {{htmlelement("script")}}:
-
-  <pre class="brush: html notranslate">&lt;button&gt;Change user&lt;/button&gt;</pre>
- </li>
- <li>Em <code>main.js</code>, coloque o código seguinte no fim do ficheiro, tal como está escrito — isto obtem referências ao novo botão e o título, e guarda-os em variáveis:
-  <pre class="brush: js notranslate">var myButton = document.querySelector('button');
-var myHeading = document.querySelector('h1');</pre>
- </li>
- <li>Agora acrescente a função em baixo para estabelecer a mensagem personalizada — por agora não faz nada, mas já vamos tratar disso:
-  <pre class="brush: js notranslate">function setUserName() {
-  var myName = prompt('Por favor introuduza o seu nome.');
-  localStorage.setItem('name', myName);
-  myHeading.textContent = 'Mozilla is cool, ' + myName;
-}</pre>
-  Este função faz uso da função <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a>, que mostra uma caixa de diálogo, semelhante a <code>alert()</code>. Mas a <code>prompt()</code> pede ao utilizador que introduza dados, que armazena numa variável depois que o mesmo faça <strong>OK</strong><em>.</em> Neste caso, pedimos ao utilizador que introduza o seu nome. Depois, recorremos à API chamada <code>localStorage</code>, que nos permite guardar dados no navegador para os obter mais tarde. Utilizamos a função <code>setItem()</code> para criar e guardar o artigo <code>'name'</code>, e dando-lhe o valor da variável <code>myName</code>, a qual contém o nome introduzido pelo utilizador. Finalmente, mudamos o <code>textContent</code> do título para uma string, à qual concatenamos o nome recentemente armazenado.</li>
- <li>Próximo: acrescente este bloco <code>if ... else</code> — podemos chamar-lhe código de iniciação, já que define a estrutura da aplicação quando é carregada pela primeira vez:
-  <pre class="brush: js notranslate">if(!localStorage.getItem('name')) {
-  setUserName();
-} else {
-  var storedName = localStorage.getItem('name');
-  myHeading.textContent = 'Mozilla is cool, ' + storedName;
-}</pre>
-  Este bloco começa por utilizar o operador de negação ("não-lógico", representado pelo <kbd>!</kbd>) para averiguar se o dado <code>name</code> existe. Se não existir, a função <code>setUserName()</code> é utilizada para o criar. Se existe (ou seja, o utilizador introduziu-o numa visita anterior), recuperamos o nome armazenado com <code>getItem()</code> e mudamos <code>textContent</code> do título para a string, mais o nome do utilizador, da mesma forma que fizémos em <code>setUserName()</code>.</li>
- <li>Finalmente, coloque o manuseador do evento <code>onclick</code> no botão, como se mostra em baixo. Quando se clica no botão, é chamada a função <code>setUserName()</code>. Isto permite ao utilizador introduzir um novo nome, sempre que desejar, ao premir o botão:
-  <pre class="brush: js notranslate">myButton.onclick = function() {
-  setUserName();
-}
-</pre>
- </li>
-</ol>
-
-<p>Agora, sempre que visitar o site, vai pedir-lhe o seu nome de utilizador, e depois mostrar a mensagem personalizada. Pode mudar o nome sempre que quiser ao premir o botão. Como bónus, já que o nome está guardado em localStorage (armazenamento local), persiste mesmo que o site seja fechado, e mantém a mensagem quando se voltar ao site!</p>
-
-<h2 id="Conclusão">Conclusão</h2>
-
-<p>Se seguiu as instruções neste artigo, o resultado final deve ser uma página semelhante à que vê na imagem em baixo (pode ver  <a href="https://mdn.github.io/beginner-html-site-scripted/">a 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>Caso se tenha perdido, pode comparar o código que escreveu com o nosso <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">exemplo terminado no GitHub</a>.</p>
-
-<p>Este artigo mal rasou a superfície de JavaScript. Se gostou de brincar e deseja continuar a aprender, dirija-se ao nosso <a href="/en-US/docs/Learn/JavaScript">tópico de aprendizegem de JavaScript</a>.</p>
-
-<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web", "Learn/Comecar_com_a_Web")}}</div>
-
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
- <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site da Web?</a></li>
- <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
- <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - essencial</a></li>
- <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - essencial</a></li>
- <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - essencial</a></li>
- <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site na internet</a></li>
- <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a web</a></li>
-</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html
deleted file mode 100644
index 63299c4e36..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Publicar o seu site na Web
-slug: Learn/Getting_started_with_the_web/Publishing_your_website
-tags:
-  - Aprender
-  - Beginner
-  - CodingScripting
-  - FTP
-  - GitHub
-  - Google App Engine
-  - Servidor de Web
-  - Web
-  - publicar
-translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
-original_slug: Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web/Como_funciona_a_Web", "Learn/Comecar_com_a_Web")}}</div>
-
-<div class="summary">
-<p>Assim que terminar de escrever o código e organizar os ficheiros que compõem o seu sire da web, precisa de colocar tudo online para que pessoas o possam encontrar. Este artigo explica como colocar o seu código de amostra online com pouco esforço.</p>
-</div>
-
-<h2 id="Quais_são_as_opções">Quais são as opções?</h2>
-
-<p>A publicação de um site na web é um tema complexo porque há muitas maneiras de o abordar. Este artigo não tenta documentar todos os métodos possíveis. Em vez disso, explica as vantagens e desvantagens de três abordagens que são práticas para os principiantes. Depois, passa por um método que pode funcionar de imediato para muitos leitores.</p>
-
-<h3 id="Encontrar_hospedagem_na_web_e_um_nome_de_domínio">Encontrar hospedagem na web e um nome de domínio</h3>
-
-<p>Para ter mais controlo sob o conteúdo e a aparência dum site, a maioria das pessoas escolhe comprar hospedagem na <em>web</em> e um nome de domínio:</p>
-
-<ul>
- <li>O serviço de alojamento <em>web</em> fornece espaço de arquivo alugado no <a href="/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_servidor_da_Web">servidor</a> de uma empresa de alojamento.  Colocam-se ficheiros de <em>websites</em> no servidor. O servidor fornece o conteúdo do site aos seus visitantes.</li>
- <li>Um <a href="/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_nome_de_dominio">nome de domínio</a> é o endereço único onde as pessoas encontram o seu sítio <em>web</em>, tal como <code>https://www.mozilla.org</code> ou <code>http://www.bbc.co.uk</code>. Pode alugar o seu nome de domínio por tantos anos quantos desejar a partir dum <strong>registador de domínios</strong>.</li>
-</ul>
-
-<p>Muitos sites profissionais escolhem este modo para pôr o seu site online.</p>
-
-<p>Além disso, precisará de um programa {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (ver <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> para mais detalhes) para transferir os ficheiros do site para o servidor. Os programas FTP variam muito, mas geralmente, tem de se ligar ao seu servidor web utilizando os detalhes fornecidos pela sua empresa de hospedagem (normalmente nome de utilizador, palavra-passe, nome de anfitrião). Depois, o programa mostra-lhe os seus ficheiros locais e os ficheiros do servidor web em duas janelas, e fornece-lhe uma forma de transferir ficheiros para trás e para a frente.</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_na_web_e_um_nome_de_domínio">Dicas para encontrar hospedagem na web e um nome de domínio</h4>
-
-<ul>
- <li>A MDN não promove empresas específicas de alojamento comercial ou agentes de registo de nomes de domínio. Para encontrar empresas de alojamento e agentes de registo, basta procurar por "alojamento web" e "nomes de domínio". Todos os agentes de registo terão uma funcionalidade que lhe permitirá verificar se o nome de domínio que pretende está disponível.</li>
- <li>O {{Glossary("ISP", "fornecedor de internet")}} da sua casa ou escritório pode fornecer algum alojamento limitado para um pequeno website. O conjunto de funcionalidades disponíveis será limitado, mas poderá ser perfeito para as suas primeiras experiências.</li>
- <li>Há também serviços gratuitos disponíveis como <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com/">Blogger</a>, e <a href="https://wordpress.com/">WordPress</a>.  Estes não são as opções mais robustas, mas por vezes estes recursos são suficientemente bons para as experiências iniciais.</li>
- <li>Muitas empresas oferecem alojamento e nomes de domínio.</li>
-</ul>
-
-<h3 id="Usar_uma_ferramenta_online">Usar uma ferramenta online</h3>
-
-<p>Algumas ferramentas permitem publicar o seu site online:</p>
-
-<ul>
- <li><a href="https://github.com/">GitHub</a> é um site de "programação social". Permite-lhe carregar repositórios de código para armazenamento no sistema de <strong>controlo de versões</strong> <a href="http://git-scm.com/">Git</a>. Pode então colaborar em projetos de código, e o sistema é de código aberto por defeito, o que significa que qualquer pessoa no mundo pode encontrar o seu código no GitHub, usá-lo, aprender com ele, e melhorá-lo. GitHub tem uma funcionalidade muito útil chamada <a href="https://pages.github.com/">GitHub Pages</a>, que lhe permite expor o código do website ao vivo na web.</li>
- <li><a href="https://cloud.google.com/appengine/">Google App Engine</a> é uma plataforma poderosa que lhe permite construir e executar aplicações na infraestrutura do Google - quer necessite de construir uma aplicação web multi níveis a partir do zero ou hospedar um website estático. Veja <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> para mais informações.</li>
-</ul>
-
-<p>Estas opções são tipicamente grátis, mas é possível você acabar por precisar mais que as funções que elas oferecem.</p>
-
-<h3 id="Usar_um_IDE_online">Usar um IDE online</h3>
-
-<p>Existem várias aplicações web que imitam um ambiente de desenvolvimento de <em>website</em>, permitindo-lhe introduzir HTML, CSS e JavaScript, e depois mostrar o resultado desse código como um <em>website</em> — tudo num único separador do navegador. Em geral, estas ferramentas são relativamente fáceis de manusear, ótimas para aprender, boas para partilhar código (por exemplo, se quiser partilhar uma técnica com ou pedir ajuda de depuração a colegas num escritório diferente), e gratuitas (para funcionalidades básicas). Hospedam a sua página num endereço da web único. No entanto, as funcionalidades são limitadas, e estas aplicações normalmente não fornecem espaço de alojamento para ativos (como imagens).</p>
-
-<p>Experimente usar as seguintes IDEs para descobrir qual é a melhor para si:</p>
-
-<ul>
- <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
- <li><a href="https://glitch.com/">Glitch</a></li>
- <li><a href="http://jsbin.com/">JS Bin</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="Publicar_via_GitHub">Publicar via GitHub</h2>
-
-<p>Agora vejamos como facilmente publicar o seu site através do GitHub Pages.</p>
-
-<ol>
- <li>Primeiro, <a href="https://github.com/">inscreva se no GitHub</a> e confirme o seu endereço eletrónico.</li>
- <li>A seguir, <a href="https://github.com/new">a crie um repositório</a> para guardar os seus ficheiros.</li>
- <li>Nesta página, na caixa <em>Repository name</em>, escreva <em>username</em>.github.io, onde <em>username</em> é o seu nome de utilizador. Por exemplo, Bob Smith iria introduzir <em>bobsmith.github.io</em> na caixa. Selecione a caixa "<em>Initialize this repository with a README"</em>, e carregue "<em>Create repository</em>".<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
- <li>Arraste os conteúdos da sua pasta para o website, para dentro do repositório. Depois carregue em <em>Commit changes</em>.<br>
-
-  <div class="note">
-  <p><strong>Nota</strong>: Certifique se que a sua pasta contém o ficheiro <code>index.html</code>.</p>
-  </div>
- </li>
- <li>
-  <p>Navegue no seu navegador até <em>username</em>.github.io para ver o seu website online. Por exemplo, para o nome de utilizador <em>chrisdavidmills</em>, vai a <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p>
-
-  <div class="note">
-  <p><strong>Nota</strong>: Pode demorar alguns minutos para que o seu site esteja <em>live</em>. Se o seu site não for visível imediatamente, espere por uns minutos e tente novamente.</p>
-  </div>
- </li>
-</ol>
-
-<p>Para aprender mais, veja <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
-
-<h2 id="Leitura_complementar">Leitura complementar</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_servidor_da_Web">O que é um servidor da web</a></li>
- <li><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_nome_de_dominio">Entendendo nomes de domínio</a></li>
- <li><a class="external external-icon" href="https://www.codecademy.com/learn/deploy-a-website" rel="noopener">Publicar um site</a>: Um bom tutorial da Codecademy que vai um pouco além e mostra algumas técnicas adicionais.</li>
- <li><a class="external external-icon" href="https://alignedleft.com/resources/cheap-web-hosting" rel="noopener">Hospedagem baratas ou gratuitas de sites estáticos</a>, por Scott Murray, tem algumas ideias úteis sobre serviços disponíveis.</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web/Como_funciona_a_Web", "Learn/Comecar_com_a_Web")}}</p>
-
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
- <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site da Web?</a></li>
- <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
- <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
- <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
- <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
- <li id="Publishing_your_website"><a class="new" href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web" rel="nofollow">Publicar o seu site na Web</a></li>
- <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web?</a></li>
-</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
deleted file mode 100644
index 66f62d8178..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: A Web e os padrões da Web
-slug: Learn/Getting_started_with_the_web/The_web_and_web_standards
-tags:
-  - Aprender
-  - Beginner
-  - Front-end
-  - Normas da Web
-  - Padrões da Web
-  - Web
-translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
-original_slug: Learn/Comecar_com_a_Web/A_web_e_os_padroes_da_web
----
-<p dir="ltr">{{learnsidebar}}</p>
-
-<p dir="ltr">Este artigo fornece informação útil sobre a Web - como surgiu, o que são as tecnologias padrão da Web, como trabalham em conjunto, porque é que <em>web developer</em> é uma excelente carreira a escolher, e que melhores práticas irá aprender através do curso.</p>
-
-<h2 dir="ltr" id="História_resumida_da_Web">História resumida da Web</h2>
-
-<p dir="ltr">Vamos manter isto muito breve, pois existem relatos muito (mais) detalhados da história da web lá fora, aos quais faremos referência mais tarde (tente também procurar por "história da web" no seu motor de busca favorito e veja o que obtém, se estiver interessado em mais detalhes).</p>
-
-<p dir="ltr">No final da década de 1960, o exército dos EUA desenvolveu uma rede de comunicação chamada <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. Esta pode ser considerada uma precursora da Web, uma vez que funcionava na {{Interwiki("wikipedia", "Comutação de pacotes", "comutação de pacotes")}}, e incluía a primeira implementação do conjunto de protocolos {{Interwiki("wikipedia", "TCP/IP", "TCP/IP")}}. Estas duas tecnologias formam a base da infra-estrutura sobre a qual a Internet está construída.</p>
-
-<p dir="ltr">Em 1980, Tim Berners-Lee (frequentemente referido como TimBL) escreveu um programa de caderno de notas chamado ENQUIRE, que apresentava o conceito de ligações entre os diferentes nódulos. Soa familiar?</p>
-
-<p dir="ltr">Avançando para 1989, e a TimBL escreveu <em><a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a></em> e <em>HyperText at CERN</em>; estas duas publicações em conjunto forneceram o pano de fundo para a forma como a web funcionaria. Receberam interesse suficiente para convencer os chefes do TimBL a permitir-lhe avançar e criar um sistema global de hipertexto.</p>
-
-<p dir="ltr">No final de 1990, TimBL tinha criado todas as coisas necessárias para executar a primeira versão da web - <a href="/pt-PT/docs/Web/HTTP">HTTP</a>, <a href="/pt-PT/docs/Web/HTML">HTML</a>, o primeiro navegador web, que se chamava {{Interwiki("wikipedia", "WorldWideWeb", "WorldWideWeb")}}, um servidor HTTP, e algumas páginas web para ver.</p>
-
-<p dir="ltr">Nos anos que se seguiram, a web explodiu, com vários navegadores a serem lançados, milhares de servidores web a serem criados, e milhões de páginas web a serem criadas. OK, este é um resumo muito simples do que aconteceu, mas prometi-vos um breve resumo.</p>
-
-<p dir="ltr">Um último dado significativo a partilhar é que em 1994, o TimBL fundou o {{Interwiki("wikipedia", "W3C", "World Wide Web Consortium")}} (W3C), uma organização que reúne representantes de muitas empresas tecnológicas diferentes para trabalharem em conjunto na criação de especificações tecnológicas para a web. Depois disso seguiram-se outras tecnologias, tais como <a href="/pt-PT/docs/Web/CSS">CSS</a> e <a href="/pt-PT/docs/Web/JavaScript/">JavaScript</a>, e a web começou a parecer-se mais com a web que conhecemos hoje.</p>
-
-<h2 dir="ltr" id="Os_padrões_da_Web">Os padrões da Web</h2>
-
-<p>As <strong>normas / padrões da web</strong> são as tecnologias que utilizamos para construir websites. Estas normas existem como longos documentos técnicos chamados especificações, que detalham exactamente como a tecnologia deve funcionar. Estes documentos não são muito úteis para aprender a utilizar as tecnologias que descrevem (é por isso que temos sites como a MDN Web Docs), mas em vez disso destinam-se a ser utilizados por engenheiros de software para implementar estas tecnologias (geralmente em navegadores).</p>
-
-<p>Por exemplo, o <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> descreve exactamente como o HTML (todos os elementos HTML, e as suas APIs associadas, e outras tecnologias circundantes) deve ser implementado.</p>
-
-<p>As normas Web são criadas por organismos de normas — instituições que convidam grupos de pessoas de diferentes empresas tecnológicas a juntarem-se e acordarem sobre a melhor forma de como as tecnologias devem funcionar para cumprir todos os seus casos de utilização. O W3C é o organismo de normas Web mais conhecido, mas existem outros como o <a href="https://whatwg.org/">WHATWG</a> (que foi responsável pela modernização da linguagem HTML), <a href="https://www.ecma-international.org/">ECMA</a> (que publica a norma para ECMAScript, na qual o JavaScript se baseia), <a href="https://www.khronos.org/">Khronos</a> (que publica tecnologias para gráficos 3D, como o WebGL), e outros.</p>
-
-<h3 dir="ltr" id="Standards_abertos">Standards "abertos"</h3>
-
-<p dir="ltr">Um dos aspetos chave das normas <em>web</em>, que o TimBL e o W3C acordaram desde o início, é que a <em>web</em> (e as tecnologias <em>web</em>) devem ser livres de contribuir e utilizar, e não sobrecarregadas por patentes / licenciamento. Portanto, qualquer pessoa pode escrever o código para construir um <em>website</em> gratuitamente, e qualquer pessoa pode contribuir para o processo de criação de normas, onde as especificações são escritas.</p>
-
-<p dir="ltr">Porque as tecnologias <em>web</em> são criadas abertamente, numa colaboração entre várias empresas, isso significa que nenhuma empresa as consegue controlar, que é fantástico. Não se quer que uma única empresa decida subitamente colocar a <em>web</em> inteira atrás de uma <em>paywall</em>, ou lançar uma nova versão de HTML que todos têm de comprar para continuar a fazer <em>websites</em>, ou pior ainda, decidindo apenas que já não estão interessados e simplesmente desligando a <em>web</em>.</p>
-
-<p dir="ltr">Isto permite que a <em>web</em> continue a ser um recurso público disponível gratuitamente.</p>
-
-<h3 dir="ltr" id="Não_quebre_a_web">Não quebre a web</h3>
-
-<p dir="ltr">Outra frase que ouvirá em torno das normas abertas da <em>web</em> é "não quebre a <em>web</em>" — a ideia é que qualquer nova tecnologia <em>web</em> que seja introduzida deve ser retro compatível com o que existia antes (ou seja, os antigos <em>websites</em> continuarão a funcionar), e com o que existe atualmente (as futuras tecnologias, por sua vez, serão compatíveis com o que temos atualmente). Ao percorrer o material de aprendizagem aqui apresentado, começará a aprender como isto se torna possível com algum trabalho de conceção e implementação muito inteligente.</p>
-
-<h2 id="Ser_um_web_developer_é_bom">Ser um <em>web developer</em> é bom</h2>
-
-<p>A indústria da <em>web</em> é um mercado muito atrativo para entrar se estiver à procura de um emprego. Números recentemente publicados dizem que existem atualmente cerca de 19 milhões de <em>web developers</em> no mundo, e esse número é previsto mais que dobrar na próxima década. E, ao mesmo tempo, há uma escassez de competências na indústria — portanto, que melhor altura para aprender a desenvolvimento web?</p>
-
-<p>No entanto, nem tudo é brincadeira — construir <em>sites</em> é uma atividade mais complicada do que costumava ser, e terá de dedicar algum tempo ao estudo de todas as diferentes tecnologias que precisa de utilizar, todas as técnicas e melhores práticas que precisa de conhecer, e todos os padrões típicos que será necessário implementar. Vai levar alguns meses para começar realmente a ser proficiente, e depois terá de continuar a aprender para que o seu conhecimento se mantenha atualizado com todas as novas ferramentas e funcionalidades que aparecem na plataforma <em>web</em>, e continuar a praticar e a aperfeiçoar a sua arte.</p>
-
-<p><em>A única constante é a mudança.</em></p>
-
-<p>Isto parece-lhe difícil? Não se preocupe — o nosso objetivo é dar-lhe tudo o que precisa de saber para começar, e as coisas ficarão mais fáceis. Assim que aceitar a constante mudança e incerteza da <em>web</em>, começará a divertir-se. Como parte da comunidade <em>web</em>, terá uma rede de contactos e material útil para o ajudar, e começará a desfrutar das possibilidades criativas que ela lhe traz.</p>
-
-<p>Agora é um criativo digital. Desfrute da experiência.</p>
-
-<h2 id="Sinopse_das_tecnologias_modernas_da_Web">Sinopse das tecnologias modernas da Web</h2>
-
-<p>Há uma série de tecnologias a aprender se quiser ser um programador da <em>web</em> de <em>front-end</em>. Nesta secção iremos descrevê-las brevemente. Para uma explicação mais detalhada de como algumas delas funcionam em conjunto, leia o nosso artigo <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a <em>web</em></a>.</p>
-
-<h3 id="Navegadores">Navegadores</h3>
-
-<p>É provável que esteja a ler estas palavras dentro de um navegador neste preciso momento (a menos que o tenha imprimido, ou que esteja a utilizar tecnologia de assistência, tal como um leitor de ecrã para o ler). Os navegadores são os programas de software que as pessoas utilizam para consumir a web, e incluem o <a href="/pt-PT/docs/Mozilla/Firefox">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, e <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</a>.</p>
-
-<h3 id="HTTP">HTTP</h3>
-
-<p><em>Hypertext Transfer Protoco</em>l, ou HTTP, é um protocolo de transmissão de mensagens que permite aos navegadores Web comunicarem com servidores (onde os <em>websites</em> são armazenados). Uma conversa típica é algo como</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>A sintaxe das mensagens HTTP (chamadas pedidos e respostas) não é tão legível para o ser humano, mas isto dá-lhe a ideia básica.</p>
-
-<h3 id="HTML_CSS_e_JavaScript">HTML, CSS, e JavaScript</h3>
-
-<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, e <a href="/en-US/docs/Web/JavaScript">JavaScript</a> são as três tecnologias principais que irá usar para construir um <em>site</em>:</p>
-
-<ul>
- <li>
-  <p>A linguagem de marcação de hipertexto, ou <strong>HTML</strong>, é uma linguagem de marcação que consiste em diferentes elementos em que se pode embrulhar (marcar) conteúdo para lhe dar significado (semântica) e estrutura. O HTML tem este aspeto:</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>Se adotarmos uma analogia de construção de casa, o HTML seria como as fundações e as paredes da casa, que lhe dão estrutura e a mantêm unida.</p>
- </li>
- <li>
-  <p>Cascading Style Sheets (<strong>CSS</strong>) é uma linguagem baseada em regras para aplicar estilos ao seu HTML, por exemplo, definir cores de texto e de fundo, adicionar bordas, animar coisas, ou colocar uma página de uma certa forma. Como um exemplo simples, o seguinte código tornaria o nosso parágrafo HTML vermelho:</p>
-
-  <pre class="brush: css notranslate">p  {
-  color: red;
-}</pre>
-
-  <p>Usando a analogia da casa, CSS é a tinta, papel de parede, tapetes e pinturas que usaria para fazer a casa parecer bonita.</p>
- </li>
- <li>
-  <p><strong>JavaScript</strong> é a linguagem de programação que utilizamos para adicionar interatividade aos <em>websites</em>, da mudança de estilo dinâmico, até à obtenção de atualizações a partir do servidor, passando por gráficos complexos em 3D. O seguinte JavaScript armazena uma referência ao nosso parágrafo na memória e depois altera o texto:</p>
-
-  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
-pElem.textContent =  'We changed the text!';</pre>
-
-  <p>Na analogia da casa, o JavaScript é como o fogão, TV, Microondas, ou secador de cabelo — as coisas que dão à sua casa uma funcionalidade útil.</p>
- </li>
-</ul>
-
-<h3 id="Tooling"><em>Tooling</em></h3>
-
-<p>Uma vez aprendidas as tecnologias de base que podem ser usadas para construir páginas <em>web</em> (como HTML, CSS, e JavaScript), em breve começará a deparar-se com várias ferramentas que podem ser usadas para tornar o seu trabalho mais fácil ou mais eficiente. Os exemplos incluem:</p>
-
-<ul>
- <li>As <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">ferramentas de programação</a> em navegadores modernos que podem ser usados para <em>debug</em> os seus <em>sites</em>.</li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Ferramentas de teste</a> que podem ser usadas para testar se o seu código está a agir da forma desejada.</li>
- <li>Bibliotecas e <em>frameworks</em> construidas com JavaScript que permitem construir certos <em>websites</em> dum modo mais rápido e eficiente.</li>
- <li><em>Linters</em>, que usando uma série de regras, processam o seu código e realcem os lugares onde as regras não foram seguidas corretamente.</li>
- <li><em>Minifiers</em>, que remove <em>whitespace</em> desnecessário de ficheiros com o seu código para diminuir o seu tamanho e permitir que sejam descarregados mais rapidamente.</li>
-</ul>
-
-<h3 id="Linguagens_de_lado_de_servidor_e_frameworks">Linguagens de lado de servidor e <em>frameworks</em></h3>
-
-<p>HTML, CSS, e JavaScript são linguagens de <em>front-end</em> (ou <em>client-side</em>), que significa que eles são processados pelo navegador para produzir a interface dum <em>website</em> que os seus utilizadores possam usar.</p>
-
-<p>Há outra classe de línguas chamada de <em>back-end</em> (ou línguas do lado do servidor), o que significa que são executadas no servidor antes de o resultado ser então enviado para o navegador para ser exibido. Uma utilização típica para uma linguagem do lado do servidor é obter alguns dados de uma base de dados e gerar algum HTML para conter os dados, antes de depois enviar o HTML para o navegador para o exibir ao utilizador.</p>
-
-<p>Exemplos de linguagens de lado de servidor incluem C#, Python, PHP e Java.</p>
-
-<h2 id="As_melhores_práticas_da_Web">As melhores práticas da Web</h2>
-
-<p>Falámos brevemente sobre as tecnologias que irá utilizar para construir sítios <em>web</em>. Agora vamos discutir as melhores práticas que deverá empregar para se certificar de que está a utilizar essas tecnologias o melhor possível.</p>
-
-<p>Ao fazer desenvolvimento web, a principal causa de incerteza advém do facto de não se saber que combinação de tecnologia cada utilizador utilizará para visualizar o seu <em>site</em>:</p>
-
-<ul>
- <li>Utilizador 1 pode estar a usar um iPhone, com um ecrã pequeno e estreito.</li>
- <li>Utilizador 2 pode estar a usar um portátil de Windows com um ecrã <em>widescreen</em>.</li>
- <li>Utilizador 3 pode ser cego e usar um leitor de ecrã para ler a página da <em>web</em>.</li>
- <li>Utilizador 4 pode estar a usar um computador antigo que não consegue correr navegadores modernos.</li>
-</ul>
-
-<p>Como não sabe exatamente o que os seus utilizadores irão usar, precisa de planear defensivamente - tornar o seu <em>site</em> tão flexível quanto possível, para que todos os utilizadores acima mencionados possam fazer uso dele, mesmo que nem todos possam ter a mesma experiência. Em resumo, estamos a tentar fazer com que a <em>web</em> funcione para todos, tanto quanto possível.</p>
-
-<p>Encontrará os conceitos abaixo em algum momento dos seus estudos.</p>
-
-<ul>
- <li><strong>Compatibilidade entre navegadores</strong> é a prática de tentar assegurar-se de que a sua página <em>web</em> funciona com o maior número de dispositivos possível. Isto inclui a utilização de tecnologias que todos os navegadores suportam, proporcionando melhores experiências aos navegadores que podem lidar com eles (melhoramento progressivo), e/ou escrever código de modo que caia de novo numa experiência mais simples, mas ainda utilizável em navegadores mais antigos (degradação graciosa). Também envolve muitos testes para ver se algo falha em certos navegadores, e depois mais trabalho para corrigir essas falhas.</li>
- <li><strong>Web design reactivo</strong> é a prática de tornar a sua funcionalidade e <em>layouts</em> flexíveis, para que se possam adaptar automaticamente a diferentes navegadores. Um exemplo óbvio é um <em>website</em> que é apresentado de uma forma num navegador de ecrã panorâmico no ambiente de trabalho, mas que se apresenta como um <em>layout</em> mais compacto e de uma só coluna nos navegadores de telemóveis. Tente ajustar agora a largura da janela do seu navegador, e veja o que acontece.</li>
- <li><strong>Performance</strong> significa fazer com que os websites sejam carregados o mais rapidamente possível, mas também torná-los intuitivos e fáceis de usar para que os utilizadores não fiquem frustrados e vão para outro lugar.</li>
- <li><strong>Acessibilidade</strong> significa tornar os seus <em>sites</em> utilizáveis pelo maior número possível de diferentes pessoas (conceitos relacionados são diversidade e inclusão, e design inclusivo). Isto inclui pessoas com deficiências visuais, auditivas, cognitivas, ou físicas. Também vai além das pessoas com deficiências - que tal jovens ou idosos, pessoas de culturas diferentes, utilizadores de dispositivos móveis, ou pessoas com ligações de rede pouco fiáveis ou lentas?</li>
- <li><strong>Internacionalização</strong> significa tornar os <em>websites</em> utilizáveis por pessoas de culturas diferentes, que falam línguas diferentes das suas. Há aqui considerações técnicas (tais como alterar o seu <em>layout</em> para que ainda funcione bem para as línguas da direita para a esquerda, ou mesmo verticais), e humanas (tais como utilizar uma linguagem simples e não linguística para que as pessoas que têm a sua língua como segunda ou terceira língua tenham mais probabilidades de compreender o seu texto).</li>
- <li><strong>Privacidade &amp; Segurança</strong>. Estes dois conceitos estão relacionados, mas são diferentes. A privacidade refere-se a permitir que as pessoas se dediquem aos seus negócios em privado e não as espiar ou recolher mais dos seus dados do que é absolutamente necessário. Segurança refere-se à construção do seu <em>website</em> de forma segura para que os utilizadores maliciosos não possam roubar-lhe ou aos seus utilizadores a informação nele contida.</li>
-</ul>
-
-<h2 dir="ltr" id="Ver_também">Ver também</h2>
-
-<ul dir="ltr">
- <li><a href="https://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_World_Wide_Web">História da World Wide Web</a></li>
- <li><a href="/pt-PT/docs/Learn/Questoes_comuns/Como_funciona_a_Internet">Como funciona a Internet?</a></li>
-</ul>
-
-<ul dir="ltr">
-</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
deleted file mode 100644
index 8ca05fe1cb..0000000000
--- a/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Qual será a aparência do seu site da Web?
-slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
-tags:
-  - Aprender
-  - Beginner
-  - Conteúdo
-  - Design
-  - Planear
-  - Tipos de Letra
-  - l10n:priority
-translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
-original_slug: Learn/Comecar_com_a_Web/Apresentacao_do_meu_site
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Installing_basic_software", "Learn/Comecar_com_a_Web/Lidar_com_ficheiros", "Learn/Comecar_com_a_Web")}}</div>
-
-<div class="summary">
-<p>Este artigo descreve o planeamento e conceptualização necessários antes de escrever o código do site da internet, incluindo "Que informação é que o meu site oferece?", "Quais os tipos de letra e cores que eu quero?" e ​​"O que é que o meu site faz?"</p>
-</div>
-
-<h2 id="Antes_de_tudo_planeamento">Antes de tudo: planeamento</h2>
-
-<p>Antes de fazer o que quer que seja, precisa de algumas ideias. O que é que o seu site realmente deve fazer? Um site pode fazer qualquer coisa, mas para a sua primeira tentativa, procure manter as coisas simples. Vamos começar a criar uma página <em>web</em> simples com um cabeçalho, uma imagem e alguns parágrafos.</p>
-
-<p>Para começar, irá precisar de responder a estas questões:</p>
-
-<ol>
- <li><strong>De que se trata o seu site da Web? </strong>Gosta de cães, Nova Iorque, ou Pac-Man?</li>
- <li><strong>Que informação é que vai apresentar acerca o assunto? </strong>Escreva um título e alguns parágrafos, e pense numa imagem que gostaria de mostrar na sua página.</li>
- <li><strong>Como será apresentado o seu site da Web, </strong>em termos simples de alto nível? Qual é a cor de fundo? Que tipo de letra é apropriado: formal, desenhos, negrito e tom alto, subtil?</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: Projetos complexos precisam de diretrizes detalhadas que abordem todos os detalhes de cores, tipos de letra, espaçamento entre elementos de uma página, estilo de escrita apropriado, e assim por diante. Isto às vezes é chamado guia de desenho ou livro de marca, e pode ver um exemplo em  <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS - Orientações</a> (inglês).</p>
-</div>
-
-<h2 id="Esboçar_o_seu_desenho">Esboçar o seu desenho</h2>
-
-<p>A seguir, pegue numa caneta e papel e crie um esboço do layout do seu site. Para a sua primeira página, não há muito o que esboçar, mas deve adquirir o hábito de fazer isso agora. Isto é mesmo uma grande ajuda — não tem que 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 a sérios, complexos, a equipa de <em>design</em> costuma começar com esboços grosseiros em papel e mais tarde constrói maquetas digitais com um editor de imagem ou tecnologias web.</p>
-
-<p>Equipas de desenvolvimento web geralmente incluem um designer gráfico e um designer {{Glossary("UX", "user-experience")}} (UX). Obviamente, os designers gráficos montam os elementos visuais do site. Designers UX têm um papel mais abstrato, que consiste em abordar a forma como utilizadores vão experimentar e interagir com o site.</p>
-</div>
-
-<h2 id="Escolha_do_conteúdo">Escolha do conteúdo</h2>
-
-<p>Nesta altura, é boa ideia começar a criar o conteúdo que virá a aparecer na sua página da internet.</p>
-
-<h3 id="Texto">Texto</h3>
-
-<p>Ainda deve ter o parágrafo e títulos de há bocado. Mantenha-os por perto.</p>
-
-<h3 id="Cor_do_tema">Cor do tema</h3>
-
-<p>Para escolher uma cor, vá ao <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">Seletor de Cores</a> e encontre uma cor de que gosta. Quando clicar numa cor, vai ver um código estranho com seis caracteres, tal como <code>#660066</code>. Este é um código hexadecimal que representa um tom de cor específico. Aponte o código num local de fácil acesso.</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 imagem, pesquise <a href="https://www.google.com/imghp?gws_rd=ssl">Images no Google</a> procure algo adequado.</p>
-
-<ol>
- <li>Quando encontrar a imagem que quer, clique nela.</li>
- <li>Prima o botão <em>Ver imagem</em>.</li>
- <li>Na página seguinte, carregue o botão direito do rato (Ctrl + clique nos Mac), escolha <em>Guardar imagem como...</em>, e escolha um lugar seguro para guardar a imagem. Em alternativa, copie o endereço da imagem da barra de endereço do seu navegador para a utilizar mais tarde.</li>
-</ol>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
-
-<div class="note">
-<p><strong>Nota</strong>: A maioria das imagens, incluindo na pesquisa de Imagens do Google, estão protegidas por direitos de autor. Para reduzir probabilidades de violar estes direitos, pode usar o filtro de licença do  Google. Primeiro, clique em <strong>Ferramentas de Pesquisa</strong>, e depois em <strong>Direitos de utilização</strong>:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
-</div>
-
-<h3 id="Tipo_de_letra">Tipo de letra</h3>
-
-<p>Para escolher um tipo de letra:</p>
-
-<ol>
- <li>Vá ao <a href="http://www.google.com/fonts">Google Fonts</a> e deslize para baixo até encontrar um de que goste. Também pode usar os controlos à direita para filtrar resultados.</li>
- <li>Clique no ícone "mais" (Adicionar) perto do tipo de letra que escolheu.</li>
- <li>Clique no botão "* Family Selected"<em> </em>no painel no fim da página ("*" será o número de tipos de letra selecionados).</li>
- <li>Na caixa apresentada, copie as linhas de código que o Google lhe dará para um editor de texto e guarde para utilizar mais tarde.</li>
-</ol>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p>
-
-<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Installing_basic_software", "Learn/Comecar_com_a_Web/Lidar_com_ficheiros", "Learn/Comecar_com_a_Web")}}</div>
-
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
- <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Qual será a aparência do seu site da Web?</a></li>
- <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
- <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
- <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
- <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
- <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></li>
- <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a></li>
-</ul>
diff --git a/files/pt-pt/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/pt-pt/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
deleted file mode 100644
index fa960426d1..0000000000
--- a/files/pt-pt/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: Adicionar um mapa de zona clicável numa imagem
-slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
-translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
-original_slug: Learn/HTML/Como/Adicionar_um_mapa_de_zona_clicavel_numa_imagem
----
-<div class="summary">
-<p>Aqui, nós explicamos como configurar um mapa de imagens, e algumas desvantagens para considerar primeiro.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Já deverá saber como <a href="/pt-PT/docs/Learn/Comecar_com_a_Web">criar um documento HTML básico</a> e como <a href="/pt-PT/docs/Learn/HTML/Multimedia_and_embedding/Imagens_em_HTML">adicionar imagens acessíveis para uma página da Web.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Learn how to make different regions of one image link to different pages.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="warning">
-<p>This article discusses client-side image maps only. Do not use server-side image maps, which require the user to have a mouse.</p>
-</div>
-
-<h2 id="Mapas_de_imagens_e_as_suas_desvantagens">Mapas de imagens, e as suas desvantagens</h2>
-
-<p>When you nest an image inside {{htmlelement('a')}}, the entire image links to one webpage. An image map, on the other hand, contains several active regions (called "hotspots") that each link to a different resource.</p>
-
-<p>Formerly, image maps were a popular navigation device, but it’s important to thoroughly consider their performance and accessibility ramifications.</p>
-
-<p><a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Create_a_hyperlink">Text links</a> (perhaps styled with CSS) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more SEO-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services).</p>
-
-<h2 id="Como_inserir_uma_imagem_de_mapa_devidamente">Como inserir uma imagem de mapa, devidamente</h2>
-
-<h3 id="Passo_1_A_imagem">Passo 1: A imagem</h3>
-
-<p>Nem qualquer imagem é aceitável.</p>
-
-<ul>
- <li>The image must make it clear what happens when people follow image links. <code>alt</code> text is mandatory, of course, but many people never see it.</li>
- <li>The image must clearly indicate where hotspots begin and end.</li>
- <li>Hotspots must be large enough to tap comfortably, at any viewport size. How large is large enough? <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">72 × 72 CSS pixels is a good minimum,</a> with additional generous gaps between touch targets. The map of the world at <a href="http://www.goethe-verlag.com/book2/">50languages.com</a> (as of time of writing) illustrates the problem perfectly. It’s much easier to tap Russia or North America than Albania or Estonia.</li>
-</ul>
-
-<p>You insert your image <a href="http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">much the same way as always</a> (with an {{htmlelement("img")}} element and {{htmlattrxref("alt",'img')}} text). If the image is only present as a navigation device, you may write <code>alt=""</code>, provided you furnish appropriate {{htmlattrxref("alt",'area')}} text in the {{htmlelement('area')}} elements later on.</p>
-
-<p>You will need a special {{htmlattrxref("usemap","img")}} attribute. Come up with a unique name, containing no spaces, for your image map. Then assign that name (preceded by a hash) as the value for the <code>usemap</code> attribute:</p>
-
-<pre class="brush: html">&lt;img
-  src="image-map.png"
-  alt=""
-  usemap="#example-map-1" /&gt;</pre>
-
-<h3 id="Passo_2_Ativar_os_seus_pontos_de_hotspots">Passo 2: Ativar os seus pontos de <em>hotspots</em></h3>
-
-<p>In this step, put all your code inside a {{htmlelement('map')}} element. <code>&lt;map&gt;</code> only needs one attribute, the same map {{htmlattrxref("name","map")}} as you used in your <code>usemap</code> attribute above:</p>
-
-<pre class="brush: html">&lt;map name="example-map-1"&gt;
-
-&lt;/map&gt;</pre>
-
-<p>Inside the <code>&lt;map&gt;</code> element, we need {{htmlelement('area')}} elements. An <code>&lt;area&gt;</code> element corresponds to a single hotspot. To keep keyboard navigation intuitive, make sure the source order of <code>&lt;area&gt;</code> elements corresponds to the visual order of hotspots.</p>
-
-<p><code>&lt;area&gt;</code> elements are empty elements, but do require four attributes:</p>
-
-<dl>
- <dt>{{htmlattrxref('shape','area')}}</dt>
- <dt>{{htmlattrxref('coords','area')}}</dt>
- <dd>
- <p><code>shape</code> takes one of four values: <code>circle</code>, <code>rect</code>, <code>poly</code>, and <code>default</code>. (A <code>default</code> <code>&lt;area&gt;</code> occupies the entire image, minus any other hotspots you’ve defined.) The shape you choose determines the coordinate information you’ll need to provide in <code>coords</code>.</p>
-
- <ul>
-  <li>For a circle, provide the center's x and y coordinates, followed by the length of the radius.</li>
-  <li>For a rectangle, provide the x/y coordinates of the upper-left and bottom-right corners.</li>
-  <li>For a polygon, to provide the x/y coordinates of each corner (so, at least six values).</li>
- </ul>
-
- <p>Coordinates are given in CSS pixels.</p>
-
- <p>In case of overlap, source order carries the day.</p>
- </dd>
- <dt>{{htmlattrxref('href','area')}}</dt>
- <dd>The URL of the resource you’re linking to. You may leave this attribute blank if you <em>don’t</em> want the current area to link anywhere (say, if you’re making a hollow circle.)</dd>
- <dt>{{htmlattrxref('alt','area')}}</dt>
- <dd>
- <p>A mandatory attribute, telling people where the link goes or what it does. <code>alt</code> text only displays when the image is unavailable. Please refer to our <a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Create_a_hyperlink#Writing_accessible_link_text">guidelines for writing accessible link text.</a></p>
-
- <p>You may write <code>alt=""</code> if the <code>href</code> attribute is blank <em>and</em> the entire image already has an <code>alt</code> attribute.</p>
- </dd>
-</dl>
-
-<pre class="brush: html">&lt;map name="example-map-1"&gt;
-  &lt;area shape="circle" coords="200,250,25"
-    href="page-2.html" alt="circle example" /&gt;
-
-
-  &lt;area shape="rect" coords="10, 5, 20, 15"
-    href="page-3.html" alt="rectangle example" /&gt;
-
-&lt;/map&gt;</pre>
-
-<h3 id="Passo_3_Certificar-se_de_que_este_funciona_para_toda_a_gente">Passo 3: Certificar-se de que este funciona para toda a gente</h3>
-
-<p>You aren’t done until you test image maps rigorously on many browsers and devices. Try following links with your keyboard alone. Try turning images off.</p>
-
-<p>If your image map is wider than about 240px, you’ll need to make further adjustments to make your website responsive. It's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image.</p>
-
-<p>If you must use image maps, you may want to look into <a href="https://github.com/stowball/jQuery-rwdImageMaps">Matt Stow's jQuery plugin.</a> Alternatively, Dudley Storey demonstrates a way to <a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">use SVG for an image map effect,</a> along with a subsequent <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">combined SVG-raster hack</a> for bitmap images.</p>
-
-<h2 id="Saiba_mais">Saiba mais</h2>
-
-<ul>
- <li>{{htmlelement("img")}}</li>
- <li>{{htmlelement("map")}}</li>
- <li>{{htmlelement("area")}}</li>
- <li><a href="http://www.maschek.hu/imagemap/imgmap">Online image map editor</a></li>
- <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Advice on handling email clients</a></li>
-</ul>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody>
-  <tr>
-   <td class="SL_td"><input></td>
-   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-   </td>
-   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_font_patch"> </div>
-
-    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody>
-  <tr>
-   <td><input></td>
-   <td>
-    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-   </td>
-   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/html/howto/index.html b/files/pt-pt/learn/html/howto/index.html
deleted file mode 100644
index 44c2f1535b..0000000000
--- a/files/pt-pt/learn/html/howto/index.html
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: Utilizar HTML para resolver problemas comuns
-slug: Learn/HTML/Howto
-tags:
-  - HTML
-  - Programação Scripting
-translation_of: Learn/HTML/Howto
-original_slug: Learn/HTML/Como
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">As seguintes hiperligações apontam para soluções de problemas comuns diários que terá de resolver com HTML.</p>
-
-<div class="column-container">
-<div class="column-half">
-<h3 id="Estrutura_básica">Estrutura básica</h3>
-
-<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
-
-<ul>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">How to create a basic HTML document</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">How to set up a proper structure of headings and paragraphs</a></li>
-</ul>
-
-<h3 id="Semântica_de_nível_de_texto_básica">Semântica de nível de texto básica</h3>
-
-<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p>
-
-<ul>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">How to create list of items with HTML</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to stress or emphasize content</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to indicate that text is important</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">How to display computer code with HTML</a></li>
- <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">How to annotate images and graphics</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">How to add quotations and citations to webpages</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<h3 id="Hiperligações">Hiperligações</h3>
-
-<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
-
-<ul>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">How to create a hyperlink</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li>
-</ul>
-
-<h3 id="Imagens_e_multimédia">Imagens e 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">How to add images to a webpage</a></li>
- <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li>
- <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add audio content to a webpage</a></li>
-</ul>
-
-<h3 id="Scripting_e_estilização"><em>Scripting </em>e estilização</h3>
-
-<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to use CSS within a webpage</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
-</ul>
-
-<h3 id="Conteúdo_integrado">Conteúdo integrado</h3>
-
-<ul>
- <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li>
- <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li>
-</ul>
-</div>
-</div>
-
-<h2 id="Problemas_incomuns_ou_avançados">Problemas incomuns ou avançados</h2>
-
-<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p>
-
-<div class="column-container">
-<div class="column-half">
-<h3 id="Formulários">Formulários</h3>
-
-<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
-
-<ul>
- <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
- <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
-</ul>
-
-<h3 id="Informação_tabular">Informação tabular</h3>
-
-<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</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">How to represent numeric values with HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
-</ul>
-
-<h3 id="Interatividade">Interatividade</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<h3 id="Semântica_de_texto_avançada">Semântica de texto avançada</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
-</ul>
-
-<h3 id="Imagens_e_multimédia_avançadas">Imagens e multimédia avançadas</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
-</ul>
-
-<h3 id="Internacionalização">Internacionalização</h3>
-
-<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
-</ul>
-
-<h3 id="Desempenho">Desempenho</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</a></li>
-</ul>
-</div>
-</div>
-
-<p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span> </p>
diff --git a/files/pt-pt/learn/html/index.html b/files/pt-pt/learn/html/index.html
deleted file mode 100644
index 590612f435..0000000000
--- a/files/pt-pt/learn/html/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Estruturar a Web com HTML
-slug: Learn/HTML
-tags:
-  - Apredizagem
-  - Guía
-  - HTML
-  - Introdução
-  - Principiante
-  - Tópico
-translation_of: Learn/HTML
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Para criar <em>sites </em>da <em>Web</em>, deverá saber sobre {{Glossary('HTML')}} — a tecnologia fundamental para definir a estrutura de uma página da W<em>eb</em>. HTML é utilizado para especificar se o seu conteúdo da Web deve ser reconhecido como um parágrafo, lista, cabeçalho, hiperligação, imagem, leitor de multimédia, formulário, ou um dos muitos outros elementos disponíveis ou mesmo um novo elemento que defina.</p>
-
-<h2 id="Passos_de_aprendizagem">Passos de aprendizagem</h2>
-
-<p>Idealmente, deveria começar a sua jornada de aprendizagem aprendendo HTML. Comece a ler <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a>. Depois pode passar para a aprendizagem sobre os tópicos mais avançados, tais como:</p>
-
-<ul>
- <li><a href="/pt-PT/docs/Learn/CSS">CSS</a>, e como o utilizar para estilizar HTML (por exemplo, alterar os tipos e tamanhos de fontes do seu texto, colocar bordas e aplicar sombras, desenhar sua página com múltiplas colunas, agregar animações e outros efeitos visuais.) </li>
- <li><a href="/pt-PT/docs/Learn/JavaScript">JavaScript</a>, e como o utilizar para adicioanr funcionalidade dinâmica às páginas da Web ( por exemplo, encontrar a sua posição e mostrá-la num mapa, fazer com que os elementos UI apareçam/desapareçam quando alterna um botão, guardar os dados dos utilizadores localmente nos seus computadores, e muito, muito mais.) </li>
-</ul>
-
-<p>Antes de iniciar este tópico, deve estar pelo menos familizado com o uso de computadores, e ser um usuário da Web (i.e. ser um usuário que acessa a Web e consuma o conteúdo).  Você deverá ter um trabalho básico de configurar um ambiente como detalhado em  <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Installing basic software</a>, e entender como criar e manusear arquivos, como detalhado em a <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — ambos são partes do nosso módulo completo para iniciantes <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a>.</p>
-
-<p>É recomendado que inicie com <a href="/pt-PT/docs/Learn/Getting_started_with_the_web">Primeiros passos na Web</a> antes de tentar este tópico, no entanto isto não é absolutamente necessário; muito do que está apresentado no artigo <a href="/pt-PT/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML - Essencial</a> também está coberto no nosso módulo de <a href="/pt-PT/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a> com um pouco mais de detalhe. </p>
-
-<h2 id="Módulos">Módulos</h2>
-
-<dl>
- <dt>Este tópico contém os seguintes módulos, numa ordem sugerida para trabalhar com eles. Deve-se definitivamente começar com o primeiro.</dt>
- <dt></dt>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a> </dt>
-</dl>
-
-<dl>
- <dd>Este módulo prepara o palco, levando você a usar importantes conceitos e sintaxe, procurando aplicar HTML ao texto, como criar hiperlinks e como usar HTML para estruturar uma webpage.</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Multimedia_e_integracao">Multimédia e integração</a></dt>
- <dd>Este  módulo explora como usar HTML para incluir multimidia nas tuas páginas web, inclisive sobre as diferentes formas de fazê-lo e como imbutir videos e até outras páginas web inteiras.</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Tables">Tabelas HTML</a></dt>
- <dd>Como apresentar dados de forma organizada na página web de compreensível pode ser um desafio. Este módulo apresenta as formas básica de organizar tabelas, permitindo organizar características complexas como implementar legendas e sumários.          {{glossary("Accessibility", "Consulte")}} </dd>
-</dl>
-
-<h2 id="Resolver_problemas_de_HTML_comuns">Resolver problemas de HTML comuns</h2>
-
-<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> oferece links para seções com conteúdo que explanam como usar HTML para resolver os problemas mais comuns quando se cria webpage: lidando com títulos, acresentando imagens e vídeos, separando conteúdo, criando formas básicas, etc.</p>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<div class="document-head" id="wiki-document-head">
-<dl>
- <dt></dt>
- <dt><a href="https://wiki.developer.mozilla.org/pt-PT/docs/Learn/HTML/Forms">Formulários da Web</a></dt>
- <dd>This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons it's not always obvious how to use them to their full potential. We'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server.</dd>
- <dt><a href="/pt-PT/docs/Web/HTML">HTML (Linguagem de Marcação de Hipertexto)</a></dt>
- <dd>The main entry point for HTML reference documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd>
-</dl>
-</div>
diff --git a/files/pt-pt/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/pt-pt/learn/html/introduction_to_html/advanced_text_formatting/index.html
deleted file mode 100644
index 009c2cb6c0..0000000000
--- a/files/pt-pt/learn/html/introduction_to_html/advanced_text_formatting/index.html
+++ /dev/null
@@ -1,692 +0,0 @@
----
-title: Formatação avançada de texto
-slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
-tags:
-  - Aprender
-  - Guía
-  - HTML
-  - Principiante
-  - Texto
-  - abreviatura
-  - semántica
-translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
-original_slug: Learn/HTML/Introducao_ao_HTML/Formatacao_avancada_texto
----
-<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 class="summary">There are many other elements in HTML for formatting text, which we didn't get to in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> article. The elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). Here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To learn how to use lesser-known HTML elements to mark up advanced semantic features.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Description_lists">Description lists</h2>
-
-<p>In HTML text fundamentals, we walked through how to <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">mark up basic lists</a> in HTML, but we didn't mention the third type of list you'll occasionally come across — <strong>description lists</strong>. The purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. Let's look at an example of a set of terms and definitions:</p>
-
-<pre>soliloquy
-In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
-monologue
-In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
-aside
-In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information</pre>
-
-<p>Description lists use a different wrapper than the other list types — {{htmlelement("dl")}}; in addition each term is wrapped in a {{htmlelement("dt")}} (description term) element, and each description is wrapped in a {{htmlelement("dd")}} (description definition) element. Let's finish marking up our example:</p>
-
-<pre class="brush: html">&lt;dl&gt;
-  &lt;dt&gt;soliloquy&lt;/dt&gt;
-  &lt;dd&gt;In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)&lt;/dd&gt;
-  &lt;dt&gt;monologue&lt;/dt&gt;
-  &lt;dd&gt;In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.&lt;/dd&gt;
-  &lt;dt&gt;aside&lt;/dt&gt;
-  &lt;dd&gt;In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.&lt;/dd&gt;
-&lt;/dl&gt;</pre>
-
-<p>The browser default styles will display description lists with the descriptions indented somewhat from the terms. MDN's styles follow this convention fairly closely, but also embolden the terms for extra definition.</p>
-
-<dl>
- <dt>soliloquy</dt>
- <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
- <dt>monologue</dt>
- <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
- <dt>aside</dt>
- <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
-</dl>
-
-<p>Note that it is permitted to have a single term with multiple descriptions, for example:</p>
-
-<dl>
- <dt>aside</dt>
- <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
- <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
-</dl>
-
-<h3 id="Active_learning_Marking_up_a_set_of_definitions">Active learning: Marking up a set of definitions</h3>
-
-<p>It's time to try your hand at description lists; add elements to the raw text in the <em>Input</em> field so that it appears as a description list in the <em>Output</em> field. You could try using your own terms and descriptions if you like.</p>
-
-<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p>
-
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<p> </p>
-
-<pre class="brush: html">&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="min-height: 100px; width: 95%"&gt;
-Bacon
-The glue that binds the world together.
-Eggs
-The glue that binds the cake together.
-Coffee
-The drink that gets the world running in the morning.
-A light brown color.&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> </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> </p>
-
-<pre class="brush: js">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 = '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 htmlSolution = '&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;';
-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 === 'Show solution') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Quotations">Quotations</h2>
-
-<p>HTML also has features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation.</p>
-
-<h3 id="Blockquotes">Blockquotes</h3>
-
-<p>If a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a {{htmlelement("blockquote")}} element to signify this, and include a URL pointing to the source of the quote inside a {{htmlattrxref("cite","blockquote")}} attribute. For example, the following markup is taken from the MDN <code>&lt;blockquote&gt;</code> element page:</p>
-
-<pre class="brush: html">&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>To turn this into a block quote, we would just do this:</p>
-
-<pre class="brush: html">&lt;blockquote cite="https://developer.mozilla.org/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>Browser default styling will render this as an indented paragraph, as an indicator that it is a quote; MDN does this, but also adds some extra styling:</p>
-
-<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
-<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
-</blockquote>
-
-<h3 id="Inline_quotations">Inline quotations</h3>
-
-<p>Inline quotations work in exactly the same way, except that they use the {{htmlelement("q")}} element. For example, the below bit of markup contains a quotation from the MDN <code>&lt;q&gt;</code> page:</p>
-
-<pre class="brush: html">&lt;p&gt;The quote element — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — is &lt;q cite="https://developer.mozilla.org/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>Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:</p>
-
-<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q></p>
-
-<h3 id="Citations">Citations</h3>
-
-<p>The content of the {{htmlattrxref("cite","blockquote")}} attribute sounds useful, but unfortunately browsers, screenreaders, etc. don't really do much with it. There is no way to get the browser to display the contents of <code>cite</code>, without writing your own solution using JavaScript or CSS. If you want to make the source of the quotation available on the page you need to make it available in the text via a link or some other appropriate way.</p>
-
-<p>There is a {{htmlelement("cite")}} element, but this is meant to contain the title of the resource being quoted, e.g. the name of the book. There is no reason however why you couldn't link the text inside <code>&lt;cite&gt;</code> to the quote source in some way:</p>
-
-<pre class="brush: html">&lt;p&gt;According to the &lt;a href="https://developer.mozilla.org/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="https://developer.mozilla.org/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="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;intended
-for short quotations that don't require paragraph breaks.&lt;/q&gt; -- &lt;a href="https://developer.mozilla.org/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>Citations are styled in italic font by default. You can see this code at work in our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> example.</p>
-
-<h3 id="Active_learning_Who_said_that">Active learning: Who said that?</h3>
-
-<p>Time for another active learning example! In this example we'd like you to:</p>
-
-<ol>
- <li>Turn the middle paragraph into a blockquote, which includes a <code>cite</code> attribute.</li>
- <li>Turn part of the third paragraph into an inline quote, which includes a <code>cite</code> attribute.</li>
- <li>Include a <code>&lt;cite&gt;</code> element for each link to say what the title of the quoted source is.</li>
-</ol>
-
-<p>The citation sources you need are:</p>
-
-<ul>
- <li>http://www.brainyquote.com/quotes/authors/c/confucius.html for the Confucius quote</li>
- <li>http://www.affirmationsforpositivethinking.com/index.htm for "The Need To Eliminate Negative Self Talk".</li>
-</ul>
-
-<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p>
-
-<div class="hidden">
-<h6 id="Playable_code_2">Playable code 2</h6>
-
-<pre class="brush: html">&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="min-height: 150px; width: 95%"&gt;
-&lt;p&gt;Hello and welcome to my motivation page. As Confucius' quotes site says:&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;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 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 = '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 htmlSolution = '&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\' quotes site&lt;/cite&gt;&lt;/a&gt; says:&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;';
-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 === 'Show solution') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Abbreviations">Abbreviations</h2>
-
-<p>Another fairly common element you'll meet when looking around the Web is {{htmlelement("abbr")}} — this is used to wrap around an abbreviation or acronym, and provide a full expansion of the term (included inside a {{htmlattrxref("title")}} attribute.) Let's look at a couple of examples:</p>
-
-<pre>&lt;p&gt;We use &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; to structure our web documents.&lt;/p&gt;
-
-&lt;p&gt;I think &lt;abbr title="Reverend"&gt;Rev.&lt;/abbr&gt; Green did it in the kitchen with the chainsaw.&lt;/p&gt;</pre>
-
-<p>These will come out looking something like this (the expansion will appear in a tooltip when the term is hovered over):</p>
-
-<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
-
-<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
-
-<div class="note">
-<p><strong>Note</strong>: There is another element, {{htmlelement("acronym")}}, which basically does the same thing as <code>&lt;abbr&gt;</code>, and was intended specifically for acronyms rather than abbreviations. This however has fallen into disuse — it wasn't supported in browsers as well as <code>&lt;abbr&gt;</code>, and has such a similar function that it was considered pointless to have both. Just use <code>&lt;abbr&gt;</code> instead.</p>
-</div>
-
-<h3 id="Active_learning_marking_up_an_abbreviation">Active learning: marking up an abbreviation</h3>
-
-<p>For this simple active learning assignment, we'd like you to simply mark up an abbreviation. You can use our sample below, or replace it with one of your own. </p>
-
-<div class="hidden">
-<h6 id="Playable_code_3">Playable code</h6>
-
-<p> </p>
-
-<pre class="brush: html">&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="min-height: 50px; width: 95%"&gt;
-&lt;p&gt;NASA sure does some exciting work.&lt;/p&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>
-
-<p> </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> </p>
-
-<pre class="brush: js">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 = '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 htmlSolution = '&lt;p&gt;&lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; sure does some exciting work.&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 === 'Show solution') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-
-<p> </p>
-
-<p> </p>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Marking_up_contact_details">Marking up contact details</h2>
-
-<p>HTML has an element for marking up contact details — {{htmlelement("address")}}. This simply wraps around your contact details, for example:</p>
-
-<pre class="brush: html">&lt;address&gt;
-  &lt;p&gt;Chris Mills, Manchester, The Grim North, UK&lt;/p&gt;
-&lt;/address&gt;</pre>
-
-<p>One thing to remember however is that the {{htmlelement("address")}} element is meant for marking up the contact details of the person who wrote the HTML document, not <em>any</em> address. So the above would only be ok if Chris had written the document the markup appears on. Note that something like this would also be ok:</p>
-
-<pre class="brush: html">&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="Superscript_and_subscript">Superscript and subscript</h2>
-
-<p>You will occasionally need to use superscript and subscript when marking up items like dates, chemical formulae, and mathematical equations so they have the correct meaning. The {{htmlelement("sup")}} and {{htmlelement("sub")}} elements handle this job. For example:</p>
-
-<pre class="brush: html">&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>The output of this code looks like so:</p>
-
-<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
-
-<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-
-<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
-
-<h2 id="Representing_computer_code">Representing computer code</h2>
-
-<p>There are a number of elements available for marking up computer code using HTML:</p>
-
-<ul>
- <li>{{htmlelement("code")}}: For marking up generic pieces of computer code.</li>
- <li>{{htmlelement("pre")}}: For retaining whitespace (generally code blocks) — if you use indentation or excess whitespace inside your text, browsers will ignore it and you will not see it on your rendered page. If you wrap the text in <code>&lt;pre&gt;&lt;/pre&gt;</code> tags however, your whitespace will be rendered identically to how you see it in your text editor.</li>
- <li>{{htmlelement("var")}}: For specifically marking up variable names.</li>
- <li>{{htmlelement("kbd")}}: For marking up keyboard (and other types of) input entered into the computer.</li>
- <li>{{htmlelement("samp")}}: For marking up the output of a computer program.</li>
-</ul>
-
-<p>Let's look at a few examples. You should try having a play with these (try grabbing a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a> sample file):</p>
-
-<pre class="brush: html">&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>The above code will look like so:</p>
-
-<p>{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Marking_up_times_and_dates">Marking up times and dates</h2>
-
-<p>HTML also provides the {{htmlelement("time")}} element for marking up times and dates in a machine-readable format. For example:</p>
-
-<pre class="brush: html">&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 January 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>
-
-<p>Why is this useful? Well, there are many different ways that humans write down dates. The above date could be written as:</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><span lang="fr">20e Janvier 2016</span></li>
- <li><span lang="ja">2016年1月20日</span></li>
- <li>And so on</li>
-</ul>
-
-<p>But these different forms cannot be easily recognised by computers — what if you wanted to automatically grab the dates of all events in a page and insert them into a calendar? The {{htmlelement("time")}} element allows you to attach an unambiguous, machine-readable time/date for this purpose.</p>
-
-<p>The basic example above just provides a simple machine readable date, but there are many other options that are possible, for example:</p>
-
-<pre class="brush: html">&lt;!-- Standard simple date --&gt;
-&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
-&lt;!-- Just year and month --&gt;
-&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>&gt;January 2016&lt;/<span class="pl-ent">time</span>&gt;
-&lt;!-- Just month and day --&gt;
-&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>&gt;20 January&lt;/<span class="pl-ent">time</span>&gt;
-&lt;!-- Just time, hours and minutes --&gt;
-&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>&gt;19:30&lt;/<span class="pl-ent">time</span>&gt;
-&lt;!-- You can do seconds and milliseconds too! --&gt;
-&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>&gt;19:30:01.856&lt;/<span class="pl-ent">time</span>&gt;
-&lt;!-- Date and time --&gt;
-&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>&gt;7.30pm, 20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
-&lt;!-- Date and time with timezone offset--&gt;
-&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>&gt;7.30pm, 20 January 2016 is 8.30pm in France&lt;/<span class="pl-ent">time</span>&gt;
-&lt;!-- Calling out a specific week number--&gt;
-&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>&gt;The fourth week of 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>
-
-<h2 id="Summary">Summary</h2>
-
-<p>That marks the end of our study of HTML text semantics. Bear in mind that what you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild, or at least might find interesting. To find way more HTML elements, you can take a look at our <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a> (the <a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text semantics</a> section would be a great place to start.) In the next article we will look at the HTML elements you'd use to structure the different parts of an HTML document.</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>
-
-<p> </p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_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>
-
-<p> </p>
diff --git a/files/pt-pt/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/pt-pt/learn/html/introduction_to_html/creating_hyperlinks/index.html
deleted file mode 100644
index 2e7a228447..0000000000
--- a/files/pt-pt/learn/html/introduction_to_html/creating_hyperlinks/index.html
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: Criar hiperligações
-slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
-tags:
-  - Aprender
-  - Guía
-  - HTML
-  - HTTP
-  - Hiperligações
-  - Principiante
-  - URL
-  - título
-translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
-original_slug: Learn/HTML/Introducao_ao_HTML/Criar_hiperligacoes
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">Hyperlinks are really important — they are what makes the Web <em>a web</em>. This article shows the syntax required to make a link, and discusses link best practices.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To learn how to implement a hyperlink effectively, and link multiple files together.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="What_is_a_hyperlink">What is a hyperlink?</h2>
-
-<p>Hyperlinks are one of the most exciting innovations the Web has to offer. Well, they've been a feature of the Web since the very beginning, but they are what makes the Web <em>a Web</em> — they allow us to link our documents to any other document (or other resource) we want to, we can also link to specific parts of documents, and we can make apps available at a simple web address (contrast this to native apps, which have to be installed and all that business.) Just about any web content can be converted to a link, so that when clicked (or otherwise activated) it will make the web browser go to another web address ({{glossary("URL")}}).</p>
-
-<div class="note">
-<p><strong>Note</strong>: A URL can point to HTML files, text files, images, text documents, video and audio files, and anything else that can live on the Web. If the web browser doesn't know how to display or handle the file, it will ask you if you want to open the file (in which case the duty of opening or handling the file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on.)</p>
-</div>
-
-<p>The BBC homepage, for example, contains a large number of links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools) and more.</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="Anatomy_of_a_link">Anatomy of a link</h2>
-
-<p>A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} attribute (also known as a <strong>Hypertext Reference</strong> , or <strong>target</strong>) that will contain the web address you want the link to point to.</p>
-
-<pre class="brush: html">&lt;p&gt;I'm creating a link to
-&lt;a href="https://www.mozilla.org/en-US/"&gt;the Mozilla homepage&lt;/a&gt;.
-&lt;/p&gt;</pre>
-
-<p>This gives us the following result:</p>
-
-<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p>
-
-<h3 id="Adding_supporting_information_with_the_title_attribute">Adding supporting information with the title attribute</h3>
-
-<p>Another attribute you may want to add to your links is <code>title</code>; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:</p>
-
-<pre class="brush: html">&lt;p&gt;I'm creating a link to
-&lt;a href="https://www.mozilla.org/en-US/"
-   title="The best place to find more information about Mozilla's
-          mission and how to contribute"&gt;the Mozilla homepage&lt;/a&gt;.
-&lt;/p&gt;</pre>
-
-<p>This gives us the following result (the title will come up as a tooltip when the link is hovered over):</p>
-
-<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p>
-
-<div class="note">
-<p><strong>Note</strong>: A link title is only revealed on mouse hover, which means that people relying on keyboard controls to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.</p>
-</div>
-
-<h3 id="Active_learning_creating_your_own_example_link">Active learning: creating your own example link</h3>
-
-<p>Active learning time: we'd like you to create an HTML document using your local code editor (our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">getting started template</a> would do just fine.)</p>
-
-<ul>
- <li>Inside the HTML body, try adding one or more paragraphs or other types of content you already know about.</li>
- <li>Turn some of the content into links.</li>
- <li>Include title attributes.</li>
-</ul>
-
-<h3 id="Block_level_links">Block level links</h3>
-
-<p>As mentioned before, you can turn just about any content into a link, even <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">block level elements</a>. If you had an image you wanted to turn into a link, you could just put the image between <code>&lt;a&gt;&lt;/a&gt;</code> tags.</p>
-
-<pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/"&gt;
-  &lt;img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"&gt;
-&lt;/a&gt;</pre>
-
-<div class="note">
-<p><strong>Note</strong>: You'll find out a lot more about using images on the Web in a future article.</p>
-</div>
-
-<h2 id="A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</h2>
-
-<p>To fully understand link targets, you need to understand URLs and file paths. This section gives you the information you need to achieve this.</p>
-
-<p>A URL, or Uniform Resource Locator is simply a string of text that defines where something is located on the Web. For example Mozilla's English homepage is located at <code>https://www.mozilla.org/en-US/</code>.</p>
-
-<p>URLs use paths to find files. Paths specify where in the filesystem the file you are interested in is located. Let's look at a simple example of a directory structure (see the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> directory.)</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>The <strong>root</strong> of this directory structure is called <code>creating-hyperlinks</code>. When working locally with a web site, you will have one directory that the whole site goes inside. Inside the root, we have an <code>index.html</code> file and a <code>contacts.html</code>. In a real website, <code>index.html</code> would be our home page or landing page (a web page that serves as the entry point for a website or a particular section of a website.).</p>
-
-<p>There are also two directories inside our root — <code>pdfs</code> and <code>projects</code>. These each have a single file inside them — a PDF (<code>project-brief.pdf</code>) and an <code>index.html</code> file, respectively. Note how you can quite happily have two <code>index.html</code> files in one project as long as they are in different locations in the filesystem. Many web sites do. The second <code>index.html</code> would perhaps be the main landing page for project-related information.</p>
-
-<ul>
- <li>
-  <p><strong>Same directory</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>contacts.html</code>, you would just need to specify the filename of the file you want to link to, as it is in the same directory as the current file. So the URL you would use is <code>contacts.html</code>:</p>
-
-  <pre class="brush: html">&lt;p&gt;Want to contact a specific staff member?
-Find details on our &lt;a href="contacts.html"&gt;contacts page&lt;/a&gt;.&lt;/p&gt;</pre>
- </li>
- <li>
-  <p><strong>Moving down into subdirectories</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>projects/index.html</code>, you would need to go down into the <code>projects</code> directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. so the URL you would use is <code>projects/index.html</code>:</p>
-
-  <pre class="brush: html">&lt;p&gt;Visit my &lt;a href="projects/index.html"&gt;project homepage&lt;/a&gt;.&lt;/p&gt;</pre>
- </li>
- <li>
-  <p><strong>Moving back up into parent directories</strong>: If you wanted to include a hyperlink inside <code>projects/index.html</code> pointing to <code>pdfs/project-brief.pdf</code>, you'd have to go up a directory level, then back down into the <code>pdf</code> directory. "Go up a directory" is indicated using two dots — <code>..</code> — so the URL you would use is <code>../pdfs/project-brief.pdf</code>:</p>
-
-  <pre class="brush: html">&lt;p&gt;A link to my &lt;a href="../pdfs/project-brief.pdf"&gt;project brief&lt;/a&gt;.&lt;/p&gt;</pre>
- </li>
-</ul>
-
-<div class="note">
-<p><strong>Note</strong>: You can combine multiple instances of these features into complex URLs, if needed, e.g. <code>../../../complex/path/to/my/file.html</code>.</p>
-</div>
-
-<h3 id="Document_fragments">Document fragments</h3>
-
-<p>It is possible to link to a specific part of an HTML document (known as a <strong>document fragment</strong>), rather than just to the top of the document. To do this you first have to assign an {{htmlattrxref("id")}} attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:</p>
-
-<pre class="brush: html">&lt;h2 id="Mailing_address"&gt;Mailing address&lt;/h2&gt;</pre>
-
-<p>Then to link to that specific <code>id</code>, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:</p>
-
-<pre class="brush: html">&lt;p&gt;Want to write us a letter? Use our &lt;a href="contacts.html#Mailing_address"&gt;mailing address&lt;/a&gt;.&lt;/p&gt;</pre>
-
-<p>You can even use the document fragment reference on its own to link to <em>another part of the same document</em>:</p>
-
-<pre class="brush: html">&lt;p&gt;The &lt;a href="#Mailing_address"&gt;company mailing address&lt;/a&gt; can be found at the bottom of this page.&lt;/p&gt;</pre>
-
-<h3 id="Absolute_versus_relative_URLs">Absolute versus relative URLs</h3>
-
-<p>Two terms you'll come across on the Web are <strong>absolute URL</strong> and <strong>relative URL:</strong></p>
-
-<p><strong>absolute URL</strong>: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. So for example, if an <code>index.html</code> page is uploaded to a directory called <code>projects</code> that sits inside the root of a web server, and the web site's domain is <code>http://www.example.com</code>, the page would be available at <code>http://www.example.com/projects/index.html</code> (or even just <code>http://www.example.com/projects/</code>, as most web servers just look for a landing page such as <code>index.html</code> to load if it is not specified in the URL.)</p>
-
-<p>An absolute URL will always point to the same location, no matter where it is used.</p>
-
-<p><strong>relative URL</strong>: Points to a location that is <em>relative</em> to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at <code>http://www.example.com/projects/index.html</code> to a PDF file in the same directory, the URL would just be the filename — e.g. <code>project-brief.pdf</code> — no extra information needed. If the PDF was available in a subdirectory inside <code>projects</code> called <code>pdfs</code>, the relative link would be <code>pdfs/project-brief.pdf</code> (the equivalent absolute URL would be <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p>
-
-<p>A relative URL will point to different places depending on where the file it is used inside is located — for example if we moved our <code>index.html</code> file out of the <code>projects</code> directory and into the root of the web site (the top level, not in any directories), the <code>pdfs/project-brief.pdf</code> relative URL link inside it would now point to a file located at <code>http://www.example.com/pdfs/project-brief.pdf</code>, not a file located at <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
-
-<p>Of course, the location of the <code>project-brief.pdf</code> file and <code>pdfs</code> folder won't suddenly change because you moved the <code>index.html</code> file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!</p>
-
-<h2 id="Link_best_practices">Link best practices</h2>
-
-<p>There are some best practices to follow when writing links. Let's look at these now.</p>
-
-<ul>
-</ul>
-
-<h3 id="Use_clear_link_wording">Use clear link wording</h3>
-
-<p>It's easy to throw links up on your page. That's not enough. We need to make our links <em>accessible </em>to all readers, regardless of their current context and which tools they prefer. For example:</p>
-
-<ul>
- <li>Screenreader users like jumping around from link to link on the page, and reading links out of context.</li>
- <li>Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.</li>
- <li>Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.</li>
-</ul>
-
-<p>Let's look at a specific example:</p>
-
-<p><em><strong>Good</strong> link text:</em> <a href="https://firefox.com">Download Firefox</a></p>
-
-<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
-  Download Firefox
-&lt;/a&gt;&lt;/p&gt;</pre>
-
-<p><em><strong>Bad</strong> link text:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p>
-
-<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
-  Click here
-&lt;/a&gt;
-to download Firefox&lt;/p&gt;
-</pre>
-
-<p>Other tips:</p>
-
-<ul>
- <li>Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.</li>
- <li>Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different colour and underlined (this convention generally shouldn't be broken, as users are so used to it.)</li>
- <li>Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.</li>
- <li>Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.</li>
-</ul>
-
-<h3 id="Use_relative_links_wherever_possible">Use relative links wherever possible</h3>
-
-<p>From the description above, you might think that it is a good idea to just use absolute links all the time; after all, they don't break when a page is moved like relative links. However, you should use relative links wherever possible when linking to other locations within the <em>same website</em> (when linking to <em>another website</em>, you will need to use an absolute link):</p>
-
-<ul>
- <li>For a start, it is a lot easier to scan your code — relative URLs are generally a lot shorter than absolute URLs, which makes reading code much easier.</li>
- <li>Second, it is more efficient to use relative URLs wherever possible. When you use an absolute URL, the browser starts by looking up the real location of the server on the Domain Name System ({{glossary("DNS")}}; see <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> for more information), then it goes to that server and finds the file that is being requested. With a relative URL on the other hand, the browser just looks up the file that is being requested, on the same server. So if you use absolute URLs where relative URLs would do, you are constantly making your browser do extra work, meaning that it will perform less efficiently.</li>
-</ul>
-
-<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts">Linking to non-HTML resources — leave clear signposts</h3>
-
-<p>When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:</p>
-
-<ul>
- <li>If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.</li>
- <li>If you haven't got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.</li>
-</ul>
-
-<p>Let's look at some examples, to see what kind of text can be used here:</p>
-
-<pre class="brush: html">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
-  Download the sales report (PDF, 10MB)
-&lt;/a&gt;&lt;/p&gt;
-
-&lt;p&gt;&lt;a href="http://www.example.com/video-stream/" target="_blank"&gt;
-  Watch the video (stream opens in separate tab, HD quality)
-&lt;/a&gt;&lt;/p&gt;
-
-&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
-  Play the car game (requires Flash)
-&lt;/a&gt;&lt;/p&gt;</pre>
-
-<h3 id="Use_the_download_attribute_when_linking_to_a_download">Use the download attribute when linking to a download</h3>
-
-<p>When you are linking to a resource that is to be downloaded rather than opened in the browser, you can use the <code>download</code> attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:</p>
-
-<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=en-US"
-   download="firefox-latest-64bit-installer.exe"&gt;
-  Download Latest Firefox for Windows (64-bit) (English, US)
-&lt;/a&gt;</pre>
-
-<h2 id="Active_learning_creating_a_navigation_menu">Active learning: creating a navigation menu</h2>
-
-<p>For this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.</p>
-
-<p>You'll need to make local copies of the following four pages, all in the same directory (see also the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> directory for a full file listing):</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>You should:</p>
-
-<ol>
- <li>Add an unordered list in the indicated place on one page, containing the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically ok.</li>
- <li>Turn each page name into a link to that page.</li>
- <li>Copy the navigation menu across to each page.</li>
- <li>On each page, remove just the link to that same page — it is confusing and pointless for a page to include a link to itself, and the lack of a link acts a good visual reminder of what page you are currently on.</li>
-</ol>
-
-<p>The finished example should end up looking something like this:</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>: If you get stuck, or are not sure if you have got it right, you can check the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> directory to see the correct answer.</p>
-</div>
-
-<h2 id="E-mail_links">E-mail links</h2>
-
-<p>It is possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the {{HTMLElement("a")}} element and the <code>mailto:</code> URL scheme.</p>
-
-<p>In its most basic and commonly used form, a <code>mailto:</code> link simply indicates the email address of the intended recipient. For example:</p>
-
-<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;
-</pre>
-
-<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p>
-
-<p>In fact, the email address is even optional. If you leave it out (that is, your {{htmlattrxref("href", "a")}} is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to an address of their choosing.</p>
-
-<h3 id="Specifying_details">Specifying details</h3>
-
-<p>In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the <code>mailto</code> URL you provide. The most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.</p>
-
-<p>Here's an example that includes a cc, bcc, subject and body:</p>
-
-<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email&amp;body=The%20body%20of%20the%20email"&gt;
-  Send mail with cc, bcc, subject and body
-&lt;/a&gt;</pre>
-
-<div class="note">
-<p><strong>Note:</strong> The values of each field must be URL-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Also note the use of the question mark (<code>?</code>) to separate the main URL from the field values, and ampersands (&amp;) to separate each field in the <code>mailto:</code> URL. This is standard URL query notation. Read <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">The GET method</a> to understand what URL query notation is more comonly used for.</p>
-</div>
-
-<p>Here are a few other sample <code>mailto</code> URLs:</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="Summary">Summary</h2>
-
-<p>That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.</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>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_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-pt/learn/html/introduction_to_html/debugging_html/index.html b/files/pt-pt/learn/html/introduction_to_html/debugging_html/index.html
deleted file mode 100644
index fe3a77d5df..0000000000
--- a/files/pt-pt/learn/html/introduction_to_html/debugging_html/index.html
+++ /dev/null
@@ -1,187 +0,0 @@
----
-title: Depurar HTML
-slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
-tags:
-  - Depuração
-  - Erro
-  - Guía
-  - HTML
-  - Principiante
-  - Validação
-translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
-original_slug: Learn/HTML/Introducao_ao_HTML/Depurar_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">Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you find and fix errors in HTML.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>HTML familiarity, as covered in for example <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>, and <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>Learn the basics of using debugging tools to find problems in HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Debugging_isn't_scary">Debugging isn't scary</h2>
-
-<p>When writing code of some kind, everything is usually fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. For example, the following shows an error reported when trying to {{glossary("compile")}} a simple program written in the <a href="https://www.rust-lang.org/">Rust</a> language.</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;">Here, the error message is relatively easy to understand — "unterminated double quote string". If you look at the listing, you can probably see how <code>println!(Hello, world!");</code> might logically be missing a double quote. However, error messages can quickly get more complicated and less easy to interpret as programs get bigger, and even simple cases can look a little intimidating to someone who doesn't know anything about Rust.</p>
-
-<p>Debugging doesn't have to be scary though —  the key to being comfortable with writing and debugging any programming language or code is familiarity with both the language and the tools.</p>
-
-<h2 id="HTML_and_debugging">HTML and debugging</h2>
-
-<p>HTML is not as complicated to understand as Rust. HTML is not compiled into a different form before the browser parses it and shows the result (it is <em>interpreted</em>, not <em>compiled</em>). And HTML's {{glossary("element")}} syntax is arguably a lot easier to understand than a "real programming language" like Rust, {{glossary("JavaScript")}}, or {{glossary("Python")}}. The way that browsers parse HTML is a lot more <strong>permissive</strong> than how programming languages are run, which is both a good and a bad thing.</p>
-
-<h3 id="Permissive_code">Permissive code</h3>
-
-<p>So what do we mean by permissive? Well, generally when you do something wrong in code, there are two main types of error that you'll come across:</p>
-
-<ul>
- <li><strong>Syntax errors</strong>: These are spelling errors in your code that actually cause the program not to run, like the Rust error shown above. These are usually easy to fix as long as you are familiar with the language's syntax and know what the error messages mean.</li>
- <li><strong>Logic errors</strong>: These are errors where the syntax is actually correct, but the code is not what you intended it to be, meaning that program runs incorrectly. These are often harder to fix than syntax errors, as there isn't an error message to direct you to the source of the error.</li>
-</ul>
-
-<p>HTML itself doesn't suffer from syntax errors because browsers parse it permissively, meaning that the page still displays even if there are syntax errors. Browsers have built-in rules to state how to interpret incorrectly written markup, so you'll get something running, even if it is not what you expected. This, of course, can still be a problem!</p>
-
-<div class="note">
-<p><strong>Note</strong>: HTML is parsed permissively because when the web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct. The web would probably not be as popular as it is today, if it had been more strict from the very beginning.</p>
-</div>
-
-<h3 id="Active_learning_Studying_permissive_code">Active learning: Studying permissive code</h3>
-
-<p>It's time to study the permissive nature of HTML code.</p>
-
-<ol>
- <li>First, download our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> and save it locally. This demo is deliberately written to have some errors in it for us to explore (the HTML markup is said to be <strong>badly-formed</strong>, as opposed to <strong>well-formed</strong>).</li>
- <li>Next, open it in a browser. You will see something like this:<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>This immediately doesn't look great; let's look at the source code to see if we can work out why (only the body contents are shown):
-  <pre class="brush: html">&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>Let's review the problems:
-  <ul>
-   <li>The {{htmlelement("p","paragraph")}} and {{htmlelement("li","list item")}} elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.</li>
-   <li>The first {{htmlelement("strong")}} element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text has been strongly emphasised.</li>
-   <li>This section is badly nested: <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. It is not easy to tell how this has been interpreted because of the previous problem.</li>
-   <li>The {{htmlattrxref("href","a")}} attribute value has a missing closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.</li>
-  </ul>
- </li>
- <li>Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes to review <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</li>
- <li>In the DOM inspector, you can see what the rendered markup looks like: <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>Using the DOM inspector, let's explore our code in detail to see how the browser has tried to fix our HTML errors (we did the review in Firefox; other modern browsers <em>should</em> give the same result):
-  <ul>
-   <li>The paragraphs and list items have been given closing tags.</li>
-   <li>It isn't clear where the first <code>&lt;strong&gt;</code> element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!</li>
-   <li>The  incorrect nesting has been fixed by the browser like this:
-    <pre class="brush: html">&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>The link with the missing double quote has been deleted altogether. The last list item looks like this:
-    <pre class="brush: html">&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="HTML_validation">HTML validation</h3>
-
-<p>So you can see from the above example that you really want to make sure your HTML is well-formed! But how? In a small example like the one seen above, it is easy to search through the lines and find the errors, but what about a huge, complex HTML document?</p>
-
-<p>The best strategy is to start by running your HTML page through the <a href="https://validator.w3.org/">Markup Validation Service</a> — created and maintained by the W3C, the organization that looks after the specifications that define HTML, CSS, and other web technologies. This webpage takes an HTML document as an input, goes through it, and gives you a report to tell you what is wrong with your 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>To specify the HTML to validate, you can give it a web address, upload an HTML file, or directly input some HTML code.</p>
-
-<h3 id="Active_learning_Validating_an_HTML_document">Active learning: Validating an HTML document</h3>
-
-<p>Let's try this with our <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>First, load up the <a href="https://validator.w3.org/">Markup Validation Service</a> in one browser tab, if it isn't already.</li>
- <li>Switch to the <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> tab.</li>
- <li>Copy all the sample document's code (not just the body) and paste it into the large text area shown in the Markup Validation Service.</li>
- <li>Press the <em>Check</em> button.</li>
-</ol>
-
-<p>This should give you a list of errors and other information.</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="Interpreting_the_error_messages">Interpreting the error messages</h4>
-
-<p>The error messages are usually helpful, but sometimes they are not so helpful; with a bit of practice you can work out how to interpret these to fix your code. Let's go through the error messages and what they mean. You'll see that each message comes with a line and column number to help you to locate the error easily.</p>
-
-<ul>
- <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): These messages indicate that an element is open that should be closed. The ending tag is implied, but not actually there. The line/column information points to the first line after the line where the closing tag should really be, but this is a good enough clue to see what is wrong.</li>
- <li>"Unclosed element <code>strong</code>": This is really easy to understand — a {{htmlelement("strong")}} element is unclosed, and the line/column information points right to where it is.</li>
- <li>"End tag <code>strong</code> violates nesting rules": This points out the incorrectly nested elements, and the line/column information points out where it is.</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>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>
-
-<p> </p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_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>
-
-<p> </p>
diff --git a/files/pt-pt/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/pt-pt/learn/html/introduction_to_html/document_and_website_structure/index.html
deleted file mode 100644
index 06450aaf64..0000000000
--- a/files/pt-pt/learn/html/introduction_to_html/document_and_website_structure/index.html
+++ /dev/null
@@ -1,293 +0,0 @@
----
-title: "Estrutura do\_documento e do website"
-slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
-tags:
-  - Guía
-  - HTML
-  - Layout
-  - Principiante
-  - pagina
-  - semántica
-translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
-original_slug: Learn/HTML/Introducao_ao_HTML/Estrutura_documento_website
----
-<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>
-
-<p class="summary">In addition to defining individual parts of your page (such as "a paragraph" or "an image"), {{glossary("HTML")}} also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to represent this structure.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>. How hyperlinks work, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Basic_sections_of_a_document">Basic sections of a document</h2>
-
-<p>Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured:</p>
-
-<dl>
- <dt>header</dt>
- <dd>Usually a big strip across the top with a big heading and/or logo. This is where the main common information about a website usually stays from one webpage to another.</dd>
- <dt>navigation bar</dt>
- <dd>Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having an inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than a individual component, but that's not a requirement; in fact some also argue that having the two separate is better for <a href="/en-US/docs/Learn/Accessibility">accessibility</a>, as screen readers can read the two features better if they are separate.</dd>
- <dt>main content</dt>
- <dd>A big area in the center that contains most of the unique content of a given webpage, for example the video you want to watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page!</dd>
- <dt>sidebar</dt>
- <dd>Some peripheral info, links, quotes, ads, etc. Usually this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio, or links to related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system.</dd>
- <dt>footer</dt>
- <dd>A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It's a place to put common information (like the header) but usually that information is not critical or secondary to the website itself. The footer is also sometimes used for {{Glossary("SEO")}} purposes, by providing links for quick access to popular content.</dd>
-</dl>
-
-<p>A "typical website" could be laid out something like this:</p>
-
-<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_for_structuring_content">HTML for structuring content</h2>
-
-<p>The simple example shown above isn't pretty, but it is perfectly ok for illustrating a typical website layout example. Some websites have more columns, some are way more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics, and <strong>use the right element for the right job</strong>.</p>
-
-<p>This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?</p>
-
-<div class="note">
-<p><strong>Note</strong>: Colorblind people represent around <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">4% of the world population</a> or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 million such people in the world</a>, while the total population was <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">around 7 billion</a>).</p>
-</div>
-
-<p>In your HTML code, you can mark up sections of content based on their <em>functionality</em> — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">consequences of not using the right element structure and semantics for the right job</a>.</p>
-
-<p>To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:</p>
-
-<ul>
- <li><strong>header: </strong>{{htmlelement("header")}}.</li>
- <li><strong>navigation bar: </strong>{{htmlelement("nav")}}.</li>
- <li><strong>main content: </strong>{{htmlelement("main")}}, with various content subsections represented by {{HTMLElement("article")}}, {{htmlelement("section")}}, and {{htmlelement("div")}} elements.</li>
- <li><strong>sidebar: </strong>{{htmlelement("aside")}}; often placed inside {{htmlelement("main")}}.</li>
- <li><strong>footer: </strong>{{htmlelement("footer")}}.</li>
-</ul>
-
-<h3 id="Active_learning_exploring_the_code_for_our_example">Active learning: exploring the code for our example</h3>
-
-<p>Our example seen above is represented by the following code (you can also <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">find the example in our GitHub repository</a>). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.</p>
-
-<pre class="brush: html">&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;!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of 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;!-- Here is our main header that is used across all the pages of our 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;!-- A Search form is another commmon non-linear way to navigate through a website. --&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;!-- Here is our page's main content --&gt;
-    &lt;main&gt;
-
-      &lt;!-- It contains an article --&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;!-- the aside content can also be nested within the main content --&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;!-- And here is our main footer that is used across all the pages of our 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>Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.</p>
-
-<h2 id="HTML_layout_elements_in_more_detail">HTML layout elements in more detail</h2>
-
-<p>It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a>. For now, these are the main definitions that you should try to understand:</p>
-
-<ul>
- <li>{{HTMLElement('main')}} is for content <em>unique to this page. </em>Use <code>&lt;main&gt;</code> only <em>once </em>per page, and put it directly inside {{HTMLElement('body')}}. Ideally this shouldn't be nested within other elements.</li>
- <li>{{HTMLElement('article')}} encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).</li>
- <li>{{HTMLElement('section')}} is similar to <code>&lt;article&gt;</code>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It's considered best practice to begin each section with a <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">heading</a>; also note that you can break <code>&lt;article&gt;</code>s up into different <code>&lt;section&gt;</code>s, or <code>&lt;section&gt;</code>s up into different <code>&lt;article&gt;</code>s, depending on the context.</li>
- <li>{{HTMLElement('aside')}} contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).</li>
- <li>{{HTMLElement('header')}} represents a group of introductory content. If it is a child of {{HTMLElement('body')}} it defines the global header of a webpage, but if it's a child of an {{HTMLElement('article')}} or {{HTMLElement('section')}} it defines a specific header for that section (try not to confuse this with <a href="/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">titles and headings</a>).</li>
- <li>{{HTMLElement('nav')}} contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.</li>
- <li>{{HTMLElement('footer')}} represents a group of end content for a page.</li>
-</ul>
-
-<h3 id="Non-semantic_wrappers">Non-semantic wrappers</h3>
-
-<p>Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.</p>
-
-<p>{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:</p>
-
-<pre class="brush: html">&lt;p&gt;The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
-him as he staggered through the door &lt;span class="editor-note"&gt;[Editor's note: At this point in the
-play, the lights should be down low]&lt;/span&gt;.&lt;/p&gt;</pre>
-
-<p>In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.</p>
-
-<p>{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:</p>
-
-<pre class="brush: html">&lt;div class="shopping-cart"&gt;
-  &lt;h2&gt;Shopping cart&lt;/h2&gt;
-  &lt;ul&gt;
-    &lt;li&gt;
-      &lt;p&gt;&lt;a href=""&gt;&lt;strong&gt;Silver earrings&lt;/strong&gt;&lt;/a&gt;: $99.95.&lt;/p&gt;
-      &lt;img src="../products/3333-0985/thumb.png" alt="Silver earrings"&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-      ...
-    &lt;/li&gt;
-  &lt;/ul&gt;
-  &lt;p&gt;Total cost: $237.89&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<p>This isn't really an <code>&lt;aside&gt;</code>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a  <code>&lt;section&gt;</code>, as it isn't part of the main content of the page. So a <code>&lt;div&gt;</code> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.</p>
-
-<div class="warning">
-<p><strong>Warning</strong>: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.</p>
-</div>
-
-<h3 id="Line_breaks_and_horizontal_rules">Line breaks and horizontal rules</h3>
-
-<p>Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:</p>
-
-<p><code>&lt;br&gt;</code> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:</p>
-
-<pre class="brush: html">&lt;p&gt;There once was a man named O'Dell&lt;br&gt;
-Who loved to write HTML&lt;br&gt;
-But his structure was bad, his semantics were sad&lt;br&gt;
-and his markup didn't read very well.&lt;/p&gt;</pre>
-
-<p>Without the <code>&lt;br&gt;</code> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML ignores most whitespace</a>); with them in the code, the markup renders like this:</p>
-
-<p>There once was a man named O'Dell<br>
- Who loved to write HTML<br>
- But his structure was bad, his semantics were sad<br>
- and his markup didn't read very well.</p>
-
-<p><code>&lt;hr&gt;</code> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:</p>
-
-<pre>&lt;p&gt;Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.&lt;/p&gt;
-&lt;hr&gt;
-&lt;p&gt;Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.&lt;/p&gt;</pre>
-
-<p>Would render like this:</p>
-
-<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
-
-<hr>
-<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p>
-
-<h2 id="Planning_a_simple_website">Planning a simple website</h2>
-
-<p>Once you've planned out the content of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called {{glossary("Information architecture")}}. In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages this can be fairly simple, and fun!</p>
-
-<ol>
- <li>Bear in mind that you'll have a few elements common to most (if not all) pages — such as the navigation menu, and the footer content. If your site is for a business, for example, it's a good idea to have your contact information available in the footer on each page. Note down what you want to have common to every page.<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>Next, draw a rough sketch of what you might want the structure of each page to look like (it might look like our simple website above). Note what each block is going to be.<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>Now, brainstorm all the other (not common to every page) content you want to have on your website — write a big list down.<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>Next, try to sort all these content items into groups, to give you an idea of what parts might live together on different pages. This is very similar to a technique called {{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>Now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. The homepage will probably be in the center, and link to most if not all of the others; most of the pages in a small site should be available from the main navigation, although there are exceptions. You might also want to include notes about how things might be presented.<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="Active_learning_create_your_own_sitemap">Active learning: create your own sitemap</h3>
-
-<p>Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?</p>
-
-<div class="note">
-<p><strong>Note</strong>: Save your work somewhere; you might need it later on.</p>
-</div>
-
-<h2 id="Summary">Summary</h2>
-
-<p>At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.</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>
-
-<p> </p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_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>
-
-<p> </p>
diff --git a/files/pt-pt/learn/html/introduction_to_html/getting_started/index.html b/files/pt-pt/learn/html/introduction_to_html/getting_started/index.html
deleted file mode 100644
index d6b77c0bcb..0000000000
--- a/files/pt-pt/learn/html/introduction_to_html/getting_started/index.html
+++ /dev/null
@@ -1,613 +0,0 @@
----
-title: Começar com HTML
-slug: Learn/HTML/Introduction_to_HTML/Getting_started
-tags:
-  - Comentário
-  - Elemento
-  - Guía
-  - HTML
-  - Principiante
-  - atributo
-  - espaço em branco
-  - referência de entidade
-translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
-original_slug: Learn/HTML/Introducao_ao_HTML/Iniciacao_HTML
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{NextMenu("Learn/HTML/Introducao_ao_HTML/Os_metadados_de_head_em_HTML", "Learn/HTML/Introducao_ao_HTML")}}</div>
-
-<p class="summary">Neste artigo nós iremos abranger os básicos absolutos de HTML, para o iniciar — nós definimos os elementos, atributos, e todos os outros termos importantes que já poderá ter ouvido, e onde os incorporar na linguagem. Nós também mostramos como é que o elemento de HTML é estruturado, como é que uma página HTML é estruturada, e explicar outras funcionalidades de linguagem básica importantes. E nós iremos algumas demonstrações de algum HTML, para o motivar!</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>, and basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>To gain basic familiarity with the HTML language, and get some practice writing a few HTML elements.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="O_que_é_HTML">O que é HTML?</h2>
-
-<p>{{glossary("HTML")}} (Linguagem de Marcação de Hipertexto) não é uma linguagem de programação; é uma <em>linguagem de marcação</em> utilizada para comunicar ao seu navegador como estruturar as páginas da Web que visita. Este pode ser tão complicado ou tão simples como o programador da <em>Web</em> o desejar. HTML consiste em uma série de  {{glossary("Element", "elementos")}}, que utiliza para incluir, ou marcar diferentes partes do conteúdo para que este apareça ou atue de uma determinada maneira. A inclusão de {{glossary("Tag", "etiquetas")}} pode tornar uma parte do conteúdo em uma hiperligação para interligar com outra página na <em>Web</em>, colocar as palavras em itálico, e assim por diante. Por exemplo, siga a seguinte linha de conteúdo:</p>
-
-<pre>My cat is very grumpy</pre>
-
-<p>Se quisermos que a linha esteja demarcada, podemos especificar que é um parágrafo, encerrando-a num elemento com <em>tag </em>de parágrafo ({{htmlelement("p")}}) :</p>
-
-<pre class="brush: html">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
-
-<h2 id="Anatomia_de_um_elemento_HTML">Anatomia de um elemento HTML</h2>
-
-<p>Vamos explorar o 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 nosso elemento são:</p>
-
-<ol>
- <li><strong>A tag de abertura:</strong> Isto consiste no nome do elemento (neste caso, p), envolta por <strong>colchetes angulares</strong> de abertura ( &lt; ) e fecho ( &gt; ). Isto especifica onde o elemento começa, ou onde começa a ter efeito - neste caso, onde está o início do parágrafo.</li>
- <li><strong>A tag de fecho:</strong> Isto é o mesmo que a tag de abertura, só que inclui um traço ( \ ) antes do nome do elemento. Isto indica onde é que o elemento acaba - neste caso, onde é o fim do parágrafo. Esquecer-se de incluir uma tag de fecho é um erro comum de principiante e pode levar a resultados estranhos.</li>
- <li><strong>O conteúdo:</strong> É o conteúdo do elemento, que neste caso é só texto.</li>
- <li><strong>O elemento:</strong> A tag de abertura mais a tag de fecho mais o conteúdo é igual ao elemento.</li>
-</ol>
-
-<h3 id="Aprendizagem_ativa_criar_o_seu_primeiro_HTML">Aprendizagem ativa: criar o seu primeiro HTML</h3>
-
-<p>Edit the line below in the <em>Input</em> area by wrapping it with the tags <code>&lt;em&gt;</code> and <code>&lt;/em&gt;</code> (put <code>&lt;em&gt;</code> before it to <em>open the element</em>, and <code>&lt;/em&gt;</code> after it, to <em>close the element</em>) — this should give the line italic emphasis! You'll be able to see your changes update live in the <em>Output</em> area.</p>
-
-<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</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;This is my text.&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: 2em;
-  padding: 10px;
-  border: 1px solid #0095dd;
-}
-
-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;em&gt;This is my text.&lt;/em&gt;';
-  drawOutput();
-});
-
-textarea.addEventListener("input", drawOutput);
-window.addEventListener("load", drawOutput);
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p>
-
-<h3 id="Nesting_elements">Nesting elements</h3>
-
-<p>You can put elements inside other elements too — this is called <strong>nesting</strong>. If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word "very" in a {{htmlelement("strong")}} element, which means that the word is to be strongly emphasized:</p>
-
-<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
-
-<p>You do however need to make sure that your elements are properly nested: in the example above we opened the <code>p</code> element first, then the <code>strong</code> element, therefore we have to close the <code>strong</code> element first, then the <code>p</code>. The following is incorrect:</p>
-
-<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
-
-<p>The elements have to open and close correctly so they are clearly inside or outside one another. If they overlap like above, then your web browser will try to make a best guess at what you were trying to say, and you may well get unexpected results. So don't do it!</p>
-
-<h3 id="Block_versus_inline_elements">Block versus inline elements</h3>
-
-<p>There are two important categories of elements in HTML, which you should know about — block-level elements and inline elements.</p>
-
-<ul>
- <li>Block-level elements form a visible block on a page — they will appear on a new line from whatever content went before it, and any content that goes after it will also appear on a new line. Block-level elements tend to be structural elements on the page that represent, for example, paragraphs, lists, navigation menus, footers, etc. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li>
- <li>Inline elements are those that are contained within block-level elements and surround only small parts of the document’s content, not entire paragraphs and groupings of content. An inline element will not cause a new line to appear in the document; they would normally appear inside a paragraph of text, for example an {{htmlelement("a")}} element (hyperlink) or emphasis elements such as {{htmlelement("em")}} or {{htmlelement("strong")}}.</li>
-</ul>
-
-<p>Take the following example:</p>
-
-<pre class="brush: html">&lt;em&gt;first&lt;/em&gt;&lt;em&gt;second&lt;/em&gt;&lt;em&gt;third&lt;/em&gt;
-
-&lt;p&gt;fourth&lt;/p&gt;&lt;p&gt;fifth&lt;/p&gt;&lt;p&gt;sixth&lt;/p&gt;
-</pre>
-
-<p>{{htmlelement("em")}} is an inline element, so as you can see below, the first three elements sit on the same line as one another with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element, so each element appears on a new line, with space above and below each (the spacing is due to default <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> that the browser applies to paragraphs).</p>
-
-<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200) }}</p>
-
-<div class="note">
-<p><strong>Nota</strong>: HTML5 redefined the element categories in HTML5: see <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. While these definitions are more accurate and less ambiguous than the ones that went before, they are a lot more complicated to understand than "block" and "inline", so we will stick with these throughout this topic.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota</strong>: You can find useful reference pages that include lists of block and inline elements — see <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p>
-</div>
-
-<h3 id="Elementos_vazios">Elementos vazios</h3>
-
-<p>Not all elements follow the above pattern of opening tag, content, closing tag. Some elements consist only of a single tag, which is usually used to insert/embed something in the document at the place it is included. For example, the {{htmlelement("img")}} element embeds an image file onto a page in the position it is included in:</p>
-
-<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
-
-<p>This would output the following on your page:</p>
-
-<p>{{ EmbedLiveSample('Empty_elements', 700, 300) }}</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Empty elements are also sometimes called <em>void elements</em>.</p>
-</div>
-
-<h2 id="Atributos">Atributos</h2>
-
-<p>Elements can also have attributes, which look like this:</p>
-
-<p><img alt='&amp;lt;p class="editor-note">My cat is very grumpy&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>Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the <code>class</code> attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things.</p>
-
-<p>An attribute should have:</p>
-
-<ol>
- <li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes.)</li>
- <li>The attribute name, followed by an equals sign.</li>
- <li>An attribute value, with opening and closing quote marks wrapped around it.</li>
-</ol>
-
-<h3 id="Aprendizagem_ativa_Adicionar_atributos_a_um_elemento">Aprendizagem ativa: Adicionar atributos a um elemento</h3>
-
-<p>Another example of an element is {{htmlelement("a")}} — this stands for anchor and will make the piece of text it wraps around into a hyperlink. This can take a number of attributes, but several are as follows:</p>
-
-<ul>
- <li><code>href</code>: This attribute specifies as its value the web address that you want the link to point to; where the browser navigates to when the link is clicked. For example, <code>href="https://www.mozilla.org/"</code>.</li>
- <li><code>title</code>: The <code>title</code> attribute specifies extra information about the link, such as what the page is that you are linking to. For example, <code>title="The Mozilla homepage"</code>. This will appear as a tooltip when hovered over.</li>
- <li><code>target</code>: The <code>target</code> attribute specifies the browsing context which will be used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the link in the current tab just omit this attribute.</li>
-</ul>
-
-<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favourite website. First, add the <code>&lt;a&gt;</code> element. Second, add the <code>href</code> attribute and the <code>title</code> attribute. Lastly, specify <code>target</code> attribute to open the link in the new tab. You'll be able to see your changes update live in the <em>Output</em> area. You should see a link that when hovered over displays the <code>title</code> attribute's content, and when clicked navigates to the web address in the <code>href</code> element. Remember that you need to include a space between the element name, and each attribute.</p>
-
-<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p>
-
-<div class="hidden">
-<h6 id="Playable_code2">Playable code2</h6>
-
-<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
-&lt;textarea id="code" class="input"&gt;&amp;lt;p&amp;gt;A link to my favourite website.&amp;lt;/p&amp;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: 2em;
-  padding: 10px;
-  border: 1px solid #0095dd;
-}
-
-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;p&gt;A link to my &lt;a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank"&gt;favourite website&lt;/a&gt;.&lt;/p&gt;';
-  drawOutput();
-});
-
-textarea.addEventListener("input", drawOutput);
-window.addEventListener("load", drawOutput);
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p>
-
-<h3 id="Atributos_de_booliano">Atributos de booliano</h3>
-
-<p>You'll sometimes see attributes written without values — this is perfectly allowed. These are called boolean attributes, and they can only have one value, which is generally the same as the attribute name. As an example, take the {{htmlattrxref("disabled", "input")}} attribute, which you can assign to form input elements if you want them to be disabled (greyed out) so the user can't enter any data in them.</p>
-
-<pre>&lt;input type="text" disabled="disabled"&gt;</pre>
-
-<p>As shorthand, it is perfectly allowable to write this as follows (we've also included a non-disabled form input element for reference, to give you more of an idea what is going on):</p>
-
-<pre class="brush: html">&lt;input type="text" disabled&gt;
-
-&lt;input type="text"&gt;
-</pre>
-
-<p>Both will give you an output as follows:</p>
-
-<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100) }}</p>
-
-<h3 id="Omitir_aspas_em_volta_de_valores_de_atributo">Omitir aspas em volta de valores de atributo</h3>
-
-<p>When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the <code>href</code> attribute, like this:</p>
-
-<pre>&lt;a href=<code>https://www.mozilla.org/</code>&gt;favourite website&lt;/a&gt;</pre>
-
-<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p>
-
-<pre class="brush: html">&lt;a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage&gt;favourite website&lt;/a&gt;</pre>
-
-<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. This is obviously not what was intended, and will cause errors or unexpected behaviour in the code, as seen in the live example below. Try hovering over the link to see what the title text is!</p>
-
-<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100) }}</p>
-
-<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p>
-
-<h3 id="Aspas_simples_ou_duplas">Aspas simples ou duplas?</h3>
-
-<p>In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:</p>
-
-<pre class="brush: html">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;
-
-&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
-
-<p>You should however make sure you don't mix them together. The following will go wrong!</p>
-
-<pre class="brush: html">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
-
-<p>If you've used one type of quote in your HTML, you can include the other type of quote without causing any problems:</p>
-
-<pre class="brush: html">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
-
-<p>However if you want to include a quote within the quotes where both the quotes are of the same type(single quote or double quote), you'll have to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_including_special_characters_in_HTML">use HTML entities</a> for the quotes.</p>
-
-<h2 id="Anatomia_de_uma_documento_HTML">Anatomia de uma documento HTML</h2>
-
-<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:</p>
-
-<pre class="brush: html">&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>Here we have:</p>
-
-<ol>
- <li><code>&lt;!DOCTYPE html&gt;</code>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. They used to look something like this:
-
-  <pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
-  However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <code>&lt;!DOCTYPE html&gt;</code> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.</li>
- <li><code>&lt;html&gt;&lt;/html&gt;</code>: The {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.</li>
- <li><code>&lt;head&gt;&lt;/head&gt;</code>: The {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn't</em> the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.</li>
- <li><code>&lt;meta charset="utf-8"&gt;</code>: This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.</li>
- <li><code>&lt;title&gt;&lt;/title&gt;</code>: The {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favourite it.</li>
- <li><code>&lt;body&gt;&lt;/body&gt;</code>: The {{htmlelement("body")}} element. This contains <em>all</em> the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.</li>
-</ol>
-
-<h3 id="Aprendizagem_ativa_Adicionar_alguns_recursos_a_um_documento_HTML">Aprendizagem ativa: Adicionar alguns recursos a um documento HTML</h3>
-
-<p>If you want to experiment with writing some HTML on your local computer, you can:</p>
-
-<ol>
- <li>Copy the HTML page example listed above.</li>
- <li>Create a new file in your text editor.</li>
- <li>Paste the code into the new text file.</li>
- <li>Save the file as <code>index.html</code>.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: You can also find this basic HTML template on the <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>You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:</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;">So in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case.) We'd like you to have a go at implementing the following steps:</p>
-
-<ul>
- <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code>&lt;h1&gt;</code> opening tag and <code>&lt;/h1&gt;</code> closing tag.</li>
- <li>Edit the paragraph content to include some text about something you are interested in.</li>
- <li>Make any important words stand out in bold by wrapping them inside a <code>&lt;strong&gt;</code> opening tag and <code>&lt;/strong&gt;</code> closing tag</li>
- <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li>
- <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web.)</li>
-</ul>
-
-<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p>
-
-<div class="hidden">
-<h6 id="Playable_code3">Playable code3</h6>
-
-<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
-&lt;textarea id="code" class="input"&gt;
-&amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;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;
-}
-
-img {
-  max-width: 100%;
-}
-
-.output {
-  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;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favourite drummers is Neal Peart, who\
- plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\
- My favourite Rush album is currently &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;';
-  drawOutput();
-});
-
-textarea.addEventListener("input", drawOutput);
-window.addEventListener("load", drawOutput);
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p>
-
-<h3 id="Espaço_em_branco_em_HTML">Espaço em branco em HTML</h3>
-
-<p>In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:</p>
-
-<pre class="brush: html">&lt;p&gt;Dogs are silly.&lt;/p&gt;
-
-&lt;p&gt;Dogs        are
-         silly.&lt;/p&gt;</pre>
-
-<p>No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider using some kind of formatting.</p>
-
-<h2 id="Referências_de_entidade_incluindo_carateres_especiais_em_HTML">Referências de entidade: incluindo carateres especiais em HTML</h2>
-
-<p>In HTML, the characters <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> and <code>&amp;</code> are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?</p>
-
-<p>We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&amp;), and ended by a semi-colon (;).</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Caráter literal</th>
-   <th scope="col">Referência de caráter 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>In the below example, you can see two paragraphs, which are talking about web technologies:</p>
-
-<pre class="brush: html">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;
-
-&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>
-
-<p>In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <code>&lt;p&gt;</code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p>
-
-<p>{{ EmbedLiveSample('Entity_references_including_special_characters_in_HTML', 700, 200) }}</p>
-
-<div class="note">
-<p><strong>Nota</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <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>.</p>
-</div>
-
-<h2 id="Comentários_de_HTML">Comentários de HTML</h2>
-
-<p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p>
-
-<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code>&lt;!--</code> and <code>--&gt;</code>, for example:</p>
-
-<pre class="brush: html">&lt;p&gt;I'm not inside a comment&lt;/p&gt;
-
-&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>
-
-<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p>
-
-<p>{{ EmbedLiveSample('HTML_comments', 700, 100) }}</p>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!</p>
-
-<div class="note">
-<p><strong>Note</strong>: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.</p>
-</div>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<ul>
- <li><a href="/pt-PT/docs/Web/HTML/Aplicar_cor__elementos_HTML_utilizando_CSS">Aplicar cor aos elementos de HTML utilizando CSS</a></li>
-</ul>
-
-<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody>
-  <tr>
-   <td class="SL_td"><input></td>
-   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-   </td>
-   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_font_patch"> </div>
-
-    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result"> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody>
-  <tr>
-   <td><input></td>
-   <td>
-    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-   </td>
-   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/html/introduction_to_html/index.html b/files/pt-pt/learn/html/introduction_to_html/index.html
deleted file mode 100644
index c8a8ecce80..0000000000
--- a/files/pt-pt/learn/html/introduction_to_html/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Introdução ao HTML
-slug: Learn/HTML/Introduction_to_HTML
-tags:
-  - CodingScripting
-  - Estrutura
-  - HTML
-  - Hiperligações
-  - Introdução ao HTML
-  - Texto
-  - head
-  - semántica
-translation_of: Learn/HTML/Introduction_to_HTML
-original_slug: Learn/HTML/Introducao_ao_HTML
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Na sua essência, {{glossary("HTML")}} é uma linguagem bastante simples, composta por elementos que podem ser aplicados em partes de texto para lhes dar um significado diferente num documento (É um parágrafo? Uma lista com marcas? É parte de uma tabela?), estruturar um documento em secções lógicas (Tem um cabeçalho? Três colunas de conteúdo? Um menu de navegação?) e incorporar conteúdo como imagens e vídeos numa página. Este módulo irá apresentar as duas primeiras aplicações e introduzir os conceitos e a sintaxe fundamentais que você precisa de saber para compreender HTML.</p>
-
-<h2 id="Pré-requisitos">Pré-requisitos</h2>
-
-<p>Antes de começar este módulo, não precisa de ter qualquer conhecimento prévio de  HTML, mas deve pelo menos ter alguma familiaridade com utilização de computadores, e utilização passiva da Web (ou seja, apenas na perspectiva de consumidor e não de criação e publicação de conteúdos). Deverá ter um ambiente de trabalho básico configurado de acordo com as indicações que pode encontrar em <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a>, e compreender como se criam e gerem ficheiros, como indicado na secção <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a> — estas duas secções fazem ambas parte do nosso módulo completo de iniciação em <a href="/pt-PT/docs/Learn/Comecar_com_a_Web">Primeiros passos na web</a>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Se está a trabalhar num computador, tablet ou outro dispositivo em que não tem possibilidade de criar ficheiros, pode testar a maioria dos exemplos de código num programa de edição de código online como o <a href="http://jsbin.com/">JSBin</a> ou o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Guias">Guias</h2>
-
-<p>Este módulo contém os seguintes artigos, os quais vão guiá-lo ao longo da teoria básica de HTML, e dar-lhe amplas oportunidades para experimentar o que aprendeu.</p>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Iniciacao_HTML">Começar com HTML</a></dt>
- <dd>Para começar, cobrimos as bases absolutas do HTML — definir elementos, atributos e todos os termos importantes de que já ouviu falar, e como se encaixam na linguagem. Também mostramos a estrutura de um elemento HTML, a estrutura de uma página HTML típica e explicamos outras funcionalidades básicas mas importantes da linguagem. Ao longo do caminho, vamos brincar com algum HTML, para lhe despertar o interesse!</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Os_metadados_de_head_em_HTML">O que lhe vai no cabeçalho? Metadadados em HTML</a></dt>
- <dd>O cabeçalho de um documento HTML é parte que <strong>não é</strong> mostrada no navegador quando a página é carregada. Contém informação como o título da página ({{htmlelement("title")}}), ligações para {{glossary("CSS")}} (se quiser estilizar o conteúdo HTML com CSS), ligações a ícones personalizados, e metadados (dados sobre HTML, por exemplo, quem o escreveu e palavras-chave importantes que descrevem o documento).</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/fundamentos_texto_HTML">Fundamentos do texto HTML</a></dt>
- <dd>Uma das principais funções do HTML é atribuir significado (<strong>semântica</strong>) ao texto, para que o navegador o apresente corretamente. Este artigo explora como utilizar HTML para repartir o bloco de texto em títulos e parágrafos, dar ênfase/importância a palavras, criar listas e mais.</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Criar_hiperligacoes">Criar hiperligações</a></dt>
- <dd>Hiperligações são muito importantes — são o que torna a internet na internet. Este artigo mostra a sintaxe necessária para criar uma ligação (um <em>link</em>), e discute boas práticas a ter quando se criam hiperligações.</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a></dt>
- <dd>Há muitos outros elementos em HTML para formatar texto, que não vimos em <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/fundamentos_texto_HTML">Fundamentos do texto HTML</a>. Estes elementos são menos conhecidos, mas é útil conhecê-los. Neste artigo aprenderá a demarcar citações, listas de descrições, código de computador e outro texto relacionado, texto sobre e por baixo da linha, informação de contactos e mais.</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Estrutura_documento_website">Estrutura do documento e do website</a></dt>
- <dd>Além de definir partes individuais da página (como parágrafos e imagens), HTML também define secções do site (como cabeçalho, menu de navegação, coluna principal de conteúdo). Este artigo aborda como planear a estrutura básica de um site e como escrever HTML que represente essa estrutura.</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Depurar_HTML">Depurar HTML</a></dt>
- <dd>É ótimo escrever HTML, mas como proceder se alguma coisa correr mal e não conseguir descobrir em que parte do código está o erro? Este artigo introduz algumas ferramentas que pode utilizar.</dd>
-</dl>
-
-<h2 id="Avaliações">Avaliações</h2>
-
-<p>Estas avaliações testam o seu conhecimento das bases de HTML abrangidas nos guias suprarreferidos.</p>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/demarcar_uma_carta">Demarcar uma carta</a></dt>
- <dd>Todos aprendemos a escrever uma carta mais cedo ou mais tarde; e é um exemplo útil para testar as nossas capacidades de formatação de texto! Nesta avaliação, damos-lhe uma carta para demarcar.</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Estruturar_pagina_de_conteudo">Estruturar uma página de conteúdo</a></dt>
- <dd>Esta avaliação testa a sua capacidade de recorrer a HTML para estruturar uma página de conteúdo simples, que contém cabeçalho, rodapé, menu de navegação, conteúdo principal e barra lateral.</dd>
-</dl>
-
-<h2 id="Consultar_também">Consultar também</h2>
-
-<dl>
- <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Básicos de literacia da Web 1 (inglês)</a></dt>
- <dd>Um curso excelente da fundação Mozilla que explora e testa muitas das habilidades faladas no módulo de <em>Introdução ao HTML</em>. Os principiantes familiarizam-se com a leitura, escrita e participação na Web neste módulo de seis partes. Descubra as fundações da Web através da produção e colaboração.</dd>
-</dl>
diff --git a/files/pt-pt/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/pt-pt/learn/html/introduction_to_html/marking_up_a_letter/index.html
deleted file mode 100644
index e2e987b803..0000000000
--- a/files/pt-pt/learn/html/introduction_to_html/marking_up_a_letter/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Demarcar uma carta
-slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
-tags:
-  - Avaliação
-  - HTML
-  - Ligações
-  - Principiante
-  - Texto
-translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
-original_slug: Learn/HTML/Introducao_ao_HTML/demarcar_uma_carta
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">We all learn to write a letter sooner or later; it is also a useful example to test out our text formatting skills! In this assessment you'll be given a letter to mark up to test basic and advanced HTML text formatting skills, including hyperlinks, plus we'll test your familiarity with some HTML <code>&lt;head&gt;</code> contents.</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 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What's in the head? Metadata in HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>, and <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To test basic and advanced HTML text formatting and hyperlink skills, and knowledge of what goes in the HTML &lt;head&gt;.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Starting_point">Starting point</h2>
-
-<p>To get this assessment started, you should go and grab the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">raw text you need to mark up</a>, and the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS you need to include</a> in your HTML. Create a new <code>.html</code> file using your text editor to do your work in (or alternatively 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.)</p>
-
-<h2 id="Project_brief">Project brief</h2>
-
-<p>For this project, your task is to mark up a letter that needs to be hosted on a university intranet. The letter is a response from a research fellow to a prospective PhD student concerning their application to the university.</p>
-
-<p>Block/structural semantics:</p>
-
-<ul>
- <li>You should structure the overall document with an appropriate structure including doctype, and {{htmlelement("html")}}, {{htmlelement("head")}} and {{htmlelement("body")}} elements.</li>
- <li>The letter in general should be marked up with a structure of paragraphs and headings, with the exception of the below points. There is one top level heading (the "Re:" line) and three second level headings.</li>
- <li>The semester start dates, study subjects and exotic dances should be marked up using an appropriate list type.</li>
- <li>The two addresses can just be put inside paragraphs. The {{htmlelement("address")}} element is not appropriate for them — think about why. In addition, each line of the addresses should sit on a new line, but not be in a new paragraph.</li>
-</ul>
-
-<p>Inline semantics:</p>
-
-<ul>
- <li>The names of the sender and receiver (and "Tel" and "Email") should be marked up with strong importance.</li>
- <li>The four dates in the document should be given appropriate elements containing machine-readable dates.</li>
- <li>The first address and first date in the letter should be given a class attribute value of "sender-column"; the CSS you'll add later will then cause these to be right aligned, as should be the case in a classic letter layout.</li>
- <li>The five acronyms/abbreviations in the main text of the letter should be marked up to provide expansions of each acronym/abbreviation.</li>
- <li>The six sub/superscripts should be marked up appropriately — in the chemical formulae,  and the numbers 103 and 104 (they should be 10 to the power or 3 and 4, respectively).</li>
- <li>Try to mark up at least two appropriate words in the text with strong importance/emphasis.</li>
- <li>There are two places where a hyperlink should be added; add appropriate links with titles. For the location that the links point to, just use http://example.com.</li>
- <li>The university motto quote and citation should be marked up with appropriate elements.</li>
-</ul>
-
-<p>The head of the document:</p>
-
-<ul>
- <li>The character set of the document should be specified as utf-8 using an appropriate meta tag.</li>
- <li>The author of the letter should be specified in an appropriate meta tag.</li>
- <li>The provided CSS should be included inside an appropriate tag.</li>
-</ul>
-
-<h2 id="Hints_and_tips">Hints and tips</h2>
-
-<ul>
- <li>Use the <a href="https://validator.w3.org/">W3C HTML validator</a> to validate your HTML; you'll get bonus points if it validates.</li>
- <li>You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.</li>
-</ul>
-
-<h2 id="Example">Example</h2>
-
-<p>The following screenshot shows an example of what the letter might look like after being marked up.</p>
-
-<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p>
-
-<h2 id="Assessment">Assessment</h2>
-
-<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/marking-up-a-letter-assignment/24676">discussion thread about this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<p> </p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_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>
-
-<p> </p>
diff --git a/files/pt-pt/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/pt-pt/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
deleted file mode 100644
index 7efe74d7fd..0000000000
--- a/files/pt-pt/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: Estruturar uma página de conteúdo
-slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
-tags:
-  - Avaliação
-  - Estrutura
-  - HTML
-  - Principiante
-  - semántica
-translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
-original_slug: Learn/HTML/Introducao_ao_HTML/Estruturar_pagina_de_conteudo
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.</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 the rest of the course, with a particular emphasis on <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To test knowledge of web page structures, and how to represent a prospective layout design in markup.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Starting_point">Starting point</h2>
-
-<p>To get this assessment started, you should go and grab the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">zip file containing all the starting assets</a>. The zip file contains:</p>
-
-<ul>
- <li>The HTML you need to add structural markup to.</li>
- <li>CSS to style your markup.</li>
- <li>Images that are used on the page.</li>
-</ul>
-
-<p>Create the example on your local computer, or alternatively 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.</p>
-
-<h2 id="Project_brief">Project brief</h2>
-
-<p>For this project, your task is to take the content for the homepage of a bird watching website and add structural elements to it so it can have a page layout applied to it. It needs to have:</p>
-
-<ul>
- <li>A header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. The title and logo appear side by side once styling is applied, and the navigation appears below those two items.</li>
- <li>A main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails.</li>
- <li>A footer containing copyright information and credits.</li>
-</ul>
-
-<p>You need to add a suitable wrapper for:</p>
-
-<ul>
- <li>The header</li>
- <li>The navigation menu</li>
- <li>The main content</li>
- <li>The welcome text</li>
- <li>The image sidebar</li>
- <li>The footer</li>
-</ul>
-
-<p>You should also:</p>
-
-<ul>
- <li>Apply the provided CSS to the page by adding another {{htmlelement("link")}} element just below the existing one provided at the start.</li>
-</ul>
-
-<h2 id="Hints_and_tips">Hints and tips</h2>
-
-<ul>
- <li>Use the <a href="https://validator.w3.org/nu/">W3C Nu HTML Checker</a> to catch unintended mistakes in your HTML, CSS, and SVG — mistakes you might have otherwise missed — so that you can fix them.</li>
- <li>You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.</li>
- <li>The provided CSS is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.</li>
- <li>If you are getting stuck and can't envisage what elements to put where, it often helps to draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.</li>
-</ul>
-
-<h2 id="Example">Example</h2>
-
-<p>The following screenshot shows an example of what the homepage might look like after being marked up.</p>
-
-<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p>
-
-<h2 id="Assessment">Assessment</h2>
-
-<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assignment/24678">discussion thread about this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
-
-<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<p> </p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_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>
-
-<p> </p>
diff --git a/files/pt-pt/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/pt-pt/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
deleted file mode 100644
index 88ec4b49ea..0000000000
--- a/files/pt-pt/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title: O que está em "head"? Metadados em HTML
-slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
-tags:
-  - Guía
-  - HTML
-  - Idioma
-  - Meta
-  - Principiante
-  - head
-  - metadados
-translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
-original_slug: Learn/HTML/Introducao_ao_HTML/Os_metadados_de_head_em_HTML
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introducao_ao_HTML")}}</div>
-
-<p class="summary">{{glossary("Head", "Head")}} de um documento HTML é a parte que não é exibida no navegador da <em>Web </em>quando a página é carregada. Este contém a informação, tais como o {{htmlelement("title", "título")}} da página, hiperligações para {{glossary("CSS")}} (se pretender estilizar o seu conteúdo HTML com CSS), hiperligações para <em>favicons</em> personalizados, e outros metadados (dados sobre o HTML, tais como quem o escreveu, e palavras-chave importantes que descrevem o documento.) Neste artigo nós iremos abranger todas as coisas acima e muito mais, para lhe dar bons conceitos básicos para lidar com a marcação e outro código que deverá estar no seu <em>head</em>.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>To learn about the HTML head, what its purpose is, the most important items it can contain, and what effect it can have on the HTML document.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="O_que_é_head_no_HTML">O que é <em> head </em>no HTML?</h2>
-
-<p>Let's revisit the simple <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML document we covered in the previous article</a>:</p>
-
-<pre class="brush: html">&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>The HTML head is the contents of the {{htmlelement("head")}} element — unlike the contents of the {{htmlelement("body")}} element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. Instead, the head's job is to contain {{glossary("Metadata", "metadata")}} about the document. In the above example, the head is quite small:</p>
-
-<pre class="brush: html">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;My test page&lt;/title&gt;
-&lt;/head&gt;</pre>
-
-<p>In larger pages however, the head can get quite full of items — try going to some of your favorite websites and using the <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> to check out their head contents. Our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the most obvious things you'll want to include in the head, and give you some familiarity. Let's get started.</p>
-
-<h2 id="Adding_a_title">Adding a title</h2>
-
-<p>We've already seen the {{htmlelement("title")}} element in action — this can be used to add a title to the document. This however can get confused with the {{htmlelement("h1")}} element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. But they are different things!</p>
-
-<ul>
- <li>The {{htmlelement("h1")}} element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.)</li>
- <li>The {{htmlelement("title")}} element is metadata that represents the title of the overall HTML document (not the document's content.)</li>
-</ul>
-
-<h3 id="Active_learning_Inspecting_a_simple_example">Active learning: Inspecting a simple example</h3>
-
-<ol>
- <li>To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>. To do this, either
-
-  <ol>
-   <li>Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.</li>
-   <li>Press the "Raw" button on the page, which causes the raw code to appear in a new browser tab. Next, from your browser's menu choose <em>File &gt; Save Page As...</em> in your browser's menu then choose a place to save the file.</li>
-  </ol>
- </li>
- <li>Now open the file in your browser. You should see something like this:
-  <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;">It should now be completely obvious where the <code>&lt;h1&gt;</code> content appears, and where the <code>&lt;title&gt;</code> content appears!</p>
- </li>
- <li>You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.</li>
-</ol>
-
-<p>The <code>&lt;title&gt;</code> element contents are also used in other ways. For example, if you try bookmarking the page (<em>Bookmarks &gt; Bookmark This Page</em> or the star icon in the URL bar in Firefox), you will see the <code>&lt;title&gt;</code> contents filled in as the suggested bookmark name.</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>The <code>&lt;title&gt;</code> contents are also used in search results, as you'll see below.</p>
-
-<h2 id="Metadata_the_&lt;meta>_element">Metadata: the &lt;meta&gt; element</h2>
-
-<p>Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the {{htmlelement("meta")}} element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of <code>&lt;meta&gt;</code> element that can be included in your page's &lt;head&gt;, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.</p>
-
-<h3 id="Specifying_your_document's_character_encoding">Specifying your document's character encoding</h3>
-
-<p>In the example we saw above, this line was included:</p>
-
-<pre class="brush: html">&lt;meta charset="utf-8"&gt;</pre>
-
-<p>This element simply specifies the document's character encoding — the character set that the document is permitted to use. <code>utf-8</code> is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:</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;">If you set your character encoding to <code>ISO-8859-1</code>, for example (the character set for the Latin alphabet), your page rendering would be all messed up:</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>
-
-<h3 id="Active_learning_Experiment_with_character_encoding">Active learning: Experiment with character encoding</h3>
-
-<p>To try this out, revisit the simple HTML template you obtained in the previous section on <code>&lt;title&gt;</code> (the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>), try changing the meta charset value to <code>ISO-8859-1</code>, and add the Japanese to your page. This is the code we used:</p>
-
-<pre class="brush: html">&lt;p&gt;Japanese example: ご飯が熱い。&lt;/p&gt;</pre>
-
-<h3 id="Adding_an_author_and_description">Adding an author and description</h3>
-
-<p>Many <code>&lt;meta&gt;</code> elements include <code>name</code> and <code>content</code> attributes:</p>
-
-<ul>
- <li><code>name</code> specifies the type of meta element it is; what type of information it contains.</li>
- <li><code>content</code> specifies the actual meta content.</li>
-</ul>
-
-<p>Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. Let's look at an example:</p>
-
-<pre class="brush: html">&lt;meta name="author" content="Chris Mills"&gt;
-&lt;meta name="description" content="The MDN Learning Area aims to provide
-complete beginners to the Web with all they need to know to get
-started with developing web sites and applications."&gt;</pre>
-
-<p>Specifying an author is useful in a few ways: it is useful to be able to work out who wrote the page, if you want to contact them with questions about the content. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.</p>
-
-<p>Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, or {{glossary("SEO")}}.)</p>
-
-<h3 id="Active_learning_The_description's_use_in_search_engines">Active learning: The description's use in search engines</h3>
-
-<p>The description is also used on search engine result pages. Let's go through an exercise to explore this</p>
-
-<ol>
- <li>Go to the <a href="https://developer.mozilla.org/en-US/">front page of The Mozilla Developer Network</a>.</li>
- <li>View the page's source (Right/<kbd>Ctrl</kbd> + click on the page, choose <em>View Page Source</em> from the context menu.)</li>
- <li>Find the description meta tag. It will look like this:
-  <pre class="brush: html">&lt;meta name="description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both
-Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;</pre>
- </li>
- <li>Now search for "Mozilla Developer Network" in your favorite search engine (We used Yahoo.) You'll notice the description <code>&lt;meta&gt;</code> and <code>&lt;title&gt;</code> element content used in the search result — definitely worth having!
-  <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>Note</strong>: In Google, you will see some relevant subpages of MDN listed below the main MDN homepage link — these are called sitelinks, and are configurable in <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — a way to make your site's search results better in the Google search engine.</p>
-</div>
-
-<div class="note">
-<p><strong>Note</strong>: Many <code>&lt;meta&gt;</code> features just aren't used any more. For example, the keyword <code>&lt;meta&gt;</code> element (<code>&lt;meta name="keywords" content="fill, in, your, keywords, here"&gt;</code>) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.</p>
-</div>
-
-<h3 id="Other_types_of_metadata">Other types of metadata</h3>
-
-<p>As you travel around the web, you'll find other types of metadata, too. A lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.</p>
-
-<p>For example, <a href="http://ogp.me/">Open Graph Data</a> is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN sourcecode, you'll find this:</p>
-
-<pre class="brush: html">&lt;meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"&gt;
-&lt;meta property="og:description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both Web sites
-and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;
-&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
-
-<p>One effect of this is that when you link to MDN on facebook, the link appears along with an image and description: a richer experience for users.</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;">Twitter also has its own similar proprietary metadata, which has a similar effect when the site's URL is displayed on twitter.com. For example:</p>
-
-<pre class="brush: html">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
-
-<h2 id="Adding_custom_icons_to_your_site">Adding custom icons to your site</h2>
-
-<p>To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts.</p>
-
-<p>The humble favicon, which has been around for many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. You'll see favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.</p>
-
-<p>A favicon can be added to your page by:</p>
-
-<ol>
- <li>Saving it in the same directory as the site's index page, saved in <code>.ico</code> format (most browsers will support favicons in more common formats like <code>.gif</code> or <code>.png</code>, but using the ICO format will ensure it works as far back as Internet Explorer 6.)</li>
- <li>Adding the following line into your HTML <code>&lt;head&gt;</code> to reference it:
-  <pre class="brush: html">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
- </li>
-</ol>
-
-<p>Here is an example of a favicon in a bookmarks panel:</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>There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN homepage:</p>
-
-<pre class="brush: html">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"&gt;
-&lt;!-- iPhone with high-resolution Retina display: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"&gt;
-&lt;!-- first- and second-generation iPad: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"&gt;
-&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"&gt;
-&lt;!-- basic favicon --&gt;
-&lt;link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"&gt;</pre>
-
-<p>The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.</p>
-
-<p>Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.</p>
-
-<h2 id="Applying_CSS_and_JavaScript_to_HTML">Applying CSS and JavaScript to HTML</h2>
-
-<p>Just about all websites you'll use in the modern day will employ {{glossary("CSS")}} to make them look cool, and {{glossary("JavaScript")}} to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the {{htmlelement("link")}} element and the {{htmlelement("script")}} element, respectively.</p>
-
-<ul>
- <li>
-  <p>The {{htmlelement("link")}} element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:</p>
-
-  <pre class="brush: html">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
- </li>
- <li>
-  <p>The {{htmlelement("script")}} element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing <code>&lt;/body&gt;</code> tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)</p>
-
-  <pre class="brush: html">&lt;script src="my-js-file.js"&gt;&lt;/script&gt;</pre>
-
-  <p><strong>Note</strong>: The <code>&lt;script&gt;</code> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <code>&lt;script&gt;</code> element.</p>
- </li>
-</ul>
-
-<h3 id="Active_learning_applying_CSS_and_JavaScript_to_a_page">Active learning: applying CSS and JavaScript to a page</h3>
-
-<ol>
- <li>To start this active learning, grab a copy of our <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> and <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.</li>
- <li>Open the HTML file in both your browser, and your text editor.</li>
- <li>By following the information given above, add {{htmlelement("link")}} and {{htmlelement("script")}} elements to your HTML, so that your CSS and JavaScript are applied to your HTML.</li>
-</ol>
-
-<p>If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:</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>The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. when you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.</li>
- <li>The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)</li>
-</ul>
-
-<div class="note">
-<p><strong>Note</strong>: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our <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> example page.</p>
-</div>
-
-<h2 id="Setting_the_primary_language_of_the_document">Setting the primary language of the document</h2>
-
-<p>Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang attribute</a> to the opening HTML tag (as seen in the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> and shown below.)</p>
-
-<pre class="brush: html">&lt;html lang="en-US"&gt;</pre>
-
-<p>This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)</p>
-
-<p>You can also set subsections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:</p>
-
-<pre class="brush: html">&lt;p&gt;Japanese example: &lt;span lang="jp"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
-
-<p>These codes are defined by the <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> standard. You can find more about them in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/html/multimedia_and_embedding/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/index.html
deleted file mode 100644
index a20b442e8e..0000000000
--- a/files/pt-pt/learn/html/multimedia_and_embedding/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Multimédia e integração
-slug: Learn/HTML/Multimedia_and_embedding
-tags:
-  - Aprender
-  - Audio
-  - Avaliação
-  - CodingScripting
-  - Flash
-  - Guía
-  - HTML
-  - Imagens
-  - Landing
-  - Principiante
-  - Responsivo
-  - SVG
-  - Video
-  - iframes
-  - mapas de imagem
-translation_of: Learn/HTML/Multimedia_and_embedding
-original_slug: Learn/HTML/Multimedia_e_integracao
----
-<p>{{LearnSidebar}}</p>
-
-<p class="summary">Nós já vimos muito texto até agora neste curso, mas a Web seria realmente chata se se utilizasse apenas texto. Vamos começar a ver como dar vida à Web, com conteúdo mais interessante! Este módulo explora como utilizar HTML para incluir multimédia nas suas páginas da Web, incluindo os modos diferentes em que as imagens podem ser incluídas, e como incorporar vídeo, áudio e até páginas da Web completas.</p>
-
-<h2 id="Pré-requisitos">Pré-requisitos</h2>
-
-<p>Antes de iniciar este módulo, deverá ter um conhecimento razoável dos conceitos básicos de HTML, como anteriormente abordado em  <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a>. Se ainda não leu este módulo (ou qualquer coisa similar), leia-o primeiro, e depois volte aqui!</p>
-
-<div class="note">
-<p><strong>Nota</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="https://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Guias">Guias</h2>
-
-<p>This module contains the following articles, which will take you through all the fundamentals of embedding multimedia on webpages.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imagens em HTML</a></dt>
- <dd>There are other types of multimedia to consider, but it is logical to start with the humble {{htmlelement("img")}} element, used to embed a simple image in a webpage. In this article we'll look at how to use it in more depth, including basics, annotating it with captions using {{htmlelement("figure")}}, and how it relates to CSS background images.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Conteúdo de vídeo e de áudio</a></dt>
- <dd>Next, we'll look at how to use the HTML5 {{htmlelement("video")}} and {{htmlelement("audio")}} elements, to embed video and audio on our pages; including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; para &lt;iframe&gt; — outras tecnologias de integração</a></dt>
- <dd>At this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}} elements. <code>&lt;iframe&gt;</code>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology on its way out, but which you may still see semi-regularly.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adicionar gráficos de vetor à Web</a></dt>
- <dd>Vector graphics can be very useful in certain situations. Unlike regular formats like PNG/JPG, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. This article introduces you to what vector graphics are, and how to include the popular {{glossary("SVG")}} format in web pages.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagens responsivas</a></dt>
- <dd>With so many different device types now able to browse the Web — from mobile phones to desktop computers — an essential concept to master in the modern web world is responsive design. This refers to the creation of webpages that can automatically change their features to suit different screen sizes, resolutions, etc. This will be looked at in much more detail in a CSS module later on, but for now we'll look at the tools HTML has available to create responsive images, including the {{htmlelement("picture")}} element.</dd>
-</dl>
-
-<h2 id="Avaliações">Avaliações</h2>
-
-<p>The following assessments will test your understanding of the HTML basics covered in the guides above:</p>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/HTML/Multimedia_and_embedding/Pagina_de_boas_vindas_da_Mozilla">Página de boas-vindas da Mozilla</a></dt>
- <dd>In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!</dd>
-</dl>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/HTML/Como/Adicionar_um_mapa_de_zona_clicavel_numa_imagem">Adicionar um mapa clicável no topo de uma imagem</a></dt>
- <dd>Image maps provide a mechanism to make different parts of an image link to different places (think of a map, linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd>
- <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Literacia da Web - básicos 2</a></dt>
- <dd>
- <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in the <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available, and shareable by others).</p>
- </dd>
-</dl>
diff --git a/files/pt-pt/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
deleted file mode 100644
index f27e24d8c8..0000000000
--- a/files/pt-pt/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: 'Avaliação: Página inicial da Mozilla'
-slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
-tags:
-  - Avaliação
-  - HTML
-  - Imagens
-  - Incorporação
-  - Multimedia
-  - Principiante
-  - Responsivo
-  - Video
-  - iframe
-  - imagem
-  - tamanhos
-translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
-original_slug: Learn/HTML/Multimedia_and_embedding/Pagina_de_boas_vindas_da_Mozilla
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<p class="summary">Nesta parte, testaremos seu conhecimento de algumas técnicas discutidas nos artigos deste módulo, pedindo que você adicione imagens e vídeos a uma grande página inteiramente dedicada ao Mozilla!</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Antes de abordar este estudo, você já deve ter trabalhado nos parágrafos anteriores do módulo <a href="/pt-PT/docs/Learn/HTML/Multimedia_and_embedding">Multimídia e Integração</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Testar seus conhecimentos sobre a integração de imagens e vídeos em páginas da Web, bem como técnicas de imagens adaptativas (imagens "responsivas").</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Ponto_de_partida">Ponto de partida</h2>
-
-<p><font><font>Para iniciar este estudo, você precisa buscar todas as imagens e HTML disponíveis no </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/" rel="noopener"><font><font>diretório mdn-splash-page-start</font></font></a><font><font> no github. </font><font>Coloque o conteúdo do arquivo </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html" rel="noopener"><font><font>index.html</font></font></a><font><font>em um arquivo chamado </font></font><code>index.html</code><font><font>em seu disco rígido local, em um novo diretório. </font><font>Em seguida, copie </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png" rel="noopener"><font><font>pattern.png</font></font></a><font><font> na mesma pasta</font></font> (clique com o botão direito sobre a imagem para obter a opção de salvá-la).</p>
-
-<p><font><font>Vá para o diretório </font></font><a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals" rel="noopener"><font><font>original</font></font></a><font><font> para  </font><font>procurar por imagens diferentes e fazer a mesma coisa. </font><font>Talvez seja necessário salvá-las em uma nova pasta por enquanto, caso você precise manipular algumas delas usando um editor gráfico antes de usá-las.</font></font></p>
-
-<div class="note">
-<p><strong>Note</strong>: O arquivo HTML de exemplo contém bastante CSS para estilizar a página. <font><font>Você não precisa alterar o CSS, apenas o HTML no elemento </font></font><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/body" title="O elemento &lt;body> representa o conteúdo principal do documento HTML.  Só pode haver um elemento &lt;body> por documento."><code>&lt;body&gt;</code></a><font><font> - contanto que você insira as tags corretas, o estilo corresponderá à essas alterações.</font></font></p>
-</div>
-
-<h2 id="Sumário_do_projeto">Sumário do projeto</h2>
-
-<p>Nesta parte, apresentamos uma home page quase acabada da Mozilla, que visa dizer algo interessante sobre o que a Mozilla representa e fornecer alguns links para outros recursos. Infelizmente, nenhuma imagem ou vídeo foi adicionado ainda - este é o seu trabalho! Você precisa adicionar algumas mídias para tornar a página mais bonita e fazer mais sentido. As subseções a seguir detalham o que você precisa fazer:</p>
-
-<h3 id="Preparando_as_imagens">Preparando as imagens</h3>
-
-<p>Usando seu editor de imagem favorito, crie versões com 400px de largura por 120px de largura de:</p>
-
-<ul>
- <li><code>firefox_logo-only_RGB.png</code></li>
- <li><code>firefox-addons.jpg</code></li>
- <li><code>mozilla-dinosaur-head.png</code></li>
-</ul>
-
-<p>Dê a eles nomes semelhantes como:  <code>firefoxlogo400.png</code> e <code>firefoxlogo120.png</code>.</p>
-
-<p>Juntamente com o <code>mdn.svg</code>, essas imagens serão seus ícones para vincular a outros recursos, dentro da área <code>further-info</code>. Você também vinculará o logotipo do Firefox no cabeçalho do site. Salve cópias de todos estes arquivos dentro do mesmo diretório de <code>index.html</code>.</p>
-
-<p>Em seguida, crie uma versão com 1200px de largura, no modo paisagem, de <code>red-panda.jpg</code>, e outra, com 600px de largura, no modo retrato, que mostre o panda em close-up. Mais uma vez, nomeie-os de forma semelhante para identificá-los facilmente. <font><font>Salve todas essas cópias na mesma pasta que o </font></font><code>index.html</code><font><font>.</font></font></p>
-
-<div class="note">
-<p><strong>Nota</strong>: <font><font>Você deve otimizar suas imagens em JPG e PNG para torná-las o menor possível e, ao mesmo tempo, de boa qualidade. O </font></font><a href="https://tinypng.com/" rel="noopener"><font><font>tinypng.com</font></font></a><font><font> é uma boa ajuda para fazer isso facilmente.</font></font></p>
-</div>
-
-<h3 id="Adicionando_um_logotipo_ao_cabeçalho">Adicionando um logotipo ao cabeçalho</h3>
-
-<p><font><font>Dentro do elemento </font></font><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/header" title="O elemento HTML &lt;header> representa um grupo de conteúdo introdutório ou conteúdo que ajuda na navegação.  Pode conter elementos de título, mas também outros elementos, como um logotipo, um formulário de pesquisa, etc."><code>&lt;header&gt;</code></a><font><font>, adicione um elemento </font></font><code><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/img" title="O elemento HTML &lt;img> é usado para representar uma imagem em um documento.">&lt;img&gt;</a></code><font><font> que incluirá uma versão pequena do logotipo do Firefox no cabeçalho.</font></font></p>
-
-<h3 id="Adicionando_um_vídeo_ao_conteúdo_do_artigo_principal">Adicionando um vídeo ao conteúdo do artigo principal</h3>
-
-<p><font><font>No item </font></font><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/article" title="O elemento HTML &lt;article> representa o conteúdo autônomo em um documento, página, aplicativo ou site.  Pode ser uma mensagem em um fórum, um artigo de jornal ou revista, uma postagem de blog, um comentário de usuário, um widget ou um gadget interativo ou qualquer outro conteúdo independente.  Este conteúdo destina-se a ser distribuído ou reutilizado de forma independente (por exemplo, em um feed de distribuição)."><code>&lt;article&gt;</code></a><font><font>  (logo abaixo da tag de abertura), incorpore o vídeo do YouTube encontrado aqui: </font></font><a href="https://www.youtube.com/watch?v=ojcNcvb1olg" rel="noopener"><font><font>https://www.youtube.com/watch?v=ojcNcvb1olg</font></font></a><font><font>, usando as ferramentas apropriadas do YouTube para gerar o código. </font><font>O vídeo terá que ter 400px de largura.</font></font></p>
-
-<h3 id="Adicionando_imagens_responsivas_aos_links_de_informação_adicionais">Adicionando imagens responsivas aos links de informação adicionais</h3>
-
-<p><font><font>No elemento </font></font><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/div" title="O elemento HTML &lt;div> (que significa divisão do documento) é um contêiner genérico que permite organizar o conteúdo sem representar nada em particular.  Ele pode ser usado para agrupar outros elementos para aplicar um estilo a eles (usando os atributos class ou id) ou porque eles compartilham atributos com valores comuns, como lang.  Ele deve ser usado somente quando nenhum outro elemento semântico (por exemplo, &lt;article> ou &lt;nav>) for apropriado."><code>&lt;div&gt;</code></a><font><font>, na classe </font></font><code>further-info</code><font><font> você encontrará quatro outros elementos </font></font><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/a" title="O elemento &lt;a> (âncora ou âncora) define um hiperlink para outro local na mesma página ou para outra página na Web."><code>&lt;a&gt;</code></a><font><font> - cada um deles vinculado a uma página interessante relacionada ao Mozilla. </font><font>Para concluir esta seção, você irá inserir um elemento </font></font><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/img" title="O elemento HTML &lt;img> é usado para representar uma imagem em um documento."><code>&lt;img&gt;</code></a><font><font> contendo os atributos </font></font><code><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/img#attr-src">src</a></code><font><font>, </font></font><code><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/img#attr-alt">alt</a></code><font><font>, </font></font><code><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/img#attr-srcset">srcset</a></code><font><font> e </font></font><code><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/img#attr-sizes">sizes</a></code><font><font> de forma apropriada.</font></font></p>
-
-<p> </p>
-
-<p><font><font>Queremos que cada imagem (exceto quando a mesma for responsiva) use uma imagem de 120px quando a largura da janela de visualização do navegador for menor ou igual a 480px e, em outros casos, escolha uma versão de 400px.</font></font></p>
-
-<p><font><font>Verifique se o link correto corresponde à imagem correta!</font></font></p>
-
-<p> </p>
-
-<div class="note">
-<p><strong>Nota</strong>: <font><font>Para testar adequadamente os exemplos </font></font><code>srcset</code><font><font>/</font></font><code>sizes</code><font><font>, você deve fazer o upload do seu site em um servidor (use as </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Using_Github_pages"><font><font>páginas Github</font></font></a><font><font>, é uma solução simples e livre), e então você poderá testar, se tudo correr corretamente, usando as ferramentas de desenvolvimento, como explicado em </font></font><a href="https://developer.mozilla.org/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools"><font><font>Imagens Responsivas: ferramentas úteis para desenvolvedores</font></font></a><font><font>.</font></font></p>
-</div>
-
-<h3 id="Um_panda_vermelho_criativo">Um panda vermelho criativo</h3>
-
-<p><font><font>No elemento </font></font><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/div" title="O elemento HTML &lt;div> (que significa divisão do documento) é um contêiner genérico que permite organizar o conteúdo sem representar nada em particular.  Ele pode ser usado para agrupar outros elementos para aplicar um estilo a eles (usando os atributos class ou id) ou porque eles compartilham atributos com valores comuns, como lang.  Ele deve ser usado somente quando nenhum outro elemento semântico (por exemplo, &lt;article> ou &lt;nav>) for apropriado."><code>&lt;div&gt;</code></a><font><font> da classe </font></font><code>red-panda</code><font><font>, queremos inserir um elemento </font></font><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/picture" title="O elemento HTML &lt;picture> é um contêiner usado para definir vários elementos &lt;source> de zero para um elemento &lt;img>.  O navegador escolherá a fonte mais relevante de acordo com o layout da página (as restrições que se aplicam à caixa na qual a imagem será exibida), dependendo do dispositivo usado (a densidade de pixels da tela, por exemplo com dispositivos hiDPI) e em formatos suportados (por exemplo, WebP para navegadores Chromium ou PNG para outros).  Se nenhuma correspondência for encontrada entre os elementos &lt;source>, o arquivo definido pelo atributo src do elemento &lt;img> será usado."><code>&lt;picture&gt;</code></a><font><font> que exiba o o modo retrato do panda se o quadro tiver 600px de largura, ou menos, e o modo paisagem do panda em outros casos.</font></font></p>
-
-<h2 id="Exemplo">Exemplo</h2>
-
-<p>A captura de tela a seguir mostra como a página inicial deve ficar depois de marcada corretamente, com uma tela ampla e outra estreita.</p>
-
-<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
-
-<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
-
-<h2 id="Avaliação">Avaliação</h2>
-
-<p><font><font>Se você está seguindo este estudo como parte de um programa de curso organizado, você deve poder mostrar seu trabalho ao seu professor/mentor para correção. </font><font>Se você aprender sozinho, você pode obter informações e correções perguntando no </font></font><a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679" rel="noopener"><font><font>tópico sobre este exercício</font></font></a><font><font>, ou no canal de IRC </font></font><a href="irc://irc.mozilla.org/mdn"><font><font>#mdn</font></font></a><font><font> no </font></font><a href="https://wiki.mozilla.org/IRC" rel="noopener"><font><font>IRC da Mozilla</font></font></a><font><font>. </font><font>Tente fazer o exercício primeiro - você não ganha nada enganando!</font></font></p>
-
-<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody>
-  <tr>
-   <td class="SL_td"><input></td>
-   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-   </td>
-   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_font_patch"> </div>
-
-    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody>
-  <tr>
-   <td><input></td>
-   <td>
-    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-   </td>
-   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
deleted file mode 100644
index 712a83118c..0000000000
--- a/files/pt-pt/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
+++ /dev/null
@@ -1,370 +0,0 @@
----
-title: Conteúdo de áudio e vídeo
-slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
-tags:
-  - Artigo
-  - Audio
-  - Guía
-  - HTML
-  - Principiante
-  - Video
-  - faixa
-  - legendas
-translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
-original_slug: Learn/HTML/Multimedia_e_integracao/Conteudo_de_audio_e_vídeo
----
-<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">Now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your HTML documents! In this article we'll look at doing just that with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements; we'll then finish off by looking at how to add captions/subtitles to your videos.</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>, familiarity with HTML fundamentals (as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>) and <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>To learn how to embed video and audio content into a webpage, and add captions/subtitles to video.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Áudio_e_vídeo_na_Web">Áudio e vídeo na Web</h2>
-
-<p>Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s, when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (and later, <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) became popular for handling such content. This kind of technology worked ok, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.</p>
-
-<p>A native solution would solve much of this if done right. Fortunately, a few years later the {{glossary("HTML5")}} specification had such features added, with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements, and some shiny new {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.</p>
-
-<p>We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files and example code</a> for your own experimentation, in case you are unable to get hold of your own.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Before you begin here, you should also know that there are a quite a few {{glossary("OVP","OVPs")}} (online video providers) like <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, and <a href="https://vimeo.com/">Vimeo</a>, and online audio providers like <a href="https://soundcloud.com/">Soundcloud</a>. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages. If you go that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.</p>
-</div>
-
-<h3 id="O_elemento_&lt;video>">O elemento &lt;video&gt;</h3>
-
-<p>The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:</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>The features of note are:</p>
-
-<dl>
- <dt>{{htmlattrxref("src","video")}}</dt>
- <dd>In the same way as for the {{htmlelement("img")}} element, the <code>src</code> (source) attribute contains a path to the video you want to embed. It works in exactly the same way.</dd>
- <dt>{{htmlattrxref("controls","video")}}</dt>
- <dd>Users must be able to control video and audio playback (it's especially critical for people who have <a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilepsy</a>.) You must either use the <code>controls</code> attribute to include the browser's own control interface, or build your interface using the appropriate <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. At minimum, the interface must include a way to start and stop the media, and to adjust the volume.</dd>
- <dt>The paragraph inside the <code>&lt;video&gt;</code> tags</dt>
- <dd>This is called <strong>fallback content</strong> — this will be displayed if the browser accessing the page doesn't support the <code>&lt;video&gt;</code> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.</dd>
-</dl>
-
-<p>The embedded video will look something like this:</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>You can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">try the example live</a> here (see also the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">source code</a>.)</p>
-
-<h3 id="Suporte_para_múltiplos_formatos">Suporte para múltiplos formatos</h3>
-
-<p>There's a problem with the above example, which you may have noticed already if you've tried to access the live link above with a browser like Safari or Internet Explorer. The video won't play! This is because different browsers support different video (and audio) formats.</p>
-
-<p>Let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called <strong>container formats</strong>. They contain different parts that make up the whole song or video — such as an audio track, a video track (in the case of video), and metadata to describe the media being presented.</p>
-
-<p>The audio and video tracks are also in different formats, for example:</p>
-
-<ul>
- <li>A WebM container usually packages Ogg Vorbis audio with VP8/VP9 video. This is supported mainly in Firefox and Chrome.</li>
- <li>An MP4 container often packages AAC or MP3 audio with H.264 video. This is supported mainly in Internet Explorer and Safari.</li>
- <li>The older Ogg container tends to go with Ogg Vorbis audio and Ogg Theora video. This was supported mainly in Firefox and Chrome, but has basically been superceded by the better quality WebM format.</li>
-</ul>
-
-<p>An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: It is not quite that simple, as you can see from our<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility"> audio-video codec compatibility table</a>. In addition, many mobile platform browsers can play an unsupported format by handing it off to the underlying system's media player to play. But this will do for now.</p>
-</div>
-
-<p>The above formats exist to compress video and audio into manageable files (raw video and audio is very large). Browsers contain different <strong>{{Glossary("Codec","Codecs")}}</strong>, like Vorbis or H.264, which are used to convert the compressed sound and video into binary digits and back. As indicated above, browsers unfortunately don't all support the same codecs, so you will have to provide several files for each media production. If you're missing the right codec to decode the media, it just won't play.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> You might be wondering why this situation exists. <strong>MP3 </strong> (for audio) and <strong>MP4/H.264</strong> (for video) are both widely supported, and good quality. However, they are also patent encumbered — American patents cover MP3 until at least 2017, and H.264 until 2027 at the earliest, meaning that browsers that don't hold the patent have to pay huge sums of money to support these formats. In addition, many people avoid restricted software on principle, in favour of open formats. This is why we have to provide multiple formats for different browsers.</p>
-</div>
-
-<p>So how do we do this? Take a look at the following <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">updated example</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">try it live here</a>, also):</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>Here we've taken the <code>src</code> attribute out of the actual <code>&lt;video&gt;</code> tag, and instead included separate {{htmlelement("source")}} elements that point to their own sources. In this case the browser will go through the <code>&lt;source&gt;</code> elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.</p>
-
-<p>Each <code>&lt;source&gt;</code> element also has a <code>type</code> attribute. This is optional, but it is advised that you include them — they contain the {{glossary("MIME type","MIME types")}} of the video files, and browsers can read these and immediately skip videos they don't understand. If they are not included, browsers will load and try to play each file until they find one that works, taking even more time and resources.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Our <a href="/en-US/docs/Web/HTML/Supported_media_formats">article on supported media formats</a> contains some common {{glossary("MIME type","MIME types")}}.</p>
-</div>
-
-<h3 id="Outras_funcionalidades_&lt;video>">Outras funcionalidades &lt;video&gt;</h3>
-
-<p>There are a number of other features you can include on an HTML5 video. Take a look at our third example, below:</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>This will give us a output looking something like this:</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;">The new features are:</p>
-
-<dl>
- <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt>
- <dd>You can control the video size either with these attributes or with {{Glossary("CSS")}}. In both cases, videos maintain their native width-height ratio — known as the <strong>aspect ratio</strong>. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.</dd>
- <dt>{{htmlattrxref("autoplay","video")}}</dt>
- <dd>This attribute makes the audio or video start playing right away while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.</dd>
- <dt>{{htmlattrxref("loop","video")}}</dt>
- <dd>This attribute makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.</dd>
- <dt>{{htmlattrxref("muted","video")}}</dt>
- <dd>This attribute causes the media to play with the sound turned off by default.</dd>
- <dt>{{htmlattrxref("poster","video")}}</dt>
- <dd>This attribute takes as its value the URL of an image, which will be displayed before the video is played. It is intended to be used for a splash or advertising screen.</dd>
- <dt>{{htmlattrxref("preload","video")}}</dt>
- <dd>
- <p>this attribute is used in the element for buffering large files. It can take one of 3 values:</p>
-
- <ul>
-  <li><code>"none"</code> does not buffer the file</li>
-  <li><code>"auto"</code> buffers the media file</li>
-  <li><code>"metadata"</code> buffers only the metadata for the file</li>
- </ul>
- </dd>
-</dl>
-
-<p>You can find the above example available to <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">play live on Github</a> (also <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">see the source code</a>.) Note that we haven't included the <code>autoplay</code> attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!</p>
-
-<h3 id="O_elemento_&lt;audio>">O elemento &lt;audio&gt;</h3>
-
-<p>The {{htmlelement("audio")}} element works in exactly the same way as the {{htmlelement("video")}} element, with a few small differences as outlined below. A typical example might look like so:</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>This produces something like the following in a browser:</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>Nota</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>This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML5 video are as follows:</p>
-
-<ul>
- <li>The {{htmlelement("audio")}} element doesn't support the <code>width</code>/<code>height</code> attributes — again, there is no visual component, so there is nothing to assign a width or height to.</li>
- <li>It also doesn't support the <code>poster</code> attribute — again, no visual component.</li>
-</ul>
-
-<p>Other than this, <code>&lt;audio&gt;</code> supports all the same features as <code>&lt;video&gt;</code> — review the above sections for more information about them.</p>
-
-<h2 id="Faixas_de_texto_da_exibição_de_vídeo">Faixas de texto da exibição de vídeo</h2>
-
-<p>Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:</p>
-
-<ul>
- <li>Many people have auditory impairments (more commonly known as hard of hearing, or deaf) so can't hear the audio.</li>
- <li>Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)</li>
- <li>People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.</li>
-</ul>
-
-<p>Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML5 video you can, with the <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> format and the {{htmlelement("track")}} element.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: "Transcribe" and "transcript" mean to write down spoken words as text.</p>
-</div>
-
-<p>WebVTT is a format for writing text files containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called <strong>cues</strong>, and you can display different types for different purposes, the most common being:</p>
-
-<dl>
- <dt>subtitles</dt>
- <dd>Translations of foreign material, for people who don't understand the words spoken in the audio.</dd>
- <dt>captions</dt>
- <dd>Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.</dd>
- <dt>timed descriptions</dt>
- <dd>Text for conversion into audio, to serve people with visual impairments.</dd>
-</dl>
-
-<p>A typical WebVTT file will look something like this:</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>To get this displayed along with the HTML media playback, you need to:</p>
-
-<ol>
- <li>Save it as a <code>.vtt</code> file in a sensible place.</li>
- <li>Link to the <code>.vtt</code> file with the {{htmlelement("track")}} element. <code>&lt;track&gt;</code> should be placed within <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code>, but after all <code>&lt;source&gt;</code> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are <code>subtitles</code>, <code>captions</code>, or <code>descriptions</code>. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.</li>
-</ol>
-
-<p>Here's an example:</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>This will result in a video that has subtitles displayed, kind of like this:</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>For more details, please read <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. You can <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">find the example</a> that goes along with this article on Github, written by Ian Devlin (see the <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a> too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español. </p>
-
-<div class="note">
-<p><strong>Nota</strong>: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.</p>
-</div>
-
-<h3 id="Aprendizagem_ativa_incorporar_o_seu_próprio_áudio_e_vídeo">Aprendizagem ativa: incorporar o seu próprio áudio e vídeo</h3>
-
-<p>For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> and <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. We'd like you to have a go!</p>
-
-<p>If you are unable to source any video or audio, then you can feel free to use our <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files</a> to carry out this exercise. You can also use our sample code for reference.</p>
-
-<p>We would like you to:</p>
-
-<ol>
- <li>Save your audio and video files in a new directory on your computer.</li>
- <li>Create a new HTML file in the same directory, called <code>index.html</code>.</li>
- <li>Add <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> elements to the page; make them display the default browser controls.</li>
- <li>Give both of them <code>&lt;source&gt;</code> elements so that browsers will find the audio format they support best and load it. These should include <code>type</code> attributes.</li>
- <li>Give the <code>&lt;video&gt;</code> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.</li>
-</ol>
-
-<p>For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.</p>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.</p>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<ul>
- <li>{{htmlelement("audio")}}</li>
- <li>{{htmlelement("video")}}</li>
- <li>{{htmlelement("source")}}</li>
- <li>{{htmlelement("track")}}</li>
- <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li>
- <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</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>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/html/tables/advanced/index.html b/files/pt-pt/learn/html/tables/advanced/index.html
deleted file mode 100644
index 5b45800fa0..0000000000
--- a/files/pt-pt/learn/html/tables/advanced/index.html
+++ /dev/null
@@ -1,539 +0,0 @@
----
-title: HTML - funcionalidades avançadas de tabela e acessibilidade
-slug: Learn/HTML/Tables/Advanced
-tags:
-  - Acessibilidade
-  - Aprender
-  - Artigo
-  - Avançado
-  - Cabeçalhos
-  - HTML
-  - Headers
-  - Principiante
-  - Resumo
-  - caption
-  - incorporar
-  - legenda
-  - tabela
-translation_of: Learn/HTML/Tables/Advanced
-original_slug: Learn/HTML/Tables/Avancada
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
-
-<p class="summary">No segundo artigo neste módulo, nós vamos ver algumas funcionalidades mais avançadas das tabelas HTML tables — tais como legendas/resumos e agrupar as suas filas no cabçalho da taela, secções de corpo e rodapé — bem como, ver a acessibilidade das tabelas para os utilizadores deficientes visuais.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>The basics of HTML (see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>To learn about more advanced HTML table features, and the accessibility of tables.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Adicionar_uma_legenda_à_sua_tabela_com_&lt;caption>">Adicionar uma legenda à sua tabela com &lt;caption&gt;</h2>
-
-<p>You can give your table a caption by putting it inside a {{htmlelement("caption")}} element and nesting that inside the {{htmlelement("table")}} element. You should put it just below the opening <code>&lt;table&gt;</code> tag.</p>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;caption&gt;Dinosaurs in the Jurassic period&lt;/caption&gt;
-
-  ...
-&lt;/table&gt;</pre>
-
-<p>As you can infer from the brief example above, the caption is meant to contain a description of the table contents. This is useful for all readers wishing to get a quick idea of whether the table is useful to them as they scan the page, but particularly for blind users. Rather than have a screenreader read out the contents of many cells just to find out what the table is about, he or she can rely on a caption and then decide whether or not to read the table in greater detail.</p>
-
-<p>A caption is placed directly beneath the <code>&lt;table&gt;</code> tag.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: The {{htmlattrxref("summary","table")}} attribute can also be used on the <code>&lt;table&gt;</code> element to provide a description — this is also read out by screenreaders. We'd recommend using the <code>&lt;caption&gt;</code> element instead, however, as <code>summary</code> is {{glossary("deprecated")}} by the HTML5 spec, and can't be read by sighted users (it doesn't appear on the page.)</p>
-</div>
-
-<h3 id="Aprendizagem_ativa_Adicionar_uma_caption">Aprendizagem ativa: Adicionar uma <em>caption</em></h3>
-
-<p>Let's try this out, revisiting an example we first met in the previous article.</p>
-
-<ol>
- <li>Open up your language teacher's school timetable from the end of <a href="/en-US/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML Table Basics</a>, or make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> file.</li>
- <li>Add a suitable caption for the table.</li>
- <li>Save your code and open it in a browser to see what it looks like.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: You can find our version on GitHub — see <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">see it live also</a>).</p>
-</div>
-
-<h2 id="Adding_structure_with_&lt;thead>_&lt;tfoot>_and_&lt;tbody>">Adding structure with &lt;thead&gt;, &lt;tfoot&gt;, and &lt;tbody&gt;</h2>
-
-<p>As your tables get a bit more complex in structure, it is useful to give them more structural definition. One clear way to do this is by using {{htmlelement("thead")}}, {{htmlelement("tfoot")}}, and {{htmlelement("tbody")}}, which allow you to mark up a header, footer, and body section for the table.</p>
-
-<p>These elements don't make the table any more accessible to screenreader users, and don't result in any visual enhancement on their own. They are however very useful for styling and layout — acting as useful hooks for adding CSS to your table. To give you some interesting examples, in the case of a long table you could make the table header and footer repeat on every printed page, and you could make the table body display on a single page and have the contents available by scrolling up and down.</p>
-
-<p>To use them:</p>
-
-<ul>
- <li>The <code>&lt;thead&gt;</code> element needs to wrap the part of the table that is the header — this will commonly be the first row containing the column headings, but this is not necessarily always the case. if you are using {{htmlelement("col")}}/{{htmlelement("colgroup")}} element, the table header should come just below those.</li>
- <li>The <code>&lt;tfoot&gt;</code> element needs to wrap the part of the table that is the footer — this might be a final row with items in the previous rows summed, for example. You can include the table footer right at the bottom of the table as you'd expect, or just below the table header (the browser will still render it at the bottom of the table).</li>
- <li>The <code>&lt;tbody&gt;</code> element needs to wrap the other parts of the table content that aren't in the table header or footer. It will appear below the table header or sometimes footer, depending on how you decided to structure it (see the notes above).</li>
-</ul>
-
-<div class="note">
-<p><strong>Note</strong>: <code>&lt;tbody&gt;</code> is always included in every table, implicitly if you don't specify it in your code. To check this, open up one of your previous examples that doesn't include <code>&lt;tbody&gt;</code> and look at the HTML code in your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — you will see that the browser has added this tag for you. You might wonder why you ought to bother including it at all — you should, because it gives you more control over your table structure and styling.</p>
-</div>
-
-<h3 id="Aprendizagem_ativa_Adicionar_uma_estrutura_de_tabela">Aprendizagem ativa: Adicionar uma estrutura de tabela</h3>
-
-<p>Let's put these new elements into action.</p>
-
-<ol>
- <li>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> in a new folder.</li>
- <li>Try opening it in a browser — You'll see that it looks OK, but it could stand to be improved. The "SUM" row that contains a summation of the spent amounts seems to be in the wrong place, and there are some details missing from the code.</li>
- <li>Put the obvious headers row inside a <code>&lt;thead&gt;</code> element, the "SUM" row inside a <code>&lt;tfoot&gt;</code> element, and the rest of the content inside a <code>&lt;tbody&gt;</code> element.</li>
- <li>Save and refresh, and you'll see that adding the <code>&lt;tfoot&gt;</code> element has caused the "SUM" row to go down to the bottom of the table.</li>
- <li>Next, add a {{htmlattrxref("colspan","td")}} attribute to make the "SUM" cell span across the first four columns, so the actual number appears at the bottom of the "Cost" column.</li>
- <li>Let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying CSS. Inside the head of your HTML document, you'll see an empty {{htmlelement("style")}} element. Inside this element, add the following lines of CSS code:
-  <pre class="brush: css">tbody {
-  font-size: 90%;
-  font-style: italic;
-}
-
-tfoot {
-  font-weight: bold;
-}
-</pre>
- </li>
- <li>Save and refresh, and have a look at the result. If the <code>&lt;tbody&gt;</code> and <code>&lt;tfoot&gt;</code> elements weren't in place, you'd have to write much more complicated selectors/rules to apply the same styling.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: We don't expect you to fully understand the CSS right now. You'll learn more about this when you go through our CSS modules (<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> is a good place to start; we also have an article specifically on <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">styling tables</a>).</p>
-</div>
-
-<p>Your finished table should look something like the following:</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;My spending record&lt;/title&gt;
-    &lt;style&gt;
-
-        html {
-          font-family: sans-serif;
-        }
-
-          table {
-          border-collapse: collapse;
-          border: 2px solid rgb(200,200,200);
-          letter-spacing: 1px;
-          font-size: 0.8rem;
-        }
-
-        td, th {
-          border: 1px solid rgb(190,190,190);
-          padding: 10px 20px;
-        }
-
-        th {
-          background-color: rgb(235,235,235);
-        }
-
-        td {
-          text-align: center;
-        }
-
-        tr:nth-child(even) td {
-          background-color: rgb(250,250,250);
-        }
-
-        tr:nth-child(odd) td {
-          background-color: rgb(245,245,245);
-        }
-
-        caption {
-          padding: 10px;
-        }
-
-        tbody {
-          font-size: 90%;
-          font-style: italic;
-        }
-
-        tfoot {
-          font-weight: bold;
-        }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-      &lt;table&gt;
-        &lt;caption&gt;How I chose to spend my money&lt;/caption&gt;
-        &lt;thead&gt;
-          &lt;tr&gt;
-            &lt;th&gt;Purchase&lt;/th&gt;
-            &lt;th&gt;Location&lt;/th&gt;
-            &lt;th&gt;Date&lt;/th&gt;
-            &lt;th&gt;Evaluation&lt;/th&gt;
-            &lt;th&gt;Cost (€)&lt;/th&gt;
-          &lt;/tr&gt;
-        &lt;/thead&gt;
-        &lt;tfoot&gt;
-          &lt;tr&gt;
-            &lt;td colspan="4"&gt;SUM&lt;/td&gt;
-            &lt;td&gt;118&lt;/td&gt;
-          &lt;/tr&gt;
-        &lt;/tfoot&gt;
-        &lt;tbody&gt;
-          &lt;tr&gt;
-            &lt;td&gt;Haircut&lt;/td&gt;
-            &lt;td&gt;Hairdresser&lt;/td&gt;
-            &lt;td&gt;12/09&lt;/td&gt;
-            &lt;td&gt;Great idea&lt;/td&gt;
-            &lt;td&gt;30&lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;Lasagna&lt;/td&gt;
-            &lt;td&gt;Restaurant&lt;/td&gt;
-            &lt;td&gt;12/09&lt;/td&gt;
-            &lt;td&gt;Regrets&lt;/td&gt;
-            &lt;td&gt;18&lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;Shoes&lt;/td&gt;
-            &lt;td&gt;Shoeshop&lt;/td&gt;
-            &lt;td&gt;13/09&lt;/td&gt;
-            &lt;td&gt;Big regrets&lt;/td&gt;
-            &lt;td&gt;65&lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;Toothpaste&lt;/td&gt;
-            &lt;td&gt;Supermarket&lt;/td&gt;
-            &lt;td&gt;13/09&lt;/td&gt;
-            &lt;td&gt;Good&lt;/td&gt;
-            &lt;td&gt;5&lt;/td&gt;
-          &lt;/tr&gt;
-        &lt;/tbody&gt;
-    &lt;/table&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Hidden_example', '100%', 300) }}</p>
-
-<div class="note">
-<p><strong>Nota</strong>: You can also find it on Github as <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">see it live also</a>).</p>
-</div>
-
-<h2 id="Incorporar_Tabelas">Incorporar Tabelas</h2>
-
-<p>It is possible to nest a table inside another one, as long as you include the complete structure, including the <code>&lt;table&gt;</code> element. This is generally not really advised, as it makes the markup more confusing and less accessible to screenreader users, and in many cases you might as well just insert extra cells/rows/columns into the existing table. It is however sometimes necessary, for example if you want to import content easily from other sources.</p>
-
-<p>The following markup shows a simple nested table:</p>
-
-<pre class="brush: html">&lt;table id="table1"&gt;
-  &lt;tr&gt;
-    &lt;th&gt;title1&lt;/th&gt;
-    &lt;th&gt;title2&lt;/th&gt;
-    &lt;th&gt;title3&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td id="nested"&gt;
-      &lt;table id="table2"&gt;
-        &lt;tr&gt;
-          &lt;td&gt;cell1&lt;/td&gt;
-          &lt;td&gt;cell2&lt;/td&gt;
-          &lt;td&gt;cell3&lt;/td&gt;
-        &lt;/tr&gt;
-      &lt;/table&gt;
-    &lt;/td&gt;
-    &lt;td&gt;cell2&lt;/td&gt;
-    &lt;td&gt;cell3&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;cell4&lt;/td&gt;
-    &lt;td&gt;cell5&lt;/td&gt;
-    &lt;td&gt;cell6&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<p>The output of which looks something like this:</p>
-
-<table id="table1">
- <tbody>
-  <tr>
-   <th>title1</th>
-   <th>title2</th>
-   <th>title3</th>
-  </tr>
-  <tr>
-   <td id="nested">
-    <table id="table2">
-     <tbody>
-      <tr>
-       <td>cell1</td>
-       <td>cell2</td>
-       <td>cell3</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>cell2</td>
-   <td>cell3</td>
-  </tr>
-  <tr>
-   <td>cell4</td>
-   <td>cell5</td>
-   <td>cell6</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Tabelas_para_utilizadores_deficientes_visuais">Tabelas para utilizadores deficientes visuais</h2>
-
-<p>Let's recap briefly on how we use data tables. A table can be a handy tool, for giving us quick access to data and allowing us to look up different values. For example, It takes only a short glance at the table below to find out how many rings were sold in Gent last August. To understand its information we make visual associations between the data in this table and its column and/or row headers.</p>
-
-<table>
- <caption>Items Sold August 2016</caption>
- <tbody>
-  <tr>
-   <td> </td>
-   <td> </td>
-   <th colspan="3" scope="colgroup">Clothes</th>
-   <th colspan="2" scope="colgroup">Accessories</th>
-  </tr>
-  <tr>
-   <td> </td>
-   <td> </td>
-   <th scope="col">Trousers</th>
-   <th scope="col">Skirts</th>
-   <th scope="col">Dresses</th>
-   <th scope="col">Bracelets</th>
-   <th scope="col">Rings</th>
-  </tr>
-  <tr>
-   <th rowspan="3" scope="rowgroup">Belgium</th>
-   <th scope="row">Antwerp</th>
-   <td>56</td>
-   <td>22</td>
-   <td>43</td>
-   <td>72</td>
-   <td>23</td>
-  </tr>
-  <tr>
-   <th scope="row">Gent</th>
-   <td>46</td>
-   <td>18</td>
-   <td>50</td>
-   <td>61</td>
-   <td>15</td>
-  </tr>
-  <tr>
-   <th scope="row">Brussels</th>
-   <td>51</td>
-   <td>27</td>
-   <td>38</td>
-   <td>69</td>
-   <td>28</td>
-  </tr>
-  <tr>
-   <th rowspan="2" scope="rowgroup">The Netherlands</th>
-   <th scope="row">Amsterdam</th>
-   <td>89</td>
-   <td>34</td>
-   <td>69</td>
-   <td>85</td>
-   <td>38</td>
-  </tr>
-  <tr>
-   <th scope="row">Utrecht</th>
-   <td>80</td>
-   <td>12</td>
-   <td>43</td>
-   <td>36</td>
-   <td>19</td>
-  </tr>
- </tbody>
-</table>
-
-<p>But what if you cannot make those visual associations? How then can you read a table like the above? Visually impaired people often use a screenreader that reads out information on web pages to them. This is no problem when you're reading plain text but interpreting a table can be quite a challenge for a blind person. Nevertheless, with the proper markup we can replace visual associations by programmatic ones.</p>
-
-<p>This section of the article provides further techniques for making tables as accessible as possible.</p>
-
-<h3 class="attTitle" id="Utilizar_os_cabeçalhos_de_coluna_e_linha">Utilizar os cabeçalhos de coluna e linha</h3>
-
-<p>Screenreaders will identify all headers and use them to make programmatic associations between those headers and the cells they relate to. The combination of column and row headers will identify and interpret the data in each cell so that screenreader user can interpret the table similarly to how a sighted user does.</p>
-
-<p>We already covered headers in our previous article — see <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Adding headers with &lt;th&gt; elements</a>.</p>
-
-<h3 class="attTitle" id="O_atributo_de_scope">O atributo de <em>scope</em></h3>
-
-<p>A new topic for this article is the {{htmlattrxref("scope","th")}} attribute, which can be added to the <code>&lt;th&gt;</code> element to tell screenreaders exactly what cells the header is a header for — is it a header for the row it is in, or the column, for example? Looking back to our spending record example from earlier on, you could unambiguously define the column headers as column headers like this:</p>
-
-<pre class="brush: html">&lt;thead&gt;
-  &lt;tr&gt;
-    &lt;th scope="col"&gt;Purchase&lt;/th&gt;
-    &lt;th scope="col"&gt;Location&lt;/th&gt;
-    &lt;th scope="col"&gt;Date&lt;/th&gt;
-    &lt;th scope="col"&gt;Evaluation&lt;/th&gt;
-    &lt;th scope="col"&gt;Cost (€)&lt;/th&gt;
-  &lt;/tr&gt;
-&lt;/thead&gt;</pre>
-
-<p>And each row could have a header defined like this (if we added row headers as well as column headers):</p>
-
-<pre class="brush: html">&lt;tr&gt;
-  &lt;th scope="row"&gt;Haircut&lt;/th&gt;
-  &lt;td&gt;Hairdresser&lt;/td&gt;
-  &lt;td&gt;12/09&lt;/td&gt;
-  &lt;td&gt;Great idea&lt;/td&gt;
-  &lt;td&gt;30&lt;/td&gt;
-&lt;/tr&gt;</pre>
-
-<p>Screenreaders will recognize markup structured like this, and allow their users to read out the entire column or row at once, for example.</p>
-
-<p><code>scope</code> has two more possible values — <code>colgroup</code> and <code>rowgroup</code>. these are used for headings that sit over the top of multiple columns or rows. If you look back at the "Items sold..." table at the start of this section of the article, you'll see that the "Clothes" cell sits above the "Trousers", "Skirts", and "Dresses" cells. All of these cells should be marked up as headers (<code>&lt;th&gt;</code>), but "Clothes" is a heading that sits over the top and defines the other three subheadings. "Clothes" therefore should get an attribute of <code>scope="colgroup"</code>, whereas the others would get an attribute of <code>scope="col"</code>.</p>
-
-<h3 class="attTitle" id="A_identificação_e_atributos_de_cabeçalhos">A identificação e atributos de cabeçalhos</h3>
-
-<p>An alternative to using the <code>scope</code> attribute is to use {{htmlattrxref("id")}} and {{htmlattrxref("headers", "td")}} attributes to create associations between headers and cells. The way they are used is as follows:</p>
-
-<ol>
- <li>You add a unique <code>id</code> to each <code>&lt;th&gt;</code> element.</li>
- <li>You add a <code>headers</code> attribute to each <code>&lt;td&gt;</code> element. Each <code>headers</code> attribute has to contain a list of the <code>id</code>s of all the &lt;th&gt; elements that act as a header for that cell, separated by spaces.</li>
-</ol>
-
-<p>This gives your HTML table an explicit definition of the position of each cell in the table, defined by the header(s) for each column and row it is part of, kind of like a spreadsheet. For it to work well, the table really needs both column and row headers.</p>
-
-<p>Returning to our spending costs example, the previous two snippets could be rewritten like this:</p>
-
-<pre class="brush: html">&lt;thead&gt;
-  &lt;tr&gt;
-    &lt;th id="purchase"&gt;Purchase&lt;/th&gt;
-    &lt;th id="location"&gt;Location&lt;/th&gt;
-    &lt;th id="date"&gt;Date&lt;/th&gt;
-    &lt;th id="evaluation"&gt;Evaluation&lt;/th&gt;
-    &lt;th id="cost"&gt;Cost (€)&lt;/th&gt;
-  &lt;/tr&gt;
-&lt;/thead&gt;
-&lt;tbody&gt;
-&lt;tr&gt;
-  &lt;th id="haircut"&gt;Haircut&lt;/th&gt;
-  &lt;td headers="location haircut"&gt;Hairdresser&lt;/td&gt;
-  &lt;td headers="date haircut"&gt;12/09&lt;/td&gt;
-  &lt;td headers="evaluation haircut"&gt;Great idea&lt;/td&gt;
-  &lt;td headers="cost haircut"&gt;30&lt;/td&gt;
-&lt;/tr&gt;
-
-  ...
-
-&lt;/tbody&gt;</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: This method creates very precise associations between headers and data cells but it uses <strong>a lot</strong> more markup and does not leave any room for errors.  The <code>scope</code> approach is usually enough for most tables.</p>
-</div>
-
-<h3 id="Aprendizagem_ativa_manipular_scope_e_cabeçalhos">Aprendizagem ativa: manipular <em>scope</em> e cabeçalhos</h3>
-
-<ol>
- <li>For this final exercise, we'd like you to first make local copies of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a>, in a new directory.</li>
- <li>Now try adding in the appropriate <code>scope</code> attributes to make this table more appropriate.</li>
- <li>Finally, try making another copy of the starter files, and this time make the table more accessible using <code>id</code> and <code>headers</code> attributes.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: You can check your work against our finished examples — see <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">also see this live</a>) and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">see this live too</a>).</p>
-</div>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>There are a few other things you could learn about table HTML, but we have really given all you need to know at this moment in time. At this point, you might want to go and learn about styling HTML tables — see <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling Tables</a>.</p>
-
-<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/html/tables/basics/index.html b/files/pt-pt/learn/html/tables/basics/index.html
deleted file mode 100644
index fa6242c871..0000000000
--- a/files/pt-pt/learn/html/tables/basics/index.html
+++ /dev/null
@@ -1,651 +0,0 @@
----
-title: HTML - o essencial de tabela
-slug: Learn/HTML/Tables/Basics
-tags:
-  - Aprender
-  - Artigo
-  - HTML
-  - Linha
-  - Principiante
-  - básicos
-  - cabeçalho
-  - coluna
-  - célula
-  - essencial
-  - tabelas
-translation_of: Learn/HTML/Tables/Basics
-original_slug: Learn/HTML/Tables/Basicos
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{NextMenu("Learn/HTML/Tables/Avancada", "Learn/HTML/Tables")}}</div>
-
-<p class="summary">Este artigo inicia-o nas tabelas HTML, abrangendo o essencial, tais como linhas e células, cabeçalhos, distribuir as células por várias colunas e linhas, e como agrupar todas as células em uma coluna para fins de estilização.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>O essencial de HTML (consulte <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Familiarizar-se com as 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 constituído por linhas e colunas (<strong>dados tabulares</strong>). Uma tabela permite consultar, fácil e rapidamente, valores que indiquem alguma relação entre diferentes tipos de dados, por exemplo, uma pessoa e a sua idade, ou os dias da semana num horário de uma piscina.</p>
-
-<p><img alt="A sample table showing names and ages of some people - 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="A swimming timetable showing a sample data table" 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 utilizadas muito frequentemente na sociedade humana, já há muito tempo, como prova este documento dos US Census, datado de 1800:</p>
-
-<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p>
-
-<p>Não é, portanto, surpreendente que os criadores do HTML forneceram um meio de estruturar e apresentar dados tabulares na web.</p>
-
-<h3 id="Como_é_que_uma_tabela_funciona">Como é que uma tabela funciona?</h3>
-
-<p>O propósito de uma tabela é ser rígida. A informação é interpretada facilmente através de associação visual entre cabeçalhos de linhas e colunas. Olhe para a tabela em baixo, por exemplo, e encontre um gigante gasoso Joviano com 62 luas. Pode chegar à resposta associando os cabeçalhos das linhas e colunas relevantes.</p>
-
-<table>
- <caption>Dados de planetas no sistema solar (Factos planetários retirados de  <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</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">Gravidade (m/s<sup>2</sup>)</th>
-   <th scope="col">Duração do dia (horas)</th>
-   <th scope="col">Distância do Sol (10<sup>6</sup>km)</th>
-   <th scope="col">Temperatura média (°C)</th>
-   <th scope="col">Número de luas</th>
-   <th scope="col">Notas</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="2" rowspan="4" scope="rowgroup">Planetas rochosos</th>
-   <th scope="row">Mercúrio</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>O mais próximo do Sol</td>
-  </tr>
-  <tr>
-   <th scope="row">Vénus</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">Terra</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>O nosso mundo</td>
-  </tr>
-  <tr>
-   <th scope="row">Marte</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>O planeta vermelho</td>
-  </tr>
-  <tr>
-   <th rowspan="4" scope="rowgroup">Gigantes Jovianos</th>
-   <th rowspan="2" scope="rowgroup">Gigantes gasosos</th>
-   <th scope="row">Júpiter</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>O maior planeta</td>
-  </tr>
-  <tr>
-   <th scope="row">Saturno</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">Gigantes gelado</th>
-   <th scope="row">Urano</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">Neptuno</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">Planetas anões</th>
-   <th scope="row">Plutão</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>Desclassificado como planeta em 2006, mas tal <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">ainda é controverso</a>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Quando executada corretamente, até cegos podem interpretar dados tabulares numa tabela de HTML — uma tabela de HTML bem sucedida deve melhorar a experiência utilizadores com deficiências visuais.</p>
-
-<h3 id="Estilização_da_tabela">Estilização da tabela</h3>
-
-<p>Também pode <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">ver este exemplo ao vivo</a> no GitHub! Algo que vai notar é que a tabela parece um pouco mais legível lá — isto acontece porque a tabela em cima tem estilização mínima, ao passo que a versão do GitHub aplica estilos CSS mais significativos.</p>
-
-<p>Não se iluda; para as tabelas serem eficazes na internet, tem que fornecer alguma informação de estilos com <a href="/en-US/docs/Learn/CSS">CSS</a>, assim como uma boa estrutura sólida com HTML. Neste módulo focamo-nos na parte de HTML; para saber mais sobre a parte de CSS deve visitar o nosso artigo sobre <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Estilizar tabelas</a>, quando acabar de ler este.</p>
-
-<p>Não nos vamos focar em CSS neste módulo, mas proporcionamos uma folha de estilos CSS mínima que pode usar para tornar as suas tabelas mais legíveis do que se não tivesse estilo. Pode obter a <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">folha de estilos aqui</a>, e também pode obter um <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">modelo HTML</a> que aplica a folha de estilos — juntando estes dois documentos terá um bom ponto de partida para fazer experiências com tabelas HTML.</p>
-
-<h3 id="Quando_NÃO_deverá_utilizar_tabelas_HTML">Quando NÃO deverá utilizar tabelas HTML?</h3>
-
-<p>Tabelas em HTML devem ser utilizdas para mostrar dados tabulares — é para isso que foram concebidas. Infelizmente, muitas pessoas costumavam usar tabelas HTML para dispor páginas web: por exemplo, uma linha contém o cabeçalho, uma linha possui o conteúdo, organizado em colunas, outra linha contém o rodapé, etc. Esta prática era comum porque o suporte para CSS nos vários navegadores costumava ser horrível. Hoje em dia, layouts com tabelas são muito menos comuns, mas ainda os poderá encontrar em alguns cantos da internet. Poderá encontrar mais detalhes e um exemplo no artigo <a href="/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Layouts de páginas</a> no nosso <a href="/en-US/docs/Learn/Accessibility">Módulo de Acessibilidade</a>.</p>
-
-<p>Resumidamente, recorrer a tabelas para dispor elementos em vez de <a href="/en-US/docs/Learn/CSS/CSS_layout">Técnicas de layout CSS</a> é má ideia. As razões principais são as seguintes:</p>
-
-<ol>
- <li><strong>Layouts com tabelas reduzem acessibilidade de utilizadores com deficiências visuais</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Os leitores de ecrãs</a>, usados por cegos, interpretam as etiquetas existentes na página HTML e lêem o conteúdo em voz alta. Como tabelas não são uma ferramenta adequada para o layout, e a marcação é mais complexa do que se recorresse a técnicas de layout de CSS, a informação dada pelos leitores de ecrãs será confusa para os seus utilizadores.</li>
- <li><strong>Tabelas produzem "sopa" de etiquetas</strong>: Como já foi referido, layouts com tabelas geralmente envolvem estruturas de marcação mais complexas do que as técnicas de layout próprias. Isto torna o código mais difícil de escrever, manter e depurar.</li>
- <li><strong>Tabelas não são automaticamente responsivas</strong>: Ao usar contentores próprios (como {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, ou {{htmlelement("div")}}), a sua largura por omissão é 100% do elemento pai. Tabelas, pelo contrário, são dimensionadas de acordo com o seu conteúdo, pelo que são necessárias medidas adicionais para conseguir que o estilo do layout funcione eficazmente numa variedade de dispositivos.</li>
-</ol>
-
-<h2 id="Aprendizagem_ativa_Criar_a_sua_primeira_tabela">Aprendizagem ativa: Criar a sua primeira tabela</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">&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">&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 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">&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>Nota</strong>:também pode encontrar isto no GitHub, como <em><a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a></em> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">veja-a em execução</a>).</p>
-</div>
-
-<h2 id="Adicionar_cabeçalhos_com_elementos_&lt;th>">Adicionar cabeçalhos com elementos &lt;th&gt;</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">&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>Em baixo, tem a tabela renderizada:</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="Aprendizagem_ativa_cabeçalhos_de_tabela">Aprendizagem ativa: cabeçalhos de tabela</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' stand 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>Nota</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="Porque_é_que_os_cabeçalhos_são_úteis">Porque é que os cabeçalhos são úteis?</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>Nota</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="Permitir_que_as_células_sejam_distribuídas_por_múltiplas_filas_e_colunas">Permitir que as células sejam distribuídas por múltiplas filas e colunas</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">&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;Cock&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>Cock</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="Proporcionar_estilização_comum_para_colunas">Proporcionar estilização comum para colunas</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>
-
-<p>Take the following simple example:</p>
-
-<pre class="brush: html">&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">&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">&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="Aprendizagem_ativa_colgroup_e_col">Aprendizagem ativa: <em>colgroup </em>e<em> </em><em>col</em></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>Add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. The values for your <code>style</code> attribute are <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li>
- <li>The last two days are free days, so just set them to no background color but a set width; the value for the <code>style</code> attribute is <code>width: 42px;</code></li>
-</ol>
-
-<p>See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">see it live also</a>).</p>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.</p>
-
-<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
-
-<div>
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li><a href="/pt-PT/docs/Learn/HTML/Tables/Basicos">HTML table basics</a></li>
- <li><a href="/pt-PT/docs/Learn/HTML/Tables/Avancada">HTML - funcionalidades avançadas de tabela e acessibilidade</a></li>
- <li><a href="/pt-PT/docs/Learn/HTML/Tables/Avaliacao_Estruturar_os_dados_dos_planetas">Estruturar dados dos planetas</a></li>
-</ul>
-</div>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody>
-  <tr>
-   <td class="SL_td"><input></td>
-   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-   </td>
-   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-   <td class="SL_td">
-    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_font_patch"> </div>
-
-    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-   </td>
-   <td class="SL_td">
-    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-   </td>
-   <td class="SL_td">
-    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result"> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody>
-  <tr>
-   <td><input></td>
-   <td>
-    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-   </td>
-   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
-  </tr>
- </tbody>
-</table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/html/tables/index.html b/files/pt-pt/learn/html/tables/index.html
deleted file mode 100644
index 8078285603..0000000000
--- a/files/pt-pt/learn/html/tables/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: Tabelas HTML
-slug: Learn/HTML/Tables
-tags:
-  - Artigo
-  - Guía
-  - HTML
-  - Principiante
-  - Programação Scripting
-  - modulo
-  - tabelas
-translation_of: Learn/HTML/Tables
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Uma tarefa muito comum em HTML é estruturar os dados tabulares, e esta tem um número de elementos e atributos próprios para essa finalidade. Em conjunto com a linguagem <a href="/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 s estatísticas sobre os seus dinossauros favoritos ou equipas de futebol. Este módulo leva-o a tudo o que precisa saber sobre a estruturação de dados tabulares, utilziando o HTML.</p>
-
-<h2 id="Pré-requisitos">Pré-requisitos</h2>
-
-<p>Antes de iniciar este módulo, já deverá ter domínio dos básicos de HTML — consulte <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: se está a utilizar um computador/tablet/outro dispositivo onde não tem a possibilidade de criar os seus próprios ficheiros, pode testar (a maioria) dos exemplos de código num programa de codificação on-line, 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>Este módulo contém os seguintes artigos:</p>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/HTML/Tables/Basicos">HTML - o essencial de tabela</a></dt>
- <dd>Este artigo inicia-o nas tabelas HTML, cobrindo o essencial, tais como linhas e células, cabeçalhos, como distribuir as células por múltiplas colunas e linhas, e como agrupar todas as células numa coluna para efeitos de estilio.</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML/Tables/Avancada">HTML - funcionalidades avançadas de tabela 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 cabçalho da taela, secções de corpo e rodapé — bem como, ver a acessibilidade das tabelas para os utilizadores deficientes visuais .</dd>
-</dl>
-
-<h2 id="Avaliações">Avaliações</h2>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/HTML/Tables/Avaliacao_Estruturar_os_dados_dos_planetas">Estruturar os dados do planeta</a></dt>
- <dd>Na nossa avaliação de tabela, nós vamos fornecer alguns dados sobre os planetas do nosso sistema solar, para que possa estruturá-los numa tabela HTML.</dd>
-</dl>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/html/tables/structuring_planet_data/index.html b/files/pt-pt/learn/html/tables/structuring_planet_data/index.html
deleted file mode 100644
index d37cbc7591..0000000000
--- a/files/pt-pt/learn/html/tables/structuring_planet_data/index.html
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: 'Avaliação: Estruturar os dados dos planetas'
-slug: Learn/HTML/Tables/Structuring_planet_data
-translation_of: Learn/HTML/Tables/Structuring_planet_data
-original_slug: Learn/HTML/Tables/Avaliacao_Estruturar_os_dados_dos_planetas
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
-
-<p class="summary">Na nossa avaliação de tabela, nós forncemos-lhe alguns dados dos planetas no nosso sistema solar, para que possa estruturá-los numa tabela HTML .</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Before attempting this assessment you should have already worked through all the articles in this module.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>To test comprehension of HTML tables and associated features.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Ponto_inicial">Ponto inicial</h2>
-
-<p>To get this assessment started, make local copies of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>, and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> in a new directory in your local computer.</p>
-
-<div class="note">
-<p><strong>Note</strong>: Alternatively, you could use a site like <a class="external external-icon" href="https://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="Sumário_do_projeto">Sumário do projeto</h2>
-
-<p>You are working at a school; currently your students are studying the planets of our solar system, and you want to provide them with an easy-to-follow set of data to look up facts and figures about the planets. An HTML data table would be ideal — you need to take the raw data you have available and turn it into a table, following the steps below.</p>
-
-<p>The finished table should look like this:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p>
-
-<p>You can also <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">see the example live here</a> (no looking at the source code — don't cheat!)</p>
-
-<ul>
-</ul>
-
-<h2 id="Passos_para_concluir">Passos para concluir</h2>
-
-<p>The following steps describe what you need to do to complete the table example. All the data you'll need is contained in the <code>planets-data.txt</code> file. If you have trouble visualising the data, look at the live example above, or try drawing a diagram.</p>
-
-<ol>
- <li>Open your copy of <code>blank-template.html</code>, and start the table off by giving it an outer container, a table header, and a table body. You don't need a table footer for this example.</li>
- <li>Add the provided caption to your table.</li>
- <li>Add a row to the table header containing all the column headers.</li>
- <li>Create all the content rows inside the table body, remembering to make all the row headings into headings semantically.</li>
- <li>Make sure all the content is inserted into the right cells — in the raw data, each row of planet data is shown next to its associated planet.</li>
- <li>Add attributes to make the row and column headers unambiguously associated with the rows, columns, or rowgroups that they act as headings for.</li>
- <li>Add a black border just around the column that contains all the planet name row headers.</li>
-</ol>
-
-<h2 id="Dicas_e_sugestões">Dicas e sugestões</h2>
-
-<ul>
- <li>The first cell of the header row needs to be blank, and span two columns.</li>
- <li>The group row headings (e.g. <em>Jovian planets</em>) that sit to the left of the planet name row headings (e.g. <em>Saturn</em>) are a little tricky to sort out — you need to make sure each one spans the correct number of rows and columns.</li>
- <li>One way of associating headers with their rows/columns is a lot easier than the other way.</li>
-</ul>
-
-<h2 id="Avaliação">Avaliação</h2>
-
-<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
-
-<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/index.html b/files/pt-pt/learn/index.html
deleted file mode 100644
index 9a769eef86..0000000000
--- a/files/pt-pt/learn/index.html
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: Aprender sobre o desenvolvimento da Web
-slug: Learn
-tags:
-  - Aprender
-  - Beginner
-  - CSS
-  - HTML
-  - Index
-  - Introdução
-  - Landing
-  - Web
-translation_of: Learn
----
-<div>{{LearnSidebar}}</div>
-
-<div>
-<p class="summary">Bem-vindo à <strong>Área de Aprendizagem da MDN</strong>. Este conjunto de artigos visa fornecer aos principiantes no desenvolvimento da<em> web</em> com tudo o que eles precisam para começarem a programar <em>websites</em> simples.</p>
-</div>
-
-<p>O objetivo desta área da MDN não é transformá-lo de "principiante" em "especialista", mas sim, de "principiante" a "competente". A partir daí, deverá conseguir começar o seu próprio trajeto, a aprender com <a href="https://developer.mozilla.org/pt-PT/">o resto da MDN</a> e outros recursos de nível intermediário e / ou avançado que requerem conhecimento prévio.</p>
-
-<p>Se é <span>principiante</span>, o desenvolvimento <em>da web</em> pode ser um desafio — nós iremos dar-lhe a mão e fornecer-lhe detalhes suficientes para que se sinta confortável e aprenda os tópicos adequadamente. Deve sentir-se confortável, quer seja um estudante a aprender desenvolvimento <em>web </em>(por sua conta ou como parte de uma turma), um professor a pesquisar matéria para aulas, como passatempo, ou alguém que apenas quer saber mais sobre como as tecnologias da <em>web </em>funcionam.</p>
-
-<h2 id="Whats_new">What's new?</h2>
-
-<p>O conteúdo a <strong>Área de Aprendizagem</strong> está a ser acrescentado com regularidade. Começámos a manter <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">Registo de atualizações na Área de aprendizagem</a> (texto em inglês) para mostrar as mudanças mais recentes.</p>
-
-<p>Se tem questões sobre tópicos que gostaria que fossem abordados ou acha que estão em falta, contacte nos através do <a href="https://discourse.mozilla.org/c/mdn">Discourse forum</a>.</p>
-
-<div class="callout">
-<h3 id="Deseja_ser_um_programador_de_front-end">Deseja ser um programador de front-end?</h3>
-
-<p>Nos construimos um curso que inclui toda a informação essencial que precisa para atingir o seu objetivo.</p>
-
-<p><a class="cta primary" href="https://wiki.developer.mozilla.org/docs/Learn/Front-end_web_developer">Começar a Aprender</a></p>
-</div>
-
-<h2 id="Onde_começar">Onde começar</h2>
-
-<ul class="card-grid">
- <li><span>Principiante:</span> Se é principiante no do desenvolvimento da Web, nós recomendamos que comesse pelo nosso módulo <a href="/pt-PT/docs/Learn/Comecar_com_a_Web">Começar com a Web</a>, que fornece uma introdução prática ao desenvolvimento <em>web</em>.</li>
- <li><span>Além do básico:</span> Se já tem algum conhecimento, o próximo passo é aprender {{glossary("HTML")}} e {{glossary("CSS")}} em detalhe: comece com o nosso módulo <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução a HTML</a> e avance para o nosso módulo <a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS">Introdução a CSS</a>.</li>
- <li><span>Mover para <em>scripting</em>:</span> Se já se sente confortável com HTML e CSS, ou se está interessado principalmente em código, poderá querer seguir para {{glossary("JavaScript")}} ou desenvolvimento do lado do servidor. Comece com os nossos módulos <a href="/pt-PT/docs/Learn/JavaScript/Primeiros_passos">JavaScript - primeiros passos</a> e <a href="/pt-PT/docs/Learn/No-servidor/Primeiros_passos">Primeiros passos do lado do servidor</a>.</li>
- <li><span><em>Frameworks</em> e ferramentas: </span>Após ter um conhecimento forte dos essenciais de HTML, CSS e JavaScript, deve aprender sobre ferramentas de desenvolvimento client-side, e a seguir considere aprender sobre <em>client-side JavaScript frameworks</em> e <a href="/pt-PT/docs/Learn/No-servidor">programação de websites server-side</a>.<br>
-   </li>
-</ul>
-
-<div class="note">
-<p><strong>Nota</strong>: O nosso <a href="/pt-PT/docs/Glossário">Glossário</a> proporciona definições de terminologia. Ademais, se tiver uma questão específica pode ver a página de <a href="/pt-PT/docs/Learn/Questoes_comuns">Questões Comuns</a>.</p>
-</div>
-
-<p>{{LearnBox({"title":"Random glossary entry"})}}</p>
-
-<h2 id="Tópicos_abrangidos">Tópicos abrangidos</h2>
-
-<p>A seguir, tem uma lista de todos os tópicos que nós abordaremos na área de aprendizagem da MDN.</p>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/Comecar_com_a_Web">Primeiros passos na aprendizagem Web</a></dt>
- <dd>Proporciona uma introdução prática ao desenvolvimento <em>web </em>para os principiantes.</dd>
- <dt><a href="/pt-PT/docs/Learn/HTML">HTML — Estruturar a <em>w</em>eb</a></dt>
- <dd>HTML é a Linguagem que é usada para estruturar as diferentes partes dos conteúdos e definir o seu significado ou propósito. Este tópico ensina HTML em detalhe.</dd>
- <dt><a href="/pt-PT/docs/Learn/CSS">CSS — Estilizar a <em>web</em></a></dt>
- <dd>CSS é a Linguagem usada para estilizar e formatar o conteúdo Web, como também acrescenta comportamentos como, por exemplo, animações. Este tópico apresenta uma cobertura abrangente de CSS.</dd>
- <dt><a href="/pt-PT/docs/Learn/JavaScript">JavaScript — Scripts dinâmicos do lado do cliente</a></dt>
- <dd>JavaScript é a Linguagem usada para adicionar funcionalidades dinâmicas a uma página Web. Este tópico ensina o essencial para se tornar confortável a escrever e compreender JavaScript.</dd>
- <dt><a href="/pt-PT/docs/Learn/Acessibilidade">Acessibilidade — tornar a <em>web</em> utilizável por todos</a></dt>
- <dd>Acessibilidade é a prática de tornar a Web disponível ao maior número possível de pessoas independentemente de alguma incapacidade física, localização, dispositivo ou outro fator qualquer. Este tópico mostrará-lhe tudo o que precisa saber.</dd>
- <dt><a href="/pt-PT/docs/Learn/Tools_and_testing">Ferramentas e testes</a></dt>
- <dd>Este tópico abrange as ferramentas que os programadores utilizam para facilitar o seu trabalho, como, por exemplo, ferramentas de testes para diferentes navegadores, linters, formatadores, ferramentas de transformação, sistemas de controlo de versão, ferramentas de <em>deployment</em>, e <em>client-side frameworks</em> de JavaScript.</dd>
- <dt>Programação <em>Server-Side</em></dt>
- <dd>Mesmo que esteja focado em desenvolvimento <em>client-side</em>, é muito útil saber como funcionam os servidores e como são as características da programação <em>server-side</em>. Este tópico fornece uma introdução geral em como tudo isso funciona e fornece também tutoriais detalhados que mostram como construir uma aplicação <em>server-side</em> a usar duas <em>frameworks</em> populares: Django (Phyton) e Express (Node.js).</dd>
-</dl>
-
-<h2 id="Como_obter_os_nossos_exemplos_de_código">Como obter os nossos exemplos de código</h2>
-
-<p>Os exemplos de código que irá encontrar na Área de Aprendizagem podem ser encontrados na <a href="https://github.com/mdn/learning-area/">nossa página no GitHub</a>. Se preferir copiá-los para o seu computador, a maneira mais fácil é descarregar <a href="https://github.com/mdn/learning-area/archive/master.zip">o ficheiro ZIP do código mais recente</a>.</p>
-
-<p>Se preferir copiar o código duma maneira mais flexível que permite atualizações automáticas, pode seguir estas instruções um pouco mais complexas:</p>
-
-<ol>
- <li><a href="http://git-scm.com/downloads">Instale Git</a> na sua máquina. Este é o sistema de controlo de versão sob qual o GitHub funciona.</li>
- <li><a href="https://github.com/join">Inscreva se no GitHub</a>. Isto é simples e fácil (mas é em inglês).</li>
- <li>Quando se tiver inscrito, entre na sua conta no <a href="https://github.com">github.com</a> com o seu nome de utilizador e senha.</li>
- <li>Abra o <em><a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">command prompt</a></em> (Windows) ou <em>terminal</em> (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">MacOSX</a>) no seu computador.</li>
- <li>Para copiar o repositório da área de ensino para uma pasta chamada <code>learning-area</code> dentro da pasta a qual o <em>command prompt </em>/ <em>terminal</em> esta apontado, use o seguinte comando:
-  <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
- </li>
- <li>Agora pode entrar na pasta e encontrar os ficheiros que procura (a usar o <em>finder</em> / <em>file explorer</em> ou o <a href="https://en.wikipedia.org/wiki/Cd_(command)">comando "cd"</a>).</li>
- <li>Visite a <a href="https://docs.github.com/pt">página de ajuda</a> no GitHub para mais informação.</li>
-</ol>
-
-<p>Também pode atualizar a sua versão do repositório <code>learning-area</code> com quaisquer mudanças feitas na versão <em>master</em> no GitHub com os seguintes passos:</p>
-
-<ol>
- <li>No <em>command prompt</em> / <em>terminal</em>, vá à pasta <code>learning-area</code> usando <code>cd</code>. Por exemplo, se estiver na pasta que a contem:
-
-  <pre class="brush: bash notranslate">cd learning-area</pre>
- </li>
- <li>Atualize o repositório usando o comando:
-  <pre class="brush: bash notranslate">git pull</pre>
- </li>
-</ol>
-
-<h2 id="Contactar-nos">Contactar-nos</h2>
-
-<p>Se nos deseja contactar sobre o que for, a melhor forma é através do nosso <a href="https://discourse.mozilla.org/c/mdn">Discourse forum</a>. Nós desejamos saber de tudo que está incorreto ou em falta no site, pedidos para novos tópicos, pedidos de ajuda com items que não entende, ou qualquer outra questão ou preocupação.</p>
-
-<p>Se estiver interessado em ajudar a desenvolver / melhorar o conteúdo, veja o artigo <a href="https://wiki.developer.mozilla.org/pt-PT/docs/Aprender/Como_contribuir">Como Contribuir</a>. Estamos interessados em falar com você, seja um aluno, professor, programador da <em>web</em> experiente, ou alguém interessado em ajudar a melhorar a experiência de aprendizagem.</p>
-
-<h2 id="Ver_também">Ver também</h2>
-
-<dl>
- <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Boletim Informativo de Desenvolvimento da Mozilla</a></dt>
- <dd>O nosso boletim para programadores da <em>web</em>, que é um recurso fantástico para todos os níveis de experiência (escrito em inglês).</dd>
-</dl>
-
-<dl>
- <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
- <dd>Um ótimo site para aprender linguagens de programação, sem necessitar conhecimentos prévios.</dd>
- <dt><a href="https://code.org/">Code.org</a></dt>
- <dd>Teoria e prática básica de programação, focado em ensinar crianças ou principiantes.</dd>
- <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
- <dd>Cursos gratuitos e abertos para o aprendizado de habilidades tecnológicas, com orientação e aprendizagem baseada em projetos.</dd>
- <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
- <dd>Um <em>website</em> interativo com tutoriais (<em>challenges</em>) e projetos para aprender desenvolvimento <em>web</em>.</dd>
-</dl>
-
-<dl>
- <dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
- <dd>Uma <em>framework</em> para conhecimento básico da <em>web</em> &amp; habilidades do século XXI, que também dá acesso a atividades de ensino divididas em categorias.</dd>
- <dt><a href="https://learning.mozilla.org/activities">Atividades de ensino</a></dt>
- <dd>Uma série de atividades de ensino para uso no ensino (e aprendizagem pessoal) criada pela Mozilla Foundation, cobre tudo desde os básicos da <em>web</em>, até privacidade com JavaScript e <em>hacking</em> o Minecraft.</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-pt/learn/index/index.html b/files/pt-pt/learn/index/index.html
deleted file mode 100644
index cc9d1be7a8..0000000000
--- a/files/pt-pt/learn/index/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Índex
-slug: Learn/Index
-tags:
-  - Aprender
-  - Index
-  - Metadados da MDN
-translation_of: Learn/Index
----
-<p>{{Index("/pt-PT/docs/Learn")}}</p>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; display: block; opacity: 0; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html
deleted file mode 100644
index c45af40a6a..0000000000
--- a/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html
+++ /dev/null
@@ -1,161 +0,0 @@
----
-title: JavaScript
-slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
-tags:
-  - CSS:Como_começar
-translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
-translation_of_original: Web/Guide/CSS/Getting_started/JavaScript
-original_slug: Web/CSS/Como_começar/JavaScript
----
-<p>{{ PreviousNext("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}</p>
-
-<p>Esta é a Parte II do tutorial. A Parte II contém alguns exemplos que mostram o escopo do CSS no Mozilla.</p>
-
-<p>Cada página na Parte II ilustra como o CSS interage com algumas outras tecnologias. Estas páginas não são desenhadas para ensinar como usar estas outras tecnologias. Vá para outros tutorias para aprender isto em detalhes.</p>
-
-<p>Em vez disso, estas páginas são desenhadas para ilustrar os muitos usos do CSS. Para usar estas páginas, você deve ter um conhecimento em CSS, mas você não precisa qualquer conhecimento em outras tecnologias.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_JavaScript" name="Informa.C3.A7.C3.A3o:_JavaScript">Informação: JavaScript</h2>
-
-<p>JavaScript é uma <em>linguagem de programação</em>. Quando você usa alguma aplicação Mozilla (por exemplo, seu naverador Mozilla) muito do código que o seu computador roda é escrito em JavaScript.</p>
-
-<p>JavaScript pode interagir com folhas de estilo, permitindo a você escrever programas que mudem o estilo do documento dinamicamente.</p>
-
-<p>Existem três maneiras para fazer isto:</p>
-
-<ul>
- <li>Trabalhando com uma lista de folhas de estilo no documento — por exemplo: adicionando, removendo ou modificando uma folha de estilo.</li>
- <li>Trabalhando com as regras de uma folha de estilo — por exemplo: adicionando, removendo ou modificando uma regra.</li>
- <li>Trabalhando com um elemento individual no DOM — modificando seu estilo independentemente da folha de estilo do seu 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 no Mozilla, veja a página <a href="/pt/JavaScript" title="pt/JavaScript">JavaScript</a> neste wiki.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_de_JavaScript" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_de_JavaScript">Ação: Uma demonstração de JavaScript</h2>
-
-<p>Criei um novo documento HTML, <code>doc5.html</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p>
-
-<div style="width: 48em; height: 12em; overflow: auto;">
-<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
-&lt;HTML&gt;
-
-&lt;HEAD&gt;
-&lt;TITLE&gt;Como Começar Mozilla CSS - Demonstração JavaScript&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 de amostra&lt;/H1&gt;
-
-&lt;DIV id="square"&gt;&lt;/DIV&gt;
-
-&lt;BUTTON type="button" onclick="doDemo(this);"&gt;Clique Aqui&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>/*** Demonstração JavaScript ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-  }
-
-button {
-  padding: .5em 2em;
-  }
-</pre>
-</div>
-
-<p>Crie um novo arquivo de texo, <code>script5.js</code>. Copie e cole o conteúdo daqui:</p>
-
-<div style="width: 48em;">
-<pre>// Demonstração JavaScript
-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 navegador e pressione o botão.</p>
-
-<p>Este wiki não suporta o JavaScript nas páginas, então não é possível mostrar a demonstração aqui. Deve se parecer como isto, 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>Demonstração JavaScript</strong></p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>
-    <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
-     <tbody>
-      <tr>
-       <td>
-        <p><strong>Demonstração JavaScript</strong></p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Notas sobre esta demonstração:</p>
-
-<ul>
- <li>O documento HTML é ligado à folha de estilo normalmente, e também é ligado ao script.</li>
- <li>O script trabalha com elementos individuais no DOM. Isto modifica o estilo dos quadrados diretamente, porém, modifica o estilo do botão 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 <code>background-color</code> do CSS.</li>
- <li>Seu navegador tem uma regra construída das CSS para <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> que muda a aparência do botão quando ele está desabilitado.</li>
-</ul>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
- <caption>Desafio</caption>
- <tbody>
-  <tr>
-   <td>Mude o script de modo que o quadrado salte para a direita em 20 em quando sua cor mudar, e salte para trás mais tarde.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/JavaScript" title="Talk:pt/CSS/Como_começar/JavaScript">Discussão</a>.</p>
-
-<p>Nesta demonstração, o documento HTML linka o script mesmo que somente o elemento button use o script. Mozilla extende o CSS para que possa ser ligado ao código JavaScript (e também conteúdo e outras folhas de estilo) para elementos selecionados. A próxima página demonstra isto: <strong><a href="/pt/CSS/Como_come%C3%A7ar/XBL_bindings" title="pt/CSS/Como_começar/XBL_bindings">XBL bindings</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}</p>
diff --git a/files/pt-pt/learn/javascript/first_steps/index.html b/files/pt-pt/learn/javascript/first_steps/index.html
deleted file mode 100644
index 686bc9d07d..0000000000
--- a/files/pt-pt/learn/javascript/first_steps/index.html
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: JavaScript - Os Primeiros Passos
-slug: Learn/JavaScript/First_steps
-tags:
-  - Artigo
-  - Avaliação
-  - Guía
-  - JavaScript
-  - Numeros
-  - Operadores
-  - Principiante
-  - Variáveis
-  - l10n:priority
-  - modulo
-  - strings
-translation_of: Learn/JavaScript/First_steps
-original_slug: Learn/JavaScript/Primeiros_passos
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key building blocks in detail, such as variables, strings, numbers and arrays.</p>
-
-<h2 id="Pré-requisitos">Pré-requisitos</h2>
-
-<p>Before starting this module, you don't need any previous JavaScript knowledge, but you should have some familiarity with HTML and CSS. You are advised to work through the following modules before starting on JavaScript:</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basic JavaScript introduction</a>).</li>
- <li><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao  HTML</a>.</li>
- <li><a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a>.</li>
-</ul>
-
-<div class="note">
-<p><strong>Nota</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Guias">Guias</h2>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript">O que é o JavaScript?</a></dt>
- <dd>Welcome to the MDN beginner's JavaScript course! In this first article we will look at JavaScript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with JavaScript's purpose.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></dt>
- <dd>Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></dt>
- <dd>When you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in JavaScript programs.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></dt>
- <dd>After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article we will get down to the real basics, looking at how to work with most basic building blocks of JavaScript — Variables.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></dt>
- <dd>At this point in the course we discuss maths in JavaScript — how we can combine operators and other features to successfully manipulate numbers to do our bidding.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt>
- <dd>Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt>
- <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt>
- <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd>
-</dl>
-
-<h2 id="Avaliações">Avaliações</h2>
-
-<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt>
- <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd>
-</dl>
-
-<div id="SL_balloon_obj" style="display: block;">
-<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: none; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
-
-<div id="SL_shadow_translation_result2" class="hidden"> </div>
-
-<div id="SL_shadow_translator" class="hidden">
-<div id="SL_planshet">
-<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_Bproviders">
-<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
-
-<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
-</div>
-
-<div id="SL_alert_bbl" class="hidden">
-<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_alert_cont"> </div>
-</div>
-
-<div id="SL_TB">
-<table id="SL_tables">
- <tbody><tr>
-  <td class="SL_td"><input></td>
-  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
-  </td>
-  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
-  <td class="SL_td">
-   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_font_patch"> </div>
-
-   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
-  </td>
-  <td class="SL_td">
-   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
-  </td>
-  <td class="SL_td">
-   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
-  </td>
- </tr>
-</tbody></table>
-</div>
-</div>
-
-<div id="SL_shadow_translation_result" style=""> </div>
-
-<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<div id="SL_player2"> </div>
-
-<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
-
-<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
-<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
-
-<table id="SL_tbl_opt" style="width: 100%;">
- <tbody><tr>
-  <td><input></td>
-  <td>
-   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
-  </td>
-  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
-  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
- </tr>
-</tbody></table>
-</div>
-</div>
-</div>
diff --git a/files/pt-pt/learn/javascript/index.html b/files/pt-pt/learn/javascript/index.html
deleted file mode 100644
index ecaa2d6fad..0000000000
--- a/files/pt-pt/learn/javascript/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: JavaScript
-slug: Learn/JavaScript
-tags:
-  - CodingScripting
-  - JavaScript
-  - Landing
-  - Principiante
-  - Tópico
-  - 'l10n:priority'
-  - modulo
-translation_of: Learn/JavaScript
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">{{Glossary("JavaScript")}} is a programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes, and so on — you can bet that JavaScript is probably involved.</p>
-
-<h2 id="Caminho_de_aprendizagem">Caminho de aprendizagem</h2>
-
-<p>JavaScript is arguably more difficult to learn than related technologies such as <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules:</p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li>
- <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li>
-</ul>
-
-<p>Having previous experience with other programming languages might also help.</p>
-
-<p>After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:</p>
-
-<ul>
- <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li>
- <li><a href="/en-US/docs/Web/API">Web APIs</a></li>
-</ul>
-
-<h2 id="Módulos">Módulos</h2>
-
-<p>This topic contains the following modules, in a suggested order for working through them.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt>
- <dd>In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt>
- <dd>In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt>
- <dd>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt>
- <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd>
-</dl>
-
-<h2 id="Resolver_problemas_comuns_de_JavaScript">Resolver problemas  comuns de JavaScript</h2>
-
-<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p>
-
-<h2 id="Consulte_também">Consulte também:</h2>
-
-<dl>
- <dt><a href="/pt-PT/docs/Web/JavaScript">JavaScript on MDN</a></dt>
- <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd>
- <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt>
- <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
-</dl>
diff --git a/files/pt-pt/learn/server-side/django/index.html b/files/pt-pt/learn/server-side/django/index.html
deleted file mode 100644
index fb11f153e5..0000000000
--- a/files/pt-pt/learn/server-side/django/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: Framework da Web Django  (Python)
-slug: Learn/Server-side/Django
-tags:
-  - Aprender
-  - CodingScripting
-  - Introdução
-  - Principiante
-  - Programação no lado do servidor
-  - Python
-  - django
-translation_of: Learn/Server-side/Django
-original_slug: Learn/No-servidor/Django
----
-<div>{{LearnSidebar}}</div>
-
-<p>Django é uma framework da <em>web</em> do lado do servidor extremamente popular e cheia de recursos, escrita em Python. O módulo mostra-lhe porque Django é uma das frameworks mais populares de servidor da <em>web</em>, como configurar um ambiente de desenvolvimento, e como começar a utilizá-lo para criar as suas próprias aplicações da <em>web</em>.</p>
-
-<h2 id="Pré-requisitos">Pré-requisitos</h2>
-
-<p>Before starting this module you don't need to have any knowledge of Django. Ideally, you would need to understand what server-side web programming and web frameworks are by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module.</p>
-
-<p>A general knowledge of programming concepts and <a href="/en-US/docs/Glossary/Python">Python</a> is recommended, but is not essential to understanding the core concepts.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better, there are numerous free books and tutorials available on the Internet to help you out. (new programmers might want to check out the <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p>
-</div>
-
-<h2 id="Guias">Guias</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></dt>
- <dd>In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you set it up and start playing.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt>
- <dd>Now that you know what Django is for, we'll show you how to setup and test a Django development environment on Windows, Linux (Ubuntu), and Mac OS X — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt>
- <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" — an example website we'll be working through and evolving in subsequent articles.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt>
- <dd>This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt>
- <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt>
- <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some ways in which you can further improve the presentation of the admin site.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt>
- <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt>
- <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt>
- <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behaviour for anonymous users in your own sites.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt>
- <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt>
- <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt>
- <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt>
- <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt>
- <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's in-built protections handle such threats.</dd>
-</dl>
-
-<h2 id="Avaliações">Avaliações</h2>
-
-<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt>
- <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd>
-</dl>
diff --git a/files/pt-pt/learn/server-side/express_nodejs/development_environment/index.html b/files/pt-pt/learn/server-side/express_nodejs/development_environment/index.html
deleted file mode 100644
index 913c38f450..0000000000
--- a/files/pt-pt/learn/server-side/express_nodejs/development_environment/index.html
+++ /dev/null
@@ -1,407 +0,0 @@
----
-title: Configurar um meio de desenvolvimento Node
-slug: Learn/Server-side/Express_Nodejs/development_environment
-tags:
-  - Ambiente de desenvolvimento
-  - Aprender
-  - CodingScripting
-  - Express
-  - Introdução
-  - Node
-  - Nodo
-  - Principiante
-  - lado do servidor
-  - nodejs
-  - npm
-translation_of: Learn/Server-side/Express_Nodejs/development_environment
-original_slug: Learn/No-servidor/Express_Nodejs/Configurar_um_meio_de_desenvolvimento_Node
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</div>
-
-<p class="summary">Agora que sabe para que serve o <em>Express</em>, nós iremos mostrar-lhe como configurar e testar um ambiente de desenvolvimento <em>Node/Express </em>no Linux, (Ubuntu), macOS e Windows. Qualquer que seja o sistema operativo comum que esteja a utilizar, este artigo deverá fornecer-lhe o que precisa para começar a desenvolver aplicações <em>Express</em>.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Know how to open a terminal / command line. Know how to install software packages on your development computer's operating system.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>To set up a development environment for Express (X.XX) on your computer.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Resumo_do_ambiente_de_desenvolvimento_Express">Resumo do ambiente de desenvolvimento <em>Express</em></h2>
-
-<p><em>Node</em> and <em>Express</em> make it very easy to set up your computer in order to start developing web applications. This section provides an overview of what tools are needed, explains some of the simplest methods for installing Node (and Express) on Ubuntu, macOS, and Windows, and shows how you can test your installation.</p>
-
-<h3 id="O_que_é_o_ambiente_de_desenvolvimento_Express">O que é o ambiente de desenvolvimento <em>Express?</em></h3>
-
-<p>The <em>Express</em> development environment includes an installation of <em>Nodejs</em>, the <em>NPM package manager</em>, and (optionally) the <em>Express Application Generator</em> on your local computer.</p>
-
-<p><em>Node</em> and the <em>NPM</em> package manager are installed together from prepared binary packages, installers, operating system package managers or from source (as shown in the following sections). <em>Express</em> is then installed by NPM as a dependency of your individual <em>Express</em> web applications (along with other libraries like template engines, database drivers, authentication middleware, middleware to serve static files, etc.)</p>
-
-<p><em>NPM</em> can also be used to (globally) install the <em>Express Application Generator</em>, a handy tool for creating skeleton <em>Express</em> web apps that follow the <a href="/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">MVC pattern</a>. The application generator is optional because you don't <em>need</em> to use this tool to create apps that use Express, or construct Express apps that have the same architectural layout or dependencies. We'll be using it though, because it makes getting started a lot easier, and promotes a modular application structure.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> Unlike for some other web frameworks, the development environment does not include a separate development web server. In <em>Node</em>/<em>Express</em> a web application creates and runs its own web server!</p>
-</div>
-
-<p>There are other peripheral tools that are part of a typical development environment, including <a href="/en-US/docs/Learn/Common_questions/Available_text_editors">text editors</a> or IDEs for editing code, and source control management tools like <a href="https://git-scm.com/">Git</a> for safely managing different versions of your code. We are assuming that you've already got these sorts of tools installed (in particular a text editor).</p>
-
-<h3 id="Quais_são_os_sistemas_operativos_suportados">Quais são os sistemas operativos suportados?</h3>
-
-<p><em>Node</em> can be run on Windows, macOS, many "flavours" of Linux, Docker, etc. (there is a full list on the nodejs <a href="https://nodejs.org/en/download/">Downloads</a> page). Almost any personal computer should have the necessary performance to run Node during development. <em>Express</em> is run in a <em>Node</em> environment, and hence can run on any platform that runs <em>Node</em>.</p>
-
-<p>In this article we provide setup instructions for Windows, macOS, and Ubuntu Linux.</p>
-
-<h3 id="Que_versão_de_NodeExpress_deverei_utilizar">Que versão de <em>Node/Express</em> deverei utilizar?</h3>
-
-<p>There are many <a href="https://nodejs.org/en/blog/release/">releases of Node</a> — newer releases contain bug fixes, support for more recent versions of ECMAScript (JavaScript) standards, and improvements to the Node APIs. </p>
-
-<p>Generally you should use the most recent <em>LTS (long-term supported)</em> release as this will be more stable than the "current" release while still having relatively recent features (and is still being actively maintained). You should use the <em>Current</em> release if you need a feature that is not present in the LTS version.</p>
-
-<p>For <em>Express</em> you should always use the latest version.</p>
-
-<h3 id="E_as_bases_de_dados_e_outras_dependências">E as bases de dados e outras dependências?</h3>
-
-<p>Other dependencies, such as database drivers, template engines, authentication engines, etc. are part of the application, and are imported into the application environment using the NPM package manager.  We'll discuss them in later app-specific articles.</p>
-
-<h2 id="Instalação_de_Node">Instalação de <em>Node</em></h2>
-
-<p>In order to use <em>Express</em> you will first have to install <em>Nodejs</em> and the <a href="https://docs.npmjs.com/">Node Package Manager (NPM)</a> on your operating system. The following sections explain the easiest way to install the Long Term Supported (LTS) version of Nodejs on Ubuntu Linux 16.04, macOS, and Windows 10.</p>
-
-<div class="note">
-<p><strong>Dica:</strong> The sections below show the easiest way to install <em>Node</em> and <em>NPM</em> on our target OS platforms. If you're using another OS or just want to see some of the other approaches for the current platforms then see <a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org).</p>
-</div>
-
-<h3 id="macOS_e_Windows">macOS e Windows</h3>
-
-<p>Installing <em>Node</em> and <em>NPM</em> on Windows and macOS is straightforward because you can just use the provided installer:</p>
-
-<ol>
- <li>Download the required installer:
-  <ol>
-   <li>Go to <a href="https://nodejs.org/en/">https://nodejs.org/en/</a></li>
-   <li>Select the button to download the LTS build that is "Recommended for most users".</li>
-  </ol>
- </li>
- <li>Install Node by double-clicking on the downloaded file and following the installation prompts.</li>
-</ol>
-
-<h3 id="Ubuntu_16.04">Ubuntu 16.04</h3>
-
-<p>The easiest way to install the most recent LTS version of Node 6.x is to use the <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">package manager</a> to get it from the Ubuntu <em>binary distributions</em> repository. This can be done very simply by running the following two commands on your terminal:</p>
-
-<pre class="brush: bash"><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
-sudo apt-get install -y nodejs</code>
-</pre>
-
-<div class="warning">
-<p><strong>Aviso:</strong> Don't install directly from the normal Ubuntu repositories because they contain very old versions of node.</p>
-</div>
-
-<ol>
-</ol>
-
-<h3 id="Testar_a_instalação_do_seu_Nodejs_e_NPM">Testar a instalação do seu Nodejs e NPM</h3>
-
-<p>The easiest way to test that node is installed is to run the "version" command in your terminal/command prompt and check that a version string is returned:</p>
-
-<pre class="brush: bash">&gt;node -v
-v8.11.3</pre>
-
-<p>The <em>Nodejs</em> package manager <em>NPM</em> should also have been installed, and can be tested in the same way:</p>
-
-<pre class="brush: bash">&gt;npm -v
-5.8.0</pre>
-
-<p>As a slightly more exciting test let's create a very basic "pure node" server that simply prints out "Hello World" in the browser when you visit the correct URL in your browser:</p>
-
-<ol>
- <li>Copy the following text into a file named <strong>hellonode.js</strong>. This uses pure <em>Node</em> features (nothing from Express) and some ES6 syntax:
-
-  <pre class="brush: js">//Load HTTP module
-const http = require("http");
-<code>const hostname = '127.0.0.1';
-const port = 3000;
-
-//Create HTTP server and listen on port 3000 for requests
-const server = http.createServer((req, res) =&gt; {
-
-  //Set the response HTTP header with HTTP status and Content type
-  res.statusCode = 200;
-  res.setHeader('Content-Type', 'text/plain');
-  res.end('Hello World\n');
-});
-
-//listen for request on port 3000, and as a callback function have the port listened on logged
-server.listen(port, hostname, () =&gt; {
-  console.log(`Server running at http://${hostname}:${port}/`);
-});</code>
-
-</pre>
-
-  <p>The code imports the "http" module and uses it to create a server (<code>createServer()</code>) that listens for HTTP requests on port 3000. The script then prints a message to the console about what browser URL you can use to test the server. The <code>createServer()</code> function takes as an argument a callback function that will be invoked when an HTTP request is received — this simply returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".</p>
-
-  <div class="note">
-  <p><strong>Nota:</strong>  Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!</p>
-  </div>
- </li>
- <li>Start the server by navigating into the same directory as your <code>hellonode.js</code> file in your command prompt, and calling <code>node</code> along with the script name, like so:
-  <pre class="brush: bash">&gt;node hellonode.js
-Server running at http://127.0.0.1:3000/
-</pre>
- </li>
- <li>Navigate to the URL <a href="http://127.0.0.1:3000">http://127.0.0.1:3000 </a>. If everything is working, the browser should simply display the string "Hello World".</li>
-</ol>
-
-<h2 id="Utilização_de_NPM">Utilização de NPM</h2>
-
-<p>Next to <em>Node</em> itself, <a href="https://docs.npmjs.com/">NPM</a> is the most important tool for working with<em> Node </em>applications. NPM is used to fetch any packages (JavaScript libraries) that an application needs for development, testing, and/or production, and may also be used to run tests and tools used in the development process. </p>
-
-<div class="note">
-<p><strong>Nota:</strong> From Node's perspective, <em>Express</em> is just another package that you need to install using NPM and then require in your own code.</p>
-</div>
-
-<p>You can manually use NPM to separately fetch each needed package. Typically we instead manage dependencies using a plain-text definition file named <a href="https://docs.npmjs.com/files/package.json">package.json</a>. This file lists all the dependencies for a specific JavaScript "package", including the package's name, version, description, initial file to execute, production dependencies, development dependencies, versions of <em>Node</em> it can work with, etc. The <strong>package.json</strong> file should contain everything NPM needs to fetch and run your application (if you were writing a reusable library you could use this definition to upload your package to the npm respository and make it available for other users).</p>
-
-<h3 id="Adicionar_dependências">Adicionar dependências</h3>
-
-<p>The following steps show how you can use NPM to download a package, save it into the project dependencies, and then require it in a Node application.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> Here we show the instructions to fetch and install the <em>Express</em> package. Later on we'll show how this package, and others, are already specified for us using the <em>Express Application Generator</em>. This section is provided because it is useful to understand how NPM works and what is being created by the application generator.</p>
-</div>
-
-<ol>
- <li>First create a directory for your new application and navigate into it:
-  <pre class="brush: bash">mkdir myapp
-cd myapp</pre>
- </li>
- <li>Use the npm <code>init</code> command to create a <strong>package.json</strong> file for your application. This command prompts you for a number of things, including the name and version of your application and the name of the initial entry point file (by default this is <strong>index.js</strong>). For now, just accept the defaults:
-  <pre class="brush: bash">npm init</pre>
-
-  <p>If you display the <strong>package.json</strong> file (<code>cat package.json</code>), you will see the defaults that you accepted, ending with the license.</p>
-
-  <pre class="brush: json">{
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
-  },
-  "author": "",
-  "license": "ISC"
-}
-</pre>
- </li>
- <li>Now install Express in the <code>myapp</code> directory and save it in the dependencies list of your package.json file</li>
- <li>
-  <pre class="brush: bash">npm install express --save</pre>
-
-  <p>The dependencies section of your <strong>package.json</strong> will now appear at the end of the <strong>package.json</strong> file and will include <em>Express</em>.</p>
-
-  <pre class="brush: json">{
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-<strong>  "dependencies": {
-    "express": "^4.16.2"
-  }</strong>
-}
-</pre>
- </li>
- <li>To use the library you call the <code>require()</code> function as shown below.
-  <pre><code><strong>const express = require('express')</strong>
-const app = express();
-
-app.get('/', (req, res) =&gt; {
-  res.send('Hello World!')
-});
-
-app.listen(</code>8000<code>, () =&gt; {
-  console.log('Example app listening on port </code>8000<code>!')
-});</code>
-</pre>
-
-  <p>This code shows a minimal "HelloWorld" Express web application. This imports the "express" module and uses it to create a server (<code>app</code>) that listens for HTTP requests on port 8000 and prints a message to the console explaining what browser URL you can use to test the server. The <code>app.get()</code> function only responds to HTTP <code>GET</code> requests with the specified URL path ('/'), in this case by calling a function to send our <em>Hello World!</em> message. <br>
-   <br>
-   Create a file named <strong>index.js</strong> in the root of the "myapp" application directory and give it the contents shown above.</p>
- </li>
- <li>You can start the server by calling node with the script in your command prompt:
-  <pre class="brush: bash">&gt;node index.js
-Example app listening on port 8000
-</pre>
- </li>
- <li>Navigate to the URL (<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>). If everything is working, the browser should simply display the string "Hello World!".</li>
-</ol>
-
-<h3 id="Dependências_de_desenvolvimento">Dependências de desenvolvimento</h3>
-
-<p>If a dependency is only used during development, you should instead save it as a "development dependency" (so that your package users don't have to install it in production). For example, to use the popular JavaScript Linting tool <a href="http://eslint.org/">eslint</a> you would call NPM as shown:</p>
-
-<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre>
-
-<p>The following entry would then be added to your application's <strong>package.json</strong>:</p>
-
-<pre class="brush: js">  "devDependencies": {
-    "eslint": "^4.12.1"
-  }
-</pre>
-
-<div class="note">
-<p><strong>Nota:</strong> "<a href="https://en.wikipedia.org/wiki/Lint_(software)">Linters</a>" are tools that perform static analysis on software in order to recognise and report adherence/non-adherance to some set of coding best practice.</p>
-</div>
-
-<h3 id="Execução_de_tarefas">Execução de tarefas</h3>
-
-<p>In addition to defining and fetching dependencies you can also define <em>named</em> scripts in your <strong>package.json</strong> files and call NPM to execute them with the <a href="https://docs.npmjs.com/cli/run-script">run-script</a> command. This approach is commonly used to automate running tests and parts of the development or build toolchain (e.g., running tools to minify JavaScript, shrink images, LINT/analyse your code, etc).</p>
-
-<div class="note">
-<p><strong>Nota:</strong> Task runners like <a href="http://gulpjs.com/">Gulp</a> and <a href="http://gruntjs.com/">Grunt</a> can also be used to run tests and other external tools.</p>
-</div>
-
-<p>For example, to define a script to run the <em>eslint</em> development dependency that we specified in the previous section we might add the following script block to our <strong>package.json</strong> file (assuming that our application source is in a folder /src/js):</p>
-
-<pre class="brush: js">"scripts": {
-  ...
-  "lint": "eslint src/js"
-  ...
-}
-</pre>
-
-<p>To explain a little further, <code>eslint src/js</code> is a command that we could enter in our terminal/command line to run <code>eslint</code> on JavaScript files contained in the <code>src/js</code> directory inside our app directory. Including the above inside our app's package.json file provides a shortcut for this command — <code>lint</code>.</p>
-
-<p>We would then be able to run <em>eslint</em> using NPM by calling:</p>
-
-<pre class="brush: bash"><code>npm run-script lint
-# OR (using the alias)
-npm run lint</code>
-</pre>
-
-<p>This example may not look any shorter than the original command, but you can include much bigger commands inside your npm scripts, including chains of multiple commands. You could identify a single npm script that runs all your tests at once.</p>
-
-<h2 id="Instalar_o_Gerador_de_Aplicação_Express">Instalar o Gerador de Aplicação <em>Express</em></h2>
-
-<p>The <a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> tool generates an Express application "skeleton". Install the generator using NPM as shown (the <code>-g</code> flag installs the tool globally so that you can call it from anywhere):</p>
-
-<pre><code>npm install express-generator -g</code></pre>
-
-<p>To create an <em>Express</em> app named "helloworld" with the default settings, navigate to where you want to create it and run the app as shown:</p>
-
-<pre class="brush: bash">express helloworld</pre>
-
-<div class="note">
-<p><strong>Nota: </strong>You can also specify the template library to use and a number of other settings. Use the <code>help</code> command to see all the options:</p>
-
-<pre class="brush: bash">express --help
-</pre>
-
-<p> </p>
-</div>
-
-<p>NPM will create the new Express app in a sub folder of your current location, displaying build progress on the console. On completion, the tool will display the commands you need to enter to install the Node dependencies and start the app.</p>
-
-<div class="note">
-<p>The new app will have a <strong>package.json</strong> file in its root directory. You can open this to see what dependencies are installed, including Express and the template library Jade:</p>
-
-<pre class="brush: js">{
-  "name": "helloworld",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "start": "node ./bin/www"
-  },
-  "dependencies": {
-    "body-parser": "~1.18.2",
-    "cookie-parser": "~1.4.3",
-    "debug": "~2.6.9",
-    "express": "~4.15.5",
-    "jade": "~1.11.0",
-    "morgan": "~1.9.0",
-    "serve-favicon": "~2.4.5"
-  }
-}</pre>
-
-<p> </p>
-</div>
-
-<p>Install all the dependencies for the helloworld app using NPM as shown:</p>
-
-<pre class="brush: bash">cd helloworld
-npm install
-</pre>
-
-<p>Then run the app (the commands are slightly different for Windows and Linux/macOS), as shown below:</p>
-
-<pre class="brush: bash"># Run the helloworld on Windows
-SET DEBUG=helloworld:* &amp; npm start
-
-# Run helloworld on Linux/macOS
-DEBUG=helloworld:* npm start
-</pre>
-
-<p>The DEBUG command creates useful logging, resulting in an output like that shown below.</p>
-
-<pre class="brush: bash">&gt;SET DEBUG=helloworld:* &amp; npm start
-
-&gt; helloworld@0.0.0 start D:\Github\expresstests\helloworld
-&gt; node ./bin/www
-
-  helloworld:server Listening on port 3000 +0ms</pre>
-
-<p>Open a browser and navigate to <a href="http://127.0.0.1:3000/">http://127.0.0.1:3000/</a> to see the default Express welcome page.</p>
-
-<p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p>
-
-<p>We'll talk more about the generated app when we get to the article on generating a skeleton application.</p>
-
-<ul>
-</ul>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>You now have a Node development environment up and running on your computer that can be used for creating Express web applications. You've also seen how NPM can be used to import Express into an application, and also how you can create applications using the Express Application Generator tool and then run them.</p>
-
-<p>In the next article we start working through a tutorial to build a complete web application using this environment and associated tools.</p>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<ul>
- <li><a href="https://nodejs.org/en/download/">Downloads</a> page (nodejs.org)</li>
- <li><a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org)</li>
- <li><a href="http://expressjs.com/en/starter/installing.html">Installing Express</a> (expressjs.com)</li>
- <li><a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> (expressjs.com)</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</p>
-
-<p> </p>
-
-<h2 id="Neste_módulop">Neste módulop</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
-</ul>
-
-<p> </p>
diff --git a/files/pt-pt/learn/server-side/express_nodejs/index.html b/files/pt-pt/learn/server-side/express_nodejs/index.html
deleted file mode 100644
index 73e8f51f35..0000000000
--- a/files/pt-pt/learn/server-side/express_nodejs/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Framework da Web Express (Node.js/JavaScript)
-slug: Learn/Server-side/Express_Nodejs
-tags:
-  - Aprender
-  - CodingScripting
-  - Express
-  - Express.js
-  - Introdução
-  - JavaScript
-  - Node
-  - Nodo
-  - Principiante
-  - Programação no lado do servidor
-  - node.js
-translation_of: Learn/Server-side/Express_Nodejs
-original_slug: Learn/No-servidor/Express_Nodejs
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Express é uma das frameworks mais populares, escrita em JavaScript e hospedada dentro do próprio ambiente de execução node.js. Este módulo explica alguns dos benefícios chave desta framework, como configurar o seu ambiente de desenvolvimento e como realizar tarefas comuns de desenvolvimento da <em>web</em> e tarefas de implementação.</p>
-
-<h2 id="Pré-requisitos"><span class="short_text" id="result_box" lang="pt"><span>Pré-requisitos</span></span></h2>
-
-<p>Antes de iniciar este módulo, você precisará entender o que são os programas da web e do lado do servidor, idealmente lendo os tópicos no nosso módulo <a href="/pt-PT/docs/Learn/No-servidor/Primeiros_passos">Os primeiros passos de programação do sites da Web no lado do servidor</a>. Um conhecimento geral de conceitos de programação e JavaScript é altamente recomendado, mas não essencial para compreender os conceitos fundamentais.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: This website has many useful resources for learning JavaScript<em> in the context of client-side development</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers <a href="https://nodejs.org/dist/latest-v6.x/docs/api/">additional APIs</a> for supporting functionality that is useful in browserless environments, e.g. to create HTTP servers and access the file system, but does not support JavaScript APIs for working with the browser and DOM.</p>
-
-<p>This guide will provide some information about working with Node.js and Express, and there are numerous other excellent resources on the Internet and in books — some of these linked from <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) and <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p>
-</div>
-
-<h2 id="Guias">Guias</h2>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/No-servidor/Express_Nodejs/Introduction">Introdução a Express/Node</a></dt>
- <dd>In this first Express article we answer the questions "What is Node?" and "What is Express?" and give you an overview of what makes the Express web framework special. We'll outline the main features, and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).</dd>
- <dt><a href="/pt-PT/docs/Learn/No-servidor/Express_Nodejs/Configurar_um_meio_de_desenvolvimento_Node">Configurar um ambiente de desenvolvimento Node (Express)</a></dt>
- <dd>Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial de Express: O Website - Biblioteca Local</a></dt>
- <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial de Express</a><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website"> Parte 2: Criar um esqueleto de um website</a></dt>
- <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial de Express</a><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website"> Parte </a><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">3: Usar uma Base de Dados (com Mongoose)</a></dt>
- <dd>This article briefly introduces databases for Node/Express. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <em>LocalLibrary</em> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial de Express Parte 4: Rotas e controladores</a><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website"> </a></dt>
- <dd>In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the <em>LocalLibrary</em> website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial de Express Parte</a><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data"> 5: Exibir dados da biblioteca</a></dt>
- <dd>We're now ready to add the pages that display the <em>LocalLibrary</em> website books and other data. The pages will include a home page that shows how many records we have of each model type, and list and detail pages for all of our models. Along the way we'll gain practical experience in getting records from the database, and using templates.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial de Express Parte</a><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data"> 6:</a><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms"> Trabalhar com formulários</a></dt>
- <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial de Express Parte</a><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment"> 7: Enviar para produção</a></dt>
- <dd>Now you've created an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
-</dl>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installing LocalLibrary on PWS/Cloud Foundry</a></dt>
- <dd>This article provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different.</dd>
-</dl>
-
-<h2 id="Adicionar_mais_tutoriais">Adicionar mais tutoriais</h2>
-
-<div>
-<p>That's the end of the tutorial articles (for now). If you would like to extend it, other interesting topics to cover are:</p>
-
-<ul>
- <li>Using sessions</li>
- <li>User authentication</li>
- <li>User authorisation and permissions</li>
- <li>Testing an Express web application</li>
- <li>Web security for Express web applications.</li>
-</ul>
-
-<p>And of course it would be excellent to have an assessment task!</p>
-</div>
diff --git a/files/pt-pt/learn/server-side/express_nodejs/introduction/index.html b/files/pt-pt/learn/server-side/express_nodejs/introduction/index.html
deleted file mode 100644
index 1524676241..0000000000
--- a/files/pt-pt/learn/server-side/express_nodejs/introduction/index.html
+++ /dev/null
@@ -1,540 +0,0 @@
----
-title: Introdução a Express/Node
-slug: Learn/Server-side/Express_Nodejs/Introduction
-tags:
-  - Aprender
-  - CodingScripting
-  - Express
-  - Nodo
-  - Principiante
-  - lado do servidor
-  - nodejs
-translation_of: Learn/Server-side/Express_Nodejs/Introduction
-original_slug: Learn/No-servidor/Express_Nodejs/Introduction
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{NextMenu("Learn/No-servidor/Express_Nodejs", "Learn/Server-side/Express_Nodejs")}}</div>
-
-<p class="summary">In this first Express article we answer the questions "What is Node?" (answer: a library) and "What is Express?", and give you an overview of what makes the Express web framework special. We'll outline the main features, and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Basic computer literacy. A general understanding of <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">server-side website programming</a>, and in particular the mechanics of <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>To gain familiarity with what Express is and how it fits in with Node, what functionality it provides, and the main building blocks of an Express application.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Introdução_a_Node">Introdução a <em>Node</em></h2>
-
-<p><a href="https://nodejs.org/">Node</a> (or more formally <em>Node.js</em>) is an open-source, cross-platform, runtime environment that allows developers to create all kinds of server-side tools and applications in <a href="/en-US/docs/Glossary/JavaScript">JavaScript</a>. The runtime is intended for use outside of a browser context (i.e. running directly on a computer or server OS). As such, the environment omits browser-specific JavaScript APIs and adds support for more traditional OS APIs including HTTP and file system libraries.</p>
-
-<p>From a web server development perspective Node has a number of benefits:</p>
-
-<ul>
- <li>Great performance! Node was designed to optimize throughput and scalability in web applications and is a good solution for many common web-development problems (e.g. real-time web applications).</li>
- <li>Code is written in "plain old JavaScript", which means that less time is spent dealing with "context shift" between languages when you're writing both client-side and server-side code.</li>
- <li>JavaScript is a relatively new programming language and benefits from improvements in language design when compared to other traditional web-server languages (e.g. Python, PHP, etc.) Many other new and popular languages compile/convert into JavaScript so you can also use CoffeeScript, ClojureScript, Scala, LiveScript, etc.</li>
- <li>The node package manager (NPM) provides access to hundreds of thousands of reusable packages. It also has best-in-class dependency resolution and can also be used to automate most of the build toolchain.</li>
- <li>Node.js is portable. It is available on Microsoft Windows, OS X, Linux, Solaris, FreeBSD, OpenBSD, WebOS, and NonStop OS. Furthermore, it is well-supported by many web hosting providers, that often provide specific infrastructure and documentation for hosting Node sites.</li>
- <li>It has a very active third party ecosystem and developer community, with lots of people who are willing to help.</li>
-</ul>
-
-<p>You can use Node.js to create a simple web server using the Node HTTP package.</p>
-
-<h3 id="Hello_Node.js"><em>Hello</em> Node.js</h3>
-
-<p>The following example creates a web server that listens for any kind of HTTP request on the URL <code>http://127.0.0.1:8000/</code> — when a request is received, the script will respond with the string: "Hello World". If you have already installed node, you can follow these steps to try out the example:</p>
-
-<ol>
- <li>Open Terminal (on Windows, open the command line utility)</li>
- <li>Create the folder where you want to save the program, for example, <code>"test-node"</code> and then enter it by entering the following command into your terminal:</li>
-</ol>
-
-<pre>cd test-node</pre>
-
-<ol start="3">
- <li>Using your favorite text editor, create a file called <code>"hello.js"</code> and paste the following code into it:</li>
-</ol>
-
-<pre class="brush: js">// Load HTTP module
-var http = require("http");
-
-// Create HTTP server and listen on port 8000 for requests
-http.createServer(function(request, response) {
-
-   // Set the response HTTP header with HTTP status and Content type
-   response.writeHead(200, {'Content-Type': 'text/plain'});
-
-   // Send the response body "Hello World"
-   response.end('Hello World\n');
-}).listen(8000);
-
-// Print URL for accessing server
-console.log('Server running at http://127.0.0.1:8000/');</pre>
-
-<ol start="4">
- <li>Save the file in the folder you created above.</li>
- <li>Go back to the terminal and type the following command:</li>
-</ol>
-
-<pre class="brush: bash">node "hello.js"</pre>
-
-<p>Finally, navigate to <code>"http://localhost:8000"</code> in your web browser; you should see the text "<strong>Hello World</strong>" in the upper left of an otherwise empty web page.</p>
-
-<h2 id="Estruturas_da_Web_(Frameworks)">Estruturas da Web (Frameworks)</h2>
-
-<p>Other common web-development tasks are not directly supported by Node itself. If you want to add specific handling for different HTTP verbs (e.g. <code>GET</code>, <code>POST</code>, <code>DELETE</code>, etc.), separately handle requests at different URL paths ("routes"), serve static files, or use templates to dynamically create the response, then you will need to write the code yourself, or you can avoid reinventing the wheel and use a web framework!</p>
-
-<h2 id="Introdução_a_Express">Introdução a <em>Express</em></h2>
-
-<p><a href="https://expressjs.com/">Express</a> is the most popular <em>Node</em> web framework, and is the underlying library for a number of other popular <a href="https://expressjs.com/en/resources/frameworks.html">Node web frameworks</a>. It provides mechanisms to:</p>
-
-<ul>
- <li>Write handlers for requests with different HTTP verbs at different URL paths (routes).</li>
- <li>Integrate with "view" rendering engines in order to generate responses by inserting data into templates.</li>
- <li>Set common web application settings like the port to use for connecting, and the location of templates that are used for rendering the response.</li>
- <li>Add additional request processing "middleware" at any point within the request handling pipeline.</li>
-</ul>
-
-<p>While <em>Express</em> itself is fairly minimalist, developers have created compatible middleware packages to address almost any web development problem. There are libraries to work with cookies, sessions, user logins, URL parameters, <code>POST</code> data, security headers, and <em>many </em>more. You can find a list of middleware packages maintained by the Express team at <a href="http://expressjs.com/en/resources/middleware.html">Express Middleware</a> (along with a list of some popular 3rd party packages).</p>
-
-<div class="note">
-<p><strong>Nota:</strong> This flexibility is a double edged sword. There are middleware packages to address almost any problem or requirement, but working out the right packages to use can sometimes be a challenge. There is also no "right way" to structure an application, and many examples you might find on the Internet are not optimal, or only show a small part of what you need to do in order to develop a web application.</p>
-</div>
-
-<h2 id="De_onde_veio_o_Node_e_o_Express">De onde veio o Node e o Express?</h2>
-
-<p>Node was initially released, for Linux only, in 2009. The NPM package manager was released in 2010, and native Windows support was added in 2012. The current LTS release is Node v8.11.2 while the latest release is Node 10.1.0. This is a tiny snapshot of a rich history; delve into <a href="https://en.wikipedia.org/wiki/Node.js#History">Wikipedia</a> if you want to know more.</p>
-
-<p>Express was initially released in November 2010 and is currently on version 4.16 of the API. You can check out the <a href="https://expressjs.com/en/changelog/4x.html">changelog</a> for information about changes in the current release, and <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a> for more detailed historical release notes.</p>
-
-<h2 id="Quão_populares_são_o_Node_e_Express">Quão populares são o Node e Express?</h2>
-
-<p>The popularity of a web framework is important because it is an indicator of whether it will continue to be maintained, and what resources are likely to be available in terms of documentation, add-on libraries, and technical support.</p>
-
-<p>There isn't any readily-available and definitive measurement of the popularity of server-side frameworks (although sites like <a href="http://hotframeworks.com/">Hot Frameworks</a> attempt to assess popularity using mechanisms like counting the number of GitHub projects and StackOverflow questions for each platform). A better question is whether Node and Express are "popular enough" to avoid the problems of unpopular platforms. Are they continuing to evolve? Can you get help if you need it? Is there an opportunity for you to get paid work if you learn Express?</p>
-
-<p>Based on the number of <a href="https://expressjs.com/en/resources/companies-using-express.html">high profile companies</a> that use Express, the number of people contributing to the codebase, and the number of people providing both free and paid for support, then yes, <em>Express</em> is a popular framework!</p>
-
-<h2 id="Express_é_opinativo"><em>Express </em>é opinativo?</h2>
-
-<p>Web frameworks often refer to themselves as "opinionated" or "unopinionated".</p>
-
-<p>Opinionated frameworks are those with opinions about the "right way" to handle any particular task. They often support rapid development <em>in a particular domain </em>(solving problems of a particular type) because the right way to do anything is usually well-understood and well-documented. However they can be less flexible at solving problems outside their main domain, and tend to offer fewer choices for what components and approaches they can use.</p>
-
-<p>Unopinionated frameworks, by contrast, have far fewer restrictions on the best way to glue components together to achieve a goal, or even what components should be used. They make it easier for developers to use the most suitable tools to complete a particular task, albeit at the cost that you need to find those components yourself.<br>
- <br>
- Express is unopinionated. You can insert almost any compatible middleware you like into the request handling chain, in almost any order you like. You can structure the app in one file or multiple files, and using any directory structure. You may sometimes feel that you have too many choices!</p>
-
-<h2 id="Como_é_que_o_código_de_Express_se_parece">Como é que o código de <em>Express </em>se parece?</h2>
-
-<p>In a traditional data-driven website, a web application waits for HTTP requests from the web browser (or other client). When a request is received the application works out what action is needed based on the URL pattern and possibly associated information contained in <code>POST</code> data or <code>GET</code> data. Depending on what is required it may then read or write information from a database or perform other tasks required to satisfy the request. The application will then return a response to the web browser, often dynamically creating an HTML page for the browser to display by inserting the retrieved data into placeholders in an HTML template.</p>
-
-<p>Express provides methods to specify what function is called for a particular HTTP verb (<code>GET</code>, <code>POST</code>, <code>SET</code>, etc.) and URL pattern ("Route"), and methods to specify what template ("view") engine is used, where template files are located, and what template to use to render a response. You can use Express middleware to add support for cookies, sessions, and users, getting <code>POST</code>/<code>GET</code> parameters, etc. You can use any database mechanism supported by Node (Express does not define any database-related behaviour).</p>
-
-<p>The following sections explain some of the common things you'll see when working with <em>Express</em> and <em>Node</em> code.</p>
-
-<h3 id="Helloworld_Express">Helloworld Express</h3>
-
-<p>First lets consider the standard Express <a href="https://expressjs.com/en/starter/hello-world.html">Hello World</a> example (we discuss each part of this below, and in the following sections).</p>
-
-<div class="note">
-<p><strong>Dica:</strong> If you have Node and Express already installed (or if you install them as shown in the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">next article</a>), you can save this code in a text file called <strong>app.js</strong> and run it in a bash command prompt by calling:   </p>
-
-<p><strong><code>./node ./app.js</code></strong></p>
-</div>
-
-<pre class="brush: js">var express = require('express');
-var app = express();
-
-<strong>app.get('/', function(req, res) {
-  res.send('Hello World!');
-});</strong>
-
-app.listen(3000, function() {
-  console.log('Example app listening on port 3000!');
-});
-</pre>
-
-<p>The first two lines <code>require()</code> (import) the express module and create an <a href="https://expressjs.com/en/4x/api.html#app">Express application</a>. This object, which is traditionally named <code>app</code>, has methods for routing HTTP requests, configuring middleware, rendering HTML views, registering a template engine, and modifying <a href="https://expressjs.com/en/4x/api.html#app.settings.table">application settings</a> that control how the application behaves (e.g. the environment mode, whether route definitions are case sensitive, etc.)</p>
-
-<p>The middle part of the code (the three lines starting with <code>app.get</code>) shows a <em>route definition</em>. The <code>app.get()</code> method specifies a callback function that will be invoked whenever there is an HTTP <code>GET</code> request with a path (<code>'/'</code>) relative to the site root. The callback function takes a request and a response object as arguments, and simply calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "Hello World!"</p>
-
-<p>The final block starts up the server on port '3000' and prints a log comment to the console. With the server running, you could go to <code>localhost:3000</code> in your browser to see the example response returned.</p>
-
-<h3 id="Importação_e_criação_de_módulos">Importação e criação de módulos</h3>
-
-<p>A module is a JavaScript library/file that you can import into other code using Node's <code>require()</code> function. <em>Express</em> itself is a module, as are the middleware and database libraries that we use in our <em>Express</em> applications.</p>
-
-<p>The code below shows how we import a module by name, using the <em>Express</em> framework as an example. First we invoke the <code style="font-style: normal; font-weight: normal;">require()</code> function, specifying the name of the module as a string (<code>'express'</code>), and calling the returned object to create an <a href="https://expressjs.com/en/4x/api.html#app">Express application</a>. We can then access the properties and functions of the application object.</p>
-
-<pre class="brush: js">var express = require('express');
-var app = express();
-</pre>
-
-<p>You can also create your own modules that can be imported in the same way.</p>
-
-<div class="note">
-<p><strong>Dica:</strong> You will <em>want </em>to create your own modules, because this allows you to organise your code into managable parts — a monolithic single-file application is hard to understand and maintain. Using modules also helps you manage your namespace, because only the variables you explicitly export are imported when you use a module.</p>
-</div>
-
-<p>To make objects available outside of a module you just need to assign them to the <code>exports</code> object. For example, the <strong>square.js</strong> module below is a file that exports <code>area()</code> and <code>perimeter()</code> methods:</p>
-
-<pre class="brush: js">exports.area = function(width) { return width * width; };
-exports.perimeter = function(width) { return 4 * width; };
-</pre>
-
-<p>We can import this module using <code>require()</code>, and then call the exported method(s) as shown:</p>
-
-<pre class="brush: js">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension
-console.log('The area of a square with a width of 4 is ' + square.area(4));</pre>
-
-<div class="note">
-<p><strong>Nota:</strong> You can also specify an absolute path to the module (or a name, as we did initially).</p>
-</div>
-
-<p>If you want to export a complete object in one assignment instead of building it one property at a time, assign it to <code>module.exports</code> as shown below (you can also do this to make the root of the exports object a constructor or other function):</p>
-
-<pre class="brush: js">module.exports = {
-  area: function(width) {
-    return width * width;
-  },
-
-  perimeter: function(width) {
-    return 4 * width;
-  }
-};
-</pre>
-
-<p>For a lot more information about modules see <a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs).</p>
-
-<h3 id="Utilizar_APIs_assíncronas">Utilizar APIs assíncronas</h3>
-
-<p>JavaScript code frequently uses asynchronous rather than synchronous APIs for operations that may take some time to complete. A synchronous API is one in which each operation must complete before the next operation can start. For example, the following log functions are synchronous, and will print the text to the console in order (First, Second).</p>
-
-<pre class="brush: js">console.log('First');
-console.log('Second');
-</pre>
-
-<p>By contrast, an asynchronous API is one in which the API will start an operation and immediately return (before the operation is complete). Once the operation finishes, the API will use some mechanism to perform additional operations. For example, the code below will print out "Second, First" because even though <code>setTimeout()</code> method is called first, and returns immediately, the operation doesn't complete for several seconds.</p>
-
-<pre class="brush: js">setTimeout(function() {
-   console.log('First');
-   }, 3000);
-console.log('Second');
-</pre>
-
-<p>Using non-blocking asynchronous APIs is even more important on Node than in the browser, because <em>Node</em> is a single threaded event-driven execution environment. "single threaded" means that all requests to the server are run on the same thread (rather than being spawned off into separate processes). This model is extremely efficient in terms of speed and server resources, but it does mean that if any of your functions call synchronous methods that take a long time to complete, they will block not just the current request, but every other request being handled by your web application.</p>
-
-<p>There are a number of ways for an asynchronous API to notify your application that it has completed. The most common way is to register a callback function when you invoke the asynchronous API, that will be called back when the operation completes. This is the approach used above.</p>
-
-<div class="note">
-<p><strong>Dica:</strong> Using callbacks can be quite "messy" if you have a sequence of dependent asynchronous operations that must be performed in order, because this results in multiple levels of nested callbacks. This problem is commonly known as "callback hell". This problem can be reduced by good coding practices (see <a href="http://callbackhell.com/">http://callbackhell.com/</a>), using a module like <a href="https://www.npmjs.com/package/async">async</a>, or even moving to ES6 features like <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota:</strong> A common convention for Node and Express is to use error-first callbacks. In this convention the first value in your <em>callback functions</em> is an error value, while subsequent arguments contain success data. There is a good explanation of why this approach is useful in this blog: <a href="http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js">The Node.js Way - Understanding Error-First Callbacks</a> (fredkschott.com).</p>
-</div>
-
-<h3 id="Criação_de_manipuladores_de_rota">Criação de manipuladores de rota</h3>
-
-<p>In our <em>Hello World</em> Express example (see above), we defined a (callback) route handler function for HTTP <code>GET</code> requests to the site root (<code>'/'</code>).</p>
-
-<pre class="brush: js">app.<strong>get</strong>('/', function(req, res) {
-  res.send('Hello World!');
-});
-</pre>
-
-<p>The callback function takes a request and a response object as arguments. In this case the method simply calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "Hello World!" There are a <a href="https://expressjs.com/en/guide/routing.html#response-methods">number of other response methods</a> for ending the request/response cycle, for example you could call <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> to send a JSON response or <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> to send a file.</p>
-
-<div class="note">
-<p><strong>Dica de JavaScript:</strong> You can use any argument names you like in the callback functions; when the callback is invoked the first argument will always be the request and the second will always be the response. It makes sense to name them such that you can identify the object you're working with in the body of the callback.</p>
-</div>
-
-<p>The <em>Express application</em> object also provides methods to define route handlers for all the other HTTP verbs, which are mostly used in exactly the same way: <code>post()</code>, <code>put()</code>, <code>delete()</code>, <code>options()</code>, <code>trace()</code>, <code>copy()</code>, <code>lock()</code>, <code>mkcol()</code>, <code>move()</code>, <code>purge()</code>, <code>propfind()</code>, <code>proppatch()</code>, <code>unlock()</code>, <code>report()</code>, <code>mkactivity()</code>, <code>checkout()</code>, <code>merge()</code>, <code>m-</code><code>search()</code>, <code>notify()</code>, <code>subscribe()</code>, <code>unsubscribe()</code>, <code>patch()</code>, <code>search()</code>, and <code>connect()</code>.</p>
-
-<p>There is a special routing method, <code>app.all()</code>, which will be called in response to any HTTP method. This is used for loading middleware functions at a particular path for all request methods. The following example (from the Express documentation) shows a handler that will be executed for requests to <code>/secret</code> irrespective of the HTTP verb used (provided it is supported by the <a href="https://nodejs.org/api/http.html#http_http_methods">http module</a>).</p>
-
-<pre class="brush: js">app.all('/secret', function(req, res, next) {
-  console.log('Accessing the secret section ...');
-  next(); // pass control to the next handler
-});</pre>
-
-<p>Routes allow you to match particular patterns of characters in a URL, and extract some values from the URL and pass them as parameters to the route handler (as attributes of the request object passed as a parameter).</p>
-
-<p>Often it is useful to group route handlers for a particular part of a site together and access them using a common route-prefix (e.g. a site with a Wiki might have all wiki-related routes in one file and have them accessed with a route prefix of <em>/wiki/</em>). In <em>Express</em> this is achieved by using the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> object. For example, we can create our wiki route in a module named <strong>wiki.js</strong>, and then export the <code>Router</code> object, as shown below:</p>
-
-<pre class="brush: js">// wiki.js - Wiki route module
-
-var express = require('express');
-var router = express.Router();
-
-// Home page route
-router.get('/', function(req, res) {
-  res.send('Wiki home page');
-});
-
-// About page route
-router.get('/about', function(req, res) {
-  res.send('About this wiki');
-});
-
-module.exports = router;
-</pre>
-
-<div class="note">
-<p><strong>Note:</strong> Adding routes to the <code>Router</code> object is just like adding routes to the <code>app</code> object (as shown previously).</p>
-</div>
-
-<p>To use the router in our main app file we would then <code>require()</code> the route module (<strong>wiki.js</strong>), then call <code>use()</code> on the <em>Express</em> application to add the Router to the middleware handling path. The two routes will then be accessible from <code style="font-style: normal; font-weight: normal;">/wiki/</code> and <code style="font-style: normal; font-weight: normal;">/wiki/about/</code>.</p>
-
-<pre class="brush: js">var wiki = require('./wiki.js');
-// ...
-app.use('/wiki', wiki);</pre>
-
-<p>We'll show you a lot more about working with routes, and in particular about using the <code>Router</code>, later on in the linked section<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes"> Routes and controllers .</a></p>
-
-<h3 id="Utilização_de_middleware">Utilização de middleware</h3>
-
-<p>Middleware is used extensively in Express apps, for tasks from serving static files to error handling, to compressing HTTP responses. Whereas route functions end the HTTP request-response cycle by returning some response to the HTTP client, middleware functions <em>typically</em> perform some operation on the request or response and then call the next function in the "stack", which might be more middleware or a route handler. The order in which middleware is called is up to the app developer.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> The middleware can perform any operation, execute any code, make changes to the request and response object, and it can<em> also end the request-response cycle</em>. If it does not end the cycle then it must call <code>next()</code> to pass control to the next middleware function (or the request will be left hanging).</p>
-</div>
-
-<p>Most apps will use <em>third-party</em> middleware in order to simplify common web development tasks like working with cookies, sessions, user authentication, accessing request <code>POST</code> and JSON data, logging, etc. You can find a <a href="http://expressjs.com/en/resources/middleware.html">list of middleware packages maintained by the Express team</a> (which also includes other popular 3rd party packages). Other Express packages are available on the NPM package manager.</p>
-
-<p>To use third party middleware you first need to install it into your app using NPM. For example, to install the <a href="http://expressjs.com/en/resources/middleware/morgan.html">morgan</a> HTTP request logger middleware, you'd do this:</p>
-
-<pre class="brush: bash"><code>$ npm install morgan
-</code></pre>
-
-<p>You could then call <code>use()</code> on the <em>Express application object</em> to add the middleware to the stack:</p>
-
-<pre class="brush: js">var express = require('express');
-<strong>var logger = require('morgan');</strong>
-var app = express();
-<strong>app.use(logger('dev'));</strong>
-...</pre>
-
-<div class="note">
-<p><strong>Nota:</strong> Middleware and routing functions are called in the order that they are declared. For some middleware the order is important (for example if session middleware depends on cookie middleware, then the cookie handler must be added first). It is almost always the case that middleware is called before setting routes, or your route handlers will not have access to functionality added by your middleware.</p>
-</div>
-
-<p>You can write your own middleware functions, and you are likely to have to do so (if only to create error handling code). The <strong>only</strong> difference between a middleware function and a route handler callback is that middleware functions have a third argument <code>next</code>, which middleware functions are expected to call if they are not that which completes the request cycle (when the middleware function is called, this contains the <em>next</em> function that must be called).</p>
-
-<p>You can add a middleware function to the processing chain with either <code>app.use()</code> or <code>app.add()</code>, depending on whether you want to apply the middleware to all responses or to responses with a particular HTTP verb (<code>GET</code>, <code>POST</code>, etc). You specify routes the same in both cases, though the route is optional when calling <strong>app.use()</strong>.</p>
-
-<p>The example below shows how you can add the middleware function using both methods, and with/without a route.</p>
-
-<pre class="brush: js">var express = require('express');
-var app = express();
-
-// An example middleware function
-var a_middleware_function = function(req, res, <em>next</em>) {
-  // ... perform some operations
-  next(); // Call next() so Express will call the next middleware function in the chain.
-}
-
-// Function added with use() for all routes and verbs
-app.use(a_middleware_function);
-
-// Function added with use() for a specific route
-app.use('/someroute', a_middleware_function);
-
-// A middleware function added for a specific HTTP verb and route
-app.get('/', a_middleware_function);
-
-app.listen(3000);</pre>
-
-<div class="note">
-<p><strong>Dica de JavaScript:</strong> Above we declare the middleware function separately and then set it as the callback. In our previous route handler function we declared the callback function when it was used. In JavaScript, either approach is valid.</p>
-</div>
-
-<p>The Express documentation has a lot more excellent documentation about <a href="https://expressjs.com/en/guide/using-middleware.html">using</a> and <a href="http://expressjs.com/en/guide/writing-middleware.html">writing</a> Express middleware.</p>
-
-<h3 id="Servindo_ficheiros_estásticos">Servindo ficheiros estásticos</h3>
-
-<p>You can use the <a href="http://expressjs.com/en/4x/api.html#express.static">express.static</a> middleware to serve static files, including your images, CSS and JavaScript (<code>static()</code> is the only middleware function that is actually <strong>part</strong> of <em>Express</em>). For example, you would use the line below to serve images, CSS files, and JavaScript files from a directory named '<strong>public'</strong> at the same level as where you call node:</p>
-
-<pre class="brush: js">app.use(express.static('public'));
-</pre>
-
-<p>Any files in the public directory are served by adding their filename (<em>relative</em> to the base "public" directory) to the base URL. So for example:</p>
-
-<pre><code>http://localhost:3000/images/dog.jpg
-http://localhost:3000/css/style.css
-http://localhost:3000/js/app.js
-http://localhost:3000/about.html
-</code></pre>
-
-<p>You can call <code>static()</code> multiple times to serve multiple directories. If a file cannot be found by one middleware function then it will simply be passed on to the subsequent middleware (the order that middleware is called is based on your declaration order).</p>
-
-<pre class="brush: js">app.use(express.static('public'));
-app.use(express.static('media'));
-</pre>
-
-<p>You can also create a virtual prefix for your static URLs, rather than having the files added to the base URL. For example, here we <a href="http://expressjs.com/en/4x/api.html#app.use">specify a mount path</a> so that the files are loaded with the prefix "/media":</p>
-
-<pre class="brush: js">app.use('/media', express.static('public'));
-</pre>
-
-<p>Now, you can load the files that are in the <code>public</code> directory from the <code>/media</code> path prefix.</p>
-
-<pre><code>http://localhost:3000/media/images/dog.jpg
-http://localhost:3000/media/video/cat.mp4
-http://localhost:3000/media/cry.mp3</code>
-</pre>
-
-<p>For more information, see <a href="Serving static files in Express">Serving static files in Express</a>.</p>
-
-<h3 id="Erros_de_manipulação">Erros de manipulação</h3>
-
-<p>Errors are handled by one or more special middleware functions that have four arguments, instead of the usual three: <code>(err, req, res, next)</code>. For example:</p>
-
-<pre class="brush: js">app.use(function(err, req, res, next) {
-  console.error(err.stack);
-  res.status(500).send('Something broke!');
-});
-</pre>
-
-<p>These can return any content required, but must be called after all other <code>app.use()</code> and routes calls so that they are the last middleware in the request handling process!</p>
-
-<p>Express comes with a built-in error handler, which takes care of any remaining errors that might be encountered in the app. This default error-handling middleware function is added at the end of the middleware function stack. If you pass an error to <code>next()</code> and you do not handle it in an error handler, it will be handled by the built-in error handler; the error will be written to the client with the stack trace.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> The stack trace is not included in the production environment. To run it in production mode you need to set the the environment variable <code>NODE_ENV</code> to '<code>production'</code>.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota:</strong> HTTP404 and other "error" status codes are not treated as errors. If you want to handle these, you can add a middleware function to do so. For more information see the <a href="http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses">FAQ</a>.</p>
-</div>
-
-<p>For more information see <a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs).</p>
-
-<h3 id="Utilização_de_bases_de_dados">Utilização de bases de dados</h3>
-
-<p><em>Express</em> apps can use any database mechanism supported by <em>Node</em> (<em>Express</em> itself doesn't define any specific additional behaviour/requirements for database management). There are many options, including PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.</p>
-
-<p>In order to use these you have to first install the database driver using NPM. For example, to install the driver for the popular NoSQL MongoDB you would use the command:</p>
-
-<pre class="brush: bash"><code>$ npm install mongodb
-</code></pre>
-
-<p>The database itself can be installed locally or on a cloud server. In your Express code you require the driver, connect to the database, and then perform create, read, update, and delete (CRUD) operations. The example below (from the Express documentation) shows how you can find "mammal" records using MongoDB.</p>
-
-<pre class="brush: js">//this works with older versions of  mongodb version ~ 2.2.33
-var MongoClient = require('mongodb').MongoClient;
-
-MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
-  if (err) throw err;
-
-  db.collection('mammals').find().toArray(function (err, result) {
-    if (err) throw err;
-
-    console.log(result);
-  });
-});
-
-
-//for mongodb version 3.0 and up
-let MongoClient = require('mongodb').MongoClient;
-MongoClient.connect('mongodb://localhost:27017/animals', function(err, client){
-   if(err) throw err;
-
-   let db = client.db('animals');
-   db.collection('mammals').find().toArray(function(err, result){
-     if(err) throw err;
-     console.log(result);
-     client.close();
-   });
-}
-</pre>
-
-<p> </p>
-
-<p> </p>
-
-<p> </p>
-
-<p>Another popular approach is to access your database indirectly, via an Object Relational Mapper ("ORM"). In this approach you define your data as "objects" or "models" and the ORM maps these through to the underlying database format. This approach has the benefit that as a developer you can continue to think in terms of JavaScript objects rather than database semantics, and that there is an obvious place to perform validation and checking of incoming data. We'll talk more about databases in a later article.</p>
-
-<p>For more information see <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs).</p>
-
-<h3 id="Renderização_de_dados_(visualizações)">Renderização de dados (visualizações)</h3>
-
-<p>Template engines (referred to as "view engines" by <em>Express</em>) allow you to specify the <em>structure</em> of an output document in a template, using placeholders for data that will be filled in when a page is generated. Templates are often used to create HTML, but can also create other types of documents. Express has support for <a href="https://github.com/expressjs/express/wiki#template-engines">a number of template engines</a>, and there is a useful comparison of the more popular engines here: <a href="https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/">Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More</a>.</p>
-
-<p>In your application settings code you set the template engine to use and the location where Express should look for templates using the 'views' and 'view engines' settings, as shown below (you will also have to install the package containing your template library too!)</p>
-
-<pre class="brush: js">var express = require('express');
-var app = express();
-
-// Set directory to contain the templates ('views')
-app.set('views', path.join(__dirname, 'views'));
-
-// Set view engine to use, in this case 'some_template_engine_name'
-app.set('view engine', 'some_template_engine_name');
-</pre>
-
-<p>The appearance of the template will depend on what engine you use. Assuming that you have a template file named "index.&lt;template_extension&gt;" that contains placeholders for data variables named 'title' and "message", you would call <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> in a route handler function to create and send the HTML response:</p>
-
-<pre class="brush: js">app.get('/', function(req, res) {
-  res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
-});</pre>
-
-<p>For more information see <a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs).</p>
-
-<h3 id="Estrutura_de_ficheiro">Estrutura de ficheiro</h3>
-
-<p>Express makes no assumptions in terms of structure or what components you use. Routes, views, static files, and other application-specific logic can live in any number of files with any directory structure. While it is perfectly possible to have the whole <em>Express</em> application in one file, typically it makes sense to split your application into files based on function (e.g. account management, blogs, discussion boards) and architectural problem domain (e.g. model, view or controller if you happen to be using an <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">MVC architecture</a>).</p>
-
-<p>In a later topic we'll use the <em>Express Application Generator</em>, which creates a modular app skeleton that we can easily extend for creating web applications.</p>
-
-<ul>
-</ul>
-
-<h2 id="Resumo">Resumo</h2>
-
-<p>Congratulations, you've completed the first step in your Express/Node journey! You should now understand Express and Node's main benefits, and roughly what the main parts of an Express app might look like (routes, middleware, error handling, and template code). You should also understand that with Express being an unopinionated framework, the way you pull these parts together and the libraries that you use are largely up to you!</p>
-
-<p>Of course Express is deliberately a very lightweight web application framework, so much of its benefit and potential comes from third party libraries and features. We'll look at those in more detail in the following articles. In our next article we're going to look at setting up a Node development environment, so that you can start seeing some Express code in action.</p>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<ul>
- <li><a href="https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44">Venkat.R - Manage Multiple Node versions</a></li>
- <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs)</li>
- <li><a href="https://expressjs.com/">Express</a> (home page)</li>
- <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li>
- <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li>
- <li><a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li>
- <li><a href="https://expressjs.com/en/guide/using-middleware.html">Using middleware</a> (Express docs)</li>
- <li><a href="http://expressjs.com/en/guide/writing-middleware.html">Writing middleware for use in Express apps</a> (Express docs)</li>
- <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li>
- <li><a href="http://expressjs.com/en/starter/static-files.html">Serving static files in Express</a> (Express docs)</li>
- <li><a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs)</li>
-</ul>
-
-<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
-
-<h2 id="Neste_módulo">Neste módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
-</ul>
diff --git a/files/pt-pt/learn/server-side/index.html b/files/pt-pt/learn/server-side/index.html
deleted file mode 100644
index 40460e8235..0000000000
--- a/files/pt-pt/learn/server-side/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Programação do site da Web no lado do servidor
-slug: Learn/Server-side
-tags:
-  - Aprender
-  - Código
-  - Iniciante
-  - Introdução
-  - Programação no servidor
-  - Scripting
-  - Servidor
-  - Tópico
-translation_of: Learn/Server-side
-original_slug: Learn/No-servidor
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">O tópico <strong><em>Sites da Web Dinâmicos - Programação no lado do servidor</em></strong> é uma série de módulos que mostram como criar sites da <em>web</em> dinâmicos; sites da <em>web</em> que entregam informação personalizada em resposta aos pedidos de HTTP. Os módulos proporcionam uma introdução genérica à programação no lado do servidor, bem como guias especificamente desenvolvidos para principiantes sobre como utilizar as estruturas de Django (Python) e Express (Node.js/JavaScript) para criar aplicações básicas.</p>
-
-<p>A maioria dos maiores sites da <em>web</em> utilizam algum tipo de tecnologia no lado do servidor para exibir dados diferentes, conforme o necessário. <span id="result_box">Por exemplo, imagine quantos produtos é que estão disponíveis na Amazon e imagine quantos artigos é que foram escritos no Facebook? Exibir todo este conteúdo utilizando páginas estáticas completamente diferentes seria absolutamente ineficiente, assim em vez disso, estes sites exibem modelos estáticos (criados utilizando CSS, <a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML">HTML</a> e <a href="https://developer.mozilla.org/pt-PT/docs/Learn/JavaScript">JavaScript</a>), e depois atualizam os dados dinamicamente</span>, exibindo-os dentro dos modelos quando necessário, por exemplo, quando tenta ver um produto diferente na Amazon.</p>
-
-<p>No mundo moderno do desenvolvimento da <em>web, </em>aprender sobre o desenvolvimento no lado do servidor é altamente recomendado.</p>
-
-<h2 id="Caminho_de_aprendizagem">Caminho de aprendizagem</h2>
-
-<p>Começar com programação web no servidor é, de um modo geral, mais fácil que começar com desenvolvimento no lado do cliente, pois páginas <em>web</em> dinâmicas tendem a executar operações muito similares (adquirir dados e guardar na base de dados, <span id="result_box">verificar as permissões dos usuários, registrar usuários, etc.</span>) , e são construídos utilizando <em>frameworks</em>, os quais tornam estas e outras operações de servidores <em>web</em> fáceis.</p>
-
-<p>Ter conhecimentos básicos de conceitos de programação (ou de uma linguagem de programação específica) é útil, mas não essencial. Da mesma forma, experiência com código do lado do cliente não é absolutamente necessária, mas um conhecimento básico irá ajuda-lo a trabalhar melhor com os desenvolvedores que criam o "<em>front-end</em>" do seu website.</p>
-
-<p>Precisará de compreender "como a <em>web </em>funciona". Recomendamos que comece por ler os seguintes tópicos:</p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li>
- <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li>
- <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li>
-</ul>
-
-<p>Com a compreensão básica destes conceitos, estará pronto para continuar no seu caminho pelos módulos nesta secção.</p>
-
-<h2 id="Módulos">Módulos</h2>
-
-<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . </p>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/No-servidor/Primeiros_passos">Primeiros passos na programação <em>web</em> em servidores</a></dt>
- <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd>
- <dt><a href="/pt-PT/docs/Learn/No-servidor/Django">Framework da Web Django (Python)</a></dt>
- <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt>
- <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd>
-</dl>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<dl>
- <dt><a href="/pt-PT/docs/Learn/No-servidor/Servidor_node_sem_framework">Servidor de <em>Node</em> sem uma framework</a></dt>
- <dd>Este artigo fornece um servidor de ficheiros estático simples criado com Node.js puro, para aqueles que não desejam utilizar uma framework.</dd>
-</dl>
diff --git a/files/pt-pt/learn/server-side/node_server_without_framework/index.html b/files/pt-pt/learn/server-side/node_server_without_framework/index.html
deleted file mode 100644
index 99857fe56b..0000000000
--- a/files/pt-pt/learn/server-side/node_server_without_framework/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Servidor de Node.js sem uma framework
-slug: Learn/Server-side/Node_server_without_framework
-tags:
-  - JavaScript
-  - Nodo
-  - Precisa de Conteúdo
-  - Servidor
-  - sem estrutura
-translation_of: Learn/Server-side/Node_server_without_framework
-original_slug: Learn/No-servidor/Servidor_node_sem_framework
----
-<div>{{LearnSidebar}}</div>
-
-<p> </p>
-
-<p class="summary">Este artigo fornece um servidor de ficheiros estático simples com Node.js puro, sem a utilização de uma framework.</p>
-
-<p><a href="https://nodejs.org/en/">NodeJS</a> tem muitas frameworks para ajudá-lo a ter o seu servidor configurado e a funcionar.</p>
-
-<ul>
- <li><a href="http://expressjs.com/">Express</a>: uma framework mais utilizada.</li>
- <li><a href="https://hapijs.com/">Hapi.js</a>: uma framework rica para criar aplicações e serviços</li>
- <li><a href="https://www.totaljs.com/">Total</a>: a framework de Node.js "tudo-em-um", que não depende de qualquer outra framework, ou módulo.</li>
-</ul>
-
-<p>Estas não irão corresponder a todas as situações. Um programador pode precisar de criar o seu próprio servidor sem outras dependências.</p>
-
-<h2 id="Exemplo">Exemplo</h2>
-
-<p>Um servidor de ficheiros estático simples, criado com Node.js:</p>
-
-<p> </p>
-
-<pre class="brush: js">var http = require('http');
-var fs = require('fs');
-var path = require('path');
-
-http.createServer(function (request, response) {
-    console.log('request ', request.url);
-
-    var filePath = '.' + request.url;
-    if (filePath == './') {
-        filePath = './index.html';
-    }
-
-    var extname = String(path.extname(filePath)).toLowerCase();
-    var contentType = 'text/html';
-    var mimeTypes = {
-        '.html': 'text/html',
-        '.js': 'text/javascript',
-        '.css': 'text/css',
-        '.json': 'application/json',
-        '.png': 'image/png',
-        '.jpg': 'image/jpg',
-        '.gif': 'image/gif',
-        '.wav': 'audio/wav',
-        '.mp4': 'video/mp4',
-        '.woff': 'application/font-woff',
-        '.ttf': 'application/font-ttf',
-        '.eot': 'application/vnd.ms-fontobject',
-        '.otf': 'application/font-otf',
-        '.svg': 'application/image/svg+xml'
-    };
-
-    contentType = mimeTypes[extname] || 'application/octet-stream';
-
-    fs.readFile(filePath, function(error, content) {
-        if (error) {
-            if(error.code == 'ENOENT'){
-                fs.readFile('./404.html', function(error, content) {
-                    response.writeHead(200, { 'Content-Type': contentType });
-                    response.end(content, 'utf-8');
-                });
-            }
-            else {
-                response.writeHead(500);
-                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
-                response.end();
-            }
-        }
-        else {
-            response.writeHead(200, { 'Content-Type': contentType });
-            response.end(content, 'utf-8');
-        }
-    });
-
-}).listen(8125);
-console.log('Server running at http://127.0.0.1:8125/');</pre>
-
-<p> </p>
-
-<h2 id="A_efetuar">A efetuar</h2>
-
-<p>Estenda este artigo, explicando como é que o código acima funciona. Talvez, uma versão estendida que sirva os ficheiros estáticos e lide com pedidos dinâmicos.</p>
diff --git a/files/pt-pt/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
deleted file mode 100644
index f9199021f8..0000000000
--- a/files/pt-pt/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
+++ /dev/null
@@ -1,608 +0,0 @@
----
-title: Como tratar de problemas de acessibilidade comuns
-slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility
-translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility
-original_slug: Learn/Tools_and_testing/Teste_cruzado_de_navegador/Acessibilidade
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}</div>
-
-<p class="summary">Neste módulo, vamos falar de acessibilidade, abordando problemas frequentes, como fazer testes simples, e como utilizar ferramentas de automatização e auditoria para identificar problemas de acessibilidade.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Familiaridade com as bases 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>; uma ideia-base dos <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">princípios de testes <em>cross browser</em></a> de alto nível.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Saber diagnosticar problemas comuns de acessibilidade, e saber usar as ferramentas e técnicas adequadas para resolvê-los.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="O_que_é_acessibilidade">O que é acessibilidade?</h2>
-
-<p>When we say accessibility in the context of web technology, most people immediately think of making sure websites/apps are usable by people with disabilities, for example:</p>
-
-<ul>
- <li>Visually impaired people using screen readers or magnification/zoom to access text</li>
- <li>People with motor function impairments using the keyboard (or other non-mouse features) to activate website functionality.</li>
- <li>People with hearing impairments relying on captions/subtitles or other text alternatives for audio/video content.</li>
-</ul>
-
-<p>However, it is wrong to say that accessibility is just about disabilities. Really, the aim of accessibility is to make your websites/apps usable by as many people in as many contexts as possible, not just those users using high-powered desktop computers. Some examples might include:</p>
-
-<ul>
- <li>Users on mobile devices.</li>
- <li>Users on alternative browsing devices such as TVs, watches, etc.</li>
- <li>Users of older devices that might not have the latest browsers.</li>
- <li>Users of lower spec devices that might have slow processors.</li>
-</ul>
-
-<p>In a way, this whole module is about accessibility — cross browser testing makes sure that your sites can be used by as many people as possible. <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> defines accessibility more completely and thoroughly than this article does.</p>
-
-<p>That said, this article will cover cross browser and testing issues surrounding people with disabilities, and how they use the Web. We've already talked about other spheres such as <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Responsive_design_problems">responsive design</a> and <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Performance_issues">performance</a> in other places in the module.</p>
-
-<div class="note">
-<p><strong>Note</strong>: Like many things in web development, accessibility isn't about 100% success or not; 100% accessibility is pretty much impossible to achieve for all content, especially as sites get more complex. Instead, it is more about making a reasonable effort to make as much of your content accessible to as many people as possible via defensive coding and sticking to best practices.</p>
-</div>
-
-<h2 id="Common_accessibility_issues">Common accessibility issues</h2>
-
-<p>In this section we'll detail some of the main issues that arise around web accessibility, connected with specific technologies, along with best practices to follow, and some quick tests you can do to see if your sites are going in the right direction.</p>
-
-<div class="note">
-<p><strong>Note</strong>: Accessibility is morally the right thing to do, and good for business (numbers of disabled users, users on mobile devices, etc. present significant market segments), but it is also a legal requirement in many parts of the world to make web content accessible to people with disabilities. Read <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> for more information.</p>
-</div>
-
-<h3 id="HTML">HTML</h3>
-
-<p>Semantic HTML (where the elements are used for their correct purpose) is accessible right out of the box — such content is readable by sighted viewers (provided you don't do anything silly like make the text way too small or hide it using CSS), but will also be usable by assistive technologies like screen readers (apps that literally read out a web page to their user), and confer other advantages too.</p>
-
-<h4 id="Semantic_structure">Semantic structure</h4>
-
-<p>The most important quick win in semantic HTML is to use a structure of headings and paragraphs for your content; this is because screen reader users tend to use the headings of a document as signposts to find the content they need more quickly. If your content has no headings, all they will get is a huge wall of text with no signposts to find anything. Examples of bad and good HTML:</p>
-
-<pre class="brush: html example-bad notranslate">&lt;font size="7"&gt;My heading&lt;/font&gt;
-&lt;br&gt;&lt;br&gt;
-This is the first section of my document.
-&lt;br&gt;&lt;br&gt;
-I'll add another paragraph here too.
-&lt;br&gt;&lt;br&gt;
-&lt;font size="5"&gt;My subheading&lt;/font&gt;
-&lt;br&gt;&lt;br&gt;
-This is the first subsection of my document. I'd love people to be able to find this content!
-&lt;br&gt;&lt;br&gt;
-&lt;font size="5"&gt;My 2nd subheading&lt;/font&gt;
-&lt;br&gt;&lt;br&gt;
-This is the second subsection of my content. I think it is more interesting than the last one.</pre>
-
-<pre class="brush: html example-good notranslate">&lt;h1&gt;My heading&lt;/h1&gt;
-
-&lt;p&gt;This is the first section of my document.&lt;/p&gt;
-
-&lt;p&gt;I'll add another paragraph here too.&lt;/p&gt;
-
-&lt;h2&gt;My subheading&lt;/h2&gt;
-
-&lt;p&gt;This is the first subsection of my document. I'd love people to be able to find this content!&lt;/p&gt;
-
-&lt;h2&gt;My 2nd subheading&lt;/h2&gt;
-
-&lt;p&gt;This is the second subsection of my content. I think it is more interesting than the last one.&lt;/p&gt;</pre>
-
-<p>In addition, your content should make logical sense in its source order — you can always place it where you want using CSS later on, but you should get the source order right to start with.</p>
-
-<p>As a test, you can turn off a site's CSS and see how understandable it is without it. You could do this manually by just removing the CSS from your code, but the easiest way is to use browser features, for example:</p>
-
-<ul>
- <li>Firefox: Select <em>View &gt; Page Style &gt; No Style</em> from the main menu.</li>
- <li>Safari: Select <em>Develop &gt; Disable Styles</em> from the main menu (to enable the <em>Develop</em> menu, choose <em>Safari &gt; Preferences &gt; Advanced &gt; Show Develop menu in menu bar</em>).</li>
- <li>Chrome: Install the Web Developer Toolbar extension, then restart the browser. Click the gear icon that will appear, then select <em>CSS &gt; Disable All Styles</em>.</li>
- <li>Edge: Select <em>View &gt; Style &gt; No Style</em> from the main menu.</li>
-</ul>
-
-<h4 id="Using_native_keyboard_accessibility">Using native keyboard accessibility</h4>
-
-<p>Certain HTML features can be selected using only the keyboard — this is default behavior, available since the early days of the web. The elements that have this capability are the common ones that allow user to interact with web pages, namely links, {{htmlelement("button")}}s, and form elements like {{htmlelement("input")}}.</p>
-
-<p>You can try this out using our <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> example (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">source code</a>) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p>
-
-<p>You can then press Enter/Return to follow a focused link or press a button (we've included some JavaScript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the {{htmlelement("select")}} element can have its options displayed and cycled between using the up and down arrow keys).</p>
-
-<p>Note that different browsers may have different keyboard control options available. Most modern browsers follow the tab pattern described above (you can also do Shift + Tab to move backwards through the focusable elements), but some browsers have their own idiosyncracies:</p>
-
-<ul>
- <li>Firefox for the Mac doesn't do tabbing by default. To turn it on, you have to go to <em>Preferences &gt; Advanced &gt; General</em>, then uncheck "Always use the cursor keys to navigate within pages". Next, you have to open your Mac's System Preferences app, then go to <em>Keyboard &gt; Shortcuts</em>, then select the <em>All Controls</em> radio button.</li>
- <li>Safari doesn't allow you to tab through links by default; to enable this, you need to open Safari's <em>Preferences</em>, go to Advanced, and check the <em>Press Tab to highlight each item on a webpage</em> checkbox.</li>
-</ul>
-
-<div class="warning">
-<p><strong>Important</strong>: You should perform this kind of test on any new page you write — make sure the functionality can be accessed by the keyboard.</p>
-</div>
-
-<p>This example highlights the importance of using the correct semantic element for the correct job. It is possible to style <em>any</em> element to look like a link or button with CSS, and to behave like a link or button with JavaScript, but they won't actually be links or buttons, and you'll lose a lot of the accessibility these elements give you for free. So don't do it if you can avoid it.</p>
-
-<p>Another tip — as shown in our example, you can control how your focusable elements look when focused, using the <a href="/en-US/docs/Web/CSS/:focus">:focus</a> pseudo-class. It is a good idea to double up focus and hover styles, so your users get that visual clue that a control will do something when activated, whether they are using mouse or keyboard:</p>
-
-<pre class="brush: css notranslate">a:hover, input:hover, button:hover, select:hover,
-a:focus, input:focus, button:focus, select:focus {
-  font-weight: bold;
-}</pre>
-
-<div class="note">
-<p><strong>Note</strong>: If you do decide to remove the default focus styling using CSS, make sure you replace it with something else that fits in with your design better — it is a very valuable accessiblity tool, and should not be removed.</p>
-</div>
-
-<h4 id="Building_in_keyboard_accessibility">Building in keyboard accessibility</h4>
-
-<p>Sometimes it is not possible to avoid losing keyboard accessibility. You might have inherited a site where the semantics are not very good (perhaps you've ended up with a horrible CMS that generates buttons made with <code>&lt;div&gt;</code>s), or you are using a complex control that does not have keyboard accessibility built in, like the HTML5 {{htmlelement("video")}} element (amazingly, Opera is the only browser that allows you to tab through the <code>&lt;video&gt;</code> element's default browser controls). You have a few options here:</p>
-
-<ol>
- <li>Create custom controls using <code>&lt;button&gt;</code> elements (which we can tab to by default!) and JavaScript to wire up their functionality. See <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a> for some good examples of this.</li>
- <li>Create keyboard shortcuts via JavaScript, so functionality is activated when you press certain keys on the keyboard. See <a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">Desktop mouse and keyboard controls</a> for some game-related examples that can be adapted for any purpose.</li>
- <li>Use some interesting tactics to fake button behaviour. Take for example our <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> example (see <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">source code</a>). Here we've given our fake <code>&lt;div&gt;</code> buttons the ability to be focused (including via tab) by giving each one the attribute <code>tabindex="0"</code> (see WebAIM's <a href="http://webaim.org/techniques/keyboard/tabindex">tabindex article</a> for more really useful details). This allows us to tab to the buttons, but not to activate them via the Enter/Return key. To do that, we had to add the following bit of JavaScript trickery:
-  <pre class="brush: js notranslate">document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.onclick(e);
-  }
-};</pre>
-  Here we add a listener to the <code>document</code> object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> property; if it is the keycode that matches Return/Enter, we run the function stored in the button's <code>onclick</code> handler using <code>document.activeElement.onclick()</code>. <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> gives us the element that is currently focused on the page.</li>
-</ol>
-
-<div class="note">
-<p><strong>Note</strong>: This technique will only work if you set your original event handlers via event handler properties (e.g. <code>onclick</code>). <code>addEventListener</code> won't work. This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. Better to just use the right element for the right job in the first place.</p>
-</div>
-
-<h4 id="Text_alternatives">Text alternatives</h4>
-
-<p>Text alternatives are very important for accessibility — if a person has a visual or hearing impairment that stops them being able to see or hear some content, then this is a problem. The simplest text alternative available is the humble <code>alt</code> attribute, which we should include on all images that contain relevant content. This should contain a description of the image that successfully conveys its meaning and content on the page, to be picked up by a screenreader and read out to the user.</p>
-
-<div class="note">
-<p><strong>Note</strong>: For more information, read <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p>
-</div>
-
-<p>Missing alt text can be tested for in a number of ways, for example using accessibility {{anch("Auditing tools")}}.</p>
-
-<p>Alt text is slightly more complex for video and audio content. There is a way to define text tracks (e.g. subtitles) and display them when video is being played, in the form of the {{htmlelement("track")}} element, and the <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> format (see <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a> for a detailed tutorial). <a href="/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Browser_Compatibility">Browser compatibility</a> for these features is fairly good, but if you want to provide text alternatives for audio or support older browsers, a simple text transcript presented somewhere on the page or on a separate page might be a good idea.</p>
-
-<h4 id="Element_relationships_and_context">Element relationships and context</h4>
-
-<p>There are certain features and best practices in HTML designed to provide context and relationships between elements where none otherwise exists. The three most common examples are links, form labels, and data tables.</p>
-
-<p>The key to accessible link text is that people using screen readers will often use a common feature whereby they pull up a list of all the links on the page. In this case, the link text needs to make sense out of context. For example, a list of links labeled "click here", "click here", etc. is really bad for accessibility. It is better for link text to make sense in context and out of context.</p>
-
-<p>Next on our list, the form {{htmlelement("label")}} element is one of the central features that allows us to make forms accessible. The trouble with forms is that you need labels to say what data should be entered into each form input. Each label needs to be included inside a {{htmlelement("label")}} to link it unambiguously to its partner form input (each <code>&lt;label&gt;</code> <code>for</code> attribute value needs to match the form element <code>id</code> value), and it will make sense even if the source order is not completely logical (which to be fair it should be).</p>
-
-<div class="note">
-<p><strong>Note</strong>: For more information about link text and form labels, read <a href="/en-US/docs/Learn/Accessibility/HTML#Meaningful_text_labels">Meaningful text labels</a>.</p>
-</div>
-
-<p>Finally, a quick word about data tables. A basic data table can be written with very simple markup (see <code>bad-table.html</code> <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/html/bad-table.html">source</a>), but this has problems — there is no way for a screen reader user to associate rows or columns together as groupings of data — to do this you need to know what the header rows are, and if they are heading up rows, columns, etc. This can only be done visually for such a table.</p>
-
-<p>If you instead look at our <code>punk-bands-complete.html</code> example (<a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">live</a>, <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">source</a>), you can see a few accessibility aids at work here, such as table headers ({{htmlelement("th")}} and <code>scope</code> attributes), {{htmlelement("caption")}} element, etc.</p>
-
-<div class="note">
-<p><strong>Note</strong>: For more information about accessible tables, read <a href="/en-US/docs/Learn/Accessibility/HTML#Accessible_data_tables">Accessible data tables</a>.</p>
-</div>
-
-<h3 id="CSS">CSS</h3>
-
-<p>CSS tends to provide a lot fewer fundamental accessibility features than HTML, but it can still do just as much damage to accessibility if used incorrectly. We have already mentioned a couple of accessibility tips involving CSS:</p>
-
-<ul>
- <li>Use the correct semantic elements to mark up different content in HTML; if you want to create a different visual effect, use CSS — don't abuse an HTML element to get the look you want. For example, if you want bigger text, use {{cssxref("font-size")}}, not an {{htmlelement("h1")}} element.</li>
- <li>Make sure your source order makes sense without CSS; you can always use CSS to style the page any way you want afterward.</li>
- <li>You should make sure interactive elements like buttons and links have appropriate focus/hover/active states set, to give the user visual clues as to their function. If you remove the defaults for stylistic reasons, make sure you include some replacement styles.</li>
-</ul>
-
-<p>There are a few other considerations you should take into account.</p>
-
-<h4 id="Color_and_color_contrast">Color and color contrast</h4>
-
-<p>When choosing a color scheme for your website, you should make sure that the text (foreground) color contrasts well with the background color. Your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content. Use a tool like WebAIM's <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> to check whether your scheme is contrasting enough.</p>
-
-<p>Another tip is to not rely on color alone for signposts/information, as this will be no good for those who can't see the color. Instead of marking required form fields in red, for example, mark them with an asterisk and in red.</p>
-
-<div class="note">
-<p><strong>Note</strong>: A high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight.</p>
-</div>
-
-<h4 id="Hiding_content">Hiding content</h4>
-
-<p>There are many instances where a visual design will require that not all content is shown at once. For example, in our <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>) we have three panels of information, but we are <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a> them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use Tab and Enter/Return to select them).</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/16918/20191022144107.png" style="display: block; height: 1131px; margin: 0px auto; max-width: 450px; width: 1272px;"></p>
-
-<p>Screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. Absolute positioning (as used in this example) is generally seen as one of the best mechanisms of hiding content for visual effect, because it doesn't stop screen readers from getting to it.</p>
-
-<p>On the other hand, you shouldn't use {{cssxref("visibility")}}<code>:hidden</code> or {{cssxref("display")}}<code>:none</code>, because they do hide content from screenreaders. Unless of course, there is a good reason why you want this content to be hidden from screenreaders.</p>
-
-<div class="note">
-<p><strong>Note</strong>: <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> has a lot more useful detail surrounding this topic.</span></p>
-</div>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<p>JavaScript has the same kind of problems as CSS with respect to accessibility — it can be disastrous for accessibility if used badly, or overused. We've already hinted at some accessibility problems related to JavaScript, mainly in the area of semantic HTML — you should always use appropriate semantic HTML to implement functionality wherever it is available, for example use links and buttons as appropriate. Don't use <code>&lt;div&gt;</code> elements with JavaScript code to fake functionality if at all possible — it is error prone, and more work than using the free functionality HTML gives you.</p>
-
-<h4 id="Simple_functionality">Simple functionality</h4>
-
-<p>Generally simple functionality should work with just the HTML in place — JavaScript should only be used to enhance functionality, not build it in entirely. Good uses of JavaScript include:</p>
-
-<ul>
- <li>Providing client-side form validation, which alerts users to problems with their form entries quickly, without having to wait for the server to check the data. If it isn't available, the form will still work, but validation might be slower.</li>
- <li>Providing custom controls for HTML5 <code>&lt;video&gt;</code>s that are accessible to keyboard-only users (as we said earlier, the default browser controls aren't keyboard-accessible in most browsers).</li>
-</ul>
-
-<div class="note">
-<p><strong>Note</strong>: WebAIM's <a href="http://webaim.org/techniques/javascript/">Accessible JavaScript</a> provides some useful further details about considerations for accessible JavaScript.</p>
-</div>
-
-<p>More complex JavaScript implementations can create issues with accessibility — you need to do what you can. For example, it would be unreasonable to expect you to make a complex 3D game written using <a href="/en-US/docs/Learn/WebGL">WebGL</a> 100% accessible to a blind person, but you could implement <a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">keyboard controls</a> so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies.</p>
-
-<h4 id="Complex_functionality">Complex functionality</h4>
-
-<p>One of the main areas problematic for accessibility is complex apps that involve complicated form controls (such as date pickers) and dynamic content that is updated often and incrementally.</p>
-
-<p>Non-native complicated form controls are problematic because they tend to involve a lot of nested <code>&lt;div&gt;</code>s, and the browser does not know what to do with them by default. If you are inventing them yourself, you need to make sure that they are keyboard accessible; if you are using some kind of third-party framework, carefully review the options available to see how accessible they are before diving in. <a href="http://getbootstrap.com/">Bootstrap</a> looks to be fairly good for accessibility, for example, although <span class="l-d-i l-pa2 t-bg-white"><a href="https://www.sitepoint.com/making-bootstrap-accessible/">Making Bootstrap a Little More Accessible</a> by Rhiana Heath explores some of its issues (mainly related to color contrast), and looks at some solutions.</span></p>
-
-<p>Regularly updated dynamic content can be a problem because screenreader users might miss it, especially if it updates unexpectedly. If you have a single-page app with a main content panel that is regularly updated using <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, a screenreader user might miss those updates.</p>
-
-<h4 id="WAI-ARIA">WAI-ARIA</h4>
-
-<p>Do you need to use such complex functionality, or will plain old semantic HTML do instead? If you do need complexity, you should consider using <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> (Accessible Rich Internet Applications), a specification that provides semantics (in the form of new HTML attributes) for items such as complex form controls and updating panels that can be understood by most browsers and screen readers.</p>
-
-<p>To deal with complex form widgets, you need to use ARIA attributes like <code>roles</code> to state what role different elements have in a widget (for example, are they a tab, or a tab panel?), <code>aria-disabled</code> to say whether a control is disabled or not, etc.</p>
-
-<p>To deal with regularly updating regions of content, you can use the <code>aria-live</code> attribute, which identifies an updating region. Its value indicates how urgently the screen reader should read it out:</p>
-
-<ul>
- <li><code>off:</code> The default. Updates should not be announced.</li>
- <li><code>polite</code>: Updates should be announced only if the user is idle.</li>
- <li><code>assertive</code>: Updates should be announced to the user as soon as possible.</li>
- <li><code>rude</code>: Updates should be announced straight away, even if this interrupts the user.</li>
-</ul>
-
-<p>Here's an example:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;&lt;span id="LiveRegion1" aria-live="polite" aria-atomic="false"&gt;&lt;/span&gt;&lt;/p&gt;</pre>
-
-<p>You can see an example in action at Freedom Scientific's <a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA (Accessible Rich Internet Applications) Live Regions</a> example — the highlighted paragraph should update its content every 10 seconds, and a screenreader should read this out to the user. <a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm">ARIA Live Regions - Atomic</a> provides another useful example.</p>
-
-<p>We don't have space to cover WAI-ARIA in detail here, you can learn a lot more about it at <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a>.</p>
-
-<h2 id="Accessibility_tools">Accessibility tools</h2>
-
-<p>Now we've covered accessibility considerations for different web technologies, including a few testing techniques (like keyboard navigation and color contrast checkers), let's have a look at other tools you can make use of when doing accessibility testing.</p>
-
-<h3 id="Auditing_tools">Auditing tools</h3>
-
-<p>There are a number of auditing tools available that you can feed your web pages into. They will look over them and return a list of accessibility issues present on the page. Examples include:</p>
-
-<ul>
- <li><a href="http://wave.webaim.org/">Wave</a>: A rather nice online accessibility testing tool that accepts a web address and returns a useful annotated view of that page with accessibility problems highlighted.</li>
- <li><a href="https://tenon.io">Tenon</a>: Another nice online tool that goes through the code at a provided URL and returns results on accessibility errors including metrics, specific errors along with the WCAG criteria they affect, and suggested fixes. It requires a free trial signup to view the results.</li>
- <li><a href="http://khan.github.io/tota11y/">tota11y</a>: An accessibility tool from the Khan Academy that takes the form of a JavaScript library that you attach to your page to provide a number of accessibility tools.</li>
-</ul>
-
-<p>Let's look at an example, using Wave.</p>
-
-<ol>
- <li>Go to the <a href="http://wave.webaim.org/">Wave homepage</a>.</li>
- <li>Enter the URL of our <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a> example into the text input at the top of the page (or the URL of another webpage you'd like to analyze) and press <em>Analyse Your Webpage</em>.</li>
- <li>Check out the description of the accessibility problems on the results page (the icons you can click to see what problems are occuring where are rather useful).</li>
-</ol>
-
-<div class="note">
-<p><strong>Note</strong>: Such tools aren't good enough to solve all your accessibility problems on their own. You'll need a combination of these, knowledge and experience, user testing, etc. to get a full picture.</p>
-</div>
-
-<h3 id="Automation_tools">Automation tools</h3>
-
-<p><a href="https://www.deque.com/products/axe/">Deque's aXe tool</a> goes a bit further than the auditing tools we mentioned above. Like the others, it checks pages and returns accessibility errors. Its most immediately useful form is probably the browser extensions:</p>
-
-<ul>
- <li><a href="http://bitly.com/aXe-Chrome">aXe for Chrome</a></li>
- <li><a href="http://bit.ly/aXe-Firefox">aXe for Firefox</a></li>
-</ul>
-
-<p>These add an accessibility tab to the browser developer tools. For example, we installed the Firefox version, then used it to audit our <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> example. We got the following results:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14213/aXe-screenshot.png" style="display: block; height: 580px; margin: 0px auto; width: 800px;"></p>
-
-<p>aXe is also installable using <code>npm</code>, and can be integrated with task runners like <a href="http://gruntjs.com/">Grunt</a> and <a href="http://gulpjs.com/">Gulp</a>, automation frameworks like <a href="http://www.seleniumhq.org/">Selenium</a> and <a href="https://cucumber.io/">Cucumber</a>, unit testing frameworks like <a href="http://jasmine.github.io/">Jasmin</a>, and more besides (again, see the <a href="https://www.deque.com/products/axe/">main aXe page</a> for details).</p>
-
-<h3 id="Screenreaders">Screenreaders</h3>
-
-<p>It is definitely worth testing with a screenreader to get used to how severely visually impaired people use the Web. There are a number of screenreaders available:</p>
-
-<ul>
- <li>Some are paid-for commercial products, like <a href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) and <a href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li>
- <li>Some are free products, like <a href="http://www.nvaccess.org/">NVDA</a> (Windows), <a href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows, and Mac OS X), and <a href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li>
- <li>Some are built into the operating system, like <a href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X and iOS), <a href="http://www.chromevox.com/">ChromeVox</a> (on Chromebooks), and <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li>
-</ul>
-
-<p>Generally, screen readers are separate apps that run on the host operating system and can read not only web pages, but text in other apps as well. This is not always the case (ChromeVox is a browser extension), but usually. Screenreaders tend to act in slightly different ways and have different controls, so you'll have to consult the documentation for your chosen screen reader to get all of the details — saying that, they all work in basically the same sort of way.</p>
-
-<p>Let's go through some tests with a couple of different screenreaders to give you a general idea of how they work and how to test with them.</p>
-
-<div class="note">
-<p><strong>Note</strong>: WebAIM's <a href="http://webaim.org/techniques/screenreader/">Designing for Screen Reader Compatibility</a> provides some useful information about screenreader usage and what works best for screenreaders. Also see <a href="http://webaim.org/projects/screenreadersurvey6/#used">Screen Reader User Survey #6 Results</a> for some interesting screenreader usage statistics.</p>
-</div>
-
-<h4 id="VoiceOver">VoiceOver</h4>
-
-<p>VoiceOver (VO) comes free with your Mac/iPhone/iPad, so it's useful for testing on desktop/mobile if you use Apple products. We'll be testing it on Mac OS X on a MacBook Pro.</p>
-
-<p>To turn it on, press Cmd + F5. If you've not used VO before, you will be given a welcome screen where you can choose to start VO or not, and run through a rather useful tutorial to learn how to use it. To turn it off again, press Cmd + F5 again.</p>
-
-<div class="note">
-<p><strong>Note</strong>: You should go through the tutorial at least once — it is a really useful way to learn VO.</p>
-</div>
-
-<p>When VO is on, the display will look mostly the same, but you'll see a black box at the bottom left of the screen that contains information on what VO currently has selected. The current selection will also be highlighted, with a black border — this highlight is known as the <strong>VO cursor</strong>.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14219/voiceover.png" style="border-style: solid; border-width: 1px; display: block; height: 386px; margin: 0px auto; width: 800px;"></p>
-
-<p>To use VO, you will make a lot of use of the "VO modifier" — this is a key or key combination that you need to press in addition to the actual VO keyboard shortcuts to get them to work. Using a modifier like this is common with screenreaders, to enable them to keep their commands from clashing with other commands. In the case of VO, the modifier can either be CapsLock, or Ctrl + Option.</p>
-
-<p>VO has many keyboard commands, and we won't list them all here. The basic ones you'll need for web page testing are in the following table. In the keyboard shortcuts, "VO" means "the VoiceOver modifier".</p>
-
-<table class="standard-table">
- <caption>Most common VoiceOver keyboard shortcuts</caption>
- <thead>
-  <tr>
-   <th scope="col">Keyboard shortcut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>VO + Cursor keys</td>
-   <td>Move the VO cursor up, right, down, left.</td>
-  </tr>
-  <tr>
-   <td>VO + Spacebar</td>
-   <td>Select/activate items highlighted by the VO cursor. This includes items selected in the Rotor (see below).</td>
-  </tr>
-  <tr>
-   <td>VO + Shift + down cursor</td>
-   <td>Move into a group of items (such as an HTML table, or a form, etc.) Once inside a group you can move around and select items inside that group using the above commands as normal.</td>
-  </tr>
-  <tr>
-   <td>VO + Shift + up cursor</td>
-   <td>Move out of a group.</td>
-  </tr>
-  <tr>
-   <td>VO + C</td>
-   <td>(when inside a table) Read the header of the current column.</td>
-  </tr>
-  <tr>
-   <td>VO + R</td>
-   <td>(when inside a table) Read the header of the current row.</td>
-  </tr>
-  <tr>
-   <td>VO + C + C (two Cs in succession)</td>
-   <td>(when inside a table) Read the entire current column, including header.</td>
-  </tr>
-  <tr>
-   <td>VO + R + R (two Rs in succession)</td>
-   <td>(when inside a table) Read the entire current row, including the headers that correspond to each cell.</td>
-  </tr>
-  <tr>
-   <td>VO + left cursor, VO + right cursor</td>
-   <td>(when inside some horizontal options, such as a date or time picker) Move between options.</td>
-  </tr>
-  <tr>
-   <td>VO + up cursor, VO + down cursor</td>
-   <td>(when inside some horizontal options, such as a date or time picker) Change the current option.</td>
-  </tr>
-  <tr>
-   <td>VO + U</td>
-   <td>Use the Rotor, which displays lists of headings, links, form controls, etc. for easy navigation.</td>
-  </tr>
-  <tr>
-   <td>VO + left cursor, VO + right cursor</td>
-   <td>(when inside Rotor) Move between different lists available in the Rotor.</td>
-  </tr>
-  <tr>
-   <td>VO + up cursor, VO + down cursor</td>
-   <td>(when inside Rotor) Move between different items in the current Rotor list.</td>
-  </tr>
-  <tr>
-   <td>Esc</td>
-   <td>(when inside Rotor) Exit Rotor.</td>
-  </tr>
-  <tr>
-   <td>Ctrl</td>
-   <td>(when VO is speaking) Pause/Resume speech.</td>
-  </tr>
-  <tr>
-   <td>VO + Z</td>
-   <td>Restart the last bit of speech.</td>
-  </tr>
-  <tr>
-   <td>VO + D</td>
-   <td>Go into the Mac's Dock, so you can select apps to run inside it.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>This seems like a lot of commands, but it isn't so bad when you get used to it, and VO regularly gives you reminders of what commands to use in certain places. Have a play with VO now; you can then go on to play with some of our examples in the {{anch("Screenreader testing")}} section.</p>
-
-<h4 id="NVDA">NVDA</h4>
-
-<p>NVDA is Windows-only, and you'll need to install it.</p>
-
-<ol>
- <li>Download it from <a href="http://www.nvaccess.org/">nvaccess.org</a>. You can choose whether to make a donation or download it for free; you'll also need to give them your e-mail address before you can download it.</li>
- <li>Once downloaded, install it — you double click the installer, accept the license and follow the prompts.</li>
- <li>To start NVDA, double click on the program file/shortcut, or use the keyboard shortcut Ctrl + Alt + N. You'll see the NVDA welcome dialog when you start it. Here you can choose from a couple of options, then press the <em>OK</em> button to get going.</li>
-</ol>
-
-<p>NVDA will now be active on your computer.</p>
-
-<p>To use NVDA, you will make a lot of use of the "NVDA modifier" — this is a key that you need to press in addition to the actual NVDA keyboard shortcuts to get them to work. Using a modifier like this is common with screenreaders, to enable them to keep their commands from clashing with other commands. In the case of NVDA, the modifier can either be Insert (the default), or CapsLock (can be chosen by checking the first checkbox in the NVDA welcome dialog before pressing <em>OK</em>).</p>
-
-<div class="note">
-<p><strong>Note</strong>: NVDA is more subtle than VoiceOver in terms of how it highlights where it is and what it is doing. When you are scrolling through headings, lists, etc., items you are selected on will generally be highlighted with a subtle outline, but this is not always the case for all things. If you get completely lost, you can press Ctrl + F5 to refresh the current page and begin from the top again.</p>
-</div>
-
-<p>NVDA has many keyboard commands, and we won't list them all here. The basic ones you'll need for web page testing are in the following table. In the keyboard shortcuts, "NVDA" means "the NVDA modifier".</p>
-
-<table class="standard-table">
- <caption>Most common NVDA keyboard shortcuts</caption>
- <thead>
-  <tr>
-   <th scope="col">Keyboard shortcut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>NVDA + Q</td>
-   <td>Turn NVDA off again after you've started it.</td>
-  </tr>
-  <tr>
-   <td>NVDA + up cursor</td>
-   <td>Read the current line.</td>
-  </tr>
-  <tr>
-   <td>NVDA + down cursor</td>
-   <td>Start reading at the current position.</td>
-  </tr>
-  <tr>
-   <td>Up cursor and down cursor, or Shift + Tab and Tab</td>
-   <td>Move to previous/next item on page and read it.</td>
-  </tr>
-  <tr>
-   <td>Left cursor and right cursor</td>
-   <td>Move to previous/next character in current item and read it.</td>
-  </tr>
-  <tr>
-   <td>Shift + H and H</td>
-   <td>Move to previous/next heading and read it.</td>
-  </tr>
-  <tr>
-   <td>Shift + K and K</td>
-   <td>Move to previous/next link and read it.</td>
-  </tr>
-  <tr>
-   <td>Shift + D and D</td>
-   <td>Move to previous/next document landmark (e.g. <code>&lt;nav&gt;</code>) and read it.</td>
-  </tr>
-  <tr>
-   <td>Shift + 1–6 and 1–6</td>
-   <td>Move to previous/next heading (level 1–6) and read it.</td>
-  </tr>
-  <tr>
-   <td>Shift + F and F</td>
-   <td>Move to previous/next form input and focus on it.</td>
-  </tr>
-  <tr>
-   <td>Shift + T and T</td>
-   <td>Move to previous/next data table and focus on it.</td>
-  </tr>
-  <tr>
-   <td>Shift + B and B</td>
-   <td>Move to previous/next button and read its label.</td>
-  </tr>
-  <tr>
-   <td>Shift + L and L</td>
-   <td>Move to previous/next list and read its first list item.</td>
-  </tr>
-  <tr>
-   <td>Shift + I and I</td>
-   <td>Move to previous/next list item and read it.</td>
-  </tr>
-  <tr>
-   <td>Enter/Return</td>
-   <td>(when link/button or other activatable item is selected) Activate item.</td>
-  </tr>
-  <tr>
-   <td>NVDA + Space</td>
-   <td>(when form is selected) Enter form so individual items can be selected, or leave form if you are already in it.</td>
-  </tr>
-  <tr>
-   <td>Shift Tab and Tab</td>
-   <td>(when inside form) Move between form inputs.</td>
-  </tr>
-  <tr>
-   <td>Up cursor and down cursor</td>
-   <td>(when inside form) Change form input values (in the case of things like select boxes).</td>
-  </tr>
-  <tr>
-   <td>Spacebar</td>
-   <td>(when inside form) Select chosen value.</td>
-  </tr>
-  <tr>
-   <td>Ctrl + Alt + cursor keys</td>
-   <td>(when a table is selected) Move between table cells.</td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Screenreader_testing">Screenreader testing</h4>
-
-<p>Now you've gotten used to using a screenreader, we'd like you to use it to do some quick accessibility tests, to get an idea of how screenreaders deal with good and bad webpage features:</p>
-
-<ul>
- <li>Look at <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>, and note how the headers are found by the screenreader and available to use for navigation. Now look at <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>, and note how the screenreader gets none of this information. Imagine how annoying this would be when trying to navigate a really long page of text.</li>
- <li>Look at <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a>, and note how they make sense when viewed out of context. This is not the case with <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a> — they are all just "click here".</li>
- <li>Look at <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a>, and note how the form inputs are described using their labels because we've used <code>&lt;label&gt;</code> elements properly. In <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>, they get an unhelpful label along the lines of "blank".</li>
- <li>Look at our <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> example, and see how the screenreader is able to associate columns and rows of content and read them out all together because we've defined headers properly. In <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a>, none of the cells can be associated at all. Note that NVDA seems to behave slightly stragely when you've only got a single table on a page; you could try <a href="http://webaim.org/articles/nvda/tables.htm">WebAIM's table test page</a> instead.</li>
- <li>Have a look at the <a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">WAI-ARIA live regions example</a> we saw earlier, and note how the screen reader will keep reading out the constantly updating section as it updates.</li>
-</ul>
-
-<h3 id="User_testing">User testing</h3>
-
-<p>As mentioned above, you can't rely on automated tools alone for determining accessibility problems on your site. It is recommended that when you draw up your testing plan, you should include some accessibility user groups if at all possible (see our <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#User_testing">User Testing</a> section earlier on in the course for some more context). Try to get some screenreader users involved, some keyboard-only users, some non-hearing users, and perhaps other groups too, as suits your requirements.</p>
-
-<h2 id="Accessibility_testing_checklist">Accessibility testing checklist</h2>
-
-<p>The following list provides a checklist for you to follow to make sure you've carried out the recommended accessibility testing for your project:</p>
-
-<ol>
- <li>Make sure your HTML is as semantically correct as possible. <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Validation">Validating it</a> is a good start, as is using an <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">Auditing tool</a>.</li>
- <li>Check that your content makes sense when the CSS is turned off.</li>
- <li>Make sure your functionality is <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">keyboard accessible</a>. Test using Tab, Return/Enter, etc.</li>
- <li>Make sure your non-text content has <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">text alternatives</a>. An <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">Auditing tool</a> is good for catching such problems.</li>
- <li>Make sure your site's <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Color_and_color_contrast">color contrast</a> is acceptable, using a suitable checking tool.</li>
- <li>Make sure <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Hiding_content">hidden content</a> is visible by screenreaders.</li>
- <li>Make sure that functionality is usable without JavaScript wherever possible.</li>
- <li>Use ARIA to improve accessibility where appropriate.</li>
- <li>Run your site through an <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">Auditing tool</a>.</li>
- <li>Test it with a screenreader.</li>
- <li>Include an accessibility policy/statement somewhere findable on your site to say what you did.</li>
-</ol>
-
-<h2 id="Finding_help">Finding help</h2>
-
-<p>There are many other issues you'll encounter with accessibility; the most important thing to know really is how to find answers online. Consult the HTML and CSS article's <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Finding_help">Finding help section</a> for some good pointers.</p>
-
-<h2 id="Summary">Summary</h2>
-
-<p>Hopefully this article has given you a good grounding in the main accessibility problems you might encounter, and how to test and overcome them.</p>
-
-<p>In the next article we'll look at feature detection in more detail.</p>
-
-<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li>
-</ul>
diff --git a/files/pt-pt/learn/tools_and_testing/cross_browser_testing/index.html b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/index.html
deleted file mode 100644
index e2e99b740d..0000000000
--- a/files/pt-pt/learn/tools_and_testing/cross_browser_testing/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Teste cruzado de navegador
-slug: Learn/Tools_and_testing/Cross_browser_testing
-tags:
-  - Acessibilidade
-  - Aprender
-  - Automação
-  - CSS
-  - CodingScripting
-  - Ferramentas
-  - HTML
-  - JavaScript
-  - Landing
-  - Principiante
-  - Testar
-  - cruzado navegador
-  - modulo
-translation_of: Learn/Tools_and_testing/Cross_browser_testing
-original_slug: Learn/Tools_and_testing/Teste_cruzado_de_navegador
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Este módulo foca-se em testar projetos da <em>web</em> em diferentes navegadores. Nós olhamos para identificar o seu público alvo (por exemplo, quais o s utilizadores, navegadores e dispositivos que mais precisa de se preocupar?), como testar, os principais problemas que irá enfrentar com diferentes tipos de código e como os mitigar, quais as ferramentas que são mais úteis para ajudá-lo a testar e corrigir problemas, e como utilizar a automação para acelerar os testes.</p>
-
-<h2 id="Pré-requisitos">Pré-requisitos</h2>
-
-<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p>
-
-<h2 id="Guias">Guias</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></dt>
- <dd>This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></dt>
- <dd>Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), low fi testing strategies (get yourself a range of devices and some virtual machines and do adhoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></dt>
- <dd>With the scene set, we'll now look specifically at the common cross browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></dt>
- <dd>Now we'll look at common cross browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></dt>
- <dd>Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></dt>
- <dd>Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as <code>@supports</code>.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></dt>
- <dd>Manually running tests on several browsers and devices, several times per day, can get tedious and time consuming. To handle this efficiently, you should become familiar with automation tools. In this article we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></dt>
- <dd>In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.</dd>
-</dl>
diff --git a/files/pt-pt/learn/tools_and_testing/index.html b/files/pt-pt/learn/tools_and_testing/index.html
deleted file mode 100644
index 444d339603..0000000000
--- a/files/pt-pt/learn/tools_and_testing/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Ferramentas e testes
-slug: Learn/Tools_and_testing
-tags:
-  - Acessibilidade
-  - Aprender
-  - Automação
-  - CSS
-  - CodingScripting
-  - Ferramentas
-  - HTML
-  - JavaScript
-  - Landing
-  - Principiante
-  - Testes
-  - TopicStub
-  - Tópico
-  - testes do utilizador
-translation_of: Learn/Tools_and_testing
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Assim que começar a familiarizar-se com as principais tecnologias da <em>web</em> (tal como CSS, HTML e JavaScript), e começar a ter mais experiência, ler mais recursos, e aprender mais dicas e truques, irá começar a deparar-se com todos os tipos de ferramentas, desde CSS e JavaScript prontas a utilizar, até aplicações de teste e automação, e muito mais. À medida que os seus projetos da <em>web</em> se tornam maiores e mais complexos, irá querer começar a aproveitar algumas dessas ferramentas e elaborar planos de testes confiáveis ​​para o seu código. Esta parte da área de aprendizagem tem como objetivo dar-lhe o que precisa para começar e fazer escolhas informadas.</p>
-
-<p>The web industry is an exciting place to work, but it is not without its complications. The core technologies we use to build web sites are fairly stable now, but new features are being added all the time, and new tools — that facilitate working with, and are built on top of these technologies — are constantly appearing. On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.</p>
-
-<p>Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Because new tools appear and old ones go out of fashion all the time, we have deliberately written this material to be as neutral as possible — we want to focus first and foremost on the general types of tasks these tools will help you accomplish, and keep prescribing specific tools to a minimum. We obviously need to show tool usage to demonstrate specific techniques, but be clear that we do not necessarily recommend these tools as the best or only way to do things — in most cases there are other ways, but we want to provide you with a clear methodology that works.</p>
-</div>
-
-<h2 id="Caminho_de_aprendizagem">Caminho de aprendizagem</h2>
-
-<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, or making effective use of JavaScript libraries, or writing tests and running them against your code using test runners, etc.</p>
-
-<p>You need a solid foundation first.</p>
-
-<h2 id="Módulos">Módulos</h2>
-
-<dl>
- <dt>Ferramentas de desenvolvimento do mundo real (TDB)</dt>
- <dd>In this module, we explore the different kinds of web development tools available. This includes reviewing the most common kinds of tasks you may be called on to solve, how they can fit together in a workflow, and the best tools currently avaiable for carrying out those tasks.</dd>
- <dt><a href="/pt-PT/docs/Learn/Tools_and_testing/Teste_cruzado_de_navegador">Teste cruzado de navegador</a></dt>
- <dd>This module looks specifically at the area of testing web projects across different browsers. Here we look identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</dd>
-</dl>