Guia de Fortamação

A formatação pode desempenhar um papel importante em tornar os leitores mais interessados nos seus artigos. Uma boa formatação é um grande trunfo, e este guia cobrirá tudo, desde os conceitos básicos e essenciais até a introdução ao estilo CSS.

Visite a Central de Widgets para uma coleção de módulos, formatos e temas

---

Formatos de Artigos

Formato de Artigo

Modelos Básicos de Artigos

[[include component:rate]]

BLOCO DE IMAGEM (SE APLICÁVEL)

SÍMBOLO DE CLASSE DE OBJETO

**Registro de Código de Fenômeno:** XXX

**Classe do Objeto:** Alfa/Beta/Gama (classificação de contenção) - Amarelo/Laranja/Vermelho (classificação de letalidade)

**Tipos de Riscos:**

**Protocolos de Contenção:** [Parágrafos explicando os procedimentos]

**Descrição:** [Parágrafos explicando a descrição]

**Adendo:** e/ou **Descoberta:** [Parágrafos adicionais opcionais]

[[footnoteblock]]

[[=]]
<< [[[RPC-XXX]]] | RPC-XXX | [[[RPC-XXX]]] >>
[[/=]]

Coloque os links para o artigo anterior e o próximo aqui ^

Exemplo de como a navegação no final deve parecer:

« RPC-001 | RPC-002 | RPC-003 »

Formatos Alternativos de Artigos

• Tom de Pesquisa
• Tom de Proteção
• Tom Administrativo
• Tom da FSA
• Tom do Protocolo Laboratorial
• Tom de Artigo Científico
• Tom da SIA

Modelo de Entrevista

> **Entrevistado:** [A pessoa, as pessoas ou RPC sendo entrevistado.]
>
> **Entrevistador:** [Entrevistador, pode ser bloqueado usando █]
>
> **Prefácio:** [Pequeno trecho descrevendo a entrevista]
>
> **<Início do Registro, [informação de tempo opcional]>**
>
> **Entrevistador:** [fala]
>
> **Pessoa:** [fala]
>
> [Repita conforme necessário]
>
> **<Fim do Registro, [informação de tempo opcional]>**
>
> **Declaração de Encerramento:** [Pequeno resumo e passagem sobre o que aconteceu depois]

Símbolos de Classificação de Objetos

Ao publicar um artigo, você deve incluir um símbolo de classificação de objeto. Para determinar qual classificação seu artigo atende, consulte o Guia de Classes de Objetos. Aqui está uma lista de comandos que você pode facilmente inserir no topo do seu artigo para exibir o símbolo apropriado, isso aparece em ordem de Nível de Ameaça:

Alfa

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-white.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-yellow.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-orange.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-red.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-purple.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-black.png]]

Beta

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-white.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-yellow.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-orange.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-red.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-purple.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-black.png]]

Gama

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-white.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-yellow.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-orange.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-red.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-purple.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-black.png]]

Ômega

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-white.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-yellow.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-orange.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-red.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-purple.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-black.png]]

+ Outras Classes

Neutralizado

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/neutralized.png]]

Esses códigos vão no módulo de classificação.

Você pode postar um RPC clicando no link do Arquivo I e selecionando qualquer artigo RPC vazio. Certifique-se de incluir a etiqueta "rpc" (sem aspas) na sua página.

Formato de Sítio

Formato de Nomeação de Sítio

Os locais são as localizações específicas onde a Autoridade opera suas instalações. Cada local tem um número único de três dígitos atribuído a ele.

Exemplo: Sítio-863

Sítios construídos em torno de uma anomalia específica ou local de interesse são chamados de "Sítios No-Local", ou Sítio-NL. Se aplicável, essas instalações frequentemente adotam o número do RPC contido, ou o Sítio primário mais próximo, caso contrário.

Exemplo: Sítio-NL-863

Instalações menores que podem ser temporárias ou construídas em condições anormais são frequentemente referidas como "Instalações". Na maioria das vezes, essas instalações são geridas diretamente por uma instalação grande e próxima; nesse caso, elas são tratadas como instalações satélites e nomeadas em relação à sua instalação principal. Outras Instalações podem adotar o número de um RPC proeminente contido, ou receber um identificador aleatório.

Exemplo de instalação genérica: Instalação-863

Exemplo de instalação de satélite: Instalação-002-5

Instalações privadas operadas pela Diretoria Global ou por seus vários departamentos extra-divisionais são referidas como "Sítios Negros". Essas instalações são omitidas dos registros principais dos Sítios e suas localizações exatas são estritamente confidenciais.

Exemplo: Sítio Negro-863

Formato de Sítio

[[div class="site-doc" style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

[[=image http://rpcauthority.wdfiles.com/local--files/site-index/site-header-white.png]]

[[=]]
[[size xx-large]]**NOME DO SÍTIO**[[/size]]
+ **BREVE DESCRIÇÃO DO SÍTIO**
[[/=]]

----
[[=]]
+ **Visão Geral**
[[/=]]
----

**Estabelecido:**

**Capa Frontal:**

**Localização:**

**Codinome:**

**Código Hexadecimal:**

**Ocupação do Sítio:**

**Divisões de Jurisdição:**

**Área Total:** ÁREA TOTAL DO SÍTIO EM METROS QUADRADOS

**Instalação:** ÁREA INTERIOR TOTAL DO SÍTIO EM METROS QUADRADOS [OPCIONAL]

**Terreno/Água Circundante:** ÁREA TOTAL EXTERNA DO SÍTIO [OPCIONAL]

**Informações de Fundo:** VISÃO GERAL BREVEMENTE DO MOTIVO DA EXISTÊNCIA DO SÍTIO

**História:** [OPCIONAL]

----

[[=]]
+ **Departamentos do Sítio** [OPCIONAL]
[[/=]]

----

LISTA DE DIVISÕES ORGANIZACIONAIS/DEPARTAMENTOS ESPECIALIZADOS DENTRO DO SÍTIO

----

[[=]]
+ **Seção de Escritórios & Alas**
[[/=]]

----

LISTA DE ALAS OU COMPONENTES FÍSICOS DO SÍTIO

* **Nível 1:**

* **Nível 2:**

* **Nível 3:**

----

[[=]]
+ **Administração do Sítio**
[[/=]]

----

LISTA DE LIDERANÇA DO SÍTIO - INCLUIR NOMES

**Administrative Officials:**

* **Site Director:**

----

CONTAGEM NUMÉRICA DOS NÚMEROS DE FUNCIONÁRIOS NO SÍTIO

**Funcionários no Local:**

* **Chefes de Departamento:**

* **Assistentes Administrativos:**

* **Pessoal Médico:**

* **Pessoal de Pesquisa:**

* **Pessoal de Segurança:**

* **Pessoal de Manutenção:**

* **Pessoal SCD:**

**Total:**

----

[[=]]
+ **EMEs Guarnecidas** [OPCIONAL]
[[/=]]

----

LISTE QUAISQUER EMEs GARRISADAS AQUI

----

[[=]]
+ **Anomalias Contidas**
[[/=]]

----

LISTA VINCULADA DE ARTIGOS RPC

----

[[=]]
+ **Anomalias Anteriormente Contidas** [OPCIONAL]
[[/=]]

----

LISTE QUAISQUER ANOMALIAS ANTERIORMENTE CONTIDAS AQUI

----

[[=]]
+ **Sub-sesões** [OPCIONAL]
[[/=]]

----

LISTAR QUAISQUER SUB-SESÕES AQUI

[[/div]]

Formato de Pessoal

[[include component:rate]]

[[div style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

[[=image https://rpcauthority.wdfiles.com/local--files/component:theme/AuthorityLogo2.png width="80px"]]

[[=]]
++ **>> Departamento de Pessoal e Gestão <<**
[[/=]]

----

BLOCO DE IMAGEM (SE APLICÁVEL)

**Nome Completo:** NOME DO FUNCIONÁRIO

**Número de Identificação do Funcionário:** XXX-XXX-XXXXXX

**Autorização de Segurança:** Nível X

**Divisão:** Pesquisa/Proteção/Contenção/Administração/Nenhuma

**Posição:** POSIÇÃO DO FUNCIONÁRIO

**Classificação:** CLASSIFICAÇÃO DO FUNCIONÁRIO [Opcional]

**Sexo:** SEXO BIOLÓGICO DO FUNCIONÁRIO

**Altura:** XXXcm

**Peso:** XXkg

**Cor de pele:** COR DE PELE [Opcional]

**Cor do Cabelo:** COR DO CABELO [Opcional]

**Cor dos Olhos:** COR DOS OLHOS [OPCIONAL]

**Local de Nascimento:** LOCAL DE NASCIMENTO

**Data de Nascimento:** DD Mês, AAAA

**Data de Alistamento:** DD Mês, AAAA

**Histórico Educacional:**
* Lista de histórico educacional (AAAA-AAAA)
* Liste conforme necessário (AAAA-AAAA)

**Histórico Ocupacional:**
* Liste empregos anteriores (AAAA-AAAA)

----

[[=]]
+ Visão Geral
[[/=]]

----

ESCREVER VISÃO GERAL DA EQUIPE AQUI

----

[[=]]
+ Mais Informações
[[/=]]

----

ESCREVA QUALQUER INFORMAÇÃO EXTRA AQUI

[[/div]]

Formato de Objeto Menor

[[div class="content-panel"]]
**Designação:** OM-XXX
Coloque o bloco de imagem aqui se estiver incluindo uma imagem
**Descrição:** DESCRIÇÃO FÍSICA BÁSICA DA ANOMALIA
**Localização do Sítio:** ONDE A ANOMALIA ESTÁ ATUALMENTE LOCALIZADA DENTRO DA AUTORIDADE
**Propriedades:** AS PROPRIEDADES ANÔMALAS DO ITEM
[[/div]]

Formato de Locais Menores

[[div class="content-panel"]]
**Designação:** LM-XXX
**Localização:** LOCALIZAÇÃO DA ANOMALIA
**Descrição:** DESCRIÇÃO FÍSICA DA ANOMALIA
**Propriedades:** DESCRIÇÃO DAS PROPRIEDADES ANÔMALAS
**Uso:** USO PELA AUTORIDADE, SE APLICÁVEL
[[/div]]

Índice de Eventos Anômalos

[[div class="content-panel"]]
**Registro #:** XXX
**Localização:** LOCALIZAÇÃO DA ANOMALIA
**Data da Ocorrência:** Mês DD, AAAA
**EDI Envolvida:** LISTE ENTIDADES DE INTERESSE ENVOLVIDAS, SE APLICÁVEL
**Observado Por:** LISTE QUAISQUER PESSOAS OU GRAVAÇÕES DE CÂMERA
**Descrição:** DESCRIÇÃO DA ANOMALIA
**Medidas Reacionárias:** QUALQUER MÉTODO DE CONTENÇÃO
[[/div]]

Formato de Operação

[[include component:rate]]

[[div style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

= **Nome da Operação O-####**

**Data:** 23 de abril de 2019

**Objetivo:** Capturar / Resgatar / Investigar / Recuperar / etc.

**EME:** Echo-77

**Membros da Equipe:** E77-Cap, E77-1, E77-2

**Nota prévia:** Forneça qualquer informação introdutória necessária aqui.

----

**[INÍCIO DO REGISTRO]**

**E77-1:** Diálogo

//[evento.]//

**[FIM DO REGISTRO]**

----

**Declaração de Encerramento:** Forneça uma declaração final e/ou informações de acompanhamento. (Opcional)

[[/div]]

**Adendo:** Registros de entrevistas/interrogatórios, materiais encontrados, declarações de testemunhas, etc. (Opcional)

Formato de Patente

[[module css]]
@import url(http://autoridaderpc-pt-br.wikidot.com/componente:tema-administracao/code/1);
[[/module]]
[[include component:rate]]
[[div class="content-panel"]]
[[=]]
+ **PATENTE DA AUTORIDADE RPC**
+++ [NOME FORMAL DA PATENTE] "[NOME INFORMAL DA PATENTE]"
[[/=]]
[[>]]
(a) **Patente Nº:** P-XXX
(b) **Data da Patente:** SEG. DD, AAAA
[[/>]]
------
(c) **Inventor:** [NOME E SÍTIO]
(*) **Aviso:** Sujeito a qualquer isenção de responsabilidade, o prazo desta patente é estendido ou ajustado de acordo com o Tratado de Ottawa e a Resolução 1980/0120 das Nações Unidas por XX dias.
(d) **Appl Nº:** XX/XX,XXX [Adicione um número aleatório]
(e) **Arquivada:** SEG. DD, AAAA
------
[[=]]
+++ RESUMO
[[/=]]
[RESUMO DA PATENTE]
**FIG. 1**
[INSIRA A IMAGEM AQUI]
------
[[=]]
+++ (I) CONTEXTO DA INVENÇÃO
[[/=]]
**(I) CONTEXTO/HISTÓRIA**
[CONTEXTO/HISTÓRIA DA PATENTE]
**(II) CONTEXTO/HISTÓRIA**
[CONTINUE O CONTEXTO/HISTÓRIA SE NECESSÁRIO]
------
[[=]]
+++ (II) DESCRIÇÃO DETALHADA DA INVENÇÃO
[[/=]]
[DESCREVA SUA PATENTE EM MAIOR DETALHE]
**(1)Fig 1:**
[EXPLIQUE A FIG 1]
**(2) Fig 2:**
Explique a Fig 2
[CONTINUE SE NECESSÁRIO.]
------
[[=]]
+++ (III) INSTRUÇÃO E USO DA INVENÇÃO
[[/=]]
[DESCREVA AS INSTRUÇÕES E/OU PROPRIEDADES ÚTEIS.]
**(I) Como usar isso**
[EXPLIQUE O USO]
**(II) Como usar isso**
[CONTINUE SE NECESSÁRIO.]
------
[[=]]
REFERÊNCIA CRUZADA A APLICAÇÕES RELACIONADAS
{{Por meio deste, reivindico o benefício previsto no Tratado de Ottawa e na Resolução das Nações Unidas nº 1980/0120, pedido da patente nº XXX, depositado na SEG, DD, AAAA. O pedido P-XXX encontra-se atualmente pendente. O pedido P-XXX é incorporado por referência a este pedido.}}
[[/=]]
[[/div]]

Formato de Perfil de EME

[[include component:rate]]

[[div class="mst-profile" style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

[[=image http://rpcauthority.wdfiles.com/local--files/foxtrot-4-prey/WhiteHeader.png]]

----

[[=]]
+ Visão Geral
[[/=]]

----

[[f>URL]] (EMBLEMA OPCIONAL DA EME)

**Código Numérico:** DESIGNAÇÃO DA EME

**Codinome:** CODINOME DA EME

**Lema:** [Opcional]

**Guarnição/QG:** [Se aplicável]

**Funções:** PROPÓSITO DA EME

**Estabelecido:** DATA DE FORMAÇÃO DA EME

**Descrição:** ESCREVA A DESCRIÇÃO DA EQUIPE AQUI

----

[[=]]
+ Composição da Força-tarefa
[[/=]]

----

NÚMERO/ESTRUTURA DOS MEMBROS DA EQUIPE ESPECIALIZADA VAI AQUI

----

[[=]]
+ Pessoal Ativo
[[/=]]

----

LINKS PARA ARQUIVOS DE PESSOAL NOTÁVEL VÃO AQUI

----

[[=]]
+ Armamentos
[[/=]]

----

EQUIPAMENTO DA EQUIPE ESPECIALIZADA VAI AQUI

----

[[=]]
+ Operações Concluídas
[[/=]]

----

MISSÕES OU LINKS DE OPERAÇÕES NOTÁVEIS VÃO AQUI

----

[[=]]
+ Atribuições de Contenção
[[/=]]

----

RPCs RELACIONADOS VÃO AQUI

[[/div]]

Formato de Filmagem

[[include component:rate]]

[[div style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

**ID da Mídia#:** M-XXXXX

> **Prefácio:** [Informações sobre a fonte do vídeo, formato, etc.]
>
> **<Início do Vídeo>**
>
> **00:00 -** [Evento, repita conforme necessário.]
>
> **<Fim do Vídeo>**

**Adendo:** [Informações Adicionais, Seção Opcional]

[[/div]]

---

Sintaxe do Wikidot

Na maior parte, você pode se virar conhecendo apenas o básico da sintaxe do Wikidot.

• Negrito: **exemplo de texto** ⟶ exemplo de texto
• Italizando: //exemplo de texto// ⟶ exemplo de texto
• Sublinhado: __exemplo de texto__ ⟶ exemplo de texto
• Rasurado: --exemplo de texto-- ⟶ exemplo de texto

A propósito, você não precisa necessariamente memorizar isso, pois tudo está disponível na barra de ferramentas do Wikidot, mas ainda é útil saber.

---

Imagens

Adicionar imagens é uma ótima maneira de melhorar seu artigo.

[[include component:image-block name=Localização_URL_da_Imagem|caption=Legenda_da_Imagem]]

Isso cria um bloco de imagem que se expandirá quando passar o mouse por cima. Substitua o texto em negrito por qualquer coisa que seja aplicável.

Tem também algumas outras coisas que você pode adicionar para mudar como a imagem funciona.

[[include component:image-block name=Localização_URL_da_Imagem|caption=Legenda_da_Imagem|width=###]]

Isso definirá o tamanho da imagem. O padrão é 300 pixels. Certifique-se de colocar uma unidade para que funcione. "width=450px" fará com que tenha 450 pixels de largura. "width=50%" fará com que ocupe metade da largura do conteúdo da página.

[[include component:image-block name=Localização_URL_da_Imagem|caption=Legenda_da_Imagem|align=ALINHAMENTO]]

Isso mudará como a imagem é alinhada. Por padrão, a imagem será alinhada ao lado direito da tela. "align=left" fará com que ele apareça no lado esquerdo. "align=center" fará com que apareça no centro da tela.

[[include component:image-block name=Localização_URL_da_Imagem|caption=Legenda_da_Imagem|enlarge=false]]

Isso fará com que a imagem não aumente de tamanho quando você passar o mouse sobre ela. Por padrão, o aumento ao passar o mouse está ativado.

---

Se você quiser adicionar imagens normais (sem a formatação de bloco de imagem), basta usar:

[[LINK da imagem]] ⟶ Cria uma imagem normal.
[[<LINK da imagem]] ⟶ Cria uma imagem alinhada à esquerda.
[[>LINK da imagem]] ⟶ Cria uma imagem alinhada à direita.
[[=LINK da iamgem]] ⟶ Cria uma imagem centralizada.
[[f<LINK da imagem]] ⟶ Cria uma imagem flutuando à esquerda. (Permite a quebra de texto.)
[[f>LINK da imagem]] ⟶ Cria uma imagem flutuando à direita. (Permite a quebra de texto.)

Existem usos mais avançados de imagens que você pode ler aqui.

---

Colapsáveis

Os colapsáveis funcionam bem para esconder grandes blocos de texto.

[[collapsible show="MOSTRAR TEXTO" hide="OCULTAR TEXTO"]]
TEXTO
[[/collapsible]]

MOSTRAR TEXTO

TEXTO

Além disso, você pode usar o atributo hideLocation para mudar onde o colapsável fecha. Isso funciona bem com blocos de texto especialmente longos. Por exemplo:

[[collapsible show="MOSTRAR LONGO BLOCO DE TEXTO" hide="OCULTAR LONGO BLOCO DE TEXTO" hideLocation="both"]]
LONGO BLOCO DE TEXTO
[[/collapsible]]

MOSTRAR LONGO BLOCO DE TEXTO

LONGO BLOCO DE TEXTO

---

Hiperlinks

Você pode criar links para outras páginas usando o seguinte código:

[PÁGINA-URL LINK-TEXTO]

Isso fará com que:

LINK-TEXTO

Se a página para a qual você está linkando estiver no mesmo site Wikidot, você pode simplesmente usar /nome-da-página. Por exemplo:

[/guia-de-formatação LINK-TEXTO]

Isso fará com que:

LINK-TEXTO

A maneira mais simples de criar links para páginas no mesmo site é a seguinte:

[[[guia-de-formatação]]]

Isso fará com que:

guia-de-formatação

---

Notas de Rodapé e Blocos de Notas de Rodapé

Você pode adicionar notas de rodapé usando o seguinte código:

Texto de exemplo.[[footnote]]Explicação.[[/footnote]]

Texto de exemplo.¹

Além disso, você pode alterar onde as notas de rodapé são exibidas na sua página usando [[footnoteblock]]. Observe que só pode haver um bloco de nota de rodapé por página.

Notas de rodapé

1. Explicação.

---

Cabeçalhos

Você pode enfatizar texto usando cabeçalhos. O código a seguir:

+ Maior Cabeçalho
++ Tamanho 2
+++ Tamanho 3
++++ Tamanho 4
+++++ Tamanho 5
++++++ Menor Cabeçalho

Criará cabeçalhos de vários tamanhos:

Maior Cabeçalho

Tamanho 2

Tamanho 3

Tamanho 4

Tamanho 5

Menor Cabeçalho

---

Listas

Você pode criar listas ordenadas (por número), assim como listas não ordenadas (pontos de marcadores). Adicionar um espaço antes de um item da lista aumentará seu aninhamento.

# Item da Lista Ordenada 1
# Item da Lista Ordenada 2
# Item Aninhado 1
# Item da Lista Ordenado 3

* Item da Lista Desordenada 1
* Item da Lista Desordenada 2
* Item Aninhado 1
* Item da Lista Desordenada 3

Irá criar:

1. Item da Lista Ordenada 1
2. Item da Lista Ordenada 2
   1. Item Aninhado 1
3. Item da Lista Ordenada 3

• Item da Lista Desordenada 1
• Item da Lista Desordenada 2
  • Item Aninhado 1
• Item da Lista Desordenada 3

---

Tabelas

Tabelas podem ser usadas para organizar informações em seu artigo:

||~ Cabeçalho 1 ||~ Cabeçalho 2 ||~ Cabeçalho 3 ||
|| Exemplo 1. || Exemplo 2. || Exemplo 3. ||

This will make:

Cabeçalho 1	Cabeçalho 2	Cabeçalho 3
Exemplo 1.	Exemplo 2.	Exemplo 3.

Você pode expandir este modelo para quantas linhas e colunas precisar. Lembre-se de adicionar um til (~) a cada caixa na sua linha de cabeçalho.

---

Blocos de Citação

Blocos de citação são ótimos para testar logs, logs de exploração e assim por diante. Adicionar um bloco de citação é tão simples quanto adicionar "> " antes de cada linha do seu texto. Então:

> Linha 1
>
> Linha 2

Irá criar:

Linha 1

Linha 2

Observe que linhas vazias também exigem o "> " - caso contrário, seu bloco de citação será dividido! Além disso, o espaço após ">" é essencial; o código não funcionará de outra forma.

---

Âncoras

As âncoras podem tornar a navegação na sua página muito mais fácil:

[nome da âncora]

[[# nome da âncora]] Para criar uma âncora.

[#nomedaâncora Link do Texto.] Para retornar à âncora.

Isso criará:

[#nomedaâncora Link do Texto.]

---

Divisores Horizontais

Divisores horizontais são usados ​​para dividir o conteúdo de uma página:

Texto
-----
Mais texto

Irá criar:

Texto

---

Mais texto

---

Alinhando texto

Você pode alinhar o texto à esquerda, ao centro e à direita da página, bem como justificá-lo:

[[<]]
Texto alinhado à esquerda

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/<]]

[[=]]
Texto centralizado

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/=]]

[[>]]
Texto alinhado à direita

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/>]]

[[==]]
Texto justificado

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/==]]

Irá criar:

Texto alinhado à esquerda

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texto centralizado

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texto alinhado à direita

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texto justificado

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Justificar o texto faz com que todas as linhas fiquem espaçadas uniformemente, de modo que ele fique visível apenas em parágrafos grandes.

---

Texto Colorido

O texto colorido é muito simples de fazer:

##blue|Texto azul.##

Faz: Texto azul.

Também funciona com valores hexadecimais:

##71e02c|Texto verde.##

Faz: Texto verde.

---

Abas

As guias podem ser usadas para organizar páginas e evitar que sua sandbox fique desorganizada. Veja como fazê-las:

[[tabview]]
[[tab Aba Um]]
Texto de exemplo.
[[/tab]]
[[tab Aba Dois]]
Mais exemplo de texto.
[[/tab]]
[[/tabview]]

Makes:

Aba Um

Texto de exemplo

Aba Dois

Mais exemplo de texto.

Você pode adicionar quantas [[tab]]s precisar.

Criar múltiplos elementos [[tabview]] … [[/tabview]] criará múltiplos blocos de abas. Por exemplo:

[[tabview]]
[[tab Um]]
[[/tab]]
[[/tabview]]

[[tabview]]
[[tab Dois]]
[[/tab]]
[[/tabview]]

Irá criar:

Dois

Dois

---

Linhas Vazias

Devido à forma como o Wikidot formata o texto, ter linhas vazias normalmente é impossível. No entanto, você pode contornar isso usando tags no-parse. Normalmente, criar linhas vazias seria exibido da seguinte forma:

Texto



Mais texto

Texto

Mais texto

No entanto, ao usar tags no-parse, você pode fazer com que elas sejam exibidas corretamente:

Texto
@@@@
@@@@
@@@@
Mais texto

Texto



Mais texto

Essas tags também podem ser usadas para exibir código sem que ele seja analisado. Por exemplo:

@@ [[div class="example"]] @@

@@ [[/div]] @@

[[div class="example"]]

[[/div]]

---

CSS básico

CSS é uma linguagem usada para aplicar estilo a certos elementos em uma página da web. Pode ser usada para melhorar muito a aparência dos seus artigos. Primeiro, abordaremos alguns conceitos básicos de como a sintaxe do Wikidot funciona junto com o CSS.

---

Elementos Div

Em HTML, elementos div são usados ​​para marcar seções específicas de uma página.

Embora a sintaxe do Wikidot seja um pouco diferente do HTML, você ainda pode criar elementos div da seguinte forma:

[[div]]
Conteúdo.
[[/div]]

Claro que isso não fará nada por si só.

Classes e IDs

Você pode atribuir uma classe ou ID ao seu elemento div adicionando o seguinte:

[[div class="firstDiv"]]
Conteúdo.
[[/div]]

[[div id="secondDiv"]]
Conteúdo.
[[/div]]

Basicamente, isso dá ao navegador uma maneira de identificar os divs. Mais tarde, podemos usar essas classes/IDs para aplicar estilo a eles.

O estilo para IDs tem prioridade sobre o estilo para classes. Você deve usar IDs apenas uma vez, para elementos específicos, enquanto classes podem ser reutilizadas várias vezes para aplicar o mesmo estilo a vários elementos.

---

Sintaxe CSS

Antes de continuarmos, vamos dar uma olhada na sintaxe básica do CSS. A estilização é aplicada através de conjuntos de regras, que consistem em um seletor e um bloco de declaração. Aqui está um exemplo de um conjunto de regras:

.firstDiv {
background-color: black;
border: 1px solid white;
border-radius: 4px;
}

Aqui, ".firstDiv" é o seletor, e a seção no meio é o bloco de declaração. Os blocos de declaração devem estar entre chaves ({}), e cada declaração deve terminar com um ponto e vírgula. O espaçamento e a indentação não são necessários, embora tornem a folha de estilo muito mais legível. Se você quiser, pode ter um conjunto de regras tudo em uma linha:

.firstDiv {background-color: black; border: 1px solid white; border-radius: 4px;}

Seletores

Existem três tipos principais de seletores:

• Seletores de Elementos
• Seletores de Classe
• Seletores de ID

Aqui estão alguns exemplos dos diferentes tipos:

h1 {…}
.classDiv {…}
#idDiv {…}

O primeiro conjunto de regras se aplicaria a todos os elementos h1 (cabeçalho 1) na página. A segunda se aplicaria a todos os elementos com a classe "classDiv". A terceira se aplicaria a todos os elementos com o ID "idDiv". Lembre-se: seletores de classe começam com pontos, seletores de ID começam com hashes.

Tem outro tipo de seletor conhecido como seletor universal, que é usado para selecionar todos os elementos em uma página, embora você geralmente não precise usar isso.

* {…}

Propriedades

Há mais uma coisa que precisamos revisar: Propriedades. Existem centenas de propriedades no CSS, mas não se preocupe - você não precisará usar a maioria delas. Aqui está uma lista curta das propriedades mais comuns que você usará:

• color: Muda a cor do texto no elemento selecionado.
  • Valores: código hexadecimal (#000000), rgb (rgb(0, 0, 0)), etc.

• background-color: Muda a cor do fundo do elemento.
  • Valores: código hexadecimal, rgb, etc.

• background-image: Aplica uma imagem de fundo ao elemento selecionado.
  • Valores: url('IMAGEURL'), linear-gradient(…)

• border: Modifica a borda do elemento.
  • Valores: (tamanho [1px, etc.]), (estilo [solid, dashed, dotted, etc.]), (cor [hex, rgb, etc.])

• border-radius: Arredonda os cantos da borda de um elemento.
  • Valores: pixels, porcentagem, etc.

• margin: Altera o espaço entre um elemento e seu contêiner (o elemento em que está contido).
  • Valores: pixels, porcentagem, etc.
    • Os lados podem ser estilizados de forma independente usando margin-top, margin-bottom, etc.
    • Ao estilizar todos os 4 lados usando um único atributo, o espaçamento é aplicado no sentido horário a partir do topo; então "1px 2px 3px 4px" aplicará uma margem de 1px no topo, 2px à direita, 3px na parte inferior e 4px à esquerda.

• padding: Altera o espaço entre a borda de um elemento e seu conteúdo.
  • Valores: pixels, porcentagem, etc.
    • Semelhante às margens, o espaçamento é aplicado no sentido horário a partir do topo. Os lados podem ser estilizados individualmente usando padding-top, padding-bottom, etc.

• font-family: Altera a fonte do texto no elemento selecionado.
  • Valores: nomes de fontes
    • Você pode adicionar várias fontes aqui (font-family: Arial, Tahoma, sans-serif;) Se uma fonte não estiver disponível por qualquer motivo, o navegador tentará usar a próxima.

• font-size: Altera o tamanho do texto no elemento selecionado.
  • Valores: [8px, etc.], [1em, etc.], menor, maior, [porcentagens]
    • 'em' e escala percentual com base no tamanho atual da fonte do documento. 1em = 100%.

• font-weight: Altera o peso (espessura) do texto no elemento selecionado.
  • Valores: normal, negrito, mais leve, mais negrito, [100, 200, etc.]
    • Dependendo da sua fonte, nem todos os valores podem estar disponíveis.

Tenha em mente que isso é apenas um pequeno punhado de propriedades - o | w3schools é uma ótima referência se você quiser aprender mais!

---

Estilizando Elementos

Ok, agora sabemos tudo sobre a sintaxe CSS. Como estilizamos nosso div? Existem três métodos para fazer isso:

• Estilo inline
• Usando um módulo CSS
• Importando uma folha de estilo

Por enquanto, vamos cobrir apenas os dois primeiros.

Estilo Inline

O estilo inline é o método mais simples, embora menos eficiente, de estilizar elementos. Você deve realmente usá-lo apenas quando precisar estilizar um elemento específico - caso contrário, é muito mais eficiente usar um módulo CSS. Para aplicar estilo inline a um elemento, adicione o atributo style a ele:

[[div style=" "]]
Conteúdo.
[[/div]]

Você pode colar um bloco de declaração dentro do atributo de estilo e ele será aplicado ao div. Por exemplo:

[[div style="background-color: rgb(0,0,0); color: white;"]]
Conteúdo.
[[/div]]

Isso vai criar:

Conteúdo.

Observe que nenhum seletor ou chaves são necessários ao usar estilo inline, embora você ainda deva incluir um ponto e vírgula no final de cada declaração.

Módulo CSS

Uma maneira mais eficiente de estilizar elementos é através do uso de um módulo CSS. Seu análogo em HTML seria uma tag <style>. Para adicionar um módulo CSS, coloque isto no topo do seu documento:

[[module CSS]]

[[/module]]

Você pode colocar conjuntos de regras CSS dentro deste módulo e eles serão aplicados a todo o artigo. Por exemplo:

[[module CSS]]
.exampleRuleSet {
background-color: rgb(0,0,0);
color: white;
}
[[/module]]

---

Exemplos

Tem muitas situações em que usar CSS pode ser útil.

Cenário A

Diga que você quer criar um bloco div que pareça um terminal de computador. O fundo teria que ser preto, com texto branco. Uma fonte monoespaçada também seria boa. Vamos traduzir isso para CSS!

[[div style="background-color: black; color: white; font-family: monospace; font-size: 16px; padding: 2%; border-radius: 5px"]]
| TEXTO
| MAIS TEXTO
[[/div]]

Isso cria:

| TEXTO
| MAIS TEXTO

Vamos analisar o que está acontecendo:

• "background-color: black" define o fundo como preto.
• "color: white" define a cor do texto como branca.
• "font-family: monospace" define a fonte como monoespaçada, semelhante a um terminal de computador.
• "padding: 2%" adiciona um pouco de espaço entre o texto e a borda do bloco div.
• "border-radius: 5px" arredonda os cantos da div em 5px.

Outra maneira de fazer isso seria:

[[module CSS]]
.terminal {
background-color: black;
color: white;
font-family: monospace;
padding: 2%;
border-radius: 5px;
}
[[/module]]

…

[[div class="terminal"]]
| TEXTO
| MAIS TEXTO
[[/div]]

Isso produziria o mesmo resultado, com o benefício adicional de ser facilmente reutilizável com múltiplos divs. Basta atribuir a classe "terminal" a cada div e você está pronto para começar.

---

Temas Customizados

Se você gostaria de adicionar um tema personalizado a uma página, pode criar um você mesmo usando CSS, ou navegar pelos temas já disponíveis aqui.

Um guia sobre como criar seus próprios temas deve estar disponível em breve.