HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Linhas

Você pode adicionar uma linha horizontal a uma página, por exemplo, para separar texto ou dar mais ênfase. Depois de adicionar uma linha horizontal, você pode modificar suas propriedades para alterar a largura, altura (size), alinhamento e cor.

Para inserir uma linha horizontal basta inserir no local desejado a seguinte tag: <HR>
Exemplo:


Você pode inserir parâmetros de largura, cor, tamanho e alinhamento dentro da tag <HR>.
Exemplos: <hr width="60%" color="#FF0000" size="4" align="right">


Determina-se a largura com o atributo width com uma percentagem ou em pixels.
ex: <hr align="center" width="52">


É possível também determinar um estilo como nos  exemplos a seguir:
<hr style="border: 4px dashed #FF0000">


<hr size="3" style="border: 2px solid #CC3300">


 

Linhas Verticais

Não existe tag para criar linha vertical. Porém, fazendo uso de alguns recursos poderemos criá-las.

1º - Com uma tabela e uma gif espaçadora transparente.
Exemplo:
<TABLE CELLPADDING=0><TR>
<TD WIDTH="1" BGCOLOR="#000000">
</TD><TD>
<img src="/kit/tutorial/html/images/pt_trans.gif" width="1" height="200"></p>
</TD> </TR></TABLE>

Resultado:

Para aumentar ou diminuir a altura da "linha" basta agir no valor de height (altura) da gif transparente.


2º - Com uma tabela e os parâmetros CELLPADDING e WIDHT poderemos criar uma linha vertical facilmente.

Exemplo:
<TABLE CELLPADDING=0>
<TR>
<TD WIDTH="1" BGCOLOR="#FF0000"> </TD>
<TD><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></TD>
</TR>
</TABLE>

Resultado:
 

 

 

 

 

Para aumentar ou diminuir a altura da "linha" basta inserir ou retirar comandos <p>&nbsp;</p> dentro da célula. Para modificar a "espessura" da linha basta agir no valor de WIDHT evidenciado na cor magenta  ou no valor de CELLPADING.


3º - Com o comando <HR>
Sintaxe:
<HR WIDTH="X" SIZE="Y">
onde X deverá assumir valor pequeno e Y valor grande.
Exemplo:
<hr width="1" size="100" style="color: #0000FF">

Este 3º recurso só permite "altura" máxima de 100 pixels, e para modificá-la deve-se agir no valor do parâmetro SIZE. A "largura" poderá ser modificada agindo sobre o valor de WIDHT.


Na caixa de Teste on-line abaixo você poderá configurar e testar uma linha horizontal ou vertical.

Teste on-line: