INTRODUCCION A HTML BASICO PARTE 2 A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web.
¿Qué son 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>. Veamos un ejemplo. Vamos a crear un enlace hacia la home del Moodle de la Universidad del Quindío: Código
Resultado
La etiqueta <a> nos señala que es un enlace. El atributo href="http://virtual2.uniquindio.edu.co" indica la dirección donde nos conectaremos. El texto La home de Moodle Uniquindio es el que aparecerá en pantalla. La etiqueta </a> es la etiqueta de cierre.
EL atributo target Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace. El ejemplo de abajo abrirá el documento en una nueva página del navegador. Código
Resultado
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".
Esto crea un destino de vínculo alrededor del texto: Capítulo 1. Una vez definido el destino, podemos crear un enlace a él desde el mismo documento o desde otro diferente, utilizando un carácter "#" seguido del nombre del elemento. Por ejemplo:
O en caso que el enlace está definido en el mismo documento:
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á automáticamente el programa de email que tenemos definido por defecto. Código
Resultado
mailto: nos indica la dirección email a la que va dirigida, en este ejemplo:alguien@yahoo.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. Código
Resultado
Etiquetas y atributos de los enlaces Etiquetas Atributos
Valor
<a> href hreflang name
URL código de lenguaje nombre de sección
rel alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection apendix help bookmark nofollow rev alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection
Descripción Define un vínculo Dirección URL a conectar. Especifica el lenguaje de la URL. Para crear un marcapáginas dentro de un documento. Especifica la relación entre el documento actual y el destino del vínculo.
Especifica la relación entre el destino del vínculo y el documento actual (vínculo inverso).
coords
apendix help bookmark coordenadas
shape rect rectangle circ circle poly polygon
Usamos coords="centro x, centro y, radio" Usamos coords="x1, y1, x2, y2, .., xn, yn"
target
Indica donde abrir el URL. El URL se abrirá en una nueva ventana. El URL se abrirá en el frameset padre. El URL se abrirá en el mismo frame donde fue apretado. El URL se abrirá en una ventana de tamaño completo. Especifica el tipo de contenido a conectar.
_blank _parent _self _top type
Especifica las coordenadas de la superficie que contiene el enlace. Define la forma del area. Usamos coords="izquierda, arriba, derecha, abajo"
tipo de contenido
Atributos estándard Los atributos estándar son: id, class, title, style, dir, lang, tabindex, accesskey
Atributos identificadores Válido para todos los elementos excepto: base, head, html, meta, script, style, title. Atributos id
Valor nombre
Descripción 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.
class
nombre de clase
Para procesos generales por parte del
usuario. 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.
style
estilo
title
texto
Para procesos generales por parte del
usuario. Este atributo especifica información de estilo para el elemento actual. Este atributo ofrece información consultiva sobre el elemento para el cual se establece.
Atributos de lenguaje Valido para todos los elementos excepto: applet, base, basefont, br, frame, frameset, iframe, param, script. Atributos lang
Valor código de lenguaje
Descripción 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.
dir
ltr rtl
Ayudar a los verificadores de ortografía y
gramática. Especifica la dirección del texto. Valores posibles:
ltr : De izquierda a derecha (left to right).
rtl : De derecha a izquierda (right to lleft).
Atributos del teclado Valido para los elementos: a, area, button, input, label, legend, textarea.
Atributos accesskey
Valor caracter
tabindex
número
Descripción Asigna una tecla de acceso a un elemento. Al pulsar esa tecla el foco se dirige hacia ese elemento. Especifica el orden de tabulación del elemento dentro del documento actual
Eventos intrínsecos Los eventos intrínsecos son: onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
¿Qué son los eventos HTML? HTML cuenta con una serie de atributos que le permiten al navegador ejecutar un evento. Un evento puede ser por ejemplo un script de JavaScript cuando presionamos algún elemento del documento. En lo siguiente se presentara la lista de los atributos que pueden ser insertados dentro de las etiquetas de HTML
Eventos del documento Usar solo con body y frameset. Atributos onload onunload
Valor script script
Descripción El script corre cuando el documento es cargado. El script corre cuando el usuario elimina un documento de una ventana o marco.
Eventos de los formularios Usar con los elementos de los formularios. Atributos onchange
Valor script
onsubmit onreset onselect
script script script
onblur
script
onfocus
script
Descripción El script corre cuando el valor de entrada ha sido modificado. El script corre cuando se envía un formulario. El script corre cuando se reinicializa un formulario. El script corre cuando el usuario selecciona texto de un campo de texto. El script corre cuando el elemento pierde el foco ya sea con el mouse o por navegación con tabulador. El script corre cuando el foco se dirige hacia un elemento, ya sea con el mouse o por navegación con tabulador.
Eventos del teclado Usar con todos los elementos excepto con: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, y title. Atributos onkeydown onkeypress onkeyup
Valor script script script
Descripción El script corre cuando se pulsa una tecla. El script corre cuando se pulsa y se suelta una tecla. El script corre cuando una tecla se suelta.
Eventos del mouse Usar con todos los elementos excepto con: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, y title. Atributos onclick ondblclick
Valor script script
onmousedown
script
onmousemove
script
onmouseout
script
onmouseover
script
onmouseup
script
Descripción El script corre cuando se hace clic con el mouse. El script corre cuando se hace doble clic con el mouse. El script corre cuando el botón del mouse se pulsa cuando está encima de un elemento. El script corre cuando el mouse se mueve mientras está sobre un elemento. El script corre cuando el mouse se aparta de un elemento. El script corre cuando el mouse se sitúa sobre un elemento. El script corre cuando el botón del mouse se suelta cuando está encima de un elemento.
¿Qué son 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 que pueden ser de diferentes medidas. Cada frameset define un grupo de filas y columnas.
Este ejemplo crea una cuadrícula de 2x3 subespacios.
La etiqueta frame La etiqueta <frame> define que documento colocaremos en cada marco.
En el ejemplo dividimos la pantalla en una columna de 25% y otra de 75%. La primera columna contiene el documento "frame1.html" y la segunda columna el documento "frame2.html". 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 etiquetas <body> </body>.
texto
debe
ir
entre
las
La etiqueta iframe La etiqueta <iframe> se usa para crear un frame en línea que contiene otro documento. Es decir, se puede mostrar una ventana que contenga otra página Web dentro de la página que estamos diseñando.
En este ejemplo podemos observar que la ventana del resultado nos está mostrando la página principal de la plataforma Moodle de la Universidad del Quindío (http://virtual2.uniquindio.edu.co).
Etiquetas y atributos de los marcos Etiquetas
Atributos
Valor
<frameset> cols
rows
pixels % * pixels % *
<frame> frameborder longdesc
0 1 URL
marginheight
pixels
marginwidth
pixels
name noresize
frame_name noresize
scrolling
yes no auto URL
src <noframes> <iframe> align
frameborder
left right top middle bottom 0 1
Descripción Organiza ventanas múltiples. Asigna el número y el tamaño de las columnas. Asigna el número y el tamaño de las filas. Define una subventana. Especifica si se mostrará o no el borde alrededor del frame. URL con una larga descripción del contenido del frame (se usa para navegadores que no soportan frames). Define el margen superior e inferior del frame. Define el margen izquierdo y derecho del frame. Define un nombre para el frame. No le permite al usuario modificar el tamaño del frame. Determina la acción de la barra de desplazamiento. Archivo que va a ser mostrado en el frame. Muestra un texto para los navegadores que no soportan frames. Crea un frame en línea que contiene otro documento. Alineación del iframe con respecto al texto.
Especifica si se mostrará o no el borde alrededor del iframe.
height longdesc
pixels % URL
marginheight
pixels
marginwidth
pixels
name scrolling
nombre yes no auto URL
src width
pixels %
Define la altura del iframe. URL con una larga descripci贸n del contenido del iframe (se usa para navegadores que no soportan frames). Define el margen superior e inferior del iframe. Define el margen izquierdo y el derecho del iframe. Define un nombre para el iframe. Determina la acci贸n de la barra de desplazamiento. Archivo que va a ser mostrado en el iframe. Define el ancho del iframe.
Nota: usar los atributos est谩ndar e intr铆nsecos
¿Qué son las tablas de HTML? Las tablas son una herramienta muy útil para presentar datos de tablas y para el diseño de texto y gráficos de una página HTML.
Características de las tablas Definimos las tablas con la etiqueta <table>. La tabla está dividida en filas definidas con la etiqueta <tr>. Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>. Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc. Código
Resultado
Bordes de las tablas Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se verán los bordes que dividen las celdas de la tabla.
Código
Resultado
Veamos un ejemplo sin bordes
Código
Resultado
Esta tabla es Sin bordes
Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.
Encabezados de las tablas Los encabezados de una tabla se definen con la etiqueta <th>. ď&#x192;&#x2DC;
CĂłdigo
ď&#x192;&#x2DC; Resultado
La etiqueta <th> siempre muestra los encabezados remarcados.
Márgenes de las celdas Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los márgenes con el atributo cellpadding.
Código
Resultado
Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mínimo entre las palabras dentro de cada celda y los bordes de las mismas.
Espaciado entre celdas Es el espacio que se encuentra entre celda y celda. El mismo está definido con el atributo cellspacing.
Código
Resultado
Nota: en este ejemplo el atributo cellspacing deja un espacio de 15 pixels entre las celdas de la tabla
Etiquetas y atributos de las tablas Etiquetas <table>
Atributos align Desaprobado bgcolor Desaprobado border cellpadding cellspacing frame
rules
summary
Valor left center right rgb(x,x,x) #xxxxxx nombre_color pixels pixels % pixels % void above below hsides lhs rhs vsides box border none groups rows cols all texto
width
% pixels
align
right left center justify char rgb(x,x,x) #xxxxxx nombre_color carácter
<tr>
bgcolor Desaprobado char
charoff
pixels %
Descripción Define una tabla. Alínea las tablas. Use la propiedad position de CSS en su lugar. Color de fondo de las tablas. Use la propiedad background de CSS en su lugar. Espesor del borde de la tabla. Espacio entre la pared de la celda y el contenido. Espacio entre celdas. Específica cual de los bordes alrededor de la tabla será visible.
Especifica las líneas divisorias horizontales y verticales.
Resumen del contenido de la tabla para navegadores sin visualizador. Especifica el ancho de la tabla. Define una fila. Alínea horizontalmente el texto en la celda.
Color de fondo de las celdas. Use la propiedad background de CSS en su lugar. Especifica que un carácter ("."o",") actúe como eje de alineación. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carácter de alineación en
valign
top middle bottom baseline
<td> <th> abbr align
axis bgcolor Desaprobado char
texto abreviado left right center justify char nombre de la categoría rgb(x,x,x) #xxxxxx nombre_color carácter
charoff
pixels %
colspan
número
headers
lista de nombres de celdas
height Desaprobado nowrap Desaprobado
pixels
rowspan
número
scope
width Desaprobado
col colgroup row rowgroup top middle bottom baseline pixels %
align
top
valign
nowrap
<caption>
cada línea. Especifica la posición vertical de los datos dentro de la celda.
Define una celda. Define los encabezados de una tabla. Especifica una versión abreviada del contenido de una celda. Alínea horizontalmente el texto en la celda.
Sitúa una celda en categorías conceptuales. Color de fondo de las celdas. Use la propiedad background de CSS en su lugar. Especifica que un carácter actúe como eje de alineación. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carácter de alineación en cada línea. Indica el número de columnas que esta celda debe anexar. Lista de celdas de encabezado que proporcionan información de encabezado para la celda de datos actual. Especifica la altura de la celda. Use la propiedad height de CSS en su lugar. Si está presente, deshabilita el ajuste automático de líneas. Use CSS en su lugar. Indica el número de filas que esta celda debe anexar. Este atributo especifica el conjunto de celdas de datos para las cuales la celda de encabezado actual proporciona información de encabezado. Especifica la posición vertical de los datos dentro de una celda.
Especifica el ancho de la celda. Use la propiedad width de CSS en su lugar. Define el título de la tabla. Ubicación del título con respecto a la
Desaprobado
bottom left right
<colgroup> <col> align
char
right left center justify char carácter
charoff
pixels %
span
número
valign
top middle bottom baseline % pixels longitud relativa
width
<thead> <tbody> <tfoot>
tabla. Use la propiedad caption-side de CSS en su lugar. Crea un grupo explícito de columnas. Permite a los autores compartir atributos entre varias columnas. Alínea horizontalmente el contenido en el grupo de columnas.
Especifica que un carácter actúe como eje de alineación. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carácter de alineación en cada línea. Especifica el número de columnas de un grupo de columnas. Alínea verticalmente el contenido en el grupo de columnas.
Define el ancho del grupo de columnas.
Las filas de una tabla pueden agruparse en una cabecera de tabla <thead>, un pie de tabla <tfoot> y una o más secciones de cuerpo de tabla <tbody>. align
char
right left center justify char character
charoff
pixels %
valign
top middle bottom baseline
Alínea horizontalmente el texto en la celda.
Especifica que un carácter actúe como eje de alineación. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carácter de alineación en cada línea. Especifica la posición vertical de los datos dentro de la celda.
¿Qué son las listas de HTML?
Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Tenemos tres tipos de listas: Ordenadas. Desordenadas. De definición.
Listas Ordenadas Son aquellas que ordenan la lista anteponiendo números, letras o signos. Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>. Código
Resultado
Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.
Listas Desordenadas Exponen la lista anteponiendo un punto, cuadrado o triángulo negro. Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>. Código
Resultado
Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.
Listas de definición Se utilizan para definir términos. Las listas de definición se representan con la etiqueta <dl>. Los términos de las mismas con <dt>. La definición de esos términos comienza con <dd>. Código
Resultado
Dentro de las etiquetas <dd> se pueden agregar imágenes, párrafos, otras listas, etc.
Etiquetas y atributos de las listas Etiquetas <ol>
Atributos
Valor
compact Desaprobado start Desaprobado
número del 1° objeto
type Desaprobado
A a I i 1
<ul> compact Desaprobado type Desaprobado
disc square circle
<li> type Desaprobado
value Desaprobado <dl> <dt> <dd> <dir> Desaprobado <menu> Desaprobado
disc square circle A a I i 1 número del objeto
Descripción Define una lista ordenada. Representa la lista de un modo más compacto. Use las propiedades de las listas en CSS en su lugar. Especifica el número del primer objeto de una lista. Use las propiedades de las listas en CSS en su lugar. Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSSen su lugar.
Define una lista desordenada. Representa la lista de un modo más compacto. Use las propiedades de las listas en CSS en su lugar. Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSSen su lugar. Define el comienzo del Item. Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSSen su lugar.
Establece el número del objeto de lista actual. Use las propiedades de las listas en CSS en su lugar. Define una lista de definición. Términos de los objetos de lista. Descripción de los objetos de lista. Actúa como <ul>. Actúa como <ul>.
Formularios en HTML Guía práctica de como diseñar los formularios HTML para tu sitio.
¿Para qué se usan los formularios? Los formularios son usados para que el usuario ingrese datos. Esos datos son enviados a un agente para que los procese (por ej., a un servidor web, a un servidor de correo, etc.).
La etiqueta form Dentro de la etiqueta <form> se encuentra el formulario. Los interaccionan con los formularios a través de los llamados controles.
usuarios
Tipos de controles:
Botones (buttons). Casillas de verificación (checkboxes). Radiobotones (radio buttons). Menúes (menus). Entrada de texto (text input). Selección de ficheros (file select). Controles ocultos (hidden controls). Controles tipo objeto (object controls).
Dentro de la etiqueta <form>, se encuentra el atributo action. Este nos especificará el documento que manejará el formulario completado y enviado. Tambien contamos con el atributo method. El mismo nos define el método por el cual se enviarán los datos del usuario al servidor.
La etiqueta input Nos define el registro donde el usuario puede ingresar los datos. El atributo type específica el tipo de control a crear. Entre ellos se encuentran los siguientes valores:
Text Crea un control que nos permite ingresar un texto en una línea. Código
Resultado
Nota: en este ejemplo podemos observar lo siguiente: action="datos.php": Nos indica que el archivo datos.php es el encargado de manipular los datos que el usuario ingresó en el formulario. method="get": Nos indica que los datos del formulario se enviarán por el método get. name="nombre": Le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo.
Radio botones Se usan cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades.
Resultado
Nota: en este ejemplo podemos observar lo siguiente: action="edades.asp": Indica que el archivo edades.asp es el encargado de manipular los datos que el usuario ingresó en el formulario. method="post": Indica que los datos del formulario se enviarán por el método post. name="edad": Se debe utilizar el mismo nombre(en este caso "edad") para todos los elementos del mismo control radio. value="mayor": Define el valor del elemento <input>.
Checkbox (casillas de verificación) Permite al usuario elegir varias opciones entre todas las posibilidades. Código
Resultado
Nota: en este ejemplo podemos observar lo siguiente: action="hobbie.php": Indica que el archivo hobbie.php es el encargado de manipular los datos que el usuario ingresó en el formulario. method="get": Indica que los datos del formulario se enviarán por el método get. name="pasa": Se debe utilizar el mismo nombre(en este caso "pasa") para todos los elementos del mismo control checkbox. value="tv": Se define el valor del elemento <input>.
Password Funciona igual que text, pero el texto introducido se presenta mediante una serie de asteriscos. Es utilizado generalmente para ingresar contraseñas. Submit Botón de envió de datos del formulario. Reset Botón de reinicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales. Código
Resultado
Nota: en este ejemplo podemos observar lo siguiente: action="datos_personales.php": Indica que el archivo datos_personales.php es el encargado de manipular los datos que el usuario ingresó en el formulario. method="post": Indica que los datos del formulario se enviarán por el método post.
name="nombre" - name="secreto": Le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo. value="Enviar" : Define el texto del botón "submit". value="Borrar": Define el texto del botón "reset".
Las etiquetas select y option La etiqueta <select> es usada para crear un menú desplegable. Cada opción ofrecida por el menú se representa con la etiqueta <option>. Código
Resultado
Nota: en este ejemplo podemos observar lo siguiente: action="continentes.php": Indica que el archivo continentes.php es el encargado de manipular los datos que el usuario ingresó en el formulario. method="get": Indica que los datos del formulario se enviarán por el método get. name="continente": Le asigna un único nombre al menú desplegable value="america": Define el valor del elemento <option>.
La etiqueta textarea Se usa para crear un control de entrada de texto multilínea. Los atributos rows y cols nos indican la cantidad de filas y columnas que tendrá el recuadro del área de texto.
Código <form action="texto.php" method="post"> <textarea name="eltexto" rows="5"cols="30"> Aquí podemos ingresar un texto introductorio si lo deseamos. </textarea> </form>
Resultado
Nota: en este ejemplo podemos observar lo siguiente: action="texto.php": Indica que el archivo texto.php es el encargado de manipular los datos que el usuario ingresó en el formulario. method="post”: Indica que los datos del formulario se enviarán por el método post. name="eltexto": Le asigna un nombre al elemento textarea.
Etiquetas y atributos de los formularios
Etiquetas <form>
Atributos
Valor
action Obligatorio accept
URL
acceptcharset
Lista de codificación de caracteres
enctype
tipo de contenido
Lista de tipos de contenido
method get post
name
cdata
target
_blank _self _parent _top
<input> accept
Lista de tipos de contenido
align
left right top texttop middle absmiddle baseline bottom
Descripción Define un formulario para el ingreso de datos. Especifica un archivo procesador del formularios. Especifica una lista de tipos de contenido separados por comas, que un servidor procesador de formularios manejará correctamente. Especifica la lista de codificación de caracteres para los datos introducidos que son aceptados por el servidor que procesa este formulario. Especifica el tipo de contenido usado para enviar el formulario al servidor. Especifica que método HTTP se usará para enviar el conjunto de datos del formulario. Debería usarse cuando los datos del formulario no tienen efectos secundarios. Debería usarse cuando el formulario causa efectos secundarios(p.ej., subscripción a un servicio o modificar una base de datos. Da nombre al elemento de modo que se pueda hacer referencia a él desde hojas de estilos o scripts. El URL se abrirá es una nueva ventana. El URL se abrirá en el mismo frame donde fue apretado. El URL se abrirá en el frameset padre. El URL se abrirá en una ventana de tamaño completo. Define el tipo de control de entrada. Especifica una lista de tipos de contenido separados por comas, que un servidor procesador de formularios manejará correctamente. Nota: Usar solo con type="file". Define el alineamiento del texto siguiente a la imagen. Nota: Usar solo con type="image".
alt
absbottom texto
checked
disabled
maxlength
número
name
nombre de control
readonly
size src type
value
número de caracteres URL checkbox file hidden image password radio reset submit text valor
<textarea> col Obligatorio rows Obligatorio disabled name
número número
nombre del área de texto
Define un texto alternativo para la imagen. Nota: Usar solo con type="imagen". Especifica que el botón esta marcado("on"). Nota: Usar solo con type="radio" o type="checkbox". Deshabilita el control para la entrada de datos por parte del usuario. Nota: No debe usarse con type="hidden". Número máximo de caracteres que puede introducir el usuario. Nota: Usar solo con type="text" o type="password". Asigna el nombre de control. Nota: Este atributo es requerido para type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", type="radio". Indica que el valor no puede ser modificado por el usuario . Nota: Usar solo con type="text". Define el tamaño del elemento input. Nota: No debe usarse con type="hidden". Define el URL de la imagen a mostrar. Nota: Usar solo con type="image". Especifica el tipo de control a crear.
Para los botones: reset y submit: define el texto en el botón. checkbox y radio: (requerido) define el resultado del elemento input cuando es pulsado. hidden, password y text: define el valor por defecto del elemento. Define un área de texto(multi-línea). Número de columnas visibles en el área de texto. Número de filas visibles en el área de texto. Deshabilita los controles de entrada. Especifica un nombre para el área de texto.
readonly <label> for
idref
align Desaprobado
top bottom left right
<fieldset> <legend>
<select> disabled multiple name
nombre
size
número
label Obligatorio disabled
texto
label
texto
<optgroup>
<option>
disabled selected value
texto
<button> disabled name type
value <isindex> Desaprobado
nombre button reset submit valor
El usuario no puede modificar el contenido en el área de texto. Adjunta información a los controles. Referencia a una palabra ID definida por otro atributo. Dibuja un recuadro alrededor de los elementos. Permite a los autores asignar un título a un fieldset. Especifica la posición de la leyenda con respecto al fieldset.Use las propiedades de ubicación de CSS en su lugar. Crea un menú desplegable. Deshabilita el menú. Si está activado permite selecciones múltiples. Define un único nombre para un menú desplegable. Define el número visible de Items en el menú desplegable. Permite a los autores agrupar opciones logicamente. Especifica el rótulo del grupo de opción. Deshabilita los controles de entrada.No funciona en IE Define una opción en los menús desplegables. Permite escribir de forma sintetizada el conternido del atributo <option>. El navegador debería mostrar este valor en lugar del contenido de <option>. Deshabilita los controles de opción.No funciona en IE Especifica que opción aparecerá como seleccionada. Especifica el valor inicial del control. Define un botón. Deshabilita el botón. Especifica un nombre para el botón. Define el tipo de botón.
Asigna un valor inicial al botón. Use <input> en su lugar.
BIOGRAFIA: Martín Solomiak disponible en: webmaster@virtualnauta.com
Docente Viviana Marcela Zuluaga Lombana Correo: Ingenieravz@gmail.com Agosto 2012