COMO SE HACE ESTO??

Hola a todo el mundo! gracias de antemano por leer este mensaje. Mi problema es la siguiente:

Necesito crear una pagina web en la que exista (por decirlo de alguna manera) una calculadora con 6 botones y que al pulsar los botones se vea como se pulsa hacia dentro y que aparezca en la pantalla.

Eso se puede hacer??como??con la hoja de estilos??con el html??

ayudaaa
hola

si se puede

seria algo asi

http://unpocodemucho.atwebpages.com/plantilla2.html

si te fijas en la barra de navegacion
tiene imagenes de fondo, y al poner el cursor arriba
se vè el cambio

esto se hace en el grupo de las "a"

en a hover, pones la imagen que debe verse al ponerte sobre el
pero antes debes tener las dos imagenes

saludos
Hola Yaneth, te felicito y te admiro por ser tan aventada en esto... en serio eres un ejemplo de mujer...
Bueno, yo estuve haciendo el curso paso a paso y quede en la lección cuarta... por cosas de tiempo no habia retomado el curso, y ahora intento terminarlo y en definitiva crear mi web con honores!

Ahora, intento ingresar a HTML KIT para continuar con el web ejemplo y seguir el curso, Abro la plantilla y me dice:
Error en el script de esta pagina, Luego me pregunta Desea continuar ejecutando scripts en esta pag? yo hago cLic en SI.
Entonces se abre la vista previa.

Bueno, en donde está el error?
Que debo hacer?

Aqui mis codigos:
PLANTILLA HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
</head>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
<body onload="init();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
  • Sección 1
  • Sección 2
  • Sección 3

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>Título de Sección 1</h1>
    <ul>
  • Enlace 1
  • Enlace 2

  • Enlace 3
  • Enlace 4
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
    pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para
    separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
    que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
    alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos Enlazan

    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web

    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    </body>


    ESTILO GENERAL CSS
    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
    text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }

    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: lorange ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menu li {list-style:none ; margin: 4px 8px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
    background-image: url(objetos/menu-parte-superior.gif) }
    #pie {border-left: black 1px solid ; border-right: black 1px solid ;
    border-top: black 1px solid ; height: 65px }
    #pie li {list-style: none ; font-size: 12px }
    #pieuno {float:left ; width:150px }
    #piedos {float:left ; width:498px }
    #pietres {float:left ; width:150px }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    #pie a {color: blue; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active {color:black}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}


    AGRADEZCO TODOS LOS CONSEJOS QUE PUEDAS BRINDARME!
    LA IDEA ES TERMINAR EN BUENA ONDA, Y NO PERDER LO ADELANTADO.

    ABRAZOS!
  • Juntos podemos construir conocimientos nuevos !!!
    HOLA:
    En mi opinion, veo demasiados <HEAD> Y </HEAD>
    CIERRAS </BODI> antes de crearlo: <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    <body onload="init();">
    Abres y cierras "divs" casi sin ton ni son

    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>
    <div id="navegacion">
    Los DIVS o CAPAS se utilizan para separar diferentes cosas asi que se deben de utilizar con un poco de vista
    aqui mezclas el menu lateral con el cuerpo o bodi

    Bueno supongo que estas siguiendo el curso paso a paso de CCTW
    no se si era en cada leccion lo que si recuerdo y te pongo creo que la leccion tercera se hace un recordatorio decomo van los codigos hasta ese momento lo busco y te pongo:

    AQUI MIRATE ESTO:
    http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…

    Haces la comparacion de lo que tu llevas puesto y lo que deberias llevar y seguro que te das cuenta que hay unos cuantos errores

    espero que no te enfades y procures seguir paso a paso las lecciones de JORGENS, todos metemos la pata y SEGUIMOS ADELANTE.
    UN SALUDO: VICENTE
    Es ESENCIAL en este mundo, para no crear vagos ENSEÑAR
    Gracias vicente, para nada... No me enfadaré, pue equivocarse y corregir lo que está torcido es parte de mi proceso.
    Seguiré tu consejo y les cuento!

    Gracias, por tu ayuda mechas gracias!

    :lol: