Formularios: para enviar archivos, atributo 'file'

Es para el típico botón Examinar que aparece en algunas webs, desde el cual se abre una ventana del explorador de archivos con la que buscar un archivo que queremos enviar a una web.

Para que se aplique correctamente, en la etiqueta <form> hay que incluir el atributo y el valor 'enctype="multipart/form-data"':

<form enctype="multipart/form-data" method="post" action="http://..../validar.php">
<input type="file" name="fichero" />
</form>

Formularios: conjunto de campos, etiqueta 'fieldset' y 'legend'

Se usan dentro de un formulario para agrupar campos de entrada de datos relacionados, entre las etiquetas '<fieldset>' y '</fieldset>' se definen los campos de entrada. Justo después de la etiqueta de apertura '<fieldset>' y usa la etiqueta '<legend>Texto que identifica el 'fieldset'</legend>' para identificar los datos del 'fieldset'.

Posteriormente, seguiremos usando la etiqueta <label> para identificar cada uno de los campos de entrada:

<form method="post" action="http://..../validar.php">
<fieldset>
<legend>Datos personales</legend>
<label for="v-nombre">Nombre: </label>
<input type="text" name="v-nombre" /><br />

<label for="v-apellidos">Apellidos: </label>
<input type="text" name="v-apellidos" /><br />

<label for="v-email">Email: </label>
<input type="text" name="v-email" /><br />

<label for="pass">Contraseña: </label>
<input type="password" name="pass" /><br />
</fieldset><br />
<input type="submit" name="enviar" value="Enviar" /> <input type="reset" name="borrar" value="Borrar todo" /><br />
</form>

Y los campos de entrada dentro del 'fieldset' se mostrarán como se puede ver a continuación:

Datos personales

Nombre:
Apellidos:
Email:
Contraseña:

Se pueden poner varios 'fieldset' dentro de un mismo formulario para así ir agrupando dentro de cada uno campos de entrada del mismo tipo: datos personales, aficiones, etc

Otro ejemplo con varios 'fieldset':

Mantenimiento de clientes

Datos identificativos

Nombre:

Apellidos:

Dirección:

Ciudad:

Datos bancarios

Banco:

Agencia:

Cuenta:

Tipo de pago

Contado

Crédito

Forma de pago

30 días

60 días

90 días

Formularios: área de texto 'textarea'

Se usa para definir un área de texto dentro de un formulario, la etiqueta para definir un campo de texto es '<textarea>Texto de ejemplo</textarea>', y su uso es como se muestra a continuación:

<form method="post" action="http://..../validar.php">
<textarea name="nombre_variable" >Texto de ejemplo</textarea>
</form>

Y se mostrará lo siguiente:

Texto de ejemplo

Algunos atributos para <textarea>:

• 'cols="numero-de-columnas"': se usa para especificar el número de columnas que queremos que tenga el área de texto.
  <form method="post" action="http://..../validar.php">
  <textarea name="nombre_variable" cols="50">Texto de ejemplo</textarea>
  </form>

  Y se mostrará lo siguiente:

  Texto de ejemplo
• 'rows="numero-de-filas"': para especificar el número de filas del área de texto.
  <form method="post" action="http://..../validar.php">
  <textarea name="nombre_variable" rows="5" cols="15">Texto de ejemplo</textarea>
  </form>

  Y se mostrará lo siguiente:

  Texto de ejemplo
• 'readonly="readonly"': este atributo se usa para mostrar texto, y el usuario del sitio web no puede modificarlo.
  <form method="post" action="http://..../validar.php">
  <textarea name="nombre_variable" readonly="readonly" rows="5" cols="15">Texto de ejemplo: campo de solo lectura</textarea>
  </form>

  Y se mostrará lo siguiente:

  Texto de ejemplo: campo de solo lectura

Formularios: Campos de selección, etiquetas 'select' y 'option', atributos 'selected' y 'multiple'

Los campos de selección son los típicos campos de un formulario en los que hay que escoger opciones de las que aparecen en una lista desplegable:

• Etiqueta '<select name="nombre-variable" >': es para abrir un campo de selección. Dentro de este campo de selección irá una etiqueta <option value="valor-de-variable" >texto de la opción a elegir</option> para cada uno de las opciones del 'select', y después se cierra la etiqueta '</select>'. Al igual que los otros campos de formulario vistos, el campo 'select' debe ir entre las etiquetas de apertura y cierre de formulario 'form':

  Aquí se puede usar el atributo selected="selected" para elegir una opción por defecto, del mismo modo que se hacia antes con checked="checked" en los campos del tipo 'checkbox' y 'radio'.

  <form method="post" action="http://..../validar.php">
  <label for="pais">Selecciona tu país </label>
  <select name="pais">
  <option value="Italia">Italia</option>
  <option value="Alemania">Alemania</option>
  <option value="Portugal">Portugal</option>
  <option selected="selected" value="España">España</option>
  </select>
  </form>

  Y el código anterior aparecerá así:

  Selecciona tu país Italia Alemania Portugal España

  En este campo también es típico poner una opción vacía, y en este caso no se usa el atributo 'selected':

  <form method="post" action="http://..../validar.php">
  <label for="pais">Selecciona tu país </label>
  <select name="pais">
  <option value=""></option>
  <option value="Italia">Italia</option>
  <option value="Alemania">Alemania</option>
  <option value="Portugal">Portugal</option>
  <option selected="selected" value="España">España</option>
  </select>
  </form>

  Y el código:

  Selecciona tu país Italia Alemania Portugal España
• Atributo 'multiple="multiple"' para la etiqueta '<select ... >': con este atributo, manteniendo pulsada la tecla Ctrl (CONTROL) del teclado, se pueden seleccionar más de una opción:
  Aquí se puede usar el atributo selected="selected" para elegir más de una opción por defecto.
  <form method="post" action="http://..../validar.php">
  <label for="pais">Selecciona países en los que has estado </label>
  <select name="pais" multiple="multiple" >
  <option value="Italia">Italia</option>
  <option value="Alemania">Alemania</option>
  <option value="Portugal">Portugal</option>
  <option selected="selected" value="España">España</option>
  <option value="México">México</option>
  <option value="India">India</option>
  <option value="China">China</option>
  <option selected="selected" value="Japón">Japón</option>
  <option value="Argentina">Argentina</option>
  </select>
  </form>

  Ahora se puede seleccionar más de una opción -manteniendo pulsada la tecla CONTROL (Ctrl) del teclado- y el código aparecerá así:

  Selecciona países en los que has estado Italia Alemania Portugal España México
  India
  China
  Japón
  Argentina
  

Formularios: 'checkbox', 'radio', 'hidden', 'submit', 'button', 'reset'

En esta entrada del blog seguimos con los campos de entrada de formularios en los que el usuario puede escoger entre una o varias opciones:

• type="checkbox": es para crear casillas de activación, de las que se pueden escoger, en principio, de ninguna a varias opciones:
  <form method="post" action="http://..../validar.php">
  Escoge los equipos que te gustan:<br />
  <input type="checkbox" name="f-madrid" value="f-madrid" />R Madrid<br />
  <input type="checkbox" name="f-barcelona" value="f-barcelona" />FC Barcelona<br />
  <input type="checkbox" name="f-bilbao" value="f-bilbao" />ATH Bilbao<br />
  </form>

  Y el código se mostrará así:

  Escoge los equipos que te gustan:
  R Madrid
  FC Barcelona
  ATH Bilbao
  
  • El atributo: 'checked="checked"' se emplea para marcar algunas de las opciones por defecto, el usuario puede desmarcar cualquiera de esas opciones y/o marcar otras:
    <form method="post" action="http://..../validar.php">
    Escoge los equipos que te gustan:<br />
    <input type="checkbox" name="f-madrid" value="f-madrid" checked="checked" />R Madrid<br />
    <input type="checkbox" name="f-barcelona" value="f-barcelona" />FC Barcelona<br />
    <input type="checkbox" name="f-bilbao" value="f-bilbao" checked="checked" />ATH Bilbao<br />
    </form>

    Y el código se mostrará así:

    Escoge los equipos que te gustan:
    R Madrid
    FC Barcelona
    ATH Bilbao
    
• type="radio": casillas de activación discriminatorias, el código se mostrará así:
  Aquí también se puede usar el atributo checked="checked", pero solo en una de las opciones.
  <form method="post" action="http://..../validar.php">
  Escoge los equipos que te gustan:<br />
  <input type="radio" name="equipo" value="madrid" />R Madrid<br />
  <input type="radio" name="equipo" value="barcelona" />FC Barcelona<br />
  <input type="radio" name="equipo" value="bilbao" checked="checked"/>ATH Bilbao<br />
  </form>

  Y se mostrará así:

  Escoge los equipos que te gustan:
  R Madrid
  FC Barcelona
  ATH Vilbao
  
• type="hidden": campos ocultos, para enviar datos de control, guardar información que el usuario rellenó antes, etc... tiene muchas utilidades para el webmaster:
  <form method="post" action="http://..../validar.php">
  <input type="hidden" name="nombre_de_variable" value="cualquiera" />
  </form>

  Y se mostrará así:

  No muestra nada, es un campo oculto
• type="submit": para el tipico botón ENVIAR:
  <form method="post" action="http://..../validar.php">
  <input type="submit" name="enviar" value="Enviar" />
  </form>

  Se mostrará así:
• type="button": como submit, pero con el atributo ONCLICK, con el que se especifica la acción a tomar cuando se pulse el botón:
  <form method="post" action="http://..../validar.php">
  <input type="button" name="nombre2" value="Elección" onclick="ejemplo(ejemplo)" />
  </form>

  Se mostrará así:
• type="reset": otro botón, este borra todos los datos del formulario y lo pone como estaba al principio... casi no se usa actualmente:
  <form method="post" action="http://..../validar.php">
  <input type="reset" name="nombre-variable" value="Borrar todo" />
  </form>

  Se mostrará así:
• type="image": es para que el navegador muestre una imagen en lugar del típico botón, como se muestra en el ejemplo siguiente, se comporta igual que 'type="submit"':
  <form method="post" action="http://..../validar.php">
  <input type="image" src="url-imagen.gif" name="enviar" />
  </form>

  Se mostrará así:

Ejemplo de formulario con varios de los campos vistos

Primero el código HTML

<form method="post" action="http://..../validar.php">
<label for="v-nombre">Nombre: </label>
<input type="text" name="v-nombre" /><br />

<label for="v-apellidos">Apellidos: </label>
<input type="text" name="v-apellidos" /><br />

<label for="v-email">Email: </label>
<input type="text" name="v-email" /><br />

<label for="pass">Contraseña: </label>
<input type="password" name="pass" /><br />

<hr />
Escoge los equipos que conoces de la lista:<br />
<input type="checkbox" name="f-madrid" value="f-madrid" />R Madrid<br />
<input type="checkbox" name="f-barcelona" value="f-barcelona" />FC Barcelona<br />
<input type="checkbox" name="f-bilbao" value="f-bilbao" />ATH Bilbao<br />
<hr />
Escoge tu favorito de la lista:<br />
<input type="radio" name="equipo" value="madrid" />R Madrid<br />
<input type="radio" name="equipo" value="barcelona" />FC Barcelona<br />
<input type="radio" name="equipo" value="bilbao" />ATH Bilbao<br />
<input type="submit" name="enviar" value="Enviar" /> <input type="reset" name="borrar" value="Borrar todo" /><br /> </form>

Y se visualizará así:

Puedes probar sin miedo, ya que los datos no se envían a ninguna parte...

Nombre:
Apellidos:
Email:
Contraseña:

---

Escoge los equipos que conoces de la lista:
R Madrid
FC Barcelona
ATH Bilbao

---

Escoge tu favorito de la lista:
R Madrid
FC Barcelona
ATH Vilbao

se pueden aplicar reglas CSS para personalizar el estilo en el que se mostrarán nuestros formularios, así como capas 'div' con un ancho definido (width: 55px;) para alinear los campos del formulario a rellenar...

Formularios: Campos "simples" de entrada de formularios. Etiquetas 'input', 'label' y atributos 'type', 'name', 'value'...

Los campos de entrada de formularios deben ir entre las etiquetas de formulario <form ... /> y </form> vistas en la entrada anterior, cada uno de estos campos se especifican con la etiqueta
<input type="tipo_de_campo_entrada" ... />, y las clases o tipos de campos de entrada 'type' son:

• type="text", tipo de datos alfanumerico, a los que se le debe poner el atributo 'name' con el valor del nombre de variable, el cual podemos elegir libremente:
  <form method="post" action="http://..../validar.php">
  <input type="text" name="nombre_variable" />
  </form>
  Los nombres de variables no deben empezar por caracteres numéricos ni incluir espacios ni caracteres especiales.

  Se mostrará así:

  La etiqueta <label> se usa para especificar un texto relacionado con el contenido del campo del formulario a rellenar, y usa el atributo 'for' con valor igual a el nombre de la variable a la que hace referencia. Se aplica de la siguiente forma:

  <form method="post" action="http://..../validar.php">
  <label for="nombre_variable">Nombre: </label>
  <input type="text" name="nombre_variable" />
  </form>

  El código anterior se mostrará así:

  Nombre:

  Otros atributos para este campo de formulario son:

  • El atributo 'value' debe tener un texto que se mostrará por defecto en el campo del formulario; el cual será sustituido por el que introduzca el usuario:
    <form method="post" action="http://..../validar.php">
    <label for="nombre_variable">Nombre: </label>
    <input type="text" name="nombre_variable" value="Escriba aquí su nombre" />
    </form>

    Y el código se mostrará así:

    Nombre:
  • El atributo 'maxlength' es para especificar la cantidad máxima de caracteres que se pueden introducir en el campo de texto, y se le debe asignar un valor numérico igual al número de caracteres máximo que se podrán introducir:
    <form method="post" action="http://..../validar.php">
    <label for="nombre_variable">Nombre: </label>
    <input type="text" name="nombre_variable" maxlength="3" />
    </form>

    Con maxlength="3", en el cuadro siguiente no se podrán introducir más de tres caracteres:

    Nombre:
  • El atributo 'readonly="readonly"', es para que campo el campo no se pueda modificar, se queda en modo "solo lectura:"
    <form method="post" action="http://..../validar.php">
    <label for="nombre_variable">Nombre: </label>
    <input type="text" name="nombre_variable" readonly="readonly" value="Solo lectura" />
    </form>

    Y el cuadro siguiente no se puede escribir nada:

    Nombre:
• type="password": al igual que type="text", es para introducir texto en un campo, pero este texto no se mostrará en la pantalla, en lugar de los caracteres introducidos se mostrarán circulos o asteriscos:
  <form method="post" action="http://..../validar.php">
  <label for="contraseña">Contraseña: </label>
  <input type="password" name="pass" />
  </form>

  Y el código se mostrará así:

  Contraseña:

Como es de suponer, también se pueden aplicar reglas CSS para personalizar el estilo en el que se mostrarán nuestros formularios...

Formularios: etiqueta 'form' y atributos 'method' y 'action'

Los formularios se hacen para poder enviar datos a través de una página web, se usan para realizar registros en páginas web como foros o tiendas online, para encuestas online, etc.

Para crear un formulario en un documento HTML se usa la etiqueta de apertura <form>, y </form> para cerrarla. A la etiqueta de apertura se le debe incluir el atributo 'method' con dos posibles valores para determinar como se enviaran los datos de un formulario una vez rellenado:

• method="get" enviará los datos del formulario de forma visible en la url.
• method="post" enviará los datos de forma oculta o no visible. Este método es el más usado, lógicamente, por seguridad.

Otro importante atributo para <form> es 'action', y en su valor, se debe especificar la dirección url que tiene que recibir los datos del formulario una vez rellenado:

<form> method="post" action="http://..../validar.php">
...aquí van los campos de entrada de datos del formulario...
</form>

Listas HTML: 'ul', 'ol' y 'li'

Las listas es otro tipo de contenido típico en los documentos HTML, las hay de dos tipos, listas ordenadas y listas desordenadas, para las primeras se usa a etiqueta HTML <ol>

, mientras que para las desordenadas se emplea <ul>, y por último, para definir cada uno de los elementos de las listas (tanto las ordenadas como las desordenadas) se usa el atributo <li>:

• Listas ordendas:
  <ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  </ol>
  

  El código anterior genera la siguiente lista:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3
• Listas desordenadas:
  <ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  </ul>
  

  El código anterior genera la siguiente lista:

  • Elemento 1
  • Elemento 2
  • Elemento 3

---

Reglas CSS para listas

En nuestra Guía de referencia rápida CSS podemos encontrar varias propiedades para usar con las listas, a continuación, algunos ejemplos con la propiedad list-style-type y probando diferentes valores:

• Primero algunos atributos para listas desordenadas:
  Parece que la plantilla CSS de este Blog tiene otras reglas para las listas ul y las modificaciones de estilo CSS quí no se ven reflejadas, pero el código ha sido probado en otros entornos y se visualiza correctamente.

  En el archivo de estilo CSS: podemos crear una clase para las listas que queramos que se muestren con un estilo elegido por nosostros:

  ul {
  list-style-type: square;
  }
  

  En el documento HTML:

  <ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  </ul>
  

  Y el código anterior se visualizará así:

  Debería mostrarse un cuadrado pequeño en cada elemento de la lista

  • Elemento 1
  • Elemento 2
  • Elemento 3
  Otros valores para la propiedad list-style-type en las listas desordenadas pueden ser: circle, disc (este último es el que se muestra por defecto), etc...

  Si queremos que todas las listas desordenadas de nuestra web su muestren del mismo tipo, en lugar de crear una regla CSS con un selector definido por nosotros, deberemos unas la etiqueta HTML ul como selector en el fichero CSS:

  ul {
  list-style-type: square;
  }
  

  Y el documento HTML, al abrir la etiqueta de la lista, no es necesario especificar ninguna clase, ya que todas las listas desordenadas del documento se mostrarán con el mismo valor:

  <ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  </ul>
  
• Para usar la propiedad list-style-image, en el valor url, hay que indicarle la dirección url de una imagen (pequeña):

  En el archivo de estilo CSS:

  .lista_imagen {
  list-style-image: url(http://www.sm.com.gt/sm/p/templates/yoo_pinboard/images/emailButton.png);
  }
  

  En el documento HTML:

  <ul class="lista_imagen">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  </ul>
  
• Y para las listas ordenadas:

  Aplicando la propiedad list-style-type con el valor lower-roman en el archivo CSS:

  .lista_lower-roman ol{
  list-style-type: lower-roman;
  }
  

  En el documento HTML:

  <ol class="lista_lower-roman">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  </ol>
  

  Y el código anterior se visualizará con cada elemento de la lista en números romanos con las letras en minúscula:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

No es correcto modificar estilos de listas ordenadas con atributos de listas desordenadas ni modificar estilos de listas desordenas con atrubutos de listas ordenadas

Tablas HTML: Cabeceras y Pié de tablas, 'thead', 'tbody' y 'tfoot'

A veces, cuando las tablas son muy largas, es conveniente ponerles cabeceras (<thead>) tanto al principio como al final, estás ultimas, pié (<tfoot>) de tabla. Cuando a una tabla se le pone cabecera y/o pié de tabla, el resto de las celdas de datos de la tabla deben definirse como cuerpo (<tbody>) de la tabla:

Estos nuevos elementos se definen de la siguiente manera:

• La cabecera de una tabla se sitúa justo después de la etiqueta de apertura de la tabla (<table>) o, si se da el caso, justo después de la etiqueta de cierre de </caption>:
  <table>
  <thead>
  <tr>
  <th> contenido de cabecera 1 </th>
  <th> contenido de cabecera 2 </th>
  ...
  ...
  </thead>
  <tbody>
  ... resto de celdas contenido de la tabla ...
  </tbody>
  </table>
  
• El pié de una tabla se sitúa justo después de la etiqueta de apertura de la tabla (<table>) o, si se da el caso, justo después de la etiqueta de cierre de </caption>, o también, justo después de la etiqueta de cierre de cabecera (</thead>):
  <table>
  <thead>
  <tr>
  <th> contenido de cabecera 1 </th>
  <th> contenido de cabecera 2 </th>
  ...
  ...
  </thead>
  <tfoot>
  <tr>
  <th> contenido de cabecera 1 </th>
  <th> contenido de cabecera 2 </th>
  ...
  ...
  </tfoot>
  <tbody>
  ... resto de celdas contenido de la tabla ...
  </tbody>
  </table>
  

Una tabla puede tener más de un cuerpo </tbody>, en el momento de visualizar la tabla con un navegador web no implicará nada, pero si a nivel de accesibilidad. Por otro lado, solo podemos tener una cabecera (</thead>) y un pié (</tfoot>) por tabla.

La definición de cada elemento dentro de la tabla debe ir en el ordén:

1. Cabecera </thead>
2. Pié </tfoot>
3. Cuerpo </tbody>

Después la tabla se visualizará así:

Tabla con cabecera, cuerpo y pié

rowspan="2"	Fila de cabecera con colspan="4"
	Cabecera 1	Cabecera 2	Cabecera 3	Cabecera 4
rowspan="2"	Pié 1	Pié 2	Pié 3	Pié 4
	Fila de pié con colspan="4"
1,1	1,2	1,3	1,4	1,5
2,1	2,2	2,3	2,4	2,5
3,1	3,2	3,3	3,4	3,5
4,1	4,2	4,3	4,4	4,5

En este último ejemplo se han empleado dos filas tanto para la cabecera como para el pié, la primera celda de ambas tienen fusionadas las filas con rowspan="2". La fila superior de la cabecera tiene las últimas cuatro celdas fusionadas con un colspan="4", al igual que la fila inferior del pié de la tabla. Y hasta aquí todo lo que hay sobre las tablas HTML.

Tablas HTML: fusión de celdas con atributos 'colspan' y 'rowspan'

A veces necesitamos fusionar celdas de una tabla para representar determinados datos, para ello se emplean los siguientes atributos dentro de las etiquetas td (o th si se da el caso):

• colspan es para fusionar celdas de una misma fila, o sea, fusiona columnas, a colspan se le pueden asignar valores ="2", ="3", ="4"... dependiendo del número de celdas que queramos fusionar:
  <table class="tabla_bordes" summary="fusión de celdas: uso de 'colspan'">
  <caption>fusión de celdas: uso de 'colspan'</caption>
  
  <tr> <td> celda 1,1 </td> <td> celda 1,2 </td> <td> celda 1,3 </td> <td> celda 1,4 </td> </tr>
  
  <tr> <td> celda 2,1 </td> <td colspan="2"> celda 2,2 y 2,3 fusionadas </td> <td> celda 2,4 </td> </tr>
  
  <tr> <td> celda 3,1 </td> <td> celda 3,2 </td> <td> celda 3,3 </td> <td> celda 3,4 </td> </tr>
  
  </table>

  El código anterior genera una tabla que fusiona las celdas 2,2 y 2,3:

  fusión de celdas: uso de 'colspan'

  celda 1,1	celda 1,2	celda 1,3	celda 1,4
  celda 2,1	celda 2,2 y 2,3 fusionadas		celda 2,4
  celda 3,1	celda 3,2	celda 3,3	celda 3,4

• rowspan es para fusionar celdas de las filas de una misma columna, e igual que antes a colspan se le asignan valores ="2", ="3", ="4"... dependiendo del número de celdas que queramos fusionar:
  <table class="tabla_bordes" summary="fusión de celdas: uso de 'rowspan'">
  <caption>fusión de celdas: uso de 'rowspan'</caption>
  
  <tr> <td> celda 1,1 </td> <td> celda 1,2 </td> <td> celda 1,3 </td> <td> celda 1,4 </td> </tr>
  
  <tr> <td> celda 2,1 </td> <td colspan="2"> celda 2,2 y 3,2 fusionadas </td> <td> celda 2,3 </td> <td> celda 2,4 </td> </tr>
  
  <tr> <td> celda 3,1 </td> <td> celda 3,3 </td> <td> celda 3,4 </td> </tr>
  
  </table>

  El código anterior genera una tabla que fusiona las celdas 2,2 y 3,2:

  fusión de celdas: uso de 'rowspan'

  celda 1,1	celda 1,2	celda 1,3	celda 1,4
  celda 2,1	celda 2,2 y 3,2 fusionadas	celda 2,3	celda 2,4
  celda 3,1		celda 3,3	celda 3,4

  En el código de este último ejemplo, al definir las celdas de la tercera fila nos saltamos la celda 3,2, que está fusionada con la celda 2,2 de la segunda fila, y pasamos de la celda 3,1 a la celda 3,3

Ahora vamos a fusionar cuatro celdas, dos de la segunda fila con otras dos de la tercera:

<table class="tabla_bordes" summary="fusión de celdas: uso de 'colspan' y 'rowspan'">
<caption>fusión de celdas: uso de 'colspan' y 'rowspan'</caption>

<tr> <td> celda 1,1 </td> <td> celda 1,2 </td> <td> celda 1,3 </td> <td> celda 1,4 </td> </tr>

<tr> <td> celda 2,1 </td> <td rowspan="2" colspan="2"> celdas 2,2, 2,3, 3,2 y 3,3 fusionadas </td> <td> celda 2,4 </td> </tr>

<tr> <td> celda 3,1 </td> <td> <td> celda 3,4 </td> </tr>

</table>

El código anterior genera una tabla que fusiona las celdas 2,2 y 3,2:

fusión de celdas: uso de 'colspan' y 'rowspan'

celda 1,1	celda 1,2	celda 1,3	celda 1,4
celda 2,1	celdas 2,2, 2,3, 3,2 y 3,3 fusionadas		celda 2,4
celda 3,1			celda 3,4

---

Otros ejemplos de fusión de celdas:

Ejemplos de fusión de celdas

Fusión de filas A B C	Fusión de filas A B C D E F G H I J K
Fusión de columnas A B C	Fusión de columnas A B C D E F G H I J

Tablas HTML, 'table', 'tr' y 'td'

Una tabla es un conjunto de filas y columnas para representar datos, que pueden ser de cualquier tipo: texto, imágenes, listas, otras tablas, etc. La forma de crear una tabla en un documento HTML:

• <table> y </table> son las etiquetas de apertura y cierre de la tabla.
  Un atributo muy interesante para <table> es "summary", se usa para introducir una descripción del contenido de la tabla:

  <table summary="descripción de lo que representa el contenido de la tabla">
  ...aquí irán las filas y columnas con los datos de la tabla...
  </table>

  El atributo summary no será mostrado por el navegador web, pero se debe incluir siempre por motivos de accesibilidad y posicionamiento para algunos buscadores.
• <tr> y </tr> definen cada una de las filas de la tabla (tr viene de table row).
• <td> y </td> contendrán entre ellas el contenido (o datos) de cada una de las celdas de la tabla, ordenadas dentro de cada fila <tr> ... ... </tr> (td viene de table data).
• <th> y </th> es para definir "cabeceras" de columnas o filas de dentro de la tabla (th viene de table head). Estas etiquetas sustituirán a las celdas de datos <td> en el lugar en que las queramos posicionar, por lo tanto también van dentro de las filas de la tabla en su lugar correspondiente.
  La etiqueta <th> debe tener el atributo scope para indicar si esta celda "cabecera" define el contenido de una columna o de una fila con los valores ="col" o ="row" respectivamente:

  • <th scope="col">... identifica a una "columna"
  • <th scope="row">... identifica a una "fila"

  El valor de scope no será mostrado por el navegador web, pero como antes, es muy conveniente incluirlo siempre por motivos de accesibilidad y posicionamiento.
• <caption> descripción de la tabla </caption> es para indicar una descripción del contenido de la tabla, y está sí será mostrada por el navegador web, va justo después de la etiqueta <table>:
  <table summary="descripción de la tabla">
  <caption>descripción de la tabla</caption>
  
  <tr> <td> celda 1,1 </td> <td> celda 1,2 </td> <td> celda 1,3 </td> <td> celda 1,4 </td> </tr>
  
  <tr> <th scope="row"> cabecera 2,1 </th> <td> celda 2,2 </td> <td> celda 2,3 </td> <td> celda 2,4 </td> </tr>
  
  <tr> <th scope="row"> cabecera 3,1 </th> <td> celda 3,2 </td> <td> celda 3,3 </td> <td> celda 3,4 </td> </tr>
  
  </table>

  El código anterior mostrará la siguiente tabla:

  descripción de la tabla

  celda 1,1	celda 1,2	celda 1,3	celda 1,4
  cabecera 2,1	celda 2,2	celda 2,3	celda 2,4
  cabecera 3,1	celda 3,2	celda 3,3	celda 3,4

  El contenido de la etiqueta <caption> se muestra con ese fondo amarillento por que tenemos una regla CSS definida para esta etiqueta:

  caption{
  background-color: #F3F38E;
  }

  El resto del contenido de la tabla se muestra tal y como lo muestra por defecto el navegador que estés utilizando, pues no todos los navegadores web muestran las tablas html del mismo modo:

  Resulta muy interesante crear reglas de estilo CSS para cada uno de los elementos de nuestras tablas, y evitar así sorpresas inesperadas... bordes de celdas, espacio entre celdas, fuente de texto, tamaño de texto, color de texto, estilo, colores de fondo, etc.

---

Ejemplos de reglas o clases CSS para tablas

Además de la regla para <caption> mostrada antes, hay definida en este blog una clase de estilo CSS con el nombre ".tabla" (para algunas tablas del blos) con estas reglas:

/* fondo de la etiqueta "CAPTION" */
caption{
background-color: #F3F38E;
}

/* margen interno para todas las celdas TD de tablas */
td{
padding: 4px;
}

/* celdas TD de la clase ".tabla": color fondo, color texto */
.tabla td{
background-color: orange;
color: black;
}

/* celdas TH de la clase ".tabla": color fondo, color texto */
.tabla th{
background-color: blue;
color: white;
}

Para aplicar estas reglas de estilo a una tabla, se debe especificar en la etiqueta <table> así:

<table class="tabla" summary="descripción de la tabla" ... >

Y la tabla del ejemplo anterior se mostrará así:

descripción de la tabla

celda 1,1	celda 1,2	celda 1,3	celda 1,4
cabecera 2,1	celda 2,2	celda 2,3	celda 2,4
cabecera 3,1	celda 3,2	celda 3,3	celda 3,4

Otro ejemplo tabla con bordes, primero el código CSS, cuyas reglas se aplicarán también a las etiquetas td que estén dentro de nuestra clase tabla_bordes:

.tabla_bordes td {
border-spacing: 15px;
border-width: 3px;
border-style: solid;
border-color: #99CCCC;
border-collapse: collapse; /* une borde celdas con el borde de tabla */
padding: 10px;
text-align: center;
}

Y la tabla de nuestro ejemplo anterior se mostrará así:

descripción de la tabla

celda 1,1	celda 1,2	celda 1,3	celda 1,4
cabecera 2,1	celda 2,2	celda 2,3	celda 2,4
cabecera 3,1	celda 3,2	celda 3,3	celda 3,4

Como a la etiqueta de cabecera th no se le aplica ninguna regla, las celdas cabecera de la tabla se visualizan según las muestra el navegador web que estemos usando.

Capas 'DIV' y uso de 'SPAN'

Una capa es un contenedor donde se pueden meter elementos html (textos, imágenes, listas, tablas...) y, más capas. Se emplean también mucho para las plantillas html o la maquetación o distribución web.

La forma de "invocar" una capa desde un documento HTML es:

<div>
contenido y elementos html y/o más capas
</div>

Y es posible definir reglas de estilo CSS para los elementos del contenido que irán dentro de una capa determinada, que luego se invocará desde el documento HTML de la siguiente forma:

<div class="nombre_capa_en_css">
contenido y elementos html y/o más capas
</div>

Y para "definir" (declarar o crear) una capa en el documento CSS, se procede de la misma manera que para crear una clase dentro del CSS:

.nombre_capa_en_css{
propiead1: valor1;
propiead2: valor2;
propiead3: valor3;
}

Por ejemplo, una capa típica es una que abarca todo el contenido del documento html, la capa contenedor:

.contenedor{
width: 880px; /* 880 píxeles de ancho para la capa */
height: 100%; /* la altura será el 100% de lo alto de todo el documento */
margin: auto; /* margen externo automático */
}

Comentarios HTML

En el código anterior, los textos que van entre las cadenas de caracteres "/*" y "*/" son comentarios de 'control' para el Webmaster, o sea, no tienen ningún efecto en el "comportamiento" del documento a la hora visualizarlo en un navegador web.

Ya de paso, los comentarios en el documento HTML se ponen entre los caracteres <!-- y -->.

Ejemplo de capas:

Capa 1

Contenido de la capa 1

Capa 2

Contenido de la capa 2

Capa 3

Contenido de la capa 3

Más contenido de la capa 1

Las capas de este ejemplo están definidas en el fichero CSS de este blog con sus colores de fondo, para que muestren los bordes de color negro, y un margen externo de 5 píxeles (width: 5px;)

Algunos enlaces sobre uso de capas, estructura y maquetación HTML, o maquetación web:

• Introducción al uso de capas con CSS y XHTML / HTML
• Maquetación de páginas web: posición de las capas
• Estructura y maquetación de una página Web con capas y CSS

---

Uso de la etiqueta SPAN

La etiqueta <span> se usa para aplicar un estilo diferente a un determinado texto de, por ejemplo, un parrafo:

• En el fichero CSS
  .rojo {
  color: red;
  font-weight: bold;
  }
• En el fichero html
  <p>No bebas <span class="rojo">lejía</span> que es perjudicial para la salud.</p>

Al visualizarlo en el navegador:

No bebas lejía que es perjudicial para la salud.

Por otro lado, si queremos que todos los span se muestren de la misma forma -en negrita y de color rojo de color rojo- dentro del documento html, se puede definir una regla para span dentro del fichero CSS:

span {
color: red;
font-weight: bold;
}

IMPORTANTE Observar en este ejemplo, el selector la declaración de la regla "span" no lleva delante el caracter "."

Modulo 2 (indice). Diseño de un sitio web corporativo

En el curso, al principio de este módulo 2 se siguió viendo algunos tipos de contenido de datos:

• Capas DIV y uso de SPAN
• Tablas HTML: 'table', 'tr', 'td' y 'th'
• Tablas HTML: fusión de celdas con 'colspan' y 'rowspan'
• Tablas HTML: Cabeceras y Pié de tablas con 'thead', 'tfoot',y 'tbody'
• Listas HTML: 'ul', 'ol' y 'li'
• Formularios (i)

1.4.6 Logotipos

La función clave de un logotipo es identificar. Por lo tanto, un logotipo debe ser identificativo

Tipos de logotipos:

1. Basados en la propiedad del propietario de la marca (kellog's, Levi's)
2. contracción de la marca, o sus iniciales (BPL, CHS)
3. Asociación nombre + imagen (icónico o abstracto)

"Logotipo" se refiere a la parte textual del diseño e "imagotipo" se refiere a la parte gráfica, pero solemos llamar "logotipo" de forma genérica a todo el conjunto.

Logotipos de las web 2.0 http://fontfeed.com/archives/the-logos-of-web-20/

1.4.5 Contenido

El contenido es el recurso más importante de un sitio web, por encima del diseño, los gráficos o cualquier otro elemento.

• Contenido apropiado para tus lectores: tus textos han de tratar sobre las preocupaciones de los usuarios, lo que es importante para ellos, y en su lenguaje. Explica el problema que resuelves y cómo lo haces. Esto es o que les interesa a las personas que visitan tu web.
• Diseño de autoservicio: una web es un autoservicio, y un establecimiento de este tipo está centrado en la conveniencia, la velocidad y lo económico:
• Es conveniente cuando el usuario apenas tiene que pensar.
• Es veloz cuando se reduce el tiempo que tarda el usuario en encontrar lo que quiere.
• Es económico cuando con poco esfuerzo el usuario consigue realizar su acción
• El formato de los textos: los usuarios escanean tus páginas, leyendo frases y palabras sueltas en pocos segundos con la intención de hacerse una idea de lo que contiene tu web. El formato de tus textos ha de ser acorde con ello.
  
  Usar negritas y párrafos de poca anchura y con una única idea. También usar un color diferente en palabras que quieras resaltar.
  
  El tamaño de los textos es importante.
• Estructura del contenido: utiliza el estilo de "pirámide invertida": las conclusiones y lo más importante se presenta primero, y a continuación los detalles y la información de soporte. Trata de lo más específico a lo más general.
  Lo ideal es que el usuario encuentre en la primera línea la información esencial.

---

Párrafos de texto 'p'

Ya hemos visto algunos elementos ya vistos como son las imágenes y los vínculos, los párrafos de texto se definen dentro del documento HTML con la etiqueta <p> de la siguiente manera:

<p>Aquí va el texto del párrafo</p>

Y el código anterior se mostrará así:

Aquí va el texto del párrafo

Dentro de un párrafo de texto se pueden incluir imágenes (alineadas a la izquierda o derecha del texto)y otros elementos que veremos más adelante como capas, tablas, listas, etc.

Texto en negrita 'strong'

El texto en negrita se define con la etiqueta <strong> de la siguiente manera:

<p>Aquí va el <strong>texto en negrita</strong> del párrafo</p>

Y el código anterior se mostrará así:

Aquí va el texto en negrita del párrafo

Texto en cursiva 'em'

El texto en cursiva se hace con la etiqueta <em> de la siguiente manera:

<p>Aquí va el <em>texto en cursiva</em> del párrafo</p>

Y el código anterior se mostrará así:

Aquí va el texto en cursiva del párrafo

Saltos de línea 'br /' y lineas horizontales 'hr /'

Un salto de línea se hace con la etiqueta <br />, y no usa etiqueta de cierre. Una linea horizontal se hace con la etiqueta <hr />, y tampoco tiene etiqueta de cierre, se usan de la siguiente manera:

<p>Aquí va un salto de linea<br />aquí viene otro<br />y aquí otro<br />y ahora una linea horizontal<hr />y otra más<hr /> y ya está bien...</p>

Aquí va un salto de linea
aquí viene otro
y aquí otro
y ahora una linea horizontal

---

y otra más

---

y ya está bien...

Las lineas horizontales (o separadores) admiten algunas reglas CSS para determinar su color, grosor o el ancho.

1.4.4 Vínculos (enlaces, o hipervínculos)

también llamados hiperenlaces, enlaces o "links".

Es una palabra, frase o imagen de un hipertexto (HTML) que conecta con otra información. En la WWW, los enlaces (o vínculos) de una página WEB conectan con otras páginas, a menudo muy alejadas físicamente, pero relacionadas por sus temáticas. Hay enlaces de dos tipos genéricos, enlaces externos y enlaces internos:

Definir un enlace externo en un documento HTML:

Los enlaces externos son los que, al hacer click sobre ellos, siempre nos llevan a otro documento o página web diferente al que nos encontramos. Podemos definir un enlace desde el cual acceder a otra página cuando hacemos clic sobre el texto del enlace o sobre una imagen:

• <a href="http://direccion-web.com/lo_que-sea">palabra o una frase concreta</a>
  Tanto a la "palabra" como a "una frase concreta" se les denomina texto ancla (o en inglés: anchor text).
• <a href="http://direccion-web.com">una imagen como contenido</a>
  En el caso de imágenes, recordar siempre etiquetar la imagen con el atributo alt="descripción de la imágen" por motivos de accesibilidad y de indexación en buscadores.

Enlaces Internos:

Los enlaces internos son enlaces enlaces que nos conducen a otra parte del mismo documento en el que estamos (NO a otro documento html del mismo sitio web).

Para acceder a una parte concreta dentro de un documento html hay que insertar "anclas" dentro del un documento (no "texto ancla" o "anchor text" mencionados antes en la creación de enlaces), y estas "anclas" se definen con el atributo "name" en lugar de "href":

• <a name="texto_identificativo_del_ancla">entidad a la que hacemos referencia</a>
  En el "texto_identificativo_del_ancla" no se pueden usar guiones medios (-) ni espacios, ni caracteres especiales. Es bueno, en este caso, usar guiones bajos (_) para separar las palabras. En la "entidad a la que hacemos referencia" se puede poner una párrafo -con sus respectivas etiquetas de apertura <p> y cierre </p>-, una imagen o lo que queramos, pero es más normal que esa "entidad" sea algún encabezado tipo <H2>, <H3>, etc. El uso de "anclas" se recomendable para SEO.

Y el enlace a ese "ancla" que hemos definido:

<a href="#texto_identificativo_del_ancla">palabra o frase o imagen</a>

Y el enlace a un "ancla" de una página externa, u otro documento html del mismo site:

• <a href="url/direccion-web.html#texto_identificativo_del_ancla">palabra o frase o imagen</a>
  En primer lugar la url, que debe tener guiones medios (-) entre las palabras, después el símbolo almoadilla (#) y el "texto_identificativo_del_ancla" con guiones bajos (_) para separar las palabras

Atributos de enlaces

• Atributo "target": Tal y como estamos haciendo estos enlaces, lo normal es que al hacer clic sobre uno de ellos, la web a la que "apunta" ese enlace aparezca en la misma ventana del navegador web que estamos usando, pero hemos visto que en ocasiones, al hacer clic en un enlace de una página web, la web de dicho enlace se nos abre en otra ventana (o pestaña) del navegador.
  

  Para que los enlaces de nuestra web se comporten de esta manera, debemos agregar a nuestra etiqueta de enlace <a> el atributo target con el valor ="_blank":

  <a target="_blank" href="nuestro-enlace.html">texto o imagen </a>

  Otros dos valores que tiene el atributo target -hoy en día en desuso, ya que se empleaban en las web diseñadas con marcos o frames- son ="_self" y ="_top". Con ="_self", al hacer clic en un enlace, la pagina de dicho enlace se abre en el marco (o frame) actual, mientras que con ="_top" desaparecen los marcos y la web del enlace a la que hemos hecho clic se mostrará ocupando toda la ventana del navegador web.

  Si no usamos el atributo target, cualquier navegador se comportará como si se emplease target="_self", y cuando estamos navegando como usuario en una web, si queremos que los enlacen se comporten como target="_blank" deberemos hacer clic sobre ellos con el botón central (o presinando la ruleta) del ratón.

• Atributo "rel": para robots de buscadores (SEO)
  

  Teniendo en cuenta que el robot de Google solo mira los primeros 100 enlaces de un sitio web (también otros buscadores), en determinados casos puede que nos interese que algunos enlaces no sean considerados por los robots de los buscadores, para esto se puede usar el atributo rel... A los enlaces normales se les denomina DOFOLLOW (opción por defecto), mientras que a los que no queremos que sean indexados por los robots de búsqueda se les denomina NOFOLLOW. Para indicarle a los robots de búsqueda que no tengan en consideración un enlace:

  <a rel="nofollow" href="nuestro-enlace.html">texto o imagen</a>
• Atributo "title": se emplea para añadir una descripción al enlace, además, tiene más relevancia este atributo que el propio texto ancla del enlace:
  <a target="_blank" title="WarWys blog" href="http://warwys.blogspot.com">WarWys</a>
  WarWys
  Al situar el puntero del ratón sobre el texto del enlace (o texto ancla) aparece el valor del atributo 'title', y como se ha indicado arriba, el texto de 'title' tiene más relevancia que el propio texto ancla del enlace para los motores de búsqueda.

Sobre enlaces externos e internos

	Cuando hablamos de Diseño web	Cuando hablamos de SEO
Enlaces internos	Enlazan a una parte del mismo documento HTML en el que nos encontramos.	Enlazan a las páginas del mismo sitio web en el que nos encontramos.
Enlaces externos	Enlazan a otro documento HTML que puede ser del mismo sitio web o de otro sitio web diferente.	Enlazan a otro otro sitio web diferente al que nos encontramos.

Enlaces a direcciones de correo electrónico (email)

Al hacer click sobre este tipo de enlaces se abrirá el programa cliente de correo electrónico que tengamos por defecto instalado en el sistema con la dirección de correo electrónico del enlace para empezar a escribir el mensaje:

<a href="mailto:correoelectronico@dominio.com" >texto o imagen</a>

Estos enlaces están en desuso, ya que son escaneados con intenciones fraudulentas como el envío de spam (o coreo basura).

1.4.3 Imágenes: etiqueta 'img'

Formatos de imagen

Los hay de varios tipos como bmp, gif, jpg, png... pero no todos ellos son adecuados para la web, algunos ocupan demasiada memoria o no son compatibles con algunos navegadores.

• Formato JPG o JPEG: se creó para almacenar fotografías, y cada una puede disponer de hasta 16 millones de colores ocupando un reducido tamaño.
  Cuanto mayor es su compresión peor es la calidad, pero el tamaño de la imagen será menor.
  La resolución ideal para la pantalla es de 72 píxeles por pulgada (también ppp, ó dpi), para la imprenta se recomiendan 300 ppp.


• Formato GIF: es el más usado en Internet, almacenan un máximo de 256 colores o tonos de gris -para imágenes en blanco y negro-. Admite imágenes transparentes, entrelazadas -que van apareciendo a medida que las va cargando el navegador web- e imágenes animadas -guardando varias imágenes en un único fichero.


• Formato PNG: se diseño como sucesor del formato GIF, por lo que combina ventajas de los formatos GIF y JPG.
  Ofrece compresión sin perdidas, admite transparencia y entrelazado, permitiendo hasta 16 millones de colores y transparencia de 8 y 24 bits, con lo que se consigue 256 niveles de transparencia... algunos navegadores antiguos como Internet Explorer 6 no soportan las últimas versiones de este formato

En cuanto al formato a elegir:

• JPG para fotografías.
• GIF y PNG para logotipos e imágenes con colores uniformes o imagenes con texto.

Imágenes como entidades (contenido) y como fondo (diseño)

Como entidad:

Para introducir una imagen en un documento HTML se debe emplear la etiqueta IMG con sus atributos necesarios:

<img src="ruta-de-la-imagen.gif" width=100 height=50 alt="texto alternativo" />

Los atributos de la entidad o etiqueta son:

• src se especifica la ruta y nombre del fichero de la imagen
• width define el ancho de la imagen (en píxeles)
• height define su altura
• y entre las comillas de alt se debe introducir siempre un breve texto descriptivo de lo que hay en la imagen, tanto por motivos de accesibilidad para personas discapacitadas, o para accesos desde dispositivos que no pueden mostrar imágenes, como por motivos de indexación por parte de los robots de los buscadores como Google

Como fondo del web (en el archivo de estilo CSS):

body {
background: url (ruta-de-la-imagen.jpg) repeat;
}

• body, que es el selector de la regla, indica que la regla se aplica a todo el cuerpo del documento HTML.
• background es la propiedad de la declaración de la regla, en este caso se refiere al fondo (background) del documento.
• Nos queda el valor de la declaración, url es para indicar la ruta y nombre del fichero de la imagen, entre paréntesis (ruta-de-la-imagen.jpg) (o .gif o .png), y repeat; es para indicar al navegador web que debe mostrar la imagen repetida en todo el fondo de la página web a visualizar, que es la opción por defecto. Además de repeat también se puede usar repeat-x para que solo repita la imagen en horizontal, repeat-y para que la repita en vertical, o no-repeat para que solo la muestre una vez y no repita. Otra opción es fixed, y es para que no se mueva la imagen de fondo al movernos a lo largo de la web.

Dos formas de definir las reglas para definir imagen y color de fondo:

Forma larga:

body {
background-image: url(ruta-de-la-imagen.jpg);
background-color: #CCEECC;
}

Forma corta:

body {
background: #CCEECC, url(ruta-de-la-imagen.jpg);
}

Bancos de imágenes on line:

• De pago, pero ojo con las opciones de las licencias:
• istockphoto.com
• photolia.com
• Gratis, o con licencia Creative Commons:
• sxc.hu.
• FlickrCC.
• Mediateca de EducaMadrid.
• Open Clip Art Gallery.
• Openphoto.
• Free Digital Photos.
• Lista de sitios que ofrecen imágenes free.
• Google como buscador de imágenes reutilizables
  Se accede al buscador de imágenes de Google, después en búsqueda avanzada, y donde pone Derechos de uso (por la parte de abajo de la página) hay que escoger la opción de licencia deseada.

El tamaño recomendado de una imagen para insertar en una web no debe superar los 50kb, tampoco es conveniente cargar la página de muchas imágenes para no ralentizar demasiado su descarga.

1.4.2 Fondo

Para hablar del fondo de los documentos HTML en el diseño web tenemos que tener en cuenta conceptos vistos antes como que el diseño siempre debe estar al servicio del contenido... legibilidad, usabilidad, accesibilidad...

La tabla de Karl Borggrafe

La tabla de Karl Borggrafe viene a informar sobre la legibilidad de las letras sobre fondos de distintos colores. Las mejores combinaciones son:

La tabla de Karl Borggrafe

1. negro sobre amarillo	6. blanco sobre azul
2. amarillo sobre negro	7. azul sobre amarillo
3. verde sobre blanco	8. azul sobre blanco
4. rojo sobre blanco	9. blanco sobre negro
5. negro sobre blanco	10. verde sobre amarillo

... ya vimos como crear reglas una entrada anterior sobre las hojas de estilo para colores del texto, tamaño... y también se puede hacer con el fondo de los párrafos.

Para introducir un color de fondo en toda la página o docuento HTML se debe hacer una regla en la hoja de estilo CSS:

body {
background: #00ff00;
}

... donde 00ff00 en el color verde en hexadecimal

En el siguiente punto 1.4.3 Imágenes veremos también como introducir imágenes en el fondo de un documento HTML desde la hoja de estilo CSS.

1.4.1 Color

Los colores provocan diferentes sensaciones en las personas; cada color tiene un significado que podemos utilizar al diseñar nuestro sitio web, así podemos sugerir o promover diversas sensaciones en nuestros visitantes.

Significado de los colores:

• Blanco: significa seguridad, pureza y limpieza. A diferencia del negro, el blanco tiene una connotación positiva Es apropiado para organizaciones caritativas y asociable con hospitales, médicos y esterilidad. Puede usarse en sitios web de productos médicos o relacionados con la salud
• Amarillo: simboliza la luz del sol. Representa alegría, felicidad, inteligencia y energía. Al amarillo simula entrar en calor, provoca alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida Apropiado para webs infantiles y para ocio. Por su eficacia para atraer la atención, es útil para destacar aspectos importantes de un sitio web.
• Anaranjado: Representa entusiasmo, felicidad, atracción, creatividad, determinación, éxito, ánimo y estímulo. Por su alta visibilidad también es útil para captar la atención y subrayar aspectos a destacar de un sitio.
• Rojo: representa fuego y sangre, está asociado al peligro, la guerra, la energía, fortaleza, determinación así como a la pasión, al deseo y al amor. Visibilidad alta, para avisos importantes, prohibiciones y llamadas de precaución. Adecuado para sitios web del motor (coches y motos), bebidas energéticas, juegos, deportes y actividades de riesgo.
• Púrpura: se asocia a la realeza y simboliza poder, nobleza, lujo y ambición. Sugiere riqueza y extravagancia. Asociado con la sabiduría, la creatividad, la independencia, la dignidad. El púrpura brillante es ideal para diseños dirigidos a la mujer y es apropiado para diseños dirigidos a niños.
• Azul: el color del cielo y del mar, asociado con la estabilidad y la profundidad. Adecuado para productos de limpieza (personal, hogar e industrial) y lo relacionado con:
  • El cielo: lineas aéreas, aeropuertos.
  • El aire: acondicionadores, paracaidismo.
  • El mar: cruceros, vacaciones y deportes marítimos.
  • El agua: agua mineral, parques acuáticos, balnearios.
  • También es un color adecuado para promocionar productos de alta tecnología o alta precisión
• Verde: el color de la naturaleza. Representa armonía, crecimiento, exuberancia, fertilidad y frescura. Por estar asociado con la naturaleza es ideal para webs de jardinería, turismo rural, actividades al aire libre o productos ecológicos.
• Negro: representa poder, elegancia, formalidad, muerte y misterio. En una web puede dar imagen de elegancia y aumentar la sensación de profundidad y perspectiva. Sin embargo no es recomendable usarlo como fondo, pues disminuye la legibilidad.

El sistema RGB

Los colores aditivos son los usados en trabajo gráfico con monitores de ordenador, pues el monitor produce los colores partiendo de tres tubos de rayos catódicos: uno rojo, otro verde y otro azul.

Por este motivo, el modelo de definición de colores usado en trabajos digitales es el modelo RGB(red, green, blue). Los valores de cada color van desde 0 a 255 y, combinando sus valores se obtienen todos los colores visibles. Para mostrar el rojo "puro" en RGB, sería RGB(255, 0, 0).

El sistema hexadecimal

El sistema hexadecimal permite expresar fácilmente un color de la escala RGB al sistema empleado en HTML y en javaScript.

De esta forma, el rojo "puro" RGB(255, 0, 0), en sistema hexadecimal será RGB(ff, 0, 0), y en un fichero html o css se representará #ff0000. Para entender mejor esto, con más información y ejemplos de sitios web con colores determinados, mejor visitar siguientes enlaces:

Colores aditivos y colores sustractivos:

• Colores aditivos: luces de color (R,G,B): rojo, verde y azul.
• Colores sustractivos: absorbe los colores y refleja el que se ve (C,M,Y,K): cian, magenta, amarillo y negro.

Enlaces de interés:

• Sistema hexadecimal (wikipedia)
• Colores en html (wikipedia)
• Ejemplos de páginas web con colores aditivos.

1.3.8 Consistencia en el diseño: las hojas de estilo CSS

• Estilo enriquecido CSS (Cascade Stile Sheet): Hojas de Estilo en Cascada. Permite la creación de documentos (páginas HTML) visualmente mucho más ricos separando el contenido del diseño.


• Fácil de utilizar: permite al diseñador reducir sustancialmente la carga de trabajo al diseñar un sitio web


• Reutilización en múltiples páginas: cuando la hoja de estilo (CSS) recoge aspectos comunes a varias páginas, puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos.
  
  http://camaleonscss.com/ es una web con el mismo contenido pero con diferentes ficheros CSS, haciendo clic en sus enlaces podemos ver distintos diseños y maneras de presentar la misma información en pantalla.

• Reglas básicas de CSS (I): Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentro del documento HTML, así se puede conseguir el mismo efecto que usando el marcado tradicional, por ejemplo, lo que en HTML sería:
  
  <h2><font color="red">texto del elemento</font><h2>

  en el CSS, para todos los títulos del tipo <h2> sería:

  H2 {
  color: red;
  }
CSS (II): a la expresión "H2{color: red;}" se le denomina "regla", y esta que hemos definido en concreto, colorea de rojo los elementos del tipo 'h2'.
Cada regla tiene dos partes: selector "H2", declaración "{color: red; }", y dentro de la declaración tenemos la propiedad "color" y el valor "rojo"...




Para invocar las reglas CSS desde un archivo HTML, y que estas reglas hagan efecto en los elemento del fichero HTML al visualizarlo desde un navegador web, hay que hacer una llamada al archivo CSS desde el HTML, esto se hace entre las etiquetas <head> y </head> del fichero HTML, y la orden para que haga efecto es:

<link rel="stylesheet" type="text/css" href="nombre-hoja-estilo.css">
• Definición de clases dentro del CSS: se hace igual que una regla pero con un punto delante:
  .nombre {
  color: red;
  }

  así se ha definido la clase "nombre" con la propiedad "color" y el valor "rojo". Para invocarla desde el fichero html:

  <p class="nombre"> ... ... </p>
• Definición de ID (identificadores) dentro del CSS: se hace de forma parecida a las clases pero se pone delante una almoadilla # en lugar de un punto:
  #nombre {
  font-size: 16px;
  font-weight: bold;
  }

  se ha definido el ID "nombre" con la propiedad de tamaño de fuente de 16 píxeles y en negrita. Para invocar este ID desde el fichero HTML:

  <p id="nombre"> ... ... </p>

  Los ID son más empleados que las reglas para trabajar con lenguajes de programación como Java.

---

Pseudo-clases o pseudoelementos

Algunos navegadores web no representan algunos de estos elementos, se pueden aplicar tanto a las clases como a los ID (identificadores), justo debajo de donde se definen los primeros, y comienza con el carácter ':', la pseudo-clase o el pseudoelemento y la propiedad y su valor... Un par de ejemplos:

.diferente {
color: green;
text-transform: capitalize;
}
:first-letter.diferente{color: #ff00ff}

En este caso, se asigna a la primera letra (first-letter) de la clase diferente el color #ff00ff.

#pollo {
font-size: 16px;
font-weight: bold;
color: navy;
}
:first-letter#pollo{color: #ff0000;}

En este otro caso se aplica a la primera letra de el ID pollo el color #ff0000.

---

Aplicar las mismas reglas a varias clases o elementos

La utilidad de esto es no repetir código en reglas de estilo que tienen declaraciones idénticas, los selectores deben ir separados por ",", y se procede de la siguiente manera:

.clase1, h2 {
color: green; text-transform: capitalize;
}

El código anterior aplica las mismas reglas a los elementos de la clase ".clase1" y a los elementos "h2" (cabeceras de segundo grado). La clase .clase1" y el elemento "h2 pueden estar también declaradas en otra parte del archivo CSS con otras propiedades y valores diferentes en sus declaraciones.

---

Aplicar reglas a determinados elementos HTML dentro de una clase

Atención en el selector de la regla, los términos que están separados por espacios y los que están separados por ",", procedemos así:

.clase1 p h2, clase2 a {
color: green;
text-transform: capitalize;
}

El código anterior aplica las reglas a los elementos "p" (párrafos de texto) y a los elementos "h2" (cabeceras de segundo grado) que se encuentren dentro de la clase ".clase1". Y también aplica las mismas reglas a los elementos "a" (hipervínculos o enlaces) de dentro de la clase ".clase2".

En el documento html, también podemos incluir varias reglas en un mismo elemento de contenido separando los nombres de las clases por espacios:

<img src="url-de-la-imagen" widht=300 height=125 class="case1 clase2 ... " alt="texto alternativo" />

---

Y aquí una chuleta, o guía de referencia rápida de CSS:

• Descarga: Guía de referencia rápida CSS (pdf)