SECRETARA DE EDUCACIN PBLICA DIRECCIN GENERAL DE INSTITUTOS TECNOLGICOS INSTITUTO TECNOLGICO DE MRIDA

ITM

INGENIERIA EN SISTEMAS COMPUTACIONALES

ASIGNATURA: PROGRAMACIN WEB 7SB

TAG HTML <div>

PRESENTA: CAMPOS OSORIO ISHIRA

MRIDA, YUCATN, A 20 DE SEPTIEMBRE DEL 2013

Tag HTML div

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 semntico, exceptuando que, al ser un elemento a nivel de bloque, los navegadores mostrarn un quiebre de lnea antes y despus de su contenido. Los elementos HTML div adquieren su potencial 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 ms importante, es el de establecer la distribucin o el diseo (en ingls "layout") del documento. Los elementos DIV han venido a reemplazar a la antigua forma de establecer el diseo del documento, que usaba tablas para organizar la distribucin del contenido. Estos diseos con tablas hacan uso errneo del elemento HTML table, cuyo propsito no es otro que representar informacin tabulada. El atributo "align" de este elemento ha sido formalmente desaprobado en HTML 4.01. Por lo tanto, su utilizacin ya no es recomendable. A continuacin, hay algunos ejemplos del uso del elemento HTML div, donde asigna propiedades presentacionales a otros lementos tanto a nivel de bloque como de lnea
<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 disear "layouts" sin la utilizacin de tablas.</p> <p>No olvides revisar su referencia en HTMLQuick.com.</p> </div>

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 prrafo, llamado "parrafo1". Para cambiar dinmicamente 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 ms en el tutorial "Hojas de estilo en cascada"). <p class="referencias">Este artculo est basado en el libro "Viento en los rboles" de Jhon L. Brooks</p> <p class="referencias importante">Este artculo est basado en el libro "Viento en los rboles" de Jhon L. Brooks... y es ms importante que el anterior.</p>

style (style)
Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debera estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente til, es una mejor prctica poner los atributos presentacionales en archivos externos, relacionndolos a los elementos a travs del atributo "class". De este modos, se mejora la separacin de las partes semntica y presentacional de tu documento. Puedes encontrar ms informacin acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".
<p style="color: #0000FF; font-size: 12pt">Este es un prrafo con un estilo definido.</p> <p>Y este es otro texto sin estilo.</p>

title (text)

El propsito de este atributo es proveer un ttulo para el elemento. Su valor debe ser una descripcin 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 pequeo perodo de tiempo.

Cdigo
<a title="HTMLQuick.com" href="http://www.htmlquick.com/es/">Cdigo HTML</a>

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 estndar ambos atributos pueden ser usados simultneamente como en el ejemplo a continuacin. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es vlido.

<p lang="en" xml:lang="en">This is a paragraph in English.</p> <p lang="es" xml:lang="es">Este es un prrafo en espaol.</p>

dir
Este atributo indica la direccin en que el texto del elemento debe ser ledo. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a maysculas/minsculas: 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 alineacin horizontal de su contenido. Los valores posibles, insensibles a maysculas/minsculas, 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 mrgenes.

<div align="right">Texto alineado a la derecha.</div>

Eventos
onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup

Div VS Tablas
Muchas personas cuando desean maquetar una pgina web, usan y sus respectivos sub-elementos, esto se debe a dos razones principales: 1. Historia o por costumbre: las tablas son ms antiguas que el CSS. 2. Las tablas ofrecen una manera rpida de crear una malla para maquetar un sitio web. La preferencia en el uso de tablas para maquetar una pgina versus la maquetacin con divs y css se debe incluso, a que an se tiene la percepcin de que trabajar con CSS es una tarea dificil.

Sin embargo usar CSS en reemplazo de las tablas es una tarea sencilla, y adems se deben considerar las siguientes ventajas al usar <div> y CSS:

La pgina es ms corta, ocupa menos espacio, por lo tanto carga ms rpido. La flexibilidad para hacer cambios. Los divs respetan los estilos mucho mejor que las tablas Es amigable con los motores de busqueda (semntico). Las tablas fueron creadas, para proveer informacin tabulada. Cuando se usa tablas para maquetar, se pierde la naturaleza semntica de la pgina. Compatibilidad con dispositivos para discapacitados. Los divs nos permiten separar el diseo de la lgica de la programacin

Desventajas de los divs

Los divs tienen ciertos problemas por incompatibilidad con Internet Explorer 6 Hay cosas que son muy complicadas de hacer con divs como por ejemplo que acomoden su tamao en funcin de otro div, aunque en tablas eso es automtico con divs es una pesadilla El centrado vertical en los divs es muy complicado.

Conclusin
La etiqueta div es un sustituto de las tablas para dar formato o forma general a las pginas, ya puede contener bloques de elementos y darle ciertos estilos que la table por s sola no puede. Si bien puede paracer al principio ms difcil maquetar una pgina web con div, es ms ptimo ya que los div se hicieron con ese propsito, por lo que la pgina carga ms rpido, ofrecen ms flexibilidad y es tiene ms compatibilidad con los buscadores.