Crie um site simples usando HTML, CSS e JavaScript

Crie um site simples usandoHTML, CSS e JavaScript

Introdução

Seja bem-vindo(a) ao curso Crie um site simples usando HTML, CSS e JavaScript!

Neste curso, você terá as informações fundamentais para trabalhar com o desenvolvimento Web, aprendendo a usar HTML, CSS e JavaScript para criar sites ou aplicativos.

Com isso, você reunirá conhecimentos sobre os componentes básicos de um website e as ferramentas que poderá usar para iniciar o desenvolvimento Web para trabalhar digitalmente, de forma eficaz e segura.

Pré-requisitos

Para fazer esse curso você precisará de:

Visual Studio Code, que é um editor de código de plataforma cruzada.
Para baixar o Visual Studio Code, acesse www.code.visualstudio.com/

Familiaridade com, pelo menos, uma linguagem de programação e uma linguagem de marcação, como HTML.
Um computador com um dos sistemas operacionais instalados:

Windows: Windows 7, 8 ou 10
Mac: macOS 10.9 ou posterior
Linux: Ubuntu, Debian, Red Hat, Fedora ou SUSE.

Introdução ao curso

Este curso apresentará as noções iniciais para que você possa criar sites ou aplicativos da Web, que se parecem e funcionam como aplicativos nativos, mas que são executados em seu navegador de Internet.

Você conhecerá os componentes básicos de um site e as ferramentas que você pode usar para iniciar o desenvolvimento Web.

Você usará HTML, CSS e JavaScript juntos, para construir um site simples e usará as ferramentas de desenvolvedor no navegador, para entender o que está acontecendo.

Se você estiver interessado em iniciar o desenvolvimento Web pode se deparar com uma variedade de opções disponíveis no mercado. Os conhecimentos obtidos neste curso serão importantes para que você possa ter um contexto para tomar decisões sobre como escolher estruturas JavaScript para construir seu site.

Vamos iniciar fazendo a instalação do Visual Studio Code.

Bons estudos!

Instalação do Visual Studio Code

Para iniciar, vamos baixar o Visual Studio Code em seu computador.

Em seu navegador, acesse o endereço www.code.visualstudio.com/.

Instalação do Visual Studio Code

www.code.visualstudio.com/.

2.Clique em Download e escolha seu sistema operacional: Windows, Mac ou Linux.

3.Abra o arquivo em seu computador e siga os passos recomendados para concluir a Instalação.

Após a instalação, o Visual Studio Code estará pronto para uso!

O que há em uma página da Web?

É impressionante o que é possível realizar com um site nos dias de hoje!

Em uma página da Web, a linguagem de marcação de hipertexto (HTML) fornece seu conteúdo, as folhas de estilo em cascata (CSS) definem a aparência da página e o JavaScript é usado para fornecer interatividade com o usuário, ou seja, a sua lógica de negócios.

O conteúdo, estilo e lógica de negócios são separados em arquivos HTML, CSS e JavaScript, respectivamente.

Um princípio de design na programação moderna é a separação de interesses. Entre as muitas razões para separar interesses, uma é a simplicidade e a reutilização. Por exemplo, ao estilizar os elementos usando CSS, você pode aplicar estilos a todos os elementos de uma página, independentemente da complexidade da página, em vez de codificar a aparência separadamente em cada elemento.

Cenário

Imagine que você é um desenvolvedor da Web e lhe pedem para tornar o site de sua empresa mais atraente para uma gama mais ampla de clientes. Você decide adicionar suporte para temas claros e escuros (que veremos, em detalhes, no módulo 3).

Você cria um site simples de prova de conceito para demonstrar o suporte para temas usando CSS e escreve uma função JavaScript para alternar o tema.

Quando concluído, o site simples ficará assim, quando o tema escuro for selecionado.

Instalar extensões ou pacotes

Você pode estender a funcionalidade do Visual Studio Code usando o Marketplace de extensões.

Tenha em mente que essas são funcionalidades desenvolvidas pela comunidade.

Você pode instalar extensões individualmente em seu editor ou instalar várias ao mesmo tempo, com a linha de comando.

Para o desenvolvimento para Web, tudo que você precisa agora é da open-in-browser.

Essa extensão ajuda você a abrir rapidamente o site no navegador padrão, em vez de copiar e colar a URL do arquivo no navegador.

Para instalar essa extensão

Selecione o ícone de Extensões na Barra de Atividade (painel esquerdo).
Digite “open in” (abrir no) na barra de pesquisa.
Selecione open in browser (abrir no navegador 2.0.0), publicada pela TechER, e escolha Instalar.
A extensão é instalada!

A instalação e a configuração demoram um pouco, mas elas só precisam ser realizadas uma única vez.

Agora estamos prontos para criar um site!

Abrir no navegador

Você pode visualizar sua página da Web localmente, abrindo o arquivo HTML em um navegador.

Em vez de um endereço de site que começa com https://, seu navegador aponta para o caminho de arquivo local.

Por exemplo, o caminho pode ser semelhante ao seguinte: file://Users/username/Desktop/public/index.html.

Para visualizar usando o Visual Studio Code, selecione index.html e, em seguida, Abrir no Navegador Padrão ou use o atalho de teclado Alt + B.

A página da Web é aberta no navegador padrão.

Atenção

Se estiver com problemas, verifique se você está, selecionando diretamente no ícone ou texto do nome do arquivo.

Exibir a página usando ferramentas de desenvolvedor

Você pode inspecionar uma página da Web usando as ferramentas de desenvolvedor em seu navegador.

Abra as ferramentas para desenvolvedores.
- Se o seu navegador é o Microsoft Edge, pressione o atalho de teclado de Ferramentas para Desenvolvedores (FN + F12). Como alternativa, exiba Configurações e mais com Alt + X e selecione Ferramentas de Desenvolvedor.
- Se o seu navegador é o Google Chrome, pressione o atalho de teclado das Ferramentas para Desenvolvedores F12 ou (Option + Command + I).
Selecione a guia Elementos.
Role sobre os elementos HTML e selecione-os.
Abra os triângulos de divulgação.

A guia Elementos das ferramentas para desenvolvedores mostra o DOM (Modelo de Objeto do Documento) como renderizado no navegador.

Durante a depuração, geralmente, é importante ver como o navegador interpreta o código-fonte.

Inspecionar a página em um navegador fornece todos os tipos de informações úteis e pode ajudá-lo a solucionar problemas.

Você também pode exibir detalhes de CSS com o inspetor, mas isso você verá mais adiante neste curso.

Adicionar um tema escuro

Para o tema escuro, defina as configurações como preparação para a próxima unidade, na qual você habilitará a alternância de temas na página da Web.

Para configurar o suporte a um tema escuro execute os seguintes passos:

Adicione algumas constantes à raiz da página no arquivo CSS.

Dica

O seletor de :root representa o elemento <html> na página HTML.

Para esse tipo de tarefa, uma melhor prática é definir um conjunto de variáveis CSS globais no elemento :root.

Aqui, você define três variáveis de cor anexadas à raiz da página.

No final do arquivo CSS, adicione o seletor de dark-theme e atualize o seletor de light-theme.

No código anterior, você deve definir algumas variáveis novas, que são bg e fontColor, para especificar a cor da tela de fundo e a cor da fonte.

Use a palavra-chave var para especificar as variáveis que serão usadas como valores de propriedade.

Você definiu os valores anteriormente no seletor de :root.

Em seguida, após o seletor de :root no arquivo CSS, adicione o seguinte código para substituir o seletor de body atual:

O seletor * é universal e se aplica a todos os elementos da página (exceto quando um seletor de elemento mais específico o substitui).

Aqui, você o usa com o objetivo de definir a propriedade de cor (color) padrão para todos os elementos de página.

Para as propriedades color e background, especifique as variáveis definidas nos seletores de tema claro e escuro.

Remova o seletor de #msg em seu CSS, para que a mesma fonte possa ser aplicada a todos os elementos.

Para exibir o tema escuro, edite manualmente o tema padrão no elemento <body> como tema escuro (dark-theme) e exiba a página no navegador.

Edite o elemento <body> para alternar o padrão de volta para o tema claro.

Vincular ao JavaScript

Assim como o CSS, você pode adicionar JavaScript diretamente à página HTML, mas recomendamos a você não fazer isso.

Por exemplo, você pode criar um alerta de pop-up adicionando <script>alert('Hello World')</script> em qualquer lugar no corpo.

A marca de script <script> nos permitirá vincular a um arquivo JavaScript externo.

No Visual Studio Code, digite script:src e pressione a tecla Enter (Return).

Ajuste o elemento de script para que tenha a aparência a seguir. Coloque-o logo após a lista.

Curiosidade

O elemento de script pode ser colocado no <head> ou em outro lugar no <body>.

No entanto, colocar <script> no final da seção <body> permite que todo o

conteúdo da página seja exibido na tela primeiro, carregando o script em seguida.

Adicionar tolerância de falhas

No arquivo HTML, adicione o elemento <noscript>, que pode ser usado para mostrar uma mensagem, caso o JavaScript seja desativado.

Salve seu trabalho pressionando o atalho de teclado Control + S (Windows) ou Command + S (macOS).

Dica

Usar o elemento <noscript> é um exemplo de tolerância a falhas ou degradação gradual.

Podemos detectar quando um recurso não é compatível

ou não está disponível e nos planejar para essa eventualidade.

Configurar o modo estrito

Quando você começa a usar o JavaScript, o foco inicial, geralmente, é trabalhar com números, matemática, manipulação de texto, datas e armazenamento de informações.

Às vezes, o JavaScript faz suposições sobre o tipo de dados que você insere. Atribuição, matemática ou igualdade lógica podem gerar resultados inesperados.

O JavaScript tenta ser amigável e ele tenta fazer com que o código funcione e forneça uma solução, mesmo que o resultado venha a ser um erro.

Para combater essas deficiências, você pode ativar o modo estrito, que reduz erros silenciosos, melhora o desempenho, fornece mais avisos e menos recursos não seguros.

No Visual Studio Code, abra o arquivo app.js e digite: ‘use strict’

Dica

Geralmente, você pode omitir o ponto e vírgula em JavaScript, mas é uma boa prática

revisar quando ele é necessário, antes de tomar qualquer decisão sobre isso.

Adicionar um botão

Você precisa elaborar alguma forma de permitir que o usuário alterne entre o tema claro e escuro em sua página da Web.

Nesse cenário, isso é feito com um elemento de botão, que é o que veremos a seguir!

Na página HTML, adicione um elemento <button>.
Coloque o botão no final da lista dentro de um elemento <div>.

No arquivo CSS, adicione um seletor para o botão.

Para tornar as cores do botão diferentes das cores gerais dos temas claro e escuro, defina as propriedades color e background-color no seletor de botão.

Esse seletor, específico do botão, substitui o seletor universal (*) usado para aplicar cores de fonte ao arquivo CSS.

Em seguida, adicione algumas regras para moldar o tamanho, a forma, a aparência e o posicionamento do botão.

O CSS a seguir cria um botão arredondado à direita do título da página.

Para melhorar a aparência do botão, adicione um seletor de pseudoclasse, btn:focus, após o seletor de botão.

Ao definir a regra de outline-style como none, você elimina um contorno retangular quando o botão é selecionado (recebe foco).

Em seguida, atualize o CSS para os temas claro e escuro.

Defina algumas novas variáveis, btnBg e btnFontColor, para especificar as cores da tela de fundo e da fonte do botão.

Adicionar um manipulador de eventos

Para fazer com que o botão realize alguma tarefa ao ser pressionado, você precisará de um manipulador de eventos no arquivo JavaScript.

Para um botão, você precisa de um manipulador do evento click. A função do manipulador de eventos é executada quando o evento click ocorre.

Antes de adicionar o manipulador de eventos, você precisa de uma referência para o botão.

No arquivo JavaScript, use document.querySelector para obter a referência do botão.

Em seguida, adicione o ouvinte e o manipulador do evento click.

No código a seguir, você adiciona um ouvinte para o evento click.

A função passada para o ouvinte de eventos é seu manipulador de eventos real.

No código anterior, você usou o método toggle para alternar o elemento para a classe dark-theme.

Isso aplica, automaticamente, os estilos de tema escuro em vez do tema claro. No entanto, o rótulo do botão também precisa ser atualizado para mostrar o tema correto, portanto, você precisa adicionar uma instrução if para verificar o tema atual e atualizar o rótulo do botão.

Confira como deve ser o código JavaScript completo:

Dica

É uma convenção JavaScript usar letras concatenadas para nomes de variáveis

com mais de uma palavra – por exemplo, a variável className.

Mensagem de console

Você pode criar uma mensagem oculta que não aparecerá na sua página da Web. No entanto, o que você escreve no console aparecerá nas ferramentas de desenvolvedor do navegador.

Usar mensagens do console pode ser muito útil para ver o resultado do código.

Adicione uma chamada para console.log após a instrução if, mas dentro do ouvinte de eventos.

No Visual Studio Code, quando estiver no arquivo JavaScript, você pode usar o preenchimento automático do log digitando console.log e pressionando Enter (Return).
Você pode definir uma cadeia de caracteres de texto com aspas simples ou duplas ao redor do texto.

Abrir no navegador

Assim como antes, mesmo que você estivesse apenas editando o arquivo app.js, para visualizar as alterações, você deveria selecionar o arquivo index.html.

Para visualizar, selecione index.html e Abrir no Navegador Padrão. A página da Web é aberta no navegador padrão.

Clique no novo botão Escuro, para alternar para o tema escuro.

Verifique se tudo está correto.

Abra as ferramentas para desenvolvedores.
- No Microsoft Edge, o atalho de teclado para Ferramentas de Desenvolvedor é F12 (FN + F12).
  Como alternativa, você pode exibir Configurações e mais com Alt + X e selecionar Ferramentas de Desenvolvedor.
- No Chrome do macOS, o atalho de teclado para o Console nas Ferramentas do desenvolvedor é Option + Command + J (F12 também funciona).
Selecione a guia Estilos.
Selecione a guia Elementos.
Selecione o elemento <body>.
Na guia Estilos, examine o tema aplicado.
Caso o tema atual seja escuro, os estilos de dark-theme estão aplicados.
Verifique se o tema escuro está selecionado.
Selecione a guia Console para ver a mensagem console.log "nome da classe atual: light-theme dark-theme".