DEV Community

Douglas Costa
Douglas Costa

Posted on

<HTML>

HTML, ou HyperText Markup Language, é uma linguagem de marcação usada para criar a estrutura e organizar o conteúdo de páginas da web. É a linguagem base para a construção de sites e outras aplicações web.

O HTML permite que os desenvolvedores definam elementos e tags que representam diferentes partes de uma página da web. Esses elementos podem incluir títulos, parágrafos, imagens, links, formulários, tabelas e muito mais.

Os elementos HTML são compostos por tags de abertura e fechamento, que envolvem o conteúdo desejado. Por exemplo, a tag <h1> é usada para definir um título de nível 1, enquanto a tag <p> é usada para criar um parágrafo de texto.

As tags HTML podem ter atributos, que fornecem informações adicionais sobre os elementos. Por exemplo, a tag <img> tem o atributo src, que especifica o caminho da imagem a ser exibida.

Ao criar um documento HTML, você pode adicionar estilo e formatação usando CSS (Cascading Style Sheets) e adicionar interatividade e funcionalidade usando JavaScript, que é papo pra outro texto.

Quando um navegador web carrega uma página HTML, ele interpreta o código HTML e exibe o conteúdo estruturado de acordo com as instruções fornecidas pelas tags e atributos.

Abaixo vamos ver alguns elementos, tags, estruturas, links, imagens, listas, tabelas. Mas é só um resumo básico do HTML, existem muitos outros que vou deixar os links de alguns sites no final para vocês conhecerem um pouco mais e por em prática.

  • Elementos e Tags:

  • Um elemento HTML é uma estrutura composta por uma tag de abertura, conteúdo e uma tag de fechamento. Por exemplo: <p>Este é um parágrafo.</p>.

  • As tags de abertura e fechamento são representadas pelos símbolos < e >, e a tag de fechamento tem uma barra antes do nome do elemento.

  • Alguns elementos, como <img> e <br>, não precisam de uma tag de fechamento e são chamados de elementos vazios ou auto-fecháveis.

  • Estrutura básica:

  • Todo documento HTML começa com a tag <html> e tem uma estrutura básica composta pelas seguintes seções:
    -- <head>: Contém informações sobre o documento, como o título da página, links para folhas de estilo CSS, scripts e meta informações.
    -- <body>: Contém o conteúdo visível da página, como texto, imagens, links, etc.

  • Títulos e Parágrafos:

  • Os títulos são definidos pelos elementos <h1> a <h6>. <h1> é o título mais importante e <h6> é o menos importante.

  • Os parágrafos são definidos pelo elemento <p>. O texto
    dentro do <p> é tratado como um parágrafo separado.

  • Links:

  • Os links são criados usando o elemento <a>. O atributo href é usado para especificar o destino do link (URL).

  • O texto dentro da tag <a> será o texto do link clicável. Por exemplo: <a> href="https://www.example.com">Visite o site</a>.

  • Imagens:

  • As imagens são incorporadas usando o elemento <img>. O atributo src especifica o caminho da imagem.

  • Outros atributos importantes incluem alt (texto alternativo exibido se a imagem não puder ser carregada) e width/height (largura/altura da imagem).

  • Listas:

  • Existem dois tipos principais de listas em HTML: listas ordenadas <ol> e listas não ordenadas <ul>.

  • Os itens da lista são definidos usando o elemento <li>. Cada <li> representa um item da lista.

  • Tabelas:

  • As tabelas são criadas usando o elemento <table>. Elas consistem em linhas <tr>, células de cabeçalho <th> e células regulares <td>.

  • Os elementos <th> são usados para os cabeçalhos da tabela e <td> para os dados.

O HTML evoluiu ao longo dos anos e diferentes versões foram lançadas. A versão mais recente é o HTML5, que introduziu muitos recursos e melhorias, como suporte a multimídia, elementos semânticos e APIs para desenvolvimento de aplicativos web avançados.

Em resumo, o HTML é a linguagem de marcação fundamental para criar e estruturar o conteúdo das páginas da web, permitindo a criação de sites interativos e acessíveis.

Como prometido, abaixo vou deixar links de lugares que encontrei onde você pode aprender e praticar o HTML.

W3Schools (https://www.w3schools.com/html/): O W3Schools é uma referência popular para aprender várias tecnologias web, incluindo HTML. Ele fornece tutoriais interativos, exemplos de código e um ambiente de teste online para praticar.

MDN Web Docs (https://developer.mozilla.org/pt-BR/docs/Web/HTML): A MDN Web Docs é uma excelente fonte de documentação sobre HTML, fornecida pela Mozilla. Ela oferece guias detalhados, referências completas e exemplos de código.

Codecademy (https://www.codecademy.com/learn/learn-html): O Codecademy oferece um curso interativo de HTML, onde você pode aprender os conceitos básicos e avançados do HTML por meio de lições práticas.

freeCodeCamp (https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5): O freeCodeCamp oferece uma plataforma de aprendizado interativo e prático para desenvolvimento web. Eles têm um curso de HTML gratuito que cobre os fundamentos do HTML e HTML5.

SoloLearn (https://www.sololearn.com/Course/HTML/): O SoloLearn é um aplicativo de aprendizado de programação que oferece um curso de HTML interativo. Ele inclui lições, quizzes e um ambiente de codificação para praticar.

HTML Dog (https://www.htmldog.com/guides/html/): O HTML Dog é um recurso que fornece tutoriais detalhados de HTML, desde o básico até técnicas avançadas. Ele também oferece exemplos de código e dicas úteis.

Top comments (0)