CS50CS50x em Português - Aula 8 - HTML, CSS, JavaScript
CS50
Da linha de comando para a web 0:43
A aula 8 do CS50 marca a virada dos exercícios de linha de comando para os aplicativos web e móveis que usamos todos os dias. A partir de agora, o curso passa a explicar como a internet realmente funciona e apresenta três linguagens centrais: HTML, usada para estruturar páginas web, CSS, usada para estilizá-las, e JavaScript, a única linguagem de programação de fato entre as três, ainda que sintaticamente parecida com C e Python.
Redes, ARPANET e roteadores 1:30
A internet nasce da interconexão de redes menores, sejam elas domésticas, de campus ou corporativas. Sua origem remonta a 1969, com a ARPANET, um projeto do Departamento de Defesa dos Estados Unidos que ligava supercomputadores geograficamente distantes, começando pela UCLA e expandindo-se logo para Harvard e o MIT. Hoje o mundo está repleto de roteadores, computadores cujo papel é direcionar dados em qualquer direção, e essa ideia foi ilustrada com uma encenação em que bolsistas de ensino representaram roteadores enviando um pacote de Phyllis para Brian, mostrando que existem muitos caminhos possíveis entre dois pontos e que o trajeto escolhido nem sempre é o mais curto.
TCP/IP e o endereço único de cada dispositivo 5:33
Todos os dispositivos da internet seguem o protocolo TCP/IP, um conjunto de convenções comparável aos protocolos humanos, como apertar a mão ao se apresentar. O IP, ou Internet Protocol, garante a cada computador um endereço numérico único, exibido em notação decimal pontilhada, com quatro números de 0 a 255, totalizando 32 bits no padrão IPv4, o que permite cerca de 4 bilhões de endereços. Como esse número está se tornando insuficiente diante da quantidade de dispositivos e da internet das coisas, o mundo caminha lentamente para o IPv6, que usa 128 bits.
Portas e a entrega confiável com TCP 10:31
Além do endereço IP, os pacotes carregam números de porta, que identificam qual serviço está sendo usado, como a porta 80 para HTTP e a porta 443 para HTTPS. O TCP também numera partes de um arquivo grande, como uma imagem dividida em quatro pedaços, permitindo que o destinatário verifique se recebeu tudo e peça o reenvio do que faltar. Assim, o IP identifica computadores de forma única, enquanto o TCP garante a entrega confiável e permite que vários serviços usem o mesmo dispositivo ao mesmo tempo.
DNS, DHCP e a estrutura das URLs 16:32
Como seria impraticável decorar endereços IP, o DNS, ou Sistema de Nomes de Domínio, traduz nomes como google.com ou harvard.edu para seus endereços IP correspondentes, funcionando de forma hierárquica, com servidores locais consultando servidores raiz quando necessário. Já o DHCP resolve outro problema prático, atribuindo automaticamente a cada dispositivo seu endereço IP, o endereço do roteador local e dos servidores DNS assim que ele se conecta a uma rede. Por fim, o HTTP, o protocolo de transferência de hipertexto, padroniza o pedido e o envio de páginas web, e uma URL como https://www.example.com é composta por partes reconhecíveis, incluindo o domínio de nível superior, como .com, .edu ou até .io, que originalmente é apenas o código de um país.
Verbos e mensagens do protocolo HTTP 25:30
Dentro dos envelopes que trafegam entre navegador e servidor existem mensagens textuais padronizadas, não código de programação. O HTTP suporta verbos como GET e POST. Quando Phyllis pede uma página, o envelope contém GET, a barra do caminho desejado, a versão do HTTP e o host solicitado. O servidor responde com sua própria versão do HTTP, um código de status numérico e o tipo de conteúdo enviado, como HTML, JPEG ou GIF, o que serve de dica para o navegador sobre o que vem a seguir.
Usando o curl para ver cabeçalhos 29:00
O programa curl, que significa connect URL, funciona como um navegador sem interface gráfica e permite enviar e receber esses envelopes diretamente pelo terminal do cs50.dev. Com o comando curl -i seguido do endereço, é possível ver apenas os cabeçalhos de resposta de um site, como harvard.edu, sem carregar o conteúdo visual. A resposta 200 OK indica que tudo funcionou, e junto dela aparecem informações como a data da resposta e o tipo de conteúdo, por exemplo text/html.
Códigos de status e redirecionamentos 30:30
Além do 200 OK, existem outros códigos importantes. O 301 significa movido permanentemente e funciona como uma placa de desvio, dizendo ao navegador para ir a outro endereço, como quando a versão insegura http do site de Harvard redireciona automaticamente para a versão https. O 404 indica arquivo não encontrado, como ocorre ao tentar acessar harvard.edu/cats, uma página que não existe. Os códigos da faixa 400 geralmente indicam erro do usuário, os da faixa 500 indicam problema no servidor, e o curioso 418 é uma brincadeira de Primeiro de Abril sem função real. Um exemplo divertido mostrado foi o domínio safetyschool.org, mantido por décadas apenas para redirecionar visitantes, via código 301, diretamente para yale.edu.
Ferramentas de desenvolvedor no navegador 35:31
Os navegadores modernos, como o Chrome, trazem ferramentas de desenvolvedor acessíveis pelo menu Inspecionar, que mostram os elementos da página, um console de mensagens e a aba de rede com todas as requisições HTTP feitas. Ao visitar safetyschool.org, por exemplo, aparecem 61 requisições, entre elas a resposta 301 movido permanentemente. Ao visitar harvard.edu/cats, aparece a resposta 404 não encontrada logo na primeira requisição, confirmando o que o curl já havia mostrado.
O HTML como linguagem de marcação 39:32
O HTML, ou Hypertext Markup Language, não é uma linguagem de programação, mas serve apenas para dizer ao navegador o que exibir na tela. O código de um site como o de Stanford é enviado como uma cópia completa ao navegador, que o lê de cima para baixo e da esquerda para a direita para montar a página. Usando as ferramentas de desenvolvedor, é possível inspecionar qualquer elemento, como a palavra Stanford na página inicial, e até editar temporariamente essa cópia local, embora isso não altere o site real, apenas a versão vista naquele momento no próprio navegador.
Estrutura básica de um arquivo HTML 43:00
Todo arquivo HTML atual, na versão 5, começa com a marca DOCTYPE HTML e segue com elementos organizados em tags de abertura e fechamento, como html, head, title e body. Cada elemento pode ter atributos, como lang igual a en, que modificam seu comportamento padrão, formando pares chave-valor semelhantes aos usados em dicionários. Foi criado um arquivo de exemplo chamado hello.html com um título e um corpo simples, servido pelo comando http-server dentro do Codespace, já que a porta padrão 80 e 443 já estão ocupadas pelo próprio ambiente do VS Code na nuvem, sendo usada então a porta 8080 para exibir o conteúdo no navegador.
A página como uma árvore na memória 50:31
O professor retoma a analogia da Semana 5 sobre árvores para explicar como o navegador interpreta um arquivo HTML. Todo o documento é representado por um nó raiz, o elemento html, que se divide em head e body. Dentro do head fica a tag title com seu texto, e dentro do body fica o conteúdo visível. O navegador lê o arquivo de cima para baixo, da esquerda para a direita, e usa algo equivalente a malloc para alocar cada nó na memória, montando essa estrutura de dados como uma árvore.
Parágrafos exigem tags próprias 53:01
Depois do intervalo, é criado o arquivo paragraphs.html com três blocos de texto gerados por inteligência artificial apenas para preencher espaço. Ao colar o texto diretamente no body, os três parágrafos aparecem colados em um único bloco, porque o navegador ignora espaços em branco e quebras de linha, dando no máximo um espaço entre as palavras. A solução é usar a tag p de abertura e fechamento em cada parágrafo, o que faz o navegador inserir automaticamente o espaçamento correto entre eles depois de recarregar a página.
Cabeçalhos, listas e tabelas 56:31
Para organizar títulos de seções, é apresentada a tag h1 até h6, do maior e mais negrito ao menor, criando uma hierarquia semântica de importância no conteúdo. Em seguida, no arquivo list.html, mostra-se que uma lista de palavras como foo, bar e baz também aparece como texto corrido até que se use a tag ul com itens li dentro, gerando uma lista com marcadores; trocando ul por ol, a lista passa a ser numerada automaticamente. Depois disso, no arquivo table.html, é montada uma tabela usando table, tr para cada linha e td para cada célula, resultando em um layout parecido com um teclado numérico de telefone, e um exemplo pronto, favorites0.html, mostra uma tabela mais completa com thead, tbody e th, exibindo respostas de um formulário do Google preenchido pela turma.
Imagens e vídeos incorporados 1:04:00
No arquivo image.html, a tag img com o atributo src igual a bridge.png insere a imagem da ponte na página, ocupando a tela em tamanho grande. É adicionado o atributo alt com o texto Universidade de Harvard, que serve tanto para leitores de tela quanto para aparecer caso a imagem não carregue. Observa-se que a tag img não tem tag de fechamento, por ser um elemento vazio. Em video.html, a tag video recebe uma tag source apontando para video.mp4 com o tipo MP4, e os atributos controls e muted são explicados como formas de habilitar os botões de reprodução e de iniciar o vídeo sem som por padrão.
Hiperlinks e o risco de phishing 1:09:32
Em link.html, escrever apenas o texto harvard.edu ou até a URL completa não cria um link clicável, porque o HTML exige a tag a com o atributo href apontando para o endereço desejado, colocando entre a abertura e o fechamento da tag o texto que o usuário verá sublinhado em azul. A partir disso, discute-se um risco de segurança: o texto visível do link pode dizer uma coisa enquanto o href aponta para outro endereço, como exibir harvard.edu mas levar a yale.edu, sem que o usuário perceba a menos que olhe o endereço mostrado no canto inferior da tela. Essa técnica é a base dos ataques de phishing, em que um site falso imita um site real, como o do PayPal ou de um banco, para roubar nome de usuário, senha ou dados de cartão de crédito. A aula termina explicando como o servidor foi aberto: o comando http-server iniciou um servidor web na porta 8080 dentro do Codespace, acessível pela aba Portas do terminal caso a aba do navegador seja fechada por acidente.
Parâmetros em URLs e o verbo GET 1:15:00
Depois do endereço básico de um site, uma URL pode carregar pares de chave e valor, chamados parâmetros HTTP, separados por um ponto de interrogação e por "e comerciais" quando há mais de um. É assim que uma busca no Google funciona: ao pesquisar "gatos", o navegador monta uma URL como google.com/search?q=gatos, onde search é o caminho no servidor e q=gatos é o parâmetro enviado. Removendo todo o restante do rastreamento que o Google adiciona, essa forma curta ainda funciona perfeitamente, mostrando que o método por trás disso é o mesmo GET usado desde os exemplos anteriores com envelopes e cabeçalhos HTTP.
Construindo um formulário de busca próprio 1:18:00
Usando apenas HTML, é possível criar um frontend que imita o Google sem ter nenhum banco de dados de gatos ou cachorros por trás. Isso se faz com uma tag form contendo um input de nome "q" e um botão de envio. Ao definir a ação do formulário para apontar para https://www.google.com/search com método GET, o próprio Google passa a receber a busca digitada, provando que o "trabalho difícil" fica no backend do Google enquanto o frontend é simples. A partir daí, pequenos ajustes deixam a experiência mais parecida com um site real: mudar o tipo do input para caixa de pesquisa, trocar o texto do botão para "Pesquisa Google", desativar o preenchimento automático com autocomplete="off", usar autofocus para que o cursor já apareça na caixa ao carregar a página, e adicionar um placeholder como "query" para orientar o usuário sobre o que digitar.
Expressões regulares para validar entradas 1:22:31
As expressões regulares, ou regex, são uma notação para descrever padrões de texto, usada não só na web mas também em Python e outras linguagens. Nelas, um ponto representa qualquer caractere, o asterisco significa "zero ou mais vezes", o mais significa "uma ou mais vezes", o ponto de interrogação significa "zero ou uma vez", e chaves com número indicam repetição exata. Usando o atributo pattern em um input HTML, é possível exigir, por exemplo, que o usuário digite algo no formato nome@dominio.tld, testado com o exemplo malan@harvard.edu. HTML já oferece um atalho pronto, o input do tipo email, embora a expressão regular real usada pelos navegadores para validar e-mails seja bem mais complexa do que essa versão simplificada. É importante lembrar, porém, que essas validações rodam no navegador do usuário e podem ser facilmente burladas abrindo as ferramentas de desenvolvedor e alterando o HTML local, então nunca se deve confiar apenas nelas para segurança, um paralelo direto aos riscos de injeção de SQL vistos antes.
Validando HTML no site do W3C 1:28:33
A ferramenta validator.w3.org, mantida pelo grupo que padroniza HTML, permite colar o código de uma página e verificar se todas as tags estão corretamente abertas e fechadas, sem erros de sintaxe, mesmo que o resultado visual ainda pareça simples ou desorganizado.
Introdução ao CSS e às tags semânticas 1:29:32
O CSS, ou Cascading Style Sheets, é a segunda linguagem apresentada e cuida da aparência do site, como cores, tamanhos de fonte e alinhamento, enquanto o HTML cuida apenas da estrutura. O CSS também usa pares chave-valor, mas chamados de propriedades, escritos entre chaves com ponto e vírgula, e pode ser inserido direto num atributo style, numa tag style no cabeçalho, ou em um arquivo separado ligado por uma tag link. No exemplo de uma página simples para "John Harvard", propriedades como font-size e text-align foram aplicadas primeiro em cada parágrafo, depois simplificadas usando divs no lugar de parágrafos e um único text-align: center na tag body, aproveitando o efeito de "cascata" que propaga o estilo aos elementos filhos. Para tornar a página mais compreensível a mecanismos de busca, tags semânticas como header, main e footer substituem divs genéricas, sinalizando quais partes são mais importantes. Por fim, entidades HTML, como o código para o símbolo de copyright, permitem inserir caracteres especiais de forma correta, e o vídeo aponta que misturar CSS diretamente no HTML mistura dados com apresentação, motivando a separação do estilo em um arquivo próprio.
Seletores CSS e classes reutilizáveis 1:39:32
Você reduz a página aos elementos header, main e footer, e move os estilos para dentro de uma tag style usando seletores. Ao escrever body, header, main ou footer seguidos de chaves, você aplica pares chave-valor como text-align: center ou font-size: large diretamente a essas tags. Mas isso não é reutilizável, então você aprende a criar classes CSS, palavras-chave prefixadas com um ponto, como .centered, .large, .medium e .small, que funcionam como um conjunto de propriedades que podem ser aplicadas a qualquer tag HTML, de forma parecida com criar suas próprias funções em Scratch, C ou Python.
Arquivo CSS separado e Bootstrap 1:43:03
Você move todo o conteúdo da tag style para um arquivo próprio, home.css, e liga esse arquivo ao HTML com uma tag link e o atributo rel indicando que é uma folha de estilo. Isso não muda a aparência, mas organiza melhor o código. A partir daí você conhece o conceito de framework, uma biblioteca de código de terceiros, usando o Bootstrap como exemplo. Ao adicionar uma tag link apontando para uma CDN (Content Delivery Network) e aplicar as classes table e table-striped à tabela de favorites1.html, a tabela feia de dados do Google Forms passa a ter listras brancas e cinzas, parecendo uma tabela de um site profissional, tudo isso sem alterar o HTML original, apenas reaproveitando classes CSS já escritas por outra pessoa.
Estilizando links e ferramentas do desenvolvedor 1:46:31
Usando o exemplo do link para Harvard, você aprende a mudar a cor do link com color: red ou o código hexadecimal #FF0000, remover o sublinhado padrão com text-decoration: none, e criar um efeito visual ao passar o mouse usando o pseudo-seletor a:hover. As ferramentas de desenvolvedor do navegador, na aba Elementos, mostram todo o CSS aplicado a um elemento selecionado, permitindo ligar e desligar propriedades ou até testar mudanças de cor temporárias direto no navegador. Por fim, você vê como dar um ID único a um elemento, como Harvard, e usar o seletor #Harvard para mirar exatamente naquela tag, distinguindo IDs de classes pela ausência do ponto e presença do hash.
Introdução ao JavaScript e à árvore DOM 1:51:00
JavaScript é apresentado como a linguagem que torna as páginas interativas, rodando no navegador do cliente mas também cada vez mais usada em servidores. Sua força está na capacidade de alterar em tempo real a árvore de memória da página, chamada Document Object Model ou DOM. O exemplo dado é a caixa de entrada de e-mail: antigamente era preciso recarregar a página inteira para ver novas mensagens, enquanto hoje o JavaScript busca novos dados periodicamente e adiciona novos nós à árvore, como novas linhas de tabela, sem recarregar tudo.
Sintaxe básica: condicionais, variáveis e laços 1:53:03
A sintaxe de JavaScript é comparada a C: chaves para blocos de código, indentação apenas por estilo, e estruturas if, else if, else idênticas às de C. Variáveis são declaradas com let, sem especificar tipo, e podem ser incrementadas com += ou ++. Laços for e while true funcionam como em C. Você também aprende onde inserir o código: uma tag script pode ir no head, mas isso pode causar uma condição de corrida se a página ainda não existir; por isso é comum colocar o script no final do body.
Criando a função greet com formulários 1:56:01
No arquivo hello.html, você cria um formulário com um campo de texto de ID name e um botão de envio, usando o atributo onsubmit para chamar uma função chamada greet quando o formulário é enviado. Dentro da tag script no head, a função greet usa document.querySelector para pegar o elemento com ID name, acessa seu value, e exibe uma janela de alerta dizendo "olá" seguido do nome digitado. É preciso adicionar return false para impedir que o navegador tente enviar o formulário a um servidor.
Eventos, addEventListener e convenções 2:00:31
JavaScript funciona por eventos, como clicar, arrastar ou soltar uma tecla, de forma parecida com os blocos de evento do Scratch. No exemplo hello2.html, em vez de usar onsubmit no HTML, o script no final da página usa document.querySelector para obter uma referência ao formulário e addEventListener para escutar o evento submit, chamando uma função anônima que executa o alerta. Esse padrão é útil para projetos finais, como menus suspensos ou elementos clicáveis. Por convenção, a comunidade JavaScript prefere aspas simples às duplas, apenas para digitar menos usando a tecla Shift.
Organizando o código JavaScript na página 2:04:02
Antes de avançar, é mostrada outra convenção: em vez de colocar o script no fim do body, pode-se deixá-lo no topo da página usando um "event listener" que escuta o evento DOMContentLoaded, garantindo que o código só rode depois que toda a árvore do DOM (a estrutura da página na memória) estiver carregada. Em seguida, esse mesmo código é movido para um arquivo separado, como hello.js, mostrando que o comportamento é idêntico, apenas mais organizado.
Alterando a página em tempo real com hello5 2:06:00
No exemplo hello5.html, uma caixa de texto tem um listener para a tecla sendo soltada (key up). Uma variável chamada input aponta para essa caixa, e outra chamada name aponta para um parágrafo na página. A cada tecla digitada, o código verifica se o valor digitado não é vazio e, usando uma sintaxe de crases parecida com as f-strings do Python, atualiza o innerHTML do parágrafo para dizer "olá" seguido do nome digitado, voltando ao padrão quando o campo fica vazio. Isso demonstra como o JavaScript pode mudar o HTML (o DOM) diretamente, sem recarregar a página.
Mudando cores com botões e o camelCase 2:09:00
No exemplo background.html, três botões com IDs red, green e blue escutam cliques e alteram a propriedade style.backgroundColor do body. Aparece aí o "camelCase", convenção do JavaScript em que hífens do CSS (como background-color) são substituídos por letras maiúsculas no meio da palavra, já que o hífen em JavaScript é interpretado como operador de subtração.
Efeitos piscantes, autocompletar, menus e localização 2:11:32
O antigo efeito da extinta tag blink é recriado com setInterval, alternando a visibilidade do body entre "hidden" e "visible" a cada 500 milissegundos. Em autocomplete.html, um arquivo enorme chamado large.js guarda mais de 100 mil palavras, e o código percorre esse array a cada tecla digitada para montar dinamicamente uma lista de sugestões, do mesmo jeito que buscadores como o Google fazem. O Bootstrap é apresentado com menus que se transformam em um ícone de hambúrguer em telas estreitas, graças ao JavaScript embutido nele. Por fim, o exemplo geolocation.html usa a propriedade navigator.geolocation e a função getCurrentPosition para obter latitude e longitude do dispositivo, que são conferidas no Google Maps. A aula termina com um vídeo dos bastidores da equipe de professores gravando os exemplos anteriores da aula.
AI-generated summary. It can be wrong or incomplete - check anything that matters against the original.
