Scribd
Cargar
10 vistas3 páginas

estructura de un apagina web en html

El documento describe la creación de una página web utilizando HTML, CSS y JavaScript. Se presenta un ejemplo de estructura HTML con elementos como encabezados, navegación y un botón, seguido de estilos CSS para mejorar la apariencia. Además, se incluye un script de JavaScript que añade interactividad al botón, mostrando un mensaje al hacer clic.

Cargado por

Jorge Luis Ramos Hernandez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
10 vistas3 páginas

estructura de un apagina web en html

El documento describe la creación de una página web utilizando HTML, CSS y JavaScript. Se presenta un ejemplo de estructura HTML con elementos como encabezados, navegación y un botón, seguido de estilos CSS para mejorar la apariencia. Además, se incluye un script de JavaScript que añade interactividad al botón, mostrando un mensaje al hacer clic.

Cargado por

Jorge Luis Ramos Hernandez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

Paso 1: Estructura de una Página Web (HTML)

Ya vimos la estructura básica de un documento HTML. Ahora, agreguemos más elementos


y preparemos el terreno para aplicar estilos con CSS y funciones con JavaScript.

Ejemplo mejorado de HTML


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mi Página Web</title>
<link rel="stylesheet" href="styles.css"> <!-- Enlace a CSS -->
</head>
<body>
<header>
<h1>Bienvenido a mi Página</h1>
</header>

<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>

<section>
<h2>Sobre mí</h2>
<p>Hola, soy un estudiante aprendiendo HTML, CSS y
JavaScript.</p>
</section>

<button id="miBoton">Haz clic</button> <!-- Botón con JavaScript -->

<script src="script.js"></script> <!-- Enlace a JavaScript -->


</body>
</html>

Paso 2: Estilos con CSS


CSS (Cascading Style Sheets) se usa para dar estilo a las páginas web.

Archivo styles.css
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

/* Encabezado */
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}

/* Menú de navegación */
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
background-color: #444;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: white;
padding: 10px;
display: block;
}

/* Sección principal */
section {
text-align: center;
padding: 20px;
}

/* Botón */
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
display: block;
margin: 20px auto;
}

button:hover {
background-color: #0056b3;
}
Paso 3: Agregar Interactividad con JavaScript
JavaScript se usa para agregar dinamismo a nuestra web.

Archivo script.js
// Espera a que la página cargue completamente
document.addEventListener("DOMContentLoaded", function() {
let boton = document.getElementById("miBoton");

boton.addEventListener("click", function() {
alert("¡Hola! Has hecho clic en el botón.");
});
});

¿Qué hemos logrado?


1. HTML: Estructura de la página con encabezado, navegación y contenido.
2. CSS: Diseño atractivo con colores, espaciado y efectos visuales.
3. JavaScript: Interactividad con un botón que muestra un mensaje.

También podría gustarte