Ajuda:HTML e CSS
- Nota: Se você já manja das bruxarias, pode pular direto para a seção com os códigos (clique aqui)
- Dica: Caso haja dúvidas em relação aos parâmetros HTML exemplificados aqui, clique em editar no topo da página para ver como eles foram criados.
Ahoy novatas e novatos, vocês entraram de cabeça neste mundinho de fantasia chamado Desciclopédia e finalmente chegaram à parte mais interessante e divertida de nosso tutorial básico: CÓDIGOS!! Esperamos que tenham prestado bastante atenção às aulas anteriores. Se não prestaram atenção (削除) foda-se (削除ここまで) favor ler de novo ao menos a aula de wikificação (clique aqui).
Bom, "HTML" significa HyperText Markup Language. Mas e daí? (削除) Só nerds querem saber (削除ここまで) não é necessário saber. Antes de começarmos, vamos a alguns princípios básicos:
- O HTML é uma linguagem de tags.
- As tags, ou "marcações", são sinais dentro do texto do artigo que modificam a página. Podemos definir uma tag HTML com dois sinais de maior que e menor que, assim como neste exemplo:
<tag>Uma frase qualquer</tag>. Percebeu a técnica avançadíssima que usamos? Pois é.
- Abriu, tem que fechar.
- Sabe quando você esquece uma torneira aberta na sua casa e acaba molhando tudo? Visualizou a situação? É assim com a maioria dos códigos HTML. É muito comum um artigo qualquer ficar cagado por causa de uma tagzinha aberta, e a maioria dos "bugs" que aparecem em artigos são devidos a esses pequenos errinhos, muito fáceis de se consertar. Então, pega a referência: abriu? fecha, querida! Veja novamente o exemplo:
<tag>Uma frase qualquer</tag>
- Sentiu o poder da magia? Abrimos com um <tag>, fechamos com um </tag>. Muito simples!
- Nem todos as tags funcionam na DP
- Devido às pequenas limitações técnicas de nosso servidor movido a lenha, nem todas as tags têm efeito na Desciclopédia.
Já vimos como funciona a marcação, agora vamos às principais tags HTML já testadas na Desciclopédia. Existem muitos comandos que modificam seu texto nos artigos, aqui estão os que você mais vai usar:
| Código | Efeito |
|---|---|
| ''texto'' | Isso deixa seu texto itálico |
| '''texto''' | Isso deixa seu texto negrito |
| '''''texto''''' | Isso deixa seu texto itálico e negrito |
| <s>riscado</s> | Isso |
| <u>sublinhado</u> | Isso sublinha a palavra |
| <sub>subscrito</sub> | Isso deixa seu texto subscrito |
| <sup>sobrescrito</sup> | Isso deixa seu texto sobrescrito |
| *item 1 *item 2 **item 2.1 *item 3 |
Separa em itens sem numeração |
| #item 1 #item 2 ##item 2.1 #item 3 |
Separa em itens com numeração |
| :parágrafo | Faz parágrafos |
| espaço | Anula quebras de página |
Vamos ver como funciona na prática? Quando você aperta em editar no topo da página, verá uma caixa de texto onde poderá fazer suas travessuras. Por exemplo, se eu escrever isso:
'''Jair Bolsonaro''' é um adepto do <s>comunismo</s> ''golden shower''.
O sistema wiki interpretará isso e produzirá o seguinte resultado:
Jair Bolsonaro é um adepto do (削除) comunismo (削除ここまで) golden shower.
Basicamente é o mesmo princípio para quase todas as tags HTML. Você pode testar esses comandos à vontade na sua página de testes.
Existem tags que não precisam de "fechamento" para funcionarem. Geralmente as definimos assim: <tag />, ou simplesmente <tag>. Veja:
| Código | Efeito |
|---|---|
| <br /> | Define uma quebra de linha. Tudo o que vier depois desta tag será deslocado para a próxima linha. |
| <hr> | Insere uma linha horizontal. |
Utilizando CSS
Sabe aqueles botões em assinaturas que você sempre quis fazer, como em Flag of Brazil.svg Desciclopédia disc. cont. ? Esse é o poder do CSS (Cagando e Sujando o Seu rabo). O CSS são comandos que turbinam as tags HTML e servem para fazer essas coisinhas gays que vemos em assinaturas de descíclopes e predefinições em geral.
Fundo colorido
É muito fácil usar CSS. Neste exemplo usaremos a tag span, que é muitíssimo útil para a aplicação desta linguagem, para criarmos um textinho com fundo laranja. Veja:
<span style="background-color:orange;">Texto com fundo laranja.</span>
Diferente, não? Calma, não precisa se assustar. Veja como o comando style="background-color:orange;" está "embutido" dentro da tag span, o que dá poderes a ela. Observe o resultado:
Texto com fundo laranja.
Assim, se abrem infinitas possibilidades de estilos de textos variados, apenas enfiando sem dó comandos como esse dentro das tags.
Bordas
Se você quiser inserir uma borda no nosso texto com fundo laranja, por exemplo, basta ditar o comando:
<span style="background-color:orange; border:1px solid black;">Texto com fundo laranja e borda preta sólida.</span>
Veja que definimos uma borda (border:), e então controlamos suas medidas (1 px de largura) e seu estilo (solid black), sempre colocando um ponto e vírgula no final de cada comando. Observe o resultado:
Texto com fundo laranja e borda preta sólida.
Existem diferentes tipos de estilos e cores que podem ser usadas em bordas. Os estilos disponíveis, além do solid, são dotted, dashed, double, outset, inset, groove e ridge.
Cor no texto
Quanto às cores, é muito simples. Ao adicionar, por exemplo, color:brown ao código ali de cima, fica assim:
<span style="background-color:orange; border:1px solid black; color:brown;">Texto com fundo laranja, borda preta sólida e cor marrom.</span>
Isso resulta em:
Texto com fundo laranja, borda preta sólida e cor marrom.
Segue a mesma lógica que você aprendeu nas aulinhas de inglês: red, green, blue e guaraná com rolha. Segue aqui a lista de numeração de cores para utilizar.
Fonte
| Fontes mais usadas na DP |
|---|
| Arial |
| Times New Roman |
| Old English Text MT |
| Tahoma |
| Monospace |
| Cursive |
É possível personalizar a fonte de seu texto, sempre seguindo a mesma lógica dos exemplos anteriores. Veja:
<span style="font-family: Tahoma;">Texto em fonte Tahoma.</span>
Que resulta em:
Texto em fonte Tahoma.
Além de font-family, existe o comando font-size, que serve para modificar o tamanho de seu texto, assim:
<span style="font-size:15px;">Textão</span>
Textão
Outros tipos de tags podem ser usadas em páginas da Desciclopédia menos frequentemente.
- font
- A tag
fontera muito usada no passado por modificar coisinhas no texto sem muito código. Veja:
<font face="Tymes New Roman" size="4px" color="Blue">Texto com tag Font!</font>
Texto com tag Font!
- Hoje, seu uso não é recomendado por ser obsoleta.
- poem
- O sistema wiki ignora quebras de linha no texto do usuário. Se você escrever qualquer frase, apertar
Entere continuar escrevendo, o texto aparecerá como se estivesse escrito na mesma linha. Para não ter que usar<br />toda santa vez que quiser pular apenas uma linha, opoempode fazer isso por você. Quer um exemplo?
- Verso da batatinha escrito sem o "poem"
Batatinha quando nasce Se esparrama pelo chão A menina quando dorme Põe a mão no coração
- Verso escrito com o "poem"
Batatinha quando nasce
Se esparrama pelo chão
A menina quando dorme
Põe a mão no coração
Enfim, já dá pra fazer altas coisas (削除) idiotas (削除ここまで) legais com isso tudo.
Finalizando
Cquote1.png ACABOU!! ACABOU!! É TETRAA! É TETRAA!!! Cquote2.png
Descíclope novato ao final da aula
Ok gente, chegamos ao final de nossa aulinha de códigos. Não esqueça de testar o que aprendeu em sua página de testes pessoal, e em caso de qualquer dúvida, pode consultar um descíclope mais experiente ou ir ao fórum de ajuda especializada (clique aqui). Isso é tudo, pessoal!