FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
1
INTRODUCCIÓN A HTML – XHTML – Clase 02
1. Listas2. Imágenes y objetos3. Tablas
24/03/2014
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
2
LISTAS NO ORDENADAS: <ul> + <li> ORDENADAS: <ol> + <li> DE DEFINICIÓN (Como un diccionario): <dl> + <dt> + <dd>
24/03/2014
<h1>Listas</h1><h2>NO ORDENADAS</H2><ul>
<li>elemento1</li><li>elemento2</li><li>elemento3</li>
</ul><h2> ORDENADAS</h2><ol>
<li>elemento1</li><li>elemento2</li><li>elemento3</li>
</ol>
<h2>DE DEFINICIÓN</h2><dl>
<dt>Definicion1</dt><dd>concepto1: consiste en bla bla
bla </dd><dt>Definicion2</dt><dd>concepto2: consiste en bla bla
bla </dd><dt>Definicion2</dt><dd>concepto2: consiste en bla bla
bla </dd></dl>
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
3
Imágenes y objetos: Imágenes
24/03/2014
<img src=“/imágenes/logo.gif" alt="Logotipo de Mi Sitio" />
Recomendados: Gif, jpg, png
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
4
Imágenes y objetos: Mapas de Imágenes
Un mapa de imagen permite definir diferentes zonas “clickeables" dentro de una imagen.
El usuario puede pinchar sobre cada una de las zonas definidas y cada una de ellas puede apuntar a una URL diferente.
Las zonas o regiones que se pueden definir en una imagen se crean mediante rectángulos, círculos y polígonos.
Para crear un mapa de imagen, en primer lugar se inserta la imagen original mediante la etiqueta <img>.
A continuación, se utiliza la etiqueta <map> para definir las zonas o regiones de la imagen.
Cada zona se define mediante la etiqueta <area>.
24/03/2014
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
5
Imágenes y objetos: Mapas de Imágenes
24/03/2014
Si una imagen utiliza un mapa de imagen, debe indicarlo mediante el atributo usemap. El valor del atributo debe ser el nombre del mapa de imagen definido en otra parte del mismo documento HTML:
<img src="mapa_mundo.gif" usemap="#continentes" /> ... <map name="continentes"> ... </map>
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
6
Imágenes y objetos: Mapas de Imágenes
Las áreas se definen mediante el atributo shape que indica el tipo de área y coords que es una lista de coordenadas cuyo significado depende del tipo de área definido.
El enlace de cada área se define mediante el atributo href, con la misma sintaxis y significado que para los enlaces normales.
El siguiente ejemplo muestra una imagen sencilla que contiene cuatro figuras geométricas:
24/03/2014
<img src="imagen.gif" usemap="#mapa_zonas" /> <map name="mapa_zonas"> <area shape="rect" coords="20,25,84,113" href="rectangulo.html" /> <area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24“
href="triangulo.html" /> <area shape="circle" coords="130,114,29" href="circulo.html" /> <area shape="rect" coords="19,156,170,211"
href="mailto:[email protected]" /> <area shape="default" nohref="nohref" /> </map>
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
7
Imágenes y objetos: Objetos HTML permite incluir en las páginas web elementos mucho más complejos,
como por ejemplo: Applets de Java y vídeos en formato QuickTime o Flash. La mayoría de este tipo de contenidos no los interpreta el navegador
directamente, sino que hace uso de pequeños programas llamados plugins y que se encargan
de tratar con este tipo de elementos complejos. La etiqueta <object> es la que permite "embeber" o incluir en las páginas
HTML cualquier tipo de contenido complejo:
24/03/2014
<object data="Planeta.mpeg" type="application/mpeg" />
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
8
Imágenes y objetos: ObjetosA los objetos también se les puede pasar información adicional
en forma de parámetros mediante la etiqueta <param>:
24/03/2014
<object data="..." type="..."> <param name="parametro1" value="40" /> <param name="parametro2" value="20" /> <param name="parametro3" value="texto de prueba" />
</object>
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
9
Imágenes y objetos: Objetos Uno de los principales inconvenientes de <object> es la forma de incluir
vídeos en formato Flash en las páginas HTML. Si se utiliza el siguiente código:
24/03/2014
<object data="nombre_video.swf" type="application/x-shockwave-flash"></object>
provoca que algunos navegadores como Internet Explorer no visualicen el vídeo hasta que se ha descargado completamente. Si se trata de un vídeo largo, esta solución no es válida para el usuario. (PROBEMOS!!)
se utiliza una solución alternativa para incluir vídeos Flash en las páginas HTML: el uso de la etiqueta <embed>. Aunque esta solución funciona correctamente, no se trata de una solución válida desde el punto de vista del estándar de XHTML
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
10
Imágenes y objetos: Objetos
24/03/2014
Los sitios web más populares de vídeos en formato Flash proporcionan un código similar al siguiente para incluir sus vídeos en las páginas HTML:
<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/MsH0rBWCYjs"> </param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/MsH0rBWCYjs" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"> </embed> </object>
Esto es correcto para el usuario, pero no válido pues la etiqueta<embed> no es parte del estándar XHTML.
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
11
Tablas
NO SE DEBEN utilizar para definir la estructura de las páginas web.
Tres etiquetas: <table> para crear la tabla, <tr> (table row) para crear cada fila y <td> (table data cell) para crear cada columna.
24/03/2014
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
12
Tablas: Tablas básicas
24/03/2014
<h1>Listado de cursos</h1> <table> <tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td> </tr> <tr>
<td>Curso1</td> <td>Horas1</td> <td>Horario 1</td>
</tr> <tr>
<td>Curso2</td> <td>Horas2</td> <td>Horario 2</td>
</tr> </table>
Primera fila
Segunda fila
Tercera fila
Primera Columna
Primera Columna
Primera Columna
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
13
Tablas: Tablas básicas
24/03/2014
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
14
Tablas: Tablas básicas
24/03/2014
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
15
Tablas: Tablas básicas
24/03/2014
Algunas de las celdas de la tabla se utilizan como cabecera de las demás celdas de la fila o de la columna.
CAPTION: HTML define la etiqueta <caption> para establecer la leyenda o título de una tabla. La etiqueta debe colocarse inmediatamente después de la etiqueta <table> y cada tabla sólo puede incluir una etiqueta <caption>.
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
16
</table>
<table>
Tablas: Tablas básicas. Ejemplo:
24/03/2014
<tr> <th scope="col">Nombre del Alumno</th> <th scope="col">TP</th> <th scope="col">EP</th> <th scope="col">Total</th></tr>
<tr> <td>Alumno1</td> <td>25</td> <td>15</td> <td>40</td></tr>
<tr> <th scope="row">Promedio</th> <td><strong>24</strong></td> <td><strong>15,5</strong></td> <td><strong>39,5</strong></td> </tr>
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
17
Tablas: Tablas básicas. Ejercicio
24/03/2014
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
18
Tablas: Tablas básicas complejas
24/03/2014
Si queremos juntar varias columnas para formar una columna ancha o unir varias filas para formar una fila más alta que las demás, debemos fusionar las filas o columnas. Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
<table> <tr> <td>A</td> <td rowspan="2">B</td> </tr> <tr> <td>C</td> </tr> </table>
FUSIÓN DE FILAS (ROWSPAN
)
FUSIÓN DE
COLUMNAS (COLSPAN
)<table> <tr> <td colspan="2">A</td> </tr>
<tr> <td>B</td> <td>C</td> </tr> </table>
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
19
Tablas: Tablas básicas complejas
24/03/2014
<table> <tr> <td colspan="3">A</td> <td>B</td> </tr>
<tr> <td>C</td> <td colspan="2">D</td> <td>E</td> </tr> <tr> <td colspan="4">F</td> </tr>
<tr> <td>G</td> <td>H</td> <td>I</td> <td>J</td> </tr> </table>
FUSIÓN DE COLUMNAS (COLSPAN)
FUSIÓN DE FILAS (ROWSPAN)
<table> <tr> <td>A</td> <td>B</td> <td rowspan="3">C</td> <td>D</td> </tr>
<tr> <td rowspan="2">E</td> <td>F</td> <td rowspan="3">G</td> </tr>
<tr> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> </tr> </table>
A B
C
D
EF
GH
I J K
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
20
Tablas: Tablas básicas complejas
24/03/2014
Ejercicio:MARCA / MODELO
ACER S7-391-9411
TOSHIBA U845W-S4180
HP ELITEBOOK
8470P
IMAGEN
DISCO DURO 128 GB SSDMEMORIA 8 GBMONITOR 14"
CORE I5CORE I7
PROVEEDOR DIVISERV SYS DATA LAB
PROCESADOR
6 GB256 GB SSD
13,3"
CORE I7 CORE I7
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
21
Tablas: Tablas Avanzadas
24/03/2014
• Las tablas más avanzadas disponen de una sección de cabecera, una sección de pie y varias secciones de datos.
• Es posible agrupar varias columnas de forma lógica para poder aplicar estilos similares a un determinado grupo de columnas.
La cabecera de la tabla se define con la etiqueta <thead>, el pie de la tabla se define mediante <tfoot> y cada sección de datos se define con una etiqueta <tbody>.
Cada tabla puede contener solamente una cabecera y un pie, pero puede incluir un número ilimitado de secciones. Si se define una cabecera y/o un pie, las etiquetas <thead> y/o <tfoot> deben colocarse inmediatamente antes que cualquier etiqueta <tbody>.
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
22
Tablas: Tablas Avanzadas
24/03/2014
<table summary="Análisis de ventas anuales"> <caption>Análisis de ventas anuales</caption> <thead> <tr> <th rowspan="2" scope="col">AÑO</th> <th colspan="4" scope="col">Expansión de ventas</th> </tr>
<tr> <th scope="col">Producto A</th> <th scope="col">Producto B</th> <th scope="col">Producto C</th> <th scope="col">Producto D</th> </tr> </thead> <tfoot> <tr> <th rowspan="2" scope="col">AÑO</th> <th scope="col">Producto A</th> <th scope="col">Producto B</th> <th scope="col">Producto C</th> <th scope="col">Producto D</th> </tr> <tr> <th colspan="4" scope="col">Expansión de ventas</th> </tr> </tfoot>
Análisis de ventas anuales
AÑOExpansión de ventas
Producto A
Producto B
Producto C
Producto D
AÑOProducto
AProducto
BProducto
CProducto
DExpansión de ventas
<TBODY>, AÚN NO ESTÁ
DEFINIDO
El elemento <tfoot> siempre se escribe antes que cualquier elemento <tbody> en el código HTML.
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
23
Tablas: Tablas Avanzadas
24/03/2014
<tbody> <tr> <th scope="row">N-3</th> <td>-</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <th scope="row">N-2</th> <td>3</td> <td>5</td> <td>8</td> <td>4</td> </tr> <tr> <th scope="row">N-1</th> <td>4</td> <td>4</td> <td>7</td> <td>3</td> </tr> <tr> <th scope="row">N</th> <td>5</td> <td>7</td> <td>6</td> <td>2</td> </tr> </tbody> </table>
Producto A
Producto B
Producto C
Producto D
Producto A
Producto B
Producto C
Producto D
AÑOExpansión de ventas
AÑOExpansión de ventas
N - 3 - - - -
N - 2 3 5 8 4
N - 1 4 4 7 3
N 5 7 6 2
La etiqueta <tbody> permite realizar agrupaciones de filas, pero en ocasiones se necesitan agrupar columnas. Aunque su uso no es muy común, HTML define dos etiquetas similares para agrupar columnas: <col> y <colgroup>.
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
24
Tablas: Tablas Avanzadas
24/03/2014
EJERCICIOMARCA / MODELO
ACER S7-391-9411
TOSHIBA U845W-S4180
HP ELITEBOOK
8470P
IMAGEN
DISCO DURO 128 GB SSDMEMORIA 8 GBMONITOR 14"
CORE I5CORE I7
DISCO DUROMEMORIAMONITOR 14"PROCESADOR
PROVEEDOR DIVISERV SYS DATA LAB
Garantía: 3 meses Descuento: hasta 50%
Descuento: hasta 30%128 GB SSD
4 GB15,6"
CORE I5
Garantía: 6 meses
PROCESADOR
6 GB256 GB SSD
13,3"
CORE I7 CORE I7
<tfoot>
<thead>
<tbody>
<tbody
FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA
2524/03/2014
Fuentes:
http://librosweb.es/xhtml/capitulo_5.html
http://librosweb.es/xhtml/capitulo_6.html
http://librosweb.es/xhtml/capitulo_7.html