4.18 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 aplicativos web. Combinado com tecnologias como CSS (Cascading Style Sheets) e JavaScript, HTML forma a tríade essencial de ferramentas para a web.
Estrutura básica do HTML
Um documento HTML básico tem uma estrutura bastante simples. Ele começa com a declaração do tipo de documento, que para HTML5 é simplesmente <!DOCTYPE html>. Em seguida, vem o elemento <html> que envolve todo o conteúdo da página. Dentro deste, temos dois elementos principais: <head> e <body>.
O elemento <head> contém metadados sobre o documento, como seu título (que aparece na barra de título ou na aba do navegador), links para folhas de estilo CSS, scripts JavaScript e várias outras informações que não são apresentadas ao usuário.
O elemento <body> é onde todo o conteúdo que o usuário vê e interage reside. Isso inclui texto, imagens, vídeos, formulários, botões e todos os outros elementos interativos da página.
Tags e Atributos HTML
As tags HTML são os blocos de construção de qualquer página da web. Eles definem e descrevem o conteúdo. Cada tag começa com um sinal de menor (<) e termina com um sinal de maior (>). A maioria das tags HTML tem uma tag de abertura e uma tag de fechamento, com conteúdo entre elas.
Por exemplo, <p>Este é um parágrafo.</p>. Aqui, <p> é a tag de abertura, </p> é a tag de fechamento, e qualquer coisa entre elas é o conteúdo da tag.
Os atributos HTML fornecem informações adicionais sobre os elementos. Eles vêm em pares de nome/valor e são sempre incluídos na tag de abertura. Por exemplo, na tag de imagem <img src="imagem.jpg" alt="Uma imagem">, src e alt são atributos.
Propriedades e Valores CSS
CSS, ou Cascading Style Sheets, é uma linguagem de folha de estilo usada para descrever a aparência de um documento escrito em HTML. Ela permite que você controle coisas como a cor do texto, o tamanho da fonte, o espaçamento entre parágrafos, como as colunas são dimensionadas e dispostas, que tipos de imagens ou cores de fundo usar, etc.
Propriedades CSS
As propriedades CSS são os aspectos do HTML que você pode alterar ou manipular. Por exemplo, você pode alterar a cor, a margem, o preenchimento, a altura, a largura, a borda, o tamanho da fonte, a família da fonte, a linha de altura, o alinhamento do texto, a posição, o estilo de lista, a tabela de layout e muito mais.
Valores CSS
Os valores são o que você define ou usa para alterar as propriedades CSS. Por exemplo, se a propriedade for 'cor', então os valores possíveis poderiam ser 'vermelho', 'verde', 'rgb(255,0,0)', '#FF0000', etc. Cada propriedade tem seu próprio conjunto de valores possíveis, alguns dos quais são predefinidos, enquanto outros podem ser definidos pelo usuário.
Por exemplo, a propriedade 'font-size' controla o tamanho do texto. Se você quiser que seu texto seja exibido em um tamanho de 16 pixels, você usaria a propriedade e o valor assim: font-size: 16px;.
Em resumo, HTML e CSS são ferramentas fundamentais para qualquer desenvolvedor web. O HTML fornece a estrutura e o conteúdo da página, enquanto o CSS permite que você controle exatamente como essa página parece. Com um bom entendimento dessas duas linguagens, você pode criar páginas web dinâmicas e atraentes.
