Introdução ao HTML: estrutura básica, tags e atributos
O HTML (HyperText Markup Language) é a linguagem fundamental usada para desenvolver páginas da web. É uma linguagem de marcação, o que significa que ela estrutura o conteúdo na página usando tags. Essas tags são usadas para criar elementos como cabeçalhos, parágrafos, listas, links, imagens e muito mais.
Estrutura básica do HTML
Uma página HTML básica tem uma estrutura específica. Ela começa com uma declaração do tipo de documento () para informar ao navegador que é uma página HTML5. Em seguida, a página é envolvida com a tag <html>, que contém duas seções principais: <head> e <body>.
A seção <head> contém informações sobre a página, como o título (que é exibido na barra de título ou guia do navegador) e links para CSS (Cascading Style Sheets) ou JavaScript, se necessário. A seção <body> é onde o conteúdo visível da página é colocado.
Tags e atributos HTML
As tags HTML são usadas para criar elementos na página. Cada tag tem um nome específico e é escrita entre sinais de menor e maior (< e >). A maioria das tags tem uma tag de abertura e uma tag de fechamento, com o conteúdo entre elas. Por exemplo, a tag <p> é usada para criar um parágrafo.
Os atributos HTML são usados para fornecer informações adicionais sobre um elemento. Eles são incluídos na tag de abertura e têm um nome e um valor. Por exemplo, a tag <a> (que cria um link) pode ter um atributo "href" que define o URL do link.
Manipulação do DOM
O DOM (Document Object Model) é uma representação da página HTML como uma estrutura de árvore de objetos. Cada elemento na página é um objeto no DOM, e podemos manipulá-los usando JavaScript.
Selecionando elementos
Podemos selecionar elementos no DOM usando vários métodos. Os mais comuns são getElementById (que seleciona um elemento com um id específico), getElementsByClassName (que seleciona elementos com uma classe específica) e getElementsByTagName (que seleciona elementos com uma tag específica).
Alterando elementos
Depois de selecionar um elemento, podemos alterá-lo de várias maneiras. Podemos alterar o conteúdo de um elemento usando a propriedade innerHTML, alterar o estilo de um elemento usando a propriedade style e alterar os atributos de um elemento usando os métodos setAttribute e removeAttribute.
Adicionando e removendo elementos
Também podemos adicionar e remover elementos no DOM. Para adicionar um elemento, criamos um novo elemento usando o método createElement, definimos seu conteúdo e atributos conforme necessário e, em seguida, adicionamos à página usando o método appendChild ou insertBefore. Para remover um elemento, primeiro selecionamos o elemento e, em seguida, usamos o método removeChild.
A manipulação do DOM é uma parte fundamental do desenvolvimento front-end, pois permite criar sites dinâmicos e interativos. Combinando HTML, CSS e JavaScript, você pode criar praticamente qualquer tipo de site ou aplicativo da web que possa imaginar.
