Arquivos da categoria: HTML/XHTML

CSS3: font-face

css31Um problema comum no desenvolvimento de um site é a tipografia (tipo da fonte). É normal o uso de fontes comuns (Arial, tahoma, verdana, etc), que existem nos sistemas operacionais dos diversos dispositivos capazes de executar um website.


font-family: Arial, Verdana, Sans-Serif;

Caso a fonte não exista, o navegador tenta assumir uma próxima fonte que foi definida no CSS (font-family). E se também não encontrar, o navegador vai assumir sua fonte padrão, o que pode “estragar” toda aparência do site.

Com CSS3 conseguimos forçar o navegador a baixar uma fonte caso ela não exista no sistema operacional do dispositivo. Isso pode ser implementado com o uso da diretiva @font-face, e é suportada somente nos navegador mais modernos (IE 9, Firefox, Opera, Chrome e Safari). A fonte deve estar disponível em algum servidor, que pode ser o do próprio site.

A especificação do W3C (http://www.w3.org/TR/css3-fonts/) relaciona os seguintes formatos de fontes suportados pelo font-face:

String Font Format Common extensions
“woff” WOFF (Web Open Font Format) .woff
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

O diretiva @font-face deve estar dentro do arquivo CSS do site:


@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans Light'),
       local('OpenSans-Light'),
       url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

body { font-family: 'Open Sans', Arial, Verdana, Sans-Serif; }
}

Na diretiva @font-face as propriedades especificão:

  • font-family: o nome a a ser usado na regra font-family dos elementos HTML (no exemplo foi aplicado ao body).
  • src: a origem da fonte, sendo que primeiro será procurada localmente (local(‘..’)) no sistema operacional uma fonte com o nome ‘Open Sans Light’, se não encontrar vai procurar ainda localmente (local(‘..’)) um fonte como o nome ‘OpenSans-Light’, e caso não entre localmente, baixará a fonte no servidor informado em url(…). No exemplo acima a fonte está disponível no servidor do Google, mas poderia estar no próprio servidor do site.

Antes de fazer o font-face, é  necessário verificar a licença da fonte para não ter problemas de uso indevido.

Mais detalhes em:

Até mais.

Drag and drop (Dnd) com HTML5

hrml5draganddropUm recurso bacana que é visto em alguns site é o recurso de selecionar um item e arrastá-lo para outra área na mesma página. Este recurso é chamado de Drag and drop, e no HTML5 ele é nativo, dispensando o uso de bibliotecas de terceiros.
Para iniciar, precisamos definir um elemento HTML como “de origem” que será o elemento arrastável, e um elemento de destino, que receberá o elemento de origem.
O elemento HTML que deseja ser arrastável deve manter a propriedade draggable habilitada (true).
Por exemplo, desejo que cada item da lista abaixo seja arrastável:
<ul id="ulOpcoes">
    <li draggable="true">Opção 1</li>
    <li draggable="true">Opção 2</li>
    <li draggable="true">Opção 3</li>
    <li draggable="true">Opção 4</li>
    <li draggable="true">Opção 5</li>
    <li draggable="true">Opção 6</li>
</ul>
Um elemento arrastável (draggable=true) tem os seguintes eventos:
  • dragstart: O elemento começou a ser arrastado. A função que vai tratar o evento recebe um parâmetro, que há uma referência ao elemento sendo arrastado.
  • drag: O objeto está sendo arrastado.
  • dragend: A ação de arrastar terminou.

Esses eventos devem ser associados a uma função para tratá-los.

</span></div>
<ul id="ulOpcoes">
    <li draggable="true" ondragstart="onDragStart(event)">Opção 1</li>
    <li draggable="true" ondragstart="onDragStart(event)">Opção 2</li>
    ...

Usando Javascript, podemos associar os eventos a cada LI, sem a necessidade de fazer manualmente como acima.

window.onload = function () {

    //Após a carga completa da página, cada LI é associado à função onDragStart.
    var lis = document.querySelectorAll("#ulOpcoes > li");
    for (var i = 0; i < lis.length; i++) {

        lis[i].addEventListener("dragstart", function (event) { onDragStart(event) });
    }
}

function onDragStart(event) {

    event.dataTransfer.setData("Text", event.target.innerHTML);
}

A função que vai tratar o evento ondragstart recebe um parâmetro, que há uma referência ao elemento sendo arrastado através da propriedade target. E a propriedade dataTransfer, com o uso do método setData, oferece meios de armazenar dados a serem transmitidos ao destino. O primeiro parâmetro da função setData é o tipo mime da informação a ser armazenada (no exemplo, Text) e o segundo parâmetro é a informação (no exemplo, guardei o texto contido dentro do LI). Posteriormente será o usado o tipo mime para recuperar a informação.

Com a origem totalmente programa, agora é hora de pensar no destino. O elemento de destino não precisa de nenhuma propriedade específica, como o de origem. Mas precisa de eventos e funções que saibam como receber o que foi arrastado até ele.

O elemento de destino tem os seguintes eventos:
  • dragenter: O objeto sendo arrastado entrou no objeto de destino.
  • dragleave: O objeto sendo arrastado deixou o objeto de destino.
  • dragover: O objeto sendo arrastado se move sobre o objeto de destino.
  • drop: O objeto sendo arrastado foi solto sobre o objeto de destino.

Neste exemplo, o elemento de destino será outra lista, que deverá receber o texto do item da lista de origem que foi arrastado até ela.

<ul id="ulOpcoesSelecionadas" ondragover="onDragOver(event)" ondrop="onDrop(event)">
</ul>

O evento ondrop será o responsável por tratar e receber o item arrastável. A função associada ao evento recebe por parâmetro informações sobre o destino, e também a informação guardada na propriedade dataTransfer armazenada anteriormente sob o tipo mime. O método getData precisa do tipo mime armazenado para poder recuperar a informação (como no exemplo a seguir, Text).

function onDrop(event) {
    var li = document.createElement("li")
    li.innerHTML = event.dataTransfer.getData("Text");
    document.getElementById('ulOpcoesSelecionadas').appendChild(li);
}

E por fim, para que tudo funcione corretamente, é necessário mudar o comportamento padrão do navegador. Por padrão, dados/elementos não podem ser soltos em outros elementos. Para permitir um “drop”, devemos mudar o tratamento padrão do elemento de destino.

E isso é feito na função que trata o evento ondragover do elemento de destino, que é disparada quando o objeto sendo arrastado se move sobre o objeto de destino.

function onDragOver(event)
{
    event.preventDefault();
}

O evento envia a função informações sobre o destino, e o método preventDefault() do parâmetro cancela o comportamento padrão do navegador, e assim permitindo o drop.

O exemplo completo e com exemplos de uso de todos os eventos pode ser baixado aqui.

E é isso….

 

Até mais.

Usando a API WebStorage da Open Web Plataform (HTML5 e seus amigos)

HTML5_Logo_512Em HTML5 é possível armazenar dados no lado do cliente no formato pares de valor de chave, de forma simular como é feito com as Cookies, só que mais fácil. Normalmente é a linguagem de servidor quem cria e envia as Cookies ao cliente.
Com a API de Storage tudo é manipulado diretamente no cliente por Javascript, não há interferência do servidor.
A API WebStorage disponibiliza duas formas para armazenamento no cliente: SessionStorage e LocalStorage.

sessionStorage
: armazenamento de dados independente (não compartilhado entre janelas/guias). Os dados são excluídos quando o usuário fecha a janela/guiado navegador.

localStorage: armazenamento de dados compartilhado entre janelas (comportamento semelhante ao do cookie). Mesmo fechando o navegador, os dados ficam armazenados e somente serão apagados se o cache for limpo ou se solicitada sua exclusão via programação JS.

Vamos aos exemplos.
A ideia aqui é armazenar o que o usuário informou no formulário HTML abaixo usando as duas maneiras apresentadas acima, e depois recuperar a informação.
<textarea id="texto" rows="5" cols="5"></textarea>
<br />
<input type="button" value="Salvar no cliente" onclick="salvar()"/>
<input type="button" value="Recuperar no cliente" onclick="recuperar()"/>

O evento onclick do primeiro input button vai disparar a função salvar(), que tem por objetivo salvar os dados no cliente usando o método setItem da propriedade localStorage. Vamos ao código.

    function salvar() {
        localStorage.setItem('teste', texto.value);
    }

E evento onclick do segundo input button vai disparar a função recuperar(), que vai acessar o valor salvo através do método getItem da propriedade localStorage e devolvê-lo para seu respectivo input.

    function recuperar() {
        document.getElementByI('texto').value = localStorage.getItem('teste');
    }

Usando a Ferramenta de Desenvolvedores do Google Chrome é possível inspecionar o que está armazenado localmente.

localstorage

A nível de programação, para usar a SessionStorage não muda quase nada. Ao invés de usar a propriedade localStorage, deve usar sessionStorage. E os métodos setItem e getItem continuam com o mesmo objetivo, adicionar e remover valores.

Quando usado Cookie, ela é trafegada sempre entre cliente e servidor pelo protocolo HTTP. Isso não ocorre com esta API, a informação é exclusivamente mantida no cliente, e nunca “sobe” para o servidor.

Outros dois métodos importantes disponibilizados são o removeItem, e clear. O primeiro remove o item de nome informado no parâmetro e o segundo, limpa todos os itens do domínio. Ambos funcionam tanto no localStorage como no sessionStorage.

Usando a API de Geolocalização da Open Web Plataform (HTML5 e seus amigos)

HTML5_Logo_512A API Geolocation da Open Web Plataform  permite via Javascript solicitar ao navegador a localização real do usuário. As informações de localização podem ser usadas para exibir mapas, direções e outras informações relevantes a posição global do usuário.

Os navegadores que suportam a API definem a propriedade navigator.geolocation que oferece três métodos:

  1. navigator.geolocation.getCurrentPosition(): solicita a posição atual do usuário.
  2. navigator.geolocation.watchPosition(): solicita a posição atual do usuário e continua a monitorar.
  3. navigator.geolocation.clearWatch(): para de monitorar a posição do usuário.

Abaixo demonstro um pequeno exemplo de como recuperar a geolocalização do usuário e mostrar um mapa no Google e no Bing Maps com a respectiva localização do usuário.


//Usando do método getCurrentPosition para recuperar a localização atual do usuário.
navigator.geolocation.getCurrentPosition(function (posicao) { localizacao(posicao) },
            function (erro) { mostraErro(erro) });

//Função de Callback do sucesso do método getCurrentPosition
function localizacao(posicao) {
    alert('Lat: ' + posicao.coords.latitude + ' ' + 'Lon: ' + posicao.coords.longitude);

    //Abrindo o mapa no bing maps
    window.open("http://www.bing.com/maps/?v=2&where1=" + posicao.coords.latitude + "," +
posicao.coords.longitude + "&encType=1","");

    //Abrindo o mapa no google maps
    window.open("http://maps.googleapis.com/maps/api/staticmap?center=" +
posicao.coords.latitude + "," + posicao.coords.longitude +
"&zoom=14&size=400x300&sensor=false");
}

//Função de Callback para falhas método getCurrentPosition
function mostraErro(erro)
{
    switch (erro.code) {
        case erro.PERMISSION_DENIED:
            alert("user did not share geolocation data");
            break;
        case erro.POSITION_UNAVAILABLE:
            alert("could not detect current position");
            break;
        case erro.TIMEOUT:
            alert("retrieving position timed out");
            break;
        default:
            alert("unknown error");
            break;
    }
}

Infelizmente não é exato pois, pois a API usa informações dos provedores de internet a qual o usuário está conectado.

E é isso. As possibilidades são várias.

Layout responsive (responsivo)

Olá pessoal.

Estou aproveitando as férias para aprender algumas coisas novas. Bom, com essa moda de smartphones e tablets tem se falado muito em layout responsive ou responsivo. Então vou compartilhar com vocês alguma coisa que aprendi sobre o assunto.

Um site com layout responsivo é um site preparado para qualquer tipo de tela, ou seja, é um site que tem seu layout preparado para “ficar bem” em qualquer dispositivo: computador, televisão, tablet, smartphone, geladeira, torradeira, etc… É possível fazer um layout responsivo com apenas códigos HTML e CSS.

O primeiro conceito importante a entender é o tal do VIEWPORT. Viewport é o nome dado à área disponível para o conteúdo do site, portanto é a área disponível no visor do dispositivo para visualização do site. Quando um site é aberto num smartphone por exemplo, o navegador diminui o zoom para permitir a visualização dentro do viewport, desta forma o site fica miniaturizado com o objetivo de mostrar todo seu conteúdo como se estive num navegador para computador tradicional.

Como navegadores para dispositivos móveis usam o visor (fonte: http://msdn.microsoft.com/pt-br/magazine/jj133814.aspx)

Este site http://msdn.microsoft.com/pt-br/magazine/jj133814.aspx, trás de forma simples algumas explicações sobre VIEWPORT e tamanho de telas. Vale apena conferir.

Uma página preparada para dispositivos com telas de tamanhos diferentes deve possuir  a META tag viewport no seu head:

<meta name="viewport" content="width=device-width" />

A propriedade width desta meta tag com o valor device-width, diz ao navegador para não renderizar a página de forma miniaturizada e assim  assumir a largura da mídia. No caso de uma mídia digital é o tamanho da tela. No caso de impressão é o tamanho da folha.

Figura 1: Página sem layout responsivo e visualizada num smartphone.

Figura 2: Página sem layout responsivo e com a meta tag viewreport.

Observe que na figura 1 o site ficou miniaturizado, comportamento padrão nos navegadores mobile. Enquanto na figura 2, a página possui a meta tag viewport e o navegador renderizou sem o efeito miniaturizado. Neste último caso temos o problema da barra de rolagem na horizontal, portanto ainda não é um layout adequado para um dispositivo mobile.

Agora é a vez de desenvolver o CSS do layout e suas customizações para outros tamanhos de tela com o uso de Media Queries.

Media Queries é um recurso disponível na CSS 3, é uma evolução dos Media Types da CSS 2, e fornece maneiras de verificar qual o dispositivo, como também verificar a largura e altura no navegador, orientação, resolução, etc. Bacana né?

Vamos a um exemplo simples.

HTML estrutural do site:

<div id="corpo">
<div id="barra-esquerda">parte 1</div>
<div id="conteudo">parte 2 parte 2 parte 2 parte 2 parte 2.</div>
<div id="barra-direita">parte 3</div>
</div>

CSS preparado para alguns tipos de dispositivos.

/* CSS padrão - preparado para telas com 1024 de largura ou mais */
* {margin: 0; padding: 0;}
body {font-size: 12px;}
#corpo {width: 960px; margin: 0 auto; }
#barra-esquerda {width: 20%; min-height: 100px; background-color: Aqua; float: left; }
#conteudo {width: 60%; min-height: 100px; background-color: Yellow; float: left; }
#barra-direita {width: 20%; min-height: 100px; background-color: Aqua; float: left;}

/*Media Querie 1: Para adequação do layout em telas menores que 900px de largura */
@media screen and (max-width: 900px)
{
    #corpo {width: 100%; }
    #barra-esquerda, #conteudo, #barra-direita {width: 100%; float: none; margin: 0; }
}

/*Media Querie 2: Para adequação do layout em telas menores que 400px de largura */
@media screen and (max-width: 400px)
{
    #barra-esquerda {display: none; } /*Escondendo a barra lateral da esquerda*/
}

No código CSS acima observe o uso da medida em percentual (%)  para os blocos (div) do layout, além das medias queries:  a media querie 1 é ativada quando a página é aberta em dispositivo com largura de tela até 900px, e a segunda quando o dispositivo tem largura de tela até 400px. As duas media queries implementam customizações no CSS padrão para os dispositivos de telas menores. Em outras situações, o navegador assume o CSS padrão sem as customizações. A ideia central aqui é ter um CSS padrão e customizar para outros dispositivos, desta forma não sendo necessário ter sites diferentes.

Vejamos o resultado final.

Layout responsivo num navegador para smartphone.

O mesmo layout responsivo num navegador para desktop.

O resultado é que temos praticamente o mesmo layout em dispositivos diferentes. É um exemplo simples, mas é um bom começo para começar a pensar no desenvolvimento sites para diversos dispositivos.

Baixe aqui o exemplo completo.

Uma simples comparação entre um layout em XHTML 1 e HTML 5

Olá pessoal.

O HTML 5 trouxe novas tags para deixar nosso código semanticamente mais organizado. Ao invés de usar a tag DIV para demarcar as diversas áreas da página, agora temos tags específicas para isso: section, header, footer, article, aside, nav…e outras.

Vejamos uma comparação entre um layout feito em XHTML 1 e outro feito em HTML 5.

Em XHTML 1:


&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;title&gt;Layout em XHTML 1&lt;/title&gt;
    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        body {margin: 0px;}
        #divCorpo {margin: 0 auto; width: 975px;}
        #divTopo {width: 100%; height: 150px; background-color: Orange; }
        #divMenu1 { width: 100%; height: 50px; background-color: Aqua;}
        #divMenu2 {width: 150px; min-height: 350px; background-color: Aqua; float: left;}
        #divConteudo {width: 825px; min-height: 350px; background-color: Yellow; float: left; }
        #divRodape {width: 100%; height: 50px; background-color: Gray; clear: both;}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;divCorpo&quot;&gt;
        &lt;div id=&quot;divTopo&quot;&gt;
            Topo (div)
        &lt;/div&gt;
        &lt;div id=&quot;divMenu1&quot;&gt;
            Menu 1 (div)
        &lt;/div&gt;
        &lt;div id=&quot;divMenu2&quot;&gt;
            Menu 2 (div)
        &lt;/div&gt;
        &lt;div id=&quot;divConteudo&quot;&gt;
        (div)
            &lt;h1&gt;
                Título do conteúdo (h1)....&lt;/h1&gt;

             Conteúdo (div)
        &lt;/div&gt;
        &lt;div id=&quot;divRodape&quot;&gt;
            Rodapé (div)
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Em HTML 5:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;pt-br&quot;&gt;
&lt;head&gt;
    &lt;title&gt;Layout em HTML 5&lt;/title&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        body {margin: 0px;}
        #divCorpo {margin: 0 auto; width: 975px;}
        #headerTopo {width: 100%; height: 150px; background-color: Orange; }
        #navMenu1 {width: 100%; height: 50px; background-color: Aqua; }
        #navMenu2 {width: 150px; min-height: 380px; background-color: Aqua; float: left;}
        #sectionConteudo {width: 825px; min-height: 350px; background-color: Yellow; float: left; }
        #footerRodape {width: 100%; height: 50px; background-color: Gray; clear: both;}
        #headerConteudo{ border: 1px solid orange; min-height: 60px; }
        #articleConteudo {border: 1px solid orange; min-height: 200px;}
        #footerConteudo {border: 1px solid orange; height:50px;}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;divCorpo&quot;&gt;
        &lt;header id=&quot;headerTopo&quot;&gt;
        Topo (header)
        &lt;/header&gt;
        &lt;nav id=&quot;navMenu1&quot;&gt;
         Menu 1 (nav)
        &lt;/nav&gt;
        &lt;nav id=&quot;navMenu2&quot;&gt;
        Menu 2 (nav)
        &lt;/nav&gt;
        &lt;section id=&quot;sectionConteudo&quot;&gt;
        (section)
            &lt;header id=&quot;headerConteudo&quot;&gt;
                (header)
                &lt;h1&gt;
                    Título do conteúdo(h1)....&lt;/h1&gt;
            &lt;/header&gt;
             &lt;article id=&quot;articleConteudo&quot;&gt;
                 Conteúdo (article)
             &lt;/article&gt;

             &lt;footer id=&quot;footerConteudo&quot;&gt;
                Rodapé do conteúdo (footer)
             &lt;/footer&gt;

        &lt;/section&gt;
        &lt;footer id=&quot;footerRodape&quot;&gt;
        Rodapé (footer)
        &lt;/footer&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html

Notem que o CSS que organiza a disposição das DIVS para a versão XHTML 1.0 é praticamente o mesmo para organizar as novas tags do HTML 5. O que muda mesmo é o uso das novas tags que deixa o código semanticamente mais organizado, fica mais fácil identificar o que determinada área no código representa na estrutura da página.

Abração….

Habilitando suporte para HTML 5 no VisualStudio 2010

Para habilitar suporte para HTML 5 no VisualStudio 2010 é necessário instalar o Service Pack 1, disponível em

http://www.microsoft.com/download/en/details.aspx?id=23691.

Após sua instalação, abra o Visual Studio e no menu TOOLS > OPTIONS, e selecione grupo HTML Editor selecionando o item VALIDATION, marcando o TARGET como HTML5.

Ao criar um novo arquivo o intelisense mostra as novas tags do HTML 5.

Enquanto ainda não decoramos as novas implementações do HTML 5, é possível facilmente fazer sua validação por meio da barra HTML Sourcing Editing de validação do VS.

Agora é só brincar.

Nomes de cores suportados por todos os navegadores

O W3Schools em seu site disponibiliza a relação de cores suportadas por todos os navegadores, juntamente com seus valores hexadecimais.

Disponível em http://www.w3schools.com/tags/ref_colornames.asp.

Para customizar cores e descobrir seu respectivo valor hexadecimal é possível usar o ColorPick do W3Schools (http://www.w3schools.com/tags/ref_colorpicker.asp).

Bom uso!!!

Elementos HTML/XHTML x DTDs

O site do W3Schools disponibilida uma tabela com os elementos HTML/XHTML suportados pelos atuais Doctype (DTD) existentes. Importante para construir documentos HTML/XHTML dentro dos padrões adotados.

Confira a tabela em: http://www.w3schools.com/tags/ref_html_dtd.asp

Trabalhando com Imagens, Links Tabelas e Listas

Imagens

As imagens dentro de um documento XHTML são exibidas com o uso da tag <img>. Os atributos src e alt são obrigatórios.

  • src: é a URL do arquivo da imagem (que pode ser absoluto ou relativo);
  • alt: define um texto alternativo para a imagem mostrado quando a imagem não puder ser apresentada.

Se não for especificado a altura e largura da imagem o navegador assume seu tamanho original. Os atributos opcionais height (altura) e width (largura) permitem customizar o tamanho da imagem em pixels.

Exemplos:

<img src=”minhafoto.png” alt=”Minha foto quando criança”  />

<img src=”http://www.meusite.com/minhafoto.png” alt=”Minha foto quando criança” height=”80px”  width=”150px” />

<img src=”http://www.meusite.com/minhafoto.png” alt=”Minha foto quando criança” width=”150px” />

Dica: Ao especificar somente o atributo width não especificando height o navegador automaticamente ajusta a altura proporcionalmente à largura.

Links

Um link num documento XHTML é definido pelos pares de tags <a></a>. Um link aponta para um endereço, que pode ser um outro documento XHTML dentro do servidor ou em outro servidor.

Alguns atributos

  • href: define a referência do link, ou seja, a URL que o usuário será direcionado ao clicar no link.
  • target: define a janela de abertura do link. Seus possíveis valores são: _blank, _parent, _self e _top.

O conteúdo (texto, imagem…) do link fica definindo entre as tags <a></a>.

Exemplos:

<a href=”sobremim.html”>Clique para saber sobre mim</a>

<a href=”https://www.facebook.com/andremenegassi” target=”_blank”>Meu Facebook</a>

Tabelas

Uma forma de apresentar dados em XHTML é usando tabelas para estruturar os dados. Uma tabela é composta de linha e colunas e é na intersecção destes dois que o dado fica disposto.

O par de tags que define uma tabela é <table></table>, para uma linha <tr></tr> e para coluna <td></td>. Os dados ficaram entre as tags que definem as colunas.

Exemplo:

<table>
<tr>
<td>Presidente Prudente</td>
<td>SP</td>
<td>1000</td>
</tr>
<tr>
<td>Adamantina</td>
<td>SP</td>
<td>0547</td>
</tr>
<tr>
<td>Londrina</td>
<td>PR</td>
<td>0444</td>
</tr>
</table>

Também é possível definir uma sessão de cabeçalho para uma tabela através das tags <thead><tr><th></th></tr></thead>.

Exemplo:

<table>
<thead>
<tr>
<th>Cidade</th>
<th>UF</th>
<th>Cód</th>
</tr>
</thead>
<tr>
<td>Presidente Prudente</td>
<td>SP</td>
<td>1000</td>
</tr>
<tr>
<td>Adamantina</td>
<td>SP</td>
<td>0547</td>
</tr>
<tr>
<td>Londrina</td>
<td>PR</td>
<td>0444</td>
</tr>
</table>

Listas

O uso de listas é uma outra forma de mostrar informações. Em XHTML temos listas ordenadas (sequenciais) e não-ordenadas.

As listas ordenadas apresentam seus itens um após o outro, acompanhados de um número de sequência. O par de tags que define uma lista numerada é <ol></ol> e seus itens são definidos por <li></li>.

Exemplo:

<ol>
<li>Abacaxi</li>
<li>Maça</li>
<li>Banana</li>
</ol>

Por padrão cada item da lista recebe um número sequencial. Isso pode ser mudado adicionando o atributo type à tag <ol>.

Valores para o atributo type:

  • 1: É ó padrão. Número decimais (1, 2, 3…)
  • i: Numerais em romanos minúsculos (i, ii, iii…)
  • I: Numerais em romanos maiúsculos (I, II, III…)
  • a: Alfabeto em minúsculas (a, b, c…)
  • A: Alfabeto em maiúsculas (A, B, C…)

Exemplo:

<ol type=”i”>
<li>Abacaxi</li>
<li>Maça</li>
<li>Banana</li>
</ol>

As listas não-ordenadas utilizam o par de tags <ul></ul>. E seus itens também são definidos por <li></li>.

Exemplo:

<ul>
<li>Abacaxi</li>
<li>Maça</li>
<li>Banana</li>
</ul>

Por padrão cada item da lista recebe uma bolinha (disc). Isso pode ser mudado adicionando o atributo type à tag <ul>.

Valores para o atributo type: disc (padrão), circle e square.

 

É isso pessoal. Teste os exemplos para ver o resultado.