Aula de Informática - Profª Crislane Martins - 16/11/20 - Não esqueça de copiar a atividade para o seu caderno.
Melhorando a aparência
Com os tags básicos do primeiro exemplo já é possível criar páginas Web para colocar à disposição dos usuários. O exemplo mostrado há pouco é completo e, se colocado em um servidor Web, pode ser identificado com sua própria URL e acessado de qualquer lugar do mundo. Porém, o primeiro exemplo deixa muito a desejar em apelo visual. Vamos melhorar a aparência deste documento.
Alinhamento
A primeira providência para melhorar a aparência da página é modificar o alinhamento do texto. O alinhamento padrão (com o qual vêm configurados os navegadores) é à esquerda. Para mudar o alinhamento padrão deve-se adicionar o atributo ALIGN dentro dos tags que marcam os títulos e os parágrafos.
<H1 ALIGN=CENTER>Título</H1>
<P ALIGN=CENTER>Este é um parágrafo centralizado.</P>
Desta vez, o tag<P> ganhou uma opção (ALIGN=CENTER). Por isso, é preciso utilizar um tag de fechamento (</P>) para indicar que apenas aquele parágrafo receberá um alinhamento diferente.
Margem
Outro controle sobre o alinhamento dos elementos da página pode ser conseguido através da mudança de margem. O texto sempre começa a uma determinada distância da janela do navegador (um pouco diferente em cada navegador). Às vezes, será necessário aumentar essa margem e fazer com que o texto comece mais para dentro da página. O par de tags<BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a margem. O efeito dessetag pode ser acumulado para conseguir margens maiores. Veja os exemplos:
<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem ainda</BLOCKQUOTE></BLOCKQUOTE>
Texto pré-formatado
Existe ainda uma terceira forma de modificar o alinhamento. É a utilização do par de tags<PRE> e </PRE>. Usando esses tags, todos os espaços e entradas de parágrafo (o resultado da tecla enter) são respeitados. Em um texto normal, qualquer espaço a mais entre duas palavras é ignorado pelo navegador. Com a pré-formatação, pode-se controlar o espaçamento com a barra de espaço e colocar o texto em praticamente qualquer lugar da página.
Apesar da vantagem dessa forma de alinhamento arbitrário, o tag<PRE> muda o tipo de caractere para uma fonte monoespaçada. Uma fonte monoespaçada é aquela na qual todos os caracteres ocupam o mesmo espaço horizontal, ao contrário da fonte proporcional, na qual o “i” ocupa menos espaço do que o “a”, por exemplo.
<PRE>
Este texto está pré-formatado. A fonte é monoespaçada e as entradas de parágrafo,assim como os espaços adicionais, são respeitadas.
Neste caso, a margem esquerda foi aumentada em cinco caracteres.</PRE>
O texto normal recebe fonte proporcional e ignora a presença de espaços a mais no meio do texto. Entradas de parágrafo adicionaistambém são ignoradas.
No Netscape, é possível colocar tags de título den,tro do par <PRE> e </PRE>, permitindo a manutenção da fonte proporcional (Times New Roman, por exemplo). Na maioria dos navegadores, porém, os tags de título são ignorados e se sobrepõem aos tags de pré-formatação, eliminando o seu efeito.
Mudando os caracteres
Estilos de caracteres
Para dar ênfase em determinados trechos de texto, pode-se usar negrito, itálico ou mesmo a fonte monoespaçada citada há pouco.
<B>Texto em negrito</B><P>
<I>Texto em itálico</I><P>
<TT>Texto monoespaçado</TT><P>
Ao contrário de <PRE>, o tag<TT> ignora espaços em branco adicionais e entradas de parágrafo no meio do texto. Em relação ao espaçamento, o tag<TT> funciona exatamente como texto normal.
Os tags de estilo podem ser usados uns sobre os outros, acumulando seus efeitos.
<B><I>Texto em negrito e itálico</I></B><P>
<B><TT>Texto monoespaçado em negrito</TT></B><P>
<I><TT>Texto monoespaçado em itálico</TT></I><P>
<B><TT><I>Texto monoespaçado em negrito e itálico</I></TT></B>
Tamanhos de caracteres
Alguns navegadores aceitam a modificação do tamanho do texto através do atributo SIZE do tag<FONT>.
<FONT SIZE=7>Texto</FONT>
O tag<FONT> pode ser atribuído a qualquer parte do texto, com exceção dos títulos (<H1>, <H2> etc.). Os valores do atributo SIZE variam de 1 a 7, O tamanho normal do texto nos navegadores é equivalente a SIZE=3. Não existe nenhuma relação entre os valores no atributo SIZE e o número de pontos (a unidade utilizada para medir os caracteres).
O tag<FONT> também pode ser utilizado com um atributo diferente para cada letra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra em tamanho maior no início de um parágrafo.
<FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT>
Também é possível modificar o tamanho de todo o texto de uma vez só colocando o tag<BASEFONT> no topo do texto.
<BASEFONT SIZE=5>
Cores diferentes
Alguns navegadores também aceitam modificar a cor padrão do texto e do fundo da janela do documento. Essa definição é feita em atributos do tag<BODY>. Os atributos são BGCOLOR e TEXT.
<BODY BGCOLOR=FFFFFF TEXT=000000>
ou
<BODY BGCOLOR=WHITE TEXT=BLACK>
O exemplo acima produz uma página com fundo branco e texto na cor preta. Os valores dos atributos são definidos em uma tabela de cores no padrão RGB ou pelo nome da cor.
Pode-se definir ainda a cor de determinados trechos de texto, com o atributo color no tag<FONT>.
<FONT COLOR=FFFFFF>Texto na cor branca</FONT>
ou
<FONT COLOR=WHITE>Texto na cor branca</FONT>
Dessa forma, é possível ter texto de várias cores na mesma página.
<FONT COLOR=WHITE>Textoembranco</FONT>, <FONT COLOR=BLUE>azul</FONT>, <FONT COLOR=GREEN>verde</FONT> e <FONT COLOR=RED>vermelho</FONT>
Mudando o tipo de caractere
O Internet Explorer, navegador da Microsoft lançado no segundo semestre de 1995, trouxe a novidade de permitir a mudança do tipo de caractere do texto. O autor de uma página Web pode definir qual será o tipo de determinada parte do texto, mas o usuário precisa ter aquela fonte instalada no computador. Sugere-se a escolha de tipos comuns, como o Arial, que vem junto com o Windows.
<FONT FACE=ARIAL><H1>Título principal</H1>
Este é o texto do primeiro exemplo. Para dividir os parágrafos, usa-se o tag<P>.<P>
Este é o segundo parágrafo. Para colocar um novo título depois de um parágrafo não é necessário (tampouco funciona) colocar o tag<P>.<p>
<H2>Título secundário</H2>
Para abrir uma linha, usa-se o tag<br>,<br>
certo?</FONT>
<H3>Uma lista</H3> <UL> <LI>Item 1 <LI>Item 2 <LI>Item 3 </UL>
Hyperlinks
Até agora produzimos apenas um documento bastante simples, que poderia ser composto com recursos muito mais sofisticados em qualquer processador de texto. Mas neste livro estamos falando de documentos de hipertexto, que podem fazer ligações com outros textos.
Os pontos que ligam esses hipertextos são chamados de hyperlinks, links ou âncoras de hipertexto. O tag que indica a região a ser tratada como um hyperlink é o par <A> e </A>. Dentro desse tag, na forma de atributo, é colocada a referência ao arquivo ligado. A referência indica a URL do documento. Quando o usuário clicar sobre o trecho realçado pela âncora de hipertexto, o arquivo ligado será requisitado ao servidor e mostrado na janela do navegador.
<P ALIGN=CENTER>
Uma ligação de hipertexto:</P>
<P ALIGN=CENTER>
<A HREF=http://www.seed.net.tw/~milkylin/ htmleasy.html>HTML Easy! Pro home page</A>
</P>
Neste exemplo, o texto HTML Easy! Pro home page aparece no navegador realçado de alguma forma, normalmente em uma cor diferente e sublinhado. O cursor do mouse se transforma em uma mãozinha quando colocado sobre o texto realçado. Ao clicar no link, o arquivo htmleasy.html, do diretório /~milkylin/ do servidor www.seed.net.tw será transmitido pela rede e mostrado na tela.
Colocando uma URL no atributo HREF do tag<A>, pode-se ligar uma página com qualquer outro documento disponível na Internet. Pode-se fazer uma página com uma lista de páginas preferidas da rede com suas devidas ligações de hipertexto.
<H1>Lista de recursos sobre HTML</H1>
<UL>
<LI><A HREF = "http://www.willamette.edu/html-composition/ strict-html.html">Composing Good HTML</A>
<LI><A HREF = "http://www.w3.org/hypertext/WWW/Provider/Style/ Introduction.html">CERN's style guide for online hypertext</A>
<LI><A HREF = "http://www.ucc.ie/info/net/ htmldoc.html">How to Write HTML Files</A>
<LI><A HREF = "http://melmac.corp.harris.com/ about_html.html">Introduction to HTML</A>
<LI><A HREF = "http://kuhttp.cc.ukans.edu/ lynx_help/HTML_quick.html">The HTML Quick Reference Guide</A>
<LI><A HREF = "http://www.w3.org/hypertext/WWW/ MarkUp/MarkUp.html">The official HTML specification</A>
</UL>
Neste exemplo, as URLs estão entre aspas duplas. Isso significa que o servidor vai considerar a diferença entre maiúsculas e minúsculas (o que se chama de sensitivo à caixa) na hora de localizar o arquivo. Se no exemplo acima o arquivo HTML_quick.html estiver gravado no servidor como html_quick.html, o documento não será localizado e o usuário receberá uma mensagem de erro.
Nem sempre é necessário colocar uma URL completa em uma âncora de hipertexto. É possível indicar apenas o nome do servidor.
<UL>
<LI><A HREF=www.apple.com>Apple Computer</A>
<LI><A HREF=www.thespot.com>The Spot</A>
</UL>
Neste exemplo, os servidores da Apple e do The Spot se encarregarão de indicar qual é a página que deve ser carregada. Essa página principal é chamada normalmente de home page.
Quando a âncora apontar para uma página armazenada no mesmo servidor, não é necessário colocar o endereço da máquina. Se o documento estiver no mesmo diretório, basta indicar o nome do arquivo.
<A HREF=exemplo1.htm>Exemplo 1</A>
O link acima chama o arquivo exemplo1.htm, que deve estar no mesmo diretório da página. Se o documento estiver em um subdiretório de onde está o arquivo que contém a âncora, é preciso indicá-lo.
<A HREF=exemplos/exemplo1.htm>Exemplo1</A>
Digamos que agora seja necessário traçar o caminho de volta, colocando uma âncora no arquivo exemplo1.htm para a página anterior.
<A HREF=../ancora.htm>Volta para exemplo de âncora</A>
A referência cruzada entre arquivos armazenados no mesmo computador mas em diretórios diferentes merece bastante atenção. Digamos que existam dois diretórios colocados no mesmo nível. Um chamado musica e outro, comida. Um arquivo chamado rock.htm, do diretório musica deve fazer uma referência ao arquivo feijoada.htm, do diretório comida. A âncora de hipertexto do documento rock.htm deve ficar assim:
<A HREF=../comida/feijoada.htm>Tudo sobre feijoada</A>
Também pode-se fazer uma referência a uma outra parte do mesmo documento. Isso é particularmente útil quando se está fazendo um índice de um texto. A âncora para um texto no mesmo documento fica assim:
<A HREF=#cap1>Capítulo 1</A>
Enquanto o alvo do link fica desta forma:
<A NAME=cap1>Capítulo 1</A>
Neste exemplo, quando o usuário clicar sobre o link <A HREF=#cap1>Capítulo 1</A>, ele será remetido ao ponto onde está a referência <A NAME=cap1>Capítulo 1</A>. A parte do texto que é referenciada (o alvo de um link) não fica realçada como os hyperlinks. Além de ser invisível, não é obrigatório que exista um link apontando para ela.
Pode-se colocar referências do tipo <A NAME> em um documento longo apenas para que outras pessoas produzindo páginas Web possam fazer ligações para determinadas partes do texto.
Para citar uma determinada parte de um outro texto, a referência é:
<A HREF=exemplo.htm#capitulo1>Capítulo 1 do Exemplo</A>
Sendo que exemplo.htm é o nome do arquivo referenciado e capítulo1 é a referência a uma parte daquele texto.
Cores dos hyperlinks
Da mesma forma que é possível definir cores diferentes para o fundo e o texto, pode-se mudar a cor dos links. As cores das âncoras de hipertexto variam de acordo com a sua condição: visitados, nunca visitados e ativos. Os navegadores sabem quais foram os hyperlinks já visitados pelo usuário em um determinado período de tempo. Por isso, a cor dos links já visitados deve ser diferente da cor das referências nunca visitadas. Além disso, o link pisca em uma cor ainda diferente dessas duas logo depois que é clicado pelo usuário. A cor dos links é definida no tag<BODY>.
<BODY LINK=RED ALINK=BLUE VLINK=GREEN>
Onde:
LINK determina a cor dos links não visitados
ALINK determina a cor que os links devem piscar quando clicados
VLINK determina a cor dos links já visitados
Neste exemplo, os links nunca visitados ficam em vermelho, os ativos (quando clicados) em azul, e os visitados em verde. Para não confundir os usuários, a cor dos links já visitados deve ser uma versão mais clara da cor das ligações ainda não visitadas.
Imagens
Agora que já explicamos como fazer um documento hipertexto, podemos finalmente incluir imagens nessa página Web. Para inserir uma imagem basta indicar o nome do arquivo dentro do tag<IMG>.
Aqui você vê uma imagem:<P>
<IMG SRC=imagem.gif>
Note que a imagem...<P>
Neste exemplo, a imagem imagem.gif aparece alinhada entre as frases “Aqui você vê uma imagem:” e “Note que a imagem...”.
Se a imagem estiver em um diretório diferente do arquivo de texto, é preciso especificá-lo na referência. Recomenda-se que as imagens sejam colocadas em um diretório separado para facilitar a manutenção dos arquivos. Exemplo:
Aqui você vê uma imagem:<P>
<IMG SRC=imagens/imagem.gif>
Note que a imagem...<P>
Alinhamento da imagem
No exemplo anterior, a imagem ficou alinhada à esquerda da tela e o texto imediatamente posterior a ela alinhou-se com o canto inferior direito da imagem. Esse é o alinhamento padrão de textos com imagens. É possível mudar o alinhamento utilizando o atributo ALIGN= dentro do tag<IMG>.
Aqui você vê uma imagem:<P>
<IMG SRC=imagens/imagem.gif ALIGN=TOP>
Note que a imagem...<P>
Agora a imagem ficou alinhada à esquerda e com o topo do texto “Note que a imagem...”. Para alinhar a imagem à esquerda, mas com o texto no centro, usa-se ALIGN=MIDDLE.
O texto utilizado imediatamente depois da imagem nos exemplos anteriores é curto. Se for usado um texto mais longo, apenas uma linha ficará alinhada com a imagem. O restante será jogado para a linha seguinte. Exemplo:
Aqui você vê uma imagem:<P>
<IMG SRC=imagem.gif align=top>
Note que a imagem está alinhada à esquerda. O texto imediatamente posterior à imagem fica alinhado no canto superior direito. Mas apenas uma linha acompanha a imagem. O restante do texto é jogado para a linha seguinte.<P>
Exemplo 12: quebra de linha depois da imagem
Este problema pode ser contornado utilizando outros atributos de alinhamento que fazem a imagem “flutuar” ao lado do texto. Exemplo:
Aqui você vê uma imagem:<P>
<IMG SRC=imagem.gif ALIGN=LEFT>
Note que a imagem está alinhada à esquerda. Alguns navegadores, como o Netscape, permitem colocar o texto em torno da imagem, independente de seu comprimento. É como se a imagem estivesse flutuando no meio do texto.<P>
Neste exemplo, a imagem ficou alinhada à esquerda e permitiu que todo o texto imediatamente posterior ficasse alinhado à direita. Para alinhar a imagem à direita, usa-se o atributo ALIGN=RIGHT. A lista completa das formas de se alinhar uma imagem está no Apêndice B.
No entanto, quando usa-se os atributos ALIGN=LEFT ou ALIGN=RIGHT, todo o texto imediatamente posterior é puxado para o lado da imagem. Se for necessário interromper o fluxo de texto ao lado da imagem, pode-se usar o tag<BR> com o atributo CLEAR=ALL.
Aqui você vê uma imagem:<P>
<IMG SRC=imagem.gif ALIGN=LEFT>
Note que a imagem está alinhada à direita. O texto está contornando a imagem, mas somente até este ponto. <BR CLEAR=ALL>A partir daqui o texto é jogado para a próxima margem livre em qualquer um dos lados da janela.<P>
