Que Es HTML

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y

desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una
lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una
comprensión básica de HTML y cúal es su función.

1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado
por paréntesis angulares (<>) de apertura y cierre. Establece dónde comienza o empieza a
tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—.
2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de
cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este
caso dónde termina el párrafo—.

Que Es?
Las listas se usan para citar, numerar y definir cosas. Cada uno de los
elementos de la lista comenzará con una etiqueta <li>, que puede o no llevar su correspondiente
</li> de cierre. VIÑETAS Están englobadas por las etiquetas <ul> y </ul>.

Las etiquetas OL y LI nos sirven para crear listas, OL para listas ordenadas y UL para listas sin

orden. Dentro de las listas, los elementos se identifican con la etiqueta LI.

LISTAS ORDENADAS
Si lo que pretendemos es definir una lista ordenada, lo tendremos que hacer entre
las etiquetas <ol></ol> (ol indica ordered list). Además, cada elemento de la lista se escribirá con la
misma etiqueta que para las listas no ordenadas: <li>.

¿Qué es una etiqueta HTML?

HTML es un markup language, lo que significa que está escrito con códigos que puede leer una
persona sin que sea necesario compilarlo primero. En otras palabras, el texto en una página web
está «marcado» con estos códigos para dar instrucciones al navegador web sobre cómo mostrar el
texto. Estas etiquetas de marcado son las propias etiquetas HTML.

Cuando escribes código en HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML
están hechas con un número de partes específicas, incluyendo:

 El carácter “menor que” <

 Una palabra o carácter que determina qué etiqueta se está escribiendo
 Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre
=”valor”
 El carácter “mayor que” >

El hipertexto (HTML) es un lenguaje informático que forma la mayoría de las páginas web y
plataformas online. HTML no se considera un lenguaje de programación, ya que no puede crear una
funcionalidad dinámica. Sin embargo, los usuarios web pueden crear y estructurar secciones,
párrafos y enlaces usando elementos, etiquetas y atributos.
En la actualidad existen 142 etiquetas HTML disponibles que permiten la creación de varios
elementos. A pesar de que algunos ordenadores nuevos ya no admiten algunas de estas, es
importante tener constancia de la existencia de ellas.

Sin embargo, el HTML ha ido evolucionando los últimos años. Para que nos hagamos una idea, la
primera versión contaba solamente con 18 etiquetas. Desde entonces, cada nueva versión ha traído
nuevas etiquetas y atributos. La actualización más importante fue la introducción en 2014
del HTML5. La principal diferencia entre ambas es que la nueva admitía nuevos tipos de controles de
formularios. También incluía diversas etiquetas semánticas que describían mejor el contenido, como
<article>, <headers> y <footer>.

¿Cómo funcionan las etiquetas HTML?

La mayoría de páginas web tienen varias páginas HTML diferentes. Por ejemplo, una página de
inicio, otra de producto, otra de contacto, etc. Cada una de estas tiene HTML separados. Los
documentos HTML son archivos que acaban con .html o .htm. Un navegador lee el archivo y
muestra su contenido para los internautas puedan verlo.

Como hemos comentado anteriormente, todas las páginas HTML contienen una serie de elementos
HTML que a la vez disponen de diferentes etiquetas y atributos. Es decir, los elementos HTML son
los componentes básicos de una página web. Una etiqueta contiene mucha información. Le indica al
navegador dónde empieza y dónde termina cada elemento, mientras que un atributo describe las
características.

Los elementos HTML suelen dividirse en tres partes. Esta combinación de las tres crea un elemento
HTML.

 Etiqueta de apertura: Se utiliza para indicar dónde empieza un elemento. Está envuelta en
corchete de apertura y cierre. Por ejemplo puedes usar la etiqueta de inicio <p> para crear un
párrafo.
 Contenido: El contenido es el resultado que ve la audiencia.
 Etiqueta de cierre: Es lo mismo que la etiqueta de apertura pero con una barra inclinada
delante del nombre del elemento. Es decir, </p> para finalizar un párrafo.

Otra parte fundamental de un elemento HTML son los atributos. Estos tienen dos secciones:

 Nombre: El nombre identifica la información adicional que un usuario quiere agregar.

 Valor del atributo: Da más detalles que el anterior.

¿Cuáles son las etiquetas HTML básicas?

Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a
continuación las explicamos:

 <body> para el contenido
 <head> para información sobre el documento
 <div> división dentro del contenido
 <a> para enlaces
 <strong> para poner el texto en negrita
 <br> para saltos de línea
 <H1>…<H6> para títulos dentro del contenido
 <img> para añadir imágenes al documento
  <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la
lista
 <p> para parágrafos
 <span> para estilos de una parte del texto
<body></body>

Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para
cualquier documento ya que indica donde empieza el contenido visible del documento.
<head></head>

La parte superior del documento HTML, es donde podremos indicar los metadatos: título del
documento, hojas de estilos, javaScript, CSS…
<div></div>

Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de
otros controles. La etiqueta <div> nos ayuda a estructurar el documento en secciones.
<a></a>

Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la
etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro atributo muy
usado es target, el cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o en la
misma.

Ejemplo HTML:

Pulsa <a href=”https://www.nombredelaweb.com/” target=”_blank”>aquí</a> para visitar DonDominio.

<strong></strong>

Si tienes mucho texto, es importante poder dar énfasis a una parte en concreto, con la etiqueta
strong lo podemos hacer.

<br>

Con esta etiqueta HTML le podemos decir al navegador que viene un salto de línea. Nos sirve para
hacer el texto más leíble.
<H1></H1> …. <H6></H6>

Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número> nos permiten indicar la
importancia del título y para estructurar el contenido, de esta forma ayudamos a los bots a entender
la importancia del contenido.
<IMG></IMG>

Usamos la etiqueta IMG para mostrar imágenes dentro del contenido. Necesita el atributo src para
funcionar, ya que será donde indicaremos desde donde tiene que mostrar la imagen.
<OL><li></li><OL> | <UL><li></li><UL>

Las etiquetas OL y LI nos sirven para crear listas, OL para listas ordenadas y UL para listas sin
orden. Dentro de las listas, los elementos se identifican con la etiqueta LI.

Ejemplo HTML:
<ul>

<li>Primer elemento</li>

<li>Segundo elemento</li>

<ul>
<P></P>

Etiqueta que nos sirve para agrupar texto dentro de un parágrafo. El propósito es poder hacer el
contenido más fácil de leer y organizado.
<SPAN></SPAN>

Con la etiqueta podemos personalizar el estilo de solamente una parte del texto.

Ejemplo HTML:

Solo <span style=”color: red;”>esta palabra</span> en rojo.

Ventajas y desventajas del HTML

Como todo lenguaje informático, el HTML tiene sus ventajas y sus desventajas. Entre las ventajas,
podríamos destacar que es apto para principiantes, que tiene una curva de aprendizaje poco
profunda y que es accesible. Además, es de código abierto y completamente gratuito y se ejecuta
de forma nativa en todos los navegadores web.

Por otro lado, entre las desventajas, se encuentra que para una funcionalidad dinámica es posible
que haya que utilizar JavaScript o un lenguaje back-end como PHP. Además, los usuarios deben
crear páginas web individuales para HTML, incluso si los elementos son los mismos y es posible que
los navegadores más antiguos no muestren las etiquetas más nuevas.

¿Qué te ha parecido este artículo sobre etiquetas HTML? Deja tus comentarios y ¡comparte!

Los atributos HTML te permitirán trabajar más rápido y de forma más eficiente. Si quieres incorporar
estas habilidades en tu perfil profesional no dudes en consultar nuestro Executive Master en
Marketing Digital, Analítica y UX Contarás con el apoyo y seguimiento de expertos en activo en
cada una de estas áreas.

Estás aquí: Inicio / Curso de HTML / Listas HTML

Listas no ordenadas: <ul>
Las listas no ordenadas van dentro de la etiqueta <ul> HTML y de su cierre </ul>. Cada punto que
queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta <li> HTML, ésta se generará de forma automática. Pero si
queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”.
Así podemos hacer que la lista esté definida por puntos negros (li type=”disc”), por puntos con el
fondo blanco (li type=”circle”) o por cuadrados (li type=”square”). Aunque esta apariencia dependerá
del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos.
Vamos con un pequeño ejemplo en código:
<ul>
<li type="circle">Esto es un tipo de punto.</li>

<li type="square">Este es otro.</li>

<li type="disc">Y este es otro diferente.</li>

</ul>
Cuyo resultado visual será el que veremos a continuación:

o Esto es un tipo de punto.

 Este es otro.

 Y este es otro diferente.

Listas ordenadas: <ol>

Las listas ordenadas van enmarcadas dentro de las etiquetas <ol></ol>. Cada punto de la lista se
escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los
símbolos serán números y éstos se irán generando automáticamente por orden, conforme
escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros
queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se
generarán automáticamente por orden, partiendo de ese número.
Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo
siguiente:
<ol>

<li value="20">Este será el número 20. </li>

<li>Este será el 21. </li>

<li> Este será el 22. Y así sucesivamente. </li>

</ol>
Y el resultado será el siguiente:

20. Este será el número 20.

 21. Este será el 21.

22. Este será el 22. Y así sucesivamente.

Listas de definiciones: <dl>, <dt> y <dd>

Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>.
Vamos a explicarlas por partes:
La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro de ella, entre
ella y su cierre, va a ir una definición.
La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos a
definir. Para entendernos mejor, dentro de <dt> iría el título de la definición.
La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro de ésta irá la
definición.
Si escribimos varios listados de definición, éstas se separarán automáticamente entre ellas para
facilitar su diferenciación.
Aquí podemos ver un ejemplo de código de dos listado de definición:
<dl>

<dt>Aquí va el término que definiremos</dt>

<dd>Y aquí dentro irá la definición propiamente dicha.</dd>

</dl>

<dl>

<dt>Aquí va la segunda definición</dt>

<dd>Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.</dd>

</dl>
Cuyo resultado será el siguiente:

Aquí va el término que definiremos

 Y aquí dentro irá la definición propiamente dicha.

Aquí va la segunda definición

Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.

CREACIÓN DE LISTAS EN HTML

En la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML
incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras o
números. Además, para que las páginas tengan más vistosidad, se pueden colocar imágenes
delante de cada párrafo.
 

 
A continuación veremos los principales tipos de listas de los que HTML dispone.
 
 
LISTAS NO ORDENADAS
Las listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul indica
unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un nuevo punto, lo
tendremos que hacer dentro de las etiquetas <li> y </li>.
Si no le indicamos nada a la etiqueta <li>, la viñeta o marca que indica que se trata de un elemento
de una lista se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo
del punto o marca a emplear, debemos indicarlo específicamente. En el pasado se usaba el atributo
“type”, hoy en día no recomendado (deprecated). Con este atributo se podía hacer que la lista
estuviera definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle")
o por cuadrados (li type="square").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a
continuación:
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">
 
La apariencia final que realmente consigamos dependerá del navegador, es decir, el resultado
puede ser distinto según usemos un navegador u otro. No todos los navegadores se comportan de la
misma forma a la hora de mostrar un símbolo gráfico como una viñeta o marca.
Una lista no ordenada se usa cuando se enumeran elementos sin que el orden tenga relevancia: por
ejemplo si decimos “Las personas presentes en la habitación eran: Juan, Manuel, Pedro, Gonzalo”
se trata de una lista no ordenada (Juan, Manuel, Pedro, Gonzalo). En cambio si la enumeración
implica un orden se tratará de una lista ordenada. Ejemplo: “Los mejores clasificados de la carrera
fueron: Juan, Manuel, Pedro, Gonzalo” (se entiende que Juan fue el primero, Manuel el segundo,
Pedro el tercero, etc.). Para cada caso, tendremos que decidir si usamos una lista HTML como
ordenada o no.
 
 
EJERCICIO
El siguiente código define una lista no ordenada y hace uso de atributos deprecated para la etiqueta
li. Guarda el código como archivo html con un nombre como ejemplo1dep.html. Sustituye estos
atributos por CSS y guarda el archivo como ejemplo1css.html. Compara la visualización de ambos
documentos HTML en tu navegador.
<!DOCTYPE html>
<html>
    <head>       
        <meta charset="utf-8">
        <title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
    </head>
    <body>
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
</body>
</html>

 
El resultado a obtener será similar a este:
 
 
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
 
 
LISTAS ORDENADAS
Si lo que pretendemos es definir una lista ordenada, lo tendremos que hacer entre las etiquetas
<ol></ol> (ol indica ordered list). Además, cada elemento de la lista se escribirá con la misma
etiqueta que para las listas no ordenadas: <li>. Pero al ser listas ordenadas los símbolos por defecto
serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos
elementos de la lista.
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros
queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se
generarán automáticamente por orden, partiendo de ese número.
Por ejemplo, si queremos que nuestra lista empiece por el número 20, podemos indicarlo en el
código. Escribe este código en tu editor de texto y comprueba el resultado.
<!DOCTYPE html>
<html>
    <head>       
        <meta charset="utf-8">
        <title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
    </head>
    <body>
<ol>
<li value="20">Este será el número 20.</li>
<li>Este será el 21.</li>
<li>Este será el 22. Y así sucesivamente.</li>
</ol>
</body>
</html>

 
 
 
Al igual que con las listas no ordenadas, en el pasado se usaba el atributo “type”, hoy en día no
recomendado (deprecated). Con este atributo se podía hacer que la lista estuviera definida por
números (li type="1"), letras minúsculas (li type="a"), letras mayúsculas (li type="A"), número
romanos en minúscula (li type="i") ó mayúscula (li type="I").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a
continuación: <ul style="list-style-type:decimal"> para números, <ul style="list-style-type:lower-
alpha"> para letras minúsculas, <ul style="list-style-type:upper-alpha"> para letras mayúsculas, <ul
style="list-style-type:lower-roman"> para números romanos en minúsculas, <ul style="list-style-
type:upper-roman"> para números romanos en mayúsculas.
Prueba a crear listas usando los distintos valores para este atributo y visualízalas en tu navegador.
 
 
LISTAS DE DEFICIONES O DE DESCRIPCIONES
Este tipo de listas no es de uso frecuente, por lo que vamos a citarlas solo por si encontramos este
tipo de código en alguna página web poder interpretar su significado. Las listas de definiciones se
usan cuando queremos hacer una enumeración tipo “diccionario” donde tenemos varios términos y
su definición o descripción. Por ejemplo, esto serían varios términos y sus definiciones:
Términ
Definición
o

FTP Protocolo para transmisión de ficheros entre ordenadores

HTML Lenguaje de etiquetas empleado para generar páginas web

Lenguaje interpretado en servidor que permite generar páginas web

PHP
dinámicas

 
 
Estos términos y sus definiciones o descripciones podríamos ponerlos de varias maneras dentro de
una página web (como texto sin más, como lista ordenada, no ordenada…) y una de estas maneras
es ponerlo como lista de definiciones.
Para crear una lista de definiciones debemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a
explicarlas por partes:
La etiqueta <dl> indica que dentro de ella va a ir una lista de definiciones o lista de descripciones.
La etiqueta <dt> indica que dentro de ella va un término que vamos a definir.
La etiqueta <dd> nos dice que dentro de ella se encuentra una definición o descripción asociada a
un término. Un término podría tener varias descripciones. Por ejemplo el término Autor podría tener
como descripciones: Mateo Renzi, Olivo Pascua, Jorge Guillén.
Los listados de definición se separarán automáticamente si escribimos varios de ellos.
 
 
EJEMPLO
Escribe este código en tu editor de texto, guárdalo como archivo html y comprueba el resultado.
<!DOCTYPE html>
<html>
    <head>       
        <meta charset="utf-8">
        <title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
    </head>
    <body>
<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
</dl>
<dl>
<dt>Aquí va la segunda definición</dt>
<dd>Segunda definición, separada automáticamente de la anterior.</dd>
</dl>
</body>
</html>

 
 
Habitualmente, los navegadores generan de forma automática el efecto de que la definición o
descripción queda desplazada hacia la derecha (tabulada) respecto a el término, así como el espacio
de separación entre distintas listas de definiciones.
 
 
ANIDAMIENTO O USO SIMULTÁNEO (COMBINACIÓN) DE VARIOS TIPOS DE LISTAS
Si lo deseamos, podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas
ordenadas dentro de cada elemento de una lista desordenada. Veamos un ejemplo. Escribe el
siguiente código en un editor de texto como bloc de notas o Notepad++ y guárdalo con un nombre de
archivo como ejemploCU00718B.html.
<!DOCTYPE html>
<html>
    <head>       
        <meta charset="utf-8">
        <title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
    </head>
    <body>
<ul>
<li>Lenguajes de programación estructurada </li>
<ol>
<li> Lenguaje C </li>
<li> Lenguaje Pascal </li>
<li> Lenguaje Fortran </li>
</ol>

<hr style="height:8px; color: black; background-color: black;" />

<li>Lenguajes de programación orientada a objetos </li>

<ol>
<li>Lenguaje Java </li>
<li>Lenguaje PHP </li>
</ol>
</ul>
</body>
</html>

 
 
El resultado de este código cuando lo visualizamos en un navegador sería algo similar a lo que
mostramos en la siguiente imagen.
 
 
EJERCICIO
Crea una lista ordenada cuyos elementos sean Doctores, Ayudantes y Auxiliares. Dentro de
Doctores define una lista no ordenada cuyos elementos sean: Juana Pérez, Alberto Márquez, Raúl
Moreno. Dentro de Ayudantes define una lista no ordenada cuyos elementos sean: Noelia Suárez,
Abel Rebollo. Dentro de Auxiliares crea una lista no ordenada cuyos elementos sean Silvia Estévez,
Angela González y Cuarthemoc Adanez. Separa cada lista con un elemento hr de color azul, 10
pixeles de grosor y que ocupe el 50% del ancho disponible.
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
 
 
 
 
 
 
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en
este link:  Ver curso completo.
Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier
persona independientemente de su nivel de conocimiento.
 Todas Etiquetas Para Crear Tablas
Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla,
<tr> para crear cada fila y <td> para crear cada columna. La etiqueta <table> encierra todas las
filas y columnas de la tabla.

Elemento Descripción

<table> Representa datos con más de una dimensión.

<caption> Representa el título de una tabla.

<tr> Representa una fila de celdas en una tabla.

<td> Representa una celda de datos en una tabla.

<th> Representa una celda encabezado en una tabla.

<colgroup> Representa un conjunto de una o más columnas de una tabla.

<col> Representa una columna de una tabla.

Tabla 5.1: Tablas de contenido

Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la
tabla, <tr> para crear cada fila y <td> para crear cada columna.
A continuación se muestra el código HTML de una tabla sencilla:
<html>

<head><title>Ejemplo de tabla sencilla</title></head>

<body>

<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>CSS</td>

<td>20</td>

<td>16:00 - 20:00</td>

</tr>

<tr>

<td>HTML</td>

<td>20</td>

<td>16:00 - 20:00</td>

</tr>

<tr>

<td>Dreamweaver</td>

<td>60</td>

<td>16:00 - 20:00</td>

</tr>

</table>

</body>

</html>

Las tablas están incluidas en HTML desde sus primeras versiones y son una forma fantástica de
mostrar datos claramente. Además, si las construimos de forma semántica y correctamente, es muy
sencillo darle estilos desde CSS y cambiar su diseño con unas cuantas propiedades CSS, puesto que
mediante las etiquetas que la componen se puede hacer referencia a cada parte de la misma.
Tablas básicas 

Una tabla puede ser sencilla o compleja, dependiendo de nuestro objetivo y la cantidad de etiquetas o
atributos a utilizar. Así pues, veamos primero las etiquetas básicas para crear una tabla de la forma
más sencilla posible:
Etiqueta Descripción

<table> Etiqueta contenedora que tendrá en su interior toda la tabla.

<tr> Table Row. Etiqueta contenedora de cada fila de la tabla.

<td> Table Data. Cada una de las celdas de la tabla.

<th> Table Header. Cada una de las celdas de cabecera de la tabla.

La etiqueta <table> sería el elemento que contendría todos los elementos de la tabla, mientras

que <th> y <td> se utilizarían para cada uno de los campos de la tabla (cabecera y celda respectivamente).
Cada vez que se quisiera añadir una nueva fila, habría que incluirlo todo dentro de una etiqueta <tr>.

Estas cuatro etiquetas serían las etiquetas necesarias para crear una tabla. Un ejemplo muy sencillo de
una tabla de 3x2 celdas (exceptuando las cabeceras), sería la siguiente:

<table>
<!-- Cabecera -->
<tr>
<th>Título columna 1</th>
<!-- Celda de cabecera de la columna 1 -->
<th>Título columna 2</th>
<!-- Celda de cabecera de la columna 2 -->
<th>Título columna 3</th>
<!-- Celda de cabecera de la columna 3 -->
</tr>
<!-- Primera fila -->
<tr>
<td>Celda 1x1</td>
<!-- Primera celda de la primera fila -->
<td>Celda 2x1</td>
<!-- Segunda celda de la primera fila -->
<td>Celda 3x1</td>
<!-- Tercera celda de la primera fila -->
</tr>
<!-- Segunda fila -->
<tr>
<td>Celda 1x2</td>
<!-- Primera celda de la segunda fila -->
<td>Celda 2x2</td>
<!-- Segunda celda de la segunda fila -->
<td>Celda 3x2</td>
<!-- Tercera celda de la segunda fila -->
</tr>
</table>

En este caso de ejemplo tendríamos una sencilla tabla de 3x2 celdas. Por defecto, en la tabla se crea de
forma que se adapta al número de celdas que tiene la primera fila. Es decir, si en el primer
elemento <tr> se indican 3 elementos <th>, la tabla esperará siempre 3 elementos en cada fila. Si
indicaramos menos, las celdas correspondientes donde deberían estar aparecerían vacías (sin celda). Si
añadieramos una de más, se saldría de la tabla.

Además, si al código HTML anterior le aplicamos unos apropiados estilos CSS de tablas, junto a
cambios de colores, fuentes, márgenes, rellenos y otros aspectos visuales, podremos cambiar el diseño
de la tabla en poco más que un par de líneas.

El siguiente código CSS puede ser utilizado para mostrar esos cambios sobre la tabla anterior:

<style>
/* Cambios sobre la propia tabla */
table{
border-collapse: collapse;
border: 1px solid #ccc;
}
/* Espacio de relleno en celdas y cabeceras */
td,
th{
padding: 10px;
}
/* Modificación de estilos en cabeceras */
th{
background: #000;
color: #fff;
text-transform: uppercase;
}
/* Modificación de estilos en celdas */
td{
text-align: center;
border-bottom: 2px solid #111;
color: #333;
font-size: 18px;
}
</style>
<table>
<!-- Cabecera -->
<tr>
<th>Título columna 1</th>
<!-- Celda de cabecera de la columna 1 -->
<th>Título columna 2</th>
<!-- Celda de cabecera de la columna 2 -->
<th>Título columna 3</th>
<!-- Celda de cabecera de la columna 3 -->
</tr>
<!-- Primera fila -->
<tr>
<td>Celda 1x1</td>
<!-- Primera celda de la primera fila -->
<td>Celda 2x1</td>
<!-- Segunda celda de la primera fila -->
<td>Celda 3x1</td>
<!-- Tercera celda de la primera fila -->
</tr>
<!-- Segunda fila -->
<tr>
<td>Celda 1x2</td>
<!-- Primera celda de la segunda fila -->
<td>Celda 2x2</td>
<!-- Segunda celda de la segunda fila -->
<td>Celda 3x2</td>
<!-- Tercera celda de la segunda fila -->
</tr>
</table>

Combinar celdas 

Cada etiqueta <td> y <th> puede incluir una serie de atributos para modificar su comportamiento o para
establecer relaciones semánticas entre celdas. Probablemente, las más interesantes
sean colspan y rowspan:
Atributo Valor Descripción

colspan número Número de columnas que la celda abarcará.

rowspan número Número de filas que la celda abarcará.

headers ids Id de los elementos <th> con los que tiene relación la celda.

scope (solo <th>
row La cabecera se aplica a alguna de las filas adyacentes.
)

col La cabecera se aplica a alguna de las columnas adyacentes.

 Atributo Valor Descripción

rowgrou
La cabecera se aplica a todas las celdas restantes de la fila.
p

La cabecera se aplica a todas las celdas restantes de la

colgroup
columna.

auto La cabecera se aplica a las celdas de forma automática.

abbr (solo <th>) nombre Abreviatura o información alternativa sobre la cabecera.

Con estos atributos podemos indicar que ciertas celdas abarquen más espacio y se combinen con el
espacio que ocuparía otra celda adyacente y así crear estructuras de tabla más flexibles.

Imaginemos que al código HTML de la tabla anterior, le añadimos antes de la primera fila de <td>, una
nueva fila con una sola celda <td> con un atributo colspan a 3. Con esto estaríamos indicando que esa
nueva fila (originalmente, de 3 celdas) va a abarcar las 3 celdas de espacio con una sola celda:

<style>
td{
border: 1px solid black;
}
</style>

<table>
<!-- ... -->
<tr>
<td colspan="3">Datos adicionales</td>
<!-- Abarca 3 celdas -->
</tr>
<!-- Primera fila -->
<tr>
<td>Celda 1x1</td>
<!-- Primera celda de la primera fila -->
<td>Celda 2x1</td>
<!-- Segunda celda de la primera fila -->
<td>Celda 3x1</td>
<!-- Tercera celda de la primera fila -->
</tr>
<!-- ... -->
</table>

El atributo rowspan actuaría exactamente igual, pero abarcando filas en vertical, en lugar de columnas

en horizontal. También se podrían combinar. Los atributos colspan y rowspan podrán tener como
máximo el número de columnas o filas de la tabla, si tuviera un número mayor, simplemente se utilizará
el máximo de la tabla.

Organización de tablas 

Por defecto, al crear una tabla, el navegador se encarga de crearla a medida que va leyendo las
etiquetas, por lo que la tabla se crea en el orden que se han especificado sus elementos, de arriba a
abajo. Sin embargo, podemos utilizar una serie de etiquetas contenedoras que establecerán la zona de
la tabla donde deben aparecer su contenido:
Etiqueta Descripción

<thead> Etiqueta contenedora de la cabecera de la tabla. Parte superior de la tabla.

<tbody> Etiqueta contenedora del cuerpo de la tabla. Parte central de la tabla.

<tfoot> Etiqueta contenedora del pie de la tabla. Parte inferior de la tabla.

<caption> Establece un título de la tabla, independientemente de su posición.

A las etiquetas de tabla ya vistas, podemos añadir estas etiquetas, pudiendo definir la zona donde
aparecerán sin que, necesariamente tengan el orden correcto. Veamos un ejemplo:

<table>
<!-- Table footer: pie de la tabla (tfoot) -->
<tfoot>
<tr>
<td>Pie de tabla 1</td>
<td>Pie de tabla 2</td>
</tr>
</tfoot>
<!-- Table header: cabecera de la tabla (thead) -->
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
</thead>
<!-- Table body: cuerpo de la tabla (tbody) -->
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</tbody>
<!-- Leyenda o título de la tabla -->
<caption>
Título de la tabla
</caption>
</table>

En este ejemplo, a pesar de seguir el orden tfoot, thead, tbody, caption definido en el HTML, el

navegador lee la tabla y la redistribuye según su significado semántico, de modo que lo organiza
dejándolo con el orden caption, thead, tbody, tfoot. De esta forma, estas etiquetas nos pueden servir
para indicar secciones concretas de la tabla, independientemente del lugar donde estemos escribiendo,
algo que puede ser muy útil si estamos creando la tabla de forma dinámica mediante algún lenguaje de
programación.

Agrupación de columnas 

Las tablas, al definirse en el código siguiendo una estructura horizontal, hacen complejo el aplicar o
realizar una serie de cambios a una columna. Existe una serie de etiquetas para agrupar o seleccionar
columnas y así poder realizar tareas sobre ellas, como por ejemplo, asociarle una clase específica o
darle estilos CSS a una columna concreta de la tabla, sin necesidad de ir celda por celda.

Para ello, utilizaremos las dos siguientes etiquetas:

Etiqueta Descripción

<colgroup> Etiqueta contenedora de columnas. Crea una agrupación de columnas.

<col> Etiqueta que representa a una columna de la tabla.

Estas etiquetas pueden tener especificado un atributo llamado span para así aplicar los atributos de la
etiqueta <col> al número de columnas adyacentes que se indiquen en dicho atributo. Veamos un
ejemplo:

<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<colgroup>
<col style="background:red">
<col span="2"style="background:yellow">
</colgroup>
</table>

Vemos que en el ejemplo se está aplicando un color de fondo rojo a la primera columna, mientras que
a las dos siguientes un color de fondo amarillo, ya que tiene indicado el atributo span a 2 y se aplica a
las dos siguientes columnas: la segunda y la tercera.

Concepto De etiquetas Para Crear Tablas

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="default">
<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="default">
<tr>
<th>Hoy</th>
<th>Mañana</th>
<th>Domingo</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 Domingo
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="default">
<tr>
<th scope="row">Día</th>
<th>Hoy</th>
<th>Mañana</th>
<th>Domingo</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 Domingo
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
Que Se Necesita Para Crear una Pagina Web en HTML
Los requisitos principales y fundamentales, para escribir código HTML y crear páginas web, son
básicamente dos: saber HTML (esto lo conseguirás siguiendo este curso) y un editor de texto
(nosotros utilizaremos el Notepad++, aunque se pueden usar otros editores o programas). Hay
muchos profesionales que crean sus páginas en Dreamweaver, usando Flash u otros programas o
tecnologías.

Esta forma de crear páginas web tiene a favor la fácil creación de éstas pero, si quieres hacer
páginas web de calidad y tener un control total sobre el código generado, lo primero es saber HTML
sin más.
Para crear páginas web obviamente necesitas un ordenador y un navegador (Explorer, Firefox,
Chrome o similar) instalado. ¿Necesitamos conexión a internet para crear páginas web? La
respuesta es que no: podemos crear nuestras páginas en nuestro propio ordenador y a posteriori
subirlas a un servidor remoto para que estén accesibles en internet desde cualquier parte del mundo.
En este curso vamos a trabajar inicialmente en local (es decir, en nuestro propio ordenador sin
necesidad de conexión a internet), y más adelante veremos cómo subir una web a un servidor.
También podríamos generar una página web directamente sobre un servidor, pero por motivos de
didáctica y sencillez consideramos preferible empezar trabajando en local. Una vez tengas
conocimientos más avanzados, podrás hacerlo como te resulte más cómodo.