Contente

• Passos
• Método 1 de 2: Trabalhando em HTML 4.01
• Método 2 de 2: Trabalhando em CSS / HTML5

Este artigo mostrará como adicionar uma linha horizontal em HTML. A linha horizontal pode ser usada para separar o conteúdo do site. O código para criar a linha é bastante simples. No entanto, no HTML 4.01, é possível alterar o design de uma linha usando comandos internos. Em HTML5, você terá que usar CSS para estilizar a linha.

Passos

Método 1 de 2: Trabalhando em HTML 4.01

1. 1 Abra um documento existente ou crie um novo documento HTML. Os documentos HTML podem ser editados com um editor de texto, como o Bloco de notas, ou um editor de código especializado, como o Adobe Dreamweaver. Siga estas etapas para abrir um documento HTML no programa de sua escolha:
   • Abra o Bloco de notas ou outro editor de texto / código.
   • Abra o menu Arquivo.
   • Clique em Aberto.
   • Selecione o arquivo HTML.
   • Clique em Aberto
2. 2 Selecione o local onde deseja inserir a linha. Role para baixo até encontrar a linha acima da qual a linha deve aparecer e, em seguida, mova o cursor diretamente para o início dessa linha clicando na extremidade esquerda dessa linha.
3. 3 Adicione uma linha vazia. Toque duplo ↵ Entrepara mover para baixo o texto antes do qual deseja inserir uma linha e, em seguida, coloque o cursor em uma linha vazia.
4. 4 Adicionar tag hr>. Digitar hr> para o espaço em branco no início da linha. Marcação hr> permite que você desenhe uma linha horizontal em toda a página.
5. 5 Mova o cursor após a tag "hr" para uma nova linha pressionando ↵ Entre. Agora a tag hr> deve estar em uma linha separada.
6. 6 Adicione atributos à linha horizontal (opcional). Adicione atributos como comprimento, espessura, cor e alinhamento. Coloque-os entre chaves imediatamente após o "hr". Para adicionar vários atributos, separe-os com um espaço.
   • Digitar hr size = "#">para alterar a espessura da linha. Substitua "#" por um valor de espessura numérico (por exemplo, tamanho = "10").
   • Digitar hr width = "#">para alterar a largura da linha. Substitua "#" pelo número de pixels ou uma porcentagem da largura da página (por exemplo, largura = "200" ou largura = "75%").
   • Digitar hr color = "#">para alterar a cor da linha. Substitua "#" pelo nome da cor ou seu código hexadecimal (por exemplo, color = "red" ou color = "# FF0000").
   • Digitar hr align = "#">para alinhar a linha. Substitua "#" por "direita" (direita), "esquerda" (esquerda) ou "centro" (centro) (por exemplo, hr width = "50%" align = "center">).
7. 7 Salve o arquivo HTML. Para salvar um arquivo de texto como um documento HTML, você deve alterar a extensão do arquivo (.txt, .docx) para ".html". Siga estas etapas para salvar seu documento HTML:
   • Abra o menu Arquivo.
   • Clique em Salvar como.
   • Digite um nome para o arquivo no campo Nome do arquivo.
   • Adicionar .html após o nome do arquivo.
   • Clique em Salvar.
8. 8 Verifique seu documento HTML. Para verificar o arquivo HTML, clique com o botão direito nele e escolha Abrir com. Em seguida, selecione seu navegador da web. Uma linha sólida deve aparecer onde você inseriu a tag "hr". O código HTML será semelhante a este:

   ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Esta linha deve ser separada do título por uma linha . / P1> / body> / html>

Método 2 de 2: Trabalhando em CSS / HTML5

1. 1 Abra um documento existente ou crie um novo documento HTML. Os documentos HTML podem ser editados com um editor de texto, como o Bloco de notas, ou um editor de código especializado, como o Adobe Dreamweaver. Siga estas etapas para abrir um documento HTML no programa de sua escolha:
   • Abra o Bloco de notas ou outro editor de texto / código.
   • Abra o menu Arquivo.
   • Clique em Aberto.
   • Selecione o arquivo HTML.
   • Clique em Aberto
2. 2 Adicione um título ao seu documento HTML. Se o seu documento HTML ainda não tiver um título, siga estas etapas para adicionar um. O título deve ir depois da tag html> e antes da tag body>.
   • Digitar cabeça> na parte superior do documento.
   • Toque duplo ↵ Entrepara adicionar duas novas linhas.
   • Digitar / head>para fechar o título.
3. 3 Digitar tipo de estilo = "text / css"> dentro do cabeçalho. A marca de estilo é colocada entre as duas marcas de título para criar um local onde você pode usar CSS para modificar o design do HTML.
   • Como alternativa, você pode usar uma folha de estilo externa. Leia o artigo "Como inserir um arquivo CSS em HTML»Para aprender como vincular um arquivo CSS externo a um arquivo HTML.
4. 4 Digitar hr {. Esta é a tag CSS para definir o estilo da linha horizontal. Adicione-o após a tag "style" em seu cabeçalho ou arquivo CSS externo.
5. 5 Adicione estilos CSS para a tag hr>. Eles devem vir após a tag "hr {". Uma linha horizontal pode ser estilizada de várias maneiras. Abaixo estão alguns deles.
   • Digitar largura: ## px;para ajustar a largura da linha. Substitua "##" pela largura da linha em pixels. Em vez de pixels (px), você pode usar uma porcentagem (%).
   • Digitar altura: ## px;para ajustar a espessura da linha. Substitua "##" pela largura da linha em pixels.
   • Digitar cor de fundo: ##;para especificar a cor da linha. Substitua “##” por um nome de cor ou hash (#) seguido por um código de cor hexadecimal.
   • Digitar margem direita: ## px;para especificar o número de pixels da borda direita. Substitua "##" por um número numérico de pixels ou pelo código "auto". Digite "auto" para alinhar a linha à esquerda ou ao centro.
   • Digitar margem esquerda: ## px;para especificar o número de pixels da borda esquerda. Substitua "##" por um número numérico de pixels ou pelo código "auto". Digite "auto" para alinhar a linha à direita ou ao centro.
   • Digitar margem superior: ## px; para especificar o preenchimento superior da linha. Substitua "##" por um número correspondente ao preenchimento em pixels.
   • Digitar margem inferior: ## px;para especificar o preenchimento inferior da linha. Substitua "##" por um número correspondente ao preenchimento em pixels.
   • Digitar largura da borda: ## px;para desenhar uma caixa ao redor da linha (opcional). Substitua "##" por um número correspondente à largura da borda em pixels.
   • Digitar Cor da borda: ##;para especificar a cor da borda (opcional). Substitua “##” por um nome de cor ou hash (#) seguido por um código de cor hexadecimal.
6. 6 Digitar } após os atributos de estilo para completar o estilo da tag hr>.
7. 7 Digitar hr> em qualquer lugar no corpo do documento HTML para adicionar uma linha horizontal. As configurações de estilo CSS serão aplicadas sempre que você usar a tag hr> em seu documento HTML. Seu código deve ser semelhante a este:

   ! DOCTYPE html> html> head> style type = "text / css"> hr {largura: 50%; altura: 20px; cor de fundo: vermelho; margem direita: automático; margem esquerda: automático; margem superior: 5px; margin-bottom: 5px; largura da borda: 2px; cor da borda: verde; } / style> / head> body> h1> Heading / h1> hr> p1> Esta linha deve ser separada do título por uma linha horizontal / p1> / body> / html>