Como tabular texto HTML

Os teclados de computador possuem teclas “tabulativas” que são úteis para recuar o texto. No entanto, esses recuos tabulados normalmente não são exibidos em páginas da Web escritas em HTML. Isso pode ser um problema se o site tiver conteúdo que precise de indentação, como poesia e código de computador. A solução mais simples é “tabular” o texto HTML usando folhas de estilo em cascata (CSS). Isso permite criar regras de formatação personalizadas para quantos tamanhos de guia forem necessários.

Passo 1

Abra seu arquivo HTMLA no editor de texto e adicione o seguinte código CSS na seção “cabeçalho” do seu HTML:

A primeira regra de estilo define uma classe “espaço” com um “preenchimento” relativo à esquerda de 1,3. A segunda regra define outro tipo de “espaço” (preenchimento) com o dobro da quantidade de “preenchimento”. Salve o arquivo como “taba.html”.

Etapa 2

No seu conteúdo, solicite a guia desejada antes do conteúdo. Por exemplo:

Havia um leitor perspicaz de eHow
Quem queria saber como tabular;
A resposta foi realmente bastante simples,
Quando folhas de estilo faziam layouts simplesmente fabulosos!

A segunda e quarta linhas começam com elementos vazios de “espaço” com tamanhos de guias virtuais definidos pelos valores de “preenchimento” em suas regras de CSS. Salve o arquivo novamente.

Etapa 3

Tente sua página da web. Abra seu navegador e carregue “tabs.html”. Você poderá ver dois tamanhos diferentes de “tabulador” na segunda e quarta linhas do poema. Caso contrário, verifique se você copiou os códigos de exemplo corretamente.

Etapa 4

Continue adicionando guias EN Onde quiser, usando elementos de espaço com atributos e valores de classe para definir cada tipo de guia. Ajuste os valores de preenchimento CSS para se adequar ao seu próprio design. Crie mais regras de estilo para quantos tamanhos de guia você precisa.

Referências

 

Você pode estar interessado:

Deixe um comentário