Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Boletos en 03 de Marzo 2016, 17:12
-
Hola! a todos. Dejo el ejercicio CU01054D del curso CSS desde cero aunque antes un par de dudas:
1) en el enunciado dice que las cajas contenedoras deben tener ancho de 200 píxeles, altura de 300 píxeles, y luego El div 2 debe contener una imagen con anchura 300 píxeles; es evidente que no coje.
2) al final del ejercicio dice; Antes de crear el código tendrás que preparar las imágenes: partir de una imagen con un tamaño más amplio, y con la ayuda de cualquier programa de edición de imágenes crear su gemela con menores dimensiones. Por lo que las imagenes son locales (no se donde colocarlas el la red para que podais comprobar el ejercicio.
Dicho esto, va el código.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejercicio 1055">
<meta name="keywords" content="palabras clave">
<title>Portal web - aprenderaprogramar.com</title>
<link rel="stylesheet" type="text/css" href="1055.css">
</head>
<body>
<div id="div1">
El div 1 debe contener un texto con varios links (etiqueta
<a href="div1"> de html)</a>. Al pasar el cursor sobre cualquiera de
los <a href="div1">links</a> dentro del div1 el cursor deberá ponerse en modo
help (es decir, se verá un <a href="div1">pequeño</a> interrogante junto al
cursor).
</div>
<div id="div2">
<a href="documento2.html" target="blank"><img src="(insulto)Sucia21.jpg" alt="(insulto)Sucia21.jpg"/></a>
</div>
</body>
</html>
HTML (documento2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejercicio 1055">
<meta name="keywords" content="palabras clave">
<title>Portal web - aprenderaprogramar.com</title>
<link rel="stylesheet" type="text/css" href="1055.css">
</head>
<body>
<img src="(insulto)Sucia22.jpg"/>
</body>
</html>
CSS
/*Cursor 1055*/
body{font-family:Arial, Helvetica;}
div{float:left; margin:25px; width:200px; height:300px;
border:5px solid violet;}
#div1 a:hover{cursor:help;}
#div2 img{width:300px; min-height:200px;}
#div2 img:hover{cursor:zoom-in;}
Un saludo! Y gracias!
-
Hola!
Tienes razón con las dimensiones, corregido es de la siguiente manera:
Dice: El div 2 debe contener una imagen con anchura 300 píxeles y altura igual o superior a 200 píxeles.
Debe decir: El div 2 debe contener una imagen con anchura 200 píxeles y altura igual o superior a 300 píxeles.
Para colocar imágenes en la red puedes abrirte una cuenta en imgur.com, photobucket.com, google photos ó similar, ahí subes la imagen y obtienes la ruta. Puedes leer algo más completo en https://www.aprenderaprogramar.com/foros/index.php?topic=1474.0
En el ejercicio has escrito <a href="div1"> pero esto no parece un link válido, ¿a lo mejor querías escribir <a href="#div1"> ?
Saludos!
-
Hola Boletos,
te rogaría que cuando subas los ejercicios pongas el codigo html y el css juntos, para que sea más rápido ver los resultados.
Exceptuando lo que comenta César de "<a href="#div1">" , se vé el código bien.
Te comento además otra página para imagenes que está muy chula:
http://lorempixel.com/ (http://lorempixel.com/)
Saludos.
-
Gracias a ambos por las recomendaciones.
Lo del link en efecto es error.
En adelante intentaré unir css y html.
Un saludo!