7 Códigos HTML que toda blogueira precisa conhecer

Você vai conhecer os 7 principais códigos HTML que toda blogueira precisa conhecer.

A profissão Blogueira vai muito além de escrever artigos de alta qualidade. É indispensável pra você, entender o básico de HTML, até pra que não precise pagar alguém pra codificar algo simples, e de fácil manutenção. Pode parecer difícil, mas será muito útil aprender o básico.

HTML é a abreviação da expressão inglesa Hyper Text Markup Language, que significa Linguagem de marcação de hipertexto. Uma linguagem de marcação utilizada na construção de páginas na web, que podem ser interpretadas por navegadores.

No blogger existe a opção "HTML/Javascript" onde você pode adicionar um código HTML na sua barra lateral, ou no rodapé. Caso use WordPress, o Gadget de texto tem a mesma função.

O editor de postagem do blogger possui a opção HTML onde você também pode adicionar códigos e fazer suas personalizações. Acompanhe as dicas.

1. Criando uma base div

A tag div serve para posicionar partes específicas em uma página HTML. O código sempre começa e termina com div, veja: 

<div class="nomedaclasse">

Conteúdo vem aqui

</div>

2. Personalizando a base div

O atributo style é usado para transferir informações de estilo para tags. É o famoso CSS, que dá vida e personalização para as criações.

<style>

.nomedaclasse {

}

</style>

3. Imagem

Para que o código funcione é preciso copiar o endereço da imagem, também conhecida como URL. Você pode usar o próprio blogger como hospedagem, basta carregar a foto, publica-la, em seguida copiar o endereço e adicionar no local indicado, veja:

<img src="http://aurldaimagemvemaqui"/> 

4. Imagem linkada

Com esse código, a sua imagem será vinculada a outra página, ou seja, ao clicar nela o usuário será transferido para o site de destino.

<a href="olinkdaimagemvemaqui"><img src="http://aurldaimagemvemaqui"/></a>

5. Texto linkado

O texto linkado é como o código acima, mas sem a imagem.

<a href="olinkdotextovemaqui"> O texto vem aqui <a/>

6. Iniciando uma nova linha

Esse elemento funciona como uma quebra de linha. Quando não usamos, o texto fica em uma linha reta. Um deles inicia uma nova linha, dois introduzis um novo parágrafo.

Frase De exemplo
<br>

Frase de exemplo

7. Aliando no centro

Quando quiser centralizar algum elemento, use o seguinte código:

<center> 

O conteúdo vem aqui

</center>

BÔNUS: CÓDIGO FINAL

Para que você entenda melhor a posição de cada elemento, o manual construiu um código base com os itens usados nesse artigo, confira:

<div class"nomedaclasse">

<a href="olinkdaimagemvemaqui"><img src="aurldaimagemvemaqui"/> </a>

<a href="olinkdotextovemaqui">O texto vem aqui</a>

</div>

<style>
.nomedaclasse {
width: 320px;
position: relative;
}
.nomedaclasse img{
width: 300px;
height: 240px;
margin: 10px;
}
.nomedaclasse a{
font-family: Arial;
font-size: 12px;
color: #111;
text-align: center
padding: 8px;
}
.nomedaclasse a:hover {
text-decoration: none;
color: #f2f2f2;
}
</style>

Esse é um código ilustrativo, que pode ser modificado de acordo com as suas necessidades. Os elementos na cor vermelha representa o nome da div, que pode ser substituída por qualquer nome escrito junto, desde que seja o mesmo nome na div e no style. Os elementos em azul ilustra as propriedades usadas para personalizar a div nomeada de nomedaclasse. Crie um blog de teste e faça  nele suas experiências para que não ocorra nenhum erro no seu blog.

Deixe sua opinião nos comentários caso você queira aprender um pouco mais sobre HTML e CSS, que farei outro artigo sobre esse tema. E se você gostou, compartilhe este post com seus amigos, siga o manual em "faça parte" que fica na lateral do blog, e curta nossa página no facebook.