sexta-feira, 25 de maio de 2012

Mexendo no seu HTML + Estilos personalizados

Tumblr_m4fs6okvzj1r5ex19o1_400_large
Eita como os Cupcakes ficaram pela espera de um post HTML! Me desculpem MESMO pela demora gatas! Eu realmente estou com problemas pra postar! Por isso hoje eu vou ensinar a mexer no nosso HyperText Markup Language -HTML- ! O que é isso, Luiza? Isso é o modelo do blog em palavras, onde você pode usar coisas no seu Blog, que não possuem na Edição feita pela Google. (Mesmo assim ainda não entendi, Luiza.) Então clica em leia mais pra entender melhor!

O HTML é separado por tags.Luiza, eu não sei o que é uma tag! Tag são essas coisinhas que você vai encontrar até demais: <tag> UHUL </tag> . Sacaram? O HTML, ele é todo em inglês, mas há ALGUNS recursos extras, em blogs como o Cherry Bomb, Go Imagine, que são indicadores para as ferramentas em outras línguas.Exemplos:
background: #fff /*Cor de fundo

Até por ai tudo bem...O HTML ele é separado por tags com SIGNIFICADOS!
As mais importantes e que com certeza eu vou falar MUITO delas aqui no Blog são:
  • body - Significa "CORPO" nesse sentido "CORPO DO BLOG"
  • head - Significa "CABEÇA" nesse sentido "CABEÇA DO BLOG"
  • b:skin - B vem de "Body - CORPO" e Skin de "Pele" só que nesse caso, essa tag é a que eu mais uso para adicionar tutoriais.Ela é como se fosse a TAG do Design do Blog.
  • font - Significa a tag da fonte que você vai utilizar.
  • img - Significa a tag da Imagem utilizada.
  • hover - Significa a tag da transição.
  • blink - texto piscando.
  • bold ou b ou strong - Significa negrito.
  • italic ou i - Significa itálico.
  • underline ou u - Significa sublinhado.
  • strike - Significa riscado.
  • div - Derivado de "Division" significa separador ou divisão.
Pronto! Já aprenderam o básico! (Se quer saber de uma coisa, eu não sabia de nada sobre HTML, só fiz o que pedia nos sites de tutoriais! Ai depois eu fui entendendo tudo, já que eu tenho um ingrês de primeira -SÓ SE FOR INGRÊS MESMO-) Mas se eu tivesse aprendido iria saber MUITO mais.
Para fechar a tag você geralmente usa outra.Exemplo:
Se você quer fazer algo em negrito, a tag é <b>, e para fechar você vai adicionar apenas uma barra </b>.
<b> Texto </b>
Resultado:
Texto

Deu pra entender um pouco meus amores? Ok, então vamos fazer um tutorial BEM simples.Muitas vezes eu tenho cores personalizadas em meu blog, que o próprio blog não disponibiliza, é por que os meus códigos de estilos (negrito, itálico, sublinhado) estão automáticos para quando clicá-los, a cor que eu escolhi, sair neles.Entendeu?Ok, então vamos ao código:

b, strong {color: #33CCCC; text-decoration: none; cursor: normal; }
i {color: #E399AE; text-decoration: none; cursor: normal; }u, underline {color: #333333; text-decoration: none; border-bottom: 1px dashed #AC77C7; cursor: normal;}

Viu esse código? Deve ter o encarado com firmeza, né? (FIRMEZA PARCEIRIA, FIRMEZA) Ok, a primeira coisa para entendê-lo é você ler a minha micro explicação lá em cima.Mas agora eu vou explicar como mudar as cores dos estilos.
Em rosa é a cor do negrito. #33CCCC
Em azul é a cor do itálico. #E399AE
Em amarelo é a cor do sublinhado. #333333
Para mudar escolhendo a cor que você prefere basta entrar nessa tabela de cores (clique aqui) e você então escolhe a cor e cola no lugar das que já tem.
Viram?É bem fácil! Olha me digam se eu sou uma boa tutora >.< hihi!
Kisses,
Lúu

2 comentários:

  1. Amei amor ><
    Mais como eu consigo colocar o fundo cinza com rosa? eu tentei fazer isso mais não deu muito certo :S
    Será que você explicar como ponhe ?
    Beijos
    Isabelle

    ResponderExcluir
    Respostas
    1. Belle eu sou meio lerdinha, não entendi direito sua pergunta! Você está falando do fundo do Blog?

      Excluir