4.29. Introdução ao HTML: estrutura básica, tags e atributos: Manipulação do DOM

Página 33

4.29. Introdução ao HTML: estrutura básica, tags e atributos: Manipulação do DOM

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.

Ahora responde el ejercicio sobre el contenido:

Qual é a função da tag <head> em uma página HTML?

¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.

¡Tú error! Inténtalo de nuevo.

Siguiente página del libro electrónico gratuito:

344.30. Introdução ao HTML: estrutura básica, tags e atributos: Eventos em JavaScript

¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!

Disponible en Google Play Disponible en App Store

+ 6,5 millones
estudiantes

Certificado gratuito y
válido con código QR

48 mil ejercicios
gratis

Calificación de 4.8/5
en tiendas de aplicaciones

Cursos gratuitos de
vídeo, audio y texto.