terça-feira, 27 de agosto de 2013

A linguagem do Blogger



A linguagem do Blogger


       O código do Blogger é composto de três linguagens principais de programação:CSS, HTML e JAVASCRIPT.

O CSS é utilizado para se definir o estilo de cada elemento da página. Podemos entrar com os comandos CSS diretamente no código ou criar um arquivo que chamamos de “folha de estilos” (*.CSS) , hospedá-lo em um site e “ligarmos” esse arquivo ao nosso código no Blogger.

O HTML é utilizado na “construção” da página propriamente dita. Através do JAVASCRIPT, como o próprio nome já diz, criamos “scripts”, rotinas que executarão determinadas tarefas, como exibição de sliders, banners de anúncio dentre outras coisas.

Pois bem, conhecendo o básico destas três linguagens já é possível fazer muita coisa no nosso blog.  Vejamos os principais comandos, os quais utilizaremos com mais freqüência para modificar o layout do nosso blog:


 Elementos de Página

            Os principais elementos utilizados em uma página HTML são do tipo TEXTO, IMAGEM, LINK ou BORDA.

Comandos de Texto

font-family = define o tipo de fonte (Arial, Time News Roman etc.)
font-size = define o tamanho da fonte (small, 18pt, em, cm, 50%)
font-style = estilo da fonte (normal, italico, obliquo)
font-weight = espessura da fonte (normal, negrito etc.)
color = cor da fonte (pode ser em código hexadecimal, rgb ou pelo nome)

Obs: podemos utilizar somente o comando [font] para definirmos um ou mais atributos. Ex. font: normal 18px Arial
line-height = define o espaçamento entre linhas
text-transform = converte o texto em Maiúsculas (uppercase), minúsculas (lowercase) ou as primeiras letras em Maiúsculas (capitalize).
text-align = alinhamento do texto, sendo: left (esquerda), right (direita), center (centro) e justify (força o texto a ocupar toda a extensão da linha)
text-decoration = decoração do texto, sendo: underline (sublinhado), blink (piscar), overline (sobrelinhado).
White-space = define o tratamento dado aos espaços em branco: normal (os espaços serão ignorados), pre (os espaços serão preservados) e nowrap (o texto será apresentado numa linha única.



Comandos de Imagem

            Para inserirmos uma imagem na página HTML fazemos uso da tag <img> da seguinte forma:

<img src = caminho/imagem.extensão WIDTH = tamanho HEIGHT = tamanho BORDER = valor  TITLE = texto>

Para redimensionar a imagem, fazemos uso dos atributos WIDTH (largura) e HEIGHT (altura). O atributo BORDER especifica a espessura da borda na imagem. TITLE contém um texto que será exibido quando passarmos o cursor sobre a imagem.
Ex. <img src=http://imageshack.us/images/seta.png width=700 height=250>

            Além destes, temos ainda os atributos:

ALIGN => LEFT = alinha imagem à esquerda
               RIGHT = alinha a imagem à direita
                  TOP =  alinha imagem no topo + alto
          BOTTOM =   alinha a imagem na base + baixa
            MIDDLE  = alinha a imagem à direita



Comandos de Links

link = especifica a cor dos links não visitados (padrão: azul)
vlink = especifica a cor dos  links visitados (padrão: magenta)
alink = especifica a cor do link ativo no momento.

<a> = tag usada para definir um hiperlink. Os principais atributos da tag são:

  • href = indica o destino do hiperlink
  • acesskey = indica um atalho para acesso ao hiperlink por meio de uma combinação de teclas (ALT+G etc.)
  • title = indica ao usuário o que há na página.


Comandos de Borda

border-width = espessura da borda. Pode ser especificada em pixels ou pelos atributos:

  • thin: borda fina
  • medium: borda média
  • thick: borda grossa


border-style = estilo da borda, sendo:

  • none: nenhuma borda
  • hidden: equivalente a none
  • dotted: borda pontilhada
  • dashed: borda tracejada
  • solid: borda contínua
  • double: borda dupla
  • groove: borda entalhada
  • ridge: borda em ressalto
  • inset: borda em baixo relevo
  • outset: borda em alto relevo 
border-color = cor da borda

Obs: Podemos fazer uso da forma abreviada para o comando, especificando os atributos na mesma linha.
Ex.  border: 1px solid #000;




Efeitos mais utilizados

            Vale ressaltar neste tutorial os efeitos que podemos utilizar sobre os elementos aqui citados, os quais descrevemos a seguir:

BORDAS ARREDONDADAS

            Através do comando arredondamos os cantos da moldura criada. Utilizamos três formas diferentes, cada uma para um browser específico. Valores maiores causam um efeito mais acentuado.

-webkit-border-radius:20px;  (para o Safari e Google Chrome)
-moz-border-radius:20px;  (para o Firefox)
border-radius:20px;  (para o Opera)




SOMBREAMENTO

            Este comando pode ser aplicado sobre molduras e textos, da seguinte forma:

Para molduras:

-webkit-box-shadow:10px 10px 5px #888; ( para Safari e Google Chrome)
-moz-box-shadow:10px 10px 5px #888;  (para Firefox)
box-shadow:10px 10px 5px #888;  (para Opera)

Para texto:

-webkit-text-shadow:10px 10px 5px #888; ( para Safari e Google Chrome)
-moz-text-shadow:10px 10px 5px #888;  (para Firefox)
text-shadow:10px 10px 5px #888;  (para Opera)



            Os valores especificados correspondem, respectivamente:


  • deslocamento horizontal: se especificarmos um valor positivo, a sombra aparecerá mais à direita do elemento. Se o valor for negativo, o deslocamento será à esquerda.
  • deslocamento vertical: valores positivos posicionarão a sombra mais abaixo do elemento. Caso contrário, a sombra será projetada mais acima.
  • esfumaçado: especifica a largura do esfumaçado da sombra. Para não aplicar este recurso especificamos o valor = 0.
  • cor da sombra.

Nenhum comentário:

Postar um comentário

Se você gostou deste artigo poste um comentário!

Observações:
1º) Somente usuários com conta no Google poderão publicar seus comentários aqui no Blog do SM@rtiN.
2º) Todos os comentários serão avaliados pelo administrador do blog para posterior publicação.
3º) Os textos com conteúdo impróprio, ofensas e palavrões serão automaticamente excluídos. Se houver reincidência, o acesso do usuário ao blog será bloqueado.

Obrigado!