ETIQUETAS HTML
<nav>: Define un bloque de enlaces
de navegación de la página (como el menú principal o el menú del pie de
página).
<a>: Crea un hipervínculo o enlace. Permite
conectar al usuario con otra página web, un archivo o una sección del mismo
sitio.
<article>: Representa una composición autónoma e
independiente en un documento, que puede ser distribuida o reutilizada por
separado (por ejemplo, un post de un blog o una noticia).
<h1>: Indica el título principal de más alto
nivel en una página. Solo debe usarse uno por documento para mantener una buena
jerarquía.
<section>: Agrupa contenido relacionado por temática
dentro de una página, sirviendo para estructurar el documento en capítulos o
secciones lógicas.
<li>: Representa un elemento o ítem dentro de una
lista, ya sea ordenada o desordenada.
<ul>: Define una lista desordenada, es decir,
una lista de elementos donde el orden no importa y que usualmente se muestra
con viñetas (puntos).
<form>: Crea un formulario interactivo para que
el usuario introduzca datos (como texto o casillas de verificación) y los envíe
a un servidor.
<button>: Representa un botón cliqueable, utilizado
principalmente para enviar formularios o activar funciones interactivas
mediante JavaScript.
Ejemplo
Html con formularios y botones
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/enviar-datos" method="POST">
<!-- Campo de texto para el nombre -->
<label
for="nombre">Nombre:</label>
<input type="text" id="nombre"
name="usuario_nombre" required>
<br><br>
<!-- Campo para el correo electrónico -->
<label for="correo">Correo
electrónico:</label>
<input type="email"
id="correo" name="usuario_correo" required>
<br><br>
<!-- Botón para enviar el
formulario -->
<button type="submit">Enviar
Formulario</button>
</form>
<button
id="botton">fondo</button>
<script
src="script.js"></script>
</body>
</html>
EJEMPLO 2
html con
nav
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<nav class="navbar">
<ul class="nav-links">
<li><a href="#">
nosotros</a></li>
<li><a href="#">
platillos</a></li>
<li><a href="#">
locales</a></li>
<li><a href="#">redes
sociales</a></li>
</ul>
</nav>
<script src="script.js"></script>
EJEMPLO 3
<!DOCTYPE
html>
<html
lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de
Estructura Semántica</title>
<link rel="stylesheet"
href="estilos.css">
</head>
<body>
<!-- 1. <nav>:
Contenedor de la navegación principal del sitio -->
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a
href="#blog">Blog</a></li>
<li><a
href="#contacto">Contacto</a></li>
</ul>
</nav>
<!-- 2. <section>:
Agrupa una sección temática de la página -->
<section
id="blog">
<!-- 3.
<h1>: El título principal de esta sección de noticias -->
<h1>Últimas Noticias de Tecnología</h1>
<!-- 4.
<article>: Contenido independiente y reutilizable (Post 1) -->
<article>
<h2>El futuro de la Inteligencia Artificial</h2>
<p>La IA sigue transformando el desarrollo web de formas sorprendentes,
optimizando tareas repetitivas...</p>
<a href="#leer-mas-1">Leer más</a>
</article>
<!-- Otro
<article> dentro de la misma sección (Post 2) -->
<article>
<h2>Ventajas de usar HTML Semántico</h2>
<p>Escribir código limpio no solo ayuda a otros programadores, sino que
mejora drásticamente el SEO de tu web...</p>
<a href="#leer-mas-2">Leer más</a>
</article>
</section>
<script
src="script.js"></script>
</body>
</html>
CSS
FLEXBOX
Flexbox (Flexible Box
Layout)
Concepto: Es un modelo de diseño unidimensional (orientado
a filas o columnas) pensado para distribuir el espacio y alinear elementos
dentro de un contenedor, incluso cuando sus tamaños son desconocidos o
dinámicos.
Propiedades para el
Contenedor (Padre)
- display: flex;: Activa el contexto flexible en el
contenedor.
- flex-direction: Define la dirección de los elementos (eje
principal). Puede ser row (fila horizontal) o column (columna vertical).
- justify-content: Alinea los elementos a lo largo del eje
principal (horizontal por defecto). Opciones: center, space-between,
space-around, flex-start, flex-end.
- align-items: Alinea los elementos a lo largo del eje secundario (vertical
por defecto). Opciones: center, stretch, flex-start, flex-end.
- flex-wrap: Controla si los elementos se fuerzan en una sola línea o si pueden
pasar a la siguiente línea (wrap).
- gap: Define de forma directa el espacio de separación entre los elementos
del contenedor.
POSITION:
RELATIVE: El elemento permanece en su lugar original, pero puedes moverlo
ligeramente desde esa posición sin afectar a los demás.
ABSOLUTE: El elemento se desconecta por
completo del flujo y flota libremente en la página.
FIXED: El elemento se desconecta del flujo
y se queda "congelado" o pegado en la pantalla, sin importar
cuánto scroll hagas.
EJEMPLOS
body{
background-color: rgb(187, 152, 233);
}
.navbar {
display: flex;
justify-content: space-between; /*
Separa el logo de los enlaces */
align-items: center;
/* Centra todo verticalmente */
background-color: #5c1212;
/* Color de fondo oscuro */
padding: 15px 30px;
/* Espacio interno */
}
.nav-links {
display: flex;
/* Pone los enlaces en línea
horizontal */
list-style: none;
/* Quita los puntos de la lista (bullet
points) */
gap: 20px;
/* Separa los enlaces
entre sí */
}
.nav-links a {
color: #fff;
/* Texto blanco */
text-decoration: none;
/* Quita el subrayado predeterminado */
font-size: 18px;
transition: color 0.3s ease;
/* Transición suave para el efecto hover */
}
/* 5. Efecto al pasar el cursor (Hover) */
.nav-links a:hover {
color: #ff7b00;
/* Cambia a color naranja al pasar el mouse
*/
}
JAVASCRIPT
Tipos de datos: Son las categorías de información que
JavaScript puede entender y procesar. Los más comunes son los números (number),
los textos (string), los valores lógicos de verdadero o falso (boolean), y la
ausencia de valor (null o undefined).
Caracteres de
comparación: Son operadores
matemáticos y lógicos que se usan para contrastar dos valores y devolver un
resultado verdadero o falso. Por ejemplo: == (igualdad débil), === (igualdad
estricta), != (diferente), > (mayor que) y < (menor que).
console.log(): Es una función especial que se utiliza para mostrar
mensajes, valores o errores en la consola del navegador. Los programadores
la usan como una herramienta de diagnóstico para espiar qué está pasando dentro
del código mientras se ejecuta.
Javascritp con tipos de datos
console.log("ejemplo");
var nombre= "joaquin";
var numero =14;
var pago=true;
var peso=40.43;
alert("este es un ejemplo de
javascritp "+ nombre);
console.log("nombre " + nombre +
" " + typeof nombre);
console.log("numero " + numero +
" " + typeof numero);
console.log("pago " + pago +
" " + typeof pago);
console.log("peso " + peso +
" " + typeof peso);
console.log("conparativos");
console.log(7>4);
console.log(45<1);
var x=4;
console.log(4==x);
console.log(7==="7")
SENTENCIAS DE CONTROL
Bucle if (Condicional): Es una estructura de control que permite tomar
decisiones en el código. Evalúa si una condición es verdadera para ejecutar
un bloque de instrucciones; si es falsa, puede saltarse ese código o ejecutar
una alternativa (else).
Bucle for (Ciclo): Es una estructura que sirve para repetir un
bloque de código un número específico de veces. Utiliza un contador interno
que va aumentando o disminuyendo en cada vuelta hasta que se cumple la
condición de parada
Javascript con if
var numero1=prompt("ingrese el numero
1");
var numero2=prompt("ingrese el numero
2");
var total=numero1+numero2;
if(total>=50){
console.log("el numero
es alto");
}
else{
console.log("el numero
es bajo");
}
Javascript
for(let
i=1;i<=5;i++){
console.log("numero ",i);
}
for(let
i=1;i<=5;i++){
console.log("*".repeat(i));
}
for
(let i = 0; i < 5; i++) {
const espacios = ' '.repeat(5 - i - 1);
const asteriscos = '*'.repeat(2 * i + 1);
console.log(espacios + asteriscos);
}
Javascript
con getlementby
const
respuestas=document.getElementById("botton");
document.body.style.transition="background-color
0.7s ease";
respuestas.onclick
= () => document.body.style.backgroundColor="blue";
