ATENÇÃO: este tutorial foi publicado originalmente em 2002; algumas informações podem estar desatualizadas
Neste capítulo mostramos páginas que utilizam algumas das dicas apresentadas neste livro e contornam de forma criativa as limitações de HTML.
c|net Um dos sites mais acessados de 1995, o c|net combina gráficos simples para aumentar a velocidade de carregamento com uma formatação discreta, permitindo que um grande número de navegadores sejam capazes de visualizar a página da mesma forma.
Exemplo 37: c|net: gráficos simples garantem carregamento rápido Imagens As imagens utilizados no c|net têm sempre poucas cores e formato é simples, normalmente retangular ou redondo, sem sombreados nas letras. Cada página recebe apenas uma imagem sofisticada, como vemos acima. O fundo também recebeu uma imagem para dar o tom de amarelo característico do site.
Texto monoespaçado Como alternativa à fonte padrão dos navegadores, a c|net usa bastante o texto monoespaçado, inclusive nos links de títulos de reportagens.
Alinhamento O alinhamento centralizado, além de fugir do padrão (à esquerda) garante um bom balanceamento à página indepentemente da largura da janela do navegador.
Um trecho do documento HTML da c|net <html>
<head>
<title>c|net online front door</title>
</head>
<body background="/Images/Backgrounds/bkg.yell.gif" vlink="#006633">
<p align=center>
<font size = 5>
<tt>
<strong>
292,297 registered members and growing<p align=center>
<a href="/Central/Features/Future/"><img border=0 src="/Images/Cv/cv.future1.gif" width=240 height=165 alt="the future of the Net"></a>
Minc Um bom exemplo de como combinar imagens com o fundo da página.
Exemplo 38: a combinação de imagem com fundo do Minc A imagem da camiseta com um trator desta página foi produzida com o fundo transparente. Criada no programa de desenho sobre um fundo de uma cor que não aparece em nenhuma parte do desenho, a imagem passou por um programa como o LView Pro para determinar a cor de fundo. O arquivo de imagem, na verdade, é assim:
Exemplo 39: o arquivo original de imagem do Minc Southern Utah Esta página mostra uma combinação simples de uma tabela com imagens dentro das células.
Exemplo 40: imagens dentro de células A tabela tem quatro linhas, cada uma com três células. Dentro de cada célula existe uma imagem. As imagens contém referências. Ao clicar em uma imagem, o usuário é levado para outra página.
Como as imagens são links para outras páginas, as bordas das imagens foram eliminadas com o atributo BORDER=0 para que não recebessem uma borda da cor dos links. O atributo ALT foi utilizado para permitir que mesmo navegadores sem capacidade de mostrar imagens pudessem aproveitar a página. As imagens também receberam os atributos VSPACE e HSPACE para adicionar espaço entre elas.
<html>
<Title>Southern Utah</Title>
<BODY Background="/soutah/stone.gif" rgb="#000000" text="#000000" link="#0000ff" vlink="#ff0000">
<CENTER>
<FONT SIZE=+4>Southern Utah</FONT>
</CENTER>
<CENTER>
<TABLE>
<TR>
<TD><A HREF="/soutah/region/index.jhtml"> <IMG ALT=Region hspace=1 vspace=1 border=0 SRC="dixiebutton.gif"></A></TD>
<TD><A HREF="/soutah/yellow/index.jhtml"> <IMG ALT=Yellow Pages hspace=1 vspace=1 border=0 SRC="redwhitebutton.gif"></A></TD>
<TD><A HREF="/soutah/art/index.jhtml"> <IMG ALT=Art hspace=1 vspace=1 border=0 SRC="redrockbutton.gif"></A></TD>
</TR>
<TR>
<TD><A HREF="/medical/index.jhtml"> <IMG ALT=Medical hspace=1 vspace=1 border=0 SRC="zionbutton.gif"></A></TD>
<TD><A HREF="/soutah/recreation/index.jhtml"> <IMG ALT=Recreation hspace=1 vspace=1 border=0 SRC="sandsnowbutton.gif"></A></TD>
<TD><A HREF="/soutah/education/index.jhtml"> <IMG ALT=Education hspace=1 vspace=1 border=0 SRC="brycebutton.gif"></A></TD>
</TR>
<TR>
<TD><A HREF="/soutah/sports/index.jhtml"> <IMG ALT=Sports hspace=1 vspace=1 border=0 SRC="sandarchbutton.gif"></A></TD>
<TD><A HREF="/soutah/travel/index.jhtml"> <IMG ALT=Travel/Tourism hspace=1 vspace=1 border=0 SRC="sunsetbutton.gif"></A></TD>
<TD><A HREF="/realnet/index.jhtml"> 0<IMG ALT=Real Estate hspace=1 vspace=1 border=0 SRC="delarchbutton.gif"></A></TD>
</TR>
<TR>
<TD><A HREF="/soutah/entertainment/index.jhtml"> <IMG ALT=Entertainment hspace=1 vspace=1 border=0 SRC="mtnbutton.gif"></A></TD>
<TD><A HREF="/soutah/business/index.jhtml"> <IMG ALT=Business hspace=1 vspace=1 border=0 SRC="reflectbutton.gif"></A></TD>
<TD><A HREF="/soutah/nationalparks/index.jhtml"> <IMG ALT=National Parks hspace=1 vspace=1 border=0 SRC="sunsetlakebutton.gif"></A></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
@art Gallery A galeria @art é um bom exemplo de como utilizar texto pré-formatado. Com o texto pré-formatado pode-se controlar o alinhamento da porção de texto e das imagens.
Exemplo 41: alinhamento utilizando pré-formatação O texto foi alinhado à direita da página utilizando o tag <PRE> e uma seqüência de tabulações idênticas para cada linha. A imagem está alinhada à esquerda porque não recebeu nenhuma tabulação.
<TITLE>@art gallery</TITLE>
<body bgcolor=#FFFFFF>
<PRE>
Welcome to @art, an electronic art gallery affiliated with the School of Art and Design, the University of Illinois at Urbana-Champaign. <IMG ALIGN=bottom SRC="smboxlogo2.gif"> This gallery has been implemented by the faculty members Kathleen.
Índice Continuação: Tabela de acentos 
IMPRIMIR
ENVIAR POR EMAIL
COMUNICAR ERRO
