Tecnologias Emergentes: marzo 2014

AUDIO
<audio src="double fiesta.mp3" type="audio/mpeg">

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Para que el audio corra necesita CONTROLS

Attribute	Value	Description
autoplayNew	autoplay	Specifies that the audio will start playing as soon as it is ready
controlsNew	controls	Specifies that audio controls should be displayed (such as a play/pause button etc).
loopNew	loop	Specifies that the audio will start over again, every time it is finished
mutedNew	muted	Specifies that the audio output should be muted
preloadNew	auto metadata none	Specifies if and how the author thinks the audio should be loaded when the page loads
srcNew	URL	Specifies the URL of the audio file

Autoplay,loop,muted, preload necesitad de CONTROLS antes de ellos.

Frame: Es una manera de dividir tu pagina web en varias secciónes , cada una en un marco.

1. Necesitas poner una <frameset>

<html>

</frameset>

</html>

2. Para comenzar a tener frames necesitas poner divisiones en tus framsets de columna (COLS) y de filas (ROWS)

Se llena con porcentaje o con pixeles. El asterisco es para completar lo que falta. E n ambos casos se dividió en tres partes.

Cada uno afecta al frame que esta inmediatamente debajo de ellos.

<TARGET > sirve para direccionar tu link

Attribute Values

Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window
framename	Opens the linked document in a named frame

Para poner el nombre al frame, solamente es asi:
<frame name=” elnombre”>

IMG

align	top bottom middle left right	Not supported in HTML5. Specifies the alignment of an image according to surrounding elements
alt	text	Specifies an alternate text for an image
border	pixels	Not supported in HTML5. Specifies the width of the border around an image
crossoriginNew	anonymous use-credentials	Allow images from third-party sites that allow cross-origin access to be used with canvas
height	pixels	Specifies the height of an image
hspace	pixels	Not supported in HTML5. Specifies the whitespace on left and right side of an image
ismap	ismap	Specifies an image as a server-side image-map
longdesc	URL	Not supported in HTML5. Specifies the URL to a document that contains a long description of an image
src	URL	Specifies the URL of an image
usemap	#mapname	Specifies an image as a client-side image-map
vspace	pixels	Not supported in HTML5. Specifies the whitespace on top and bottom of an image
width	pixels	Specifies the width of an image

MAP y AREA

<map> - indica que existe un mapa de imágenes y va junto con un tag <area>

Map tiene que tener un nombre de mapa “NAME= “

Area tiene los siguientes atributos:

shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular).

Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.

Href= Como ya sabe, indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada.

Ejemplo:

<html>

<body>

</map>

</body>

</html>

TABLAS
<table> define la tabla

<tr> divide en filas

<td> divide la fila en datos

<th> da los encabezados de una columna o fila

uniendo columnas y filas :
colspan y rowspan :

<td rowspan = " 3" colspan="3" > Dato dentro de tres columnas y tres filas </td>

Scope para dar encabezados

table>
<tr>
<th scope="col">Columna 1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Para dar líneas diferentes se puede poner bordes por celdas o a toda la tabla.

<table border=” 3” style=”border: red 5px solid;” >

O en una sola fila
<tr style=”border: green 5px solid;”>

O una sola celda

La jerarquia para que los colores se mantengan es celda,fila,table. Siendo tabla la mas fuerte

Tecnologias Emergentes

lunes, 10 de marzo de 2014

jueves, 6 de marzo de 2014

PRACTICA 3

IMG

MAP y AREA