From 7827a1e488d3cb69a635c6930814753499d523e2 Mon Sep 17 00:00:00 2001 From: Piotr Laszewski Date: Sun, 8 Feb 2015 20:10:51 -0200 Subject: [PATCH 1/6] Portuguese: HTML lesson 1 revised. --- html/lesson1/tutorial.pt.md | 44 ++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/html/lesson1/tutorial.pt.md b/html/lesson1/tutorial.pt.md index d88ebab9..0991dcfd 100644 --- a/html/lesson1/tutorial.pt.md +++ b/html/lesson1/tutorial.pt.md @@ -7,7 +7,7 @@ title: HTML Aula 1 **HTML** é a linguagem usada para construir sites da internet. -Ele define a estrutura do site, ou seja, qualquer coisa relacionada ao conteúdo da página, como texto, imagens, vídeos. +Ele define a estrutura do site, ou seja, qualquer coisa relacionada ao conteúdo da página: texto, imagens, vídeos. ### O que significa HTML: @@ -15,7 +15,7 @@ Ele define a estrutura do site, ou seja, qualquer coisa relacionada ao conteúdo **H**yper **T**ext **M**arkup **L**anguage (Linguagem de marcação de hipertexto) -### O que forma um site de internet +### O que forma um site HTML: estrutura do site @@ -35,7 +35,7 @@ Vamos construir esta [página de exemplo](/html/lesson1/example.pt.html "Eu amo Um **elemento** é como um tijolo no HTML. Existem parágrafos, cabeçalhos, tabelas, links, listas e muitos outros. -**Tags** indicam a abertura e fechamento de um elemento. Elas frequentemente contém outros elementos e texto. +**Tags** indicam a abertura e fechamento de um elemento. Elas frequentemente contém outros elementos e textos. `conteúdo` @@ -62,7 +62,7 @@ Podemos usar um tipo especial de tag para adicionar anotações em nossas págin ### DOCTYPE e tags HTML O doctype é a primeira coisa que precisa ser definida numa página HTML. -Ele diz ao navegador qual a versão de HTML a página está usando. +Ele diz ao navegador qual a versão de HTML que a página está usando. ```html @@ -70,7 +70,7 @@ Ele diz ao navegador qual a versão de HTML a página está usando. Por enquanto nós vamos usar somente HTML, mas você pode descobrir mais sobre doctypes [aqui](http://www.w3.org/wiki/Doctypes_and_markup_styles). -O doctype vem sempre seguido pela tag ``, a qual já tem o conteúdo da página. +O doctype vem sempre seguido pela tag ``, a qual já contém o conteúdo da página. ```html @@ -80,7 +80,7 @@ O doctype vem sempre seguido pela tag ``, a qual já tem o conteúdo da p ### Tags de HEAD e BODY -Uma página HTML é dividida em duas partes. O **head** (Cabeçalho do documento) e **body** (Corpo do documento). +Uma página HTML é dividida em duas partes. O **head** (cabeçalho do documento) e **body** (corpo do documento). O **head** contém informações como título da página, folhas de estilo, escrita e meta-informação. @@ -89,7 +89,7 @@ O **body** contém o que é visível para o usuário. O conteúdo propriamente d ## Vamos começar! -Começaremos definindo a estrutura básica do nosso site. Crie uma pasta para seu trabalho chamada "HTML Aula 1". Depois, dentro desta pasta, crie um novo arquivo chamado "index.html". Isso é o que você deve escrever no arquivo: +Vamos definir a estrutura básica do nosso site. Crie uma pasta para seu trabalho chamada "HTML tutorial 1". Depois, dentro desta pasta, crie um novo arquivo chamado "index.html". Isso é o que você deve escrever no arquivo: ```html @@ -108,9 +108,9 @@ Começaremos definindo a estrutura básica do nosso site. Crie uma pasta para se > E na barra de título do navegador ou barra de abas? -### Elemento: Cabeçalho +### Elemento: Heading (título) -Cabeçalhos existem em diversos tamanhos +Títulos podem existir em diversos tamanhos # `

Cabeçalho

` ## `

Cabeçalho

` @@ -119,19 +119,19 @@ Cabeçalhos existem em diversos tamanhos ##### `
Cabeçalho
` ###### `
Cabeçalho
` -Acrescente um cabeçalho à sua página. Coloque-o dentro da tag "body" da página. Lembre-se, é lá que vai o conteúdo que o usuário vê. +Acrescente um título à sua página. Coloque-o dentro da tag "body" da página. Lembre-se, é lá que está o conteúdo que o usuário vê. ```html

Corujas!

``` -> Você lembrou de adicionar o cabeçalho à estrutura? +> Você lembrou de adicionar o título à estrutura? > Não esqueça de salvar as alterações antes de atualizar o navegador! ### Aninhando elementos -Elementos podem ser aninhados um dentro do outro. Por exemplo, se você colocar o `

` dentro das tags de corpo de página você está posicionando um cabeçalho dentro do `` de uma página. +Elementos podem ser aninhados um dentro do outro. Por exemplo, se você colocar o `

` dentro das body tags da página, você está posicionando um título dentro do `` de uma página. > Você deve sempre fechar qualquer elemento que você abrir. Abriu um elemento, feche no final! @@ -139,7 +139,7 @@ Elementos podem ser aninhados um dentro do outro. Por exemplo, se você colocar Adicionar conteúdo ao `

` faz com que o texto tenha uma estrutura de parágrafo. Isso ajuda para que o conteúdo da página fique mais fácil para leitura. -Acrescente o seguinte no corpo da página, depois do cabeçalho `

`: +Acrescente o seguinte no body da página, depois do heading `

`: ```html

@@ -195,7 +195,7 @@ Div significa _divisão_. Ele cria seções num documento HTML. O div não afeta Podemos usar um div para limitar o nosso parágrafo. -Cerque o parágrafo já existente por um div e adicione um novo cabeçalho a ele: +Cerque o parágrafo já existente por um div e adicione um novo heading a ele: ```html

@@ -217,7 +217,7 @@ Cerque o parágrafo já existente por um div e adicione um novo cabeçalho a ele Existem dois tipos de listas, **ordenada** e **desordenada**. Uma lista desordenada `
    ` é definida por pontos enquanto a lista ordenada `
      ` usa uma sequência. -Vamos listar as razões que nós fazem gostar tanto de corujas abaixo do cabeçalho principal da página (o elemento `

      ` que adicionamos mais cedo) +Vamos listar as razões que nós fazem gostar tanto de corujas abaixo do heading principal da página (o elemento `

      ` que adicionamos mais cedo) ```html

      Porque nós gostamos tanto de corujas?

      @@ -252,7 +252,7 @@ Imagens são principalmente formadas por três atributos * o atributo `src`, o qual deixa a página saber qual imagem queremos que seja vista * o atributo `alt`, onde nós descrevemos nossa imagem para as pessoas que não conseguem ver a mesma -Antes do principal cabeçalho da página, adicione o seguinte +Antes do heading principal da página, adicione o seguinte ```html
      @@ -260,14 +260,14 @@ Antes do principal cabeçalho da página, adicione o seguinte
      ``` -> Lembre-se: a seção `` não é o mesmo que cabeçalho! Certifique-se de que sua nova `
      ` está no corpo da página. +> Lembre-se: a seção `` (cabeçalho) não é o mesmo que heading (título)! Certifique-se de que sua nova `
      ` está no body página. > Você consegue ver o logo do codebar? O que acontece quando você muda de logo para logo1? > Se você não consegue ver sua imagem, certifique-se de ter colocado as imagens na pasta `images`. Vamos adicionar mais imagens. Dessa vez nós vamos colocá-las em uma lista. -Faça isso abaixo do cabeçalho `

      Porque nós gostamos tanto de corujas?

      `. +Faça isso abaixo do heading `

      Porque nós gostamos tanto de corujas?

      `. ```html
        @@ -283,7 +283,7 @@ Portanto, a lista pode conter não somente texto, mas outros elementos também. Links podem conter vários elementos - não somente texto. -Vamos usar algumas imagens e texto para conectar a um video. Isso pode ajudar quando queremos que o usuário chegue onde desejamos sem que ele tenha que clicar num texto. +Vamos usar algumas imagens e texto para conectar a um vídeo. Isso pode ajudar quando queremos que o usuário chegue onde desejamos sem que ele tenha que clicar num texto. Adicione este texto abaixo da lista ordenada sobre porque gostamos de corujas. @@ -327,7 +327,7 @@ E um pequeno poema para a sua página, cercada por citações usando unidades HT **small** é um outro elemento de formatação que você pode usar. -> Você notou como o caracter `—` renderiza na sua página? +> Você notou como o caracter `—` aparece na sua página? ### Link de envio de email (mailto link) `` @@ -352,12 +352,12 @@ A diferença entre os links e link de envio de email (mailto link) é o conteúd > O que acontece quando você adiciona &body=Corujas são demais ao segundo link? -## Bonus +## Bônus Coloque um link para compartilhar no twitter junto com outros links de compartilhamento. ```html -Compartilhe seu amor por corujas no twitte +Compartilhe seu amor por corujas no twitter ``` --- From 2ff5045bde3814f28568b0eded8929fa7a7bd9b5 Mon Sep 17 00:00:00 2001 From: Piotr Laszewski Date: Sun, 8 Feb 2015 20:19:47 -0200 Subject: [PATCH 2/6] Portuguese: HTML lesson 2 - added tutorial files --- html/lesson2/example.pt.html | 64 +++++ html/lesson2/tutorial.pt.md | 459 +++++++++++++++++++++++++++++++++++ 2 files changed, 523 insertions(+) create mode 100644 html/lesson2/example.pt.html create mode 100644 html/lesson2/tutorial.pt.md diff --git a/html/lesson2/example.pt.html b/html/lesson2/example.pt.html new file mode 100644 index 00000000..aa171d8c --- /dev/null +++ b/html/lesson2/example.pt.html @@ -0,0 +1,64 @@ + + + + I love owls + + + +
        +
        + +

        Owls...

        +

        Why do I like owls so much?

        +
          +
          • +
          • +
          • +
        +
          +
        1. they are adorable
          2. +
        2. and lovely
          3. +
        3. and cuddly
          4. +
        +
        +
        + Watch this video here +
        +

        + "A wise old owl sat on an oak; The more he saw the less he spoke;
        + The less he spoke the more he heard; Why aren't we like that wise old bird?" +         +

        +

        - nursery rhyme

        +
        +
        +
        +

        Owls:

        +

        + Most birds of prey sport eyes on the sides of their heads,
        + but the stereoscopic nature of
        + the owl's forward-facing eyes permits the greater
        + sense of depth perception         necessary for low-light hunting.
        +
        + More information about owls... +

        +
        + +
        +
        + +
        +
        +
        + + diff --git a/html/lesson2/tutorial.pt.md b/html/lesson2/tutorial.pt.md new file mode 100644 index 00000000..aa4dd777 --- /dev/null +++ b/html/lesson2/tutorial.pt.md @@ -0,0 +1,459 @@ +--- +layout: page +title: HTML Lesson 2 +footer: true +--- + +## What is CSS? + +**CSS** is the language used to style websites. + +It defines the visual representation of the content. For example colour, margins, borders, backgrounds, position in the page. + +### What does it stand for? + + **C**ascading **S**tyle **S**heets. + +### What makes a website + +HTML: structure of a website + +CSS: presentation + +_**CSS** works in conjunction with **HTML**_ + +### Today we will be focusing on fundamental CSS concepts + +We will be styling [this page](https://github.com/codebar/tutorials/blob/master/html/lesson2/example.html) so that it looks [like this example](http://codebar.github.io/tutorials/html/lesson2/example.html). + +## But before we start... + +> The first tutorial does not prepare you for this exercise. Before you continue, download the provided files. + + +### Required files + +Download the files required to begin working through the tutorial from [here](https://gist.github.com/hundred/7332441/download)(mac/linux) or [here](https://www.dropbox.com/s/zgb6l56sy87knzf/lesson2.zip)(windows) + +### What can I do with CSS? + +You can change the color, position, dimensions and presentation of different elements + +### Anatomy of a CSS element + +```css +body { + color: hotpink; +} +``` + +**body** selector + +**color** property + +**hotpink** value + +```css +selector { + property: value; +} +``` + +A group of properties for the given selector is defined within the curly braces + +```css +body { + color: hotpink; + font-size: 12px; +} +``` + +## Getting started + +In the head of the html page define a style tag + +```html + + I love owls + + +``` + +Include the styling described below, within the style tag we defined. + +## Introductions to selectors + +### Selectors + +#### Selector: element + +Let's set the font that we want our page to use + +```css +body { + font-family: Helvetica, Arial, sans-serif; +} +``` + +As we have selected the **body** element, this change will apply to everything nested within it, the entire contents of our page. + +Let's also remove the bullet from the lists that we have defined + +```css +ul { + list-style: none; +} +``` + +and change the appearance of the links on our page + +```css +a { + color: #a369d5; + text-decoration: none; + border-bottom: 1px dotted #a369d5; +} +``` +**color** defines the color of the text. `#a369d5` is the representation of the color in hex. +A useful resource for figuring out color codes is [http://0to255.com](http://0to255.com). + +**text-decoration** specifies the decoration applied to the text. Some other options you can try out are _underline_, _overline_ and _line-through_. As links by default have an underline text decoration applied to them, by setting this to none, we reset that property. + +**border-bottom** makes the text appear underlined. Border properties can be merged into one line + +`border-bottom: thickness border-style color` + +**1px** defines the thickness of the border + +**dotted** the style of the line + +**#a369d5** the color of the border + +#### Selector: class + +A class selector selects all elements that use the specified class. + +```css +.pictures { + margin: 10px auto; + width: 900px; +} +``` + +**margin** is the area surrounding an element. The above definition is a _shorthand_ version of + +```css +margin-top: 10px; +margin-bottom: 10px; +margin-right: auto; +margin-left: auto; +``` + +What we defined above is +_margin: (top bottom) (left right)_ + +> You can see the margin of an element by inspecting it and having a look at the computed tab + +#### Selector: id + +Selects the element with the id logo. + +```css +#logo { + margin: 0 auto 30px; + width: 200px; +} +``` + +> There can only be one element with a particular id. If you define multiple elements, only the first one will be selected. + +#### Selector: nested elements + +Selects all list elements that are nested within a **class** pictures + +```css +.pictures li { + display: inline; + margin: 3px; +} +``` + +**display** specifies how the elements are displayed. **li** is a block element. By changing its display property, we make sure that it displays as an inline element. + +> Change inline to inline-block, and to block. Can you notice the difference? + +## Ways of connecting CSS to HTML + +### Embedded CSS + +At the beginning of the tutorial we described how to connect the CSS to our page. + +```html + + I love owls + + +``` + +This method of using CSS, by defining it within our HTML page is called **embedded**. The problem with this, is that it cannot be reused across other pages and it also makes it a bit harder to work. + + +### Linked CSS + +A better way to define CSS, is to include it within a separate stylesheet. This is easier to maintain and can be reused across several pages. + +To achieve this, let's move our CSS outside of the head of the page and into a new file that we will link through the head. + +```html + + I love owls + + +``` + +## Cascading + +Stylesheets _cascade_ to all elements until they are changed. + +First let's reset the margin and border of all the images. + +```css +img { + margin: 0; + border: 0; +} +``` + +We can change the styling of some of these images by defining a more specific selector. This will supersede the `img` selector we just defined + +```css +.bigimg img { + margin: 15px 2px; + width: 439px; + border: 2px solid #b9b1bf; +} +``` + +## CSS Properties + +So far we have explained some selectors and presented others with more self explanatory names. Knowing every selector, is not an easy task, but don't let this put you off. The internet is your friend. [Here you can find a list of all CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference) + + +## Styling our page further + +### line-height + +Let's extend the body selector so that our page looks a bit less cramped + +```css +body { + font-family: Helvetica, Arial, sans-serif; + line-height: 1.3; +} +``` + +### Centering the content of our page + +In the HTML page you will notice a div element with the id **main**. Let's use this selector to center that container + +```css +#main { + width: 900px; + margin: 0 auto 40px; + padding: 0; +} +``` +To achieve centering of a container, we must define its width. If you remove the width property you will notice that it won't be in the center of the page. + +We have also used another type of _shorthand_ to define the margin. The long version looks like this + +```css +margin-top: 0; +margin-bottom: 40px; +margin-right: auto; +margin-left: auto; +``` + +**auto** adjusts the left and right margins. If you try making the window of your browser smaller, you can see that the left and right sides adjust automatically, so that **main** remains in the middle of the page. + +**padding** is the area around an element but within its border. + +> Don't confuse padding with margin, have a look using an inspector to see how the padding and margin of an element differ. + + +### Floating elements + +```css +.right-box { + float: right; +} +``` + +### Using empty elements for styling + +Sometimes to make the design of our page look nicer, we might add empty elements. Like `
        ` + +```css +#top-line { + width: 100%; + height: 5px; + background-color: #2d183d; + border-bottom: 3px solid #eedffb; + margin-bottom: 10px; +} +``` + +Let's also style the bottom of our page in a similar way + +```css +#bottom-line { + width: 100%; + height: 5px; + background-color: #2d183d; + border-top: 3px solid #eedffb; +} +``` + +### Restyling through element selectors + +When we want to ensure that an element's appearance changes consistently through our pages, it's better to use element selectors. That way we can make sure that we don't need to redefine the style and that it applies to all elements of that type. + +```css +h1 { + font-size: 39px; + color: #2d183d; + text-align: center; + border-bottom: 1px solid #f6f4f8; + border-top: 1px solid #f6f4f8; + padding: 20px 0; +} + +h2 { + font-size: 28px; + margin: 15px 0; + color: #663095; + padding: 15px 0; + font-weight: 400; + text-align: center; +} + +h4 { + color: #6D6A6A; + font-size: 19px; + padding: 27px 25px 15px; +} + +small { + color: #6D6A6A; + font-size: 15px; + margin: 0 30px 10px; + text-align: right; +} + +ol { + margin: 14px 0; +} + +ol li { + background-color: #F6F4F8; + color: #663095; + font-size: 16px; + font-weight: 400; + margin: 10px 30px 10px 40px; + padding: 6px 20px; + border-radius: 9px; +} +``` + +**font-weight** thickness of displayed text + +**text-align** horizontal alignment of a text element + +### A bit more styling + +```css +#the-quote{ + border-bottom: 1px solid #f6f4f8; + border-top: 1px solid #f6f4f8; + margin: 40px auto; + width: 90%; +} + +#links { + margin: 10px 15px 0 0; +} + +#links li { + margin: 0 7px; + font-size: 18px; + display: inline; +} + +#text-block { + height: 370px; +} + +``` + +### More cascading selectors + +```css +.pictures li img { + border: 2px solid #b9b1bf; +} + +.bigimg img { + margin: 15px 2px; + width: 439px; + border: 2px solid #b9b1bf; +} +``` + +### Some extra touches + +```css +.bigimg{ + display: inline; +} +``` + +## Advanced and bonus material + +### Pseudo classes + +A psedo class is a keyword added to a selector that specifies a special state of the element to be selected. [These](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) are the standard pseudo classes. + +Let's add the code below to make sure we only apply a margin to the _first li element_ within the pictures class. + +```css +.pictures li:first-child { + margin-left: 5px; +} +``` + +> What happens when you remove _:first-child_ from your selector? + + +### Bonus - Resetting styles + +You've probably noticed that pages look quite different when loading them in different browsers. To try and avoid these browser inconsistencies a common technique is **CSS resetting** + +Let's apply this to the elements used within our page + +```css +html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, small, b, i, ol, ul, li { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} +``` + +----- + +This ends our second lesson. Is there something you don't understand? Try and go through the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:feedback@codebar.io) and let us know. From 86983d411b6b421787fe306a64551abd28881819 Mon Sep 17 00:00:00 2001 From: Piotr Laszewski Date: Sun, 8 Feb 2015 20:26:15 -0200 Subject: [PATCH 3/6] HTML lesson 2 translated to Portuguese --- html/lesson2/example.pt.html | 39 +++---- html/lesson2/tutorial.pt.md | 203 +++++++++++++++++------------------ 2 files changed, 121 insertions(+), 121 deletions(-) diff --git a/html/lesson2/example.pt.html b/html/lesson2/example.pt.html index aa171d8c..7c7d2e30 100644 --- a/html/lesson2/example.pt.html +++ b/html/lesson2/example.pt.html @@ -1,57 +1,58 @@ - I love owls + + Eu amo corujas
        -

        Owls...

        -

        Why do I like owls so much?

        +

        Corujas...

        +

        Porque eu gosto tanto de corujas?

          -
        1. they are adorable
          2. -
        2. and lovely
          3. -
        3. and cuddly
          4. +
        4. elas são adoráveis
          5. +
        5. e amáveis
          6. +
        6. e apertáveis
        - Watch this video here + Assista o vídeo

        - "A wise old owl sat on an oak; The more he saw the less he spoke;
        - The less he spoke the more he heard; Why aren't we like that wise old bird?" + "Uma coruja sábia e anciã pousou em um carvalho; Quanto mais observava, menos falava;
        + Quanto menos falava, mais ouvia; Por que não somos como a coruja sábia e anciã?"

        -

        - nursery rhyme

        +

        - poema infantil

        -

        Owls:

        +

        Corujas:

        - Most birds of prey sport eyes on the sides of their heads,
        - but the stereoscopic nature of
        - the owl's forward-facing eyes permits the greater
        - sense of depth perception         necessary for low-light hunting.
        + A maioria das aves de rapina possui os olhos na parte lateral da cabeça
        + mas a natureza estereoscópica dos
        + olhos voltados para frente na coruja permite
        + um melhor senso de percepção profunda         necessária para a caça com pouca luz.

        - More information about owls... + Mais informações sobre corujas...

        diff --git a/html/lesson2/tutorial.pt.md b/html/lesson2/tutorial.pt.md index aa4dd777..b223fd7f 100644 --- a/html/lesson2/tutorial.pt.md +++ b/html/lesson2/tutorial.pt.md @@ -1,45 +1,45 @@ --- layout: page -title: HTML Lesson 2 +title: HTML Aula 2 footer: true --- -## What is CSS? +## O que é CSS? -**CSS** is the language used to style websites. +**CSS** é a linguagem usada para criar o estilo dos sites. -It defines the visual representation of the content. For example colour, margins, borders, backgrounds, position in the page. +Ela define a representação visual do conteúdo. Por exemplo: cor, margens, bordas, fundo e posição na página. -### What does it stand for? +### O que isso significa? - **C**ascading **S**tyle **S**heets. + Folha de estilo em cascata (**C**ascading **S**tyle **S**heets). -### What makes a website +### Do que consiste um site -HTML: structure of a website +HTML: estrutura do site -CSS: presentation +CSS: apresentação -_**CSS** works in conjunction with **HTML**_ +_O **CSS** funciona em conjunto com o **HTML**_ -### Today we will be focusing on fundamental CSS concepts +### Hoje vamos concentrar nos conceitos fundamentais do CSS -We will be styling [this page](https://github.com/codebar/tutorials/blob/master/html/lesson2/example.html) so that it looks [like this example](http://codebar.github.io/tutorials/html/lesson2/example.html). +Nós vamos criar a aparência [desta página](https://github.com/codebar/tutorials/blob/master/html/lesson2/example.html) para que fique igual [a este exemplo](http://codebar.github.io/tutorials/html/lesson2/example.html). -## But before we start... +## Mas antes de começar... -> The first tutorial does not prepare you for this exercise. Before you continue, download the provided files. +> O primeiro tutorial não te prepara para este exercício. Antes de continuar, baixe os seguintes arquivos. -### Required files +### Arquivos necessários -Download the files required to begin working through the tutorial from [here](https://gist.github.com/hundred/7332441/download)(mac/linux) or [here](https://www.dropbox.com/s/zgb6l56sy87knzf/lesson2.zip)(windows) +Faça o download dos arquivos necessários para dar andamento ao tutorial por [aqui](https://gist.github.com/hundred/7332441/download) (mac/linux) ou [aqui](https://www.dropbox.com/s/zgb6l56sy87knzf/lesson2.zip) (windows) -### What can I do with CSS? +### O que posso fazer com o CSS? -You can change the color, position, dimensions and presentation of different elements +Você pode mudar a cor, posição, dimensões e apresentações de diversos elementos. -### Anatomy of a CSS element +### Anatomia de um elemento CSS ```css body { @@ -47,19 +47,19 @@ body { } ``` -**body** selector +**body** seletor -**color** property +**color** propriedade -**hotpink** value +**hotpink** valor ```css -selector { - property: value; +seletor { + propriedade: valor; } ``` -A group of properties for the given selector is defined within the curly braces +Um grupo de propriedades para determinado seletor é definido entre chaves `{ }` ```css body { @@ -68,28 +68,28 @@ body { } ``` -## Getting started +## Começando -In the head of the html page define a style tag +No head tag da página html, defina uma style tag (tag de estilo). ```html - I love owls + Eu amo corujas ``` -Include the styling described below, within the style tag we defined. +Inclua o estilo descrito abaixo, junto com a tag de estilo que definimos. -## Introductions to selectors +## Introdução aos seletores -### Selectors +### Seletores -#### Selector: element +#### Seletor: elemento -Let's set the font that we want our page to use +Vamos escolher a fonte que queremos usar na nossa página ```css body { @@ -97,9 +97,9 @@ body { } ``` -As we have selected the **body** element, this change will apply to everything nested within it, the entire contents of our page. +Já que selecionamos o elemento **body**, essa alteração será aplicada para tudo o que está aninhado a esta estrutura, ou seja, todos os conteúdos da nossa página. -Let's also remove the bullet from the lists that we have defined +Vamos retirar também os tópicos das listas que já definimos. ```css ul { @@ -107,7 +107,7 @@ ul { } ``` -and change the appearance of the links on our page +e mudar a aparência dos links na nossa página ```css a { @@ -116,24 +116,23 @@ a { border-bottom: 1px dotted #a369d5; } ``` -**color** defines the color of the text. `#a369d5` is the representation of the color in hex. -A useful resource for figuring out color codes is [http://0to255.com](http://0to255.com). +**color** (cor) define as cores do texto. `#a369d5` é a representação da cor em formato hexadecimal. Uma fonte útil para descobrir os códigos das cores é [http://0to255.com](http://0to255.com). -**text-decoration** specifies the decoration applied to the text. Some other options you can try out are _underline_, _overline_ and _line-through_. As links by default have an underline text decoration applied to them, by setting this to none, we reset that property. +**text-decoration** (decoração do texto) especifica a decoração aplicada ao texto. Algumas outras opções que você pode experimentar são _underline_ (sublinhado), _overline_ (sobrelinhado) e _line-through_ (linha que corta o escrito). Como os links tem o sublinhado aplicado a eles como padrão, se estipularmos none (nenhum) ao link, cancelamos esta propriedade. -**border-bottom** makes the text appear underlined. Border properties can be merged into one line +**border-bottom** (base da borda) faz o texto aparecer sublinhado. Propriedades de bordas podem ser fundidas em uma linha -`border-bottom: thickness border-style color` +`border-bottom: thickness border-style color` (base da borda: espessura estilo da borda cor) -**1px** defines the thickness of the border +**1px** define a espessura da borda -**dotted** the style of the line +**dotted** (pontilhado) o estilo da linha -**#a369d5** the color of the border +**#a369d5** a cor da borda -#### Selector: class +#### Seletor: classe -A class selector selects all elements that use the specified class. +Um seletor de classes seleciona todos os elementos usados pela classe especificada. ```css .pictures { @@ -142,7 +141,7 @@ A class selector selects all elements that use the specified class. } ``` -**margin** is the area surrounding an element. The above definition is a _shorthand_ version of +**margin** (margem) é a área que rodeia um elemento. A definição acima é uma versão _abreviada_ de ```css margin-top: 10px; @@ -151,14 +150,14 @@ margin-right: auto; margin-left: auto; ``` -What we defined above is -_margin: (top bottom) (left right)_ +O que definimos acima é +_margin: (top bottom) (right left)_ margem: (superior inferior) (direita esquerda) -> You can see the margin of an element by inspecting it and having a look at the computed tab +> Você consegue ver a margem de um elemento conferindo a guia de inspeção -#### Selector: id +#### Seletor: id -Selects the element with the id logo. +Seleciona o elemento com a identidade ou logotipo. ```css #logo { @@ -167,11 +166,11 @@ Selects the element with the id logo. } ``` -> There can only be one element with a particular id. If you define multiple elements, only the first one will be selected. +> Só pode existir um único elemento com determinada identidade. Se você definir múltiplos elementos, somente um poderá ser selecionado. -#### Selector: nested elements +#### Seletor: elementos aninhados -Selects all list elements that are nested within a **class** pictures +Seleciona todos os elementos de lista que estão aninhados dentro de uma **classe** de imagem (pictures). ```css .pictures li { @@ -180,46 +179,46 @@ Selects all list elements that are nested within a **class** pictures } ``` -**display** specifies how the elements are displayed. **li** is a block element. By changing its display property, we make sure that it displays as an inline element. +**display** (exibição) especifica como os elementos são expostos. **li** é um elemento de bloco. Mudando esta propriedade de exibição, nos certificamos que a exibição será como um elemento inline. -> Change inline to inline-block, and to block. Can you notice the difference? +> Modifique inline para bloco-inline e para bloco. Você consegue notar a diferença? -## Ways of connecting CSS to HTML +## Formas de unir o CSS ao HTML -### Embedded CSS +### CSS incorporado -At the beginning of the tutorial we described how to connect the CSS to our page. +No começo do tutorial nós descrevemos como juntar o CSS à nossa página. ```html - I love owls + Eu amo corujas ``` -This method of using CSS, by defining it within our HTML page is called **embedded**. The problem with this, is that it cannot be reused across other pages and it also makes it a bit harder to work. +Este método de usar o CSS, definindo-o dentro de nossa página HTML, é chamado **incorporar**. O problema deste mecanismo é que ele não pode ser reutilizado nas outras páginas, o que torna o trabalho um pouco mais difícil. -### Linked CSS +### CSS externa -A better way to define CSS, is to include it within a separate stylesheet. This is easier to maintain and can be reused across several pages. +Uma boa forma para definir o CSS é incluí-lo dentro de uma folha de estilo separada. Assim é mais fácil mantê-lo e reutilizá-lo por várias páginas. -To achieve this, let's move our CSS outside of the head of the page and into a new file that we will link through the head. +Para completar esta tarefa vamos mover nosso CSS para fora do head da página e criar um novo arquivo, que será conectado a página pelo head. ```html - I love owls + Eu amo corujas ``` -## Cascading +## Efeito cascata -Stylesheets _cascade_ to all elements until they are changed. +Vamos usar o efeito _cascata_ para todos os elementos da folha de estilo, até obter alterações. -First let's reset the margin and border of all the images. +Primeiro vamos redefinir a margin e border de todas as imagens. ```css img { @@ -228,7 +227,7 @@ img { } ``` -We can change the styling of some of these images by defining a more specific selector. This will supersede the `img` selector we just defined +Nós podemos mudar o estilo de algumas destas imagens estabelecendo um seletor mais específico. Isto vai substituir o seletor `img` que nós acabamos de definir. ```css .bigimg img { @@ -238,16 +237,16 @@ We can change the styling of some of these images by defining a more specific se } ``` -## CSS Properties +## Propriedades CSS -So far we have explained some selectors and presented others with more self explanatory names. Knowing every selector, is not an easy task, but don't let this put you off. The internet is your friend. [Here you can find a list of all CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference) +Até agora explicamos alguns seletores. Sabemos que conhecer cada seletor não é uma tarefa fácil, mas não deixe que isso te desanime. A internet é sua amiga. [Veja aqui uma lista com todas as propriedades CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference) -## Styling our page further +## Avançando na forma de estilo da nossa página -### line-height +### line-height (altura da linha) -Let's extend the body selector so that our page looks a bit less cramped +Vamos aumentar o seletor de body para que a nossa página tenha um aspecto menos aglomerado. ```css body { @@ -256,9 +255,9 @@ body { } ``` -### Centering the content of our page +### Centralizando o conteúdo da nossa página -In the HTML page you will notice a div element with the id **main**. Let's use this selector to center that container +Numa página HTML você notará um elemento div com a identificação **main** (principal). Vamos usar este seletor para centralizar aquele recipiente. ```css #main { @@ -267,9 +266,9 @@ In the HTML page you will notice a div element with the id **main**. Let's use t padding: 0; } ``` -To achieve centering of a container, we must define its width. If you remove the width property you will notice that it won't be in the center of the page. +Para obter a centralização de um recipiente, temos que definir a sua largura. Se você remover a propriedade de largura vai perceber que o recipiente não estará centralizado na página. -We have also used another type of _shorthand_ to define the margin. The long version looks like this +Nós também temos que usar outro tipo de _abreviação_ para definir a margem. A versão longa se parece com isso ```css margin-top: 0; @@ -278,14 +277,14 @@ margin-right: auto; margin-left: auto; ``` -**auto** adjusts the left and right margins. If you try making the window of your browser smaller, you can see that the left and right sides adjust automatically, so that **main** remains in the middle of the page. +**auto** ajusta as margens esquerda e direita. Se você tentar diminuir a janela de seu navegador, pode ver que os lados esquerdo e direito se ajustam automaticamente e o **main** continua no meio da página. -**padding** is the area around an element but within its border. +**padding** (enchimento) é a área em volta do elemento, mas dentro da border. -> Don't confuse padding with margin, have a look using an inspector to see how the padding and margin of an element differ. +> Não confunda padding (enchimento) com margin (margem), faça um teste para ver como padding e margin de um elemento se diferem. -### Floating elements +### Elementos flutuantes ```css .right-box { @@ -293,9 +292,9 @@ margin-left: auto; } ``` -### Using empty elements for styling +### Usando elementos vazios para criar o estilo -Sometimes to make the design of our page look nicer, we might add empty elements. Like `
        ` +Algumas vezes, para fazer com que o design de uma página pareça melhor, precisamos adicionar elementos vazios. Como `
        ` ```css #top-line { @@ -307,7 +306,7 @@ Sometimes to make the design of our page look nicer, we might add empty elements } ``` -Let's also style the bottom of our page in a similar way +Vamos criar também um estilo na parte inferior de nossa página de uma forma muito parecida. ```css #bottom-line { @@ -318,9 +317,9 @@ Let's also style the bottom of our page in a similar way } ``` -### Restyling through element selectors +### Reestilização por elementos seletores -When we want to ensure that an element's appearance changes consistently through our pages, it's better to use element selectors. That way we can make sure that we don't need to redefine the style and that it applies to all elements of that type. +Quando queremos assegurar que a aparência de um elemento mude consistentemente nas nossas páginas, é melhor utilizar elementos seletores. Dessa forma podemos ter certeza que não precisaremos redefinir o estilo e que isso se aplicará a todos os elementos daquele tipo. ```css h1 { @@ -369,11 +368,11 @@ ol li { } ``` -**font-weight** thickness of displayed text +**font-weight** (peso da fonte) espessura do texto apresentado -**text-align** horizontal alignment of a text element +**text-align** (alinhamento de texto) alinhamento horizontal de um elemento de texto -### A bit more styling +### Um pouco mais de estilo ```css #the-quote{ @@ -399,7 +398,7 @@ ol li { ``` -### More cascading selectors +### Mais seletores de cascata ```css .pictures li img { @@ -413,7 +412,7 @@ ol li { } ``` -### Some extra touches +### Alguns toques extras ```css .bigimg{ @@ -421,13 +420,13 @@ ol li { } ``` -## Advanced and bonus material +## Material extra e avançado -### Pseudo classes +### Pseudo-classes -A psedo class is a keyword added to a selector that specifies a special state of the element to be selected. [These](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) are the standard pseudo classes. +Uma pseudo-classe é uma palavra-chave adicionada a um seletor que descreve um estado específico de um elemento a ser selecionado. [Estas](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) são as pseudo-classes padrões. -Let's add the code below to make sure we only apply a margin to the _first li element_ within the pictures class. +Vamos adicionar o código abaixo para ter certeza que aplicaremos a margin somente para o _primeiro elemento li_ dentro da classe de imagens. ```css .pictures li:first-child { @@ -435,14 +434,14 @@ Let's add the code below to make sure we only apply a margin to the _first li el } ``` -> What happens when you remove _:first-child_ from your selector? +> O que acontece quando você retira _:first-child_ do seu seletor? -### Bonus - Resetting styles +### Bônus - Reiniciando estilos -You've probably noticed that pages look quite different when loading them in different browsers. To try and avoid these browser inconsistencies a common technique is **CSS resetting** +Você provavelmente notou que as páginas parecem bem diferentes quando carregadas em navegadores diferentes. Para experimentar e evitar estas inconsistências de navegadores, uma técnica comum é **Reiniciar CSS** -Let's apply this to the elements used within our page +Vamos aplicar isso ao elemento usado em nossa página ```css html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, small, b, i, ol, ul, li { @@ -456,4 +455,4 @@ html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, small, b, i, ol, ul, li { ----- -This ends our second lesson. Is there something you don't understand? Try and go through the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:feedback@codebar.io) and let us know. +Terminamos a nossa segunda aula. Tem alguma coisa que você não entendeu? Tente novamente e utilize os recursos fornecidos junto com o seu tutor. Se você tem algum feedback ou idéias que possam melhorar o nosso tutorial, nos [mande um email](mailto:feedback@codebar.io). From 84e4f1eae64904918d5bf532acfa768df5c60a4b Mon Sep 17 00:00:00 2001 From: Piotr Laszewski Date: Wed, 11 Feb 2015 20:38:17 -0200 Subject: [PATCH 4/6] HTML Lesson 3: added base for Portuguese translation. --- html/lesson3/example.pt.html | 60 ++++ html/lesson3/tutorial.pt.md | 586 +++++++++++++++++++++++++++++++++++ 2 files changed, 646 insertions(+) create mode 100644 html/lesson3/example.pt.html create mode 100644 html/lesson3/tutorial.pt.md diff --git a/html/lesson3/example.pt.html b/html/lesson3/example.pt.html new file mode 100644 index 00000000..dec0da14 --- /dev/null +++ b/html/lesson3/example.pt.html @@ -0,0 +1,60 @@ + + + + Ada Lovelace + + + +
        +
        + +
        +
        +

        Hi, I'm Ada Lovelace

        +
        +
        + +
        +
        + Me on the internet + +
        +
        +

        My name is August Ada King. I'm the Countess of Lovelace.

        + +

        I am a mathematician and a writer. People know me from my work on Charle's Babbage's early mechanical general-purpose computer, the Analytical engine. I wrote the first algorithm intended to be processed by a machine. In other words, I am the world's first programmer.

        + +

        My mother, Anne Isabella Byron, was a great help to me as she helped me by promoting my interest in mathematics and logic, but I also never forgot about my dad, who moved to Greece when I was just an infant to help out in the civil war.

        + +
        “I do not believe that my father was such a poet as I shall be an Analyst; for with me the two go together indissolubly.”
        + +

        Throughout my life, mathematics have been my primary interest. I always question even basic assumptions by integrating poetry, another great love of mine, and science. I also have a keen interest in scientific developments and trends of my era like phrenology and mesmerism.

        + +

        + Charles Babbage wrote the following poem of me +
        + + Forget this world and all its troubles and if
        + possible its multitudinous Charlatans-every thing
        + in short but the Enchantress of Numbers. +         +

        + +

        The computer language Ada, was named after me. The Defense Military standard for the language, MIL-STD-1815 was also given the year of my birth.

        + +

        These days, the British Computer Society runs an annual competitions for women students of computer science in my name. Also, the annual conference for women undergraduates is named after me. Google also dedicated its Google doodle to me, on the 197th anniversary of my birth.

        + +

        + +

        +
        +
        + + + + diff --git a/html/lesson3/tutorial.pt.md b/html/lesson3/tutorial.pt.md new file mode 100644 index 00000000..ee574a12 --- /dev/null +++ b/html/lesson3/tutorial.pt.md @@ -0,0 +1,586 @@ +--- +layout: page +title: HTML Lesson 3 +footer: true +--- + +## HTML AND CSS - Beyond the basics + +### Recap + +In the previous two lessons, we spoke about **H**yper **T**ext **M**arkup **L**anguage and **C**ascading **S**tyle **S**heets. **HTML** defines the _structure_ of a website and **CSS** the _presentation_. + +### Today we will be building a styled website from scratch + +The page we will be building will look similar to this [example page](http://codebar.github.io/tutorials/html/lesson3/example.html "Ada Lovelace"). + +We will also be explaining in more detail elements that we mentioned in our previous lesson. + +## But before we start... + +### Required files + +Download the files required to begin working through the tutorial from [here](https://gist.github.com/despo/7328342/download) + +### Development Tools - Inspectors + +Inspectors are development tools that help you view, edit and debug CSS, HTML and JavaScript. + +A very popular inspector is [firebug](http://getfirebug.com/), it works nicely on Firefox. Chrome has a built in inspector, but we do suggest you use firebug as it is much easier to use and change different properties with it. + +![](assets/images/firebug.png) + +> Ask your coach to show you how to edit the styling on our example page using firebug + +## Getting started + +Let's begin from the head of our page and set the title as we learned in the first lesson. + +```html +Ada Lovelace +``` + +### Structuring content + +We will separate our page into three different areas. The **header** will be at the top of our page showing our title and picture. The **container** is where we will specify the main content. And the **footer**. + +```html +
        + +
        +
        + +
        +
        + +
        +``` + +> Did you remember to insert these tags within the `` tags of your page? + +> Inspect the page. Can you see the title and the elements we just added? + +## Inline vs block elements + +In CSS there are different ways to [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display "display CSS") elements. The most common ones are: _block_, and _inline_ + +### block elements + +Elements appear on a new line + +![](assets/images/span-block.png) + +Some block elements are `
        ,

        ,

        ,