El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Creando el Diseño

Siguiente ►
►

En esta sección, aprenderás cómo crear el diseño de tu sitio web utilizando HTML y CSS. Este es un paso crucial en el desarrollo web, ya que un buen diseño no solo hace que tu sitio se vea atractivo, sino que también mejora la experiencia del usuario.

Objetivos de Aprendizaje

  • Comprender la importancia de un buen diseño web.
  • Aprender a estructurar el diseño de una página web utilizando HTML.
  • Aplicar estilos CSS para mejorar la apariencia del diseño.
  • Utilizar técnicas de diseño responsivo para asegurar que tu sitio se vea bien en diferentes dispositivos.

  1. Importancia de un Buen Diseño Web

Un buen diseño web es esencial por varias razones:

  • Primera impresión: Los usuarios suelen juzgar la credibilidad de un sitio web en cuestión de segundos.
  • Usabilidad: Un diseño intuitivo facilita la navegación y mejora la experiencia del usuario.
  • Accesibilidad: Un buen diseño asegura que el contenido sea accesible para todos los usuarios, incluidos aquellos con discapacidades.

  1. Estructurando el Diseño con HTML

Estructura Básica

Comenzaremos creando una estructura básica para nuestro sitio web. Esta estructura incluirá un encabezado, una barra de navegación, una sección principal y un pie de página.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Sitio Web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Sitio Web</h1>
        <nav>
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobre">Sobre Nosotros</a></li>
                <li><a href="#servicios">Servicios</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="inicio">
            <h2>Inicio</h2>
            <p>Contenido de la sección de inicio.</p>
        </section>
        <section id="sobre">
            <h2>Sobre Nosotros</h2>
            <p>Contenido de la sección sobre nosotros.</p>
        </section>
        <section id="servicios">
            <h2>Servicios</h2>
            <p>Contenido de la sección de servicios.</p>
        </section>
        <section id="contacto">
            <h2>Contacto</h2>
            <p>Contenido de la sección de contacto.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Mi Sitio Web. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Explicación del Código

  • <header>: Contiene el título del sitio y la barra de navegación.
  • <nav>: Incluye una lista de enlaces de navegación.
  • <main>: Contiene las secciones principales del contenido.
  • <section>: Cada sección representa una parte del contenido del sitio.
  • <footer>: Contiene información de pie de página.

  1. Aplicando Estilos CSS

Ahora, vamos a aplicar algunos estilos básicos para mejorar la apariencia de nuestro diseño.

Archivo CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Explicación del Código CSS

  • body: Establece la fuente predeterminada, elimina márgenes y rellenos, y establece un color de fondo.
  • header: Establece el color de fondo, el color del texto y el relleno del encabezado.
  • nav ul: Elimina los estilos de lista predeterminados y el relleno.
  • nav ul li: Muestra los elementos de la lista en línea y establece un margen entre ellos.
  • nav ul li a: Establece el color del texto y elimina la subrayado de los enlaces.
  • main: Añade relleno alrededor del contenido principal.
  • section: Añade un margen inferior a cada sección.
  • footer: Establece el color de fondo, el color del texto, el alineamiento del texto y el relleno del pie de página. También lo fija en la parte inferior de la página.

  1. Diseño Responsivo

Para asegurarnos de que nuestro sitio se vea bien en diferentes dispositivos, utilizaremos consultas de medios (media queries).

Consultas de Medios

@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }

    header, footer {
        text-align: left;
        padding: 20px;
    }
}

Explicación del Código de Consultas de Medios

  • @media (max-width: 768px): Aplica los estilos dentro del bloque solo si el ancho de la pantalla es de 768 píxeles o menos.
  • nav ul li: Cambia la visualización de los elementos de la lista a bloque y añade un margen vertical.
  • header, footer: Cambia el alineamiento del texto a la izquierda y añade relleno adicional.

Ejercicio Práctico

Ejercicio

  1. Crea un archivo HTML con la estructura básica proporcionada.
  2. Crea un archivo CSS y aplica los estilos proporcionados.
  3. Añade una nueva sección llamada "Blog" con un título y un párrafo de contenido.
  4. Asegúrate de que la nueva sección se vea bien en diferentes tamaños de pantalla utilizando consultas de medios.

Solución

Archivo HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Sitio Web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Sitio Web</h1>
        <nav>
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobre">Sobre Nosotros</a></li>
                <li><a href="#servicios">Servicios</a></li>
                <li><a href="#contacto">Contacto</a></li>
                <li><a href="#blog">Blog</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="inicio">
            <h2>Inicio</h2>
            <p>Contenido de la sección de inicio.</p>
        </section>
        <section id="sobre">
            <h2>Sobre Nosotros</h2>
            <p>Contenido de la sección sobre nosotros.</p>
        </section>
        <section id="servicios">
            <h2>Servicios</h2>
            <p>Contenido de la sección de servicios.</p>
        </section>
        <section id="contacto">
            <h2>Contacto</h2>
            <p>Contenido de la sección de contacto.</p>
        </section>
        <section id="blog">
            <h2>Blog</h2>
            <p>Contenido de la sección del blog.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Mi Sitio Web. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Archivo CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }

    header, footer {
        text-align: left;
        padding: 20px;
    }
}

Conclusión

En esta sección, has aprendido a crear un diseño básico para un sitio web utilizando HTML y CSS. También has aprendido a aplicar estilos CSS y a utilizar consultas de medios para hacer que tu diseño sea responsivo. En la siguiente sección, nos enfocaremos en añadir contenido y medios a tu sitio web.

◄ Anterior
◄
Siguiente ►
►

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados