HTML 5 (II)

Hipertexto y Marcadores Hipertexto:◦ Escritura no secuencial, un texto que bifurca, que permite que el lector

elija y que se lea mejor en una pantalla interactiva.◦ Serie de bloques de texto conectados entre si por nexos,

El Hipertexto en HTML se basa en dos elementos:◦ LINK: Se utiliza en la Cabecera para definir relaciones entre

Documentos.◦ A: Se utiliza en el Cuerpo para crear enlaces de hipertexto.

◦ href: Establece en punto de origen de un enlace de hipertexto. Sintaxis: Contenido

Valor del atributo href:◦ Relativo: entre documentos del mismo sitio◦ Absoluto: Enlaces a otros sitios web, o dentro de un mismo sitio

web, a elementos ubicados en otro servidor

Marcadores:◦ id: contenido ◦ El valor de id no puede repetirse dentro de un mismo documento.◦ Es sensible al uso de mayúsculas y minúsculas

Los marcadores son útiles cuando se usan dentro delmismo documento:◦ Páginas de cierta extensión. Por Ej. glosario de términos, índices,

etc Como se referencia un marcador◦

Marcadores:

◦ Id: Identifica una instancia de un elemento enparticular◦

......................

◦ Párrafo 1

Inclusión de Imágenes:◦ Para incluir imágenes se utiliza el elemento

IMG Su sintaxis es:

Atributos:◦ src: de donde toma la imagen◦ title = Texto que se ve cuando se pasa el mouse

sobre la imagen◦ alt = Texto Alternativo.

Imágenes e Hipervínculos◦ Para agregar un hipervínculo a una imagen se

hace con el elemento A.

Ejemplo:

Mapas de Imágenes: zonas dentro de una imagen conenlaces distintos cada una.

Existen dos maneras de hacerlo:◦ Mapas gestionados por el cliente (el navegador): Cuando el

usuario activa una región del mapa las coordenadas de dicha regiónson interpretadas por el navegador.◦ Mapas gestionados por el servidor: Las coordenadas son

enviadas al servidor que las interpreta desencadenando la accióncorrespondiente.

Mapas gestionados por el cliente Para utilizarlos necesitaremos dos cosas:◦ Declarar el mapa - asignarlo a una imagen.◦ Declaración:

…………….

Mapas gestionados por el cliente Atributos:◦ SHAPE: Define la forma de la zona, que podrá ser rectangular,

circular o poligonal.◦ COORDS: Coordenadas que definen la zona. El número y

significado de esas coordenadas dependerá de la zona.◦ HREF: URL a donde irá el usuario si pulsa sobre esa zona.◦ NOHREF Especifica que esa zona no tiene asignado enlace

alguno.◦ ALT Texto que se presentará en lugar de la imagen en

navegadores no gráficos para acceder al enlace.

Mapas gestionados por el cliente SHAPE – COORDS Rectangular◦ SHAPE = “rect” – COORDS = “x1,y1,x2,y2” Donde: (x1,y1) es la esquina superior izquierda (x2,y2) es la esquina inferior derecha.

Circular◦ SHAPE= “circ” – COORDS = “x,y,r”. Donde (x,y) es el centro del círculo r es su radio.

Polígono irregular◦ SHAPE= “poly” – COORDS = “x1,y1,x2,y2,x3,y3,...”. Donde

cada pareja (x,y) es una esquina del polígono.◦ La última pareja de coordenadas se unirá a la primera para cerrar

el polígono.

Mapas gestionados por el cliente

Cómo usar un mapa: Se asocia a una o más imágenes:

◦

Ejemplo

Listas Existen tres tipos de listas:◦ Listas desordenadas◦ Listas ordenadas◦ Listas de definición

Listas desordenadas: Son listas donde el orden de suselementos se supone que es no determinante.

Sintaxis: Se describen con los elementos y

Opción 1 [] Opción 2 [] Opción 3 []

Listas Listas Ordenadas: Se describen con los elementos

y Sitaxis:

Opción 1 [] Opción 2 [] Opción 3 []

Listas Listas de Definición: Se suelen utilizar para la

definición de Glosarios Sintaxis: Se describen con los elementos , y

Término 1Definición 1Término 2Definición 2Término 3Definición 3..........................................

OrdenadasI. Opción 1 II. Opción 2

A. Sub Opción 1 B. Sub Opción 2

1. Sub Sub Opción 1 2. Sub Sub Opción 2

III.Opción 3

Desordenadas• Opción 1 • Opción 2

o Sub Opción 1 o Sub Opción 2 Sub Sub Opción 1 Sub Sub Opción 2

• Opción 3

Ejemplo

Listas Anidadas

I. Opción 1 II. Opción 2

• Sub Opción 1 • Sub Opción 2

1. Sub Sub Opción 1 2. Sub Sub Opción 2

o Sub-3 Opción 1o Sub-3 Opción 2

III. Opción 3

Ejemplo

Listas Combinadas

Tablas Una tabla en un conjunto de celdas organizadas dentro

de las cuales podemos alojar distintos contenidos.

Se utilizan no solo para estructurar información enforma de filas y columnas, sino que también para“maquetear” las páginas.

Se van reemplazando por las CSS para este fin.

Son problemáticas con los medios no visuales

Tablas Elementos básicos:◦ – : Engloban toda la tabla◦ – : Una Fila.◦ – y – : Una Celda.◦ – : Incluyen Datos◦ – : Incluyen Cabeceras◦ – – pueden omitirse

Tablas - Atributos Atributos de la etiqueta :◦ Border: Define el número de pixels del borde principal

Atributos solo asignados a una celda:◦ Header: Especifíca uno o más encabezados.◦ Colspan: Expande una celda horizontalmente. Su valor es un

entero que indica el número de columnas de una tabla que ha deocupar la celda◦ Rowspan: Expande una celda verticalmente

Tablas Anidadas Las tablas pueden ser incluidas dentro de otras. Elemento ◦ Permite asociar un título a la tabla.◦ Sólo admite el atributo ALIGN, que puede tomar los valores

TOP, LEFT, RIGTH y BOTTOM

Ejemplo