unslug pt-br: move

10 files changed, 1753 insertions, 0 deletions

diff --git a/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..34d0eb95ad
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,290 @@
+---
+title: CSS básico
+slug: Aprender/Getting_started_with_the_web/CSS_basico
+tags:
+  - Aprender
+  - CSS
+  - Codificação de Scripts
+  - Estilo
+  - Iniciante
+  - Web
+  - 'l10n:prioridade'
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à sua página Web. <em>CSS básico</em> apresenta tudo que você precisa para começar. Responderemos a perguntas do tipo: Como mudo meu texto para preto ou vermelho? Como faço para que meu conteúdo apareça em determinados lugares na tela? Como decoro minha página com imagens e cores de fundo?</p>
+</div>
+
+<h2 id="Então_o_que_realmente_é_CSS">Então, o que realmente é CSS?</h2>
+
+<p>Assim como o HTML, o CSS não é realmente uma linguagem de programação. Também não é uma linguagem de marcação  — é uma <em>linguagem de folhas de estilos</em>. Isso significa que o CSS permite aplicar estilos seletivamente a elementos em documentos HTML. Por exemplo, para selecionar <strong>todos</strong> os elementos parágrafo de uma página HTML e tornar o texto dentro deles vermelho, você escreveria este CSS:</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Vamos tentar: cole as três linhas de CSS acima em um novo arquivo, no seu editor de texto, e salve o arquivo como <code>estilo.css</code> na sua pasta <code>estilos</code>.</p>
+
+<p>Ainda assim, precisamos aplicar o CSS ao seu documento HTML. Do contrário, o estilo CSS não irá afetar a maneira como o seu navegador mostra seu documento HTML (se você não estiver acompanhando o nosso projeto, leia <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a> para descobrir o que você precisa fazer primeiro).</p>
+
+<ol>
+ <li>Abra seu arquivo <code>index.html</code> e cole o seguinte código em algum lugar no cabeçalho, ou seja, entre as tags {{HTMLElement("head")}} e <code>&lt;/head&gt;</code>:
+
+  <pre class="brush: html">&lt;link href="estilos/estilo.css" rel="stylesheet"&gt;</pre>
+ </li>
+ <li>Salve o arquivo <code>index.html</code> e abra ele no seu navegador. Você deve ver uma página como essa:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Se o texto do seu parágrafo estiver vermelho, parabéns! Você acabou de escrever seu primeiro CSS de sucesso.</p>
+
+<h3 id="Anatomia_de_um_conjunto_de_regras_CSS">Anatomia de um conjunto de regras CSS</h3>
+
+<p>Vamos dar uma olhada no CSS acima com mais detalhes:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Toda essa estrutura é chamada de <strong>conjunto de regras </strong>(mas geralmente usamos o termo "regra", por ser mais curto). Note os nomes das partes individuais:</p>
+
+<dl>
+ <dt>Seletor (Selector)</dt>
+ <dd>O nome do elemento HTML no começo do conjunto de regras. Ele seleciona o(s) elemento(s) a serem estilizados (nesse caso, elementos {{HTMLElement("p")}}). Para dar estilo a um outro elemento, é só mudar o seletor.</dd>
+ <dt>Declaração (Declaration)</dt>
+ <dd>Uma regra simples como <code>color: red;</code> especificando quais das <strong>propriedades</strong> do elemento você quer estilizar.</dd>
+ <dt>Propriedades (Property)</dt>
+ <dd>Forma pela qual você estiliza um elemento HTML. (Nesse caso, <code>color</code> é uma propriedade dos elementos {{HTMLElement("p")}}.) Em CSS, você escolhe quais propriedades você deseja afetar com sua regra.</dd>
+ <dt>Valor da propriedade (Property value)</dt>
+ <dd>À direita da propriedade, depois dos dois pontos, nós temos o <strong>valor de propriedade</strong>, que escolhe uma dentre muitas aparências possíveis para uma determinada propriedade (há muitos valores <code>color(cor)</code> além do <code>red(vermelho)</code>).</dd>
+</dl>
+
+<p>Note outras partes importantes da sintaxe:</p>
+
+<ul>
+ <li>Cada linha de comando deve ser envolvida em chaves (<code>{}</code>).</li>
+ <li>Dentro de cada declaração, você deve usar dois pontos (<code>:</code>) para separar a propriedade de seus valores.</li>
+ <li>Dentro de cada conjunto de regras, você deve usar um ponto e vírgula (<code>;</code>) para separar cada declaração da próxima.</li>
+</ul>
+
+<p>Então para modificar múltiplos valores de propriedades de uma vez, você deve escrevê-los separados por ponto e vírgula, desse modo:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Selecionando_múltiplos_elementos">Selecionando múltiplos elementos</h3>
+
+<p>Você também pode selecionar vários tipos de elementos e aplicar um único conjunto de regras a todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo:</p>
+
+<pre class="brush: css">p, li, h1 {
+  color: red;
+}</pre>
+
+<h3 id="Diferentes_tipos_de_seletores">Diferentes tipos de seletores</h3>
+
+<p>Há muitos tipos diferentes de seletores. Abaixo, nós mostramos apenas os <strong>seletores de elementos</strong>, que selecionam todos os elementos de um determinado tipo nos documentos HTML. Mas nós podemos fazer seleções mais específicas que essas. Aqui estão alguns dos tipos mais comuns de seletores:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nome do seletor</th>
+   <th scope="col">O que ele seleciona</th>
+   <th scope="col">Exemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Seletor de elemento (às vezes, chamado tag ou seletor de tipo)</td>
+   <td>Todos os elementos HTML de determinado tipo.</td>
+   <td><code>p</code><br>
+    Seleciona <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de ID</td>
+   <td>O elemento na página com o ID específicado. Em uma determinada página HTML, é uma boa prática usar um elemento por ID (e claro, um ID por elemento) mesmo que seja permitido usar o mesmo ID para vários elementos.</td>
+   <td><code>#my-id</code><br>
+    Seleciona <code>&lt;p id="my-id"&gt;</code> ou <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de classe</td>
+   <td>O(s) elemento(s) na página com a classe específicada (várias instâncias de classe podem aparecer em uma página).</td>
+   <td><code>.my-class</code><br>
+    Seleciona <code>&lt;p class="my-class"&gt;</code> e <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de atributo</td>
+   <td>O(s) elemento(s) na página com o atributo especificado.</td>
+   <td><code>img[src]</code><br>
+    Seleciona <code>&lt;img src="myimage.png"&gt;</code> mas não <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de pseudo-classe</td>
+   <td>O(s) elemento(s) específicado(s), mas somente quando estiver no estado especificado. Ex.: com o mouse sobre ele.</td>
+   <td><code>a:hover</code><br>
+    Seleciona <code>&lt;a&gt;</code>, mas somente quando o mouse está em cima do link.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Há muito mais seletores para explorar e você pode achar uma lista mais detalhada em nosso <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS/Introduction_to_CSS/Seletores">Guia de seletores</a>.</p>
+
+<h2 id="Fontes_e_texto">Fontes e texto</h2>
+
+<p>Agora que exploramos algumas noções básicas de CSS, vamos começar a adicionar mais regras e informações no nosso arquivo <code>estilo.css</code> para deixar nosso exemplo bonito. Vamos começar fazendo nossas fontes e textos parecerem um pouco melhores.</p>
+
+<ol>
+ <li>Primeiro de tudo, volte e encontre a <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer#Fonte">fonte do Google Fonts</a> que você armazenou em algum lugar seguro. Adicione o elemento {{htmlelement ("link")}} em algum lugar dentro do cabeçalho no <code>index.html</code> (novamente, em qualquer lugar entre as tags {{HTMLElement ("head")}} e <code>&lt;/ head&gt;</code>). Será algo parecido com isto:
+
+  <pre class="brush: html">&lt;link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;</pre>
+  Esse código vincula sua página a uma folha de estilo que baixa a família de fontes Open Sans junto com sua página web e permite que você a defina em seus elementos HTML usando sua própria folha de estilos.</li>
+ <li>Em seguida, exclua a regra existente no seu arquivo <code>estilo.css</code>. Foi um bom teste, mas o texto vermelho não parece muito bom.</li>
+ <li>Adicione as seguintes linhas em seu lugar, substituindo a linha do espaço reservado pela linha <code>font-family</code> que você obteve do Google Fonts. (<code>font-family</code> significa apenas a(s) fonte(s) que você deseja usar para o seu texto.) Esta regra primeiro define uma fonte base global e o tamanho da fonte para a página inteira (já que {{HTMLElement ("html")}} é o elemento pai de toda a página, e todos os elementos dentro dele herdam o mesmo <code>font-size</code> e <code>font-family</code>):
+  <pre class="brush: css">html {font-size: 10px; /* px significa "pixels": o tamanho da fonte base é agora de 10 pixels */
+  font-family: "Open Sans", sans-serif; /* este deve ser o nome da fonte que você obteve no Google Fonts */
+}</pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: Qualquer coisa em um documento CSS entre <code>/*</code> e <code>*/</code> é um <strong>comentário CSS</strong>, que o navegador ignora quando renderiza o código. Este é um lugar para você escrever notas úteis sobre o que você está fazendo.</p>
+  </div>
+ </li>
+ <li>Agora definiremos tamanhos de fonte para elementos que contêm texto dentro do corpo HTML ({{htmlelement ("h1")}}, {{htmlelement ("li")}} e {{htmlelement ("p")}}). Também centralizaremos o texto do nosso cabeçalho e definiremos a altura da linha e o espaçamento das letras no conteúdo do corpo para torná-lo um pouco mais legível:
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Você pode ajustar esses valores de <code>px</code> para o que você desejar, para deixar seu design com a aparência que quiser, mas no geral seu design deve parecer com isso:<img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 728px; margin: 0px auto; width: 672px;"></p>
+
+<h2 id="Caixas_caixas_é_tudo_sobre_caixas">Caixas, caixas, é tudo sobre caixas</h2>
+
+<p>Uma coisa que você notará sobre escrever CSS é que muito disso é sobre caixas — indicar seu tamanho, cor, posição, etc. Muitos dos elementos HTML da sua página podem ser pensados como caixas umas em cima das outras.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Como esperado, o layout CSS é baseado principalmente no <em>modelo de caixas</em>. Cada um dos blocks que ocupam espaço na sua página tem propriedades como essas:</p>
+
+<ul>
+ <li><code>padding</code>, o espaço ao redor do conteúdo (ex.: ao redor do texto de um parágrafo).</li>
+ <li><code>border</code>, a linha sólida do lado de fora do padding.</li>
+ <li><code>margin</code>, o espaço externo a um elemento.</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>Nessa seção nós também vamos usar:</p>
+
+<ul>
+ <li><code>width</code> (largura de um elemento).</li>
+ <li><code>background-color</code>, a cor atrás do conteúdo de um elemento e do padding.</li>
+ <li><code>color</code>, a cor do conteúdo de um elemento (geralmente texto).</li>
+ <li><code>text-shadow</code>: cria uma sombra no texto dentro de um elemento.</li>
+ <li><code>display</code>: define a maneira de dispor um elemento (não se preocupe com isso ainda).</li>
+</ul>
+
+<p>Então, vamos começar e adicionar mais CSS à nossa página! Continue adicionando essas novas regras à parte inferior da página e não tenha medo de experimentar alterações nos valores para ver o que aparece.</p>
+
+<h3 id="Mudando_a_cor_da_página">Mudando a cor da página</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Essa regra define uma cor de fundo para toda a página. Mude a cor acima para a cor <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer#Cor_do_tema">que você escolheu ao planejar seu site.</a></p>
+
+<h3 id="Separando_o_corpo">Separando o corpo</h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Agora para o elemento {{htmlelement ("body")}}. Há algumas declarações aqui, então vamos passar por elas uma a uma:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — Isso força o corpo a ter 600 pixels de largura.</li>
+ <li><code>margin: 0 auto;</code> — Quando você define dois valores em uma propriedade como <code>margin</code> ou <code>padding</code>, o primeiro valor afeta a parte superior do elemento <strong>e</strong> a parte inferior (tornando-os <code>0</code> nesse caso), e no segundo valor os lados esquerdo <strong>e</strong> direito (aqui, <code>auto</code> é um valor especial que divide o espaço horizontal uniformemente entre esquerda e direita). Você também pode utilizar um, três ou quatro valores, como documentado <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/margin#Sintaxe">aqui</a>.</li>
+ <li><code>background-color: #FF9500;</code> — como antes, isso define a cor de fundo do elemento. Usamos um tipo de laranja avermelhado no corpo, para opor ao azul escuro no elemento {{htmlelement ("html")}}, mas fique à vontade para ir em frente e experimentar.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — temos quatro valores definidos no padding, para criar um pouco de espaço em torno do nosso conteúdo. Dessa vez, estamos definindo sem padding na parte superior do corpo, e 20 pixels no lado esquerdo, na parte inferior e no lado direito. Os valores definem a parte superior, o lado direito, a parte inferior e o lado esquerdo, nessa ordem. Como com a <code>margin</code>, você também pode usar um, dois, ou três valores, conforme documentado na <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/padding#Sintaxe">sintaxe do padding</a>.</li>
+ <li><code>border: 5px solid black;</code> — isso simplesmente define uma borda preta sólida de 5 pixels de largura em todos os lados do corpo.</li>
+</ul>
+
+<h3 id="Posicionando_e_estilizando_o_título_da_nossa_página_principal">Posicionando e estilizando o título da nossa página principal</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Você deve ter notado que há um espaço horrível no topo do corpo. Isso acontece porque os browsers aplicam algumas <strong>estilizações padrão</strong> ao {{htmlelement("h1")}} (entre outros), mesmo quando você não aplicou nenhum CSS! Isso pode soar como uma má ideia, mas queremos ter uma legibilidade básica, mesmo em uma página sem estilos. Para nos livrarmos desse espaço, sobrescrevemos o estilo padrão, definindo <code>margin: 0;</code>.</p>
+
+<p>Em seguida, definimos o padding das partes superior e inferior do cabeçalho para 20 pixels e fizemos o texto do cabeçalho da mesma cor que a cor de fundo do HTML.</p>
+
+<p>Uma propriedade bastante interessante que usaremos aqui é o <code>text-shadow</code>, que aplica uma sombra ao conteúdo de texto do elemento. Seus quatro valores são os seguintes:</p>
+
+<ul>
+ <li>O primeiro valor em pixel define o <strong>deslocamento horizontal </strong>da sombra do texto — até onde ele se move: um valor negativo deve movê-la para a esquerda.</li>
+ <li>O segundo valor em pixel define o <strong>deslocamento vertical</strong> da sombra do texto — o quanto ela se move para baixo, neste exemplo; um valor negativo deve movê-la para cima.</li>
+ <li>O terceiro valor em pixel define o <strong>raio de desfoque</strong> da sombra — um valor maior significará uma sombra mais borrada.</li>
+ <li>O quarto valor define a cor base da sombra.</li>
+</ul>
+
+<p>De novo, tente experimentar com diferentes valores para ver o que você pode criar!</p>
+
+<h3 id="Centralizando_a_imagem">Centralizando a imagem</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Finalmente, centralizaremos a imagem para melhorar a aparência. Nós poderiamos usar novamente o truque <code>margin: 0 auto</code> que aprendemos anteriormente para o corpo, mas também precisamos fazer outra coisa. O elemento {{htmlelement ("body")}} é <strong>em nível de bloco</strong>, o que significa que ocupa espaço na página e pode ter margens e outros valores de espaçamento aplicados a ele. Imagens, por outro lado, são elementos<strong> em linha</strong>, o que significa que não podem ter margens. Então, para aplicar margens a uma imagem, temos que dar o comportamento de nível de bloco a imagem usando <code>display: block;</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: As instruções acima assumem que você está usando uma imagem menor que a largura definida no corpo (600 pixels). Se sua imagem for maior, ela irá transbordar o corpo e vazar para o restante da página. Para corrigir isso, você pode 1) reduzir a largura da imagem usando um <a href="https://en.wikipedia.org/wiki/Raster_graphics_editor">editor gráfico</a> (em inglês) ou 2) dimensionar a imagem usando CSS definindo a propriedade {{cssxref ("width")}} no elemento <code>&lt;img&gt;</code> com um valor menor (por exemplo, <code>400 px;</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Não se preocupe se você ainda não entender <code>display: block;</code> ou a distinção entre em nível de bloco / em linha. Você entenderá ao estudar CSS com mais profundidade. Você pode descobrir mais sobre os diferentes valores de exibição disponíveis em nossa <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/display">página de referência sobre display</a>.</p>
+</div>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Se você seguiu todas as instruções desse artigo, você deve terminar com uma página parecida com essa (você também pode <a href="http://mdn.github.io/beginner-html-site-styled/">ver nossa versão aqui</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Se você emperrar, sempre poderá comparar seu trabalho com nosso código de <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">exemplo finalizado no Github</a>.</p>
+
+<p>Aqui, nós só arranhamos na superfície do CSS. Para descobrir mais, vá ao nosso <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS">tópico de aprendizado CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..a2d477a698
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,115 @@
+---
+title: Lidando com arquivos
+slug: Aprender/Getting_started_with_the_web/lidando_com_arquivos
+tags:
+  - Arquivos
+  - Codificação de Scripts
+  - Guía
+  - HTML
+  - Iniciante
+  - Site
+  - 'l10:prioridade'
+  - teoria
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Um site consiste de muitos arquivos: conteúdo em texto, código, folhas de estilo, conteúdo em mídia e por aí vai. Ao criar um site, você precisa reunir esses arquivos em uma certa estrutura no computador local, certificar-se de que eles possam se comunicar e obter todo o conteúdo antes de <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">enviá-los para o servidor</a>. <em>Lidando com Arquivos</em> discute algumas questões às quais você deve estar ciente para que você possa configurar uma estrutura de arquivos para o seu site.</p>
+</div>
+
+<h2 id="Onde_seu_site_deve_residir_no_seu_computador">Onde seu site deve residir no seu computador?</h2>
+
+<p>Quando você está trabalhando em um site localmente no seu próprio computador, você deve manter todos os arquivos relacionados em uma mesma pasta que reflete a estrutura dos arquivos do site publicado em um servidor. Essa pasta pode estar em qualquer lugar que você quiser, mas você deve colocá-la em algum lugar de fácil acesso, talvez no Desktop, na sua pasta Home, ou na raiz do seu HD.</p>
+
+<ol>
+ <li>Escolha um lugar para guardar seus projetos de site. Aqui, crie uma nova pasta chamada <code>projetos-web</code> (ou algo do tipo). Essa é a pasta onde todos seus projetos de site estarão.</li>
+ <li>Dentro dessa pasta, crie outra pasta para guardar seu primeiro site. Chame ela de <code>site-teste</code> (ou algo mais criativo).</li>
+</ol>
+
+<h2 id="Deixando_de_lado_as_maiúsculas_e_espaços">Deixando de lado as maiúsculas e espaços</h2>
+
+<p>Você vai perceber no decorrer desse artigo que nós pedimos para que você nomeie pastas e arquivos completamente em letras minúsculas e sem espaços. Isso acontece porque:</p>
+
+<ol>
+ <li>Muitos computadores, particularmente servidores web, são case-sensitive. Então, por exemplo, se você colocar uma imagem no seu site em <code><span style="font-family: consolas,monaco,andale mono,monospace;">site-teste</span>/MyImage.jpg</code>, e então em um outro arquivo você tentar chamar <code><span style="font-family: consolas,monaco,andale mono,monospace;">site-teste</span>/myimage.jpg</code>, não vai funcionar.</li>
+ <li>Navegadores, servidores web e linguagens de programação não lidam bem com espaços. Por exemplo, se você usa espaços no nome do seu arquivo, alguns sistemas vão tratar o nome do arquivo como dois nomes. Alguns servidores vão substituir os espaços no nome do arquivo por "%20" (o código para espaço em URLs), quebrando seus links. É melhor separar palavras com traços, em vez de sublinhado: <code> meu-arquivo.html</code> vs. <code>meu_arquivo.html</code>.</li>
+</ol>
+
+<p>A resposta curta é que você deve usar um hífen para os nomes dos arquivos. O mecanismo de pesquisa do Google trata um hífen como separador de palavras, mas não considera um sublinhado dessa maneira. Por esses motivos, é melhor criar o hábito de escrever sua pasta e nomes de arquivos em letras minúsculas, sem espaços e com palavras separadas por traços, pelo menos até você saber o que está fazendo. Dessa forma, você encontrará menos problemas no futuro.</p>
+
+<h2 id="Qual_estrutura_seu_site_deve_ter">Qual estrutura seu site deve ter?</h2>
+
+<p>A seguir, vamos ver qual estrutura seu site teste deve ter. As coisas mais comuns que temos em qualquer projeto de site que criamos são um arquivo de índice HTML e pastas que contém imagens, arquivos de estilo e arquivos de scripts. Vamos criá-los agora:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Esse arquivo vai geralmente conter o conteúdo da sua página, ou seja, os textos e as imagens que as pessoas veem quando acessam seu site pela primeira vez. Usando seu editor de texto, crie um novo arquivo chamado <code>index.html</code> e salve dentro da sua pasta <code>site-teste</code>.</li>
+ <li><strong>pasta <code>imagens</code></strong>: Essa pasta vai conter todas as imagens que você vai usar no seu site. Crie uma pasta chamada <code>imagens</code>, dentro da sua pasta <code>site-teste</code>.</li>
+ <li><strong>pasta <code>estilos</code></strong>: Essa pasta vai conter os códigos CSS usados para dar estilo ao seu conteúdo (por exemplo, configurando a cor do texto e do fundo da página). Crie uma pasta chamada <code>estilos</code>, dentro da pasta <code>site-teste</code>.</li>
+ <li><strong>pasta <code>scripts</code></strong>: Essa pasta vai conter todos os códigos JavaScript usados para adicionar funcionalidades interativas para seu site (ex.: botões que carregam dados quando clicados). Crie uma pasta chamada <code>scripts</code>, dentro da sua pasta <code>site-teste</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Em computadores com Windows, você deve ter problemas para ver os nomes dos arquivos, porque o Windows tem uma opção chamada <strong>Ocultar as extensões dos tipos de arquivo conhecidos</strong> ativada por padrão. Geralmente você pode desativar essa opção indo no Windows Explorer, selecionando a opção <strong>Opções de pasta...</strong>, desmarque a caixa de seleção <strong>Ocultar as extensões dos tipos de arquivo conhecidos</strong>, e clique em <strong>OK</strong>. Para mais informação sobre sua versão de Windows, procure na web.</p>
+</div>
+
+<h2 id="Caminhos_de_arquivo">Caminhos de arquivo</h2>
+
+<p>Para fazer arquivos conversarem entre si, você tem que fornecer um caminho de arquivo entre eles — basicamente uma rota para que um arquivo saiba onde o outro está. Para demonstrar isso, nós vamos inserir um pouco de HTML no nosso arquivo <code>index.html</code>, e fazer mostrar a imagem que você escolheu no artigo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"</a><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a><a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"</a></p>
+
+<ol>
+ <li>Copie a imagem que você escolheu antes para sua pasta <code>imagens</code>.</li>
+ <li>Abra seu arquivo <code>index.html</code> e insira o seguinte código exatamente como está escrito. Não se preocupe com o significado — nós vamos olhar com mais detalhes essa estrutura posteriormente.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Minha página de teste&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="Minha imagem de teste"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>A linha <code>&lt;img src="" alt="Minha imagem de teste"&gt;</code> é o código HTML que vai inserir uma imagem na página. Nós precisamos dizer ao HTML onde a imagem está. A imagem está dentro da pasta <em>imagens</em>, no mesmo diretório do <code>index.html</code>. Para trilhar o caminho de <code>index.html</code> para nossa imagem, o caminho é <code>imagens/nome-da-sua-imagem</code>. Por exemplo, nossa imagem é chamada <code>firefox-icon.png</code>, então, nosso caminho é <code>imagens/firefox-icon.png</code>.</li>
+ <li>Insira o caminho dentro do seu código HTML, dentro das aspas do código <code>src=""</code>.</li>
+ <li>Salve seu arquivo HTML, então carregue em seu navegador web (dê um duplo-clique no arquivo). Você deve ver sua nova página mostrando sua imagem!</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Algumas regras gerais para caminhos de arquivo:</p>
+
+<ul>
+ <li>Para linkar para um arquivo no mesmo diretório do arquivo HTML, apenas use o nome do arquivo, ex.: <code>my-image.jpg</code>.</li>
+ <li>Para linkar um arquivo em um sub-diretório, escreva o nome do diretório na frente, mais uma barra, ex.: <code>subdirectory/my-image.jpg</code>.</li>
+ <li>Para linkar um arquivo <strong>acima </strong>do arquivo HTML, use dois pontos. Então, por exemplo, se <code>index.html</code> estiver dentro de uma subpasta de <code>site-teste</code> e <code>my-image.png</code> estiver dentro de <code>site-teste</code>, você pode fazer referência a <code>my-image.png</code> em <code>index.html</code> usando <code>../my-image.png</code>.</li>
+ <li>Você pode combinar isso como preferir, por exemplo <code>../subdiretorio/outro-subdiretorio/my-image.png</code>.</li>
+</ul>
+
+<p>Por agora, isso é tudo o que precisamos saber.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: O sistema de arquivos do Windows tende a usar barras invertidas, não barras normais , ex.: <code>C:\windows</code>. Isso não importa — mesmo se você estiver desenvolvendo seu site no Windows, você ainda deve usar barras normais no seu código.</p>
+</div>
+
+<h2 id="O_que_mais_deve_ser_feito">O que mais deve ser feito?</h2>
+
+<p>Por agora, é isso. Sua pasta deve parecer algo do tipo:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;">{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Javascript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..cf911dafc5
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -0,0 +1,110 @@
+---
+title: Como a Web funciona
+slug: Aprender/Getting_started_with_the_web/Como_a_Web_funciona
+tags:
+  - Aprender
+  - Cliente
+  - DNS
+  - HTTP
+  - IP
+  - Infraestrutura
+  - Iniciante
+  - Servidor
+  - TCP
+  - 'l10n:prioridade'
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<p>{{LearnSidebar}}</p>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Como a Web funciona</em> oferece uma visão simplificada do que acontece quando você vê uma página em um navegador, no seu computador ou telefone.</p>
+</div>
+
+<p>Essa teoria não é essencial para escrever códigos em curto prazo, mas em pouco tempo você vai se beneficiar ao entender o que está acontecendo em segundo plano.</p>
+
+<h2 id="Clientes_e_servidores">Clientes e servidores</h2>
+
+<p>Computadores conectados à web são chamados <strong>clientes</strong> e <strong>servidores</strong>. Um diagrama simplificado de como eles interagem pode ter essa aparência:</p>
+
+<p><img alt="Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png"></p>
+
+<ul>
+ <li>Clientes são os típicos dispositivos conectados à internet dos usuários da web (por exemplo, seu computador conectado ao seu Wi-Fi ou seu telefone conectado à sua rede móvel) e programas de acesso à Web disponíveis nesses dispositivos (geralmente um navegador como Firefox ou Chrome).</li>
+ <li>Servidores são computadores que armazenam páginas, sites ou aplicativos. Quando o dispositivo de um cliente quer acessar uma página, uma cópia dela é baixada do servidor para a máquina do cliente para ser apresentada no navegador web do usuário.</li>
+</ul>
+
+<h2 id="As_outras_partes_da_caixa_de_ferramentas">As outras partes da caixa de ferramentas</h2>
+
+<p>O cliente e o servidor que descrevemos acima não contam toda a história. Existem muitas outras partes envolvidas, e vamos descrevê-las abaixo.</p>
+
+<p>Por enquanto, vamos imaginar que a web é uma estrada. Em um extremo da estrada, temos o cliente, que é como sua casa. No extremo oposto, temos o servidor, que é como uma loja onde você quer comprar algo.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Além do cliente e do servidor, também precisamos dizer oi para:</p>
+
+<ul>
+ <li><strong>Sua conexão de Internet</strong>: permite que você mande e receba dados na web. É basicamente como a rua entre sua casa e a loja.</li>
+ <li><strong>TCP/IP</strong>: Protocolo de Controle de Transmissão e Protocolo de Internet (<em>Transmission Control Protocol</em> e <em>Internet Protocol</em>) são protocolos de comunicação que definem como os dados trafegam pela web. São como os mecanismos de transporte que te permitem ir ao shopping, fazer um pedido e comprar seus produtos. Em nosso exemplo, é como um carro ou uma bicicleta (ou qualquer outra coisa que você possa usar).</li>
+ <li><strong>DNS</strong>: Servidor de Nome de Domínio (<em>Domain Name Servers</em>) são como um catálogo de endereços para sites. Quando você digita um endereço web no seu navegador, o navegador procura no servidor de DNS para localizar o endereço real do site, antes que ele possa recuperar o site. O navegador precisa encontrar em qual servidor web a página está hospedada para que ele possa mandar mensagens HTTP ao lugar certo (veja abaixo). Isso é como pesquisar o endereço da loja para que você possa entrar em contato.</li>
+ <li><strong>HTTP</strong>: Protocolo de Transferência de Hypertexto (<em>Hypertext Transfer Protocol</em>) é um {{Glossary("Protocol" , "protocolo de aplicação")}} que define uma linguagem para clientes e servidores se comunicarem entre si. É como a linguagem que você usa para encomendar seus produtos.</li>
+ <li><strong>Arquivos componentes</strong>: um website é feito de muitos arquivos diferentes, que são como as diferentes partes dos produtos que você comprou na loja. Esses arquivos são divididos em dois tipos principais:
+  <ul>
+   <li><strong>Arquivos de Código</strong>: os sites são feitos principalmente de HTML, CSS e JavaScript, embora você possa conhecer outras tecnologias mais tarde.</li>
+   <li><strong>Recursos</strong>: esse é o nome coletivo para todas as outras coisas que compõem um site, como imagens, música, vídeos, documentos do Word e PDFs.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Então_o_que_acontece_exatamente">Então, o que acontece, exatamente?</h2>
+
+<p>Quando você digita um endereço da web no seu navegador (pela nossa analogia é como ir andando até a loja):</p>
+
+<ol>
+ <li>O navegador vai para o servidor de DNS e encontra o endereço verdadeiro de onde o site está hospedado (você encontra o endereço da loja).</li>
+ <li>O navegador manda uma mensagem de requisição HTTP para o servidor, pedindo que envie uma cópia do site ao cliente (você vai até a loja e pede suas mercadorias). Esta mensagem e todos os outros dados enviados entre o cliente e o servidor são enviados pela sua conexão à internet usando TCP/IP.</li>
+ <li>Se o servidor aprovar a requisição do cliente, o servidor enviará ao cliente uma mensagem "200 OK", que significa "Claro que você pode ver esse site! Aqui está" e então começa a enviar os arquivos do site para o navegador como uma série de pequenos pedaços chamados pacotes de dados (a loja dá a você as suas mercadorias e você as traz para sua casa).</li>
+ <li>O navegador monta os pequenos pedaços em um site completo e o mostra a você (as mercadorias chegam à sua porta — novas coisas brilhantes e incríveis!).</li>
+</ol>
+
+<h2 id="DNS_explicado">DNS explicado</h2>
+
+<p>Endereços web verdadeiros não são sequências de textos boas e fáceis de lembrar que você digita na sua barra de endereços para encontrar seus sites favoritos. Eles são números especiais que se parecem com isso: <code>63.245.215.20</code>.</p>
+
+<p>Isso é chamado {{Glossary("IP Address", "endereço IP")}} e representa um local único na web. No entanto, não é muito fácil de lembrar, é? É por isso que o Servidor de Nome de Domínio foi inventado. Esses são servidores especiais que relacionam o endereço da web que você digita no seu navegador (como "mozilla.org") com o endereço real do site (IP).</p>
+
+<p>Sites podem ser acessados diretamente pelo seu endereço IP. Você pode encontrar o endereço IP de um site, digitando seu domínio em uma ferramenta como o <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
+
+<h2 id="Pacotes_explicados">Pacotes explicados</h2>
+
+<p>Anteriormente, usamos o termo "pacotes" para descrever o formato no qual os dados são enviados do servidor para o cliente. O que nós queremos dizer? Basicamente, quando os dados são enviados pela web, eles são enviados como milhares de pequenos blocos, para que muitos usuários diferentes possam baixar o mesmo site ao mesmo tempo. Se os websites fossem enviados como um grande bloco, somente um usuário por vez poderia baixá-los, o que, obviamente, tornaria a web muito ineficiente e não muito divertida de usar.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona">Como a Internet funciona</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — uma Aplicação a Nível de Protocolo</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Vamos Começar!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Códigos de resposta</a></li>
+</ul>
+
+<h2 id="Créditos">Créditos</h2>
+
+<p>Foto da rua: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, por <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..534fc5b9c9
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,239 @@
+---
+title: HTML básico
+slug: Aprender/Getting_started_with_the_web/HTML_basico
+tags:
+  - Aprender
+  - Codificação de Scripts
+  - HTML
+  - Iniciante
+  - Web
+  - 'l10:prioridade'
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (Linguagem de Marcação de Hipertexto) é o código que você usa para estruturar uma página web e seu conteúdo. Por exemplo, o conteúdo pode ser estruturado em parágrafos, em uma lista com marcadores ou usando imagens e tabelas. Como o título sugere, este artigo fornecerá uma compreensão básica do HTML e suas funções.</p>
+</div>
+
+<h2 id="Então_o_que_é_HTML">Então, o que é HTML?</h2>
+
+<p>HTML não é uma linguagem de programação; é uma <em>linguagem de marcação</em>, usada para definir a estrutura do seu conteúdo. HTML consiste de uma série de <strong>{{Glossary("element", "elementos")}}</strong>, que você usa para delimitar ou agrupar diferentes partes do conteúdo para que ele apareça ou atue de determinada maneira. As {{Glossary ("tag", "tags")}} anexas podem transformar uma palavra ou imagem num hiperlink, pode colocar palavras em itálico, pode aumentar ou diminuir a fonte e assim por diante. Por exemplo, veja a seguinte linha de conteúdo:</p>
+
+<pre class="notranslate">Meu gatinho é muito mal humorado</pre>
+
+<p>Se quiséssemos que a linha permanecesse por si só, poderíamos especificar que é um parágrafo colocando-a em uma tag de parágrafo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meu gatinho é muito mal humorado&lt;/p&gt;</pre>
+
+<h3 id="Anatomia_de_um_elemento_HTML">Anatomia de um elemento HTML</h3>
+
+<p>Vamos explorar esse parágrafo mais profundamente.</p>
+
+<p><img alt="Imagem mostrando como funciona a tag P" src="https://i.imgur.com/rgZBXCd.png" style="height: 255px; width: 821px;"></p>
+
+<p>As principais partes de um elemento são:</p>
+
+<ol>
+ <li>A<strong> tag de abertura</strong>: Consiste no nome do elemento (no caso, p), envolvido em <strong>parênteses angulares</strong> de abertura e fechamento. Isso demonstra onde o elemento começa, ou onde seu efeito se inicia — nesse caso, onde é o começo do parágrafo.</li>
+ <li>A <strong>tag de fechamento</strong>: Isso é a mesma coisa que a tag de abertura, exceto que inclui uma barra antes do nome do elemento. Isso demonstra onde o elemento acaba — nesse caso, onde é o fim do parágrafo. Esquecer de incluir uma tag de fechamento é um dos erros mais comuns de iniciantes e pode levar a resultados estranhos.</li>
+ <li>O <strong>conteúdo</strong>: Esse é o conteúdo do elemento, que nesse caso é apenas texto.</li>
+ <li>O <strong>elemento</strong>: A tag de abertura, a de fechamento, e o conteúdo formam o elemento.</li>
+</ol>
+
+<p>Elementos também podem ter atributos, que parecem assim:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Atributos contém informação extra sobre o elemento que você não quer que apareça no conteúdo real. Aqui, <code>class</code> é o nome do atributo e <code>editor-note</code> é o valor do atributo. O atributo <code>class</code> permite que você forneça ao elemento um identificador que possa ser usado posteriormente para aplicar ao elemento informações de estilo e outras coisas.</p>
+
+<p>Um atributo sempre deve ter:</p>
+
+<ol>
+ <li>Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já tiver um).</li>
+ <li>O nome do atributo, seguido por um sinal de igual.</li>
+ <li>Aspas de abertura e fechamento, envolvendo todo o valor do atributo.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Valores de atributos simples que não contém espaço em branco ASCII (ou qualquer um dos caracteres <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> <code>&gt;</code>) podem permanecer sem aspas, mas é recomendável colocar em todos os valores de atributos, pois isso torna o código mais consistente e compreensível.</p>
+</div>
+
+<h3 id="Aninhando_elementos">Aninhando elementos</h3>
+
+<p>Você pode colocar elementos dentro de outros elementos também — isso é chamado de <strong>aninhamento</strong>. Se quiséssemos afirmar que nosso gato é <strong>muito </strong>mal-humorado, poderíamos envolver a palavra "muito" em um elemento {{htmlelement ("strong")}}, o que significa que a palavra deve ser fortemente enfatizada:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meu gatinho é &lt;strong&gt;muito&lt;/strong&gt; mal humorado.&lt;/p&gt;</pre>
+
+<p>Você precisa, no entanto, certificar-se de que seus elementos estejam adequadamente aninhados. No exemplo acima, abrimos primeiro o elemento {{htmlelement ("p")}}, depois o elemento {{htmlelement ("strong")}}; portanto, temos que fechar primeiro o elemento {{htmlelement ("strong")}}, depois o elemento {{htmlelement ("p")}}. O código abaixo está incorreto:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Meu gatinho é &lt;strong&gt;muito mal humorado.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Os elementos precisam ser abertos e fechados corretamente para que eles estejam claramente visíveis dentro ou fora um do outro. Se eles se sobrepuserem conforme mostrado acima, seu navegador tentará adivinhar o que você estava tentando dizer, o que pode levar a resultados inesperados. Então não faça isso!</p>
+
+<h3 id="Elementos_vazios">Elementos vazios</h3>
+
+<p>Alguns elementos não possuem conteúdo e são chamados de <strong>elementos vazios</strong>. Considere o elemento {{htmlelement("img")}} que temos na nossa página HTML:</p>
+
+<pre class="brush: html notranslate">&lt;img src="imagens/firefox-icon.png" alt="Minha imagem de teste"&gt;</pre>
+
+<p>Ele contém dois atributos, mas não há tag <code>&lt;/img&gt;</code> de fechamento, e não há conteúdo interno. Isso acontece porque um elemento de imagem não envolve conteúdo para ter efeito em si mesmo. Sua proposta é incorporar uma imagem na página HTML no lugar que o código aparece.</p>
+
+<h3 id="Anatomia_de_um_documento_HTML">Anatomia de um documento HTML</h3>
+
+<p>Isso resume o básico dos elementos HTML individuais, mas eles não são úteis por si só. Agora vamos ver como elementos individuais são combinados para formar uma página HTML inteira. Vamos visitar novamente os códigos que colocamos no exemplo de <code>index.html</code> (que vimos no artigo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a>):</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Minha página de teste&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="imagens/firefox-icon.png" alt="minha página de teste"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Aqui nós temos:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — o doctype. É a parte inicial obrigatória do documento. Nas névoas do tempo, quando o HTML era novo (por volta de 1991/2), doctypes eram criados para agir como links para um conjunto de regras que a página HTML tinha que seguir para ser considerada um bom HTML, o que poderia significar checagem automática de erros e outras coisas úteis. No entanto, atualmente, eles não fazem muito sentido e são basicamente necessários apenas para garantir que o documento se comporte corretamente. Isso é tudo que você precisa saber agora.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — o elemento {{htmlelement("html")}}. Esse elemento envolve todo o conteúdo da página e às vezes é conhecido como o elemento raiz.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — o elemento {{htmlelement("head")}}. Esse elemento age como um recipiente de tudo o que você deseja incluir em uma página HTML que <em>não é</em> o conteúdo que você quer mostrar para quem vê sua página. Isso inclui coisas como {{Glossary("keyword", "palavras-chave")}} e uma descrição que você quer que apareça nos resultados de busca, CSS para dar estilo ao conteúdo, declarações de conjuntos de caracteres e etc.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — esse elemento define o conjunto de caracteres que seu documento deve usar para o UTF-8, que inclui praticamente todos os caracteres da grande maioria dos idiomas escritos. Essencialmente, agora ele pode manipular qualquer conteúdo textual que você possa colocar. Não há razão para não definir isso e assim pode ajudar a evitar alguns problemas no futuro.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — o elemento {{htmlelement ("title")}}. Ele define o título da sua página, que é o título que aparece na guia do navegador onde sua página é carregada. Ele também é usado para descrever a página quando você a adiciona aos favoritos.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — o elemento {{htmlelement("body")}}. Contém <em>todo</em> o conteúdo que você quer mostrar ao público que visita sua página, seja texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis ou qualquer outra coisa.</li>
+</ul>
+
+<h2 id="Imagens">Imagens</h2>
+
+<p>Vamos voltar nossa atenção para o elemento {{htmlelement("img")}} novamente:</p>
+
+<pre class="brush: html notranslate">&lt;img src="imagens/firefox-icon.png" alt="Minha imagem de teste"&gt;</pre>
+
+<p>Como dissemos antes, isso incorpora uma imagem na nossa página na posição que aparece. Isso é feito pelo atributo <code>src</code> (<em>source</em>), que contém o caminho para nosso arquivo de imagem.</p>
+
+<p>Incluímos também um atributo <code>alt</code> (<em>alternative</em>). Neste atributo, você especifica um texto descritivo para usuários que não podem ver a imagem, possivelmente devido aos seguintes motivos:</p>
+
+<ol>
+ <li>Eles são deficientes visuais. Usuários com deficiências visuais significativas costumam usar ferramentas chamadas leitores de tela para ler o texto alternativo para eles.</li>
+ <li>Algo deu errado, fazendo com que a imagem não seja exibida. Por exemplo, tente alterar deliberadamente o caminho dentro do atributo <code>src</code> para torná-lo incorreto. Se você salvar e recarregar a página, você deve ver algo assim no lugar da imagem:</li>
+</ol>
+
+<p><img alt="" src="https://i.imgur.com/35Rirpx.png" style="display: block; height: 38px; margin: 0px auto; width: 191px;"></p>
+
+<p>As palavras-chave para o texto alternativo são "texto descritivo". O texto alternativo que você escreve deve fornecer ao leitor informações suficientes para ter uma boa ideia do que a imagem mostra. Neste exemplo, nosso texto "Minha imagem teste" não é bom para todos. Uma alternativa muito melhor para o nosso logotipo do Firefox seria "A logo do Firefox: uma raposa em chamas envolvendo a Terra."</p>
+
+<p>Tente criar um texto alternativo melhor para sua imagem agora.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Saiba mais sobre acessibilidade em <a href="https://developer.mozilla.org/pt-BR/docs/Web/Acessibilidade">módulo de aprendizagem sobre acessibilidade.</a></p>
+</div>
+
+<h2 id="Marcando_o_texto">Marcando o texto</h2>
+
+<p>Essa seção abordará alguns dos elementos HTML essenciais que você usará para marcar o texto.</p>
+
+<h3 id="Cabeçalhos">Cabeçalhos</h3>
+
+<p>Os elementos de cabeçalhos permitem especificar que certas partes do seu conteúdo são títulos ou subtítulos. Da mesma forma que um livro tem o título principal e os capítulos possuem títulos e subtítulos, um documento HTML também tem. HTML contém 6 níveis de título, {{htmlelement ("h1")}} - {{htmlelement ("h6")}}, embora você normalmente só use de 3 a 4:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Meu título principal&lt;/h1&gt;
+&lt;h2&gt;Meu título de alto nível&lt;/h2&gt;
+&lt;h3&gt;Meu subtítulo&lt;/h3&gt;
+&lt;h4&gt;Meu segundo subtítulo&lt;/h4&gt;</pre>
+
+<p>Agora, tente adicionar um título adequado à sua página HTML logo acima do elemento {{htmlelement("img")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados ​​para <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">acessibilidade</a> e <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">outros motivos, como SEO</a>. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.</p>
+</div>
+
+<h3 id="Parágrafo">Parágrafo</h3>
+
+<p>Como explicado acima, os elementos {{htmlelement ("p")}} são para conter parágrafos de texto; você os usará com frequência ao marcar um conteúdo de texto regular:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Este é um parágrafo simples&lt;/p&gt;</pre>
+
+<p>Adicione seu texto de exemplo (você o obteve em <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer"><em>Como será o seu site?</em></a>) Em um ou alguns parágrafos, colocados diretamente abaixo do seu elemento {{htmlelement ("img")}}.</p>
+
+<h3 id="Listas">Listas</h3>
+
+<p>Muito do conteúdo da web é de listas e o HTML tem elementos especiais para elas. Listas de marcação sempre consistem em pelo menos 2 elementos. Os tipos mais comuns de lista são ordenadas e não ordenadas:</p>
+
+<ol>
+ <li><strong>Listas não ordenadas</strong> são para listas onde a ordem dos itens não importa, como uma lista de compras, por exemplo. Essas são envolvidas em um elemento {{htmlelement("ul")}}.</li>
+ <li><strong>Listas Ordenadas</strong> são para listas onde a ordem dos itens importa, como uma receita. Essas são envolvidas em um elemento {{htmlelement("ol")}}.</li>
+</ol>
+
+<p>Cada item dentro das listas é posto dentro de um elemento {{htmlelement("li")}} (item de lista).</p>
+
+<p>Por exemplo, se nós quisermos tornar uma parte de um parágrafo numa lista: </p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Na Mozilla, somos uma comunidade global de tecnólogos, pensadores e construtores trabalhando juntos ... &lt;/p&gt;</pre>
+
+<p>Nós podemos fazer assim:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Na Mozilla, somos uma comunidade global de&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;tecnólogos&lt;/li&gt;
+  &lt;li&gt;pensadores&lt;/li&gt;
+  &lt;li&gt;construtores&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;trabalhando juntos ... &lt;/p&gt;</pre>
+
+<p>Tente adicionar uma lista ordenada ou não ordenada à sua página de exemplo.</p>
+
+<h2 id="Links">Links</h2>
+
+<p>Links são muito importantes — eles são o que faz da web ser de fato uma REDE! Para adicionar um link, precisamos usar um elemento simples — {{htmlelement ("a")}} — "a" é a forma abreviada de "âncora". Para transformar o texto do seu parágrafo em um link, siga estas etapas:</p>
+
+<ol>
+ <li>Escolha algum texto. Nós escolhemos o texto "Mozilla Manifesto".</li>
+ <li>Envolva o texto em um elemento {{htmlelement("a")}} , assim:
+  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Dê ao elemento &lt;a&gt; um atributo href, assim:
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Preencha o valor desse atributo com o endereço da Web que você deseja vincular o link:
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/pt-BR/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Você pode obter resultados inesperados se omitir a parte <code>https://</code> ou o <code>http://</code>, o chamado <em>protocolo</em>, no começo do endereço web. Então depois de criar um link, clique nele para ter certeza de que ele está indo para onde você deseja.</p>
+
+<div class="note">
+<p><code>href</code> pode parecer, numa primeira impressão, uma escolha obscura para um nome de atributo. Se você está tendo problemas para lembrar do nome, lembre que significa <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>. (referência em hipertexto)</p>
+</div>
+
+<p>Adicione um link em sua página agora, se ainda não tiver feito isso.</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Se você seguiu todas as instruções neste artigo, você deve terminar com uma página que pareça algo do tipo (você também pode <a href="http://mdn.github.io/beginner-html-site/">vê-la aqui</a>):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Se você ficar emperrado, pode sempre comparar seu trabalho com nosso <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">código de exemplo finalizado</a> no Github.</p>
+
+<p>Aqui, nós só arranhamos na superfície do HTML. Para descobrir mais, vá a nossa <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML">Estruturando a web com HTML</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Javascript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/index.html b/files/pt-br/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..ac40c9ed36
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,65 @@
+---
+title: Introdução à Web
+slug: Aprender/Getting_started_with_the_web
+tags:
+  - CSS
+  - Design
+  - Guía
+  - HTML
+  - Iniciante
+  - 'l10:prioridade'
+  - publicação
+  - teoria
+  - Índice
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Introdução à Web</em> é uma série concisa que apresenta os aspectos práticos do desenvolvimento web. Você configurará as ferramentas necessárias para construir uma página web simples e publicará seu próprio código.</p>
+</div>
+
+<h2 id="A_história_do_seu_primeiro_website">A história do seu primeiro website</h2>
+
+<p>É muito trabalhoso criar um site profissional, então se você é um iniciante em desenvolvimento web, nós encorajamos você a começar pequeno. Você não vai construir outro Facebook imediatamente, mas não é difícil colocar seu próprio site online, então vamos começar por aí.</p>
+
+<p>Por meio dos artigos listados abaixo, você vai sair do nada e vai construir sua primeira página online. Vamos lá!</p>
+
+<h3 id="Instalando_os_programas_básicos"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></h3>
+
+<p>Quando se trata de ferramentas para construir um site, há muito a se escolher. Se você está começando, pode ficar confuso com a variedade de editores de código, frameworks e ferramentas de teste existentes. Em <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a> nós vamos te mostrar passo a passo como instalar apenas o software necessário para começar o desenvolvimento web básico.</p>
+
+<h3 id="Como_será_o_seu_site"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer/">Como será o seu site?</a></h3>
+
+<p>Antes de começar a escrever o código do seu site, você deve planejá-lo primeiro. Quais informações você vai disponibilizar? Quais fontes e cores você irá usar? Em <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será seu site?</a> Nós fornecemos um método simples que você pode seguir para planejar o conteúdo e design do seu site.</p>
+
+<h3 id="Lidando_com_arquivos"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></h3>
+
+<p>Um site consiste em muitos arquivos: conteúdo de texto, código, folhas de estilo, conteúdo de mídia etc. Ao criar um site, você precisa reunir esses arquivos em uma estrutura que faça sentido e garantir que eles possam se conectar. <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a> explica como configurar uma estrutura de arquivos para o seu site e sobre quais problemas você deve estar ciente.</p>
+
+<h3 id="HTML_básico"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></h3>
+
+<p>Linguagem de Marcação de Hypertexto (HTML - Hypertext Markup Language) é o código que você usa para estruturar seu conteúdo web, dando significado e propósito. Por exemplo, meu conteúdo é organizado em parágrafos, ou em uma lista de pontos? Eu tenho imagens na minha página? Eu tenho uma tabela de dados? Sem pressionar você, o <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a> provê informação suficiente para você se familiarizar com HTML.</p>
+
+<h3 id="CSS_básico"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></h3>
+
+<p>Folhas de Estilo em Cascata (CSS - Cascading Stylesheets) é o código que você usa para dar estilo ao seu site. Por exemplo, você quer que seu texto seja preto ou vermelho? Onde o conteúdo deve aparecer na tela? Quais imagens ou cores de fundo devem ser usadas para decorar seu site? <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a> provê o necessário para você começar.</p>
+
+<h3 id="JavaScript_básico"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></h3>
+
+<p>JavaScript é a linguagem de programação que você usa para adicionar recursos interativos ao seu site. Alguns exemplos podem ser jogos, coisas que acontecem quando botões são pressionados ou dados que são inseridos em formulários, efeitos dinâmicos de estilo, animação e muito mais. <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a> vai te dar uma ideia do que é possível com essa excitante linguagem de programação e como começar a usá-la.</p>
+
+<h3 id="Publicando_seu_site"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu site</a></h3>
+
+<p>Uma vez que você tenha acabado de escrever seu código e organizado os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo. <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu site</a> descreve como colocar seu código online com o mínimo de esforço.</p>
+
+<h3 id="Como_a_web_funciona"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></h3>
+
+<p>Quando você acessa seu site favorito, um monte de coisas complicadas acontecem em segundo plano que você pode não conhecer. <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a> mostra o que acontece quando você visualiza um site no seu computador.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Uma grande série de vídeos explicando os fundamentos da web, destinados a levar iniciantes ao desenvolvimento web. Criado por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>..</li>
+ <li><a href="/pt-BR/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">A web e seus padrões</a>: Este artigo fornece algumas informações úteis na Web - como surgiu, quais são as tecnologias padrão da Web, como elas funcionam juntas, por que "desenvolvedor da Web" é uma ótima carreira para escolher e que tipos de práticas recomendadas você aprenderá sobre o curso.</li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..0093c0a82d
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,80 @@
+---
+title: Instalando os programas básicos
+slug: Aprender/Getting_started_with_the_web/instalando_programas_basicos
+tags:
+  - Aprender
+  - Ferramentas
+  - Iniciante
+  - Mecânica da Web
+  - Navegador
+  - configuração
+  - editor de texto
+  - 'l10:prioridade'
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Em <em>Instalando os programas básicos</em>, mostraremos quais ferramentas você precisa para o desenvolvimento web simples e como instalá-los apropriadamente.</p>
+</div>
+
+<h2 id="Quais_ferramentas_os_profissionais_usam">Quais ferramentas os profissionais usam?</h2>
+
+<ul>
+ <li><strong>Um computador</strong>. Talvez isso soe óbvio para algumas pessoas, mas alguns de vocês estão lendo esse artigo de um smartphone ou de um computador público. Para um desenvolvimento sério em web, é melhor investir em um desktop ou notebook rodando Windows, macOS ou Linux.</li>
+ <li><strong>Um editor de texto</strong>, para escrever código. Pode ser um editor de texto (ex: <a href="https://code.visualstudio.com/">Visual Studio Code</a> (em inglês), <a href="https://notepad-plus-plus.org">Notepad++</a> (em inglês), <a href="https://www.sublimetext.com/">Sublime Text</a> (em inglês), <a href="https://atom.io/">Atom</a> (em inglês), <a href="http://brackets.io/">Brackets</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a> (em inglês) ou <a href="https://www.vim.org">VIM</a> (em inglês)), ou um editor hibrído (ex: <a href="https://www.adobe.com/br/products/dreamweaver.html">Dreamweaver </a>ou <a href="https://www.jetbrains.com/webstorm/">WebStorm</a> (em inglês)). Editores de documentos do Office não são adequados para esse tipo de uso, pois ele se baseiam em elementos escondidos que interferem com os motores de renderização usados pelos navegadores.</li>
+ <li><strong>Navegadores web</strong>, para testar os códigos. Atualmente os navegadores mais usados são <a href="https://www.mozilla.org/pt-BR/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/br/safari/">Safari</a>, <a href="https://support.microsoft.com/pt-br/help/17621/internet-explorer-downloads">Internet Explorer</a> e <a href="https://www.microsoft.com/pt-br/windows/microsoft-edge">Microsoft Edge</a>. Você também deve testar o desempenho do seu site em dispositivos móveis e navegadores antigos que seu público-alvo ainda esteja usando (como o IE 8–10). O <a href="https://lynx.browser.org/">Lynx</a>, um navegador da Web baseado em texto, é ótimo para ver como o site é experimentado por usuários com deficiência.</li>
+ <li><strong>Um editor gráfico</strong>, como o <a href="http://www.gimp.org/">GIMP</a> (em inglês), <a href="http://www.getpaint.net/">Paint.NET</a> (em inglês), <a href="https://www.adobe.com/br/products/photoshop.html">Photoshop</a>, or <a href="https://www.adobe.com/products/xd.html">XD</a> , para fazer imagens ou gráficos para suas páginas.</li>
+ <li><strong>Um sistema de controle de versão</strong>, para gerenciar arquivos em servidores, colaborar em um projeto com uma equipe, compartilhar códigos e ativos, e evitar conflitos de edição. Atualmente, o <a href="http://git-scm.com/">Git</a> (em inglês) é o sistema de controle de versão mais popular junto com o serviço de hospedagem <a href="https://github.com/">GitHub</a> (em inglês) ou <a href="https://gitlab.com">GitLab</a> (em inglês).</li>
+ <li><strong>Um programa de FTP</strong>, usado em contas de hospedagem web mais antigas para gerenciar arquivos em servidores (o <a href="git-scm.com">Git</a> está substituindo cada vez mais o FTP para esse propósito). Existem muitos programas de FTP disponíveis, incluindo o <a href="https://cyberduck.io">Cyberduck</a> (em inglês), o <a href="https://fetchsoftworks.com/">Fetch</a> (em inglês) e o <a href="https://filezilla-project.org">FileZilla</a> (em inglês).</li>
+ <li><strong>Um sistema de automação</strong>, como o <a href="http://gruntjs.com/">Grunt</a> (em inglês) ou o <a href="http://gulpjs.com/">Gulp</a> (em inglês), para realizar tarefas repetitivas automaticamente, como por exemplo minificar o código e executar testes.</li>
+ <li>Templates, bibliotecas, frameworks, etc., para acelerar a funcionalidade da escrita.</li>
+ <li>Além de mais ferramentas!</li>
+</ul>
+
+<h2 id="Quais_ferramentas_eu_realmente_preciso_nesse_momento">Quais ferramentas eu realmente preciso nesse momento?</h2>
+
+<p>Isso parece uma lista assustadora, mas felizmente, você pode começar a desenvolver web sem saber nada sobre a maioria deles. Neste artigo, vamos apenas configurá-lo com um mínimo  — um editor de texto e alguns navegadores modernos.</p>
+
+<h3 id="Instalando_um_editor_de_texto">Instalando um editor de texto</h3>
+
+<p>Você provavelmente já tem um editor de texto básico no seu computador. Por padrão, o Windows inclui o <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Bloco de Notas</a> (em inglês) e o Mac OS vem com o <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a> (em inglês). Linux varia; Ubuntu vem com o <a href="http://en.wikipedia.org/wiki/Gedit">gedit</a> (em inglês) por padrão.</p>
+
+<p>Para desenvolvimento web, você provavelmente pode ter mais do que o Bloco de Notas ou o TextEdit. Recomendamos começar com o <a href="https://code.visualstudio.com/">Visual Studio Code</a> (em inglês), que é um editor gratuito, que oferece visualizações ao vivo e dicas de código.</p>
+
+<h3 id="Instalando_navegadores_web_modernos">Instalando navegadores web modernos</h3>
+
+<p>Por enquanto, instalaremos alguns navegadores da Web para testar nosso código. Escolha seu sistema operacional abaixo e clique nos links relevantes para fazer o download dos instaladores dos seus navegadores favoritos:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/pt-BR/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/pt-BR/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://support.microsoft.com/pt-br/help/17621/internet-explorer-downloads">Internet Explorer</a>, <a href="https://www.microsoft.com/pt-br/windows/microsoft-edge">Microsoft Edge</a>, <a href="https://brave.com">Brave</a> (O Windows 10 vem com o Edge por padrão, se você tem o Windows 7 ou acima, você pode instalar o internet explorer 11; caso contrário, você deve instalar um navegador alternativo)</li>
+ <li>Mac: <a href="https://www.mozilla.org/pt-BR/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/br/safari/">Safari</a>, <a href="https://brave.com">Brave</a> (Safari vem no iOS e macOS por padrão)</li>
+</ul>
+
+<p>Antes de continuar, você deve instalar pelo menos dois desses navegadores e tê-los disponíveis para teste.</p>
+
+<div class="blockIndicator note">
+<p>O Internet Explorer não é compatível com alguns recursos modernos da web e pode não ser capaz de executar seu projeto.</p>
+</div>
+
+<h3 id="Instalando_um_servidor_web_local">Instalando um servidor web local</h3>
+
+<p>Alguns exemplos precisarão ser executados por um servidor web para funcionar com êxito. Você pode ver como fazer isso em <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_configurar_um_servidor_de_testes_local">Como eu configuro um servidor de teste localmente?</a></p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Com será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Javascript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu site</a></li>
+ <li id="How_the_web_works"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..a54cab793a
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,448 @@
+---
+title: JavaScript básico
+slug: Aprender/Getting_started_with_the_web/JavaScript_basico
+tags:
+  - Aprender
+  - Codificação de Script
+  - Iniciante
+  - JavaScript
+  - Web
+  - 'l10:prioridade'
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_fwith_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript é a linguagem de programação usada para adicionar interatividade ao seu site (por exemplo: jogos, respostas quando botões são pressionados ou dados são inseridos em formulários, estilo dinâmico, animações). Esse artigo ajuda você a começar com essa linguagem interessante e dá uma idéia do que é possível.</p>
+</div>
+
+<h2 id="O_que_é_JavaScript_realmente">O que é JavaScript, realmente?</h2>
+
+<p>{{Glossary("JavaScript")}} (abreviado como "JS") é uma {{Glossary("Dynamic programming language", "linguagem de programação dinâmica")}} cheia de recursos que quando aplicada em um documento {{Glossary("HTML")}}, pode fornecer interatividade dinâmica em sites. Foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Fundação Mozilla e da Corporação Mozilla.</p>
+
+<p>JavaScript é incrivelmente versátil e amigável ao iniciante. Com mais experiência, você poderá criar jogos, gráficos 2D e 3D animados, aplicativos abrangentes baseados em bancos de dados e muito mais!</p>
+
+<p>JavaScript em si é bastante compacto, mas muito flexível. Os desenvolvedores escreveram uma grande variedade de ferramentas sobre a linguagem JavaScript principal, desbloqueando uma grande quantidade de funcionalidades extras com o mínimo de esforço. Essas incluem:</p>
+
+<ul>
+ <li>Interfaces de programação de aplicativos no navegador ({{Glossary ("API", "APIs")}}) - APIs integradas em navegadores da Web, fornecendo funcionalidade como criar dinamicamente HTML e definir estilos CSS, coletar e manipular um fluxo de vídeo da webcam do usuário ou gerando gráficos 3D e amostras de áudio.</li>
+ <li>APIs de terceiros  — Permitem que os desenvolvedores incorporem funcionalidades em seus sites de outros provedores de conteúdo, como o Twitter ou o Facebook.</li>
+ <li>Estruturas e bibliotecas de terceiros — você pode aplicá-las ao seu HTML para permitir que você crie rapidamente sites e aplicativos.</li>
+</ul>
+
+<p>Como este artigo deve ser apenas uma introdução ao JavaScript, não vamos confundir você neste estágio, falando em detalhes sobre qual é a diferença entre a linguagem JavaScript principal e as diferentes ferramentas listadas acima. Você pode aprender tudo isso em detalhes mais tarde, em nossa <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript">área de aprendizado de JavaScript</a> e no restante do MDN.</p>
+
+<p>Abaixo, apresentaremos alguns aspectos da linguagem principal, e você também poderá brincar com alguns recursos da API do navegador. Divirta-se!</p>
+
+<h2 id="Um_exemplo_Olá_mundo">Um exemplo "Olá mundo"</h2>
+
+<p>A seção acima pode parecer realmente empolgante, e assim deve ser  — o JavaScript é uma das tecnologias mais ativas da Web e, à medida que você começa a usá-lo bem, seus sites entrarão em uma nova dimensão de poder e criatividade.</p>
+
+<p>No entanto, ficar confortável com o JavaScript é um pouco mais difícil do que ficar confortável com HTML e CSS. Você pode ter que começar pequeno e continuar trabalhando em pequenos passos consistentes. Para começar, mostraremos como adicionar alguns JavaScript básicos à sua página, criando um exemplo de "Olá mundo!" (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">o padrão em exemplos básicos de programação</a>).</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Se você não acompanhou o restante de nosso curso, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">faça o download desse código exemplo</a> e use-o como um ponto de partida.</p>
+</div>
+
+<ol>
+ <li>Primeiro, vá para o seu site de teste e crie uma nova pasta chamada <code>scripts</code>. Em seguida, dentro da nova pasta de scripts que você acabou de criar, crie um novo arquivo chamado <code>main.js</code>. Salve na sua pasta de <code>scripts</code>.</li>
+ <li>Em seguida, no seu arquivo <code>index.html</code>, insira o seguinte elemento em uma nova linha logo antes da tag de fechamento <code>&lt;/body&gt;</code>:
+  <pre class="brush: html notranslate">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Isso é basicamente a mesma coisa que o elemento {{htmlelement("link")}} para o CSS — ele aplica o JavaScript à página, para que ele tenha efeito no HTML (junto com o CSS e qualquer outra coisa na página).</li>
+ <li>Agora adicione o seguinte código no arquivo <code>main.js</code>:
+  <pre class="brush: js notranslate">const meuCabecalho = document.querySelector('h1');
+meuCabecalho.textContent = 'Ola mundo!';</pre>
+ </li>
+ <li>Por fim, verifique se os arquivos HTML e Javascript estão salvos e, em seguida, carregue o <code>index.html</code> no navegador. Você deve ver algo do tipo:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: A razão pela qual colocamos o elemento {{htmlelement("script")}} perto da parte inferior do arquivo HTML, é que o HTML é carregado pelo navegador na ordem em que ele aparece no arquivo. Se o JavaScript é carregado primeiro ele pode afetar o HTML abaixo dele, mas as vezes isso pode não funcionar, já que o JavaScript seria carregado antes do HTML em que ele deveria trabalhar. Portanto, colocar o JavaScript próximo à parte inferior da página HTML geralmente é um meio de corrigir isto, veja <a href="/pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript#Script_loading_strategies">Estratégias de carregamento de scripts</a>.</p>
+</div>
+
+<h3 id="O_que_aconteceu">O que aconteceu?</h3>
+
+<p>Seu texto de título foi alterado para "Hello world!" usando JavaScript. Você fez isso primeiro usando uma função chamada <code>{{domxref("Document.querySelector", "querySelector()")}}</code> para obter uma referência ao título e armazená-lo em uma variável chamada <code>meuCabecalho</code>. Isso é muito parecido ao que fizemos usando seletores CSS. Quando queremos fazer algo em um elemento, primeiro você precisa selecioná-lo.</p>
+
+<p>Depois disso, você define o valor da propriedade {{domxref ("Node.textContent", "textContent")}} para "Hello world!", na variável <code>meuCabecalho</code> (que representa o conteúdo do título).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Os dois recursos usados acima são partes da <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">API do Modelo de Objeto de Documento (DOM)</a>, que permite manipular documentos.</p>
+</div>
+
+<h2 id="Curso_intensivo_de_fundamentos_da_linguagem">Curso intensivo de fundamentos da linguagem</h2>
+
+<p>Vamos explicar alguns dos principais recursos da linguagem JavaScript, para dar a você um melhor entendimento de como tudo funciona. Vale a pena notar que esses recursos são comuns a todas as linguagens de programação, por isso, se você dominar esses fundamentos, estará no caminho certo para programar qualquer coisa!</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Nesse artigo, tente escrever linhas de código de exemplo no seu console JavaScript para ver o que acontece. Para mais detalhes sobre o console JavaScript, consulte <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">Descobrir as ferramentas do desenvolvedor do navegador</a>.</p>
+</div>
+
+<h3 id="Variáveis">Variáveis</h3>
+
+<p>{{Glossary("Variable", "Variáveis")}} são espaços na memória do computador onde você pode armazenar dados. Você começa declarando uma variável com a palavra-chave <code>var</code> (menos recomendado, se aprofunde mais para uma explicação) ou a palavra chave <code>let</code>, seguida por qualquer nome que você queira chamá-la:</p>
+
+<pre class="brush: js notranslate">let minhaVariavel;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Ponto-e-vírgula no fim de uma linha indica onde uma instrução termina; só é absolutamente necessário quando você precisa separar instruções em uma única linha. No entanto, algumas pessoas acreditam que é uma boa prática colocá-las no final de cada instrução. Existem outras regras para quando você deve ou não usá-las — consulte <a href="https://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Seu Guia para Ponto-e-Vírgula em Javascript</a> para mais detalhes.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode dar quase qualquer nome a uma variável, mas há algumas restrições (veja <a href="http://www.codelifter.com/main/tips/tip_020.shtml">esse artigo sobre regras de nomes de variáveis</a>). Se você não tem certeza, você pode <a href="https://mothereff.in/js-variables">conferir se sua variável tem um nome válido</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: JavaScript é case sensitive — <code>minhaVariavel</code> é  diferente de <code>minhavariavel</code>. Se você estiver tendo problemas no seu código, cheque seu casing!</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Para mais detalhes sobre a diferença entre <code>var</code> e <code>let</code>, veja<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let"> A diferença entre var e let</a>.</p>
+</div>
+
+<p>Depois de declarar uma variável, você pode dar a ela um valor:</p>
+
+<pre class="brush: js notranslate">minhaVariavel = 'Bob';</pre>
+
+<p>Você pode fazer as duas operações na mesma linha se você quiser:</p>
+
+<pre class="brush: js notranslate">let minhaVariavel = 'Bob';
+</pre>
+
+<p>Você pode retornar o valor chamando a variável pelo nome:</p>
+
+<pre class="brush: js notranslate">minhaVariavel;</pre>
+
+<p>Depois de dar à variável um valor, você pode mudá-lo:</p>
+
+<pre class="brush: js notranslate">let minhaVAriavel = 'Bob';
+minhaVariavel = 'Steve';</pre>
+
+<p>Note que as variáveis podem conter valores com diferentes <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Data_structures">tipos de dados</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variável</th>
+   <th scope="col">Explicação</th>
+   <th scope="col">Exemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Uma sequência de texto é conhecida como uma string. Para mostrar que o valor é uma string, você deve envolvê-la em aspas.</td>
+   <td><code>let minhaVariavel = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Um número. Números não tem aspas ao redor deles.</td>
+   <td><code>let minhaVariavel = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>
+    <p>Um valor verdadeiro ou falso. As palavras <code>true</code> e <code>false</code> são palavras-chaves especiais em JS e não precisam de aspas.</p>
+   </td>
+   <td><code>let minhaVariavel = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Uma estrutura que permite armazenar vários valores em uma única variável.</td>
+   <td><code>let minhaVariavel = [1,'Bob','Steve',10];</code><br>
+    Acesse cada item do array dessa maneira: <code>minhaVariavel[0]</code>, <code>minhaVariavel[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>Basicamente, qualquer coisa. Tudo em JavaScript é um objeto e pode ser armazenado em uma variável. Tenha isso em mente enquanto aprende.</td>
+   <td><code>let minhaVariavel = document.querySelector('h1');</code><br>
+    Todos os exemplos acima também.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Então, por que precisamos de variáveis? Bom, variáveis são necessárias para fazer qualquer coisa interessante em programação. Se os valores não pudessem mudar, então você não poderia fazer nada dinâmico, como personalizar uma mensagem de boas-vindas, ou mudar a imagem mostrada em uma galeria de imagens.</p>
+
+<h3 id="Comentários">Comentários</h3>
+
+<p>Os comentários são, essencialmente, pequenos trechos de texto que podem ser adicionados entre os códigos e são ignorados pelo navegador. Você pode colocar comentários no código JavaScript, assim como em CSS:</p>
+
+<pre class="brush: js notranslate">/*
+Tudo no meio é um comentário.
+*/</pre>
+
+<p>Se o seu comentário não tiver quebras de linha, é mais fácil colocá-lo depois de duas barras como esta:</p>
+
+<pre class="brush: js notranslate">// Isto é um comentário.</pre>
+
+<h3 id="Operadores">Operadores</h3>
+
+<p>Um <code>{{Glossary("operator", "operador")}}</code> é um símbolo matemático que produz um resultado baseado em dois valores (ou variáveis). Na tabela a seguir, você pode ver alguns dos operadores mais simples, além de alguns exemplos para experimentar no console JavaScript.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Operador</th>
+   <th scope="col">Explicação</th>
+   <th scope="col">Simbolo(s)</th>
+   <th scope="col">Exemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Adição</th>
+   <td>Usado para somar dois números ou juntar duas strings.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Ola " + "mundo!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Subtração, multiplição, divisão</th>
+   <td>Fazem exatamente o que você espera que eles façam na matemática básica.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // no JS a multiplicação é um asterisco<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Atribuição</th>
+   <td>Você já viu essa, ela associa um valor a uma variável.</td>
+   <td><code>=</code></td>
+   <td><code>let minhaVariavel = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>Operador de igualdade</p>
+   </th>
+   <td>Faz um teste para ver se dois valores são iguais, retornando um resultado <code>true</code>/<code>false</code> (booleano).</td>
+   <td><code>===</code></td>
+   <td><code>let minhaVAriavel = 3;<br>
+    minhaVariavel === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Negação, não igual</th>
+   <td>Retorna o valor lógico oposto do sinal; transforma um true em um false, etc. Quando usado junto com o operador de igualdade, o operador de negação testa se os valores são diferentes.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Para "Negação", a expressão básica é <code>true</code>, mas a comparação retorna <code>false</code> porque a negamos:</p>
+
+    <p><code>let minhaVariavel = 3;<br>
+     !(minhaVariavel === 3);</code></p>
+
+    <p>"Não igual" dá basicamente o mesmo resultado com sintaxe diferente. Aqui estamos testando "é <code>minhaVariavel</code> NÃO é igual a 3". Isso retorna <code>false</code> porque <code>minhaVariavel</code> É igual a 3.</p>
+
+    <p><code><code>let minhaVariavel = 3;</code><br>
+     minhaVariavel !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Há vários outros operadores para explorar, mas por enquanto esses são suficientes. Consulte <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators">Expressões e operadores</a> para ver uma lista completa.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Misturar tipos de dados pode levar a resultados estranhos quando uma operação é executada, portanto, tome cuidado para declarar suas variáveis corretamente, e você obterá os resultados esperados. Por exemplo, digite <code>'35' + '25'</code> no seu console. Por que você não teve o resultado esperado? Porque as aspas transformam os números em strings, você acabou concatenando strings em vez de somar os números. Se você digitar <code>35 + 25</code>, você obterá o resultado correto.</p>
+</div>
+
+<h3 id="Condicionais">Condicionais</h3>
+
+<p>Condicionais são estruturas de código que te permitem testar se uma expressão retorna verdadeiro ou não, executando um código alternativo revelado por seu resultado. Uma forma muito comum de condicional é a instrução <code>if ... else</code>. Por exemplo:</p>
+
+<pre class="brush: js notranslate">let sorvete = 'chocolate';
+if (sorvete === 'chocolate') {
+  alert('Opa, Eu amo sorvete de chocolate!');
+} else {
+  alert('Ahh, mas chocolate é o meu favorito...');
+}</pre>
+
+<p>A expressão dentro do <code>if ( ... )</code> é o teste — ela usa o operador de igualdade (como descrito anteriormente) para comparar a variável <code>sorvete</code> com a string <code>chocolate</code> para ver se elas são iguais. Se essa comparação retorna <code>true</code>, o primeiro bloco de código será executado. Se a comparação não for verdadeira, o primeiro bloco de código será ignorado e o segundo bloco de código, após a instrução <code>else</code>, será executado.</p>
+
+<h3 id="Funções">Funções</h3>
+
+<p>{{Glossary("Function", "Funções")}} são uma maneira de encapsular funcionalidades que você deseja reutilizar. Quando você precisa de um procedimento, você pode chamar a função com um nome, em vez de reescrever o código inteiro a cada vez. Você já viu alguns usos de funções acima, por exemplo:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">let minhaVariavel = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">alert('Ola!');</pre>
+ </li>
+</ol>
+
+<p>Essas funções, <code>document.querySelector</code> e <code>alert</code> são pré-definidas nos navegadores para você usar quando quiser.</p>
+
+<p>Se você ver algo que parece com um nome de variável, mas com parênteses — <code>()</code> — depois, provavelmente é uma função. Funções geralmente tem {{Glossary("Argument", "Argumentos")}} — pedaços de dados que elas precisam para realizarem o seu trabalho. Os argumentos são colocados dentro dos parênteses e separados por vírgulas, se houver mais de um.</p>
+
+<p>Por exemplo, a função <code>alert()</code> faz com que uma caixa pop-up apareça dentro da janela do navegador, mas precisamos passar uma string como argumento para dizer à função o que escrever na caixa pop-up.</p>
+
+<p>A boa noticia é que você pode definir suas próprias funções — no próximo exemplo nós escrevemos uma função simples que recebe dois números como argumentos e os multiplica:</p>
+
+<pre class="brush: js notranslate">function multiplica(num1,num2) {
+  let resultado = num1 * num2;
+  return resultado;
+}</pre>
+
+<p>Tente executar a função acima no console e teste com vários argumentos. Por exemplo:</p>
+
+<pre class="brush: js notranslate">multiplica(4, 7);
+multiplica(20, 20);
+multiplica(0.5, 3);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: A instrução <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> diz ao navegador para retornar a variável <code>resultado</code> da função para que ela esteja disponível para uso. Isso é necessário porque as variáveis definidas dentro das funções só estão disponíveis dentro destas funções. Isso é chamado {{Glossary("Scope", "Escopo")}} de variável (leia mais em<a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope"> escopo da variável</a>.)</p>
+</div>
+
+<h3 id="Eventos">Eventos</h3>
+
+<p>Interatividade real em um site precisa de eventos. Estas são estruturas de código que percebem as coisas que acontecem no navegador, executando o código em resposta. O exemplo mais óbvio é o <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Element/click_event">evento de clique</a>, que é disparado pelo navegador quando você clica em algo com o mouse. Para demonstrar isso, insira o seguinte código no seu console e, em seguida, clique na página da Web atual:</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {
+    alert('Ai! Pare de me cutucar!');
+}</pre>
+
+<p>Há muitas maneiras de associar um evento a um elemento. Aqui selecionamos o elemento {{htmlelement("html")}}, definindo sua propriedade <code><a href="/pt-BR/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> igual a uma função anônima (ou seja, sem nome), que contém o código que queremos que o evento clique execute.</p>
+
+<p>Observe que:</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre>
+
+<p>é equivalente a</p>
+
+<pre class="brush: js notranslate">let meuHTML = document.querySelector('html');
+meuHTML.onclick = function() {};</pre>
+
+<p>É só uma maneira mais curta de escrever.</p>
+
+<h2 id="Melhorando_nosso_site_de_exemplo">Melhorando nosso site de exemplo</h2>
+
+<p>Agora que analisamos alguns fundamentos do JavaScript, vamos adicionar alguns recursos interessantes ao nosso site de exemplo para ver o que é possível fazer.</p>
+
+<h3 id="Adicionando_um_modificador_de_imagem">Adicionando um modificador de imagem</h3>
+
+<p>Nessa parte, nós adicionaremos outra imagem no nosso site, e vamos usar o JavaScript para alternar entre as duas, quando a imagem for clicada.</p>
+
+<ol>
+ <li>Antes de tudo, ache outra imagem que você gostaria que aparecesse no seu site. Tenha certeza que ela tem o mesmo tamanho que sua primeira imagem, ou o mais perto disso possível.</li>
+ <li>Salve a imagem na pasta <code>imagens</code>.</li>
+ <li>Renomeie a imagem para 'firefox2.png' (sem as aspas).</li>
+ <li>Vá no seu arquivo <code>main.js</code>, e digite o seguinte código JavaScript (se seu "Ola mundo" em JavaScript ainda estiver lá, delete-o):
+  <pre class="brush: js notranslate">let minhaImagem = document.querySelector('img');
+
+minhaImagem.onclick = function() {
+    let meuSrc = minhaImagem.getAttribute('src');
+    if(meuSrc === 'imagens/firefox-icon.png') {
+      minhaImagem.setAttribute ('src','imagens/firefox2.png');
+    } else {
+      minhaImagem.setAttribute ('src','imagens/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Salve todos os arquivos e carregue o <code>index.html</code> no navegador. Agora quando você clicar na imagem, ela deve mudar para a outra!</li>
+</ol>
+
+<p>Você armazena uma referência ao seu elemento {{htmlelement("img")}} na variável <code>minhaImagem</code>. Depois, você faz a propriedade do manipulador de evento <code>onclick</code> dessa variável igual a uma função sem nome (uma função "anônima"). Agora, toda vez que esse elemento de imagem é clicado:</p>
+
+<ol>
+ <li>Você recupera o valor do atributo <code>src</code> da imagem.</li>
+ <li>Você usa uma condicional para checar se o valor <code>src</code> é igual ao caminho da imagem original:
+  <ol>
+   <li>Se for, você muda o valor de <code>src</code> para o caminho da segunda imagem, forçando a outra imagem a ser carregada dentro do elemento {{htmlelement("img")}}.</li>
+   <li>Se não é (significando que já mudou), nós mudamos o valor <code>src</code> de volta ao caminho da imagem, para o estado original.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Adicionando_uma_mensagem_personalizada_de_boas_vindas">Adicionando uma mensagem personalizada de boas vindas</h3>
+
+<p>Em seguida, adicionaremos outro trecho de código, alterando o título da página para uma mensagem personalizada de boas vindas quando o usuário realizar sua primeira visita ao site. Essa mensagem de boas vindas persistirá, quando o usuário deixar o site e voltar mais tarde — salvaremos a mensagem usando a <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Web_Storage_API_pt_br">API de Armazenamento Web</a>. Incluiremos também uma opção para mudar o usuário e, portanto, a mensagem de boas vindas sempre que necessário.</p>
+
+<ol>
+ <li>Em <code>index.html</code>, adicione a seguinte linha de código antes do elemento {{htmlelement("script")}}:
+
+  <pre class="brush: html notranslate">&lt;button&gt;Mudar usuário&lt;/button&gt;</pre>
+ </li>
+ <li>Em <code>main.js</code>, adicione o seguinte código no fim do arquivo, exatamente como está escrito — isso pega referências para o novo botão que adicionamos e para o título, e guarda ambos em variáveis:
+  <pre class="brush: js notranslate">let meuBotao = document.querySelector('button');
+let meuCabecalho = document.querySelector('h1');</pre>
+ </li>
+ <li>Agora adicione a seguinte função para criar a saudação personalizada — isso não vai fazer nada ainda, mas corrigiremos isso em um momento:
+  <pre class="brush: js notranslate">function defineNomeUsuario() {
+  let meuNome = prompt('Por favor, digite seu nome.');
+  localStorage.setItem('nome', meuNome);
+  meuCabecalho.textContent = 'Mozilla é legal, ' + meuNome;
+}</pre>
+  Essa função contem uma função <a href="/pt-BR/docs/Web/API/Window/prompt"><code>prompt()</code></a>, que traz uma caixa de diálogo assim como <code>alert()</code> faz. Este <code>prompt()</code>, no entanto, pede ao usuário para inserir algum dado e guarda os dados em uma variável quando o botão <strong>OK</strong> é pressionado. Nesse caso, estamos pedindo ao usuário para digitar seu nome. Em seguida, chamamos uma API denominada <code>localStorage</code>, o que nos permite guardar dados no navegador para usarmos mais tarde. Usamos a função <code>setItem()</code> de localStorage para criar e guardar um item de dado chamado <code>'nome'</code>, definindo seu valor para a variável <code>meuNome</code> que contém o nome que o usuário digitou. Finalmente, definimos o <code>textContent</code> do título como uma string, mais o nome recém-armazenado do usuário.</li>
+ <li>Em seguida, adicione esse bloco <code>if ... else</code> — poderíamos chamar isso de código de inicialização, pois ele estrutura o aplicativo quando é carregado pela primeira vez:
+  <pre class="brush: js notranslate">if(!localStorage.getItem('nome')) {
+  defineNomeUsuario();
+} else {
+  let nomeGuardado = localStorage.getItem('nome');
+  meuCabecalho.textContent = 'Mozilla é legal, ' + nomeGuardado;
+}</pre>
+  Primeiro, esse bloco usa o operador de negação (NÃO lógico representado pelo <code>!</code>) para checar se o dado <code>nome</code> existe — se não existir, a função <code>defineNomeUsuario()</code> é executada para criá-lo. Se ele já existir (isto é, se o usuário já tiver digitado quando visitou o site anteriormente), nós recuperamos o nome guardado usando <code>getItem()</code> e associamos o <code>textContent</code> do título a uma string, mais o nome do usuário, como fizemos dentro de <code>defineNomeUsuario()</code>.</li>
+ <li>Finalmente, coloque o evento <code>onclick</code> no botão, para que quando clicado, ele execute a função <code>defineNomeUsuario()</code>. Isso permite que o usuário defina um novo nome sempre que quiser ao pressionar o botão:
+  <pre class="brush: js notranslate">meuBotao.onclick = function() { defineNomeUsuario();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Agora quando você visitar seu site pela primeira vez, ele solicitará seu nome de usuário e, em seguida, enviará uma mensagem personalizada. Você pode alterar o nome a qualquer momento, pressionando o botão. Como um bônus, porque o nome é armazenado dentro de  <code>localStorage</code> , ele persiste depois que o site é fechado, mantendo a mensagem personalizada lá quando você abrir o site novamente!</p>
+
+<h3 id="Um_nome_de_usuário_nulo">Um nome de usuário nulo?</h3>
+
+<p>Quando você executa o exemplo e obtém a caixa de diálogo que solicita a inserção do seu nome de usuário, tente pressionar o botão Cancelar. Você deve terminar com um título que diz "Mozilla is cool, null". Isso ocorre porque, quando você cancela o prompt, o valor é definido como <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>, um valor especial em JavaScript que se refere basicamente à ausência de um valor.</p>
+
+<p>Tente também pressionar OK sem digitar nenhum nome - você deve terminar com um título que diz "Mozilla é legal,", por razões bastante óbvias.</p>
+
+<p>Se você quiser evitar esses problemas, verifique se o usuário não inseriu um nome <code>null</code> ou em branco, atualizando a função <code>defineNomeUsuario()</code> para isso:</p>
+
+<pre class="brush: js notranslate">function defineNomeUsuario() {
+  let meuNome = prompt('Por favor, digite seu nome.');
+  if(!meuNome || meuNome === null) {
+    defineNomeUsuario();
+  } else {
+    localStorage.setItem('nome', meuNome);
+    meuCabecalho.innerHTML = 'Mozilla é legal, ' + meuNome;
+  }
+}</pre>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Na linguagem humana - se </span></span><code>meuNome</code><span class="tlid-translation translation" lang="pt"><span title=""> não tiver valor ou seu valor for </span></span><code>null</code><span class="tlid-translation translation" lang="pt"><span title="">, execute </span></span><code>defineNomeUsuario()</code><span class="tlid-translation translation" lang="pt"><span title=""> novamente desde o início.</span> <span title="">Se ele tiver um valor (se as instruções acima não forem verdadeiras), armazene o valor em </span></span><code>localStorage</code><span class="tlid-translation translation" lang="pt"><span title=""> e defina-o como o texto do cabeçalho.</span></span></p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Se você seguiu todas as instruções deste artigo, você deve terminar com uma página parecida com essa (você também pode <a href="https://mdn.github.io/beginner-html-site-scripted/">ver nossa versão aqui</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Se você ficar empacado, você pode comparar seu trabalho com o nosso <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">exemplo finalizado no Github</a>.</p>
+
+<p>Nós mal arranhamos a superfície do JavaScript. Se você gostou e deseja avançar ainda mais, <span class="tlid-translation translation" lang="pt"><span title="">veja os outros recursos abaixo</span></span>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript">JavaScript — Script dinâmico do lado cliente</a></dt>
+ <dd><span class="tlid-translation translation" lang="pt"><span title="">Nosso tópico de aprendizado JavaScript - mergulhe no JavaScript com muito mais detalhes.</span></span></dd>
+ <dt><a class="external" href="https://learnjavascript.online/" rel="noopener">Learn JavaScript</a></dt>
+ <dd><span class="tlid-translation translation" lang="pt"><span title="">Um excelente recurso para aspirantes a desenvolvedores web - Aprenda JavaScript em um ambiente interativo, com breves lições e testes interativos, guiados por avaliação automatizada.</span> <span title="">As primeiras 40 lições são gratuitas e o curso completo está disponível por um pequeno pagamento único.</span></span></dd>
+</dl>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_Módulo">Neste Módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..7bc25089da
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,131 @@
+---
+title: Publicando seu site
+slug: Aprender/Getting_started_with_the_web/Publicando_seu_site
+tags:
+  - Codificação em Script
+  - FTP
+  - GitHub
+  - Iniciante
+  - Motor de Apps do Google
+  - Web
+  - 'l10n:prioridade'
+  - publicação
+  - servidor web
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<div class="summary">
+<p>Uma vez que você tenha acabado de escrever seu código e organizar os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo.  Este artigo mostra como colocar online seu código de amostra simples com o mínimo de esforço.</p>
+</div>
+
+<h2 id="Quais_são_as_opções">Quais são as opções?</h2>
+
+<p>Publicar um site não é um tópico simples, principalmente porque há muitas maneiras diferentes de fazê-lo. Nesse artigo, nós não pretendemos documentar todos os métodos possíveis. Em vez disso, nós discutiremos os prós e contras de três estratégias do ponto de vista de um iniciante, e então o guiaremos por um método que irá funcionar por enquanto.</p>
+
+<h3 id="Conseguindo_uma_hospedagem_e_um_nome_de_domínio">Conseguindo uma hospedagem e um nome de domínio</h3>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Para ter mais controle sobre o conteúdo e a aparência do site, a maioria das pessoas escolhe comprar hospedagem na web e um nome de domínio:</span></span></p>
+
+<ul>
+ <li>Hospedagem é um espaço para arquivos alugado no <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/o_que_e_um_web_server">servidor</a> de uma compania de hospedagem. O servidor disponibiliza o conteúdo do site para os usuários que o visitam.</li>
+ <li>Um <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/What_is_a_domain_name">nome de domínio</a> é o endereço único onde pessoas encontram seu site, como <code>http://www.mozilla.org</code>, ou <code>http://www.bbc.co.uk</code>. Você aluga seu nome de domínio por tantos anos quanto desejar por meio de um <strong>registrador de domínio</strong>.</li>
+</ul>
+
+<p>Muitos sites profissionais ficam online dessa maneira.</p>
+
+<p>Você vai precisar ainda de um programa de  {{Glossary("FTP", "Protocolo de Transferência de Arquivos (FTP)")}} (veja <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Quanto_custa_fazer_algo_web#Software">Quanto custa: software</a> para mais detalhes) para transferir os arquivos do site ao servidor. Programas FTP variam, mas geralmente você tem que logar no servidor usando detalhes fornecidos por sua empresa de hospedagem (ex. nome de usuário, senha, nome de host). Então, o programa mostra para você os arquivos locais e do servidor em duas janelas, para que você possa transferí-los ao servidor e de volta para o computador:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Dicas_para_encontrar_hospedagem_e_domínios">Dicas para encontrar hospedagem e domínios</h4>
+
+<ul>
+ <li>Nós não promovemos empresas de hospedagem comercial ou para registro de nome de domínio. Para encontrar empresas de hospedagem e registradores de domínio, basta procurar por "hospedagem web" e "nomes de domínio". Todos os registradores terão um recurso para permitir que você verifique se o nome de domínio desejado está disponível.</li>
+ <li>Seu {{Glossary("ISP", "provedor de serviço de internet")}} local ou empresarial pode fornecer uma hospedagem limitada para um site pequeno. O conjunto de recursos disponíveis será limitado, mas pode ser perfeito para seus primeiros experimentos — entre em contato com eles e pergunte!</li>
+ <li>Há alguns serviços disponíveis gratuitamente, como <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a> e <a href="https://wordpress.com/">Wordpress</a>. <span class="tlid-translation translation" lang="pt"><span title="">Às vezes, você recebe o que paga, mas às vezes esses recursos são bons o suficiente para suas experiências iniciais</span></span>.</li>
+ <li>Muitas empresas fornecem hospedagem e registro de domínio.</li>
+</ul>
+
+<h3 id="Usando_uma_ferramenta_online_como_Github_ou_Google_App_Engine">Usando uma ferramenta online como Github ou Google App Engine</h3>
+
+<p>Algumas ferramentas permitem que você publique seu site online:</p>
+
+<ul>
+ <li><a href="https://github.com/">Github</a> é um site de "codificação social". Ele permite que você faça upload de repositórios de código para armazenamento no <strong>sistema de controle de versão</strong> <a href="http://git-scm.com/">Git</a><strong>. </strong>Você pode então colaborar em projetos de código, e o sistema é open-source por padrão, o que significa que todo mundo pode encontrar seu código Github, usá-lo, aprender com ele e se aprimorar. O Gitub tem um recurso muito útil chamado <a href="https://pages.github.com/">GitHub Pages</a>, que permite expor o código do site ao vivo na web.</li>
+ <li>O <a href="https://cloud.google.com/appengine/">Google App Engine</a> é uma plataforma poderosa que permite criar e executar aplicativos na infraestrutura do Google, seja para criar um aplicativo da Web de várias camadas a partir do zero ou para hospedar um site estático. Veja <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_voce_hospeda_seu_site_Google_App_Engine">Como você hospeda seu website no Google App Engine?</a> Para maiores informações.</li>
+</ul>
+
+<p>Diferente da maioria das hospedagens, essas ferramentas geralmentre são gratuitas, mas você tem um conjunto limitado de recursos.</p>
+
+<h3 id="Usando_uma_IDE_baseada_na_web_como_o_CodePen">Usando uma IDE baseada na web como o CodePen</h3>
+
+<p>Há um número grande de web apps que emulam um ambiente de desenvolvimento de site, permitindo a você escrever HTML, CSS e JavaScript e então expor o resultado renderizado como em um site — tudo em uma aba do navegador! Falando de forma genérica, essas ferramentas são fáceis, boas para aprender e gratuitas (para recursos básicos), e elas geralmente hospedam sua página em um endereço único na web. No entanto, os recursos são limitados e esses aplicativos  geralmente não provêem espaço de hospedagem para recursos (como imagens).</p>
+
+<p>Tente codificar com alguns desses exemplos, e veja qual se encaixa melhor para você:</p>
+
+<ul>
+ <li><a href="http://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.mozilla.org/pt-BR/">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JSBin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Publicando_via_Github">Publicando via Github</h2>
+
+<p>Agora vamos mostrar como publicar seu site facilmente por meio das páginas do GitHub.</p>
+
+<ol>
+ <li>Primeiro de tudo, <a href="https://github.com">inscreva-se no GitHub</a> e verifique seu e-mail.</li>
+ <li>Em seguida, você precisa <a href="https:/github.com/new">criar um repositório</a> para colocar seus arquivos.</li>
+ <li>Nesta página, na caixa <em>Repository name</em> (nome do repositório), digite username.github.io, onde <em>username</em> é o seu nome de usuário. Então, por exemplo, nosso amigo bobsmith entraria em bobsmith.github.io. Além disso, marque <em>Initialize this repository with a README </em>(inicializar este repositório com um README) e então clique em <em>Create repository</em> (Criar repositório).</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<ol start="4">
+ <li>Arraste e solte o conteúdo da pasta do site no seu repositório e clique em <em>Commit changes</em> (confirmar alterações).</li>
+</ol>
+
+<div class="blockIndicator note">
+<p>Nota: Certifique-se que sua pasta possui um arquivo <code>index.html</code>.</p>
+</div>
+
+<ol start="5">
+ <li>Navegue em seu navegador até <em>username</em>.github.io para ver seu site online. Por exemplo, para o usuário <em>chrisdavidmills</em>, vá para <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p>Nota: Pode levar alguns minutos para seu site ficar online. Se ele não funcionar imediatamente, talvez seja necessário aguardar alguns minutos e tentar novamente.</p>
+</div>
+
+<p>Para aprender mais, consulte a <a href="https://help.github.com/en/categories/github-pages-basics">Ajuda do Github Pages</a> (em inglês).</p>
+
+<h2 id="Leitura_complementar">Leitura complementar</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/o_que_e_um_web_server">O que é um servidor web</a></li>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/What_is_a_domain_name">Entendendo nomes de domínio</a></li>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Quanto_custa_fazer_algo_web">Quanto custa fazer algo na web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Publicar um site</a>: Um bom tutorial da Codecademy que vai um pouco além e mostra algumas técnicas adicionais.</li>
+ <li><a href="https://alignedleft.com/resources/cheap-web-hosting">Hospedagem baratas ou gratuitas de sites estáticos</a>, por Scott Murray, tem algumas idéias úteis sobre serviços disponíveis.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Comp será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
new file mode 100644
index 0000000000..26de56ea06
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
@@ -0,0 +1,164 @@
+---
+title: A web e seus padrões
+slug: Aprender/Getting_started_with_the_web/A_web_e_seus_padrões
+translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
+---
+<p dir="ltr"><font><font>{{learnsidebar}}</font></font></p>
+
+<p dir="ltr">Este artigo fornece algumas informações úteis sobre a Web - como ela surgiu, quais são suas tecnologias padrões, como elas funcionam juntas, porque "desenvolvedor web" é uma grande carreira para escolher e quais são os tipos de boas práticas são coisas que você aprenderá neste curso.</p>
+
+<h2 dir="ltr" id="Breve_histórico_da_web">Breve histórico da web</h2>
+
+<p dir="ltr">Seremos breves, já que existem muitos (mais) artigos detalhados do histórico da web por aí, que mostraremos mais tarde (tente também pesquisar por "histórico da web" no seu mecanismo de pesquisa favorito e veja o que você encontra, se estiver interessado em maiores detalhes.)</p>
+
+<p dir="ltr">No fim da década de 1960, os militares dos Estados Unidos desenvolveram uma rede de comunicação chamada <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. Ela pode ser considerada como precursora da Web, já que trabalhava com <a href="https://pt.wikipedia.org/wiki/Comuta%C3%A7%C3%A3o_de_pacotes">comutação de pacotes</a> e apresentou a primeira implementação do conjuto de protocolos <a href="https://pt.wikipedia.org/wiki/TCP/IP">TCP/IP</a>. Estas duas tecnologias formaram a base da infraestrutura em que a internet foi construída.</p>
+
+<p dir="ltr">Em 1980, Tim Berners-Lee (frequentemente chamado de TimBL) escreveu um programa de notebook chamado <a href="https://pt.wikipedia.org/wiki/ENQUIRE">ENQUIRE</a>, que apresentava o conceito de links entre diferentes nós. Parece familiar?</p>
+
+<p dir="ltr"><font><font>Avance para 1989, e TimBL escreveu </font></font><a href="https://www.w3.org/History/1989/proposal.html"><font><font>Information Management: A Proposal</font></font></a><font><font> and HyperText and CERN; </font><font>essas duas publicações juntas forneceram o pano de fundo de como a web funcionaria. </font><font>Eles receberam uma boa quantidade de juros, o suficiente para convencer os chefes da TimBL a permitir que ele fosse em frente e criasse um sistema de hipertexto global.</font></font></p>
+
+<p dir="ltr"><font><font>No final de 1990, TimBL havia criado todas as coisas necessárias para executar a primeira versão da web - </font></font><a href="/en-US/docs/Web/HTTP"><font><font>HTTP</font></font></a><font><font> , </font></font><a href="/en-US/docs/Web/HTML"><font><font>HTML</font></font></a><font><font> , o primeiro navegador da web, que era chamado de </font></font><a href="https://en.wikipedia.org/wiki/WorldWideWeb"><font><font>WorldWideWeb</font></font></a><font><font> , um servidor HTTP e algumas páginas da web para olhar.</font></font></p>
+
+<p dir="ltr"><font><font>Nos próximos anos que se seguiram, a web explodiu, com vários navegadores sendo lançados, milhares de servidores da web sendo configurados e milhões de páginas da web sendo criadas. </font><font>OK, é um resumo muito simples do que aconteceu, mas prometi a você um breve resumo.</font></font></p>
+
+<p dir="ltr"><font><font>Um último dado significativo para compartilhar é que, em 1994, TimBL fundou o </font></font><a href="https://en.wikipedia.org/wiki/World_Wide_Web_Consortium"><font><font>World Wide Web Consortium</font></font></a><font><font> (W3C), uma organização que reúne representantes de muitas empresas de tecnologia diferentes para trabalharem juntos na criação de especificações de tecnologia da web. </font><font>Depois disso, outras tecnologias surgiram, como </font></font><a href="/en-US/docs/Web/CSS"><font><font>CSS</font></font></a><font><font> e </font></font><a href="/en-US/docs/Web/JavaScript"><font><font>JavaScript</font></font></a><font><font> , e a web começou a se parecer mais com a que conhecemos hoje.</font></font></p>
+
+<h2 dir="ltr" id="Padrões_da_web"><font><font>Padrões da web</font></font></h2>
+
+<p dir="ltr"><strong><font><font>Os padrões da Web</font></font></strong><font><font> são as tecnologias que usamos para construir sites. </font><font>Esses padrões existem como longos documentos técnicos chamados especificações, que detalham exatamente como a tecnologia deve funcionar. </font><font>Esses documentos não são muito úteis para aprender como usar as tecnologias que eles descrevem (é por isso que temos sites como MDN Web Docs), mas em vez disso, devem ser usados ​​por engenheiros de software para implementar essas tecnologias (geralmente em navegadores da web).</font></font></p>
+
+<p dir="ltr"><font><font>Por exemplo, o </font></font><a href="https://html.spec.whatwg.org/multipage/"><font><font>HTML Living Standard</font></font></a><font><font> descreve exatamente como o HTML (todos os elementos HTML e suas APIs associadas e outras tecnologias adjacentes) deve ser implementado.</font></font></p>
+
+<p dir="ltr"><font><font>Os padrões da Web são criados por órgãos de padrões - instituições que convidam grupos de pessoas de diferentes empresas de tecnologia para se reunirem e concordarem sobre como as tecnologias devem funcionar da melhor maneira para cumprir todos os seus casos de uso. </font><font>O W3C é o órgão de padrões da web mais conhecido, mas existem outros como o </font></font><a href="https://whatwg.org/"><font><font>WHATWG</font></font></a><font><font> (que foi responsável pela modernização da linguagem HTML), </font></font><a href="https://www.ecma-international.org/"><font><font>ECMA</font></font></a><font><font> (que publicou o padrão para ECMAScript, no qual o JavaScript é baseado), </font></font><a href="https://www.khronos.org/"><font><font>Khronos</font></font></a><font><font> (que publica tecnologias para gráficos 3D, como WebGL) e outros.</font></font></p>
+
+<h3 dir="ltr" id="Padrões_abertos"><font><font>Padrões "abertos"</font></font></h3>
+
+<p dir="ltr"><font><font>Um dos principais aspectos dos padrões da web, que TimBL e o W3C concordaram desde o início, é que a web (e as tecnologias da web) devem ser livres para contribuir e usar, e não onerada por patentes / licenciamento. </font><font>Portanto, qualquer pessoa pode escrever o código para construir um site de graça e pode contribuir com o processo de criação de padrões, onde as especificações são escritas.</font></font></p>
+
+<p dir="ltr"><font><font>Como as tecnologias da web são criadas abertamente, em colaboração entre muitas empresas diferentes, isso significa que nenhuma empresa consegue controlá-las, o que é realmente bom. </font><font>Você não gostaria que uma única empresa repentinamente decidisse colocar toda a web atrás de um acesso pago, ou lançar uma nova versão de HTML que todos precisam comprar para continuar a fazer sites, ou pior ainda, apenas decidir que não estão mais interessados e apenas desligá-lo.</font></font></p>
+
+<p dir="ltr"><font><font>Isso permite que a web continue sendo um recurso público disponível gratuitamente.</font></font></p>
+
+<h3 dir="ltr" id="Não_quebre_a_web"><font><font>Não quebre a web</font></font></h3>
+
+<p dir="ltr"><font><font>Outra frase que você ouvirá sobre os padrões abertos da web é "não quebre a web" - a ideia é que qualquer nova tecnologia da web introduzida deve ser compatível com o que existia antes (ou seja, os sites antigos ainda continuarão a funcionar ), e compatível com as versões futuras (tecnologias futuras, por sua vez, serão compatíveis com o que temos atualmente). </font><font>Conforme você avança no material de aprendizagem apresentado aqui, você começará a aprender como isso é possível com um projeto muito inteligente e trabalho de implementação.</font></font></p>
+
+<h2 id="Ser_um_desenvolvedor_web_é_bom"><font><font>Ser um desenvolvedor web é bom</font></font></h2>
+
+<p><font><font>A indústria da web é um mercado muito atraente para se entrar, se você estiver procurando por um emprego. </font><font>Números publicados recentes dizem que existem atualmente cerca de 19 milhões de desenvolvedores da web no mundo, e esse número deve mais que dobrar na próxima década. </font><font>E, ao mesmo tempo, há uma escassez de habilidades na indústria - então, que melhor momento para aprender desenvolvimento web?</font></font></p>
+
+<p><font><font>No entanto, nem tudo é diversão e jogos - construir sites é uma proposta mais complicada do que costumava ser, e você terá que investir algum tempo para estudar todas as diferentes tecnologias que precisa usar, todas as técnicas e melhores práticas que você precisa saber e todos os padrões típicos que você deverá implementar. </font><font>Você levará alguns meses para realmente começar a entrar no assunto e, em seguida, precisará continuar aprendendo para que seu conhecimento fique atualizado com todas as novas ferramentas e recursos que aparecem na plataforma da web, e continue praticando e refinando seu ofício.</font></font></p>
+
+<p><em><font><font>A única constante é a mudança.</font></font></em></p>
+
+<p><font><font>Isso parece difícil? </font><font>Não se preocupe - nosso objetivo é fornecer a você tudo o que você precisa saber para começar, e as coisas ficarão mais fáceis. </font><font>Depois de abraçar as constantes mudanças e incertezas da web, você começará a se divertir. </font><font>Como parte da comunidade web, você terá toda uma rede de contatos e materiais úteis para ajudá-lo, e começará a desfrutar das possibilidades criativas que isso traz.</font></font></p>
+
+<p><font><font>Você é um criativo digital agora. </font><font>Aproveite a experiência e o potencial para ganhar a vida.</font></font></p>
+
+<h2 id="Visão_geral_das_tecnologias_modernas_da_web"><font><font>Visão geral das tecnologias modernas da web</font></font></h2>
+
+<p><font><font>Existem várias tecnologias para aprender se você quiser ser um desenvolvedor front-end da web. </font><font>Nesta seção, iremos descrevê-los brevemente. </font><font>Para uma explicação mais detalhada de como alguns deles funcionam juntos, leia nosso artigo </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works"><font><font>Como funciona a web</font></font></a><font><font> .</font></font></p>
+
+<h3 id="Navegadores"><font><font>Navegadores</font></font></h3>
+
+<p><font><font>Provavelmente, você está lendo essas palavras dentro de um navegador da Web neste exato momento (a menos que as tenha imprimido ou esteja usando tecnologia de assistência, como um leitor de tela para ler para você). </font><font>Os navegadores da web são os programas de software que as pessoas usam para consumir a web e incluem </font></font><a href="https://www.mozilla.org/en-US/firefox/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="https://www.opera.com/"><font><font>Opera</font></font></a><font><font> , </font></font><a href="https://www.apple.com/safari/"><font><font>Safari</font></font></a><font><font> e </font></font><a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font><font>Edge</font></font></a><font><font> .</font></font></p>
+
+<h3 id="HTTP"><font><font>HTTP</font></font></h3>
+
+<p><font><font>O protocolo de transferência de hipertexto, ou </font></font><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP"><font><font>HTTP</font></font></a><font><font> , é um protocolo de mensagens que permite aos navegadores da web se comunicarem com os servidores da web (onde os sites da web são armazenados). </font><font>Uma conversa típica é algo como</font></font></p>
+
+<pre class="notranslate">"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+
+"Sure thing web browser — here you go"
+
+[Downloads files and renders web page]</pre>
+
+<p><font><font>A sintaxe real para mensagens HTTP (chamadas de solicitações e respostas) não é legível por humanos, mas isso lhe dá uma ideia básica.</font></font></p>
+
+<h3 id="HTML_CSS_e_JavaScript"><font><font>HTML, CSS e JavaScript</font></font></h3>
+
+<p><a href="/en-US/docs/Web/HTML"><font><font>HTML</font></font></a><font><font> , </font></font><a href="/en-US/docs/Web/CSS"><font><font>CSS</font></font></a><font><font> e </font></font><a href="/en-US/docs/Web/JavaScript"><font><font>JavaScript</font></font></a><font><font> são as três tecnologias principais que você usará para construir um site:</font></font></p>
+
+<ul>
+ <li>
+  <p><font><font>A linguagem de marcação de hipertexto, ou </font></font><strong><font><font>HTML</font></font></strong><font><font> , é uma linguagem de marcação que consiste em diferentes elementos nos quais você pode agrupar (marcar) o conteúdo para dar-lhe significado (semântica) e estrutura. </font><font>HTML simples se parece com isto:</font></font></p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;This is a top-level heading&lt;/h1&gt;
+
+&lt;p&gt;This is a paragraph of text.&lt;/p&gt;
+
+&lt;img src="cat.jpg" alt="A picture of my cat"&gt;</pre>
+
+  <p><font><font>Se adotássemos uma analogia com a construção de uma casa, o HTML seria como as fundações e paredes da casa, que lhe dão estrutura e a mantém unida.</font></font></p>
+ </li>
+ <li>
+  <p><font><font>Cascading Style Sheets ( </font></font><strong><font><font>CSS</font></font></strong><font><font> ) é uma linguagem baseada em regras usada para aplicar estilos ao seu HTML, por exemplo, definindo texto e cores de fundo, adicionando bordas, animando coisas ou fazendo o layout de uma página de uma determinada maneira. </font><font>Como um exemplo simples, o código a seguir tornaria nosso parágrafo HTML em vermelho:</font></font></p>
+
+  <pre class="brush: css notranslate">p  {
+  color: red;
+}</pre>
+
+  <p><font><font>Na analogia da casa, CSS é como a pintura, o papel de parede, os tapetes e as pinturas que você usaria para deixar a casa bonita.</font></font></p>
+ </li>
+ <li>
+  <p><strong><font><font>JavaScript</font></font></strong><font><font> é a linguagem de programação que usamos para adicionar interatividade aos sites, desde a troca de estilo dinâmico até a obtenção de atualizações do servidor, até gráficos 3D complexos. </font><font>O seguinte JavaScript simples armazenará uma referência ao nosso parágrafo na memória e mudará o texto dentro dele:</font></font></p>
+
+  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+pElem.textContent =  'We changed the text!';</pre>
+
+  <p><font><font>Na analogia da casa, o JavaScript é como o fogão, a TV, o microondas ou o secador de cabelo - as coisas que fornecem funcionalidade útil à sua casa</font></font></p>
+ </li>
+</ul>
+
+<h3 id="Ferramental"><font><font>Ferramental</font></font></h3>
+
+<p><font><font>Depois de aprender as tecnologias "brutas" que podem ser usadas para construir páginas da web (como HTML, CSS e JavaScript), você logo começará a encontrar várias ferramentas que podem ser usadas para tornar seu trabalho mais fácil ou mais eficiente. </font><font>Exemplos incluem:</font></font></p>
+
+<ul>
+ <li><font><font>As </font></font><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"><font><font>ferramentas de desenvolvedor</font></font></a><font><font> dentro de navegadores modernos que podem ser usadas para depurar seu código.</font></font></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing"><font><font>Ferramentas de teste</font></font></a><font><font> que podem ser usadas para executar testes para mostrar se o seu código está se comportando como você deseja.</font></font></li>
+ <li><font><font>Bibliotecas e estruturas construídas com base em JavaScript que permitem a você construir certos tipos de site da Web com muito mais rapidez e eficácia.</font></font></li>
+ <li><font><font>Os chamados "Linters", que pegam um conjunto de regras, olham para o seu código e destacam os lugares onde você não seguiu as regras corretamente.</font></font></li>
+ <li><font><font>Minificadores, que removem todos os espaços em branco dos arquivos de código para torná-los menores e, portanto, fazer o download do servidor mais rapidamente.</font></font></li>
+</ul>
+
+<h3 id="Linguagens_e_estruturas_do_lado_do_servidor"><font><font>Linguagens e estruturas do lado do servidor</font></font></h3>
+
+<p><font><font>HTML, CSS e JavaScript são linguagens de front-end (ou cliente), o que significa que são executadas pelo navegador para produzir um front-end de site que seus usuários possam usar.</font></font></p>
+
+<p><font><font>Há outra classe de linguagens chamadas linguagens de back-end (ou do lado do servidor), o que significa que são executadas no servidor antes de o resultado ser enviado ao navegador para exibição. </font><font>Um uso típico para uma linguagem do lado do servidor é obter alguns dados de um banco de dados e gerar algum HTML para conter os dados, antes de enviar o HTML ao navegador para exibi-lo ao usuário.</font></font></p>
+
+<p><font><font>Linguagens de servidor de exemplo incluem ASP.NET, Python, PHP e NodeJS.</font></font></p>
+
+<h2 id="Melhores_práticas_da_web"><font><font>Melhores práticas da web</font></font></h2>
+
+<p><font><font>Falamos brevemente sobre as tecnologias que você usará para construir sites. </font><font>Agora, vamos discutir as melhores práticas que você deve empregar para garantir que está usando essas tecnologias da melhor maneira possível.</font></font></p>
+
+<p><font><font>Ao fazer o desenvolvimento da web, a principal causa de incerteza vem do fato de que você não sabe qual combinação de tecnologia cada usuário usará para visualizar seu site:</font></font></p>
+
+<ul>
+ <li><font><font>O usuário 1 pode estar olhando para ele em um iPhone, com uma tela pequena e estreita.</font></font></li>
+ <li><font><font>O usuário 2 pode estar olhando para ele em um laptop Windows com um monitor widescreen conectado a ele.</font></font></li>
+ <li><font><font>O usuário 3 pode ser cego e usar um leitor de tela para ler a página da web para eles.</font></font></li>
+ <li><font><font>O usuário 4 pode estar usando uma máquina de desktop muito antiga que não pode executar navegadores modernos.</font></font></li>
+</ul>
+
+<p><font><font>Como você não sabe exatamente o que seus usuários usarão, você precisa fazer um design defensivo - tornar seu site o mais flexível possível, de modo que todos os usuários acima possam usá-lo, mesmo que nem todos recebam o mesmo experiência. </font><font>Resumindo, estamos tentando fazer a web funcionar para todos, tanto quanto possível.</font></font></p>
+
+<p><font><font>Você encontrará os conceitos abaixo em algum momento de seus estudos.</font></font></p>
+
+<ul>
+ <li><strong><font><font>A compatibilidade entre navegadores</font></font></strong><font><font> é a prática de tentar garantir que sua página da web funcione em tantos dispositivos quanto possível. </font><font>Isso inclui o uso de tecnologias que todos os navegadores suportam, proporcionando melhores experiências aos navegadores que podem lidar com elas (aprimoramento progressivo) e / ou escrever código para que ele volte a uma experiência mais simples, mas ainda utilizável em navegadores mais antigos (degradação normal). </font><font>Também envolve muitos testes para ver se algo falha em determinados navegadores e, em seguida, mais trabalho para corrigir essas falhas.</font></font></li>
+ <li><strong><font><font>Web design responsivo</font></font></strong><font><font> é a prática de tornar sua funcionalidade e layouts flexíveis para que eles possam se adaptar automaticamente a diferentes navegadores. </font><font>Um exemplo óbvio é um site que é apresentado de uma maneira em um navegador widescreen na área de trabalho, mas é exibido como um layout mais compacto de coluna única em navegadores de telefones celulares. </font><font>Tente ajustar a largura da janela do navegador agora e veja o que acontece.</font></font></li>
+ <li><strong><font><font>Desempenho</font></font></strong><font><font> significa carregar os sites o mais rápido possível, mas também torná-los intuitivos e fáceis de usar, para que os usuários não fiquem frustrados e vão para outro lugar.</font></font></li>
+ <li><strong><font><font>Acessibilidade</font></font></strong><font><font> significa tornar seus sites utilizáveis ​​por tantos tipos diferentes de pessoas quanto possível (conceitos relacionados são diversidade e inclusão e design inclusivo). </font><font>Isso inclui pessoas com deficiências visuais, auditivas, cognitivas ou físicas. </font><font>Também vai além das pessoas com deficiência - que tal pessoas jovens ou velhas, pessoas de diferentes culturas, pessoas que usam dispositivos móveis ou pessoas com conexões de rede lentas ou não confiáveis?</font></font></li>
+ <li><strong><font><font>Internacionalização</font></font></strong><font><font> significa tornar os sites utilizáveis ​​por pessoas de diferentes culturas, que falam línguas diferentes com a sua. </font><font>Existem considerações técnicas aqui (como alterar seu layout para que ainda funcione bem para linguagens da direita para a esquerda ou até mesmo verticais) e humanas (como usar uma linguagem simples e sem gíria para que as pessoas que têm sua linguagem já que o segundo ou terceiro idioma deles têm mais probabilidade de entender seu texto).</font></font></li>
+ <li><strong><font><font>Privacidade e segurança</font></font></strong><font><font> . </font><font>Esses dois conceitos estão relacionados, mas são diferentes. </font><font>Privacidade refere-se a permitir que as pessoas façam seus negócios em particular e não espioná-las ou coletar mais dados do que você absolutamente precisa. </font><font>Segurança refere-se à construção de seu site de maneira segura, de forma que usuários mal-intencionados não possam roubar informações contidas nele de você ou de seus usuários.</font></font></li>
+</ul>
+
+<h2 dir="ltr" id="Veja_também"><font><font>Veja também</font></font></h2>
+
+<ul dir="ltr">
+ <li><a href="https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web"><font><font>História da World Wide Web</font></font></a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work"><font><font>Como funciona a internet?</font></font></a></li>
+</ul>
diff --git a/files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..62ad3bd27d
--- /dev/null
+++ b/files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,111 @@
+---
+title: Com será o seu site?
+slug: Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer
+tags:
+  - Aprender
+  - Ativos
+  - Composição
+  - Conteúdo
+  - Descontinuado
+  - Design
+  - Fontes
+  - Iniciante
+  - Passo a passo
+  - Simples
+  - 'l10:prioridade'
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Como será o seu site?</em> discute o trabalho de planejamento e design que você precisa fazer para o seu site antes de escrever o código, incluindo "Quais informações meu site oferece?", "Quais fontes e cores eu quero?" e ​​"O que meu site faz?"</p>
+</div>
+
+<h2 id="Primeiramente_planejamento">Primeiramente: planejamento</h2>
+
+<p>Antes que você faça qualquer coisa, você precisa de algumas ideias. O que seu site realmente vai fazer? Um site pode fazer praticamente tudo, mas primeiro você deve manter as coisas em um nível simples. Nós vamos começar criando um site simples com um cabeçalho, uma imagem e alguns parágrafos.</p>
+
+<p>Para começar, você deve responder às seguintes questões:</p>
+
+<ol>
+ <li><strong>Sobre o que é seu site? </strong>Você gosta de cachorros, Nova Iorque ou Pacman?</li>
+ <li><strong>Que informação você está apresentando sobre o assunto? </strong>Escreva um título e alguns parágrafos e pense em uma imagem para ilustrar sua página.</li>
+ <li><strong>Como será seu site, </strong>em termos simples. Qual é a cor de fundo? Qual é o tipo de fonte apropriado: formal, desenhado, negrito e gritante, sutil?</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Projetos complexos precisam de guias detalhados que abordam todos os detalhes de cores, fontes, espaçamento entre itens de uma página, estilo de escrita apropriado, e por aí vai. Isso é denominado um guia de design, sistema de design ou manual da marca, e você pode ver um exemplo no <a href="https://design.firefox.com/photon/">Sistema de Design do Firefox Photon</a> (em inglês).</p>
+</div>
+
+<h2 id="Rascunhando_seu_design">Rascunhando seu design</h2>
+
+<p>Em seguida, pegue papel e caneta e faça um rascunho de como você deseja que seu site seja. Para sua primeira página simples, não há muito o que rascunhar, mas você deve criar o hábito desde o começo. Realmente ajuda — você não precisa ser um Van Gogh!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Mesmo em sites reais e complexos, os times de design geralmente começam pelo rascunho em papel e depois constroem a versão digital usando um editor gráfico ou tecnologias da web.</p>
+
+<p>Os times de web geralmente incluem um designer gráfico e um designer de {{Glossary("UX", "experiencia do usuário")}} (UX). Designers gráficos, obviamente, constroem a parte visual do site. UX designers tem uma função de certa forma mais abstrata, direcionando como os usuários vão interagir e experimentar o site.</p>
+</div>
+
+<h2 id="Construindo_seus_ativos">Construindo seus ativos</h2>
+
+<p>Nesse ponto, é bom começar juntando o conteúdo que vai eventualmente aparecer no site.</p>
+
+<h3 id="Texto">Texto</h3>
+
+<p>Você deve ter seu título e parágrafos desde antes. Mantenha eles por perto.</p>
+
+<h3 id="Cor_do_tema">Cor do tema</h3>
+
+<p>Para escolher a cor, vá ao <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Colors/seletor_de_cores">Seletor de Cores</a> e escolha a cor que preferir. Quando escolher a cor, você verá uma sequência de seis caracteres, como <code>#660066</code>. Isso é chamado um <em>código hex(adecimal)</em>, e representa sua cor. Copie esse código em algum lugar seguro por enquanto.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Imagens">Imagens</h3>
+
+<p>Para escolher uma imagens, vá no <a href="https://www.google.com/imghp?gws_rd=ssl">Google Imagens</a> e procure por algo que se encaixe no seu site.</p>
+
+<ol>
+ <li>Quando você achar a imagem que você quer, clique nela para obter uma visão ampliada dela.</li>
+ <li>Clique com o botão direito na imagem (Ctrl + click no Mac) escolha <em>Salvar imagem como...</em> e escolha um local seguro para salvar sua imagem. Como alternativa, copie o endereço web da imagem da barra de endereço do navegador, para uso posterior.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16599/updated-google-images.png" style="border-style: solid; border-width: 1px; height: 636px; width: 750px;"></p>
+
+<p>Observe que a maioria das imagens na Web, inclusive no Imagens do Google, é protegida por direitos autorais. Para reduzir a probabilidade de violar direitos autorais, você pode usar o filtro de licenças do Google. Clique no botão <em>Ferramentas</em> e, em seguida, na opção <em>Direitos de uso</em> resultante que aparece abaixo. Você deve escolher uma opção como <em>Marcada para reutilização</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; height: 401px; width: 750px;"></p>
+
+<h3 id="Fonte">Fonte</h3>
+
+<p>Para escolher uma fonte:</p>
+
+<ol>
+ <li>Vá no <a href="http://www.google.com/fonts">Google Fontes</a> e role a lista até que você ache uma que você goste. Você também pode usar os controles à direita para filtrar os resultados.</li>
+ <li>Clique no ícone "mais" (Adicionar a) ao lado da fonte desejada.</li>
+ <li>Clique no botão "* Família Selecionada" no painel na parte inferior da página ("*" depende de quantas fontes você selecionou).</li>
+ <li>Na caixa pop-up, você pode ver e copiar as linhas de código que o Google oferece em seu editor de texto para salvar posteriormente.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="border-style: solid; border-width: 1px; height: 1016px; width: 1697px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="border-style: solid; border-width: 1px; height: 714px; width: 705px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Com será o seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
+ <li id="HTML_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
+ <li id="CSS_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
+ <li id="JavaScript_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Javascript básico</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
+ <li id="How_the_web_works"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
+</ul>