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'.
