Embedded Files
Objetivo: Mostrar cómo usar style, label, input type="text", button, textarea y select en HTML.
Metodología: Se presenta un código HTML con ejemplos y se explica cómo usar cada elemento.
Estilo <style>
Sirve para incluir reglas de estilo CSS directamente dentro de un documento HTML. Esto significa que puedes definir cómo quieres que se vean tus elementos HTML, como colores, tamaños de fuente, márgenes, etc., todo dentro del mismo archivo HTML.
Cuando utilizas la etiqueta <style> para definir reglas de estilo en un documento HTML, esas reglas afectarán a todas las etiquetas con el mismo nombre que coincidan con esas reglas.
Por ejemplo, si en tu etiqueta <style> defines que todos los párrafos (<p>) deben tener un color de texto rojo, todas las etiquetas <p> en tu página tendrán el texto en rojo, a menos que se especifique lo contrario.
Ejemplo:
Actividad 1.8A
Realizar los comandos HTML para que las etiquetas tengan los siguientes estilos:
La etiqueta <b> debe tener color de letra rojo, fondo azul y tamaño de letra 16.
Las etiquetas <i> y <u> deben tener color de letra blanco, fondo verde y tamaño de letra 18.
Las etiquetas <del> y <p> deben tener color de letra azul, fondo amarillo y tamaño de letra 20.
Además, escribir varios ejemplo de cada etiqueta para ver los resultados.
Actividad 1.8B
Realizar los comandos HTML para que las etiquetas tengan los siguientes estilos:
La etiqueta <h1> debe tener color de letra blanca, fondo azul y tamaño de letra 30.
Las etiquetas <h2> y <u> deben tener color de letra azul y tamaño de letra 20.
Las etiquetas <b>,<i> y <p> deben tener color de letra azul, fondo green y tamaño de letra 15.
Además, escribir varios ejemplo de cada etiqueta para ver los resultados.
Botones <button>
Los botones son elementos HTML fundamentales que permiten a los usuarios interactuar con las páginas web. Sirven para realizar diversas acciones, como enviar formularios, navegar a otras páginas o ejecutar funciones JavaScript.
Estructura básica:
Un botón HTML se define mediante la etiqueta <button>
<button>Texto del botón</button>
<button id="identificador">Texto del botón</button>
<button id="identificador" style="estilo" >Texto del botón</button>
<button id="identificador" style="estilo" [atributos adicionales]>Texto del botón</button>
Ejemplos:
Actividad 1.8C
Crear 12 botones para simular un teclado de teléfono básico como se muestra en la siguiente imagen.
Actividad 1.8D
Crear 6 botones para simular un teclado de teléfono básico como se muestra en la siguiente imagen.
Paso 5: Haz clic en "Archivo" en la parte superior izquierda del documento y elige "Guardar" del menú desplegable.
Paso 6: Repite el proceso de guardar, pero esta vez selecciona "Guardar como". En la opción "Tipo", elige "Todos los archivos" y ponle como nombre "pagina9.html".
Paso 7: Para ver la página web que acabamos de crear, vuelve a la carpeta y abre el archivo "pagina9.html" para observar cómo quedó. Compara con el resultado del cuaderno.
Page updated
Report abuse