Pokémon Mythology
Olá, visitante! Você pode aproveitar mais o fórum se conectando ou registrando!

Conte uma história, poste uma arte ou um vídeo! Confira os guias de jogos, tire suas dúvidas e compartilhe sua jogatina. Disputa batalhas online com jogadores e participe dos RPGs. Converse sobre qualquer coisa, poste memes, faça novos amigos!
Seja bem-vindo!

Aproveite e entre em nosso Discord está na barra de menu!

HTML Para Estilização de Fics #1 - Textos Pikalove


Participe do fórum, é rápido e fácil

Pokémon Mythology
Olá, visitante! Você pode aproveitar mais o fórum se conectando ou registrando!

Conte uma história, poste uma arte ou um vídeo! Confira os guias de jogos, tire suas dúvidas e compartilhe sua jogatina. Disputa batalhas online com jogadores e participe dos RPGs. Converse sobre qualquer coisa, poste memes, faça novos amigos!
Seja bem-vindo!

Aproveite e entre em nosso Discord está na barra de menu!

HTML Para Estilização de Fics #1 - Textos Pikalove
Pokémon Mythology
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

HTML Para Estilização de Fics #1 - Textos

3 participantes

Ir para baixo

HTML Para Estilização de Fics #1 - Textos Empty HTML Para Estilização de Fics #1 - Textos

Mensagem por Caio. Sáb 28 Set 2013 - 22:48

===> #1.1 - Introdução: As Tags!

Depois de certos membros modificarem certas partes do layout utilizando-se de códigos HTML e CSS, outros membros puderam perceber como essa língua de marcação e essa folha de estilo, respectivamente, são poderosas. Cresceu também o interesse por melhorar cada vez mais os tópicos e as postagens com elas, porém não o conhecimento. A maioria dos tutoriais da internet são “crus”, simplesmente jogando um monte de código no leitor. Por isso decidi fazer esse tutorial, começando desde o HTML básico até a modificar, por exemplo, o fundo do seu post. Mentira, não farei isso, mas certamente você conseguirá fazer algo interessante e bonito se conseguir entender. Caso não consiga, pode me procurar pelo tópico ou por MP, ficarei feliz em te ajudar.

O bbCode, a linguagem de marcação que usamos no fórum, é bem parecido com HTML, porque foi baseado nesse. De início, são poucas as diferenças visíveis, na verdade, apenas uma: o fato de que no bbCode usamos colchetes para códigos (, por exemplo), enquanto que no HTML usamos os sinais menor que e maior que, para postar os códigos, chamados de tag (<b></b>, por exemplo).

Assim como no bbCode, as tags de HTML são abertas e fechadas, para mostrar onde começa e onde termina a área que queremos marcar. Para fechar uma tag, basta utilizarmos uma barra (/) antes do respectivo código da mesma (</b>, </i>, etc). Algumas tags são até bem parecidas, como as já citadas b, i, a “nova” u, e assim vai. Como pôde perceber, a maioria delas funcionam para textos, afinal, HTML vem do inglês HyperText Markup Language, em tradução livre, Linguagem de Marcação de Hipertexto). Ainda sim, com HTML, podemos criar tabelas, inserir imagens, etc.

Algumas tags não precisam ser fechadas, sendo estas chamadas de tags órfãs. No bbCode, também temos alguns códigos do tipo, como o
[hr]. A única diferença é que, em HTML, colocamos uma barra (/) no fim da tag (<hr /> e <br />, por exemplo). Em geral, tags órfãs são aquelas que não guardam uma informação por si própria ou que não marcam nada. A citada tag <hr /> funciona da mesma forma que sua “irmã” de bbCode: gera uma linha. Não precisamos marcar um texto com essa linha, a linha apenas surge ali e pronto, não dependendo de mais anda. Esse é o conceito de uma tag órfã, mas não precisam se prender a isso. Muito vem da prática, pouco da teoria, ainda mais se tratando de uma matéria mais “decoreba” como HTML.

Quando trabalhamos com um arquivo HTML puro, isso é, um arquivo a parte do fórum da Pokémon Mythology, caso pressionarmos a tecla ENTER, nenhuma linha será pulada no site em si, apenas no arquivo. Isso ocorre porque, para pularmos uma linha no site, devemos usar a tag órfã <br />, que vem do inglês break, quebra de linha (tradução livre). Podemos usar também a tag p, que serve para demarcar um parágrafo ou dar duas quebras de linha (funciona como dois br) caso seja órfã. Acompanhe o exemplo abaixo:

<p>Esse é um parágrafo.<br />Essa é outra linha no parágrafo.</p>
<p />
Pulamos mais duas linhas!

Há ainda mais uma forma de se pular linhas, mas essa é muito pouco recomendada: a tag pre. Ela funciona através de textos pré-formatados, possuindo sempre uma fonte padrão (em geral Courier), um mesmo tamanho etc. A diferença é que ela preserva espaços e linhas puladas pelo usuário, logo, se você pular uma linha no arquivo, pulará também no seu site/post. Isso pode ser visto abaixo:

<pre>
Teste

Outro teste.
</pre>

Como eu disse, ela é pouco recomendada principalmente por manter a fonte fixa, além de fazer com que percamos, de certa forma, o “controle” de como nossa página/post deverá ser. Use-a com sabedoria (em todo meu tempo mexendo com esse tipo de coisa, nunca precisei a utilizar, espero que você também não).

Enfim, chegamos ao fim do nosso primeiro tutorial de HTML. Vocês provavelmente devem estar achando que não vale a pena utilizar-se dele, visto que é idêntico ou mais difícil que bbCode. Bem, nessa etapa inicial, realmente, vale mais a pena ficar somente no bbCode. O maior “tchan” do HTML é a liberdade que ele te dá, liberdade essa que só será conquistada mais para frente, depois de aprender certos conceitos “idiotas” e “repetitivos” como esses que vimos agora.

Seria interessante que tentassem usar HTML ao máximo em seus posts agora, pois assim vocês já se familiarizam com suas tags e estruturas. Em breve estarei postando uma continuação desse tuto, onde não focarei muito em explicação, mas sim em certas tags específicas de texto, como a font, center, strike, marquee, etc. Ah, detalhe: todas são consideradas ultrapassadas e, segundo a W3C (mais conhecida como www, isso mesmo, o “www” do seu navegador), não devem ser mais usadas. Bobeira, elas são muito úteis e vamos sim usá-las, afinal, a maioria trazem algum efeito interessante. Mais pra frente, entretanto, vocês verão que a maioria pode ser descartada e substituída por CSS.

Well, é isso. Espero que tenha sido claro e simples, mas não tão simples assim. Qualquer dúvida, postem aqui! Procurem-me! Procurem no Google! Mas não fiquem com dúvida, ok? Ficarei feliz em ajudar. Obrigado! E ah, não se sintam desanimados se isso parecer muito trabalho pra pouco resultado. Como eu disse, é uma estrada lenta e chata (coloca chata nisso, lol). Vou pedir, porém, que não desistam, porque, no fim, valerá a pena.
Caio.
Caio.
Membro
Membro

Masculino Idade : 27
Alerta Alerta :
HTML Para Estilização de Fics #1 - Textos Left_bar_bleue0 / 100 / 10HTML Para Estilização de Fics #1 - Textos Right_bar_bleue

Data de inscrição : 27/06/2010

Frase pessoal : A noir. E blanc. I rouge. U vert. O bleu.


Ir para o topo Ir para baixo

HTML Para Estilização de Fics #1 - Textos Empty Re: HTML Para Estilização de Fics #1 - Textos

Mensagem por cocotinha_white124 Dom 29 Set 2013 - 20:24

Ficou muito bom, Perry. Sem muito o que falar, bem explicado, melhorou as características que disse que estava confuso, ótimo guia, vai ajudar bastante o pessoal leigo.

________________
HTML Para Estilização de Fics #1 - Textos 8myJZtt
HTML Para Estilização de Fics #1 - Textos VQtu4
Puppet ~ Perfil ~ DevianART
cocotinha_white124
cocotinha_white124
Membro
Membro

Masculino Idade : 24
Alerta Alerta :
HTML Para Estilização de Fics #1 - Textos Left_bar_bleue0 / 100 / 10HTML Para Estilização de Fics #1 - Textos Right_bar_bleue

Data de inscrição : 04/02/2012

Frase pessoal : Na ponheta ele é ambidestro - Black


http://andreoli17.deviantart.com/

Ir para o topo Ir para baixo

HTML Para Estilização de Fics #1 - Textos Empty Re: HTML Para Estilização de Fics #1 - Textos

Mensagem por laser queer Seg 7 Out 2013 - 15:04

Pois é, cara, achei que você não fosse postar aqui, mas ficou bem legal mesmo. Ficou breve, porém bem detalhado e bem explicado, gostei bastante.

________________
HTML Para Estilização de Fics #1 - Textos IbUbQkA
assinatura: tsu
laser queer
laser queer
Membro
Membro

Masculino Idade : 26
Alerta Alerta :
HTML Para Estilização de Fics #1 - Textos Left_bar_bleue0 / 100 / 10HTML Para Estilização de Fics #1 - Textos Right_bar_bleue

Data de inscrição : 16/12/2011

Frase pessoal : Freeze? I'm a robot, not a refrigerator.


Ir para o topo Ir para baixo

HTML Para Estilização de Fics #1 - Textos Empty Re: HTML Para Estilização de Fics #1 - Textos

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos