Primeiros passos com HTML

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:

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.
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.
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.
É 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:

<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:

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

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

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

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

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:

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>
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>
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">
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.