Categories

Crear enlaces en un editor HTML

Chris Diaz noviembre 15, 2010
Rating: 5.0. From 1 vote.
Please wait...

En este tutorial puede encontrar instrucciones para asignar vínculos en el editor de HTML.

En primer lugar abra el fichero HTML que contiene el texto de su enlace. Se puede editar el fichero mediante cualquier editor de HTML, sin embargo le recomendamos utilizar las aplicaciones Adobe Dreamweaver o Notepad++.

Modo de diseño

Adobe Dreamweaver ofrece el modo de diseño para los desarrolladores web. Puede activar el modo de diseño utilizando los botones correspondientes en la esquina superior izquierda de su pantalla.

Hay que activar el panel de Properties (Propiedades). Usando el menú de navegación superior, elija Window > Properties (Ventana > Propiedades). Ahora en la parte inferior de la pantalla puede encontrar el panel de Propiedades.

Seleccione cualquier texto y en el panel de Properties entre el enlace al fichero PSD en el campo Link (Enlace).

Como se puede ver en la siguiente captura de pantalla utilizamos el símbolo # como una dirección URL. Puede sustituirlo por la ruta del fichero en su servidor o con el URL del sitio web.

También se puede usar el cuadro de selección Target si desea que el enlace se abra en una nueva ventana, nueva pestaña o ventana del navegador.

Modo de HTML

Si está trabajando con los ficheros HTML en el modo de código. Puede asignar enlaces de la siguiente manera:

1. Busque el texto para agregar enlace.

2. Antes de texto agregue la etiqueta de enlace: <a href="#">

3. Después de texto que agregue la etiqueta de cierre de vínculo: </a>

4. Reemplace el símbolo # en el atributo href con la ruta del fichero en su servidor o la dirección URL.

Como resultado Usted debe obtener lo siguiente:

<a href="http://info.template-help.com">tutoriales de plantillas web en línea </a>

The code above will display text: “tutoriales de plantillas web en línea” vinculado a la página web “http://info.template-help.com

Ruta de enlace relativa vs absoluta

Hay 2 formas de crear vínculo al fichero específico en su servidor: ruta relativa y ruta absoluta.

Se puede utilizar la ruta relativa sólo para crear enlaces a los ficheros en su servidor.

En el ejemplo vamos a crear un enlace al fichero PDF. Tenemos la siguiente estructura de ficheros:

  • pdf
  • readme.pdf
  • index.html

El fichero PDF se llama readme.pdf y se coloca en la carpeta PDF. Nuestro vínculo se encuentra en el fichero index.html.

Ruta relativa

En este caso el enlace al fichero PDF es:

link text

Como se puede ver en el atributo href del enlace especificamos el directorio donde se encuentra el fichero PDF y el nombre del fichero pdf. La ruta de acceso al fichero es relativa al fichero index.html. Puede consultar la tabla:

Ruta de Servidor…Lo que significa…
<a href="readme.pdf">readme.pdf se encuentra en este directorio.
<a href="pdf/readme.pdf">readme.pdf se encuentra en una carpeta (directorio) llamada pdf. La carpeta "tips" se encuentra en este directorio.
<a href="pdf/new/readme.pdf">readme.pdf se encuentra en una carpeta llamada new que se encuentra en una carpeta llamada pdf tque se encuentra en esta carpeta.
<a href="../readme.pdf">readme.pdf se encuentra en una carpeta del nivel superior del directorio actual.
<a href="../../readme.pdf">readme.pdf se encuentra en una carpeta que es colocada dos niveles arriba.

Ruta absoluta

Utilizando la ruta absoluta Usted define la ruta completa al fichero en su servidor a partir de su nombre de dominio. Usando la misma estructura de ficheros igual que utilizabamos en el ejemplo anterior, obtenenmos la siguiente ruta:

texto_de_enlace

Si necesitacrear un enlace a la página web, el código será:

texto_de_enlace

Por favor, no se olvide de reemplazar http://info.template-help.com con su URL del sitio web.

Esta entrada fue publicada el Trabajar con HTML y etiquetada HTML, links. Agregar enlace permanente a marcadores.

Submit a ticket

Si Usted todavía no puede encontrar un tutorial suficiente para arreglar su problema, por favor use el siguiente enlace para enviar un ticket a nuestro equipo de soporte técnico. Nosotros enviaremos nuestra respuesta dentro de próximas 24 horas: Enviar un ticket

  • Alveo

    I just sent this post to a bunch of my friends as I agree with most of what you’re saying here and the way you’ve presented it is awesome.

    No votes yet.
    Please wait...
  • Alveo

    You certainly deserve a round of applause for your post and more specifically, your blog in general. Very high quality material.

    No votes yet.
    Please wait...
  • Will Tobias

    You certainly deserve a round of applause for your post and more specifically, your blog in general. Very high quality material.

    No votes yet.
    Please wait...
  • kissy kissy baby wear

    Wonderful website you have here but I was wanting to know if you knew of any forums that cover the same topics talked about here? I’d really love to be a part of group where I can get comments from other experienced individuals that share the same interest. If you have any suggestions, please let me know. Thanks a lot!

    No votes yet.
    Please wait...
  • sample wedding invitations designs

    Very informative post. Thanks for taking the time to share your view with us.

    No votes yet.
    Please wait...
Chat en Vivo
We help you to choose the right product.