Bienvenido a "Elementos de una Página Web"
ELEMENTOS DE UNA PÁGINA WEB
Una página web está compuesta por varios elementos que trabajan juntos para mostrar información de manera estructurada y atractiva. Se pueden dividir en tres categorías principales:
1️⃣ Estructura y Contenido (HTML)
2️⃣ Diseño y Estilos (CSS)
3️⃣ Interactividad y Funcionalidad (JavaScript)
1️⃣ Estructura y Contenido (HTML)👈
El HTML (HyperText Markup Language) es el lenguaje que define la estructura de una página web. Contiene los elementos que organizan y presentan el contenido.
 |
| HTML |
✅
<html>: Elemento raíz que envuelve todo el documento.✅
<head>: Contiene metadatos como <title>, <meta>, <link>, <script>.✅
<body>: Contiene todo el contenido visible de la web.✅ Encabezados:
<h1> a <h6> para títulos y subtítulos.✅ Párrafos y texto:
<p>, <span>, <strong>, <em>.✅ Listas:
<ul> (listas desordenadas), <ol> (listas ordenadas) y <li> (elemento de lista).✅ Enlaces:
<a href="URL">Texto</a> para navegación.✅ Imágenes:
<img src="imagen.jpg" alt="Descripción">.✅ Tablas:
<table>, <tr>, <td>, <th>.✅ Formularios:
<form>, <input>, <label>, <textarea>, <button>.✅ Divisiones y contenedores:
<div> y <section> para organizar bloques de contenido.2️⃣ Diseño y Estilos (CSS)👈
CSS
.jpg)
El CSS (Cascading Style Sheets) se usa para dar estilo y diseño a los elementos HTML.
🎨 Elementos principales de CSS:
✅ Select
elemento { propiedad: valor; } → Ejemplo: p { color: red; }.clase { } → Aplica estilos a una clase.#id { } → Aplica estilos a un elemento con un ID.
✅ Propiedades básicas:
- Colores:
color,background-color. - Texto:
font-size,font-family,text-align. - Espaciado:
margin,padding. - Dimensiones:
width,height. - Bordes y sombras:
border,box-shadow. - Posicionamiento:
position,display,flexbox,grid. - Animaciones y transiciones:
transition,animation.
✅ Métodos de implementación:
- En línea:
style="color: blue;"dentro de una etiqueta HTML. - Interno:
<style>dentro del<head>. - Externo: Archivo
.cssenlazado con<link rel="stylesheet" href="styles.css">.
3️⃣ Interactividad y Funcionalidad (JavaScript)👈
El JavaScript (JS) permite agregar interactividad y lógica a una página web.
.jpg)
⚡ Elementos clave de JavaScript:
✅ Manipulación del DOM (Document Object Model):
document.getElementById("id")→ Selecciona un elemento por ID.document.querySelector(".clase")→ Selecciona un elemento por clase.element.innerHTML = "Nuevo contenido";→ Cambia el contenido.element.style.color = "red";→ Cambia estilos dinámicamente.
✅ Eventos:
onclick,onmouseover,onkeyup, etc.element.addEventListener("click", function() { ... })→ Agrega eventos a elementos.
✅ Estructuras de control:
- Condiciones:
if,else,switch. - Bucles:
for,while,do...while.
✅ Funciones:
- Declaración:
function miFuncion() { ... } - Flecha:
const miFuncion = () => { ... }
✅ Interacción con el usuario:
alert("Hola!");console.log("Mensaje en consola");prompt("Ingresa tu nombre");
✅ Conexión con APIs y AJAX:
fetch("https://api.example.com")para obtener datos.async/awaitpara manejar peticiones asíncronas.
✅ Librerías y frameworks populares:
- jQuery (simplifica el manejo del DOM).
- React.js (interfaces dinámicas).
- Vue.js (componentes interactivos).
Comentarios
Publicar un comentario