ESPECIFICAR TODOS LOS PARAMETROS Y VALORES DIV


The <div> tag is supported in all major browsers.


Definition and Usage

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with styles.


Tips and Notes

Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.


Differences Between HTML and XHTML

NONE


Optional Attributes

DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute Value Description DTD
align left
right
center
justify
Deprecated. Use styles instead.
Specifies the alignment of the content inside a <div> element
TF

Standard Attributes

The <div> tag supports the following standard attributes:

Attribute Value Description DTD
class classname Specifies a classname for an element STF
dir rtl
ltr
Specifies the text direction for the content in an element STF
id id Specifies a unique id for an element STF
lang language_code Specifies a language code for the content in an element STF
style style_definition Specifies an inline style for an element STF
title text Specifies extra information about an element STF
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents STF

More information about Standard Attributes.


Event Attributes

The <div> tag supports the following event attributes:

Attribute Value Description DTD
onclick script Script to be run on a mouse click STF
ondblclick script Script to be run on a mouse double-click STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
onmouseout script Script to be run when mouse pointer moves out of an element STF
onmouseover script Script to be run when mouse pointer moves over an element STF
onmouseup script Script to be run when mouse button is released STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
onkeyup script Script to be run when a key is released STF

Tag HTML div

Descripción

El elemento HTML div es un contenedor a nivel de bloque para otros elementos. Por sí mismo, no tiene significado alguno a nivel presentacional o semántico, exceptuando que, al ser un elemento a nivel de bloque, los navegadores mostrarán un quiebre de línea antes y después de su contenido.

Los elementos HTML div adquieren su potencual al ser usados conjuntamente con hojas de estilo, ya que resultan muy útiles para asignar atributos presentacionales a bloques enteros de contenido.

Otro uso útil para este elemento, y tal vez el más importante, es el de establecer la distribución o el diseño (en inglés “layout”) del documento. Los elementos DIV han venido a reemplazar a la antigua forma de establecer el diseño del documento, que usaba tablas para organizar la distribución del contenido. Estos deseños con tablas hacían uso erróneo del elemento HTML table, cuyo propósito no es otro que representat información tabulada.

El atributo “align” de este elemento ha sido formalmente desaprobado en HTML 4.01. Por lo tanto, su utilización ya no es recomendable.

Ejemplos

A continuación, hay algunos ejemplos del uso del elemento HTML div, donde asigna propiedades presentacionales a otros lementos tanto a nivel de bloque como de línea.

Nota cómo el primer DIV está flotando a la derecha del contenido. Esta es una característica muy útil a la hora de diseñar la distribución de una página.

Código
<div style=”float: right;”>Lunes, 14 de Febrero de 2011</div>
<div style=”font-size: 2em;”>Elemento HTML <em>div</em>.</div>
<div style=”color: green;”>
<p>Este elemento es muy útil al diseñar “layouts” sin la utilización de tablas.</p>
<p>No olvides revisar su referencia en HTMLQuick.com.</p>
</div>
Vista
Lunes, 14 de Febrero de 2011
Elemento HTML div.

Este elemento es muy útil al diseñar “layouts” sin la utilización de tablas.

No olvides revisar su referencia en HTMLQuick.com.

Atributos

id (name)

El atributo “id” asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

<p id=”parrafo1″>Este es el primer párrafo, llamado “parrafo1”. Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

class (cdata)

El atributo “class” asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial “Hojas de estilo en cascada”).

<p>Este artículo está basado en el libro “Viento en los árboles” de Jhon L. Brooks</p>
<p>Este artículo está basado en el libro “Viento en los árboles” de Jhon L. Brooks… y es más importante que el anterior.</p>

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo “class”. De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial “Hojas de estilo en cascada”.

<p style=”color: #0000FF; font-size: 12pt”>Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

Código
<a title=”HTMLQuick.com” href=”http://www.htmlquick.com/es/”>Código HTML</a>
Vista

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor por defecto es “desconocido”.

Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es “xml:lang”. Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo “lang” ha sido completamente reemplazado por “xml:lang” y su uso ya no es válido.

<p lang=”en” xml:lang=”en”>This is a paragraph in English.</p>
<p lang=”es” xml:lang=”es”>Este es un párrafo en español.</p>

dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

  • RTL: derecha a izquierda.
  • LTR: izquierda a derecha.
<q lang=”he” dir=”rtl”>…una cita en Hebreo…</q>

align

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Define la alineación horizontal de su contenido. Los valores posibles, insensibles a mayúsculas/minúsculas, son:

  • left: el texto es alineado a la margen izquierda.
  • right: el texto es alineado a la margen derecha.
  • center: el texto es centrado.
  • justify: el texto es alineado a ambas márgenes.
<div align=”right”>Texto alineado a la derecha.</div>

Eventos

  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

Encuesta a nuestro visitantes

Publicado el julio 20, 2012 en Uncategorized. Añade a favoritos el enlace permanente. 1 comentario.

  1. Hi, this is a comment.
    To delete a comment, just log in, and view the posts’ comments, there you will have the option to edit or delete them.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

css_capas_maria_ramirez

A great WordPress.com site

CSS_CAPAS_E_CASTRO

PROGRAMACION 3

CAROLINA TORRES LAGOS

Historias interesantes

CSS_CAPAS_LISETH_CAICHE

Programacion III ...............................................................Profesor: John Orellana

evelynbarragan1

FIESTAS JULIANAS

Lisbeth Toaza Valdez

Programación III

michaelgonzalezec

CSS_Manejo de Capas...etc

css_capas_luis_muentes

Smile! You’re at the best WordPress.com site ever

AdolfoAguirre

PROGRAMACION III

CSS_CAPAS_J_VELASCO

programacion 3 con el Profesor: John Orellana

WordPress.com en Español

Blog de Noticias de la Comunidad WordPress.com

A %d blogueros les gusta esto: