Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 30 de Marzo 2017, 02:41
-
Ejercicio CU01047D del tutorial básico de desarrollo web con CSS y editor Notepad++.
HTML:
<!DOCTYPE html>
<!-- Código base para el curso CSS -->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS-Pseudoclases(47)-pseudoclases-final.css">
</head>
<body>
<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<br/>
<div>
<div>
<div>Menú</div>
<hr/>
<ul>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Inicio </span> </a> </li>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Libros de Computación </span> </a> </li>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Cursos de Computación </span> </a> </li>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Humor informatico </span> </a> </li>
</ul>
</div>
<div>
<div>
<p id="textoinline">Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
<p id="textoinline">Hay que tener claro que <a href="https://www.aprenderaprogramar.com">aprender programación</a> <div id="celeste"> </div> no es tarea de un día ni de una semana:
aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días
podemos estar haciendo nuestros primeros programas.</p>
<p id="textoinline">Puedes seguir uno de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros cursos</a> <div id="celeste"> </div> entre los varios disponibles.
Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidas otras alternativas como Crimson Editor.</p>
<a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas-informaticas&Itemid=179">
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
</a>
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">
</div>
<br/>
<form method="get" action="accion.html">
Si quieres contactar con nosotros envíanos este formulario relleno: <br /><br />
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Dirección: <input type="text" name="direccion" /><br />
Correo electrónico: <input type="text" name="correo" /><br />
Mensaje: <textarea name="mensaje" cols=30 rows=2></textarea><br /><br />
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</form>
</div>
</div>
<br/> <br/> <br/>
<div>
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo apr" title="Logo aprenderaprogramar.com">
Copyright 2006-2038 aprenderaprogramar.com
</div>
</body>
</html>
CSS
a:visited {color:brown;}
#rosa {margin-bottom:-14px;
width:38px; height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
#rosa:hover{background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
li {list-style-type:none; text-decoration:none;}
li a {font-weight:bold; color:#B22222; position:relative; right:-46px; top:-15px;}
p a {color:blue; font-weight:bold; text-decoration:none;}
p a:hover{color:orange;}
#celeste {
display:inline-block;
position:relative;
top:10px;
width:38px;
height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
#celeste:hover {background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
p#textoinline {display:inline-block;}
-
Hola alefaletti,
a mi el código no me funciona bien. Por lo menos las imagenes que deben aparecer no las veo.
te pediria que aunque fuera solamente para cuando subieras los ejercicios que pusieras el código CSS y HTML dentro del mismo archivo. Así es mucho más fácil poder ver los códigos.
Saludos.
-
bermartinv, muchas gracias de nuevo por tu ayuda!
Mira, te paso el link del ejercicio, lo subi para ver como funciona.
Te adjunto el CSS debajo. Decime cualquier cosa por favor:
http://elsitiodeale.byethost7.com/CSS(47)Pseudoclases-EjFinal.html
CODIGO CSS:
a:link {color:red;}
a:visited {color:brown;}
#rosa {margin-bottom:-14px;
width:38px; height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
#rosa:hover{background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
li {list-style-type:none; text-decoration:none;}
li a {font-weight:bold; color:#B22222; position:relative; right:-46px; top:-15px;}
p a {color:blue; font-weight:bold; text-decoration:none;}
p a:hover{color:orange;}
#celeste {
display:inline-block;
position:relative;
top:10px;
width:38px;
height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
#celeste:hover {background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
p#textoinline {display:inline-block;}
-
Ahora si me funciona, después de bastante tiempo dandole vueltas, me puse a meter código CSS y me dí cuenta que mi editor al haber hecho copia-pega del css, no interpretaba la url de los background. Pero el ejercicio está correcto, perdona por haberte dicho que no estaba bien el ejercicio. De todas maneras pasa algo raro, no sé si son por las direcciones de los background-image, yo creo que crea algo de conflicto entre los navegadores y el servidor de las url.
Saludos.