4.13. Introducción a HTML: estructura básica, etiquetas y atributos: Tablas en HTML
Página 17 | Escuchar en audio
Introducción a HTML: estructura básica, etiquetas y atributos: Tablas en HTML
HTML, o lenguaje de marcado de hipertexto, es el lenguaje estándar para crear páginas web y aplicaciones. Compuesto por una serie de elementos o "etiquetas", HTML forma la estructura de una página web y le indica al navegador cómo mostrar el contenido. En esta sección, exploraremos la estructura básica de HTML, etiquetas y atributos, con especial atención en las tablas en HTML.
Estructura básica de HTML
Una página HTML se compone de una serie de elementos anidados. Cada página comienza con una declaración del tipo de documento, que para HTML5 es simplemente . A continuación, tenemos la etiqueta html que rodea todo el contenido de la página, seguida de las etiquetas head y body.
La etiqueta head contiene metadatos sobre la página, como el título que aparece en la pestaña del navegador, enlaces a hojas de estilo CSS y scripts JavaScript. La etiqueta del cuerpo contiene el contenido principal de la página que es visible para los usuarios.
Ejemplo de estructura HTML básica
<!DOCTYPE html>
<html>
<cabeza>
<title>Título de la página</title>
</cabeza>
<cuerpo>
El contenido de la página va aquí.
</cuerpo>
</html>
Etiquetas y atributos HTML
Los elementos HTML se definen mediante etiquetas. Una etiqueta se compone de un nombre de elemento, rodeado por corchetes angulares. La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre, con el contenido del elemento en el medio.
Por ejemplo, para crear un párrafo, usamos la etiqueta p. La etiqueta de apertura es <p> y la etiqueta de cierre es </p>. El contenido del párrafo va entre estas etiquetas.
Además, las etiquetas pueden tener atributos que proporcionan información adicional sobre el elemento. Los atributos normalmente vienen en pares nombre/valor y se incluyen en la etiqueta de apertura del elemento.
Ejemplo de etiquetas y atributos HTML
<p style="color:blue">Este es un párrafo azul.</p>
En este ejemplo, el estilo es un atributo de la etiqueta p y "color:azul" es el valor del atributo. Esto le indica al navegador que muestre el texto del párrafo en azul.
Tablas en HTML
Las tablas en HTML se definen con la etiqueta <table> y constan de filas y celdas. Las filas se definen con la etiqueta <tr> y las celdas dentro de las filas se definen con la etiqueta <td> para las celdas de datos o <th> a las celdas del encabezado.
Ejemplo de Tabla en HTML
<tabla>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</tabla>
Este ejemplo crea una tabla con dos encabezados y dos celdas de datos. El resultado es una tabla con dos columnas y dos filas.
Las tablas en HTML también pueden tener atributos, como 'borde' para definir el borde de la tabla, 'ancho' y 'alto' para definir el ancho y alto de la tabla, y 'cellpadding' y 'cellspacing' para definir el espacio dentro y entre las celdas.
Ejemplo de tabla HTML con atributos
<table border="1" width="100%" cellpadding="5">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</tabla>
Este ejemplo crea una tabla con un borde de 1 píxel, un ancho del 100 % del ancho de la página y un espacio interno de 5 píxeles en cada celda.
Ahora responde el ejercicio sobre el contenido:
¿Cuál es la función de las etiquetas 'table', 'tr' y 'td' en HTML?
¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.
¡Tú error! Inténtalo de nuevo.
Siguiente página del libro electrónico gratuito:
18Introducción a HTML: estructura básica, etiquetas y atributos: etiquetas divididas y extendidas
4 minutos
¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!
