Autoria web

Hipertexto

Assim como um livro se comunica com uma outra seção, por exemplo:"...para ler mais sobre impressoras consulte o item 6.4...". As páginas Web utilizam essa interconexão de forma mais rápida, apenas um clique, por estarmos em um espaço cibernético (ciberespaço). Hipertexto pode ser chamado de link ou de hiperlink.

Uma âncora tem a capacidade (quando levantada) dar continuidade a viagem levando os passageiros para outro lugar. O mesmo acontece em páginas, um objeto âncora pode levar o usuário para outros sites, páginas similares, páginas equivalente à propaganda, páginas de outros países e assim por diante. Esse elemento se chama âncora: <a>

Âncoras externas

  1. Vínculo direto com outro documento, alvo totalmente endereçado
  2. A âncora deve conter no mínimo um atributo 'href' que fará a interconexão
  3. Estrutura:
    <a href="url" title="breve descrição sobre o link">Texto que aparecerá ancorado</a>
  4. Exemplo:
    <a href="http://docente.ifrn.edu.br/moisessouto" title="Página do professor de autoria web IFRN">
    	Página do professor de autoria web
    </a>
  5. Exercício faça uma lista de links (no mín 7), para os site
    1. ifrn
    2. Moisés
    3. Google
    4. Geinf
    5. Escolha links que você acessa

Âncoras interna

  1. São hiperligações dentro do próprio site ou dos seus próprios arquivos
  2. A definição do atributo 'href' não será mais uma URL e sim um caminho relativo
  3. Sintaxe:
    <a href="bloco5.htm">Bloco 5 - Terça</a>
    <a href="imagens/exercicio_sab17.jpg">Bloco 5 - Terça</a>
  4. Exemplo: Bloco 5 - Terça
  5. Exemplo 2: Imagem do exercício de sábado
  6. Exercício: Fazer uma página web que interligue com todos os exemplos já feitos, utilizando lista

CSS: transformação de âncoras

  1. O css define efeitos mais dinâmicos para os elementos âncoras, com psedo-classes (4)
  2. É importante a ordem de definição das regras para os estados dos links:
  3. Não visitado - link normal
  4. Visitado - link que já foi clicado
  5. Over (mouse sobre) - efeito ao passar o mouse em cima
  6. Ativo - efeito quando o mouse está clicando
  7. Exemplo
    1.  
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" 
      	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt-br">
      <head>
      	<title>Exemplos links</title>
      	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      	<style type="text/css">
      	<!--
      	a:link{
      		background-color : #004A90;
      		color : White;
      		text-decoration : none;
      	}
      	a:visited {
      		background-color : Green;
      		color : White;
      		text-decoration: none
      	}
      	a:hover {
      		background-color : #0B87FF;
      		color : White;
      		text-decoration : none;
      	}
      	a:active {
      		text-decoration: none;
      		background-color : #9FD0FF;
      		color : Black;	
      	}
      	-->
      	</style>
      </head>
      
      <body>
      <ol>
      	<li>
      		<a href="http://docente.ifrn.edu.br/moisessouto" title="Página do professor" >
      			Página de Moisés
      		</a>
      	</li>
      	<li>
      		<a href="http://www.ifrn.edu.br" title="Página do ifrn" >
      			Página do ifrn
      		</a>
      	</li>
      	
      </ol>
      
      </body>
      </html>
      							
      							
  8. Resultado:
    1. Página de Moisés
    2. Página do ifrn

Vinculo dentro da página

  1. A diferença está na adição de um parâmetro no atributo 'href' e na especificação do local o qual será mostrado
  2. Utilizado em página extensa
  3. Exemplo (Incompleto):
    <a name="topo"></a>
    <h1>AUTORIA WEB</h1>
    <a name="ancora"></a>
    <h2>ÂNCORAS</h2>
    <a href="#topo">Ir para o topo</a>
    <a href="#ancora">Ir para âncoras</a>				
    				
  4. Exemplo, navegue por essa página:
    1. Topo da página
    2. Âncora externa
    3. Âncora interna
    4. CSS para âncoras

Ancora para e-mail

  1. Vinculo direto para o serviço de e-mail
  2. Obs.: só funciona para usuários que utilizam softwares para envio/recebimento de email como o outlook, gmail notifier
  3. Hoje não é muito colocado em páginas, o que existe é um formulário contato - é mais funcional. Exemplo: Contato página Moisés
  4. Sintaxe: <a href="mailto:moises.souto@ifrn.edu.br" title="E-mail de moises">moises.souto@ifrn.edu.br</a>
  5. Exemplo: moises.souto@ifrn.edu.br

W3C

  1. A W3C faz a verificação dos hiperlinks da página
  2. Link Checker