Aula 06
AW - 06 - 0602.htm
—
HTML,
7 kB (7186 bytes)
Conteúdo do arquivo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Autoria Web</title>
<link type="text/css" href="../../incs/bloco.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
li.resultado{
}
a.testea:link{
background-color : #004A90;
color : White;
text-decoration : none;
}
a.testea:visited {
background-color : Gray;
color : White;
text-decoration: none
}
a.testea:hover {
background-color : #0B87FF;
color : White;
text-decoration : none;
}
a.testea:active {
text-decoration: none;
background-color : #9FD0FF;
color : Black;
}
-->
</style>
</head>
<body>
<a name="topo"></a>
<h1>Autoria web</h1>
<h2>Hipertexto</h2>
<p>
Assim como um livro se comunica com uma outra se��o, por exemplo:<cite>"...para ler mais sobre impressoras consulte o item 6.4..."</cite>.
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.
</p>
<p>
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: <span class="cou"><a></span>
</p>
<a name="aext"></a>
<h2>�ncoras externas</h2>
<ol>
<li>V�nculo direto com outro documento, alvo totalmente endere�ado</li>
<li>A �ncora deve conter no m�nimo um atributo 'href' que far� a interconex�o</li>
<li>Estrutura: <pre><a href="url" title="breve descri��o sobre o link">Texto que aparecer� ancorado</a></pre></li>
<li>Exemplo:
<pre><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></pre>
</li>
<li>Exerc�cio fa�a uma lista de links (no m�n 7), para os site
<ol>
<li>ifrn</li>
<li>Mois�s</li>
<li>Google</li>
<li>Geinf</li>
<li>Escolha links que voc� acessa</li>
</ol>
</li>
</ol>
<a name="aint"></a>
<h2>�ncoras interna</h2>
<ol>
<li>S�o hiperliga��es dentro do pr�prio site ou dos seus pr�prios arquivos</li>
<li>A defini��o do atributo 'href' n�o ser� mais uma URL e sim um caminho relativo</li>
<li>Sintaxe:
<pre><a href="bloco5.htm">Bloco 5 - Ter�a</a>
<a href="imagens/exercicio_sab17.jpg">Bloco 5 - Ter�a</a></pre>
</li>
<li>Exemplo: <a href="http://docente.ifrn.edu.br/moisessouto/autoriaweb/aulas/bloco4.htm" class="anc">Bloco 5 - Ter�a</a></li>
<li>Exemplo 2: <a href="http://docente.ifrn.edu.br/moisessouto/autoriaweb/aulas/imagens/exercicio_sab17.jpg" class="anc">Imagem do exerc�cio de s�bado</a></li>
<li>Exerc�cio: Fazer uma p�gina web que interligue com todos os exemplos j� feitos, utilizando lista</li>
</ol>
<a name="cssa"></a>
<h2>CSS: transforma��o de �ncoras</h2>
<ol>
<li>O css define efeitos mais din�micos para os elementos �ncoras, com psedo-classes (4)</li>
<li>� importante a ordem de defini��o das regras para os estados dos links:</li>
<li>N�o visitado - link normal</li>
<li>Visitado - link que j� foi clicado</li>
<li>Over (mouse sobre) - efeito ao passar o mouse em cima</li>
<li>Ativo - efeito quando o mouse est� clicando</li>
<li>Exemplo
<ol>
<li class="nonelist">
<pre>
<!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>
</pre>
</li>
</ol>
</li>
<li class="resultado">Resultado:
<ol>
<li>
<a class="testea" href="http://docente.ifrn.edu.br/moisessouto" title="P�gina do professor">
P�gina de Mois�s
</a>
</li>
<li>
<a class="testea" href="http://www.ifrn.edu.br/" title="P�gina do ifrn">
P�gina do ifrn
</a>
</li>
</ol>
</li>
</ol>
<h2>Vinculo dentro da p�gina</h2>
<ol>
<li>A diferen�a est� na adi��o de um par�metro no atributo 'href' e na especifica��o do local o qual ser� mostrado</li>
<li>Utilizado em p�gina extensa</li>
<li>Exemplo (Incompleto):
<pre><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>
</pre>
</li>
<li>Exemplo, navegue por essa p�gina:
<ol>
<li><a href="#topo" title="Topo">Topo da p�gina</a></li>
<li><a href="#aext" title="�ncora externo">�ncora externa</a></li>
<li><a href="#aint" title="�ncora interno">�ncora interna</a></li>
<li><a href="#cssa" title="CSS para �ncoras">CSS para �ncoras</a></li>
</ol>
</li>
</ol>
<h2>Ancora para e-mail</h2>
<ol>
<li>Vinculo direto para o servi�o de e-mail</li>
<li>Obs.: s� funciona para usu�rios que utilizam softwares para envio/recebimento de email como o outlook, gmail notifier</li>
<li>Hoje n�o � muito colocado em p�ginas, o que existe � um formul�rio contato - � mais funcional. Exemplo: <a href="http://docente.ifrn.edu.br/moisessouto/contato"></a>Contato p�gina Mois�s</li>
<li>Sintaxe: <span class="cou"><a href="mailto:moises.souto@ifrn.edu.br" title="E-mail de moises">moises.souto@ifrn.edu.br</a></span></li>
<li>Exemplo: <a href="mailto:moises.souto@ifrn.edu.br" title="E-mail de moises">moises.souto@ifrn.edu.br</a> </li>
</ol>
<h2>W3C</h2>
<ol>
<li>A W3C faz a verifica��o dos hiperlinks da p�gina</li>
<li><a href="http://validator.w3.org/checklink" target="_blank">Link Checker</a></li>
</ol>
</body></html>
