Página Web Pessoal em HTML: Construa sua Página Web

Introdução

Bem-vindo ao Projeto de Página Web Pessoal em HTML! Neste laboratório, você construirá um site completo de página única do zero, utilizando os blocos de construção fundamentais da web: HTML. Este projeto prático é projetado para iniciantes e irá guiá-lo através das tags e conceitos essenciais necessários para criar uma página web estruturada e rica em conteúdo.

Você aprenderá a:

Definir a estrutura básica de um documento HTML.
Usar títulos (headings) e parágrafos para formatar texto.
Organizar informações com listas.
Incorporar imagens e criar hiperlinks.
Estruturar dados com tabelas e criar um formulário de contato simples.

Um servidor web e estilos básicos (CSS) foram pré-configurados para você. Seu foco principal será escrever HTML limpo e semântico. Você pode visualizar seu trabalho em tempo real alternando para a aba Web 8080 no ambiente do laboratório. Vamos começar!

Configurar a estrutura do documento com head e body

Nesta etapa, você configurará a estrutura básica do seu documento HTML. Cada página HTML tem uma estrutura padrão que inclui as tags <!DOCTYPE>, <html>, <head> e <body>.

<!DOCTYPE html>: Esta declaração define o tipo de documento como HTML5.
<html>: Este é o elemento raiz de uma página HTML.
<head>: Este elemento contém metainformações sobre o documento, como seu título e links para folhas de estilo (stylesheets). O conteúdo dentro de <head> não é exibido na página em si.
<title>: Define o título da aba do navegador.
<body>: Este elemento contém o conteúdo visível da página que é exibido no navegador.

Primeiro, abra o arquivo index.html localizado no diretório ~/project usando o explorador de arquivos à esquerda. O arquivo está atualmente vazio. Copie e cole o seguinte código em index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- Content will go here in the next steps -->
    </div>
  </body>
</html>

Após colar o código, salve o arquivo (Ctrl+S ou Cmd+S). Agora, clique na aba Web 8080 no topo da interface do laboratório. Você deverá ver uma página em branco, mas observe que o título da aba do navegador agora é "My Personal Webpage".

Adicionar texto formatado usando títulos e parágrafos

Nesta etapa, você adicionará os primeiros conteúdos visíveis à sua página web usando títulos (headings) e parágrafos. Estas são tags fundamentais para estruturar texto.

<h1>: Esta é uma tag de título de nível superior, geralmente usada para o título principal de uma página. Mecanismos de busca usam títulos para indexar a estrutura e o conteúdo de suas páginas web.
<p>: Esta é a tag de parágrafo, usada para blocos de texto.

Vamos adicionar seu nome como o título principal e uma breve biografia. No seu arquivo index.html, encontre o comentário  dentro de <div class="container"> e substitua-o pelo seguinte código:

<h1>John Doe</h1>
<p>
  Welcome to my personal webpage! I am a passionate web developer learning the
  fundamentals of HTML. I enjoy creating clean and efficient code to build
  beautiful and functional websites.
</p>

Seu arquivo index.html completo agora deve se parecer com isto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>John Doe</h1>
      <p>
        Welcome to my personal webpage! I am a passionate web developer learning
        the fundamentals of HTML. I enjoy creating clean and efficient code to
        build beautiful and functional websites.
      </p>
    </div>
  </body>
</html>

Salve o arquivo e atualize a aba Web 8080. Agora você verá seu nome e biografia exibidos na página.

h1 and p tag

Inserir listas para habilidades ou interesses

Nesta etapa, você usará listas para organizar informações, como suas habilidades ou interesses. O HTML oferece dois tipos principais de listas: listas não ordenadas (<ul>) para itens sem uma ordem específica, e listas ordenadas (<ol>) para itens numerados. Cada item em uma lista é definido com a tag <li> (list item).

Vamos adicionar uma seção para suas habilidades usando uma lista não ordenada. Adicione o seguinte código abaixo da tag de parágrafo (<p>) que você adicionou na etapa anterior.

<h2>My Skills</h2>
<ul>
  <li>HTML & CSS</li>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Problem Solving</li>
</ul>

Este código adiciona um título de segundo nível (<h2>) para nomear a seção e uma lista não ordenada (<ul>) com quatro itens de lista (<li>).

Após adicionar o código, o <body> do seu arquivo index.html deve ficar assim:

<body>
  <div class="container">
    <h1>John Doe</h1>
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>
  </div>
</body>

Salve o arquivo e verifique a aba Web 8080 para ver sua nova seção de habilidades com uma lista com marcadores (bulleted list).

Adicionar links e imagens com atributos

Nesta etapa, você tornará sua página mais dinâmica adicionando uma imagem e um hiperlink.

<img>: A tag de imagem é usada para incorporar uma imagem. É uma tag de fechamento automático (self-closing tag) e requer dois atributos essenciais:
- src: Especifica o caminho para o arquivo de imagem.
- alt: Fornece texto alternativo para a imagem, o que é importante para acessibilidade e para quando a imagem não pode ser exibida.
<a>: A tag de âncora é usada para criar hiperlinks. O atributo href especifica o URL para onde o link aponta.

Primeiro, vamos adicionar uma foto de perfil. O script de configuração já colocou uma imagem de placeholder em images/profile.png. Adicione a tag <img> logo abaixo da tag <h1>.

Em seguida, vamos adicionar um link para um site externo, como um perfil do GitHub. Colocaremos isso em uma nova seção "Find Me Online". Adicione o seguinte código abaixo da sua lista de habilidades:

<!-- Add this img tag below the h1 tag -->
<img src="images/profile.png" alt="A placeholder profile picture" />

<!-- Add this new section below the skills list -->
<h2>Find Me Online</h2>
<p>
  You can find my work on
  <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
</p>

O atributo target="_blank" no link instrui o navegador a abrir o link em uma nova aba.

O <body> do seu arquivo index.html agora deve estar estruturado assim:

<body>
  <div class="container">
    <h1>John Doe</h1>
    <img src="images/profile.png" alt="A placeholder profile picture" />
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>

    <h2>Find Me Online</h2>
    <p>
      You can find my work on
      <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
    </p>
  </div>
</body>

Salve o arquivo e atualize a aba Web 8080. Você verá a imagem de perfil e um link clicável.

Criar tabela para agenda e formulário para contato

Nesta etapa final de conteúdo, você adicionará duas estruturas mais complexas: uma tabela para exibir uma agenda e um formulário para permitir que os visitantes entrem em contato com você.

<table>: Define uma tabela.
- <tr>: Define uma linha na tabela.
- <th>: Define uma célula de cabeçalho (negrito e centralizada por padrão).
- <td>: Define uma célula de dados.
<form>: Define um formulário HTML para entrada do usuário.
- <label>: Define um rótulo para um elemento <input>.
- <input>: Define um campo de entrada. O atributo type pode ser text, email, password, etc.
- <textarea>: Define uma área de entrada de texto com várias linhas.
- <button>: Define um botão clicável.

Primeiro, adicione uma tabela para uma agenda semanal. Adicione este código abaixo da seção "Find Me Online":

<h2>My Schedule</h2>
<table>
  <tr>
    <th>Day</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Web Development Practice</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>Project Building</td>
  </tr>
  <tr>
    <td>Friday</td>
    <td>Review and Refactor</td>
  </tr>
</table>

Em seguida, adicione um formulário de contato. Adicione este código abaixo da tabela que você acabou de criar:

<h2>Contact Me</h2>
<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Send Message</button>
</form>

Salve o arquivo e visualize a aba Web 8080. Sua página pessoal agora está completa com uma agenda e um formulário de contato!

table and form tag

Resumo

Parabéns! Você construiu com sucesso uma página pessoal completa usando HTML.

Neste laboratório, você praticou o uso dos elementos HTML mais fundamentais para estruturar um documento e apresentar conteúdo. Você aprendeu a:

Criar o esqueleto básico de uma página HTML com <html>, <head> e <body>.
Formatar texto com títulos (<h1>, <h2>) e parágrafos (<p>).
Organizar itens em uma lista não ordenada (<ul>, <li>).
Incorporar uma imagem (<img>) e criar um hiperlink (<a>).
Estruturar dados em uma <table> e coletar entrada do usuário com um <form>.

Você agora tem uma base sólida em HTML. Sinta-se à vontade para experimentar mais, alterando o conteúdo, adicionando mais páginas ou explorando tags HTML mais avançadas. Continue o ótimo trabalho em sua jornada de desenvolvimento web!