Entradas

Mostrando las entradas de septiembre, 2022

JS interno, imagenes

Imagen
  Ejercicio 7b      1. Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma interna, a través de dos botones. Los cuales cambien la imagen que quiera visualizar. A diferencia del ejercicio 6b, hacerlo a través de una variable ... index.html <!DOCTYPE html> <html>   <head>     <title>Cambiar imagen</title>     <script>         function clima(estado) {           var pic;           if (estado == 1) {             pic = "sol.jpg";           } else {             pic = "nube.jpg";           }           document.getElementById("Imagen").src = pic;         }       </script>   </head>   <body>     <h1>Otra opción del ejercicio 6b</h1>     <img id="Imagen" src="sol.jpg" width="500" height="500" />     <p>       <button type="button" onclick="clima(1)">Soleado</button>
Publicar un comentario
Leer más

JS externo

 Ejercicio 38     1.  Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma externa, a través de un botón. El cual haga desaparecer visualmente el párrafo ... index.html <!DOCTYPE html> <html>     <head>         <title>JS externo</title>         <script src="myScript.js"></script>     </head>     <body>         <p id="ocultarParrafo">Este párrafo es visible</p>         <button onclick="myFunction()">Ocultar párrafo</button>     </body> </html> ... myScript.js function myFunction(){     document.getElementById('ocultarParrafo').style.display='none'; } ...
Publicar un comentario
Leer más

Js interno

Ejercicio 37     1.  Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma interna, a través de un botón. El cual haga cambiar el párrafo ... <!DOCTYPE html> <html>     <head>         <title>JS interno</title>         <script>             function myFunction() {                 document.getElementById("parrafo").innerHTML = "Se cambió el párrafo";             }         </script>     </head>     <body>         <p id="parrafo">Este es el párrafo antes de ser cambiado</p>         <button type="button" onclick="myFunction()">Cambiar párrafo</button>     </body> </html> ...
Publicar un comentario
Leer más

JS en linea, imágenes

Imagen
 Ejercicio 6b      1. Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma en línea, a través de dos botones. Los cuales cambien la imagen que quiera visualizar ... index.html <!DOCTYPE html> <html>     <head>         <title>JS en línea - cambio imagen</title>     </head>     <body>         <h1>Cambiar imagen con dos botones</h1>         <img id="clima" src="sol.jpg" style="width:500px">         <p>             <button onclick="document.getElementById('clima').src='sol.jpg'">Soleado</button>             <button onclick="document.getElementById('clima').src='nube.jpg'">Nubblado</button>         </p>     </body> </html> ...
Publicar un comentario
Leer más

JS en línea

 Ejercicio 36     1.  Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma en línea, a través de un botón. El cual haga cambiar el estilo de un párrafo ... index.html <!DOCTYPE html> <html>   <head>     <title>JS en línea</title>   </head>   <body>     <h1>Cambiar el estilo del párrafo</h1>     <p id="estilo">       En este página podés cambiar el estil de este párrafo haciendo click en el       botón de abajo     </p>     <!-- <button onclick="document.getElementById('estilo').style.fontSize='250%'">         Cambiar estilo del párrafo     </button> -->     <button       onclick="document.getElementById('estilo').style.fontFamily='Courier'"     >       Cambiar estilo del párrafo     </button>   </body> </html> ...
Publicar un comentario
Leer más

Disposición de estructura de la página con CSS

Imagen
Ejercicio 35 Viendo las características de la siguiente página, resolverla de la misma manera index.html <!DOCTYPE html> <html>     <head>         <title>Pagina visual</title>         <style>             * {             box-sizing: border-box;             }             header{                 background-color: darkslategray;                 padding: 30px;                 text-align: center;                 font-size: 35px;                 color: white;             }             nav{                 float: left;                 width: 30%;                 background-color: darksalmon;                 padding: 20px;                 color: darkslategray;             }             nav ul {             list-style-type: none;             padding: 0;             }             main{                 float: right;                 padding: 20px;                 width: 70%;                 background-color: white;                 color: black;             }    
Publicar un comentario
Leer más

Formulario 2

Imagen
 Ejercicio 34 Viendo las características de la siguiente página, resolverla de la misma manera --- index.html <!DOCTYPE html> <html lang="es">   <head>     <title>Formulario de prueba</title>   </head>   <body style="background: lightcoral">     <h1>Formulario de prueba</h1>     <form id="form-order"> <!-- Formulario -->       <p>         <label for="name">Nombre (obligatorio) </label>         <input           type="text"           name="name"           id="name"           placeholder="Dafne Perron"           autofocus           autocomplete           required         />       </p>       <p>         <label for="passwd">Contraseña (obligatorio) </label>         <input           type="password"           name="passwd"           id="passwd"           place
Publicar un comentario
Leer más

Formulario

Imagen
 Ejercicio 33 Viendo las características de la siguiente página, resolverla de la misma manera --- index.html <html>   <head>     <title>Formulario de prueba 2</title>   </head>   <body>     <form>       <fieldset>         <legend>Datos personales</legend>         <label for="nombre">Nombre</label>         <input type="text" id="nombre" name="nombre" value="Dafne" />         <label for="apellido">Apellido</label>         <input type="text" id="apellido" name="apellido" value="Perron" />       </fieldset>       <p>         <label for="color">Elija un color</label>         <select name="color" id="color"> <!--podría hacerlo con un datalist-->           <optgroup label="Colores primarios">             <option val
Publicar un comentario
Leer más