Neste laboratório, você aprenderá como criar sua primeira página HTML usando o WebIDE (semelhante ao VS Code), um editor de código poderoso e popular para desenvolvimento web.
Este tutorial abrangente cobre aspectos chave, como configurar o WebIDE, gerar um modelo boilerplate HTML5, adicionar conteúdo básico à sua página web e visualizar o resultado em um navegador web. Ao seguir estas instruções passo a passo, você obterá experiência prática nos fundamentos do desenvolvimento web e desenvolverá uma base sólida para criar páginas web interativas e estruturadas.
Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 89%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.
Criar um Novo Arquivo HTML
O WebIDE do LabEx fornece um ambiente de desenvolvimento moderno, semelhante ao VS Code, para tarefas de codificação. O WebIDE é bem adequado para projetos de desenvolvimento web, incluindo HTML, CSS e JavaScript.
Para começar, abra o WebIDE clicando na aba "WebIDE" na interface do LabEx. O WebIDE mostra um explorador de arquivos à esquerda e um editor de código à direita. Há também um terminal e algumas outras ferramentas na parte inferior.
Explorador de Arquivos: Exibe a estrutura de diretórios do projeto, onde você pode criar, editar e gerenciar arquivos. O diretório de trabalho padrão é ~/project.
Editor de Código: Fornece um editor de texto para escrever e editar código. Você pode criar novos arquivos, abrir arquivos existentes e visualizar as alterações no código.
Terminal: Oferece uma interface de linha de comando para executar comandos shell, instalar pacotes e gerenciar arquivos. Você pode executar comandos diretamente no terminal. O diretório de trabalho padrão é ~/project.
Nesta etapa, você aprenderá como criar um novo arquivo HTML no WebIDE. HTML (HyperText Markup Language) é a linguagem de marcação padrão para criar páginas web. Toda página web começa com um arquivo HTML.
No WebIDE, siga estas etapas para criar um novo arquivo HTML:
Clique no menu "File" (Arquivo)
Selecione "New File" (Novo Arquivo)
Salve o arquivo com o nome index.html
Alternativamente, você pode usar o atalho de teclado Ctrl+N para criar um novo arquivo e, em seguida, salvá-lo como index.html.
Ao nomear arquivos HTML, lembre-se destas regras importantes:
Use letras minúsculas
Use a extensão de arquivo .html
Evite espaços nos nomes dos arquivos
Use nomes descritivos como index.html, about.html, etc.
Vamos verificar se o arquivo foi criado através do terminal:
ls ~/project
Exemplo de saída:
index.html
O arquivo agora está pronto para você começar a adicionar conteúdo HTML nas próximas etapas. A extensão .html informa aos navegadores web que este é um documento HTML.
Se você estiver familiarizado com o terminal, também pode criar o arquivo usando o seguinte comando:
touch ~/project/index2.html
Saiba mais sobre comandos Linux para aprimorar suas habilidades no terminal.
Gerar Template Boilerplate HTML5
Nesta etapa, você aprenderá como gerar um modelo boilerplate HTML5 padrão no WebIDE. Um boilerplate é um modelo padrão que fornece a estrutura básica para um documento HTML.
No WebIDE, você pode gerar rapidamente um modelo HTML5 usando um atalho embutido. Siga estas etapas:
Abra seu arquivo index.html
Digite ! (ponto de exclamação)
Pressione a tecla Tab
Isso gerará automaticamente um modelo HTML5 completo com todos os elementos essenciais:
Dicas: Você pode copiar e colar o código do modelo em seu arquivo index.html se o atalho não funcionar.
Vamos analisar os componentes-chave deste modelo HTML5:
<!DOCTYPE html> declara que este é um documento HTML5
<html lang="en"> é o elemento raiz com especificação de idioma
<head> contém metadados sobre o documento
<meta charset="UTF-8"> especifica a codificação de caracteres
<meta name="viewport"> garante a renderização adequada em dispositivos móveis
<title> define o título da página exibido na aba do navegador
<body> é onde o conteúdo da sua página será adicionado
Você pode modificar o <title> para dar à sua página um nome significativo.
Adicionar Conteúdo Básico à Página HTML
Nesta etapa, você aprenderá como adicionar conteúdo básico à sua página HTML usando diferentes elementos HTML. HTML usa tags para estruturar e exibir conteúdo em uma página web.
Abra seu arquivo index.html no WebIDE e substitua a seção <body> vazia pelo seguinte conteúdo:
Dicas: Copie e cole o trecho de código em seu arquivo index.html para adicionar conteúdo. Substitua o conteúdo existente <body></body>. Aprenderemos mais sobre elementos HTML nos próximos laboratórios.
<body>
<h1>Bem-vindo à Minha Primeira Página Web</h1>
<p>
Este é um parágrafo de texto. HTML permite que você crie diferentes tipos de
conteúdo facilmente.
</p>
<h2>Meus Hobbies Favoritos</h2>
<ul>
<li>Programação</li>
<li>Leitura</li>
<li>Viajar</li>
</ul>
<h2>Links Rápidos</h2>
<a href="https://www.example.com">Visitar o Site Exemplo</a>
</body>
Vamos analisar os elementos HTML usados:
<h1> e <h2> são tags de cabeçalho (h1 é o cabeçalho principal, h2 é um subtítulo)
<p> é usado para parágrafos de texto
<ul> cria uma lista não ordenada (com marcadores)
<li> representa itens de lista
<a> cria um hiperlink para outra página web
Esses elementos básicos ajudam você a estruturar e apresentar conteúdo em sua página web. Experimente com diferentes tags para ver como elas mudam a aparência e o layout do seu conteúdo.
Algumas dicas adicionais para iniciantes:
Sempre feche suas tags HTML
Use conteúdo significativo e descritivo
Indente seu código para melhor legibilidade
Visualizar e Renderizar HTML no Navegador
Nesta etapa, você aprenderá como visualizar e renderizar sua página HTML em um navegador web. A VM do LabEx fornece um recurso de visualização de navegador integrado no WebIDE.
Para visualizar seu arquivo HTML:
No WebIDE, clique no botão "Go Live" no canto inferior direito.
Uma nova aba do navegador será aberta com sua página HTML renderizada.
Ou, você pode clicar na aba "Web 8080" para abrir a visualização.
Isso irá automaticamente:
Iniciar um servidor web
Abrir sua página HTML em uma janela de visualização
Fornecer atualizações em tempo real conforme você modifica seu código
Dicas: A VM do LabEx hospeda a visualização na porta 8080. Você pode compartilhar o link de visualização com outras pessoas para mostrar seu trabalho. Após a parada da sua VM do laboratório, o link de visualização não funcionará mais.
Coisas importantes a observar:
A página renderiza com diferentes tamanhos de cabeçalho
A lista aparece como marcadores
O link é clicável
O título da página aparece na aba do navegador
Resumo
O laboratório guiou os alunos pelos passos iniciais do desenvolvimento HTML, focando na criação de um novo arquivo HTML e na compreensão da estrutura fundamental da criação de páginas web. Ao seguir as instruções passo a passo, os participantes ganharam experiência prática no uso do WebIDE como ferramenta de desenvolvimento e aprenderam as habilidades essenciais necessárias para começar a construir páginas web com HTML5.
