Como estruturar um formulário HTML - Aprendendo desenvolvimento web

Como estruturar um formulário HTML
==================================

* Anterior  (en-US)
* Menu: Forms (en-US)
* Próxima  (en-US)

Com o básico fora do caminho, podemos olhar melhor para os elementos utilizados, a fim de entender as diferentes partes de um formulário.

|  |  |
| --- | --- |
| Pré-Requisitos: |
 Leitura sobre computação básica e
 entendimento básico de HTML. |
| Objetivo: |
 Entender como estruturar formulários HTML e entregar a eles semântica de
 forma a torná-los úteis e acessíveis.
  |

A flexibilidade dos formulários HTML fazem com que sejam uma das estruturas mais complexas do HTML, você pode construir qualquer tipo básico de formulário usando elementos e atributos exclusivos de formulários. Assim, usar a estrutura correta ao criar um formulário HTML o ajudará a garantir que o formulário seja utilizável e acessível.

O elemento <form>
-----------------

O elemento `<form>` (en-US) é o elemento que formalmente define o formulário e os atributos que definem a maneira como esse formulário se comporta. Sempre que você desejar criar um formulário HTML, você deve iniciá-lo usando este elemento, colocando todo o conteúdo dentro deste. Muitas tecnologias assistivas ou plugins de navegadores são capazes de descobrir elemetos `<form>` (en-US) e de implementar ganchos especiais para torná-los mais fáceis de usar.

Nós já vimos isto em um artigo anterior:

**Nota:** É estritamente proíbido aninhar um formulário dentro de outro formulário. Isto pode fazer com que os formulários se comportem de maneira imprevisível baseada no navegador que está sendo utilizado.

Note que, sempre é possível usar um widget de formulário fora de um elemento `<form>` (en-US) mas se o fizer, o widget não terá nada a ver com o formulário. Estes widgets podem ser usados fora de um formulário, mas para tanto você deverá ter um plano especial para eles, pois este não farão nada por si próprios. Você terá de controlar o comportamento deles através de JavaScript.

>
> \*\*Nota:\*\*O HTML 5 introduziu o atributo `form` no grupo de elementos de formulários em HTML. Ele deve deixá-lo atrelar explícitamente um elemento com um form mesmo se não estiver dentro de um `<form>` (en-US). Infelizmente, devido ao tempo de vida, essa implementação ainda pelos navegadores ainda não é boa o suficiente para se confiar nela.
>
>
>

Os elementos <fieldset> e <legend>
----------------------------------

O elemento `<fieldset>` é uma maneira conveniente de criar grupos de widgets que compartilham o mesmo propósito. Um elemento `<fieldset>` pode ser rotulado com um elemento `<legend>`. O elemento `<legend>` descreve formalmente a finalidade do elemento `<fieldset>` ao qual está incluído.

Muitas tecnologias assistivas usarão o elemento `<legend>` como se fosse parte da etiqueta de cada widget dentro do elemento `<fieldset>` correspondente. Por exemplo, alguns leitores de tela, como Jaws ou NVDA, pronunciarão o conteúdo da legenda antes de pronunciar o rótulo de cada widget.

Aqui está um pequeno exemplo:

```html
<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size\_1" value="small" />
      <label for="size\_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size\_2" value="medium" />
      <label for="size\_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size\_3" value="large" />
      <label for="size\_3">Large</label>
    </p>
  </fieldset>
</form>
```

Com este exemplo, um leitor de tela pronunciará "Fruit juice size small" para o primeiro widget, "Fruit juice size medium" para o segundo, e "Fruit juice size large" para o terceiro.

O caso de uso neste exemplo é um dos mais importantes. Cada vez que você tiver um conjunto de botões de opção, você deve ter certeza de que eles estão aninhados dentro de um elemento `<fieldset>`. Existem outros casos de uso e, em geral, o elemento `<fieldset>` também pode ser usado para conferir acessibilidade a um formulário. Devido à sua influência sobre a tecnologia assistiva, o elemento `<fieldset>` é um dos elementos-chave para a construção de formulários acessíveis. No entanto, é sua responsabilidade não abusá-lo. Se possível, cada vez que você criar um formulário, tente ouvir como o leitor de tela o interpreta. Se parecer estranho, é uma boa sugestão de que sua estrutura de formulário precisa ser melhorada.

O elemento <label>
------------------

Como vimos no artigo anterior, o elemento `<label>` é a maneira formal de definir um rótulo para um widget de formulário HTML. Esse é o elemento mais importante se você quiser criar formulários acessíveis - quando implementados corretamente, os leitores de tela falarão o rótulo de um elemento de formulário juntamente com as instruções relacionadas. Veja este exemplo, que vimos no artigo anterior:
```

<label for="name">Name:</label> <input type="text" id="name" name="user_name">
```

Com o <label> associado corretamente ao <input> por meio de seus atributos 'for' e 'id' respectivamente (o 'label' do atributo faz referência ao atributo id do widget correspondente), um leitor de tela lerá algo como "Nome, editar texto".

Se o 'label' não estiver configurado corretamente, um leitor de tela só lerá algo como "Editar texto em branco", o que não é muito útil.

Observe que um widget pode ser aninhado dentro de seu elemento <label>, assim:
```

<label for="name">
  Name: <input type="text" id="name" name="user_name">
</label>
```

Mesmo nesses casos, entretanto, é considerada a melhor prática definir o atributo 'for' porque algumas tecnologias assistivas não entendem os relacionamentos implícitos entre labels e widgets.

### Labels são clicáveis também!

Outra vantagem de configurar 'labels' adequadamente é que você pode clicar no label para ativar o widget correspondente, em todos os navegadores. Isso é útil para exemplos como entradas de texto, onde você pode clicar no label, bem como na entrada para focalizá-lo, mas é especialmente útil para botões de opção e caixas de seleção - a área de acerto de tal controle pode ser muito pequena, então é útil para torná-lo o maior possível.

Por exemplo:
```

<form>
  <p>
    <label for="taste_1">I like cherry</label>
    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
  </p>
  <p>
    <label for="taste_2">I like banana</label>
    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
  </p>
</form>
```

**Nota:** **Nota: Você pode encontrar este exemplo em** checkbox-label.html (ver ao vivo também).

### Múltiplos labels

Estritamente falando, você pode colocar vários rótulos em um único widget, mas isso não é uma boa ideia, pois algumas tecnologias de assistência podem ter problemas para lidar com eles. No caso de vários rótulos, você deve aninhar um widget e seus rótulos dentro de um único elemento `<label>`.

Vamos considerar este exemplo:
```

<p>Required fields are followed by <abbr title="required">*</abbr>.</p>

<!-- So this: -->
<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>

<!-- would be better done like this: -->
<div>
  <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>

<!-- But this is probably best: -->
<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input id="username" type="text" name="username">
</div>
```

The paragraph at the top defines the rule for required elements. It must be at the beginning to make sure that assistive technologies such as screen readers will display or vocalize it to the user before they find a required element. That way, they will know what the asterisk means. A screen reader will speak the star as "*star*" or "*required*", depending on the screen reader's settings — in any case, what will be spoken is made clear in the first paragraph).

* In the first example, the label is not read out at all with the input — you just get "edit text blank", plus the actual labels are read out separately. The multiple `<label>`elements confuse the screenreader.
* In the second example, things are a bit clearer — the label read out along with the input is "name star name edit text", and the labels are still read out separately. Things are still a bit confusing, but it's a bit better this time because the input has a label associated with it.
* The third example is best — the actual label is read out all together, and the label read out with the input is "name star edit text".

**Nota:** You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.

**Note**: You can find this example on GitHub as required-labels.html (see it live also). don't run the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!

Estruturas comuns HTML usadas com formulários
---------------------------------------------

Além das estruturas específicas dos formulários HTML, é bom lembrar que os formulários são apenas HTML. Isso significa que você pode usar todo o poder do HTML para estruturar um formulário HTML.

Como você pode ver nos exemplos, é comum envolver um *label* e seu *widget* com um elemento `<div>`. Os elementos `<p>` também são comumente usados, assim como as listas HTML (a última é mais comum para estruturar vários *checkboxes* ou *radio buttons*).

Além do elemento `<fieldset>`, uma prática comum também é usar títulos HTML (por exemplo, `<h1>` (en-US), `<h2>` (en-US)) e seção (por exemplo, `<section>`) para estruturar um formulário complexo.

Acima de tudo, cabe a você encontrar um estilo com o qual você acha confortável codificar e que também resulte em formulários acessíveis e utilizáveis.

Temos cada seção desacoplada da funcionalidade contida nos elementos de `<section>` e um `<fieldset>` para conter os *radio buttons*.

### Active learning: building a form structure

Let's put these ideas into practice and build a slightly more involved form structure — a payment form. This form will contain a number of widget types that you may not yet understand — don't worry about this for now; you'll find out how they work in the next article (The native form widgets (en-US)). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

1. To start with, make a local copy of our blank template file and the CSS for our payment form in a new directory on your computer.
2. First of all, apply the CSS to the HTML by adding the following line inside the HTML `<head>`:

```html
<link href="payment-form.css" rel="stylesheet" />
```

3. Next, start your form off by adding the outer `<form>` (en-US) element:

```html
<form></form>
```

4. Inside the `<form>` tags, start by adding a heading and paragraph to inform users how required fields are marked:

```html
<h1>Payment form</h1>
<p>
  Required fields are followed by
  <strong><abbr title="required">*</abbr></strong
 >.
</p>
```

5. Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct `<section>` element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list (`<li>`) element. Last, we have two standard text `<input>`s and their associated `<label>` elements, each contained inside a `<p>`, plus a password input for entering a password. Add this code to your form now:

```html
<section>
  <h2>Contact information</h2>
  <fieldset>
    <legend>Title</legend>
    <ul>
      <li>
        <label for="title\_1">
          <input type="radio" id="title\_1" name="title" value="M." />
          Mister
        </label>
      </li>
      <li>
        <label for="title\_2">
          <input type="radio" id="title\_2" name="title" value="Ms." />
          Miss
        </label>
      </li>
    </ul>
  </fieldset>
  <p>
    <label for="name">
      <span>Name: </span>
      <strong><abbr title="required">*</abbr></strong>
    </label>
    <input type="text" id="name" name="username" />
  </p>
  <p>
    <label for="mail">
      <span>E-mail: </span>
      <strong><abbr title="required">*</abbr></strong>
    </label>
    <input type="email" id="mail" name="usermail" />
  </p>
  <p>
    <label for="pwd">
      <span>Password: </span>
      <strong><abbr title="required">*</abbr></strong>
    </label>
    <input type="password" id="pwd" name="password" />
  </p>
</section>
```

6. Now we'll turn to the second `<section>` of our form — the payment information. Here we have three distinct widgets along with their labels, each contained inside a `<p>`. The first is a drop down menu (`<select>`) for selecting credit card type. the second is an `<input>` element of type number, for entering a credit card number. The last one is an `<input>` element of type `date`, for entering the expiration date of the card (this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers). Again, enter the following below the previous section:

```html
<section>
  <h2>Payment information</h2>
  <p>
    <label for="card">
      <span>Card type:</span>
    </label>
    <select id="card" name="usercard">
      <option value="visa">Visa</option>
      <option value="mc">Mastercard</option>
      <option value="amex">American Express</option>
    </select>
  </p>
  <p>
    <label for="number">
      <span>Card number:</span>
      <strong><abbr title="required">*</abbr></strong>
    </label>
    <input type="number" id="number" name="cardnumber" />
  </p>
  <p>
    <label for="date">
      <span>Expiration date:</span>
      <strong><abbr title="required">*</abbr></strong>
      <em>formatted as yyyy/mm/dd</em>
    </label>
    <input type="date" id="date" name="expiration" />
  </p>
</section>
```

7. The last section we'll add is a lot simpler, containing only a `<button>` of type `submit`, for submitting the form data. Add this to the bottom of your form now:

```html
<p><button type="submit">Validate the payment</button></p>
```

You can see the finished form in action below (also find it on GitHub — see our payment-form.html source and running live):

Summary
-------

You now have all the knowledge you'll need to properly structure your HTML forms; the next article will dig into implementing all the different types of form widgets you'll want to use to collect information from your users.

See Also
--------

* A List Apart: *Sensible Forms: A Form Usability Checklist*
* Anterior  (en-US)
* Menu: Forms (en-US)
* Próxima  (en-US)


CSS básico - Aprendendo desenvolvimento web

CSS básico
==========

* Anterior
* Menu: Getting started with the web
* Próxima

CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à sua página Web. *CSS básico* apresenta tudo que você precisa para começar. Responderemos a perguntas do tipo: Como mudo meu texto para preto ou vermelho? Como faço para que meu conteúdo apareça em determinados lugares na tela? Como decoro minha página com imagens e cores de fundo?

Então, o que realmente é CSS?
-----------------------------

Assim como o HTML, o CSS não é realmente uma linguagem de programação. Também não é uma linguagem de marcação — é uma *linguagem de folhas de estilos*. Isso significa que o CSS permite aplicar estilos seletivamente a elementos em documentos HTML. Por exemplo, para selecionar **todos** os elementos parágrafo de uma página HTML e tornar o texto dentro deles vermelho, você escreveria este CSS:

```css
p {
  color: red;
}
```

Vamos tentar: cole as três linhas de CSS acima em um novo arquivo, no seu editor de texto, e salve o arquivo como `estilo.css` na sua pasta `estilos`.

Ainda assim, precisamos aplicar o CSS ao seu documento HTML. Do contrário, o estilo CSS não irá afetar a maneira como o seu navegador mostra seu documento HTML (se você não estiver acompanhando o nosso projeto, leia Lidando com arquivos e HTML básico para descobrir o que você precisa fazer primeiro).

1. Abra seu arquivo `index.html` e cole o seguinte código em algum lugar no cabeçalho, ou seja, entre as tags `<head>` e `</head>`:

```html
<link href="estilos/estilo.css" rel="stylesheet" />
```

2. Salve o arquivo `index.html` e abra ele no seu navegador. Você deve ver uma página como essa:

![A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.](/pt-BR/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-styled.png)Se o texto do seu parágrafo estiver vermelho, parabéns! Você acabou de escrever seu primeiro CSS de sucesso.

### Anatomia de um conjunto de regras CSS

Vamos dar uma olhada no CSS acima com mais detalhes:

![](/pt-BR/docs/Learn/Getting_started_with_the_web/CSS_basics/css-declaration-small.png)

Toda essa estrutura é chamada de **conjunto de regras** (mas geralmente usamos o termo "regra", por ser mais curto). Note os nomes das partes individuais:

Seletor (Selector)

O nome do elemento HTML no começo do conjunto de regras. Ele seleciona o(s) elemento(s) a serem estilizados (nesse caso, elementos `<p>`). Para dar estilo a um outro elemento, é só mudar o seletor.

Declaração (Declaration)

Uma regra simples como `color: red;` especificando quais das **propriedades** do elemento você quer estilizar.

Propriedades (Property)

Forma pela qual você estiliza um elemento HTML. (Nesse caso, `color` é uma propriedade dos elementos `<p>`.) Em CSS, você escolhe quais propriedades você deseja afetar com sua regra.

Valor da propriedade (Property value)

À direita da propriedade, depois dos dois pontos, nós temos o **valor de propriedade**, que escolhe uma dentre muitas aparências possíveis para uma determinada propriedade (há muitos valores `color(cor)` além do `red(vermelho)`).

Note outras partes importantes da sintaxe:

* Cada linha de comando deve ser envolvida em chaves (`{}`).
* Dentro de cada declaração, você deve usar dois pontos (`:`) para separar a propriedade de seus valores.
* Dentro de cada conjunto de regras, você deve usar um ponto e vírgula (`;`) para separar cada declaração da próxima.

Então para modificar múltiplos valores de propriedades de uma vez, você deve escrevê-los separados por ponto e vírgula, desse modo:

```css
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}
```

### Selecionando múltiplos elementos

Você também pode selecionar vários tipos de elementos e aplicar um único conjunto de regras a todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo:

```css
p,
li,
h1 {
  color: red;
}
```

### Diferentes tipos de seletores

Há muitos tipos diferentes de seletores. Abaixo, nós mostramos apenas os **seletores de elementos**, que selecionam todos os elementos de um determinado tipo nos documentos HTML. Mas nós podemos fazer seleções mais específicas que essas. Aqui estão alguns dos tipos mais comuns de seletores:

| Nome do seletor | O que ele seleciona | Exemplo |
| --- | --- | --- |
| Seletor de elemento (às vezes, chamado tag ou seletor de tipo) | Todos os elementos HTML de determinado tipo. | `p` Seleciona `<p>` |
| Seletor de ID | O elemento na página com o ID específicado. Em uma determinada página HTML, é uma boa prática usar um elemento por ID (e claro, um ID por elemento) mesmo que seja permitido usar o mesmo ID para vários elementos. | `#my-id` Seleciona `<p id="my-id">` ou `<a id="my-id">` |
| Seletor de classe | O(s) elemento(s) na página com a classe específicada (várias instâncias de classe podem aparecer em uma página). | `.my-class` Seleciona `<p class="my-class">` e `<a class="my-class">` |
| Seletor de atributo | O(s) elemento(s) na página com o atributo especificado. | `img[src]` Seleciona `<img src="myimage.png">` mas não `<img>` |
| Seletor de pseudo-classe | O(s) elemento(s) específicado(s), mas somente quando estiver no estado especificado. Ex.: com o mouse sobre ele. | `a:hover` Seleciona `<a>`, mas somente quando o mouse está em cima do link. |

Há muito mais seletores para explorar e você pode achar uma lista mais detalhada em nosso Guia de seletores.

Fontes e texto
--------------

Agora que exploramos algumas noções básicas de CSS, vamos começar a adicionar mais regras e informações no nosso arquivo `estilo.css` para deixar nosso exemplo bonito. Vamos começar fazendo nossas fontes e textos parecerem um pouco melhores.

1. Primeiro de tudo, volte e encontre a fonte do Google Fonts que você armazenou em algum lugar seguro. Adicione o elemento `<link>` em algum lugar dentro do cabeçalho no `index.html` (novamente, em qualquer lugar entre as tags `<head>` e `</ head>`). Será algo parecido com isto:

```html
<link
 href="http://fonts.googleapis.com/css?family=Open+Sans"
 rel="stylesheet" />
```

Esse código vincula sua página a uma folha de estilo que baixa a família de fontes Open Sans junto com sua página web e permite que você a defina em seus elementos HTML usando sua própria folha de estilos.
2. Em seguida, exclua a regra existente no seu arquivo `estilo.css`. Foi um bom teste, mas o texto vermelho não parece muito bom.
3. Adicione as seguintes linhas em seu lugar, substituindo a linha do espaço reservado pela linha `font-family` que você obteve do Google Fonts. (`font-family` significa apenas a(s) fonte(s) que você deseja usar para o seu texto.) Esta regra primeiro define uma fonte base global e o tamanho da fonte para a página inteira (já que `<html>` é o elemento pai de toda a página, e todos os elementos dentro dele herdam o mesmo `font-size` e `font-family`):

```css
html {
  font-size: 10px; /\* px significa "pixels": o tamanho da fonte base é agora de 10 pixels \*/
  font-family: "Open Sans", sans-serif; /\* este deve ser o nome da fonte que você obteve no Google Fonts \*/
}
```

**Nota:** Qualquer coisa em um documento CSS entre `/*` e `*/` é um **comentário CSS**, que o navegador ignora quando renderiza o código. Este é um lugar para você escrever notas úteis sobre o que você está fazendo.
4. Agora definiremos tamanhos de fonte para elementos que contêm texto dentro do corpo HTML (`<h1>` (en-US), `<li>` e `<p>`). Também centralizaremos o texto do nosso cabeçalho e definiremos a altura da linha e o espaçamento das letras no conteúdo do corpo para torná-lo um pouco mais legível:

```css
h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
```

Você pode ajustar esses valores de `px` para o que você desejar, para deixar seu design com a aparência que quiser, mas no geral seu design deve parecer com isso:
 ![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](/pt-BR/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-font-small.png)

Caixas, caixas, é tudo sobre caixas
-----------------------------------

Uma coisa que você notará sobre escrever CSS é que muito disso é sobre caixas — indicar seu tamanho, cor, posição, etc. Muitos dos elementos HTML da sua página podem ser pensados como caixas umas em cima das outras.

![a big stack of boxes or crates sat on top of one another](/pt-BR/docs/Learn/Getting_started_with_the_web/CSS_basics/boxes.jpg)

Como esperado, o layout CSS é baseado principalmente no *modelo de caixas*. Cada um dos blocks que ocupam espaço na sua página tem propriedades como essas:

* `padding`, o espaço ao redor do conteúdo (ex.: ao redor do texto de um parágrafo).
* `border`, a linha sólida do lado de fora do padding.
* `margin`, o espaço externo a um elemento.

![three boxes sat inside one another. From outside to in they are labelled margin, border and padding](/pt-BR/docs/Learn/Getting_started_with_the_web/CSS_basics/box-model.png)

Nessa seção nós também vamos usar:

* `width` (largura de um elemento).
* `background-color`, a cor atrás do conteúdo de um elemento e do padding.
* `color`, a cor do conteúdo de um elemento (geralmente texto).
* `text-shadow`: cria uma sombra no texto dentro de um elemento.
* `display`: define a maneira de dispor um elemento (não se preocupe com isso ainda).

Então, vamos começar e adicionar mais CSS à nossa página! Continue adicionando essas novas regras à parte inferior da página e não tenha medo de experimentar alterações nos valores para ver o que aparece.

### Mudando a cor da página

```css
html {
  background-color: #00539f;
}
```

Essa regra define uma cor de fundo para toda a página. Mude a cor acima para a cor que você escolheu ao planejar seu site.

### Separando o corpo

```css
body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}
```

Agora para o elemento `<body>`. Há algumas declarações aqui, então vamos passar por elas uma a uma:

* `width: 600px;` — Isso força o corpo a ter 600 pixels de largura.
* `margin: 0 auto;` — Quando você define dois valores em uma propriedade como `margin` ou `padding`, o primeiro valor afeta a parte superior do elemento **e** a parte inferior (tornando-os `0` nesse caso), e no segundo valor os lados esquerdo **e** direito (aqui, `auto` é um valor especial que divide o espaço horizontal uniformemente entre esquerda e direita). Você também pode utilizar um, três ou quatro valores, como documentado aqui.
* `background-color: #FF9500;` — como antes, isso define a cor de fundo do elemento. Usamos um tipo de laranja avermelhado no corpo, para opor ao azul escuro no elemento `<html>`, mas fique à vontade para ir em frente e experimentar.
* `padding: 0 20px 20px 20px;` — temos quatro valores definidos no padding, para criar um pouco de espaço em torno do nosso conteúdo. Dessa vez, estamos definindo sem padding na parte superior do corpo, e 20 pixels no lado esquerdo, na parte inferior e no lado direito. Os valores definem a parte superior, o lado direito, a parte inferior e o lado esquerdo, nessa ordem. Como com a `margin`, você também pode usar um, dois, ou três valores, conforme documentado na sintaxe do padding.
* `border: 5px solid black;` — isso simplesmente define uma borda preta sólida de 5 pixels de largura em todos os lados do corpo.
### Posicionando e estilizando o título da nossa página principal

```css
h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}
```

Você deve ter notado que há um espaço horrível no topo do corpo. Isso acontece porque os browsers aplicam algumas **estilizações padrão** ao `<h1>` (en-US) (entre outros), mesmo quando você não aplicou nenhum CSS! Isso pode soar como uma má ideia, mas queremos ter uma legibilidade básica, mesmo em uma página sem estilos. Para nos livrarmos desse espaço, sobrescrevemos o estilo padrão, definindo `margin: 0;`.

Em seguida, definimos o padding das partes superior e inferior do cabeçalho para 20 pixels e fizemos o texto do cabeçalho da mesma cor que a cor de fundo do HTML.

Uma propriedade bastante interessante que usaremos aqui é o `text-shadow`, que aplica uma sombra ao conteúdo de texto do elemento. Seus quatro valores são os seguintes:

* O primeiro valor em pixel define o **deslocamento horizontal** da sombra do texto — até onde ele se move: um valor negativo deve movê-la para a esquerda.
* O segundo valor em pixel define o **deslocamento vertical** da sombra do texto — o quanto ela se move para baixo, neste exemplo; um valor negativo deve movê-la para cima.
* O terceiro valor em pixel define o **raio de desfoque** da sombra — um valor maior significará uma sombra mais borrada.
* O quarto valor define a cor base da sombra.

De novo, tente experimentar com diferentes valores para ver o que você pode criar!

### Centralizando a imagem

```css
img {
  display: block;
  margin: 0 auto;
}
```

Finalmente, centralizaremos a imagem para melhorar a aparência. Nós poderiamos usar novamente o truque `margin: 0 auto` que aprendemos anteriormente para o corpo, mas também precisamos fazer outra coisa. O elemento `<body>` é **em nível de bloco**, o que significa que ocupa espaço na página e pode ter margens e outros valores de espaçamento aplicados a ele. Imagens, por outro lado, são elementos **em linha**, o que significa que não podem ter margens. Então, para aplicar margens a uma imagem, temos que dar o comportamento de nível de bloco a imagem usando `display: block;`.

**Nota:** As instruções acima assumem que você está usando uma imagem menor que a largura definida no corpo (600 pixels). Se sua imagem for maior, ela irá transbordar o corpo e vazar para o restante da página. Para corrigir isso, você pode 1) reduzir a largura da imagem usando um editor gráfico (em inglês) ou 2) dimensionar a imagem usando CSS definindo a propriedade `width` no elemento `<img>` com um valor menor (por exemplo, `400 px;`).

**Nota:** Não se preocupe se você ainda não entender `display: block;` ou a distinção entre em nível de bloco / em linha. Você entenderá ao estudar CSS com mais profundidade. Você pode descobrir mais sobre os diferentes valores de exibição disponíveis em nossa página de referência sobre display.

Conclusão
---------

Se você seguiu todas as instruções desse artigo, você deve terminar com uma página parecida com essa (você também pode ver nossa versão aqui):

![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.](/pt-BR/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-final.png)

Se você emperrar, sempre poderá comparar seu trabalho com nosso código de exemplo finalizado no Github.

Aqui, nós só arranhamos na superfície do CSS. Para descobrir mais, vá ao nosso tópico de aprendizado CSS.

* Anterior
* Menu: Getting started with the web
* Próxima


Como será o seu site? - Aprendendo desenvolvimento web

Como será o seu site?
=====================

* Anterior
* Menu: Getting started with the web
* Próxima

*Como será o seu site?* discute o trabalho de planejamento e design que você precisa fazer para o seu site antes de escrever o código, incluindo "Quais informações meu site oferece?", "Quais fontes e cores eu quero?" e "O que meu site faz?"

Primeiramente: planejamento
---------------------------

Antes que você faça qualquer coisa, você precisa de algumas ideias. O que seu site realmente vai fazer? Um site pode fazer praticamente tudo, mas primeiro você deve manter as coisas em um nível simples. Nós vamos começar criando um site simples com um cabeçalho, uma imagem e alguns parágrafos.

Para começar, você deve responder às seguintes questões:

1. **Sobre o que é seu site?** Você gosta de cachorros, Nova Iorque ou Pacman?
2. **Que informação você está apresentando sobre o assunto?** Escreva um título e alguns parágrafos e pense em uma imagem para ilustrar sua página.
3. **Como será seu site,** em termos simples. Qual é a cor de fundo? Qual é o tipo de fonte apropriado: formal, desenhado, negrito e gritante, sutil?

**Nota:** Projetos complexos precisam de guias detalhados que abordam todos os detalhes de cores, fontes, espaçamento entre itens de uma página, estilo de escrita apropriado, e por aí vai. Isso é denominado um guia de design, sistema de design ou manual da marca, e você pode ver um exemplo no Sistema de Design do Firefox Photon (em inglês).

Rascunhando seu design
----------------------

Em seguida, pegue papel e caneta e faça um rascunho de como você deseja que seu site seja. Para sua primeira página simples, não há muito o que rascunhar, mas você deve criar o hábito desde o começo. Realmente ajuda — você não precisa ser um Van Gogh!

![](/pt-BR/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/website-drawing-scan.png)

**Nota:** Mesmo em sites reais e complexos, os times de design geralmente começam pelo rascunho em papel e depois constroem a versão digital usando um editor gráfico ou tecnologias da web.

Os times de web geralmente incluem um designer gráfico e um designer de experiencia do usuário (UX). Designers gráficos, obviamente, constroem a parte visual do site. UX designers tem uma função de certa forma mais abstrata, direcionando como os usuários vão interagir e experimentar o site.

Construindo seus ativos
-----------------------

Nesse ponto, é bom começar juntando o conteúdo que vai eventualmente aparecer no site.

### Texto

Você deve ter seu título e parágrafos desde antes. Mantenha eles por perto.

### Cor do tema

Para escolher a cor, vá ao Seletor de Cores e escolha a cor que preferir. Quando escolher a cor, você verá uma sequência de seis caracteres, como `#660066`. Isso é chamado um *código hex(adecimal)*, e representa sua cor. Copie esse código em algum lugar seguro por enquanto.

![](/pt-BR/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/screenshot_from_2014-11-03_17-40-49.png)

### Imagens

Para escolher uma imagens, vá no Google Imagens e procure por algo que se encaixe no seu site.

1. Quando você achar a imagem que você quer, clique nela para obter uma visão ampliada dela.
2. Clique com o botão direito na imagem (Ctrl + click no Mac) escolha *Salvar imagem como...* e escolha um local seguro para salvar sua imagem. Como alternativa, copie o endereço web da imagem da barra de endereço do navegador, para uso posterior.

![](/pt-BR/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images.png)

Observe que a maioria das imagens na Web, inclusive no Imagens do Google, é protegida por direitos autorais. Para reduzir a probabilidade de violar direitos autorais, você pode usar o filtro de licenças do Google. Clique no botão *Ferramentas* e, em seguida, na opção *Direitos de uso* resultante que aparece abaixo. Você deve escolher uma opção como *Marcada para reutilização*.

![](/pt-BR/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images-licensing.png)

### Fonte

Para escolher uma fonte:

1. Vá no Google Fontes e role a lista até que você ache uma que você goste. Você também pode usar os controles à direita para filtrar os resultados.
2. Clique no ícone "mais" (Adicionar a) ao lado da fonte desejada.
3. Clique no botão "\* Família Selecionada" no painel na parte inferior da página ("\*" depende de quantas fontes você selecionou).
4. Na caixa pop-up, você pode ver e copiar as linhas de código que o Google oferece em seu editor de texto para salvar posteriormente.

![](/pt-BR/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/font1.png)

![](/pt-BR/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/font2.png)

* Anterior
* Menu: Getting started with the web
* Próxima


A web e seus padrões - Aprendendo desenvolvimento web

A web e seus padrões
====================

Este artigo fornece algumas informações úteis sobre a Web - como ela surgiu, quais são suas tecnologias padrões, como elas funcionam juntas, porque "desenvolvedor web" é uma grande carreira para escolher e quais são os tipos de boas práticas são coisas que você aprenderá neste curso.

Breve histórico da web
----------------------

Seremos breves, já que existem muitos (mais) artigos detalhados do histórico da web por aí, que mostraremos mais tarde (tente também pesquisar por "histórico da web" no seu mecanismo de pesquisa favorito e veja o que você encontra, se estiver interessado em maiores detalhes.)

No fim da década de 1960, os militares dos Estados Unidos desenvolveram uma rede de comunicação chamada ARPANET. Ela pode ser considerada como precursora da Web, já que trabalhava com comutação de pacotes e apresentou a primeira implementação do conjuto de protocolos TCP/IP. Estas duas tecnologias formaram a base da infraestrutura em que a internet foi construída.

Em 1980, Tim Berners-Lee (frequentemente chamado de TimBL) escreveu um programa de notebook chamado ENQUIRE, que apresentava o conceito de links entre diferentes nós. Parece familiar?

Avance para 1989, e TimBL escreveu Information Management: A Proposal and HyperText and CERN; essas duas publicações juntas forneceram o pano de fundo de como a web funcionaria. Eles receberam uma boa quantidade de juros, o suficiente para convencer os chefes da TimBL a permitir que ele fosse em frente e criasse um sistema de hipertexto global.

No final de 1990, TimBL havia criado todas as coisas necessárias para executar a primeira versão da web - HTTP , HTML , o primeiro navegador da web, que era chamado de WorldWideWeb , um servidor HTTP e algumas páginas da web para olhar.

Nos próximos anos que se seguiram, a web explodiu, com vários navegadores sendo lançados, milhares de servidores da web sendo configurados e milhões de páginas da web sendo criadas. OK, é um resumo muito simples do que aconteceu, mas prometi a você um breve resumo.

Um último dado significativo para compartilhar é que, em 1994, TimBL fundou o World Wide Web Consortium (W3C), uma organização que reúne representantes de muitas empresas de tecnologia diferentes para trabalharem juntos na criação de especificações de tecnologia da web. Depois disso, outras tecnologias surgiram, como CSS e JavaScript , e a web começou a se parecer mais com a que conhecemos hoje.

Padrões da web
--------------

**Os padrões da Web** são as tecnologias que usamos para construir sites. Esses padrões existem como longos documentos técnicos chamados especificações, que detalham exatamente como a tecnologia deve funcionar. Esses documentos não são muito úteis para aprender como usar as tecnologias que eles descrevem (é por isso que temos sites como MDN Web Docs), mas em vez disso, devem ser usados por engenheiros de software para implementar essas tecnologias (geralmente em navegadores da web).

Por exemplo, o HTML Living Standard descreve exatamente como o HTML (todos os elementos HTML e suas APIs associadas e outras tecnologias adjacentes) deve ser implementado.

Os padrões da Web são criados por órgãos de padrões - instituições que convidam grupos de pessoas de diferentes empresas de tecnologia para se reunirem e concordarem sobre como as tecnologias devem funcionar da melhor maneira para cumprir todos os seus casos de uso. O W3C é o órgão de padrões da web mais conhecido, mas existem outros como o WHATWG (que foi responsável pela modernização da linguagem HTML), ECMA (que publicou o padrão para ECMAScript, no qual o JavaScript é baseado), Khronos (que publica tecnologias para gráficos 3D, como WebGL) e outros.

### Padrões "abertos"

Um dos principais aspectos dos padrões da web, que TimBL e o W3C concordaram desde o início, é que a web (e as tecnologias da web) devem ser livres para contribuir e usar, e não onerada por patentes / licenciamento. Portanto, qualquer pessoa pode escrever o código para construir um site de graça e pode contribuir com o processo de criação de padrões, onde as especificações são escritas.

Como as tecnologias da web são criadas abertamente, em colaboração entre muitas empresas diferentes, isso significa que nenhuma empresa consegue controlá-las, o que é realmente bom. Você não gostaria que uma única empresa repentinamente decidisse colocar toda a web atrás de um acesso pago, ou lançar uma nova versão de HTML que todos precisam comprar para continuar a fazer sites, ou pior ainda, apenas decidir que não estão mais interessados e apenas desligá-lo.

Isso permite que a web continue sendo um recurso público disponível gratuitamente.

### Não quebre a web

Outra frase que você ouvirá sobre os padrões abertos da web é "não quebre a web" - a ideia é que qualquer nova tecnologia da web introduzida deve ser compatível com o que existia antes (ou seja, os sites antigos ainda continuarão a funcionar ), e compatível com as versões futuras (tecnologias futuras, por sua vez, serão compatíveis com o que temos atualmente). Conforme você avança no material de aprendizagem apresentado aqui, você começará a aprender como isso é possível com um projeto muito inteligente e trabalho de implementação.

Ser um desenvolvedor web é bom
------------------------------

A indústria da web é um mercado muito atraente para se entrar, se você estiver procurando por um emprego. Números publicados recentes dizem que existem atualmente cerca de 19 milhões de desenvolvedores da web no mundo, e esse número deve mais que dobrar na próxima década. E, ao mesmo tempo, há uma escassez de habilidades na indústria - então, que melhor momento para aprender desenvolvimento web?

No entanto, nem tudo é diversão e jogos - construir sites é uma proposta mais complicada do que costumava ser, e você terá que investir algum tempo para estudar todas as diferentes tecnologias que precisa usar, todas as técnicas e melhores práticas que você precisa saber e todos os padrões típicos que você deverá implementar. Você levará alguns meses para realmente começar a entrar no assunto e, em seguida, precisará continuar aprendendo para que seu conhecimento fique atualizado com todas as novas ferramentas e recursos que aparecem na plataforma da web, e continue praticando e refinando seu ofício.

*A única constante é a mudança.*

Isso parece difícil? Não se preocupe - nosso objetivo é fornecer a você tudo o que você precisa saber para começar, e as coisas ficarão mais fáceis. Depois de abraçar as constantes mudanças e incertezas da web, você começará a se divertir. Como parte da comunidade web, você terá toda uma rede de contatos e materiais úteis para ajudá-lo, e começará a desfrutar das possibilidades criativas que isso traz.

Você é um criativo digital agora. Aproveite a experiência e o potencial para ganhar a vida.

Visão geral das tecnologias modernas da web
-------------------------------------------

Existem várias tecnologias para aprender se você quiser ser um desenvolvedor front-end da web. Nesta seção, iremos descrevê-los brevemente. Para uma explicação mais detalhada de como alguns deles funcionam juntos, leia nosso artigo Como funciona a web .

### Navegadores

Provavelmente, você está lendo essas palavras dentro de um navegador da Web neste exato momento (a menos que as tenha imprimido ou esteja usando tecnologia de assistência, como um leitor de tela para ler para você). Os navegadores da web são os programas de software que as pessoas usam para consumir a web e incluem Firefox , Chrome , Opera , Safari e Edge .

### HTTP

O protocolo de transferência de hipertexto, ou HTTP , é um protocolo de mensagens que permite aos navegadores da web se comunicarem com os servidores da web (onde os sites da web são armazenados). Uma conversa típica é algo como
```

"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]
```

A sintaxe real para mensagens HTTP (chamadas de solicitações e respostas) não é legível por humanos, mas isso lhe dá uma ideia básica.

### HTML, CSS e JavaScript

HTML , CSS e JavaScript são as três tecnologias principais que você usará para construir um site:

* A linguagem de marcação de hipertexto, ou **HTML** , é uma linguagem de marcação que consiste em diferentes elementos nos quais você pode agrupar (marcar) o conteúdo para dar-lhe significado (semântica) e estrutura. HTML simples se parece com isto:

```html
<h1>This is a top-level heading</h1>

<p>This is a paragraph of text.</p>

<img src="cat.jpg" alt="A picture of my cat" />
```

Se adotássemos uma analogia com a construção de uma casa, o HTML seria como as fundações e paredes da casa, que lhe dão estrutura e a mantém unida.
* Cascading Style Sheets ( **CSS** ) é uma linguagem baseada em regras usada para aplicar estilos ao seu HTML, por exemplo, definindo texto e cores de fundo, adicionando bordas, animando coisas ou fazendo o layout de uma página de uma determinada maneira. Como um exemplo simples, o código a seguir tornaria nosso parágrafo HTML em vermelho:

```css
p {
  color: red;
}
```

Na analogia da casa, CSS é como a pintura, o papel de parede, os tapetes e as pinturas que você usaria para deixar a casa bonita.
* **JavaScript** é a linguagem de programação que usamos para adicionar interatividade aos sites, desde a troca de estilo dinâmico até a obtenção de atualizações do servidor, até gráficos 3D complexos. O seguinte JavaScript simples armazenará uma referência ao nosso parágrafo na memória e mudará o texto dentro dele:

```js
let pElem = document.querySelector("p");
pElem.textContent = "We changed the text!";
```

Na analogia da casa, o JavaScript é como o fogão, a TV, o microondas ou o secador de cabelo - as coisas que fornecem funcionalidade útil à sua casa
### Ferramentas

Depois de aprender as tecnologias "brutas" que podem ser usadas para construir páginas da web (como HTML, CSS e JavaScript), você logo começará a encontrar várias ferramentas que podem ser usadas para tornar seu trabalho mais fácil ou mais eficiente. Exemplos incluem:

* As ferramentas de desenvolvedor dentro de navegadores modernos que podem ser usadas para depurar seu código.
* Ferramentas de teste (en-US) que podem ser usadas para executar testes para mostrar se o seu código está se comportando como você deseja.
* Bibliotecas e estruturas construídas com base em JavaScript que permitem a você construir certos tipos de site da Web com muito mais rapidez e eficácia.
* Os chamados "Linters", que pegam um conjunto de regras, olham para o seu código e destacam os lugares onde você não seguiu as regras corretamente.
* Minificadores, que removem todos os espaços em branco dos arquivos de código para torná-los menores e, portanto, fazer o download do servidor mais rapidamente.
### Linguagens e estruturas do lado do servidor

HTML, CSS e JavaScript são linguagens de front-end (ou cliente), o que significa que são executadas pelo navegador para produzir um front-end de site que seus usuários possam usar.

Há outra classe de linguagens chamadas linguagens de back-end (ou do lado do servidor), o que significa que são executadas no servidor antes de o resultado ser enviado ao navegador para exibição. Um uso típico para uma linguagem do lado do servidor é obter alguns dados de um banco de dados e gerar algum HTML para conter os dados, antes de enviar o HTML ao navegador para exibi-lo ao usuário.

Linguagens de servidor de exemplo incluem ASP.NET, Python, PHP e NodeJS.

Melhores práticas da web
------------------------

Falamos brevemente sobre as tecnologias que você usará para construir sites. Agora, vamos discutir as melhores práticas que você deve empregar para garantir que está usando essas tecnologias da melhor maneira possível.

Ao fazer o desenvolvimento da web, a principal causa de incerteza vem do fato de que você não sabe qual combinação de tecnologia cada usuário usará para visualizar seu site:

* O usuário 1 pode estar olhando para ele em um iPhone, com uma tela pequena e estreita.
* O usuário 2 pode estar olhando para ele em um laptop Windows com um monitor widescreen conectado a ele.
* O usuário 3 pode ser cego e usar um leitor de tela para ler a página da web para eles.
* O usuário 4 pode estar usando uma máquina de desktop muito antiga que não pode executar navegadores modernos.

Como você não sabe exatamente o que seus usuários usarão, você precisa fazer um design defensivo - tornar seu site o mais flexível possível, de modo que todos os usuários acima possam usá-lo, mesmo que nem todos recebam o mesmo experiência. Resumindo, estamos tentando fazer a web funcionar para todos, tanto quanto possível.

Você encontrará os conceitos abaixo em algum momento de seus estudos.

* **A compatibilidade entre navegadores** é a prática de tentar garantir que sua página da web funcione em tantos dispositivos quanto possível. Isso inclui o uso de tecnologias que todos os navegadores suportam, proporcionando melhores experiências aos navegadores que podem lidar com elas (aprimoramento progressivo) e / ou escrever código para que ele volte a uma experiência mais simples, mas ainda utilizável em navegadores mais antigos (degradação normal). Também envolve muitos testes para ver se algo falha em determinados navegadores e, em seguida, mais trabalho para corrigir essas falhas.
* **Web design responsivo** é a prática de tornar sua funcionalidade e layouts flexíveis para que eles possam se adaptar automaticamente a diferentes navegadores. Um exemplo óbvio é um site que é apresentado de uma maneira em um navegador widescreen na área de trabalho, mas é exibido como um layout mais compacto de coluna única em navegadores de telefones celulares. Tente ajustar a largura da janela do navegador agora e veja o que acontece.
* **Desempenho** significa carregar os sites o mais rápido possível, mas também torná-los intuitivos e fáceis de usar, para que os usuários não fiquem frustrados e vão para outro lugar.
* **Acessibilidade** significa tornar seus sites utilizáveis por tantos tipos diferentes de pessoas quanto possível (conceitos relacionados são diversidade e inclusão e design inclusivo). Isso inclui pessoas com deficiências visuais, auditivas, cognitivas ou físicas. Também vai além das pessoas com deficiência - que tal pessoas jovens ou velhas, pessoas de diferentes culturas, pessoas que usam dispositivos móveis ou pessoas com conexões de rede lentas ou não confiáveis?
* **Internacionalização** significa tornar os sites utilizáveis por pessoas de diferentes culturas, que falam línguas diferentes com a sua. Existem considerações técnicas aqui (como alterar seu layout para que ainda funcione bem para linguagens da direita para a esquerda ou até mesmo verticais) e humanas (como usar uma linguagem simples e sem gíria para que as pessoas que têm sua linguagem já que o segundo ou terceiro idioma deles têm mais probabilidade de entender seu texto).
* **Privacidade e segurança** . Esses dois conceitos estão relacionados, mas são diferentes. Privacidade refere-se a permitir que as pessoas façam seus negócios em particular e não espioná-las ou coletar mais dados do que você absolutamente precisa. Segurança refere-se à construção de seu site de maneira segura, de forma que usuários mal-intencionados não possam roubar informações contidas nele de você ou de seus usuários.
Veja também
-----------

* História da World Wide Web
* Como funciona a internet?


Noções básicas de JavaScript - Aprendendo desenvolvimento web

Noções básicas de JavaScript
============================

* Anterior
* Menu: Getting started with the web
* Próxima

 JavaScript é uma linguagem de programação que adiciona interatividade ao seu site. Isso acontece em jogos, no comportamento das respostas quando botões são pressionados ou com entrada de dados em formulários; com estilo dinâmico; com animação, etc.
 Este artigo ajuda você a começar a usar o JavaScript e aumenta sua compreensão do que é possível.

O que é JavaScript?
-------------------

JavaScript é uma poderosa linguagem de programação que pode adicionar interatividade a um site.
 Foi inventado por Brendan Eich.

 JavaScript é versátil e amigável para iniciantes.
 Com mais experiência, você poderá criar jogos, gráficos 2D e 3D animados, aplicativos abrangentes baseados em banco de dados e muito mais!

O próprio JavaScript é relativamente compacto, mas muito flexível. Os desenvolvedores escreveram uma variedade de ferramentas sobre a linguagem JavaScript principal, desbloqueando uma grande quantidade de funcionalidades com o mínimo de esforço. Esses incluem:

* Interfaces de programação de aplicativos de navegador (APIs) incorporadas a navegadores da Web, fornecendo funcionalidades como criação dinâmica de HTML e definição de estilos CSS; coletar e manipular um fluxo de vídeo da webcam de um usuário ou gerar gráficos 3D e amostras de áudio.
* APIs de terceiros que permitem aos desenvolvedores incorporar funcionalidades em sites de outros provedores de conteúdo, como Twitter ou Facebook.
* Estruturas e bibliotecas de terceiros que você pode aplicar ao HTML para acelerar o trabalho de construção de sites e aplicativos.

Está fora do escopo deste artigo — como uma introdução leve ao JavaScript — apresentar os detalhes de como a linguagem JavaScript básica é diferente das ferramentas listadas acima. Você pode aprender mais na [área de aprendizado de JavaScript] do MDN (/pt-BR/docs/Learn/JavaScript), bem como em outras partes do MDN.

A seção abaixo apresenta alguns aspectos da linguagem principal e também oferece uma oportunidade de jogar com alguns recursos da API do navegador. Divirta-se!

Um exemplo "Olá, mundo!"
------------------------

JavaScript é uma das tecnologias da web modernas mais populares! À medida que suas habilidades em JavaScript aumentam, seus sites entrarão em uma nova dimensão de poder e criatividade.

No entanto, familiarizar-se com JavaScript é mais desafiador do que familiarizar-se com HTML e CSS. Você pode ter que começar pequeno e progredir gradualmente. Para começar, vamos examinar como adicionar JavaScript à sua página para criar um exemplo *Hello world!*. (*Hello world!* é o padrão para exemplos de programação introdutória.)

**Aviso:** Se você não está acompanhando o restante do nosso curso, faça o download deste código de exemplo e use-o como ponto de partida.

1. Vá para o seu site de teste e crie uma nova pasta chamada `scripts`. Dentro da pasta scripts, crie um novo documento de texto chamado `main.js` e salve-o.
2. Em seu arquivo `index.html`, insira este código em uma nova linha, logo antes da tag de fechamento `</body>`:

```html
<script src="scripts/main.js"></script>
```

3. Isso faz o mesmo trabalho que o elemento `<link>` para CSS. Ele aplica o JavaScript à página, para que possa afetar o HTML (junto com o CSS e qualquer outra coisa na página).
4. Adicione este código ao arquivo `main.js`:

```js
const myHeading = document.querySelector("h1");
myHeading.textContent = "Olá mundo!";
```

5. Certifique-se de que os arquivos HTML e JavaScript foram salvos. Em seguida, carregue `index.html` em seu navegador. Você deve ver algo assim:

![Título "hello world" acima de um logotipo do firefox](/pt-BR/docs/Learn/Getting_started_with_the_web/JavaScript_basics/hello-world.png)

**Nota:** A razão pela qual as instruções (acima) colocam o elemento `<script>` perto da parte inferior do arquivo HTML é que o navegador lê o código na ordem em que aparece no arquivo.

Se o JavaScript carregar primeiro e supostamente afetar o HTML que ainda não foi carregado, pode haver problemas. Colocar JavaScript perto da parte inferior de uma página HTML é uma maneira de acomodar essa dependência. Para saber mais sobre abordagens alternativas, consulte Estratégias de carregamento de script.

### O que aconteceu?

O texto do cabeçalho mudou para *Hello world!* usando JavaScript. Você fez isso usando uma função chamada `querySelector()` para obter uma referência ao seu título e armazená-lo em uma variável chamada `myHeading`. Isso é semelhante ao que fizemos usando seletores CSS. Quando você deseja fazer algo em um elemento, primeiro precisa selecioná-lo.

Em seguida, o código define o valor da propriedade `textContent` da variável `myHeading` (que representa o conteúdo do cabeçalho) como *Hello world!*.

**Nota:** Ambos os recursos usados neste exercício são partes do Modelo de Objeto de Document (DOM), que tem a capacidade de manipular documentos.

Curso intensivo de fundamentos da linguagem
-------------------------------------------

Para entender melhor como o JavaScript funciona, vamos explicar alguns dos principais recursos da linguagem. Vale a pena notar que esses recursos são comuns a todas as linguagens de programação. Se você dominar esses fundamentos, terá uma vantagem inicial na codificação em outras linguagens também!

**Aviso:** neste artigo, tente inserir as linhas de código de exemplo em seu console JavaScript para ver o que acontece. Para obter mais detalhes sobre consoles JavaScript, consulte Descubra as ferramentas de desenvolvedor do navegador.

### Variáveis

Variables são contêineres que armazenam valores. Você começa declarando uma variável com a palavra-chave `let`, seguida do nome que você dá à variável:

```js
let myVariable;
```

Um ponto e vírgula no final de uma linha indica onde uma instrução termina. Só é necessário quando você precisa separar instruções em uma única linha. No entanto, algumas pessoas acreditam que é uma boa prática colocar ponto-e-vírgula no final de cada instrução. Existem outras regras para quando você deve e não deve usar ponto-e-vírgula. Para obter mais detalhes, consulte Your Guide to Semicolons in JavaScript.

Você pode nomear uma variável para praticamente qualquer coisa, mas há algumas restrições. (Consulte esta seção sobre regras de nomenclatura.) Se não tiver certeza, você pode verificar o nome da variável para ver se é válido.

JavaScript diferencia maiúsculas de minúsculas. Isso significa que `minhaVariável` não é o mesmo que `minhavariável`. Se você tiver problemas em seu código, verifique o caso!

Depois de declarar uma variável, você pode atribuir um valor a ela:

```js
myVariable = "Bob";
```

Além disso, você pode fazer essas duas operações na mesma linha:

```js
let myVariable = "Bob";
```

Você recupera o valor chamando o nome da variável:

```js
myVariable;
```

Depois de atribuir um valor a uma variável, você pode alterá-lo posteriormente no código:

```js
let myVariable = "Bob";
myVariable = "Steve";
```

Observe que as variáveis podem conter valores que têm diferentes tipos de dados:

| Variável | Explicação | Exemplo |
| --- | --- | --- |
| String |
 Esta é uma sequência de texto conhecida como string. Para significar que o valor
 for uma string, coloque-a entre aspas simples.
  | `let myVariable = 'Bob';` |
| Number | Isto é um número. Os números não têm aspas. | `deixe minhaVariável = 10;` |
| Boolean |
 Este é um valor Verdadeiro/Falso. As palavras `true` e
 `false` são palavras-chave especiais que não precisam de aspas.
  | `let myVariable = true;` |
| Array |
 Esta é uma estrutura que permite armazenar vários valores em um único
 referência.
  | `let myVariable = [1,'Bob','Steve',10];`Refere-se a cada
 membro do array assim:`myVariable[0]`,
 `myVariable[1]`, etc.
  |
| Object |
 Isso pode ser qualquer coisa. Tudo em JavaScript é um objeto e pode ser
 armazenados em uma variável. Tenha isso em mente enquanto aprende.
  | `let myVariable = document.querySelector('h1');`Todos
 os exemplos acima também.
  |

Então, por que precisamos de variáveis? As variáveis são necessárias para fazer qualquer coisa interessante na programação. Se os valores não pudessem ser alterados, você não poderia fazer nada dinâmico, como personalizar uma mensagem de saudação ou alterar uma imagem exibida em uma galeria de imagens.

### Comentários

Comentários são trechos de texto que podem ser adicionados junto com o código. O navegador ignora o texto marcado como comentários. Você pode escrever comentários em JavaScript da mesma forma que em CSS:

```js
/\*
Tudo no meio é um comentário.
\*/
```

Se o seu comentário não contém quebras de linha, é uma opção colocá-lo atrás de duas barras como esta:

```js
// Isso é um comentário
```

### Operadores

Um `operator` é um símbolo matemático que produz um resultado baseado em dois valores (ou variáveis). Na tabela a seguir, você pode ver alguns dos operadores mais simples, juntamente com alguns exemplos para experimentar no console JavaScript.

| Operador | Explicação | Símbolo(s) | Exemplo |
| --- | --- | --- | --- |
| Adição | Adicione dois números ou combine duas strings. | `+` | `6 + 9;'Olá ' + 'mundo!';` |
| Subtração, Multiplicação, Divisão | Eles fazem o que você espera que façam em matemática básica. | `-`, `*`, `/` | `9 - 3;8 * 2; // multiplicar em JS é um asterisco9 / 3;` |
| Atribuição | Como você já viu: isso atribui um valor a uma variável. | `=` | `let myVariable = 'Bob';` |
| Igualdade estrita |
 Isso executa um teste para ver se dois valores são iguais. Ele retorna um
 Resultado `true`/`false` (booleano).
  | `===` | `let myVariable = 3;myVariable === 4;` |
| Não, não é igual |
 Isso retorna o valor logicamente oposto do que precede. Acontece
 um `true` em um `false`, etc. Quando é usado
 ao lado do operador de igualdade, o operador de negação testa se dois
 os valores *não* são iguais.
  | `!`, `!==` |
 Para "Not", a expressão básica é `true`, mas o
 a comparação retorna `false` porque nós a negamos:

`let myVariable = 3;!(myVariable === 3);`

 "Não é igual" dá basicamente o mesmo resultado com diferentes
 sintaxe. Aqui estamos testando "é `myVariable` NÃO igual a
 3". Isso retorna `false` porque `myVariable` É
 igual a 3:

`let myVariable = 3;myVariable !== 3;` |

Existem muito mais operadores para explorar, mas isso é o suficiente por enquanto. Consulte Expressões e operadores para obter uma lista completa.

**Nota:** misturar tipos de dados pode levar a alguns resultados estranhos ao realizar cálculos. Tenha cuidado para se referir às suas variáveis corretamente e obter os resultados esperados. Por exemplo, digite `'35' + '25'` em seu console. Por que você não consegue o resultado que esperava? Como as aspas transformam os números em strings, você acabou concatenando strings em vez de adicionar números. Se você inserir `35 + 25`, obterá o total dos dois números.

### Condicionais

Condicionais são estruturas de código usadas para testar se uma expressão retorna verdadeira ou não. Uma forma muito comum de condicionais é a instrução `if...else`. Por exemplo:

```js
let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Sim, eu amo sorvete de chocolate!");
} else {
  alert("Aaaah, mas chocolate é o meu favorito…");
}
```

A expressão dentro do `if ()` é o teste. Isso usa o operador de igualdade estrita (conforme descrito acima) para comparar a variável `iceCream` com a string `chocolate` para ver se as duas são iguais. Se esta comparação retornar `true`, o primeiro bloco de código será executado. Se a comparação não for verdadeira, o segundo bloco de código — após a instrução `else` — será executado.

### Funções

Functions são uma forma de empacotar a funcionalidade que você deseja reutilizar. É possível definir um corpo de código como uma função que é executada quando você chama o nome da função em seu código. Esta é uma boa alternativa para escrever repetidamente o mesmo código. Você já viu alguns usos de funções. Por exemplo:

```js
let myVariable = document.querySelector("h1");
```

```js
alert("olá!");
```

Essas funções, `document.querySelector` e `alert`, são incorporadas ao navegador.

Se você ver algo que se parece com um nome de variável, mas é seguido por parênteses— `()` —provavelmente é uma função. As funções geralmente usam arguments: bits de dados de que precisam para realizar seu trabalho. Os argumentos ficam dentro dos parênteses, separados por vírgulas se houver mais de um argumento.

Por exemplo, a função `alert()` faz com que uma caixa pop-up apareça dentro da janela do navegador, mas precisamos dar a ela uma string como argumento para informar à função qual mensagem exibir.

Você também pode definir suas próprias funções. No próximo exemplo, criamos uma função simples que recebe dois números como argumentos e os multiplica:

```js
function multiply(num1, num2) {
  let result = num1 \* num2;
  return result;
}
```

Tente executar isso no console; então teste com vários argumentos. Por exemplo:

```js
multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);
```

**Nota:** A instrução `return` diz ao navegador para retornar a variável `result` da função para que ela esteja disponível usar. Isso é necessário porque as variáveis definidas dentro das funções só estão disponíveis dentro dessas funções. Isso é chamado de variável scoping. (Leia mais sobre escopo de variável.)

### Eventos

A interatividade real em um site requer manipuladores de eventos. Essas são estruturas de código que detectam atividades no navegador e executam o código em resposta. O exemplo mais óbvio é lidar com o evento de click, que é acionado pelo navegador quando você clica em algo com o mouse. Para demonstrar isso, digite o seguinte em seu console e clique na página da Web atual:

```js
document.querySelector("html").addEventListener("click", function () {
  alert("Ai! Pare de me cutucar!");
});
```

 Existem várias maneiras de anexar um manipulador de eventos a um elemento.
 Aqui selecionamos o elemento `<html>`. Em seguida, chamamos sua função `addEventListener()`, passando o nome do evento para ouvir (`'click'`) e uma função para executar quando o evento acontecer.

 A função que acabamos de passar para `addEventListener()` aqui é chamada de *função anônima*, porque não tem um nome. Existe uma maneira alternativa de escrever funções anônimas, que chamamos de *função de seta*.
 Uma função de seta usa `() =>` em vez de `function ()`:

```js
document.querySelector("html").addEventListener("click", () => {
  alert("Ai! Pare de me cutucar!");
});
```

Melhorando nosso site de exemplo
--------------------------------

Com esta revisão dos fundamentos do JavaScript concluída (acima), vamos adicionar alguns novos recursos ao nosso site de exemplo.

Antes de prosseguir, exclua o conteúdo atual do seu arquivo `main.js` — a parte que você adicionou anteriormente durante o "Hello world!" exemplo — e salve o arquivo vazio. Caso contrário, o código existente entrará em conflito com o novo código que você está prestes a adicionar.

### Adicionando um trocador de imagens

Nesta seção, você aprenderá como usar os recursos JavaScript e DOM API para alternar a exibição de uma das duas imagens. Essa alteração ocorrerá quando o usuário clicar na imagem exibida.

1. Escolha uma imagem que deseja apresentar em seu site de exemplo. Idealmente, a imagem terá o mesmo tamanho da imagem que você adicionou anteriormente ou o mais próximo possível.
2. Salve esta imagem em sua pasta `images`.
3. Renomeie a imagem *firefox2.png*.
4. Adicione o seguinte código JavaScript ao seu arquivo `main.js`.

```js
const myImage = document.querySelector("img");

myImage.onclick = () => {
  const mySrc = myImage.getAttribute("src");
  if (mySrc === "images/firefox-icon.png") {
    myImage.setAttribute("src", "images/firefox2.png");
  } else {
    myImage.setAttribute("src", "images/firefox-icon.png");
  }
};
```

5. Salve todos os arquivos e carregue `index.html` no navegador. Agora, quando você clicar na imagem, ela deve mudar para a outra.

Isso é o que aconteceu. Você armazenou uma referência ao seu elemento `<img>` na variável `myImage`. Em seguida, você tornou a propriedade do manipulador de eventos `onclick` desta variável igual a uma função sem nome (uma função "anônima"). Portanto, toda vez que esse elemento for clicado:

1. O código recupera o valor do atributo `src` da imagem.
2. O código usa uma condicional para verificar se o valor `src` é igual ao caminho da imagem original:
    1. Se for, o código altera o valor `src` para o caminho da segunda imagem, forçando a outra imagem a ser carregada dentro do elemento `<img>`.
    2. Se não for (o que significa que já deve ter mudado), o valor `src` volta para o caminho da imagem original, para o estado original.
### Adicionando uma mensagem de boas-vindas personalizada

Em seguida, vamos alterar o título da página para uma mensagem de boas-vindas personalizada quando o usuário visitar o site pela primeira vez. Esta mensagem de boas-vindas persistirá. Caso o usuário saia do site e retorne posteriormente, salvaremos a mensagem usando a Web Storage API. Também incluiremos uma opção para alterar o usuário e, portanto, a mensagem de boas-vindas.

1. Em `index.html`, adicione a seguinte linha antes do elemento `<script>`:

```html
<button>Alterar usuário</button>
```

2. Em `main.js`, coloque o seguinte código no final do arquivo, exatamente como está escrito. Isso leva referências ao novo botão e ao cabeçalho, armazenando cada uma das variáveis internas:

```js
let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");
```

3. Adicione a seguinte função para definir a saudação personalizada. Isso não vai fazer nada ainda, mas thisso vai mudar em breve.

```js
function setUserName() {
  const myName = prompt("Por favor, digite o seu nome");
  localStorage.setItem("name", myName);
  myHeading.textContent = `Mozilla é legal, ${myName}`;
}
```

A função `setUserName()` contém uma função `prompt()`, que exibe uma caixa de diálogo, semelhante a `alert()`. Esta função `prompt()` faz mais do que `alert()`, solicitando ao usuário que insira dados e armazenando-os em uma variável após o usuário clicar em *OK.* Neste caso, estamos solicitando que o usuário insira um nome. Em seguida, o código chama uma API `localStorage`, que nos permite armazenar dados no navegador e recuperá-los posteriormente. Usamos a função `setItem()` do localStorage para criar e armazenar um item de dados chamado `'name'`, configurando seu valor para a variável `myName` que contém a entrada do usuário para o nome. Por fim, definimos o `textContent` do cabeçalho como uma string, mais o nome do usuário recém-armazenado.
4. Adicione o seguinte bloco de condição. Poderíamos chamar isso de código de inicialização, pois ele estrutura o aplicativo quando ele é carregado pela primeira vez.

```js
if (!localStorage.getItem("name")) {
  setUserName();
} else {
  const storedName = localStorage.getItem("name");
  myHeading.textContent = `Mozilla é legal, ${storedName`;
}
```

Esta primeira linha deste bloco utiliza o operador de negação (NOT lógico, representado pelo `!`) para verificar se os dados `nome` existem. Caso contrário, a função `setUserName()` é executada para criá-lo. Se existir (ou seja, o usuário definiu um nome de usuário durante uma visita anterior), recuperamos o nome armazenado usando `getItem()` e definimos o `textContent` do cabeçalho como uma string, mais o nome do usuário, conforme fez dentro de `setUserName()`.
5. Coloque este manipulador de evento `onclick` (abaixo) no botão. Quando clicado, `setUserName()` é executado. Isso permite que o usuário insira um nome diferente pressionando o botão.

```js
myButton.onclick = () => {
  setUserName();
};
```

### Um nome de usuário nulo?

Ao executar o exemplo e obter a caixa de diálogo que solicita que você insira seu nome de usuário, tente pressionar o botão *Cancelar*. Você deve terminar com um título que diz *Mozilla é legal, null*. Isso acontece porque, quando você cancela o prompt, o valor é definido como `null`. *Null* é um valor especial em JavaScript que se refere à ausência de um valor.

Além disso, tente clicar em *OK* sem inserir um nome. Você deve terminar com um título que diga *Mozilla é legal,* por razões bastante óbvias.

Para evitar esses problemas, você pode verificar se o usuário não digitou um nome em branco. Atualize sua função `setUserName()` para isto:

```js
function setUserName() {
  const myName = prompt("Por favor digite o seu nome.");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = `Mozilla é legal, ${myName}`;
  }
}
```

Em linguagem humana, isso significa: Se `myName` não tiver valor, execute `setUserName()` novamente desde o início. Se ele tiver um valor (se a declaração acima não for verdadeira), armazene o valor em `localStorage` e defina-o como o texto do título.

Conclusão
---------

Se você seguiu todas as instruções deste artigo, deve terminar com uma página parecida com a imagem abaixo. Você também pode ver nossa versão.

![Aparência final da página HTML após a criação dos elementos: um cabeçalho, um grande logotipo centralizado, conteúdo e um botão](/pt-BR/docs/Learn/Getting_started_with_the_web/JavaScript_basics/website-screen-scripted.png)

Se você ficar preso, pode comparar seu trabalho com nosso código de exemplo finalizado no GitHub .

Acabamos de arranhar a superfície do JavaScript. Se você gostou de jogar e deseja ir além, aproveite os recursos listados abaixo.

Veja também
-----------

Scripting dinâmico do lado do cliente com JavaScript

Mergulhe no JavaScript com muito mais detalhes.

Aprenda JavaScript

Este é um excelente recurso para aspirantes a desenvolvedores da web! Aprenda JavaScript em um ambiente interativo, com aulas curtas e testes interativos, guiados por uma avaliação automatizada. As primeiras 40 aulas são gratuitas. O curso completo está disponível por um pequeno pagamento único.

* Anterior
* Menu: Getting started with the web
* Próxima


Publicando seu site - Aprendendo desenvolvimento web

Publicando seu site
===================

* Anterior
* Menu: Getting started with the web
* Próxima

Uma vez que você tenha acabado de escrever seu código e organizar os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo. Este artigo mostra como colocar online seu código de amostra simples com o mínimo de esforço.

Quais são as opções?
--------------------

Publicar um site não é um tópico simples, principalmente porque há muitas maneiras diferentes de fazê-lo. Nesse artigo, nós não pretendemos documentar todos os métodos possíveis. Em vez disso, nós discutiremos os prós e contras de três estratégias do ponto de vista de um iniciante, e então o guiaremos por um método que irá funcionar por enquanto.

### Conseguindo uma hospedagem e um nome de domínio

Para ter mais controle sobre o conteúdo e a aparência do site, a maioria das pessoas escolhe comprar hospedagem na web e um nome de domínio:

* Hospedagem é um espaço para arquivos alugado no servidor de uma compania de hospedagem. O servidor disponibiliza o conteúdo do site para os usuários que o visitam.
* Um nome de domínio é o endereço único onde pessoas encontram seu site, como `http://www.mozilla.org`, ou `http://www.bbc.co.uk`. Você aluga seu nome de domínio por tantos anos quanto desejar por meio de um **registrador de domínio**.

Muitos sites profissionais ficam online dessa maneira.

Você vai precisar ainda de um programa de Protocolo de Transferência de Arquivos (FTP) (en-US) (veja Quanto custa: software para mais detalhes) para transferir os arquivos do site ao servidor. Programas FTP variam, mas geralmente você tem que logar no servidor usando detalhes fornecidos por sua empresa de hospedagem (ex. nome de usuário, senha, nome de host). Então, o programa mostra para você os arquivos locais e do servidor em duas janelas, para que você possa transferí-los ao servidor e de volta para o computador:

![](/pt-BR/docs/Learn/Getting_started_with_the_web/Publishing_your_website/ftp.jpg)

#### Dicas para encontrar hospedagem e domínios

* Nós não promovemos empresas de hospedagem comercial ou para registro de nome de domínio. Para encontrar empresas de hospedagem e registradores de domínio, basta procurar por "hospedagem web" e "nomes de domínio". Todos os registradores terão um recurso para permitir que você verifique se o nome de domínio desejado está disponível.
* Seu provedor de serviço de internet (en-US) local ou empresarial pode fornecer uma hospedagem limitada para um site pequeno. O conjunto de recursos disponíveis será limitado, mas pode ser perfeito para seus primeiros experimentos — entre em contato com eles e pergunte!
* Há alguns serviços disponíveis gratuitamente, como Neocities, Blogspot e Wordpress. Às vezes, você recebe o que paga, mas às vezes esses recursos são bons o suficiente para suas experiências iniciais.
* Muitas empresas fornecem hospedagem e registro de domínio.
### Usando uma ferramenta online como Github ou Google App Engine

Algumas ferramentas permitem que você publique seu site online:

* Github é um site de "codificação social". Ele permite que você faça upload de repositórios de código para armazenamento no **sistema de controle de versão** Git**.** Você pode então colaborar em projetos de código, e o sistema é open-source por padrão, o que significa que todo mundo pode encontrar seu código Github, usá-lo, aprender com ele e se aprimorar. O Gitub tem um recurso muito útil chamado GitHub Pages, que permite expor o código do site ao vivo na web.
* O Google App Engine é uma plataforma poderosa que permite criar e executar aplicativos na infraestrutura do Google, seja para criar um aplicativo da Web de várias camadas a partir do zero ou para hospedar um site estático. Veja Como você hospeda seu website no Google App Engine? Para maiores informações.

Diferente da maioria das hospedagens, essas ferramentas geralmentre são gratuitas, mas você tem um conjunto limitado de recursos.

### Usando uma IDE baseada na web como o CodePen

Há um número grande de web apps que emulam um ambiente de desenvolvimento de site, permitindo a você escrever HTML, CSS e JavaScript e então expor o resultado renderizado como em um site — tudo em uma aba do navegador! Falando de forma genérica, essas ferramentas são fáceis, boas para aprender e gratuitas (para recursos básicos), e elas geralmente hospedam sua página em um endereço único na web. No entanto, os recursos são limitados e esses aplicativos geralmente não provêem espaço de hospedagem para recursos (como imagens).

Tente codificar com alguns desses exemplos, e veja qual se encaixa melhor para você:

* JSFiddle
* Thimble
* JSBin
* CodePen

![](/pt-BR/docs/Learn/Getting_started_with_the_web/Publishing_your_website/jsbin-screen.png)

Publicando via Github
---------------------

Agora vamos mostrar como publicar seu site facilmente por meio das páginas do GitHub.

1. Primeiro de tudo, inscreva-se no GitHub e verifique seu e-mail.
2. Em seguida, você precisa criar um repositório para colocar seus arquivos.
3. Nesta página, na caixa *Repository name* (nome do repositório), digite username.github.io, onde *username* é o seu nome de usuário. Então, por exemplo, nosso amigo bobsmith entraria em bobsmith.github.io. Além disso, marque *Initialize this repository with a README* (inicializar este repositório com um README) e então clique em *Create repository* (Criar repositório).
4. ![](/pt-BR/docs/Learn/Getting_started_with_the_web/Publishing_your_website/github-create-repo.png)
5. Arraste e solte o conteúdo da pasta do site no seu repositório e clique em *Commit changes* (confirmar alterações).

**Nota:** Nota: Certifique-se que sua pasta possui um arquivo `index.html`.
6. Navegue em seu navegador até *username*.github.io para ver seu site online. Por exemplo, para o usuário *chrisdavidmills*, vá para *chrisdavidmills*.github.io.

**Nota:** Nota: Pode levar alguns minutos para seu site ficar online. Se ele não funcionar imediatamente, talvez seja necessário aguardar alguns minutos e tentar novamente.

Para aprender mais, consulte a Ajuda do Github Pages (em inglês).

Leitura complementar
--------------------

* O que é um servidor web
* Entendendo nomes de domínio
* Quanto custa fazer algo na web?
* Publicar um site: Um bom tutorial da Codecademy que vai um pouco além e mostra algumas técnicas adicionais.
* Hospedagem baratas ou gratuitas de sites estáticos, por Scott Murray, tem algumas idéias úteis sobre serviços disponíveis.
* Anterior
* Menu: Getting started with the web
* Próxima


Instalando os programas básicos - Aprendendo desenvolvimento web

Instalando os programas básicos
===============================

* Menu: Getting started with the web
* Próxima

Em *Instalando os programas básicos*, mostraremos quais ferramentas você precisa para o desenvolvimento web simples e como instalá-los apropriadamente.

Quais ferramentas os profissionais usam?
----------------------------------------

* **Um computador**. Talvez isso soe óbvio para algumas pessoas, mas alguns de vocês estão lendo esse artigo de um smartphone ou de um computador público. Para um desenvolvimento sério em web, é melhor investir em um desktop ou notebook rodando Windows, macOS ou Linux.
* **Um editor de texto**, para escrever código. Pode ser um editor de texto (ex: Visual Studio Code (em inglês), Notepad++ (em inglês), Sublime Text (em inglês), Atom (em inglês), Brackets, GNU Emacs (em inglês) ou VIM (em inglês)), ou um editor hibrído (ex: Dreamweaver ou WebStorm (em inglês)). Editores de documentos do Office não são adequados para esse tipo de uso, pois ele se baseiam em elementos escondidos que interferem com os motores de renderização usados pelos navegadores.
* **Navegadores web**, para testar os códigos. Atualmente os navegadores mais usados são Firefox, Chrome, Opera, Safari, Internet Explorer e Microsoft Edge. Você também deve testar o desempenho do seu site em dispositivos móveis e navegadores antigos que seu público-alvo ainda esteja usando (como o IE 8–10). O Lynx, um navegador da Web baseado em texto, é ótimo para ver como o site é experimentado por usuários com deficiência.
* **Um editor gráfico**, como o GIMP (em inglês), Paint.NET (em inglês), Photoshop, or XD , para fazer imagens ou gráficos para suas páginas.
* **Um sistema de controle de versão**, para gerenciar arquivos em servidores, colaborar em um projeto com uma equipe, compartilhar códigos e ativos, e evitar conflitos de edição. Atualmente, o Git (em inglês) é o sistema de controle de versão mais popular junto com o serviço de hospedagem GitHub (em inglês) ou GitLab (em inglês).
* **Um programa de FTP**, usado em contas de hospedagem web mais antigas para gerenciar arquivos em servidores (o Git está substituindo cada vez mais o FTP para esse propósito). Existem muitos programas de FTP disponíveis, incluindo o Cyberduck (em inglês), o Fetch (em inglês) e o FileZilla (em inglês).
* **Um sistema de automação**, como o Grunt (em inglês) ou o Gulp (em inglês), para realizar tarefas repetitivas automaticamente, como por exemplo minificar o código e executar testes.
* Templates, bibliotecas, frameworks, etc., para acelerar a funcionalidade da escrita.
* Além de mais ferramentas!
Quais ferramentas eu realmente preciso nesse momento?
-----------------------------------------------------

Isso parece uma lista assustadora, mas felizmente, você pode começar a desenvolver web sem saber nada sobre a maioria deles. Neste artigo, vamos apenas configurá-lo com um mínimo — um editor de texto e alguns navegadores modernos.

### Instalando um editor de texto

Você provavelmente já tem um editor de texto básico no seu computador. Por padrão, o Windows inclui o Bloco de Notas (em inglês) e o Mac OS vem com o TextEdit (em inglês). Linux varia; Ubuntu vem com o gedit (em inglês) por padrão.

Para desenvolvimento web, você provavelmente pode ter mais do que o Bloco de Notas ou o TextEdit. Recomendamos começar com o Visual Studio Code (em inglês), que é um editor gratuito, que oferece visualizações ao vivo e dicas de código.

### Instalando navegadores web modernos

Por enquanto, instalaremos alguns navegadores da Web para testar nosso código. Escolha seu sistema operacional abaixo e clique nos links relevantes para fazer o download dos instaladores dos seus navegadores favoritos:

* Linux: Firefox, Chrome, Opera, Brave.
* Windows: Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge, Brave (O Windows 10 vem com o Edge por padrão, se você tem o Windows 7 ou acima, você pode instalar o internet explorer 11; caso contrário, você deve instalar um navegador alternativo)
* Mac: Firefox, Chrome, Opera, Safari, Brave (Safari vem no iOS e macOS por padrão)

Antes de continuar, você deve instalar pelo menos dois desses navegadores e tê-los disponíveis para teste.

**Nota:** O Internet Explorer não é compatível com alguns recursos modernos da web e pode não ser capaz de executar seu projeto.

### Instalando um servidor web local

Alguns exemplos precisarão ser executados por um servidor web para funcionar com êxito. Você pode ver como fazer isso em Como eu configuro um servidor de teste localmente?

* Menu: Getting started with the web
* Próxima


Lidando com arquivos - Aprendendo desenvolvimento web

Lidando com arquivos
====================

* Anterior
* Menu: Getting started with the web
* Próxima

Um site consiste de muitos arquivos: conteúdo em texto, código, folhas de estilo, conteúdo em mídia e por aí vai. Ao criar um site, você precisa reunir esses arquivos em uma certa estrutura no computador local, certificar-se de que eles possam se comunicar e obter todo o conteúdo antes de enviá-los para o servidor. *Lidando com Arquivos* discute algumas questões às quais você deve estar ciente para que você possa configurar uma estrutura de arquivos para o seu site.

Onde seu site deve residir no seu computador?
---------------------------------------------

Quando você está trabalhando em um site localmente no seu próprio computador, você deve manter todos os arquivos relacionados em uma mesma pasta que reflete a estrutura dos arquivos do site publicado em um servidor. Essa pasta pode estar em qualquer lugar que você quiser, mas você deve colocá-la em algum lugar de fácil acesso, talvez no Desktop, na sua pasta Home, ou na raiz do seu HD.

1. Escolha um lugar para guardar seus projetos de site. Aqui, crie uma nova pasta chamada `projetos-web` (ou algo do tipo). Essa é a pasta onde todos seus projetos de site estarão.
2. Dentro dessa pasta, crie outra pasta para guardar seu primeiro site. Chame ela de `site-teste` (ou algo mais criativo).
Deixando de lado as maiúsculas e espaços
----------------------------------------

Você vai perceber no decorrer desse artigo que nós pedimos para que você nomeie pastas e arquivos completamente em letras minúsculas e sem espaços. Isso acontece porque:

1. Muitos computadores, particularmente servidores web, são case-sensitive. Então, por exemplo, se você colocar uma imagem no seu site em `site-teste/MyImage.jpg`, e então em um outro arquivo você tentar chamar `site-teste/myimage.jpg`, não vai funcionar.
2. Navegadores, servidores web e linguagens de programação não lidam bem com espaços. Por exemplo, se você usa espaços no nome do seu arquivo, alguns sistemas vão tratar o nome do arquivo como dois nomes. Alguns servidores vão substituir os espaços no nome do arquivo por "%20" (o código para espaço em URLs), quebrando seus links. É melhor separar palavras com traços, em vez de sublinhado: `meu-arquivo.html` vs. `meu_arquivo.html`.

A resposta curta é que você deve usar um hífen para os nomes dos arquivos. O mecanismo de pesquisa do Google trata um hífen como separador de palavras, mas não considera um sublinhado dessa maneira. Por esses motivos, é melhor criar o hábito de escrever sua pasta e nomes de arquivos em letras minúsculas, sem espaços e com palavras separadas por traços, pelo menos até você saber o que está fazendo. Dessa forma, você encontrará menos problemas no futuro.

Qual estrutura seu site deve ter?
---------------------------------

A seguir, vamos ver qual estrutura seu site teste deve ter. As coisas mais comuns que temos em qualquer projeto de site que criamos são um arquivo de índice HTML e pastas que contém imagens, arquivos de estilo e arquivos de scripts. Vamos criá-los agora:

1. **`index.html`**: Esse arquivo vai geralmente conter o conteúdo da sua página, ou seja, os textos e as imagens que as pessoas veem quando acessam seu site pela primeira vez. Usando seu editor de texto, crie um novo arquivo chamado `index.html` e salve dentro da sua pasta `site-teste`.
2. **pasta `imagens`**: Essa pasta vai conter todas as imagens que você vai usar no seu site. Crie uma pasta chamada `imagens`, dentro da sua pasta `site-teste`.
3. **pasta `estilos`**: Essa pasta vai conter os códigos CSS usados para dar estilo ao seu conteúdo (por exemplo, configurando a cor do texto e do fundo da página). Crie uma pasta chamada `estilos`, dentro da pasta `site-teste`.
4. **pasta `scripts`**: Essa pasta vai conter todos os códigos JavaScript usados para adicionar funcionalidades interativas para seu site (ex.: botões que carregam dados quando clicados). Crie uma pasta chamada `scripts`, dentro da sua pasta `site-teste`.

**Nota:** Em computadores com Windows, você deve ter problemas para ver os nomes dos arquivos, porque o Windows tem uma opção chamada **Ocultar as extensões dos tipos de arquivo conhecidos** ativada por padrão. Geralmente você pode desativar essa opção indo no Windows Explorer, selecionando a opção **Opções de pasta...**, desmarque a caixa de seleção **Ocultar as extensões dos tipos de arquivo conhecidos**, e clique em **OK**. Para mais informação sobre sua versão de Windows, procure na web.

Caminhos de arquivo
-------------------

Para fazer arquivos conversarem entre si, você tem que fornecer um caminho de arquivo entre eles — basicamente uma rota para que um arquivo saiba onde o outro está. Para demonstrar isso, nós vamos inserir um pouco de HTML no nosso arquivo `index.html`, e fazer mostrar a imagem que você escolheu no artigo "Como será o seu site?"

1. Copie a imagem que você escolheu antes para sua pasta `imagens`.
2. Abra seu arquivo `index.html` e insira o seguinte código exatamente como está escrito. Não se preocupe com o significado — nós vamos olhar com mais detalhes essa estrutura posteriormente.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Minha página de teste</title>
  </head>
  <body>
    <img src="" alt="Minha imagem de teste" />
  </body>
</html>
```

3. A linha `<img src="" alt="Minha imagem de teste">` é o código HTML que vai inserir uma imagem na página. Nós precisamos dizer ao HTML onde a imagem está. A imagem está dentro da pasta *imagens*, no mesmo diretório do `index.html`. Para trilhar o caminho de `index.html` para nossa imagem, o caminho é `imagens/nome-da-sua-imagem`. Por exemplo, nossa imagem é chamada `firefox-icon.png`, então, nosso caminho é `imagens/firefox-icon.png`.
4. Insira o caminho dentro do seu código HTML, dentro das aspas do código `src=""`.
5. Salve seu arquivo HTML, então carregue em seu navegador web (dê um duplo-clique no arquivo). Você deve ver sua nova página mostrando sua imagem!

![A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world](/pt-BR/docs/Learn/Getting_started_with_the_web/Dealing_with_files/website-screenshot.png)

Algumas regras gerais para caminhos de arquivo:

* Para linkar para um arquivo no mesmo diretório do arquivo HTML, apenas use o nome do arquivo, ex.: `my-image.jpg`.
* Para linkar um arquivo em um sub-diretório, escreva o nome do diretório na frente, mais uma barra, ex.: `subdirectory/my-image.jpg`.
* Para linkar um arquivo **acima** do arquivo HTML, use dois pontos. Então, por exemplo, se `index.html` estiver dentro de uma subpasta de `site-teste` e `my-image.png` estiver dentro de `site-teste`, você pode fazer referência a `my-image.png` em `index.html` usando `../my-image.png`.
* Você pode combinar isso como preferir, por exemplo `../subdiretorio/outro-subdiretorio/my-image.png`.

Por agora, isso é tudo o que precisamos saber.

**Nota:** O sistema de arquivos do Windows tende a usar barras invertidas, não barras normais , ex.: `C:\windows`. Isso não importa — mesmo se você estiver desenvolvendo seu site no Windows, você ainda deve usar barras normais no seu código.

O que mais deve ser feito?
--------------------------

Por agora, é isso. Sua pasta deve parecer algo do tipo:

![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](/pt-BR/docs/Learn/Getting_started_with_the_web/Dealing_with_files/file-structure.png)

* Anterior
* Menu: Getting started with the web
* Próxima