Scribd Logo
Importer

Bienvenue sur Scribd !

  • CU00728B Ejemplo Formulario HTML Crear Portal Web Basico Codigo Var PDF

    Transféré par

    Onesany Tecnologias
    54 vues4 pages
    CU00728B ejemplo formulario HTML crear portal web basico codigo var

    Titre original

    CU00728B ejemplo formulario HTML crear portal web basico codigo var.pdf

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    CU00728B ejemplo formulario HTML crear portal web basico codigo var

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    54 vues4 pages

    CU00728B Ejemplo Formulario HTML Crear Portal Web Basico Codigo Var PDF

    Transféré par

    Onesany Tecnologias
    CU00728B ejemplo formulario HTML crear portal web basico codigo var

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    Ejemplo formulario HTML. Crear un portal web bsico.

    APRENDERAPROGRAMAR.COM

    EJEMPLO FORMULARIO
    HTML (METHOD, ACTION).
    CREAR PORTAL WEB
    BSICO. EJEMPLO DE
    CDIGO EN CAPAS DIV.
    (CU00728B)

    Seccin: Cursos
    Categora: Tutorial bsico del programador web: HTML desde cero
    Fecha revisin: 2029
    Resumen: Entrega n28 del Tutorial bsico HTML desde cero.

    Autor: Enrique Gonzlez Gutirrez

    aprenderaprogramar.com, 2006-2029

    Ejemplo formulario HTML. Crear un portal web bsico.

    FORMULARIO DE DATOS PERSONALES


    En esta entrega nos vamos a centrar en crear un formulario de entrada de datos personales: nombre,
    apellidos, direccin, correo electrnico y nmero de telfono. Los formularios son elementos muy
    frecuentes en las pginas web y se usan para recabar datos de todo tipo por parte de los usuarios.

    Apoyndonos en el diseo obtenido en la entrega anterior. Crearemos una nueva pgina. Para ello slo
    tendremos que modificar el contenido de la capa (div) body.
    <div id="body">
    <form method="get" action="http://aprenderaprogramar.com">
    Nombre: <input type="text" name="nombre" /><br />
    Apellidos: <input type="text" name="apellidos" /><br />
    Direccin: <input type="text" name="direccion" /><br />
    Correo electrnico: <input type="text" name="correo" /><br />
    Telfono: <input type="text" name="telefono" /><br />
    </form>
    </div>

    A modo de ejercicio, abre un editor como Notepad++, escrbe el cdigo y gurdalo con un nombre
    como ejemplo1.html. A continuacin, visualiza el resultado en tu navegador. Recordar que aunque en
    este ejemplo falten etiquetas HTML el navegador interpretar el cdigo y tratar de mostrar un
    resultado. Sin embargo, para que la pgina est correctamente construida deberamos incluir todas las
    etiquetas propias de un documento HTML (como <html> </html>, etc.).

    Si nuestro formulario lo incluimos dentro del pequeo portal que habamos creado en la anterior
    entrega del curso, el cdigo completo sera el siguiente. Abre un editor como Notepad++, escrbelo y
    gurdalo con un nombre como ejemplo2.html. A continuacin, visualiza el resultado en tu navegador.
    aprenderaprogramar.com, 2006-2029

    Ejemplo formulario HTML. Crear un portal web bsico.

    <!DOCTYPE

    HTML

    PUBLIC

    "-//W3C//DTD

    HTML

    4.01

    Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta charset="utf-8">
    <title>Portal bsico - aprenderaprogramar.com</title>
    </head>

    <body>
    <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid gray;">
    <div id="header">
    Portal (Tutorial bsico 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="http://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 />
    Direccin: <input type="text" name="direccion" /><br />
    Correo electrnico: <input type="text" name="correo" /><br />
    Telfono: <input type="text" name="telefono" /><br />
    </form>
    </div>
    <!-- fin cuerpo -->
    </div>
    <!-- fin contenedor -->
    <br /> <br /> <br />
    <div id="footer">
    Copyright 2006-2072 aprenderaprogramar.com
    </div>
    </div>
    </body>
    </html>

    aprenderaprogramar.com, 2006-2029

    Ejemplo formulario HTML. Crear un portal web bsico.

    Si abrimos la pgina HTML del ejemplo anterior obtendremos una visualizacin similar a la siguiente:

    Fjate que el cdigo de la cabecera, men y pie es exactamente el mismo que el de la entrega anterior.
    Slo hemos modificado el cuerpo de la pgina. Cuando navegas por Internet, se suelen mantener las
    mismas cabeceras, men y pie en las pginas HTML que visitamos. Es decir, es como si existiera una
    plantilla de forma que el aspecto es siempre el mismo (cabecera, pie, color de fondo) excepto una
    parte de contenido central. Cuando tengas ms conocimientos, en vez de repetir el cdigo en todos los
    archivos, podrs utilizar instrucciones especficas para hacer que esos contenidos de plantilla se
    carguen en todas las pginas de un portal sin necesidad de ir repitindolos en todas las pginas que
    creamos. Adems, as podramos cambiar el elemento cabecera en un nico lugar y obtener su cambio
    en todas las pginas, sin tener que editar todas las pginas una por una para cambiar su cabecera. Sin
    embargo, preferimos no explicar esto ahora para tratar de ir paso por paso.

    EJERCICIO
    Modifica el formulario HTML con el que hemos trabajado para incluir un campo fotografa que permita
    el envo de un archivo de imagen como parte del formulario. Responde a estas preguntas:
    Qu atributo ha de especificarse para el form para poder enviar archivos? Qu valor ha de darse a
    dicho atributo? Qu mtodo de envo hay que especificar para el form si se envan archivos?
    Para comprobar si tus
    aprenderaprogramar.com.

    respuestas

    son

    correctas

    puedes

    consultar

    en

    los

    Prxima entrega: CU00729B


    Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:
    http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
    aprenderaprogramar.com, 2006-2029

    foros

    Vous aimerez peut-être aussi