Nas atividades anteriores, você aprendeu:
- Fundamentos de tags e elementos HTML.
- Como estruturar uma página da Web.
- HTML semântico e práticas recomendadas.
Com este artigo, você continua a desenvolver seu conhecimento sobre HTML e a abranger 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 na criação de conteúdo de texto e adicionam estrutura, estilo e significado. Há vários conteúdos de texto que podem incorporar os elementos a seguir.
O elemento bloco de texto
<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>, destacando uma famosa citação de Mahatma Gandhi. Há tantas citações ótimas por aí que fornecem conteúdo e significado memoráveis. Pense em algumas de suas figuras inspiradoras favoritas e citações.
Usar o elemento <blockquote> ao usar citações e informações de referência de uma fonte. O elemento <blockquote> cria um recuo e alinhamento exclusivos na apresentação e usa uma tag de abertura e fechamento. Uma <blockquote> é especialmente útil ao usar citações mais longas que abrangem 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 tem uma seção de perguntas frequentes e informações adicionais disponíveis para o usuário. Há seções de perguntas frequentes que são comuns para informações sobre produtos, itinerários de viagem ou qualquer tipo de cenário de perguntas e respostas.
O elemento <details> é útil ao usar um widget divulgado que contém informações adicionais. Esse elemento inclui uma funcionalidade de alternância integrada e em que o usuário pode abrir e fechar o botão. Quando a opção está aberta, o conteúdo das informações adicionais é expandido e pode ser lido pelo usuário. Quando a opção está fechada, o conteúdo das 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. Observe que <figure>, usado com o elemento <figcaption>, pode ser utilizado para melhorar a experiência visual.
Você vê imagens por toda a Web e outros dados visuais úteis o tempo todo. Os elementos visuais ajudam a chamar a atenção do visitante e criam uma ótima experiência do usuário. O elemento <figure> é uma maneira de rotular uma imagem, tabela, gráfico etc. Ele funciona criando conteúdo autônomo relacionado 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 em atividades como agendar um horário on-line, publicar uma data e hora para um artigo de blog, arquivos etc. Alguns exemplos de sites que usam o elemento <time> incluem usar o Google Agenda, publicar um artigo ativo em uma plataforma ou ler arquivos históricos on-line de um site de biblioteca.
O elemento <time> faz referência à hora e pode representar a hora de um relógio 24 horas ou uma data específica que pode ser ajustada para o fuso horário e o 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ê digitar o URL de um site, ele terá um nome <title> que poderá ser lido na barra do navegador ou na guia da página da Web. É o nome do título que você vê dado para 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.
Exemplo: você está pensando em uma página da Web, mas não consegue se lembrar do URL do site específico. Digitar as palavras-chave em um mecanismo de pesquisa. O mecanismo de pesquisa ajuda a rastrear a página da Web que você está procurando, além de permitir que o nome <title> apareça na pesquisa.
Elementos de conteúdo incorporados
Além do conteúdo de texto, há uma variedade de outros elementos de conteúdo a serem usados.
O elemento <iframe>
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Quando você compra itens on-line e clica na sua 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 procurar uma empresa local é outra experiência comum. Esses tipos de experiências 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 em um iframe, intitulado "Wikipédia".
O elemento <iframe> permite inserir conteúdo de outra origem e incorporar um frame em uma página da Web. Ele cria um frame retangular e exibe conteúdo no navegador. Um frame permite a apresentação de um layout em forma de janela em um elemento <iframe>. É uma maneira eficiente de adicionar conteúdo à sua página da Web para aprimorar a experiência.
Elementos do formulário
<progress max="100" value="30"> 30% </progress>
Ter uma barra de progresso visual pode ser útil para acompanhar seu progresso quando você assistir um vídeo mais longo, uma palestra ou preencher um formulário de inscrição extenso. O elemento <progress> é útil para esses tipos de cenários.
Esse elemento é representado como 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ê pode usar os atributos max e value. O atributo max define o número de ponto flutuante, e o atributo value registra o progresso feito em uma tarefa.
Criação dos roteiros
<canvas id="canvas"></canvas>
Para desenhar gráficos e animações em tempo real, use o elemento <canvas>. Coloque o elemento <canvas> na sua página da Web HTML para criar uma tela. Esse elemento requer código JavaScript para desenhar e criar 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 mais elementos com linhas e colunas. As tabelas aparecem com frequência em páginas da Web, sendo uma maneira útil de organizar e mostrar informações. Um caso de uso do 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 dentro de uma tabela. Aqui, você pode adicionar dados específicos da célula.
O elemento <td>
O elemento <td> cria a célula, adicionando o conteúdo necessário.
Conclusão
Neste artigo, você descobriu outros elementos HTML e desenvolveu suas habilidades de programação. Você aprendeu mais sobre conteúdo, texto inline, conteúdo incorporado e elementos de tabela. Agora você compreendeu os elementos HTML adicionais. Continue fazendo um bom trabalho.