Paso 1: Estructura HTML
Primero, vamos a crear la estructura básica de una página HTML. Este código va en la pestaña de «HTML» de tu editor de WordPress.
<!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">
</head>
<body>
<header>
<h1>Bienvenido a Mi Página Web</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Introducción</h2>
<p>Esta es una breve introducción a mi página web. Aquí puedes encontrar información sobre nuestros servicios.</p>
</section>
<section>
<h2>Galería</h2>
<p>Aquí puedes ver algunas fotos de nuestros proyectos.</p>
</section>
</main>
<footer>
<p>© 2024 Mi Página Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Paso 2: Estilos CSS
A continuación, agregaremos los estilos CSS. Este código va en la pestaña de «CSS» de tu editor de WordPress, o puedes crear un archivo styles.css y enlazarlo en el <head> de tu HTML.
/* Estilos básicos para el cuerpo */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Estilos para el encabezado */
header {
background: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
/* Estilos para la navegación */
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* Estilos para las secciones principales */
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
color: #333;
}
/* Estilos para el pie de página */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
Paso 3: Publicar el Tutorial
Una vez que hayas copiado y pegado los códigos HTML y CSS en las secciones correspondientes de tu editor de WordPress, publica tu página para ver los resultados. Deberías ver una página web simple con un encabezado, un menú de navegación, dos secciones de contenido y un pie de página estilizados.
Resumen
Este tutorial básico te ha mostrado cómo crear y estilizar una página web usando HTML y CSS. Puedes modificar los estilos según tus necesidades y experimentar con diferentes propiedades de CSS para mejorar el diseño de tu página. ¡Buena suerte y diviértete creando tu sitio web!
