005 - FORMATAÇÃO BÁSICA DA HOMEPAGE
Inserção de Imagens e Atributos do tag <FONT> (Tipos de Letras)

       



<HTML>

<HEAD> <TITLE>
005 - FORMATAÇÃO BÁSICA DA HOMEPAGE
</TITLE>

</HEAD>

<BODY BACKGROUND="BGWite.jpg">

<P> <H3>Inserção de Imagens e
<BR> Atributos do tag FONT </H3>

<P>
<IMG SRC="But05.gif">
<!------------------------------Inserção de Imagem
Neste caso foi selecionada a imagem que está no
arquivo But05.gif, que tem que estar na mesma
pasta do arquivo .htm (ou html) que contém a HP.

O Tag <IMG SCR="...."> (Sigla de Image Source, ou
seja: Orígem da Imagem) sempre requer o nome de um
arquivo de extensão .GIF ou .JPG entre aspas duplas.
------------------------------------------------------>

<BR> A imagem é a dos botões vermelhos usados
<BR> na página Index no início deste curso.

<P> O tag FONT possue dois atributos importantes:
<BR> Tamanho (SIZE) e Cor (COLOR):

<P> <FONT SIZE=1> Fonte Tamanho 1 </FONT>
<BR> <FONT SIZE=5> Fonte Tamanho 5 </FONT>
<BR> <FONT COLOR=Blue> Fonte AZUL </FONT>
<BR> <FONT COLOR=Red> Fonte VERMELHA </FONT>
<BR> <FONT SIZE=4 COLOR=Olive> Fonte 4 VERDE </FONT>
<!---------------------------------Cores de Letras
Cores possíveis por meio do nome de cores em inglês:
White, Aqua, Fuchsia, Blue, Yellow, Lime, Red, Silver
Gray, Teal, Purple, Navy, Olive, Green, Maroon, Black
------------------------------------------------------>

</BODY>

</HTML>

 


Como testar a homepage acima:

[1] Proceder ao download (baixar um arquivo do servidor para seu micro) do arquivo But05.gif (0,2 Kb) para a mesma pasta do computador em que se salvar esta homepage de teste, clicando AQUI. (Ler antes até o item 3, abaixo)

[2] Copiar o texto de <HTML> até </HTML>, para um arquivo novo, no Bloco de Notas do Windows ou em um editor próprio de HTML.

[3] Salvar o arquivo com qualquer nome mas, com extensão .htm ou .html numa pasta (Nome sugerido: HtmlBasico, sem acento) do computador, aberta pelo usuário, e destinada a conter os arquivos de teste deste curso.
Esta tem que ser a mesma pasta do computador em que deve ser salva a imagem But05.gif, que contém a imagem a ser inserida.

Sugestão para o nome do arquivo: AAULAxxx.htm onde xxx é o número acima desta tela. O "A" dobrado é para o arquivo ficar acima dos outros, facilitando sua visualização ao ter que abrí-lo.

[4] Abrir o arquivo por meio de um browser (navegador) para obter a seguinte home page, pressupondo-se que tenha sido feito o download do arquivo BGWite.jpg exigido na Aula 004:

Observe o seguinte:

  1. O tag <IMG SCR="...."> tem muitos atributos, dentre os quais o que mais se usam são:

    • ALIGNMENT: Left (Esquerdo), Right (Direito), Middle (Meio),
      Top (Em cima), Bottom (Em baixo).
    • WIDTH (Largura onde o tamanho máximo recomendado é 580)
    • HEIGHT (Altura onde o tamanho máximo recomendado é 400)
    • BORDER (Espessura da borda; Sem borda BORDER=0)
    • ALT (Nome alternativo, normalmente o nome do arquivo que contém a imagem, no caso da imagem não ser encontrada na pasta da HP ou no endereço fornecido, mas pode ser qualquer texto).
    Os atributos são declarados internamente no tag <IMG SCR="...."> entre < e > após o nome do arquivo entre aspas duplas, mantendo-se sempre um espaço entre eles.

  2. As imagens devem ser de tamanho suficiente para se enquadrar no espaço em tela de pequena resolução (640x480) e estarem contidas em arquivos cujo tamanho em bytes estejam entre 10 a 20 Kb, para que não levem muito tempo para serem baixadas do provedor para o computador do usuário final.

  3. As fontes são próprias do HTML. Para fazer referências a outras fontes conhecidas no Windows, seria necessário o atributo FACE, mas que só seria exibida se a fonte selecionada estivesse instalada no computador do usuário final. Por este motivo o atributo FACE é raramente usado e quando usado é por meio de alternativas, tornando o tag muito complexo.

  4. A cor do texto de toda a HP pode ser também modificada pelo atributo TEXT do tag <BODY>:
    Ex: <BODY TEXT=Navy> que fará com que o texto da HP, onde não modificado pelo tag <FONT>, seja azul marinho.

  5. Os atributos de cor do tag <FONT> e <BODY> podem ser também explícitos em códigos hexadecimais, consultando-se tabelas existentes em livros sobre HTML ou aplicando-se diretamente nos tags com editores próprios para código HTML.

 

Atualização em Agosto/2000 por