INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 2

Save this PDF as:
 WORD  PNG  TXT  JPG

Tamanho: px
Começar a partir da página:

Download "INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 2"

Transcrição

1 1 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 2 Rhavy Maia Guedes

2 Hiperlinks 2 Documentos hipertexto permitem estabelecer fluxos não-lineares de leitura (é a parte HT na linguagem de marcação)

3 Hiperlinks 3 São meios de ligação entre páginas web ou entre locais dentro da mesma página (âncoras); Normalmente apresenta-se dentro de uma página web com uma cor diferenciada;

4 Hiperlinks 4 Links

5 Hiperlinks 5 Links

6 Tag <a></a> 6 Usada para criar hiperlinks <a></a> href = endereço title = Título do Link target _blank _parent _self _top framename <a href= noticias.html title = Notícias target= _self >Link</a>

7 Link para outras Páginas 7 É possível fazer ligações para outras páginas web <a href= title = W3C target= _blank >W3C</a> <a href= title = Busca= _self >Gooogle!</a> <a href= title = Blog target= _blank >Blog</a>

8 Uniform Resource Locator - URL 8 Como os recursos são identificados na Web? Uma URL (Uniform Resource Locator), ou endereço na Web, é digitada no navegador com o propósito de acessar um recurso no servidor Web. Forma geral de uma URL típica: protocolo://nome_do_site/path_absoluto path_absoluto: é o caminho da pasta raiz no servidor até o recurso nome_do_site: é composto do nome do servidor +nome do domínio

9 Uniform Resource Locator - URL 9 A URL é a forma padronizada e integrada de identificação de qualquer recurso no domínio da Internet; Outros exemplos: df ftp://ftp.dsc.ufcg.edu.br/pub/software/download/twe ak.exe protocolo://nome_do_site/path_absoluto

10 Uniform Resource Locator - URL 10 URL s Absolutas versus Relativas: <a href= usr/docs/edital.pdf >edital</a> <a href= > Edital </a>

11 Endereço Relativo 11 Igual ao que utilizamos para informar o endereço de imagens: <a href= imagem/ifpb.png title = Blog target= _blank >Blog</a> <a href= title = Blog target= _blank > <img src= imagem/ifpb.png > </a> <a href= title = IFPB target= _blank > IFPB <img src= imagem/ifpb.png alt= Instituto... > </a>?

12 Âncoras 12 Serve para fazer links que acessam locais na página web; Onde utilizar: Uma página muito grande e que será dividida em vários tópicos pode-se dar um endereço de referência a cada um deles para serem acessados rapidamente por meio de links que são geralmente dispostos no início do documento (como um índice).

13 Âncoras 13 Em outras palavras uma Âncora é uma referência dentro de uma página HTML que pode ser acessada por um link;

14 Âncoras Passos Iniciais 14 Encontre o local na página onde você quiser criar um ponto de âncora; Envolva o texto dentro de um elemento <a>; Escolha um nome do identificador destino, como café ou resumo ou bio, e insira um name ou id atributo para o elemento <a>.

15 Âncoras Referencias 15 Para criar uma âncora em algum lugar da página deve-se colocar um nome de referência para o link poder acessá-lo. <a name= nome_da_referencia > Exemplo: Atenção: utilizar o atributo name ou id para identificar o marcador. <a name= cafe >

16 Âncoras - Passos Finais 16 Descubra o name da âncora de destino; Altere a tag <a> para apontar para a âncora de destino; Atualize sua "página" para testar o link.

17 Âncoras - Links 17 Para se criar o link que acessará a âncora usa-se o comando: <a href= #nome_da_referencia >Texto do Link</a> Atenção: o símbolo cerquila(#) deve anteceder o nome de referência do link, pois avisa ao browser que ele irá procurar uma âncora. Exemplos: <a href= #cafe >Café</a> <a href= >Fórmula 1</a>

18 Listas 18 Itens seqüenciais; São blocos que contém itens de listas; Arranjar grupos similares;

19 Construindo lista em dois passos fáceis. 19 Primeiro passo: Determinar os itens da lista. Sorvetes Disciplinas

20 Construindo lista em dois passos fáceis. 20 Segundo passo: Determinar qual tipo de lista você vai utilizar: Ordenada; Desordenada Disciplinas Sorvetes Ordenada! Desordenada!

21 Quais são as <tags>? 21 Primeiro passo: Itens são definidos através da tag <li>;

22 Construindo lista em dois passos fáceis. 22 Segundo passo: Tipos de lista são determinado por: UL Lista desordenada; OL Lista ordenada.

23 Lembrete das Listas 23 Em inglês: unordered list = ul ordered list = ol list item = li

24 Personalização 24 É possível escolher o tipo dos bullets para lista desordenadas que serão apresentados através do atributo: <ul type= circle > SQUARE; CIRCLE; DISC. <ul type= circle > Use css para ter maior controle sobre listas. No entanto, algumas formatações podem não funcionar em determinados browses.

25 Personalização 25 Junto com a tag <ol> podemos utilizar dois atributos : type= A (permite que se especifique o tipo de sistema de numeração): A maiúsculas, a minúsculas, I numerais romanos grandes e i numerais romanos pequenos) e start= 1 para determinar o início da contagem da lista. <ol type= A start= A >

26 Dúvidas 26 Perguntas?