Curso de HTML Básico – Aula 02 | Configurando o ambiente de desenvolvimento

Nesta aula, aprenderemos como configurar o ambiente de desenvolvimento e instalar um editor de código, uma ferramenta essencial para desenvolvedores web. Em síntese, um editor de código oferece recursos avançados de edição, como realce de sintaxe, sugestões de código e facilita o trabalho com projetos de programação. Existem várias opções disponíveis, mas nesta aula, vamos focar em instalar um editor de código popular chamado Visual Studio Code.

Baixando o Visual Studio Code

1. Abra o navegador da web e acesse o site oficial do Visual Studio Code (https://code.visualstudio.com).
2. Clique no botão de download para o sistema operacional que você está usando (Windows, macOS ou Linux).
3. Aguarde o download ser concluído.

Instalando o Visual Studio Code

Windows:

1. Localize o arquivo de instalação baixado (geralmente está na pasta “Downloads”).
2. Dê um clique duplo no arquivo de instalação (.exe) para iniciar o processo de instalação.
3. Siga as instruções do assistente de instalação para configurar o Visual Studio Code no seu sistema.
4. Após a conclusão da instalação, o Visual Studio Code estará pronto para ser usado.

macOS:

1. Localize o arquivo de instalação baixado (geralmente está na pasta “Downloads”).
2. Dê um clique duplo no arquivo de instalação (.dmg) para abrir a imagem do disco.
3. Arraste o ícone do Visual Studio Code para a pasta “Aplicativos” para instalar o programa.
4. Agora, você pode abrir o Visual Studio Code a partir da pasta “Aplicativos” ou a partir do Launchpad.

Linux:

1. Dependendo da distribuição Linux, o processo de instalação pode variar.
2. No geral, é possível instalar o Visual Studio Code utilizando gerenciadores de pacotes, como o apt-get no Ubuntu ou o dnf no Fedora.
3. Consulte a documentação oficial do Visual Studio Code para obter instruções detalhadas sobre a instalação no seu sistema específico.

Configurações Iniciais do ambiente de desenvolvimento

1. Abra o Visual Studio Code.
2. Explore as diferentes seções da interface do usuário, como o editor de texto, barra de menu e painel de atividades.
3. Personalize o editor de acordo com suas preferências, ajustando temas, atalhos de teclado e extensões.
4. Instale extensões adicionais úteis para desenvolvimento web, como “HTML CSS Support” ou “Auto Close Tag”.

Enfim, agora você aprendeu como instalar o Visual Studio Code, um poderoso editor de código que será seu aliado durante o desenvolvimento de projetos web. Lembre-se de explorar os recursos disponíveis, personalizar o ambiente de acordo com suas necessidades e continuar aprendendo novas técnicas para aprimorar suas habilidades de programação.

Configuração do Ambiente de Desenvolvimento para Criar e Visualizar Páginas HTML

Agora vamos aprender como configurar o ambiente para criar e visualizar páginas HTML. Configurar corretamente o ambiente de desenvolvimento é essencial para começar a criar páginas da web de forma eficiente. Abordaremos a instalação de um editor de código, a configuração de um servidor local e a visualização das páginas no navegador.

Configurando um Servidor Local:

1. Para visualizar páginas HTML localmente, é recomendado configurar um servidor local. Isso permite que você teste e visualize as páginas no navegador sem precisar enviá-las para um servidor remoto.
2. Existem várias opções de servidores locais disponíveis, mas uma opção popular é o Apache, que pode ser instalado como parte do pacote XAMPP (para Windows, macOS e Linux) ou do MAMP (para macOS).
3. Faça o download do pacote apropriado para o seu sistema operacional e siga as instruções de instalação fornecidas pelo XAMPP ou MAMP.
4. Após a instalação, inicie o servidor Apache.

Criando um Arquivo HTML:

1. Abra o editor de código e crie um novo arquivo em branco.
2. Salve o arquivo com a extensão “.html”, por exemplo, “pagina.html”.
3. Dentro do arquivo HTML, adicione o código HTML básico, incluindo as tags , e .
4. Adicione elementos HTML, como títulos, parágrafos, imagens, links e outros elementos conforme necessário.
5. Salve o arquivo HTML.

Visualizando a Página criada em seu ambiente de desenvolvimento no Navegador:

1. Abra um navegador da web de sua escolha, como Google Chrome, Mozilla Firefox ou Microsoft Edge.
2. Digite “localhost” na barra de endereço do navegador.
3. Se o servidor local estiver configurado corretamente, você verá uma página de boas-vindas do servidor.
4. Para visualizar a página HTML que você criou, digite “localhost/pagina.html” (substitua “pagina.html” pelo nome do seu arquivo HTML) na barra de endereço do navegador.
5. A página HTML será carregada e exibida no navegador.

Por fim, você aprendeu a configurar o ambiente para criar e visualizar páginas HTML. Ao instalar um editor de código e configurar um servidor local, ou seja, você está pronto para criar e testar suas páginas da web no seu próprio computador. Enfim, lembre-se de praticar e explorar as possibilidades do HTML para criar sites incríveis.