LENGUAJES DE PROGRAMACIÓN WEB (PHP1,

HTML5 )
2
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 1

Sesión No. 2
Nombre: Lenguaje de marcado
Objetivo: Identificar qué es, cómo funciona y representa el lenguaje de
marcado

Contextualización

Un lenguaje de marcado es también conocido como lenguaje de marcas, éste

trata de codificar un documento que es conformado por “marcas” también
conocidas como etiquetas, las cuales estructuran la información dentro de una
página en estilo HTML o con estilos de programación específicos para la web
como PHP, Java, etc.

¿Qué es lo que determinan los lenguajes de marcado?

Éstos determinan una serie de instrucciones que son compiladas por el sistema
operativo y las representa de tal forma que se puedan interpretar por el usuario,
es decir, las instrucciones determinan el orden de los elementos al mostrarse y
el contenido de los efectos que podrá o no contener.
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 2

Introducción al Tema

Un lenguaje de marcado o de marcas se basa en instrucciones “WEB”, es

decir, etiquetas de programación que podemos estructurar de manera manual o
automática mediante programas de diseño como Adobe Dreamweaver, Eclipse,
Web Evolution x6, etc. En los cuales por tratarse de programas visuales los
elementos crean las instrucciones de marcado al situar los elementos en
cualquier parte del elemento que se desea crear, el desarrollo de aplicaciones
web también se basa en lenguajes de marcas, ya que los Widgets pueden ser
adquiridos desde una web exterior y ubicarla como elemento principal de un
portal propio.
Actualmente el HTML 5 es el principal lenguaje de marcado para Web que
existe. En conjunto con JavaScript sea transformado en una poderosa
herramienta de desarrollo de aplicaciones: permitiendo que sean consumidas en
diferentes navegadores y dispositivos.

¿Todos los documentos se presentan de igual forma?

Las características de cada elemento son determinadas al momento de la

creación del mismo o puede modificarse con el avance de los elementos creados,
sin embargo debe conocerse de medidas en pixeles, ya que es la forma que se
representan en una pantalla, lo que determinara también el peso de la misma y
con esto el tiempo en que demorará en descargarse para la completa
visualización en un cliente, si no se conoce el ancho de banda del servidor es
difícil determinar el tiempo en que se descargue o se suban las actualizaciones
del documento al host del servicio.
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 3

Explicación
Lenguaje de marcado

El lenguaje de marcado, también conocido como HTML, se trata de un sistema

de etiquetas que manejan instrucciones de creación de documentos web, la
representación de las etiquetas es; ‹ html ›, las instrucciones son definidas en
inglés y delimitan el tamaño del documento, el color de fondo, las imágenes que
utilizará, el orden de los menús que presentara, entre otras opciones más.

Los sistemas de programación que utilizan el lenguaje de mercado son varias

por lo que a continuación se presentan algunos de los más utilizados para los
medio web;

HTML
XML
XHTML

Se determinan estos lenguajes como base por la gran compatibilidad que se

tiene entre los distintos compiladores de los sistemas como; Mac, Windows,
Linux, Android, etc.

Todos los atributos que se presentan en estos lenguajes pueden ser

representados con diferentes nombres, pues las estructuras cambian en
conjunto con los sistemas, actualmente el lenguaje de base que se utiliza en
este tipo de documentos es HTML5 que se aplica para la correcta aparición de la
información en los dispositivos móviles, como en los teléfonos inteligentes o los
sistemas Tablet, que por presentarse en dispositivos más “ligeros”, por el cambio
en sus sistemas operativos ya que presentan cientos de diferencias que los
hace más ligeros y veloces para la capacidad que presentan en estos
dispositivos a comparación de los sistemas aplicados a las computadoras de
sobremesa o portátiles.
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 4

En la imagen siguiente se muestra una comparación de la versión anterior del

HTML con la nueva versión HTML5. En ella podrás ver que se a buscada
simplificar las marcas o “tags” del lenguaje.

En los documentos existen varios niveles de información, estos son los que
determinan las características y atributos de la misma. Estos lenguajes de
programación en los que se basan los documentos son conocidos como
“markups” que se representan por etiquetas. Cuando se aplican los lenguajes de
marcado se cumplen con objetivos esenciales.
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 5

Determina la tipografía y las funciones que ejecuta al momento de la

visualización de los elementos que se diseñaron anteriormente.
Estructura los elementos en la pantalla, ya sean los párrafos, imágenes,
menús, etc.
Presenta características para la impresión de documentos.
Separa los elementos para tener un orden y los gestiona al momento de
la visualización para tener una más rápida descarga.
Crea el lazo de conexión del servidor y el cliente.

La utilización de los medios mencionados es principalmente en tres aspectos;

Sirve para describir elementos del contenido.

Define el formato.
Realiza funciones del lenguaje HTML

A continuación te presentamos un diagrama del proceso de despliegue de un

documento HTML en un navegador.
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 6

Representación de documentos

La representación de documentos es útil para poder procesarlos y recuperar

información necesaria.

El objetivo de la representación de los documentos es el de traducir los mismos

a términos del sistema, es decir la codificación necesaria con la cual este
comprenda la información y la represente a los usuarios que la soliciten, los
documentos son alojados en un servidor el cual tiene el soporte necesario para
contenerlos y ejecutarlos cuando sea requerido. Esta representación se lleva a
cabo mediante simplificaciones y generalizaciones que presentarán una vista
lógica de los mismos.

De manera general se podría comparar la representación de documentos al

análisis documental, con algunas diferencias. Entre las cuales algunas
representaciones son aptas para el procesamiento por parte de aplicaciones
informáticas según los modelos en los que se presente. La representación de los
documentos se hace en torno a criterios temáticos y analíticos.

Cuando se habla de la representación de documentos HTML, se trata desde otro

enfoque, ya que se revisan las estructuras del diseño, el peso del mismo por la
organización de datos y contenidos. La información que se requiere para el
análisis del mismo se encuentra en el diseño maestro de la misma página o
documento en el que se determina las características de la estructura, como; el
número de páginas principales, el contenido de la página maestra, el número de
menús existentes, las opciones dentro de cada menú, las ramificaciones de cada
página y el diseño que tendrá cada contenido desde el marco principal o las
divisiones que mostrará cada uno.
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 7

Conclusión

Los lenguajes de marcado son conocidos y utilizados para la programación de

aplicaciones y portales web comúnmente, estos medios van evolucionando de
manera rápida y eficaz para adecuarse a las nuevas tendencias de
comunicación y distribución de información, es decir, toman y ejecutan las
nuevas características de los medios electrónicos y las potencian hasta lograr su
cometido, esto se ha visto en el lenguaje HTML que se utilizaba comúnmente en
las computadoras de sobremesa y portátiles, las nuevas tecnologías han exigido
una evolución del sistema HTML y CSS que son la base fundamental para la
creación y estructuración de apps web.

HTML5 y CSS3 son actualmente utilizados para desarrollar aplicaciones web

modernas con alta usabilidad. Ya que presentan compatibilidad de ejecución con
los contenidos en diferentes navegadores y dispositivos. Además de esto, se
complementan con el uso de Javascript. Permitiendo ampliar las posibilidades
una aplicación Web. Por lo que es importante conocer los contenidos de un
documento y saber qué complementos (librerías de Javascript) y widgets (Adobe
Flash) puede utilizar para mejorar la experiencia con el usuario final.
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 8

Para aprender más

Barzanalla R., (2012). Informática Lenguajes, ¿Qué son los lenguajes de

marcado o de marcas? http://brd.unid.edu.mx/que-son-los-lenguajes-de-
marcado-o-de-marcas/

s/a,. Lenguajes de Marcas, Capitulo 4. http://brd.unid.edu.mx/lenguajes-de-

marcas-capitulo-4/

Mark Pilgrim. (2011). Dive Into HTML5. Octubre 28, 2015, de Community Book
Sitio web: http://diveintohtml5.info/
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 9

Actividad de Aprendizaje
Objetivo: Entender las aplicaciones prácticas de los lenguajes de marcas.

Instrucciones:

Con la finalidad de reforzar los conocimientos adquiridos a lo largo de esta

sesión, ahora tendrás que realizar una actividad.
Te pido que realices el diseño de un mini sitio. Este mini sitio lo usaremos a lo
largo del curso para aplicar los conocimientos vistos en las siguientes sesiones.
El mini sitio debe tener por lo menos 5 secciones o documentos Web.
En un documento Word, describe cada uno de los elementos del sitio.
Ejemplificando su función. Es recomendable que agregues un diagrama de flujo
del sitio. A continuación te muestro un ejemplo de un diagrama de flujo de un
sitio Web.

Te pido seas creativo y que tomes en cuenta alguna experiencia en tu trabajo a

la hora de realizar el mini sitio. Se creativo.

En esta actividad se tomará en cuenta lo siguiente:

Tus datos generales 3 puntos
Referencias bibliográficas 7 puntos
Ortografía y redacción 10 puntos
Introducción 10 puntos
Contenido 30 puntos
Diagrama 40 Puntos
LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 10
 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 11

Bibliografía

• Baeza-Yates R., Berthier R. Modern Information Retrieval. Addison

Wesley & ACM Press, New York, 1999. Cap. 7.

• Barzanalla R., (2012). Informática Lenguajes, ¿Qué son los lenguajes de

marcado o de marcas? Consultado el 7 de mayo de 2013,
en: http://www.um.es/docencia/barzana/DIVULGACION/INFORMATICA/Q
ue-son-lenguajes-marcado.html

• S.a. Lenguajes de Marcas, Capitulo 4. Consultado el 7 de mayo de 2013,

en: http://bibing.us.es/proyectos/abreproy/11420/fichero/VOLUMEN+1%2
52F4_LENGUAJES+DE+MARCAS.pdf

• Mark Pilgrim. (2011). Dive Into HTML5. Octubre 28, 2015, de Community
Book Sitio web: http://diveintohtml5.info/

• J.D. Gauchat. (2012). El gran libro de HTML5, CSS3 y Javascript.

Barcelona España: Marcombo.