Gestão Escolar

Notícias

Comandos HTML

ícone voltar ao topo
Abaixo você encontra vários modelos de efeitos em HTML que poderão ser utilizados em seus conteúdos.

É importante lembrar que o uso excessivo de efeitos visuais nas páginas de conteúdos pode comprometer a acessibilidade do usuário. Sendo assim, o efeitos indicados abaixo deverão ser usados com moderação.



É só copiar e colar o código em seu conteúdo!

Abre e fecha - Continue lendo

O comando serve para abrir uma informação adicional relacionada ao trecho de um conteúdo. Para acioná-lo, basta clicar no link. (continue lendo...)

Caso possua mais de um (continue lendo...)

Veja um exemplo na página de Sociologia.


É só copiar e colar o código em seu conteúdo!

Abre e fecha com imagem

O comando serve para abrir uma informação adicional relacionada ao trecho de um conteúdo. Para acioná-lo, basta clicar no link.
ÍconeComo funciona?




É só copiar e colar o código em seu conteúdo!

Abre e fecha sem imagem

O comando serve para abrir uma informação adicional relacionada ao trecho de um conteúdo. Para acioná-lo, basta clicar no link.
Como funciona?




É só copiar e colar o código em seu conteúdo!

Abre e fecha nele mesmo


O comando serve para abrir uma informação adicional relacionada ao trecho de um conteúdo.
Para acioná-lo, basta clicar no link e para fechar, clicar no mesmo.
Para abrir a resposta clique aqui

Obs.: Este comando só abre em navegadores atualizados, veja como identificar a versão.


É só copiar e colar o código em seu conteúdo!

Acronym

Faz uma linha pontilhada abaixo do texto - ao passar por cima com o mouse, um texto explicativo aparece.








É só copiar e colar o código em seu conteúdo!

Ampliar imagem ao passar o mouse

Para ampliar a imagem com alta qualidade e sem distorções, deve-se inserir o endereço do tamanho maior.

O exemplo abaixo está com 48x48 px, e o tamanho ampliado corresponde a 128x128 px.
Obs.: Para mais de uma imagem  na mesma página, deverá ser incluído um número ao lado de "aumentar_imagem". Exemplo: aumentar_imagem1,  aumentar_imagem2, etc.

Letra e Áudio



É só copiar e colar o código em seu conteúdo!

Âncora

São links que redirecionam para outro trecho dentro de uma mesma página. Quando se usa esse tipo de link não há o recarregamento da página, a barra de rolagem do navegador apenas se movimenta para chegar à parte indicada no link.
Para o funcionamento de uma âncora deve-se estabelecer dois comandos:
  • Um que defina o lugar da página para onde se pretende "saltar";
  • Outro que identifique esse ponto de destino.
Você pode fazer com que links saltem para determinados pontos de uma mesma página, facilitando a navegação. Veja como: Primeiro vamos definir o ponto de destino. Você deve incluir a seguinte tag exatamente no local onde quer que o link vá:
<a name="Digite o nome da ancora aqui"></a>
Obs.: name é um parâmetro que define um ponto de destino.

Agora você pode usar a tag de link "comum" para fazer o link saltar para o ponto onde você definiu:
<a href="...#nome da ancora">Texto de legenda</a>
Repare que há um símbolo "#" antes do nome da âncora. É ele que vai fazer o navegador entender que deve ir para a âncora que você definiu.



É só copiar e colar o código em seu conteúdo!

Caixa link

Esta opção permite  visualizar o endereço da imagem na caixa de texto.

Ícone






É só copiar e colar o código em seu conteúdo!

Mudar imagem ao passar com o mouse

Esta opção permite  visualizar a segunda imagem ao passar com o mouse. As duas imagens deverão estar com o mesmo tamanho em pixels.






É só copiar e colar o código em seu conteúdo!

Subscrito e sobrescrito

Um trecho do texto pode ser formatado como subscrito ou sobrescrito usando-se as tags sub ou sup. Essas tags são muito úteis em fórmulas químicas e em algumas equações matemáticas.

H2O
E=mc2



É só copiar e colar o código em seu conteúdo!

Texto rolante

Esse recurso serve para a notícia ficar com efeito rolante. Cada item direcionará para um conteúdo diferente.

Obs: Antes de usar este modelo, solicite autorização da Coordenação.




É só copiar e colar o código em seu conteúdo!

Title

Este atributo oferece um "texto descritivo" sobre o elemento que ele está sendo usado.
O exemplo produzirá um link profundo para a página do ambiente Comunidade, e quando o usuário repousar o ponteiro do mouse sobre o link, irá aparecer o texto descritivo "Sistema de buscas especialmente criado para crianças". O mesmo ocorre com a imagem, pois oferece uma "legenda".

Ícone para buscador infantil
Buscador Infantil





É só copiar e colar o código em seu conteúdo!

Voltar ao topo

É um botão que pode ser utilizado para ir ao topo da página que tenha um conteúdo muito extenso.




É só copiar e colar o código
no início do seu conteúdo!

Voltar ao topo (fixo)

É um botão sempre visível que pode ser utilizado para ir, a qualquer momento, ao topo da página que tenha um conteúdo muito extenso. Para verificar o funcionamento desse botão, clique na seta azul no canto inferior direito desta página.
Recomendar esta página via e-mail: