Programadortico.com: HTML

Mostrando las entradas con la etiqueta HTML. Mostrar todas las entradas

viernes, 2 de octubre de 2015

Implementar Imagen de Fondo con Gradianes en CSS - HTML

11:11 p.m. basico, css, diseño, gradianes, HTML, HTML5, web 1 comment

Implementar Imagen de Fondo con Gradianes en CSS - HTML

Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.

Este sencillo ejemplo posse la intención de ayudar a ubicar la manera de cómo diseñar una web muy básica utilizando CSS y HTML como herramientas, la idea principal es poder implementar fondo con GRADIANES en todos sus DIV. Este ejemplo se conformará de 2 archivos, uno que contendrán las etiquetas, osea el HTML y el otro el que contendrá un diseño escrito en CSS. El archivo 1 se llamaráindex.html y el 2do archivo se llamara estilos.css.

El archivo HTML deberá contener esto:

Código que dentro de "index.html"

<?xml version='1.0' encoding='UTF-8' ?>

<html>

<head>

<title>TÍTULO</title>

</head>

<h1>MI TÍTULO</h1>

</div>

<p></p>

DIV Céntro

</div>

DIV Izquierda

</div>

DIV Derecha

</div>

Pie de Página

</div>

</footer>

</body>

</html>

//ESTILO.css o <style>

#color_fondo {

background-color: cadetblue;

}

#superior {

width: 860px;

height: 70px;

margin: auto;

background: white;

border: 5px solid #E9E4E8;

border-color: forestgreen;

font-family: cursive;

text-align: center;

}

#centro {

width: 860px;

height: 560px;

margin: auto;

background: white;

border: 5px solid #E9E4E8;

border-color: darkred;

font-family: cursive;

text-align: center;

/* IMPLEMENTAR GRADIANES */

background: #a4b357;

background: -moz-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, #a4b357), color-stop(57%, #a4b357), color-stop(76%, #75890c), color-stop(100%, #75890c));

background: -webkit-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: -o-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: -ms-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: linear-gradient(to bottom, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c', GradientType=0 );

}

#inferior {

position: relative;

width: auto;

margin: auto;

background: white;

border: 5px solid #E9E4E8;

border-color: forestgreen;

font-family: fantasy;

padding: 5px 0px;

clear: both;

text-align: center;

}

#izquierda {

width: 290px;

height: 657px;

background: dodgerblue;

border: 5px solid #E9E4E8;

border-color: blue;

text-align: center;

position: absolute;

top: 8px;

left: 0;

margin: 0 0.5em;

//ESTILO BANNER

//display:scroll;

//position:fixed;

//bottom:5px;

/* IMPLEMENTAR GRADIANES */

background: #a4b357;

background: -moz-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, #a4b357), color-stop(57%, #a4b357), color-stop(76%, #75890c), color-stop(100%, #75890c));

background: -webkit-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: -o-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: -ms-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: linear-gradient(to bottom, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c', GradientType=0 );

}

#derecha {

width: 290px;

height: 657px;

background: brown;

border: 5px solid #E9E4E8;

border-color: #999900;

text-align: center;

position: absolute;

top: 8px;

right: 0;

margin: 0 0.5em;

/* IMPLEMENTAR GRADIANES */

background: #a4b357;

background: -moz-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, #a4b357), color-stop(57%, #a4b357), color-stop(76%, #75890c), color-stop(100%, #75890c));

background: -webkit-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: -o-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: -ms-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

background: linear-gradient(to bottom, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c', GradientType=0 );

}

//ESPERO LES SEA DE AYUDA GRACIAS POR COMENTAR :)

Ver Ejemplo Completo

Diseño Básico en HTML con CSS

10:47 p.m. css, diseño, HTML, web No comments

Diseño Básico en HTML con CSS

Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.

Este sencillo ejemplo posse la intención de ayudar a ubicar la manera de cómo diseñar una web muy básica utilizando CSS y HTML como herramientas. Este ejemplo se conformará de 2 archivos, uno que contendrán las etiquetas, osea el HTML y el otro el que contendrá un diseño escrito en CSS. El archivo 1 se llamará index.html y el 2do archivo se llamara estilos.css.

El archivo HTML deberá contener esto:

Código que dentro de "index.html"

<?xml version='1.0' encoding='UTF-8' ?>

<html>

<head>

<title>TÍTULO</title>

</head>

<h1>MI TÍTULO</h1>

</div>

<p></p>

DIV Céntro

</div>

DIV Izquierda

</div>

DIV Derecha

</div>

Pie de Página

</div>

</footer>

</body>

</html>

//ESTILO.css o <style>

#color_fondo {

background-color: cadetblue;

}

#superior {

width: 860px;

height: 70px;

margin: auto;

background: white;

border: 5px solid #E9E4E8;

border-color: forestgreen;

font-family: cursive;

text-align: center;

}

#centro {

width: 860px;

height: 560px;

margin: auto;

background: white;

border: 5px solid #E9E4E8;

border-color: darkred;

font-family: cursive;

text-align: center;

}

#inferior {

position: relative;

width: auto;

margin: auto;

background: white;

border: 5px solid #E9E4E8;

border-color: forestgreen;

font-family: fantasy;

padding: 5px 0px;

clear: both;

text-align: center;

}

#izquierda {

width: 290px;

height: 657px;

background: dodgerblue;

border: 5px solid #E9E4E8;

border-color: blue;

text-align: center;

position: absolute;

top: 8px;

left: 0;

margin: 0 0.5em;

//ESTILO BANNER

//display:scroll;

//position:fixed;

//bottom:5px;

}

#derecha {

width: 290px;

height: 657px;

background: brown;

border: 5px solid #E9E4E8;

border-color: #999900;

text-align: center;

position: absolute;

top: 8px;

right: 0;

margin: 0 0.5em;

}

//ESPERO LES SEA DE AYUDA GRACIAS POR COMENTAR :)

Ver Ejemplo Completo

viernes, 26 de junio de 2015

Calculadora Básica JavaScript ( Adobe Dreamweaver CS6 )

11:59 p.m. adobe, AYUDAS UNIVERSIDAD, calculadora, calculadora en javascript, calculadora html, codigo fuente, descargar calculadora, dreamweaver, HTML, java, javascript, programar calculadora No comments

Calculadora Básica JavaScript (Adobe Dreamweaver CS6)

Al final de Por Favor Comenten Que les parecio Parr mantener la página, NO Registrarse Que Tienen.

Este Proyecto de este hecho en Adobe Dreamweaver CS6 , el Requerimiento FUE Tomado de la ONU Curso de Programación, el Cual es Crear Una calculadora Que Pueda Realizar las Operaciones Básicas de SUMA, RESTA, multiplicación y división, Digitando en la página WEB de el Teclado .

AUTOR: Ismael Zamora

DESCARGA : http://www.mediafire.com/CALCULADORA.js

Recordar que Javascript es en lenguaje que puede ser utilizado por Profesionales y para quienes se inician en EL DESARROLLO y diseño de SITIOS WEB . No Requiere de compilación ya que el lenguaje funciona del lado del cliente, los Navegadores son los Encargados de Interpretar estos Códigos.

Vídeo:

Ver Ejemplo Completo

martes, 24 de junio de 2014

Cómo usar Clases para Interactuar con MYSQL desde PHP

9:27 p.m. clase php, clases, clases php, eliminar mysql, HTML, insertar mysql, listar mysql, listar php, mantenimiento mysql, modificar mysql, MYSQL5, php, phpmyadmin, select php mysql No comments

Cómo usar Clases para Interactuar con MYSQL desde PHP

Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.

Este ejemplo que les dejo se trata de cómo interactuar (INSERTAR, ELIMINAR, MODIFICAR, SELECCIONAR), con una base de datos MYSQL desde una Clase hecha en PHP, muy fácil. Sigan el ejemplo paso a paso y ejecútelo en tu COMPUTADORA, yo utilizo WAMP SERVER cómo servidor local. En el Link de Descarga vendrán los archivos con los scripts originales del ejemplo.

Cómo se Compone la Base de Datos :

NOMBRE DE LA BASE DE DATOS: "database".
NOMBRE DE LA TABLA: "empleado".

AUTOR: Anthony Salazar Araya

DESCARGA : http://www.mediafire.com/CLASES_PHP_+_SCRIPT_base_datos .php

Aquí tienen el código PHP sino quieren descargarlo, recuerden que el Script de la base de Datos se descarga arriba:

<?php
error_reporting(E_ALL ^ E_DEPRECATED);//OCULTAR ADVERTENCIAS NORMALES DEL MYSQL

//IMPORTANTE INCLUIR LAS CLASES
include_once ('clase_DataBase.php');
include_once ('clase_Empleado.php');

//INSERTAR REGISTRO 
$bd1=new DataBase();
$bd1->ejecutarSql("insert into empleado values (
    'null',
    'Antony',
    'Salazar Araya')");

//MODIFICAR REGISTRO    
$bd2= new DataBase(); 
$bd2->ejecutarSql("UPDATE empleado 
     SET id = 1 , nombre= 'Antony', apellido='Salazar Araya' 
     WHERE id=2");
     
//ELIMINAR REGISTRO    
$bd3= new DataBase(); 
$bd3->ejecutarSql("DELETE FROM empleado WHERE empleado.id=2"); 

//SELECCIONAR REGISTROS
$db4=new DataBase();
$db4->ejecutarSql("Select * from empleado");
$datos=$db4->obtenerRegistro();
   
     while($datos){
      echo "<br>ID: $datos[0] - NOMBRE: $datos[1] - APELLIDO: $datos[2]";
   $datos=$db4->obtenerRegistro();
       }//while    

?>

Con esto ya el programa les debería Funcionar 100%, Gracias y cualquier Duda me la pueden publicar Aquí:

Ver Ejemplo Completo

domingo, 22 de junio de 2014

Método para Redireccionar a otra página PHP

1:53 p.m. HTML, llevar a otra página php, metodos php, otra pagina, php, php redirect, redireccionar No comments

Método para Redireccionar a otra página PHP

Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.

Este código que les dejo se trata de un método que dándole cómo parámetro una dirección de una página web, te llevará a ella desde la página actual donde estés. Sigan el ejemplo paso a paso y ejecútelo en tu COMPUTADORA, yo utilizo WAMP SERVER cómo servidor local.

Ejemplo:

Página: http://www.programadortico.com/

Cómo se Compone el Script PHP :

Un método llamado: redireccionar() .
Y una llamada al método.

AUTOR: Anthony Salazar Araya

DESCARGA : http://www.mediafire.com/REDIRECCIONAR.php

Aquí tienen el código sino quieren descargarlo:

<?php
function redireccionar($pagina){
            header("Location:".$pagina."");
         }

$pag = 'http://www.programadortico.com/';

//EJECUTO LA FUNCIÓN y asigno resultado a una variable
$resultado = redireccionar( $pag );

?>

Con esto ya el programa les debería Funcionar 100%, Gracias y cualquier Duda me la pueden publicar Aquí:

Ver Ejemplo Completo

Método para Convertir Segundos a Minutos PHP

1:31 p.m. conversor, convertir segundos a minutos, HTML, Método para Convertir Segundos en Minutos PHP, minutos php, pasar segundos a minutos, php, segundos php No comments

Método para Convertir Segundos a Minutos PHP

Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.

Este código que les dejo se trata de un método que dándole cómo parámetro una cantidad de Segundos logra convertirla en la cantidad de minutos exactos. Sigan el ejemplo paso a paso y ejecútelo en tu COMPUTADORA, yo utilizo WAMP SERVER cómo servidor local.

Ejemplo:

Hora: 3600

3600 Segundos son: 60 MINUTOS

Cómo se Compone el Script PHP :

Un método llamado: conversor_minutos() .
Y una llamada al método.

AUTOR: Anthony Salazar Araya

DESCARGA : http://www.mediafire.com/CONVERSOR_MINUTOS.php

Aquí tienen el código sino quieren descargarlo:

<?php
function conversor_minutos($segundos) {
 
$horas = floor($segundos/3600);
$minutos = floor(($segundos/60));
$total= $minutos;
return $total;
}

$segundos = 3600;

//EJECUTO LA FUNCIÓN y asigno resultado a una variable
$resultado = conversor_minutos( $segundos );

//IMPRIMO RESULTADO
echo $segundos, ' segundos son: ',$resultado,' Minutos' ;

?>

Con esto ya el programa les debería Funcionar 100%, Gracias y cualquier Duda me la pueden publicar Aquí:

Ver Ejemplo Completo

Método para Convertir Segundos a Horas y Minutos PHP

1:12 p.m. convertir segundos a horas, convertir segundos a minutos, gratis, HORAS PHP, HTML, Método para Convertir Segundos a Horas y Minutos PHP, metodos php, minutos php, php, php5, segundos php No comments

Método para Convertir Segundos a Horas y Minutos PHP

Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.

Este código que les dejo se trata de un método que dándole cómo parámetro una cantidad de Segundos logra convertirla en la cantidad de Horas, minutos y segundos exactos. Sigan el ejemplo paso a paso y ejecútelo en tu COMPUTADORA, yo utilizo WAMP SERVER cómo servidor local.

Ejemplo:

Hora: 3602

3602 Segundos son: 1 h 0 m 2s

Cómo se Compone el Script PHP :

Un método llamado: conversor_segundos() .
Y una llamada al método.

AUTOR: Anthony Salazar Araya

DESCARGA : http://www.mediafire.com/CONVERSOR_MINUTOS.php

Aquí tienen el código sino quieren descargarlo:

<?php
function conversor_segundos($segundos) {

$horas = floor($segundos/3600);
$minutos = floor(($segundos-($horas*3600))/60);
$segundos = $segundos-($horas*3600)-($minutos*60);
$total= $horas.' h '.$minutos.' m '.$segundos.'s';
return $total;
}

$segundos = 3602;

//EJECUTO LA FUNCIÓN y asigno resultado a una variable
$resultado = conversor_segundos( $segundos );

//IMPRIMO RESULTADO
echo $segundos, ' segundos son: ',$resultado ;

?>

Con esto ya el programa les debería Funcionar 100%, Gracias y cualquier Duda me la pueden publicar Aquí:

Ver Ejemplo Completo

Método para Invertir una Fecha PHP

12:31 p.m. FECHA INVERTIDA PHP, HTML, INVERTIR FECHA PHP, METODO PHP, php 2 comments

Método para Invertir una Fecha PHP

Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.

Este código que les dejo se trata de un método que dándole cómo parámetro una Fecha logra invertirla. Sigan el ejemplo paso a paso y ejecútelo en tu COMPUTADORA, yo utilizo WAMP SERVER cómo servidor local.

Ejemplo:

Hora: 2014-05-22

2014-05-22 invertida es: 22-05-2014

Cómo se Compone el Script PHP :

Un método llamado: invertirFecha() .
Y una llamada al método.

AUTOR: Anthony Salazar Araya

DESCARGA : http://www.mediafire.com/INVERTIR_FECHA.php

Aquí tienen el código sino quieren descargarlo:

<?php
    function invertirFecha($Fecha){
    $Fecha=explode("-",$Fecha);
    $fec=$Fecha[2]."-".$Fecha[1]."-".$Fecha[0];
    return $fec;
     }

$fecha = '2014-05-22';


//EJECUTO LA FUNCIÓN y asigno resultado a una variable
$resultado = invertirFecha( $fecha );

//IMPRIMO RESULTADO
echo $fecha,'  invertida es:  ',$resultado;

?>

Con esto ya el programa les debería Funcionar 100%, Gracias y cualquier Duda me la pueden publicar Aquí:

Ver Ejemplo Completo

sábado, 21 de junio de 2014

Método para Calcular Total de Horas que han Pasado entre 2 Fechas Distintas PHP

5:29 p.m. calculo de horas entre fechas, fechas php, HTML, php, tiempo entre 2 fechas, time, TOTAL DE MINUTOS ENTRE 2 FECHAS, TOTAL DE TIEMPO ENTRE 2 FECHAS No comments

Método para Calcular Total de Horas que han Pasado entre 2 Fechas Distintas PHP

Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.

Este código que les dejo se trata de un método que dándole 2 Fechas distintas, te dará el total de horas que ha pasado entre esas Fechas. Basándose en una FECHA INICIAL y una FECHA FINAL.Sigan el ejemplo paso a paso y ejecútelo en tu COMPUTADORA, yo utilizo WAMP SERVER cómo servidor local.

Ejemplo:

FECHA INICIAL: 2014-01-01 o también de esta manera: 2014-01-01 01:00:00
FECHA FINAL: 2014-01-02 o también de esta manera: 2014-01-02 01:00:00

El resultado será: 24:00:00 HORAS han pasado entre las Fechas : 2014-01-01 y
2014-01-02

Cómo se Compone el Script PHP :

Un método llamado: calc_horas_totales() .
Y una llamada al método.

AUTOR: Anthony Salazar Araya

DESCARGA : http://www.mediafire.com/CALCULAR_TOTAL_HORAS.php

Aquí tienen el código sino quieren descargarlo:

<?php
function calc_horas_totales($fecha_inicial, $fecha_final) { 
    $total_segundos = strtotime($fecha_final) - strtotime($fecha_inicial); 
    $horas              = floor ( $total_segundos / 3600 );
    $minutos            = ( ( $total_segundos / 60 ) % 60 );
    $segundos            = ( $total_segundos % 60 );
     
    $time['horas']      = str_pad( $horas, 2, "0", STR_PAD_LEFT );
    $time['minutos']    = str_pad( $minutos, 2, "0", STR_PAD_LEFT );
    $time['segundos']    = str_pad( $segundos, 2, "0", STR_PAD_LEFT );
     
    $time               = implode( ':', $time );
     
    return $time;

}//fin funcion

$fecha_inicial = '2014-01-01';  //otro formato mas exacto: 2014-01-01 01:00:00
$fecha_final   = '2014-01-02'; //otro formato mas exacto: 2014-01-02 01:00:00

//EJECUTO LA FUNCIÓN y asigno resultado a una variable
$resultado = calc_horas_totales( $fecha_inicial , $fecha_final );

//IMPRIMO RESULTADO
echo $resultado, ' HORAS han pasado entre las fechas: '.$fecha_inicial.' y '.$fecha_final;

?>

Con esto ya el programa les debería Funcionar 100%, Gracias y cualquier Duda me la pueden publicar Aquí:

Ver Ejemplo Completo

Programadortico.com

PROYECTOS y CÓDIGO FUENTE DESCARGABLES GRATUITAMENTE

Ayudese con sus Proyectos con los Ejemplos de Código Fuente.

Código Completo de Proyectos y Tareas de Programación a un Solo Clic para Ayudarte en tu Sistema.

Descargue Proyectos de Programación que usan Sockets para Comunicarse entre Clientes

Muchos Proyectos en Diferentes Lenguajes de Programación

Traducir Página

DONAR para MANTENER PÁGINA :-)

GANA DINERO $$ YO LO HAGO !!!

Fundador

GANA DINERO $$$ YO LO HAGO !!!

BUSCANOS EN FACEBOOK

Popular