MÓDULO DE APRENDIZAJE
CICLO DE FORMACIÓN: BÁSICO COMPONENTE: GENERAL
CUADERNO DE ESTUDIO VENEZUELA, 2006
PROGRAMACIÓN EN HTML Y JAVA SCRIPT
REPÚBLICA BOLIVARIANA DE VENEZUELA MINISTERIO PARA LA ECONOMÍA POPULAR INSTITUTO NACIONAL DE COOPERACIÓN EDUCATIVA
REPÚBLICA BOLIVARIANA DE VENEZUELA MINISTERIO PARA LA ECONOMÍA POPULAR INSTITUTO NACIONAL DE COOPERACIÓN EDUCATIVA
Septiembre, 2006
Especialistas en Contenido Edwin Hernández (T.S.U Informática - Gerencia Regional INCE Portuguesa) Trascripción y Diagramación Birley Carolina Escalona (Analista Productor de Medios – Gerencia Regional INCE Portuguesai) Coordinación Técnica Estructural División de Recursos para el Aprendizaje Coordinación General Gerencia General de Formación Profesional Gerencia de Tecnología Educativa 1ra Edición 2006 Copyright INCE
ÍNDICE INTRODUCCIÓN.................................................................4 ENCABEZADO DE LA PÁGINA........................................3 Título de la Página.............................................................3 Descripción de Servidores.................................................3 ESTRUCTURA DEL CUERPO DE LA PÁGINA ...............5 Uso de Instrucciones Generales para Párrafos y Textos....5 Estructuras del Cuerpo de la Página..................................5 Diagramación Previa de la Página.....................................6 FUENTES..............................................................................7 Tipos de fuentes.................................................................7 Estructuras para la Personalización de las Fuentes ...........8 FONDOS ............................................................................10 Tipos de Fondos...............................................................10 TABLAS..............................................................................13 Determinación del Ancho................................................15 Espaciado entre Celdas....................................................15 Combinación ...................................................................16 IMÁGENES ........................................................................18 Estructuras de etiquetas para imágenes...........................18 Atributos..........................................................................19 Formatos a la Imagen......................................................19 Procedimiento Técnico para la Inserción de imágenes....20 CARACTERES ESPECIALES...........................................22 FORMULARIOS DE CONFIRMACIÓN Y ENVÍO.........25 MARQUESINAS................................................................27 Estructuras.......................................................................27 Formatos .........................................................................27 CONTADORES...................................................................29 Cómo Funcionan los Contadores.....................................29 Servicios Públicos para Contadores................................29 PUBLICACIÓN DE PÁGINA WEB..................................31 Selección de Proveedor ..................................................31 Publicación de Páginas....................................................31 ENLACE.............................................................................39
Estructuras de un Enlace..................................................39 TIPOS DE ENLACES.........................................................39 Enlaces de Página con Marco..........................................43 Atributos de las Etiquetas (Frameset)..............................43 JAVA SCRIPT......................................................................44 Acceso de un Java Script en el cuerpo de la página o a través de etiquetas............................................................45 Estructuración de Applets en java script..........................46 REFERENCIAS BIBLIOGRÁFICAS...............................46
INTRODUCCIÓN El Cuaderno de Estudio PROGRAMACIÓN EN HTML Y JAVA SCRIPT tiene como finalidad que el sujeto de aprendizaje adquiera los conocimientos, necesarios para el desempeño eficiente en este tipo de programación; teniendo como fin el establecer e
implementar métodos de trabajo, que faciliten al sujeto
cliente – servidor dentro del ámbito de Internet. Los
su desarrollo en el campo laboral.
programas Java Script, van instalados
a los
documentos HTML y se encargan de realizar acciones HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y
en
el
cliente,
como
puede
ser
pedir
datos,
confirmaciones, mostrar mensajes, crear animaciones, comprobar campos.
agradable, con enlaces (hyperlinks) que conducen a otros
documentos
o
fuentes
de
información
relacionadas, y con inserciones multimedia (gráficos, sonido). La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas), así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Mosaic, o Netscape). Buscando precisamente la interactividad con el servidor (quien aloja las páginas), es así como nace Java Script como una solución intermedia, diseñado específicamente para el desarrollo e aplicaciones
Es importante resaltar que el contenido presentado, se ajusta al programa de formación diseñado según los requerimientos de la Salida Ocupacional, en donde los temas o puntos específicos presentan ilustraciones y que
permitirán
facilitar
referencias bibliográficas, el
aprendizaje.
Seria
conveniente que investigue y comparta experiencias con sus compañeros y en otras fuentes de estudio, a fin de consolidar y enriquecer los conocimientos adquiridos.
Por ejemplo:
ENCABEZADO DE LA PÁGINA Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal del BROWSER que es utilizado para visualizar el documento HTML, principalmente la información encontrada en el encabezamiento es el título del
Curso de HTML ...
documento, comprendido entre las etiquetas y .
Descripción de Servidores Sí una página trata sobre Internet, sus palabras claves
Título de la Página
pueden ser internet, computador, computadores, red,
El título de la página es el que aparecerá en la parte
net, conexión, etc., y cuando alguien se inscribe a la
superior de la ventana del navegador, cuando la
página para que los buscadores la reconozcan, toman
página esté cargada en él.
estas palabras como las palabras clave. Por ejemplo,
Para asignar un título a una página es necesario
si
escribir el texto deseado entre las etiquetas y
,
.
palabras claves, que están dentro de las etiquetas
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas y .
inscribimos
nuestra
página
a
Altavista
revisará
las
y con la siguiente línea:
Programamación en HTML y Java Script
3
Los buscadores son el medio por el cual una persona busca información a su gusto y el buscador encuentra páginas por categorías o por diversos otros criterios. Estos buscadores contienen enlaces al web en cualquier tema, por lo que si se necesita saber sobre algo, lo encuentra.
4
Programación en HTML y Java Script
correspondiente de cierre). Con ella se obtiene una
ESTRUCTURA DEL CUERPO DE LA PÁGINA
raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, como se
Uso de Instrucciones Generales para Párrafos y Textos Antes de crear una página, se deben tomar algunas consideraciones sobre el texto: Cuando se escribe en el documento el texto que se quiere que aparezca en la pantalla, se observa como éste se acomoda a ella, sin que se tenga que pulsar el retorno del carro. Si se desea separar el texto en distintos párrafos se debe usar la etiqueta , (que no tiene su correspondiente etiqueta de cierre )
puede observar a continuación: Ejemplo práctico: En el procesador de texto copiamos lo siguiente: Mi página del Web - 1 Primera pagina
El texto puede tener unas cabeceras, comprendidas entre las etiquetas y , y , etc. (hasta el número 6), siendo el número indicativo del
Aquí va un segundo párrafo.
tamaño. Estructuras del Cuerpo de la Página El tamaño mayor es el correspondiente al número 1. También están los separadores (horizontal rules), que
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes).
se consiguen con la etiqueta (no existe la Programamación en HTML y Java Script
5
La estructura de un documento HTML queda de esta manera: Título de la página [Aquí van las etiquetas que visualizan la página]
El documento en sí está dividido en dos zonas principales: El encabezamiento, comprendido entre las etiquetas y El cuerpo, comprendido entre las etiquetas y Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento, comprendido
Diagramación Previa de la Página
entre las etiquetas y . El título debe
El principio esencial del lenguaje HTML (HyperText
ser breve y descriptivo de su contenido, pues será lo
Markup Language) es el uso de las etiquetas (tags).
que vean los demás cuando añadan nuestra página a su bookmark (o agenda de direcciones).
Funcionan de la siguiente manera: Este es el inicio de una etiqueta. Este es el cierre de una etiqueta. Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por claridad, se usarán en este manual solamente las mayúsculas. Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas y : [Todo el documento] 6
Programación en HTML y Java Script
FUENTES
Pero al confeccionar una página del Web, su autor
Es un conjunto de signos, observando todos ellos el mismo motivo básico de acuerdo al diseño, tamaño, apariencia y otros atributos asociados a todo el conjunto, y una asignación de signos abstractos por cada carácter.
puede forzar a que el texto adopte un determinado tipo de fuente, distinto del que tiene configurado el usuario. Pero, para que esto ocurra, el usuario debe tener instalado en su disco duro ese tipo de fuentes (y además con el mismo nombre). Si no lo tiene instalado, entonces verá el texto con la fuente por defecto de su navegador.
Puede usar la etiqueta para mejorar aún más el aspecto del texto. Por ejemplo, puede definir el tipo de fuente, tamaño y color, todo ello con la etiqueta FONT.
Esto se consigue con el atributo FACE="Nombre de la fuente". Por ejemplo, para forzar a que el texto adopte la fuente Verdana, se pondría: Este texto se verá con la
[Atributos de fuente]
fuente Verdana Tipos de fuentes
Que resulta:
Los navegadores utilizan por defecto un tipo de fuentes, generalmente Times New Roman, y que el usuario
puede
cambiar
por
otro
tipo
en
la
configuración de su navegador. Si así lo hace, todas las páginas que cargue tendrán el texto escrito en esa nueva fuente escogida.
Este texto se verá con la fuente Verdana (quien no tenga instalada esta fuente, no notará nada de particular). Se pueden indicar en el atributo varias fuentes distintas, separadas por una coma. Si falla la primera, entonces el texto adopta la forma de la segunda, y así
Programamación en HTML y Java Script
7
sucesivamente. Si fallan todas, el texto adopta entonces la fuente por defecto. Así, por ejemplo: Este texto se verá con la fuente Impact, o en su defecto con Arial
Atributo
Significado
face
fuente
color
color del texto
size
tamaño del texto
Que resulta: Este texto se verá con la fuente Impact, o en su defecto con Arial
(quien no tenga instaladas ninguna
de las dos fuentes, tampoco notará nada de particular). Es decir, que este atributo no es estándar y que depende además de las fuentes instaladas en el ordenador del usuario, no es conveniente basar el diseño de una página exclusivamente en un tipo de fuente. Hay que tener en cuenta que el tamaño de las letras varía mucho de una fuente a otra. Estructuras para la Personalización de las Fuentes Para personalizar las fuentes es necesario tener claro que las propiedades del texto pueden modificarse a través de la etiqueta . Para
8
Posibles valores nombre de la fuente, o fuentes número hexadecimal o texto predefinido valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor
Por ejemplo, para insertar el texto: Bienvenidos a www.aulaclic.com Habría que escribir: Bienvenidos a www.aulaclic.com También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta después de la etiqueta .
ello, podemos insertar el texto entre las etiquetas
La etiqueta no necesita una etiqueta de
y , especificando algunos de los
cierre, y permite modificar los mismos atributos del
atributos de la etiqueta:
texto que la etiqueta . Programación en HTML y Java Script
Por ejemplo: ...
Etiqueta
Este código haría que la fuente del documento fuera
por defecto de color azul, de tamaño 4 y Arial.
Si después de indicar la etiqueta o
, el navegador encuentra otra etiqueta , la que prevalece es siempre la última que se
encuentra. Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuación se muestran algunas etiquetas asociadas al tipo de letra:
Significado negrita cursiva subrayado tachado teletipo (máquina de escribir) aumenta el tamaño de la fuente disminuye el tamaño de la fuente
A continuación se muestran algunas etiquetas asociadas al tipo de información: Etiqueta
Programamación en HTML y Java Script
Significado cita ejemplo de código definición eliminado énfasis insertado teclado muestra destacado subíndice 9
superíndice variable
Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas y es el mismo. Incluso a veces algunos estilos asociados al tipo de información pueden representarse de forma distinta según el navegador.
FONDOS Es donde se realiza el diseño que va identificar la
Por ejemplo, para insertar el texto:
página o documento. Bienvenidos a www.aulaclic.com Tipos de Fondos Habría que escribir: Bienvenidos a www.aulaclic.com
10
Se puede presentar el fondo de dos maneras distintas: • Uniformes
Programación en HTML y Java Script
Se consigue añadiendo el comando BGCOLOR a la
#0000FF
Azul
etiqueta (situada al principio del documento), de la siguiente manera:
Otros colores son:
XX YY ZZ
#FFFFFF #000000 #FFFF00
Es un número indicativo de la cantidad de color rojo Es un número indicativo de la cantidad de color verde Es un número indicativo de la cantidad de color azul
Blanco Negro Amarillo
Para hacer un color más oscuro, se debe reducir el número de su componente, dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más oscuro con #AA0000, o aún más oscuro con #550000. Para hacer que un color tenga un tono más suave
Estos números están en numeración hexadecimal.
(más pastel), se deben variar los otros dos colores
Esta numeración se caracteriza por tener 16 dígitos
haciéndolos más claros (número más alto), en una
(en lugar de los diez de la numeración decimal
cantidad igual. Así, se convierte el rojo en rosa con
habitual). Estos dígitos son:
#FF7070.
0123456789ABCDEF
Veamos algunos ejemplos
Es decir, que en este caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el
Valores
#FF0000, porque tiene el máximo de rojo y cero de los
FF0000 FFFF00 25A7BB
otro dos colores. Los colores primarios son: #FF0000 #00FF00
Rojo Verde
Color resultante
Valores 00FF00 FF00FF ACB312
Color resultante
Valores
Color resultante
0000FF 00FFFF 6047B6
• Con Imágenes Programamación en HTML y Java Script
11
texto y los enlaces que no contrastan bien con ese El fondo de una página puede ser también una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la página, de una manera análoga al tapiz de Windows.
fondo gris. La solución a este problema es poner dentro de la etiqueta los dos comandos BACKGROUND y BGCOLOR (en este orden), teniendo cuidado en escoger un color uniforme de fondo parecido al de la imagen.
La estructura de la etiqueta puede ser: No todos los navegadores soportan este formato.
Por ejemplo, se quiere poner como fondo la imagen nubes.jpg. Entonces se escoge un color de fondo azul claro,
#CCFFFF. La etiqueta
quedaría así:
Se pueden añadir también a esta etiqueta todos
y de los enlaces, vistos anteriormente. Esto es
Esto tiene la ventaja adicional de que, incluso aunque
imprescindible a veces para conseguir que el
no se deshabilite la carga automática de imágenes, al
texto sea legible, en contraste con el fondo.
cargar la página, lo primero que se ve es ese fondo de color uniforme, que luego es reemplazado por el de la
Hay que prever la posibilidad de que quien acceda
imagen.
a la página haya deshabilitado la carga automática de imágenes, en cuyo caso tampoco cargaría la imagen que sirve como fondo y sólo vería el fondo estándar de color gris. Esto podría ser muy perjudicial si hemos escogido unos colores para el 12
Programación en HTML y Java Script
La etiqueta puede ser una poderosa herramienta de formato. Se puede hacer por ejemplo, no mostrar el borde de una tabla en absoluto. También se puede hacer uso de la etiqueta para ubicar
texto
e
imágenes
con
precisión,
en
prácticamente casi cualquier lugar de una página. Asimismo, están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.
TABLAS Son uno de los recursos más utilizados en HTML, ya
Ejemplo:
que su uso a la hora de tabular y presentar contenido es
fundamental.
Asimismo
es
una
poderosa
herramienta, y no sólo para mostrar infinidad de datos sino también para formatear los documentos. Las tablas pueden parecer un modo sencillo de disponer el texto en columnas o quizás de añadir un titular a una ilustración, pero hay modos de sacar un gran partido de una característica aparentemente
imagen y texto
COLUMNA
Texto dentro de una celda
sencilla. FILA Programamación en HTML y Java Script
CELDA 13
Para crear una tabla no basta con especificar el Para crear una tabla hay que insertar las
número de filas, es necesario también especificar
etiquetas y . Entre dichas
el número de columnas.
etiquetas habrá que especificar las filas y columnas que formarán la tabla.
Una celda es el resultado de la intersección entre una fila y una columna, por lo que
especificar el número de celdas por fila, que
DEFINICIÓN DE FILA Es necesario insertar las etiquetas y
por cada una de las filas de la tabla. Estas
equivale a especificar el número de columnas por fila.
etiquetas deberán insertarse entre las etiquetas
Es necesario insertar las etiquetas y
y .
por cada una de las celdas que compongan cada
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas y .
... ... ... ... ...
Entre las etiquetas y se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla:
DEFINICIÓN DE COLUMNA O CELDA
Sábado Domingo Curso HTML Curso Dreamweaver Curso Frontpage Curso Flash Habría que escribir:
14
podremos
Programación en HTML y Java Script
table border="1"> Sabado Domingo Curso HTML Curso Dreamweaver Curso Frontpage Curso Flash
dentro de la etiqueta de la celda los siguientes atributos: Arriba Abajo Determinación del Ancho El
navegador
se
encarga
normalmente
de
dimensionar el tamaño total de la tabla de acuerdo con el número de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc. A veces puede convenir forzarle para que la tabla
Alineación
tenga unas dimensiones totales mayores que las que Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos:
le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla, o a una cifra que equivale al número de pixels.
Al centro A la derecha Cabecera a la izquierda
Por ejemplo, se coloca: O, por ejemplo:
El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar, añadiendo
Espaciado entre Celdas
Programamación en HTML y Java Script
15
Por defecto, la separación entre las distintas celdas de
especifica el número de filas por las que se
una tabla es de dos pixels. Pero se puede variar esto
extenderá la celda.
con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separación de 20 pixels entre celdas:
Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla:
A primera vista parece como si esto fuera lo mismo que si se hubiera aumentado el espesor de los bordes. Pero para comprobar que no es así, se hace que, tenga además unos bordes de 5 de espesor:
Combinación Para las etiquetas y existen los atributos
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS Duración crecimiento
PERRO PEQUEÑO GRANDE 10 meses
18 a 24 meses
HOMBRE 16 años
Tiempo de gestación
58 a 63 días
9 meses
Duración de vida del pelo/cabello
1 año
2 a 7 años
colspan y rowspan, que se utilizan para combinar celdas.
Habría que escribir el siguiente código:
A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se 16
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
Programación en HTML y Java Script
DIFERENCIAS PERRO HOMBRE PEQUEÑO GRANDE Duración crecimiento 10 meses 18 a 24 meses 16 años Tiempo de gestación 58 a 63 días 9 meses Duración de vida del pelo/cabello 1 año 2 a 7 años Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que primero intentaras entender el código comparándolo con la tabla que de él se obtiene.
En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la tabla. En este caso serían cuatro columnas. Para saber el número de columnas total de la tabla, tenemos que fijarnos en el número total de celdas que podemos obtener por fila al trazar las líneas verticales que separan las columnas entre sí. En
la
primera
fila,
la
colspan="4">DIFERENCIAS
línea
imagen.
imágenes dinámicas son aquellas que cambian con 20
En la categoría Común de la barra
Programación en HTML y Java Script
o
Arrastre una imagen desde el panel Activos
imagen. Al guardar el documento en cualquier
(Ventana > Activos) hasta la posición deseada
lugar del sitio, Dreamweaver convierte la
de la ventana de documento. A continuación,
referencia en una ruta relativa al documento.
siga con el paso 3. o
Arrastre una imagen desde el panel Sitio hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.
o
4. Haga clic en Aceptar. Aparece el cuadro Atributos de accesibilidad de la etiqueta de imagen si se ha activado el cuadro de diálogo en Preferencias (véase Optimización del
Arrastre una imagen desde el escritorio hasta la posición deseada de la ventana de
espacio de trabajo para el diseño de páginas accesibles).
documento. A continuación, siga con el paso 3. 2. En el cuadro de diálogo que aparece, siga uno de estos procedimientos: o
Seleccione Sistema de archivos para elegir un archivo gráfico.
o
Seleccione Fuente de datos para elegir un origen de imagen dinámica.
3. Busque y seleccione el origen de imagen o contenido que desee insertar. Si está trabajando en un documento que no está guardado, Dreamweaver genera una referencia de archivo: // para el archivo de Programamación en HTML y Java Script
21
5. Introduzca los valores en los cuadros de texto alternativo y Descripción larga y haga clic en Aceptar. 6. Para más información, consulte Configuración de las opciones del cuadro de diálogo Atributos de accesibilidad de la etiqueta de imagen. 7. La imagen aparece en el documento. 8. En el inspector de propiedades (Ventana > Propiedades), establezca las propiedades de la imagen. Para más información, consulte Configuración de propiedades de imagen. Para editar los atributos de accesibilidad de la imagen, véase Edición de los atributos de
CARACTERES ESPECIALES
accesibilidad de una imagen. Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas, se forman como un comando escrito entre los símbolos "". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el programa navegador podría 22
Programación en HTML y Java Script
interpretarlos como el comienzo o final de una
á é í ó ú Á É Í Ó Ú
etiqueta, en vez de un carácter más del texto. Para resolver este problema, existen unos códigos para
poder
escribir
estos
caracteres
y
otros
relacionados con las etiquetas. <
para < (less than, menor que)
>
para > (greater than, mayor que)
&
para & (ampersand)
"
para " (double quotation)
Para la á Para la é Para la í Para la ó Para la ú Para la Á Para la É Para la Í Para la Ó Para la Ú
Como se ve, estos códigos empiezan siempre con el signo “&” y acaban siempre con “;”
El resto de los códigos son:
De una manera similar, existen códigos para escribir ñ Ñ ü Ü ¿ ¡
letras específicas de distintos idiomas. Hay muchos de ellos, pero, lógicamente, los que más nos interesan son
los
propios
del
castellano
(las
vocales
acentuadas, la “ ñ ” y los signos “ ¿ ” y “ ¡ ” ). Los códigos de las vocales acentuadas se forman comenzando con “&”, seguido de la vocal en cuestión, seguido de la palabra acute (aguda) y terminando con el signo “;”.
Para la ñ Para la Ñ Para la ü Para la Ü Para ¿ Para ¡
Todo esto, que como se ve es muy laborioso, puede parecer inútil ya que si se escribe el texto sin hacer ningún caso de estas convenciones, escribiendo las letras acentuadas y demás signos directamente, es muy posible que el resultado se vea correctamente en
Programamación en HTML y Java Script
23
dicho navegador, pero nunca se puede estar seguro que le ocurra lo mismo a todos los que accedan a estas páginas con navegadores distintos. Por ejemplo, para insertar el texto: ¡Bienvenidos, esta es mi 1ª página! Habría que escribir: ¡Bienvenidos, esta es mi 1ª &nb sp;página!
24
Programación en HTML y Java Script
FORMULARIOS DE CONFIRMACIÓN Y ENVÍO Es
un
elemento
que
permite
recoger
Ejemplo:
datos
introducidos por el usuario. Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones. Un formulario está formado, entre otras cosas, por
etiquetas,
campos
de
texto,
menús
desplegables, y botones. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se
consigue
una
mejor
distribución
de
los
elementos del formulario, lo que facilita su comprensión y mejora su apariencia.
Programamación en HTML y Java Script
25
Esta marquesina ocupa el 50% del ancho de la
MARQUESINAS
pantalla y tiene una altura de 60 pixels
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo son válidas para el Explorer de Microsoft (en el Netscape se verá como texto fijo).
ALIGN Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
Estructuras
La palabra "¡Hola!" estará
Texto que se desplaza
alineada
con
la
parte
Que resulta como:
marquesina ¡Hola!
Texto que se desplaza
Que resulta como:
inferior
de
la
La palabra "¡Hola!" estará alineada con la parte
Formatos
inferior de la marquesina ¡Hola!
WIDHT, HEIGHT Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un número de pixels, o a un porcentaje de la pantalla. Ejemplo:
Esta
marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels Que resulta como: Programamación en HTML y Java Script
27
Un contador de visitas no se crea simplemente con una etiqueta del lenguaje HTML, sino que se genera en un programa CGI especial residente en el servidor. Puede tratarse del servidor donde esté alojada nuestra página si es que tiene instalado un programa de este tipo, o en caso contrario se puede recurrir a otros servidores distintos que den este servicio.
Servicios Públicos para Contadores Cuando se carece de un programa de contador, se puede recurrir a otros servidores que dan este servicio de manera generalmente gratuita. El único inconveniente que puede tener esta solución es que al cargar el usuario la página, al llegar a la etiqueta del contador, la solicitará a este otro servidor,
Cómo Funcionan los Contadores
y puede ocurrir que esté inaccesible en ese momento,
Si se quiere instalar en la página un contador de
o sea lento en dar la respuesta.
accesos, se debe colocar en el documento HTML una
A continuación se sumistra los URLs de algunos de
etiqueta que haga una llamada a un programa
estos servidores. En ellos se pueden encontrar las
instalado en un servidor que suministre este servicio.
instrucciones para crear un contador.
Estas etiquetas no son un standard del lenguaje
Servicio de contadores, de Pedro Hurtado (España)
HTML, sino que nos la tiene que suministrar quien nos
Contador de Páginas WWW (Portugal, en portugués)
dé el servicio, ya que depende del programa que
WebCounter (USA). En La Agenda, de Manuel Barberán se puede
tengan instalado en el servidor. Por ejemplo, la etiqueta para el contador de
encontrar más servidores. En el buscador Yahoo! Se
WebMaestro (instalado en la página de la portada de
puede
este manual) es la siguiente:
programas para crear contadores.
encontrar
Programamación en HTML y Java Script
información
(en
inglés)
sobre
29
decir, un ordenador conectado permanentemente con
PUBLICACIÓN DE PÁGINA WEB
Internet y dotado de un programa específico, lo que
Selección de Proveedor
supone una gran inversión económica y unos
Los proveedores comerciales de acceso a Internet, o ISPs
(Internet
frecuentemente
Service a
sus
Providers) usuarios
que un
ceden espacio
determinado en sus servidores, para que puedan
colocar sus páginas personales, bien sea gratuitamente o por una tarifa determinada.
elevados conocimientos técnicos. La solución es instalarla en un servidor conectado a la WWW (World Wide Web: la telaraña mundial), la red de servidores interconectados entre sí que permite acceder a cualquier página en cualquier parte del mundo, y navegar a través de ellas. Los distintos canales para colocar una página en la red son:
Las empresas comerciales que, sin ser proveedores
Los servidores de las instituciones oficiales y
de acceso a Internet, se dedican a alquilar espacio
académicas a sus miembros, para la difusión de
para la colocación de páginas, de carácter personal o
información relacionada con esos organismos.
comercial.
Publicación de Páginas El propósito que se tiene al confeccionar una página del Web es, por supuesto, el de publicarla y ponerla a disposición de todo el mundo. No puede colocar directamente en la red, pues se necesitaría disponer para
esto de un servidor, es Programamación en HTML y Java Script
31
TIPOS DE ENLACES
ENLACE La
característica
que
más
ha
influido
en
el
espectacular éxito del WEB ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto.
• Dentro de una Misma Página A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada.
En este caso, lo que
antes se ha llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la página a
Estructuras de un Enlace
donde se quiere saltar, se sustituye por #MARCA (la En general, los enlaces tienen la siguiente estructura:
palabra MARCA puede ser cualquier palabra que se
YYY
quiera).
Donde XXX es el destino del enlace (Obsérvese las
Lo que se ha llamado antes YYY es la palabra (o
comillas). YYY es el texto indicativo en la pantalla del
palabras) que aparecerán en la pantalla en color (en
enlace (con un color especial y generalmente
forma de hipertexto). Su estructura es, entonces:
subrayado)
YYY Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:
• Con otras Páginas Puede ser que se tenga una sola página. Pero lo más frecuente es que haya varias páginas, una inicial (o Programamación en HTML y Java Script
39
principal) y otras conectadas a ella, e incluso entre
Una observación importante: Pudiera ocurrir que el
ellas mismas.
sitio del WEB estuviera organizado con un directorio
Por ejemplo se quiere enlazar con la página creada, la
principal, y otros subdirectorios auxiliares. Si la página
cual se ha llamado mipag2.html. En este caso,
a la que se desea accesar está, por ejemplo en el
simplemente se sustituye lo que se ha llamado XXX
subdirectorio misubdir, entonces en la etiqueta tendría
(el destino del enlace) por el nombre del archivo:
que colocarse "misubdir/mipag2.html".
Ejemplo de la segunda
Y a la inversa, si se quiere saltar desde una página a
página
otra que está en un directorio anterior, en la etiqueta tendría que haber puesto "./mipag2.html". Esos dos
Si se quiere que vaya a un sitio concreto de otra
puntos hacen que se dirija al directorio anterior.
página en vez de ir al principio de la página, adonde
Obsérvese que se debe utilizar el símbolo / para
va por defecto, en ese sitio se tiene que colocar una
indicar los subdirectorios, y no este otro \, que es
marca (ver la Enlaces dentro de la misma página), y
propio únicamente de Windows.
completar el enlace con la referencia a esa marca. Se
puede
ver
con
el
siguiente
ejemplo:
es la marca que se coloca en la página, que deseamos accesar desde otra nuestra. Entonces la etiqueta tiene que ser:
Si se desea evitar todas estas complicaciones, se puede tener todo junto en un único directorio, pero esto tiene el inconveniente de que esté todo más desordenado, y sean más difíciles de hacer las futuras modificaciones.
En mi otra pagina .
40
Programación en HTML y Java Script
• Con otras Direcciones Electrónicas
Texto del enlace
Si lo que se quiere es enlazar con una página que
Un ejemplo podría ser:
esté fuera de nuestro sistema (es decir, que esté en
un servidor distinto al que soporta
Tom Zambrano
la página), es
necesario conocer su dirección completa, o URL
Hay algunos navegadores que no subrayan el
(Uniform Resource Locator). El URL podría ser,
comentario de este tipo de enlace.
además de la dirección de una página del WEB, una
Una manera recomendable y más segura para
dirección de FTP, GOPHER, etc.
conocer la dirección e-mail seria poner algo así como:
Una vez conocida la dirección (o URL), lo colocamos
Comentarios a Tom Zambrano en
(el destino del enlace). Si se quiere enlazar por
[email protected]
ejemplo con la página de Netscape (cuyo URL es: http://home.netscape.com/), la etiqueta sería:
del enlace la dirección de e-mail.
Página inicial de Netscape Es
muy
importante
correctamente minúsculas,
copiar
(respetando
pues
los
estas las
servidores
direcciones
mayúsculas UNIX
Es decir, es conveniente, poner también en el texto
sí
y las
distinguen). En este caso, se sustituye lo que se ha llamado antes XXX (el destino del enlace) por mailto: seguido de la dirección de e-mail. La estructura de la etiqueta es:
Ejemplo: Mi pagina del Web - 3 Mis paginas favoritas Estas son mis páginas favoritas:
Programamación en HTML y Java Script
41
Netscape Microsoft Yahoo!
MARCOS (FRAMES)
42
Programación en HTML y Java Script
Frames (en inglés, marcos o cuadros) es un
TARGET="_top", con lo que al pulsar el enlace la
procedimiento del lenguaje HTML para dividir la
nueva página se cargará a pantalla completa.
pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se
Atributos de las Etiquetas (Frameset)
trataran de páginas diferentes, pues incluso cada una de
ellas
pueden
tener
sus
propias
barras
La
etiqueta
FRAMESET, es
la
que
define
la
deslizaderas. Los navegadores que lo implementan
distribución, el número y tamaño de los frames. Tiene
son el Netscape 2.0, y el Explorer 2.0 en adelante.
dos atributos: COLS (columnas) y ROWS (filas):
Enlaces de Página con Marco
A veces encontramos páginas con frames que contienen enlaces a otros sitios del Web que al ser
Define la distribución de los frames en columnas o en
pulsados se cargan dentro del mismo frame. Esto
filas, según se use uno u otro atributo.
resulta generalmente molesto para el usuario, pues la
Define el número de frames que habrá, pues, por
página cargada queda aprisionada dentro del reducido
ejemplo:
espacio del frame (agravado aún más si la página
columnas)
cargada contiene ella misma sus propios frames).
a otras páginas. La manera de evitar esto es poner, dentro de las etiquetas de los enlaces en cuestión, el atributo
Define el tamaño de los frames, según el valor que demos a XX, YY, ZZ.... Este valor se puede expresar en:
Programamación en HTML y Java Script
43
Un porcentaje del ancho del pantalla (para las
los que vamos a ver a continuación, para que se
columnas), o del alto de la pantalla (para las filas).
ajuste el total a la pantalla del usuario
Así, por ejemplo:
Un valor relativo que se consigue poniendo un asterisco (*), en vez de un número. Esto se interpreta
(la columna de la izquierda ocupará el 20% del ancho de la pantalla, y la
como que ese frame debe tener el espacio restante. Por ejemplo:
de la derecha el 80% restante) (Habrá tres filas, la (la fila superior ocupará el 10% del alto de la pantalla, la del
superior y la inferior de una altura fija de 100 pixels, y la del medio obtendrá el espacio restante).
medio el 70%, y la inferior el 20%) Un número absoluto que representa el número de pixels que ocupará cada frame a lo ancho o a lo alto (según sean filas o columnas). Así, por ejemplo: (la columna de la izquierda tendrá 40 pixels de ancho y la de la derecha 600). Pero es peligroso utilizar sólo valores absolutos, pues el tamaño de la pantalla varía de un usuario a otro. Si se va a usar algún valor absoluto para un frame, es mejor mezclarlo con alguno relativo, como
JAVA SCRIPT Es un lenguaje de programación orientado a objetos que ha sido desarrollado por la compañía Sun
44
Programación en HTML y Java Script
Microsystems, basándose en el lenguaje C++. Aunque es también un lenguaje de carácter general, su principal característica es la de ser independiente de
Pero en este caso concreto, falta añadir los
cualquier plataforma, lo que le hace ser muy
parámetros que personalizan el applet a gusto del
adecuado para ser utilizado en Internet, ya que puede
usuario (sobre todo el texto que se quiere que
ejecutarse en cualquier ordenador que tenga un
aparezca). Para ello se añaden etiquetas de este tipo:
navegador compatible con Java.
Acceso de un Java Script en el cuerpo de la página o a través de etiquetas
Para escoger el texto, será, por ejemplo:
Para colocar el applet en la página, se debe utilizar las siguientes etiquetas (que se colocan donde
decir entre las etiquetas y ):
De momento no se va a definir más parámetros. El resto de ellos serán los que ha escogido su autor por
así:
Con esto se le indica al navegador que cargue un applet, cuyo código compilado es SineText.class, que se encuentra en el mismo directorio que el propio documento HTML, y 500x100 pixels.
que le reserve un área de
Programamación en HTML y Java Script
45
Estructuración de Applets en java script Con los applets se pueden conseguir efectos visuales y sonoros (incluso ambos a la vez), textos en movimiento,
utilidades
(por
ejemplos:
relojes),
pequeños programas educativos, juegos interactivos, presentaciones multimedia, entre otros. Lo primero de todo, es necesario tener el programa del applet. El ejemplo de applet visto anteriormente, y que vamos a examinar a continuación con detalle, se llama SineText.class. Se trata de un applet que hace que un texto (elegido por el usuario) se desplace formando una onda sinusoidal, en dirección reversible con un click del ratón. Se pueden escoger los colores del fondo y de las letras, elegir entre algunos tipos de fuentes, su
REFERENCIAS BIBLIOGRÁFICAS
tamaño, velocidad de desplazamiento. Arocena, F (2006), Manual Html, Documentos en línea http://www.ldc.usb.ve/~vtheok/webmaestro/ 46
Programación en HTML y Java Script
[Consulta: 2006, Septiembre 20] Curso de Html, Documentos en línea http://www.aulaclic.es/html/f_html.htm [Consulta: 2006, Septiembre 29] Lora, V (2006), Un sitio en Internet La Web, Documentos en línea http://www.monografias.com/trabajos5/laweb/laweb.shtml
[Consulta: 2006, Septiembre 20]
Luna, R (1998), Curso de Iniciación Html, Documentos en línea http://platea.pntic.mec.es/~rluna/CursoHTML [Consulta: 2006, Septiembre 22]
Programamación en HTML y Java Script
47
