Ejercicio HTML puro
A los fines de aprender las etiquetas que más se usan en la actualidad en HTML5 realizaremos un ejercicio sin estilo, usando solamente etiquetas. En el ejercicio siguiente le agregaremos estilo y observaremos cómo cambia sustancialmente.
El primer link corresponde a escribir solamente etiquetas HTML, a modo de aprendizaje.
El segundo link tiene aplicado las propiedades CSS que iremos estudiando.
Más adelante le incorporaremos javascript.
● Inicio
Paso 1 - Nueva Carpeta
Para iniciar un proyecto siempre creamos una carpeta nueva, donde están todos los archivos que necesitamos para el mismo. De esta manera podremos subirlo a un servidor para que pueda convocarse desde cualquier navegador a través de internet.
Paso 2 - VSC
Inicializamos Visual Studio Code y desde File , en la opción “Open Folder” abrimos la carpeta.
Paso 3 - Index.html
Una vez en la carpeta, creamos desde File - “New File” - index.html - create file o situándonos en el menú lateral, con el primer ícono que nos aparece en la parte superior de nuestra carpeta.
Paso 4 - Base html
Una vez que ya tenemos nuestro index.html, generamos la base con “! + tab”. Obtenemos lo siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>● Completamos el head
Paso 5 - Favicon y título
Un favicon (del inglés favorite icon o icono de favoritos) es un pequeño icono o logotipo que identifica a un sitio web. Se visualiza principalmente en la pestaña del navegador, junto al nombre de la página, y también en la barra de marcadores, el historial y los resultados de búsqueda.Copiamos en nuestra carpeta una imagen pequeña (cualquiera), que usaremos como favicon para que aparezca en la pestaña superior del navegador y escribimos el título que querramos dentro de la etiqueta "<title> Nuestro Título </title>".
Si escribimos "link" y buscamos "link:favicon" para luego presionar la tecla "tab". Aparece completo automáticamente y sólo debemos cambiar el href por el nombre de nuestra imagen.
Y nos queda de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="icono-favicon.png" type="image/x-icon">
<title>Ejercico 1 - Economía</title>
</head>
<body>
</body>
</html>Paso 6 - Verificamos en Go Live
Sólo aparecerá la pestaña superior, porque no hemos escrito nada en el body.
Si descargamos en Visual Studio Code la extensión Live Preview de Microsoft, al presionar botón derecho sobre el index.html, podemos seleccionar show preview y nos aparecerá en visual studio code como ventana. Presionando en el ícono superior de dos ventanas, podremos ir viendo lo que hacemos en la pestaña lateral.
● Estructura general
Paso 7 - body
Dentro del body, comenzamos con la estructura del documento web:
...
<body>
<header></header>
<main></main>
<footer></footer>
</body>
...Paso 8 - Encabezado - Header
Primeramente desarrollamos el header
<body>
<header>
<h1>Economía y Acción Humana</h1>
<p>
Un documento de ejemplo utilizando etiquetas semánticas de <strong>HTML5 Puro</strong>.
</p>
<nav></nav>
</header>
<main></main>
<footer></footer>
</body>Dentro del encabezado tendremos solamente dos etiquetas.
Una para el título, la etiqueta h1 y otra con una aclaración usando la etiqueta de párrafo p.
Así iremos aprendiendo las etiquetas y vocabulario profesional sin mucho esfuerzo.
Recordemos que tanto h1 como p tienen display block. Se comportan como elementos de bloque. Cada ocupa todo el renglón un renglón.
Como queremos enfatizar en las palabras “HTML5 Puro”, lo situamos dentro de la etiqueta strong, que lo renderiza con negrita y como esta etiqueta tiene como valor por defecto display inline, queda en el mismo renglón.
Renderizar es el proceso de tomar el código y generar lo que vemos en la pantalla.
Observar que el h1 tiene un cierto margen que hace que no esté todo pegado.
Los valores que se configuran solos al escribir h1 son: (valores por defecto)
- ❖ display: block - Ocupa todo el ancho disponible y comienza en una nueva línea.
- ❖ font-size: 2em - El tamaño de la fuente es el doble del tamaño base del cuerpo. Normalmente es 16px. Entonces el h1 tiene por defecto 32px.
- ❖ font-weight: bold - El texto aparece en negrita.
- ❖ margin-top: 0.67em y margin-bottom: 0.67em - Aplica márgenes superior e inferior.
- ❖ margin-left: 0 y margin-right: 0 - No tiene márgenes horizontales.
Cuando usemos css, podremos cambiar los valores por defecto, pero la etiqueta indica que es un título importante.
Lo mismo pasa con p. Tiene valores por defecto, que en el futuro con css podremos cambiar, pero el navegador y los buscadores entienden que es un párrafo aclaratorio.
Los valores por defecto de p son:
- ❖ display: block - Ocupa todo el ancho disponible y comienza en una nueva línea.
- ❖ font-weight: bold - El texto aparece en negrita
- ❖ ont-size: inherit - Hereda el tamaño del padre. En este caso del body que es 16px.
- ❖ margin: 0 y padding: 0 - No tiene ningún tipo de margen a los costados, arriba o abajo. Tampoco tiene espaciado interno (padding) por defecto.
Los valores por defecto de strong son:
- ❖ display: inline - Se mantiene en la misma línea del texto, sin generar saltos de línea.
- ❖ font-size: inherit - Hereda el tamaño del padre. En este caso , toma el font-size (tamaño de fuente) de la etiqueta p que lo contiene.
- ❖ margin-top: 1em y margin-bottom: 1em - Aplica márgenes superior e inferior.
- ❖ margin-left: 0 y margin-right: 0 - No tiene márgenes horizontales.
<body>
<header>
<h1>Economía y Acción Humana</h1>
<p>
Un documento de ejemplo utilizando etiquetas semánticas de <strong>HTML5 Puro</strong>.
</p>
<nav></nav>
</header>
<main></main>
<footer></footer>
</body>● Completamos el header
Paso 9 - Encabezado Completo
La etiqueta nav nos indica que en su interior estará la navegación de nuestro sitio web.
Entonces escribimos una lista con ul de los subtítulos que habrá en el documento, de manera tal que al presionarlo nos llevará a su respectiva sección.
La etiqueta li es la que indica que lo escrito allí es un item de la lista.
Finalmente dentro de cada item de la lista tenemos el enlace, donde en su atributo “href” escribimos a donde queremos que se dirija.
El signo “#” indica id, por lo que al presionar el tercero por ejemplo nos dirijirá a la sección que tenga por id “valor”. Los id los escribiremos en el siguiente paso, cuyos nombre de id, deben coincidir con lo que pusimos aquí en href.
<header>
<h1>Economía y Acción Humana</h1>
<p>
Un documento de ejemplo utilizando etiquetas semánticas de <strong>HTML5 Puro</strong>.
</p>
<nav>
<ul>
<li><a href="#introduccion">Introducción</a></li>
<li><a href="#accion">Acción Humana</a></li>
<li><a href="#valor">Valor</a></li>
<li><a href="#mercado">Mercado</a></li>
<li><a href="#ejemplo">Ejemplo</a></li>
<li><a href="#tabla">Resumen</a></li>
<li><a href="#conclusion">Conclusión</a></li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>● Cuerpo principal
Paso 10 - Sector Principal Main
...
<body>
<header>
<h1>Economía y Acción Humana</h1>
<p>
Un documento de ejemplo utilizando etiquetas semánticas de <strong>HTML5 Puro</strong>.
</p>
<nav>
<ul>
<li><a href="#introduccion">Introducción</a></li>
<li><a href="#accion">Acción Humana</a></li>
<li><a href="#valor">Valor</a></li>
<li><a href="#mercado">Mercado</a></li>
<li><a href="#ejemplo">Ejemplo</a></li>
<li><a href="#tabla">Resumen</a></li>
<li><a href="#conclusion">Conclusión</a></li>
</ul>
</nav>
</header>
<main>
<section id="introduccion"></section>
<section id="accion"></section>
<section id="valor"></section>
<section id="mercado"></section>
<section id="ejemplo"></section>
<section id="tabla"></section>
<section id="conclusion"></section>
</main>
<footer></footer>
</body>
...Las etiquetas contenedoras como header, nav, main, section, article, footer, en general div (contenedor genérico) sirven para que los motores de búsqueda (SEO - search engine optimization) y los lectores de pantalla comprendan la estructura del documento. Tienen display block. Ninguno de estos elementos aporta márgenes, rellenos, fuentes ni bordes propios.
- display: block - Ocupa todo el ancho disponible y comienza en una nueva línea.
- font-size: inherit - Hereda el tamaño del padre. En este caso del body que es 16px.
- font-weight: inherit - Hereda el valor del padre.
- margin: 0 y padding: 0 - No tiene ningún tipo de margen a los costados, arriba o abajo. Tampoco tiene espaciado interno (padding) por defecto.
● La primera section
Paso 11 - Sección 1 - Introducción
A partir de aquí, todo depende de qué información queremos colocar en cada sección. Puede ser pero no es una regla: un título y un artículo. Usando HTML sólo, cada etiqueta se escribiría una abajo de la otra por el display:block que tienen por defecto, salvo que usemos la etiqueta span. En nuestro caso por ahora:
...
<main>
<section id="introduccion">
<h2>¿Qué es la economía?</h2>
<article>
<p>
La economía estudia cómo las personas utilizan los recursos disponibles para alcanzar
los objetivos que consideran importantes. No se limita al dinero, a las empresas o a los gobiernos,
sino que analiza las decisiones que cada individuo toma todos los días.
</p>
<p>
Cada persona posee necesidades, deseos, conocimientos y recursos diferentes.
Debido a que el tiempo y los bienes son <strong>escasos</strong>, siempre es necesario
<u>elegir</u> entre distintas alternativas.
</p>
<div>
<h3>Ideas principales</h3>
<ul>
<li>Los recursos son limitados.</li>
<li>Las personas tienen objetivos distintos.</li>
<li>Toda elección implica renunciar a otra opción.</li>
<li>Las decisiones tienen consecuencias.</li>
</ul>
</div>
</article>
</section>
...
</main>● Resto de las secciones
Paso 12
En cada sección escribimos lo que nos parece importante. Lo hacemos por parte en distintas etiquetas p, solamente para que tenga márgenes y su contenido sea fácil de leer.
<main>
<section id="introduccion">
<h2>¿Qué es la economía?</h2>
<article>
<p>
La economía estudia cómo las personas utilizan los recursos disponibles para alcanzar
los objetivos que consideran importantes. No se limita al dinero, a las empresas o a los gobiernos,
sino que analiza las decisiones que cada individuo toma todos los días.
</p>
<p>
Cada persona posee necesidades, deseos, conocimientos y recursos diferentes.
Debido a que el tiempo y los bienes son <strong>escasos</strong>, siempre es necesario
<u>elegir</u> entre distintas alternativas.
</p>
<div>
<h3>Ideas principales</h3>
<ul>
<li>Los recursos son limitados.</li>
<li>Las personas tienen objetivos distintos.</li>
<li>Toda elección implica renunciar a otra opción.</li>
<li>Las decisiones tienen consecuencias.</li>
</ul>
</div>
</article>
</section>
<section id="accion">
<h2>La acción humana</h2>
<article>
<p>Toda persona actúa movida por la intención deliberada de sustituir un estado de situación menos satisfactorio por otro que considera preferible. Esta conducta intencional y consciente constituye el punto de partida fundamental para comprender los fenómenos económicos.</p>
<p>Si bien los fines individuales son múltiples y subjetivos, la preservación de la vida y la satisfacción de las necesidades fisiológicas básicas —tales como la alimentación y el abrigo frente a lasinclemencias climáticas— representan los requerimientos primarios y universales de la existencia humana.</p>
<p>A lo largo de la historia, el ser humano descubrió que la vida en comunidad potencia su capacidad para asegurar el sustento. Mediante el proceso de división del trabajo, los individuos se especializan en aquellas actividades donde poseen ventajas comparativas o mayor aptitud. Posteriormente, al intercambiar los excedentes de su producción, logran satisfacer el conjunto de sus necesidades de una manera considerablemente más eficiente que a través del autoabastecimiento.</p>
<p>En las economías modernas, este intercambio rara vez se produce de forma directa (trueque). En su lugar, los individuos producen bienes o prestan servicios con el objetivo de obtener un medio de intercambio indirecto: el dinero. Este activo es aceptado de manera generalizada por la comunidad y funciona como un depósito de valor que facilita la adquisición diferida de los bienes necesarios para la subsistencia y el bienestar personal o familiar.</p>
<p>Bajo esta perspectiva, el trabajo representa el esfuerzo orientado a la producción de valor para terceros a cambio de dicho medio de intercambio. Por ejemplo, el proceso de formación académica constituye una inversión en capital humano orientada a ofrecerservicios más complejos en el futuro. Asimismo, el comerciante que distribuye bienes en su comunidad reduce los costos de transacción de sus vecinos, quienes validan dicho servicio entregando una fracción de los ingresos generados por sus propios empleos.</p>
<p>De este modo, la estructura social se configura a través de las decisiones individuales sobre cómo participar en el mercado, ya sea mediante el comercio, la salud, la educación o la construcción; todas ellas actividades cuya viabilidad depende de la existencia de una demanda por parte de otros miembros de la sociedad.</p>
<p><u>Consideración metodológica:</u> La ciencia económica enfoca su análisis en las interacciones humanas de carácter voluntario. Cuando se introducen regulaciones de cumplimiento obligatorio por parte del Estado, los incentivos del mercado sufren alteraciones significativas. Por ejemplo, la imposición centralizada de currículas educativas obligatorias puede desalinear la oferta académica de las demandas y necesidades reales de la comunidad local, generando distorsiones en la asignación de recursos y en la planificación del capital humano a largo plazo. </p>
<aside>
<p>
<strong>Importante:</strong>
La economía analiza las acciones voluntarias de las personas y cómo estas
interactúan entre sí.
</p>
</aside>
</article>
</section>
<section id="valor">
<h2>El valor de los bienes y servicios</h2>
<article>
<p>El valor no se encuentra dentro de los objetos o en el servicio que se presta, sino en la importancia que cada individuo les asigna según sus propias necesidades y circunstancias. </p>
<p>Un vaso de agua puede tener poco valor para quien tiene abundancia,pero puede resultar extremadamente valioso para quien atraviesa el desierto.</p>
<div>
<h3>Factores que influyen en el valor</h3>
<ol>
<li>Las necesidades personales.</li>
<li>La cantidad disponible del bien.</li>
<li>Las preferencias individuales.</li>
<li>El momento y el lugar.</li>
</ol>
</div>
</article>
</section>
<section id="mercado">
<h2>El intercambio y el mercado</h2>
<article>
<p>Cuando dos personas intercambian voluntariamente un bien o un servicio,ambas esperan obtener un beneficio según su propia valoración.</p>
<p>El mercado no es únicamente un lugar físico. También es el conjunto de relaciones donde millones de personas cooperan mediante compras, ventas y contratos.</p>
<blockquote>
<p>Los precios transmiten información sobre la escasez de los bienes y ayudan a coordinar las decisiones de productores y consumidores.</p>
</blockquote>
</article>
</section>
<section id="ejemplo">
<h2>Aplicación en la vida cotidiana</h2>
<article>
<h3>Un estudiante</h3>
<p>Un estudiante dispone de cuatro horas libres. Puede descansar, estudiar, practicar un deporte o trabajar. </p>
<p>Como el tiempo es limitado, deberá decidir qué alternativa considera más conveniente según sus objetivos personales. </p>
<h3>Un comerciante</h3>
<p> Un comerciante observa que aumenta la demanda de un producto. Decide comprar más unidades para satisfacer a sus clientes. Esa decisión surge de interpretar la información disponibley anticipar las necesidades de otras personas.</p>
</article>
</section>
<section id="tabla">
<h2>Resumen de conceptos</h2>
<article>
<table border="1">
<caption>Conceptos básicos de economía</caption>
<thead>
<tr>
<th>Concepto</th>
<th>Descripción</th>
<th>Ejemplo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Escasez</td>
<td>Los recursos son limitados.</td>
<td>Tiempo disponible.</td>
</tr>
<tr>
<td>Elección</td>
<td>Seleccionar una alternativa.</td>
<td>Estudiar o descansar.</td>
</tr>
<tr>
<td>Valor</td>
<td>Importancia que una persona asigna a un bien.</td>
<td>Agua en un desierto.</td>
</tr>
<tr>
<td>Intercambio</td>
<td>Cooperación voluntaria.</td>
<td>Compra y venta.</td>
</tr>
</tbody>
</table>
</article>
</section>
<section id="conclusion">
<h2>Conclusión</h2>
<article>
<p>
Comprender la economía permite interpretar muchas situaciones de la vida diaria.
Cada decisión representa una elección entre distintas alternativas, utilizando
recursos limitados para alcanzar objetivos personales.
</p>
<p>
Desde elegir una carrera hasta administrar un negocio, ahorrar dinero o dedicar
tiempo a aprender una habilidad, las personas constantemente toman decisiones
económicas.
</p>
<p>
La economía, entendida de esta manera, estudia el comportamiento humano,
las decisiones individuales y la cooperación entre personas dentro de la sociedad.
</p>
<img src="economia.jpg" alt="" width="400" height="300">
</article>
</section>
</main>● Sección con tabla
Paso 13 - Sección Tabla
Todas las secciones, contienen un título y un artículo con distintos párrafos. En algún caso hicimos una lista de item. Lo único distinto aquí es la tabla que básicamente con un contenido meramente de ejemplo se escribe así:
<table>
<!-- Cabecera -->
<thead>
<!-- fila de títulos -->
<tr>
<th>Producto</th>
<th>Cantidad</th>
<th>Precio</th>
</tr>
</thead>
<!-- Cuerpo de datos -->
<tbody>
<!-- fila -->
<tr>
<td>Remera Tailwind</td>
<td>2</td>
<td>$15.000</td>
</tr>
<!-- fila -->
<tr>
<td>Gorra CSS Square</td>
<td>1</td>
<td>$8.000</td>
</tr>
</tbody>
<!-- Pie de tabla (Totales) -->
<tfoot>
<tr>
<td>Total</td>
<td>3</td>
<td>$23.000</td>
</tr>
</tfoot>
</table>- El Contenedor Principal <table>…</table>: Es la etiqueta que envuelve a toda la tabla.
Le avisa al navegador que todo lo que esté adentro debe procesarse y alinearse como una grilla de datos. - Los Bloques de Estructura: Al igual que una página web, las tablas modernas se dividen en tres secciones para que los navegadores y lectores de pantalla entiendan la jerarquía de los datos:
- ❖ <thead>…</thead> (Table Head): Define la sección de la cabecera. Adentro se colocan los títulos de las columnas.
- ❖ <tbody>…</tbody> (Table Body): Es el corazón de la tabla. Contiene el grueso de los datos o las filas con la información principal.
- ❖ <tfoot>…</tfoot> (Table Footer): Define el pie de la tabla. Se usa para mostrar totales, resúmenes, conclusiones o promedios de los datos numéricos de la tabla.
- Las Filas y Celdas (El contenido) : Adentro de los bloques estructurales anteriores, la información se organiza usando filas y celdas:
-
❖ <tr>…</tr> (Table Row): Representa una fila completa de la tabla. Todo el contenido de una tabla debe existir obligatoriamente adentro de una fila. Las filas corren de forma horizontal.
-
❖ <th>…</th> (Table Header Cell): Es una celda de encabezado. Se usa casi siempre adentro de <thead>. Por defecto, el navegador hace que su texto se vea en negrita y centrado. Indica el nombre de esa columna o fila.
-
❖ <td>…</td> (Table Data Cell): Es una celda de datos común. Se usa adentro de <tbody> o <tfoot>`. Contiene el valor o texto plano de la cuadrícula y, por defecto, se alinea a la izquierda.
● Etiqueta dialog
Paso 14 - Conclusión
Basicamente es lo mismo, un título y un artículo, sólo que en esta sección agregamos la etiqueta imagen y el cuadro de diálogo o modal que aparece cuando se presiona el botón.
<section id="conclusion">
<h2>Conclusión</h2>
<article>
<p>
Comprender la economía permite interpretar muchas situaciones de la vida diaria.
Cada decisión representa una elección entre distintas alternativas, utilizando
recursos limitados para alcanzar objetivos personales.
</p>
<p>
Desde elegir una carrera hasta administrar un negocio, ahorrar dinero o dedicar
tiempo a aprender una habilidad, las personas constantemente toman decisiones
económicas.
</p>
<p>
La economía, entendida de esta manera, estudia el comportamiento humano,
las decisiones individuales y la cooperación entre personas dentro de la sociedad.
</p>
<img src="economia.jpg" alt="economia" width="400" height="300">
<button commandfor="miModal" command="show-modal">¿Qué representa esta imagen?</button>
<!-- 2. El contenedor del modal -->
<dialog id="miModal">
<h2>Intercambio</h2>
<p>Esta imagen representa el <strong>MERCADO</strong> como <strong>INTERCAMBIO</strong> a través de un bien indirecto que es el <i>dinero</i>. </p>
<!-- 3. Formulario especial nativo para cerrar el modal -->
<form method="dialog">
<button>Cerrar</button>
</form>
</dialog>
</article>
</section>● Etiqueta form
Paso 15 - Formulario en acción
Los formularios requieren una explicación teórica más avanzada. Aquí solo presentamos la manera en cómo se obtienen los datos en un documento web. En ejercicios posteriores mostraremos cómo se procesan.
<section>
<hr>
<h3>Formulario de Autoevaluación rápida</h3>
<form action="#" method="get">
<fieldset>
<legend>¿Se entendió el concepto?</legend>
<label for="entendido">¿Qué factores influyen en el valor de los objetos o servicios?</label><br>
<select id="entendido" name="economista">
<option value="necesidades">Necesidades personales</option>
<option value="escasez">Escasez del bien o servicio</option>
<option value="preferencias">Preferencias individuales</option>
</select>
<br><br>
<label>
<input type="checkbox" name="feedback" value="yes" checked> Me pareció fácil de entender.
</label>
<br><br>
<button type="button" onclick="alert('¡Correcto! Tanto las necesidades personales como la escasez del bien o servicio y las preferencias individuales influyen en el valor.')">Enviar respuesta</button>
</fieldset>
</form>
</section>● Audios y videos
Agregamos estas etiquetas a modo de presentación. Luego realizaremos ejercicios específicos con el tema.
Paso 16 - Multimedia
<section>
<h2>Contenido Multimedia Informativo</h2>
<details>
<summary>Hacé clic acá para ver un resumen en audio y video simulado</summary>
<p>En un entorno real, aquí escucharías un resumen de las teorías:</p>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
<br><br>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
</details>
</section>Paso 17 - Sección Footer
Es el pie de página. Usamos más etiquetas a modo de presentació<
...
<footer>
<hr>
<address>
Documento educativo de HTML5 para fines didácticos.
</address>
<p>
Basado en la visión de la economía desarrollada por
<strong>Ludwig von Mises</strong>, especialmente en su análisis
de la acción humana y la cooperación social.
</p>
<small>
Ejemplo de uso de etiquetas semánticas modernas de HTML5.
</small>
</footer>
...<hr>
Es “Horizontal Rule”
Representa una ruptura temática o un cambio de escena entre párrafos o secciones de una página web.
<address>…</address>
Se utiliza para proporcionar información de contacto del autor o dueño de la página o de un artículo. Por defecto es elemento de bloque y se caracteriza porque tiene como estilo de letra el italic.
<small>…</small>
Se utiliza para representar comentarios secundarios, la “letra chica” de un contrato, descargos de responsabilidad (disclaimers) o advertencias legales.
Tiene display: inline y el tamaño de letra “smaller”. Reduce automáticamente el tamaño del texto a un escalón más chico que el de su elemento padre. Si el texto del padre mide 16px, el texto dentro del <small> medirá aproximadamente 13.28px.