Home UC3M
Home IT
Home / Docencia / Introducción a HTML

Intro a HTML

Fases de Diseño de un sitio Web: III. Fase Producción

Índice
  1. Hiperenlaces

Los hiperenlaces o links son una parte del documento sobre la que podemos pulsar con el ratón para viajar a otro elemento que a su vez puede ser otro documento HTML, una imagen, un archivo dentro o fuera del servidor en el que nos encontremos, etc. Vamos a tratar 3 tipos fundamentales de enlaces:

  1. Enlaces externos. Son enlaces a otras páginas que pueden estar dentro del mismo servidor o en un servidor externo.
    1. Absolutos. Hacen referencia a una página web o un punto concreto de la misma mediante una dirección URL completa.
    2. Relativos. Hacen referencia a una página web o un punto concreto de la misma indicando su situación con respecto a la página actual.
  2. Enlaces internos. Son enlaces a puntos concretos de la misma página web en la que nos encontramos.

Normalmente los enlaces aparecen de distinto color cuando han sido pulsados. Esto permite dar una orientación al usuario indicando qué sitios ha visitado y cuales no. El navegador normalmente tiene unos colores predefinidos para los 2 estados del hiperenlace, por ejemplo: pulsado (color azul) sin pulsar (color violeta) pero estos colores pueden modificarse por el usuario (en las preferencias de su navegador) y por el editor de páginas HTML (mediante el uso de hojas de estilo).

Go Up
  2. Hiperenlaces externos

Los hiperenlaces externos nos permiten movernos de un documento a otro pulsando sobre una porción del texto. Para crear un hiperenlace a un documento externo debemos indicar al menos dos cosas:

  1. En qué zona de nuestro documento queremos ubicar el enlace. Esto lo haremos mediante la etiqueta <a>...</a> (del inglés anchor que significa ancla).
  2. A qué documento externo nos va a llevar el hiperenlace cuando pulsemos sobre él. Esto lo haremos mediante el atributo href de la etiqueta <a>. Se escribiría: <a href="URL_DESTINO">texto sobre el que se pulsa</a> donde "URL_DESTINO" indica la dirección web de la página con la que queremos enlazar.

El texto que se encuentra entre las etiquetas <a>...</a> es lo que llamamos ancla y es la parte de nuestro documento que aparece marcada en azul sobre la que podemos pulsar para cambiar de página. La dirección que aparece como valor del atributo href es lo que llamamos referencia y es la dirección a la que viajaremos cuando pulsemos sobre el ancla tal y como se muestra en la siguiente figura:


Ejercicio

Tarea:

Practica los enlaces de hipertexto con el editor interactivo.

Procedimiento:

  1. Abre el editor interactivo pulsando aquí.
  2. Escribe en el lado izquierdo el siguiente código HTML: 
    <HTML>
 <body>
  <h3>Hiperenlaces externos</h3>
  <p>Al escribir hiperenlaces se debe decidir a qué dirección conectará el enlace y cuál
     es el texto sobre el que se debe pulsar para acceder al nuevo documento:</p>

  <a HREF="http://www.elpais.es">Esto te llevará a la página principal de El País Digital</a>
    
 </body>
</HTML>
  3. Pulsa el botón submit y comprueba el resultado. Debe coincidir con el que se presenta a continuación:
Go Up

Solución:

Debería verse:

Hiperenlaces externos

Al escribir hiperenlaces se debe decidir a qué dirección conectará el enlace y cuál es el texto sobre el que se debe pulsar para acceder al nuevo documento:

Esto te llevará a la página principal de El País Digital


Observaciones:

  • Debe de ser posible pulsar sobre el enlace "Esto te lleva a la página principal de El País Digital" . El enlace le debe llevar a la página principal de El País Digital, cuyo URL es http://www.elpais.es/.
  • Con mucha frecuencia se olvida colocar alguna de las comillas que delimitan el argumento del atributo HREF, especialmente la última. ¡Se debe tener mucho cuidado!. Elimina las comillas del final en el atributo HREF y pulsa de nuevo el botón submit para que veas el resultado.
  • Observa que si reemplazamos las comillas dobles "..." por comillas simples '...'el resultado sigue siendo el mismo.
  3. Proyecto: Enlaces externos

Vamos a retocar las páginas DireccionesDeInteres.html y Aficiones.html para añadir los enlaces a las páginas externas relacionadas de modo que cuando el visitante pulse sobre el enlace el navegador muestre la página referenciada. Para hacerlo rodearemos las palabras que queremos que aparezcan en azul con las etiquetas <a href="URL_DESTINO">...</a> Donde URL_DESTINO el la página con la que queremos enlazar.

En la siguiente figura se muestra un fragmento de la página resultante. Observa que todas las palabras para las que hemos creado un enlace aparecen ahora en azul.

Aplicación práctica

Tarea

Añade enlaces a páginas externas desde tus propias páginas utilizando la etiqueta <a href="URL_DESTINO">...</a>.

Procedimiento

  1. Observa las páginas DireccionesDeInteres.html Aficiones.html del web de telémaco.
  2. Abre con el wordpad los ficheros.html de tu sitio web que contengan enlaces externos, es decir referencias a páginas que no pertenezcan a tu sitio web.
  3. Situate en el cuerpo del documento (en el espacio comprendido entre las etiquetas <body>...</body>).
  4. Rodea la porción de texto sobre la que pulsará el visitante de tu página con las etiquetas <a href="URL_DESTINO">...</a> sustituyendo URL_DESTINO por la dirección de la página web que quieras enlazar.
    • Si quieres utilizar alguna de las direcciones que aparecen en las páginas del web de Telémaco puedes hacerlo. Para ello abre la página de Telémaco con el navegador, pasa el ratón por encima del enlace (sin pulsar sobre él) y verás como en la parte inferior izquierda de tu navegador aparece la dirección. Si quieres copiarla puedes pulsar sobre el enlace con el botón derecho de tu ratón, aparecerá un pequeño menú en el que debes seleccionar la opción Copiar ubicación del Enlace (si utilizas Netscape) o la opción Copiar Acceso Directo (si utilizas Internet Explorer).
    • Si quieres buscar páginas relacionadas con un tema para copiar sus direcciones en tu página puedes utilizar un buscador. Rellena el campo de búsqueda con palabras relacionadas con el tema que te interese (ej: Turismo Galicia) y el buscador mostrará un conjunto de enlaces relacionados con el tema. Puedes pulsar sobre ellos para visitarlos y comprobar si realmente son de interés y puedes copiar su dirección como te indicamos en el apartado anterior.
  5. Guarda cada uno de los ficheros.html y ábrelos con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
  6. Comprueba que los enlaces funcionan, es decir que al pulsar sobre la porción de texto en azul el navegador muestra la página externa que hemos referenciado.
  7. Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente.
  8. Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"
Go Up

Solución:

Observaciones

  • Comprueba el aspecto de las páginas de Telémaco en el navegador pulsando sobre este DireccionesDeInteres.html Aficiones.html.
  • Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
    • Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
    • Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)

  4. Hiperenlaces Relativos

Una vez que se han insertado hiperenlaces en un documento HTML, se mostratá con mayor detalle la forma en que se pueden usar estas direcciones.

Una dirección de la forma "http://www.elpais.es/" se le llama URL absoluta. Se denomina así porque independientemente de la ubicación de la página en la que hemos insertado el enlace, siempre se llega a la misma página destino al pulsar sobre él. Se puede decir que ese enlace es absoluto porque contiene la parte "http://" del URL.

Existe otro tipo de URL que se conoce como URL relativo, al usar este tipo de enlaces se determina la página a la que se quiere llegar utilizando como base el directorio en el que se encuentra la página que contiene el código <A HREF=...>.

Los URL relativos son muy útiles si se quiere llevar un conjunto de páginas (ejemplo: un sitio web completo) de un lugar a otro. Por ejemplo, si se han diseñado las páginas usando enlaces relativos (excepto para los enlaces a las páginas de otras personas), será posible colocar todo el conjunto de páginas en un nuevo servidor con sus enlaces funcionando correctamente. Esto no sería posible si se utilizan sólamente enlaces absolutos, al pulsar sobre un enlace el navegador buscaría la página en el lugar en el que se encontraba antes y no en el servidor actual.

Ejercicio

Tarea

Practicar los enlaces relativos utilizando un editor de texto plano (por ejemplo el wordpad).

Procedimiento:

  1. Crea la jerarquía dedirectorios y ficheros que se muestra en la figura. Recuerda que:
    • Para crear los directorios o carpetas situate en la carpeta donde quieras guardar el ejercicio. Una vez allí pulsa con el botón derecho del ratón y selecciona la opción nuevo | Carpeta
    • Para crear los ficheros de texto para cada una de las páginas que indica el dibujo sitúate en el directorio donde lo quieras almacenar. Pulsa con el botón derecho del ratón y selecciona la opción nuevo | Documento de texto. A continuación pon nombre al fichero que acabas de crear. Recuerda que el fichero debe tener extensión .html es decir deberá llamarse nombre.html donde deberás sustituir nombre por el nombre de cada una de tus páginas web. Evita los espacios en blanco en los nombres de ficheros.



  2. Abre las páginas PagEnSubDir.html, PagEnMismoDir.html y PagEnSuperDir.html con el editor de texto (wordpad). Escribe un texto distinto para cada una de ellas y guardalas seleccionando en el menú la opción Archivo | Guardar . Por ejemplo para la página PagEnSubDir.html el código podría ser el siguiente: 
    <html>
  <body>
   <p>Esta p&aacute;gina est&aacute; en un subdirectorio</p>
  </body>
</html>
  3. Abre la página PagConEnlace.html con el wordpad y escribe el siguiente código: 
    <html>
  <body>
    <h3>Enlaces Relativos</h3>
    <ul>
      <li>
        <a HREF="PagEnMismoDir.html">
          Un enlace relativo a la página PagEnMismoDir
        </a> que está en el mismo directorio en el 
        que se encuentra este documento (<tt>PagConEnlace.html</tt>).
      </li>

      <li>
        <a HREF="SubDirectorio/PagEnSubDir.html">
          Un enlace relativo a la página PagEnSubDir
        </a> que está en la carpeta llamada 
        (<tt>Subdirectorio</tt>).
      <li>

      <li>
        <a HREF="../PagEnSuperDir.html">
          Un enlace relativo a la página PagEnSuperDir
        </a> que está en el directorio que contiene al directorio
         en el que se encuentra este documento llamado 
         <tt>SuperDirectorio</tt>.
      <li>
    </ul>
  </body>
</html>
  4. Guarda los cambios en el documento PagConEnlace.html y ábrela utilizando el navegador.
  5. Pulsa sobre cada uno de los enlaces y comprueba que te llevan a la página esperada
Go Up

Solución:

Debería verse:

Enlaces Relativos

Observaciones:

  • Fíjate en el contenido del atributo href. Observa que para hacer referencia a un subdirectorio lo hacemos con su nombre mientras que para hacer referencia al superdirectorio (directorio padre) que contiene al actual utilizamos dos puntos consecutivos. La construcción ../ en un URL significa "sube al directorio de nivel superior".
  • Si el nombre que has puesto a las páginas referenciadas no coincide con el nombre que aparece en el atributo href , o si dichas páginas no existen el navegador no será capaz de encontrarlas. Si esto ocurriera al pulsar sobre los enlaces aparecería un mensaje de error similar a este ("404 document not found"). Puedes hacer la prueba cambiando el nombre que aparece en el atributo href y poniendo el nombre de un fichero que no exista.
  • Es posible tener una idea previa de a que página nos va a llevar un enlace antes de pulsar sobre él, para probarlo abre en tu navegador una página que contenga algún enlace, por ejemplo la página PagConEnlace.html que acabas de crear. Situa el ratón sobre el enlace, sin llegar a pulsarlo. Observa la barra indicadora que aparece en la parte inferior izquierda del navegador, podrás ver cómo aparece escrito el URL de la página que el navegador intentaría cargar al pulsar sobre el enlace.

  5. Proyecto: Enlaces Relativos

Vamos a retocar todas las páginas para añadir los elementos de navegación global que nos permitan enlazarlas entre sí. Comenzaremos por la página principal index.html en la que ya habíamos preparado una primera versión (sin enlaces) de la barra de navegación.

Para añadir enlaces a páginas que se encuentren en el mismo sitio web que la nuestra necesitamos conocer la posición relativa de las páginas que queremos enlazar con respecto a la página actual que estamos editando. Para ello recordemos la estructura de directorios del sitio web de Telémaco:


Como todas las páginas que queremos enlazar (Aficiones.html, Fotos.html y DireccionesDeInteres.html ) se encuentran en el mismo directorio que la página actual (index.html) para enlazarlas basta rodear cada una de las palabras que pusimos como opción de menú con las etiquetas (<a>...</a>) poniendo como referencia el nombre de la página html con la que queremos enlazar (<a href="fichero.html">...</a> ).

Una vez que tenemos la barra de navegación completa (con los enlaces incluidos) vamos a replicarla al final de cada una de las páginas. Para cada página retocaremos la barra de navegación de modo que la opción de menú que corresponde a la página en la que nos encontremos aparezca en negrita y el resto de las opciones aparezcan como hiperenlaces. En la figura se muestra como aparecería la barra de navegación al final de la página principal. Como puedes ver la página principal aparece en negrita y el resto aparecen como hiperenlaces. Puedes pulsar sobre ellos para ver como se muestra la barra de navegación en las demás páginas.


|    Información de contacto     |    Fotos     |    Aficiones     |    Direcciones útiles    |

Aplicación práctica

Tarea

Añade a tus páginas los mecanismos de navegación global que permiten enlazarlas entre sí utilizando la etiqueta <a href="URL_DESTINO">...</a>.donde URL_DESTINO será un enlace relativo.

Procedimiento

  1. Observa las páginas del web de telémaco representadas en la figura anterior.
  2. Abre con el wordpad el fichero index.html y añade enlaces relativos en cada una de las palabras que forman la barra de navegación rodeándolas para ello la etiqueta <a href="URL_DESTINO">...</a> donde URL_DESTINO representa la dirección relativa de la página referenciada con respecto a esta.
  3. Abre con el wordpad el resto de los ficheros de tu sitio web
  4. Copia la barra de navegación que creaste en el apartado 2 al final de todos tus documentos.html justo antes de la etiqueta de cierre </body>.
  5. Retoca cada una de las barras de menú de forma que aparezca en negrita la opción que corresponde a la página en que nos encontramos y aparezca un enlace en cada una de las demás opciones de menú.
  6. Guarda cada uno de los ficheros.html y ábrelos con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
  7. Comprueba que los enlaces funcionan, es decir que al pulsar sobre la porción de texto en azul el navegador muestra la página de nuestro propio web que hemos referenciado.
  8. Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente.
  9. Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"
Go Up

Solución:

Observaciones

  • Comprueba el aspecto de las páginas de Telémaco en el navegador pulsando sobre cada una de ellas (index.html, Fotos.html, Aficiones.html, DireccionesDeInteres.html)
  • Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
    • Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
    • Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)

  6. Hipernelaces Internos

Además de crear enlaces para ir de una página HTML a otra, también es posible crear enlaces para ir de un lugar a otro del mismo documento, de modo similar a como el índice de este documento te lleva directamente a cada una de las secciones sin necesidad de utilizar la barra de desplazamiento del navegador, o de la misma forma que al final de cada sección hay un enlace que te permite volver al principio del documento. A estos enlaces se les llama enlaces internos.

Para usar un enlace interno a una zona concreta de un documento necesitamos dos cosas:

  • Un enlace similar a los que hemos creado hasta ahora indicando la poción de texto sobre la que podemos pulsar y la dirección a la que nos va a llevar.Se escribe:
    <a HREF="#nombreDeLaSeccionQueQueremosEnlazar">Texto sobre el que pulsamos</a>
  • Marcar el punto a enlazar. Para crear el punto concreto del documento al que queremos enlazar necesitamos de nuevo la etiqueta <a> (del inglés anchor que significa ancla) esta vez con el atributo NAME (del inglés name que significa nombre).Se escribe:
    <a NAME="nombreDeLaSeccionQueQueremosEnlazar>Sección</a>

    Al pulsar sobre el texto "Texto sobre el que pulsamos" , el navegador se colocará en la sección llamada nombreDeLaSeccionQueQueremosEnlazar del documento HTML. Para que el navegador sepa en que lugar del documento está dicha sección, se debe colocar explícitamente una señal. Esto como hemos visto se logra mediante la siguiente etiqueta:
    <a NAME="nombreDeLaSeccionQueQueremosEnlazar>Sección</a>

    Observa que se ha usado un nuevo atributo de la etiqueta <a>, el atributo NAME. En el enlace, se ha utilizado el símbolo # antes de primeraseccion, esto le indica al navegador que el lugar al que tiene que ir se encuentra en el mismo documento, en vez de cargar una página con URL primeraseccion.

Ejercicio

Tarea

Practicar los enlaces internos utilizando un editor de texto plano (por ejemplo wordpad).

Procedimiento:

  1. Crea un fichero de texto llamado HiperenlacesInternos.html, para hacerlo sitúate en el directorio donde lo quieras almacenar. Pulsa con el botón derecho del ratón y selecciona la opción nuevo | Documento de texto.
  2. Abre la página HiperenlacesInternos.html con el wordpad y escribe el siguiente código: 
    <html> 
  <body>  
    <h3>Enlaces Internos</h3>
    <h4>Indice</h4>
     <ul> 
      <li><A HREF="#Seccion1">Primera Seccion</a></li>
      <li><a HREF="#Seccion2">Segunda Seccion</a></li>
      <li><a HREF="#Seccion3">Tercera Seccion</a></li> 
     </ul> 
     <hr>
    <h3><a name="Seccion1">Primera Sección</a></h3>
     <p>Contenido de la primera seccion</p>
     <hr>
    <h3><a name="Seccion2">Segunda Sección</a></h3>
     <p>Contenido de la segunda seccion</p>
     <hr>
    <h3><a name="Seccion3">Tercera Sección</a></h3>
     <p>Contenido de la tercera seccion</p>
     <hr>   
  </body>
</html>
  3. Guarda los cambios realizados y abre la página utilzando un navegador (Internet Explorer o Netscape Navigator).
  4. Pulsa sobre cada uno de los enlaces del índice y observa si te lleva a la zona correspondiente del documento.
  5. Esta técnica suele utilzarse cuando la página es muy grande y el navegador no permite ver todo el contenido del documento al mismo tiempo. Si puedes ver el documento completo en el navegador no habrás notado ningún efecto al pulsar sobre los enlaces. Para conseguir ver el efecto reduce el tamaño de la ventana del navegador hasta que sólo sea visible el índice y pulsa de nuevo sobre los enlaces. En este caso observarás cómo se desplaza la barra de desplazamiento del navegador hasta llevarnos al punto deseado.
Go Up

Solución:

Debería verse:

Enlaces Internos

Indice

Primera Sección

Contenido de la primera seccion

Segunda Sección

Contenido de la segunda seccion

Tercera Sección

Contenido de la tercera seccion

Observaciones:

  • Para cada enlace se ha definido el destino correcto mediante una etiqueta destino <A NAME="nombreDestino">...</A>. Observa que:
    1. Se ha colocado el símbolo # en el hiperenlace, no en el destino.
    2. Se ha escrito de la misma forma el nombre del destino y el nombre del hiperenlace (conviene también respetar las mayúsculas y minúsculas).
  • Observa que al colocar el ratón sobre alguno de los enlaces que se han definido aparece su dirección en la barra indicadora del navegador (parte inferior izquierda).
  • Puedes crear enlaces que permitan saltar del final de cada sección al principio del documento. El principio del documento se indica mediante # o mediante #top tal y como se indica a continuación.
    <a HREF="#">Volver al principio</a>
  • Haz la prueba escribiendo al final de cada sección una referencia <a HREF="#">Volver</a> que te lleve al principio del documento.
  • Guarda el documento y vuelve a cargarlo en el navegador para probar el funcionamiento (recuerda reducir la ventana del navegador para ver el resultado)
  • Se puede usar esta misma construcción en los hiperenlaces para que el navegador muestre un destino específico dentro de un nuevo documento. Por ejemplo, se podría tener un enlace como:
    <A HREF="otrapagina.html#seccionfinal">Esto nos lleva a la sección final de otra página</A>. El efecto en este caso es que el navegador cargaría la nueva página llamada otrapagina.html y nos llevaría a un punto concreto de esa página etiquetado como seccionfinal.
  7. Proyecto: Enlaces Internos

Vamos a retocar las páginas más largas ( DireccionesDeInteres.html y Aficiones.html) para añadir los elementos de navegación local que nos permitan movernos más facilmente entre las distintas zonas de una misma página.

Vamos a crear dos mecanismos de navegación local:

  • El índice que nos permita movernos desde el principio de la página a cada una de las secciones que contiene.
  • Un enlace "volver" al final de cada sección que nos permita volver al principio de la página.

Para hacerlo necesitamos marcar dos puntos del documento:

  • La zona que vamos a referenciar dentro del documento. En nuestro caso vamos a referenciar:
    • el título de cada una de las secciones rodeándolo de las etiquetas <a NAME="nombreDeLaSeccionQueQueremosEnlazar>...</a>
    • el comienzo del documento. Se puede crear una referencia en la palabra índice o no hacer ninguna referencia ya que si en el enlace no ponemos nada por defecto enlazará con el principio del documento.
  • La zona donde va a estar situado el enlace. En nuestro caso los enlaces internos estarán situados
    • en el índice (rodeando cada palabra del índice mediante las etiquetas <a HREF="#nombreDeLaSeccionQueQueremosEnlazar">...</a>) y
    • en la palabra volver <a HREF="#">...</a> o <a HREF="#top">...</a>.
Puedes ver un ejemplo en la siguiente figura:

Aplicación práctica

Tarea

Añade a tus páginas los mecanismos de navegación local que permitan enlazar distintas zonas de una misma página mediante la etiqueta <a>...</a>y sus atributos href y name.

Procedimiento

  1. Observa la página web de telémaco representadas en la figura anterior.
  2. Abre con el wordpad los ficheros.html de tu sitio web que contengan páginas de tamaño mucho mayor que la pantalla.
  3. Situate en el cuerpo del documento (en el espacio comprendido entre las etiquetas <body>...</body>).
  4. Crea una marca en cada una de las secciones que quieras referenciar rodeando el título de la sección con las etiquetas
    <a name="nombreDeLaSeccionQueQueremosEnlazar>...</a>
  5. Rodea la porción de texto sobre la que pulsará el visitante de tu página con las etiquetas
    <a href="#nombreDeLaSeccionQueQueremosEnlazar">...</a> . Recueda que si quieres enlazar el principio del documento basta con poner
    <a href="#">...</a>
  6. Guarda cada uno de los ficheros.html y ábrelos con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
  7. Comprueba que los enlaces funcionan, es decir que al pulsar sobre la porción de texto en azul el navegador muestra la zona de la página que hemos referenciado (si el tamaño de la página coincide con el tamaño de la pantalla no observarás ningún efecto).
  8. Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente.
  9. Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"
Go Up

Solución:

Observaciones

  • Comprueba el aspecto de las páginas de Telémaco en el navegador pulsando sobre cada una de ellas (Aficiones.html, DireccionesDeInteres.html )
  • Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
    • Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
    • Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)

  8. Hiperenlaces para envío de correo

También se pueden utilizar los enlaces para el envío de un correo electrónico. En ese caso la URL_DESTINOen lugar de contener una dirección web de la forma: 

"http://www.it.uc3m.es"
donde httpindica el protocolo de transferencia de hipertexto (del inglés HyperText Transfer Protocol) contiene una expresión de la forma 
"mailto:DIR_DE_CORREO"
donde el protocolo a utilizar sería SMTPpara el envío de correo electrónico. La expresión completa sería de la forma: 
	
<a href="mailto:telemaco@midireccion.com">
	  texto sobre el que se pulsa
	  </a>

En este caso al pulsar sobre el texto en lugar de abrirse una nueva página web se abriría nuestro editor de correo para que escribiesemos un correo con el campo dirección relleno con la dirección que hayamos indicado en el atributo href.

Existen otros protocolos que se pueden utilizar dentro de una URL como por ejemplo (FTP para la transferencia de ficheros, GOPHER para acceso de directorios de información clasificados por temas, TELNET para control remoto de otros ordenadores, NNTP para el acceso a grupos de noticias en internet, etc.)

Ejercicio

Tarea:

Practica los enlaces de hipertexto para el envío de correo con el editor interactivo.

Procedimiento:

  1. Abre el editor interactivo pulsando aquí.
  2. Escribe en el lado izquierdo el siguiente código HTML: 
    <HTML>
  <body>
    <h3>Hiperenlaces para envío de correo</h3>
    <p>
      Sustituye el valor "TU_DIR_DE_CORREO" por la dirección
      de correo que utilices habitualmente
    </p>

    <a HREF="mailto:TU_DIR_DE_CORREO">
      Esto abrirá tu aplicación de correo para que envies un mensaje
    </a>

    <p>
      Pulsa sobre el enlace que acabas de crear y envíate un correo a tí mismo
      para comprobar que funciona
    </p>
  </body>
</HTML>
  3. Pulsa el botón submit para ver el resultado.
  4. Sigue las instrucciones del documento que acabas de crear y comprueba si eres capaz de enviarte un correo correctamente. El aspecto de la página cuando pulses el botón submit será el siguiente:
Go Up

Solución:

Debería verse:

Hiperenlaces para envío de correo

Sustituye el valor "TU_DIR_DE_CORREO" por la dirección de correo que utilices habitualmente

Esto abrirá tu aplicación de correo para que envies un mensaje

Pulsa sobre el enlace que acabas de crear y envíate un correo a tí mismo para comprobar que funciona.



Observaciones:

  • Este ejercicio sólo funcionará si la máquina en la que estés trabajando tiene correctamente configurada una aplicación de correo.

  9. Proyecto: Enlaces Correo

Vamos a retocar la página principal del web de Telémaco (index.html) para añadir una tabla con información de contacto. La tabla tendrá una única fila con dos celdas. La primera celda la reservaremos para poner una foto y en la segunda guardaremos la información de contacto. Como parte de la información de contacto incluiremos un enlace sobre el que se pueda pulsar para enviarle un correo electrónico:
<a href="telemaco@midireccion.com">texto sobre el que se pulsa</a>.

También editaremos todas las páginas para añadir al final una referencia sobre el creador del sitio web y su dirección de correo como una forma de obtener realimentación de los visitantes de nuestra páginas. A continuación tienes una imagen de la página resultante.

Aplicación práctica

Tarea

Añade al final de cada una de tus páginas información sobre el autor y una dirección de contacto sobre la que se pueda pulsar para enviar un correo electrónico.

Procedimiento

  1. Observa la página web de telémaco representada en la figura anterior.
  2. Abre con el wordpad los ficheros.html de tu sitio web.
  3. Situate al final del documento justo antes de la etiqueta </body>.
  4. Añade una línea de separación utilizando la etiqueta <hr>
  5. Añade después de la línea de separación el nombre del autor y la dirección de contacto utilizando las etiquetas
    <a href="DIRECCION_DE_CORREO">Nombre del Autor</a>
  6. Guarda cada uno de los ficheros.html y ábrelos con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
  7. Comprueba que los enlaces funcionan, para hacerlo pulsa sobre el nombre del autor y comprueba que se abre la aplicación de correo para enviarle un mensaje.(Este ejercicio sólo funcionará si la máquina en la que estés trabajando tiene correctamente configurada una aplicación de correo electrónico).
  8. Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente.
  9. Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"
Go Up

Solución:

Observaciones

  • Comprueba el aspecto de las páginas de Telémaco en el navegador pulsando sobre cada una de ellas (index.html, Fotos.html, Aficiones.html, DireccionesDeInteres.html )
  • Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
    • Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
    • Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)


Localización | Personal | Docencia | Investigación | Novedades | Intranet
inicio | mapa del web | contacta
Last Revision: