Contador general de visitas

menu interactivo

BlogandWeb.com

Cartel con texto animado

miércoles, 25 de abril de 2012

Como enviar un formulario "directo" a nuestro buzón de correo

Fuente:  http://www.forosdelweb.com/f17/enviar-formulario-con-dreamweaver-mx-191948/


Para poder enviar un formulario (usando Outlook o lo que tenga configurada esa persona), podemos probar el siguiente código.

Cópialo entero y guárdalo en un documento que se llame formulario.html

Recuerda que la línea donde dice "mailto:xesusvazquez@yahoo.es" , es porque ese formulario llegará sólo (única y exclusivamente) a esa cuenta de correo. Cámbialo por la tuya, para ver cómo funciona, ¿ok?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!>
<META content="" name=Author>
<META content="" name=keywords>&nbsp;
<BLOCKQUOTE>
<BLOCKQUOTE>
<BLOCKQUOTE>
<form name="form1" method="post" action="mailto:xesusvazquez@yahoo.es">
        <div align="center">
          <TABLE>
            <TBODY>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Nombre:
                  </B></FONT></TD>
                <TD><INPUT size=50 name=nombre> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Cargo:
                  </B></FONT></TD>
                <TD><INPUT size=50 name=cargo> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Empresa:
                  </B></FONT></TD>
                <TD align=right><INPUT size=50 name=empresa> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Direccion:
                  </B></FONT></TD>
                <TD align=right><INPUT size=50 name=direccion1> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Direccion:
                  </B></FONT></TD>
                <TD align=left><INPUT size=50 name=direccion2> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Ciudad:
                  </B></FONT></TD>
                <TD align=left><INPUT size=50 name=ciudad> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Provincia:
                  </B></FONT></TD>
                <TD align=left><INPUT size=15 name=provincia> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Codigo
                  Postal: </B></FONT></TD>
                <TD align=left><INPUT size=15 name=cp> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Pais:
                  </B></FONT></TD>
                <TD align=left><INPUT size=15 name=pais> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>E-mail:
                  </B></FONT></TD>
                <TD align=left><INPUT size=25 name=email> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Tel: </B></FONT></TD>
                <TD align=left><INPUT size=15 name=tel> </TD>
              </TR>
              <TR>
                <TD align=right><FONT face="Arial, Helvetica" size=2><B>Fax:

</B></FONT></TD>
                <TD align=left><INPUT size=15 name=fax> </TD>
              </TR>
              <TR>
                <TD align=middle colSpan=2><BR>
                  <FONT face="Arial, Helvetica" size=2><B>Escriba su consulta:
                  </B></FONT></TD>
              </TR>
              <TR>
                <TD align=middle colSpan=2><TEXTAREA name=comentarios rows=5

cols=48></TEXTAREA>
                </TD>
              </TR>
              <TR>
                <TD align=middle colSpan=2> <p><BR>
                    <INPUT type=reset value=Borrar>
                   
<input type="submit" name="Submit"

value="Enviar">
                  </p></TD>
              </TR>
            </TBODY>
          </TABLE>
        </div>
      </FORM></BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
<CENTER>
<HR align=center width="100%" color=#ffa518 SIZE=2>
<BR></CENTER>
<title>Formulario de Contacto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

</body>
</html>
Para conseguir 3 botones y que cada botón vaya a un sitio , debes poner delanbte la etiqueta >A HREF="http://www.dondetellevelacabeza.es"> y luego cerrarlo con un </A>.

Prueba este código:


<HTML>
<HEAD>
<TITLE> menú de cursos , para elegir lo que

quieras </TITLE>
</HEAD>

<BODY>

<A HREF="http://www.cursos.es">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="1.Cursos"
   title="">
</form>
</A>


<A HREF="http://www.dondeestamos.es">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="2.Donde estamos"
   title="">
</form>



<A HREF="http://www.manuales.es">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="3.Manuales"
   title="">
</form>

Y luego, este otro, que es lo mismo, pero con código CSS delante, que le da formato a todos los botones:





<HTML>
<HEAD>
<TITLE> menú de cursos , para elegir lo que

quieras </TITLE>
</HEAD>

<BODY>


<style type="text/css">

input.groovybutton
{
   font-size:16px;
   font-family:Trebuchet MS,sans-serif;
   font-weight:bold;
   color:#FFFFFF;
   width:400px;
   background-color:#66CCCC;
   border-style:groove;
   border-color:#336633;
   border-width:2px;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
   window.document.forms[FRM].elements

[BTN].style.color = "#FFFFCC";
   window.document.forms[FRM].elements

[BTN].style.borderColor = "#00CC00";
}

function goDim(FRM,BTN)
{
   window.document.forms[FRM].elements

[BTN].style.color = "#FFFFFF";
   window.document.forms[FRM].elements

[BTN].style.borderColor = "#336633";
}

</script>



<A HREF="http://www.cursos.es">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="1.Cursos"
   title="">
</form>
</A>


<A HREF="http://www.dondeestamos.es">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="2.Donde estamos"
   title="">
</form>



<A HREF="http://www.manuales.es">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="3.Manuales"
   title="">
</form>


</BODY>
</HTML>



</BODY>
</HTML>

Código y procedimiento para crear botones de menú en nuestra página web


para poder usar un programa de crear botones, tengo que recordar que tras poner el texto que necesito y el aspecto q me gustaria q tuviese, se van a generar uno o dos códigos.

cod. izquierda: css (sólo si uso "mouse over", si no, aparecerá "en blanco")

cod.derecha: el html necesario para q aparezca el botón del menú

Es importante recordar que deberias aplicar primero el codigo de apariencia (el "css") y luego, el boton sobre el q hará ese efecto.


Puedes probar este código que te propongo y recordar que no todos los navegadores aceptan cierto tipo de efectos:


<HTML>
<HEAD>
<TITLE> cabecera de tu web , es decir,

donde está la persona </TITLE>
</HEAD>

<BODY>
<style type="text/css">

input.groovybutton
{
   font-size:16px;
   font-family:Trebuchet MS,sans-serif;
   font-weight:bold;
   color:#FFFFFF;
   width:400px;
   background-color:#66CCCC;
   border-style:groove;
   border-color:#336633;
   border-width:2px;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color = "#FFFFCC";
   window.document.forms[FRM].elements[BTN].style.borderColor = "#00CC00";
}

function goDim(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
   window.document.forms[FRM].elements[BTN].style.borderColor = "#336633";
}

</script>

<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="Manuales     Cursos         Contacto"
   title="Manuales gratuitos de todo tipo"
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>


</BODY>
</HTML>




Otro programa realmente interesante para hacer botones (no gratuito al 100% , ojo!!!)

Fuente: http://web-buttons.com/samples.html

O bien, desde softonic:   http://free-web-buttons.softonic.com/

Hoy, veremos este programa para generar botones "atractivos" (visualmente) para nuestra web. Dado que es la versión gratuita, no podremos hacer todo lo que publicitan, pero nos ahorrará muchísimo tiempo, cuando querramos llevarlo a Dreamweaver.

martes, 24 de abril de 2012

Programa para botones -CSS Button Designer-

Fuente: http://css-button-designer.softonic.com/


Programa gratuito, fácil de manejar y con muchas opciones (botón normal, botón al pulsarse, etc). Nos da 2 códigos (el del aspecto -CSS-) y el del botón en sí (HTML).

He generado los códigos y los he acoplado a la estructura básica, quedando así:



<HTML>
<HEAD> <TITLE> TITULO </HEAD> </TITLE>

<BODY>



1er botón


<style type="text/css">

input.groovybutton
{
   font-size:16px;
   font-family:Comic Sans MS,sans-serif;
   color:#0033FF;
   border-top-style:outset;
   border-top-color:#CC33FF;
   border-top-width:2px;
   border-bottom-style:window-inset;
   border-bottom-color:#CC33FF;
   border-bottom-width:2px;
   border-left-style:outset;
   border-left-color:#CC33FF;
   border-left-width:2px;
   border-right-style:outset;
   border-right-color:#CC33FF;
   border-right-width:2px;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color =

"#FF9966";
}

function goDim(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color =

"#0033FF";
}

</script>


<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="Cursos"
   title=""
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>





2º botón



<style type="text/css">

input.groovybutton
{
   font-size:16px;
   font-family:Comic Sans MS,sans-serif;
   color:#0033FF;
   border-top-style:outset;
   border-top-color:#CC33FF;
   border-top-width:2px;
   border-bottom-style:window-inset;
   border-bottom-color:#CC33FF;
   border-bottom-width:2px;
   border-left-style:outset;
   border-left-color:#CC33FF;
   border-left-width:2px;
   border-right-style:outset;
   border-right-color:#CC33FF;
   border-right-width:2px;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color =

"#FF9966";
}

function goDim(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color =

"#0033FF";
}

</script>



<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="Contacto"
   title=""
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>



</BODY>

</HTML>

Uso avanzado de marcos: poner 2 páginas en 1 sola

El fin de este ejercicio es tener un archivo "separado" que se llame, por ejemplo,   marcos.html

Este archivo no tiene nada, sólo hace referencia a la división de la pantalla en partes, concretamente un 15%. En la parte superior muestra ejemplo5 y en la parte inferior, ejemplo 6.




<html>
<head>
<title>Las dos filas</title>
</head>
<frameset rows="15%,*">
<frame src="ejemplo5.html">
<frame src="ejemplo6.html">
</frameset>

IMPORTANTE: no usar etiqueta BODY, ya que sólo aparecerían las divisiones, pero NO la información.

Texto con colores en HTML


colores básicos en inglés:

white
orange
green
blue
purple
brown
yellow
pink
red

<br>

<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>

<font face="Arial" color="orange" size=5>El tipo (face) de esta

letra debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>
<br>
<font face="Arial" color="red" size=4>El tipo (face) de esta letra

debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>
<br>
<font face="Arial" color="yellow" size=3>El tipo (face) de esta

letra debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>
<br>
<font face="Arial" color="blue" size=2>El tipo (face) de esta letra

debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>
<br>
<font face="Arial" color="green" size=1>El tipo (face) de esta letra

debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>

<br>
<marquee>Bienvenidos a mi página</marquee>
<H1>
<p align="right">Tablas avanzadas</H1></p>

<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3"

CELLPADDING="2">
<TR>
   <TD COLSPAN="2" ALIGN="right">Dato 1</TD>
   <TD>Un texto cualquiera</TD>
   <TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
   <TD>Dato 4</TD>
   <TD>Dato 4</TD>
   <TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>

</BODY>
</HTML>