Estructura de una página web

ESTRUCTURA DE UNA PAGINA WEB III MF0950_2/MF0950_2

MF0950_2: Construcción de páginas web. 

● UF1302: Creación de páginas web con el lenguaje de marcas. 

Enlaces

Un enlace, vínculo o link es un lugar en el que, mediante un click, somos dirigidos a otra parte. Puede ser un texto (normalmente subrayado) o una imagen (sobre la que podemos hacer click para ir a otro lugar de la web). Lo más habitual es que una página tenga enlaces a lugares de la misma (internos) o a otras páginas (externos). Ejemplo:

<a href="http://www.comocreartuweb.com" target="_blank" title="Crear páginas web">Crear Paginas Web</a>

•  Etiqueta de enlaces

En el caso de link, hipervínculos etc la etiqueta que se usa sería ésta:

<a .....propiedades....> </a>

En este caso, la etiqueta sí que tendría su parte habitual de cierre, la cual es importante no olvidar. No obstante, esta etiqueta no es nada sin sus propiedades o especificaciones.

• Ruta de enlaces

La propiedad que se usa para indicar al navegador el enlace al cual queremos ir, es href y tras ella y entre comillas dobles es donde colocamos la ruta y el nombre del archivo de la página de destino, de este modo:  

<a href="ruta-del-enlace/nombre-del-archivo-destino.extension">Texto del enlace</a>

Se pueden enlazar tanto otras páginas web como archivos de música, imágenes etc. En estos casos no se muestra la imagen o música enlazada, sino que al pulsar sobre el enlace se ofrecerá la descarga al visitante.    

•  El target 

El target es aquello que se encarga de colocar en una pestaña nueva o en la misma la página de destino.

Target= _op" se usa esta opción cuando queremos que el archivo enlazado se muestre en pantalla completa de la ventana eliminando los frames y los marcos si los hay.

Target="_parent" con esta, la página se muestra en marco anterior al marco o frame en el que está el enlace

Target="_self" con esto, la página se mostrará en la misma ventana del navegador

Target="_blank" con esta opción, se abrirá en una nueva ventana.

• Textos alternativos

Funciona igual que con los textos alternativos de las imágenes, en este caso es
 title="texto alternativo"

• Anclajes

Esto sirve para cuando queremos enviar a las visitas a una parte concreta de la página. Usando los anclajes puedes hacer que cuando las visitas pulsen sobre este enlace, la ventana del navegador corra hacia esta parte concreta de la misma página. Para llevar a la parte superior sería:

<a name="arriba"></a>

Si queremos a la inferior:

<a name="abajo"></a>

Usando la lógica, si queremos enviar al visitante a la parte superior, el enlace deberá estar en la inferior

<a href="#arriba" title="Ir Arriba">Ir arriba</a>

Y vicebersa

<a href="#abajo" title="Ir Abajo">Ir abajo</a>

En ese caso colocarías al principio (o al final) ese menú, de este modo por ejemplo:

<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>

Y ahora solo te faltaría colocar esas 3 anclas justo al lado de esos títulos, líneas de código como ásta:

<h1>Título Uno</h1><a name="titulouno"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que se note el efecto.</p>
<h1>Título Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>
<h1>Título Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>

 Suele ser muy vistoso poner imágenes a modo de botones para esto, como por ejemplo flechas, para ello, el código se modificaría así:

<a href="#arriba" title="Ir Arriba">Ir Arriba</a>

En la última parte en la que pone ir arriba, lo sustituiríamos por la imagen pertinente y su ubicación o ruta, quedando así:

<a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop\melani/203293_top (1).gif"/></a>

• Propiedad rel

Sirve para ayudar a los navegadores a conocer qué tipo de enlaces estamos incluyendo realmente.

             ¿dónde se coloca?
Dentro de una etiqueta de apertura del enlace o vínculo. Se pueden colocar varias, una o ninguna. Veamos un ejemplo de dos

<a href="tema/pagina.html" title="bla bla bla bla" rel="next" rel="prefetch">Anchor Text</a>

           Propiedad rel="archives" del html 5
Esto indica que la página a la que se está dirigiendo el navegador está archivada, que ha dejado de tratar un tema de actualidad, o que ha podido quedar obsoleto. No se ha eliminado la página por contener información interesante, pero se avisa que se desea mantener en estado de archivo, como por ejemplo noticias pasadas, etc.

           Propiedad rel="author"
Se utiliza para especificar el autor del contenido, como por ejemplo en blogs etc.
   
          Propiedad rel="prev", rel="start" y rel="next"
Especifica al navegador cuál es la página inicial de una sección, la siguiente y la anterior respecto de la página donde se encuentra el visitante. Muy útil para colocar las flechas de adelante y atrás.

          Propiedad rel="prefetch"
Esto indica al navegador que vaya leyendo y memorizando una página distinta, la que presumimos que será la siguiente que va a leer el visitante. De este modo, cuando así sea y el visitante pulse ese enlace, el navegador la tendrá en su caché preparada para mostrarla en cuanto el enlace sea pulsado, pues ha estado cargando la información mientras el lector permanece leyendo la página anterior

          Otros valores para el rel
nofollow: indica que el destino no tiene nada que ver con la temática de la web
sidebar: que no está aún definido
Search: para páginas que muestran resultados de búsquedas
noreferer: para que el navegador haga caso omiso de las posibles variables de referencia añadidas a la url

          Advertencia
No todos los navegadores saben interpretar aún todos estos valores. Algunos no son reconocidos por ningún navegador todavía, aún así, no dan error al no ser reconocidos

• Imagen clicable

Para hacer una imagen que al clicar en ella nos lleve a otra página, habrá que insertar esta etiqueta

<a href="www.sitio.com"><img src="imagen.gif" alt="título de enlace" /></a>

En la primera parte, colocaremos la dirección (o archivo de ser el caso) deseada, la siguiente, después de scr, será la ruta y nombre de la imagen con su extensión, por último, el título o nombre que aparecerá cuando dejemos el cursor sobre ésta.