El uso de la etiqueta <object> en HTML
Un agradecimiento a todos los usuarios del Internet que visitan este blog y hacen uso de las herramientas que aquí se comparten. Durante varias publicaciones voy a hacer uso de una estructura simple a base de tablas con la finalidad de exponer el uso de algunas etiquetas que podrían se muy útiles al momento de desarrollar un proyecto web, espero que les sirva.
En esta oportunidad vamos a estudiar algunas de las ventajas que tenemos al utilizar la etiqueta <object></object> y para explotarlas voy a hacer uso de algunos archivos elaborados en Adobe Flash. Los comentarios están incluidos dentro de la estructura que bien puede ser tomada como un prototipo.
Nombre del archivo: index.php
<html>
<head>
<title>Página de Prueba</title>
<meta charset="utf-8">
<!-- Con este código aplicamos una sombra a la tabla y modificamos las propiedades de los hipervinculos -->
<style>
table {
box-shadow: 25px 25px 35px #CCC;
}
a {
font-family: "century gothic";
font-size: 1.2em;
text-decoration: none;
}
a:hover {
color: #F69;
}
</style>
</head>
<!-- Comenzamos con la estructura del cuerpo de la página-->
<body>
<br><br>
<!-- Vamos a trabajar con una tabla sin borde, ancho 1000 y centrada -->
<table border='0' width='1000' align='center'>
<tr><!-- Fila de Encabezado -->
<td colspan=2>
<!-- Aquí encontrarmos el primer uso de la etiqueta <object> como puede ver
lo que vamos a colocar es una película swf con un ancho de 1000px.
El parámetro data permite establecer la ruta de acceso al archivo
que vamos a reproducir y el parámetro width el ancho del mismo-->
<object data="swf/encabezado.swf" width=1000></object>
</td>
</tr>
<tr align=center><!-- Fila de menú -->
<td colspan=2>
<!-- Los hipervinculos de este ejercicio están dirigidos al marco flotante de la
siguiente fila a través de el parámetro target y el nombre del marco: conte -->
| <a href="inicio.html" target=conte>Inicio</a> |
<a href="mision.html" target=conte>Misión</a> |
<a href="vision.html" target=conte>Visión</a> |
<a href="portafolio.html" target=conte>Portafolio</a> |
<a href="contacto.php" target=conte>Contacto</a> |
<a href="galeria.html" target=conte>Galería</a> |
</td>
</tr>
<tr><!-- Fila de contenido y anuncios-->
<td width=80%>
<!-- iframe es también conocida como marco flotante y se usa para crear un
marco de contenido dentro de una página web, este marco permite reproducir
en si mismo otras páginas web, la configuración se establece a través de los
parámetros name (nombre), width (ancho), height (alto), frameborder (borde de
marco) y src (contenido inicial) -->
<iframe name=conte width=100% height=500 frameborder=0 src=inicio.html>
</iframe>
</td>
<td width=20% valign=top align=center>
<!-- En este nuevo object vemos que además de incluir data y width también
incluimos height determinando de esta manera el alto de la película -->
<object data="swf/anuncio2.swf" width=100% height=390></object><br>
<object data="swf/anuncio1.swf" width=100%></object>
</td>
</tr>
<tr><!-- Fila de pie de página -->
<td height=300 colspan=2>
<!-- En este ultimo caso en el parámetro data incluimos una página web que
contiene un slider, y como en el arnterior ejemplo vemos que definimos
el ancho y el alto.-->
<object data="slider/index.html" width=100% height=270></object>
</td>
</tr>
</table>
<br><br>
</body>
</html>
Los archivos utilizados en este ejemplo los dejo en el siguiente link:
archivos.zip
Un agradecimiento a todos los usuarios del Internet que visitan este blog y hacen uso de las herramientas que aquí se comparten. Durante varias publicaciones voy a hacer uso de una estructura simple a base de tablas con la finalidad de exponer el uso de algunas etiquetas que podrían se muy útiles al momento de desarrollar un proyecto web, espero que les sirva.
En esta oportunidad vamos a estudiar algunas de las ventajas que tenemos al utilizar la etiqueta <object></object> y para explotarlas voy a hacer uso de algunos archivos elaborados en Adobe Flash. Los comentarios están incluidos dentro de la estructura que bien puede ser tomada como un prototipo.
Nombre del archivo: index.php
<html>
<head>
<title>Página de Prueba</title>
<meta charset="utf-8">
<!-- Con este código aplicamos una sombra a la tabla y modificamos las propiedades de los hipervinculos -->
<style>
table {
box-shadow: 25px 25px 35px #CCC;
}
a {
font-family: "century gothic";
font-size: 1.2em;
text-decoration: none;
}
a:hover {
color: #F69;
}
</style>
</head>
<!-- Comenzamos con la estructura del cuerpo de la página-->
<body>
<br><br>
<!-- Vamos a trabajar con una tabla sin borde, ancho 1000 y centrada -->
<table border='0' width='1000' align='center'>
<tr><!-- Fila de Encabezado -->
<td colspan=2>
<!-- Aquí encontrarmos el primer uso de la etiqueta <object> como puede ver
lo que vamos a colocar es una película swf con un ancho de 1000px.
El parámetro data permite establecer la ruta de acceso al archivo
que vamos a reproducir y el parámetro width el ancho del mismo-->
<object data="swf/encabezado.swf" width=1000></object>
</td>
</tr>
<tr align=center><!-- Fila de menú -->
<td colspan=2>
<!-- Los hipervinculos de este ejercicio están dirigidos al marco flotante de la
siguiente fila a través de el parámetro target y el nombre del marco: conte -->
| <a href="inicio.html" target=conte>Inicio</a> |
<a href="mision.html" target=conte>Misión</a> |
<a href="vision.html" target=conte>Visión</a> |
<a href="portafolio.html" target=conte>Portafolio</a> |
<a href="contacto.php" target=conte>Contacto</a> |
<a href="galeria.html" target=conte>Galería</a> |
</td>
</tr>
<tr><!-- Fila de contenido y anuncios-->
<td width=80%>
<!-- iframe es también conocida como marco flotante y se usa para crear un
marco de contenido dentro de una página web, este marco permite reproducir
en si mismo otras páginas web, la configuración se establece a través de los
parámetros name (nombre), width (ancho), height (alto), frameborder (borde de
marco) y src (contenido inicial) -->
<iframe name=conte width=100% height=500 frameborder=0 src=inicio.html>
</iframe>
</td>
<td width=20% valign=top align=center>
<!-- En este nuevo object vemos que además de incluir data y width también
incluimos height determinando de esta manera el alto de la película -->
<object data="swf/anuncio2.swf" width=100% height=390></object><br>
<object data="swf/anuncio1.swf" width=100%></object>
</td>
</tr>
<tr><!-- Fila de pie de página -->
<td height=300 colspan=2>
<!-- En este ultimo caso en el parámetro data incluimos una página web que
contiene un slider, y como en el arnterior ejemplo vemos que definimos
el ancho y el alto.-->
<object data="slider/index.html" width=100% height=270></object>
</td>
</tr>
</table>
<br><br>
</body>
</html>
Los archivos utilizados en este ejemplo los dejo en el siguiente link:
archivos.zip
