HTML Parte II

Alexandre Michael alexandre_michael@unit.br

ncoras
Interliga parte do texto (ou imagens) a outros documentos ou sees do prprio documento Esta ligao (link) normalmente recebe uma formatao em destaque como cores diferentes e sublinhado tag <a> Atributos href, name e target
Alexandre Michael
2

ncoras
Passos para criao de um link: <a href=path/filename>
onde filename o caminho e nome do arquivo

Texto que vai funcionar como link </a> <!-- tag de fim-->
Alexandre Michael
3

ncoras
Sintaxe <a href = path/filename> Texto que servir como link </a> Exemplo <a href = arq2.html> Segundo Arquivo </a>
Alexandre Michael
4

ncoras
Exemplo Visite a home page da <a href = http://www.unit.br>
Universidade Tiradentes </a> e ...

Alexandre Michael

ncoras
<a href = "mailto:fulano@servidor.com.br"> envie um email </a> dando a sua opinio e

Alexandre Michael

ncoras
Interligando sesses de uma pgina
ponto de partida

<a href = "#i5"> Tpico 5 </a>

ponto de chegada

<a name = "i5"> Item 5 </a>

Alexandre Michael

ncoras
possvel interligar sesses de pginas diferentes Ex: V para o <a href = "pgina1.html#index"> Index </a>
Alexandre Michael
8

ncoras
Atributo target
_blank _self (janela ou aba nova em branco) (na prpria janela)

<a href="pgina1.html target=_blank> Vai para um novo navegador </a>

Alexandre Michael

Imagens como Link

No lugar do texto que servir como link, possvel usar uma imagem <a href = "http://www.unit.br"> <img src = "figuras/unit.gif" /> </a>

Alexandre Michael

10

Link - Exerccio

Alexandre Michael

11

Link - Exerccio

Alexandre Michael

12

Link - Exerccio

Alexandre Michael

13

Tabela
Linhas e Colunas Clulas Tag <table> Sintaxe : <table> </table>
Alexandre Michael
14

Tabela
Linha (Table Row) <tr> ... </tr> Coluna (Table Data) <td> . . . </td>
Alexandre Michael
15

Tabela - Estrutura
<table> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
Alexandre Michael
16

Tabela - Atributos
border padro = 0, sem borda <table border = 1> </table>

Alexandre Michael

17

Tabela - Atributos
align valign (left, center, right) (top, middle, bottom)

bgcolor

("cor" ou "#cdigo)

background (caminho e nome da imagem)

Alexandre Michael

18

Tabela - Exemplo

Alexandre Michael

19

Tabela - Exemplo

Alexandre Michael

20

Tabela como Moldura

Alexandre Michael

21

Tabela - Ttulos de Colunas

Tag <th> (Title Heading)
<th> </th> Funciona no lugar da tag <td>

Alexandre Michael

22

Tabela - Atributos
colspan : colunas que a clula ocupa rowspan : linhas que a clula ocupa cellspacing : espao entre clulas cellpadding : espao entre as colunas e linhas nowrap : no quebra o texto para se ajustar ao tamanho da clula

Alexandre Michael

23

Tabela - Exemplo

Alexandre Michael

24

Tabela Largura e Altura

Atributo width
largura da tabela em pixel ou em porcentagem

Atributo height
altura da tabela em pixel ou em porcentagem

Alexandre Michael

25

Tabela Largura e Altura

Alexandre Michael

26

Tabela Ttulo e Legenda

Tag <caption>
Atributo align align = top Ttulo align = bottom Legenda
Alexandre Michael
27

(Padro)

Tabela Ttulo e Legenda

<table> <caption align=top>Ttulo</caption> <caption align=bottom>Legenda</caption> <tr> <th> </th> <th> </th> <th> </th> </tr> </table>
Alexandre Michael
28

Tabela Ttulo e Legenda

Alexandre Michael

29

Tabela Exibio das bordas

Atributo rules
all : todas as bordas

rows : exibe as linhas horizontais entre as clulas cols : linhas verticais

none : remove todas as bordas

Alexandre Michael
30

Tabela Exerccio

Alexandre Michael

31