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

Página 17

Introdução ao HTML: estrutura básica, tags e atributos: Tabelas em HTML

Introdução ao HTML: estrutura básica, tags e atributos: Tabelas em HTML

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.

Now answer the exercise about the content:

Qual é a função das tags 'table', 'tr' e 'td' no HTML?

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

You missed! Try again.

Next page of the Free Ebook:

184.14. Introdução ao HTML: estrutura básica, tags e atributos: Tags de divisão e span

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