<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>
O Tag <IMG SCR="...."> (Sigla de Image Source, ou
<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.
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.
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:
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.
Observe o seguinte:
O tag <IMG SCR="...."> tem muitos atributos, dentre os quais o que mais se usam são:
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.
- 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).
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.
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.
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.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.