Se você não conseguir editar a wiki após o login, você precisará solicitar direitos de edição usando este formulário. Você será notificado assim que tais direitos de edição lhe forem concedidos.

Ajuda:Universidade Wiki-Wikitexto-Terceira Lição

Fonte: FamilySearch Wiki
Revisão em 06h25min de 21 de setembro de 2017 por Vilmarbarbosa (discussão | contribs)
(dif) ← Revisão anterior | Revisão atual (dif) | Revisão seguinte → (dif)
Saltar para a navegação Saltar para a pesquisa

VOLTAR à Home das lições Wikitexto

Aprenda Wikitexto por pequenos passos com trabalho de casa para praticar o que está aprendendo.


Home Wikitexto > Primeira Lição > Segunda Lição > Terceira Lição


Elementos

Este é o código HTML 

FamilySearch Wiki
Attributes
Attributes go inside Element tags

O que você aprenderá no Wikitexto - Lição Três[editar | editar código-fonte]

  • Crie uma legenda para uma tabela
  • Como criar tabelas
  • Como posicionar tabelas
  • Como dimensionar tabelas
  • Como dimensionar colunas

<fck:hr>

Bordas de tabela[editar | editar código-fonte]

  • Aqui está a tabela que foi criada na lição Dois
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro
  • A tabela necessita uma borda.
  • Para criar uma borda em volta de nossa tabela, adicione à marcação da tabela {| a seguinte codificação:
style="border:1px solid black; "

A marcação da tabela agora se parece assim:

{| style="border: 1px solid black;"
  • Aqui está a tabela com uma borda:
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro

<fck:hr>

Como adicionar títulos a tabelas[editar | editar código-fonte]

  • As tabelas precisam de títulos para lhe dizer do que se trata.
  • Para colocar um título na tabela use os símbolos |+ .
  • Isto vai direto sob a marcação de início da tabela assim:

{|
|+ Alimentos Saudáveis

Alimentos Saudáveis
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro

<fck:hr>

Como adicionar cabeçalhos às colunas da tabela[editar | editar código-fonte]

  • A tabela precisa de cabeçalhos de coluna para dizer sobre o que trata as colunas.
  • Para colocar um cabeçalho de coluna use o símbolo ponto de exclamação !.
  • Desde que há quatro colunas você precisa de quatro pontos de exclamação.
  • O ponto de exclamação segue uma marcação de fileira |- como faz as marcações de células |.
  • Isto parecerá assim:

{|
|+ Alimentos Saudáveis
|-
! Frutas
! Vegetais
! Nozes
! Grãos

Alimentos Saudáveis
Frutas Vegetais Nozes Grãos
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro
  • Observe que os cabeçalhos das colunas estão em negrito.

Atributos de Estilo em Linha[editar | editar código-fonte]

Para pôr uma borda ao redor da tabela acima, instalamos esta codificação:

{| style="border: 1px solid black;"
  • Antes de continuar, vamos entender a codificação. Você usará esta codificação muitas vezes em edição.
  • A codificação é chamada de Atributos de Estilo em Linha
    • Por que a codificação é sobre uma linha, isto é referido como estilo em linha.
    • O atributo neste caso é: border
    • É introduzido por: style=
    • O atributo é cercado por aspas.
  • O atributo é a borda, mas para dar a ela caracteristica, isto requer propriedade e valor.
  • Observe que o valor em nosso atributo da borda tem três partes: 
  • 1px isto diz a espessura da linha.
  • solid isto diz a característica da linha. Pode ser tracejada, pontilhada, dobrada, etc.
  • black isto diz a côr da borda.
  • Não há pontuação entre estes valores, só espaços.
  • Para fazer, talvez, o conceito dos atributos com suas propriedades e valores mais claro, vamos usar termos mais familiares. para descrever uma pessoa, podemos afirmar seus atributos físicos na forma de propriedade:valor assim:  
côrdosolhos:azul or cabelo:nenhum or altura:dois metros

Se estes três atributos fossem postos em nossa {| marcação nosso elemento ficaria assim:

{| style="côrdosolhos:azul; cabelo:nenhum; altura:dois metros"|}
  • Observe: ponto e vírgula separam os atributos individuais.

Atributo de Largura[editar | editar código-fonte]

  • Para controlar a largura dos itens numa página, vamos discutir o atributo de largura.
  • Se queremos fazer a tabela mais larga do que é, nós adicionamos o seguinte atributo à codificação já existente:
    width:100%
  • A codificação agora se parece assim::
{| style="border: 1px solid black; width:100%"
  • A largura está 100% da largura da página e se parece com isso:
Alimentos Saudáveis
Frutas Vegetais Nozes Grãos
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro
  • Aqui nós usamos uma largura de 100%, mas você pode reduzir a porcentagem do elemento em pixel exatos, se quiser.
  • Se quer que a tabela para somente 300 pixel de largura, substitua 100% por 300px.

Atributo de Alinhamento[editar | editar código-fonte]

  • Para posicionar texto numa página você usa o atributo de alinhamento.
  • O título para nossa tabela está alinhado no lado esquerdo da página. 
  • Se nós queremos centralizá-lo sobre a tabela, nós adicionamos o seguinte código à linha do título |+.

Se parecerá como isto: 

|+ style="text-align:center"|Alimentos Saudáveis
  • Observe o tubo | separando a codificação do título Alimentos Saudáveis. 
  • Nossa tabela agora se parece com isto:


Alimentos Saudáveis
Frutas Vegetais Nozes Grãos
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro
  • Se queremos centralizar os cabeçalhos de coluna, nós poderiamos instalar o alinhamento de texto a cada um dos cabeçalhos dessa maneira:

! style="text-align:center"|Frutas
 ! style="text-align:center"|Vegetais
 ! style="text-align:center"|Nozes
 ! style="text-align:center"|Grãos

  • A nossa tabela poderia ser como esta:
Alimentos Saudáveis
Frutas Vegetais Nozes Grãos
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Perass Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro
  • Observe que os cabeçalhos estão agora no centro das colunas. 
  • Aqui está o código para o título e cabeçalho de coluna em nossa tabela até agora: 

{| style="border: 1px solid black;"
|+ style="text-align:center"|Alimentos Saudáveis
|-
 ! style="text-align:center"|Frutas
 ! style="text-align:center"|Vegetais
 ! style="text-align:center"|Nozes
 ! style="text-align:center"|Grãos


Dimensão da Fonte[editar | editar código-fonte]

  • Nosso título agora está centralizado mas é uma fonte pequena.
  • Você pode querer fazer o título maior. 
  • Faremos isto com o atributo dimensão de fonte font-size

Vamos aumentar a fonte do título para 24 pixels. 

Alimentos Saudáveis
Frutas Vegetais Nozes Grãos
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro
  • Aqui está o código adicional para colocar na marcação do título: 

|+ style="text-align:center;font-size:24px;"|Alimentos Saudáveis


Margens[editar | editar código-fonte]

  • Você observará que o título está sobrepondo o topo da tabela.
  • Deve haver um pequeno espaço entre o título e o topo da tabela.
  • Isto é feito com o atributo margin
  • À marcação da tabela {| adicione o seguinte código.
  • margin-bottom:10px
Alimentos Saudáveis
Frutas Vegetais Nozes Grãos
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro


|+ style="text-align:center; font-size:24px; margin-bottom:10px; " | Alimentos Saudáveis

Forração (acolchoamento)[editar | editar código-fonte]

  • Que tal se a gente pensar que as células individuais na tabela precisassem ser maiores para criar mais espaço entre os itens na tabela.
  • Aqui nós usaremos o atributo de forração padding 

Vamos colocar 10 px de forração ao redor de todos os cabeçalhos de coluna.

  • Aqui o código vai ficar assim:

! style="text-align:center; padding:10px; "|Frutas

Alimentos Saudáveis
Frutas Vegetais Nozes Grãos
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro

Cores - Fundo[editar | editar código-fonte]

  • Que tal se a gente quisesse alternar as cores das fileiras para melhor separa-las umas da outras.
  • Para instalar cores nós usamos o seguinte código nas marcações de fileiras assim:
|- style="background-color:lightblue"
  • Se alternarmos as cores das fileiras da tabela se parecerão assim:
Alimentos Saudáveis
Frutas Vegetais Nozes Grãos
Maçãs Ervilhas Nozes Aveia
Laranja Cenouras Amêndoas Cevada
Peras Milho Amendoim Trigo
Cerejas Feijões Caju Trigo Mouro
  • O nome das cores foi padronizado. 
  • Clique aqui para uma lista completa de nomes das cores que a wiki reconhecerá. 
  • Ao invés de usar nomes você pode usar os códigos HEX também.. Você verá códigos HEX para a côr muitas vezes na wiki. Você pode querer se acostumar a usá-los em vez dos nomes.
  • Os atributos da côr de fundo podem ser usados em todas as tabelas, blocos de texto, etc. Você verá seguidamente caixas com texto nelas com cores de fundo instaladas. Estas caixas podem ser  templates (modelos).

Templates (Modelos)[editar | editar código-fonte]

Alguma coisa que você verá frequentemente em artigos são templates.

  • Templates são basicamente caixas de informação ou links que você quer ser capaz de colocar em muitas páginas. Isto reduz a digitação quando tudo o que tem a fazer é instalar um código curto para o template que quer colocar.
  • Se você olhar no Wikitexto, eles estão usualmente cercados em duplos traços assim: {{Nome do Template}}
  • Através de redigitando o código do template você o pode reinstalar em outro lugar na página sem ter que redigitar toda a informação contida nele.
  • Isto é uma ferramenta muito útil.
  • Eles são criados como um artigo regular, mas você os salva com Template:Nome do Artigo.
  • E para colocar o template você digita somente: {{Nome do Template}}.
  • Isto vai mostrar na página onde você digitou o código. 
  • Se quiser move-lo, basta redigitá-lo em outro lugar na página. 
  • Quase todos os artigos têm modelos neles. Para ver a lista, clique em Editar Esta Página e vá para a parte inferior da página para uma lista. Você pode clicar sobre eles para ver como eles estão codificados

Barras Laterais (Sidebars)[editar | editar código-fonte]

  • Barras laterais são templates.
  • Elas são usualmente colocadas num lado ou outro num artigo.
  • Barra lateral esquerda, acima, juntamente com as barras laterias à direita são exemplos.
  • Elas são criadas como templates.

Migalhas (Breadcrumbs)[editar | editar código-fonte]

Migalhas são trilhas no topo de uma página que mostra ao procurador o tópico principal de onde o artigo veio.

  • Elas são basicamente links internos separados por uma seta.
  • Aqui está o código para a migalha no topo dessa lição:

[[HTML and Wikitext - Lição Um One|Llição 1]] > [[HTML and Wikitext - Lição Dois|Lição 2]] > [[HTML and Wikitext - Lição Três|Lição 3]] > [[HTML and Wikitext - Lição Quatro|Lição 4]] > [[HTML and Wikitext - Lição Cinco|Lição 5]] > [[{{NOMEDAPÁGINA}}]]


  • Observe que uma seta > foi usada para separar cada link interno. Há algumas setas personalizadas na base de dados da imagem que você pode usar também. .
  • Se você está se perguntando sobre o [[{{NOMEDAPÁGINA}}]], ela é um template pequeno que coloca o nome do artigo no local que este template é incorporado, o que neste caso está na migalha no topo do artigo em fonte preta.  Isto salva um pouco de digitação e também de cometer erros na digitação se é um título longo.
  • Para mais informações sobre menu superior veja: Trilhas de Migalhas.

Referências[editar | editar código-fonte]

Referência não é nada mais do que notas de rodapé.

  • O código <ref>Reference</ref> é instalado logo após a palavra que você quer colocar uma nota de rodapé assim:

Quem disse; "Nenhum sucesso pode compensar o fracasso no lar."<ref> Cotado  de J. E> McCullough, Home: The Savior of Civilization [1924], 42; Conference Report Apr. 1935, 116.</ref>

  • A sentença com a ref  se parecerá assim no artigo:

Quem disse; "Nenhum sucesso pode compensar o fracasso no lar."[1]

  • Observe um número sobrescrito dentro dos colchetes.
  • Clique no número e você será levado à referência na parte inferior da página ou onde quer que tenha colocado as notas de rodapé. 
  • Na parte inferior da página ou onde quer que as notas de rodapé apareçam, instale esse código:

{{reflist}}.

  1. Quoted from J. E&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; McCullough, Home: The Savior of Civilization [1924}, 42; Conference Report Apr. 1935, 116.

Categorias[editar | editar código-fonte]

  • Todo artigo precisa ser colocado numa categoria.
  • O código é

[[Categoria:Nome da categoria]]

Negrito e Itálico[editar | editar código-fonte]

  • Para tornar palavras em negrito.
  • Instale três apóstrofos antes e depois da palavra ou palavras para ficar em negrito. 

'''texto em negrito'''

  • Para tornar palavras em itálico.
  • Instale dois apóstrofos antes e depois da palavra ou palavras para ficar cursiva ou itálica.

''palavra itálica''