html - tema 3

Hyper Text Markup Language

Tema 3: Tablas, divisiones e iframes

© Abril, 2015

Prof. Renny Batista

Las Tablas en HTML

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 de documentos:

Abril, 2015 2

Las tablas de HTML puede contener elementos simples,

agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos

complejos.

Las Tablas en HTML

Las tablas se definen con la etiqueta <table>.

Las tablas se dividen en filas con la etiqueta <tr>.

Las filas se dividen en datos de la tabla (columnas) con la etiqueta <td>.

Una fila de la tabla también se puede dividir en títulos de la tabla con el <th> etiqueta.

<table style="width:100%"> <tr> <td>Juan</td> <td>Pérez</td> <td>50</td> </tr> <tr> <td>Eva</td> <td>Mendez</td> <td>34</td> </tr> </table>

Abril, 2015 3

Las Tablas en HTML

Si no se especifica un borde para la tabla, se muestra sin borde.

Un borde se puede agregar utilizando el atributo border:

<table border="1" style="width:100%">

Para añadir bordes, mejor utilice la propiedad border CSS.

table, th, td { border: 1px solid black; }

Si desea que bordes colapsen en uno solo, añada el CSS border-collapse

table, th, td { border: 1px solid black; border-collapse: collapse; }

Abril, 2015 4

Las Tablas: Cell padding

Cell padding (Relleno) especifica el espacio entre el

contenido de la celda y de sus bordes.

Si no especifica un relleno, las celdas de la tabla se

mostrarán sin relleno.

Para establecer el padding en una celda, utilice la

propiedad padding de CSS:

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th,td {

padding: 15px;

}

Abril, 2015 5

Las Tablas: Encabezados

Los encabezados en una tabla se definen con la etiqueta

<th>.

Por defecto, los principales navegadores muestran los

encabezdos de una tabla en negrita y centrados.

<table style="width:100%"> <tr>

<th>Nombre</th>

<th>Apellidos</th>

<th>Nota</th>

</tr> <tr>

<td>Juana</td>

<td>Perdomo</td>

<td>18</td>

</tr> </table>

Abril, 2015 6

Las Tablas: Espacios

El border-spacing especifica el espacio entre las células.

Para ajustar el espaciado entre los bordes para una tabla, utilice la propiedad de CSS:

table {

border-spacing: 5px;

}

Abril, 2015 7

Las Tablas: expandir columnas

Para hacer que una celda ocupe más de una columna (expandir), utilice el atributo colspan en la etiqueta <th> o <td>.

<table style="width:100%"> <tr> <th>Nombre</th> <th colspan="2">Teléfono</th> </tr> <tr> <td>Jennifer Lopez</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>

Abril, 2015 8

Las Tablas: expandir filas

Para hacer que una celda ocupe más de una fila (expandir), utilice el atributo rowspan en la etiqueta <th> o <td>.

<table style="width:100%"> <tr> <th>Name:</th> <td>Jennifer Lopez</td> </tr> <tr> <th rowspan="2">Teléfono:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>

Abril, 2015 9

Las Tablas: Título

Para añadir un título a una tabla, utilice la etiqueta <caption>

<table style="width:100%"> <caption>Ahorro Mensual</caption> <tr> <th>Mes</th> <th>Ahorro Bs.</th> </tr> <tr> <td>Enero</td> <td>1000 Bs.</td> </tr> <tr> <td>Febrero</td> <td>590 Bs.</td> </tr> </table>

Abril, 2015 10

Las Tablas: Estilos

La mayoría de los ejemplos anteriores utilizan un atributo

de estilo (width = "100%") para definir la anchura de cada

tabla.

Esto hace que sea fácil de definir diferentes anchos para

diferentes tablas.

Los estilos <style> en la sección <head>, define un estilo

para todas las tablas en una página.

Para definir un estilo especial para una tabla en especial, añada un atributo id a la etiqueta <table>

Abril, 2015 11

Las Tablas: Estilos

<style> table#t01 tr:nth-child(even) {

background-color: #eee;

}

table#t01 tr:nth-child(odd) {

background-color: #fff;

}

table#t01 th {

color: white;

background-color: black; } </style>

Abril, 2015 12

Las divisiones

El nombre de la etiqueta div tiene su origen en la palabra

división, ya que esta etiqueta define zonas o divisiones dentro de una página HTML.

Abril, 2015 13

Las divisiones

El elemento <div> es un elemento de bloque que se

puede utilizar como un contenedor para otros elementos

HTML.

Debido a que es un elemento de bloque, el navegador

mostrará saltos de línea antes y después de ella.

Cuando se utiliza junto con CSS, el elemento <div> se

puede utilizar para bloques de estilo de contenido.

No es posible diseñar una página web compleja utilizando elementos <div> sin utilizar hojas de estilos CSS.

Abril, 2015 14

Las divisiones: ejemplo

<div style="background-color:black; color:white; padding:20px;"> <h2>Venezuela</h2>

<p>Venezuela, oficialmente denominada República Bolivariana de Venezuela, es un país de América situado en la parte septentrional de América del Sur, constituido por una parte continental y por un gran número de islas pequeñas e islotes en el mar Caribe, cuya capital es la ciudad de Caracas.</p> <p>Tiene una extensión territorial de 916 445 km². El territorio continental limita al norte con el mar Caribe, al oeste con Colombia, al sur con Brasil y por el este con Guyana.</p>

</div>

Abril, 2015 15

Las divisiones: Un maquetado básico

Abril, 2015 16

<html> <head> <title>Pagina de inicio maquetada con CSS</title> </head> <body> <div id="container"> <div id="header"> </div> <div id="navigation"> </div> <div id="content-container"> <div id="content"> </div> <div id="news"> </div> </div> <div id="footer"> </div> </div> </body> </html>

Los elementos semánticos en HTML5

¿Qué son los elementos semánticos?

Un elemento semántico describe claramente su

significado tanto para el navegador y el desarrollador.

Ejemplos de elementos no-semánticos: <div> y <span>

no dicen nada acerca de su contenido.

Ejemplos de elementos semánticos: <form>, <table> y

<img> definen claramente su contenido.

Los elementos semánticos HTML5 son compatibles con

todos los navegadores modernos.

Abril, 2015 17


Muchos sitios web contienen código HTML como: <div id="nav"> <div class="header"> <div id="footer"> para indicar navegación, encabezado y pie de página.

HTML5 ofrece nuevos elementos semánticos para definir las diferentes partes de una página web:

<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>

Abril, 2015 18


El elemento <section> define una sección de un

documento.

De acuerdo con la documentación del W3C HTML5: "Una

sección es una agrupación temática de los contenidos,

por lo general con un título."

La página principal de un sitio Web puede ser dividido en

secciones para la introducción, el contenido y la

información de contacto.

<section>

<h1>WWF</h1>

<p>The World Wide Fund for Nature (WWF) is....</p> </section>

Abril, 2015 19


El elemento <article> especifica contenido independiente,

autónomo.

Un artículo debe tener sentido por sí mismo, y debe ser

posible leerlo de forma independiente del resto del sitio

web.

Ejemplo en los que se puede utilizar un elemento <article>:

Forum post, Blog post, Newspaper article

<article>

<h1>What Does WWF Do?</h1> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>

Abril, 2015 20


El <header> especifica un encabezado de un documento o

sección.

El elemento <header> debe utilizarse como un contenedor para

el contenido introductorio.

Puede haber varios elementos <header> en un solo documento.

El ejemplo siguiente define una cabecera para un artículo:

<article>

<header>

<h1>What Does WWF Do?</h1>

<p>WWF's mission:</p>

</header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>

</article>

Abril, 2015 21


El <footer> especifica un pie de página de un documento o sección.

A elemento <footer> debe contener información sobre su elemento contenedor.

Un pie de página contiene normalmente: el autor de la información del documento, derechos de autor, enlaces a términos de uso, información de contacto, etc.

Puede haber varios elementos <footer> en un solo documento.:

<footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:[email protected]"> [email protected]</a>.</p> </footer>

Abril, 2015 22


El elemento <nav> define un conjunto de vínculos de

navegación.

Este elemento está destinado a bloques de enlaces de

navegación. Sin embargo, no todos los enlaces en un

documento deben estar dentro de un elemento <nav>

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

Abril, 2015 23


El elemento <aside> define un cierto contenido, aparte de

los contenidos colocados (como una barra lateral).

El contenido del <aside> debe estar relacionado con el

contenido de los alrededores (artículos, etc.)

<p>My family and I visited The Epcot center this summer.</p>

<aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

Abril, 2015 24


En los libros y periódicos, es común tener leyendas con

imágenes.

El propósito de una leyenda es añadir una explicación

visual de una imagen.

Con HTML5, las imágenes y leyendas se pueden agrupar en el elemento <figura>

<figure> <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">

<figcaption>Fig1.-The Pulpit Rock, Norway.</figcaption>

</figure>

Abril, 2015 25

Bibliografías

Abril, 2015 26

Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es

2008. Creative Commons reconocimiento no comercial -

sin obra derivada 3.0

W3Schools a web developers site. http://www.w3schools.com

html - tema 3

Internet