Scribd
Cargar
0 vistas26 páginas

Bases HTML

El documento proporciona una introducción al HTML, explicando su función como lenguaje de marcado para estructurar contenido en páginas web. Se detallan las etiquetas básicas, su uso y la importancia de la semántica en HTML5 para mejorar la accesibilidad y la comprensión del contenido. Además, se abordan elementos como listas, tablas, enlaces, imágenes y la estructura semántica recomendada para un código más limpio y ordenado.

Cargado por

Ilus Tarrbaecha
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
0 vistas26 páginas

Bases HTML

El documento proporciona una introducción al HTML, explicando su función como lenguaje de marcado para estructurar contenido en páginas web. Se detallan las etiquetas básicas, su uso y la importancia de la semántica en HTML5 para mejorar la accesibilidad y la comprensión del contenido. Además, se abordan elementos como listas, tablas, enlaces, imágenes y la estructura semántica recomendada para un código más limpio y ordenado.

Cargado por

Ilus Tarrbaecha
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

HTML

HyperText Markup Language → Lenguaje de marcado de hipertexto


No es un lenguaje de programación. Es un lenguaje de marcado → sirve para
darle estructura y significado al contenido.
El HTML define la estructura de la página web, esqueleto puro. Luego con
CSS (más adelante) se le da el diseño.
Se puede escribir HTML en un simple editor de texto cualquiera, como el
bloc de notas. Se guarda con la extensión .html y se puede abrir en el
explorador. Así se sencillo.

Declaración de tipo de documento


El doctype o declaración de tipo de documento se coloca siempre al inicio
e indica con qué versión de html se está trabajando. Es importante
colocarlo. Entonces lo que colocaremos al inicio es:

<!DOCTYPE html>

Etiquetas
<html> </html> esto sirve para abrir y cerrar las líneas de código, es
considerado como el elemento raíz ya que aquí dentro irá en sí el código.
Esto se debe colocar en cualquier documento de html para indicar donde
comienza y termina el código html. Aquí se le puede agregar el atributo
“Lang” para definir el idioma del sitio, aunque al parecer no hace falta,
quedaría: <html lang = “es”>

<head> </head> este se debe colocar después de la apertura del código con
<html> y antes del <body>. En esta parte se agrega información adicional
como el título del documento HTML y algunos otros metadatos que no se
suelen mostrar en el navegador (excepto el title, que se muestra en la
pestaña abierta.

<meta charset = “utf-8”> se agrega dentro del head y antes del title, y define
la codificación usada en el documento, por ejemplo para poder mostrar
acentos y demás. Se recomienda SIEMPRE incluirlo.

<title>texto</title> debe ir dentro de <head> y señala el título del documento


en sí. Esto aparece en la pestaña del browser y además es el nombre que se
agregaría si se añade a favoritos la página.

<body> </body> aquí dentro se debe colocar toda la información que se


mostrará en sí en la página. De ahí que sea el “cuerpo” del documento.

<h1>Texto</h1> Esto es para colocar encabezados o títulos, se pueden colocar


en el body. H1 es el más grande y H6 el más pequeño. Solo hay entre H1 y
H6. Puede usarse para poner un título, un subtítulo y un subtema etc.
<p>Texto</p> Con esto se escribe un párrafo. Vale la pena colocarlo para que
tenga orden el body. Por defecto viene alineado hacia la izquierda. Si se
pone dos párrafos por ejemplo, deja un espacio como si fuera un <br> doble.

<br> Se puede colocar después de cualquier texto para saltar la línea (como
un enter). No se tiene que cerrar. Entonces puede estar dentro de
cualquier texto así tal cual.

<hr> Dibuja una línea horizontal que separa secciones.


<!-- --> Esto sirve para insertar un comentario. Este se tiene que abrir y
cerrar así que puede ocupar varias líneas. <!-- Esto es un comentario -->

<!--
Este es un comentario
que ocupa varias líneas
y explica una sección completa
-->

Enlaces y vínculos
<a></a> Viene de “anchor” y es un elemento que define un hipervínculo/enlace
el cual puede ser a otra página diferente, a otra página de nuestro mismo
sitio, a un elemento de la misma página (como un salto) o a contenido
descargable. Va de la mano con el atributo href (HyperText reference) que
sirve para especificar el destino del enlace, así que se usan juntos.

<a href="[Link]">Mensaje a desplegar</a>


<a href="[Link] a Google</a>
Aquí podemos poner el nombre de otra página que tengamos con la
terminación .html en vez de poner el enlace, y se vincula con otra página
de nuestro sitio. Por ejemplo, si en tu carpeta tienes un archivo llamado
[Link]:

<a href="[Link]">Ir a la página 2</a>


El atributo target le dice al navegador dónde abrir el enlace. Se usa
mucho: target="_blank" (abre el enlace en una ventana pestaña)

<a href=”[Link]” target = “_blank”>Mensaje a desplegar</a>

Imágenes
<img> Sirve para mostrar una imagen en la página web. La imagen NO se
"inserta" dentro del código: el navegador la carga desde un archivo o
desde internet. Es una etiqueta auto-contenida (no tiene etiqueta de
cierre).
<img src="URL o ruta del archivo" alt="Texto alternativo">
En src colocamos la ruta de la imagen si la cargamos desde una carpeta
local o bien el URL de la imagen. alt es el texto alternativo que se
muestra si la imagen no carga.

<img src="[Link]" alt="Un lindo gatito">


En este ejemplo, el navegador mostrará la imagen [Link] si está en la
misma carpeta que el HTML.

<img src="[Link]" alt="Mi foto">


<img src="imagenes/[Link]" alt="Logo del sitio">
La ruta debe ser correcta. Si está en la misma carpeta, pones solo el
nombre del archivo como en el ejemplo anterior [Link]. Si la imagen
está en una subcarpeta (por ejemplo, en imagenes/) pones como en el
ejemplo anterior.

<img src="[Link] alt="Imagen de ejemplo">


En este ejemplo, el navegador mostrará la imagen cargada desde Internet.

<img src="[Link]" alt="Mi foto" width="300">


Puedes controlar el tamaño con atributos width (ancho) y height (alto), en
píxeles o en porcentaje. En el ejemplo anterior la imagen tendrá 300
píxeles de ancho y la altura será proporcional (no se deforma).

<img src="imagenes/[Link]" alt="Foto ejemplo" height="300">


En este ejemplo la imagen se mostrará con 300 px de alto. El ancho se
ajusta proporcionalmente (no se deforma).

<img src="imagenes/[Link]" alt="Foto ejemplo" width="300" height="500">


Si pones width y height con valores que no son proporcionales, la imagen
se puede deformar. Si la imagen original no tiene esas proporciones, se
verá "estirada" o "aplastada". Por eso, normalmente pones solo width o
solo height y el navegador calcula la otra medida para mantener la
proporción.

<img src="imagenes/[Link]" alt="Foto ejemplo" width="50%">


Puedes usar porcentajes en width para que la imagen se adapte al tamaño de
la ventana o contenedor. En este ejemplo, la imagen ocupará el 50% del
ancho disponible en la página. Esto es muy útil en diseño responsive
(cuando hagas páginas que se ven bien en PC, tablet o móvil).

Listas
Una lista es un conjunto de elementos que queremos mostrar agrupados. Los
navegadores las muestran con puntos, números, o el estilo que tú les des
después. Son MUY útiles para:
✅ Menús de navegación
✅ Recetas
✅ Índices de contenido
✅ Listas de tareas
✅ Listas de enlaces
✅ Secciones de información

<ol></ol> esto sirve para crear una lista ordenada, en donde cada elemento
tiene un orden específico y es importante el orden. Por ejemplo, una serie
de pasos a seguir.

<ol>
<li> Texto </li>
<li> Texto </li>
<li> Texto </li>
</ol>
La etiqueta <li> significa List Item (Elemento de lista). Aquí se ponen
los diferentes elementos que tendrá la lista. Cada elemento de la lista se
pone entre <li> y </li>. El navegador muestra números por defecto.

<ul></ul> esto sirve para crear una lista no ordenada, donde el orden de los
ítems de la lista no importa, solo se busca agrupar elementos. Por
ejemplo, una lista de cosas cualquiera, como del super.

<ul>
<li>Pan</li>
<li>Leche</li>
<li>Huevos</li>
</ul>
Se colocan viñetas/bullets (círculo negro) por default. También se debe
usar <li> y </li>.

<ul>
<li>Comida favorita:
<ul>
<li>Tacos</li>
<li>Pizza</li>
<li>Sushi</li>
</ul>
</li>
<li>Deportes favoritos:
<ul>
<li>Fútbol</li>
<li>Natación</li>
</ul>
</li>
</ul>
Puedes poner una lista dentro de un elemento <li> para hacer sublistas
(listas anidadas). Siempre se debe poner las listas bien indentadas
(sangría) para que se vea limpio el código. Algo importante es que las
nuevas listas que se hagan deben quedar dentro de un <li> y no afuera (yo
me confundí cuando hice una lista la primera vez).

Tablas
<table></table> Esta es la etiqueta para definir una tabla. Se abre y se
cierra y puede ir en body. Es el contendor en sí de la tabla.

<tr></tr> Esto define una fila en la tabla (TableRow). Cada uno de estos
representa una fila.

<th></th> Esto define la cabecera de una columna (TableHeader). Es justo la


celda que es título de la columna (va en negrita y centrada por defecto).
Esto se pone de primero y sería el título de cada columna. Igual se podría
omitir si no se requiere. Cada uno de estos representa una celda dentro de
la primera fila de la tabla.

<td></td> Esto define los datos que van en cada celda y viene de: Table Data
(dato de tabla). Es el texto normal que aparece en cada celda. Cada uno de
estos representa una celda dentro de una fila.

<table border="1"> Se puede usar este atributo para poner un borde sencillo.
Esto se pone al principio cuando se abre o se crea la tabla. Si no pones
border, la tabla sí existe, pero por defecto: no se ven los bordes (ni de
las filas, ni de las celdas). Los datos quedan alineados en columnas y
filas, pero todo se ve alineado hacia la izquierda y sin mucho formato,
como texto plano. El navegador sí entiende la estructura de la tabla
internamente, pero visualmente no la resalta. Este número se puede
incrementar y el borde exterior de la tabla es el que crece solamente (se
ve de un color gris). Border 1 sería una tabla sencilla y normal.

<caption>Tabla de Alumnos</caption> Título o leyenda para la tabla (opcional).


Se pone justo después de <table>. Este se muestra justo ARRIBA de la tabla
(por defecto). Sirve como descripción visible para que el usuario sepa qué
representa la tabla.

Este es un ejemplo final de una tabla:


<table border="1">
<caption>Tabla de Alumnos</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Luis</td>
<td>34</td>
</tr>
<tr>
<td>María</td>
<td>28</td>
</tr>
</table>

Estructura Semántica de HTML5


Ya sabemos cómo meter contenido en la página (texto, imágenes, listas,
tablas, enlaces). Pero todo ese contenido lo metemos de manera suelta. Por
ejemplo, puedes tener un <h1> arriba, un párrafo por acá, una tabla abajo…
pero ¿qué parte es la cabecera? ¿Cuál es el contenido principal? ¿Dónde va
el menú? ¿Dónde van los artículos o noticias? Para eso existen las
etiquetas semánticas de HTML5. Esto hace que el código sea más ordenado,
más profesional, más accesible, más fácil de leer y más fácil de mantener.

🎁 Beneficios de usar estructura semántica


✅ El código queda más limpio y ordenado.
✅ Los motores de búsqueda (Google, Bing) entienden mejor tu página.
✅ Los lectores de pantalla (personas con discapacidad visual) entienden
mejor el contenido.
✅ Los programadores que lean tu código en el futuro entenderán fácilmente
qué es cada parte.
✅ Es el estándar moderno. Todas las páginas actuales lo usan.
Todo esto deberá ir dentro del body. El body no se debe omitir y dentro
del body es donde haremos toda esta clasificación, por así llamarle.
Veamos una a una las 7 etiquetas más importantes:
1️
⃣ <header>
Es el encabezado de la página o de una sección. Normalmente incluye: el
logo, el título, menú, etc. Suele ir de primero y es independiente de todo
lo demás.

<header>
<h1>Mi sitio web</h1>
<p>Bienvenido a mi página</p>
</header>
2️
⃣ <nav>
Es el menú de navegación. Incluye enlaces para moverte entre páginas o
secciones. Suele ir después del header y es independiente de todo lo
demás.

<nav>
<ul>
<li><a href="[Link]">Inicio</a></li>
<li><a href="[Link]">Acerca de</a></li>
<li><a href="[Link]">Contacto</a></li>
</ul>
</nav>
3️
⃣ <main>
Es el contenido principal de la página. Debe usarse una sola vez por
página. Aquí dentro se suelen colocar las secciones (section) y los
article (artículos)

<main>
<h2>Noticias del día</h2>
<p>Hoy ha pasado algo importante...</p>
</main>
4️
⃣ <section>
Un bloque de contenido. Sirve para agrupar partes relacionadas (por
ejemplo: una sección de noticias, otra de videos, otra de fotos). Esto
generalmente se coloca dentro del main. Y a su vez dentro lleva diferentes
artículos (article)

<section>
<h2>Sección de Noticias</h2>
<p>Primera noticia...</p>
</section>
5️
⃣ <article>
Un contenido independiente que puede ser publicado por sí mismo (por
ejemplo: una sola noticia, un artículo de blog, un post). Suele ir uno por
uno por separado dentro de una sección (section), todo esto dentro del
main. Pero no es obligatorio que vaya dentro de un section, igual puede ir
directo dentro del main.

<article>
<h2>Artículo 1</h2>
<p>Este es el contenido del artículo.</p>
</article>
6️
⃣ <aside>
Contenido secundario. Ejemplo: una barra lateral, un bloque de publicidad,
enlaces relacionados, notas etc. Va después del main y es independiente,
aunque también podría ponerse dentro del main y no pasa nada. Lo mejor es
dejarlo después.

<aside>
<h3>Publicidad</h3>
<p>Compra ahora...</p>
</aside>
7️
⃣ <footer>
El pie de página. Normalmente incluye: derechos de autor, datos de
contacto, enlaces legales. Suele ir al final después de todo, también
suele ir solito fuera del main (sería lo más habitual), pero según el
diseño igual podría ir incluido dentro del main, justo antes de cerrarlo y
no está mal tampoco.

<footer>
<p>© 2025 Mi sitio web</p>
</footer>
Enlaces internos (anclas)
Cuando tienes una página larga (por ejemplo, con muchas secciones o un
largo texto), es útil que el usuario pueda saltar de un punto a otro
rápidamente. Para eso sirven los enlaces internos. Ejemplos de uso:
- Índice de contenidos que te lleva a distintas partes de la página
- Botón “Subir” que te regresa al principio
- Tabla de navegación de un documento largo
- Navegación en FAQs
Se usa la misma estructura de los enlaces normales. Enlace normal
(aprendido antes):

<a href="otra_pagina.html">Otra página</a>


Cuando se usa un enlace interno (ancla), en vez de ir a otra página, va a
una parte de la misma página. La parte de destino se marca con un atributo
id="nombre". Al llamarlo desde un enlace, se pone # que representa que se
está buscando un ID en la misma página.

<a href="#seccion2">Ir a sección 2</a>


A diferentes elementos como h1, p, h2, article, etcétera, se le puede
asignar un id, que sería como un nombre exclusivo o identificador para esa
sección. Esto es lo que usaríamos en el enlace para que nos lleve directo
a esa sección en específico dentro de nuestra misma página. Se colocaría
de esta forma:

<h2 id="seccion2">Sección 2</h2>


Con esto, a partir de ahora este h2 tiene un nombre de “seccion2”.

<a href="#seccion2">Ir a sección 2</a>


Y así es como se crea el enlace directo a esa zona. Se debe usar
necesariamente el #, ya que esto señala que el enlace es a un ID de la
misma página.
Botón para volver arriba
Puedes crear un link para volver al inicio de la página. Esto es una
práctica común.

<a href="#top">Volver arriba</a>


Luego, en la parte superior del body:

<body id="top">
O si tu <header> tiene un id:
<header id="top">
<h1>Mi sitio</h1>
</header>

Formularios
Un formulario es un bloque en tu página que sirve para que el usuario
pueda introducir información. Por ejemplo: un formulario de contacto, un
registro de usuario, un buscador, etc. Permiten tomar datos introducidos
por el usuario y enviarlos después a un destino que bien puede ser la base
de datos.
En cuanto a la estructura semántica, un form se debería colocar dentro del
main, y si queremos organizarlo aún mejor: dentro de un <section> que
agrupe ese formulario (porque un <section> representa un bloque de
contenido temáticamente [Link] tienes un formulario de registro,
contacto, encuesta, etc., todo eso puede considerarse una sección.)

<form> </form> Esta es la etiqueta para crear el formulario. Este sería el


contenedor del formulario. Todo lo relacionado con recibir información del
usuario o enviar los datos debe ir dentro del <form>. Incluso el botón de
enviar, estaría aquí dentro. Botones para seleccionar o menús desplegables
también.

<input type="text"> Esto se puede colocar dentro del formulario y lo que hace
es que dibuja un cuadro para escribir texto. <input> es una etiqueta auto-
contenida, es decir, no tiene etiqueta de cierre. Hay diferentes tipos de
cuadros para escribir que nos puede generar, que se señalan con la parte
de "type". El valor por defecto es "text" así que si no pusiera la parte
del type="text" aún así el navegador lo interpretará como "text".

<label>Nombre:</label> Sirve para ponerle un “nombre” a cada campo, para que el


usuario sepa qué escribir allí. A pesar de ser muy similar a "p" para
párrafos o a los títulos como h1, h2, estos no los debemos usar aquí. Al
trabajar con formularios se debe usar label.
Por ejemplo si ponemos:

<label>Nombre:</label>
<input type="text">
El resultado sería:
Nombre: [___________]
Comenzamos ahora con los tipos de campo de texto o inputs que se le pueden
ofrecer al usuario:
<input type="password">
Este tipo de campo de texto oculta lo que escribes. Lo que ves en la
pantalla son asteriscos o puntos, ocultando el texto real para que nadie
pueda verlo a simple vista. Pero internamente el navegador guarda y envía
el texto real que el usuario escribe, no los asteriscos.
Ejemplo: si escribes "miClaveSecreta", aunque veas **************, el
valor real es miClaveSecreta. Cuando el formulario se envía (por ejemplo a
un servidor o base de datos), se envía el texto tal cual lo escribió el
usuario.
Es importante aclarar que esta ocultación es solo visual para proteger la
privacidad en la pantalla, pero no cifra ni protege la contraseña. Por eso
la seguridad real depende del servidor y el manejo posterior.

<input type="email">
Sirve para que el usuario escriba un correo electrónico. El navegador
aplica una validación básica automática del formato del texto cuando el
usuario intenta enviar el formulario. Esta validación no acepta textos que
no tengan la forma mínima de un correo:
Debe contener al menos un carácter, luego una @, luego más caracteres,
luego un punto y al menos dos letras después del punto (por ejemplo, .com,
.mx, .es).
La validación ocurre antes de enviar el formulario. Si no pasa, el
formulario no se envía hasta que se corrija.

<input type="number">
Sirve para que el usuario solo pueda escribir números. Los navegadores
modernos evitan que escribas letras dentro de este campo: si intentas,
simplemente no aparecen o el campo no acepta el dato. En algunos
navegadores móviles se despliega un teclado numérico.
Igual aparecen unas flechas (arriba y abajo). Estas flechas se suelen
llamar spinner o incrementadores. Son controles que permiten incrementar o
disminuir el valor numérico del campo sin necesidad de escribirlo
manualmente. Al hacer clic en la flecha hacia arriba, el número aumenta.
Al hacer clic en la flecha hacia abajo, disminuye. El navegador añade
automáticamente estos controles cuando usas
<input type="number"> para facilitar la entrada de números. También puedes
escribir el número directamente con el teclado.

Se puede controlar el incremento con <input type="number" step="5">, en este


caso, las flechas aumentarán o disminuirán el valor en pasos de 5 (por
ejemplo, 0, 5, 10, 15...). El valor por defecto de step es 1 si no se
especifica otro.

También se puede limitar el rango de los números usando <input type="number"


min="0" max="10">. Aquí el usuario solo podrá elegir números del 0 al 10. Si
intenta escribir un número fuera de ese rango, el navegador puede mostrar
una advertencia o impedir el envío.

<input type="checkbox">
Crea una sola casilla de verificación que permite al usuario activar o
desactivar, marcándola con una palomita o tilde. Se puede usar por ejemplo
para marcar que se aceptan términos y condiciones o para seleccionar
varios hobbies o intereses de una lista.

<label><input type="checkbox"> Opción</label>


Cuando creamos este tipo de input, se maneja diferente, ya que el input se
pone dentro del label. De esta forma, el label se asocia directamente con
el input.

<h3>¿Qué actividades te interesan?</h3>


<label><input type="checkbox"> Leer libros</label><br>
<label><input type="checkbox"> Cocinar</label><br>
<label><input type="checkbox"> Hacer ejercicio</label><br>
<label><input type="checkbox"> Viajar</label><br>
Este es un ejemplo en donde se ponen varias casillas de verificación.

<input type="radio">
Los radio buttons (botones de opción) permiten al usuario elegir solo una
opción de entre varias disponibles. Visualmente son círculos pequeños que
se marcan con un punto negro cuando están seleccionados. Al seleccionar
uno, los demás se desmarcan automáticamente. Se puede usar por ejemplo en:
Selección de género (Masculino, Femenino, Otro), Método de pago preferido
(Tarjeta, PayPal, Transferencia), Nivel de experiencia (Básico,
Intermedio, Avanzado), donde solo debería elegirse una opción.

<label><input type="radio" name="genero"> Masculino</label>


<label><input type="radio" name="genero"> Femenino</label>
<label><input type="radio" name="genero"> Otro</label>
Esto funciona igual que los input type checkbox, es decir se colocan
dentro del label. Pero aquí tenemos un atributo nuevo, que es el name. El
atributo name es obligatorio para que los radio buttons funcionen como
grupo. Es decir, si pones tres <input type="radio"> con el mismo name, el
navegador entiende que son opciones del mismo grupo y solo dejará
seleccionar una a la vez.
¿Qué pasa si olvidas el name o usas uno distinto en cada opción? Cada
radio button será independiente. Es decir, el usuario podrá marcar más de
uno, lo cual rompe el propósito de este tipo de control. No tendrán
relación semántica entre sí.

<input type="radio" name="genero" checked> Masculino


La opción con checked estará marcada desde el inicio. Si no se pone una
opción con checked, no estará marcada ninguna y el usuario podría enviar
el formulario así, cosa que igual es válida, pero si queremos que
necesariamente una se seleccione, poner el checked es buena opción.

<h3>Género:</h3>
<label><input type="radio" name="genero"> Masculino</label>
<label><input type="radio" name="genero"> Femenino</label>
<br><br>
<h3>Nivel de experiencia:</h3>
<label><input type="radio" name="nivel"> Básico</label>
<label><input type="radio" name="nivel"> Intermedio</label>
<label><input type="radio" name="nivel"> Avanzado</label>
En este último ejemplo, tengo dos diferentes grupos, uno para el género y
otro distinto para el nivel de experiencia.

<button type="submit">Enviar</button>
Necesitamos un botón para enviar el formulario, lo podemos crear usando
button type="submit" esto lo veremos más a fondo en la sección de botones.
<form>
<label>Nombre:</label>
<input type="text">
<br><br>

<label>Email:</label>
<input type="text">
<br><br>

<button type="submit">Enviar</button>
</form>
Con este ejemplo tendríamos dos campos, uno para poner nombre, otro Email
y al final un botón que diga "enviar".

<textarea></textarea>
Es similar al input, pero permite al usuario escribir varias frases o
incluso párrafos, por ejemplo para escribir un mensaje, comentarios, una
sugerencia etc. En cambio el input sirve para escribir texto corto, como
un nombre, una contraseña, una edad, etc. Esta etiqueta no se cierra sola
como <input>, sino que tiene una etiqueta de apertura y una de cierre. En
la esquina superior derecha suele salir una marca de redimensionado, que
permite que el usuario agrande o achique el tamaño visible del <textarea>
arrastrando con el mouse. Esta es una función integrada por el navegador.
No todos los campos la tienen, pero la mayoría de los navegadores modernos
la ofrecen por defecto en <textarea>, como una ayuda al usuario. Con CSS
se podrá modificar todo esto después.

<textarea rows="4" cols="50"></textarea>


Con estos atributos podemos definir el tamaño en pantalla del textarea.
rows="4" define cuántas líneas (renglones) de alto tiene la caja y así es
como se ve en pantalla. cols="50" define cuántos caracteres de ancho
permite en pantalla, si se pone pocos, la caja se verá muy delgada y sin
ancho. Esto solo afecta el tamaño visual del área. El usuario puede
escribir más si quiere, si esto pasa, el navegador automáticamente activa
barras de desplazamiento para poder navegar por el texto. Con CSS se podrá
modificar todo esto después.

<textarea rows="4" cols="40">Escribe aquí tu mensaje</textarea>


No hay texto dentro del <textarea>, pero si quisiéramos que el campo ya
tenga algo escrito de inicio, se puede poner ahí, como en el ejemplo
anterior. Los valores por defecto (si no se especifican) son rows="2"
cols="20".

Menús desplegables
Un menú desplegable es un campo que permite al usuario elegir una opción
entre varias. Sirve para limitar las respuestas a un conjunto específico,
como al elegir País de residencia, Ocupación, Género, Selección de idioma,
etc.

<label>País:</label>
<select>
<option>México</option>
<option>Argentina</option>
<option>España</option>
</select>
Esto crea un menú (lista desplegable) donde el usuario puede ver una
opción, y al hacer clic, desplegar las demás para elegir. En select se
ponen las option. Si dentro de select no se pone nada, el <select>
aparecerá vacío y el usuario no podrá seleccionar nada, lo cual es un
error de construcción. Siempre debes poner al menos una opción. Si el
usuario no selecciona nada, el navegador elige por defecto la primera
opción que aparece. La primera opción de la lista se va a mostrar siempre
antes de que se abra la lista desplegable.

<option selected disabled>Seleccione un país</option>


Puedes incluir de primero una opción vacía o de instrucción como en el
ejemplo anterior. Selected hace que esa opción sea la que se vea al abrir el
formulario. Y disabled impide que esa opción pueda ser seleccionada como
respuesta válida. Entonces el usuario debe elegir otra, ya que esa no es
válida y esto puede servir como en inicio del menú.

Botones
En HTML, un botón es un elemento interactivo que el usuario puede
presionar. Sirve principalmente para: enviar formularios, reiniciar
formularios, ejecutar acciones (por ejemplo, con JavaScript) o activar
funciones, menús, eventos, etc.
En HTML existen dos formas principales de crear botones. Usando la
etiqueta <button> o bien mediante unos nuevos tipos de <input> (estudiado
anteriormente).

Diferencias generales entre <button> y <input>

Característica <button> <input>

Tiene etiqueta de apertura y Solo se escribe como


Estructura
cierre etiqueta única (<input>)

Contenido Puede contener texto, Solo usa el atributo


personalizado imágenes, íconos, incluso HTML value como texto plano

Flexibilidad Más personalizable y versátil Más simple y directo

Es más recomendado usar <button>. Usa <button> cuando:


- Quieres más control sobre el contenido: imágenes, íconos, etiquetas
internas. - - Estás trabajando con estilos más personalizados (por ejemplo
con CSS).
- Necesitas más accesibilidad o animaciones dentro del botón.
- Tienes acciones con JavaScript y necesitas una estructura más rica.

Usa <input> cuando:


- Necesitas algo rápido, directo y sencillo.
- No necesitas estilos o contenido complejo.
- Tu botón es simplemente parte de un formulario y no requiere adornos.

Historia:
HTML 2.0 (1995): ya incluía <input> con type="submit", type="reset" y
type="button".
HTML 4.0 (1997): es cuando apareció <button>. Fue parte del esfuerzo por
crear una web más semántica y más rica en interacción.
Durante los primeros años de HTML, solo existía <input> como forma de
crear botones. El <button> apareció después, y al principio no era bien
soportado por todos los navegadores, especialmente Internet Explorer.
Miles de sistemas viejos, y muchas bibliotecas de backend como PHP, ASP o
JSP están llenas de formularios con <input> como botón. Cambiar todo eso
por <button> no tiene sentido. Por eso es que existen ambos, pero en la
práctica diaria es mejor usar Button por las facilidades que ofrece.

<input type="submit" value="Enviar">


Este botón envía el formulario. Es decir, cuando se presiona, todos los
datos del formulario se recogen y se mandan. Solo funciona dentro del
form.

<input type="button" value="Haz clic">


Este botón NO hace nada por sí solo. Es simplemente un botón visual. No
envía el formulario, no borra los campos, no ejecuta nada automáticamente.
Se usa para acciones personalizadas con JavaScript. Puede funcionar fuera
del form.

<input type="reset" value="Reiniciar">


Este botón borra todo lo que el usuario haya escrito en el formulario y lo
devuelve a su estado original (lo que había en el HTML al cargar la
página). Se usa para: limpiar o reiniciar los campos del formulario. Solo
funciona dentro del form.

<form>
<label>Nombre: <input type="text" name="nombre"></label><br><br>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
<input type="button" value="Botón sin acción">
</form>

¿Qué hará cada uno?


Enviar: intentará enviar los datos del formulario (solo funciona si está
dentro del <form>).
Borrar: borra lo escrito y deja los campos como estaban al principio.
Botón sin acción: no hace nada, es solo un botón visual por ahora.

La etiqueta <button> se usa para crear un botón. Puede tener diferentes


funciones según el valor de su atributo type. Existen tres tipos
principales:

<button type="submit">Enviar</button>
Este tipo envía un formulario. Solo funciona dentro de un <form> , este es
el valor por defecto, así que si no se especifica nada, este sería el
valor (sin embargo, no es recomendado dejarlo sin especificar)

<button type="reset">Borrar</button>
Este tipo borra todo lo que se haya escrito en el formulario y lo reinicia
a su estado inicial. También solo funciona dentro de un <form>
<button type="button">Haz clic</button>
Este es un botón normal que no hace nada por sí solo. No envía formularios
ni borra nada. Se usa cuando quieres tener un botón que haga alguna acción
personalizada más adelante (por ejemplo, con JavaScript, pero eso aún no
lo veremos).
Si no se especifica type, el navegador asume por defecto type="submit". Si
pones un botón fuera de un <form>, no hará nada por sí solo. Pero aún se
puede usar para otras cosas (por ejemplo, cambiar de página o ejecutar una
acción con JavaScript más adelante).

<form>
<label>Nombre: <input type="text" name="nombre"></label><br><br>
<button type="submit">Enviar con button</button>
</form>
Este ejemplo crea un botón que dice "Enviar con button" y al presionarlo
envía el formulario.

Atributos globales esenciales


Los atributos globales son atributos que pueden usarse en casi cualquier
etiqueta HTML, no solo en formularios o textos. Sirven para añadir
información extra, mejorar la accesibilidad, controlar estilos,
identificar elementos, etc.

id → Identificador único
<p id="parrafo-intro">Bienvenido a mi página</p>
Sirve para dar un nombre único a un elemento, como un identificador
personal. No debe repetirse dentro de una misma página.

class → Categoría o grupo


<p class="destacado">Este es importante</p>
<p class="destacado">Y este también</p>
Sirve para agrupar elementos bajo una misma categoría o estilo (cuando
empieces con CSS). A diferencia de id, puede repetirse muchas veces. Por
ahora, no haremos nada con la clase, solo te interesa entender qué
significa y cómo se usa.

title → Texto emergente


<p title="Este es un párrafo informativo">Pasa el cursor sobre mí</p>
Muestra un mensaje emergente cuando pasas el cursor encima del elemento.
Útil para dar información extra sin que esté visible todo el tiempo.

hidden → Oculta el elemento


<p hidden>Este texto no se mostrará</p>
Hace que el elemento esté en el código pero no se vea en pantalla. Sirve
para dejar contenido preparado que quizás se muestre después (aunque eso
requiere programación, por ahora solo aprendemos su efecto).
tabindex → Orden de tabulación
<input type="text" tabindex="2">
<input type="text" tabindex="1">
<input type="text" tabindex="3">
Controla el orden en que se seleccionan los elementos cuando el usuario
presiona la tecla Tab. En ese ejemplo, el segundo input será el primero en
enfocarse al presionar Tab, por tener tabindex="1".
Cuando no se usa tabindex, el navegador establece el orden según el orden
en que los elementos aparecen en el código HTML. Es decir, va de arriba
hacia abajo en el documento. El navegador automáticamente ignora elementos
no interactivos, como <p>, <h1>, <div>, etc. Solo los elementos que pueden
recibir foco (inputs, botones, enlaces, etc.) entran en esa secuencia.

lang → Idioma del contenido


<p lang="en">Hello, world!</p>
Ayuda a los navegadores, lectores de pantalla y buscadores a saber en qué
idioma está el texto. Se pone en la etiqueta <html> o en elementos
específicos. En una página, en la parte de html se coloca como: <html
lang="es">
El atributo lang no se escribe con el nombre completo del idioma, sino
usando códigos de idioma basados en la norma internacional ISO 639-1, que
asigna dos letras a cada idioma.

Código correcto para


Idioma
lang
Español lang="es"
Inglés lang="en"
Francés lang="fr"
Alemán lang="de"
Italiano lang="it"
Portugués lang="pt"
Japonés lang="ja"
Chino lang="zh"
Árabe lang="ar"
Ruso lang="ru"

style (como atributo)


Este atributo sirve para cambiar la apariencia visual de un elemento
directamente en el HTML. Todo lo que se pone dentro de style="..." son
reglas visuales: colores, tamaños, bordes, márgenes, etc. Aunque funciona,
no es buena práctica usarlo mucho. Más adelante, cuando veamos CSS,
aprenderás formas mucho mejores de aplicar estilos. Por eso, por ahora
solo lo mencionamos.
Atributo "name" en formularios
El atributo name da un nombre al campo del formulario. Ese nombre no se ve
en la página, pero sirve para identificar cada dato cuando se envía el
formulario. Se pone dentro de los campos de formulario, como en:

<input type="text" name="nombre">


<input type="email" name="correo">
<textarea name="mensaje">
<select name="pais">
<input type="radio" name="color">
<input type="checkbox" name="acepta">
Cuando el formulario se envía, los datos se envían como pares clave-valor,
donde: El name es la clave (identificador) y lo que el usuario escribe es
el valor.
Por ejemplo, teniendo <input type="text" name="usuario">, si el usuario escribe
"Luis" y luego envía el formulario, se enviará como: usuario=Luis. Si un
campo lo dejamos sin name, ese dato no se enviará cuando el usuario
presione el botón de enviar. El navegador lo ignora. Por eso, todo campo
que deba enviarse debe tener un name.
No se debe confundir con el id, que se usa para otras cosas, como para
enlaces directos dentro de una misma página o identificadores de secciones
del código. El name, se usa para enviar datos del formulario, solo esa es
su función.

<input type="radio" name="color" value="rojo"> Rojo


<input type="radio" name="color" value="azul"> Azul
En el caso de input tipo Radio buttons, como solo se puede elegir uno, se
les debe poner el mismo name.

<input type="checkbox" name="interes"> HTML


<input type="checkbox" name="interes"> CSS
En el caso de Checkboxes, pueden tener mismo name, pero no es obligatorio.
Aquí puedes marcar varias opciones. Si usan el mismo name, se enviará una
lista de valores. Si usaran nombres diferentes (name="html", name="css"),
se enviarían por separado.

<fieldset> y <legend>
<fieldset></fieldset> es una etiqueta de HTML que agrupa elementos dentro
de un formulario, como si hicieras una “sección” interna del formulario.
Su objetivo es:
- Organizar formularios largos.

- Ayudar a que los usuarios vean mejor qué campos están relacionados.
<legend>texto</legend> se utiliza dentro de un <fieldset> y sirve como el
título de ese grupo.
Aparece visualmente dentro del borde del <fieldset> (por defecto, en la
esquina superior izquierda). Es opcional, pero se recomienda incluirlo
siempre.
<fieldset>
<legend>Datos personales</legend>
<label>Nombre: <input type="text" name="nombre"></label>
<br><br>
<label>Edad: <input type="number" name="edad"></label>
</fieldset>
Esto se metería dentro de un <form> y puede llevar varios <fieldset>
dentro. Lo que hace el <fildset> es crear un recuadro (con borde)
alrededor del contenido agrupado. Se puede usar con CSS para personalizar
ese borde. Ayuda mucho a los usuarios a visualizar “bloques” lógicos.

Otros tipos de inputs


<input type="date">
Muestra un calendario emergente para que el usuario elija una fecha
fácilmente, en vez de escribirla manualmente. Produce una fecha en formato
AAAA-MM-DD. Por ejemplo: 2025-06-24.
<label>Fecha de nacimiento:
<input type="date" name="fecha_nacimiento">
</label>
Este es un ejemplo de cómo lo podemos colocar. Esto funciona igual que los
input type checkbox, es decir se colocan dentro del label. Aquí el <input>
está dentro del <label>, así que están conectados automáticamente. Al
hacer clic en el texto, también se activa el campo.
<input type="date" name="fecha" min="2020-01-01" max="2030-12-31"
value="2025-06-24">
min: la fecha más temprana que se puede elegir.
max: la fecha más tardía que se puede elegir.
value: una fecha predeterminada.

<input type="time">
Muestra un selector de hora y minutos. En algunos casos, también segundos
(depende del navegador). Produce una hora en formato HH:MM o HH:MM:SS.
Ejemplo: 14:30.
<label>Hora de la cita:
<input type="time" name="hora_cita">
</label>
Este es un ejemplo de cómo lo podemos colocar. También se coloca dentro
del label para que estén conectados de forma automática.
<input type="time" step="900"> <!-- paso de 900 segundos = 15 minutos -->
step: intervalo de minutos o segundos. Step se mide en segundos, no
minutos. Por defecto, step = 60 (1 minuto). El valor step="1" permitiría
incluso seleccionar segundos.
<input type="time" name="hora" min="08:00" max="18:00">
min="08:00": evita que el usuario elija una hora anterior a las 8 de la
mañana.
max="18:00": evita que el usuario elija una hora después de las 6 de la
tarde. Esto mostrará un reloj (según el navegador), y limitará las
opciones entre 08:00 y 18:00.

<input type="color">
Muestra un cuadro de color, y al hacer clic aparece un selector visual
para elegir cualquier color. Produce un código hexadecimal de color:
#RRGGBB. Ejemplo: #ff0000 (rojo), #00ff00 (verde), #0000ff (azul).
<label>Elige un color:
<input type="color" name="color" value="#ff0000">
</label>
value: color predeterminado. Si no se especifica value, el color por
defecto es negro (#000000). Algunos dispositivos móviles muestran
selectores más limitados.

<input type="file">
Muestra un botón para elegir archivos desde tu dispositivo. Produce una
referencia interna al archivo (no se puede ver desde HTML por seguridad).
<label>Sube tu archivo:
<input type="file" name="documento">
</label>
Este sería el uso básico.
<input type="file" accept=".pdf,.docx">
<input type="file" multiple>
accept: restringe los tipos de archivo permitidos.
multiple: permite seleccionar más de un archivo.
El navegador no te deja acceder directamente al contenido del archivo por
seguridad. Para subir realmente el archivo, se necesita un formulario con
enctype="multipart/form-data" y un backend para recibirlo (tema para más
adelante). Si solo seleccionas archivo pero no haces nada con él, no pasa
nada.
<form name = “nombre” id = “nombre” method = “post” autocomplete = “on/off” > Con name le
podemos poner un nombre al formulario, con id podemos luego darle formato
con css al tener ese nombre identificador, method nos dice el método con
el que se toman los datos, puede ser get o post. El método GET envía la
información insertada al header directamente en la URL. La página web y la
información codificada se separan por un interrogante? Con el método
POST también se codifica la información, pero ésta se envía a través
del body, por lo que no aparece en la URL.

Dentro del form podemos agregar <input type= “text” name = “nombrequeleasigne” id =
“nombreIdentificador”> esto agrega la típica casilla para que el usuario
introduzca datos, información. En la parte que dice text esto me indica
que se va a poner texto cualquiera, pero aquí se puede poner diferentes
elementos los cuales son email, search, url, tel, date, week, month, time,
datetime. De esta forma por ejemplo si ponemos “email” en la forma se
debería poner un correo y el navegador verificará que efectivamente se
haya puesto un correo, y en caso de que no mostrará un mensaje de error y
pedirá que se ponga el correo. Podemos poner “number” para que solo se
acepten números en la casilla, y se le puede agregar además dentro de
<input type…> min = “1” y max = “100” para poner el valor mínimo y máximo
aceptado.

También en el <input> se puede agregar placeholder = “texto” y este texto


aparecerá en gris dentro de la forma, aquí se le puede pedir algo al
usuario como “introduce tu nombre” o similares. Otros atributos que se
pueden agregar son:

required con solo agregar esto haces que sea obligatorio el campo, y no se
envía nada hasta que no se rellene. “Es necesario”.

<button>Texto</button> Esto crea un botón, el cual se puede poner dentro de


form. Al darle clic al botón se enviará la información tecleada, usando el
método que se haya especificado en form. El texto es lo que aparecerá
dentro del botón.
En PHP se puede hacer referencia a la información que se está enviando con
el método get con $_GET[‘nombre’], en donde nombre es el nombre que se le
asignó al formulario donde se está tecleando la información. Esto por
ejemplo lo podríamos poner en una variable o imprimir en pantalla o
similares.
Cuando se hace la forma, se puede dejar solo hasta “text” y ya pero si se
agrega name y id nos puede servir para después darle formato con css.
<input type= “submit” value = “Enviar”> esto agrega un botón para enviar los datos,
diferente a un botón normal, ya que submit tiene esa característica de que
envía. En donde dice value, ponemos el texto que saldrá en ese botón. Si
no se pone value, el submit coloca por defecto un mensaje “enviar
consulta” o “submit”.
Antes del <input> se puede poner el texto que quieras para que sepan de
qué es la casilla. Por ejemplo Nombre: <input…>

Por defecto los formularios tienen autocompletar activado, para que


se pueda mostrar cosas que se han tecleado antes y puedas buscar
de la lista, sin embargo esto se puede desactivar con el atributo
autocomplete = “off” este se mete en el <form>

<datalist></datalist id = “nombre”> La podemos colocar dentro de form, antes


de poner la casilla con input type y darle un id para poder luego
acceder a ella. Aquí dentro, podemos colocar opciones que se
desplegarán en una lista. Para ello colocamos las opciones de esta
forma:
<option value = “datos” label = “nombre”> Esto no se tiene que cerrar. En donde
dice datos, ponemos el valor que queremos que se despliegue en la
lista. En label, es un nombre en gris que va a salir como texto de
ayuda junto a la opción que seleccionemos y es opcional ponerlo.
Luego, cuando pongamos la forma con input type, podemos poner:
<input type= “text” name = “nombrequeleasigne” id = “nombreIdentificador” list =
“nombreDatalist> Aquí en la parte de nombreDatalist ponemos el nombre
de id de la datalist que hicimos para poder acceder a ella y que se
desplieguen aquí los valores de esa lista.
<dl></dl> esto define una lista descriptiva en donde cada elemento tendrá su
explicación propia. Dentro de dl, se pone dt para cada elemento de la
lista y dd para la explicación de dicho elemento. Entonces quedaría:

<dl>
<dt>Cabeza</dt><dd>Parte de arriba del cuerpo</dd>
<dt>Pies</dt><dd>Parte de abajo del cuerpo</dd>
<dt>Manos</dt><dd>Sirven para agarrar cosas</dd>
</ul>
<dl></dl> esto define una lista descriptiva en donde cada elemento tendrá su
explicación propia. Dentro de dl, se pone dt para cada elemento de la
lista y dd para la explicación de dicho elemento. Entonces quedaría:
En la hoja de estilos de CSS se puede cambiar la viñeta usando la
propiedad de list-style, (ver en CSS).

Se puede usar la propiedad start = “número” dentro de ol, para definir en


qué número comenzará la lista, en el sig. Ejemplo la lista sería 5, 6 y 7.
A su vez a los elementos “li” se les puede poner value=”número” para poner
un salto de número y que cambie el orden de numeración<

<ol start=”5”>
<li>elemento1</li>
<li>elemento2</li>
<li>elemento3</li>
</ul>
Si se coloca reversed dentro de la etiqueta ol, el orden será inverso,
empezando del número mayor al menor.
<div></div> crea un espacio en el que podemos escribir algo. Este espacio se
puede luego modificar, por ejemplo se le puede poner un color de fondo o
un tamaño, se pueden mostrar bordes etc. Es decir, se puede jugar tanto
con los bordes como con la ubicación, como con los elementos que lleva
dentro. Es literal como crear una caja aunque al inicio es invisible. A
este elemento se le puede poner que CSS propiedades como: width, height,
padding, border, margin. El elemento div tiene como característica por
default que ocupe una línea entera así que se pondrá uno sobre otro. A
diferencia del elemento span que los pone “inline” es decir uno al lado de
otro. Por default están en “bloque”

<span></span> lo mismo que div, pero se colocan en la misma línea. Están por
default en modo “inline”

<em></em> da énfasis al texto poniéndolo en cursiva.


<strong></strong> da énfasis al texto poniéndolo en negritas.
<body background = “direcció[Link]”> de esta forma podemos colocar un fondo a toda
la página, colocando la dirección de alguna imagen en Internet. Esto se
coloca cuando se abre el <body>.

<body bgcolor= "color_name | hex_number"> de esta forma podemos colocar un color


de fondo a toda la página, podemos colocar el nombre del color (elegir de
entre estos 16: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and yellow) o el código
hexagesimal del color más específico, según la tabla de colores.

<p><b>Texto</b></p> Esto es para poner el texto en


negritas.

<p><i>Texto</i></p> Esto es para poner el texto en


cursiva.

<p><u>Texto</u></p> Esto es para subrayar el texto.


<adress></adress> Se coloca en el body y sirve para poner
información de contacto o alguna dirección o
copyright. Lo que va aquí, lo pone automáticamente en
cursiva.

<a href="[Link] <img border="4" src="dirección" width="100"


height="100"> </a>
Esto es para poner una imagen como hipervínculo, poniendo el borde, la
dirección de la imagen y alto y ancho.
Para agregar un enlace a un elemento descargable, se coloca de la
siguiente forma, agregando el atributo “download”:
<a href="enlace de imagen o [Link]" download>DESCARGAR IMAGEN</a>

También podría gustarte