Então vamos começar o que interessa eu criei um HTML bem simples com uma class chamada “padrao” em cada DIV.

<div class=”padrao”>CSS PADRÃO – VISUALIZADO NO FIREFOX</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 6</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 7</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 8</div>

depois de criada as DIV’s agora nós vamos criar um css chamado “padrao.css” e colocar ele dentro de uma pasta chamada css “eu gosto de sempre separar por pastas as coisas, tipo”css, js, imagens, etc’  ficá muito mas fácil de achar depois “

.padrao{
width:120px;   /*determina a largura da div*/
height:160px;   /*determina a altura da div*/
background:#ededed;   /*determina a cor do fundo da div*/
float:left;   /*determina que a div vai ficar a esquerda*/
border:1px solid red;   /*determina uma borda de 1px de largura na div*/
margin:10px;  /*determina que a div vai ficar 10px de distância do topo, da direita e esquerda e do rodapé*/
font-family:Arial;   /*determina a familia da fonte como Verdana, Tahoma, etc…*/
font-size:11px;   /*determina que a fonte vai ter 11px de altura*/
text-align:justify;   /*determina que a fonte vai ficar no modo de formatação justificado*/
padding:10px;   /*determinada que o texto vai ficar a 10px de distância das bordas da div que ela se encontra*/
}

depois que criado o arquivo padrao.css vamos chamar o css na página desejada, antes de fechar a tag “</head>” vamos colocar a tag “<link>”

<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />

mas presta muita atenção no caminho do CSS se você estiver com dúvida qual o caminho certo é só prestar atenção no nome da pasta e do arquivo onde ele se encontra, o meu está na pasta CSS e com o nome padrao.css  -  ” href=”css/padrao.css” “

Depois que estiver tudo OK vamos colocar os IF’s para os IE’s eles vão abaixo do

“<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />”

que acabamos de colocar, primeiro eu vou colocar do IE 8 e também já criei o arquivo css com o nome ie8.css na pasta CSS.

<!–[if gte IE 8]>
<link rel=”stylesheet” href=”css/ie8.css” type=”text/css” />
<![endif]–>

eu fiz uma pequena alteração no css padrão que criamos primeiro só para ver funcionando, mas a class ainda é .padrao no css, porque esse IF ele funciona assim, ele compara os dois CSS ele vai checando linha por linha do css se ele vê que você alterou alguma coisa ele automaticamente já pega as propriedades do novo atributo que determinamos no novo css… mas tem que ter o mesmo nome de class senão ele vai pensar que é outra coisa e vai passar direto, da uma olhada como ficou.

.padrao{
background:#F17447;
border:1px solid #AD6B00;
}

se vocês perceberam eu só coloquei os atributos que eu alterei porque não tem necessidade de manter os atributos se são iguais.

Para finalizar eu vou colocar o IF do IE 7 e do IE 6:

<!–[if IE 7]>
<link rel=”stylesheet” href=”css/ie7.css” type=”text/css” />
<![endif]–>

<!–[if lt IE 7]>
<link rel=”stylesheet” href=”css/ie6.css” type=”text/css” />
<![endif]–>

vocês vão perguntar porque os dois estão escritos IE7 mas se prestar atenção no IF do IE6 tem um ” lt” o que isso significa, o lt é uma abreviação de “less than” isto é que esse if só vai funcionar se for “menor que o IE7″ .

para os CSS eu vou alterar só o background e a borda, criei um arquivo para cada um dentro da pasta css com os nomes:

ie7.css

.padrao{
background:#FFFBCC;
border:1px solid #E6DB55;
}

ie6.css

.padrao{
background:#94E2FF;
border:1px solid #464646;
}

Para que vocês tenhão uma idéia melhor de como ficou acessem do seu FireFox, IE 6, IE 7 e o IE 8 pra ver como que ficou as DIVs. Qualquer dúvida é só deixar um comentário que eu respondo o mais breve possível.

Visualizar -> CSS Condicional para IE 6, 7 e 8

Download -> CSS Condicional para IE 6, 7 e 8

Nessa primeira imagem se vocês clicarem nela vocês vão ver a primeira versão, nessa só funciona no FireFox e no IE não pega a borda arredondada por causa do “style:  -moz-border-radius“ não funciona no IE:

Clique sobre a imagem para ir na página de demonstração

	
	Esta funcionando no FireFox e não funciona no IE

Nessa segunda imagem se vocês clicarem nela vocês vão ver que está funcionando no FireFox e no IE também eu tive que adicionar um “style: behavior“ nela eu chamo um documento .htc para emular o “-moz-border-radius” no IE.

Clique sobre a imagem para ir na página de demonstração

	
	Esta funcionando no FireFox e no IE

Vamos lá então primeiro tem que ter algum editor de HTML eu uso o Aptana aqui em casa mas na Lógica eu uso o Dreamweaver mas se vocês não quiserem instalar nenhum desse software pode usar o NotePad do Windows mesmo.

Abaixo tem um modelo de HTML crú:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

</body>
</html>

Agora eu vou colocar as DIVs:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

<div>TOPO</div>
<div”>LATERAL</div>
<div>CONTEUDO</div>
<div>RODAPE</div>

</body>
</html>

Agora para finalizar vou colocar as IDs nas DIVs e lembrando que nunca pode ter duas IDs com o mesmo nome senão não valida o seu código, vou colocar mais uma DIV que e a “container” que nele vai o css para determinar a largura do site e vou adicionar o css na pagina mesmo “<style type=”text/css”>”:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>

<style type=”text/css”>
*{margin:0; padding:0;}
#container{width:998px; margin:0 auto; text-align:center;}
#header{float:left; width:996px; height:40px; border:1px solid black;}
#nav{float:left; width:98px; height:100px; border:1px solid blue;}
#content{float:left; width:896px; height:100px; border:1px solid red;}
#footer{clear:both; height:40px; border:1px solid black;}
</style>

</head>
<body>

<div id=”container”>
<div id=”header”>TOPO</div>
<div id=”nav”>LATERAL</div>
<div id=”content”>CONTEUDO</div>
<div id=”footer”>RODAPE</div>
</div>

</body>
</html>

Visualizar o Exemplo
Download do Exemplo

Fonts de Filmes/Produtoras

Marcas/Logos

Bandas

Games

Então, o que um web desginer deve fazer?

A única coisa que se deve fazer é prover ao Googlebot e a todos os crawlers, o mesmo conteúdo que é disponibilizado aos usuários. Se você não o fizer, o seu site ficará suspeitos através dos algortimos de busca dos buscadores.

Algumas sugestões foram feitas pelos engenheiros da gigante Google, para quem desenvolve em Flash:

• Tente usar Flash onde é realmente necessário. Muitos sites como o Youtube, utilizam a tecnologia Flash para a exibição de vídeos, mas o restante do website é baseado em HTML para a perfeita estruturação.
• sIFR: Muitos sites utilizam o Flash para forçar os browsers a apresentar textos em uma fonte que o usuário não possua. Técnicas como sIFR deixam browsers que não possuem suporte ao Flash, lerem o conteúdo normalmente ao invés de forçar a aparição do objeto.
• Criar versões sem Flash: Um modo comum de contornar o problema de indexação de sites em Flash é a criação de uma página inicial para a seleção do tipo do site(com ou sem flash).

http://csscreme.com/

http://cssmania.com/

http://www.cssshowcase.co.uk/

http://www.cssstyle.me/

http://cssorgy.com/

http://www.cssloggia.com/

http://www.designersource.net/

http://cssfreshblend.com/

http://csstea.com/

http://cssproject.cz/

http://www.ucss.pl/

http://www.css-design.fr/

http://www.csselite.com/

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador.

Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Como transformar meu arquivo em .ico?

Nesses links abaixo são alguns sites que transformam suas imagens em extensão .ico para vocês.

http://www.favicon.cc/

http://www.html-kit.com/favicon/

http://tools.dynamicdrive.com/favicon/

http://www.favicon.co.uk/

E agora como colocar o favicon no meu Site ou Blog ?

Agora que já possui o favicon é necessário fazer o upload da imagem para a pasta principal  “pasta raiz” do seu site ou blog e colocar o código dentro da TAG “head” abaixo eu vou dar um exemplo como fazer.

<head>

<link rel=”shortcut icon” href=”http://www.meusite.com.com/favicon.ico”/>

</head>

Espero que vocês tenham gostado do post… até mais…

Abaixo eu vou dar exemplos de fontes com serifa e sem serifa padrões do Windows todas com 11px de altura.

Com Serifa:

Palatino Linotype

Courier New

Times New Roman

Sylfaen

Georgia

Sem Serifa:

Verdana

Arial

Tahoma

Trebuchet MS

Microsoft Sans Serif

Meta Tags são linhas de código HTML, também conhecidas como “etiquetas” e sua função é falar para os robôs buscadores do que se trata o conteúdo do seu site. Nelas você vai inserir as palavras que facilitarão o entendimento dos usuários que estiverem à sua procura, além de informar a qualquer um que veja seu código-fonte que você é o autor do mesmo.

Exemplo básico de Meta Tag:
<HTML>
<HEAD>
<TITLE>aqui vai o Título da página do site <TITLE>
<META NAME=”author” CONTENT=”Nome do autor do site”>
<meta name=”description” content=”Aqui dentro vai a descrição da página ou do site.”>
<META NAME=”keywords” CONTENT=”tecnologia, internet, web, desenvolvimento, seo”>
<meta name=”URL” content=”http://www.seusite.com.br” />
<meta name=”language” content=”portuguese” />
</HEAD>

Vamos detalhar cada item para facilitar

<TITLE > Conhecendo as Meta Tags </TITLE >
Title é onde definimos o título da página do site. Porém, não podemos escrever o que quisermos, temos um limite de 70 caracteres nos resultados de busca para o título de uma página. Ou seja, qualquer coisa além disso ninguém irá ver.

<META NAME=”author” CONTENT=”Nome do autor do site” >
Serve para definir o autor da página. Alguns buscadores têm a opção de busca por autor, por isto esta meta é importante. Não deixe de utilizá-la sempre.

<meta name=”description” content=”descrição da página” / >
Define a descrição da página no buscador. É através dessa meta que você vai falar ao buscador do que se trata seu site. Utiliza no máximo 255 caracteres, além disso não servirá para nada.

<meta name=”keywords” content=”tecnologia, internet, web, desenvolvimento, seo” / >
Inclua nesta tag o maior número possível de palavras que tenham a ver com seu site. Não repita palavras e tente utilizar sinônimos, além de nunca quebrar uma linha de palavras-chave, pois o código será considerado um erro e será ignorado pelos robôs. Utilize quantas meta tags keywords você precisar, o ideal seriam de 20 a 60 palavras, mas fique à vontade para colocar as todas necessárias.

Sempre separe as palavras com vírgula e declare todas elas em letras minúsculas – alguns buscadores têm problemas com letras maiúsculas e podem ignorar seu site. Você pode incluir os termos no singular e no plural (palavra, palavras). No caso de acentuação, ignore-as ou utilize os caracteres acentuados em HTML (”manutenção” fica “manutencao” ou “manutenção”).

Cada buscador trabalha de forma única, é preciso estudar e entender a forma que cada um trabalha a fim de obter um melhor resultado em todos eles.

<meta name=”URL” content=”http://www.seusite.com” / >
Mostra aos buscadores qual a url principal do seu site.

<meta name=”language” content=”portuguese” / >
Define a linguagem da página do seu site. Esta meta é muito importante para que seu site apareça na busca pela linguagem correspondente, caso contrário, sua página só terá chances de aparecer na busca geral.

<meta name=”copyright” content=”seus direitos autorais” />
Se você é um desenvolvedor web, não pode esquecer essa tag: ela define o nome do desenvolvedor e seus direitos sobre ela.

<meta name=”robots” content=”INDEX, FOLLOW” / >
Esta meta é muito importante para qualquer site, pois define se o buscador pode indexar sua página, clicar nos links e catalogar as imagens que existem em seu site. Por isso é importante o ALT nas imagens. Esse código pode ter diversas variações, veja:

* INDEX = informa ao robô que a página pode ser catalogada
* FOLLOW = informa ao robô que ele pode explorar a página
* NODINDEX = informa ao robô que ele não pode catalogar a página
* NOFOLLOW = informa ao robô que ele não pode explorar a pagina
* NOIMAGEINDEX = informa ao robô que ele não pode catalogar as imagens da página
* NOIMAGECLICK = informa ao robô que ele não pode explorar os links nas imagens
* ALL = informa ao robô que ele tem todas permissões na página
* NONE = informa ao robô que ele não tem permissões na página

Importante: A indexação das páginas ou seguimento de link são feitas automaticamente pelos buscadores sem você precisar usar as opções index e follow, mas nada impede que você coloque isso para reforçar essa opções.

<meta name=”revisit-after” content=”5 days” / >
Informa ao robô de quanto em quanto tempo a página é atualizada. Quanto menor o tempo de atualização maior o page-rank da página.

Caso você não atualize a página dentro do período pré-determinado, o buscador “exclui” a página do banco de dados. Devo dizer que isto é a teoria, mas felizmente isso não tem ocorrido. Fiz alguns testes e na prática isso não ocorreu. Lembrando que atualização dinâmica não vale para o robô.

<meta name=”reply-to” content=”seu@email.com.com” / >
Serve para informar ao robô para qual e-mail devem ser enviadas perguntas, respostas e comentários sobre a página/site.

<meta name=”document-class” content=”Completed” / >
Serve para informar ao robô a classe do documento.

<meta name=”document-classification” content=”Internet Services” / >
Serve para informar ao robô a categoria do documento.

<meta name=”document-rights” content=”Public” / >
Informa ao robô os direitos do documento (se é public, private, internal…)

Ex. Se você quer deixar uma seção privada e não quer que o robô a exiba nas buscas, coloque essa tag na página.

<meta name=”document-rating” content=”General” / >
Serve para informar ao robô a classificação da página quanto a idade. Confira o exemplo abaixo:

* General = padrão para todas as idades
* Mature = somente para adultos
* Old 14 years = para maiores de 14 anos (este atributo é devido a lei americana de proteção online para criança menor de 13 anos)
* Safe for kids = para crianças

No Brasil não costuma-se utilizar esse tipo de classificação, mas o correto seria. Então seja legal e use isso para facilitar as ferramentas de proteção a classificarem seu site.

<meta name=”document-state” content=”Dynamic” / >
Serve para informar ao robô se a pagina é dinâmica (jsp, aspx, asp, php,) ou até mesmo estática. Nesse caso as páginas html também podem ser dinâmicas, se tiverem a interferência de scripts baseados em tecnologia server-side.

<meta name=”document-distribution” content=”Global” / >
Serve para informar ao robô a distribuição do documento (global, regional, internal).

<meta name=”cache-control” content=”Public” / >
Serve para informar ao buscador se a página pode ser armazenada em cache. Se sua página sofre constante atualização evite usar essa tag, já que o cache pode ficar desatualizado no buscador.

<meta http-equiv=”Expires” content=”Thu, 01 Jan 2009 00:20:00 GMT” / >
Serve para informar ao sistema que dia a página deve expirar, se não for deletada antes.

<meta name=”Target” content=”_self” / >
Serve para informar ao navegador qual deve ser o destino padrão para os links da página. Isso vale para quando você não coloca o destino em seus links. Por padrão o navegador vai adotar o que estiver dentro desta tag, mas ela não inibe a ação de link que você tenha colocado.

Ex. Se você colocou em um link
outrapagina, mesmo que o parâmetro de meta tenha sido definido como “_self”, o link o qual você fez abrirá como _blank. Nesse caso assume a sua definição de link e não a padrão de página.

<meta http-equiv=”Content-Language” content=”PT-BR” / >
Serve para informar ao navegador em qual idioma está o conteúdo atual da página. Se seu site tiver 2 ou 3 idiomas, separe cada idioma em htmls diferentes e classifique a tag dessa forma, pois caso contrário o google somente edificará o idioma principal.

<meta name=”Publisher-Email” content=”seu@email.com.com” / >
Serve para informar o e-mail de quem publicou a página. Nesse caso se você é o desenvolvedor coloque seu e-mail.

<meta name=”Contributors” content=”Robson Marquesin e Equipe” / >
Serve para informar quem são os publicadores da página, em geral, a equipe que está batalhando no dia-a-dia.

<meta name=”Page-Topic” content=”seo” / >
Serve para informar o tópico principal da página.

Referência:  Carreira Solo