Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
HTML está compuesto por un conjunto de elementos que son la base de su estructura. Los
elementos están diseñados para proveer herramientas a los autores y proporcionar información
especial que será usada para computar la representación final del mismo. Esto significa que donde
un tag es definido en el código HTML, sucederá algo en la representación de ese documento, que
puede ser visual o no.
Los elementos están compuestos por dos tags: el tag de apertura y el tag de cierre
Código Visualización
Cada uno de los 93 tags estándares produce un resultado específico cuando el documento es
representado, Cada tag puede tener atributos y eventos que deben ser declarados dentro del tag
de apertura separados del nombre y de otros atributos o eventos por un espacio. Su contenido es
emplazado entre el tag de apertura y el de cierre
Atributos
Los atributos pueden proporcionar ciertas características a un tag, por ejemplo, altura, ancho, color,
etc.
Eventos
Los eventos son ampliamente usados en documentos HTML como una forma de asociar tags
HTML a scripts. De manera simple, los scripts son programas del lado cliente que cumplen una
cierta tarea y los eventos son las cosas que ocurren y ejecutan los scripts
Contenido
El contenido de un tag es en la mayoría de los casos la parte afectada por el efecto del tag, no
todos los tags tienen contenido, Estos tags vacíos deben ser correctamente cerrados para hacer el
documento compatible con el estándar de código HTML. Existen dos formas de cerrar un tag vacío:
la primera es utilizando un tag de cierre normal (</nombre_tag>) y la otra es usando una barra al
final del tag de apertura.
background (uri)
El valor de este atributo refiere a la ubicación de un recurso de imagen, que será usado como
fondo. La imagen usualmente se repite (baldoza).
<body background="img/bodyback.jpg">
id (name)
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el
documento y puede ser usado para referirse a ese elemento.
Ejemplo:
name (name)
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el
documento y puede ser usado para referirse a ese elemento, Este atributo ha sido incluido por
razones de compatibilidad y los autores deberían usar el atributo "id" en su lugar (especialmente
para compatibilidad con código Html.
Ejemplo:
frame
Especifica qué lados del marco de la tabla será visible. Los valores posibles son (insensibles a
mayúsculas/minúsculas):
class (cdata)
El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por
espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la
cual el elemento está asociado. Una clase provee atributos visuales para los elementos.
Ejemplo:
style (style)
Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos
externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden
"nombre : valor" y ser separados por un punto y coma.
Ejemplo:
title (text)
Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es
usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el
elemento.
Ejemplo:
Código Visualización
lang (langcode)
Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido".
Al escribir código XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0
y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").
Ejemplo:
dir
Especifica la dirección de texto del contenido y atributos del elemento, así como la direccionalidad
de las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
Ejemplo:
align
Establece la alineación de la tabla. Los valores posibles son (insensibles a mayúsculas /
minúsculas):
width (length)
Especifica el ancho deseado de la tabla entera.
valign
Especifica la alineación vertical del contenido de una celda. Funciona exactamente como el atributo
"align" pero para el espacio vertical. Los valores posibles son (insensibles a
mayúsculas/minúsculas):
Ejemplo:
Código Visualización
Atributos
dir
version (cdata)
Define la versión del documento HTML. Has sido desaprobado debido a la redundancia producida
con el tag HTML DOCTYPE.
Eventos
No hay eventos
DEFINICIÓN DE TAGS (ETIQUETAS)
Tag HTML head
Descripción
El tag HTML head define un bloque donde los autores pueden declarar información acerca del
documento, como el título, descripción, palabras claves, etc., así como también otra información
que no es considerada como contenido del documento. Los navegadores usualmente no muestran
esta información (con la excepción del título). El bloque de encabezado es declarado antes que el
bloque del cuerpo (parte visible).
Atributos
Dir, lang
Eventos
No hay eventos
DEFINICIÓN DE TAGS (ETIQUETAS)
Tag HTML body
Descripción
El tag HTML body encierra todo el contenido del documento que se mostrará. Dentro de estos tags
se encuentran todos los elementos visuales (para navegadores visuales) del documento. Los
atributos de presentación para el tag HTML body han sido desaprobados, dado que las hojas de
estilo se convirtieron en la forma preferida de definir el estilo visual de un documento.
Atributos
id (name), class (cdata), style (style), title (text), lang (langcode), Dir,
lang, bgcolor (character), background (uri)
text (character)
Establece el color de primer plano para el texto.
link (character)
Establece el color del texto de los vínculos no visitados.
vlink (character)
Establece el color del texto de los vínculos visitados.
alink (character)
Establece el color del texto de los vínculos cuando son seleccionados por el usuario..
Eventos
1. onload
2. onunload
3. onclick
4. ondblclick
5. onmousedown
6. onmouseup
7. onmouseover
8. onmousemove
9. onmouseout
10. onkeypress
11. onkeydown
12. onkeyup
DEFINICIÓN DE TAGS (ETIQUETAS)
Tag HTML table
Descripción
The HTML table tag inserta una tabla en el documento. Este tag es el contenedor para todas las
partes de la tabla: títulos, encabezados, celdas de encabezado pies, cuerpo, filas, atributos de
columnas, grupos de columnas, celdas.
Atributos
id (name)
name (name)
frame
class (cdata)
style (style)
title (text)
lang (langcode)
dir
border (pixels)
Especifica el ancho en pixels del borde del marco alrededor de una tabla.
Ejemplo:
Código Visualización
<table border="5" summary="Tabla ejemplo Celda 1 Celda 2 Celda 3
mostrando el uso del atributo border.">
<tr> Celda 4 Celda 5 Celda 6
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
cellspacing (length)
Define el espacio adejar entre celdas y entre el borde de la tabla y el borde de la celda más
cercana al mismo.
Ejemplo:
Código Visualización
cellpadding (length)
Define el espacio a dejar entre el borde de una celda y su contenido. Funciona como margen para
celdas.
Ejemplo:
Código Visualización
Eventos
• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup
Tag HTML tr
Descripción
el tag HTML tr, permite definir filas (registros) dentro de una tabla
Atributos
id (name)
class (cdata)
style (style)
title (text)
dir
bgcolor (character)
align
char (character)
charoff (length)
valign
Eventos
1. onclick
2. ondblclick
3. onmousedown
4. onmouseup
5. onmouseover
6. onmousemove
7. onmouseout
8. onkeypress
9. onkeydown
10. onkeyup
Tag HTML td
Descripción
El tag HTML td, permite definir celdas (columnas) dentro de una fila de una tabla
Atributos
id (name)
class (cdata)
style (style)
title (text)
dir
bgcolor (character)
align
char (character)
charoff (length)
valign
width
height
colspan (number)
Especifica el número de columnas unificadas por esta celda. El valor "0" indica que se unifican
todas celdas desde esta posición hasta la última columna en la sección contenedora (tag HTML
colgroup).
Ejemplo:
Código Visualización
rowspan (number)
Especifica el número de filas unificadas por esta celda. El valor "0" significa que se unifican todas
las celdas desde esta posición hasta la última fila en la sección contenedora
Ejemplo:
Código Visualización
Eventos
1. onclick
2. ondblclick
3. onmousedown
4. onmouseup
5. onmouseover
6. onmousemove
7. onmouseout
8. onkeypress
9. onkeydown
10. onkeyup
Ejemplos
En este ejemplo definimos una tabla con columnas agrupadas, filas agrupadas y varios atributos
para cada tag que definirán el estilo visual.
Código Visualización
Atributos
id (name)
name (name)
class (cdata)
style (style)
title (text)
rows (multi-length)
Define una lista separada por comas donde cada valor establece el alto de un marco. El número de
filas (marcos) será igual al número de elementos en esta lista.
cols (multi-length)
Define una lista separada por comas donde cada valor establece el ancho de un marco. El número
de columnas (marcos) será igual al número de elementos en esta
Ejemplo:
<frameset rows="100,*">
<frame name="titulo" noresize="noresize" src="titulo.html">
<frameset cols="150,*>
<frame name="navegacion" noresize="noresize" src="navegacion.html">
<frame name="contenido" noresize="noresize" src="index.html">
</frameset>
</frameset>
Eventos
No hay eventos definidos para este tag.
Tag HTML frame
Descripción
El tag HTML frame define un marco. Esto permite los autores cargar un documento HTML
independiente en el espacio asignado para el marco.
Atributos
id (name)
name (name)
class (cdata)
style (style)
title (text)
src (uri)
Este atributo define la dirección del contenido inicial para el marco.
Ejemplo:
noresize
Cuando está presente, este atributo indica que los usuarios no deberían poder cambiar el tamaño
del marco.
Ejemplo:
scrolling
Decide cómo deberán mostrarse los dispositivos de desplazamiento. Los valores posibles
(insensibles a mayúsculas/minúsculas):
auto: Este valor indica al navegador que provea dispositivos de desplazamiento solo cuando
sea necesario (predeterminado).
yes: Este valor indica al navegador que siempre provea dispositivos de desplazamiento.
no: Este valor indica al navegador que no provea dispositivos de desplazamiento.
frameborder
Decide si un border (separador) será dibujado para este marco. El valor "1" indica al navegador
que dibuje un borde para este frame, mientras que el valor "0" que no lo haga. Nota que para dos
marcos adyacentes, ambos atributos "frameborder" deben establecerse a "0" si necesitas que el
borde entre ellos sea invisible.
marginwidth (pixels)
Especifica la distancia entre el margen izquierdo y el contenido, así como la distancia entre el
margen derecho y el contenido.
marginheight (pixels)
Especifica la distancia entre el margen superior y el contenido, así como la distancia entre el
margen inferior y el contenido.
<frameset cols="50%,50%">
<frame noresize="noresize" src="documento-original.html" frameborder="0" marginwidth="0"
marginheight="0" scrolling="yes">
<frame noresize="noresize" src="documento-modificado.html" frameborder="0" marginwidth="0"
marginheight="0" scrolling="yes">
</frameset>
Eventos
No hay eventos definidos para este tag.
Tag HTML img
Descripción
El tag HTML img inserta un archivo de imagen apuntado por el atributo "src", donde es definido.
Atributos
id (name), name (name), class (cdata), style (style), title (text),dir,
align, width, height, border
alt (text)
El atributo "alt" define un texto alternativo diseñado para servir como reemplazo textual para
objetos que son usualmente no soportados por algunos navegadores. También sirve como
información adicional para navegadores que si los soportan (imágenes, formularios y applets). Los
navegadores pueden mostrar este texto en forma de "tool tip" cuando el mouse se encuentra sobre
el objeto.
ismap
Cuando este atributo booleano está presente, la imagen es definida como un mapa de imagen del
lado servidor. La imagen también debe ser vinculada a un agente procesador (script) que manejará
los datos enviados por el usuario. Cuando el usuario presiona el botón del mouse sobre la imagen,
las coordenadas donde se ha presionado el botón son enviadas al agente procesador (funcionado
como un formulario).
usemap (uri)
Este atributo especifica el mapa de imagen al cual el elemento está relacionado. Para funcionar
correctamente el atributo "usemap" de este elemento debe coincidir con el atributo "name" del tag.
asociado.
Ejemplo:
vspace (pixels)
Este atributo funciona como un margen para el elemento, definiendo la cantidad de espacio en
blanco que debería ser insertado a los lados superior e inferior del elemento.
Eventos
1. onclick
2. ondblclick
3. onmousedown
4. onmouseup
5. onmouseover
6. onmousemove
7. onmouseout
8. onkeypress
9. onkeydown
10. onkeyup
Ejemplo:
<a href="http://www.htmlquick.com">
<img width="88" height="31" src="/img/links/button.jpg" alt="Aprende el código HTML"/>
</a>
<a href="http://www.duco.cl">
Hola como estas salda al Duoc
</a>
DEFINICIÓN DE TAGS (ETIQUETAS)
Tag HTML h1,h2,h3,h4.h5,h6
Descripción
Los tags HTML h1,h2,h3,h4,h5,h6 funcionan como un título o encabezado. Los encabezados
pueden utilizarse como títulos y pueden conformar sistemas de jerarquía, al ir desde el tag HTML
h1 (más importante) hasta el tag HTML h6 (menos importante). Los encabezados de un documento
pueden ser interpretados como su tabla de contenidos.
Atributos
id (name), class (cdata), style (style), title (text), lang (langcode), Dir,
align
Eventos
1. onclick
2. ondblclick
3. onmousedown
4. onmouseup
5. onmouseover
6. onmousemove
7. onmouseout
8. onkeypress
9. onkeydown
10. onkeyup
Ejemplos
Muestra de todos los encabezados. Nota que la apariencia de los encabezados puede ser
modificada con atributos de presentación.
Código Visualización
<h1>Encabezado h1</h1>
<h2>Encabezado h2</h2> Encabezado h1
<h3>Encabezado h3</h3>
<h4>Encabezado h4</h4>
<h5>Encabezado h5</h5>
<h6>Encabezado h6</h6>
Encabezado h2
Encabezado h3
Encabezado h4
Encabezado h5
Encabezado h6
DEFINICIÓN DE TAGS (ETIQUETAS)
Tag HTML hr
Descripción
El tag HTML hr dibuja una regla horizontal donde es definido, que puede utilizarse como separador.
La mayoría de los atributos de presentación para este tag han sido desaprobados en favor de las
hojas de estilos.
Atributos
id (name), class (cdata), style (style), title (text), lang (langcode), Dir,
align, width (ancho de la regla)
noshade
Cuando está presente este atributo indica que la regla debe ser dibujada en color sólido en lugar
de usar el efecto 3D predeterminado.
size (pixels)
Especifica la altura de la regla.
Eventos
1. onclick
2. ondblclick
3. onmousedown
4. onmouseup
5. onmouseover
6. onmousemove
7. onmouseout
8. onkeypress
9. onkeydown
10. onkeyup
DEFINICIÓN DE TAGS (ETIQUETAS)
Tag HTML ul , ol
Descripción
El tag HTML ul inserta una lista sin orden. Los elementos en esta lista son definidos por el tag Html
li..
Atributos
id (name), class (cdata), style (style), title (text), lang (langcode), Dir.
type
Provee información sobre el estilo del artículo de la lista (los valores son insensibles a
mayúsculas/minúsculas).
Eventos
1. onclick
2. ondblclick
3. onmousedown
4. onmouseup
5. onmouseover
6. onmousemove
7. onmouseout
8. onkeypress
9. onkeydown
10. onkeyup
Atributos
id (name), class (cdata), style (style), title (text), lang (langcode), Dir.
type
Provee información sobre el estilo del artículo de la lista (los valores son insensibles a
mayúsculas/minúsculas).
Eventos
11. onclick
12. ondblclick
13. onmousedown
14. onmouseup
15. onmouseover
16. onmousemove
17. onmouseout
18. onkeypress
19. onkeydown
20. onkeyup
DEFINICIÓN DE TAGS (ETIQUETAS)
Tag HTML a
Descripción
El tag HTML a define un "ancla" (anchor) y puede ser utilizado para establecer un vínculo a otro
documento, como un marcador de página, o como ambos.
Cuando es usado como marcador de página debes definir un id o nombre (usa "id" para XHTML
estricto o ambos "id" y "name" con el mismo valor para lograr compatibilidad) de manera que
puedas apuntar al mismo desde otras instancias. El id debe ser único y seguir las reglas descriptas
para el atributo "name". Si no se define el atributo "href", el aspecto visual del texto no se altera.
Ejemplo:
Código Visualización
Cuando el tag HTML a es usado para establecer un vínculo a otra página el atributo "href" es
definido y describe la ubicación del recurso referido. Estos vínculos son usualmente mostrados de
una manera especial por los navegadores usando decoraciones de texto, como color y/o
subrayados.
Ejemplo:
Código Visualización
Y finalmente, el tag HTML a puede ser usado para ambos propósitos. Mientras refiere a otro
documento, este ancla insertará un marcador en esta página.
Código Visualización
Atributos
id (name), name (name), class (cdata), style (style), title (text),
charset (charset)
Especifica el set de caracteres de la URL de destino. Ver la definición del tipo y la referencia sobre
codificación de caracteres (character encoding) para más información.
Ejemplo:
href (uri)
Especifica el recurso de destino para el elemento. Comúnmente usado para referirse a páginas en
el mismo dominio o a páginas externas.
Ejemplo:
type (content-type)
Indica al navegador el tipo de contenido del recurso nombrado en el atributo "href".
Ejemplo:
shape
Especifica la forma de la figura usada para definir un área. Los valores no son sensibles a
mayúsculas/minúsculas y pueden ser uno de estos:
coords
Define las coordenadas y posición de una forma. Es utilizada junto con el atributo "shape" y las
coordinadas dependen del valor de este último:
Las coordinadas son relativas a la esquina superior izquierda del objeto asociado. Cada
coordenada es del tipo length yestán separadas por comas.
target (frame-target)
Especifica el nombre del marco donde el documento de destino debería ser cargado. Ver la
referencia del tipo frame-target para más información.
tabindex (number)
Especifica la posición del elemento en el orden de tabulación. El orden de tabulación define una
secuencia con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar
dicha secuencia mediante el teclado (usualmente con la tecla "tab").
accesskey (character)
Establece una relación entre este elemento y una tecla de carácter, permitiendo al usuario activarlo
mediante esa tecla (usualmente cuando es utilizada junto con la tecla "alt"). El resultado de la
activación depende de la naturaleza del elemento actual. Para vínculos, esta acción
automáticamente sigue el vínculo, y para otros elementos simplemente recibe el enfoque.
Eventos
• onfocus
• onblur
• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup
http://www.htmlquick.com/es/reference/tags.html