TIPOS DE ENLACES O LINKS
EL PASO A PASO:
1. Abre Visual Studio Code.
2. Crea una nueva carpeta para tu proyecto (ej: proyecto-mascotas).
3. Dentro de esa carpeta, crea dos archivos:
- index.html
- style.css
4. Copia y pega el código HTML en index.html.
5. Copia y pega el código CSS en style.css.
6. Ejecuta Live Server (Go Live)
7. Atentos a la explicación
CODIGO PARA index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mis Mascotas Favoritas</title>
<!-- Enlazamos la hoja de estilos CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 id="inicio">Todo Sobre Mascotas</h1>
<p>¡Bienvenido a nuestra página dedicada a las mascotas!</p>
<!-- Navegación Interna (Enlaces dentro de la misma página) -->
<nav>
<h2>Navegación Rápida</h2>
<ul>
<li><a href="#perros">Ir a la sección de Perros</a></li>
<li><a href="#gatos">Ir a la sección de Gatos</a></li>
<li><a href="#aves">Ir a la sección de Aves</a></li>
<li><a href="#enlaces-externos">Ir a Enlaces Externos</a></li>
</ul>
</nav>
</header>
<main>
<!-- Sección Perros -->
<section id="perros">
<h2>Perros: El Mejor Amigo del Hombre</h2>
<p>Los perros son conocidos por su lealtad y compañerismo. Hay cientos de razas, cada una con sus características únicas.</p>
<img src="http://edutechsiglo21.com/2025/perro.jpg" alt="Ilustración de un perro feliz">
<p>
<!-- Enlace de Texto Externo (se abre en la misma ventana/pestaña) -->
<a href="https://es.wikipedia.org/wiki/Canis_familiaris" target="_self">
Aprende más sobre perros en Wikipedia (misma ventana)
</a>
</p>
</section>
<!-- Sección Gatos -->
<section id="gatos">
<h2>Gatos: Elegantes e Independientes</h2>
<p>Los gatos son mascotas fascinantes, conocidas por su independencia pero también por su cariño.</p>
<p>
<!-- Enlace de Texto Externo (se abre en una NUEVA ventana/pestaña) -->
<a href="https://es.wikipedia.org/wiki/Felis_silvestris_catus" target="_blank">
Descubre más sobre los gatos (se abre en nueva pestaña)
</a>
</p>
<!-- Enlace de Imagen Externo (se abre en una NUEVA ventana/pestaña) -->
<a href="https://www.purina-latam.com/co/purina/nota/gatos/10-datos-curiosos-sobre-los-gatos" target="_blank">
<img src="http://edutechsiglo21.com/2025/gato.jpg" alt="Ilustración de un gato curioso. Haz clic para ver datos curiosos.">
</a>
<p>Haz clic en la imagen de arriba para ver datos curiosos sobre gatos (en una nueva pestaña).</p>
</section>
<!-- Sección Aves -->
<section id="aves">
<h2>Aves: Color y Canto en Casa</h2>
<p>Las aves como canarios o periquitos pueden llenar el hogar de alegría con sus cantos y colores.</p>
<!-- Enlace de Imagen Externo (se abre en la MISMA ventana/pestaña) -->
<a href="https://www.expertoanimal.com/aves/tipos-de-pajaros-domesticos-nombres-y-fotos-24742.html" target="_self">
<img src="http://edutechsiglo21.com/2025/ave.jpg" alt="Ilustración de un ave. Haz clic para ver tipos de aves domésticas.">
</a>
<p>Haz clic en la imagen de arriba para ver tipos de aves domésticas (en la misma pestaña).</p>
</section>
<!-- Sección Enlaces Externos de Ejemplo -->
<section id="enlaces-externos">
<h2>Más Enlaces de Interés (Externos)</h2>
<ul>
<li>
<!-- Texto como enlace, abre en nueva pestaña -->
<a href="https://www.adoptanocompres.org/" target="_blank">
Adopta una Mascota (Nueva Pestaña)
</a>
</li>
<li>
<!-- Texto como enlace, reemplaza la ventana actual -->
<a href="https://www.tiendanimal.es/">
Tienda de productos para mascotas (Misma Pestaña)
</a>
</li>
</ul>
</section>
</main>
<footer>
<hr>
<!-- Enlace Interno para volver al inicio -->
<p><a href="#inicio">Volver Arriba</a></p>
<p>Página para aprender tipos de enlaces.</p>
</footer>
</body>
</html>
CODIGO PARA style.css
/* Estilos muy básicos para la página de mascotas */
body {
font-family: sans-serif; /* Fuente simple y legible */
line-height: 1.6; /* Espacio entre líneas para mejor lectura */
margin: 20px; /* Margen alrededor de toda la página */
background-color: #f8f8f8; /* Un fondo gris muy claro */
color: #333; /* Color de texto principal oscuro */
}
header, main, footer {
max-width: 800px; /* Ancho máximo para que no sea demasiado ancho en pantallas grandes */
margin: 0 auto; /* Centra el contenido principal */
}
header {
text-align: center; /* Centra el título y la intro */
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #ddd; /* Línea divisoria */
}
h1 {
color: #0056b3; /* Un color azul para el título principal */
}
h2 {
color: #28a745; /* Un color verde para los subtítulos */
margin-top: 40px; /* Espacio antes de cada sección */
border-bottom: 1px solid #eee; /* Línea sutil bajo los H2 */
padding-bottom: 5px;
}
nav ul {
list-style-type: none; /* Quita los puntos de la lista */
padding: 0; /* Quita el padding por defecto de la lista */
margin-top: 15px;
}
nav li {
display: inline-block; /* Coloca los elementos de la lista en línea */
margin: 0 10px; /* Espacio entre los elementos de navegación */
}
section {
background-color: #ffffff; /* Fondo blanco para las secciones */
padding: 20px; /* Espacio interno en las secciones */
margin-bottom: 20px; /* Espacio debajo de cada sección */
border-radius: 5px; /* Bordes redondeados suaves */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}
a {
color: #007bff; /* Color azul estándar para enlaces */
text-decoration: none; /* Quita el subrayado por defecto */
}
a:hover {
text-decoration: underline; /* Añade subrayado al pasar el ratón */
color: #0056b3; /* Oscurece un poco el color al pasar el ratón */
}
nav a {
font-weight: bold; /* Enlaces de navegación en negrita */
}
img {
max-width: 100%; /* Asegura que las imágenes no se salgan del contenedor */
height: auto; /* Mantiene la proporción de la imagen */
display: block; /* Facilita centrar o añadir márgenes */
margin: 15px auto; /* Margen arriba/abajo y centrado horizontal */
border-radius: 4px; /* Bordes redondeados leves para imágenes */
}
/* Estilo específico para imágenes que son enlaces */
a img {
border: 2px solid transparent; /* Borde inicial transparente */
transition: border-color 0.3s ease; /* Transición suave para el borde */
}
/* Efecto al pasar el ratón sobre una imagen que es enlace */
a:hover img {
border-color: #007bff; /* Muestra un borde azul al pasar el ratón */
opacity: 0.9; /* Leve transparencia */
}
footer {
text-align: center;
margin-top: 40px;
padding-top: 20px;
font-size: 0.9em;
color: #666;
}
footer a {
color: #555; /* Color un poco más oscuro para el enlace del footer */
}
No hay comentarios:
Publicar un comentario