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:

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:

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

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

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

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

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.