Lenguaje de Programación HTML

Noel Bernal
Universidad Latina de Panamá
nodberna@az.ulatina.edu.pa

RESUMEN
Podemos mencionar que el lenguaje de Marcado de Hipertexto HTML es uno de los mas
utilizados, por lo tanto, este articulo nos ayuda a comprender y experimentar de que se
trata realmente HTML, podemos decir que con la utilización de este conocimiento
podemos crear páginas web de una manera profesional y en este articulo le explicaremos
paso por paso como hacerlo.

Esperemos sea de un total agrado nuestras enseñanzas…

 PALABRAS CLAVE
➢ HTML
➢ Sintaxis HTML
➢ Etiqueta HTML
➢ Párrafos HTML
➢ Organización Página Web HTML
➢ Código HTML
➢ Hipertextos HTML
➢ Márgenes HTML
➢ Python
➢ CSS

ABSTRACT
We can mention that the HTML Hypertext Markup language is one of the most used,
therefore, this article helps us understand and experience what HTML is really about, we
can say that with the use of this knowledge we can create web pages of in a professional
way and in this article, we will explain step by step how to do it.

We hope our teachings are totally enjoyable ...

KEYWORDS
➢ HTML
➢ HTML Syntax
➢ HTML Tag
➢ HTML Paragraphs
➢ HTML Website Organization
➢ HTML Code
➢ HTML Hypertexts
➢ HTML Margins
➢ Python
➢ CSS
 INTRODUCCIÓN
En el tiempo que llevamos relacionados con la informática, hemos sido testigos de
cambios importantes, pero también hemos visto algunos momentos en verdad
revolucionarios, tanto a nivel hardware como a nivel software. En estos días, los
ordenadores han alcanzado una capacidad sorprendente, mientras que el software se
vuelve cada vez mas completo y mas útil. Gran parte del potencial que han demostrado
hardware y software se debe gracias a la existencia de Internet, la red de redes, que
expande la funcionabilidad de cualquier sistema, simplemente “conectándolo” al mundo.
Ahora, Internet está a punto de sufrir un cambio radical con la aparición de la quinta
versión del Hypert Text Markup Lenguage y es probable que nosotros cambiemos junto
con Internet, porque la red ya no será la misma.

HTML5 nace con un fuerte apoyo de algunos de los gigantes de la industria tecnológica
e informática como Google, Microsoft, Facebook, o Apple. La industria ha adoptado
HTML5 como la mejor solución para el desarrollo y distribución de aplicaciones ricas (rich
applications) compatibles con múltiples navegadores y dispositivos (entre ellos los
populares smartphones).

¿Y que nos ofrece HTML? Entre las características mas importantes, destaca que es
multiplataforma, multisistema y multidispositivo, posibilita una mayor y mas eficiente
conectividad, ofrece multimedia sin necesidad de plugins propietarios, tiene la posibilidad
de incorporar 3D, gráficos y efectos de calidad, le da sentido a la estructura web a través
de su nueva sematica y facilita el desarrollo de aplicaciones web con su almacenamiento
local y trabajo offline.

El verdadero gigante que esta haciendo temblar a todos es el que sugiere que HTML 5
podría reducir la importancia del sistema operativo en el ordenador, al punto de no ser
necesario en teoría. Nuevos proyectos están saliendo a la luz, tales como Firefox Os, un
sistema operativo abierto completamente en HTML5 para móviles.

Una aplicación Web basada en HTML5 puede ejecutarse en cualquier ordenador

independientemente del sistema operativo; Lo único que necesita es un interprete del
lenguaje que en este caso sería un navegador Web. Ni siquiera seria necesaria una
conexión a Internet, por que dichas aplicaciones pueden trabajar de forma local.

Los navegadores Web se han convertido en una pieza central de la actividad de cualquier
usuario que se sienta frente a un ordenador. Desde consultar al correo electrónico hasta
descargar archivos, buscar información, e incluso leer estas mismas líneas, se hace a
través de alguna clase de navegadores Web. La conveniencia del navegador Web es
innegable, y aunque los sistemas operativos no van a desaparecer, al menos deberán
conocer el protagonismo de los navegadores en los años por venir, especialmente con
el poder que les entrega HTML5.
(Muñoz)
 MARCO TEÓRICO
Introducción al lenguaje HTML
HTML es un lenguaje artificial que los ordenadores son capaces de interpretar diseñado
para que los programadores redacten instrucciones que los navegadores ejecutan para
originar la pagina web. Es decir, HTML es un lenguaje de programación o un “idioma que
la maquina entiende y procesa para dar una respuesta”

Las siglas de HTML significan HyperText Markup Language. El hipertexto en una

computadora es texto que posee referencias (hipervínculos, links o enlaces) a otro texto.
Para simplificar podemos decir que el hipertexto es aquel texto que pulsamos con el ratón
del ordenador y nos conduce a otro texto cuando utilizamos Internet. Pero además de
texto, el hipertexto puede estar formado por tablas, imágenes u otros elementos.
(S.L, 2009)

Sintaxis del HTML y Etiquetas

El HTML es un lenguaje que basa su sintaxis en un elemento llamado etiqueta.

<XXX> Este es el inicio de una etiqueta.

</XXX> Este es el cierre de una etiqueta.

Las letras de la etiqueta pueden estar en mayúsculas indiferentemente. La etiqueta

presenta frecuentemente dos partes.

Una apertura de forma general <etiqueta>

Un cierre de tipo </ etiqueta >

(Muñoz)
Los Párrafos
Se entiende como párrafo un texto que termina en un punto y aparte. En HTML las
etiquetas <p> y </p> se emplean para definir un bloque de texto que se comporta como
un párrafo. Es aconsejable no dejar nunca una porción de texto suelta por la pagina web.
Sino que la rodearemos con esas etiquetas. Cualquier editor de texto WYSIWYG se
encargará de hacerlo por nosotros, pero, si estamos usando otro tipo de editor, debemos
asegurarnos de que se hace correctamente.

Veamos un sencillo ejemplo del uso de párrafos dentro de una pagina web. Copia el
siguiente texto en un documento nuevo de tu editor de trabajo y grábalo con el nombre
ejemploParrafos.html

(Muñoz)
Visualiza la pagina web haciendo doble clic sobre el fichero recién creado. Deberías
obtener un pagina como la que sigue, si el navegador tiene la suficiente anchura los
párrafos no se mostraran en dos líneas sino en una sola.

(Muñoz)
Organización del portal web

El portal web que se presenta en este artículo contiene recursos didácticos digitales de
apoyo a diversos temas que cubren en su totalidad el contenido sintético de la UEA de
Programación de Web Estático (UAM-C, 2017d), en la cual se establece como objetivo
general que al final del curso el alumno sea capaz de conocer y utilizar los principios
básicos del funcionamiento de las aplicaciones web estáticas, y las tecnologías
disponibles para su desarrollo.

La información contenida en el portal web es de gran importancia, ya que los

conocimientos que se adquieran ayudarán al alumno a conocer el funcionamiento, así
como a desarrollar sus propios sitios web estáticos, con HTML y CSS. Este material de
apoyo les permitirá a los alumnos adquirir los conocimientos y habilidades necesarias
para, posteriormente incursionar en el desarrollo de aplicaciones web dinámicas.

El portal web se encuentra en el URL <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>,

y está organizado en trece apartados o secciones: once de ellas corresponden a las
once semanas de clases en las que se divide un trimestre en la UAM; una sección
corresponde a la bibliografía de consulta y apoyo; y la última sección es un glosario de
términos. En cada una de las secciones correspondientes a las semanas del trimestre
se detallan los temas a ser cubiertos, y se encuentran los recursos digitales que se han
elaborado para ser utilizados como apoyo durante las clases, los cuales incluyen: 1)
presentaciones Power Point, 2) ejemplos prácticos para realizar en clase, 3) tareas, 4)
laboratorios, y 5) soluciones a los ejemplos prácticos. (Desarro., 2007)

(Desarro., 2007)
Código HTML
Los documentos HTML siempre tienen un titulo que se muestra en la barra de titulo del
navegador. En la figura anterior se ha cargado un documento HTML en blanco sin titulo
de documento. Esta es la causa por la que el navegador muestra únicamente el
nombre de archivo en la barra de título.
Para definir el título del documento deberá introducirlo en la parte del encabezado del
documento HTML. Esta sección viene delimitada por los tags;

Así pues, puede ampliar un poco el archivo de la pantalla. El archivo HTML tendrá
entonces la estructura siguiente:
Hipertextos
HTML contiene instrucciones especiales que hacen que el texto pueda enlazar con otro
contenido de Internet. Estos marcadores se suelen llamar “hipervínculos” (“hyperlinks”,
en inglés) y son muy importantes en la composición de la red; si no fuera por ellos, esta
no podría existir. Los navegadores suelen mostrar los hipervínculos en texto azul y
subrayado. Sin un hipervínculo es pulsado, te llevara a otro pagina en Internet o a
cualquier otra cosa con la que enlace.
(Prescott, 2015)

Márgenes
Con otros atributos de la etiqueta <body> se puede asignar espacios de margen en las
páginas, lo que es muy útil para eliminar los márgenes en blanco que aparecen, a los
lados, arriba y debajo de la página. Estos atributos son distintos para Internet Explorer
y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos
los navegadores los interpreten perfectamente. (S.L, 2009)

(S.L, 2009)
Lenguaje de programación Python
Es un lenguaje de alto nivel ya que contiene implícitas algunas estructuras de datos
como listas, diccionarios, conjuntos y tuplas, que permiten realizar algunas tareas
complejas en pocas líneas de código y de manera legible.
Python fue creado por Guido van Rossum, un programador holandés a finales de los 80
y principio de los 90 cuando se encontraba trabajando en el sistema operativo Amoeba.
Primariamente se concibe para manejar excepciones y tener interfaces con Amoeba
como sucesor del lenguaje ABC.
El 16 de octubre del 2000 se lanza Python 2.0 que contenía nuevas características como
completa recolección de basura y completo soporte a Unicode. Pero el mayor avance lo
constituye que este comenzó a ser verdaderamente desarrollado por la comunidad, bajo
la dirección de Guido.
El Python 3.0 es una versión mayor e incompatible con las anteriores en muchos
aspectos, que llega después de un largo período de pruebas el 3 de diciembre del 2008.
Muchas de las características introducidas en la versión 3 han sido compatibilizadas en
la versión 2.6 para hacer de forma más sencilla la transición entre estas.
A Guido van Rossum le fue otorgado el Free Software Award (Premio del Software Libre)
en el 2001, por sus trabajos en la creación y desarrollo del lenguaje Python. En el 2005
fue contratado por Google, donde trabaja en la actualidad, aunque sigue liderando los
esfuerzos en el desarrollo del Python.
(Holguín, 2014)

(Holguín, 2014)
CSS
Es el formato recomendado para las paginas escritas en formato HTML en base a los
estándares de “Cascading Style Sheets” (hojas de estilo en cascada), publicado por el
Word Wide Web Consortium (W3C).
El uso de este estándar web nos ahorra tiempo, da consistencia y facilita en gran medida
la escritura de paginas web, en este libro vamos a aprender a utilizar las hojas de estilo
en cascada (estilos CSS) para crear paginas web mas flexibles y ligeras, controlando su
aspecto grafico con mayor precisión y con mayor facilidad para la corrección de errores.
(Durango)

(Durango)
 ANÁLISIS
HTML para mi es una herramienta muy poderosa para la creación de páginas web.
El conocimiento de la misma te da la potencia necesaria de para ejercer como un
profesional en una rama de la informática, nos ayuda a interactuar con el internet ya
que podemos plasmar ideas, proyectos, enfoques educativos, etc. Podemos mencionar
que hoy en día muchas empresas necesitan la utilidad de esta herramienta por lo tanto
tiene una gran demanda de desarrollo a nivel internacional ya que este lenguaje se
utiliza en casi todo el mundo.

Las paginas web tienen una gran importante sobre el impacto digital de una empresa,
ya que es la interacción directa de la empresa con el cliente, pero de manera virtual,
por lo mencionado es importante el diseño y confección de la misma ya que el cliente
debe estar como en su entorno virtual y así tomarse el tiempo de navegar por cada
parte de la misma. Esto puede llevar a una empresa con un vinculo con el cliente y así
ampliar cada vez más su cartera.

También podemos mencionar que no solamente es importante para empresas si no

también para contenido global, redes sociales, tiendas, blogs, documentación, etc. Lo
cual nos permite interactuar con distintos clientes y diversos temas.
CONCLUSIONES

➢ Definitivamente podemos resaltar el amplio poder que tiene HTM por ser una
multiplataforma, multidispositivo y multisistema ya que eso nos permite tener
una alta compatibilidad.

➢ HTML nos ayuda a expandir nuestra mente, nos permite ser creativos y con
la información y manejo correcto de tener resultados óptimos y
profesionales.

➢ Lo bueno de HTML es que nos permite interactuar, trabajar con ideas propias
y así brindar información a los destinatarios correspondientes, ya que una
pagina web bien estructurada puede tener una alta demanda de visitas.
 REFERENCIAS

Desarro., I. I. (2007). Revista Iberoamericana para la Investigación y el Desarrollo

Educativo.
Durango, A. (s.f.). Diseño web con CSS.
Gardey, A. (2016). definicion.de. Obtenido de
https://definicion.de/html/#:~:text=HTML%20es%20un%20lenguaje%20de,Forma
to%20de%20Documentos%20para%20Hipertexto.
Holguín, C. (2014). El lenguaje de programación Python. Santiago, Cuba.
Marcombo. (1999). Diseñar su propia pagina web . Barcelona.
Muñoz, V. J. (s.f.). HTML presente y futuro de la Web. España.
Prescott, P. (2015). Preston Prescott HTML 5.
S.L, P. V. (2009). Diseño básico de paginas web en HTML. Malaga.
S.L., P. V. (2009). Diseño basico de paginas web en HTML.