Tabla de contenido

I. Fundamentos del desarrollo de Aplicaciones Web ...................................1

1.1. ¿Qué es Internet? ........................................................................1
1.2. Breve Historia de Internet .............................................................1
1.3 Infraestructura Física de la Red ......................................................2
1.5 Funcionamiento de Internet ...........................................................3
1.6 Nombres de Dominio: La dirección única de un sitio web ....................6
1.7 URL: Identificadores de Recursos en la Web .....................................7
Anatomía de una URL .......................................................................7
URL absolutas vs URL relativas ..........................................................8
1.8 Servidores Web ............................................................................9
1.9 Arquitectura Cliente - Servidor .......................................................9
1.10 Páginas web ............................................................................. 10
1.11 Sitio web ................................................................................. 10
1.12 Tipos de páginas web ................................................................ 10
¿Qué es una página web estática? ................................................... 11
¿Qué es una página web dinámica? .................................................. 11
2. Lenguaje de Etiqueta de Hipertexto ................................................... 11
2.1 Introducción HTML ...................................................................... 11
Historia HTML .................................................................................. 11
Editores HTML ................................................................................. 12
Estructura de un documento HTML ..................................................... 12
Definición SEO. ................................................................................ 13
Elementos HTML .............................................................................. 13
Navegadores web............................................................................. 14
Párrafos HTML............................................................................... 14
Saltos de línea HTML ...................................................................... 15
Elementos HTML <b> y <strong>.................................................... 15
Enlaces HTML................................................................................ 15
Etiqueta div..................................................................................... 15
Secciones ..................................................................................... 16
Article .......................................................................................... 16
cite.............................................................................................. 16
footer .......................................................................................... 17
Listas y Tablas ................................................................................. 17
 Lista HTML desordenada ................................................................. 17
Lista HTML ordenada...................................................................... 17
Imágenes HTML ............................................................................... 17
Formularios ..................................................................................... 18
El elemento <form> ...................................................................... 18
El elemento <input> ...................................................................... 18
Campos de texto ........................................................................... 18
Botones de radio ........................................................................... 18
Casillas de verificación ................................................................... 19
Select .......................................................................................... 19
Datalist ........................................................................................ 21
Más elementos para formularios ...................................................... 21
Envío GET vs POST ........................................................................ 23
El botón Enviar.............................................................................. 23
El atributo de acción ...................................................................... 25
LIC. RUBEN CUARITE Página | 1

I. Fundamentos del desarrollo de Aplicaciones Web

1.1. ¿Qué es Internet?
Internet es una red de computadoras que se encuentran interconectadas a
nivel mundial para compartir información, constituye una parte fundamental
en nuestras vidas y la web es la pieza central que conecta todas las tecnologías
involucradas.

1.2. Breve Historia de Internet

1958. Los EEUU fundaron la Advanced Researchs Projects Agency (ARPA) a
través del Ministerio de Defensa.

1969. Como consecuencia del proyecto ARPA nace la red ARPANET,

interconectando 4 grandes computadoras ubicados en distintas localizaciones.

ARPANET fue una red de computadoras creada por encargo del Departamento
de Defensa de los Estados Unidos (DOD) para utilizarla como medio de
comunicación entre las diferentes instituciones académicas y estatales.

Inicialmente se seleccionaron 4 nodos para ARPANET

1973-1974. Empieza a utilizarse en ARPANET el protocolo TCP/IP como

necesidad de establecer un protocolo de comunicaciones estándar. Casi al
mismo tiempo empieza a desarrollarse el UNIX por lo que TCP/IP se convirtió
casi en sinónimo de UNIX.
LIC. RUBEN CUARITE Página | 2

1980. La red ARPANET cuenta con unas 100 computadoras

1982. Adopción oficial del TCP/IP como protocolo estándar.

1986. Nacimiento de la red NSFnet (National Science Fundation), con el objeto

de facilitar a toda la comunidad científica americana y a cinco grandes centros
de supercomputación la interconexión de datos.

Fue creada por el gobierno de los Estados Unidos y fue reemplazo de ARPANET
como backbone de Internet. Desde entonces ha sido reemplazada por las redes
comerciales.

1991. Aparece el servicio de información WWW (World Wide Web) en el CERN

de suiza. El 30 de abril de 1993, el CERN presentó la World Wide Web de forma
pública.

1993. Mark Andreesen, del National Center for SuperComputing Applications

(NCSA) de Illinois publicó el Mosaic X, un navegador fácil de instalar y de usar.
Supuso una mejora notable en la forma en qué se mostraban los gráficos. Era
muy parecido a un navegador de hoy en día.

A partir de la publicación de la tecnología WWW y de los navegadores se

comenzó a abrir Internet a un público más amplio: actividades comerciales,
páginas personales, etc. Este crecimiento se aceleró con la aparición de nuevos
ordenadores más baratos y potentes.

1.3 Infraestructura Física de la Red

Se entiende como infraestructura de red a todos aquellos elementos básicos e
imprescindibles para cualquier institución u organización pública o privada
(empresa, oficina o industria) que precise todos o algunos de los siguientes
servicios de telecomunicaciones: teléfono, fax, computadoras, escáner,
impresoras, cámaras de control y vigilancia, control de accesos, etc.
LIC. RUBEN CUARITE Página | 3

Y los diferentes elementos que conforman la Infraestructura de Red son:

 Cableado Estructurado
 Alimentación eléctrica equipos de comunicaciones
 SAI: Sistema de Alimentación Ininterrumpida de equipos de IT
 Cuarto de Comunicaciones
 Seguridad y control
 Electrónica de Red

1.5 Funcionamiento de Internet

Una red es un grupo de computadoras conectadas que pueden enviarse datos
entre sí.
LIC. RUBEN CUARITE Página | 4

Internet se conoce como la red de redes y se define como red informática

mundial. Consiste en una red de alcance mundial que conecta computadoras y
dispositivos de todo el mundo. Para ello emplea redes inalámbricas WiFi y
cables Ethernet, que conectan los dispositivos con un router.

El router es un aparato que intermedia entre los dispositivos y el proveedor

de Internet.

El Proveedor de Servicios de Internet (IPS) facilita el acceso a Internet gracias

a su infraestructura de centrales intermedias. Por su parte, estas centrales se
conectan entre sí y con millones de servidores y otros ordenadores empleando
kilómetros de cables terrestres y submarinos.

Se pueden comunicar porque están unidos a través de conexiones telefónicas,

cable, ondas u otro tipo de tecnología y gracias a que utilizan un lenguaje o
protocolo1 común el TCP/IP, que son unas normas que nos dicen como tienen
que viajar los datos por la red.

1
Protocolo, un sistema de normas que regulan la comunicación entre dos o más sistemas
que se transmiten información a través de diversos medios físicos.
LIC. RUBEN CUARITE Página | 5

El ISP o proveedor nos asigna un número único a nuestro router dentro de la

red para que cuando nuestra computadora se conecte a la red esté identificado.
Este número será único en toda la red y se llama el IP de nuestra computadora.

No puede haber otra computadora dentro de la red con el mismo IP. Estos
números IP se llaman "direcciones IP".
LIC. RUBEN CUARITE Página | 6

1.6 Nombres de Dominio: La dirección única de un sitio web

Dominio. Un nombre de dominio (o simplemente dominio) es un nombre fácil
de recordar asociado a una dirección IP física de Internet. Se trata del nombre
único que se muestra después del signo @ en las direcciones de correo y
después de www. en las direcciones web. Por ejemplo, el dominio del Instituto
www.itclp.com tiene la dirección IP 200.75.160.17

Cualquiera puede comprar un nombre de dominio. Se tiene que ir a un

registrador o un host de dominios, encontrar un nombre que nadie más utilice
y abonar una pequeña cuota anual para ser su propietario.

Subdominio. Un subdominio forma parte de un dominio más grande. Por

ejemplo, mail.google.com, www.google.com y docs.google.com son todos los
subdominios del dominio google.com. El propietario de un dominio puede crear
subdominios en su dominio de nivel superior para que cada uno de sus servicios
o páginas web tenga una dirección fácil de recordar.

Los nombres de dominio suelen estar divididos en dos o tres partes, cada una
de ellas separada por un punto. Cuando se leen de derecha a izquierda, los
identificadores de los nombres de dominio van de lo más general a lo más
específico. La sección a la derecha del último punto de un nombre de dominio
es el dominio de nivel superior (TLD – Top Level Domain). Entre ellos, se
encuentran los TLD "genéricos", como ".com", ".net" y ".org", así como los TLD
específicos de cada país, como ".bo", ".uk" y ".jp".
LIC. RUBEN CUARITE Página | 7

A la izquierda del TLD está el dominio de segundo nivel (2LD) y si hay algo a
la izquierda del 2LD, se llama dominio de tercer nivel (3LD). Veamos un par de
ejemplos:

Para el nombre de dominio de Google en Estados Unidos, "google.com":

'.com' es el TLD (más general)

"google" es el 2LD (más específico)

Estructura de los nombres de dominio

Un nombre de dominio tiene una estructura simple formada por varias partes
(puede tener solamente una parte, dos, tres,...), separadas por puntos y se
leen de derecha a izquierda:

Cada una de estas partes provee información específica sobre el nombre de

dominio completo.

 TLDs locales como .bo .us, .fr, o .mx pueden requerir el servicio en un
determinado idioma o que esté alojado en un país específico - están
hecho para indicar que un recurso está en un idioma o país en particular.
 Los TLDs que contienen .gov son solamente permitidos para ser usados
por los departamentos de gobierno.
 Los TLDs como .edu y .ac se supone que se usen solamente en
instituciones educacionales o académicas.

1.7 URL: Identificadores de Recursos en la Web

Cada página Web tiene una dirección única, conocido como URL. URL significa
Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es
más que una dirección que es dada a un recurso único en la Web. Cada URL
válida apunta a un único recurso. Dichos recursos pueden ser páginas HTML,
documentos CSS, imágenes, etc.

Anatomía de una URL

Aquí hay algunos ejemplos de URL:

https://developer.mozilla.org
https://developer.mozilla.org/es/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL

Veamos este ejemplo:

https://www.cgsoft.com.bo:80/files/publicaciones/convocatoria.html?key1=v
alue1&key2=value2#SomewhereInTheDocument
LIC. RUBEN CUARITE Página | 8

http es el protocolo. La primera parte de la URL indica qué protocolo debe usar
el navegador. Un protocolo es un método establecido para intercambiar o
transferir datos alrededor de una red informática. Por lo general, para sitios
web es el protocolo HTTP o su versión segura, HTTPS. La Web requiere uno de
estos dos, pero los navegadores también saben cómo manejar otros protocolos
como mailto: (para abrir un cliente de correo) o ftp: para manejar la
transferencia de archivos.

www.cgsoft.com.bo es el nombre de dominio. Indica qué servidor web se

solicita. Alternativamente, es posible usar directamente una dirección IP, pero
debido a que es menos conveniente, no se usa con frecuencia en la Web.

:80 es el puerto. Indica la "puerta" técnica utilizada para acceder a los recursos
en el servidor web. Por lo general, se omite si el servidor web utiliza los puertos
estándar del protocolo HTTP (80 para HTTP y 443 para HTTPS) para otorgar
acceso a sus recursos. De lo contrario es obligatorio.

/files/publicaciones/convocatoria.html es la ruta al recurso en el servidor

web. En los primeros días de la Web, una ruta como esta representaba la
ubicación de un archivo físico en el servidor web. Hoy en día, es principalmente
una abstracción manejada por servidores web sin ninguna realidad física

?key1=value1&key2=value2 son parámetros adicionales proporcionados al

servidor web. Esos parámetros son una lista de pares clave/valor separados
con el símbolo &. El servidor web puede usar esos parámetros para hacer cosas
adicionales antes de devolver el recurso.

#SomewhereInTheDocument es un ancla para otra parte del recurso en sí.

Un ancla representa una especie de "marcador" dentro del recurso, dando al
navegador las instrucciones para mostrar el contenido ubicado en ese lugar
"marcado". En un documento HTML, por ejemplo, el navegador se desplazará
hasta el punto donde se define el ancla; en un video o documento de audio, el
navegador intentará ir a la hora que representa el ancla. Vale la pena señalar
que la parte después del #, también conocido como el identificador de
fragmento, nunca se envía al servidor con la solicitud.

URL absolutas vs URL relativas

Una dirección URL absoluta contiene toda la información necesaria para
localizar un recurso.

Una url absoluta es una cadena de texto que describe completamente la

ubicación de un archivo en la web, esta incluye varias partes como el protocolo,
el subdominio, el nombre del host o servidor, el dominio, subdirectorios y
finalmente el nombre del archivo.

Las url relativas contienen solo una parte de las absolutas: solamente los
directorios y el nombre del archivo. El navegador completará la información
faltante así que sólo se usan dentro de documentos html.
LIC. RUBEN CUARITE Página | 9

1.8 Servidores Web

Un servidor web es una computadora que aloja uno o más sitios web. "Alojar"
(hosting) significa que todas las páginas web y sus archivos soportes están
disponibles en esa computadora. El servidor web enviará cualquier página web
del sitio web que aloja, al navegador de cualquier usuario, por cada solicitud
del usuario.

No se debe confundir sito web y servidor web. Por ejemplo, la expresión "Mi
sitio web no responde", en realidad significa que el servidor web no responde
y, por lo tanto, el sitio web no está disponible. Más importante aún, dado que
un servidor web puede alojar varios sitios web, la expresión servidor web nunca
se utiliza para designar un sitio web, pues podría causar una gran confusión.

En el ejemplo anterior, si dijéramos: "Mi servidor web no responde", significaría

que múltiples sitios web alojados en ese servidor web no están disponibles.

1.9 Arquitectura Cliente - Servidor

La computadora que almacena los archivos y datos de un sitio web se llama
servidor y la computadora que accede a esta información se llama cliente.
LIC. RUBEN CUARITE P á g i n a | 10

Los servidores son computadoras, con hardware y software especiales que

siempre están conectados a la red y ejecutando programas que les permiten
responder a las solicitudes de los usuarios, sin importar cuando se reciben o
de donde proceden.

1.10 Páginas web

Una página web es un documento «con una dirección propia» accesible a través
de internet en la World Wide Web. Las páginas web son entregadas por un
servidor web al usuario y mostradas en un navegador web para que actúe como
«unidad de recuperación» de la información almacenada en su interior. El
nombre «página web» es una metáfora de las páginas de papel encuadernadas
en un libro.

Las páginas web se utilizan para diversos propósitos, como proporcionar

información, promover productos o servicios, compartir contenido multimedia,
interactuar con usuarios, y facilitar la comunicación y colaboración en línea.

Crear una página web puede variar en nivel de complejidad. Hay opciones
sencillas, como los sistemas de gestión de contenido (CMS) que ofrecen
plantillas predefinidas y requieren poco conocimiento técnico. Por otro lado, la
creación de una página web desde cero puede ser más complicada, ya que
requiere habilidades de programación y diseño.

1.11 Sitio web

Un sitio web (website), portal o cibersitio es una colección de páginas web
relacionadas y comunes a un dominio de internet o subdominio en la World
Wide Web dentro de Internet que contienen toda la información que una
persona, empresa, institución quiere difundir a través de internet.

Un sitio web está formado por muchas páginas web enlazadas bajo un nombre
de dominio común.

1.12 Tipos de páginas web

Existen muchos tipos de páginas web dependiendo sobre qué objetivos se
busque alcanzar con ellas y cómo estén estructuradas. Por ejemplo, tenemos
las siguientes:

 Páginas web estáticas: Contienen información que no cambia

frecuentemente y se presenta de manera constante.
 Páginas web dinámicas: Generan contenido en tiempo real y se adaptan
a las interacciones del usuario.
 Páginas web de comercio electrónico: Permiten la compra y venta de
productos o servicios en línea.
 Páginas web de blogs: Publican contenido actualizado regularmente en
forma de artículos o entradas.
LIC. RUBEN CUARITE P á g i n a | 11

 Páginas web de medios de comunicación: Ofrecen noticias, artículos y

contenido multimedia.
 Páginas web de redes sociales: Facilitan la interacción y la conexión entre
personas.
 Páginas web corporativas: Representan a empresas y organizaciones,
proporcionando información sobre ellas y sus actividades.

¿Qué es una página web estática?

Una página web estática se compone de archivos HTML, CSS y archivos de
imágenes que se almacenan en un servidor y se envían al navegador del
usuario tal como se encuentran. Estas páginas son fijas y no cambian a menos
que se realicen modificaciones manuales en el código fuente. Son ideales para
webs con contenido estable y sin necesidad de actualizaciones frecuentes.

¿Qué es una página web dinámica?

Una página web dinámica se genera en tiempo real a partir de una base de
datos y utiliza lenguajes de programación como PHP, Python o JavaScript.
Estas páginas pueden mostrar información personalizada, interactuar con el
usuario y adaptarse a sus acciones. Los contenidos se generan dinámicamente,
permitiendo la actualización automática y el manejo de grandes cantidades de
información.

2. Lenguaje de Etiqueta de Hipertexto

2.1 Introducción HTML
HTML significa lenguaje de marcado de hipertexto (HyperText Markup
Language). HTML es el lenguaje de marcado estándar para crear páginas web.

HTML describe la estructura de una página Web y consta de una serie de

elementos. Estos elementos HTML le dicen al navegador cómo mostrar el
contenido. Los elementos HTML etiquetan piezas de contenido como "este es
un encabezado", "este es un párrafo", "este es un enlace", etc.

HTML 5 es la última versión de HTML. En esta versión encontramos 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 mas diversas
y de gran alcance.

Historia HTML
Desde los primeros días de la World Wide Web, ha habido muchas versiones de HTML:

Año Versión
1989 Tim Berners-Lee inventa www
1991 Tim Berners-Lee inventa HTML
1993 Dave Raggett redacta HTML+
1995 El Grupo de Trabajo HTML define HTML 2.0
1997 Recomendación del W3C: HTML 3.2
1999 Recomendación del W3C: HTML 4.01
LIC. RUBEN CUARITE P á g i n a | 12

2000 Recomendación del W3C: XHTML 1.0

2008 Primer borrador público de WHATWG 2HTML5
2012 WHATWG HTML5 Living Standard
2014 Recomendación del W3C: HTML5
2016 Recomendación candidata del W3C: HTML 5.1
2017 Recomendación del W3C: HTML5.1 2ª Edición
2017 Recomendación del W3C: HTML5.2

Editores HTML
Un simple editor de texto es todo lo que necesita para aprender HTML. Podemos usar el Bloc
de Notas o editores especializados como Visual Studio Code, Sublime Text, Notepad++ entre
otros.

Trabajaremos con VSCode como editor y podemos agregar las siguientes Extensiones:
Autorename Tag, Auto Close Tag, Prettier, Live Server.

La extensión Live Server, nos permite trabajar con un Servidor de Desarrollo.

Estructura de un documento HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

2
El Web Hypertext Application Technology Working Group, o WHATWG, es una
comunidad de personas y empresas interesadas en la evolución de HTML y las
tecnologías conexas. WHATWG fue fundado por integrantes de Apple, la Fundación
Mozilla y Opera Software.
LIC. RUBEN CUARITE P á g i n a | 13

<p>My first paragraph.</p>

</body>
</html>

 <!DOCTYPE html> define que este documento es un documento HTML5

 El elemento <html> es el elemento raíz de una página HTML.
 <head> contiene metainformación sobre la página HTML.
 <title> especifica un título para la página HTML (que se muestra en la barra
de título del navegador o en la pestaña de la página)
 <body> define el cuerpo del documento y es un contenedor de todos los
contenidos visibles, como encabezados, párrafos, imágenes, hipervínculos,
tablas, listas, etc.
 <h1> define un encabezado grande
 <p> define un párrafo.

Definición SEO.
Search Engine Optimization significa optimización en buscadores, no en
navegadores. Son estándares que debemos cumplir para que nuestra página
salga como primera en los buscadores.

Por ejemplo, <h1> se debe poner solo una vez, los demás se pueden repetir.

Elementos HTML
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta final:

Etiqueta de apretura Etiqueta de cierre

<p>Párrafo</p>

Contenido

< h1 > Mi primer encabezado < /h1 >

< p > Mi primer párrafo. < /p >

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

LIC. RUBEN CUARITE P á g i n a | 14

<br> none none

Nota: algunos elementos HTML no tienen contenido (como el elemento

<br>). Estos elementos se denominan elementos vacíos. ¡Los elementos
vacíos no tienen una etiqueta final!

Navegadores web
El propósito de un navegador web (Chrome, Edge, Firefox, Safari) es leer documentos HTML
y mostrarlos correctamente. Un navegador no muestra las etiquetas HTML, pero las usa para
determinar cómo mostrar el documento:

Encabezados HTML. Los encabezados HTML se definen con las

etiquetas <h1> a <h6>.

<h1> define el encabezado más importante. <h6> define el encabezado menos

importante:

Ejemplo
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

No se debe usar un h5 si no se tiene un h4 por ejemplo.

Párrafos HTML
Los párrafos HTML se definen con la etiqueta <p>:

Ejemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
LIC. RUBEN CUARITE P á g i n a | 15

Los párrafos HTML se definen con la etiqueta <p>. Tambien tenemos a <i> y
<strike>

<i> Italica </i>

<strike> tachada</strike>

Saltos de línea HTML

El elemento HTML <br> define un salto de línea.

<p>This is<br>a paragraph<br>with line breaks.</p>

Elementos HTML <b> y <strong>

El elemento <b> define texto en negrita, sin ninguna importancia adicional.

El elemento <strong> define texto con gran importancia. El contenido

interior normalmente se muestra en negrita.

Ejemplo
<strong>This text is important!</strong>

Enlaces HTML
Los enlaces HTML se definen con la etiqueta <a>:

Ejemplo

<a href="https://www.cgsoft.com">This is a link</a>

El destino del enlace se especifica en el atributo href.

La referencia puede ser local o externa:

<a href="https://facebook.com"> Facebook </a>
<a href="html/pagina2.html"> Pagina 2 </a>
<a href="https://www.google.com" target="_BLANK"> Ir a Google </a>

Etiqueta div.
La etiqueta <div> es un contenedor genérico de bloque para otros elementos.
Es «genérico» porque no describe el contenido que contiene.
En segundo lugar, un div es un contenedor de bloque. Para entender lo que
eso significa, comparemos un div con un elemento span, que es un contenedor
en línea.
Hay varias diferencias clave entre un elemento de bloque y un contenedor en
línea. Por ejemplo, un div siempre comienza en su propia línea, mientras que
un span permanece en la misma línea. Un div también ocupa todo el ancho de
la página y un span no. Eso significa que si tienes varios div seguidos,
LIC. RUBEN CUARITE P á g i n a | 16

aparecerán apilados uno encima del otro en el front-end. Los span, por otro
lado, pueden existir uno al lado del otro. La última gran diferencia es que
puedes definir la altura y el ancho de un div, pero no puedes hacerlo para un
span.

En tercer lugar, los elementos que pueden estar contenidos en un div se

conocen más específicamente como «contenido palpable» o «contenido de
flujo». El contenido palpable es básicamente cualquier elemento HTML que
contiene texto o contenido incrustado, y el contenido de flujo es cualquier
elemento utilizado en el cuerpo de los documentos HTML. Por lo tanto, los
elementos de anclaje, cita en bloque, audio, imagen, párrafo y encabezado se
consideran contenido palpable o fluido, y se pueden agregar dentro de un div.
Las etiquetas div deben estar dentro de <body>. La etiqueta <div> puede
ayudar a organizar un archivo HTML en secciones en el back-end, pero eso no
afectará cómo se muestran esas secciones en el front-end. No obstante,
permite diseñar fácilmente estas secciones con CSS.

Secciones
El elemento de HTML <section> representa una sección genérica de un
documento. Sirve para determinar qué contenido corresponde a qué parte de
un esquema. Un esquema es como en el índice de contenido de un libro; un
tema común y subsecciones relacionadas. Es, por lo tanto, una etiqueta
semántica.

Ejemplo

<h1>Deportes</h1>
<section>
<h2>Futbol</h2>
<p>about futbol</p>
</section>

Article
El Elemento de HTML <article> representa una composición auto-contenida
en un documento, una página o en un sitio, que se quiere que sea distribuíble
y/o reutilizable de manera independiente, por ejemplo, en la redifusión.

Ejemplo
<article>
<h2>Noticia de último momento</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore
nisi, blanditiis</p>
</article>

cite
El elemento HTML <cite> inserta una cita o referencia a otros recursos. Es
mayormente utilizado para hacer referencia a otros autores al realizar una cita.
LIC. RUBEN CUARITE P á g i n a | 17

Ejemplo

<article>
<h2>Noticia de ultimo momento</h2>
<p> <cite>El dengue ya tiene su tercera muerte </cite> afirmó el
ministro de salud.</p>
</article>

footer
El Elemento HTML <footer> representa un pie de página para el contenido de
sección más cercano o el elemento raíz de sección.
<footer>Página creada por Ruben Cuarite</footer>

Listas y Tablas
Las listas HTML permiten a los desarrolladores web agrupar un conjunto de
elementos relacionados en listas.

Lista HTML desordenada. Una lista desordenada comienza con la etiqueta

<ul>. Cada elemento de la lista comienza con la etiqueta <li>.

Los elementos de la lista se marcarán con viñetas (pequeños círculos negros)

de forma predeterminada:

Ejemplo
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Lista HTML ordenada

Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista
comienza con la etiqueta <li>.

Los elementos de la lista se marcarán con números de forma predeterminada:

Ejemplo
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Imágenes HTML
Las imágenes HTML se definen con la etiqueta <img>.
LIC. RUBEN CUARITE P á g i n a | 18

El archivo de origen (src), el texto alternativo (alt), width y height se

proporcionan como atributos:
Ejemplo
<img src="cgsoft.jpg" alt="cgsoft.com" width="104" height="142">

Formularios
Se utiliza un formulario HTML para recopilar la entrada del usuario. La entrada
del usuario se envía con mayor frecuencia a un servidor para su procesamiento.

El elemento <form>.
El elemento HTML <form>se utiliza para crear un formulario HTML para la
entrada del usuario. <form> es un contenedor para diferentes tipos de
elementos de entrada, como: campos de texto, casillas de verificación, botones
de opción, botones de envío, etc.

El elemento <input>
Un elemento <input> se puede mostrar de muchas maneras, según
el type atributo.

<input type="" name="">

Tipo Descripción

<input type="text"> Muestra un campo de entrada de texto de una

sola línea

<input type="radio"> Muestra un botón de radio (para seleccionar

una de muchas opciones)

<input Muestra una casilla de verificación (para

type="checkbox"> seleccionar cero o más de muchas opciones)

<input type="submit"> Muestra un botón de envío (para enviar el

formulario)

<input type="button"> Muestra un botón en el que se puede hacer clic

Campos de texto
<input type="text"> define un campo de entrada de una sola línea para la
entrada de texto.

Botones de radio

<input type="radio"> Los botones de opción le permiten al usuario

seleccionar UNA de un número limitado de opciones.
LIC. RUBEN CUARITE P á g i n a | 19

Se debe usar el atributo name para indicar que todos esos inputs radio están
relacionados.

Se puede establecer un radio marcado por defecto con la opción checked.

Un atributo obligatorio es value. Este sirve para indicar al formulario que

valor es lo que contiene cuando se envie el formulario.

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaSc
ript">
<label for="javascript">JavaScript</label>
</form>

Casillas de verificación

<input type="checkbox"> define una casilla de verificación.

Las casillas de verificación permiten al usuario seleccionar CERO o MÁS

opciones de un número limitado de opciones.

Ejemplo

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

Select

El elemento <select> se utiliza para crear una lista desplegable.

El atributo name es necesario para hacer referencia a los datos del formulario
después de enviar el formulario (si omite el name, no se enviará ningún dato
de la lista desplegable).

El atributo id es necesario para asociar la lista desplegable con una etiqueta.

Las etiquetas <option> dentro del elemento <select> definen las opciones
disponibles en la lista desplegable.
LIC. RUBEN CUARITE P á g i n a | 20

Atributos

Atributo Valor Descripcion

autofocus autofocus Especifica que la lista desplegable debe
enfocarse automáticamente cuando se
carga la página.
disabled disabled Especifica que una lista desplegable debe
desactivarse
form form_id Define a qué formulario pertenece la lista
desplegable
multiple multiple Especifica que se pueden seleccionar varias
opciones a la vez.
name name Define un nombre para la lista desplegable.
required required Especifica que el usuario debe seleccionar
un valor antes de enviar el formulario.
size number Define el número de opciones visibles en
una lista desplegable.

Ejemplo

<body>
<form>
<select name="lenguajes" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>

colgroup. Permite agrupar los elementos en grupos.

<form>
<select name="mascotas">
<optgroup label="4 patas">
<option value="perro">Perro</option>
<option value="gato">Gato</option>
</optgroup>
<optgroup label="2 patas">
<option value="loro">Loro</option>
<option value="canario">Canario</option>
</optgroup>
<optgroup label="otros">
<option value="serpiente">Serpiente</option>
<option value="serpiente">Tarantula</option>
</optgroup>
</select>
</form>
LIC. RUBEN CUARITE P á g i n a | 21

Datalist

La etiqueta <datalist> especifica una lista de opciones predefinidas para un

elemento <input>.

La etiqueta <datalist> se utiliza para proporcionar una función de

"autocompletar" para los elementos <input>. Los usuarios verán una lista
desplegable de opciones predefinidas a medida que ingresan datos.

El atributo id debe ser igual al atributo list del elemento <input> (esto los
une).

<body>
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Brave">
<option value="Safari">
</datalist>
</body>
Más elementos para formularios

fieldset. Se utiliza para agrupar elementos relacionados en un formulario.

Dibuja un cuadro alrededor de los elementos relacionados.

La etiqueta <legend> se utiliza para definir un título para <fieldset>.

Atributos

Attribute Value Description

disabled disabled Especifica que un grupo de elementos de
formulario relacionados debe desactivarse.
form form_id Especifica a qué formulario pertenece el
conjunto de campos
name text Especifica un nombre para el fieldset

Legend. Se utiliza para asignar una etiqueta al contenido del fieldset.

File. Este input se utiliza para cargar archivos y enviarlos desde un

formulario.

Meter. Sirve para representar un valor dentro de un rango conocido. No se

usa mucho.
LIC. RUBEN CUARITE P á g i n a | 22

Progress. Sirve para representar el progreso de una tarea. No se usa

mucho.

Textarea. Se utiliza para introducir texto en un formulario.

Ejemplo:

<body>
<form>
<fieldset>
<legend>Datos personales</legend>
<div>
<label for="name">Nombre</label>
<input type="text" id="name">
</div>
<label for="surname">Apellidos</label>
<input type="text" id="surname">
</fieldset>
<input type="file">
<label for="fuel">Combustible</label>
<meter id="fuel" min="0" max="100" value="40" low="30" high="75"
optimum="50"></meter>
<label for="task">Tarea 1</label>
<progress id="task" max="100" value="10"></progress>
<label for="msg">Mensaje</label>
<textarea name="" id="msg" cols="50" rows="5"></textarea>
</form>
</body>

Atributos de los formularios.

Placeholder. Da una pista de lo que el usuario tiene que introducir.

Required. Hace que el campo sea obligatorio (se puede eliminar mediante la
opción Inspecionar en el navegador). Se debe reforzar con otro tipo de
validaciones desde javascript o desde el servidor.

Readonly. Lo que hace es convertir un campo en solo lectura. De igual

manera se puede eliminar desde el Inspector de elementos en el navegador.

Disabled. Desactiva el campo, no se podrá escribir en él.

min – max. Establece el mínimo y el máximo de un campo numérico.

Minlenght - maxlength. Establece el mínimo y máximo de caracteres de un

campo texto.

Selected. Estable una opción por defecto en los campos select. Equivale a
checked en los select.

Autofocus. Para poner el foco al cargar el formulario.

LIC. RUBEN CUARITE P á g i n a | 23

<body>
<form action="">
<input type="text" placeholder="Introduce un nombre" required>
<input type="text" value="Hola" readonly autofocus>
<input type="text" value="Desabilitado" disabled>
<input type="number" min="5" max="10" >
<input type="text" minlength="5" maxlength="10">
<select name="numeros" id="" >
<option value="uno">Uno</option>
<option value="dos" selected>Dos</option>
<option value="tres">Tres</option>
</select>
<input type="submit">
</form>
</body>

Envío GET vs POST.

Cuando un usuario rellena un formulario en una página web los datos hay que
enviarlos de alguna manera. Podemos hacer usando el método POST o el
método GET.

Por ejemplo: <form action="procesa.php" method ="get">

La diferencia entre los métodos get y post radica en la forma de enviar los
datos a la página cuando se pulsa el botón “Enviar”. Mientras que el método
GET envía los datos usando la URL, el método POST los envía de forma que
no podemos verlos (en un segundo plano u "ocultos" al usuario).

El método por defecto es GET.

<body>
<form action="enviar.html" method="get">
<label for="nombre">Nombre</label>
<input type="text" id="name" name="nombre">
<label for="surname">Apellido</label>
<input type="text" id="surname" name="surname">
<input type="submit">
</form>
</body>

El botón Enviar

<input type="submit"> Define un botón para enviar los datos del formulario a
un controlador de formulario.

El controlador de formulario suele ser un archivo en el servidor con un script

para procesar los datos de entrada.
LIC. RUBEN CUARITE P á g i n a | 24

El controlador de formulario se especifica en el atributo action del formulario.

Ejemplo

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Cecilia"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Chavez"><br><br>
<input type="submit" value="Submit">
</form>

atributos input para horas, fechas, meses.

date. Se utiliza para introducir una fecha.

datetime. Se utiliza para introducir una fecha y hora pero que ya está
obsoleto.
datetime-local. Se usa para introducir fecha y hora a la vez, pero que no es
reconocido por firefox.
time. Se utiliza para introducir una hora.
month. Se utiliza para introducir un mes.
week. Se utiliza para introducir el número de semana del año.

Ejemplo:
<body>
<input type="date"> <br>
<input type="datetime"> <br> <!-- ya no se usa -->
<input type="datetime-local"> <br> <!-- no funciona en firefox -->
<!-- Si necesitamos fecha y hora usamos date y time de forma separada -->
<input type="date">
<input type="time"> <br>
<input type="month"> <br>
<input type="week">
</body>

search. Se utiliza para las barras de búsqueda.

tel. Se utiliza para introducir números telefónicos.
email. Se utiliza para introducir un email.
password. Se utiliza para introducir contraseñas.
url. Se utiliza para introducir direcciones URL.

<body>
<div>
<label>telefono
<input type="tel">
</label>
</div>
<div>
<label>email
<input type="email">
</label>
LIC. RUBEN CUARITE P á g i n a | 25

</div>
<div>
<label>password
<input type="password">
</label>
</div>
<div>
<label>URL
<input type="url">
</label>
</div>
</body>

Inputs sin categoría

color. Se utiliza para mostrar una plantilla de colores para elegir un color.
number. Se utiliza para introducir valores numéricos.
range. Muestra una barra para seleccionar un rango. Utiliza los siguientes
atributos:
 step para determinar el incremento de saltos.
 min para establecer el valor mínimo.
 max para establecer el límite superior.
text. Valor por defecto.

<body>
<form action="">
<input type="color">
<input type="number">
<input type="range" step="10" min="0" max="20">
<input type="reset">
<input type="text">
</form>
</body>

Inputs para seleccionar elementos dentro de una lista de opciones.

radio. Permite seleccionar una única opcion

El atributo name para <input>

Cada campo de entrada debe tener un atributo namea para enviarse. Si se
omite el atributo, el valor del campo de entrada no se enviará.

El atributo de acción
El atributo action define la acción que se realizará cuando se envíe el
formulario.

Por lo general, los datos del formulario se envían a un archivo en el servidor

cuando el usuario hace clic en el botón Enviar.
LIC. RUBEN CUARITE P á g i n a | 26

En el siguiente ejemplo, los datos del formulario se envían a un archivo llamado

"action_page.php". Este archivo contiene un script del lado del servidor que
maneja los datos del formulario:

El botón <input type=”submit”> permite enviar la información al script

especificado en el atributo action del form.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento de pruebas</title>
</head>
<body>
<h1>FORMULARIOS</h1>

<!-- formularios -->

<br>
<form action="archivo.php">
<div>
<label for="nombre">NOMBRE</label>
<input type="text" name="nombre" id="nombre">
</div>
<br>
<div>
<label for="apellidos">APELLIDOS</label>
<input type="text" name="apellidos" placeholder="Apellidos"
id="apellidos">
</div>
<br>
<div>
<label for="telefono">TELEFONO</label>
<input type="number" name="telefono" maxlength="8" id="telefono">
</div>
<div>
<label for="contras">CONTRASEÑA</label>
<input type="password" name="contras" maxlength="10" id="contras">
</div>
<div>
<label for="genero">GENERO</label>
<br>
<input type="radio" name="genero">HOMBRE
<input type="radio" name="genero">MUJER
</div>
<div>
<label for="mensaje">MENSAJE</label>
LIC. RUBEN CUARITE P á g i n a | 27

<textarea name="mensaje" id="mensaje" cols="50"

rows="4"></textarea>
</div>
<div>
<label for="edad">EDAD</label>
<input type="number" name="edad" id="edad">
</div>
<div>
<label for="fecnac">FECHA DE NACIMIENTO</label>
<input type="date">
</div>
<br>
<div>
<label for="">SELECCIONAR MATERIA</label>
<select name="selecmat">
<option value="MATEMATICAS">MATEMATICAS</option>
<option value="PROGRAMACION">PROGRAMACION</option>
<option value="REDES">REDES</option>
<option value="HARDWARE">HARDWARE</option>
<option value="ESTADISTICA">ESTADISTICA</option>
</select>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>

Métodos: Get y Post

Metadatos: Es información sobre datos.