Links, Imagens e Tabelas

Transcrição

1 Links, Imagens e Tabelas

2 Criar um link em um texto significa estabelecer uma ligação com outra página, outro texto, que o leitor pode abrir clicando numa palavra, grupo de palavras ou em uma imagem. Para construir um link em HTML utilizamos uma tag com um atributo. A tag utilizada é a <a> e o atributo href. A tag a refere-se a "anchor" - âncora. O atribuito href é abreviação para "hypertext reference" - referência a hypertexto - e especifica o destino do link - que normalmente é um endereço na Internet ou um arquivo Exemplo <a href= pagina1.html >Acesse a pagina 1</a>

3 Utilizar um caminho físico para um link é a mesma coisa que indicar o endereço completo do arquivo ao qual deseja efetuar a ligação. Exemplo1: Caminho Físico: <a href= c:\wamp\www\pagina.html >Página</a> Exemplo1: Caminho Físico: <a href=

4 O caminho relativo é dado em relação ao arquivo que esta fazendo as ligações links. Utilizando caminho relativo considere que desejo criar um link do arquivo index.html para dir1.html. A tag html ficaria da seguinte forma: <a href= dir1/dir1.html >dir1</a>

5 O caminho relativo é dado em relação ao arquivo que esta fazendo as ligações links. Utilizando caminho relativo considere que desejo criar um link do arquivo dir1.html para dir2.html. A tag html ficaria da seguinte forma: <a href=../dir2/dir2.html >dir2</a>

6 O caminho relativo é dado em relação ao arquivo que esta fazendo as ligações links. Utilizando caminho relativo considere que desejo criar um link do arquivo dir2.html para index.html. A tag html ficaria da seguinte forma: <a href=../index.html >index</a>

7 Se a pagina ou arquivo que se deseja fazer o link esta dentro de um subdiretório, basta acresencar o nome do subdiretório(s) e o nome do arquivo. No entanto, se o arquivo esta fora do diretório onde se encontra o arquivo de referencia(que conterá os links) utilizamos../ para sair de um diretório. Se precisarmos sair de vários subdiretórios podemos encadear../../ quantas vezes forem preciso. Após podemos indicar o nome do arquivo, ou entrar em um subdiretório para localiza-lo.

8 Podemos criar links dentro de uma mesma página. Para isso devemos criar um identificador para o elemento ao qual desejamos criar um link. Exemplo: <h1 id= Noticia1 >Noticia</h1> Apos criamos um link e apontamos a referencia para o identificador do elemento criado. Exemplo: <a href= #Noticia1 >Link para Noticia</a>

9 Podemos criar links para , assim uma vez que a pessoa clicar sobre este tipo de link o programa padrão de envio de do usuario se abrirá para edição e envio do Exemplo: <a href= mailto:ivan@ivan.com.br > Enviar </a>

10 Podemos utilizar o atributo title na tag a para fornecer ao usuario um breve comentário sobre o link quando o mouse for passado sobre o link. Exemplo: <a href= Noticia1 title= comentário >Noticia</a>

11 O atributo target especifica a janela ou o frame onde o documento linkado será carregado. Valores do Atributo target descrição _blank _self _parent _top framename Carrega em uma nova janela A URL alvo abrirá no mesmo frame onde o link foi clicado A URL alvo abrirá no frameset pai A URL alvo abrirá na mesma janela, sem frames A URL alvo abrirá em uma frame chamado framename

12

13 Para inserir imagens em documentos html utilizamos o atributo img juntamente com o atributo src. Exemplo <img src= image1.jpg />

14 Indica 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. <img src= image1.jpg alt= descricao />

15 Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem. <img SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura"> 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. Exemplos: <img src= image1.jpg width= 50% /> <img src= image1.jpg width= 100px height= 30px />

16

17 tabelas são usadas para apresentar "dados tabulares", isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica. Para criar uma tabela em html utilizamos basicamente as tags: Tag <table> <tr> <td> Descrição Cria uma tabela Table row linha da tabela Table data dados da tabela, cria uma celula

18 Exemplo <table> <tr> <td><td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

19 O atributo border define a espessura da borda da tabela: Exemplo <table border= 1 > <tr> <td><td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

20 O atributo width define a espessura da borda da tabela: Exemplo <table width= 200px > <tr> <td><td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

21 Para mesclar colunas utilizamos o atributo colspan e informamos como atributo a quantidade de colunas que serão mescladas. Exemplo <table width="200" border="1"> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

22 Para mesclar linhas utilizamos o atributo rowspan e informamos como atributo a quantidade de linhas que serão mescladas. Exemplo <table width="200" border="1"> <tr> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table>

23 Crie duas páginas html: Uma chamada pagina1.html e a outra chamada pagina2.html, a pagina2.html deve estar dentro de um diretório chamado diretorio2. Crie um link da pagina1.html para pagina2.html de forma que a pagina2.html seja aberta em uma nova janela. Utilize para esse exercício o caminho físico ou absoluto do arquivo pagina2.html. Na pagina2.html crie um link para a pagina1.html utilizando o caminho relativo.

24 Insira uma imagem na página1.html e modifique a largura da imagem para 50%