Curso de TI HTML Fundamentos 011_Texto

HTML fornece uma grande quantidade de tags de texto para uso ao criar páginas web. Essas tags podem nos ajudar a organizar e formatar melhor nosso conteúdo de texto. A seguir estão algumas tags de texto HTML comumente usadas.

Títulos

Os elementos de título são usados para definir títulos ou subtítulos de documentos HTML, geralmente representando a hierarquia da estrutura do documento. Os elementos de título têm seis níveis, de h1 a h6, quanto maior o nível, maior a importância do título.

Exemplo:

1
<h1>Este é um título h1</h1>
2
<h2>Este é um título h2</h2>
3
...
4
<h6>Este é um título h6</h6>

Resultado:

[!Resumo]

• Certifique-se de que os elementos de título sejam usados apenas para títulos, não devem ser usados apenas para negrito ou fonte grande.
• Os mecanismos de busca usam títulos para indexar a estrutura e o conteúdo de suas páginas web.
• O uso correto dos elementos de título pode tornar a página mais legível, acessível e favorável ao SEO.
• Você deve usar h1 como o único título principal (o mais importante), seguido por h2 (secundário), depois h3, e assim por diante.

Parágrafos

Os elementos de parágrafo são usados para definir a estrutura de parágrafo do texto, tornando o texto mais organizado e legível. Ele adiciona uma quebra de linha antes e depois do conteúdo acima e abaixo, agrupando o texto em partes independentes, de modo que haja uma distinção clara entre os parágrafos. Os elementos de parágrafo incluem principalmente a tag <p>, que representa um parágrafo.

Exemplo:

1
<p>Este é um parágrafo.</p>
2
<p>Este é outro parágrafo.</p>

Resultado:

[!Resumo]

• Podem existir vários parágrafos em um documento HTML
• O navegador adiciona automaticamente uma linha vazia antes e depois do parágrafo
• Não se esqueça da tag de fechamento (mesmo que você esqueça a tag de fechamento, a maioria dos navegadores ainda exibirá corretamente)
• Se você não gostar das linhas vazias acima e abaixo adicionadas pelo elemento de parágrafo e quiser reduzir o espaçamento das linhas, use a tag <br>
• Por padrão, o número de caracteres exibidos em uma linha de código em um elemento de parágrafo é determinado pela largura da tela

Hiperlinks

O elemento <a> é usado para definir hiperlinks, permitindo que os usuários cliquem no link e naveguem para outras páginas ou recursos. A tag <a> geralmente contém algum texto ou imagem, que se tornará a parte clicável do link. Ao mesmo tempo, especificamos o endereço de destino do link através do atributo href da tag <a>. Os hiperlinks são uma função básica em HTML, podendo vincular a outras partes da página web, ou a outras páginas web, ou até mesmo a outros sites.

Exemplo:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

Resultado:

Atributos de hiperlink

• href: Especifica a URL do destino do link, este é o atributo mais importante do link. Pode ser a URL de outra página web, a URL de um arquivo ou a URL de outros recursos.
• target (opcional): Especifica como o link é aberto no navegador. Os valores comuns incluem _blank (abre o link em uma nova guia ou janela) e _self (abre o link na guia ou janela atual, padrão).
• title (opcional): Fornece informações de texto do link, geralmente exibidas quando o mouse paira sobre o link.
• rel (opcional): Especifica a relação com o destino do link, como nofollow (não rastrear), noopener (não abrir novo contexto), noreferrer (não passar informações de referência), etc.
• class: Especifica a classe CSS do link.
• id: Especifica o ID CSS do link.

Links de âncora

Em uma página web longa, podemos querer criar links para uma parte específica dentro da página. Isso pode ser implementado através de links de âncora. Primeiro, precisamos usar o atributo name ou id da tag <a> para marcar a posição de destino, e então no atributo href do link usamos # mais o valor name ou id do destino para criar o link.

Exemplo:

1
<a href="#a1">Ir para a1</a>
2
<!-- Omitir conteúdo suficiente para virar a página ou <br> -->
3
<a name="a1">Algum conteúdo</a>

Resultado:

Ao clicar no hiperlink “Ir para a1”, a página pulará para a seção “conteúdo a1”.

Links de e-mail

Além de vincular a outras páginas web, a tag <a> também pode vincular a endereços de e-mail. Adicionando mailto: antes do valor do atributo href, você pode criar um link que, quando clicado, iniciará o cliente de e-mail padrão do usuário e criará um novo e-mail.

Exemplo:

1
<a href="mailto:757118@qq.com">Enviar e-mail para 757118@qq.com</a>

Resultado:

Ao clicar neste hiperlink, o sistema iniciará o cliente de e-mail padrão e criará um novo e-mail para 757118@qq.com.

[!Resumo]

• Quando você move o ponteiro do mouse sobre um link em uma página web, a seta se transforma em uma pequena mão.
• Os hiperlinks não precisam ser necessariamente texto, imagens ou outros elementos HTML também podem se tornar links.
• Por padrão, os links aparecerão no navegador da seguinte forma: Um link não visitado é exibido em azul e sublinhado. Um link visitado é exibido em roxo e sublinhado. Ao clicar no link, ele é exibido em vermelho e sublinhado.

Quebra de linha

O elemento de quebra de linha <br> é usado para inserir um caractere de quebra de linha no texto, forçando o texto a ir para uma nova linha.

Exemplo:

1
Esta é uma linha de texto.<br>Esta é outra linha de texto.

Resultado:

[!Resumo]

• A barra / na tag <br> é opcional. No HTML 4, a tag <br /> deve incluir a barra; No HTML 5, a barra é opcional.

Negrito

O elemento <b> é uma tag básica de estilo de texto usada para definir o texto como negrito, mas sem enfatizar a semântica do texto. O elemento <strong> é uma tag semântica usada para representar a ênfase do texto, geralmente o navegador o exibe em negrito.

Exemplo:

1
Este é texto normal
2
<b>Este é texto em negrito</b>
3
<strong>Este é texto em negrito com semântica de ênfase</strong>

Resultado:

Itálico

O elemento <i> é usado para representar o efeito de itálico do texto, mas sem enfatizar a semântica do texto. O elemento <em> é usado para representar texto em itálico, geralmente usado para enfatizar a importância do texto ou criar um efeito visual.

Exemplo:

1
Este é texto normal
2
<i>Este é um texto em itálico</i>
3
<em>Este é um texto em itálico com semântica de ênfase</em>

Resultado:

Sublinhado

O elemento de sublinhado <u> é usado para representar texto sublinhado.

Exemplo:

1
Este é um texto com <u>sublinhado</u>

Resultado:

[!Resumo]

• No HTML 5, o elemento de sublinhado <u> foi descontinuado. Isso significa que ele ainda é um elemento HTML válido, mas seu uso não é recomendado.

Tachado

O elemento de tachado <del> é usado para exibir texto que foi excluído ou descartado, o navegador geralmente adiciona uma linha horizontal sobre este texto.

Exemplo:

1
Este é um texto <del>tachado</del>

Resultado:

[!Resumo]

• No HTML5, o elemento de tachado <del> foi descontinuado. Isso significa que ele ainda é um elemento HTML válido, mas seu uso não é recomendado.

Destaque

O elemento <mark> é usado para marcar uma parte do texto para destacar ou marcar essa parte do texto. Geralmente, o texto marcado com o elemento <mark> será destacado com um fundo amarelo para torná-lo mais visível no documento.

Exemplo:

1
Este é um texto <mark>destacado</mark>

Resultado:

Subscrito e sobrescrito

O elemento <sub> representa o subscrito (subscript) do texto, o elemento <sup> representa o sobrescrito (superscript) do texto. Os elementos de subscrito e sobrescrito são geralmente usados em cenários de matemática, fórmulas químicas, datas, temperatura, etc.

Exemplo:

1
H<sub>2</sub>O é a fórmula molecular da água.
2
2<sup>10</sup> é igual a 1024.

Resultado: