Criar uma linha horizontal em html

Este tutorial vai te ensinar como criar uma linha horizontal em HTML. Uma linha horizontal pode ser usada para separar o conteúdo do seu site. O código para criar uma regra é bem simples. Você pode adicionar código in-line em HTML 4.01 para moldar sua linha. Em HTML5 você usa CSS para moldar sua linha.

Degraus

Método 1 de 2: HTML 4.01

Imagem intitulada 658928 1 1
1. Abra ou crie um novo documento HTML. Documentos HTML podem ser editados com um editor de texto como o Bloco de Notas. Você também pode usar um editor de código como o Adobe Dreamweaver. Use as etapas a seguir para abrir um documento HTML no programa de sua escolha:
  • Abra o Bloco de Notas ou qualquer editor de texto/editor de código de sua escolha.
  • Clique no cardápio Arquivo.
  • Clique em Abrir.
  • Escolha um arquivo HTML.
  • Clique em Abrir.
Imagem intitulada 658928 2 1
2. Selecione o ponto onde você deseja inserir a linha. Role para baixo até a linha acima da qual você deseja inserir a linha e clique na extremidade esquerda da linha para colocar o cursor diretamente na frente do início da linha.
Imagem intitulada 658928 3 1
3. Crie um espaço vazio. Pressione . duas vezes ↵ Enter para mover para baixo o texto acima do qual você deseja inserir a linha e mova o cursor para o espaço vazio.
Imagem intitulada 658928 4 1
4. adicione a etiqueta " modelo no espaço antes do início da linha. a etiqueta cria uma linha horizontal em toda a página.
Imagem intitulada 658928 5 1
5. Mova a linha da tag `hr` para uma nova linha. pressione ↵ Entre para fazer isso. Neste ponto, a etiqueta deve fique na sua própria linha.
Imagem intitulada 658928 6 1
6. Adicione atributos à linha horizontal (opcional). Você pode adicionar atributos a uma linha horizontal, como comprimento, largura, cor e alinhamento. Use os seguintes códigos após `hr` nos colchetes de código. Você pode adicionar mais de um atributo separando-os com um espaço.
  • modelo para alterar a espessura da linha. Substitua # pela espessura (ex. tamanho="10").
  • modelo para alterar a largura da linha.Substitua # pela largura em pixels ou pela porcentagem da largura da página (por exemplo,. largura="200", ou largura="75%").
  • modelo para mudar a cor da linha. Substitua # pelo nome da cor ou um código hexadecimal (por exemplo,. cor="vermelho" ou cor="#FF0000")
  • modelo para alinhar a linha.Substituir com "direito", "deixou" ou "Centro" (por exemplo. ).
    Imagem intitulada 658928 7 1
    7. Salve seu arquivo HTML. Para salvar um arquivo de texto como um documento HTML, você deve especificar a extensão do arquivo (.txt ou .docx) substituído por `.html`. Siga estas etapas para salvar seu documento HTML:
  • Clique no cardápio Arquivo.
  • Clique em Salvar como.
  • Digite um nome para o arquivo, ao lado de "`Nome do arquivo`".
  • modelo .html no final do nome do arquivo.
  • Clique em Salve .
    Imagem intitulada 658928 8 1
    8. Teste seu HTML. Se você quiser testar seu arquivo HTML, clique com o botão direito do mouse no arquivo e selecione Abrir com. Em seguida, selecione um navegador da Web. Uma linha sólida deve aparecer onde você colocou a tag `HR`. O código HTML se parece com isso:

    Método 2 de 2: CSS/HTML5

    Imagem intitulada 658928 9 1
    1. Abra ou crie um novo documento HTML. Documentos HTML podem ser editados com um editor de texto como o Bloco de Notas. Você também pode usar um editor de código como o Adobe Dreamweaver. Siga estas etapas para abrir um documento HTML no programa de sua escolha:
  • Abra o Bloco de Notas ou qualquer outro editor de texto/editor de código de sua escolha.
  • Clique no cardápio Arquivo.
  • Clique em Abrir.
  • Escolha um arquivo HTML.
  • Clique em Abrir
  • Imagem intitulada 658928 10 1
    2. Adicionar um título ao seu documento HTML. Se o seu documento HTML ainda não tiver um título, use as etapas a seguir para adicionar um título. A manchete vem depois do "
  • modelo no topo do documento.
  • Pressione . duas vezes ↵ Enter para adicionar duas novas linhas.
  • modelo para fechar a cabeça.
    Imagem intitulada 658928 11 1
    3. modelo no copo.A tag de formatação fica entre as duas tags de cabeçalho.Isso lhe dará um lugar para inserir o código CSS para formatar seu HTML.
  • Você também pode usar uma folha de estilo externa. ler "Como adicionar um arquivo CSS ao HTML" para saber mais sobre como vincular um arquivo CSS externo ao seu arquivo HTML.
    Imagem intitulada 658928 12 1
  • 4. modelo hora {.Esta é a tag CSS para formatar sua linha horizontal.Coloque-o após a tag de estilo na seção de cabeçalho ou em seu arquivo CSS externo.
    Imagem intitulada 658928 13 1
    5. Adicione estilos CSS ao seu "Você coloca isso atrás da tag "hora {".Há muitas maneiras de formatar uma linha horizontal.Seguem alguns exemplos.
  • modelo largura: ##px; para definir a largura. Substitua ## pela largura da linha em número de pixels. Você também pode especificar uma porcentagem (%) em vez de pixels (px).
  • modelo altura: ##px; para indicar a espessura da linha. Substitua ## pelo número de pixels que a linha deve ser grossa.
  • modelo cor de fundo: ##; para indicar a cor da linha. Substitua ## pelo nome da cor ou por um hash (#) seguido por um código de cor hexadecimal.
  • modelo margem direita: ##px; para indicar o número de pixels da direita.Substitua ## pelo número de pixels ou "carro".modelo "carro" para alinhar ou centralizar a linha à esquerda.
  • modelo margem esquerda: ##px; para indicar o número de pixels da borda esquerda.Substitua ## pelo número de pixels ou "carro".modelo "carro" para alinhar à direita ou centralizar a linha.
  • modelo topo da margem: ##px; para especificar uma margem superior para a linha. Substitua ## pela espessura da linha em pixels.
  • Modelo margem inferior: ##px; para especificar uma margem inferior para a linha. Substitua ## pela espessura da linha em pixels.
  • modelo largura da borda: ##px; para criar uma borda ao redor da linha (opcional). Substitua ## pela espessura da borda em pixels.
  • modelo Cor da borda: ##; para indicar a cor da borda ao redor da linha (opcional).Substitua ## pelo nome da cor ou um hash (#) seguido por um código de cor hexadecimal.
    Imagem intitulada 658928 14 1
  • 6. modelo } após as configurações de estilo. Fecha as configurações de estilo para o
    Imagem intitulada 658928 15 1
    7. modelo em qualquer lugar no corpo do seu documento HTML.Adiciona uma linha horizontal ao seu documento HTML.Suas configurações de estilo CSS se aplicam quando você usa o

    Оцените, пожалуйста статью