|
|||||||
|
|
|
|||||
|
|
|||||||
| Inicio | Página Anterior | Página Siguiente | Hardware | Software | Informática Básica | Microsoft Excel | HTML |
| La Pascalina99 - Manual de HTML, para que aprendas a Crear tus Páginas Web |
Este manual sólo pretende ser una rápida introducción al
codigo HTML que permita la creación de páginas hipertexto.
Las páginas Web
o hipertexto se diseñan utilizando un código llamado HTML, este
código consiste en etiquetas que nuestro navegador o browser
interpreta para dotar a la página Web o hipertexto de un
determinado aspecto. Por tanto la página que estais viendo ahora
mismo está hecha con estas etiquetas que hacen que tenga esta
apariencia.
Para crear una página Web basta
usar cualquier editor de texto capaz de grabar los archivos con
formato de texto (si bien ya hay una amplia gama de editores de
páginas Web que posibilitan la edición de HTML).
El siguiente paso será conocer
algunas etiquetas HTML para comenzar el diseño de nuestras
páginas.
Las páginas Web o hipertexto comienzan con el código <html> y terminan con la etiqueta
</html>.Muchas de las etiquetas de HTML
funcionan de este modo, una indica el comienzo, otra el final y
el texto que está entre ambas es el afectado por los atributos
que indican las etiquetas..
Si queremos dar un título a la
ventana que contiene nuestra página usamos los códigos: <title>Título
de la página</title>. En este caso: <title>Manual
HTML. Creación páginas Hipertexto o Web </title>.
El cuerpo de la página o del
documento se mete entre la etiqueta <body>
y </body>.
Hay comandos para el tamaño de la
letra: <h1> Texto... </h1>
hasta <h6> Texto... </h6>
El esquema
básico, por tanto, de una página Web sería el siguiente:
| <html> <title> Título de mi página</title> <body> <h1>Mi documento...</h1> <h1>Mi documento...</h1> resto del documento... resto del documento... resto del documento... </body> </html> |
Una vez guardado este archivo con formato de texto en el disco
duro podemos visualizarlo con Netscape pinchando en la opción: File-->Open
file e indicando la dirección en la que se encuentra el
archivo.
Si intentamos hacer una página y la visualizamos después, nuestra primera sorpresa será ver que no se han respetado los espaciaos entre palabras, ni las tabulaciones ni los retornos de carro,... todas estas acciones tienen sus propias etiquetas, son las siguientes:
Estas etiquetas se caracterizan por no tener
código de finalización.
Veamos otros efectos que podemos crear sobre
el texto:
A partir de la versión 2.0. de Netscape
disponemos de comandos para alinear
párrafos, a la izquierda, derecha y centrarlos, son los
siguientes:
La siguiente etiqueta hace que el texto
aparezca parpadeando:
Ya tenemos unos cuantos códigos para
trabajar con texto, veamos ahora que tipos de letra podemos usar.
Aquí además veremos unos efectos
particulares sobre la letra como el subrayado, negrita, cursiva y
otros.
Las siguientes etiquetas llevan asociadas unos tipos de letra
que se relacionan con una información en particular:
Veamos las etiquetas para dar atributos
especiales a las letras:
A la hora de
crear una página Web podemos introducir gráficos de forma muy
sencilla, sólo hay que tener en cuenta que las imágenes deben
tener formato Gif.
La etiqueta que inserta una imagen
es:
Debemos tener en
cuenta que hay usuarios en Internet que no disponen de
visualizadores gráficos y por tanto sólo pueden ver texto. Hay
una etiqueta, alt="texto" que sustituye
la imagen con texto en el caso de que el visualizador o navegador
que usemos no pueda presentar imágenes. Esta etiqueta es muy
importante sobre todo por lo que se explicará en el siguiente
capítulo, Links, enlaces o anclas. Veamos lo que puede
embellecer una imagen un documento, el código usado para traer
esta imagen es:
Lo siguiente que escribamos aparecerá alineado en a la izquierda en la parte inferior de la imagen, pero existen etiquetas para modificar esto, son las siguientes:
El comando correcto para insertar la imagen
debería haber sido el siguiente:
Por último
comentar que podemos modificar la altura y anchura de las
imágenes con las etiquetas:
Veamos un ejemplo:
Es una de las
partes más importantes de las páginas Web, esto es hipertexto.
Los links o enlaces nos permiten leer un documento de forma no
secuencial, saltando de una parte a otra según nos interese.
En este capítulo veremos como
crear enlaces a un mismo documento y como crear enlaces a otros
documentos y también veremos como se definen los elementos que
actuan de enlace. Lo primero que vamos a realizar enlaces a otras
partes dentro del mismo documento.
Las etiquetas son las siguientes:
Cuando pinchemos sobre el texto que actua como enlace saltaremos a otra parte del documento, que es donde nosotros haremos una marca con otra etiqueta, que es la siguiente:
Esto quedará
perfectamente claro con un ejemplo:
Después definimos la marca a donde saltaremos en caso de pinchar
donde está indicado. El comando para esto es:
Es decir que
saltaremos dentro del documento hasta donde se encuentre la marca
que nosotros hayamos puesto con a name. Lo que acabamos de
ver son enlaces dentro de un mismo documento pero puede ocurrir
que nosotros deseemos establecer enlaces con otros documentos en
nuestra máquina o en cualquier otra, la forma de hacerlo es
similar a lo anterior pero más fácil.
El código que usamos es:
Veamos de nuevo un ejemplo:
Pero además de poder usar texto
como enlace también podemos usar imágenes, pero que pasaría si
un enlace se define con una imagen y nuestro visualizador no
puede ver imágenes, pues sencillamente que no podemos usar ese
enlace, pero a la hora de definir enlaces con imágenes podemos
definir un texto alternativo que aparecerá en el caso en el que
no se pueda ver la imagen, esto se hacía con alt,
veamos otra vez un ejemplo:
Estas etiquetas hacen que la siguiente
figura actue como un enlace al documento ejemplo.htm.
Una de las
pequeñas dificultades con las que nos podemos encontrar a la
hora de utilizar los links o enlaces es la de establecer la ruta
correcta en la que se encuentra el archivo al que queremos
apuntar.
Imaginemos que mi espacio Web estuviese estructurado del
siguiente modo:
Y que mi página
principal se llamase inicial.htm. Entonces para
llegar hasta mi página principal habrías tenido que indicar la
siguiente dirección en tu navegador:
http://www3.adi.uam.es/~dcc/inicial.htm.
En este caso ponemos: http porque estamos usando
protocolos de trasferencia de hipertexto (Transfer Protocol
HiperText). A continuación viene: www3.adi.uam.es
este es el nombre (dentro de Internet) del ordenador (o servidor
o host) que contiene mis páginas. Después viene la ruta de
directorios que hay que seguir dentro del ordenador: /~dcc.
Por último el nombre del archivo que queríamos ver. Por tanto,
en el ejemplo propuesto en esta sección, para localizar mi
página principal dentro de Internet tendríamos que indicar al
navegador la siguiente dirección: http://www3.adi.uam.es/~dcc/inicial.htm.
Ahora vamos a ver unos ejemplos de como habría que organizar los
links o enlaces dentro de mi página principal inicial.htm.
Siguiendo el ejemplo propuesto en esta sección yo supongo que la
gente que se conecta a mi Web lo hace a través de la página
principal inicial.htm, en ese instante el
ordenador se encuentra dentro del directorio /~dcc
(ya que ahí se encuentra el archivo inicial.htm.
Por tanto si yo quiero establecer un link o enlace que apunte a
otro archivo infor.htm que se encuentra dentro
del mismo directorio /~dcc el código que
tendría que poner sería el siguiente:
| <a
href="infor.htm">Texto de enlace</a>
o también <a href="http://www3.adi.uam.es/~dcc/infor.htm">Texto de enlace</a> |
Lo más razonable
sería colocarlo de la primera forma pero la segunda también
sería válida. Supongamos que en este nuevo documento infor.htm
se hace referencia a un gif-animado (una imagen animada) que se
encuentra en: /~dcc/grafico/animado y con el
nombre: graf1.gif. El código que tendría que
poner en el archivo para que se pudiera visualizar en pantalla
sería el siguiente:
| <img
src="grafico/animado/graf1.gif"> o
también <img src="http://www3.adi.uam.es/~dcc/grafico/animado/graf1.gif"> |
Con este código lo que hacemos es indicarle al ordenador la ruta
de directorios que debe seguir para encontrar el archivo de
imagen requerido. Seguiríamos estando situados dentro del
directorio: /~dcc, todavía no nos hemos movido
de aquí.
Imaginemos ahora que también dentro del archivo: infor.htm
tenemos un link o enlace que apunta a otro documento (dentro del
ordenador en que nos encontramos ahora). Digamos que apunta al
archivo: manual.htm (que se encuentra en /~dcc/documen/manual).
El código que tendríamos que escribir es el siguiente:
| <a
href="documen/manual/manual.htm">Texto de
enlace</a> o también <a href="http://www3.adi.uam.es/~dcc/documen/manual/manual.htm"> |
Si pinchamos sobre ese link saltaríamos al documento manual.htm
y ahora estaríamos en otro directorio, concretamente en:
/~dcc/documen/manual
Si este documento hiciese referencia a una imagen, por ejemplo a ima1.gif
que se encuentra en: /~dcc/grafico/simple
tendríamos que indicar al ordenador que ruta debe seguir para
encontrarla. Como estamos en /~dcc/documen/manual
debemos retroceder dos directorios hasta situarnos en /~dcc
una vez ahí nos metemos en el directorio grafico/simple
y a continuación indicamos el nombre del archivo. El código
quedaría así:
| <img
src="../../grafico/simple/ima1.gif">
o también <a href="http://www3.adi.uam.es/~dcc/grafico/simple/ima1.gif"> |
En este momento no nos habríamos movido del directorio en el que
nos encontramos seguiríamos en /~dcc/documen/manual
y sólo habríamos indicado al ordenador la ruta que debe seguir
desde donde nos encontramos para localizar la imagen que estamos
pidiendo.
Si ahora queremos
dentro del documento manual.htm establecer un
link que apunte de nuevo a la página principal incial.htm
tendríamos que indicar la ruta correcta, es decir, retroceder el
directorio manual, retroceder el directorio documen
y ya estaríamos en el directorio /~dcc que es
donde se encuentra inicial.htm. Por tanto las
etiquetas son las siguientes:
| <a
href="../../inicial.htm">Texto de
enlace</a> o también <a href="http://www3.adi.uam.es/~dcc/inicial.htm>Texto de enlace</a> |
Por último si dentro de este archivo, inicial.htm,
tenemos un link que apunta a otra máquina (servidor o host de
Internet) digamos por ejemplo al buscador OZU
pues también hay que poner la ruta o dirección correcta,
sería:
| <a
href="http://www.ozu.es">Texto de
enlace</a> |
Si pinchamos sobre este link saltaríamos a otra máquina.
Hay que tener
todas esta cosas en cuenta a la hora de elabora un espacio Web
para que no haya links o enlaces que apunten a lugares que no
existen o lugares donde el archivo requerido no esta. Esto daría
errores como respuesta.
Por ejemplo si
estando situado en la página principal inicial.htm
yo programo un link que apunte a enlace.htm del
siguiente modo:
| <a
href="enlace.htm">Texto de enlace</a>
|
En este caso está claro que el ordenador no encontrará el
archivo deseado por que estamos indicándole que lo busque en el
directorio /~dcc que es en el que nos encontramos
pero ahí no está el archivo buscado, el código correcto
sería:
| <a
href="documen/links/enlace.htm">Texto de
enlace</a> |
Podemos definir listas numeradas o sin
numerar y anidadas entre ellas de una forma muy sencilla. Si
queremos usar listas numeradas usamos las etiquetas:
Si queremos incluir otra listas dentro de la
lista simplemente tenemos que volver a utiizar las etiquetas: <ol>
y </ol>.
Veamos un ejemplo:
| <ol> <li> Primer elemento de la lista <li> Segundo elemento de la lista <ol> <li> Tercer elemento de
la lista |
Todo este sencillo código tiene el siguiente efecto:
Las listas sin numerar siguen el mismo
esquema pero con las etiquetas:
Los anidamientos funcionan exactamente igual
que con las listas numeradas.
Veremos aún un tipo de lista más, las listas de definición
que tienen las siguientes etiquetas:
En la etiqueta <dt>
se pone un término del que se supone hay que dar una
definición, en la etiqueta <dd> se pone la
definición del término que aparecerá una línea por debajo y
sangrada por la izquierda.
Los anidamientos de este tipo de listas funcionan exactamente
igual que lo explicado antes.
Para crear tablas usamos los siguientes
códigos:
Vamos ha ver un
ejemplo:
| <table
border=10> <tr><th>Datos persona1</th><th>Datos persona2</th></tr> <tr><th>90</th><th>100</th></tr> <tr><th>60</th><th>62</th></tr> <tr><th>90</th><th>94</th></tr> </table> |
Si introducimos este código obtendríamos el siguiente efecto:
Datos persona1 |
Datos persona2 |
| 90 |
100 |
| 60 |
62 |
| 90 |
94 |
¿tu que prefieres? :-)), perdonadme todas por esta broma.
Por frame entendemos la división de la pantalla en varias zonas o ventanas que pueden actuar de forma independiente las unas de las otras. Los navegadores que reconocen las etiquetas para realizar frames son Netscape y Explorer 2.0 y en adelante. A continuación vamos a ver como definir frames o ventanas y las peculiaridades que hay que tener en cuenta a la hora de cargar nuestras páginas en cada uno de ellos.
Veamos un
pequeño ejemplo de como quedaria lo que hemos visto antes:
| <html> <title> Como siempre damos título a nuestra página</title> <frameset cols="30%,70%"> Con esto definimos dos columnas que actuarán como ventanas. <frame src="documen1.htm" name="ventana1"> Este será el documento que se cargue en la primera ventana que hemos llamado vetana1. <frame src="documen2.htm" name="ventana2"> Este será el documento que se cargue en la segunda ventana a la que hemos llamado ventana2. </frameset> Con esto indicamos que ya hemos terminado de definir los frames. </html> y aquí acabamos nuestro documento. |
Este sería un ejemplo con frames pero para que sea plenamente
satisfactorio todavía necesitamos conocer más etiquetas.
¿Cómo funcionarán los enlaces dentro de las ventanas?
Imaginemos que en nuestra ventana (columna) de la izquierda
tenemos nuestro documento: documen1.htm que tiene
varios links que apuntan a otros documentos. Lo que ocurriría si
pulsamos en ellos es que esos documentos a los que apuntan los
links o enlaces se cargarían en esa misma ventana lo que no
suele ser el efecto deseado. Suele ser más usual que la ventana
de la izquierda sirva de índice de un documento grande y que
cuando pulsemos en un link de esta ventana de la izquierda el
nuevo documento se cargue en la ventana de la derecha. Para hacer
esto necesitamos las siguientes etiquetas:
Veamos un
ejemplo. Supongamos que el documen1.htm está
cargado en ventana1 y tiene un link que apunta a documen8.htm,
si se pincha sobre este link queremos que documen8.htm se cargue
en ventana2 entonces el enlace debería estar escrito de la
siguiente forma:
Al final de esta
sección veremos un ejemplo práctico de cómo queda todo esto,
pero antes debemos ver más etiquetas:
Estas dos
etiquetas se utilizan para tener en cuenta a los navegadores que
no soportan frames. Todo lo que vaya entre ambas etiquetas será
sólo visualizado por navegadores que no soportan frames. Los
atributos de los frames nos ofrecen muchas posibilidades. Estas
etiquetas van colocadas dentro de la etiqueta frameset:
Estas otras van
colocadas dentro de cada frame y sólo tienen efecto dentro del
frame en que se definen:
La etiqueta target
también posee unos atributos muy interesantes:
Antes de ver un
ejemplo de esto comentar que podemos utilizar frames anidados, es
decir, imaginemos dos filas una superior y otra inferior y en la
fila superior necesitamos definir dos columnas pues podríamos
hacerlo, el código sería el siguiente:
| <html> <title> Página con frames anidados</title> <frameset rows="20%,80%"> Definimos dos filas. <frameset cols="15%,*"> En la primera fila se crean dos columnas. <frame src="documen1.htm"> Se cargaría en la columna izquierda de la fila superior. <frame src="documen2.htm"> Se cargaría en la columna derecha de la fila superior. </frameset> Cerramos la definición de frames de la primera fila. <frame src="documen3.htm"> Se cargaría en la fila inferior. </frameset> </html> |
Veamos finalmente un ejemplo prático sobre la utilización de
frames, lo que haremos será lo siguiente:
Definamos el
primer documento:
| <html> <title>En este documento se definen los frames</title> <frameset cols="20%,80%"> <frame src="indice.htm"> <frame src="inicial.htm" name="ventana2"> </frameset> <noframes> <a href="http://www3.adi.uam.es/~dcc/html/htm1.htm"> Lo siento pero tu navegador no soporta frames, pincha aquí para volver a ver el manual sin frames.</a> </noframes> </html> |
Este sencillo código nos crea las dos ventanas, en la primera
cargamos el indice y en la segunda inicial.htm.
Además a la segunda ventana la hemos llamado ventana2
porque más tarde vamos a tener que referirnos a ella para cargar
unos links. También hemos añadido un poco de código que será
visualizará en caso de tener un navegador que no soporte frames.
Vamos con el documento indice.htm, lo creamos del
siguiente modo:
| <html> <title>Índice</title> <body> <a href="capi1.htm" target="ventana2">Capítulo1</a> <a href="capi2.htm" target="ventana2">Capítulo2</a> <a href="/~dcc/html/html1.htm" target="_top">Vuelta al manual</a> </body> </html> |
Nuestro índice consta de dos capítulos que están enlazados con
la etiqueta correspondiente y hemos usado la etiqueta target="ventana2"
para que esos capítulos se cargen en la ventana que hemos
llamado ventado2. El tercer enlace nos devulve al
manual, hemos usado target="_top" para
que el manual se cargue en una única ventana, sin frames.
Ya hemos
terminado el índice.
Los documentos
que irán en la segunda ventana serán documentos normales de
HTML con algún contenido y no se van a detallar, serán de la
forma:
| <html> <title>Capítulo (número)</title> <body> Contenido del capítulo Contenido del capítulo Contenido del capítulo </body> </html> |
Y les daremos los nombres correspondientes, es decir, capi1.htm,
capi2.htm
Con esto hemos terminado esta sección sobre frames.
Los colores se
crean mezclando los tres colores básicos: rojo, verde y azul.
Cada color se especifica con números hexadecimales, es decir:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
(del 0 al 15)
Los colores básicos se conseguirían del siguiente modo:
Por tanto, una cantidad de rojo (digamos #550000), mezclado con una cantidad de verde (digamos #00AA00) y una cantidad de azul (digamos #000088) nos daría el siguiente color: #55AA88. Para hacer un color más oscuro reduciríamos el número que lo indentifica, es decir, si queremos un rojo más claro en lugar de usar el número: #FF0000 podríamos usar #550000.
Si lo que queremos son tonos más suaves reduciremos los números
de los colores que no nos interesan, es decir, si en lugar de un
rojo queremos un rosa tendrímos que hacer: #FF7070. Si queremos
establecer un color de fondo para la información que estamos
presentando en pantalla usamos la siguiente etiqueta:
Esta etiqueta
se introduce dentro de la etiqueta <body>.
Por tanto, si hubiese decidido presentar este manual sobre un
fondo rojo habría colocado la etiqueta body del
siguiente modo:
| <body
bgcolor="#FF0000"> |
Colocar colores de fondo en nuestras páginas puede provocar
problemas. ¿Qué ocurría con los los links o enlaces si yo
coloco un fondo de color azul?. Puesto que los links son azules
cuando todavía no se han pulsado puede ocurrir que no se puedan
leer con claridad o incluso que no se puedan distinguir en
absoluto del fondo.
Podemos imaginar todavía un caso peor si decidimos colocar un
fondo demasiado oscuro, tan oscuro que no permita distinguir con
claridad la información que se presenta en pantalla. Este manual
con un fondo muy oscuro sería ilegible. Podemos remediar estos
eligiendo nosotros mismos el color que queremos que tengan los
links o enlaces e incluso el texto, las etiquetas son las
siguientes:
Por tanto la
etiqueta <body> puede quedar del siguiente
modo:
| <body
bgcolor="#num" text="#num"
link="#num" vlink="#num"
alink="#num"> |
Las etiquetas que hemos visto hasta ahora afectarí a la
totalidad de nuestro documento pero podemos también cambiar los
colores de forma local, quizá para resaltar algo:
Veamos un
ejemplo:
| <font
color="#0000FF"> Este texto ahora es de
color azul y parece un link</font> |
El resultado es el siguiente: Este texto ahora es de color azul y
parece un link
Hemos visto como cambiar de color el texto, enlaces, poner un
color de fondo y ahora vamos a ver como poner una imagen de
fondo. Es también muy sencillo basta con usar la etiqueta:
| <body
background="/~dcc/html/gifs/nombre">
|
Si pinchas en el link anterior podrás ver el ejemplo.
Recordad que el color del fondo (o la imagen) puede dificultar la lectura del documento, elegidlos con cuidado.
Los formularios
son elementos de nuestra página Web que permitirán a nuestro
visitante interactuar con nuestra página.
Los formularios interpretan las acciones que una persona realiza
sobre nuestra página y obtiene en consecuencia determinada
respuesta. Los programas que permiten una respuesta al usuario
están escritos normalmente en Perl, C...
Todo lo explicado hasta ahora sobrepasa las pretensiones de este
manual en el que sólo se va a hacer referencia a la opción que
permite a los formularios enviar datos a nuestra cuenta de
correo, precisemos un poco más esto.
Podemos definir ciertas variables dentro de nuestra página Web
que pueden tomar ciertos valores predeterminados (que nosotros
determinemos) o no. Estos valores de las variables pueden ser
enviados a nuestra cuenta de correo por medio de una simple
pulsación de un botón de nuestra página y lo que nosotros
recibiremos será una especie de formulario rellenado por el
lector de nuestra página. Veamos cual es la estructura de un
formulario:
Hagamos una
pequeña descripción de la primera etiqueta que compone un
formulario.
Detallemos ahora
los diferentes elementos que forman un formulario y que permiten
la introducción de datos por parte del lector de la página Web.
Estos permitirán
introducir en determinadas zonas de la página texto. Este
elemento del formulario tiene la siguiente etiqueta:
Con esta etiqueta
hemos definido una variable que se llama Nombre_del_visitante
y con type hemos indicado que esta variable será de
tipo texto. Veamos como quedaría esto en el formulario:
| <form
action="mailto:direccion de correo"
method="post"
enctype="text/plain"> Por favor, introduce tu nombre :<br>
input type="text"
name="Nombre_del_visitante"> |
Esto tendría el siguiente efecto:
Nuestro lector
podría ahora rellenar el campo correspondiente con su nombre
pero todavía no hemos definido ningún botón de envío, por
tanto no podría hacernos llegar la información. Veremos más
adelante como se crean estos botones.
Veamos otras etiquetas que podemos incluir con este elemento de
formulario:
Además podemos
sustituir type="text" por el valor type="password",
esto hará que los datos introducidos aparezcan sustituidos por
asteriscos impidiendo que terceras personas puedan verlos. Veamos
un nuevo ejemplo de esto último:
| <form
action="mailto:direccion de correo"
method="post"
enctype="text/plain"> Por favor, introduce tu nombre:<br> <input type="password" name="Nombre_del_visitante" size="7" maxlength="10"> </form> |
Con el siguiente efecto:
En el campo correspondiente al nombre del
visitante podremos escribir como máximo 10 caracteres pero solo
llegarán a nuestra cuenta de correo 7 caracteres.
Estos elementos permiten escribir varias
líneas sin limitarnos a un pequeño campo como el anterior. Las
etiquetas serían las siguientes:
Veamos un
ejemplo de esto último:
| <form
action="mailto:direccion de correo"
method="post"
enctype="text/plain"> Por favor, introduce la opinión que te merece este manual:<br> <textarea name="comentario" rows="5" cols="50"> </textarea> </form> |
Y el efecto sería el siguiente:
Faltaría por
último definir los botones que permitirán el envío de la
información a la cuenta de correo. Lo veremos más adelante,
pero antes veamos otro nuevo elemento de un formulario.
Estos elementos
permitirán a nuestro visitante elegir entre unas cuantas
opciones (que compondrán un menú) predeterminadas que nosotros
confeccionaremos. Las etiquetas son las siguientes:
Un nuevo ejemplo
nos aclarará todo esto:
| <form
action="mailto:direccion de correo"
method="post"
enctype="text/plain"> Por favor, indica tu edad:<br> <select name="edad"> <option>Menor de 20 años <option>Entre 21 y 50 años <option>Mayor de 50 años </select></form> |
Y una vez más veamos el efecto que esto produce:
En este caso el lector de nuestra página
pincha sobre unos recuadros que permitirán confirmar
determinadas opciones. La etiqueta es:
Veamos un
ejemplo:
| <form
action="mailto:dirección de correo"
method="post"
enctype="text/plain"> <input type="checkbox" name="Publicidad"> Deseo recibir publicidad. </form> |
En este caso veríamos lo siguiente:
El resultado de
pulsar sobre el botón de enviar (que todavía no hemos visto)
sería recibir un correo con el valor de la variable, es decir si
se pulsó sobre la caja de confirmación recibiríamos: Publicidad=On
Podemos introducir un atributo con el que la casilla de la
opción correspondiente aparecerá confirmada, es decir
seleccionada.
Un ejemplo
sería:
| <form
action="mailto:dirección de correo"
method="post"
enctype="text/plain"> <input type="chekbox" name="Publicidad" checked> Deseo recibir publicidad. </form> |
Con lo que obtendríamos:
Este caso es muy parecido a los elementos de menú que ya hemos visto.
En esta ocasión se presentan al lector varias opciones entre las que se elige una por confirmación, es decir, seleccionándola pinchando sobre el lugar correspondiente.
La etiqueta:
Veamos un
ejemplo para aclarar esto:
| <form
action="mailto:dirección de correo"
method="post"
enctype="text/plain"> Desea usted recibir información sobre: <input type="radio" name="Información" value="Medio ambiente">Medio ambiente <input type="radio" name="Información" value="Internet">Internet <input type="radio" name="Información" value="Desarrollo sostenido">Desarrollo sostenido </form> |
Veríamos lo siguiente:
Para que
cualquiera de estas opciones apareciese ya seleccionada bastaría
con incluir la etiqueta checked, por ejemplo:
Veamos por fin
los botones que se incluyen en los formularios y que permiten
borrar la información que hemos escrito y dar la orden de enviar
el formulario.
Tenemos que
definir los elementos más importantes de un formulario:
Veamos un pequeño ejemplo:
| <form
action="mailto:dirección de correo"
method="post"
enctype="text/plain"> Desea usted recibir información sobre: <input type="radio" name="Información" value="Medio ambiente">Medio ambiente <input type="radio" name="Información" value="Internet">Internet <input type="radio" name="Información" value="Desarrollo sostenido">Desarrollo sostenido <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form> |
Que quedaría del siguiente modo:
Para terminar con esta sección vamos a ver un ejemplo práctico en el que vamos a combinar varios de los elementos que hemos visto.
Vamos a crear un
formulario en el que el lector, en este caso tu, pueda poner unos
comentarios sobre lo que le parece este manual y como mejorarlo
que se me podrán enviar.
Lo voy a dividir
en cinco partes. En la primera definiré un elemento de texto
para que introduzcas tu nombre. En la segunda un nuevo elemento
de texto permitirá que introduzcas tu dirección de correo (de
este modo podré contestarte). La tercera será un elemento de
cajas de confirmación que nos permitirán puntuar este manual.
La cuarta será un elemento de área de texto en el que podremos
introducir todos los comentarios que creamos oportunos sobre este
manual. El quinto elemento lo componen los botones de envío y
borrado de datos. Comencemos.
| <form
action="mailto:dcc@adi.uam.es"
method="post"
enctype="text/plain"> En esta
ocasión he introducido mi dirección de correo. Escribe tu nombre: <input type="text" name="Nombre" size="20" maxlenght="20"> Hemos definido el hueco donde puedes escribir tu nombre, un máximo de 20 caracteres. Introduce tu dirección de correo: <input type="text" name="Dirección_de_correo" size="20" maxlenght="20"> Esta variable de texto contendrá la dirección de tu correo para que yo pueda responderte. Este manual te parece: <input type="radio" name="El_manual_me_parece" value="Bastante bueno"> Bastante bueno <input type="radio" name="El_manual_me_parece" value="Bueno">Bueno <input type="radio" name="El_manual_me_parece" value="Malo">Malo <input type="radio" name="El_manual_me_parece" value="Bastante malo">Bastante malo Éstas serán todas las opciones para puntuar el manual. Por favor, introduce tus comentarios para ayudarme a mejorar este manual <textarea name="Comentarios" rows="7" cols="70"> </textarea> Con esto hemos definido un área de texto de 7 filas y 70 columnas. <input type="submit" value="Enviar"> Aquí hemos definido el botón que enviará los datos del formulario en cuanto lo pinchemos. <input type="reset" value="Borrar"> Y si tenemos necesidad de borrar los datos que hemos introducido podemos pinchar este botón. </form> |
Y ahora veamos como queda todo esto:
Si introduces los datos pedidos en este formularios y pinchas
sobre el botón enviar agradeceré tu colaboración.
Una vez que hemos
hecho nuestra primera página los siguientes objetivos deben ser:
1º. Guardar nuestra página en un
ordenador que esté conectado siempre a la red y por tanto
nuestra página estará siempre accesible.
2º. El objetivo de colocar una información en
Internet es que ésta sea vista. Para hacer esto deberemos
incluirnos en los buscadores más importantes de modo que la
gente interesada en nuestra información pueda encontrarnos.
En esta sección vamos a ver el primer punto.
Hay multitud de servidores que nos brindarán espacio en su disco
duro de forma gratuita. Será en estos ordenadores donde debamos
dejar nuestras páginas.
A cambio de permitirnos usar su espacio probablemente no tengamos
que hacer nada o como mucho incluir su logotipo en nuestra
página. Estos servicios subsisten gracias a la publicidad.
Cuando alguien contacte con nuestra página recibirá además una
franja de publicidad. A cambio nosotros no tenemos que pagar un
duro.
La mejor direccion para crear tus páginas web es www.freeservers.com,donde
tienes mas de 20 megas gratis y con tu propio dominio, prueba.
Otro servidor que
ofrece estos servicios es geocities. La
dirección es: http://www.geocities.com/.
Aquí puedes conseguir 2 Megas de espacio en poco más de
20 minutos el único requisito es que introduzcas un poco de
código HTML en todas las páginas que metas en ese servidor para
que aparezca su logotipo. El único inconveniente es que toda la
información que nos guía para conseguir el espacio de disco y
meter tus páginas está en Ingles.
Intenté conseguir espacio en servidores cuya información se
ofrecía en español pero me pedían muchos datos y me daban muy
poco espacio (150 K, una ridiculez comparado con los 2 Megas de
geocities).
Una vez introducidas tus páginas en alguno de estos servidores
tendrán un URL es decir una dirección de
Internet que metiéndola en el navegador aparecerá nuestra
página.
Os indico una dirección donde tenéis multitud de servidores que
ofrecen su espacio para vuestra página de forma gratuita. Elegid
el que más os convenga.
http://www.ferca.net/esgratis/index.html
En esta dirección encontrareis multitud de servicios gratuitos
en Internet. En la sección Espacio para tus páginas Web
encontraras una amplia lista de servidores donde puedes dejar tu
página de forma gratuita.
Una dirección más :
http://www.ciudadfutura.net/webgratis/
Podréis encontrar servidores que llegan a ofreceros hasta 5
Megas de espacio gratuito.
Una vez que un
servidor alberga nuestra página y tenemos un URL
es decir una dirección de Internet queremos que se nos pueda
localizar, es decir que la gente pueda visitarnos.
Para movernos por Internet es inevitable el uso de Buscadores que
nos lleven a documentos que contengan información que realmente
nos interese.
Los buscadores tiene un hueco donde colocas las palabras clave
sobre las que quieres basar la búsqueda y al rato obtienes una
lista de posibles documentos que tratan sobre las palabras que tu
has introducido.
La mayoría de
los buscadores tienen una opción en la que se pueden añadir URLs.
Se nos preguntará por las palabras clave que harán aparecer
nuestra página. Es decir si nuestra página trata un tema de
astronomía y queremos que gente que quiere información sobre
este tema pueda encontrarnos sería bueno decirle al buscador que
cuando alguien introduzca la palabra clave astronomía
aparezca nuestra página.
Hacer esto en 20 buscadores puede resultar desesperante en muchos
sentidos: en el tiempo que vamos a invertir en poder realizar
toda la operación, en lo mecánico de todo el proceso. Hay
utilidades que harán todo este trabajo por nosotros: nos
preguntarán por que palabras clave queremos ser encontrados, una
descripción de nuestra página, por supuesto nuestro URL
y automáticamente nos meterán en multitud de buscadores
(nosotros podemos elegir en que buscadores entrar). En este
sentido el mejor lugar que he visto es:
Cualquier informacion escribeme a websmaster@lapascalina99.8m.comNota: El autor
de este Manual es David Crecente Casanova.
