Como Inserir Uma Linha em HTML

Baixe em PDF
Coescrito por Equipe wikiHow

Baixe em PDF

Este artigo do wikiHow ensina a criar uma linha horizontal em HTML. A linha horizontal pode ser usada para separar os conteúdos do seu site. O código para criar uma linha é bem simples. Também é possível adicionar um código em linha para estilizar a linha em HTML 4.01. Em HTML5, é preciso usar CSS para estilizá-la. [1]

Método 1
Método 1 de 2:

Usando HTML 4.01

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/658928-1-1.jpg\/v4-460px-658928-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/658928-1-1.jpg\/v4-728px-658928-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Os documentos em HTML podem ser editados com um editor de texto, como o Bloco de Notas, ou um editor de códigos, como o Adobe Dreamweaver. Siga os passos a seguir para abrir um documento em HTML no programa de sua preferência:
    • Abra o Bloco de Notas ou um editor de texto/de códigos de sua preferência.
    • Clique no menu "Arquivo".
    • Clique em "Abrir".
    • Selecione um arquivo em HTML.
    • Clique em "Abrir".
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/658928-2-1.jpg\/v4-460px-658928-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/658928-2-1.jpg\/v4-728px-658928-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Deslize para abaixo até encontrar a linha sobre a qual você deseja inserir a nova linha e clique no seu lado esquerdo para posicionar o cursor antes do início da linha.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/658928-3-1.jpg\/v4-460px-658928-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/658928-3-1.jpg\/v4-728px-658928-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Pressione ↵ Enter duas vezes para mover para baixo o texto sobre o qual você vai inserir a linha e mova o cursor até o espaço em branco.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/658928-4-1.jpg\/v4-460px-658928-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/658928-4-1.jpg\/v4-728px-658928-4-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Digite <hr> no espaço antes do início da linha. A marcação "<hr>" é responsável por criar uma linha horizontal ao longo de toda a página.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/658928-5-1.jpg\/v4-460px-658928-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/658928-5-1.jpg\/v4-728px-658928-5-1.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para isso, pressione ↵ Enter . A partir de agora, a marcação "<hr>" deve estar numa linha separada.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/658928-6-1.jpg\/v4-460px-658928-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/658928-6-1.jpg\/v4-728px-658928-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    É possível adicionar atributos à linha horizontal, como comprimento, largura, cor e alinhamento. Use os códigos a seguir depois do "hr", entre os brackets (sinais de “menor que” e “maior que”) do código. Você pode adicionar mais de um atributo a um bracket separando cada um com espaço. [2]
    • Digite <hr size="#"> para alterar a espessura da linha. Substitua o "#" pelo número da espessura (por exemplo, size="10").
    • Digite <hr width="#"> para alterar a largura. Substitua o "#" pelo número de pixels ou pela porcentagem correspondente à largura da página (por exemplo, width="200" ou width="75%").
    • Digite <hr color="#"> para alterar a cor da linha. Substituta o "#" pelo nome de uma cor ou pelo seu código hexadecimal (por exemplo, color="red" ou color="#FF0000").
    • Digite <hr align="#"> para alinhar a linha. Substitua o "#" por "right", "left" ou "center" (por exemplo, <hr width="50%" align="center"> ).
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para salvar um documento de texto, é preciso substituir a extensão do arquivo (.txt, .docx) por ".html". Siga os passos a seguir para salvar o documento em HTML:
    • Clique no menu "Arquivo".
    • Clique em "Salvar Como".
    • Digite o nome do arquivo ao lado de "Nome".
    • Digite .html depois do nome do arquivo.
    • Clique em "Salvar".
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/658928-8-1.jpg\/v4-460px-658928-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/658928-8-1.jpg\/v4-728px-658928-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para testar o arquivo em HTML, clique com o botão direito do mouse no arquivo e selecione "Abrir com". Selecione um navegador. Deve aparecer uma linha contínua onde você colocou a marcação "hr". O código HTML vai ficar mais ou menos assim: [3] 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Este é um cabeçalho </ 
 h1 
 > 
 < 
 hr 
 size 
 = 
 "6" 
 width 
 = 
 "50%" 
 align 
 = 
 "left" 
 color 
 = 
 "green" 
 > 
 < 
 p1 
 > 
Este é o texto do parágrafo que foi separado do cabeçalho pela linha. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Publicidade
Método 2
Método 2 de 2:

Usando CSS/HTML5

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Os documentos em HTML podem ser editados usando um editor de texto, como o Bloco de Notas. Outra possibilidade é usar um editor de códigos, como o Adobe Dreamweaver. Siga os passos a seguir para abrir um documento em HTML no programa de sua escolha:
    • Abra o Bloco de Notas ou um editor de texto/códigos de sua escolha.
    • Clique no menu "Arquivo".
    • Clique em "Abrir".
    • Selecione um arquivo em HTML.
    • Clique em "Abrir".
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/658928-10-1.jpg\/v4-460px-658928-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/658928-10-1.jpg\/v4-728px-658928-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Caso seu documento em HTML ainda não tenha um cabeçalho, siga os passos a seguir para adicionar um. O cabeçalho fica depois da marcação "<html>" e antes da marcação "<body>".
    • Digite <head> na parte superior do documento.
    • Pressione ↵ Enter duas vezes para adicionar duas linhas novas.
    • Digite </head> para fechar o cabeçalho.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    A marcação de estilo fica entre as duas marcações de cabeçalho. Vai ser criado um local onde você pode inserir o código CSS para estilizar seu HTML.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/658928-12-1.jpg\/v4-460px-658928-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/658928-12-1.jpg\/v4-728px-658928-12-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Essa é a marcação do CSS para estilizar a linha horizontal. Adicione-a depois da marcação de estilo no cabeçalho ou no arquivo em CSS externo.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Eles vão depois da marcação "hr {". Há diversas maneiras de estilizar a linha horizontal. Seguem alguns exemplos.
    • Digite width: ##px; para definir a largura. Substitua "##" pelo número de pixels da linha ou pela porcentagem (%), em vez dos pixels (px).
    • Digite height: ##px; para definir a espessura da linha. Substitua "##" pelo número da espessura da linha em pixels.
    • Digite background-color: ##; para definir a cor da linha. Substitua "##" pelo nome de uma cor ou um sinal de cerquilha (#) seguido de um código hexadecimal de cor.
    • Digite margin-right: ##px; para definir o número de pixels da margem direita. Substitua "##" por um número, pela quantidade de pixels ou por "auto". Digite "auto" para alinhar a linha à esquerda ou ao centro.
    • Digite margin-left: ##px; para definir o número de pixels da margem esquerda. Substitua "##" pelo número, pela quantidade de pixels ou por "auto". Digite "auto" para alinhar a linha à direita ou ao centro.
    • Digite margin-top: ##px; para definir a margem superior da linha. Substitua "##" por um número ou pela espessura em pixels da margem.
    • Digite margin-bottom: ##px; para definir a margem inferior da linha. Substitua "##" pelo número da espessura em pixels da margem.
    • Digite border-width: ##px; para criar uma borda em volta da linha (opcional). Substitua "##" pelo número da espessura em pixels da borda.
    • Digite border-color: ##; para definir a cor da borda (opcional). Substitua "##" pelo nome de uma cor ou por um sinal de cerquilha (#) seguido de um código hexadecimal de cor.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/658928-14-1.jpg\/v4-460px-658928-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/658928-14-1.jpg\/v4-728px-658928-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    As definições de estilo serão fechadas para a marcação <hr>.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Vai ser adicionada uma linha horizontal ao documento em HTML. As definições de estilo em CSS serão aplicadas sempre que você usar a marcação <hr> no documento em HTML. [4] Seu código deve ficar mais ou menos assim: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 type 
 = 
 "text/css" 
 > 
 hr 
 { 
 width 
 : 
 50 
 % 
 ; 
 height 
 : 
 20 
 px 
 ; 
 background-color 
 : 
 red 
 ; 
 margin-right 
 : 
 auto 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-top 
 : 
 5 
 px 
 ; 
 margin-bottom 
 : 
 5 
 px 
 ; 
 border-width 
 : 
 2 
 px 
 ; 
 border-color 
 : 
 green 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Isto é um cabeçalho </ 
 h1 
 > 
 < 
 hr 
 > 
 < 
 p1 
 > 
Isto é um parágrafo separado por uma linha horizontal </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Publicidade

WikiHows Relacionados

Como
Alinhar Algo em HTML
Como
Criar um Link de Imagem em HTML
Como
Criar uma Página Simples da Web com HTML
Como
Verificar a Versão do PHP
Como
Criar Uma Página Web Simples com o Bloco de Notas
Como
Redirecionar um URL
Como
Adicionar Comentários em um Código HTML
Como
Esconder um Link em HTML
Como
Adicionar um Hiperlink com HTML
Como
Fazer um Texto Piscar com HTML
Como
Aprender HTML
Como
Criar um Plano de Fundo Transparente Usando o Pixlr
Publicidade

Referências

  1. ↑ https://www.w3schools.com/tags/tag_hr.asp
  2. ↑ http://www.myhtmltutorials.com/line.html
  3. ↑ https://www.w3schools.com/TAGS/tag_hr.asp
  4. ↑ https://love2dev.com/blog/html-horizontal-line/

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 47 174 vezes.

Este artigo foi útil?

Publicidade