ENLACES, HIPERVÍNCULOS

Transcripción

1 ENLACES, HIPERVÍNCULOS Vamos a ver: qué son los hiperenlaces, para qué sirven y cómo crearlos,? ya que son un elemento esencial para cualquier página web.

2 Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

3 Clases de Referencia. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicación es en Internet, por ejemplo:

4 Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar../

5 Por ejemplo, estamos en En esta página queremos mostrar un archivo que se encuentra en la carpeta secciones cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior ( para poder ir luego a la carpeta secciones. El resultado de la ruta sería el siguiente:../secciones/seccion1.html. De esta forma, mientras nos encontramos en la carpeta información, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.

6 Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio. En el ejemplo anterior si tuviésemos definido como sitio la carpeta un enlace en cualquier página del sitio a se crearía como /pagina/secciones/seccion1.html. Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio raíz y no de la ubicación donde se encuentra.

7 Puntos de fijación: (anclaje) Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser nombre_de_documento.extension#nombre_d e_punto. El punto se define dentro de un documento a través del menú Insertar, opción Anclaje con nombre. Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma:../secciones/seccion1.html#parte2

8 Crear Enlaces en Dreamweaver La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario: 1.Seleccionar el texto o el objeto que va a servir de enlace. 2. Seguidamente establecer el Vínculo en el inspector. Por ejemplo. Vamos a dreamweaver

9 Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamiento Para ello es necesario escribir en Vínculo únicamente el símbolo #.

10 Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

11 Texto: es el texto que mostrará el enlace Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás escribirla empezando siempre por Destino: la página donde se abrirá la página, este campo se explica en el siguiente apartado. Título: se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT de las imágenes. Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada. Índice de tabulador : Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos.

12 El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador.

13 TABLAS Tanto en HTML como en otros programas las tablas se utilizan para organizar datos, pero también nos puede ayudar en organizar la información en la pantalla, dado a que una celda de tabla puede contener cualquier elemento HTML, como por ejemplo un párrafo o un campo de texto de un formulario. En HTML una tabla está formada por un conjunto de directivas, unas obligatorias y otras opcionales. La directiva principal que delimita e incluye las otras directivas es la directiva <table>. Los elementos definitorios para una tabla son las filas, las columnas y las celdas. HTML ofrece directivas como para construir las filas y <td> para construir las celdas. Cada cruce entre las filas y las celdas forman las columnas. Sin embargo, la directiva <td> no es la única directiva con la cual se puede construir una celda. La directiva <th> también sirve para construir celdas, pero está pensada a construir celdas de cabecera. Al encontrar la directiva <th> el navegador convierte el texto que lo rodea en negrita y lo centra con respecto a la celda.

14 TABLAS Las directivas como: <caption>, <col>, <colgroup>, <thead>, <tbody> y <tfoot> son directivas opcionales, pero importantes, porque con ellas las tablas se pueden estructurar visualmente mejor. Los atributos headers y scope facilitan a los navegadores especiales de voz la tarea de comprender como está estructurada la información de la tabla. Es lo que se llama "Accesibilidad Web". La utilización de estos atributos es vital en páginas Web destinadas a ofrecer información a las personas con discapacidad visual. Para que el navegador imprima una tabla en la página Web necesita un conjunto básico de directivas: <table>, y <td>.

15 Partes de una tabla Como pueden observar en el código HTML del ejemplo anterior una tabla está formada por: Filas () Grupo de columnas (<colgroup> y <col>) Encabezamiento de las celdas (<th>) Cuerpo de las celdas (<th> o <td>) Titulo de la tablas (<caption>) Encabezamiento de la tabla (<thead>) Cuerpo de la tabla (<tbody>) Pie de la tabla (<tfoot>)

16 Ejemplo <table> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </table>

17 <table border="1"> <td>cabecera</td> <td>cabecera</td> <td>cabecera</td> <td>cabecera</td> <td>cuerpo</td> <td>cuerpo</td> <td>cabecera</td> <td>pie</td> <td>pie</td> </table>

18 <table border="1"> <caption>titulo de la tabla</caption> </table> <colgroup> <col /> <col /> <col /> </colgroup> <thead> <th scope="col">cabecera</th> <th scope="col">cabecera</th> <th scope="col">cabecera</th> </thead> <tfoot> <th scope="row">cabecera</th> <td>pie</td> <td>pie</td> </tfoot> <tbody> <th scope="row">cabecera</th> <td>cuerpo</td> <td>cuerpo</td> </tbody>

19 <table border="1"> <caption>titulo de la tabla</caption> </table> <colgroup> <col /> <col /> <col /> </colgroup> <thead> <th scope="col">cabecera</th> <th scope="col">cabecera</th> <th scope="col">cabecera</th> </thead> <tfoot> <th scope="row">cabecera</th> <td>pie</td> <td>pie</td> </tfoot> <tbody> <th scope="row">cabecera</th> <td>cuerpo</td> <td>cuerpo</td> </tbody>

20 Definir las filas de una tabla <table border="1"> <td>cabecera</td> <td>cabecera</td> <td>cabecera</td> </table>

21 Definir las celdas de una tabla <table border="1"> <td><img src= tufoto.png" ></td> <td><img src="tufoto.png" ></td> <td><img src="tufoto.png" ></td> <td><img src="tufoto.png" ></td> <td><img src="tufoto.png" ></td> </table>

22 El funcionamiento del atributo headers <table border="1"> <th scope="col" id="nombre">nombre</th> <th scope="col" id="edad">edad</th> <th scope="col" id="telefono">telefono</th> <td headers="nombre">michael</td> <td headers="edad">21</td> <td headers="telefono"> </td> <td headers="nombre">karla</td> <td headers="edad">25</td> <td headers="telefono"> </td> </table>

23 Título de la tabla <table border="1"> <caption>datos Personales</caption> <th scope="col" id="nombre">nombre</th> <th scope="col" id="edad">edad</th> <th scope="col" id="telefono">telefono</th> <td headers="nombre">michael</td> <td headers="edad">21</td> <td headers="telefono"> </td> <td headers="nombre">karla</td> <td headers="edad">25</td> <td headers="telefono"> </td> </table>

24 Estilos CSS para una Tabla <style type="text/css"> table { border:1px solid black; border-collapse:separate; } th, td { border:1px solid black; } </style>

25 Espacio entre celdas <style type="text/css"> table { border:1px solid black; border-collapse:separate; border-spacing:30px; } th, td { border:1px solid black; } </style>

26 Espacio alrededor del texto de celda <style type="text/css"> table { border:1px solid black; border-collapse:separate; } th, td { border:1px solid black; padding:50px; } </style>

27 Ancho y Alto <style type="text/css"> table { border:1px solid black; border-collapse:separate; width:200px; height:auto; } th, td { border:1px solid black; } </style>