Outbook

XHTML-CSS, Accesibilidad, PHP y más

Inicio que contiene a Archivo por Etiqueta 'Atributos HTML'

Datos de búsqueda

Etiqueta ‘Atributos HTML’

HTML: uso de atributos id, headers y axis en tablas

Fecha de publicación: 2010/02/16

Habitualmente se utiliza el atributo scope en las tablas para definir la relación de las celdas con las columnas.

Leer el resto del artículo

Datos del artículo:

HTML 5: Atributo placeholder

Fecha de publicación: 2010/01/09

Resulta muy habitual encontrarse con campos de texto que contienen un valor por defecto que ayuda al usuario a comprender que información debe introducir en dicho campo. El comportamiento habitual es que cuando el usuario activa el campo el texto desaparezca.

Este es el estado antes de activar el campo y una vez se desactiva sin haber introducido datos:

Atributo placeholder (campo inactivo)

Y este es el estado del campo activado antes de haber introducido información:

Atributo placeholder (campo activo)

Para obtener ese efecto es necesario el uso de Javascript, pero con HTML 5 eso se va a terminar.

Leer el resto del artículo

Datos del artículo:

Javascript: establecer atributo readonly en campos de formulario

Fecha de publicación: 2009/12/29

El atributo readonly se establece en Javascript mediante true o false:

var campo = document.getElementById('campo_formulario');
campo.readOnly = true; // Se añade el atributo
campo.readOnly = false; // Se quita el atributo

Un detalle en el que hay que fijarse, ya que de ello dependerá que el script funcione, es la "O" mayúscula al especificar el atributo.

Datos del artículo:

HTML y Accesibilidad: el atributo longdesc en imágenes

Fecha de publicación: 2008/12/15

Cuando se utilizan imágenes en una web la práctica habitual es darles un texto alternativo mediante el atributo alt, o dejar vacío dicho atributo en el caso de que la función de la imagen sea meramente decorativa.

Pero nos podemos encontrar con el caso de tener una imagen a la que haya que asociarle un texto alternativo, pero dicho texto sea excesivamente largo. Para esas ocasiones está el atributo longdesc.

Ejemplo de imagen con textos largosEjemplo de imagenes con texto largo

El atributo longdesc ha de ser siempre una URL que lleve a una descripción de la imagen, en la misma o en otra página:

longdesc = uri [CT]
This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map’s contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an A element, the user agent’s mechanism in the user interface for accessing the “longdesc” resource of the former must be different than the mechanism for accessing the href resource of the latter.

Se puede dar una URL externa o, como en el ejemplo expuesto más adelante, un marcador de página. En ese caso bastaría con dar un atributo id que haga de marcador al párrafo con la descripción. Ejemplo de como podría quedar el código HTML

<p><img src="imagen1.jpg" alt="Promoción" longdesc="#descripcion1" /></p>
<p id="descripcion1">Descripción de la primera imagen.</p>

<p><img src="imagen2.jpg" alt="Promoción" longdesc="#descripcion2" /></p>
<p id="descripcion2">Descripción de la segunda imagen.</p>

Lectores de pantalla

Se supone que el longdesc es para lectores de pantalla, pero resulta que los hay que no dejan elegir al usuario si quieren ir o no a la descripción, y les llevan directamente.

Una solución podría ser un enlace oculto (pero no mediante display:none;, que si no los lectores de pantalla no lo pillan) que llevase a la URL de la descripción.

Enlaces relacionados

Datos del artículo:

Personal dedicado a la gestión de contenidos: ¿Qué deben saber?

Fecha de publicación: 2008/10/20

Un aspecto que debe cuidar una empresa cuando dispone de un sitio web es el del mantenimiento y creación de contenidos. Se suelen utilizar gestores de contenido, lo que facilita dicha tarea.

Y es ahí donde pueden surgir problemas. ¿Quién se dedica a introducir y modificar los contenidos? Hay ocasiones, incluso en compañías enormes que son la cabeza visible de su sector, que esa tarea se encarga a personas sin el más mínimo conocimiento de HTML.

Esto ocasiona que a veces un portal que se ha elaborado respetando estándares y accesibilidad acabe perdiendo dichas características, de modo que la inversión extra realizada para ello resulta un desperdicio.

Las personas que se dediquen a realizar estas funciones no tienen por que saber de maquetación HTML-CSS, pero si deben tener unos conocimientos básico de HTML que no es muy complicado de aprender:

  • Concepto de etiqueta HTML.
  • Etiquetas y atributos básicos:
    • DIV, SPAN.
    • H1-H6, P, BR, STRONG, EM.
    • BR.
    • DL, UL, OL, DL: las etiquetas para listados.
    • TABLE, CAPTION, COL, COLGROUP, THEAD, TBODY, TFOOT, TR, TH, TD etiquetas para tablas. Debe también saber hacer uso del atributo scope.
    • IMG: debe conocer al menos el atributo alt.
    • Los atributos id y class.

Además deben saber en que momento utilizar cada etiqueta y como hacer que el contenido que están generando sea mínimamente accesible.

Datos del artículo:

HTML: cuando se puede usar el atributo alt en el elemento input

Fecha de publicación: 2008/01/22

El atributo alt en el elemento input solo debe usarse si el atributo type contiene el valor image.

Saber más sobre el elemento input y sobre la obligatoriedad de la inclusión del atributo alt

Datos del artículo:

HTML y CSS: diferencias entre clases (class) e identificadores (id)

Fecha de publicación: 2008/01/02

El atributo id

El atributo id sirve para identificar de forma única a un elemento dentro de un documento HTML.

El valor del atributo id de un elemento no puede repetirse en ningún otro atributo id del mismo documento.

El id es la parte del selector CSS que más especificidad CSS da: un valor de 100.

El atributo class

El valor del atributo class puede repetirse cuantas veces sea necesario, incluso puede llevar más de una clase:

class=”claseUnica” -> atributo class con una sola clase
class=”clase1 clase2” -> atributo class con más de una clase

El valor del atributo class no tiene ningún valor identificativo del elemento que lo contiene, únicamente sirve para asociarle los estilos al elemento.

En cuanto a especificidad CSS tiene un valor de 10.

Saber más

Este documento está disponible en formato OpenDocument

Datos del artículo:

Atributos de idioma en HTML: lang y hreflang

Fecha de publicación: 2007/11/06

El atributo lang

El atributo lang sirve para definir el idioma del contenido de un elemento.

Hay que definirlo en primer lugar en el elemento HTML, para definir el idioma del documento:

<html lang="es">

Y una vez definido el idioma principal del documento, en todos aquellos elementos en los que su contenido sea distinto a dicho idioma principal:

<a lang="en">
<p lang="fr">
<span lang="zh">

También puede añadirse una variante de idioma, poniendo tras el valor de idioma una abreviatura de país, por ejemplo inglés de Estados Unidos:

<p lang="en-us">

El atributo hreflang

El atributo hreflang sirve para definir el idioma del destino de un enlace (elemento A):

<a hreflang="en">

Valores de los atributos

Los valores que se utilizan en los atributos anteriormente mencionados son los definidos en la norma ISO 639 (los de dos caracteres).

Accesibilidad

La referencia WAI WCAG 1.0 en su punto 4.3, y la norma UNE 139803 en su punto 4.4.4 requieren la presencia del atributo lang allí donde sea necesario para poder cumplir la prioridad 1 (A) de accesibilidad.

WAI WCAG 1.0:

4.3 Identify the primary natural language of a document. [Priority 3]

For example, in HTML set the "lang" attribute on the HTML element. In XML, use "xml:lang". Server operators should configure servers to take advantage of HTTP content negotiation mechanisms ([RFC2068], section 14.13) so that clients can automatically retrieve documents of the preferred language.

UNE 139803:

4.4.4 Se debe especificar el idioma principal de la página Web

Nota – Se deben tener en cuenta las recomendaciones recogidas en el informe RFC 3066 de la IETF (The Internet Engineering Task Force – http://www.ietf.org) y las normas internacionales de códigos de idiomas (ISO 639) y países (ISO 3166).

EJEMPLO: Se debe usar el atributo "lang" en la etiqueta "html", en HTML o XHTML, marcando el idioma correspondiente, por ejemplo con "es" para español, "ca" para catalán, [...] "gl" para gallego, "en" para inglés, "fr" para francés, etc. También debe usarse para indicar las variaciones idiomáticas cuando sea apropiado, por ejemplo: "es-mx" para el español de México, "es-cl" para el de Chile, etc.

Enlaces relacionados

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS:


Fatal error: Call to undefined method WP_Error::get_item_quantity() in /homepages/16/d223158695/htdocs/web/blog.outbook.es/wp-content/plugins/wordpress-php-info/common/cr-common.php on line 215