Í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

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

Logo de Google


Etiquetas y atributos de los enlaces

Etiquetas Atributos Valor Descripción Ej.
<a> Define un vínculo
href URL Dirección URL a conectar. Ejemplo del uso del atributo href
hreflang código de lenguaje Especifica el lenguaje de la URL. Ejemplo para especificar el código de lenguaje a utilizar
name nombre de sección Para crear un marcapáginas dentro de un documento. Ejemplo para definir un enlace a una ubicación determinada de la página
rel alternate Especifica la relación entre el documento actual y el destino del vínculo.
designates
stylesheet
start
next Ejemplo del uso del atributo rel con el valor next
prev Ejemplo del uso del atributo rel con el valor prev
contents
index
glossary
copyright
chapter
section
subsection
apendix
help
bookmark
nofollow Ejemplo del uso del atributo rel con el valor 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
circ Usamos coords=”centro x, centro y, radio”
circle
poly Usamos coords=”x1, y1, x2, y2, .., xn, yn”
polygon
target Indica donde abrir el URL.
_blank El URL se abrirá en una nueva ventana. Ejemplo que muestra como abrir un enlace en una nueva ventana
_parent El URL se abrirá en el frameset padre. Ejemplo que muestra como abrir un enlace en un frameset padre
_self El URL se abrirá en el mismo frame donde fue apretado. Ejemplo que muestra como abrir un enlace en el mismo frame donde fue apretado
_top El URL se abriró en una ventana de tamaño completo. Ejemplo que muestra como abrir un enlace 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 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

<frameset cols=”25%,75%”> <!– Dividimos la pantalla en una columna de 25% y otra de 75%–>
<frame src=”/URL_1>
<frame src=”/URL_2>
</frameset>

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

<iframe src=”/URL del sitio que desea mostrar>

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 Ej
<frameset> Organiza ventanas múltiples.
cols pixels Asigna el número y el tamaño de las columnas. Ejemplo que divide una página en columnas por pixels
% Ejemplo que divide una página en columnas por porcentajes
* Ejemplo que divide una pígina en columnas con el uso del asterisco
rows pixels Asigna el número y el tamaño de las filas. Ejemplo que divide una página en filas por pixels
% Ejemplo que divide una página en filas por porcentajes
* Ejemplo que divide una página en filas con el uso del asterisco
<frame> Define una subventana.
frameborder 0 Especifica si se mostrará o no el borde alrededor del frame. Ejemplo del atributo frameborder sin el borde alrededor
1 Ejemplo del atributo frameborder con el borde alrededor
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. Ejemplo que deja un margen inferior y superior en el frame
marginwidth pixels Define el margen izquierdo y derecho del frame. Ejemplo que deja un magen izquierdo y derecha en el frame
name frame_name Define un nombre para el frame. Ejemplo que define un nombre para un frame
noresize noresize No le permite al usuario modificar el tamaño del frame. Ejemplo que define un frame que no puede ser modificado
scrolling yes Determina la acción de la barra de desplazamiento. Ejemplo que muestra el comportamiento de la barra de desplazamiento
no Ejemplo que muestra el comportamiento de la barra de desplazamiento
auto Ejemplo que muestra el comportamiento de la barra de desplazamiento
src URL Archivo que va a ser mostrado en el frame. Ejemplo que muestra como llamar al documento a mostrar dentro del frame
<noframes> Muestra un texto para los navegadores que no soportan frames. Ejemplo mostrando el uso de noframes para 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. Ejemplo que alínea el iframe a la izquierda
right Ejemplo que alínea el iframe a la derecha
top
middle
bottom
frameborder 0 Especifica si se mostrará o no el borde alrededor del iframe. Ejemplo que oculta el borde alrededor del iframe
1 Ejemplo que muestra el borde alrededor del iframe
height pixels Define la altura del iframe. Ejemplo que define la altura del iframe en pixels
%
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. Ejemplo que define un nombre para el iframe
scrolling yes Determina la acción de la barra de desplazamiento. Ejemplo que habilita la barra de desplazamiento para el iframe
no Ejemplo que deshabilita la barra de desplazamiento para el iframe
auto Ejemplo acciona la barra de desplazamiento segתn se necesite o no para el iframe
src URL Archivo que va a ser mostrado en el iframe. Ejemplo que muestra como llamar al documento a mostrar dentro del iframe
width pixels Define el ancho del iframe. Ejemplo que define el ancho del iframe en pixels
% Ejemplo que define el ancho del iframe en porcentaje

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.


Servidor Web

A la hora de subir nuestro sitio a la red, debemos alojar todos los archivos en un servidor web para que sean accesibles a todo el mundo.

Sube tu sitio a la Web

Si quieres que otras personas vean tú trabajo, debes publicarlo.Para publicar tú sitio, tienes que copiar tus archivos a un servidor Web.

Un servidor Web es tanto el ordenador como el programa que implementa el protocolo HTTP(Hipertext Transfer Protocol – Protocolo de transferencia de hipertexto), diseñado para transferir lo que llamamos hipertextos, páginas Web o páginas HTML.

El navegador de un cliente particular realiza una petición al servidor y éste le responde con el contenido que el cliente solicitó.

Alojamiento Web (Web Hosting)

Es el servicio que provee a los usuarios de Internet un sistema para poder almacenar cualquier contenido accesible vía Web.
Las Web Host son compañias que proporcionan espacio de un servidor a sus clientes.

Tipos de alojamientos Web

El alojamiento Web se divide en cuatro tipos:

Tipo Detalles
Gratuito Estos servicios son buenos para páginas personales, hobbies, páginas familiares, etc.
No se recomienda el servicio gratuito para los negocios o para un alto tráfico.
Por lo general no puede usar de su propio dominio y debe usar el del proveedor como por ej.: www.sitiogratis.com/usuarios/susitio.html.
No es muy profesional.
Ventajas Desventajas
  • Sin ningún costo.
  • Bueno para sitios muy pequeños.
  • Email generalmente gratis.
  • No cuenta con dominio propio.
  • Mucha publicidad en el sitio.
  • Espacio limitado.
  • Tráfico limitado.
  • Seguridad limitada.
  • Generalmente no soporta base de datos.
  • Soporte técnico limitado o nulo.
Detalles
Compartido
(Shared Hosting)
En este tipo de servicio su sitio es almacenado en un servidor muy potente junto con otros cientos de sitios.
Puede hacer uso de su propio dominio y cuenta con gran cantidad de software a su disposición.
Es el tipo de alojamiento más común y usado en el mundo.
Ventajas Desventajas
  • Servicio económico.
  • Ideal para pequeños y medianos clientes.
  • Varias opciones de software.
  • Uso de dominio propio.
  • Buen soporte técnico.
  • Restricción el volumen de tráfico.
  • Restricción en el soporte de base de datos.
  • Restricción en el soporte de software.
Detalles
Servidor dedicado Se refiere al alojamiento Web en el cual el cliente alquila o compra un ordenador completo, y por lo tanto tiene el control y la responsabilidad de administrarlo.
El cuidado físico del equipo y de la conectividad a Internet es tarea de la empresa de alojamiento.
Ventajas Desventajas
  • Bueno para grandes espresas.
  • Bueno para alto tráfico.
  • Uso de múltiples dominios.
  • Herramientas avanzadas de email.
  • Soporta potentes bases de datos.
  • Soporte sín límite de software.
  • Alto costo.
  • Requiere de habilidades en el tema.
Detalles
Colocación El cliente compra su propio equipo y lo coloca en la empresa que presta el servicio.
La empresa de Host le suministra la corriente y la conexión a Internet.
Es como tener su propio sevidor en la oficina solo que se encuentra en un lugar más apropiado para eso.
Ventajas Desventajas
  • Gran ancho de banda.
  • Alto funcionamiento sín interrupciones.
  • Mucha seguridad.
  • Opciones de software sin límites.
  • Alto costo.
  • Requiere de habilidades en el tema.
  • Complicado de configurar y depurar.

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.

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.

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

Atributos Valor Descripción Soportado por: DTD Ej.
align left Desaprobado
Especifica la alineación horizontal del contenido del elemento div.
Soportado por el navegador Internet Explorer Soportado por el navegador Firefox Soportado por el navegador Google Chrome Soportado por el navegador Opera Soportado por el navegador Safari TF
center
right
justify

Atributos Estándard de la Etiqueta <div>

Estos atributos son soportados por todos los navegadores

Logo de Internet Explorer : Internet Explorer     Logo de Firefox : Firefox     Logo de Google Chrome : Google Chrome     Logo de Opera : Opera     Logo de Safari : 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 tright).
  • rtl : De derecha a izquierda (right tleft).
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

Logo de Internet Explorer : Internet Explorer     Logo de Firefox : Firefox     Logo de Google Chrome : Google Chrome     Logo de Opera : Opera     Logo de Safari : 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.

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.

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!
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…


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.

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.


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.