Manual de Paginas HTML

Manual de Paginas HTML (HyperText Markup Language) 1
Introducción a Programacion Web
Todo documento HTML está compuesto por etiquetas (tags). Este es el nombre que se le da a los
comandos HTML. Debes comenzar tu página con la etiqueta <HTML>, en el primer renglón del código, y
terminar con </HTML> en el último renglón del documento. Fíjate que la barra "/" señala el cierre de la
etiqueta. Este cierre es necesario para que pueda ser interpretada por el navegador. La estructura de las
etiquetas se codifica de la siguiente forma:
<HTML>
<HEAD>
<TITLE> Mi documento HTML </TITLE>
</HEAD>
<BODY>
Aquí van los comandos HTML.
</BODY>
</HTML>
<BODY BGCOLOR="color" TEXT="color" LINK="color" ALINK="color" VLINK="color"

BACKGROUND="imagen que va a aparecer">
Donde:
- BGCOLOR
Color de fondo (padrón: gris o blanco)
- TEXT
Color de los textos de la página (padrón: negro)
- LINK
Color de los enlaces (padrón: azul)
- ALINK
Color de los enlaces al accionarse (padrón: rojo)
- VLINK
Color de los enlaces después de visitados (padrón: azul oscuro o bordó)
- BACKGROUND
Imagen de fondo.
En "color", puedes colocar los valores de colores en inglés, como:

Negro = black
Blanco = white
Azul = blue
Amarillo = yellow
Rojo = red
<Cómo incluir textos>

Etiquetas de título <H> - "Headings"
Con ellas puedes definir solamente el tamaño de las letras, pero no el tipo de fuente. Mira como quedan
las etiquetas de título, "headings", para encabezamientos que van desde el tamaño 1 al 6.
<H1> Este es el primer nivel </H1>

<H2> Este es el segundo nivel </H2>
<H3> Este es el tercer nivel </H3>
<H4> Este es el cuarto nivel </H4>
<H5> Este es el quinto nivel </H5>
<H6> Este es el sexto nivel </H6>
Este es el primer nivel

Este es el segundo nível
Este es el tercer nível
Este es el cuarto nível
Este es el quinto nível
Este es el sexto nível
La etiqueta es <FONT>
dentro de ella puedes definir varios parámetros, como color, tamaño y tipo de letra. Las
etiquetas de fuentes se utilizan de la siguiente manera:
FACE:
Esta opción te permite seleccionar la fuente (tipo de letra) para los textos, la etiqueta se realiza como
sigue:
<FONT FACE=fuente_de_letra>Texto</FONT>
Ejemplo:
<FONT FACE=Times>Fuente Times New Roman </FONT>

Fuente Times New Roman
COLOR y SIZE:
Atributos de color y tamaño:
<font size="3"> La palabra tendrá tamaño 3</font>

La palabra tendrá tamaño 3
<font color="red"> A palavra terá a color rojo</font>

La palabra tendrá color rojo .
También podemos combinar las etiquetas de arriba:
<font face="Arial" size="2" color="red">Palabra con tamaño 3 y en rojo </font>
<Formatear textos>
<B> Texto </B> - Texto queda en Negrita.
<U> Texto </U> - Texto Subrayado.
<I> Texto </I> - Texto en Cursiva.

<CENTER> Texto </CENTER> Texto centrado
Los códigos también se pueden escribir unos sobre otros, acumulando sus efectos, como por ejemplo:
<CENTER><B><U>Prueba 1</U> <I>y</I> Prueba 2</B></CENTER>
Para comenzar un nuevo párrafo, basta colocar la etiqueta <P>. Por ejemplo, escribe en el editor lo
siguiente, de esta forma:
Párrafo 1<P>Párrafo 2.
El resultado será el siguiente:
Párrafo 1
Párrafo 2
Como puedes ver, el navegador, por si mismo, comienza un nuevo párrafo cada vez que agregas esta
etiqueta. En caso de que quieras simplemente cambiar de renglón, en lugar de cambiar de párrafo, debes
colocar la etiqueta <BR>. Por ejemplo, debes escribir:
Párrafo 1<BR>Renglón 1<P>Párrafo 2<BR>Renglón 2.

Párrafo 1
Renglón 1
Párrafo 2
Renglón 2
Los párrafos también pueden tener atributos para alinear los textos. No hay más que incluir, después de
"P", el parámetro "align=tipo de alineación". Los atributos son:
- Left: Alineación a la izquierda

- Rigth: Alineación a la derecha
- Center: Centrado
- Justify: Texto justificado (Funciona únicamente con navegadores versión 4 o superior)
Incluir uno de estos atributos es fácil. Mira los ejemplos:
<p align="left">Texto alineado a la izquierda</p>
<p align="right">Texto alineado a la derecha</p>
<p align="center">Texto centrado</p>
<p align="justify">Texto justificado</p>
<Cómo incluir imágenes>
Los formatos ideales para homepages son GIF y JPG. No se puede usar el formato BMP.
La etiqueta para insertar una imagen en tu página es la siguiente:
<img src="nombre del archivo de imagen que va a aparecer">
<Cómo alinear imágenes>

Existen muchos recursos que puedes usar para alinear los textos e imágenes en tu página, y darles una
organización y una apariencia diferentes. Para las alineaciones, debes incluir los parámetros dentro de la
etiqueta de imagen, como sigue:
Puedes ver cómo queda el texto en la imagen. Este es un ejemplo de alineación

padrón; no es necesario incluir ninguna etiqueta.
Ahora puedes ver cómo queda el texto en la parte superior de la imagen.
Este es un ejemplo de alineación al borde superior de la imagen. Para lograr esta alineación, la etiqueta
de imagen debe quedar así:
<img src="nombre de la imagen" align="top">

Fíjate que solamente incluimos align="top" en la etiqueta de imagen.
Observa ahora cómo queda el texto en mitad de la imagen.
Este es un ejemplo de alineación al medio de la imagen. Para lograr este efecto, la etiqueta de imagen
debe quedar así:
<img src="nombre de la imagen" align="middle">

Fíjate que solamente incluimos align="middle" en la etiqueta de imagen.
El texto también puede quedar alrededor de las imágenes, como es común en los periódicos. Este es un
excelente recurso cuando deseas colocar un texto al lado de una fotografía que destaca el tema del texto.
La etiqueta para esta alineación es:

<img src="nombre de la imagen" align="left">
En el siguiente ejemplo, la imagen está alineada al lado derecho, y el texto queda alrededor. Es
exactamente lo opuesto a la alineación a la izquierda.
La etiqueta para esta alineación es:

<img src="nombre de la imagen" align="right">
- Para lograr una imagen centrada:

<CENTER><img src="nombre de la imagen"></CENTER>
El resultado será:
<Cómo crear enlaces>
Los enlaces son los puntos del documento HTML que, al hacer clic en ellos, nos llevan a cualquier otro
documento de tu página o sitio en Internet.
<a href="nombre-del-lugar-a-ser-llevado">descripción</a>
"Nombre-del-lugar-a-ser-llevado" aquí colocas el archivo que quiere que sea visitado, por ejemplo
datos.htm, o un URL como http://www.starmedia.com.
- "Descripción" es lo que aparecerá subrayado en la homepage indicando que se puede hacer clic ahí.
Por ejemplo, si la descripción fuese "Haz clic aquí para visitar StarMedia", tendrías que colocar este
código:
<a href="http://www.starmedia.com">Haz clic aquí para visitar StarMedia </a>
<Listas>
Las listas se hacen para crear menús simples u organizar temas y textos en tu página.
En las listas ordenadas, el navegador se encarga de colocar los números de referencia de cada lista. Una
lista ordenada va enmarcada por el par <OL> ... </OL>.
Ejemplo 1:
<OL>
<LI> Primer elemento de una lista ordenada
<LI> Segundo elemento de una lista ordenada
<LI> Tercer elemento de una lista ordenada
</OL>
El resultado sería el siguiente:

1. Primer elemento de una lista ordenada
2. Segundo elemento de una lista ordenada
3. Tercer elemento de una lista ordenada
En listas no ordenadas se utiliza algún símbolo gráfico. Este tipo de lista va enmarcada por el par <UL> ...
</UL>.
Para que el interpretador distinga un fragmento de texto de una lista, se deberá colocar en el inicio de
cada línea el comando <LI>, no hay necesidad de cerrar esta etiqueta con </LI>. Algunos ejemplos:
Ejemplo 2:
<UL>
<LI> Primer elemento de una lista sin orden
<LI> Segundo elemento de una lista sin orden
<LI> Tercer elemento de una lista sin orden
</UL>
 Primer elemento de una lista sin orden

 Segundo elemento de una lista sin orden

 Tercer elemento de una lista sin orden
<Insertar imagen de fondo>

Así como se puede definir un color de fondo diferente para las páginas, también es posible colocar una
imagen como tapiz.
La imagen de fondo es un atributo que colocamos dentro de la etiqueta <BODY> sobre la que aprendiste
al principio de este Tutorial. Mira como queda:
<BODY BACKGROUND="nombre de la imagen">
En "nombre de la imagen" debes colocar el nombre del archivo de imagen que deseas poner de fondo.
Puede ser un archivo GIF o JPG.
<Letreros y líneas>
Existen más recursos para usar en tu sitio. Uno de ellos es el letrero, mediante el cual la imagen
permanece "desplazándose" por la pantalla. Se logra con la etiqueta "<MARQUEE>", pero este recurso
funciona solamente con Internet Explorer. En Netscape, el texto permanecerá inmóvil, por lo que debes
pensar si realmente valdrá la pena usarlo.
Para usar este recurso:
<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>
- En "BEHAVIOR" colocas el tipo de efecto, que puede ser "SCROLL" o "SLIDE".

- En "WIDTH" puedes definir el tamaño que el letrero tendrá en la pantalla. Mira:
<MARQUEE BEHAVIOR=SCROLL WIDTH=100%>Texto</MARQUEE>
<Tablas>
Las tablas fueron una gran conquista para los autores de los documentos Web. Con ellas es posible, por
ejemplo, tener las páginas de este manual organizadas en columnas, quedando una de ellas dedicada
exclusivamente a los enlaces de navegación y observaciones. Las tablas implementan un importante
concepto de diseño, las “grades” de acuerdo con las cuales organizamos textos e ilustraciones de forma
organizada.
El formato de las tablas forma parte de la versión 3.0 del lenguaje HTML. Manipular las tablas en HTML
cuesta trabajo y se necesita paciencia.
La etiqueta para crear una tabla es <TABLE>, y dentro de ella colocas atributos importantes para el
correcto formato de la tabla. No olvides cerrar la etiqueta con </TABLE>.
<TABLE BORDER>
Este elemento delimita la tabla y el espesor de sus bordes:
<TABLE BORDER=valor del espesor> ... </TABLE>
- WIDTH y HEIGHT
Con estos atributos, puedes definir el tamaño que la tabla va a ocupar en la pantalla. WIDTH (ancho),
HEIGHT (altura). Pueden ser en píxeles o en porcentaje. HEIGHT, altura, no es prácticamente usado,
pero el valor del ancho es muy útil. Lo usas de la siguiente manera:
<TABLE BORDER=valor da borda WIDTH="valor del borde>

Un ejemplo de tabla cuyo ancho es el 75% de la pantalla (WIDTH="75%"):
Columna 1 Columna 2
fila 1, columna 1 fila 1, columna 2
- Colores de Fondo:
Cuando creas una tabla, su fondo es transparente, por lo tanto, siempre va a adoptar el color de fondo o
la imagen de fondo de la página. Pero es posible definir el color de fondo para cada celda, fila y columna
de una tabla. Para ello debes incluir el atributo "BGCOLOR". Quedaría así:
<table border=2>
<th bgcolor="#FF0000">Columna 1</th>
<th bgcolor="#009900">Columna 2</th>
<tr>
<td>fila 1, columna 1</td>
</tr>
<tr>
</tr>
</table>
Resultado:
Columna 1 Columna 2
fila1, columna 1 fila 1, columna 2
<Cómo agregar sonidos>

Los archivos de sonido ideales para insertar en una homepage son los que están en formato MIDI (.MID),
pero también se pueden incluir sonidos tipo WAVE (.WAV).
Netscape e Internet Explorer tienen algunas diferencias en su sistema y, por lo tanto, en algunas
versiones de Netscape el sonido no se escucha correctamente.
La etiqueta debe ser <EMBED>. Por ejemplo:
<embed src="nombre del tema" loop="2" autostart="true">
- En "nombre del tema" colocas el nombre del tema mid o wav.

- En "loop" colocas el número de veces que quieres que se repita.
- En "autostart" defines si quieres que la música comience a tocar sola (atributo TRUE). Si
colocas "FALSE" el usuario tendrá que hacer clic en el botón"play" para escucharla.
Si quieres que se repita infinitamente, basta colocar "infinity" en lugar de un número. No es

necesario colocar "</embed>" en ese caso.
<Marcos >
Los marcos son divisiones de la pantalla del navegador en varias pantallas (o "marcos"). De esta forma se
puede presentar más de una página por vez; por ejemplo, un índice principal en una parte pequeña de la
pantalla y los textos relacionados con el índice en otra parte. Se trata de un recurso muy usado para crear
menús de navegación que se mantienen fijos, cambiando solamente otro marco en el que aparecen las
páginas.
Para crear una página con dos marcos, tendrás que crear por lo menos 3 páginas, que resultarán en una.
Esto se debe a que cada marco es una página HTML (2 marcos) y hay una tercera página principal dentro
de ella.
Para crear un marco, primero debes crear dos páginas simples y guardarlas en el mismo directorio. Luego
creas una tercera página con la siguiente etiqueta:
<HTML>
<HEAD>
<TITLE> Coloca el Título aquí </TITLE>
</HEAD>
<FRAMESET COLS=20%,80%>
<FRAME SRC="a.html">
<FRAME SRC="b.html">
</FRAMESET>
<BODY>
</BODY>
</HTML>
Recuerda siempre colocar el código para los marcos después de la etiqueta </head> y antes de la
etiqueta <body>.
La parte FRAMESET define la división de la página en "marcos". En este ejemplo, la página se dividirá en
dos columnas (Atributo COLS), la primera ocupará 20% del tamaño de la pantalla, y la segunda el
restante 80%.
Dentro del formato FRAMESET, tenemos los FRAME SRC, , tenemos los FRAME SRC, que son
referencias a las páginas que serán mostradas en los marcos definidos. Aquí vemos la página "a.html"
mostrada en la primera columna (que ocupará 20% de la pantalla), y "b.html" en la segunda (ocupando
80% de la pantalla).
Substituye "a.htm" para la primera página que has creado por "b.htm" en la segunda.
Guarda y observa el resultado.
Este es el comando básico para hacer una página con marcos. Veamos los tipos de marcos que es
posible crear. En la sección "Descarga de ejemplos" podrás bajar archivos con ejemplos de marcos que te
facilitarán la construcción de páginas.
Creando Framesets
Como probablemente hayas observado, FRAMESET tiene atributos que definen la división de
la ventana del navegador en columnas; esta división también puede hacerse en filas, y
utilizando una combinación de "framesets" para diversas presentaciones. Recuerda siempre
colocar el código para los marcos después de la etiqueta </head> y antes de la etiqueta
<body>. Verifica los tipos de divisiones más comunes que puedes hacer. Podrás hacer la
descarga de los archivos de ejemplos en este manual.
<FRAMESET COLS="20%, 80%">

<FRAME SRC="columna1.html">
</FRAMESET>
<FRAMESET ROWS="20%, 80%">

<FRAME SRC="fila1.html">
</FRAMESET>

</FRAMESET>
</FRAMESET>
</FRAMESET>
</FRAMESET>
Recuerda que los marcos fijos no necesitan nombre, pero aquellos que tendrán textos, sí lo necesitan.
El sencillo ejemplo que hemos visto hasta ahora sigue el modelo de la primera composición (en
columnas). Las composiciones con más de un frameset necesitan planificarse cuidadosamente para que
funcionen bien. Los valores de los atributos COLS y ROWS pueden ser alterados conforme a tus
necesidades.
- Atributos Especiales:
Hasta aquí hemos visto los atributos COLS y ROWS (para FRAMESET), SRC y NAME (para FRAME).
Existen otros que te permiten un mayor control de la presentación:
- FRAMEBORDER="NO"
Eliminación de bordes de los marcos: "NO" sin bordes, "YES" con bordes.
- BORDER="valor del espacio"

Eliminación del espacio entre los marcos.
- SCROLLING="NO"
Marco sin barra de desplazamiento. La opción "YES" define la existencia de la barra de desplazamiento.
Combinando estos atributos en una etiqueta de marcos simple tendríamos:
<FRAMESET COLS="20%, 80%" FRAMEBORDER="NO" BORDER="0" SCROLLING="NO">

<FRAME SRC="col1.html">
<FRAME SRC="col2.html">
</FRAMESET>
<Formularios - Parte 1>

Un formulario es un modelo para la entrada de un conjunto de datos. Se usan mucho en registros
electrónicos o para el envío de emails a páginas sin necesidad de abrir un programa de email o escribir
direcciones, y ofrece la ventaja de tener campos para cada tipo de información.
El primer paso para hacer formularios es aprender cuáles son las etiquetas que hacen los campos de
entrada de datos.
El elemento <FORM> inicia un formulario y contiene una secuencia de elementos de entrada y de formato
del documento.
<FORM ACTION="URL_de_script" METHOD=método>...</FORM>
- Atributos de la etiqueta <FORM>

- ACTION
Especifica el URL del "script" al que se enviarán los datos del formularios.
- METHOD
Selecciona un método para acceder a los URL de acción. Los métodos empleados actualmente son GET
y POST. Ambos métodos transfieren datos del navegador al servidor, con una diferencia básica:
 POST
Los datos insertados hacen parte del cuerpo del mensaje enviado al servidor; transfiere gran
cantidad de datos.
 GET
Los datos insertados hacen parte del URL asociado a la consulta enviada al servidor; soporta
hasta 128 caracteres.
FORMULARIOS
Los formularios pueden contener formatos de todo tipo: párrafos, listas, tablas, imágenes, a excepción de
otros formularios. En particular, colocamos dentro de la marca de <FORM> los formatos para campos de
entrada de datos, que son tres: <INPUT>, <SELECT> y <TEXTAREA>.
Todos los campos de entrada de datos tienen un atributo NAME, al que se asocia un nombre usado
posteriormente por el sistema para enviar los datos. Normalmente se utilizan "scripts".
Los "scripts" organizan estos datos de entrada de todos los campos en un conjunto de informaciones y
realizan una tarea programada, como por ejemplo enviar los datos del formulario a tu email. El lenguaje
HTML no tiene condiciones de hacerlo, por lo que es preciso utilizar scripts CGI, PERL o ASP para
ejecutar estas tareas. Sin embargo, estos tipos de scripts requieren mayor tiempo de aprendizaje y son
mucho más complejos que el HTML, pues procesan información.
Puedes utilizar scripts ya elaborados en tus formularios, pero de momento todavía no es posible que
miembros de Orbita ejecuten los scripts en los servidores.

Cómo crear los campos de entrada de datos.
Es necesario crear los campos donde los usuarios ingresarán los datos y seleccionarán las opciones.
Estos campos se incluyen dentro de la etiqueta <FORM>. Te explicaremos qué función cumple cada uno
y cómo crearlos:
<INPUT>
Esta es la etiqueta para iniciar la creación de campos de datos.
Existen varios atributos que permiten crear diferentes campos de
entrada de datos. Veamos:
- Campo de datos de texto

Cuando INPUT no presenta atributos, se adopta TYPE=TEXT como padrón de formato:
<FORM>
Nombre: <INPUT TYPE=TEXT NAME="Nombre">
</FORM>
O solamente:
<FORM>
Nombre: <INPUT NAME="Nombre">
</FORM>
Resultado:
Nombre:
- Campo de datos de texto en formato clave
Se trata de un ingreso de texto cuyos caracteres aparecen disimulados por asteriscos. Se utiliza mucho
para el ingreso de claves, como puede verse en el ejemplo.
<FORM>
Usuario: <INPUT TYPE=TEXT NAME="login"><br>
Clave: <INPUT TYPE=PASSWORD NAME="clave">
</FORM>
Resultado:
Usuario:
Clave:
- Atributo NAME
Existe especialmente para que le des un nombre al campo, no aparece en la página, pero sirve para
identificar el campo y el valor ingresado en el email que tú recibas. Nunca dejes de definir el nombre de
los campos, sólo así podrás saber cómo completó cada usuario determinado campo. Si tienes, por
ejemplo, varios campos de texto, cada uno para un tipo de información diferente, utilizarás el nombre para
identificar el campo. Siempre verás que en todas las etiquetas INPUT este atributo está presente.
Unicamente tienes que incluirlo como sigue:
<INPUT TYPE=TEXT NAME="coloca el nombre del campo">

- Atributo VALUE
- VALUE
Puede usarse para dar un valor inicial a un campo de tipo texto o clave. De este modo, si el usuario no
completa este campo, se adoptará un valor padrón. Si el usuario quiere ingresar datos, sólo tendrá que
borrar lo que ya está escrito.
Nombre: <INPUT TYPE=TEXT NAME="nombre" VALUE="Tu nombre">
Resultado:
Nombre:
- Atributo SIZE
- SIZE
Especifica el tamaño del espacio en el video para el campo del formulario. No es válido más que para los
campos TEXT y PASSWORD. El valor padrón es 20.
<FORM>
Dirección: <INPUT TYPE=TEXT SIZE=35>
</FORM>
Resultado:
Dirección:
- Atributo MAXLENGTH
- MAXLENGTH
Es el número de caracteres aceptados en un campo de datos; este atributo es válido solamente para
campos de entrada TEXT y PASSWORD.
<FORM>Día del mes:

<INPUT TYPE=TEXT NAME="ex" MAXLENGTH=2>
</FORM>
Resultado:
Día del mes:
Sólo dos caracteres serán leídos por el formulario, sin importar cuánto se escriba en ese campo.
- Campo de Datos Oculto (Hidden)
Este tipo de campo funciona como un campo de texto, pero sin aparecer en el formulario para el visitante.
Está en el código, pero el visitante no lo puede ver ni cambiar. Es muy útil para incluir informaciones
importantes que no deben ser modificadas por el visitante.
Observa un ejemplo:
<FORM>
<INPUT TYPE=HIDDEN NAME=Oculto Value=Si>
</FORM>
Aquí el campo está oculto. El visitante no lo ve, pero el mismo será procesado por el formulario. Puedes
incluirlo sin ningún problema junto con los demás elementos. Por ejemplo:
<FORM>
Usuario: <INPUT TYPE=TEXT NAME=login><br>
Clave: <INPUT TYPE=PASSWORD NAME="clave">
<INPUT TYPE=HIDDEN NAME=Oculto Value=Si>
<FORM>
- Múltiple opción
También puedes crear un campo donde el usuario precise solamente seleccionar las opciones, sin escribir
nada. Hay dos tipos de selección básicos:
- CHECKBOX
Inserta un botón para elegir valores para diferentes opciones.
<INPUT TYPE=CHECKBOX NAME="deporte" VALUE="básquebol">Básquebol <br >

<INPUT TYPE=CHECKBOX NAME=deporte VALUE=bochas>Bochas
Un atributo "CHECKED" marca una elección inicial, es decir, si el usuario no escoge ninguna opción, el
formulario considerará la alternativa "pre-seleccionada":
<INPUT TYPE=CHECKBOX NAME="deporte" VALUE="voleibol" CHECKED&

gt;Voleibol <br>
<INPUT TYPE=CHECKBOX NAME="deporte" VALUE="futbol">Fútbol
Resultado:
Deportes que practicas:
Fútbol
Voleibol
Natación
Básquetbol
Tenis
Bochas
- Opción única
- RADIO
Inserta un botón de selección de valores para una opción, es decir, solamente se puede elegir una
alternativa.
<INPUT TYPE=RADIO NAME="time" VALUE="palm">Palmeiras <br>

<INPUT TYPE=RADIO NAME="time" VALUE="inte">Internacional
Un comando CHECKED marca una elección inicial, si el usuario no elige ninguna opción, el formulario
considerará la alternativa "pre-seleccionada":
<INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>Cruzeiro <br>

<INPUT TYPE=RADIO NAME="time" VALUE="naut">Náutico
Resultado:
El cuadrodel que eres hincha:
Palmeiras Internacional Cruzeiro

- Botones de acción
Se usan para ejecutar acciones dentro del formulario, como enviar los datos o limpiar los campos.
- SUBMIT
Presenta el botón que activa el envío de los datos de ingreso al servidor.
<FORM>
<INPUT TYPE=SUBMIT>
</FORM>
Resultado:
Enviar consulta
Es posible modificar el mensaje de ese botón a través del atributo VALUE.
<FORM>
<INPUT TYPE=SUBMIT VALUE="Enviar mensaje">
</FORM>
Enviar mensaje
- RESET
Restaura los valores iniciales de las entradas de datos.
<FORM>
<INPUT TYPE=RESET>
</FORM>
Resultado:
Restablecer
Es posible modificar el mensaje de ese botón a través del atributo VALUE

<FORM>
<INPUT TYPE=RESET VALUE="¡Borrar todo!"> /span>
</FORM>
¡Borrar todo!
- Ejercicios
Ahora vamos a practicar. Crea un formulario con un campo para el nombre, otro para el email, otro para
escoger el sexo, y los botones de enviar y limpiar.
- Observa aquí cómo debe quedar, después trata de hacer lo mismo.
Limpiar
Al hacer clic en visualizar, se abrirá una nueva ventana donde podrás verificar si has utilizado los códigos
correctamente. Si tienes alguna duda, haz clic en el botón "Quiero Ayuda".

Cómo crear los campos Select y TextArea
- <SELECT>
Presenta una lista de valores en un menú desplegable. Es óptimo para crear opciones que el usuario
puede seleccionar sin necesidad de escribir en los campos <OPTION>. Se hace de la siguiente manera:
<SELECT NAME="sabor">
<OPTION>Ananá
<OPTION>Crema
<OPTION>Frutilla
<OPTION>Chocolate
</SELECT>
Resultado:
- Atributo SELECTED
También es posible establecer una opción padrón, mediante el atributo SELECTED
<SELECT NAME="sabor">
<OPTION>Ananá
<OPTION SELECTED>Crema
<OPTION>Frutilla
<OPTION>Chocolate
</SELECT>
Resultado:
Aquí, Crema ya aparece previamente seleccionado.
- Atributo SIZE
Con el atributo SIZE, se eligen cuántos ítems de la lista se mostrarán (en el ejemplo, SIZE=4):
- <TEXTAREA>
Abre un área para la entrada de texto de acuerdo con los atributos para números de columnas, filas, y, si
corresponde, un valor inicial. Es un campo donde las personas podrán escribir más que en los campos de
texto que vimos en la parte 2. Además, el usuario puede ver lo que está escribiendo. La etiqueta queda
así:
<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deje su comentario

</TEXTAREA>
Resultado:
Fíjate que, en el atributo "COLS", definimos el número de columnas para el ancho del campo de texto y
en "ROWS", el número de filas. Si el usuario escribe más de cinco líneas, surgirá una barra de
desplazamiento para que pueda cortar el texto si lo desea.
Los valores de estos atributos pueden modificarse a voluntad, de acuerdo con tus necesidades.
- Ejercicios
Crea un formulario con más recursos. Además del campo para el nombre y el email, intenta ahora incluir
un menú desplegable con algunas opciones y un cuadro de texto con 30 columnas y seis líneas. No
olvides los botones para enviar y limpiar.
- Observa aquí cómo debe quedar, y después trata de hacer lo mismo.
Limpiar
Al hacer clic en visualizar, se abrirá una nueva ventana donde podrás verificar si has utilizado los códigos
correctamente. Si tienes alguna duda, haz clic en el botón "Quiero Ayuda".

Manual de Paginas HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Manual de Paginas HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Manual de Paginas HTML (HyperText Markup Language) 1

Introducción a Programacion Web

<BODY BGCOLOR="color" TEXT="color" LINK="color" ALINK="color" VLINK="color"

En "color", puedes colocar los valores de colores en inglés, como:

<Cómo incluir textos>

<H1> Este es el primer nivel </H1>

Este es el primer nivel

Este es el cuarto nível

Este es el quinto nível

Este es el sexto nível

<FONT FACE=Times>Fuente Times New Roman </FONT>

<font size="3"> La palabra tendrá tamaño 3</font>

<font color="red"> A palavra terá a color rojo</font>

También podemos combinar las etiquetas de arriba:

<font face="Arial" size="2" color="red">Palabra con tamaño 3 y en rojo </font>

<B> Texto </B> - Texto queda en Negrita.

<U> Texto </U> - Texto Subrayado.

<I> Texto </I> - Texto en Cursiva.

<CENTER><B><U>Prueba 1</U> <I>y</I> Prueba 2</B></CENTER>

El resultado será el siguiente:

Párrafo 1<BR>Renglón 1<P>Párrafo 2<BR>Renglón 2.

- Left: Alineación a la izquierda

Incluir uno de estos atributos es fácil. Mira los ejemplos:

<p align="left">Texto alineado a la izquierda</p>

<p align="right">Texto alineado a la derecha</p>

<p align="center">Texto centrado</p>

<p align="justify">Texto justificado</p>

<Cómo incluir imágenes>

La etiqueta para insertar una imagen en tu página es la siguiente:

<img src="nombre del archivo de imagen que va a aparecer">

<Cómo alinear imágenes>

Puedes ver cómo queda el texto en la imagen. Este es un ejemplo de alineación

Ahora puedes ver cómo queda el texto en la parte superior de la imagen.

<img src="nombre de la imagen" align="top">

Observa ahora cómo queda el texto en mitad de la imagen.

<img src="nombre de la imagen" align="middle">

La etiqueta para esta alineación es:

La etiqueta para esta alineación es:

- Para lograr una imagen centrada:

<CENTER><img src="nombre de la imagen"></CENTER>

<Cómo crear enlaces>

<a href="http://www.starmedia.com">Haz clic aquí para visitar StarMedia </a>

El resultado sería el siguiente:

El resultado será el siguiente:

 Primer elemento de una lista sin orden

 Segundo elemento de una lista sin orden

<Insertar imagen de fondo>

<BODY BACKGROUND="nombre de la imagen">

Para usar este recurso:

<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>

- En "BEHAVIOR" colocas el tipo de efecto, que puede ser "SCROLL" o "SLIDE".

<MARQUEE BEHAVIOR=SCROLL WIDTH=100%>Texto</MARQUEE>

<TABLE BORDER=valor del espesor> ... </TABLE>

<TABLE BORDER=valor da borda WIDTH="valor del borde>

Un ejemplo de tabla cuyo ancho es el 75% de la pantalla (WIDTH="75%"):

<Cómo agregar sonidos>

La etiqueta debe ser <EMBED>. Por ejemplo:

<embed src="nombre del tema" loop="2" autostart="true">

- En "nombre del tema" colocas el nombre del tema mid o wav.

Si quieres que se repita infinitamente, basta colocar "infinity" en lugar de un número. No es

Guarda y observa el resultado.

<FRAMESET COLS="20%, 80%">

<FRAMESET ROWS="20%, 80%">

<FRAMESET COLS="20%, 80%">