Código HTML para iniciantes


Uma coisa que é inevitável que todo blogueiro saiba, ao menos o básico, são os códigos HTML. Pode parecer assustador, talvez meio confuso, mas códigos desse tipo são bem úteis e possuem diversas finalidades para o blog, portanto é necessário que você saiba pelo menos o básico do básico.

Tá, mas o que é HTML?
HTML é a linguagem usada para criação de páginas na web. Um layout/theme de um blog por exemplo, é composto por uma página inteira de codificação HTML, de cima para baixo. Quem gosta de ter mais controle sobre a quantidade de elementos adicionado ao blog ou ta pensando em dar um up no mesmo e não sabe por onde começar então eu acho que esse post pode te ajudar a aprender alguns códigos HTML básicos.

No blogger talvez você já tenha visto a opção "HTML / JavaScript" na aba de adicionar gadgets ao blog. Esse tipo de gadget é o mais indicado se você quiser adicionar um código HTML à barra lateral ou rodapé do seu blog. Já no Wordpress, um Widget de Texto possui a mesma função para adicionar algum elemento HTML.

Para praticar um pouco eu sugiro que antes de testar alguns dos códigos abaixo você salve antes o modelo do seu blog caso de alguma coisa não dar certo, mas não se preocupe pois é comum não dar certo de primeiro, é com a pratica que se aprende.


ALINHAR AO CENTRO

Se você quiser que algo em sua barra lateral fique centralizado, use o código abaixo no início e no final de qualquer codificação HTML que você adicione:

Resultado de imagem para emoji a cloud<center>Seu código HTML ou texto aqui</center>



IMAGEM

Eu sempre carrego minhas imagens no site PostImage ou Photobucket para obter o link direto para adicionar ao código HTML. Eu confio nestes sites se bem que a qualquer momento o site pode sair do ar e eu possa perder as imagens, mas é só salvar num pendrive que fica tudo resolvido, até porque pra quê eu vou pagar por um site de hospedagem quando existem milhares que hospedam gratuitamente né?

Enfim, faça o upload da sua imagem no PostImage, Tinypic ou Photobucket e pegue o 'link direto' ou 'direct link' fornecido na page. Em seguida basta colar neste seguinte código:


Resultado de imagem para emoji a cloud<img src=”Link direto da sua imagem aqui”>




INSERIR UMA NOVA LINHA

Se você não usa este pequeno código de interrupção , seu texto terminará em uma linha reta, em poucas palavras, tudo junto e misturado. Se você utilizar o código abaixo uma vez antes de começar o texto, ele iniciará uma nova linha, mas se você utilizar duas vezes começará um parágrafo.


Resultado de imagem para emoji a cloud<br>



ou



Resultado de imagem para emoji a cloud<br><br>



IMAGEM COM LINK 

Esse é o código que você procura se quiser adicionar uma imagem à sua barra lateral que esteja vinculada a outra página ou site. Sabe aquelas imagens que quando você clica em cima leva você pra outra página? Então, o código abaixo serve pra isso.
Certifique-se sempre se seus links na codificação começam com o http://



Resultado de imagem para emoji a cloud<a href=”Link da página/site aqui”><img src=”Link da imagem aqui”></a>






TAMANHO DA FONTE

Através do código abaixo você pode alterar o tamanho da sua fonte. Substitua o número 4 por um número entre 1 e 6 (1 é super pequeno e 6 é bastante grande).


Resultado de imagem para emoji a cloud<font size=”4″>Seu texto aqui</font>




ADICIONAR UM LINK AO TEXTO


Adicionar um link ao texto é bem semelhante á adicionar uma imagem com link, a diferença é que o texto vai no lugar onde fica o código da imagem.


Resultado de imagem para emoji a cloud<a href=”Link da página/site aqui”>Seu Texto Aqui</a>




TEXTO EM NEGRITO, ITÁLICO OU SUBLINHADO


Você pode alterar a aparência do texto em sua barra lateral com esses códigos super fáceis:

Para palavras em negrito
Resultado de imagem para emoji a cloud<b>Seu Texto Aqui</b>


Para palavras em Itálico



Resultado de imagem para emoji a cloud<i>Seu Texto Aqui</i>



Para palavras Sublinhadas



Resultado de imagem para emoji a cloud<u>Seu Texto Aqui</u>





Tá vendo como são fáceis? Basta alguns destes códigos e você vai ver como é fácil adicionar o que quiser á barra lateral ou rodapé do seu blog e deixá-lo do jeitinho que queria.
Depois me contem se deu certo os códigos no blog de vocês.


Nenhum comentário