martes, 5 de marzo de 2019

CURSO HTML_CCS_2 Módulo 3_Actividad 11: Cómo se maqueta una página web


<!DOCTYPE html>
<html lang="es">
<head>
        <!--Esta línea a continuación sirve para que los caracteres
         como la ñ o tildes se visualicen correctamente-->
        <meta charset="utf-8" />
         <title>Registro - iDESWEB</title>
</head>       
<body>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  width: 90%;
  margin: 0 auto;
}

header {
  text-align: center;
}

h1, h2 {
  font-family: Georgia, serif;
}

h1 {
  font-size: 3em;
}

fieldset {
  margin: 1em auto;
}

legend {
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
}

label {
  font-weight: bold;
  display: block;
}

input:focus, select:focus {
  background-color: yellow;
}

input:hover, select:hover {
  background-color: red;
}
#boton-crear {
  font-size: 2em;
  padding: 0.5em;
}

.inline {
  display: inline;
}
</style>
<!--Creamos una caja llamada contenedor. div es una etiqueta
contenedora que actúa como caja contenedora de otros elementos.
Cobra sentido con el uso de CSS-->
<header>
             <h1>iDESWEB</h1>
<h2>Formulario de registro</h2>
</header>
<div id="contenedor_1">
               <form id="formulario1" name="formulario1" method="post">
               <fieldset id="quien_eres">
               <legend>¿Quién eres?</legend>
     <p>                                                                                       <p>¶
<label for="nombre">Nombre : </label>
                              <label>Nombre : </label>
               ext" name="correo" id="correo"><br>
                              Fecha de nacimiento:
                <select name="dias" id="dias">             
                                            <option value="0">Día</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                  </select>
                  <select name="mes" id="mes">          
                                            <option value="0">Mes</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                  </select>
                  <select name="ano" id="ano">           
                                            <option value="0">Año</option>
                                             <option value="1">1960</option>
                                            <option value="2">1961</option>
                                            <option value="3">1962</option>
                                            <option value="4">1963</option>
                                            <option value="5">1964</option>
                                            <option value="6">1965</option>
                                            <option value="7">1966</option>
                                            <option value="9">1968</option>
                                            <option value="10">1969</option>
                                            <option value="11">1970</option>
                                            <option value="12">1971</option>
                  </select>
               </legend>
        </fieldset>
</form>
</div>  
<br><br>
<div id="contenedor_2">
               <form id="formulario2" name="formulario2" method="post" action="data.php">
               <fieldset id="de_donde">
               <legend>¿De Donde eres?</legend>
                              Ciudad:     
                              <input type="text" name="nombre" id="nombre" value="John"><br><br>
                              Código Postal:
                              <input type="text" name="apellidos" id="apellidos" value="Wayne"><br><br>
                              Pais:
                  <select name="pais" id="pais">           
                                            <option value="0">Pais</option>
                                            <option value="1">Venezuela</option>
                                            <option value="2">Colombia</option>
                                            <option value="3">Peru</option>
                                            <option value="4">Chile</option>
                  </select>

               </form>
</div>  
<br><br>
<div id="contenedor_3">
               <form id="formulario3" name="formulario3" method="post" action="data.php">
               <fieldset id="condiciones_registro">
               <legend>COMO QUIERES INICIAR SESION</legend>
        Nombre:
         <input type="text" name="nombre" size="20"><br><br>
        Contraseña:      
         <input type="password" name="clave1" size="12"><br><br>
        Vuelve a escribir la Contraseña:      
         <input type="password" name="clave2" size="12"><br><br>
               </fieldset>
</form>
</div>  
<br><br>
<div id="contenedor_4">
               <form id="formulario1" name="formulario1" method="post" action="data.php">
               <fieldset id="condiciones_registro">
               <legend>CONDICIONES DE REGISTRO</legend>
                              <input type="radio" name="registro" value="1" checked="checked">Una vez al dia<br>
                              <input type="radio" name="registro" value="2">Una vez a la semana<br>
                              <input type="radio" name="registro" value="3">Una vez al mes<br>
               </fieldset>
               <br>
         <input type="submit" value="CREAR CUENTA">
  </form>
</div>  

</body>
</html>


0 comentarios:

Publicar un comentario