1. O primeiro passo para melhorar
Adicione o DOCTYPE correto à página
DOCTYPE é a abreviatura de tipo de documento. Usado principalmente para indicar qual versão de XHTML ou HTML é usada. O navegador interpreta o código da página de acordo com o DTD (Document Type Definition) definido por DOCTYPE.
(1) Transicional (Transicional)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Estrito
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Tipo de quadro (conjunto de quadros)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Definir um namespace (Namespace)
Adicione o seguinte código diretamente após a declaração DOCTYPE:
<html XMLns="http://www.w3.org/1999/xhtml" >
Um namespace é um DTD detalhado que coleta tipos de elementos e nomes de atributos. A declaração de namespace permite identificar seu namespace por meio de um ponteiro de endereço online. Basta inserir o código normalmente.
Declare sua linguagem de codificação
Para serem corretamente interpretados pelos navegadores e passarem na validação de marcação, todos os documentos XHTML devem declarar a linguagem de codificação que utilizam. O código é o seguinte:
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
A linguagem de codificação declarada aqui é Chinês Simplificado GB2312. Se precisar produzir conteúdo em Chinês Tradicional, você pode defini-la como BIG5.
Escreva todos os rótulos em letras minúsculas
XML diferencia maiúsculas de minúsculas, então XHTML também diferencia maiúsculas de minúsculas. Todos os nomes de elementos e atributos XHTML devem estar em letras minúsculas. Caso contrário o seu documento será considerado inválido pela validação do W3C. Por exemplo, o código a seguir está incorreto:
<TITLE>Perfil da empresa</TITLE>
A maneira correta de escrever é:
<title>Perfil da Empresa</title> Da mesma forma, altere <P> para <p>, <B> para <b>, etc. Esta etapa de conversão é simples.
Adicionar atributo alt à imagem
Adicione o atributo alt a todas as imagens. O atributo alt especifica que o texto de substituição é exibido quando a imagem não pode ser exibida. Isso é dispensável para usuários normais, mas é crucial para navegadores somente de texto e usuários que usam leitores de tela. Somente quando o atributo alt for adicionado o código passará na verificação de correção do W3C. Observe que precisamos adicionar atributos alt significativos, escrever assim não tem sentido:
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
Maneira correta de escrever:
<img src="logo_unc_120x30.gif" alt="Logotipo da empresa UNC, clique para retornar à página inicial">
Citar todos os valores de atributos
Em HTML, você não precisa citar valores de atributos, mas em XHTML, eles devem estar entre aspas.
Exemplo: altura="100", não altura=100.
Feche todas as guias
Em XHTML, toda tag aberta deve ser fechada. Assim:
<p>Toda aba aberta deve ser fechada. </p> <b>HTML pode aceitar tags não fechadas, mas XHTML não. </b>
Esta regra pode evitar confusão e problemas com HTML. Por exemplo: se você não fechar a tag da imagem, poderá ter problemas de exibição de CSS em alguns navegadores. Use este método para garantir que a página apareça conforme você a projetou. Deve-se observar que tags vazias também devem ser fechadas. Use uma barra "/" no final da tag para se fecharem. Por exemplo:
<br /> <img src="webstandards.gif" />
Após ser processada pelas sete regras acima, a página atende basicamente aos requisitos do XHTML1.0. Mas ainda precisamos verificar se realmente atende aos padrões. Podemos usar o W3C para fornecer serviços de validação gratuitos (http://validator.w3.org/). Corrija os erros um por um depois de descobri-los.
2. A segunda etapa da melhoria
Nossa próxima melhoria está principalmente na separação entre estrutura e desempenho. Esta etapa não é tão fácil de alcançar quanto a primeira etapa. Precisamos de uma mudança de conceito, bem como do aprendizado e aplicação da tecnologia CSS2. Mas aprender algo novo leva tempo, certo? O truque é aprender fazendo. Se você sempre usou layout de tabela e nunca usou CSS, não há necessidade de pressa para dizer adeus ao layout de tabela. Você pode primeiro substituir a tag de fonte por uma folha de estilo. À medida que você aprende mais, você pode fazer mais. Ok, vamos dar uma olhada no que precisamos fazer:
Defina a aparência dos elementos com CSS
Desenvolvemos um hábito ao escrever logotipos. Quando queremos que a fonte seja maior, usamos <h1>, e quando queremos adicionar um símbolo de ponto na frente, usamos <li>. Sempre pensamos em <h1> como grande, <li> como pontos e <b> como "texto em negrito". Na verdade, <h1> pode se tornar o que você quiser através do CSS, <h1> pode se tornar uma fonte pequena, <p> o texto pode se tornar enorme e em negrito e <li> pode se tornar uma imagem e assim por diante. Não podemos forçar a apresentação de elementos estruturais, devemos usar CSS para determinar a aparência desses elementos. Por exemplo, podemos fazer com que os títulos padrão originais de nível 6 tenham o mesmo tamanho:
h1, h2, h3, h4, h5, h6{ família de fontes: 宋体, tamanho da fonte: 12px;
Substitua lixo sem sentido por elementos estruturados
Muitas pessoas talvez nunca tenham sabido que os elementos HTML e XHTML foram projetados para expressar estrutura. Muitos de nós nos acostumamos a usar elementos para controlar a apresentação, em vez da estrutura. Por exemplo, uma lista pode ser marcada assim:
Frase 1<br /> Frase 2<br /> Frase 3<br />
Seria melhor se usássemos uma lista não ordenada:
<ul> <li>Frase 1</li> <li>Frase 2</li> <li>Frase 3</li> </ul>
Você pode dizer: "Mas <li> exibe um ponto e não quero usar um ponto." Na verdade, CSS não especifica a aparência de um elemento. Você pode desativar os pontos usando CSS.
Adicione id a cada tabela e formulário
Forneça uma tabela ou forme uma marcação estrutural exclusiva, por ex.
<table id="menu">
A seguir, ao escrever a folha de estilo, você pode criar um seletor de “menu” e associá-lo a uma regra CSS que informa às células da tabela, rótulos de texto e todos os outros elementos como exibir. Dessa forma, não há necessidade de anexar alguns atributos da camada de apresentação redundantes e que consomem largura de banda, como altura, largura, alinhamento e cor de fundo a cada tag <td>. Com apenas uma tag anexada (o "menu" de marcação de tag de identificação), você pode executar o processamento de apresentação ad-hoc para marcação de código limpa e compacta em uma folha de estilo separada.
Para melhorias intermediárias, listaremos aqui primeiro os três pontos principais, mas contém muito conteúdo e pontos de conhecimento, que precisamos aprender e dominar passo a passo até finalmente conseguirmos o layout usando CSS completamente sem usar nenhuma tabela.