Aula 1 · Antes de começar

Preparar o vscode.dev

Aqui você vai escrever código de verdade, como os programadores fazem. Leia cada lição nesta tela e faça no vscode.dev, em outra aba.

1Abrir e preparar

1. Abra o vscode.dev

   Abra uma aba nova (Ctrl + T), escreva vscode.dev e aperte Enter. Não precisa instalar nada.

2. Abra uma pasta para o seu site

   Clique no menu ☰ (três risquinhos, no canto de cima, à esquerda) → File → Open Folder… (quer dizer Arquivo → Abrir pasta).

   Na janela que abrir: entre em Meus arquivos, clique em Nova pasta, dê o nome meu-site e clique em Abrir.

   O navegador vai pedir permissão. Clique no botão que permite editar os arquivos (por exemplo, Editar arquivos / Edit files). Se aparecer “Do you trust the authors…?”, clique em Yes, I trust the authors.

3. Crie o arquivo index.html

   Na coluna da esquerda aparece o nome da pasta, MEU-SITE. Passe o mouse em cima dele: aparecem ícones pequenos. Clique no primeiro (New File… = Novo arquivo), escreva index.html e aperte Enter.

4. Salve sempre

   Aperte Ctrl + S depois de cada mudança. Se a aba do arquivo mostra uma bolinha ● ao lado do nome, é porque ainda não salvou.

5. Veja a sua página

   Abra o app Arquivos do Chromebook → Meus arquivos → meu-site → dê dois cliques em index.html. A página abre no Chrome.

   Mudou o código? Faça assim: Ctrl + S no vscode.dev → volte na aba da página → Ctrl + R para recarregar.

2O que é o Emmet?

O Emmet é um ajudante que já vem dentro do vscode.dev. Você escreve uma abreviação curta, aperta Tab, e ele escreve o código completo para você.

O Emmet economiza tempo, mas o importante é você entender o que ele escreveu. Por isso, em cada lição, mostramos a abreviação, o Tab e o que ela vira, com a explicação.

Aula 1 · Lição 1

A estrutura da página

Toda página HTML tem um esqueleto: html, head e body. São caixas, uma dentro da outra.

1O Emmet escreve o esqueleto

Com o arquivo index.html aberto e vazio:

2Entendendo cada parte

<!DOCTYPE html>

Avisa ao navegador: “isto é uma página HTML”. Fica sempre na primeira linha.

<html lang="en">

Abre a página inteira. O lang diz o idioma. Troque en (inglês) por pt-BR (português do Brasil).

<head>

A cabeça: guarda informações sobre a página.

<meta charset="UTF-8">

Faz os acentos e o ç aparecerem certinho.

<meta name="viewport" …>

Faz a página funcionar bem na tela do celular.

<title>Document</title>

O nome que aparece na aba do navegador. Troque Document pelo nome da sua página.

<body> … </body>

O corpo. Todo o conteúdo que aparece na tela vai aqui dentro. É aqui que você vai trabalhar em todas as lições.

</html>

Fecha a página. Fim.

3Digite no vscode.dev

Faça as duas trocas (pt-BR e o título) e escreva um título e um texto dentro do body:

Aula 1 · Lição 2

Títulos e texto

O HTML tem seis tamanhos de título: de h1 (o mais importante) até h6 (o menos importante). E o p é o texto normal.

1Pense como um livro

• h1 é o nome do livro. Use só um por página.
• h2 são os capítulos.
• h3 são as partes de cada capítulo… e assim por diante.

2Emmet para títulos e textos

3Extra: destacar palavras

Dentro de um p, você pode destacar pedaços do texto:

• strong = muito importante (aparece em negrito).
• em = ênfase, como quando a gente fala mais forte (aparece inclinado).

Aula 1 · Lição 3

Listas

Existem dois tipos de lista: com bolinhas e com números. Cada item da lista é um li.

ul

Lista não ordenada: com bolinhas. A ordem não importa (ex.: lista de compras).

ol

Lista ordenada: com números. A ordem importa (ex.: passo a passo de uma receita).

li

Um item da lista. Fica sempre dentro de um ul ou de um ol.

1Lista com bolinhas

2Lista com números

Aula 1 · Lição 4

Imagens e atributos

A tag img coloca uma imagem na página. Mas ela precisa de uma informação a mais: qual imagem mostrar. Para isso servem os atributos.

1O que é um atributo?

Atributo é uma informação extra que vai dentro da tag de abertura. Sempre no formato nome="valor", com o valor entre aspas.

src

Vem de source, “fonte”: de onde vem a imagem. É o endereço da imagem.

alt

Texto alternativo: descreve a imagem. Aparece se a imagem não carregar, e é lido em voz alta por programas que ajudam pessoas cegas.

2Emmet para imagem

3Pegue uma imagem

Escolha uma figura e toque em Copiar endereço. Depois, no vscode.dev, clique entre as aspas do src="" e aperte Ctrl + V para colar.

Resultado

Minha flor preferida

4Extra: mudar o tamanho

O atributo width (largura) diz quantos pontinhos (pixels) de largura a imagem vai ter:

Aula 1 · Lição 5

Links

Um link é um texto (ou imagem) que você clica para ir a outra página. É o que faz a internet ser uma “rede”: as páginas ligadas umas às outras.

a

A tag do link. Vem de anchor, “âncora”.

href

O atributo com o endereço para onde o link leva. Precisa começar com https://.

Conheça Fortaleza

O texto entre a abertura e o fechamento é o que aparece na tela para clicar.

1Emmet para link

2Abrir em uma aba nova

Normalmente, o link abre na mesma aba e a sua página some. Para abrir em uma aba nova, use o atributo target="_blank":

3Extra: imagem que é link

Coloque um img dentro do a. Aí, clicar na imagem abre o link:

Aula 1 · Lição 6

Juntar tudo: a página sobre mim

Agora você sabe o bastante para fazer uma página completa, só com HTML. Monte a sua “página sobre mim” no index.html.

1Um exemplo para se guiar

Não copie igual: escreva do seu jeito, com as suas informações.

Página da Ana

Ana Souza

Eu moro em Fortaleza e estou aprendendo a fazer sites.

Meu sonho é trabalhar com tecnologia.

Meus hobbies

• Ouvir forró
• Cozinhar
• Ir à praia

Um lugar que eu gosto

Conheça Fortaleza

2Resumo do que você já sabe

3Publicar e mostrar para a turma

Para a sua página ter um endereço na internet e qualquer pessoa abrir, dá para publicar de graça no GitHub Pages. Tudo pelo navegador, sem instalar nada. Faça com o professor na primeira vez.

1. Entre no GitHub

   Abra github.com e entre na sua conta. Não tem conta? Peça ajuda ao professor para criar.

2. Crie um repositório

   Clique no + (canto de cima, à direita) → New repository. Nome: minha-pagina. Deixe marcado Public. Clique em Create repository.

3. Crie o arquivo

   Clique em creating a new file (ou Add file → Create new file). No nome do arquivo, escreva index.html.

4. Copie o seu código

   No vscode.dev, clique no código e aperte Ctrl + A (seleciona tudo) e Ctrl + C (copia). No GitHub, clique na área grande de texto e aperte Ctrl + V.

5. Salve no GitHub

   Clique em Commit changes… e, na janelinha, em Commit changes de novo.

6. Ligue o GitHub Pages

   Clique em Settings → Pages (na coluna da esquerda). Em Branch, escolha main e clique em Save.

7. Pegue o seu endereço

   Espere 1 ou 2 minutos e recarregue. Vai aparecer o endereço, parecido com https://seu-usuario.github.io/minha-pagina/. Mostre para a turma!

Aula 2 · Lição 1

O que é CSS

Na aula 1, você fez a estrutura da página com HTML: o que existe nela. Agora vem o CSS: a aparência. Cor, tamanho da letra, espaços, bordas.

HTML

O corpo da página: títulos, textos, listas, imagens. Diz o que tem.

CSS

A roupa da página: cores, letras, espaços. Diz como fica.

1Abra o seu site de novo

1. Abra o vscode.dev

   Menu ☰ → File → Open Recent (Abrir recente) → meu-site. Se não aparecer, use File → Open Folder… e escolha a pasta meu-site de novo.

2. Permita de novo

   O navegador pode pedir permissão outra vez. Clique no botão que permite editar os arquivos.

3. Abra o index.html

   Clique nele na coluna da esquerda. Abra também a página no Chrome, como na aula 1 (app Arquivos → dois cliques).

2Onde escrever o CSS

Para começar, o CSS vai dentro de uma tag <style>, que fica no head. O head guarda informações sobre a página, e o CSS é isso: uma informação de como a página deve ficar. Ele não aparece na tela.

3Uma regra de CSS

O CSS é feito de regras. Cada regra diz: “esta parte da página fica assim”.

h1

O seletor: é o nome da tag do HTML. Esta regra vale para todos os h1 da página.

{ }

As chaves abrem e fecham a regra, como a abertura e o fechamento de uma tag.

color: blue;

Propriedade, dois pontos :, valor, e termina com ponto e vírgula ;. Aqui: “a cor da letra é azul”.

Aula 2 · Lição 2

Cores

Duas propriedades mudam cores: color muda a cor da letra, e background-color muda a cor do fundo.

1Cores pelo nome (em inglês)

2Cores pelo código

Os nomes são poucos. Para ter qualquer cor, usamos um código que começa com # e tem 6 letras ou números, como #1C6EA4. Você não precisa decorar: copie de uma paleta.

3Emmet para cores

4Pintar o fundo da página

Lembra que o body é o corpo da página, onde fica todo o conteúdo? Se o CSS pintar o fundo do body, a página inteira muda de cor.

Aula 2 · Lição 3

Letras

Com CSS você escolhe o tamanho, o tipo de letra, o negrito e o alinhamento.

1Tamanho: font-size

2Tipo de letra: font-family

Cada computador tem fontes diferentes. Por isso, escrevemos uma lista: se o computador não tiver a primeira, usa a próxima. No fim, colocamos sempre uma família, que todo computador tem:

3Negrito e alinhamento

Aula 2 · Lição 4

Espaços e bordas

Para o CSS, todo elemento é uma caixa. Um parágrafo, um título, uma imagem: todos são caixas. E toda caixa tem camadas.

1Emmet para espaços e bordas

2Centralizar a página

Numa tela grande, o texto fica esticado de um lado ao outro. Duas linhas no body resolvem:

max-width: 700px;

A página pode ter no máximo 700px de largura.

margin: 0 auto;

Nenhum espaço em cima e embaixo (0). Dos lados, auto: o navegador divide o espaço que sobra igual dos dois lados. Resultado: a página fica no meio.

3Imagem redonda

width (w150 + Tab) muda a largura. E border-radius: 50%; arredonda tanto que uma imagem quadrada vira um círculo.

Aula 2 · Lição 5

Classes: estilo só para alguns

A regra p { color: red; } pinta todos os parágrafos. E se você quiser destacar só um? Para isso existe a classe.

1Duas partes: uma no HTML, outra no CSS

class="destaque"

No HTML: um atributo que dá um nome para o elemento. Você inventa o nome.

.destaque { }

No CSS: o ponto antes do nome quer dizer “os elementos com esta classe”.

Aula 2 · Lição 6

Juntar tudo: a sua página com estilo

Pegue a sua “página sobre mim” da aula 1 e deixe ela com a sua cara.

1Um exemplo para se guiar

Não copie igual: escolha as suas cores e o seu jeito.

2Resumo do CSS que você já sabe

3Atualizar a página publicada

Se você publicou a página na aula 1, dá para atualizar o mesmo endereço:

1. Abra o seu repositório

   Em github.com, entre no repositório minha-pagina e clique no arquivo index.html.

2. Clique no lápis

   O ícone de lápis (Edit this file), no canto de cima do código.

3. Troque o código

   Clique no código do GitHub, aperte Ctrl + A e Delete. No vscode.dev, Ctrl + A e Ctrl + C. Volte no GitHub e Ctrl + V.

4. Salve

   Clique em Commit changes… e em Commit changes de novo. Em 1 ou 2 minutos, o seu endereço mostra a página nova.

Aula 3 · Lição 1

As partes da página

Até agora, tudo ficava solto dentro do body. Os sites de verdade dividem o body em partes, como uma casa tem cômodos.

header

Cabeçalho: a parte de cima, com o nome do site (o h1) e, muitas vezes, o menu.

nav

Navegação: o menu com links para as partes do site.

main

O conteúdo principal da página. Só existe um por página.

section

Uma seção: uma parte com um tema, que normalmente começa com um h2.

footer

Rodapé: a parte de baixo, com contato e créditos.

Aula 3 · Lição 2

O CSS em um arquivo separado

Até agora, o CSS ficava no <style>, dentro do HTML. Os sites de verdade guardam o CSS em um arquivo só dele: o style.css.

• O HTML fica mais limpo: só a estrutura.
• Um site com várias páginas usa o mesmo arquivo de CSS. Você muda uma vez e todas as páginas mudam.

1Passo a passo

1. Crie o arquivo

   No vscode.dev, passe o mouse na pasta MEU-SITE, clique em New File… e escreva style.css. Igual você fez com o index.html.

2. Mude o CSS de lugar

   No index.html, selecione as regras que estão dentro do <style> e aperte Ctrl + X (recortar). No style.css, aperte Ctrl + V. Não leve as tags <style> e </style>: o arquivo .css tem só as regras.

3. Apague o style vazio

   No index.html, apague o <style></style> que sobrou.

4. Ligue os dois arquivos

   No head do index.html, no lugar do style, use o Emmet abaixo. Salve os dois arquivos.

Aula 3 · Lição 3

Lado a lado: flexbox

Normalmente, as caixas ficam uma embaixo da outra. Com display: flex, elas ficam lado a lado.

1A caixa de fora e as caixas de dentro

O flex vai na caixa de fora (a que guarda as outras). Aí as caixas de dentro se arrumam lado a lado. Vamos fazer três cartões:

2O CSS do flex

gap: 16px;

O espaço entre as caixas de dentro. Este você digita inteiro.

flex: 1;

Vai nas caixas de dentro: todas dividem o espaço em partes iguais.

Aula 3 · Lição 4

Um menu de verdade

Quase todo site tem um menu em cima. Ele é feito com o que você já sabe: um nav, uma lista e links.

1Links para as partes da mesma página

O link pode levar para uma parte da própria página. Dê um id (um nome único) para a parte e use # no href:

id="hobbies"

Um nome para a parte. Diferente da classe, o id é único: só um elemento da página pode ter aquele id.

href="#hobbies"

O # quer dizer: “vá para a parte com este id”.

2O CSS do menu

Passe o mouse em cima dos botões do resultado: eles mudam de cor.

nav a

Dois nomes separados por espaço: “os a que estão dentro do nav”. Os outros links da página não mudam.

list-style: none;

Tira as bolinhas da lista. Emmet: lis:n.

text-decoration: none;

Tira o sublinhado do link. Emmet: td:n.

a:hover

O :hover quer dizer “quando o mouse passa em cima”. A regra só vale nesse momento.

Aula 3 · Lição 5

Juntar tudo: um site organizado

Agora a sua página tem cara de site de verdade: cabeçalho com menu, conteúdo em cartões e rodapé.

1Um exemplo para se guiar

2Publicar com o style.css

Agora o site tem dois arquivos. No GitHub, os dois precisam estar no repositório:

1. Atualize o index.html

   Como na Aula 2: abra o index.html no GitHub, clique no lápis, troque o código e clique em Commit changes.

2. Crie o style.css

   Na página do repositório, clique em Add file → Create new file. Nome: style.css. Copie o CSS do vscode.dev (Ctrl + A, Ctrl + C), cole e clique em Commit changes.

3. Confira

   Em 1 ou 2 minutos, abra o seu endereço e recarregue. Se a página aparecer sem cores, confira o nome do arquivo: tem que ser style.css, igual ao href.

3Resumo da Aula 3

Aula 4 · Lição 1

O formulário

O formulário é a parte do site onde a pessoa escreve e envia informações: um cadastro, uma mensagem de contato, uma pesquisa.

form

A caixa que guarda todos os campos do formulário.

label

O nome do campo, que aparece na tela: “Seu nome”, “Seu e-mail”…

input

O campo onde a pessoa escreve. Ele não fecha, igual ao img.

1Emmet para formulário

2O label e o input, ligados

No resultado acima, clique na palavra “Seu nome:”: o cursor vai sozinho para o campo. É isso que o for="nome" + id="nome" fazem.

placeholder

Uma dica cinza dentro do campo, que some quando a pessoa começa a escrever.

Aula 4 · Lição 2

Tipos de campo

Mudando o type do input, o navegador muda o campo sozinho: mostra um calendário para datas, só aceita números, confere o e-mail…

email

E-mail. No celular, o teclado já mostra o @.

number

Só números, com setinhas para aumentar e diminuir.

date

Data, com um calendário para escolher.

password

Senha: mostra bolinhas no lugar das letras.

1Texto grande, escolhas e caixinhas

textarea

Campo de texto grande, para mensagens. Esse fecha: </textarea>. O rows diz quantas linhas aparecem.

select + option

Uma lista para escolher. Cada opção é um option. Emmet: select>option*3.

radio

Bolinhas: dá para marcar só uma. Para isso, todas precisam ter o mesmo name.

checkbox

Caixinha de marcar: sim ou não.

br

Uma quebra de linha: o que vem depois começa na linha de baixo. Não fecha.

Aula 4 · Lição 3

O botão e os campos obrigatórios

Todo formulário precisa de um botão para enviar. E alguns campos não podem ficar vazios.

1required: obrigatório

O atributo required diz que o campo é obrigatório. Ele não tem valor: é só escrever a palavra.

Teste no resultado: clique em Enviar com tudo vazio. Depois, escreva um e-mail sem @. O navegador avisa sozinho, sem você programar nada.

Aula 4 · Lição 4

Formulário com estilo

Sem CSS, o formulário fica apertado e pequeno. Com poucas regras, ele fica fácil de usar, até no celular.

input, textarea

A vírgula junta seletores: a mesma regra vale para os dois.

display: block;

No label: o nome fica em cima do campo, numa linha só dele.

width: 100%;

O campo ocupa toda a largura. Emmet: w100p (o p vira %).

box-sizing: border-box;

Faz o padding e a borda caberem dentro dos 100%. Sem isso, o campo passa um pouco da borda da página.

:focus

Como o :hover, mas vale quando o campo está selecionado (com o cursor dentro).

border: none;

Tira a borda do botão.

Aula 4 · Lição 5

Juntar tudo: “Fale comigo”

Coloque na parte de contato do seu site um formulário completo e bonito.

1Um exemplo para se guiar

2Resumo da Aula 4