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.
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.
A página que criei inclui:
- Um título e uma breve introdução sobre mim.
- Uma seção "Sobre", descrevendo minha jornada como estudante de Análise e Desenvolvimento de Sistemas.
- Uma lista com detalhe pessoais, incluindo hobbies e interesses.
Aqui estão os principais componentes da minha primeira página:
- Tags HTML: Utilizei tags padrão como:
- < !DOCTYPE html >: Declara o tipo de documento, informando ao navegador que o arquivo está em HTML5.
- < 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.
- < 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.
- < meta charset="UTF-8" >: Define o conjunto de caracteres usado na página, permitindoo uso de acentos e caracteres especiais.
- < 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.
- < title >: Define o título da página que aparece na aba do navegador.
- < style >: Permite incluir regras de CSS para estilizar os elementos HTML.
- < body >: Contém o conteúdo visível da página, como texto, imagens, e links.
- < div >: Um contêiner genérico usado para agrupar outros elementos HTML e aplicar estilos ou organizar o layout.
- < 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.
- < p >: Define um paragrafo de texto.
- < 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.
- < ul >: Cria uma lista não ordenada (com marcadores).
- < li >: Define um item dentro de uma lista (ul ou ol).
- < 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).
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.
-
Faça o clone deste repositório: git clone https://github.com/KefilweLourenco/Minha-primeira-pagina-em-HTML.git
-
Abra o arquivo index.html em seu navegador.
Se você tiver sugestões ou quiser compartilhar dicas, sinta-se à vontade para abrir uma issue ou enviar um pull request.