Crie um site simples usando
HTML, CSS e JavaScript
Este curso contribui com o desenvolvimento de habilidades
para que você possa criar sites ou aplicativos da Web.
Olá,
Seja bem-vindo(a) ao curso Crie um site simples usando HTML, CSS e JavaScript!
Neste curso rápido, 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.
Como este curso está organizado
Este curso é composto por quatro módulos, nos quais você terá as informações fundamentais para trabalhar com o desenvolvimento para a Web, aprendendo a usar HTML, CSS e JavaScript para criar sites ou aplicativos.
Ao final dos módulos há um Quiz para testar seus conhecimentos e, ao final do curso, você fará uma avaliação. Ao ser aprovado(a) poderá imprimir o Certificado de Conclusão.
Competências a serem desenvolvidas
Ao final deste curso, esperamos que você consiga:
- Criar uma página da Web básica usando HTML.
- Aplicar estilos aos elementos da página usando CSS.
- Criar temas usando CSS.
- Adicionar suporte para alternar o tema usando JavaScript.
- Inspecionar o site usando ferramentas de desenvolvedor no navegador.
- Executar o site em seu navegador padrão.
Bons estudos!
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, 10 ou 11.
- Mac: macOS 10.9 ou posterior
- Linux: Ubuntu, Debian, Red Hat, Fedora ou SUSE
Estrutura do minicurso
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/.
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.
4. 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.
Módulo 1
Configurar a estrutura do seu aplicativo Web
Criar uma nova pasta
Você sabia que há diferentes maneiras de criar e gerenciar projetos de site?
Algumas variações ocorrem dependendo das ferramentas específicas que você tem e das preferências da sua organização.
Ao criar um site, é comum que a estrutura do projeto sofra alterações ao longo do tempo, conforme ele se torna mais complicado.
A chave é manter um semblante de organização e há estratégias para ajudar com isso!
Projetos grandes, geralmente, exigem um maior grau de cuidado e atenção para que as muitas pessoas envolvidas possam manter tudo organizado!
Aqui você criará uma estrutura de projeto simples que inclui três arquivos: um HTML, um CSS e um JavaScript.
Você também adicionará uma extensão do Visual Studio Code para simplificar a execução do site no navegador.
Vamos iniciar pela criação de uma nova pasta, seguindo os passos abaixo:
Abra o Visual Studio Code.
Quando você abre o Visual Studio Code, a página inicial é aberta.
Observe que você pode criar um arquivo ou abrir uma pasta.
Você também pode fazer isso acessando Arquivo > Novo Arquivo.
Se não estiver visível, você poderá exibir a janela de Boas-vindas navegando para Ajuda > Boas-vindas.
Como alternativa, selecione Exibir > Paleta de Comandos ou o atalho de teclado Shift + Command + P.
Em seguida, no campo de pesquisa, digite > Ajuda: Boas-vindas.
2. Selecione Abrir pasta na seção Iniciar da Página Inicial ou acesse Pasta > Abrir.
Ao abrir uma pasta, o sistema operacional fornece um botão para criar uma Nova Pasta.
3. Acesse o local onde você deseja criar a pasta e selecione Nova Pasta.
Nomeie a pasta como site-simples.
Criar alguns arquivos
Selecione Arquivo > Novo Arquivo.
Salve o arquivo usando CTRL + S (Windows) ou Command + S (macOS).
Atribua um nome ao arquivo index.html.
Repita as etapas anteriores para criar mais dois arquivos, main.css e app.js.
Quando tiver terminado, a pasta do projeto conterá os seguintes arquivos, compondo seu site da Web:
- index.html
- main.css
- app.js
É possível criar um site todo em um arquivo de texto ou arquivo HTML.
Aqui você está usando:
- Um arquivo HTML para a estrutura da página e para o conteúdo
- Um arquivo CSS para apresentação e aplicação de estilos
- Um arquivo JavaScript para comportamentos e interatividade
Configurar três arquivos ajuda a nos mantermos organizados!
Isso é um exemplo de melhoria progressiva.
Se o JavaScript não estiver habilitado ou não for compatível, o CSS e o HTML ainda funcionarão.
No entanto, se o CSS não funcionar, pelo menos o conteúdo HTML será exibido.
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!
Módulo 2
Adicionar um HTML Básico ao seu aplicativo Web
Adicionar um código HTML
No momento, você tem um arquivo HTML vazio.
Vamos adicionar um pouco de código a ele?
A meta é usar HTML (linguagem de marcação de hipertexto) para descrever a página da Web que o navegador exibirá.
Não seria ótimo ter um modelo inicial?
Você aprenderá a adicionar o conteúdo HTML básico, abrirá a página HTML no navegador e terá seu primeiro contato com as ferramentas de desenvolvedor.
É isso o que veremos a seguir!
Curiosidade
O Visual Studio Code fornece suporte básico para programação HTML logo após a instalação. Há realce de sintaxe, conclusões inteligentes com o IntelliSense e formatação personalizável.
No Visual Studio Code, abra index.html, selecionando o arquivo index.html.
Selecione a página index.html e digite html:5. Depois, clique em Enter.
O código do modelo HTML5 é adicionado ao arquivo.
Edite seu código para que ele fique parecido com o exibido a seguir.
Depois, salve o arquivo com Control + S (Windows) ou Command + S (macOS).
Atenção
Há diferentes versões de HTML – O tipo de documento <!DOCTYPE html> indica que este código é HTML5. Não nos aprofundaremos no significado de todos os elementos HTML, mas apontaremos alguns itens importantes.
A marca meta indica informações de metadados que normalmente não ficarão visíveis para o visualizador, a menos que ele use o próprio navegador para exibir o código-fonte.
Metaelementos ou metamarcas fornecem informações descritivas sobre a página da Web. Por exemplo, eles ajudam os mecanismos de pesquisa a exibir resultados para as pessoas.
O conjunto de caracteres UTF-8 pode parecer insignificante, mas é crucial para estabelecer o modo como os computadores interpretam caracteres. Se estiver ausente, o conjunto de caracteres poderá levar a um comprometimento da segurança.
Há uma grande quantidade de informações de histórico e técnicas por trás do conjunto de caracteres.
O panorama é que esse clichê de texto fornece alguns padrões pertinentes.
Editar o cabeçalho
O título de uma página da Web é exibido na parte superior de uma janela do navegador e é significativo de diferentes maneiras. Por exemplo, o título é utilizado por mecanismos de pesquisa e exibido neles.
Agora, vamos adicionar um título!
Curiosidade
Deste ponto em diante, o botão de reticências (…) indica que o código declarado anteriormente precede ou segue.
Deve haver código suficiente fornecido como contexto para fazer as alterações ou atualizações necessárias para o seu trabalho.
Para estilizar os elementos HTML na página, você pode escrever o código CSS diretamente no cabeçalho do site, que é chamado de CSS interno.
No entanto, separar a estrutura HTML e o estilo CSS é uma prática recomendada.
Ter uma página de CSS separada é chamado de CSS externo.
DICA
O código tende a ser mais fácil de ler quando ele é conciso compartimentalizado.
Você pode usar uma ou mais folhas de estilos externas para atender a várias páginas da Web.
Em vez de atualizar cada página HTML com o CSS duplicado, você pode fazer alterações uma única vez e difundir essas atualizações para todas as páginas dependentes.
No Visual Studio Code, adicione uma linha em branco após o elemento <title>.
Digite link e pressione a tecla Enter (Return).
Atualize o href para main.css e salve o arquivo com Control + S (Windows) ou Command + S (macOS).
Editar o corpo
Vamos começar preenchendo o elemento corpo.
- Adicione um cabeçalho <h1>, parágrafo <p> e crie um item de lista <li>.
- Edite ou copie e cole o seu código para que ele fique conforme demonstrado na imagem.
Curiosidade
Um atributo de ID (usado no <p>) pode ser empregado para estilizar um elemento, enquanto o atributo de classe (usado no <li>) é usado para estilizar todos os elementos da mesma classe.
Cada elemento <li> de item de lista é agrupado em uma lista não ordenada <ul>.