Entradas populares

martes, 3 de diciembre de 2013

Filtros Gmail

Uso de filtros

Los filtros de Gmail te permiten administrar el flujo de mensajes entrantes. Con los filtros puedes etiquetar, archivar, suprimir, destacar y reenviar tu correo electrónico de forma automática, además de mantener a raya el spam.

Para crear un filtro:

Abre Gmail.
Haz clic en la flecha hacia abajo del cuadro de búsqueda. En la ventana que se abre, especifica los criterios de tu búsqueda.
Gmail Search Box

Introduce los criterios de búsqueda. Si quieres comprobar que la búsqueda dé los resultados esperados, haz clic en el botón de búsqueda

Haz clic en Crear un filtro con estos criterios de búsqueda al final de la ventana de búsqueda. Si necesitas verificar los resultados de la búsqueda, puedes hacer clic en x para ocultar las opciones del filtro. Si vuelves a hacer clic en la flecha hacia abajo, se mostrará de nuevo la ventana con los mismos criterios de búsqueda que has especificado.
Elige las acciones que quieres que realice el filtro

Cómo modificar o eliminar filtros

Abre Gmail.
Haz clic en el icono de la rueda dentada (arriba a la derecha).

Selecciona Configuración.
Haz clic en la pestaña Filtros.
Localiza el filtro que quieras modificar y haz clic en editar o en suprimir para eliminarlo.
Para modificar el filtro, especifica los nuevos criterios en los campos correspondientes y haz clic en Continuar.
Modifica las acciones que quieras y haz clic en el botón Actualizar filtro.
Puedes crear todos los filtros que te hagan falta, pero solo 20 de ellos pueden reenviar mensajes a otras direcciones. Para optimizar el reenvío con filtros, combina los filtros que reenvíen mensajes a la misma dirección.
Cómo exportar o importar filtros

Si eres un experto en filtros y cuentas con un excelente sistema de filtros que quieres utilizar en otra cuenta o compartir con un amigo, puedes exportar e importar filtros.

Abre Gmail.
Haz clic en el icono de la rueda dentada (arriba a la derecha).

Selecciona Configuración.
Haz clic en la pestaña Filtros.
Para exportar un filtro, marca la casilla situada junto al filtro y haz clic en el botón Exportar en la parte inferior de la página. Al hacerlo, obtendrás un archivo .xml que puedes editar en un editor de texto.

Para importar un filtro, haz clic en el enlace Importar filtros de la parte inferior de la página. Elige el archivo cuyo filtro quieras importar y haz clic en el botón Abrir archivo. Haz clic en Crear filtros para finalizar la importación del filtro.

lunes, 2 de diciembre de 2013

Formularios HTML

HTML Formularios y entrada


Formularios HTML se utilizan para seleccionar los diferentes tipos de entrada del usuario.

Ejemplos

Pruébelo usted mismo - Ejemplos

Crear campos de texto
¿Cómo crear campos de texto. El usuario puede escribir texto en un campo de texto.
Crear campo de contraseña
Cómo crear un campo de contraseña.
(Puede encontrar más ejemplos en la parte inferior de esta página)

Formularios HTML

Formularios HTML se utilizan para pasar datos a un servidor.
Un formulario HTML puede contener elementos de entrada como campos de texto, casillas de verificación, botones de radio-, presentar los botones y más. Un formulario puede contener listas de selección, textarea, fieldset, legend, y elementos de la etiqueta.
La etiqueta <form> se utiliza para crear un formulario HTML:
<form>
.
input elements
.
</form>


Formularios HTML - el elemento de entrada

El elemento de forma más importante es el elemento <input>.
El elemento <input> se utiliza para seleccionar la información del usuario.
Un elemento <input> puede variar de muchas maneras, dependiendo del tipo de atributo. Un elemento <input> puede ser de tipo campo de texto, casilla de verificación, botón de contraseña, radio, botón de enviar, y más.
A continuación se describen los tipos de entrada más comunes.

Los campos de texto

type="text"> <input define un campo de entrada de una línea que un usuario puede introducir texto en:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Como el código HTML anterior se ve en un navegador:
Nombre: 
Apellido: 
Nota: La forma en sí misma no es visible. También tenga en cuenta que el ancho predeterminado de un campo de texto es de 20 caracteres. 

Campo de contraseña

type="password"> <input define un campo de contraseña:
<form>
Password: <input type="password" name="pwd">
</form>
Como el código HTML anterior se ve en un navegador:
Contraseña: 
Nota: Los caracteres en un campo de contraseña se enmascaran (mostrado como asteriscos o círculos).

Botones de radio

type="radio"> <input define un botón de radio. Los botones de radio permiten al usuario seleccionar sólo una de un número limitado de opciones:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Como el código HTML anterior se ve en un navegador:
Masculino
Femenino

Las casillas de verificación

type="checkbox"> <input define una casilla de verificación. Las casillas de verificación permiten al usuario seleccionar cero o más opciones de un número limitado de opciones.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Como el código HTML anterior se ve en un navegador:
Tengo una bicicleta
Tengo un coche

Enviar Button

type="submit"> <input define un botón de envío.
Un botón de enviar se utiliza para enviar datos del formulario a un servidor. Los datos se envían a la página especificada en el atributo action del formulario. El archivo se define en el atributo de acción por lo general hace algo con las aportaciones recibidas:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Como el código HTML anterior se ve en un navegador:
Nombre de usuario: 
Si escribe algunos caracteres en el campo de texto y haga clic en el botón "Enviar", el navegador enviará sus comentarios a una página llamada "html_form_action.asp". La página le mostrará las aportaciones recibidas.

Ejemplos

Más ejemplos

Los botones de radio
Cómo crear botones de opción.
Las casillas de verificación
Cómo crear casillas de verificación. Un usuario puede seleccionar o cancelar la selección de una casilla de verificación.
Simple lista desplegable
¿Cómo crear una lista desplegable simple.
Lista desplegable con un valor pre-seleccionada
Cómo crear una lista desplegable con un valor pre-seleccionado.
Área de texto
¿Cómo crear un control de entrada de texto de varias líneas. En un texto de la zona el usuario puede escribir un número ilimitado de caracteres.
Crear un botón
¿Cómo crear un botón.
Ejemplos

Ejemplos de formularios

Fieldset alrededor form-data
Cómo crear un borde alrededor de los elementos de un formulario.
Formulario con campos de texto y un botón de envío
Cómo crear un formulario con dos campos de texto y un botón de envío.
Formulario con casillas de verificación
Cómo crear un formulario con dos casillas de verificación y un botón de envío.
Formar con los botones de opción
Cómo crear un formulario con dos botones de radio, y un botón de envío.
Enviar e-mail de un formulario
Cómo enviar correo electrónico desde un formulario.

Formularios HTML Etiquetas

Nuevo : Nuevas etiquetas en HTML5.
TagDescription
<form>Defines an HTML form for user input
<input>Defines an input control
<textarea>Defines a multiline input control (text area)
<label>Defines a label for an <input> element
<fieldset>Groups related elements in a form
<legend>Defines a caption for a <fieldset> element
<select>Defines a drop-down list
<optgroup>Defines a group of related options in a drop-down list
<option>Defines an option in a drop-down list
<button>Defines a clickable button
<datalist>NewSpecifies a list of pre-defined options for input controls
<keygen>NewDefines a key-pair generator field (for forms)
<output>NewDefines the result of a calculation

Listas HTML

Listas


Las listas HTML más comunes están ordenadas y listas desordenadas:

Listas HTML

An ordered list:

  1. The first list item
  2. The second list item
  3. The third list item

An unordered list:

  • List item
  • List item
  • List item

Ejemplos

Try-It-Yourself Ejemplos

Lista desordenada
Cómo crear una lista desordenada en un documento HTML.
Lista ordenada
Cómo crear una lista ordenada en un documento HTML.
(Puede encontrar más ejemplos en la parte inferior de esta página).

HTML Listas no ordenadas

Una lista sin orden comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista están marcados con balas (normalmente pequeños círculos negros).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Como el código HTML anterior se ve en un navegador:
  • Café
  • Leche

HTML listas ordenadas

Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista están marcados con los números.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Como el código HTML anterior se ve en un navegador:
  1. Café
  2. Leche

HTML Descripción Listas

Una lista de descripción es una lista de términos / nombres, con una descripción de cada término / nombre.
La etiqueta <dl> define una lista de descripciones.
La etiqueta <dl> se utiliza en conjunción con <dt> (define términos / nombres) y <dd> (describe cada término / nombre):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Como el código HTML anterior se ve en un navegador:
Café
- Bebida caliente negro
Leche
- Bebida fría blanca

Notas básicas - Consejos útiles

Consejo: En el interior de un elemento de la lista puede colocar texto, saltos de línea, imágenes, enlaces, otras listas, etc

Ejemplos

Más ejemplos

Los diferentes tipos de listas ordenadas
Demuestra diferentes tipos de listas ordenadas.
Los diferentes tipos de listas desordenadas
Demuestra diferentes tipos de listas desordenadas.
Lista anidada
muestra cómo se puede anidar listas.
Lista anidada 2
Muestra una lista anidada más complicado.
Descripción Lista
Muestra una lista de definiciones.

HTML Lista de Etiquetas

TagDescription
<ol>Defines an ordered list
<ul>Defines an unordered list
<li>Defines a list item
<dl>Defines a description list
<dt>Defines a term/name in a description list
<dd>Defines a description of a term/name in a description list

Tablas HTML

HTML Tablas


HTML Ejemplo de tabla:

NombreApellidoPuntos
JillHerrero50
EvaJackson94
JuanConeja80
AdánJohnson67


Ejemplos

Pruébelo usted mismo - Ejemplos

Tablas
cómo crear tablas en un documento HTML.
(Puede encontrar más ejemplos en la parte inferior de esta página).

Tablas HTML

Las tablas se definen con la etiqueta <table>.
Una tabla se divide en filas (con la etiqueta <tr>), y cada fila se divide en celdas de datos (con la etiqueta <td>). TD es sinónimo de "datos de la tabla," y sostiene el contenido de una celda de datos. Una etiqueta <td> puede contener texto, enlaces, imágenes, listas, formularios, otras tablas, etc

Ejemplo de tabla

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Como el código HTML anterior se ve en un navegador:
fila 1, celda 1fila 1, celda 2
fila 2, celda 1fila 2, celda 2


Tablas HTML y el atributo border

Si no se especifica un atributo border, la tabla se mostrará sin fronteras. A veces esto puede ser útil, pero la mayoría del tiempo, queremos que los márgenes para mostrar.
Para mostrar una tabla con bordes, especifique el atributo border:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>


Tabla HTML Encabezados

La información de cabecera en una tabla se definen con la etiqueta <th>.
Todos los principales navegadores muestran el texto en el elemento <th> como negrita y centrado.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Como el código HTML anterior se ve en su navegador:
Encabezado 1Header 2
fila 1, celda 1fila 1, celda 2
fila 2, celda 1fila 2, celda 2


Ejemplos

Más ejemplos

Tablas sin fronteras
Cómo crear tablas sin fronteras.
Cabeceras de la tabla
Cómo crear encabezados de tabla.
Tabla con un subtítulo
Cómo agregar un título a una tabla.
Las celdas de tabla que abarcan más de una fila / columna
¿Cómo definir las celdas de tabla que abarcan más de una fila o una columna.
Etiquetas dentro de una tabla
Cómo visualizar elementos dentro de otros elementos.
Relleno de la celda
Modo de empleo cellpadding para crear más espacio en blanco entre el contenido de la celda y de sus fronteras.
Celular espaciamiento
Cómo utilizar cellspacing para aumentar la distancia entre las células.

Tabla HTML Etiquetas

TagDescription
<table>Defines a table
<th>Defines a header cell in a table
<tr>Defines a row in a table
<td>Defines a cell in a table
<caption>Defines a table caption
<colgroup>Specifies a group of one or more columns in a table for formatting
<col>Specifies column properties for each column within a <colgroup> element
<thead>Groups the header content in a table
<tbody>Groups the body content in a table
<tfoot>Groups the footer content in a table

Imagenes HTML

HTML Imágenes - El Tag <img> y el atributo Src

En HTML, las imágenes se definen con la etiqueta <img>.
La etiqueta <img> está vacío, lo que significa que contiene atributos solamente, y no tiene etiqueta de cierre.
Para mostrar una imagen en una página, es necesario utilizar el atributo src. Src significa "fuente". El valor del atributo src es la dirección URL de la imagen que desea mostrar.
Sintaxis para la definición de una imagen:
<img src="url" alt="some_text">
La dirección URL apunta a la ubicación donde se almacena la imagen. Una imagen denominada "boat.gif", ubicado en el directorio "imágenes" en "www.w3schools.com" tiene la URL: http://www.w3schools.com/images/boat.gif.
El navegador muestra la imagen en la que se produce la etiqueta <img> en el documento. Si pones una etiqueta de imagen entre dos párrafos, el navegador muestra el primer párrafo, a continuación, la imagen, y luego el segundo párrafo.

HTML Imágenes - El Alt Atributo

El atributo alt requerida especifica un texto alternativo para una imagen, si la imagen no se puede visualizar.
El valor del atributo alt es un texto definido por el autor:
<img src="smiley.gif" alt="Smiley face">
El atributo alt proporciona información alternativa para una imagen si un usuario por alguna razón no puede verlo (a causa de conexión lenta, un error en el atributo src, o si el usuario utiliza un lector de pantalla).

HTML Imágenes - Altura Establecer y ancho de una imagen

Los atributos de altura y anchura se utilizan para especificar la altura y la anchura de una imagen.
Los valores de los atributos se especifican en píxeles por defecto:
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
Consejo: Es una buena práctica para especificar la altura y anchura de los atributos de una imagen. Si se establecen estos atributos, el espacio requerido para la imagen está reservado cuando se carga la página. Sin embargo, sin estos atributos, el navegador no sabe el tamaño de la imagen. El efecto será que el diseño de la página va a cambiar durante la carga (mientras que las imágenes se cargan).

Notas básicas - Consejos útiles

Nota: Si un archivo HTML contiene imágenes diez - se requieren archivos de once para mostrar la página de la derecha.Cargando imágenes toma tiempo, así que mi mejor consejo es: Usar imágenes cuidadosamente.
Nota: Cuando se carga una página web, es el navegador, en ese momento, que en realidad se pone la imagen de un servidor web y lo inserta en la página. Por lo tanto, asegúrese de que las imágenes realmente se quedan en el mismo lugar en relación con la página web, de lo contrario sus visitantes tendrán un icono de enlace roto. El icono de enlace roto se muestra si el navegador no puede encontrar la imagen.

Ejemplos

Más ejemplos

Deje un flotador de la imagen a la izquierda ya la derecha
¿Cómo dejar que un flotador de la imagen a la izquierda oa la derecha de un párrafo.
Hacer un hipervínculo de una imagen
¿Cómo usar una imagen como un enlace.
Crear un mapa de imagen
¿Cómo crear un mapa de imagen, con regiones seleccionables. Cada región es un hipervínculo.

HTML etiquetas de imagen

TagDescription
<img>Defines an image
<map>Defines an image-map
<area>Defines a clickable area inside an image-map

Estilos HTML

Styles - CSS


CSS (Cascading Style Sheets) se utiliza para los elementos HTML de estilo.

¡Mira! Estilos y colores

Manipular texto
Los colores, las Cajas
y mucho más ...

Ejemplos

Pruébelo usted mismo - Ejemplos

Utilización de estilos en HTML
Cómo añadir información de estilo dentro de la sección <head>.
Enlace que no está subrayado
Cómo hacer un vínculo que no está subrayado, con el atributo de estilo.
Vinculación a una hoja de estilos externa
Cómo utilizar la etiqueta <link> vincular a una hoja de estilos externa.

Aplicar estilos a HTML con CSS

CSS se introdujo junto con HTML 4, para proporcionar una mejor manera de estilizar elementos HTML.
CSS se puede añadir a HTML de las siguientes maneras:
  • Inline - utilizando el estilo de atributo en los elementos HTML
  • Interno - utilizando el <style> elemento en la sección <head>
  • Externo - usando una CSS externa de archivos
La mejor forma de añadir CSS a HTML, es poner la sintaxis CSS en archivos CSS separados.
Sin embargo, en este tutorial HTML vamos a presentarles a CSS mediante el atributo de estilo. Esto se hace para simplificar los ejemplos. También hace que sea más fácil para que se modifique el código y probarlo usted mismo.
Usted puede aprender todo sobre CSS en nuestro Tutorial CSS .

Estilos en línea

Un estilo en línea se puede utilizar si un estilo único se va a aplicar a una sola ocurrencia de un elemento.
Para utilizar los estilos en línea, utilice el atributo de estilo en la etiqueta correspondiente. El atributo style puede contener cualquier propiedad CSS. El siguiente ejemplo muestra cómo cambiar el color del texto y el margen izquierdo de un párrafo:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
Para obtener más información sobre las hojas de estilo, visite nuestro tutorial CSS .

HTML Style Ejemplo - Color de fondo

La propiedad background-color define el color de fondo de un elemento:

Ejemplo

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

Pruebe usted mismo »
La propiedad background-color hace que el "viejo" bgcolor atributo obsoleto.

Estilo HTML Ejemplo - fuente, color y tamaño

La familia de la fuente, el color y las propiedades font-size define el tipo de letra, color y tamaño del texto de un elemento:

Ejemplo

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

Pruebe usted mismo »
Las fuentes de la familia, el color y las propiedades font-size hacen la vieja etiqueta <font> obsoleto.

HTML Style Ejemplo - Alineación de texto

La propiedad text-align especifica la alineación horizontal del texto en un elemento:

Ejemplo

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Pruebe usted mismo »
La propiedad text-align hace la vieja etiqueta <center> obsoleto.

Hoja de estilo interna

Una hoja de estilo interna se puede utilizar si un solo documento tiene un estilo único. Estilos internos se definen en la sección <head> de una página HTML, utilizando la etiqueta <style>, así:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>


Hoja de estilos externa

Una hoja de estilos externa es ideal cuando se aplica el estilo a muchas páginas. Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un solo archivo. Cada página debe enlazar con la hoja de estilo con la etiqueta <link>. La etiqueta <link> va dentro de la sección <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


Estilo HTML Etiquetas

TagDescription
<style>Defines style information for a document
<link>Defines the relationship between a document and an external resource


Tags y atributos desaprobados

En HTML 4, varias etiquetas y atributos fueron utilizados para los documentos de estilo. Estas etiquetas no son compatibles con las nuevas versiones de HTML.
Evite el uso de los elementos: <font>, <center> y <strike> y los atributos: color y bgcolor.

Cabecera HTML

HTML <head>


Ejemplos

Pruébelo usted mismo - Ejemplos

<title> - Definir el título de un documento HTML
Utilice la etiqueta <title> para definir el título de un documento.
<base> - URL predeterminado y objetivo para todos los enlaces
Utilice la etiqueta <base> especificar un URL predeterminado y un destino predeterminado para todos los enlaces de una página.
<meta> - Proporcionar metadatos para un documento HTML
elementos Use <meta> para especificar una descripción, palabras clave, autor, y el conjunto de caracteres de un documento.

El elemento HTML <head>

El elemento <head> es un contenedor para todos los elementos de cabeza. Elementos dentro <head> pueden incluir secuencias de comandos, indique al navegador dónde encontrar las hojas de estilo, proporcionar información de la meta, y más.
Las siguientes etiquetas se pueden añadir a la sección de la cabeza: <title>, <style>, <meta>, <link>, <script>, <noscript> y <base>.

El elemento HTML <title>

La etiqueta <title> define el título del documento.
Se requiere el elemento <title> en todos los documentos HTML / XHTML.
El elemento <title>:
  • define un título en la barra de herramientas del navegador
  • proporciona un título para la página cuando se añade a favoritos
  • muestra el título de la página en los resultados del motor de búsqueda
Un documento HTML simplificada:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>


El elemento HTML <base>

La etiqueta <base> especifica la base URL / target para todas las URLs relativas en una página:
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>


El elemento HTML <link>

La etiqueta <link> define la relación entre un documento y un recurso externo.
La etiqueta <link> más se utiliza para vincular a las hojas de estilo:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


El elemento HTML <style>

La etiqueta <style> se utiliza para definir la información de estilo para un documento HTML.
Dentro del elemento <style> especificar cómo los elementos HTML deben representar en un explorador:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>


El elemento HTML <meta>

Los metadatos son datos (información) sobre los datos.
La etiqueta <meta> proporciona metadatos sobre el documento HTML. Los metadatos no se mostrará en la página, pero será legible por la máquina.
Meta elementos se utilizan normalmente para especificar la página de descripción, palabras clave, autor del documento, modificada por última vez, y otros metadatos.
Los metadatos pueden ser utilizados por los navegadores (como mostrar contenido o recarga de la página), los motores de búsqueda (palabras clave), u otros servicios web.
etiquetas <meta> siempre van en el interior del elemento <head>.

<meta> Etiquetas - Ejemplos de Uso

Definir palabras clave para los motores de búsqueda:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Definir una descripción de su página web:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Definir el autor de una página:
<meta name="author" content="Hege Refsnes">
Actualizar el documento cada 30 segundos:
<meta http-equiv="refresh" content="30">


El elemento HTML <script>

La etiqueta <script> se utiliza para definir un script del lado del cliente, tales como JavaScript.
El elemento <script> será explicado en un capítulo posterior.

Elementos de cabeza HTML

TagDescription
<head>Defines information about the document
<title>Defines the title of a document
<base>Defines a default address or a default target for all links on a page
<link>Defines the relationship between a document and an external resource
<meta>Defines metadata about an HTML document
<script>Defines a client-side script
<style>Defines style information for a document