Desarrollo de aplicaciones WEB

Desarrollo de aplicaciones WEB

HTML

Departamento Informática y Sistemas

HTML

Enlaces o Links

Los enlaces permiten la conexión con otros documentos:

una imagen
un vídeo
un archivo de sonido
sitios en la web(otra página web)
mandar un email

HTML

Enlaces o Links

Sintaxis:

 <a atributo="valor">Texto del enlace</a>

Ejemplo:

<body>
<a href="http://www.escepticos.org"> ARP-SAPC</a>
</body>

HTML

Enlaces o Links

Atributo target: indica el lugar donde se abre el enlace

<a href="http://www.um.es" target="_blank"> Sitio de la UMU</a>

Atributo name: indica un lugar dentro de una página

<a name="apartado1"> Apartado 1</a> <!-- Se define un destino en el apartado 1 --> que se dirige, por ejemplo, a: <a href="http://www.um.es/index.html#apartado1"<Ir al Apartado 1</a>

HTML

Enlaces o Links

Enlace para enviar un email

<body><a href="/mailto: atencioncliente@empresa.es">Mandar email</a>
</body>

Enlace a través de una imagen

<body><a href="http://www.escepticismo.es"> <img src="img/demonio.gif"></a>
</body>

HTML

Enlaces o Links

Etiquetas y atributos de los enlaces

Etiquetas	Atributos	Valor	Descripción
<a>			Define un vínculo
	href	URL	Dirección URL a conectar.
	hreflang	código de lenguaje	Especifica el lenguaje de la URL
	name	nombre de sección	Para crear un marcapáginas dentro de un documento
	rel	alternate	Especifica la relación entre el documento actual y el destino del vínculo
		designates
		stylesheet
		start
		next
		prev
		contents
		index
		glossary
		copyright
		chapter
		section
		subsection
		apendix
		help
		bookmark
		nofollow

HTML

Enlaces o Links

Etiquetas	Atributos	Valor
rev	alternate	Especifica la relación entre el destino del vínculo y el documento actual(vínculo inverso)
	designates
	stylesheet
	start
	next
	prev
	contents
	index
	glossary
	copyright
	chapter
	section
	subsection
	apendix
	help
	bookmark
coords	coordenadas	Especifica las coordenadas de la superficie que contiene el enlace

HTML

Enlaces o Links

Etiquetas	Atributos	Valor
shape		Define la forma del área
	rect	Usamos coords="izquierda, arriba, derecha, abajo"
	rectangle	Usamos coords="izquierda, arriba, derecha, abajo"
	circ	Usamos coords="centro x, centro y, radio"
	circle	Usamos coords="centro x, centro y, radio"
	poly	Usamos coords="x1, y1, x2, y2, .., xn, yn"
	polygon	Usamos coords="x1, y1, x2, y2, .., xn, yn"
target		Indica donde abrir el URL
	_blank	URL se abrirá en una nueva ventana.
	_parent	URL se abrirá en la ventana padre
	_self	URL se abrirá en la misma ventana donde fue pulsado
	_top	URL se abrirá en una ventana de tamaño completo
type	tipo de contenido	Especifica el tipo de contenido a conectar

HTML

Listas

En ocasiones, es posible agrupar determinadas entidades en un conjunto de elementos que tienen más significado de forma conjunta. El menú de navegación por ejemplo está formado por un grupo de palabras. Aunque cada palabra por separado tiene sentido, de forma conjunta forman el menú de navegación de la página, por lo que su significado conjunto es mayor que por separado.

HTML define tres tipos diferentes de listas para agrupar los elementos:

listas no ordenadas
listas ordenadas
listas de definición

HTML

Listas

Listas Ordenadas, son las que ordenan la lista anteponiendo números,letras o signos. Comienzan con la etiqueta <ol> y para cada uno de los elementos se utiliza la etiqueta <li>

Ejemplo:

Ciencias más importantes:
<ol>
<li>Física</li>
<li>Química</li>
<li>Biología</li>
</ol>

HTML

Listas

Listas Desordenadas, muestran la lista anteponiendo un punto, cuadrado o triángulo negro a cada elemento. Comienzan con la etiqueta <ul> (la <dir> no es recomendada)y para cada uno de los elementos de la misma se emplea la etiqueta <li>

Ejemplo:

Pseudomedicinas que son una estafa:
<ul>
<li>Homeopatía</li>
<li>Flores de Bach</li>
<li>Quiropráctica</li>
</ul>

HTML

Listas

Listas de definición, se emplean para definir términos. Se marcan con la etiqueta <dl>. Los términos de las mismas con <dt>. La definición de los términos comienza con <dd>.

Ejemplo:

Integrantes principales de alimentos:
<dl>
<dt>Yogur</dt>
<dd>Leche</dd>
<dt>Galletas</dt>
<dd>Harina</dd>
</dl>

HTML

Listas

Atributos no recomendados para las listas, pues se logra el mismo efecto con CSS:

<ol>: compact, start, type (A. a, I, i, 1)

<ul>: compact, type (disc, square, circle)

<li>: type (disc, square, circle, A. a, I, i, 1), value

HTML

Imágenes y objetos

Imágenes de contenido: proporcionan información y complementan la información textual

Imágenes de adorno: se utilizan para hacer bordes redondeados, iconos en las listas de elementos, mostrar fondos de página, ...

Etiqueta <img>

HTML

Imágenes y objetos

src = "url" - URL de la imagen

alt = "texto" - Descripción corta

longdesc = "url" - Indica una URL en la que puede encontrarse una descripción detallada

name = "texto" - Nombre del elemento imagen

height = "unidad_de_medida" - Altura con la que se debe mostrar la imagen

width = "unidad_de_medida" - Anchura con la que se debe mostrar la imagen

Unidades de uso legal en España, Sistema Internacional de Unidades

HTML

Mapas de imagen

De interés en casos muy específicos, como por ejemplo sitios de predicciones meteorológicas o de agencias de viajes. Muchas webs usan en su lugar Adobe Flash.

Permiten definir diferentes zonas seleccionables dentro de una imagen

Las zonas que se pueden definir se crean mediante rectángulos, círculos y polígonos Para crear un mapa de imagen, se inserta la imagen original mediante la etiqueta <img>

A continuación, se utiliza la etiqueta <map> para definir zonas

Cada zona se define mediante la etiqueta <area>

HTML

Mapas de imagen

<map>

name = "texto" - Nombre que identifica al mapa definido (es obligatorio indicar un nombre único)

<area>

href = "url" - URL a la que se accede al seleccionar el área

nohref = "nohref" - Áreas que no son seleccionables

shape = "default | rect | circle | poly" - Tipo de área que se define

coords = "lista de números" - Números separados por comas que representan las coordenadas del área

HTML

Mapas de imagen

<html>
<head>
<title>Uso de imagenes</title>
</head>

<body>
<map name="map1">
<area
   href="cuadrado.html" alt="Cuadrado" shape=rect coords="0,75,100,175">
<area
   href="circulo.html" alt="Círculo" shape=circle coords="175,50,50">
<area
   href="triangulo.html" alt="Triángulo" shape=poly coords="125,250, 225,250, 175,165">
</map>

<img src="http://www.um.es/docencia/barzana/IMGTEORIA/map-ejemplo.gif"
   border="0" width="225" height="251"
   usemap="#map1">
</body>
</html>

HTML

Mapas de imagen

HTML

Objetos

HTML permite incluir otros elementos más complejos, como applets de Java y vídeos en formato QuickTime o Flash. El navegador precisa de pequeños programas llamados plugins

data = "url" - Indica la URL de los datos que utiliza el objeto

classid, codebase, codetype - Información específica que depende del tipo de objeto

type - Indica el tipo de contenido de los datos

height = "unidad_de_medida" - Indica la altura con la que se debe mostrar el objeto

width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar el objeto

HTML

Objetos

A los objetos también se les puede pasar información adicional en forma de parámetros mediante la etiqueta

<param>

name = "texto" - Indica el nombre del parámetro

value = "texto" - Indica el valor del parámetro

HTML

Objetos

Iframes son espacios en una página web que permiten visualizar otro sitio

src = "url" - URL del documento HTML que se visualiza en el iframe

height = "longitud" - Altura que ocupará el iframe en el documento

width = "longitud" - Anchura que ocupará el iframe en el documento

name = "texto" - Nombre que identifica al iframe

longdesc = "url" - Dirección en la que puede encontrarse una descripción larga del contenido del iframe

scrolling = "yes | no | auto" - Indica si el iframe debe mostrar barras de scroll (horizontal y vertical) cuando el contenido incluido no cabe en el iframe

HTML

Tablas

Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación

Pueden contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos

No siempre se utilizan adecuadamente

HTML

Tablas

<table>

summary = "texto" - Permite describir el contenido de la tabla (lo utilizan los buscadores y las personas discapacitadas)

<tr>

Se emplea para definir cada fila de las tablas de datos

<td>

abbr = "texto" - Permite describir el contenido de la celda

headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta celda (los títulos de las columnas y filas). Se indica como una lista de valores del atributo "id" de celdas

scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna

colspan = "numero" - Número de columnas que ocupa esta celda

rowspan = "numero" - Número de filas que ocupa esta celda

HTML

Tablas

<th>

abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en los navegadores utilizados por personas discapacitadas)

headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta celda (los títulos de las columnas y filas). Se indica como una lista de ID de celdas

scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna

colspan = "numero" - Número de columnas que ocupa esta celda

rowspan = "numero" - Número de filas que ocupa esta celda

HTML

Tablas

Se emplea para definir la leyenda o título de una tabla

En el sitio Guía para escribir documentos HTML se encuentran ejemplos de todo tipo de tablas usando exclusivamente código HTML

HTML

Tablas

Ejemplo de una tabla sencilla:

<table border="3" cellspacing="5" width="200">
<th colspan=2 bgcolor="#6D8FFF"> Este es el título</th>
<tr align="center">
<td>Esta es la celda de la 1ª fila y de la 1ª columna</td>
<td> Esta es de la 1ª fila y de la 2ª columna</td>
</tr>
<tr bgcolor="#6D8FFF">
<td>Esto está con un fondo azul</td>
<td align="right" valign="bottom">Y esto también</td>
</tr>
</table>