Lenguaje de programación HTML

César Beltran – E-8-161077

Universidad Latina de Panamá
correo. [email protected]

Resumen
Partiendo del poco conocimiento y comprensión que tengo de esta asignatura, veo la necesidad
de explorar los conceptos más básicos para iniciar el camino para un diseño y posterior desarrollo
de mi primera aplicación web.

Palabras Clave
HTML, etiqueta, elementos, estilos, css, javascripts

Abstract
Based on the little knowledge and understanding that I have of this subject, I see the need to
explore the most basic concepts to start the path for a design and subsequent development of
my first web application.
HTML

Keywords
HTML, tag, elements, styles, css, javascripts

Introducción
Esta investigación tiene como objetivo documentar información básica, que permita tanto al lector
como a mí, aprender acerca del lenguaje de programación HTML, respondiendo preguntas
elementales que nos preparen para una comprensión más profunda de este lenguaje.

1. Que es el HTML
Es un lenguaje de marcado, que desde hace varios años se considera el estándar
para la creación de sitios web, sobre todo a la hora de crear interfaces visuales. Sus
siglas, por su nombre Hyper Text Markup Language, hacen referencia al tipo de
lenguaje ante el cual te encuentras frente a un pagina web, es un estándar que utiliza
etiquetas de apertura y cierre, orientada a mostrar información y a mostrarla.
Es importante aclarar que el objetivo de un documento HTML es almacenar
información pura y extender el modo en el cual se muestra a otros estándares, como
CSS. Las etiquetas se encargan de almacenar información en cierto formato, y el
estilo es manipulado por las hojas de estilo.
(Aguirre, 2020)
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje
HTML. Esta nueva versión (aún en desarrollo), y en conjunto con CSS3, define los
nuevos estándares de desarrollo web, rediseñando el código para resolver problemas
y actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas etiquetas
o atributos, sino que incorpora muchas características nuevas y proporciona una
plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).
(Garro, 2014)
EL LENGUAJE html es uno de los puntales de la Web. Desde hace más de dos
décadas ejerce una función primordial en el proceso de distribuir información a través
de internet.
En todo ese tiempo ha experimentado algunos cambios en respuesta a las
necesidades de los productores de contenido y de los usuarios,
y ahora se encuentra a punto para el cambio siguiente: el World Wide Web
Consortium (W3C) está esbozando html5.
Esta nueva versión del lenguaje básico de la Web proporciona mecanismos para
simplificar el trabajo y facilitar la inclusión de elementos multimedia. El principal criterio
de diseño de html5 ha sido el de resolver problemas prácticos, y con este objetivo
adopta soluciones dirigidas a facilitar el trabajo en situaciones reales
(Franganillo, 2010)

2. Ultima versión
HTML incorpora tres características, estructura, estilo, y funcionalidad, integrando tes
lenguajes de programación independientes, HTML, CSS, y JavaScript. Estos
lenguajes están compuestos por grupos de instrucciones que los navegadores
pueden interpretar para procesar y mostrar los documentos al usuario. Para crear
nuestros documentos, tenemos que aprender todas las instrucciones incluidas en
estos lenguajes y cómo organizarlas.
(Gauchat, 2017)
HTML 4 es el formato de marcado más exitoso de la historia. HTML5 se basa en ese
éxito. No es necesario volver a aprender cosas que ya se conocen. Si la aplicación
web que funcionaba ayer en HTML 4, hoy funcionará en HTML5.
Una de las novedades principales de html5 es la inclusión del document object model
(DOM) como fundamento del lenguaje. DOM describe la estructura de un documento
de acuerdo con el paradigma de la orientación a objetos. En otras palabras, define el
conjunto de entidades que están presentes en un documento html y las acciones que
pueden realizarse sobre ellas. Hasta ahora el DOM siempre se había tratado de forma
separada; cada navegador lo implantaba según la particular interpretación que su
fabricante hacía de él. En cambio, en html5 el DOM forma parte del estándar. Así se
garantiza que los navegadores interpretarán adecuadamente la sintaxis de html y que
al mismo tiempo implantarán las funciones del DOM que la sustentan.
(Garro, 2014)

3. Cómo funciona
Es un lenguaje compuesto por un grupo de etiqueta definidas con un nombre rodeado
de paréntesis angulares.
Los paréntesis angulares delimitan la etiqueta y el nombre define el tipo de contenido
que representa. Por ejemplo, la etiqueta <HTML> indica que el contenido es HTML,
algunas de las etiquetas son declaradas individualmente (por ejemplo <br>) y otras
son declaras en pares, con una etiqueta de apertura y otra de cierre, como
<html></html> (en la etiqueta de cierre, el nombre es precedido por una barra
invertida). Las etiquetas individuales y las de apertura pueden incluir atributos para
ofrecer información adicional acerca de sus contenidos (por ejemplo, <html Lang=
esp>). Etiquetas individuales y la combinación de etiquetas de apertura y cierre son
llamados elementos. Los elementos compuestos por una sola etiqueta son usados
para modificar el contenido de la rodea o incluir recursos externos, mientras que los
elementos que incluyen etiquetas de apertura y cierre son utilizado para delimitar el
contenido del documento.
(Gauchat, 2017)

Ilustración 1: Elemento HTML

(Universidad de Alicante - Sergio Lijan Mora, 2012)

En general, todo elemento puede ser anidado, convertirse en un contenedor, o ser
contenido por otros elementos. Exclusivamente estructurales como <html>, <head> y
<body> tienen un lugar especifico en un documento HTML, pero el resto son flexibles.
Los atributos se declaran siempre dentro de la etiqueta de apertura (o etiquetas
individuales) y pueden tener una estructura que incluye un nombre y un valor, como
el atributo Lang de la etiqueta <html> o representar un valor por sí mismos, como el
atributo html de la etiqueta <!DOCTYPE>.
(Gauchat, 2017)
Se puede pensar en HTML sólo como nuevas etiquetas y geolocalización. Pero esta
no es más que una pequeña parte del estándar que define HTML5. La especificación
de HTML5 define también cómo esas etiquetas interactúan con JavaScript, a través
del Modelo de Objetos de Documento (DOM). HTML5 no es únicamente definir una
etiqueta como <video>, también existe su correspondiente API para objetos de vídeo
en el DOM. Se puede utilizar esta API para detectar el soporte para diferentes
formatos de vídeo, reproducir el vídeo, hacer una pausa, silenciar el audio, realizar
un seguimiento de la cantidad de vídeo que se ha descargado, y todo lo que necesita
para crear una completa experiencia de usuario alrededor de la etiqueta en sí.
(Garro, 2014)

4. Que es el CSS
CSS (Cascading Style Sheets) es el lenguaje utilizado para definir los estilos de los
elementos HTML, como tamaño, color, el fondo, el borde, etc.
Aunque todos los navegadores asignan estilos por defecto a la mayoría de los
elementos, estos estilos generalmente están lejos de lo que queremos para nuestros
sitios web.
Para declarar estilos personalizados, CSS utiliza propiedades y valores. Esta
construcción es llamada declaración y su sintaxis incluye dos puntos luego del nombre
de la propiedad y un punto y coma al final para cerrar cada línea.

Ilustración 2: Elemento CSS

(Ruiz, 2016)
CSS (Cascading Style Sheets / Hojas de estilo en cascada) tampoco es un lenguaje
de programación sino que es una tecnología que se emplea para darle estilo a una
página web construida en HTML.
Gracias a CSS se puede hacer una separación entre el contenido y estructura de la
web y su parte visual o estética.
Con esta tecnología, basta con definir en unas cuantas líneas el color, posición,
forma, alineación, márgen… de la plantilla web y los elementos que la conforman,
con la posbilidad de añadirlos de forma masiva.

Dentro del HTML bastará con “llamar” a los estilos para que se apliquen en la página
web. Como resultado, trabajar la parte visual de una web es mucho más fácil y
rápido.
Además, si se necesita hacer algún cambio, por ejemplo en el color del texto; basta
con ir al documento CSS, buscar la línea donde se definió y hacer el ajuste. De
forma automatica el cambio se verá en la web sin necesidad de ir línea por línea en
el HTML.
(Querales, 2019)

5. Que es Java Script

A diferencia de HTML y CSS, JavaScript es un lenguaje de programación.
Para ser Justos, todos estos lenguajes pueden ser considerados lenguajes de
programación, pero en la práctica existen algunas diferencias en la forma en la que
suministran las instrucciones al navegador. HTML es como un grupo de indicadores
que el navegador interpreta para organizare la información, CSS puede ser
considerado como una lista de estilos que ayudan al navegador a preparar el
documento para ser presentado en pantalla (aunque la última especificación lo
convirtió en un lenguaje más dinámico), pero JavaScript es un lenguaje de
programación, comparable con otro lenguaje de programación profesional como C++
o Java. JavaScript difiere de los demás lenguajes en que puede realizar tareas
personalizadas desde almacenar valores hasta calcular algoritmos complejos,
incluyendo la capacidad de interactuar con los elementos del documento y procesar
su contenido dinámicamente.

Ilustración 3: Elementos JavaScript – Sintaxis

(Patrik, 2018)
JavaScript (JS) es un lenguaje de programación intepretado (no necesita ser
compilado) que permite añadir nuevas características a una página web,
especialmente características relacionadas con la interactividad con quienes
visitan tu página.
 Con JavaScript puedes crear formularios, incluir animaciones en 3D, imágenes
animadas, mensajes de alerta… en fin, te permite dotar a tu web de interactividad.
¿Dónde se incluye el código o scripts escritos en JavaScript? Puedes hacerlo de dos
formas, ya sea escribiendo el código directamente en el HTML o creando un archivo
aparte (con extensión .js) y referenciándolo (llamándolo desde el HTML).
Aunque sea más potente que HTML y CSS, lo cierto es que es muy sencillo de
aprender y de implementar, y todos los navegadores web actuales lo soportan.
(Querales, 2019)

6. Editores
Los documentos HTML, así como los archivos CSS y JavaScript, son archivos de
texto, por lo que podemos usar cualquier editor incluido en nuestro ordenador para
crearlos, como el bloc de notas de Windows o la aplicación Editor de Texto de los
ordenadores de Apple, pero también existen editores de texto especialmente
diseñados para programadores y desarrolladores web que pueden simplificar nuestro
trabajo. Estos editores resaltan texto con diferentes colores para ayudarnos a
identificar cada parte del código, o listan los archivos de un proyecto en un panel
lateral para ayudarnos a trabajar con múltiples archivos al mismo tiempo.
(Gauchat, 2017)
Los editores de texto para desarrollo web HTML pueden ser de tres tipos tipos: Editor
simple de texto, Editor HTML y Editor WYSIWYG. Un editor simple de texto, como el
Bloc de notas de Windows o Edit en Linux, son editores para crear archivos de texto
de propósito general. Por tanto, también se pueden emplear para crear páginas web,
aunque su simplicidad es tal que no incorpora ningún tipo de ayuda o funcionalidad
para el desarrollo web. Así que es mejor optar por alguno de los siguientes.
El editor HTML es un editor de texto plano específicamente diseñado para la edición
web, los cuales incluyen una serie de características como la revisión de sintaxis en
tiempo real, asistente para escritura correcta del código de acuerdo a la sintaxis del
lenguaje, inserción automática de etiquetas o la coloración inteligente, que facilitan
tanto la escritura como la depuración de programas.
(Lozano, 2013)

Análisis
Es importante entender la interacción entre estos tres lenguajes de programación en una página
web. Aunque los temas son amplios, las funciones usadas generalmente, para una página
funcional son prácticamente los mismos, es decir, la estructura de una pagina convencional utiliza
en general las mismas funciones de los tres lenguajes de programación.

Para portales o aplicaciones mas sofisticadas se debe adentrar mucho mas en cada uno de los
lenguajes.
Conclusiones

El HTML ha sido el protagonista de la estandarización del internet, la evolución de este lenguaje

(junto con sus dos socios CSS y JavaScript) permite interactuar no solamente con texto sino con
imágenes, video tanto alojados en un sitio como a través de videoconferencias.
Aprendí que el texto enriquecido no es otra cosa que una estructuración de la información para
poder mostrarla de una forma estándar, de tal forma que, no se necesiten muchos recursos en
el explorador para poder interpretar su estructura y mostrar el contenido conforme lo desea el
autor.

Referencias
Aguirre, S. (2020). HTML 5 Avanzado: Vol 1: Formularios avanzados. Contenido responsive.
SEO. Argentima: Plandos SA.
Franganillo, J. (6 de Septiembre de 2010). H.3. Html5: el nuevo estándar básico de la Web.
Garro, A. (2014). HTML 5. easybook v5.0-DEV.
Gauchat, J. (2017). HYML5 para Mentes Maestras - 2a Edicion. Argentina: CreateSpace
Independent Publishing Platform; 2nd edición .
Lozano, R. (2013). Desarrollo Web con HTML5 y CSS3. España: Creative Commons.
Patrik, o. . (15 de 06 de 2018). Best JavaScript Code Syntax Highlighters. Obtenido de Tools,
Web Design: https://onaircode.com/best-javascript-code-syntax-highlighters/
Querales, L. (21 de 12 de 2019). Una Experiencia 2.0. Obtenido de 26 libros y recursos gratis
de HTML, CSS y JavaScript: https://unaexperiencia20.com/libros-gratis-html-css-
js/#%C2%BFQue_es_CSS
Ruiz, N. F. (11 de 05 de 2016). Comunicacion Online. Obtenido de CSS-SINTAXIS:
http://www.naiarafernandez.com/conceptos-basicos-css/css-sintaxis/
Universidad de Alicante - Sergio Lijan Mora. (2012). HTML5 y CSS3 Conceptos Básicos de
HTML. Obtenido de http://desarrolloweb.dlsi.ua.es/cursos/2011/html5-css3-
es/conceptos-basicos-html