Front-end com Vue 3

Aparência

Criando um Arquivo HTML Básico ​

Criar um arquivo HTML básico é um excelente ponto de partida para quem está começando a aprender desenvolvimento web. Vamos detalhar o processo passo a passo.

Preparação do Ambiente ​

Antes de começar, é importante ter um ambiente de trabalho adequado. Isso significa escolher um editor de texto ou um Ambiente de Desenvolvimento Integrado (IDE) onde você possa escrever seu código. Para iniciantes, um editor de texto simples, como o Notepad (Windows) ou o TextEdit (Mac), é suficiente. No entanto, se preferir uma ferramenta mais avançada, o Visual Studio Code é uma excelente escolha, pois oferece recursos adicionais que podem facilitar a codificação, como destaque de sintaxe e autocompletar.

Veja como configurar

1. Criar um Novo Arquivo ​

  • Abra o seu editor de texto ou IDE escolhido.
  • Crie um novo arquivo e salve-o com a extensão .html. Por exemplo, meu-primeiro-arquivo.html. Esta extensão indica que o arquivo contém código HTML e permite que os navegadores web o interpretem corretamente.

2. Estrutura Inicial ​

Todo documento HTML começa com uma estrutura básica que inclui elementos fundamentais para definir a página. Digite ou copie o seguinte código para o seu arquivo:

html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body></body>
</html>
  • <!DOCTYPE html> declara o tipo de documento e a versão do HTML.
  • <htm lang="pt-BR"> é a tag raiz que engloba todo o conteúdo da página.
  • <head> contém metadados e links para scripts e folhas de estilo.
  • <body> é onde o conteúdo visível da página é colocado.

3. Título da Página ​

O título da página é exibido na aba do navegador e é importante para SEO (Search Engine Optimization). Para adicionar um título:

  • Dentro da tag <head>, adicione a tag <title> com o título desejado da sua página. Por exemplo:
html
<title>Minha Primeira Página</title>

4. Corpo da Página ​

Agora, vamos adicionar conteúdo ao corpo da página:

  • Dentro da tag <body>, adicione um cabeçalho e um parágrafo. Por exemplo:
html
<h1>Bem-vindo ao Mundo do Desenvolvimento Web!</h1>
<p>Este é o meu primeiro arquivo HTML.</p>
  • Aqui, <h1> define um cabeçalho principal, e <p> é usado para texto paragrafado.

Visualização no Navegador ​

Para ver como sua página aparece:

  • Salve as alterações no seu arquivo .html.
  • Abra o arquivo no navegador de sua escolha, arrastando o arquivo para uma nova aba do navegador ou clicando com o botão direito no arquivo e escolhendo "Abrir com" seu navegador.

Experimentação ​

Encorajo você a experimentar com o seu arquivo HTML:

  • Modifique o título da página e o conteúdo dentro de <body>.
  • Adicione mais parágrafos, cabeçalhos ou mesmo outras tags HTML como <a> para links ou <img> para imagens.
  • Salve as alterações e atualize a página no navegador para ver como as alterações afetam a visualização.

Praticar e experimentar são fundamentais para aprender desenvolvimento web. Cada modificação que você faz oferece insights valiosos sobre como o HTML estrutura e apresenta o conteúdo na web.