Outros elementos HyperCode

Linhas, índices e outros objetos

O HyperCode possui outros objetos para inserir, decorar e formatar as publicações. Veja quais são e como usá-los.

Tag [line]

A Tag line insere uma linha horizontal na página. É util para separar seções da postagem. Mas deve ser usado com cautela porque pode dar à postagem uma aparência de antiquado. Pode ser mais recomendado separar as seções da postagem usando headings.

A tag line é auto-contida, ou seja, ela NÃO PRECISA e NEM DEVE ser usada em pares "abrir/fechar". Deve ser usada simplesmente a tag e pronto.

Sintaxe:

Propriedades opcionais

Como quase todas as tags de HyperCode, line pode levar como propriedades opcionais as propriedades id, class e style. Elas são exatamente iguais às propriedades id, class e style do HTML, inclusive sendo compiladas/renderizadas como tal e podendo ser acessadas e manipuladas por javascript.

Tag [blank]

Se você estiver usando as configurações padrão da página na postagem que está escrevendo, o HyperCode insere automaticamente linhas e parágrafos. Veja Quebra Automática de Linhas em HTML e Evitando Quebra Automática de Linhas.

Nessa configuração padrão, se você tiver várias linhas em branco consecutivas no texto, somente uma delas é considerada, ignorando as outras.

Mas pode ser que por algum motivo você queira forçar a postagem a ter mais de uma linha de espaçamento em determinados locais. Isso pode ser feito usando a tag blank.

Outro uso para a tag blank é forçar quebra de linha em locais onde o processo de compilação normal do HyperFluXCMS suprimiu. Por exemplo, entre duas tags img.

A Tag blank insere uma ou mais linhas em branco na página.

A tag blank é auto-contida, ou seja, ela NÃO PRECISA e NEM DEVE ser usada em pares "abrir/fechar". Deve ser usada simplesmente a tag e pronto.

Sintaxe:

Propriedade anônima

A propriedade "lines" pode ser omitida e o número de linhas pode ser informado diretamente após o nome da tag.

[blank="3"]

Propriedades opcionais

lines é uma propriedade opcional. Ela indica quantas linhas em branco devem ser inseridas. Se não for informado, insere-se somente uma linha.

A tag blank NÃO ACEITA as propriedades id, class e style. Se forem informadas, elas são simplesmente ignoradas.

Âncora

Âncoras são marcações invisíveis ao visitante da página, mas que são inseridas no código HTML da página e servem para inserir "bookmarks" ou marcações que facilitam que determinada
parte da postagem seja rapidamente localizada e focalizada, se for informada na URL da postagem.

Por exemplo, se você está escrevendo um artigo sobre a Alemanha, e essa página é grande, tem uma seção chamada "História" e outra chamada "Geografia". Você pode inserir âncoras
no início dessas seções, uma chamada "historia" e outra chamada "geografia". Depois, você pode referenciar essa âncora usando o caractere # seguido do nome da âncora no link.

No exemplo, se alguém acessar a postagem através do link "seusite.com/alemanha#historia" ou "seusite.com/alemanha#geografia"

Se essa seção for referenciada à âncora em um link dentro da própria postagem, você nem mesmo precisa incluir a URL completa; basta usar # e o nome da âncora.

Por exemplo, usar [link="#historia"]História[/] cria um link que, ao ser clicado, rola a página para focalizar diretamente no início dessa seção.

Sintaxe:

Pelo menos uma das propriedades id ou name devem ser informadas. Name é mantido para compatibilidade com HTML, mas é preferível usar id.

Para fins práticos, não há muita diferença entre informar id ou nome. O nome e o id não precisam ser iguais. Ambos podem ser usados para focalizar a página. Por exemplo, se usar [anchor name="historia" name="hystory"], o local será focalizado tanto pelo link #historia como #history.

Propriedade anônima

A propriedade "id" pode ser omitida e o ID da âncora pode ser informada diretamente após o nome da tag.

Tag [index]

A tag index insere um Índice ou Tabela-de-Conteúdo das seções presentes na postagem.

O índice é formado a partir de informações coletadas a partir do processamento dos Headings encontrados na postagem. Veja mais em Headings em HyperLite e em Links em HyperCode.

O índice é uma lista de links. Cada linha possui o texto de um dos Headings encontrados na página e um link para o início da seção que ele marca.

O índice é exibido de forma hierárquica.

• Headings nível 1 são exibidos normalmente alinhados à esquerda e com uma fonte de maior tamanho.
• Headings nível 2 são mostrados um pouco mais à direta e com fonte menos destacada.
• Headings nível 3 são mostrados ainda um pouco mais à direta e com fonte ainda menos destacada.
• E assim sucessivamente.

A versão atual do HyperFluxCMS somente consegue coletar informações de headings processados em HyperCode ou HyperLite. Headings inseridos diretamente em HTML podem não ser corretamente processados no que diz respeito à geração de index.

A tag index é auto-contida, ou seja, ela NÃO PRECISA e NEM DEVE ser usada em pares "abrir/fechar". Deve ser usada simplesmente a tag e pronto.

Sintaxe:

Exemplo:

que, nesta página que você está lendo, produz o seguinte resultado:

Propriedades opcionais

Como quase todas as tags de HyperCode, index pode levar como propriedades opcionais as propriedades id, class e style. Elas são exatamente iguais às propriedades id, class e style do HTML, inclusive sendo compiladas/renderizadas como tal e podendo ser acessadas e manipuladas por javascript.

Tag [item] e [explain]

As tags item e explain são usadas em conjunto. São usadas para inserir informações na postagem sem sobrecarregar visualmente o leitor.

Por exemplo, para listar um tópico de forma extremamente resumida e, somente se o visitante do site tiver interesse em ler mais, aí sim, exibir informações adicionais.

Você pode, por exemplo, colocar em uma página que fala sobre um suplemento alimentar, citar que ele é rico em Zinco. E se o visitante clicar na linha, aí sim, exibir um parágrafo - na mesma página, sem precisar abrir outra aba ou página, falando sobre a importância do zinco para uma alimentação balanceada.

Sintaxe:

Propriedades opcionais

Como quase todas as tags de HyperCode, item e explain podem levar como propriedades opcionais as propriedades id, class e style. Elas são exatamente iguais às propriedades id, class e style do HTML, inclusive sendo compiladas/renderizadas como tal e podendo ser acessadas e manipuladas por javascript.

Exemplo:

produz como resultado:

Rico em Zinco

O zinco é importante para a cicatrização de feridas, a formação de novos tecidos e a produção de colágeno. Ele também participa da divisão celular, expressão genética, processos fisiológicos como crescimento e desenvolvimento, e da função imune.

Rico em Vitamina B12

A vitamina B12 é uma vitamina essencial para o corpo humano. Ela é fundamental para a formação de células sanguíneas, para o metabolismo de proteínas e carboidratos, e para o funcionamento do sistema nervoso

Rico em Selênio

O selênio é um mineral que ajuda a fortalecer o sistema imunológico, a prevenir doenças degenerativas e a combater os radicais livres.