Introducción

En esta semana situaremos los principios básicos de programación que vimos en el tema pasado, en un contexto específico que esperamos te resulte útil. Para ello, hemos seleccionado como caso de estudio el el Lenguaje de Marcado de Hipertexto (HTML), que es el código utilizado para estructurar y desplegar páginas web, por lo que constituye un ejemplo útil para abordar los temas de esta semana que se refieren a modificar funciones sencillas de software y operar instrucciones para un sistema informático.

1. La personalización en programación

En la programación es posible personalizar (modificar) algunos datos o pasos para cambiar su ejecución y, por ende, el o los resultados, pero es importante identificar qué y cómo personalizar (modificar) para alcanzar los objetivos deseados de una manera simple y automatizada.

La modificación de un programa está en función del objetivo, es decir, qué se desea alcanzar, para ello mencionaremos el siguiente escenario:

En función de la respuesta y de las propias características del paciente, la nutrióloga personalizará su programa alimenticio considerando algunas variables como: edad, peso, género, estado de salud, vida cotidiana, actividad o sedentarismo, entre otras. El objetivo y las variables dan pauta para determinar qué se necesita modificar.

Al igual que en el ejemplo, en la programación informática la personalización también requiere identificar: las variables, los operadores, las funciones, las estructuras de control y los módulos, a fin de conocer las acciones dentro de una situación o procedimiento (algoritmo) y cambiarlas para obtener los resultados deseados.

Para la programación y personalización se utilizan softwares especializados, de paga y gratuitos, para escribir las instrucciones que integran un programa; la elección del software a utilizar dependerá de cada persona usuaria.

Antes de iniciar con los cambios en la programación informática, es necesario identificar el problema, situación u objetivo, así como los datos de variables, constantes y operaciones a realizar.

Objetivo

Se identifica qué realiza el programa o segmento de programa.

Datos (variables y constantes)

Se identifican los datos utilizados y su naturaleza: si cambian en cada ocasión son variables o si no cambian son valores constantes.

Operaciones

Se analizan los pasos que realiza el programa y cómo se utilizan los datos (variables y constantes) y se determina qué es lo que se requiere personalizar o cambiar.

2. Personalización y lenguaje¹

El Lenguaje de Marcado de Hipertexto (HTML) es el código utilizado para estructurar y desplegar páginas web. Algunos de sus contenidos pueden ser títulos, subtítulos, párrafos, listas numeradas, viñetas, tablas, imágenes, entre otros.

HTML es un lenguaje de marcado que define la estructura de una página web, el cual consiste en una serie de elementos (etiquetas) que se utilizan para agrupar partes de un contenido determinado para que se muestren o comporten de una manera determinada.

Las etiquetas pueden mostrar una palabra, una imagen o un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la tipografía, etc. A continuación, del lado izquierdo se muestra cómo se estructura el código para que un navegador despliegue lo que se muestra del lado derecho.

---

3. Partes de una etiqueta en HTML

Examina el siguiente segmento de código para que puedas ver con más detalle la composición de una etiqueta en HTML:

    
      <p>
         <strong>
            La Dirección de Formación Multimodal, e-UAEM,
         </strong>
         es el nombre con el que se conoce al Programa de formación Multimodal…
      </p>
    

El código anterior incluye algunas etiquetas que son comunes en páginas o sitios web. Una buena práctica en la programación es utilizar sangrías para identificar dónde inicia y termina cada etiqueta.

Esta ejemplo podemos notar los siguientes componentes:

4. Herramienta para ejercitar etiquetas en HTML

Para analizar algunos ejemplos de etiquetas en HTML es necesario que conozcas una herramienta que te facilitará la visualización y la ejercitación del código HTML en la web, esta herramienta es CodePen.

CodePen es un servicio en la nube que permite programar y, al mismo tiempo, funciona como una red social. Permite compartir tus proyectos, seguir a las personas usuarias de este servicio, dar like en los códigos que te agraden y dejar comentarios. CodePen está diseñado para quienes desean aprender a programar, pero también para personas más experimentadas que desean compartir sus conocimientos y su código con el resto del mundo.

Como es un servicio en la nube, no es necesario descargar ningún programa; basta con acceder a su sitio web, https://codepen.io/, desde cualquier dispositivo conectado a internet

Te recomendamos el siguiente video tutorial, con subtítulos en español, que explica cómo crear una cuenta y los primeros pasos:

Este tutorial también te resultará útil para iniciarte con CodePen:

5. Etiquetas básicas en HTML²

HTML cuenta con muchas etiquetas para la creación de documentos, las más usadas en el desarrollo de páginas o sitios web son:

html

La etiqueta <htm> (o elemento HTML raíz) representa el inicio y final de un documento HTML. El resto de elementos se encuentran dentro de este elemento.

Dado que el elemento <html> es el primero en un documento, aparte de los comentarios, se llama el elemento raíz. En el siguiente ejemplo se establece el idioma español mexicano con la expresión lang=”es-mx”.

head

Esta etiqueta denomina el encabezado, el cual contiene información que describe el documento web. Como ya habrás notado, cada etiqueta tiene una notación para iniciar y otra para cerrar (la de cierre es igual a la de inicio, sólo que con una diagonal al principio). Siempre se coloca en la parte superior del documento HTML; en ella se indican los metadatos³, título del documento, hojas de estilos⁴, JavaScript⁵, entre otros datos.

En el siguiente ejemplo, se agrega la etiqueta meta y en ella se especifica la codificación del texto en formato UTF-8, el cual reconoce los caracteres ñ - Ñ y acentos en las vocales presentes en el idioma español.

title

Esta etiqueta se refiere al título y es donde inicia el cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica dónde empieza el contenido visible del documento. Como podrás ver en este ejemplo, el título forma parte del bloque del encabezado y por ello la etiqueta de cierre de “head” va después del título.

body

Esta etiqueta se refiere al cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica dónde empieza el cuerpo del mismo, contenido que es visible para quien lo navega.

div

Esta etiqueta indica que hay una división y también se entiende como contenedor de bloque para otros elementos, por lo que nos ayuda a estructurar el documento en secciones agrupando otras etiquetas.

a

Es una etiqueta para crear un enlace o vínculo a una página web. El atributo principal de esta etiqueta HTML es href que antecede al enlace o vínculo al que queremos dirigir. Otro atributo muy usado en combinación con esta etiqueta es target, el valor “_blank” indica que el enlace se abrirá en una nueva ventana.

strong

Esta etiqueta significa “fuerte”, es decir, se refiere a que la tipografía se visualiza de forma más intensa, característica mejor conocida como “negritas”. Por lo tanto, si requieres resaltar una palabra o frase dentro de un párrafo, se utiliza la etiqueta strong, con la cual indicamos qué texto debe desplegarse en negritas. En el siguiente ejemplo, la palabra que aparecerá en negritas será “aquí”.

br

Esta etiqueta es la forma abreviada de la palabra “break”, que se refiere a un corte o salto de línea, acción para la cual habitualmente usamos la tecla “enter”. Sirve para crear una separación entre textos. Como podrás apreciar, a diferencia de otras etiquetas que hemos visto, no tiene apertura ni cierre y, si lo usamos dos veces, indica un mayor espaciamiento.

h1 ... h6

En estas etiquetas la “h” se refiere a “header” o “heading”, es decir, título; sin embargo, no se es lo mismo que la etiqueta previa que vimos de “title”, pues estos diferentes numerales de “h” nos sirven para establecer jerarquías entre títulos y subtítulos al interior del documento. Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas nos permiten indicar la importancia relativa del título dentro de la estructura del texto, y así jerarquizar el contenido.

img

Usamos la etiqueta IMG para mostrar imágenes dentro del contenido. Cuando la imagen se encuentra en una ubicación web, necesitamos el atributo src (forma corta de “source”, que significa “fuente”) para indicar su fuente o desde dónde se llamará.

Ejemplo de una imagen que no se despliega por un error de nombre.

ol li y ul li

Las etiquetas ol y li o ul y li nos sirven para crear listas. ol se usa para listas ordenadas y ul para listas sin orden. Dentro de las listas, los elementos se identifican con la etiqueta li.

p

Esta etiqueta significa “párrafo” y sirve para agrupar texto en la forma de un párrafo. Los párrafos ayudan a estructurar un texto, facilitando su lectura.

span

Con esta etiqueta, que también funciona como contenedor, podemos personalizar el estilo de una parte del texto.

table

La etiqueta <table> se utiliza para crear tablas en un documento HTML. Las tablas en HTML incluyen filas y celdas para organizar y presentar la información de manera estructurada.

La estructura básica de una tabla en HTML consta de una etiqueta <table> que engloba a otras etiquetas como <thead>, <tbody>, <tfoot>, <tr>, <th> y <td>. A continuación se explica cada una de ellas:

• La etiqueta <thead> se usa para crear un encabezado de tabla que se mostrará al principio de la misma y se utiliza para describir las columnas.
• La etiqueta <tbody> se utiliza para crear el cuerpo de la tabla, donde se incluyen las filas y celdas con los datos.
• La etiqueta <tfoot> se utiliza para crear un pie de tabla que se mostrará al final de la tabla y se utiliza para mostrar información resumen.
• La etiqueta <tr> se utiliza para crear una fila en la tabla.
• La etiqueta <th> se utiliza para crear una celda de encabezado en una fila.
• La etiqueta <td> se utiliza para crear una celda de datos en una fila.

Además de estas etiquetas, también se pueden utilizar atributos para personalizar la apariencia y el comportamiento de la tabla, como el ancho, el borde, la alineación, etc.

iframe

Esta etiqueta es la forma abreviada de inline frame, que se refiere a un contexto de navegación anidado. Es una de las etiquetas con mayor uso para el diseño de páginas web y permite la inserción de documentos HTML desde fuentes externas (YouTube, Genially, Vimeo, TikTok).

Si bien es un recurso muy útil, es importante no abusar en el uso de esta etiqueta, pues cada iframe representa un gasto de memoria y de procesamiento. Por lo tanto, un uso excesivo de iframes podría causar un rendimiento bajo de la página web.

Si deseas saber más de etiquetas, atributos y cómo integrarlos en HTML, te recomendamos el sitio htmldesdecero.es

---

6. Algunas buenas prácticas en el código de HTML

Antes de iniciar con la codificación de HTML es importante mencionar algunas buenas prácticas en proyectos de creación de páginas web.

Toda página web está formada por archivos que se encuentran organizados en carpetas; estos archivos pueden ser de código o imágenes. Las buenas prácticas inician con la forma en que se nombran y estructuran estos archivos y carpetas.

Nombre del archivo o carpetas

• Evita utilizar palabras con acentos o caracteres especiales, tales como *,ñ,/…
• Evita el uso de los espacios, reemplaza los espacios con guion medio o guion bajo.
• Usa, siempre que sea posible, sólo minúsculas en los nombres.
• Evita nombres largos.

Estructura básica de un sitio web

La creación de un sitio web inicia con la organización, para lo cual se recomienda empezar con una carpeta raíz, la cual será el contenedor de las carpetas, subcarpetas y archivos del proyecto.

Consulta el siguiente video que explica con mayor detalle la estructura básica de una página web:

7. Personalización de un proyecto

Después de familiarizarte con la interfaz de CodePen y revisar las opciones que ofrece, veremos cómo reutilizar un código de un proyecto previo.

Para estos ejercicios, deberás tener una cuenta en CodePen, https://codepen.io/ e iniciar sesión. Para reutilizar el formato, tendrás que validar tu cuenta a través de un correo electrónico de verificación.

Si consideras necesario repasar qué y cómo integrar etiquetas en una página HTML, consulta los siguientes ejemplos: https://codepen.io/collection/jbxQjx

Reutiliza una plantilla

Antes de empezar, revisa el siguiente tutorial:

Pasos para copiar una plantilla en CodePen.oi

8. Otros programas para crear código HTML⁶

Para crear código HTML puedes utilizar servicios en la nube o programas instalados en tu equipo de cómputo; todo depende del proyecto desees realizar. Te recomendamos algunos editores de programación que se instalan en tu computadora, de paga y gratuitos, por si te interesan otras alternativas además de CodePen.

---

Referencias de contenido

Campos, T. (8 de septiembre de 2021). 01: Maquetación Web con Dreamweaver – Diseño de Sección de Puntos de Valor [Video]. Recuperado de https://youtu.be/a9ooxK-toMg

colearnable. (01 de enero de 2021). Getting Started with CodePen: A Beginner’s Guide to CodePen [Video]. Recuperado de https://youtu.be/eg_Y333qcio

Coppola, M. (21 de enero de 2023). Los 14 mejores editores web para HTML. HubSopt. Recuperado de https://blog.hubspot.es/website/mejores-editores-html

Ecdisis Estudio. (9 de enero de 2021). ¿Qué es Wix y para qué sirve? Ecdisis Estudio. Recuperado de https://ecdisis.com/que-es-wix-y-para-que-sirve/

FalconMasters. (22 de marzo de 2018). Tutorial Visual Studio Code, el Nuevo Rey de los Editores de Código [1/5] [Video]. Recuperado de https://youtu.be/Ijz1mXQm7KU

Fatz. (30 de abril de 2018). Atom, Editor de Código Open Source [Video]. Recuperado de https://youtu.be/naEQ5xkl5_c

ob.pe. (s.f.). Qué son los metadatos. Recuperado de https://www.geoidep.gob.pe/metadatos/que-son-los-metadatos

Google Workspace. (s.f.). Empezar a utilizar Google Sites ¿Qué puedes hacer con Sites? Centro de Aprendizaje Google Workspace. Recuperado de https://support.google.com/a/users/answer/9314941?hl=es

González, M. (25 de noviembre de 2021). Tutorial de CodePen para el desarrollo de Páginas Web. [Video]. Recuperado de https://youtu.be/ki0aey4Cedc

idevik, X. (20 de julio de 2021). ¿Qué es una etiqueta HTML y cuáles son las más importantes? ieBS Digital School. Recuperado de https://www.iebschool.com/blog/que-es-etiqueta-html-analitica-usabilidad/

Luján, S. (19 de abril de 2022). Primeros pasos con Notepad++ [Video]. Recuperado de https://youtu.be/QAUYZSG6koU

mdn. (s.f.). Introducción a HTML. Recuperado de https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML

oregoom. (s.f.). Etiqueta pre en HTML. Oregoom.com. Blog especializado en HTML. Recuperado de https://oregoom.com/html/pre/

pachoncop. (17 de abril de 2021). Crear páginas web con blueGriffon [Video]. Recuperado de https://youtu.be/OnB2pVc1Drk

Perálvarez, D. (02 de noviembre de 2015). Carpetas y archivos de una Página Web [Video]. Recuperado de https://youtu.be/W-2wzX6zykg

Realmac Software. (30 de marzo de 2020). Creación de un sitio web rápido con RapidWeaver, Stacks y Foundry — Parte 1 [Video]. Recuperado de https://youtu.be/QWk69_PT4Rw

Silicode Valley. (s.f.). Carpetas y archivos de una Página Web. Silicode Valley. Recuperado de https://silicodevalley.com/carpetas-archivos-pagina-web/

Tutoriales Diarios. (26 de enero de 2023). Cómo Usar Google Sites Para Crear un Sitio Web (2023) [Video].Recuperado de https://youtu.be/G4OktGBbEl8

Walton, A. (diciembre de 2021). Etiqueta IMAGEN (img). HTML desde cero. Recuperado de https://htmldesdecero.es/etiquetas/img/

wix blog. (Enero de 2022). ¿Cómo crear una página web? Guía paso a paso. Wix Blog. Recuperado de https://es.wix.com/blog/2019/04/guia-para-crear-paginas-web/