A capacidade de criar um link em um documento que leva você a outro documento, talvez em uma rede do outro lado do mundo, é sem dúvida a razão mais importante pela qual a World Wide Web foi inventada. Esses links, chamados hiperlinks, são o "H" em HTML (HyperText Markup Language). Sem hiperlinks, a web não seria muito útil. Não haveria mecanismos de busca, mídia social ou banners (ok, a maioria de nós poderia suportar ver isso).
Quando você está criando suas próprias páginas da web, você vai querer criar hiperlinks, e o KompoZer possui ferramentas que facilitam a adição de links de qualquer tipo. A página de amostra mostrada neste tutorial conterá links para outros sites em quatro categorias, para outras partes da mesma página da Web e para iniciar uma mensagem de e-mail. Vou começar com um cabeçalho e quatro
H3 títulos para cada categoria. Na próxima página, adicionaremos alguns links. 01 de 05
Criando um hiperlink com o KompoZer
As ferramentas de hyperlink do KompoZer são acessadas clicando no botão Link na barra de ferramentas. Para criar um hiperlink:
- Coloque o cursor na página onde você deseja que seu hiperlink apareça.
- Clique no botão Link na barra de ferramentas. A caixa de diálogo Propriedades do link será exibida.
- O primeiro campo que você precisa preencher é a caixa Link Text. Digite o texto que você deseja que apareça na página do seu hiperlink.
- O segundo campo que você precisa preencher é a caixa Local do link. Digite o URL da página que o seu hiperlink levará o usuário quando clicado. É uma boa ideia copiar e colar o URL na barra de endereço do seu navegador. É muito menos provável que você cometa um erro dessa maneira e saiba, pelo menos no momento da criação do seu link, que a página está ativa e que o link não está quebrado.
- Clique em OK e a caixa de diálogo Propriedades do link será fechada. Seu link aparecerá agora na sua página.
Na maioria dos navegadores, o hiperlink aparecerá em texto sublinhado azul por padrão. Você pode aplicar seus próprios estilos a hiperlinks com o KompoZer, mas por enquanto, vamos ficar com o hyperlink básico. É uma boa ideia visualizar sua página em um navegador da Web e clicar nos links para garantir que funcionem.
02 de 05Criando um link de âncora com o KompoZer
Existe outro tipo de hiperlink que leva você a outra parte da mesma página da web quando clicado. Esse tipo de hyperlink é chamado de link de âncora, e a área da página para a qual você é levado quando clica nesse link é chamada de âncora. Se você já usou o link “voltar ao topo” na parte inferior de uma página da web, você está clicando em um link para uma âncora.
O KompoZer permite criar âncoras para as quais você pode vincular usando a ferramenta Âncora na barra de ferramentas.
- Clique na área da sua página onde você deseja uma âncora. Isto é, onde você deseja que o visualizador de páginas seja levado quando um link de âncora é clicado. Para este exemplo, cliquei logo antes do "F" no cabeçalho de músicas favoritas.
- Clique no botão Âncora na barra de ferramentas. A caixa de diálogo Propriedades da âncora nomeada é exibida.
- Cada âncora em uma página precisa de um nome exclusivo. Para esta âncora, usei o nome “music”.
- Clique em OK e você deverá ver, e o símbolo de âncora aparecerá no local em que você deseja a âncora. Este símbolo não aparecerá na sua página web, é apenas como o KompoZer mostra onde estão as suas âncoras.
- Repita o procedimento para quaisquer outras áreas da página onde você deseja que os usuários possam pular. Se você tiver muitos textos na página separados por títulos ou algum outro divisor lógico, as âncoras são uma maneira fácil de navegar em uma página.
Em seguida, criaremos os links que levam o leitor às âncoras que você criou.
03 de 05Criando a navegação de página com o KompoZer
Agora que você tem âncoras na sua página, vamos criar os links que serão usados como atalhos para essas âncoras. Para este tutorial, criei uma tabela de 1 linha e 4 colunas abaixo do cabeçalho superior da página. Cada célula da tabela contém o mesmo texto que um dos cabeçalhos de categoria usados para separar os links na página. Vamos tornar o texto em cada uma dessas células da tabela um link para a âncora correspondente.
04 de 05Criando hiperlinks para âncoras com o KompoZer
Agora que temos nossas âncoras no lugar e o texto que usaremos para navegação na página, podemos transformar esses trechos em texto puro em links. Vamos usar o botão Link novamente, mas desta vez vai funcionar um pouco diferente.
- Selecione o texto que você deseja transformar em um link. Neste exemplo, selecionei o texto “Música favorita”, que está na primeira célula da tabela, na parte superior da página.
- Clique no botão Link na barra de ferramentas. A caixa de diálogo Propriedades do link será aberta.
- Neste caso, selecionamos o texto antes de clicar no botão Link, de modo que a seção Link Text da janela já está preenchida e não pode ser editada. Clique na seta para baixo na seção Localização do link. Você verá uma lista das âncoras que você criou nas etapas anteriores. Para este exemplo, seleciono a âncora #music.
- Clique OK. O texto “Música favorita” na barra de navegação se transforma em um link que fará com que o espectador pule para essa seção na página quando clicado.
Você notará que cada âncora nomeada no menu suspenso tem um sinal “#” na frente dela. É assim que você criaria um link para uma âncora em HTML. O “#” na frente do nome da âncora diz ao navegador que este link leva você para outro lugar na mesma página.
05 de 05Criando um hiperlink de uma imagem com o KompoZer
Você sabia que pode criar um link de imagens e texto? KompoZer permite que você faça isso usando apenas alguns cliques. Aqui, inseri uma pequena imagem de ícone mostrando uma seta apontando para cima e o texto “TOP” na parte inferior da página. Eu vou usar essa imagem como um link para voltar ao topo da página.
- Clique com o botão direito do mouse em uma imagem e escolha Propriedades de imagem e link no rótulo de contexto. A caixa de diálogo Propriedades da imagem será aberta.
- Na guia Local, você verá o nome do arquivo da imagem e uma exibição em miniatura já preenchida. Você deve inserir algum texto na caixa de texto Alternar. Isso é o que aparece quando você move o mouse sobre a imagem e também o que é lido por um leitor de tela quando uma pessoa com deficiência visual lê a página da web.
- Clique na guia Link. Aqui você pode escolher uma âncora no menu, assim como fizemos com os links âncora. Na verdade, esta imagem está sendo usada como um link de âncora. Selecionei a âncora #Links_Of_Interest que nos levará de volta ao topo.
- Clique OK. A imagem agora é vinculada ao topo da página quando clicada.
