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 2 Documentos hipertexto permitem estabelecer fluxos não-lineares de leitura (é a parte HT na linguagem de marcação)
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;
Hiperlinks 4 Links
Hiperlinks 5 Links
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>
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> <a href= http://www.google.com.br title = Busca= _self >Gooogle!</a> <a href= http://rhavymg.wordpress.com title = Blog target= _blank >Blog</a>
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 http://promocoes.loja.com.br/setembro/anuncio.pdf
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: http://www.cefeturutai.edu.br/concursos2008/edital.p df ftp://ftp.dsc.ufcg.edu.br/pub/software/download/twe ak.exe protocolo://nome_do_site/path_absoluto
Uniform Resource Locator - URL 10 URL s Absolutas versus Relativas: <a href= usr/docs/edital.pdf >edital</a> <a href= http://www.cefet.edu.br/usr/docs/edital.pdf > Edital </a>
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= http://www.ifpb.edu.br title = Blog target= _blank > <img src= imagem/ifpb.png > </a> <a href= http://www.ifpb.edu.br title = IFPB target= _blank > IFPB <img src= imagem/ifpb.png alt= Instituto... > </a>?
Â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).
Âncoras 13 Em outras palavras uma Âncora é uma referência dentro de uma página HTML que pode ser acessada por um link;
Â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>.
Â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 >
Â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.
Â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= http://www.uol.com/noticia#formula_1 >Fórmula 1</a>
Listas 18 Itens seqüenciais; São blocos que contém itens de listas; Arranjar grupos similares;
Construindo lista em dois passos fáceis. 19 Primeiro passo: Determinar os itens da lista. Sorvetes Disciplinas
Construindo lista em dois passos fáceis. 20 Segundo passo: Determinar qual tipo de lista você vai utilizar: Ordenada; Desordenada Disciplinas Sorvetes Ordenada! Desordenada!
Quais são as <tags>? 21 Primeiro passo: Itens são definidos através da tag <li>;
Construindo lista em dois passos fáceis. 22 Segundo passo: Tipos de lista são determinado por: UL Lista desordenada; OL Lista ordenada.
Lembrete das Listas 23 Em inglês: unordered list = ul ordered list = ol list item = li
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.
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 >
Dúvidas 26 Perguntas?