Pesquisa de site

Aumente o nível do seu documento HTML com CSS


Use CSS para trazer estilo à documentação do seu projeto HTML.

Ao escrever documentação, seja para um projeto de código aberto ou para um projeto de redação técnica, você deve ter dois objetivos: o documento deve ser bem escrito e fácil de ler. O primeiro é abordado por habilidades claras de redação e edição técnica. A segunda pode ser resolvida com algumas alterações simples em um documento HTML.

HyperText Markup Language, ou HTML, é a espinha dorsal da Internet. Desde o surgimento da “World Wide Web” em 1994, todo navegador usa HTML para exibir documentos e sites. E por quase tanto tempo, o HTML tem suportado a folha de estilo, uma adição especial a um documento HTML que define como o texto deve aparecer na tela.

Você pode escrever a documentação do projeto em HTML simples e isso dá conta do recado. No entanto, o estilo HTML simples pode parecer um pouco espartano. Em vez disso, tente adicionar alguns estilos simples a um documento HTML para adicionar um toque especial à documentação e tornar seus documentos mais claros e fáceis de ler.

Definindo um documento HTML

Vamos começar com um documento HTML simples e explorar como adicionar estilos a ele. Um documento HTML vazio contém a definição na parte superior, seguida por um bloco para definir o próprio documento. Dentro do elemento , você também precisa incluir um cabeçalho de documento que contenha metadados sobre o documento, como seu título. O conteúdo do corpo do documento fica dentro de um bloco <body> dentro do bloco pai .

Você pode definir uma página em branco com este código HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>This is a new document</title>
  </head>
  <body>

  </body>
</html>

Em outro artigo sobre como escrever a documentação do projeto em HTML, atualizei um arquivo Leiame de um jogo de tabuleiro de código aberto de texto simples para um documento HTML, usando algumas tags HTML básicas como

e

para títulos e subtítulos,

para parágrafos e e para negrito e texto em itálico. Vamos continuar de onde paramos com esse artigo:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Senet</title>
  </head>
  <body>
    <h1>Simple Senet</h1>
    <h2>How to Play</h2>
    
    <p>The game will automatically "throw" the throwing sticks
    for you, and display the results in the lower-right corner
    of the screen.</p>
    
    <p>If the "throw" is zero, then you lose your turn.</p>
    
    <p>When it's your turn, the game will automatically select
    your first piece on the board. You may or may not be
    able to make a move with this piece, so select your piece
    to move, and hit <i>Space</i> (or <i>Enter</i>) to move
    it. You can select using several different methods:</p>
    
    <ul>
      <li><i>Up</i>/<i>down</i>/<i>left</i>/<i>right</i> to
      navigate to a specific square.</li>
    
      <li>Plus (<b>+</b>) or minus (<b>-</b>) to navigate "left"
      and "right" on the board. Note that this will automatically
      follow the "backwards S" shape of the board.</li>
    
      <li><em>Tab</em> to select your next piece on the
      board.</li>
    </ul>
    
    <p>To quit the game at any time, press <b>Q</b> (uppercase
    Q) or hit <i>Esc</i>, and the game will prompt if you want
    to forfeit the game.</p>
    
    <p>You win if you move all of your pieces off the board
    before your opponent. It takes a combination of luck and
    strategy!</p>
  </body>
</html>

Este documento HTML demonstra alguns elementos de bloco e embutidos comuns usados por escritores técnicos que escrevem com HTML. Os elementos de bloco definem um retângulo ao redor do texto. Parágrafos e títulos são exemplos de elementos de bloco, pois se estendem da esquerda para a direita do documento. Por exemplo,

envolve um retângulo invisível ao redor de um parágrafo. Por outro lado, os elementos inline seguem o texto onde são usados. Se você usar em algum texto dentro de um parágrafo, somente o texto entre e ficará em negrito.

Você pode aplicar estilo direto a este documento para alterar a fonte, as cores e outros estilos de texto, mas uma maneira mais eficiente de modificar a aparência do documento é aplicar uma folha de estilo ao próprio documento. Você pode fazer isso no elemento <head>, com outros metadados. Você pode fazer referência a um arquivo para a folha de estilo, mas neste exemplo, use um bloco