Professional Documents
Culture Documents
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
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
▼
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
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
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:
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
cionar la entrada
68 Nº 35
Profesional Programación en HTML, 2a Parte
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
Nº
Nº
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
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
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 $ .
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
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 .
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 .
78 Nº 37
Profesional Programación en HTML, 3ª Parte
▼
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-
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
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
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,
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.
4 Haz click en
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.
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
E curso de creación de
páginas web HTML 01
has aprendido a crear títu-
ne un aspecto similar a éste
▼
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.
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
▼
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-
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
70 Nº 39
40_72_77_PROFESIONAL 5/4/00 19:32 Página 72
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
▲
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-
atención, porque algunos pa- coloque justo al final del có- 04 Cuadro
de diálogo
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 .
▲
3
▼
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
X Gama de colores
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
▼
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-
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
▲
5 1 3
▼
66 Nº 41
Profesional Programación en HTML, 7ª Parte
Preparación 66
Definición de los frames 67
Frames en cascada 68
▼
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.
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:
68 Nº 42
Profesional Programación en HTML, 7a Parte
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
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
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 .
▲
▼
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
.
9 Cierra Internet Explorer
haciendo click en .
80 Nº 43
Profesional Programación en HTML, 9ª Parte
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
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
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
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:
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
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-
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.
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 .
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
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-
▼
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.
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
68 Nº 46
Profesional Programación en HTML, 12ª Parte
▼
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
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
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.
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.
▲
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-
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-
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.
▼
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”.
■