Neste laboratório, você aprenderá como criar sua primeira página web HTML com uma imagem, seguindo um processo passo a passo. O laboratório guia você através da configuração de um diretório de projeto estruturado, do download de um recurso de imagem, da criação de um documento HTML básico e da inserção de uma imagem na página web. Você obterá experiência prática na organização de arquivos de desenvolvimento web, no uso de tags de imagem HTML e na compreensão de como as imagens são exibidas em páginas web.
Ao final deste laboratório, você terá criado uma página HTML simples, mas funcional, que demonstra habilidades fundamentais de desenvolvimento web, incluindo gerenciamento da estrutura do projeto, manipulação de imagens e criação básica de documentos HTML. Essa abordagem prática fornece uma base sólida para iniciantes que desejam começar sua jornada no desenvolvimento web.
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 97%. Recebeu uma taxa de avaliações positivas de 98% dos estudantes.
Configurar a Estrutura do Projeto
Nesta etapa, você configurará a estrutura do projeto para criar sua primeira página HTML com uma imagem. Uma estrutura de projeto bem organizada é essencial para manter seus arquivos de desenvolvimento web limpos e gerenciáveis.
A estrutura do projeto já foi configurada para você pela configuração da VM (Virtual Machine). Verifique o diretório my-first-webpage:
ls my-first-webpage
Essa estrutura ajuda você a separar diferentes tipos de arquivos:
images/ armazenará seus recursos de imagem
css/ pode ser usado para arquivos de estilo (embora não o usemos neste laboratório)
Vamos verificar a estrutura do diretório:
tree
Exemplo de saída:
.
├── css
└── images
Ótimo! Agora você configurou uma estrutura de projeto limpa e organizada que facilitará o gerenciamento de seus arquivos de desenvolvimento web.
Baixar e Organizar os Recursos de Imagem
Nesta etapa, você fará o download de uma imagem para usar em sua primeira página web HTML. Usaremos uma imagem simples, disponível gratuitamente na internet, e a salvaremos no diretório images que você criou anteriormente.
Primeiro, navegue até o diretório do seu projeto:
cd ~/project/my-first-webpage
Vamos verificar se a imagem foi baixada corretamente:
ls images
Exemplo de saída:
landscape.jpg
Se você não vir o arquivo de imagem, pode ser necessário baixá-lo seguindo os comandos abaixo. Ignore esta etapa se você vir o arquivo de imagem no diretório images.
images/landscape.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1170x780, components 3
A imagem agora está pronta para ser usada em sua página HTML. Baixamos uma imagem de paisagem que funcionará bem para demonstrar a inserção de imagens em HTML.
Criar um Documento HTML Básico
Nesta etapa, você criará um documento HTML básico que servirá como a base para sua primeira página web. HTML (HyperText Markup Language) é a linguagem de marcação padrão para criar páginas web.
Navegue até o diretório do seu projeto:
cd ~/project/my-first-webpage
Abra o WebIDE e crie um novo arquivo chamado index.html:
touch index.html
Agora, vamos adicionar a estrutura HTML básica. Abra o arquivo index.html no WebIDE e insira o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
</body>
</html>
Vamos detalhar os componentes-chave deste documento HTML:
<!DOCTYPE html> declara que este é um documento HTML5
<html> é o elemento raiz da página HTML
<head> contém informações meta sobre o documento
<body> contém o conteúdo visível da página
<h1> é um título principal
<p> é um parágrafo
Inserir Imagem na Página HTML
Nesta etapa, você aprenderá como inserir a imagem de paisagem que você baixou em sua página HTML. A tag <img> é usada para incorporar imagens em HTML.
Abra seu arquivo index.html no WebIDE e modifique o conteúdo para incluir a imagem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
<h2>Beautiful Landscape</h2>
<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
</body>
</html>
Vamos detalhar os atributos da tag de imagem:
src: Especifica o caminho para o arquivo de imagem
alt: Fornece texto alternativo para acessibilidade
width: Define a largura de exibição da imagem (em pixels)
Visualizar e Compreender a Exibição da Imagem
Nesta etapa, você aprenderá como visualizar sua página HTML e entender como as imagens são exibidas em navegadores web. Como o ambiente LabEx fornece um WebIDE com um recurso de visualização integrado, você poderá ver sua página web instantaneamente.
Para visualizar sua página web, procure o botão "Go Live" no WebIDE.
Clique na pasta my-first-webpage na página, ela abrirá automaticamente o arquivo index.html no modo de visualização.
Isso iniciará uma visualização ao vivo do seu arquivo index.html, mostrando a imagem da paisagem que você adicionou.
Vamos explorar alguns conceitos-chave sobre a exibição de imagens em HTML:
Caminho da Imagem
O atributo src especifica o caminho relativo para sua imagem:
O atributo style é usado para definir o tamanho de exibição da imagem. Esta é uma propriedade CSS que permite controlar a largura e a altura da imagem.
max-width: 100%; garante que a imagem não exceda a largura do contêiner
height: auto; mantém a proporção da imagem
Não se preocupe com CSS por enquanto, vamos cobri-lo em laboratórios posteriores.
Verifique se sua imagem está sendo exibida corretamente na visualização do WebIDE. Você deve ver:
A imagem da paisagem
Uma largura de 500 pixels
Texto alternativo claro e legível
Resumo
Neste laboratório, os participantes aprenderam a criar sua primeira página web HTML, configurando um ambiente de projeto estruturado e trabalhando com imagens. O processo começou com o estabelecimento de uma estrutura de diretórios limpa usando comandos de terminal, criando pastas dedicadas para imagens e CSS, o que ajuda a manter os arquivos de desenvolvimento web organizados.
O laboratório guiou os alunos através do download de uma imagem de paisagem de amostra do Unsplash usando wget, demonstrando habilidades práticas em gerenciamento de arquivos e aquisição de recursos. Ao organizar sistematicamente os arquivos do projeto e recuperar um recurso de imagem, os participantes adquiriram conhecimento fundamental na preparação de projetos de desenvolvimento web e no tratamento de ativos de imagem para páginas HTML.
