Introduccion a HTML - XHTML. Clase 02

  • 122 views
Uploaded on

Material de apoyo para la materia programacion en web 1 de la FCT - UNCA. Basado en la página librosweb.

Material de apoyo para la materia programacion en web 1 de la FCT - UNCA. Basado en la página librosweb.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
122
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. INTRODUCCIÓN A HTML – XHTML – Clase 02 1. Listas 2. Imágenes y objetos 3. Tablas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 1
  • 2. LISTAS  NO ORDENADAS: <ul> + <li>  ORDENADAS: <ol> + <li>  DE DEFINICIÓN (Como un diccionario): <dl> + <dt> + <dd> 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 2 <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>
  • 3. Imágenes y objetos: Imágenes 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 3 <img src=“/imágenes/logo.gif" alt="Logotipo de Mi Sitio" /> Recomendados: Gif, jpg, png
  • 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 4
  • 5. Imágenes y objetos: Mapas de Imágenes 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 5 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>
  • 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 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 6 <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:rectangulo@direccion.com" /> <area shape="default" nohref="nohref" /> </map>
  • 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 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 7 <object data="Planeta.mpeg" type="application/mpeg" />
  • 8. Imágenes y objetos: Objetos  A los objetos también se les puede pasar información adicional en forma de parámetros mediante la etiqueta <param>: 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 8 <object data="..." type="..."> <param name="parametro1" value="40" /> <param name="parametro2" value="20" /> <param name="parametro3" value="texto de prueba" /> </object>
  • 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 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 9 <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
  • 10. Imágenes y objetos: Objetos 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 10 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.
  • 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 11
  • 12. Tablas: Tablas básicas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 12 <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
  • 13. Tablas: Tablas básicas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 13
  • 14. Tablas: Tablas básicas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 14
  • 15. Tablas: Tablas básicas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 15 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>.
  • 16. </table> <table> Tablas: Tablas básicas. Ejemplo: 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 16 <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>
  • 17. Tablas: Tablas básicas. Ejercicio 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 17
  • 18. Tablas: Tablas básicas complejas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 18 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> <table> <tr> <td colspan="2">A</td> </tr> <tr> <td>B</td> <td>C</td> </tr> </table>
  • 19. Tablas: Tablas básicas complejas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 19 <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> <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 E F GH I J K
  • 20. Tablas: Tablas básicas complejas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 20 MARCA / MODELO ACER S7-391- 9411 TOSHIBA U845W- S4180 HP ELITEBOOK 8470P IMAGEN DISCO DURO 128 GB SSD MEMORIA 8 GB MONITOR 14" CORE I5 CORE I7 PROVEEDOR DIVISERV SYS DATA LAB PROCESADOR 6 GB 256 GB SSD 13,3" CORE I7 CORE I7
  • 21. Tablas: Tablas Avanzadas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 21 • 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> de ben colocarse inmediatamente antes que cualquier etiqueta <tbody>.
  • 22. Tablas: Tablas Avanzadas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 22 <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ÑO Expansión de ventas Producto A Producto B Producto C Producto D AÑO Producto A Producto B Producto C Producto D Expansión de ventas El elemento <tfoot> siempre se escribe antes que cualquier elemento <tbody> en el código HTML.
  • 23. Tablas: Tablas Avanzadas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 23 <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ÑO Expansión de ventas AÑO Expansió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>.
  • 24. Tablas: Tablas Avanzadas 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 24 MARCA / MODELO ACER S7-391- 9411 TOSHIBA U845W- S4180 HP ELITEBOOK 8470P IMAGEN DISCO DURO 128 GB SSD MEMORIA 8 GB MONITOR 14" CORE I5 CORE I7 DISCO DURO MEMORIA MONITOR 14" PROCESADOR PROVEEDOR DIVISERV SYS DATA LAB Garantía: 3 meses Descuento: hasta 50% Descuento: hasta 30% 128 GB SSD 4 GB 15,6" CORE I5 Garantía: 6 meses PROCESADOR 6 GB 256 GB SSD 13,3" CORE I7 CORE I7
  • 25. 24/03/2014 FCT UNCA - PROG WEB I - ING. HÉCTOR ESTIGARRIBIA 25 Fuentes: http://librosweb.es/xhtml/capitulo_5.html http://librosweb.es/xhtml/capitulo_6.html http://librosweb.es/xhtml/capitulo_7.html