Blog do Shark

Internet sob o ponto de vista do tubarão.

 16 Feb 2009 @ 9:20 PM 
 

XHTML e CSS

 

XHTML

O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML. Combina as tags de marcação HTML com regras da XML; este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc). A intenção é melhorar a acessibilidade.

O XHTML consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas. O HTML não consegue esta implementação. No entanto, não existem muitas diferenças entre o HTML e o XHTML. Para verificar se uma página XHTML está bem construída, o melhor método é validar o código através de uma aplicação Web disponibilizada pela organização W3C.

Resumidamente

XHTML deverá ser o sucessor do HTML. Assim, muitos consideram que XHTML é a atual ou mais nova versão do HTML (veja o link “Latest version of HTML” em [1]). Porém, XHTML é uma recomendação separada; a W3C continua a recomendar o uso de XHTML 1.1, XHTML 1.0, e HTML 4.01 para publicação na web, e HTML 5 está atualmente sendo desenvolvido.

 

CSS

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.

 

Exemplos

Um exemplo simples de XHTML seria: (Observando dentro das tags <html></html>)

exemplo1.html

<html>
<head>
<link rel="stylesheet" href="exemplo1.css" type="text/css" />
</head>
<body>
     <form>
      <fieldset>
      <legend>Dados pra Cadastro</legend>
      <label for="nome">Nome:</label>
      <input type="text" name="nome" id="nome" />
      <label for="tipo">Tipo:</label>
      <input type="text" name="tipo" id="tipo" />
 	   <label for="data">Data:</label>
      <input type="text" name="data" id="data" />
  	   <input type="submit" value="enviar" class="botao" />
      </fieldset>
    </form>
</body>
</html>

o código CSS que formataria este xhtml seria:
exemplo1.css

<style>
form fieldset
{
   float: left;
   margin-right: 7px;
   width: 40%;
   border: solid black 1px;
   padding: 3%;
   margin-bottom: 10px;
}
form legend
{
   padding: 6px;
   margin: 10px;
   border: solid black 1px;
   font-size: 90%;
   font-weight: bold;
   background-color: #e8e8e8;
}
form label
{
   display: block;
   font-size: 11px;
}
form input
{
   width: 100%;
   border: solid #ccc 1px;
   font-size: 11px;
   font-family: 'Trebuchet MS', Verdana, Tahoma, Serif;
}
form input.botao
{
   display: block;
   width: auto;
   float: right;
}
form input.botao
{
   display: block;
   width: auto;
   float: right;
}
</style>

Popularity: 2% [?]

Posts relacionados

Tags Tags: ,
Categories: Desenvolvimento Web, Sistemas de Informação
Posted By: Fabiano Shark
Last Edit: 18 Feb 2009 @ 08 18 AM

EmailPermalink 2,535 Views
\/ More Options ...
Change Theme...
  • Users » 1
  • Posts/Pages » 600
  • Comments » 2,320
Change Theme...
  • VoidVoid « Default
  • LifeLife
  • EarthEarth
  • WindWind
  • WaterWater
  • FireFire
  • LightLight