unslug pt-pt: move

10 files changed, 1815 insertions, 0 deletions

diff --git a/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html b/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..9b401915f7
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,293 @@
+---
+title: CSS - Essencial
+slug: Learn/Comecar_com_a_Web/CSS_basico
+tags:
+  - Aprender
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Estilo
+  - 'I10n:priority'
+  - Web
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}
+<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web")}}</div>
+</div>
+
+<div class="summary">
+<p>CSS (Folhas de Estilo em Cascata) é o código que se utiliza para estilizar a sua página da Web. <em>CSS - Elementar</em> guia-o através do que precisa para começar. Vamos responder a perguntas deste género: Como é que eu coloco o meu texto a preto ou vermelho? Como é que eu faço para que o meu conteúdo apareça neste lugar do ecrã? Como é que eu decoro a minha página da Web, com cores e imagens de fundo?</p>
+</div>
+
+<h2 id="Então_o_que_realmente_é_o_CSS">Então, o que realmente é o CSS?</h2>
+
+<p>Tal como o HTML, o CSS não é bem uma linguagem de programação; também não é uma linguagem de demarcação. É uma <em>linguagem de folha de estilos</em>. Isto significa que permite aplicar estilos seletivamente aos elementos nos documentos HTML. Por exemplo, para selecionar <strong>todos</strong> os elementos do <strong>parágrafo</strong> numa página HTML e transformar o texto dentro deles em vermelho, iria escrever este CSS:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}</pre>
+
+<p>Vamos tentar: copie e cole estas três linhas de CSS num novo ficheiro do editor de texto, depois grave com o nome <code>style.css</code> na diretoria <code>styles</code>.</p>
+
+<p>Mas ainda é preciso aplicar este CSS ao seu documento HTML. Se não, os estilos CSS não vão afetar a forma como o seu navegador apresenta o documento HTML. (Se não tem seguido o nosso projeto, leia <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a> e <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a> para saber o que fazer primeiro)</p>
+
+<ol>
+ <li>Abra o seu ficheiro <code>index.html</code> e cole a linha seguinte no cabeçalho (isto é, entre as marcas <code>&lt;head&gt;</code> e <code>&lt;/head&gt;</code>):
+
+  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Guarde o ficheiro <code>index.html</code> e aceda-lhe no seu navegador. Deverá ver algo deste género:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">O texto dos seus parágrafos ficou vermelho. Parabéns! Acabou de escrever com sucesso o seu primeiro CSS.</p>
+
+<h3 id="Anatomia_de_um_conjunto_de_regras_de_CSS">Anatomia de um conjunto de regras de CSS</h3>
+
+<p>Vejamos o CSS acima com um pouco mais de detalhe:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>A esta estrutura dá-se o nome <strong>conjunto de regras </strong>(geralmente, "regra" para abreviar). Repare nos nomes de cada parte:</p>
+
+<dl>
+ <dt>Seletor</dt>
+ <dd>Neste caso, é o nome do elemento HTML, no início do conjunto de regras. Seleciona o(s) elemento(s) a que vai ser aplicado o estilo (neste caso, todos os elementos <code>p</code>). Para dar estilo a outro elemento, muda-se o seletor.</dd>
+ <dt>Declaração</dt>
+ <dd>Trata-se de uma única regra, como  <code>color: red;</code>, que especifica as <strong>propriedades </strong>que se pretendem modificar no elemento.</dd>
+ <dt>Propriedades</dt>
+ <dd>São as formas como se pode estilizar o elemento HTML (Neste caso, <code>color</code> é uma propriedade dos elementos {{htmlelement("p")}}). Em CSS, pode escolher que propriedades pretende modificar na regra.</dd>
+ <dt>Valor da propriedade</dt>
+ <dd>À direita da propriedade, depois dos dois pontos (<code>:</code>), temos o <strong>valor da propriedade</strong>, que escolhe uma das possíveis aparências que a propriedade pode indicar (há muitos mais valores para <code>color</code> além de <code>red</code>).</dd>
+</dl>
+
+<p>Repare em outros aspetos importantes da sintaxe:</p>
+
+<ul>
+ <li>Cada conjunto de regras (além do seletor) tem que estar entre chavetas (<code>{}</code>).</li>
+ <li>Dentro de cada declaração, utilize dois pontos (<code>:</code>) para separar a propriedade dos seus valores.</li>
+ <li>Dentro de cada conjunto de regras, utilize ponto e vírgula (<code>;</code>) para separar cada declaração da próxima.</li>
+</ul>
+
+<p>Para modificar múltiplas propriedades, basta separá-las com o ponto e vírgula, assim:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Selecionar_múltiplos_elementos">Selecionar múltiplos elementos</h3>
+
+<p>Também pode selecionar vários elementos e aplicar um conjunto de regras único para todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo:</p>
+
+<pre class="brush: css notranslate">p, li, h1 {
+  color: red;
+}</pre>
+
+<h3 id="Diferentes_tipos_de_seletor">Diferentes tipos de seletor</h3>
+
+<p>Há muitos tipos diferentes de seletor. Por cima, apenas olhámos para <strong>seletores de elementos</strong>, que selecionam todos os elementos de determinado tipo no documento HTML a que são aplicados. Mas podemos fazer seleções mais específicas. Em baixo, estão alguns dos tipos mais comuns de seletores:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nome do seletor</th>
+   <th scope="col">O que é que este seleciona</th>
+   <th scope="col">Exemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Seletor de elemento (também chamado seletor de etiqueta ou tipo)</td>
+   <td>Todos os elementos HTML do tipo especificado.</td>
+   <td><code>p</code><br>
+    Seleciona todos os elementos <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de ID </td>
+   <td>O elemento da página com o ID especificado (numa página HTML, só pode haver um elemento para cada ID e vice-versa).</td>
+   <td><code>#my-id</code><br>
+    Seleciona <code>&lt;p id="my-id"&gt;</code> ou <code>&lt;a id="my-id"&gt;</code> (não devem existir ambos na mesma página)</td>
+  </tr>
+  <tr>
+   <td>Seletor de classe</td>
+   <td>Seleciona o(s) elementos(s) da página com a classe especificada (é possível haver elementos diferentes com a mesma classe).</td>
+   <td><code>.my-class</code><br>
+    Seleciona <code>&lt;p class="my-class"&gt;</code> e também <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de atributo</td>
+   <td>Seleciona o(s) elementos(s) que tenham o atributo dado.</td>
+   <td><code>img[src]</code><br>
+    Seleciona <code>&lt;img src="myimage.png"&gt;</code> mas não seleciona <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Seletor de Pseudo-classe</td>
+   <td>O(s) elemento(s) especificado(s), mas só quando estiverem no estado indicado. Ex: quando se tem cursor do rato sobre eles.</td>
+   <td><code>a:hover</code><br>
+    Seleciona <code>&lt;a&gt;</code>, mas só quando o cursor está sobre o <em>link</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Existem muitos mais seletores para explorar, e pode encontrar uma lista mais detalhada no nosso <a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS/Seletores">Guia de seletores</a>.</p>
+
+<h2 id="Fonte_e_texto">Fonte e texto</h2>
+
+<p>Agora que explorámos as bases do CSS, vamos acrescentar regras e informação ao nosso ficheiro <code>style.css</code> para que o exemplo tenha boa apresentação.</p>
+
+<ol>
+ <li>Primeiro, volte atrás e encontre o <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site#Tipo_de_letra">output de Google Fonts</a> que guardou num lugar seguro. Acrescente o elemento {{htmlelement("link")}} no cabeçalho do <code>index.html</code> (entre etiquetas <code>&lt;head&gt;</code> e <code>&lt;/head&gt;</code>).
+
+  <pre class="brush: html notranslate">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>De seguida, apague a regra que tinha no ficheiro <code>style.css</code>. Foi um bom teste, mas a cor vermelha não ficou muito bem.</li>
+ <li>Insira as linhas que se seguem, substituindo a linha de substituição pela linha <code>font-family</code> que obteve no site Google Fonts. (<code>font-family</code> indica o nome do tipo de letra). Esta regra estabelece um tamanho e tipo de letra global, em toda a página, já que o elemento <code>&lt;html&gt;</code> é o elemento raiz e todos os elementos aninhados herdam <code>font-size</code> e <code>font-family</code>:
+  <pre class="brush: css notranslate">html {
+  font-size: 10px; /* px significa 'píxeis': o tamnho da letra base é duma altura de 10 píxeis */
+  font-family: placeholder: aqui deve aparecero resto do output do Google fonts
+}</pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: num documento CSS, tudo o que esteja entre <code>/*</code> e <code>*/</code> é um <strong>comentário de CSS</strong>, que o navegador ignora quando processa o código. Os comentários servem para escrever notas úteis sobre o que está a fazer.</p>
+  </div>
+ </li>
+ <li>Agora estabelecemos o tamanho da letra para elementos textuais no corpo do HTML: ({{htmlelement("h1")}}, {{htmlelement("li")}}, e {{htmlelement("p")}}). Também vamos centrar o texto dos nossos títulos e especificar altura da linha de texto e espaçamento entre letras no corpo para o tornar mais legível:
+  <pre class="brush: css notranslate">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Pode ajustar os valores de <code>px</code> conforme achar que fica melhor, mas em geral, o <em>design </em>deve ter esta aparência:</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Caixas_caixas_é_tudo_sobre_caixas">Caixas, caixas, é tudo sobre caixas</h2>
+
+<p>Quando escreve CSS, poderá notar que a maior parte do esforço é referente a caixas — configurar o seu tamanho, cor, posição, etc. Pode pensar na maioria dos elementos de HTML da sua página como caixas colocadas umas sobre a outras.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Sem surpresa, a disposição de elementos em CSS assenta principalmente num <em>modelo de caixa</em><em>. </em>Cada um dos blocos que ocupa espaço na sua página tem propriedades como:</p>
+
+<ul>
+ <li><code>padding</code> (preenchimento) — espaço em volta do elemento (ex: em volta do texto de um parágrafo)</li>
+ <li><code>border</code> (contorno) — a linha que fica em torno do preenchimento</li>
+ <li><code>margin</code> (margem) — espaço exterior em torno do elemento</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>Nesta secção também vamos usar:</p>
+
+<ul>
+ <li><code>width</code> — largura do elemento</li>
+ <li><code>background-color</code> — cor de fundo que fica atrás do conteúdo e preenchimento do elemento</li>
+ <li><code>color</code> — a cor do conteúdo (geralmente o conteúdo é texto)</li>
+ <li><code>text-shadow</code> — sombreado do texto de um elemento</li>
+ <li><code>display</code><span> </span>—<span> modo de apresentação do elemento (não se preocupe ainda com detalhes)</span></li>
+</ul>
+
+<p>Portanto, vamos começar e acrescentar algum CSS à nossa página! Acrescente as novas regras no fim do ficheiro e não tenha medo de mudar os valores para ver como fica.</p>
+
+<h3 id="Alterar_a_cor_da_página">Alterar a cor da página</h3>
+
+<pre class="brush: css notranslate">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Esta regra estabelece uma cor de fundo na página inteira. Mude o código de cor para aquele que escolheu quando <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site#Cor_do_tema">planeou o seu site</a>.</p>
+
+<h3 id="Ordenar_o_corpo">Ordenar o corpo</h3>
+
+<pre class="brush: css notranslate">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Agora o elemento {{htmlelement("body")}}. Há várias declarações, então vamos ver uma de cada vez:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — Faz com que a largura seja sempre 600 píxeis.</li>
+ <li><code>margin: 0 auto;</code> — Quando se dá dois valores a <code>margin</code> ou <code>padding</code>, o primeiro afeta o espaço por cima <strong>e</strong> por baixo do elemento (neste caso, <code>0</code>), e o segundo o espaço à esquerda <strong>e</strong> à direita (<code>auto</code> é um valor especial que divide o espaço existente de forma igual entre a esquerda e a direita). Também pode utilizar um, três ou quatro valores, conforme a documentação da <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">sintaxe de <em>margin</em></a>.</li>
+ <li><code>background-color: #FF9500;</code> — como já vimos, estabelece a cor de fundo. Esta é uma tonalidade vermelho alaranjado para o corpo, em vez do azul escuro do elemento {{htmlelement("html")}}, mas esteja à vontade para experimentar outras cores.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — temos quatro valores nesta propriedade, para deixar bastante espaço em volta do conteúdo. Desta vez, fazemos com que não haja preenchimento por cima do elemento e 20 píxeis à esquerda, à direita e por baixo. Os valores estabelecem, por esta ordem, o preenchimento por cima, à direita, por baixo e à esquerda. Tal como a <code>margin</code>, pode usar um, dois ou três valores, conforme a documentação da <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Syntax">sintaxe de <em>padding</em></a>.</li>
+ <li><code>border: 5px solid black;</code> — simplesmente, cria um contorno de todos os lados do elemento, com cor preta, a traço cheio (contínuo) e espessura de 5 píxeis.</li>
+</ul>
+
+<h3 id="Posicionar_e_estilizar_o_título_da_nossa_página_principal">Posicionar e estilizar o título da nossa página principal</h3>
+
+<pre class="brush: css notranslate">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Deve ter notado que há espaço em branco horrível no topo do conteúdo da página. Isto acontece porque o navegador aplica <strong>estilo por omissão </strong>ao elemento {{htmlelement("h1")}} (entre outros), mesmo que não se tenha aplicado qualquer CSS! Embora isso possa parecer má ideia, na prática até uma página sem folha de estilos tem que ter alguma legibilidade. Para nos livrarmos deste espaço, colocamos <code>margin: 0;</code>.</p>
+
+<p>De seguida, colocámos o preenchimento por cima e por baixo a 20 píxeis, e demos ao texto a mesma cor que a cor de fundo do elemento {{htmlelement("html")}}.</p>
+
+<p>Utilizámos uma propriedade interessante, <code>text-shadow</code>, que aplica sombreado ao texto de um elemento. Estes são os quatro valores da mesma:</p>
+
+<ul>
+ <li>O primeiro valor em píxeisestabelece a <strong>distância </strong><strong>horizontal</strong> entre a sombra e o texto, ou seja, quanto ela se desvia para a direita. Um valor negativo desvia para a esquerda.</li>
+ <li>O segundo valor em píxeis estabelece a <strong>distância vertical</strong> entre a sombra e o texto, ou quanto ela se desvia para baixo. Um valor negativo desvia para cima.</li>
+ <li>O terceiro valor em píxeis é o <strong>raio de desfoque</strong> da sombra — quanto maior o valor, mais a sombra ficará esbatida.</li>
+ <li>O quarto valor é a cor da sombra.</li>
+</ul>
+
+<p>Novamente, tente experimentar os valores para ver como fica!</p>
+
+<h3 id="Centrar_a_imagem">Centrar a imagem</h3>
+
+<pre class="brush: css notranslate">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Por fim, vamos centrar a imagem para ficar melhor. Utilizámos o truque de colocar <code>margin: 0 auto</code> como fizemos com o corpo, mas temos que fazer outra coisa. O elemento {{htmlelement("body")}} está ao <strong>nível de bloco</strong>, ou seja, ocupa toda a largura da página e podem ser-lhe aplicados valores de margem, e outros valores de espaçamento. Por outro lado, as imagens são elemento <strong>em linha</strong>, a que não se podem aplicar estes valores. Então, para a margem ser aplicada à imagem, temos que lhe atribuir comportamento ao nível do bloco com <code>display: block;</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Estas instruções assumem que está a usar uma imagem mais pequena que a largura do corpo (600 píxeis). Se for maior, vai transbordar do corpo e ocupar espaço no resto da página. Para retificar isto, pode 1) reduzir a largura da imagem com um programa de <a href="https://pt.wikipedia.org/wiki/Editor_gráfico">edição gŕafica</a>, ou 2) reduzir a imagem com CSS utilizando a propriedade {{cssxref("width")}} no elemento <code>&lt;img&gt;</code> com um valor mais pequeno, como <code>400 px;</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: não se preocupe se ainda não entende <code>display: block;</code> e a distinção entre bloco e em linha (<em>block-level/inline</em>). Irá perceber à medida que estuda o CSS com mais profundidade. Pode descobrir mais sobre os diferentes valores de <em>display</em> na <a href="/pt-PT/docs/Web/CSS/display">página de referência de display</a>.</p>
+</div>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Se seguiu as instruções nesta página, a sua página deve ter este aspeto (e pode ver <a href="http://mdn.github.io/beginner-html-site-styled/">a nossa versão aqui</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Se ficou preso, pode sempre comparar o seu trabalho com <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">o exemplo terminado no GitHub</a>.</p>
+
+<p>Aqui, mal tocámos na superfície do CSS. Para saber mais, consulte o tópico de <a href="https://developer.mozilla.org/en-US/Learn/CSS">Aprender CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site da Web?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">HTML - Essencial</a></li>
+ <li><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
+ <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
+ <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></li>
+ <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a></li>
+</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..6489964938
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,119 @@
+---
+title: Lidar com ficheiros
+slug: Learn/Comecar_com_a_Web/Lidar_com_ficheiros
+tags:
+  - Beginner
+  - Ficheiros
+  - Guía
+  - HTML
+  - Programação Scripting
+  - 'l10n:priority'
+  - site da Web
+  - teoria
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Apresentacao_do_meu_site", "Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web")}}</div>
+
+<div class="summary">
+<p>Um site da internet<em> </em>consiste em muitos ficheiros: conteúdo de texto, código, folhas de estilo, conteúdo de multimédia, e assim por diante. Enquanto estiver a criar o site, tem que reunir esses ficheiros numa estrutura conveniente no seu computador local, certificar-se que os mesmos podem comunicar uns com os outros e preparar a apresentação do seu conteúdo, antes de eventualmente <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">enviar os ficheiros para um servidor</a>. Este artigo, <strong>Lidar com ficheiros</strong>, apresenta algumas questões de que deverá estar ciente para poder configurar uma estrutura de ficheiros conveniente para o seu site.</p>
+</div>
+
+<h2 id="Onde_deve_ficar_o_seu_site_no_seu_computador">Onde deve ficar o seu site no seu computador ?</h2>
+
+<p>Quando estiver a trabalhar num site localmente, no seu computador, deve manter todos os ficheiros relacionados numa única pasta que seja o reflexo da estrutura de ficheiros do site no servidor. Esta pasta pode ficar onde quiser, mas deve colocá-la num local de fácil acesso: talvez no seu Ambiente de Trabalho, a pasta do seu utilizador, ou a raiz do seu disco rígido.</p>
+
+<ol>
+ <li>Escolha um sítio para guardar os seus projetos relacionados com sites. Lá, crie uma pasta com o nome <code>projetos-web</code> (ou um nome semelhante). É aqui que vão morar todos os seus projetos de sites.</li>
+ <li>Dentro desta pasta, crie outra pasta para guardar o seu primeiro site. Pode-lhe chamar <code>site-de-teste</code> (ou algo mais criativo).</li>
+</ol>
+
+<h2 id="Um_aparte_sobre_nomes_de_pastas_e_ficheiros">Um aparte sobre nomes de pastas e ficheiros</h2>
+
+<p>Ao longo deste artigo poderá notar que os nomes que são dados às pastas e aos ficheiros estão todos em minúsculas e sem espaços. Isto porque:</p>
+
+<ol>
+ <li>Muitos computadores, particularmente servidores da internet, são sensíveis a maiúsculas. Por exemplo, se criar um ficheiro de imagem com o nome <code>site-de-teste/MinhaImagem.jpg</code> e depois noutro ficheiro tentar referir-se a ela com o nome <code>site-de-teste/minhaimagem.jpg</code>, pode não resultar.</li>
+ <li>Navegadores, servidores, e linguagens de programação não tratam os espaços da mesma forma. Por exemplo, se usar espaços no nome do ficheiro, alguns sistemas podem tratá-lo como dois nomes separados. Alguns servidores substituem os espaços por "%20" (código de carácter de espaços em URI), e assim arruínam os seus <em>links</em>.</li>
+</ol>
+
+<p>Por essas razões, é melhor habituar-se a escrever os nomes de pastas e ficheiros sem espaços e com palavras separadas por hífen, pelo menos até saber o que está a fazer. Desta forma, irá encontrar menos problemas mais tarde.</p>
+
+<p>Inicialmente, é melhor separar palavras com hífen em vez de <em>underscore</em>: <code>meu-ficheiro.html</code> em vez de <code>meu_ficheiro.html</code>, pois o motor de pesquisa Google interpreta o hífen como separador de palavras, mas não o <em>underscore</em>.</p>
+
+<h2 id="Que_estrutura_deverá_ter_o_seu_site">Que estrutura deverá ter o seu site?</h2>
+
+<p>De seguida, vamos discutir a estrutura que deve ter o site de teste. As coisas mais comuns que temos em qualquer site são um ficheiro índice e pastas que organizam os ficheiros por tipo: imagens, folhas de estilo e scripts. Vamos criá-las agora:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Este ficheiro geralmente descreve o conteúdo da sua página principal, ou seja, o texto e imagens que as pessoas veem quando visitam o site pela primeira vez. Com um editor de texto, crie um ficheiro <code>index.html</code> e guarde-o dentro da pasta <code>site-de-teste</code>.</li>
+ <li><strong>Pasta <code>images</code></strong>: Esta pasta irá conter todas as imagens do seu site. Crie um pasta com este nome dentro da pasta <code>site-de-teste</code>.</li>
+ <li><strong>Pasta <code>styles</code></strong>: Esta pasta contém o código CSS que dá estilo ao conteúdo (por exemplo, cor do texto e do fundo). Crie-a dentro da pasta <code>site-de-teste</code>.</li>
+ <li><strong>Pasta <code>scripts</code></strong>: Esta pasta contém o código JavaScript que dá interatividade ao seu site (ex: botões que carregam dados quando premidos). Crie-adentro da pasta <code>site-de-teste</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Em computadores com Windows, pode ter dificuldade em ver nomes dos ficheiros, porque no Windows tem uma opção, ligada por omissão, para <strong>Esconder extensões de ficheiros conhecidas</strong>. Em geral, pode desligá-la no Explorador do Windows, selecionar <strong>Opções de pastas...</strong>, desmarcar a opção em questão, na caixa de seleção, e clicar <strong>OK</strong>. Para mais informações sobre a sua versão específica de Windows, faça uma pesquisa na internet. </p>
+</div>
+
+<h2 id="Caminhos_de_ficheiros">Caminhos de ficheiros</h2>
+
+<p>Para permitir a comunicação entre ficheiros, é necessário estabelecer os caminhos entre eles. Para demonstrar, vamos inserir algum HTML no ficheiro <code>index.html</code> que mostra a imagem que escolheu no artigo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Qual será a aparência do meu site?</a></p>
+
+<ol>
+ <li>Copie a imagem escolhida para a pasta <code>images</code>.</li>
+ <li>Abra o ficheiro <code>index.html</code>, e copie o código exatamente como se mostra em baixo. Para já não se preocupe com o que significa — vamos olhar para estas estruturas mais tarde.
+  <pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>A linha <code>&lt;img src="" alt="My test image"&gt;</code> é o código HTML que insere uma imagem na página. É necessário dizer, neste trecho de código HTML, onde está a imagem. A mesma está dentro da diretoria <em>images</em>, a qual está na mesma diretoria que <code>index.html</code>. Para descer na estrutura de ficheiros, de <code>index.html</code> para a imagem, o caminho é <code>images/nome-da-imagem</code>. Por exemplo, se a mesma e chamasse <code>firefox-icon.png</code>, o caminho seria <code>images/firefox-icon.png</code>.</li>
+ <li>Insira este caminho no código HTML, entre as aspas neste trecho de código: <code>src=""</code>.</li>
+ <li>Guarde o ficheiro HTML, depois carregue-o no seu navegador (com duplo clique). Deve conseguir ver o novo site, com a imagem! </li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Algumas regras gerais sobre caminhos de ficheiros:</p>
+
+<ul>
+ <li>Para referir a um ficheiro na mesma pasta que o ficheiro HTML onde a mesma é referida, utilize o nome desse ficheiro. Ex: <code>minha-imagem.jpg</code>.</li>
+ <li>Para referir a um ficheiro numa sub-pasta, escreva o nome dessa sub-pasta antes do nome do ficheiro, seguido de uma barra. Ex: <code>sub-pasta/minha-imagem.jpg</code>.</li>
+ <li>Para referir um ficheiro numa diretoria <strong>acima</strong> do ficheiro HTML que a refere, escreva dois pontos finais e uma barra. Por exemplo, se <code>index.html</code> estiver numa sub-pasta, que por sua vez está localizada em <code>site-de-teste</code>; e o ficheiro <code>minha-imagem.jpg</code> estiver na pasta <code>site-de-teste</code>, pode referir <code>minha-imagem.jpg</code> (a partir de <code>index.html</code>) com <code>../my-image.jpg</code>.</li>
+ <li>Pode combiná-los como quiser. Por exemplo, <code>../subdiretoria/outra-subdiretoria/minha-imagem.jpg</code>.</li>
+</ul>
+
+<p>Por agora é tudo o que precisa de saber.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: O Windows usa barras invertidas, como no caminho <code>C:\windows</code>. Mas em HTML, isso é irrelevante — mesmo que esteja a construir o site num sistema Windows, pode usar a barra normal, <kbd>/</kbd>.</p>
+</div>
+
+<h2 id="Que_mais_deverá_ser_feito">Que mais deverá ser feito?</h2>
+
+<p>Por agora é tudo. A sua estrutura deverá ser como esta:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Apresentacao_do_meu_site", "Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
+ <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
+ <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
+ <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
+ <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site</a></li>
+ <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a web</a></li>
+</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..69fe6b79fa
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -0,0 +1,112 @@
+---
+title: Como funciona a Web
+slug: Learn/Comecar_com_a_Web/Como_funciona_a_Web
+tags:
+  - Aprender
+  - Beginner
+  - Cliente
+  - DNS
+  - HTTP
+  - IP
+  - Infraestrutura
+  - Servidor
+  - TCP
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web", "Learn/Comecar_com_a_Web")}}</div>
+
+<div class="summary">
+<p>Como a Web funciona, fornece uma visualização simplificada do que acontece quando visualiza uma página da Web num navegador da Web no seu computador ou dispositivo móvel.</p>
+</div>
+
+<p>Esta teoria não é essencial para escrever o código da Web em curto prazo, mas em pouco tempo, irá realmente começar a beneficiar da compreensão do que está a acontecer em segundo plano.</p>
+
+<h2 id="Servidores_e_clientes">Servidores e clientes</h2>
+
+<p>Os computadores ligados à Web são chamados de clientes e servidores. Um diagrama simplificado de como eles interagem, parece-se como isto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>Os clientes são os dispositivos típicos ligados à Internet dos utilizadores da Web (por exemplo, o seu computador ligado à sua <em>Wi-Fi</em> ou seu dispositivo móvel ligado à sua rede móvel) e o <em>software </em>de acesso à Internet disponível nesses dispositivos (geralmente um navegador da Web, tais como Firefox ou Chrome) .</li>
+ <li>Os servidores são computadores que armazenam os sites, páginas ou aplicações da Web. Quando um dispositivo cliente pretende aceder a uma página da Web, uma cópia da página da Web é transferida do servidor para a máquina do cliente para ser exibida no navegador da Web do utilizador.</li>
+</ul>
+
+<h2 id="As_outras_partes_da_caixa_de_ferramentas">As outras partes da caixa de ferramentas</h2>
+
+<p>O cliente e o servidor que descrevemos acima não contam toda a história. Há muitas outras partes envolvidas, e iremos descrevê-las em baixo.</p>
+
+<p>Por enquanto, vamos imaginar que a Web é uma estrada. Num extremo da estrada está o cliente, que é como a sua casa. Na outra extremidade da estrada está o servidor, que é uma loja na qual deseja comprar algo.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Além do cliente e do servidor, nós também precisamos cumprimentar:</p>
+
+<ul>
+ <li><strong>A sua conexão com a internet</strong>: Permite que envie e receba dados na rede. Ela é basicamente como a rua entre a sua casa e a loja.</li>
+ <li><strong>TCP/IP</strong>: Protocolo de Controlo de Transmissão (Transmission Control Protocol, em inglês) e o Protocolo da Internet (Internet Protocol, em inglês) são os protocolos de comunicação que definem como os dados devem viajar através da rede. Eles são como os mecanismos de transporte que permitem que faça um pedido, vá para a loja e compre as suas mercadorias. No nosso exemplo, eles são como um carro ou uma bicicleta (ou qualquer outra coisa que possa usar para se locomover).</li>
+ <li><strong>DNS</strong>: Servidores de Nome de Domínio (Domain Name Servers, em inglês) são como um livro de endereços (ou uma agenda eletrônica) de websites. Quando digita o endereço de um site no seu navegador, ele espera o DNS encontrar o endereço real da página antes que ele possa recuperar o site para o utilizador. O navegador precisa encontrar em qual servidor o site se encontra, para que assim ele possa enviar mensagens HTTP para o lugar certo (veja abaixo).  Esse processo é como o de procurar pelo endereço da loja para que possa ir até lá.</li>
+ <li><strong>HTTP</strong>: <em>Hypertext Transfer Protocol</em> é um {{Glossary("Protocol", "protocolo")}} de aplicação que define a linguagem usada para clientes e servidores comunicarem. Isto é igual à linguagem usada para comprar os bens.</li>
+ <li><strong>Ficheiros componentes</strong>: Um site é feito a partir de vários ficheiros, que são como as diferentes partes dos bens que compra da loja. Estes ficheiros pertencem a duas categorias:
+  <ul>
+   <li><strong>Ficheiros de código</strong>: Websites são principalmente construidos com HTML, CSS e JavaScript, ficara a conhecer mais tecnologias mais logo.</li>
+   <li><strong>Ativos</strong>: Isto é o nome para o resto que constitui um site, como imagens, música, vídeo, documentos Word e PDFs.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Então_o_que_acontece_exatamente">Então, o que acontece exatamente?</h2>
+
+<p>Quando escreve um endereço web no seu browser (para a nossa analogia isso é como caminhar até à loja):</p>
+
+<ol>
+ <li>O navegador vai para o servidor DNS, e encontra o endereço real do servidor onde o sítio <em>web</em> vive (encontra o endereço da loja).</li>
+ <li>O navegador envia uma mensagem de pedido HTTP ao servidor, pedindo-lhe que envie uma cópia do <em>website</em> ao cliente (vai à loja e encomenda a sua mercadoria). Esta mensagem e todos os outros dados enviados entre o cliente e o servidor, é enviada através da sua ligação à Internet utilizando TCP/IP.</li>
+ <li>Desde que o servidor aprove o pedido do cliente, o servidor envia ao cliente uma mensagem "200 OK", o que significa "Claro que pode olhar para esse <em>website</em>! Aqui está", e depois começa a enviar os ficheiros do sítio <em>web</em> para o navegador como uma série de pequenos pedaços chamados <em>packets</em> / pacotes de dados (a loja dá-lhe os seus bens, e você trá-los de volta para a sua casa).</li>
+ <li>O navegador monta os pequenos pedaços num <em>website</em> completo e mostra-lho (os bens chegam à sua porta — coisas novas e brilhantes, espetacular!).</li>
+</ol>
+
+<h2 id="DNS_explicado">DNS explicado</h2>
+
+<p>Os verdadeiros endereços <em>web</em> não são os nomes agradáveis e memoráveis que escreve na sua barra de endereços para encontrar os seus sítios <em>web</em> favoritos. São números especiais que têm este aspeto: 63.245.215.20.</p>
+
+<p>Isto chama-se um {{Glossary("IP Address", "Endereço IP")}}, e representa uma localidade única na <em>web</em>. No entanto, não é muito fácil de lembrar, pois não? É por isso que foram inventados os Servidores de Nome de Domínio. Estes são servidores especiais que correspondem a um endereço <em>web</em> que digita no seu browser (como "mozilla.org") ao endereço real (IP) do website.</p>
+
+<p>Os <em>websites</em> podem ser acedidos diretamente através dos seus endereços IP. Pode encontrar o endereço IP de um sítio <em>web</em> digitando o seu domínio numa ferramenta como o <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
+
+<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h2 id="Packets_explicados"><em>Packets </em>explicados</h2>
+
+<p>Anteriormente utilizámos o termo "packets" para descrever o formato em que os dados são enviados do servidor para o cliente. O que é que queremos dizer aqui? Basicamente, quando os dados são enviados através da web, são enviados como milhares de pequenos pedaços, para que muitos utilizadores da web possam descarregar o mesmo website ao mesmo tempo. Se os sítios web fossem enviados como um único grande pedaço, apenas um utilizador poderia descarregar um de cada vez, o que obviamente tornaria a web muito ineficiente e não muito divertida de utilizar.</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a href="/pt-PT/docs/Learn/Questoes_comuns/Como_funciona_a_Internet">Como funciona a Internet</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="Créditos">Créditos</h2>
+
+<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, por <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web", "Learn/Comecar_com_a_Web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
+ <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
+ <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
+ <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
+ <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site</a></li>
+ <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a web</a></li>
+</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html b/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..4601e08092
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,237 @@
+---
+title: HTML - Essencial
+slug: Learn/Comecar_com_a_Web/HTML_basicos
+tags:
+  - Aprender
+  - CodingScripting
+  - HTML
+  - Principiante
+  - Web
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Lidar_com_ficheiros", "Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web")}}</div>
+
+<div class="summary">
+<p>HTML (Linguagem de Marcação de Hipertexto) é o código que é utilizado para estruturar uma página da <em>web</em> e o seu conteúdo. Por exemplo, o conteúdo poderá ser estruturado dentro de um conjunto de parágrafos, uma lista de pontos com marcadores, ou utilizando imagens e tabelas de dados. Como o título sugere, este artigo irá dar-lhe uma compreensão básica do HTML e as suas funções.</p>
+</div>
+
+<h2 id="Então_o_que_é_realmente_o_HTML">Então, o que é realmente o HTML?</h2>
+
+<p>HTML não é uma linguagem de programação; é uma <em>linguagem de marcação </em>que define a estrutura do seu conteúdo. HTML consiste numa série de <strong>{{Glossary("element", "elementos")}}</strong>, que se utilizam para envolver, ou cercar, diferentes partes do conteúdo, e assim fazê-lo ter uma determinada aparência ou agir de determinada maneira. As {{Glossary("tag", "etiquetas")}} envolventes podem interligar as palavras ou imagens para outro lugar, colocar palavras em itálico, tornar a letra maior ou menor, e assim por diante. Por exemplo, veja a seguinte linha de conteúdo:</p>
+
+<pre class="notranslate">O meu gato é muito rabugento</pre>
+
+<p>Caso queiramos que a linha esteja separada de outras, podemos especificar que é um parágrafo envolvendo-a em etiquetas de parágrafo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;O meu gato é muito rabugento&lt;/p&gt;</pre>
+
+<h3 id="Anatomia_de_um_elemento_HTML">Anatomia de um elemento HTML</h3>
+
+<p>Vamos explorar este elemento de parágrafo um pouco mais.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>As partes principais do nosso elemento são:</p>
+
+<ol>
+ <li><strong>A etiqueta de abertura:</strong> Consiste no nome do elemento (neste caso, p), envolto em <strong>parênteses angulares</strong>. Isto afirma onde começa o elemento, ou onde começa a ter efeito — neste caso, onde começa o parágrafo.</li>
+ <li><strong>A etiqueta de fecho:</strong> É igual à de abertura, mas tem uma barra antes do nome do elemento. Isto afirma onde acaba o elemento — neste caso, onde fica o fim do parágrafo. Omitir a etiqueta de fecho é um erro de principiante comum e pode levar a resultados estranhos.</li>
+ <li><strong>O conteúdo:</strong> É o conteúdo do elemento, que neste caso é só texto.</li>
+ <li><strong>O elemento:</strong> A etiqueta de abertura, mais a etiqueta de fecho, mais o conteúdo, é igual ao elemento.</li>
+</ol>
+
+<p>Elementos também podem ter atributos, que se parecem assim:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Atributos contêm informação extra sobre o elemento que não quer que apareça no conteúdo. Aqui, <code>class</code> é o <em>nome </em>do atributo, e <code>editor-note</code> é o <em>valor</em> do atributo. O atributo <code>class</code> permite identificar o elemento como sendo parte de um grupo, que pode ser alvo de regras CSS e outras coisas.</p>
+
+<p>Um atributo deverá ter sempre:</p>
+
+<ol>
+ <li>Um espaço entre si o nome do elemento (ou do atributo anterior, se esse elemento já possuir um ou mais atributos).</li>
+ <li>O nome do atributo, seguido de um sinal de igual.</li>
+ <li>O valor do atributo, envolto em abre e fecha aspas.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Valores de atributos que não possuam espaço em branco ASCII (ou nenhum dos caracteres <code>"</code> <code>'</code> <code>=</code> <code>&lt;</code> <code>&gt;</code>), mas recomendado que todos os valores de atributos sejam envoltos em aspas, para tornar o código mais consistente e compreensível.</p>
+</div>
+
+<h3 id="Aninhar_elementos">Aninhar elementos</h3>
+
+<p>Também pode colocar elementos dentro de outros elementos  — chama-se a isto <strong>aninhar</strong>. Se quisermos declarar que o nosso gato é <strong>muito</strong> rabugento, podemos cercar a palavra "muito" com um elemento {{htmlelement("strong")}}, que significa que a palavra tem ênfase forte:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;O meu gato é &lt;strong&gt;muito&lt;/strong&gt; rabugento.&lt;/p&gt;</pre>
+
+<p>No entanto, tem que se certificar que os seus elementos estão devidamente aninhados: no exemplo em cima, abrimos o elemento {{htmlelement("p")}} primeiro, e depois o elemento {{htmlelement("strong")}} , portanto temos que fechar o elemento {{htmlelement("strong")}} primeiro, e só depois o {{htmlelement("p")}}. A linha seguinte está errada:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;O meu gato é &lt;strong&gt;muito rabugento.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Os elementos têm que abrir e fechar corretamente para que seja claro se estão dentro ou fora uns dos outros. Se ficarem sobrepostos como se mostrou em cima, o seu navegador vai tentar adivinhar o que quis dizer, e pode obter resultados inesperados. Então, não faça isso!</p>
+
+<h3 id="Elementos_vazios">Elementos vazios</h3>
+
+<p>Alguns elementos não têm conteúdo, aos quais chamamos <strong>elementos vazios</strong>. Veja o elemento {{htmlelement("img")}} que já temos no nosso HTML:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>O mesmo contém dois atributos, mas não há etiqueta de fecho, <code>&lt;/img&gt;</code>, nem conteúdo no seu interior, uma vez que um elemento de imagem não envolve conteúdo para o afetar. O seu propósito é incorporar uma imagem na página HTML, no local onde aparece.</p>
+
+<h3 id="Anatomia_de_um_documento_HTML">Anatomia de um documento HTML</h3>
+
+<p>Assim terminamos as bases de elementos HTML individuais, mas eles não são muito úteis sozinhos. Vamos agora ver como os elementos se combinam para formar uma página HTML inteira. Voltemos ao código que escrevemos no ficheiro de exemplo <code>index.html</code> (que conhecemos no artigo <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Lidar com ficheiros</a>):</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Aqui temos:</p>
+</div>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — o tipo de documento. Na noite dos tempos, quando HTML era jovem (cerca de 1991/2), os tipos de documento agiam como ligações para um conjunto de regras que a página HTML tinha que seguir para ser considerado HTML, que podia significar verificação automática de erros e outras coisas úteis. Contudo, hoje em dia ninguém quer saber delas, e são apenas um artefacto histórico que tem que ser incluído para tudo funcionar. Para já é só isto que precisa de saber.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — o elemento {{htmlelement("html")}}. Este elemento envolve o conteúdo de toda a página, e por vezes é conhecido como elemento de raiz.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — o elemento {{htmlelement("head")}}. Este elemento funciona como contentor para tudo o que quer incluir na página HTML que <em>não é</em> o conteúdo mostrado aos visitantes da página. Tal inclui, por exemplo, {{Glossary("keyword", "keywords")}} e uma descrição da página que é mostrada em resultados de pesquisa, CSS para definir o estilo do conteúdo, declaração do conjunto de caracteres, e mais.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — o elemento {{htmlelement("body")}}. Este elemento possui <em>todo</em> o conteúdo que quer mostrar aos utilizadores quando visitam a página, seja texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, e tudo mais.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — este elemento define que o documento deve utilizar conjunto de caracteres UTF-8, o qual inclui a maior parte dos caracteres da vasta maioria de linguagens humanas. Essencialmente, agora o ficheiro pode conter qualquer conteúdo textual que possa vir a pôr-lhe. Não há motivos para não colocar este elemento, e pode evitar problemas no futuro.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — o elemento {{htmlelement("title")}}. Define o título da página, que é o título que aparece no separador do navegador que carregou a página. Também é usado para descrever a página quando é adicionada aos marcadores/favoritos.</li>
+</ul>
+
+<h2 id="Imagens">Imagens</h2>
+
+<p>Vamos virar a nossa atenção para o elemento {{htmlelement("img")}} outra vez:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Como já referimos, incorpora uma imagem na nossa página, no local onde aparece. Para tal recorre ao atributo <code>src</code> (<em>source</em> — fonte, origem), que contém o caminho para o ficheiro de imagem.</p>
+
+<p>Também incluímos o atributo <code>alt</code> (alternativa). Neste atributo, você especifica texto descritivo para utilizadores que não conseguem ver a imagem, possivelmente porque:</p>
+
+<ol>
+ <li>Têm deficiências visuais. Utilizadores com deficiências visuais significativas costumam utilizar ferramentas chamadas leitores de ecrã que lhes lê o texto alternativo.</li>
+ <li>Alguma coisa correu mal e fez com que a imagem não fosse mostrada. Por exemplo, tente mudar deliberadamente o caminho no atributo <code>src</code> para torná-lo incorreto. Se guardar e recarregar a página, deve ver algo como isto em vez da imagem:</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>As palavras-chave sobre texto alternativo são: "texto descritivo". Ou seja, deve dar ao leitor informação suficiente para ter uma boa ideia do que a imagem transmite. Neste exemplo, o texto atual, "My test image" não é nada bom. Uma alternativa muito melhor para o nosso logótipo do Firefox seria "Logótipo do Firefox: uma raposa flamejante a rodear o mundo."</p>
+
+<p>Agora, tenta encontrar texto alternativo melhor para a tua imagem.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: saiba mais sobre acessibilidade em <a href="/pt-PT/docs/Web/Acessibilidade">MDN - Página de Acessibilidade</a>.</p>
+</div>
+
+<h2 id="Marcação_de_texto">Marcação de texto</h2>
+
+<p>Esta secção irá abranger alguns dos elementos básicos de HTML que irá utilizar para marcar texto.</p>
+
+<h3 id="Títulos">Títulos</h3>
+
+<p>Elementos de título permitem especificar que determinadas partes do seu conteúdo são títulos (ou subtítulos) do conteúdo. Da mesma forma que um livro tem um título principal, títulos de capítulos e subtítulos, um documento HTML também os pode ter. HTML contém seis níveis de títulos, {{htmlelement("h1")}}–{{htmlelement("h6")}} mas geralmente usam-se no máximo 3 ou 4:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Título principal&lt;/h1&gt;
+&lt;h2&gt;Título mais abrangente&lt;/h2&gt;
+&lt;h3&gt;Subtítulo&lt;/h3&gt;
+&lt;h4&gt;Sub-subtítulo&lt;/h4&gt;</pre>
+
+<p>Tente agora acrescentar um título à sua página HTML mesmo por cima do seu elemento {{htmlelement("img")}}.</p>
+
+<h3 id="Parágrafos">Parágrafos</h3>
+
+<p>Como já foi explicado, elementos {{htmlelement("p")}} servem para conter parágrafos; vai usá-los frequentemente quando marcar conteúdo textual:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Isto é um único parágrafo&lt;/p&gt;</pre>
+
+<p>Acrescente um ou mais parágrafos com a sua amostra de texto (conforme o artigo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Qual será a aparência do seu site da Web?</em></a>), diretamente por baixo do elemento {{htmlelement("img")}}.</p>
+
+<h3 id="Listas">Listas</h3>
+
+<p>Grande parte do conteúdo da web está em listas, e HTML tem elementos especiais para as mesmas. Marcar listas consiste sempre em pelo menos 2 elementos. As listas mais comuns são as listas ordenadas e não ordenadas:</p>
+
+<ol>
+ <li><strong>Listas não ordenadas</strong> são listas em que a ordem dos elementos não é relevante, como uma lista de compras. São envoltas no elemento {{htmlelement("ul")}}.</li>
+ <li><strong>Listas ordenadas</strong> são listas em que a ordem dos elementos é importante, como uma receita. São envoltas no elemento {{htmlelement("ol")}}.</li>
+</ol>
+
+<p>Cada artigo na lista é colocado dentro de um elemento {{htmlelement("li")}} (list item).</p>
+
+<p>Por exemplo, se quisermos transformar parte deste trecho numa lista:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Na Mozilla, somos uma comunidade global de tecnólogos, pensadores, e construtores que trabalham juntos ... &lt;/p&gt;</pre>
+
+<p>Podemos modificar a marcação desta forma:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Na Mozilla, somos uma comunidade global de&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;tecnólogos&lt;/li&gt;
+  &lt;li&gt;pensadores&lt;/li&gt;
+  &lt;li&gt;construtores&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;que trabalham juntos ... &lt;/p&gt;</pre>
+
+<p>Tente acrescentar uma lista ordenada ou não ordenada à sua página de exemplo.</p>
+
+<h2 id="Hiperligações">Hiperligações</h2>
+
+<p>As hiperligações são muito importantes — são elas que tornam a internet na internet! Para acrescentar uma ligação, precisamos de um elemento simples — {{htmlelement("a")}} — cujo "a" abrevia "âncora". Para transformar texto no seu parágrafo numa ligação, siga estes passos:</p>
+
+<ol>
+ <li>Escolha algum texto. Escolhemos o texto "Manifesto da Mozilla".</li>
+ <li>Envolva o texto num elemento {{htmlelement("a")}}, assim:
+  <pre class="brush: html notranslate">&lt;a&gt;Manifesto da Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Dê ao elemento {{htmlelement("a")}} um atributo <code>href</code>, assim:
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Manifesto da Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Preencha o valor deste atributo com o endereço web para o qual quer ligar a hiperligação:
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/pt-PT/about/manifesto/"&gt;Manifesto da Mozilla&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Pode obter resultados inesperados se omitir a parte do <em>protocolo</em> no início do endereço web (<code>https://</code> ou <code>http://</code>). Depois de criar uma hiperligação, clique para assegurar que está a enviá-lo para onde é pretendido.</p>
+
+<div class="note">
+<p><code>href</code> pode, à primeira vista, parecer uma escolha obscura para o nome de um atributo. Se tiver dificuldades em lembrar-se dele, recorde que significa <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p>
+</div>
+
+<p>Agora, acrescente a hiperligação à sua página, se ainda não o fez.</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Se seguiu todas as instruções nesta página, deve ter conseguido uma página que se assemelha à página em baixo (também pode <a href="http://mdn.github.io/beginner-html-site/">vê-la aqui</a>):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Se ficou preso, pode comparar o seu trabalho com o <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">exemplo do código terminado </a>no GitHub.</p>
+
+<p>Aqui, mal tocámos na superfície da linguagem HTML. Para descobrir mais, dirija-se ao nosso tópico sobre <a href="/pt-PT/docs/Learn/HTML">Aprender HTML</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Lidar_com_ficheiros","Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Qual será a aparência do seu site da Web</a><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
+ <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial </a></li>
+ <li><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
+ <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
+ <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></li>
+ <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a></li>
+</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/index.html b/files/pt-pt/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..59a4431592
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,65 @@
+---
+title: Primeiros passos na Web
+slug: Learn/Comecar_com_a_Web
+tags:
+  - Beginner
+  - CSS
+  - Desenho
+  - Guía
+  - HTML
+  - 'I10n:priority'
+  - Index
+  - publicação
+  - teoria
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><strong>Iniciação à Web</strong> é uma série concisa introduzindo-lhe os aspetos práticos do desenvolvimento da Web<em>. </em>Irá configurar as ferramentas necessárias para criar uma página da Web simples e publicar o seu próprio código simples.</p>
+</div>
+
+<h2 id="A_história_do_seu_primeiro_site_da_Web">A história do seu primeiro <em>site </em>da Web</h2>
+
+<p>É muito trabalho para criar um site da <em>Web </em>profissional, por isso, se é novo no desenvolvimento da Web, nós encorajamos que comece por uma coisa pequena. Não irá criar outro Facebook de imediato, mas não é difícil ter o seu próprio site da Web simples <em>on-line</em>. Vamos lá começar.</p>
+
+<p>Ao trabalhar com os artigos listados abaixo em ordem, irá passar do nada para ter a sua primeira página da Web <em>on-line</em>. Vamos lá!</p>
+
+<h3 id="Instalar_software_básico"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></h3>
+
+<p>Quando se trata de ferramentas para criar um site da Web, há muito a escolher. Se está apenas a começar, pode ficar confuso com a variedade de editores de código, estruturas e ferramentas de teste disponíveis. Em <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a>, nós mostramos-lhe passo-a-passo como instalar apenas o software necessário para iniciar um desenvolvimento da <em>web</em> básico.</p>
+
+<h3 id="Qual_será_a_aparência_do_seu_site_da_Web"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site da Web?</a></h3>
+
+<p>Antes de começar a escrever o código do seu site da Web, deverá planeá-lo primeiro. Que informação está a apresentar? Que tipo de letra e cores está a utilizar? <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Como é que será apresentado o seu site da Web</a>? Nós descrevemos um método simples que pode seguir para planear o conteúdo e o desenho do seu site.</p>
+
+<h3 id="Lidar_com_ficheiros"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></h3>
+
+<p>Um site consiste em muitos ficheiros: conteúdo de texto, código, <em>stylesheets</em>, conteúdo de média, e mais. Quando constrói um site, precisa de organizar os seus ficheiros e certificar-se que podem comunicar uns com os outros. <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Lidar com ficheiros</a> explica como criar uma estrutura para os ficheiros do seu site e quais as questões que devem ser do seu conhecimento.</p>
+
+<h3 id="Básicos_de_HTML"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">Básicos de HTML</a></h3>
+
+<p><em>Hypertext Markup Language</em> (HTML) é o código que usa para estruturar, dar significado, e propósito ao seu conteúdo de <em>web</em>. Por exemplo, é o meu conteúdo um conjunto de parágrafos, ou uma lista de pontos? Tenho imagens inseridas na minha página? O <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a> fornece informação suficiente para o familiarizar com o HTML, sem o sobrecarregar.</p>
+
+<h3 id="Básicos_de_CSS"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">Básicos de CSS</a></h3>
+
+<p>Cascading Stylesheets (CSS) é o código que usa para decorar o seu site. Por exemplo, quer o texto colorido negro ou vermelho? Onde desenhar o conteúdo no ecrã? Que imagens de fundo e cores deve usar para decorar o site? <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a> leva-o através do que precisa para começar.</p>
+
+<h3 id="Básicos_de_JavaScript"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">Básicos de JavaScript</a></h3>
+
+<p>JavaScript é a linguagem de programação que utiliza para adicionar funcionalidades interativas ao seu website, por exemplo, jogos, coisas que acontecem quando botões são premidos ou quando dados são introduzidos em formulários, efeitos de estilo dinâmicos, animação, e muito mais. <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a> dá-lhe uma ideia do que é possível com esta linguagem emocionante, e como começar.</p>
+
+<h3 id="Publicar_o_seu_site_da_Web"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></h3>
+
+<p>Após de escrever o código e organizar os ficheiros que compõem o seu site, tem de o colocar online para que as pessoas o possam encontrar. "Publicar o seu site da Web" descreve como colocar o seu código de amostra simples online com o mínimo de esforço.</p>
+
+<h3 id="Como_é_que_funciona_a_Web"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como é que funciona a Web</a></h3>
+
+<p>Quando acede ao seu site favorito, muitas coisas complicadas acontecem em segundo plano de que poderá não ter conhecimento. <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a> descreve o que acontece quando visualiza uma página da web no seu computador.</p>
+
+<h2 id="Consulte_também">Consulte também</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a> (Inglês): Uma série fantástica de vídeos a explicar os fundamentos da <em>web</em>, dirigido a totais iniciantes de desenvolvimento da <em>web</em>. Criado por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</li>
+ <li><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/A_web_e_os_padroes_da_web">A Web e os padrões da Web</a>: Este artigo oferece detalhes úteis acerca da <em>web</em> — como foi inicialmente desenvolvida, o que são as tecnologias padrão da <em>web</em>, como trabalhar em equipa, porque ser um "programador da <em>web</em>" é uma carreira excelente, e que melhores práticas irá aprender durante o curso.</li>
+</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..ebc5ddd3e3
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,165 @@
+---
+title: Instalar software básico
+slug: Learn/Comecar_com_a_Web/Installing_basic_software
+tags:
+  - Aprender
+  - Beginner
+  - Configurar
+  - Ferramentas
+  - Mecânicas da Web
+  - Navegador
+  - editor de texto
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Comecar_com_a_Web/Apresentacao_do_meu_site", "Learn/Comecar_com_a_Web")}}</div>
+
+<div class="summary">
+<p>Neste artigo<em>, </em>mostramos-lhe de que ferramentas precisa para desenvolvimento da Web básico, e como instalá-las corretamente.</p>
+</div>
+
+<h2 id="Que_ferramentas_é_que_os_profissionais_utilizam">Que ferramentas é que os profissionais utilizam?</h2>
+
+<ul>
+ <li><strong>Um computador</strong>. Até pode parecer óbvio, mas alguns de vocês estão a ler este artigo através do telefone ou numa biblioteca com um computador. Para desenvolvimento sério, é melhor investir num PC ou num portátil, seja Windows, Mac, ou Linux.</li>
+ <li><strong>Um editor de </strong><strong>texto</strong>, para escrever o código. Pode ser um editor de texto simples (ex: <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, ou <a href="https://www.vim.org/">VIM</a>), ou pode ser um editor híbrido (ex: <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver </a>ou <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Programas de <em>Office</em> não são adequados, já que dependem de elementos escondidos que interferem com os mecanismos de desenho dos navegadores.</li>
+ <li><strong>Navegadores da Web</strong>, para testar o código. Atualmente, os mais utilizados são <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> e <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Também deve testar o seu site em dispositivos móveis ou navegadores antigos que por algum motivo ainda sejam utilizados pelo seu público-alvo (como o IE 8–10). <a href="https://lynx.browser.org/">Lynx</a>, um navegador da web de terminal baseado em texto, é ótimo para ver como o seu site é experienciado por utilizadores com deficiência visual.</li>
+ <li><strong>Um editor de gráficos</strong>, como o <a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.figma.com/">Figma</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, ou <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, para criar imagens para a sua página da internet.</li>
+ <li><strong>Um sistema de controlo de versões</strong>, para gerir ficheiros em servidores, colaborar num projeto de equipa, partilhar código e recursos, e evitar alterações conflituosas. Agora <a href="http://git-scm.com/">Git</a> é a ferramenta de controlo de versões mais popular e o serviço de hospedagem de código <a href="https://github.com/">GitHub</a>, baseado no mesmo, também é largamente utilizado.</li>
+ <li><strong>Um programa de FTP</strong>, utilizado em contas de hospedagem de sites para gerir ficheiros no servidor (o <a href="http://git-scm.com/">Git</a> cada vez mais substitui FTP neste aspeto). Há diversos programas de (S)FTP como <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, e <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Um sistema de automatização</strong> como <a href="https://webpack.js.org/">Webpack</a>, <a href="http://gruntjs.com/">Grunt</a> ou <a href="http://gulpjs.com/">Gulp</a> para automatizar tarefas repetitivas, como minimizar o código e realizar testes.</li>
+ <li><em>Templates</em>, bibliotecas, <em>frameworks</em>, etc., para escrever mais rapidamente e facilmente o código relativo a funcionalidades comuns. Uma biblioteca tende a ser um ficheiro JavaScript ou CSS existente que lhe proporciona uma funcionalidade pronta a ser utilizada no seu código. Uma <em>framework</em> expande sobre esta, oferecendo-lhe um sistema completo com sintaxes personalizadas para que possa escrever uma aplicação <em>web</em> em cima.</li>
+ <li>E ainda mais ferramentas!</li>
+</ul>
+
+<h2 id="De_que_ferramentas_realmente_preciso_de_momento">De que ferramentas realmente preciso, de momento?</h2>
+
+<p>Parece uma lista assustadora, mas felizmente pode começar a desenvolver para a <em>web</em> sem saber nada sobre a maioria daquelas coisas. Neste artigo instalamos o mínimo dos mínimos — editor de texto e navegadores modernos.</p>
+
+<h3 id="Instalar_um_editor_de_texto">Instalar um editor de texto</h3>
+
+<p>Provavelmente já tem um editor de texto simples no seu computador. O Windows inclui, de fábrica, o Bloco de Notas (<a href="https://pt.wikipedia.org/wiki/Bloco_de_Notas">Notepad</a>) e o macOS vem com o Editor de Texto (<a href="https://pt.wikipedia.org/wiki/TextEdit">TextEdit</a>). Em distribuições de Linux, varia; Ubuntu vem com o <a href="https://pt.wikipedia.org/wiki/Gedit">gedit</a>.</p>
+
+<p>Para desenvolvimento na Web, há alternativas mais completas que o Notepad ou TextEdit. Propomos-lhe começar com o <a href="https://code.visualstudio.com/">Visual Studio Code</a>, um editor gratuito que oferece pré-visualização em tempo real e sugestões de código.</p>
+
+<div class="blockIndicator note">
+<p>Não confundir Notepad (Bloco de Notas) com Wordpad! Este último é equiparável a programas de <em>Office</em>, que não são adequados para escrever código de computador, como já foi referido. </p>
+</div>
+
+<h3 id="Instalar_navegadores_da_Web_modernos">Instalar navegadores da Web modernos</h3>
+
+<p>Antes de avançar, deve escolher uns navegadores que possa ter à mão para realizar testes. Escolha o seu sistema operativo e faça clique nos <em>links</em> para descarregar o programa de instalação respetivo dos seus navegadores preferidos:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>, <a href="https://brave.com">Brave</a> (Windows 10 já vem com Edge de fábrica; se possuir Windows 7 ou posterior, pode instalar Internet Explorer 11; se não, instale um dos outros navegadores).</li>
+ <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari vem de fábrica no iOS e macOS).</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>Internet Explorer (IE) não é compatível com funções da <em>web</em> modernas e pode não conseguir correr o seu projeto. Tipicamente não será necessário fazer os seus projetos compatíveis com o IE, pois muito poucas pessoas ainda a utilizam - certamente não se preocupe muito com isso enquanto está a aprender. Por vezes pode deparar-se com um projeto que requer apoio para o mesmo.</p>
+</div>
+
+<h3 id="Instalar_um_servidor_da_Web_local">Instalar um servidor da Web local</h3>
+
+<p>Alguns exemplos terão de ser executados através de um servidor da Web para funcionar com sucesso. Pode aprender como fazer isto no artigo <a href="/pt-PT/docs/Learn/Questoes_comuns/Congiurar_um_servidor_de_testes_local">como configurar um servidor local de testes?</a></p>
+
+<div>{{NextMenu("Learn/Comecar_com_a_Web/Apresentacao_do_meu_site", "Learn/Comecar_com_a_Web")}}</div>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
+ <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
+ <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
+ <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
+ <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site na web</a></li>
+ <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Como funciona a web</a></li>
+</ul>
+
+<div id="SL_balloon_obj" style="display: block;">
+<div class="SL_ImTranslatorLogo" id="SL_button"></div>
+
+<div id="SL_shadow_translation_result2" style="display: none;"></div>
+
+<div id="SL_shadow_translator" style="display: none;">
+<div id="SL_planshet">
+<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
+
+<div id="SL_Bproviders">
+<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
+</div>
+
+<div id="SL_alert_bbl" style="display: none;">
+<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
+
+<div id="SL_alert_cont"></div>
+</div>
+
+<div id="SL_TB">
+<table id="SL_tables">
+ <tbody>
+  <tr>
+   <td class="SL_td"><input></td>
+   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"></div>
+   </td>
+   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"></div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"></div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_font_patch"></div>
+
+    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"></div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"></div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="SL_shadow_translation_result"></div>
+
+<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
+
+<div id="SL_player2"></div>
+
+<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
+
+<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
+<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
+
+<table id="SL_tbl_opt" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><input></td>
+   <td>
+    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"></div>
+   </td>
+   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
+   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..fec3caaf51
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,413 @@
+---
+title: JavaScript - Essencial
+slug: Learn/Comecar_com_a_Web/Elementar_de_JavaScript
+tags:
+  - Aprender
+  - Beginner
+  - CodingScripting
+  - JavaScript
+  - Web
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web", "Learn/Comecar_com_a_Web")}}</div>
+
+<div class="summary">
+<p>JavaScript é uma linguagem de programação que dá interatividade ao seu website (sob a forma, por exemplo, de jogos, respostas quando os botões são pressionados ou quando são inseridos dados nos formulários, estilos dinâmicos ou animações). Este artigo faz uma introdução a esta linguagem excitante e dá-lhe uma ideia do que é possível.</p>
+</div>
+
+<h2 id="O_que_é_JavaScript_realmente">O que é JavaScript, realmente?</h2>
+
+<p>{{Glossary("JavaScript")}} (abreviado "JS") é uma {{Glossary("Dynamic programming language", "linguagem de programação dinâmica")}} completa que, quando é aplicada a um documento {{Glossary("HTML")}}, produz interatividade dinânimca no website. Foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Mozilla Foundation, e da Mozilla Corporation.</p>
+
+<p>JavaScript é incrivelmente versátil. Pode começar em ponto pequeno, com carrosséis, galerias de imagens, <em>layouts </em>flutuantes, e mensagens quando se prime um botão. Depois de ganhar experiência, será capaz de criar jogos, gráficos 2D e 3D animados, aplicações completas conduzidas por bases-de-dados e muito mais!</p>
+
+<p>JavaScript é relativamente compacta e muito flexível. Os programadores já escreveram uma grande variedade de ferramentas sobre o núcleo desta linguagem, o que abriu portas a uma vasta quantidade de funcionalidade extra com esforço mínimo. Isto inclui:</p>
+
+<ul>
+ <li>{{Glossary("API","API")}} de navegadores — São as API incluídas nos navegadores, que proporcionam funcionalidades como criar HTML dinamicamente e definir estilos CSS, agregar e manipular uma transmissão de vídeo da <em>webcam</em> do utilizador, ou gerar gráficos 3D graphics e amostras de som.</li>
+ <li>API de terceiros — que permitem aos programadores incorporar funcionalidade nos seus sites de outros fornecedores de conteúdo, como Twitter ou Facebook.</li>
+ <li>Framework e bibliotecas de terceiros — que podem ser aplicadas ao HTML e assim permitem construir sites e aplicações rapidamente.</li>
+</ul>
+
+<p>Uma vez que este artigo é apenas uma introdução ligeira a JavaScript, não vamos confundi-lo com detalhes sobre a diferença entre JavaScript puro e as ferramentas enumeradas em cima. Poderá aprender esse detalhe mais tarde, na nossa <a href="/pt-PT/docs/Learn/JavaScript">área de aprendizagem de JavaScript</a>, e no resto da MDN.</p>
+
+<p>De seguida vamos introduzi-lo a alguns aspetos do núcleo da linguagem (JS puro, sem ferramentas), e também vai jogar com algumas funcionalidades da API do navegador. Divirta-se!</p>
+
+<h2 id="Um_exemplo_olá_mundo">Um exemplo "olá mundo"</h2>
+
+<p>A secção anterior deve parecer mesmo empolgante — JavaScript é uma das tecnologias web mais animadas, e à medida que se torna bom a usá-la, os seus sites entrarão numa nova dimensão de poder e creatividade.</p>
+
+<p>Contudo, ficar confortável com JavaScript é um pouco mais difícil do que ficar confortável com HTML e CSS. Terá que começar com projetos pequenos e prosseguir com passos pequenos e consistentes. Para começar, vamos mostrar como adicionar JavaScript básico à sua página, criando um exemplo "hello world" / "olá mundo!" (<a href="https://pt.wikipedia.org/wiki/Programa_Olá_Mundo">o padrão de exemplos básicos de programação</a>).</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Se não tem seguido o resto deste curso, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">descarregue este exemplo de código </a>e utilize-o como ponto de partida.</p>
+</div>
+
+<ol>
+ <li>Primeiro, crie uma pasta "scripts" (sem aspas) na raíz do seu site de testes. Depois, dento desta pasta, crie um ficheiro chamado <code>main.js</code>.</li>
+ <li>A seguir, no ficheiro <code>index.html</code> introduza o elemento seguinte numa linha nova mesmo antes da etiqueta de fechi <code>&lt;/body&gt;</code>:
+  <pre class="brush: html notranslate">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Basicamente isto faz o mesmo que o elemento {{htmlelement("link")}} faz com CSS — aplica o código JavaScript à página, para que surta efeito no HTML (juntamente com o CSS, e outros recursos da página).</li>
+ <li>Agora adicione o código seguinte ao ficheiro <code>main.js</code>:
+  <pre class="brush: js notranslate">var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Olá mundo!';</pre>
+ </li>
+ <li>Finalmente, certifique-se que guardou as alterações aos ficheiros HTML e JavaScript, e carregue o ficheiro <code>index.html</code> no navegador. Deverá ver algo como:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: O motivo pelo qual pusemos o elemento {{htmlelement("script")}} no fim do ficheiro HTML é que os elementos são carregados pelo navaegador na ordem em que aparecem no ficheiro. Se o JavaScript é carregado primeiro e tem que afetar o HTML por baixo dele, pode não funcionar, já que o código JavaScript seria carregado antes do HTML que era suposto modificar. Assim, colocar o JavaScript no fim do ficheiro HTML costuma ser a melhor estratégia.</p>
+</div>
+
+<h3 id="O_que_aconteceu">O que aconteceu?</h3>
+
+<p>O texto do título foi mudado para "Hello world!", utilizando JavaScript. Isto foi feito com a função <code>{{domxref("Document.querySelector", "querySelector()")}}</code> para obter uma referência do título e guardá-la numa variável <code>myHeading</code>. Isto é semelhante ao que fizémos com seletores CSS. Quando se pretende fazer algo com um elemento, há que selecioná-lo primeiro.</p>
+
+<p>Depois, muda-se o valor da propriedade <code>{{domxref("Node.textContent", "textContent")}}</code> da variável <code>myHeading</code> (a qual representa o conteúdo textual do título) para "Olá Mundo!".</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Ambas as funções utilizadas fazem parte da <a href="/en-US/docs/Web/API/Document_Object_Model">API do Document Object Model (DOM) </a>, o qual permite manipular documentos HTML.</p>
+</div>
+
+<h2 id="Curso_intensivo_das_bases_da_linguagem">Curso intensivo das bases da linguagem</h2>
+
+<p>Vamos explicar algumas funcionalidades fundamentais da linguagem JavaScript, para permitir uma melhor compreensão de como a mesma funciona. Note que estas funcionalidades são comuns a todas as linguagens de programação, por isso, se dominar estes fundamentos, estará no bom caminho para programar praticamente qualquer coisa!</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Neste artigo, tente introduzir os exemplos de código na consola JavaScript para ver o que acontece. Para mais detalhes sobre a consola JavaScript, veja o artigo <a href="/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">Descobrir as ferramentas de desenvolvimentos do navegador</a>.</p>
+</div>
+
+<h3 id="Variáveis">Variáveis</h3>
+
+<p>{{Glossary("Variable", "Variáveis")}} são "recipientes" em que pode guardar valores. Comece por declarar a variável com a palavra-chave <code>var</code>, seguida de qualquer nome que lhe queira dar:</p>
+
+<pre class="brush: js notranslate">var minhaVariavel;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: O ponto e vírgula indica onde termina a instrução; apenas é estritamente necessário quando pretende separar instruções numa só linha. Contudo, algumas pessoas acham que é boa prática colocar este sinal no fim de cada instrução. Há mais regras sobre quando se deve ou não utilizá-lo — veja o artigo <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript (inglês)</a> para obter mais detalhes.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: O nome da varíavel pode ser quase tudo, mas há restrições (veja este <a href="http://www.codelifter.com/main/tips/tip_020.shtml">artigo sobre regras para dar nome às variáveis (inglês)</a>). Se não tem a certeza, pode <a href="https://mothereff.in/js-variables">verificar o nome da sua variável</a> para assegurar que é válido.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: JavaScript é sensível a maiúsculas — <code>minhaVariavel</code> é uma variável diferente de <code>minhavariavel</code>. Se tiver encontrar problemas depois de escrever p código, verifique as maiúsculas e minúsculas!</p>
+</div>
+
+<p>Depois de declarar a variável, pode atribuir-lhe um valor:</p>
+
+<pre class="brush: js notranslate">minhaVariavel = 'Bob';</pre>
+
+<p>Pode efetuar ambas as operações com uma só instrução:</p>
+
+<pre class="brush: js notranslate">var myVariable = 'Bob';</pre>
+
+<p>O valor é obtido simplesmente escrevendo o nome da variável:</p>
+
+<pre class="brush: js notranslate">myVariable;</pre>
+
+<p>Depois de lhe dar um valor, pode optar por mudá-lo mais tarde:</p>
+
+<pre class="notranslate">var minhaVariavel = 'Bob';
+minhaVariavel = 'Steve';</pre>
+
+<p>Atenção que as variáveis podem ter valores com diferentes <a href="/en-US/docs/Web/JavaScript/Data_structures">tipos de de dados</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variável</th>
+   <th scope="col">Explicação</th>
+   <th scope="col">Exemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Uma sequência de texto conhecido como s<em>tring</em> ou cadeia de caracteres. Para indicar que é uma string, envolve-se em plicas <kbd>'</kbd>.</td>
+   <td><code>var minhaVariavel = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Um número. Não tem plicas em sua volta.</td>
+   <td><code>var minhaVariavel</code><code> = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Valor que ou é verdadeiro ou falso. As palavras <code>true</code> e <code>false</code> são palavras-chave em JS, e não precisam de plicas.</td>
+   <td><code>var minhaVariavel = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Estrutura que permite guardar múltiplos valores numa só referência.</td>
+   <td><code>var minhaVariavel = [1,'Bob','Steve',10];</code><br>
+    Cada elemento da Array é referido desta forma (começa em zero):<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>Pode ser qualquer coisa. Em JavaScript, tudo é um objeto e pode guardar-se numa variável. Mantenha isto em mente enquanto aprende.</td>
+   <td><code>var minhaVariavel = document.querySelector('h1');</code><br>
+    Assim como todos os exemplos anteriores.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Então para que precisamos das variáveis? Bem, são necessárias para qualquer tarefa interessante em programação. Se não houvesse valores que mudassem, não seria possível criar nada que fosse dinâmico, como personalizar uma mensagem de boas vindas ou mudar a imagem que se está a ver numa galeria.</p>
+
+<h3 id="Comentários">Comentários</h3>
+
+<p>Pode deixar comentários no seu código JavaScript, tal como em CSS:</p>
+
+<pre class="brush: js notranslate">/*
+Tudo entre estas marcas é um comentário.
+*/</pre>
+
+<p>Se o comentário não contiver quebras de linha, deve ser mais fácil utilizar duas barras, assim:</p>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">// Isto é um comentário
+</pre>
+
+<h3 id="Operadores">Operadores</h3>
+
+<p>Um <code>{{Glossary("operator")}}</code> é um símbolo matemático que produz o resultado de uma operação entre dois valores (que podem ser variáveis). Na tabela seguinte constam alguns dos operadores mais simples, juntamente com alguns exemplos que pode experimentar na consola de JavaScript.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Operador</th>
+   <th scope="col">Explicação</th>
+   <th scope="col">Símbolo(s)</th>
+   <th scope="col">Exemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Adição</th>
+   <td>Soma números ou junta duas strings.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Subtração, Multiplicação, Divisão</th>
+   <td>Comportam-se com esperado em aritmética.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // em JS, o sinal de "vezes" é um asterisco<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Atribuição</th>
+   <td>Já vimos isto: atribui um valor a uma variável.</td>
+   <td><code>=</code></td>
+   <td><code>var minhaVariavel = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Igualdade</th>
+   <td>Faz um teste para verificar se dois valores são iguais e retorna um valor booleano (<code>true</code>/<code>false</code>).</td>
+   <td><code>===</code></td>
+   <td><code>var minhaVariavel = 3;<br>
+    minhaVariavel === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Negação, Desigualdade</th>
+   <td>Devolve o valor logicamente oposto, ou seja, torna o verdadeiro em falso e vice-versa. When it is used alongside the Equality operator, the negation operator tests whether two values are <em>not</em> equal.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>The basic expression is <code>true</code>, but the comparison returns <code>false</code> because we've negated it:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>Verificar se "a <code>minhaVariavel</code> NÃO é igual a 3". Retorna <code>false</code> porque <code>minhaVariavel</code> é de facto igual a 3.</p>
+
+    <p><code><code>var </code>minhaVariavel<code> = 3;</code><br>
+     minhaVariavel !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Há muito mais operadores a explorar, mas por agora basta. Veja uma lista completa no artigo <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressões e operadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Misturar tipos de dados pode ter resultados estranhos, então certifique-se que está a utilizar as variáveis corretamente e que os resultados estão dentro do esperado. Por exemplo, introduza <code>"35" + "25"</code> na consola. Porque é que não faz a soma dos números? Porque as aspas tornam os números em strings, então em vez de somar, fez a concatenção das strings. Se introduzir, <code>35 + 25</code> já obterá o resultado correto.</p>
+</div>
+
+<h3 id="Condições">Condições</h3>
+
+<p>Condições são estruturas de código que permitem, em função do valor lógico (verdadeiro/falso) de uma expressão, executar código de entre várias alterantivas. Uma forma comum de uma condiçães é a instrução <code>if ... else</code> (se ... senão). Por exemplo:</p>
+
+<pre class="brush: js notranslate">var gelado = 'chocolate';
+if (gelado === 'chocolate') {
+  alert('Viva, adoro gelado de chocolate!');
+} else {
+  alert('Ohhhh, mas o meu favorito é chocolate...');
+}</pre>
+
+<p>A expressão dentro de parênteses em <code>if ( ... )</code> é a condição — utilza o operador de igualdade (como foi descrito em cima) para comparar a variável <code>gelado</code> com a string <code>'chocolate'</code> e assim verificar se são iguais. Caso esta comparação devolva <code>true</code>, é executado o primeiro bloco de código. Se não for verdadeira, não é executado o primeiro mas sim o segundo bloco de código, depois da instrução <code>else</code>.</p>
+
+<h3 id="Funções">Funções</h3>
+
+<p>{{Glossary("Function", "Functions")}} são uma maneira de juntar uma funcionalidade ou um conjunto instruções que se pretende reutilizar. Quando se pretende utilizar esta funcionalidade, chama-se a função pelo nome, em vez de voltar a escrever o código em cada utilização. Já pudémos ver a utilização de algumas funções, por exemplo:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">var minhaVariavel = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>Estas funções, <code>document.querySelector</code> e <code>alert</code>, estão incluídas no navegador para serem utilizadas sempre que necessário.</p>
+
+<p>Quando vê algo que parece um nome de uma variável mas tem parênteses à direita— <code>()</code> —  é provavelmente uma função. As funções costumam possuir {{Glossary("Argument", "arguments")}} — dados de que necessitam para fazer o seu trabalho. Estes são passados dentros dos parênteses, separados por vírgulas quando há mais do que um.</p>
+
+<p>Por exemplo, a função <code>alert()</code> faz aparecer um "pop-up" na janela do navegador, mas é preciso dar-lhe uma string como argumento para que ela saiba o que escrever.</p>
+
+<p>E as boa notícia é que pode definir as suas próprias funções. Neste exemplo escrevemos uma função simples que aceita dois argumentos numéricos e multiplica-os:</p>
+
+<pre class="brush: js notranslate">function multiplicar(num1,num2) {
+  var resultado = num1 * num2;
+  return resultado;
+}</pre>
+
+<p>Tente declarar esta função na consola e depois testá-la com vários argumentos. Por exemplo:</p>
+
+<pre class="brush: js notranslate">multiplicar(4, 7);
+multiplicar(20, 20);
+multiplicar(0.5, 3);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: A instrução <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> diz ao navegador para devolver/retornar a variável <code>result</code> para fora da função para que o seu valor possa ser utilizado. Isto é necessário porque variáveis definidas dentro das funções só estão disponíveis dentro dessas funções — a essa particularidade chama-se o âmbito da variável ({{Glossary("Scope", "scoping")}}). (Leia mais sobre <a href="/pt-PT/docs/Web/JavaScript/Guia/Gramática_e_tipos#Variable_scope">âmbito de variáveis</a>)</p>
+</div>
+
+<h3 id="Eventos">Eventos</h3>
+
+<p>Num site, interactividade a sério precisa de eventos. Eles são estruturas de código que esperam que algo aconteça no navegador e respondem executando código. O exemplo mais óbvio é o <a href="/en-US/docs/Web/Events/click">evento de clique</a>, que é enviado pelo navegador quando se clica em algo com o rato. Para demonstrar, introduza isto na sua consola, e depois clique na página atual:</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {
+    alert('Ai! Para de me picar!');
+}</pre>
+
+<p>Há muitas maneiras de associar um evento a um elemento. Aqui, selecionamos o elemento {{htmlelement("html")}}, atribuímos à sua propriedade <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> o manuseador do evento (<em>event handler</em>), que neste caso é uma função anónima (sem nome), que contém o código que queremos que o evento de clique execute.</p>
+
+<p>Note que isto:</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre>
+
+<p>É equivalente a isto:</p>
+
+<pre class="brush: js notranslate">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>Só que o primeiro é mais curto.</p>
+
+<h2 id="Supercarregar_o_nosso_site-exemplo">Supercarregar o nosso site-exemplo</h2>
+
+<p>Agora que que já vimos as bases de JavaScript, vamos acrescentar umas funcionalidades fixes ao nosso site para ver o que é possível.</p>
+
+<h3 id="Acrescentar_um_alterador_de_imagens">Acrescentar um alterador de imagens</h3>
+
+<p>Nesta secção, vamos acrescentar uma imagem adicional ao nosso site com funções da API da DOM, utilizando JavaScript para mudar alternar entre as duas imagens quando se clica nelas.</p>
+
+<ol>
+ <li>Primeiro, encontre outra imagem que goste de ter no seu site. Certifique-se que o tamanho é o mais próximo possível da primeira imagem.</li>
+ <li>Guarde-a na pasta <code>images</code>.</li>
+ <li>Mude o nome para "firefox2.png" (sem aspas).</li>
+ <li>Vá ao ficheiro <code>main.js</code>, e introduza o seguinte código JavaScript. (Apague o código do "olá mundo", se ainda lá estiver)
+  <pre class="brush: js notranslate">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Guarde todos os ficheiros e carregue o <code>index.html</code> no navegador. Agora, quando clicar sobre a imagem, ela deve mudar para a outra!</li>
+</ol>
+
+<p>Guardou-se uma referência para o elemento {{htmlelement("img")}} na variável <code>myImage</code>. Depois, atribui-se à propriedade <code>onclick</code> desta variável uma função anónima. Agora, sempre que se clica no elemento:</p>
+
+<ol>
+ <li>Obtem-se o valor do atributo <code>src</code>.</li>
+ <li>Utiliza-se uma condição para averiguar se o valor do mesmo é igual ao caminho da primeira imagem:
+  <ol>
+   <li>Se for, muda-se para o caminho da 2ª imagem, o que a obriga a ser carregada no elemento {{htmlelement("img")}}.</li>
+   <li>Se não for (e portanto, já se trocaram as imagens), o valor de <code>src</code> volta a ser o caminho da imagem original.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Dar_uma_mensagem_de_boas-vindas_personalizada">Dar uma mensagem de boas-vindas personalizada</h3>
+
+<p>De seguida vamos acrescentar mais um pouco de código, que vai mudar o título da página para uma mensagem de boas-vindas personalizada quando o utilizador navega no site pela primeira vez. A mesma vai persistir, mesmo que o utilizador saia do site e volte mais tarde — vamos guardá-la com a <a href="/en-US/docs/Web/API/Web_Storage_API">API de Web Storage</a>. Também vamos acrescentar opção de mudar de utilizador e, com o mesmo, a mensagem de boas-vindas sempre que for necessário.</p>
+
+<ol>
+ <li>Em <code>index.html</code>, acrescente esta linha logo antes do elemento {{htmlelement("script")}}:
+
+  <pre class="brush: html notranslate">&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li>Em <code>main.js</code>, coloque o código seguinte no fim do ficheiro, tal como está escrito — isto obtem referências ao novo botão e o título, e guarda-os em variáveis:
+  <pre class="brush: js notranslate">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Agora acrescente a função em baixo para estabelecer a mensagem personalizada — por agora não faz nada, mas já vamos tratar disso:
+  <pre class="brush: js notranslate">function setUserName() {
+  var myName = prompt('Por favor introuduza o seu nome.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}</pre>
+  Este função faz uso da função <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a>, que mostra uma caixa de diálogo, semelhante a <code>alert()</code>. Mas a <code>prompt()</code> pede ao utilizador que introduza dados, que armazena numa variável depois que o mesmo faça <strong>OK</strong><em>.</em> Neste caso, pedimos ao utilizador que introduza o seu nome. Depois, recorremos à API chamada <code>localStorage</code>, que nos permite guardar dados no navegador para os obter mais tarde. Utilizamos a função <code>setItem()</code> para criar e guardar o artigo <code>'name'</code>, e dando-lhe o valor da variável <code>myName</code>, a qual contém o nome introduzido pelo utilizador. Finalmente, mudamos o <code>textContent</code> do título para uma string, à qual concatenamos o nome recentemente armazenado.</li>
+ <li>Próximo: acrescente este bloco <code>if ... else</code> — podemos chamar-lhe código de iniciação, já que define a estrutura da aplicação quando é carregada pela primeira vez:
+  <pre class="brush: js notranslate">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}</pre>
+  Este bloco começa por utilizar o operador de negação ("não-lógico", representado pelo <kbd>!</kbd>) para averiguar se o dado <code>name</code> existe. Se não existir, a função <code>setUserName()</code> é utilizada para o criar. Se existe (ou seja, o utilizador introduziu-o numa visita anterior), recuperamos o nome armazenado com <code>getItem()</code> e mudamos <code>textContent</code> do título para a string, mais o nome do utilizador, da mesma forma que fizémos em <code>setUserName()</code>.</li>
+ <li>Finalmente, coloque o manuseador do evento <code>onclick</code> no botão, como se mostra em baixo. Quando se clica no botão, é chamada a função <code>setUserName()</code>. Isto permite ao utilizador introduzir um novo nome, sempre que desejar, ao premir o botão:
+  <pre class="brush: js notranslate">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Agora, sempre que visitar o site, vai pedir-lhe o seu nome de utilizador, e depois mostrar a mensagem personalizada. Pode mudar o nome sempre que quiser ao premir o botão. Como bónus, já que o nome está guardado em localStorage (armazenamento local), persiste mesmo que o site seja fechado, e mantém a mensagem quando se voltar ao site!</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Se seguiu as instruções neste artigo, o resultado final deve ser uma página semelhante à que vê na imagem em baixo (pode ver  <a href="https://mdn.github.io/beginner-html-site-scripted/">a nossa versão aqui</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Caso se tenha perdido, pode comparar o código que escreveu com o nosso <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">exemplo terminado no GitHub</a>.</p>
+
+<p>Este artigo mal rasou a superfície de JavaScript. Se gostou de brincar e deseja continuar a aprender, dirija-se ao nosso <a href="/en-US/docs/Learn/JavaScript">tópico de aprendizegem de JavaScript</a>.</p>
+
+<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web", "Learn/Comecar_com_a_Web")}}</div>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site da Web?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
+ <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - essencial</a></li>
+ <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - essencial</a></li>
+ <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - essencial</a></li>
+ <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site na internet</a></li>
+ <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a web</a></li>
+</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..7e99504b95
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,125 @@
+---
+title: Publicar o seu site na Web
+slug: Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web
+tags:
+  - Aprender
+  - Beginner
+  - CodingScripting
+  - FTP
+  - GitHub
+  - Google App Engine
+  - Servidor de Web
+  - Web
+  - publicar
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web/Como_funciona_a_Web", "Learn/Comecar_com_a_Web")}}</div>
+
+<div class="summary">
+<p>Assim que terminar de escrever o código e organizar os ficheiros que compõem o seu sire da web, precisa de colocar tudo online para que pessoas o possam encontrar. Este artigo explica como colocar o seu código de amostra online com pouco esforço.</p>
+</div>
+
+<h2 id="Quais_são_as_opções">Quais são as opções?</h2>
+
+<p>A publicação de um site na web é um tema complexo porque há muitas maneiras de o abordar. Este artigo não tenta documentar todos os métodos possíveis. Em vez disso, explica as vantagens e desvantagens de três abordagens que são práticas para os principiantes. Depois, passa por um método que pode funcionar de imediato para muitos leitores.</p>
+
+<h3 id="Encontrar_hospedagem_na_web_e_um_nome_de_domínio">Encontrar hospedagem na web e um nome de domínio</h3>
+
+<p>Para ter mais controlo sob o conteúdo e a aparência dum site, a maioria das pessoas escolhe comprar hospedagem na <em>web</em> e um nome de domínio:</p>
+
+<ul>
+ <li>O serviço de alojamento <em>web</em> fornece espaço de arquivo alugado no <a href="/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_servidor_da_Web">servidor</a> de uma empresa de alojamento.  Colocam-se ficheiros de <em>websites</em> no servidor. O servidor fornece o conteúdo do site aos seus visitantes.</li>
+ <li>Um <a href="/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_nome_de_dominio">nome de domínio</a> é o endereço único onde as pessoas encontram o seu sítio <em>web</em>, tal como <code>https://www.mozilla.org</code> ou <code>http://www.bbc.co.uk</code>. Pode alugar o seu nome de domínio por tantos anos quantos desejar a partir dum <strong>registador de domínios</strong>.</li>
+</ul>
+
+<p>Muitos sites profissionais escolhem este modo para pôr o seu site online.</p>
+
+<p>Além disso, precisará de um programa {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (ver <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> para mais detalhes) para transferir os ficheiros do site para o servidor. Os programas FTP variam muito, mas geralmente, tem de se ligar ao seu servidor web utilizando os detalhes fornecidos pela sua empresa de hospedagem (normalmente nome de utilizador, palavra-passe, nome de anfitrião). Depois, o programa mostra-lhe os seus ficheiros locais e os ficheiros do servidor web em duas janelas, e fornece-lhe uma forma de transferir ficheiros para trás e para a frente.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Dicas_para_encontrar_hospedagem_na_web_e_um_nome_de_domínio">Dicas para encontrar hospedagem na web e um nome de domínio</h4>
+
+<ul>
+ <li>A MDN não promove empresas específicas de alojamento comercial ou agentes de registo de nomes de domínio. Para encontrar empresas de alojamento e agentes de registo, basta procurar por "alojamento web" e "nomes de domínio". Todos os agentes de registo terão uma funcionalidade que lhe permitirá verificar se o nome de domínio que pretende está disponível.</li>
+ <li>O {{Glossary("ISP", "fornecedor de internet")}} da sua casa ou escritório pode fornecer algum alojamento limitado para um pequeno website. O conjunto de funcionalidades disponíveis será limitado, mas poderá ser perfeito para as suas primeiras experiências.</li>
+ <li>Há também serviços gratuitos disponíveis como <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com/">Blogger</a>, e <a href="https://wordpress.com/">WordPress</a>.  Estes não são as opções mais robustas, mas por vezes estes recursos são suficientemente bons para as experiências iniciais.</li>
+ <li>Muitas empresas oferecem alojamento e nomes de domínio.</li>
+</ul>
+
+<h3 id="Usar_uma_ferramenta_online">Usar uma ferramenta online</h3>
+
+<p>Algumas ferramentas permitem publicar o seu site online:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> é um site de "programação social". Permite-lhe carregar repositórios de código para armazenamento no sistema de <strong>controlo de versões</strong> <a href="http://git-scm.com/">Git</a>. Pode então colaborar em projetos de código, e o sistema é de código aberto por defeito, o que significa que qualquer pessoa no mundo pode encontrar o seu código no GitHub, usá-lo, aprender com ele, e melhorá-lo. GitHub tem uma funcionalidade muito útil chamada <a href="https://pages.github.com/">GitHub Pages</a>, que lhe permite expor o código do website ao vivo na web.</li>
+ <li><a href="https://cloud.google.com/appengine/">Google App Engine</a> é uma plataforma poderosa que lhe permite construir e executar aplicações na infraestrutura do Google - quer necessite de construir uma aplicação web multi níveis a partir do zero ou hospedar um website estático. Veja <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> para mais informações.</li>
+</ul>
+
+<p>Estas opções são tipicamente grátis, mas é possível você acabar por precisar mais que as funções que elas oferecem.</p>
+
+<h3 id="Usar_um_IDE_online">Usar um IDE online</h3>
+
+<p>Existem várias aplicações web que imitam um ambiente de desenvolvimento de <em>website</em>, permitindo-lhe introduzir HTML, CSS e JavaScript, e depois mostrar o resultado desse código como um <em>website</em> — tudo num único separador do navegador. Em geral, estas ferramentas são relativamente fáceis de manusear, ótimas para aprender, boas para partilhar código (por exemplo, se quiser partilhar uma técnica com ou pedir ajuda de depuração a colegas num escritório diferente), e gratuitas (para funcionalidades básicas). Hospedam a sua página num endereço da web único. No entanto, as funcionalidades são limitadas, e estas aplicações normalmente não fornecem espaço de alojamento para ativos (como imagens).</p>
+
+<p>Experimente usar as seguintes IDEs para descobrir qual é a melhor para si:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://glitch.com/">Glitch</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Publicar_via_GitHub">Publicar via GitHub</h2>
+
+<p>Agora vejamos como facilmente publicar o seu site através do GitHub Pages.</p>
+
+<ol>
+ <li>Primeiro, <a href="https://github.com/">inscreva se no GitHub</a> e confirme o seu endereço eletrónico.</li>
+ <li>A seguir, <a href="https://github.com/new">a crie um repositório</a> para guardar os seus ficheiros.</li>
+ <li>Nesta página, na caixa <em>Repository name</em>, escreva <em>username</em>.github.io, onde <em>username</em> é o seu nome de utilizador. Por exemplo, Bob Smith iria introduzir <em>bobsmith.github.io</em> na caixa. Selecione a caixa "<em>Initialize this repository with a README"</em>, e carregue "<em>Create repository</em>".<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Arraste os conteúdos da sua pasta para o website, para dentro do repositório. Depois carregue em <em>Commit changes</em>.<br>
+
+  <div class="note">
+  <p><strong>Nota</strong>: Certifique se que a sua pasta contém o ficheiro <code>index.html</code>.</p>
+  </div>
+ </li>
+ <li>
+  <p>Navegue no seu navegador até <em>username</em>.github.io para ver o seu website online. Por exemplo, para o nome de utilizador <em>chrisdavidmills</em>, vai a <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p>
+
+  <div class="note">
+  <p><strong>Nota</strong>: Pode demorar alguns minutos para que o seu site esteja <em>live</em>. Se o seu site não for visível imediatamente, espere por uns minutos e tente novamente.</p>
+  </div>
+ </li>
+</ol>
+
+<p>Para aprender mais, veja <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="Leitura_complementar">Leitura complementar</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_servidor_da_Web">O que é um servidor da web</a></li>
+ <li><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_nome_de_dominio">Entendendo nomes de domínio</a></li>
+ <li><a class="external external-icon" href="https://www.codecademy.com/learn/deploy-a-website" rel="noopener">Publicar um site</a>: Um bom tutorial da Codecademy que vai um pouco além e mostra algumas técnicas adicionais.</li>
+ <li><a class="external external-icon" href="https://alignedleft.com/resources/cheap-web-hosting" rel="noopener">Hospedagem baratas ou gratuitas de sites estáticos</a>, por Scott Murray, tem algumas ideias úteis sobre serviços disponíveis.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web/Como_funciona_a_Web", "Learn/Comecar_com_a_Web")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site da Web?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
+ <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
+ <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
+ <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
+ <li id="Publishing_your_website"><a class="new" href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web" rel="nofollow">Publicar o seu site na Web</a></li>
+ <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web?</a></li>
+</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
new file mode 100644
index 0000000000..928a960b97
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
@@ -0,0 +1,174 @@
+---
+title: A Web e os padrões da Web
+slug: Learn/Comecar_com_a_Web/A_web_e_os_padroes_da_web
+tags:
+  - Aprender
+  - Beginner
+  - Front-end
+  - Normas da Web
+  - Padrões da Web
+  - Web
+translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
+---
+<p dir="ltr">{{learnsidebar}}</p>
+
+<p dir="ltr">Este artigo fornece informação útil sobre a Web - como surgiu, o que são as tecnologias padrão da Web, como trabalham em conjunto, porque é que <em>web developer</em> é uma excelente carreira a escolher, e que melhores práticas irá aprender através do curso.</p>
+
+<h2 dir="ltr" id="História_resumida_da_Web">História resumida da Web</h2>
+
+<p dir="ltr">Vamos manter isto muito breve, pois existem relatos muito (mais) detalhados da história da web lá fora, aos quais faremos referência mais tarde (tente também procurar por "história da web" no seu motor de busca favorito e veja o que obtém, se estiver interessado em mais detalhes).</p>
+
+<p dir="ltr">No final da década de 1960, o exército dos EUA desenvolveu uma rede de comunicação chamada <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. Esta pode ser considerada uma precursora da Web, uma vez que funcionava na {{Interwiki("wikipedia", "Comutação de pacotes", "comutação de pacotes")}}, e incluía a primeira implementação do conjunto de protocolos {{Interwiki("wikipedia", "TCP/IP", "TCP/IP")}}. Estas duas tecnologias formam a base da infra-estrutura sobre a qual a Internet está construída.</p>
+
+<p dir="ltr">Em 1980, Tim Berners-Lee (frequentemente referido como TimBL) escreveu um programa de caderno de notas chamado ENQUIRE, que apresentava o conceito de ligações entre os diferentes nódulos. Soa familiar?</p>
+
+<p dir="ltr">Avançando para 1989, e a TimBL escreveu <em><a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a></em> e <em>HyperText at CERN</em>; estas duas publicações em conjunto forneceram o pano de fundo para a forma como a web funcionaria. Receberam interesse suficiente para convencer os chefes do TimBL a permitir-lhe avançar e criar um sistema global de hipertexto.</p>
+
+<p dir="ltr">No final de 1990, TimBL tinha criado todas as coisas necessárias para executar a primeira versão da web - <a href="/pt-PT/docs/Web/HTTP">HTTP</a>, <a href="/pt-PT/docs/Web/HTML">HTML</a>, o primeiro navegador web, que se chamava {{Interwiki("wikipedia", "WorldWideWeb", "WorldWideWeb")}}, um servidor HTTP, e algumas páginas web para ver.</p>
+
+<p dir="ltr">Nos anos que se seguiram, a web explodiu, com vários navegadores a serem lançados, milhares de servidores web a serem criados, e milhões de páginas web a serem criadas. OK, este é um resumo muito simples do que aconteceu, mas prometi-vos um breve resumo.</p>
+
+<p dir="ltr">Um último dado significativo a partilhar é que em 1994, o TimBL fundou o {{Interwiki("wikipedia", "W3C", "World Wide Web Consortium")}} (W3C), uma organização que reúne representantes de muitas empresas tecnológicas diferentes para trabalharem em conjunto na criação de especificações tecnológicas para a web. Depois disso seguiram-se outras tecnologias, tais como <a href="/pt-PT/docs/Web/CSS">CSS</a> e <a href="/pt-PT/docs/Web/JavaScript/">JavaScript</a>, e a web começou a parecer-se mais com a web que conhecemos hoje.</p>
+
+<h2 dir="ltr" id="Os_padrões_da_Web">Os padrões da Web</h2>
+
+<p>As <strong>normas / padrões da web</strong> são as tecnologias que utilizamos para construir websites. Estas normas existem como longos documentos técnicos chamados especificações, que detalham exactamente como a tecnologia deve funcionar. Estes documentos não são muito úteis para aprender a utilizar as tecnologias que descrevem (é por isso que temos sites como a MDN Web Docs), mas em vez disso destinam-se a ser utilizados por engenheiros de software para implementar estas tecnologias (geralmente em navegadores).</p>
+
+<p>Por exemplo, o <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> descreve exactamente como o HTML (todos os elementos HTML, e as suas APIs associadas, e outras tecnologias circundantes) deve ser implementado.</p>
+
+<p>As normas Web são criadas por organismos de normas — instituições que convidam grupos de pessoas de diferentes empresas tecnológicas a juntarem-se e acordarem sobre a melhor forma de como as tecnologias devem funcionar para cumprir todos os seus casos de utilização. O W3C é o organismo de normas Web mais conhecido, mas existem outros como o <a href="https://whatwg.org/">WHATWG</a> (que foi responsável pela modernização da linguagem HTML), <a href="https://www.ecma-international.org/">ECMA</a> (que publica a norma para ECMAScript, na qual o JavaScript se baseia), <a href="https://www.khronos.org/">Khronos</a> (que publica tecnologias para gráficos 3D, como o WebGL), e outros.</p>
+
+<h3 dir="ltr" id="Standards_abertos">Standards "abertos"</h3>
+
+<p dir="ltr">Um dos aspetos chave das normas <em>web</em>, que o TimBL e o W3C acordaram desde o início, é que a <em>web</em> (e as tecnologias <em>web</em>) devem ser livres de contribuir e utilizar, e não sobrecarregadas por patentes / licenciamento. Portanto, qualquer pessoa pode escrever o código para construir um <em>website</em> gratuitamente, e qualquer pessoa pode contribuir para o processo de criação de normas, onde as especificações são escritas.</p>
+
+<p dir="ltr">Porque as tecnologias <em>web</em> são criadas abertamente, numa colaboração entre várias empresas, isso significa que nenhuma empresa as consegue controlar, que é fantástico. Não se quer que uma única empresa decida subitamente colocar a <em>web</em> inteira atrás de uma <em>paywall</em>, ou lançar uma nova versão de HTML que todos têm de comprar para continuar a fazer <em>websites</em>, ou pior ainda, decidindo apenas que já não estão interessados e simplesmente desligando a <em>web</em>.</p>
+
+<p dir="ltr">Isto permite que a <em>web</em> continue a ser um recurso público disponível gratuitamente.</p>
+
+<h3 dir="ltr" id="Não_quebre_a_web">Não quebre a web</h3>
+
+<p dir="ltr">Outra frase que ouvirá em torno das normas abertas da <em>web</em> é "não quebre a <em>web</em>" — a ideia é que qualquer nova tecnologia <em>web</em> que seja introduzida deve ser retro compatível com o que existia antes (ou seja, os antigos <em>websites</em> continuarão a funcionar), e com o que existe atualmente (as futuras tecnologias, por sua vez, serão compatíveis com o que temos atualmente). Ao percorrer o material de aprendizagem aqui apresentado, começará a aprender como isto se torna possível com algum trabalho de conceção e implementação muito inteligente.</p>
+
+<h2 id="Ser_um_web_developer_é_bom">Ser um <em>web developer</em> é bom</h2>
+
+<p>A indústria da <em>web</em> é um mercado muito atrativo para entrar se estiver à procura de um emprego. Números recentemente publicados dizem que existem atualmente cerca de 19 milhões de <em>web developers</em> no mundo, e esse número é previsto mais que dobrar na próxima década. E, ao mesmo tempo, há uma escassez de competências na indústria — portanto, que melhor altura para aprender a desenvolvimento web?</p>
+
+<p>No entanto, nem tudo é brincadeira — construir <em>sites</em> é uma atividade mais complicada do que costumava ser, e terá de dedicar algum tempo ao estudo de todas as diferentes tecnologias que precisa de utilizar, todas as técnicas e melhores práticas que precisa de conhecer, e todos os padrões típicos que será necessário implementar. Vai levar alguns meses para começar realmente a ser proficiente, e depois terá de continuar a aprender para que o seu conhecimento se mantenha atualizado com todas as novas ferramentas e funcionalidades que aparecem na plataforma <em>web</em>, e continuar a praticar e a aperfeiçoar a sua arte.</p>
+
+<p><em>A única constante é a mudança.</em></p>
+
+<p>Isto parece-lhe difícil? Não se preocupe — o nosso objetivo é dar-lhe tudo o que precisa de saber para começar, e as coisas ficarão mais fáceis. Assim que aceitar a constante mudança e incerteza da <em>web</em>, começará a divertir-se. Como parte da comunidade <em>web</em>, terá uma rede de contactos e material útil para o ajudar, e começará a desfrutar das possibilidades criativas que ela lhe traz.</p>
+
+<p>Agora é um criativo digital. Desfrute da experiência.</p>
+
+<h2 id="Sinopse_das_tecnologias_modernas_da_Web">Sinopse das tecnologias modernas da Web</h2>
+
+<p>Há uma série de tecnologias a aprender se quiser ser um programador da <em>web</em> de <em>front-end</em>. Nesta secção iremos descrevê-las brevemente. Para uma explicação mais detalhada de como algumas delas funcionam em conjunto, leia o nosso artigo <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a <em>web</em></a>.</p>
+
+<h3 id="Navegadores">Navegadores</h3>
+
+<p>É provável que esteja a ler estas palavras dentro de um navegador neste preciso momento (a menos que o tenha imprimido, ou que esteja a utilizar tecnologia de assistência, tal como um leitor de ecrã para o ler). Os navegadores são os programas de software que as pessoas utilizam para consumir a web, e incluem o <a href="/pt-PT/docs/Mozilla/Firefox">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, e <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</a>.</p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p><em>Hypertext Transfer Protoco</em>l, ou HTTP, é um protocolo de transmissão de mensagens que permite aos navegadores Web comunicarem com servidores (onde os <em>websites</em> são armazenados). Uma conversa típica é algo como</p>
+
+<pre class="notranslate">"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+
+"Sure thing web browser — here you go"
+
+[Downloads files and renders web page]</pre>
+
+<p>A sintaxe das mensagens HTTP (chamadas pedidos e respostas) não é tão legível para o ser humano, mas isto dá-lhe a ideia básica.</p>
+
+<h3 id="HTML_CSS_e_JavaScript">HTML, CSS, e JavaScript</h3>
+
+<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, e <a href="/en-US/docs/Web/JavaScript">JavaScript</a> são as três tecnologias principais que irá usar para construir um <em>site</em>:</p>
+
+<ul>
+ <li>
+  <p>A linguagem de marcação de hipertexto, ou <strong>HTML</strong>, é uma linguagem de marcação que consiste em diferentes elementos em que se pode embrulhar (marcar) conteúdo para lhe dar significado (semântica) e estrutura. O HTML tem este aspeto:</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;This is a top-level heading&lt;/h1&gt;
+
+&lt;p&gt;This is a paragraph of text.&lt;/p&gt;
+
+&lt;img src="cat.jpg" alt="A picture of my cat"&gt;</pre>
+
+  <p>Se adotarmos uma analogia de construção de casa, o HTML seria como as fundações e as paredes da casa, que lhe dão estrutura e a mantêm unida.</p>
+ </li>
+ <li>
+  <p>Cascading Style Sheets (<strong>CSS</strong>) é uma linguagem baseada em regras para aplicar estilos ao seu HTML, por exemplo, definir cores de texto e de fundo, adicionar bordas, animar coisas, ou colocar uma página de uma certa forma. Como um exemplo simples, o seguinte código tornaria o nosso parágrafo HTML vermelho:</p>
+
+  <pre class="brush: css notranslate">p  {
+  color: red;
+}</pre>
+
+  <p>Usando a analogia da casa, CSS é a tinta, papel de parede, tapetes e pinturas que usaria para fazer a casa parecer bonita.</p>
+ </li>
+ <li>
+  <p><strong>JavaScript</strong> é a linguagem de programação que utilizamos para adicionar interatividade aos <em>websites</em>, da mudança de estilo dinâmico, até à obtenção de atualizações a partir do servidor, passando por gráficos complexos em 3D. O seguinte JavaScript armazena uma referência ao nosso parágrafo na memória e depois altera o texto:</p>
+
+  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+pElem.textContent =  'We changed the text!';</pre>
+
+  <p>Na analogia da casa, o JavaScript é como o fogão, TV, Microondas, ou secador de cabelo — as coisas que dão à sua casa uma funcionalidade útil.</p>
+ </li>
+</ul>
+
+<h3 id="Tooling"><em>Tooling</em></h3>
+
+<p>Uma vez aprendidas as tecnologias de base que podem ser usadas para construir páginas <em>web</em> (como HTML, CSS, e JavaScript), em breve começará a deparar-se com várias ferramentas que podem ser usadas para tornar o seu trabalho mais fácil ou mais eficiente. Os exemplos incluem:</p>
+
+<ul>
+ <li>As <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">ferramentas de programação</a> em navegadores modernos que podem ser usados para <em>debug</em> os seus <em>sites</em>.</li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Ferramentas de teste</a> que podem ser usadas para testar se o seu código está a agir da forma desejada.</li>
+ <li>Bibliotecas e <em>frameworks</em> construidas com JavaScript que permitem construir certos <em>websites</em> dum modo mais rápido e eficiente.</li>
+ <li><em>Linters</em>, que usando uma série de regras, processam o seu código e realcem os lugares onde as regras não foram seguidas corretamente.</li>
+ <li><em>Minifiers</em>, que remove <em>whitespace</em> desnecessário de ficheiros com o seu código para diminuir o seu tamanho e permitir que sejam descarregados mais rapidamente.</li>
+</ul>
+
+<h3 id="Linguagens_de_lado_de_servidor_e_frameworks">Linguagens de lado de servidor e <em>frameworks</em></h3>
+
+<p>HTML, CSS, e JavaScript são linguagens de <em>front-end</em> (ou <em>client-side</em>), que significa que eles são processados pelo navegador para produzir a interface dum <em>website</em> que os seus utilizadores possam usar.</p>
+
+<p>Há outra classe de línguas chamada de <em>back-end</em> (ou línguas do lado do servidor), o que significa que são executadas no servidor antes de o resultado ser então enviado para o navegador para ser exibido. Uma utilização típica para uma linguagem do lado do servidor é obter alguns dados de uma base de dados e gerar algum HTML para conter os dados, antes de depois enviar o HTML para o navegador para o exibir ao utilizador.</p>
+
+<p>Exemplos de linguagens de lado de servidor incluem C#, Python, PHP e Java.</p>
+
+<h2 id="As_melhores_práticas_da_Web">As melhores práticas da Web</h2>
+
+<p>Falámos brevemente sobre as tecnologias que irá utilizar para construir sítios <em>web</em>. Agora vamos discutir as melhores práticas que deverá empregar para se certificar de que está a utilizar essas tecnologias o melhor possível.</p>
+
+<p>Ao fazer desenvolvimento web, a principal causa de incerteza advém do facto de não se saber que combinação de tecnologia cada utilizador utilizará para visualizar o seu <em>site</em>:</p>
+
+<ul>
+ <li>Utilizador 1 pode estar a usar um iPhone, com um ecrã pequeno e estreito.</li>
+ <li>Utilizador 2 pode estar a usar um portátil de Windows com um ecrã <em>widescreen</em>.</li>
+ <li>Utilizador 3 pode ser cego e usar um leitor de ecrã para ler a página da <em>web</em>.</li>
+ <li>Utilizador 4 pode estar a usar um computador antigo que não consegue correr navegadores modernos.</li>
+</ul>
+
+<p>Como não sabe exatamente o que os seus utilizadores irão usar, precisa de planear defensivamente - tornar o seu <em>site</em> tão flexível quanto possível, para que todos os utilizadores acima mencionados possam fazer uso dele, mesmo que nem todos possam ter a mesma experiência. Em resumo, estamos a tentar fazer com que a <em>web</em> funcione para todos, tanto quanto possível.</p>
+
+<p>Encontrará os conceitos abaixo em algum momento dos seus estudos.</p>
+
+<ul>
+ <li><strong>Compatibilidade entre navegadores</strong> é a prática de tentar assegurar-se de que a sua página <em>web</em> funciona com o maior número de dispositivos possível. Isto inclui a utilização de tecnologias que todos os navegadores suportam, proporcionando melhores experiências aos navegadores que podem lidar com eles (melhoramento progressivo), e/ou escrever código de modo que caia de novo numa experiência mais simples, mas ainda utilizável em navegadores mais antigos (degradação graciosa). Também envolve muitos testes para ver se algo falha em certos navegadores, e depois mais trabalho para corrigir essas falhas.</li>
+ <li><strong>Web design reactivo</strong> é a prática de tornar a sua funcionalidade e <em>layouts</em> flexíveis, para que se possam adaptar automaticamente a diferentes navegadores. Um exemplo óbvio é um <em>website</em> que é apresentado de uma forma num navegador de ecrã panorâmico no ambiente de trabalho, mas que se apresenta como um <em>layout</em> mais compacto e de uma só coluna nos navegadores de telemóveis. Tente ajustar agora a largura da janela do seu navegador, e veja o que acontece.</li>
+ <li><strong>Performance</strong> significa fazer com que os websites sejam carregados o mais rapidamente possível, mas também torná-los intuitivos e fáceis de usar para que os utilizadores não fiquem frustrados e vão para outro lugar.</li>
+ <li><strong>Acessibilidade</strong> significa tornar os seus <em>sites</em> utilizáveis pelo maior número possível de diferentes pessoas (conceitos relacionados são diversidade e inclusão, e design inclusivo). Isto inclui pessoas com deficiências visuais, auditivas, cognitivas, ou físicas. Também vai além das pessoas com deficiências - que tal jovens ou idosos, pessoas de culturas diferentes, utilizadores de dispositivos móveis, ou pessoas com ligações de rede pouco fiáveis ou lentas?</li>
+ <li><strong>Internacionalização</strong> significa tornar os <em>websites</em> utilizáveis por pessoas de culturas diferentes, que falam línguas diferentes das suas. Há aqui considerações técnicas (tais como alterar o seu <em>layout</em> para que ainda funcione bem para as línguas da direita para a esquerda, ou mesmo verticais), e humanas (tais como utilizar uma linguagem simples e não linguística para que as pessoas que têm a sua língua como segunda ou terceira língua tenham mais probabilidades de compreender o seu texto).</li>
+ <li><strong>Privacidade &amp; Segurança</strong>. Estes dois conceitos estão relacionados, mas são diferentes. A privacidade refere-se a permitir que as pessoas se dediquem aos seus negócios em privado e não as espiar ou recolher mais dos seus dados do que é absolutamente necessário. Segurança refere-se à construção do seu <em>website</em> de forma segura para que os utilizadores maliciosos não possam roubar-lhe ou aos seus utilizadores a informação nele contida.</li>
+</ul>
+
+<h2 dir="ltr" id="Ver_também">Ver também</h2>
+
+<ul dir="ltr">
+ <li><a href="https://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_World_Wide_Web">História da World Wide Web</a></li>
+ <li><a href="/pt-PT/docs/Learn/Questoes_comuns/Como_funciona_a_Internet">Como funciona a Internet?</a></li>
+</ul>
+
+<ul dir="ltr">
+</ul>
diff --git a/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..a5eacc3afa
--- /dev/null
+++ b/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,112 @@
+---
+title: Qual será a aparência do seu site da Web?
+slug: Learn/Comecar_com_a_Web/Apresentacao_do_meu_site
+tags:
+  - Aprender
+  - Beginner
+  - Conteúdo
+  - Design
+  - Planear
+  - Tipos de Letra
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Installing_basic_software", "Learn/Comecar_com_a_Web/Lidar_com_ficheiros", "Learn/Comecar_com_a_Web")}}</div>
+
+<div class="summary">
+<p>Este artigo descreve o planeamento e conceptualização necessários antes de escrever o código do site da internet, incluindo "Que informação é que o meu site oferece?", "Quais os tipos de letra e cores que eu quero?" e ​​"O que é que o meu site faz?"</p>
+</div>
+
+<h2 id="Antes_de_tudo_planeamento">Antes de tudo: planeamento</h2>
+
+<p>Antes de fazer o que quer que seja, precisa de algumas ideias. O que é que o seu site realmente deve fazer? Um site pode fazer qualquer coisa, mas para a sua primeira tentativa, procure manter as coisas simples. Vamos começar a criar uma página <em>web</em> simples com um cabeçalho, uma imagem e alguns parágrafos.</p>
+
+<p>Para começar, irá precisar de responder a estas questões:</p>
+
+<ol>
+ <li><strong>De que se trata o seu site da Web? </strong>Gosta de cães, Nova Iorque, ou Pac-Man?</li>
+ <li><strong>Que informação é que vai apresentar acerca o assunto? </strong>Escreva um título e alguns parágrafos, e pense numa imagem que gostaria de mostrar na sua página.</li>
+ <li><strong>Como será apresentado o seu site da Web, </strong>em termos simples de alto nível? Qual é a cor de fundo? Que tipo de letra é apropriado: formal, desenhos, negrito e tom alto, subtil?</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Projetos complexos precisam de diretrizes detalhadas que abordem todos os detalhes de cores, tipos de letra, espaçamento entre elementos de uma página, estilo de escrita apropriado, e assim por diante. Isto às vezes é chamado guia de desenho ou livro de marca, e pode ver um exemplo em  <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS - Orientações</a> (inglês).</p>
+</div>
+
+<h2 id="Esboçar_o_seu_desenho">Esboçar o seu desenho</h2>
+
+<p>A seguir, pegue numa caneta e papel e crie um esboço do layout do seu site. Para a sua primeira página, não há muito o que esboçar, mas deve adquirir o hábito de fazer isso agora. Isto é mesmo uma grande ajuda — não tem que ser um Van Gogh!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Mesmo em sites a sérios, complexos, a equipa de <em>design</em> costuma começar com esboços grosseiros em papel e mais tarde constrói maquetas digitais com um editor de imagem ou tecnologias web.</p>
+
+<p>Equipas de desenvolvimento web geralmente incluem um designer gráfico e um designer {{Glossary("UX", "user-experience")}} (UX). Obviamente, os designers gráficos montam os elementos visuais do site. Designers UX têm um papel mais abstrato, que consiste em abordar a forma como utilizadores vão experimentar e interagir com o site.</p>
+</div>
+
+<h2 id="Escolha_do_conteúdo">Escolha do conteúdo</h2>
+
+<p>Nesta altura, é boa ideia começar a criar o conteúdo que virá a aparecer na sua página da internet.</p>
+
+<h3 id="Texto">Texto</h3>
+
+<p>Ainda deve ter o parágrafo e títulos de há bocado. Mantenha-os por perto.</p>
+
+<h3 id="Cor_do_tema">Cor do tema</h3>
+
+<p>Para escolher uma cor, vá ao <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">Seletor de Cores</a> e encontre uma cor de que gosta. Quando clicar numa cor, vai ver um código estranho com seis caracteres, tal como <code>#660066</code>. Este é um código hexadecimal que representa um tom de cor específico. Aponte o código num local de fácil acesso.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Imagens">Imagens</h3>
+
+<p>Para escolher uma imagem, pesquise <a href="https://www.google.com/imghp?gws_rd=ssl">Images no Google</a> procure algo adequado.</p>
+
+<ol>
+ <li>Quando encontrar a imagem que quer, clique nela.</li>
+ <li>Prima o botão <em>Ver imagem</em>.</li>
+ <li>Na página seguinte, carregue o botão direito do rato (Ctrl + clique nos Mac), escolha <em>Guardar imagem como...</em>, e escolha um lugar seguro para guardar a imagem. Em alternativa, copie o endereço da imagem da barra de endereço do seu navegador para a utilizar mais tarde.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: A maioria das imagens, incluindo na pesquisa de Imagens do Google, estão protegidas por direitos de autor. Para reduzir probabilidades de violar estes direitos, pode usar o filtro de licença do  Google. Primeiro, clique em <strong>Ferramentas de Pesquisa</strong>, e depois em <strong>Direitos de utilização</strong>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
+</div>
+
+<h3 id="Tipo_de_letra">Tipo de letra</h3>
+
+<p>Para escolher um tipo de letra:</p>
+
+<ol>
+ <li>Vá ao <a href="http://www.google.com/fonts">Google Fonts</a> e deslize para baixo até encontrar um de que goste. Também pode usar os controlos à direita para filtrar resultados.</li>
+ <li>Clique no ícone "mais" (Adicionar) perto do tipo de letra que escolheu.</li>
+ <li>Clique no botão "* Family Selected"<em> </em>no painel no fim da página ("*" será o número de tipos de letra selecionados).</li>
+ <li>Na caixa apresentada, copie as linhas de código que o Google lhe dará para um editor de texto e guarde para utilizar mais tarde.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p>
+
+<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Installing_basic_software", "Learn/Comecar_com_a_Web/Lidar_com_ficheiros", "Learn/Comecar_com_a_Web")}}</div>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Qual será a aparência do seu site da Web?</a></li>
+ <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
+ <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a></li>
+ <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
+ <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
+ <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></li>
+ <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a></li>
+</ul>