Como formatar sites – Computador

Um site eficaz deve transmitir conteúdo a seus leitores por meio de uma formatação atraente. A formatação inadequada pode tornar um site desagradável ou mesmo ilegível. Com a linguagem de marcação de hipertexto (HTML), você pode controlar a formatação de um site para que apareça exatamente como deseja. Além disso, as folhas de estilo em cascata (CSS) permitem que você formate um site usando uma folha de estilo externa. Essa técnica é útil se você deseja aplicar o mesmo estilo a várias páginas de seu site.

Formatação HTML

1

Crie tabelas para posicionar os vários elementos da sua página web. Use uma tag para iniciar a própria tabela. Use uma tag para iniciar uma linha da tabela e um

tag para criar uma célula de dados da tabela dentro da linha. As células de dados da tabela geralmente podem ser consideradas as colunas de uma tabela. Para posicionar adequadamente seus elementos, experimente os parâmetros de altura, largura, preenchimento e espaçamento de linhas individuais e células de dados.

2

Adicione efeitos de texto e estilo de fonte nas tags para elementos que contêm o texto. Por exemplo, se você deseja formatar o texto dentro de um elemento de parágrafo:

Isso renderizaria o conteúdo do parágrafo na fonte Comic Sans.

3

Adicione um plano de fundo a todo o seu site na tag, usando o atributo bgcolor. Por exemplo:

Isso renderiza o fundo de toda a página em uma cor rosa.

CSS e folhas de estilo externas

1

Abra um novo documento de texto no Bloco de notas.

2

Formate cada elemento em seu novo documento. Use a tag de elemento seguida por um colchete aberto para introduzir estilos para esse elemento. Por exemplo:

p {

família de fontes: "comic sans ms";

cor de fundo :: # CC3366;

}

Cada parágrafo em seu documento HTML terá a fonte Comic Sans e uma cor de fundo rosa.

3

Use um ID ou classe se desejar introduzir estilos que serão usados em vários tipos diferentes de elementos ou em casos individuais. Um ID só pode ser usado uma vez e é introduzido pelo símbolo "#". Uma classe pode ser usada várias vezes e é denotada por "." símbolo. Por exemplo:

.comicrose {

família de fontes: "comic sans ms";

cor de fundo :: # CC3366;

}

Esta classe permite que você estilize um elemento com Comic Sans e um fundo rosa onde quer que você chame sua classe. Por exemplo, no código HTML de sua página,

estiliza um parágrafo conforme descrito.

4

Link para uma folha de estilo externa na seção de seu código HTML. Por exemplo:

Isso está vinculado a uma folha de estilo externa chamada pagestyles.css.