HTML

Índice de los atributos de HTML

Completo listado de todos los atributos de cada etiqueta HTML.

Los Atributos

Se expone en esta página una tabla con todos los atributos de HTML y a su lado el elemento al que corresponde con un enlace a la página específica del mismo.

La columna “Des” con una letra “D” nos indica que el atributo está desaprobado.

La columna “DTD” con la letra “L” se refiere a atributos de los elementos que no aparecen en documentos con marcos o frames. La letra “F” se refiere a atributos de los elementos incluidos en documentos con marcos.

La última columna nos da una pequeña descripción de cada atributo.

Para una mejor comprensión de cada atributo, presione sobre el nombre del elemento deseado.

Leyenda:

D: Desaprobado
L: Loose DTD (Definición del Tipo de Documento Transicional)
F: Frameset DTD (Definición del Tipo de Documento con Marcos)

Nombre	Elementos Relacionados	Des.	DTD	Descripción
abbr	td, th			Abreviatura de celda de cabecera
accept-charset	form			Lista de codificaciones de caracteres soportados
accept	form, input			Lista de tipos MIME para subir ficheros
accesskey	a, area, button, input, label, legend, textarea			Carácter de la tecla de accesibilidad
action	form			Procesador de formulario en servidor
align	caption	D	L	Título de una tabla
align	applet, iframe, img, input, object	D	L	Alineación vertical u horizontal
align	legend	D	L	Leyenda de un grupo de campos
align	table	D	L	Posición de la tabla respecto a la ventana
align	hr	D	L
align	div, h1, h2, h3, h4, h5, h6, p	D	L	Alineación de texto
align	col, colgroup, tbody, td, tfoot, th, thead, tr
alink	body	D	L	Color de vínculos seleccionados
alt	applet	D	L	Descripción corta
alt	area, img			Descripción corta
alt	input			Descripción corta
archive	applet	D	L	Lista de archivos separados por comas
archive	object			Lista de URIs separados por espacios
axis	td, th			Lista de cabeceras relacionadas separadas por comas
background	body	D	L	Fichero de textura de fondo del documento
bgcolor	table	D	L	Color de fondo de las celdas
bgcolor	tr	D	L	Color de fondo de una fila
bgcolor	td, th	D	L	Color de fondo de una celda
bgcolor	body	D	L	Color de fondo del documento
border	table			Controla la anchura del marco que rodea una tabla
border	img, object	D	L	Anchura del borde de un vínculo
cellpadding	table			Espacio dentro de celdas
cellspacing	table			Espacio entre celdas
char	col, colgroup, tbody, td, tfoot, th, thead, tr			Carácter de alineación, por ej.: char=’:’
charoff	col, colgroup, tbody, td, tfoot, th, thead, tr			offset para carácter de alineación
charset	a, link, script			Codificación de caracteres del recurso vinculado
checked	input			Para radiobotones y casillas de verificación
cite	blockquote, q			URI del documento o mensaje fuente
cite	del, ins			Información sobre la razón del cambio
class	Todos los elementos excepto, base, basefont, head, html, meta, param, script, style, title			Lista de clases separadas por espacios
classid	object			Identifica una implementación
clear	br	D	L	Control del flujo de texto
code	applet	D	L	Fichero de clase applet
codebase	object			URI base para classid, data, archive
codebase	applet	D	L	URI base opcional para applet
codetype	object			Tipo de contenido para code
color	basefont, font	D	L	Color de texto
cols	frameset		F	Lista de longitudes, por defecto: 100%(1 col)
cols	textarea
colspan	td, th			Número de columnas abarcado por celda
compact	dir, dl, menu, ol, ul	D	L	Espacio reducido entre objetos
content	meta			Información asociada
coords	area			Lista de longitudes separadas por coma
coords	a			Para usar con mapas de ímágenes en el cliente
data	object			Referencia a datos del objeto
datetime	del, ins			Fecha y hora del cambio
declare	object			Declara el objeto pero no lo crea
defer	script			El AU puede retrasar la ejecución del script
dir	Todos los elementos excepto applet, base, basefont, bdo, br, frame, frameset, iframe, param, script			Dirección de texto débil/neutral
dir	bdo			Direccionalidad
disabled	button, input, optgroup, option, select, textarea			No disponible en este contexto
enctype	form
face	basefont, font	D	L	Lista de nombres de fuentes separados por coma
for	label			Empareja según valor de campo ID
frame	table			Qué partes del marco representar
frameborder	frame, iframe		F	¿pintar bordes del marco?
headers	td, th			Lista de id’s de celdas de encabezado
height	iframe		L	Altura del marco
height	td, th	D	L	Altura de una celda
height	img, object			Nueva altura
height	applet	D	L	Altura inicial
href	a, area, link			URI del recurso vinculado
href	base			URI que actúa como URI base
hreflang	a, link			Código de idioma
hspace	applet, img, object	D	L	Espacio de relleno horizontal
http-equiv	meta			Nombre de encabezado HTTP de respuesta
id	Todos los elementos, excepto base, head, html, meta, script, style, title			id único en todo el documento
ismap	img, input			Usar mapa de imágenes en servidor
label	option			Para usar en menúes jerárquicos
label	optgroup			Para usar en menúes jerárquicos
lang	Todos los elementos, excepto applet, base, basefont, br, frame, frameset, iframe, param, script			Código de idioma
language	script	D	L	Nombre del lenguaje predefinido de scripts
link	body	D	L	Color de los vínculos
longdesc	img			Vínculo a descripción larga (complemente a alt)
longdesc	frame, iframe		F	Vínculo a descripción larga (complemente a title)
marginheight	frame, iframe		F	Altura del margen en píxeles
marginwidth	frame, iframe		F	Anchura del margen en pixeles
maxlength	input			Máximo de caracteres para campos de texto
media	style			Diseñado para usar con estos medios
media	link			Para representar en estos medios
method	form			Método HTTP usado para enviar el formulario
multiple	select			Por defecto es selección simple
name	button, textarea
name	applet	D	L	Permite a loa applets encontrarse entre sí
name	select			Nombre del campo
name	form			Nombre del formulario, para los scripts
name	frame, iframe		F	Nombre del marco, para designarlo como destino
name	img			Nombre de la imagen, para los scripts
name	a			Vínculo destino con nombre
name	input, object			Enviar como parte del formulario
name	map			Para su referencia por usemap
name	param			Nombre de propiedad
name	meta			Nombre de metainformación
nohref	area			Esta región no tiene acción
noresize	frame		F	¿Permitir a los usuarios redimensionar marcos?
noshade	hr	D	L
nowrap	td, th	D	L	Suprimir ajuste automático de líneas
object	applet	D	L	Fichero applet serializado
onblur	a, area, button, input, label, select, textarea			El elemento perdió el foco
onchange	input, select, textarea			El valor del elemento fue modificado
onclick	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			Se hizo clic con un botón del apuntador
ondblclick	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			Se hizo doble clic con un botón del apuntador
onfocus	a, area, button, input, label, select, textarea			El foco se dirigió hacia el elemento
onkeydown	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			Se pulsó una tecla
onkeypress	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			Una tecla fue pulsada y soltada
onkeyup	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			Una tecla fue soltada
onload	frameset		F	Todos los marcos fueron cargados
onload	body			El documento fue cargado
onmousedown	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			Se pulsó un botón del apuntador
onmousemove	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			El apuntador se movió al interior del elemento
onmouseout	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			El apuntador se quitó de encima del elemento
onmouseover	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			El apuntador se movió encima del elemento
onmouseup	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title			Se soltó un botón del apuntador
onreset	form			El formulario fue reinicializado
onselect	input, textarea			Se seleccionó parte de un texto
onsubmit	form			El formulario fue enviado
onunload	frameset		F	Se quitaron todos los marcos
onunload	body			El documento ha sido quitado
profile	head			Diccionario con nombres de metainformación
prompt	isindex	D	L	Mensaje indicador
readonly	textarea
readonly	input			Para texto y contraseñas
rel	a, link			Tipos de vínculos directos
rev	a, link			Tipos de vínculos inversos
rows	frameset		F	Lista de longitudes por defecto: 100%(1 fila)
rows	textarea
rowspan	td, th			Número de filas abarcado por la celda
rules	table			Líneas de división entre filas y columnas
scheme	meta			Seleccionar forma de contenido
scope	td, th			Campo de aplicación de una celda de cabecera
scrolling	frame, iframe		F	Barra de desplazamiento o no
selected	option
shape	area			Controla la interpretación de las coordenadas
shape	a			Para usar con mapas de imágenes en el cliente
size	hr	D	L
size	font	D	L	[+/-]nn p.ej.: size=”+1″, size=”4″
size	input			Específico de cada tipo de campo
size	basefont	D	L	Tamaño de fuente base para elementos “font”
size	select			Filas visibles
span	col			Los atributos de “col” afectan a “n” columnas
span	colgroup			Número de columnas por defecto en el grupo
src	script			URI del script externo
src	input			Para campos con imágenes
src	frame, iframe		F	Fuente del contenido del marco
src	img			URI de la imagen a incluir
standby	object			Mensaje a mostrar mientras se carga
start	ol	D	L	Número inicial de la secuencia
style	Todos los elementos, excepto base, basefont, head, html, meta, param, script, style, title			Información de estilo asociada
summary	table			Propósito/estructura para salida de voz
tabindex	a, area, button, input, object, select, textarea			Posición en el orden de tabulación
target	a, area, base, form, link		L	Representar en este marco
text	body	D	L	Color del texto del documento
title	Todos los elementos, excepto base, basefont, head, html, meta, param, script, title			Título consultivo
type	a, link			Tipo de contenido consultivo
type	object			Tipo de contenido para los datos
type	param			Tipo de contenido para el valor cuando valuetype=ref
type	script			Tipo de contenido para lenguaje de scripts
type	style			Tipo de contenido para lenguaje de estilos
type	input			Qué tipo de control hace falta
type	li	D	L	Estilo de objeto de lista
type	ol	D	L	Estilo de numeración
type	ul	D	L	Estilo de gráfico de lista
type	button			Para usar como botón de formulario
usemap	img, input, object			Usar mapa de imágenes en el cliente
valign	col, colgroup, tbody, td, tfoot, th, thead, tr			Alineción vertical en celdas
value	input			Especificar para radiobotones y casillas de verificación
value	option			Por defecto el contenido del elemento
value	param			Valor de propiedad
value	button			Se manda al servidor cuando se envía
value	li	D	L	Reinicializar número de secuencia
valuetype	param			Cómo interpretar el valor
version	html	D	L	Constante
vlink	body	D	L	Color de los vínculos visitados
vspace	applet, img, object	D	L	Espacio vertical
width	hr	D	L
width	iframe		L	Anchura del marco
width	img, object			Nueva anchura
width	table			Anchura de la tabla
width	td, th	D	L	Anchura de la celda
width	applet	D	L	Anchura inicial
width	col			Especificación de la achura de la columna
width	colgroup			Anchura por defecto de los COLs contenidos
width	pre	D	L

HTML

Enlaces en HTML

La propiedad más importante de Internet, es la posibilidad de conectarse los unos con los otros.

Los Enlaces o Links

Los enlaces o links(en Inglés) nos permiten conectarnos con otros documentos:

una imagen
un video
un archivo de sonido
sitios en la web(otra página web)
mandar un email

Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor(ancla).

La etiqueta <a> tiene como cierre </a>.

Sintaxis

<a atributo=”valor“>Texto del enlace</a>

Ejemplo
Vamos a crear un enlace hacia la home de Virtualnauta.com
Código <body> <a href=”/http://www.virtualnauta.com/“>La home de Virtualnauta</a> </body>
Resultado La home de Virtualnauta

EL atributo target

Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace.

Ejemplo
Vamos a abrir el documento en una nueva página del navegador.
Código <body> <a href=”http://www.vitualnauta.com/” target=”_blank“>La home de Virtualnauta</a> </body>
Resultado La home de Virtualnauta

EL atributo name

Este atributo se usa para definir una determinada ubicación dentro de la página.
Supongamos que definimos un destino de vínculo llamado “destino-uno” en el archivo “uno.html”.

Sintaxis

…texto antes del destino de vínculo…
<a name=”destino-uno“>Capítulo 1</a> <!– Definimos un destino en el Capítulo 1 –>
…texto después del destino de vínculo…

Y en otra parte de la página, del mismo sitio o de otro sitio, creamos un enlace a Capítulo 1. Para ello utilizamos el signo # seguido del nombre del enlace.

<a href=”http://www.misitio.com/uno.html#destino-uno“>Ir al Capítulo 1</a>

O en caso que el enlace esté definido en el mismo documento:

<a href=”/#destino-uno“>Ir al Capítulo 1</a>

Creando un enlace a un email

Se utiliza en caso que queramos que un enlace mande un email.
En el momento que presionamos dicho link se abrirá automaticamente el programa de email que tenemos definido por defecto.

Ejemplo
Código <body> <a href=”/mailto: alguien@gmail.com“>Mandar email</a> </body>
Resultado Mandar email

mailto: nos indica la dirección email a la que va dirigida, en este ejemplo: alguien@gmail.com.

Un enlace a partir de una imagen

Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto.

Ejemplo
Código <body> <a href=”http://www.google.com/”><img src=”/../graficos/google.gif”></a> </body>
Resultado

Etiquetas y atributos de los enlaces

Etiquetas	Atributos	Valor	Descripción
<a>			Define un vínculo
	href	URL	Dirección URL a conectar.
	hreflang	código de lenguaje	Especifica el lenguaje de la URL.
	name	nombre de sección	Para crear un marcapáginas dentro de un documento.
	rel	alternate	Especifica la relación entre el documento actual y el destino del vínculo.
		designates
		stylesheet
		start
		next
		prev
		contents
		index
		glossary
		copyright
		chapter
		section
		subsection
		apendix
		help
		bookmark
		nofollow
	rev	alternate	Especifica la relación entre el destino del vínculo y el documento actual(vínculo inverso).
		designates
		stylesheet
		start
		next
		prev
		contents
		index
		glossary
		copyright
		chapter
		section
		subsection
		apendix
		help
		bookmark
	coords	coordenadas	Especifica las coordenadas de la superficie que contiene el enlace.
	shape		Define la forma del área.
		rect	Usamos coords=”izquierda, arriba, derecha, abajo”
		rectangle	Usamos coords=”izquierda, arriba, derecha, abajo”
		circ	Usamos coords=”centro x, centro y, radio”
		circle	Usamos coords=”centro x, centro y, radio”
		poly	Usamos coords=”x1, y1, x2, y2, .., xn, yn”
		polygon	Usamos coords=”x1, y1, x2, y2, .., xn, yn”
	target		Indica donde abrir el URL.
		_blank	El URL se abrirá en una nueva ventana.
		_parent	El URL se abrirá en el frameset padre.
		_self	El URL se abrirá en el mismo frame donde fue apretado.
		_top	El URL se abriró en una ventana de tamaño completo.
	type	tipo de contenido	Especifica el tipo de contenido a conectar.

Atributos estándard

id, class, title, style, dir, lang, tabindex, accesskey

Si desea una descripción completa, diríjase a: atributos estándard.

Eventos intrínsecos

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Si desea una descripción completa, diríjase a: eventos intrínsecos.

Frames,HTML

Frames en HTML

Dividimos la página en partes más pequeñas y en cada una de ellas visualizamos documentos diferentes.

Los Frames

Los frames(marcos en español) permiten a los autores presentar documentos con vistas múltiples.

Esto posibilita mantener cierta información visible mientras otras vistas se desplazan o se sustituyen.

Cada vista es un documento independiente de los otros.

La etiqueta frameset

La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes marcos y a cada uno asignarle una medida distinta.
Cada frameset define un grupo de filas y columnas.

Sintaxis

<frameset rows=”valor1, valor2, valor_n” cols=”valor3, valor4, valor_n“>
…el resto de la definición…
</frameset>

Los posibles valores para definir el tamaño de las filas y de las columnas

pixels | % | *

La etiqueta frame

La etiqueta <frame> asigna que documento colocaremos en cada marco.

Sintaxis

Nota: La etiqueta <frame> no debe llevar etiqueta de cierre

La etiqueta noframes

La etiqueta <noframes> muestra un texto para los navegadores que no soportan frames.

<noframes> se coloca dentro de la etiqueta frameset
si el navegador soporta frames, el texto del <noframes> no se mostrará
si usamos la etiqueta <noframes> el texto de la misma debe ir entre las etiquetas <body> </body>

<frameset rows=”25%,75%”>
<noframes>
<body>
Su navegador no soporta frames
</body>
</noframes>
<frame src=”/frame1.htm”>
<frame src=”/frame2.htm”>
</frameset>

La etiqueta iframe

La etiqueta <iframe> se usa para crear un frame en línea que contiene otro documento.
El iframe puedo mostrar una ventana que contenga otra página Web dentro de la página que estamos diseñando

Sintaxis

Ejemplo

Código

<iframe src=”/http://www.virtualnauta.com“ width=”100%”>
</iframe>

En este ejemplo podemos observar que la ventana del resultado nos está mostrando la página principal de Virtualnauta.com.

Etiquetas y atributos de los marcos

Etiquetas	Atributos	Valor	Descripción
<frameset>			Organiza ventanas múltiples.
	cols	pixels	Asigna el número y el tamaño de las columnas.
		%
		*
	rows	pixels	Asigna el número y el tamaño de las filas.
		%
		*
<frame>			Define una subventana.
	frameborder	0	Especifica si se mostrará o no el borde alrededor del frame.
	frameborder	1
	longdesc	URL	URL con una larga descripción del contenido del frame (se usa para navegadores que no soportan frames).
	marginheight	pixels	Define el margen superior e inferior del frame.
	marginwidth	pixels	Define el margen izquierdo y derecho del frame.
	name	frame_name	Define un nombre para el frame.
	noresize	noresize	No le permite al usuario modificar el tamaño del frame.
	scrolling	yes	Determina la acción de la barra de desplazamiento.
		no
		auto
	src	URL	Archivo que va a ser mostrado en el frame.
<noframes>			Muestra un texto para los navegadores que no soportan frames.
<iframe>			Crea un frame en línea que contiene otro documento.
	align	left	Alineación del iframe con respecto al texto.
		right
		top
		middle
		bottom
	frameborder	0	Especifica si se mostrará o no el borde alrededor del iframe.
	frameborder	1
	height	pixels	Define la altura del iframe.
	height	%	Define la altura del iframe.
	longdesc	URL	URL con una larga descripción del contenido del iframe (se usa para navegadores que no soportan frames).
	marginheight	pixels	Define el margen superior e inferior del iframe.
	marginwidth	pixels	Define el margen izquierdo y el derecho del iframe.
	name	nombre	Define un nombre para el iframe.
	scrolling	yes	Determina la acción de la barra de desplazamiento.
		no
		auto
	src	URL	Archivo que va a ser mostrado en el iframe.
	width	pixels	Define el ancho del iframe.
	width	%	Define el ancho del iframe.

Atributos estándard

id, class, title, style, lang

Si deseas una descripción completa, dirígete a: atributos estándard.

Eventos intrínsecos

onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Si deseas una descripción completa, dirígete a: eventos intrínsecos.

HTML,HTTP

Mensajes de status HTTP

Todos los mensajes de error, redirección, operación exitosa e información.

Los Mensajes

Hay veces que solicitamos presentar una página por medio de un enlace al servidor web y por algún motivo ocurre un error.

Presentamos aquí es una lista de los mensajes más comunes que puedes recibir.

1xx Mensajes de información

Mensaje	Descripción
100 Continúa	Solo una parte de lo solicitado ha sido recibido por el servidor, pero a pesar de eso no ha sido rechazado. El cliente puede seguir con lo solicitado.
101 Cambió de protocolo	El servidor cambió de protocolo.

2xx Operación exitosa

Mensaje	Descripción
200 OK	La solicitud ha sido exitosa.
201 Creado	Lo solicitado se ha completado y un nuevo recurso ha sido creado.
202 Aceptado	La solicitud es aceptada para procesamiento, pero el mismo no esta completo.
203 Información no oficial
204 Sin contenido
205 Contenido para recargar
206 Contenido parcial

3xx Redirección hacia otro URL

Mensaje	Descripción
300 Múltiples posibilidades	Una lista de vínculos. El usuario puede seleccionar un vínculo. Máximo 5 direcciones.
301 Mudado permanentemente	La página solicitada ha sido movida a un nuevo URL.
302 Encontrado	La página solicitada ha sido movida temporalmente a un nuevo URL.
303 Vea otros	La página solicitada puede ser encontrada bajo un diferente URL.
304 No modificado
305 Utilice un proxy
306 Sin uso
307 Redirección temporal	La página solicitada ha sido movida temporalmente a un nuevo URL.

4xx Error por parte del cliente

Mensaje	Descripción
400 Solicitud incorrecta	El servidor no entiende el requerimiento.
401 No autorizado	La página solicitada requiere de un nombre y una contraseña.
402 Pago requerido	Usted no puede usar este código todavía.
403 Prohibido	El acceso a la página solicitada está prohibido.
404 No encontrado	El servidor no encuentra la página solicitada.
405 Método no permitido	El método especificado en el requerimiento no está permitido.
406 No aceptable	El servidor solo puede generar una respuesta, la cual no es aceptada por el cliente.
407 Proxy requerido	Usted debe autenticar con el servidor proxy antes que la solicitud sea atendida.
408 Tiempo de espera agotado	La solicitud demoró más tiempo de lo que el servidor está preparado a esperar.
409 Conflicto	La solicitud no podrá ser completada por un conflicto.
410 Ya no disponible	La página solicitada ya no se encuentra disponible.
411 Requiere longitud	El “Content-length” no está definido. El servidor no podrá aceptar el requerimiento sin el.
412 Falló precondición	La precondición dada en la solicitud evaluada, falló en el servidor.
413 Entidad de solicitud demasiado larga	El servidor no podrá aceptar la solicitud porque la entidad requerida es demasiado larga.
414 URL de solicitud demasiado largo	El servidor no podrá aceptar la solicitud, porque el URL es demasiado largo.
415 Tipo de medio no soportado	El servidor no acepta la solicitud porque el tipo de medio no es soportado.
416 Rango solicitado no disponible
417 Falló expectativa

5xx Error por parte del servidor

Mensaje	Descripción
500 Error interno	El requerimiento no ha sido completado. El servidor encontró una condición inesperada.
501 No implementado	La solicitud no ha sido completada. El servidor no ha soportado la funcionalidad requerida.
502 Pasarela incorrecta	La solicitud no ha sido completada. El servidor recibió una respuesta invalida de un servidor externo.
503 Servicio no disponible	El requerimiento no ha sido completado. El servidor está temporalmente sobrecargado o de baja.
504 Tiempo de espera en la pasarela agotado
505 Versión de HTTP no soportada	El servidor no soporta la versión de HTTP.

HTML,Tags

Etiqueta

Definición

La etiqueta <div> se utiliza para definir una sección dentro del documento. Esta etiqueta se usa comunmente para agrupar un bloque de elementos, para luego añadirle un estilo determinado.

Ejemplo
Código <div style=”color:red”> <h3>Grupo 1</h3> <p>Este bloque tiene definido el texto de color rojo.</p> </div> <div style=”color:green”> <h3>Grupo 2</h3> <p>Este bloque tiene definido el texto de color verde.</p> </div>	Resultado Grupo 1 Este bloque tiene definido el texto de color rojo. Grupo 2 Este bloque tiene definido el texto de color verde.

Posibles Atributos de la Etiqueta <div>

Referencias:
DTD nos indica en que DTD se permite cada atributo. S=Strict, T=Transitional, and F=Frameset.

: Internet Explorer : Firefox : Google Chrome : Opera : Safari

Atributos	Valor	Descripción	DTD
align	left	Desaprobado Especifica la alineación horizontal del contenido del elemento div.	TF
	center
	right
	justify

Atributos Estándard de la Etiqueta <div>

Estos atributos son soportados por todos los navegadores

: Internet Explorer : Firefox : Google Chrome : Opera : Safari

Atributos	Valor	Descripción
class	nombre de la clase	Asigna un nombre de clase. El atributo class actúa: Como selector para las hojas de estilo(CSS), cuando se asigna información de estilo a un conjunto de elementos. Para procesos generales por parte del usuario.
id	nombre	Asigna un nombre a un elemento. El atributo id actúa: Como selector para las hojas de estilo(CSS). Como vínculo destino para vínculos de hipertexto. Como medio de hacer referencia a un elemento en particular desde un script. Como nombre de un elemento object declarado. Para procesos generales por parte del usuario.
style	estilo	Este atributo especifica información de estilo para el elemento actual.
title	nombre	Este atributo ofrece información consultiva sobre el elemento para el cual se establece.
dir	ltr o rtl	Especifica la dirección del texto. Valores posibles: ltr : De izquierda a derecha (left to right). rtl : De derecha a izquierda (right to left).
lang	código de lenguaje	Especifica el idioma base de los valores de los atributos y del texto contenido en un elemento. El atributo lang es útil para: Ayudar a los motores de búsqueda. Ayudar a los sintetizadores de voz. Ayudar al agente de usuario a hacer decisiones sobre separación de palabras, ligaduras, y espaciado. Ayudar a los verificadores de ortografía y gramática.

Eventos de la Etiqueta <div>

Los eventos son soportados por todos los navegadores

: Internet Explorer : Firefox : Google Chrome : Opera : Safari

Evento	Valor	Descripción
onkeydown	script	El script corre cuando se pulsa una tecla.
onkeypress	script	El script corre cuando se pulsa y se suelta una tecla.
onkeyup	script	El script corre cuando una tecla se suelta.
onclick	script	El script corre cuando se hace clic con el mouse.
ondblclick	script	El script corre cuando se hace doble clic con el mouse.
onmousedown	script	El script corre cuando el botón del mouse se pulsa cuando está encima de un elemento.
onmousemove	script	El script corre cuando el mouse se mueve mientras está sobre un elemento.
onmouseout	script	El script corre cuando el mouse se aparta de un elemento.
onmouseover	script	El script corre cuando el mouse se sitúa sobre un elemento.
onmouseup	script	El script corre cuando el botón del mouse se suelta cuando está encima de un elemento.

HTML

Tutorial de HTML

HTML Tutorial

En este tutorial encontrará la manera más fácil y completa de aprender HTML y al cabo de un tiempo podrá diseñar su propio sitio, incluso puedes crear una aplicación de citas como contactosfogosas.com.

Conozca todos los comandos de este simple lenguaje y pase a ser protagonista de la web.

¡¡¡Disfrútelo!!!

¡¡¡Comience a estudiar HTML ahora!!!

HTML Ejemplos

¡Aprenda de ejemplos!.
Un grán surtido de ejemplos que le ayudarán a comprender mejor HTML. Podrá ver en cada uno de ellos el código y el resultado del mismo, lo que facilitará la comprensión de lo estudiado.

Grán surtido de ejemplos de HTML

HTML Examen

¿Cuánto sabe usted de HTML?

¡Pruebese a si mismo!

Verifique sus conocimientos con este examen de 20 preguntas.

¡Suerte en el examen!

HTML Guías de referencia

Dentro de las guías de referencia puede encontrar todos los elementos, etiquetas, atributos, colores, entidades con una pequeña descripción de cada uno. Las referencias de HTML están ordenadas en tablas permitiendo un fácil acceso.

Completas guías de referencia de HTML

Artículos

Gana Dinero en Internet

Es muy cierto que se puede hacer dinero en línea y hay muchas personas que están cosechando los beneficios de hacerlo. Existen miles de personas que se ganan la vida con sus computadoras, e incluso más que eso… continúe leyendo…

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo…

HTML

Eventos intrínsecos de HTML

Completo listado de todos los eventos que activan diferentes scripts.

Los Eventos

Esta es una lista de los eventos intrínsecos que pueden ser insertados dentro de ciertas etiquetas de HTML.

Los eventos pueden ser, por ejemplo, scripts que se activan al realizar una determinada acción por parte del usuario del sitio.

La tabla nos muestra los eventos, el elemento que lo utiliza y una pequeña descripción del mismo.

Eventos	Usar con	Descripción
onload	frameset body	El script corre cuando el documento es cargado.
onunload	frameset body	El script corre cuando el usuario elimina un documento de una ventana o marco.
onchange	input select textarea	El script corre cuando el valor de entrada ha sido modificado.
onsubmit	form	El script corre cuando se envía un formulario.
onreset	form	El script corre cuando se reinicializa un formulario.
onselect	input textarea	El script corre cuando el usuario selecciona texto de un campo de texto.
onblur	a area button input label select textarea	El script corre cuando el elemento pierde el foco ya sea con el mouse o por navegación con tabulador.
onfocus	a area button input label select textarea	El script corre cuando el foco se dirige hacia un elemento, ya sea con el mouse o por navegación con tabulador.
onkeydown	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando se pulsa una tecla.
onkeypress	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando se pulsa y se suelta una tecla.
onkeyup	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando una tecla se suelta.
onclick	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando se hace clic con el mouse.
ondblclick	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando se hace doble clic con el mouse.
onmousedown	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando el botón del mouse se pulsa cuando está encima de un elemento.
onmousemove	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando el mouse se mueve mientras está sobre un elemento.
onmouseout	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando el mouse se aparta de un elemento.
onmouseover	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando el mouse se sitúa sobre un elemento.
onmouseup	Todos los elementos excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title	El script corre cuando el botón del mouse se suelta cuando está encima de un elemento.

HTML

Diseño de Páginas Web

Es la forma en que componemos nuestra página web. La ubicación de cada elemento en su lugar.

Disposición de los elementos de una página

La disposición del contenido de nuestra página es importante para que esta sea más simple de navegar o más atractiva al usuario.

La división de las diferentes secciones de una página(logo, menú, banners, publicidad o el contenido mismo) se puede definir por medio de este sistema.

Muchas veces deseamos que el contenido de nuestra página esté dividido en 2 o más columnas.Otras veces queremos insertar una imagen en algún lugar determinado de la página. Para ello nos valemos del uso de las tablas, sin bordes y definiendo los diferentes anchos de cada una de las columnas.

Otro sistema más efectivo, es el uso de estilos para la disposición de los diferentes elementos dentro de la página. Pero ese tema lo estudiaremos en el tutorial de CSS.

Usando tablas para diseñar una página Web

El uso más común es el de las tablas para dar forma a la disposición de los textos en la página.

Esta sección de la página está diseñada en dos columnas.

Para lograr este efecto debemos usar la etiqueta <table> y dividir el texto en 2 columnas.

El secreto está en usar la tabla sin bordes y agregarle un pequeño valor a cellpadding.

Se puede diseñar mucho más de dos columnas.

No importa cuanto texto le agregue a la página, siempre estará dentro de los bordes de la columna.

Código del ejemplo

<html>
<head>
<title>Disposición del texto</title>
</head>

<body>
<table width=”100%” border=”0″ cellpadding=”5″>
<tr>
<td>Texto de la primera columna.</td>
<td>Texto de la segunda columna.</td>
</tr>
</table>
</body>
</html>

Disposición de una página estándard

Este es un pequeño ejemplo de como diseñar una página estándard.
Por supuesto que a cada sección se le puede agregar un color distinto o gráfica que le de vida a la página.

Acá ubicamos el logo o un banner

Menú

Vínculo 1

Vínculo 2

Vínculo 3

Acá va el contenido

Código del ejemplo

<table width="100%" height="250px" cellspacing="1px" border="1px">
   <tr height="50px">
      <td colspan="2px">
         <table title="Banner" border="0">
            <tr>
               <td>Acá ubicamos el logo o un banner</td>
            </tr>
         </table>
      </td>
   </tr>
   <tr height="200px">
      <td>
         <table title="Menu" border="0" width="100px">
            <tr><td>Menú</td></tr>
            <tr><td>Vínculo 1</td></tr>
            <tr><td>Vínculo 2</td></tr>
            <tr><td>Vínculo 3</td></tr>
         </table>
      </td>
      <td>
         <table title="Contenido" border="0" width="400px">
            <tr>
               <td>Acá va el contenido</td>
            </tr>
         </table>
     </td>
  </tr>
</table>

Explicación del ejemplo

La primera etiqueta <table> define el tamaño general de la página.
La segunda etiqueta <table> define la sección superior de la página, donde se coloca generalmente el logo o un banner.
La tercera sección está definida por la etiqueta <table> y en el ejemplo colocamos el menú. La última etiqueta <table> nos define el sector que lleva todo el contenido de la página.

Nota: por supuesto que cada una de las secciones se puede seguir subdividiendo cuantas veces sea necesario.

HTML

Elementos y etiquetas de HTML

Las etiquetas HTML son las encargadas de dar forma a nuestro sitio.

Los elementos

Los elementos son declaraciones para visualizar o dar forma a una página Web.

Las etiquetas

Las etiquetas(en inglés: tags) son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido.

Reglas básicas

Las etiquetas están encerradas entre los signos “<” y “>“.
Generalmente vienen en pares <p> y <⁄p>.
La primera es de apertura y la segunda de cierre.
El texto que se encuentra entre dos etiquetas es el contenido del elemento.
Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>.

Etiquetas de HTML

Veamos un ejemplo.

<html>
<head>
<title>Una página Web</title>
</head>
<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>
</html>

Esta es una etiqueta HTML:

<b>Este texto es en negrita.</b>

El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita).

El contenido de dicho elemento es: Este texto es en negrita.

El fin del elemento HTML es con la etiqueta de cierre </b>.

Otro elemento HTML en el ejemplo es:

<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>

EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento).

El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita</b>.

El fin del elemento HTML es con la etiqueta de cierre </body>.

Qué son los atributos de las etiquetas?

Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.

Los atributos siempre van con la estructura: nombre=“valor”.
Los atributos siempre van en la etiqueta de apertura.
Los valores siempre hay que ponerlos entre comillas.

Un ejemplo de los atributos sería:

Ejemplo
Código <body bgcolor=“#FFFF00”> Hola a todos. <b>Este texto es en negrita</b> </body>	Resultado Hola a todos. Este texto es en negrita

En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el valor “#FFFF00”(representa el color amarillo en hexadecimal).

Esto quiere decir que el color de fondo de la página será amarillo.

Un consejo con respecto al uso de minúsculas.

Si bien HTML acepta tanto etiquetas en mayúscula <B> como en minúscula <b>, el World Wide Web Consortium (W3C) recomienda el uso de minúsculas. Además XHTML (la siguiente versión de HTML) acepta solo minúsculas.

Es por eso que recomendamos acostumbrarse a usar minúsculas cuando escribas tus códigos HTML.

Category: HTML

Los Atributos

Leyenda:

Los Enlaces o Links

Sintaxis

Ejemplo

EL atributo target

Ejemplo

EL atributo name

Sintaxis

Creando un enlace a un email

Ejemplo

Un enlace a partir de una imagen

Ejemplo

Etiquetas y atributos de los enlaces

Atributos estándard

Eventos intrínsecos

La etiqueta frameset

Sintaxis

La etiqueta frame

Sintaxis

La etiqueta iframe

Sintaxis

Ejemplo

Etiquetas y atributos de los marcos

Atributos estándard

Eventos intrínsecos

1xx Mensajes de información

3xx Redirección hacia otro URL

4xx Error por parte del cliente

5xx Error por parte del servidor

Ejemplo

Grupo 1

Grupo 2

Posibles Atributos de la Etiqueta <div>

Atributos Estándard de la Etiqueta <div>

Eventos de la Etiqueta <div>

¡¡¡Disfrútelo!!!

Gana Dinero en Internet

Los mejores 10 hostings

Usando tablas para diseñar una página Web

Disposición de una página estándard

Código del ejemplo

Explicación del ejemplo

Las etiquetas

Reglas básicas

Etiquetas de HTML

Qué son los atributos de las etiquetas?

Ejemplo

Un consejo con respecto al uso de minúsculas.