Ajuda:HTML
| Guia avançado |
|---|
| HTML |
| CSS |
| Parser functions |
| Magic words |
| Monobooks |
| JavaScript |
| MediaWiki |
| Extensões |
| Developer |
| Bugzilla |
HTML é a linguagem básica de qualquer página na internet. Utilizando seus elementos de linguagem, as Tags, é possível mudar a cor e o tamanho do texto, criar tabelas, adicionar imagens e manipular vários detalhes na formatação. Na Wikimotorpédia essa linguagem é manipulada para facilitar o trabalho dos editores, modificando o modo como se adiciona imagens, cria tabela, cria seções, entre outras funções que estão no Guia de edição, e também para proibir algumas tags para que os editores não cometam excessos na edição dos artigos. Neste guia será apresentado as funções HTML que são permitidas na Wikipédia e o que elas fazem para aumentar as possibilidades na edições.
O MediaWiki aceita os seguintes elementos da linaguagem HTML5:
- <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> - <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"> </syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">- </syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
- </syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
- </syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight>
- <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">- </syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><rp></syntaxhighlight>
- <syntaxhighlight lang="html5" enclose="none"><rt></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><ruby></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><s></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><small></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><span></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><strong></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><sub></syntaxhighlight>
- <syntaxhighlight lang="html5" enclose="none"><sup></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><table></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><td></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><th></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><tr></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><u></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><ul></syntaxhighlight> <syntaxhighlight lang="html5" enclose="none"><var></syntaxhighlight>
== Tags de formatação ==
{| class="wikitable"
|-
!Tag
!Descrição
!Exemplo
!Resultado
|-
|'''<syntaxhighlight lang="html5" enclose="none"><!-- ... --></syntaxhighlight>'''
|Faz um comentário que só é visto no código da página
|<syntaxhighlight lang="html5">
<!-- comentário -->
texto da página
</syntaxhighlight>
|texto da página
|-
|'''<syntaxhighlight lang="html5" enclose="none"><br /></syntaxhighlight>'''
|Quebra a linha
|<syntaxhighlight lang="html5">linha 1<br />linha 2<br />linha 3</syntaxhighlight>
|linha 1<br />linha 2<br />linha 3
|-
|'''<syntaxhighlight lang="html5" enclose="none"><b></syntaxhighlight><br /><syntaxhighlight lang="html5" enclose="none"><strong></syntaxhighlight>'''
|Deixa o texto em negrito<br /><small><syntaxhighlight lang="html5" enclose="none"><b></syntaxhighlight> é mais usada</small>
|<syntaxhighlight lang="html5">
texto normal
<b>texto em negrito</b>
</syntaxhighlight>
|texto normal
<b>texto em negrito</b>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><i></syntaxhighlight><br /><syntaxhighlight lang="html5" enclose="none"><var></syntaxhighlight><br /><syntaxhighlight lang="html5" enclose="none"><cite></syntaxhighlight>'''
|Deixa o texto em itálico<br /><small><syntaxhighlight lang="html5" enclose="none"><i></syntaxhighlight> é mais usada</small>
|<syntaxhighlight lang="html5">
texto normal
<i>texto em itálico</i>
</syntaxhighlight>
|texto normal
<i>texto em itálico</i>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><u></syntaxhighlight>'''
|Deixa o texto sublinhado
|<syntaxhighlight lang="html5">
texto normal
<u>texto sublinhado</u>
</syntaxhighlight>
|texto normal
<u>texto sublinhado</u>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><s></syntaxhighlight><br /><syntaxhighlight lang="html5" enclose="none"><del></syntaxhighlight><br /><syntaxhighlight lang="html5" enclose="none"><strike></syntaxhighlight>'''
|Deixa o texto riscado<br /><small><syntaxhighlight lang="html5" enclose="none"><s></syntaxhighlight> é mais usada</small>
|<syntaxhighlight lang="html5">
texto normal
<s>texto riscado</s>
</syntaxhighlight>
|texto normal
<s>texto riscado</s>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><small></syntaxhighlight>'''
|Diminui o tamanho da fonte
|<syntaxhighlight lang="html5">
texto normal
<small>texto menor</small>
<small><small>texto menor</small></small>
</syntaxhighlight>
|texto normal
<small>texto menor</small>
<small><small>texto menor</small></small>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><sup></syntaxhighlight>'''
|Sobrescreve o texto
|<syntaxhighlight lang="html5">
texto normal
texto<sup>sobrescrito</sup>
</syntaxhighlight>
|texto normal
texto<sup>sobrescrito</sup>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><sub></syntaxhighlight>'''
|Subscreve o texto
|<syntaxhighlight lang="html5">texto normal<br />
texto<sub>subscrito</sub></syntaxhighlight>
|texto normal<br />texto<sub>subscrito</sub>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><blockquote></syntaxhighlight><br /><syntaxhighlight lang="html5" enclose="none"><dd></syntaxhighlight>'''
|Igual a começar a linha com dois pontos (''':'''), só que com o ''blockquote'' o espaço é maior
|<syntaxhighlight lang="html5"><blockquote>texto 1</blockquote>
<dd>texto 2</dd>
- texto 3</syntaxhighlight>
|
<blockquote>texto 1</blockquote>
<dd>texto 2</dd>
- texto 3
|-
|'''<syntaxhighlight lang="html5" enclose="none"><code></syntaxhighlight>'''
|Indica fragmentos de código, geralmente em uma fonte monoespaçada
|<syntaxhighlight lang="html5">
texto normal seguido de
<code>um fragmento de código-fonte</code>
</syntaxhighlight>
|texto normal seguido de
<code>um fragmento de código-fonte</code>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><dl></syntaxhighlight><br /><syntaxhighlight lang="html5" enclose="none"><dt></syntaxhighlight><br /><syntaxhighlight lang="html5" enclose="none"><dd></syntaxhighlight>'''
|As três tags juntas criam<br />uma lista igual a:<code><br />;texto<br />:texto</code>
|<syntaxhighlight lang="html5"><dl>
<dt>texto1
<dd>texto2<dl><dd>texto3</dl>
</dl></syntaxhighlight>
|<dl><dt>texto1<dd>texto2<dl><dd>texto3</dl></dl>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><span></syntaxhighlight>'''
|Por si so não faz nada,<br /> apenas delimita um texto<br />para adição de CSS
|<syntaxhighlight lang="html5">
texto
<span>texto</span>
<span style="background: #D2B48C;">texto</span>
</syntaxhighlight>
|texto
<span>texto</span>
<span style="background: #D2B48C;">texto</span>
|-
|'''<syntaxhighlight lang="html5" enclose="none"><pre></syntaxhighlight>'''
|Exibe o texto com fonte<br />monoespaçada dentro de um quadro<br />e ignora os códigos
|<syntaxhighlight lang="html5">
<pre>
texto<br /><u>texto</u>
- texto ''texto'' {{azul|texto}}
- texto texto texto</syntaxhighlight>
|texto<br /><u>texto</u>
;texto ''texto'' {{azul|texto}}
- texto texto texto
|}
Tags com atributos
Algumas tags possuem atributos, que são códigos colocados após o nome da tag e antes do ">", por exemplo, <nome_da_tag atributo=valor>. Deve sempre existir um espaço entre o nome da tag e o atributo e entre atributos, e não deve existir espaço entre o atributo e seu valor, a não ser que o espaço esteja dentro de aspas, por exemplo, <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight>.
Tags modificadas pelo MediaWiki
O software da Wikimotorpédia modifica o efeito de algumas tags para que tenham o efeito de um dos códigos de edição da Wikimotorpédia
Tag
Função original
Função na Wikimotorpedia
<syntaxhighlight lang="html5" enclose="none"></syntaxhighlight>
<syntaxhighlight lang="html5" enclose="none"></syntaxhighlight>
<syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight>
<syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight>
<syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight>
<syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight>
Criar um título.
Cria uma seção
<syntaxhighlight lang="html5" enclose="none">Seção
</syntaxhighlight> é igual a =Seção=
<syntaxhighlight lang="html5" enclose="none">Seção
</syntaxhighlight> é igual a ==Seção==
<syntaxhighlight lang="html5" enclose="none">Seção
</syntaxhighlight> é igual a ===Seção===
<syntaxhighlight lang="html5" enclose="none">Seção
</syntaxhighlight> é igual a ====Seção====
<syntaxhighlight lang="html5" enclose="none">Seção
</syntaxhighlight> é igual a =====Seção=====
Tabelas
É muito mais fácil criar tabelas com a sintaxe wiki do que em HTML, pois para se fazer uma tabela usando apenas HTML seria necessário um código bem maior. No MediaWiki, o código "{|" que inicia uma tabela substitui a tag <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight>, o "|-" substitui a tag <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight> e "|" substitui a tag <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight>. Apesar dessa mudança, também é permitido o uso de atributos na tabela.
Atributos de tabela
Atributos que só funcionam no "{|" (<syntaxhighlight lang="html5" enclose="none"></syntaxhighlight>).
Atributo
Descrição
Exemplo
Resultado
border
Indica se devem ou não ser exibidas bordas em torno das células. Os únicos valores permitidos são:
- ""
- sem bordas
- "1"
- com bordas (apenas se a tabela não estiver sendo usada para definir o layout do conteúdo)
{| border="1"
|-
| 00 || 01
|-
| 10 || 11
|}
00
01
10
11
Elementos obsoletos
Os seguintes elementos foram depreciados e são inválidos em HTML5:
- <syntaxhighlight lang="html5" enclose="none">
</syntaxhighlight>
- <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight>
- <syntaxhighlight lang="html5" enclose="none"></syntaxhighlight>
Para informações sobre como utilizar HTML5 e CSS para obter resultados similares, consulte Wikimotorpédia:Projetos/HTML5.
Ver também