Hiperlinks. Hiperlinks. Hiperlinks. Tag <a></a> Hiperlinks 07/05/2011

Tamanho: px

Começar a partir da página:

Download "Hiperlinks. Hiperlinks. Hiperlinks. Tag <a></a> Hiperlinks 07/05/2011"

Marco Antônio Octavio Camarinho de Almeida
5 Há anos
Visualizações:

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

1 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 2 Documentos hipertexto permitem estabelecer fluxos não-lineares de leitura (é a parte HT na linguagem de marcação) Rhavy Maia Guedes rhavy.maia@gmail.com 3 4 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; Links Tag <a> 5 6 Links Usada para criar hiperlinks <a> href = endereço title = Título do Link target _blank _parent _self <a href= noticias.html title = Notícias target= _self >Link _top framename 1

Link para outras Páginas 7 É possível fazer ligações para outras páginas web <a href= http://www.w3schools.com title = W3C target= _blank >W3C <a href= http://www.google.com.br title = Busca= _self >Gooogle!

2 Link para outras Páginas 7 É possível fazer ligações para outras páginas web <a href= title = W3C target= _blank >W3C <a href= title = Busca= _self >Gooogle! 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 <a href= title = Blog target= _blank >Blog path_absoluto: é o caminho da pasta raiz no servidor até o recurso nome_do_site: é composto do nome do servidor +nome do domínio A URL é a forma padronizada e integrada de identificação de qualquer recurso no domínio da Internet; Outros exemplos: al.pdf ftp://ftp.dsc.ufcg.edu.br/pub/software/download/tw eak.exe URL s Absolutas versus Relativas: <a href= usr/docs/edital.pdf >edital <a href= > Edital protocolo://nome_do_site/path_absoluto Endereço Relativo Âncoras Igual ao que utilizamos para informar o endereço de imagens: <a href= imagem/ifpb.png title = Blog target= _blank >Blog <a href= title = Blog target= _blank > <img src= imagem/ifpb.png > <a href= title = IFPB target= _blank > IFPB <img src= imagem/ifpb.png alt= Instituto... >? 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). 2

Âncoras Âncoras Passos Iniciais 13 14 Em outras palavras uma Âncora é uma referência dentro de uma página HTML que pode ser acessada por um link; Encontre o local na página onde você quiser criar um

Âncoras Referencias Âncoras - Passos Finais 15 16 Para criar uma âncora em algum lugar da página deve-se colocar um nome de referência para o link poder acessá-lo.

3 Âncoras Âncoras Passos Iniciais Em outras palavras uma Âncora é uma referência dentro de uma página HTML que pode ser acessada por um link; 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>. Âncoras Referencias Âncoras - Passos Finais 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 > 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. Exemplo: Atenção: utilizar o atributo name ou id para identificar o marcador. <a name= cafe > Âncoras - Links Listas Para se criar o link que acessará a âncora usa-se o comando: <a href= #nome_da_referencia >Texto do Link Itens seqüenciais; São blocos que contém itens de listas; Arranjar grupos similares; 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 href= >Fórmula 1 3

4 19 20 Primeiro passo: Segundo passo: Determinar os itens da lista. Determinar qual tipo de lista você vai utilizar: Ordenada; Sorvetes Disciplinas Desordenada Disciplinas Sorvetes Ordenada! Desordenada! 21 Quais são as <tags>? 22 Primeiro passo: Segundo passo: Itens são definidos através da tag <li>; Tipos de lista são determinado por: UL Lista desordenada; OL Lista ordenada. Lembrete das Listas Personalização Em inglês: unordered list = ul ordered list = ol list item = li É possível escolher o tipo dos bullets para lista desordenadas que serão apresentados através do atributo: <ul type= cicle > SQUARE; CIRCLE; <ul type= circle > DISC. Use css para ter maior controle sobre listas. No entanto, algumas formatações podem não funcionar em determinados browses. 4

Personalização Dúvidas 25 26 Junto com a tag <ol> podemos utilizar dois atributos : type= A (permite que se especifique o tipo de sistema de numeração): A

5 Personalização Dúvidas 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 > Perguntas? 5

Documentos relacionados

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

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 rhavy.maia@gmail.com Hiperlinks