Lenguaje de Programación HTML

Serrano G. Yael E.
Asignación 1
4-812-1900
Universidad Latina de Panamá
yeserran@ch.ulatina.edu.pa
Resumen
El artículo inicia con una descripción del lenguaje HTM L. Trata de abarcar
brevemente los rudimentos de la programación, describiendo sus principales
características y etiquetas. Concluye afirmando que el HTML, a pesar de ser un
lenguaje sencillo, ha cambiado por completo la forma de ver Internet.
Palabras claves
HTML (Lenguaje de Marcado de Hipertexto), CSS (Hojas de Estilo en
Cascadas), World Wide Web Consortium (W3C), Etiquetas, Etiquetas
huérfanas, Etiquetas de dos en dos, Atributos, XML (Lenguaje Extensible de
Etiquetado).
Abstracts
The article begins with a description of the HTM L language. It tries to briefly cover
the rudiments of programming, describing its main characteristics and labels. He
concludes by stating that HTM L, despite being a simple language, has completely
changed the way we see the Internet.
Keywords
HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), World
Wide Web Consortium (W3C), Tags, Orphan Tags, Two-by-Two Tags,
Attributes, XML (Extensible Markup Language).
Introducción
El lenguaje HTML es un lenguaje de programación el cual estructura páginas Web,
hay que acordarnos que este lenguaje ya no estructura completamente una página
o sitio Web ya que es muy utilizado java script y otro lenguaje que son ya muchos
más avanzados como son XML o XML, el lenguaje HTML significa hypertext
markup lenguaje, que traducido al español seria lenguaje de marcado de
hipertexto. Este lenguaje siempre va estar escrito en bloc de notas o notepad++,
aunque también hay un programa para diseño HTML. (Deisy Carina Sánchez
Rodríguez, Nicole Daniela Cano Castañeda, 2014)
Marco Teórico

¿Qué es HTML?

Es el lenguaje que per mite escribir documentos con texto plano a los
cuales se le agregan palabras e imágenes sensibles, se constru yen
ta blas, se liga n con otros documentos, se cambia su apariencia, etc., todo
ello para lograr interacción con los usuarios. Estos son desplegados como
páginas por medio del visualizador o b rowser. Par a lograrlo, se utilizan
elementos de descripción (descriptores) con los cuales se indica al
visualizador como distribuir la información en la página.
Objetivo
Lo primero que se debe hacer es fijar que objetivos alcanzar a través de la
pagina web que se va a crear. Al tratarse de la primera pagina web, estos
objetivos no deberían ser muy pretenciosos o ambiciosos es mejor comenzar
poco a poco, por ejemplo, se puede comenzar por crear una pagina que
proporcione información en lugar de pretender crear un portal que contenga
herramientas de búsqueda, aplicaciones multimedia, etc.
Tener claro los objetivos ayudara a definir contenidos claros, ordenados en
una secuencia lógica y necesarios para la página, eliminando la confusión y la
presencia de contenidos innecesarios que en ocasiones se puede observar en
algunas páginas.
Un aspecto que hay que tener en cuenta a la hora de definir los objetivos es
que, aunque HTML es un lenguaje básico y de imprescindible conocimiento
para ser diseñador de páginas web, desafortunadamente sus herramientas
son limitadas y no ofrecen las prestaciones que poseen otros lenguajes para
proveer información de la forma mas efectiva y para dotar de interactividad a la
página. (S.L)
Primeros pasos
Lo primero que hay que saber antes de comenzar a programar en HTML es lo
siguiente:
• Para escribir el código solo es necesario un editor de texto básico como
el Bloc de Notas de Windows, Gedit de Linux o WordPad.
• Para poder ver el resultado es necesario tener instalado un navegador
web como Internet Explorer, Safari o Mozilla.
Importante
El código escrito en el editor de texto se guardará en formato *.html, lo cual
dará como resultado un archivo que ya puede ser abierto con el navegador.
(S.L)
Características
Por ejemplo, en la cabecera se puede encontrar:
❖ Información contextual de la página: Estos metadatos nos permiten
indicar información que puede no quedar clara en el contenido. Por
ejemplo, indicar el idioma permite a un navegador de voz (para inviden-
tes) cambiar la pronunciación para leer correctamente el contenido.

❖ Referencia a otros ficheros: Todos aquellos recursos que necesite

nuestra página deben estar referen-ciados desde la cabecera. Por
ejemplo, archivos de CSS y JavaScript, el icono de la barra de
direcciones, etc.

❖ Scripts y estilos: Si estos no se definen en un fichero independiente,

se incluyen en la sección de cabece-ra para que estén disponibles en
todo el documento y no tener que repetirlos. (Ruiz, 2014)
Etiquetas y sus atributos

Etiquetas
Las páginas HTML se llenan con lo que se denominan etiquetas. Estos son
invisibles en la pantalla para los visitantes, pero permiten que el equipo entienda lo
que se desea mostrar. Las etiquetas son fáciles de detectar. Están rodeadas de
"galones", es decir, los símbolos < y >, de esta manera:
<etiqueta>
Hay dos tipos de etiquetas: las etiquetas huérfanas y las etiquetas de dos en dos:
• Etiquetas de dos en dos
Se abren, contienen texto, y se cierran. Lo que aparece como:

<title> Este es un título </ title>

Distinguimos una etiqueta de apertura (<title>) y una etiqueta de cierre (</

title>) que indica que el título termina. Todo lo que no se encuentra entre
estas dos etiquetas no es un título.
 • Etiquetas huérfanas

Estas son las etiquetas que más se utilizan para insertar un elemento en un
lugar específico (por ejemplo, una imagen). No es necesario delimitar el
principio y el fin de la imagen, sólo significa que el equipo "Inserte una
imagen aquí." ( Rafael Menéndez-Barzanallana Asensio)

Una etiqueta huérfana se escribe así:

<image/>
Atributos
Los atributos son unas etiquetas referentes a opciones. Se complementan para
proporcionar información adicional. El atributo se coloca después del nombre de la
etiqueta y tiene el mayor valor, así:

<etiqueta atributo=“valor">

¿De qué sirve? Toma la etiqueta que acabamos de ver. Sólo que no se utiliza
mucho. Se podría agregar un atributo que especifique el nombre de la imagen a
mostrar:

<image nom=“foto.jpg” />

El ordenador entonces entiende que debe mostrar la imagen contenida en el

archivo foto.jpg.
En el caso del funcionamiento de etiquetas "pares", se ponen los atributos en la
etiqueta de apertura y no en la etiqueta de cerrado. Por ejemplo, este código
indica que la cita es de Neil Armstrong y del 21 de julio de 1969:
<quote autor=“Neil Armstrong” date=“21/07/1969”>Este es un pequeño
paso para el hombre, un salto gigante para la humanidad. </ <quote>. (
Rafael Menéndez-Barzanallana Asensio)
Versiones del HTML
• En 1991 nació la publicación del primer documento formal con la
descripción de HTML y se nombró "HTML Tags" (Etiquetas HTML).
• Pero la propuesta oficial para convertir HTML en un estándar llegaría más
tarde, concretamente en 1993 por parte del organismo IETF (Internet
Engineering Task Force). A Jorge Romero Alamán 5 M-flashcarding como
recurso de aprendizaje del HTML pesar de conseguir avances significativos
 ninguna de las dos propuestas, llamadas HTML y HTML+ consiguieron
convertirse en el estándar oficial.
• El IETF en 1995 organiza un grupo de trabajo para tratar de optimizar el
desarrollo del HTML y logra publicar, el 22 de septiembre de ese mismo
año, el estándar HTML 2.0 que pasará a ser el primer estándar oficial de
HTML.
• A partir de 1996, el organismo de estandarización World Wide Web
Consortium (W3C) publicará todos los estándares de HTML. El 14 de Enero
de 1997 se publicó la versión HTML 3.2 como primera recomendación de
HTML publicada por el W3C, incorporando los últimos avances de las
páginas web desarrolladas hasta 1996.
• El 24 de abril de 1998 se publicó HTML 4.0 que supuso un gran avance
tecnológico respecto a las versiones anteriores.
• El 24 de diciembre de 1999 se publicó HTML 4.01 como la última
especificación oficial de HTML. Esta versión no incluía novedades
significativas al tratarse de una revisión y actualización de HTML 4.0.
Después de esta última publicación la actividad de estandarización de
HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML.
• En el año 2004, las empresas Mozilla, Apple y Opera se organizaron en una
nueva asociación llamada WHATWG (Web Hypertext Application
Technology Working Group) al ver la falta de interés del W3C en HTML.
• Hoy en día el WHATWG se centra en el futuro estándar HTML5, cuyo
primer borrador oficial se publicó el 22 de enero de 2008. Debido al
potencial de las empresas que forman este grupo y a la publicación de los
borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la
actividad estandarizadora de HTML. (Eguíluz, 2008). (Alaman, 2016-2017)
Diferencias entre HTML y CSS
La gran diferencia entre el lenguaje de programación HTML y CSS son
sus funciones. De hecho, ambos lenguajes no compiten entre ellos, pero sí se
complementan. Por un lado, el HTML nos permite armar la estructura de la web a
través del etiquetado de hipertextos. Mientras que el lenguaje CSS nos permite
asignar estilos y alterar las propiedades de nuestros elementos HTML.
Ventajas y Desventajas del Lenguaje HTML
HTML ha tenido una serie de mejoras y actualizaciones desde que fue creado,
llegando a la última versión de HTML5. Ningún lenguaje es perfecto, y si
profundizas en el desarrollo web, te podrás percatar de esto dependiendo del
escenario en el que lo apliques.
En el caso del lenguaje HTML, estas son las ventajas y desventajas:
Ventajas:
 • Fácil de usar.
• Sintaxis suelta (aunque ser demasiado flexible no cumplirá con los
estándares).
• Bastante fácil de escribir.
• Permite el uso de plantillas, lo que facilita el diseño de una página web.
• Fácil de aprender y codificar incluso para programadores novatos.
• Compatible con casi todos los navegadores, si no con todos los
navegadores.
• Ampliamente utilizado; establecido en casi todos los sitios web, si no en
todos los sitios web.
• Muy similar a la sintaxis XML, que se utiliza cada vez más para el
almacenamiento de datos.
• Gratis: no necesitas comprar ningún software.

Desventajas:
• No puede producir una salida dinámica por sí solo.
• A veces, la estructuración de documentos HTML es difícil de comprender.
• Los errores pueden resultar costosos.
• El tiempo que lleva para crear algunos elementos como: listas y tablas.
• Debe mantenerse al día con las etiquetas obsoletas y asegurarse de no
utilizarlas. Las etiquetas obsoletas aparecen porque otro lenguaje que
funciona con HTML ha reemplazado el trabajo original de la etiqueta; por lo
tanto, es necesario aprender el otro idioma (la mayoría de las veces, es
CSS)
• Las funciones de seguridad que ofrece HTML son limitadas. (Pinedo, 2021)
CSS
CSS no son más que hojas de estilo en cascada. Este lenguaje de programación
determina cómo deben aparecer los elementos HTML de un sitio web en la parte
frontal de la página. (Rodriguez, 2019)
Patrones y CSS
Muchas veces el término patrón va unido al de lenguaje de programación, un
término que aplicarlo a CSS es quizás demasiado, sin embargo, que no sea un
lenguaje de programación, no significa que sea sencillo y carezca de dificultad.
Por ello, a lo largo de los años y principalmente en los más recientes, con el
crecimiento del desarrollo front-end, han surgido una serie de patrones de diseño
que se repiten por doquier:
• Menús hamburguesa
• Sistemas de pestañas
• Avatares
 • Tarjetas (Duran, 2020)
Nota interesante
El HTML no distingue entre mayúsculas y minúsculas, por lo que <B> sería
equivalente a <b>. Lo común es que los desarrolladores escriban las etiquetas en
minúscula. (Alvarez, 2001)

Análisis
HTML es un lenguaje donde se define cada pagina web. Se trata de un conjunto
de etiquetas que sirve para definir textos y otros elementos. Al principio el HTML
fue creado con el objetivo divulgativos de información con texto e imágenes.
Existen muchas versiones de HTML hasta el HTML5. En fin, el HTML se creo sin
dar respuestas a todos los posibles usos que se le podía dar en un futuro. Es
lenguaje muy fácil de aprender por lo que permite que cualquier persona, aunque
no haya programado nunca en su vida pueda enfrentarse a la creación de una
pagina web. Por lo que se pude decir que HTML sirve para crear paginas web y
darles estructura y contenido. Es un programa que dispone de etiquetas para
poner imágenes, listas, tablas e hipervínculos, etc. Aplicación en el entorno actual
que una pagina web seria de ayuda para crecer un emprendimiento por los
tiempos que estamos viviendo de pandemia sería una manera más fácil de llegar a
los consumidores.
Conclusiones
En conclusión, el lenguaje de programación HTML es muy fácil de aprender,
aunque según lo buscado HTML no es un lenguaje en sí, sino que es un lenguaje
de marcación para la creación de documentos hipertextos. Este lenguaje se
escribe en un documento de texto, por lo que se necesita un editor de textos para
escribir una pagina web. El archivo donde esta el contenido del código HTML es
un archivo de texto con una peculiaridad que tiene una extensión .html o .htm. algo
interesante de este lenguaje es que el HTML no distingue entre mayúsculas y
minúsculas. La importancia en el área de tecnología que podras crear tu propia
pagina web, es la entrada a un nuevo mundo, al aprender el lenguaje podremos
usarlo con total libertad.

Referencias
Rafael Menéndez-Barzanallana Asensio. (s.f.). Lenguajes de programación HTML y CSS. Desarrollo
Aplicaciones Web, 15.

Alaman, J. R. (2016-2017). M-flashcarding como recurso de aprendizaje del HTML. UNIVERSITAT

JAUME I, 5,6.

Alvarez, M. A. (01 de 01 de 2001). Desarrollo web. Obtenido de Desarrollo web:

https://desarrolloweb.com/articulos/que-es-html.html
Deisy Carina Sánchez Rodríguez, Nicole Daniela Cano Castañeda. (2014). Introducción A La
Programación. IE San Josemaria Escrivá De Balaguer, 4.

Duran, J. (23 de 04 de 2020). Lenguaje de programacion . Obtenido de Lenguaje de programacion :

https://lenguajedeprogramacion.com/css/

Pinedo, A. (15 de 2 de 2021). Crehana. Obtenido de Crehana:

https://www.crehana.com/blog/web/sabes-que-es-css-y-como-se-relaciona-con-html/

Rodriguez, A. (02 de 08 de 2019). &COINBOUND. Obtenido de &COINBOUND:

https://www.ycoinbound.com/blog/lenguajes-de-programaci%C3%B3n-html-css-y-
javascript

Ruiz, A. (17 de septiembre de 2014). Everriculum Blog Master en Comunicaciones y Marketing

Digital de la UAB . Obtenido de Everriculum Blog Master en Comunicaciones y Marketing
Digital de la UAB :
https://www.mastermarketingdigital.com/everriculum/2014/09/17/cuales-son-las-
caracteristicas-principales-del-
html/#:~:text=Este%20lenguaje%20nos%20ofrece%20una,de%20manera%20l%C3%B3gica
%20y%20estructurada.

S.L, P. V. (s.f.). Diseño de paginas Web en HTML. Malaga : Editorial Vertice .