Manual Completo de HTML
Uma página Web simples Apesar dessa aparente sofisticação,
as páginas Web não passam de documentos de texto simples. Podem
ser produzidas com qualquer editor de texto, como o Notepad do
Windows. A diferença é que as páginas Web contêm algumas
marcas especiais para determinar o papel de cada elemento dentro
do texto. Alguns elementos são marcados como títulos, outros
como parágrafos. As marcações são usadas também para indicar
os links que levam a outros documentos na rede. Essas marcas são
chamadas de tags e estão especificadas dentro da linguagem
utilizada para criar as páginas Web, HTML. O mínimo que você
precisa saber sobre HTML O primeiro conceito que deve-se ter em
mente ao projetar páginas Web é que HTML não foi criada para
controlar a aparência dos documentos, ao contrário dos
processadores de texto e programas de layout de página. Como
dissemos há pouco, os tags de HTML apenas informam ao navegador
o que são os elementos que estão na página. Eles dizem, por
exemplo, que um determinado trecho é o título principal do
documento e outro é um item de lista. A formatação do trecho
é deixada para o navegador. Cada navegador mostra a página de
uma forma um pouco diferente, o que dificulta o trabalho de
programação visual na Web. Para complicar ainda mais, cada
usuário pode modificar a configuração padrão de seu navegador
para que o seu programa mostre o texto na fonte (tipo de
caractere) que quiser. Em compensação é muito simples criar
uma página básica para colocar na Internet com HTML. Neste
capítulo, apresentamos um exemplo enxuto, que aos poucos ficará
mais sofisticado. Software necessário para esta seção Como a
página Web é um documento de texto comum, pode-se utilizar um
editor de texto simples, como o Notepad do Windows. Existem
editores de HTML que podem facilitar a confecção das páginas.
É importante notar que os exemplos descritos aqui devem ser
gravados no formato texto e com a extensão .htm ou .html.
Portanto, se for utilizado um processador de texto, como o Word,
WordPerfect ou WordStar, o arquivo deve ser salvo no formato
"somente texto". O navegador de Web não vai entender
um arquivo gravado nos formatos específicos dos processadores de
texto (.doc, por exemplo). Será necessário também um programa
de desenho para criar as imagens, como o Paintbrush do Windows ou
um mais sofisticado, como o Photoshop. Também é preciso cuidado
na hora de gravar as imagens. O formato mais aceito pelos
navegadores é o GIF. O Paintbrush do Windows grava arquivos
apenas nos formatos BMP ou PCX. Será necessário um outro
programa para fazer a conversão, como o Lview. Veja a lista dos
programas recomendados para edição em HTML no capítulo
Programas
Este é o texto do primeiro exemplo. Para dividir os parágrafos, usa-se o tag <P>.
Este é o segundo parágrafo. Para colocar um novo título depois de um parágrafo não é necessário colocar o tag <P>.
Para abrir uma linha, usa-se o tag <br>,
certo?
Observação: a representação dos tags
e
foi escrita na forma de código (<P> e <BR>,
respectivamente). Do contrário, essa representação não seria
mostrada na página, mas interpretada com os efeitos reais de
cada um dos tags. Visualizando o exemplo no navegador Assim que o
exemplo for salvo no editor de texto com a extensão .htm ou
.html, pode-se visualizá-lo em um navegador. Para abrir o
arquivo, deve-se escolher Open, Open File ou Open Local File no
menu File do navegador. Alguns navegadores tem um botão Open na
barra de botões. . Como funcionam os tags O primeiro exemplo
mostra vários trechos de texto marcados por códigos colocados
entre os caracteres
serve para aumentar a margem. O efeito desse tag pode ser acumulado para conseguir margens maiores. Veja os exemplos: Texto com mais margem
Texto com mais margem ainda
Texto pré-formatado Existe ainda uma terceira
forma de modificar o alinhamento. É a utilização do par de
tags e. 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 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. 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.O texto normal recebe fonte
proporcional e ignora a presença de espaços a mais no meio do
texto. Entradas de parágrafo adicionais também são ignoradas.
No Netscape, é possível colocar tags de título den,tro do par
e, 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.
Texto em negrito
Texto em itálico,Texto monoespaçado,Ao
contrário de , o tag ignora espaços em branco adicionais e
entradas de parágrafo no meio do texto. Em relação ao
espaçamento, o tag funciona exatamente como texto normal. Os
tags de estilo podem ser usados uns sobre os outros, acumulando
seus efeitos.
Texto em negrito e itálico
Texto monoespaçado em negrito
Texto monoespaçado em itálico
Texto monoespaçado em negrito e
itálico Tamanhos de caracteres Alguns navegadores
aceitam a modificação do tamanho do texto através do atributo
SIZE do tag . Texto O
tag pode ser atribuído a qualquer parte do texto, com exceção
dos títulos (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). Portanto o melhor é
experimentar todos os tamanhos e avaliar o resultado. Texto com
FONT SIZE=7 Texto com FONT SIZE=6 ,Texto com FONT SIZE=5,Texto
com FONT SIZE=4,Texto com FONT SIZE=3,Texto com FONT SIZE=2,Texto com
FONT SIZE=1 O tag 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. Texto Também é
possível modificar o tamanho de todo o texto de uma vez só
colocando o tag no topo do texto. 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 . Os atributos são BGCOLOR e TEXT. ou 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 . ou
Dessa forma, é possível ter texto de várias cores na mesma
página. azul, verde
e vermelho 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.
Este é o texto do primeiro exemplo. Para dividir os parágrafos, usa-se o tag <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>.
Para abrir uma linha, usa-se o tag <br>, certo?
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 e . 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.
Uma ligação de hipertexto:
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 , 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.
este exemplo, as URLs estão entre aspas. 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.
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. Exemplo 1 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. Exemplo1 Digamos que agora seja necessário traçar o caminho de volta, colocando uma âncora no arquivo exemplo1.htm para a página anterior. Volta para exemplo de âncora 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: Tudo sobre feijoada 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: Capítulo 1 Enquanto o alvo do link fica desta forma: Capítulo 1 Neste exemplo, quando o usuário clicar sobre o link Capítulo 1, ele será remetido ao ponto onde está a referência Capítulo 1. 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 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 é: Capítulo 1 do Exemplo 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
.
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. magens 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. Aqui você vê uma imagem:
Note que a imagem...
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:
Note que a imagem...
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 .
Aqui você vê uma imagem:
Note que a
imagem...
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:
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.
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:
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.
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
com o atributo CLEAR=ALL. Aqui você vê uma imagem:
Note que a
imagem está alinhada à direita. O texto está contornando a
imagem, mas somente até este ponto.
A partir daqui o texto é jogado para a próxima margem livre em
qualquer um dos lados da janela.
Borda É possível colocar uma borda em volta da imagem. O atributo é BORDER. O valor da borda é expresso em pixels. Aqui você vê uma imagem:
Note que a imagem...
Texto alternativo De nada vai adiantar caprichar na produção
de uma imagem, se a pessoa que está vendo as páginas utiliza um
navegador incapaz de mostrar imagens (sim, eles existem e são
bastante utilizados, principalmente o lynx). Outros usuários
também ajustam o navegador para não carregar imediatamente as
imagens. Por causa de conexões lentas, algumas pessoas preferem
receber o texto e depois pedir as imagens. Mas para isso elas
precisam saber do que se tratam as imagens. Essa é a função do
texto alternativo. Pode-se colocar o título ou a melhor
descrição possível de uma imagem utilizando o atributo alt: No exemplo acima, o
navegador foi ajustado para não carregar a imagem imediatamente
ao carregar a página. O texto alternativo aparece junto com o
ícone de imagem. Margens Pode-se controlar o espaço em volta da
imagem colocando o valor em pixels da margem desejada. É
possível definir as margens separadamente ou em conjunto. Para
mais espaço em cima e embaixo da imagem, o atributo é VSPACE.
Se o problema for espaço dos lados da imagem, usa-se o atributo
HSPACE para definir as margens horizontais. 
Cada um desses
atributos (HSPACE e VSPACE) adiciona espaço nas duas faces da
imagem (em cima e em baixo e à direita e à esquerda). Não há
como definir uma margem maior apenas à esquerda ou somente na
parte inferior. Formatos e interlaceamento Os formatos de imagem
mais aceitos pelos navegadores são GIF e JPG. A vantagem do
formato GIF é que se pode gravar na opção GIF89 para conseguir
que a imagem seja carregada progressivamente, um efeito conhecido
como interlaceamento. Com o carregamento progressivo, o usuário
tem a impressão da imagem estar sendo carregada mais rápido. O
formato JPG oferece um fator de compressão maior do que o GIF.
As imagens ocupam menos espaço em bytes. Mas o processo de
compressão do JPG pode causar alguma perda de qualidade à
imagem. Como regra geral, o formato JPG deve ser usado em imagens
fotográficas e o GIF em imagens criadas em computador ou
desenhadas. A compressão do formato GIF se dá ainda melhor com
imagens com poucas cores e trechos contínuos de uma cor só.
Dimensões Se as dimensões da imagem forem colocadas na
referência, o usuário terá a impressão de que a página foi
carregada mais rápido. Fornecendo as dimensões, o navegador
reserva o espaço para a imagem e vai carregando o texto para que
o usuário possa começar a ler. Depois de carregado o texto, as
imagens começam a ser mostradas. Deve-se escrever a referência
de imagem neste formato: . Tabelas Como ainda não existem formas mais
sofisticadas de controlar o posicionamento de imagens e texto, o
uso de tabelas tornou-se um recurso essencial para dispor os
elementos da página de maneira mais criativa. Uma tabela simples
As tabelas são compostas de linhas, dentro das quais são
colocadas células com o conteúdo. Dentro das células pode-se
colocar texto, imagens ou até mesmo outras tabelas. Uma linha
pode conter várias células, formando-se então uma tabela com
várias colunas. Os tags para construir uma tabela são:
| e |
: para indicar o início e o fim de uma tabela e : para indicar o início e o fim de uma linha e : para indicar o início e o fim de uma célula-título e : para indicar o início e o fim de uma célula A única diferença entre o tag e é que o primeiro marca o texto da célula com ênfase. Os navegadores interpretam essa ênfase como negrito. Nos exemplos deste livro, não utilizamos o tag , já que a ênfase pode ser conseguida com tags como e . Não é obrigatório colocar os tags de fechamento dos elementos da tabela (, e ), mas estes tags são úteis para entender melhor a estrutura de linhas e células. Nos exemplos seguintes adicionamos uma borda à tabela. O atributo da borda é colocado dentro do tag
.
O exemplo acima mostra uma tabela com duas linhas e duas colunas. O número de colunas é definido pelo número de células presentes nas linhas. É possível expandir as células para que elas ocupem o espaço de mais de uma coluna ou linha.
ou
A solução necessária para fazer uma célula expandida é diferente em cada um dos exemplos anteriores. No caso da célula expandida na largura de duas colunas, ela ficou em uma linha diferente das células 1 e 2. No segundo exemplo, para deixar a célula expandida da altura de duas linhas foi preciso colocá-la na mesma linha das células 1 e 2. Dimensões da tabela Além de controlar a largura da borda (com o atributo BORDER), é possível definir as dimensões (em pixels) de toda a tabela, espaço entre células e as margens dentro das células. Todos esses controles são feitos através de atributos dentro do tag
|
||||||||||||||||||||||||||||||||||||