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.
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:
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.
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.
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.
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>
<br>
Frase de exemplo
7. Aliando no centro
Quando quiser centralizar algum elemento, use o seguinte código:
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.
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.
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
ResponderExcluirGostei das dicas do post. Alguns eu nunca tinha ouvido falar o.O
xoxo :*
memorialices.blogspot.com.br
Fico feliz que tenha gostado Luana <3
ExcluirUm beijo enorme :*
Mas como você faz hj em dia p melhorar o Blog?
ExcluirO 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.
ResponderExcluirVidas em Preto e Branco
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 :*
ExcluirEu adoro HTML. Inclusive estava fazendo um curso disso para embelezar melhor o meu blog e acho muito legal esse tipo de posts
ResponderExcluirBjs
www.xbloglunnasx.blogspot.com.br
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 :*
Excluiradoro seu blogue é tudo de bom
ResponderExcluirhttps://coisasdecrespasoficial.blogspot.com/
Obrigada Chris <3
Excluir