Nas atividades anteriores, você aprendeu:
- Noções básicas de tags e elementos HTML.
- Como estruturar uma página da Web.
- HTML semântico e práticas recomendadas
Com este artigo, você continuará a ampliar seus conhecimentos sobre HTML e abordar outros elementos HTML.
Elementos de conteúdo de texto
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
Esses elementos auxiliam a criação de conteúdo de texto e adicionam estrutura, estilo e significado. Há vários conteúdos de texto que podem incorporar os seguintes elementos.
O elemento de aspas
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
Este exemplo mostra como usar o elemento <blockquote>
, apresentando uma frase famosa de Mahatma Gandhi. Existem tantas citações incríveis por aí que fornecem conteúdo e significado memoráveis. Pense em algumas de suas figuras inspiradoras favoritas e suas citações.
Use o elemento <blockquote>
ao usar aspas e referenciar informações de uma fonte. O elemento <blockquote>
cria um recuo e um alinhamento exclusivos na apresentação e usa uma tag de abertura e fechamento. Uma <blockquote>
é especialmente útil ao usar aspas mais longas que cobrem várias linhas de texto.
Também é possível usar vários elementos em um <blockquote>
, como um cabeçalho, um parágrafo ou uma lista.
O elemento <details>
<details>
<summary>Details</summary>
Additional Information
</details>
Muitas vezes, uma página da web terá uma seção de perguntas frequentes e informações adicionais que estão disponíveis para o usuário. Há seções de perguntas frequentes que são comuns para informações de produtos, itinerários de viagem ou qualquer tipo de cenário de perguntas e respostas.
O elemento <details>
é útil por usar um widget de divulgação que contém informações adicionais. O elemento inclui uma funcionalidade de alternância integrada, e o usuário pode abrir e fechar o botão. Quando o botão é aberto, o conteúdo com mais informações se expande e pode ser lido pelo usuário. Quando o botão é fechado, o conteúdo de informações adicionais fica oculto para o usuário. Para nomear o widget <details>
, use o elemento <summary>
.
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Este é o elemento <figure>
em ação. Aqui, é possível observar que <figure>
, usado com o elemento <figcaption>
, pode ser usado para melhorar a experiência visual.
Você vê imagens por toda a Web, além de outros dados visuais úteis o tempo todo. Elementos visuais ajudam a chamar a atenção do visitante e criar uma ótima experiência do usuário. O elemento <figure>
é uma maneira de rotular uma imagem, uma tabela, um gráfico etc. Ele cria um conteúdo independente em relação ao conteúdo principal.
O elemento <time>
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
O elemento <time>
fornece significado e significado semântico, permitindo uma funcionalidade melhor com atividades como agendamento de um horário on-line, publicação de uma data e hora para um artigo do blog, arquivos etc. Alguns exemplos de sites que usam o elemento <time>
incluem o uso do Google Agenda, a publicação de um artigo ativo em uma plataforma ou a leitura de arquivos históricos on-line em um site de biblioteca.
O elemento <time>
faz referência ao tempo e pode representar a hora de um relógio de 24 horas ou uma data específica que pode ser ajustada para fuso horário e local. Esse elemento requer uma tag de abertura e fechamento, <time>
e </time>
. É possível adicionar o atributo datetime
para que as datas possam ser lidas em um formato legível por máquina.
Metadados do documento
<title>Sarah's Favorite Food Recipes</title>
Sempre que você digita o URL de um site, há um nome <title>
que pode ser lido na barra do navegador ou na guia da página da Web. É o nome do título dado a uma página da Web. Esse elemento é importante e é usado por um mecanismo de pesquisa para exibir uma lista de páginas da Web relacionadas nos resultados da pesquisa. O tamanho do título pode variar de curto e descritivo a mais longo e mais descritivo.
Cenário: você está pensando em uma página da Web, mas não consegue se lembrar do URL específico do site. Digite as palavras-chave em um mecanismo de pesquisa. O mecanismo de pesquisa ajuda a rastrear a página da Web que você está procurando e permite que o nome <title>
apareça na pesquisa.
Elementos de conteúdo incorporados
Além do conteúdo de texto, há uma variedade de elementos de conteúdo adicionais a serem usados.
O elemento <iframe>
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Quando você conclui as compras on-line e clica na opção de pagamento, como PayPal ou Apple Pay, esses recursos geralmente são adicionados a uma página da Web com um <iframe>
. Ver um mapa on-line para pesquisar uma empresa local é outra experiência comum. Esses tipos de experiência do usuário em uma página da Web podem ser adicionados com um iframe. No exemplo acima, você vê o URL da Wikipédia dentro de um iframe, intitulado como "Wikipédia".
O elemento <iframe>
permite inserir conteúdo de outra fonte e incorporar um frame em uma página da Web. Ele cria uma moldura retangular e exibe o conteúdo no navegador. Um frame permite a apresentação de um layout em formato de janela dentro de um elemento <iframe>
. É uma maneira eficiente de adicionar conteúdo à sua página da Web para melhorar a experiência.
Elementos do formulário
<progress max="100" value="30"> 30% </progress>
Ter uma barra de progresso visual pode ajudar você a acompanhar seu progresso ao assistir a um vídeo mais longo, uma aula ou ao preencher uma inscrição extensa. O elemento <progress>
é útil para esses tipos de cenários.
Esse elemento é representado por uma barra visual com uma cor de plano de fundo. A barra visual pode variar em tamanho e cor de fundo. Com a barra de progresso, você tem a opção de usar os atributos max
e value
. O atributo max
define o número do ponto flutuante, e o value
registra o progresso em uma tarefa.
Criação dos roteiros
<canvas id="canvas"></canvas>
Para poder desenhar gráficos e animações em tempo real, use o elemento <canvas>
. Coloque o elemento <canvas>
na sua página HTML da Web para criar uma tela. Este elemento requer código JavaScript para que a funcionalidade desenhe e crie gráficos.
Elementos do conteúdo da tabela
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
O elemento <table>
O elemento <table>
cria uma tabela. Este é o ponto de partida para adicionar outros elementos com linhas e colunas. As tabelas aparecem com frequência em páginas da Web, sendo uma forma útil de organizar e mostrar informações. Um caso de uso para usar o elemento <table>
é apresentar informações tabulares ao usuário, como o tipo de informação que você pode encontrar em uma planilha.
O elemento <th>
O elemento <th>
é o cabeçalho de um grupo de células.
O elemento <tr>
O elemento <tr>
define uma linha de células em uma tabela. A partir daqui, você pode adicionar dados específicos da célula.
O elemento <td>
O elemento <td>
cria a célula e adiciona o conteúdo necessário.
Conclusão
Neste artigo, você descobriu elementos HTML adicionais e desenvolveu suas habilidades de programação. Você aprendeu mais sobre conteúdo, texto inline, conteúdo incorporado e elementos de tabela. Agora você aprendeu mais sobre os elementos HTML adicionais. Continue fazendo um bom trabalho.