• sed nunc augue

    Procuramos Postadores!

    Se estiver interessado, envie um email para neargbi@hotmail.com...

  • mauris euismod rhoncus tortor

    Envie Um Mensagem!

    Para enviar uma mensagem entre em contato pelo email: neargbi@hotmail.com...

  • why is it needed

    Cuide do seu planeta! Ele merece isso!

    O nosso planeta é algo que foi criado há bilhões de anos, mas que estamos destruindo-o através de nossas atitudes capitalistas. Por isso, realize simples atitudes que ajudarão a cuidar no nosso planeta e evitar sérios problemas que estão acontecendo...

Separadores em HTML

Postado por Leonardo Ramos | 0 comentários»

Quebra de linha

Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.
Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens.

Parágrafos

Para separar blocos de texto, usamos o elemento <P>:
Parágrafo 1;<P>Parágrafo 2.
que produz:
Parágrafo1;
Parágrafo2.
Combinando parágrafos e quebras de linha, temos:
Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2.
O resultado da marcação acima é:
Parágrafo 1;
linha 1 do parágrafo 1,
linha 2 do parágrafo 1.
Parágrafo 2;
linha 1 do parágrafo 2,
linha 2 do parágrafo 2.
<P> tem atributo de alinhamento, como os cabeçalhos:
<P ALIGN=CENTER>Assim como os trens, as boas idéias às vezes chegam com atraso. <BR>(Giovani Guareschi)</P>
Assim como os trens, as boas idéias às vezes chegam com atraso.
(Giovani Guareschi)
<P ALIGN=RIGHT>Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.</P>
Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.
<P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.</P>
Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.

Linha Horizontal

<HR> insere uma linha horizontal:

Essa linha tem diversos atributos, oferecendo resultados diversos.
<HR SIZE=7> insere uma linha de largura 7 (pixels):

<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível:

<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional:

<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de <HR>)

Personalizando Títulos do seu blog!

Postado por Leonardo Ramos | 0 comentários»
Para um blog ter um melhor resultado nas buscas, o título da postagem importa muito. Mas, de que adianta o título da postagem ser bom, se não aparece totalmente nos resultados do Google?
Não entendeu? Entenda agora o que estou falando:
O Blogger, por padrão, coloca os títulos das páginas de postagens com o modelo:

Nome do Blog: Nome da Postagem
Mas nos resultados de buscas do Google, só aparecem os 60 primeiros caracteres do título da página, sendo o resto substituído por reticências (...). Então, se o título do seu blog é grande, o título das postagens poderão não aparecer corretamente. Vamos aprender alguns modelos de títulos para você colocar em seu blog e melhorar seus resultados nas buscas:

Imagens em HTML

Postado por Leonardo Ramos In , | 0 comentários»
Sem dúvida, um dos aspectos mais vistosos e atrativos das páginas web é o grafismo. A introdução em nosso texto de imagens pode nos ajudar a explicar mais facilmente nossa informação e dar um ar muito mais estético. Porém, o abuso pode nos conduzir a uma sobrecarga que se traduz em uma distração para o navegante, quem terá mais dificuldade em encontrar a informação necessária, e um maior tempo para carregar a página o que pode ser de um efeito nefasto se nosso visitante não tem uma boa conexão ou se é um pouco impaciente. 

Neste capítulos não explicaremos como criar, nem como tratar as imagens, unicamente diremos que para isso utilizam-se aplicações como Paint Shop Pro, Photoshop ou Corel Draw. Também não explicaremos as particularidades de cada tipo de arquivo GIF ou JPG e a forma de otimizar nossas imagens. A este assunto será dedicado em um futuro capítulo. 


As imagens são armazenadas em forma de arquivos, principalmente GIF (para desenhos) ou JPG (para fotos). Estes arquivos podem ser criados por nós mesmos ou podem ser baixados gratuitamente em sites webespecializados. 


Sendo assim, nestes primeiros capítulos nos limitaremos a explicar como inserir e alinhar devidamente em nossa página uma imagem já criada. 


A etiqueta que utilizaremos para inserir uma imagem é <img> (image). Esta etiqueta não possui seu fechamento correspondente e nela temos de especificar obrigatoriamente o paradeiro de nosso arquivo mediante o atributo src (source). 


A sintaxe fica então da seguinte forma: 


<img src="caminho para o arquivo"> 


Para expressar o caminho, faremos da mesma forma que vimos para os links. As regras continuam sendo as mesmas, o único que muda é que, no lugar de uma página destino, o destino é um arquivo gráfico. 


Além deste atributo, obviamente indispensável para a visualização da imagem, a etiqueta <img> nos propõe outra série de atributos de maior ou menor utilidade: 


Atributo alt 


Entre aspas deste atributo, colocaremos uma brevíssima descrição da imagem. Esta etiqueta não é indispensável, mas apresenta várias utilidades. 


Primeiramente, durante o processo de carregamento da página, quando a imagem não tiver sido ainda carregada, o navegador mostrará esta descrição, com a qual o navegante poderá ter uma idéia do que se trata neste caso. 


Isto não é tão trivial se temos em conta que alguns usuários navegam pela rede com uma opção do navegador que desativa a amostra de imagens, com o que tais pessoas poderão sempre saber de que se trata o gráfico e eventualmente mudar o modo com imagens para visualizar. 


Além disso, determinadas aplicações para incapacitados ou para telefones vocais que não mostram imagens oferecem a possibilidade de lê-las, o que nunca é demais pensar nestes coletivos. 


Em geral, podemos considerar como aconselhável o uso deste atributo salvo para imagens de pouca importância e absolutamente indispensável se a imagem em questão serve de link. 


Atributos height e width 


Definem a altura e largura respectivamente da imagem em pixels. 


Todos os arquivos gráficos possuem umas dimensões de largura e altura. Estas dimensões podem ser obtidas a partir do próprio designer gráfico ou também, clicando com o botão direito sobre a imagem vista pelo navegador para logo escolher propriedades sobre o menu que se desdobra. 


O fato de explicitar em nosso código as dimensões de nossas imagens ajuda ao navegador a confeccionar a página da forma que nós desejamos inclusive antes das imagens serem baixadas. 


Assim, se as dimensões das imagens tiverem sido proporcionadas, durante o processo de carregamento, o navegador reservará o espaço correspondente a cada imagem criando uma planificação correta. O usuário poderá começar a ler tranqüilamente o texto sem que este se mova de um lado a outro cada vez que se carregue uma imagem. 


Além desta utilidade, o alterar os valores destes atributos, é uma forma imediata de redimensionar nossa imagem. Este tipo de utilidade não é aconselhável visto que, se o que pretendemos é aumentar o tamanho, a perda da qualidade da imagem será muito sensível. Inversamente, se desejamos diminuir seu tamanho, estaremos usando um arquivo maior do que o necessário para a imagem que estamos mostrando, com o que aumentamos o tempo de descarregamento de nosso documento desnecessariamente. 


É importante insistir neste ponto já que muitos estreantes têm o péssimo costume de criar gráficos pequenos redimensionando a imagem por meio desses atributos a partir de arquivos de tamanho descomunal. Temos que pensar que o tamanho de uma imagem com umas dimensões da metade não se reduz à metade, e sim, que é aproximadamente 4 vezes inferior. 


Atributo border 


Define o tamanho em pixels do quadro que rodeia a imagem. 


Dessa forma, podemos re-enquadrar nossa imagem se desejamos. É particularmente útil quando desejamos eliminar a borda que aparece quando a imagem serve de link. Em tal caso teremos que especificar border="0".


Atributos vspace e hspace 


Serve para indicar o espaço livre, em pixels, que tem que ser colocado entre a imagem e outros elementos que a rodeiam, como texto, outras imagens, etc. 


Atributo lowsrc 


Com este atributo podemos indicar um arquivo de baixa resolução. Quando o navegador detecta que a imagem tem este atributo, primeiro descarrega e mostra a imagem de baixa resolução (que ocupa muito pouco e que se transfere muito rápido). Posteriormente, descarrega e mostra a imagem de resolução adequada (assinalada com o atributo src, que se supõe que ocupará mais e que será mais lenta de se transferir). 


Está atributo está em desuso, mesmo supondo uma vantagem considerável para que o descarregamento inicial se realize mais rápido e que um visitante possa ver uma amostra da imagem enquanto se descarrega a imagem real. 




Dica: Utilizar imagens como links


Isto quer dizer que uma imagem, assim como um texto, pode servir de link. Visto a estrutura dos links podemos muito facilmente adivinhar o tipo de código necessário.


<a href="arquivo.html"><img src="imagem.gif"></a>




Exemplo prático 


Será óbvio para os leitores, fazer agora uma página que contenha uma imagem várias vezes repetidas, mas com diferentes atributos. 


  • Uma das vezes que saia deve ser mostrada com seu tamanho original e com uma borda de 3 pixels.
  • Em outra ocasião a imagem aparecerá sem borda, com sua mesma altura e com uma largura superior a original.
  • Também mostraremos a imagem sem borda, com sua mesma largura e com uma altura superior a original.
  • Por último, mostraremos a imagem com uma altura e largura maiores que as originais, mas proporcionalmente igual que antes.
Vamos utilizar esta imagem para fazer o exercício:


As dimensões originais da imagem são 28x21, o código fonte seria então da seguinte forma: 


<img src="img1.gif" width="28" height="21" alt="Tamanho original" border="3"> 
<br> 
<br> 
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0"> 
<br> 
<br> 
<img src="img1.gif" width="28" height="51" alt="Esticada" border="0"> 
<br> 
<br> 
<img src="img1.gif" width="56" height="42" alt="Dobro grande" border="0">

Como colocar planos de fundo diferentes para cada página em seu blog :)

Postado por Leonardo Ramos In , | 9 comentários»
 Pronto para experimentar por si mesmo? Primeiro você vai precisar de páginas em seu blog. Aqui está um tutorial super rápido para que você que explica como adicionar páginas em seu blog. Ele também inclui toneladas de idéias página para você começar! :)
 Em seguida, você vai precisar de um fundo, uma imagem de fundo. Nesse tutorial, as imagens de fundo que o Blogger disponibiliza são totalmente inúteis.

Como criar páginas em seu blog :)

Postado por Leonardo Ramos | 0 comentários»
O que muda de uma postagem para uma página? 
Tudo! Quando uma página é criada ela não entra junto com os arquivos de postagem do seu blog, não aparece data, comentários, marcadores e nenhuma outra coisa relacionada a postagens. 
Algo simples e fundamental que o Wordpress sempre teve e agora o Blogger também têm sem precisar fazer nenhuma modificação no template! Vamos criar agora a nossa página. 

Como criar páginas no Blogger 

 - Primeiro faça login no Draft in Blogger (página de testes do Blogger). Entre em “Postagem” -> “Editar Páginas”.  

criar paginas no blogger

2º - Clique em “Nova Página”.
  
 - Coloque o título da página e escreva o conteúdo da página. 
Clique em “Opções de postagem” e escolha se quer ou não permitir comentários na página criada. 
Depois clique em “Publicar página”. 

nova pagina blogger
 - Escolha a forma de exibir os links das páginas. Caso prefira criar você mesmo um menu, escolha a opção: “Nenhum Gadget”. 
Clique em “Salvar e Publicar”.

como colocar pagina estaticas blogger

 - Pronto! Sua página foi criada. 
  - Se você escolheu criar o seu próprio menu agora é criar e incluir o link da página; 
  - Se você escolheu colocar um menu pronto das páginas, você pode gerenciar quais páginas serão exibidas no menu. Basta entrar em “Layout” -> “Elementos da página”, escolha editar o gadget “Páginas”. 

pagina estatica blogger
Suas páginas sempre ficaram com o link: 

HTTP://SEU-BLOG.blogspot.com/p/SUA-PAGINA.html
Caso queira modificar alguma página entre em “Editar Páginas” novamente.