Ahora vamos a poner una miniatura de una imagen.
Primero hacemos una tercera página html llamada terceraPágina y ponemos el hipervínculo debajo del segundo hipervínculo en el html principal.
Quedaría así nuestro principal
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PACO WEB</title>
<link rel="stylesheet" href="CSS/estilo.css">
</head>
<body>
<h1><center>Mi Web PACO</center></h1>
<h2><u><center>El amor de mis sueños</center></u></h2>
<p><center><pre>“Eres la noche, esposa: la noche en el instante
mayor de su potencia lunar y femenina.
Eres la medianoche: la sombra culminante
donde culmina el sueño, donde el amor culmina.
Forjado por el día, mi corazón que quema
lleva su gran pisada de sol a donde quieres,
con un solar impulso, con una luz suprema,
cumbre de las mañanas y los atardeceres.
Daré sobre tu cuerpo cuando la noche arroje
su avaricioso anhelo de imán y poderío.
Un astral sentimiento febril me sobrecoge,
incendia mi osamenta con un escalofrío.
El aire de la noche desordena tus pechos,
y desordena y vuelca los cuerpos con su choque.
Como una tempestad de enloquecidos lechos,
eclipsa las parejas, las hace un solo bloque.
La noche se ha encendido como una sorda hoguera
de llamas minerales y oscuras embestidas.
Y alrededor la sombra late como si fuera
las almas de los pozos y el vino difundidas.”</center></p>
<!--Esto es un comentario -->
<p>La vida es muy <b>bonita</b><p>
<p><center>La vida es muy <b>bonita</b></center><p>
<p><u><center>La vida es muy <b>bonita</b></center></u><p>
<p><u><i><center>La vida es muy <b>bonita</b></center></i></u><p>
<p><u><i><center>La <big><big>vida</big></big> <big>es</big> <small>muy</small> <b><strike>bonita</strike></b></center></i></u><p>
<p><center>Mi piscina tiene 288<sup>3</sup> y además esta lleno de H<sub>2</sub>O</center></p>
<a href="segundaPágina"><center>Enlace a otra página</center></a>
<a href="terceraPágina"><center>Enlace tercera página</center></a>
</body>
</html>
Y ponemos esto en nuestros tercera página html.
El elemento <A> necesita una marca de apertura y una de cierre y entre ellas podemos insertar texto, imágenes y otros elementos multimedia.
Para que funcione, el elemento <A> debe estar asociado a otros atributos. De éstos, el más importante es HREF, que contiene el URL o página donde ir.
La imagen este dentro de la carpeta donde tenemos los html y dentro de la carpeta Imágenes.
<a href="Imágenes/woman-2003647_1920.jpg"><img id="fotoMiniatura1" src="Imágenes/woman-2003647_1920.jpg" hspace="1" vspace="1" name="foto3Miniatura" alt="guapa" align="middle" mi futura novia></a>
Quedaría así nuestro tercera página html:
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PACO WEB</title>
<link rel="stylesheet" href="CSS/estilo.css">
</head>
<body>
<h1><center>Tercera página</center></h1>
<a href="Imágenes/tia_buena01.jpg"><img id="fotoMiniatura1" src="Imágenes/tia_buena01.jpg" hspace="1" vspace="1" alt="guapa" align="middle" title="mi futura novia"></a>
<a href="principal"><center>Volver al principal</center></a>
</body>
</html>
Para darle estilo a esa imagen que será nuestra miniatura, en el CSS, le añadimos propiedades usando como referente el identificador en este caso llamado fotoMiniatura1, le damos anchura, altura y un borde.
Quedaría así
Código:
html {
background-color: #00539F; }
body {
color: white;
background-color: #151515; }
a {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: 900;
text-decoration: none;
color: #088A68;
border: 1px solid #FFFFFF; }
img {
display:block;
margin:auto; }
#foto1 {
width: 968px;
height: 520px;
border:"2"; }
#foto2 {
width: 968px;
height: 520px;
border:"0"; }
#fotoMiniatura1 {
width: 300px;
height: 200px;
border: 1; }
Así nos aparecerá una miniatura, que al darle click a la imagen nos mostrará la imagen a su tamaño original.
