<!DOCTYPE html>
<!-- Indica al navegador que este documento usa HTML5 -->
<html>
<!-- Inicio del documento HTML -->
<head>
<!-- Sección donde van metadatos, título y estilos -->
<meta charset="UTF-8">
<!-- Define la codificación de caracteres para que se vean bien tildes y símbolos -->
<title>Multimedial</title>
<!-- Título de la página que aparece en la pestaña del navegador -->
<style>
/* Aquí comienza la sección de estilos CSS que define la apariencia visual */
body{
/* "body" se refiere a todo el contenido visible de la página */
background-color: cyan;
/* Define que el fondo de toda la página sea blanco */
color: purple;
/* Define que el color del texto sea negro */
margin: 0;
/* Elimina los márgenes que los navegadores agregan por defecto */
height: 100vh;
/* Hace que el alto del cuerpo sea igual al 100% de la altura de la pantalla */
display: flex;
/* Activa el sistema Flexbox para organizar y centrar elementos */
justify-content: center;
/* Centra el contenido horizontalmente */
align-items: center;
/* Centra el contenido verticalmente */
font-family: Arial, sans-serif;
/* Define la tipografía del texto */
font-size: 60px;
/* Define el tamaño grande del texto */
}
/* Fin de las reglas de estilo del body */
</style>
<!-- Fin de la sección de estilos -->
</head>
<!-- Fin de la sección head -->
<body>
<!-- Inicio del contenido visible de la página -->
Taller Multimedial
<!-- Texto que aparece en el centro de la pantalla -->
</body>
<!-- Fin del contenido visible -->
</html>
<!-- Fin del documento HTML -->
Visual Studio Codigo
<!DOCTYPE html>
<!-- Indica al navegador que este documento usa HTML5 -->
<html>
<!-- Inicio del documento HTML -->
<head>
<!-- Sección donde van metadatos, título y estilos -->
<meta charset="UTF-8">
<!-- Define la codificación de caracteres para que se vean bien tildes y símbolos -->
<title>Multimedial</title>
<!-- Título de la página que aparece en la pestaña del navegador -->
<style>
/* Aquí comienza la sección de estilos CSS que define la apariencia visual */
body{
/* "body" se refiere a todo el contenido visible de la página */
background-color: #743AF0;
/* Define que el fondo de toda la página sea blanco */
color: #5EF2E6;
/* Define que el color del texto sea negro */
margin: 0;
/* Elimina los márgenes que los navegadores agregan por defecto */
height: 100vh;
/* Hace que el alto del cuerpo sea igual al 100% de la altura de la pantalla */
display: flex;
/* Activa el sistema Flexbox para organizar y centrar elementos */
justify-content: center;
/* Centra el contenido horizontalmente */
align-items: center;
/* Centra el contenido verticalmente */
font-family: Arial, sans-serif;
/* Define la tipografía del texto */
font-size: 60px;
/* Define el tamaño grande del texto */
}
/* Fin de las reglas de estilo del body */
</style>
<!-- Fin de la sección de estilos -->
</head>
<!-- Fin de la sección head -->
<body>
<!-- Inicio del contenido visible de la página -->
Taller Multimedial
<!-- Texto que aparece en el centro de la pantalla -->
</body>
<!-- Fin del contenido visible -->
</html>
<!-- Fin del documento HTML -->
Pagina 1
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi sitio</title>
</head>
<body>
<h1>Página principal</h1>
<a href="pagina2.html">Ir a la segunda página</a>
</body>
</html>
Pagina 2
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página 2</title>
</head>
<body>
<h1>Esta es la segunda página</h1>
<a href="index.html">Volver a la página principal</a>
<!--<a href="index.html" target="_blank">Volver a la página principal</a> -->
<!--<a href="https://www.wikipedia.org" target="_blank">Ir a Wikipedia</a> -->
</body>
</html>
Llamar imagen desde archivo
<!DOCTYPE html>
<!-- Indica al navegador que este documento usa HTML5 -->
<html>
<!-- Inicio del documento HTML -->
<head>
<!-- Sección donde van metadatos, título y estilos -->
<meta charset="UTF-8">
<!-- Define la codificación de caracteres para que se vean bien tildes y símbolos -->
<title>Multimedial</title>
<!-- Título de la página que aparece en la pestaña del navegador -->
<style>
/* Aquí comienza la sección de estilos CSS que define la apariencia visual */
body{
/* "body" se refiere a todo el contenido visible de la página */
background-color: #743AF0;
/* Define que el fondo de toda la página sea blanco */
color: #5EF2E6;
/* Define que el color del texto sea negro */
margin: 0;
/* Elimina los márgenes que los navegadores agregan por defecto */
height: 100vh;
/* Hace que el alto del cuerpo sea igual al 100% de la altura de la pantalla */
display: flex;
/* Activa el sistema Flexbox para organizar y centrar elementos */
justify-content: center;
/* Centra el contenido horizontalmente */
align-items: center;
/* Centra el contenido verticalmente */
font-family: Arial, sans-serif;
/* Define la tipografía del texto */
font-size: 60px;
/* Define el tamaño grande del texto */
}
/* Fin de las reglas de estilo del body */
</style>
<!-- Fin de la sección de estilos -->
</head>
<!-- Fin de la sección head -->
<body>
<!-- Inicio del contenido visible de la página -->
Taller Multimedial
<!-- Texto que aparece en el centro de la pantalla -->
<img src="img/img1.jpeg" alt="descripción" width="300">
</body>
<!-- Fin del contenido visible -->
</html>
<!-- Fin del documento HTML -->
Bloques
Index:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
/* Estilo general del cuerpo */
body {
font-family: Arial, sans-serif;
background-color: #484b7c;
margin: 0;
}
/* Contenedor principal */
.contenedor {
width: 80%;
margin: auto;
}
/* Sección o bloque */
.bloque {
background-color: rgb(215, 225, 255);
margin: 20px 0;
padding: 20px;
border-radius: 10px;
}
/* Imagen */
.bloque img {
width: 100%;
height: auto;
}
/* Encabezado */
.bloque h2 {
margin-top: 10px;
}
/* Texto */
.bloque p {
line-height: 1.5;
}
</style>
</head>
<body>
<!-- Contenedor principal -->
<div class="contenedor">
<!-- BLOQUE 1 -->
<div class="bloque">
<h1>Alex CorRami</h2>
<img src="img/img1.jpeg" alt="Tortuga">
</div>
<!-- BLOQUE 2 -->
<div class="bloque">
<a href="obra.html">Obra</a><br>
</div>
<!-- BLOQUE 2 -->
<div class="bloque">
<a href="contacto.html">Contacto</a>
</div>
</div>
</body>
</html>
Obras
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Obras</title>
<style>
/* Estilo general del cuerpo */
body {
font-family: Arial, sans-serif;
background-color: #484b7c;
margin: 0;
}
/* Contenedor principal */
.contenedor {
width: 80%;
margin: auto;
}
/* Sección o bloque */
.bloque {
background-color: rgb(215, 225, 255);
margin: 20px 0;
padding: 20px;
border-radius: 10px;
}
/* Imagen */
.bloque img {
width: 100%;
height: auto;
}
/* Encabezado */
.bloque h2 {
margin-top: 10px;
}
/* Texto */
.bloque p {
line-height: 1.5;
}
</style>
</head>
<body>
<!-- Contenedor principal -->
<div class="contenedor">
<!-- BLOQUE 1 -->
<div class="bloque">
<h1>Mi obra</h1>
<a href="index.html">Inicio</a><br>
<a href="contacto.html">Contacto</a>
</p>
</div>
<!-- BLOQUE 2 -->
<div class="bloque">
<img src="img/img1.jpeg" alt="Grabado Mantis">
<h2>Título 1</h2>
<p>
Este es un texto de ejemplo. Aquí puedes escribir contenido descriptivo,
reflexivo o informativo sobre la imagen.
</p>
</div>
<!-- BLOQUE 3 -->
<div class="bloque">
<img src="img/img2.jpeg" alt="Mantis">
<h2>Título 2</h2>
<p>
Otro texto que acompaña la imagen. Puedes trabajar narrativa,
análisis visual o cualquier tipo de contenido.
</p>
</div>
<!-- BLOQUE 4 -->
<div class="bloque">
<img src="img/img4.jpeg" alt="espejos">
<h2>Título 3</h2>
<p>
Este es un tercer bloque. Puedes repetir esta estructura
tantas veces como quieras.
</p>
</div>
</div>
</body>
</html>
Contacto (sin bloques por ahora)
<!DOCTYPE html>
<html>
<head>
<title>Contacto</title>
</head>
<body>
<h1>Contacto</h1>
<img src="contacto.jpg" alt="Imagen de contacto" width="300">
<p>Mail: correaalexander412@gmail.com</p>
<p>Instagram: @alex.corami</p>
<a href="index.html">Inicio</a><br>
<a href="obra.html">Obra</a>
</body>
</html>
Barra de navegacion
Index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
/* Estilo general del cuerpo */
body {
font-family: Georgia, 'Times New Roman', Times, serif, sans-serif;
background-color: #292a47;
margin: 0;
}
.navbar {
background-color: #18132d;
overflow: hidden;
border-radius: 10px;
}
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: black;
}
/* Contenedor principal */
.contenedor {
width: 80%;
margin: auto;
}
/* Sección o bloque */
.bloque {
background-color: rgb(215, 225, 255);
margin: 20px 0;
padding: 20px;
border-radius: 10px;
}
/* Imagen */
.bloque img {
width: 100%;
height: auto;
}
/* Encabezado */
.bloque h2 {
margin-top: 10px;
}
/* Texto */
.bloque p {
line-height: 1.5;
}
.boton { /* Define una clase llamada "boton" */
background-color: rgb(215, 225, 255); /* Color de fondo del botón */
color: white; /* Color del texto */
padding: 15px; /* Espacio interno (arriba, abajo, izquierda, derecha) */
width: 150px; /* Ancho fijo del botón */
text-align: center; /* Centra el texto horizontalmente */
transition: 0.3s; /* Hace que los cambios (como color) sean suaves en 0.3 segundos */
}
.boton:hover { /* Se activa cuando el mouse pasa sobre el elemento */
background-color: rgb(150, 145, 246); /* Cambia el color de fondo al pasar el mouse */
}
</style>
</head>
<body>
<!-- Contenedor principal -->
<div class="contenedor">
<div class="navbar">
<a href="index.html">Inicio</a>
<a href="obra.html">Proyectos</a>
<a href="contacto.html">Contacto</a>
</div>
<!-- BLOQUE 1 -->
<div class="bloque">
<h1>Alex CorRami</h2>
<img src="img/autorretrato1.jpeg" alt="autorretrato">
</div>
<!-- BLOQUE 2
<div class="boton">
<a href="obra.html">Obra</a><br>
</div>
<br> <br>
BLOQUE 2 --
<div class="boton">
<a href="contacto.html">Contacto</a>
</div> -->
</div>
</body>
</html>
Obras
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Proyectos</title>
<style>
/* Estilo general del cuerpo */
body {
font-family: Georgia, 'Times New Roman', Times, serif, sans-serif;
background-color: #292a47;
margin: 0;
}
.navbar {
background-color: #18132d;
overflow: hidden;
border-radius: 10px;
}
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: black;
}
/* Contenedor principal */
.contenedor {
width: 80%;
margin: auto;
}
/* Sección o bloque */
.bloque {
background-color: rgb(215, 225, 255);
margin: 20px 0;
padding: 20px;
border-radius: 10px;
}
/* Imagen */
.bloque img {
width: 100%;
height: auto;
}
/* Encabezado */
.bloque h2 {
margin-top: 10px;
}
/* Texto */
.bloque p {
line-height: 1.5;
}
.boton { /* Define una clase llamada "boton" */
background-color: rgb(215, 225, 255); /* Color de fondo del botón */
color: white; /* Color del texto */
padding: 15px; /* Espacio interno (arriba, abajo, izquierda, derecha) */
width: 150px; /* Ancho fijo del botón */
text-align: center; /* Centra el texto horizontalmente */
transition: 0.3s; /* Hace que los cambios (como color) sean suaves en 0.3 segundos */
}
.boton:hover { /* Se activa cuando el mouse pasa sobre el elemento */
background-color: rgb(150, 145, 246); /* Cambia el color de fondo al pasar el mouse */
}
</style>
</head>
<body>
<!-- Contenedor principal -->
<div class="contenedor">
<div class="navbar">
<a href="index.html">Inicio</a>
<a href="obra.html">Proyectos</a>
<a href="contacto.html">Contacto</a>
</div>
<!-- BLOQUE 1 -->
<div class="bloque">
<h1>Proyectos</h1>
</div>
<!-- BLOQUE 2 -->
<div class="bloque">
<img src="img/autorretrato1.jpeg" alt="autorretrato">
<h2>Autorretrato en honor a un espejo roto</h2>
<p> Pastel graso sobre madera, 50 x 50cm, 2026</p>
</div>
<!-- BLOQUE 3 -->
<div class="bloque">
<img src="img/Espejos.jpg" alt="Espejos">
<h2>A Traves del Espejo</h2>
<p> Mosaico de espejos, 90 x 70 x 80cm, 2025</p>
</div>
<!-- BLOQUE 4 -->
<div class="bloque">
<img src="img/Orbita.jpeg" alt="Orbita">
<h2>Orbita 1060</h2>
<p> Metal, 105 x 135 x 70cm, 2025</p>
</div>
<!-- BLOQUE 5 -->
<div class="bloque">
<img src="img/Mantis2.jpg" alt="Mantis">
<h2>Mantis con Colibri</h2>
<p>
Xilografia, 37,5 x 53,5cm, 2025
</p>
</div>
<!-- BLOQUE 5 -->
<div class="bloque">
<img src="img/Tigre.png" alt="Tigre">
<h2>Venganza</h2>
<p>
Pastel graso sobre papel, 100 x 70cm, 2025
</p>
</div>
<!-- BLOQUE 6 -->
<div class="bloque">
<img src="img/img1.jpeg" alt="Tortuga">
<h2>Tortuga</h2>
<p>
Tapas de botellas, 80 x 65 x 20cm, 2023
</p>
</div>
<!-- <div class="boton">
<a href="index.html">Inicio</a><br>
</div>
<br> <br>
BOTON
<div class="boton">
<a href="contacto.html">Contacto</a>
</div>
<br> <br> -->
</div>
</body>
</html>
Contacto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contacto</title>
<style>
/* Estilo general del cuerpo */
body {
font-family: Georgia, 'Times New Roman', Times, serif, sans-serif;
background-color: #292a47;
margin: 0;
display: flex; /* Activa flexbox */
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
height: 100vh; /* Altura total de la pantalla (viewport height) */
}
.navbar {
background-color: #18132d;
overflow: hidden;
border-radius: 10px;
}
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: black;
}
/* Contenedor principal */
.contenedor {
width: 80%;
margin: auto;
margin-top: 20px;
}
/* Sección o bloque */
.bloque {
background-color: rgb(215, 225, 255);
margin: 20px 0;
padding: 20px;
border-radius: 10px;
}
.caja { /* Elemento que será centrado */
background-color: rgb(215, 225, 255); /* Fondo negro */
color: #292a47; /* Texto blanco */
padding: 30px; /* Espacio interno */
border-radius: 10px;
}
/* Imagen */
.bloque img {
width: 100%;
height: auto;
}
/* Encabezado */
.bloque h2 {
margin-top: 10px;
}
/* Texto */
.bloque p {
line-height: 1.5;
}
.boton { /* Define una clase llamada "boton" */
background-color: rgb(215, 225, 255); /* Color de fondo del botón */
color: white; /* Color del texto */
padding: 15px; /* Espacio interno (arriba, abajo, izquierda, derecha) */
width: 150px; /* Ancho fijo del botón */
text-align: center; /* Centra el texto horizontalmente */
transition: 0.3s; /* Hace que los cambios (como color) sean suaves en 0.3 segundos */
}
.boton:hover { /* Se activa cuando el mouse pasa sobre el elemento */
background-color: rgb(150, 145, 246); /* Cambia el color de fondo al pasar el mouse */
}
</style>
</head>
<body>
<!-- Contenedor principal -->
<div class="contenedor">
<div class="navbar">
<a href="index.html">Inicio</a>
<a href="obra.html">Proyectos</a>
<a href="contacto.html">Contacto</a>
</div>
<br>
<!-- BLOQUE 1 -->
<div class="caja">
<h1>Contacto</h2>
<p>Mail: correaalexander412@gmail.com</p>
<p>Instagram: @alex.corami</p>
</div>
<br> <br>
<!-- <div class="boton">
<a href="obra.html">Obra</a><br>
</div>
<br> <br>-->
<!-- BLOQUE 2
<div class="boton">
<a href="index.html">Inicio</a>
</div> -->
</div>
</body>
</html>