InícioCalendárioFAQBuscarMembrosGruposRegistrar-seConectar-se

Compartilhe | 
 

 [Tutorial]Layouts: linguagem HTML (parte 1)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Miss Days

avatar

Mensagens : 4
Data de inscrição : 16/04/2011

MensagemAssunto: [Tutorial]Layouts: linguagem HTML (parte 1)   Dom Abr 17, 2011 12:55 am

Vou criar uma série de tópicos que explicam as bases da edição dos layouts (perfis) nas páginas pessoais dos jogadores, uma vez que há muitos jogadores que me pedem ajuda mas é extremamente difícil ajudá-los, pois é necessário um relativo conhecimento desta linguagem, que é a que constrói as páginas da Internet. Os tutoriais têm como objectivo dar a conhecer os códigos HTML a pouco e pouco e mostrar códigos base que podem alterar para criar os vossos layouts.

Antes de começar deixo um link extremamente útil para quem quer aprender mais do que vou tentar explicar Wink
Tutorial HTML e CSS

Ora bem, a "linguagem" usada para criar páginas da Internet é diferente da que se usa para escrever histórias no Word. As páginas da Internet são escritas com linguagem HTML, que usa as mesmas letras mas tem "comandos" diferentes. Ou seja, quando fazemos "Enter" no Word estamos a criar um parágrafo, e o comando HTML para criar um parágrafo é diferente, não é carregar no "Enter".
Esta primeira parte serve para explicar as bases da linguagem HTML.

-> Como usar isto no perfil?
Quando editamos as nossas páginas de jogador, aparece uma caixa branca onde podemos mexer na nossa apresentação, escrever, mudar cores, etc. Do lado direito dessa caixa há um botão que diz "Modo de escrita": HTML. Quando seleccionamos o "HTML", a caixa branca onde aparecia a nossa apresentação passa a mostrar um texto. É a linguagem HTML com que a página está a ser "escrita", o que o Internet Explorer, Firefox, Google Chrome, etc. fazem é transformar essas letras do Modo HTML na nossa bela apresentação.
Atenção, o howrse é muito esquisito com a linguagem HTML que aceita (porque há várias "versões"); o código tem que ser muito bem escrito para resultar...


Fundamentos da linguagem HTML

A linguagem HTML baseia-se no uso das chamadas "tags". As "tags" são os comandos que indicam o que é que estamos a fazer, se estamos a mandar fazer um parágrafo, uma tabela, a pôr em itálico... As tags não aparecem nas páginas de Internet porque os browsers lêem-nas e fazem o que elas mandam, ou seja, em vez de aparecer a tag do parágrafo, aparece logo um parágrafo feito como se tivéssemos carregado "Enter". A base das tags é que, depois de se abrir uma tag, tem que se fechar. Se isto não acontecer então a tag não funciona e aparece texto em vez da "ordem" que nós demos.
As tags são TODAS simbolizadas pelos símbolos < e > com a tag lá dentro. (Exemplo: <p> <b> <br> <table>)

Como disse, as tags têm que ser fechadas. A tag <br> que referi acima é uma excepção. As tags fecham-se colocando o símbolo / dentro da tag: </p> </b> </table>

Vamos pegar na tag <b>. Esta é a tag que manda o texto ficar a negrito. Imaginemos a frase:
O José foi às compras.

Agora vamos pensar que queremos pôr a palavra "compras" a negrito. Usando linguagem HTML, isso seria feito da seguinte forma:
O José foi às <b>compras</b>.

Isto, quando é lido por um browser, origina a frase:
O José foi às compras.

Se não fecharmos a tag, tudo o que vem à frente fica a negrito.
Os perfis do howrse são muito esquisitos, as tags têm que ser válidas e tem que estar tudo perfeitamente fechado, mesmo quando os browsers lêem bem sem se fechar (é o caso do <p>, que quando não se fecha, quando se põe outro <p> à frente, o browser põe um novo parágrafo).

Recapitulando...
  • As tags dão significado ao que se escreve e dão os "comandos" do que fazer.
  • As tags têm que se fechar.
  • O formato de uma tag é <tag>O texto que aparece</tag>


Algumas tags:
<p> - usada para fazer um parágrafo. Fecha-se no fim do parágrafo.
<br> - usada para fazer uma "quebra de linha", uma espécie de de parágrafo mas com um espaçamento mais pequeno em relação ao parágrafo anterior. Não precisa de ser fechada.
<b> - põe o texto a negrito. Fecha-se quando termina o texto que queremos pôr a negrito.
<i> - põe o texto em itálico. Fecha-se quando termina o texto que queremos pôr em itálico.
<u> - põe o texto sublinhado. Fecha-se quando termina o texto que queremos pôr sublinhado.
<center> - serve para centrar na página o que quer que seja que se coloque entre tags. Pode-se abrir no princípio da página e fechar no fim, o que faz com que tudo fique centrado.


Mas isto não é tudo... Complica mais!
Arrow Os atributos

Os atributos são pedaços extra de informação que adicionamos na tag de abertura e que servem para modificar essa tag. Aqui é que a coisa se complica; se o número de tags é limitado, atributos há imensos. Os atributos servem, por exemplo, para determinar a cor do texto, o seu tamanho, o tamanho de uma imagem, a cor das bordas... Portanto já estão a ver que são muuuuuuuuuuitos... O que é preciso saber é que os atributos se escrevem sempre com "
O aspecto de um atributo é <tag atributo="valor">Cavalos</tag>
Ou seja: <p color="blue">O José foi às compras.</p>
Neste caso o atributo é a cor.
Pode-se adicionar mais do que um atributo! Por exemplo:
<p color="blue" align="center">O José foi às compras.</p>
Neste caso o texto aparece a azul mas também centrado.

É com uma mistura de atributos que criamos o nosso layout.

Destes há que salientar um muito importante que complica ainda mais ( No ) as coisas. O atributo "style".
A razão por que complica ainda mais as coisas é porque podemos "pôr atributos" dentro deste atributo. O atributo style muda a linguagem do documento! Ou seja, dentro do atributo style não se escreve HTML, escreve-se CSS. A linguagem CSS é usada para "dar estilo" ao HTML =) Digamos que o HTML dá a estrutura e o CSS põe as cores. A vantagem do CSS é que condensa imenso a informação e dá para "fazer mais coisas", por a linguagem HTML é uma linguagem estruturante (manda fazer coisas, tabelas, parágrafos, etc.); actualmente defende-se que tudo o que é "beleza" deveria ser tratado com linguagem CSS e não HTML (como cores de textos e de fundo).

Arrow O atributo style e a linguagem CSS
Este atributo aparece da mesma maneira que os outros. Vamos ver o exemplo anterior:
<p color="blue" align="center">O José foi às compras.</p>
O atributo style apareceria da seguinte forma:
<p color="blue" align="center" style="font-weight:bold">O José foi às compras.</p>
Agora o texto está, azul, centrado e a negrito.

Olhemos para o atributo style... Como vimos, ele aparece na mesma forma que os outros (style="valor"). O que muda é como se escreve lá dentro. Para começar, a linguagem que se usa dentro deste atributo é linguagem CSS. É uma linguagem "paralela" com o HTML. As tags do HTML correspondem aos "selectors", mas não se usam no nosso caso. Em vez de atributos, a linguagem CSS atribui "propriedades". Ou seja, no nosso exemplo, estamos a atribuir uma propriedade à tag <p> porque pusemos o atributo style dentro dela; a propriedade que nós atribuímos foi o estilo do parágrafo, que ficou todo a negrito.
A grande vantagem deste atributo é que podemos condensar tudo! Ou seja, podemos passar todos os atributos que já tínhamos usado para dentro do atributo style! Voltamos ao nosso exemplo:
<p color="blue" align="center" style="font-weight:bold">O José foi às compras.</p>
Passa para:
<p style="font-weight:bold; font-color:blue; text-align:center">O José foi às compras.</p>


Claro que isto complica tudo... porque é preciso saber duas linguagens...
Mas o site lá no topo de tudo tem todas as tags, atributos, propriedades e valores que se podem dar, o que ajuda muito! ^_^

No entanto há maneiras fáceis de criar layouts base =) Vamos explorá-las nas partes seguintes Wink
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Administradora
Admin
avatar

Mensagens : 69
Data de inscrição : 10/04/2011
Idade : 18
Localização : Portugal

MensagemAssunto: Re: [Tutorial]Layouts: linguagem HTML (parte 1)   Dom Abr 17, 2011 1:32 am

<p color="green">O Zé foi ás Compras</p>


Realmente é muito complicado...mas vou decorar tudo!
E muito obrigada Miss Days por cá ter vindo!



_________________

I I love you Gypsys Horses!

"O mais difícil não é chegar ao nosso destino , mas sim mantermos-nos lá".
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://howrseajuda.forumeiros.net
Anita110

avatar

Mensagens : 30
Data de inscrição : 10/04/2011
Idade : 17
Localização : Braga

MensagemAssunto: Re: [Tutorial]Layouts: linguagem HTML (parte 1)   Dom Abr 17, 2011 2:22 pm

opá... Eu eu sou muito burra ou isso não é linguagem que crianças compriendam!
Acho que é mais burrice...
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Cathrine

avatar

Mensagens : 14
Data de inscrição : 11/04/2011
Localização : Nao digo! HAHAHA!

MensagemAssunto: Re: [Tutorial]Layouts: linguagem HTML (parte 1)   Dom Abr 17, 2011 2:30 pm

Obrigada por isto.. Pode criar estes tópicos no Howrse?
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Conteúdo patrocinado




MensagemAssunto: Re: [Tutorial]Layouts: linguagem HTML (parte 1)   

Voltar ao Topo Ir em baixo
 
[Tutorial]Layouts: linguagem HTML (parte 1)
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» [Tutorial] Hospedar jogos em HTML no GOOGLE DRIVE
» GodotEngine (GDScript) - Sobre [DOCUMENTAÇÃO] (PARTE 1)
» Airbus A320: Auto Landing Tutorial
» Tutorial voo do Helicoptero
» Projeto de video tutorial

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
Howrse Ajuda e Diversão :: Dúvidas e Explicações :: Explicações-
Ir para: