viernes, 7 de septiembre de 2012

Formularios

Los formularios permiten a los diseñadores de páginas web colocar elementos interactivos para poder recoger información, por ejemplo para un registro de datos, resolver un examen en línea, realizar una encuesta, entre otros.

En esta entrada estudiaremos la estructura que debe tener un formulario, los diferentes campos que podemos agregar y una buena parte de sus atributos.

Para comenzar veamos como se configura un formulario HTML:

<form action="-----" name="-----" id="-----" method="-----" target="-----" enctype="-----">

form - es el nombre de la etiqueta que indica el inicio del formulario
action="-----" - permite establecer la acción que se realizará luego de presionar el boton al final (de acción) al final del formulario, esta puede ser: enviar datos a correo, procesar con un script de PHP, procesar los datos en un archivo PHP diferente, entre otras opciones.
name="-----" - permite establecer el nombre del formulario
id="-----" - permite definir el identificador del formulario (usado posteriormente en el procesamiento de los datos.
method="----" - indica cómo se enviarán las respuestas, "POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "GET" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación.
target="----" - permite indicar el lugar donde se mostrarán los resultados o mensajes informátivos luego de enviar los datos, las opciones que podemos usar en este atributo son: _new, _parent, _self_ o bien el nombre de un marco flotante.
enctype="-----" - Un atributo opcional de la etiqueta <form> es enctype, que especifica cómo se codifican los datos del formulario, por lo general solo se utiliza cuando se cargan archivos al servidor y la instrucción se completaria de esta forma: enctype="multipart/form-data".

Entre las etiquetas <form> y </form>


La etiqueta <form> actúa como contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo action="url" de la etiqueta <form>, por el método indicado en el atributo method="----".
Se puede insertar cualquier elemento HTML en una etiqueta <form> (como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:
  • La etiqueta INPUT: Todos los botones y casillas de texto
  • La etiqueta TEXTAREA: una casilla de texto
  • La etiqueta SELECT: una lista de opciones múltiples
La etiqueta <input>

Esta estiqueta puede configurarse de diversas formas, a continuación daré algunos ejemplos y tambien ire mostrando los resultados.

1. <input type="text" name="nombre" size="40" maxlength="100" required />
2. <input type="password" name="password" size="10" maxlength="10" required />
3. <input type="mail" name="email" size="40" maxlength="100" required />
4. <input type="submit" value="Enviar" />
5. <input type="reset" value="Cancelar" />
6. <input type="file" name="subir_archivo" /> 

1. Nombre:
2. Password:
3. Correo Electrónico:
4.

5.

6. Subir un archivo:

Porsupuesto que no será este el resultado final, tansolo es un ejemplo de cada uno de los resultados que obtenemos al utilizar los atributos de la etiquetas <input>.

La etiqueta <textarea>



La etiqueta <textarea> se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta <input>. Esta etiqueta tiene los siguientes atributos:
  • cols: representa el número de caracteres que puede contener un línea
  • rows: representa el número de líneas
  • name: representa el nombre asociado con el cuadro de texto, que permite su identificación en el par nombre/valor.
  • readonly: impide que el usuario modifique el texto predeterminado en el campo
  • value: representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro de texto 
 <textarea rows="3" name="comentarios">
Escriba aquí sus comentarios
</textarea>



La etiqueta <select> </select>

La etiqueta <select> sirve para crear una lista desplegable de elementos (especificados por las etiquetas <option> dentro de ella). Los atributos de esta etiqueta son:
  • name:  representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor.
  • disabled: crea un lista desactivada, que aparece atenuada
  • size: representa el número de líneas de la lista (este valor puede ser más grande que el número de elementos reales de la lista).
  • multiple: Permite al usuario seleccionar varios campos de la lista
<select name="grado">
    <option value="primero">Primero</
option>
    <option value="segundo">Segundo</
option>
    <
option value="tercero">Tercero</option>
    <
option value="cuarto">Cuarto</option>
    <
option value="quinto">Quinto</option>
    <option value="sexto">Sexto</option>
</select >



Ahora les dejo un formulario completo para que lo prueben, lo que escriban en el llegará a mi correo electrónico.


jueves, 6 de septiembre de 2012

Uso de tablas en HTML

Ya no es común que se usen las tablas en el diseño de una página web, pero, no esta demás conocer esta herramienta que durante mucho tiempo se utilizó para la estructuración de documentos web.

Para comenzar les mostraré la estructura básica de las tablas y luego les daré una explicación de cada una de las partes que la conforman, para finalizar les daré un par de ejemplos sobre como y donde aplicarlas.

<table border="1" width="500" align="center">
        <tr>
                <th>Celda de encabezado 1</th>
                <th>Celda de encabezado 2</th>
        </tr>
        <tr>
                <td>Celda sencilla 1</td>
                <td>Celda sencilla 2</td>
        </tr>
</table>

El resultado es este:

Celda de encabezado 1 Celda de encabezado 2
Celda sencilla 1 Celda sencilla 2

Bien, es bastante sencillo de entender, la primera línea de código:

<table border="1" width="500" align="center">

aporta la configuración de la tabla y establece un borde con grosor de nivel 1 (como el que vemos en el ejemplo) un ancho de 500 y una alineación al centro.

Las etiquetas <tr> y </tr> indican el inicio y fin de una fila.

Las etiquetas <th> y </th> indican el inicio y el fin de una celda de encabezado ( note que las primeras dos celda tienen un texto en negrita y centrado).

Las etiquetas <td> y </td> indican el inicio y fin de una celda sencilla o común es decir sin ninguna configuración.

Tanto las etiquetas <tr> como las etiquetas <th> y <td> tienen atributos que permite que la tabla se vea de una forma diferente, podemos agregar color, estilo, alineación, altura, anchura, entre otros.  A continuación algunos de estos atributos para hacer que nuestra tabla se vea diferente:

bgcolor="#C60" - este atributo aporta color al elemento donde se aplique
height="100" - este atributo establece la altura del elemento donde se aplique, si se aplica en una fila todas las celdas de esa fila tendran la misma altura, si se aplica en una celda, tambien todas las celdas de la fila adoptarán la misma altura.
style="color:#CCC; font-size: 20px;" - el atributo estilo en si, es un atributo de estilo CSS y permite estableces muchos más atributos al elemento donde se aplique, si se aplica en <table> afectará al resto de los elementos, si se aplica en <tr> afectará las celdas de esta fila y si se aplica en <td> o <th> solo afectará a esa celda.
colspan="2" - este atributo permite extender el ancho de la celda según la necesidad lo requiera en este ejemplo se estableció en 2.
rowspan="2" - este atributo al igual que el anterior extiende la celda según el número que se establece, solamente que en este caso abarca el alto segun el número de filas como que se ha indicado.

Hay muchos más atributos que pueden configurarse como width, valign, background, entre otros, les motivo a consultar manuales de HTML en línea sobre este tema y profundizar en el mismo.  Por mi parte les dejo un par de ejemplos de donde y como pueden usarse las tablas.

Celda de encabezado 1 Celda de encabezado 2
Celda sencilla 1 Celda sencilla 2
Celda extendida a lo ancho con texto alineado a la derecha

En el siguiente ejemplo la tabla esta presente, pero sin borde y solamente se usa para estructurar el formulario.

Ejemplo de tablas para formulario
Nombre
Dirección
Email

  Y por útlimo una tabla que tambien incluye imagenes.

Ejemplo de tablas con imágenes

Uso de capas en HTML

Aunque ya no es muy frecuente que se hable específicamente de capas en el diseño HTML, quiero hacer mención de esta poderosa herramienta para el diseño web y empezare por mencionar que HTML solamente proporcionará la estructura, pero, la forma y el estilo lo aportará CSS.

Una capa puede ser algo tan sencillo como definir una división en la página web, por ejemplo: yo quiero una división en este blog con color corinto, fuente arial y tamaño 32px y color de texto blanco, como este:



Ejemplo de capa sencilla 

El código que use es este:

<div style="background: #990000; color: white; font-family: arial; font-size: 32px;">
    Ejemplo de capa sencilla

</div>

Pero si queremos algo más estructurado tenemos que esforzarnos un poco más.

Por ejemplo:


Encabezado
Contenido
Pie de página

El código que use para esto es el siguiente:


<style>
#contenedor {
   height: 500px;
   margin:auto;
   width:500px;
}

#encabezado {
   color:#FFF;
   font-size:32px;
   background: #990000;
   height:100px;
   line-height:100px;
   position:absolute;
   text-align:center;
   width:500px;
}

#nav{
   color:#FFF;
   font-size:18px;
   background: #F60;
   height:50px;
   line-height: 50px;
   margin-top:100px;
   position:absolute;
   text-align:center;
   width:500px;
}

#contenido{
color:#FFF;
font-size:18px;
background: #212121;
height:250px;
margin-top:150px;
position:absolute;
text-align:center;
width:500px;
}

#pie{
   color:#FFF;
   font-size:32px;
   background: #60F;
   height:100px;
   line-height:100px;
   margin-top: 400px;
   position:absolute;
   text-align:center;
   width:500px;
}

</style>





 Este código esta escrito en el mismo documento, específicamente entre las etiquetas <head> y </head>, para que funcione se utiliza la etiqueta <style> y se cierra con </style>.

La primera parte de este código (#contenedor) configura la primera capa y principal de nuestra página, la cual contendra el resto de las capas, se configuro con una altura de 500px (height: 500px;), una anchura de 500px (width: 500px;) y centrada (margin: auto).

La segunda parte corresponde #encabezado y se configuró de la siguiente manera:

color:#FFF; - color de texto blanco
font-size:32px; - tamaño de fuente 32px
background: #990000; - color de fondo corinto
height:100px; - altura 100px
line-height:100px; - espaciado interlineal 100px (esto practicamente centrará el texto de forma vertical)
position:absolute; - posición dentro de la capa contenedor absoluta (esto es porque va dentro de otra capa)
text-align:center; - alinación del texto al centro
width:500px; - anchura 500px


La tercera parte corresponde #nav y se configuró de forma similar a la anterior, la única variación que hay es en estos atributos:

font-size:18px; - se modificó el tamaño de fuente a 18px
background: #F60; - el color de fondo es anaranjado
height:50px; - la altura es de 50px
line-height: 50px; el espaciado interlineal es de 50px
margin-top:100px; - el margen superior indica el espacio que habrá desde el inicio de la capa contenedor hasta donde debe empezar la capa nav, en éste caso es de 100px.


Los cambios en la capa #contenido son:

background: #212121; - color de fondo negro (un poco mas suave)
height:250px; - altura 250px
margin-top:150px; - en este caso se incrementa el alto de la capa nav más el alto de la capa encabezado, dando como resultado 150px.


Y por último vemos la capa #pie que es similar en este caso a la capa encabezado, el único cambio que haremos será en el fondo, de esta manera:

background: #60F;

Este es el código HTML que configuramos.



<div id="contenedor">
     <div id="encabezado">
         Encabezado
    </div>
    <div id="nav">
         Navegación
    </div>
    <div id="contenido">
         Contenido
    </div>
    <div id="pie">
          Pie de página
    </div>
</div>


Este código debe ser escrito entre las etiquetas <body> y </body> y para colocar cada capa es necesario utilizar la etiqueta <div> de la siguiente forma:

<div id="nombre_de_la_capa"> Contenido de la capa </div>

Bueno espero que esto les ayude a comprender un poquito más el tema de las capas, para ver un ejemplo completo y mas efectos sobre las capas con CSS pueden ver la segunda y tercera entrada de este blog. 

Etiquetas HTML

En las entradas anteriores hemos visto de manera general como funciona el HTML con las hojas de estilos CSS, en ésta entrada estudiaremos un poco acerca de las etiquetas HTML y su función.  

Como habrán notada en las entradas anteriores la parte del diseño que corresponde a HTML forma la estructura que tendrá nuestra página web y la parte del diseño que corresponde a CSS forma la presentación, estilo, color, tamaños, fuentes, entre otros que veremos en nuestra página web.

¿Qué es una etiqueta html?

Bien empecemos recordando que el HTML es un lenguaje de marcas, por lo tanto una etiqueta es una marca y deben ser vistos como fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje.

Las etiquetas son la base principal de HTML, donde la página web sera un documento de texto con marcas que definirán la forma de su presentación.

¿Cómo se identifican las etiquetas HTML?

Las etiquetas HTML se identifican facilmente ya que siempre se escriben entre los signos menor que (<) y mayor que (>), y en su mayoría se usa una para indicar el inicio de la marca y otra para el final. 

Por ejemplo: <b>Texto afecto con negrita</b> en éste caso la etique de inicio será <b> y la de cierre será </b> y el texto que está entre estas dos etiquetas será afectado con negrita.

No todas las etiquetas se cierran de la misma forma, existe un número considerable de ellas que solamente usan /> al final para indicar el cierre, por ejemplo: <img ...atributos.../>, existen otras que vamos a ir definiendo en el transcurso del curso.

Atributos de las etiquetas

Los atributos permitirán definir diferentes posibilidades de la instrucción HTML.  Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que asignemos y estos separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que asignamos al atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario.

Ejemplos:


<img src="ubicacion/imagen.jpg" width="100" height="100" />

img es el nombre de la etiqueta para insertar imagenes en el documento
src es el atributo para indicar la ubicación y el nombre de la imagen que insertaremos en el documento
width es el atributo que indica el ancho que tendrá la imagen insertada
height es el atributo que indica el alto que tendrá la imagen insertada


<div id="nombre_capa" align="center">

div es el nombre de la etiqueta que hará una división en nuestro documento web
id es el atributo que indica el identificador css de esa división (nosotros le llamaremos capa)
align es el atributo que hará posible que se alinie según el valor indicado

Algunas etiquetas importantes que debemos recordar.

<html> </html>

Indican al navegador que todo lo que se encuentra entre ellas debe ser interpretado como código HTML, por lo tanto deben usarse al principio y al final del documento web.

<head> </head>

Esta etiqueta se utiliza para configurar la cabecerá del documento web, en ella se configurará el título del documento web, la descripción del sitio, los datos del autor, juego de símbolos del lenguaje a utilizar, escripts (css, js, entre otros) y más.

<body> </body>

Entre estas dos marcas incluiremos los que queremos que forme parte del cuerpo de la página web, aquí se incluiran la mayoría de las etiquetas que conoceremos.

<title> </title>

Se usa para indicar el título de la página web se debe escibir entre <head> y </head>

<link />

Esta es importante ya que permitirá relacionar nuestro documento HTML con una hoja de estilos css o bien con una hoja de scripts de javascript, aquí les dejo un ejemplo de como usarla.


<link rel="stylesheet" href="css/estilos.css" type="text/css" />

link es la etiqueta de relación de archivos
rel establece el tipo de relación en este caso una hoja de estilos
href indica la ubicación y el nombre del archivo relacionado, en este caso la ubicación es la carpeta css y el nombre del archivo es estilos.css
type indica cual es el tipo de archivo que usaremos en este caso es un archivo de texto, pero con configuración css.

<meta charset="utf-8" />

Este meta sirve para que nuestra página web no experimente problemas con las tíldes y eñes debemos configurar esta etiqueta con la códificación utf-8 que es una de las más conocidas y que incluye esos caracteres que siempre dan problemas en el diseño web (á, é, í, ó, ú, ñ, Ñ bien aunque no es del todo infalible).

UTF-8 (8-bit Unicode Transformation Format) es un formato de codificación de caracteres Unicode e ISO 10646 utilizando símbolos de longitud variable. UTF-8 fue creado por Robert C. Pike y Kenneth L. Thompson. Está definido como estándar por la RFC 3629 de la Internet Engineering Task Force (IETF). Actualmente es una de las tres posibilidades de codificación reconocidas por Unicode y lenguajes web, o cuatro en ISO 10646. Más información.


Meta tag “Keywords”

Este meta indica al buscador las palabras claves de nuestra página. Por ejemplo, nuestra página al ser un tutorial de html, sus palabras clave serán “tutorial” , “html”,
“css”, “iptce” y “colegio”. Los keywords deben ir separados por comas y sin espacios entre ellos. 
 
<meta name="Keywords" content="tutorial, html, css, iptce, colegio" />

Meta tag “Description”

Este meta es también destinado para los buscadores. En la “description” escribiremos la descripción de la página, de sus contenidos. Esto lo haremos a través de frases cortas y separadas entre ellas por puntos. En nuestra página este meta quedaría de la siguiente manera:

<meta name="Description" content="Curso de html. Etiquetas" />

Meta tag “language”

Este meta tag le indica al buscador el idioma en el que está escrita la página. En el caso de español en content se pone “es”, en inglés “en”, en francés “fr”… Nuestra página es española así que su meta será el siguiente:


<meta http-equiv="Content-Language" content="es"/>

Meta tag “Distribution”

Este meta es importante. Marac la distribución que queremos que se haga de nuestra web en Internet. Si queremos que se distribuya por todo el mundo en “content” indicaremos “global”. Escribir este meta en global es lo más recomendable. Así pues nuestra página incluirá…


<meta name="distribution" content="global"/>

Etiquetas que van incluidas en <body> </body>

Para comenzar con esta sección debo aclarar que son muchas las etiquetas que pueden incluirse en ésta sección y que haré mención de algunas de ellas, y para hacerlo más dinámico mostraré el ejemplo y el resultado.


<h1>Texto afectado</h1>

Texto afectado

De estas etiquetas contamos con seis, mostraré un ejemplo más con la etiqueta <h6> </h6>

<h6>Texto afectado</h6>
Texto afectado
<b>Texto afectado</b>
Texto afectado

<i>Texto afectado</i>
Texto afectado

<a href="http://www.google.com" target="_new">ir a google</a>
ir a google



Existen como mencione al principio de ésta sección muchas más que las iremos conociendo en el transcurso de este blog.