📘 Aula 12: Outras formatações 📘

Código-fonte & Pré-formatação

O comando document.getElementById('teste') é escrito em linguagem JavaScript.

Usamos a TAG ( <code>seu-texto</code> ) no código acima marcado em amarelo.

Nessa formatação abaixo usamos a TAG <pre></pre> para o código python abaixo ser apresentado como escrevi.

E também usamos a TAG 

<pre><code>seu-texto</code></pre>
dentro da TAG <pre></pre> ,
para assim ter esse resultado abaixo em linguagem python de demostração.

Resultado


    num = int(input("Digite um número aqui: "))
    if num % 2 == 0:
        print(f"O número {num} é PAR!")
    else:
        print(f"O número {num} é ÍMPAR!")
    print("Fim do Programa!")

OBS: A TAG <pre></pre> mantém os espaços e quebras de linha do código original e visível no navegador.

Citações

Como diria seu irmão a um primo: 

o cavalo de João ganhou a corrida.

Talvez a TAG <q>citação</q> que usamos na frase citada em amarelo acima, não faça sentido para você, afinal foram só aspas duplas que acrescentou na frase de citação!

Mas não é aleatório, pois você está dando SENTIDO à citação e às coisas, usando a TAG <q> .

Citações Completas

Segundo Maurício Samy Silva, em seu livro Fundamentos de HTML5 e CSS3:

Fundamentos de HTML5 e CSS3, escrito por Maurício Samy Silva, é uma leitura indispensável para aqueles que desejam se aprofundar no desenvolvimento web. O autor apresenta de forma clara e concisa os princípios fundamentais dessas duas linguagens essenciais para a criação de websites modernos. Com uma abordagem didática, o livro explora os conceitos teóricos, além de oferecer inúmeros exemplos práticos que auxiliam na compreensão e aplicação dos conhecimentos adquiridos. A experiência de Silva como instrutor de cursos online reflete-se em sua habilidade em transmitir instruções precisas e detalhadas. Este livro certamente se destaca como uma referência para estudantes e profissionais da área.

Site recomendado: Livro Fundamentos de HTML5 e CSS3


Agora para a citação completa acima em amarelo, usamos a TAG
<blockquote>SUA-CITAÇÃO</blockquote>

E adicionamos o atributo em amarelo <blockquote cite="URL da fonte"> para referenciar a fonte da citação. Assim, os mecanismos de busca sabem que você está indicando a origem do conteúdo citado.

Para criar um link clicável usamos a tag 

<a href="sua-URL">Texto do Link</a>.

Podemos adicionar o atributo title="Descrição do link" para fornecer uma **descrição adicional**, que aparece quando o usuário passa o mouse sobre o link.

Exemplo completo: 

<a href="https://www.exemplo.com" title="Acesse o site Exemplo">Clique aqui</a>

Aqui, "Clique aqui" é o texto visível do link, e "Acesse o site Exemplo" é a dica que aparece ao passar o mouse.

Abreviações

Estamos estudando HTML e CSS — estamos adorando!

Na frase acima usamos a TAG de abreviação 


<abbr title="sua-abreviação">oque-quer-abreviar</abbr>
. O resultado você mesmo pode observar segurando o mouse sobre as palavras destacadas em amarelo acima.

DICA:

Para adicionar a TAG rapidamente basta digitar abbr e clicar na tecla ENTER.
OBS: depende do ambiente de desenvolvimento que estiver usando.

Texto Invertido

Esse é só para brincar contigo 😁

Estamos aprendendo a desenvolver em HTML!

Na frase acima usamos a TAG 

<bdo dir="rtl">seu-texto</bdo>
. O atributo dir="rtl" inverte o texto da direita para a esquerda. Para voltar ao normal use dir="ltr", que é o padrão do texto.

Opinião pessoal: não vejo muita utilidade prática para isso 😅.