Diseño html y CSS básico

- abril 15, 2025

Desarrollo de Documento HTML Hipertextual

En esta actividad, nos enfocamos en crear un documento HTML básico con los elementos fundamentales para entender la estructura de una página web. Utilizamos herramientas como Codepen y Bluegriffon para desarrollar un archivo con diferentes elementos de contenido.

El ejercicio consistió en crear un documento HTML con los siguientes elementos: un encabezado <h1>, un encabezado <h2> con color personalizado, un párrafo de texto, un enlace externo, una imagen y una segunda página enlazada a la primera.

Publicación

El resultado de este trabajo fue publicado en W3Spaces, y pueden verlo en el siguiente enlace.

Segunda parte – Actividad de Diseño Responsivo (HTML + CSS)

Ejercicio realizado

He seguido el curso de FreeCodeCamp – Diseño web responsivo, completando:

Los primeros 35 pasos de la sección de HTML
Los primeros 7 pasos de la sección de CSS básico

Luego, apliqué lo aprendido creando un pequeño sitio que incluye:

Un div principal con fondo, borde y tipografía
Dos fuentes de Google Fonts diferentes: una para el <h1> y otra para el <p>
Estilos aplicados desde una hoja de estilos externa

Prompts utilizados (IA generativa)

Utilicé el siguiente prompt para generar el código:

"Crea código CSS para hoja de estilo externa, que muestre un div de 80% de ancho, centrado, borde sutil de color claro, margen de 20px, margen interno de 15px, fondo gris muy claro, con tipografía para etiqueta p con Google font Roboto mediana, estilo normal y un titular en Times New Roman de mayor tamaño. Genera dos archivos: Css externo y html con el div creado. Comenta el código para que pueda comprender mejor que hace cada línea."

Código HTML

html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi portfolio de diseño</title>
  <!-- Vinculación con Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <!-- Vinculación con la hoja de estilos externa -->
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <div class="contenedor">
    <h1>Bienvenidos a mi portfolio</h1>
    <p>Este es un ejemplo de cómo aplicar estilos CSS y HTML usando fuentes de Google y diseño responsivo básico.</p>
    <a href="#">Conocé más</a>
  </div>
</body>
</html>

Código CSS (estilos.css)

css
/* Estilos generales del contenedor */
.contenedor {
  width: 80%;               /* El div ocupa el 80% del ancho de la pantalla */
  margin: 20px auto;        /* Margen superior/inferior de 20px y centrado horizontalmente */
  padding: 15px;            /* Espacio interno de 15px */
  background-color: #f2f2f2;/* Color de fondo gris muy claro */
  border: 1px solid #cce0ff;/* Borde sutil de color azul claro */
  box-sizing: border-box;   /* Incluye padding y borde dentro del ancho definido */
}

/* Estilo para el título principal */
.contenedor h1 {
  font-family: 'Times New Roman', serif; /* Fuente para el título */
  font-size: 24px;
  color: #333;
}

/* Estilo para el párrafo */
.contenedor p {
  font-family: 'Roboto', sans-serif; /* Fuente Roboto importada de Google */
  font-size: 14px;
  color: #555;
}

/* Estilo para los enlaces */
.contenedor a {
  color: #589172;
  text-decoration: none;
  font-weight: bold;
}

.contenedor a:hover {
  text-decoration: underline;
}

Comentarios finales

Este ejercicio me permitió practicar la estructura básica de un documento HTML, aplicar estilos CSS desde un archivo externo y vincular fuentes desde Google Fonts. También aprendí a crear un diseño más responsivo y organizado, usando propiedades como width, margin, padding, y box-sizing.

Buscar este blog

BITÁCORA LABORATORIO DIGITAL