Primeiros passos com HTML
Tags: beginners, programming, html
Published: 2024-02-06 21:52:36

- Neste artigo, explorarei os fundamentos do HTML, uma linguagem essencial no mundo do desenvolvimento web. Ao compreender o HTML, você estará dando os primeiros passos na criação de sites e páginas da web, o que é crucial para qualquer aspirante a desenvolvedor web. O HTML, ou Hypertext Markup Language, é a base sobre a qual toda a estrutura da web é construída. Desde a formatação básica do texto até a criação de links e formulários interativos, o HTML é a linguagem que permite a criação de conteúdo na internet. Entender como escrever e manipular HTML é o primeiro passo para qualquer pessoa interessada em criar sua presença online ou seguir uma carreira no desenvolvimento web. Portanto, vamos mergulhar nos fundamentos do HTML e começar essa jornada emocionante juntos.

## Contextualização
- Quando navegamos na internet, interagimos com uma variedade de páginas web, desde simples blogs até complexas plataformas de comércio eletrônico. Por trás de cada uma dessas páginas está o HTML, ou Hypertext Markup Language. O HTML desempenha um papel crucial na criação e estruturação dessas páginas, sendo a linguagem fundamental da web.
Em sua essência, o HTML é uma linguagem de marcação que define a estrutura e o conteúdo de uma página da web. Ele permite que os desenvolvedores definam elementos como títulos, parágrafos, imagens, links e muito mais, organizando-os em uma hierarquia clara e semântica. Cada elemento é envolvido por tags HTML específicas, que indicam ao navegador como interpretar e exibir o conteúdo.
Em sua essência, o HTML é uma linguagem de marcação que define a estrutura e o conteúdo de uma página da web. Ele permite que os desenvolvedores definam elementos como títulos, parágrafos, imagens, links e muito mais, organizando-os em uma hierarquia clara e semântica. Cada elemento é envolvido por tags HTML específicas, que indicam ao navegador como interpretar e exibir o conteúdo.

## Recursos que eu mais utilizo:
- Existem inúmeras opções disponíveis para aprender HTML online, desde tutoriais gratuitos até cursos completos. Irei listar alguns recursos que eu utilizei e ainda utilizado durante meu aprendizado:

1. O Curso em Vídeo (https://youtu.be/Ejkb_YpuHWs?si=BTxcPcmbSzaiS8sZ) foi um dos primeiros recursos que utilizei e realmente me ajudou a aprender HTML. A abordagem clara e objetiva do curso torna fácil para qualquer um começar do zero e progredir rapidamente. Eu recomendo fortemente este curso para quem está começando sua jornada de aprendizado em HTML.

2. O Mozilla Developer Network (MDN) (https://developer.mozilla.org/en-US/docs/Web/HTML) é uma fonte valiosa de documentação detalhada sobre HTML. Com guias abrangentes, tutoriais claros e referências precisas, o MDN é uma fonte confiável que frequentemente recorro quando tenho dúvidas no desenvolvimento web.

3. Recomendo fortemente acompanhar o trabalho da Rafaella Ballerini. Como desenvolvedora web experiente, ela tem um talento incrível para explicar conceitos complexos de forma simples e acessível. Seu conteúdo é extremamente educativo e inspirador, especialmente para quem está iniciando no mundo do desenvolvimento web. Você pode encontrá-la em seu canal no YouTube (https://www.youtube.com/@rafaellaballerini), onde ela compartilha uma variedade de tutoriais, dicas e insights sobre programação e tecnologia. Vale a pena conferir e se inscrever para receber atualizações sobre seus novos vídeos.

4. É altamente recomendável realizar anotações durante o processo de aprendizado. Com uma quantidade significativa de informações para assimilar, é fácil esquecer detalhes importantes ao longo do caminho. Anotar o que você aprendeu não apenas ajuda a reforçar o conhecimento, mas também fornece um recurso valioso para referência futura.
Ao criar anotações, você pode organizar e consolidar o que aprendeu, destacar conceitos-chave, registrar dúvidas e ideias, e até mesmo criar resumos para revisão rápida. Além disso, se você tiver dúvidas mais tarde, suas anotações servirão como um recurso útil para esclarecê-las.
Portanto, não subestime o poder das anotações no seu processo de aprendizado. Elas são uma ferramenta essencial para ajudá-lo a absorver e reter informações de forma eficaz.

## Estrutura básica HTML:
- A tag `<!DOCTYPE>` declara a versão do HTML a ser utilizado.
a tag `<HTML>` envolve todo o conteúdo da página.
`<html lang="en">` define o idioma que seu site será criado, então se for criar um site em português coloque "pt-br".

- A tag `<head>` envolve todas as informações do site, como as metas, títulos e links.

- A meta tag charset define o conjunto de caracteres como UTF-8, que é um padrão amplamente utilizado para codificar caracteres de diferentes idiomas e caracteres especiais.

- A segunda meta tag `<meta name="viewport"` content="width=device-width, initial-scale=1.0"> é utilizada para controlar a exibićão da página em dispositivos móveis,

- O atributo name especifica o propósito da meta tag, que neste caso é "viewport".

- O atributo "content" define como a largura da janela de visualização "viewport" da página deve ser ajustada.

- `"width=device-width"` indica que a largura da viewport deve ser igual à largura do dispositivo em que a página está sendo exibida.

- `"Initial-scale=1.0"`define o nível de escala inicial da viewport. Um valor de 1.0 significa que a página será exibida sem zoom inicial.

- A tag `<title>` Indica o título da nossa página HTML.

- A tag `<body>` contém todo o conteúdo visível da sua página que será exibida no navegador.
- *Costumo dizer que  a tag `<head>` armazena as configurações do site e a tag `<body>` o conteúdo do site.*

## Elementos HTML mais comuns: 
1. `<h1>` até `<h6>` (títulos):
 - As tags `<h1>` a `<h6>` são usadas para definir diferentes níveis de títulos, com `<h1>` sendo o mais importante e `<h6>` o menos importante em termos de hierarquia de títulos. Embora essas tags tenham tamanhos de fonte diferentes por padrão, é importante destacar que seu propósito principal não é definir o tamanho visual do texto, mas sim indicar a importância semântica do conteúdo.
Para controlar o tamanho visual dos títulos, é recomendável utilizar CSS.
Exemplo:

![Imagem que mostra a tag h1 e h2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it1fofeyjbdvtgamrlwq.png)

2. `<a>` (link):
 - A tag `<a>` é usada para criar links para outras páginas da web, arquivos, seções da mesma página, etc.
Exemplo:

![Imagem que mostra a tag a](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/leikccz03o240mm5dhkr.png)

3. `<img>` (Imagem):
 - A tag `<img>` é usada para inserir imagens na página.
Exemplo: 

![Imagem que mostra a tag img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d70ldds81ffbj20u54pb.png)

4. `<ul>` e `<li>` (Listas Não Ordenadas):
 - As tags `<ul>` e `<li>` são usadas para criar listas não ordenadas
Exemplo:

![Imagem que mostra as tags ul e li](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rehd3tgo5mrymvd8xeed.png)

5. `<ol>` e `<li>` (Listas Ordenadas):
 - As tags `<ol>` e `<li>` são usadas para criar listas ordenadas.
Exemplo:

![Image, que mostra as tags ol e li](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udbavq7asw4e6kkqhwfu.png)

- Estes exemplos abordam apenas algumas das tags HTML mais comuns, mas existem muitas outras disponíveis para uma variedade de finalidades. Se você deseja explorar mais tags HTML e aprender sobre suas funcionalidades, recomendo acessar o link para a documentação completa do HTML no site da Mozilla Developer Network (MDN): Elementos HTML - MDN.
Lá, você encontrará uma lista abrangente de todas as tags HTML disponíveis, bem como informações detalhadas sobre como usá-las corretamente.

## Atributos HTML:
- Atributos HTML são usados para fornecer informações adicionais sobre um elemento e modificar seu comportamento ou aparência. Eles são especificados dentro das tags HTML e geralmente consistem em um nome e um valor, separados por um sinal de igual (=). 

## Como utilizar esses atributos ?
### Modificar comportamentos ou aparência:
- Os atributos podem ser usados para controlar o comportamento ou a aparência de um elemento HTML.
Eles podem afetar coisas como estilo, interatividade, funcionalidade e semântica do elemento.

## Exemplos de Atributos:
1. class: O atributo class é usado para associar um ou mais elementos a uma classe CSS, permitindo que você aplique estilos a eles. 
Exemplo: 
`html <p class="destaque">Este é um parágrafo de destaque.</p>`

2. id: O atributo id é usado para fornecer uma identificação única para um elemento na página, que pode ser usada para referenciá-lo em scripts ou estilos CSS. 
Exemplo: 
`html <div id="container">Conteúdo do container</div>`

3. src: O atributo src é usado para especificar o caminho do arquivo de origem, como uma imagem, um vídeo ou um arquivo de áudio, a ser incorporado no documento. 
Exemplo: 
`html <img src="imagem.jpg" alt="Descrição da Imagem">`

4. Outros atributos comuns incluem href para links, alt para texto alternativo em imagens, title para dicas de ferramentas e muitos outros.

## conclusão:
Neste artigo, mergulhamos nos fundamentos do HTML, uma linguagem essencial no desenvolvimento web. A compreensão do HTML é crucial para qualquer pessoa interessada em criar sites e páginas da web, sendo o primeiro passo fundamental para aspirantes a desenvolvedores web.
Exploramos como o HTML, ou Hypertext Markup Language, é a base sobre a qual toda a estrutura da web é construída. Desde a formatação básica do texto até a criação de links e formulários interativos, o HTML é a linguagem que permite a criação de conteúdo na internet.
Ao longo do artigo, discutimos diversos recursos úteis para aprender HTML, como o Curso em Vídeo, a documentação do Mozilla Developer Network (MDN) e o conteúdo da desenvolvedora Rafaella Ballerini. Além disso, enfatizamos a importância de realizar anotações durante o processo de aprendizado, fornecendo uma ferramenta valiosa para referência futura.
Exploramos a estrutura básica do HTML, elementos comuns, como títulos, links e imagens, e também discutimos atributos HTML e como eles são usados para fornecer informações adicionais e modificar elementos.
Lembre-se de praticar sempre que possível, pois é através da prática que você realmente entenderá o significado de cada atributo e tag. A teoria é importante, mas a aplicação prática é o que solidifica o conhecimento e permite que você desenvolva sua habilidade em criar e manipular elementos HTML. Portanto, não tenha medo de experimentar, errar e aprender com seus próprios projetos. Quanto mais você praticar, mais confiante e competente se tornará no uso do HTML e no desenvolvimento web como um todo. Aproveite cada oportunidade para explorar novos conceitos, desafiar-se e expandir suas habilidades. O aprendizado contínuo e a prática diligente são essenciais para se tornar um desenvolvedor web de sucesso.