SlideShare uma empresa Scribd logo
1 de 3
Baixar para ler offline
Universidade da Região da Campanha – Curso Técnico em Informática
Desenvolvimento para Web - Professora Denise Aristimunha de Lima

Emento A

<a href></a>
Elemento âncora – Destina-se a marcar um conteúdo qualquer do documento (texto,
imagem etc) com o qual o usuário poderá interagir, clicando com o botão do mouse.
Faz um link, uma ligação para um documento ou conteúdo web.


Atributo href=“uri”
Identifica o URI, sigla em inglês para Uniform Resource Identifier
(o endereço na web), onde está hospedado o documento que será aberto quando o
link for acionado.


Exemplo link padrão

<a href=“http://www.urcamp.tche.br”>site da urcamp</a>

A marcação mostra um link para o site da urcamp.



Atributo Title
Destina-se a indicar alguma referência em relação ao link que será clicado.

< a href=“http://www.orkut.com” title=“acesse o orkut”>Orkut</a>
Quando o curso se posicionar em cima do link, a frase “acesse o Orkut” aparecerá.



Atributo Target
Define como o documento destino do link será carregado ou aberto. Os valores possíveis são
os seguintes:

_blank - O documento abre em uma nova janela.

_parent O documento destino abre em uma janela pai do documento atual.

_self o documento destino abre na mesma janela do documento atual.

_top O documento destino abre no corpo da janela do documento atual.

<a href=“http://www.w3c.org” target="_blank”>Link para world wide web
consortium</a>

Abre o documento em uma nova janela.
Tipos de link

Para um link local (link relativo)
Para ir a uma subpágina. Página que se encontra no mesmo diretório e no mesmo
servidor, sendo assim, só necessita do nome do arquivo.

<a href=“historia.html”>história</a>

O link vai para uma página localizada no mesmo diretório.



Link absoluto
Para ir a uma página externa. Página que se encontra em outro servidor.

<a href=“http://www.orbita.com/nome_diretorio/historia.html">História</a>

O link vai para uma página localizada em outro local.


Fazer um link através de uma imagem
Pode-se utilizar o elemento img dentro do elemento âncora para chamar um link
através de uma imagem.

O atributo border deixa a imagem sem a marcação de link (tira a borda azul que
referência a imagem como link).

<a href=“http://www.google.com”><img src=“logo.gif” border=“0”></a>




Serviço de email
Pode ser utilizado outro serviço como o correio eletrônico através de um link.

<a href=“mailto:atendimento@gmail.com” >Enviar e-mail para Atendimento</a>




Atributo Name
Identifica um determinado ponto do documento que poderá ser utilizado como destino de um
link. È a chamada navegação interna (quando um link acionado em vez de partir para um
documento novo, vai até um ponto localizado no próprio documento.
<a href=“#link1”>Link para cabeçalho 1</a>
...
<h1 name=“link1”>Cabeçalho 1</h1>
<pre>Tollimus autem et abolemus omnino vetus kalen</pre>



Para fazer download através de um link
Serve para baixar um documento que esteja naquele servidor.

<a href=“historia_www.doc” target=“window”>História da World Wide Web</a>




SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora, 2008.

Mais conteúdo relacionado

Destaque

M 02 imou13_представление тренинга
M 02 imou13_представление тренингаM 02 imou13_представление тренинга
M 02 imou13_представление тренингаYuri Bogachkov
 
Red de Contenidos Audiovisuales y Multimedia de las Universidades Españolas
Red de Contenidos Audiovisuales y Multimedia de las Universidades EspañolasRed de Contenidos Audiovisuales y Multimedia de las Universidades Españolas
Red de Contenidos Audiovisuales y Multimedia de las Universidades EspañolasVLC/CAMPUS
 
Wonders Of The Sky 2009 Dark Sky 02
Wonders Of The Sky 2009 Dark Sky 02Wonders Of The Sky 2009 Dark Sky 02
Wonders Of The Sky 2009 Dark Sky 02BHSEarthScience
 
Plan avanza 2011 iso 20000
Plan avanza 2011 iso 20000Plan avanza 2011 iso 20000
Plan avanza 2011 iso 20000ITsencial
 
TCC_Felipe_Antunes_Correção
TCC_Felipe_Antunes_CorreçãoTCC_Felipe_Antunes_Correção
TCC_Felipe_Antunes_CorreçãoFelipe Antunes
 
Servidor De Correo En Fedora
Servidor De Correo En FedoraServidor De Correo En Fedora
Servidor De Correo En FedoraStiven Marin
 
Moeda, Inércia, Conflito, o Fisco e a Inflação: Teoria e Retórica dos Economi...
Moeda, Inércia, Conflito, o Fisco e a Inflação: Teoria e Retórica dos Economi...Moeda, Inércia, Conflito, o Fisco e a Inflação: Teoria e Retórica dos Economi...
Moeda, Inércia, Conflito, o Fisco e a Inflação: Teoria e Retórica dos Economi...Grupo de Economia Política IE-UFRJ
 
Cartilha de redação web
Cartilha de redação webCartilha de redação web
Cartilha de redação webSamuel Lima
 
Relatório Proppi
Relatório ProppiRelatório Proppi
Relatório Proppithiagopetra
 
Popper - Alguns sites
Popper - Alguns sitesPopper - Alguns sites
Popper - Alguns sitesJoaquim Melro
 
RUDN. CAREER DAYS
RUDN. CAREER DAYSRUDN. CAREER DAYS
RUDN. CAREER DAYSEFedchenko
 

Destaque (20)

M 02 imou13_представление тренинга
M 02 imou13_представление тренингаM 02 imou13_представление тренинга
M 02 imou13_представление тренинга
 
Projeto lendoetecendoscebiasi
Projeto lendoetecendoscebiasiProjeto lendoetecendoscebiasi
Projeto lendoetecendoscebiasi
 
Relatorio Proppi
Relatorio ProppiRelatorio Proppi
Relatorio Proppi
 
Ismt Renovavel
Ismt RenovavelIsmt Renovavel
Ismt Renovavel
 
Contacto
ContactoContacto
Contacto
 
T8 0156 0676
T8 0156 0676T8 0156 0676
T8 0156 0676
 
Red de Contenidos Audiovisuales y Multimedia de las Universidades Españolas
Red de Contenidos Audiovisuales y Multimedia de las Universidades EspañolasRed de Contenidos Audiovisuales y Multimedia de las Universidades Españolas
Red de Contenidos Audiovisuales y Multimedia de las Universidades Españolas
 
Wonders Of The Sky 2009 Dark Sky 02
Wonders Of The Sky 2009 Dark Sky 02Wonders Of The Sky 2009 Dark Sky 02
Wonders Of The Sky 2009 Dark Sky 02
 
Plan avanza 2011 iso 20000
Plan avanza 2011 iso 20000Plan avanza 2011 iso 20000
Plan avanza 2011 iso 20000
 
TCC_Felipe_Antunes_Correção
TCC_Felipe_Antunes_CorreçãoTCC_Felipe_Antunes_Correção
TCC_Felipe_Antunes_Correção
 
Servidor De Correo En Fedora
Servidor De Correo En FedoraServidor De Correo En Fedora
Servidor De Correo En Fedora
 
Moeda, Inércia, Conflito, o Fisco e a Inflação: Teoria e Retórica dos Economi...
Moeda, Inércia, Conflito, o Fisco e a Inflação: Teoria e Retórica dos Economi...Moeda, Inércia, Conflito, o Fisco e a Inflação: Teoria e Retórica dos Economi...
Moeda, Inércia, Conflito, o Fisco e a Inflação: Teoria e Retórica dos Economi...
 
Cartilha de redação web
Cartilha de redação webCartilha de redação web
Cartilha de redação web
 
Relatório Proppi
Relatório ProppiRelatório Proppi
Relatório Proppi
 
Popper - Alguns sites
Popper - Alguns sitesPopper - Alguns sites
Popper - Alguns sites
 
Processo Eletrônico e Hipetexto
Processo Eletrônico e HipetextoProcesso Eletrônico e Hipetexto
Processo Eletrônico e Hipetexto
 
RUDN. CAREER DAYS
RUDN. CAREER DAYSRUDN. CAREER DAYS
RUDN. CAREER DAYS
 
Formularios
FormulariosFormularios
Formularios
 
UoC-Profile-Guide-LQ
UoC-Profile-Guide-LQUoC-Profile-Guide-LQ
UoC-Profile-Guide-LQ
 
Plantas indrustrial
Plantas indrustrialPlantas indrustrial
Plantas indrustrial
 

Semelhante a Elemento ancora

WebDesign - Aula05 - Links.pptx
WebDesign - Aula05 - Links.pptxWebDesign - Aula05 - Links.pptx
WebDesign - Aula05 - Links.pptxGabrielaMota46
 
Html - capitulo 10
Html - capitulo 10Html - capitulo 10
Html - capitulo 10Alvaro Gomes
 
Uso de imagens e links com HTML
Uso de imagens e links com HTMLUso de imagens e links com HTML
Uso de imagens e links com HTMLLeonardo Soares
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoLuisFalco8
 
Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04Leandro Rezende
 
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font Endmvcbotelho
 
Aula2 - Curso Web-Design - ETECA Camargo Aranha
Aula2 - Curso Web-Design - ETECA Camargo Aranha Aula2 - Curso Web-Design - ETECA Camargo Aranha
Aula2 - Curso Web-Design - ETECA Camargo Aranha fevooduck
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Manual_html.pptx Curso_Técnico Informática de Sistemas
Manual_html.pptx Curso_Técnico Informática de SistemasManual_html.pptx Curso_Técnico Informática de Sistemas
Manual_html.pptx Curso_Técnico Informática de SistemasElsaValada
 

Semelhante a Elemento ancora (20)

WebDesign - Aula05 - Links.pptx
WebDesign - Aula05 - Links.pptxWebDesign - Aula05 - Links.pptx
WebDesign - Aula05 - Links.pptx
 
06 html links e frames
06 html   links e frames06 html   links e frames
06 html links e frames
 
Link
LinkLink
Link
 
Html - capitulo 10
Html - capitulo 10Html - capitulo 10
Html - capitulo 10
 
Aula 4 – Linguagem HTML - Imagens e links
Aula 4 – Linguagem HTML - Imagens e linksAula 4 – Linguagem HTML - Imagens e links
Aula 4 – Linguagem HTML - Imagens e links
 
Uso de imagens e links com HTML
Uso de imagens e links com HTMLUso de imagens e links com HTML
Uso de imagens e links com HTML
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançado
 
Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font End
 
Curso html
Curso htmlCurso html
Curso html
 
Html básico 3 links
Html básico 3   linksHtml básico 3   links
Html básico 3 links
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Aula2 - Curso Web-Design - ETECA Camargo Aranha
Aula2 - Curso Web-Design - ETECA Camargo Aranha Aula2 - Curso Web-Design - ETECA Camargo Aranha
Aula2 - Curso Web-Design - ETECA Camargo Aranha
 
Html 02
Html 02Html 02
Html 02
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Dream 07
Dream 07Dream 07
Dream 07
 
Dream 07
Dream 07Dream 07
Dream 07
 
Manual_html.pptx Curso_Técnico Informática de Sistemas
Manual_html.pptx Curso_Técnico Informática de SistemasManual_html.pptx Curso_Técnico Informática de Sistemas
Manual_html.pptx Curso_Técnico Informática de Sistemas
 

Mais de Denise Lima

Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Denise Lima
 
Movimentos artísticos início século XX
Movimentos artísticos início século XXMovimentos artísticos início século XX
Movimentos artísticos início século XXDenise Lima
 
Bauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalBauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalDenise Lima
 
Artigo cientifico
Artigo cientificoArtigo cientifico
Artigo cientificoDenise Lima
 
Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisaDenise Lima
 
Tecnicas para composição.
Tecnicas para composição.Tecnicas para composição.
Tecnicas para composição.Denise Lima
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografiaDenise Lima
 
Dicas assombrosas
Dicas assombrosasDicas assombrosas
Dicas assombrosasDenise Lima
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacionalDenise Lima
 
Design antes do design
Design antes do designDesign antes do design
Design antes do designDenise Lima
 
Dreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDenise Lima
 
Trabalho layout elastico
Trabalho layout elasticoTrabalho layout elastico
Trabalho layout elasticoDenise Lima
 
CSS parte II pdf...
CSS parte II pdf...CSS parte II pdf...
CSS parte II pdf...Denise Lima
 

Mais de Denise Lima (20)

Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2
 
Movimentos artísticos início século XX
Movimentos artísticos início século XXMovimentos artísticos início século XX
Movimentos artísticos início século XX
 
Pós modernismo
Pós modernismoPós modernismo
Pós modernismo
 
Pop art
Pop artPop art
Pop art
 
Pop art
Pop artPop art
Pop art
 
Bauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalBauhaus & Estilo Internacional
Bauhaus & Estilo Internacional
 
Artigo cientifico
Artigo cientificoArtigo cientifico
Artigo cientifico
 
Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisa
 
Tecnicas para composição.
Tecnicas para composição.Tecnicas para composição.
Tecnicas para composição.
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografia
 
Dicas assombrosas
Dicas assombrosasDicas assombrosas
Dicas assombrosas
 
Raizes design
Raizes designRaizes design
Raizes design
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacional
 
Design antes do design
Design antes do designDesign antes do design
Design antes do design
 
Dreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remoto
 
Trabalho layout elastico
Trabalho layout elasticoTrabalho layout elastico
Trabalho layout elastico
 
Css parte iii_b
Css parte iii_bCss parte iii_b
Css parte iii_b
 
Css parte iii_a
Css parte iii_aCss parte iii_a
Css parte iii_a
 
CSS parte II pdf...
CSS parte II pdf...CSS parte II pdf...
CSS parte II pdf...
 
Css parte II
Css parte IICss parte II
Css parte II
 

Elemento ancora

  • 1. Universidade da Região da Campanha – Curso Técnico em Informática Desenvolvimento para Web - Professora Denise Aristimunha de Lima Emento A <a href></a> Elemento âncora – Destina-se a marcar um conteúdo qualquer do documento (texto, imagem etc) com o qual o usuário poderá interagir, clicando com o botão do mouse. Faz um link, uma ligação para um documento ou conteúdo web. Atributo href=“uri” Identifica o URI, sigla em inglês para Uniform Resource Identifier (o endereço na web), onde está hospedado o documento que será aberto quando o link for acionado. Exemplo link padrão <a href=“http://www.urcamp.tche.br”>site da urcamp</a> A marcação mostra um link para o site da urcamp. Atributo Title Destina-se a indicar alguma referência em relação ao link que será clicado. < a href=“http://www.orkut.com” title=“acesse o orkut”>Orkut</a> Quando o curso se posicionar em cima do link, a frase “acesse o Orkut” aparecerá. Atributo Target Define como o documento destino do link será carregado ou aberto. Os valores possíveis são os seguintes: _blank - O documento abre em uma nova janela. _parent O documento destino abre em uma janela pai do documento atual. _self o documento destino abre na mesma janela do documento atual. _top O documento destino abre no corpo da janela do documento atual. <a href=“http://www.w3c.org” target="_blank”>Link para world wide web consortium</a> Abre o documento em uma nova janela.
  • 2. Tipos de link Para um link local (link relativo) Para ir a uma subpágina. Página que se encontra no mesmo diretório e no mesmo servidor, sendo assim, só necessita do nome do arquivo. <a href=“historia.html”>história</a> O link vai para uma página localizada no mesmo diretório. Link absoluto Para ir a uma página externa. Página que se encontra em outro servidor. <a href=“http://www.orbita.com/nome_diretorio/historia.html">História</a> O link vai para uma página localizada em outro local. Fazer um link através de uma imagem Pode-se utilizar o elemento img dentro do elemento âncora para chamar um link através de uma imagem. O atributo border deixa a imagem sem a marcação de link (tira a borda azul que referência a imagem como link). <a href=“http://www.google.com”><img src=“logo.gif” border=“0”></a> Serviço de email Pode ser utilizado outro serviço como o correio eletrônico através de um link. <a href=“mailto:atendimento@gmail.com” >Enviar e-mail para Atendimento</a> Atributo Name Identifica um determinado ponto do documento que poderá ser utilizado como destino de um link. È a chamada navegação interna (quando um link acionado em vez de partir para um documento novo, vai até um ponto localizado no próprio documento.
  • 3. <a href=“#link1”>Link para cabeçalho 1</a> ... <h1 name=“link1”>Cabeçalho 1</h1> <pre>Tollimus autem et abolemus omnino vetus kalen</pre> Para fazer download através de um link Serve para baixar um documento que esteja naquele servidor. <a href=“historia_www.doc” target=“window”>História da World Wide Web</a> SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora, 2008.