29 novembro 2017

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.

9 comentários:

  1. Vou ser sincera: não sinto falta nenhuma da época em que eu era louca do HTML haha. Isso lá no comecinho do blog, quando eu quebrava a cabeça pra tentar entender esse monte de letrinhas. Hoje em dia me viro bem :p
    Gostei das dicas do post. Alguns eu nunca tinha ouvido falar o.O
    xoxo :*

    memorialices.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado Luana <3
      Um beijo enorme :*

      Excluir
    2. Mas como você faz hj em dia p melhorar o Blog?

      Excluir
  2. O mais bizarro de eu não saber nada de html é que eu sou formada técnica em informática. Estou pensando seriamente em fazer o curso novamente. Preciso relembrar essas coisas.

    Vidas em Preto e Branco

    ResponderExcluir
    Respostas
    1. Nossa Lary, sério? HTML parece ser um bicho de 7 cabeças, mas não é! Tenho certeza que fazendo o curso novamente, você aprende. Sucesso pra Ti :*

      Excluir
  3. Eu adoro HTML. Inclusive estava fazendo um curso disso para embelezar melhor o meu blog e acho muito legal esse tipo de posts
    Bjs
    www.xbloglunnasx.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fico muito feliz em saber Ana. Eu tbm amo HTML e quero compartilhar o pouco que sei com vocês que me acompanham aqui. Mil bjs :*

      Excluir
  4. adoro seu blogue é tudo de bom

    https://coisasdecrespasoficial.blogspot.com/

    ResponderExcluir