TEMA 2.

INTRODUCCIÓN A HTML
Lenguaje de marcas
Liceo “La Paz”
Mónica Pérez
INTRODUCCIÓN
HTML (HyperText Markup Language) o Lenguaje de Marcas de Hipertexto, es un
lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet o webs. No se trata de
un lenguaje de programación, ya que no permite hacer operaciones entre diferentes datos.
HTML es un lenguaje interpretado, pero no compilado, el navegador es el intérprete que analiza
las diferentes etiquetas para saber cómo mostrar la web.
Desde 1998, cuando la W3C creó HTML 4.0, hasta 2014, año en el que llegó HTML 5, no hubo
ninguna evolución importante. Se trata de un largo período si lo comparamos con los avances que
se suelen dar en el ámbito de la informática, un ejemplo puede ser el desarrollo de la Web o Inter-
net.

Antes de HTML los documentos se limitaban a texto plano, pero con HTML surge el hipertexto,
hoy en día muy conocido, pero en su momento fue toda una revolución.
“El hipertexto es una estructura no secuencial que permite crear, agregar, enlazar y compartir in-
formación de diversas fuentes por medio de enlaces asociativos y redes sociales. El hipertexto es
texto que contiene enlaces a otros textos. El término fue acuñado por Ted Nelson alrededor de
19651”.
En esta unidad asentaremos las bases para crear aplicaciones web, se trata de aplicaciones
creadas usando como base el lenguaje HTML. Por lo tanto, estas aplicaciones se ejecutarán en un
navegador de Internet.

1
https://es.wikipedia.org/wiki/Hipertexto

2
 HTML 5 permite crear webs dinámicas, pero a la hora de crear una web se utilizan otros len-
guajes que lo complementan. Con HTML5 podemos dar estructura a los documentos, pero se com-
plementa con CSS para dotarlos de estilo, es decir, les da formato, los maqueta y hace uso de Ja-
vaScript para añadir funcionalidades más avanzadas, como dotar a nuestra web de características
interactivas, por ejemplo, conseguir que un botón responda con una acción concreta o que cuando
un usuario pase el ratón por encima de una imagen esta se ilumine.

CONCEPTOS BÁSICOS
A continuación, veremos de una forma breve algunos conceptos básicos que utilizaremos de
forma recurrente y que están ligados al lenguaje HTML y al desarrollo web.
• Protocolo HTTP (Hypertext Transfer Protocol), se trata de un protocolo para la transferencia
de datos entre servidor y cliente, se basa en una comunicación petición-respuesta, de tal
manera que el cliente lanza una petición sobre un recurso, indicando su dirección, al servidor
HTTP, o servidor web, el servidor se encarga de facilitarle el recurso si este está disponible o
de enviarle un mensaje de error en caso contrario.
• Front-end y back-end
El front-end son todas aquellas tecnologías que corren del lado del cliente, el navegador web.
Podemos generalizarlo en tres lenguajes: HTML, CSS y JavaScript. Es la parte que verá el usuario.
El back-end se refiere al lado del servidor, es decir, en donde se utilizan lenguajes de programa-
ción como PHP, Python, .Net, Java, Node.js, etc. Esta parte se encarga de interactuar con bases de
datos, verificar manejo de sesiones de usuarios, montar la página en un servidor, y desde éste “ser-
vir” todas las vistas que el FrontEnd crea, es decir, principalmente, esta parte se encarga de la ma-
nipulación de datos y que permanece siempre oculta al usuario.
HTML es un lenguaje basado en etiquetas, pero ¿qué son las etiquetas?
• Las etiquetas, o elementos, son comandos que los navegadores pueden interpretar y que se
escriben entre los signos “<” y “>”.
Cada una de las etiquetas de apertura que utilicemos necesitará una etiqueta de cierre para
indicar el final del comando. En concreto, las etiquetas de cierre añaden una barra “/”, es decir, la
sintaxis sería la siguiente: <etiqueta>... </etiqueta>
Ejemplos:

Hay algunas etiquetas, como por ejemplo las que encierran una imagen, que se conocen
como etiquetas vacías, ya que solamente contienen atributos, por lo cual no siguen la norma ante-
rior y su sintaxis sería la siguiente:
<etiqueta atributo1= “valor” atributo2= “valor2” … >

3
Ejemplo:

También existe la etiqueta <br/> que indica un salto de línea y que por tanto es una etiqueta
especial y vacía que tampoco sigue las normas anteriores.
• Atributos de etiqueta, son propiedades de cada elemento a las que podemos asignar un
valor, de modo que dicho valor varía el comportamiento del elemento, se utilizan cuando
hay que completar la información que da una etiqueta con especificaciones más precisas.
La sintaxis es la siguiente:
<etiqueta: atributo= “valor”>...</etiqueta>

• Reglas para el uso de etiquetas:

1. No son sensibles a mayúsculas y minúsculas.
2. Toda etiqueta abierta debe de cerrarse.
3. Las etiquetas deben enlazarse correctamente. Es vital seguir el orden de cierre correcto, la
primera etiqueta de apertura debe de corresponderse con la última etiqueta de cierre.

4. Los valores de los atributos deben de ir siempre entre comillas.

En HTML tenemos elementos de bloque (como por ejemplo <p></p>) y elementos de línea
(como por ejemplo <span></span>), un elemento de bloque, visualmente, reserva todo el espacio
disponible en pantalla y el siguiente elemento de bloque se mostrará a continuación. Por su parte
los elementos de línea se mostrarán uno a continuación del otro. Los elementos de línea van a tener
que estar siempre dentro de un elemento de bloque.
Ya hemos visto algunos conceptos básicos y ahora comenzaremos a trabajar con las diferentes
herramientas que nos permitirán crear la estructura de una web. Tened en cuenta que las etiquetas

4
cuentan con diferentes atributos y no siempre os los voy a mencionar todos, solo aquellos más co-
munes, pero podéis consultarlos en el estándar .
Recordad siempre que HTML es un lenguaje para crear la estructura de una web, no para dar
estilo. Además, es un lenguaje de marcado con significado, todas las etiquetas que estudiaremos,
salvo dos, proporcionan información.

ESTRUCTURA DE UN DOCUMENTO BÁSICO EN HTML

Todo documento HTML empieza por un doctype, ¡en el caso de HTML 5 <!Doctype html>, si
no indicamos el doctype el navegador no sabe según qué reglas tiene que procesar la página, por lo
que se acoge a reglas genéricas para renderizarla, lo que implica que puede haber diferencias en
cuanto a la visualización según el navegador que se utilice.
La etiqueta <html> marca el principio y el final del documento HTML. A esta etiqueta se le
añade el atributo lang para indicar el lenguaje que se va a utilizar, esta información tiene especial
valor para los buscadores, como por ejemplo Google y para los programas de síntesis de voz usados
por personas con dificultades visuales. Los documentos HTML suelen tener un único elemento raíz
de todo el documento, el elemento <html>.
La etiqueta <head> o cabecera, contiene los encabezados del documento, que proporcionan
información que el navegador debe tener en cuenta para el contenido del documento aparezca de
forma correcta y también contiene elementos que proporcionan información a los buscadores,
como llamadas a las hojas de estilo CSS. En <head> tendremos metadatos, es decir, información que
le damos al navegador, como una descripción para Google o el lenguaje de la web, son datos que el
navegador no mostrará.
• <meta>: sirven para indicar aspectos de funcionamiento de la página web como, cabeceras
del protocolo http, indicaciones sobre cada cuánto caduca la página, palabras clave para
buscar la página en los navegadores, codificación de caracteres de la página, … Para comen-
zar usaremos la etiqueta meta obligatoria que indica que estamos codificando el texto
usando el formato utf-8 de Unicode. Desde 2011 la W3C recomienda el uso de utf-8 para la
edición de páginas web debido a su universalidad, ya que permite representar los caracteres
de los diferentes idiomas y permite crear sitios web multilingües.
Podemos tener varias etiquetas <meta>, como veremos en capítulos posteriores.
• <title>: es una etiqueta obligatoria, indica el título de la página, los navegadores suelen co-
locarlo en la barra de título de la ventana en la que se muestra la página.
• También se pueden incluir declaración de archivos externos y scripts.
La etiqueta <body> define el cuerpo documento, es decir, es dónde se sitúa el contenido de la
página. En esta sección irá toda la parte que va a mostrar el navegador.
Si queremos añadir algún comentario para clarificar el código
<!-- insertar comentario -->. Se pueden situar tanto en <head> …
</head> o en <body> … </body>

5
 Estructura básica código HTML 5

Diagrama de bloques de la estructura básica de una página web.

Los elementos de encabezado permiten especificar que ciertas partes del contenido son de tí-
tulos de sección. De la misma forma que un libro tiene un título principal, y que a su vez puede tener
títulos por cada capítulo individual, y subtítulos dentro de ellos, un documento HTML puede tener-
los también. HTML posee seis niveles de encabezados, <h1>- <h6>.
OJO: los encabezados marcan secciones, no son etiquetas para poner negrita ni de estilo.

6
Veamos un ejemplo:

HTML elementos encabezado.

Visualización de los elementos de encabezado en el navegador

NOTA:

7
 Por otra parte, los elementos <p> se utilizan para encerrar párrafos de texto, se suelen utili-
zar para el marcado de contenido de texto regular:

HTML elementos <p>.

Visualización de los párrafos en el navegador.

Podemos observar que, aunque en el documento HTML damos algo de formato a los párra-
fos, incluyendo saltos de línea, el navegador no los tiene en cuenta cuando procesa el código para

8
mostrar la web. Muy pronto veremos qué etiqueta tendremos que utilizar para solucionar este
punto.

ENTIDADES HTML
Algunos de los caracteres que se utilizan habitualmente en los textos no se pueden incluir
directamente en las páginas web, utilizaremos entonces unas expresiones llamadas entidades HTML
y que representan a cada carácter

Entidad HTML Carácter

&lt; < Less than (signo menor que)

&gt; > More than (signno mayor que)

&amp; & Ampersand

&quot; " Quotation mark (comillas)

&nbsp; Non-breaking space (espacio en blanco)

&apos; 'Apostrophe (apóstrofre)

A veces podéis encontraros con otras entidades, por ejemplo, para poner acentos la “é” sería
&eacute;
Podéis consultar el resto de las entidades en la lista oficial:
https://html.spec.whatwg.org/multipage/named-characters.html#named

9
ETIQUETAS ESTILO DE FUENTES ENTIDADES HTML

OTRAS ETIQUETAS
<pre>texto</pre> mantiene los espacios tal y como estén. Si no se usa esta etiqueta solo se cuenta
el primer espacio. Es aconsejable usar <p> cuando tenemos párrafos diferentes, pero si van a tratar
sobre el mismo contenido, podemos aplicar esta etiqueta.
<br> introduce un salto de línea.
<hr> se representa un cambio de tema entre párrafos mediante una línea de división. Aunque se
representa como una línea, su principal objetivo es aportar información semántica. No puede ser
un contenedor.
<wbr> para indicar que, si no hay espacio suficiente en la pantalla, en el punto en el que pongas la
etiqueta, se pase a la siguiente línea. Por ejemplo, para palabras muy largas.
<nobr> frase </nobr> crea una línea larga, sin saltos.
<blockquote> cita </ blockquote>: crea citas en bloque, marca las citas a otros autores o documen-
tos. Se puede usar para destacar algún fragmento de nuestro propio contenido.
<time></time> para indicar fechas u horas, se utiliza solamente si este dato es muy importante.
<abbr title="acrónimo"> SIGLAS</abbr>: inserta acrónimos.

ENLACES
Para insertar un enlace, la etiqueta que vamos a usar es: <a>, que necesita un atributo,
href, que indica la página a la que debería llevar el enlace.
<a href="https://www.w3schools.com/html/"> Tutorial HTML</a>
Los enlaces pueden llevarnos a otra página web, para lo que simplemente tendremos que
copiar la url de la misma.

10
 Si queremos referenciar un elemento dentro de nuestra web, tendremos que usar el atributo
id.
De esta manera asignaremos un identificador al objeto que queremos referenciar:

Para después utilizarlo a través de atributo href, en donde debemos, siempre, usar la # antes de
poner el identificador.

El atributo target nos permite indicar como se muestra la página de destino y cuenta con algunos
valores especiales:
• _blank fuerza que el documento referenciado por el enlace sea mostrado en una nueva
ventana del navegador.
• _parent abre el enlace en el marco de la página padre de ella.
• _top abre la página en el marco superior.
• _self abre la página en el marco actual.
• Nombre: el nombre indicado será el del marco en el que se abrirá la página
Además, podéis utilizar el atributo title que muestra una descripción emergente cuando se coloca
el curso sobre el enlace.

IMÁGENES
<IMG>
Para incluir imágenes en el contenido de una página utilizamos la etiqueta <img>, que
tiene de varios atributos para modificar como se verá la imagen:

• Src → indica el nombre o la URL de la imagen a mostrar, es decir, indica la ubicación en la

que quieres insertar la imagen. Puedes incluir una ruta absoluta (http://www.liceola-
paz.com/logo.png) o una ruta relativa (que es lo que suele hacerse). Así que, si la imagen
está en la subcarpeta imágenes, tienes que introducir: src="imagenes/logor.png".

• Alt → establece un texto alternativo para mostrar en el caso que la imagen no se pueda
mostrar (obligatorio).

• Width y height → indican el ancho y alto de la imagen respectivamente, también se puede

utilizar style.
Ejemplos:

IMAGEN CON UN ENLACE

Para agregar un enlace a una imagen tenemos incluir la imagen dentro de la etiqueta <a>.
11
PICTURE
Permite mostrar imágenes de una forma flexible, proporcionando, por ejemplo, diferentes
formatos o tamaños para que se adecuen al navegador. La etiqueta <picture> se complementa con
<source> para proporcionar los diferentes criterios. Algunos de sus atributos son:
• Srcset → Serie de imágenes que se utilizarán.
• Sizes → Tamaño específico de la imagen que finalmente se mostrará.
• Media→ Condición que se debe cumplir para que muestre la imagen.
• Type → Tipo de formato de imagen.
Ejemplo:

MAPAS DE IMAGEN
Se trata de una técnica que permite dividir en trozos a una imagen, de modo que podre-
mos asignar un enlace a cada trozo, es decir, nos permite localizar e identificar zonas en imágenes,
ya sea con textos, links u otros elementos.
Las zonas o regiones que se pueden definir en una imagen se crean mediante rectángulos, círculos
y polígonos. Para crear un mapa de imagen, en primer lugar, se inserta la imagen original me-
diante la etiqueta <img>. A continuación, se utiliza la etiqueta <map> para definir las zonas o re-
giones de la imagen. Cada zona se define mediante la etiqueta <area>, que cuenta con los siguien-
tes atributos.
• Href → url a la que se accede al pinchar sobre el área.
• Nohref → se emplea para las áreas que no son seleccionables.
• Shape → indica el tipo de área que se define: toda la imagen, rectangular, circular o poligo-
nal (default | rect | circle | poly).
• Coords → lista de números separados por comas que representan las coordenadas del
área. Rectangular = X1,Y1,X2,Y2 (coordenadas X e Y del vértice superior izquierdo y coorde-
nadas X e Y del vértice inferior derecho). Circular = X1,Y1,R (coordenadas X e Y del centro y
radio del círculo). Poligonal = X1,Y1,X2,Y2,...,XnYn (coordenadas de los vértices del polí-
gono. Si las últimas coordenadas no son iguales que las primeras, se cierra automática-
mente el polígono uniendo ambos vértices)

12
 Para obtener las coordenadas se puede utilizar cualquier software de edición de imagen, como
GIMP o Paint.
Ejemplo:

FORMATOS:
• Formatos que admite HTML5
PNG, JPG, SVG, GIF, WEBP, JPEG2000, JPEG-XR y APNG.
• Formatos que No admite HTML5
BMP, TIFF, RAW, NEF, PSD, CDR …

LISTAS
Para definir una lista utilizamos las siguientes etiquetas:
• <ol>lista</ol>: Lista ordenada (con numeración).
• <ul>lista</ul>: Lista con puntos.
Las etiquetas <ol></ol> y <ul></ul> se utilizan como etiquetas contenedoras de los elementos
de la lista, dentro de las cuales tendremos que utilizar la etiqueta <li></li> para ir añadiendo cada
uno de los items o elementos de la misma.
Ejemplos:

13
 Dentro de las etiquetas <li> a su vez podemos usar otras etiquetas, como por ejemplo poner
negritas, cursivas, encabezados, o cualquier otra cosa. Por lo tanto, ya que podemos poner cualquier
otra etiqueta, también podremos poner otras listas, lo que nos permitirá hacer listas anidadas. Ade-
más podemos decidir que estilo de lista queremos con el atributo type:

Listas de definiciones: sirven para especificar una secuencia de términos para los cuales propor-
cionamos una definición.

TABLAS
Cada tabla se crea mediante la etiqueta <table> </table>. Esta es la etiqueta que define el
comienzo y final de una tabla. Es una etiqueta de bloque, así que tendrá que situarse fuera de un
párrafo.
Podemos crear una fila de encabezado mediante la etiqueta <tr>, las celdas que contiene
estarán enmarcadas por etiquetas <th></th>.
Para crear la tabla utilizaremos las siguientes etiquetas:

• <tr> </tr>: define el comienzo y el final de una fila de la tabla.

• <td> </td>: define el comienzo y el final del contenido de una celda.

También podemos incluir un pie de tabla (al final) que se define con las etiquetas
<tfoot></tfoot>.

14
 Finalmente, si queremos poner un título a nuestra tabla contamos con el elemento <cap-
tion>Título de la tabla</caption>.
Si la tabla es bastante grande, lo mejor es dividirla en varias partes. Para esto, las etiquetas
HTML se utilizan para definir los tres «campos» de la tabla:
• El encabezado (al principio): se define con las etiquetas <thead></thead>.
• El cuerpo (en el centro): se define con las etiquetas <tbody></tbody>.
• El pie de tabla (al final): se define con las etiquetas <tfoot></tfoot>.

Recordad que se trata de un elemento para estructurar la información, utilizad las tablas
solo para esto, no como elemento decorativo o para dar estilo.

Para clarificar el uso de estas etiquetas, veamos un ejemplo:

En el siguiente ejemplo repetiremos en el pie de página los mismos datos que en el enca-
bezado, lo cual puede resultar muy útil para tablas grandes.

15
 En estos ejemplos usamos border= "1" para que podáis ver la tabla, pero esto no debéis
de hacer esto, el estilo se lo daremos en CSS, lo utilizo solamente para que os sea más sencillo ver
cómo es la tabla.
Si queremos agrupar celdas lo que utilizamos es el atributo colspan="número de columnas
que vamos a agrupar".
Por otro lado, si lo que queremos es agrupar filas lo que utilizamos es el atributo rowspan=
"número de filas que vamos a agrupar".
Veremos diferentes ejemplos en clase.

ESTRUCTURAS
Para conseguir que nuestra web tenga una estructura más compleja, con diferentes seccio-
nes, por ejemplo, vamos a utilizar diferentes etiquetas que analizaremos en este apartado y proba-
remos con los ejemplos en clase.
Para agrupar los elementos que forman cada zona o división de la página, en HTML4 se utilizaba la
etiqueta <div></div>, aunque esta sigue siendo útil en ocasiones, HTML5 incorpora varios elemen-
tos que estudiaremos a continuación y que nos ayudarán a crear una estructura coherente en nues-
tra web.

16
ETIQUETAS ESTRUCTURALES
• <header></header> se utiliza para indicar cual es la cabecera o encabezado de un artículo o
sección.
• <main> define el contenido principal del documento. Solamente existe un elemento <main>
en el documento.
• <nav></nav> define una sección que solamente contiene enlaces de navegación, es una ba-
rra de navegación.
• <article></article> es una unidad de contenido único, sobre un tema específico. Se trata de
un apartado individual. Por ejemplo, un artículo en un blog o un tutorial, usarían esta eti-
queta, pero los comentarios sobre estos, no lo harían.
• La etiqueta <section></section> permite marcar contenido de una página relacionado con
un tema concreto, son las divisiones de cualquier parte de la página. Por ejemplo, si tenemos
un blog en el que queremos publicar un artículo de cómo construir un mueble, podríamos
tener una sección con materiales, otra con cómo cortar la madera, otra sobre cómo ensam-
blarla, etc.
• <aside></aside> se usa para definir contenido que no está relacionado con el contenido de
la web directamente, se usa, por ejemplo, para poner una sección con publicidad.
• <footer></footer> permite definir un pie de página (derechos de autor, fecha, etc).
El elemento <div>, que es un elemento de bloque, sigue utilizándose hoy en día, se trata de un
contenedor que no tiene ningún significado en HTML, lo podemos utilizar siempre que lo necesite-
mos. Para saber cuándo usarlo lo único que debemos de hacer es si el contenido que queremos
poner encaja en otro elemento, si es así, utilizaremos dicho elemento, pero si no, utilizaremos <div>.
El equivalente a <div> en elemento de línea sería <span></span>, que es un contenedor sin signifi-
cado, pero para texto, lo podríamos utilizar para contener un texto al que luego con CSS daremos
otro color.
También debéis de conocer el elemento <hr>, gráficamente representa una línea horizontal,
pero además nos sirve para dividir el contenido en secciones.

ELEMENTOS DE BLOQUE
Los elementos del bloque forman un conjunto muy heterogéneo, ya que sus características
en común que están relacionadas con el espacio que ocupan y se distribución en la página.
Los elementos de bloque permiten, entre otras cosas, estructurar la página, un ejemplo lo
podemos ver en la siguiente imagen:

17
 Cada contenedor, desde el más general hasta el más específico, es un elemento de bloque.
La mayoría de los elementos de bloque no tienen una representación gráfica característica parti-
cular, la diferencia es semántica ya que dan indicaciones de su contenido para poder realizar un
proceso automático más sencillo y eficaz.
Elementos de bloque: https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements

ELEMENTOS DE LÍNEA
Los elementos de línea siempre habrá entre los elementos anterior y posterior sin introdu-
cir saltos de línea, generando continuidad y ocupando sobre el espacio necesario para mostrar su
contenido.
Enlaces abreviaturas en marca son algunos ejemplos de elementos de línea con comporta-
mientos, significados o estilos concretos. otros elementos de línea como el span, son simples deli-
mitadores que posibilitan la aplicación de estilos mediante CSS sin necesidad de añadir otros ele-
mentos de forma innecesaria.
Elementos de línea: https://developer.mozilla.org/es/docs/Web/HTML/Inline_elements

IFRAME
Este elemento nos permite incrustar una web o elemento, dentro de otra.

18
FAVICON
Un favicon es la pequeña imagen que se muestra en la pestaña del navegador o en la lista
de marcadores (favoritos), puede ser un archivo PNG o GIF(formatos estándar), ICO o JPG. En la
barra de dirección, el tamaño del favicon es bastante reducido, 16x16 píxeles, pero en otros lugares
como los marcadores puede tener un tamaño mayor (24x24, 32x32, 48x48 o 64x64). La imagen del
favicon, según el estándar, se sitúa al mismo nivel que index.html.

<link rel="icon" type="image/png" href="imagen.png">

Es importante recordar que el favicon irá siempre en <head></head> y que, muchas veces
es necesario incluir varias imágenes con diferentes características según los navegadores.

Dependiendo del formato, el atributo type cambia:

• PNG: image/png.
• GIF: image/gif.
• JPEG (JPG/JPEG): image/jpeg.

Si tienes un favicon que no está en un formato de imagen estándar, el atributo rel también
cambia:

Dado que Internet Explorer no soporta imágenes en los formatos estándar, hay que utilizar una
imagen en formato ICO de dimensiones de 16x16 píxeles

MULTIMEDIA
AUDIO
Con la siguiente estructura tu página mostrará el típico reproductor de audio con un botón
de play, barra de progreso, control de volumen, etc.

En el atributo type es necesario especificar el tipo de formato de audio utilizado.

Por supuesto, podremos insertar el audio en diferentes formatos.

VIDEO
Para insertar un vídeo el código es muy similar al del audio.

19
 Es importante ser conscientes de que no existe un formato de video estándar. Lo mejor es
proveer, mínimo dos formatos: OGG y MP4. Los formatos OGG y MP4 son contenedores de video y
audio.

Algunos de los atributos de la etiqueta vídeo:

• Autoplay: el navegador comenzará a reproducir el video automáticamente tan pronto como
pueda.
• Loop: el navegador comenzará a reproducir el video nuevamente cuando llega al final.

También es posible insertar vídeos de YouTube (desde la misma plataforma podéis conseguir el
código de inserción) u otros elementos multimedia.

FORMULARIOS
Los formularios permiten que usuario envíe datos que recibe un servidor y son procesados
por el mismo, estos datos se tratan en el backend.
HTML nos permite crear la estructura de un formulario y de validar, de forma bastante débil,
los datos que son introducidos.
Cuando queremos insertar un formulario en nuestra página HTML, utilizaremos la etiqueta <form>
</form>. Esta es la etiqueta principal de los formularios, y especifica su comienzo y su fin.
Ten en cuenta que tienes que introducir etiquetas de bloque (como <p></p>) dentro del formulario
si quieres incluir texto en él.
En los formularios contamos con el campo input, los inputs son campos que debe rellenar el
usuario. Hay muchos tipos de input: correo, nombre, teléfono… Estos datos deben de ser validados
en el backend.
El input más común es type=“text”: campo de texto. Si no se indica, es el campo por defecto.
Es necesario darle un título a cada campo, para lo que usaremos <label for= “”></label>. El
atributo for conecta el label con el campo al cual corresponde.
Si incluimos el input dentro de label no necesitaríamos for ni id.
En definitiva, la etiqueta label sirve para relacionar campos (inputs) con sus textos. Es decir,
si tenemos 2 campos necesitaremos identificarlos para que el cliente sepa que meter en cada uno
de ellos.

20
 Todos los campos de los formularios deben tener un atributo name, que es el identificador
único de este campo.
Los inputs son en línea, para solucionar esto podemos utilizar <br>, pero la mejor opción es
hacer uso del contenedor <div>.
Si se quiere añadir un botón utilizaremos la etiqueta <button></button>. Aunque lo más
habitual para enviar la información es utilizar <input type= “submit”>.

El atributo value es el dato que introducimos, normalmente está vacío, aunque en algunos
casos podemos darle un valor predeterminado. Hay que tener en cuenta que guarda los datos que
se introducen.

Algunos tipos de input son:

• <input type="text">
• <input type="submit">
• <input type="email">
• <input type="password">
• <input type="number">
• <input type="url">
• <input type="date">
• <input type="time">
• <input type="month">
• <input type="week">
• <input type="range">
• <input type="tel">
Si queremos que el usuario pueda elegir entre varias opciones tenemos
• select
• radio
Si el campo de texto no es suficiente, es posible utilizar:
• textarea
Hay algunos atributos relacionados con el bakend:
• action: establece que página se carga una vez enviado un formulario, se trata de una parte
referida al bakend.
• method: Es la forma en la que se envían los datos recogidos en el formulario). La recogida
de la información se hace mediante programación sea con: PHP, ASP, Javascript, etc.
Los formularios cuentan con muchos más atributos y elementos que podéis consultar en el están-
dar de la W3C.
Principales valores para type en la etiqueta input: https://developer.mozilla.org/es/docs/Web/HTML/Ele-
ment/input
21
Veamos algunos ejemplos:

22
23
BIBLIOGRAFÍA.
• Gauchat, Juan Diego. El gran libro de HTML5, CSS3 y Javascript.

• Moreno,J y González,S. (2018).Lenguajes de marcas y sistemas de gestión de información.

Ed Síntesis.

• Paniagua Martín, Fernando.(2021). Lenguajes de marcas y sistemas de gestión de informa-

ción. Ed Paraninfo.

• https://www.w3c.es/

• https://www.w3schools.com/
• https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

24