Entradas

EJERCICIO IMC

  HTML <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <link rel="stylesheet" href="estilos.css">     <title>Calculadora IMC - Bachillerato</title> </head> <body>     <div class="contenedor">         <h1>Calculadora de IMC</h1>         <input type="number" id="peso" placeholder="Peso en kg">         <input type="number" id="altura" placeholder="Altura en cm">         <button onclick="calcularIMC()">Calcular Resultado</button>         <div id="resultado">Ingrese sus datos para comenzar</div>     </div>     <script src="script.js"></script> </...
Publicar un comentario
Leer más

Barra

Imagen
 Html < div id = "barra" ></ div > < script src = "estilo.js" ></ script > CSS #barra {         position : fixed ;         top : 0 ;         left : 0 ;         height : 5px ;         background : linear-gradient ( 90deg , #2c32e4 , #00c6ff );         width : 0% ;         z-index : 9999 ;     } JS
Publicar un comentario
Leer más

Menú desplegable

HTML < body >     < nav class = "navbar" >   < ul class = "nav-links" >       < li >< a href = "#" > Inicio </ a ></ li >         < li class = "dropdown" >       < a href = "#" class = "dropbtn" > Materias ▾ </ a >       < ul class = "dropdown-content" >         < li >< a href = "#" > Matemáticas </ a ></ li >         < li >< a href = "#" > Programación </ a ></ li >         < li >< a href = "#" > Diseño UI </ a ></ li >       </ ul >     </ li >     </ ul > </ nav > </ body >   CSS /* Estilos generales de la barra */ .navbar {   background-color : #2c3e50 ;   font-family : Arial , sans-serif ; } .nav-links {   list-st...
Publicar un comentario
Leer más

Software de Edición de Sitios Web

  🛠️  Software de Edición de Sitios Web El software de edición web se clasifica principalmente según la forma en que permite al usuario interactuar con el código, dirigiéndose a diferentes niveles de experticia. 🗃️ Categoría Principal Nombre Enfoque Software de Edición de Sitios Web Conjunto de herramientas para crear, modificar y gestionar páginas web. 🎨 1. Editores WYSIWYG ( What You See Is What You Get ) Característica Descripción Definición Permite diseñar visualmente el sitio web (arrastrar y soltar) sin escribir código. El resultado en pantalla es muy similar al resultado final publicado. Público Objetivo Principiantes y usuarios sin conocimientos de programación. Ventaja Clave Rapidez en el diseño y facilidad de uso. Desventaja Clave Genera código que puede ser ineficiente o "sucio". Ejemplos Wix, Squarespace, Webflow (modo visual), Constructores de WordPress (Elementor, Divi). 💻 2. Editores de Código (IDE) Característica Descripción Definición Se enfoca en la e...
Publicar un comentario
Leer más

Hipervínculos locales y externos

 Los hipervínculos (o enlaces) son la base de la navegación en la web. Permiten a los usuarios saltar de un recurso a otro. Se clasifican principalmente en locales y externos , dependiendo de si el destino se encuentra dentro o fuera del sitio web actual. 🔗 1. Hipervínculos Locales (Enlaces Internos) Los hipervínculos locales dirigen al usuario a otro recurso dentro del mismo sitio web o dominio . Concepto Son enlaces que utilizan una ruta relativa (o solo el nombre del archivo) para conectar páginas o secciones dentro de la estructura de un mismo proyecto web. Usos Comunes Navegación principal: Conectar la página de inicio con la página "Acerca de" o "Contacto". Anclas: Saltar a una sección específica dentro de la misma página (ej., un índice que te lleva a un subtítulo). Descargas internas: Enlazar a un PDF o una imagen alojada en la misma carpeta del servidor. Ejemplo de Estructura (en HTML) El enlace solo necesita la ruta a la página de destino sin especi...
Publicar un comentario
Leer más

Tablas y Frames, Flexbox y Grid

  1. Hojas de Estilo (CSS) 🎨 Una Hoja de Estilo en Cascada (CSS, del inglés Cascading Style Sheets ) es el lenguaje que describe la presentación de un documento escrito en un lenguaje de marcado, como HTML. Función y Principio Clave La función principal de CSS es separar el Contenido (estructurado en HTML) de la Presentación (el diseño, colores, fuentes, y disposición). Presentación: Define cómo se debe ver el contenido (ej., el texto principal debe ser azul, centrado y con fuente Arial ). Consistencia: Permite aplicar el mismo estilo a múltiples páginas web de un sitio, asegurando uniformidad visual con solo modificar un archivo. Eficiencia: Reduce el tamaño de los archivos HTML, haciendo que la página cargue más rápido. Tipos de Inclusión de CSS Externa: El método más recomendado. Los estilos se definen en un archivo separado ( .css ) y se vinculan al documento HTML. Interna: Los estilos se definen dentro de la sección <head> del documento HTML, utilizando la etiq...
Publicar un comentario
Leer más

Navegadores (browsers)

 Un navegador web (o browser ) es el software esencial que permite a los usuarios acceder a la información disponible en la World Wide Web (WWW) . Actúa como un intérprete: solicita datos a los servidores web e interpreta el código (principalmente HTML, CSS y JavaScript) para mostrar las páginas de manera visual e interactiva en tu pantalla. Período Hitos Clave Principios de los 90 (Nacimiento) En 1990 , Tim Berners-Lee creó el primer navegador y editor, llamado WorldWideWeb (luego Nexus). En 1993 , apareció Mosaic , el primer navegador popular que mostraba imágenes y texto en la misma página, lo que impulsó el uso masivo de Internet. Mediados de los 90 (Guerra de Navegadores) En 1994 , se lanzó Netscape Navigator , que dominó el mercado inicial. En 1995 , Microsoft lanzó Internet Explorer (IE) . Siguió una intensa "Guerra de Navegadores" donde IE, al ser incluido en Windows, se convirtió en el dominante. Años 2000 (Renacimiento y Estándares) La caída de Netscape llevó a...
Publicar un comentario
Leer más