Lenguaje de Programación HTML

Caroline Ortiz Castillo

Universidad Latina de Panamá
[email protected]
Resumen
En la actualidad el lenguaje HTML es el que ha permitido el desarrollo de medios en linea
donde se han podido desarrollar recursos audiovisuales como: animaciones , audio ,
imágenes y videos.
El objetivo de este articulo es capacitar al lector(a) para que pueda aprender el uso
correcto de este lenguaje y así ponga en práctica la estructura basica del diseño de una
pagina web utilizando el lenguaje HTML 5 .

Además conocerá y analizará la importancia que tiene el lenguaje HTML 5 en la creación

de paginas webs .También utilizará su creatividad la cual dejará fluir para crear su página
deseada y seguirá explorando la versatilidad que contiene este gran lenguaje.En este
texto podrá observar algunos ejemplos e información que le será útil para seguir
ampliando su conocimiento .

Palabras Clave
 HTML
 HTML5
 Código
 Sitio web
 Etiquetas
 Atributos
 Lenguaje de programación
 Diseño web
 Elementos

Abstract
Currently, the HTML language is what has allowed the development of online media
where audiovisual resources such as animations, audio, images and videos have been
developed.
The objective of this article is to train the reader so that they can learn the correct use of
this language and thus put into practice the basic structure of the design of a web page
using the HTML 5 language.

You will also know and analyze the importance of HTML 5 in the creation of web pages.
You will also use your creativity which you will let flow to create your desired page and
will continue to explore the versatility that this great language contains.In this text you can
see some examples and information that will be useful to continue expanding your
knowledge.

Keywords
 HTML
 HTML5
  Code
 Website
 Tags
 Attributes
 Programming language
 Web design
 Elements

Introducción
HTML es el lenguaje con el que se define el contenido de las páginas web. Básicamente se trata
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.
HTML significa lenguaje de marcado de hipertexto, y le permite al usuario crear y estructurar
secciones, párrafos, encabezados, enlaces y elementos de cita en bloque (blockquotes) para
páginas web y aplicaciones.
HTML no es un lenguaje de programación, lo que significa que no tiene la capacidad de crear
una funcionalidad dinámica. En cambio, hace posible organizar y formatear documentos, de
manera similar a Microsoft Word.
Cuando trabajamos con HTML, utilizamos estructuras de código simples (etiquetas y atributos)
para marcar una página web. Por ejemplo, podemos crear un párrafo colocando el texto
encerrado dentro de una etiqueta inicial <p> y de cierre </p>.
(Rodríguez, El Lenguaje HTML, 2012)afirma “El lenguaje HTML se utiliza para describir la
estructura y el contenido
de un documento, así como para complementar el texto con objetos (por ejemplo, mapas) e
imágenes”.
El lenguaje HTML no es otra cosa, que un lenguaje estandarizado con el que los navegadores
interpretan la información que contienen la multitud de páginas que componen la World Wide
Web (de aquí en adelante WWW). Es un lenguaje de marcación de texto que permite al
navegador conectado interpretar la página que solicita al servidor. No es un lenguaje de
programación y no tiene compiladores, por lo tanto si hay algún error en los documentos que
interpreta, lo visualiza de la manera en que no lo ha entendido. El lenguaje HTML se basa
principalmente en un sistema de etiquetas que indica al navegador dónde está el cuerpo de un
documento (Rodríguez, 2006), cuándo hay que colorear un texto, etc.
Este lenguaje estándar ha evolucionado notablemente desde la primera versión que
conceptualizó Tim Berners-Lee en 1991 (Zakon, 1993-2011)y ha llevado una evolución constante
hacia un mayor dinamismo y ejecución de acciones (a través de otras tecnologías y
complementos) y cada vez menos estatismo, de la mano de tecnologías auxiliares al lenguaje
principal, que han sido incorporadas con el propósito de su estandarización.
El lenguaje html opera en base a marcadores escritos (que aparecen entre comillas angulares:
<html>), a partir de las cuales se cifra la apariencia y orden interno de una página web, así como
los scripts o rutinas que operan dentro de ellas. Dicho código fuente hace de ADN de la página
Web, diciéndole al navegador de dónde obtener los recursos para su representación y en qué
orden, secuencia y modo establecerlos. Y siguiendo el código al pie de la letra, el navegador nos
brinda la experiencia de la navegación Web. Para ello html opera en base a un conjunto de
componentes, como son:

 Elementos. Los ladrillos básicos del lenguaje html, sirven para representar el contenido y
sus atributos, así como marcar los parámetros del propio lenguaje, como el punto de inicio
de la cadena de comandos y el punto de cierre, o las necesidades especiales.
  Atributos. Las especificaciones respecto a valor, color, posición, etc. de los elementos
incorporados en el código. Por lo general consisten en una serie de instrucciones lógicas
o numéricas.
Según (Raffino, 2020) se llama etiquetas html a las instrucciones mismas con que se
compone el código, es decir, las entradas rodeadas de comillas angulares y que tienen
un valor específico en el conjunto, que será luego leído por el programa navegador y
traducido en una página Web. Estas etiquetas deben abrir <> y luego cerrar </> cuando
ya no se las necesite, en el orden correcto y la secuencia correcta para que no surjan
errores.

Etiquetas HTML básicas (Idevik, 2019)

Hay una serie de etiquetas que son las más usadas para crear cualquier documento
HTML, a continuación las explicamos:
 <body> para el contenido
 <head> para información sobre el documento
 <div> división dentro del contenido
 <a> para enlaces
 <strong> para poner el texto en negrita
 <br> para saltos de línea
 <H1>…<H6> para títulos dentro del contenido
 <img> para añadir imágenes al documento
 <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro
de la lista
 <p> para parágrafos
 <span> para estilos de una parte del texto

Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen como
scripts, los cuales brindan instrucciones específicas a los navegadores que se encargan
de procesar el lenguaje. Entre los scripts que pueden agregarse, los más conocidos y
utilizados son JavaScript y PHP. El marcado estructural es el que estipula la finalidad del
texto, aunque no define cómo se verá el elemento. El marcado presentacional, por su
parte, es el que se encarga de señalar cómo se verá el texto más allá de su función.
(Julián Pérez Porto ,Ana Gardey, 2008)

Estructura básica HTML (Bravo, 2019)

Antes de ver los códigos básicos, debes saber que la primera línea de tu documento HTML
siempre debe contener la etiqueta <!DOCTYPE html>. Esto hará que el código de tu sitio sea
legible en cualquier navegador.
Ahora bien, un documento HTML bien armado tiene cuatro etiquetas esenciales para que
el contenido se distribuya correctamente. Estas son:
1. HTML
<html> está al inicio de un documento HTML e indica a los navegadores que la página
tiene código HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del lenguaje, la
etiqueta de cierre </html> será el último elemento del documento.
2. Encabezado
<head> es la etiqueta que se utiliza para el encabezado de la página. Su principal función
es contener toda la información del funcionamiento del sitio. Debido a esto, es un código
encriptado que las personas que entran a la página no pueden ver.
3. Título de la página
 <title> es la etiqueta que da a tu sitio un nombre para que los usuarios puedan identificarlo.
Es el título que puedes ver en las pestañas del navegador.
4. Cuerpo
<body> es la etiqueta que contiene todos los elementos individuales del sitio. O dicho de
otra forma, comprende todo el contenido visible del sitio. Aquí podrás insertar texto, imágenes,
videos o cualquier otra funcionalidad que desees mostrar.

Lenguaje HTML5 (Jimenez, 2019)

Cuando hablamos de HTML5 lo primero que tenemos que saber es que es la última versión de
la tecnología HTML, cuyas siglas corresponden a “HyperText Markup Language”, que tiene el
siguiente significado:

 HyperText, cuyo significado es hipertexto, que no es más que un texto que enlaza con
otros contenidos, que pueden ser otro texto u otro archivo. Esto es la base del
funcionamiento de la web tal y como la conocemos, que no es más que páginas y
recursos interconectados.
 Markup, que significa marca o etiqueta, ya que todas las páginas web están construidas
en base a etiquetas, desde las primeras versiones hasta las últimas etiquetas de
HTML5. Un ejemplo de una etiqueta HTML es la que identifica a un párrafo, que se
compone de la etiqueta, el contenido de la etiqueta y el cierre del párrafo:
<p>HOLA</p>.
 Languaje, cuyo significado es lenguaje, porque HTML es un lenguaje, es decir, tiene sus
normas, tiene su estructura y una serie de convenciones que nos sirven para definir
tanto la estructura como el contenido de una web.

Qué cambia en HTML5 (Fernández, 2021)

Se han añadido etiquetas que permiten crear animaciones en 2D, con una
etiqueta de canvas y una API que permiten que puedas dibujar elementos en
dos dimensiones y animarlos en la web. También se pueden añadir eventos para
el teclado, ratón o mandos, que permiten poder utilizarlos para interactuar con
una página.
Relacionado con lo anterior, también se pueden programar aplicaciones web en
HTML5, lo que quiere decir que las páginas pueden ser apps, y no necesitarás
instalar una app independiente en el PC o móvil, ya que podrás usarlo igual
desde el navegador. También se pueden crear videojuegos con este método, lo
que se complementa con poder utilizar teclado, ratón o mando.

Se diseñó para utilizarse en todos los desarrolladores de Open Web, es una

página que tiene diversos recursos sobre la tecnología de HTML5 y, se clasifica
en distintos grupos de acuerdo a su función:

 Semántica: Que permite describir con mejor precisión el contenido de la

web.
  Conectividad: Deja al usuario comunicarse con el servidor de una manera
más innovadora.
 Sin conexión y almacenamiento: Les da la oportunidad a las páginas web
de almacenar datos locales y lograr operar sin conexión de una forma más
eficiente.
 Multimedia: Permite un soporte para utilizar el audio y video nativo.
 Gráficos y efectos 2D y 3D: Ofrece una amplia gama de nuevas
características que manejan los gráficos de la página como Canvas 2D,
WebGL, entre otros.
 Rendimiento e Integración: Permite una mejor optimización de la velocidad
y usar el hardware de mejor manera.

Los grandes beneficios de HTML5 (Pimentel, 2015)

 Incorporación de video:HTML5 proporciona un estándar para mostrar

videos, haciendo que su incorporación sea sencilla y popular.

 Experiencia de usuario:Gracias a que HTML5 ofrece una gran variedad de

herramientas, se pueden diseñar y presentar sitios y aplicaciones Web
que superen las expectativas de los usuarios.

 Un código más limpio:HTML5 ha sido creado para ofrecer un código más

limpio, que soluciona el tan aquejado problema de tener que hacer
modificaciones en un sitio Web.

 Compatibilidad múltiple entre navegadores:Los diseñadores Web pueden

estar tranquilos de que, los sitios o sistemas que desarrollen, serán
compatibles en todos los navegadores.

 Optimización para móviles:HTML5 es aún más increíble, ya que está

optimizado para desarrollar sitios y aplicaciones móviles. Esto significa
que, con HTML5, podrás llevar a cabo proyectos responsivos y
funcionales para todo tipo de dispositivos.

Marco Teórico
HTML5 es una combinación de nuevas etiquetas de HTML, propiedades CSS3, JavaScript y
algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de
la propia especificación HTML5. (Celaya Luna, A, 2014)
Lo que hace el estándar HTML5 es especificar qué marcas deben utilizarse para escribir un
documento web y qué significa cada una de ellas. De esta forma, cualquier navegador sabrá
cómo interpretarlas. Por ejemplo, todo documento HTML ha de ir delimitado por la etiqueta de
inicio y cierre <html>. Dentro de estas dos etiquetas tenemos dos partes bien diferenciadas:
Cabecera (elemento <head>) y Cuerpo (elemento <body>). Estas son las etiquetas HTML que
encontraremos en cualquier página web y que definen su estructura. En las próximas secciones
estudiaremos cada una de estas partes. (Recio García,J.A., 2016)

Etiquetas y atributos
En HTML las etiquetas se escriben con el siguiente formato:
<marca>contenido</marca>
La etiqueta aquí representada se llama marca y vemos que la etiqueta de comienzo y la etiqueta
de cierre se distinguen en que la de cierre comienza por una barra inclinada (/). En HTML hay
muchas etiquetas emparejadas como estas:
<h1>Introducción</h1> <p>Esto es un párrafo</p>
Pero HTML también permite tener algunas etiquetas sin emparejar. Estas etiquetas terminan con
una barra inclinada:
<hr />
<link ... />
Incluso hay etiquetas que no necesitan una etiqueta de cierre:
<img ...>
<p>Esto es un párrafo pero no necesita cierre.
En HTML las etiquetas se pueden escribir en mayúsculas o minúsculas, indistintamente. El
bloque contenido entre una etiqueta de inicio y otra de cierre (o una etiqueta sin emparejar) lo
llamaremos elemento. Veremos que lo normal es que unos elementos estén contenidos dentro
de otros elementos. De esta forma daremos estructura al documento.
Un elemento puede tener una etiqueta con atributos. Un atributo especifica algunas
características singulares de un elemento o información adicional. Los atributos se especifican
como pares atributo=”valor”, separados por espacios dentro de la etiqueta de inicio:
<etiqueta atributo=”valor”> texto </etiqueta>
En HTML no es obligatorio que el valor vaya entre comillas, pero sí recomendado. Se usan en
muchos elementos:
<a href=”http://www.ra-ma.es/”>Editorial RA-MA</a>
<img src=”smiley.gif” alt=”Carita sonriente” />
El primero define un hiperenlace mientras que el segundo da información sobre la imagen que
se va a insertar en el documento.

Existen atributos genéricos que se pueden asociar a cualquier etiqueta y que nos serán de gran
utilidad cuando estudiemos las tecnologías CSS y JavaScript:
id = “texto”
Asigna un identificador único al elemento dentro de la página. De esta forma podremos dar
formato o manipular un elemento concreto de la página web.
class = “texto”
Indica que el elemento es de una clase concreta. Así varios elementos pueden ser de la misma
clase y luego formatearlos o manipularlos de forma conjunta.
style = “texto”

Comentarios en el documento HTML

Los comentarios son texto que ignora el navegador pero que es útil para el desarrollador, ya que
ayudan a entender el código. Los comentarios pueden estar insertados en cualquier lugar de la
página web.
<!-- texto del comentario (una o más líneas) -->
Normalmente se usan para marcar el comienzo y el final de las secciones de las páginas, incluir
notas para otros diseñadores, incluir explicaciones sobre el código de la página…
LA CABECERA HTML
La cabecera está delimitada por el elemento <head> (siempre contenida dentro del elemento
html) y en ella se describe información del documento y su configuración (título, configuración,
scripts y estilos). Veamos las partes más importantes.

Título del documento

El elemento <title> indica el título del documento. Es una etiqueta “obligatoria” y tiene que
aparecer una sola vez en el documento. El navegador lo visualiza en la barra de título de su
ventana. Por ejemplo, si escribimos lo siguiente:
<html>
<head>
<title>El titulo de mi primer sitio</title>
</head>
<body>
Mi primer sitio web
</body>
</html>
Como puedes comprobar en la Figura 2.1, en la barra de título (en este caso, en la pestaña)
aparece el título indicado.

2.1 Titulo de la página

Metadatos
Los metadatos (elementos <meta>) proporcionan metainformación sobre el documento
(información procesable automáticamente por programas que analicen la página).
Normalmente usan los atributos name (para definir un tipo de metadato) y content (para definir
el valor), aunque en el ejemplo veremos que algunos no lo usan. Algunos de los más habituales
son los siguientes:
<meta charset=”utf-8”>
<meta name=”author” content=”Juan Antonio Recio” />
<meta name=”keywords” content=”desarrollo web, html, css, ja- vascript” />
<meta name=”description” content=”El mejor libro sobre desa- rrollo web.” />
 charset indica la codificación en la que se ha escrito el documento de la página. Es
importante para que podamos ver correctamente las tildes en nuestra página. Como
nuestro editor de texto guarda en codificación UTF-8 eso es lo que hemos indicado.
 author indica el autor de la página.
 keywords y description hacen referencia al contenido de la página y suelen ser usados
por los motores de búsqueda como Google o Bing para indexar las páginas web. De
 esta forma, el buscador sabe qué términos de búsqueda son los que mejor describen a
nuestra web para así mostrársela a sus usuarios.

En la cabecera podemos indicar enlaces a otros archivos que queremos que se carguen junto
con la página web. Generalmente, estos archivos serán hojas de estilo CSS y archivos
JavaScript, ya sean librerías adicionales o nuestros propios archivos. Esto se realiza con el
elemento <link/>:
<link rel=”stylesheet” type=”text/css” href=”/css/formato. css” />
El atributo href es el que indica el documento que estamos cargando; type indica el tipo de
documento que es; rel indica la relación entre ambos documentos. El atributo href puede hacer
referencia a:
 Una URI absoluta (http://...).
 Una ruta relativa al archivo desde el que se referencia (como en el ejemplo).

Estilos
El elemento <style> permite definir propiedades de estilos que se aplicarán a lo largo del
documento. En este elemento generalmente se indica la que se va a aplicar, aunque se pueden
definir estilos incrustados en el propio HTML. Veremos la sintaxis detallada de los estilos en el
próximo capítulo.
De nuevo podemos indicar el estilo dentro de la propia etiqueta <style>, aunque es mucho más
práctico utilizar un archivo de estilos externo. A continuación se muestra un ejemplo de ambas
opciones.
<style type=”text/css”>
p { font-family: Arial;
font-size: 10pt;
color: rgb(0,0,128);
text-indent: 15px;
text-align: justify;
margin-left: 10px }
</style>
<style type=”text/css” href=”/css/miEstilo.css”>

EL CUERPO DEL DOCUMENTO HTML

El cuerpo de un documento HTML incluye los contenidos propiamente dichos de la página. El
cuerpo se define dentro de un elemento <body>. En esta parte del documento es donde se
incluyen la gran mayoría de etiquetas HTML. Existe una gran cantidad de etiquetas, que, a su
vez, tienen distintos atributos. Por eso, a la hora de aprender HTML5 el objetivo debe ser conocer
qué se puede hacer con este lenguaje y saber que existen ciertas etiquetas para ello, dejando al
margen la memorización de todas ellas. Para eso hay muchos recursos on-line que ofrecen el
listado completo (por ejemplo: www.w3schools.com); por esta razón, en este capítulo intentaré
ser bastante exhaustivo, pero sin entrar en demasiados detalles sobre su sintaxis completa.

Podemos estudiar el lenguaje HTML5 agrupando sus etiquetas en función de para qué se
utilizan. Por un lado encontramos las etiquetas que nos sirven para estructurar el documento en
bloques (cabecera, sección, navegación ). Otro conjunto de etiquetas nos sirve para indicar la
estructura del texto dentro de cada bloque (títulos, párrafos…). Por último están las etiquetas que
se utilizan para caracterizar fragmentos de texto (texto enfatizado, fragmentos de código ).
Veamos las etiquetas más importantes de cada grupo.
Etiquetas de estructuración del documento
Lo primero que debemos hacer al diseñar una página web es decidir cuál es su estructura en
bloques. Normalmente toda web tiene una cabecera de título, algún tipo de barra lateral de
navegación, un contenido principal y quizás un pie de página. Para hacer esta estructuración
suele utilizarse el elemento <div> o división. Una división no puede insertarse dentro de una
etiqueta de inferior nivel, como las de estructuración y caracterización del texto, pero sí puede
insertarse dentro de otra división <div>. Con las hojas de estilo y los atributos genéricos class e
id daremos formato a estas agrupaciones. En caso de los elementos <div>, estas hojas de estilo
se usan incluso para definir la posición de los distintos elementos. Veamos un ejemplo.
Supongamos que queremos crear una web que tiene la estructura mostrada en la Figura 2.2. He
utilizado colores para resaltar las distintas partes de la web: una cabecera, barra de navegación
a la izquierda, contenido principal a su derecha y un pie de página.

2.2 Ejemplo de estructura de una web

El código HTML sería el siguiente:

<html>
<head>
<title>Mi segunda web</title>
<meta charset=”utf-8”/>
<link rel=”stylesheet” type=”text/css”
href=”cap02_ejemplo01.css”/>
</head>
<body>
<div id=”cabecera”>Esta es la cabecera</div>
<div id=”nav”>Barra de navegación</div>
<div id=”principal”>
<div id=”contenido”>Contenido</div>
 <div id=”aside”>Barra lateral</div>
</div>
<div id=”pie”>Este es el pie de página</div>
</body>
</html>

Imágenes

En una página web podemos insertar imágenes en formato fotográfico, también conocido como
mapa de bits. Existen distintos tipos de formatos para guardar las imágenes, aparte del
archiconocido jpg. El problema de este formato es que perderemos calidad dependiendo del nivel
de compresión utilizado para que el fichero ocupe menos. Por eso existen otros formatos que
quizás sean más convenientes:
 .png : es un formato de compresión sin pérdida que además soporta transparencias. Eso
quiere decir que no perderemos calidad al comprimirlo (aunque ocupará más que un jpg)
y que podemos representar iconos o imágenes con zonas trasparentes. Es muy buena
alternativa para cualquier tipo de imagen que no sea una fotografía. Para eso utilizaremos
jpg.
 .jpg: como ya he comentado, es un formato de compresión con pérdida que no soporta
transparencias. Se usa normalmente para fotografías.
 .gif: es un formato gráfico sin pérdida, pero limitado a 256 colores. Por ello ocupa muy
poco y es idóneo para imágenes básicas, como los iconos. Además soporta
transparencias y animaciones.

Archivos multimedia

HTML5 incluye en el propio lenguaje dos elementos que sirven para añadir audio y vídeo a
nuestras páginas web:
 <video>: incrusta un vídeo en la página. ]
 <audio>: incrusta un elemento de audio.
Estos elementos eran muy demandados por los desarrolladores web para poder
reproducir elementos multimedia sin necesidad de instalar ningún plugin del navegador.
Afortunadamente, sus demandas fueron tenidas en cuenta y el estándar HTML5 ofrece
estos dos elementos multimedia. De hecho, es posible incluso acceder a la cámara del
PC o dispositivo móvil para grabar vídeos o tomar fotografías solo con HTML5 y un
poquito de JavaScript. Esto abre la puerta a infinidad de aplicaciones, como la
videoconferencia, el reconocimiento de imágenes, etc.

Dentro del elemento <video> o <audio> se suele incluir un texto que aparecerá en caso de no
poder reproducir ninguna de las fuentes. Además de estos atributos hay tres atributos bastante
interesantes:
 autoplay: se comienza a ejecutar en el mismo momento en el que se carga la página.
 controls: permite añadir controles de reproducción.
 loop: reproduce una y otra vez el mismo audio o vídeo.

Como ejemplo, busca cualquier vídeo en formato ogv y cópialo en el directorio de la web de
ejemplo. A continuación añade el siguiente código dentro del contenido principal. Puedes ver el
resultado en la Figura 2.7.
<video src=”video.ogv” controls autoplay>
 Tu navegador no implementa el elemento <code>video</code>.
</video>

2.7 Resultado de añair un video

Tablas

Las tablas permiten presentar información tabular, en filas y columnas, con cabeceras. Cada
elemento de la tabla puede ser simple, o, a su vez, ser otra agrupación de filas y de columnas,
cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.

Como las tablas permiten un control muy detallado, a veces se usan para organizar la
estructura general de una página web. Sin embargo, esto es algo que no se recomienda en
absoluto. Para estructurar las páginas debemos utilizar etiquetas div.

Una tabla se define mediante el elemento <table>. Dentro del elemento <table> se definen las
filas con <tr> (table row). Además, para cada fila, se define cada celda de la tabla con los
elementos <td> (table data). Dentro de este elemento se puede poner cualquier otro elemento
HTML (incluida otra tabla, aunque no se recomienda).

FORMULARIOS
Los formularios son una parte fundamental de cualquier web, pues permiten enviar datos del
usuario al servidor. El ejemplo más común es el de la página de registro o login.
Un formulario se construye utilizando el elemento <form>. Dentro de él estarán los controles que
componen el formulario y de los que extraeremos la información que se enviará al servidor. A la
hora de definir un formulario debemos indicar a qué URL se envían los datos y qué método de
HTTP queremos utilizar. Para ello se emplean los siguientes atributos:

 action=”URL”: contiene la URL de la aplicación del servidor que procesará los datos
remitidos (por ejemplo, un script de PHP). Más adelante veremos que en lugar de una
URL podremos incluir otras acciones, como, por ejemplo, código en JavaScript.
 method: método HTTP para enviar los datos al servidor. Ya hemos estudiado los dos
métodos principales:
 ● GET: envía la información al servidor como parámetros en la URL indicada con el
atributo action. Los datos enviados se pueden leer en la barra del navegador y la
información enviada está limitado a 500 bytes.
● POST: envía la información del formulario en la misma petición HTTP, por lo que puede
enviar mayor cantidad de información. Permite enviar ficheros adjuntos y los datos
enviados no se ven en la barra del navegador.

Veamos un ejemplo y recordemos el código PHP que vimos en el capítulo anterior y que
repetía un saludo tantas veces como se indicase en la URL. Podríamos utilizar el siguiente
formulario para hacer la petición:
<form action=”http://www.miserver.es/repite.php”
method=”get”>
Repeticiones: <input name=”veces”/>
<input type=”submit”/>
</form>

Prueba este ejemplo en el navegador. Crea un nuevo documento HTML vacío y copia el código
dentro del elemento body. El código es bastante sencillo: primero tenemos un cuadro de texto
para indicar el número de repeticiones y luego el botón Enviar. Como estudiaremos enseguida,
ambos elementos se crean con el elemento input. El resultado se muestra en la Figura 2.8.

2.8 Ejemplo de formulario básico

CUADROS DE TEXTO
Para crear un cuadro de texto tenemos que utilizar el atributo type = “text”. El atributo value sirve
para definir el valor por defecto, mientras que name indica el nombre del parámetro que se va a
enviar al servidor.
<label>Texto:</label>
<input type=”text” name=”paramTexto” value=”texto”/>

COLORES

Otra novedad de HTML5 es permitir seleccionar colores. Para ello utilizamos el tipo color.
Además podemos indicar el color por defecto asignando al atributo value un color en formato
hexadecimal (por ejemplo: #FF0000 es el color rojo). Hablaremos de las notaciones para indicar
los colores en el próximo capítulo. Puedes ver el resultado en la Figura 2.11.
<label>Color:</label> <input type=”color” value=”#FF0000”/>

2.11 Formulario con campos para valores numéricos y color

(Recio García, 2016)

Análisis
Mi punto de vista sobre este artículo es que he podido ampliar mi conocimiento sobre HTML
como HTML5 ya que anteriormente había investigado y leído sobre este lenguaje , con respecto
a los elementos encontrados estoy de acuerdo con la posición de los autores ya que tienen razón
en que HTML5 evoluciona y avanza cada vez más agregando más elementos , herramientas , lo
que nos permite ser curiosos en el sentido de explorar todas sus funciones e ir practicando para
cada día mejorar y aumentar tanto nuestra habilidad como creatividad ya que no se necesita ser
un experto para crear tu propia web , pero lo cierto es que con el tiempo nos desenvolveremos
más en la era digital .
Para mí la importancia de este tema de investigación es que nos abre el camino al mundo
tecnológico donde aprenderemos a utilizar el lenguaje correctamente y dominar todos sus
elementos . Es un gran oportunidad ya que puedes expandir tu mente y estarás poniendo en
practica las enseñanzas obtenidas por leer o escribir HTML ya sea lo más basico te darás cuenta
de que irás entendiendo como funciona cualquier página web.
Actualmente esto se está viendo más en la creación de aplicaciones videojuegos y juegos tanto
para dispositivos móviles como para computadoras .

Los retos que considero en este tema es comprender el lenguaje HTML y darle el uso adecuado
ya que crear una página web no es tan fácil , también saber manejar el tiempo , y ponerle
dedicación a la hora de diseñar esta página . Otro reto sería tener mucha paciencia a la hora de
resolver algún problema en el sitio web . Un reto que es muy importante es la enseñanza de
lenguajes de programación en las escuelas y colegios y lograr llamar la atención de los alumnos.

Los desafíos para mí son los de crear tu propio codigo HTML , implementar la idea de algún
emprendimiento en una página web y hacer que esta funcione . Por último innovar nuevas
actualizaciones a tu sitio web utilizando lenguaje HTML5. Hoy en día por el COVID-19 el mayor
desafio es la competencia de temas similares en desarrollo web y a su vez promocionarla y que
tenga gran cantidad de usuarios . En cuanto desarrollo de aplicaciones otro desafío es crear
nuevas actualizaciones en una aplicación que sean de gran intereses en la sociedad ya que
actualmente existen mejoras semejantes en muchas apps lo que está ocasionando la falta de
creatividad en algunas empresas populares .

Conclusiones
Aprendí en el desarrollo del trabajo que todos los sitios webs están creados con el lenguaje HTML
y por medio de todo lo que he investigado y leido esto me ayudó a expandir mi conocimiento ,
también me dió mucha más curiosidad todo lo que se puede hacer y diseñar en una página web.
Comprendí la definición de algunas de las etiquetas más usadas a la hora de hacer tu página
web también esto me ayudó a poder adentrarme en el mundo digital y aprender la estructura
básica de HTML y poder descubrir la implementación de imágenes , videos , texto .
Me pareció interesante que este lenguaje le da la oportunidad a cualquier persona para construir
un sitio web basado en una de sus ideas o algún sueño que tenga y quiera cumplir . Actualmente
pienso que el Internet ha avanzado demasiado gracias a HTML ya que existen páginas de
diferentes temas que nos facilitan la vida ya sea una página para comprar ropa online hasta para
llenar formularios y no tener que salir de su casa cuando se puede hacer en línea .

La importancia en el área de Tecnología es que les brinda a los jóvenes que son el futuro del
mañana la oportunidad de formarse en cualquier rama de la tecnología , lo cierto es que se
necesitan más personas en estas ramas porque así se irá avanzando cada día más en nuevos
softwares , nuevas mejoras , actualizaciones que le facilitaran la vida al ser humano y se vaya
logrando una sociedad más avanzada en la era digital y virtual .
Para mí una Sugerencia de cambio puede ser que se implemente en las escuelas como colegios
seminarios , cursos en el aréa tecnológica en este caso en el lenguaje HTML para así despertar
desde la edad temprana el interés no solamente por el desarrollo web sino por el desarrollo de
software y sus demás tecnologías . Considero que aplicando esta sugerencia se lograría una
mejor y mayor adaptabilidad a la tecnología y muchos irian perdiendo el miedo a probar y
incursionarse en un mundo totalmente nuevo para la sociedad no solo en el país sino en el
mundo.
Mi recomendación principal es ser curiosos y sobre todo atreverse a experimentar algo nuevo
también practicar aunque sea lo básico para ir mejorando y teniendo un avance conforme pase
el tiempo ya que es la base de las grandes programaciones que existen hoy en día .

En conclusión mi propuesta es que si queremos tener una página web exitosa debemos conocer
a quien nos dirigimos , es decir hacia que publico va dirigida nuestra página web , así iremos
obteniendo objetivo mucho más claros .
Si vamos a crear nuestro sitio web sin ayuda de algún experto tenemos que adaptarnos con el
vocabulario de la web , el significado de sus siglas y conocer cual es su funcionamiento
Para finalizar debemos actualizar nuestra página web y agregarle mejoras para así hacerlo más
atractivo a los nuevos usuarios que vayan ingresando y para los antiguos usuarios brindarles
nuevas experiencias con un nuevo y mejor contenido.
Referencias
Bravo, A. R. (22 de Julio de 2019). GoDaddy. Obtenido de https://mx.godaddy.com/blog/10-codigos-
html-para-paginas-web-y-para-que-sirven/

Celaya Luna, A. (2014). elibro. Obtenido de https://elibro.net/es/ereader/ulatina/56045?page=28

Fernández, Y. (13 de Enero de 2021). XATAKA BASICS. Obtenido de https://www.xataka.com/basics/que-

html5-que-novedades-ofrece

Idevik, X. (17 de Junio de 2019). iebs. Obtenido de https://www.iebschool.com/blog/que-es-etiqueta-

html-analitica-usabilidad/

Jimenez, J. D. (20 de Enero de 2019). OpenWebinars. Obtenido de https://openwebinars.net/blog/que-

es-html5/

Julián Pérez Porto ,Ana Gardey. (2008). Definicion.de: Definición de html. Obtenido de
https://definicion.de/html/

Milton Sneyder Pardo Mendez, Juan Sebastian Restrepo Sanchez . (2019). El Lenguaje HTML.
UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS, 26.

Pimentel, S. (17 de Noviembre de 2015). Netcommerce. Obtenido de https://info.netcommerce.mx/6-

beneficios-de-html5/

Raffino, M. E. (23 de Junio de 2020). Concepto.de. Obtenido de https://concepto.de/html/

Recio García, J. A. (2016). En J. A. Recio García, HTML5, CSS3 y JQuery: curso práctico (pág. 238 páginas).
Madrid: RA-MA Editorial.

Recio García,J.A. (2016). Obtenido de https://elibro.net/es/ereader/ulatina/106494?page=53

Rodríguez. (2006). Universidad de Salamanca, 3.

Rodríguez. (2012). El Lenguaje HTML. UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS, 26.

Zakon. (1993-2011). El inicio de la Web: historia. Universidad de Salamanca, 3.