Es muy explícito:
Programa 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pasar datos a otro php</title>
</head>
<body>
<div class="wrapper">
<p>Formulario de datos</p><br>
<div class="push">Subtitulos de ejemplo</div>
<div><form name="form1" id="form1" method="post" action="frm_smpl4b.php" />
<label for="label1" id="label1">Ingrese su nombre</label>
<input type="text" placeholder="Escribe tu nombre" maxlength="10" name="nombre" id="nombre" required />
<input type="password" name="password" id="password" required />
<input type="email" name="email" id="email"required/>
<input type="submit" name="button1" id="button1" value="Enviar" />
</form></div>
</div><br><br><br>
<div class="push" id="mydiv1">Resultados</div><br><br><br>
<div class="footer">
<p>Derechos de autor reservados, Copyright jsantaella70 (c)2018</p>
</div>
</body>
</html>
Programa 2
<?php
echo 'He recibido los valores: ';
echo '<label>Nombre </label> ' . $_POST["nombre"] . '<br>';
echo '<label>Correo </label> ' . $_POST["email"] . '<br>';
echo '<label>Clave </label>' . $_POST["password"] . '<br>';
echo '<br>'.'Estoy empleando el atributo name de los campos del formulario recibido';
echo '<br>'.'Por supuesto, no he impreso todos los objetos';
echo '<br>'.'Por cierto, no debería imprimir el valor de un clave';
?>
martes, 7 de agosto de 2018
HTML programa ahora mismo y de una vez...
HTML data de 1993 hasta la fecha bajo desarrollo del World Wide Web Consortium (W3C) o Consorcio WWW, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto); código base para sitios web, pero también para uso del navegador en equipos locales y sin conexión a internet para emular software de presentaciones, por medio del manejo de los mapas y enlaces y combinado con javascript se hacen múltiples programas de cálculos y hasta juegos.
Ejemplos de programación en HTML, para este tipo de contenido solamente necesito un block de notas, aunque yo recomiendo de una vez un editor de texto como bluefish o sublimetext, por ejemplo, más profesional y al guardar el archivo serciorarse de guardarlo con un formato utf-8 para caracteres extendidos y definir esa misma opción para las configuraciones a emplear en todo, si es ansi, de igual manera.
Mi primer código primer.html, lo busco en la carpeta donde le haya guardado y click derecho sobre él, así selecciono 'abrir con' y elijo un navegador.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi primer ejemplo de HTML</title>
</head>
<body>
<p>Si no necesito código ni estilo, simplemente escribo, esto es un ejemplo de
página informativa, pues acá solo me interesa colocar esto....</p>
</body>
</html>
Esto demuestra el documento mínimo que yo escribo para un html, puedo variarlo
El español es un lenguaje que posee caracteres especiales tales como tildes y, ñ, entre otros símbolos; lo cual en HTML era un problema, que se soluciona con <meta charset="UTF-8">, que justamente la he empleado.
Ya aquí entonces les explico algunas de las etiquetas empleadas y de las más importantes en general:
La etiqueta que indica que se está trabajando con HTML, no es indispensable, pero es recomendable colocar por convención de compatibilidad.
<!DOCTYPE html>
Coentarios:
Seinician con la cadena <!-- y se cierran con -->, por ejemplo:
<!-- Este es un comentario en HTML, no se muestra por pantalla -->
La etiqueta que indica que se inicia el código HTML es la siguiente:
<html> y se cierra con </html>
Lugo se cuenta con <head> y se cierra con </head>, que se emplea para cargar las librerías y estilo, que se aplicará al resto del programa (eso entre otras funciones).
Ahora sí, <body> que cierra con </body>, es donde se genera la vista del documento, aunque según el caso y necesidad, la vista y el estilo e incluso, la vista, el estilo y el control.
Quiero hacer mención a dos etiquetas necesarias:
<form>, que cierra con </form>, engloba los datos de un formulario, los cuales se refieren a un tipo de información.
Y la etiqueta <div>, que cierra con </div>, que me permiten crear capas de diferentes clases, por ejemplo una capa general es simplemente div, pero una clase contenedor la diferencio, por ejemplo, porque su color de fondo es amarillo (lo cual analizaremos posteriormente).
Esto significa que el documento mínimo que yo escribo para un html, puedo variarlo, así se llega a lo siguiente:
De otra manera, me planteo de una vez el siguiente esquema
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento basse de html</title>
</head>
<body>
<div class="wrapper">
<p>Formulario de datos</p>
<div class="push">Subtitulos de ejemplo</div>
<div><form name="form1" id="form1" method="post" action="formulario1a.html" />
<label for="label1" id="label1">Ingrese su nombre</label>
<input type="text" placeholder="Escribe tu nombre" maxlength="10" name="nombre" id="nombre" required />
<input type="button" name="button1" id="button1" value="Enviar" />
</form></div>
</div>
<br>
-----------Esto no es etiqueta, ni comentario, simple texto sin estilo y vale...
<br><br><br>
<div class="push" id="mydiv1">Resultados</div>
<div class="footer">
<p>Derechos de autor reservados, Copyright jsantaella70 (c)2018</p>
</div>
</body>
</html>
Obviamente en la etiqueta <form> se especifica que el mismo se llama cuando el usuario presione el botón, pero allí se pede especificar a otro archivo de html p uno de php. El código comentado es el siguiente:
<!DOCTYPE html>
<!-- Este es un comentario en HTML, no se muestra por pantalla -->
<html>
<head>
<!-- Se establece el juego de caracteres para poder usar acentos y eso...-->
<meta charset="UTF-8">
<!-- En la etiqueta head van los enlaces a css y librerías de js -->
<!-- También se puede definir estilo y script acá y el título en navegador-->
<title>Documento basse de html</title>
</head>
<body>
<div class="wrapper">
<!-- Wrapper lo uso como un contenedor de base o capa de contenido principal -->
<p>Formulario de datos</p>
<div class="push">Subtitulos de ejemplo</div>
<!-- push es una clase de contenido-->
<div><form name="form1" id="form1" method="post" action="formulario1a.html" />
<!-- Este formulario lo tengo en una capa de clase genérica -->
<label for="label1" id="label1">Ingrese su nombre</label>
<input type="text" placeholder="Escribe tu nombre" maxlength="10" name="nombre" id="nombre" required />
<input type="button" name="button1" id="button1" value="Enviar" />
<!-- Este button me sirve para enviar a este u otro formulario -->
<!-- todos los datos contenidos dentro del form -->
</form></div>
</div>
<br><!--Esta etiqueta solitaria indica salto de línea cuando se requiera usar-->
-----------Esto no es etiqueta, ni comentario, simple texto sin estilo y vale...
<br><br><br><!--Obviamente, 3 saltos de línea-->
<div class="push" id="mydiv1">Resultados</div>
<!-- los resultados es una variacion de la clase push, por ello le puse un id -->
<div class="footer">
<!-- Esta clase es para hacer un pié de página -->
<p>Derechos de autor reservados, Copyright jsantaella70 (c)2018</p>
</div>
<!-- Este ejemplo indica que podemos maquetar lo que queremos visualizar -->
<!-- Sin necesidad de sobrecargar con instrucciones de css -->
<!-- Eso es trabajo del diseñador en los proyectos complejos -->
</body>
</html>
Como ejercicio, puede deducir cada capa(div), clases ("class") y "id".
Ejemplos de programación en HTML, para este tipo de contenido solamente necesito un block de notas, aunque yo recomiendo de una vez un editor de texto como bluefish o sublimetext, por ejemplo, más profesional y al guardar el archivo serciorarse de guardarlo con un formato utf-8 para caracteres extendidos y definir esa misma opción para las configuraciones a emplear en todo, si es ansi, de igual manera.
Mi primer código primer.html, lo busco en la carpeta donde le haya guardado y click derecho sobre él, así selecciono 'abrir con' y elijo un navegador.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi primer ejemplo de HTML</title>
</head>
<body>
<p>Si no necesito código ni estilo, simplemente escribo, esto es un ejemplo de
página informativa, pues acá solo me interesa colocar esto....</p>
</body>
</html>
Esto demuestra el documento mínimo que yo escribo para un html, puedo variarlo
El español es un lenguaje que posee caracteres especiales tales como tildes y, ñ, entre otros símbolos; lo cual en HTML era un problema, que se soluciona con <meta charset="UTF-8">, que justamente la he empleado.
Ya aquí entonces les explico algunas de las etiquetas empleadas y de las más importantes en general:
La etiqueta que indica que se está trabajando con HTML, no es indispensable, pero es recomendable colocar por convención de compatibilidad.
<!DOCTYPE html>
Coentarios:
Seinician con la cadena <!-- y se cierran con -->, por ejemplo:
<!-- Este es un comentario en HTML, no se muestra por pantalla -->
La etiqueta que indica que se inicia el código HTML es la siguiente:
<html> y se cierra con </html>
Lugo se cuenta con <head> y se cierra con </head>, que se emplea para cargar las librerías y estilo, que se aplicará al resto del programa (eso entre otras funciones).
Ahora sí, <body> que cierra con </body>, es donde se genera la vista del documento, aunque según el caso y necesidad, la vista y el estilo e incluso, la vista, el estilo y el control.
Quiero hacer mención a dos etiquetas necesarias:
<form>, que cierra con </form>, engloba los datos de un formulario, los cuales se refieren a un tipo de información.
Y la etiqueta <div>, que cierra con </div>, que me permiten crear capas de diferentes clases, por ejemplo una capa general es simplemente div, pero una clase contenedor la diferencio, por ejemplo, porque su color de fondo es amarillo (lo cual analizaremos posteriormente).
Esto significa que el documento mínimo que yo escribo para un html, puedo variarlo, así se llega a lo siguiente:
De otra manera, me planteo de una vez el siguiente esquema
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento basse de html</title>
</head>
<body>
<div class="wrapper">
<p>Formulario de datos</p>
<div class="push">Subtitulos de ejemplo</div>
<div><form name="form1" id="form1" method="post" action="formulario1a.html" />
<label for="label1" id="label1">Ingrese su nombre</label>
<input type="text" placeholder="Escribe tu nombre" maxlength="10" name="nombre" id="nombre" required />
<input type="button" name="button1" id="button1" value="Enviar" />
</form></div>
</div>
<br>
-----------Esto no es etiqueta, ni comentario, simple texto sin estilo y vale...
<br><br><br>
<div class="push" id="mydiv1">Resultados</div>
<div class="footer">
<p>Derechos de autor reservados, Copyright jsantaella70 (c)2018</p>
</div>
</body>
</html>
Obviamente en la etiqueta <form> se especifica que el mismo se llama cuando el usuario presione el botón, pero allí se pede especificar a otro archivo de html p uno de php. El código comentado es el siguiente:
<!DOCTYPE html>
<!-- Este es un comentario en HTML, no se muestra por pantalla -->
<html>
<head>
<!-- Se establece el juego de caracteres para poder usar acentos y eso...-->
<meta charset="UTF-8">
<!-- En la etiqueta head van los enlaces a css y librerías de js -->
<!-- También se puede definir estilo y script acá y el título en navegador-->
<title>Documento basse de html</title>
</head>
<body>
<div class="wrapper">
<!-- Wrapper lo uso como un contenedor de base o capa de contenido principal -->
<p>Formulario de datos</p>
<div class="push">Subtitulos de ejemplo</div>
<!-- push es una clase de contenido-->
<div><form name="form1" id="form1" method="post" action="formulario1a.html" />
<!-- Este formulario lo tengo en una capa de clase genérica -->
<label for="label1" id="label1">Ingrese su nombre</label>
<input type="text" placeholder="Escribe tu nombre" maxlength="10" name="nombre" id="nombre" required />
<input type="button" name="button1" id="button1" value="Enviar" />
<!-- Este button me sirve para enviar a este u otro formulario -->
<!-- todos los datos contenidos dentro del form -->
</form></div>
</div>
<br><!--Esta etiqueta solitaria indica salto de línea cuando se requiera usar-->
-----------Esto no es etiqueta, ni comentario, simple texto sin estilo y vale...
<br><br><br><!--Obviamente, 3 saltos de línea-->
<div class="push" id="mydiv1">Resultados</div>
<!-- los resultados es una variacion de la clase push, por ello le puse un id -->
<div class="footer">
<!-- Esta clase es para hacer un pié de página -->
<p>Derechos de autor reservados, Copyright jsantaella70 (c)2018</p>
</div>
<!-- Este ejemplo indica que podemos maquetar lo que queremos visualizar -->
<!-- Sin necesidad de sobrecargar con instrucciones de css -->
<!-- Eso es trabajo del diseñador en los proyectos complejos -->
</body>
</html>
Como ejercicio, puede deducir cada capa(div), clases ("class") y "id".
Suscribirse a:
Entradas (Atom)