Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 1 Neste exercício vamos testar os diversos tipos de links comentados. Para isso duas homepages serão criadas. Grave os comandos abaixo como exerc14.htm. Depois siga as instruções para criar a outra home-page. Uso de Links Uso de Links Caminhos relativos Carrega o documento exerc4.htm, que está no mesmo diretório do documento atual. Carrega o documento hp1.htm, que está no diretório teste, localizado sob o diretório atual. Caminhos absolutos Fundação de Amparo à Pesquisa do Estado de São Paulo - FAPESP Conselho Nacional de Desenvolvimento Científico e Tecnológico - CNPq Links dentro do texto Caminhos relativos Caminhos absolutos Links no próprio texto

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 2 Agora complete o exercício para testar os caminhos relativos sem problemas: 1. Crie uma pasta com o nome “teste” sob a pasta atual 2. Grave os comandos abaixo com o nome hp1.htm dentro da pasta “teste”. Uso de Links Home-page chamada pela home-page exerc14.htm Deu certo! Vamos voltar à home-page <A HREF="../exerc14.htm">anterior.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 3 INSERÇÃO DE IMAGEM Para inserir imagens em uma home-page, usa-se o elemento. Um atributo SRC deve estar presente, da seguinte forma: onde endereço_imagem é o nome completo arquivo que contém a imagem desejada. As imagens usadas na Web devem ser armazenadas em arquivos com extensão *.gif, *.xbm, *.jpg(ou *.jpeg). Assim, o comando abaixo insere a imagem “teste.gif” que está no diretório figuras no documento.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 4 ATRIBUTOS BÁSICOS ALT Este atributo inclui um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. O formato é: Exemplo:

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 5 ATRIBUTOS BÁSICOS (Continuação) WIDTH e HEIGHT Atributos de dimensão – largura e altura – da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem. Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas. Formato:

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 6 ATRIBUTOS BÁSICOS (Continuação) BORDER Quando uma frase é marcada como âncora em um link, ela se apresenta sublinhada ; quando uma imagem faz as vezes de âncora, ganha uma borda que indica a sua condição. Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com esse atributo (BORDER) podemos controlar esse detalhe. Se quisermos uma borda maior, podemos aumentar o valor desse atributo. Se quisermos uma imagem sem borda, este atributo deve ser ZERO.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 7 ATRIBUTOS BÁSICOS (Continuação) ALIGN Existe também atributos de alinhamento, cujo formato é: Os seguintes valores são possíveis para o alinhamento: TOP, MIDDLE, BOTTOM, RIGHT, LEFT. ALIGN=TOP – Alinha o texto adjacente com o topo da imagem. ALIGN=MIDDLE – Alinha o texto adjacente com o meio da imagem. ALIGN=BOTTOM – Alinha o texto adjacente com a parte de baixo da imagem (padrão). ALIGN=RIGHT – Alinha a imagem a direita, e tudo que houver ao redor (textos outras imagens) a partir do topo da imagem. ALIGN=LEFT – Alinha a imagem a esquerda, e tudo que houver ao redor (textos outras imagens) a partir do topo da imagem.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 8 Outros alinhamentos procuram posicionar a imagem com maior precisão com relação ao texto que está posicionado ao redor: TOPTEXT, ABSMIDDLE e ABSBOTTOM. Para ter duas imagens, uma em cada margem, numa mesma linha, podemos escrever: Neste exercício, vamos ver os atributos de imagem citados. Grave como exerc15.htm.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 9 Uso de Imagens Uso de Imagens Inclusão Simples Alterando o tamanho Verificando as bordas Sem Borda Borda = 5 Verificando o alinhamento Sem Borda Alinhamento TOP – Alinha o texto adjacente com o topo da imagem. O problema são as linhas muito compridas. Alinhamento MIDDLE – Alinha o texto adjacente com o meio da imagem. O problema são as linhas muito compridas.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 10 Alinhamento BOTTOM – Alinha o texto adjacente na parte de baixo da imagem. O problema são as linhas muito compridas. Alinhamento RIGHT – Alinha o texto adjacente à esquerda da imagem. O problema são as linhas muito compridas. Alinhamento LEFT – Alinha o texto adjacente à direita da imagem. O problema são as linhas muito compridas. Uma imagem de cada lado. Usa alinhamento LEFT e RIGHT.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 11

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 2/6/ :22 12