Issuu on Google+

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


INTRODUCCION A HTML BASICO PARTE 2