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;}
Tema: Pseudoclases CSS link, visited, focus, hover y active display ejercicio CU01047D (Leído 3262 veces)
RSS -
WAP2