4.20. Introdução ao HTML: estrutura básica, tags e atributos: Posicionamento em CSS

Página 24

4.20. Introdução ao HTML: estrutura básica, tags e atributos

HTML, que significa Hyper Text Markup Language, é a linguagem de marcação padrão para criar páginas e aplicações web. Junto com CSS e JavaScript, HTML é uma tecnologia fundamental usada pela maioria dos websites para criar páginas web visualmente atraentes, interfaces de usuário para aplicações web e interfaces de usuário para muitos aplicativos móveis.

Estrutura básica de um documento HTML

Um documento HTML tem uma estrutura em árvore, onde cada elemento e seu conteúdo são representados como um objeto do Document Object Model (DOM).

<!DOCTYPE html>
<html>
<head>
  <title>Título da página</title>
</head>
<body>
  <h1>Este é um cabeçalho</h1>
  <p>Este é um parágrafo.</p>
  <p>Este é outro parágrafo.</p>
</body>
</html>

O <!DOCTYPE html> é a declaração do tipo de documento e ajuda os navegadores a exibir páginas web corretamente. Ele deve aparecer apenas uma vez, no topo da página (antes de quaisquer tags HTML).

A tag <html> é a raiz de uma página HTML. A tag <head> contém metainformações sobre o documento HTML. A tag <title> especifica um título para o documento HTML (que é mostrado na barra de título do navegador ou na guia da página).

A tag <body> define o corpo do documento e é um contêiner para todas as partes visíveis do documento HTML.

Tags e Atributos HTML

As tags HTML são a base de qualquer página web. Elas são usadas para definir e organizar o conteúdo em uma página web. Cada tag HTML tem uma sintaxe específica que deve ser seguida para que o navegador possa interpretá-la corretamente.

Um elemento HTML é definido por uma tag de início e, geralmente, uma tag de fim. O conteúdo do elemento é tudo que está entre a tag de início e a tag de fim. Alguns exemplos de elementos HTML incluem <h1>, <p>, <div>, <body>, <head>, <title>, etc.

Os atributos HTML são usados para fornecer informações adicionais sobre os elementos. Eles são sempre especificados no elemento de início e geralmente vêm em pares nome/valor como: nome="valor". Por exemplo, o atributo 'class' é usado para especificar uma ou mais classes para um elemento HTML. O atributo 'id' é usado para especificar um id único para um elemento HTML.

Posicionamento em CSS

CSS, que significa Cascading Style Sheets, é uma linguagem de folha de estilo usada para descrever a aparência de um documento escrito em HTML. O CSS é usado para controlar o layout de várias páginas web de uma só vez.

O posicionamento em CSS é um conceito importante que permite controlar onde e como os elementos HTML são posicionados na página web. Existem várias propriedades de posicionamento em CSS que você pode usar para controlar o posicionamento, tais como: 'static', 'relative', 'fixed', 'absolute' e 'sticky'.

Por padrão, os elementos são posicionados de forma 'static', o que significa que eles são exibidos na página na ordem em que aparecem no código HTML. Se você quiser mover um elemento em relação à sua posição normal, você pode usar a posição 'relative'. Se você quiser posicionar um elemento em relação à janela de visualização, você pode usar a posição 'fixed'. Se você quiser posicionar um elemento em relação ao elemento pai mais próximo (em vez de posicionado de forma 'static'), você pode usar a posição 'absolute'. Se você quiser posicionar um elemento com base na rolagem do usuário, você pode usar a posição 'sticky'.

Além disso, você pode usar as propriedades 'top', 'bottom', 'left' e 'right' para mover o elemento a partir de sua posição original quando você usa as posições 'relative', 'absolute', 'fixed' ou 'sticky'.

Now answer the exercise about the content:

O que significa a tag <!DOCTYPE html> em HTML?

You are right! Congratulations, now go to the next page

You missed! Try again.

Next page of the Free Ebook:

254.21. Introdução ao HTML: estrutura básica, tags e atributos: Flexbox e Grid

Earn your Certificate for this Course for Free! by downloading the Cursa app and reading the ebook there. Available on Google Play or App Store!

Get it on Google Play Get it on App Store

+ 6.5 million
students

Free and Valid
Certificate with QR Code

48 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video, audio and text