academiaadmonitsat.files.wordpress.com · web viewsi le pidiera que agregara un título a...
TRANSCRIPT
UNIDAD IIILENGUAJE HTML
3.1 El lenguaje HTML
El lenguaje HTML se basa en el uso de etiquetas. Estas etiquetas son fragmentos
de texto delimitados por los símbolos menor que (<) y mayor que (>).
Básicamente, estas etiquetas indican al navegador, la forma de representar los
elementos (texto, gráficos, etc.) que contiene el documento, En este manual nos
referiremos a estas órdenes con la palabra etiqueta.
Existe normalmente una etiqueta de inicio <ETIQUETA > y otra de final
</ETIQUETA >
3.2. Uso de Etiquetas de html
HTML es un “lenguaje” interpretado
Utiliza un conjunto de etiquetas, las cuales tienen el siguiente formato:
<ETIQUETA>
Generalmente se utiliza una etiqueta de apertura y una de cierre
<ETIQUETA>
</ETIQUETA>
Todo documento HTML debe tener la extensión .htm o .html
Debe de iniciar y terminar con la etiqueta:
<HTML>
</HTML>
Además, debe de incluir otra etiqueta:
<HTML>
<HEAD>
</HEAD>
</HTML>
Donde se incluyen otras etiquetas con indicaciones especiales para el
visualizador.
Dentro de este tipo de etiquetas está <TITLE> que indica el título de nuestra
página que aparecerá en la barra del navegador
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML
Finalmente, la etiqueta primordial para crear nuestra página Web, también se
le puede llamar cuerpo de la pagina: <BODY>, que le indica al navegador que
a partir de ella todo lo que sigue es la información que se mostrara dentro de la
página Web.
3.3 El cuerpo del documento Web
Primera pagina web
<HTML><HEAD><TITLE>Mi primera pagina Web</TITLE></HEAD><BODY>Hola. SOY ESTUDIANTE DE LIC. ADMINISTRACION ESTE MI CURSO DE VERANO DE COMERCIO ELECTRONICO!!!</BODY></HTML>
Proceda a guardarlo utilizando el nombre de su agrado, pero eso sí,
especificando la extensión .htm o .html
Se recomienda utilizar letras minúsculas.
Abra el documento con el visualizador o navegador o hacer doble clic al
nombre en el explorador de Windows
3.4 Formateo general
COLORES E IMÁGENES DE FONDO
La mayoría de las etiquetas utilizan atributos adicionales para realizar acciones
distintas a las designadas de manera predeterminada.
La etiqueta <BODY> tiene algunas, empezaremos por la que especifica el color de
fondo de una página Web.
<BODY BGCOLOR=“YELLOW”>
Podemos especificar colores para nuestro fondo de página, escribiendo el nombre
en inglés de ese color. O bien, podemos especificar un valor en hexadecimal
denominado código RGB (abreviatura en inglés de red, green y blue),
anteponiéndole el símbolo #.
<BODY BGCOLOR=“#CCFFCC”>
Se puede agregar una imagen como fondo de la página.
Su función es parecido al de establecer un papel tapiz en el escritorio de del
sistema operativo Windows.
<BODY BACKGROUND=“IMAGEN.GIF”>
HTML acepta imágenes del tipo .gif , .jpg .bmp y otros formatos.
FORMATEO DE TEXTO
Al texto de la página se le pueden asignar atributos especiales de apariencia,
como lo haríamos con un procesador de textos,(Word).
Las más usadas son:
1. <B>Texto</B> [negritas]
2. <I>Texto</I> [itálicas o cursivas]
3. <U>Texto</U> [subrayado
Ejemplo:
<BODY>
<B>Este texto esta en negritas</B>,
<I>este texto esta en itálicas</I>,
<U>y este texto esta subrayado</U>
</BODY>
O podemos probar combinaciones de ellas:
<BODY>
Este texto esta en <B><I>negritas italicas</I></B></BODY>
La etiqueta <FONT>, la cual tiene varios atributos.
Por ejemplo para modificar el tamaño de la fuente (letra), se utiliza la el atributo
SIZE.
Ejemplo<BODY>
La ultima palabra esta mas
<FONT SIZE="6">Grande</FONT>
</BODY>
Las letras de un texto pueden escalarse a 7 tamaños diferentes, siendo 1 la más
pequeña y 7 la más grande.
El valor predeterminado es 3.
Para cambiar el tipo de letra se realiza mediante el empleo del atributo FACE.
<BODY>
La ultima palabra esta en letra <FONT FACE="ARIAL">Arial</FONT>
</BODY>
El tipo de letra se apreciará sólo si el visitante tiene en su computadora el mismo
tipo de letra instalado.
Se puede especificar letras alternativas, por si acaso no se tenga la que desea.
<BODY><FONT FACE="ARIAL, COURIER, TAHOMA">Para no fallar</FONT></BODY>
Para cambiar el color a la letra; se incluye el atributo COLOR dentro de la etiqueta
<FONT>
<BODY>
<FONT COLOR="#FF0000">Un texto rojo</FONT>
</BODY>
O bien, su correspondiente en inglés red.
PÁRRAFOS Y ENCABEZADOS
Hasta ahora se ha visto cómo escribir algo de texto resaltándolo en su totalidad o
por partes mediante la utilización de diversos estilos, apariencias, colores y
tamaños de letra, y que todo aquel texto que escribamos dentro de las etiquetas
BODY es considerado como un párrafo.
Sin embargo, esto no es completamente cierto: formalmente, un renglón de texto
aislado dentro del cuerpo de una página Web no es más que eso... un simple
renglón de texto.
HTML utiliza una etiqueta especial para identificar el comienzo y el final de un
párrafo (aunque esta última es opcional).
La etiqueta de apertura <P> debe situarse antes de la primera letra de nuestro
párrafo, y la etiqueta de cierre opcional </P> al final del mismo
<BODY><P>En HTML, la etiqueta P identifica el comienzo de un parrafo, y la etiqueta /P el
final del mismo, aunque esta ultima es opcional. Sin embargo, es de buena
costumbre utilizar ambas.
</P><P>Este es otro parrafo, y como se podra dar cuenta, se encuentra separado del
anterior por un renglon en blanco.
</P></BODY>Cada vez que el navegador detecta la etiqueta <P> presentará el texto siguiente
empezando en un nuevo renglón.
Si no lo quiere creer, pruebe lo siguiente:
<P>Esto se ve como<P>un solo parrafo,<P>pero en realidad son 3...
</P>
El escribir texto separado en tres renglones no le da al navegador instrucción
alguna.
Si lo que desea es insertar un punto y aparte sin comenzar un nuevo párrafo,
entonces puede usar la etiqueta <BR><P>
Este parrafo si esta separado en varios<BR>
renglones, tanto en el Bloc de Notas<BR>
como en el Navegador...
</P> Si le pidiera que agregara un título a cualquiera de los ejemplos vistos, lo más
probable es que se le ocurra redactar un renglón con letra más grande de lo
normal y usar un efecto de letra más gruesa.
En vez de hacer eso, le recomiendo que utilice la etiqueta <Hn>, donde n es un
valor entre 1 y 7.
Pruebe lo siguiente:
<BODY><H1>Encabezado Nivel l</H1><H2>Encabezado Nivel 2</H2><H3>Encabezado Nivel 3</H3><H4>Encabezado Nivel 4</H4><H5>Encabezado Nivel 5</H5><H6>Encabezado Nivel 6</H6>
</BODY> Para agregar color y tipo de letra solamente añada a FONT con sus atributos
COLOR y FACE antes de la etiqueta de encabezado.
<FONT COLOR="#FF0000" FACE="ARIAL"><H1>Encabezado Nivel 1</H1></FONT>
ALINEACIÓN Y CARACTERES ESPECIALES
A la información contenida en una página Web podemos especificarle la
alineación, como característica especial de diseño.
Para ello, sólo basta con agregar la cláusula ALIGN a las etiquetas <P> y <H1>
Los valores que acepta son:
LEFT (valor predeterminado)
RIGHT
CENTER
JUSTIFY
Ejemplo:
<BODY><H1>Encabezado a la izquierda</H1><H1 ALIGN="CENTER">Encabezado al centro</H1><H1 ALIGN="RIGHT">Encabezado a la derecha</H1><P>Parrafo a la izquierda</P><P ALIGN="CENTER">Parrafo al centro</P><P ALIGN="RIGHT">Parrafo a la derecha</P></BODY>
Otra manera de lograr una alineación centrada es mediante la utilización de la
etiqueta <CENTER></CENTER>; todo lo que esté entre ellas (y con todo nos
referimos tanto a encabezados, como a párrafos, tablas, imágenes, ligas, etc.) se
centrará en la pantalla del Navegador.
<BODY><CENTER><H2>Características de la etiqueta CENTER</H2><P>Todo aquello que se encuentre dentro de las etiquetas<BR>CENTER quedara centrado en la ventana de nuestro navegador:<BR>Encabezados, párrafos, tablas e imágenes por igual...<BR></P></CENTER></BODY>
Para agregar espacio en blanco entre dos palabras realice lo siguiente:
<BODY><P>Texto separado</P></BODY>
3.5 Imágenes
En el mundo de las páginas Web se emplean generalmente dos tipos de formato
para imágenes, el Compuserve Graphics Interchange Format (GIF) y el JPEG –
JFIF Compliant Format (JPG).
El formato GIF se utiliza generalmente para almacenar dibujos, dado que tan sólo
soporta 256 colores, y el JPG se emplea para almacenar fotografías, dado que
soporta hasta 16 millones de colores.
Para insertar una imagen se especifica la etiqueta <IMG> (que al igual que <BR>
no requiere etiqueta de cierre):
<IMG SRC=“imagen.gif">Puede agregar un borde a la imagen:
<IMG SRC=“imagen.gif“ BORDER=“3”>
También podemos hacer que al poner el mouse sobre la imagen aparezca un
texto:
<IMG SRC=“imagen.gif“ ALT=“Texto”>Podemos manipular algunas de las características de ancho y alto de la
imagen.
Para ello ocuparemos las cláusulas WIDTH y HEIGHT.
<IMG SRC=“imagen.gif" WIDTH="130" HEIGHT="101">
3.6 Listas
VII LISTAS
Otra herramienta comúnmente utilizada en HTML (más aún que las imágenes) son
las listas; existen básicamente tres tipos de listas: numeradas, no numeradas y
de glosario.
Todas ellas tienen dos elementos en común: Las etiquetas de apertura y cierre
que rodean a toda la lista, y las etiquetas para cada uno de sus elementos.
LISTAS NUMERADAS:
Asignan un numerador progresivo a cada elemento de forma automática; las
etiquetas de apertura y cierre son <OL> y </OL>, y los elementos se indican con
la etiqueta única <LI>; veamos un ejemplo:
<BODY><H1>PLAZA CRISTAL TUXPAN <H1><OL><LI>OPTICA KRISTELL<LI>ZAPATERIA EL FINO<LI>CONTINOU<LI>JEANS</OL></BODY>
Aunque por omisión se utilizan los números arábigos, el tipo puede cambiarse
dentro de la etiqueta <OL> mediante la utilización de la cláusla TYPE y uno de 4
valores: “A”, “a”, “I”, “i”.
Si desea que la numeración empiece desde un número o letra cuyo valor
equivalente sea diferente a uno, utilice el atributo START.
LISTAS NO NUMERADAS
A estas se les conoce comúnmente como viñetas; las etiquetas de apertura y
cierre son <UL> y </UL>, y los elementos se indican también con la etiqueta única
<LI>
<BODY><H1>PLAZA CRISTAL TUXPAN<H1><UL><LI>OPTICA KRISTELL<LI>ZAPATERIA EL FINO<LI>CONTINOU<LI>JEANS</UL></BODY>
La forma de la viñeta puede cambiarse también con la etiqueta TYPE y uno de
tres valores: "DISC" (disco negro / valor por omisión), "CIRCLE" (círculo hueco) o
"SQUARE" (cuadro negro).
LISTAS DE GLOSARIO
Estas son ideales para crear listas de definiciones; en este caso se utilizarán las
etiquetas de apertura y cierre <DL> y </DL>, y dos etiquetas unilaterales
diferentes: <DT> para el nombre del término y <DD> para la definición de éste.
<BODY><H1>Algunas definiciones:</H1><DL><DT>O.K.<DD>OPTICA KRISTELL<DT>Z.F.<DD>ZAPATERIA EL FINO
<DT>C.C.<DD>CONTINOU<DT>J.N.<DD>JEANS</DL></BODY>
3.7 Vínculos o enlaces
Una de las ventajas de paginas Web , es que, a diferencia de los libros, no
estamos obligados a explorarlo linealmente.
Casi todos los diseñadores de sitios Web sea cualquiera su objetivo utilizan en
sus documentos un esquema de organización jerárquico similar al que se emplea
en los organigramas empresariales.
El primer nivel es ocupado por una página principal o base (home page) de la cual
se desprenden vínculos o ligas (links) al resto de los niveles.
A su vez, las páginas inferiores pueden incluir vínculos con documentos de su
mismo nivel o con documentos en niveles superiores para facilitar el retorno.
Un vínculo puede servir para diferentes propósitos; básicamente, existen tres
tipos:
Subpágina
SubpáginaSubpá
ginaSubpágina
Subpágina
Subpágina
Subpágina
Página
Princi
1. Vínculo a otro documento HTML: Vincula una página Web con otra.
2. Vínculo a un archivo: Vincula nuestra página Web con un archivo de
cualquier tipo.
3. Vínculo a un correo electrónico: Vincula nuestra página Web con un
buzón de correo electrónico.
Cualquiera que sea el caso, todos los tipos de vínculo utilizan la misma
etiqueta <A>, con la siguiente estructura básica:
<A HREF="URL del archivo">Nombre del Vínculo</A>1. URL del archivo: Ubicación (absoluta o relativa) del archivo a vincular.
2. Nombre del vínculo: Texto que se desplegará resaltado en pantalla.
Vínculo a otro documento HTML:
index.html
<BODY><H1>Curso de HTML</H1><A HREF="temas.html">Temas del curso</A></BODY>
temas.html<BODY><H1>Temas del curso</H1><A HREF="unidad1.html">Unidad 1</A><BR><A HREF="unidad2.html">Unidad 2</A><BR><A HREF="unidad3.html">Unidad 3</A><BR></BODY>
En algunos casos necesitaremos vincular páginas remotas con la nuestra; para
ello, es necesario especificar el URL completo del sitio que deseemos ligar con el
nuestro.
Suponga que queremos mostrar algunos vínculos de interés en el archivo
links.html, al cual llegaremos mediante una liga dentro de la página principal.
index.html
<BODY><H1>Curso de HTML</H1><A HREF="Temas.html">Temas del curso</A><BR><A HREF="Links.html">Otros sitios...</A></BODY>
links.html
<BODY><H1>Otros sitios de Interes</H1><A HREF="http://www.google.com">Buscador Google</A><BR><A HREF="http://www.ver.ucc.mx">Pagina de la UCC</A></BODY>
Vínculo a un archivo:
Frecuentemente, las páginas Web proporcionan ligas hacia archivos de diferentes
tipos, ya sea para desplegarlos en el propio Navegador (imágenes, videos, etc.) o
para descargarlos en nuestra computadora.
Suponga que esta presentación se encuentra contenida en el archivo
presentacion.html y deseo ofrecerlo en la página principal.
index.html<BODY><H1>Curso de HTML</H1><A HREF="temas.html">Temas del curso</A><BR><A HREF="links.html">Otros sitios de interes...</A><BR><A HREF=“presentacion.ppt">Curso en Powerpoint</A></BODY>
Vínculo a un correo electrónico
La opinión de los demás cuenta mucho, y qué mejor que facilitar a nuestros
visitantes la comunicación vía correo electrónico con el autor de la página. Tan
sólo escriba mailto: seguido de la cuenta de correo del Webmaster en lugar de un
URL, y un nombre de vínculo adecuado.
index.html<BODY><H1>Curso de HTML</H1><A HREF="temas.html">Temas del curso</A><BR><A HREF="links.html">Otros sitios de interes...</A><BR><A HREF=“presentacion.ppt">Curso en X</A><A HREF="mailto:[email protected]">Asesor> </BODY>
1. También es posible proporcionar vínculos a través de imágenes.
2. Supongamos el siguiente ejemplo: desea crear una página en donde
muestre fotografías de diversos automóviles.
3. Podemos presentar versiones reducidas de dichas imágenes y
vincularlas con páginas que contengan la fotografía original.
<BODY><H1>OSOS</H1><IMG SRC="osito1.gif"><IMG SRC=" osito2.gif"><IMG SRC=" osito3.gif"><H4>Haga clic en la imagen para aumentarla</H4></BODY>
<BODY><H1>OTROS OSOS</H1><A HREF="osos1.html"> <IMG SRC="car1sm.gif"></A><IMG SRC="osos1.gif"><IMG SRC=" osos1.gif"><H4>Haga clic en la imagen para aumentarla</H4></BODY>
3.8 Tablas
El uso de tablas en una página Web es un medio excelente para presentar de
manera resumida gran cantidad de información; sus partes más importantes son:
1. Título: Nombre principal que nos indica de qué se trata nuestra tabla.
2. Encabezados: Texto que identifica las diferentes filas y/o columnas de
que está compuesta una tabla; por lo general van en letra enfatizada.
3. Datos: Valores que contiene la tabla.
4. Celdas: Cada una de los rectángulos formados por la intersección de
una columna con una fila.
Las etiquetas de apertura y cierre <TABLE> y </TABLE> son las encargadas de
contener todo el código de nuestra tabla.
El atributo BORDER dentro de la primera etiqueta genera un recuadro gráfico
alrededor y dentro de ella; en algunas ocasiones puede convenirnos no emplearlo.
En HTML, el contenido de una tabla se debe especificar fila por fila, celda por
celda.
Las etiquetas de apertura y cierre para definir una fila son <TR> y </TR>Para definir una celda se emplean <TH> y </TH> (en caso de encabezados) o
<TD> y </TD> para los datos.
<BODY><TABLE BORDER><TR>
<TH></TH><TH></TH><TH></TH>
</TR><TR>
<TD></TD><TD></TD><TD></TD>
</TR></TABLE></BODY>
Para añadir un título a nuestra tabla se utilizan las etiquetas <CAPTION> y </CAPTION
<BODY><TABLE BORDER><CAPTION>Tabla 1</CAPTION>
<TR><TH>Encabezado1</TH><TH>Encabezado2</TH><TH>Encabezado3</TH>
</TR><TR>
<TD>Dato1</TD><TD>Dato2</TD><TD>Dato3</TD>
</TR></TABLE></BODY>
Podemos modificar algunas propiedades de la tabla, como la alineación, el ancho,
color de fondo, ancho del borde.
1. ALIGN=“valor”
2. WIDTH =“valor” (en píxeles o porcentaje)
3. BORDER=“valor” (en píxeles)
Podemos modificar algunas propiedades de una celda en particular, como la
alineación, el ancho, color de fondo, relleno, espaciado con respecto al borde.
1. VALIGN=“valor” (top, bottom, middle)
2. ALIGN=“valor”
3. WIDTH=“valor” (en píxeles o porcentaje)
4. CELPADDING=“valor” (en píxeles)
5. CELSPACING=“valor” (en píxeles)
6. Se puede mezclar celdas ya sea con respecto a las filas o a las columnas.
7. Es necesario utilizar el atributo ROWSPAN para lo primero y COLSPAN para
lo segundo.
3.9 Frames
Una de las configuraciones más utilizadas es la de diseñar ventanas paralelas
para realizar consultas desde una de ellas y ver los resultados en la otra. La
sintaxis de las vistas es muy similar a la de las tablas y están diseñadas para ser
procesadas rápidamente por los visores.
Veamos a continuación las etiquetas básicas.
Hay que destacar que el código principal de una página con frames no presenta
las etiquetas <BODY> </BODY>. El código deberá estar incluido entre las
etiquetas <HEAD> </HEAD>,
Así pues, obviamente la primera etiqueta a utilizar es <FRAMESET>, que es la
que permite dividir la pantallas en ventanas, ya sean verticales u horizontales. Los
atributos encargados de determinar el aspecto de esas ventanas son ROWS y
COLS, filas y columnas respectivamente.
ROWS se encargara de definir el número de divisiones verticales a efectuar,
mientras que COLS hace lo propio pero con las divisiones horizontales.
<HTML><HEAD></HEAD><FRAMESET ROWS="30%,70%"><FRAME>
<FRAMESET COLS="30%,70">
<FRAME><FRAME></FRAMESET>
</FRAMESET>
</HTML>
Por el momento, nuestros frames están vacíos, entonces vamos a darles de comer
con atributos de la etiqueta <FRAME> :
SRC="URL” dirección del documento a presentar en la ventana
Construimos 3 ficheros Html elementales que ponemos en el mismo repertorio que
el fichero de frames.
A.htm B.htm C.htm
<HTML>
<BODY>
<H4>A</H4>
</BODY>
</HTML>
<HTML>
<BODY>
<H1>B</H1>
</BODY>
</HTML>
<HTML>
<BODY>
<H1>C</H1>
</BODY>
</HTML>
<HTML><HEAD></HEAD>
<FRAMESET ROWS="30%,70%"><FRAME SRC="A.htm"><FRAMESET COLS="30%,70%">
<FRAME SRC="B.htm"><FRAME SRC="C.htm"></FRAMESET>
</FRAMESET>
</HTML>
Los ascensores, como en la ventana A, aparecen automáticamente. Por atributo
de la etiqueta <FRAME>SCROLLING="yes/no/auto". Puede indicar si la ventana
ha de tener o no una barra de deslizamiento.
Otro atributo de esta etiqueta <FRAME> es NAME="nombre". NAME indica el
nombre de la ventana de tal manera que este FRAME pueda ser utilizado como el
blanco de un enlace hipertexto. Si desearíamos hacer un enlace en B para visualizar el
contenido de este enlace (cogemos el archivo A.htm para evitar la codificación) en C.
El archivo de frames ahora es:
Y ponemos un enlace hacia A.htm en el archivo B.htm escogiendo como blanco
el frame C.
<FRAMESET ROWS="30%,70%">
<FRAME SRC="A.htm">
<FRAMESET COLS="30%,70%">
<FRAME SRC="B.htm"><FRAME SRC="C.htm"
NAME="ventanaC">
</FRAMESET></FRAMESET>
<HTML><HEAD></HEAD>
<BODY><A HREF="A.htm" TARGET="ventanaC"><H1>B</H1></A></BODY></HTML>
El atributo TARGET puede también tomar ciertos valores predefinidos:
_blank que indica al browser que tiene que crear una nueva ventana a fin de
mostrar el archivo. En este caso, un nuevo browser está abriendo efectivamente.
_self que indica que el archivo se cargará en la misma ventana que la en la cual
se encuentra el enlace.
_top que implica la visualización en toda la superficie de la ventana del browser.
3.5 Formularios
Los formularios pueden introducirse en cualquier parte del documento, es decir, en
tablas, dentro de un texto preformateado, etc. Evidentemente un formulario puede
contener en su interior listas, imágenes, etc.
La etiqueta que define el inicio de un formulario es <FORM> y el final del mismo
</FORM>.
También podemos encontrar las etiquetas que definen los campos de entrada
<INPUT>, las que definen los campos de selección <SELECT> y las áreas de
texto <TEXTAREA>.
Declaración del formulario <FORM>.
Como se vio anteriormente, los elementos que componen un formulario deben
encontrarse entre las etiquetas <FORM> y </FORM>
Atributos de la etiqueta <FORM>.
Action. Atributo que determina la acción que debe realizarse al pulsar el
botón de ejecución.
METHOD. Indica el método de transferencia que debe realizarse al pulsar
el botón de ejecución.
El método GET envía la información a través de una variable llamada
QUERY_STRING. Por el contrario, el método POST utiliza dos variables:
CONTENT_LENGTH, que contiene la longitud de datos enviados, y
CONTENT_TYPE, que son los datos propiamente.
Definición de campos de entrada <INPUT>
La etiqueta <INPUT> se emplea para definir todos los elementos del formulario,
como botones, cajas de texto, casillas de verificación, etc.
El atributo que determina el tipo de elemento es el TYPE.
Los distintos tipos de entradas son:
Checkbox. Cuadro vacíos de selección. Permite selecciones múltiples.
Hidden. Se utiliza para pasar los datos adquiridos en un formulario a otro
sin que se visualice nada en la pantalla.
Text. Como su nombre indica se utiliza para la entrada de textos.
Password. Permite la introducción de texto visualizándose para cada
carácter un asterisco.
Radio. Circulo vacío de selección. Sólo permite una opción entre varias.
Reset. Borra todos los datos introducidos en el formulario.
Submit. Envía la información del formulario.
Checkbox.
Esta opción se utiliza para elegir a una serie de opciones disponibles
pudiéndose realizar selecciones múltiples.
Los elementos de este tipo requieren mínimo los atributos NAME y
VALUE, que indican respectivamente el nombre del tipo o grupo de tipos y el
valor del campo.
También podemos incluir el atributo CHECKED cuando queramos que
esa opción aparezca seleccionada por defecto.
Veamos el código de ejemplo
HTML>
<HEAD> <TITLE>Mi primera página con marcos</TITLE> </HEAD>
<FORM>
<INPUT TYPE="checkbox" NAME="sistema" VALUE="win98">Windows98<BR>
<INPUT TYPE="checkbox" NAME="sistema" VALUE="mE"> WindowsMe<BR>
<INPUT TYPE="checkbox" NAME="sistema" VALUE="Linux" >Linux<BR>
<INPUT TYPE="checkbox" NAME="sistema" VALUE="Otros"
CHECKED>Otros<BR>
</FORM>
</HTML>
3.10. Password
Este tipo se utiliza generalmente para la introducción de claves de acceso, el texto
que se va escribiendo en la ventana no es legible por curiosos ay que los
caracteres son sustituidos por asteriscos a medida que se van introduciendo.
Código de ejemplo:
<HTML>
<HEAD> <TITLE>Mi primera página con marcos</TITLE></HEAD>
<FORM>
Introduzca Nombre de usuario:<INPUT NAME="usuario"><BR>
Contraseña : <INPUT TYPE="password" NAME="pass">
</FORM>
</HTML>
El programa se vera así:
RadioEsta opción es similar a checkbox, pero sólo permite elegir una opción de entre
todas.
Los elementos de este tipo requieren como mínimo los atributos NAME y
VALUE. Recordemos que el atributo CHECKED permite seleccionar por
defecto una opción.
Veamos el código de ejemplo:
HTML>
<HEAD> <TITLE>Mi primera página con marcos</TITLE></HEAD>
<FORM>
<INPUT TYPE="radio"NAME="edad"VALUE="-18">Menos de 18 años<BR>
<INPUT TYPE="radio"NAME="edad"VALUE="18-25">Entre 18 y 25 años<BR>
<INPUT TYPE="radio"NAME="edad"VALUE="25-35"CHECKED>Entre 25 y 35
años<BR>
<INPUT TYPE="radio"NAME="edad"VALUE="35-50">Entre 35 y 50<BR>
<INPUT TYPE="radio"NAME="edad"VALUE="+50">Mas de 50<BR>
<INPUT TYPE="password" NAME="pass">
</FORM>
</HTML>
El código se vera así:
ResetHay poco que decir acerca de este tipo. Como su nombre indica, se usa para
eliminar del formulario todos los valores introducidos.
Su aspecto es el de un botón y su nombre se especifica con el atributo VALUE.
Submit
Es el botón que se encarga de enviar el formulario. Al igual que en el caso
anterior, la etiqueta del botón se determina mediante el atributo VALUE.
Veamos un código de ejemplo:
<INPUT TYPE=”SUBMIT” VALUE=”Pulsa aquí para enviar el formulario”>
<INPUT TYPE=”RESET” VALUE=”Pulsa aquí para borrar todos los datos”>
El código se vera así:
Definición de campos de selección <SELECT>
La etiqueta <SELECT>..<SELECT> permite al usuario seleccionar una opción de
un conjunto de elementos mostrados como una lista desplegable, donde cada una
de las opciones se introduce mediante el elemento de OPTION. Con el atributo
SELECT podemos visualizar una determinada opción de la lista.
Los atributos que reconoce son:
Múltiple. Por defecto sólo puede ser seleccionado una sola opción. Ese atributo
permite seleccionar más, pulsando la tecla CTRL junto con la opción.
NAME. Atributo que especifica el nombre de la lista de selección.
SIZE. Atributo que determina el número de ítems visibles superior a 1. en este
caso muestra una barra de desplazamiento lateral.