Profesional Programación en HTML, 1ª Parte

ÍNDICE DEL CURSO

Fundamentos: crear el primer archivo HTML Nº 35
Para Cómo diseñar y dar formato a los textos Nº 37
principiantes Listas, barras y vínculos Nº 39
Insertar imágenes Nº 41
Distintos formatos de escritura Nº 43
División de páginas con tablas Nº 45
Para Insertar y dimensionar marcos Nº 47
expertos
Ejemplo de formulario Nº 49
Qué son y para qué sirven los identificadores Nº 51
Para Conceptos básicos del estilo en cascada Nº 53
profesionales HTML con Java Nº 55
Probando las páginas HTML Nº 57
Principios legales de las páginas de Internet Nº 59

SUMARIO
¿Qué es el HTML? 66
Así funciona el HTML 66
Mi primer documento HTML 67
Ver mi primera página HTML 68
Los navegadores más importantes 68

plorer de Microsoft y seguir

los pasos siguientes:

1 Inicia el navegador ha-

ciendo click en
y
,
.
También se puede acceder
directamente haciendo do-
ble click sobre el icono:

que normalmente estará en

Foto: Super Stock. Montaje: Computer Hoy.

el escritorio 05 (Pág. 68) .

2 Una vez dentro del

navegador haz click en
cualquier parte de la barra
, de
forma que la dirección ac-
tual quede seleccionada en
azul: .
A continuación escribe la
dirección y
pulsa la tecla $.
La palabra Web significa en inglés tela de araña y se utiliza por su similitud
con la estructura de las páginas de Internet. Nosotros no nos vamos a convertir
en el hombre araña pero vamos a aprender a crear nuestra propia página Web. 3 Tendrás que esperar
unos instantes hasta que
aparezca la página principal
a mayoría de las páginas textos y las imágenes con- nes de nuestra página. Poco nar unas páginas con otras de “Yahoo España”:

L Web que visitamos en la

red Internet pertenecen
a las empresas, que utilizan
tenidos en las páginas.
Aprender el lenguaje
HTML no es demasiado di-
a poco aprenderemos a dar
formato a los elementos y
complicaremos las cosas
utilizando hipervíncu-
los para “navegar” a tra-
vés de la información y
este medio para vender o fícil. En Computer Hoy he- con hipervínculos 04 , ta- saltar de página en pá-
promocionar sus productos mos dividido este curso en blas y formularios. gina para localidar la in-
y servicios. Pero Internet es trece capítulos donde ex- formación deseada.
un medio que puede ser uti- plicaremos paso a paso to- ¿Qué es HTML?
lizado por todos. Dominan- das las herramientas nece- La abreviatura HTML sig- Así es el HTML
do el lenguaje HTML 01 se sarias para diseñar atractivas nifica “Hypertext Markup El texto HTML que se
pueden crear páginas Web páginas de inicio 03 . Language”, traducido al cas- oculta detrás de una pá-
propias y publicarlas en In- En esta primera entrega tellano “Lenguaje para cre- gina Web se puede ver
ternet. El HTML es el len- del curso vamos a crear un ar hipertextos”. Con el len- sin más. Para echar tu
guaje que se utiliza en las pequeño archivo HTML que guaje HTML se puede dar primer vistazo al códi-
páginas Web y debe ser in- cargaremos con el navega- formato al texto de las pá- go HTML de una página
terpretado por los navega- dor. Así aprenderemos a in- ginas Web y lo más impor- Web de Internet puedes
dores 02 para mostrar los troducir los textos e imáge- tante, permite interrelacio- utilizar el navegador Ex-
64 Nº 35
 Profesional
¿Que se necesita? ¿Qué es...?

▼
Si quieres ver el texto Con estas líneas estamos
HTML que se esconde de- Para programar en HTML dando un título a nuestra pá-
trás de esta página tendrás tan sólo necesitas un orde- gina. Este título será el que
01 HTML
que hacer click sobre y nador con Windows 95 ó 98 aparece en la barra superior Significa “Hypertext
Markup Language” y es
. Aparecerá una
ventana con mucho texto:
y un navegador para ver las
páginas. El Internet Explo-
rer que viene con Windows
de la ventana del navegador
cada vez que se muestre la
página:
4 Para terminar tu primer
archivo HTML escribe
en la última fila. El
el lenguaje de progra-
mación utilizado para
crear las páginas de In-
95 y 98 puede servirnos per- código ternet. En él se definen
fectamente. completo las imágenes, los textos
También necesitas el pro- debe ser: y los hipervínculos que
grama “Bloc de notas” que tendrá la página. En el
viene con Windows 95 y 98.
Para iniciarlo tienes que ha-
cer click sobre ,
3 Escribe la cuarta, quinta
y sexta filas: 5 Haciendo click en las op-
ciones y
aparece la ventana:
HTML se permite la utili-
zación de dos formatos
de imagen: el GIF y el
, y JPEG. En algunas varia-
.
A continuación verás la
ventana del editor
6 Para guardar el texto en
la carpeta
puedes seguir con el paso
ciones de este lenguaje
se han incluido otros
formatos gráficos como
No olvides pulsar la tecla 7. Si quieres guardarlo en el PNG. También permi-
$ después de cada una de otro sitio haz click en: te la introducción de
A primera vista, lo que más ellas. Con este paso hemos otros contenidos como
llama la atención de este conseguido introducir el y elige la ruta deseada. vídeo y sonido.
texto son las palabras que
se encuentran entre y
02 Navegadores
Estos programas permi-
Estos elementos son iden-
ten visualizar el conteni-
tificadores 06 (Pág. 68) que que utilizarás para escribir
do de las páginas Web
permiten dar formato al tex- tu primer ejemplo. de Internet. También se
to. Por ejemplo: el identifi- utilizan para descargar
cador hace que el tex- Nuestro primer ficheros o visualizar
to que se escriba a documento contenidos multimedia.
continuación aparezca en En la actualidad los na-
negrita. No te preocupes si
no entiendes nada de lo que
pone. Cuando hayas termi-
1 Escribe en la
primera fila y pulsa la te-
cla $.
vegadores más utiliza-
dos son el Explorer de
Microsoft y el Navigator
nado con todos los capítu- de Netscape. El sistema
los del curso podrás desci-
frar sin problemas este texto
HTML.
2 Introduce las tres líneas
de texto texto
que en la página
operativo Windows 98
incorpora el navegador
de Internet como uno de
Web que tendrá el los accesorios básicos
del sistema.
4 Cierra el Bloc de notas y
el Internet Explorer ha-
ciendo click sobre .
pulsando la tecla $ al final
de cada una.
aspecto
cuando sea mostra-
da en el navegador. 03 Página
de Inicio
También llamada Home
o Homepage. La presen-
Editores HTML No es programación tación de personas o
empresas en Internet
consiste en varias pági-
La forma más sencilla de problema hay que conocer adecuado para mostrar di-
nas conectadas entre sí.
crear una página Web es el lenguaje HTML y optimi- vez la frase “programar en ferentes tipos de conteni-
La página de inicio es la
utilizar un editor especial de HTML”, el HTML no es un dos de texto e imágenes. principal y la que da ac-
HTML. Este tipo de progra- páginas manualmente. ceso a las demás.
mas permiten colocar fácil- En Computer Hoy hemos
mente los textos e imá- preferido centrarnos en el ar Bucles ni menzó a surgir a principios 04 Hipervínculos
genes que se desean pre- diseño de páginas con un evaluar las condiciones de la era de la informática. También se conocen co-
sentar en la página Web y editor de texto normal. Es- 08 (Pág. 68) de las varia- mo enlaces. Son re-
genera el código HTML au- to te permitirá aprender la pezando a procesar textos ferencias entre varias
tomáticamente. sintaxis y funcionamiento Al HTML también le falta con ordenadores y todavía páginas que se encuen-
Pero estos editores también de este lenguaje y crear otra característica: no per- no existía nada que se tran en la red Internet.
tienen sus inconvenientes. páginas mucho más efi- mite evaluar los datos in- pareciera a Se suelen distinguir por
Los programas económicos troducidos por el usuario. tener un color distinto al
suelen ser poco eficaces y curso dominas el HTML, resto del texto, estar su-
los más caros tienen un ma- podrás utilizar cualquier quería presentar una pala- brayados o representa-
nejo muy complicado. editor sin problemas. Ade- campos de un formulario. dos por una imagen. Al
Además, muchos de estos Pero la evaluación de esta hacer click sobre ellos,
editores crean un código información se debe reali- el navegador carga la
HTML poco depurado. En zar posteriormente con un indicaba a la impresora: página correspondiente.
Los hipervínculos per-
muchos casos se repiten guaje HTML. Esto te per- programa adicional. “escribe el siguiente texto
miten que el usuario se-
instrucciones que no sirven mitirá optimizar el funcio-
leccione la información
para nada y ralentizan el namiento de tu páginas in- es un lenguaje para pre- gue el mismo principio de que desea visualizar.
funcionamineto de la pá- troduciendo parte de códi- sentar textos. Su estructu- funcionamiento para mos-
gina. Para solucionar este go manualmente. trar los textos.
▲

Nº 35 65
 Profesional Programación en HTML, 1ª Parte
¿Qué es...?
7 8
▼
Sobreescribe el nombre Haz click en y en
de archivo con para ver de
. nuevo el texto HTML de la
Si no aparece so- página:
bre fondo azul, haz click con
en botón izquierdo en la
parte derecha, junto a la “o”
y sin soltar el botón, des-
plaza el puntero hacia la iz-
quierda hasta que toda la pa-
labra aparezca seleccionada
sobre fondo azul .Y Si se compara el texto
escribe el nombre del ar- HTML con la página Web,
chivo . Primero haz click sobre la Haz click en y nos damos cuenta que los
Para guardar el documen- pestaña . en la casilla únicos elementos que se re-
to tienes que pulsar sobre aparecerá el nombre piten en ambos sitios son:
el botón . La exten-
sión 11 (Pág. 70) del archivo 5 Haz click en la carpeta .
.
y

puede ser “htm” o “html” in-

distintamente. 7 Haciendo click en
y
quiere decir que
el texto que aparece a con-
tinuación es una página

8 Cierra el editor hacien-

do click en .
Web.
y signi-
fican “cabeza” y “cuerpo”.
Ver nuestra prime- Si no consigues ver esta Con ellos se divide el có-
ra página HTML carpeta haz click en las fle- podrás visualizar el archivo digo HTML en dos partes: la
chas en el navegador: “cabeza” o “cabecera” es la

1 Para ver tu primera pági-

na HTML tendrás que ini-
hasta que puedas verlo. primera parte del texto
HTML y se utiliza para defi-
ciar el navegador repitien-
do el paso 1 del apartado
“Así es el HTML” que se en-
6 Ahora podrás ver el con-
tenido de la carpeta
Se trata de una página
nir algunos valores que se
refieren a toda la página.
Por ejemplo, en la sección
cuentra en la página ante- muy sencilla. Pero en los se puede definir
rior. próximos capítulos tus pá- el título de la página para
ginas irán tomando más co- que posteriormente este

2 Haz click en las opcio-

nes y .
lorido. aparezca en la barra supe-
rior del navegador.
En la sección se
suelen introducir los textos
3 de el siguiente12 cuadro
En diálogo (Pág. 70)
tendrás que pulsar el botón.
y las imágenes que se mos-
trarán en el navegador.
Si te fijas un poco en el

4 Entonces aparecerá una

ventana de diálogo en la
que debes seleccionar la
texto HTML te darás cuenta
de que todas las expresio-
nes que se encuentran en-
carpeta donde se encuentra tre paréntesis de flecha apa-
el archivo. recen por duplicado.

Navegadores para diseñar HTML

66 Nº 35
 Experto Programación en HTML, 1ª Parte
¿Qué es...?
4 9
▼
Primero aparece Ahora ya puedes ver tu Guarda el archivo ha- haciendo click en ,
y después . Con archivo ciendo click en y y .
pasa lo mismo y Haz click sobre él de for- en .
aparece . A estos
identificadores que van pre-
cedidos de una línea oblicua
ma que en el campo nombre

10 Para
com-
2 Haz click en cualquier
posición de la línea de
dirección:
se les llama “identificadores probar el , de
de cierre”. Gracias a esta cambio, re- manera que aparezca selec-
metodología podemos divi- pite los pa- cionada sobre fondo azul:
dir el documento HTML en sos 1 a 7 .
varias secciones indepen- del aparta-
dientes y todos los elemen-
tos que estén entre dos
identificadores del mismo
do “Ver
nuestra pri-
mera pági-
3 Ahora debes escribir la
ruta donde se encuentra
el archivo. En nuestro caso
tipo estarán relacionados. na HTML”. tendras que escribir: La uni-
Por ejemplo: todo lo que se El navega- dad del disco duro , el
encuentre entre los identi- dor nos nombre de la carpeta
ficadores y aparezca el nombre de tu mostrará los cambios y el nombre
es el título de la página: del archivo
página. En HTML todas las . .
funciones tienen un identi- Después de escri-
ficador de inicio y otro de
cierre que permiten indicar
al ordenador donde empie-
5 Para abrir el archivo haz
click en .
bir la ruta completa:

tendrás que pulsar la

za y donde acaba una de- tecla $ y tu archi-
terminada función. Si has vo HTML se cargará.
terminado de visualizar tu
primer documento HTML,
cierra las ventanas del na-
vegador y block de notas ha-
11 Para cerrar el navega-
dor Internet Explorer
puedes pulsar sobre .
4 Cuando termines de vi-
sualizar la página cierra
el navegador pulsando .
ciendo click sobre sus . En los próximos capítulos
Cargar la página del curso aprenderás las or-
Más texto para rápidamente
nuestra página
Antes de pasar a otros ca-
7 Escribe y pulsa la
tecla $. Este identifica-
dor dice al navegador que
Si sabes en que carpeta se
encuentra el archivo HTML
denes HTML que permiten
estructurar el texto.

pítulos de este curso pue- debe saltar a la siguiente lí- puedes abreviar el proceso
des ampliar un poco el con- nea antes de mostrar el tex- de carga ahorrándote los pa- ➜
tenido de la página que to siguiente. sos donde seleccionas la
hemos creado. carpeta del archivo.

1 Abre el editor de textos

haciendo click en
8 Después de esta acción
aparecerá otra línea en
blanco 1 Inicia el navegador Mi-
crosoft Internet Explorer
, , y
.
En esta línea puedes es-
Lo más importante
2 Haz click en y
. Aparecerá la ven-
tana de diálogo:
cribir la frase siguiente

Después de introducir el Al final de cada capítulo te

repetimos los conceptos
más importantes:
Los identificadores de cuer-
y

y
.

De momento no podrás texto la ventana del editor

ver tu archivo, ya que el edi- tendrá este aspecto
tor sólo muestra los archi- ficador
vos con extensión “.txt”.
de flecha y . Casi to- tar una línea y poste-

3 Haciendo click en el bo-

tón presentación de texto o

se desplegará la lista no necesita un iden-

donde debemos selec- y .
■

cionar la entrada
68 Nº 35
 Profesional Programación en HTML, 2a Parte

Diseñar una plantilla de trabajo 74

Protección de la plantilla 75
Salto de línea 75
Trabajar con párrafos 78
Abrir archivos HTML rápidamente 78

Foto: PICTOR uniphoto. Montaje: Computer Hoy.

Fundamentos: crear el primer archivo HTML Nº 35
Cómo diseñar y dar formato a los textos Nº 37
Para
principiantes Listas, barras y vínculos Nº 38
Insertar imágenes Nº 39
Distintos formatos de escritura Nº 40
Lo primero que debe aprender un diseñador de páginas División de páginas con tablas Nº 41
Para Insertar y dimensionar marcos Nº 42
expertos
web es a organizar el texto. En Computer Hoy Ejemplo de formulario Nº 43
te lo vamos a explicar muy claro, para que tus páginas Qué son y para qué sirven los identificadores Nº 44
se conviertan en auténticas obras de arte. Conceptos básicos del estilo en cascada Nº 45
Para
profesionales HTML con Java Nº 46

E
n la primera entrega
del curso de creación
de páginas Web con
Diseñar una
plantilla de trabajo 1
en:
Inicia el editor hacien-
do click sucesivamente
, ,
Probando las páginas HTML Nº 47
Principios legales de las páginas de Internet Nº 48
Debido a la avalancha de cartas de los lectores hemos decidido modificar la programación
HTML 01 aprendimos los Los que utilizamos HTML y . del curso HTML. A partir de este número publicaremos una entrega cada 15 días.
principios básicos de este para crear nuestras páginas
lenguaje y creamos nuestra
primera página web. Para
comprobar el resultado de
Web sabemos que la mayoría
de nuestras páginas tienen
una estructura muy similar.
2 Haz click en cualquier
parte del área blanca de
la ventana del editor .
del documento. Este identi-
ficador sirve para indicar al
navegador que todo lo que
ejemplo
cualquier otro texto que
posteriormente aparecerá
o

nuestros ejercicios, tuvimos Por esta razón, normalmente viene a continuación es có- en la barra de título 03 de
que recurrir a la utilización creamos una plantilla en la digo HTML. la ventana del navegador.
de un navegador 02 . que se incluyen todos los co-
En esta segunda entrega
aprenderemos algunas ins-
mandos comunes a nuestras
páginas. Si sigues los pasos 4 Escribe y pulsa
la tecla $. Después es- 6 Pulsa la tecla $ y escri-
be
.
trucciones que nos permi-
tirán dar un formato más
atractivo a nuestros textos.
que te indicamos a conti-
nuación, obtendrás una
plantilla que te servirá de
3 En la primera línea de tex-
to tendrás que escribir
cribe y vuelve a
pulsar la tecla $. Estos
identificadores confirman
Hemos recibido una aba- estructura básica para to- que a continuación viene el No olvides pulsar la tecla
lancha de cartas, emails y fa- dos los documentos HTML texto de cabecera y el títu- $ al final de cada línea.
xes en los que nos pediais que creemos en los próxi- lo de la página. Las dos primeras líneas
que este curso apareciera mos capítulos del curso. Es- y pulsar la tecla $. El cur- que hemos escrito cierran
en todos los números. Por
eso, a partir de esta entrega
el curso se publicará en to-
to nos permitirá no tener
que introducir las mismas
líneas cada vez que crea-
sor se situará en la segunda
línea 5 Ahora puedes escribir al-
go que te permita recor-
dar que debes escribir el
las secciones de cabecera y
título de la página. La línea
indica el comienzo
dos los números. mos una página. texto de esta sección. Por del texto. Si quieres repasar
74 Nº 37
 Profesional

▼
las secciones de las páginas Si el nombre de archivo Protección Para activar la opción de
HTML puedes consultar el “Sin título” aparece sobre protección contra escri-
primer capítulo de este cur- fondo blanco debes selec- de la plantilla tura del archivo haz click so-
so, que apareció en la pági- cionarlo haciendo click a la La plantilla que acabamos bre la casilla .
na 64 del número 35 de derecha . de crear nos puede resultar
Computer Hoy. muy útil. Pero es muy im-
portante que se mantenga

7 Puedes rellenar la si-

guiente línea con
para recordar
Mantén pulsado el botón
izquierdo del ratón y des-
plaza el puntero hacia la iz-
intacta y no se borre. Para
conseguir esto, lo mejor es
proteger contra escritura el
5 Cierra la ventana hacien-
do click en el botón
. Si quieres desactivar la pro-
que en esta sección debes quierda hasta que la palabra archivo de la plantilla. tección, repite los pasos del
escribir el texto de la pági- se vuelva azul: 1 al 4 y haz click en la casilla
na. Posteriormente tendrás
que sustituir este texto por
el texto real de la página.
1 Haz doble click sobre el
icono
para que desapa-
rezca la marca de selección
.Después, haz click

8 Para completar las líneas

de la plantilla tienes que
10
plo:
Introduce un nombre
de archivo. Por ejem- que se encuentra en el
Escritorio 05 (Pág 76) .
sobre el botón para
guardar los cambios realiza-
dos sobre el archivo.
introducir las líneas:

El contenido de la ventana
2 En la siguiente ventana
tendrás que hacer click
con el botón derecho sobre
6 Por último, cierra la ven-
tana
click sobre .
con un

del editor tendrá que tener el icono .

el siguiente aspecto: .
Salto de línea
En la primera entrega de
este curso, te explicamos el
funcionamiento del identi-
ficador . En esta oca-
11 Haz click en el botón
. El editor guar-
dará la plantilla en la carpe-
sión vamos a profundizar un
poco más sobre el funcio-
namiento de este comando
ta “Mis documentos”. que se utiliza para provocar
Si deseas guardar la plan- un salto de línea. Los pasos
tilla en otra carpeta, tendrás que te indicamos a conti-

9 Para guardar la plantilla

haz click en y en
. Aparecerá un cuadro
que hacer click sobre

y seleccionar una unidad de

3 Aparecerá un menú en
el que tienes que selec-
cionar la opción .
nuación te permitirán apren-
der a insertar líneas con el
comando :
de diálogo 04 (Pág. 76) don- disco. Posteriormente podrás
de se indica el nombre del
archivo .
acceder a la carpeta deseada
haciendo click sobre ella.
En nuestros ejemplos he-
1 Inicia el editor tal y co-
mo te indicamos en el
paso 1 del apartado “Dise-
mos guardado todos los ar- ñar una plantilla de trabajo”.
chivos en la carpeta “Mis do- Para comenzar a utilizar el
cumentos”. comando tendrás que
abrir tu plantilla.
12 Después de guardar
el archivo, cierra el
editor haciendo click en el 2 Haz click sobre las op-
ciones y pa-
símbolo . ra abrir el archivo.

Resumen de este capítulo

párrafos
▲

Nº 37 75
 Profesional Programación en HTML, 2a Parte

3 12 el cuadro “Abrir rápidamen-

▼
En la siguiente ventana , Después repite el Cierra el editor ha-
de diálogo aparecerá el paso 10 y del apartado “Di- ciendo click en . te un archivo HTML” que se
contenido de la carpeta señar una plantilla de tra- encuentra en la página 78.
bajo” pero dando el nom-
bre 13 Abre tu navegador y
carga el documento.
Si no recuerdas cómo se ha-
Con esto hemos termina-
do de diseñar nuestra pági-
na de inicio. Ahora puedes
al archivo y haz click sobre
el botón .
Si aparece el contenido de
otra carpeta que no sea “Mis
documentos”tendrás que ha-
cer click en la pestaña ,
7 Selecciona la línea
moviendo
el puntero al final de la pa-
que se encuentra situada en labra “texto”, y sin soltar el
la parte derecha de . botón del ratón, desplaza el
Aparecerá una lista en la que puntero hacia la parte iz-
tienes que seleccionar la quierda, hasta que las dos
entrada palabras aparezcan resalta-
das sobre fondo azul
. ce puedes consultar el apar- distinguir claramente los lu-
tado “Ver nuestra primera gares donde has insertado

8 Escribe como nuevo tex-

to e introdu-
ce un salto de línea .
página HTML” que se en-
cuentra en el primer capí-
tulo del curso, que se pu-
un . Los tres primeros
se corresponden con
También podrás distinguir
.

A continuación pulsa la te- blicó en el número 35 de el efecto del aislado.

cla $. El resultado debe ser Computer Hoy. No olvides La última línea se muestra
éste: . seleccionar el nombre co- sin saltos a pesar de que en
Si la lista es demasiado lar- rrecto de archivo. En nues- el código fuente se haya pul-
ga puedes desplazarte por
las opciones con los con-
troles y , que se en-
9 Puedes seguir escribien-
do en la línea siguiente.
Por ejemplo:
tro ejemplo es . Si
quieres acelerar la carga de
tu página Web puedes leer
sado la tecla $.
De este modo puedes
comprobar que sin no
cuentran a la derecha de la hay salto de línea.
lista hasta que puedas vi-
sualizar la carpeta
. Cuando introduzcas un co-
mando de salto de línea de-

4 En el cuadro de diálogo
aparecerán todos los ar-
bes pulsar la tecla $.

chivos con extensión 07

“txt”. Para ver tu plantilla
HTML, haz click en
10 A continuación intro-
duce las líneas si-
guientes:
Seguro que te llama la aten-
ción que después de un úni-
co en una línea sigan
y selecciona la opción

14 Si quieres forzar el sal-

to de línea puede se-
guir los pasos siguientes.
De esta forma también se Haz click en , y
mostrarán tus archivos tres líneas sin utilizar este
HTML . comando. El código fuente
completo debe tener un as-
pecto similar a este .

15 Inserta un al fi-
nal de cada línea que
no lo tenga. Primero haz
click detrás de
y escribe . Repite este
paso en las dos líneas si-
guientes. El texto debe ter-
minar con un aspecto simi-
lar a éste . En este caso,
5 Haz click en el archivo
y en el botón
para que aparezca
después de escribir cada lí-
nea no es necesario que pul-
el código de nuestra planti- ses la tecla
lla en la ventana del editor.
Repite los pasos del

6 Ahora tienes que guar-

dar este archivo con
distinto nombre para evi- 11 Para poder ver el re-
sultado de estas modi-
tar reescribirlo. Haz click ficaciones tienes que hacer
▲

en las opciones y click en la opción .

76 Nº 37
 Profesional Programación en HTML, 2a Parte

6 El documento completo
tendrá el aspecto si-
guiente.
modo la ventana del nave-
gador quedará más peque-
ña. Pero el texto se ajustará
y no son muy im-
portantes. Sin embargo de-
bemos acostumbrarnos a
utilizarlos, ya que con ellos
podemos conseguir que
nuestros textos sean mucho
más claros.
En la próxima entrega del
curso de programación en
HTML podrás mejorar aún
línea deben concordar aho-
ra con las líneas . 1 Abre el archivo de la
plantilla tal y como se ha
descrito en los pasos del 1
más el aspecto de tus textos
utilizando varios tamaños y
tipos de letra. Pero lo más

17 Para poder seguir tra-

bajando con la planti-
lla debes cerrar el navegador
al 5 del apartado “Salto de
línea”.
importante, aprenderás a
crear vínculos que te per-

haciendo click en .
2 Para dar un nombre al ar-
chivo tienes que repetir
el paso 6 del apartado “Sal-
Trabajar to de línea”. Pero en esta
con párrafos ocasión debes asignar el
Ahora ya sabes cómo se nombre
pueden crear saltos de línea al archivo y hacer click so-
en un texto. Pero en los tex- bre el botón para Repite los pasos 11, 12 y
tos de párrafos muy largos es- guardarlo. 13 del apartado “Salto de lí-
to resulta demasiado com- nea”. El resultado debe ser
plicado. En estos casos es
mejor dejar que el navegador 3 Repite el paso 7 del
apartado “Salto de línea”.
similar a éste .

dé un formato al texto auto-

máticamente para que el tex-
to se pueda leer en toda la su- 4 Escribe el siguiente tex-
to .
7 Coloca el puntero de ra-
tón en el borde derecho
de la ventana del navegador
perficie de la ventana del de manera que tome la for-
navegador.
De todas formas, es impor-
tante que organices el texto
para que se pueda leer más automáticamente al ancho mitirán enlazar unas páginas
fácilmente. Para conseguirlo, de la ventana. con otras para conseguir
lo más cómodo es que sepa-
res el texto en varios párra-
fos individuales para obtener
5 Después de introducir
, pulsa $ y escribe
algo más de texto. Por ejem-
ma Pulsa el botón iz-
quierdo del ratón, y sin sol-
tarlo, desplaza el puntero
Para terminar, cierra la
ventana del navegador ha-
ciendo click en . Puede
que tu sitio web sea total-
mente interactivo.

una presentación más clara plo: . hacia la izquierda. De este parecer que los comandos
y legible. Para marcar el co- ➜
mienzo de párrafo tienes que
utilizar el comando y pa-
ra terminar el párrafo, el co-
mando .

Abrir archivos HTML rápidamente

En el capítulo anterior te ense- .

, , y
■

78 Nº 37
 Profesional Programación en HTML, 3ª Parte

Utiliza títulos para resaltar el texto 58

Varios formatos de título diferentes
60
Separación del texto con líneas 60
Organiza tu texto con listas 60
61

Fundamentos: crear el primer archivo HTML Nº 35

Cómo diseñar y dar formato a los textos Nº 37
Para
principiantes Listas, barras y vínculos Nº 38
Insertar imágenes Nº 39
Distintos formatos de escritura Nº 40
Una de las opciones más interesantes que puedes hacer División de páginas con tablas Nº 41
Para Insertar y dimensionar marcos Nº 42
expertos
con una página web es enlazar sus contenidos con otras Ejemplo de formulario Nº 43
páginas. En Computer Hoy te enseñamos la forma más Qué son y para qué sirven los identificadores Nº 44
fácil de dar vida propia a tus páginas web. Conceptos básicos del estilo en cascada Nº 45
Para
profesionales HTML con Java Nº 46
n la segunda entrega Utiliza títulos para A continuación aparecerá Probando las páginas HTML Nº 47

E del curso de creacción

de páginas web con
HTML 01 has creado una
resaltar el texto
Todos los textos que se pu-
la ventana del editor: Principios legales de las páginas de Internet Nº 48

plantilla que te servirá co- blican en Internet o en cual-

mo base para tus docu- quier otro medio de comu-
mentos y has aprendido a
utilizar el identificador 02
para el salto de línea
nicación suelen tener un
título y estar divididos en va-
rios capítulos que permiten
2 En el capítulo anterior
del curso creaste una
plantilla que te puede ser-
y para definir los pá- diferenciar las cuestiones que vir de base para la creación
rrafos del documento. tratan. En HTML se dispone de tus documentos HTML.
En esta tercera entrega de seis tamaños de título di- Para abrir este archivo
aprenderás a mejorar el as- ferentes. Los más grandes se de plantilla haz click en
pecto de tus páginas cam- utilizan para encabezar el do- y . Se desple-
biando el tamaño y tipo de cumento y los más pequeños gará el cuadro de diálogo
letra de los textos, utilizan- para diferenciar sus distintos 04 :
do listas e introduciendo lí- apartados.
neas de separación. Ade-
más, nos referiremos a los
hipervínculos 03 , que te 1 Para practicar con el pri-
mer título tienes que
3 Si la carpeta
no está seleccionada, haz
click en Si no puedes ver la car-
puedas seleccio-
narla.
De momento no podrás
servirán para que el conte- arrancar el editor haciendo y selecciona la peta ver tu plantilla, ya que sólo
nido de tus páginas web click sucesivamente en: entrada . haz click en las flechas se muestran los archivos
puedan servir de enlace , , o mueve el control que tengan extensión
con otras páginas HTML. , . hasta que aparezca y 05 (Pág 60) “.TXT”.
58 Nº 38
 Profesional

▼
Pulsa la pestaña
y selecciona la opción
. ser éste .

5 Haz doble click sobre el

archivo y la
ventana del editor se abrirá
10 Haz click en las op-
ciones
para salvar los
y

con la plantilla: cambios.

.
11 Cierra el editor ha-
ciendo click en .

12 Para abrir el docu-

mento que acabas de
crear debes hacer click so-
bre la carpeta

2 También tienes que re-

petir el paso 6, pero en
esta ocasión tendrás que es-
Para guardarlo ejecuta las
opciones y
del menú principal. A con-
Para no correr el riesgo de cribir como nom- tinuación cierra el editor ha-
escribir sobre la plantilla ori- bre de archivo. A continua- ciendo click sobre .
ginal es mejor que guardes ción haz click sobre el
el archivo con otro nombre. que se encuentra en el
Escritorio 08 (Pág. 60) .
botón .
5 Repite el paso 12 del
apartado anterior y haz

6 Haz click en y
. En la si-
guiente ventana aparecerá 13 Haz doble click sobre 3 Repite el paso 7 del pri-
mer apartado e introdu-
ce estas líneas de texto
doble click sobre el icono

seleccionada la línea con el

nombre de archivo:
.
Escribe el nuevo nombre
y haz click sobre
el botón . y el navegador mostrará la
página

7 Selecciona
colocando el puntero a
la derecha de la palabra
donde puedes apreciar el
efecto del identificador
. La línea
, haz click y sin soltar hace que aparezca el titular
el botón del ratón desplaza .
el puntero hasta la parte iz-
quierda pa-
ra que la frase quede selec-
cionada en color azul. 14 Cierra el navegador y la
ventana de la carpeta
haciendo
click en sus correspon-
8 Escribe la línea
y pulsa la tecla $. con
dientes.
No olvides pulsar la tecla A continuación se abrirá una
y ordenarás Varios formatos $ al final de cada línea. ventana del navegador en la
al navegador 06 (Pág. 60) En esta ocasión hemos uti- que se muestra el resultado
que muestre un título. de título diferentes lizado el identificador del códido HTML que acabas
Cuando utilices títulos pa- que genera la orden de introducir:

9 Escribe las líneas si-

guientes:
En el capítulo anterior del
ra resaltar el texto de tus pá-
ginas puedes seleccionar en-
tre seis tamaños de letra
de presentar el título con ta-
maño 2. Al contrario que en
las tallas de ropa, un valor
curso te explicamos que las [Link] a practicar más grande indica que el tí-
marcas y se utili- un poco con todos los for- tulo se mostrará más pe-
zan para indicar al navegador matos de título que se pue- queño. Así, es más
el comienzo y final de cada den aplicar al texto de una pequeño que . Los títulos que has escri-
párrafo. El comando página web escrita en HTML: to en el ejemplo anterior se
indica un salto de línea. El
código fuente 07 (Pág. 60)
completo de la página debe 1 Repite los pasos del 1 al
5 del apartado anterior.
4 Para probar con todos
los tamaños de título
también puedes introducir
representan en el navegador
con un tamaño de letra que
se va reduciendo a medida
las líneas:
.

Cuando termines el código

fuente debe tener este as-
▲

pecto:
Nº 38 59
 Profesional Programación en HTML, 3a Parte

▼
que aumenta el valor del tí- más atractivas es la línea ho-
tulo. Los valores más pe- rizontal, es decir, una línea
queños que se pueden usar que recorre el texto de iz-
son y . quierda a derecha. El identi-
ficador encargado de gene-

6 Cierra el navegador y la
carpeta
haciendo click en sus
rar esta línea es
Cuando utilicemos el identi-
ficador no hace falta
.

correspondientes. ningún identificador de cie-

rre con una barra oblicua.
Ejemplo con títulos
de varios tamaños
Ya sabes cómo funcionan
1 Repite los pasos 1 a 5 del
primer apartado. Pero
cuando realices el paso 5
los títulos. Sin embargo, la tendrás que hacer doble
mejor forma de compren- click sobre el archivo
derlos es realizar un ejemplo . De esta forma
práctico como el que te ex- abrirás el documento que
ponemos a continuación: has utilizado a lo largo de
los últimos apartados.

1 Repite los pasos 1 a 5 del

primer apartado de este
artículo. Pero cuando tengas 2 Haz click en la ante-
penúltima línea, justo de-
que elegir el archivo haz trás de
click sobre .Así y pulsa la tecla $ de mo-
recuperarás el primer docu- do que aparezca una nueva
mento que has creado. línea en blanco.

2 Haz click exactamente

aquí
y pulsa $.
3 Teclea y pulsa de
nuevo la tecla $. Ahora
escribe la línea siguiente:

El código fuente tendrá un

3 En la línea que acabas de
crear , aspecto similar a este .

escribe , pulsa $,y Con se introduce una

escribe línea y se separa la parte in-
en la nueva línea.A continua- ferior del texto del resto del
ción pulsa la tecla $ para in- documento. Esto puede re-
sertar otra nueva línea. sultar ideal para introducir
4 Para comprobar el resul-
tado de los cambios que
acabas de realizar, haz click
Repite los pasos 12 y 13 del
primer apartado y com-
prueba el resultado de tu tra-

4 Haz click en las opcio-

nes y .
Después cierra el editor ha-
una nota a pie de página. En
este ejemplo, la nota con-
siste en un número de telé-
sobre y
A continuación cierra el edi-
tor haciendo click en .
. bajo. Si has seguido todos los
pasos correctamente tendrá
un aspecto similar a éste:
ciendo click sobre . fono de información que se
presenta en pantalla apli-

5 Repite los pasos 12 y 13

del primer apartado y
comprueba el resultado de
cando el comando de título
para que el texto apa-
rezca con un tamaño de letra
tu trabajo. Debe tener un as- bastante más pequeño que el
pecto similar a éste: resto del documento.

6 Cierra el navegador ha-

ciendo click en .
5 Cierra el navegador ha-
ciendo click en .

Organiza
Separación tu texto con listas
del texto con líneas La página que acabas de
Con los títulos, los párrafos terminar funciona correcta-
y los saltos de línea puedes mente. Pero aún se puede
hacer un montón de cosas mejorar escribiendo una lis-
para cambiar el aspecto de ta con el menú.
tus textos. Pero existen otras El lenguaje HTML propor-
formas de delimitar y orga- ciona los identificadores
nizar los textos. Una de las y para crear listas.
60 Nº 38
 Profesional

Los identificadores de cie-

rre correspondientes son los
mismos pero precedidos de
$ al final de cada línea pa-
ra saltar a la línea siguiente.
En esta ocasión hemos uti-
1 Repite los pasos 1 a 7 del
primer apartado. Pero en
el paso 6 cuando tengas que
4 Haz click en
.
y

Después cierra el editor ha-

Si aprietas el botón del ra-
tón en este momento, el na-
vegador saltará a la página
línea oblícua: y lizado el identificador deberás escribir ciendo click en y repite correspondiente:
. que te permite crear una lis- como nombre del los pasos 12 y 13 del pri-
indica la inserción ta numerada. Repite el paso documento. mer apartado de forma que
de una lista no ordenada 4 para comprobar el resul-
donde los elementos están tado de las modificaciones.
diferenciados con varios La lista numerada debe te- aparezca la ventana del na-
símbolos de separación.
Por el contrario, enu-
mera los distintos elementos
ner un aspecto como este:
2 Escribe .El identificador
viene de la palabra in-
glesa “anchor”, en castellano
vegador con el resultado de
la práctica: .
Si quieres ir de nuevo a la
página de hipervínculos, haz
click en la barra de del na-
de la lista. El ejemplo si- “ancla” y se utiliza para in- El texto azul subrayado in- vegador sobre .
guiente te vendrá muy bien sertar un hipervínculo. dica que las dos líneas son
para practicar un poco: indica al navegador hipervínculos. Cuando pases
que el texto que viene a con- el puntero del ratón sobre

1 Repite el paso 1 del apar-

tado anterior. Aparecerá
la ventana del editor con el
uno de estos elementos se
convertirá en una mano pa-
ra indicar que son hipervín-
5 Por último cierra el na-
vegador Internet Explo-
rer y la carpeta
archivo en el que has esta- culos. Por ejemplo, coloca el haciendo click sobre . En
do trabajando durante este puntero sobre y la próxima entrega del curso
capítulo. observa el aspecto que toma aprenderás más sobre los hi-
el puntero: . pervículos y cómo insertar

2 Haz click en este punto

y sin soltar el botón del
ratón, desplaza el puntero
imágenes en las páginas.

hasta
de forma que el texto que-
de seleccionado sobre fon- Dar título a la página
do azul.
tinuación es la dirección o el En todos los ejemplos que Sin soltar el botón del ratón,

3 Pulsa la tecla $ y escri-

be las líneas . Para defi-
nir los elementos que for-
7 Para terminar cierra el
navegador
click sobre .
haciendo
nombre de archivo que se
mostrará al activar el hiper-
vínculo. En este caso es el
has visto nos hemos cen-
trado en la modificación del
documento HTML entre los
muévelo hacia la izquierda
para que la línea quede se-
leccionada en color azul:
man la lista hemos utilizado ejemplo con el que acabas identificadores y .
el identificador . Enlazar unas de practicar en el apartado . Ahora aprende-
Cuando el navegador en-
cuentra este identificador
en el código HTML dibuja
páginas con otras
Hasta ahora los documen-
anterior
.
rás a modificar la línea de tí-
tulo. En este caso realizarás
el cambio sobre el archivo
3 Introduce un texto cual-
quiera, por ejemplo:

un punto de enumeración.
El identificador de cierre co-
tos HTML que has creado es-
taban totalmente aislados. Sin 3 Vas a crear un segundo
hipervículo. Antes de na-
[Link].

rrespondiente es . embargo, una de las mayores

ventajas de los documentos
da escribe detrás de
y pulsa la tecla $. Después 1 Para cargar el archivo
tienes que repetir el pa- 4 Haz click en y
. Cierra el edi-

4 Haz click en

tor haciendo click en .

y
y cierra el edi-
que se publican en Internet
es la posibilidad de relacio-
nar unas páginas con otras.
escribe .
El código fuente completo
debe tener este aspecto:
so 1 del apartado “separa-
ción del texto con líneas”.
tor haciendo click en y re-
pite los pasos 12 a 14 del
primer apartado. Cuando la
Para ver el aspecto que ten-
drá la página web después
de realizar los cambios tie-
Pero antes tendrás que apren-
der a usar hipervínculos. 2 Haz click con el botón iz-
quierdo justo en esta
posición:
página aparezca en el
navegador también se mos-
trará su nombre en la barra
nes que repetir los pasos 12 de títulos:
y 13 del primer apartado.
.

5 El comando te per-
mite crear una lista don-
de se enumeran los elemen-
tos. Repite el paso 1 de este
apartado y haz click en Resumen de este capítulo

No sueltes el botón y mue-

ve el puntero hasta

de forma que el texto que-

de seleccionado en azul.

6 Pulsa la tecla $ y escri-

be las líneas .
No olvides pulsar la tecla
■

Nº 38 61
 Profesional Programación en HTML, 4ª Parte
Hipervínculos en Internet 66

67
Hipervínculos con imágenes 68
Utiliza una imagen de fondo 70
Inicio rápido del Bloc de notas 70

Fundamentos: crear el primer archivo HTML Nº 35

Cómo diseñar y dar formato a los textos Nº 37
Para
principiantes Listas, barras y vínculos Nº 38
Insertar imágenes Nº 39
Distintos formatos de escritura Nº 40
La combinación de imágenes y texto dará a tus páginas un División de páginas con tablas Nº 41
Para Insertar y dimensionar marcos Nº 42
expertos
aspecto mucho más agradable. Con un poco de buen gusto Ejemplo de formulario Nº 43
y siguiendo los pasos que te indicamos en este capítulo te Qué son y para qué sirven los identificadores Nº 44
puedes convertir en un auténtico artista del HTML. Conceptos básicos del estilo en cascada Nº 45
Para
profesionales HTML con Java Nº 46
n la anterior entrega del te 03 de un hipervínculo tie- Haz click en las opciones Probando las páginas HTML Nº 47

E curso de creación de
páginas web HTML 01
has aprendido a crear títu-
ne un aspecto similar a éste
Para hacer que un hiper-
y . Se abrirá el
cuadro de diálogo 05
Principios legales de las páginas de Internet Nº 48

los que mejoran el aspecto vínculo haga referencia a y seleccionar la opción

de tus páginas e hipervín- una página de la World Wi-
culos 02 para relacionar de Web 04 tendrás que se-
unas con otras. guir estos pasos:
En esta ocasión, aprende-
rás más aspectos sobre el
funcionamiento de los hi-
pervínculos y utilizarás imá-
1 Inicia el “Bloc de notas”
haciendo click en la ruta
, , y 3 Si no aparece la carpeta
, tendrás 4 Para poder ver todos los
archivos tienes que ha- 5 Haz doble click sobre el
archivo y la ven-
genes que dotarán a tu pá- . que hacer click en cer click en tana del editor se abrirá con
gina de un aspecto mucho A continuación aparecerá y la plantilla:
más atractivo. la ventana del editor seleccionar la entrada
Si no consigues ver esta
Hipervínculos entrada utiliza las flechas
para desplazarte por la lista
en Internet hasta que la encuentres.
Hasta ahora has empleado Cuando la selecciones, no
hipervínculos para hacer re-
ferencia a archivos que se
encuentran ubicados en tu
2 Ahora tienes que abrir el
archivo de plantilla que
has creado en el segundo ca-
podrás ver tu plantilla, ya
que sólo aparecen los ar-
chivos que tengan exten-
ordenador. El código fuen- pítulo del curso. sión 06 (Pág. 68) “.TXT”.
66 Nº 39
 Profesional

curso 🡪v (pág. 70) y

6

▼
Guarda el archivo de de forma que quede selec-
plantilla con otro nom- pulsa la tecla $. cionada en color azul
bre haciendo click en
y . En la
siguiente ventana aparece-
rá el nombre del archivo
2 Es un sitio web
con un banco de
imágenes gratuitas
y escribe la dirección 🡪´ y
pulsa la tecla $.
Al cabo de unos instantes
selec- que se pueden copiar el navegador mostrará la pá-
cionado en azul. y distribuir libre- gina web:
Escribe mente. Ahora sólo
y haz bas de escribir . vas a utilizar un par de imá-
click en el botón . Si tu ordenador está co- genes. Pulsa con el botón Haz click en
nectado en este momento a derecho del ratón en con el botón derecho del ra-

7 Para seleccionar la ante-

penúltima línea tienes
que colocar el puntero en la
Internet, puedes hacer click
sobre de forma
que el navegador salte hasta
tón y selecciona la opción
.

parte derecha
,
de
hacer
click con el botón izquier-
la página correspondiente
6 Repite el paso 3 de este
apartado para guardar el
archivo y haz click sobre
do del ratón y, sin soltar, des- para cerrar la ventana del na-
plazar el puntero hacia la vegador Internet Explorer.
parte izquierda
, de forma Esto te permite vincular Inserta fotos
que la frase quede seleccio- tus páginas con cualquier y selecciona la opción
nada en color azul. otra web que se encuentre . en tu página HTML
en Internet. Da los pasos siguientes pa-

8 Teclea
y pulsa $. ¿Te acuerdas de 12 Cierra el navegador y
la carpeta de “Mis do-
3 El navegador suele indi-
car la carpeta donde se
guardará la imagen correc-
ra practicar un poco con las
imágenes.

los dos identificadores cumentos” haciendo click tamente. Si no ves la carpe-

07 (Pág. 68) que acabas de
utilizar? se utiliza para
en sus correspondientes. ta , repite el
paso 3 del apartado ante-
1 Abre el “Bloc de notas” y
el archivo de plantilla re-
pitiendo los pasos 1 a 5 del
señalar los párrafos y Consigue tus rior. Para terminar haz click primer apartado. Sigue el pa-
indica al navegador en el botón . so 6 para guardar la página.
08 (Pág. 68) que debe realizar
imágenes en la Red Pero en este caso utiliza el
Repite los pasos 2 y 3
un salto de línea. Incluyendo imágenes en
tu página web conseguirás
que ésta resulte mucho más
4 con esta otra imagen:
nombre
.
de archivo

Si no comprendes su
significado, conviene que
atractiva. Lo primero que ne-

cesitas son los archivos de

2 Selecciona la cuarta lí-
nea siguiendo las indi-
caciones del paso 7
repases la parte final del an- imagen que vas a insertar. del primer apartado
terior capítulo del curso. Se Una de las formas más fá- y escri-
trata de un hipervínculo ciles de obtener los archi- be .
normal donde hemos cam- vos es visitar las páginas de Marca después la línea
y teclea
biado el valor del paráme- algún servidor que ofrezca
tro 09 (Pág. 68)
dirección de Internet
por la imágenes gratuitas.
5 Ahora tienes que conse-
guir una imagen para uti-
las siguientes líneas .

10 (Pág. 68) :
El texto que aparece es la
dirección del buscador
1 Arranca tu navegador ha-
ciendo doble click sobre
el icono:
lizala como fondo de tu pá-
gina. Haz click en la barra de
direcciones
11 (Pág. 70) “Yahoo”.

10 Haz click en las op-

ciones
para guardar los
y
El programa se abrirá con
cambios. Cierra el editor la página de inicio
pinchando en . En el Es- 13 (Pág. 70) que tengas pre-
critorio 12 (Pág. 70) , haz do- determinada. En este caso,
ble click en: se trata de la página del bus-
cador “Yahoo España”.
Haz click en la barra de di-
recciones
y se abrirá la ventana
donde de-
bes hacer doble click sobre:

para seleccionarla
y escribe la

11 El navegador se abri-
rá, y mostrará el resul-
dirección de la página de In-
ternet que hemos elegido
▲

tado de la página que aca- en Computer Hoy para este

Nº 39 67
 Profesional Programación en HTML, 4a Parte

▼
El texto es un poco largo Sin embargo, hay varios
y tienes que prestar especial parámetros adicionales que tante inusual del comando Descifrar el significado de
atención cuando escribas permiten modificar el mo- . En esta ocasión se ha esta línea no es muy difícil.
los identificadores, ya que do en que se presenta la utilizado el parámetro Los únicos parámetros que
una equivocación puede ha- imagen en el navegador. Con , que indica se han cambiado son el
cer que la página se mues- indicas que la al navegador que el texto nombre del archivo y
tre incorrectamente. imagen se debe situar a la que viene a continuación se .“Right” signifi-
izquierda y el texto se debe debe escribir debajo de la ca en castellano “derecha”,

3 Antes de analizar las lí-

neas de código que aca-
bas de escribir, te conviene
escribir en la parte derecha.
A esta técnica se le llama
“texto f lotante”. Si omites
imagen e indica al navegador que
debe situar la imagen en el
margen derecho de la pan-
guardar el archivo. Haz click este parámetro el texto se talla. El resto del texto apa-
sobre y . mostrará en las líneas que recerá a la izquierda de la
ilustración. Dentro de este
texto se ha insertado un hi-

4 La línea no necesita
muchas explicaciones.
Se trata de un título bastan-
estén situadas justo debajo
de la imagen.
Para que lo escrito no es-
pervínculo
que enlaza la página con la
web de “ComStock”.
te sencillo. Si no entiendes té pegado a la imagen hay
bien su significado deberás que darle una separación
repasar el tercer capítulo utilizando el parámetro Sin este comando, el pá-
del curso que publicamos . Esta instrucción rrafo estaría junto a la pri-
en el número 38 de Com- deja un espacio libre a la iz- mera imagen y su aspecto
puter Hoy. quierda y derecha de la ima- no sería muy atractivo
Ocho líneas más abajo es- gen a modo de marco.
tá el apartado donde apare- Cuando la ilustración se
ce la primera imagen muestre en el navegador la
verás así
El identificador in- servar
forma al navegador que de-
be prepararse para mostrar
una imagen. Después aparece la línea
6 Cuando termines de leer
todo el código, cierra el
Bloc de notas ha-
sirve de la segunda imagen ciendo click en
para indicar cuál es la que y doble
se debe presentar. En este click sobre .
caso, la imagen se encuen- Después sobre
tra en la misma carpeta que Sin “hspace” no habría nin- para que pue-
la página HTML. Este pará- guna separación das ver tu pri-
metro es más que suficien- mera página
te para mostrar una imagen
en un navegador. 5 Un poco más adelante
aparece una forma bas-
web con imáge-
nes:

Hipervínculos con imágenes

y en:
culos se pueden comple-
mentar muy bien. Al hacer
click sobre una imagen que
hace referencia a una direc- Su funcionamiento es muy pero se omite la orden El navegador mostrará el hi-

lo normal, pero en lugar de texto. Para probarlo, despla-

teclear un texto entre <a gar funciona como hipervín- za el puntero sobre
Para poder hacer este ejer- href...> y </a>, inserta una culo.
imagen con <img...>.
en tu disco duro las dos imá- Además, si olvidas el pará-

tus imágenes de la red”. presentará un borde azul al- escribir haz click sobre
rededor de la imagen. y .

Para dejar clara la dife- . y sobre

En el escritorio, haz doble y observa que en cualquiera
que repetir los pasos 1a6 click en: de los dos casos toma el as-
ciona con una imagen escri- pecto siguente:
be estas tres líneas a conti-
guardar nuación Si haces click sobre cual-
el archivo.
página correspondiente. Pa-
ra cerrar el navegador haz
click sobre .
▲

68 Nº 39
 Profesional Programación en HTML, 4a Parte

7 ground”, el navegador coge

▼
Cuando quieras cerrar el
navegador tendrás que el archivo de imagen que se
hacer click sobre . le indique y lo utiliza como
fondo de la página. La ilus-
Utiliza una tración se repetirá varias ve- Cuando diseñas páginas
ces como si fuera un mosai- web en HTML tienes que
imagen de fondo co que cubre todo el fondo
Las imágenes que has in- de la pantalla.
sertado en tu página web
han mejorado mucho su as-
pecto. Sin embargo, ésta
puede seguir mejorando en
5 Para ver el resultado de
los cambios haz click en
y . Después
muchos aspectos. Por ejem- cierra la ventana del “Bloc
plo en el fondo. Para conse- de notas” pulsando sobre locar un acceso directo en y, sin soltarlo, mueve el
guirlo sigue estos pasos: y abre la carpeta de docu- el Escritorio. De esta forma puntero hacia un lugar va-
mentos haciendo doble te bastará con hacer click cío del Escritorio

1 Ejecuta el “Bloc de notas”

y prepárate para abrir un
archivo siguiendo los pasos
click sobre:

pidamente.
1 a 4 del primer ción
apartado.
vamente sobre:

2 Cuando tengas
que seleccio-
nar el archivo, haz
ceso directo con este as-
pecto:

click sobre
y des-
pués sobre .

3 Ahora busca la
línea que co-
mienza por y haz
lizar otro nombre).
click sobre el

click exactamente detrás de

la palabra 6 Haz doble click sobre el
archivo:

ha-

para ejecutar el navegador y .

ver el resultado de tu página:
Con esto damos por ter-

4 Pulsa la barra espacia-

dora y escribe el si-
guiente texto:
minado este capítulo donde
has aprendido a trabajar con
imágenes en HTML. En la ➜ Direcciones online
. La próxima entrega sabrás có-
línea completa tendrá este mo dar formato al texto de
aspecto: tu página web, alineando,
. justificando y tabulando los [Link]
Con el parámetro ”back- párrafos y líneas.

Resumen de este capítulo

mos los puntos más impor-

tantes de este capítulo.
utili-

lizar el identificador

rámetro
.

plo: .

es la dirección de una pá-

ducir en el recuadro de di-

recciones de tu navegador .
■

70
 Profesional Programación en HTML, 5ª Parte

Formato de texto negrita y cursiva 72

Cambia el tipo de letra 73
Utiliza varios colores en el texto 73
Modifica el tamaño de letra 77
Código fuente completo
7
7

Foto: Stock Photos. Montaje: Computer Hoy.

Si quieres conseguir que tus páginas dejen de ser monóto- Fundamentos: crear el primer archivo HTML Nº 35
nas y aburridas tendrás que jugar un poco con el formato Para
Cómo diseñar y dar formato a los textos Nº 37
del texto. Prueba a cambiar tus letras con varios tamaños, principiantes Listas, barras y vínculos Nº 38
Insertar imágenes Nº 39
colores y formas buscando el resultado más divertido. Distintos formatos de escritura Nº 40

n la cuarta entrega del ra este fin. Para realizar este válido. Al final tienes que ver

E curso sobre HTML 01

aprendiste a insertar
imágenes en tus páginas
ejemplo utilizarás de nuevo
el archivo de plantilla que
creaste en el segundo capí-
la ventana del“Bloc de notas”: Ejemplo de formulario

web para hacerlas más lla- tulo del curso (ver Computer
mativas. En esta ocasión tra- Hoy nº37, pág. 74).
taremos un tema que tam-
bién está muy relacionado
con el diseño: el formato del 1 Ejecuta el “Bloc de notas”
haciendo click en
2 Haz click en las opciones
texto. Utilizando letras de
distintos colores, tamaños y
tipos puedes conseguir que
y llevando el puntero hacia
,
. Haz click de
y
y .
A continuación se abrirá el
cuadro de diálogo que
Si ves que la carpeta
no apare-
ce en la lista, haz click so-
5 Si no ves , haz
click en hasta que apa-
rezca. Para abrir el archivo
tus páginas resulten mucho nuevo. Si has seguido todos te permitirá seleccionar el bre los controles haz doble click en y
más claras y fáciles de leer. los pasos del anterior capí- archivo de la plantilla: hasta que aparezca y pul- se mostrará en pantalla
tulo del curso, te bastará con sa sobre ella.
hacer doble click sobre el
Formato de texto
negrita y cursiva
La forma más rápida y sen-
icono:
4 Para ver la plantilla haz
click sobre
y después sobre la opción
cilla de dar formato a los tex-
tos es mostrarlos en negrita
o cursiva. En HTML existen
que se debe encontrar en el
Escritorio 03 . Cualquiera de
3 Si no aparece la carpeta

click sobre y selecciona

haz

la línea
▲

dos identificadores 02 pa- los dos métodos puede ser

72 Nº 40
 Profesional

▼
6 Para dar un nombre al ar-
chivo haz click en
y .
Cambia
el tipo de letra
se utiliza para indicar al na-
vegador un formato de tex-
to y se acompaña de varios
sobre la carpeta:

En el lugar de , de- Hasta el momento, el texto parámetros 06 (Pág. 76) .

bes escribir el nombre de todas las páginas que has En esta ocasión, sólo vas a y el archivo:
. Después haz creado durante el curso se vi- utilizar uno de ellos. Con
click sobre el botón . sualizan con el tipo de letra se consi-
“Times New Roman”. gue que el texto escrito a

7 Mueve el puntero hasta

la parte derecha de
Para cambiarlo, te bastará
con hacer una breve indica-
continuación se muestre
con letra “Arial” hasta que
.
Haz click con el botón iz-
quierdo y, sin soltarlo, des-
ción al principio y final del
texto que desees modificar.
Para transformar una página
aparezca el identificador de
cierre . 8 El navegador mostrará el
documento con el tipo

plázate hacia la parte iz- completa al tipo de letra

quierda hasta que el texto “Arial”tendrás que dar los pa-
aparezca seleccionado: sos siguientes:
.

8 Escribe las siguientes lí-

neas:
1 Para este ejemplo utiliza-
rás la página HTML que
has creado en el capítulo an-
terior de este curso
de letra que acabas de se-
leccionar:
Además del conocido iden-
tificador que se utili-
za para generar un salto de
línea, aparecen dos nuevos
9 Cierra el navegador ha-
ciendo click en .

comandos: muestra el Utiliza varios

texto que aparezca a conti- colores en el texto
nuación en negrita hasta el
identificador de cierre Algunos elementos de tex-
. Con aplicas el to tienen mejor aspecto y re-
formato cursiva hasta que sultan más llamativos cuando
escribas . utilizan un color distinto del
resto. Empleando el identifi-
cador “Font”también puedes
9 Para ver los resultados,
guarda el documento
con las opciones y
dar el color que desees a le-
tras, palabras o párrafos en-
. Después cierra el teros. Para practicar un poco,
“Bloc de notas” haciendo Si no tienes el archivo, sigue estos consejos:
click en y abre el docu-
mento haciendo doble click
sobre el icono:
puedes realizar el ejercicio
con cualquier otra página,
pero debes prestar mucha
6 Pulsa las teclas ¡ y N
simultáneamente para
que el cursor 07 (Pág. 76) se 13 Repite los pasos del 1al
del apartado anterior.
atención, porque algunos pa- coloque justo al final del có-

que se encuentra en el Es-

sos pueden variar un poco.
Lo mejor es que utilices la
página indicada, que mos-
digo fuente 08 (Pág. 76) .
Haz click justo detrás de
y pulsa $. Ahora escribe la
2 El texto del principio de-
be aparecer en un color

critorio. Aparecerá una ven- tramos en el número 39 de línea .

tana con todos tus docu- Computer Hoy.
mentos HTML.
Haz doble click sobre:
2 Repite los pasos del 1al
4 del apartado anterior.
7 Haz click en y
para almacenar

(Es posible que en tu orde-

nador el archivo aparezca
3 Haz click en el archivo
y en el botón

con un tamaño más reduci-

do. En ese caso haz doble
click sobre ).
4 Cuando tengas abierto el
archivo, haz click justo
detrás de

10 El navegador 05
mostrará el resultado
con letra en negrita
y pulsa la tecla $ para
insertar una nueva línea
distinto. Por ejemplo, ma-
rrón. Para conseguirlo haz
click en esta posición
los cambios. Cierra el “Bloc
y cursiva .
Para cerrar la ventana haz 5 Escribe ahora el texto:
.
de notas” haciendo click en
el botón .
▲

click sobre . El identificador Después haz doble click

Nº 40 73
 Profesional

3
▼

Pulsa la barra de espacio fuente. Cuando se ejecuta la

( ) y escribe el texto orden de la línea
. Las pri-
meras líneas del archivo ten- coges la caja más grande y la
drán éste aspecto: . pintas de color marrón. Des-
pués viene la
instrucción

con la que co-

locas en el in-
terior una una
caja más pe-
queña que pre-
viamente has
pintado de co-
lor azul. El co-

4 Haz click justo detrás de

esta posición .
mando te sirve pa-
ra cerrar las cajas con su
tapa correspondiente.

Si no ves esta parte del tex-

to, utiliza la tecla & para des-
plazarte hacia abajo hasta
6 Ahora puedes compro-
bar el resultado del ejer-
cicio. Haz click en ,
v,
que aparezca. y para guardar
los cambios y cerrar el Bloc

5 Escribe la orden

Después haz click en la

.
de notas. Abre la página web
haciendo doble click sobre
el icono del escritorio:
misma línea, justo detrás de
e inserta
el texto . Pulsa la
tecla (. Después $ y por
último #. El resto del tex- y después en:
to se moverá hasta la línea
siguiente para mostrarse con
más claridad. El texto del documento
La línea completa debe ter- aparece en color marrón
minar con un aspecto simi- pero algunas palabras resal-
lar a éste: tan por el color azul .

Su funcionamiento es bas-
tante sencillo. Primero has X Resumen de este capítulo
introducido un comando
que cambia el texto a color concluir un formato de es-
azul y después el identifica- mos los puntos más impor- critura hay que utilizar
dor de cierre que tantes de este capítulo. .
lo devuelve al color que te-
nía anteriormente. Esta pro-
piedad suele recibir el nom-
bre de “anidación”.
Para comprender el prin- “red” (rojo) o “green” (ver-
cipio de la anidación puedes dor . Todas las palabras
pensar en varias cajas de di-
ferentes tamaños y colores importantes con sus nom-
que están contenidas unas bres correspondientes.
dentro de otras. Imagina que tificador de cierre .
la más grande es marrón y la fuente Arial.
contiene a todas las demás.
Si la comparamos con la pá- de de- metro , por
gina web que estás creando y .
en este ejemplo se corres-
pondería con el primer iden-
tificador . Ahora
piensa que dentro de la ca-
ja grande hay otra más pe-
queña que está pintada de te identificador aparece
azul. En este caso se corres- bras. Por ejemplo, “Times
ponde con el segundo iden- New Roman”. dos van del 1 al 7.
tificador del código
76 Nº 40
 Profesional

7 Para cerrar el navegador

debes hacer click en 2 Haz click en la segunda
línea del segundo apar-
tado, justo delante de
Modifica
el tamaño de letra
Hasta ahora utilizabas
a para cambiar
el tamaño de letra. Pero esto
tiene sus limitaciones. Es me-
3 Introduce el
.
texto

jor utilizar el identificador

. En el ejemplo si-
guiente transformarás dos le-
4 Pulsa la tecla ( de forma
que el cursor parpadee a
la derecha de la letra ma-
tras a un mayor tamaño para yúscula “E”
mejorar el aspecto de la pá- . Ahora
gina. Para hacerlo, utilizarás escribe el identificador de
de nuevo la página con la que cierre . La línea de-
has trabajado anteriormente. be tener este aspecto
.
Repite los pasos del 1al
13 del apartado “Cambia
el tipo de letra”. 5 Desplaza el cursor hacia
abajo pulsando la tecla &

En HTML se puede indicar el cuadro inferior muestra los

color que se desea utilizar me- nombres más importantes
diante combinaciones de ci- junto a sus colores corres-
fras o con nombres. Pero es- pondientes. En la dirección de
tos nombres están en inglés Internet 🡪 ´ se ofrece infor-
y para algunos pueden resul- mación muy detallada acerca
tar difíciles de comprender. El de los colores. Por ejemplo,

varias veces hasta que apa-

rezca la línea
Escritorio:
2 Ahora verás el código
completo de la página
HTML “[Link]” y po-
drás compararla con el tex-
y en: to fuente correcto:

Haz click justo delante de

la letra “E” y repite los pasos
3 y 4 de este mismo aparta- 7
.
El resultado debe tener
este aspecto:
3 Si encuentras algún error,
corrígelo y haz click en
y . Después
cierra el Bloc de notas pul-
do. El resultado debe tener sando sobre .
un aspecto similar a éste
Con el parámetro
asignas el tamaño que a to-
8 Cierra el navegador ha-
ciendo click en .
En la siguiente entrega del
curso de HTML aprenderás a
utilizar tablas para presentar
das las letras que escribas a El código cifras y dar a tus páginas web
continuación. Los valores un aspecto mucho más or-
que introduzcas no tienen fuente completo denado y atractivo.
nada que ver con el tamaño El documento HTML con el
de letra de tu procesador de que has trabajado en estos
texto, y pueden ir desde el dos últimos capítulos del cur-
1 hasta el 7. so empieza a tener muchas lí-
Por norma general, neas y te puede resultar algo
se corres- complicado. Si te has equi-
ponde con un tamaño de le- vocado en alguno de los pa-
tra normal, de forma que los sos es posible que los resul-
valores superiores aparece- tados sean muy distintos de
rán más grandes y los infe- los que te [Link] evi-
riores más pequeños. tar problemas con los errores
de escritura, puedes com-

6
y
Para ver el resultado, haz
click en la opcion
probar todo el código fuen-
te, tal y como te indicamos a
continuación.
🡪[Link]
y . Posteriormente haz
doble click en el icono del
1 Repite los pasos del 1al
3 del apartado “Cambia
el tipo de letra”.
■

Nº 40
 Profesional Programación en HTML, 6ª Parte

imágenes

Ejemplo de formulario

62
63
63
64
64

no que traducido del inglés (si todavía no tienes este ico-

significa “mesa” o “tabla”. no en el Escritorio, puedes
En esta primera parte de ver cómo crearlo en la pá-
esta entrega verás cómo uti- gina 74 del número 37 de
lizar correctamente este tag Computer Hoy).
para mostrar texto y núme-
ros en tu página. En la se-
gunda, pondrás en práctica
estos nuevos conocimientos
2 Carga la plantilla 04 que
utilizaste en la segunda
entrega del curso. Una vez lo-
utilizando la página ejemplo calizado, lo tienes que guar-
de la entrega anterior del dar haciendo click sobre
curso. Después descubrirás y sobre .
lo bien que funciona En este caso selecciona el si-
como ayuda en el guiente nombre
layout 03 . para
Empezarás construyendo el fichero.
una sencilla tabla de tem-
peraturas. Esta tabla contie-
ne el nombre de tres meses, 3 Haz click justo a la dere-
cha de esta línea
Foto: Fototeca 9x12 S.L. Montaje: Computer Hoy.

sus temperaturas medias y y, mientras mantienes pre-

una pequeña observación. sionado el botón izquierdo
del ratón, arrastra el cursor
hacia la izquierda hasta que
Una tabla sencilla todo el texto quede selec-
Con tus conocimientos ac- cionado con un fondo azul.
tuales de HTML puedes es-
cribir todos los datos con-
juntamente
Sin embargo, escritos de
esta forma el resultado no es
el esperado .
Con la ayuda de una tabla
¿Te parece impresionante lo que hacen estos chicos con obtendrás un resultado óp-
timo.
sus tablas? Tú puedes hacerlo mucho mejor. Con la sexta
entrega del curso de HTML serás, en muy poco tiempo, un
as de las tablas. Eso sí, aquí ni te mojarás ni tragarás agua. 1 Abre el editor con un do-
ble click sobre

n la última entrega de son una herramienta funda- te práctico que te permitirá

E este curso deHTML 01

aprendiste a configurar
el tipo de letra. En la próxi-
mental. Con ellas podrás
mostrar en tu web todo tipo
de informaciones perfecta-
sacarle el máximo jugo a tus
páginas.
El nombre del tag 02 para
ma entrarás de lleno en el di- mente ordenadas y de un diseñar tablas es fácil de re-
seño de una página com- modo mucho más atractivo. cordar: y su termi-
pleta, y para ello, las tablas Las tablas son algo realmen- nación es , térmi-
62 Nº 41
 Profesional

▼
Introduce estas líneas de líneas. Para ello haz tabla e incluso cada celda
código 05 (Pág. 64) . exactamente click sobre individualmente.
Con En el siguiente ejemplo
le indicas al navegador colorearás la fila con los tí-
06 (Pág. 64) que a continua- tulos y resaltarás las celdas
ción viene una tabla. Aquí, con los máximos de tem-
además, tendrás que definir peratura utilizando un fon-
el parámetro 07 (Pág. 64) do rosa.
. Esta orden di-
vide las celdas 08 (Pág. 64)
por medio de unas líneas
muy finas. Si te decides por
1 Inicia el editor y carga el
fichero del paso 1 del
apartado “Tablas más espa-
el valor cero, no aparecerán
las líneas divisorias.
A continuación aparece el
3 Después pulsa la ba-
rra de espacio (
y escribe este texto:
)
ciadas”, . En el tex-
to tendrás que introducir
unos comandos adicionales.
tag . Éste indica al na- .
vegador que todas las en-
tradas que se encuentran
hasta se deben in-
La línea al completo de-
be tener este aspecto: 2 A continuación click
exactamente sobre este
punto
cluir en una única fila. El parámetro
En inglés las filas de las ta- se encar-
blas se conocen por “row”. ga de separar el texto de
se puede traducir los bordes de la tabla.
por “table row”, en castella-
no, fila de la tabla.
A continuación aparece
. Esta línea
En el siguiente apartado
podrás ver cómo mejorar el
aspecto de las tablas en tus
4
bre
Guarda el fichero con un
click sobre
.
y so-

y las dos siguientes se en- páginas. Pero antes de ello Seguidamente cierra el edi-
cargan de los títulos de la co- cierra el navegador con un tor pinchando sobre y
lumna. Después verás que és- click en . abre la carpeta
tos aparecen en negrita:

es la abreviación en in-
Tablas más
espaciadas
glés de “table header”, o sea,
cabecera de la tabla.
Tras , que cierra la lí-
Ya sabes cómo se cons-
truyen las tablas. En este
Ahora haz doble click sobre
. La tabla aparecerá
3 Presiona la barra espa-
ciadora ( ) y escribe el
tex to .
nea, vienen otras tres líneas apartado y en los siguientes más desahogada . La línea al completo debe
como la siguiente: vas a ver la manera de me- tener el siguien-
. jorar su aspecto. te aspecto
Éstas contienen los datos que El parámetro
vas a introducir en la tabla.
Por este motivo se conoce
como “table data” o, traduci-
1 Inicia el editor . Haz click
sobre y luego en
y selecciona el fiche-
le in-
dica al navega-
dor que la fila
do, datos de la tabla. ro con las tablas que has de la tabla co-
Puedes ver que siempre creado antes . rrespondiente
aparecen tres líneas con se tiene que re-
o que se com- presentar con el
plementan con sus respecti- color indicado.
vos o . Con En este ejem-
estos tags, el navegador sabe plo, el color es
que se trata de una tabla con el amarillo (en
tres columnas. Al final del inglés “yellow”).
texto puedes observar tam-
bién , que le indi-
ca al navegador que termina
la tabla.
4Para colo-
rear sola-
mente una cel-
da de la tabla,

5 Ya es hora de que des un

vistazo al resultado. Haz
click sobre y sobre
tendrás que
desplazarte
hasta el final
. Seguidamente cie- del código
rra el editor con un click so- fuente. En la lí-
bre y abre la carpeta con
un doble click sobre 2 Primero vas a solucionar
las estrecheces de tu ta-
bla y a separar un poco las
que en la versión anterior. Pe-
ro el aspecto de tu página
web aún se puede mejorar.
nea donde se define la cel-
da que quieres modificar
deberás hacer click en

Cómo colorear
Haz doble click sobre
la tabla
.Vista con el nave- Si lo deseas pue-
gador, la tabla tendrá el si- des colorear cada
▲

guiente aspecto: columna o fila de la

Nº 41 63
 Profesional Programación en HTML, 6a Parte

5 1 3
▼

Pulsa la tecla espacio Inicia el editor y carga, ha- Como puedes compro-
( ) y escribe a conti- ciendo previamente click bar, el cursor se va a si-
nuación . La sobre y en , tuar dentro de una línea en
línea al completo tendrá el el fichero . blanco
siguiente aspecto:
En este caso el
Teclea el siguiente texto
y presiona la tecla C. Esto 4 Presiona la tecla C y es-
cribe el siguiente código
también se encargará de mo-
dificar el color. Pero este
cambio sólo afecta a una cel-
2 Para mejorar el aspecto
de la página haz click jus-
to sobre hace que el navegador in- Comienza una nueva fila de
da. El color de la celda es el y, a continuación deberás troduzca en este punto una la tabla. En este ejemplo uti-
“pink”, es decir, rosa. pulsar C y '. tabla. El parámetro lizarás una fila con dos cel-
das. Empieza con la

6 Guarda los cambios con

un click sobre
sobre . Seguidamen-
y
primera. En ésta uti-
lizarás uno de los pa-
rámetros más impor-
te cierra el editor pinchan- tantes de las tablas: el
do sobre y abre la car- , que se
peta con un doble click encarga de situar el
sobre el icono contenido de la cel-
da en su parte supe-
rior. Si no haces uso
de este parámetro el
contenido de la cel-
Dentro de la carpeta de- da se situaría a media
berás hacer doble click so- altura y no se dife-
bre y así podrás renciaría de la celda
contigua. Éste sería el
(en castellano “ancho”) de- resultado:
be ser de 600 puntos. Ade-
más, vas a alinear la tabla en
el centro de la página. Esto
se hace con el comando
(“alineación”) y con
el valor para cen-
tro. El último parámetro,
, se encarga Por el contrario, con el co-
de separar el texto de los mando el as-
bordes dentro de la tabla. pecto resultante será el si-
guiente:
comprobar los cambios de
colores en tu tabla.

¿Texto completo?
Si el resultado no ha sido
igual al que puedes observar
sobre estas líneas, conviene
que compares tu código con A continuación vas a co-
el código completo que pue- lorear la columna de la iz-
des encontrar aquí . quierda para resaltarla del
resto. Para ello debes usar el
Mejorar el layout comando
,
con la ayuda que ya debería resultarte fa-
delas tablas miliar y que en este caso co-
Las tablas no sólo son úti- lorea la celda con un marrón
les para presentar resultados. claro. Finalmente sólo te
En este apartado verás cómo queda asignar a la celda una
utilizarlas para mejorar el as- anchura de 150 puntos. Por
pecto de tus páginas. tanto, para la segunda co-
Insertarás en la página, den- lumna, quedan 600 puntos
tro de una columna adicio- menos 150 puntos, es decir
nal, información general así 450 puntos. El mismo nave-
como una dirección y un nú- gador ya calcula ese valor,
mero de teléfono. por lo que no tendrás que
Para ello tendrás que utili- introducir ningún valor pa-
zar el fichero con ra la segunda columna.
el que ya has trabajado en an-
teriores entregas de este cur-
so. Si no lo tienes, podrás en-
contrarlo en la página 77 del
5 Si deseas que el texto de
la columna sea algo más
pequeño y prefieres otro ti-
▲

número 40 de Computer Hoy po de letra, tendrás que

64 Nº 41
 Profesional Programación en HTML, 6a Parte

pulsar la tecla C y escribir

el siguiente texto: 8 Para que el texto dentro
de la celda aparezca con
el tipo
10 Presiona la tecla C
y escribe el siguien-
te texto:
Puedes leer más sobre el de letra adecuado, pulsa C . Con
tag en la anterior y escribe: ello cerrarás la celda e indi-
entrega de este curso. carás al nave- tantes de este capítulo.
gador que has alcanzado el

6 Pero a la columna toda-

vía le falta algo de con- 9 Con respecto al conte-
nido de la celda de la
final de la tabla.

tenido.
Pulsa la tecla C e intro-
duce las líneas de código
derecha no tienes que mo-
dificar nada. Sólo te queda
desplazar el cursor con la
11 Haz click sobre
y sobre
. Para cerrar el editor
corporarlos, bastará con
que omitas este paráme-
exactamente tal y como te ayuda de la tecla & hasta el tan solo tendrás que pinchar
indicamos a continuación. final del código fuente. sobre . Seguidamente haz
doble click sobre la carpeta
en la que se encuentre guar-
dado el fichero, que en este
caso será

y después haz click sobre bla, son

. una fila, y

12 Aquí puedes ver el

resultado final con
el navegador . una de las celdas que for-
man la tabla son para
su comienzo, y

Encontrarás un enlace que Para que el navegador se-

13 Cierra el navegador
Internet Explorer
con un click sobre . Con
es muy común en Internet. pa que vas a terminar con esto termina esta entrega del
Éste hace posible que cual- la tabla, tendrás que hacer curso.
quiera que visite tu página click exactamente en este En las próximas entregas
te pueda mandar un correo punto darás un repaso a los frames
electrónico con sólo hacer 09 (Pág. 64) , ya que con
click sobre él. Si el visitante estos elementos orga-
hace click sobre esta línea, nizarás mejor los con-
automáticamente se abrirá tenido de tus propias
su programa de correo elec- páginas
trónico con un nuevo men- web.
saje que tendrá en la barra
de destinatario tu dirección,
es decir, aquella que has
puesto tras : (la di-
rección que has puesto en
este ejemplo es la de Com-
puter Hoy. Evidentemente,
cuando realices tu propia
página tendrás que introdu-
cir tu dirección de correo y
no la de Computer Hoy).

7 Después viene la segun-

da celda, que debe con-
tener todo lo que ya se en-
contraba en la página. Pulsa
dos veces la tecla C y es-
cribe el texto siguiente:
El parámetro sólo
lo pondrás por precaución
en el caso de que la colum-
na de la derecha sea más lar-
ga, para que el contenido de
la celda se quede en la par-
te superior. Con esta ins-
trucción le asignarás un fon-
do a la celda.

En este ejemplo el fondo

de la celda se corresponde
con el fondo de la página.
■

66 Nº 41
 Profesional Programación en HTML, 7ª Parte

Preparación 66
Definición de los frames 67
Frames en cascada 68

imágenes

Algunos diseñadores web “enmarcan” sus páginas

para que sean más vistosas y fáciles de usar. Por eso,
enComputer Hoy te indicamos paso a paso cómo insertar
marcos y te damos consejos para colocarlos correctamente.
n el anterior capítulo mentos que aparecerán en la creado en anteriores capí-

E del curso de creación

de páginas web en
HTML 01 aprendiste a uti-
parte derecha.
Para realizar esta práctica
utilizarás las páginas que has
tulos del curso.
Para diseñar esta página
guía utilizarás de nuevo el ar- 2 Para abrir la plantilla haz
click en las opciones
Con unos simples clicks so-
bre las opciones y
lizar tablas para mejorar el creado en los capítulos an- chivo de plantilla que creas- y de la ventana podrás guardar
apecto de tus páginas cuan- teriores. Si no tienes estos te en el segundo capítulo del del editor. Pulsa sobre y el fichero con el nombre
do escribes texto. En esta ficheros, no te preocupes. curso (ver Computer Hoy selecciona la opción .
entrega te explicaremos el También puedes hacer el nº37, pág. 74). del me-
funcionamiento de los fra- ejercicio con otras páginas, nú desplegable. Primero haz click a la de-
mes 02 , que en castellano
se puede traducir como
“bordes” o “marcos”.
pero tendrás que realizar al-
gunos cambios, como en el
nombre de los ficheros en
1 Ejecuta el editor hacien-
do click en el menú
y llevando el pun-
Después haz click sobre
y el botón
El archivo se cargará en el
.
de
y, sin soltar el botón, arras-

Los frames dividen la ven- los hipervínculos. tero hacia , editor .

tana del navegador 03 en y . Haz click de
varias zonas donde se mues- nuevo.
tran distintos documentos al Preparación Si has seguido las anterio-
mismo tiempo. En el si- Antes de comenzar a res entregas del curso, tal vez
guiente ejemplo verás como crear frames debes prepa- tengas el icono
se pueden exhibir a la vez rar las páginas que van a
dos páginas HTML. En la par- quedar dentro de los bor-
te izquierda de la pantalla vas des o marcos. En esta oca-
a presentar una lista de hi- sión, sólo debes organizar en el Escritorio 05 , que te
pervínculos 04 que te per- la página guía, ya que todas permitirá acceder directa-
mitirán acceder a los docu- las demás son las que has mente al editor.
66 Nº 42
 Profesional

▼
tra el puntero hacia la par- Sólo te faltan un par de lí-
te izquierda, de forma que neas para terminar y co-
la línea quede seleccionada: menzar a probar la página.
. Pulsa la tecla $ y escribe el
código .

4 A continuación escribe
las siguientes líneas de
código fuente 06 (Pág 68) :
La primera línea es el iden-
tificador de cierre del frame
Como puedes ver, se trata y la segunda cierra todo el
de un documento que sólo documento.
tiene enlaces que te llevan a
los ejemplos de las entregas
anteriores del curso. El úni-
co parámetro 07 (Pág 68)
5 Para terminar debes guar-
dar el fichero. Haz click
en las opciones y
nuevo que has utilizado es és- . Se abrirá una
te: . En ventana en la que debes es-
el siguiente apartado te ex- cribir el nombre de fichero
plicaremos detalladamente y pulsar el botón
su funcionamiento. . Para cerrar el Bloc
de notas haz click en .

5 Guarda el fichero ha-

ciendo click sobre las op-
ciones y .
rámetro
pecifica que en la parte iz-
quierda se debe construir
es- de los ficheros cuyos enla-
ces se encuentran en la pá-
gina 6 Si deseas ver el resulta-
do haz doble click en la
Después cierra la ventana una columna con un ancho que has creado en el primer carpeta:
pulsando en . fijo de 150 puntos y que la apartado. Si te fijas en los hi-
segunda columna ocupará el pervínculos de este fichero
Definición resto de la página. Si quieres, verás que tienen el paráme-
puedes insertar más colum- tro: . que se encuentra en el Es-
de los frames nas escribiendo su anchura La traducción de “Target” al critorio y en el archivo:
Ahora vas a crear un Fra- separada por comas. Por castellano es “Destino”. Es de-
me-Set 08 (Pág 68) . Este ele- ejemplo: cir, el enlace apunta al mar-
mento, además de dividir la introduce una columna de co que tiene como nombre
ventana del navegador en di- 100 puntos de ancho en la “contenido” (el de la dere- .
ferentes áreas, determina en
qué zona debe aparecer ca-
da uno de los documentos.
parte izquierda y otra de 200
puntos en la derecha. Los
puntos sobrantes quedarán
cha) para mostrar la página.
De forma que el contenido
del marco derecho se define
7 Puede que el resultado
no sea espectacular, pe-
ro es muy práctico .
asignados a una columna realmente en la página

1 Si tienes abierto el Bloc

de notas puedes empezar
directamente por el paso 2.
central que puede tener una
anchura variable.
En este ejemplo tienes su-
que es
la que se muestra en el mar-
co izquierdo. También has
En caso contrario, tendrás ficiente con dos columnas. utilizado el parámetro
que abrirlo haciendo doble Además debes escribir un se- que
click sobre el icono gundo parámetro. Con define el valor inicial de ca-
indicas al nave- da marco cuando se presen-
gador que se eliminen las se- ta la página en el navegador.
paraciones entre los bordes Cuando hagas click sobre
de cada marco. los enlaces que aparecerán
que se encuentra en el Es- en el marco izquierdo del Para comprobar el fun-
critorio.
3 Con la línea anterior has
definido el aspecto de la
navegador, el contenido de
la parte derecha desapare-
cionamiento de los marcos
haz click sobre

2 En esta ocasión no te ha-

ce falta abrir el fichero
de plantilla. Simplemente
ventana del navegador. Pero
todavía faltan algunos deta-
lles. Pulsa la tecla $ y escri-
cerá para ser reemplazado
por el documento HTML de
la selección.
y verás como aparece la pá-
gina
en la parte derecha de la
debes escribir esto: . be las líneas . ven-
La entrada tana.
se encarga de definir
con qué se rellenará
cada marco. El pará-
metro , que vie-
Seguro que las cuatro pri- ne de “source”, indica el fi-
meras líneas de código te re- chero HTML que debe
sultan muy familiares. Son las insertarse en el marco. En es-
mismas que aparecen en to- te ejemplo se trata del fiche-
dos los archivos HTML. Pero ro que
no has utilizado el identifi- creaste en el primer aparta-
cador 09 (Pág 68) ,ya do. A continuación se escri-
que en este tipo de docu- be el parámetro .
mento no tiene ningún sen- Echa un vistazo a la segun-
tido. En su lugar aparece la da línea de código:
entrada para in- . Gra-
dicar al navegador cómo se cias a este nombre el nave-
▲

debe dividir la ventana. El pa- gador reconoce la ubicación

Nº 42 67
 Profesional Programación en HTML, 7a Parte
v Divide la ventana del nave- ⑤
8
▼
Cierra el navegador In- Esta línea crea un nuevo Para terminar se
ternet Explorer con un Frame-Set. En este caso apa- gador en dos marcos vertica- completan las dos secciones
06 Código fuente click sobre . Si lo deseas rece la expresión que [Link] de la parte izquierda tie- de frame-set con sus
Serie de instrucciones y puedes mejorar el aspecto de indica al navegador que el ne un ancho de 150 puntos y identificadores de cie- rre
comandos de programa- la página realizando algunos nuevo marco debe dividir la el de la derecha todo el espa- correspondientes.
ción que se utiliza para cambios en el fichero “nave- ventana horizontalmente. cio que sobre. Algunas líneas han sido des-
indicar al navegador lo [Link]”. Por ejemplo, ´Rellena el primer frame plazadas hacia la derecha uti-
que debe hacer cuando
muestra un archivo que
tiene formato HTML. Es-
puedes cambiar el color de
los caracteres o poner una
imagen
6 Pulsa las teclas $ y Ç
y escribe .
(el de 150 puntos de ancho)
con el contenido del fiche-
ro “[Link]” y lo
lizando la tecla Ç. Esto no
es imprescindible para que
el código funcione correcta-
te término también lo
emplean los programa- de fondo siguiendo los pasos Ya sabes lo que significa. llama “nav”. mente, pero es una práctica
dores para referirse a que te hemos indicado en las Coge el fichero “exter- Dentro del segundo mar- bastante habitual en los pro-
los archivos que poseen entregas anteriores. [Link]” y lo inserta en el co se abre otro frame-set que gramadores, ya que permite
las instrucciones de un marco de nombre “exter- divide horizontalmente la hacer el código más legible.
programa. Frames no” que acabas de crear. zona de la derecha asignan-

07 Parámetro
Información que deter-
en cascada
Un frame se puede guardar 7 Seguidamente, y en este
orden, presiona las teclas
do una altura de 50 puntos
para el marco superior. La
parte inferior tendrá el resto
10 Para guardar el fiche-
ro haz click sobre
y .
mina el funcionamiento a su vez dentro de otro fra- N, ( y Ç. Así pasas a la si- de espacio disponible.
➃ Estas dos líneas de código
de un programa. Tam-
bién se conoce como ar-
gumento. Los paráme-
me. Esto quiere decir que
dentro de un marco podrás
incluir otros. El resultado son
guiente línea e introduces
un tabulador. rellenan los dos marcos hori-
zontales.
11 Finalmente tienes que
crear el fichero “ex-
[Link]”. Para hacerlo
repite el paso 2 del aparta-
tros pueden tener
valores de todo tipo. Por
ejemplo: números, tex-
unas estructuras que pueden
llegar a ser bastante comple-
jas. En el siguiente ejemplo
8 Pulsa las teclas N, $ y
Ç para crear otra línea
donde debes escribir el
tos, expresiones o inclu- verás cómo se hace. identificador de cierre
so el nombre de un ar- v
. ´
chivo. Estos valores
siempre van acompaña-
dos de una instrucción o 1 Inicia el Bloc de notas ha-
ciendo doble click sobre:
. 9 Cuando termines, el do-
cumento al completo de-
➃
⑤
un identificador HTML
que indica qué es lo que be tener un aspecto similar
se debe hacer con ellos. a este:

08 Frame-set
Archivo donde se defi-
nen los frames que ten-
drá la página. Debe es-
2 Haz click en las opciones
y .Se abri-
rá una ventana en la que tie-
pecificar el tamaño y nes que pulsar sobre la pes-
posición de cada marco taña de la parte inferior y
e indicar los documen- seleccionar la entrada do anterior. Pero al guar-
tos HTML que serán .A conti- darlo utiliza el nombre
presentados en ellos. nuación debes hacer doble .
También puede contener click sobre el icono del fi-
otros frame-sets.

09 Identificador
chero .
12 A continuación repite
el paso 3 del apartado
“Preparación” y escribe las
El lenguaje HTML se es-
cribe utilizando identifi-
3 A continuación se abrirá
el fichero .
Haz click sobre y
instrucciones siguientes:
cadores. Estos son ór-
denes que das al
navegador para que
sobre
el nombre de archivo
. Escribe

y pulsa el botón Y el resultado debe ser el

13
ciones
En la barra de menú
haz click sobre las op-
y .
muestre la página web
tal y como deseas. Cada . siguiente: la ventana del na-
identificador es una or- vegador se divide primero
den y puede indicar atri-
butos del texto, posición
de imágenes, hipervín-
4 Haz click justo detrás de
y pulsa la tecla $.
verticalmente y después el
área derecha se parte hori-
zontalmente. Cuando el na- No todos los diseñadores de tre tantas opciones. Además,
culos o cualquier otra
propiedad de la página. 5 Presiona la tecla Ç y es-
cribe estas líneas de có-
digo:
vegador interprete el fiche-
ro lo hará de la siguiente
manera:
páginas HTML utilizan los fra- la creación de este tipo de pá-
mes. Para algunos son una ginas resulta más compleja pa-
herramienta imprescindible, ra el diseñador.
10 Webmaster mientras que para otros re- A algunas empresas no les gus-
A los diseñadores de pá- sultan superfluos. ta nada que enmarquen sus pá-
ginas web también se Cada uno tiene su parte de ra- ginas dentro de un frame (ver
les llama webmasters. zón. Por un lado, si se utilizan apartado “Frames en cascada”).
Cuando completes este con moderación, pueden ser Para evitarlo, utilizan unos
curso de programación muy útiles porque simplifican “destructores de frames” que
en HTML tendrás todos mucho el diseño de las pági- eliminan todos los marcos de
los conocimientos nece- nas web y hacen que sean mu- la página para que sus conte-
sarios como para consi- cho más claras. Pero si se nidos aparezcan ocupando to-
derarte un webmaster abusa de ellos pueden llegar a da la ventana del navegador. En
profesional. resultar molestos. Las páginas la undécima parte del curso
con muchos frames favorecen aprenderás a programar estos
que el visitante se pierda en- “destructores de frames”.
▲

68 Nº 42
 Profesional Programación en HTML, 7a Parte

Cierra el Bloc de notas que utilizaste en la anterior

pulsando sobre . entrega del curso .

14
peta
Para terminar haz do-
ble click sobre la car- 16 Puedes seguir pro-
bando con el resto
de enlaces que aparecen el
el marco izquierdo. Cuan-
do termines cierra la ven-
tana del navegador hacien-
y el icono . do click sobre .
Si consigues dominar el
funcionamiento de los fra-
mes puedes considerarte

15 El resultado debe ser

éste .
Si haces click sobre el en-
un auténtico experto en

todavía te quedan muchas

lace mientras estás opciones interesantes por
conectado a Internet, verás aprender. Por ejemplo, de-
como el marco derecho de bes saber cómo se puede
la ventana de tu navegador introducir un formulario en
muestra la página del po- un documento web. De es-
pular buscador . ta forma, los visitantes po-
Si por el contrario haces drán escribir datos en tus
click sobre apare- páginas para mandarlos al
cerá el fichero de ejemplo webmaster 10 (Pág. 68) .

Consejos con los frames !

o en tanto por ciento. frame, en vez de un docu-

sirve
Consejo 3: en vez de es-
cribir

dir de dos formas:

verticalmente con: plo,
■

70 Nº 42
 Profesional Programación en HTML, 8ª Parte

Definir un diseño 76
Formulario activo 78
Formularios más avanzados 78
Resumen de este capítulo
8
0

Foto: Stock Fotos S.L. Montaje: Computer Hoy.

Insertar un formulario en tu página web es la forma más 40
fácil de conseguir que los visitantes puedan ponerse en
contacto contigo y mandarte cualquier tipo de información
o sugerencia a través de un mensaje de correo electrónico.
n la anterior entrega del sitantes de tu página podrán plantilla que creaste en la

E curso HTML 01 apren-

diste a utilizar los fra-
mes 02 , que te permiten
escribir datos para mandarte
un mensaje de correo elec-
trónico.
segunda entrega del curso
(ver Computer Hoy nº 37,
pág. 74). Si no la tienes pue-
mostrar varios documentos des optar por teclear el tex-
a la vez en una misma ven-
tana del navegador 03 . En
esta ocasión nos centrare-
1 Ejecuta el Bloc de notas
haciendo click en
y llevando el pun-
to que aparece en el si-
guiente punto.
botón
y pulsar sobre el
.
mos en el tema de los for-
mularios. Para hacerlo vas a
comenzar escribiendo el
tero hacia
y
Haz click de nuevo.
,
. 3 Abre la plantilla haciendo
click en la ventana del
editor sobre y . 4 Haz click con el botón
izquierdo del ratón jus- Mantén presionado el bo-
código fuente 04 de un Si has seguido las anterio- Seguidamente pulsa sobre la to en este punto . tón y desplaza el puntero ha-
ejemplo sencillo que per- res entregas del curso, tal vez pestaña cia la izquierda, de forma que
mitirá a los visitantes de tu tengas el icono y selecciona la opción la línea de código quede se-
página enviarte un mensaje . leccionada: .
de correo electrónico 05 . Finalmente haz doble click

Definir un diseño
en el Escritorio06 (Pág. 78) ,
sobre . El fiche-
ro de la plantilla aparecerá
en la ventana del editor .
5 Escribe el identificador
07 (Pág. 78) y pul-
sa la tecla $. Este coman-
Lo primero que harás es que te permitirá acceder di- Haz click sobre y do indica al navegador que
analizar la estructura básica rectamente. . Aparecerá una las siguientes líneas de có-
de un archivo HTML con un ventana en la que debes re- digo, hasta el identificador
formulario. Después inserta-
rás dos campos donde los vi- 2 Para diseñar el formula-
rio te va a hacer falta la
llenar el apartado
escribiendo
de cierre
formulario.
, son un

76 Nº 43
 Profesional

▼
6 Escribe
de textoestas
. dos líneas
Con la primera das la or-
, que per-
mitirá asignar el texto que
se introduzca en el campo
Los formularios no sólo son tal manera que al hacer click
útiles para recopilar y enviar sobre ellos aparezcan determi-
den de mostrar el título del del mensaje a una variable. datos, también puedes hacer nados datos en la ventana del
primer elemento del for- otras muchas cosas. Te resul- navegador. Los conocimientos
mulario en negrita. En la se-
gunda utilizas el identifica-
dor para definir el
8 Pulsa la tecla $ y escri-
be el identificador de
cierre .
tarán perfectos para visualizar de Javascript necesarios para
en tus páginas aquellos datos realizar este tipo de aplicacio-
que piensas modificar con nes los verás en la undécima
formato del campo de en- Javascript. Por ejemplo, pue- entrega del curso HTML (Com-
trada 08 (Pág. 78) . El navega-
dor sabe que en este punto
debe mostrar un recuadro
9 Todavía te falta una par-
te que se encargue de in-
dicar al navegador cuándo
des programar los botones de puter Hoy nº 46).

cesada por un
para introducir datos. El ar- se han introducido todos los programa que
gumento in- datos del formulario. Pre- Tras el signo de interro- debe ser indicado junto al
dica que se trata de una úni- siona la tecla $ y escribe gación aparecerán el nom- identificador . En
ca línea de texto. estas dos líneas de código . bre y el contenido de cada este ejemplo no lo has he-
El parámetro 09 (Pág. 78) Con ellas se realiza un salto campo. Por ejemplo, cho y el resultado de las en-
de línea y se dibuja un bo- tradas aparece en el campo
te sirve para especificar la tón. Cuando los usuarios que se habrá convertido en de direcciones. En el si-
variable 10 (Pág. 78) donde visiten tu página escriban en y, depen- guiente apartado vas a ver
se almacenará el valor de en- ella un mensaje tendrán que diendo de lo que hayas te- cómo puedes enlazar tu for-
trada del campo. Finalmente pulsar este botón para man- cleado con anterioridad en mulario con un programa.
con indicas al dar los datos. Para crearlo el formulario, aparecerá un
navegador que el ancho del
campo es de 30 caracteres.
Por cierto, no nece-
has utilizado el identificador

rámetro
acompañado del pa-
.
texto u otro a continuación.
En realidad esta indicación
de la barra de direcciones
14 Antes de comenzar
debes cerrar la venta-
na del Explorer haciendo
sita identificador de cierre. “Submit” se puede traducir está pensada para ser pro- click sobre .
al castellano como “enviar”.

7 De momento sólo has

creado un pequeño cam-
po que permitirá introducir
Después aparece el argu-
mento
que determina el texto que
una dirección de correo elec- se verá escrito dentro del
trónico. El campo que per- botón.
mitirá introducir el texto del
mensaje debe tener un ta-
maño bastante más grande.
Para crearlo debes pulsar la
10 Pulsa la tecla $ e in-
troduce el identifica-
dor de cierre . El
tecla $ y escribir las si- código fuente al completo
guientes líneas de código . tiene el siguiente aspecto .

La primera instrucción
realiza un salto de lí-
nea. Después escribes el tí-
11 Haz click sobre las
opciones
. A continuación
y

tulo del elemento en negri- cierra el Bloc de notas pul-

ta y vuelves a saltar una sando sobre .
línea para que el documen-
to sea más legible.
A continuación viene un
bloque de texto que está de-
12 Haz doble click sobre
la carpeta

finido con la orden

. Los siguientes
dos parámetros: que se encuentra en el Es-
para el número critorio. Dentro de ella haz
de columnas y otra vez doble click sobre el
para el número de filas, te icono
deben resultar familiares, ya
que fueron tratados en la an-
terior entrega de este curso.
En este caso, sus valores sir-
ven para determinar el ta-
maño del recuadro donde se
13
gina .
Éste es el aspecto fi-
nal que tendrá la pá-

podrá escribir el mensaje. Es Si lo deseas, puedes rellenar

decir, el navegador reserva- los campos y hacer click so-
rá un ancho de 40 caracteres bre el botón . En la
y una altura de 10 para este línea de dirección aparece-
campo de entrada de texto. rá, por ejemplo .
▲

Aún queda el parámetro

Nº 43 77
 Profesional Programación en HTML, 8ª Parte
Formulario activo

▼
mente haz do-
Las siguientes líneas de ble click sobre el fichero
código darán vida a tu for- para abrirlo.
mulario. Sólo necesitas una
dirección de correo elec-
trónico y un programa que
gestione los datos. En nues-
3 Haz click justo detrás del
comando . Pulsa
la tecla de la barra de espa-
Para gestionar un formulario interés. Sólo tiene que ser ca-
hace falta un programa que paz de entenderse con la pági-
tro ejemplo vas a utilizar un cio ( ) e introduce el si- procese los datos. Esta labor la na web que envía los datos.
servicio de libre acceso que guiente texto: . realizan los programas CGI, si- A su vez, el programa devuel-
permite gestionar gratuita- El parámetro in- glas de “Common Gateway In- ve un resultado al usuario que
mente los formularios. Lo dica al navegador dónde tie- terface”, que se puede traducir cumplimenta el formulario. Es-
puedes encontrar en la di- ne que remitir los datos del al castellano como “Interface te resultado se muestra en el
rección de Internet 🡪 v. formulario y común para la transmisión de navegador utilizando una pági-
Su funcionamiento es muy especifica datos”. El CGI es un programa na web. Puede ser un mensaje
simple: el visitante de tu pá- que se trata de un correo que recoge la información del de error, la confirmación del en-
gina de Internet rellena tu electrónico. usuario y la prepara para en- vío de un correo electrónico, el
[Link] hacer click viarla por e-mail. resultado de una consulta a una
Da igual de qué tipo de pro- base de datos o una operación
en el botón , tu pá-
gina web se pone en con-
tacto con el servidor. Este
4 Para que el formulario
llegue a tu dirección de
correo debes escribir otra
grama se trate o en qué len- matemática. No no todos los
guaje esté programado. Puede servidores de Internet ofrecen
servidor utiliza un programa línea de código. Haz click tratarse de una base de datos, a sus usuarios un interface CGI
que recoge los datos del for- justo en este punto un programa que mande men- y por tanto no todos permiten
mulario y los remite, vía co- y pulsa la tecla $.A conti- sajes o que calcule los tipos de utilizar formularios.
rreo electrónico, en el mis- nuación escribe el siguien-
mo orden que han sido
introducidos, a tu dirección
de e-mail.

1 Inicia el Bloc de notas

con un doble click sobre:

te texto .
. El identificador es que el remitente no ha de co- cifica tu dirección de co-
un campo de entrada. Pero nocer cuál es tu dirección de rreo electrónico. Esta in-

2 Haz click sobre

y
la pestaña
. Después pulsa
en esta ocasión aparece con
el parámetro .
en castellano signi-
correo electrónico.
También es muy impor-
tante el parámetro .
formación se añade justo
detrás de . Ten en
cuenta que en este caso
y selecciona la opción f ica “oculto”. Esto implica Esta indicación es utilizada
. Final- que los campos no van a apa- por el programa para poder es un dato de ejemplo. Para
recer en el formulario, ya saber en qué línea se espe- que todo funcione correc-

Formularios más avanzados

to que has visto en el formu- guiente .

dor
que a continuación hay un

opciones de una lista o los

continuación viene con y vuel-

el siguiente aspecto .

casillas que el usuario este:

debe seleccionar uno. click de ratón .

El nombre .
es muy im-
portante.
▲

78 Nº 43
 Profesional Programación en HTML, 8ª Parte

tamente debes introducir

tus datos reales. Si no lo ha-
ces, no recibirás ningún for-
6 Para ver el resultado haz
doble click sobre la car-
peta
8 Unos instantes más tar-
de aparecerá un texto in-
dicando que el mensaje es
Los formularios hacen po-
sible que los visitantes de tu
página se pongan directa-
curso se hará un repaso a
los identificadores ocultos,
ya que, aunque estos co-
mulario. Para evitar que te correcto y se encuentra en mente en contacto contigo. mandos no se ven en la pá-
bombardeen con molestos camino . En la siguiente entrega del gina, resultan muy útiles.
mensajes publicitarios, pue-
des crear una dirección de
correo gratuita y utilizarla
para realizar este ejemplo.
y el fichero

.
9 Cierra Internet Explorer
haciendo click en .

Para crear una cuenta e-mail

de este tipo puedes con-
sultar las páginas web 🡪 ´ 7 A primera vista no pare-
ce que existan muchas
10 Conviene que unos mi-
nutos más tarde eches
un vistazo a la bandeja de en-
o C (existen cientos de diferencias con la versión trada de tu correo electróni-
páginas similares) donde del apartado anterior . co. Debes encontrar un men-
encontrarás toda la infor- Pero si rellenas los dos saje de este tipo ,
mación necesaria. campos que podrás abrir haciendo
y haces click en el botón doble click sobre él.

5 El texto completo tiene

el siguiente aspecto .
Haz click sobre las opciones
, mientras estás co-
nectado a Internet, el pará-
metro entrará en 11 En el mensaje de co-
rreo electrónico apa-
y . Cierra el funcionamiento y los datos recerán los datos que has
Bloc de notas pulsando so- serán remitidos a tu buzón introducido. Como puedes
bre . de correo electrónico. ver, el servidor ha incluido
la dirección de correo elec-
trónico .
Esto te permitirá contes-
tar el mensaje inmedia-
tamente. También aparece
el texto del mensaje .

y .
un pequeño resumen con

.
➜ Direcciones online dos estos datos sean pre- tro llenar el formulario. Para

tificador

.
■

80 Nº 43
 Profesional Programación en HTML, 9ª Parte

Foto: Stock Fotos S.L. Montaje: Computer Hoy.

Para este capítulo del curso no hace falta que compres
una bola de cristal. Te bastará con aplicar los comandos Insertar imágenes
ocultos del HTML que te explicamos a continuación
y conseguirás algunos efectos mágicos para tus páginas. Para
expertos
Ejemplo de formulario
n el anterior capítulo Los identificadores ocul- Abrir páginas
E del curso de creación
de páginas web en
HTML 01 aprendiste a di-
tos son instrucciones espe-
ciales de HTML. Al contra-
rio que los identificadores
automáticamente
Con la ayuda del identi-
señar formularios 02 para que ya conoces, estos tienen ficador podrás,
que los visitantes de tus pá- funciones “invisibles” que por ejemplo, abrir un do-
ginas puedan enviarte datos no son mostradas directa- cumento HTML a partir de
a tu dirección de correo mente cuando se visualiza otro documento HTML des- tantes o llevar a todos los vi- puedes copiar el código
electrónico. En esta ocasión la página. Con ellos no po- pués de un tiempo deter- sitantes a la dirección de In- fuente 08 (Pág. 78) que apa-
aprenderás a usar identifi- drás presentar textos ni es- minado. ternet que tú quieras. rece en el paso 2.
cadores 03 ocultos que te tablecer colores o tipos de Puede que en un principio El siguiente ejemplo mues-
permitirán programar algu-
nas rutinas. Estas se ejecu-
tan automáticamente cada
letra, pero te permitirán dar
algunas órdenes especiales
al navegador 06 .
esto no te parezca intere-
sante, pero te ofrece muchas
posibilidades. Por ejemplo:
tra una página HTML que
tras cinco segundos presen-
ta una segunda.
1 Para iniciar el editor haz
doble click en .

vez que se cargue tu página El identificador oculto más hacer una presentación (a Como es habitual, para re-
y permiten definir algunas importante es . Con modo de diapositivas), mos- alizar la práctica necesitas el También puedes hacerlo si-
palabras clave 04 que ayu- él podrás realizar las fun- trar un mensaje de bienve- archivo de plantilla que guiendo la siguiente ruta:
darán a los buscadores 05 ciones que te indicamos a nida en tu página de inicio creaste en la segunda entre- , , y
a catalogar tu página web. continuación. 07 (Pág. 78) durante unos ins- ga del curso. Si no lo tienes, .
76 Nº 44
 Profesional

▼
2 Haz click en la ventana
del Bloc de notas sobre
las opciones y .
la cuarta entrega del curso
(puede ser cualquier otro).
Este enlace puede resultar
Haz doble click sobre el
icono
completa de un servidor de
Internet 12 (Pág. 78) a otro. O
deseas cambiar el nombre
Después pulsa el botón útil para los visitantes que de todas tus páginas para se-
y selec- utilicen un navegador anti- del Escritorio y después en guir un esquema concreto.
ciona el tipo de fichero guo que sea incapaz de en- ¿Qué pasará entonces con
. Haz do- tender el identificador los visitantes que busquen
ble click sobre el archivo . Con . tus páginas? Muy fácil, utili-
. La ventana cierras la orden de alineación
mostrará la plantilla .
6
central.

Para que la página fun-

cione debes utilizar el
comando . Pulsa la
tecla ¡ y, sin soltarla, pre-
siona H. A continuación
pulsa varias veces & hasta
que el cursor 10 (Pág. 78)
quede situado justo delante
de .

3 Haz click en las opciones 7 Pulsa la tecla $ y des-

pués . A continuación
inserta la línea .
cribe y pulsa zando el identificador ocul-
bre el botón . El identificador es- to podrás llevarles

4 Ahora vas a presentar un

breve texto y dos imáge-
tá acompañado por dos ar-
gumentos 11 (Pág. 78) :
in-
10 El navegador se abrirá
y mostrará la página .
Al cabo de cinco segundos de
rápidamente hasta la página
que desees. En el siguiente
ejemplo te mostramos lo
nes que has utilizado varias forma al navegador que de- espera accionará automáti- que debes hacer para seguir
veces en anteriores entregas be “refrescar” el contenido camente y presentará el se- este procedimiento.
del curso. Si no las tienes pue- de su ventana y gundo documento .
des utilizar otras, pero ase-
gúrate de que se encuentran
en la misma carpeta que la
indica cuándo se producirá
el cambio y cuál será la pá- 11 Cierra el navegador In-
ternet Explorer ha-
1 Tendrás que utilizar de
nuevo el archivo de plan-
tilla. Repite los pasos 1 y 2
página HTML. Haz click con gina utilizada. ciendo click en . del primer apartado.
el botón izquierdo en . significa “conte-
nido”. Después del signo
aparecen dos elementos en-
tre comillas y separados por
Direccionamiento
inmediato
2 A continuación haz click
en y
Aparecerá otra ventana. En
.

punto y coma. Primero se in- Imagina que no te queda la casilla es-

dica el tiempo en segundos más remedio que desplazar- cribe y pulsa el
que el navegador debe es- te con tu página de inicio botón .
perar antes de abrir la nue-
va página, en este caso .
Después aparece el archivo
Sin soltar el botón, mueve el HTML que debe utilizar. En
puntero a la izquierda hasta esta ocasión se trata de
que la línea aparezca selec- , que es
cionada . una página local almacena-
da en el disco duro, pero

5
Con
Escribe las líneas si-
guientes: .
conseguirás
puede tratarse de cualquier
otra página de Internet.

que las imágenes aparezcan

centradas en la página.A con-
tinuación hay tres saltos de
8 Con esto has terminado
de diseñar la página. El
código fuente completo de-
línea, dos imágenes y un tí- be tener este aspecto: .
tulo corto. Con la expresión Haz click en y
para guardar los
introducirás un hipervíncu- cambios. A continuación cie-
lo 09 (Pág. 78) que apunta al rra la ventana del Bloc de no-
documento HTML creado en tas haciendo click en .
▲

Nº 44 77
 Profesional Programación en HTML, 9ª Parte

▼
de tus páginas de Internet click sobre el fichero significa “expi- notas pulsando sobre .
13 World puedes seguir las instruc- . ra”, lo que indica que la pá- En la siguiente entrega ha-
ciones siguientes: gina tiene una fecha de ca- blaremos de nuevo sobre la
Wide Web
Red mundial de datos
de Internet. En ella pue-
1 Repite el paso 1 del pri-
mer apartado.
3 Haz click justo detrás de
y pulsa $.
ducidad. Con
estableces que ésta es in-
mediata. Si un navegador lee
, edición de páginas web y
aprenderás a mejorarlos uti-
lizando plantillas.
des encontrar informa-
ción sobre innumerables
temas. Lo más impor-
2 A continuación haz click
en y . Pul-
4 Escribe la siguiente línea
de programa: .
la página, recibirá la orden
de actualizarla con el con-
tenido del ➜ Online
tante es que toda la in-
formación está relacio- sa sobre la pestaña Con , el navega- servidor original la próxima
nada para facilitar la dor reconoce que a conti- vez que la busque.
búsqueda de datos. y selecciona la opción nuación aparece una orden
14 Indexar
Organizar una base de
. Para abrir
el documento haz doble
de configuración para la pá-
gina que está cargando. 5 Haz click en y
. Cierra el Bloc de

datos utilizando un crite-

rio determinado. Por
ejemplo, los buscadores
Generar identificadores <meta> automáticamente
de Internet indexan y or-
ganizan las páginas web
por su contenido e im-
portancia.
Uno de ellos es: .
15 Proxy
Ordenador que actúa
como intermediario en- aparecerá un texto con los
tre tu ordenador y la red .
Internet. Puede ofrecer dientes .
algunos servicios adi-
cionales de seguridad,
administración y caché.
Normalmente se en-
cuentra en el ISP, pero gador pulsa la tecla % y sin
las empresas suelen te-
ner un servidor proxy
para conectar todos sus
equipos a Internet utili-
zando una red interna. y pulsa mera línea

16 ISP
Proveedor de servicios recha. Pusa y al mismo
de Internet. Ofrecen a tiempo C para copiar el tex-
sus clientes una cone-
xión a la red Internet, co- ejemplo: .
rreo electrónico, chat,
news y un teléfono de
consultas. Los gratuitos y . Los iden-
tienen algunas limitacio-
nes y los de pago ofrecen
más servicios con mayor y .
calidad.

17 Caché
Resumen de este capítulo
Parte del disco duro que
utiliza el navegador para
almacenar las páginas
más visitadas. De esta
forma se evita el tener
que transmitirlas a tra- po .
vés de la Red cada vez nombre .
que quieres visitarlas y
se muestran mucho más El identificador tie-
rápido.
ne varias utilidades.
18 Meta-
generador
Programa o página web
en la que se introducen Los buscadores tienen en
algunos datos para que cuenta los identificadores
genere el código HTML
de los identificadores
<meta>. memoria intermedia.

y
■

80 Nº 44
 Profesional Programación en HTML, 10ª Parte
Tu primera hoja de estilo 62
Variaciones de estilo 63
Foto: Fototeca 9x12 S. L. Montaje: Computer Hoy.

Construcción de clases 64
Resumen de este capítulo 66

n el anterior capítulo dades cada vez que quieras

E del curso de creación

de páginas web en
HTML 01 aprendiste a uti-
mostrar un texto.

Tu primera
lizar algunos identificado-
res 02 ocultos que te han hoja de estilo
permitido programar deter- Para realizar este primer
minadas rutinas. Estas se eje- ejercicio debes recuperar la
cutan automáticamente ca- plantilla que creaste en la se-
da vez que se carga tu página gunda entrega del curso. Si
en un navegador 03 y te no la tienes, puedes dise-
permiten definir algunas pa- ñarla introduciendo el có-
labras clave 04 que ayu- digo fuente 09 (Pág. 64) que
darán a los buscadores 05 aparece en el paso 2.
a catalogar tu página web.
En esta ocasión vamos a
tratar las hojas de estilo en
cascada 06 (Pág. 64) que te
1 Para iniciar el Bloc de no-
tas pulsa en:

ayudarán a mejorar el as-

pecto de tus documentos y Si no encuentras este icono
conseguir una buena orga- en el Escritorio 10 (Pág. 64) ,
nización de tus páginas. Su puedes seguir la ruta
funcionamiento es similar al , ,
de las plantillas 07 (Pág. 64) y .
que se utilizan en los proce-
sadores de texto, por ejem-
plo en Microsoft Word. Estos
archivos contienen algunos
2 Haz click en
.
y

Para ver todos los ficheros

aspectos relativos a la pre- pulsa sobre el botón
sentación final de los docu-
mentos. Así, por ejemplo, y selecciona
puedes guardar bajo el . A conti-
nombre de “Arial-negrita” nuación haz doble click so-
una configuración que bre . En la ven-
utiliza el tipo de letra tana aparecerá el código
Arial combinado con el fuente de la plantilla:
formato Negrita y un tama-
ño de 14 puntos 08 (Pág. 64) .
Cuando quieras recuperar es-
ta configuración, tan sólo
tendrás que seleccionar el
nombre de la plantilla y
podrás dar formato al
texto automáticamen-
te. Esta herramienta re-
sulta muy práctica ya
que te evita el tener
3 Antes de ponerte manos
a la obra, tendrás que
guardar el fichero con otro
que configurar una a nombre. Haz click en
una todas las propie- y .

Fundamentos: crear el primer archivo HTML Nº 35

Cómo diseñar y dar formato a los textos Nº 37
Para
principiantes Listas, barras y vínculos Nº 38
Insertar imágenes Nº 39
Distintos formatos de escritura Nº 40
División de páginas con tablas Nº 41
Para Insertar y dimensionar marcos Nº 42
expertos
Ejemplo de formulario Nº 43
Tan sólo debes elegir la que más te guste. Las hojas Qué son y para qué sirven los identificadores Nº 44
de estilo en cascada te permiten diseñar formatos de Conceptos básicos del estilo en cascada Nº 45
Para
texto con distintos tamaños, colores y tipos de letra. profesionales HTML con Java Nº 46
Probando las páginas HTML Nº 47
Para usarlas, te bastará indicar la que necesites y Principios legales de las páginas de Internet Nº 48
conseguirás escribir muchas menos líneas de código.
62 Nº 45
 Profesional

▼
Escribe

y pulsa .
Por ejemplo, el tipo de letra
Truetype 11 (Pág. 64
.
12 Haz doble click sobre
el icono:
y selecciona
.

4 Haz click justo detrás de

La segunda línea de código
fija el tamaño de letra. Con
indicas
que se encuentra en el Escri-
torio y luego en:
3 Para abrir el fichero haz
doble click sobre la op-
ción .
que éste es de 14 puntos.
El parámetro 12 (Pág. 66)
fija el color de 4 Ahora, vas a asignar las
propiedades del identifi-

y pulsa la tecla $.
la fuente. En este caso vas a
utilizar el color azul. 13 El navegador se abrirá
y mostrará la página
cador
llamarás
a uno nuevo que
. Para conse-

5 Después introduce la si-

guiente línea de código:
.
8 Pulsa la tecla $ y escri-
be . Con esta línea
cierras el comentario que
El identificador indi- iniciaste en el paso 6.
ca al navegador que a conti- Pulsa de nuevo la tecla $
nuación aparece una planti- y escribe el identificador de
lla de formato, y el cierre .
parámetro
que se trata de una hoja de
estilo en cascada,“CSS”, son
las siglas inglesas de “Casca-
9 Con esto has introducido
todas las características
de un nuevo formato.
ding Style Sheet”. Para ejecutarlas, selecciona
la línea del Como puedes ver, sólo el pri- guirlo, debes hacer click jus-

6 Seguidamente, pulsa la te-

cla $ y escribe .Se
código fuente. mer párrafo tiene el tipo de
letra, tamaño y color que has
to en este punto

trata del símbolo que indica

el inicio de un comentario.
De esta forma impides que
10 Escribe las siguientes
líneas de código:
fijado con anterioridad.
El segundo párrafo es el que
no has escrito
los navegadores que no co- entre los iden-
nocen los “CSS” representen
el código que viene a conti-
nuación en pantalla. En el
tificadores
y , por
eso no ha ex-
5 Simplemente tienes que
escribir . De esta for-
ma puedes asignar un for-
cuadro “Utilización de co- perimentando mato a todos los identifica-
mentarios” de la página 64 variaciones. dores que [Link] sólo
puedes encontrar más infor- La parte del texto que está debes introducirlos uno de-
mación sobre este tema. delimitada por los identifi-
cadores y apare- 14 Para cerrar el navega-
dor, haz click en .
trás de otro separándolos por
una coma. Es decir, el identi-
7 Vuelve a pulsar la tecla
$ e introduce las si-
guientes líneas de código:
cerá con el formato que has
definido anteriormente. El
resto del párrafo debe mos- Variaciones
ficador tiene asigna-
dos el mismo tipo, tamaño y
color de letra que el identifi-
trarse sin que se aplique nin- de estilo cador . En un principio,
guna plantilla. El código Si has seguido todas las ins- esto puede ser absurdo, pe-
fuente completo es el si- trucciones del apartado an- ro si realizas las modifica-
Con fijas la configura- guiente: terior debes tener claro el ciones que te indicamos a
ción del identificador funcionamiento de las continuación conseguirás de-
. Esto significa que más ade- hojas de estilo. Resu- finir dos identificadores dis-
lante, en el documento, to- miendo, al principio tintos utilizando muy pocas
dos los apartados que co- del código fuente de- líneas de código.
miencen por y fines un nuevo identi-
terminen por ten-
drán esta configuración. Las
instrucciones de formato
ficador que podrás uti-
lizar más adelante para
fijar un tamaño, tipo y
6 Haz click justo al final de
la línea
pulsa la tecla $.
y
van siempre precedidas por color de letra especí-
una llave y cada una de
ellas separadas por punto y
coma . Después de la úl-
ficos. Las hojas de es-
tilo en cascada te brin-
dan muchas más
7 Escribe las siguientes lí-
neas de código:
tima tendrás que escribir la posibilidades. Siguien-
llave de cierre . do los pasos que te va- En un principio has fijado el
La primera instrucción de mos a indicar a conti- tamaño de letra
formato es nuación podrás para el
, con ampliar las propieda- identificador y ahora
ella especificas el tipo de le- des de los identifica- lo has cambiado con
tra. En este caso hemos uti- dores de forma global . Esto
lizado la fuente , o individual. puede parecer un poco ex-
aunque puedes usar cual- traño, pero es uno de los prin-
quier otra. Debes recordar Repite el paso 1 del cipios básicos de las hojas de
que siempre se debe escri-
bir entrecomillada, incluso 11 Haz click en
. Después cie-
y 1 primer apartado. estilo en cascada. Las planti-
llas se pueden construir unas
cuando el nombre está for- rra la ventana del editor pul-
2 Haz click sobre y dentro de otras.
▼

mado por varias palabras. sando sobre . . Después pulsa

Nº 45 63
 Profesional Programación en HTML, 10ª Parte

Construcción
8
▼
Esto significa que puedes dar Para comprobar el resul-
formato a los identificadores tado, debes escribir algún de clases
tantas veces como desees,pe- texto utilizando el identifi-
ro el único válido será el úl- cador . De momento has aprendi-
timo que escribas. Haz click justo detrás de do a utilizar plantillas de es-
La razón principal para em- tilo creando identificadores
plear esta metodología es que al principio del código
puedes asignar un formato HTML. En este apartado, ha-
básico para todos los identi- rás lo mismo definiendo una
ficadores y posteriormente clase 13 (Pág. 66) que podrás
cambiar las propiedades par- utilizar en combinación con
ticulares de cada uno de y pulsa la tecla $. otros identificadores. Sigue
ellos. A continuación escribe la si- estos pasos:
Gracias a esta opción podrás guiente línea:
Repite el paso 1 del pri-
complementar fácilmente el
diseño de unas plantillas con El código fuente completo 1 mer apartado.
otras. tiene el siguiente aspecto:
9 Haz click sobre y
. Cierra el Bloc de
notas pulsando sobre . 2 Repite los pasos 2 y 3 del
apartado “Variaciones de
estilo”.
Repite el paso 12 del
10 apartado anterior.
El resultado muestra un tí- 3 Debes tener en pantalla
el fichero HTML con el
tulo con las mismas pro- que has trabajado durante es-
piedades que el texto que te capítulo. Pulsa justamen-
aparece, pero con un ta- te delante de y presio-
maño de letra más grande na las teclas $ y . Con
y en negrita esto has creado una línea en
blanco:

11 Cierra el navegador
con un click en .

Utilización de los comentarios

Si el código de tus páginas

go HTML.

guos no son capaces de ta de un texto que debe re-

sultado de la página será

ciones en tus páginas sin y al final.

capaz de procesar correc- cipio y al final de

tamente el
y , así que dentro y

po de letra.
▼

64 Nº 45
 Profesional Programación en HTML, 10ª Parte

5 8
▼
Haz click justo detrás de Abre la carpeta:
y pulsa la tecla $.

que se encuentra en

6 Introduce la siguiente lí-

nea de código:
el Escritorio con un doble
click de ratón.

Con aso- Dentro de ella, vuelve a ha-

cias el identificador a cer doble click en:
la clase .
Observa que en este caso el
nombre de la clase se debe El navegador te mostrará la
escribir sin un punto que la siguiente página
preceda. Aquí tienes el có- En la última línea puedes
digo fuente completo . comprobar el efecto de la
plantilla .

7 Va siendo hora de com-

probar los resultados.
Haz click en y
En la siguiente entrega del
curso aprenderás algunos as-
pectos de la programación
para guardar todos en Java 17 que podrás
los cambios que has realiza- combinar con tus conoci-
do. Después, cierra el Bloc mientos de HTML para con-
de notas pulsando sobre el vertirte en un maestro del
botón . diseño de páginas web.

4 Escribe las líneas si-

guientes:
Otro de los parámetros nue-
vos es .
En este caso toma el va-
lor para que
subraye el texto.
La plantilla que acabas
La mayor parte de instruc- de crear se puede utilizar pa-
ciones te deben resultar fa- ra representar todos los ele-
miliares. En la primera línea mentos de texto “importan-
resalta la indicación tes” destacándolos del resto
. El punto que la con una fuente Arial de 14
precede avisa al navegador puntos en color rojo, escri-
de que a continuación vie- tos en negrita y subrayados.
ne una clase y es impres- Para comprobar el resultado
cindible para que la planti- debes escribir algún texto
lla funcione correctamente. utilizando esta clase.

Resumen de este capítulo

ciales, por ejemplo . El for-
mato se escribe inmedia-

tre los símbolos y . y después fijar con una se-

El tipo de letra se fija con

.

. color se determina con

. No olvides poner

Identificadores dos puntos.

un punto: .

digo debes escribir:

.
■

66 Nº 45
 Profesional Programación en HTML 11ª parte

JavaScript para formularios 66

Javascript o VB script 67
Consejos de programación 70
Control de presencia 70

40

Ejemplo de formulario

45
Al igual que los pequeños Curris se encargan de realizar
las tareas duras en Fraggle Rock, sencillos programas
insertados en tu página web te quitarán mucho trabajo.
¿Quieres saber cómo? Pues bienvenido a Javascript.

S
eguro que ya has oído
hablar de Java 01 , el
lenguaje de programa-
guaje que dará mayor f le-
xibilidad a tus páginas web.
te manden un formulario
con alguno o todos sus cam-
pos en blanco.
3 Antes de comenzar a tra-
bajar, y al igual que en las
entregas precedentes, debes
Lo mejor será que lo nom-
bres como
ses .
y pul-

ción de moda. Parece que Javascript guardar el fichero de la pá-

si eres programador y no
sabes Java te has quedado
anclado en el pasado.
para formularios
con un programa de ejem-
1 Empezarás cargando el fi-
chero de la plantilla. Para
ello, haz doble click sobre:
gina que vas a crear con un
nombre distinto al de la
plantilla (evitando así so-
4 En el codigo fuente
haz click justo en la se-
gunda fila, tras
Pues bien, esta entrega del plo, y la ayuda del Javascript, brescribirla). Para ello, haz
curso de HTML 02 estará vas a comprobar los datos click sobre y selec-
dedicada a ver cómo inser- de un formulario. Para ello ciona .
tar sencillos programas en te bastará con un formulario y pulsa C.
javascript 03 dentro de tu
página web. Estas aplica-
ciones te permitirán con-
bastante sencillo. Puedes en-
contrar más información so-
bre éstos en la octava en-
2 Dentro del editor haz
click sobre
pués en .
y des-
5 Introduce la siguiente lí-
nea de código:
trolar o iniciar determina- trega del curso sobre HTML En , pulsa y
das acciones, como por del número 43 de Computer selecciona la opción Ésta le indica al navegador
ejemplo la gestión de los Hoy. . A conti- que las siguientes líneas has-
datos introducidos dentro El siguiente programa veri- nuación haz click en ta pertenecen al
de un formulario incluido fica que el remitente ha in- y pincha en programa en Javascript. En
en tu página web. Un inte- troducido realmente todos . En el Bloc de notas, la castellano, se tra-
resante ejercicio para ini- los datos solicitados antes plantilla tendrá el siguiente duce por lenguaje e indica al
ciarte en Javascript, un len- de enviarlo, y así evitar que aspecto . navegador que las siguientes
66 Nº 46
 Profesional

▼
líneas de código están pro- El programa sigue el mismo los dos campos se encuentra y la ayuda del signo se
gramadas en . principio. En este caso pri- vacío, el programa ejecuta las añade a las variables de tex-
mero sólo aparece el si (con- instrucciones siguientes . A to un texto adicional:

6 Tras pulsar C tendrás

que continuar con los si-
guientes símbolos: . Es-
dicional) y la condición. Las
instrucciones vienen a con-
tinuación. La condición com-
continuación volverán a apa-
recer los paréntesis espe- ción
. La instruc-
acorta algo el tex-

tos enmarcan el código co- prueba si uno o dos de los

mo comentario 05 . Así campos están vacíos. A pri- ciales para que el programa to, mientras que se en-
podrás evitar que los nave- mera vista, el acceso a estos sepa dónde está el principio carga del cambio de párrafo.
gadores que no son capaces campos puede parecer algo y el fin.
de interpretar Javascript
muestren dicho código en la
pantalla.
complicado, porque Javas-
cript numera, comenzando
la cuenta por cero, los for- 10 Tras pulsar C, teclea
y presiona de nue-
13 Introduce las dos lí-
neas de código si-
guientes: .
mularios. vo la tecla C. Con esta instrucción el pro-

7 A continuación introdu-
ce las siguientes dos lí-
neas de código:
El primero de una página se
llama .
En este caso, se trata del for- 11 Escribe la siguiente lí-
nea de código:
grama comprueba el segun-
do campo y saca la conclu-
sión correspondiente. Si los
mulario ejemplo que vas a
programar. Dentro de éste En este caso, la variable dos campos están vacíos el
Con estas líneas comienza el está previsto que introduz- se complemen- mensaje que aparece es el si-
programa propiamente di- cas dos campos. El primero ta con algo de texto. Los dos guiente:
cho. En este caso, el código para el apellido lleva la in- se encargan de insertar
es una función 06 (Pág.68) . dicación . Para antes y después de un
Ésta se puede activar desde Javascript se trata, por tan- salto de línea 11 (Pág. 70) .En
cualquier punto de la página to, del primer elemento den- Javascript la instrucción Tal vez te estés preguntan-
haciendo una llamada a su tro del primer formulario. funciona igual que la etique- do dónde se encuentran, en
nombre . La llave Con se pasa al ta en HTML. Debes uti- estas dos líneas de código,
(para obtenerla presiona las segundo campo. En el ejem- lizar otra instrucción pa- los paréntesis especiales. Es-
teclas A y a la vez), sir- plo que se va a tratar a con- ra que el programa sepa cual tos no son necesarios, ya
ve para unir los apartados co- tinuación reservarás este de los campos de tu formu- que tras sólo hay una lí-
rrespondientes, como las fun- campo para el nombre. Para lario está vacío. nea más. El programa ya sa-
ciones o las sentencias IF comprobar que aparece tex-
07 (Pág. 68) . Al final del apar- to dentro de un campo de-
tado debe aparecer el cierre bes comparar su contenido, be qué es lo que falta y pue-
de paréntesis ( presiona
las teclas A y simultá-
en inglés , con el con-
tenido que viene a conti- 12 Seguidamente, intro-
duce la siguiente línea
de dejar un mensaje.

neamente). nuación . Las dos co-

millas se refieren a que no
de código: .
La primera fila ya te debe re- 14 Para ello teclea:
.

8 Vuelve a presionar la te-

cla C y escribe la si-
guiente línea de código:
hay texto. La primera parte
de la condición de este pro-
grama presenta el siguiente
sultar familiar. El programa
comprueba de nuevo si el
primer campo del formula-
significa en castella-
no “alarma o alerta”.
El navegador mostrará un
. La indi- aspecto . mensaje
cación señala al pro- O traducido: “si el valor del rio está vacío. Si es éste el ca- que indicará lo que falta por
grama que debe preparar primer elemento del primer so, entra en acción la se- introducir. Ahora le debes in-
una variable 08 (Pág. 64) de formulario está vacío”. Con gunda línea de código. En dicar al programa que, en el
nombre . En esto se cierra la primera con- este caso es al- caso de no estar relleno al-
programación, a esto se le dición parcial. En la prime- go más complejo. Con guno de los campos, detenga
llama “declarar una varia- ra línea aparecen, además, la ejecución del
ble”. Más adelante, y si que- dos barras verticales que formulario.
da alguno de los campos va- se obtienen presionando si-
cíos, con multáneamente las teclas A
conseguirás que en tu for- y 1. En este caso se trata de
mulario aparezca un men- una unión, es decir,; un ne-
saje de error. Las siguientes xo entre las dos condicio-
dos líneas de código son las nes. Estas dos barras repre- te otro lenguaje pensado pa- problema con VB Script.
que se encargarán de com- sentan un “o”. El programa ra desarrollar sencillos pro- Puedes aprender más sobre
probar los campos del for- lo interpreta de la siguiente gramas para páginas web. el VBA en los números 9, 11,
mulario. manera: si se cumple la pri- Este lenguaje se llama VB 13, 15, 17 y 19 de Computer
mera o la segunda condi- Script y ha sido desarrollado Hoy, dentro de esta misma

9 Introduce las siguientes

líneas de código
ción, el programa debe eje-
cutar las líneas de código
que en-
por Microsoft. VB Script es sección. Para los principian-

contrará a con Visual Basic, otro len- ro las aplicaciones escritas

En castellano es SI (con- continuación. Así, si ocurre guaje también desarrollado en VB Script sólo funcionan
dicional). A éste le siguen que el primer campo, el se- por la empresa Microsoft. con el navegador Internet Ex-
unas condiciones 09 (Pág. 68) gundo o los dos se encuen- Todos los programadores plorer de Microsoft. Si dese-
e instrucciones 10 (Pág. 68) . tran no contienen datos, en-
En la vida real no es muy dis- tenderás la segunda línea de Visual Basic o con VBA (Vi- cape Navigator puedan ver
tinto. Por ejemplo, si llueve código: sual Basic for Aplications, tus páginas sin problemas,
(condición), entonces me Esto significa:“si está vacío pequeña versión de VB in- te recomendamos que escri-
voy a la calle con un para- el segundo campo del pri-
mer formulario”. Si uno de
▼

guas (instrucción).
Nº 46 67
 Profesional Programación en HTML 11ª parte

15 16 cierre del comentario .

▼
Vuelve a pulsar C e Finalmente, vuelve a código propio y te alerte con
introduce el siguien- pulsar C y a conti- El símbolo evita un mensaje de error. Con la
te código: . nuación teclea y C. Con que Javascript interprete el linea cerrarás el
, que en castellano estos símbolos marcarás la final del comentario como programa.
se puede traducir por vol- parte del programa que se
ver, y por falso. Es ejecuta cuando uno de los
decir, el programa recibe la campos está vacío. A conti-
indicación “Vuelve al re- nuación falta poner otro
mitente e indícale que hay para cerrar toda la función.
algo incorrecto”. Esta noti-
ficación interrumpe la eje-
cución del formulario. 17 Ahora sólo te queda in-
sertar el símbolo de

18 Éste es el momento de
continuar con el for-
mulario propiamente dicho.
Selecciona la línea de código
e introduce
las siguientes líneas .
Con este código programa-
rás un sencillo formulario
con dos campos y un botón
para mandarlo. Se ha puesto
un ejemplo sencillo para
que veas las posibilidades
que ofrece la programación
en Javascript. Sólo te debe
resultar extraña la siguiente
línea de código .
Se trata de la llamada a una
función en Javascript que
vas a programar más ade-
lante. inicia la
función
en el momento que presio-
nes el botón , y a
continuación espera una
contestación. Si ésta es
, el formulario no se
sigue ejecutando. El visitan-
te de tu página tiene ahora
la posibilidad de seguir re-
llenando el formulario o am-
pliar los datos. La página es-
tá lista. El código fuente al
completo tiene el siguiente
aspecto: .

19 Haz click sobre

y en .
Cierra el Bloc de notas ha-
ciendo click sobre .

Resumen del capítulo

dentro de un comentario indicas al programa que se

ra desarrollar funciones sen- HTML y . No trucciones tiene que ir en- tiene que cumplir al menos
cillas y programas de aplica- olvides identificar dentro de tre estas llaves y . una de las dos que se han in-
Javascript el final del progra- dicado en la sentencia If pa-
ma como un comentario. Pa- Si ... entonces ra que se ejecute la instruc-
ra ello utiliza los caracteres La instrucción se utiliza ción correspondiente.
. . para comparar distintas con-
diciones. Si cumple una de Alarma
Comentarios Funciones ellas, el programa ejecuta mues-
Para iniciar un programa en una instrucción determinada.
nerar instrucciones del pro- Estas construcciones condi-
selo primero al navegador grama y después llamarlas cionales se pueden enlazar. texto que deberás haber in-
desde cualquier punto Si entre dos condiciones po- troducido previamente en el
Inserta las líneas de código de la página en HTML. Cada nes dos rayas verticales , código en javascript.
▼

68 Nº 46
 Profesional Programación en HTML, 12ª Parte

La prueba del navegador 62

Comprobar la ortografía 63
Búsqueda de errores 64
Descargar e instalar Netscape 66

Ilustración: Alexander Heb. Montaje: Computer Hoy.

Hoy en día cada vez más gente tiene su propia página
web. Sin embargo, algunas personas descuidan el
correcto funcionamiento de ésta. Si quieres que tu web
pase victoriosa por cualquier test, aquí te enseñamos
40
cómo solucionar los problemas más habituales.
i ya has leído las once ramente más estricto con el Si no tienes Netscape

S primeras entregas del

Curso de HTML 01 , estás
preparado para editar tu pri-
cumplimiento de las reglas,
lo que afecta al funciona-
miento y presenta de forma
Navigator, te lo puedes
bajar desde Internet. Po-
drás ver como hacerlo
Ejemplo de formulario

mera página. Pero cuidado: defectuosa páginas que fun- en el cuadro “Descargar
en cada página se suelen cionan perfectamente con e instalar Netscape” en
"colar" algunos errores. Tu Internet Explorer. la página 66.
atractiva página web no apa- En esta parte del curso
rece correctamente al abrir- aprenderás a depurar 04 tulos anteriores. Si ya no tie- consulta esta misma sección
la con el navegador 03 ,o en errores típicos, y a probar
La prueba nes este archivo y sus imá- en el número 39 para ver có-
el peor de los casos ni si- tus páginas antes de publi- del navegador genes correspondientes: mo crearlo y de donde ob-
quiera sale algo.Y aún peor car tu trabajo en Internet. A lo largo de este curso, se- tenerlas.
es esto otro: los programas Una regla básica es que de- guro que ya has probado tus
de acceso Internet Explorer
y Netscape Navigator fun-
cionan igual en su mayor
bes probar necesariamente
tus documentos HTML con
los dos navegadores más uti-
páginas con Internet Explo-
rer, pero ahora viene la prue-
ba de fuego. en la carpeta:
1 Para probar tus páginas
con Netscape Navigator,
lo primero que tienes que
parte. Eso es lo malo: ¡sólo lizados. Uno de ellos, Inter- ¿Funciona también todo con hacer es click en ,
en su mayor parte! net Explorer, ya está instala- Netscape Navigator? Para pulsa , selecciona
En algunos casos, Netsca- do en la mayoría de los confirmarlo, utiliza el archi- y pin-
pe Navigator se muestra cla- ordenadores con Windows. vo de los capí- cha en .
62 Nº 47
 Profesional

▼
Una vez abierto Netsca- sión, ten especial cuidado girás las faltas que localices
pe Navigator, haz click con los siguientes puntos: en el texto fuente 06 (Pág.64)
en y . ¿Tienen todas las tablas el Hazlo de esta forma:
aspecto que deben tener?

3
en
En la ventana que se abri-
rá , haz click
.
¿Todos los datos están co-
rrectos?
¿Se encuentran bien ajus-
1 Abre haciendo doble
click en la carpeta:

tados los marcos 05 ?

4 Con ello se mostrará el

cuadro de diálogo “Abrir”
¿Las imágenes están inser-
tadas en el lugar adecuado?
2 Busca el archivo que de-
sees probar, por ejemplo
. Haz doble click
en él para abrirlo.

3 Selecciona con el ratón

el apartado que desees
revisar, por ejemplo

Haz click en y elige de la Si aparece algún error, es- estos casos se esconde un Pídele a algún conocido
lista: cribe el nombre del archivo error.
en una hoja e investiga des-
pués la causa. Encontrarás
más información, en el apar-
tado “Búsqueda de errores” Imprime cada documento Escribe un vínculo con tu
en la página 64.

la carpeta .
8 Cuando hayas terminado
de probar todas las pági-
nas, cierra Netscape Navi-
gina en la red, comprueba Así le das al visitante de tu
enseguida los errores. Mira web la oportunidad de que te
la página de nuevo dos días informe sobre los posibles
Haz click en ella para abrir- gator haciendo click en
la. Si no encuentras ense- y pulsando .
guida este campo, haz click
en Comprobar
hasta que aparezca.
la ortografía
5 Haz doble click en

pulsa
y después
Al escribir archivos en
HTML se “cuelan” habitual-
mente faltas de ortografía.

dor, pero en el servidor

En la pantalla aparecerá En el laberinto de identifi-
página cadores y texto, éstas se ha-
na bajo Linux.

Confirma también las re-

otras páginas ajenas. En

Aquí todo tiene un aspecto cen difíciles de descubrir. El comprobación habitual-

excelente. siguiente truco es eficaz pa-
ra encontrar errores: utiliza
Repite los pasos 2 a 5
7 con todos los archivos
HTML que has escrito du-
simplemente un procesador
de texto, por ejemplo Mi-
crosoft Word, como ayuda
pueden ser distintas o in-

la Red.
▲

rante este curso. En la revi- ortográfica. Después corre-

Nº 47 63
Profesional Programación en HTML, 12ª Parte

4
▼
Haz click en y
pulsa .

5 Deja Internet Explorer

abierto e inicia tu pro-
cesador de textos, por ejem-
plo Word 2000, para ello pul-
sa , pincha
y selecci ona .

6
na
En Word, haz click en el
menú
.
y seleccio-

7 El texto se puede ver en

pantalla:

8 Inicia la revisión orto-

gráfica pulsando 7 , o
pinchando en y
Introduce una
línea diagonal
seleccionando antes de la se-
. Si te gunda , de
encuentras con una falta, modo que que-
apunta la posición del texto de así .
correspondiente en un pa- Pero en Netscape Navigator ya ha aparecido el culpable: Hecho esto, el texto apare-
pel y después corrígela en no se ve nada: se trata de un hipervínculo cerá correctamente:
el texto fuente. El motivo es que aquí introducido incorrectamen-
te. En este punto

9 Cuando ya hayas revisa-

do la ortografía de tu pá-
gina, y tras anotar los erro-
falta un .

res, haz doble click en:

A menudo aparece este
error
De repente, todo está en le-
y abrirás el editor. Carga el falta el identificador de cie- tra cursiva 07 , aunque sólo
código fuente correspon- rre de la tabla. Lo que ten- la palabra:
diente y corrige los errores drás que hacer en este caso
manteniendo abierto Word es introducir el texto fuen-
por si necesitaras asegurar- te correspondiente. Sitúate debería aparecer en este for-
te de alguno. en esa posición e inserta
. el tag has olvidado una línea

10 Cuando la corrección
haya acabado y las fal-
tas estén corregidas, cierra
Si ves que parte del texto
tiene este aspecto:
diagonal antes del identifi-
cador de cierre.
Echando un vistazo al códi-
Word, Internet Explorer y el go fuente la podrás ver:
Editor haciendo click en
en cada una de las ventanas.

Búsqueda de errores
Casi más difícil que en-
contrar faltas de ortografía
es descubrir etiquetas erró-
neas.Y a menudo las conse-
cuencias de las faltas no se
descubren enseguida. A con- Examen general terios distintos en lo que se do con los identificadores que
tinuación verás algunos pro- Antes de insertar páginas refiere a la presentación del no sean de cierre, es decir,
blemas habituales de la pro- HTML en Internet, tienes que texto fuente. Así, Netscape aquellos que no llevan línea
gramación en HTML y su comprobarlas sin falta con los Navigator evita hacer el “tra- diagonal .
solución: navegadores más utilizados. bajo” si hay errores por des-
Has programado una ta- En cada caso, prueba las pá- cuido, mientras que Explorer Comprobar
bla que tiene el siguiente as- ginas con los navegadores In- puede presentar las páginas
pecto en el navegador In- ternet Explorer y Netscape Na- a pesar de todo. los hipervínculos
ternet Explorer: vigator. Cada link 08 debe funcionar
Encontrar correctamente. Para ello com-
Dos navegadores, fuentes de error prueba regularmente las re-
dos pruebas ferencias cruzadas dentro de
Si te encuentras con un fallo, tus propias páginas y los hi-
Internet Explorer y Netscape comprueba el texto fuente del pervínculos con otras webs
Navigator tienen en parte cri- archivo. Ten cuidado sobre to- de Internet.
▲

64 Nº 47
 Profesional Programación en HTML, 12ª Parte

El siguiente fallo suele estilo, se ha colocado un sig- También los programado- nal de modo que el texto siguiendo unos sencillos y
confundir a los programa- no igual: res de javascript 10 (Pág.64) fuente tenga este aspecto: rápidos pasos.
dores que hacen uso de las se ponen a sí mismos tram- Ten en cuenta que, aunque
CSS 09 (Pág.64) en sus crea- pas (accidentalmente, por aquí se han planteado casos
ciones. Una página aparece supuesto) de vez en cuando. concretos, siguiendo los
correctamente en Explorer: En este caso Explorer tam- consejos dados, así como
poco se inmuta por el pro- Con estos errores típicos y aplicando las soluciones de
Explorer acepta este carác- blema. El sencillo programa sus soluciones, Computer éstos a otros problemas, ten-
ter, sin embargo Navigator de control de presencia de Hoy te sumerge en el mun- drás casi ganada la guerra
es bastante más estricto y no tu web en frames (consulta do de la programación en contra los “duendes” que
muestra las plantillas de for- esta misma sección en el nº HTML. Ahora ya eres casi un intenten colarse en tu web.
mato con este tipo de error. 46) funciona sin problemas profesional de HTML y pue- La siguiente y última parte
des no sólo programar, sino del Curso de HTML tratará
también encontrar errores sobre cuestiones jurídicas
si bien en Netscape Naviga- con precisión y eliminarlos en y sobre Internet.
tor sale sin los formatos pre- Y es que la Red
vistos: no es, en contra
La causa de ello está en un de la opinión ma-
descuido. En lugar de los dos yoritaria, un espa-
puntos “:” antes de la asig- cio sin leyes, don-
nación de una plantilla de de cualquiera
y elimina en este caso los puede violar las le-
marcos: gislaciones de los
Sin embargo en Netscape países con la más
Navigator se mantienen: absoluta impuni-
Internet Explorer y Netscape Neoplanet 🡪´ destaca por El error está en un lugar in- dad. Pese a que to-
Navigator son, con diferen- su diseño, ya que haciendo sospechado. En los caracte- davía quedan bas-
cia, los navegadores más uti- uso de las “skins” tan de mo- res que indican que se trata tantes asuntos
lizados en Internet. Pero es- da, permite que el navegador de un comentario en HTML, pendientes de ser
to no significa que sean los adopte el aspecto que dese- la indicación al navegador legislados, la justi-
únicos. Cada vez aparecen es. de que éste se cierra no cia está avanzando
más navegadores que pre- Por su parte, Broadcast 🡪 está completa a pasos agigantados para evi-
tenden destacar por ser más te ofrece la posibilidad de di- tar que Internet se convier-
rápidos, por alguna funcio- vidir la ventana, mostrándo- ta en la autopista del delito.
nalidad especial e, incluso, te múltiples páginas simul-
por ofrecer un un bonito di- táneamente.
seño. Así puedes encontrar Y éstos son sólo una mínima Netscape Navigator se ➜
por ejemplo el navegador muestra de todos los nave- “tropieza” con el proble-
Opera 🡪 v , que ocupa muy gadores que puedes encon- ma y ejecuta el programa, 🡪[Link]
poco espacio en tu disco du- trar. Dando “una vuelta” por mientras que a Internet 🡪´[Link]
ro y ofrece una navegación la Red descubrirás muchos Explorer “le da igual”.
bastante rápida. más. Elimina el error insertan-
do una doble línea diago-

Aunque cada día es más nor-

mal encontrar CD-ROMs de co-
nexión a Internet en los cuales
4 La siguiente web te pre-
senta las opciones que has
elegido para la descarga. Si
8 En , selec-
ciona donde deseas guar-
darlo y pulsa .
está preparando. En breve es-
tás desaparecerán y, tras mos-
trarse una ventana de fondo
les o interesantes y, seguida-
mente, haz click en .

se suele encontrar una copia

de este navegador, también
son correctas, pulsa .

9 Con ello comenzará el pro-

azul, aparecerá una ventana
dándote la bienvenida al pro- 15 Lo siguiente es indi-
carle al programa dón-
puedes conseguirlo a través de
la Red de redes.
Si esto es lo que quieres, sigue
5 Desplázate hacia abajo en
la siguiente web y busca:
ceso de descarga de Nets-
cape Comunicator a tu PC co-
mo se te indica en la ventana
ceso de instalación.
Para proceder, haz click en
.
de deseas que se muestre en
el menú inicio. Conserva la op-
ción predeterminada y pulsa el
estos pasos: botón .

1 Inicia una conexión a In-

ternet del modo habitual y
Una vez encontrado deberás
hacer click en él.
En ella asegúrate de tener sin
seleccionar la siguiente opción: 12 A continuación se te in-
formará sobre los tér-
minos de la licencia de uso. 16 En
pincha en pa-
,

escribe 🡪➃ . Revísalos y, si estás de acuer- ra realizar la instalación.

2 Con ello se abrirá la pági-

6 En la siguiente ¡y última!
página tendrás que buscar 10 Finalizada la descarga,
la ventana cambiará,
do, pulsa .
17 Cuando ésta haya fina-

na principal de Netscape
en español. En ella pulsa:
y hacer click en éste enlace , indicán-
dotelo. Cuando esto ocurra,
haz click en , para iniciar
13 En la siguiente venta-
na, deja las opciones
que se te ofrecen por defecto
lizado, se te pregunta-
rá si quieres leer el archivo de
texto README. Si no lo lees

3 En la página que se abrirá 7

tana
En unos segundos se abri-
rá automáticamente la ven-
.
la instalación.

11 Durante unos segun-

y pulsa

14
.
Ahora, Netscape te
ahora puedes hacerlo mas ade-
lante, así que pulsa .

busca el siguiente link:

él con el ratón.
y pincha en
En ella marca la opción

pulsa .
y
dos, aparecerán en pan-
talla unos mensajes informán-
dote de que la instalación se
pregunta por varias op-
ciones de configuración. Se-
lecciona las que te resulten úti-
18 Y ya está, haz click en

ordenador.
y reinicia tu
■

66 Nº 47
 Profesional Programación en HTML 11ª parte

20
▼
Para visualizar el re- pos correctamente, no se vés de la programación en res y que además no funcio-
sultado haz doble mostrará el mensaje de error. HTML y Javascript. En la si- ne correctamente. La im-
click sobre el icono En la ventana no hay cambios guiente podrás ver cómo presión que da es muy ne-
apreciables a excepción de la testear 12 los documentos gativa.
dirección. Con la entrada de en HTML y cómo encontrar En la última entrega cono-
unos datos, por ejemplo y depurar 13 los errores cerás los aspectos legales de
y más comunes, ya que no hay las páginas web, evitando así
que encontrarás en tu Es- nada más desagradable que el riesgo de cometer sin que-
critorio. Seguidamente haz una página plagada de erro- rer algún tipo de delito.
doble click sobre . en la línea de dirección, tras
hacer click sobre
En Internet Explorer aparece .
aparecerá . Como podrás comprobar, en
principio este ejemplo no
realiza ninguna operación
con los datos. Si quieres
aprender como gestionarlos, al principio
puedes ver otro ejemplo en
esta misma sección, en el nú-
mero 43 de Computer Hoy.

22 Ya puedes cerrar In-

ternet Explorer con
un click sobre .

Y con esta entrega finaliza

Si haces click sobre “enviar” este apasionante viaje a tra- Muchos usuarios simple-
dejando uno de los
campos sin rellenar,
aparecerá el si-
guiente mensaje . vascript. Pero no olvides
Con un click sobre
cerrarás la
ventana con el men-
saje de error. Pero, si nes en Javascript.
rellenas los dos cam-

Algunos usuarios pueden in- miliares las dos primeras lí- en la parte superior no es Pero esta página sólo apare-
sertar un enlace a tu página, neas de código. En la tercera igual a 0 entonces ejecuta la ce unos instantes, ya que
pero a veces sólo permiten línea vuelves a encontrar un siguiente acción”. Más cla- después, tras una breve in-
que ésta aparezca dentro de comando . ro: “si encuentras un frame, terrupción, la web con el pro-
un frame 14 haciendo que Con la instrucción: que por cierto aquí no pinta grama en Javascript aparece
permanezcan los demás ele- nada (ya que tú no has ins- sola en pantalla .
mentos de su página. Así, los el programa comprueba si en talado ninguno), pues haz al-
visitantes creen que tu web es la ventana del navegador go”. Esta acción se encuen-
un elemento más de una pá- aparecen frames. La aplica- tra en la misma línea de
gina extraña. Un visitante de ción utiliza para ello un con- código. se puede
tu web, por ejemplo, no pue- tador que está en todos los traducir por ubicación e
de ver tu URL 15 , lo que le navegadores. Este contador identifica la URL de la pági-
impide recordar tu dirección. registra na que se encuentra en la ba-
Esto tiene solución. Un senci- el número de frames que se rra de direcciones, como por
llo programa en Javascript que encuentran abiertos en ese ejemplo:
debes insertar en el docu- preciso instante. se
mento, concretamente entre puede traducir al castellano Si tu página se inserta dentro Esta aplicación sólo la pue-
las tags 16 y por “longitud”. Es decir, de- de un frame de otra web, aquí des utilizar si no tienes fra-
. termina la cantidad de aparecerá la dirección de la pá- mes en tu página. En caso
Escribe las siguientes líneas que se encuentran gina. Para cambiar esta direc- contrario el resultado no se-
de código: . en la parte superior( ). ción, entra en acción rá el deseado, ya que tam-
Si has leído esta entrega del Los dos caracteres indi- al modificar la bién los cerrará.
curso ya te deben resultar fa- can desigualdad. Toda la lí- primera dirección por tu
nea se puede propia dirección dentro del
traducir por: frame. Esto es lo que hace
“si el número esta línea de código. En ca-
que da la su- so de que se dé esta cir-
ma de todos cunstancia, primero podrás
los frames que comprobar que la página se
se encuentran carga dentro de un frame .
■

70 Nº 46
 Profesional Programación en HTML, 13ª Parte

Propiedad intelectual 54
Protección para programas 55
No pongas links a
páginas piratas 55
No copies enlaces sin más 55
Cuidado con los frames 56
¡Sin faltar al respeto! 56
Meta Tags 57

Pero, desgraciadamente, en
la Red resulta bastante ha-
bitual que no se respeten es-
tos derechos. En especial no
se respetan con los archivos
creados en formato MP3
03 (Pág.56) . Estas canciones
digitalizadas 04(Pág.56) se
pueden bajar de muchas pá-
ginas web.Y en muchos ca-
sos se trata de obras sobre
las que existen derechos de
autor. Entre éstas, puedes en-
contrar tanto los temas mu-
sicales de máxima actuali-
dad, como piezas clásicas
interpretadas por una or-
questa filarmónica.

Respeta siempre los

derechos de autor
Si te compras un compac-
to puedes hacer con total li-
bertad copias en MP3 para
tu uso particular sin ningún
problema (recuerda que só-
lo para uso exclusivamente
PARTICULAR). Pero si tu in-
tención es utilizar estas co-
pias para publicarlas en In-
ternet y así permitir a los
Foto: Cordon Press. Montaje: Computer Hoy.

visitantes de tu página que

se las bajen libremente, en-
tonces estás lesionando los
derechos del autor.
Esto también vale para un
simple fragmento. No hagas
caso del rumor que dice que
se pueden colgar en Inter-
net tres compases o siete se-

¡Pero si yo no he hecho nada! ¿Por qué me encierran? Si no te

apetece acabar así, lo mejor será que leas de arriba a abajo la
decimotercera y última entrega de este curso sobre programación
en HTML. Luego no digas que no te avisamos.
n las doce entregas an- con programar y redactar los Propiedad
E teriores del curso de
HTML 01 (Pág.56) de
Computer Hoy has dado un
textos. El día a día en la Red
también te enfrenta con
cuestiones legales que no
intelectual
La propiedad intelectual
repaso a la construcción de puedes obviar. En esta última también tiene validez en In-
páginas para que funcionen entrega del curso vas a co- ternet y garantiza al autor,
sin problemas y tengan un as- nocer todo lo que hay que te- artista o músico los dere-
pecto profesional. ner en cuenta a la hora de pu- chos sobre su obra, permi-
Así entrarás con buen pie blicar una página en Internet tiéndole decidir dónde y en
en la World Wide Web y así no te buscarás ningún qué forma se publican sus
02 (Pág.56) . Pero no basta sólo problema. textos, libros, etcétera
54 Nº 48
 Profesional

gundos de una pieza musi- blicar en la Red sin tener

cal sin vulnenar los dere- que pedir permiso a nadie .
chos de autor. La única ex- Pero evita copiar sin más ba-
cepción es que el autor te ses de datos completas o
permita distribuir sus tra- parte de ellas.
bajos desde tu página web. También los documentos
Esto también es válido pa- públicos, como sentencias
ra los dibujos y los textos. judiciales, no están sujetos
Así, por ejemplo, te puedes a la propiedad intelectual.
buscar problemas si decides Puedes publicar estos tex-
insertar en tu homepage tos en la Red, pero debes in-
05 (Pág.56) un artículo de dicar su fuente.
otra publicación.
Ni los fans están a salvo de Protección
los abogados de las estrellas
de televisión y del mundo para programas
musical cuando deciden pu- A la hora de colgar pro-
blicar, sin su permiso, sus gramas en Internet para que
piezas en la red. Si tienes in- los visitantes de tu página
tención de insertar en tu web puedan descargarlos
web imágenes de persona- 06 (Pág.57) , pon especial cui-
jes o escenas de tu serie fa- dado. Distribuir copias pi- Aviso a los fans. Ni con la mejor de las intenciones está permitido reproducir material
vorita, debes saber que esta ratas de programas en la gráfico o sonoro de tus ídolos. Grupos como Oasis ya han recurrido a los tribunales.
práctica no es del agrado de Red es un delito que está pe-
muchos productores. nado, incluso aunque no se- disponer de links 08 (Pág.57) No copies puede considerar como una
Grupos musicales como pas que la aplicación en a otras páginas. Pero, cuida- base de datos y está prohi-
Oasis, así como la cadena de cuestión es una copia ilegal do, algunos enlaces te pue- enlaces sin más bido copiarlas. Esto es de-
televisión americana Fox, (recuerda que el descono- den crear problemas, en es- No te dediques a copiar bido a que las bases de da-
han ganado recientemente cimiento de las leyes no exi- pecial si llevan a páginas listas de enlaces de otra pá- tos son costosas, tanto su
pleitos contra usuarios que me de su cumplimiento). ilegales. Un enlace a una de gina, ya que, dependiendo creación como su manteni-
incluyeron en sus páginas, Cuidado con las copias de éstas también te puede cau- de la longitud de éstas, se miento y actualización.
sin su consentimiento, imá- distribución gratuita. Inclu- sar problemas. Lo mismo
genes o canciones de éstos. so los programas sharewa- ocurre cuando los enlaces
Si quieres usar algún do- re 07 (Pág.57) que están a li- se dirigen a páginas que
cumento de este tipo, te re- bre disposición de los contienen copias ilegales de
comendamos que te pongas usuarios, como Internet Ex- ficheros MP3 o material que
en contacto con el autor pa- plorer, están sujetos a de- contraviene cualquier nor-
ra que te dé su consenti- terminadas reglas. Éstas te ma legal (pedofilia, racismo,
miento. Sólo cuando lo ob- indican dónde y cómo se etcétera). Un enlace ilegal
tengas podrás usarlos. pueden distribuir. Repasa no tiene porque significar
con detenimiento la licen- una condena, pero las posi-
cia del contrato de cada uno bilidades de que se abra un
En caso de duda, de estos. Si dudas, ponte en procedimiento judicial con-
no reproduzcas nada contacto con el fabricante tra ti serán mayores. Aunque se diga que la co- asuntos claramente ilegales
del programa. misión de ilícitos en Inter- (racismo, pedofilia, terro-
Los documentos que con- net apenas está regulada, rismo, etc...).
tienen datos de caracter ge-
La mayoría de los
neral (público), como por
No pongas links links son legales todo cierto, ya que unas
ejemplo los números de la a páginas piratas A excepción de los enlaces normas de carácter sustan-
Lotería Primitiva o los índi- Una buena página web que se han descrito en los tivo son aplicables a la Red.
ces bursátiles, se pueden pu- también se caracteriza por apartados precedentes, pue- El asesor legal de Hobby
des insertar en tu página to- Press lo reafirma con el
dos los links que te dé la ga- ejemplo de la vulneración
na. Te recomendamos, no de los derechos de autor:
obstante, que indiques quién “La reproducción de conte- hacen con publicidad”.
es el autor de aquellas pági- nidos (música, imágenes o
nas cuyo contenido te resul- programas) sin autorización
te dudoso.Y recuerda, en ca- expresa de su titular supo-
so de duda, es mejor un
enlace menos que un pro- rechos y puede dar lugar a
blema más. acciones judiciales. Aun si
Tampoco es lícito el in- el material no está someti-
sertar un comentario que do a esa protección es re-
falte al respeto a una terce- comendable citar la fuente”. imágenes, marca...).
ra persona. Por ejemplo, si Con respecto al asunto de Si eres objeto de una recla-
nombras un enlace a la pá- los links que enlazan con mación, Frühbeck aconseja
gina de un compañero de páginas desde las que sea acudir a un abogado que
trabajo como la web del posible obtener programas, evalúe el alcance de la in-
“idiota del mes”, puedes te- canciones, etcétera, sin la fracción, la corrijas e in-
El software de libre distribución no puede ser distribuido a ner problemas legales ¡ade- autorización del titular del- tentes llegar a un acuerdo
la ligera. revisa los los terminos de la licencia de distribu- más de los que surjan en la registro, “se podría enten- amistoso.
▲

ción antes de ofrecérselo a quienes se conecten a tu web. relación personal!

Nº 48 55
 Profesional Programación en HTML, 13ª Parte

▼
En la página 70 del núme-
ro 46 de Computer Hoy,
dentro de la undécima en-
trega del curso de HTML, en
la que viste una introduc-
ción a Javascript, puedes ver
cómo conseguir que tu pá-
gina no aparezca dentro del
frame de otra.

¡Sin faltar
al respeto!
Por desgracia, en Internet
cada vez es más habitual en-
contrar páginas ofensivas
hacia terceras personas. Pe-
ro cuidado, la Ley también
es válida en Internet. Es de-
cir, si faltas al respeto a ter-
ceras personas puede que
tengas que rendir cuentas
La inclusión de páginas web de otras personas o empresas dentro de un marco de la tuya ante la Justicia.
puede acarrearte serios problemas si no queda claro el origen de las primeras. No insultes ni ofendas a
terceras personas, aso-
Cuidado frames dividen sus páginas mayor tamaño contiene otra ciaciones o [Link]-
con los frames en varias zonas. Normal- página que puede no ser poco permitas que a través
Por si no lo sabías, los mente hay un marco que propia. No todos los dise- de tu página, como por
marcos 09 son un asunto contiene un índice cuyo fin ñadores de páginas web ejemplo dentro de un libro
peliagudo. El problema es- es facilitar la visita de la pá- aceptan esta práctica. de visitas, otros hagan lo
triba en que los usuarios de gina. El segundo frame de De todas formas, la expe- mismo.
riencia señala que la inser-
ción dentro de un frame de
contenidos ajenos puede Un insulto te puede
acabar acarreándote pro- ocasionar problemas
blemas si no indicas el ori-
gen de la página. Esto puede ser muy grave
Por razones de precaución, si la persona a la que se ha-
nuestro consejo es que evi- ce referencia se puede iden-
tes insertar páginas ajenas tificar con facilidad. De na-
dentro de un frame. Con da te va a servir que acortes,
es muy fina: “No hay una independencia de los aspec- por ejemplo, el nombre de
tos legales, está claro que a este individuo. En localida-
nadie le resulta agradable es- des pequeñas sólo hacen fal-
tar peleándose con los mar- ta las iniciales de un nom-
cos. Por ejemplo, dentro de bre para identificar a una
un frame no se puede ver la persona.
dirección de la página que se Y cuidado con las imáge-
está visitando.Y si, además, nes que van acompañadas
tienes un monitor pequeño, de un texto denigrante. Es-
el marco se come mucho es- tá prohibido publicar foto-
pacio. Pero si aún así deseas grafias de terceras perso-
insertar una página ajena nas, aunque omitas su
dentro de un frame, te acon- nombre y tapes sus ojos con
senjamos que antes te pon- una banda oscura. Sólo ha-
gas en contacto con el due- ce falta que una persona sea
ño de la página para pedirle capaz de reconocer a ese in-
el correspondiente permiso. dividuo para que puedas te-

Si haces algo así estarás cometiendo dos delitos: injuria

y difusión de datos personales.
56 Nº 48
 Profesional

▼
ner problemas legales. Hay
muchas personas a las que
se les identifica muy fácil-
mente por su vestimenta o
por determinadas facciones
de su cara. También el en-
torno físico o familiar pue-
den ser un punto de re-
ferencia para identificar a
una persona.

Al expresar tus
opiniones ten cuidado
Si te dedicas a publicar
textos en Internet y te ajus-
tas a la realidad no vas a te-
ner nunca problemas. Esto
no quiere decir que no pue-
das dar tu opinión. Pero cui-
dado, no te excedas.
Las direcciones de email
privadas también están pro-
tegidas por la ley. No se pue-
den publicar sin el permiso
de su titular.
Quizá pueda resultar tentador copiar sin más un listado de enlaces de otra página web. Sin
embargo, no lo será tanto cuando descubras que esta práctica es totalmente ilegal, ya que,
Meta Tags en el mejor de los casos, vulnera los derechos de autor. Además, si contiene datos de tipo
Recientemente ha surgido personal, estarás enfrentándote a la ley LORTAD (regulación del tratamiento de datos).
una polémica con la bús-
queda de páginas en Inter- te recomendamos que te
net. Algunos usuarios utili-
zan el truco de insertans
pongas en contacto con el
titular de la web. Lo más gra-
! Asociación Internautas
nombres comerciales y mar- ve que puede pasar es que
cas de empresas conocidas te diga que [Link]én pue-
en los Meta Tags. Con ello se des llevarte una agradable
consigue que el resultado sorpresa porque al titular de
de una búsqueda incluya, la web le parezca genial que
además de las páginas de la desees publicar sus conte-
empresa titular del nombre, nidos dentro de tu página.
las páginas de aquellos que
insertan este nombre en un Pon cuidado y no
campo Meta. de Internautas se insiste en etcétera... en una web, el
Tampoco se ajusta a dere- tendrás problemas que lo que es delito en la responsable de la Aso-
cho el truco de incluir en la “vida real” también lo es en ciación considera “lógico y
página de una empresa el Y esto es todo, como po-
nombre comercial de la drás comprobar, la mayoría que Internet aún no está re- información, tal como pasa
competencia. En especial de las cuestiones legales son gulado. Así, hay actividades en los medios de comuni-
cuando el fin de esta prác- similares a las que se apli- que no son ilegales, pero cación tradicionales.
tica sea que aparezca el can en la vida real. Lo mejor que los internautas consi- Con respecto al uso de fi-
nombre de la empresa cuan- es contar con el mejor alia- deran contrarias a la convi- cheros musicales MP3 este
do se está buscando la pá- do en estos casos (el senti- vencia: “Es el caso del asunto no está nada claro...
gina de la competencia. En do común) y, en caso de du- spamming, o envío masivo en estos momentos hay va-
estos casos se suele acabar da, actuar con cuidado. de correos electrónicos no rios contenciosos abiertos
ante los tribunales. Siguiendo esta máxima no solicitados. Tampoco es éti- en EEUU”.
Ahora ya sabes todo lo tendrás problemas. co, y posiblemente tampo- Para Victor Domingo, “la
que no puedes insertar en Pues ya se puede decir co legal, que se introduzcan mayoría de los internautas
tu página web. La lista de que eres un auténtico web- en la Red los datos perso- se suele ajustar a la legali-
prohibiciones parece más master, formado en todos nales. La Agencia de Pro- dad vigente y cuando algo
grave de lo que realmente los aspectos necesarios pa- tección de Datos tiene no está claro si es legal o
es. Si te ciñes a tu propio tra- ra desarrollar tu web per- abiertos varios expedientes ilegal se atiende a la Neti-
bajo y en tu página sólo in- sonal (o quien sabe si, in- en este sentido”, dice Do- queta, normas que rigen las
sertas fotos y textos pro- cluso, dedicarte a ello mingo. relaciones en la Red, y al
pios, no vas a tener ningún profesionalmente).
problema. Además, resulta En Computer Hoy espe- incitan al racismo, terroris- go, no todo el mundo se
más original crear tus pro- ramos que hayas disfrutado mo o pedofilia, los respon- atiene a estas normas y es
pios contenidos en vez de con este curso y que pases
recurrir a los de los demás. a formar parte del medio de en que no es “lógico” crear nir los servicios jurídicos
Pero si deseas insertar comunicación más impor- enlaces a este tipo de webs tradicionales”.
■

contenidos de otras páginas, tante del mundo: Internet.

Nº 48 57