Manejo de HTML 2
Estructura básica de una pagina WEB
Cabecera: Se usa la etiqueta
<header> es la parte superior de la
página. Generalmente está
formado por una serie de
elementos comunes: logo de la
empresa, nombre, una imagen o
imágenes representativas y, en
algunos casos, datos de contacto
como teléfono e email. No
confundir con el <head>.
Como ejemplo tenemos el sitio web del MinTic, en el recuadro rojo podemos observar la cabecera
de la pagina, generalmente la cabecera se repite en todas las paginas del sitio brindando la
identidad. Debemos tener eso muy claro, la cabecera nos ayuda a identificar que aun estamos
trabajando en el mismo sitio.
Barran de navegación: se usa la etiqueta <nav>. La barra de navegación es un menú que nos permite
navegar por todo el sitio web de una forma rápida y sencilla. La barra de navegación al igual que la
cabecera se repite en todas las paginas del sitio, es muy común encontrar el menú de navegación dentro
del <header> .
Para la construcción se usan las etiquetas de lista < ul> para luego con css darle el
aspecto deseado. Nuevamente en el sitio web de MinTic el recuadro nos señala la barra de
navegación
Información principal: Se usa la etiqueta <main> es la gran parte central de la página y contiene la mayor parte
del contenido particular de una página web; por ejemplo, el video que quieres ver, la narración que quieres leer,
el mapa que quieres consultar, los titulares de las noticias, entre otros.
En el sitio web de mozilla developer
resaltado por un recuadro rojo podemos
observar la sección principal.
Barra lateral: se utiliza la etiqueta <aside>, Suele incluir algún tipo de información adicional, enlaces,
citas, publicidad, entre otros.
Normalmente está relacionada con el contenido principal de la página (por ejemplo, en una página de
noticias, la barra lateral podría contener la biografía del autor o enlaces a artículos relacionados), pero
en otras ocasiones encontraras elementos recurrentes como un menú de navegación secundario.
Nuevamente en el sitio web de
mozilla developer resaltado por un
recuadro rojo podemos observar la
barra lateral.
Pie de pagina: se usa la etiqueta <footer> Es la El pie también se suele usar para propósitos SEO,
parte inferior de la página, que generalmente e incluye enlaces de acceso rápido al contenido
contiene la letra pequeña, el copyright o la más popular.
información de contacto. Como ejemplo en el recuadro rojo de la pagina de
inicio de sesión de Twitter podemos observar el
pie de pagina
Es el sitio donde se
coloca la información
común (al igual que en el
encabezado), pero esta
información no suele ser
tan importante o es
secundaria con respecto
a la página en sí misma.
Como se menciono al inicio la
estructura de una pagina web no
esta definida, por esta razón es
posible que una pagina web tenga
todos los elementos mencionados o
solo algunos.
No es estrictamente necesario que
tengan o se utilicen todas las
etiquetas.
Tablas en HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de tablas N°1</title>
</head>
<body>
Ya que hemos conocido algunas de las
etiquetas básicas de HTML comenzaremos a <table>
<tr>
ver estructuras un poco mas complejas, <td>Celda 1</td>
primero veremos las tablas. <td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
Las tablas es método para organizar <td>Celda 5</td>
información, mediante filas y columnas. <td>Celda 6</td>
</tr>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</table>
</body>
</html>
Las etiquetas usadas para esto son las <!DOCTYPE html>
<html lang="es">
siguientes:
<head>
<meta charset="utf-8">
<table>: es la etiqueta que genera una tabla, <title>Ejemplo de tablas N°1</title>
en otras palabras es el contenedor de la </head>
tabla <body>
<table>
<tr>: esta etiqueta ira dentro de <table>, y <tr>
<td>Celda 1</td>
crea una fila, es decir nuestra tabla tendrán <td>Celda 2</td>
tantas filas como <tr> usemos. <td>Celda 3</td>
</tr>
<tr>
<td>: esta etiqueta crea debe ir dentro de las <td>Celda 4</td>
<tr>, y su función es crear una celda dentro <td>Celda 5</td>
de la columna. <td>Celda
</tr>
6</td>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de tablas N°2</title>
</head>
<body>
<table>
<caption>Titulo de la tabla</caption>
<thead>
<tr>
<th>Columna 1</th>
Sin embargo las etiquetas <table>, <tr> y <td> solo <th>Columna 2</th>
<th>Columna 3</th>
nos sirven para la estructura básica de una tabla, </tr>
</thead>
para que nuestra tabla sea mas funcional tenemos
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
las siguientes etiquetas: <td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<caption>: Esta etiqueta se usa para agregar un <td>Celda 5</td>
<td>Celda 6</td>
titulo a la tabla, va justo después de la etiqueta </tr>
<tr>
<table>, es una etiqueta opcional ya una tabla no
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
siempre necesita titulo. </tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de tablas N°2</title>
</head>
<body>
<table>
<caption>Titulo de la tabla</caption>
<thead>
<tr>
<th>Columna 1</th>
<thead>: similar a la etiqueta <table> crea un <th>Columna 2</th>
<th>Columna 3</th>
contenedor para la cabecera de la tabla. La </tr>
</thead>
cabecera es un una fila en el tope de la tabla que
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
por lo general lleva información de identificación <td>Celda 3</td>
</tr>
de los datos en cada columna, para crear esta fila <tr>
<td>Celda 4</td>
dentro del contenedor de la cabecera usamos <tr>. <td>Celda 5</td>
<td>Celda 6</td>
</tr>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</table>
<th>: esta etiqueta tienen la misma función que </body>
</html>
<td>. Pero esta se usa únicamente para la columna
<tr> de la cabecera.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de tablas N°3</title>
</head>
<body>
<table>
Ahora que la tabla tiene una cabecera, la <caption>Titulo de la tabla</caption>
<thead>
estructura completa de una tabla debe ser
<tr>
<th>Columna 1</th>
cabecera, cuerpo y pie, siendo este ultimo
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
opcional. </thead>
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
<tbody>: Es la etiqueta crea un contenedor que </tr>
<tr>
representa el cuerpo de la tabla, dentro de este <td>Celda 4</td>
<td>Celda 5</td>
contenedor es donde ira las filas y columnas de <td>Celda 6</td>
</tr>
nuestra tabla. <tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Pie de Tabla: </td>
<td> informacion</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de tablas N°3</title>
</head>
<body>
<table>
<caption>Titulo de la tabla</caption>
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
<tfoot>: Es la etiqueta que crea el contenedor </tr>
</thead>
que representa el pie de la tabla, se construye <tbody>
<tr>
como cualquier otra fila de la tabla con un <tr> <td>Celda 1</td>
<td>Celda 2</td>
para crear la fila y <td> para crear las celdas <td>Celda 3</td>
</tr>
necesarias. <tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Pie de Tabla: </td>
<td> informacion</td>
</tr>
</tfoot>
</table>
</body>
</html>
