HTML, ou HyperText Markup Language, é a linguagem padrão para a criação de páginas e aplicações web. Composta por uma série de elementos, ou 'tags', o HTML forma a estrutura de uma página web e informa ao navegador como exibir o conteúdo. Nesta seção, vamos explorar a estrutura básica do HTML, as tags e os atributos, com um foco especial nas tabelas em HTML.
Estrutura Básica do HTML
Uma página HTML é composta por uma série de elementos aninhados. Cada página começa com a declaração do tipo de documento, que para HTML5 é simplesmente . A seguir, temos a tag html que envolve todo o conteúdo da página, seguida pelas tags head e body.
A tag head contém metadados sobre a página, como o título que aparece na aba do navegador, links para folhas de estilo CSS e scripts JavaScript. A tag body contém o conteúdo principal da página que é visível para os usuários.
Exemplo de Estrutura Básica do HTML
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Conteúdo da página vai aqui.
</body>
</html>
Tags e Atributos do HTML
Os elementos HTML são definidos por tags. Uma tag é composta por um nome de elemento, cercado por sinais de menor e maior. A maioria dos elementos HTML tem uma tag de abertura e uma tag de fechamento, com o conteúdo do elemento no meio.
Por exemplo, para criar um parágrafo, usamos a tag p. A tag de abertura é <p> e a tag de fechamento é </p>. O conteúdo do parágrafo vai entre essas tags.
Além disso, as tags podem ter atributos, que fornecem informações adicionais sobre o elemento. Os atributos geralmente vêm em pares de nome/valor e são incluídos na tag de abertura do elemento.
Exemplo de Tags e Atributos do HTML
<p style="color:blue">Este é um parágrafo azul.</p>
Neste exemplo, style é um atributo da tag p, e "color:blue" é o valor do atributo. Isso informa ao navegador para exibir o texto do parágrafo em azul.
Tabelas em HTML
As tabelas em HTML são definidas com a tag <table>, e consistem em linhas e células. As linhas são definidas com a tag <tr>, e as células dentro das linhas são definidas com a tag <td> para as células de dados ou <th> para as células de cabeçalho.
Exemplo de Tabela em HTML
<table>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
</table>
Este exemplo cria uma tabela com dois cabeçalhos e duas células de dados. O resultado é uma tabela com duas colunas e duas linhas.
As tabelas em HTML também podem ter atributos, como 'border' para definir a borda da tabela, 'width' e 'height' para definir a largura e a altura da tabela, e 'cellpadding' e 'cellspacing' para definir o espaço dentro e entre as células.
Exemplo de Tabela em HTML com Atributos
<table border="1" width="100%" cellpadding="5">
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
</table>
Este exemplo cria uma tabela com uma borda de 1 pixel, uma largura de 100% da largura da página, e um espaço interno de 5 pixels em cada célula.
