100 Dias de Código - Dia 1: Minha primeira página HTML

Bem-vindos ao primeiro dia do meu desafio de 100 dias codando! O objetivo de hoje foi entender os conceitos básicos de HTML e criar minha primeira página web. Este projeto reflete a prática dos fundamentos de estrutura de um documento HTML, incluindo o uso de elementos como 'head', 'body', 'div', 'h1-h4', 'p', 'ul', 'li' e 'a', além de incorporar CSS básico.

Objetivo do Dia 1

O objetivo era simples:

  • Aprender os fundamentos do HTML.
  • Criar uma página básica que contém elementos de texto, links, e uma imagem.
  • Aplicar um estilo básico usando CSS para personalizar a aparência.

Conteúdo da Página

A página que criei inclui:

  1. Um título e uma breve introdução sobre mim.
  2. Uma seção "Sobre", descrevendo minha jornada como estudante de Análise e Desenvolvimento de Sistemas.
  3. Uma lista com detalhe pessoais, incluindo hobbies e interesses.

Estrutura HTML

Aqui estão os principais componentes da minha primeira página:

  • Tags HTML: Utilizei tags padrão como:
  1. < !DOCTYPE html >: Declara o tipo de documento, informando ao navegador que o arquivo está em HTML5.
  2. < html >: Elemento raiz que contém todo contéudo HTML da página. O atributo lang="pt-BR" define o idioma da página como português do Brasil.
  3. < head >: Contém metadados e links para recursos externos (como CSS e scripts). Esses dados não são visíveis diretamente na página.
  4. < meta charset="UTF-8" >: Define o conjunto de caracteres usado na página, permitindoo uso de acentos e caracteres especiais.
  5. < meta name="viewport" contente="width=device-width, initial-scale=1.0" >: Ajusta a escala da página para melhorar a visualização em dispositivos móveis.
  6. < title >: Define o título da página que aparece na aba do navegador.
  7. < style >: Permite incluir regras de CSS para estilizar os elementos HTML.
  8. < body >: Contém o conteúdo visível da página, como texto, imagens, e links.
  9. < div >: Um contêiner genérico usado para agrupar outros elementos HTML e aplicar estilos ou organizar o layout.
  10. < h1 >: Cabeçalho principal da página, usado para tulos importantes. Existem até 6 níveis de cabeçalhos (h1 e h6), sendo h1 o mais importante.
  11. < p >: Define um paragrafo de texto.
  12. < img >: Insere uma imagem na página. O atributo src indica a URL da imagem, e o atributo alt fornece um texto alternativo que aparece caso a imagem não carregue.
  13. < ul >: Cria uma lista não ordenada (com marcadores).
  14. < li >: Define um item dentro de uma lista (ul ou ol).
  15. < a >: Cria um link. O atributo href especifica o URL para o qual link aponta, e o texto entre as tags é clicável.
  • Estilo CSS: Defini o estilo da página diretamente no arquivo HTML com uma paleta de cores escura e links em destaque. (Falo mais sobre CSS nos próximos dias).

Próximos Passos

Nos próximos dias, continuarei a explorar mais sobre desenvolvimento web, aprendendo novos conceitos e aplicando-os ao longo dos 100 dias de código.

Como visualizar o Projeto

  1. Faça o clone deste repositório: git clone https://github.com/KefilweLourenco/Minha-primeira-pagina-em-HTML.git

  2. Abra o arquivo index.html em seu navegador.

Contribuição

Se você tiver sugestões ou quiser compartilhar dicas, sinta-se à vontade para abrir uma issue ou enviar um pull request.

Vamos juntos nessa jornada de aprendizado!