Para enlazar este blog copie y pegue, en su blog, el código de la imagen que escoja de entre las siguientes:
|
Mostrando entradas con la etiqueta enlaces. Mostrar todas las entradas
Mostrando entradas con la etiqueta enlaces. Mostrar todas las entradas
21.4.11
Enlazar este blog
10.6.10
URL
| Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios. La URL de un recurso tiene dos objetivos principales:
Si se accede a la página principal de Google, la dirección que muestra el navegador es:
La cadena de texto http://www.google.com es la URL completa de la página principal de Google. La URL de las páginas es imprescindible para crear los enlaces, ya que permite distinguir una página de otra. El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de Internet. Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla siempre está formada por las mismas tres partes. Si por ejemplo se considera la siguiente URL:
Las partes que componen la URL anterior son:
Las cinco partes que forman la URL anterior son:
:, =, & y / para separar sus partes, estos caracteres están reservados y no se pueden utilizar libremente. Además, algunos caracteres no están reservados pero pueden ser problemáticos si se utilizan en la propia URL. Si es necesario incluir estos caracteres reservados y especiales en una URL, se sustituyen por combinaciones de caracteres seguros. Esta sustitución se denomina codificación de caracteres y el servidor realiza el proceso inverso (decodificación) cuando le llega una URL con los caracteres codificados. A continuación se muestra la tabla para codificar los caracteres más comunes:
Por otra parte, aunque desde hace tiempo ya es posible incluir en las URL caracteres de otros idiomas que no sean el inglés, aún no es completamente seguro utilizar estos caracteres en las URL. Si se utilizan letras como ñ, á, é o ç, es posible que algunos navegadores no las interpreten de forma correcta. La solución consiste en codificar todos los caracteres que no existen en inglés. La siguiente tabla muestra la codificación de los caracteres más utilizados:
Teniendo en cuenta las dos tablas anteriores de codificación de caracteres, es fácil crear las URL correctas sin caracteres problemáticos:
|
| Twittear |
Enlaces relativos y absolutos
Ejemplo de diferentes tipos de enlaces en la página 456BereaStreet.com| En esa página, cuando se pincha sobre algunos enlaces, el navegador abandona el sitio web para acceder a páginas que se encuentran en otros sitios. Estos enlaces se conocen como "enlaces externos". Sin embargo, la mayoría de enlaces de un sitio web apuntan a páginas del propio sitio web, por lo que se denominan "enlaces internos". Además de internos/externos, la otra característica que diferencia a los enlaces (y por tanto, también a las URL) es si el enlace es absoluto o relativo. Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado. Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace. Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado. Aunque las URL relativas pueden ser difíciles de entender para los que comienzan con HTML, son tan útiles que todos los sitios web las utilizan. Imagina que dispones de una página publicada en http://www.ejemplo.com/ruta1/ruta2/pagina1.html y quieres incluir en ella un enlace a otra página que se encuentra en http://www.ejemplo.com/ruta1/ruta2/pagina2.html. Como las URL identifican de forma única a los recursos de Internet y proporcionan la información necesaria para llegar hasta ellos, el enlace debería utilizar la URL completa de la segunda página. Las URL completas también se llaman URL absolutas, ya que el navegador no necesita disponer de información adicional para localizar el recurso enlazado. Si se utilizan siempre las URL absolutas, los enlaces están completamente definidos. Sin embargo, escribir siempre las URL completas es bastante aburrido, cuesta mucho tiempo y hace imposible cambiar la ubicación de los contenidos de un sitio web. Por ese motivo, casi todos los sitios web de Internet utilizan URL relativas siempre que es posible. Una URL relativa es una versión abreviada de una URL absoluta. Su objetivo es eliminar todas las partes de la URL absoluta que se pueden adivinar a partir de la información de contexto de la página web. En otras palabras, las URL relativas aprovechan la inteligencia de los navegadores para crear URL incompletas que los navegadores pueden completar deduciendo la información que falta. Considerando de nuevo el ejemplo anterior, la URL a la que se quiere enlazar utiliza el mismo protocolo y se encuentra en el mismo servidor que la página origen, por lo que la URL relativa puede prescindir de esas partes:
En el ejemplo anterior, las dos URL son equivalentes porque cuando no se indica el protocolo y el servidor de una URL, los navegadores suponen que son los mismos que los de la página origen. Por lo tanto, cuando el navegador encuentra la URL
Aunque el ejemplo mostrado es el caso más sencillo de URL relativa, existen otros casos más avanzados en los que se prescinde de parte o toda la ruta del recurso que se enlaza. A continuación se muestran los cuatro tipos diferentes de URL relativas: 1) El origen y el destino del enlace se encuentran en el mismo directorio Si desde una página web se quiere enlazar un recurso que se encuentra en el mismo directorio del servidor, la URL relativa puede prescindir de todas las partes de la URL absoluta salvo el nombre del recurso enlazado.
Cuando el navegador encuentra una URL relativa que sólo consiste en el nombre de un recurso, supone que el protocolo, servidor y directorio del recurso enlazado son los mismos que los del origen del enlace. 2) El destino del enlace se encuentra cerca de su origen y en un nivel superior En este caso, el recurso que se enlaza no está en el mismo directorio que el origen del enlace pero sí que está cerca y en algún directorio superior. La URL relativa debe indicar de alguna manera que es necesario subir un nivel en la jerarquía de directorios para llegar hasta el recurso. Para indicar al navegador que debe subir un nivel, se incluyen dos puntos y una barra (
Cuando el navegador encuentra la URL relativa De la misma forma, si el destino se encuentra un par de niveles por encima, se debe incluir
Además de subir niveles, también se puede entrar en otros directorios para obtener los recursos:
Si se intentan subir más niveles de los que es posible, el navegador ignora todos los ../ sobrantes. Si la página que tiene el enlace es http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html y la URL relativa que se incluye es Como el objetivo de las URL relativas es crear URL más cortas y sencillas que las URL absolutas, este método sólo se puede utilizar cuando el origen y el destino se encuentran cerca, porque de otro modo la URL relativa se complica demasiado. 3) El destino del enlace se encuentra cerca de su origen y en un nivel inferior Este caso es muy similar al anterior, pero más sencillo. Si el recurso enlazado se encuentra en algún directorio inferior al que se encuentra el origen, sólo es necesario indicar el nombre de los directorios a los que debe entrar el navegador.
De la misma forma, se pueden indicar varios directorios seguidos para que el navegador descienda jerárquicamente por la estructura de directorios:
4) El origen y el destino del enlace se encuentran muy alejados Cuando el origen y el destino de un enlace se encuentran muy alejados (pero en el mismo servidor) las URL relativas se pueden complicar en exceso. Aunque es posible utilizar En estos casos, lo más sencillo es indicar la ruta completa hasta el recurso enlazado comenzando desde la raíz del servidor web. Por lo tanto, estas URL relativas sólo omiten el protocolo y el nombre del servidor.
Cuando la URL relativa comienza por /, el navegador considera que es la ruta completa comenzando desde la raíz del servidor, por lo que sólo le añade el protocolo y el nombre del servidor origen. A continuación se resumen los cuatro posibles casos de URL relativas y el procedimiento que sigue el navegador para convertirlas en URL absolutas:
|
Enlaces básicos
Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés "anchor", literalmente traducido como "ancla"). Definición formal de la etiqueta <a>
El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas. Con la definición anterior, para crear un enlace que apunte a la página principal de Google solamente habría que incluir lo siguiente en un documento HTML:
De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc.
El enlace anterior utiliza una URL relativa con una ruta que apunta directamente a la raíz del servidor. Para obtener la URL absoluta, el navegador añade el mismo protocolo y el mismo nombre de servidor de la página en la que se encuentra el enlace. El resultado es que cuando se pincha ese enlace, siempre se vuelve al inicio del sitio web, independientemende de la página en la que se incluya el enlace. El otro atributo básico de la etiqueta Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.
El atributo
La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales, salvo que se añade el símbolo # seguido del nombre de la sección a la que se apunta. Cuando el usuario pincha sobre uno de estos enlaces, el navegador accede a la página apuntada por la URL y baja directamente a la sección cuyo nombre se indica después del símbolo También es posible utilizar este tipo de enlaces con URL relativas en una misma página. El siguiente ejemplo añade enlaces de tipo "
Los enlaces directos a secciones también funcionan con el atributo
El nombre de la sección que se indica después del símbolo Ejercicio No.4 A partir de la estructura de directorios y archivos indicada en la siguiente imagen:  Estructura de archivos y directorios de un sitio web de ejemplo1) Crear la siguiente página llamada  Página principal del sitio web de ejemplo2) Crear la página de índice del portfolio:  Página con la información sobre los proyectos realizados |
Vea la solución haciendo click Aquí
| Twittear |
Otros tipos de enlaces
| Los enlaces mostrados en las secciones anteriores son los más utilizados por las páginas web. Los enlaces creados con la etiqueta <a> permiten enlazar cualquier tipo de recurso desde cualquier página. La característica más importante de estos enlaces es que el usuario debe activar la carga de los recursos. En otras palabras, el navegador no carga ningún recurso enlazado con la etiqueta <a> a menos que el usuario pinche sobre el enlace. Además de estos enlaces, las páginas HTML pueden incluir otro tipo de enlaces que cargan los recursos automáticamente. Si una página HTML utiliza archivos CSS para aplicar estilos a sus contenidos, no es lógico que los enlace con la etiqueta HTML define las etiquetas La etiqueta Definición formal de la etiqueta <script>
Aunque la etiqueta
El atributo Además de enlazar un archivo JavaScript externo, la misma etiqueta <script> también permite incluir en la página web un bloque de código JavaScript:
Cuando se incluye código JavaScript en la propia página XHTML, se debe insertar dentro de una sección especial llamada De esta forma, se pueden construir páginas XHTML válidas y código JavaScript correcto. En los capítulos posteriores se profundiza en el concepto de validación de páginas XHTML. Los caracteres La etiqueta <script> (tanto cuando enlaza, como cuando incluye directamente el código) puede aparecer en cualquier parte del documento HTML, aunque normalmente se incluye dentro de la cabecera de la página (<head>...</head>). La segunda etiqueta de XHTML para enlazar recursos es <link>, que permite enlazar y relacionar la página con otros recursos externos. Definición formal de la etiqueta <link>
Al contrario que <script>, la etiqueta <link> solamente se puede incluir dentro de la cabecera del documento. Se pueden añadir tantas etiquetas <link> como sean necesarias, pero siempre dentro de <head>...</head>. El atributo El uso habitual de la etiqueta <<<link> es el de enlazar las hojas de estilos CSS utilizadas por las páginas web:
En este caso, es habitual establecer los atributos
|
Ejemplos de enlaces habituales
Enlazar el favicon en todas las páginas del ejercicio 4 y añadir todos los atributos posibles a los enlaces.
|
7.1.10
Crear enlace con aspecto de botón
Vamos a crear botones con CSS a partir de enlaces, sin utlizar formularios, aplicando una hoja de estilo que hará que los enlaces se muestren de forma similar a los botones. El efecto que lograremos será que al pasar el cursor del mouse por encima de un enlace, éste parezca como que está pulsado.
2.- Vamos a definir la clase enlaceboton, que es el estilo que se asignará para el enlace. Como sabemos, los enlaces tienen diferentes estados (visitados, no visitados, o con el cursor del ratón por encima), así que tendremos que definir el estilo para cada estado. Localizamos la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código CSS:
3.- Al enlace le hemos asignado una clase definida con el código CSS anterior y será nuestro código HTML:
...que pondremos en donde normalmente colocamos enlaces en nuestro blog: gadgets o entradas (reemplazamos # por la URL del enlace). |
| Twittear |
29.12.09
Creación de enlace con imagen
| Para crear un enlace con una imagen, en una entrada de Blogger, seguimos los siguientes pasos: 1.- Vamos a Nueva entrada. 2.- Abrimos la pestaña Redactar. 3.- Hacemos click en el botón Insertar imagen, y bajamos un de nuestro disco duro. |
El código puede ser como uno de los siguientes, dependiendo de navegador que utilicemos:
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqMLbj2TTmBNfiXr9vrAvyRVu5aZLn6c4stHsjIzhichYDPQhhlQ-XTRvMlRJe4Z8y2QDqyY1n9pG02Ln6wGJSltZS0saKoI6mfsY_36f8otvtQrPFUqOU2YmjlNfwQrsHkLO7rLu5dEY/s1600-h/fondo_cabecera1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" ps="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqMLbj2TTmBNfiXr9vrAvyRVu5aZLn6c4stHsjIzhichYDPQhhlQ-XTRvMlRJe4Z8y2QDqyY1n9pG02Ln6wGJSltZS0saKoI6mfsY_36f8otvtQrPFUqOU2YmjlNfwQrsHkLO7rLu5dEY/ s400/fondo_cabecera1.JPG" /></a> </div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ap5Rl8SzsMHp4uTzqG3qL15vmlUgfx8QEUVhmhSfOqOpTBEYfr5gpKQxs-AO_X9q4ykV6GXhi2PcT9WNjVW4BiF0iIWNrA93AZiCoqUMzfF9D9EvqV0Qic_HrOlwL2at_tjANrzvlWc/s1600/Blogger.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 118px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ap5Rl8SzsMHp4uTzqG3qL15vmlUgfx8QEUVhmhSfOqOpTBEYfr5gpKQxs-AO_X9q4ykV6GXhi2PcT9WNjVW4BiF0iIWNrA93AZiCoqUMzfF9D9EvqV0Qic_HrOlwL2at_tjANrzvlWc/s320/Blogger.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5592199810662894994" /></a> |
| 5.- La línea resaltada en rojo es la URL de nuestra imagen, por consiguiente al hacer click sobre la imagen volveremos a la misma, entonces debemos reemplazarla por la URL a la cual queremos que nos enlace nuestra imagen 6.- La línea resaltada en azul nos indica el sitio en donde se encuentra la imagen en nuestro blog. No sebe ser modificada. 7.- Resumiendo: El código de la imagen lo encontramos en la edición HTML del editor de entradas, una vez insertada la imagen, y lo único que debemos hacer es cambiar la URLde la imagen por la del sitio que queremos enlazar. 8.- Publicamos la entrada, la vemos, hacemos click sobre la imagen y estaremos en el sitio que hemos enlazado. |
24.12.09
Creación de enlace con texto
| Sigamos lo siguientes pasos: 1.- Vamos a la pantalla de Creación de entradas. 2.- Escribimos el título (Ej.: Creación de enlace). 3.- Escribimos el texto correspondiente (Ej.: Creación de enlace a Bloguer). 4.- Seleccionamos la palabra que queremos dejar como enlace (Ej.: Blogger).  5.- Pulsamos en  o en Enlace. Aparece una pantalla. 6.- En Dirección web ponemos la URL a la que va dirigida el enlace (Ej.: http://www.blogger.com/). 7.- Aceptamos y publicamos.  8.- Vemos la entrada en nuestro blog, pulsamos en la palabra que pusimos como enlace y accederemos a la página hacia la cual va dirigido el mismo.
|
Suscribirse a:
Entradas
(
Atom
)
