Uma ajuda simples em HTML

Afonso Luiz · 4 de maio de 2013

Senhores, peço desculpas se já estiver chovendo no molhado, trazendo assunto batido, pois sei que provavelmente tal tema já deve ter sido discutido aqui, mas este fórum é imenso! Tem coisa que não acaba mais!

Bem, em primeiro lugar informo que não sou programador, não entendo nada de programação, mas quando encontro as dicas certas, de alguém que manja do riscado, eu sempre dou um jeito de chegar nos meus objetivos.

Estou preparando um blogue literário no Blogger (blogspot), já instalei um modelo que gostei muito e vem bem a calhar para aquilo que pretendo fazer. O problema é a questão das postagens. O tamanho e o espaçamento entre as linhas não me agradam, me refiro aqueles pré-definidos pelo template ou do próprio bloguer.

Sei que é possível alterar tudo através do HTML no próprio modelo de template, mas me parece algo muitíssimo complicado. Já tentei várias vezes, com as dica encontradas na Internet, mas acabo mexendo, também, nas estruturas das barras de espaço... enfim, um horror.

A única coisa que gostaria de saber era como fazer isso, via HTML, em uma única postagem, quebrando o formato pré-definido do blogger.

Pensemos desta forma: Copio o conto literário para o editor de texto comum, copio o tal texto já limpo, de um bloco de notas, sem as “sujeiras de tags” do Word e, em seguida, clico na aba HTML, e é bem aí que gostaria de fazer a mudança, se possível.

Gostaria de ter um código que me permitisse alterar o conto em relação ao tamanho das fontes, espaçamento entre linhas, e recuo de linha no início de cada parágrafo, algo exatamente assim:

http://www.contosdelitfan.blogspot.com.br/2013/05/uma-elfa-com-poderes-magicos-um-orc-um.html

Você me pergunta: mas como você quer saber, se já fez isso!

Pois é, o que eu fiz foi: salvar o documento Word numa página de web, abrir esta página web com o Worpad, retirar todas as informações iniciais do Word e inserir, o texto emaranhado de tag do word, num local certinho dentro do código HTML do blogger, mas apesar de sair tudo certinho, o arquivo fica cheio de tag “internas” e um monte de informações em cada parágrafo que apenas “pesam” o tamanho da postagem, e o “peso” é importante para não comprometer a autopaginação do blogger.

Queria algo mais limpo e funcional.

Tem como?

andersondanilo · 5 de maio de 2013

Olá,

você pode fazer isso com propriedades do CSS, como no exemplo abaixo:


<h1>Meu Titulo</h1>
<p style="line-height:1.5em; text-indent: 40px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec sem id massa suscipit   sollicitudin. Curabitur a volutpat orci. Etiam congue neque pellentesque nunc feugiat sit amet interdum eros interdum. Morbi pellentesque dignissim urna, in ullamcorper magna tempus id. 
</p>

Neste exemplo foram usadas 2 propriedades css, o "line-height" define a altura da linha onde foi usada o medida "em" que é uma medida relacional ao tamanho original da fonte, "1.5em" equivale a 150% da altura da fonte. A propriedade "text-indent" define o espaçamento esquerdo da primeira linha do parágrafo. Para criar um espaçamento entre os paragrafo você pode usar a propriedade margin-top no próximo parágrafo, por exemplo:


<h1>Meu Titulo</h1>
<p style="line-height:1.5em; text-indent: 40px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec sem id massa suscipit   sollicitudin. Curabitur a volutpat orci. Etiam congue neque pellentesque nunc feugiat sit amet interdum eros interdum. Morbi pellentesque dignissim urna, in ullamcorper magna tempus id. 
</p>
<p style="margin-top: 20px; line-height:1.5em; text-indent: 40px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec sem id massa suscipit   sollicitudin. Curabitur a volutpat orci. Etiam congue neque pellentesque nunc feugiat sit amet interdum eros interdum. Morbi pellentesque dignissim urna, in ullamcorper magna tempus id. 
</p>

Afonso Luiz · 5 de maio de 2013

andersondanilo, Agradeço demais a sua atenção. Olha, eu fiz o que você me indicou e, de fato, deu certo... houve espaçamento entre linhas e recuo do primeiro parágrafo, mas o recuo dos parágrafos ficou apenas no primeiro mesmo, não se extendeu aos outros. Achei interessante também a questão do espaço entre os parágrafos que você falou.

Então, pra situar melhor a questão, te coloco a seguinte perspectiva. Inseri um pequeno texto chamado teste 3, com 3 parágrafos, via editor normal que você pode conferir aqui:

http://contosdelitfan.blogspot.com.br/2013/05/teste-3.html

Agora, te passo como ficou na escrita HTML:

<div style="text-align: justify;">
<span style="font-family: Verdana,sans-serif;">Odessa olhou para baixo, com a testa escorada no vidro reforçado da janela do seu quarto, e procurou registrar os últimos momentos daquele lugar. Apesar do caos de entulhos e escombros em que se transformara . <br />Fizera amizade com Kalista, algo improvável nos tempos de guerra entre máquinas e humanos, e estava disposta a enfrentar seus pais para trazê-la a bordo, ao invés de deixá-la para trás naquele mundo destruído todo feito de montanhas de ferro calcinado e gigantescas espirais de fumaça que cobriam o céu. <br />A guerra entre as máquinas e humanos causara a perda da fé nas pessoas, mas Odessa pouco queria saber disso. Não lhe interessava saber quem havia desenvolvido o vírus ou quem havia instigado a revolta contra a sua gente. Não queria saber dos fatos que haviam, por pouco, quase destruído a raça humana. </span></div>

Bem, o meu propósito é, no caso, poder alterar:

1 - Tamanho da fonte. (vou usar sempre fonte verdana)

2 - Espaçamento entre as linhas.

4 - Espaçamento entre os parágrafos. (sem que eu precise estar inserindo "enter" entre eles)

4 - Recuo para todos os parágrafos do texto.

Desculpe o abuso de pedidos, mas se conseguisse fechar nesta questão aí, com um código fixo... rapaz... tava bom demais.

pauloelisiojr · 6 de maio de 2013

andersondanilo, Agradeço demais a sua atenção. Olha, eu fiz o que você me indicou e, de fato, deu certo... houve espaçamento entre linhas e recuo do primeiro parágrafo, mas o recuo dos parágrafos ficou apenas no primeiro mesmo, não se extendeu aos outros. Achei interessante também a questão do espaço entre os parágrafos que você falou.
Então, pra situar melhor a questão, te coloco a seguinte perspectiva. Inseri um pequeno texto chamado teste 3, com 3 parágrafos, via editor normal que você pode conferir aqui:

http://contosdelitfan.blogspot.com.br/2013/05/teste-3.html

Agora, te passo como ficou na escrita HTML:
<div style="text-align: justify;">
<span style="font-family: Verdana,sans-serif;">Odessa olhou para baixo, com a testa escorada no vidro reforçado da janela do seu quarto, e procurou registrar os últimos momentos daquele lugar. Apesar do caos de entulhos e escombros em que se transformara . <br />Fizera amizade com Kalista, algo improvável nos tempos de guerra entre máquinas e humanos, e estava disposta a enfrentar seus pais para trazê-la a bordo, ao invés de deixá-la para trás naquele mundo destruído todo feito de montanhas de ferro calcinado e gigantescas espirais de fumaça que cobriam o céu. <br />A guerra entre as máquinas e humanos causara a perda da fé nas pessoas, mas Odessa pouco queria saber disso. Não lhe interessava saber quem havia desenvolvido o vírus ou quem havia instigado a revolta contra a sua gente. Não queria saber dos fatos que haviam, por pouco, quase destruído a raça humana. </span></div>
Bem, o meu propósito é, no caso, poder alterar:

1 - Tamanho da fonte. (vou usar sempre fonte verdana)

2 - Espaçamento entre as linhas.

4 - Espaçamento entre os parágrafos. (sem que eu precise estar inserindo "enter" entre eles)

4 - Recuo para todos os parágrafos do texto.

Desculpe o abuso de pedidos, mas se conseguisse fechar nesta questão aí, com um código fixo... rapaz... tava bom demais.

Bem, para mudar o tamanho da fonte existe uma propriedade no css que é


style="font-size:20px;"

ai você altera pra 20px a fonte

Espaçeamento entre os paragrafos.

Pode inserir isso no style dai vai dar uma margem pra baixo.


    style="margin-bottom:5px;"

andersondanilo · 7 de maio de 2013


<div style="font-family: verdana; font-size: 14px; text-align:justify; line-height:1.5em; margin-left: 25px; margin-right: 25px">
	<p style="text-indent: 25px; padding-bottom: 20px;">
		Odessa olhou para baixo, com a testa escorada no vidro reforçado da 
		janela do seu quarto, e procurou registrar os últimos momentos daquele 
		lugar. Apesar do caos de entulhos e escombros em que se transformara .
	</p>
	<p style="text-indent: 25px; padding-bottom: 20px;">
		Fizera amizade com Kalista, algo improvável nos tempos de guerra 
		entre máquinas e humanos, e estava disposta a enfrentar seus pais 
		para trazê-la a bordo, ao invés de deixá-la para trás naquele 
		mundo destruído todo feito de montanhas de ferro calcinado e 
		gigantescas espirais de fumaça que cobriam o céu.
	</p>
	<p style="text-indent: 25px; padding-bottom: 20px;">
		A guerra entre as máquinas e humanos causara a perda da fé nas 
		pessoas, mas Odessa pouco queria saber disso. Não lhe interessava 
		saber quem havia desenvolvido o vírus ou quem havia instigado a 
		revolta contra a sua gente. Não queria saber dos fatos que haviam, 
		por pouco, quase destruído a raça humana.
	</p>
</div>