Pokémon Mythology
Olá, visitante! Vejo que ainda não está conectado ao nosso fórum, faça login.
Espere, você ainda não está cadastrado? D:
Inscreva-se em nosso fórum e venha aproveitar as novidades que estamos preparando pra vocês. Nós teremos o maior prazer em recebê-lo no fórum e se precisar de qualquer ajuda, temos muitos membros e nossa equipe para ajudá-lo! Lembrando que você pode postar sua fanfic, seus desenhos ou edição de imagens, seu vídeo-detonado ou gameplay, participar de um RPG, postar e ler notícias do mundo Pokémon, tirar todas as suas dúvidas sobre todos os jogos de Pokémon, comentar sobre o desenho do momento ou apenas jogar um papo fora. Além de fazer amigos!
Para cadastrar-se clique no botão 'Sign-Up' ou em 'Registrar-se' aqui abaixo. Seja bem vindo!
HTML Para Estilização de Fics #1 - Textos Pikalove

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

Ir em baixo

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

Mensagem por Caio. em Sab 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 : 23
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.


Voltar ao Topo Ir em baixo

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

Mensagem por cocotinha_white124 em 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.
cocotinha_white124
cocotinha_white124
Membro
Membro

Masculino Idade : 20
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/

Voltar ao Topo Ir em baixo

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

Mensagem por laser queer em 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.
laser queer
laser queer
Membro
Membro

Masculino Idade : 22
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.


Voltar ao Topo Ir em 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


Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum