diff --git a/html/lesson2/example.pt.html b/html/lesson2/example.pt.html new file mode 100644 index 00000000..3101c032 --- /dev/null +++ b/html/lesson2/example.pt.html @@ -0,0 +1,67 @@ + + + + + Eu amo corujas + + + +
+
+ +

Corujas...

+

Por que eu gosto tanto de corujas?

+ +
    +
  1. elas são adoráveis
    2. +
  2. e amáveis
    3. +
  3. e fofinhas
    4. +
+
+
+ Assista este 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?" + +

+

- cantiga de roda inglesa

+
+
+
+

Corujas:

+

+ O termo coruja é a designação comum das aves estrigiformes,
+ das famílias dos titonídeos e estrigídeos. Na região do Amazonas,
+ algumas espécies também são chamadas de murutucu.
+ Tais aves possuem hábitos notívagos e voo silencioso devido à estrutura das penas,
+ alimentando-se de pequenos mamíferos
+ (principalmente de roedores e morcegos), insetos e aranhas.
+
+ Mais informações sobre corujas... +

+
+ +
+
+ +
+
+
+ + diff --git a/html/lesson2/tutorial.pt.md b/html/lesson2/tutorial.pt.md new file mode 100644 index 00000000..1ae4c913 --- /dev/null +++ b/html/lesson2/tutorial.pt.md @@ -0,0 +1,460 @@ +--- +layout: page +title: HTML Aula 2 +footer: true +--- + +## O que é CSS? + +**CSS** é a linguagem utilizada para estilizar websites. + +Ela define a representação visual do conteúdo. Por exemplo cor, margens, bordas, cores de fundo, posições de elementos na página. + +### O que significa? + + **C**ascading **S**tyle **S**heets. *(Folhas de estilo em cascata)* + +### No que constitui um website + +HTML: estrutura do website + +CSS: apresentação + +_**CSS** trabalha em conjunto com o **HTML**_ + +### Hoje nós vamos focar nos conceitos fundamentais do CSS + +Nós vamos aplicar estilos a [esta página](http://github.com/codebar/tutorials/blob/gh-pages/html/lesson2/example.pt.html), para que ela se pareça [com este exemplo](http://codebar.github.io/tutorials/html/lesson2/example.pt.html). + +## Mas antes de começarmos... + +> O primeiro tutorial não te prepara para este exercício. Antes de continuar, faça download dos arquivos necessários. + + +### Arquivos necessários + +[Faça download dos arquivos necessários](https://gist.github.com/miguelpeixe/dcc111e287ce3a634569/download) para começar a trabalhar neste tutorial. + +### O que eu posso fazer com CSS? + +Você pode alterar cor, posição, dimensão e apresentação de diferentes elementos. + +### Anatomia de um elemento CSS + +```css +body { + color: hotpink; +} +``` + +**body** seletor + +**color** propriedade + +**hotpink** valor + +```css +seletor { + propriedade: valor; +} +``` + +Um grupo de propriedades para um determinado seletor é definido dentro das chaves + +```css +body { + color: hotpink; + font-size: 12px; +} +``` + +## Começando + +No cabeçalho - *head* - da página HTML defina uma tag style (tag para escrita do CSS) + +```html + + Eu amo corujas + + +``` + +Inclua o estilo descrito abaixo dentro da tag style que definimos. + +## Introdução ao seletor + +### Seletores + +#### Seletor: elemento + +Vamos ver a fonte que gostaríamos que nossa página utilize. + +```css +body { + font-family: Helvetica, Arial, sans-serif; +} +``` + +Ao selecionarmos o elemento **body** a alteração de fonte será aplicada a tudo aninhado dentro dele, todo o conteúdo da nossa página. + +Vamos também remover os pontos dos items das listas que definimos + +```css +ul { + list-style: none; +} +``` + +e alterar a aparência dos links em nossa página + +```css +a { + color: #a369d5; + text-decoration: none; + border-bottom: 1px dotted #a369d5; +} +``` +**color** define a cor do texto. `#a369d5` é a representação da cor em HEX *(sistema hexadecimal)*. +Uma ferramenta útil para descobrir os códigos das cores é [http://0to255.com](http://0to255.com). + +**text-decoration** especifica a decoração aplicada ao texto. Algumas outras opções que você pode tentar são _underline_, _overline_ e _line-trough_. Links por padrão tem a decoração sublinhada _(underline)_ aplicada a eles, ao definir como none _(nenhuma)_, nós removemos a propriedade. + +**border-bottom** faz o texto aparecer sublinhado. Propriedades de borda podem ser unificadas em uma linha só. + +`border-bottom: espessura estilo-da-borda cor` + +**1px** define a espessura da borda + +**dotted** define o estilo da linha + +**#a369d5** a cor da borda + +#### Seletor: classe + +Um seletor de classe seleciona todos os elementos que utilizam a classe especificada. + +```css +.pictures { + margin: 10px auto; + width: 900px; +} +``` + +**margin** é a área ao redor do elemento. A definição acima é uma versão curta para + +```css +margin-top: 10px; /* Superior */ +margin-bottom: 10px; /* Inferior */ +margin-right: auto; /* Direita */ +margin-left: auto; /* Esquerda */ +``` + +O que nós definimos acima é +_margin: (top bottom) (left right)_ + +> Você pode ver a margem de um elemento inspecionando-o pelo navegador e observando na aba _computed_ (valores de estilo computados) + +#### Seletor: id + +Selecionando um elemento com o id _logo_. + +```css +#logo { + margin: 0 auto 30px; + width: 200px; +} +``` + +> Só pode haver um elemento com um id particular. Se você definir múltiplos elementos, apenas o primeiro será selecionado. + +#### Seletor: elementos aninhados + +Selecionando todos os elementos de lista que estão aninhados à **classe** _pictures_ + +```css +.pictures li { + display: inline; + margin: 3px; +} +``` + +**display** especifica como os elementos são exibidos. **li** é um elemento _block_ (bloco). Ao alterar sua propriedade _display_, nós garantimos que será exibido como um elemento _inline_ (em linha). + +> Altere _inline_ para _inline-block_, e para _block_. Você pode observar a diferença? + +## Formas de conectar CSS ao HTML + +### CSS incorporado _(embedded)_ + +No início do tutorial nós descrevemos como conectar o CSS à nossa página. + +```html + + Eu amo corujas + + +``` + +Este método de utilizar CSS, definindo-o dentro da própria página HTML é chacado de **incorporado**, ou _embedded_ em inglês. O problema neste método é que ele não permite a reutilização do estilo em outras páginas e torna o trabalho mais difícil. + +### CSS ligado _(linked)_ + +Um melhor método para definir CSS é incluí-lo como uma folha de estilos separada. É mais fácil de manter e pode ser reutilizado em várias páginas. + +Para alcançar isso, vamos mover nosso CSS para fora do cabeçalho _(head)_ e para um novo arquivo que vamos ligar através do cabeçalho. + +```html + + Eu amo corujas + + +``` + +## Cascata + +Folhas de estilo operam em cascata em todos os elementos até eles serem alterados. + +Primeiro vamos remover a margem e a borda de todas as imagens. + +```css +img { + margin: 0; + border: 0; +} +``` + +Nós podemos alterar o estilo de algumas dessas imagens definindo um seletor mais específico. Isso vai substituir o seletor `img` que acabamos de definir + +```css +.bigimg img { + margin: 15px 2px; + width: 439px; + border: 2px solid #b9b1bf; +} +``` + +## Propriedades do CSS + +Até agora nós explicamos algum seletores e apresentamos outros com nomes mais auto explicatórios. Saber todos os seletores não é uma tarefa fácil, mas não se preocupe. A internet é sua amiga. [Aqui você você pode encontrar uma lista de todas as propriedades CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference) + + +## Aplicando mais estilos à nossa página + +### line-height _(altura da linha)_ + +Vamos extender o seletor do _body_ para que nossa página apareça um pouco menos encavalada. + +```css +body { + font-family: Helvetica, Arial, sans-serif; + line-height: 1.3; +} +``` + +### Centralizando o conteúdo da nossa página + +No HTML da página você vai notar um elemento `div` com o id **main**. Vamos utilizar este seletor para centralizar o elemento + +```css +#main { + width: 900px; + margin: 0 auto 40px; + padding: 0; +} +``` + +Para alcançar a centralização do elemento nós precisamos definir sua largura. Se você remover a propriedade de largura - _width_ - você irá notar que o elemento não estará no centro da página. + +Nós também estamos utilizando uma versão curta para definir margem. A versão longa é assim + +```css +margin-top: 0; +margin-bottom: 40px; +margin-right: auto; +margin-left: auto; +``` + +**auto** ajusta as margens direita e esquerda. Se você ajustar o tamanho da janela do browser vai observar que mas margens direita e esquerda irão se ajustar automaticamente, para que o elemento **main** se mantenha no centro da página. + +**padding** é a área ao redor do elemento, mas dentro de sua borda. + +> Não confunda padding (preenchimento) com margin (margem), dê uma olhada no inspetor de elemeentos par aver como o padding e margin de um elemento se diferem. + + +### Elementos flutuantes + +```css +.right-box { + float: right; +} +``` + +### Utilizando elementos vazios para aplicação de estilos + +Para fazer o desenho da página ficar mais bonit às vezes podemos adicionar elementos vazios. Como `
` + +```css +#top-line { + width: 100%; + height: 5px; + background-color: #2d183d; + border-bottom: 3px solid #eedffb; + margin-bottom: 10px; +} +``` + +Vamos também aplicar estilos ao final da nossa página de forma similar + +```css +#bottom-line { + width: 100%; + height: 5px; + background-color: #2d183d; + border-top: 3px solid #eedffb; +} +``` + +### Alterando estilo através dos seletores de elemento + +Quando queremos garantir que a aparência de um elemento se altere de forma consistente através das nossas páginas, é melhor utilizar seletores de elemento. Dessa forma podemos garantir que não precisaremos redefinir o esitlo e que se aplicará a todos os elementos deste tipo. + +```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** espessura do texto exibido + +**text-align** alinhamento horizontal de um elemento de texto + +### Um pouco mais de estilo + +```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; +} + +``` + +### Mais seletores em cascata + +```css +.pictures li img { + border: 2px solid #b9b1bf; +} + +.bigimg img { + margin: 15px 2px; + width: 439px; + border: 2px solid #b9b1bf; +} +``` + +### Alguns toques extras + +```css +.bigimg{ + display: inline; +} +``` + +## Material avançado + +### Pseudo-classes + + +Pseudo-classe é uma palavra-chave adiciona a um seletor que especifica um estado especial do elemento a ser selecionado. [Essas](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) são as pseudo-classes padrões. + +Vamos adicionar o código abaixo para garantir que nós vamos aplicar a margem apenas ao **primeiro elemento** da lista dentro da classe _pictures_. + +```css +.pictures li:first-child { + margin-left: 5px; +} +``` + +> O que acontece quando você remove _:first-child_ do seu seletor? + + +### Bonus - Removendo estilos + +Você provavelmente notou que as páginas se parecem diferentes quando carregadas em diferentes navegadores. Para evitar as inconsistência entre navegadores uma técnica comum é a **remoção de estilo**, ou, _CSS resetting_ em inglês. + +Vamos tentar aplicar aos elementos da nossa página + +```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; +} +``` + +----- + +Assim terminamos nossa segunda aula. Tem algo que você não entendeu? Tente passar pelo material fornecido com seu orientador. Se você tiver alguma sugestão ou pode pensar em outras formas de melhorar este tutorial [nos envie um email](mailto:feedback@codebar.io). diff --git a/html/lesson3/example.pt.html b/html/lesson3/example.pt.html new file mode 100644 index 00000000..3dd68d8c --- /dev/null +++ b/html/lesson3/example.pt.html @@ -0,0 +1,68 @@ + + + + + Ada Lovelace + + + +
+
+ +
+
+

Olá, eu sou Ada Lovelace

+
+
+ +
+
+ Eu na internet + +
+
+

Meu nome é August Ada King. Eu sou a Condessa de Lovelace.

+ +

Eu sou uma matemática e escritora. Pessoas me conhecem pelo meu trabalho sobre o início da mecânica em computação de uso geral de Charles Babbage, a máquina analítica. Eu escrevi o primeiro algorítmo com a intenção de ser processado por uma máquina. Em outras palavras, eu sou a primeira pessoa do mundo a programar.

+ +

Minha mãe, Anne Isabella Byron, foi uma grande ajuda para mim ao apoiar e promover meu interesse em matemática e lógica, mas também nunca esqueci do meu pai, que se mudou para Grécia quando eu era apenas uma criança para ajudar na guerra civil.

+ +
“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.”
+ +
- Eu não acredito que o meu pai era um poeta como eu devo ser uma analista; para mim os dois andam juntos indissoluvelmente.
+ +

Ao longo da minha vida, matemática tem sido meu principal interesse. Eu sempre questionei as mais básicas concepções ao integrar poesia, outra grande paixão minha, e ciência. Também tenho um grande interesse em desenvolvimentos científicos e tendências da minha época como frenologia e mesmerismo.

+ +

+ Charles Babbage escreveu o seguinte poema sobre mim +

+ + Forget this world and all its troubles and if
+ possible its multitudinous Charlatans-every thing
+ in short but the Enchantress of Numbers. + +

+

+ - Esqueça deste mundo e seus problemas e se
+ possível seus tantos charlatões-todas as coisas
+ em resumo menos a Encantadora de Números. +

+ +

A linguagem de programação Ada, foi criada em meu nome. O padrão de defesa militar da linguagem, MIL-STD-1815 foi também dado pelo meu ano de nascimento.

+ +

Hoje em dia, a Sociedade Britânica de Computação organiza competições anuais para mulheres estudantes de ciência da comutação em meu nome. A conferência anual de mulheres graduandas também é nomeada em minha homenagem. Google também dedicou seu Google Doodle à mim, em homenagem aos meus 197 anos de nascimento.

+ +

+ +

+
+
+ + + + diff --git a/html/lesson3/tutorial.pt.md b/html/lesson3/tutorial.pt.md new file mode 100644 index 00000000..8fea8f04 --- /dev/null +++ b/html/lesson3/tutorial.pt.md @@ -0,0 +1,585 @@ +--- +layout: page +title: HTML Aula 3 +footer: true +--- + +## HTML e CSS - Além do básico + +### Recaptulando + +Nas duas aulas anteriores nós falamos sobre **H**yper **T**ext **M**arkup **L**anguage e **C**ascading **S**tle **S**heets. **HTML** define a _estrutura_ de um site e o **CSS** sua _apresentação_. + +### Hoje vamos criar do início um site com estilos aplicados + +A página que vamos criar se parecerá com esta [página de exemplo](http://codebar.github.io/tutorials/html/lesson3/example.pt.html "Ada Lovelace"). + +Nós também vamos explicar em mais detalhes elementos que mencionamos em nossas aulas anteriores. + +## Mas antes de começarmos... + +### Arquivos necessários + +Baixe [aqui](https://gist.github.com/despo/7328342/download) os arquivos necessário para começar a trabalhar com este tutorial + +### Ferramentas de desenvolvimento - inspetores + +Inspetores são ferramentas de desenvolvimento que auxiliar a visualização, edição e _debug_ (correção de bugs) de CSS, HTML e JavaScript. + +Um inspetor muito popular é o [firebug](http://getfirebug.com/), funciona muito bem com o Firefox. Chrome tem um inspetor embutido, mas recomendamos a utilização do firebug por ser mais fácil de utilizar e com ele alterar diferentes propriedades. + +![](assets/images/firebug.png) + +> Peça ao seu orientador para mostrar como se edita estilos na nossa página de exemplo utilizando o firebug + +## Começando + +Vamos começar do cabeçalho da nossa página e definir o título como aprendemos em nossa primeira aula. + +```html +Ada Lovelace +``` + +### Estruturando conteúdo + +Nós vamos separar nossa página em três diferentes áreas. O **header** (cabeçalho) ficará no topo da nossa página, exibindo título e imagem. O **container** (encapsulador de conteúdo) será onde vamos inserir o conteúdo principal e o **footer**, nosso rodapé. + +```html +
+ +
+
+ +
+ +``` + +> Você se lembrou de inserir as tags dentro das tags `` da sua página? + +> Inspecione a página. Você pode ver o título e os elementos que acabamos de inserir? + +## Elementos _inline_ (em linha) vs _block_ (bloco) + +No CSS existem diferentes modos de [exibir](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) elementos. Os mais comuns são: _block_, e _inline_ + +### elementos _block_ + +Elementos aparecem em uma nova linha + +![](assets/images/span-block.png) + +Alguns elementos _block_ são: `
,

,

,