Manual HTML Basico

Primer Documento HTML
Def. Hypertext Markup Language. Define como muestra nuestro documento hypertexto un
browser.
Los documentos son texto plano (ASCII), con "tags" especiales que debe interpretar el browser.
Atencion al formato en que lo guardamos.
Standar HTML 2.0 -> Draft 3.0
Definicion de tag: Marcas que indican al browser que debe hacer con la informacion que viene
a continuacion, hasta el prox. tag. < > </>
Independencia de Mayusculas , o Minusculas. No es "peligroso" olvidar un tag (de cierre
normalmente), solo puede distorsionar lo que vemos.
Partes del documento

Tags de Comienzo y final de la pagina
HTML.
< HTML > </html> Tiene 3 atributos: No se suelen utilizar.
• Version: String fijo "-//w30//DTD W· HTML 3.0//EN".

• URN: Universal Resource Name.
• Role: Lista de tokensa que definen el papel que juega este documento.
Cabecera de la Pagina
< head > < /head > No tiene atributos.

Describe las propiedades del documento.
No importa el orden de los elementos.
Se debe poner siempre el titulo.<TITLE></TITLE>
base
Permite recordar el punto de partida para buscar los elementos referenciados dentro del
documento.
Ej.: <base href = http://www.banesto.es> (Practica: (En tema de links) )
Meta
Para incluir información no definida por otros elementos HTML.

Atributos: Name, content, HTTP-EQUIV.
HTTP-EQUIV Asocia el elemento con una cabecera de respuesta HTTP.
Estas cabeceras http no son indiferentes a las Mayusculas y minusculas.
No se deben utilizar para definir elementos ya existentes.
Ej.: < META HTTP-EQUIV = "title" Content = "Prueba de meta" >
< META HTTP-EQUIV=REFRESH CONTENT="20;
URL=http://www.banesto.es/banesto/ciberbank/e700pre1.htm" >
title
Especifica el titulo de la pagina, debe incluirse siempre.
Cuerpo de la pagina <body > < /body > Atributos: (id, lang, class No son importantes ni muy
utilizados).
background. Especifica la URI (Universal Resource Identifier) de un grafico que cubre nuestro
fondo.
bgcolor = Tripleta RGB que determina el color de fondo.
text = especifica el color en que veremos nuestro texto.
link = especifica el color en que veremos nuestros links.
vlink = especifica el color en que veremos nuestros links.
Formatos de texto HTML

Cabeceras HTML
head
Las cabeceras se utilizan para organizar el texto visible en nuestras páginas, así como para introducir
todos los encabezamientos de las diferentes partes lógicas del documento.
Tenemos 6 niveles de cabeceras:
h1 Sintaxis HTML <h1> </h1>
h6 Sintaxis HTML <h6> </h6> Los atributos que nos vamos a encontrar dentro de estas cabeceras seran:
align
Que puede ser left, right, center.

Ej.:
<h3 align = left> Esta es la alineación por defecto. </h3> <h3 align = right> Alineación a la derecha
</h3> <h3 align = center> Alineación en el centro </h3>
Esta es la alineación por defecto.
Alineación a la derecha
Alineación en el centro
SRC
Imagen que precede a la cabecera:
Alineación en el centro
nowrap
Para evitar que la cabecera sea dividida por el browser.
Alineación en el centro pero con un tamaño superior al permitido por el browser, dentro del
tamaño original de la pagina que debe producir un scroll horizontal
En un fichero html, los retornos de carro y espacios en blanco son ignorados por el browser, de manera
que deben ser forzados por los tags específicos para ello.
Párrafos
<p> </p> Se puede ignorar el tag de final de parrafo (al igual que ocurrira con otros), puesto que va
implicito en la declaración de un nuevo parráfo.
Probamos ahora a escribir varios <p> consecutivos:
Ej:
<p> </p> <p> </p> <p> </p> <p> </p> <p>
Y se puede observar que no se incluyen saltos adicionales.
Para esta tarea se utilizarán los tags <br> (Break), que será el que utilicemos para separar las lineas dentro
de los diferentes parrafos.
Y nos permitira incluir mayores espacios.

Los atributos que nos vamos a encontrar en los parrafos seran los mismos que con las cabeceras:
align = right
Provoca que el texto introducido entre el comienzo de este parrafo y el final sea alineado a la
derecha.
align = center
Provoca que el texto introducido entre el comienzo de este parrafo y el final sea alineado en el
centro.
align = left
Provoca que el texto introducido entre el comienzo de este parrafo y el final sea alineado a la
izda.
Esta es la opcion por defecto.
Break
<br> Provoca un ruptura de linea.
Non break
<nobr> </nobr>
Son utilizados para evitar que el texto sea redimensionado por el browser cuando la longitud del texto
excede del ancho determinado por la amplitud actual de la ventana
Existe otro tag asociado al anterior, que nos permite, dentro de una zona de texto marcada para no ser
redimensionada, "partir" la linea.
<wbr> </wbr>
De manera que el texto se divide en el punto en que decide el diseñador de la pagina web si la amplitud
del texto supera el ancho determinado por la amplitud de la ventana actual
Texto con Estilo HTML

Podemos formatear el texto, de manera que podamos tener distintas apariencias:
• Texto en negrita.
tag: <b> </b>
Este texto esta en negrita
• Texto en cursiva:
tag: <i> </i>
Texto en cursiva
• Texto en formato teletipo:
tag: <tt> </tt>
Texto en formato teletipo
• Texto en tamaño pequeño:
tag: <small> </small>
Texto en tamaño pequeño
• Texto en tamaño grande:
tag: <big> </big>
Texto en tamaño grande
• Texto como superindice:
tag: <sup> </sup>
Texto normal Texto como superindice
• Texto como subindice:
tag: <sub> </sub>
Texto normal Texto como subindice
• Texto como direccion:
tag: <address> </address>
Texto como direccion
• Texto separado:
tag: <xmp> </xmp>
A este texto le sigue
Texto
y despues.
• Texto indentado:
tag: <blockquote> </blockquote>
Texto dentro de blockquote
Se pueden combinar los diferentes tags, de manera que podamos tener distintos tipos de letra. Ej.:
Texto normal Texto en tamaño grande, cursiva, negrita como superíndice
Hiperenlaces
Los hiperenlaces son el elemento fundamental de cualquier página Web. Son estos los que le dan la
potencia de navegación a las páginas, de manera que el usuario va buscando los recursos en función de la
información que le facilitan los enlaces.
El tag que vamos a utilizar para realizar los hiperenlaces se conoce como anchor .
<a href = "pagina_destino"> TEXTO SENSIBLE </a>
Si queremos definir un punto determinado de destino necesitaremos el mismo anchor con el atributo
name:
<a name = nombre>
Los enlaces dentro de las paginas Web se pueden realizar a:
• Un punto dentro de la página actual.

La sintaxis que necesitamos es la siguiente:
<a href = "#destino">TEXTO SENSIBLE </a> En el punto donde queramos hacer el enlace. <a
name = "destino">TEXTO SENSIBLE </a> En el punto donde queremos llegar al pulsar la zona
sensible anterior.
Ej: Inicio
• Otra pagina dentro del mismo servidor.
<a href = "Pagina_destino (Con extension htm) ">TEXTO SENSIBLE </a> En el punto donde
queramos hacer el enlace.
Solo es necesario que la pagina referenciada exista, para que el servidor nos la entrege, en caso
de no existir devuelve un error.
Ej: Pagina anterior
o Un punto determinado de otra pagina del servidor.
<a href = "Pagina_destino#destino">TEXTO SENSIBLE </a> En el punto donde
queramos hacer el enlace.
Solo es necesario que la pagina referenciada exista, para que el servidor nos la entrege,
en caso de no existir devuelve un error, y que exista un tag como el siguiente, marcando
el punto de destino:
<a name = "destino">TEXTO SENSIBLE </a> En el punto donde queremos llegar al
pulsar la zona sensible anterior.
Ej: Pagina anterior (Estilos)
• Una página dentro de otro servidor Web.
<a href = "http://direccion.servidor/camino/Pagina_destino">TEXTO SENSIBLE </a> En el
punto donde queramos hacer el enlace.
Solo es necesario que la pagina referenciada exista, para que el servidor nos la entrege, en caso
de no existir devuelve un error
Ej: Banesto
Listas
Podemos encontrar listas en muchos documentos, donde hay diferentes puntos de interé, y pueden ser de
tres tipos:
• No numeradas.
El tag que necesitaremos sera:
<ul> y </ul>. Siempre será necesario cerrar este tag, así como los de cierre de cualquier otra
lista, para evitar la indentación que realizar el navegador.
Para cada punto de la lista es necesario el tag:
<li> que no es necesario que lo cerremos con </li>
Este tag tiene un parametro : type que determinara el tipo de marca delante de cada punto, su
valor por defecto es circ, pero lo podemos cambiar a square.
Ej: <li type = square>
Ej:
o Uno
o Dos
o Tres
• Numeradas.
El tag que necesitaremos sera:
<ol> y </ol>. Siempre será necesario cerrar este tag.
Para cada punto de la lista es necesario el tag:
<li> que no es necesario que lo cerremos con </li>
Este tag tiene un atributo: type que determinara el tipo de marca delante de cada punto, su valor
por defecto es 1, pero lo podemos cambiar a i, I, a, A.
Ej: <li type = a>
El tag <ol> tambien tiene un atributo, que indica el comienzo de la numeración:
start = X, siendo X siempre un numero que no indica donde empieza la lista.
Ej: <ol start = 3>
Ej:
1. Uno
b. Dos
iii. Tres
• Listas Descriptivas.
Necesitamos tres tags diferentes:
<dl>, que será, necesario cerrar siempre con </dl>. Este tag delimita el comienzo de la lista.
<dt>, Este tag delimita el titulo del punto a describir.
<dd>, Este tag delimita la descripción.
Ej.:
Punto a describir
Descripcion del punto
Gráficos en Paginas WEB

Los formatos que vamos a utilizar en nuestras paginas deben ser .gif o .jpg.
La ventajas de uno frente a otro son las siguientes:
• Con jpg podemos conseguir mayores compresiones, sacrificando a cambio calidad de la imagen
que queremos presentar.
• Con gif podemos obtener efectos como la transparencia de algun color o movimiento del grafico.
El tag que necesitamos es el siguiente:

<img>
Este tag tiene los siguientes atributos:
• SRC = "camino/fichero" . Es la fuente (SouRCe) donde encontramos el fichero que queremos

presentar. Es imprescindible incluirlo, pues sin el no se puede saber donde esta el grafico.
• alt = "Texto" . Texto alternativo, para el caso en que el browser del cliente no pueda visualizar
el tipo de grafico que queremos presentar, o si tiene inhabilitada la opcion de presentacion de
graficos.
• width = valor . Sirve para redimiensionar el ancho del grafico. El valor por defecto es en pixels,
pero se puede utilizar tambien la opcion valor, de manera que la redimension se hace en funcion
del ancho de la ventana del navegador.
• height = valor . Igual que el anterior pero para la altura del grafico.
• lowsrc = "camino/fichero" . Sirve para presentar una imagen anterior a la imagen definitiva,
que debe ser normalmente de mucho menor tamaño (en bytes), utilizandose normalmente la
misma imagen a presentar posteriormente pero en blanco y negro.
• align = posicion . Sirve para alinear el texto que sigue a la imagen, pero esta en desuso debido a
la posibilidad de ordenar los graficos y los textos mediante tablas.
• border = valor . Sirve para eliminar el borde, especialmente cuando se realiza un link con una
imagen.
Ej:
<img src = "../gifs/blueline.gif" alt = "IMAGEN EJEMPLO" width = 200 height = 100 border = 0>
Se puede utilizar cualquier gráfico para realizar un enlace con otra página
Ej: <a href = "man6.htm"><img src = "../gifs/blueline.gif" <>/a>
así como entrada de datos de un formulario, como veremos en próximos capítulos.

Para la transformacion de graficos, se puede utilizar, cualquier Sw apropiado, pero en la RED podemos
encontrar algunos programas como PSP, que son Shareware para realizar estas transformaciones.
Color, Tamaño y fuentes en textos

Hasta la aparición de navegadores como Netscape 2.0 o Microsoft Internet Explorer 3.0, la fuente y color
en los textos no se podía modificar, dependiendo de las negritas, cursivas y demas elementos para llamar
la atencion sobre los textos.
Con la aparicion de estos browsers, se comienza a utilizar los siguientes tags:
Se pueden definir todas estas características de la página dentro del tag <body> , definiendo los
siguientes atributos:
• text = "#R G B". Define el color del texto de toda la página.

• link = "#R G B". Define el color del texto de los enlaces (antes de seleccionarlos) dentro de la
página.
• vlink = "#R G B". Define el color del texto de los enlaces (despues de haberlos seleccionado)
dentro de la página.
• alink = "#R G B". Define el color del texto de los enlaces (durante la seleccion) dentro de la
página.
• bgcolor= "#R G B". Define el color del fondo de la página.
Una vez hemos definido el contexto general de la página se puede cambiar el aspecto de determinados
bloques de texto con los siguientes tags:
<font> , que es necesario cerrar con el tag </font>
Los atributos que podemos utilizar con este tag son los siguientes:
• size = 1 .. 7 . Tamaño de la fuente.

• color = "#RGB" . Color de la fuente expresada como una tripeta RGB (Red, Green, Blue),
cuyos valores pueden estar, para cada uno de ellos entre 00 y FF, (En algunos browsers se puede
poner directamente el nombre del color).
• face = "nombre_fuente" . Fuente que queremos utilizar en nuestras paginas (Arial, Courier,...).
Ej:
<font color = "#f1a0ff" size = 3>Texto con color = "#f1a0ff" size = 3 </font>
Texto con color = "#f1a0ff" size = 3
Tablas
La utilización de tablas se ha extendido vertiginosamente desde su aparicion, por su utilidad para dar
formato a los datos dentro de una página, así como para representar tablas reales.
El tag de delimitación de una tabla es <table> junto con </table> (obligatorio).
Para delimitar las filas utilizaremos el tag <tr> junto con </tr> (opcional).
Pata delimitar las columnas se utiliza el tag <td> junto con </td> o bien <th> con </th>.
Ejemplo:
Fila 1 Columna 1 Fila 1 Columna 2
Atributos asociados a estos tags:

Atributos de <table>
• Border. Determina el ancho del borde de la tabla. El valor por defecto es 0.

Ej:

• Con valor 5 el aspecto de la tabla sería el siguiente:

• width. Determina el ancho de la tabla. El valor por defecto viene dado en pixels, pero se puede
determinar en porcentajes respecto a la anchura de la ventana del browser.
Ej:
Tabla con una anchura de 90 pixels:
Fila 1 Fila 1
Columna Columna
1 2
Fila 2 Fila 2
Columna Columna
1 2
• Tabla con una anchura del 90:
Fila 1 Fila 1
Columna Columna
1 2
Fila 2 Fila 2
Columna Columna
1 2
• height. Determina el alto de la tabla. El valor por defecto viene dado en pixels, pero se puede
determinar en porcentajes respecto a la altura de la ventana del browser.
Tabla con una altura de 90 pixels:

• Tabla con una altura del 90:

• bgcolor . Determina el color del fondo de la tabla. Su valor sera una tripleta RGB.
Tabla con fondo amarillo:
• cellpadding . Determina el margen interno a cada celda de la tabla, de manera que los datos aparezcan
separados de los bordes.
Ej:

• cellspacing . Determina la separación entre celdas de la tabla.

Ej:
Atributos de <td>
• align . Permite alinear horizontalmente los datos dentro de una celda.

Los valores que puede tener son:
o left. Alineación a la izquierda (En el caso de td este es el valor por defecto).
o center. Alineación en el centro (En el caso de th este es el valor por defecto).
o right. Alineación a la derecha.
Ej:
Ejemplo de alineacion en el Ejemplo de alineacion a la Ejemplo de alineacion a la

centro izquierda derecha
Fila 1 Columna 1 Fila 1 Columna 2 Fila 1 Columna 3
• valign . Permite alinear verticalmente los datos dentro de una celda.

Los valores que puede tener son:
o top. Alineación en la parte superior.
o middle. Alineación en el centro.
o bottom. Alineación en la parte inferior.
Ej:
Fila 1 Columna 1 Ejemplo

de alineacion
en la parte superior
Ejemplo
Fila 2 Columna 1 de alineacion
en el centro
Ejemplo
de alineacion
Fila 3 Columna 1 en la parte inferior
• colspan . Sirve para expandir una columna, de manera que ocupe dentro de la tabla el ancho del
numero de columnas indicado por su valor.
Ej:
Ejemplo de colspan = 3 alineado al centro
Fila 1 Columna 1 Fila 1 Columna 2 Fila 1 Columna 3
• rowspan . Sirve para expandir una fila, de manera que ocupe dentro de la tabla el ancho del
numero de filas indicado por su valor.
Ej:
Fila 1 Columna 2
Ejemplo de rowspan = 3 Fila 2 Columna 2
Fila 3 Columna 2
• bgcolor . Sirve para dar un color de fondo determinado a cada celda de la tabla
Ej:

• En todas las tablas que hemos visto anteriormente, no sólo podremos introducir texto, sino que el
contenido de las celdas podría ser una imagen, un texto con un enlace a otra pá e incluso
imagenes con enlaces. El color de las fuentes (texto) dentro de cada celda también se puede
cambiar, si bien debe realizarse celda a celda.
Una característica particular de las tablas es que se pueden "anidar", es decir, se pueden
introducir tablas, dentro de tablas. Para esto se crea la tabla "madre" y el resto de las tablas se
introducen dentro de las celdas.
Ej:
En el siguiente ejemplo podemos ver una tabla, que a su vez contiene 2 tablas, una de las cuales
contiene una tercera tabla en su interior.
Datos 5 Datos 6
Datos 1 Datos 2
Datos 8 Datos 9
Datos 3 Datos 4 Datos 7
Datos 10 Datos 11
Mapas Sensibles
Los gráficos que hemos visto hasta ahora se podian convertir en un enlace incluyendolos dentro del tag
anchor, como en el siguiente ejemplo:
<a href = "man9.htm"><img src = "../gifs/blueline.gif" width = 200 height = 60<>/a>
Pero esto no nos da toda la flexibilidad requerida a la hora de realizar enlaces desde gráficos que se
prestan a seleccionar una página en función de donde se situe el puntero del ratón, como pueden ser los
mapas de paises.
Para obtener este resultado se utilizan lo que se conoce como mapas sensibles.
Antes de la aparición de browsers como Netscape 2.0 y Microsoft Internet Explorer que permiten que los
mapas se definan dentro de la página HTML, el mecanismo era el siguiente (aún utilizado ampliamente):
1. Se debe tomar el gráfico que se desea sea sensible y determinar las coordenadas donde debe ser
sensible (es habitual utilizar Sw que ayuda a esta tarea, por ej. mapedit).
2. Se guarda el fichero con las coordenadas (si no se generaron con mapedit se podrían obtener a
ojo con herramientas graficas que determinan las coordenas del puntero sobre un gráfico), con
extensión .map .
3. Se realiza un enlace con la imagen al fichero .map que hemos creado y se incluye el atributo
ismap en el tag imagen.
El resultado que obtendríamos sería el siguiente:

<a href = "fichero.map"><img src ="nombre_imagen" ismap></a>
La opción más utilizada actualmente son los mapas "embebidos" dentro de la página HTML.
Para esto necesitamos incluir un nuevo atributo al tag img :
usemap = "#mapa_a_usar" que indica el mapa que utilizaremos y que se encuentra definido en
la misma página. Además de lo anterior los tags que necesitaremos para esto son los siguientes:
o <map> y el tag de cierre </map> .

El unico atributo que necesitamos de este tag será name = "mapa_a_usar" donde
coincide con el nombre dado en el atributo usemap del tag img.
o <area> , sin tag de cierre, que determina el area sensible, con los siguiente atributos:
shape = forma . Los valores que puede tener este atributo son los siguientes:
1. circle: Si la forma de la zona sensible es un circulo.
2. rect: Si la forma de la zona sensible es un rectangulo.
3. poly: Si la forma de la zona sensible es un polígono.
En función de la forma elegida, las coordenadas tendrán un formato

determinado.
• coords = valores . Los valores de las coordenadas se pueden determinar con algún programa como
mapedit o directamente como se comento anteriormente.
• href = "pagina.htm" . En este atributo se determina la pagina que pedimos al servidor de Web.
Ej:
<IMG BORDER="0" SRC="../gifs/espgraf.gif" USEMAP="#navega" ISMAP>
<MAP NAME="navega">
<AREA SHAPE=RECT COORDS="3,3,37,32" HREF="../texto/t770calendario.htm" >
<AREA SHAPE=RECT COORDS="39,5,69,29" HREF="../english/i770calendario.htm">
<AREA SHAPE=RECT COORDS="73,3,103,33" HREF="../text/x770calendario.htm">
<AREA SHAPE=RECT COORDS="106,6,136,31" HREF="../../castella/e330cic.htm">
<AREA SHAPE=RECT COORDS="138,6,170,31" HREF="../../castella/index.htm">
</MAP>
Frames
Los frames aparecen con la versión 2.0 de Netscape, siendo adoptados también por Microsoft con su
Internet Explorer 3.0 (que incluye además frames flotantes).
Un frame es una zona independiente dentro de la ventana del browser, donde se carga una página HTML,
o un gráfico, independientemente de lo que haya cargado en el resto de los frames, de manera que
podemos visualizar diferentes documentos desde una misma sesión de un browser.
Los tags que necesitamos para definir un browser son los siguientes:
<frameset> junto con el tag de cierre </frameset>.
Los atributos que podemos definir son los siguientes:
• cols = valor. Con este atributo definimos el numero de frames que queremos que aparezcan
verticalmente y su tamaño. El valor puede vernir definido en pixels (por defecto), o se puede
definir en porcentajes respecto a la anchura de la ventana.
Se pueden utilizar comodines, como *.
Ej:
cols = "30, *, 25"
• rows = valor. Con este atributo definimos el numero de frames que queremos que aparezcan
horizontalmente y su tamaño. El valor puede vernir definido en pixels (por defecto), o se puede
definir en porcentajes respecto a la anchura de la ventana.
Se pueden utilizar comodines, como *.
Ej:
rows = "30, *, 25"
Una vez definidos los "frames" que vamos a tener debemos definir sus contenidos, para esto utilizamos el
tag:
<frame> que no tiene tag de cierre.
Los atributos de este tag son los siguientes:
• name = "nombre_frame". Nombre que le damos al frame, muy importante para redirigir el
destino de links, forms y programación en scripts.
• src = "fichero_a_cargar". Nombre del fichero que se carga en el frame al cargar la pagina que
contiene dichos frames.
• scrolling = no|yes|auto. Atributo que nos permite elegir si el deseamos que se haga scroll en
dicho frame.
• noresize. Atributo sin valor (valor asociado al nombre) que impide al usuario redimensionar un
frame.
FORMULARIOS
En los capítulos anteriores hemos aprendido a diseñar nuestra páginas WEB, pero adolecen de
dinamicidad. El usuario hasta este punto, lo único que puede hacer es leer la información que nosotros
incluimos en estas páginas sin poder interactuar con ellas. En este capítulo vamos a aprender a realizar
formularios a través de los cuales el usuario puede enviar información a nuestro servidor WEB.
Asociado al concepto de formulario, encontramos el concepto CGI(Common Gateway Interface), cuyo
significado es un programa que corre
El primer tag que necesitamos es el siguiente:
<form> y su cierre </form> . Este tag determinara la accion a realizar y el metodo de envio de los datos.
entre estos tags se debe introducir todos los elementos de entrada de información que el usuario desea
enviar a nuestro servidor.
Los atributos de este tag son los siguientes:
• method = post|get . Indica el método a través del cual se enviarn los datos al servidor.
La diferencia entre ambos métodos reside en la recepción de los datos en el servidor.
Cuando utilizamos el método POST los datos se recibiran en nuestro CGI a través de la entrada
standar (stdin), mientras que el método GET los datos se recibirían en una variable de entorno
llamada QUERY-STRING.
• action = URL. Indica la acción a ejecutar cuando se ejecuta el submit.
La acción más habitual es llamar a un programa CGI, que trate los datos, si bien, se puede hacer
una llamada a la aplicación de mail, de manera que los datos se reciben mediante un mail.
• enctype = valor. Indica el tipo de encriptación que se va a realizar con los datos que se van a
enviar
Una vez definido el tag form , necesitamos definir los tags de entrada de datos:
• <input> . Este tag nos permite al usuario introducir los datos en función de su tipo, siendo por
ello muy importante este atributo. Los atributos asociados a este tag son:
o type = valor . Este atributo nos indica el tipo de datos que se van a introducir.
Podemos encontrar los siguientes valores:
text . Significa que los datos introducidos son de tipo texto. Este será el tipo
adoptado por defecto si no se indica.
password . Significa que los datos introducidos son de tipo texto, pero al ser
una contraseña cuando son tecleados el resultado visualizado por pantalla es
un conjunto de asteriscos.
hidden . Significa que los datos no son introducidos por el usuario, sino que
son datos ocultos, introducidos por el diseñador de la página HTML.
radio . Este tipo de input permite realizar una seleccion dentro de un conjunto
de items de manera que una selección excluya a otra.
chexkbox . Similar al anterior, con la particularidad de poder habilitar o
inhabilitar la elección en cualquier momento, no siendo excluyentes entre
varias entradas.
image . En este caso la entrada de datos se realiza al hacer "click" con el raton
sobre algún punto de un gráfico, obteniendo como resultado, en el programa
que gestiona los datos introducidos el nombre del elemento (atributo name) y
las coordenadas donde estaba situado el puntero del ratón.
submit . Este tag nos presenta un botón donde se debe pulsar (con el ratón)
para enviar los datos introducidos en el formulario.
reset . Este tag nos presenta un botón donde se debe pulsar (con el ratón) para
borrar todos los datos introducidos en el formulario.
file . (Sólo Netscape) Este tipo permite selecionar un fichero al usuario para
enviarlo al servidor.
o size = valor . Este atributo nos indica la amplitud de la ventana de entrada de datos.
o maxlength = valor . Este atributo nos indica la longitud de los datos de entrada.
o name = valor . Este atributo indica el nombre que se le da al objeto, para su posterior
o value = valor . Este atributo indica el valor por defecto que tendrá el tag asocidado.
Especial mención merecen los tipos submit y reset, puesto que con este atributo se
indica el texto que se desea que aparezca en el botón, así como en el tipo hidden puesto
que se le debe asignar un valor.
o checked . Este atributo indica la selección ofrecida al usuario por defecto en los inputs
de tipo radio y checkbox .
o src = camino/fichero . Este atributo indica el el camino hasta el gráfico que se utilizará
para la entrada de datos.
• <select> . Este tag permite presentar en la pagina una caja de selección con las opciones que
decide el diseñador. Los atributos asociados a este tag son los siguientes:
tratamiento en el CGI al cual se llama, o para su tratamiento por los scripts.
o size = valor . Este atributo indica el tamaño de las opciones visibles por defecto en la
página.
o multiple . Este atributo indica si se desea que se pueda realizar un selección múltiple
por parte del usuario, de manera que pueda tener varias opciones seleccionadas
o selected . Este atributo indica la selección ofrecida al usuario por defecto.
Es necesario cerrar el tag <select> con el tag </select> .

Asociado a este tag encontraremos el tag <option> a continuación del cual podemos introducir
el texto que se visualiza dentro de cada opción del select.
Asociado a este tag tenemos el atributo selected, que es similar al atributo checked de los input,
de manera que por defecto la opción deseada es la marcada con este atributo.
• <textarea> . Este tag permite al usuario introducir textos (en formato ASCII) de longitud
indefinida.
Los atributos asociados a este tag son los siguientes:
o rows . Determina el número de filas que se desea tenga la ventana de entrada de datos.
o cols . Determina el número de columnas que se desea tenga la ventana de entrada de
datos.
tratamiento en el CGI al cual se llama, o para su tratamiento por los scripts.
El siguiente formulario es un ejemplo de todo los expuesto anteriormente:

<form method = post action = URL>
Input 1 <input type = texto name = input1 size = 30 maxlength = 20>
Input 2 <input type = password name = input2 size = 30 maxlength = 20>
Input 3 <input type = hidden name = input3 value = texto_oculto>
Input 4 <input type = image name = input4 src = "espro.gif">
Input 5 <input type = file name = input5 size = 30>
Input 61 <input type = radio name = input6>
Input 62 <input type = radio name = input6>
Input 63 <input type = radio name = input6 checked>
Input 71 <input type = checkbox name = input7 checked>
Input 72 <input type = checkbox name = input7>
Input 73 <input type = checkbox name = input7>
Select
<select name = select1>
<option> Uno
<option> Dos
<option> Tres
</select>
<select name = select2 multiple size = 4>
<option> Uno
<option> Dos
<option> Tres
<option> Cuatro
</select>
Area de Texto
<textarea rows = 5 cols = 30>
</textarea>
Input 8<input type = submit value = Boton de Envio>

Input 9<input type = reset value = Boton de Borrado> </form>

Manual HTML Basico

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual HTML Basico

Cargado por

Copyright:

Formatos disponibles

Primer Documento HTML

Partes del documento

• Version: String fijo "-//w30//DTD W· HTML 3.0//EN".

< head > < /head > No tiene atributos.

Para incluir información no definida por otros elementos HTML.

Especifica el titulo de la pagina, debe incluirse siempre.

Formatos de texto HTML

h1 Sintaxis HTML <h1> </h1>

h2 Sintaxis HTML <h2> </h2>

h3 Sintaxis HTML <h3> </h3>

h4 Sintaxis HTML <h4> </h4>

h5 Sintaxis HTML <h5> </h5>

Que puede ser left, right, center.

Esta es la alineación por defecto.

Imagen que precede a la cabecera:

Para evitar que la cabecera sea dividida por el browser.

Y nos permitira incluir mayores espacios.

<br> Provoca un ruptura de linea.

Texto con Estilo HTML

Texto como direccion

Texto dentro de blockquote

Los enlaces dentro de las paginas Web se pueden realizar a:

• Un punto dentro de la página actual.

Gráficos en Paginas WEB

El tag que necesitamos es el siguiente:

• SRC = "camino/fichero" . Es la fuente (SouRCe) donde encontramos el fichero que queremos

así como entrada de datos de un formulario, como veremos en próximos capítulos.

Color, Tamaño y fuentes en textos

• text = "#R G B". Define el color del texto de toda la página.

• size = 1 .. 7 . Tamaño de la fuente.

Atributos asociados a estos tags:

• Border. Determina el ancho del borde de la tabla. El valor por defecto es 0.

Fila 1 Columna 1 Fila 1 Columna 2

• Con valor 5 el aspecto de la tabla sería el siguiente:

• Tabla con una anchura del 90:

Fila 1 Columna 1 Fila 1 Columna 2

• Tabla con una altura del 90:

Fila 1 Columna 1 Fila 1 Columna 2

Fila 1 Columna 1 Fila 1 Columna 2

• cellspacing . Determina la separación entre celdas de la tabla.

Fila 1 Columna 1 Fila 1 Columna 2

Fila 2 Columna 1 Fila 2 Columna 2

• align . Permite alinear horizontalmente los datos dentro de una celda.

Ejemplo de alineacion en el Ejemplo de alineacion a la Ejemplo de alineacion a la

• valign . Permite alinear verticalmente los datos dentro de una celda.

Fila 1 Columna 1 Ejemplo

Fila 1 Columna 1 Fila 1 Columna 2

El resultado que obtendríamos sería el siguiente:

o <map> y el tag de cierre </map> .

En función de la forma elegida, las coordenadas tendrán un formato

Es necesario cerrar el tag <select> con el tag </select> .

El siguiente formulario es un ejemplo de todo los expuesto anteriormente:

Input 8<input type = submit value = Boton de Envio>

También podría gustarte