Aprendendo CSS e HTML Vanessa S.
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).
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 🙂
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.
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.
Olá Vanessa, Muito Obrigado.
Deu tudo certo 🙂
Vanessa tem como vc me passar o seu e-mail ou o seu gtalk?
[]’s.
Parabéns Clau.. Show de bola,tenho certeza que aqui aprenderei bastante coisa!! ^^
Adorei e acho que você pode e deve continuar, bjs!
Denilson
Obrigada!
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.
Clau queria mexer no meu template,mas o còdigo do blogger não è compatìvel com o dreamweaver não nè?
Obrigado Clau,você è di+!
Lucas
Eu uso o CS3 e o CS5.
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! 🙂
Gilmar S.C
Obrigada pelo comentário, e espero que vc consiga aprender bastante coisa sim.Volte sempre!
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!
@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!
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…
@luizvalerio
Obrigada pelo comentário e fico feliz em saber que gostou. Volte sempre!
Gostei muito das aulas. Suas orientações me tem sido muito úeis. Grande abraço!
@Teófilo Silva:
Obrigada pelo comentário! E espero que ajude sim. Volte sempre!
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
@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.
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