Apostila de web estático Prof. Eduardo 2 CAPÍTULO PADRÕES DE FUNDO Uma Home page pode conter uma textura como padrão de fundo, um arquivo no formato gif ou jpg, ou utilizar as cores do padrão RGB. A notação para os dois padrões de fundo são: (1)<body background="arquivo.gif"></body> Esta notação indica fundos com textura. Se o arquivo gif estiver no mesmo servidor, mas em outro diretório, deve ser indicado o seu caminho path/name. Se estiver em outro servidor, sua URL deve ser indicada: Tipo://host.domínio[:porta]/path/NomeDoArquivo. Dica: Use <bgproperties="fixed"> para fixar o fundo da página na tela. (2)<body bgcolor="#rrggbb"></body> Esta notação indica fundos no padrão RGB. Usa-se um código no formato hexadecimal precedido pela tralha #. Clique em Tabela de Cores para ver as cores com seus respectivos códigos RGB. CORES DO TEXTO As cores do texto são indicadas, usando-se o mesmo código hexadecimal dos padrões de fundo RGB. A notação para indicar a cor do texto é: <body text="#rrggbb"></body> OS LINKS Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto. A NATUREZA DOS LINKS (1) Pode-se ligar partes de um texto ou imagens no mesmo documento. Este tipo de link encaixa-se na categoria de link relativo. (2) Pode-se ligar partes de um texto ou imagens de outros documentos localizados no mesmo diretório. Este tipo de link encaixa-se na categoria de link relativo.
(3) Pode-se ligar partes de um texto ou imagens de outros documentos localizados em diretório diferente. Este tipo de link encaixa-se na categoria de link relativo. (4) Pode-se ligar partes de um texto ou imagens de outros documentos localizados em Provedor diferente. Este tipo de link encaixa-se na categoria de link absoluto. A tag que faz a ligação hipertexto é <a>, que é chamada de âncora. A notação completa para um link é: <a href="texto ou imagem vinculada"></a> LINKS RELATIVOS (1) Links no mesmo documento: Para interligar parte de um texto a outro texto no mesmo documento, usa-se uma âncora de nome, para identificar o primeiro trecho do texto, e uma âncora interna para identificar a outra parte do texto. A âncora de nome e a âncora interna devem possuir uma palavra chave, idêntica em ambas. Após as aspas da âncora interna e antes da palavra chave, usa-se a tralha (#). No primeiro trecho, usa-se uma âncora de nome, cuja notação é: <a name="palavrachave"> No segundo trecho, usa-se uma âncora interna, cuja notação é: <a href="#palavrachave">nome do Link</a> (2) Links para outros documentos: A notação utilizada para links em diretórios diferentes é igual a anterior, devendo, entretanto indicar-se o nome do arquivo na âncora interna. A notação é: <a href="nomedoarquivo#palavrachave"> (3) Links para documentos em diretórios diferentes: A notação é idêntica a do item (2), devendo, entretanto, indicar-se o nome do diretório. <a href="diretório/nomedoarquivo#palavrachave">
LINKS ABSOLUTOS Quando se interliga textos ou imagens de provedores diferentes, usa-se links absolutos. Os links absolutos devem ser indicado pelo uso da URL (Uniform Resource Locators). A notação para links absolutos é: protocolo://servidor[:port]/path/filename Por exemplo, para fazer um link absoluto em sua homepage com a página inicial deste documento, usa-se: <a href="http//members.tripod.com/~shibolete/index.html">cinco PASSOS PARA CONSTRUIR SUA HOME PAGE</a> CORES DOS LINKS 1 Links Pode-se utilizar qualquer cor para o link, no entanto recomenda-se a cor padrão azul (blue) indicada pelo código rgb=#0000ff. Isto porque quando se clica sobre um link sua cor é alterada para indicar ao usuário que aquele link já foi consultado. Se não for indicada a cor do link, ele será automaticamente exibido na cor padrão configurada no seu browser, geralmente na cor azul. 2 Vlink Indica a cor dos links já consultados. 3 Alink Indica a cor do links ativados na página. A notação para indicar as cores dos links, alinks e vlinks é: <body link="#rrggbb" vlink="#rrggbb" alink="#rrggbb></body> A notação completa para as cores de textos e links é: <body background="arquivo.gif" text="#rrggbb" link="#0000ff" vlink="#rrggbb" alink="#rrggbb"></body> ou <body bgcolor="#rrggbb" text="#rrggbb" link="#0000ff" vlink="#rrggbb" alink="#rrggbb"></body>
O SUBTÍTULO É o título que aparece na Home Page. Não deve ser confundido com o título do documento, que não é visualizado na página, mas aparece no alto da tela. O título é inserido na seção do cabeçalho <head><title></title></head> enquanto o subtítulo é colocado na seção do corpo documento HTML <body></body> O subtítulo possui 6 níveis de tamanho, numerados de 1 a 6. Usa-se a tag <hy>, onde "y" é um número entre 1 a 6. Os níveis para subtítulo são em número de seis, conforme tabela abaixo: <h1>nível 1</h1> nível 1 <h2>nível 2</h2> nível 2 <h3>nível 3</h3> nível 3 <h4>nível 4</h4> nível 4 <h5>nível 5</h5> nível 5 <h6>nível 6</h6> nível 6 FORMATAÇÃO DO TEXTO O documento HTML não segue o padrão de formatação da maioria dos editores de texto. Ele não possui recursos para aumentar o espaço entre as palavras e entrelinhas nem para forçar a justificação do texto. Para obter esses recursos é preciso utilizar a tag apropriada. A listagem a seguir mostra a função de cada tag: Quebra de Linha <br> faz uma quebra de linha, mas não acrescenta espaço entre as linhas. O documento HTML não segue<br> o padrão de formatação... O texto acima é visualizado da seguinte forma: O documento HTML não segue (quebra de linha) o padrão de formatação...
Quebra de texto sem alinhamento O alinhamento de imagens muitas vezes força o texto a acompanhar o alinhamento, tornando difícil o seu posicionamento. A tag <br clear=right> ou <br clear=left> libera o texto desse alinhamento. Para posicionar o texto em ambas as margens use <br clear=all> Parágrafo <p> inicia um novo parágrafo acrescentando espaço entre as linhas. O documento HTML não segue<p> o padrão de formatação... O texto acima aparece da seguinte forma: O documento HTML não segue (espaço entre linhas) o padrão de formatação... <b></b> coloca o texto em negrito. <i></i> coloca o texto em itálico. <center></center> centraliza o texto.