You are on page 1of 51

Profesional Programación en HTML, 1ª Parte

ÍNDICE DEL CURSO


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º 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
Conceptos básicos del estilo en cascada Nº 53
Para
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

L
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”:
Web que visitamos en la tenidos en las páginas. a poco aprenderemos a dar utilizando hipervíncu-
red Internet pertenecen Aprender el lenguaje formato a los elementos y los para “navegar” a tra-
a las empresas, que utilizan HTML no es demasiado di- complicaremos las cosas 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
Programación en HTML, 1ª Parte 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
aparece la ventana:
y
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 elementos son iden- Estos programas permi-
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

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.
del sistema.

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
La forma más sencilla de problema hay que conocer Aunque escuches una y otra adecuado para mostrar di- consiste en varias pági-
crear una página Web es el lenguaje HTML y optimi- vez la frase “programar en ferentes tipos de conteni- nas conectadas entre sí.
La página de inicio es la
utilizar un editor especial de zar las instrucciones de las 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. lenguaje de programación. La idea básica de funciona-
ceso a las demás.
mas permiten colocar fácil- En Computer Hoy hemos En HTML no se pueden cre- miento de este lenguaje co-
mente los textos e imá- preferido centrarnos en el ar Bucles 07(Pág. 68) 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- En esa época se estaba em- mo enlaces. Son re-
genera el código HTML au- to te permitirá aprender la bles 09 (Pág. 70) . 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 WYSIWYG Se suelen distinguir por
Los programas económicos cientes. Si después de este troducidos por el usuario. 10 (Pág. 70) . tener un color distinto al
suelen ser poco eficaces y curso dominas el HTML, En HTML sólo se pueden in- En aquella época, cuando se resto del texto, estar su-
los más caros tienen un ma- podrás utilizar cualquier sertar datos a través de los quería presentar una pala- brayados o representa-
nejo muy complicado. editor sin problemas. Ade- campos de un formulario. bra determinada en cursiva, dos por una imagen. Al
Además, muchos de estos más, tendrás una gran ven- Pero la evaluación de esta se colocaba delante y detrás hacer click sobre ellos,
editores crean un código taja: dispondrás de amplios información se debe reali- de la palabra una orden que el navegador carga la
HTML poco depurado. En conocimientos sobre el len- zar posteriormente con un indicaba a la impresora: página correspondiente.
muchos casos se repiten guaje HTML. Esto te per- programa adicional. “escribe el siguiente texto Los hipervínculos per-
instrucciones que no sirven mitirá optimizar el funcio- La realidad es que el HTML en cursiva”. En HTML se si- miten que el usuario se-
para nada y ralentizan el namiento de tu páginas in- es un lenguaje para pre- gue el mismo principio de leccione la información
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. ra es sencilla y resulta muy 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
05 Escritorio . nuevo el texto HTML de la
Es la superficie de tra- Si no aparece so- página:
bajo de Windows 95 y bre fondo azul, haz click con
98. En ella podemos de- en botón izquierdo en la
jar todo tipo de ficheros
parte derecha, junto a la “o”
y aplicaciones para que
estén accesibles en
y sin soltar el botón, des-
cualquier momento. En plaza el puntero hacia la iz-
el escritorio se encuen- quierda hasta que toda la pa-
tran los iconos más im- labra aparezca seleccionada
portantes del sistema sobre fondo azul .Y Si se compara el texto
como el de Mi PC, la Pa- escribe el nombre del ar- HTML con la página Web,
pelera de reciclaje o Mis chivo . Primero haz click sobre la Haz click en y nos damos cuenta que los
documentos. El escrito- Para guardar el documen- pestaña . en la casilla únicos elementos que se re-
rio se puede personali- to tienes que pulsar sobre aparecerá el nombre piten en ambos sitios son:
zar a nuestro gusto con
colores, gráficos o in-
el botón . La exten-
sión 11 (Pág. 70) del archivo 5 Haz click en la carpeta .
.
y

cluso sonidos y anima-


ciones. También puede
ser configurado para
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
verse como si fuese una
página Web. 8 Cierra el editor hacien-
do click en .
Web.
y signi-
fican “cabeza” y “cuerpo”.
06 Identificador Ver nuestra prime- Si no consigues ver esta Con ellos se divide el có-
El lenguaje HTML se es-
cribe utilizando identifi-
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
cadores. Los identifica-
dores son órdenes que
damos al navegador pa- 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-
ra que muestre la página
Web tal y como desea-
mos. Cada identificador
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
es una orden y pueden cuentra en la página ante- muy sencilla. Pero en los se puede definir
indicar atributos del tex- rior. próximos capítulos tus pá- el título de la página para
to, posición de imáge- ginas irán tomando más co- que posteriormente este
nes, hipervínculos o
cualquier otra propiedad
de la página.
2 Haz click en las opcio-
nes y .
lorido. aparezca en la barra supe-
rior del navegador.
En la sección se
07 Bucles
En programación se en-
3 En el siguiente cuadro
de diálogo 12 (Pág. 70)
tendrás que pulsar el botón.
suelen introducir los textos
y las imágenes que se mos-
trarán en el navegador.
tiende por bucle una se- Si te fijas un poco en el
cuencia de instruccio-
nes que se repite varias
veces. Pero las instruc-
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-
ciones sólo se introdu- carpeta donde se encuentra tre paréntesis de flecha apa-
cen una vez en el código
el archivo. recen por duplicado.
de programa. El número
de repeticiones depende
del valor de una variable
que se llama contador. ! Navegadores para diseñar HTML
Cada vez que se ejecuta
el código, el contador
aumenta su valor hasta Quién desee es- ternet (Por ejemplo: Alehop, Po- Además, debes procurar tener
alcanzar un valor deter- cribir documen- bladores y CTV) que han sido in- siempre instalada en tu orde-
minado en el que se de- tos HTML necesi- sertados en Computer Hoy in- nador la versión más actual del
tiene el bucle. ta un navegador cluían estos programas. Si editas navegador. Internet Explorer
para comprobar en HTML lo ideal es disponer de tiene ahora mismo la versión 5
08 Condiciones el resultado de ambos navegadores, ya que, y Netscape Comunicator la 4.6.
En programación se uti- sus trabajos. Los El navegador Internet Explorer viene in- aunque el HTML es
lizan mucho las condi- navegadores más tegrado en Windows 95 y 98. estándar, los navega-
ciones para tomar deci- utilizados son el Microsoft In- Netscape Comunicator también dores tienen algunas
siones en el flujo de ternet Explorer y el Netscape está disponible de forma gra- diferencias en sus
programa. Por ejemplo: Comunicator. El Explorer viene tuita. Para encontrarlo tienes instrucciones. Algu-
si el usuario pulsa el bo- incluido en el sistema operati- que acceder a Internet y visitar nos identificadores
tón “x” entonces se cie- vo Windows 95 y 98. También la página - ´ donde también pueden ser irrecono-
rra la ventana activa y si se puede descargar gratuita- tienes que visitar la zona de cibles por el navega-
pulsa el botón “z”, se
mente desde Internet para ins- descarga. Estos navegadores dor. También se pue-
abre una nueva ventana
talar la última versión en el or- también se encuentran dispo- de dar el caso de
con más opciones que
se pueden seleccionar. denador. Basta con visitar la nibles en numerosos CD-ROM distintas interpreta-
dirección -v y acceder al área que vienen con las revistas. ciones para la misma El navegador Netscape Comunicator
de descarga. El navegador Los CDs de proveedores de In- orden. se puede obtener gratis en la red.

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 .
09 Variables pasa lo mismo y Haz click sobre él de for- en .
En programación, las
variables son unos ele-
mentos que se utilizan
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:
para contener datos de
se les llama “identificadores probar el , de
distintos tipos: núme-
ros, letras, palabras,
de cierre”. Gracias a esta cambio, re- manera que aparezca selec-
textos, valores lógicos, metodología podemos divi- pite los pa- cionada sobre fondo azul:
etcétera. El valor conte- dir el documento HTML en sos 1 a 7 .
nido en una variable varias secciones indepen- del aparta-
puede cambiar a lo largo
de la ejecución de un
programa. Existen otros
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
elementos llamados tipo estarán relacionados. na HTML”. tendras que escribir: La uni-
constantes que tienen Por ejemplo: todo lo que se El navega- dad del disco duro , el
un valor fijo que no se encuentre entre los identi- dor nos nombre de la carpeta
puede cambiar durante ficadores y aparezca el nombre de tu mostrará los cambios y el nombre
toda la ejecución del es el título de la página: del archivo
programa. página. En HTML todas las . .
funciones tienen un identi- Después de escri-
WYSIWYG
10
Es la abreviatura de la
frase en inglés “what
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


you see is what you
get”, en castellano: “Lo
que hay es lo que ves”.
za y donde acaba una de-
terminada función. Si has
terminado de visualizar tu
6 Haz click justo detrás de tecla $ y tu archi-
vo HTML se cargará.
En informática se utiliza
para indicar que lo que
aparece en pantalla es lo
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 .
mismo que saldrá por la
impresora. Esta tecnolo- ciendo click sobre sus . En los próximos capítulos
gía es relativamente re-
Cargar la página del curso aprenderás las or-
Más texto para rápidamente
ciente y se emplea en la
mayoría de programas
editores de textos y di-
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.

seño gráfico que se uti- pítulos de este curso pue- debe saltar a la siguiente lí- puedes abreviar el proceso
lizan en la actualidad. 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 Direcciones online
11 Extensión hemos creado. carpeta del archivo.
Todos los archivos tie-
nen un nombre que indi-
ca su contenido y lo di- 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
-
-
v www.microsoft.com
´ www.netscape.com
ferencia de los demás. A , , y
continuación tienen una .
coletilla de tres letras En esta línea puedes es-
que indica su tipo. La ! Lo más importante
extensión de un archivo,
son estas tres últimas
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 CABEZA Y CUERPO: cada


letras. Por ejemplo, las repetimos los conceptos documento HTML se com-
terminaciones: .txt (ar- más importantes: pone de cuerpo y cabeza.
chivo de texto), .bat (ar-
Los identificadores de cuer-
chivo de proceso por lo-
HTML: es el lenguaje de las po son y
tes, .exe y .com
(archivos ejecutables), páginas Web. Indica al na- Los identificadores de ca-
.doc (documento de tex- vegador como se debe pre- beza son y
to, normalmente Word). sentar el texto y las imáge- .
Estas terminaciones son nes de la página. Existen En la cabeza aparecen in-
utilizadas por el usuario muchos programas que ge- formaciones básicas sobre
y por el sistema operati- neran código HTML auto- el documento. En el cuerpo
vo para averiguar rápi- máticamente. Pero generan aparecen los textos y las
damente cuál es el tipo páginas que no suelen es- imágenes que se presentan
de archivo. tar optimizadas. en el navegador.
De momento no podrás texto la ventana del editor
12 Cuadro de ver tu archivo, ya que el edi- tendrá este aspecto IDENTIFICADOR: es una SALTO DE LÍNEA: el identi-
diálogo tor sólo muestra los archi- instrucción en HTML. Se re- ficador indica al na-
Son ventanas de Win- vos con extensión “.txt”. conoce por los paréntesis vegador que tiene que sal-
dows que muestran un de flecha y . Casi to- tar una línea y poste-
mensaje donde se soli-
cita una respuesta del
usuario para una deter-
3 Haciendo click en el bo-
tón
dos los identificadores tie-
nen un identificador de cie-
rre que comienza con una
riormente continuar con la
presentación de texto o
imágenes. El identificador
minada situación. línea oblicua. Por ejemplo: no necesita un iden-
se desplegará la lista
donde debemos selec- y . tificador de cierre.

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
División de páginas con tablas Nº 41
Lo primero que debe aprender un diseñador de páginas 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
Principios legales de las páginas de Internet


47
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
Programación en HTML, 2a Parte 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- 01 HTML
so, que apareció en la pági- cionarlo haciendo click a la La plantilla que acabamos bre la casilla . Significa “Hypertext
na 64 del número 35 de derecha . de crear nos puede resultar Markup Language” y es
el lenguaje de progra-
Computer Hoy. muy útil. Pero es muy im-
mación utilizado para
portante que se mantenga crear las páginas de In-
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-
ternet. En él se definen
las imágenes, los textos
y los hipervínculos que
que en esta sección debes quierda hasta que la palabra archivo de la plantilla. tección, repite los pasos del estarán incluidos en la
escribir el texto de la pági- se vuelva azul: 1 al 4 y haz click en la casilla página. En HTML se per-
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
mite la utilización de
dos formatos de ima-
gen: el GIF y el JPEG. En

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.
algunas variaciones de
este lenguaje se han in-
cluido otros formatos
introducir las líneas: gráficos como el PNG.

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
También permite la in-
troducción de otros
contenidos como vídeo,
del editor tendrá que tener el icono . sonido o incluso progra-
el siguiente aspecto: . mas que se ejecutan en
Salto de línea nuestro ordenador al
abrir la página.
En la primera entrega de
este curso, te explicamos el 02 Navegador
funcionamiento del identi- Es un programa que
ficador . En esta oca- permite visualizar el
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
contenido de las pági-
nas web de Internet.
También se utilizar para
ta “Mis documentos”. que se utiliza para provocar descargar ficheros o vi-
Si deseas guardar la plan- un salto de línea. Los pasos sualizar contenidos mul-
tilla en otra carpeta, tendrás que te indicamos a conti- timedia. En la actualidad

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 :
los navegadores más
utilizados son el Explo-
rer de Microsoft y el Na-
de diálogo 04 (Pág. 76) don- disco.Posteriormente podrás vigator de Netscape. El
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-
sistema operativo Win-
dows 98 incorpora el
navegador de Internet
mos guardado todos los ar- ñar una plantilla de trabajo”. como uno de los acce-
chivos en la carpeta “Mis do- Para comenzar a utilizar el sorios básicos.
cumentos”. comando tendrás que
abrir tu plantilla.
03 Barra
de título
12 Después de guardar
el archivo, cierra el
editor haciendo click en el 2 Haz click sobre las op-
ciones y pa-
Es la barra azul que apa-
rece en la mayoría de las
ventanas de Windows
símbolo . ra abrir el archivo. 95 y 98 en la parte su-
perior. En la parte iz-
quierda aparece el icono
! Resumen de este capítulo correspondiente al pro-
grama, seguido del
nombre de la aplicación
En este apartado se resumen dos una y otra vez. Lo mejor es página web no significa que el lo mejor es dividir el texto en y el fichero que se en-
los contenidos más importan- proteger el archivo de la plan- navegador vaya a interpretar varios párrafos. Gracias a esto cuentra abierto en ese
tes que han sido tratados en es- tilla contra escritura para evi- esta orden. La unica forma de se consigue una mayor fácili- momento. En los nave-
te capítulo del curso. tar que pueda ser sobreescrito forzar al navegador para que se dad en la lectura. En el lengua- gadores también apare-
accidentalmente. produzca un salto de línea es je HTML los párrafos se gene- ce el título de la página
Estructura básica utilizar el comando . El ran mediante el comando web que se está visitan-
Cuando se generan páginas El comando <br> salto de línea se utiliza con mu- antes del párrafo deseado y el do en cada momento.
web escribiendo sus instruc- El comando se utiliza cha frecuencia cuando se de- comando al final de pá- En la esquina derecha
ciones HTML, lo más lógico es para generar un salto de línea. sea ajustar el margen derecho rrafo que se desea definir. de la barra encontramos
crear una página con los co- Si se omite, el navegador sólo del texto de un documento o Aunque pueden parecer poco tres iconos que sirven
mandos que son comunes a to- realizará un salto de línea cuan- cuando se desea dividir el tex- útiles, lo mejor es que comien- para abrir, cerrar y mi-
das las páginas. Esto permite do sea estrictamente necesario to en varios párrafos. ces a familiarizarte inmedia- nimizar la ventana sin
aprovechar este archivo para para poder mostrar todo el tex- tamente con estos formatos de tener que recurrir a las
crear todas las páginas que di- to. Hay que tener en cuenta que Los párrafos párrafo, ya que los utilizarás opciones del menú del
programa.
señemos, evitando tener que pulsar la tecla $ en el códi- Cuando se presentan textos con mucha frecuencia en los
introducir los mismos coman- go fuente 06 (Pág. 76) de la muy largos en una página Web, capítulos posteriores.

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

3 12

En la siguiente ventana , Después repite el Cierra el editor ha- el cuadro “Abrir rápidamen-
de diálogo aparecerá el paso 10 y del apartado “Di- ciendo click en . te un archivo HTML” que se
04 Cuadro contenido de la carpeta señar una plantilla de tra- encuentra en la página 78.
de diálogo
Son ventanas de Win-
dows que muestran un
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
mensaje donde se soli-
al archivo y haz click sobre
cita una respuesta del
usuario para una deter-
el botón .
minada situación. Si aparece el contenido de

05 Escritorio
Es la superficie de tra-
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-
bajo de Windows 95 y que se encuentra situada en labra “texto”, y sin soltar el
98. En ella podemos de- la parte derecha de . botón del ratón, desplaza el
jar todo tipo de ficheros Aparecerá una lista en la que puntero hacia la parte iz-
y aplicaciones para que tienes que seleccionar la quierda, hasta que las dos
estén accesibles en entrada palabras aparezcan resalta-
cualquier momento. En das sobre fondo azul
el Escritorio se encuen- . ce puedes consultar el apar- distinguir claramente los lu-
tran los iconos más im- tado “Ver nuestra primera gares donde has insertado
portantes del sistema
como el de Mi PC, la Pa-
pelera de reciclaje o Mis
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
documentos. El Escrito- A continuación pulsa la te- blicó en el número 35 de el efecto del aislado.
rio se puede personali- cla $. El resultado debe ser Computer Hoy. No olvides La última línea se muestra
zar a nuestro gusto con éste: . seleccionar el nombre co- sin saltos a pesar de que en
colores, gráficos o in-
Si la lista es demasiado lar- rrecto de archivo. En nues- el código fuente se haya pul-
cluso sonidos y anima-
ciones. También puede
ser configurado para
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
verse como si fuese una
página Web. cuentran a la derecha de la hay salto de línea.
lista hasta que puedas vi-
06 Código fuente sualizar la carpeta
Son una serie de ins- . Cuando introduzcas un co-
trucciones y comandos mando de salto de línea de-
de programación que se
utilizan para indicar al 4 En el cuadro de diálogo
aparecerán todos los ar-
bes pulsar la tecla $ .

navegador lo que debe


hacer cuando muestra
un archivo que tiene for-
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:
mato HTML. Este térmi- Seguro que te llama la aten-
no también se utiliza por ción que después de un úni-
los programadores para co en una línea sigan
referirse al archivo que y selecciona la opción
tiene las instrucciones
de un programa. 14 Si quieres forzar el sal-
to de línea puede se-
guir los pasos siguientes.
07 Extensión De esta forma también se Haz click en , y
Todos los archivos tie-
nen un nombre que indi- mostrarán tus archivos tres líneas sin utilizar este
ca su contenido y lo di- HTML . comando. El código fuente
ferencia de los demás. A completo debe tener un as-
continuación tienen una pecto similar a este .
coletilla de tres letras
que indica su tipo. La
extensión de un archivo,
son estas tres últimas
15 Inserta un al fi-
nal de cada línea que
no lo tenga. Primero haz
letras. Por ejemplo, las click detrás de
terminaciones: .txt (ar- y escribe . Repite este
chivo de texto), .bat (ar- paso en las dos líneas si-
chivo de proceso por lo- guientes. El texto debe ter-
tes, .exe y .com minar con un aspecto simi-
(archivos ejecutables),
.doc (documento de tex-
to, normalmente Word).
5 Haz click en el archivo
y en el botón
para que aparezca
lar a éste . En este caso,
después de escribir cada lí-
nea no es necesario que pul-
Estas terminaciones son el código de nuestra planti- ses la tecla $.
utilizadas por el usuario lla en la ventana del editor.
y por el sistema operati-
vo para averiguar rápi-
damente cuál es el tipo
6 Ahora tienes que guar- 16 11 Repite los pasos del
al 13. Los saltos de
de archivo. dar este archivo con
distinto nombre para evi-
tar reescribirlo. Haz click
11 Para poder ver el re-
sultado de estas modi-
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- ➜ Direcciones online
mienzo de párrafo tienes que
utilizar el comando y pa- - v www.microsoft.com
ra terminar el párrafo, el co- - ´ www.netscape.com
mando .

! Abrir archivos HTML rápidamente


En el capítulo anterior te ense- . En algunos ordenadores el lo- pantalla, haz click sobre . De Haz click sobre el símbolo
ñamos a abrir un archivo HTML gotipo aparece como . esta forma conseguiras reducir de cada una de las ventanas que
con Internet Explorer -v . Pe- Esto se debe a que el navega- el tamaño de la ventana. tenemos abiertas.
ro existen otros métodos. El dor instalado por defecto es
más rápido es hacer doble click
sobre el archivo deseado:
Netscape Navigator -´, lo que
no supone ninguna molestia, ya
que todos los ejemplos que uti-
5 Abre la ventana con los ar-
chivos HTML tal y como he-
mos descrito en el paso 2 .

1 Para ver un archivo HTML


con el navegador tienes que
abrir la carpeta correspondien-
lizamos en el curso se pueden
ver a la perfección con cual-
quiera de los dos navegadores. 6 Haz click sobre:
y, sin soltar el bo-
te. Haz doble click en la carpeta
3 Para ver una de estas pági-
nas en el navegador, haz
doble click en el archivo co-
Existe otra forma de abrir los
archivos HTML rápidamente.
tón del ratón, despla-
za el icono hasta la ventana del
navegador .
rrespondiente. Por ejemplo.
4 Inicia el navegador desea-
do siguiendo la ruta co-
Después suelta el botón del ra-
tón y el navegador mostrará el

2 Si ya has completado las


prácticas del curso, en-
rrespondiente. Por ejemplo:
, , y
archivo seleccionado .

contrarás algunos archivos


HTML
.Si el navegador
ocupa toda la superficie de la 7 Para terminar, debes cerrar
el navegador y la carpeta.

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

Utiliza títulos para resaltar el texto 58


Varios formatos de título diferentes 59
Ejemplo con títulos de varios tamaños 60
Separación del texto con líneas 60
Organiza tu texto con listas 60
Enlaza unas páginas con otras 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
División de páginas con tablas Nº 41
Una de las opciones más interesantes que puedes hacer 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
Programación en HTML, 3a Parte Profesional


Pulsa la pestaña
y selecciona la opción
. ser éste . 01 HTML
Significa “Hypertext
Markup Language” y es
5 Haz doble click sobre el
archivo y la
ventana del editor se abrirá
10 Haz click en las op-
ciones y
para salvar los
el lenguaje de progra-
mación utilizado para
crear las páginas de In-
con la plantilla: cambios. ternet. En él se definen
. las imágenes, los textos
11 Cierra el editor ha-
ciendo click en .
y los hipervínculos que
estarán incluidos en la
página. En HTML se per-

12 Para abrir el docu-


mento que acabas de
crear debes hacer click so-
mite la utilización de
dos formatos de ima-
gen: el GIF y el JPEG. En
bre la carpeta algunas variaciones de

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-
este lenguaje se han in-
cluido otros formatos
gráficos como el PNG.
Para no correr el riesgo de cribir como nom- tinuación cierra el editor ha- También permite la in-
escribir sobre la plantilla ori- bre de archivo. A continua- ciendo click sobre . troducción de otros
ginal es mejor que guardes ción haz click sobre el contenidos, como vídeo,
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
sonido o incluso progra-
mas que se ejecutan en
tu ordenador al abrir la
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
página web.

seleccionada la línea con el


02 Identificador
El lenguaje HTML se es-
nombre de archivo: cribe utilizando identifi-
. cadores. Estos son ór-
Escribe el nuevo nombre denes que das al
y haz click sobre navegador para que
el botón . y el navegador mostrará la muestre la página web
página tal y como deseas. Cada

7 Selecciona
colocando el puntero a
la derecha de la palabra
donde puedes apreciar el
efecto del identificador
. La línea
identificador es una or-
den y puede indicar atri-
butos del texto, posición
, haz click y sin soltar hace que aparezca el titular de imágenes, hipervín-
el botón del ratón desplaza . culos o cualquier otra
el puntero hasta la parte iz- propiedad de la página.
quierda pa-
Hipervínculos
14
ra que la frase quede selec- Cierra el navegador y la 03
cionada en color azul. ventana de la carpeta También se conocen co-
haciendo mo enlaces. Son re-
ferencias entre varias
8 Escribe la línea

y pulsa la tecla $ . con


click en sus
dientes.
correspon-

No olvides pulsar la tecla A continuación se abrirá una


páginas que se encuen-
tran en la red Internet.
Se suelen distinguir por
y ordenarás Varios formatos $ al final de cada línea. ventana del navegador en la tener un color distinto al
al navegador 06 (Pág. 60) En esta ocasión hemos uti- que se muestra el resultado resto del texto, estar su-
que muestre un título. de título diferentes lizado el identificador del códido HTML que acabas brayados o representa-
Cuando utilices títulos pa- que genera la orden de introducir: dos por una imagen. Al

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
hacer click sobre ellos,
el navegador carga la
página correspondiente.
curso te explicamos que las diferentes.Vamos a practicar más grande indica que el tí- Los hipervínculos per-
marcas y se utili- un poco con todos los for- tulo se mostrará más pe- miten que el usuario se-
zan para indicar al navegador matos de título que se pue- queño. Así, es más leccione la información.
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 04 Cuadro
de diálogo
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
Son ventanas de Win-
dows que muestran un
las líneas: mensaje donde se soli-
cita una respuesta del
. usuario para una deter-
minada situación. Por
ejemplo, los cuadros
que aparecen al abrir un
archivo y te permiten
seleccionar la carpeta.
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-
05 Extensión
tulo. Los valores más pe- rizontal, es decir, una línea X Experimentos propios
queños que se pueden usar que recorre el texto de iz-
Todos los archivos tie- son y . quierda a derecha. El identi- Después de estos tres capítu- Cada vez que cambies algo
nen un nombre que indi- ficador encargado de gene-
ca su contenido y lo di- los del curso ya sabes mucho en un documento procura guar-
ferencia de los demás. A
continuación tienen una
6 Cierra el navegador y la
carpeta
haciendo click en sus
rar esta línea es
Cuando utilicemos el identi-
ficador no hace falta
. sobre HTML. Es lógico que ten-
gas ganas de experimentar con
los conocimientos que tienes.
dar una copia del documento
anterior. Así podrás volver al
documento original cuando te
coletilla de tres letras
que indica su tipo. La correspondientes. ningún identificador de cie- Pero es muy importante que equivoques y visualizar los dos
extensión de un archivo, rre con una barra oblicua. antes de aventurarte tengas en archivos en el navegador para
son estas tres últimas Ejemplo con títulos cuenta estos puntos: comprobar los resultados de las
letras. Por ejemplo, las
terminaciones: .txt (ar-
chivo de texto), .bat (ar-
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
Procura organizar todo tu tra-
bajo en una misma carpeta. De
esta forma dispondrás de un
modificaciones.
Procura realizar las modifi-
caciones poco a poco. Tendrás
chivo de proceso por lo- los títulos. Sin embargo, la tendrás que hacer doble acceso más cómodo a todos los que llevar a cabo los cambios
tes, .exe y .com mejor forma de compren- click sobre el archivo documentos HTML y podrás detalle a detalle y comprobar
(archivos ejecutables), derlos es realizar un ejemplo . De esta forma realizar una copia de seguridad los resultados en el navegador.
.doc (documento de tex- práctico como el que te ex- abrirás el documento que de todos tus archivos mucho De esta forma tus experimen-
to, normalmente Word). ponemos a continuación: has utilizado a lo largo de más fácilmente. tos serán más didácticos y po-
los últimos apartados. Procura utilizar siempre la drás detectar los errores más
Navegador
06
Es un programa que
permite visualizar el
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-
extensión “.HTML” para todos
los documentos.
fácilmente en el caso de que al-
go no funcione correctamente.
contenido de las pági- que elegir el archivo haz trás de
nas web de Internet. click sobre .Así y pulsa la tecla $ de mo-
También se utiliza para recuperarás el primer docu- do que aparezca una nueva
descargar ficheros o vi-
mento que has creado. línea en blanco.
sualizar contenidos mul-
timedia. En la actuali-
dad, los navegadores
más utilizados son el 2 Haz click exactamente
aquí
y pulsa $ .
3 Teclea y pulsa de
nuevo la tecla $ . Ahora
escribe la línea siguiente:
Explorer de Microsoft y
el Navigator de Netsca-
pe. El sistema operativo
Windows 98 incorpora
el navegador de Internet
como uno de los acce-
sorios básicos. 3 En la línea que acabas de
crear ,
El código fuente tendrá un
aspecto similar a este .
07 Código fuente
Son una serie de ins-
trucciones y comandos
de programación que se escribe , pulsa $ , y Con se introduce una
utilizan para indicar al escribe línea y se separa la parte in-
navegador lo que debe en la nueva línea.A continua- ferior del texto del resto del
hacer cuando muestra ción pulsa la tecla $ para in- documento. Esto puede re-
un archivo que tiene for-
mato HTML. Este térmi-
no también lo utilizan
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-
los programadores para
referirse al archivo que
tiene las instrucciones 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:
de un programa.
ciendo click sobre . fono de información que se
08 Escritorio presenta en pantalla apli-
Es la superficie de tra-
bajo de Windows 95 y
98. En ella puedes dejar
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
todo tipo de ficheros y tu trabajo. Debe tener un as- bastante más pequeño que el
aplicaciones para que pecto similar a éste: resto del documento.
estén accesibles en
cualquier momento. En
el Escritorio se encuen- 6 Cierra el navegador ha-
ciendo click en .
5 Cierra el navegador ha-
ciendo click en .
tran los iconos más im-
portantes del sistema, Organiza
como el de Mi PC, la Pa- Separación tu texto con listas
pelera de reciclaje o Mis del texto con líneas La página que acabas de
documentos. El Escrito- Con los títulos,los párrafos terminar funciona correcta-
rio se puede personali-
y los saltos de línea puedes mente. Pero aún se puede
zar a tu gusto con colo-
res, gráficos o incluso
hacer un montón de cosas mejorar escribiendo una lis-
sonidos. 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
Programación en HTML, 3a Parte 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 haciendo
click sobre .
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-
curso3.html.

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
Estos son los contenidos más im- es el título de más tama- Listas dor con su identificador
portantes que has visto en este ño y es el más pequeño. Pueden ser de dos tipos: de cierre .
No sueltes el botón y mue- capítulo:
ve el puntero hasta Líneas - Con los elementos se Hipervínculos
Títulos El identificador sirve pa- diferencian gracias a un símbolo. Cuando una página hace referen-
En HTML se introducen con iden- ra crear líneas sencillas y es uno - Con los elementos van cia a otra. En nuestro ejemplo has
tificadores que van desde de los pocos que no requiere iden- precedidos de un número de orden. introducido la línea
de forma que el texto que- hasta . Cada uno de tificador de cierre con línea oblí- que hace referencia a otro docu-
de seleccionado en azul. ellos requiere un identificador de cua. Las líneas son un elemento Para definir los puntos individua- mento HTML que se encuentra en
cierre, por ejemplo . El ta- que se utiliza con mucha fre- les de una lista está el identifica- la misma carpeta.

6 Pulsa la tecla $ y escri-


be las líneas .
No olvides pulsar la tecla
maño del título depende del nú-
mero que acompañe a la letra “h”.
cuencia para separar las partes
del texto.

61 Nº 38 61
Profesional Programación en HTML, 4ª Parte
Hipervínculos en Internet 66
Consigue tus imágenes en la Red 67
Inserta fotos en tu página HTML 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
División de páginas con tablas Nº 41
La combinación de imágenes y texto dará a tus páginas un 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
Programación en HTML, 4a Parte Profesional


Guarda el archivo de curso -v (pág. 70) y de forma que quede selec-
plantilla con otro nom- pulsa la tecla $ . cionada en color azul
bre haciendo click en 01 HTML
Significa “Hypertext
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
Markup Language” y es
el lenguaje de programa-
ción utilizado para crear
selec- que se pueden copiar el navegador mostrará la pá- las páginas de Internet.
cionado en azul. y distribuir libre- gina web: Con él se definen la posi-
Escribe mente. Ahora sólo ción, forma y funciona-
y haz bas de escribir . vas a utilizar un par de imá- miento de las imágenes,
click en el botón . Si tu ordenador está co- genes. Pulsa con el botón Haz click en textos e hipervínculos
nectado en este momento a derecho del ratón en con el botón derecho del ra- incluidos en la página.

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
.
En HTML se permite uti-
lizar dos formatos gráfi-
cos: GIF y JPEG.
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
02 Hipervínculos
También se conocen co-
do del ratón y, sin soltar, des- para cerrar la ventana del na- mo enlaces. Son re-
plazar el puntero hacia la vegador Internet Explorer. ferencias entre varias
parte izquierda páginas que se encuen-
tran en la red Internet.
, de forma Esto te permite vincular Inserta fotos Se suelen distinguir por
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 tener un color distinto al
en Internet. Da los pasos siguientes pa- resto del texto, estar su-
brayados o representa-
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.
dos por una imagen. Al
hacer click sobre ellos,
el navegador carga la
los dos identificadores
07 (Pág. 68) que acabas de
utilizar? se utiliza para
cumentos” haciendo click
en sus correspondientes.
tamente. Si no ves la carpe-
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
página correspondiente.

03 Código fuente
señalar los párrafos y Consigue tus rior. Para terminar haz click primer apartado. Sigue el pa- Es una serie de instruc-
indica al navegador en el botón . so 6 para guardar la página. ciones y comandos de
08 (Pág. 68) que debe realizar
imágenes en la Red Pero en este caso utiliza el programación que se
un salto de línea. Incluyendo imágenes en
tu página web conseguirás 4 Repite los pasos 2 y 3
con esta otra imagen:
nombre
.
de archivo utiliza para indicar al na-
vegador lo que debe ha-

9 Escribe la línea
.Si no comprendes su
. que ésta resulte mucho más
atractiva. Lo primero que ne-
2 Selecciona la cuarta lí-
nea siguiendo las indi-
cer cuando muestra un
archivo que tiene forma-
to HTML. Este término
significado, conviene que cesitas son los archivos de caciones del paso 7 también lo emplean los
repases la parte final del an- imagen que vas a insertar. del primer apartado programadores para re-
terior capítulo del curso. Se Una de las formas más fá- y escri- ferirse al archivo que
trata de un hipervínculo ciles de obtener los archi- be . posee las instrucciones
normal donde hemos cam- vos es visitar las páginas de Marca después la línea de un programa.
biado el valor del paráme- algún servidor que ofrezca y teclea
04 World Wide
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 .
Web
Es la red mundial de da-
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
tos de Internet. Aquí
puedes encontrar infor-
mación sobre innumera-
11 (Pág. 70) “Yahoo”. bles temas. Lo más im-
portante es que toda la

10 Haz click en las op-


ciones
para guardar los
y
El programa se abrirá con
información está inte-
rrelacionada para que
todos los datos se en-
cambios. Cierra el editor la página de inicio cuentren fácilmente.
pinchando en . En el Es- 13 (Pág. 70) que tengas pre-
critorio 12 (Pág. 70) , haz do- determinada. En este caso, 05 Cuadro
ble click en: se trata de la página del bus- de diálogo
cador “Yahoo España”. Es una ventana de Win-
Haz click en la barra de di- dows que muestra un
recciones mensaje donde se te so-
y se abrirá la ventana licita una respuesta para
donde de- una determinada situa-
bes hacer doble click sobre: ción. Por ejemplo, los
cuadros que aparecen al
abrir un archivo y te
permiten seleccionar la
para seleccionarla carpeta donde se en-
y escribe la cuentra el documento.
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
06 Extensión atención cuando escribas permiten modificar el mo- . En esta ocasión se ha esta línea no es muy difícil.
Todos los archivos tie- los identificadores, ya que do en que se presenta la utilizado el parámetro Los únicos parámetros que
nen un nombre que indi- una equivocación puede ha- imagen en el navegador. Con , que indica se han cambiado son el
ca su contenido y lo di- cer que la página se mues- indicas que la al navegador que el texto nombre del archivo y
ferencia de los demás. A
tre incorrectamente. imagen se debe situar a la que viene a continuación se .“Right” signifi-
continuación llevan in-
corporada una coletilla
izquierda y el texto se debe debe escribir debajo de la ca en castellano “derecha”,
de tres letras que indica
su tipo. La extensión de 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 flotante”. Si omites
imagen e indica al navegador que
debe situar la imagen en el
margen derecho de la pan-
un archivo, son estas
tres últimas letras. Por guardar el archivo. Haz click este parámetro el texto se talla. El resto del texto apa-
ejemplo: .txt (archivo de sobre y . mostrará en las líneas que recerá a la izquierda de la
texto), .exe y .com (ar- ilustración. Dentro de este
chivos ejecutables). texto se ha insertado un hi-

07 Identificador
El lenguaje HTML se es-
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”.
cribe utilizando identifi- te sencillo. Si no entiendes té pegado a la imagen hay
cadores. Estos son ór- bien su significado deberás que darle una separación
denes que das al repasar el tercer capítulo utilizando el parámetro Sin este comando, el pá-
navegador para que del curso que publicamos . Esta instrucción rrafo estaría junto a la pri-
muestre la página web en el número 38 de Com- deja un espacio libre a la iz- mera imagen y su aspecto
tal y como deseas. Cada puter Hoy. quierda y derecha de la ima- no sería muy atractivo
identificador es una or- Ocho líneas más abajo es- gen a modo de marco.
den y puede indicar atri- tá el apartado donde apare- Cuando la ilustración se
butos del texto, posición
ce la primera imagen muestre en el navegador la
de imágenes, hipervín-
culos o cualquier otra
verás así
propiedad de la página. El identificador in- servar

08 Navegador
Es un programa que
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-
permite visualizar el sirve de la segunda imagen ciendo click en
contenido de las pági- para indicar cuál es la que y doble
nas web de Internet. se debe presentar. En este click sobre .
También se utiliza para caso, la imagen se encuen- Después sobre
descargar ficheros o ver tra en la misma carpeta que Sin “hspace”no habría nin- para que pue-
contenidos multimedia. la página HTML. Este pará- guna separación das ver tu pri-
En la actualidad, los na- metro es más que suficien- mera página
vegadores más utiliza-
dos son Explorer, de Mi-
crosoft y el Navigator,
te para mostrar una imagen
en un navegador. 5 Un poco más adelante
aparece una forma bas-
web con imáge-
nes:
de Netscape. El sistema
operativo Windows 98
incorpora el navegador ! Hipervínculos con imágenes
de Internet como uno de
los accesorios básicos.
Las imágenes y los hipervín- y en:
culos se pueden comple-
09 Parámetros mentar muy bien. Al hacer
Son informaciones que
determinan el funciona- click sobre una imagen que estas tres líneas La construcción es la misma,
miento de un programa. hace referencia a una direc- Su funcionamiento es muy pero se omite la orden El navegador mostrará el hi-
También se conocen co- ción de Internet, la página co- simple. Escribe un hipervícu- <img...>. De esta forma el tex- pervínculo de imagen y el de
mo argumentos. rrespondiente se abrirá auto- lo normal, pero en lugar de to que se encuentra en su lu- texto. Para probarlo, despla-
máticamente en el navegador. teclear un texto entre <a gar funciona como hipervín- za el puntero sobre
10 Dirección Para poder hacer este ejer- href...> y </a>, inserta una culo.
de Internet cicio es necesario que tengas imagen con <img...>.
Todas las páginas de la
red Internet se encuen-
tran organizadas en di-
en tu disco duro las dos imá-
genes del apartado “Consigue
tus imágenes de la red”.
Además, si olvidas el pará-
metro border=0, el navegador
presentará un borde azul al-
4 Antes de ver el resultado
del código que acabas de
escribir haz click sobre
recciones. Cuando dese- rededor de la imagen. y .
as visitar una página
web bastará con que es-
cribas la dirección co-
1 Utiliza el archivo de plan-
tilla de la sengnuda parte
del curso. Para abrirlo tienes 3 Para dejar clara la dife-
rencia que existe entre un
Después cierra el “Bloc de no-
tas” pinchando sobre
En el escritorio, haz doble
. y sobre
y observa que en cualquiera
rrespondiente en el que repetir los pasos 1 a 6 vínculo normal y uno que fun- click en: de los dos casos toma el as-
campo de direcciones del primer apartado. En el pa- ciona con una imagen escri- pecto siguente:
de tu navegador. Las di- so 6 debes utilizar el nombre be estas tres líneas a conti-
recciones de Internet
para guardar nuación Si haces click sobre cual-
empiezan por “http://” y
el archivo. quiera de ellos accederás a la
terminan con el nombre
de la página web. página correspondiente. Pa-

2 Repite el paso 7 del pri-


mer apartado e introduce
ra cerrar el navegador haz
click sobre .

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

7

Cuando quieras cerrar el ground”, el navegador coge
navegador tendrás que el archivo de imagen que se
11 Buscador hacer click sobre . le indique y lo utiliza como
! Inicio rápido del “Bloc de notas”
Son sitios web que te fondo de la página. La ilus-
permiten buscar infor-
Utiliza una tración se repetirá varias ve- Cuando diseñas páginas
mación en Internet. Su
funcionamiento es bas-
tante fácil. Basta con
imagen de fondo
Las imágenes que has in-
ces como si fuera un mosai-
co que cubre todo el fondo
de la pantalla.
web en HTML tienes que
ejecutar constantemente el
“Bloc de notas”para escri-
3 Haz click con el botón
derecho del ratón en
que introduzcas las pa-
labras del tema sobre el sertado en tu página web bir el código de las páginas.
que deseas obtener in-
formación y pulses el
botón “buscar”. En po-
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
Abrir el editor una y otra vez
desde el menú pue-
de resultar algo pesado. Pa-
cos segundos te apare- muchos aspectos. Por ejem- cierra la ventana del “Bloc ra evitarlo, lo mejor es co-
cerán los resultados en plo en el fondo. Para conse- de notas”pulsando sobre locar un acceso directo en y, sin soltarlo, mueve el
la pantalla, con una bre- guirlo sigue estos pasos: y abre la carpeta de docu- el Escritorio. De esta forma puntero hacia un lugar va-
ve descripción de las mentos haciendo doble te bastará con hacer click cío del Escritorio
páginas que te permitirá
seleccionar la que más
te interese.
1 Ejecuta el “Bloc de notas”
y prepárate para abrir un
archivo siguiendo los pasos
click sobre: sobre un icono para que el
“Bloc de notas” se abra rá-
pidamente. 4 Suelta el botón derecho
y haz click sobre la op-
1 a 4 del primer ción
12 Escritorio
Es la superficie de tra-
apartado.
1 Haz doble click sucesi-
vamente sobre: El resultado debe ser un ac-
bajo de Windows 95 y
98. En ella puedes dejar
todo tipo de ficheros y
2 Cuando tengas
que seleccio-
nar el archivo, haz
ceso directo con este as-
pecto:
aplicaciones para que click sobre
estén accesibles en
y des- (En algunos ordenadores la

5
cualquier momento.
pués sobre . unidad C: puede tener un En el futuro podrás eje-
En el Escritorio se en-
cuentran los iconos más aspecto algo distinto o uti- cutar el “Bloc de notas”
importantes del sistema,
como el de Mi PC, la Pa- 3 Ahora busca la
línea que co-
lizar otro nombre). haciendo doble
click sobre el
pelera de reciclaje o Mis
documentos. Y se puede
mienza por y haz
click exactamente detrás de
6 Haz doble click sobre el 2 Haz click en
pa-
icono

personalizar a tu gusto
con colores, gráficos o
incluso sonidos.
la palabra archivo: ra que los iconos de la ven-
tana se hagan visibles y de-
pués pulsa varias veces
6 Cierra
carpeta
ha-
la

sobre la flecha ciendo click en


13 Página para ejecutar el navegador y hasta que veas el icono .
de inicio ver el resultado de tu página:
Es la primera página Con esto damos por ter-
web que se muestra
cuando se inicia el nave-
gador. Normalmente es
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 de un buscador cono- . La próxima entrega sabrás có-
cido o aquella que te línea completa tendrá este mo dar formato al texto de
permite acceder a otras
-v www.comstock.com/web
aspecto: tu página web, alineando, -´ www.dimpres.com/fonbeig3.htm
páginas.
. justificando y tabulando los -V www.altavista.com

14 URL Con el parámetro ”back- párrafos y líneas.


Siglas correspondientes
a “Uniform Resource
Locator” (en castellano ! Resumen de este capítulo
“Localizador homogé-
neo de recursos”). Una
URL es una dirección de En este apartado te explica- Insertar Posición
Internet donde se en- mos los puntos más impor- indica cuántos píxeles 15 se
cuentra una página web. tantes de este capítulo.
imágenes de las imágenes separa el texto de la imagen.
Para insertar imágenes en tus El parámetro se utili- Por ejemplo:
15 Píxeles Hipervínculos páginas HTML tienes que uti- za para indicar si la imagen distancia el texto de la ima-
Las imágenes con las lizar el identificador se sitúa en el margen derecho gen en 20 píxeles.
que trabaja el ordenador en Internet Además, debes utilizar el pa-
se componen de muchí- rámetro o en el margen izquierdo Utilizar una
simos puntos de varios Para referirse a una dirección para indicar el nombre del fi- .
colores que al ser ob- de Internet desde una página chero de imagen. Por ejem- imagen de fondo
servados en conjunto
forman una imagen. Ca-
HTML hay que especificar la plo: . Colocación En este caso, el navegador
URL 14 completa de la pági- muestra el archivo de imagen
da uno de estos puntos na deseada. del texto especificado en forma de mo-
es un pixel. Cuantos
Por ejemplo, la orden El texto se amolda automáti- saico en el fondo de la pan-
más píxeles tenga la
-V es la dirección de una pá- camente al espacio que queda talla. El comando se introdu-
imagen, mejor, ya que
ofrecerá más calidad. gina web que puedes intro- libre entre las imágenes. Para ce en la sección , que
ducir en el recuadro de di- dejar un borde alrededor de tomará el aspecto siguiente
recciones de tu navegador ellas se utiliza , que .

70 Nº 39
40_72_77_PROFESIONAL 5/4/00 19:32 Página 72

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 77

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
División de páginas con tablas Nº 41
n la cuarta entrega del ra este fin. Para realizar este válido.Al final tienes que ver

E
Para Insertar y dimensionar marcos Nº 42
curso sobre HTML 01 ejemplo utilizarás de nuevo la ventana del “Bloc de notas”: expertos
Ejemplo de formulario Nº 43
aprendiste a insertar el archivo de plantilla que Qué son y para qué sirven los identificadores Nº 44
imágenes en tus páginas creaste en el segundo capí- Conceptos básicos del estilo en cascada Nº 45
web para hacerlas más lla- tulo del curso (ver Computer Para
profesionales HTML con Java Nº 46
mativas. En esta ocasión tra- Hoy nº37, pág. 74). Probando las páginas HTML Nº 47
taremos un tema que tam- Principios legales de las páginas de Internet Nº 48
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 04 que
Si ves que la carpeta
no apare-
ce en la lista,haz click so-
5 Si no ves
click en
, haz
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
haz
y selecciona

dos identificadores 02 pa- los dos métodos puede ser la línea


72 Nº 40
40_72_77_PROFESIONAL 5/4/00 19:32 Página 73

Programación en HTML, 5a Parte Profesional

6 Cambia


Para dar un nombre al ar- se utiliza para indicar al na- sobre la carpeta:
chivo haz click en el tipo de letra vegador un formato de tex-
y . to y se acompaña de varios 01 HTML
En el lugar de , de- Hasta el momento,el texto parámetros 06 (Pág. 76) . Significa “Hypertext
bes escribir el nombre de todas las páginas que has En esta ocasión, sólo vas a y el archivo: Markup Language” y es
el lenguaje de progra-
. Después haz creado durante el curso se vi- utilizar uno de ellos. Con
mación utilizado para
click sobre el botón . sualizan con el tipo de letra se consi- crear las páginas de In-
“Times New Roman”. gue que el texto escrito a ternet. En él se definen
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
la posición, forma y fun-
cionamiento de las imá-
.
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
genes, los textos y los
hipervínculos incluidos
en la página web.
plázate hacia la parte iz- completa al tipo de letra
quierda hasta que el texto “Arial”tendrás que dar los pa- 02 Identificador
aparezca seleccionado: sos siguientes: El lenguaje HTML se es-
. cribe utilizando identifi-

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-
cadores. Estos son ór-
denes que das al
navegador para que
terior de este curso muestre la página web
de letra que acabas de se- tal y como deseas. Cada
leccionar: identificador es una or-
Además del conocido iden- den y puede indicar atri-
butos del texto, posición
tificador que se utili-
za para generar un salto de
línea, aparecen dos nuevos
9 Cierra el navegador ha-
ciendo click en . de imágenes, hipervín-
culos o cualquier otra
propiedad de la página.
comandos: muestra el Utiliza varios
texto que aparezca a conti- Escritorio
nuación en negrita hasta el colores en el texto 03
Es la superficie de tra-
identificador de cierre Algunos elementos de tex- bajo de Windows 95 y
. Con aplicas el to tienen mejor aspecto y re- 98. En ella puedes dejar
formato cursiva hasta que sultan más llamativos cuando todo tipo de ficheros y
escribas . utilizan un color distinto del aplicaciones para que
resto. Empleando el identifi- estén accesibles en

9 Para ver los resultados,


guarda el documento
con las opciones y
cador “Font”también puedes
dar el color que desees a le-
tras, palabras o párrafos en-
cualquier momento.
En el Escritorio se en-
cuentran los iconos más
. Después cierra el teros.Para practicar un poco, importantes del sistema,
“Bloc de notas” haciendo Si no tienes el archivo, sigue estos consejos: como el de Mi PC, la Pa-
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 1 al
del apartado anterior.
pelera de reciclaje o Mis
documentos.

atención, porque algunos pa- coloque justo al final del có- 04 Cuadro
de diálogo

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 Es una ventana de Win-
dows que muestra un
mensaje donde se te so-
critorio. Aparecerá una ven- tramos en el número 39 de línea . licita una respuesta para
tana con todos tus docu- Computer Hoy. una determinada situa-
mentos HTML.
Haz doble click sobre:
2 Repite los pasos del 1 al
4 del apartado anterior.
7 Haz click en y
para almacenar
ción. Por ejemplo, los
cuadros que aparecen al
abrir un archivo y te
permiten seleccionar la

(Es posible que en tu orde-


nador el archivo aparezca
3 Haz click en el archivo .
y en el botón
carpeta donde se en-
cuentra el documento.

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
05 Navegador
Es un programa que
permite visualizar el
contenido de las pági-

10 El navegador 05
mostrará el resultado
con letra en negrita
nas web de Internet.
También se utiliza para
descargar ficheros o ver
y pulsa la tecla $ para contenidos multimedia.
insertar una nueva línea En la actualidad, los na-
vegadores que se utili-
distinto. Por ejemplo, ma-
zan más frecuentemente
rrón. Para conseguirlo haz son el Explorer, de Mi-
click en esta posición crosoft, y el Navigator,
los cambios. Cierra el “Bloc de Netscape.
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
40_72_77_PROFESIONAL 5/4/00 19:32 Página 76

Profesional Programación en HTML, 5a Parte

3

Pulsa la barra de espacio fuente. Cuando se ejecuta la


06 Parámetros
( ) y escribe el texto orden de la línea X El polémico <font>
. Las pri-
Son informaciones que meras líneas del archivo ten- coges la caja más grande y la Muchos diseñadores de pági- se debe recurrir a las Hojas
determinan el funciona- drán éste aspecto: . pintas de color marrón. Des- nas web huyen del identifica- de estilo en cascada 11
miento de un programa.
pués viene la dor . La razón es que . Sin embargo, aunque esta so-
También se conocen co-
instrucción su manejo puede llegar a re- lución pueda resultar válida,
mo argumentos.
sultar bastante complejo. Por tiene el inconveniente de no
07 Cursor con la que co- ejemplo, cuando hay que cam- funcionar correctamente con
Es la marca que indica locas en el in- biar el color de letra en cada los navegadores que son algo
en que punto del docu- terior una una apartado o si todas las prime- antiguos. Por el contrario, el
mento tendrá lugar la si- caja más pe- ras letras de cada párrafo de- identificador puede
guiente introducción de queña que pre- ben aparecer con un tamaño trabajar sin problemas con las
datos. En la mayoría de viamente has más grande y un tipo de letra primeras versiones de los na-
casos se representa con pintado de co- determinado. vegadores. Además, en mu-
una pequeña línea verti- lor azul. El co- En estos casos hay que utilizar chas ocasiones el comando
cal negra que parpadea.

08 Código fuente
4 Haz click justo detrás de
esta posición .
mando te sirve pa-
ra cerrar las cajas con su
tapa correspondiente.
el identificador tantas
veces que al final se pierde la
perspectiva de la página y re-
es la forma más
cómoda y rápida de dar for-
mato al texto. Por ejemplo,
Es una serie de instruc- sulta menos comprensible. cuando se fija un mismo ta-
ciones y comandos de
programación que se
utiliza para indicar al na-
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 ,
Este es el motivo por el que el
W3C 09 - v , organismo
responsable de la normaliza-
maño y tipo de letra para todo
el documento. No obstante,
conviene que aprendas a utili-
vegador lo que debe ha- que aparezca. y para guardar ción del lenguaje HTML, reco- zar las hojas de estilo en cas-
cer cuando muestra un los cambios y cerrar el Bloc mienda no utilizar el identifi- cada, que serán tratadas en el
archivo que tiene forma-
to HTML. Este término
también lo emplean los
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:
cador . En su lugar número 45 de Computer Hoy.

programadores para re-


ferirse al archivo que misma línea, justo detrás de
posee las instrucciones e inserta
de un programa. el texto . Pulsa la
tecla ( . Después $ y por
09 W3C último # . El resto del tex- y después en:
Es el “World Wide to se moverá hasta la línea
Web 10 Consortium”. siguiente para mostrarse con
Este consorcio es la uni- más claridad. El texto del documento
dad de control más im- La línea completa debe ter- aparece en color marrón
portante para las nor- minar con un aspecto simi- pero algunas palabras resal-
mas en Internet y posee lar a éste: tan por el color azul .
filiales en Estados Uni-
dos y Europa. Se ocupa
de definir el estándar del
lenguaje HTML para
conseguir una normali- Su funcionamiento es bas-
zación mundial. También
se encarga de coordinar
tante sencillo. Primero has X Resumen de este capítulo
introducido un comando
las tecnologías que sur-
gen para Internet.
que cambia el texto a color En este apartado te explica- concluir un formato de es- Color de la fuente
azul y después el identifica- mos los puntos más impor- critura hay que utilizar Utilizando el comando
10 World Wide dor de cierre que tantes de este capítulo. .
Web lo devuelve al color que te- establece el color del texto
Es la red mundial de da- nía anteriormente. Esta pro- Negrita y cursiva Otros tipos como marrón. Detrás de “co-
tos de Internet. Aquí piedad suele recibir el nom- Si quieres dar formato ne- de letras lor” aparece el nombre del
puedes encontrar infor- bre de “anidación”. grita a una parte del texto tie- Existe la posibilidad de de- color en inglés, por ejemplo
mación sobre innumera- Para comprender el prin- nes que utilizar el identifica- terminar un tipo concreto de “red” (rojo) o “green” (ver-
bles temas. Lo más im- cipio de la anidación puedes dor . Todas las palabras letra para todo o una parte de). En el cuadro de la pági-
portante es que toda la pensar en varias cajas de di- que aparezcan a continua- del documento. Por ejemplo, na 72 tienes los colores más
información está rela- ferentes tamaños y colores ción se mostrarán en negri- es importantes con sus nom-
cionada para facilitar la que están contenidas unas ta, cuando escribas el iden- una orden con la que se co- bres correspondientes.
búsqueda de datos. dentro de otras. Imagina que tificador de cierre . mienza a escribir utilizando
la más grande es marrón y La escritura en cursiva fun- la fuente Arial. Tamaño de letra
11 Hojas contiene a todas las demás. ciona de la misma forma, pe- El parámetro que escribas Viene indicado por el pará-
de estilo Si la comparamos con la pá- ro utiliza los identificadores detrás de de- metro , por ejemplo
en cascada gina web que estás creando y . signa el tipo de letra elegido en . El valor
Son plantillas de forma- en este ejemplo se corres- y siempre debe ir escrito en- 3 indica un tamaño de fuen-
to para los textos de las pondería con el primer iden- Uso del identifi- tre comillas, ya que en caso te normal, mientras que los
páginas Web. Determi-
tificador . Ahora cador <font> contrario el navegador pue- valores más altos se corres-
nan, por ejemplo el ta-
piensa que dentro de la ca- Se utiliza para dar un forma- de encontrar problemas con ponden con un tamaño más
maño y tipo de letra o el
ancho de párrafos o el ja grande hay otra más pe- to continuo a los textos. Es- los nombres de fuentes de grande y los inferiores con
color de fondo. queña que está pintada de te identificador aparece letra que tienen varias pala- una fuente más pequeña de
azul. En este caso se corres- siempre con uno o varios pa- bras. Por ejemplo, “Times lo habitual. Los valores váli-
ponde con el segundo iden- rámetros adicionales. Para New Roman”. dos van del 1 al 7.
tificador del código
76 Nº 40
40_72_77_PROFESIONAL 5/4/00 19:32 Página 77

Programación en HTML, 5a Parte 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
.

13 Repite los pasos del 1 al


del apartado “Cambia
el tipo de letra”. 5 Desplaza el cursor hacia
abajo pulsando la tecla &

X Gama de colores

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 “imagenes.html”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 indicamos.Para 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.
➜ Direcciones online
v www.w3.org
y . Posteriormente haz
doble click en el icono del
13 Repite los pasos del 1 al
del apartado “Cambia
el tipo de letra”.
-
- ´ selfhtml.com.ar/tcae.htm

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

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
Qué son y para qué sirven los identificadores Nº 44
Conceptos básicos del estilo en cascada Nº 45
Para
profesionales HTML con Java Nº 46
Probando las páginas HTML Nº 47
Principios legales de las páginas de Internet Nº 48

Una tabla sencilla 62


Tablas más espaciadas 63
Cómo colorear la tabla 63
Solución de problemas 64
Mejorar el layout con la ayuda de las tablas 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-
sus tablas? Tú puedes hacerlo mucho mejor. Con la sexta timo.
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
Programación en HTML, 6a Parte 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 01 HTML
le indicas al navegador colorearás la fila con los tí- Significa “Hypertext
06 (Pág. 64) que a continua- tulos y resaltarás las celdas Markup Language” y es
el lenguaje de progra-
ción viene una tabla. Aquí, con los máximos de tem-
mación utilizado para
además, tendrás que definir peratura utilizando un fon- crear las páginas de In-
el parámetro 07 (Pág. 64) do rosa. ternet. En él se definen
. Esta orden di- la posición, forma y fun-
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-
cionamiento de las imá-
genes, los textos y los
hipervínculos incluidos
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.
en la página web.Se
puede decir que es la
base misma de las pági-
tag . Éste indica al na- . nas web.
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
02 Tag
El lenguaje HTML se es-
cluir en una única fila. El parámetro cribe utilizando identifi-
En inglés las filas de las ta- se encar- cadores, también llama-
blas se conocen por “row”. ga de separar el texto de dos tags, término que
se puede traducir los bordes de la tabla. proviene del inglés “eti-
por “table row”, en castella- quetas”. Estos identifi-
cadores son órdenes
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- que das al navegador y
que él interpreta para
mostrar la página web
y las dos siguientes se en- páginas. Pero antes de ello Seguidamente cierra el edi- tal y como deseas. Cada
cargan de los títulos de la co- cierra el navegador con un tor pinchando sobre y identificador es una or-
lumna.Después verás que és- click en . abre la carpeta den y puede indicar atri-
tos aparecen en negrita: butos del texto, posición

es la abreviación en in-
Tablas más de imágenes, hipervín-
culos, así como cual-
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
texto .
quier otra propiedad de
la página.

nea, vienen otras tres líneas apartado y en los siguientes más desahogada . La línea al completo debe 03 Layout
como la siguiente: vas a ver la manera de me- tener el siguien- Es la ordenación y colo-
. jorar su aspecto. te aspecto cación de todos los ele-
Éstas contienen los datos que El parámetro mentos que componen
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
una página web, es de-
cir textos, imágenes, ta-
blas, gráficos, etcétera.
do, datos de la tabla. ro con las tablas que has de la tabla co- También son elementos
Puedes ver que siempre creado antes . rrespondiente del layout los colores y
el tipo de letra.
aparecen tres líneas con se tiene que re-
A la hora de realizar tus
o que se com- presentar con el diseños ten en cuenta
plementan con sus respecti- color indicado. que un layout claro per-
vos o . Con En este ejem- mitirá una navegación
estos tags, el navegador sabe plo, el color es mucho más facil.
que se trata de una tabla con el amarillo (en
tres columnas. Al final del inglés “yellow”). 04 Fichero
texto puedes observar tam- plantilla
bién , que le indi-
ca al navegador que termina
la tabla.
4Para colo-
rear sola-
mente una cel-
Seguro que recordarás
aquellas hojas rayadas
que, puestas bajo una
da de la tabla, hoja en blanco, permi-

5 Ya es hora de que des un


vistazo al resultado. Haz
click sobre y sobre
tendrás que
desplazarte
hasta el final
tían escribir sin torcer-
se. Pues bien, el con-
cepto es similar, un fi-
. Seguidamente cie- del código chero que incorpora los
rra el editor con un click so- fuente. En la lí- componentes estándar

2
bre y abre la carpeta con Primero vas a solucionar que en la versión anterior.Pe- nea donde se define la cel- del código de una pági-
un doble click sobre las estrecheces de tu ta- ro el aspecto de tu página da que quieres modificar na web, y que al mismo
bla y a separar un poco las web aún se puede mejorar. deberás hacer click en tiempo sirve como re-
cordatorio de la estruc-
tura de este tipo de fi-
Cómo colorear cheros, te permite
Haz doble click sobre
la tabla ahorrar tiempo a la hora
de introducirla.
.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-
05 Código nuación . La sobre y en , tuar dentro de una línea en
Consiste en una serie de línea al completo tendrá el el fichero . blanco
instrucciones y coman-
dos de programación
que se utilizan para indi-
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
car al navegador lo que
debe hacer cuando
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
muestra un archivo que
tiene formato HTML. 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-
Este término también lo “pink”, es decir, rosa. pulsar C y ' . tabla. El parámetro lizarás una fila con dos cel-
emplean los programa- das. Empieza con la
dores para referirse al
archivo que contiene las
instrucciones de un
6 Guarda los cambios con
un click sobre
sobre
y
. Seguidamen-
primera. En ésta uti-
lizarás uno de los pa-
rámetros más impor-
programa. te cierra el editor pinchan- tantes de las tablas:el
do sobre y abre la car- , que se
06 Navegador peta con un doble click encarga de situar el
Es un programa que sobre el icono contenido de la cel-
permite visualizar el da en su parte supe-
contenido de las pági- rior. Si no haces uso
nas web de Internet. de este parámetro el
También se utiliza para contenido de la cel-
descargar ficheros o ver Dentro de la carpeta de- da se situaría a media
contenidos multimedia. berás hacer doble click so- altura y no se dife-
En la actualidad, los na-
bre y así podrás renciaría de la celda
vegadores que se utili-
zan más frecuentemente
contigua.Éste sería el
son el Explorer, de Mi- (en castellano “ancho”) de- resultado:
crosoft, y el Navigator, be ser de 600 puntos. Ade-
de Netscape. más, vas a alinear la tabla en
el centro de la página. Esto
07 Parámetro se hace con el comando
Cierta información que (“alineación”) y con
determina el funciona- el valor para cen-
miento de un programa. tro. El último parámetro,
También se le denomina , se encarga Por el contrario, con el co-
argumento. de separar el texto de los mando el as-
bordes dentro de la tabla. pecto resultante será el si-
08 Celda guiente:
La unidad más pequeña comprobar los cambios de
de una tabla es la cel- colores en tu tabla.
das. En los ficheros de
HTML las tablas se pue-
den utilizar para intro- ¿Texto completo?
ducir datos numéricos, Si el resultado no ha sido
textos, imágenes, etcé-
igual al que puedes observar
tera. Las tablas se com-
ponen de columnas (lí-
sobre estas líneas, conviene
neas de celdas verti- que compares tu código con A continuación vas a co-
cales) y filas (líneas de el código completo que pue- lorear la columna de la iz-
celdas horizontales). des encontrar aquí . quierda para resaltarla del
A diferencia de las ta- resto. Para ello debes usar el
blas que se pueden en- Mejorar el layout comando
,
contrar en otras aplica- con la ayuda
ciones, las de HTML no que ya debería resultarte fa-
permiten realizar cálcu- delas tablas miliar y que en este caso co-
los con su contenido. Las tablas no sólo son úti- lorea la celda con un marrón
les para presentar resultados. claro. Finalmente sólo te
08 Frame En este apartado verás cómo queda asignar a la celda una
Sirve para presentar en utilizarlas para mejorar el as- anchura de 150 puntos. Por
un mismo documento pecto de tus páginas. tanto, para la segunda co-
varias páginas a la vez, Insertarás en la página,den- lumna, quedan 600 puntos
quedando limitadas por tro de una columna adicio- menos 150 puntos, es decir
unos bordes que, en al- nal, información general así 450 puntos. El mismo nave-
gunos casos, pueden como una dirección y un nú- gador ya calcula ese valor,
ser modificados por el mero de teléfono. por lo que no tendrás que
usuario. Es un compo-
Para ello tendrás que utili- introducir ningún valor pa-
nente muy utilizado ya
que permite presentar la
zar el fichero con ra la segunda columna.
información de un modo el que ya has trabajado en an-
claro y ordenado. 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
te texto:
Presiona la tecla C
y escribe el siguien- ! Resumen de este capítulo
Puedes leer más sobre el de letra adecuado, pulsa C . Con En este apartado te explica-
tag en la anterior y escribe: ello cerrarás la celda e indi- Parámetros
mos los puntos más impor-
entrega de este curso. carás al nave- tantes de este capítulo.
de las tablas
gador que has alcanzado el
Con definirás
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. Elementos básicos
de las tablas
los bordes de la tabla. En
caso de que desees no in-
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
que indica al
corporarlos, bastará con
que omitas este paráme-
navegador que a continua- tro, y así no se dibujarán.
exactamente tal y como te ayuda de la tecla & hasta el tan solo tendrás que pinchar
ción viene una tabla, mien-
indicamos a continuación. final del código fuente. sobre . Seguidamente haz
tras que se en- es el pa-
doble click sobre la carpeta
cuentra al final de la misma rámetro que permite indicar
en la que se encuentre guar-
para indicárselo al nave- al navegador la distancia
dado el fichero, que en este
gador. que, dentro de cada celda,
caso será
debe establecerse entre el
Las etiquetas o tags, para texto y los bordes.
construir las filas de la ta-
bla, son para iniciar El color de fondo de la tabla,
y después haz click sobre
una fila, y para de una fila, o de una sola
.
marcar el final de la misma. celda, se indica mediante el
parámetro .
12 Aquí puedes ver el
resultado final con
el navegador .
Los tags para delimitar cada
una de las celdas que for- Con podrás fijar el
man la tabla son para ancho de una tabla o de
su comienzo, y una celda.

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


13 Cierra el navegador
Internet Explorer
con un click sobre . Con
para indicar su final.
es el pará-
es muy común en Internet. pa que vas a terminar con esto termina esta entrega del Tu tabla puede contener en- metro que tendrás que utili-
Éste hace posible que cual- la tabla, tendrás que hacer curso. cabezados, facilitando así la zar para indicar que deseas
quiera que visite tu página click exactamente en este En las próximas entregas lectura de los datos conteni- que el contenido de una cel-
te pueda mandar un correo punto darás un repaso a los frames dos en ella, los tags que ten- da se sitúe en la parte supe-
electrónico con sólo hacer 09 (Pág. 64) , ya que con drás que utilizar serán rior de la misma.
click sobre él. Si el visitante estos elementos orga- , que indicará al na-
hace click sobre esta línea, nizarás mejor los con- vegador el principio del en- También puedes asignar un
automáticamente se abrirá tenido de tus propias cabezado, y que fondo a cada celda con el
su programa de correo elec- páginas señala el final de la misma. parámetro .
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

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
Algunos diseñadores web “enmarcan” sus páginas Ejemplo de formulario Nº 43
Qué son y para qué sirven los identificadores Nº 44
para que sean más vistosas y fáciles de usar. Por eso, Conceptos básicos del estilo en cascada Nº 45
enComputer Hoy te indicamos paso a paso cómo insertar Para
profesionales HTML con Java Nº 46
marcos y te damos consejos para colocarlos correctamente. Probando las páginas HTML Nº 47
Principios legales de las páginas de Internet Nº 48
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-
mes 02 , que en castellano
se puede traducir como
ejercicio con otras páginas,
pero tendrás que realizar al-
gunos cambios, como en el 1 Ejecuta el editor hacien-
do click en el menú
nú desplegable.
Después haz click sobre
y el botón .
3 Primero haz click a la de-
recha de
y, sin soltar el botón, arras-
“bordes” o “marcos”. nombre de los ficheros en y llevando el pun- El archivo se cargará en el
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
Programación en HTML, 7a Parte 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. 01 HTML
. Pulsa la tecla $ y escribe el Significa “Hypertext
código . Markup Language” y es
el lenguaje de progra-
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
mación utilizado para
crear las páginas de In-
ternet. En él se definen
Como puedes ver, se trata y la segunda cierra todo el la posición, forma y fun-
de un documento que sólo documento. cionamiento de las imá-
tiene enlaces que te llevan a genes, los textos y los
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
hipervínculos incluidos
en la página web.

nuevo que has utilizado es és- .Se abrirá una 02 Frames


te: . En ventana en la que debes es- Son marcos o cuadros
el siguiente apartado te ex- cribir el nombre de fichero que se utilizan para
plicaremos detalladamente y pulsar el botón mostrar varias páginas a
su funcionamiento. . Para cerrar el Bloc la vez dentro de la mis-
de notas haz click en . ma ventana. Cada frame

5 Guarda el fichero ha-


ciendo click sobre las op-
ciones y .
rámetro es-
pecifica que en la parte iz-
quierda se debe construir
de los ficheros cuyos enla-
ces se encuentran en la pá-
gina 6 Si deseas ver el resulta-
do haz doble click en la
puede contener un do-
cumento HTML distinto
u otros frames. Lo más
Después cierra la ventana una columna con un ancho que has creado en el primer carpeta: habitual es colocar un
pulsando en . fijo de 150 puntos y que la apartado. Si te fijas en los hi- frame en la parte iz-
quierda con los hiper-
segunda columna ocupará el pervínculos de este fichero
vínculos de la página.
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- Navegador
de los frames nas escribiendo su anchura La traducción de “Target” al critorio y en el archivo:
03
Programa que permite
Ahora vas a crear un Fra- separada por comas. Por castellano es “Destino”.Es de- visualizar el contenido
me-Set 08 (Pág 68) . Este ele- ejemplo: cir, el enlace apunta al mar- de las páginas web de
mento, además de dividir la introduce una columna de co que tiene como nombre Internet. También se uti-
ventana del navegador en di- 100 puntos de ancho en la “contenido” (el de la dere- .
liza para descargar fi-
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 .
cheros o ver contenidos
multimedia. En la actua-
lidad, los navegadores
asignados a una columna realmente en la página que se utilizan más fre-

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
cuentemente son el Ex-
plorer, de Microsoft, y el
Navigator, de Netscape.
En caso contrario, tendrás ficiente con dos columnas. utilizado el parámetro
que abrirlo haciendo doble Además debes escribir un se- que 04 Hipervínculo
click sobre el icono gundo parámetro. Con define el valor inicial de ca- También se conoce co-
indicas al nave- da marco cuando se presen- mo enlace. Es una re-
gador que se eliminen las se- ta la página en el navegador. ferencia a otra página
que se encuentra en la
paraciones entre los bordes Cuando hagas click sobre
red Internet. Se suele
de cada marco. los enlaces que aparecerán distinguir por tener un
que se encuentra en el Es- en el marco izquierdo del Para comprobar el fun- color distinto al resto
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
del texto, estar subraya-
do o representado por
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
una imagen. Al hacer
click sobre él, el navega-
dor carga la página co-
debes escribir esto: . be las líneas . ven- rrespondiente.
La entrada tana.
se encarga de definir 05 Escritorio
con qué se rellenará Superficie de trabajo de
cada marco. El pará- Windows 95 y 98. En
metro , que vie- ella puedes dejar todo
Seguro que las cuatro pri- ne de “source”, indica el fi- tipo de ficheros y aplica-
meras líneas de código te re- chero HTML que debe ciones para que estén
sultan muy familiares.Son las insertarse en el marco.En es- accesibles en cualquier
mismas que aparecen en to- te ejemplo se trata del fiche- momento.
dos los archivos HTML. Pero ro que En el Escritorio se en-
no has utilizado el identifi- creaste en el primer aparta- cuentran los iconos más
importantes del sistema,
cador 09 (Pág 68) ,ya do. A continuación se escri-
como el de Mi PC, la Pa-
que en este tipo de docu- be el parámetro . pelera de reciclaje, Mis
mento no tiene ningún sen- Echa un vistazo a la segun- documentos o la barra
tido. En su lugar aparece la da línea de código: del menú inicio.
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

8

Cierra el navegador In- Esta línea crea un nuevo v Divide la ventana del nave- Ü Para terminar se completan
ternet Explorer con un Frame-Set. En este caso apa- gador en dos marcos vertica- las dos secciones de frame-set
06 Código fuente click sobre . Si lo deseas rece la expresión que les.El de la parte izquierda tie- con sus identificadores de cie-
Serie de instrucciones y puedes mejorar el aspecto de indica al navegador que el ne un ancho de 150 puntos y rre correspondientes.
comandos de programa- la página realizando algunos nuevo marco debe dividir la el de la derecha todo el espa- Algunas líneas han sido des-
ción que se utiliza para cambios en el fichero “nave- ventana horizontalmente. cio que sobre. plazadas hacia la derecha uti-
indicar al navegador lo ´ Rellena el primer frame
gacion.html”. Por ejemplo, lizando la tecla Ç . Esto no
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 “navegacion.html” y lo
es imprescindible para que
el código funcione correcta-
mente, pero es una práctica
te término también lo
emplean los programa- de fondo siguiendo los pasos Ya sabes lo que significa. llama “nav”. bastante habitual en los pro-
dores para referirse a que te hemos indicado en las Coge el fichero “exter- V Dentro del segundo mar- gramadores, ya que permite
los archivos que poseen entregas anteriores. no.html” y lo inserta en el co se abre otro frame-set que hacer el código más legible.
las instrucciones de un marco de nombre “exter- divide horizontalmente la
programa. Frames
en cascada
no” que acabas de crear. zona de la derecha asignan-
do una altura de 50 puntos 10 Para guardar el fiche-
ro haz click sobre
07 Parámetro
Información que deter- Un frame se puede guardar 7 Seguidamente, y en este
orden, presiona las teclas
para el marco superior. La
parte inferior tendrá el resto
y .

mina el funcionamiento
de un programa. Tam-
bién se conoce como ar-
a su vez dentro de otro fra-
me. Esto quiere decir que
dentro de un marco podrás
N, ( y Ç. Así pasas a la si-
guiente línea e introduces
un tabulador.
de espacio disponible.
ä Estas dos líneas de código
rellenan los dos marcos hori-
11 Finalmente tienes que
crear el fichero “ex-
terno.html”. Para hacerlo
gumento. Los paráme- incluir otros.El resultado son zontales. 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-
V
ä
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 do anterior. Pero al guar-
e indicar los documen- seleccionar la entrada darlo utiliza el nombre
tos HTML que serán . A conti- .
presentados en ellos. nuación debes hacer doble
También puede contener
otros frame-sets.
click sobre el icono del fi-
chero . 12 A continuación repite
el paso 3 del apartado
“Preparación” y escribe las
09 Identificador
El lenguaje HTML se es-
cribe utilizando identifi-
3 A continuación se abrirá
el fichero .
instrucciones siguientes:

cadores. Estos son ór-


denes que das al
Haz click sobre
sobre
el nombre de archivo
y
. Escribe 13
ciones
En la barra de menú
haz click sobre las op-
y .
navegador para que
muestre la página web y pulsa el botón Y el resultado debe ser el
tal y como deseas. Cada . siguiente: la ventana del na-
identificador es una or- vegador se divide primero
X ¿Conviene usar frames?
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
páginas HTML utilizan los fra-
tre tantas opciones. Además,
la creación de este tipo de pá-
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:
mes. Para algunos son una
herramienta imprescindible,
mientras que para otros re-
ginas resulta más compleja pa-
ra el diseñador.
A algunas empresas no les gus-
10 Webmaster sultan superfluos. ta nada que enmarquen sus pá-
A los diseñadores de pá- Cada uno tiene su parte de ra- ginas dentro de un frame (ver
ginas web también se zón. Por un lado, si se utilizan apartado “Frames en cascada”).
les llama webmasters. con moderación, pueden ser Para evitarlo, utilizan unos
Cuando completes este muy útiles porque simplifican “destructores de frames” que
curso de programación mucho el diseño de las pági- eliminan todos los marcos de
en HTML tendrás todos nas web y hacen que sean mu- la página para que sus conte-
los conocimientos nece-
cho más claras. Pero si se nidos aparezcan ocupando to-
sarios como para consi-
abusa de ellos pueden llegar a da la ventana del navegador. En
derarte un webmaster
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
programación HTML. Pero
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 ! Resumen de este capítulo


Ya sabes cómo insertar frames. Un número mayor puede hacer Aquí encontrarás un peque- Tras estos dos parámetros hay Frames
Ahora te daremos unos cuan- hace que la página se convier- ño resumen de esta entrega que indicar los valores que es- encadenados
tos consejos para que los utili- ta en un auténtico caos. Ten en del curso. pecifican el ancho del frame. Los frames pueden contener
ces correctamente: cuenta que cada frame debe ser Estos argumentos se pueden a otros frames a la vez. Esto
Consejo 1: los frames son muy lo suficientemente grande para Frame-set expresar en puntos de pantalla significa que, dentro de un
prácticos para simplificar la na- presentar el documento HTML Los frames (marcos) se de- o en tanto por ciento. frame, en vez de un docu-
vegación dentro de páginas, pe- que deseas meter dentro. finen en un fichero propio El símbolo especial sirve mento HTML, se puede in-
ro no hay que utilizarlos para Consejo 3: en vez de es- que se llama frame-set. Es- para asignar al frame corres- sertar otro frame-set. Este
mucho más. Si por razones es- cribir pue- te debe hacer referencia a pondiente todo el espacio de frame-set vuelve a dividir el
téticas deseas dividir tu página, des indicar el valor en tanto los documentos HTML que la ventana que deja libre el espacio del marco dentro de
te recomendamos utilizar las ta- por ciento. Por ejemplo, con contiene. frame anterior. los bordes que lo delimitan.
blas. En la sexta entrega del cur- el navega- El número de frames debe ser En general, el uso de frames
so (Computer Hoy nº 41 pág. 62) dor asignará un diez por cien- División igual al número de valores se- puede resultar muy útil para
viste cómo diseñar una página to de la ventana para el primer Los frames se pueden divi- parados por una coma que se organizar tus páginas, pero
utilizando tablas. frame y dejará el noventa por dir de dos formas: hayan introducido. Por ejem- no debes abusar de ellos, ya
Consejo 2: no dividas tu pá- ciento restante para el segun- verticalmente con: plo, que complican mucho el di-
gina con más de tres marcos. do marco. horizontalmente con: genera tres frames. seño y manejo de las páginas.

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 80

Foto: Stock Fotos S.L. 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
Insertar un formulario en tu página web es la forma más Distintos formatos de escritura Nº 40
fácil de conseguir que los visitantes puedan ponerse en División de páginas con tablas Nº 41
contacto contigo y mandarte cualquier tipo de información Para Insertar y dimensionar marcos Nº 42
expertos
o sugerencia a través de un mensaje de correo electrónico. Ejemplo de formulario Nº 43
Qué son y para qué sirven los identificadores Nº 44
n la anterior entrega del sitantes de tu página podrán plantilla que creaste en la Conceptos básicos del estilo en cascada Nº 45

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-
Para
profesionales HTML con Java
Probando las páginas HTML
Principios legales de las páginas de Internet



46
47
48
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 Escritorio 06 (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
Programación en HTML, 8ª Parte Profesional


! Formularios y Javascript HTML
6
01
Escribe estas dos líneas , que per-
de texto . mitirá asignar el texto que Los formularios no sólo son tal manera que al hacer click Significa “Hypertext
Con la primera das la or- se introduzca en el campo útiles para recopilar y enviar sobre ellos aparezcan determi- Markup Language” y es
el lenguaje de progra-
den de mostrar el título del del mensaje a una variable. datos, también puedes hacer nados datos en la ventana del
mación utilizado para
primer elemento del for- otras muchas cosas. Te resul- navegador. Los conocimientos
crear las páginas de In-
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
en tus páginas aquellos datos
que piensas modificar con
de Javascript necesarios para
realizar este tipo de aplicacio-
nes los verás en la undécima
ternet. Con él se definen
la posición, forma y fun-
cionamiento de las imá-
formato del campo de en- Javascript. Por ejemplo, pue- entrega del curso HTML (Com- genes, los textos y los
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
hipervínculos incluidos
en la página web.

para introducir datos. El ar- se han introducido todos los programa que 02 Frames
gumento in- datos del formulario. Pre- Tras el signo de interro- debe ser indicado junto al Marcos o cuadros que
dica que se trata de una úni- siona la tecla $ y escribe gación aparecerán el nom- identificador . En se utilizan para mostrar
ca línea de texto. estas dos líneas de código . bre y el contenido de cada este ejemplo no lo has he- varias páginas a la vez
El parámetro 09 (Pág. 78) Con ellas se realiza un salto campo. Por ejemplo, cho y el resultado de las en- dentro de la misma ven-
de línea y se dibuja un bo- tradas aparece en el campo tana. Cada frame puede
te sirve para especificar la tón.Cuando los usuarios que se habrá convertido en de direcciones. En el si- contener un documento
variable 10 (Pág. 78) donde visiten tu página escriban en y, depen- guiente apartado vas a ver HTML distinto u otros
se almacenará el valor de en- ella un mensaje tendrán que diendo de lo que hayas te- cómo puedes enlazar tu for- frames. Lo más habitual
trada del campo.Finalmente pulsar este botón para man- cleado con anterioridad en mulario con un programa. es colocar un frame en
con indicas al dar los datos. Para crearlo el formulario, aparecerá un la parte izquierda con
todos los hipervínculos
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
de la página.

03 Navegador
sita identificador de cierre. “Submit” se puede traducir está pensada para ser pro- click sobre . Programa que permite
al castellano como “enviar”. visualizar el contenido
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
de las páginas web de
Internet. También se uti-
liza para descargar fi-
una dirección de correo elec- se verá escrito dentro del cheros o ver contenidos
trónico. El campo que per- botón. multimedia. En la actua-
mitirá introducir el texto del lidad, los navegadores
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
que se utilizan más fre-
cuentemente son Explo-
rer, de Microsoft, y Na-
tecla $ y escribir las si- código fuente al completo vigator, de Netscape.
guientes líneas de código . tiene el siguiente aspecto .
04 Código fuente
Serie de instrucciones y
comandos de progra-
mación que se utiliza
para indicar al navega-
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
dor lo que debe hacer
cuando muestra un ar-
chivo que tiene formato
tulo del elemento en negri- cierra el Bloc de notas pul- HTML. Este término
ta y vuelves a saltar una sando sobre . también lo emplean los
línea para que el documen- programadores para re-
to sea más legible.
A continuación viene un
bloque de texto que está de-
12 Haz doble click sobre
la carpeta
ferirse al archivo que
posee las instrucciones
de un programa.
finido con la orden
. Los siguientes 05 Correo
dos parámetros: que se encuentra en el Es- electrónico
para el número critorio. Dentro de ella haz Sistema que permite en-
de columnas y otra vez doble click sobre el viar y recibir textos a
para el número de filas, te icono través de la red Internet.
deben resultar familiares, ya Los mensajes de correo
que fueron tratados en la an- electrónico tardan unos
terior entrega de este curso. pocos segundos en lle-
gar al buzón del destina-
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á- tario desde donde pue-
den ser descargados en
cualquier momento, y
podrá escribir el mensaje.Es Si lo deseas, puedes rellenar pueden llevar adjuntos
decir, el navegador reserva- los campos y hacer click so- ficheros de todo tipo:
rá un ancho de 40 caracteres bre el botón . En la fotos, música, películas.
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
06 Escritorio código darán vida a tu for- para abrirlo.
Superficie de trabajo de mulario. Sólo necesitas una
! Formularios con CGI
Windows 95 y 98. En
ella puedes dejar todo
tipo de ficheros y aplica-
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
hace falta un programa que
interés. Sólo tiene que ser ca-
paz de entenderse con la pági-
ciones para que estén procese los datos. Esta labor la na web que envía los datos.
accesibles fácilmente en
tro ejemplo vas a utilizar un cio ( ) e introduce el si-
servicio de libre acceso que guiente texto: . realizan los programas CGI, si- A su vez, el programa devuel-
cualquier momento. glas de “Common Gateway In- ve un resultado al usuario que
En el Escritorio se en- permite gestionar gratuita- El parámetro in-
mente los formularios. Lo dica al navegador dónde tie- terface”, que se puede traducir cumplimenta el formulario. Es-
cuentran los iconos más al castellano como “Interface te resultado se muestra en el
importantes del sistema, puedes encontrar en la di- ne que remitir los datos del
rección de Internet - v . formulario y común para la transmisión de navegador utilizando una pági-
como el de Mi PC, la Pa- datos”. El CGI es un programa na web. Puede ser un mensaje
pelera de reciclaje o Mis Su funcionamiento es muy especifica
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-
documentos.
gina de Internet rellena tu electrónico. usuario y la prepara para en- vío de un correo electrónico, el
07 Identificador formulario.Tras 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
El lenguaje HTML se es-
cribe utilizando identifi-
cadores. Estos son ór-
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-
guaje esté programado. Puede
matemática. No no todos los
servidores de Internet ofrecen
denes que das al servidor utiliza un programa línea de código. Haz click tratarse de una base de datos, a sus usuarios un interface CGI
navegador para que que recoge los datos del for- justo en este punto un programa que mande men- y por tanto no todos permiten
muestre la página web mulario y los remite, vía co- y pulsa la tecla $ . A conti- sajes o que calcule los tipos de utilizar formularios.
tal y como deseas. Cada rreo electrónico, en el mis- nuación escribe el siguien-
identificador es una or- mo orden que han sido
den y puede indicar atri- introducidos, a tu dirección
butos del texto, posición
de e-mail.
de imágenes, hipervín-
culos o cualquier otra
propiedad de la página.
1 Inicia el Bloc de notas
con un doble click sobre:
08 Campo
de entrada
Recuadro que aparece te texto .
en algunas páginas web . El identificador es que el remitente no ha de co- cifica tu dirección de co-
para que los usuarios un campo de entrada. Pero nocer cuál es tu dirección de rreo electrónico. Esta in-
que las visitan puedan
cumplimentarlo con da-
tos. Posteriormente to-
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
da la información que se y selecciona la opción fica “oculto”. Esto implica Esta indicación es utilizada
introduzca en la página . Final- que los campos no van a apa- por el programa para poder es un dato de ejemplo. Para
se procesa por un pro- recer en el formulario, ya saber en qué línea se espe- que todo funcione correc-
grama que envía las en-
tradas a una dirección
de correo electrónico.
! Formularios más avanzados
09 Parámetro
Es una información que
Además de los campos de tex- mentos tiene el aspecto si-
determina el funciona-
to que has visto en el formu- guiente .
miento de un programa.
También se conoce co- lario de este ejemplo, existen Como ya sabes, el identifica-
mo argumento. Los pa- otros sistemas que permiten dor sirve para indicar
rámetros pueden tener introducir datos. Por ejemplo, que a continuación hay un
valores de todo tipo. Por las listas despegables que fa- Este parámetro es el que se- guiente resultado campo para introducir datos.
cilitan al usuario seleccionar rá utilizado como nombre de . El siguiente parámetro es
ejemplo: números, tex-
tos, expresiones o inclu- un valor determinado entre las variable para devolver el re- y se utili-
so el nombre de un ar- opciones de una lista o los sultado de la selección. za para determinar el aspec-
chivo. Estos valores controles de selección con los son las distintas po- to del campo. Con esta indi-
siempre van acompaña- que podrás presentar en pan- sibilidades que aparecerán en cación estás generando una
dos de una instrucción o talla varios elementos que se la lista para poder escoger. A Estas listas desplegables son casilla vacía, mientras que
un identificador HTML pueden seleccionar pulsando continuación viene muy prácticas cuando deseas con y vuel-
que indica qué es lo que sobre ellos. El código fuente , que es el que los visitantes de tu página ves a determinar con qué va-
se debe hacer con ellos. de una lista despegable tiene valor que será almacenado en puedan seleccionar entre las lor y con qué nombre se pa-
el siguiente aspecto . la variable en el caso de que opciones que les ofreces. sa la variable al programa que
10 Variable Con le indicas al la opción sea seleccionada y Otro elemento importante en procesa el formulario.
Elemento de un progra- navegador que lo que viene a , que es el texto los formularios son las cajas El resultado obtenido con es-
ma que contiene un da- continuación es una lista des- que aparecerá en el menú pa- de selección, unas pequeñas te ejemplo debe ser similar a
to que puede variar en plegable que contiene varios ra que puedas seleccionarla casillas que el usuario este:
tiempo de ejecución.
elementos entre los que se con el ratón. puede activar con un simple
Por ejemplo un núme-
debe seleccionar uno. Si realizas este ejemplo co- click de ratón .
ro, texto, fecha o cual-
El nombre rrectamente obtendrás el si- El código fuente de estos ele- .
quier otro tipo de infor-
mación. 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 3 V (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 .

X Resumen de este capítulo


Como en otras ocasiones, a escribe entre los identifica- Cajas de texto
continuación te mostramos dores y . Cuando utilizas la orden
un pequeño resumen con Para que el formulario fun- puedes
los contenidos más impor- cione correctamente necesi- crear una caja para introdu-
tantes que han sido descri- tas utilizar un programa que cir varias líneas de texto. Con
tos en este capítulo del cur- gestione los resultados. El especificas la
so de programación HTML: programa que vas a utilizar anchura en caracteres y con
debe estar definido con el pa- el número de
Formularios rámetro . líneas que tendrá la caja de
Los formularios son páginas texto para escribir datos.
web con varios campos que Entrada de datos
deben ser rellenados por el Para presentar un campo de Enviar los datos
usuario a través del navega- entrada de datos debes utili- Por último debes crear un bo-
dor. Posteriormente se debe zar el identificador . tón que permita enviar los da-
pulsar un botón para que to- Si lo acompañas del paráme- tos cuando se termine de re-
➜ Direcciones online dos estos datos sean pre- tro indicarás llenar el formulario. Para
sentados o enviados a la di- al navegador que a continua- hacerlo debes utilizar el iden-
-v www.melodysoft.com rección de correo electrónico ción se presentará una pe- tificador acompa-
-´ www.hotmail.es que especifiques. El código queña caja donde se podrá in- ñado del parámetro
-V www.latinmail.com fuente de los formularios se troducir una línea de texto. .

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

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


Fundamentos: crear el primer archivo HTML Nº 35
Cómo diseñar y dar formato a los textos Nº 37
Para este capítulo del curso no hace falta que compres Para
principiantes Listas, barras y vínculos Nº 38
una bola de cristal. Te bastará con aplicar los comandos Insertar imágenes Nº 39
ocultos del HTML que te explicamos a continuación Distintos formatos de escritura Nº 40
y conseguirás algunos efectos mágicos para tus páginas. División de páginas con tablas Nº 41
Para Insertar y dimensionar marcos Nº 42
expertos
Ejemplo de formulario Nº 43
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-
Para
Para qué sirven los identificadores ocultos
Conceptos básicos del estilo en cascada
profesionales HTML con Java
Probando las páginas HTML




44
45
46
47
señar formularios 02 para que ya conoces, estos tienen ficador podrás, Principios legales de las páginas de Internet Nº 48
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
Programación en HTML, 9ª Parte Profesional

2 9 completa de un servidor de


Haz click en la ventana la cuarta entrega del curso Haz doble click sobre el
del Bloc de notas sobre (puede ser cualquier otro). icono Internet 12 (Pág. 78) a otro. O
las opciones y . Este enlace puede resultar deseas cambiar el nombre 01 HTML
Después pulsa el botón útil para los visitantes que de todas tus páginas para se- Significa “HyperText
y selec- utilicen un navegador anti- del Escritorio y después en guir un esquema concreto. Markup Language” y es
el lenguaje de progra-
ciona el tipo de fichero guo que sea incapaz de en- ¿Qué pasará entonces con
mación utilizado para
. Haz do- tender el identificador los visitantes que busquen crear las páginas de In-
ble click sobre el archivo . Con . tus páginas? Muy fácil, utili- ternet. Con él se definen
. La ventana cierras la orden de alineación la posición, forma y fun-
mostrará la plantilla . central. cionamiento de las imá-
genes, los textos y los

6 Para que la página fun-


cione debes utilizar el
comando . Pulsa la
hipervínculos incluidos
en la página web.

tecla ¡ y, sin soltarla, pre- 02 Formularios


siona H . A continuación Algunas páginas web
pulsa varias veces & hasta disponen de campos
que el cursor 10 (Pág. 78) donde los visitantes
quede situado justo delante pueden introducir datos
de . para ser procesados por
un programa que pre-

3 Haz click en las opciones


y . Es-
7 Pulsa la tecla $ y des-
pués . A continuación
inserta la línea .
senta un resultado o los
envía a través de correo
electrónico al responsa-
cribe y pulsa so- zando el identificador ocul- ble de la página.
bre el botón . El identificador es- to podrás llevarles 03 Identificador

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
El lenguaje HTML se es-
cribe utilizando identifi-
cadores. Estos son ór-
nes que has utilizado varias forma al navegador que de- espera accionará automáti- que debes hacer para seguir denes que das al
veces en anteriores entregas be “refrescar” el contenido camente y presentará el se- este procedimiento. navegador para que
del curso.Si no las tienes pue- de su ventana y gundo documento . muestre una página web
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
tal y como deseas. Cada
identificador es una or-
den y puede indicar atri-
página HTML. Haz click con gina utilizada. ciendo click en . del primer apartado. butos del texto, posición
el botón izquierdo en . significa “conte- de imágenes, hipervín-
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
.
culos o cualquier otra
propiedad de la página.

punto y coma. Primero se in- Imagina que no te queda la casilla es- 04 Palabras
dica el tiempo en segundos más remedio que desplazar- cribe y pulsa el clave
que el navegador debe es- te con tu página de inicio botón . Términos que se introdu-
perar antes de abrir la nue- cen cuando se desea
va página, en este caso . buscar un registro en
una base de datos. Por
Después aparece el archivo
ejemplo cuando deseas
Sin soltar el botón, mueve el HTML que debe utilizar. En encontrar información en
puntero a la izquierda hasta esta ocasión se trata de un buscador de Internet.
que la línea aparezca selec- , que es
cionada . una página local almacena- 05 Buscadores
da en el disco duro, pero Sitios web que permiten

5
Con
Escribe las líneas si-
guientes: .
conseguirás
puede tratarse de cualquier
otra página de Internet.
buscar información en
Internet. Para utilizarlos
debes introducir las pa-
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-
labras clave con las que
deseas realizar la bús-
queda. Posteriormente
línea, dos imágenes y un tí- be tener este aspecto: . aparecerá una página
tulo corto. Con la expresión Haz click en y con los resultados orde-
para guardar los nados por importancia.
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- 06 Navegador
documento HTML creado en tas haciendo click en . Programa que permite
visualizar el contenido
de las páginas web de
Internet. También se
puede utilizar para des-
cargar ficheros de la
Red o ver contenidos
multimedia.

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 .
puedes seguir las instruc- . ra”, lo que indica que la pá- En la siguiente entrega ha-
13 World 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-
tante es que toda la in- 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
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. -v www.yahoo.com
búsqueda de datos. y selecciona la opción nuación aparece una orden -´ www.excite.es
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
-V www.webservicio.com

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 Algunos servidores de Inter-
por su contenido e im- net te pueden ayudar a gene-
portancia.

15 Proxy
rar identificadores <meta>.
Uno de ellos es: - V . 5 Haz click sobre el botón
que se
encuentra al final de la pági-
Ordenador que actúa
como intermediario en-
tre tu ordenador y la red
1 Inicia el navegador de In-
ternet haciendo doble click
sobre: .
na. En unos pocos segundos
aparecerá un texto con los
identificadores correspon-
Internet. Puede ofrecer dientes .
algunos servicios adi- Con esta página se pueden
cionales de seguridad, generar algunos identifica-
administración y caché.
Normalmente se en-
cuentra en el ISP, pero
2 Para saltar hasta la línea
de direcciones del nave-
gador pulsa la tecla % y sin
dores extra, aparte de los que
te hemos explicado en este
capítulo.
las empresas suelen te-
ner un servidor proxy
para conectar todos sus
soltar presiona la R .

.
6 Para seleccionar los iden-
tificadores, haz click con
equipos a Internet utili-
zando una red interna. 3 Escribe la dirección
y pulsa $ .
el ratón al principio de la pri-
mera línea
y, sin soltar, desplaza el pun-
16 ISP
Proveedor de servicios
de Internet. Ofrecen a
4 Aparecerá la página del
metagenerador 18 . In-
troduce los datos en los cam-
tero hacia la parte inferior de-
recha. Pusa ¡ y al mismo
tiempo C para copiar el tex-
sus clientes una cone- pos unos detrás de otros, por to. Después, abre el archivo de
xión a la red Internet, co- ejemplo: . plantilla tal y como te hemos
rreo electrónico, chat, Si no deseas rellenar alguna descrito anteriormente e in-
news y un teléfono de casilla puedes dejarla vacía. serta el texto haciendo click en
consultas. Los gratuitos Para acceder a la parte infe- y . Los iden-
tienen algunas limitacio- rior de la página debes pulsar tificadores deben quedar en-
nes y los de pago ofrecen en el de la barra de des- tre las líneas de comando
más servicios con mayor plazamiento del navegador. y .
calidad.

17 Caché
Parte del disco duro que
utiliza el navegador para
! Resumen de este capítulo
almacenar las páginas
más visitadas. De esta Este es el resumen de los puedes colocar una gran can-
forma se evita el tener contenidos más importantes tidad de instrucciones del ti-
que transmitirlas a tra- de este capítulo: po . abrirse. Un en lugar de También puedes registrar tu
vés de la Red cada vez activará el proceso de nombre .
que quieres visitarlas y Meta-identificador Búsqueda apertura de forma inmediata.
se muestran mucho más El identificador tie- automática Búsquedas
rápido. ne varias utilidades. se puede utilizar Ayudas sin rodeos
18 Meta-
Entre otras, se encarga de abrir para abrir páginas automáti- de búsqueda Si actualizas con frecuencia
automáticamente documentos camente. Con el comando Los buscadores tienen en los contenidos de tus pági-
generador o ayuda a los buscadores a en- cuenta los identificadores nas, puedes ordenar al nave-
Programa o página web
en la que se introducen contrar páginas. Si lo deseas, indicas al navegador que de- para indexar las pá- gador que, cada vez que la
algunos datos para que también ordena al navegador be volver automáticamente al ginas. Para hacerlo breve- abra, elija la página directa-
genere el código HTML que abra un documento desde contenido actual .
de los identificadores el servidor original en lugar de Indica el tiempo, en este ca- mente se utiliza . mente del servidor y no de la
<meta>. cargarlo desde la memoria in- so cinco segundos, y especi- Las palabras clave se pueden memoria intermedia.
termedia. Entre los identifica- fica el documento que debe indicar con . Para hacerlo debes utilizar .
dores 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
Programación en HTML, 10ª Parte Profesional

12


Escribe Por ejemplo, el tipo de letra Haz doble click sobre y selecciona
Truetype 11 (Pág. 64 el icono: .
y pulsa . . 01 HTML
Significa “HyperText

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 .
Markup Language” y es
el lenguaje de progra-
mación utilizado para
que éste es de 14 puntos. crear las páginas de In-
El parámetro 12 (Pág. 66)
fija el color de 4 Ahora, vas a asignar las
propiedades del identifi-
ternet. Con él se definen
la posición, forma y fun-
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-
cionamiento de las imá-
genes, los textos y los
hipervínculos incluidos

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
en la página web.

02 Identificador
El identificador indi- iniciaste en el paso 6. El lenguaje HTML se
ca al navegador que a conti- Pulsa de nuevo la tecla $ escribe utilizando identi-
nuación aparece una planti- y escribe el identificador de ficadores. Estos son ór-
lla de formato, y el cierre . denes que das al nave-
parámetro gador para que muestre
una página web tal y co-
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.
mo deseas. Cada identi-
ficador es una orden y
ding Style Sheet”. Para ejecutarlas, selecciona puede indicar atributos
la línea del Como puedes ver,sólo el pri- guirlo, debes hacer click jus- del texto, posición de
imágenes, hipervínculos
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
o cualquier otra
propiedad de la página
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
que quieras aplicar.

03 Navegador
los navegadores que no co- entre los iden- Programa que permite
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-
visualizar el contenido
de las páginas web de
Internet. También se
cuadro “Utilización de co- perimentando mato a todos los identifica- puede utilizar para
mentarios” de la página 64 variaciones. dores que quieras.Tan sólo descargar ficheros de la
puedes encontrar más infor- La parte del texto que está debes introducirlos uno de- Red o visualizar algunos
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-
contenidos multimedia
comos sonidos, imáge-

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-
nes o incluso vídeos.

04 Palabras
trarse sin que se aplique nin- de estilo cador . En un principio, clave
guna plantilla. El código Si has seguido todas las ins- esto puede ser absurdo, pe- Términos que se introdu-
fuente completo es el si- trucciones del apartado an- ro si realizas las modifica- cen cuando se desea
buscar un registro en
Con fijas la configura- guiente: terior debes tener claro el ciones que te indicamos a
una base de datos. Por
ción del identificador funcionamiento de las continuación conseguirás de- ejemplo cuando deseas
. Esto significa que más ade- hojas de estilo. Resu- finir dos identificadores dis- encontrar información en
lante, en el documento, to- miendo, al principio tintos utilizando muy pocas un buscador de Internet.
dos los apartados que co- del código fuente de- líneas de código. Los términos introduci-
miencen por y fines un nuevo identi- dos deben definir lo más
terminen por

instrucciones de formato
ten-
drán esta configuración. Las
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
exactamente posible el
término que se busca.

van siempre precedidas por color de letra especí- 05 Buscador


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:
Sitio web que te permite
localizar páginas de In-
ternet relacionadas con
tima tendrás que escribir la posibilidades.Siguien- el tema que desees. Pa-
llave de cierre . do los pasos que te va- En un principio has fijado el ra utilizarlo debes intro-
La primera instrucción de mos a indicar a conti- tamaño de letra ducir las palabras clave
formato es nuación podrás para el con las que deseas reali-
, con ampliar las propieda- identificador y ahora zar la búsqueda. Poste-
ella especificas el tipo de le- des de los identifica- lo has cambiado con riormente aparecerá una
tra. En este caso hemos uti- dores de forma global . Esto página con los resulta-
dos en orden de impor-
lizado la fuente , o individual. puede parecer un poco ex-
tancia desde donde po-
aunque puedes usar cual- traño,pero es uno de los prin- drás acceder a ellos
Repite el paso 1 del
quier otra. Debes recordar
que siempre se debe escri-
bir entrecomillada, incluso 11 Haz click en y
. Después cie-
1 primer apartado.
cipios básicos de las hojas de
estilo en cascada. Las planti-
llas se pueden construir unas
pulsando sobre su enla-
ce correspondiente.
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
06 Hojas tantas veces como desees,pe- texto utilizando el identifi-
de estilo ro el único válido será el úl- cador . De momento has aprendi-
en cascada timo que escribas. Haz click justo detrás de do a utilizar plantillas de es-
También se llaman CSS. La razón principal para em- tilo creando identificadores
Son plantillas que se
plear esta metodología es que al principio del código
pueden utilizar para
crear documentos HTML
puedes asignar un formato HTML. En este apartado, ha-
y dar formato a los tex- básico para todos los identi- rás lo mismo definiendo una
tos que se presenten en ficadores y posteriormente clase 13 (Pág. 66) que podrás
pantalla. Por ejemplo, cambiar las propiedades par- utilizar en combinación con
determinar el tipo, tama- ticulares de cada uno de y pulsa la tecla $ . otros identificadores. Sigue
ño y color de la letra. ellos. A continuación escribe la si- estos pasos:
Las hojas de estilo en Gracias a esta opción podrás guiente línea:
Repite el paso 1 del pri-
cascada resultan muy
prácticas, ya que permi-
complementar fácilmente el
diseño de unas plantillas con El código fuente completo 1 mer apartado.
ten ahorrar líneas de có-
digo y gestionar mejor la
presentación de texto.
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
Plantillas
! Las ventajas de CSS estilo”.
Repite el paso 12 del
10
07
Son elementos del len-
guaje HTML que permi-
ten definir y guardar ca-
El esfuerzo que exige dominar
los procedimientos de hojas de
estilo en cascada (CSS) mere-
Por el contrario, si al principio
del fichero has insertado una
plantilla de estilo
apartado anterior.
El resultado muestra un tí-
tulo con las mismas pro-
3 Debes tener en pantalla
el fichero HTML con el
que has trabajado durante es-
racterísticas concretas ce la pena. Las plantillas piedades que el texto que te capítulo. Pulsa justamen-
para la presentación de aparece, pero con un ta- te delante de y presio-
de estilo son utilizadas por
textos en la pantalla que
muchos webmasters maño de letra más grande na las teclas $ y . Con
podrás aplicar en cual-
quier parte del docu-
14 (Pág. 66) y van a se- y en negrita esto has creado una línea en
mento. También se utili- guir existiendo durante blanco:
zan mucho en los
procesadores de texto.
mucho tiempo. Sin embargo,
las instrucciones básicas de
formato, como por ejemplo el
siempre podrás recurrir a ella:
11 Cierra el navegador
con un click en .

08 Puntos identificador , tienen


Unidad de medida que los días contados. Y si más adelante decides que
permite establecer el ta- La razón es que las hojas de es- el aspecto de tu documento re-
maño de un tipo de le- tilo en cascada son mucho más sulta mejor con otro tipo de le-
tra. Un punto equivale a flexibles y ocupan menos es- tra, te bastará con realizar un
0,35 milímetros. pacio en el código fuente. pequeño cambio al principio
Así, por ejemplo, si deseas del código. En otro caso ten-
09 Código fuente asignar a una tabla un deter- drías que revisar todas las lí-
Serie de instrucciones y minado tipo de letra, tienes que neas realizando los cambios
comandos de programa- introducir en cada celda un oportunos una por una.
ción que se utilizan para identificador .
indicar al navegador lo Imagina que quieres resaltar un
que debe hacer cuando texto con letra Arial en negrita.
muestra un archivo que
El código correspondiente se-
tiene formato HTML.
ría el siguiente
Este término también lo
usan los programadores
para referirse al archivo
que contiene las instruc-
ciones de un programa.
! Utilización de los comentarios
10 Escritorio Si el código de tus páginas los enlaces 15 (Pág. 66) a pá- Es muy posible que a conti- ja de estilo en cascada. Los
Superficie de trabajo de HTML comienza a ser dema- ginas que se encuentran en nuación se encuentre con al- comentarios también sirven
Windows 95 y 98. En siado grande es muy conve- otro servidor 16 (Pág. 66) . go similar a esto: para inutilizar temporalmen-
ella puedes dejar todo niente que te acostumbres a Los comentarios tienen otra te grandes bloques de códi-
tipo de ficheros y aplica- utilizar comentarios, ya que gran utilidad, pueden desac- go HTML.
ciones para que estén te ayudarán mucho a com- tivar los fragmentos de códi- Esto te puede resultar muy
fácilmente accesibles en prender el funcionamiento de go que los navegadores anti- Entonces se creerá que se tra- práctico cuando depuras fa-
cualquier momento. cada una de las partes del do- guos no son capaces de ta de un texto que debe re- llos en tus páginas. Sólo tie-
cumento y cualquier otra per- comprender, por ejemplo las presentar en pantalla y el re- nes que insertar al principio
11 Truetype sona podrá realizar modifica- instrucciones relativas a ho- sultado de la página será del bloque el identificador
Tipo de letra escalable ciones en tus páginas sin jas de estilo en cascada. Un erróneo. Pero si utilizas unas y al final.
que se puede imprimir o perderse entre los comandos. navegador anticuado no es marcas de comentario al prin- Como por ejemplo en
presentar en pantalla a El navegador ignora todo lo capaz de procesar correc- cipio y al final de
cualquier tamaño sin que aparece entre las marcas tamente el identificador las instrucciones,
que se produzcan pérdi-
y , así que dentro y el navegador anti-
das de calidad. Se utiliza
podrás escribir todo lo que te por tanto lo ignora. guo ignorará todo el bloque Si practicas con este ejem-
tanto en ordenadores
PC como Macintosh. dé la gana. Por ejemplo: de código y el moderno será plo concreto podrás obser-
es un comentario típico que capaz de identificarlo como var como se desactiva el ti-
puedes usar al principio de las líneas que definen una ho- 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 $ . .
12 Parámetro
Información que deter-
mina el funcionamiento
de un programa. Tam- que se encuentra en
bién se conoce
como argumento.
6 Introduce la siguiente lí-
nea de código:
el Escritorio con un doble
click de ratón.
13 Clase
En relación con las hojas
de estilo en cascada, se Con aso- Dentro de ella, vuelve a ha-
entiende como un cias el identificador a cer doble click en:
conjunto de instruccio- la clase .
nes de formato que se Observa que en este caso el
pueden aplicar a cual- nombre de la clase se debe El navegador te mostrará la
quier identificador. escribir sin un punto que la siguiente página
preceda. Aquí tienes el có- En la última línea puedes
14 Webmaster digo fuente completo . comprobar el efecto de la
A los diseñadores de plantilla .
páginas web también se
les llama webmasters.
Cuando completes este
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
curso de programación para guardar todos en Java 17 que podrás
en HTML tendrás todos los cambios que has realiza- combinar con tus conoci-
los conocimientos nece- do. Después, cierra el Bloc mientos de HTML para con-
sarios como para consi- de notas pulsando sobre el vertirte en un maestro del
derarte un webmaster
botón . diseño de páginas web.
profesional.

15 Enlace
También se conoce
como link. Es una
referencia a otra página
que se encuentra en la
red Internet. Se suele
distinguir por tener un
4 Escribe las líneas si-
guientes:
Otro de los parámetros nue-
vos es .
En este caso toma el va-
color distinto al resto lor para que
del texto, estar subraya- subraye el texto.
do o representado por La plantilla que acabas
una imagen. Al hacer La mayor parte de instruc- de crear se puede utilizar pa-
click sobre él, el navega- ciones te deben resultar fa- ra representar todos los ele-
dor carga la página miliares. En la primera línea mentos de texto “importan-
correspondiente. resalta la indicación tes” destacándolos del resto
. El punto que la con una fuente Arial de 14
16 Servidor precede avisa al navegador puntos en color rojo, escri-
Las páginas web de de que a continuación vie- tos en negrita y subrayados.
Internet se encuentran ne una clase y es impres- Para comprobar el resultado
almacenadas en el disco
cindible para que la planti- debes escribir algún texto
duro de unos ordenado-
res desde donde se
lla funcione correctamente. utilizando esta clase.
pueden leer a través de
la Red. Estos ordenado-
res se llaman servidores ! Resumen de este capítulo
y alquilan el espacio de
su disco duro a los
usuarios que desean pu- Las plantillas de estilo se de- ciales, por ejemplo . El for- la pantalla cuando se visua- dentro de otras. Por ejemplo,
blicar sus páginas. Al- finen al principio del docu- mato se escribe inmedia- liza la página. puedes asignar propiedades
gunos son gratuitos. mento HTML y se pueden uti- tamente después y debe ir en- globales a los identificadores
lizar en cualquier momento tre los símbolos y . Los formatos y después fijar con una se-
17 Java que se desee presentar texto más importantes gunda instrucción propieda-
Lenguaje de programa- en pantalla. Para indicar al Insertar El tipo de letra se fija con des específicas a cada uno.
ción que se emplea en navegador que vas a crear comentarios .
muchas páginas de In- una plantilla de estilo debes No te olvides de escribir las Para el tamaño se utiliza Utilización
ternet. Utilizando unos utilizar el siguiente comando: marcas de comentario , mientras que el de clases
pequeños módulos es- . y cada vez que color se determina con Las hojas de estilo se pueden
critos en Java, llamados definas una hoja de estilo en . No olvides poner definir sin utilizar identifica-
applets, las páginas web Plantillas con cascada. Gracias a ellas, con- detrás de cada indicación los dores. Para hacerlo se em-
pueden incluir funciones Identificadores seguirás que los navegado- dos puntos. plean las clases que deben
de animación, vídeo,
Lo primero que debes hacer res antiguos pasen por alto ser definidas precedidas de
calculo, etcétera. Este
para definir un identificador las líneas de código que no Formatos un punto: .
lenguaje fue creado por
Sun Microsystems. que funcione como una plan- comprenden. Si no utilizas complementarios Para utilizarlas dentro del có-
tilla es escribir su nombre sin los comentarios pueden apa- Las hojas de estilo en casca- digo debes escribir:
utilizar los paréntesis espe- recer símbolos erróneos en da se pueden construir unas .

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

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
Qué son y para qué sirven los identificadores Nº 44
Conceptos básicos del estilo en cascada Nº 45
Al igual que los pequeños Curris se encargan de realizar Para
profesionales HTML con Java Nº 46
las tareas duras en Fraggle Rock, sencillos programas Probando las páginas HTML Nº 47
insertados en tu página web te quitarán mucho trabajo. Principios legales de las páginas de Internet Nº 48
¿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 guardar el fichero de la pá-


Javascript
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 04
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
Programación en HTML 11ª parte 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: 01 Java
Lenguaje de programa-
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- ción que permite ejecu-
tar ciertas funciones en
cualquier sistema que
tos enmarcan el código co- prueba si uno o dos de los tenga un intérprete de
mo comentario 05 . Así campos están vacíos. A pri- ciales para que el programa to, mientras que se en- dicho lenguaje. Los
podrás evitar que los nave- mera vista, el acceso a estos sepa dónde está el principio carga del cambio de párrafo. navegadores de Internet
gadores que no son capaces campos puede parecer algo y el fin. modernos disponen de
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: .
este intérprete, con lo
que pueden ejecutar
programas en este len-
mularios. vo la tecla C . Con esta instrucción el pro- guaje que se encuentren

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
en páginas de Internet.
Existen aplicaciones en
Java de todo tipo, desde
mulario ejemplo que vas a juegos hasta programas
programar. Dentro de éste En este caso, la variable dos campos están vacíos el para charlar.
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: 02 HTML
cho. En este caso, el código para el apellido lleva la in- se encargan de insertar Lenguaje de programa-
es una función 06 (Pág.68) . dicación . Para antes y después de un ción de páginas web. Se
Ésta se puede activar desde Javascript se trata, por tan- salto de línea 11 (Pág. 70) .En escribe utilizando identi-
cualquier punto de la página to, del primer elemento den- Javascript la instrucción Tal vez te estés preguntan- ficadores. Estos son
órdenes que das al
haciendo una llamada a su tro del primer formulario. funciona igual que la etique- do dónde se encuentran, en
navegador para que
nombre . La llave Con se pasa al ta en HTML. Debes uti- estas dos líneas de código, muestre una página web
(para obtenerla presiona las segundo campo. En el ejem- lizar otra instrucción pa- los paréntesis especiales. Es- tal y como deseas. Cada
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 identificador es una or-
ve para unir los apartados co- tinuación reservarás este de los campos de tu formu- que tras sólo hay una lí- den y puede indicar atri-
rrespondientes,como las fun- campo para el nombre. Para lario está vacío. nea más. El programa ya sa- butos del texto, posición
ciones o las sentencias IF comprobar que aparece tex- de imágenes, hipervín-
07 (Pág. 68) . Al final del apar- to dentro de un campo de- culos o cualquier otra
tado debe aparecer el cierre bes comparar su contenido, be qué es lo que falta y pue- propiedad de la página
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. que quieras aplicar.

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:
.
03 Javascript
Versión reducida del

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
lenguaje Java, desarro-
llada exclusivamente
para su uso en la crea-
. La indi- aspecto . mensaje ción y diseño de páginas
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 web. Permite dotar a
grama que debe preparar primer elemento del primer so, entra en acción la se- introducir.Ahora le debes in- éstas de funciones im-
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 posibles de aplicar ha-
ciendo uso exclusivo del
nombre . En esto se cierra la primera con- este caso es al- caso de no estar relleno al-
lenguaje HTML.
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 04 Código fuente
ble”. Más adelante, y si que- dos barras verticales que formulario. Serie de instrucciones de
da alguno de los campos va- se obtienen presionando si- programación desarrolla-
cíos, con multáneamente las teclas A da por un programador.
conseguirás que en tu for- y 1 . En este caso se trata de ! Javascript o VB script Un ejemplo de código
mulario aparezca un men- una unión, es decir,; un ne- fuente es la codificación
saje de error. Las siguientes xo entre las dos condicio- Además de Javascript, exis- ce), no deberán tener ningún de una página web
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 05 Comentario
probar los campos del for- lo interpreta de la siguiente gramas para páginas web. el VBA en los números 9, 11, Líneas de texto que se
mulario. manera: si se cumple la pri- Este lenguaje se llama VB 13, 15, 17 y 19 de Computer introducen dentro de un
mera o la segunda condi- Script y ha sido desarrollado Hoy, dentro de esta misma programa para facilitar

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
un lenguaje de programación
estrechamente relacionado
sección. Para los principian-
tes, el VBA no es más com-
plicado que el Javascript. Pe-
su lectura por parte de
aquellas personas que no
hayan participado en su
contrará a con Visual Basic, otro len- ro las aplicaciones escritas desarrollo.
En castellano es SI (con- continuación. Así, si ocurre guaje también desarrollado en VB Script sólo funcionan Por norma general, los
dicional). A éste le siguen que el primer campo, el se- por la empresa Microsoft. con el navegador Internet Ex- programadores acompa-
ñan de comentarios las
unas condiciones 09 (Pág. 68) gundo o los dos se encuen- Todos los programadores plorer de Microsoft. Si dese-
funciones más complejas
e instrucciones 10 (Pág. 68) . tran no contienen datos, en- que están familiarizados con as que los usuarios de Nets-
incluidas en sus progra-
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 mas, facilitando así su
tinto. Por ejemplo, si llueve código: sual Basic for Aplications, tus páginas sin problemas, lectura y comprensión.
(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- corporada en Microsoft Offi- bas el código en Javascript.

guas (instrucción). mer formulario”. Si uno de


Nº 46 67
Profesional Programación en HTML 11ª parte

15 Vuelve a pulsar C e
16

Finalmente, vuelve a cierre del comentario . 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
06 Función te código: . nuación teclea y C . Con que Javascript interprete el linea cerrarás el
Elemento que el progra- , que en castellano estos símbolos marcarás la final del comentario como programa.
ma puede utilizar reite- se puede traducir por vol- parte del programa que se
radas veces, descargan- ver, y por falso. Es ejecuta cuando uno de los
do así al programador
decir, el programa recibe la campos está vacío. A conti-
de tener que reescribirlo
cada vez que éste es ne-
indicación “Vuelve al re- nuación falta poner otro
cesario dentro del pro- mitente e indícale que hay para cerrar toda la función.
grama. Dentro de una algo incorrecto”. Esta noti-
función se encuentra un
grupo de instrucciones
bajo un mismo nombre.
ficación interrumpe la eje-
cución del formulario. 17 Ahora sólo te queda in-
sertar el símbolo de

En algunos casos, las


funciones devuelven un
valor, como por ejemplo
18 Éste es el momento de
continuar con el for-
mulario propiamente dicho.
al realizar un calculo. Selecciona la línea de código
e introduce
07 Sentencia IF las siguientes líneas .
“If” se puede traducir Con este código programa-
por "cuando". Las sen- rás un sencillo formulario
tencias "if" sirven para con dos campos y un botón
diferenciar entre varias para mandarlo. Se ha puesto
posibilidades. Si se da el un ejemplo sencillo para
primer caso entonces se que veas las posibilidades
ejecuta la instrucción que ofrece la programación
correspondiente.
en Javascript. Sólo te debe
Las sentencias “if” son
muy comunes en pro-
resultar extraña la siguiente
gramación, por ejemplo línea de código .
para diferenciar si se ha Se trata de la llamada a una
hecho click sobre un bo- función en Javascript que
tón o se ha alcanzado un vas a programar más ade-
determinado valor. lante. inicia la
función
08 Variable en el momento que presio-
En los programas, las nes el botón , y a
variables son “reservas continuación espera una
de espacio" a las que se contestación. Si ésta es
les asigna un valor. , el formulario no se
Éste puede ser el resul- sigue ejecutando. El visitan-
tado de un cálculo mate- te de tu página tiene ahora
mático o un texto. la posibilidad de seguir re-
En Javascript las varia- llenando el formulario o am-
bles pueden tener cual- pliar los datos. La página es-
quier nombre. Éste in- tá lista. El código fuente al
cluso puede contener completo tiene el siguiente
cifras, pero con la salve-
aspecto: .
dad de que debe comen-
zar con una letra, como
por ejemplo "a1234".
19 Haz click sobre
y en .
Cierra el Bloc de notas ha-
09 Condición
Constituye el factor de ciendo click sobre .
toma de decisión dentro
de una sentencia if,
siendo, por lo tanto, la ! Resumen del capítulo
necesaria primera parte
de ésta.
Javascript es un lenguaje pa- dentro de un comentario bloque de la función o las ins- indicas al programa que se
10 Instrucción ra desarrollar funciones sen- HTML y . No trucciones tiene que ir en- tiene que cumplir al menos
Orden que se da a un cillas y programas de aplica- olvides identificar dentro de tre estas llaves y . una de las dos que se han in-
programa de ordenador ción para tus páginas web. Un Javascript el final del progra- dicado en la sentencia If pa-
o al sistema operativo. script en java se encuentra en- ma como un comentario. Pa- Si ... entonces ra que se ejecute la instruc-
En el caso de una sen- tre estas etiquetas y ra ello utiliza los caracteres La instrucción se utiliza ción correspondiente.
tencia if, se trata de la . . para comparar distintas con-
segunda parte de ésta, diciones. Si cumple una de Alarma
es decir, la acción que Comentarios Funciones ellas, el programa ejecuta La instrucción mues-
se realizará en caso de
Para iniciar un programa en Las funciones sirven para ge- una instrucción determinada. tra un mensaje en pantalla.
darse la condición
Javascript tienes que indicár- nerar instrucciones del pro- Estas construcciones condi- Este mensaje consistirá en un
indicada en la primera
parte de la misma. 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 Fundamentos: crear el primer archivo HTML Nº 35
web. Sin embargo, algunas personas descuidan el Cómo diseñar y dar formato a los textos Nº 37
Para
correcto funcionamiento de ésta. Si quieres que tu web principiantes Listas, barras y vínculos Nº 38
pase victoriosa por cualquier test, aquí te enseñamos Insertar imágenes Nº 39
Distintos formatos de escritura Nº 40
cómo solucionar los problemas más habituales. División de páginas con tablas Nº 41
Para Insertar y dimensionar marcos Nº 42
i ya has leído las once ramente más estricto con el Si no tienes Netscape expertos

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 Para
Ejemplo de formulario

Conceptos básicos del estilo en cascada


profesionales HTML con Java

Qué son y para qué sirven los identificadores Nº


43
44
45
46
mera página. Pero cuidado: defectuosa páginas que fun- en el cuadro “Descargar Probando las páginas HTML Nº 47
en cada página se suelen cionan perfectamente con e instalar Netscape” en Principios legales de las páginas de Internet Nº 48
"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
Programación en HTML, 12ª Parte 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: 01 HTML
aspecto que deben tener? Lenguaje de programa-
ción de páginas web.
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: Se escribe haciendo uso
de identificadores
02 . Creado en 1989 en
tados los marcos 05 ? el CERN (laboratorio eu-
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
ropeo de física de partí-
culas), su objetivo era
ser un método único de
. Haz doble click búsqueda de informa-
en él para abrirlo. ción y acceso universal
a la misma, eliminando

3 Selecciona con el ratón


el apartado que desees
revisar, por ejemplo
la necesidad de usar
distintas aplicaciones
con este fin.

02 Identificador
! Recomendaciones El lenguaje HTML se es-
cribe utilizando identifi-
Puede que no veas las pági- que aún encuentres errores cadores o etiquetas
nas HTML. En la mayoría de que no viste el primer día. (tags).Éstas son órde-
Haz click en y elige de la Si aparece algún error, es- estos casos se esconde un Pídele a algún conocido nes que das al navega-
lista: cribe el nombre del archivo error. que revise los errores de tus dor para que muestre
una página web tal y co-
en una hoja e investiga des- Ten en cuenta las siguientes páginas, algo que puede ser
mo deseas. Cada tag es
pués la causa. Encontrarás reglas que te mostramos: de gran utilidad sobre todo
una orden y puede indi-
más información, en el apar- en la ortografía. car atributos del texto,
tado “Búsqueda de errores” Imprime cada documento Escribe un vínculo con tu posición de imágenes,
en la página 64. antes de editarlo en Internet dirección de e-mail en tu pá- hipervínculos, etcétera.
Si has publicado una pá- gina, por ejemplo:

la carpeta .
8 Cuando hayas terminado
de probar todas las pági-
nas, cierra Netscape Navi-
gina en la red, comprueba
enseguida los errores. Mira
la página de nuevo dos días
Así le das al visitante de tu
web la oportunidad de que te
informe sobre los posibles
03 Navegador
Programa que permite
visualizar el contenido
Haz click en ella para abrir- gator haciendo click en después. Es muy probable errores que pueda encontrar. de las páginas web de
la. Si no encuentras ense- y pulsando . Internet. También se
guida este campo, haz click puede utilizar para
en Comprobar descargar ficheros de la
hasta que aparezca. Red o visualizar algunos
la ortografía ! Consejos prácticos contenidos multimedia

5 Haz doble click en

pulsa
y después
Al escribir archivos en
HTML se “cuelan” habitual-
mente faltas de ortografía.
Antes de situar tus páginas
HTML en Internet, tienes que
mientras que a Windows no
le importa si escribes “pagi-
como sonidos, imáge-
nes o incluso vídeos.

comprobar todos los hiper- na.html” o “Pagina.html”. Si 04 Depuración


vínculos internos (es decir, el archivo se llama algo así Fase posterior al testeo.
Consiste en buscar y
los que componen tu web). como “pagina.html”, pero se
aplicar soluciones a los
Para ello, haz click en uno encuentra en un hipervíncu-
fallos y problemas que
tras otro y observa si apare- lo “Pagina.html”, todo fun- puedan surgir en un
ce la página correspondien- cionará bien en tu ordena- programa o página web.
te.Es suficiente iniciar el na- dor, pero en el servidor

6 En la pantalla aparecerá
la página
En el laberinto de identifi-
cadores y texto, éstas se ha-
vegador y cargar la página
de inicio. En este caso no ne-
cesitarás una conexión a In-
puede provocar algún error,
por ejemplo cuando funcio-
na bajo Linux.
05 Marcos
Se utilizan en el diseño
de páginas web para or-
ternet. Si estas pruebas no ganizar la información y
dan errores, puedes insertar Comprueba los facilitar el acceso a ella.
la página en la Red. Cómo Cuando se divide una
hacerlo es algo que está re-
vínculos externos web en secciones que
gulado por cada servidor. In- Confirma también las re- pueden mostrar páginas
fórmate del sistema de fun- ferencias cruzadas que te web independientes, a
cionamiento de ellos. Vuelve llevan desde tu página hacia cada una de estas sec-
a probar después todas las otras páginas ajenas. En ciones se la denomina
referencias cruzadas inter- cuanto sitúes tu web en In- marco o frame. Al con-
nas y accede, esta vez como ternet, haz click en todos los tenedor que incluye el
“visitante”, a tus páginas en vínculos externos y obser- grupo de marcos se le
Internet. Si de repente algo va si funcionan. Repite esta llama página de marcos.
También se suele utilizar
Aquí todo tiene un aspecto cen difíciles de descubrir. El no funciona, puede ser de- comprobación habitual-
para crear tablas de con-
excelente. siguiente truco es eficaz pa- bido a un nombre de archi- mente, ya que a menudo se
tenido, que permanecen
ra encontrar errores: utiliza vo incorrectamente escrito. modifican las direcciones y en pantalla mientras te
7 Repite los pasos 2 a 5
con todos los archivos
HTML que has escrito du-
simplemente un procesador
de texto, por ejemplo Mi-
crosoft Word, como ayuda
Algunos servidores distin-
guen entre escritura con ma-
yúscula y con minúscula,
pueden ser distintas o in-
cluso haber desaparecido de
la Red.
desplazas por la web.

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 .
06 Texto fuente
También llamado código
fuente. Serie de instruc-
ciones y comandos de
5 Deja Internet Explorer
abierto e inicia tu pro-
cesador de textos, por ejem-
programación que se
plo Word 2000, para ello pul-
utilizan para indicar al
navegador lo que debe
sa , pincha
hacer cuando muestra y selecciona .
un archivo que tiene for-
mato HTML.
Este término también lo
usan los programadores
6
na
En Word, haz click en el
menú
.
y seleccio-

para referirse al archivo


que contiene las instruc-
ciones de un programa. 7 El texto se puede ver en
pantalla:

07 Cursiva
Cuando escribes, lo ha-
ces con una letra que, si
8 Inicia la revisión orto-
gráfica pulsando 7 , o
pinchando en y
Introduce una
línea diagonal
bien varía de tipo, pre- seleccionando antes de la se-
sentará un aspecto nor- . Si te gunda , de
mal. Además, ese mis- encuentras con una falta, modo que que-
mo tipo de letra puede apunta la posición del texto de así .
presentarse en Negrita correspondiente en un pa- Pero en Netscape Navigator ya ha aparecido el culpable: Hecho esto, el texto apare-
en Cursiva o Subrayado. pel y después corrígela en no se ve nada: se trata de un hipervínculo cerá correctamente:
Estos efectos se usan
el texto fuente. El motivo es que aquí introducido incorrectamen-
para resaltar frases o
palabras o para darles
te. En este punto
un significado especial.
9 Cuando ya hayas revisa-
do la ortografía de tu pá-
gina, y tras anotar los erro-
falta un .

08 Link
También se conoce res, haz doble click en:
como enlace o vínculo. A menudo aparece este
Es una referencia a otra error
página que se encuentra De repente, todo está en le-
en la red Internet. Se y abrirás el editor. Carga el falta el identificador de cie- tra cursiva 07 , aunque sólo
suele distinguir por te- código fuente correspon- rre de la tabla. Lo que ten- la palabra:
ner un color distinto al diente y corrige los errores drás que hacer en este caso
resto del texto, estar su- manteniendo abierto Word es introducir el texto fuen-
brayado o representado por si necesitaras asegurar- te correspondiente. Sitúate debería aparecer en este for-
por una imagen. Al ha- te de alguno. en esa posición e inserta mato. Solución: al introducir
cer click sobre él, el na- . el tag has olvidado una línea
vegador carga la página
correspondiente. 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-
09 CSS Word, Internet Explorer y el go fuente la podrás ver:
Son plantillas que se
Editor haciendo click en
pueden utilizar para
crear documentos HTML
en cada una de las ventanas.
y dar formato a los tex-
tos que se presenten en Búsqueda de errores
pantalla. Por ejemplo,
determinar el tipo, tama- Casi más difícil que en-
ño y color de la letra. contrar faltas de ortografía
Las hojas de estilo en es descubrir etiquetas erró-
cascada resultan muy neas.Y a menudo las conse-
! Dos caminos de prueba
prácticas, ya que permi- cuencias de las faltas no se
ten ahorrar líneas de có- descubren enseguida. A con- Examen general terios distintos en lo que se do con los identificadores que
digo y gestionar mejor la tinuación verás algunos pro- Antes de insertar páginas refiere a la presentación del no sean de cierre, es decir,
presentación de texto. 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 .
10 Javascript solución: navegadores más utilizados. bajo” si hay errores por des-
Versión reducida del
lenguaje Java, desarro-
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
llada exclusivamente pecto en el navegador In- ternet Explorer y Netscape Na- a pesar de todo. los hipervínculos
para su uso en la crea- ternet Explorer: vigator. Cada link 08 debe funcionar
ción y diseño de páginas
web. Permite dotar a Encontrar correctamente. Para ello com-
éstas de funciones im- Dos navegadores, fuentes de error prueba regularmente las re-
ferencias cruzadas dentro de
posibles de aplicar ha- dos pruebas Si te encuentras con un fallo, tus propias páginas y los hi-
ciendo uso de HTML.
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
! Hay más navegadores 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 -V 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 ➜ Direcciones online
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, -v www.opera.com
poco espacio en tu disco du- trar. Dando “una vuelta” por mientras que a Internet -´ www.neoplanet.com
ro y ofrece una navegación la Red descubrirás muchos Explorer “le da igual”. -V www.broadcast.com
bastante rápida. más. Elimina el error insertan- -ä www.netscape.com/es
do una doble línea diago-

! Descargar e instalar Netscape Navigator


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

7 En unos segundos se abri-


rá automáticamente la ven-
la instalación. y pulsa . ahora puedes hacerlo mas ade-
lante, así que pulsa .

3 En la página que se abrirá


busca el siguiente link:
y pincha en
tana
En ella marca la opción
.

y
11 Durante unos segun-
dos, aparecerán en pan-
talla unos mensajes informán-
14 Ahora, Netscape te
pregunta por varias op-
ciones de configuración. Se- 18 Y ya está, haz click en
y reinicia tu
él con el ratón. pulsa . dote de que la instalación se lecciona las que te resulten úti- ordenador.

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-
11 Salto de línea click sobre el icono En la ventana no hay cambios guiente podrás ver cómo presión que da es muy ne-
También conocido como apreciables a excepción de la testear 12 los documentos gativa.
retorno de carro, consis- dirección. Con la entrada de en HTML y cómo encontrar En la última entrega cono-
te en finalizar una línea unos datos, por ejemplo y depurar 13 los errores cerás los aspectos legales de
de texto y saltar automá-
y más comunes, ya que no hay las páginas web, evitando así
ticamente a la siguiente.
que encontrarás en tu Es- nada más desagradable que el riesgo de cometer sin que-
12 Testear critorio. Seguidamente haz una página plagada de erro- rer algún tipo de delito.
Proceso que comprueba doble click sobre . en la línea de dirección, tras
el correcto funciona- hacer click sobre
miento de un programa
o de una web.
Constituye un elemento
21 En Internet Explorer
aparecerá .
aparece .
Como podrás comprobar, en
principio este ejemplo no
! Consejos de programación
fundamental dentro del realiza ninguna operación
desarrollo de una web y con los datos. Si quieres Siempre ya tiene que estar cargado.
ha de ser completo, ya aprender como gestionarlos, al principio En caso contrario no fun-
que evita fallos y proble- puedes ver otro ejemplo en Si programas en Javascript, ciona.
mas que suelen ocasio- esta misma sección, en el nú- conviene que te acostum-
nar una pésima imagen. mero 43 de Computer Hoy. bres a incluir el código al Javascript
principio del documento en es transparente
Depurar
13
Fase posterior al testeo.
Consiste en buscar e
22 Ya puedes cerrar In-
ternet Explorer con
un click sobre .
HTML. Esto te asegura que
el programa se ejecute sin
problemas. La razón la en-
Si programas en Javascript
tienes que ser consciente de
que cualquier persona que
implementar soluciones contrarás en el propio fun- accede a tu página puede
a los fallos y problemas Y con esta entrega finaliza cionamiento del navegador. ver el código del programa.
que puedan surgir en un
Si haces click sobre “enviar” este apasionante viaje a tra- Los navegadores leen el có- Muchos usuarios simple-
programa o página web.
dejando uno de los digo fuente de una página mente visitan otras páginas
14 Frame campos sin rellenar, HTML línea a línea. En cuan- para sacar ideas para sus
Se utiliza en el diseño de aparecerá el si- to encuentra datos los re- propios programas en Ja-
páginas web para orga- guiente mensaje . presenta en pantalla como vascript. Pero no olvides
nizar la información y Con un click sobre imágenes, textos o tags. Si que la propiedad intelectual
facilitar el acceso a ella. cerrarás la entre estos datos hay una está protegida. Esto también
Cuando se divide una ventana con el men- acción que llama a un pro- es válido para las aplicacio-
web en secciones que saje de error.Pero,si grama en Javascript, éste nes en Javascript.
pueden mostrar páginas rellenas los dos cam-
web independientes, a
cada una de estas sec-
ciones se la denomina
marco o frame. Al con- ! Controlar la presencia de tu web dentro de unos marcos ajenos
tenedor que incluye el
grupo de marcos se le Algunos usuarios pueden in- miliares las dos primeras lí- en la parte superior no es Pero esta página sólo apare-
llama página de marcos. 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
También se suele utilizar pero a veces sólo permiten línea vuelves a encontrar un siguiente acción”. Más cla- después, tras una breve in-
para crear tablas de con- que ésta aparezca dentro de comando . ro: “si encuentras un frame, terrupción, la web con el pro-
tenido, que permanecen un frame 14 haciendo que Con la instrucción: que por cierto aquí no pinta grama en Javascript aparece
en pantalla mientras te
permanezcan los demás ele- nada (ya que tú no has ins- sola en pantalla .
desplazas a diferentes
mentos de su página. Así, los el programa comprueba si en talado ninguno), pues haz al-
páginas del sitio web.
visitantes creen que tu web es la ventana del navegador go”. Esta acción se encuen-
15 URL un elemento más de una pá- aparecen frames. La aplica- tra en la misma línea de
Siglas correspondientes gina extraña. Un visitante de ción utiliza para ello un con- código. se puede
a “Uniform Resource Lo- tu web, por ejemplo, no pue- tador que está en todos los traducir por ubicación e
cator”, lo que traducido de ver tu URL 15 , lo que le navegadores. Este contador identifica la URL de la pági-
sería “localizador homo- impide recordar tu dirección. registra na que se encuentra en la ba-
géneo de recursos”. Una Esto tiene solución. Un senci- el número de frames que se rra de direcciones, como por
URL es una dirección de llo programa en Javascript que encuentran abiertos en ese ejemplo:
página web de Internet. 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-
16 Tag las tags 16 y por “longitud”. Es decir, de- de un frame de otra web, aquí des utilizar si no tienes fra-
El lenguaje HTML se es- . termina la cantidad de aparecerá la dirección de la pá- mes en tu página. En caso
cribe utilizando tags o Escribe las siguientes líneas que se encuentran gina. Para cambiar esta direc- contrario el resultado no se-
etiquetas. Estas son ór- de código: . en la parte superior( ). ción, entra en acción rá el deseado, ya que tam-
denes que das al nave- Si has leído esta entrega del Los dos caracteres indi- al modificar la bién los cerrará.
gador para que muestre curso ya te deben resultar fa- can desigualdad. Toda la lí- primera dirección por tu
una página web tal y co- nea se puede propia dirección dentro del
mo deseas. Cada tag es traducir por: frame. Esto es lo que hace
una orden y puede indi-
“si el número esta línea de código. En ca-
car atributos del texto,
que da la su- so de que se dé esta cir-
posición de imágenes,
hipervínculos, etcétera. 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 Fundamentos: crear el primer archivo HTML Nº 35
en HTML. Luego no digas que no te avisamos. 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
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
Distintos formatos de escritura
División de páginas con tablas
Para expertos Insertar y dimensionar marcos
Ejemplo de formulario




40
41
42
43
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, Qué son y para qué sirven los identificadores Nº 44
sin problemas y tengan un as- nocer todo lo que hay que te- artista o músico los dere- Conceptos básicos del estilo en cascada Nº 45
Para
pecto profesional. ner en cuenta a la hora de pu- chos sobre su obra, permi- profesionales HTML con Java Nº 46
Así entrarás con buen pie blicar una página en Internet tiéndole decidir dónde y en Probando las páginas HTML Nº 47
en la World Wide Web y así no te buscarás ningún qué forma se publican sus Principios legales de las páginas de Internet Nº 48
02 (Pág.56) . Pero no basta sólo problema. textos, libros, etcétera
54 Nº 48
Programación en HTML, 13ª Parte 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
! La opinión de un abogado
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- der que facilitan que se co-
ra que te dé su consenti- terminadas reglas. Éstas te ma legal (pedofilia, racismo, meta un ilícito y, por tanto,
miento. Sólo cuando lo ob- indican dónde y cómo se etcétera). Un enlace ilegal acabar siendo objeto de in-
tengas podrás usarlos. pueden distribuir. Repasa no tiene porque significar Guillermo vestigación judicial”, co-
con detenimiento la licen- una condena, pero las posi- Frühbeck, menta Frühbeck. Y lo mis-
cia del contrato de cada uno bilidades de que se abra un asesor legal mo con contenidos (o
En caso de duda, de estos. Si dudas, ponte en procedimiento judicial con- de Hobby Press enlaces) relacionados 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 hay quien cree que no es del En la difusión de datos per-
neral (público), como por
No pongas links links son legales todo cierto, ya que unas sonales, aconseja tener en
ejemplo los números de la a páginas piratas A excepción de los enlaces normas de carácter sustan- cuenta la ley que regula su-
Lotería Primitiva o los índi- Una buena página web que se han descrito en los tivo son aplicables a la Red. tratamiento, LORTAD, y sus
ces bursátiles, se pueden pu- también se caracteriza por apartados precedentes, pue- El asesor legal de Hobby restricciones. También dice
des insertar en tu página to- Press lo reafirma con el que injurias y calumnias a
dos los links que te dé la ga- ejemplo de la vulneración través de la Red son ilícitas:
na. Te recomendamos, no de los derechos de autor: “Con el agravante de que se
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 Cuando se utilizan nombres
nas cuyo contenido te resul- programas) sin autorización o marcas registradas para
te dudoso.Y recuerda,en ca- expresa de su titular supo- atraer a visitantes a una web
so de duda, es mejor un ne una violación de esos de- propia, cree que puede en-
enlace menos que un pro- rechos y puede dar lugar a tenderse que se están trans-
blema más. acciones judiciales. Aun si grediendo las normas de la
Tampoco es lícito el in- el material no está someti- Ley de Competencia Desle-
sertar un comentario que do a esa protección es re- al (aprovechamiento de
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,
01 HTML dentro de la undécima en-
Lenguaje de programa- trega del curso de HTML, en
ción de páginas web. la que viste una introduc-
Se escribe haciendo uso ción a Javascript, puedes ver
de identificadores. Crea-
cómo conseguir que tu pá-
do en 1989 en el CERN
(laboratorio europeo de
gina no aparezca dentro del
física de partículas), su frame de otra.
objetivo era ser un mé-
todo único de búsqueda ¡Sin faltar
de información y acceso
universal a la misma, al respeto!
eliminando la necesidad Por desgracia, en Internet
de usar distintas aplica- cada vez es más habitual en-
ciones para este fin. contrar páginas ofensivas
hacia terceras personas. Pe-
02 World Wide ro cuidado, la Ley también
Web es válida en Internet. Es de-
En castellano “la tela de cir, si faltas al respeto a ter-
araña mundial”, es la ceras personas puede que
parte gráfica de Internet. tengas que rendir cuentas
En ella se pueden repre- La inclusión de páginas web de otras personas o empresas dentro de un marco de la tuya ante la Justicia.
sentar textos, imágenes, puede acarrearte serios problemas si no queda claro el origen de las primeras. No insultes ni ofendas a
películas o piezas musi- terceras personas, aso-
cales. Cuidado frames dividen sus páginas mayor tamaño contiene otra ciaciones o empresas.Tam-
La WWW (como tam- con los frames en varias zonas. Normal- página que puede no ser poco permitas que a través
bién se la denomina) se
compone en la actuali-
Por si no lo sabías, los mente hay un marco que propia. No todos los dise- de tu página, como por
dad de más de 1.000 marcos 09 son un asunto contiene un índice cuyo fin ñadores de páginas web ejemplo dentro de un libro
millones de páginas con peliagudo. El problema es- es facilitar la visita de la pá- aceptan esta práctica. de visitas, otros hagan lo
todo tipo de informa- triba en que los usuarios de gina. El segundo frame de De todas formas, la expe- mismo.
ción. Cada día se inclu- riencia señala que la inser-
yen nuevas páginas. ción dentro de un frame de
contenidos ajenos puede Un insulto te puede
03 MP3
! La opinión de la Policía acabar acarreándote pro- ocasionar problemas
Es un formato de com- blemas si no indicas el ori-
presión para ficheros de de la injuria directa, calum- gen de la página. Esto puede ser muy grave
sonido. El nombre de nia, amenaza...”. Por razones de precaución, si la persona a la que se ha-
MP3 viene de la abrevia- Para los responsables de nuestro consejo es que evi- ce referencia se puede iden-
tura de MPEG-Layer3 y esta Unidad, la línea entre tes insertar páginas ajenas tificar con facilidad. De na-
se refiere a un algoritmo lo que es delito y lo que no dentro de un frame. Con da te va a servir que acortes,
basado en un complejo es muy fina: “No hay una independencia de los aspec- por ejemplo, el nombre de
modelo acústico. norma que prohiba facilitar tos legales, está claro que a este individuo. En localida-
En los últimos tiempos direcciones de email, aun- nadie le resulta agradable es- des pequeñas sólo hacen fal-
se ha popularizado, de- que no se cuente con la au- tar peleándose con los mar- ta las iniciales de un nom-
bido a la gran calidad torización del propietario”. cos. Por ejemplo, dentro de bre para identificar a una
que ofrece, permitiendo Afirman que está más claro
U. de Investigación de un frame no se puede ver la persona.
ratios de compresión en el uso de productos con
cercanos al 90%.
Delincuencia en Tecnolo- dirección de la página que se Y cuidado con las imáge-
gías de la Información. copyright, ya que hay leyes está visitando.Y si, además, nes que van acompañadas
sobre propiedad intelectual. tienes un monitor pequeño, de un texto denigrante. Es-
04 Digitalizar En Computer Hoy quisimos De todos modos, aquí sólo
Los aparatos electróni- el marco se come mucho es- tá prohibido publicar foto-
cos almacenan la infor- recabar la opinión de la Po- actúan cuando reciben una pacio. Pero si aún así deseas grafias de terceras perso-
mación como una serie licía respecto a las facilida- denuncia del propietario insertar una página ajena nas, aunque omitas su
de unos y ceros. Pero des que tiene para perseguir afectado, de lo contrario so- dentro de un frame, te acon- nombre y tapes sus ojos con
las señales de sonido y este tipo de delitos: “La le- breentienden que las obras senjamos que antes te pon- una banda oscura. Sólo ha-
vídeo no son digitales, gislación tiene muchas la- han sido cedidas. gas en contacto con el due- ce falta que una persona sea
por lo que hay que con- gunas, pero se cuenta con Aunque depende del conte- ño de la página para pedirle capaz de reconocer a ese in-
vertirlas. Este proceso el apoyo de jueces y fisca- nido. “Si se ofrece una ba- el correspondiente permiso. dividuo para que puedas te-
recibe el nombre de di- les para clarificar aspectos. se de datos o un libro en la
gitalización. Así, con las intrusiones y web como propios se per-
links en las webs es donde sigue, porque alguien quie-
05 Homepage la legislación no se ha adap- re aprovecharse. Pero si se
La mayoría de personas tado a lo que ocurre en la incluye un link a otra web
o empresas aparecen en sociedad. Pero si el conte- indicando que es propiedad
Internet con varias pági- nido es ilegal, ya sea incluir de otro no creemos que nin-
nas propias que se en- un enlace o colocar infor- gún juez lo considerara de-
cuentran enlazadas en- mación que sea apología de lito”, afirman. “Como tam-
tre sí. En este caso, a la alguna actividad penada o poco es incluir en un marco
página principal se la
considerada acto delictivo de una web otra página aje-
conoce de esta manera.
en el mundo “real”, también na si queda claro de quien
lo es en la Red. Es el caso es propiedad”. Si haces algo así estarás cometiendo dos delitos: injuria
y difusión de datos personales.
56 Nº 48
Programación en HTML, 13ª Parte Profesional


ner problemas legales. Hay
muchas personas a las que
se les identifica muy fácil- 06 Descargar
mente por su vestimenta o Dentro de la red Internet
por determinadas facciones existen muchos ordena-
dores a los cuales pue-
de su cara. También el en-
des acceder para copiar
torno físico o familiar pue- ficheros al tuyo.
den ser un punto de re- Esta operación se deno-
ferencia para identificar a mina descarga de fiche-
una persona. ros. Ésto se puede reali-
zar desde el navegador,
Al expresar tus haciendo click en los en-
laces que representen
opiniones ten cuidado los archivos, o mediante
sistemas y programas
Si te dedicas a publicar especialmente pensados
textos en Internet y te ajus- para la descarga, como
tas a la realidad no vas a te- el FTP.
ner nunca problemas. Esto
no quiere decir que no pue- 07 Shareware
das dar tu opinión. Pero cui- Son programas de de-
dado, no te excedas. mostración que se pue-
Las direcciones de email den probar durante un
privadas también están pro- tiempo determinado o
tegidas por la ley. No se pue- que no incluyen todas
sus funciones. Se distri-
den publicar sin el permiso
buyen gratuitamente a
de su titular. través de Internet o en
Quizá pueda resultar tentador copiar sin más un listado de enlaces de otra página web. Sin CD. Para obtener la ver-
embargo, no lo será tanto cuando descubras que esta práctica es totalmente ilegal, ya que, sión completa hay que
Meta Tags en el mejor de los casos, vulnera los derechos de autor. Además, si contiene datos de tipo pagar una cantidad de-
Recientemente ha surgido personal, estarás enfrentándote a la ley LORTAD (regulación del tratamiento de datos). terminada al autor.
una polémica con la bús-
queda de páginas en Inter- te recomendamos que te 08 Link
net. Algunos usuarios utili- pongas en contacto con el También se conoce
zan el truco de insertans titular de la web. Lo más gra-
! Asociación Internautas como enlace o vínculo.
nombres comerciales y mar- ve que puede pasar es que Es una referencia a otra
cas de empresas conocidas te diga que no.También pue- porque se estaría incu- página que se encuentra
en los Meta Tags. Con ello se des llevarte una agradable rriendo en una ilegalidad: en la red Internet. Se
consigue que el resultado sorpresa porque al titular de “Legalmente, estas páginas suele distinguir por te-
Victor no deberían existir pues ner un color distinto al
de una búsqueda incluya, la web le parezca genial que
Domingo, nuestras leyes no permiten resto del texto, estar su-
además de las páginas de la desees publicar sus conte-
Asociación estas actividades”. brayado o representado
empresa titular del nombre, nidos dentro de tu página.
de internautas Sobre la utilización de tex- por una imagen. Al ha-
las páginas de aquellos que
insertan este nombre en un Aunque desde la Asociación tos, imágenes, programas. cer click sobre él, el na-
campo Meta.
Pon cuidado y no de Internautas se insiste en etcétera... en una web, el vegador carga la página
Tampoco se ajusta a dere- tendrás problemas que lo que es delito en la responsable de la Aso- correspondiente.
cho el truco de incluir en la “vida real” también lo es en ciación considera “lógico y
la Red, se recuerda además ético que se cite la fuente de
09 Marcos
página de una empresa el Y esto es todo, como po- También llamados “fra-
nombre comercial de la drás comprobar, la mayoría que Internet aún no está re- información, tal como pasa
mes”, son la división de
competencia. En especial de las cuestiones legales son gulado. Así, hay actividades en los medios de comuni- una página en varios
cuando el fin de esta prác- similares a las que se apli- que no son ilegales, pero cación tradicionales. apartados. Se utilizan en
tica sea que aparezca el can en la vida real. Lo mejor que los internautas consi- Con respecto al uso de fi- el diseño de páginas
nombre de la empresa cuan- es contar con el mejor alia- deran contrarias a la convi- cheros musicales MP3 este web para organizar la in-
do se está buscando la pá- do en estos casos (el senti- vencia: “Es el caso del asunto no está nada claro... formación y facilitar el
gina de la competencia. En do común) y, en caso de du- spamming, o envío masivo en estos momentos hay va- acceso a ella. Cuando se
estos casos se suele acabar da, actuar con cuidado. de correos electrónicos no rios contenciosos abiertos divide una web en sec-
ante los tribunales. Siguiendo esta máxima no solicitados. Tampoco es éti- en EEUU”. ciones que pueden mos-
Ahora ya sabes todo lo tendrás problemas. co, y posiblemente tampo- Para Victor Domingo, “la trar páginas web inde-
que no puedes insertar en Pues ya se puede decir co legal, que se introduzcan mayoría de los internautas pendientes, a cada una
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- de estas secciones se la
prohibiciones parece más master, formado en todos nales. La Agencia de Pro- dad vigente y cuando algo denomina marco o fra-
grave de lo que realmente los aspectos necesarios pa- tección de Datos tiene no está claro si es legal o me. Al contenedor que
es. Si te ciñes a tu propio tra- ra desarrollar tu web per- abiertos varios expedientes ilegal se atiende a la Neti- incluye el grupo de mar-
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 cos se le llama página
sertas fotos y textos pro- cluso, dedicarte a ello mingo. relaciones en la Red, y al de marcos. También se
Respecto a las páginas que sentido común. Desde lue- suele utilizar para crear
pios, no vas a tener ningún profesionalmente).
incitan al racismo, terroris- go, no todo el mundo se tablas de contenido, que
problema. Además, resulta En Computer Hoy espe- permanecen en pantalla
más original crear tus pro- ramos que hayas disfrutado mo o pedofilia, los respon- atiene a estas normas y es
mientras te desplazas
pios contenidos en vez de con este curso y que pases sables de la Asociación cre- aquí donde deben interve-
por la web.
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

You might also like