1. INTRODUÇÃO. 1.1 Como são as marcações (tags) HTML?

Transcrição

1 HTML

2 1. INTRODUÇÃO HTML abreviação de HiperText Markup Language é a linguagem de programação que usamos para criar uma página Web, que, por sua vez, será composta de textos e comandos especiais, chamados de tags. Trata-se de uma linguagem muito simples, que tem como finalidade básica formatar as imagens e os textos exibidos e criar ligações entre páginas Web, criando, assim, documentos com o conceito de hipertexto. Como em qualquer outra linguagem, o programador deve escrever o códigofonte seguindo as regras de sintaxe da linguagem. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos ou tags do código para formatar e acessar recursos da Web. Em março de 1989, Tim Berners-Lee, do European Laboratory for Particle Physics (mais conhecido como CERN), propôs um novo conjunto de protocolos para um sistema de distribuição de informações da Internet, a ser usado entre os diversos grupos de pesquisa em física de altas energias. Os protocolos da WWW foram logo adotados por outras organizações, as quais formaram um consórcio chamado de W3 Consortium, que uniu seus recursos de modo a prosseguir com o desenvolvimento de padrões WWW. Esse consórcio é liderado pelo MIT (Massachusetts Institute of Technology), pelo CERN e pelo INRA (French National Institute for Research in Computer Science and Control). Ele propõe recursos mais recentes e sofisticados de HTML, avalia sugestões e implementações alternativas e publica novos níveis de versões do padrão HTML. Existem vários programas para editoração HTML, que tornaria nosso trabalho muito mais fácil e nos acomodaria como usuários-finais que não entendem o que estão fazendo. Por isso, usaremos o Bloco de Notas (NotePad) do Windows. 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 primeiro conceito que se deve 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, as tags de HTML apenas informam ao navegador o que são os elementos que estão na página. Elas 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 que, aos poucos, ficará mais sofisticado. 1.1 Como são as marcações (tags) HTML? As marcações do HTML tags consistem no sinal < (o símbolo de menor que ), seguido pelo nome da marcação e fechado por > (o símbolo de maior que ). De um modo geral, as tags aparecem em pares, como: <H1> Cabeçalho</ H1>. O símbolo que termina uma determinada marcação é igual àquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente. No exemplo, <H1> avisa ao cliente Web para iniciar a formatação do primeiro nível de cabeçalho e </H1> avisa que o cabeçalho acabou. Há exceções a esse funcionamento em pares das marcações. Por exemplo, a que indica um final de parágrafo: <P> não necessita de uma correspondente: </P>. A marcação que indica quebra de linha <br> também não precisa de uma correspondente, e outras tais como <hr> e <li>. Para estudarmos HTML, usaremos o já conhecido Bloco de Notas e um browser (Internet Explorer ou Netscape). Para os nossos exemplos, será usado o Internet Explorer. 103

3 1.2 Estrutura básica de uma página Uma página HTML deve ser dividida em duas partes: Head (cabeça) e Body (corpo). Veja um exemplo de estrutura, construindo sua primeira página. Não é recomendável que os documentos Web contenham acentos. Ainda que todos os navegadores existentes entendam a presença de um caractere acentuado, existem ocasiões em que o texto em HTML pode ficar truncado. Por exemplo, quando alguém copia uma página Web e a envia para outra pessoa através de correio eletrônico. Para contornar esse problema, existe uma tabela de códigos que substituem os acentos. Os navegadores transformam esses códigos em caracteres acentuados, e o documento pode ser transmitido por qualquer meio. Sugestão: o documento pode ser escrito com os acentos e, antes de ir para o servidor da Web, é submetido a uma macro de processador de texto para substituí-lo pelos códigos HTML. Tags usadas no 1º exemplo: Vá até a opção Arquivo Salvar Como do seu Bloco de Notas, e salve o exemplo acima como AULA. HTM. Ao abrir o arquivo no browser, sua primeira página ficou assim: A tag <HTML> será usada em conjunto com a tag de fechamento </HTML> e será colocada no início e no final do documento, delimitando a área onde serão colocadas as tags HTML. A tag <HEAD> também terá sua tag de fechamento </HEAD> e servirá para delimitar uma área de cabeçalho com poucas tags (não é necessário ter essa tag para sua página funcionar). 1.3 Títulos Todo documento em HTML deve possuir um título. De um modo geral, o título aparece em lugar separado da página (por exemplo, no alto da tela no Internet Explore), e é utilizado para identificar o documento em outros contextos (por exemplo, buscas do Google). É interessante que o título possa sugerir claramente o conteúdo do documento. A tag <TITLE> será usada dentro das tags <HEAD> e servirá apenas para colocar um título que aparecerá na barra de título do seu browser (não se esqueça do </TITLE>).

4 1.4 Parágrafos A marcação <p> é utilizada para definir o início de um novo parágrafo, deixando uma linha em branco entre cada parágrafo. HTML não reconhece o caractere de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem o início de um novo parágrafo mediante a marcação apropriada. Existem algumas exceções. Por exemplo, inserindo uma marcação de parágrafo depois de <P>, <lli>,<hy> e outras, esta será ignorada. 1.5 Cabeçalhos Cabeçalhos normalmente são usados para títulos e subtítulos de uma página. HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 de maior destaque. Cabeçalhos são exibidos em letras maiores e em negrito. O primeiro cabeçalho em cada documento deve estar marcado como <H1>. Atenção: ao definir o tamanho de um cabeçalho, você não está definindo o tamanho da letra (fonte 10, fonte 14). Você apenas define que ele aparecerá com maior tamanho e destaque que o resto do texto. O tamanho exato com que ele será visualizado é definido pelo programa visualizador de HTML (browser) de cada pessoa que acessar a informação. As notações relativas a cabeçalhos são: <Hy>Texto do cabeçalho </Hy>, onde y é um número entre 1 e 6 especificando o nível do cabeçalho. O conjunto de notações possíveis é o que se segue: <H1>Headings</H1> <H2>Headings</H2> <H3>Headings</H3> <H4>Headings</H4> <H5>Headings</H5> <H6>Headings</H6> 1.6 Quebras de linha A marcação <br> faz uma quebra de linha sem acrescentar espaço extra entre as linhas. Veja a diferença do uso de <p> e <br>, nos exemplos a seguir. <! Início do Documento HTML> <html> <head> <title>melhorando Minha Home Page</title> <meta name= author content= NMBS Informática > <meta name= keywords content= html, homepages > </head> <! Início do Corpo da Página> <body> <h1>este é o título Principal</h1> <h2>este é o título Secundário</h2> <h3>estou adorando criar páginas</h3> <hr> <p>este é o 1º Primeiro Parágrafo <br> Esta é 2ª Linha do 1º Parágrafo <p>com este recurso inicio um parágrafo<br> E com este recurso quebro uma linha <hr> <! Fim do Corpo da Página> 105

5 </body> Marcação Função Características </html> <! Fim do Documento HTML> Dica: chamar de forma automática uma outra página, com o comando <meta>, que é muito usado quando uma página mudou de endereço. Exemplo: <meta httpequiv = Refresh content = 16; URL = >. O comando <meta> tem que ficar dentro do comando <head>. O valor 16 representa o tempo (em segundos) de espera para mudar para outra página, pois nela pode haver alguma mensagem que o usuário precisa ler. A URL indica o endereço da página para onde o usuário será transportado. Marcação Alguns comandos utilizados neste capítulo: <HTML></HTML> Função Delimita o documento (início e fim) Características Esta marcação deve ser inserida imediatamente no início e no final de todo arquivo HTML. <! > <meta> Comentário Marca as metas. Servem para você especificar o autor, as palavras-chaves, a descrição da página, etc. Indicação de quaisquer comentários, tais como nome do autor, data de criação, software utilizado para autoria, etc. Não é visualizado na página HTML (só quando solicitado o source file ).Também deve aparecer na área definida como head do documento. Dentro da tag <meta>, há os comandos name e content. No comando name! você especifica qual informação quer dar, e no content você descreve a informação<meta name = author content = NMBS Informática ><meta name= keywords content = html, homepages >. <HEAD></HEAD> <TITLE></TITLE> Cabeçalho Título do documento O cabeçalho de um arquivo HTML é uma área para inserção de informações que não serão visíveis na página HTML, tais como title e comentários. Nome a ser atribuído ao documento HTML, mas que não será visualizado na página. Deve sempre aparecer na área definida como head do documento. <BODY></BODY> Corpo do documento Delimita o corpo do documento. Vem imediatamente abaixo da área definida como head. Essa marcação deve ser fechada somente ao final do documento, imediatamente seguida da marcação </html>.

6 Exemplo de como devem aparecer distribuídas no arquivo as marcações acima citadas: <html> <head> <title> Título do documento</title> <! autor: Aluno de IMI> <! última atualização: 30/02/2001> </head> <body> Blá blá blá... aqui entra o conteúdo da página... blá... </body> </html> <Hy></Hy> <P> Títulos ou cabeçalhos na página y = número de 1 a 6 Parágrafo Existem seis níveis de cabeçalho na página (não confundir com cabeçalho do documento = head): <h1> </h1>, <h2></h2>, etc. Sendo h1 o maior, e h6 o menor nível. Atenção: marcações hy definem o tamanho relativo do texto e o colocam em destaque (normalmente em negrito). Insere uma linha em branco entre dois parágrafos. <BODY BACKGROUND= J > </BODY> Imagem de fundo J = arquivo imagem ou URL de arquivo imagem. Insere uma imagem como fundo da página (mais ou menos como uma marca d água).o arquivo deve estar em formato.gif. Esse arquivo pode estar na mesma máquina (anotar sua path/nome) ou em outra máquina (indicar por URL). <BR> Quebra de linha Faz uma quebra de linha. <BODY BGCOLOR= #rrggbb > </BODY> Cor padrão de fundo #rrggbb = código de cores RGB (ver tabela de cores neste documento). Define uma cor de fundo padrão para a página. A cor pode variar de monitor para monitor. <BODY TEXT= #rrggbb LINK= #rrggbb VLINK= #rrggbb ALINK= #rrggbb > </BODY> Cores do texto do documento. #rrggbb = código de cores RGB (ver tabela de cores neste documento). Define a cor para: text = texto normal da página; link = links da página; vlink = links consultados na página; alink = links ativados na página. 107

7 2. BARRA HORIZONTAL 2.3 Largura Páginas HTML podem possuir barras horizontais (Horizontal Rule, tag <HR>). Essas podem ser de alinhamento, largura e comprimento distintos. A tag <HR>, diferentemente da maior parte das tags, não necessita ser fechada. Todas as definições necessárias para a <HR> devem estar contidas dentro da tag. Exemplo: Fonte Aqui escrevemos o texto 1 <HR>e aqui o texto Alinhamento Saída Aqui escrevemos o texto 1. Aqui, o texto 2. Para que se altere o alinhamento da barra horizontal, insere-se o atributo opcional ALIGN. Esse pode ter os valores RIGHT, LEFT ou CENTER. Para alterar a largura da barra horizontal, insere-se o atributo opcional SIZE. Esse pode ser definido como percentual da altura da parte visível do browser ou em pixels. <HR WIDTH= 350" SIZE= 5"> Definida altura de 5 pixels para a barra horizontal. <HR WIDTH= 85% SIZE= 9% > Definida altura de 9% da largura da página para a barra horizontal. 2.4 Preenchimento Ao definir uma barra horizontal, ela terá seu meio transparente. É possível preencher esse meio utilizando o atributo opcional NOSHADE. Quando inserido o atributo, a barra horizontal passa a ser de apenas uma cor única e sólida (a cor padrão é cinza). <HR WIDTH= 350" SIZE= 5" NOSHADE 2.2 Comprimento Para alterar o comprimento da barra horizontal, insere-se o atributo WIDTH. Esse pode conter valores em pixels ou percentual da largura da página. A única diferença entre as formas de definição de comprimento da barra é o símbolo %. <HR WIDTH= 350"> Definido tamanho de 350 pixels para a barra horizontal. <HR WIDTH= 85% > Definido tamanho de 85% da largura da página para a barra horizontal. A utilização de % é justificada quando a definição de vídeo do usuário e visitante de sua página for diferente da que é adotada pelo designer. Dessa forma, usuários que tenham definição de vídeo de 800 x 600 ou 640 x 480, enquanto o designer confeccionou a página com monitor definido para 1024 x 768, visualizarão a página com barra horizontal de tamanhos semelhantes.

8 3. CORES Quando pensamos no design de páginas de Internet, logo pensamos em textos, imagens e cores, de plano de fundo ou de fontes. Em páginas HTML, a definição de cores é extremamente simples. Para que se defina a cor padrão de textos na página de Internet, insere-se junto da tag <BODY> o atributo opcional TEXT, seguido de uma das 16 cores básicas: <BODY TEXT= RED > Outra forma de definir cores, diferentes das 16 básicas, é atribuindo valores de uma cominação de intensidades das três cores somáticas básicas: RGB RED (vermelha), GREEN (verde) e BLUE (azul). Essa definição de intensidade pode ser feita de dois modos: através de caracteres hexadecimais ou decimais, sendo que os primeiros são mais utilizados. <BODY TEXT= #0000FF > Hexadecimal <BODY TEXT=RGB(0,0,255)> Decimal A intensidade de cada uma das cores RGB pode ser de 0 (zero) a 255. No caso da definição decimal, é bastante simples. Apenas é inserido um número entre 0 (zero) e 255 em cada um dos campos. Para que seja definida a intensidade das cores RGB com definição Hexadecimal, a cada dois caracteres temos uma cor diferente, na mesma ordem da definição decimal. A contagem, portanto, é feita da seguinte maneira: para caracteres de 0 (zero) a 9, os números são 00 a 09. Para números entre 10 e 15, de 0A até 0F. Note que o primeiro caractere continuou sendo zero; para números entre 16 e 31, temos, portanto, valores entre 10 (lê-se um zero) até 1F; para criarmos uma fórmula de conversão de números de decimais para hexadecimais, temos, portanto, o seguinte: NÚMERO DECIMAL 16 RESTO PRIMEIRO CARACTERE (SEGUNDO CARACTERE) A divisão inteira de um número decimal por 16 é o primeiro caractere. O segundo é o resto. Dessa forma, se desejamos inserir como intensidade zero para vermelho, 128 para verde e 128 para azul, temos então o texto como: <BODY TEXT= #008080"> sendo que 00=zero, 80=128 e 80=128. O formato de LINKS também pode ser alterado, seguindo o mesmo raciocínio. Na tag <BODY>, podemos inserir os atributos opcionais ALINK (ACTIVE LINK ou link ativo) e VLINK (VISITED LINK ou link visitado). Como exemplo, definiremos a fonte e os links visitados na cor ciano escuro, definidos no exemplo anterior (#008080), e os links não-visitados na cor preta. <BODY TEXT= #008080" VLINK= #008080" ALINK= #000000"> <BODY TEXT=RGB(0,128,128) VLINK=RGB(0,128,128) ALINK= RGB(0,0,0)> <BODY TEXT= #008080" VLINK=RGB(0,128,128) ALINK= BLACK Qualquer dos exemplos acima terá o mesmo resultado. Existe ainda outro atributo opcional que poderá modificar o layout da página HTML: o segundo plano ou plano de fundo (BACKGROUND), que pode ser definido como figura (veja capítulo sobre imagens) ou como uma cor sólida (BGCOLOR). Para definirmos o BGCOLOR de uma cor diferente, utilizamos o atributo opcional do <BODY> BGCOLOR (BACKGROUND COLOR) <BODY TEXT = # VLINK= #008080" ALINK= #000000" BGCOLOR= #E0E0D0" É possível que sejam definidas cores diferentes para partes distintas do documento, assim como é possível que seja definida fonte para essas partes. Para que possamos definir uma fonte diferente para cada parte do documento, adicionaremos a tag <FONT> e, nela, o atributo opcional FACE: <FONT FACE= VERDANA >TEXTO EM FONTE DIFERENTE</FONT Na mesma tag, podemos inserir cores e tamanhos para que esse texto se sobressaia em relação aos demais: <FONT FACE= VERDANA SIZE= 5" COLOR= #444444">TEXTO EM FONTE DIFERENTE</FONT> 109

9 Importante: a tag <FONT> deve ser fechada com </FONT>, caso contrário, todo o texto que suceder dessa tag receberá esse formato definido. O texto definido com fonte VERDANA, cinza escuro e tamanho, 5 termina na tag </FONT>. A combinação de tags em páginas HTML pode definir uma infinidade de formas e cores. Caso a definição de um link esteja fora da tag <FONT>, essa fonte não será a definida no BODY, mas a definida na tag, não havendo, portanto, diferença entre links ativos e visitados (veja mais detalhes sobre links em capítulo específico). <A HREF= > <FONT FACE= VERDANA SIZE= 5" COLOR= #44D4F4">UNB</FONT> </A> Dica: utilize cores de fontes que contrastem com a cor do segundo plano (atributo BGCOLOR) ou com a figura de papel de parede (atributo BACKGROUND). 4. FORMATAÇÃO DE TEXTOS Agora, você vai aprender um pouco mais sobre HTML visualizando como algumas páginas foram construídas. A forma pela qual a codificação HTML é implementada faz com que o códigofonte das páginas seja transparente para qualquer usuário. Assim, para visualizar o código-fonte de uma página, clique com o botão direito sobre ela e escolha a opção View source code. 4.1 Tags de formação <STRONG> Forte ênfase, mostrado normalmente em negrito. Ex.: Antes de enviar um , confira o campo Subject:! <B> Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado). <I> Itálico (em alguns casos, caracteres apenas inclinados). <TT> Tipo teletype: fonte de espaçamento fixo. <U> Sublinhado: deve ser usado com cuidado, pois se confunde com a apresentação de links. <STRIKE> ou <S> Frase riscada <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo índice, como em H 2 O. <SUP> Frase em estilo expoente, como em Km 2. <BLOCKQUOTE>

10 Como fazer uma citação em uma página HTML? É usado para citações longas: <blockquote>a massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parecenos que se desloca em órbita circular no espaço tridimensional.</blockquote> (Stephen W. Hawking, Uma Breve História do Tempo ). A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional. (Stephen W. Hawking, Uma Breve História do Tempo ). 4.2 Caracteres especiais HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere desejado, e um ; final. Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência: Entidade Caractere < < > > & & Outras seqüências de escape suportam caracteres ISO Latin1. Temos, a seguir, uma tabela com os caracteres mais utilizados em Português. Entidade Caractere Entidade Caractere á á Á Á â â Â Â à à À À ã ã Ã Ã ç ç Ç Ç é é É É ê ê Ê Ê í í Í Í ó ó Ó Ó ô ô Ô Ô õ õ Õ Õ ú ú Ú Ú ü ü Ü Ü Como vemos, as seqüências de escape são sensíveis à caixa. Ao usar caracteres acentuados, pode-se inserir uma indicação do esquema de codificação ISO Latin1, escrevendo: <HTML> <HEAD> <TITLE>...</TITLE> <META HTTP-EQUIV= Content-Type CONTENT= text/html; charset=iso "> </HEAD>... Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML 3.2. Por exemplo,, que é o símbolo, para, e para. Também se pode usar seqüências com códigos ASCII, por exemplo: Qué pasa, señor? 111

11 5. INSERÇÃO DE IMAGENS A tag <IMG> define uma imagem. No nosso exemplo, a árvore de diretórios é exatamente a definida abaixo, junto à figura imagem2.jpg: Imagem2.jpg 400 x 277 pixels Para que se possa definir a fotografia acima em nossa página index.html, escreveremos o seguinte: <IMG SRC= imagem2.jpg > Em nossa página arquivo2.html, para que possamos definir a mesma imagem, é necessário escrever o seguinte, visto que a fotografia encontra-se no diretório acima: <IMG SRC=../imagem2.jpg > Para definir o tamanho da figura (altura e largura), podemos utilizar os atributos opcionais HEIGHT e WIDTH: <IMG SRC=../imagem2.jpg HEIGHT= 277" WIDTH= 400"> No exemplo acima, a imagem2.jpg, que aparecerá no arquivo2.html, não terá distorções de altura e largura, mas é possível alterar seu tamanho definindo outros valores para HEIGHT e WIDTH. Para que coloquemos bordas na imagem, deveremos inserir o atributo opcional BORDER, atribuindo a esse um valor diferente de zero: <IMG SRC=../imagem2.jpg HEIGHT= 277" WIDTH= 400" border= 1"> O valor dado ao atributo BORDER é a largura da borda que a imagem terá, definida em pixels. Para definir uma imagem sem bordas, escreva BORDER= 0. O atributo ALT define uma mensagem que poderá ser apresentada ao parar com o mouse sobre a figura: <IMG SRC=../imagem2.jpg HEIGHT= 277" WIDTH= 400" border= 0" ALT= CIDADE >. Pode-se ajustar o espaço não-preenchido entre uma imagem e outra, entre uma imagem e o texto que a precede ou a sucede, ou entre essa imagem e bordas de tabelas. Para definir esse espaço, usa-se o atributo opcional HSPACE. Ao dar um valor (em pixels) a esse atributo, o espaço não será preenchido por outra imagem ou texto, ficando apenas o BACKGROUND aparecendo. <IMG SRC=../imagem2.jpg HEIGHT= 277" WIDTH= 400" ALT= CIDADE hspace= 5"> Com esse valor, a imagem ficará isolada 5 pixels à esquerda e à direita de outra imagem, texto ou borda. Uma imagem pode ser referenciada relativamente, como nos exemplos acima, ou absolutamente. No caso de definição absoluta, define-se o caminho de uma imagem, contendo o protocolo, em quase todos os casos, HTTP, como no exemplo abaixo: <IMG SRC= ALT= UnB > No caso acima, sempre que a Universidade de Brasília alterar seu logotipo, a página que referencia essa figura também terá sua imagem alterada. BACKGROUND Imagem2.GIF figura de tamanho 1600 x 128 pixels É possível definir uma imagem a ser repetida indefinidas vezes, atrás de tudo que é definido na página HTML. Podemos definir a figura abaixo como nosso papel de parede, plano de fundo ou, se preferir, BACKGROUND. No caso acima, a imagem será repetida indefinidas vezes, horizontalmente e verticalmente, até o final da página em cada um dos sentidos. A imagem2.gif foi escolhida para BACKGROUND por ser uma figura de baixo contraste e que verticalmente pode ser repetida indefinidas vezes, sem que isso prejudique o layout da página, ou a repetição vertical da figura possa ser notada. Para definir a imagem como BACKGROUND, escreve-se na tag <BODY>, do arquivo index.html: <BODY background= imagem1.gif >.

12 6. LINKS Link é vínculo entre dois arquivos distintos, usando o atributo HREF, junto da tag <A>. Em linguagem HTML, o link é representado pela tag A HREF=, que possui a seguinte sintaxe: <A HREF= ARQUIVO DE DESTINO >TEXTO ONDE O USUÁRIO CLICARÁ</A>. O TEXTO ONDE O USUÁRIO CLICARÁ aparecerá na cor de links não-visitados, definida pelo usuário (em geral, azul) ou na cor que a página indica, e sublinhado. Um link pode fazer referência a um arquivo que se encontra em certo caminho em relação à página visitada ou pode referenciar-se a uma página que está fora da árvore de diretórios, não podendo ser referenciada relativamente. 6.1 Link com referência relativa Um link com referência relativa é normalmente usado quando a página de destino encontra-se na mesma árvore de diretórios da página de origem. Obs.: para definir o acento agudo na letra a, em códigos do padrão HTML, escreve-se á, sem aspas. Para escrever é, escreve-se, portanto, é. Caso deseje da sua página arquivo2.html voltar para a página Index.html, a sintaxe ficará da seguinte forma: <A HREF=../Index.html >Volta para pagina Index</A>. 6.2 Link com referência absoluta Link com referência absoluta é normalmente usado quando o arquivo de destino encontra-se fora da árvore de diretórios da página de origem. Para que se possa diferenciar um link de referência absoluta de um link de referência relativa, usa-se no link de referência absoluta o protocolo de comunicação utilizado para que se tenha acesso à página (normalmente ). Exemplo: Para que coloquemos um link que referencie a página da Universidade de Brasília, em nosso arquivo HTML, escreveremos o seguinte: <A HREF= > Universidade de Brasília</A>. No exemplo abaixo, a página Index.html referenciará a página arquivo.html de forma relativa, portanto a sintaxe da tag ficará da seguinte maneira: <A HREF= diretorio1/arquivo.html>clique aqui para ir para a página arquivo</a>. Dessa forma, a frase clique aqui... aparecerá na cor definida na página ou na configuração do Internet Explorer, se não houver definições de tanto. Para ir da página arquivo.html para a página arquivo2.html, deverá estar escrito no código fonte o que se segue: <A HREF=../diretorio3/arquivo2.html >clicando nesta frase, você irá para a página arquivo2</a>. 6.3 Atribuindo um link em uma imagem É possível atribuir um link a uma imagem, fazendo com que, ao ser clicado, acesse o arquivo apontado. Para tanto, utiliza-se, no lugar de uma seqüência de palavras, a tag de imagem, como no exemplo abaixo, que insere um link na imagem1.gif, que se encontra na página arquivo.html, para a página arquivo2.html: <A HREF=../diretorio3/arquivo2.html ><img src=../imagem1.gif ></A> Assim, ao clicar com o mouse na imagem1.gif, essa abrirá a página arquivo2.html. 6.4 Atributos opcionais COORDS e SHAPE É possível atribuir um mapa dentro da imagem. Como exemplo, citaremos o mapa mundi. Esse mapa pode ser constituído de apenas uma imagem, mas ao clicar em determinados países, podem abrir-se páginas específicas de cada país. 113

13 Ao atribuir SHAPE= RECT (retângulo), é possível atribuir uma área retangular para ser clicada, na imagem, atribuindo COORDS= ESQUERDA,CIMA,DIREITA,BAIXO (ou ainda, podemos pensar como retas, na forma de y1, x1, y2, x2, respectivamente). Toda a área formada por retas que partem da esquerda para a direita, da primeira para a terceira coordenada, e de cima para baixo, da segunda para a quarta, é, portanto, um link. Nota: a imagem deve ser maior que as coordenadas, sob pena de má interpretação do servidor de Internet. <A HREF=../diretorio3/arquivo2.html shape= rect coords= 1,1,20,25"><img src=../imagem1.gif ></A>. Nesse exemplo, a imagem1.gif, ao ser clicada em toda a área que vai do ponto superior onde cruzam as retas x1=1, y2=1 até o ponto onde se cruzam as retas x2=25, y2=20, abrirá o arquivo2.html. Ao atribuir SHAPE= CIRC (circular), é possível atribuir uma área elíptica para ser clicada, na imagem, atribuindo COORDS= CENTROX,CENTROY,RAIO (ou ainda, podemos pensar como coordenadas do centro da imagem e raio, respectivamente). Toda a área formada pelo círculo de raio=raio e centro nas coordenadas CENTROX e CENTROY, é, portanto, um link. <A HREF=../diretorio3/arquivo2.html shape= circ coords= 20,20,15"><img src=../imagem2.gif ></A> Nesse exemplo, a imagem2.gif, ao ser clicada em toda a área formada pelo círculo centrado na coordenada X=20, Y=20 e de raio=15, abrirá o arquivo2.html. Ao atribuir SHAPE= POLY (polígono), é possível atribuir uma área poligonal para ser clicada, na imagem, atribuindo COORDS= X1,Y1, X2,Y2,..., Xn,Yn. Toda a área interna da figura formada pelas retas que vão do ponto X1,Y1 até X2,Y2, e desse até X3,Y3, etc. até Xn,Yn, e desse até X1,Y1, é, portanto, um link. TARGET Define onde o arquivo vinculado abrirá. TARGET= _blank a URL alvo abrirá em uma nova janela do Internet Explorer; TARGET= _self a URL alvo abrirá no mesmo frame no qual o link foi clicado; TARGET= _parent a URL abrirá no frameset pai; TARGET= _top a URL alvo abrirá em toda a janela. Exemplo: Na página Index.html, ao clicar no link definido pelo código abaixo, a página arquivo.html abrirá em nova janela do Internet Explorer. <A HREF= diretorio1/arquivo.html TARGET= _BLANK >arquivo</a>. 6.5 Âncora ou Bookmark Âncora é um local na página HTML que pode ser referenciado por um link, localizando-o com mais facilidade. Uma âncora é normalmente usada quando a página é verticalmente muito extensa, dificultando a localização de certas partes de um texto. Imaginemos agora um artigo de uma monografia escrita em uma única página HTML. Para que se possa localizar um capítulo específico, o autor dessa monografia colocará no princípio de cada capítulo uma âncora de nome CAPÍTULO, seguido do número do capítulo (CAPÍTULO 1, CAPÍTULO 2). Dessa forma, para criar uma referência na mesma página para essa âncora, escreve-se o seguinte: No link que se encontra na mesma página: <A HREF= #CAPITULO1">Capítulo1</A>. Caso a página arquivo2.html seja a monografia e exista link na página Index.html: <A HREF= diretorio/arquivo2.html#capitulo1">capítulo1</a>. Na âncora, para que seja definida: <A NAME= CAPITULO1"></A>Capítulo1</P>. Seguindo esse raciocínio, seria possível criar uma página HTML, com a seguinte forma: <BODY LINK= #0000ff VLINK= #800080"> <FONT FACE= Verdana ><P>Índice:</P> <P><AHREF= #Introducao ><FONTFACE= Verdana SIZE=1>Introdução</ FONT></A></P> <P><A HREF= #CAPITULO1"><FONT FACE= Verdana SIZE=1>Capítulo 1</FONT></A></P>

14 <P><AHREF= #CAPITULO2"><FONT FACE= Verdana SIZE=1>Capítulo 2</FONT></A></P> <P><AHREF= #CAPITULO3"><FONT FACE= Verdana SIZE=1>Capítulo 3</FONT></A></P> <FONT FACE= Verdana ><P> </P> <P> </P> <P> </P> <P>Introdução</P> <P>Texto</P> <P>Texto</P> <P><A NAME= Introducao ><A NAME= CAPITULO1">Capítulo 1</A></A></P> <P>Texto</P> <P>Texto</P> <P><A NAME= CAPITULO2">Capítulo 2</A></P> <P>Texto</P> <P>Texto</P> <P><A NAME= CAPITULO3">Capítulo 3</A></P> <P>Texto</P> <P>Texto</P></FONT></BODY> 7. TABELAS As tabelas utilizadas em HTML possuem várias tags para sua construção e formatação. A principal tag é a <TABLE> e o seu respectivo final </TABLE>. Abaixo, à esquerda, temos o exemplo de uma tabela simples com três linhas e duas colunas. Obs.: : blank space ou espaço em branco. ç : cê cedilha ( ç ). ã : a com til ( ã ). A seguir, temos o resultado do código HTML acima. Perceba que, no código acima, não temos as tags essenciais de uma página HTML. Assim, para a tabela abaixo aparecer em uma página HTML, deve-se ter as tags como <table>... </table>, <head>... </head> e <body>... </body>. Existe também a tag <th>... </th> que pode substituir a tag <td>... </td>. A única diferença entre as duas tags é que o <th> indica uma célula como se fosse um título. Assim, ela negrita automaticamente o texto da célula. No entanto, outra forma de negritar o texto da célula é colocar <td><b>... </b></td>. 115

15 7.1 Mesclando células O HTML permite que células sejam mescladas tanto de uma linha para outra quanto de uma coluna para outra Mesclando células em colunas diferentes De modo semelhante ao colspan, temos o parâmetro rowspan, que mescla as células em linhas diferentes. Portanto, se quisermos mesclar as primeiras células das linhas um e dois, colocaremos o padrão rowspan na primeira célula e simplesmente omitiremos a segunda célula. A seguir, vemos o exemplo do código e o seu respectivo resultado. <table border= 1"> <td colspan= 2">linha 1, coluna 1</td> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> <td>linha 3, coluna 1</td> <td>linha 3, coluna 2</td> </table> Para mesclar células em colunas diferentes, deve-se utilizar o parâmetro colspan na tag <td> indicando quantas células a célula deverá ocupar. No exemplo inicial de tabelas, podemos fazer com que as células da primeira linha fiquem como uma só. 7.2 Parâmetro cellpadding Se você desejar que o texto fique mais distante das bordas da célula, use o parâmetro cellpadding, na tag <table>. A seguir, temos o exemplo da primeira tabela deste capítulo com um espaçamento maior Mesclando células em linhas diferentes

16 7.3 Parâmetro cellspacing 7.4 Definindo cor de fundo e imagem de fundo para a tabela Outro parâmetro interessante em tabelas é o cellspacing. Por meio dele, podese definir o espaçamento entre as células. Do mesmo modo que o parâmetro cellpadding, ele deve ser utilizado na tag <table>. Abaixo, temos o primeiro exemplo do capítulo alterado com o parâmetro cellspacing. Deve-se perceber que se o parâmetro border tiver seu valor aumentado, a tabela dará uma impressão de estar mais fora do monitor, ou seja, parecerá que a borda tem três dimensões. Faça o teste e verifique como ficaria o exemplo acima com o parâmetro border= 10". De forma análoga, se você especificar que o valor de border é zero, então sua tabela não terá borda aparente. <table border= 1" cellspacing= 10"> </table> Trecho do código HTML <td>linha 1, coluna 1</td> <td>linha 1, coluna 2</td> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> <td>linha 3, coluna 1</td> <td>linha 3, coluna 2</td> Resultado A tabela HTML também pode ter como plano de fundo uma cor ou uma imagem, assim como a página HTML. Para definir a cor de fundo da tabela, utilize o parâmetro BGCOLOR na tag <table>. A seguir, temos um exemplo de como isso funciona. Também se pode utilizar o parâmetro BGCOLOR em <td>. Assim, a célula especificada terá uma cor diferente das demais. Trecho do código HTML <table border= 1" bgcolor= red > <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> </table> De forma análoga, temos o parâmetro background. Nele, definimos a imagem de fundo que a tabela ou a célula terá. A seguir, o exemplo. Trecho do código HTML <table border= 1" background= imi.gif cellpadding= 10" cellspacing= 10"> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> </table> Resultado Resultado 117

17 7.5 Alinhando o texto dentro da célula Podemos alinhar o texto dentro de uma célula utilizando o parâmetro ALIGN com os valores LEFT, CENTER e RIGHT. Veja o exemplo a seguir. 7.6 O parâmetro frame <table border= 1"> <th colspan= 2">Horas estudadas no dia</th> <th align= center >Aluno</th> <th align= center >Qtd horas</th> <td>chiquinho</td> <td align= right >10</td> <td>zezinho</td> <td align= right >10</td> </table> Trecho do código HTML Resultado Existe um parâmetro da tabela que define como serão suas bordas. Assim, podemos definir se queremos bordas somente abaixo de cada célula, somente do lado direito, etc. Ao lado, temos um exemplo do parâmetro frame na tag <table> utilizando como valor below.. Trecho do código HTML <table frame= below > <td>primeira</td> <td>linha</td> <td>segunda</td> <td>linha</td> </table> Na tabela abaixo, temos outros valores para o parâmetro below e suas respectivas funções. Valor de frame Função border Padrão da tabela. Se for omitido, a tabela ficará igual. box O mesmo que border. Se for omitido, a tabela ficará igual. void Omite as bordas. O mesmo que border= 0". above Deixa as bordas somente acima das células. below Deixa as bordas somente abaixo das células. hsides Deixa somente as bordas horizontais. vsides Deixa somente as bordas verticais. lhs Deixa somente as bordas à esquerda. rhs Deixa somente as bordas à direita. 7.7 Referências sobre tabelas Resultado No link você encontrará uma ótima referência sobre todos os links discutidos neste capítulo e todos os outros do HTML 4.01.

18 8. FRAMES Atividade 1. Escolha um tema e faça uma tabela, utilizando todos esses recursos: várias células e colunas; células mescladas em linhas diferentes e outras colunas diferentes; espaçamento entre o texto e a borda da célula e entre as células; uma cor de fundo definida para a tabela e uma diferente para pelo menos uma das células; alinhamentos diferentes do texto dentro da célula; somente bordas horizontais. Os frames são divisões da tela do browser em diversas telas (ou quadros ). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte. É muito fácil colocar frames em páginas; porém, nem todos os usuários gostam deles. Uma página com frames tem um texto fonte semelhante a: <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS= 20%, 80% > <FRAME SRC= indice1.html > <FRAME SRC= apresenta.html NAME=principal> <NOFRAME> <BODY> <H2>Bem-vindo à página do assunto X!</h2> <P> Blá blá blá blá blá blá blá blá blá blá </BODY> </NOFRAME> </FRAMESET> </HTML> A parte FRAMESET define a divisão da página em quadros. Nesse exemplo, a página será dividida em dois quadros, sendo o primeiro com 20% do tamanho da tela, e o segundo, com os restantes 80% da tela. Dentro da formatação de FRAMESET, temos os FRAME SRC, que são as referências às páginas que serão mostradas nos frames definidos. Assim, aqui vemos que a página indice1.html será mostrada no primeiro quadro (que ocupará 20% da tela), e apresenta.html será mostrada no segundo (ocupando 80% da tela). A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos browsers que não suportam a apresentação de frames. 119

19