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.


Mensajes - EnigmaticNerd

Páginas: 1 2 [3] 4
41
Aprender a programar desde cero / HTML y CSS equivalencia entre colores en nombre, hexadecimal y rgb CU01019D
« en: 17 de Agosto 2017, 21:26 »
Buenas tardes. Este es el enunciado del ejercicio CU01019D del tutorial de programación web con CSS como si estuviera en primero:

Citar
En la siguiente tabla están mal ordenados los códigos de colores. Ordénalos de forma que en cada fila estén los códigos equivalentes de forma ordenada y crea un documento HTML donde se muestre un cuadrado donde aparezca como texto el color con la notación empleada, y como color de fondo el color. En total deberás tener 15 cuadrados, cada uno con su texto y su color, correspondientes a las 15 celdas de la tabla.


Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01019D
        </title>
        <meta charset="utf-8"/>
        <style type="text/css">

         table, tr, th, td{border: black 1px solid; text-align:center;}
         table tr:first-child{background-color:#C9C9C9;}
         table tr:nth-child(2){background-color:#696969;}
         table tr:nth-child(3){background-color:#CD5C5C;}
         table tr:nth-child(4){background-color:#B22222;}
         table tr:nth-child(5){background-color:#1E90FF;}
         table tr:last-child{background-color:#4B0082;}

        </style>

    </head>
        <body>

            <table>
               
                <tr>
                    <th>Nombre</th>
                    <th>Hexadecimal</th>
                    <th>RGB</th>
                </tr>

                <tr>
                    <td>DimGray</td>
                    <td>696969</td>
                    <td>105,105,105</td>
                </tr>

                <tr>
                    <td>IndianRed</td>
                    <td>CD5C5C</td>
                    <td>205,92,92</td>
                </tr>

                <tr>
                    <td>FireBrick</td>
                    <td>B22222</td>
                    <td>178,34,34</td>
                </tr>

                <tr>
                    <td>DodgerBlue</td>
                    <td>1E90FF</td>
                    <td>30,144,255</td>
                </tr>

                <tr>
                    <td>Indigo</td>
                    <td>4B0082</td>
                    <td>75,0,130</td>
                </tr>
            </table>

        </body>

</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

42
Aprender a programar desde cero / Significado de declaración !important en CSS prevalencia en colisiones CU01017D
« en: 16 de Agosto 2017, 23:40 »
Buenas tardes. Este es el enunciado del ejercicio CU01017D del manual de programación web con CSS desde cero:

Citar
En el archivo CSS externo a un documento HTML encontramos esta declaración:
Código: [Seleccionar]
.magicTitle {

margin:0px;

width:20px;

height:30px;

color:green !important;

border-style: hidden !important;
}
Citar
Por otro lado dentro del código HTML tenemos el siguiente código:
Código: [Seleccionar]
<div class="magicTitle" style="border:1px solid blue; color: blue;">

Aprendiendo a programar
</div>

Citar


Responde a las siguientes preguntas:

a) ¿Se mostrará un borde para el div? ¿Por qué?

b) ¿Con qué color se mostrará el texto, con color verde o con color azul? ¿Por qué?

c) ¿Se respetarán los valores de width y height definidos en el archivo CSS externo o quedarán anulados? ¿Por qué?


Respuestas

A.)No. El estilo externo tiene la propiedad border-style acompañada de la palabra clave !important en su declaración, esto anula la precedencia de origen del estilo en línea. Además, la propiedad border-style tiene el valor hidden el cual oculta el elemento al usuario.

B.)Se mostrará con color verde. Aunque las propiedades tienen igual nivel de importancia, es la del archivo externo la que precede por tener !important en su declaración.

C.)Se respetan los valores dado que no se suscita colisión de estilos con el documento HTML.

43
Aprender a programar desde cero / Establecer la fuente de un documento HTML con font-family CSS uso class CU01013D
« en: 15 de Agosto 2017, 01:11 »
Buenas noches. Este es el enunciado del ejercicio CU01013D del curso básico de desarrollo web con CSS desde cero:

Citar
  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 130% respecto de lo normal para los elementos h1 que se encuentren dentro de un elemento cuyo valor class sea <<principal>>.

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

d) Usando CSS establece como color de fondo el amarillo (yellow) para los elementos span que se encuentren dentro de elementos h3 que se encuentren dentro de elementos cuyo atributo class sea <<secundario>>.

e) Establece como tipo de fuente para todo el documento HTML el tipo Arial.
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>

<div><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>

<div><h3>Lanzamos el producto <span>X-FASHION</span></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><h3>Mejoramos el producto T-MOTION</h3>

<p>Hemos lanzado una nueva versión del producto <span>T-MOTION</span></p>

<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>

</div>

</body>
</html>


Acá el código:
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">

    .principal h1{color:red; font-size:130%;}

    .secundario h3{color:green; font-size:110%}

    .secundario h3 span{background-color:yellow;}

    *{font-family: Arial;}

</style>

</head>

<body>

<div class="principal"><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>

<div class="secundario"><h3>Lanzamos el producto <span>X-FASHION</span></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 <span>T-MOTION</span></p>

<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>

</div>

</body>
</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

44
Aprender a programar desde cero / Qué significa el atributo class en el código HTML aplicar estilos CSS CU01012D
« en: 15 de Agosto 2017, 01:07 »
Buenas noches. Este es el enunciado del ejercicio CU01012D del curso de fundamentos de programación web con CSS:

Citar
  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: [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>

<div><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>

<div>

<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>

<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>

Acá el código:
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">

    .principal{color: red; font-size:150%;}

    .secundario{color:green; font-size:110%;}

    .secundario p{background-color:yellow;}

</style>

</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>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

45
Aprender a programar desde cero / Selectores css establecer id para identificar div y aplicar estilos CU01011D
« en: 15 de Agosto 2017, 01:00 »
Buenas noches. Este es el enunciado del ejercicio CU01011D del tutorial de programación web con CSS desde cero:

Citar
EJERCICIO

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: [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>

<div>

<h1>Novedades</h1>

<p>Aquí presentamos las novedades del sitio.</p>

</div>

<div>

<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>

<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>

Acá el código:
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">

    #novedades h1{color:red;}

    #xFashion h3, #tMotion h3{color:green;}

    #novedades{background-color:yellow;}
   
</style>

</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>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

46
Aprender a programar desde cero / Re:Ejercicio CU01008D de Aprender a programar: CSS desde cero. Cajas CSS
« en: 12 de Agosto 2017, 03:38 »
Buenas noches. Viendo otros post del mismo ejercicio hice caso en un par de errores en el ejercicio.




1.) Es importante recalcar que cada etiqueta hace vida en el documento -aunque esté dentro de otra- y como tal, debe reflejarse como parte de la estructura conceptual. Por eso le añadí a esos párrafos  los elementos que están dentro de ellos en el código (enlace y dos imágenes).


2.) El primer error en el que caí en cuenta es que son cajas rectangulares, la teoría no dice nada de rectángulos con puntas bordeadas.

3.) Y de nuevo, la misma señalización del punto 1, hay cajas que contienen a otras cajas y estas deben ir reflejadas en el esquema.

Añado que no soy entendido en esto pero hago el esfuerzo de leer y consultar otros post para comparar y aún más importante, ver la opinión de los expertos que están en el foro.

Como siempre: Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

47
Aprender a programar desde cero / HTML y CSS Diferencia entre CSS interno y externo con ejemplos de código CU01010
« en: 11 de Agosto 2017, 21:55 »
Buenas tardes. Este es el enunciado del ejercicio 1 de la entrega CU01010 del tutorial de programación CSS usando Notepad++ como editor:

Citar
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: [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>

Acá el código:

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>

Ejercicio 2:
Citar
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).

Acá el 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="estilosCU1010D.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>

Acá la hoja de estilos CSS:
Código: [Seleccionar]
/*Código CSS para elementos HTML*/

h1{color:blue;}

h3{color:orange;}

p{color:brown;}

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

48
Aprender a programar desde cero / CSS y HTML en línea establecer el color de texto o párrafos style color CU01009D
« en: 11 de Agosto 2017, 21:49 »
Buenas tardes. Este es el enunciado del ejercicio CU01009D del tutorial de programación web con CSS desde cero:

Citar
A partir del siguiente código:
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>
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).

Acá el código:
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 style="color:brown; text-decoration:none;" 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 style="color:brown;"><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 style="color:brown;"><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>

</body>
</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

49
Aprender a programar desde cero / HTML y CSS Cómo se estructura una página web según modelo de cajas CU01008D
« en: 11 de Agosto 2017, 21:45 »
Buenas tardes. Este es el enunciado del ejercicio CU01008D del tutorial básico de programación CSS para diseño web:

Citar
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: [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>

Acá el esquema de organización conceptual de la página HTML:



Acá el esquema que refleja las cajas que intervienen en el documento HTML:



Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

50
Aprender a programar desde cero / Re:Ejercicio CU00730B de Aprender a programar: HTML desde cero. Subir al servidor.
« en: 11 de Agosto 2017, 04:54 »
¡Muchas gracias por tus revisiones y tus consejos hermano! Significa mucho que cuides tu nivel de detalle al chequear cada ejercicio, me inspiras a seguir aprendiendo.

Seguiré con el curso de CSS. Espero que puedas seguir revisando y corrigiendo mis ejercicios.

51
Aprender a programar desde cero / Cómo subir página web a un servidor para que pueda verse en internet CU00730B
« en: 11 de Agosto 2017, 02:57 »
Buenas noches. Este es el enunciado del ejercicio CU00730B del tutorial de programación web con HTML desde cero:

Citar
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.

Acá el link para ver la página: http://enigmaticnerd.byethost13.com/pagina1.html
Acá los códigos:

Página1.html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

    <head>
        <title>
            Interstellar
        </title>
        <meta charset="utf-8"/>
   
    </head>
   
    <body style="background-color:honeydew">
         <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid blue;">

    <!--INICIO DE LA CABECERA-->
        <div id="cabecera">

            <h1 style="text-align:center;">Bienvenidos a mi página web</h1>

            <p>
                Hoy vamos a hacer a una reseña sobre la película <a href="https://es.wikipedia.org/wiki/Interstellar" target="_blank" title="Ir a Wikipedia">Interstellar</a>,
                donde se conocerán ciertos aspectos del film y mi experiencia personal con el
            </p>

            <img src="data:image/jpeg;base64,/9j/4AAQ..." height="400px" alt="Poster de Interstellar"/>
       
        </div>
    <!--FIN DE LA CABECERA-->

    <!--INICIO DEL CONTENEDOR-->

        <div id="wrapper">

    <!--INICIO DEL MENÚ-->

            <div id="menu">

                <ul>
                    <li><a href="#reseña" title="Ir a reseña">Reseña de la película</a></li>
                    <li><a href="#opinion" title="Ir a opinión personal">Opinión personal</a></li>
                    <li><a href="pagina2.html" title="Ver personajes">Personajes principales de la película</a></li>
                    <li><a href="pagina3.html" title="">Atinos científicos en la película</a></li>
                </ul>

            </div>
    <!--FIN DEL MENÚ-->

        <hr/>

    <!--INICIO DEL CUERPO-->
   
            <div id="cuerpo">

                <h3 id="reseña">Reseña de la película</h3>
                <p>
                    Interstellar (Interestelar en Hispanoamérica)
                    es una película épica de ciencia ficción estadounidense de 2014,
                    dirigida por Christopher Nolan y protagonizada
                    por Matthew McConaughey, Anne Hathaway, Jessica Chastain, Michael Caine y Matt Damon.
                    La película presenta a un equipo de astronautas que viaja a través de un agujero
                    de gusano
                     en busca de un nuevo hogar para la humanidad.
                    Los hermanos Christopher y Jonathan Nolan escribieron el guion, que tuvo su origen
                    en un borrador que Jonathan desarrolló en 2007.
                    Christopher Nolan produjo la película junto a su esposa Emma Thomas
                    mediante su compañía
                    productora Syncopy,
                    y con Lynda Obst a través de Lynda Obst Productions.
                    El físico teórico Kip Thorne, cuyo trabajo inspiró la película,
                    fue productor ejecutivo
                    y participó como consultor científico. Warner Bros.,
                    Paramount Pictures y Legendary Pictures cofinanciaron la película.
                </p>

                <br/>

                <h3 id="opinion">Opinión personal</h3>

                <p>
                    Al saber que existía la película me interesé en ella, dado que soy aficionado de los films de
                    ciencia ficción ligados con drama (<a href="https://es.wikipedia.org/wiki/Contact_(pel%C3%ADcula)" target="_blank" title="Ir a Wikipedia">Contacto</a>,
                    <a href="https://es.wikipedia.org/wiki/The_Dark_Knight" target="_blank" title="Ir a Wikipedia">Batman: el caballero de la noche</a>, entre otras).
                </p>
               
                <p>
                    Desde el comienzo me atrapó con la trama pre-apocalíptica donde el mundo está
                    a punto de llegar a su fin porque las fuentes de alimentos ya no son suficientes y la
                    única restante está a punto de extinguirse. El personaje principal (representado por <a href="https://es.wikipedia.org/wiki/Matthew_McConaughey" target="_blank" title="Ir a Wikipedia">
                    Matthew McConaughey</a>) ya era uno de mis favoritos por su papel en la serie <em>True detective</em> donde
                    personaliza a un detective de filosofía nihilista pero muy profesional.
                </p>

                <p>
                    La trama principal es la que me impactó porque involucra el viaje al espacio e interdimensional,
                    donde su misión principal es encontrar vestigios de una misión que ya había sido enviada años antes.
                    Viaje que es dirigido por un muy respetado cuerpo de científicos y el mismísimo gobierno de Estados Unidos,
                    desde una base secreta.
                </p>

            </div>

    <!--FIN DEL CUERPO-->


        </div>
    <!--FIN DEL CONTENEDOR-->
           
        <br/>
   
    <!--INICIO DEL PIE-->

            <div id="pie">

                <img src="data:image/png;base64,iVBO...=" height="30" alt="copyright"/>
                EnigmaticNerd 2017-2018. <a href="#cabecera" title="Ir a arriba">Volver arriba</a>

            </div>

    <!--FIN DEL PIE-->
         </div>
    </body>
</html>

Página2.html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            Interstellar
        </title>
        <meta charset="utf-8"/>
    </head>
   
    <body style="background-color:honeydew">
        <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid crimson;">


        <!--INICIO DE LA CABECERA-->
       
            <div id="cabecera">
            <a style="font-size: 20px;" href="pagina1.html" title="Ir al Inicio">Volver a la página principal</a>

                <h1>Personajes principales</h1>
                <img src="data:image/jpeg;base64,/9j/4AA..." alt="Interstellar"/>

            </div>

        <!--FIN DE LA CABECERA-->

        <hr/>

        <!--INICIO DEL CONTENEDOR-->

        <div id="wrapper">

        <!--INICIO DEL MENÚ-->

        <div id="menu">


            <ul>
                <li><a href="#joseph" title="Ir a Joseph Cooper">Joseph Cooper</a></li>
                <li><a href="#murphy" title="Ir a Murphy Cooper">Murphy Cooper</a></li>
                <li><a href="#amelia" title="Ir a Amelia Brand">Amelia Brand</a></li>
            </ul>

        </div>

        <!--FIN DEL MENÚ-->

        <hr/>
        <br/>
        <!--INICIO DEL CUERPO-->
       
        <div id="cuerpo">
       
            <span id="joseph">
            <img src="https://vignette3.wikia.nocookie.net/interstellarfilm/images/d/de/Josephcooper1.jpg/revision/latest/scale-to-width-down/286?cb=20140606062816"  alt="Joseph Cooper"/>
            <h2>Joseph Cooper</h2>
            <hr/>
           
            <p>
                <b>Joseph A. Cooper</b> es un piloto de la NASA con experiencia en ingeniería, y el piloto
                de la expedición interestelar. Cooper tiene dos hijos, Tom Cooper y Murphy Cooper. Es interpretado
                por el actor <a href="https://es.wikipedia.org/wiki/Matthew_McConaughey" target="_blank" title="Ir a Wikipedia">
                     Matthew McConaughey</a>
            </p>
           
            <br/>
            <p><b>Película</b></p>
            <hr/>

            <p>
                No se sabe mucho sobre los primeños años de vida de Cooper excepto que cuando estaba creciendo
                ya no había juegos de beisbol debido a los conflictos por comida entre otras cosas.
             </p>
           
            <p>
                Unos diez años antes del lanzamiento del Endurance, Cooper trabajó como piloto de pruebas para la NASA.
                El banco de pruebas que utilizó fue un prototipo de Ranger, mientras sobrevolaba la estratósfera, una anomalía
                causó que estrellara la nave.
            </p>

            <p>
                Copper tiene alrededor de 35 años al momento del lanzamiento del Endurance. Al principio, él era muy despectivo
                respecto a la fijación de su hija por un "fantasma" en su habitación.
            </p>
           
            </span>

            <hr/>
            <br/>

            <span id="murphy">
               
                <img src="https://vignette3.wikia.nocookie.net/interstellarfilm/images/a/ae/Youngmurph.jpg/revision/latest/scale-to-width-down/227?cb=20140606061322" alt="Murphy Cooper"/>
                <h2>Murphy Cooper</h2>
               
                <hr/>

                <p>
                    <b>Murphy Cooper</b>, conocida comunmente como <cite>"Murph"</cite> es la hija más joven de Erin y Joseph Cooper.
                    Ella desarrolla una personalidad idealística pero ruda más adelante en su vida. Ella heredó la afición de su padre por explorar
                    lo desconocido. Es interpretada por la actriz <a href="https://es.wikipedia.org/wiki/Mackenzie_Foy" title="Ir a Wikipedia" target="_blank">Mackenzie Foy</a>.
                </p>

              <br/>

                <p><b>Película</b></p>
                <hr/>

                <p>
                    De los hijos de Cooper, ella era la más apegada a su padre, tenía esa emoción de explorar y descubrir los desconocido,
                    muy parecida a su padre.
                </p>

                <p>
                    Demás está de decir que no le gustaba su nombre, debido a que tenía la idea de que ella era la portadora de la mala suerte,
                    como sea su padre le reforzaba la idea de que su nombre es en realidad un llamado a la <em>esperanza</em>.
                </p>

                <p>
                    Una mañana, ella afirmó que su habitación era acechada por un "fantasma", idea que su hermano y padre no tomaban en cuenta.
                    Eventualmente, descubrió que se trataba de algo realmente importante, como una serie de filas de polvo acumulado en un patrón
                    consistente con código binario. Su padre sugirió que eran coordenadas, las cuales llevan al cuartel general de la NASA.
                    Se puso furiosa cuando su padre le dijo que dejaría la tierra, lo cual tómo como un abandono de parte de él. Rencor que
                    mantuvo por casi veinticinco años.
                </p>

            </span>

            <hr/>
            <br/>

            <span id="amelia">

                <img src="https://vignette1.wikia.nocookie.net/interstellarfilm/images/d/d9/Ameliabrand1.jpg/revision/latest/scale-to-width-down/300?cb=20140606063903" alt="Amelia Brand"</>
                <h2>Amelia Brand</h2>

                <hr/>

                <p>
                    Dr.<b>Amelia Brand</b> es la científica/bióloga comandante en jefe de la expedición enviada a través del agujero de gusano
                        pretendiendo reubicar a la raza humana. Ella es la hija del Dr. John Brand. Es protagonizada por la actriz <a href="https://es.wikipedia.org/wiki/Anne_Hathaway" title="Ir a Wikipedia" target="_blank">Anne Hathaway</a>
                </p>

                  <br/>

                <p><b>Película</b></p>
                <hr/>

                <p>
                    Como la hija de el director de la NASA, en esencia, fue una de la científicas al frente de la misión.
                    Aproximádamente diez años antes del lanzamiento del Endurance, ella y un compañero científico Dr. Wof Edmunds estuvieron enamorados.
                    Cooper sospecha de sus sentimientos hacia Edmund cuando discuten sobre el destino al que arribarían, sabiendo que sus sentimientos hacia
                    Wolf harían que ella quisiese ir a su planeta primero.
                </p>
            </span>
           

         </div>
        <!--FIN DEL CUERPO-->
       
        </div>
        <!--FIN DEL CONTENEDOR-->

        <br/>
        <br/>
        <!--INICIO DEL PIE-->

        <div id="pie">

                <img src="data:image/png;base64,iVB...I=" height="30" alt="copyright"/>
                EnigmaticNerd 2017-2018. <a href="#cabecera" title="Ir a arriba">Volver arriba</a> <a href="pagina1.html" title="Ir al Inicio">Volver a la página principal</a>

            </div>

    <!--FIN DEL PIE-->
        </div>
    </body>
</html>

Página 3.html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            Interstellar
        </title>
        <meta charset="utf-8"/>
    </head>
   
    <body style="background-color:honeydew">
        <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid crimson;">


        <!--INICIO DE LA CABECERA-->
       
            <div id="cabecera">
            <a style="font-size: 20px;" href="pagina1.html" title="Ir al Inicio">Volver a la página principal</a>

            <br/>
            <br>           

            <h1>Atinos científicos de la película</h1>
            <img src="http://up-ship.com/blog/wp-content/uploads/2014/08/bwah.png" width="500px" alt="Gargantua"/>
               
            </div>

        <!--FIN DE LA CABECERA-->

            <hr/>
        <!--INICIO DEL CONTENEDOR-->
           
            <div id="wrapper">

        <!--INICIO DEL CUERPO-->

            <div id="cuerpo">

                <p>
                    <b>Atinos</b>:  La contribución más sobresaliente del asesoramiento científico de Kip Thorne a la producción de Interstellar fue el de lograr una representación comprensible, atractiva
                    y consistente de Gargantúa, el agujero negro al que llegan los protagonistas en su búsqueda
                    de los planetas colonizables.
                </p>

                <p>
                    Para esto, Throne se dedicó por un año entero a la creación de ecuaciones que permitían seguir
                    los rayos de luz a  medida que rodean a un agujero negro o entran a un agujero de gusano,
                    todo con base en la Teoría de la Relatividad de Eistein. El paso siguiente
                    fue la programación de un software de CGI (Computer Generared Images) que interpretara y
                    graficara los cálculos de Thron, con un resultado sencillamente espectacular: la imagen de
                    un agujero de gusano con la apariencia  de una esfera de cristal que refleja todo el universo,
                    y además la icónica imagen del agujero negro con un halo de luz que no sólo lo rodea sino que
                    también pasa por el medio de él. Pero por qué la luz tendría esta configuración? Kip Throne
                    explica en el libro “The Science Behind Interstellar” que existe un fenómeno sobresaliente del
                    agujero negro llamado “disco de acreción”, compuesto por gas caliente procedente de otros soles
                     que orbita en torno al agujero negro. Sorprendentemente, la interpretación que realizó el
                     software de los cálculos de Throne fue que esta nube amarilla de gas debería observase como
                     un flujo luminoso que pasa estar encima, debajo y en frente del agujero.
                </p>

                <p>
                    Este trabajo científico arrojó tal cantidad de información novedosa sobre los fenómenos que ocurren alrededor de un agujero negro,
                    que se están escribiendo ya dos artículos de investigación con estos descubrimientos,
                    y los expertos consideran ya a Gargantúa
                    como <b>la representación más realista jamás lograda de un agujero negro hasta el día de hoy</b>.
                </p>

           
                </div>

            <!--FIN DEL CUERPO-->


            </div>
            <!--FIN DEL CONTENEDOR-->

            <br/>
            <!--INICIO DEL PIE-->

            <div id="pie">

                <img src="data:image/png;base64,iVB...I=" height="30" alt="copyright"/>
                EnigmaticNerd 2017-2018. <a href="#cabecera" title="Ir a arriba">Volver arriba</a> <a href="pagina1.html" title="Ir al Inicio">Volver a la página principal</a>

            </div>

    <!--FIN DEL PIE-->
         </div>
    </body>
</html>

Nota: Tuve que acortar algunas rutas de imágenes en los códigos dado que eran muy largas y excedían la longitud de caracteres permitidas acá.

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

52
Aprender a programar desde cero / HTML cómo enviar archivos usando un formulario método POST enctype CU00728B
« en: 10 de Agosto 2017, 01:53 »
Buenas noches. Este es el enunciado del ejercicio CU00728B del tutorial de programación HTML desde cero:

Citar
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.

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Portal básico - aprenderaprogramar.com</title>

</head>

<body>

 <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid white;">

<div id="header">

Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com

</div>

<!-- contenedor -->

<br />

<br />

<br />

<div id="wrapper">

<!-- menu -->

<div id="menu">

<div>Menú</div>

<hr style="color:red; background-color:red; width:50%;" />

<ul>

<li><a href="#">Portada</a></li>

<li>

<a href="https://www.aprenderaprogramar.com">aprenderaprogramar.com</a>

</li>

</ul>

</div>

<!-- fin menu -->

<!-- cuerpo -->

<div id="body">

<form method="get" action="accion.html">

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 />

Teléfono: <input type="text" name="telefono" /><br />

Fotografía: <input type="file" name="fotografia"/><br/>

<br/>

<input type="submit" value="Enviar"/>
<input type="reset" value="Cancelar"/>

</form>

</div>

<!-- fin cuerpo -->

</div>

<!-- fin contenedor -->

<br /> <br /> <br />

<div id="footer">

Copyright 2006-2012 aprenderaprogramar.com

</div>

</div>

</body>

</html>

Respuestas a las siguientes preguntas:
Citar
1.)¿Qué atributo ha de especificarse para el form para poder enviar archivos?
2.)¿Qué valor ha de darse a dicho atributo?
3.)¿Qué método de envío hay que especificar para el form si se envían archivos?

R.1) Se debe utilizar el atributo enctype.

R.2)Su valor debe ser el protocolo "multipart/form-data" utilizado para enviar archivos.

R.3)El método POST.

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

53
Aprender a programar desde cero / HTML desde cero. Portal web básico con títulos, imágenes, links CU00727B
« en: 09 de Agosto 2017, 23:21 »
Buenas tardes. Este es el enunciado del ejercicio CU00727B del tutorial de programación HTML desde cero:

Citar
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.

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html>

    <head>
        <title>CU00727B</title>
        <meta charset="utf-8"/>
    </head>

    <body style="background-color:darkgrey">
 <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid white;">

                                             <!--Cabecera-->                   
        <div id="cabecera">

            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Flag_of_Venezuela.svg/125px-Flag_of_Venezuela.svg.png" alt="Venezuela"/>

            <h1>Venezuela</h1>

             Para saber más haga clic aquí: <a href="https://es.wikipedia.org/wiki/Venezuela" title="Ir a wikipedia"><img src="data:image/jpeg;base64,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" alt="wikipedia" height="70px"/></a>


        </div>
                                         <!--Fin de cabecera-->
                                       

        <hr style="background-color:yellow; color:yellow; height:5px;"/>

                                         <!--Contenedor-->

        <div id="wrapper">
   
                                        <!--Menú-->
            <div id="menu">

                <ul>
                    <li><a href="https://es.wikipedia.org/wiki/Gastronom%C3%ADa_de_Venezuela" title="Ver gastronomía venezolana" target="_blank">Gastronomía en Venezuela</a></li>
                    <li><a href="http://www.eluniversal.com/noticias/guia-turistica/las-mejores-playas-venezuela_642252" title="Ir a playas venezolanas" target="_blank">Playas de Venezuela</a></li>
                    <li><a href="http://enviajes.cl/venezuela/lugares-turisticos-de-venezuela/" title="Ver sitios turísticos venezolanos" target="_blank">Sitios turísticos venezolanos</a></li>
                    <li><a href="http://www.venezuelatuya.com/biografias/" title="Ver personajes históricos venezolanos" target="_blank">Personajes históricos de Venezuelaz</a></li>
                    <li><a href="https://es.wikipedia.org/wiki/Econom%C3%ADa_de_Venezuela" title="Ver economía venezolana" target="_blank">Economía en Venezuela</a></li>
                </ul>

            </div>
                                        <!--Fin de menú-->

            <hr style="background-color:blue; color:blue; height:5px;"/>

                                        <!--Cuerpo-->
            <div id="body">

                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Coat_of_arms_of_Venezuela.svg/79px-Coat_of_arms_of_Venezuela.svg.png" alt="Escudo de armas de Venezuela"/>

                <p>“Más cuesta mantener el equilibrio de la libertad que soportar el peso de la tiranía”.<cite> Simón Bolivar.</cite></p>
                <p>"El tamaño de tu éxito será el tamaño de tu esfuerzo".<cite> Francisco de Miranda.</cite></p>
           
            </div>
                                        <!--Fin de cuerpo-->

        </div>

                                      <!--Fin del contenedor-->                     
            <br/>
            <br/>

            <hr style="background-color:red; color:red; height:5px;"/>

                                    <!--Pie de página-->

            <div id="pie">

                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgA782_H-lq6-bH8-jHKpFLzW-5Guzvje09-fhejY9TCQCtSJo" alt="Gobierno bolivariano" width="150px" height="50px"/>
               Copyright 2017-2018 EnigmaticNerd <a href="https://www.aprenderaprogramar.com/foros/index.php?action=profile;u=7502" title="Ir a perfil del diseñador" target="_blank">Perfil del diseñador</a>
            </div>
                                   <!--Fin de pie de página-->

 </div>

    </body>
   
</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

54
Aprender a programar desde cero / Aprender a programar HTML desde cero. Maquetar estructura de página web CU00726B
« en: 09 de Agosto 2017, 19:24 »
Buenas tardes. Este es el enunciado del ejercicio CU00726B del tutorial de programación web con HTML desde cero:

Citar
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:

Citar
Los elementos a incluir son: un título h1, un título h2. Menú, separador hr, lista de elementos que son links, párrafos de texto que contienen algunos links. Imágenes. Un formulario. Imagen y texto de pie.

La página debe organizarse en capas según esta estructura: capa de cabecera (contiene títulos h1 y h2). Capa de cuerpo (contiene menú, párrafos y formulario). Capa de pie (contiene imagen y copyright).

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>CU00726B</title>
        <meta charset="utf-8"/>
    </head>

    <body>

       <div name="cabecera">
           <h1>Portal web aprenderaprogramar.com</h1>

           <h2>Didáctica y divulgación de la programación</h2>

       </div>

       <div name="cuerpo">
           <br/>

           <p>Menú</p>

           <hr/>

           <ul>
               <li><a href="#" title="Ir al inicio">Inicio</a></li>
               <li><a href="#" title="Ir a libros de programación">Libros de programación</a></li>
               <li><a href="#" title="Ir a cursos de programación">Cursos de programación</a></li>
               <li><a href="#" title="Ir a humor informático">Humor informático</a></li>
           </ul>

               <br/>

               <p>
                   Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.
               </p>

             
               <p>
                   Hay que tener claro que <a href="http://aprenderaprogramar.com" target="_blank" title="Ir a aprenderaprogramar.com">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 días podemos estar haciendo nuestros primeros programas.
              </p>

               
                <p>
                    Puedes seguir uno de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86" target="_blank" title="Ir a cursos de programación">nuestros cursos</a> 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
                    alternativos como Crimson Editor.
                </p>

                    <a  href="http://www.crimsoneditor.com/english/download.html" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Notepad%2B%2B_Logo.png" alt="Notepad++"/></a>
                   
                    <a  href="http://www.crimsoneditor.com/english/download.html" target="_blank"><img style="height: 120px;" href="https://notepad-plus-plus.org/download/v7.4.2.html" target="_blank" src="http://imag.malavida.com/mvimgbig/download-s/crimson-editor-115-0.jpg" alt="Crimson editor"/></a>
                    <br/>
                    <br/>

                    <p>Si quieres contactar con nosotros envíanos este formulario relleno: </p>
                   
                    <br/>

                    <form action="#" method="get">

                        <label for="nombre">Nombre:</label>
                        <input type="text" name="nombre" id="nombre"/>

                        <br/>

                        <label for="apellidos">Apellidos:</label>
                        <input type="text" name="apellidos" id="apellidos"/>

                        <br/>

                        <label for="direccion" name="direccion">Direccion:</label>
                        <input type="text" name="direccion" id="direccion"/>

                        <br/>

                        <label for="email">Correo electrónico:</label>
                        <input type="text" name="email" id="email"/>

                        <br/>

                        <label for="mensaje">Mensaje:</label>
                        <textarea name="mensaje" id="mensaje" rows="4" cols="50"></textarea>

                        <br/>
                        <br/>

                        <input type="submit" value="Enviar"/>
                        <input type="reset" value="Cancelar"/>

                    </form>
       </div>

       <div name="pie">

            <br/>
            <br/>
            <br/>

           <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="aprenderaprogramar.com"/>
           Copyright 2006-2038 aprenderaprogramar.com

       </div>
           
    </body>

</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias

55
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Formulario html sencillo con envío por método get Ejercicio CU00722B
« en: 09 de Agosto 2017, 07:47 »
Buenas noches. Una duda: ¿No son necesarios los id en los controles de línea de texto para que estén relacionados con los labels?

56
Aprender a programar desde cero / Programación HTML desde cero. Enctype multipart/form-data Ejercicio CU00725B
« en: 09 de Agosto 2017, 01:44 »
Buenas noches. Este es el enunciado del ejercicio CU00725B del tutorial de programador web con HTML desde cero:

Citar
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>>.

 

Ten en cuenta que para el envío de archivos tienes que establecer correctamente los atributos del formulario: method y enctype.

Acá el código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>

    <head>

        <title>CU00725B</title>
        <meta charset="utf-8"/>
       
    </head>

    <body>

        <h1>Inscripción al concurso Jara y Sedal</h1>

        <form action="accion.php" method="POST" enctype="multipart/form-data">

            <label for="nombre">Nombre: </label>
            <input name="nombre" id="nombre" type="text"/>

            </br>
            </br>

            <label for="apellidos">Apellidos: </label>
            <input type="text" name="apellidos" id="apellidos"/>

            </br>
            </br>
           
            <label for="direccion">Direccion: </label>
            <input type="text" name="direccion" id="direccion"/>

            </br>
            </br>
           
            <label for="fotografia">Fotografia: </label>
            <input type="file" name="fotografia" id="fotografia"/>

            </br>
            </br>
           
           
            <button name="enviar" type="submit">

                ¡¡¡Me apunto!!!

            </button>

            <button name="reset" type="reset">

                Cancelar

            </button>
           
        </form>
   
    </body>
   
</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

57
Aprender a programar desde cero / Ejercicio CU00724B de programación HTML desde cero. Botones con texto, submit
« en: 09 de Agosto 2017, 00:46 »
Buenas tardes. Este es el enunciado del ejercicio CU00724B del taller de programación web con HTML usando Notepad++ como editor:

Citar
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>>.

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>CU00724B</title>
        <meta charset="utf-8"/>
    </head>

    <body>

        <h1>Inscripción al concurso Saber y Ganar</h1>

        <form method="get" action="http://aprenderaprogramar.com">

           
                <label for="nombre">Nombre: </label>
                <input type="text" name="nombre" id="nombre"/>

                <br/>
                <br/>

                <label for="apellidos">Apellidos: </label>
                <input type="text" name="apellidos" id="apellidos"/>

                <br/>
                <br/>

                <label for="email">Email: </label>
                <input type="text" name="email" id="email"/>

                <br/>
                <br/>

                <label for="telefono">Teléfono: </label>
                <input type="text" name="telefono" id="telefono"/>

                </br>
                </br>
           
                <button type="submit" name="enviar">
               
                    ¡¡¡Me apunto!!!

                </button>

                <button type="reset" name="reset">

                    Cancelar

                </button>
       
        </form>

        <h1>Petición de información</h1>

        <form method="get" action="http://aprenderaprogramar.com">

            <label for="nombre_peticion">Nombre: </label>
            <input type="text" name="nombre_peticion" id="nombre_peticion"/>

            <br/>
            <br/>

            <label for="pais">Pais: </label>
            <input type="text" name="pais" id="pais"/>

            <br/>
            <br/>

            <label for="email_peticion">Email: </label>
            <input type="text" name="email_peticion" id="email_peticion"/>

            <br/>
            <br/>

            Consulta: <textarea name="consulta" cols="30" rows="2">Su consulta aquí</textarea>

            <br/>
            <br/>

            <input name="img" type="image" src="/images/aprenderaprogramar/imagen.png"/>

            <button type="reset" name="reset_peticion">

                Pulse aquí para Cancelar
               
                <br/>
               
                Esto borrará los datos

            </button>

        </form>
    </body>
</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

58
Aprender a programar desde cero / Re:Ejercicio CU00723B de Aprender a programar: HTML desde cero. checkbox y radio
« en: 08 de Agosto 2017, 16:54 »
Gracias por la aclaratoria, ya está un poco más claro. De cualquier forma, se que no es la última vez que lidiaré con el. Comprenderé mejor su funcionamiento con la práctica.

59
Aprender a programar desde cero / Re:Ejercicio CU00723B de Aprender a programar: HTML desde cero. checkbox y radio
« en: 08 de Agosto 2017, 06:13 »
Gracias por la corrección. ¿Me darías una explicación desde tu experiencia sobre el uso e importancia de los values en el control radio? Y respecto al label, lo coloqué como me planteas pero el texto se pone a la izquierda y el marcador a la derecha. No lo veo estético.

60
Aprender a programar desde cero / Ejercicio CU00723B de Aprender a programar: HTML desde cero. checkbox y radio
« en: 08 de Agosto 2017, 02:24 »
Buenas noches. Este es el enunciado del ejercicio CU00723B del tutorial de programación en HTML desde cero:

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. 

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>CU00723B</title>
        <meta charset="utf-8"/>
    </head>

    <body style="background-color:beige;">

        <h1>Preferencias musicales</h1>

        <form method="get" action="http://aprenderaprogramar.com/action.php">

           <input type="checkbox" name="rock" id="rock"/>
               <label for="rock">Rock</label>

               <br/>
           
           <input type="checkbox" name="jazz" id="jazz"/>
                <label for="jazz">Jazz</label>

                <br/>

            <input type="checkbox" name="pop" id="pop"/>
                <label for="pop">Pop</label>

            <hr style="color:cadetblue; background-color:cadetblue; height:10px;"/>

            <h3>Seleccione su edad</h3>

            <input name="edad" type="radio" value="menor" id="menor"/>
            <label for="menor">De 12 a 17 años</label>

            <br/>

            <input name="edad" type="radio" value="joven" id="joven"/>
            <label for="joven">De 18 a 35 años</label>

            <br/>

            <input name="edad" type="radio" value="adulto" id="adulto"/>
            <label for="adulto">De 18 a 35 años</label>

            <br/>

            <input name="edad" type="radio" value="mayor" id="mayor"/>
            <label for="mayor">De 36 a 65 años</label>

            <br/>

            <input name="edad" type="radio" value="anciano" id="anciano"/>
            <label for="anciano">Más de 65 años</label>

            <hr style="color:cadetblue; background-color:cadetblue; height:10px;"/>

            <h3>Grupos y cantantes que te gustan</h3>
            <p>Puede seleccionar varios manteniendo presionada la tecla "CTRL"</p>

            <select name="grupos[]" multiple="multiple">

                <optgroup label="Rock">
                    <option>Aerosmith</option>
                    <option>AC/DC</option>
                    <option>Iron Maiden</option>
                </optgroup>

                <optgroup label="Pop">
                    <option>Michael Jackson</option>
                    <option>Bruno Mars</option>
                    <option>Lady Gaga</option>
                </optgroup>

                <optgroup label="Jazz">
                    <option>Ray Charles</option>
                    <option>Amy Winehouse</option>
                    <option>Alicia Keys</option>
                </optgroup>

            </select>
           
            <br/>
            <br/>
           
            <input type="submit" value="Enviar"/>
            <input type="reset"/>

        </form>
    </body>
</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

Páginas: 1 2 [3] 4

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".