Sobre
O apostila de HTML e CSS foi criado dia 22/10/2011. Aqui posto aulas de HTML e CSS, desde o básico até o avançado. Quer ver meus themes? Clique em "HTML" no menu e você será redirecionado ao meu tumblr para tirar dúvidas, onde também disponibilizo themes. Ideia original por mim, Amanda, por favor não copie e nem se inspire.

Menu
inícioasko tumblraulasHTMLtumblr pessoal

Agradecimentos
Amanda: pelo theme
Wigor Lemes: pela paginação
Drikoti.net: pelo favicon
Having Themes: pelo menu de coração
Dicas Tumblr: pela seleção de texto colorida
RH themes: pelo background
Flora Demore: pelo bloqueio do Ctrl + U
Victória: código do pre e code
eu-te-4mo-deactivated20120929:
Olá , gostaria de saber como faço para arrumar muitos follow's?

Seja um tumblr bom. 



jinker:
oi, oq é css?

ooi, css é o que “define o estilo” do theme, as cores, posiçoes, sombras, tamanho - Maah



eitaruiva:
Amores amei aqui s2,sempre aprendi tudo de html sozinha,mas entrei aqui por curiosidade e acabei aumentando meu nível de conhecimento sobre css e html,obg

Brigadão, aamore! São ask’s assim que fazem a gente querer melhorar p vcs ! - Lu.



watafiya:
Olá, Amanda! Gostaria de agradecer pelas aulas, ampliaram meu conhecimento quanto a HTML e CSS, explicou muito bem, Obrigada. Parabéns pelo tumblr!

Nossa, obrigada! Eu tenho que continuar com as aulas, parei faz bastante tempo, mas é sério que já ajudou assim? :O E obrigada mais uma vez! =]

(Amanda)



cssand-html:
seguindo :) beijoos

obrigada haha.

- Amanda



semi-adulto:
A srtª já tem seu lugar garantido no céu rs , Não sei oque seria de mim sem esse tumblr ^^.

awn, q linds :(

Amanda



Aula número 3: comandos básicos em CSS 

  Para construir o estilo da página, ou seja, as cores, as posições e tudo mais, é necessário entender os comandos em CSS. Aqui vão os básicos, que podem ser usado em quase todas as formatações que você fizer em seu theme.

background-color:#COR EM HTML;

Para que serve? Para determinar a cor do fundo. Para que geralmente é utilizada? Fundo do theme, caixa dos posts/sidebar, caixa do menu, etc. O que são cores em HTML? Para a cor “funcionar” e aparecer no theme, ela precisa estar em HTML. Você encontra os códigos em geradores, por exemplo, eu uso esse aqui.

background-image:url('URL DA IMAGEM');

Para que serve? Para determinar o fundo colocando uma imagem. Para que geralmente é utilizada? Fundo do theme, caixa do menu hover, etc. O que é a URL da imagem? Quando você clica com o botão direito do mouse em uma imagem, clique em “copiar URL da imagem”, e pronto, esse é o endereço HTML dela. Eu tenho uma foto no meu computador, como consigo o código HTML dela? Você hospeda ela em algum site. Eu uso esse aqui.

font-family:'NOME DA FONTE';

Para que serve? Para determinar a fonte da escrita de determinado local. Para que geralmente é utilizada? Para determinar o nome da fonte em qualquer lugar do HTML. Qualquer nome de fonte que eu colocar ali, aparece? Não. As mais simples, que já vem no computador, é só colocar o nome que aparecem. Mas algumas você precisa fazer download e etc para aparecer. 

font-size:NUMEROpx;

Para que serve? Para determinar o tamanho da fonte de determinado local. Para que geralmente é utilizada? Para determinar o tamanho da fonte em qualquer lugar do HTML. Qualquer número que eu colocar ali fica certo? Sim. O que é ‘px’? Uma unidade de medida HTML, existem outras como ‘pt’ e etc.

letter-spacing:NUMEROpx;

Para que serve? Para determinar o espaçamento entre as letras de determinado local. Para que geralmente é utilizada? Para determinar o espaçamento das letras em qualquer lugar do HTML. Qualquer número que eu colocar ali fica certo? Sim. Qual número eu coloco pra não deixar nenhum espaçamento entre as letras, deixá-las ‘normais’? 1px.

line-height:NUMEROpx;

Para que serve? Para determinar o espaçamento entre as linhas. Para que geralmente é utilizada? Em títulos dos posts, ou i-frame. Qualquer número que eu colocar ali fica certo? Sim. Qual número eu coloco para as linhas não ficarem grudadas e impossíveis de ler? 30px.

font-style:normal; font-style:italic; font-style:bold;

Para que servem? Para determinar o estilo da fonte. Cada uma das três tem funções diferentes. ‘Normal’ é para a fonte ficar sem efeito algum, ‘italic’ para ficar em itálico e ‘bold’ para ficar em negrito

width:NUMEROpx;

Para que serve? Para determinar a largura de determinada coisa. Para que geralmente é utilizada? Para determinar a largura da sidebar, da caixa dos posts, da caixa do menu e etc.

width="NUMEROpx"

Para que serve? Para determinar a largura de determinada imagem

height:NUMEROpx;

Para que serve? Para determinar a altura de determinada coisa. Para que geralmente é utilizada? Para determinar a altura da caixa do menu.

height="NUMEROpx"

Para que serve? Para determinar a altura de determinada imagem

text-align:justify; text-align:left; text-align:right; text-align:center;

Para que servem? Para determinar o alinhamento do texto de determinado local. Cada uma das quatro tem função diferente. ‘Justify’ é para deixar o texto justificado, ‘left’ para alinhar a esquerda, ‘right’ a direita e ‘center’ ao centro.

  Lembrando que ainda existem outros comandos a aprender, esses são somente os básicos. Se foi útil dê like, não reblogue, não repasse e não copie.



Posted on November/19/2011 with 68 notes
Reblog this

# Tagged: #aulas,

Anonymous:
AMEI suas aulas , sao SUPER explicadas.... qdo vamos aprender a fazer um theme pro tumblr???

hehe, obrigada amor. depois dessas vai vir os códigos HTML, depois os códigos CSS, então vou colocar as principais tags do tumblr, e tal. mas é fundamental entender primeiro hehe :)



Aula número 2: CSS básico / div class e div id: qual a diferença? 

O que é CSS? São os códigos que determinam o estilo da página, ou seja, as cores, o estilo das caixas, as fontes, o tamanho e etc.

Onde fica o CSS de um theme/página? Basicamente, é tudo que fica entre as tags <style> e </style>. Porém, em alguns themes, a tag <style> pode vir como <style type=”text/css”>, mas isso não altera a função. 

O que está dentro do CSS? O CSS é basicamente as div class, div id, e etc. 

Entendendo o CSS:

div class: div class são caixas que ficam no theme (não necessariamente “caixas”, são também as fontes, e etc).

Qual a diferença entre div class e div id? Não há muita. Na div class geralmente não se coloca a posição de algo, coloca-se depois, e nas div id já coloca-se a posição.

Como eu sei o que é div id e o que é div class? As div class vem com um ponto final antes do seu título. Exemplo:

.caixa

Com os códigos, fica assim:

.caixa{background:#fff; color: #969696; padding: 4px; font-family: georgia; font-style: normal; font-size: 11px;}

Na hora de colocar algum conteúdo dentro dessa div class, ficará assim:

<div class="caixa"> CONTEÚDO </div> 

Já as div id geralmente vem com um # antes do seu título. Exemplo:

#entry

Com os códigos, fica assim:

#entry{font-family: Trebuchet Ms; letter-spacing: 1px; font-size:7pt; border-top:1px solid #eee; position:fixed; left:50px; top:80px}

Na hora de colocar algum conteúdo dentro dessa div id, ficará assim:

 <div id="entry"> CONTEÚDO </div> 

Basicamente, elas não tem muita diferença. Geralmente, cria-se uma div id para a sidebar, e coloca-se no CSS todas as propriedades, como a cor do fundo, a posição e afins. Cria-se uma div class para a caixa dos posts, e outra div id para colocar-se o conteúdo do i-frame. 

Essa aula foi sobre CSS básico e a diferença entre div class e div id, se lhe foi útil por favor dê like, e não copie. Grata, Amanda.


Posted on November/5/2011 with 73 notes
Reblog this

# Tagged: #aulas,

vou fazer a próxima aula: CSS básico rs. 



1 of 3 1 2 3 »