html 5 (ii) 3.pdfcircular o poligonal. coords: coordenadas que definen la zona. el número y...
Post on 29-Dec-2019
10 Views
Preview:
TRANSCRIPT
-
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
top related