Categoria Dicas HTML - Query string em html , index.html?pagina=uma_pagina

Posted by webmaster | HTML |

Visitando alguns sites, encontrei um código bastante interessante para você utilizar em seu site, nele você especifica a seção na url da página, que o script irá redirecionar para você.

Exemplo: digito http://www.meusitepessoal.com.br/redir.html?secao=contao e o script irá redirecionar para http://www.meusitepessoal.com.br/contato.html

A seguir o código:

<script language=”javascript”>
<!–
/*TITLE: Client-Side Request Object for javascript by Andrew Urquhart (UK)
HOME: http://www.andrewu.co.uk/tools/request/?ref=CSJSsrc
COPYRIGHT: You are free to use this script for any use you wish, the only
thing I ask you do is keep this copyright message intact with the script.
Please don’t pass it off as your own work, but feel free to enhance it and send
me the updated version. Please don’t redistribute - it makes it harder to distribute
new versions of the script. This script is provided as is, with no warranty of any
kind. Use it at your own risk. Copyright Andrew R Urquhart
VERSION: #1.1 2003-03-16 01:19 UTC*/
function RObj(ea) {
var LS=”";var QS=new Object();var un=”undefined”;var f=”function”;var n=”number”;var r=”string”;var e1=”ERROR: Index out of range in\r\nRequest.QueryString”;var e2=”ERROR: Wrong number of arguments or invalid property assignment\r\nRequest.QueryString”;var e3=”ERROR: Object doesn’t support this property or method\r\nRequest.QueryString.Key”
function Err(arg) {if (ea) alert(”Request Object:\r\n”+arg)}
function URID(t) {var d=”";if (t) {for (var i=0; i<t.length; ++i) {var c=t.charAt(i);d+=(c==”+” ? ” “:c);};};return unescape(d);}
function OL(o) {var l=0;for (var i in o) {if (typeof(o[i])!=f) l++;};return l;}
function AK(key) {var auk=true;for (var u in QS) {if (typeof(QS[u])!=f && u.toString().toLowerCase()==key.toLowerCase()) {auk=false;return u;}};if (auk) {QS[key]=new Object();QS[key].toString=function() {return TS(QS[key])};QS[key].Count=function() {return OL(QS[key])};QS[key].Count.toString=function() {return OL(QS[key]).toString()};QS[key].Item=function(e) {if (typeof(e)==un) return QS[key];else {if (typeof(e)==n) {var a=QS[key][Math.ceil(e)];if (typeof(a)==un) Err(e1 +”(\”"+key+”\”).Item(”+e+”)”);return a;}else Err(”ERROR: Expecting numeric input in\r\nRequest.QueryString(\”"+key+”\”).Item(\”"+e+”\”)”);}};QS[key].Item.toString=function(e) {if (typeof(e)==un) return QS[key].toString();else {var a=QS[key][e];if (typeof(a)==un) Err(e1+”(\”"+key+”\”).Item(”+e+”)”);return a.toString();};};QS[key].Key=function(e) {var t=typeof(e);if (t==r) {var a=QS[key][e];return (typeof(a)!=un && a && a.toString() ? e:”");}else Err(e3+”(”+(e?e:”")+”)”);};QS[key].Key.toString=function() {return un};};return key}
function AVTK(key, val) {if (key!=”") {var key=AK(key);var l=OL(QS[key]);QS[key][l+1]=val;}}
function TS(o) {var s=”";for (var i in o) {var ty=typeof(o[i]);if (ty==”object”) s+=TS(o[i]);else if (ty!=f) s+=o[i]+”, “;};var l=s.length;if (l>1) return(s.substring(0,l-2));return (s==”" ? un:s);}
function KM(k, o) {var k=k.toLowerCase();for (var u in o) {if (typeof(o[u])!=f && u.toString().toLowerCase()==k) return u;};}
if (window.location && window.location.search) {LS=window.location.search;var l=LS.length;if (l>0) {LS=LS.substring(1,l);var preAmpAt=0;var ampAt=-1;var eqAt=-1;var k=0;var skip=false;for (var i=0; i<l; ++i) {var c=LS.charAt(i);if (LS.charAt(preAmpAt)==”=” &#124;&#124; (preAmpAt==0 && i==0 && c==”=”)) skip=true;if (c==”=” && eqAt==-1 && !skip) eqAt=i;if (c==”&” && ampAt==-1) {if (eqAt!=-1) ampAt=i;if (skip) preAmpAt=i+1;skip=false;};if (ampAt>eqAt) {AVTK(URID(LS.substring(preAmpAt,eqAt)),URID(LS.substring(eqAt+1,ampAt)));preAmpAt=ampAt+1;eqAt=ampAt=-1;++k;};};if (LS.charAt(preAmpAt)!=”=” && (preAmpAt!=0 &#124;&#124; i!=0 &#124;&#124; c!=”=”)) {if (preAmpAt!=l) {if (eqAt!=-1) AVTK(URID(LS.substring(preAmpAt,eqAt)),URID(LS.substring(eqAt+1,l)));else if (preAmpAt!=l-1) AVTK(URID(LS.substring(preAmpAt,l)),”");};if (l==1) AVTK(LS.substring(0,1),”");};};};var TC=OL(QS);if (!TC) TC=0
QS.toString=function() {return LS.toString()};QS.Count=function() {return (TC ? TC:0)};QS.Count.toString=function() {return (TC ? TC.toString():”0″)};QS.Item=function(e) {if (typeof(e)==un) return LS;else {if (typeof(e)==n) {var e=Math.ceil(e);var c=0;for (var i in QS) {if (typeof(QS[i])!=f && ++c==e) return QS[i];};Err(e1+”().Item(”+e+”)”);}else return QS[KM(e, QS)];};return un;};QS.Item.toString=function() {return LS.toString()};QS.Key=function(e) {var t=typeof(e);if (t==n) {var e=Math.ceil(e);var c=0;for (var i in QS) {if (typeof(QS[i])!=f && ++c==e) return i;}}else if (t==r) {var e=KM(e, QS);var a=QS[e];return (typeof(a)!=un && a && a.toString() ? e:”");}else Err(e2+”().Key(”+(e?e:”")+”)”);Err(e1+”().Item(”+e+”)”);};QS.Key.toString=function() {Err(e2+”().Key”);}
this.QueryString=function(k) {if (typeof(k)==un) return QS;else {var k=KM(k, QS);if (typeof(QS[k])==un) {t=new Object();t.Count=function() {return 0};t.Count.toString=function() {return “0″};t.toString=function() {return un};t.Item=function(e) {return un};t.Item.toString=function() {return un};t.Key=function(e) {Err(e3+”(”+(e?e:”")+”)”);};t.Key.toString=function() {return un};return t;}if (typeof(k)==n) return QS.Item(k);else return QS[k];}}
this.QueryString.toString=function() {return LS.toString();};this.QueryString.Count=function() {return (TC ? TC:0)};this.QueryString.Count.toString=function() {return (TC ? TC.toString():”0″)};this.QueryString.Item=function(e) {if (typeof(e)==un) return LS.toString();else {if (typeof(e)==n) {var e=Math.ceil(e);var c=0;for (var i in QS) {if (typeof(QS[i])!=f && ++c==e) return QS[i];};Err(e1+”.Item(”+e+”)”);}else return QS[KM(e, QS)];}if (typeof(e)==(n)) Err(e1+”.Item(”+e+”)”);return un;}
this.QueryString.Item.toString=function() {return LS.toString()};this.QueryString.Key=function(e) {var t=typeof(e);if (t==n) {var e=Math.ceil(e);var c=0;for (var i in QS) {if (typeof(QS[i])==”object” && (++c==e)) {return i;}}}else if (t==r) {var e=KM(e, QS);var a=QS[e];return (typeof(a)!=un && a && a.toString() ? e:”");}else Err(e2+”.Key(”+(e?e:”")+”)”);Err(e1+”.Item(”+e+”)”);};this.QueryString.Key.toString=function() {Err(e2+”.Key”);};this.Version=1.1;this.Author=”Andrew Urquhart (www.andrewu.co.uk)”;}
var Request=new RObj(false);

//–>
</script>

O código acima é o ’sistema’ em si, porém você poderá colocá-lo em um arquivo separado, faça o seguinte: Crie um arquivo chamado nome.js e inclua nele o código acima retirando o <script language=”javascript”> no começo e o </script> no final. Depois é só você incluí-lo em suas páginas: <script language=”javascript” src=”http://www.meusitepessoal.com.br/nome.js”></script>

O código seguinte funcionará para redirecionar as páginas, caso não seja digitado nada, ele irá exibir o ‘conteúdo principal’ de seu site.

<script language=”javascript”>
<!–
var pagina=Request.QueryString(”pagina”);
if (pagina == “undefined”) {

document.write(’ Aqui vem o conteúdo da página principal ‘);

}
else {
// aqui irá funcionar o redirecionamento, ondem vc especifica o index.html?pagina=sites na url
// e redirecionará para sites.html
window.location=pagina+’.html’;
}
//–>
</script>
FONTE: CÓDIGO FONTE

Tags:

Categoria Dicas HTML - Tutorial XHTML

Posted by webmaster | HTML |

Objetivo
Este tutorial tem por objetivo descrever o que é, para que serve e porque adotar a linguagem de marcação XHTML, apresentando seus aspectos estruturais e semânticos, bem como ressaltando as vantagens do seu uso.

De onde veio XHTML ?
Todas as línguagens de marcação da web são baseadas em SGML, uma metalínguagem complexa e complicada projetada para máquinas com a finalidade de servir de base para criação de outras linguagens.
O SGML foi usado criar XML (Extensible Markup Language), também uma metalinguagem, porém bem mais simples.
Com XML você cria suas próprias tags e atributos para escrever seu documento web. Isto significa que é você quem cria sua linguagem de marcação. XHTML foi criado dentro deste conceito e por isso é uma aplicação XML. As tags e atributos do XHTML foram criadas (”inventadas”) aproveitando-se as nossas conhecidas tags e atributos do HTML 4.01 e suas regras.
Conclui-se que ao usar XHTML, estamos escrevendo um código XML, onde as tags e atributos já estão definidas e isto proporciona todos os benefícios de XML sem as complicações e complexidade do SGML.
XHTML é uma linguagem de marcação bastante familiar para quem conhece HTML e a transformação de um documento existentede HTML para XHTML é uma tarefa bem simples, como veremos adiante.

Qual a finalidade do XHTML ?
XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em português resulta em Linguagem de Marcação para Hipertexto Extensível (arghhh), uma aplicação XML, escrita para substituir o HTML e nada mais é do que um HTML “puro, claro e limpo”.

Vantagens de se usar XHTML
Enumeram-se várias e efetivas vantagens de se usar XHTML nos novos documentos web produzidos ou migrar os documentos atuais escritos em HTML.
E, dentre elas destaca-se em primeiro plano a compatibilidade da linguagem XHTML com as futuras aplicações de usuários, garantindo desde já que as criações XHTML conservar-se-ão estáveis por longos anos. A tendência é a de que futuras versões de brownsers e agentes de usuários em geral, deixem de suportar elementos e atributos já em desuso (”deprecated”) segundo as recomendações da W3C, bem assim como antigos e ultrapassados esquemas e esboços do HTML.
XHTML é a linguagem da web do futuro desde já a disposição de projetistas e desenvolvedores web.
XHTML é um código consistente que dispensa uso de “truques” e “hacks” para contornar “bugs”.
Editar um código XHTML existente é uma tarefa bem simples por se tratar de uma escrita limpa e evidente.
O tempo de carga de uma página XHTML é mais rápido pois os browsers tem a interpretar uma página limpa sem ter que interpretar e decidir sobre renderização de erros de código.
Uma página XHTML é mais acessível aos browsers e aplicações de usuário padrão incrementando a interopebilidade e a portabilidade dos documentos web.
Uma página XHTML é totalmente compatível com todas as aplicações de usuários para HTML, antigas e já ultrapassadas.

XHTML é uma “Web Standard”
XHTML 1.0 é uma recomendação da W3C e sua versão atual data de 26 de janeiro de 2000. Isto significa que trata-se de uma linguagem estável, oficialmente especificada pela W3C, tendo sido projetada e revisada pelos seus membros e é uma “Web Standard”.
NESTE LINK uma tradução para o português da Recomendação W3C de 26 de janeiro de 2000, revisada em 1 de agosto de 2002 - XHTML™ 1.0 The Extensible HyperText Markup Language (Segunda Edição)- Uma reformulação do HTML 4 em XML 1.0

As diferenças entre XHTML e HTML
As principais diferenças são:
todas as tags devem ser escritas em letras minúsculas;
os elementos (tags) devem estar convenientemente aninhados;
os documentos devem ser bem formados;
o uso de tags de fechamento é obrigatório;
elementos vazios devem ser fechados;
diferenças para os atributos.

Todas as tags devem ser escritas em letras minúsculas
A metalinguagem XML é case-sensitive (sensível ao tamanho da letra). De vez que XHTML é uma aplicação XML, também é case-sensitive.

Errado: <div> <P>Aqui um texto de parágrafo</P> </DIV>
Certo: div><p>Aqui um texto de parágrafo</p></div>

Os elementos (tags) devem estar convenientemente aninhados
Errado:
<div><em><p>Aqui um texto de parágrafo em negrito</div></em></p>
Certo:
<div><em><p>Aqui um texto de parágrafo em negrito</p></em></div>

Os documentos devem ser bem formados
Um documento diz-se bem formado quando está estruturado de acordo com as regras definidas nas Recomendações para XHTML 1.0 [ XML ].
Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz <html>.
A estrutura básica do documento deve ser conforme abaixo:

<html>
<head>

</head>
<body>

</body>
</html>
O uso de tags de fechamento é obrigatório
Em HTML é permitido para determinados elementos, omitir-se a tag de fechamento. XML não permite omissão de qualquer tag de fechamento.
Todos os elementos, excetuados aqueles vazios declarados nas DTD, tem que ter tag de fechamento. Os elementos vazios declarados nas DTD podem ter tag de fechamento ou usar uma abreviação para elemento vazio conforme veremos adiante.
Errado:
<p>Este é um parágrafo.<p>Este é outro parágrafo.
Certo:
<p>Este é um parágrafo.</p><p>Este é outro parágrafo.</p>

Elementos vazios devem ser fechados
Elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar com />.
Exemplo:
<br />
<hr></hr>.

Elementos vazios sem terminação
Errado:
<hr>
<img src=”imagem.gif” alt=”minha imagem “>
Certo:

<hr />
<img src=”imagem.gif” alt=”minhaimagem ” />

Diferenças para os atributos
Nomes de atributos
Assim como as tags, os atributos também são case-sensitive então deve-se escrever nomes de atributos em minúsculas;

Errado:
<td ROWSPAN=”3″>
Certo:
<td rowspan=”3″>

Valores de atributos
Os valores de atributos devem estar entre “aspas”;

Errado:
<td rowspan=3>
Certo:
<td rowspan=”3″>

Sintaxe dos atributos
A sintaxe para atributos deve ser escrita por completo;

Errado:
<input checked />
Certo:
<input checked=”checked” />

Abaixo uma lista dos atributos que se enquadram nesta recomendação

compact compact=”compact”
checked checked=”checked”
declare declare=”declare”
readonly readonly=”readonly”
disabled disabled=”disabled”
selected selected=”selected”
defer defer=”defer”
ismap ismap=”ismap”
nohref nohref=”nohref”
noshade noshade=”noshade”
nowrap nowrap=”nowrap”
multiple multiple=”multiple”
noresize noresize=”noresize”

Os atributos id e name;

O HTML 4 define o atributo name para os elementos a, applet, form, frame, iframe, img, e map. HTML 4 também introduziu o atribute id. Ambos estes atributos foram projetados para serem usados como identificadores.
Em XML, os identificadores são do tipo ID, e poderá existir somente um atributo do tipo ID por elemento. Assim, em XHTML 1.0 o atributo id é definido como do tipo ID. Com o objetivo de certificar-se que os documentos XHTML 1.0 são documentos XML bem estruturados, DEVEM usar o atributo id ao definir identificadores para os elementos listados acima.
Notar que em XHTML 1.0, o atributo name destes elementos está formalmente em desuso e será excluido nas versões futuras de XHTML.

Errado: <img src=”imagem.gif” name=”minha_imagem” />
Certo: <img src=”imagem.gif” id=”minha_imagem” />

Nota: Por razões de compatibilidade com brownsers antigos você pode usar ambos os atributos como abaixo:
<img src=”imagem.gif” id=”minha_imagem” name=”minha_imagem” />

O atributo lang;
Use o atributo lang para definir a lingua em que foi escrito o documento e o atributo xml:lang para definir a língua em que foi escrita a versão do XML.

Pontos de âncoras
Em HTML para criar um ponto de âncora, associamos um nome ao elemento <a> :

<p><a name=”topo” >Início</a > do parágrafo..bla…</p>

Em XHTML adicione o atributo id:

<p><a id=”topo” name=”topo” >Início</a> do parágrafo..bla…</p>

O atributo alt para imagens

Em XHTML o uso do atributo alt para imagens é obrigatório

<img src=”imagem.gif” alt =”minha_imagem ” />
Se tratar-se de uma imagem decorativa pode-se usar o atributo alt vazio:

<img src=”imagem.gif” alt =” ” />

Separadores de comentários
Não use a clássica sequência ——, como separador para comentários. Use por exemplo a sequência ====.

Errado:
<!– Aqui — começa o menu –>
<!– ——————————————– –>
código XHTML do menu
Certo:
<!– Aqui === começa o menu –>
<!– ========================== –>
código XHTML do menu
Códigos gerados por editores
Cuidado com os códigos gerados por editores!
Este é um código gerado por editor: onMouseOver=function() não válido em XHTML

Errado:
onMouseOver=function()
Certo:
onmouseover=function()

Caracter & (ampersand)

Codifique o & ( e comercial)

Errado:
Comércio & Exportação

Certo:
Comércio código ISO do &comercial Exportação

Elementos obrigatórios em um documento XHTML
É obrigatório a declaração do DOCTYPE assim como a existências dos elementos <html> <head> <title> e <body>
Um modelo mínimo de documento XHTML é conforme abaixo:

<!DOCTYPE bla..bla..bla>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>Título do odcumento</title>
</head>
<body>
Conteúdo do documento</body>
</html>
A declaração DOCTYPE não faz parte da marcação XHTML e como tal não é também um elemento, razão pela qual não há necessidade de tag de fechamento.

Para que serve o DOCTYPE ?
A Definição do tipo de documento (Document Type Definitions DTD) especifica qual é a sintaxe SGML usada no documento. A DTD é usada pelas aplicações SGML ( tais como HTML ) para especificar as regras que se aplicam a linguagem de marcação usada no documento e também definir o conjunto de elementose entidades válidas naquela linguagem. Assim uma DTD para um documento XHTML descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.
O DOCTYPE deve ser sempre a primeira declaração
em um documento web.

Os tipos de DOCTYPE
São três os tipos de DOCTYPE para XHTML:
STRICT
TRANSITIONAL
FRAMESET

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
Esta é a mais rígida das declarações. Os documentos
XHTML no modo Strict não admitem qualquer item de formatação dentro dos elementos e nem elementos em desuso “deprecated” segundo as recomendações da W3C. São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso (”deprecated”), regras de apresentação embutidas em tags e também para documentos destinados a exibição em brownsers sem suporte para CSS. Não admite qualquer tipo de marcação para frames.

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
Esta declaração permite tudo da declaração transational e mais os elementos especificos para frames.

Validação do documento XHTML
W3C disponibiliza um validador gratuito para documentos XHTML. Ali, você digita a URL ou o caminho para o arquivo no seu HD e um robo analisa o documento fornecendo um relatório completo e detalhado das não conformidades por ventura existentes. É uma ferramenta excelente para você usar durante a elaboração ou migração do seu documento para XHTML. Serve como um verdadeiro revisor do código que você cria.
FONTE: CÓDIGO FONTE

Tags:

Categoria Dicas HTML - Superscript e Subscript

Posted by webmaster | HTML |

Superscript e Subscript: são úteis para inserir equações matemáticas.

O comando subscript <sub> coloca o algarismo ou a letra para baixo.

O superscript <sup> coloca o algarismo ou a letra para cima.

Veja os seguintes exemplo:

4<sub>5>/sub> resultará 45

5<sup>4</sup> resultará 54
FONTE: CÓDIGO FONTE

Tags:
Page 4 of 11Primeiro...«23456»...Último