Desciclopédia:Tutorial/HTML e CSS

Origem: Desciclopédia, a enciclopédia livre de conteúdo.
Ir para navegação Ir para pesquisar
Desciclopedia.png
E
s
s
e
n
c
i
a
l
Manual do Desciclopediano
Os dez mandamentos
Como ser engraçado
e não apenas idiota
Regras
B
á
s
i
c
o
Introdução
Página de testes
Wikificação
Utilizar HTML/CSS
Adicionar imagens, vídeos e áudios
I
n
t
e
r
m
e
d
i
á
r
i
o
Convenção de títulos
Criar tabelas
Mover e redirecionar páginas
Adicionar/criar categorias
Adicionar uma predefinição
Criar uma predefinição
S
o
c
i
a
l
Páginas de discussão e arquivamento
Página de usuário
Personalizar assinatura
Criando o seu status
Conheça os fóruns
G
e
r
a
l
Solução de problemas
Guia Prático da Wikipedia
Fórmulas Matemáticas
Outros
  • 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.

Principais tags HTML/Wiki

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:

Um exemplo de código em itálico.
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 risca a palavra
<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.


Outros tipos de tags

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.


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

Outras tags

Outros tipos de tags podem ser usadas em páginas da Desciclopédia menos frequentemente.

  • font
A tag font era 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 Enter e 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, o poem pode 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.svg ACABOU!! ACABOU!! É TETRAA! É TETRAA!!! Cquote2.svg
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!


Ver também