Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Temas - KOFFERO

Páginas: 1 [2] 3
21
Hola amigos aquí dejo el ejercicio CU00816B del tutorial de programación web con PHP, al principio me costó resolver el segundo ejercicio, pero busque en los hilos del foro, y encontre y entendi algunas cosas que estaba haciendo mal.

Yo por ejemplo queria poner todo el código HTML en un "echo", pero me saltaba un error, a la hora de probar dicho código, entonces dije "voy a poner varios echos en cada etiqueta html que creo", pero tampoco funcionó, y cuando miré esta solución: https://www.aprenderaprogramar.com/foros/index.php?topic=4505.msg18528#msg18528, al principio no me salía como estaba en ese hilo, pero me di cuenta que a la hora de poner comillas dobles en un echo, y cuando creaba una etiqueta HTML, y si esa etiqueta tenia un atributo debia usar comillas simple, porque si usaba comillas doble en el echo y en el atributo no me mostraba nada a la hora de cargar la página.

Espero me haya explicado bien.

Enunciado:
Citar
EJERCICIO 1

Crea el siguiente archivo y súbelo mediante ftp al directorio raíz de tu sitio web. El archivo llevará por nombre curso3.php y en él debe existir la estructura de un documento HTML, aparecer en la parte superior de la página un título h1 con el texto <<Cursos aprenderaprogramar.com>>, seguido de un título h2 con el texto <<Curso php desde cero>>, y a continuación hacer que se muestre usando echo el siguiente texto dentro de un div con color de fondo amarillo: <<Curso php de aprenderaprogramar.com usando la instrucción echo>>. Debajo de este texto debes usar echo para crear un contenedor div con color de gris donde pueda leerse “Este es el pie de página”. Comprueba que el archivo se visualiza al escribir la dirección web correcta que será similar a http://apr2.byethost7.com/curso3.php (en tu caso, tendrás que escribir la dirección web que estés utilizando para el curso). Responde a esta pregunta: ¿Cuál es el código que contiene el archivo? ¿Cuál es la dirección web para acceder al archivo y visualizar el texto?

Código:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
                <head>
                  <title>Ejercicio CU00816B</title>
                  <meta charset="UTF-8" />
                  <style type="text/css">
                    body{
                    text-align: center;
                    }
                    #header, #footer{
                    border: solid 2px;
                      width: 50%;
                        background-color: darkgray;
                          margin: auto;
                    }
                         
                  </style>
                </head>
                <body>
                    <div id="header">
                      <h1>Cursos aprenderaprogramar.com.</h1>
                      <h2>Curso php desde cero.</h2>
                    </div>
                    <br/>
                    <div style="background-color: yellow; width: 50%; margin: auto; border: solid 2px;">
                      <?php
                                  
echo "Curso php de aprenderaprogramar.com usando la instrucción echo";
                       ?>

                    </div>
                    <br/>
                    <?php
                           
echo "<div id='footer'>Este es el pie de página</div>";
                    ?>

                </body>
</html>

Dirección: http://jorgeprogramas.byethost18.com/curso3.php

Citar
EJERCICIO 2

Crea un archivo php donde no exista html directamente pero que genere una página web con todo el código html que lleva normalmente (introduce las etiquetas html, head, title, meta charset, body, algunos párrafos de texto y algunas imágenes). Para hacer esto toda la estructura de la página web debe ser insertada a través de instrucciones echo. Responde a esta pregunta: ¿Cuál es el código que contiene el archivo? ¿Cuál es la dirección web para acceder al archivo y visualizar el texto?

Código:
Código: [Seleccionar]
<?php
 
echo "<html>";
 echo 
"<head>";
 echo 
"<title>Ejercicio 2</title>";
 echo 
"<meta charset='utf-8'/>";
 echo 
"</head>";
 echo 
"<body style='text-align: center;'>";
 echo 
"<p>Mi imágen</p>";
 echo 
"<img src='http://vignette3.wikia.nocookie.net/charlotte-anime/images/5/50/Wiki-background/revision/latest?cb=20170312163235' width='600px' />";
 echo 
"<p>Charllotte</p>";
 echo 
"</body>";
 echo 
"</html>";
?>



Dirección: http://jorgeprogramas.byethost18.com/curso32.php

Un saludo. :D

22
Hola amigos, ejercicio CU00815B del tutorial pdf de programación en PHP; puse otro contenedor "div", para la cabecera, donde se encuentran el h1 h2, y un color de fondo para dicho contenedor.

Enunciado:
Citar
Crea el siguiente archivo y súbelo mediante ftp al directorio raíz de tu sitio web. El archivo llevará por nombre curso2.php y en él debe existir la estructura de un documento HTML, aparecer en la parte superior de la página un título h1 con el texto <<Cursos aprenderaprogramar.com>>, seguido de un título h2 con el texto <<Curso php desde cero>>, y a continuación hacer que se muestre insertando php el siguiente texto. <<Curso php de aprenderaprogramar.com comenzado el 24/09/2083>> donde la fecha a incluir sea la fecha en que hayas subido el archivo. Debajo de este texto debes crear un contenedor div con color de fondo amarillo donde pueda leerse “Este es el pie de página”. Comprueba que el archivo se visualiza al escribir la dirección web correcta que será similar a http://apr2.byethost7.com/curso2.php (en tu caso, tendrás que escribir la dirección web que vayas a utilizar para el curso). Responde a esta pregunta: ¿Cuál es el código que contiene el archivo? ¿Cuál es la dirección web para acceder al archivo y visualizar el texto?

El código:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
        <head>
        <title>Ejercicio CU00815B - apremderaprogramar.com</title>
<meta charset="UTF-8" />
<style type="text/css">
        #cabecera{
border: solid 2px;
  width: 50%;
     background-color: gray;
}
#pie{
width: 50%;
  border: solid 2px;
     background-color: yellow;
}
body{
text-align: center;
}
#cabecera, #pie{margin: auto;}
</style>
</head>
<body>
        <div id="cabecera">
       <h1>Cursos aprenderaprogramar.com</h1><br/>
   <h2>Curso php desde cero</h2>
</div>
<?php
  echo "Curso php de aprenderaprogramar.com comenzado el 13/10/2017";
?>

<br/>
<div id="pie">
      Este es el pie de página
</div>
</body>
</html>

Y la dirección: http://jorgeprogramas.byethost18.com/curso2.php

Un saludo. ;D

23
Subir ficheros al servidor (FTP). Trajabar en remoto. Crear una página web con programación PHP (Ejercicio CU00814B del tutorial pdf de programación PHP)

Enunciado:
Citar
EJERCICIO

Crea los siguientes archivos y súbelos mediante ftp al directorio raíz de tu sitio web:

a) Crea un archivo denominado curso.php donde aparezca el siguiente texto. <<Curso php de aprenderaprogramar.com comenzado el 24/09/2083>> donde la fecha a incluir sea la fecha en que hayas subido el archivo. Comprueba que el archivo se visualiza al escribir la dirección web correcta que será similar a http://apr2.byethost7.com/curso.php (en tu caso, tendrás que utilizar la dirección web que vayas a utilizar para el curso). Responde a esta pregunta: ¿Cuál es el código que contiene el archivo? ¿Cuál es la dirección web para acceder al archivo y visualizar el texto?

b) Crea un archivo denominado alumno.php donde aparezca el siguiente texto. <<Curso php de aprenderaprogramar.com alumno Juan Perez desde el país: Colombia>> donde el nombre a incluir será tu nombre y el país tu país. Comprueba que el archivo se visualiza al escribir la dirección web correcta que será similar a http://apr2.byethost7.com/alumno.php (en tu caso, tendrás que utilizar la dirección web que vayas a utilizar para el curso). Responde a esta pregunta: ¿Cuál es el código que contiene el archivo? ¿Cuál es la dirección web para acceder al archivo y visualizar el texto?

a)

El código que tiene:
Código: [Seleccionar]
<?php
   
echo "Curso php de aprenderaprogramar.com comenzado el 13/10/2017";
?>
Y la dirección: http://jorgeprogramas.byethost18.com/curso.php

b)

El código:
Código: [Seleccionar]
<?php
    
echo "Curso php aprenderaprogramar.com alumno Jorge Pucheta desde el país: Colombia";
?>
Y la dirección: http://jorgeprogramas.byethost18.com/alumno.php

Un saludo. :D

24
Trabajar en local con WAMP, XAMPP o similar, o con un servidor remoto PHP. ¿Qué es mejor? (Ejercicio del curso de PHP desde cero CU00812B)

Enunciado:
Citar
EJERCICIO

Indica si las siguientes afirmaciones son verdaderas o falsas y justifica brevemente tu respuesta:

a) Trabajar en remoto en desarrollos web alude a que la persona que crea la página web realiza el trabajo desde distintos puntos de conexión, lo que permite por ejemplo que cree una página web mientras está viajando.

b) Hoy día es posible disponer de forma gratuita de una dirección web y servicio de hosting gratuito, con lo cual podemos crear páginas web basadas en PHP sin necesidad de contratar un servicio de hosting.

c) Las grandes empresas siempre trabajan en local (en sus propios computadores) antes de trasladar los cambios a los servidores de producción, con el fin de evitar caídas del servicio.

d) WampServer permite emular un servidor en nuestro propio computador. También haría posible que nuestro computador funcionara como servidor remoto para servir contenidos a través de internet.

Respuesta:

a) Falso, ya que la persona que crea la página, si podrá realizar el trabajo
de distintos puntos, si no tiene internet, puede trabajar en local, y si tiene internet, en remoto. Y despues podrá subir su trabajo en el servidor remoto.

b) Verdadera, por la mayoria de los hoting son gratuitos y podemos crear páginas basadas en PHP.

c) Falso, porque trabajan en los servidores remotos, y hay tienen un servidor de prueba, donde ensayan los cambios.

d) Verdadera, porque si se puede emular un servidor, y con WampServer si podemos hacerle funcionar como servidor remoto.

Un saludo. ;D

25
Hola amigos aquí el ejercicio CU00805B del tutorial de programación web con PHP desde cero.

Enunciado:
Citar
EJERCICIO

Responde a las siguientes preguntas indicando verdadero o falso y justicando brevemente tu respuesta:

a) Hoy día ya no tiene sentido crear una página web estática, ya que los navegadores dejarán de admitirlas en un futuro próximo.

b) Podemos reconocer si una página web es dinámica en base a si es capaz de almacenar información que el usuario proporciona y rescatarla posteriormente. Por ejemplo: los comentarios en un blog.

c) La mayor parte de los sitios web y gestores de contenidos hoy día se basan en páginas web dinámicas, pero muchos sitios siguen siendo webs estáticas.

d) Si creamos un sitio web dinámico no podremos ser indexados por buscadores como Bing, Google o Yahoo.

Respuestas:


a) Falso, ya que si tiene sentido crear páginas estáticas, solamente que esta tendrá el mismo contenido. Y los navegadores no van dejar de administrarlas. Creo yo, que todas las páginas deben ser dinámicas, asi pues, podran autualizar el contenido
de la página, sin que tener que escribir todo el código para hacer un cambio.

b) Verdadera, si, porque el usuario si deja un comentario significa que la web es dinámica, ya que este se queda almacenado en la base de datos.
Y luego otro usuario podríar ver ese comentario y ver el cambio.

c) Verdadera, y si, casi todas las páginas estan hechas de forma dinámicas, y otras de forma estáticas.

d) Falso, ya que estos buscadores ya pueden indexar o registrar las páginas dinámicas en la actualidad.

Un saludo. :D

26
Comunicación cliente - servidor sin PHP y con PHP. Intérprete PHP y gestor de bases de datos. (CU00804B)

Hola amigos, aquí dejo mi respuestas al primer ejercicio del curso básico de PHP.

Enunciado:
Citar
EJERCICIO

Responde a las siguientes preguntas indicando verdadero o falso y justicando brevemente tu respuesta:

a) Todos los servidores web trabajan con PHP, ya que es la única manera de conseguir que se muestre una página web en el computador cliente.

b) El código HTML generado con PHP no es distinguible del código HTML generado manualmente, a no ser que contemos con alguna información adicional.

c) HTML es un lenguaje de programación que permite decidir y repetir, pero carece de funcionalidades de acceso a bases de datos.

d) Para crear páginas web dinámicas HTML es un lenguaje obsoleto. Para su creación usaremos PHP u otro lenguaje de última generación.

Respuestas:
a) Falso, ya que no es la ínica manera de mostrar una pagina, esta la estática.

b) Falso, ya que los dos son código HTML, y no sabemos de donde viene exactamente, y quien nos lo envia.

c) Falso, HTML no tiene esas funciones, solamente con el podemos enviar la información mas rápido al cliente, el que si tiene esas funciones de decidir y repetir es
PHP.


d) Falso, ya que HTML no es un lenguaje obsoleto, siempre va estar relacionado con la creación de páginas web. Y con HTML si podemos crear páginas dinámicas juntandole con PHP.

Un saludo :)

27
Selectores CSS: id. Aplicar CSS a partes de una web. Ejemplos. Diferenciar etiquetas HTML en ids (Ejercicio CU01011D del curso básico de programación CSS)

Enunciado:
Citar
Analiza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos id para cada una de ellas con valores <<novedades>> para la primera, <<xFashion>> para la segunda y <<tMotion>> para la tercera.

b) Usando CSS establece como color de texto el rojo (red) para los elementos h1 que se encuentren dentro del elemento con id <<novedades>>.

c) Usando CSS establece como color de texto el verde para los elementos h3 que se encuentren dentro de los elementos con id <<xFashion>> y <<tMotion>>.

d) Usando CSS establece como color de fondo para el elemento con id <<novedades>> el amarillo (yellow).

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="novedades">
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>
<div id="xFashion">
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
</div>
<div id="tMotion">
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>

Código CSS:
Código: [Seleccionar]
/* Color red para el h1 de novedades*/
#novedades h1{
color: red;
  background-color: yellow;
}

/* Color green para los h3 de xFashion y tMotion*/
#xFashion h3, #tMotion h3{
color: green;
}

Un saludo ;D

28
Selector de clases CSS: class. Aplicar estilos CSS en distintos lugares de una web. Ejemplos. (Ejercicio CU01012D del curso básico de programación CSS)

Enunciado:
Citar
EJERCICIO

Analiza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y <<secundario>> para la segunda y la tercera.

b) Usando CSS establece como color de texto el rojo (red) y tamaño de fuente el 150% respecto de lo normal para los elementos cuyo valor class sea <<principal>>.

c) Usando CSS establece como color de texto el verde para los elementos y tamaño de fuente el 110% respecto de lo normal para los elementos cuyo valor class sea <<secundario>>.

d) Usando CSS establece como color de fondo para los párrafos dentro de elementos cuyo atributo class sea <<secundario>> el amarillo (yellow).

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head><title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com" />
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div class="principal"><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>
<div class="secundario">
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
</div>
<div class="secundario">
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>

Código CSS:
Código: [Seleccionar]
/* Color rojo y temaño de letra 150% para todos los elementos*/
.principal{
color: red;
  font-size: 150%;
}
/* Color verde y temaño de letra 110% para todos los elementos*/
.secundario{
color: green;
  font-size: 110%;
}
.secundario p{
background-color: yellow;
}

Un saludo. ;D

29
Tipos básicos de estilos CSS: estilos por defecto y CSS en línea (inline). Sobreescritura de estilos (ejercicio CU01009D del curso básico de programación CSS)

Enunciado:
Citar
Modifica el código HTML anterior para cumplir con estos requisitos mediante la aplicación de estilos en línea:

a) La etiqueta h1 debe mostrar su texto en color rojo.

b) La etiqueta h3 con el texto relativo a X-FASHION debe mostrar su texto en color verde.

c) La etiqueta h3 con el texto relativo a X-MOTION debe mostrar su texto en color azul.

d) Todos los párrafos deben mostrar su texto en color brown (marrón).

Código ya modificado:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
</head>
<body>
<p style="color: brown;"><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
<h1 style="color: red;">Novedades</h1>
<p style="color: brown;">Aquí presentamos las novedades del sitio.</p>
<h3 style="color: green;">Lanzamos el producto X-FASHION</h3>
<p style="color: brown;">Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3 style="color: blue;">Mejoramos el producto T-MOTION</h3>
<p style="color: brown;">Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>

Un saludo. ;D

30
Formas de aplicar CSS: interno y externo. link rel y archivos de extensión css. Comentarios CSS (entrega CU01010D del curso básico de programación CSS)

Enunciado:
Citar
EJERCICIO 1

Modifica el código HTML mostrado a continuación para cumplir con estos requisitos mediante la aplicación de estilos internos:

a) Todas las etiquetas h1 deben mostrar su texto en color rojo.

b) Todas las etiquetas h3 deben mostrar su texto en color verde.

c) Todos los párrafos deben mostrar su texto en color brown (marrón).

Código ya modificado:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
<style type="text/css">
         h1{
    color: red;
}
h3{
    color: green;
}
p{
   color: brown;
}
</style>
</head>
<body>
<p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>

Segundo enunciado:
Citar
EJERCICIO 2

Modifica el código HTML del ejercicio anterior para cumplir con estos requisitos mediante la aplicación de CSS externo definido en un archivo independiente, donde debes incluir al menos un comentario:

a) Todas las etiquetas h1 deben mostrar su texto en color azul.

b) Todas las etiquetas h3 deben mostrar su texto en color orange (naranja).

c) Todos los párrafos deben mostrar su texto en color brown (marrón).

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>

Código CSS:
Código: [Seleccionar]
/* Color rojo para los h1*/
h1{
color: blue;
}
/* Color verde para los h3*/
h3{
color: orange;
}
/* Color marron para los párrafos*/
p{
color: brown;
}

Un saludo. ;D

31
Hola amigos, estoy enpezando el curso de CSS, y este es mi primer ejercicio del curso css de aprenderaprogramar, ejercicio CU0108D.

Enunciado:
Citar
EJERCICIO

Analiza el siguiente código HTML y crea dos esquemas. Un esquema de organización utilizando llaves como hemos visto anteriormente, y otro esquema que refleje las cajas que intervienen en el documento HTML, siguiendo el ejemplo visto anteriormente.

Código a analizar:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
 <head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
</head>
 <body>
 <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>

Esquema 1:
                                     

Esquema 2:
                                     

Los esquemas que hice no son la gran cosa, pero lo que yo creo, es mejor entender como los navegadores interpretan los documentos HTML.

Un saludo. :D

32
Ejercicio CU00730B del curso de programación web con HTML desde cero.

Enunciado:
Citar
EJERCICIO

Crea tres archivos HTML con diferente contenido y guárdalos con tres nombres de archivo distintos, por ejemplo webpage1.html, webpage2.html y webpage3.html. Establece links entre cada una de las páginas webs para que se pueda pasar de una a otra, por ejemplo desde webpage1.html hemos de poder pasar con un link a webpage2.html y webpage3.html, etc.. A continuación sube los tres documentos HTML al servidor y comprueba que puedan visualizarse y navegar mediante los links entre una página y otra.

Código HTML 1:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
        <head>
        <title>Tutoriales de PC - jorgeprogramas.byethost18.com</title>
<meta charset="UTF-8" />
</head>
<body>
     <!-- contenedor de la página -->
        <div style="width: 840px; margin: auto; border: solid 2px gray; text-align: center;">

<!-- cabecera de la página -->
       <div id="header">
   <img src="img/img1.png" alt="header" title="jorgeprogramas"  />
   <h1>Tutoriales de PC, aprensizaje de usos de programas.</h1>
   </div>
     <!-- fin de la cabecera -->

<!-- menú de la página -->
   <div id="menu">
   <h3>Contenidos del menú:</h3>
          <ul>
   <li><a href="contec2.html">Descargar Winkawaks 1.65</a></li>
   <li><a href="contec1.html">Descargar RipSM 75</a></li>
  </ul>
   </div>
<!-- fin del menú -->

<!-- cuerpo de la página -->
<br/><br/>
   <div id="cuerpo">
         <h4>Hola amigos ?</h4>
<p>En esta ocación les presento mi simple página de inicio, por ahora es bastante simple, pero mas adelante ya le haré mas modificaciones.
Por lo tanto quiero contarle de que se tratará esta web</p>

<p>La web, simplemente lo hice para enseñar como descargar algunos programas, y como usarlos, ya luego haré otro tipo de tutoriales. Pero mientras tanto esta
página básica, que es para el ejericio del curso de HTML de <a href="https://aprenderaprogramar.com/" target="_blank">aprenderaprogramar.com</a>, espero le guste.</p>

<p>Voy crear tres archivos <b>HTML</b>, aparte del inicio de la web, ya que cree tres items en el menú y no quedaria bien si pongo inicio en el primer items.</p>

<p>Un saludo. ;)</p>
   </div>
   <!-- fin del cuerpo -->
   
   <!-- pie de la página -->
   <br/><br/>
   <div id="footer">
     <img src="img/img2.png" alt="footer" title="pie de la página web" width="150px" /><span>Copyright 2000-2017 jorgeprogramas.com</span>
   </div>
           <!-- fin del pie -->    
</div>
</body>
</html>

Código HTML 2:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
       <head>
           <title>Descargar e instalar RipSM Versión 75 - jorgeprogramas.byethost18.com</</title>
   <meta charset="UTF-8" />
   </head>
   <body>
           <div style="width: 840px; text-align: center; margin: auto; border: solid 2px gray;">
          <div id="header">
  <img src="img/img1.png" alt="header" title="jorgeprogramas"  />
  </div>
  <br/><br/>
  <div id="menu">
  <h4>Elementos del menú:</h4>
         <ul>
      <li><a href="index.html">Inicio</a></li>
  <li><a href="contec2.html">Descargar Winkawaks 1.64</a></li>
</ul>
  </div>
  <div id="cuerpo">
  <br/>
         <h1>Descargar RipSM Versión 75</h1>
<h3>Hola amigos ?</h3>
<p>En esta ocación les voy a enseñar como descargar y usar <b>RipSM</b>, para que puedan descargar sus mangas favoritos.
Bueno lo primero que tienen que hacer es ir a la siguiente dirección que les dejo <a href="http://realidadscans.org/comunidad/viewtopic.php?t=6">aquí</a>.
En la siguiente dirección tienen que baja hasta bajo, donde muestra la option de descargar como muestra acontinuación:</p>
<img src="https://i.imgur.com/1hW97b2.png" alt="RipSM" title="Descargar" />
<br/>
<p>Y hay tienen que elegir para la plataforma que van a descargar, si es para <b>android</b> o para <b>windows</b>, como yo tengo windows, voy elegir esa.
Una vez han hecho click en el elence le mandara a una página para que salten los cincos segundos de pulicidad, como muestro acontinuación:</p>
<img src="https://i.imgur.com/Rtef0Af.png" alt="RipSM" title="Publicidad" width="500px" /><br/>
<p>Y le dan en saltar publicidad, y automaticamente se les enpezara a descargar el archivo. Una vez ya descargado les quedara un archivo rar
de la siguiente manera:</p>
<img src="https://i.imgur.com/bzojMvr.png" alt="RipSM" title="Rar" width="300px" /><br/><br/>
<p>Lo descomprimen y les debe quedar de la siguiente manera:</p>
<img src="https://i.imgur.com/mrDDgmk.png" alt="RipSM" title="Exe" width="300px" /><br/><br/>
<p>Una vez hecho todo esto lo ejecutamos, ya abierto les debe mostra algo así:</p>
<img src="https://i.imgur.com/QpTDsSK.png" alt="Rip" title="Programa" width="500px" /><br/><br/>
<p>Bueno ya tiene el programa, ahora solamente tienen que buscar páginas donde puedan descargar sus mangas.
Yo les recomiendo <a href="http://submanga.com/">submanga.com</a>, es una de las mejores páginas.</p>

<p>Okey, ahora viene lo mas chulo, como usarlo, ya en la página submanga, lo que tienen que hacer es buscar su manga, y una vez ya lo tienen
hagan lo siguiente: copian la url del espisodio del manga, por ejemplo:</p>
<img src="https://i.imgur.com/imcTRrE.png" alt="RipMS" title="manga" /><br/><br/>
<p>Copian la url. Pero con el programa de RipMS abierto obviamente, compian y les debe aparecer el siguiente mensaje:</p>
<img src="https://i.imgur.com/9iS2Uqq.png" alt="RipMS" /><br/><br/>
<p>Le dan en aceptar y enpezara a descargar su manga:</p>
<img src="https://i.imgur.com/PkOWOC8.png" alt="Rip" /><br/><br/>
<p>Espero le haya servido amigos. Un saludo XDXD</p><br/><br/>
  </div>
  <div id="footer">
               <img src="img/img2.png" alt="footer" title="pie de la página web" width="150px" /><span>Copyright 2000-2017 jorgeprogramas.com</span>
  </div>
   </div>
   </body>
</html>

Código HTML 3:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
        <head>
        <title>Descargar e instalar Winkawaks 1.64 - jorgeprogramas.byethost18.com</title>
<meta charset="UTF-8" />
</head>
<body>
        <div style="width: 840px; margin: auto; text-align: center; border: solid 2px gray;">
       <div id="header">
       <img src="img/img1.png" alt="header" title="jorgeprogramas"  />
   </div>
   <br/>
   <div id="menu">
         <ul>
      <li><a href="contec1.html">Descargar RipSM  75</a></li>
  <li><a href="index.html">Inicio</a></li>
</ul>
   </div>
   <div id="cuerpo">
          <h1>Descargar Winkawaks 1.65 para windows</h1>
  <h4>Hola amigos ?</h4>
  <p>En esta ocación le voy a mostra como descargar el emulador neogeo, para que puedan jugar sus juegos favoritos.
  Bueno lo primero es ir al siguiente link: <a href="http://www.winkawaks.org/downloads.htm">Descargar winkawaks</a>.
  Okey una vez allí tiene que hacer click en <b>Winkawaks.zip</b>, para descargarlo, por ejemplo:</p>
  <img src="https://i.imgur.com/XgFkScd.png" alt="winkawaks" title="Descargar winkawaks" width="800px" />
  <br/><br/>
  <p>Y se enpezará a descargar, y una vez descargado lo desconprimen. Y despues de eso le debe quedar una carpeta lo abren, y ejecutan <b>Winkawaks.exe</b>,
  ya ejecutado les pedira que acepten algunos ajustes sobre el gráfico, una vez abierto, selecionamos el juego.</p>
  <img src="https://i.imgur.com/XAH4N57.png" alt="winkawaks" title="juegoKOF2002" /><br/><br/>
  <p>En mi caso KOF2002.</p>
  <img src="https://i.imgur.com/N2K5E77.png" alt="kof2002" width="600px" /><br/><br/>
  <p>Espero le haya ayudado, Un saludo.</p>
   </div>
   <br/><br/>
   <div id="footer">
    <img src="img/img2.png" alt="footer" title="pie de la página web" width="150px" /><span>Copyright 2000-2017 jorgeprogramas.com</span>
   </div>
</div>
</body>
</html>

Tuve problema a la hora de ver mi archivos con el nombre webage1, pero use index.html para el primero y hay funcionó de diez

Un saludo. :D

33
Hola amigos, bueno presento mi posible solución al ejercicio CU00728B del curso programación HTML.

Enunciado:
Citar
EJERCICIO

Modifica el formulario HTML con el que hemos trabajado para incluir un campo fotografía que permita el envío de un archivo de imagen como parte del formulario. Responde a estas preguntas:

¿Qué atributo ha de especificarse para el form para poder enviar archivos? ¿Qué valor ha de darse a dicho atributo? ¿Qué método de envío hay que especificar para el form si se envían archivos?

Código HTML:
Código: [Seleccionar]

<!DOCTYPE html>
<html>
       <head>
           <title>Porta básico - aprenderaprogramar.com</title>
   <meta charset="UTF-8" />
   </head>
   <body>
           <div id="page" style="width: 980px; border: solid 2px gray; text-align: center; margin: auto;">
   
         <!-- Aquí vendría la cabercera -->
           <div id="header">
       <img src="https://i.imgur.com/XulQTua.png" alt="cabercera"  />
   </div>
   <!-- fin de la cabercera -->
   
   <!-- contenedor -->
           <div id="wrapper">
   
   <!-- menu -->
            <div id="menu">
<div>Menú</div>
      <ul>
       <li><a href="#">Música</a></li>
   <li><a href="#">Videos</a></li>
   <li><a href="#">Libros</a></li>
  </ul>
</div>
<!-- fin del menú -->

<!-- cuerpo -->
<br/><br/>
             <div id="body">
<h2>Formulario</h2>
       <form method="post" action="jorge.php" enctype="multipart/form-data">
           <label for="nombre">Nombre:</label>
   <input type="text" name="nombre_user" id="nombre" />
   <br/>
   <label for="apellido">Apellido:</label>
   <input type="text" name="apellido_user" id="nombre" />
   <br/>
   <label for="direction">Dirección:</label>
   <input type="text" name="direction_user" id="direction" />
   <br/>
   <label for="correo">Correo Electronico:</label>
   <input type="text" name="correo_user" id="correo" />
   <br/>
   <label for="telefono">Telefono:</label>
   <input type="text" name="telefono_user" id="telefono" />
   <br/><br/>
   <input type="file" name="foto" />
   <br/><br/>
   <input type="submit" value="Enviar" />
   <input type="reset" value="Cancelar" />
   </form>
</div>
<!-- fin cuerpo -->

<!-- pie -->
<div id="footer">
      <img src="https://i.imgur.com/6dIW6A2.png" alt="footer" width="150px" /> <span>Copyright 2006-2072 aprenderaprogramar.com</span>
</div> <!-- fin pie -->
</div>
<!-- fin contenedor -->
   </div>
   </body>
</html>

Puse las etiquetas label, ya que prefiero que la web este bien estructurada, y que cada control tenga su respectiva etiqueta asociado a ese control.

Respuestas:
1: Se debe especificar el atributo enctype, para enviar archivos, y con el valor multipart/form-data, ya que sin ese puede ser que mande o no cumpla dicha función, de envio de archivos. Y el metodo de envio de archivos es post

Un saludo. ;D

34
Ejercicio CU00727B del tutorial pdf de programación web con HTML.

Enunciado:
Citar
EJERCICIO

Define la estructura de un portal web que conste de:

a) Una cabecera con una imagen, un texto h1, y otra imagen que a su vez sea un link.

b) Un cuerpo con un menú que contenga 5 items, una imagen y dos párrafos.

c) Un pie que contenga una imagen, un copyright y un texto que sea a su vez un link.

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
        <head>
        <title>Ejercicio CU00727B - aprenderaprogramar.com</title>
<meta charset="UTF-8" />
</head>
<body>
    <!-- contenedor -->
       <div style="text-align: center; width: 890px; border: solid 2px black; margin: auto;">
   
                     <!-- cabecera -->    
           <div id="header">
        <img src="https://i.imgur.com/M1VCRAy.png" alt="img1" width="250px" style="border: solid 2px blue;" />
<h1>Animes</h1>
<a href="https://animeflv.net/" title="AnimeFLV.net" target="_blank"><img src="https://i.imgur.com/smM5vl8.png" alt="img2" width="200px" style="border: solid 2px blue;" /></a>
   </div>
   <!-- fin cabecera -->
   
   <!-- menu -->
   <div id="menu">
         <div>Menú</div>
<ul>
      <li><a href="#">Inicio</a></li>
  <li><a href="#">Música animes</a></li>
  <li><a href="#">Videos [AMV] animes</a></li>
  <li><a href="#">Series animes</a></li>
  <li><a href="#">Imágenes animes</a></li>
</ul>
   </div>
   <!-- fin menu -->
   
   <!-- cuero -->
   <br/><br/>
   <div id="body">
          <img src="https://i.imgur.com/1app5Oh.png" alt="img3" width="600px" />
  <p>El anime es como, la verdad noce como describirlo, pero creo que es lo mas bonito.
  <b>Anime:</b>  Su uso por parte del público extranjero para referirse a la animación
  concretamente japonesa, ha terminado por convertirla popularmente en un término que identifica a la animación de procedencia japonesa.
  </p>
  <p>En sus inicios, alrededor de 1910, la animación japonesa recibe el nombre de senga eiga (literalmente “películas de líneas dibujadas”), más
  tarde se conocerá con el término Doga ("imágenes en movimiento") y, finalmente, sobre 1960 pasará a llamarse animeeshon (originalmente,
   De ahí que se abrevie a <b>anime</b>.</p>
   </div>
   <br/><br/>
   <!-- fin cuerpo -->
   
   <!-- pie -->
   <div id="footer">
        <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="img4" /> <span>Copyright 2006-2017 aprenderaprogramar.com</span>
   </div>
   </div>
</body>
</html>

35
Hola amigos, normalmente no escribo nada, cuando publico mis ejercicios, pero hoy lo hago, se agradece mucho correciones, y sugerencias.

Enunciado ejercicio CU00726B del tutorial pdf de programación web con HTML.

Citar
EJERCICIO

Crea una página web utilizando los distintos elementos HTML que hemos ido estudiando en el curso que refleje de forma aproximada lo que se ve en esta imagen y que cumpla lo indicado más abajo:


Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
       <head>
          <title>Ejercicio CU00726B - aprenderaprogramar.com</title>
  <meta charset="UTF-8" />
   </head>
   <body>
        <!--cabecera de la pagina -->
          <div>
        <h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
  </div>
  <!-- fin de la cabecera -->
 
  <!-- Cuerpo de la programación -->
  <div>
        <span>Menú</span>
<hr />
<ul>
      <li><a href="#">Inicio</a></li>
  <li><a href="#">Libro de la programación</a></li>
  <li><a href="#">Curso de programación</a></li>
  <li><a href="#">Humor informártico</a></li>
</ul>

<p>Aprender a programar es un objectivo que se plantea mucha gente y que no todos alcanzan.</p>
<p>Hay que tener claro que <a href="#">aprender programación</a> 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 dia podemos esta haciendo nuestros primeros programas.</p>

<p>Puedes seguit unos de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86" target="_blank">nuestros cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de
texto recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidas otras
alternativas como Crimson Editor.</p>
<a href="https://notepad-plus-plus.org/download/v7.5.1.html" title="Página de Notepad++"><img src="https://i.imgur.com/QmQ9A5w.png" alt="Notepad++" title="Edito Notepad++" width="150px" /></a>
<img src="https://i.imgur.com/uynxpzl.png" alt="Crimson Editor" title="Edito Crimson" />

<p>Si quieres contactar con nosotros envianos este formulario.</p>
<form method="get" action="jorge.php">
       <label for="nombre">Nombre:</label>
   <input type="text" name="nombre_user" id="nombre" />
   <br/>
   <label for="apellido">Apellido:</label>
   <input type="text" name="apellido_user" id="nombre" />
   <br/>
   <label for="direccion">Dirección:</label>
   <input type="text" name="direccion_user" id="direccion" />
   <br/>
   <label for="correo">Correo Electronico</label>
   <input type="text" name="correo_user" id="correo" />
   <br/>
   <span>Mensaje:</span>
   <textarea name="mensaje" rows="3" cols="30"></textarea>
   <br/><br/>
   <input type="submit" value="Enviar" />
   <input type="reset" value="Cancelar" />
</form>
  </div>
  <br/><br/>
  <!-- fin del cuerpo -->
 
  <!-- Pie de la página -->
  <div>
        <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="Pie de la pagina" /><span><a href="#">Copyright 2005-2038 aprenderaprogramar.com</a></span>
  </div>
  <!-- fin del pie -->
   </body>
</html>

Un saludo. :)

36
Ejercicio CU00725B del tutorial pdf de programación web con HTML para principiantes.

Citar
EJERCICIO

Crea una página web que contenga un formulario que cumpla estas condiciones.

Como título antes del formulario debe figurar con etiquetas h1 el texto <<Inscripción al concurso Jara y Sedal>>. Debe contener:

a) Nombre

b) Apellidos

c) Dirección

d) Fotografía (aquí se debe dar opción a elegir un archivo de imagen que será la fotografía)

e) Un botón submit para enviar que muestre el texto <<¡¡¡Me apunto!!!>> y un botón reset para restablecer que muestre el texto <<Cancelar>>.

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
       <head>
           <title>Ejercicio CU00725B - aprenderaprogramar.com</title>
   <meta charset="UTF-8" />
   </head>
   <body>
           <h1>Inscripción al concurso Jara y Sedal</h1>
   <form method="post" action="jorge.php" enctype="multipart/form-data">
          <label for="nombre">Nombre:</label>
  <input type="text" name="nombre_user" id="nombre" />
  <br/><br/>
  <label for="apellido">Apellido:</label>
  <input type="text" name="apellido_user" id="apellido" />
  <br/><br/>
  <label for="direccion">Dirección:</label>
  <input type="text" name="direccion_user" id="direccion" />
  <br/><br/>
  <input type="file" name="foto" />
  <br/><br/>
  <input type="submit" value="Me apunto" />
  <input type="reset" value="Cancelar" />
   </form>
   </body>
</html>

Un saludo. ;D

37
Hola amigos dejo el ejercicio CU00724B del tutorial pdf de programación web con HTML resuelto

Citar
EJERCICIO

Crea una página web que contenga dos formularios que cumplan estas condiciones.

Como título antes del primer formulario debe figurar con etiquetas h1 el texto <<Inscripción al concurso Saber y Ganar>>. Debe contener:

a) Nombre

b) Apellidos

c) email

d) Teléfono

e) Un botón submit para enviar que muestre el texto <<¡¡¡Me apunto!!!>> y un botón reset para restablecer que muestre el texto <<Cancelar>>.

 

Como título antes del segundo formulario debe figurar con etiquetas h1 el texto “Petición de información”. Debe contener:

a) Nombre

b) País

c) email

d) Consulta que se quiere realizar (debe ser un textarea que permita escribir múltiples líneas).

e) Un botón para enviar de tipo imagen y un botón para restablecer de tipo button que muestre dentro del botón lo siguiente: <<Pulse aquí para cancelar>>, un salto de línea, y el texto <<Esto borrará los datos>>.

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
       <head>
           <title>Ejercicio CU00724B - aprenderaprogramar.com</title>
   <meta charset="UTF-8" />
   </head>
   <body>
           <h1>Inscripción al concurso Saber y Ganar</h1>
   <form method="get" action="jorge.php">
         <label for="nombre">Nombre:</label>
<input type="text" name="nombre_user_1" id="nombre" />
<br/><br/>
<label for="apellido">Apellido:</label>
<input type="text" name="apellido_user_1" id="apellido" />
<br/><br/>
<label for="email">Email:</label>
<input type="text" name="email_user_1" id="email" />
<br/><br/>
<label for="telefono">Telefono:</label>
<input type="text" name="telefono_user_1" id="telefono" />
<br/><br/>
<input type="submit" value="<<¡¡¡Me apunto!!!>>" />
<input type="reset" value="<<Cancelar>>" />
   </form>
   <br/><br/>
   <h1>Petición de información</h1>
   <form method="get" action="jorge1.php">
          <label for="nombre_2">Nombre:</label>
  <input type="text" name="nombre_user_2" id="nombre_2" />
  <br/><br/>
  <label for="pais">País:</label>
  <input type="text" name="pais_user" id="pais" />
  <br/><br/>
  <label for="email_2">Email:</label>
  <input type="text" name="email_user_2" id="email_2" />
  <br/><br/>
  <span>Consulta:<br/></span><textarea name="consulta" cols="40" rows="4"></textarea><br/>
  <input type="image" src="https://i.imgur.com/AYIoHvU.png" name="botom1" />
  <button type="reset" name="botomreset">
        Pulse aquí para cancelar<br/>
Esto borrará los datos
  </button>
   </form>
   </body>
</html>

Un saludo. :)

38
Citar
Crea una página web que contenga un formulario que cumpla estas condiciones. Como título principal de la página debe figurar con etiquetas h1 el texto “Preferencias musicales”. Debe contener tres checkbox que permitan elegir tipos de música favoritas entre Rock, Pop y Jazz. Seguidamente mediante radio buttons se debe pedir la edad ofreciendo estas opciones: de 12 a 17 años, de 18 a 35 años, de 36 a 65 años y más de 65. Finalmente, se deben poder elegir “grupos y cantantes que te gustan” permitiéndose la selección múltiple y ofreciendo un optgroup denominado Rock con tres nombres de grupos o cantantes, otro optgroup denominado Pop con tres nombres de grupos o cantantes y otro optgroup denominado Jazz con tres nombres de grupos o cantantes. 

El código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
       <head>
          <title>Ejercicio CU00723B - aprenderaprogramar.com</title>
  <meta charset="UTF-8" />
   </head>
   <body>
          <h1>Preferencias musicales</h1>
  <form method="get" action="jorge.php">
         <span>Seleciona tu música favorita:</span><br/>
         <input type="checkbox" name="musica1" value="Rock" id="musica1" />
         <label for="musica1">Rock</label>
         <br/>
         <input type="checkbox" name="musica2" value="Jazz" id="musica2" checked="checked" />
         <label for="musica2">Jazz</label>
         <br/>
         <input type="checkbox" name="musica3" value="Pop" id="musica3" />
         <label for="musica3">Pop</label>
<br/><br/>
<span>Seleciona tu edad:</span>
<br/>
<input type="radio" name="edad1" value="12a17" id="edad1" />
<label for="edad1">De 12 a 17 años</label>
<br/>
<input type="radio" name="edad2" value="18a35" id="edad2" />
<label for="edad2">De 18 a 35 años</label>
<br/>
<input type="radio" name="edad3" value="36a65" id="edad3" />
<label for="edad3">De 36 a 65 años</label>
<br/>
<input type="radio" name="edad4" value="madde65" id="edad4" />
<label for="edad4">Mas de 65 años</label>
<br/><br/>
<span>Elije tre grupos de cantante que te gustan:</span>
<br/><br/>
<select name="grupo[]" multiple="multiple">
           <optgroup label="Rock">
              <option>Manal</option>
  <option>Massacre</option>
  <option>Fun Peoplw</option>
   </optgroup>
   <optgroup label="Jazz">
              <option>Return to Forever</option>
  <option>Weather Report</option>
  <option>Jazz Messengers</option>
   </optgroup>
   <optgroup label="Pop">
              <option>Green Day</option>
  <option>Los Beatles</option>
  <option>RBD</option>
   </optgroup>
</select>
<br/><br/>
<input type="submit" value="Enviar" />
<input type="reset" value="Cancelar" />
  </form>
   </body>
</html>
Dejo el ejercicio resuelto.

Un saludo. :)

39
Ejercicio CU00722B del tutorial pdf de programación web con HTML desde cero.

Citar
EJERCICIO

Crea una página web que contenga un formulario de registro de usuarios que cumpla estas condiciones:

Como título principal de la página debe figurar con etiquetas h1 el texto “Solicitud de alta como usuario”. Debe contener un campo entrada de línea para solicitar el nombre. Debe contener un campo entrada de línea para solicitar los apellidos. Debe contener un campo entrada de línea para solicitar el correo electrónico. Debe contener un campo entrada de línea y tipo password para solicitar la contraseña. Debe contener un campo multilínea para solicitar observaciones. El formulario se debe enviar por el método get a la dirección de destino http://aprenderaprogramar.com

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
       <head>
           <title>Ejercicio CU00721B - aprenderaprogramar.com</title>
   <meta charset="UTF-8" />
   </head>
   <body>
           <h1 style="text-align: center;">"Solicitud de alta como usuario"</h1>
   <br/><br/>
   <form method="get" action=" http://aprenderaprogramar.com" style="text-align: center;">
           <label for="nombre">Nombre:</label>
   <input type="text" name="nombre" id="nombre" />
   <br/><br/>
   <label for="apellido">Apellido:</label>
   <input type="text" name="apellido" id="apellido" />
   <br/><br/>
   <label for="correo">Correo:</label>
   <input type="text" name="correo" id="correo" />
   <br/><br/>
   <label for="clave">Contraseña:</label>
   <input type="password" name="clave" id="clave" value="12345678" />
   <br/><br/>
   <textarea name="mensaje" cols="40" rows="4">...Escriba aquí su mensaje...</textarea>
   <br/><br/>
   <input type="submit" value="Enviar" />
   <input type="reset" value="Cancelar" />
   </form>
   </body>
</html>

Un saludo. :)

40
Ejercicio CU00720B del tutorial pdf de programación web con HTML para principiantes.

Citar
EJERCICIO

Basándote en el código de ejemplo que hemos visto, crea una página web que cumpla con lo que indicamos a continuación:

a) Como título principal de la página debe figurar con etiquetas h1 el texto “Inscripción al Congreso de Medicina Santiago 2048”

b) Debe contener dos formularios: el primero será “Inscripción al Congreso para médicos especialistas” y el segundo “Inscripción al congreso para médicos generalistas”. Estos títulos deben figurar antes del formulario con etiquetas h2.

c) El formulario para médicos especialistas debe solicitar nombre, apellidos, especialidad y año de obtención de la especialidad.

d) El formulario para médicos generalistas debe solicitar nombre, apellidos, centro médico donde ejerce y año de obtención del título.

 

El código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
       <head>
           <title>Ejercicio CU00720B - aprenderaprogrmar.com</title>
   <meta charset="UTF-8" />
   </head>
   <body>
           <h1>"Inscripción al Congreso de Medicina Santiago 2048"</h1>
   <br/><br/>
   <h2>"Inscripción al Congreso para médicos especialistas"</h2>
   <form action="https://www.aprenderaprogramar.com" method="get">
           <label for="nombre">Nombre:</label>
   <input type="text" name="nombre" id="nombre" />
   <br/><br/>
   <label for="apellido">Apellido:</label>
   <input type="text" name="apellido" id="apellido" />
   <br/><br/>
   <label for="especialidad">Especialidad:</label>
   <input type="text" name="especialidad" id="especialidad" />
   <br/><br/>
   <label for="obtencion-especialidad">Obtencion de especialidad:</label>
   <input type="text" name="obtencion-especialidad" id="obtencion-especialidad" />
   <br/><br/>
   <input type="submit" value="Enviar" />
  <input type="reset" value="Cancelar" />
   </form>
   <br/><br/>
   <h2>"Inscripción al congreso para médicos generalistas"</h2>
   <form action="https://www.aprenderaprogramar.com" method="get">
          <label for="nombre-2">Nombre:</label>
  <input type="text" name="nombre-2" id="nombre-2" />
  <br/><br/>
  <label for="apellido-2">Apellido:</label>
  <input type="text" name="apellido-2" id="apellido-2" />
  <br/><br/>
  <label for="donde-ejercio">Donde ejercio:</label>
  <input type="text" name="donde-ejercio" id="donde-ejercio" />
  <br/><br/>
  <label for="obtencion-titulo">Año de obtencion del título:</label>
  <input type="text" name="obtencion-titulo" id="obtencion-titulo" />
  <br/><br/>
  <input type="submit" value="Enviar" />
  <input type="reset"value="Cancelar" />
   </form>
   </body>
</html>
Un saludo. ;)

Páginas: 1 [2] 3

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".