Sei sulla pagina 1di 34

Tags y atributos HTML

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

<b>Texto remarcado</b> Texto remarcado

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

<nombre_tag atributo1="valor1" atributo2="valor2" ... evento1="funcion1" evento2="funcion2" ...>


Contenido</nombre_tag>

Atributos

Los atributos pueden proporcionar ciertas características a un tag, por ejemplo, altura, ancho, color,
etc.

<a href="otrodoc.html" rel="help">Otro documento ofreciendo ayuda</a>

<button id="okbutton" disabled="disabled" tabindex="4">Ok</button>

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

<a href="reference.html" onmouseover="comenzar_funcion()" onmouseout="detener_funcion()">Ir


a la referencia</a>
• onload: El evento onload ocurre cuando el agente de usuario termina de cargar la ventana
o todos los marcos en una página de marcos.
• onunload: El evento onunload ocurre cuando el agente de usuario quita un documento de
una ventana o marco.
• onclick: El evento onclick es disparado cuando el botón del mouse es presionado y soltado
(click) sobre el elemento.
• ondblclick: El evento ondblclick ocurre cuando el botón del puntero es presionado dos
veces (doble click) sobre un elemento.
• onmousedown: El evento onmousedown es disparado cuando el botón del mouse es
presionado sobre el elemento.
• onmouseup: El evento onmouseup ocurre cuando el botón del puntero es soltado sobre un
elemento.
• onmouseover: El evento onmouseover es disparado cuando el mouse se mueve sobre el
elemento (desde afuera).
• onmousemove: El evento onmousemove ocurre cuando el puntero es movido mientras
está sobre un elemento.
• onmouseout: El evento onmouseout es disparado cuando el mouse es movido hacia afuera
de un elemento.
• onfocus: El evento onfocus ocurre cuando un elemento recibe el enfoque sea con el
puntero o con la tecla tab.
• onblur: El evento onblur es disparado cuando un elemento pierde el enfoque sea con el
puntero o con la tecla tab.
• onkeypress: El evento onkeypress ocurre cuando una tecla es presionada y soltada sobre
un elemento.
• onkeydown: El evento onkeydown se dispara cuando una tecla es presionada sobre el
elemento.
• onkeyup: El evento onkeyup ocurre cuando una tecla es soltada sobre un elemento.
• onsubmit: El evento onsubmit es disparado cuando un formulario es enviado.
• onreset: El evento onreset ocurre cuando un formulario es reseteado.
• onselect: El evento onselect es disparado cuando un usuario selecciona un texto en un
campo de texto.
• onchange: El evento onchange ocurre cuando un control pierde el enfoque y su valor ha
sido modificado desde que recibió el enfoque.

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.

<img src="logo.jpg" onmouseover="comenzar_funcion()"></img>


<img src="logo.jpg" onmouseover="comenzar_funcion()" />
<b>Texto remarcado</b>
DEFINICIÓN DE ATRIBUTOS GENERALES
bgcolor (character)
Define un color para ser usado como fondo.

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:

<p id="parrafo1">Este es el primer párrafo;.</p>

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:

<p id="parrafo1">Este es el primer párrafo;.</p>

frame
Especifica qué lados del marco de la tabla será visible. Los valores posibles son (insensibles a
mayúsculas/minúsculas):

• void: Sin lados. Este es el valor predeterminado.


• above: Solo el lado superior.
• below: Solo el lado inferior.
• hsides: Solo los lados superior e inferior..
• vsides: Solo los lados izquierdo y derecho.
• lhs: Solo el lado izquierdo.
• rhs: Solo el lado derecho.
• box: Todos los lados.
• border: Todos los lados.

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:

<p class="referencias">Este artículo está; </p>

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:

<p style="color: #0000FF; font-size: 12pt">Este es un p&aacute;rrafo con un estilo definido</p>


<p>Y este es otro texto sin estilo.</p>

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

<a title="Titulo Sobrepuesto" Código HTML


href="http://www.htmlquick.com">Código
HTML</a>

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:

<p lang="en">This is a paragraph in english.</p>


<p lang="es">Este es un p&aacute;rrafo en espa&ntilde;ol.</p>

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:

• RTL: Derecha a izquierda.


• LTR: Izquierda a derecha. Valor por Defecto

Ejemplo:

<q lang="he" dir="rtl">...Una cita en Hebreo...</q>

align
Establece la alineación de la tabla. Los valores posibles son (insensibles a mayúsculas /
minúsculas):

• left: La tabla es alineada a la izquierda del espacio disponible.


• center: La tabla es alineada al centro del espacio disponible.
• right: La tabla es alineada a la derecha del espacio disponible.

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):

•top: El contenido es alineado arriba.


•middle: La información es centrada verticalmente. Este es
el valor predeterminado.
•bottom: El contenido es alineado abajo.

Ejemplo:

Código Visualización

<table border="1" summary="Tabla ejemplo 1 23.065


mostrando el uso del atributo valign."> 2
<tr> 324.432
3
<td>1<br />2<br />3<br />4</td> 4 45.8745
<td valign="top">23.065</td>
<td>324.432</td>
<td valign="bottom">45.8745</td>
</tr>
</table>
DEFINICIÓN DE TAGS (ETIQUETAS)
Tag HTML html
Descripción
The HTML table tag contiene a todo el documento, con la excepción del tag HTML ¡DOCTYPE.

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

<table cellspacing="10" border="1" ...Contenido... ...Contenido...


summary="Tabla ejemplo mostrando el uso
del atributo cellspacing.">
<tr>
<td>...Contenido...</td>
<td>...Contenido...</td>
</tr>
</table>

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

<table cellpadding="10" border="1"


summary="Tabla ejemplo mostrando el uso ...Contenido... ...Contenido...
del atributo cellpadding.">
<tr>
<td>...Contenido...</td>
<td>...Contenido...</td>
</tr>
</table>

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

<table border="1" summary="Tabla ejemplo Celda1 Celda2


mostrando el uso del atributo colspan.">
<tr><td>Celda1</td><td>Celda2</td></tr> Celda3
<tr><td colspan="2">Celda3</td></tr>
</table>

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

<table border="1" summary="Tabla ejemplo Celda2


mostrando el uso del atributo rowspan."> Celda1
<tr><td Celda3
rowspan="2">Celda1</td><td>Celda2</td></tr>
<tr><td>Celda3</td></tr>
</table>

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

<table border="1" frame="border" Representació de cómo archivos HTML


rules="groups" summary="Funcionalidad de funcionan en diferentes versiones de Internet
archivos HTML en diferentes versiones de Explorer
Internet Explorer"> Archivo Nombre 4.0 5.0
<caption>Representaci&oacute; de
c&oacute;mo archivos HTML funcionan en Archivo Nombre 4.0 5.0
diferentes versiones de Internet 1 index.html Ok Ok
Explorer</caption>
2 links.html Ok Ok
<colgroup align="center"></colgroup>
<colgroup></colgroup> 3 fullfunc.html - Ok
<colgroup align="center" 4 nofunc.html Ok Ok
span="2"></colgroup>
5 panel.html - Ok
<thead>
<tr> 6 search.php Ok Ok
<th>Archivo</th> 7 send.php Ok Ok
<th>Nombre</th>
<th>4.0</th>
<th>5.0</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Archivo</th>
<th>Nombre</th>
<th>4.0</th>
<th>5.0</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>index.html</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>2</td>
<td>links.html</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>3</td>
<td>fullfunc.html</td>
<td>-</td>
<td>Ok</td>
</tr>
<tr>
<td>4</td>
<td>nofunc.html</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>5</td>
<td>panel.html</td>
<td>-</td>
<td>Ok</td>
</tr>
</tbody>
<tbody>
<tr>
<td>6</td>
<td>search.php</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>7</td>
<td>send.php</td>
<td>Ok</td>
<td>Ok</td>
</tr>
</tbody>
</table>
Tag HTML frameset
Descripción
El tag HTML frameset (página de marcos) divide el espacio disponible en sub-espacios
rectangulares, donde un documento HTML individual puede ser cargado para cada uno mediante el
tag HTML frame. El número de marcos y sus tamaños serán definidos mediante los atributos
"rows" y "cols"..

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:

<frame name="menu" src="menu.html">

noresize
Cuando está presente, este atributo indica que los usuarios no deberían poder cambiar el tamaño
del marco.

Ejemplo:

<frame name="titulo" noresize src="titulo.html">

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:

<img src="http://www.htmlquick.com/es/img/examples/nav1.jpg" usemap="#nav1"


alt="Men&uacute; de navegaci&oacute;n" />
hspace (pixels)
Este atributo funciona como un margen para el elemento, definiendo la cantidad de espacio en
blanco que debe insertarse a los lados derecho e izquierdo del elemento.

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&oacute;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).

Para listas sin orden (UL), los valores posibles son:

• disc: Dibuja un círculo relleno.


• circle: Dibuja un círculo sin relleno.
• square: Dibuja un cuadrado sin relleno.

Para listas ordenadas (OL), los valores posibles son:

• 1: números árabes (1, 2, 3,...).


• a: letras minúsculas (a, b, c,...).
• A: letras mayúsculas (A, B, C,...).
• i: números romanos en minúsculas (i, ii, iii,...).
• I: números romanos en mayúsculas (I, II, III,...).

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 li
Descripción
El tag HTML li define un artículo para listas ordenadas (tag HTML ol) y sin orden (tag HTML ul).

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).

Para listas sin orden (UL), los valores posibles son:

• disc: Dibuja un círculo relleno.


• circle: Dibuja un círculo sin relleno.
• square: Dibuja un cuadrado sin relleno.

Para listas ordenadas (OL), los valores posibles son:

• 1: números árabes (1, 2, 3,...).


• a: letras minúsculas (a, b, c,...).
• A: letras mayúsculas (A, B, C,...).
• i: números romanos en minúsculas (i, ii, iii,...).
• I: números romanos en mayúsculas (I, II, III,...).

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

<a id="bookmark" name="bookmark">Primer Primer marcador


marcador</a>

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

<a href="http://www.w3.org">World Wide World Wide Web Consortium


Web Consortium</a><br /> El tag HTML comment
<a href="comment.html">El tag HTML
comment</a>

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

<a id="vinculodoctype" El tag HTML !DOCTYPE


href="doctype.html">El tag HTML !
DOCTYPE</a>

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:

<a charset="utf-8" href="http://www.htmlquick.com/es">C&oacute;digo HTML</a>

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:

<a href="logo.gif" type="image/gif">Mira nuestro logo</a><br />


<a href="articulo.html" type="text/html">Lee el art&iacute;culo</a>

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:

• default: Especifica toda la región.


• rect: Define una región rectangular.
• circle: Define una región circular.
• poly: Define una región poligonal.

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:

• rect: izquierda-x, arriba-y, derecha-x, abajo-y.


• circle: centro-x, centro-y, radio. Si el radio es medido en porcentajes, se calcula como el
porcentaje del lado más pequeño del objeto asociado.
• poly: x1, y1, x2, y2, ..., xN, yN. Esto define un polígono cerrado. Si defines un polígono
abierto, el navegador debería cerrarlo y agregar un segmento desde el primero punto hasta
el ú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.

Abre en nueva ventana: <a href="http://www.w3c.org" target="_blank">WWW Consortium</a>


Abre en un marco llamado "contenido" (el marco debe estar presente en el set de marcos actual):
<a href="http://www.w3c.org" target="contenido">WWW Consortium</a>

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

Potrebbero piacerti anche