Utilidad del Lenguaje HTML

Annie Williams
Universidad Tecnológica de Panamá
aw2090@gmail.com

Resumen

El objetivo específico de esta investigación es familiarizarnos con del lenguaje HTML,

específicamente se trata de que conozcamos los términos, las principales etiquetas y
los atributos más habituales de este lenguaje.

Palabras Clave
HyperText Markup Language, Etiquetas, Estándares Web, Tablas, Pagina Web.

Abstract
The specific objective of this research is to become familiar with the HTML language,
specifically it is about knowing the terms, the main tags and the most common attributes
of this language.

Keywords
HyperText Markup Language, Etiquetas, Estándares Web, Tablas, Pagina Web.

Introducción

La mayoría de las personas hemos visto cientos de páginas web y nos preguntamos
¿Qué es HTML? ¿Para qué me sirve? ¿Cómo funciona? ¿Es difícil escribir en HTML?
¿Dónde puedo escribir HTML?, por lo hemos realizado la siguiente investigación para
poder dar respuesta a todas estas interrogantes paso a paso. Entonces si buscamos su
definición en internet tendremos que “HTML es un lenguaje de marcado que se utiliza
para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a
HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto”.


Ahora según (Rodriguez, 2012) afirma que el lenguaje HTML se utiliza para describir la
estructura y contenido de un documento, así como para complementar el texto con
objetos por ejemplo mapas e imágenes.
Por otro lado el fundador de DesarrolloWeb.com (Alvares, 2001) indicaba que este es
un lenguaje de define el contenido de las páginas Webs.
También se ha comentado que el Hipertexto es el nuevo concepto de documento en la
cultura de imágenes. (Lamarca, 2015).
Ahora todas estas referencias anteriores no nos dice mucho porque la definición es
técnica. Para algunas personas al leer este tipo de texto es sumamente confuso e
inclusive se piensan que HTML incluye el diseño gráfico de las páginas web, sin
embargo, eso no es cierto ya que HTML sólo sirve para indicar como va ordenado el
contenido de una página web. Esto lo hace por medio de las marcas de hipertexto las
cuales son etiquetas conocidas en inglés como tags. De igual manera conoceremos
más de este lenguaje a medida que avanzamos en el desarrollo de la investigación.
Marco Teórico

Desarrollo del contenido de su documento, apoyado en referencias y como parte de la

revisión de literatura realizada. Si coloca imágenes y tablas, las mismas deben tener
una secuencia de numeración así como su respectiva referencia.

1. Concepto de HTML:

El lenguaje HTML; es la base para la creación de las páginas Webs. Y es que

hablamos de un conjunto de etiquetas que sirven para definir el texto y otros
elementos que compondrán una página web, como imágenes, listas, vídeos, etc.
El significado de su acrónimo es HyperText Markup Language, es decir,
Lenguaje de Marcas de Hipertexto.

2. Orígenes:

Se tienen muchas teorías sobre el origen de este lenguaje pero después de

investigar entiendo que el HTML fue creado en los ochenta en el CERN
(Organización Europea para la Investigación Nuclear) y en un principio se pensó
como un medio para la distribución de la información entre ordenadores de los
investigadores dispersos por el mundo, su creador fue Tim Berners Lee
(Rodriguez, 2012).

3. Función:

Este lenguaje es comúnmente usando en aplicaciones para representar

documentos a estos documentos se les llama instancias completas, como lo son
las páginas web. (Blog de NextUniversity). Puede ser transmitido fácilmente por
algún medio, como Internet. Los navegadores de Internet procesan e interpretan
documentos descritos en HTML usando un analizador de HTML. Para tener una
idea más clara hoy en dia muchas de las páginas más populares de Internet
utilizan HTML ejemplo; Google, Facebook, YouTube, Yahoo, Amazon y Twitter.

4. Las Etiquetas del Lenguaje HTML:

A través de las etiquetas podemos marcar y ordenar la estructura de nuestro

documento web. Este lenguaje nos ofrece una gran adaptabilidad, una
estructuración lógica y es fácil de interpretar tanto por humanos como por
máquinas.
 Cualquier documento HTML comienza con la etiqueta <html> y termina con la
etiqueta </html>. Dentro existen dos zonas bien identificadas: el
encabezamiento, que se identifica con la etiqueta <HEAD> y </HEAD> y sirve
para definir una serie de valores válidos en todo el documento, y el cuerpo del
documento, representado por etiqueta <BODY> y </BODY> que muestra la
información del documento. Dentro del encabezamiento, la etiqueta principal es
la del título, representado por la etiqueta <TITLE> En el cuerpo del documento
se pueden establecer diferentes categorías utilizando diversos tamaños de
fuentes y estableciendo así la estructura básica del documento

5. Creación de Documentos en HTML. Para obtener el paso a paso de de cómo

crear estos documentos nos apoyamos en:
http://www.hipertexto.info/documentos/html.htm

• Creación de documentos HTML: para crearlos es necesario tener un

procesador o editor de texto HTML y un Navegador de internet que te
permita colocar WWW.
• Editores: Los documentos HTML están en formato de texto sencillo
(también conocido como ASCII), por eso se puede utilizar un simple
procesador de textos para escribir un documento en lenguaje HTML. Este
archivo será posteriormente interpretado por el
programa navegador correspondiente, siempre que el documento esté
guardado en formato: "sólo texto". Una vez creado el documento HTML,
lo guardaremos con la extensión Html.

Los editores de HTML se clasifican en tres grupos:

a). Wysywyg (what you see is what you get -lo que ves es lo que obtienes-): son
editores que muestran en pantalla de forma inmediata lo que se va creando. Son
muy útiles para apreciar los colores y la disposición de los elementos.

b). No Wywywyg: editores que necesitan una aplicación externa

(el navegador o browser) para mostrar lo que se va creando. Son útiles para
recordar los comandos HTML y sus atributos.

c). Mixtos: presentan la pantalla dividida en dos ventanas, una con el código
HTML y otra con el resultado final, o permiten la visualización de ambos
en ventanas diferentes que se pueden visualizar de forma alternativa. (Lamarca,
2018).

• Conversores: Se trata de herramientas que permiten transformar un documento

escrito en otro formato al formato de un documento HTML. La mayoría de los
editores de HTML cuentan con herramientas de este tipo. Su utilización es muy
eficaz cuando se ha realizado un gran trabajo previo en otro sistema diferente.
 Para usarlos, se debe simplificar al máximo el formato documento (eliminar las
sangrías, uniformar los tamaños y tipos de letra, etc.)

• Revisores y validadores: Uno de los problemas que ha acompañado al lenguaje

HTML es la diversidad de navegadores, ya que no todos son capaces de
interpretar un mismo código de una manera unificada. Esto obliga al diseñador
de documentos HTML a que, una vez creada su página, compruebe que ésta
puede ser leída satisfactoriamente por todos los navegadores, o al menos, por
los más utilizados.

6. Estructura de un Documento HMTL:

Un documento HTML comienza con la etiqueta <html>, y termina con </html>.

Dentro del documento hay dos zonas principales: el encabezamiento, delimitado
por las marcas <HEAD> y </HEAD>, que sirve para definir algunos valores
válidos para todo el documento, y el cuerpo, delimitado por las
etiquetas <BODY> y </BODY>, donde reside la información del documento. El
elemento <TITLE> contenido dentro del encabezamiento permite especificar el
título de un documento HTML.

Ejemplo:

<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>
<BODY>
[Aquí se sitúan otras etiquetas que hacen posible visualizar la página]
</BODY>
</HTML>

• Elementos del Texto:

<p>
El fin de un párrafo que será formateado antes de que se muestre en la
pantalla
<pre>. . . </pre>

Identifica texto que ha sido formateado previamente (preformateado) por

algún otro sistema y debe ser desplegado tal como es.

<listing>. . . </listing>
 Ejemplo de listado de ordenador; las etiquetas incluidas serán ignoradas,
pero los espacios de tabulación funcionarán.

<xmp>. . . </xmp>
Similar a <pre> excepto que no se reconocerán etiquetas incluidas.
<plaintext>

Similar a <pre> excepto que no se reconocerán etiquetas incluidas, como

no hay etiqueta para finalizar, el resto del documento será traducido como
texto simple.

<blockquote>. . . </blockquote>
Incluye una sección de texto citado de cualquier otra fuente.

• Atributos de Texto:

Estilos lógicos Estilos físicos

<em> . . . </em>
Énfasis
<strong> . . . </strong>
Énfasis mayor
<code> . . . </code>
Despliega una directiva HTML <b> . . . </b>
<samp> . . . </samp> Negritas
Incluye salida ejemplo <i> . . . </i>
<kbd> . . . </kbd> Itálicas
Despliega una tecla del <u> . . . </u>
teclado Subrayado
<var> . . . </var> <tt> . . . </tt>
Define una variable Tipo de letra de máquina de
<dfn> . . . </dfn> escribir
Despliega una definición (en
muchos navegadores no
funciona)
<cite> . . . </cite>
Despliega una cita

Imagen 1. Dicha Imagen fue obtenida de la página http://www.hipertexto.info/documentos/html.htm

 • Saltos de Linea: HTML no reconoce los finales de línea del editor de
texto, pero la etiqueta <BR> desplaza el texto a la línea siguiente, y la
etiqueta <P> también lo desplaza, dejando una línea de separación.

• Párrafos: A continuación se muestran las etiquetas HTML para fijar los

párrafos y el resultado correspondiente: Ejemplo.

Código HTML Visualización

<p> Este parrafo usa la alineación por
Este párrafo está alineado a la izquierda. Cada
defecto, izquierda. Cada linea se
línea se sitúa en el margen izquierdo.
coloca a la izquierda del margen. </p>
<p align=right> Este parrafo esta
Este párrafo está alineado a la izquierda. Cada
alineado a la derecha. Cada linea esta
línea se sitúa en el margen derecho.
alineada en el margen derecho. </p>
<p align=center> Este parrafo esta
Este párrafo está alineado en el centro. Cada
alineado en el centro. Cada linea esta
línea se sitúa en el centro de ambos márgenes.
centrada entre ambos margenes. </p>

Imagen 2. Dicha Imagen fue obtenida de la página http://www.hipertexto.info/documentos/html.htm

• Tipos de Letras: Los tipos básicos son negrita, cursiva y teletipo o máquina de
escribir, que utilizan los códigos B, I, TT, respectivamente, como demuestra el
siguiente código:

Código HTML Visualización

letra <B>negrita</B> letra negrita
letra <I>cursiva</I> letra cursiva
letra <TT>teletipo</TT> letra teletipo

Imagen 3. Dicha Imagen fue obtenida de la página http://www.hipertexto.info/documentos/html.htm

• Listas: se dice dónde empieza la lista, dónde empieza cada punto y dónde
acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al
principio de línea, o al menos sin texto por delante (sólo espacios o
tabulaciones).

Podemos recurrir a tres tipos distintos de listas, cada una con una presentación
diferente: no numeradas, numeradas y listas de definiciones (glosarios).
(Lamarca, 2018)
 Lista no numerada Lista de
Lista numerada <ol>:
<ul>: definiciones/glosario: <dl>

<dl>
<dt>Primer término a definir
<ul> <ol> <dd>Definición del primer
<li>Madrid <li>Lentejas término
<li>Barcelona <li>Garbanzos <dt>Siguiente término a
<li>Zaragoza <li>Judías definir
</ul> </ol> <dd>Siguiente definición
</dl>
• Madrid 1. Lentejas
• Barcelona 2. Garbanzos (El atributo compact de la
• Zaragoza 3. Judías etiqueta <dl> puede usarse
para generar una lista de
definiciones que requiere
menos espacio.

Imagen 4. Dicha Imagen fue obtenida de la página http://www.hipertexto.info/documentos/html.htm

• Tablas: Principales etiquetas para mostrar tablas en HTML:

Etiqueta de
Etiqueta final Descripción de la etiqueta
inicio
<TABLE> </TABLE> Contenedor para los bordes de la tabla
<TABLE
</TABLE> Etiqueta para tabla con bordes
BORDER>
<TR> </TR> Establece una fila dentro de una tabla
<TD> </TD> Define una celda dentro de un tabla
<TH> </TH> Centra una cabecera en la parte superior de la tabla o en un lado
<CAPTION> </CAPTION> Fija un título en la parte superior de la tabla.

Imagen 5. Dicha Imagen fue obtenida de la página http://www.hipertexto.info/documentos/html.htm

 • Enlaces: Las etiquetas para establecer los vínculos o enlaces hipertextuales son
las siguientes:

<a name="nombre_vinculo">. . . </a>

Define un destino en un documento
<a href="#nombre_vinculo">. . . </a>
Vínculo a un destino en el mismo documento
<a href="URL">. . . </a>
Vínculo a otro archivo o recurso
<a href="URL#nombre_vinculo">. . . </a>
Vínculo a un destino en otro documento
<a href="URL?palabra_a_buscar+palabra_a_buscar">. . . </a>
Esta información fue obtenida del articulo del Hipertexto. (Lamarca, 2018)

• Gráficos: Para incluir una imagen o gráfico en un documento HTML se utiliza la

etiqueta <IMG>. En dicha etiqueta debe incluirse un parámetro SRC="URL", con
el cual se indica dónde está el archivo con el gráfico concreto que se quiere para
el documento. Los formatos de archivo más utilizados son GIF y JPEG.
(Lamarca, 2018)

7. Elementos de Estructuración del Documento HTML

Son aquellos que definen las partes básicas de todo documento HTML: la
declaración, el elemento HTML, la cabecera (HEAD) y el cuerpo (BODY), que
contiene el texto y demás información que mostrará el agente de usuario.

• Elementos meta-informativos: Usualmente incluidos en la cabecera, este tipo de

elementos proporcionan información al agente de usuario sobre el documento
como un todo.
• Elementos para la estructuración de bloques: Se utilizan para determinar la
naturaleza y/o apariencia de un bloque de texto.
• Listas y menús: permiten organizar el texto de modo que el agente realice
automáticamente algunas tareas (por ejemplo, insertar número de orden o
guardar cierta disposición para determinadas líneas) y represente
adecuadamente una enumeración de ítems.
• Imágenes: Con el URL asociado podemos incorporar cualquier imagen accesible
en Internet. El atributo ISMAP indica que es una imagen "sensible" y que el
usuario podrá señalar una región y recuperar el objeto asociada a ésta.

• Formulario: Los formularios permiten que el usuario introduzca información,

elementos como FORM, INPUT, SELECT, TEXTAREA y sus atributos permiten
diseñar formularios que rellenará el usuario. (Lamarca, 2018)

8. Las URL:

Los URL nos permiten realizar "saltos hipertextuales" por la Web. Son lo que se
esconde tras las palabras o frases marcadas como vínculos y que ordenan al
agente de usuario qué ha de hacer cuando el usuario las señala haciendo clic
con el ratón sobre ellas.

Una URL (o Uniform Resource Locator) es "la sintaxis y semántica de

información formalizada para la localización y el acceso a recursos a través de
Internet". Dicho así (RFC 1738) Esta es la clave de la World Wide Web. Los
URL utilizan en la WWW para "localizar" recursos y proporcionan, de forma
compacta, inteligible para los humanos e interpretable para aplicaciones
informáticas, la información básica que permite acceder a un recurso en Internet
ya que incluyen el protocolo de acceso (http, ftp, gopher, wais, nntp, etc.).
(Lamarca, 2018)
 9. Evolución del Lenguaje HTML:

Una vez visto los elementos y estructuras del lenguaje HTML, debemos viajar
por la evolución del mismo.

El primer documento formal

con la descripción de HTML se
publicó en 1991 bajo el nombre
HTML Tag(Etiquetas HTML) y
todavía hoy puede ser
consultado online a modo
de reliquia informática.

Imagen 6. Dicha Imagen fue obtenida de la página https://www.sutori.com/story/trabajo-investigativo-sobre-html-y-elementos-que-

lo-componen--o1zs6osWmp1iMk9YUdjSd9Na

La primera propuesta oficial

para convertir HTML en un
estándar se realizó en 1993 por
parte del
organismo IETF (Internet
Engineering Task Force).

Imagen 7. Dicha Imagen fue obtenida de la página https://www.sutori.com/story/trabajo-investigativo-sobre-html-y-elementos-que-

lo-componen--o1zs6osWmp1iMk9YUdjSd9Na
 En 1995, el organismo IETF
organiza un grupo de trabajo
de HTML y consigue publicar,
el 22 de septiembre de ese
mismo año, el estándar HTML
2.0. A pesar de su nombre,
HTML 2.0 es el primer estándar
oficial de HTML.

Imagen 8. Dicha Imagen fue obtenida de la página https://www.sutori.com/story/trabajo-investigativo-sobre-html-y-elementos-que-

lo-componen--o1zs6osWmp1iMk9YUdjSd9Na

La versión HTML 3.2 se publicó

el 14 de Enero de 1997 y es la
primera recomendación de
HTML publicada por el W3C.

Imagen 7. Dicha Imagen fue obtenida de la página https://www.sutori.com/story/trabajo-investigativo-sobre-html-y-elementos-que-

lo-componen--o1zs6osWmp1iMk9YUdjSd9Na

Es la última versión de HTML. El término representa dos

conceptos diferentes:
Se trata de una nueva versión de HTML, con nuevos
elementos, atributos y comportamientos.
Contiene un conjunto más amplio de tecnologías que
permite a los sitios Web y a las aplicaciones ser más
diversas y de gran alcance. A este conjunto se le
llama HTML5 y amigos, a menudo reducido a HTML5 .

Imagen 6. Dicha Imagen fue obtenida de la página https://www.sutori.com/story/trabajo-investigativo-sobre-html-y-elementos-que-

lo-componen--o1zs6osWmp1iMk9YUdjSd9Na
Análisis

El lenguaje de HTML abrió una puerta al mundo permitiéndoles a las personas

expresar sus ideas por medio de páginas y mostrárselas a todas las personas de todos
los países.

Hasta el momento ya tenemos una idea sobre lo que hace HTML y un punto importante
a mencionar es que las etiquetas no sólo sirven para ordenar nuestro contenido sino
que ayudan a los buscadores como Google, Yahoo search y muchos otros a encontrar
la información por medio de las etiquetas.

Infinitas son las posibilidades que te brindan las páginas WEB ya que te dan la
posibilidad de pasar el tiempo navegando por el universo del Internet.

Conclusiones

El HTML se creó en un principio con objetivos divulgativos de información con texto y

algunas imágenes. No se pensó que iba a llegar a ser utilizado para crear área de ocio
y consulta con carácter multimedia (lo que es actualmente la web), de modo que, el
HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos
los colectivos de gente que lo utilizarían en un futuro. Con el paso del tiempo se han ido
incorporando modificaciones y estos fueron estos los estándares del HTML.

Sin HTML no existiría el Internet que hoy conocemos, si no se hubiera inventado,

seguiríamos con el aburrido FTP (Protocolo de Transferencia de Ficheros)
mandándonos o bajando archivos que a veces ni sabíamos lo que eran. Ahora por
medio de una página llena de colores y botones por la cual se puede navegar, se
puede tener acceso a bastante información y archivos.

Todo el universo de Internet se lo debemos al HTML, ya que todas las páginas con las
que se compone la World Wide Web están hechas con el lenguaje de programación
HTML.
Referencias
Hernandez, R. L. (2010). Estandares del Diseño Web.

Lamarca, M. J. (2018). HTML El Nuevo Concepto de Documento en la Cultura de la Imagen. Obtenido de

http://www.hipertexto.info/documentos/html.htm

Mezquin, P. (2011). Lenguaje HTML.

Moreira, M. (s.f.). 2010. Obtenido de https://desarrolloweb.com/.

Rodriguez, D. P. (2012). Diseño y Creación del HTML.

Torres, D. (2018). Sutori. Obtenido de https://www.sutori.com/story/trabajo-investigativo-sobre-html-y-

elementos-que-lo-componen--o1zs6osWmp1iMk9YUdjSd9Na