Botones HTML
Los botones permiten a los usuarios interactuar con una página web. Pueden enviar
formularios, ejecutar JavaScript o activar diferentes acciones cuando se hace clic.
Botón HTML
El elemento <button> define un botón clickable.
Por sí solo, el botón no hace nada hasta que se le agrega una acción.
Ejemplo
<button>Click Me</button>
Estilo de botones HTML
Los botones a menudo se diseñan con CSS:
Ejemplo
<button class="mytestbtn">Green Button</button>
Botones Deshabilitados
Utilice el atributo disabled para hacer un botón que no se puede hacer clic:
Ejemplo
<button disabled>Disabled Button</button>
Consejo: Los botones deshabilitados no se pueden hacer clic y generalmente aparecen
descoloridos.
Botón con JavaScript
Puede ejecutar JavaScript cuando el usuario haga clic en un botón utilizando el atributo
onclick:
Ejemplo
<button onclick="alert('Hello!')">Click Me</button>
Tipos de botones
El atributo type define lo que hace un botón cuando se hace clic. Hay tres tipos de
botones:
• type="button"- Un botón normal de chequeo (no hace nada por defecto)
• type="submit"- Presenta un formulario
• type="reset"- Restablece todos los campos del formulario
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Los botones se utilizan a menudo dentro de formularios.
Por ahora, solo sepa que un botón submit envía los datos del formulario al servidor,
mientras que un botón reset borra el formulario:
Ejemplo
<form action="/action_page.php">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
Nota: Siempre debe especificar el atributo type. Dentro de un formulario, el tipo
predeterminado es submit, y los navegadores pueden comportarse de manera diferente
si se omite el tipo.
Referencia de botón HTML
Tag Description
<button> Define un botón
HTML Iframes
Un iframe se utiliza para mostrar una página web dentro de una página web.
Sintaxis de HTML Iframe
El etiqueta <iframe> especifica un Marco en línea.
Se utiliza un marco en línea para incrustar otro documento dentro del documento
HTML actual.
Sintaxis
<iframe src="url" title="description"></iframe>
Consejo: Es una buena práctica incluir siempre un atributo title para el <iframe>.
Esto es utilizado por los lectores de pantalla para leer cuál es el contenido del iframe.
Iframe - Ajuste Altura y Ancho
Utilice los atributos height y width para especificar el Tamaño del iframe.
La altura y el ancho se especifican en píxeles por defecto:
Ejemplo
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>
O puede agregar el atributo style y usar las propiedades CSS height y width:
Ejemplo
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe
Example"></iframe>
Iframe - Quitar el borde
Por defecto, un iframe tiene un borde a su alrededor.
Para quitar el borde, agregue el atributo style y use la propiedad CSS border:
Ejemplo
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe
Example"></iframe>
Con CSS, también puede cambiar el tamaño, el estilo y el color del borde del iframe:
Ejemplo
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe
Example"></iframe>
Iframe - Objetivo para un enlace
Se puede usar un iframe como trama objetivo para un enlace.
El atributo target del enlace debe referirse al atributo name del iframe:
Ejemplo
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="[Link]
target="iframe_a">[Link]</a></p>
Resumen del Capítulo
• La etiqueta <iframe> especifica un marco en línea
• El atributo src define la URL de la página a incrustar
• Siempre incluya un atributo title (para lectores de pantalla)
• Los atributos height y width especifican el Tamaño del iframe
• Usar border:none; para eliminar la frontera alrededor del marco
Ejercicio
¿En qué atributo IFRAME podemos especificar una URL?
href
src
url
HTML JavaScript
JavaScript hace que las páginas HTML sean más dinámicas e interactivas.
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button" onclick="[Link]('demo').innerHTML =
Date()">
Click me to display Date and Time.
</button>
<p id="demo"></p>
</body>
</html>
My First JavaScript
Sun Jan 04 2026 19:54:21 GMT+0100 (hora estándar de Europa central)
La etiqueta <script>
La etiqueta <script> se utiliza para definir un script del lado del cliente (JavaScript).
El elemento <script> contiene sentencias de script, o apunta a un archivo de script
externo a través del atributo src.
Los usos comunes de JavaScript son la manipulación de imágenes, validación de
formularios y Cambios dinámicos de contenido.
Para seleccionar un elemento HTML, JavaScript utiliza con mayor frecuencia el método
[Link]().
Este ejemplo de JavaScript escribe "Hola JavaScript!" En un elemento HTML con
id="demo":
Ejemplo
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
Una muestra de JavaScript
Estos son algunos ejemplos de lo que JavaScript puede hacer:
Ejemplo
JavaScript puede cambiar el contenido:
[Link]("demo").innerHTML = "Hello JavaScript!";
Ejemplo
JavaScript puede cambiar de estilo:
[Link]("demo").[Link] = "25px";
[Link]("demo").[Link] = "red";
[Link]("demo").[Link] = "yellow";
Ejemplo
JavaScript puede cambiar los atributos:
[Link]("image").src = "[Link]";
La etiqueta HTML <noscript>
La etiqueta <noscript> define un contenido alternativo para ser mostrado a los
usuarios en vez de tener scripts deshabilitados en su navegador o tener un navegador
que no sea compatible Guiones:
Ejemplo
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Disculpe, su navegador no soporta JavaScript!</noscript>
Ejercicio?
¿En qué elemento HTML ponemos JavaScript?
<java>
<javascript>
<script>
Etiquetas de script HTML
Tag Description
<script> Define un script del lado del cliente
<noscript> Define un contenido alternativo para usuarios cuyo navegador no soporta
scripts.