Comandos HTML

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.

Abre e fecha - continue lendo Abre e fecha com imagem Abre e fecha sem imagem Abre e fecha nele mesmo Acronym Ampliar imagem Âncora

Caixa link Mudar imagem ao passar com o mouse Subscrito e sobrescrito Texto rolante Title Voltar ao topo Voltar ao topo (fixo)

---

É só copiar e colar o código em seu conteúdo!<script> function fjanela(jnr,jact) { jobj0 = document.getElementById("vejamais_"+jnr); jobj1 = document.getElementById("vejamenos_"+jnr); jobj2 = document.getElementById("invisivel_"+jnr); jfoc = document.getElementById("forum_"+jnr); jobj0.style.display = jact=="A"? "none":"inline"; jobj1.style.display = jact=="A"? "inline":"none"; jobj2.style.display = jact=="A"? "inline":"none"; if (jact=="F") { jfoc.focus(); } } </script> <br /> <span id="vejamais_5161" class="botaovejamais"><a href="javascript:fjanela('5161','A')" _fcksavedurl="javascript:fjanela('5161','A')">(continue lendo...)</a></span><span id="invisivel_5161" style="display:none"> Digite neste espaço o texto que ficará oculto.<span id="vejamenos_5161" class="botaovejamenos"><br /> <a href="javascript:fjanela('5161','F')" _fcksavedurl="javascript:fjanela('5161','F')"><img width="16" height="16" align="middle" alt="icone para fechar" src="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/fechar16.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/fechar16.png" />fechar</a></span></span>

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...) Observe que ao clicar no continue lendo, o mesmo ficou invisível.
fechar

Caso possua mais de um (continue lendo...) "Continue lendo..." basta alterar todos os números 5162 para 5163 e assim sucessivamente, até quantos forem necessários.
fechar

Veja um exemplo na página de Sociologia.

---

É só copiar e colar o código em seu conteúdo!<a href="#abrefecha" _fcksavedurl="#abrefecha" onclick="javascript:$('#ajuda1').slideDown();" style="MARGIN-LEFT: 0em"><img width="64" height="64" align="middle" src="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/como_funciona64.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/como_funciona64.png" alt="Ícone" />PERGUNTA?</a><br /> <div id="ajuda1" style="display:none;">RESPOSTA OCULTA<br /> <br /> <a href="#abrefecha" _fcksavedurl="#abrefecha" onclick="javascript:$('#ajuda1').slideUp();"><img width="16" height="16" align="middle" src="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/fechar16.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/fechar16.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/fechar16.png" alt="icone para fechar" />Fechar</a><hr /> </div>

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.
Como funciona?

---

É só copiar e colar o código em seu conteúdo!<a href="#abrefecha" _fcksavedurl="#abrefecha" onclick="javascript:$('#ajuda1').slideDown();" style="MARGIN-LEFT: 0em">PERGUNTA?</a><br /> <div id="ajuda1" style="display:none;">DIGITE NESTE ESPAÇO A RESPOSTA OCULTA.<br /> <br /> <a href="#abrefecha" _fcksavedurl="#abrefecha" onclick="javascript:$('#ajuda1').slideUp();"><img width="16" height="16" align="top" src="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/fechar16.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/fechar16.png" alt="icone para fechar" />Fechar</a></div>

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!<a title="Clique para expandir ou contrair" href="javascript:;" _fcksavedurl="javascript:;" onclick="if(nome1.style.display=='none'){nome1.style.display=''}else{nome1.style.display='none'};">PERGUNTA</a> <span id="nome1" style="display: none;"><br>RESPOSTA OCULTA</span>

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
Para fechar clique no link acima.

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 style="border-bottom:0.1em dotted" title="Digite aqui o texto explicativo.">Linha Pontilhada</acronym>

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! <img width="48" height="48" onmouseout="aumentar_imagem.width='48';aumentar_imagem.height='48';" onmouseover="aumentar_imagem.width='128';aumentar_imagem.height='128';" name="aumentar_imagem" title="Letra e áudio dos hinos nacionais" src="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/nacional128.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/nacional128.png" alt="Letra e Áudio" />

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.

---

É só copiar e colar o código em seu conteúdo! <a name="Digite o nome da âncora aqui"></a>

Â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! <img border="0" src="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/afastamento64.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/afastamento64.png" alt="TEXTO ALTERNATIVO" /> <input type="text" size="40" name="a1" value="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/afastamento64.png" />

Caixa link

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

---

É só copiar e colar o código em seu conteúdo!<img src="Endereço da primeira imagem" _fcksavedurl="Endereço da primeira imagem" onmouseover="this.src='Endereço da segunda imagem'" onmouseout="this.src='Endereço da primeira imagem'" alt="inserir texto alternativo da imagem" />

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! H<sub>2</sub>O<br /> E=mc<sup>2</sup> <br />

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.

H₂O
E=mc²

---

É só copiar e colar o código em seu conteúdo!<table width="100%" cellspacing="1" cellpadding="1" align="center" class="" summary="ícones acesso"> <tbody> <tr> <td> <div class="news-block news-slider-block active" id="news-slider-58"> <ul style="position: relative; width: 732px; height: 23px; overflow: hidden;" class="news-slider-list"> <li style=" top: 0px; left: 0px; display: block; z-index: 5; opacity: 1; width: 732px; height: 28px;"> <h4 class="title"><a target="_blank" href="http://www.educacao.pr.gov.br/modules/noticias/article.php?storyid=3634" _fcksavedurl="http://www.educacao.pr.gov.br/modules/noticias/article.php?storyid=3634">Parceria para preservar memória escolar busca depoimentos</a></h4> </li> <li style=" top: 0px; left: -732px; display:none; z-index: 4; opacity: 1; width: 732px; height: 28px;"> <h4 class="title"><a target="_blank" href="http://www.educacao.pr.gov.br/modules/noticias/article.php?storyid=3688" _fcksavedurl="http://www.educacao.pr.gov.br/modules/noticias/article.php?storyid=3688">Escolas enviam acervo histórico ao Arquivo Público</a></h4> </li> <li style=" top: 0px; left: 0px; display: block; z-index: 5; opacity: 1; width: 732px; height: 28px;"> <h4 class="title"><a target="_blank" href="http://www.cidadao.pr.gov.br/modules/noticias/article.php?storyid=69256&tit=Estado-vai-restaurar-e-preservar-patrimonio-de-escolas-publicas" _fcksavedurl="http://www.cidadao.pr.gov.br/modules/noticias/article.php?storyid=69256&tit=Estado-vai-restaurar-e-preservar-patrimonio-de-escolas-publicas">Estado vai restaurar e preservar patrimonio de escolas públicas</a></h4> </li> <li style=" top: 0px; left: 0px; display: block; z-index: 5; opacity: 1; width: 732px; height: 28px;"> <h4 class="title"><a target="_blank" href="http://www.gestaoescolar.diaadia.pr.gov.br/modules/conteudo/conteudo.php?conteudo=240" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/modules/conteudo/conteudo.php?conteudo=240">Thumbs - Ícones</a></h4> </li> </ul> </div> <br /> <script type="text/javascript"> <!-- $(document).ready(function() { $("#news-slider-58 .news-slider-list").after("<span id=\"news-slider-58-numbers\" class=\"numbers numbers-2\"><\/span>").cycle({fx:'scrollLeft',timeout:4000,speed:400,random:0,pager:'#news-slider-58-numbers'}).parent().addClass('active'); $('#news-slider-58-numbers').append('<a href="#" id="news-slider-58-control" class="play-pause" title="Clique para ativar/desativar animação">Pausa<\/a>'); $("#news-slider-58-control").toggle(function(){$('#news-slider-58 .news-slider-list').cycle('pause'); $(this).text('Continuar animação').addClass('play');},function(){$('#news-slider-58 .news-slider-list').cycle('resume'); $(this).text('Parar animação').removeClass('play');}); }); //--> </script></td> </tr> </tbody> </table>

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.

Parceria para preservar memória escolar busca depoimentos Escolas enviam acervo histórico ao Arquivo Público Estado vai restaurar e preservar patrimônio de escolas públicas Thumbs - Ícones

---

É só copiar e colar o código em seu conteúdo!<a href="http://www.comunidade.diaadia.pr.gov.br/modules/conteudo/conteudo.php?conteudo=103" _fcksavedurl="http://www.comunidade.diaadia.pr.gov.br/modules/conteudo/conteudo.php?conteudo=103" target="_blank" title="Sistema de buscas especialmente criado para crianças."><img width="64" height="64" align="bottom" alt="Ícone para buscador infantil" src="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/buscador_infantil64.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/buscador_infantil64.png" /><br /> Buscador Infantil</a>

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".


Buscador Infantil

---

É só copiar e colar o código em seu conteúdo!<div align="right"><a href="#" _fcksavedurl="#"><img width="32" height="32" align="middle" alt="ícone voltar ao topo" src="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/topo32.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/topo32.png" />Voltar ao topo</a></div>

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! <div style="position:fixed; bottom:0px; right:0px;"><a href="#" _fcksavedurl="#" title="topo da pagina"><img border="0" alt="ícone voltar ao topo" src="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/topo32.png" _fcksavedurl="http://www.gestaoescolar.diaadia.pr.gov.br/arquivos/Image/icones/topo32.png" />Voltar ao topo </a></div>

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.