O objetivo do curso é ensinar conceitos fundamentais para a construção de aplicações web, assim como ferramentas que permitem desenvolvimento rápido de aplicações modernas.
Para estabelecer uma base para essas atividades, é importante entender um pouco daquilo sobre o que estamos trabalhando, a internet. A internet pode ser descrita de forma não rigorosa como uma série de computadores conectados. A conexão entre eles serve para trocar informações e ocorre em várias camadas, pro nosso curso nós estamos preocupados com a última camada que é a mais comum na internet, o HTTP.
O HTTP (Hypertext transfer protocol), é o protocolo que permite a transferência de hipertexto entre computadores. E o hipertexto, por sua vez, é texto que contém links para outros textos ou páginas que contém links para outras páginas. A partir disso, nós já conseguimos entender algo essencial sobre a forma como a internet é navegada.
Nós usuários da internet a navegamos entrando em uma página (por exemplo o Google), interagindo com ela e depois clicando em links para outras páginas com as quais também podemos interagir.
Essas páginas são escritas em um formato específico, o HTML, Hypertext Markup Language. O objetivo dessa primeira aula é ensinar vocês a escrever uma página web usando o HTML.
HTML é uma linguagem de markup que define a estrutura de uma página web. Ela é interpretada pelo seu browser que sabe como renderizar o conteúdo na sua tela.
Aqui temos um exemplo de um arquivo HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
<html>Ao abrir esse arquivo em um browser veremos isso:
O arquivo que nós escrevemos parece complicado demais para mostrar algo tão simples, mas a estrutura do HTML é fácil de entender. Vamos passar por cada parte:
lang="pt-br" é um atributo que indica para o browser que estamos usando o português brasileiro como nossa língua principal.head e uma tag body. A tag head inclui informação sobre a página que não necessariamente é renderizada, e a tag body contém o que vai ser visível para os usuários do site.title para a nossa página, ela tipicamente é renderizada pelo browser na aba acima da página.A DOM é uma forma conveniente de visualizar uma página web. Além disso, ela é a representação em dados dos objetos que compõem uma página. Vamos aprender a interagir mais com a DOM em outro momento do curso, por enquanto, basta saber que ela existe como um grande objeto que define uma página web.
Abaixo temos uma visualização da DOM para a nossa página:
Abaixo temos um exemplo de página que usa diversos outros elementos HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Elementos HTML</title>
</head>
<body>
<!-- Podemos criar títulos (headings) usando as tags h1, h2, ..., h6 -->
<h1>Título Grande</h1>
<h2>Título não tão grande</h2>
<h6>Menor título</h6>
<!-- As tags bold e 'i' são usadas para escrever em negrito e itálico -->
Uma palavra <strong>destacada</strong> e uma em <i>itálico</i>!
<!-- Podemos linkar para outra página -->
Veja o site do <a href="https://codelab.ime.usp.br/">Codelab</a>!
<br>
<!-- Aqui usamos uma tag 'br' para adicionar espaço em branco -->
Veja o site do <a href="https://codelab.ime.usp.br/" target="_blank">Codelab</a> em outra página!
<!-- Usamos <ol> e <ul> para fazer listas com e sem ordem -->
Uma lista ordenada:
<ol>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>
Uma lista sem ordem:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<!-- Imagens precisam de um atributo 'src', que pode ser o caminho para uma imagem no seu computador ou um link para uma imagem na internet.
Também podemos incluir um atributo 'alt', que descreve a imagem se ela não aparecer -->
Uma imagem:
<img src="currents.jpg" alt="Capa do álbum Currents de Tame Impala" width="300px">
<!-- Também podemos ver acima que para elementos que não contém outros, não precisamos escrever tags de fechamento -->
<br/> <br/>
<!-- Precisamos de algumas tags diferentes para criar tabelas -->
<table>
<thead>
<th>Oceano</th>
<th>Profundidade média</th>
<th>Profundidade máxima</th>
</thead>
<tbody>
<tr>
<td>Pacífico</td>
<td>4280 m</td>
<td>10911 m</td>
</tr>
<tr>
<td>Atlântico</td>
<td>3646 m</td>
<td>8486 m</td>
</tr>
</tbody>
</table>
</body>
<html>Essa página ao ser renderizada fica assim:
Essa é apenas uma demonstração do tipo de conteúdo que conseguimos criar com HTML. Existem mais de 100 elementos HTML, que permitem criar mais tipos de conteúdo, mas você não precisa memorizar todos eles. Apesar disso, é bom ter um conhecimento de que certos elementos existem para poder buscá-los mais tarde.
Referência de todos os elementos
Um conjunto de elementos que é muito importante ao criar um site é o de formulários. Nós podemos permitir que os usuários insiram dados usando um form HTML, com diversos tipos de entrada. Mais tarde no curso vamos aprender como lidar com a informação que foi enviada.
Abaixo temos um exemplo de formulário:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Forms</title>
</head>
<body>
<form>
<input type="text" placeholder="Primeiro nome" name="primeiro">
<input type="password" placeholder="Senha" name="senha">
<div>
Cor favorita:
<input name="color" type="radio" value="azul"> Azul
<input name="color" type="radio" value="verde"> Verde
<input name="color" type="radio" value="amarelo"> Amarelo
<input name="color" type="radio" value="vermelho"> Vermelho
</div>
Álbum favorito:
<select name="albums" id="albums">
<option value="">Escolha um álbum</option>
<option value="innerspeaker">InnerSpeaker</option>
<option value="lonerism">Lonerism</option>
<option value="currents">Currents</option>
<option value="slowrush">The Slow Rush</option>
</select>
<input type="submit">
</form>
</body>
</html>Quando renderizada vemos isso:
Existem outros elementos que podem ser usados dentro de um formulário e também é possível criar seus próprios elementos como neste exemplo.
CSS é usado para mudar a aparência de um website. É possível aplicar estilos específicos para cada elemento adicionando um parâmetro style a ele, isso é chamado de estilização in-line. Nós mudamos o estilo alterando as propriedades CSS de um elemento, como color: blue ou text-align: center, como no exemplo abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Hello!</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Um título colorido!</h1>
Hello, world!
</body>
<html>
Se nós estilizamos um elemento externo, todos os elementos internos automaticamente têm este estilo aplicado. Podemos ver isso se movermos os estilos da tag h1 para a tag body.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Hello!</title>
</head>
<body style="color: blue; text-align: center;">
<h1>Um título colorido!</h1>
Hello, world!
</body>
<html>
Embora seja possível estilizar toda uma página escrevendo os estilos em cada elemento, é melhor movê-los juntos para fora das linhas individuais.
Uma forma de fazer isso é adicionar CSS dentro das tags <style> style na head. Dentro dessas tags nós podemos escrever quais elementos queremos estilizar e com quais parâmetros e valores o faremos:
<html lang="pt-br">
<!DOCTYPE html>
<head>
<title>Hello!</title>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Um título colorido!</h1>
Hello, world!
</body>
</html>
Outra forma de fazer isso é incluir uma tag <link> na head com um link para um arquivo CSS que segue a mesma sintaxe vista acima:
<html lang="pt-br">
<!DOCTYPE html>
<head>
<title>Hello!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Um título colorido!</h1>
Hello, world!
</body>
</html>E o nosso arquivo styles CSS:
h1 {
color: blue;
text-align: center;
}Assim como as tags HTML, existem muitas propriedades CSS para cobrirmos. Geralmente é mais fácil pesquisar algo na linha de "como centralizar div CSS". Abaixo estão alguns exemplos de propriedades CSS:
color: cor de textotext-align: alinhamento de texto na páginabackground-color: cor de fundo da páginawidth: em pixels, porcentagens da página ou outras unidadesheight: o mesmo que acimapadding: Espaço entre a borda de um elemento e seu conteúdomargin: Espaço entre a borda de um elemento e o conteúdo ao seu redorfont-family: tipo de fonte para o textofont-size: em pixels ou outras unidadesborder: tamanho tipo (solid, dashed, etc) corAbaixo aplicamos algumas propriedades CSS para construir uma tabela mais bonita.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Tabela Bonita</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 2px;
}
th {
border: 1px solid black;
padding: 2px;
}
</style>
</head>
<body>
<table>
<thead>
<th>Oceano</th>
<th>Profundidade Média</th>
<th>Profundidade Máxima</th>
</thead>
<tbody>
<tr>
<td>Pacífico</td>
<td>4280 m</td>
<td>10911 m</td>
</tr>
<tr>
<td>Atlântico</td>
<td>3646 m</td>
<td>8486 m</td>
</tr>
</tbody>
</table>
</body>
<html>
Note que os estilos de td e th que escrevemos são iguais, nós podemos juntá-los:
table {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 2px;
}Essa é uma boa introdução ao que são conhecidos como seletores CSS. Existem muitas maneiras de determinar quais elementos HTML você está estilizando, algumas das quais mencionaremos aqui:
id aos elementos HTML assim:
<h1 id="primeiro-cabecalho">Olá!</h1>Depois, aplicamos estilos usando a hashtag para indicar o id:
#primeiro-cabecalho {
/* estilos aqui */
}Importante: nenhum elemento pode ter mais de um id e nenhum id pode ser repetido na mesma página.
id, mas uma classe pode ser compartilhada por vários elementos, e um único elemento pode ter mais de uma classe. Adicionamos classes assim:
<h1 class="texto-pagina apagado">Olá!</h1>Note que adicionamos duas classes: texto-pagina e apagado. Para estilizar com base em uma classe, usamos um ponto (.):
.apagado {
display: none;
}
.texto-pagina {
text-align: center;
color: pink;
}Também precisamos lidar com o problema de conflitos de CSS. O que acontece quando um cabeçalho deveria ser vermelho com base na classe, mas azul com base no id?
Nesses casos os estilos são aplicados seguindo a precedência do CSS:
Além da vírgula para múltiplos seletores, existem várias outras formas de especificar quais elementos você deseja estilizar. Esta tabela da aula mostra algumas, e veremos alguns exemplos abaixo:
| Sintaxe | Tipo |
|---|---|
| a, b | Seletor de múltiplos elementos |
| a b | Seletor de descendente |
| a > b | Seletor de filho |
| a + b | Seletor de irmão adjacente |
| [a=b] | Seletor de atributo |
| a:b | Seletor de pseudoclasse |
| a::b | Seletor de pseudoelemento |
Aqui, usamos o seletor descendente para aplicar estilo somente aos itens de lista (<li>) dentro de uma lista não ordenada (<ul>):
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Usando Seletores</title>
<style>
ul li {
color: blue;
}
</style>
</head>
<body>
<ol>
<li>foo</li>
<li>bar
<ul>
<li>olá</li>
<li>adeus</li>
<li>olá</li>
</ul>
</li>
<li>baz</li>
</ol>
</body>
</html>
Também podemos restringir a seleção com base em atributos usando colchetes. Por exemplo, abaixo deixamos o link da Amazon em vermelho:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Usando Seletores</title>
<style>
a[href="https://www.amazon.com/"] {
color: red;
}
</style>
</head>
<body>
<ol>
<li><a href="https://www.google.com/">Google</a></li>
<li><a href="https://www.amazon.com/">Amazon</a></li>
<li><a href="https://www.facebook.com/">Facebook</a></li>
</ol>
</body>
</html>
Podemos usar CSS para mudar a aparência de um elemento sob certas condições. Por exemplo, para mudar a cor de um botão ao passar o mouse por cima (hover), usamos uma pseudo-classe:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Pseudo-classes</title>
<style>
button {
background-color: red;
width: 200px;
height: 50px;
font-size: 24px;
}
button:hover {
background-color: green;
}
</style>
</head>
<body>
<button>Botão 1</button>
<button>Botão 2</button>
<button>Botão 3</button>
</body>
</html>
Hoje em dia, muitas pessoas acessam sites por meio de dispositivos além de computadores, como smartphones e tablets. É importante garantir que seu site seja legível em todos os dispositivos.
Uma forma de conseguir isso é através do conhecimento sobre o viewport. O viewport é a parte da tela que está visível para o usuário em um determinado momento. Por padrão, muitas páginas da web assumem que o viewport é o mesmo em qualquer dispositivo, o que faz com que muitos sites (especialmente os mais antigos) sejam difíceis de usar em dispositivos móveis.
Uma maneira simples de melhorar a aparência de um site em um dispositivo móvel é adicionar a seguinte linha dentro da head dos arquivos HTML. Essa linha informa ao dispositivo móvel para usar um viewport com a mesma largura do dispositivo que você está usando, em vez de um muito maior:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Outra forma de lidar com diferentes dispositivos é por meio de media queries. Media queries permitem alterar o estilo de uma página com base em como ela está sendo visualizada.
Como exemplo de uma media query, vamos apenas mudar a cor de fundo da tela quando ela for reduzida a um certo tamanho. Indicamos uma media query digitando @media seguido do tipo de consulta entre parênteses:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Tamanho da Tela</title>
<style>
@media (min-width: 600px) {
body {
background-color: red;
}
}
@media (max-width: 599px) {
body {
background-color: blue;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Bem-vindo à página!</h1>
</body>
</html>Nota: As imagens abaixo são representações - em um navegador real, você veria a mudança de cor ao redimensionar a janela.
Tela grande (acima de 600px):
Tela pequena (abaixo de 600px):
Outra maneira de lidar com diferentes tamanhos de tela é usando um atributo CSS chamado flexbox. Isso nos permite fazer com que os elementos se ajustem para a próxima linha se não couberem horizontalmente. Fazemos isso colocando todos os nossos elementos dentro de uma div que chamaremos de container. Em seguida, adicionamos um estilo a essa div especificando que queremos usar um layout flexível para os elementos dentro dela. Também adicionamos alguns estilos extras às divs internas para ilustrar melhor o ajuste automático que ocorre aqui.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Tamanho da Tela</title>
<style>
#container {
display: flex;
flex-wrap: wrap;
}
#container > div {
background-color: green;
font-size: 20px;
margin: 20px;
padding: 20px;
width: 200px;
}
</style>
</head>
<body>
<div id="container">
<div>Algum texto 1!</div>
<div>Algum texto 2!</div>
<div>Algum texto 3!</div>
<div>Algum texto 4!</div>
<div>Algum texto 5!</div>
<div>Algum texto 6!</div>
<div>Algum texto 7!</div>
<div>Algum texto 8!</div>
<div>Algum texto 9!</div>
<div>Algum texto 10!</div>
<div>Algum texto 11!</div>
<div>Algum texto 12!</div>
</div>
</body>
</html>
Além de flexbox, temos também o CSS grid, que permite a criação de contêineres e itens que se ajustam de forma parecida. Dominar pelo menos um deles é extremamente útil. Como existem muitos atributos, é bom manter um recurso salvo para ajudar a memória, este é um bom guia para flexbox.