UTP
Unidad 1: Introducción al lenguaje HTML
lanzador
Ejemplo: Tablas.

Una tabla en html viene marcada por las etiquetas <table> y </table>. Entre esas dos etiquetas se definen las filas y columnas de la tabla y las características de cada uno de estos elementos.

Las filas <tr>: Las filas se escriben gracias a las etiquetas <tr> con su correspondiente cierre </tr>. El contenido de las columnas que están dentro de la fila lo podemos alinear tanto horizontal como verticalmente.

Las celdas <td>: Las celdas que van dentro de cada fila se escriben con la etiqueta <td> y su correspondiente cierre </td>.

Las celdas <th>: Las celdas escritas con la etiqueta <th> y su correspondiente cierre </th>, admiten los mismos atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido que esté dentro de una etiqueta <th> está considerado como el encabezado de la tabla, por lo que se creará en negrita y centrado sin necesidad de indicarlo.

La estructura básica para crear una tabla en HTML es la siguiente:

Aunque la información ya está contenida dentro de una tabla, aún nos falta darle algunas propiedades a la tabla para mejorar su presentación.

Atributos principales de la etiqueta <table>

lanzador
Ejemplo: Atributos de Tablas.
  • border: Especifica si la tabla llevará o no borde (1 ó “”).
  • cellpadding: Especifica el espacio entre el borde de la celda y su contenido.
  • cellspacing: Especifica el espacio entre celdas.
  • width: Especifica el ancho de la tabla.

Atributos principales de la etiqueta <tr>

lanzador
Ejemplo: Atributos de filas.
  • align: Especifica la alineación del contenido de la fila, el cual puede ser “left” (izquierda), “right” (derecha) o “center” (centrado).
  • valign: Especifica la alineación vertical del contenido de la fila, la cual puede ser “top” (arriba), “middle” (en el medio) o “bottom” (abajo).
  • bgcolor: Especifica el color de fondo de la fila. Ej: “#ff0000”.

Atributos principales de la etiqueta <td>

lanzador
Ejemplo: Atributos de celdas.
  • align: Especifica la alineación del contenido de la celda (left, right, center).
  • valign: Especifica la alineación vertical del contenido de la celda (top, middle, bottom).
  • bgcolor: Especifica el color de fondo de la celda. Ej: “#ff0000”.
  • width: Especifica el ancho de la celda.
  • height: Especifica la altura de la celda.
  • colspan, rowspan: especifica el número de columnas y filas que una celda debe combinar o fusionar.

Si agregamos estas propiedades a la primera celda de la tercera fila de la tabla, esta se vería de la siguiente manera:

Aquí vemos que hemos quitado la celda donde se encontraba el contenido 4, esto debido a que la celda del contenido 3 la hemos fusionado en 2 celdas con la propiedad colspan, por tal razón se quitó esa celda del código.

Tablas

Instrucciones:

Observe el código HTML y haga clic en el botón "Correr" para ejecutarlo, puede realizar modificaciones al código y usar botón "Guardar" para almacenar una copia del código fuente.

Código fuente

Panel de resultados

Atributos de tablas

Instrucciones:

Observe el código HTML y haga clic en el botón "Correr" para ejecutarlo, puede realizar modificaciones al código y usar botón "Guardar" para almacenar una copia del código fuente.

Código fuente

Panel de resultados

Atributos de filas

Instrucciones:

Observe el código HTML y haga clic en el botón "Correr" para ejecutarlo, puede realizar modificaciones al código y usar botón "Guardar" para almacenar una copia del código fuente.

Código fuente

Panel de resultados

Atributos de celdas

Instrucciones:

Observe el código HTML y haga clic en el botón "Correr" para ejecutarlo, puede realizar modificaciones al código y usar botón "Guardar" para almacenar una copia del código fuente.

Código fuente

Panel de resultados

Reconocimiento de etiquetas básicas

Instrucciones:

Selecciona la respuesta correcta de la lista y haz clic en el botón  "Calificar"  para obtener el puntaje de esta actividad.

         
<html>
<head>
    <>Mi primera página<>
    <meta charset="UTF-8">
</head>
    <body>
        <>La Internet<>
<>
El Internet moderno permite una mayor flexibilidad en las horas de trabajo y la ubicación. Con el Internet se puede acceder a casi cualquier lugar, a través de dispositivos móviles de Internet.
        <>
<>
Gracias a la web, millones de personas tienen acceso fácil e inmediato a una cantidad extensa y diversa de información en línea y podemos acceder a ella a traves de cualquier navegador. Entre los mas conocidos tenemos:
<>
        <>
            <li>Chrome</li>
            <li>Mozilla Firefox</li>
            <li>Opera</li>
            <li>Safari</li>
        <>
        < src="navegadores.jpg" >
        <br>
        Para mayor informacion visitar el siguiente enlace 
        <br>
        < href=""> Video de internet <>
        <br>
</body>
</html>

Elementos y propiedades de tabla

Instrucciones:

Selecciona la respuesta correcta de la lista y haz clic en el botón  "Calificar"  para obtener el puntaje de esta actividad.

  Tabla Propiedad de espaciado Celda de Cabecera  
actividad 2
Propiedad de Color Celda
Fila Propiedad de Margen
Propiedad Alineación vertical Propiedad de altura
  Propiedad de combinar celdas Propiedad de borde