Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1484305732
Vida do cache: 1485601729
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Aprendendo CSS e HTML

Aprendendo CSS/HTML – Introdução

Para aqueles que pretendem ou gostam de personalizar seus templates, querendo ou não, é necessário ter um mínimo de conhecimento em HTML e CSS.
Ao instalar um recurso, ou fazer alguma personalização no seu blog, com certeza alguns se deparam com determinados códigos que, muitas vezes sequer sabem o significado ou sabem para que servem, por isso, é fundamental saber e conhecer pelo menos o básico para entender o que se trata cada código e saber reconhecê-los.
Pensando nisso, eu já publiquei um artigo com explicações básicas sobre as Variaveis CSS e os Elementos do Blogger, onde trata a respeito dos elementos básicos do Blogger e sobre os Elementos de página.

Vou dar continuidade a publicação de alguns artigos sobre CSS e HTML, e tentarei repassar a vocês um pouco de conhecimento básico no assunto, afim de auxiliá-los nas personalização de seus templates no blogger.

De antemão, já esclareço que não tenho pretensão alguma em dar aulas sobre HTML e CSS, apenas tentarei repassar algum conhecimento básico da maneira mais simples e acessível possível, pelo menos para que vocês possam entender um pouquinho melhor sobre o assunto, facilitando a aplicação de hacks e para conseguirem modificar o layout do seu blog, ou quem sabe até, começar a criar templates.
Para aqueles que pretendem se aprofundar melhor no assunto, recomendo a leitura em alguns sites, como o do Maujor, ou o apostilando, verdadeiros mestres no assunto.

Para iniciar, vamos identificar alguns elementos no seu template.
Quando clicamos em “editar HTML” no blogger, nos deparamos com várias tags.
O início do nosso documento é HTML iniciado pela tag <html>, e se você rolar a página até o final verá que existe uma tag de fechamento, que é </html>.

Ao entrarmos na edição HTML no Blogger, visualizamos qual a linguagem que está sendo utilizada na página (XHTML), representadas por estas tags:(você não deverá mexer e nem modificar nada nesta parte)


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

1. Estrutura Básica do HTML:

No Blogger, o documento HTML se compõe da seguinte estrutura básica:
<html>
<head>
É entre estas tags que está contido o estilo da página – CSS.
É aqui que determinamos a aparência dos elementos

<head/>
<body>
É entre estas tags que está contida a estrutura da página (seus elementos) – HTML.
É o corpo do documento.É aqui que criamos os blocos que serão mostrados na página, como colunas, menus etc.

</body>
</html>

2. HTML e CSS:

Com certeza você já ouviu falar em CSS e em HTML, mas talvez não saiba o que significa exatamente.
CSS é a abreviatura para Cascading Style Sheets = Folha de Estilos em Cascata.
É uma linguagem para estilos que define o layout de documentos HTML.
O CSS é um mecanismo para adicionar estilo, é onde controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos etc.

HTML é a abreviatura de HyperText Markup Language, é a linguagem que possibilita apresentar informações de uma página, é tudo aquilo que está contido na página.

Resumidamente, HTML é usado para estruturar conteúdos, enquanto que o CSS é usado para formatar conteúdos estruturados.

3. CSS no Blogger:

Já vimos que o código CSS que dá estilo à página,é onde determinamos a aparência dos elementos. No Blogger, começa com :
<b:skin><![CDATA[/*
e sua tag de fechamento é ]]></b:skin>.
E sempre que quisermos adicionar estilos aos elementos devemos acrescentar os códigos referentes antes de sua tag de fechamento ]]></b:skin> .
A Regra CSS segue uma linguagem própria, formando uma folha de estilos, definindo como será aplicado estilo a um ou mais elementos HTML, compondo-se de 3(três) partes:
a) Seletor
b) Propriedade
c) Valor

Na regra CSS, escreve-se o seletor e a seguir a propriedade e o valor, separados por dois pontos e entre chaves { }.
Quando tivermos que definir mais de uma propriedade, por regra, deve-se usar ponto-e-vírgula para separá-las.
Veja exemplo:

body{
background-color: $bgcolor;
}

(Referência:Maujor)

Estas são as explicações básicas iniciais.
Na sequência, leia o artigo sobre as Variáveis Cores e Fonte(Variable Definition), que são valores que podem ser modificados no Painel “Fontes e Cores” do Blogger(pré definições de cores, fontes e tamanho de fontes).



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

22 Comentários

  1. web disse:

    Oi Clau, quero começar a trabalhar com venda de templates, estou me dedicando a aprender a montar um do “0” (ou do mínima..rsrsr)
    Muito obrigada por compartilhar conosco seus conhecimentos. Vou colocar você nos créditos do me site/blog de vendas, quando tiver montado os meus próprios templates :)

  2. Ricardo disse:

    Olá estou fazendo um mini-curso de HTML e CSS e gostaria de usar a imagem que você utilizou no início do blog fazendo uma analogia entre o pedreiro (HTML) e o pintor (CSS), eu já vi essa imagem em um site mas não me lembro qual era o site e por isso gostaria de te perguntar se você ou alguém poderia me ajudar a disponibilizar o link com a imagem colorida para eu colocar na minha apresentação?

    []’s.

    • Vanessa disse:

      Ricardo, esta imagem é uma montagem que eu mesma criei. Os bonequinhos eu peguei de um ebook do Maujor que eu comprei há alguns anos atrás qdo comecei a estudar um pouco sobre html e css. A imagem escrita “HTML” e “CSS” eu encontrei no google. O que fiz foi unir as imagens para montar algo próprio para usar como CAPA da série que estou publicando. Eu sugiro que vc faça o mesmo, procure imagens e faça uma foto montagem criada por vc, ainda mais pelo fato de se tratar de curso que vc irá oferecer.

      • Ricardo disse:

        Olá Vanessa, Muito Obrigado.

        Deu tudo certo :)

        Vanessa tem como vc me passar o seu e-mail ou o seu gtalk?

        []’s.

  3. Trollgado disse:

    Parabéns Clau.. Show de bola,tenho certeza que aqui aprenderei bastante coisa!! ^^

  4. Julia disse:

    Adorei e acho que você pode e deve continuar, bjs!

  5. .:: Clau ::. disse:

    Denilson
    Obrigada!

  6. DENILSON disse:

    Bacana, são explicações básicas, porém importantes e o leigo, realmente as desconhece.
    Descobri o seu site há pouco tempo, mas tenho gostado muito e sempre procuro colocar em prática os seus ensinamentos em meus blogs.
    Parabéns.

  7. Lukas disse:

    Clau queria mexer no meu template,mas o còdigo do blogger não è compatìvel com o dreamweaver não nè?

  8. Lucas disse:

    Obrigado Clau,você è di+!

  9. .:: Clau ::. disse:

    Lucas
    Eu uso o CS3 e o CS5.

  10. Lucas disse:

    Clau posso te perguntar uma coisinha?
    Estou comprando um produto,e queria te pedir uma ajudinha.
    Qual versão do photoshop você usa? pq você è profissional! :)

  11. .:: Clau ::. disse:

    Gilmar S.C
    Obrigada pelo comentário, e espero que vc consiga aprender bastante coisa sim.Volte sempre!

  12. Gilmar S.C disse:

    Bão toda a vida!
    Segui a dica da "Mamanunes" para chegar aqui.
    Lindaço teu blog/site!
    Tô precisando aprender ao menos o básico, para poder dar um "gás" no meu bloguito! – Vendo o teu Blog como está, me dá uma sensação de que "parei no tempo", de que não tem outro jeito, tenho mesmo que aprender isso ou tudo vai parar!

    Adoro informática, navegar pela web, ler 'os trecos', mexer uma coisa aqui, outra ali, mas na hora de lidar com CSS, Html, etc., ai, ai, ai, me dá um "disânimo de lascar e penso na minha rêde pra deitar"……rss!
    E olha que nem sou um bom "baiano, mas quase…!!!

    Brincadeiras a parte, verdade é que preciso e vou aprender "esse trem", de "qualRquer manera"!

    Espero conseguir muita ajuda aqui e por Us pés na istrada de veizzz ! – Daquelas "facinhas" e lights!!!

    Ô, disculpaê as brincadeiras, tá!

    Teu espaço é lindaço! – Gostei pacas!

  13. .:: Clau ::. disse:

    @Gil:
    Nossa muito obrigada pelo comentário e principalmente pelo elogio! É muito bom e gratificante isso!=]
    Só preciso fazer uma pequena correção em seu comentário, eu não sou estudante de Direito, já sou formada e sou atuante na área tb, além de "tentar" ser webdesigner..rs
    Mais uma vez, obrigada. E volte sempre!

  14. Gil disse:

    Parabéns pela montagem do Blog… Eu não posso opinar sobre os esquemas góticos, eu nem vi ainda, e nem sei se vou comentar depois, mas admirei a forma com que vc mesmo estudando direito encontrou para ir tão bem em trabalhos de edição e configuração de páginas Web. Só por isto, parabéns… mesmo… Ficou uma página bem legal. Bem caprichada. Parabéns. Vc tem talento para Webdesigner…

  15. ::Clau:: disse:

    @luizvalerio
    Obrigada pelo comentário e fico feliz em saber que gostou. Volte sempre!

  16. luizvalerio disse:

    Gostei muito das aulas. Suas orientações me tem sido muito úeis. Grande abraço!

  17. ::Clau:: disse:

    @Teófilo Silva:
    Obrigada pelo comentário! E espero que ajude sim. Volte sempre!

  18. Teófilo Silva disse:

    Muito bom este site. Para mim que sou um novato no que diz respeito a esse bicho de sete cabeças que é o HTML, vou tentar aprender um pouquinho sobre a matéria.
    Um abraço.
    Teófilo

  19. ::Clau:: disse:

    @Carmen:
    Pois é, eu resolvi iniciar esta série de artigos, justamente pq venho notando que alguns usuários encontram dificuldades em identificar e entender as partes CSS e HTML do template, o que dificulta e muitas vezes impossibilita a personalização dos seus templates.
    Tomara que ajude e fico feliz que vc tenha gostado \o/.
    Bjos.

  20. carmen disse:

    Olá Gothic! Adorei estes artigos sobre html. Quem sabe agora não faço tanta confusão.

    Beijão e um ótimo 2010 para v.

    Carmen
    anjoseguerreiros.blogspot.com

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.