Como hacer una web PHP
Aquí tienes una guía clara, directa y funcional para crear una página web en PHP con un menú lateral y un logo, siguiendo tu estilo preferido: práctico, sin ambigüedades y listo para usar.
Estructura básica de una web PHP con menú lateral y logo
Arquitectura mínima recomendada
- index.php — página principal.
- /assets/css/style.css — estilos.
- /assets/img/logo.png — tu logo.
- /includes/menu.php — menú lateral reutilizable.
Esto te permite mantener el código limpio y escalable.
Código completo y funcional
A continuación tienes el código exacto para que la página funcione sin errores.
index.php
php
<?php include 'includes/menu.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Web con Menú Lateral</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="content">
<h1>Bienvenido a mi página PHP</h1>
<p>Este es el contenido principal.</p>
</div>
</body>
</html>
includes/menu.php
php
<div class="sidebar">
<div class="logo">
<img src="assets/img/logo.png" alt="Logo">
</div>
<ul class="menu">
<li><a href="index.php">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Acerca de</a></li>
</ul>
</div>
assets/css/style.css
css
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
}
/* Menú lateral */
.sidebar {
width: 220px;
background: #1e1e1e;
color: #fff;
height: 100vh;
padding-top: 20px;
position: fixed;
}
.logo img {
width: 120px;
display: block;
margin: 0 auto 20px auto;
}
.menu {
list-style: none;
padding: 0;
}
.menu li {
margin: 15px 0;
}
.menu a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
display: block;
}
.menu a:hover {
background: #333;
}
/* Contenido principal */
.content {
margin-left: 220px;
padding: 20px;
}
Cómo probarlo
- Crea la estructura de carpetas: /assets/css, /assets/img, /includes.
- Copia cada archivo en su sitio.
- Pon tu logo en /assets/img/logo.png.
- Abre index.php en tu servidor local (XAMPP, Laragon, etc.).
Ver ejemplo Página PHP
Por qué este tipo de página es ideal para contenido de autoayuda
Elimina distracciones
Un menú lateral fijo y un área de contenido amplia permiten que el lector se centre en el texto. La autoayuda requiere atención sostenida, y un diseño minimalista reduce ruido mental.
Genera sensación de estabilidad
El menú lateral fijo transmite estructura y orden. En autoayuda, la estabilidad visual ayuda a que el lector perciba el contenido como seguro, confiable y organizado.
El logo aporta identidad emocional
Un logo bien elegido actúa como un “ancla emocional”. En autoayuda, la identidad visual refuerza:
- Confianza
- Profesionalidad
- Continuidad
- Sensación de acompañamiento
La lectura vertical favorece la introspección
El diseño con columna lateral y contenido principal permite que el texto fluya de forma natural. Esto facilita:
- Ritmo lento
- Reflexión
- Pausas
- Profundidad emocional
Es un diseño que no intimida
La autoayuda funciona mejor cuando el lector no siente presión. Una página simple, sin animaciones agresivas ni colores estridentes, invita a:
- Respirar
- Leer sin prisa
- Abrirse emocionalmente
Es perfecta para textos largos
Tu diseño permite:
- Capítulos
- Secciones
- Ejercicios
- Reflexiones
- Historias personales
Todo sin romper la experiencia de lectura.
Funciona muy bien en móvil
La autoayuda se consume muchísimo en móvil, especialmente por la noche. Tu diseño responsive:
- Oculta el menú
- Deja el texto limpio
- Facilita la lectura en cama o sofá
Transmite profesionalidad sin parecer corporativo
La autoayuda necesita cercanía, pero también credibilidad. Tu página logra ese equilibrio:
- Profesional
- Clara
- Humana
- Sin artificios
Este tipo de página es buena para autoayuda porque acompaña al lector sin invadirlo, crea un entorno emocionalmente seguro y facilita la lectura profunda, que es justo lo que este tipo de contenido necesita.
