Há várias formas de colocar barras ou separadores em sites. Uma delas é construí-los diretamente no código HTML, o que é bastante fácil, dependendo da sua capacidade em editar o HTML dos seus sites. Com separadores, fica muito fácil organizar o conteúdo de forma clara, o que irá melhorar a legibilidade do seu site.
- Nível de dificuldade:
- Moderadamente fácil
Outras pessoas estão lendo
O que você precisa?
- Editor HTML ou editor de texto
Lista completa
Instruções
- 1
Abra o código-fonte da página que você deseja editar. Se seu site funciona através de uma interface de usuário (como Blogger ou WordPress, por exemplo), apenas abra a aba "Código" ou "HTML" quando estiver editando uma postagem.
- 2
Insira "<hr />" (sem as aspas) onde você deseja inserir uma barra ou divisor.
- 3
Salve a página e verifique se a barra apareceu.
- 4
Mude a aparência do "<hr />" facilmente para a forma que você quiser acessando o código da folha de estilos do seu site, que aparece entre as tags "<style>", na seção "<head>" das suas páginas; ou, alternativamente, em um arquivo que termina com a extensão CSS.
- 5
Insira este trecho de código no fim da folha de estilos:
hr { width:60% GO height:10px GO background-color:gray GO border:1px dotted green GO }
Obviamente, estes valores podem ser alterados. Apenas mantenha a sintaxe da mesma forma e altere as cores e medidas de acordo com seu gosto. As medidas podem ser em pixels (px) ou porcentagem.
Na opção "border" (borda), as opções, além de "dotted" (pontilhado), são: "solid" (borda comum), "dashed" (tracejada), "ridge" (borda em ressalto), "groove" (borda entalhada), "outset" (alto relevo) e "inset" (baixo relevo).
- 6
Faça um separador com qualquer gravura que quiser inserindo o código abaixo no fim da folha de estilos ao invés do código anterior:
hr { width:400px GO height:5px GO background-image:url('endereco-da-imagem.jpg') GO }
Troque "endereco-da-imagem.jpg" pelo endereço da sua imagem na web. Você também terá que ajustar as dimensões de acordo com o tamanho da imagem. Se tiver 200 px de largura por 20 px de altura, coloque "200 px" como valor em "width" (largura) e 20 px como valor em "height" (altura).