PROGRAMACIÓN WEB

LENGUAJE DE MARCAS: HTML

CREACIÓN DE TABLAS EN HTML, ATRIBUTOS

PRESENTADO POR:

PRESENTADO A:

GRADO:

INSTITUCIÓN

SABANALARGA

2019
PROGRAMACIÓN WEB:

La programación de los sitios web es una de las disciplinas dentro del mundo de
Internet que más se ha desarrollado y no deja de sorprender día a día con las
posibilidades que abre y genera, ya que no sólo consigue satisfacer necesidades
que se generan, sino que sin la generación de necesidades ofrecen servicios a los
usuarios que éstos no habían imaginado.

En principio, el gran desarrollo de Internet se fundamentó en la posibilidad de

enlazar a través de hipervículos diferentes páginas web lo que generó la enorme
interconexión que es hoy Internet. Esta base que inició esta red, fué desarrollada y
generó el lenguaje ícono de las páginas web que es HTML.

Pero, como decíamos, la creatividad humana no tiene límites y lejos de contentarse

con el desarrollo del lenguaje HTML, enriqueciéndolo en su sintaxis, aparecieron
otro lenguajes, que a su vez desataron una reacción en cadena con respecto a las
operaciones que se podían lograr en un sitio web.

De esta forma, apareció el lenguaje Java, que mejoró sustancialmente la interacción

con el usuario, de manera que éste anexó una sensación de amigabilidad y
usabilidad en Internet, contribuyendo a que su utilización sea mayor.

Los servidores, que son los vinculantes, entre nuestro sitio web y los usuarios,
comenzaron a adaptarse a estas nuevas tecnologías y lenguajes y mejorar sus
servicios, permitiendo que ha través de programas se pudieran generar un diálogo
on line con los usuarios de forma de que éstos recibieran la información que
buscaran más rápido y de forma más eficiente.

De esta manera de Java nació Java Script, que ha su vez incentivó a la creación de
otros lenguajes que apuntaron a el mimso objetivo como PHP, y así constantemente
se están buscando mejoras y nuevas alternativas, todas que apuntan a la
interacción del usuario con el sitio.

Por todo esto que estamos indicando antes, la programación del sitio web tiene la
misma importancia que el diseño web, no se trata de poner uno por encima de otro,
los dos se complementan y hacen que la eficiencia del sitio web sea importante.

Está demostrado que los sitios más visitados son los que brindan un servicio más
“personalizado” al usuario y esto se logra pura y exclusivamente a través de la
programación web, que a través de conocer los gustos y tendencias del usuario,
utiliza estos datos para proporcionarle al mismo información que más le interesa.
LENGUAJE DE MARCAS HTML

Las páginas web ofrecen la posibilidad de tener, además de texto, estructura de la

página (columnas), formatos de fuente (colores, subrayados, negritas...),
imágenes, enlaces, tablas, listados, etc. Y, sin embargo, todas las páginas web
están constituidas por texto plano, o sea, texto sin más. ¿Cómo hacemos para
incluir todos estos elementos adicionales y que el navegador sepa diferenciar que
es contenido y qué no lo es? La solución es utilizar un lenguaje de marcas. Los
lenguajes de marcas no son lenguajes de programación como Scratch (aquí no
hay sentencias que ejecutar); son lenguajes que mediante marcas añaden riqueza
sintáctica y semántica a un texto.

Veamos un ejemplo para que quede más claro. Imaginemos que tenemos la
siguiente frase:

Hoy es un día muy soleado.

Por ahora cumple la función de que es un texto plano. Nos gustaría añadir
características a este texto, pero no al significado, sino a la forma en que se
muestra por pantalla, haciendo por ejemplo que muy esté en negrita para
fortalecer la sensación de que hace mucho sol. Como sabemos que el resultado
de hacerlo ha de ser también texto plano, nos las tendremos que ingeniar de
alguna manera para no confundir el contenido con su formato. La solución: añadir
marcas. Veamos cómo:

Hoy es un día <negrita>muy</negrita> soleado.

Como se puede observar, hemos añadido dos marcas de negrita, una de inicio y
una de final. Podemos identificar claramente las marcas porque vienen entre
signos de mayor y menor. ¡Ésta es la manera que tenemos de no confundirlo con
el contenido! Por otro lado, vemos que las marcas son ligeramente diferente, ya
que una es la de inicio (<negrita>) y otra la de final (</negrita>, nótese la barra), de
manera que el contenido que esté resaltado sea sólo la palabra muy y nada más.

Existen otro tipo de marcas que no requerirían una marca de final. Así, por
ejemplo, pongamos el caso en el que tengamos un párrafo y cursiva (en estos
casos sí necesitamos indicar el inicio y el final) y un salto de línea (aquí, por
contra, no hace falta indicar el final, ya que el salto de línea empieza... y ya está).
Por ejemplo:

<parrafo>
Hoy es un día <negrita>muy</soleado> soleado.
<salto/>
Pero mañana <cursiva>por desgracia</cursiva> lloverá.
</parrafo>

Nótese, que para indicar que salto no tiene marca de finalización, hemos puesto la
barra al final de su marca de inicio. Bien, pues a grandes rasgos esto es lo que es
un lenguaje de marcado: tenemos marcas con un significado específico que
permiten añadir información, formato, etc. a un contenido. Las marcas vienen
entre unos caracteres especiales (los signos de mayor y menor) para no ser
confundidos con el contenido y pueden existir marcas de inicio y final dependiendo
del tipo de marca.

El HTML, el lenguaje de marca más conocido

Hyper Text Markup Language es el lenguaje de marcado de hipertexto. Se utiliza
en las páginas y sitios web y fue creado por el padre de la web, Tim Berners Lee
en 1989.

El lenguaje HTML es el encargado de definir los contenidos de un sitio web de

forma textual y estructurada. Dicho de otra forma, es el encargado de decirle al
navegador web cómo debe visualizarse el sitio web. Si el título está centrado, en
negrita o si tiene un enlaces, por ejemplo, son elementos del marcado en HTML.

Las ventajas de utilizar el HTML son:

 Cualquier modificación del HTML puede hacerse desde un editor de

texto. No es necesario ningún software o conocimiento de programa
alguno.

 Puede integrar diferentes tipos de lenguaje de marcas, XML por ejemplo.

Cada lenguaje define sus etiquetas para representar la información de
una forma u otra.

CREACIÓN DE TABLAS EN HTML:

Una tabla no es otra cosa más que un medio de organizar datos en filas y
columnas. Este concepto ha estado presente en nuestra sociedad por un largo
período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una
forma de transmitir información que, de otro modo, no sería comprendida tan
fácilmente.

En documentos HTML una tabla puede ser considerada, resumidamente,

como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es
conceptualmente distinto a un grupo de columnas que contiene a un grupo de
filas, y esta diferencia tendrá un impacto en la composición y comportamiento de
la tabla.

Como muchas otras estructuras de HTML, las tablas son construidas

utilizando elementos. En particular, una tabla básica puede ser declarada usando
tres elementos, a saber, table (el contenedor principal), tr(representando a las filas
contenedoras de las celdas) y td (representando a las celdas). Dejémoslo más
claro con un ejemplo:

<table class="egt">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

Ten en cuenta que a esta tabla se le han aplicado estilos

mediante CSS para mejorar su comprensión y legibilidad. No se deberían esperar
estos resultados en tablas sin atributos presentacionales asignados.

Puedes ver claramente en el ejemplo anterior, el concepto de filas

conteniendo columnas del que hablamos previamente. Aquí se hace evidente
como las celdas, que han sido numeradas de acuerdo a su aparición en el código,
siguen una secuencia en la representación que va de izquierda a derecha, una fila
por vez. Esto tendrá implicaciones futuras, especialmente cuando se trate el tema
de unificación de celdas y agrupamiento.

CELDAS DE ENCABEZADO

Ahora que ya hemos tratado la estructura básica de una tabla, es hora de

comenzar a crear tablas más útiles.

Una celda de encabezado es un tipo especial de celda utilizada para

organizar y categorizar otras celdas en la tabla. Dicho esto, es diícil imaginar una
tabla donde una celda de encabezado no tenga utilidad. Casi cualquier tabla
puede beneficiarse de un grupo de celdas de encabezado bien ubicado.

En el siguiente ejemplo, construiremos una tabla para mostrar

información acerca del clima en los próximos días. Aquí, las celdas de
encabezado, representadas por el elemento th, son ubicadas en la primera fila de
la tabla, encima de las celdas comunes.
<table class="egt">
<tr>
<th>Hoy</th>
<th>Mañana</th>
<th>Miércoles</th>
</tr>
<tr>
<td>Soleado</td>
<td>Mayormente soleado</td>
<td>Parcialmente nublado</td>
</tr>
<tr>
<td>19°C</td>
<td>17°C</td>
<td>12°C</td>
</tr>
<tr>
<td>E 13 km/h</td>
<td>E 11 km/h</td>
<td>S 16 km/h</td>
</tr>
</table>
Hoy Mañana Miércoles

Soleado Mayormente soleado Parcialmente nublado

19°C 17°C 12°C

E 13 km/h E 11 km/h S 16 km/h

Es fácil ver aquí cómo cada celda de encabezado en la tabla, provee

información para el resto de las celdas en la columna a la que pertenece. Algunos
agentes, como los navegadores de voz, hacen el mismo análisis cuando deben
informar al usuario qué celda de encabezado está asociada a una celda en
particular. Pero en algunos casos, las ambigüedades necesitan ser evitadas y es
por este motivo que HTML provee algunos atributos como scope.

EL ATRIBUTO SCOPE

El atributo scope provee un mecanismo para indicar explícitamente a qué

celdas afecta una celda de encabezado. Este atributo solo puede ser declarado en
una celda de encabezado y tomar los valores "col", "row", "colgroup" y "rowgroup".
Los valores "col" y "row" indican que la celda de encabezado provee información
para el resto de las celdas en la columna o fila (respectivamente) en que está
presente. Los otros dos valores tendrán sentido más adelante en este tutorial.
 En el siguiente ejemplo, la tabla presentada anteriormente ha sido
mejorada con más celdas de encabezado, con el fin de aumentar la legibilidad.
Aquí, la celda en la esquina superior izquierda de la tabla, proveería información
ambigua si el atributo scope no estuviera presente. En otras palabras, afectaría a
las celdas en su columna, así como a las celdas en su fila. La presencia del
atributo scope ha dejado en claro que las celdas afectadas por este encabezado
son aquellas en la misma fila.

<table class="egt">
<tr>
<th scope="row">Día</th>
<th>Hoy</th>
<th>Mañana</th>
<th>Miércoles</th>
</tr>
<tr>
<th>Condición</th>
<td>Soleado</td>
<td>Mayormente soleado</td>
<td>Parcialmente nublado</td>
</tr>
<tr>
<th>Temperatura</th>
<td>19°C</td>
<td>17°C</td>
<td>12°C</td>
</tr>
<tr>
<th>Vientos</th>
<td>E 13 km/h</td>
<td>E 11 km/h</td>
<td>S 16 km/h</td>
</tr>
</table>
Día Hoy Mañana Miércoles

Condición Soleado Mayormente soleado Parcialmente nublado

Temperatura 19°C 17°C 12°C

Vientos E 13 km/h E 11 km/h S 16 km/h

El atributo border
El atributo border indica si se dibujan bordes alrededor de las celdas y un borde
alrededor de la tabla. El único valor admitido es el valor 1, sin unidades, aunque el
borde se dibuja aunque no se escriba este valor.
<table border="1">
...

<table border="">
...

<table>
...

Normalmente, las tablas sin bordes se utilizan como elemento de diseño (para
distribuir elementos) y las tablas con borde se utilizan para mostrar información en
la que los elementos de la misma fila o de la misma columna están relacionados.
Si en la hoja de estilo se establece un borde para un elemento de la tabla, este
borde se muestra aunque el atributo border sea vacío.
<table>
...
table {
border: red 5px solid;
}

El validador del W3C recomienda no utilizar el atributo border y en su lugar asignar

bordes a los elementos en la hoja de estilo:
<table border="1">
...

<table>
...
table {
border: #b2b2b2 1px solid;
}
td, th {
border: black 1px solid;
}

Atributos de <td> y <th>

Los atributos colspan y rowspan
Los atributos colspan y rowspan permiten unir una celda con las celdas contiguas,
tanto horizontal como verticalmente. El valor de colspan indica la cantidad de
celdas unidas en horizontal y el valor de rowspan indica la cantidad de celdas
unidas en vertical.
<table>
<caption>Esto es una tabla</caption>
<tbody>
<tr>
<td colspan="2">celdas a1 y b1 unidas</td>
</tr>
<tr>
<td>celda a2</td>
<td>celda b2</td>
</tr>
</tbody>
</table>

<table>
<caption>Esto es una tabla</caption>
<tbody>
<tr>
<td rowspan="2">celdas a1 y a2 unidas</td>
<td>celda b1</td>
</tr>
<tr>
<td>celda b2</td>
</tr>
</tbody>
</table>

<table border="1">
<caption>Esto es una tabla</caption>
 <tbody>
<tr>
<td rowspan="2" colspan="2">celdas a1, a2, b1 y b2 unidas</td>
<td>celda c1</td>
</tr>
<tr>
<td>celda c2</td>
</tr>
<tr>
<td>celda a3</td>
<td>celda b3</td>
<td>celda c3</td>
</tr>
</tbody>
</table>

Atributos de <col>
El atributo span
El atributo span permite que una etiqueta <col> haga referencia a varias columnas
seguidas. El valor del atributo span indica el número de columnas al hace
referencia la etiqueta <col>.
<table border="1">
<caption>Esto es la leyenda</caption>
<col span="2"><col>
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</tbody>
</table>
col {
background-color: lightblue;
}
Atributos de <colgroup>
El atributo span
Para indicar el número de columnas que forman parte de un grupo de columnas,
se pueden utilizar etiquetas <col> (con o sin atributo span) o el
atributo spande <colgroup>. Si se utiliza el atributo span, su valor indica el número
de columnas que forman parte del grupo de columnas.
Pero si se utiliza el atributo span en la etiqueta <colgroup>, no se pueden incluir
etiquetas <col> en el <colgroup>.
<table border="1">
<caption>Esto es la leyenda</caption>
<colgroup span="2"></colgroup><col>
<tbody>
...
colgroup {
background-color: lightgrey;
}
col {
background-color: lightblue;
}

<table border="1">
<caption>Esto es la leyenda</caption>
<colgroup><col><col></colgroup><col>
<tbody>
...
colgroup {
background-color: lightgrey;
}
col {
background-color: lightblue;
}

<table border="1">
<caption>Esto es la leyenda</caption>
<colgroup><col span="2"></colgroup><col>
<tbody>
...
colgroup {
background-color: lightgrey;
}
col {
background-color: lightblue;
}