A tag <label> serve para criar um relacionamento entre o texto (rótulo descritivo) e o campo. Essa tag é muito usada para tornar o site acessivel a leitores de tela(para deficientes visuais).

Mas ela também faz com que ao ser clicado no texto o campo receba o foco(o cursor), com isso podemos tornar o texto de um checkbox clicavel.

Para usa-lo, é só adicionar um for=”nomedocampo” no label, e o nomedocampo deve ser definido no id do input, lembrando que o id deve ser unico em todo o formulario.

Aqui um codigo de exemplo:

  <form method="post" action="?">
<label for="username">Nome:</label> <input type='text' id='username' />

<label for="password">Senha: </label> <input type='password' id='password' />

<label for="chekbox">Chekbox: </label><input type="checkbox" value="login" id='chekbox' />
<input type='radio'  id='radio' name='nome'"> <label for='radio'>texto</label> <input type="submit" value="login" />

</form>

Exemplo, clique nos textos:

Legal né ?, e pode ser usado em qualquer formulário, e com certeza os usuarios iram agradecer já que fica bem mais facil de se clicar, só é preciso que os usuarios saibam dessa funcionalidade

Para quem oferece algum sistema, onde qualquer pessoa possa enviar textos é interessante, ter um editor para formatação de textos, já que não é qualquer um que sabe comandos HTML para formatar o texto. E o seu uso é recomendado para não permitir que qualquer comando HTML possa ser usado, já que alguns comandos poderiam arruinar o seu Layout

Para fazer isso existem dois tipo de editores:

WYSIWYG(What You See Is What You Get), que é um editor visual ou seja ao usa-lo você já verá o texto formatado, igual o word, g-mail, wordpress, etc.

BBCODE(Bulletin Board Code), que é uma simples função para substituir caracteres, ex: a tag <b></b> ficará [b][/b], como o seu nome diz ele foi criado para fóruns, onde é encontrado comumente, para criar um editor desse é preciso saber bastante programação, já que é preciso, substituir todos os caracteres, e bloquear o uso de outros comandos html.

Usando um WYSIWYG

Os editores desse tipo, são de uso mais facil, pois são feitos com Javascript, e podem ser usados com qualquer tipo de sistema, PHP, ASP, etc.

Quando eu estive procurando por isso, achei um monte de editores assim, mas não consegui usar ou adaptar ao que eu queria quase nenhum.

O unico que eu me dei bem foi o TinyMCE. Veja aqui um exemplo dele Para usa-lo é bem simple, com o download dele em alguma pasta do seu sistema, e adicione o seguinte no arquivoirá usa-lo

<script type=”text/javascript” src=”pasta_onde_esta_os_arquivos/tinymce/tiny_mce.js”></script>

<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,pagebreak,imagemanager,filemanager",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,spellchecker,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
content_css : "/example_data/example_full.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js",
template_external_list_url : "example_data/example_template_list.js",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
apply_source_formatting : true,
spellchecker_languages : "+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv"
});
</script>

Esse segundo javascript serve para formatar a exibição, no caso aqui ele irá aparecer todas as opções, mas como ele usa um esquema de plugins, cada botão é um plugin, então é possiveo formatar isso.

Como pode ser visto ele tem theme_advanced_buttonsX_add e na frente de cada uma tem os botões que seram mostrados, ou seja é só deletar o nome do botão para remove-lo. E se não for usar um botão pode remover a sua pasta dentro do tinymce para ficar mais leve.

Adicionando esses scripts ele irá adicionar o editor em todas as textareas que houver na página.

Para qualquer um que queira aprender alguma programação voltada para WEB(PHP, ASP, JAVA, etc) precisa saber como criar um formulário em HTML, já que é com eles que você irá coletar qualquer dado digitados pelo usuário.

Então irei explicar todos os passos, e as tags envolvidas, para se criar um fórmulario, e coletar os dados usando PHP.

Leituras recomendadas.

O <form></form>

A tag <form> delimita um formulário, ou seja tudo que estiver dentro dele será enviado ao clicar no botão, ela tem algumas propriedades:

<form name=”nome_do_form” method=”metodo_de_transferencia” action=”url_do_script”>

Explicando:

name: o name serve principalmente por questão de organização para vc saber o que ele faz, ele não é obrigatorio, a menos que vc tenha alguma função em javascript dai ele pode ser obrigatorio.

method: esse é o metodo que os dados serão enviados, se usam dois metodos get e post(leitura obrigatoria)

action: aqui será o nome ou a url, do arquivo que irá “pegar” os dados digitados no formulario.

O <input>

A tag <input> é um campo para entrada de dados, essa tag não precisa ser fechada(não existe </input>).

<input name=”titulo”>

id: campo opcional, usado para algumas funções com javascripttype: tipo de campo, ao qual atribuímos seis valores diferentes para gerar seis tipos diferentes de entrada de dados:

text: campo normal para digitação de textos, esse é o type padrão, caso não seja expecificado nenhum type.

<input name=”titulo” value=”texto” type=”text” />

password: campo de tipo senha, ao digitar algum valor os caracteres são escondidos por asteriscos<input name=”titulo” value=”texto” type=”password” />

Os campos do tipo text e password tem os seguintes atributos adicionais:size: comprimento da caixa de texto, o 26 representa o numero de caracteres que será visivel na telapodem ser digitados.

maxlength: numero de caracteres que poderá ser digitado.

value: Conteudo que irá aparecer no input

hidden: campo invisivel na tela, usado para passar valores de um formulario para outro.

checkbox: botão de multipla escolha,
<input name=”titulo” value=”futebol” type=”checkbox”>Item 1
<input name=”titulo” value=”volei” type=”checkbox” checked=”checked”>Item 2, Checado

radio: botão de unica escolha, desde que todos tenham o mesmo name, só 1 deles poderá ser escolhido
<input name=”titulo” value=”item1″ type=”radio” />Item 1
<input name=”titulo” value=”item2″ type=”radio” />Item 2
<input name=”titulo” value=”item3″ type=”radio” checked=”checked” />Item 3, Checado

Os campos do tipo chekbox e radio tem o atributo checked=”checked” que permite definir um item como selecionado.submit: botão para envio de dados, ele contem o value que será o texto a aparecer no botão
<input type=”submit” value=”texto” >

A <textarea> </textarea>A tag <textarea> também é um campo para digitar qualquer valor mas ele permite ter varias linhas. Existe os seguintes atributos para ele:

<textarea name=”post” id=”post” rows=”5″ cols=”40″>Aqui fica algum texto, se quizer</textarea>

name e id: tem as mesmas funcionalidades do input.

rows: numero de linhas que haverá

cols: numero de colunas que haverá(cada coluna é o equivalente a 1 caracter).

Esses são os principais e fundamentais itens para um fórmulario, existem outros veja os aqui. Essas tags não podem ter a sua aparencia alterada, mudada somente CSS, mas existe um jeito de alterar eles usando um script em javascript.
Criando um formulário

Agora que você já conhece para que serve cada um deles vamos, criar um formulario completo, para entender completamente o seu funcionamento.

Para usar o formulário usamos 2 arquivos o primeiro terá somente o formulário, usando as tags aqui explicadas, por isso pode ser em .html. E o segundo irá coletar os dados digitados, por isso precisa ser feito usando a linguagem de programação escolhida, no caso irei explicar com PHP, por isso é preciso executa-lo em um servidor, ou em localhost com o php instalado.

Para o exemplo não irei usar o radio e nem o checkbox pois são mais complicados para “pegar” o item selecionado(se tiver duvidas em como fazer isso é só perguntar), e a ideia desse artigo é ensinar o basico sobre como usar formularios.

Crie o arquivo com o formulário, chame-o de form.html, com o seguinte conteudo.

<head>
<title>Teste de Formulario com PHP</title>
<head>
<body>
<h2>Teste de Formulario com PHP</h2>
<form name="teste" method="post" action="resultado.php">
<input name="texto" type="text" /><br><br>
<input name="senha" type="password" /><br><br>
<textarea name="post" id="artigo" rows="5" cols="40"></textarea><br><br>

<input type="submit" value="Enviar">
</body>

e agora crie o arquivo que irá receber os dados, chame o de resultado.php(ou o nome que vc colocou no action do arquivo anterior), o seu conteudo será

<?
$texto = $_POST["texto"];
$senha = $_POST["senha"];
$post = $_POST["post"];

echo "O texto digitado foi: ".$texto;
echo "<br> A senha digitada foi: ".$senha;
echo "<br> O post digitado foi: ".$post;
?>

Criamos as 3 variaveis e gravamos nela os dados que vieram do formulario usando o $_POST, depois damos um echo para exibir na tela os dados.

Bem simples não?, qualquer duvida é só perguntar.

Para quem estiver acompanhando a área Aprendendo PHP.

Leitura Obrigatoria: Tutorial Básico PHP, Coletando informações do usuário com PHP,

Leitura Recomendada: Mudando o layout dos formulários HTML

Os proximos passos/leituras são:

Comandos basicos do Mysql no PHP

Uma função muito útil é poder enviar e-mails, isso pode ser muito útil para criar formulários de contato, ou enviar os dados de novo registro, etc.

Para podermos enviar e-mais usando o php usamos a função mail()

Ela aceita alguns parâmetros como, Destinatário, Assunto, Mensagem para dividirmos as linhas da mensagem podemos usar o \n, e Cabeçalho o cabeçalho é de uso opcional. Os outros3 itens são de uso obrigatório.

Veja um exemplo:

<?php
mail(“email@exemplo.com”, “Um Assunto aqui”, “Bla Bla Bla\n Ha HA HA HA\n Pois é pois é pois é”,”Content-Type: text/html; charset=iso-8859-1″);
?>

é logico que na mensagem pode ser usado comandos HTML para formatar a mensagem.

Com isso é possível usar Um formulário em HTML e pegar os dados do usuario.

Irei ensinar 2 maneiras de redirecionar uma pagina, usando meta tag, e javascript, o meta tag tem a vantagem de permitir definir um tempo até que a página seja redirecionada, já usando javascript não tem essa opção.

Usando Meta tag

html>
<head>
<title>Redirecionando...</title>
<meta http-equiv="refresh" content="10;url=http://www.clubepc.org/"> <!---- adcione somente esta linha no cabeçalho, </head>

<body>
Depois de 10 segundo você será redirecionado para o site <b>Clube PC</b>.
</body>
</html>

em content=”10 esse 10 quer dizer o tempo em segundos que a pagina levará para ser redirecionada

Usando JavaScript

<html>
<head>
<title>Redirecionado...</title>
</head>
<body>
<span style="font-weight: bold;"> Esta página será
redirecionada para um novo endereço. Se não funcionar
após alguns segundos, clique </span> <a href="http://www.clubepc.org" target=_parent>aqui</a><br>
<br>
</body>
</html>

<script language="Javascript">
parent.top.location.href='http://www.clubepc.org';
</script>

ou também <script>window.location.href=’dicas.php’;</script>

Como eu já havia falado antes o Internet Explorer 6 não reconhece o comando position: fixed(o IE7 já reconhece) então para podermos fixar um conteudo na tela precisamos usar um hack.

Veja aqui um exemplo de como é um conteudo fixo

Vejamos então como fazer isso.

Nos navegadores descentes(qualquer um que não seja o IE), usamos os seguintes atributos do CSS para fixar um conteudo na tela:

<style type="text/css">

#meudiv{
position: fixed;
left: 100px;
top: 50px;
}

</style>

<div id="meudiv">
Algum conteudo aqui
</div>

Sendo o left e top as distancias que o conteudo irá ficar em relação a tela.

Como o IE 6 ou anterior não reconhece esse comando precisamos usar o seguinte hack:

<style type="text/css">

* html #meudiv{ /*IE6 only rule, applied on top of the default above*

left: 100px;
position: absolute;
top: expression(document.compatMode=="CSS1Compat"?        document.documentElement.scrollTop+50+"px" : body.scrollTop+100+"px");

}

</style>

<div id="meudiv">
Algum conteudo aqui
</div>

O * html é um hack que indica que o conteudo só será executado no IE 5 ou 6, e para alterar a altura que o conteudo ficará na tela é só mudar o numero em body.scrollTop+100+”px”

Como eu havia explicado no post anterior você pode colocar o dois css #meudiv que o segundo só será executado no IE e o primeiro em todos os outros navegadores

Mas com esse hack o conteudo fixo, fica um pouco estranho no IE, pois ao mover a tela, é como se o conteudo o se movesse também, e ele retorna para posição fixa, principalmente se for algo grande(muitas linhas), veja o exemplo para saber do que estou falando.

E no fórum tem um exemplo de uso disso na imagem de ir ao topo(irei colocar algo parecido aqui no blog)

Os comandos html para formulários(input, button, etc) tem um layout que não pode ser mudado com CSS, mas existe alguns scripts em javascript que permitem alterar esse layout um deles é o niceform. Veja só a diferença:

o normal: usando o niceform:

bem melhor não ??

Para usa-lo é simples, primeiro faça o download dele aqui, ele vem com um arquivo de exemplo para poder dar uma olhada, mas para aplica-lo em suas paginas é só adicionar:

<script language=”javascript” type=”text/javascript” src=”niceforms.js”></script>
<style type=”text/css” media=”screen”>@import url(niceforms-default.css);</style>

e em seu formulário coloque class=”niceform” ex: <form action=”pagina.php” method=”post” class=”niceform”>

E pronto ele já irá alterar todos os comandos para o novo layout. O ueba usa esse sistema na sua pagina de enviar noticias http://ueba.com.br/NovoLink

Obs: na pasta imagens tem todas as imagens que ele usa(tudo que é visto são imagens), ou seja é possível mudar elas para se adaptar ao layout do seu site =D

Um atributo bem interessante que é possivel alterar é o efeito alpha, ele serve para tornar uma imagem transparente, exatamente como pode ser visto aqui no site.

Para usar esse efeito se usa os seguintes atributos:

Para internet explorer:

opacity:.50;filter: alpha(opacity=50);

Para firefox:
-moz-opacity: 0.5;

No caso o 50 e o 0.5 é a porcentagem de transparencia, sendo 100 ou 1.0 a imagem normal, e 10 ou 0.1 extremamente transparente(quase invisivel).

Para usa-lo e só adicionar no css ligado a imagem. Nem vou adicionar um exemplo pois o site todo é um exemplo disso =D
Qualquer dúvida é só perguntar.

Update: eu criei um exemplo para entender melhor como fica esse efeito, aqui

Obs: eu nunca testei esse efeito em outros navegadores como o opera se alguem puder testar e falar se funciona vai ajudar bastante.

Aqui tem um lista com quase todos os comandos HTMLs existentes elas estao divididas por funcionalidade para facilitar

As TAGs Principais

<html> </html> tags de inicio e fim de um doc html;

<head> </head> Identificadores do cabeçalho ;

<meta> Meta informação (reside entre os tags <head> </head>;

<meta http-equiv=”refresh” content=”x”> atualiza a pag corrente a cada X segundos;

<meta http-equiv=”refresh” content =”x url=proxima.htm”> atualiza a pag corrente a cada X segundos e vai para uma próxima página ;

<meta name=”palavras chave” content=”x”>comunica as palavras chaves e envia para os mecanismos de busca;

<meta name=”descrição” content=”x”> comunica a descrição para os mecanismos de busca;

<title> </title> Identifica o título da página ;

<body> </body> inicia e finaliza o corpo do documento html;

<body background =”imagem.gif” > coloca um fundo em uma pagina;

<body bgcolor=”#cccccc”> coloca uma cor de fundo na página;

<body text=”#000000″> especifica a cor padrão de um texto ;

<body link=”#000000″> especifica a cor padrão de um link;

<body vlink=”#000000″> especifica a cor padrão de um link visitado;

<body alink=”#000000″> especifica a cor padrão de um link ativo;

<body leftmargin=”0″ topmargin=”10″ rightmargin=”10″> especifica distância da margem esquerda, direita e topo da página ;

<body marginwidth=”0″ marginheight=”0″ > coloca as margens esquerda e superior em 0 no Netscape 4.0 + ;

<body onload=”x()”> especifica a iniciação de um evento do script quando o doc html é carregado

As Tags de fontes e tipos

<basefont size=”x”> Estabelece um tamanho padrão de fonte de 1-7 onde size o padrão é 3;

<h></h> Cabeçalho de 1-6 ( em outras palavras <h1>texto</h1> ou <h2>texto</h2>;

<b> </b> Negrita um texto;

<strong></strong> Similar ao negrito;

<i></i> Itálico;

<u></u> Sublinhado;

<strike></strike> texto tachado;

 texto subscrito;

 texto sobrescrito;

<tt></tt> Texto teletipo (largura fixa);

<small></small> texto menor;

<big></big> texto maior;

<font size=”x”> tamanho da font onde x tamanho;

<font face=”nome da fonte”> Especifica o nome da fonte, exemplo, verdana, arial etc…;

<font color=”#000000″> Atribui cor a uma fonte.

As Tags de Layout

<blockquote></blockquote> desloca o bloco de texto;

<br clear=left/right/all> insere qubra de linha que limpa;

<center></center> centraliza objetos;

<div> Divide página em seções lógicas;

<div align=left/center/right> Alinha os dados dentro de uma seção div;

<div class=classname> atribui uma class a uma seção div;

<hr> Insere uma régua horizontal ao longo da página

<hr size=”x”> especifica o tamanho de espessura horizontal da régua em px;

<hr width=”x”> especifica o tamanho da largura da régua em px;

<hr noshade> especifica uma régua em preto;

<nobr> evita quebra de linha;

<p> Cria parágrafos;

<p align=left/center/right> alinha texto do paragrafo;

As Tags de Link

<a href=”URL”>Teste</a> Faz um link de texto ou imagem com uma url;

<a href=”URL” target=”_blank”>Teste</a> Faz um link de texto ou imagem com uma url dentro de uma nova janela do navegador totalmente nova;

<a href=”URL” target=”nome_frame”>Teste</a> Faz um link de texto ou imagem com uma url dentro de um frame;

<a href=”URL” target=”_self”>Teste</a> Faz um link de texto ou imagem com uma url dentro do frame que o link foi acionado ou seja, nele mesmo;

<a href=”URL” target=”_parent”>Teste</a> Faz um link de texto ou imagem com uma url dentro de um FRAMESET gerador do documento;

<a href=”URL” target=”_top”>Teste</a> Faz um link eliminando o frameset dentro da mesma janela do browser.

As Tags de Imagens

<IMG src=”URL”> Apresenta uma imagem;

<IMG src=”URL” align=top/middle/bottom> Alinha a imagem em relação a base do texto;

<IMG src=”URL”align=left/right> Alinha imagem em relação a página ou frame;

<IMG src=”URL” alt=”texto”> mostra descritivo;

<IMG src=”URL” width=”X” height=”Y”> especifica largura e altura;

<IMG src=”URL” border=”0″> retira as bordas da imagem;

<IMG src=”URL” hspace=”X” vspace=”Y”> especifica espaçamentos vertical e horizontal;

<IMG LOWsrc=”URL” src=”URL”> especifica o carregamento inicial de uma imagem de baixa resolução antes da imagem verdadeira seja carregada;

<IMG NAME=”X” src=”URL”> Nomeia a imagem para uso com JavaScript.

As Tags de Listas

<DL> </DL> Inicia / termina um título de definição;

<DD> </DD> Inicia / termina definição;

<DT> </DT> Inicia / termina termo de definição;

<OL> </OL> Inicia / termina lista ordenada;

<OL compact></OL> Cria uma lista ordenada compactada;

<OL TYPE=A/a/I/i/1></OL> Cria uma lista ordenada, especifica por tipo(A para letras maiúsculas ,a para minúsculas, I para numerais romanos, i para numerais romanos pequenos e1 para números padrão;

<LI></LI> Item de lista padrão;

<LI TYPE=A/a/I/i/1>></LI> controla o formato de uma lista;

<UL> </UL> inicia /termina Lista não ordenada;

<UL COMPACT></UL> cria lista não ordenada compactada;

<UL TYPE=DISC/CIRCLE/SQUARE> Especifica o tipo do bullet.

As Tags de Tabela

<table></table> Inicia e finaliza uma tabela;

<table border=”x”> define a borda de uma tabela;

<table cellspacing=”x”> define o espaçamento entre celulas;

<table cellpadding=”x”> defeina espessura de bordas;

<table width=”x”> define o tamanho da tabela em pixels;

<table width=”%”> define o tamanho da tabela em porcentagem;

<tr></tr> abre uma linha fecha uma linha;

<td></td> abre uma celula fecha uma celula;

<tr align=left/center/right valign=”top/middle/bottom > define o alinhamento horizontal e vertical da linha;

<TD NOWRAP> evita quebra de linha dentro de uma celula;

<TD COLSPAN=”x”> especifica o numero de colunas;

<TD ROWSPAN=”x”> especifica o número de linhas;

<TD width=”x”> especifica o tamanho da celula ;

<TH></TH> define o cabeçalho da tabela;

Tags de Frames

<frameset></frameset> Define os elementos do frame;

<frameset cols=”x,x”> Define as colunas dos frames em px ou %;

<frameset rows=”x,x”> Define as linhas dos frames em px ou %;

<frameset border=”x”> define a borda 1,2,3 quando valor “0″ desligada;

<frameset framespacing=”1/0″> define espaçamento entre frames;

<frame src=”url”> especifica a url a ser carregada;

<frame name=”name”> especifica nome do frame;

<frame noresize> não permite que o frame seja redimensionado;

<frame scrolling=”auto” > determina se vai ter barra de rolagem ou não

Finalmente as Tags de Formulários

<form action =”url” Method=”get/post> Inicia term form e define parâmetros;

</form>

<input type=”text/password/checkbox/radio/submit/reset/image”> Especifica campos de entrada. senha, caixa de marcação, rádio, envio, limpa imagem;

<input type=”HIDDEN”> Campo oculto;

<input name=”nomedocampo”> define o nome de um campo no form;

<input checked> Marca de seleção ativada;

<input size=x> tamanho do campo;

<option> Cria opções podem ser selecionadas;

<option selected=”selected”> especifica uma opção selecionada;

<option value=”value”> especifica um valor ;

<select> </select> cria um menu no form ;

<select name=”name”> </select> Identifica os dados reunidos no menu;

<textarea </textarea> Cria uma caixa de entrada

<textarea wrap></textarea> especifica o retorno automático de um texto.

Eu achei esse site aqui um listagem de todos os comandos e com exemplos e definicoes de cada comando mas está em ingles
http://www.htmlcodetutorial.com/quicklist.html.

Quer aprender mais sobre HTML?. Então veja o preço de alguns livros no Submarino.

.

No Internet Explorer é possivel mudar a cor da barra de rolagem. E isso só funciona no IE no firefox ou opera ele não irá funcionar. Para fazer isso é só usar o seguinte css

<style type="text/css">
body {
scrollbar-arrow-color: ffffff;
scrollbar-base-color:ffcc00;
scrollbar-dark-shadow-color: ffffff;
scrollbar-track-color: ffffff;
scrollbar-face-color: ffcc00;
scrollbar-shadow-color: ffffff;
scrollbar-highlight-color: ffcc00;
scrollbar-3d-light-color: ffffff;
}
</style >

Dependendo do navegador, os caracteres especiais como acentos e simbolos, podem não ser reconhecidos, para isso, existe uma representação especial desses caracteres.

Só lembrando, que para qualquer pagina criada é preciso defenir o charset, para que ela reconheça os acentos, por padrão o comando para isso é

</p>
<p><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /></p>
<p>

Aqui tem uma lista com todos os caracteres e seus respectivos codigos:

Caracteres Acentuados no Português

Caracteres Especiais

Caracteres Comerciais

Caracteres Matemáticos e Lógicos

Outros Acentos e Caracteres Especiais

Caracteres Gregos

Acho que qualquer um que conheça html, deve conhecer o comando marquee<marquee></marquee>, ele serve para dar um efeito de movimento ao texto, só que ele tem uma serie de atibutos, para deixar melhor esse efeito, aqui vai um lista com alguns dos atributos dele:

behavior: tipo de movimento ex: scroll, slide

loop: quantidade de vezes que o conteudo irá “rodar”

direction: direção que o conteudo se moverá, ex: left, right, top, bottom
height e width: dimensões da area de movimento
scrollamount: velocidade do movimento
scrolldelay: tempo que o conteudo ficara oculto

e uma função muito interressante, que pode ser usada, nesse comando, é o onmouseover, onmouseout que permite ao passar do mouse parar o movimento.

E aqui um exemplo, com todos os atributos, sendo usados:

<marquee behavior="scroll" direction="left" loop="10"
height="150" width="150" scrollamount="2" scrolldelay="10"
onmouseover="this.stop()" onmouseout="this.start()" align="left">
aqui pode ter um texto, mas ficaria melhor com imagens
</marquee>

e o resultado será esse:

aqui pode ter um texto, mas ficaria melhor com imagens, e ao parar o mouse sobre ele ele pausa o movimento

Para textos em linha, eu acho feio esse efeito, mas com imagens, ele fica perfeito, principalmente para algo como, uma galeria de parceiros, o que permite, ter uma area pequena, mas com muitas imagens.

Porque usar tabelas para layouts é estupidez?

Esse é o título de um artigo que de forma bem humorada demonstra todos os prós de um layout Tableless e os contras de uma Table Layout.

Com linguagem simples e objetiva (e alguns quadrinhos), esse artigo:
- Mostra o que é um layout Tableless.
- Faz uma comparação entre Tableless e Table Layout.
- Apresenta os bastidores de uma Table Layout
- Possui exemplos práticos e bem humorados sobre a transição de modelos
- E também mostra onde é melhor a utilização de tabelas ao invés de Tableless

Curioso? Então acesse e perca o medo de redesenhar seus layouts.
http://www.plasmadesign.com.br/stupidtables/index.html