HTML y CSS básico

abril 13, 2025

HTML y CSS básico

En esta actividad retomamos la práctica inicial de crear una página web en HTML, con contenidos básicos y algo de estilo. Para cumplir con lo pedido, la web incluye los siguientes elementos:

Un elemento h1
Un elemento h2 con color definido
Un párrafo de texto
Un enlace externo a otro sitio web
Una imagen ya subida a la web o recurso multimedia incrustado (video, audio, etc.)
Una segunda página enlazada a la primera
Publicación de ambas páginas en w3spaces
Aplicación de dos tipografías de Google Fonts (en h1 y en p)
Estilos personalizados para los enlaces
Un div con color de fondo y estilo de borde

Momento de programar:

Para completar el ejercicio, utilicé una herramienta de inteligencia artificial (ChatGPT), que me ayudó a construir la web y a comprender ciertas funciones y atributos del código.

Algunos de los prompts que utilicé fueron:

“¿Como lograr que los links estén en formato de botón con color solido de fondo? Tambien quiero que el texto tenga otro color. ¿Esto se puede hacer desde CSS?”
“¿Que función se utiliza para agregar una imagen de fondo? ¿Desde que código se emplea?”
“¿Como colocar un degradado con transparencia? ¿se puede acoplar a la imagen de fondo?”

Link a la web publicada: Actividad 3

A lo que vinimos

A continuación, les dejo la receta para tener la web perfecta, o bueno... casi...

HTML - PAGINA PRINCIPAL

<!DOCTYPE html>

<head>

<title>Ensayo de Página</title>

</head>

<body>

<h1>Hola, Santi por acá, bienvenidos a mi web 😊</h1>

<h2>Actividad 3 | Primera parte - Laboratorio Digital</h2>

</header>

<ul>

<li>

<em>Esta web es una primera aventura en el mundo del HTML. Con dos páginas y elementos básicos, aprendemos a construir desde cero un pequeño rincón digital propio.</em>

</li>

</ul>

<p>

Si te interesan ver más contenidos relacionados, podés ingresar a mi blog personal, dedicado a trabajos de la carrera:

</p>

<a href="https://seydellsantiago.blogspot.com/" target="_blank" class="boton">💻 Visita mi Blog, una bitácora de la materia.</a>

<a href="https://www.instagram.com/seydell_art/" target="_blank" class="boton">✏️ Mis ilustraciones.</a>

<a href="PAGINA2.html" class="boton">📄 Ir a la página secundaria</a>

</div>

<h3>

Ilustración hecha en digital por el autor de la página

</a>

</h3>

</section>

</main>

</div>

</body>

</html>

CSS

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Noto Sans', sans-serif;

color: #222;

background-color: #fff;

min-height: 100vh;

line-height: 1.6;

}

.fondo {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image:

linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4)),

url('https://i.ibb.co/ghbSLRk/Mesa-de-trabajo-1.png');

background-repeat: no-repeat;

background-position: center;

background-size: cover;

z-index: -1;

}

.contenido {

position: relative;

padding: 2rem;

max-width: 900px;

margin: auto;

}

h1 {

font-family: 'Space Mono', monospace;

font-size: 2rem;

color: #0c8279;

font-family: monospace;

margin-bottom: 0.5rem;

}

h2 {

font-family: 'Space Mono', monospace;

font-size: 1.1rem;

color: #0c8279;

margin-bottom: 1rem;

}

h3 {

font-family: 'Space Mono', monospace;

font-size: 0.95rem;

color: #0c8279aa;

margin-top: 1rem;

}

.enlaces a {

display: block;

margin: 0.5rem 0;

color: #0c8279;

text-decoration: none;

transition: all 0.3s ease;

}

.enlaces a:hover {

color: #055b53;

text-decoration: underline;

}

.imagen-chica {

width: 200px;

height: auto;

display: block;

margin-top: 1rem;

border-radius: 8px;

}

.boton {

display: inline-block;

background-color: #0c8279;

color: #fff !important;

padding: 0.6rem 1.2rem;

margin: 0.5rem 0;

border: none;

border-radius: 6px;

text-decoration: none;

font-weight: bold;

font-size: 1rem;

box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);

transition: background-color 0.3s ease, transform 0.2s ease;

}

.boton:hover {

background-color: #066a63;

transform: scale(1.03);

color: #fff !important;

HTML - PAGINA SECUNDARIA

<!DOCTYPE html>

<head>

<title>Mi cuento ilustrado</title>

<style>

body {

margin: 0;

padding: 0;

font-family: noto, sans-serif;

position: relative;

min-height: 100vh;

}

.fondo {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image:

linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4)),

url('https://i.ibb.co/ghbSLRk/Mesa-de-trabajo-1.png');

background-repeat: no-repeat;

background-position: center;

background-size: cover;

z-index: -1;

}

.contenido {

position: relative;

z-index: 1;

padding: 2rem;

}

h1 {

color: #0c8279;

font-family: space mono;

font-size: 30px;

}

h2 {

color: #0c8279;

font-family: noto;

font-size: 16px;

}

p {

font-size: 15px;

color: #333;

}

iframe {

width: 100%;

height: 480px;

border: none;

margin-top: 1rem;

}

</style>

</head>

<body>

<h1>Un vistazo a mi trabajo ✨</h1>

<h2>Actividad 2 | Segunda parte - Laboratorio Digital</h2>

<p>En esta sección quiero compartir con ustedes un diseño propio: un cuento infantil ilustrado que desarrollé como parte del laboratorio digital. Este proyecto combina narrativa y arte visual para invitar a la imaginación. ¡Espero que lo disfruten!</p>

<a href="index.html" class="boton">⬅ Volver a la página principal</a>

</div>

</body>

</html>